kỹ thuật thu nhỏ đối tượng trong design (layout)...- khoái quát 1 template mình sẽ...
TRANSCRIPT
Kỹ thuật thu nhỏ đối tượng trong Design (Layout)
Viết bởi : Steve Smith
http://smith9x.wordpress.com
- Kỹ thuật này do mình tự nghĩ ra, đơn giản hóa cụ thể như sau :
+ Ta sẽ thiết kế các đối tượng lớn nhất đi xuống thiết kế các đối tượng nhỏ hơn, cần phải thiết lập
chuẩn xác các đối tượng lớn. ( Ta có Body là lớn nhất ở website, nó được coi là gốc của các đối tượng).
+ Ở dưới mình có 1 Template mẫu : Live demo http://www.templateaccess.com/wpdemos3/wp005/
+ Hoặc bạn đã có kiến thức Photoshop có thể tự vẽ 1 Template cho riêng mình.
- Khoái quát 1 Template mình sẽ sử dụng kỹ thuật thu nhỏ đối tượng trong design như sau :
+ Ở template trên ta thấy kích thước website rộng là : 960px, còn lại là màu nền sẽ tràn ra toàn
bộ website.
- Mình đã dùng kỹ thuật thu nhỏ đối tượng trong design để khái quát lại các đối tượng
chính như tấm hình trên rồi đó. Như vậy mô hình này là kỹ thuật xây dựng
Layout(khung) cho website.
- Viền màu xanh là Body (Lớp gốc), còn lại các viền màu đỏ là Block (Khối) (Lớp cha), đây
chính là các đối tượng lớn nhất sẽ ở sau Body để cấu thành nên website .
• Tiếp tục thu nhỏ đối tượng để làm việc , ở đây mình sẽ dùng Block 1 ở hình trên để phân tích
tiếp và thu nhỏ tiếp các đối tượng. Ở hình dưới ta thấy Block 1 sẽ là gốc của các Block (Title,
description, sumary, link) [ Lớp con] . Mình sẽ lấy Block Title để thu nhỏ tiếp nhé, trong Title ta
lại có Style(Css) .
Code:
<h6>In the blog</h6>
<p style=”color: gray”>Lorem ipsum dolor slit, sed do eiusmod polu</p>
Còn 1 vài thuộc tính nữa nhưng cơ bản là đã xuất hiện đúng như trong hình dưới. Tất cả các Block ở bên
trong Block 1 cũng sẽ như vậy.
THIẾT KẾ ĐỐI TƯỢNG
- Việc thiết kế sẽ rất đơn giản nếu như bạn đã am hiểu mô hình thu nhỏ đối tượng thiết
kế như ở trên.
- Tiếp theo cần phải thiết kế các đối tượng cha sau lớp gốc, làm sao xuất hiện ra cái khung
như chúng ta đã vẽ. Bạn cần có thông số chính xác từ bản vẽ nhé.
- Đầu tiên cứ viết hết sạch các đối tượng mà chúng ta đã phân tích ra. Hãy dựa vào cấu
trúc này để viết
Code:
<!-- Begin Comment Content Block -->
<div id=”Block”>
Content Block
</div>
<!—End Comment Block -->
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Smith" />
</head>
<body>
<!-- Begin Top Menu -->
<div id="TopMenu">
Top Menu
</div>
<!-- End Top Menu -->
<!-- Begin Header -->
<div id="Header">
Header
<!-- Begin Logo -->
<div id="Logo">
Logo
</div>
<!-- End Logo -->
<!-- Begin Social - Mạng xã hội -->
<div id="Social">
Social
</div>
<!-- End Social -->
</div>
<!-- End Header -->
<!-- Begin Menu Navigation - Menu Điều hướng-->
<div id="Navigation">
Menu Navigation
</div>
<!-- End Menu Navigation -->
<!-- Begin Slide Show-->
<div id="SlideShow">
Slide Show
</div>
<!-- End Slide Show -->
<!-- Begin Block 0 - Advertisement-->
<div id="block0">
Block 0 - Advertisement
</div>
<!-- End Block 0 -->
<!-- Begin Block 1 - Left Main Content-->
<div id="block1">
Block 1 - Left Main Content
</div>
<!-- End Block 1 -->
<!-- Begin Block 2 - Right Main Content-->
<div id="block2">
Block 2 - Right Main Content
</div>
<!-- End Block 1 -->
<!-- Begin Block 3 - Sub Block Footer Main-->
<div id="block3">
Block 3 - Sub Block Footer Main
</div>
<!-- End Block 3 -->
<!-- Begin Block 4 - Sub Block Footer Main-->
<div id="block4">
Block 4 - Sub Block Footer Main
</div>
<!-- End Block 4 -->
<!-- Begin Block 5 - Sub Block Footer Main-->
<div id="block5">
Block 5 - Sub Block Footer Main
</div>
<!-- End Block 5 -->
<!-- Begin Footer-->
<div id="footer">
Footer
</div>
<!-- End Footer -->
</body>
</html>
- Bạn sẽ view ra 1 list text, ok không sao, đừng hoang mang, hãy xử lý từng block
- Trước khi xử lý bạn hãy để ý Template Website của chúng ta nằm ở giữa màn hình,
nhưng Background lại tràn toàn bộ trang, chia thành từng phần background tràn riêng
biệt. Bạn có để ý thấy Top Menu, footer, sub block, body đều có nền riêng ko. Nhưng
chúng lại nằm ở giữa Website. Vậy ta sẽ xử lý như sau:
Bước 1 : Tạo 1 File Style.css và file HTML gọi file CSS này vào.
Bước 2: Viết thêm 1 <div> bao ngoài block có nền theo cấu trúc sau
Code :
<!-- Begin Top Menu -->
<div id="BgTopMenu"> // Chứa ảnh nền body riêng cho block
<div id="TopMenu">
Top Menu
</div>
</div>
Bước 3 : Mở file Style.css, đồng thời cắt nhỏ bức ảnh ở Block
Code : Style.css
*{ padding:0; margin: 0;} /* Thiết tập tất cả các thẻ HTML về 0 */
# BgTopMenu
{
Background: url(“. ./images/TopMenu.gif”) repeat-x; // Lặp lại bức ảnh theo
phương ngang
Width: 100%;
Height: 44px;
}
Bước 4 :Viết Code xử lý từng Block cha như Template chúng ta đã vẽ. Với các Block cha hãy
dựa cấu trúc này để viết cố định cho.
Code :
#Block {
Position: relative;
Margin: 0 auto; /* Chỉ dùng cho block xác định căn giữa,phải bỏ float */
Float: left; /* left hoặc right, dùng block căn trái phải, phải bỏ margin */
Width: 100px; /* 100px hoặc 10% */
Height: 100px; /* 100px hoặc 10% */
Clear: left; /*left, right, both: Ko cho bất kỳ 1 Block nào xâm phạm*/
}
Code tiếp: Block TopMenu cho ra giữa.
#TopMenu
{
margin: 0 auto;
width: 960px;
position: relative;
clear: both;
}
Ok bạn hãy hoàn thành tất cả như vậy với các Block khác !