Tài liệu Xu hướng thiết kế web doc

TỐI ƯU BỐ CỤC TRANG Xu hướng thiết kế web TABLE vs DIV Tối ưu hóa layout TABLE Tối ưu hóa layout DIV Lời khuyên Những điểm lưu ý... XU HƯỚNG THIẾT KẾ WEB Có 2 xu hướng thiết kế web: TA

TỐI ƯU BỐ CỤC TRANG

Xu hướng thiết kế web

TABLE vs DIV

Tối ưu hóa layout TABLE

Tối ưu hóa layout DIV

Lời khuyên Những điểm lưu ý

XU HƯỚNG THIẾT KẾ WEB

 Có 2 xu hướng thiết kế web:

TABLE được sử dụng phổ biến vì:

• TABLE lồng nhau

• DIV

• Hình ảnh, văn bản trình bày trực quan

• Thời gian thiết kế nhanh

• Tương thích tốt các loại trình duyệt

• Thời gian học nhanh

Xu hướng chuyển dịch khi DIV xuất hiện

TABLE VS DIV

http://hoangnguyen.edu.vn http://ctit-vn.com

thiết kế trong 1 thời gian dài

 Các ưu điểm của DIV:

• Dung lượng của file HTML nhỏ  thời gian tải trang nhanh hơn (50%)

• Tách biệt thiết kế và nội dung

• Tương thích với các SE

• Dễ dàng thay đổi và kiểm soát bố cục thông qua ID

TABLE VS DIV (tt)

 Vì sao DIV tương thích với các SE?

• http://seo-course.webchuyennghiep.net/vidu-4-3-1.html

• http://seo-course.webchuyennghiep.net/vidu-4-3-2.html

 Xem ví dụ 4-3-1 và 4-3-2

TỐI ƯU HÓA LAYOUT TABLE

http://hoangnguyen.edu.vn http://ctit-vn.com

 Một trang web được thiết kế với TABLE có nội dung chính nằm ở ô bên phải và phía dưới

 Spider đọc nội dung 1 trang web từ trên xuống

và từ trái qua  spider duyệt qua rất nhiều dòng

mã trước khi đến nội dung chính

TỐI ƯU HÓA LAYOUT TABLE (tt)

 http://www.seo-course.webchuyennghiep.net/vidu-3-3-1.html

TỐI ƯU HÓA LAYOUT DIV

http://hoangnguyen.edu.vn http://ctit-vn.com

 http://www.seo-course.webchuyennghiep.net/vidu-3-3-2.html

LỜI KHUYÊN

• TABLE làm cho kích cỡ trang web tăng lên

• Thay đổi layout TABLE tốn

nhiều công sức & thời gian

• Gia tăng tỷ lệ mã trong nội

dung

• Không thể hiện đúng đắn với

smartphone hoặc PDA

Lạm dụng TABLE lồng nhau dẫn đến gia tăng

tỷ lệ mã trong nội dung.

NHỮNG ĐIỂM CẦN LƯU Ý

Dùng DIV để đặt nội dung vào phần đầu của trang web.

http://giaiphaplienket.com http://hoangnguyen.edu.vn

http://ctit-vn.com

TABLE sẽ gây trở ngại cho spider thu thập

thông tin trang web

Đảm bộ lộ trình của spider tiếp cận nội dung

trang web là ngắn nhất.