Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Chương 01

TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER
Sơ lược về Macro Media Dreamweaver
Màn hình làm việc
Định nghĩa Site
Sử dụng bảng điều khiển Site

I. Sơ Lược Về Dreamweaver
Là một chương trình dùng để tạo ra và quản lý các trang web. Phần cốt lõi của nó là
HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản)
Là một công cụ mạnh, dễ dùng, một công cụ trực quan: Có 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 phải viết 1 dòng mã nào.
Cung cấp chế độ làm việc Design WYSIWYG (những gì thấy là những gì có được).
và chế độ làm việc mã –Code.
II. Màn Hình Làm Việc
1. Khởi động:
Start

Programs

Create New

MacroMedia

MacroMedia DreamWeaver MX 2004

HTML

2. Màn hình làm việc
2.Thanh trình đơn

1.Thanh tiêu đề
7. Bảng điều khiển

3.Thanh công cụ Insert

4.Thanh công cụ Document

Vùng thiết kế

6.Cửa sổ thuộc tính

5.Thanh trạng thái

1. Thanh tiêu đề: Chứa tên tập tin đang thiết kê

Biên so n: D

ng Thành Ph t

Trang 78


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

2. Thanh trình đơn: Chứa các tập lênh thực hiện các chức năng

3. Thanh công cụ Insert: Chứa nhóm các công cụ tạo và định dạng các đối tượng.
4. Thanh công cụ Document: Các hình thức trình bày trang đang thiết kế
5. Thanh trạng thái: Báo khu vực trên trang đang chọn làm việcvà kích thước trang.
6. Cửa sổ thuộc tính(Properties):Các thuộc tính của đốI tương đang được chọn.
7. Bảng điều khiển: Trình bày các bảng điều khiển
III. Định Nghĩa Site
1. Khái quát
Site là vùng lưu trữ cục bộ trên máy tính chứa các tập tin của 1 website bao gồm
các thư mục con chứa các tập tin âm thanh, hình ảnh . . .
2. Thiết Lập Cấu Trúc Site
Việc tổ chức site cẩn thận ngay từ lúc đầu sẽ tiết kiệm thời gian về sau. Thông
thường để xác lập 1 site là tạo 1 thư mục gốc trong đĩa cục bộ chứa tất cả các file trong web
site, sau đó sao chép các file này đến web server
3. Tạo MớI Site
Chọn menu Site / Manage Sites

New / Site

Hộp thoại Site Definition for Unnamed Site 1 hiển thị, có hai lớp (Basic và
Advanced). Lớp Advanced trình bày tổng quát, còn lớp Basic trình bày dạng từng bước (sẽ
không có sự khác biệt nhau giữa hai lớp này.)
Xét lớp Advanced

1

2
3
4
5


6

Biên so n: D

ng Thành Ph t

Trang 79


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Xác định các mục trong hộp thoại:
•

[1] Site name: Nhập tên cho site (VD: CLBTinHoc)

•

[2] Local Root Folder: Xác định thư mục trên ổ đĩa cục bộ nơi lưu trữ các tập tin.

•

[3] Refresh Local File List Automaticaly: Tự động tinh chỉnh mỗi khi thay đổI các
tập tin có liên quan trong local site hay không.

•

[4] Default Images Folder: Chỉ định thư mục mặc định lưu trữ các tập tin ảnh trong
site.


•

[5] Cache: Chỉ định Cache cục bộ có được tạo hay không để cải thiện tốc độ liên kết
và quản lý tài nguyên của site. Khuyên nên chọn mục này, tuy nhiên nếu máy không
đủ bộ nhớ RAM có thể bỏ qua tùy chọn này.

Xác định xong các mục trong hộp thoại, click OK để tạo site
Sites click Done

Trở về cửa sồ Manage

IV. Sử Dụng Bảng Điều Khiển Site
1. Bảng điều khiển Site
Sử dụng cửa sổ Site cho các thao tác quản lý tập tin trong Site như: tạo trang HTML ,
xem, mở và di chuyển; tạo các thư mục và xóa các thư mục.
Để mở bảng điều khiển Site trong nhóm các bảng điều khiển chọn Files

2. Các thao tác quả n lý Local Site
Các thao tác quản lý thư mục và tập tin tạI cửa sổ Local Site được ánh xạ trực tiếp đấn cây
thư mục trong đĩa cứng.
a. Tạo thư mục trong Site
Click phải tên site(Hoặc thư mục) muốn tạo thư mục con
New Folder

Nhập tên

b. Tạo tập tin HTML trong Site
Click phảI tên site(Hoặc thư mục) chứa trang HTML

Biên so n: D

ng Thành Ph t


Trang 80


Bài Gi ng Môn Thi t K Web

New File

Ph n 4: MacroMedia DreamWeaver

Nhập tên.

c. Đổi tên Thư mục hoặc tập tin
Click phảI tên thư mục(Hoặc tậ p tin )

Edit

Rename

Nhập tên khác.
d. Nhân đôi tập tin
Click phải tên tập tin

Edit

Duplicate

Nhập tên khác.

e. Xóa thư mục tậ p tin HTML

Click phảI tên tập tin(hoặc thư mục)

Biên so n: D

ng Thành Ph t

Edit

Delete

Trang 81


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Chương 02

THIẾT KẾ TRANG WEB
Các thao tác quản lý trang Web
Thiết lập các thuộc tính trang
Tạo và định dạng văn bản
Tập tin hình ảnh
Tập tin Media
Tập tin Flash
I. Các Thao tác Quản Lý Trang Web
Khi đã tạo 1 site cục bộ, ta có thể tạo các trang web để đưa vào site. Khi tạo và làm
việc với các trang web, Dreamweaver sẽ tự động phát sinh mã nguồn HTML.
Có các cách khác nhau để tạo: Tạo mới trang web trống hay tạo mới dựa vào các
trang web mẫu (template)
1. Tạo mới trang tài liệu:

Chọn menu File / New

Hộp thoại New Document hiển thị,

Chọn lớp General, chọn Basic page chọn kiểu dạng HTML. Nhấn vào nút Create,

2. Lưu một trang tài liệu:
•

Chọn menu lệnh File / Save

•

Nhập tên cho tập tin và chọn thư mục chứa tập tin cần lưu.

•

Click nút Save để lưu .

Nếu muốn lưu tập tin với tên khác,
chọn menu lệnh File / Save as . .

3. Mở một tập tin HTML đang tồn tại:
Chọn menu File / Open, chọn file cần mở và nhấn Open để mở.
Biên so n: D

ng Thành Ph t

Trang 82


Bài Gi ng Môn Thi t K Web


Ph n 4: MacroMedia DreamWeaver

II. Thiết Lập Thuộc Tính Trang
Tiêu đề trang, ảnh và màu nền, màu văn bản và liên kết, các lề và các thuộc tính cơ
bản của trang web.
•

Chọn menu Modify/Page Properties . . .Hoặc click chuột phải trên trên trang đang
thiết kế
chọn Page Properties . . .

•

Hộp thoại Page Properties hiển thị:

1. Thuộc tính chung cho trang: Lớp Appearance
1

2
3
4

5

6

(1)-Page Font: Font chữ mặc định cho trang
(2)-Size: Cỡ chữ mặc định cho trang
(3)-Text color: Màu chữ mặc định cho trang

(4)-Background color: Màu nền trang
(5)-BackGround Image: Ảnh nền cho trang (Ảnh phảI nằm trong thư mục của Site)
(6)-Left/Right/Top/Bottom Margin: Lề trang
2. Các thuộc tính chung cho liên kết : Lớp Link
1

2
3
4

(1)-Link Font: Font chữ cho văn bản liên kết
(2)-Size: Cỡ chữ cho văn bản liên kết
(3)-Link color: Màu chữ cho văn bản liên kết
-Visited links: Màu chữ cho văn bản liên kết khi đã viếng thăm
-Rollover links: Màu chữ cho văn bản liên kết khi rê chuột qua
-Active links: Màu chữ cho văn bản liên kết khi Click chuột
(4)-Underline style: Kiểu gạch chân cho văn bản liên kết
+ Never . . . .: Không bao giờ có gạch chân
Biên so n: D

ng Thành Ph t

Trang 83


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

+ Always . . .: Luôn có gạch chân
+ Show . . . .: Hiện thị đường kẽ ngang khi rê chuột vào
+ Hide. . . . .: Ẩn gạch chân khi rê chuột vào

3. Tạo mẫu văn bản đề mục : Lớp Headings
Tạo các mẫu văn bản đề mục (Heading1, . . .) để dùng khi định dạng.

4. Tiêu đề trang: Chọn mục Title/Encoding

Title: Nhập tiêu đề cho trang vào mục.
Encoding: Chọn UTF-8 (nếu trên trang có sử dụng văn bản Uniode)

III. Tạo Và Định Dạng Văn Bản
Việc nhập và định dạng văn bản trong Dreamweaver MX hoàn toàn giống như trình
soạn thảo văn bản thông thường.
1. Tạo và định dạng văn bản
•
•

Nhập văn bản trực tiếp trong cửa sổ Document.
Để thay đổi Font, kích thước, màu sắc và sự canh lề cho các văn bản được chọn có
thể sử dụng trình đơn Text hoặc truy cập các thuộc tính trên Properties.

Để nhập văn bản tiếng Việt, nên sử dụng các font và bảng mã tương ứng. Thông
thường nên sử dụng font theo mã Unicode để có thể xem trên mọi máy.
2. Thiết lập và thay đổi các Font và Style:
•

Chọn văn bản.

•

Thiết lập các tùy chọn sau:
o


Để thay đổi Font: Chọn tổ hợp font từ Properties (Hay từ menu Text/Font)

o

Để thay đổi kiểu Font: Click Bold/Italic trên Properties (Hay chọn kiểu Font
trên menu Text/Style)

Biên so n: D

ng Thành Ph t

Trang 84


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

o

Để thay đổi cỡ chữ: Chọn 1 kích cỡ từ Properties (Hay từ menu Text / Size)
các kích cỡ từ 1 đến 7 l(Mặc định là 3)

o

Để tăng giảm kích cỡ của văn bản được chọn: Chọn kích cỡ tương đối (+1
hay -1 cho đến +7 hay -7) từ Properties (Hay từ menu Text / Size)

Sử dụng các Paragraph và các Heading:
Đặt điểm chèn vào trong đoạn văn bản.
Dùng Format trên Properties (Hay menu Text/Paragraph Format) để áp dụng đoạn

văn bản chuẩn và các thẻ Heading.
3. Đổi màu văn bản:
•

Chọn văn bản muốn đổi màu.

•

Thực hiện: Click ô Text Color trên Properties (Hay chọn Menu Text/Color) để mở
bảng màu , chọn 1 màu trong bảng.

4. Canh chỉnh văn bản:
•

Chọn văn bản muốn canh chỉnh hay đặt điểm chèn vào trong đoạn văn bản.

•

Click chọn một dạng canh lề trên Properties (Hay chọn menu Text/Align)

5. Thay đổi tổ hợp Font:
Sử dụng lệnh Edit Font List để thiết lập các tổ hợp font được hiển thị trên
Properties và menu Text / Font.
Chọn tổ hợp font từ danh sách ở phía trên của hộp thoại Edit Font List. Các font
trong tổ hợp được liệt kê trong danh sách Chosen Fonts. Danh sách Available chứa các
font cho phép cài đặt. Nếu không có Font nào trong tổ hợp được cài đặt thì sẽ hiển thị Font
mặc định của trình duyệt.

6. Tạo một danh sách mới:
•


Đặt điểm chèn ở vị trí muốn tã tạo danh sách(Hoặc 1 nhóm các dòng)

•

Click nút Unordered List hay Ordered List trên Properties
(Hay Menu Text/List và chọn kiểu của danh sách)
ấn Enter để chuyển sang .
Để hoàn thành danh sách, ấn Enter hai lần.

Biên so n: D

ng Thành Ph t

Trang 85


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Các thuộc tính của danh sách: Để xem hay hiệu chỉnh các thuộc tính của danh sách.
•

Chọn một hạng mục trong danh sách và chọn Text / List / Properties (Hay click List
Item trên Properties)
Trong hộp thoại List Properties có các thuộc tính.
o

List Type: Kiểu đánh dấu của danh sách.

o


Style: Kiểu của ký tự dùng đánh dấu danh sách.

o

Start Count: Đặt biến bắt đầu đánh dấu cho hạng mục đầu tiên trong danh
sách.

o

New Style: Cho phép chọn một kiểu ký tự mới đánh dấu bắt đầu từ hạng mục
được chọn.

o

Reset Count To: Đặt giá trị bắt đầu đánh dấu từ hạng mục được chọn

7. Tạo danh sách kết tổ:
o Chọn danh sách các hạng mục muốn kết tổ.
o Click nút Text Indent / Text Out trên Properties (Hay chọn Text/Indent Hoặc
Text/Outdent)
8. Sử dụng đường kẻ ngang:
Các đường kẻ ngang rất hữu ích cho việc tổ chức thông tin. Trên 1 trang, có thể tách
rời các văn bản và các đối tượng với một hay nhiều đường kẻ ngang.
•

Đặt điểm chèn tại vị trí muốn tạo đường kẻ ngang.

•


Chọn Insert / Horizontal Rule (Hay Click nút Insert Horizontal Rule trong Panel
Objects/HTML)

Chỉnh sửa đường kẻ ngang:
•

Chọn đường kẻ ngang.

•

Chọn và điều chỉnh các thuộc tính của đường kẻ ngang trên Properties:
o

W và H: định chiều cao và bề dày.

o

Align: chọn chế độ canh.

o

Shanding: chọn kiểu bóng đổ.

9. Chèn các ký hiệu đặc biệt
•

Đặt điểm chèn tại vị trí muốn chèn kí hiệu đặc biệt

•


Chọn Insert/HTML/Special Charcters/ Orter (Hay Click nút Character trong Panel
Objects / Text)

Biên so n: D

ng Thành Ph t

Trang 86


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Chọn ký hiệu

Ok

IV. Tập Tin Hình Ảnh
1. Khái quát về hình ảnh
Hình ảnh là thành phần quan trọng góp phần trang trí trang web thêm hấp dẫn và linh
động. Tuy nhiên lạI là nhân tố gây cản trở tốc độ hiển thị trang web. Vì vây cần cân nhắc
theo các nguyên tăc sau:
Màu sắc phảI phù hợp vớI Tone màu chung của trang web
Đừng lạm dụng quá nhiều hình ảnh trên cùng 1 trang.
Không sử dụng ảnh có kích thước quá lớn(Nếu cần nên tạo liên kết phóng to)
Độ phân giải ảnh thông thường 72dpi
Chọn định dạng ảnh phù hợp theo dạng thức của từng loạI ảnh:
Jpeg – Jpg : Ảnh tĩnh, hỗ trợ 16 triệu màu, phù hợp với các ảnh
Gif : Ảnh tĩnh hoặc động hỗ trợ 256 màu
Swf (Macromedi Flash): Ảnh động véctơ , hỗ trợ 16 triệu màu tuy nhiên để
xem máy tính phải cài Flash Plug in.


Ghi chú: Các hình ảnh phải được lưu trữ vào 1 thư mục trong Site.
2. Chèn Ảnh Vào Trang Web
a. Chèn hình ảnh vào trang
Đặt điểm chèn ở vị trí muốn chèn
Click biểu tượng Image
công cụ Common. (Hoặc trình đơn Insert/ Image)

Image trên thanh

Hoặc
Tìm chọn ảnh

Click Ok

Biên so n: D

ng Thành Ph t

Trang 87


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

b. Các thao tác định dạng
1
7
8

2

3

6

[1]-Src: Đường dẫn tập tin ảnh.

4

5

[2]-Alt: Câu chú thích khi rê chuột vào ảnh.
[3]-Border: Độ dày Khung viền quanh ảnh.
[4]-Các hình thức canh lề ảnh so với trang.
[5]-Align: Các hình thức canh lề ảnh so với văn bản trên trang.
[6]-Low Src: Đường dẫn tập tin ảnh chất lượng thấp(tảI trước ảnh thật)
[7]-Vspace : Khoảng trống (Pixel) bên trái/phảI ảnh
[8]- Hspace : Khoảng trống (Pixel) phía trên/dướI ảnh.
c. Giữ tọa độ vị trí cho ảnh
Giúp cho ngườI thiết kế định vị trước vị trí của các ảnh sẽ chèn bổ sung sau này:
Đặt điểm chèn ở vị trí muốn định vị
Click biểu tượng Image
Image Placehoder
trên thanh công cụ Common. (Hoặc trình đơn Insert/ Image Object/ Images
Placeholder)

Hoặc
Xuất hiện

Name: Đặt tên
Width/Height: Độ rộng/ Height: Độ cao

Color: Màu nền
AlternateText: Câu chú thích
Bổ sung hình ảnh và định dạng tạI vị trí đã giữ chổ
Chọn vị trí đã giữ chổ
TạI cửa sổ thuộc tính Properties thực hiện bổ sung ảnh và khai
báo các thuộc tính định dạng

Biên so n: D

ng Thành Ph t

Trang 88


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

V. Tập tin Media (Audio, Video)
1. Khái quát về các dạng tập tin Multi Media:
•

Dạng .midi (hay .mid) được cung cấp bởi nhiều trình duyệt và không yêu cầu Plug-in.

•

Dạng .wav có chất lượng âm thanh tốt, được cung cấp bởi nhiều trình duyệt, không
yêu cầu Plug-in. Tuy nhiên kích thước tập tin lớn.

•

Dạng .aif tương tự dạng wav, cho chất lượng âm thanh tốt, có thể chạy hầu hết các

trình duyệt mà không yêu cầu Plug-in, Tuy nhiên kích thước tập tin lớn

•

•

Dạng .mp3,.avi, wma,wmv . . . là dạng nén làm tập tin âm thanh nhỏ hơn nhiều. Chất
lượng âm thanh tốt. Công nghệ mới cho phép "phân luồng" tập tin nên không phải đợi
toàn bộ tập tin được tải trước khi nghe nó. Để chạy các tập tin này, người sử dụng
phải cài đặt trình ứng dụng như Windows Media.
Dạng .ra, .ram, .rpm,. . có độ nén rất cao, kích thước tập tin nhỏ hơn. Công nghệ
phần luồng tập tin. Chất lượng âm thanh kém hơn các tập tin MP3 Phải cài đặt trình
ứng dụng như RealPlayer.

2. Liên kết đến tập tin Media
Liên kết đến tập tin Media là cách đơn giản và hiệu quả để thêm âm thanh cho trang Web.
•

Chọn văn bản hay hình ảnh muốn sử dụng để liên kết với tập tin Media.

Trên thanh properties, ở trường Link click vào biểu tượng thư mục để tìm tập tin âm
thanh muốn liên kết Ok (hoặc gõ vào đường dẫn và tên tập tin).
3. Nhúng tập tin Media vào trang:
Nhúng Media kết hợp với trình chạy âm thanh trực tiếp vào trang.
•

Đặt trỏ chèn tại vị trí muốn nhúng tập tin.

•


Click vào nút Plug-in

trên Common, hay chọn lệnh Insert / Media / Plugin

Hay
•

Hộp thoại Select File hiển thị, click chọn tìm tập tin Media.

Ok

•

Trên thanh Properties, xác định độ rộng, chiều cao và canh lề cho Media control.

Ghi chú : Tập tin Media nhúng vào trang phải nằm cùng thư mục với trang dang thiết kế.

Biên so n: D

ng Thành Ph t

Trang 89


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

VI. Các Tập Tin Flash
1 Thêm các tập tin Flash vào trang
•


Đặt trỏ chèn tại vị trí muốn nhúng tập tin.

•

Click vào nút Flash trên Common, hay chọn lệnh Insert / Media / Flash

Hay
•

Hộp thoại Select File hiển thị, click chọn tìm tập tin Flash,

Ok

•

Trên thanh Properties, xác định độ rộng, chiều cao và canh lề, cho khung hiển thị
hay xem thử kết quả(Play)

2. Thiết kế các chuỗi kí tự có hiệu ứng Flash
•

Đặt trỏ chèn tại vị trí muốn tạo chuổI hiệu ứng Flash.

•

Click vào nút Flash Text trên Common, hay chọn lệnh Insert / Media / FlashText

Hay
•


Hộp thoại Select File hiển thị, click chọn tìm tập tin Flash,
Font: Font chữ
Size: Cỡ chữ
Color: Màu
RolloverColor: Màu khi rê chuột vào
Text: Nhập nộI dung
Link: URL của tập tin liên kết
Tartget: Hình thức hiển thị cho trang liên kết
BgColor: Màu nền
Save as: Vị trí lưu trữ tập tin ảnh của nút

Biên so n: D

ng Thành Ph t

Trang 90


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Ok
•

Trên thanh Properties, xác định độ rộng, chiều cao và canh lề cho chuỗI Flash.

Biên so n: D

ng Thành Ph t

Trang 91



Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Chương 03

LIÊN KẾT VÀ ĐỊNH HƯỚNG TRANG
Các loại liên kết và định hướng
Tạo liên kết
Bổ sung Navigation Bar
Bổ sung Rollover
Tạo bản đồ ảnh
Tạo nút Flash
I. Các LoạI Liên Kết Và Định Hướng
1. Khái quát về các đường dẫn và vị trí của tài liệu:
Mỗi trang Web có duy nhất một địa chỉ, được gọi là URL (Uniform Resource Locator).
Tuy nhiên khi tạo một mối liên kết cục bộ, thông thường không xác định toàn bộ URL, Thay
vào đó xác định đường dẫn liên quan từ thư mục gốc của site. Sau đây là 3 giai đoạn
đường dẫn liên kết:
2. Đường dẫn tuyệt đối (Absolute paths):
Loại đường dẫn này cung cấp một URL hoàn chỉnh đến tài liệu được liên kết.
Ví dụ: />•

Sử dụng đường dẫn tuyệt đối để kết nối đến tài liệu đặt trên một server khác.

3. Đường dẫn tương đối (Document relative paths):
•

Loại đường dẫn này thích hợp cho các liên kết cục bộ trong hầu hết các Web site. Để
kết nối với 1 trang bằng cách chỉ định đường dẫn qua hệ phân cấp thư mục từ tài liệu

hiện hành đến tài liệu muốn liên kết.

Nếu tạo đường dẫn này trước khi lưu tài liệu thì Dreamweaver MX sẽ sử dụng tạm
thời đường dẫn tuyệt đối bắt đầu với "file://" cho đến khi lưu tập tin, Dreamweaver MX
chuyển "file://" thành đường dẫn tương đối.
4. Các đường dẫn tương đối so với gốc (Root - relative paths)
Loại đường dẫn này cung cấp đường dẫn từ thư mục gốc của site đến tài liệu. có thể
sử dụng loại đường dẫn này nếu đang làm việc trên Web site lớn sử dụng vài server hoặc
một server mà giữ nhiều site khác nhau.
•

Loại đường dẫn này bắt đầu bằng dấu "/" ám chỉ thư mục gốc của site.

Ví dụ: /support/tips.html: là đường dẫn đến tập tin trong thư mục con support trong thư
mục gốc của site.
5. Liên kết rỗng: Là liên kết không được chỉ định. Trong trường Link nhập vào dấu "#".
II. Tạo Liên Kết
Thực chất việc bổ sung các liên kết rất dễ dàng. Một liên kết là một behavior báo cho
trình duyệt rằng "khi người dùng nhấp vào đây, hãy mở trang Web này hoặc đi đến phần
này của trang".
1. Tạo một liên kết:
•

Chọn dòng văn bản cần tạo liên kết:

•

Click chuột phải và chọn Make Link hay vào trình đơn Modify / Make Link hay khai
báo tại trường Link trên Properties


•

Hộp thoại Select file hiển thị, click chọn tên file cần liên kết hay nhập một địa chỉ Web
Site mà định liên kết vào hộp thoại URL.

Biên so n: D

ng Thành Ph t

Trang 92


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

2. Tạo liên kết thư điện tử:
Với liên kết thư điện tử, khi người dùng nhấp vào liên kết này, trình quản lý thư điện
tử mặc định của người sử dụng sẽ được mở ra.
•

Đặt vị trí con trỏ chuột tại nơi muốn đặt dòng liên kết. Click chọn vào biểu tượng Mail
link trên thanh công cụ Common hay (Hay vào trình đơn Insert / Email Link

•

Hộp thoại Email Link hiển thị : Nhập nhãn hiển thị vào ô Text và địa chỉ thư điện tử
vào ô E-mail. click OK,

III. Bổ Sung Navigation Bar
1. Khái quát
Navigation Bar bao gồm một ảnh (hoặc một tập ảnh) hiển thị những thay đổi theo

thao tác của người sử dụng.
Trước khi sử dụng lệnh Insert Navigation Bar, phải tạo một tập các ảnh để hiển thị
các trạng thái của mỗi phần tử trong thanh Navigation. gồm có 4 trạng thái:
•

Up: Ảnh xuất hiện khi người sử dụng chưa click hoặc đã tác động vào nó.

•

Over: ảnh xuất hiện khi trỏ chuột di chuyển lên nó.

•

Down: ảnh xuất hiện khi click chuột.

•

Over While Down: ảnh xuất hiện khi trỏ chuột di chuyển ra ngoài sau khi click chọn.
không nhất thiết phải có ảnh cho 4 trạng thái, có thể chỉ tạo trạng thái Up và Down.

2. Chèn thanh Navigation Bar
Đặt điểm chèn ở vị trí muốn chèn
Click biểu tượng Image
Image Naigation Bar
trên thanh công cụ Common. (Hoặc trình đơn Insert/ Image Object / Navigation Bar)
1

2

3


4
5

6
7

9

8
10

[1]-: Thêm mới/ loạI bỏ 1 mục
[2]-: Thay đổi trật tự các mục.
[3]-: Element name: Đặt tên cho mỗI mục.
[4]-: Up Image: Hình hiển thị ban đầu.
Biên so n: D

ng Thành Ph t

Trang 93


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

[5]-: Over Image: Hình sẽ hiển thị khi rê chuột vào
[6]-: Down Image: Hình hiển thị khi Click vào.
[7]-: Over while down Image: Ảnh sẽ hiển thị khi Click và o hì nh và rê chuột qua hình
[8]-: Alternate text : Câu chú thích khi rê chuột vào ảnh trang.
[9]-: When Click, Go to URL: Tập tin liên kết

[10]-: In: Hình thức hiện thị cho trang liên kết
3. Hiệu chỉnh thanh Navigation Bar
Khi đã tạo một thanh điều hướng, có thể bổ sung hoặc xóa các ảnh ở các trạng thái.
•

Chọn Modify / Navigation Bar.

•

Trên danh sách Nav Bar Elements, chọn phần tử mà muốn chỉnh sửa.

•

Thao tác hiệu chỉnh xong, click chọn OK.

IV. Bổ sung Rollover
1. Khái quát
Rollover là một behavior làm cho hình ảnh bị thay đổi bởi một hình ảnh khác khi con
trỏ chuột di chuyển lên phía trên nó. Thông thường người sử dụng sẽ nhận biết được rằng
một hình ảnh thay đổi chính là một liên kết đến một trang web khác.
2. Tạo ảnh Rollover
Đặt điểm chèn ở vị trí muốn chèn
Click biểu tượng Image
Image Rollover trên
thanh công cụ Common. (Hoặc trình đơn Insert/ Image Object / Rollover Image)
1
2
3
4
5

[1]-Image Name: Đặt tên.
[2]-Orignial Image: Anh gốc.
[3]-Rollover Image: Ảnh sẽ hiển thị khi rê chuột vào
[4]-Alternate text : Câu chú thích khi rê chuột vào ảnh trang.
[5]-URL: Tập tin liên kết
V. Tạo Bản Đồ Ảnh
1. Khái quát
Một hình ảnh với nhiều liên kết với nó sẽ tạo ra một bản đồ ảnh. Các liên kết được
gắn với các vùng khác nhau của cùng một hình ảnh bằng cách sử dụng các điểm nóng
(hotspot). Việc nhấp vào các điểm nóng sẽ đưa người sử dụng đến các liên kết tương ứng.
2. Tạo bản đồ ảnh
•

Việc trước tiên là phải chèn một ảnh cần tạo Hotspot vào trang đang thiết kế.

•

Trên thanh Insert, chọn lớp Common. Lúc này thanh Properties trên trang thiết kế
sẽ hiển thị công cụ Hotspot.

Biên so n: D

ng Thành Ph t

Trang 94


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

-


Rectangular Hotspot: tạo vùng nóng hình chữ nhật.

-

Oval Hotspot: tạo vùng nóng hình tròn hoặc Elip.

-

Polygon Hotspot: tạo vùng nóng theo cách vẽ tự do của.

Chọn một trong các công cụ vẽ này sao cho tương ứng với hình của và dùng
chuột rê, vẽ lên bức ảnh. Có thể vẽ tạo ra nhiều vùng điểm nóng trên bức ảnh.

Khai báo các thông số sau

Link: Địa chỉ của trang cần liên kết tớI
Target: Hình thức hiển thị
Alt: Câu chú thích khi rê vào liên kết.
Ghi chú: Để hủy bỏ phân vùng đã tạo: Click chọn vùng đ1o

Delete

VI. Bổ Sung Nút Flash
1. Khái quát
Đối tượng nút Flash cho phép thay đổi tùy ý và chèn một tập các nút Flash đã được
định nghĩa trước.
2. Tạo nút Flash
•


Đặt trỏ chèn tại vị trí muốn tạo nút nhấn.

•

Click vào nút Flash Button trên Common, hay
chọn lệnh Insert / Media / FlashButton

•

Hộp thoại Select File hiển thị, click chọn tìm tập tin Flash,

Biên so n: D

ng Thành Ph t

Trang 95


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Style: Chọnmẫu Nút
ButtonText: Nhập nhãn cho nút
Font: Font chữ cho nhãn
Size: Cõơ chữ nhãn
Link: URL của tập tin liên kết
Tartget: Hình thức hiển thị cho trang liên kết
BgColor: Màu nền
Save as: Vị trí lưu trữ tập tin Flash của nút
3. Chỉnh sửa các đối tượng nút Flash:
•


Chọn đối tượng nút Flash.

•

Trên Properties, hiển thị các thuộc tính của nút Flash.

•

Để thay đổi nội dung, mở hộp thoại Insert Flash Button bằng các phương pháp sau:

•

-

Click đôi vào đối tượng nút Flash

-

Click vào nút Edit trên Properties inspector.

-

Click phải lên đối tượng và chọn Edit từ trình đơn Pop-up.

Trên hộp thoại Insert Flash Button, tạo những chỉnh sửa cho đối tượng.

Biên so n: D

ng Thành Ph t

Trang 96



Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

Chương 04

THIẾT KẾ BỐ CỤC TRANG TABLE & LAYER
Thiết kế bảng biểu - Table
Thiết kế lớp - Layer
Thiết kế bố cục trang – Page Layout
I. TTHIẾT KẾ BẢNG BIỂU - TABLE
Bảng là một công cụ rất tiện lợi để sắp đặt các ảnh và các dữ liệu trên trang. Bảng
bao gồm 3 thành phần cơ bản:
Row: hàng
Column: cột
Cell: ô

1. Chèn bảng:
•

Chuyển sang chế độ Standard mode

•

Chọn biểu tượng Insert Table trên thanh công cụ Common hay Layout (hoặc chọn
menu Insert / Table) để tạo một bảng mới

•


Hộp thoại Insert Table hiển thị, nhập các giá trị vào trong hộp thoại.

•

-

Rows: Chọn số hàng cho bảng cần chèn.

-

Columns: Chọn số cột cho bảng cần chèn.

-

Width: Chọn độ rộng của cột. phần trăm (Percent) hay pixel.

-

Border: Chọn độ dày đường viền.

-

Cell Padding và Cell Spacing: Định khoảng cách đệm giữa các ô và khoảng
cách nội dung trong ô so với viền ô. Mặc định là 1 pixel và 2 pixel.

Sau khi chọn xong các giá trị thích hợp, click OK để tạo một bảng.

Biên so n: D

ng Thành Ph t


Trang 97


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

2. Thêm nội dung vào ô trong bảng:
Có thể chèn văn bản hay hình ảnh vào các ô trong bảng.
•

•

Chèn văn bản vào ô: Đặt điểm chèn vào trong ô để gõ văn bản hay có thể dán văn
bản từ một tài liệu khác.
Chèn hình ảnh vào ô: Click vào trong ô muốn chèn hình ảnh, sau đó chọn lệnh
Insert / Image hay click nút Insert Image trên Panel Objects. Chọn một file ảnh để
chèn trong hộp thoại Select Image Source.

3. Nhập dữ liệu cho bảng từ một file ngoài:
Dữ liệu được tạo từ một trình ứng dụng khác (ví dụ: Excel) và được lưu dưới định
dạng có ranh giới, có thể import vào trong Dreamweaver MX. Để nhập dữ liệu cho bảng từ
một file ngoài. thực hiện:
•

Chọn menu Insert / Table Object / Import Tabular Data

•

Hộp thoại Import Tabular Data hiển thị


-

Data File: Chọn tập tin dữ liệu cần chèn thành bảng vào tài liệu.

-

Delimter: Chọn kiểu định dạng của dữ liệu phân cách được nhập vào.

-

Format Top Row: Chọn định dạng cho hàng trên cùng.

4. Định Dạng Các Phần Tử Trong Bảng
a. Định dạng cell:
Có thể canh chỉnh nội dung, thiết lập chiều cao, rộng, màu nền . . . cho cell bằng sử
dụng Properties
•

Click vào biên của cell hay giữ phím Ctrl và click vào bên trong cell để chọn cell.

•

Các thuộc tính của cell hiện trên Properties, có thể chọn và thay đổi các thuộc tính:
-

Thay đổi chiều rộng của cell: Nhập số pixel vào Width hay chọn Autostretch.

-


Thay đổi chiều cao của cell: Nhập số pixel vào ô Height.

-

Chọn màu nền cho cell: click Vào ô Bg và chọn 1 màu trong bảng chọn màu.

-

Canh chỉnh nội dung của cell: Click chọn trong menu Horz và Vert.

-

Nếu bật tùy chọn No Wrap, cell sẽ tự động nới rộng để chứa tạo nội dung.

b. Điều chỉnh kích thước:
•

Điều chỉnh bằng tay: Click lên biên để chọn cell, khi đường biên cell xuất hiện các
handle, rê các handle để định lại kích thước của cell.

Biên so n: D

ng Thành Ph t

Trang 98


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

c. Định dạng table:

Có thể thay đổi kích thước, khoảng cách giữa các cell . . . của table.
•

Click tab table hay click lên biên của table để chọn nó.

•

Chọn Window / Properties để mở Properties nếu nó chưa hiển thị.

-

Điều chỉnh kích thước table: Nhập số pixel vào Width, Height, Autostretch.

-

Điều chỉnh khoảng trống ở viền trong của cell: Nhập số pixel vào ô CellPad.

-

Điều chỉnh khoảng trống ở viền quanh cell: Nhập số pixel vào ô CellSpace

d. Sử Dụng Mẫu Để Định Dạng Bảng
Sử dụng lệnh Format Table từ trình đơn Table cho phép định dạng bảng một cách
nhanh chóng bằng việc áp dụng các khuôn mẫu có sẵn.
•

Click chọn bảng và chọn menu Commands / Format table . . .

•


Hộp thoại Format Table hiển thị

Chọn một mẫu trong khung danh sách bên trái và mẫu sẽ hiển thị cho xem bên phải
•

Nhấn Apply để xem trước hiển thị trên trang thiết kế, nếu chấp nhận click OK.

II THIẾT KẾ LỚP - LAYER
1. Khái quát
Lớp là một phần tử rất linh động trên các trang web, có thể: di chuyển, Làm cho
chúng trở nên không thấy được, Được đặt bất kỳ nơi nào: Đặt phía trên một bảng. . . .
Dreamweaver MX cho phép tạo các layer trên trang một cách dễ dàng và chính xác.
Có thể vẽ layer trên trang, chèn layer bằng trình đơn, hay rê nó vào trang.

Biên so n: D

ng Thành Ph t

Trang 99


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

2. Tạo mới Layer
Để tạo layer, có thể thực hiện các thao tác sau:
•

Click chọn nút Draw Layer trên panel Object
Rê chuột và vẽ layer trên trang. Để vẽ một lúc nhiều layer thì giữ Ctrl trong lúc vẽ


•

Đặt điểm chèn tại vị trí muốn tạo layer, chọn menu Insert / Layout Object/ Layer.

•

Nếu muốn các layer không chồng lên nhau thì khi tạo chúng chọn menu Modify /
Arrange / Prevent Layer Overlaps

3. Sử dụng Panel Layer:
Panel layer là công cụ để quản lý các layer trong tài liệu.
•

Để mở panel Layer, chọn menu Window / Layer hoặc nhấn phím F2.
Tất cả các Layer trong panel layer được hiển thị theo thứ tự. Click vào biểu tượng
để ẩn hoặc hiện các layer.

4. Tạo các layer lồng nhau:
•

•

Layer lồng nhau là layer được tạo bên trong một layer khác. Việc lồng ghép các
layer thường được sử dụng để gộp nhóm các layer lại với nhau. Layer con di
chuyển cùng với layer cha, thuộc tính hiển thị có thể được kế thừa từ layer cha.
Nếu muốn các layer tự động lồng ghép nhau, khi vẽ chúng trên trang chọn menu Edit
/ Preferences, chọn Layer và đánh dấu chọn hộp kiểm Nesting.

Để tạo layer lồng nhau:
•


Đặt điểm chèn vào trong 1 layer và chọn menu Insert / Layer (Hay Rê nút Draw
Layer từ panel Object và thả vào một layer đang tồn tại.)

•

Nếu mục Nesting không được chọn trong các tham chiếu layer, thì phải nhấn Alt
trong khi vẽ để tạo các layer lồng vào nhau.

Biên so n: D

ng Thành Ph t

Trang 100


Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

5. Thuộc Tính Hiển Thị Layer
Thay đổi thứ tự sắp xếp của các layer dùng panel layer.
•

Chọn menu Windows / Layer hoặc nhấn phím F2

•

Hộp panel Layer hiển thị, kéo tên layer lên hay xuống theo thứ tự sắp xếp.

•


Trên cột Z, click số chỉ thứ tự sắp xếp của layer đang thay đổi. Nhập số mới để thay
đổi thứ tự sắp xếp tương ứng cho layer.

Sử dụng Properties để thay đổi thứ tự sắp xếp layer:
•

Click chọn layer trong panel Layer hoặc trong cửa sổ tài liệu.

•

Trên Properties, nhập 1 số vào trường Z-index để xác định thứ tự sắp xếp.

Thay đổi thuộc tính hiển thị cho các layer:
•

Mở panel Layer

•

Click vào biểu tượng

con mắt để trước tên layer muốn ẩn hay hiển thị.

o

Biểu tượng mắt mở

o

Biểu tượng mắt nhắm


: Layer đang được hiển thị.
: layer được ẩn.

•

Không có biểu tượng trước tên layer: Layer kế thừa thuộc tính này từ layer cha

•

Để thay đổi tính hiển thị của tất cả các layer cùng một lúc click vào biểu tượng con
mắt
trên thanh header ở trên cùng.

6. Thay ĐổI Table Và Layer
Thay vì sử dụng các cell (ô) và table (bảng) trong chế độ layout để tạo bố cục cho trang,
một vài người thích làm việc với các layer hơn.Dreamweaver MX cho phép tạo layer sau đó
cho phép chuyển chúng thành các table. Có thể chuyển đổi qua lại giữa các layer và table.
a. Chuyển đổi giữa các layer và table:
•

Chọn Modify / Convert / Layer to Tables

•

Hộp thoại Convert Layers to Table hiển thị

Biên so n: D

ng Thành Ph t

Trang 101



Bài Gi ng Môn Thi t K Web

Ph n 4: MacroMedia DreamWeaver

o

Most Accurate: Tạo 1 cell cho mọi layer, bổ sung bất kỳ ô nào cảm thấy cần thiết để
giữ khoảng trống giữa các layer.

o

Smallest: Collapse Empty Cells: Chỉ định lề của các layer được sắp xếp với số pixel
được chỉ định.

o

Use Transparent GIFs: Điền đầy hàng cuối cùng của bảng bằng các ảnh GIF trong
suốt Mục này đảm bảo table được hiển thị với cùng độ rộng cột trên mọi trình duyệt.
Khi mục này được chọn, không thể chỉnh sửa bảng nhận được bằng cách rê các cột
của nó.

o

Center on Page: Canh table vào giữa trang. Nếu mục này không được chọn, table
sẽ được gióng hàng bên trái.

o


Prevent Layer Overlaps: Click chọn mục này để chống sự chồng lấp của các layer.

o

Show Layers Panel: Hiển thị layer panel.

o

Show Grid: Hiển thị lưới.

o

Snap To Grid: Bật/Tắt chức năng bắt dính với lưới.

b. Chuyển đổi table thành layer:
•

Chọn Modify / Convert / Table to Layers

•

Hộp thoại Convert Tables to Layers hiển thị

•

Xác định các tùy chọn trong hộp thoại:
-

Prevent Layer Overlaps: Khống chế vị trí của các layer khi chúng được tạo,
di chuyển và định lại vị trí, kích thước để chúng không bị phủ lấp lên nhau


-

Các tính năng còn lại tương tự như trong phần chuyển từ layer thành table.

III. THIẾT KẾ BỐ CỤC TRANG - PAGE LAYOUT
1. Khái quát
Page Layout là 1 phần quan trọng trong thiết kế trang web. Chỉ cách thức trình bày
nội dung trên trang web.
Dreamweaver MX có nhiều cách khác nhau để tạo page layout. Một phương pháp
chung là sử dụng các table..
Biên so n: D

ng Thành Ph t

Trang 102