Sử dụng Macromedia Dreamweaver MX

 CLB Tin học – Mediaspace - HUFLIT 
SỬ DỤNG MACROMEDIA DREAMWEAVER MX 
Người soạn: Hoàng Đăng Quang 
Dreamweaver là một chương trình Visual Editor chuyên nghiệp để tạo và quản lý các trang 
web. Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tính năng 
DHTML (Dynamic HTML) mà không cần viết các dòng lệnh giúp các bạn không biết lập trình 
web cũng có thể thiết kế được các trang web động một cách dễ dàng, trực quan.Với Dreamweaver 
bạn có thể dễ dàng nhúng các sản phẩm của các chương trình thiết kế web khác như Flash, 
Fireworks, Shockwave, Generator, Authorwave vv... 
Với Dreamweaver bạn có thể quản lý các Local và Remote site giúp cho việc quản lý các 
trang web trong các site cục bộ và các website điều khiển từ xa có thể đồng bộ. Ngoài ra 
Dreamweaver còn cho phép bạn chỉnh sửa trực tiếp HTML.Với Quick Tag Editor bạn có thể nhanh 
chóng bổ sung hoặc xóa bỏ một HTML mà không cần thoát khỏi cửa sổ tài liệu.Chế độ soạn thảo 
trang web bằng HTML giúp các bạn có thể thiết kế trang trực tiếp bằng ngôn ngữ HTML. 
Dreamweaver còn hổ trợ các HTML Styles và Cascading Style Sheet giúp bạn định dạng 
trang web nhằm tăng tính hấp dẫn khi duyệt các trang web này.Vùng làm việc của chương trình 
Deamweaver rất linh động và dễ sử dụng gồm các thành phần như sau: Document, Launcher, 
Object Palette, Property Inspector, Floating Palette và các context menu(menu ngữ cảnh) ... để mở 
các thành phần này bạn có thể vào menu Window-> chọn tên của thành phần cần hiển thị . 
I. Cửa sổ làm việc: 
1. Thanh menu 
6. Panel groups 
II. Mô tả chức năng: 
1. Thanh menu: 
Gồm các menu: 
- File: gồm các chức năng liên quan đến tập tin như: New, Open, Save, Print… 
- Edit: gồm các chức năng hỗ trợ việc soạn thảo: Copy, Cut, Paste, Undo, Find, Replace… 
- View: gồm các chức năng liên quan đến phần hiển thị: Code (Hiển thị phần mã HTML hay 
mã PHP) , Design (cho phép bạn xem trước trang web trước khi chạy trên WebBrowse), Code and 
Design (Hiển thị song song cả 2 chức năng).. 
Vùng soạn thảo 
2. Thanh chèn 
(Insert) 
3. Thanh tài liệu 
(Document) 
4. Tag selector 
5. Thanh thuộc tính 
(Properties) 
 1
 CLB Tin học – Mediaspace - HUFLIT 
- Insert: Dùng để chèn các thẻ hay đối tượng vào phần soạn thảo: Image, Table, Form… 
- Modify: Các chứng năng về chỉnh sửa các thành phần của trang. Sử dụng menu này các 
bản có thể sửa chữa thuộc tính của các thẻ (tag), thay đổi các thành phần của table… 
- Text: Các chức năng chỉnh sửa văn bản text: font, css, size, color, canh lề (align). 
- Command: Hỗ trợ các chức năng giúp bạn trong việc định dạng code, tạo photo album, tối 
ưu hình ảnh với Macromedia Fireworks. 
- Site: Hỗ trợ các chức năng như: tạo, mở và sửa site và để quản lý tập tin trong site. 
- Window: Giúp bạn có thể dễ dàng thao các cửa sổ của ứng dụng: panels, inspectors… 
- Help: Các tài liệu hướng dẫn sử dụng Dreamweaver. 
2. Thanh Insert: 
Tương tự menu Insert, dùng để chèn các thẻ hay đối tượng như Image, table vào vùng soạn 
thảo. Chọn cách bố cục (có 2 cách là standard và layout) cho trang web. 
3. Thanh Document: 
Tương tự menu View, dùng để chọn các
về chọn trình duyệt để hiển thị trang web… 
4. Thanh Tag selector: 
Bạn có thể sử dụng thanh này để chọn n
5. Thanh Properties: 
Bạn có thể xem và thay đổi các thuộc tín
6. Panel groups: 
- Design: Thực hiện các chức năng về th
- Code: Giúp bạn xem cấu trúc thẻ của t
một vài ebook giúp bạn tra cứu về cú pháp trong
- Application: Các chức năng hỗ trợ việ
- File: Đây là panel quan trọng nhất tron
quản lý các tập tin trong site. 
- Answer: Các thông tin về hướng dẫn s
III. Tạo site trong Dreamwaver: 
1. Tạo thư mục ảo (Virtual Directory)
Chọn Start Æ Control Panel Æ Adminis
1. Phải chuột ngay Default WebSite Æ Chọn 
New Æ Virtual Directory… 
2. Màn hình Welcome to the Virtual 
Directory Creation Wizard, chọn Next. 
3. Màn hình Virtual Directory Alias, các bạn 
gõ bí danh (tên trang web, bạn có thể đặt tên 
bất kỳ) vào textbox Alias, chọn Next. 
4. Màn hình Web Site Content Directory, 
chọn đường dẫn đến thư mục vật lý trên đĩa. 
Nhấn vào nút Browse để chọn thư mục hay 
bạn có thể gõ vào textbox Directory, chọn 
Next. 
5. Màn hình Access Permissions: Các bạn sẽ 
phân quyền cho phép user có quyền Read 
 h hiển thị cho vùng soạn thảo và một vài chức năng 
hanh các thẻ (tag). 
h của đối tượng hat text đã chọn. 
iết kế: CSS, HTML Style, Behavious. 
rang văn bản hiện tại, chọn nhanh một nhóm thẻ, 
 quá trình viết code. 
c tạo ứng dụng web. 
g nhóm panel này, nó giúp bạn thêm, mở site và 
ử dụng và update Dreamwaver. 
: 
trative Tools Æ Internet Information Services 
2
 CLB Tin học – Mediaspace - HUFLIT 
(đọc tập tin trong thư mục ảo), Run scripts (chạy các server script như PHP hay ASP…) , Execute 
(chạy các ứng dụng ISAPI hay CGI), Write (quyền ghi vào thư mục ảo), Browse (duyệt nội dung 
của thư mục ảo). Các bạn cứ chọn như mặc định (quyền Read và Run Scripts), chọn Next. 
6. Màn hình cuối cùng, Các bạn chọn Finish để hoàn tất quá trình tạo thư mục ảo. 
Sau khi tạo xong các bạn sẽ thấy thư mục ảo bạn vừa tạo như hình bên dưới. 
Cách tạo nhanh thư mục ảo 
1. Dùng Explorer Tạo một thư mục bất kỳ trên đĩa. 
2. Phải chuột, chọn Properties. 
3. Chọn Tab Web Sharing. 
4. Chọn Share this folder. 
5. Tại cửa sổ Edit Alias, bạn có thể thay đổi tên 
của thư mục ảo hay phân quyền lại cho thư mục ảo. 
Æ Chọn OK để hoàn tất việc tạo thư mục ảo. 
2. Tạo site trong Dreamwaver: 
ƒ Chọn menu Site Æ New Site… 
ƒ Ở màn hình thứ 1 (Editing Files) Gõ tên site bạ muốn tạo vào textbox What would you 
like to name your site ? Æ Chọn Next 
ƒ Ở màn hình thứ 2 (Editing Files, Part 2): Đây
sữ dụng cho trang web, trong trường hợp này
I want to use a server tehnology (các bạn có
technology nếu chỉ làm trang web tĩnh, chỉ có
script) và trong combobox Which server tech
 3n 
 là bước cho phép các bạn chọn ngôn ngữ 
 do chúng ta sẽ sử dụng PHP nên chọn Yes, 
 thể chọn No, I do not want to use a server 
 sử dụng HTML, không sử dụng server 
ology chọn PHP MySQL. Æ Chọn Next. 
 CLB Tin học – Mediaspace - HUFLIT 
ƒ Ở màn hình thứ 3 (Editing Files, Part3) Chọn đường dẫn đến thư mục mà bạn đã chọn để 
làm thư mục ảo ở phẩn 1 Æ Chọn Next. 
Chọn đường dẫn 
ƒ Ở màn hình thứ 4 (Testing Files): Các bạn gõ bí danh (alias) của thư mục ảo mà bạn đã 
tạo ở phần 1 vào sau chuỗi:  Sau khi gõ xong bạn có thể nhấn vào nút 
Test URL để kiểm tra. 
ƒ Ở màn hình thứ 5 (Sharing Files), chọn No (do không sử dụng remote server) Æ Chọn 
Next 
 4
 CLB Tin học – Mediaspace - HUFLIT 
ƒ Ở màn hình thứ 6 (Summary), chọn Finish để hoàn tất việc tạo site. 
IV. Sử dụng Dreamwaver thiết kế trang web đơn giản: 
1. Tạo trang web mới: 
- Chọn File Æ New… 
- Trong danh sach Category Æ Chọn Basic Page. 
- Trong Basic Page Æ Chọn HTML. 
- Nhấn nút Create 
2. Định dạng cho trang: 
Chọn Modify Æ Page Propertives… (Ctrl-J) 
Tiêu đề của trang, sẽ 
hiện ra trên thanh 
taskbar của WebBrowse 
Hình nền 
Màu nền 
- Chừa lề trái, trên. 
- Chừa lề theo chiều 
rộng và chiều cao. 
Chọn UTF-8 (Unicode) 
để sử dụng tiếng Việt 
Màu text, link, link đã 
chọn (visited), link đang 
có con trỏ chuột chỉ vào 
(Active Link) 
 5
 CLB Tin học – Mediaspace - HUFLIT 
3. Sử dụng thanh chèn (Insert): 
a. Tab Common: 
 Image Placeholder Fireworks HTML HR Date Comment 
 Link Mail Name Anchor Image Flash Navigation Bar TatularBar Tag Choose 
* Chèn link: 
- Cách 1: Chọn icon Link: 
Nội dung liên kết 
URL của liên kết 
Cách mở liên kết 
Phím tắc mở liên kết 
- Cách 2: Chọn đoạn text trong vùng soạn thảo, gõ URL vào textbox Link trong thanh thuộc 
tính (Properties). 
* Chèn địa chỉ mail: 
Phần text hiện ra trên 
WebBrowse 
Đia chỉ email 
* Chèn hình ảnh: 
- Chọn hình ảnh 
cần chèn vào vị trí 
con trỏ trong vùng 
soạn thảo. 
- Deamwaver sẽ 
yêu cầu save lại 
hình vừa chọn vào 
trong thư mục 
chứa site. 
 6
 CLB Tin học – Mediaspace - HUFLIT 
b. Tab Layout: DrawLayoutTable DrawLayoutCell 
 InsertTable DrawLayer Chế độ xem chuẩn Chế độ layout (dùng để thiết kế bố cục cho trang) 
* Chèn bảng (Insert Table): 
Số dòng 
Số cột 
Độ rộng 
(theo % hay pixel) 
Độ rộng đường viền 
* Chế độ Standard View: Đây là chế độ thường dùng để xem toàn bộ trang web. 
* Chế độ Layout View: Dùng để thiết kế bố cục cho trang. Khi dùng chế độ này các bạn sử 
dụng DrawLayoutTable để vẽ Table (giống thẻ ) và DrawLayoutCell để vẽ Cell (giống thẻ 
). 
BÀI TẬP THỰC HÀNH 
 Sử dụng Dreamwaver Thiết kế trang web sau: 
 7