[TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard

[zmt264]

Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------

Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........

-----------------------------

Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.

----------------------------

Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.

@Tháng 11:

Mình ko trả lời các câu hỏi của bạn vì các câu trả lời đã có ở phần trên, ko cần search trong gu gồ làm gì cho nó rắc rối đâu. Có lẽ mình ko cần chỉ ra cụ thể ở phần nào, vì mình ko thích các tranh luận trong topic, nếu bạn muốn ta có thể tranh luận qua PM hoặc YM.

Còn chuyện khoe kiến thức thì dù sao vẫn tốt hơn là hide kiến thức. Mình nghĩ bạn nên chia sẻ kiến thức của bạn, chắc chắn là mọi người đều có hứng thú (nói thật chứ ko khoe kiến thức thì sao biết kiến thức đó là đúng hay sai), chắc chắn mọi người sẽ hoan nghênh việc bạn share kiến thức hơn là bạn spam 1 câu dạng như "nhảm nhí" , phải thế ko?

Tóm lại nhắc bạn 3 việc
1) bạn nên tập trung vào việc khoe (hay chia sẻ) kiến thức của bạn theo nội dung topic. Nên nhớ topic ko nói về việc dùng CSS tạo web without table...vv...
2) về lợi ích của CSS thì ai thấy nó lợi thì tự tìm hiểu, ko thích thì thôi , chẳng ai bắt học
3) cứ từ từ, topic vẫn đang được post tiếp, nếu bạn hứng thú thì sang bên blog tiếng Anh, bên đó dài hơn 1 chút và có 1 bạn đang học 1 cách nghiêm túc mà ko hề cho là mình nhảm nhí. mình ko hiểu bạn chỉ trích mình cái gì? mình nói dài quá chăng? phải chăng nên tóm tắt lại thành vài dòng? bạn có thể tạo ra 1 topic bổ ích hơn ko?

[zmt264]

Nên nhớ ngay từ đầu topic mình đã yêu cầu các bạn tham gia topic này làm trắc nghiệm và mình KHÔNG TRẢ LỜI NHỮNG AI KHÔNG THAM GIA TRẮC NGHIỆM. tại sao vậy?
1) vì điều đó đảm bảo bạn là người thực sự có nhu cầu tìm hiểu
2) mình biết được trình độ của bạn. Nếu bạn quá kém thì ko nên tham gia topic, còn nếu quá giỏi thì có thể tham gia dưới góc độ 1 người tư vấn chứ ko nên kiểu như đi qua lớp học rồi buông ra 1 câu kiểu như "nhảm nhí" hoặc "ông này nói chán quá" như thế. Chán thì cụ thể chán thế nào, và nên cải tiến thế nào?

@bạn tháng-11:
Nếu cậu thích nói về CSS tableless có lợi gì, làm thế nào...vv... thì cậu lập 1 topic mới đi . Mình cũng đang chờ một điều đó mới hơn điều mà các ebook dạy về CSS đã nói.

[3do]

Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------

Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........

-----------------------------

Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.

----------------------------

Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.

Nếu chỉ "cảm thấy" và "đoán thế" thì đừng cố tỏ ra ta đây am tường tất cả. Đọc những bài viết của zmt264 mà không phân biệt được "khoe" và "chia sẻ" thì thiết nghĩ bác nên học thêm cách sử dụng từ ngữ đi

[november]

OK! Mình sẽ ko tranh luận nhiều vấn đề ngoài lề để tránh loãng survey topic này của bạn. Chỉ có điều cái tên topic " [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard " đã hấp dẫn mình, nhưng hơi thất vọng vì tiêu chí viết bài của bạn.

Share kiến thức ko ai bảo ko tốt, ko share thì gọi gì là 4rum.

Nhưng. Nếu bạn share với phương diện khác sẽ hấp dẫn hơn. Thực sự sorry mọi người vì mình chưa viết nhiều bài hữu ích (chưa sắp được tg,nhà mình mới sinh cháu ) Chẳng hạn bạn đã mất công tạo topic thì share:
1. Kinh nghiệm dùng CSS.
Chẳng hạn: Từ khi design layout trên PS mình chuyển sang CSS ra sao.
>>> Với mình: Ko dùng tool của PS hay Image Ready vì nó tạo ra css với vị trí tuyệt đối rất khó dùng. Nên tạo khung cột bằng css trước. sau đó ném banner, bgr vào từng vị trí đã đo được trên PS.
Phần mềm viết thì tùy từng người nhưng Dreamweaver CS3 đã hỗ trợ tốt hơn CSS. Tuy nhiên preview trong Dreamweaver nhiều khi khác so với trình duyệt. Đây là lỗi của Dreamweaver và cả lỗi của ng` tạo CSS....

2. Kinh nghiệm test CSS.
Khi test nên test trên tối thiểu 3 trình duyệt: Firefox, IE, Opera. Opera, IE7 khá gần Firefox, Firefox tạm coi là chuẩn hơn cả. Nhưng nên test trên cả IE7 & IE6 (có tool cài version IE7& 6 chạy đồng thời trên Windows).

Tốt nhất nên cài extension trên Firefox, bộ developer vì hỗ trợ rất nhiều việc viết CSS. Mình sẽ up ảnh màn hình với các tool ko thể thiếu với CSS coder (cứ tạm gọi là coder, mặc dù ko đúng là coder), và một số extension khác mình làm việc dễ dàng hơn nhiều.

3. Kinh nghiệm hack CSS: For Opera, Firfox, IE, IE7 ....

...

Đấy là quan điểm của mình. Cái gì thực tế cũng sẽ hấp dẫn ng` đọc hơn bạn ạ. Chứ tuto trên mạng cũng nhiều lắm, cái dân design mình thiếu là share kinh no cơ. Mà nếu bạn viết tuto tiếng việt hoàn chỉnh về viết code cũng hoan nghênh hơn là trình bày lý thuyết abc ra

[zmt264]

OK! Mình sẽ ko tranh luận nhiều vấn đề ngoài lề để tránh loãng survey topic này của bạn. Chỉ có điều cái tên topic " [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard " đã hấp dẫn mình, nhưng hơi thất vọng vì tiêu chí viết bài của bạn.

Share kiến thức ko ai bảo ko tốt, ko share thì gọi gì là 4rum.

Nhưng. Nếu bạn share với phương diện khác sẽ hấp dẫn hơn. Thực sự sorry mọi người vì mình chưa viết nhiều bài hữu ích (chưa sắp được tg,nhà mình mới sinh cháu ) Chẳng hạn bạn đã mất công tạo topic thì share:
1. Kinh nghiệm dùng CSS.
Chẳng hạn: Từ khi design layout trên PS mình chuyển sang CSS ra sao.
>>> Với mình: Ko dùng tool của PS hay Image Ready vì nó tạo ra css với vị trí tuyệt đối rất khó dùng. Nên tạo khung cột bằng css trước. sau đó ném banner, bgr vào từng vị trí đã đo được trên PS.
Phần mềm viết thì tùy từng người nhưng Dreamweaver CS3 đã hỗ trợ tốt hơn CSS. Tuy nhiên preview trong Dreamweaver nhiều khi khác so với trình duyệt. Đây là lỗi của Dreamweaver và cả lỗi của ng` tạo CSS....

2. Kinh nghiệm test CSS.
Khi test nên test trên tối thiểu 3 trình duyệt: Firefox, IE, Opera. Opera, IE7 khá gần Firefox, Firefox tạm coi là chuẩn hơn cả. Nhưng nên test trên cả IE7 & IE6 (có tool cài version IE7& 6 chạy đồng thời trên Windows).

Tốt nhất nên cài extension trên Firefox, bộ developer vì hỗ trợ rất nhiều việc viết CSS. Mình sẽ up ảnh màn hình với các tool ko thể thiếu với CSS coder (cứ tạm gọi là coder, mặc dù ko đúng là coder), và một số extension khác mình làm việc dễ dàng hơn nhiều.

3. Kinh nghiệm hack CSS: For Opera, Firfox, IE, IE7 ....

...

Đấy là quan điểm của mình. Cái gì thực tế cũng sẽ hấp dẫn ng` đọc hơn bạn ạ. Chứ tuto trên mạng cũng nhiều lắm, cái dân design mình thiếu là share kinh no cơ. Mà nếu bạn viết tuto tiếng việt hoàn chỉnh về viết code cũng hoan nghênh hơn là trình bày lý thuyết abc ra

Bạn thất vọng cũng là bình thường thôi, topic này chỉ dành cho người mới học , nên phải dẫn dắt từ từ, có ai sinh ra 1 cái là đi thi ĐH luôn đâu, phải học lớp 1, lớp 2, ... lớp 12, rồi TN phổ thông mới thi được chứ (ở Việt Nam). Hiện nay số người quan tâm quá ít, mới có 2 bạn, nên mình ko thể post quá nhanh được sẽ phiền cho những bạn vào sau. Hiện topic đang ở giai đoạn "lớp 1" nên có thể làm cho 1 số bạn có tài năng "trên lớp 1" như bạn cảm thấy sốt ruột.

Thực sự mình muốn tổ chức topic này như một lớp học, mọi người vào trả lời câu hỏi và qua quá trình động não đó tiếp thu dần dần. Đây có lẽ là sự khác biệt về quan điểm tạo topic giữa tôi và bạn. Có lẽ bạn thích 1 topic về chia sẻ kinh nghiệm thực tế hơn vì mọi người cần nó hơn (thú thực tôi cũng ko rõ là những ai cần), bản thân topic này cũng khá đìu hiu nên có lẽ tạm thời tôi cũng gác lại đợi đông người hơn chút, và start 1 chủ đề khác "đắt khách" hơn ở 1 nơi khác . Điều này có nghĩa là tốc độ post bài sẽ chậm đi 1 chút. Tầm vài ngày 1 bài và bài sau sẽ ko mới mẻ hơn bài trước nhiều .

Về những vấn đề bạn nói thì có lẽ vấn đề Hacks chưa nên nói ra sớm vì nó quá "cao" so với newbie, ngoài ra thì người ta cũng không khuyến khích việc dùng Hacks, việc thiết kế phù hợp với mọi trình duyệt phải được tính ngay từ đầu, nói chung là hạn chế tối đa việc dùng Hacks (đây được coi là 1 trong 10 điều người dùng CSS phải biết). Vấn đề này tôi đã lập 1 topic riêng trong forum mà cũng ko ai vào "chia sẻ" hoặc thắc mắc gì cả . http://www.ddth.com/showthread.php?t=119871

còn về vấn đề dùng các Firefox Extension hữu ích như Firebug, Web Developer, mình cũng đã chuẩn bị 1 số hình về Web Developer mà chưa kịp đưa lên, hoặc vấn đề chuyển layout PS sang dùng CSS thì mình rất hoan nghênh bạn giúp mình. Nếu bạn tham khảo 1 số bài viết trên mạng (English) về chủ đề đó thì có lẽ tốt hơn vì theo mình thì đã có 1 số bài viết về 2 cái đó, đặc biệt là về vấn đề chuyển layout PS sang dùng CSS.

[jiSh@n]

Whaterver, cảm ơn bạn zmt

Dear bạn jishan,

Bạn có nghĩ là:
- PR là đánh giá cho khả năng SEO/SEM nói chung ko?
- Website traffic ít nhưng PR cao hơn website traffic cao?

Nếu có thì thảo luận tiếp

Tôi thì lại nghĩ PR chỉ 1 phần thể hiện mức độ SEM, ko có SEO

[jiSh@n]

Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------

Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........

-----------------------------

Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.

----------------------------

Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.

Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

Hãy xem W3C nói gì về table:

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Điều này có nghĩa là table dùng để hiển thị dữ liệu dạng lưới.
Còn div:

The <div> tag defines a division/section in a document.

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

Rõ ràng div mới là thứ thích hợp cho việc phân layout hơn là table. Thiết kế table-less ko hề có nghĩa khai tử <table>, chỉ đơn giản là đưa nó về đúng với chức năng của mình.

Riêng thiết kế divless thì tôi lại ko thích lắm. Nó lại lạm dụng tính năng của ul,li..., bắt buộc chúng thực hiện tính năng ko phải vốn có của mình.

[november]

Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

Hãy xem W3C nói gì về table:

Điều này có nghĩa là table dùng để hiển thị dữ liệu dạng lưới.
Còn div:


Rõ ràng div mới là thứ thích hợp cho việc phân layout hơn là table. Thiết kế table-less ko hề có nghĩa khai tử <table>, chỉ đơn giản là đưa nó về đúng với chức năng của mình.

Riêng thiết kế divless thì tôi lại ko thích lắm. Nó lại lạm dụng tính năng của ul,li..., bắt buộc chúng thực hiện tính năng ko phải vốn có của mình.

OK! Bạn nói đúng với kỹ thuật của CSS. Cái mình muốn nói tới đó chính là sự tái sử dụng và có thể đóng gói . Điều ko tưởng của web designer trở thành sự thật

[zmt264]

@all:

Ý tớ là ngay cả một người mới tập tành học thiết kế web (newbies) cũng nên tiếp cận ngay với Web Standard, chứ ko phải đợi người ta quen làm sai chuẩn rồi mới sửa lại, tớ cũng quen mấy em 9x, các em ý chỉ thích thấy thằng web khác có cái gì thì học lại bằng được chứ chẳng quan tâm đến chuẩn đâu, rồi sau này mấy em đó sẽ quen với những trang web bung bét kiểu đó, đấy là 1 trong những ví dụ... tất nhiên có thể các em đó chỉ nghịch web cho vui như 1 trò chơi, nhưng với những ai có định hướng thành web designer thì nên định hướng từ đầu, ví dụ mình có thằng em mới học lớp 8, nó cũng thiết kế web khá "chuẩn" vì mình luôn bên cạnh nó nên cũng có ảnh hưởng.

topic này mới đầu lập nên với ý định dành cho những bạn mới học như thế, nhưng bây giờ mình thay đổi lại chút là: những bạn mới học vui lòng vào blog cho nó khỏi loãng chủ đề, còn anh em ta cứ việc tiếp tục tranh luận tùy thích về Web Standard.

@tháng 11:
cái mà bạn đề cập rất hay, thú thực là mình rất quan tâm đến việc tái sử dụng trong CSS, ví dụ khi ta đã thiết kế 1 cái menu thì làm sao có thể ap dụng nó vào nhiều web khác nhau 1 cách dễ dàng...bạn có thể nói rõ hơn ko? mình thấy bạn nói gì là toàn bỏ dở thôi :P hay là busy quá .

Còn khái niệm đóng gói (trong CSS) thì mình ko hiểu rõ lắm

[november]

Mình làm thiết kế nên rất cú "bọn" lập trình (mặc dù cùng 1 đội ). Vì "chúng nó" code sử dụng các hàm các lớp và sử dụng lại, hay là xây dựng core để lập trình chỉ việc "gọi" và dùng. Thế nên mới có chuyện có project làm trong 3 ngày . Còn mình thì sao? fair design trên PS rồi khốn khổ chuyển sang CSS rồi lại chạy theo "chúng nó" để fix vì ko bao giờ có chuyện code ko làm sai css .

Nhưng chúng ta có thể dùng CSS và sử dụng lại được. Layout của web chỉ quay quanh: 2 cột, 3 cột, các khối nội dung và cách bố trí banner, navigator, category, submenu. Vì vậy layout là có thể đóng chết . Còn các khối nội dung mình viết tách rời css như vậy ném đâu cũng được rồi, sử dụng lại chỉ việc thay cái bgr là ok. Cái quan trọng là cấu trúc css của ta phải thuận tiện cho việc sửa đổi từng thành phần và nâng cấp toàn bộ site. Thêm bớt 1 khối ko ảnh hưởng layout. Và thay đổi diện tích các khối cũng ko bị vỡ layout.

Tiên tiến hơn nữa là có thể di chuyển các khối và lưu lại vị trí này. (Sử dụng javascrip - ajax) Như vậy design sẽ đúng là WYSIWYG