Chúng ta sẽ bắt đầu với mẫu design trên . Hãy quan sát 1 lượt layout này, ta thấy nó khá là simple ( I like this)
- Chia các phần chính của layout:
Đầu tiên ta hãy quan sát sơ qua để có đánh giá chung về giao diện. Ta thấy nó được chia thành những phần chính như sau:
- Header
- Main content
- Left
- Center
- Right
- Footer
Ta sẽ tạo các đường guide chính như sau:
Lưu ý là bề rộng của trang ta sẽ xác định vào khoảng 990px (đường guide bên cùng tay phải)
- HTML cho layout chính:
Sau khi đã có được các đường guide ta sẽ bắt tay vào viết sườn HTML cho trang, dựa trên những gì ta đã có ở phía trên.
1: <div id="wrap">
2: <div id="header">
3: header
4: </div>
5: <div id="mainpage">
6: <div id="left-col">
7: left
8: </div>
9: <div id="main-col">
10: main
11: </div>
12: <div id="right-col">
13: right
14: </div>
15: </div>
16: <div id="footer">
17: footer
18: </div>
19: </div>
Preview ta sẽ thấy giao diện của chúng ta chạy 1 hàng từ trên xuống dưới trông khá là ngộ 
. Và tiếp theo … Hãy bắt nó làm theo ý chúng ta. Nhưng trước tiên ta hãy làm 1 bước nhỏ nữa để preview cho chính xác.
Hãy cắt mẫu design của chúng ta theo những đường guide ở trên và insert các part đó vào.
1: <div id="wrap">
2: <div id="header">
3: <img src="header.jpg" alt="header" />
4: </div>
5: <div id="mainpage">
6: <div id="left-col">
7: <img src="left.jpg" alt="left" />
8: </div>
9: <div id="main-col">
10: <img src="center.jpg" alt="center" />
11: </div>
12: <div id="right-col">
13: <img src="right.jpg" alt="right" />
14: </div>
15: </div>
16: <div id="footer">
17: <img src="footer.jpg" alt="footer" />
18: </div>
19: </div>
Preview and U’ll c wat happen
- CSS cho Layout chính:
Ta đã có khung sườn cho giao diện của chúng ta, vấn đề còn lại bây giờ là dùng CSS để control các box vào đúng vị trí của nó.
Để dễ hiểu ta hãy nhìn vào hình trên:
A : Giao diện hiện nay chúng ta có
B : Hãy đẩy các phần tương ứng qua đúng vị trí của nó
C : Almost done!
D : Final result !
Bắt tay vào nào !
Đầu tiên copy hết đoạn CSS sau bỏ vào file CSS của bạn:
1: /***** Global Settings *****/
2:
3: html, body {
4: border:0;
5: margin:0;
6: padding:0;
7: }
8:
9: body {
10: font:100%/1.25 arial, helvetica, sans-serif;
11: }
12:
13: /***** Common Formatting *****/
14:
15: h1, h2, h3, h4, h5, h6 {
16: margin:0;
17: padding:0;
18: font-weight:normal;
19: }
20:
21: h1 {
22: padding:30px 0 25px 0;
23: letter-spacing:-1px;
24: font:2em arial, helvetica, sans-serif;
25: }
26:
27: h2 {
28: padding:20px 0;
29: letter-spacing:-1px;
30: font:1.5em arial, helvetica, sans-serif;
31: }
32:
33: h3 {
34: font:1em arial, helvetica, sans-serif;
35: font-weight:bold;
36: }
37:
38: p, ul, ol {
39: margin:0;
40: padding:0 0 18px 0;
41: }
42:
43: ul, ol {
44: list-style:none;
45: padding:0 0 18px 40px;
46: }
47:
48: blockquote {
49: margin:22px 40px;
50: padding:0;
51: }
52:
53: small {
54: font-size:0.85em;
55: }
56:
57: img {
58: border:0;
59: }
60:
61: sup {
62: position:relative;
63: bottom:0.3em;
64: vertical-align:baseline;
65: }
66:
67: sub {
68: position:relative;
69: bottom:-0.2em;
70: vertical-align:baseline;
71: }
72:
73: acronym, abbr {
74: cursor:help;
75: letter-spacing:1px;
76: border-bottom:1px dashed;
77: }
78:
79: /***** Links *****/
80:
81: a, a:visited {
82: text-decoration:none;
83: }
84:
85: /***** Forms *****/
86:
87: form {
88: margin:0;
89: padding:0;
90: display:inline;
91: }
92:
93: input, select, textarea {
94: font:1em arial, helvetica, sans-serif;
95: }
96:
97: textarea {
98: line-height:1.25;
99: }
100:
101: label {
102: cursor:pointer;
103: }
104:
105: /***** Tables *****/
106:
107: table {
108: border:0;
109: margin:0 0 18px 0;
110: padding:0;
111: }
112:
113: table tr td {
114: padding:2px;
115: }
116:
117: /***** Global Classes *****/
118:
119: .clear { clear:both; }
120:
121: .float-left { float:left; }
122: .float-right { float:right; }
123:
124: .text-left { text-align:left; }
125: .text-right { text-align:right; }
126: .text-center { text-align:center; }
127: .text-justify { text-align:justify; }
128:
129: .bold { font-weight:bold; }
130: .italic { font-style:italic; }
131: .underline { border-bottom:1px solid; }
132: .highlight { background:#ffc; }
133:
134: .img-left { float:left;margin:4px 10px 4px 0; }
135: .img-right { float:right;margin:4px 0 4px 10px; }
136:
137: .nopadding { padding:0; }
138: .noindent { margin-left:0;padding-left:0; }
139: .nobullet { list-style:none;list-style-image:none; }
Các bạn có thể download ở đây.
Đâu tiên là “wrap”, như ta đã xác định trang chúng ta sẽ cố định ở 990px. Ta sẽ có:
1: #wrap {
2: width:990px;
3: margin:0 auto; /*For center alignment*/
4: }
Tiếp theo là “mainpage”, đây là div lớn chưa cả 3 div “left-col”, “main-col” và “right-col” :
1: #mainpage {
2: width:100%;
3: position:relative;
4: }
Cả 2 phần này đều khá đơn giản và dễ hiểu, nên không cần giải thích gì thêm.
Phần tiếp theo khá khó, đó là 3 div con của “mainpage”
Đầu tiên ta nhận định ta sẽ cần kéo 2 cột left và main sang trái và cột right sang phải.
1: #left-col{
2: float:left;
3: }
4: #main-col{
5: float:left;
6: }
7: #right-col{
8: float:right;
9: }
Preview! Excellent!! Right ??
To be continue ……!!!
- Header:
- Topnav:
- Menu nav:
- Banner – logo:
- Left:
- Main:
- Right:
- Footer:
