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

SEO – Search Engine Optimization
www.themegallery.com
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
ttp://ctit-vn.com
 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
ttp://ctit-vn.com
 Các ưu điểm của TABLE đã tạo nên xu thế
thiết kế trong 1 thời gi an 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 hay CSS tốt?

TABLE VS DIV (tt)
ttp://ctit-vn.com
 Vì sao DIV tương thích với các SE?
• />• /> Xem ví dụ 4-3-1 và 4-3- 2
TỐI ƯU HÓA LAYOUT TABLE
ttp://ctit-vn.com
 Một tra ng 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)
ttp://ctit-vn.com
 />TỐI ƯU HÓA LAYOUT DIV
ttp://ctit-vn.com
 Thực tế …
 />LỜI KHUYÊN
 Ngừng sử dụng TABLE để chuyển sang DIV
• TABLE làm cho kích cỡ trang web tăng lên
ttp://ctit-vn.com
• 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.

ttp://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.