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.
Code: 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 <!-- Begin Comment Content Block --> <div id= Block > Content Block <! 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 <!-- End Top Menu --> <!-- Begin Header --> <div id="header"> Header <!-- Begin Logo --> <div id="logo"> Logo <!-- End Logo --> <!-- Begin Social - Mạng xã hội --> <div id="social"> Social <!-- End Social --> <!-- End Header --> <!-- Begin Menu Navigation - Menu Điều hướng--> <div id="navigation">
Menu Navigation <!-- End Menu Navigation --> <!-- Begin Slide Show--> <div id="slideshow"> Slide Show <!-- End Slide Show --> <!-- Begin Block 0 - Advertisement--> <div id="block0"> Block 0 - Advertisement <!-- End Block 0 --> <!-- Begin Block 1 - Left Main Content--> <div id="block1"> Block 1 - Left Main Content <!-- End Block 1 --> <!-- Begin Block 2 - Right Main Content--> <div id="block2"> Block 2 - Right Main Content <!-- End Block 1 --> <!-- Begin Block 3 - Sub Block Footer Main--> <div id="block3"> Block 3 - Sub Block Footer Main <!-- End Block 3 --> <!-- Begin Block 4 - Sub Block Footer Main--> <div id="block4"> Block 4 - Sub Block Footer Main <!-- End Block 4 --> <!-- Begin Block 5 - Sub Block Footer Main--> <div id="block5"> Block 5 - Sub Block Footer Main <!-- End Block 5 --> <!-- Begin Footer--> <div id="footer"> Footer <!-- 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 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; } Code : 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. #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!