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

[november]

Ý tưởng là vậy. Các bạn hãy cứ làm và chúng ta sẽ trao đổi vấn đề cụ thể của việc xây dựng css.Mình quan tâm đến cái CSS with out table ko lâu lắm (khoảng 3 năm gần đây), trước đây mới chỉ biết dùng CSS vào việc định dạng màu sắc cho web. Nhưng thế giới cũng ko đi xa hơn chúng ta nhiều đâu, họ mới kỷ niệm 10 năm CSS-web standard thôi mà .

Mình dùng vẫn hãi nhất vấn đề hacks. Rất khó kiểm soát chúng

[zmt264]

@tháng 11:
Bạn nói sẽ có bài hướng dẫn làm CSS layout từ PS và hướng dẫn dùng Firefox Extension mà chưa thấy viết gì vậy? rồi cả vấn đề "đóng gói", hay "tách rời" CSS nữa?....

Còn cái hack thì bỏ qua đi, ở đây khỏi bàn

[zmt264]

ôi, chán quá, bác Tháng 11 lặn mất tiêu chẳng chịu viết bài gì, thôi copy cái bài từ blog sang đây để up cái topic lên vậy:

Tất nhiên các "cao thủ" về CSS có thể có nhiều ý kiến khác nhau về vấn đề này, nhưng theo tôi thì 2 kỹ năng (hay khả năng) quan trong nhất là.

1. Đặt tên cho các id trong trang web.
Chuyện đặt tên mới nghĩ thì có vẻ đơn giản và không quan trong (vì về nguyên tắc thì cho dù bạn đặt tên id là gì cũng được, miễn là viết xHTML và CSS hợp lệ), nhưng thực ra nó rất quan trọng, để làm tốt thì cũng đơn giản thôi, nhưng các bạn phải hiểu rõ về cấu tạo một trang web, và đặt tên id tương ứng với chức năng của các thành phần đó. Các id thường dùng là:
+ header dành cho phần trên của các web
+ container dành cho phần chứa các phần thân (phần chính) của trang web
+ trong container chứa nội dung: id -> content, sidebar
+ footer dành cho phần cuối cùng của trang web.

Về "nghệ thuật" đặt tên bạn có thể tham khảo các tài liệu viết về CSS. (tôi sẽ liệt kê danh sách 1 số sách cũng như trang web để tra cứu về CSS trong bài tới, đồng thời cũng liệt kê các trang web "đúng chuẩn" để các bạn view source và so sánh với những gì đã đọc được)

Nói rộng ra thì: kể cả trong lập trình, tổ chức sắp xếp file, hay là sinh con, học tập ... thì đặt tên cũng là 1 việc quan trọng, nhỉ

2. Đọc hiểu CSS của các trang web khác, bằng việc này bạn sẽ học hỏi được rất nhiều qua thực tế, vì đọc sách chỉ là điểm khởi đầu, còn học hỏi từ người khác và tự mình bắt tay vào làm việc mới nâng cao trình độ của bạn nhiều.

Nói rộng ra thì: đọc sách cũng có vai trò nhất định của nó nhưng bản thân tôi đánh giá cao việc xem người khác làm và tự rút ra kết luận hơn, sách chỉ đóng vai trò giúp ta hệ thống hoá những gì ta thấy (quan sát) mà thôi (à, câu này thì tôi áp dụng cho mọi thứ chứ ko riêng gì việc học CSS, hì )

Khi bạn đọc file css của trang web nào đó, bạn phải hiểu từng dòng có nghĩa là gì, tại sao họ lại làm thế, tất nhiên cũng đôi khi thật khó mà hiểu ý đồ của họ, lúc đó thì có lẽ các forum về tin học hay là chính blog này là nơi bạn có thể ghé thăm và thắc mắc những câu hỏi "hóc".

Có lẽ sắp tới tôi cũng sẽ làm 1 phần mềm (1 đoạn script thì đúng hơn) cho phép ngưòi dùng viết CSS bằng tiếng Việt, nếu họ muốn , hoặc là thêm các minh hoạ chức năng vào file CSS để người dùng dễ hiểu hơn), các bạn có hoan nghênh ý tưởng này ko ???

[vh_moriator]

Bạn ơi cho hỏi có tài liệu nào dùng để tham khảo nhanh CSS không? Mình đang học CSS nhưng nó có nhiều thuộc tính quá.

[zmt264]

Nó không nhiều thuộc tính đâu (nếu so với các ngôn ngữ lập trình chẳng hạn )

Tuy nhiên nếu bạn muốn học nhanh các thuộc tính và có cái nhìn tông thể về CSS thì có thể google: css cheatsheet
http://www.google.com.vn/search?hl=v...eatsheet&meta=
=> ví dụ:
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

Như ta thấy, chỉ có tổng thể khoảng 30 thuộc tính (tôi đếm qua) cần nhớ, còn lại thì bạn cũng có sự trợ giúp của Editor (ví dụ DW, Topstyle, Aptana...).

[november]

Sorry vì mình reply chậm. Dạo này chưa sắp được tg. Mình up tạm lên đây màn hình của firefox khi mà mình vẫn sử dụng để debug.
Các add-on được sử dụng để phục vụ CSS ở đây là:
CSS Viewer (dùng cực cool, di chuột đến đâu CSS properties hiển thị chi tiết đến đấy )
Edit CSS (rất ít dùng, edit trực tiếp trong cửa sổ firefox)
Firebug (hiển thị code theo block và debug code)
IE Tab ( chuyển đổi Firefox sang IE, tool ko thể thiếu)
Developer toolbar( Tool số 1, rất nhiều tiện ích, mình hay dùng thường xuyên nhất chức năng hiển thị theo block, như hình kèm theo là các khối xanh đỏ, và tên ID, class, ngoài ra còn có ruler, line guides ... kèm theo)
-------
Ngoài ra có thể dùng một số add-on khác: Imagezoom, Dalivator (check xem XHTML có theo chuẩn ko), View Source Chart ....

-------

Đấy là add-on của FF. Mình sẽ up tiếp màn hình làm việc của mình khi debug và khi viết code (chia màn hình làm việc ra sao). Sorry nếu chậm trễ nhé

[november]

S**t cái 4rum này upload ảnh chuối quá. Sẽ update!!!

[zmt264]

S**t cái 4rum này upload ảnh chuối quá. Sẽ update!!!

Mình thấy chức năng upload ở đây chẳng có vấn đề gì, hoặc cậu có thể thử 1 phương pháp khác như upload sang my.opera.com chẳng hạn (đầu tư 1 phút đăng ký),upload image trên blog đó khá tiện lợi ...

Về mấy cái Extension (hay Add-on) cậu nêu thì hồi xưa mình hay dùng Web Developer và Firebug, sau đó dùng mỗi Firebug, giờ thì cũng ít dùng cà Firebug luôn.

[cuongvq]

Topic hay quá. Hôm nay mình mới được biết đến nên không được tham gia ngay từ đầu. Mình cũng theo đuổi Web Standard nhưng đọc bài của bạn mình vẫn thấy bổ ích.
Trên blog của mình cũng viết 1 bài tutorial nhỏ về Convert 1 layout sang layout html & css. Bạn nào muốn tìm hiểu thêm thì xem địa chỉ dưới sign nhé.

[november]