Giáo trình macromedia dreamweaver 8

Giaùo trình Macromedia Dreamweaver 8
Dreamweaver 8
Khởi động-Open,Thoát-Exit
Giới thiệu-
Introduction
- Là 1 chương trình ứng dụng trong bộ Macromedia, dùng để thiết kế Web (tĩnh hoặc động).
Khởi động-Open
C1: Click chọn nút > chọn > chọn Macromedia > chọn Macromedia
Dreamweaver 8 .
- Click chọn nút Designer > chọn nút .
Thoát-Exit
C1: Click chọn nút Đóng-Close .
C2: Double Click lên Biểu tượng của Dreamweaver (góc trên trái của Cửa sổ
Dreamweaver).
C3: Click chuột phải lên thanh tiêu đề rồi chọn Close .
C4: Click chọn menu > Exit.
Ấn phím Ctrl + Q.
Giao diện-Interface
Thanh Trình
đơn-Menu bar
Thanh công cụ-
Tool bar,
Khung công cụ-
Panel
* Thanh công cụ Chèn-Insert:
- Bật/Tắt:
Click chọn menu > chọn Insert.
Ấn phím Ctrl + F2.
- Chọn nhóm công cụ: Click chọn nút nhóm công cụ > chọn nhóm các công cụ ở
khung danh sách .
* Khung panel công cụ Thuộc tính-Properties:

- Bật/Tắt:
Click chọn menu > chọn Properties.
leonguyen.com
Dạng Web
Tĩnh-Static (*)
Động-Dynamic
Cách thiết kế
Công cụ-Design (*)
Mã-Code
1
Giaùo trình Macromedia Dreamweaver 8
Ấn phím Ctrl + F3.
- Thu gọn/Mở rộng:
+ Click chọn tên khung để thu gọn.
+ Click chọn tên khung để thu gọn.
- Ẩn/Hiện:
+ Click nút để ẩn khung công cụ.
+ Click nút để hiện khung công cụ.
- Di chuyển: Trỏ chuột vào các dấu chấm bên cạnh tên khung, khi đó trỏ chuột có biểu tượng ,
giữ và kéo đến nơi muốn di chuyển.
* Khung panel công cụ Tập tin-Files:
- Bật/Tắt:
Click chọn menu > chọn Files.
Ấn phím F8.
- Thu gọn/Mở rộng:
+ Click chọn tên khung để thu gọn.
+ Click chọn tên khung để thu gọn.
- Di chuyển: Trỏ chuột vào các dấu chấm bên cạnh tên khung, khi đó trỏ chuột có biểu tượng ,
giữ và kéo đến nơi muốn di chuyển.
- Ẩn/Hiện:

+ Click nút để ẩn khung công cụ.
+ Click nút để hiện khung công cụ.
- Chọn thẻ:
+ Chọn thẻ để quản lý website dưới dạng cây thư mục, tập tin:
+ Chọn thẻ để quản lý tài nguyên của website gồm: các file ảnh, đa phương tiện, flash,
liên kết …:
Trong đó:
Nút Images để quản lý hình ảnh.
Nút Colors để quản lý màu.
Nút URLs để quản lý liên kết.
Nút Flash để quản lý file Flash.
Nút Shockwave để quản lý file Flash.
Nút Movies để quản lý phim.
Nút Scripts để quản lý đoạn mã nguồn.
Nút Templates để quản lý trang Web mẫu.
Nút Library để quản lý thư viện.
leonguyen.com
2
Giaùo trình Macromedia Dreamweaver 8
Vùng làm việc-
Workspace
- Là Trang Bắt đầu-Start Page.
Site (Thư mục Web)
Phân loại
`
Cục bộ - Local
` `
Từ xa - Remote
Cấu trúc
Tạo mới-

New
* Mở hộp thoại Định nghĩa Site-Site Definition:
C1: Click chọn menu > chọn New Site.
C2: Chọn mục trên Trang Bắt đầu-Start Page.
- Xuất hiện hộp thoại Định nghĩa Site-Site Definition:
leonguyen.com
Thư mục Web
Thư mục trên máy tính cục bộ
(Local site)
Thư mục trên mạng cục bộ (LAN) hay Internet
(Remote site)
Site
images
Site
images
resource
html
Templates
Library
3
Giaùo trình Macromedia Dreamweaver 8
- Chọn thẻ :
B1: Mục Editing Files:
- Nhập tên site vào hộp . VD: Truong Tin Viet.
- Nhập địa chỉ site vào hộp . VD: .
- Click chọn nút .
- Click chọn hộp nếu bạn tạo ra web tĩnh.
Hay Click chọn hộp nếu bạn tạo ra web động > chọn công nghệ ở hộp
, các công nghệ là .
- Click chọn nút .

- Click chọn hộp để làm việc với tập tin trên
máy tính cục bộ trước rồi sau đó sẽ tải lên máy chủ khi cần thiết hay site cục bộ > chọn thư mục Web ở
hộp .
Hay Click chọn hộp để làm việc trực tiếp với tập tin trên máy chủ thông qua
mạng cục bộ hay site từ xa > chọn thư mục Web qua mạng ở hộp
.
- Click chọn nút .
B2: Mục Sharing Files:
- Chọn cách thức kết nối với máy chủ ở hộp , các cách thức là
leonguyen.com
4
Giaùo trình Macromedia Dreamweaver 8
.
o Chọn None khi là site cục bộ (Local site).
o Chọn Local/Network khi là site trên mạng cục bộ (Remote site), khi đó chọn thư mục site ở hộp
.
o Chọn FTP khi là site trên Internet (Remote site), khi đó:
Nhập địa chỉ FTP của máy chủ Web vào hộp . VD:
www.freewebs.com.
Nhập thư mục trên máy chủ Web vào hộp . VD: Để trống nếu
dùng thư mục gốc.
Nhập tên đăng nhập vào hộp . VD: abcd.
Nhập mật khẩu vào hộp . VD: 123456.
Click chọn nút để kiểm tra kết nối.
- Click chọn nút .
- Chọn thẻ :
+ Chọn Local Info để thiết lập cấu hình cho Site cục bộ:
o Nhập tên Site vào hộp .
o Nhập thư mục site vào hộp .
o Nhập thư mục hình ảnh site vào hộp .

+ Chọn Remote Info để thiết lập cấu hình cho Site cục bộ:
o Chọn cách thức kết nối với máy chủ ở hộp , các cách thức là
.
Chọn None khi là site cục bộ (Local site).
Chọn Local/Network khi là site trên mạng cục bộ (Remote site), khi đó chọn thư mục Web ở
hộp .
Chọn FTP khi là site trên Internet (Remote site), khi đó:
Nhập địa chỉ FTP của máy chủ Web vào hộp . VD:
www.freewebs.com.
Nhập thư mục trên máy chủ Web vào hộp . VD: Để
trống nếu dùng thư mục gốc.
Nhập tên đăng nhập vào hộp . VD: abcd.
Nhập mật khẩu vào hộp . VD: 123456.
Chọn hộp để đồng bộ thư mục site ở cả máy cục bộ và máy
chủ.
Click chọn nút để kiểm tra kết nối.
Lưu-Export * Mở hộp thoại Quản lý Site-Manage Site:
leonguyen.com
5
Giaùo trình Macromedia Dreamweaver 8
C1: Click chọn menu > chọn Manage Sites.
C2: Click chọn hộp trên khung công cụ Files > chọn Manage Sites.
C3: Click chọn mục Desktop trong hộp > chọn bên cạnh.
- Xuất hiện hộp thoại Quản lý Site-Manage Site:
- Chọn nút > xuất hiện hộp thoại Export Site:
- Đặt tên tập tin Site và lưu vào trong thư mục Web. VD: tinviet.
Gỡ bỏ-
Remove
- Mở hộp thoại Quản lý Site-Manage Site:
- Click chọn tên site ở khung danh sách.

- Click chọn nút .
Mở-Import
- Mở hộp thoại Quản lý Site-Manage Site:
- Click chọn tên site ở khung danh sách.
- Click chọn nút > xuất hiện hộp thoại Import Site để chọn tập tin Site đã lưu trong thư mục
Web:
Hiệu chỉnh-
Edit
- Mở hộp thoại Quản lý Site-Manage Site:
- Click chọn tên site ở khung danh sách.
- Click chọn nút > xuất hiện hộp thoại Định nghĩa Site-Site Definition như trên.
Sao chép-
Duplicate
- Mở hộp thoại Quản lý Site-Manage Site:
- Click chọn tên site ở khung danh sách.
- Click chọn nút .
Xem-View
* Chọn danh sách site: Click chọn hộp trên khung panel công cụ Files > chọn tên site.
* Xem site: Click chọn hộp trên khung công cụ Files > chọn dạng xem .
- Local view: Xem site cục bộ.
- Remote view: Xem site từ xa.
- Testing Server: Xem site được kiểm tra trên server.
- Map view: Xem bản đồ site.
leonguyen.com
6
Giaùo trình Macromedia Dreamweaver 8
Công cụ-
Tool
- Nút Connects to remote host để kết nối hay ngắt kết nối với site từ xa (remote site).
- Nút Refresh để cập nhật cây thư mục, tập tin.

- Nút Get File(s) để chép tập tin từ site từ xa (remote site) cho site cục bộ (local site), tùy thuộc vào
Enable File Check In và Check Out.
- Nút Put File(s) để chép tập tin từ site cục bộ (local site) cho site từ xa (remote site), tùy thuộc vào
Enable File Check In và Check Out.
- Nút Check Out File(s) để kiểm tra site từ xa (remote site) từ đó chép vào hay chép đè lên tập tin
trên site cục bộ (local site).
- Nút Check Out File(s) để kiểm tra site cục bộ (local site) từ đó chép vào hay chép đè lên tập tin trên
site từ xa (remote site).
- Nút Expand to show local and remote site để mở rộng khung công cụ panel Files cho thấy đồng
thời các tập tin trên site cục bộ (local site) và các tập tin trên site từ xa (remote site).
Trang-Page (Tập tin Web)
Trang mẫu-Template – DWT
Khái niệm
- Là trang cho phép sử dụng lại những thành phần giống nhau mà không cần phải thiết kế.
- Đây là trang bố cục của 1 Website.
Mục đích
Phân loại
index.html
*.html
Template .html
- Trong đó:
o Trang mẫu-Template: là tập tin .dwt (Dreamweaver Template) với phần thiết kế cho bố
cục dùng chung, trong đó có 2 loại vùng: vùng được khóa và vùng không khóa.
o Trang sử dụng Template: là tập tin .html bình thường nhưng có bố cục giống y như trang
mẫu và bạn chỉ được phép hiệu chỉnh, nhập nội dung mới cho các vùng không khóa.
- Khi có sự thay đổi trong trang mẫu thì các vùng khóa của các trang sử dụng Template cũng sẽ
tự động cập nhật theo.
- Vì thế bạn nên sử dụng Template khi cần tạo ra nhiều trang cùng mẫu thiết kế với thao tác sẽ
nhanh hơn nhiều lần.
Bật/Tắt thanh

công cụ Trang-
Document
- Click chuột phải lên thanh công cụ Insert > chọn Document.
Bật/Tắt thanh
công cụ Chuẩn-
Standard
- Click chuột phải lên thanh công cụ Insert > chọn Standard.
Tạo mới-New * Dùng khung công cụ Files-Files Panel:
- Chọn thẻ > chọn nút Templates > chọn nút New Template .
- Xuất hiện trang mẫu mới ở khung danh sách > nhập tên trang mẫu > ấn phím Enter.
* Dùng hộp thoại:
- Mở hộp thoại New Document:
C1: Click chọn mục trên trang Start.
C2: Click chọn nút New trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn New.
Ấn phím Ctrl + N.
- Xuất hiện hộp thoại New Document:
leonguyen.com
1 mục đích
Thiết kế bộ cụ-Layout Design
2 trang
Trang mẫu-Template
Các trang dùng Templates
7
Giaùo trình Macromedia Dreamweaver 8
- Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn HTML template
trong nhóm Basic page > chọn nút .
- Khi đó Dreamweaver sẽ tạo mới 1 trang mẫu có tên dùng tạm là Untitled-Số được thể hiện
dưới dạng thẻ .
Lưu trữ-Save

* Lưu trang:
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.
- Xuất hiện hộp thoại Save As:
- Chọn vị trí trang mẫu cần lưu ở hộp . VD: MyWeb.
- Gõ tên trang mẫu cần lưu ở hộp > chọn
. VD: Template.
- Khi đó trang mẫu được lưu với phần mở rộng *.dwt
* Cập nhật trang (1 trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.
* Cập nhật trang (tất cả trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All.
C3: Click chọn menu > chọn Save All.
* Lưu 1 bản sao của trang:
Click chọn menu > chọn Save As.
Ấn phím Ctrl + Shift + S.
Tiêu đề-Title
- Nhập tiêu đề trang ở hộp trên thanh công cụ trang.
leonguyen.com
8
Giaùo trình Macromedia Dreamweaver 8
Thiết kế-Design - Nội dung tiếp theo.
Định vùng không
khóa

- Chọn đối tượng muốn không khóa.
- Mở hộp thoại New Editable Region:
C1: Click chọn nút Templates > xuất hiện danh sách là > chọn Editable
Region.
C2: Click chọn menu > chọn Template Objects > Editable Region.
Ấn phím Ctrl + Alt + V.
- Sau đó xuất hiện hộp thoại New Editable Region:
+ Nhập tên vùng không khóa vào hộp . VD: Noidung.
- Khi đó sẽ xuất hiện biểu tượng của vùng không khóa trên trang là .
Duyệt-Browse
C1: Click chọn nút Preview/Debug in browser trên thanh công cụ Document > chọn loại trình
duyệt.
C2: Click chọn menu > chọn Preview in Browser > chọn loại trình duyệt.
C3: Click chuột phải lên vùng trống trong khung panel công cụ Files > chọn Preview in Browser >
chọn loại trình duyệt.
Ấn phím F12.
In-Print
* In mã (code) HTML của trang:
C1: Click chọn nút Print Code trên thanh công cụ Chuẩn.
C2: Click chọn menu > chọn Print Code.
Ấn phím Ctrl + P.
- Xuất hiện hộp thoại Print:
* In hình ảnh của trang:
- Duyệt trang bằng 1 trình duyệt bất kỳ.
Click chọn menu > chọn Print.
Ấn phím Ctrl + P.
Đóng-Close
* 1 trang:
C1: Click chọn nút Close trên thanh thẻ trang.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Close.

C3: Click chọn menu > chọn Close.
Ấn phím Ctrl + W.
* Tất cả trang:
C1: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Close All.
C2: Click chọn menu > chọn Close All.
Ấn phím Ctrl + Shift + W.
Mở-Open * Dùng khung panel công cụ Files:
leonguyen.com
9
Giaùo trình Macromedia Dreamweaver 8
- Chọn thẻ > chọn nút Templates :
C1: Double Click lên trang mẫu cần mở.
C2: Chọn trang mẫu > chọn nút Edit .
* Dùng hộp thoại:
C1: Click chọn mục trên trang Start.
C2: Click chọn nút Open trên thanh công cụ Chuẩn.
C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open.
C4: Click chọn menu > chọn Open.
Ấn phím Ctrl + O.
- Xuất hiện hộp thoại Open:
- Chọn vị trí trang trang mẫu cần mở ở hộp .
- Chọn trang mẫu cần mở ở khung danh sách bên dưới rồi chọn . VD: Template.
Trang thư viện-Library – LBI
Khái niệm
- Nếu Template được dùng để mô tả cho bố cục tổng thể của trang Web thì Library chỉ quan tâm
đến các thành phần độc lập trên trang Web.
Mục đích
Bật/Tắt thanh
công cụ Trang-
Document

- Click chuột phải lên thanh công cụ Insert > chọn Document.
Bật/Tắt thanh
công cụ Chuẩn-
Standard
- Click chuột phải lên thanh công cụ Insert > chọn Standard.
Tạo mới-New * Dùng khung công cụ Files-Files Panel:
- Chọn thẻ > chọn nút Library > chọn nút New Library item .
- Xuất hiện trang thư viện mới ở khung danh sách > nhập tên trang thư viện > ấn phím Enter.
* Dùng hộp thoại:
- Mở hộp thoại New Document:
C1: Click chọn mục trên trang Start.
C2: Click chọn nút New trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn New.
Ấn phím Ctrl + N.
- Xuất hiện hộp thoại New Document:
leonguyen.com
1 mục đích
Trình bày nội dung-Content Insert
10
Giaùo trình Macromedia Dreamweaver 8
- Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn Library item trong
nhóm Basic page > chọn nút .
- Khi đó Dreamweaver sẽ tạo mới 1 trang thư viện có tên dùng tạm là Untitled-Số được thể hiện
dưới dạng thẻ .
Lưu trữ-Save
* Lưu trang:
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.

- Xuất hiện hộp thoại Save As:
- Chọn vị trí trang thư viện cần lưu ở hộp . VD: MyWeb.
- Gõ tên trang thư viện cần lưu ở hộp > chọn
. VD: Template.
- Khi đó trang thư viện được lưu với phần mở rộng *.lbi
* Cập nhật trang (1 trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.
* Cập nhật trang (tất cả trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All.
C3: Click chọn menu > chọn Save All.
* Lưu 1 bản sao của trang:
Click chọn menu > chọn Save As.
Ấn phím Ctrl + Shift + S.
Trình bày-Insert - Nội dung tiếp theo.
leonguyen.com
11
Giaùo trình Macromedia Dreamweaver 8
Duyệt-Browse - Giống trang mẫu.
In-Print - Giống trang mẫu.
Đóng-Close - Giống trang mẫu.
Mở-Open
* Dùng khung panel công cụ Files:
- Chọn thẻ > chọn nút Library :
C1: Double Click lên trang thư viện cần mở.
C2: Chọn trang thư viện > chọn nút Edit .
* Dùng hộp thoại:

C1: Click chọn mục trên trang Start.
C2: Click chọn nút Open trên thanh công cụ Chuẩn.
C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open.
C4: Click chọn menu > chọn Open.
Ấn phím Ctrl + O.
- Xuất hiện hộp thoại Open:
- Chọn vị trí trang thư viện cần mở ở hộp .
- Chọn trang thư viện cần mở ở khung danh sách bên dưới rồi chọn . VD: Template.
Trang-Page - HTML
Mục đích
Bật/Tắt thanh công
cụ Trang-Document
- Click chuột phải lên thanh công cụ Insert > chọn Document.
Bật/Tắt thanh công
cụ Chuẩn-Standard
- Click chuột phải lên thanh công cụ Insert > chọn Standard.
Tạo mới-New
* Dùng trang Start: Click chọn mục trên trang Start.
* Dùng khung panel công cụ Files: Click chuột phải lên vùng trống > chọn New File > nhập tên
trang Web kèm theo đuôi (ví dụ index.htm)
* Dùng hộp thoại:
- Mở hộp thoại New Document:
C1: Click chọn mục trên trang Start.
C2: Click chọn nút New trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn New.
Ấn phím Ctrl + N.
- Xuất hiện hộp thoại New Document:
leonguyen.com
2 mục đích
Áp dụng Trang mẫu-Template

Chèn Trang thư viện-Library
12
Giaùo trình Macromedia Dreamweaver 8
- Chọn thẻ : Click chọn mục Basic page trong nhóm Category > chọn HTML trong nhóm
Basic page > chọn nút .
- Khi đó Dreamweaver sẽ tạo mới 1 trang có tên dùng tạm là Untitled-Số được thể hiện dưới
dạng thẻ .
Lưu trữ-Save
* Lưu trang:
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.
- Xuất hiện hộp thoại Save As:
- Chọn vị trí trang cần lưu ở hộp . VD: MyWeb.
- Gõ tên trang cần lưu ở hộp > chọn .
- Khi đó trang được lưu với phần mở rộng *.html
* Cập nhật trang (1 trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save.
C3: Click chọn menu > chọn Save.
Ấn phím Ctrl + S.
* Cập nhật trang (tất cả trang):
C1: Click chọn nút Save trên thanh công cụ Chuẩn.
C2: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Save All.
C3: Click chọn menu > chọn Save All.
* Lưu 1 bản sao của trang:
Click chọn menu > chọn Save As.
Ấn phím Ctrl + Shift + S.
Áp dụng Trang mẫu-

Template
* Áp dụng Trang mẫu-Template:
- Mở trang muốn áp dụng trang mẫu.
leonguyen.com
13
Giaùo trình Macromedia Dreamweaver 8
- Áp dụng:
C1: Chọn thẻ > chọn nút Templates > chọn trang mẫu ở khung danh sách > chọn
nút .
C2: Click chọn menu > chọn Templates > chọn Apply Template to Page.
* Cập nhật trang sử dụng Trang mẫu-Template:
- Click chọn menu > chọn Templates > chọn Update Current Page. (Cho trang hiện tại)
- Click chọn menu > chọn Templates > chọn Entire Page. (Cho trang hiện tại)
* Tách ra khỏi Trang mẫu-Template:
- Click chọn menu > chọn Templates > chọn Detach from Template.
Chèn Trang thư
viện-Library
- Chọn thẻ > chọn nút Library > chọn trang mẫu ở khung danh sách > chọn nút
.
Duyệt-Browse - Giống trang mẫu.
In-Print - Giống trang mẫu.
Đóng-Close - Giống trang mẫu.
Mở-Open
* Dùng khung panel công cụ Files:
- Double Click lên trang cần mở.
- Click chuột phải lên trang > chọn Open.
* Dùng hộp thoại:
C1: Click chọn mục trên trang Start.
C2: Click chọn nút Open trên thanh công cụ Chuẩn.
C3: Click chuột phải lên thẻ trang > xuất hiện menu ngữ cảnh > chọn Open.

C4: Click chọn menu > chọn Open.
Ấn phím Ctrl + O.
- Xuất hiện hộp thoại Open:
- Chọn vị trí trang cần mở ở hộp .
- Chọn trang cần mở ở khung danh sách bên dưới rồi chọn .
leonguyen.com
14
Giaùo trình Macromedia Dreamweaver 8
Thiết kế-Design
Giới thiệu
- Thiết kế trang là công đoạn quan trọng trong thiết kế Web, cần những họa sĩ chuyên nghiệp để thiết kế
bố cục cho trang như: logo, banner, nút, nội dung văn bản, hình ảnh … , là công việc đòi hỏi tính mỹ thuật
và cần độ chính xác cao.
Phân loại
Chế độ-
Mode
- Chế độ Chuẩn-Standard, Mở rộng Expanded: Thiết kế dựa dựa trên thao tác chèn.
- Chế độ Đồ họa-Layout: Thiết kế dựa dựa trên thao tác vẽ.
Mở thanh
công cụ
Layout
- Click chọn nút nhóm công cụ > chọn nhóm công cụ Layout ở khung danh sách
> khi đó xuất hiện thanh công cụ Layout là:
Chuẩn-Standard hay Mở rộng-Expanded
Mở chế độ
* Chuẩn-Standard:
Click chọn nút .
- Sau đó xuất hiện các công cụ cho thiết kế chế độ Chuẩn là .
* Mở rộng-Expanded:
Click chọn nút .

Ấn phím F6.
- Sau đó xuất hiện các công cụ cho thiết kế chế độ Mở rộng là và thông báo trạng thái là
trên vùng thiết kế trang.
Bảng-Table
Chèn-Insert
Chèn
bảng
- Click chọn nút Table > xuất hiện hộp thoại Table:
* Nhóm Kích thước bảng-Table size:
- Nhập số dòng vào hộp . VD: 3.
- Nhập số cột vào hộp . VD: 1.
- Nhập độ rộng của bảng vào hộp .
- Nhập độ dày của đường viền bảng vào hộp . VD: 0.
- Nhập khoảng cách nội dung ô so với viền ô vào hộp . VD: 0.
leonguyen.com
Chế độ-Mode
Chuẩn-Standard
Mở rộng-Expanded
Đồ họa-Layout
15
Giaùo trình Macromedia Dreamweaver 8
- Nhập khoảng cách giữa các ô vào hộp . VD: 0.
* Nhóm Tiêu đề bảng-Header và Tùy chọn-Accessibility:
- Chọn vị trí tiêu đề bảng:
C1:
+ Nút : Bảng không có tiêu đề.
+ Nút : Tiêu đề nằm bên trái bảng.
+ Nút : Tiêu đề nằm bên trên bảng.
+ Nút : Tiêu đề nằm bên hai bên trái hay trên bảng.
C2: Click chọn vị trí tiêu đề ở hộp , trong đó có các vị trí là .

- Nhập nội dung tiêu đề vào hộp .
- Nhập chú thích bảng vào hộp .
- Khi đó trong vùng thiết kế xuất hiện bảng là . Trong đó:
+ là Header của bảng-Table Header, Click chọn nút độ rộng của
bảng thì xuất hiện menu Header của bảng là .
+ là Header của cột-Column Header, Click chọn nút mũi tên xuống thì xuất hiện menu
Header của cột là .
Chèn nội
dung
- Có thể chèn văn bản, hình ảnh, đa phương tiện, flash …
Chọn-Select
Ô-Cell
C1: Đặt con trỏ nháy trong ô.
C2: Click chọn thẻ .
Dòng-Row
C1: Trỏ chuột vào đầu dòng khi đó con trỏ chuột có biểu tượng là rồi Click chọn.
C2: Click chọn thẻ .
Cột-
Column
C1: Trỏ chuột vào đầu cột khi đó con trỏ chuột có biểu tượng là rồi Click chọn.
C2: Chọn nút mũi tên xuống trên Header của cột > khi đó xuất hiện menu Header của cột là
> chọn Select Column.
Bảng-
Table
C1: Trỏ chuột vào đường viền dưới hay trên bảng khi đó biểu tượng con trỏ chuột là rồi
Click chọn.
C2: Chọn nút mũi tên xuống trên Header của bảng > khi đó xuất hiện menu
leonguyen.com
16
Giaùo trình Macromedia Dreamweaver 8

Header của bảng là > chọn Select Table.
C3: Chọn 1 ô trong bảng > Click chuột phải > chọn Table > chọn Select Table.
C4: Click chọn thẻ .
Hiệu chỉnh-Edit
Thêm
dòng
- Chọn dòng.
- Click chuột phải > chọn Table > chọn Insert Row (mặc định là bên trên).
Thêm cột
- Chọn cột.
- C1: Chọn nút mũi tên xuống trên Header của cột > khi đó xuất hiện menu Header của cột là
> chọn Insert Column Left để thêm 1 cột vào bên trái cột đã chọn hay chọn Insert Column
Right để thêm 1 cột vào bên phải cột đã chọn.
C2: Click chuột phải > chọn Table > chọn Insert Column (mặc định là bên trái).
Thêm
dòng hoặc
cột
- Click chuột phải > chọn Table > chọn Insert Rows or Columns > xuất hiện hộp thoại Insert Rows or
Columns:
- Sau đó thêm dòng hay cột tùy ý.
Xóa dòng - Chọn dòng > ấn phím Delete.
Xóa cột - Chọn cột > ấn phím Delete.
Xóa bảng - Chọn bảng > ấn phím Delete.
Gộp ô-
Merge

C1: Chọn 1 nhóm ô trong bảng > Click chuột phải > chọn Table > chọn Merge Cells.
C2: Click chọn nút Merges seleted cells using spans trên thanh Thuộc tính của ô.
Ấn phím Ctrl + Alt + M.
Tách ô-

Split

C1: Chọn 1 ô trong bảng > Click chuột phải > chọn Table > chọn Split Cell.
C2: Click chọn nút Splits cell in to rows or columns trên thanh Thuộc tính của ô.
Ấn phím Ctrl + Alt + S.
- Khi đó xuất hiện hộp thoại Split Cell:
Kích
thước-
Size
* Tự động: (tùy theo kích thước của trang thiết kế hay cửa sổ trình duyệt)
o Dùng nút Tiêu đề cột-Column Header:
- Click chọn nút Header của cột > chọn Make Column Autostretch.
o Dùng khung Thuộc tính-Properties:
- Click chọn hộp để thay đổi kích thước tự động.
* Cố định: (không thể thay đổi kích thước lại bằng tay hay tự động nữa)
o Thiết lập: Click chọn nút Header của cột > chọn Add Spacer Image > khi đó Column
Header của cột có dạng .
o Xóa bỏ (Cột hiện tại): Click chọn nút Header của cột > chọn Remove Spacer Image.
o Xóa bỏ (Tất cả cột): Click chọn nút Remove All Spacers trên khung Thuộc tính.
Khác
* Chiều cao tự động:
o Thiết lập:
o Xóa (Hiện tại):
o Xóa (Tất cả):
- Click chọn nút Header của bảng > chọn:
+ Clear All Height: xoá chiều cao tự động.
+ Remove Nesting: gỡ bỏ table con chứa cell.
Định dạng-Format
leonguyen.com
17

Giaùo trình Macromedia Dreamweaver 8
Ô, Dòng,
Cột-Cell,
Row,
Column
* Văn bản trong ô:
- Chọn định dạng tiêu đề văn bản ở hộp .
- Chọn font chữ ở hộp .
- Chọn cỡ chữ ở hộp , các cỡ chữ có thể chọn là , Click chọn hộp thứ 2 để chọn
đơn vị cỡ chữ là .
- Chọn màu chữ ở hộp Text Color > khi đó xuất hiện hiện bảng màu và biểu
tượng con trỏ chuột là để chọn màu.
- Chọn nút Bold để chữ đậm.
- Chọn nút Italic để chữ nghiêng.
- Chọn nút Align Left để canh lề trái văn bản.
- Chọn nút Align Center để canh lề giữa văn bản.
- Chọn nút Align Right để canh lề phải văn bản.
- Chọn nút Align Justify để canh lề 2 bên văn bản.
- Chọn nút Unordered List để đánh dấu đầu đoạn.
- Chọn nút Ordered List để đánh số đầu đoạn.
- Chọn nút Text Outdent để tăng thụt đoạn.
- Chọn nút Text Outdent để giảm thụt đoạn.
- Chọn hướng ngang của văn bản ở hộp > xuất hiện các danh sách các vị trí trái, giữa, phải
.
Left-Trái Giữa-Center Phải-Right
- Chọn hướng dọc của văn bản ở hộp > xuất hiện các danh sách các vị trí trên, giữa, dưới
.
Top-Trên
Giữa-Middle
Dưới-Bottom

leonguyen.com
18
Giaùo trình Macromedia Dreamweaver 8
Left (H)
Top (V)
Right (H)
Top (V)
Center (H)
Top (V)
Left (H)
Middle (V)
Right (H)
Middle (V)
Left (H)
Bottom (V)
Center (H)
Bottom (V)
Right (H)
Bottom (V)
* Ô, Cột, Dòng:
- Nhập chiều rộng ở hộp .
- Nhập chiều dài ở hộp .
- Chọn hình nền ở hộp .
- Chọn màu nền ở hộp .
- Chọn màu đường viền ở hộp .
Màu viền Màu nền, Hình nền
Bảng-
Table
- Nhập chỉ số bảng hay tên bảng vào hộp .
- Nhập số dòng vào hộp .

- Nhập số cột vào hộp .
- Nhập chiều rộng (theo pixel hay tỉ lệ %) của bảng vào hộp , Click chọn để chọn loại đơn
vị là .
- Chọn nút Convert Table Widths to Pixels để chuyển đơn vị đo chiều rộng của bảng sang
pixel.
- Chọn nút Convert Table Widths to Percent để chuyển đơn vị đo chiều rộng của bảng sang
phần trăm %.
- Nhập chiều dài (theo pixel hay tỉ lệ %) của bảng vào hộp , Click chọn hộp thứ 2 để chọn
loại đơn vị là .
- Chọn nút Convert Table Heights to Pixels để chuyển đơn vị đo chiều dài của bảng sang
pixel.
- Chọn nút Convert Table Heights to Percent để chuyển đơn vị đo chiều dài của bảng sang
pixel.
- Chọn canh lề bảng so với trang ở hộp với các giá trị lề là .
Trái
Left
Giữa
Center
Phải
Right
- Nhập độ dày đường viền bảng vào hộp .
- Chọn màu nền của bảng ở nút > khi đó xuất hiện hiện bảng màu và biểu
tượng con trỏ chuột là để chọn màu.
- Chọn màu đường viền của bảng ở nút > khi đó xuất hiện hiện bảng màu
và biểu tượng con trỏ chuột là để chọn màu.
leonguyen.com
19
Giaùo trình Macromedia Dreamweaver 8
- Chọn hình nền của bảng ở nút .
Màu viền Màu nền , Hình nền

- Chọn nút Clear Column Widths để xóa chiều rộng thừa.
- Chọn nút Clear Row Heigths để xóa chiều dài thừa.
Đồ họa-Layout
Mở chế độ
Click chọn nút .
Ấn phím Ctrl + F6.
- Sau đó xuất hiện các công cụ cho thiết kế chế độ Layout là và thông báo trạng thái là
trên vùng thiết kế trang.
Định nghĩa
- 1 Bảng Layout gồm có nhiều dòng, mỗi dòng có nhiều Ô Layout, số Ô Layout trên mỗi dòng có thể khác
nhau.
- 1 trang chỉ có 1 Bảng Layout.
- Trong 1 Bảng Layout có thể chứa 1 Bảng Layout con.
Bảng trình bày-Layout Table
Vẽ-Draw
- Click chọn nút Layout Table > khi đó biểu tượng con trỏ chuột có hình .
- Giữ vào kéo chuột trên vùng thiết kế trang > khi đó xuất hiện 1 Bảng Layout .
Trong đó:
- Thẻ cho biết đây là Bảng Layout.
- Các Tiêu đề-Header:
+ Của cột , Click chọn nút độ rộng của cột sẽ xuất hiện menu header của cột là
.
+ Của bảng , Click chọn nút độ rộng của bảng sẽ xuất hiện menu header của
bảng là .
Hiệu chỉnh-Edit
Chọn-
Select
- Trỏ chuột vào thẻ của Bảng Layout > khi đó xuất hiện 2 nút vuông xanh lá xung quanh Bảng
Layout .
Xóa-Delete - Chọn Bảng Layout > ấn phím Delete.

Kích
thước-Size
o Dùng thao tác kéo thả chuột:
- Trỏ chuột vào các nút hình vuông xanh lá trên đường viền của Bảng Layout > khi đó biểu tượng con
trỏ chuột có các biểu tượng , > giữ và kéo để thay đổi kích thước.
VD: hay
o Dùng khung Thuộc tính-Properties:
- Click chọn hộp để thay đổi kích thước bằng tay:
- Nhập chiều rộng (đơn vị pixcel) Bảng Layout vào hộp . VD: 740 -> 760.
- Nhập chiều cao (đơn vị pixcel) Bảng Layout vào hộp . VD: 500.
Màu sắc-
Color
- Chọn nút > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để
chọn màu nền cho Bảng Layout.
Khoảng
cách-
* Văn bản so với viền bảng: Nhập khoảng cách vào hộp .
* Giữa các ô trong bảng: Nhập khoảng cách vào hộp .
leonguyen.com
1 Bảng trình bày-Layout Table
Nhiều Ô trình bày-Layout Cell
20
Giaùo trình Macromedia Dreamweaver 8
Space
Ô trình bày-Layout Cell
Vẽ-Draw
- Click chọn nút vẽ Draw Layout Cell > khi đó biểu tượng con trỏ chuột có hình .
- Giữ vào kéo chuột trên vùng thiết kế trang > khi đó xuất hiện 1 Ô Layout .
Chèn nội
dung

- Có thể chèn văn bản, hình ảnh, đa phương tiện, flash …
Hiệu chỉnh-Edit
Chọn-
Select
- Trỏ chuột vào đường viền của Ô Layout rồi Click chuột > khi đó Ô Layout được chọn có 8 nút
vuông xanh dương xung quanh Ô Layout .
Xóa-Delete - Chọn Ô Layout > ấn phím Delete.
Di chuyển-
Move
- Chọn Ô Layout > giữ và kéo chuột đến vị trí muốn di chuyển đến .
Kích
thước-Size
o Dùng thao tác kéo thả chuột:
- Trỏ chuột vào các nút hình vuông xanh dương trên đường viền của Ô Layout > khi đó biểu tượng con
trỏ chuột có các biểu tượng , , , > giữ và kéo để thay đổi kích thước.
VD: , , , , , , ,
o Dùng khung Thuộc tính-Properties:
- Click chọn hộp để thay đổi kích thước bằng tay:
- Nhập chiều rộng (đơn vị pixcel) Ô Layout vào hộp .
- Nhập chiều cao (đơn vị pixcel) Ô Layout vào hộp .
Màu sắc-
Color
- Chọn nút > khi đó xuất hiện hiện bảng màu và biểu tượng con trỏ chuột là để
chọn màu nền cho Ô Layout.
Canh
hướng-
Align
* Hướng ngang: Click chọn hộp > xuất hiện các danh sách các vị trí trái, giữa, phải
.
* Hướng dọc: Click chọn hộp > xuất hiện các danh sách các vị trí trên, giữa, dưới .

Bảng định kiểu (CSS-Cascading Style Sheet)
Giới
thiệu
- Bảng định kiểu-CSS-Cascading Style Sheet là sự kết hợp các định dạng với nhau, ngoài ra có thể định vị
viền khung, đặt màu nền … hay thuộc tính tùy vào biến cố chuột.
- CSS có thể đính kèm trong trang hay lưu riêng thành 1 tập tin kiểu CSS, phục vụ cho nhiều trang.
leonguyen.com
21
Giaùo trình Macromedia Dreamweaver 8
Trình bày-Insert
Văn bản-Text
Mở thanh
công cụ Text
- Click chọn nút nhóm công cụ > chọn nhóm công cụ Text ở khung danh sách
> khi đó xuất hiện thanh công cụ Text là:
Bảng mã
Unicode
* Mở hộp thoại Page Properties:

C1: Click chọn nút trong khung panel công cụ Properties.
C2: Click chọn menu > chọn Page Properties.
Ấn phím Ctrl + J.
- Xuất hiện hộp thoại Page Properties:
+ Chọn mục Title/Encoding > chọn Unicode(UTF-8) trong hộp để chọn
bảng mã cho font chữ tiêu đề trang.
+ Chọn màu trang ở nút > khi đó xuất hiện hiện bảng màu và biểu
tượng con trỏ chuột là để chọn màu.
+ Chọn ảnh nền trang ở hộp .
* Mở hộp thoại References:
Click chọn menu > chọn References.

Ấn phím Ctrl + U.
- Xuất hiện hộp thoại References:
+ Chọn mục New Document > chọn Unicode(UTF-8) trong hộp
để chọn bảng mã cho font chữ nội dung trang.
Gõ Tiếng Việt (Unicode)
Chọn Bộ gõ và Bảng mã - Click chuột phải lên biểu tượng chương trình gõ Unikey trên thanh Taskbar.
- Click chọn Bộ gõ là Gõ kiểu VNI và chọn Bảng mã là Unicode (như hình).
leonguyen.com
22
Giaùo trình Macromedia Dreamweaver 8
Nhập văn bản-Type
Xuống dòng
- Ấn phím Shift + Enter để xuống dòng cùng một đoạn (Paragraph).
- Ấn phím Enter để xuống dòng ngắt một đoạn (Spacing).
Chọn khối văn bản-Select
- Giống Microsoft Word.
Hiệu chỉnh-Edit
Xóa-Delete
Xóa văn bản
B1: Chọn khối văn bản cần xóa.
B2:
Ấn phím BackSpace hay phím Delete.
Click chọn menu > chọn Clear.
Sửa-Edit
Sửa văn bản
- Chọn khối văn bản cần sửa.
- Nhập văn bản cần sửa.
Tìm kiếm-Find
Tìm kiếm văn bản
- Chọn vị trí con trỏ nháy tại vị trí đầu tiên của trang.

- Mở hộp thoại Find and Replace:
Click chọn menu > chọn Find and Replace.
Ấn phím Ctrl + F.
- Xuất hiện hộp thoại Find and Replace:
- Click chọn hộp để chọn vùng tìm kiếm, các vùng tìm kiếm là
.
- Click chọn hộp để chọn đối tượng tìm kiếm, các đối tượng tìm kiếm
là .
- Nhập văn bản cần tìm ở hộp .
- Click chọn nút để tìm từng bước, Click chọn nút để tìm tất cả.
- Ấn phím ESC để kết thúc tìm kiếm.
Tìm văn bản đang
chọn
- Chọn văn bản cần tìm.
- Tìm:
Click chọn menu > chọn Find Selection.
Ấn phím Shift + F3.
Tìm văn bản tiếp
Click chọn menu > chọn Find Next.
leonguyen.com
23
Giaùo trình Macromedia Dreamweaver 8
Ấn phím F3.
Thay thế-Replace
Thay thế
văn bản
- Chọn vị trí con trỏ nháy tại vị trí đầu tiên của trang.
- Mở hộp thoại Find and Replace:
Click chọn menu > chọn Find and Replace.
Ấn phím Ctrl + F.

- Xuất hiện hộp thoại Find and Replace:
- Nhập văn bản bị thay thế ở hộp và văn bản thay thế
ở hộp .
- Thay thế từng từ hay cụm từ: Click chọn nút để tìm và Click chọn nút để thay thế.
- Thay thế toàn bộ từ hay cụm từ: Click chọn nút .
Di chuyển-Move
Di chuyển văn bản
B1: Chọn khối văn bản cần di chuyển (nguồn).
B2:
C1: Click chuột phải lên khối văn bản đã chọn > chọn Cut.
C2: Click chọn nút Cắt-Cut trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn Cut.
Ấn phím Ctrl + X.
B3: Chọn vị trí con trỏ nháy tại vị trí sẽ di chuyển đến (đích).
B4:
C1: Click chuột phải tại vị trí muốn di chuyển > chọn Paste.
C2: Click chọn nút Dán-Paste trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn Paste.
Ấn phím Ctrl + V.
Sao chép-Copy
Sao chép văn bản
B1: Chọn khối văn bản cần sao chép (nguồn).
B2:
C1: Click chuột phải lên khối văn bản đã chọn > chọn Copy.
C2: Click chọn nút Sao chép-Copy trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn Copy.
Ấn phím Ctrl + C.
B3: Chọn vị trí con trỏ nháy tại vị trí sẽ sao chép đến (đích).
B4:
C1: Click chuột phải tại vị trí muốn sao chép > chọn Paste.

C2: Click chọn nút Dán-Paste trên thanh công cụ Chuẩn.
C3: Click chọn menu > chọn Paste.
Ấn phím Ctrl + V.
Phục hồi-Undo
Phục hồi văn bản
C1: Click chọn nút Undo trên thanh công cụ Chuẩn.
C2: Click chọn menu > chọn Undo.
leonguyen.com
24
Giaùo trình Macromedia Dreamweaver 8
Ấn phím Ctrl + Z.
Lặp lại-Redo
Lặp lại văn bản
C1: Click chọn nút Redo trên thanh công cụ Chuẩn.
C2: Click chọn menu > chọn Redo.
Ấn phím Ctrl + Y.
Định dạng-Format
Font
Font chữ-
Font
C1: Click chọn hộp trên thanh thuộc tính, các font chữ có là .
C2: Click chuột phải lên khối văn bản > chọn Font > chọn font chữ ở khung danh sách
.
C3: Click chọn menu > chọn Font > chọn font chữ ở khung danh sách .
- Click chọn mục Edit Font List > khi đó xuất hiện hộp thoại Edit Font List để thêm danh sách Font:
Cỡ chữ-Font
size
- Click chọn hộp trên thanh thuộc tính, các cỡ chữ có thể chọn là , Click chọn
hộp thứ 2 để chọn đơn vị cỡ chữ là .
Kiểu chữ-

Font Style
* Chữ đậm:

C1: Click chọn nút Bold trên thanh thuộc tính.
C2: Click chuột phải lên khối văn bản > chọn Style > chọn Bold.
leonguyen.com
Định dạng-Format
Font
Canh đều-Align
Đề mục-Heading
Danh sách-List
Thụt đoạn-Indent
Bảng định kiểu-CSS
25