- Chọn hiệu ứng cho hình ảnh chuyển động từ ảnh này sang ảnh khác bằng cách nhấp chuột vào chữ AB và chọn trong hộp thoạ i Choose Transition.
4. Tạo kiểu cho nội dung trang
Cascading Style Sheets (CSS) là một kỹ thuật dùng để định nghĩa cách thể hiện của các đối tượng trong trang web. CSS cho phép định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có, không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về kỹ thuật CSS.
- CSS giúp định dạng trang web rất nhanh nhờ sử dụng các class CSS; giúp cho website của có một sự nhất quán về cách trình bày các trang web; việc hiệu chỉnh trên CSS sẽ tựđộng cập nhật trên tất cả các nơi có dùng CSS…
- Một class CSS là một tập hợp nhiều đặc điểm định dạng khai báo (ví dụ: màu chữ, màu nền, cách hiển thị, khung viền…) rồi đặt cho các đặc điểm đó một cái tên. Khi đã có class CSS rồi, muốn đối tượng nào trên trang web được định dạng theo class đó thì chọn tên class trong mục Style của hộp kiểm soát Property. Như
vậy nhờ class CSS chỉ cần khai báo định dạng 1 lần, nhưng có thể áp dụng cho rất nhiều đối tượng trong trang web.
a. Hiện Panel CSS
- Nhấp menu Window > CSS Styles hoặc nhấn phím Shift+F11. - Nhấp mục All trong cửa sổ CSS.
b. Tạo 1 class CSS
Nhấp nút phải chuột trong panel CSS rồi nhấp lệnh New hoặc nhấp nút
Cửa sổ New CSS Rule xuất hiện.
- Mục Select Type: chọn Class.
- Mục Name: Đặt tên class, phải bắt đầu bằng dấu “.”.
- Mục Define in: chọn nơi chứa class CSS (trong 1 file) hoặc trong chính trang web đang soạn (This document only).
- Nhấp OK.
Nếu trong bước trên chọn New Style Sheet File – nghĩa là lưu các định nghĩa CSS trong 1 file riêng – thì bước này phải cho biết tên file (File name) và vị
Cửa sổ các thuộc tính CSS hiện ra để chỉđịnh.
Cửa sổ này bao gồm các nhóm sau:
- Nhóm Type gồm các thuộc tính liên quan đến text như Font (phông chữ).
Size (kích thước).
Style (kiểu).
Line height (chiều cao của dòng).
Decoration (phần trang trí).
Weight (chiều dày).
Variant (biến thể).
Color (màu).
- Nhóm Background gồm các thuộc tính liên quan đến nền như Background color (màu nền).
Background image (ảnh nền).
Repeat (lập lại).
Attachment (đính kèm).
Horizontal position (vị trí theo chiều ngang).
Vertical position (vị trí theo chiều đứng).
- Nhóm Block gồm các thuộc tính liên quan đến ký tự như Word spacing (khoảng cách giữa các từ).
Letter spacing (khoảng cách giữa các chữ cái).
Vertical alignment (canh lề theo chiều đứng).
Text align (canh lề văn bản).
Text indent (thụt lề văn bản).
Whitespace (khoảng trắng).
Display (hiển thị).
- Nhóm Box gồm các thuộc tính liên quan đến quan hệ giữa đối tượng và các đối tượng khác như
Margin: 4 lề bên ngoài.
Padding: 4 lề bên trong.
Float: quan hệ giữa đối tượng với chữ xung quanh.
Width, Height: độ rộng, độ cao.
- Nhóm Border gồm các thuộc tính liên quan đến khung viền: viền khung, màu khung, độ dày của khung…
- Nhóm List gồm các thuộc tính của kiểu liệt kê. Nếu muốn tạo hình ảnh thay cho dấu chấm đầu dòng, xác định nó trong nhóm này.
- Nhóm Position gồm các thuộc tính liên quan đến vị trí, kích thước đối tượng…
- Nhóm Extensions gồm các thuộc tính như con trỏ chuột, hiệu ứng filter...
Khai báo xong thì nhấp OK.
c. Apply 1 class CSS cho 1 đối tượng
Chọn đối tượng, rồi trong mục Style (trong hộp kiểm soát Property) chọn tên class muốn apply cho đối tượng.
d. Liên kết 1 file CSS có sẵn vào trang web
Khi các class CSS lưu trong 1 file riêng (file *.css) có thể dùng lại các class
đó khi thiết kế các trang web khác. Đây là đặc điểm rất hay và đáng giá của CSS. - Mở trang web cần liên kết.
- Nhấp menu Text > CSS Style > Attach Style Sheet… - Nhấp nút Browse rồi chọn tên file CSS đã định nghĩa. - Nhấp OK.