Tableless Layouts Mở Frontiers thiết kế mới
Có nhiều lý do không sử dụng bảng để bố trí . Một trong những lý do thường xuyên nhất mà mọi người đưa ra để tiếp tục sử dụng chúng là vì rất khó để làm bố cục với CSS. Mặc dù CSS scripting đòi hỏi một đường cong học tập, khi bạn hiểu cách bố trí CSS, bạn có thể ngạc nhiên về mức độ dễ dàng của nó. Và một khi bạn tìm hiểu, bạn sẽ giải quyết lý do phổ biến thứ hai mà mọi người đưa ra vì không sử dụng CSS— “Nhanh hơn để viết bảng.” Nó nhanh hơn vì bạn biết bảng, nhưng khi bạn học CSS, bạn có thể nhanh chóng với.
Hỗ trợ trình duyệt định vị CSS
Định vị CSS được hỗ trợ tốt trong tất cả các trình duyệt hiện đại . Trừ khi bạn đang xây dựng một trang web cho Netscape 4 hoặc Internet Explorer 4, người đọc của bạn sẽ không gặp bất kỳ sự cố nào khi xem các trang Web định vị CSS của bạn.
Suy nghĩ lại cách bạn xây dựng một trang
Khi bạn xây dựng một trang web bằng cách sử dụng bảng, bạn phải suy nghĩ theo định dạng bảng . Nói cách khác, bạn đang suy nghĩ về các ô và các hàng và cột. Các trang web của bạn sẽ phản ánh cách tiếp cận này. Khi bạn chuyển sang thiết kế định vị CSS, bạn sẽ bắt đầu nghĩ đến các trang của mình theo nội dung, vì nội dung có thể được đặt ở bất cứ nơi nào bạn muốn trong bố cục — thậm chí được xếp chồng lên trên các nội dung khác.
Các trang web khác nhau có cấu trúc khác nhau. Để xây dựng một trang hiệu quả, hãy đánh giá cấu trúc của bất kỳ trang nào trước khi bạn gán nội dung cho nó. Trang ví dụ có thể bao gồm năm phần riêng biệt:
- Tiêu đề . Trang chủ cho quảng cáo biểu ngữ, tên trang web, liên kết điều hướng, tiêu đề bài viết và một số thứ khác.
- Cột bên phải . Đây là phía bên phải của trang với hộp tìm kiếm, quảng cáo, hộp video và khu vực mua sắm.
- Nội dung . Nội dung của bài viết, bài đăng trên blog hoặc giỏ hàng — thịt và khoai tây của trang.
- Quảng cáo nội tuyến . Các quảng cáo nội tuyến bên trong nội dung.
- Chân trang . Điều hướng dưới cùng, thông tin tác giả, thông tin bản quyền, quảng cáo biểu ngữ thấp hơn và các liên kết có liên quan.
Thay vì đặt năm phần tử đó trong một bảng, hãy sử dụng các phần tử phân đoạn HTML5 để xác định các phần khác nhau của nội dung và sau đó sử dụng định vị CSS để đặt các phần tử nội dung trên trang.
Xác định các phần nội dung của bạn
Sau khi bạn đã xác định các khu vực nội dung khác nhau của trang web, bạn cần phải viết chúng vào HTML của bạn. Mặc dù, thông thường, bạn có thể đặt các phần của mình theo bất kỳ thứ tự nào, bạn nên đặt các phần quan trọng nhất của trang trước tiên. Cách tiếp cận này cũng sẽ giúp tối ưu hóa công cụ tìm kiếm.
Để minh họa định vị, hãy hình dung một trang có ba cột nhưng không có đầu trang hoặc chân trang. Bạn có thể sử dụng định vị để tạo bất kỳ kiểu bố cục nào bạn thích.
Đối với bố cục ba cột, hãy xác định ba phần: cột bên trái, cột bên phải và nội dung.
Các phần này sẽ được khởi tạo bằng phần tử ARTICLE cho nội dung và hai phần tử SECTION cho hai cột. Mọi thứ cũng sẽ có một thuộc tính xác định nó. Khi bạn sử dụng thuộc tính id, bạn phải gán một tên duy nhất cho mỗi id.
Định vị nội dung
Sử dụng CSS, xác định vị trí cho các phần tử ID của bạn. Lưu trữ thông tin vị trí của bạn trong một cuộc gọi kiểu như thế này:
#Nội dung {
}
Nội dung trong các yếu tố này sẽ chiếm nhiều không gian nhất có thể, cụ thể là 100 phần trăm chiều rộng của vị trí hiện tại hoặc trang. Để ảnh hưởng đến vị trí của một phần mà không ép nó vào một chiều rộng cố định, hãy thay đổi phần đệm hoặc các thuộc tính lề.
Đối với bố cục này, đặt hai cột thành độ rộng cố định và sau đó đặt vị trí của chúng tuyệt đối, sao cho chúng không bị ảnh hưởng bởi vị trí chúng được tìm thấy trong HTML.
#Cột bên trái {
vị trí: tuyệt đối;
trái: 0;
chiều rộng: 150px;
lề trái: 10px;
margin-top: 20px;
màu: # 000000;
đệm: 3px;
}
#Cột bên phải {
vị trí: tuyệt đối;
trái: 80%;
trên cùng: 20px;
chiều rộng: 140px;
padding-left: 10px;
z-index: 3;
màu: # 000000;
đệm: 3px;
}
Sau đó, đối với khu vực nội dung, đặt lề ở bên phải và bên trái sao cho nội dung sẽ không chồng chéo hai cột bên ngoài.
#Nội dung {
trên cùng: 0px;
lề: 0px 25% 0 165px;
đệm: 3px;
màu: # 000000;
}
Việc xác định trang của bạn bằng cách sử dụng CSS thay vì một bảng HTML đòi hỏi kỹ năng kỹ thuật cao hơn một chút, nhưng phần thưởng sẽ dựa trên các thiết kế linh hoạt hơn và dễ dàng hơn trong việc điều chỉnh cấu trúc cho trang của bạn sau này.