Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 9 và 10: Định dạng văn bản, Sử dụng CSS trong DreamWeaver

oảng cách trên, dưới, trái, 
 phải giữa phần nội dung văn bản đến ảnh 
– Target: Khung chứa trang liên kết đến 
– Low Src: tên tập tin ảnh phụ có độ phân giải 
 thấp, làm ảnh thay thế khi chờ hiển thị ảnh 
 chính trên trình duyệt 
– Border: đường viền ảnh 
– Align: canh lề trái, phải, giữa… 
3. Chèn khung ảnh: 
 – Trong thiết kế, nhiều lúc cần dự phòng trước cho 
 ảnh trang trí, nhưng chưa có ảnh thích hợp, ta có thể 
 chèn trước một khung ảnh với kích thước xác định 
 để giữ chổ 
 – Chọn InsertImage Objects Image Placeholder 
 – Xuất hiện hộp thoại Image Placeholder 
 – Nhập tên, kích thước, màu cho khung ảnh 
3. Chèn ảnh vào khung ảnh: 
 – Double click vào khung cần chèn ảnh 
 – Xuất hiện hộp thoại Select Image Source, chọn tập 
 tin ảnh cần chèn vào khung 
4. Insert Rollover Image: Khi đưa chuột vào hình sẽ đổi 
 sang hình khác 
 a) Insert  Image ObjectsRollover Image, Xuất hiện 
 hộp thoại Rolloveer Image 
 – Original Image: ảnh gốc 
 – Rollover Image: ảnh khi rê chuột vào 
5. Chèn Flash: 
 – Insert  Media  Flash 
 – Chọn tập tin kiểu .swf 
 – Tại vị trí chèn xuất hiện biểu tượng Flahs 
  Hiệu chỉnh thuộc tính của Flash: chọn hình flash 
 hiệu chỉnh thuộc tính trong thanh properties 
 inspector 
6. Ảnh nền trang 
 – Ảnh nền là ảnhh tự động lợp đầy trang Web. Khi 
 thiết kế, bạn nên chọn những mẫu nền thật nhạt, chữ 
 sậm hoặc nền thật sậm, chữ màu sáng 
 – Ảnh nền với số Kb càng nhỏ thì trang hiển thị càng 
 nhanh 
7. Cách tạo ảnh nền: 
 – Đặt trỏ trong trang 
 – chọn ModifyPage Properties 
 – Bacground Images : nhập đường dẫn đến tập tin 
 ảnh làm nền 
 – Repeat: Chọn kiểu lặp 
8. Tạo Web Photo album: 
 – Chức năng: Tạo bộ sưu tập các hình ảnh hay cuốn 
 Album giúp người sử dụng quản lý và chọn xem 
 từng hình một cách nhanh nhất 
 – Cách tạo: Để thực hiện chức năng này cần phải cài 
 đặt Macromedia Fireworks và một thư mục chứa 
 các hình photo 
 • Chọn Commands  Create Web Photo album 
 • Xuất hiện hộp thoại Create Web Photo Album 
 • Nhập các thông số click OK, chờ kết quả, xuất 
 hiện thông báo Album đã được tạo. 
 • Trong Site Panel xuất hiện thêm các folder: 
– Folder Thumbnail: chứa các file JPG 
– Folder Page chứa các file .HTM cho mỗi Image 
 tương ứng (trang con) 
– Tập tin Index.htm trong Folder chứa Website, đây 
 là tập tin Album chính 
– Mở tập tin Index.htm và di chuyển giữa các trang 
 bằng các Hyperlink: Next Previous, Home 
9. Tạo Library Item: 
 a) Khái niệm: Library chứa các thành phần của trang 
 như hình ảnh, văn bản … có nhu cầu sử dụng lại 
 hoặc cần cập nhật thường xuyên. Các thành phần 
 này gọi là Library Items. 
 b) Cách tạo: Trong Assets Panel, Click nút Library, 
 Chọn thành phần muốn tạo Library Item và thực 
 hiện một trong các cách sau 
 – Drag chuột kéo thành phần được chọn thả vào 
 khung Library Đặt tên 
 – Click nút New Library Item và đặt tên 
 – Chọn Modify  Library Add Object to 
 Library và đặt tên 
c) Nhập Library Item vào trang mới: 
– Đặt dấu nháy vào nơi muốn nhập Library Item 
– Kéo Library Item từ Assets Panel thả vào document 
 Window 
d) Hiệu chỉnh Library Item: 
– Chọn Library Item trong khung LibraryEdit 
– Xuất hiện hộp thoại cho phép hiệu chỉnh library Item 
– Click Save cập nhật tất cả trang Web có sử dụng 
 Library trong site 
– Có thể cập nhật bằng cách chọn Modify Library 
 Update pages: cập nhật tất cả những trang có sử dụng 
 Library Item 
a) Tách Library Item trong Document khỏi 
 Library: 
– Chọn Library Item trong trang Web hiện hành 
– Click nút Detach from Original trên Properties 
 Inspector 
f) Tạo lại Library Item bằng một library đang 
 sử dụng trong trang 
– Có thể dùng một Library trong trang để tạo lại 
 một Library Item, nếu Library Item bị mất 
– Chọn Library trên trang Web hiện hành 
– Click nút Recreate trên Properties Inspector 
 IV. LIÊN KẾT TRANG TRONG 
 DREAMWEAVER 
1. Giới thiệu: Một liên kết nối từ trang nguồn đến trang đích 
 gồm 2 thành phần: 
 – Đối tượng được chọn làm nút liên kết:Text, 
 Image,Button. Trong Dreamweaver cung cấp thêm một 
 số đối tượng đặc biệt làm nút liên kết như Flash Text, 
 Flash Button, Navigation bar, Rollover Images… 
 – Địa chỉ URL của trang cần liên kết đến3 loại liên kết 
 • Liên kết nội 
 • Liên kết ngoại 
 • Liên kết Email 
2. Các dạng liên kết: 
 a) Dạng liên kết vòng:Là dạng liên kết nối đuôi nhau, 
 trang1 liên kết đến trang 2,…trang n liên kết đến 
 trang 1, đảm bảo người xem có thể xem tất cả các 
 trang, nhưng bất lợi là phải duyệt hết một vòng. 
 a) Dạng liên kết đầy đủ: Tại mổi trang đều tạo liên kết 
 đầy đủ đến tất cả các trang còn lại, đây là dạng liên 
 kết trong site có độ phân cấp thấp 
a) Dạng liên kết cây phân cấp:Trong các Site lớn, mức 
 độ quan trong của từng trang được phân cấp theo từng 
 mức, với trang gốc là trang chủ, mức 1 là nhóm chủ 
 đề chính, mức 2 là nhóm chủ đề con, mức 3 là trang 
 chứa các thông tin chi tiết,…Ở dạng này tồn tại liên 
 kết giữa các trang cùng mức (Same Level), liên kết về 
 mức trên (Parent Level), liên kết về mức dưới (Child 
 level). 
d) Liên kết tiện nghi: Ngoài các dạng liên kết trên, 
 để thuận tiện cho người xem khi lật trang, có thể 
 tạo thêm một số liên kết phụ, như liên kết đến 
 điểm dừng (Bookmark) 
e) Liên kết trang chủ: Trang chủ thường chứa các 
 nút liên kết đến các trang con, do đó cần phải tạo 
 liề kết từ trang con trở về trang chủ 
3. Cách tạo: 
 – Mở trang nguồn 
 – Chọn Insert  Hyperlink 
 • Text: nội dung văn bản làm nút liên kết 
 • Link: Địa chỉ URL của trang cần liên kết đến 
 • Target: Khung chứa trang đích 
 • Title: Câu ghi chú khi chuột chạm vào nút 
 • Access Key: Khi xem trang, nhấn tổ hợp phím 
 Alt + Ký tự nhập để chọn nút và nhấn Enter để 
 liên kết. 
 • Tab Index: trình tự chọn nút khi nhấn phím Tab 
4. Liên kết điểm dừng (Named Anchor) 
 a) Tạo liên kết điểm dừng cùng trang: 
 Đối với các trang Web dài, hoặc trang có nhiều mục, thì 
 nên tạo các điểm dừng. Cách tạo gồm 2 bước: 
  Đặt tên cho điểm dừng: Trong Document window, 
 đặt dấu nháy tại vị trí sẽ làm điểm dừng 
  Chọn Insert  Named Anchor (Ctrl+Alt+A) 
 hoặc Click nút Insert Named Anchor trong bảng 
 Common của thanh Insert 
  Trong hộp thoại Insert Anchor: Nhập tên cho 
 Anchor (không thừa khoảng trắng, không có ký 
 tự lạ) 
 Tạo liên kết điểm dừng: 
  Trong Document Windows, chọn một đoạn văn bản 
 hoặc một hình để tạo link đến điểm dừng 
  Nếu điểm dừng nằm cùng trang thì tại ô link nhập 
 #tên Anchor 
b) Tạo liên kết điểm dừng của trang khác: 
 Thao tác tạo liên kết đến điểm dừng ở trang khác giống 
 như liên kết đến trang khác, nhưng tại mục link phải chỉ 
 ra điểm dừng nào. Theo cấu trúc:#<Tên 
 điểm dừng> 
5. Hiệu chỉnh liên kết: 
 – Chọn nút liên kết cần thay đổi 
 – Chọn menu Modify Change Link… 
 – Hộp thoại Select file cho phép chọn tập tin trang cần 
 liên kết đến 
 – Nếu biết rõ tập tin liên kết mới thì có thể nhập trực 
 tiếp trong ô link của Properties Inspector 
6. Xoá liên kết 
 – Chọn nút muốn loại bỏ liên kết 
 – Chọn Modify Remove Link. Hoặc xoá tên trang 
 liên kết trong ô link của Properties Inspector 
7. Bản đồ ảnh liên kết : 
 – Khi chọn ảnh làm liên kết, thì có một số ảnh kích thước 
 lớn, thường chia nhỏ ảnh đó ra thành nhiều vùng mỗi 
 vùng liên kết đến một trang Web khác, dạng này gọi là 
 bản đồ ảnh liên kết. 
  Những thuận tiện khi sử dụng bản đồ ảnh liên kết: 
 – Giúp tạo nhanh các liên kết 
 – Hình ảnh trực quan, dễ liên tưởng đến trang tương ứng. 
 – Giúp bố cục các liên kết nhanh, không chiếm nhiều khu 
 vực nút trên trang Web 
a) Cách tạo: 
– Chèn ảnh vào trang, click chọn ảnh 
– Trong Properties inspector, hiển thị công cụ Map 
– Chọn công cụ muốn chia vùng 
– Drag chuột quanh phần trên hình mà ta muốn chia 
 vùng để tạo liên kết 
– Trong Properties inspector, tại mục link, nhập địa chỉ 
 của trang cần liên kết đến 
b) Hiệu chỉnh bản đồ liên kết: 
– Di chuyển vùng liên kết 
– Click chọn công cụ để chọn vùng cần di chuyển 
– Drag chuột kéo đến vị trí mới 
c) Thay đổi kích thước vùng liên kết 
– Chọn vùng liên kết 
– Click vào một trong các nút chọn của vùng liên kết 
– Drag chuột để thay đổi kích thước 
d) Xoá vùng liên kết 
– Chọn vùng liên kết 
– Nhấn Delete 
8. Chèn nút biến đổi hình: 
 Trước hết phải có 2 tập tin ảnh, n1.gif màu cam, n2.gif 
 màu xanh trong folder Images của Site 
 – Đặt dấu nháy tại vị trí cần chèn nút động 
 – Chọn Insert  Image Objects Rollover Image. 
 Hộp thoại Insert Rollover Image: 
 • Image Name: Nhập tên ảnh 
 • Original Image: tên tập tin ảnh gốc đại diện khi 
 hiển thị (ví dụ n1.gif) 
 • Rollover Image : tên tập tin ảnh hiển thị khi rê 
 chuột vào (ví dụ n2.gif ) 
 • Alternate Text: câu ghi chú kèm theo 
 • When Click, go to URL: Địa chỉ của trang liên 
 kết đến 
9. Chèn hệ thống nút biến đổi hình: 
 – Dreamweaver có thể giúp bạn cùng một lúc chèn 
 vào cả một hệ thống nút biến hình 
 – Chọn Insert Image Objects Navigation bar 
10. Chèn nút Flash: 
  Macromedia Dreamweaver và Macromedia Flash là một bộ 
 chương trình có thể sử dụng dữ liệu qua lại với nhau rất 
 thuận tiện, do đó có thể dùng các nút Flash được thiết kế 
 sẳn để làm nút liên kết trong Dreamweaver 
  Cách tạo: 
 Chọn InsertMedia Flash Button 
 – Sample: Ví dụ mẫu nút Flash 
 – Style: danh sách tên các nút mẫu Flash 
 – Button Text: văn bản trên nút Flash 
 – Font: kiểu chữ, Size: Cở chữ 
 – Link: Địa chỉ liên kết đến 
 – Target: Tên khung trang liên kết 
 – Bg: Màu nền 
11. Chèn nút Flash Text: 
 – Insert  Media  Flash Text 
 – Hộp thoại Insert Flash Text, nhập vào các thông 
 số: 
 • Font, Size: Font và cở chữ 
 • Color: màu chữ 
 • Rollover Color: Màu chữ thay đổi chi rê 
 chuột qua nút 
 • Text : Nội dung văn bản làm nút 
 • Link: Địa chỉ trang Web liên kết đến 
 • Target: Tên khung trang 
 • Bg Color: màu nền của văn bản nút