Dreamweaver MX là một công cụ thiết kế web chuyên nghiệp cho phép người dùng tạo và chỉnh sửa trang web thông qua chế độ trực quan mà không cần viết mã. Nó hỗ trợ các chức năng như chèn đối tượng, tạo mẫu và xem dưới dạng mã hoặc thiết kế. Tài liệu này cũng hướng dẫn người dùng cách cài đặt, tạo trang web mới, quản lý nội dung và xuất bản website lên server.

1. DREAMWEAVERDREAMWEAVER
CH NG VIIIƯƠ

2. I.I. GIỚI THIỆUGIỚI THIỆU
1.1. Dreamweaver MX là một công cụ thiết kế web chuyênDreamweaver MX là một công cụ thiết kế web chuyên
nghiệp, phần cốt lõi của nó là HTMLnghiệp, phần cốt lõi của nó là HTML
2.2. Dreamweaver MX là một công cụ trực quan, trong đóDreamweaver MX là một công cụ trực quan, trong đó
có thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiềucó thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều
loại đối tượng khác mà không cần viết một đoạn mã nàoloại đối tượng khác mà không cần viết một đoạn mã nào
3.3. Dreamweaver MX có thể thiết kế bằng chế độ DesignDreamweaver MX có thể thiết kế bằng chế độ Design
view hoặc Code view hoặc Code and Designview hoặc Code view hoặc Code and Design

3. II.II. CÀI ĐẶTCÀI ĐẶT
1.1. Dreamweaver MX 2004 là một chương trình trongDreamweaver MX 2004 là một chương trình trong
bộ Macromedia MX, bạn nên cài đặt trên máy trọnbộ Macromedia MX, bạn nên cài đặt trên máy trọn
bộ Macromedia MXbộ Macromedia MX
2.2. Sau khi cài đặt, khởi động Draemvaerver MX:Sau khi cài đặt, khởi động Draemvaerver MX:
StartStart ProgramsPrograms MacromediaMacromedia  MacromediaMacromedia
Dreamweaver MX 2004Dreamweaver MX 2004

4. III.III. MÀN HÌNH DREAMWEAVERMÀN HÌNH DREAMWEAVER
1.1. Insert BarInsert Bar: Gồm các chức năng tiện ích dùng để chèn: Gồm các chức năng tiện ích dùng để chèn
các đối tượng vào trang webcác đối tượng vào trang web
a)a) Common: Chèn các đối tượng: Image, Flash, Date,Common: Chèn các đối tượng: Image, Flash, Date,
Template, …Template, …
b)b) Layout: Chứa các công cụ trình bày trang, gồm 3 chếLayout: Chứa các công cụ trình bày trang, gồm 3 chế
độ: Standard, Expended, Layoutđộ: Standard, Expended, Layout
c)c) Forms: Chứa các công cụ tạo FormForms: Chứa các công cụ tạo Form
d)d) Text: Dùng định dạng văn bảnText: Dùng định dạng văn bản
e)e) HTML: chứa các công cụ tạo trang webHTML: chứa các công cụ tạo trang web
bằng code viewbằng code view

5. 2.2. Document ToolbarDocument Toolbar: Chứa các nút cho phép xem: Chứa các nút cho phép xem
trang web ở dạng Design hay dạng Codetrang web ở dạng Design hay dạng Code
a)a) Show code view: Xem dạng trang HTMLShow code view: Xem dạng trang HTML
b)b) Show Design view: Xem trang dạng thiết kế, sửShow Design view: Xem trang dạng thiết kế, sử
dụng các công cụ của Dreamwerverdụng các công cụ của Dreamwerver
c)c) Show code and design view: Chia cửa sổ làm 2Show code and design view: Chia cửa sổ làm 2
phần: phần trên dạng code view, phần dưới dạngphần: phần trên dạng code view, phần dưới dạng
Design viewDesign view
d)d) Title: tiêu đề của trang WebTitle: tiêu đề của trang Web
e)e) Preview/Debug in Browser:Xem kết quả trang webPreview/Debug in Browser:Xem kết quả trang web
thông qua trình duyệt webthông qua trình duyệt web
f)f) Document Window: Cửa sổ dùng để tạo và hiệuDocument Window: Cửa sổ dùng để tạo và hiệu
chỉnh trang Webchỉnh trang Web

6. 3.3. Properties InspectorProperties Inspector: Hiển thị các thuộc tính của các: Hiển thị các thuộc tính của các
đối tượng đang được chọn, đồng thời cho phép chỉnhđối tượng đang được chọn, đồng thời cho phép chỉnh
sửa các thuộc tính đósửa các thuộc tính đó
4.4. Panel groupsPanel groups: nhóm các Panel cho phép quản lý các: nhóm các Panel cho phép quản lý các
đối tượng trong trang Webđối tượng trong trang Web
a)a) Bật / tắt các thanh Panel: Chọn menu WindowBật / tắt các thanh Panel: Chọn menu Window 
Chọn thanh Panel tương ứngChọn thanh Panel tương ứng
b)b) Mở rộng các thanh Panel: Click vào mũi tên ở gócMở rộng các thanh Panel: Click vào mũi tên ở góc
trái của mỗi Paneltrái của mỗi Panel
5.5. Status barStatus bar: Thanh trạng thái, nằm dưới đáy của: Thanh trạng thái, nằm dưới đáy của
Document Window, hiển thị Tag Selector, WindowDocument Window, hiển thị Tag Selector, Window
size, Document size và Download time.size, Document size và Download time.

7. a)a) Tag Selector: Hiển thị các tag HTML tại vị tríTag Selector: Hiển thị các tag HTML tại vị trí
hiện hành của con trỏhiện hành của con trỏ
b)b) Document size and Download time: Kích cở ướcDocument size and Download time: Kích cở ước
chừng của tài liệu và thời gian tải tài liệu xuốngchừng của tài liệu và thời gian tải tài liệu xuống
c)c) Window size: Hiển thị kích thước hiện tại của tàiWindow size: Hiển thị kích thước hiện tại của tài
liệu, được tính bằng Pixel. Khi định kích thướcliệu, được tính bằng Pixel. Khi định kích thước
của trang web phải tính đến việc sao cho an toàncủa trang web phải tính đến việc sao cho an toàn
đối với mọi độ phân giải.đối với mọi độ phân giải.

8. IV.IV. KẾ HOẠCH THIẾT KẾ MỘT WEBSITEKẾ HOẠCH THIẾT KẾ MỘT WEBSITE
1.1. Các yêu cầu cơ bản khi thiết kế website:Các yêu cầu cơ bản khi thiết kế website:
a)a) Xác định yêu cầu và mục đích của WebsiteXác định yêu cầu và mục đích của Website
b)b) Chuẩn bị nội dung cho các trangChuẩn bị nội dung cho các trang
c)c) Phác thảo khuôn mẫu (Template) cho trang, thườngPhác thảo khuôn mẫu (Template) cho trang, thường
các trang có cùng chủ đề thì sử dụng chung mộtcác trang có cùng chủ đề thì sử dụng chung một
templatetemplate
d)d) Xác định cấu trúc của Website, có 3 kiểu cấu trúc:Xác định cấu trúc của Website, có 3 kiểu cấu trúc:
– Tuyến tínhTuyến tính
– Phân cấpPhân cấp
– Hình chópHình chóp
Tuỳ theo mục đích của Website mà chọn kiểu phù hợpTuỳ theo mục đích của Website mà chọn kiểu phù hợp

9. 2.2. Khi thiết kế Website cần lưu ý 2 vấn đề:Khi thiết kế Website cần lưu ý 2 vấn đề:
a)a) Nội dung chủ đề chính, từ đó chọn bố cục, hệ màuNội dung chủ đề chính, từ đó chọn bố cục, hệ màu
cho tương ứng, (ví dụ: Website thương mại phảicho tương ứng, (ví dụ: Website thương mại phải
sáng sủa, rõ ràng về bố cục, …) sau đó thu thậpsáng sủa, rõ ràng về bố cục, …) sau đó thu thập
đầy đủ tài liệu, phân nhóm theo nội dung, từ đóđầy đủ tài liệu, phân nhóm theo nội dung, từ đó
quyết định cần bao nhiêu trang, nội dung của từngquyết định cần bao nhiêu trang, nội dung của từng
trangtrang
b)b) Chọn hình ảnh, logo, Banner, hệ thống nút liênChọn hình ảnh, logo, Banner, hệ thống nút liên
kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí…kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí…
Phác hoạ sơ đồ liên kết trên giấy để thấy rỏ mốiPhác hoạ sơ đồ liên kết trên giấy để thấy rỏ mối
liên kết giữa các trang đơn trong một websiteliên kết giữa các trang đơn trong một website
Một số kiểu liên kết giữa các trang:Một số kiểu liên kết giữa các trang:

11. V.V. TẠO WEBSITE BẰNG DREAMWEAVERTẠO WEBSITE BẰNG DREAMWEAVER
1.1. Cách tạo một Website mớiCách tạo một Website mới::
Trong Document Window, chọn SiteTrong Document Window, chọn Site Manage sites…Manage sites…NewNew
 SiteSite xuất hiện hộp thoại Site Definitionxuất hiện hộp thoại Site Definition  Chọn TabChọn Tab
Advance, trong mục Local info:Advance, trong mục Local info:
a)a) SiteSite namename: đặt tên WebSite: đặt tên WebSite
b)b) LocalLocal Root FolderRoot Folder: Khai báo đường dẫn của folder lưu trữ: Khai báo đường dẫn của folder lưu trữ
Website trên ổ đĩa cứng bằng cáchWebsite trên ổ đĩa cứng bằng cách
– Nhập đường dẫn hoặcNhập đường dẫn hoặc
– Click vào biểu tượng Folder, Chỉ đường dẫn đến folderClick vào biểu tượng Folder, Chỉ đường dẫn đến folder
lưu websitelưu website
a)a) DefaultDefault Images folderImages folder: khai báo đường dẫn đến thư mục chứa: khai báo đường dẫn đến thư mục chứa
các hình ảnh của Website, thư mục này phải nằm trong Localcác hình ảnh của Website, thư mục này phải nằm trong Local
root Folder đã khai báo ở trên, tât cả các hình ảnh trong trangroot Folder đã khai báo ở trên, tât cả các hình ảnh trong trang
web mặc định được lưu trong thư mục nàyweb mặc định được lưu trong thư mục này

12. a)a) RefreshRefresh Local file list AutomaticallyLocal file list Automatically: Nếu chọn: Nếu chọn
Dreamweaver tự động cập nhật cấu trúc fileDreamweaver tự động cập nhật cấu trúc file
trong bảng Local Folder của Site Panel, việc cậptrong bảng Local Folder của Site Panel, việc cập
nhật này sẽ sử dụng một ít tài nguyên của hệnhật này sẽ sử dụng một ít tài nguyên của hệ
thống, ta có thể cập nhật khi cần bằng cách chọnthống, ta có thể cập nhật khi cần bằng cách chọn
ViewView  Refresh Local files trong Site WindowRefresh Local files trong Site Window
b)b) HTTPHTTP AddressAddress: Nhập địa chỉ của site, để quản lý: Nhập địa chỉ của site, để quản lý
site và liên kết các file trong sitesite và liên kết các file trong site
c)c) EnableEnable CacheCache: khi được chọn, Dreamweaver tạo: khi được chọn, Dreamweaver tạo
một file lưu trữ các thông tin về link giữa các filemột file lưu trữ các thông tin về link giữa các file
trong site. Sau khi chọn xong Click OKtrong site. Sau khi chọn xong Click OK ClickClick
Done để hoàn tất công việc tạo site mớiDone để hoàn tất công việc tạo site mới

13. 2.2. Kiểm tra website đã tạo:Kiểm tra website đã tạo:
Một website sau khi tạo thành công thì trong siteMột website sau khi tạo thành công thì trong site
panel phải có nhánh thư mục như sau trong đó cácpanel phải có nhánh thư mục như sau trong đó các
biểu tượng file/folder có màu xanhbiểu tượng file/folder có màu xanh

14. 3.3. Mở một site đã tạoMở một site đã tạo::
Cách 1: Click vào menu hiển thị tên Site trênCách 1: Click vào menu hiển thị tên Site trên
Toolbar của Site Panel, chọn tên Site muốn mởToolbar của Site Panel, chọn tên Site muốn mở
Cách 2: Chọn menu SiteCách 2: Chọn menu Site Manage SitesManage Sites  ChọnChọn
tên Site muốn mởtên Site muốn mở  DoneDone
3.3. Hiệu chỉnh SiteHiệu chỉnh Site::
– Chọn menu SiteChọn menu Site Manage SitesManage Sites
– Chọn tên Site cần hiệu chỉnhChọn tên Site cần hiệu chỉnh  Click nút EditClick nút Edit
– Xuất hiện hộp thoại Site DefinitionXuất hiện hộp thoại Site Definition thực hiệnthực hiện
hiệu chỉnhhiệu chỉnh  OKOK  DoneDone

15. T o m t Site m iạ ộ ớ
Hi u ch nh Siteệ ỉ
T o m t Site m i gi ng siteạ ộ ớ ố đang
ch nọ
Xoá Site
Xu t thông tin m t Site ra t p tin .steấ ộ ậ
D nẫ nh pậ thư m c, t p tin vàoụ ậ Site

16. VI.VI. THIẾT KẾ TRANG WEB ĐƠNTHIẾT KẾ TRANG WEB ĐƠN
– Tại màn hình khởi động chọn Create newTại màn hình khởi động chọn Create new  HTMLHTML
– Xuất hiện Document Window, đây là nơi thiết kếXuất hiện Document Window, đây là nơi thiết kế
trình bày nội dung của từng trang web đơn, sau khitrình bày nội dung của từng trang web đơn, sau khi
thiết kế xong mỗi trang trang web được lưu dướithiết kế xong mỗi trang trang web được lưu dưới
dạng một tập tin có phần mở rộng mặc định làdạng một tập tin có phần mở rộng mặc định là
.HTM (hoặc .HTML) trong thư mục HTML đã được.HTM (hoặc .HTML) trong thư mục HTML đã được
khai báo trong mục Local Root Folderkhai báo trong mục Local Root Folder

17. VII.VII. LIÊN KẾT CÁC TRANG WEB ĐƠNLIÊN KẾT CÁC TRANG WEB ĐƠN
1.1. Cách tạoCách tạo::
– Để tạo liên kết, cần phân biệt trang nguồn và trangĐể tạo liên kết, cần phân biệt trang nguồn và trang
đích.đích.
– Trang nguồn: chứa các nút liên kếtTrang nguồn: chứa các nút liên kết
– Trang đích là trang cần liên kết đếnTrang đích là trang cần liên kết đến
– Mở trang nguồnMở trang nguồn Chọn nút liên kếtChọn nút liên kết
– Trong Properties Inspector, tại mục link, thực hiệnTrong Properties Inspector, tại mục link, thực hiện
một trong hai cách sau:một trong hai cách sau:
– CáchCách 1: Click nút1: Click nút kéo mũi tên chỉ đếnkéo mũi tên chỉ đến
tên tập tin cần liên kết trong Site Paneltên tập tin cần liên kết trong Site Panel
– CáchCách 2: Click nút2: Click nút mở hộp thoại Select Filemở hộp thoại Select File

18.  Look in: Chọn tên SiteLook in: Chọn tên Site
 File name: Chọn tên trang Web cần liên kết đếnFile name: Chọn tên trang Web cần liên kết đến
2.2. Kiểm tra liên kếtKiểm tra liên kết: File: File Check PageCheck PageCheck linkCheck link
– Check links for entire Site: kiểm tra liên kết choCheck links for entire Site: kiểm tra liên kết cho
tất cả các trang trong sitetất cả các trang trong site
– Check links for Selected files /folders in Site:Check links for Selected files /folders in Site:
kiểm tra nhóm tập tin/ thư mục được chọn trongkiểm tra nhóm tập tin/ thư mục được chọn trong
SiteSite
3.3. Xem kết quả bằng trình duyệt và hiệu chỉnhXem kết quả bằng trình duyệt và hiệu chỉnh
– Chọn File / Preview in Browser / iexploreChọn File / Preview in Browser / iexplore
– Hoặc Click nút Preview /Debug in BrowserHoặc Click nút Preview /Debug in Browser

19. I.I. KẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVERKẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVER
1.1. Cách thực hiện:Cách thực hiện:
– Cần phải lưu lại tất cả các tập tin trước khi xuất bảnCần phải lưu lại tất cả các tập tin trước khi xuất bản
Website. Xuất bản Website là chép thư mục gốc (root)Website. Xuất bản Website là chép thư mục gốc (root)
của Site lên Server của các nhà cung cấp dịch vụcủa Site lên Server của các nhà cung cấp dịch vụ
Internet (ISP).Internet (ISP).
– Trong Macromedia Dremwearver MX 2004, xuất bảnTrong Macromedia Dremwearver MX 2004, xuất bản
Website cần có bước kết nối với Server trước rồi mớiWebsite cần có bước kết nối với Server trước rồi mới
Put File lên sauPut File lên sau
 Kết nối với Remote SiteKết nối với Remote Site:Nếu khi tạo Site mới ta chưa:Nếu khi tạo Site mới ta chưa
xác định Remote Site (Thư mục chứa Site trên Server),xác định Remote Site (Thư mục chứa Site trên Server),
nên sau khi click Put File sẽ xuất hiện thông báo yêunên sau khi click Put File sẽ xuất hiện thông báo yêu
cầu kết nối với Remote Sitecầu kết nối với Remote Site

21. – Chọn Yes, Xuất hiện hộp thoại Site DefinitionChọn Yes, Xuất hiện hộp thoại Site Definition
– Chọn mục Remote Info, trong khung Access, chọnChọn mục Remote Info, trong khung Access, chọn
Local/ Network (giả lập một thư mục trên mạng cụcLocal/ Network (giả lập một thư mục trên mạng cục
bộ, hoặc trên một thư mục khác của ổ đĩa cứng)bộ, hoặc trên một thư mục khác của ổ đĩa cứng)
– Tại mục Remote Folder, Click biểu tượng Folder, đểTại mục Remote Folder, Click biểu tượng Folder, để
tìm thư mục mới chứa Sitetìm thư mục mới chứa Site
 Xuất bản Site lên Remote SiteXuất bản Site lên Remote Site::
– Trong Site Panel, chọn lại tên Site cần xuất bảnTrong Site Panel, chọn lại tên Site cần xuất bản
– Click nút Put FileClick nút Put File
– Xuất hiện hộp thoại: Are you sure you wish to putXuất hiện hộp thoại: Are you sure you wish to put
the entire site? Click OKthe entire site? Click OK
– Xuất hiện hộp thoại kết nối, các tập tin và thư mụcXuất hiện hộp thoại kết nối, các tập tin và thư mục
của Site lần lượt được chép từ site lên Remote Sitecủa Site lần lượt được chép từ site lên Remote Site

22. 2.2. Kiểm tra lại trên Remote SiteKiểm tra lại trên Remote Site
– Click nút Expand trong Site Panel: Màn hìnhClick nút Expand trong Site Panel: Màn hình
chia làm 2 phần: Bên trái là Remote Site, Bênchia làm 2 phần: Bên trái là Remote Site, Bên
phải là Local Sitephải là Local Site

23. VIII.VIII. SITE MAPSITE MAP
1.1. GIỚI THIỆUGIỚI THIỆU: Site map là một sơ đồ cấu trúc: Site map là một sơ đồ cấu trúc
WebSite, nó hiển thị vị trí và sự phân cấp của các tậpWebSite, nó hiển thị vị trí và sự phân cấp của các tập
tin trong WebSite. Một WebSite khi được tạo đầy đủtin trong WebSite. Một WebSite khi được tạo đầy đủ
liên kết, có thể xem dưới dạng Site mapliên kết, có thể xem dưới dạng Site map
Cần phải định nghĩa trang HomePage trước hoặc trongCần phải định nghĩa trang HomePage trước hoặc trong
Site phải có trang Index.htmSite phải có trang Index.htm
2.2. Xem một Site Map:Xem một Site Map:
– Trong Site Panel, chọn Map view trong khung SiteTrong Site Panel, chọn Map view trong khung Site
viewview

24. 3.3. Tạo liên kết trong Site MapTạo liên kết trong Site Map:Có thể tạo liên kết:Có thể tạo liên kết
trang một cách trực quan và đơn giản bằng cách sửtrang một cách trực quan và đơn giản bằng cách sử
dụng Site Map. Cách tạo:dụng Site Map. Cách tạo:
a)a) Chỉ định đường dẫn đến trang home pageChỉ định đường dẫn đến trang home page
– Tạo Site mới trong đó phải có trang Index.htmTạo Site mới trong đó phải có trang Index.htm
hoặc Home Pagehoặc Home Page
– Chọn SiteChọn Site Manage SitesManage Sites Click nút EditClick nút Edit
– Xuất hiện cửa sổ DefinitionXuất hiện cửa sổ Definition Chọn Site MapChọn Site Map
LayoutLayout
– Home Page: đường dẫn đến tập tin IndexHome Page: đường dẫn đến tập tin Index
OKOKDoneDone

25. b)b) Tạo liên kết bằng SiteMapTạo liên kết bằng SiteMap
– Click nút Expand/Collapse để mở rộng SiteClick nút Expand/Collapse để mở rộng Site
PanelPanel
– Click chọn nút SiteMapClick chọn nút SiteMap
– Màn hình xuất hiện trang Index.htm trong siteMàn hình xuất hiện trang Index.htm trong site

26.  Tạo liên kết phân cấp:Tạo liên kết phân cấp:
– Click phải trên file IndexClick phải trên file Index  chọn Link tochọn Link to
new Filenew File Xuất hiện hộp thoại Link to NewXuất hiện hộp thoại Link to New
File:File:
 File Name: Nhập tên fileFile Name: Nhập tên file
 Title: tiêu đề của trangTitle: tiêu đề của trang
 Text of Link: dòng text để liên kếtText of Link: dòng text để liên kết
Liên k tế đến File m iớ
Liên k tế đến File đã

28.  Tạo liên kết nhanh:Tạo liên kết nhanh:
– Chọn tập tin cần tạo liên kếtChọn tập tin cần tạo liên kết
– Click biểu tượng liên kết bên cạnh tập tinClick biểu tượng liên kết bên cạnh tập tin
được chọnđược chọn
– Kéo mũi tên liên kết đến tập tin liên kết đếnKéo mũi tên liên kết đến tập tin liên kết đến

29. ĐỊNH DẠNG VĂN BẢN- SỬ DỤNG CSS TRONGĐỊNH DẠNG VĂN BẢN- SỬ DỤNG CSS TRONG
DREAMWEAVERDREAMWEAVER
CHƯƠNG IXCHƯƠNG IX

30. I.I. ĐỊNH DẠNG VĂN BẢNĐỊNH DẠNG VĂN BẢN
1.1. Cách nhập giống như các trình soạn thảo văn bảnCách nhập giống như các trình soạn thảo văn bản
khác:khác:
– Ngắt đoạn: EnterNgắt đoạn: Enter
– Xuống dòng trong cùng một đoạn: Shift + Enter.Xuống dòng trong cùng một đoạn: Shift + Enter.
1.1. Sử dụng thanh công cụ Properties Inspector để hiệuSử dụng thanh công cụ Properties Inspector để hiệu
chỉnh văn bản, bằng cách đánh dấu khối văn bảnchỉnh văn bản, bằng cách đánh dấu khối văn bản 
chọn kiểu định dạngchọn kiểu định dạng

31. 3.3. Định dạng font chữ:Định dạng font chữ:
Cách 1Cách 1:Tại mục format Chọn các heading, đây là các:Tại mục format Chọn các heading, đây là các
định dạng mẫu, bao gồm Font chữ, kiểu chữ, size, …định dạng mẫu, bao gồm Font chữ, kiểu chữ, size, …
thường dùng làm tiêu đềthường dùng làm tiêu đề
Cách 2:Cách 2: chọn nhóm Font chữ:chọn nhóm Font chữ:
– Chọn văn bản:Chọn văn bản:
1.1. Chọn nhóm Font trên Font menu củaChọn nhóm Font trên Font menu của
Properties InspectorProperties Inspector
2.2. Hoặc chọn menu TextHoặc chọn menu Text  Font. TrongFont. Trong
Dreamweaver, kiểu Font chữ được định thànhDreamweaver, kiểu Font chữ được định thành
từng nhóm, mỗi nhóm gồm nhiều font, mộttừng nhóm, mỗi nhóm gồm nhiều font, một
Font chính và các Font dự phòng. Có thể tạoFont chính và các Font dự phòng. Có thể tạo
ra các nhóm Font tuỳ ý bằng cách tại mucra các nhóm Font tuỳ ý bằng cách tại muc
FontFont Chọn Edit Font ListChọn Edit Font List

33.  FontFont sizesize::
Chọn khối văn bản:Chọn khối văn bản:
– Trong mục Size của Properties InspectorTrong mục Size của Properties Inspector
– Hoặc chọn TextHoặc chọn Text Size. Size chữ trongSize. Size chữ trong
Dreamweaver gồm 17 Size, trong đó có 8 mứcDreamweaver gồm 17 Size, trong đó có 8 mức
thể hiện bằng số, từ 9 đến 36 và 9 mức thể hiệnthể hiện bằng số, từ 9 đến 36 và 9 mức thể hiện
bằng chữbằng chữ
1.1. Font ColorFont Color::
– Chọn khối văn bản, Click nút Text Color trongChọn khối văn bản, Click nút Text Color trong
properties inspectorproperties inspector chọn màuchọn màu
– Hoặc chọn TextHoặc chọn Text ColorColor

34. 4.4. Canh lề đoạn văn bảnCanh lề đoạn văn bản
– Chọn TextChọn Text  Align hoặc Click công cụAlign hoặc Click công cụ
Click ch n màuọ

35. 5.5. Danh sách dạng liệt kê:Danh sách dạng liệt kê:
 Tạo danh sách dạng liệt kê:Chọn TextTạo danh sách dạng liệt kê:Chọn Text ListList
– Unordered List: Chèn Bulletted đầu dòngUnordered List: Chèn Bulletted đầu dòng
– Ordered List: Đánh số thứ tự đầu dòngOrdered List: Đánh số thứ tự đầu dòng
– Definition list: Danh sách định nghĩaDefinition list: Danh sách định nghĩa
 Thay đổi thuộc tính liệt kê:Thay đổi thuộc tính liệt kê:
– Đặt dấu nháy trong danh sách liệt kêĐặt dấu nháy trong danh sách liệt kê
– Chọn TextChọn Text ListList PropertiesProperties
– Hoặc click nút List Item trong thanhHoặc click nút List Item trong thanh
propertiesproperties

36. – List Type: Chọn kiểu danh sách (Bullets hoặcList Type: Chọn kiểu danh sách (Bullets hoặc
Numbered)Numbered)
– Start count: Số bắt dầu cho danh sách liệt kêStart count: Số bắt dầu cho danh sách liệt kê
 List item:List item:
– New Style: liệt kê nhiều cấpNew Style: liệt kê nhiều cấp
– Reset count to: số bắt đầu cho danh sách conReset count to: số bắt đầu cho danh sách con

37. II.II. SỬ DỤNG CSSSỬ DỤNG CSS
1.1. GIỚI THIỆUGIỚI THIỆU::
– Dreamweaver cung cấp công cụ để tạo style một cáchDreamweaver cung cấp công cụ để tạo style một cách
đơn giản và nhanh chóngđơn giản và nhanh chóng
– CSS (Cascading Style Sheets) cũng là một dạngCSS (Cascading Style Sheets) cũng là một dạng
HTML Style. Nhưng phong phú hơn về thuộc tính vàHTML Style. Nhưng phong phú hơn về thuộc tính và
ứng dụng. Một CSS không những tập hợp các địnhứng dụng. Một CSS không những tập hợp các định
dạng, mà còn có thể giúp định vị, viền khung, đặt màudạng, mà còn có thể giúp định vị, viền khung, đặt màu
nền…nền…
– CSS có thể đính kèm trong trang hoặc lưu riêng thànhCSS có thể đính kèm trong trang hoặc lưu riêng thành
một tập tin kiểu CSS phục vụ cùng lúc cho nhiều trangmột tập tin kiểu CSS phục vụ cùng lúc cho nhiều trang

38. 2.2. Tạo CSS cục bộ:Tạo CSS cục bộ: Style được tạo trong trang hiệnStyle được tạo trong trang hiện
hànhhành
a)a) Cách tạoCách tạo::
– Chọn TextChọn Text CSS StylesCSS Styles New…New…Xuất hiệnXuất hiện
hộp thoại New CSS Style:hộp thoại New CSS Style:
– Hoặc WindowHoặc Window CSS Style,CSS Style,
mở CSS Panel,mở CSS Panel,
Click nút New CSS ruleClick nút New CSS rule
Cilck nút New CSS rule

39.  Selector typeSelector type: chọn loại CSS: chọn loại CSS
 Define inDefine in: Chọn This document only: Tạo style: Chọn This document only: Tạo style
(dạng internal style), sử dụng trong trang hiện hành(dạng internal style), sử dụng trong trang hiện hành

40.  Có 3 loại style:Có 3 loại style:
– ClassClass:: Style dạng lớpStyle dạng lớp
• NameName : Nhập tên lớp, bắt đầu bằng dấu (: Nhập tên lớp, bắt đầu bằng dấu (..))
– TagTag:: Định nghĩa tagĐịnh nghĩa tag
• TagTag: Chọn tên tag: Chọn tên tag
– AdvancedAdvanced: Định dạng các tag riêng biệt: Định dạng các tag riêng biệt
• SelectorSelector: Nhập #IDName (bắt đầu bằng dấu #): Nhập #IDName (bắt đầu bằng dấu #)
– Chọn xong,Click OKChọn xong,Click OK  Cửa sổ CSS StyleCửa sổ CSS Style
definition :definition :
• Khung category: Chọn nhóm định dạngKhung category: Chọn nhóm định dạng
• Khung style: chọn các định dạngKhung style: chọn các định dạng

41. Ch n xong,Click Applyọ  OK
Trong CSS Panel xu t hi n Style v a t oấ ệ ừ ạ

42. b)b) Cách sử dụng Style cục bộCách sử dụng Style cục bộ::
– Chọn nội dung văn bản cần định dạngChọn nội dung văn bản cần định dạng
– Trong CSS Style Panel, chọn tên CSSTrong CSS Style Panel, chọn tên CSS
– Hoặc chọn tên style trong Properties inspectorHoặc chọn tên style trong Properties inspector
– Nếu loại tag định dạng riêng biệt thì đối tượng sửNếu loại tag định dạng riêng biệt thì đối tượng sử
dụng style phải có tên định danh IDdụng style phải có tên định danh ID

43. 3.3. Tạo một tập tin CSS:Tạo một tập tin CSS: Tập tin kiểu .CSS là một tập tinTập tin kiểu .CSS là một tập tin
phụ trợ cho webSite, nằm trong thư mục root của Sitephụ trợ cho webSite, nằm trong thư mục root của Site
a)a) CáchCách tạotạo::
– TextText CSS StylesCSS Styles NewNew
– Trong hộp thoại New CSS StyleTrong hộp thoại New CSS Style
– Selector Type: Chọn loại styleSelector Type: Chọn loại style
– Define in: Chọn New Style Sheet fileDefine in: Chọn New Style Sheet file OKOK
– Hộp thoại yêu cầu lưu tập tin CSS, có phần mở rộngHộp thoại yêu cầu lưu tập tin CSS, có phần mở rộng
.CSS.CSS
– Cửa sổ CSS Style definition :Cửa sổ CSS Style definition :
• Khung category: Chọn nhóm định dạngKhung category: Chọn nhóm định dạng
• Khung style: chọn các định dạng giống style cụcKhung style: chọn các định dạng giống style cục
bộbộ

44. Ch n xong,Click Applyọ  OK
Trong CSS Panel xu t hi n t p tin Style v a t oấ ệ ậ ừ ạ

45. b)b) Áp dụng CSS từ tập tin CSSÁp dụng CSS từ tập tin CSS::
– Mở trang HTML cần sử dụng tập tin CSSMở trang HTML cần sử dụng tập tin CSS
– Chọn TextChọn Text CSS StyleCSS Style Attach Style Sheet.Attach Style Sheet.
– Hoặc Click nút Attach Style Sheet trong StyleHoặc Click nút Attach Style Sheet trong Style
Panel.Panel.
– Chọn tập tin CSS cần kết nối, Click nútChọn tập tin CSS cần kết nối, Click nút
Browse…Browse…
– Link: Chỉ liên kết với tập tin CSS để sử dụngLink: Chỉ liên kết với tập tin CSS để sử dụng
– Import : Chép tập tin CSS vào trangImport : Chép tập tin CSS vào trang

46. 4.4. Hiệu chỉnh một CSS:Hiệu chỉnh một CSS:
– Click phải trện tên CSS trong CSS Style PanelClick phải trện tên CSS trong CSS Style Panel
– Chọn Edit, thực hiện hiệu chỉnhChọn Edit, thực hiện hiệu chỉnh
4.4. Xoá một CSS Styles:Xoá một CSS Styles:
Khi xoá một CSS Style thì những nội dung áp dụngKhi xoá một CSS Style thì những nội dung áp dụng
CSS Style bị xoá sẽ trở về trạng thái ban đầuCSS Style bị xoá sẽ trở về trạng thái ban đầu
– Chọn CSS Style cần xoáChọn CSS Style cần xoá
– Click nút Delete CSS Style trong CSS Style PanelClick nút Delete CSS Style trong CSS Style Panel
– Hoặc Click chuột phải, chọn DeleteHoặc Click chuột phải, chọn Delete

47. Attach Style Sheet
New Style Sheet
Delete Style

48. HÌNH ẢNH VÀ LIÊN KẾT TRANG TRONGHÌNH ẢNH VÀ LIÊN KẾT TRANG TRONG
DREAMWEAVERDREAMWEAVER
CH NG XƯƠ

49. III.III. HÌNH ẢNH VÀ LIÊN KẾT TRANGHÌNH ẢNH VÀ LIÊN KẾT TRANG
TRONG DREAMWEAVERTRONG DREAMWEAVER
1.1. Chèn ảnh vào trang:Chèn ảnh vào trang:
a)a) Ảnh trong thư mục Images của Site:Ảnh trong thư mục Images của Site:
– Đặt dấu nháy tại vị trí cần chèn ảnhĐặt dấu nháy tại vị trí cần chèn ảnh
– Drag chuột kéo tập tin ảnh trong Site Panel thảDrag chuột kéo tập tin ảnh trong Site Panel thả
vào trangvào trang
a)a) Ảnh ngoài Site:Ảnh ngoài Site:
– Chọn InsertChọn Insert  ImageImage
– Xuất hiện hộp thoại Select Image SourceXuất hiện hộp thoại Select Image Source
– Chọn tập tin ảnh cần chènChọn tập tin ảnh cần chènOKOK

50. 2.2. Hiệu chỉnh thuộc tính của ảnh:Hiệu chỉnh thuộc tính của ảnh:
– Chọn ảnh đã chènChọn ảnh đã chèn
– WindowWindow PropertiesProperties
– Image: tên ảnhImage: tên ảnh
– W (Width), H (Height): Độ rộng và chiều cao củaW (Width), H (Height): Độ rộng và chiều cao của
ảnh, tính bằng Pixelảnh, tính bằng Pixel
– Src: đường dẫn tương đối đến tập tin ảnhSrc: đường dẫn tương đối đến tập tin ảnh
– Alt: câu thông báo xuất hiện trên trình duyệt khi rêAlt: câu thông báo xuất hiện trên trình duyệt khi rê
chuột vào ảnhchuột vào ảnh

51. – Link: Địa chỉ URL nơi cần liên kết đếnLink: Địa chỉ URL nơi cần liên kết đến
– Edit: Chuyển qua Macromedia Fire Works hiệuEdit: Chuyển qua Macromedia Fire Works hiệu
chỉnh ảnhchỉnh ảnh
– Crop: Cắt xén ảnhCrop: Cắt xén ảnh
– Brightness/Contrast: Chỉnh độ sáng tối của ảnhBrightness/Contrast: Chỉnh độ sáng tối của ảnh
– Sharpen: Chỉnh độ sắc nét cho ảnhSharpen: Chỉnh độ sắc nét cho ảnh
– Resample:Lưu lại kích thước đã điều chỉnhResample:Lưu lại kích thước đã điều chỉnh
– Optimize in Fireworks: chuyển qua MacromediaOptimize in Fireworks: chuyển qua Macromedia
FireWoks để hiệu chỉnhFireWoks để hiệu chỉnh

52. – Map : bảng đồ liên kết ảnhMap : bảng đồ liên kết ảnh
– VSpace, Hspace: Khoảng cách trên, dưới, trái,VSpace, Hspace: Khoảng cách trên, dưới, trái,
phải giữa phần nội dung văn bản đến ảnhphải giữa phần nội dung văn bản đến ảnh
– Target: Khung chứa trang liên kết đếnTarget: Khung chứa trang liên kết đến
– Low Src: tên tập tin ảnh phụ có độ phân giảiLow 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ị ảnhthấp, làm ảnh thay thế khi chờ hiển thị ảnh
chính trên trình duyệtchính trên trình duyệt
– Border: đường viền ảnhBorder: đường viền ảnh
– Align: canh lề trái, phải, giữa…Align: canh lề trái, phải, giữa…

53. 3.3. Chèn khung ảnh:Chèn khung ảnh:
– Trong thiết kế, nhiều lúc cần dự phòng trước choTrong 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ểả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 địnhchèn trước một khung ảnh với kích thước xác định
để giữ chổđể giữ chổ
– Chọn InsertChọn InsertImage ObjectsImage Objects Image PlaceholderImage Placeholder
– Xuất hiện hộp thoại Image PlaceholderXuất hiện hộp thoại Image Placeholder
– Nhập tên, kích thước, màu cho khung ảnhNhập tên, kích thước, màu cho khung ảnh

54. 3.3. Chèn ảnh vào khung ảnh:Chèn ảnh vào khung ảnh:
– Double click vào khung cần chèn ảnhDouble click vào khung cần chèn ảnh
– Xuất hiện hộp thoại Select Image Source, chọn tậpXuất hiện hộp thoại Select Image Source, chọn tập
tin ảnh cần chèn vào khungtin ảnh cần chèn vào khung
3.3. Insert Rollover Image:Insert Rollover Image: Khi đưa chuột vào hình sẽ đổiKhi đưa chuột vào hình sẽ đổi
sang hình khácsang hình khác
a)a) InsertInsert  Image ObjectsImage ObjectsRollover Image, Xuất hiệnRollover Image, Xuất hiện
hộp thoại Rolloveer Imagehộp thoại Rolloveer Image

55. – Original Image: ảnh gốcOriginal Image: ảnh gốc
– Rollover Image: ảnh khi rê chuột vàoRollover Image: ảnh khi rê chuột vào
5.5. Chèn Flash:Chèn Flash:
– InsertInsert  MediaMedia  FlashFlash
– Chọn tập tin kiểu .swfChọn tập tin kiểu .swf
– Tại vị trí chèn xuất hiện biểu tượng FlahsTạ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 flashHiệ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 propertieshiệu chỉnh thuộc tính trong thanh properties
inspectorinspector

56. 6.6. Ảnh nền trangẢnh nền trang
– Ảnh nền là ảnhh tự động lợp đầy trang Web. KhiẢ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ữ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ángsậ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Ảnh nền với số Kb càng nhỏ thì trang hiển thị càng
nhanhnhanh
6.6. Cách tạo ảnh nền:Cách tạo ảnh nền:
– Đặt trỏ trong trangĐặt trỏ trong trang
– chọn Modifychọn ModifyPage PropertiesPage Properties
– Bacground Images : nhập đường dẫn đến tập tinBacground Images : nhập đường dẫn đến tập tin
ảnh làm nềnảnh làm nền
– Repeat: Chọn kiểu lặpRepeat: Chọn kiểu lặp

57. 8.8. Tạo Web Photo album:Tạo Web Photo album:
– Chức năngChức năng: Tạo bộ sưu tập các hình ảnh hay cuốn: 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 xemAlbum giúp người sử dụng quản lý và chọn xem
từng hình một cách nhanh nhấttừng hình một cách nhanh nhất
– Cách tạoCách tạo: Để thực hiện chức năng này cần phải cài: Để 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đặt Macromedia Fireworks và một thư mục chứa
các hình photocác hình photo
• Chọn CommandsChọn Commands  Create Web Photo albumCreate Web Photo album
• Xuất hiện hộp thoại Create Web Photo AlbumXuất hiện hộp thoại Create Web Photo Album
• Nhập các thông sốNhập các thông số click OK, chờ kết quả,click OK, chờ kết quả,
xuất hiện thông báo Album đã được tạo.xuất hiện thông báo Album đã được tạo.
• Trong Site Panel xuất hiện thêm các folder:Trong Site Panel xuất hiện thêm các folder:

58. – Folder Thumbnail: chứa các file JPGFolder Thumbnail: chứa các file JPG
– Folder Page chứa các file .HTM cho mỗi ImageFolder Page chứa các file .HTM cho mỗi Image
tương ứng (trang con)tương ứng (trang con)
– Tập tin Index.htm trong Folder chứa Website, đâyTập tin Index.htm trong Folder chứa Website, đây
là tập tin Album chínhlà tập tin Album chính
– Mở tập tin Index.htm và di chuyển giữa các trangMở tập tin Index.htm và di chuyển giữa các trang
bằng các Hyperlink: Next Previous, Homebằng các Hyperlink: Next Previous, Home

59. 9.9. Tạo Library Item:Tạo Library Item:
a)a) Khái niệmKhái niệm: Library chứa các thành phần của trang: 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ạinhư 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ầnhoặc cần cập nhật thường xuyên. Các thành phần
này gọi là Library Items.này gọi là Library Items.
b)b) Cách tạoCách tạo: Trong Assets Panel, Click nút Library,: Trong Assets Panel, Click nút Library,
Chọn thành phần muốn tạo Library Item và thựcChọn thành phần muốn tạo Library Item và thực
hiện một trong các cách sauhiện một trong các cách sau
– Drag chuột kéo thành phần được chọn thả vàoDrag chuột kéo thành phần được chọn thả vào
khung Librarykhung Library Đặt tênĐặt tên
– Click nút New Library Item và đặt tênClick nút New Library Item và đặt tên
– Chọn ModifyChọn Modify  LibraryLibrary Add Object toAdd Object to
Library và đặt tênLibrary và đặt tên

60. c)c) Nhập Library Item vào trang mớiNhập Library Item vào trang mới::
– Đặt dấu nháy vào nơi muốn nhập Library ItemĐặ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 documentKéo Library Item từ Assets Panel thả vào document
WindowWindow
d)d) Hiệu chỉnh Library ItemHiệu chỉnh Library Item::
– Chọn Library Item trong khung LibraryChọn Library Item trong khung LibraryEditEdit
– Xuất hiện hộp thoại cho phép hiệu chỉnh library ItemXuất hiện hộp thoại cho phép hiệu chỉnh library Item
– Click SaveClick Save cập nhật tất cả trang Web có sử dụngcập nhật tất cả trang Web có sử dụng
Library trong siteLibrary trong site
– Có thể cập nhật bằng cách chọn ModifyCó thể cập nhật bằng cách chọn Modify LibraryLibrary
Update pages: cập nhật tất cả những trang có sử dụngUpdate pages: cập nhật tất cả những trang có sử dụng
Library ItemLibrary Item

61. a)a) Tách Library Item trong Document khỏiTách Library Item trong Document khỏi
LibraryLibrary::
– Chọn Library Item trong trang Web hiện hànhChọn Library Item trong trang Web hiện hành
– Click nút Detach from Original trên PropertiesClick nút Detach from Original trên Properties
InspectorInspector
f)f) Tạo lại Library Item bằng một library đangTạo lại Library Item bằng một library đang
sử dụng trong trangsử dụng trong trang
– Có thể dùng một Library trong trang để tạo lạiCó thể dùng một Library trong trang để tạo lại
một Library Item, nếu Library Item bị mấtmột Library Item, nếu Library Item bị mất
– Chọn Library trên trang Web hiện hànhChọn Library trên trang Web hiện hành
– Click nút Recreate trên Properties InspectorClick nút Recreate trên Properties Inspector

62. IV.IV. LIÊN KẾT TRANG TRONGLIÊN KẾT TRANG TRONG
DREAMWEAVERDREAMWEAVER
1.1. Giới thiệuGiới thiệu: Một liên kết nối từ trang nguồn đến trang đích: Một liên kết nối từ trang nguồn đến trang đích
gồm 2 thành phần:gồm 2 thành phần:
– Đối tượng được chọn làm nút liên kết:Text,Đố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ộtImage,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,số đối tượng đặc biệt làm nút liên kết như Flash Text,
Flash Button, Navigation bar, Rollover Images…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Địa chỉ URL của trang cần liên kết đến3 loại liên kết
• Liên kết nộiLiên kết nội
• Liên kết ngoạiLiên kết ngoại
• Liên kết EmailLiên kết Email

63. 2.2. Các dạng liên kết:Các dạng liên kết:
a)a) Dạng liên kết vòngDạng liên kết vòng:Là dạng liên kết nối đuôi nhau,: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 đếntrang1 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áctrang 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.trang, nhưng bất lợi là phải duyệt hết một vòng.
a)a) Dạng liên kết đầy đủDạng liên kết đầy đủ: Tại mổi trang đều tạo liên kết: 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đầ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ấpkết trong site có độ phân cấp thấp

64. a)a) Dạng liên kết cây phân cấp:Trong các Site lớn, mứcDạ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độ 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ủ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í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ênchứ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ề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 (Childmức trên (Parent Level), liên kết về mức dưới (Child
level).level).

65. d)d) Liên kết tiện nghi: Ngoài các dạng liên kết trên,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ểđể 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 đếntạo thêm một số liên kết phụ, như liên kết đến
điểm dừng (Bookmark)điểm dừng (Bookmark)
e)e) Liên kết trang chủ: Trang chủ thường chứa cácLiê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ạonú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ủliề kết từ trang con trở về trang chủ

66. 3.3. Cách tạo:Cách tạo:
– Mở trang nguồnMở trang nguồn
– Chọn InsertChọn Insert  HyperlinkHyperlink
• Text: nội dung văn bản làm nút liên kếtText: 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 đếnLink: Địa chỉ URL của trang cần liên kết đến
• Target: Khung chứa trang đíchTarget: Khung chứa trang đích
• Title: Câu ghi chú khi chuột chạm vào nútTitle: Câu ghi chú khi chuột chạm vào nút
• Access Key: Khi xem trang, nhấn tổ hợp phímAccess Key: Khi xem trang, nhấn tổ hợp phím
Alt + Ký tự nhập để chọn nút và nhấn Enter đểAlt + Ký tự nhập để chọn nút và nhấn Enter để
liên kết.liên kết.
• Tab Index: trình tự chọn nút khi nhấn phím TabTab Index: trình tự chọn nút khi nhấn phím Tab

67. 4.4. Liên kết điểm dừng (Named Anchor)Liên kết điểm dừng (Named Anchor)
a)a) Tạo liên kết điểm dừng cùng trangTạ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,Đố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: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Đặt tên cho điểm dừng: Trong Document window,: Trong Document window,
đặt dấu nháy tại vị trí sẽ làm điểm dừngđặt dấu nháy tại vị trí sẽ làm điểm dừng
1.1. Chọn InsertChọn Insert  Named Anchor (Ctrl+Alt+A)Named Anchor (Ctrl+Alt+A)
hoặc Click nút Insert Named Anchor trong bảnghoặc Click nút Insert Named Anchor trong bảng
Common của thanh InsertCommon của thanh Insert
2.2. Trong hộp thoại Insert Anchor: Nhập tên choTrong hộp thoại Insert Anchor: Nhập tên cho
Anchor (không thừa khoảng trắng, không có kýAnchor (không thừa khoảng trắng, không có ký
tự lạ)tự lạ)

68.  Tạo liên kết điểm dừng:Tạo liên kết điểm dừng:
 Trong Document Windows, chọn một đoạn văn bảnTrong 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ừnghoặ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ậpNếu điểm dừng nằm cùng trang thì tại ô link nhập
#tên Anchor#tên Anchor
b)b) Tạo liên kết điểm dừng của trang khácTạ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ốngThao 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ỉ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úcra điểm dừng nào. Theo cấu trúc:<Tên tập tin>#<Tên:<Tên tập tin>#<Tên
điểm dừng>điểm dừng>

69. 5.5. Hiệu chỉnh liên kết:Hiệu chỉnh liên kết:
– Chọn nút liên kết cần thay đổiChọn nút liên kết cần thay đổi
– Chọn menu ModifyChọn menu Modify Change Link…Change Link…
– Hộp thoại Select file cho phép chọn tập tin trang cầnHộp thoại Select file cho phép chọn tập tin trang cần
liên kết đếnliên kết đến
– Nếu biết rõ tập tin liên kết mới thì có thể nhập trựcNế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 Inspectortiếp trong ô link của Properties Inspector
5.5. Xoá liên kếtXoá liên kết
– Chọn nút muốn loại bỏ liên kếtChọn nút muốn loại bỏ liên kết
– Chọn ModifyChọn Modify Remove Link. Hoặc xoá tên trangRemove Link. Hoặc xoá tên trang
liên kết trong ô link của Properties Inspectorliên kết trong ô link của Properties Inspector

70. 7.7. Bản đồ ảnh liên kết :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ướcKhi 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ỗilớ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à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.bản đồ ảnh liên kết.
 Những thuận tiện khi sử dụng 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ếtGiú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.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 khuGiú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 Webvực nút trên trang Web

71. a)a) Cách tạo:Cách tạo:
– Chèn ảnh vào trang, click chọn ảnhChèn ảnh vào trang, click chọn ảnh
– Trong Properties inspector, hiển thị công cụ MapTrong Properties inspector, hiển thị công cụ Map
– Chọn công cụ muốn chia vùngChọn công cụ muốn chia vùng
– Drag chuột quanh phần trên hình mà ta muốn chiaDrag chuột quanh phần trên hình mà ta muốn chia
vùng để tạo liên kếtvùng để tạo liên kết
– Trong Properties inspector, tại mục link, nhập địa chỉTrong Properties inspector, tại mục link, nhập địa chỉ
của trang cần liên kết đếncủa trang cần liên kết đến

72. b)b) Hiệu chỉnh bản đồ liên kết:Hiệu chỉnh bản đồ liên kết:
– Di chuyển vùng liên kếtDi chuyển vùng liên kết
– Click chọn công cụ để chọn vùng cần di chuyểnClick chọn công cụ để chọn vùng cần di chuyển
– Drag chuột kéo đến vị trí mớiDrag chuột kéo đến vị trí mới
c)c) Thay đổi kích thước vùng liên kếtThay đổi kích thước vùng liên kết
– Chọn vùng liên kếtChọ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ếtClick 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ướcDrag chuột để thay đổi kích thước
d)d) Xoá vùng liên kếtXoá vùng liên kết
– Chọn vùng liên kếtChọn vùng liên kết
– Nhấn DeleteNhấn Delete

73. 8.8. Chèn nút biến đổi hình: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.gifTrướ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 Sitemàu xanh trong folder Images của Site
– Đặt dấu nháy tại vị trí cần chèn nút độngĐặt dấu nháy tại vị trí cần chèn nút động
– Chọn InsertChọn Insert  Image ObjectsImage Objects Rollover Image.Rollover Image.
Hộp thoại Insert Rollover Image:Hộp thoại Insert Rollover Image:
• Image Name: Nhập tên ảnhImage Name: Nhập tên ảnh
• Original Image: tên tập tin ảnh gốc đại diện khiOriginal Image: tên tập tin ảnh gốc đại diện khi
hiển thị (ví dụ n1.gif)hiển thị (ví dụ n1.gif)
• Rollover Image : tên tập tin ảnh hiển thị khi rêRollover Image : tên tập tin ảnh hiển thị khi rê
chuột vào (ví dụ n2.gif )chuột vào (ví dụ n2.gif )
• Alternate Text: câu ghi chú kèm theoAlternate Text: câu ghi chú kèm theo
• When Click, go to URL: Địa chỉ của trang liênWhen Click, go to URL: Địa chỉ của trang liên
kết đếnkết đến

74. 9.9. Chèn hệ thống nút biến đổi hình: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ènDreamweaver 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ìnhvào cả một hệ thống nút biến hình
– Chọn InsertChọn Insert Image ObjectsImage Objects Navigation barNavigation bar

75. 10.10. Chèn nút Flash:Chèn nút Flash:
 Macromedia Dreamweaver và Macromedia Flash là một bộ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ấtchươ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ế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 Dreamweaversẳn để làm nút liên kết trong Dreamweaver
 Cách tạo:Cách tạo:
Chọn InsertChọn InsertMediaMedia Flash ButtonFlash Button
– Sample: Ví dụ mẫu nút FlashSample: Ví dụ mẫu nút Flash
– Style: danh sách tên các nút mẫu FlashStyle: danh sách tên các nút mẫu Flash
– Button Text: văn bản trên nút FlashButton Text: văn bản trên nút Flash
– Font: kiểu chữ, Size: Cở chữFont: kiểu chữ, Size: Cở chữ
– Link: Địa chỉ liên kết đếnLink: Địa chỉ liên kết đến
– Target: Tên khung trang liên kếtTarget: Tên khung trang liên kết
– Bg: Màu nềnBg: Màu nền

76. 11.11. Chèn nút Flash Text:Chèn nút Flash Text:
– InsertInsert  MediaMedia  Flash TextFlash Text
– Hộp thoại Insert Flash Text, nhập vào các thôngHộp thoại Insert Flash Text, nhập vào các thông
số:số:
• Font, Size: Font và cở chữFont, Size: Font và cở chữ
• Color: màu chữColor: màu chữ
• Rollover Color: Màu chữ thay đổi chi rêRollover Color: Màu chữ thay đổi chi rê
chuột qua nútchuột qua nút
• Text : Nội dung văn bản làm nútText : Nội dung văn bản làm nút
• Link: Địa chỉ trang Web liên kết đếnLink: Địa chỉ trang Web liên kết đến
• Target: Tên khung trangTarget: Tên khung trang
• Bg Color: màu nền của văn bản nútBg Color: màu nền của văn bản nút