Tìm hiểu về 960 Grid – CSS Framework

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Để tiết kiệm thời gian, công sức cho những công việc phải lặp đi lặp lại. Tuy đây là một framework rất 960 Grid là một CSS Framework, mục đích của nó là giúp những người thiết kế web có thể tiết phổ biến nhưng lại thiếu trầm trọng tài liệu hướng dẫn. Nếu đây là lần đầu tiên bạn mới làm quen với 960 Grid, thì bạn không khỏi bối rối khi xem mã của nó. Trong bài này chúng ta sẽ khám phá những tính năng của 960 Grid và cách sử dụng nó.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Trước đây tôi luôn nghĩ là những CSS Framework không thực sự cần thiết bởi vì CSS rất đơn giản và trực quan. Chúng ta không cần phải nhờ đến sự hỗ trợ của framework để hoàn thành giao diện một trang web. Cho đến khi có nhiều người email về hỏi cách sử dụng 960 Grid, qua tìm hiểu sơ qua về framework này, thì tôi biết rằng …. rất có thể tôi đã sai lầm khi nghĩ về các CSS Framework.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Đã bao nhiêu lần bạn phải float một cột sang trái, một cột sang phải, float logo sang trái, navigation sang phải, tính toán kích thước của từng thành phần để khỏi bị vỡ giao diện v.v..? Tôi cũng vậy và còn nhiều designer khác cũng thế. 960 Grid ra đời để giúp bạn giản lược những bước này và cho phép bạn bắt tay ngay vào phần trình bày nội dung.[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']960 Grid hoạt động như thế nào[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']960 Grid được thiết kế dựa trên một mạng lưới tọa độ. Các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này và toàn bộ trang web có chiều rộng là 960 Pixel. Sở dĩ nó là 960 mà không phải là những số khác là vì kích thước này phù hợp với đa số các độ phân giải màn hình và cũng rất dễ để chia đều cho các cột. Các cột có margin là 20px, đây cũng là kích thước margin phổ biến nhất để nội dung nhìn thoáng đãng và không bị rối.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/bg_upanh/v/9rl45j9k6oi.htm][img]http://nr2.upanh.co...

[url=http://960.gs/][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'; color: blue]960 Grid[/size][/url][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'] có 3 mạng lưới chính, giao diện 12 cột, 16 cột và 24 cột. Tuy số lượng cột khác nhau nhưng kích thước không vượt quá 960 Pixel. Trong đa số các trường hợp, bạn có thể sử dụng giao diện 12 cột để thiết kế. Nhưng nếu bạn muốn có mạng lưới nhỏ hơn để tinh chỉnh các thành phần phức tạp hơn, thì bạn có thể sử dụng giao diện 16 và 24 cột. Trong bài này chúng ta sẽ nghiên cứu về giao diện 12 cột, cách áp dụng cho 2 giao diện còn lại hoàn toàn tương tự.[/size]

[url=http://github.com/nathansmith/960-Grid-System/zipball/master][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'; color: blue]download CSS Framework[/size][/url][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'] này về đã[/size][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']. Sau khi [url=http://github.com/nathansmith/960-Grid-System/zipball/master][color=blue... và giải nén bạn chỉ cần chú ý tới thư mục code.
[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Trong đây sẽ có những file CSS như: reset.css, text.css và 960.css. Quan trọng nhất là file [b]960.css[/b]. Hai file kia bạn có thể giữ hoặc xóa tùy ý, nó chỉ có tác dụng reset thôi. Đa phần thì bạn nên giữ lại vì nó chứa những kiểu reset tốt nhất cho trang web.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Bạn cũng nên lưu ý nó có hai phiên bản: một đã nén với dung lượng nhỏ hơn còn một phiên bản chưa nén để chúng ta có thể làm việc với nó. Nếu bạn muốn làm trên trang web thật, thì hãy dùng phiên bản đã nén để giảm dung lượng xuống. Còn nếu bạn đang tập làm thì dùng phiên bản chưa nén để có thể xem code bên trong như thế nào.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Để sử dụng 960 Grid, bạn cần chèn đoạn mã sau vào phần

của tài liệu HTML, như cách chúng ta liên kết đến các file CSS thông thường.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']



Izwebz - 960 Grid System Intro
[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Thường thì bạn nên giữ nguyên file [b]960.css[/b] mà không cần thay đổi gì cả. Bạn chèn thêm một file [b]style.css[/b] vào và bạn có thể thêm những dòng code của mình vào file này.[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Làm việc với 960 Grid System[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Khi bạn xem biểu đồ dưới đây, hãy tưởng tượng mỗi một hộp sẽ là một CSS Class trong hệ thống 960 Grid. Để tạo một đối tượng với kích thước bằng các cột này, bạn chỉ cần gán một class tương ứng cho nó. Những CSS Class này được đặt tên theo thứ tự từ grid_1 cho đến grid_12. Class grid_1 sẽ là cột có kích thước nhỏ nhất và grid_12 sẽ là cột có kích thước lớn nhất.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/bg_upanh/v/9rl45j9k6oi.htm][img]http://nr2.upanh.co...

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Trong giao diện 12 cột mà chúng ta sẽ sử dụng trong bài này, mỗi cột có kích thước là 60px và sẽ tăng dần lên 80px cho mỗi cột kế tiếp. Do vậy nếu bạn muốn một đối tượng có kích thước là 380px thì bạn sẽ phải dùng 5 cột và trong mã HTML bạn sẽ khai báo như sau.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Với sự trợ giúp của những class này, bạn có thể dựng một giao diện phức tạp chỉ trong vòng một thời gian rất ngắn. Để cho đối tượng có chiều rộng tối đa là 940 Pixel, thì bạn chỉ cần khai báo cho đối tượng đó có class là grid_12 trong tài liệu HTML.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

Big box

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Để ba cột còn lại nằm song song với nhau thì bạn cần viết mã HTML như sau:[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

Cột 1
Cột 2
Cột 3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Ở đây bạn chú ý rằng để hệ thống này hoạt động đúng đắn, bạn phải tạo một thẻ

bao quanh lấy các thành phần khác. Sau đó bạn sẽ đặt tên các class theo số lượng cột mà bạn muốn. [/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Ngoài ra còn có các Class cần thiết khác phục vụ cho nhu cầu chỉnh sửa các cột trong 960 grid:
[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Push và Pull[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Nếu bạn xem trong file 960.css khi tải về, bạn sẽ thấy có 2 class là .pull_1 đến .pull_12 và push_1 đến push_12. Hai Class này được sử dụng để thay đổi vị trí của các thành phần trên trang theo chiều ngang. Ví dụ dưới đây ta có một giao diện 3 cột, vì một lý do nào đó bạn muốn đẩy cột bên tay trái vào trong 1 cột và kéo cột bên tay phải vào trong 2 cột bạn có thể khai báo HTML như sau:[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

Push me if you can
I am out of this
Pull me if you can

[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Suffix và Prefix[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Để tạo ra khoảng trống lớn giữa hai thành phần bạn có thể sử dụng hai class là Suffix và Prefix. Để tạo ra khoảng trống bằng 2 cột đằng sau một thành phần dùng Class suffix_2, hoặc tạo ra một khoảng trống bằng 4 cột ở trước một thành phần dùng prefix_4.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Ví dụ ta có 2 thẻ div như sau:[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

grid_3
grid_3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/upanh_suffix_prefix/v/4rl37ach1jx.htm][img]http://n...

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Bây giờ bạn muốn đẩy thẻ div thứ hai sang bên tay phải, bạn có thể làm như sau:[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

grid_3
grid_3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/upanh_suffix_prefix_1/v/drlf9a5h9at.htm][img]http:/...

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Khi bạn thêm Class suffix_5 vào thẻ div đầu tiên, nó sẽ đẩy thẻ div thứ 2 lùi sang phải 5 ô. Bạn có thể thử với prefix sẽ cho kết quả ngược lại.[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Alpha và Omega[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Đây là 2 Class đặc biệt của 960 Grid dùng để loại bỏ đường biên margin của đối tượng đầu và cuối. Ví dụ bạn có mã HTML như sau:[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

grid_3
grid_3
grid_3
grid_3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Khi xem trên trình duyệt bạn sẽ bị như hình dưới. Vấn đề ở đây là do chúng ta lồng 4 thẻ div vào trong một thẻ

id=”bigBog” class=”grid_12″

và tất nhiên giá trị Margin của nó vẫn còn và làm tăng kích thước của 4 thẻ này lên làm 20px (margin trái + margin phải 10+10 = 20). Đây chính là lý do mà bạn thấy ở hình dưới.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

grid_3
grid_3
grid_3
grid_3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/upanh_alpha_omega/v/7rl52a4uaqn.htm][img]http://nr0...

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Để khắc phục bạn có thể sử dụng hai Class đặc biệt là Alpha và Omega.[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']

grid_3
grid_3
grid_3
grid_3

[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][img][url=http://www.upanh.com/alpha_omega_1_upanh/v/8rlf4a2u3xm.htm][img]http://n...

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Với hai Class là alpha và omega được thêm vào, bạn sẽ thấy đường biên của hai phần tử đầu và cuối bị mất đi và giao diện của chúng ta hoạt động bình thường.[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Tóm tắt[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Bài này không quá dài nhưng lại chứa rất nhiều thông tin cho một lần đọc, do vậy cho những ai ngại đọc, đây là những ý chính của bài này [/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']1. Sử dụng Class container_12 hoặc container_16 cho thẻ div bao quanh với những giao diện 12 hoặc 16 cột.
2. Sử dụng Class grid_1 cho đến grid_12 để xác lập độ rộng của từng cột. Nếu bạn muốn cột đó có độ rộng tối đa là 960 Pixel thì cho nó class là grid_12
3. Sử dụng Class Push và Pull để định vị từng phần tử riêng lẻ trên trang mà không cần quan tâm đến vị trí của nó trong tài liệu HTML.
4. Sử dụng Prefix và Suffix để tạo khoảng trắng trước và sau phần tử.
5. Sử dụng Alpha và Omega để loại bỏ đường biên của phần tử đầu và phần tử cuối.[/size]

[b][size= 10.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Điểm mạnh và mặt hạn chế của 960 Grid[/size][/b]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Như bất cứ cái gì cũng có 2 mặt, 960 Grid cũng có những điểm mạnh và mặt hạn chế như sau. Bạn có thể tham khảo và quyết định xem mình có nên sử dụng CSS framework không.[/size]

[b][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Điểm mạnh[/size][/b][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][/size]

  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Tiết kiệm thời gian[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Tương thích nhiều trình duyệt phổ biến[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Thiết kế theo chuẩn tọa độ[/size]

[b][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Mặt han chế[/size][/b][size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'][/size]

  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Phải có kiến thức trên mức cơ bản về CSS.[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Phụ thuộc vào Framework khiến bạn mất tự do.[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Thêm nhiều class “vớ vỉn” vào mã HTML.[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Mất thời gian để học về hệ thống framework đó.[/size]
  • [size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']Kích thước trang web không thể vượt quá 960 Pixel[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'] [/size]
[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']File báo cáo: http://www.mediafire.com/?4564388k4xjb2ww
[/size]
[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']
lop12th01[09050029][09050015][09050082][/size]
[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']
[/size]
[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman']
[/size]

[size= 12.0pt; font-family: 'Times New Roman','serif'; mso-fareast-font-family: 'Times New Roman'] [/size]