Cách tốt nhất để chuyển đổi bố cục bảng thành bố cục CSS là gì?

Question

Tôi sắp bắt đầu làm việc trên một trang web với bố cục dựa trên bảng phức tạp (được viết mã năm trước).

Một trong những điều tôi muốn làm là chuyển đổi bố cục thành bố cục CSS phù hợp với các div và nhịp.

Bạn có thể đề xuất phương pháp tiếp cận tốt để giải quyết các vấn đề như thế này không? Tôi có nên sử dụng một khung CSS như Blueprint không? Chỉ cần nhận được trong đó và hack vào nó cho đến khi nó có vẻ đúng? Tôi đã sử dụng nhiều Firebug và Thanh công cụ dành cho nhà phát triển IE.

Answer 1

Thông thường, không có dấu đầu dòng bạc nào khi chuyển đổi giữa bảng và CSS. Mỗi trang web khác nhau và có các yêu cầu khác nhau. Câu trả lời thực sự duy nhất là: chỉ cần bắt đầu đánh dấu từ đầu.

Lời khuyên tốt nhất là viết đánh dấu hoàn toàn trước tiên. Đảm bảo đánh dấu là chính xác, ngữ nghĩa và đại diện cho dữ liệu của bạn hoàn toàn. Chưa viết biểu định kiểu ... Sau khi đánh dấu xong, hãy tạo CSS. Bằng cách này bạn có đánh dấu ngữ nghĩa và CSS hoàn toàn kiểm soát bản trình bày.

Các khuôn khổ CSS thường không ủng hộ cách tiếp cận này để đánh dấu ngữ nghĩa vì chúng buộc bạn thêm các thẻ bổ sung để tuân thủ cách tiếp cận của chúng. Do đó, khung CSS đôi khi gặp nhiều rắc rối hơn giá trị của nó.

Thực hiện đánh dấu rồi đến CSS.

Answer 2

Quá trình chuyển đổi sẽ là một nhức đầu đau đớn! Tôi đề nghị bạn bắt đầu thiết kế lại toàn bộ.

Answer 3

Cách lặp lại cũng hoạt động tốt. Bắt đầu với các khối nhỏ, chuyển đổi chúng thành CSS. Điều này sẽ đơn giản hóa cấu trúc bảng của bạn, hy vọng chỉ để lại "lưới cơ bản" trong bảng và tất cả phần còn lại trong CSS.

Từ đó, hãy chọn một giải pháp đã được kiểm tra hiện có nếu đó là bố cục đơn giản (từ 1 đến 3 cột, có rất nhiều giải pháp được kiểm tra ngoài đó). Nếu nó phức tạp hơn, hãy đi với Blueprint.

Answer 4

Trước khi bắt đầu, hãy đảm bảo bạn đang sử dụng đặt lại CSS. Eric Meyer và Yahoo YUI đều tuyệt vời. Điều này sẽ giúp làm cho tất cả các trình duyệt của bạn trông giống nhau.

Ngoài ra, hãy cài đặt HTML validator. Điều này sẽ đảm bảo HTML của bạn trông đẹp và sẵn sàng để thêm CSS.

Sau đó, lấy một bản sao của Firebug và cài đặt nó trong firefox. Điều này là tuyệt vời cho thấy những quy tắc CSS đang làm gì. Bạn có thể tắt các quy tắc riêng lẻ bằng cách nhấp vào s chéo theo từng quy tắc.

Bây giờ, hãy truy cập một số trang web xác thực chính xác và xem quy tắc nào họ đã sử dụng trong các biểu định kiểu của chúng.

trang web để thử là www.alistapart.com, CSS Zen Garden, SimpleBits, vv

Answer 5

Tôi không biết là điều này có thể của bất kỳ sự giúp đỡ, tôi xây dựng khung CSS gọi Emastic (hỗ trợ cột chất lỏng và cố định) và bạn có thể mô phỏng các bảng nếu bạn muốn ở đây là ví dụ Emastic Table

Answer 6

Tôi thứ hai là những người nhận xét cho biết bạn nên thiết kế lại toàn bộ nội dung từ đầu. Dọn dẹp HTML và sau đó tạo CSS.

Tôi muốn thêm lý do để làm như vậy.Thông thường thiết kế dựa trên bảng ít nhất là một vài năm tuổi và do đó trông khá passe. Tận dụng cơ hội này để cải thiện thiết kế. Hoặc là làm mới nhẹ hoặc sửa chữa hoàn toàn tùy thuộc vào khẩu vị và nhu cầu của bạn.

Answer 7

Tôi sẽ không sử dụng khung. Việc học một khung công tác mới chỉ hữu ích nếu bạn sử dụng nó trên & lần nữa. Mỗi khuôn khổ có lỗi và điểm yếu riêng của nó. Sử dụng

display: table-cell; 

để tạo cột. Chúng sẽ xếp hàng như float: left;. Xem http://quirksmode.org/css/css2/display.html

Answer 8

Trong một số trường hợp, sử dụng cụm từ thông dụng có thể tăng tốc quá trình của bạn.

Ví dụ, một cái gì đó như thế này:

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td> 

sẽ phù hợp với sự khởi đầu của một bảng và cung cấp nội dung của ô đầu tiên trong $ 1 cho một thay thế:

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div> 

Tất nhiên bạn' d cần phải tùy chỉnh để phù hợp với trường hợp sử dụng cụ thể của bạn. Nếu bạn có một số trang tương tự, bạn có thể thử viết tay một lần đầu tiên và sau đó sử dụng một cái gì đó như thế này để làm cho việc chuyển đổi những người khác đơn giản hơn.

cách tiếp cận khác sẽ được sử dụng một cái gì đó giống như jQuery plugin này: https://github.com/ryandoom/jquery-plugin-table-to-div

Nó được thiết kế để sửa đổi sau vẽ, nhưng có thể được sử dụng trong quá trình phát triển để có một bảng được đưa ra và cung cấp một hình thức DIV dựa đơn giản của nó.