Công ty Giải Pháp Số Nhật Thành: Css với thiết kế web

Trong suốt vài năm vừa qua , Lập trình viên đã chuyển đổi từ kết cấu website dựa trên table sang kết cấu website dựa trên div. Đây là 1 thay đổi lớn nhưng cần phải xem lại ! Liệu lập trình viên có biết lý do của sự chuyển đổi này và họ có biết phải làm như thế nào? Đa số lập trình viên tránh xa sự rắc rối của table-based để rồi tiếp tục gặp rắc rối với div-based

Topweb đưa ra bài tổng kết các vấn đề hay gặp với kết cấu layout trong thiết kế web.Phần đầu sẽ giới thiệu về table và div,gồm 1 số ví dụ.Phần kế tiếp giới thiệu cách nào để viết code rõ ràng & dễ đọc. Phần cuối sẽ nhìn qua 1 số sản phẩm cho tương lai.

Table Hell
Bạn đang gặp rắc rối với table và website của bạn sử dụng table để thiết kế web. Table nói 1 cách tổng quát sẽ tăng sự rắc rối của văn bản và làm nó khó khăn khi bảo dưỡng.Đồng thời , nó cũng giảm tính linh hoạt của website trong điều chỉnh các media và thiết kế các thành phần trang web , và nó giới hạn chức năng website
MAMA (chương trình phân tích & khai thác đa dữ liệu) là 1 phương tiện tìm kiếm dựa trên web của Opera Software , nó dò trang web và trả về kết quả là cấu trúc chi tiết của trang web. Nếu chúng ta nhìn vào các khóa tìm kiếm của MAMA, chúng ta sẽ thấy trung bình 1 trang web có cấu trúc table 3 tầng lồng vào nhau.Trong danh sách 10 thẻ thông dụng nhất luôn có 3 thẻ table , td , tr. Thành phần table được tìm thấy trên 80% trang mà URL được dò bởi MAMA
Các nhà ngôn ngữ nói rằng , thẻ table có nghĩa là liệt kê dữ liệu thành bảng. nó ko phải dùng để xây dựng cấu trúc

Cách sử dụng :
Sử dụng table để xây dựng cấu trúc web là thuần vào trực giác. Chúng ta nhìn thấy dữ liệu kiểu table mỗi ngày, khái niệm dễ hiểu

Và sự tồn tại của các thành phần table làm cho các kỹ năng của lập trình viên mòn đi, bởi vì lập trình viên không buộc phải sử dụng các trang soạn thảo riêng biệt. Với div, lập trình viên phải sử dụng các thành phần mới hoặc sử dụng trang soạn thảo mới , vì không thể gắn các thành phẩn vào thẻ div
Đồng thời, table không bị phá vỡ khi nội dung quá rộng.Cột không bị ép bởi 1 cột khác khi dùng cấu trúc div.Sự bổ sung này làm cảm giác sử dụng table rất an toàn.

Table bao gồm nhìu thẻ khác nhau : thẻ table là thẻ bao ngoài , tr cho mỗi hàng và td cho mỗi cột.Thẻ thread và tbody không được dùng cho mục đích cấu trúc vì nó thêm nghĩa vào nội dung.Để dễ đọc , mỗi thẻ thường có 1 dòng riêng và được viết cách vào. Với tất cả thẻ cho table,vài dòng code được thêm vào nội dung. Thẻ colspan và rowspan làm đoạn code rắc rối hơn, và lập trình viên bảo dưỡng trang web trong tương lại phải đọc rất nhiều dòng dư thừa để hiểu nội dung đoạn code
PHP Code:

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td colspan="3" height="120px">....td>

tr>

<tr>

<td class="menu" valign="top">...td>

<td class="content" valign="top">...td>

<td class="aSide" valign="top">...td>

tr>

<tr>

<td colspan="3">...td>

tr>

table>

<div id="header">...div>

<div id="menu">...div>

<div id="content">...div>

<div id="aSide">...div>

<div id="footer">...div>

Như chúng ta đã thấy trong ví dụ,layout dựa trên table gồm nhiều code hơn dùng div.Hãy tưởng tượng sự khác biệt về kích thước này khi code dài ra (tỉ lệ gần như là 2:1). Trong cấu trúc dựa trên div,ta có thể bỏ qua phần liệt kê div và sử dụng 1 danh sách không cần phải sắp xếp
Table được lồng vào nhau sẽ dẫn tới sự sai sót về lập trình làm cho 1 website gặp rắc rối trong khâu viết table.Số lượng dòng code dường như ko kết thúc , & nhiều rắc rối.Table không thể có sự rõ ràng khi lập trình và đừng nên mang thứ gì rắc rối vào nội dung trừ khi bạn đối mặt với 1 dữ liệu kiểu table thật sự.Và nếu bạn được giao lại trách nhiệm duy trì trang web với lập trình khó đọc , không còn gì khổ hơn. Table lồng vào nhau là sự thay thế rất dở khi muốn code dễ đọc và các thành phần rõ ràng

Một hạn chế khác của table là nó làm chúng ta khó diễn đạt nội dung từ thiết kế.Thẻ border,width,cellpadding&cellspacing được sử dụng trong 90% trang web sử dụng tables (dựa vào MAMA).Nó thêm code vào HTML thay vì trên trang soạn thảo
Lượng code dư thừa sẽ làm chậm sản phẩm và tăng chi phí bảo trì.Có 1 giới hạn về dòng mà 1 lập trình viên có thế viết mỗi h,và code dư thừa sẽ làm những người khác khó hiểu.Thậm chí người viết sẽ ko thể hiểu khi đọc lại sau 1 thời gian

Mỗi dòng code thêm vào tăng kích thước sản phẩm,đồng nghĩa với thời gian download lâu hơn.Lập trình viên phải ghi nhớ là 1 phương tiện mới ,chẳng hạn 1 thiết bị di động,thường có băng thông thấp.Trang web phải giúp đỡ phương tiên nhiều hơn các máy tính trong tươg lai,và lập trình dở sẽ giới hạn khả năng đó.Code nhiều hơn sẽ gây nhiều lỗi hơn,lập trình viên phải bảo đảm lượng lỗi mỗi dòng.Do table tăng độ dài code,cấu trúc table nhiều lỗi hơn so với cấu trúc ít dòng code hơn

Công ty Giải Pháp Số Nhật Thành

Trang

Thứ Năm, 26 tháng 12, 2013

Css với thiết kế web

Không có nhận xét nào:

Đăng nhận xét