Hướng dẫn thiết kế web với framework 960gs

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

960gs là một hệ thống lưới được phát triển như plugins hay templates để sử dụng với những phần mềm thiết kế như Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design...

Sử dụng hệ thống lưới 960 Grid System trong thiết kế website là thói quen tốt không phải bàn cãi. Có người bảo họ thiết kế theo free style nên không cần dùng lưới, ừ thì cũng được nhưng chắc chắn mẫu thiết kế đó không thuộc hàng đẳng cấp !

Thiết kế dựa trên Grid-Based (lưới)

Trước khi chúng tôi nhận được vào các chi tiết cụ thể của 960 Grid System, chúng ta hãy thảo luận ngắn dựa trên thiết kế dạng lưới. Ý tưởng này không phải bắt nguồi từ web. Thực tế, nó đã có từ lâu và dựa trên nguyên tắc cơ bản là canh đều.

Hãy xem xét hai bố cục trang đại diện trong hình dưới đây.



Mặc dù cả hai hình ảnh này chỉ đơn giản là một tập hợp của hình chữ nhật, bố trí ở đầu trang có vẻ tốt hơn so với phía dưới.

Hình ảnh dưới là mô hình không rõ ràng, không trình tự, hoặc mục tiêu cụ thể, nó chỉ trông giống như một hình dạng ngẫu nhiên.

Thiết kế dựa trên lưới là một trong những cách đơn giản và hữu dụng nhất để tạo ra trật tự trên một trang. Nó có vẻ lạnh lùng và cứng nhắc, nhưng hãy nhớ rằng cách thiết kế này là cực kỳ hiệu quả, và thậm chí khá linh hoạt.

Tại sao tôi cần thiết kế trên hệ thống lưới?

The 960 Grid System và các công cụ khác cung cấp một cách nhanh chóng và dễ dàng hệ thống lưới bằng cách sử dụng CSS. Nó đã được thử qua các trình duyệt và tối ưu hóa độ rộng cột để bạn thiết kế nội dung.

960 Grid System

960 Grid System là cách đơn giản để websites và sử dụng lưới cho độ rộng là 960 pixel.

Lý do chính để sử dụng kích cỡ 960 pixel là nó tương thích với hầu hết độ rộng của màn hình người sử dụng.

960 GS có 2 phần: 12-column grid (lưới 12 cột) và 16-column grid (lưới 16 cột)
Trong phiên bản 12 cột, cột hẹp nhất là 60 pixel. Mỗi cột sau rộng hơn 80 pixel. Giá trị các cột sẽ là: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 và 940.



Tương tự, trong 16 cột, cột hẹp nhất là 40 pixels wide. Mỗi cột sau rộng hơn 60 pixel.

Giá trị các cột sẽ là: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 và 940.

CSS Classes

Khi bạn nhìn vào biểu đồ trên, hãy xem xét mỗi một thanh màu xanh đen nằm ngang như một lớp CSS trong các hệ thống lưới 960 GS.

Để tạo một đối tượng trong bố cục của bạn đó, bạn chỉ cần gán class đó cho thẻ div!
Các Class đặt tên theo kích thước của chúng với grid_1 hẹp nhất và grid_12 là class là rộng nhất ( grid_16 là rộng nhất trong phiên bản 16-cột).

Vì vậy, hãy nghĩ đến cách bố trí thiết kế bằng CSS tương ứng độ rộng thay vì là pixel.



Ví dụ, sử dụng phiên bản 12-cột, nếu bạn có 3 thẻ divs của văn bản và bạn muốn được hiển thị theo bố trí 3-cột, chỉ cần gán class grid_4 cho mỗi cột với tổng số 12 (4+4+4=12).



Tương tự, gán grid_4 CSS class cho phiên bản 16-cột để dễ dàng tạo thiết kế 4 cột (4+4+4+4=16).



Để chắc chắn, bạn nên đặt các cột của mình trong thẻ div có class container_12 (tương tự với hệ thống cột 16)

Hãy xem xét hai ví dụ hình dưới đây. Ví dụ đầu tiên là bố trí thiết kế 4-cột bằng cách sử dụng grid_3 .

Tuy nhiên, trong phiên bản thứ hai, tôi đã đẩy cột đầu tiên và kéo cột cuối cùng, kết quả là vị trí của nó thay đổi.



Hãy ghi nhớ rằng bạn có thể đẩy các cột xa như bạn muốn. Nếu tôi đã muốn đẩy xa thêm hai cột trên, tôi sẽ gán class push_2

Việc đẩy / kéo có ý nghĩa lớn đối với cách nội dung trong tài liệu HTML.
Đầu tiên bạn muốn để logo tay trái, và sau đó bạn lại thực sự muốn nó xuất hiện ở trung tâm của trang.

Trước khi pushing/pulling:

Bạn dùng đoạn code HTML sau:

<div>
  <p>logo</p>
 </div>

 <div>
  <p>text column</p>
 </div>

 <div>
  <p>text column</p>
 </div>

 <div>
  <p>big box</p>
 </div>

Đây là kết quả

Sau khi pushing/pulling:

Những khoảng không mở

Nếu bạn muốn tạo ra không gian mở (một thiết kế tốt luôn có không gian mở). Để thực hiện điều này, áp dụng prefix và suffix class. Nó giống với push và pull class.



Như bạn thấy, ví dụ trên sử dụng một suffix_3 class để tạo ra một không gian trống bằng độ rộng của ba cột.

Ghi nhớ

Bạn luôn phải nhớ là sử dụng class alpha (“đầu tiên”) và omega (“cuối”) cho bất kỳ một dịnh dạng cột nào. Class alpha dùng cho cột đầu tiên và class omega là cho cột cuối cùng. Về cơ bản, các class này cung cấp một số tính năng để có thể kết hợp hoặc lồng với các lưới khác.

Xem lại

Với những kiến thức này, bạn sẽ sử dụng 960 Grid System thành thạo hơn
5 khái niệm cần nhớ:

1. Sử dụng class container_12 cho phiên bản 12 cột và class container_16 cho phiên bản 16 cột.
2. Sử dụng grid_1, grid_2, grid_3, etc. để định độ rộng cho cột. Nếu bạn muốn lấp đầy trang theo chiều ngang, Hãy nhố tăng giá trị nó lên 12 hay 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
3. Dùng class push và pull thay đổi vị trí của một thành phần trong trang.
4. Dùng class prefix và suffix để tạo không giản mở cho thiết kế của bạn.
5. Dùng class alpha và omega để có thể kết hợp hoặc lồng các lưới với nhau.

Một vài công cụ và tài liệu tham khảo 960 Grid System

Fluid 960 Grid System

Một phiên bản của 960 GS! Fluid giúp bố trí bố trí nội dung trong Trang. Điều này có thể làm ra một số mã phức tạp, Sử dụng hệ thống năng đồng nghĩa với việc bạn đã giải quyết những phần khó nhất cho một thiết kế.

The 1KB CSS Grid

Một phiên bản đơn giản và dễ hiểu của 960 GS,. Nó rất dễ chỉnh sửa.

Variable Grid System

Một lưới CSS đơn giản và linh hoạt dựa trên 960 Grid System.

Grid-Based Design Gallery

Nếu bạn đang hoài nghi về 960 Grid và hệ thống lưới, hãy kiểm tra thiết kế bộ sưu tập này.

Typogridphy

Tiny Fluid Grid

vnwordpress.com - dịch và biên tập từ: Sixrevisions