THIẾT KÊ WEB

LẦN ĐẦU

Két Quả Thực Tập : http://minh.byethost5.com/site090818/index.html

http://minh.byethost5.com/site090819/index.html

BÀI 8 NGÀY 18.8.2009 SOẠN KS NGUYỄN TRƯỜNG SINH

SAU KHI CÀI ĐẶT SITE CỤC BỘ , BẠN CÓ THỂ LÀM ĐẦY WEBSITE VỚI CÁC TRANG WEB. BẠN TẠO 1 TRANG , ĐẶT TÊN , BỔ SUNG NỘI DUNG VÀ LƯU NÓ . ĐỂ KIỂM TRA , BẠN XEM TRANG TRONG NHIỀU TRÌNH DUYỆT KHÁC NHAU TRƯỚC KHI UPLOAD NÓ LÊN HOST SERVER . DREAMWEAVER GIÚP BẠN DỄ DÀNG XEM WEBSITE TRÊN NHIỀU TRÌNH DUYỆT KHÁC NHAU .

DREAMWEAVER CUNG CẤP DO CÁC BẠN CÁC TRANG MẪU LÀM ĐIỂM XUẤT PHÁT CHO CÔNG VIỆC SÁNG TẠO CỦA BẠN VÀ ĐỂ TĂNG SỰ HẤP DẪN . BẠN CŨNG CÓ THỂ CHỌN NHIỀU TRANG MẪU ĐƯỢC TẠO HOÀN TOÀN BẰNG CSS .

CHƯƠNG NÀY ĐỀ CẬP NGẮN GỌN VỀ CÁCH BỔ SUNG VĂN BẢN – LIÊN KẾT HÌNH ẢNH VÀO TRANG WEB . CHƯƠNG 4- 7-8 SẼ TÌM HIỂU CHI TIẾT HƠN CÁCH BỔ SUNG NÀY .

TRANG HTML ĐẦU TIÊN ĐƯỢC TẠO TRONG SITE LÀ TRANG CHỈ MỤC ( INDEX PAGE : LÀ TRANG ĐƯỢC TRÌNH DUYỆT TỰ ĐỘNG TẢI LÊN KHI NGƯỜI DÙNG TRUY XUẤT VÀO SITE ) . TRANG CHỈ MỤC CÓ THỂ CÓ NHIỀU TÊN KHÁC NHAU NHƯNG THƯỜNG LÀ : INDEX.HTML . SAU ĐÓ BẠN TẠO TIẾP TỤC CÁC TRANG KHÁC .

BẠN TẠO 1 TRANG MỚI BẰNG CÁCH SỬ DỤNG TRANG KHỞI ĐỘNG HOẶC DÙNG HỘP THOẠI NEW DOCUMENT.

I.SỬ DỤNG TRANG KHỞI ĐỘNG

Đóng tất cả các cửa sổ đang mở . Trang Khởi Động xuất hiện , các Đề Mục trong Trang này là Một Liên Kết . Khi Bạn nhấp lên nó sẽ hiển thị một nội dung mới .

Phần Create New , nhấp HTML > Dreaweaver tạo ra một Trang HTML mới và rổng . Bạn có thể mở các Trang đã làm việc gần đây bằng cách nhấp vào 1 Đề Mục trong Phần Open a Recent Item .

Khi nhấp vào ColdFusion hoặc PHP cũng tạo ra một Trang HTML . Nhấp vào CSS tạo ra 1 Trang Bảng Kiểu mới . Nhấp vào bất kỳ lựa chọn khác sẽ tạo ra các hồ sơ được thiết kế dành cho những ngôn ngữ lập trình Web khác ( Thường trong chế độ Code ) .
Trong Phần Craete From Samples ( Tạo từ Khuôn Mẫu ) , bạn nhấp vào bất cứ Đề Mục nào sẽ mở ra HT New Document để bạn có thể chọn Mẫu Trang cần thiết .
Nếu không muốn Trang Khởi Động hiện ra , bạn chọn Edit > Preferences > Chọn nhóm General > Bỏ chọn Show Welcome Screen .

II.SỬ DỤNG HỘP THOẠI NEW DOCUMENT

Giống như Trang Khởi Động , HT New Document giúp bạn tạo một số Loại Hồ Sơ Mới linh hoạt hơn Trang Khởi Động . Nó cho phép chọn doctype ( Loại hồ sơ ) của hồ sơ mới

CÁCH THỨC TẠO 1 TRANG MỚI TỪ HT NEW DOCUMENT :

Chọn File > New ( Ctrl+N ) > HT New Document xuất hiện với Blank Page được kích hoạt > Nhấp chọn 1 Kiểu Web trong Cột Page Type > Cột Layout xuất hiện nhửng Kiểu tương ứng , nhấp chọn 1 kiểu > Xuất hiện Preview và phần Mô tả Description .

Nếu cần bạn có thể thay đổi DocType từ Menu bật lên . Đây là bước tùy chọn bạn có thể thực hiện hoặc không > Nhấp Create . Dreamweaver sẽ tạo Hồ Sơ Mới và hiển thị nó trong Cửa Sổ Mới .
Nếu muốn thay đổi bất kỳ giá trị mặc định nào trong Hồ Sơ Mới , Nhấp Nút Preferences > HT Preferences xuất hiện . Bạn có thể thay đổi Kiểu trong Desfault Document , thay đổi phần mở rộng cho hồ sơ đó trong Default Extension – Thay đổi DTD mặc định trong Default Document Type – Thay đổi trong mã hóa ký tự mặc định trong Default Encoding

Giải thích DOCTYPE :

Theo mặc định khi thiết kế Web HTML khai báo ở phần đầu là XHTML 1.0 Transitional , Dreamweaver sẽ chèn Doctype này và mã lệnh phù hợp với chuẩn đó .

Các Trình Duyệt căn cứ khai báo Doctype để xác định Trang Web sẽ thể hiện . Bạn chọn 1 trong Bảng Danh sách xổ xuống Hàng Default Document Type ( Định Nghĩa Kiểu Hồ Sơ ) .

III.SỬ DỤNG CÁC TRANG MẪU

Dreamweaver CS3 có nhiều Trang Mẫu để tạo các Trang Mới . Sau khi tạo hồ sơ từ 1 Trang mẫu , bạn có thể tùy biến và chỉnh sửa nó .

NHÓM CÁC TRANG MẪU : Gồm có 5 Nhóm

· CSS STYLE SHEET ( BẢNG KiỂU CSS ) :

o Là những hồ sơ Bảng Kiểu CSS bên ngoài chứa các định nghĩa Kiểu cho nhiều phần thể hiện của Trang . Bạn có thể nhấp vào 1 bảng iểu để xem trước và phần mô tả .

o Nhấp Page From Sample > Chọn CSS Style Sheet > Chọn Full Design : Arial, Blue/Green/Gray > Xem Preview và mô tả > Nhấp Create .

· FRAMESETS ( BỘ KHUNG ) :

o Có 15 Trang Bộ Khung với các Bố Cục Khung Hình khác nhau . Nhóm này giúp bạn tạo nhiều Bộ Khung dễ hơn đáng kể so với tạo bằng tay .

o Bạn có thể xem trước và chọn từ Bộ Khung được định nghĩa sẵn .

· PAGE DESIGN ( CSS ) :

Cung cấp 6 Bố Cục trang chỉ sử dụng CSS ( Thay vì Bảng ) để tạo bố cục và bố trí thành phần .

· STARTER PAGE ( THEME ) :

Nhấp Page From Sample > Chọn Starter Page ( Theme ) cung cấp rất nhiều Trang để tạo toàn bộ Site . Có nhiều chủ đề như : Entertainment

( Giải trí ) – Travel ( Du Lịch ) – Spa ( Suối ) . . . Mỗi kiểu Site có 1 Trang chủ - Trang sản phẩm – Trang văn bản – Trang Danh Mục và trang Lịch Trình . Tất cả đều dùng chung nột kiểu thiết kế cơ bản . Chúng rất hữu dụng nhưng lại có cấu trúc Bảng nên có thể không phù hợp những gì bạn cần .

· STARTER PAGE ( BASIC) :

o Nhấp Page From sample > Chọn Starter Page ( Basic ) > Chọn 1 Kiểu trong Sample Page > Xem Preview và mô tả > Nhấp Create .

o Cung cấp những bố cục cơ bản có rất nhiều Trang về Commerce – Data – Image – Master – Text – UI .

o Chúng được xây dựng bằng cách sử dụng bố cục Bảng .

IV.CÁCH THỨC TẠO 1 TRANG TỪ TRANG MẪU

1. File > New ( Ctrl+N ) > HT New Document xuất hiện , cột thứ nhất chọn Blank Page > Cột Page Type hiện ra danh sách Web , chọn 1 dạng Web > Cột Layout hiện ra danh sách các Mẫu , chọn 1 Mẫu > Xem Preview và mô tả bên dưới > Nhấp Create .

2. Dreamweaver CS3 tạo ra Trang trong Cửa sổ mới

V.ĐẶT TIÊU ĐỀ CHO TRANG

Tiêu Đề là văn bản xuất hiện trong Thanh Tiêu Đề của Cửa Sổ Trình Duyệt Web , ở phần trên cùng . Đây là phần đầu tiên bạn cần phải làm . Khi Người Xem dùng công cụ tìm kiếm , họ nhập chủ đề vào và sẽ tìm được Trang mong muôn căn cứ vào Tiêu Đề . Khi bạn vào Google nhập : “ Untitled Document “ ( Hồ sơ không đặt tiêu đề ) sẽ xuất hiện 21 Triệu gợi ý .

VI.BỔ SUNG VĂN BẢN VÀO TRANG

Phần này chỉ đề cập sơ nét để giúp bạn đủ tạo Trang Web đầu tiên , phần hướng dẫn chi tiết sẽ nói trong các bài sau . Bổ sung văn bản cũng giống như cách nhập văn bản trong một trình soạn thảo văn bản bất kỳ .

Trên Trang mới , nhấp chuột chỉ định vị trí chèn . Có thể nhấp Phím Entre để xuống hàng .
Nhập văn bản . văn bản được canh lề bên Trái .

VII.CÁCH THỨC ĐỊNH DẠNG VĂN BẢN

Trên Thanh Chèn ( Insert Bar ) , chọn Text từ Menu bật lên > Nhaom1 Text xuất hiện .
Bằng cách sử dụng thanh chèn và HKS Properties , bạn áp dụng định dạng mong muốn ( Giống thao tác Trình soạn thảo văn bản ) .

TẠO CÁC LIÊN KẾT

Để bổ sung 1 liên kết vào Trang , bạn chọn văn bản mong muốn biến thành liên kết . Cung cấp URL ( Uniform Resorce Locator – Địa chỉ sẽ nhập vào thanh Address của Trình Duyệt ) cho liên kết đó . Sẽ hướng dẫn chi tiết trong bài sau .

Bôi đen chọn văn bản (NHẤP LÊN ĐÂY ĐỂ XEM TRANG INDEX.HTML ) muốn biến thành liên kết .
Thực hiện 1 trong những cách sau đây :

· Nếu liên kết đến 1 Trang của Site :

o Nhấp nút Point to File trong HKS Properties > Rê núy này đè lên Trang Index.html > Thả chuột ra , bạn đã thấy Tên tập tin hiện trong Trường Link .

o Nhấp lên : NHẤP LÊN ĐÂY ĐỂ XEM TRANG INDEX.HTML > Xuất hiện Trang index.html

· Nếu liên kết đến 1 Tập tin trên Ổ Dỉa Cứng ( Trong hoặc ngoài Thư Mục của Site Cục Bộ ) :

o Nhấp lên văn bản muốn tạo liên kết .

o Nhấp Nút Browse To File ( Di chuyển đến Tập Tin ) trong HKS Properties > HT Select File xuất hiện > Di chuyển đến tập tin muốn liên kết đến > Chọn nó > Ok .

o Tên tập tin sẽ xuất hiện trong Trường Link . Nếu tập tin này nằm ngoài Thư Mục gốc Cục Bộ , Dreaweaver sẽ a thông báo và hổ trợ sao chép tập tin vào Thư Mục gốc Cục bộ .

· Nếu liên kết đến 1 Địa Chỉ Web :

o Bôi đen văn Bản : NHẤP LÊN ĐÂY ĐỂ ĐẾN 1 ĐỊA CHỈ TRANG WEB

o Nhập vào Trường Link trong HKS Properties :

http://www.hunglandesign.com/

o Menu File > Save All > Nút Preview > Hiện ra Trang Web này trong Trình Duyệt > Nhấp lên từng liên kết để xem kết quả .

VIII.BỔ SUNG HÌNH ẢNH

Dreamweaver giúp bạn dễ dàng bổ sung Hình Ảnh vào Trang . Các bài sau sẽ nói chi tiết hơn . Bây giờ chỉ tạm hướng dẫn để bạn Insert Hình vào .

1. Trong Hồ Sơ nhấp vào 1 vị trí muốn hình ảnh xuất hiện .

2. Chọn Common trong Thanh Chèn > Nhấp xổ xuống Nút Images > Chọn Image > HT Select Image Sources xuất hiện ( Chọn nguồn hình ảnh ) .

3. Di chuyển đến tập tin hình ảnh cần thiết và chọn nó > Xem Preview > Dreaweaver hỏi bạn có muốn Copy Hình này vào Trang của bạn ? > Yes .

4. Ra Bảng ADCS3 , Hàng Save in có tên Trang Web của bạn , dưới đó là danh sách các Hình ảnh đã có trong Trang Web > Save .

5. Nếu Hình ảnh không nằm bên trong Thư mục images của Folder Website , Dreamweaver sẽ sao chép Hình ảnh vào Thư mục đó > Hiện ra HT Image Tag Accessibility Attributes ( Các thuộc tính của truy xuất hình ảnh ) .

· Trường Alternate text ( Văn bản thay thế ) : Bạn nhập văn bản vào đây . Đây là bước tùy chọn nhưng bạn nên thực hiện . Văn bản thay thế là văn bản được kèm theo hình ảnh để Người Dùng Khiếm Thị sử dụng hoặc dành cho những ai muốn duyệt Trang Web mà không cho hình ảnh xuất hiện > Ok > Đã hiện ra Hình ảnh vừa Insert vào .

· Trường Long description ( Phần mô tả hoàn chỉnh ) sẽ liên kết đến tập tin chứa phần mô tả đầy đủ về hình ảnh . Tùy chọn này thường không được dùng .

· Nếu không muốn HT này xuất hiện , bạn vào Edit > Preferences > Cột Trái chọn Accessibility > Tắt Images > Ok .

IX.ĐẶT TÊN VÀ LƯU TRANG

1. ĐẶT TÊN :

Khi làm việc trên từng Trang , bạn cần phải lưu những thay đổi ( File > Save

( Ctrl+S ) để lưu từng bước từng Trang mà không có hiển thị HT để nhập chi tiết – File > Save As ( Ctrl+Shift+S ) để lưu Trang Web ( Có hiện ra HT Chi tiết để bạn nhập vào ) hoặc Save All để lưu toàn bộ Website . Sau khi xây dựng Trang , bạn cần đặt tên và lưu nó trong Thư Mục của Site Cục Bộ . Bạn nên tạo thói quen lưu thường xuyên đề phòng cúp điện hay bị treo máy .

Cần phải hiểu rõ sự khác biệt giữa Tiêu đề và tên của 1 Trang :

· Tiêu đề xuất hiện ở trên cùng của Trang trong Trình duyệt Web . Ví dụ : Chào mừng bạn đến Trang Web của utbinh .

· Tên của Trang là tên của tập tin và là một phần của toàn bộ Website . Ví dụ : index.html là tên của 1 Trang Web , trong Website có nhiều Trang .

2. CÁCH THỨC LƯU TRANG LẦN ĐẦU :

· File > Save ( Ctrl+S ) . HT Save As xuất hiện

· Thường Hàng Save in đã có tên Website ( Site Cục Bộ ) của bạn đã đặt ngay từ đầu , thường mặc định nằm trong My Documents - Hàng File name bạn nhập tên Trang Web > Nhấp Nút Save . Khung trắng lớn chứa tất cả các Files của Website .

· Nếu khi hiện ra bạn không thấy tên Site Cục bộ , bạn hảy di chuyển đến đó và bắt đầu nhập tên cho Trang Web .

· Cách sử dụng ký tự để dặt tên : Bạn chỉ sử dụng các ký tự - các con số - và ký tự gạch dưới ( Để thay thế khoảng trống ) . Nên đặt trên tập tin ngắn gọn .

X.MỞ 1 TRANG

File > Open ( Ctrl+O ) . HT Open xuất hiện > Di chuyển đến tập tin > Chọn nó > Nhấp Open > tập tin sẽ mở trong ửa Sổ hoặc trong Tab nếu đã mở Cửa Sổ ) .
Nếu muốn Mở 1 Trang đã làm việc gần đây , tìm trong nhóm Open a recent Item cảu Trang Khởi Động và nhấp nó .

XI.XEM TRƯỚC TRONG TRÌNH DUYỆT

Xem trước Trang trong chế độ Design của Dreamweaver rất hữu dụng nhưng nó sẽ không giống trong Trình Duyệt Web . Lý do : Chế độ Design chỉ là 1 thể hiện của Trang HTML , nhưng Trình Duyệt Web sẽ hiện thị khác nhau trên từng Trình Duyệt Internet Explorer của Windows – Mozilla FireFox – Safari – Chrome . Do mỗi Trình Duyệt sử dụng một công cụ thể hiện khác nhau , chúng bố cục và vẽ các trang theo cách thức khác biệt .

Theo mặc định , Dreamweaver lấy Trình Duyệt mặc định của Hệ Điều hành làm hồ sơ Trình Duyệt ( lấy Internet Explorer của Windows ) nhưng bạn có thể thay đổi điều này nếu cần .

1. Dreamweaver yêu cầu lưu Trang trước khi cho xem trước . Nếu quên lưu Dreamweaver sẽ hỏi bạn muốn lưu hay không . ếu nhấp No thì phần xem trước sẽ là phiên bản được lưu cuối cùng cảu Trang do đó hãy tạo thói quen lưu Yes trước khi xem .

2. Có nhiều cách xem trong Trình Duyệt : Nhấn Phím F12 – Hoặc Chọn File > Preview in Browser > Chọn một Trình Duyệt đã cài trong máy bạn .

Hoặc nhấp xổ xuống cảu Nút Preview/ Debug in Browser > Menu bật lên , bạn chọn Trình Duyệt đang có trong hệ thống . có trong

XII.CÁCH THỨC CÀI ĐẶT CÁC TRÌNH DUYỆT

XUẤT HIỆN TRONG DANH SÁCH BROWSER

Chọn File > Preview in Browser > Edit Browser List ( Chỉnh sửa Danh sách Trình Duyệt ) từ Menu con > HT Preferences xuất hiện đã chọn Preview in Browser .
Bạn có thể thực hiện 1 trong nhiều cách :

· Để bổ sung 1 Trình Duyệt vào danh sách , nhấp dấu + rồi điền thông tin vào HT Add Browser ( Bổ sung Trình Duyệt ) xuất hiện > Nhập name > Nhấp Nút Browser > Cửa sổ Program Files mở ra có danh sách các Chương trình , bạn chọn 1 Trình Duyệt đã cài đặt .

· Để loại bỏ 1 Trình Duyệt ra khỏi danh sách : Chọn Trình Duyệt muốn loại bỏ và nhấp dấu - .

· Đề cài đặt 1 Trình Duyệt chính làm Trình Duyệt xem trước ( Nó sẽ mở ra khi nhấp phím F12 ) > Chọn nó > Chọn Hộp kiểm Primary Browser

( Trình Duyệt chính ) .

· Đề cài đặt 1 Trình Duyệt phụ làm Trình Duyệt xem trước phụ ( Nó sẽ mở ra khi nhấp phím Ctrl+F12 ) > Chọn nó > Chọn Hộp kiểm Secondary Browser ( Trình Duyệt phụ ) . > Ok để đóng HT .

XIII.CÁCH THỨC THIẾT LẬP THUỘC TÍNH CHO TRANG

Thông tin chứa trong Thẻ HEAD có liên quan đến toàn Trang . Những thuộc tính Trang này gồm có : Thông tin về hình thức của Trang – Cách hiển thị liên kết – Những thiết lập Font chữ cho Tiêu Đề và phương pháp MÃ HÓA được dùng ( Chính là Bộ Ký Tự mà Trình Duyệt sẽ sử dụng để thể hiện Trang ) .

Mã Hóa : Các Trang tiếng Anh thường dùng phương pháp mã hóa Western European trên Windows và Western ( ISO latin 1 ) trên MAC . NHững phương pháp mã hóa này khác nhau về kỹ thuật nhưng rất khó phát hiện và chỉ khác biệt ở cách thức làm việc của bạn . Dreamweaver và các Trình Duyệt Web đều sử dụng phương pháp mã hóa để tải bộ Ký Tự thích hợp cho Trang . Ví dụ : Nếu thiết lập một trong những phương pháp mã hóa Tiếng Trung Hoa , Dreamweaver và Trình Duyệt Web sẽ tải bộ Ký Tự Trung Hoa .

Menu Modify > Page Properties ( Ctrl+J) > HT Page Properties xuất hiện > Trong Cột Category , nhấp vào 1 Nhóm mong muốn > Apperance bên Trái sẽ hiện ra các Trường tương ứng của Nhóm đó để bạn thiết lập thuộc tính cho Trang > Sau khi chọn xong các tùy chọn cần thiết , nhấp Apply để xem những thay đổi trên hồ sơ đang mở mà không cần đóng HT Page Properties , vừa ý nhấp Ok để lưu những thay đổi .

NHÓM APPERANCE : Có các tùy chọn sau

Page Font ( Font chữ của trang ) : Chọn Font chữ áp dụng cho các Trang Web . Khi nó bị ghi đè bởi Bảng Kiểu CSS , Dreamweaver sẽ sử dụng Font chữ mặc định của nó . Chọn In đậm hoặc in nghiêng .
Size ( Kích thước ) : Chọn Kích cở áp dụng cho các Trang Web . Khi nó bị ghi đè bởi Bảng Kiểu CSS , Dreamweaver sẽ sử dụng kích thước chữ mặc định của nó . Có thể chọn :

Kích thước tuyệt đối : 9,10,12. . .
Kích thước tương đối : Small- Medium – Large – x large Cực lớn . Đơn vị là : pixel-point-in-cm-mm-pica-em-ex - và % .

· Text Color ( Màu văn bản ) : Bạn thiết lập màu mặc định cho văn bản của Trang Web . Nhấp Ô màu > Chọn màu .

· Background Color ( Màu nền ) : Bạn thiết lập màu mặc định cho nền của Trang Web . Nhấp Ô màu > Chọn màu .

· Background Image ( Ảnh nền ) : Cho phép thiết lập hình ảnh phái sau văn bản và hình ảnh của Trang . Nhấp Nút Browser để mở HT Select Image Sources > Di chuyển đến hình ảnh > Ok . Nếu thiết lập ảnh nền nó sẽ ghi đè lên màu nền

· Repeat ( lập lại ) : Thiết lập ảnh nền được lập lại nếu nó không phủ đầy Trang. Bạn có thể chọn :

Repear : Lập lại hình ảnh theo chiều ngang hoặc chiều đứng ,
Repeat – x : Lập lại ảnh theo chiều ngang .
Repeat – y : Lập lại ảnh theo chiều đứng .
No Repeat : Hiển thị ảnh chỉ 1 lần .

· Margins ( Lề ) : Cho phép thiết lập các lề Lef ( Trái ) – Right ( Phải ) Top ( Trên ) – Bottom ( Đáy ) của Trang Web . Bạn sử dụng hệ thống đơn vị đo lường làm đơn vị đo .

NHÓM LINKS ( Các Liên Kết ) :

Các tùy chọn này sẽ ảnh hưởng cách thực hiện liên kết . Bạn có thể điều khiển cách thức liên kết hiển thị về nhiều phương diện bằng HT Page Properties , nhưng phương pháp kiểm saot1 tốt hơn là thiết lập các thuộc tính liên kết thông qua CSS .

Link Font ( Font chữ liên kết ) : Xác định Họ Font chữ mặc định mà các trang Web sẽ dùng để hiển thị liên kết . Dreamweaver sẽ sử dụng Họ Font Chữ xác định trừ khi bị ghi đè bởi Bảng Kiểu CSS . Có thể chọn in đậm – in nghiêng .
Size ( Kích thước ) : Thiết lập kích thước cho Font Chữ mặc định . Dreamweaver sẽ sử dụng Họ Font Chữ xác định trừ khi bị ghi đè bởi Bảng Kiểu CSS . Bạn cũng có thể chọn kích thước tuyệt đối hoặc tương đối . Nếu chọn kích thước tuyệt đối sẽ cho phép bạn chọn các đơn vị đo lường .
Link Color ( Màu liên kết ) : Thiết lập màu để áp dụng cho văn bản liên kết . Nhấp Ô màu > Chọn màu .

o Visited Links ( các liên kết đã truy xuất ) : Chọn 1 màu . Khi đã truy xuất nó sẽ hiện ra màu đã chọn .

o Rollover Links ( Các liên kết khi chuột lướt trên chúng ) : Đặt con trỏ lên liên kết hiện ra màu đã chọn .

o Active Links ( Các liên kết kích hoạt ) : Màu hiên ra khi bạn nhấp vào .

o Underline Style ( Kiểu gạch dưới ) : Gồm có các lựa chọn

· Always Underline : Luôn gạch dưới .

· Never Underline : Không gạch dưới .

· Dhow underline only on rollover : Thể hiện gạch dưới khi con trỏ lướt trên liên kết .

· Hide underline on Rollover : Dấu gạch dưới khi con trỏ lướt trên liên kết .

NHÓM HEADINGS ( Các Tiêu Đề )

Nhóm Headings có các tùy chọn sau dành cho Tiêu Đề :

· Heading Font ( Font chữ Tiêu Đề ) : Xác định Font chữ mặc định dành cho Tiêu Đề . Dreamweaver sẽ xác định Họ Font Chữ được xác định trừ khi nó bị ghi đè bởi Bảng Kiểu CSS . Bạn có thể chọn In đậm , in Nghiêng .

· Từ Heading 1 ( Tiêu Đề cấp 1 ) đến Heading 6 ( Tiêu Đề cấp 6 ) : Cho phép thiết lập các tùy chọn và màu cho Tiêu Đề . Bạn chọn đơn vị tính . Chọn màu . Dùng bảng Kiểu CSS tốt hơn khi định nghĩa kiểu Heading .

NHÓM TITLE/ENCODING ( Tiêu Đề / Phương Pháp Mã hóa ) :

Nhóm Title/Encoding cho phép thay đổi Tiêu Đề và một số đề Mục khác trong 1 Trang Web .

· Title ( Tiêu Đề ) : Cho phép thay đổi Tiêu Đề của Trang . Nó cũng có hiệu lực tương đương với Trường Title ở phần trên cùng của Cửa Sổ Hồ Sơ .

· Document Type (DTD) ( Kiểu hồ sơ ) : Cho phép thay đổi “ doctype “ của Trang . Khi bạn thay đổi Thẻ này , Dreamweaver sẽ thay đổi mã lệnh của Trang ( nếu cần ) để nó hợp chuẩn với DTD được chọn .

· Encoding ( Phương pháp mã hóa ) : Thiết lập phương pháp mã hóa được dùng trong Trang .

· Unicode Normalization Form ( Hình thức tiêu chuẩn hóa Font chữUnicode )

Và Include Unicode Singature (BOM) : Chỉ được kích hoạt khi sử dụng Font chữ Unicode UTF-8 làm phương pháp mã hóa . Chọn Help để tìm hiểu thêm .

NHÓM TRACING IMAGE ( Dò vết hình ảnh ) :

Có một số người muốn thiết kế hình ảnh của mình trong Photoshop sau đó đưa vào Dreamweaver làm ảnh nền . Đây không phải là ảnh nền cho Trang mà là 1 chỉ dẫn dưới dạng tham chiếu để tạo lại thể hiện tương tự trong Dreamweaver . Hướng dẫn này gọi là : Tracing Image ( Dò vết hình ảnh ) . Đặc điểm này chí có trong Dreamweaver và sẽ không thể hiện khi bạn xem trước Trang trong Trình Duyệt . Có 2 tùy chọn :

· Tracing Image : Nhấp nút Browse đến hình ảnh nhấp Ok .

· Transparency ( Độ trong suốt ) . Thiết lập độ sáng từ 0 đến 100% .

XIV.ĐỊNH NGHĨA CÁC THẺ META

Thông tin về Trang chứa trong 1 loại Thẻ được gọi là Thẻ Meta . Thẻ Meta có nhiều thông tin tóm tắt của Trang , kèm theo các Từ Khóa để giúp công cụ tìm kiếm xác định Trang , phần mô tả văn bản của Trang và liên kết đến hô sơ bên ngoài . chẳng hạn như 1 Bảng Kiểu .

Mở Dreamweaver CS3 > File > Open > HT Open xuất hiện > Đến Website cần mở > Chọn index > Open > Hiện ra nội dung Trang Chủ trong Cửa Sổ Hồ Sơ .
Menu Insert > HTML > Head Tags > Menu con có 6 nhóm :

· META : là nhóm chung , cho phép bổ sung thông tin cần thiết . Bạn phải đặt tên và xác định nội dung của nó .

· KEYWORKS ( Từ Khóa ) : Bổ dung 1 hoặc nhiều từ để các công cụ tìm kiếm có thể sử dụng hồ sơ trợ giúp chúng trong việc liệt kê Trang . Các từ khóa phân cách bởi dấu phẩy , Dreamweaver sẽ đưa những từ khóa này vào thẻ META .

· DESCRIPTION ( Mô tả ) : Bổ sung phna62 mô tả văn bản của Site để các công cụ tìm kiếm sử dụng .

· REFRESH ( Làm mới ) : Chọn Refresh this Document Tải lại hồ sơ hiện tại sau 1 khoảng thời gian được xác định theo giây hoặc chọn Go to URL đổi hướng hồ sơ đến URL khác .

· BASE ( Cơ Sở ) : Thiết lập URL cơ sở cho Trang . Tất cả đường dẫn tương đối trỏ đến hồ sơ trong Trang đều được xem là tương đối với URL cơ sở . Tham khảo các bài viết sau .

· LINK ( Liên kết ) : Bổ sung 1 liên kết vào hồ sơ bên ngoài . Nó thường được dùng để định nghĩa vị trí cho Bảng Kiểu CSS bên ngoài .

Không nên quá lạm dụng Keywords hoặc Description . Các công cụ tìm kiếm sẽ tốn nhiều thời gian để xác định nhiều từ khóa hoặc phần mô tả quá dài và điều này sẽ ảnh hưởng đến việc xếp hảng của Site . Các Site có nhiều từ khóa và phần mô tả dài sẽ bị nằm bên ngoài Bảng Kết Quả Tìm Kiếm .

Két Quả Thực Tập :

http://minh.byethost5.com/site090818/index.html

http://minh.byethost5.com/site090819/index.html

NGÀY 18.8.2009 :

8.DREAMWEAVER : THIẾT KẾ WEB LẦN ĐẦU

[img]http://utbinh.com/A8/090818/a.png[/img]

[img]http://utbinh.com/A8/090818/b.png[/img]

http://utbinh.com/A8/090818/a.png

http://utbinh.com/A8/090818/b.png

http://utbinh.com/A8/090818/TRANGMAU.doc

http://utbinh.com/A8/090818/TRANGMAU.pdf

Kết Quả Thực Tập :