Hướng dẫn thiết kế Website bằng Dream Waver MX (III)

Sử dụng Cascading Style Sheet trong website của bạn:
Giới thiệu về Cascading Style Sheet (CSS):CSS là 1 là 1 tập hợp các định dạng về nhiều mặt như font, cỡ chữ, màu sắc, vị trí của object… giúp cho bạn có 1 khuôn mẫu trong thiết kế làm cho website của bạn có tính nhất quán.CSS giúp bạn có thể làm được những chuyện mà HTML đơn thuần 0 làm được.CSS có thể sử dụng cho nhiều loại đối tượng như table, layout cell, text…DW còn hỗ trợ 1 loại style sheet khác là HTML style sheet nhưng không mạnh bằng CSS do đó tôi chỉ giới thiệu về CSS.Để tạo 1 CSS, bạn có thể làm như sau:+ Menu bar --} Text --} CSS Styles --} New CSS Style. + Bấm tổ hợp phím Shift+F11 để mở cửa sổ CSS Style. Sau đó bạn click vào button New CSS Style(ở phía dưới cửa sổ CSS Style).1 cửa sổ mới sẽ xuất hiện:
Attached Images

+ Name: bạn điền vào tên của CSS. Bạn đặt tên sao cho dễ nhớ và gợi tả. VD như CSS tên là Fontstyle dùng để xác định các thuộc tính về font chữ. + Type: bạn thấy có 3 radio button để lựa chọn:Make custom style: Tạo 1 CSS mới.Redefine HTML tag: Định nghĩa lại 1 HTML tag. Theo tôi thì bạn đừng nên thay đổi các tag HTML. Use CSS Selector: Tạo CSS giành cho link (hypertext)trong trang web.Cả 3 lựa chọn đều có cách làm việc như nhau nên tôi chỉ hướng dẫn các bạn tạo custom style .+ Define in: có 2 sự lựa chọn: Nếu bạn chọn This document only thì CSS tạo ra sẽ chỉ được áp dụng cho trang web(chứ không phải website) bạn đang thiết kế. Lựa chọn còn lại để giành cho bạn tạo 1 CSS riêng biệt và lưu thành 1 file. Do đó bạn có thể sử dụng CSS đó cho nhiều trang khác nhau.Sau khi chọn Type là Custom Style và Define in New Style Sheet File, bạn click vào OK thì 1 cửa sổ Save As sẽ xuất hiện để bạn nhập vào file name. Theo tôi thì file name nên trùng với CSS name để tránh nhầm lẫn.Sau khi bạn save xong, 1 cửa sổ mới sẽ xuất hiện:
IMAge

Bạn sẽ thấy cửa sổ mới có 2 phần chính như sau:phần Category bao gồm các Item như Type, Background… và phần còn lại kế bên bao gồm chi tiết của từng nhóm Category được chọn.Nhóm Type: + Font: Xác định họ font chữ của style sheet.+ Size: Xác định cỡ chữ của văn bản. Bạn sẽ thấy có 2 drop down box tại thuộc tính này. Drop down box đầu tiên để bạn lựa chọn/ điền vào 1 giá trị nào đó. Có 2 loại giá trị là giá trị tuyệt đối( VD như 1,2,13…) và giá trị tương đối ( large, small, medium…) , theo tôi thì bạn nên chọn giá trị tương đối vì tuỳ theo độ phân giải của máy người dùng mà web browser sẽ chọn size thích hợp. Drop down box thứ 2 để bạn chọn đơn vị đo. Mặc định là pixels, và bạn cũng nên giữ nguyên giá trị mặc định này.+ Style: Dạng của chữ. Có 3 giá trị là normal. Italic và Oblique. Giá trị normal là mặc định. Còn Italic và Oblique dùng để làm cho văn bản có dạng chữ nghiêng.+ Line Height: Chiều cao của dòng văn bản.Có 2 drop down box tương tự như thuộc tính Size.+ Decoration: Tại thuộc tính này bạn sẽ thấy có các check box để chọn, bạn có thể chọn 1/nhiều hoặc 0 chọn giá trị nào đều được. Underline dùng để gạch dưới văn bản, overline dùng để gạch trên văn bản, linethrough dùng để gạch xuyên qua văn bản, blink dùng để tạo cho văn bản nhấp nháy ( mặc dù có dùng thì văn bản của bạn cũng không nhấp nháy đâu , chắc là chưa được hỗ trợ) và cuối cùng là None.+ Weight: Độ đậm của nét chữ. Cũng có giá trị tương đối và tuyệt đối.+ Variant: Chỉ được hỗ trợ trong IE và 0 hỗ trợ trong Nescape Navigator. Có 2 giá trị là normal và small-caps. Giá trị small-caps dùng để định dạng đoạn văn bản có thuộc tính in hoa nhỏ. Bạn sẽ 0 thấy được sự thay đổi trong Document window, khi bấm F12 thì bạn sẽ biết ngay mà )+ Case: Có 4 giá trị là Capitlalize, Uppercase, Lowercase và none. Thuộc tính Capitalize làm cho Ký tự đầu tiên của mỗi từ được in hoa. Uppercase làm cho cả đoạn văn bản in hoa, Lowercase làm cho cả văn đoạn văn bản in thường. Còn none giữ nguyên những gì mà bạn nhập vào.+ Color: Màu của chữ.

Nhóm Background:+ Background Color: màu nền của đối tượng. Thường là 1 table hoặc cả trang web. + Backgroung Image: Đường dẫn đến ảnh nền của đối tượng. Tương tự như background image.+ Repeat: Thuộc tính này xác định cách thức ảnh nền lặp lại trong trang web.Chỉ có giá trị nếu bạn dùng những ảnh nền nhỏ hơn trang web của bạn. Điều này cũng giống như bạn lót gạch cho nền nhà mà sàn nhà chính là trang web còn những viên gạch là ảnh nền . Các giá trị trong thuộc tính repeat: No repeat: 0 lặp lại. Điều này cũng giống như bạn chỉ lót 1 viên gạch cho cả 1 nền nhà rộng thênh thang vậy.Repeat: hình nền được lặp lại sao cho che phủ hết toàn trang web.Repeat-x: Chỉ lặp lại theo chiều ngang.Repeat-y: Chỉ lặp lại theo chiều dọc.Attachment, Horizontal Position(HP) và Vertical Position(VP): Chỉ được hỗ trợ trong IE, không hỗ trợ trong Nescape Navigator. 3 thuộc tính này có liên quan đến nhau. Nếu bạn chọn giá trị của thuộc tính Attachment là Fixed thì 2 thuộc tính kia sẽ canh (trái, phải, giữa…) vị trí của hình nền theo Document window. Còn nếu bạn chọn giá trị của thuộc tính Attachment là Scroll thì vị trí của hình nền sẽ được canh theo đối tượng. VD như bạn chọn Attachment là Fixed, HP là center và VP là bottom thì hình nền sẽ được canh giữa theo chiều ngang và canh dưới theo chiều cao trong trang web. 1 VD nữa, tương tự như trên nhưng bạn chọn Attachment là Scroll và CSS này được sử dụng cho table thì hình nền sẽ được canh đối với table chứ 0 phải đối với toàn trang web.

Nhóm Block:+ Word Spacing: Khoảng cách giữa các từ trong văn bản. Cũng có 2 drop-down box tương tự như thuộc tính Size trong mục Type. Sự thay đổi về word spacing 0 thể hiện trong document window.+ Letter Spacing: Khoảng cách giữa các ký tự.+ Vertical Alignment: Chỉ có tác dụng đối với hình ảnh trong trang web. Thuộc tính này giúp canh hình ảnh theo ý muốn.+ Text align: Xác định văn bản sẽ được bố trí ra sao. VD như bạn sử dụng CSS có text align là left cho 1 table thì văn bản bên trong table đó sẽ được canh trái.+ Text indent: Xác định khoảng cách thụt đầu dòng đồi với dòng văn bản xuống hàng. Mỗi lần bạn enter xuống hàng thì dòng tiếp theo sẽ cách lề 1 khoảng đúng bằng giá trị bạn xác lập trong thuộc tính text indent.+ Whitespace: 0 bít để làm gì + Display: Xác cách thức đối tượng xuất hiện trong trang web. Có rất nhiều giá trị để bạn thay đổi, nhưng theo tôi bạn bỏ trống hoặc chọn là None. Điều này sẽ giữ nguyên những gì mà bạn thấy trong Window document.

Nhóm Box: + Width, Height: Xác định chiều rộng và chiều cao của đối tượng. Nên dùng cho table, layout cell hoặc layer.+ Float: Xác định cách thức cuộn của các đối tượng khác xung quanh đối tượng này( Giống như cách bạn cho văn bản cuộn xung quanh image trong Word vậy)+Padding: Xác định khoảng cách giữa nội dung(text, image…) của đối tượng với border của nó.+Margin: Xác định khoảng cách giữa border của đối tượng với đối tượng khác. Nhóm Border: Xác định các thuộc tính của khung. Tôi không đề cập đến phần này vì nó cũng khá đơn giản.

Nhóm List:+Type: Bạn có thể chọn các kiểu bullet cho list của bạn tại đây.+Bullet Image: Nếu các bullet DW cung cấp không làm bạn vừa ý, bạn có thể dùng các image bạn thích để làm bullet. Bạn chọn đường dẫn đến bullet đó tại đây.+Position: Xác định vị trí của văn bản đối với bullet. Có 2 giá trị, outside dùng để xác định văn bản sẽ lùi đầu dòng và ở bên phải bullet, còn inside xác định văn bản sẽ cuộn bên trái của bullet.Nhóm Positioning: Chỉ dùng cho layer nên tôi sẽ giới thiệu sau.Nhóm Extension: +Pagebreak: Chỉ được hỗ trợ trong IE trên 4.0. Giúp tạo ra 1 pagebreak khi in.+Cusor: Thay đổi hình dạng con trỏ chuột khi ta di chuyển con trỏ lên đối tượng. Hỗ trợ trong IE 4.0 và Nescape Navigator 6.0 trở lên.+Filter: Tạo các hiệu ứng đối với Text, VD như shadow, blur… Tính năng này có thể giúp bạn có 1 đoạn Text khá ấn tượng.
---------------