Designing websites in dreamweaver cs5

Thiết kế Website trong
Dreamweaver CS5

Thiết kế Website trong
Dreamweaver CS5
© 2014 Aptech Limited
Mọi quyền được bảo lưu.
Không có phần nào của cuốn sách này có thể được sao chép hoặc sao chép dưới mọi hình thức hoặc
bằng bất kỳ phương tiện nào – đồ họa, điện tử hoặc cơ khí, bao gồm cả photocopy, ghi âm, ghi hình,
hoặc lưu trữ trong hệ thống thông tin hoặc gửi hoặc truyền đi mà không có sự cho phép trước bằng
văn bản của chủ sở hữu quyền tác giả Aptech Limited.
Mọi nhãn hiệu thương mại đã được công nhận.
APTECH LIMITED
E-mail: ov-support@onlinevarsity.com
Ấn bản đầu tiên - 2014

Học viên thân mến,
Chúng tôi xin chúc mừng về quyết định của bạn theo đuổi một khóa học của Aptech
Worldwide.
Aptech Ltd. thiết kế các khóa học bằng một mô hình thiết kế hướng dẫn đúng đắn – từ khái
niệm hóa đến thực thi, kết hợp các khía cạnh chính sau:
¾¾ Dò quét hệ thống người dùng và đánh giá nhu cầu
Đánh giá nhu cầu được tiến hành để phát hiện nhu cầu giáo dục và đào tạo của học viên
Các xu hướng công nghệ thường xuyên được tìm hiểu và theo dõi bởi các nhóm cốt lõi ở
Aptech Ltd. TAG* phân tích các xu hướng này hàng tháng để hiểu nhu cầu đào tạo công nghệ
mới nổi cho ngành.
Một cuộc khảo sát hồ sơ tuyển dụng của ngành công nghiệp hàng năm#
được tiến hành vào
tháng 8 - tháng 10 để hiểu các công nghệ mà các ngành công nghiệp sẽ thích nghi trong 2-3
năm tới. Phân tích về những xu hướng và nhu cầu tuyển dụng này sẽ được tiến hành để hiểu
các yêu cầu kỹ năng cho các vai trò và cơ hội nghề nghiệp khác nhau.
Tiếp theo, các yêu cầu kỹ năng được đối chiếu với hồ sơ học viên (hệ thống người dùng) để
xác định các mục tiêu học tập cho các vai trò khác nhau.
¾¾ Phân tích nhu cầu và thiết kế chương trình giảng dạy
Tiếp đó, các mục tiêu học tập được phân tích và biến thành các nhiệm vụ học tập. Từng nhiệm
vụ hoặc hoạt động học tập được phân tích về kiến thức, kỹ năng và thái độ được yêu cầu
để thực hiện nhiệm vụ đó. Các giáo viên và chuyên gia trong ngành cùng hợp tác thực hiện
điều này. Sau đó những người này nhóm thành các nhóm nhỏ để xây dựng các chủ đề trong
chương trình giảng dạy.
Ngoài ra, xã hội, giáo viên, và ngành công nghiệp hy vọng một số kiến thức và kỹ năng có liên
quan đến khả năng như học tập để tìm hiểu, suy nghĩ, khả năng thích ứng, giải quyết vấn đề,
thái độ tích cực, v.v. Những năng lực này sẽ bao gồm cả hai lĩnh vực nhận thức và tình cảm.
Sơ đồ ưu tiên các chủ đề được vẽ ở nơi các điều kiện tiên quyết cho mỗi chủ đề được
minh họa. Số trình trong sơ đồ này được quyết định bởi thời lượng khóa học về mặt
số học kỳ, v.v.. Nhờ sơ đồ ưu tiên và thời lượng cho mỗi chủ đề, chương trình giảng
dạy được tổ chức hợp lý.
¾¾ Thiết kế và phát triển tài liệu hướng dẫn
Đề cương nội dung được phát triển nhờ đưa thêm vào các đề tài cần thiết để hoàn thiện lĩnh
vực và để phát triển logic các năng lực đã xác định. Chiến lược và thể thức đánh giá được

phát triển cho chủ đề. Các đề tài được sắp xếp/tổ chức theo thứ tự có ý nghĩa.
Tài liệu hướng dẫn chi tiết – Dụng cụ hỗ trợ đào tạo, tài liệu cho học viên, tài liệu tham khảo,
nguyên tắc dự án, v.v. - được phát triển sau đó. Các kiểm tra chất lượng khắt khe được thực
hiện ở mỗi giai đoạn.
¾¾ Các chiến lược cung cấp hướng dẫn
Sự phát triển toàn vẹn các khả năng như tư duy, giải quyết vấn đề, nhận thức học tập, v.v.
được cân nhắc cẩn thận bằng cách chọn các chiến lược hướng dẫn thích hợp (phương pháp
luận đào tạo), hoạt động hướng dẫn và tài liệu hướng dẫn.
Lĩnh vực CNTT đang thay đổi nhanh chóng và không rõ ràng. Do đó, sự linh hoạt to lớn được
cung cấp trong quá trình giảng dạy bằng cách đặc biệt đưa vào các hoạt động sáng tạo với
sự tương tác nhóm giữa các sinh viên và giảng viên. Các khía cạnh tích cực của thông tin học
tập – tiếp thu dựa trên web, tổ chức thông tin và hành động trên cơ sở thông tin không đầy đủ
là một số khía cạnh được kết hợp, trong quá trình giảng dạy.
¾¾ Đánh giá học tập
Học tập được đánh giá thông qua nhiều hình thức – kiểm tra, bài tập lớn và dự án. Hệ thống
đánh giá được thiết kế nhằm đánh giá trình độ kiến thức và kỹ năng như các mục tiêu học tập
đã xác định.
¾¾ Đánh giá quá trình hướng dẫn và tài liệu hướng dẫn
Quá trình hướng dẫn được hỗ trợ bởi một hệ thống giám sát tỉ mỉ để đánh giá - về nộp bài
đúng hạn, hiểu học phần chủ đề, khả năng truyền đạt của người hướng dẫn. Là một phần
toàn vẹn của quá trình này, chúng tôi muốn bạn gửi phản hồi của mình trong biểu mẫu trả lời
đã dán tem đính ở cuối mỗi học phần.
*TAG – Nhóm Công nghệ và Hàn lâm gồm các thành viên từ Aptech Ltd., các giáo sư từ các Viện
hàn lâm danh tiếng, các quản lý cấp cao trong ngành, các bậc thầy kỹ thuật từ các hãng phần
mềm lớn và các đại diện từ các tổ chức/diễn đàn điều hành.
Các chuyên gia đầu ngành công nghệ của Aptech Ltd. gặp nhau hàng tháng để chia sẻ và đánh
giá các xu hướng công nghệ. Nhóm gặp gỡ các đại diện của TAG ba lần một năm để đánh giá và
hợp thức hóa các định hướng công nghệ và học thuật và nỗ lực của Aptech Ltd.

Dò quét hệ
thống người
dùng và đánh giá
nhu cầu
Đánh giá các
quy trình và tài
liệu hướng dẫn
Phân tích nhu
cầu và thiết kế
chương trình
giảng dạy
Đánh giá học tập
Thiết kế và phát
triển tài liệu
hướng dẫn
Các chiến lược
cung cấp hướng
dẫn
Các chủ đề chính
Mô hình thiết kế sản phẩm mới của Aptech
1
2
3
4
5
6

“
“Ít kiến thức thật nguy hiểm,
nhưng sự ngu dốt còn nguy hiểm hơn

Cuốn sách được thiết kế để giới thiệu cho bạn về Adobe Dreamweaver CS5. Adobe Dreamweaver CS5
là một trình soạn thảo Ngôn ngữ đánh dấu siêu văn bản (HTML) chuyên nghiệp cung cấp một bộ công cụ
cho phép bạn thiết kế, viết mã, và phát triển các Website, các trang web và các ứng dụng web mạnh mẽ.
Hơn nữa, nó được sử dụng để tạo ra nội dung HTML khác nhau như là các biểu mẫu, bảng, khung, và
vân vân là những thành phần thiết yếu của các trang web. Dreamweaver cũng có thể sử dụng Cascading
Style Sheets (CSS) để áp dụng các kiểu cho trang. Bạn cũng sẽ học cách tạo ra Website động đòi hỏi
phải có kết nối đến một cơ sở dữ liệu.
Phiên bản CS5 của Dreamweaver hỗ trợ nhiều công nghệ hơn so với các phiên bản trước và do đó, tăng
cường trải nghiệm của bạn trong việc tạo ra Website động. Kiến thức và thông tin trong cuốn sách này là
kết quả của sự cố gắng tập trung của Nhóm Thiết kế, họ liên tục cố gắng đem lại cho bạn các chủ đề mới
nhất, tốt nhất và có liên quan nhất trong Công nghệ Thông tin. Là một phần trong định hướng chất lượng
của Aptech, nhóm này thực hiện cuộc nghiên cứu chuyên sâu và làm phong phú chương trình giảng dạy
để duy trì việc học đi theo đúng hướng với xu thế của ngành và các yêu cầu của học viên.
Chúng tôi sẽ rất vui khi nhận được ý kiến đóng góp của bạn.
Nhóm thiết kế
Lời nói đầu

“
“Không bao giờ là mất thời gian
nếu bạn sử dụng kinh nghiệm thông minh

Các phần
1. Bắt đầu với Dreamweaver CS5
2. Làm việc với các danh sách, bảng, liên kết và khung
3. Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ
4. Làm việc với các đối tượng đa phương tiện
5. Thử nghiệm Website
6. Làm việc với các Website động

Mục lục

“
“Học không phải là bắt buộc
nhưng đó lại là sự sống còn

Bắt đầu với Dreamweaver CS5
1
Phần
V 1.0 © Aptech Limited
Kháiniệm
Mục tiêu
Đến cuối của phần này, học viên sẽ có thể:
¾¾ Liệt kê các tính năng cơ bản và bổ sung của Dreamweaver CS5
¾¾ Nhận dạng các phần tử không gian làm việc khác nhau và chọn bố trí không gian làm việc
cho Windows
¾¾ Chèn và sửa đổi hình ảnh
¾¾ Thêm, định dạng và chỉnh sửa văn bản cho một tài liệu
¾¾ Tạo Website
1.1 Giới thiệu
Adobe Dreamweaver CS5 là một trình soạn thảo Ngôn ngữ đánh dấu siêu văn bản (HTML) chuyên
nghiệp và cung cấp một bộ công cụ cho phép bạn thiết kế, viết mã, và phát triển các Website, các trang
web và các ứng dụng web mạnh mẽ. Dreamweaver CS5 hỗ trợ nhiều công nghệ hơn so với các phiên
bản trước của Dreamweaver và nâng cao trải nghiệm của bạn trong việc tạo ra Website.
Với Dreamweaver CS5, bây giờ bạn có thể làm việc với một môi trường toàn diện hơn cho việc thiết kế
Website. Dreamweaver CS5 đã đơn giản hóa cả nhiệm vụ phát triển front-end cũng như back-end để
cho phép tạo ra các trang web dễ dàng hơn so với trước đây. Dreamweaver có một số công cụ tích hợp
trong giao diện của nó, loại bỏ nhu cầu phải sử dụng các công cụ dựa trên trình duyệt của bên thứ ba.
Dreamweaver CS5 còn cho phép các nhà phát triển tương tác trực tiếp với các ứng dụng theo hướng cơ
sở dữ liệu và các phần tử giao diện Ajax.
Dreamweaver CS5 cung cấp môi trường cho HTML viết mã bằng tay cũng như chỉnh sửa trực quan.
Bằng cách sử dụng môi trường chỉnh sửa trực quan trong Dreamweaver CS5, bạn có thể:
¾¾ Tạo ra các trang web mà không cần viết một dòng mã nào.
¾¾ Xem tất cả các phần tử và tài nguyên của Website, như là các hình ảnh và âm thanh.
¾¾ Kéo các tài nguyên từ một bảng điều khiển dễ sử dụng trực tiếp vào một tài liệu.
¾¾ Chuyển nhập các hình ảnh đã được tạo ra và chỉnh sửa trong các ứng dụng khác, như là
Macromedia Fireworks.
¾¾ Thêm các đối tượng Adobe Flash.

Phần 1
Kháiniệm
Dreamweaver CS5 cung cấp các công cụ chỉnh sửa mã, như tô màu mã và hoàn thiện thẻ, tài liệu tham
khảo về HTML, Cascading Style Sheets (CSS), JavaScript, Active Server Pages (ASP), Java Server
Pages (JSP), và JavaScript Debugger. Với Dreamweaver CS5, bạn có thể tạo ra các trang động truy
cập và hiển thị thông tin từ các nguồn nội dung động, như là các biến phiên và cơ sở dữ liệu. Nó còn hỗ
trợ phát triển trang động sử dụng các ngôn ngữ máy chủ, như là ColdFusion, ASP, ASP.NET, JSP, và
Hypertext Preprocessor (PHP).
Dreamweaver CS5 giúp bạn tạo ra các trang động hiển thị và xử lý dữ liệu Extensible Markup Language
(XML) sử dụng khuôn khổ dựa trên Ajax được gọi là Spry. Bạn có thể sử dụng các phần tử biểu mẫu Spry
dựng sẵn để xây dựng các trang động có chức năng làm mới một phần các phần tử cụ thể và không yêu
cầu làm mới toàn bộ trang.
Dreamweaver CS5 có thể tùy chỉnh. Do đó, nó cung cấp các lựa chọn cho phép bạn tạo các đối tượng và
lệnh của riêng bạn, sửa đổi phím tắt và mở rộng khả năng của Dreamweaver CS5 với các hành vi mới,
trình kiểm tra thuộc tính, và báo cáo Website bằng cách viết mã JavaScript.
Trong phần này, bạn sẽ tìm hiểu kiến thức cơ bản cũng như các tính năng bổ sung củaAdobe Dreamweaver
CS5. Bạn cũng sẽ tìm hiểu về các phần tử không gian làm việc khác nhau và cách chọn bố trí không gian
làm việc. Ngoài ra, bạn sẽ tìm hiểu cách chèn và sửa đổi ảnh, thêm văn bản vào một tài liệu, và định dạng
và chỉnh sửa văn bản. Cuối cùng, phần này cũng sẽ cho phép bạn tạo ra một Website. Bảng 1.1 liệt kê
các yêu cầu hệ thống cho Adobe Dreamweaver CS5.
Hệ điều hành Windows
Bộ xử lý Intel Pentium 4, Intel Centrino, Intel Xeon, hoặc Intel Core Duo (hoặc tương thích)
Microsoft Windows XP với Service Pack 2 (nên sử dụng Service Pack 3) hoặc Windows Vista Home
Premium, Business, Ultimate, hay Enterprise (SP1) (được chứng nhận cho các phiên bản 32 bit), hoặc
Windows 7
RAM 512 MB
1 GB dung lượng đĩa cứng có sẵn (dung lượng trống khác trong quá trình cài đặt). Không thể cài đặt
trên các thiết bị sử dụng flash rời.
Màn hình độ phân giải 1280x800 với card màn hình 16-bit
Ổ đĩa DVD-ROM
Bảng 1.1: Yêu cầu hệ thống
1.2 Các tính năng của Dreamweaver CS5
Các tính năng chung của Dreamweaver CS5 được mô tả trong phần này.
1.2.1 Không gian làm việc tích hợp
Với không gian làm việc tích hợp cung cấp các cửa sổ tài liệu theo tab, các nhóm bảng điều khiển có thể
neo, thanh công cụ tùy chỉnh, và duyệt tập tin tích hợp, bây giờ bạn có thể tiết kiệm thời gian phát triển
quý giá.

Phần 1
Kháiniệm
1.2.2 Mẫu mạnh mẽ
Mẫu lồng nhau có sẵn, cho phép bạn tạo ra kiểm soát bố trí tùy chỉnh. Vì vậy, bạn có thể nhập nội dung
mà không ảnh hưởng đến thiết kế Website.
1.2.3 Quản lý tài nguyên và thư viện
Bằng cách sử dụng các thư viện mã dựng sẵn, bạn có thể tạo ra phần chèn cơ sở dữ liệu và còn cập
nhật các biểu mẫu, các trang điều hướng bộ bản ghi, và các trang xác thực người dùng.
1.2.4 Hỗ trợ công nghệ máy chủ
Dreamweaver CS5 hỗ trợ cho việc xây dựng các Website ColdFusion MX, ASP.NET, và PHP và các ứng
dụng ASP, ASP.NET, JSP và ColdFusion cũ để lại.
Để tạo ra các trang web động sử dụng ColdFusion, bạn cần phải tạo nguồn dữ liệu ColdFusion. Bạn có
thể tạo hoặc sửa đổi nguồn dữ liệu ColdFusion trực tiếp trong Dreamweaver CS5, miễn là bạn sử dụng
ColdFusion MX 7.0 hoặc phiên bản cao hơn. Tuy nhiên, để tạo ra hoặc sửa đổi các nguồn dữ liệu trong
khi sử dụng ColdFusion MX, bạn cần phải sử dụng ColdFusion MX Administrator, đó là giao diện quản lý
của máy chủ. Bạn cũng có thể mở ColdFusion MX Administrator trong chính Dreamweaver CS5.
1.2.5 XML, XSTL và sự hỗ trợ các tiêu chuẩn web
Sự hỗ trợ XML, bao gồm chỉnh sửa, xác thực, và nhập khẩu các lược đồ, đảm bảo tuân thủ tiêu chuẩn.
Nó cũng tạo ra Ngôn ngữ đánh dấu siêu văn bản mở rộng (XHTML) được đưa ra theo mặc định, cung
cấp cơ chế chuyển đổi dễ dàng từ HTML tiêu chuẩn sang XHTML.
1.2.6 Tạo các trang với CSS
Dreamweaver CS5 còn tăng cường sử dụng tái tạo CSS và các công cụ thiết kế để bạn có thể xây dựng
các Website phù hợp với các tiêu chuẩn CSS mới nhất.
1.2.7 Các tính năng viết mã có sức mạnh cao
Với Dreamweaver CS5, bạn có thể truy cập nhiều tính năng viết mã có sức mạnh cao như Gợi ý mã,
trình soạn thảo thẻ, mã hóa màu mở rộng, trình chọn thẻ, đoạn mã nhỏ, và xác thực mã. Sử dụng các
tính năng này, bạn có thể viết mã riêng của bạn nhanh hơn bao giờ hết.

Phần 1
Kháiniệm
1.2.8 Khả năng tiếp cận
Với sự sẵn có của các công cụ khác nhau trong Dreamweaver CS5, nó giúp trong việc xây dựng các
trang web có thể truy cập cho người khuyết tật. Vì vậy, bây giờ bạn có thể tạo ra các trang web có thể
truy cập được với các đối tượng rộng hơn.
1.2.9 Bảng Snippets
Trong Dreamweaver CS5, bạn không cần phải thêm cùng một mã lặp lại. Với bảng Snippets mới, bạn có
thể lưu trữ các đoạn mã cho HTML, JavaScript, CSS, vân vân, và tái sử dụng khi cần thiết. Ngoài ra, bạn
có thể chia sẻ các đoạn mã với người dùng khác và quản lý các đoạn mã tái sử dụng. Dreamweaver CS5
còn cung cấp một số đoạn mã được xác định trước bạn có thể sử dụng như là một điểm bắt đầu.
1.2.10 Trang web động
Với Dreamweaver CS5, bây giờ bạn có thể xây dựng các trang web động để thêm, xóa, và xem thông
tin cơ sở dữ liệu. Để xây dựng các trang web động, bạn cần phải cài đặt một máy chủ ứng dụng web và
kết nối đến một cơ sở dữ liệu cho các ứng dụng ColdFusion, ASP, ASP.NET, JSP, và PHP. Dựa trên công
nghệ máy chủ của bạn, Dreamweaver CS5 xử lý các kết nối cơ sở dữ liệu khác nhau.
1.2.11 Làm việc với các ứng dụng khác
Dreamweaver CS5 được tích hợp với các ứng dụng khác nhau, như là Fireworks, Photoshop, Flash,
Adobe Bridge, và Device Central. Sự tích hợp này cho phép bạn làm việc với các tài nguyên khác nhau
trong khi tạo ra các trang web.
1.3 Các tính năng của Dreamweaver CS5
Adobe Dreamweaver CS5 được đi kèm với một số tính năng mới cung cấp một môi trường phát triển
linh hoạt cho người dùng để thiết kế Website. Một số tính năng mới của Dreamweaver CS5 sẽ rất hữu
ích cho các nhà phát triển web, những người thường làm việc trong môi trường tập trung vào mã. Một
số tính năng mới được giới thiệu trong Dreamweaver CS5 được mô tả.
1.3.1 Tích hợp với Adobe BrowserLab
Bây giờ có thể thử nghiệm khả năng tương thích các trình duyệt khác nhau với Dreamweaver CS5 được
tích hợp với Adobe BrowserLab. BrowserLab cho phép bạn xem trang trong nhiều trình duyệt. Bạn cũng
có thể tùy chỉnh trình duyệt theo yêu cầu của bạn và xem trước trang.
1.3.2 Adobe Business Catalyst Integration
Với Business Catalyst Integration trong Dreamweaver CS5, bạn có thể dễ dàng đăng nhập vào các
Website khách hàng của bạn và thực hiện các thay đổi phù hợp khi có yêu cầu.

Phần 1
Kháiniệm
1.3.3 Kích hoạt/vô hiệu hóa CSS
Bạn có thể vô hiệu hóa hoặc kích hoạt các thuộc tính CSS trực tiếp từ bảng CSS Styles. Việc vô hiệu hóa
thuộc tính CSS không xóa thuộc tính này, nhưng tạo ghi chú cho thuộc tính.
1.3.4 Các công cụ kiểm tra CSS nâng cao
Dreamweaver CS5 tách xem mã HTML ra khỏi xem nội dung thực tế. Tuy nhiên, nó cho phép bạn tự do
chuyển đổi giữa các giao diện khác nhau và các trang và sửa đổi chúng theo thời gian thực. Với khả
năng của các công cụ CSS nâng cao và Live View, bạn có thể chỉnh sửa trang web và xem trước nó cùng
một lúc. Trong các phiên bản trước của Dreamweaver, nhiệm vụ nhận dạng trực quan các phần tử trang
rất tẻ nhạt. Bạn cần các công cụ dựa trên trình duyệt bên ngoài cho nhiệm vụ này. Tuy nhiên, với lệnh
Inspect và Live View trong Dreamweaver CS5 sẽ đơn giản hoá nhiệm vụ này cho bạn.
1.3.5 Bố trí CSS Starter nâng cao
Cấu trúc tổng thể của tài liệu đã được nâng cao. Ngoài ra, bộ chọn hậu duệ đã được thay thế bằng các
lớp. Với cách bố trí CSS mới, bạn có thể thiết kế tài liệu của mình một cách dễ dàng hơn và tương đối
nhanh hơn.
1.3.6 Tập tin liên kết động
Tính năng này của Dreamweaver CS5 cho phép bạn xem cách một trang web được tạo ra trong Hệ
thống quản lý nội dung (CMS)dựa trên PHP của bên thứ ba sẽ xem xét khi cuối cùng nó được công bố.
Dreamweaver còn cho phép bạn lọc các loại tập tin hoặc sử dụng biểu thức ký tự đại diện để chỉnh sửa
các tập tin theo lựa chọn của bạn.
1.3.7 Điều hướng Live View
Tính năng này đã được giới thiệu trong Dreamweaver CS4, trong khi CS5 làm cho nó nâng cao hơn. Bạn
có thể xem một trang được tái tạo và truy cập vào các liên kết có sẵn trên trang đó. Bạn có thể truy cập
vào các liên kết và tương tác với các ứng dụng phía máy chủ. Trong trường hợp có bất kỳ thay đổi nào
về mã, Live Code nhấn mạnh những thay đổi này. Điều này làm đơn giản hóa việc định vị các thay đổi
mã được kích hoạt bởi JavaScript.
1.3.8 Gợi ý mã lớp tùy chỉnh PHP
Gợi ý mã lớp tùy chỉnh PHP hiển thị cú pháp thích hợp cho các hàm, đối tượng và hằng số PHP. Điều
này giúp người dùng nhập mã chính xác hơn. Gợi ý mã còn hoạt động với các hàm và lớp tùy chỉnh riêng
của bạn, cũng như các khuôn khổ của bên thứ ba, như là Zend framework.

Phần 1
Kháiniệm
1.3.9 Thiết lập Website đơn giản
Dreamweaver CS5 có một hộp thoại Site Definition (Định nghĩa Website) nâng cao cho phép bạn chỉ ra
tất cả các chi tiết bắt buộc để thiết lập Website.
1.3.10 Gợi ý mã theo Website cụ thể
Bạn có thể tùy chỉnh môi trường viết mã khi làm việc với các thư viện PHP bên thứ ba và các khuôn khổ
CMS như WordPress, Joomla, và Drupal. Dreamweaver CS5 cung cấp cho bạn hộp thoại Site Specific
Code Hint (Gợi ý mã theo theo Website cụ thể) cho phép bạn tạo ra một tập tin cấu hình cần thiết để hiển
thị các gợi ý mã. Dreamweaver CS5 sử dụng tập tin cấu hình này để định vị các mã cụ thể cho Website
của bạn.
1.3.11 Tăng cường phiên bản phụ
Subversion trong Dreamweaver CS5 cho phép bạn quản lý các tập tin một cách hiệu quả hơn. Bạn có
thể di chuyển, sao chép và xóa các tập tin và đồng bộ hóa với kho Subversion (SVN). Điều này là không
thể trong các phiên bản trước đây.
1.4 Giao diện Dreamweaver CS5
Dreamweaver CS5 cung cấp các phần tử giao diện khác nhau ở dạng cửa sổ và bảng cho phép bạn
thêm và sửa đổi các phần tử khác nhau trên một trang web. Bạn có thể xem các tài liệu và các thuộc tính
đối tượng sử dụng các phần tử giao diện. Bạn cũng có thể tìm thấy một số thanh công cụ trên giao diện
cho phép bạn làm việc với tài liệu của mình. Những phần tử giao diện này còn giúp xây dựng các style
sheet để tạo các trang web.
Trong Windows, Dreamweaver CS5 cung cấp một bố trí tích hợp tất cả trong một cửa sổ, nơi bạn sẽ tìm
thấy tất cả các cửa sổ và bảng điều khiển được tích hợp vào chỉ một cửa sổ ứng dụng lớn hơn.
Một số các phần tử giao diện thường được sử dụng như sau:
¾¾ Thanh ứng dụng
¾¾ Thanh công cụ tài liệu
¾¾ Cửa sổ tài liệu
¾¾ Bộ chuyển không gian làm việc
¾¾ Các nhóm bảng điều khiển
¾¾ CS Live

Phần 1
Kháiniệm
¾¾ Bộ chọn thẻ
¾¾ Property Inspector
¾¾ Bảng điều khiển các tập tin
Xem hình 1.1.
Hình 1.1: Giao diện của Dreamweaver CS5
1.4.1 Lựa chọn bố trí không gian làm việc
Để chọn bố trí không gian làm việc, bạn cần phải bấm vào menu Window và sau đó, bấm vào Workspace
Layout. Chọn bất kỳ bố trí không gian làm việc sau đây dựa trên các yêu cầu của bạn:
¾¾ App Developer: Các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo
phía bên trái của màn hình. Ngoài ra, nó còn hiển thị Design/Code tách riêng.

Phần 1
Kháiniệm
Theo mặc định, Property Inspector không được hiển thị.
¾¾ App Developer Plus: Không gian làm việc App Developer Plus hiển thị giao diện Design/Code
tách riêng với các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo
bên trái và bên phải của màn hình. Ở đây bạn sẽ thấy Property Inspector được hiển thị ở phía
dưới.
¾¾ Classic: Giao diện Classic hiển thị thanh Insert chạy ngang dọc theo phía trên của cửa sổ
Document.
¾¾ Coder: Không gian làm việc này cũng giống như bố trí không gian làm việc Designer. Sự khác
biệt duy nhất là các nhóm bảng điều khiển được neo ở bên trái, thay vì bên phải. Trong cách bố
trí này, cửa sổ Document hiển thị giao diện Code theo mặc định.
Ghi chú: Bạn có thể neo các nhóm bảng điều khiển ở một trong hai bên của không gian làm việc
trong bố trí không gian làm việc cả Designer và Coder.
¾¾ Coder Plus: Các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo bên
trái và bên phải. Chủ yếu bảng điều khiển Files ở bên phải và Insert ở bên phải. Insert, CSS
style, Adobe Bridge, và AP Elements ở phía bên phải. Trong khi nó loại bỏ Property Inspector
ra khỏi giao diện mặc định.
¾¾ Designer: Không gian làm việc này sử dụng Giao diện đa tài liệu (MDI). Trong không gian làm
việc này, tất cả các cửa sổ tài liệu và bảng điều khiển được tích hợp vào một cửa sổ ứng dụng
lớn hơn. Tất cả các nhóm bảng điều khiển trong bố trí này được neo ở bên phải.
¾¾ Designer Compact: Các bảng điều khiển phát triển ứng dụng phổ biến nhất - Files, Insert, CSS
Style, Adobe Bridge, AP Elements, và Asset panel được mở rộng dọc theo bên trái. Property
Inspector có mặt ở phía dưới. Giao diện là dạng tách rời (cửa sổ viết mã và thiết kế).
¾¾ Dual Screen: Bạn sử dụng bố trí không gian làm việc này khi bạn sử dụng một màn hình phụ.
Khi bạn sử dụng bố trí này, cửa sổ Document và Property Inspector được hiển thị trên màn
hình chính. Tất cả các bảng điều khiển khác được hiển thị trên màn hình phụ.
1.5 Các phần tử không gian làm việc của Dreamweaver CS5
Không gian làm việc của Dreamweaver CS5 cho phép bạn xem các tài liệu và thuộc tính đối tượng. Bạn
cũng có thể nâng cao tốc độ làm việc với Dreamweaver CS5 bằng cách sử dụng các tùy chọn được cung
cấp trong thanh công cụ.
1.5.1 Màn hình Chào mừng
Khi bạn khởi động Dreamweaver CS5, màn hình Chào mừng sẽ được hiển thị.

Phần 1
Kháiniệm
Màn hình này cung cấp các tùy chọn như sau:
¾¾ Open a Recent Item: Sử dụng tùy chọn này để mở một tập tin gần đây.
¾¾ Create New: Sử dụng tùy chọn này để tạo một tài liệu mới.
¾¾ Dreamweaver CS5 Site: Sử dụng tùy chọn này để tạo một Website mới.
¾¾ Top Features (Videos): Sử dụng tùy chọn này để xem video và tìm hiểu thêm về các tính năng
mới của Dreamweaver CS5.
¾¾ Getting Started: Các tùy chọn trong phần này cho phép bạn duyệt qua trợ giúp và lời khuyên về
cách chương trình này hoạt động.
Các tùy chọn được trình bày trong hình 1.2.
Hình 1.2: Màn hình Chào mừng

Phần 1
Kháiniệm
1.5.2 Thanh ứng dụng
Thanh ứng dụng nằm trên cùng của cửa sổ ứng dụng Dreamweaver CS5. Thanh ứng dụng có chứa các
menu khác nhau như được trình bày trong hình 1.3. Những menu này cung cấp cho bạn các lệnh khác
nhau giúp bạn làm việc với tài liệu của bạn.
Hình 1.3: Thanh ứng dụng
1.5.3 Cửa sổ Tài liệu
Cửa sổ Document hiển thị một trang hoặc nhiều trang web mà bạn đang làm việc. Đây là nơi bạn sẽ
thêm văn bản, đồ họa, âm thanh, và các phần tử khác vào trang web của bạn. Cửa sổ này hiển thị các
tài liệu mà bạn đang làm việc, hoặc là các cửa sổ kẻ bảng hoặc cửa sổ trôi nổi. Cửa sổ kẻ bảng được
hiển thị khi các trang hoặc các tài liệu được tối đa hóa. Tuy nhiên, khi các trang hoặc tài liệu được giảm
thiểu, chúng được hiển thị ở dạng trôi nổi. Có nhiều giao diện khác nhau trong đó bạn có thể chọn công
việc trên một tài liệu. Đó là:
¾¾ Giao diện Design: Trong giao diện Design, bạn sẽ thấy giao diện là một phần trình bày hoàn
toàn có thể chỉnh sửa và trực quan của tài liệu, tương tự như những gì bạn thấy khi xem trang đó
trong trình duyệt. Để chuyển sang giao diện Design, trên menu View, bấm vào lệnh Design hoặc
nhấn vào nút Design từ thanh công cụ Document. Xem hình 1.4.
Hình 1.4: Giao diện Design

Phần 1
Kháiniệm
¾¾ Giao diện Code: Trong giao diện Code, bạn có thể viết và chỉnh sửa HTML, JavaScript, mã ngôn
ngữ máy chủ, và bất kỳ loại mã nào khác. Để chuyển sang giao diện Code, trên menu View, bấm
vào lệnh Code hoặc bạn cũng có thể nhấn vào nút Code từ tab Document. Xem hình 1.5.
Hình 1.5: Giao diện Code
¾¾ Giao diện Code and Design: Trong giao diện Code và Design, bạn có thể thấy giao diện Code
và giao diện Design cho cùng một tài liệu trong một cửa sổ đơn lẻ. Để chuyển sang giao diện
Code and Design, trên menu View, bấm vào lệnh Code and Design. Ngoài ra, bạn cũng có thể
bấm vào nút Split từ thanh công cụ Document để chuyển sang giao diện Code and Design như
được trình bày trong hình 1.6.

Phần 1
Kháiniệm
Hình 1.6: Giao diện Code and Design
¾¾ Giao diện Split Code: Giao diện Code được chia thành các phần khác nhau, do đó bạn có thể
làm việc trên các phần khác nhau của tài liệu cùng một lúc. Để chuyển sang giao diện Split
Code, trên menu View, bạn có thể bấm vào Split Code.

Phần 1
Kháiniệm
Xem hình 1.7.
Hình 1.7: Giao diện Split Code
¾¾ Giao diện Live: Trong giao diện Live, bạn có thể xem tài liệu của bạn chính xác như nó sẽ xuất
hiện trong trình duyệt. Giao diện Live tương tự như giao diện Design theo nghĩa này. Tuy nhiên,
bạn không thể chỉnh sửa tài liệu trong giao diện Live. Để chỉnh sửa tài liệu, bạn sẽ phải chỉnh
sửa nó trong giao diện Code và sau đó làm mới giao diện Live để xem các thay đổi.

Phần 1
Kháiniệm
Xem hình 1.8.
Hình 1.8: Giao diện Live
¾¾ Giao diện Live Code: Giao diện này chỉ có sẵn khi bạn xem tài liệu với giao diện Live. Trong
giao diện Live, bạn có thể xem mã thực tế một trình duyệt sử dụng để thực thi trang web, và có
thể tự động thay đổi khi bạn tương tác với trang này với giao diện Live. Bạn không thể chỉnh sửa
tài liệu trong giao diện Live Code.

Phần 1
Kháiniệm
Hình 1.9: Giao diện Live Code
Xem hình 1.9. Theo mặc định, cửa sổ Document là tối đa. Trong giao diện mặc định này, các tab xuất
hiện ở trên cùng của cửa sổ Document hiển thị tên tập tin của tất cả các tài liệu đang mở. Để chuyển
sang một tài liệu, bạn bấm vào tab tương ứng của nó. Nếu tập tin không được lưu sau khi thực hiện các
thay đổi, Dreamweaver CS5 sẽ hiển thị dấu hoa thị (*) sau tên tập tin. Bạn sẽ tìm thấy thanh công cụ
Related Files bên dưới tab của tài liệu. Thanh công cụ này sẽ hiển thị các tài liệu liên quan, như là các
tập tin CSS hay JavaScript có liên quan đến tài liệu hiện tại. Để mở một tập tin có liên quan trong cửa sổ
Document, bấm vào tên tập tin của nó trong thanh công cụ Related Files.
Ghi chú: Dreamweaver CS5 sẽ hiển thị thanh công cụ Related Files bên dưới thanh tiêu đề của tài liệu
nếu bạn đang xem các tài liệu trong các cửa sổ riêng biệt.
1.5.4 Thanh công cụ Document
Bạn có thể chuyển đổi giữa các giao diện khác nhau với sự giúp đỡ của các nút được hiển thị trên thanh
công cụ Document như được trình bày trong hình 1.10.
Hình 1.10: Thanh công cụ Document

Phần 1
Kháiniệm
Ngoài các nút Views, thanh công cụ Document chứa các nút khác như được liệt kê trong bảng 1.2.
Nút Tên nút Mô tả
CheckBrowser
Compatibility
Nút này cho phép bạn kiểm tra xem CSS có tương
thích với các trình duyệt khác nhau hay không.
CSS Inspect Mode Chế độ kiểm tra hoạt động cùng với Live View để
giúp bạn nhanh chóng xác định các phần tử HTML và
các kiểu CSS liên quan của chúng.
Preview/Debug in Browser Nút này cho phép bạn xem trước hoặc gỡ lỗi tài liệu
của bạn trong trình duyệt. Bạn có thể chọn trình duyệt
thích hợp từ menu bật lên.
Visual Aids Nút này cho phép bạn chọn các công cụ hỗ trợ trực
quan khác nhau để thiết kế trang của bạn.
Refresh Design View Nút này cho phép bạn làm mới giao diện Design cho
tài liệu của bạn khi bạn hoàn thành việc thay đổi trong
giao diện Code.
Document Title Trường này cho phép bạn chỉ ra tiêu đề tài liệu sẽ
xuất hiện trên thanh tiêu đề của trình duyệt. Trong
trường hợp, bạn đã lưu tài liệu, tên này sẽ xuất hiện
trong trường này.
File Management Nút này hiển thị menu bật lên File Management.
Nó giúp trong việc kiểm nhập và kiểm xuất các tập tin.
Bạn cũng có thể mở bảng điều khiển Files sử dụng
nút này và còn viết các ghi chú thiết kế.
Bảng 1.2: Các nút của thanh công cụ Document
1.5.5 Thanh công cụ Standard
Thanh công cụ Standard cho phép bạn thực hiện các hoạt động tiêu chuẩn từ menu File và Edit, như là
Open, Browse, Save, Cut, Copy, và Paste. Xem hình 1.11.
Hình 1.11: Thanh công cụ Standard
1.5.6 Thanh công cụ Coding
Thanh công cụ Coding chứa các nút khác nhau cho phép bạn thực hiện một số hoạt động tiêu chuẩn
trên mã của bạn.

Phần 1
Kháiniệm
Ví dụ, bạn có thể mở rộng hoặc thu gọn các phần khác nhau của đoạn mã, áp dụng hoặc loại bỏ các ghi
chú, và chèn các đoạn mã nhỏ. Xem hình 1.12.
Hình 1.12: Thanh công cụ Coding
Ghi chú: Bạn không thể thôi neo hoặc di chuyển thanh Coding. Tuy nhiên, bạn có thể ẩn nó bằng cách
nhấn vào menu View, chỉ tới Toolbars, và sau đó, nhấn vào lệnh Coding.
1.5.7 Thanh công cụ Style Rendering
Bạn có thể sử dụng thanh công cụ Style Rendering chỉ khi bạn sử dụng các style sheet phụ thuộc vào
phương tiện. Ví dụ, style sheet trong tài liệu của bạn có thể chỉ ra kích thước trang khác nhau cho các
thiết bị cầm tay phương tiện in ấn khác nhau. Trong tình huống như vậy, bạn có thể sử dụng các tùy chọn
trong thanh công cụ Style Rendering để xem trước thiết kế trong các loại phương tiện khác nhau. Thanh
công cụ này còn cho phép bạn kích hoạt hoặc vô hiệu hóa các kiểu CSS.
Theo mặc định, thanh công cụ Style Rendering được ẩn. Để hiển thị thanh công cụ, trên menu View,
trỏ tới Toolbars, và sau đó bấm vào lệnh Style Rendering. Thanh công cụ Style Rendering được hiển
thị trong hình 1.13.
Hình 1.13: Thanh công cụ Style Rendering

Phần 1
Kháiniệm
Theo mặc định, Dreamweaver hiển thị thiết kế cho loại phương tiện màn hình, đó là tái tạo thiết kế trên
một màn hình máy tính. Tuy nhiên, bạn cũng có thể xem các kiểu tái tạo loại phương tiện khác nhau
khác bằng cách nhấn vào nút tương ứng trong thanh công cụ Style Rendering, như được liệt kê trong
bảng 1.3.
Nút Tên nút Mô tả
Render Screen Media Type Hiển thị tái tạo trang trên màn hình máy tính.
Render Print Media Type Hiển thị tái tạo trang trên mảnh giấy được in.
Render Handheld Media Type Hiển thị tái tạo trang trên thiết bị cầm tay, như là điện
thoại di động hoặc thiết bị BlackBerry.
Render Projection Media Type Hiển thị tái tạo trang trên thiết bị chiếu.
Render Teletype (TTY) Media Type Hiển thị tái tạo trang trên máy chữ điện báo.
Render TV Media Type Hiển thị tái tạo trang trên màn hình tivi.
Toggle Displaying Of CSS Styles Cho phép bạn kích hoạt hoặc vô hiệu hóa các kiểu
CSS. Chức năng của nút này độc lập với các nút khác
có sẵn để tái tạo loại phương tiện khác nhau.
Các style sheet Design-time Cho phép bạn chỉ ra style sheet Design-time.
Bảng 1.3: Các nút trong thanh công cụ Style Rendering
1.5.8 Property Inspector
Mọi phần tử hoặc đối tượng, như là văn bản, đồ họa, hoặc bảng, mà bạn chèn vào trang có một số thuộc
tính cụ thể. Bạn có thể sửa đổi những thuộc tính này bằng cách sử dụng Property Inspector.
Để sửa đổi những thuộc tính của một đối tượng, hãy chọn đối tượng đó. Property Inspector hiển thị tất
cả các thuộc tính định dạng bao gồm các liên kết liên quan đến đối tượng như được trình bày trong hình
1.14. Tất cả các thuộc tính gắn liền với đối tượng có thể không được hiển thị cùng một lúc. Property
Inspector hiển thị một mũi tên ở góc dưới bên phải, chỉ ra rằng có thêm các lựa chọn hoặc thuộc tính.
Bấm vào mũi tên để xem những tùy chọn hoặc thuộc tính này.
Hình 1.14: Property Inspector

Phần 1
Kháiniệm
Ghi chú: Để đảm bảo rằng Property Inspector thấy được cho một đối tượng đã chọn, trên menu
Window, chọn lệnh Properties hoặc nhấn phím Ctrl+F3 cùng một lúc.
1.5.9 Trình chọn thẻ
Bạn sẽ tìm thấy Tag selector trên thanh trạng nằm ở dưới cùng của cửa sổ Document như được trình
bày trong hình 1.15. Bạn có thể xem hệ thống phân cấp các thẻ xung quanh lựa chọn hiện tại với sự giúp
đỡ của Tag selector.
Hình 1.15: Trình chọn thẻ
Bạn có thể bấm vào bất kỳ thẻ nào trong hệ thống phân cấp để lựa chọn thẻ đó và tất cả nội dung của
nó. Ví dụ, bạn có thể bấm vào <body> để chọn toàn bộ phần thân của tài liệu. Để cài đặt các thuộc tính
lớp hoặc ID của thẻ trong bộ chọn thẻ, hãy bấm chuột phải vào thẻ và chọn lớp hoặc ID từ menu ngữ
cảnh.
1.5.10 Bảng điều khiển và các nhóm bảng điều khiển
Bảng điều khiển trong Dreamweaver CS5 được nhóm lại thành các nhóm Bảng điều khiển. Nhóm Bảng
điều khiển là một tập hợp các bảng điều khiển có liên quan dưới một đầu đề. Ví dụ, nhóm bảng điều
khiển File bao gồm bảng điều khiển Files và Assets, như được trình bày trong hình 1.16. Bạn cũng có
thể mở rộng hoặc hủy neo các bảng điều khiển khỏi nhóm Bảng điều khiển.
Hình 1.16: Nhóm bảng điều khiển File
Để mở rộng nhóm Bảng điều khiển, kích vào mũi tên mở rộng bên trái của tên của nhóm. Để hủy neo
một nhóm bảng điều khiển, kéo tay kẹp ở cạnh trái của thanh tiêu đề của nhóm và di chuyển nó đến vị
trí cần thiết trong không gian làm việc.

Phần 1
Kháiniệm
1.5.11 Bảng điều khiển Insert
Bảng điều khiển Insert cung cấp các nút cho phép bạn chèn các đối tượng, như là bảng, lớp, và đồ họa
trong các trang HTML của bạn. Xem hình 1.17.
Hình 1.17: Loại chung trong bảng điều khiển Insert
Những nút trên bảng điều khiển Insert được tổ chức thành các loại khác nhau. Để chèn một đối tượng,
bạn cần phải chuyển sang thể loại tương ứng và chọn những tùy chọn thích hợp. Chú ý rằng một số thể
loại này có một menu bật lên, như là Images. Khi bạn chọn một tùy chọn từ một thể loại, nó trở thành lựa
chọn mặc định cho thể loại đó. Vì vậy, lần sau khi bạn bấm vào thể loại đó, Dreamweaver CS5 sẽ chèn
đối tượng mặc định.
Bảng điều khiển Insert chứa các thể loại được liệt kê trong bảng 1.4.
Loại Mô tả
Common Bạn có thể chèn các đối tượng thường được sử dụng nhất, như là hình ảnh
và bảng.
Layout Bạn có thể chèn bảng, các phần tử bảng, thẻ div, khung, và các widget Spry.
Bạn cũng có thể chọn hai giao diện cho các bảng: Bảng tiêu chuẩn (mặc định)
và Mở rộng.
Forms Bạn có thể tạo các biểu mẫu và chèn các phần tử biểu mẫu, bao gồm các
widget xác thực Spry.
Data Bạn có thể chèn các đối tượng dữ liệu Spry cũng như các phần tử động khác,
như là bản ghi, các vùng lặp lại, và chèn bản ghi và cập nhật các biểu mẫu.

Phần 1
Kháiniệm
Loại Mô tả
Spry Bạn có thể tạo ra trang Spry, bao gồm các đối tượng dữ liệu và công cụ Spry.
InContext Editing Bạn có thể xây dựng các trang chỉnh sửa InContext, bao gồm các nút cho
Editable Regions, Repeating Regions, và quản lý các lớp CSS.
Favorites Bạn có thể nhóm và tổ chức các nút bảng Insert bạn dùng nhiều nhất ở một nơi
chung. Điều này làm đơn giản rất nhiều nhiệm vụ chèn các đối tượng.
Server-code Thể loại này chỉ có sẵn cho các trang có sử dụng một ngôn ngữ máy chủ cụ
thể, bao gồm ASP, ColdFusion Markup Language (CFML) Basic, CFML Flow,
CFML Advanced, và PHP. Mỗi thể loại cung cấp các đối tượng mã máy chủ để
bạn có thể chèn vào giao diện Code.
Bảng 1.4: Các thể loại bảng điều khiển Insert
Ghi chú: Để ẩn hoặc xem bảng điều khiển Insert, trên menu Window, bấm vào Insert hoặc nhấn phím
Ctrl+F2 cùng một lúc. Không giống như các bảng điều khiển khác trong Dreamweaver, bạn có thể kéo
bảng điều khiển Insert ra khỏi vị trí neo mặc định của nó và thả nó vào một vị trí nằm ngang ở phía trên
cùng của cửa sổ Document. Khi bạn làm như vậy, nó thay đổi từ bảng điều khiển thành thanh công cụ
(mặc dù bạn không thể ẩn và hiển thị nó theo cùng một cách như các thanh công cụ khác).
1.5.12 Bảng điều khiển Files
Bạn có thể sử dụng bảng điều khiển Files để quản lý các tập tin trong Website Dreamweaver của bạn.
Bạn có thể thực hiện các hoạt động, như là thay đổi kích thước của khu vực xem. Bạn cũng có thể tùy
chỉnh bảng điều khiển File bằng cách thay đổi giao diện của Website cục bộ hoặc từ xa của bạn mà xuất
hiện theo mặc định trong bảng điều khiển thu gọn. Xem hình 1.18.
Hình 1.18: Bảng điều khiển Files

Phần 1
Kháiniệm
1.6 Hình ảnh và văn bản
Người ta luôn nói rằng hình ảnh làm tăng sự hiểu và tìm hiểu nội dung. Vì vậy, khi bạn tạo một trang web
và thêm hình ảnh để bổ sung cho văn bản, nó sẽ thêm một phần tử tìm hiểu cho Website của bạn. Tuy
nhiên, bạn cũng nên nhớ rằng các trang web có hình ảnh đòi hỏi thời gian tải về lâu hơn so với các trang
web chỉ có văn bản. Vì vậy, điều quan trọng là bạn chèn hình ảnh chỉ khi chúng được yêu cầu hoặc nâng
cao giá trị của văn bản. Dreamweaver CS5 cung cấp các tùy chọn khác nhau để thêm hình ảnh vào các
trang web. Ngoài các hình ảnh đơn giản, bạn có thể thêm các hình ảnh cuộn đổi hoặc tạo ra các điểm
truy cập cho một hình ảnh.
1.6.1 Thêm hình ảnh
Để thêm hình ảnh vào trang web của bạn sử dụng Dreamweaver CS5, bạn không cần phải viết bất kỳ
mã nào. Bạn chỉ cần chèn hình ảnh và Dreamweaver CS5 tự động tạo ra mã yêu cầu.
Để chèn hình ảnh vào tài liệu của bạn, đặt điểm chèn trong cửa sổ Document nơi bạn muốn hình ảnh
xuất hiện. Sau đó, trên menu Insert, nhấn vào lệnh Image hoặc trên bảng điều khiển Insert, dưới thể
loại Common, bấm vào nút Images và sau đó bấm vào Images từ phần bay ra như được trình bày trong
hình 1.19.
Hình 1.19: Bảng điều chỉnh Insert hiển thị nút hình ảnh

Phần 1
Kháiniệm
Hộp thoại Select Image Source xuất hiện. Ở đây, bạn có thể duyệt hình ảnh mà bạn muốn chèn vào
trang web. Hộp thoại này cũng chứa tùy chọn Image Preview sử dụng tùy chọn này bạn có thể xem hình
thu nhỏ của hình ảnh trước khi chèn nó. Cuối cùng, chọn hình ảnh mà bạn muốn để chèn và bấm vào
OK. Hình ảnh sẽ được chèn vào trong cửa sổ Document.
Ghi chú: Nếu bạn đang làm việc trong một tài liệu chưa được lưu, Dreamweaver CS5 tạo ra tham chiếu
file:/// đến tập tin hình ảnh (xem trong giao diện Code). Khi bạn lưu tài liệu bất cứ nơi nào trong Website,
Dreamweaver CS5 chuyển đổi tham chiếu cho đường dẫn tương đối theo tài liệu.
1.6.2 Chèn chỗ dành sẵn cho hình ảnh
Đôi khi, khi bạn thiết kế các trang web, những hình ảnh có thể không sẵn sàng. Trong tình huống như
vậy, bạn có thể chèn chỗ dành sẵn cho hình ảnh trong một trang web thay vì hình ảnh. Sau đó, khi hình
ảnh đã sẵn sàng, bạn có thể chèn hình ảnh vào chỗ dành sẵn cho hình ảnh như được trình bày trong
hình 1.20. Điều này cho phép bạn chuẩn bị bố trí cơ bản của trang và tiết kiệm thời gian thay vì chờ cho
những hình ảnh được sẵn sàng.
Hình 1.20: Chỗ dành sẵn cho hình ảnh
Hình 1.21: Hộp thoại chỗ dành sẵn cho hình ảnh
Để chèn chỗ dành sẵn cho hình ảnh, đầu tiên bấm vào menu Insert. Bây giờ, từ menu con Image
Objects, bấm vào lệnh Image Placeholder. Hộp thoại Image Placeholder sẽ được hiển thị. Bạn có thể
đặt các thuộc tính của chỗ dành sẵn cho hình ảnh, như là tên, chiều rộng, chiều cao, màu sắc, và văn
bản thay thế như được trình bày trong hình 1.21. Bạn cũng có lựa chọn để sử dụng các tùy chọn Width
và Height mà bạn có thể xác định vị trí của chỗ dành sẵn. Tương tự như vậy, sử dụng tùy chọn Color
để xác định màu của chỗ dành sẵn. Trường Name và Alternate Text là không bắt buộc. Những giá trị
mà bạn chỉ ra trong các trường Name và Alternate Text xuất hiện trong Property Inspector hiển thị các
thuộc tính hình ảnh.

Phần 1
Kháiniệm
1.6.3 Thêm hình ảnh vào chỗ dành sẵn cho hình ảnh
Sau khi chèn chỗ dành sẵn cho hình ảnh, bạn có thể thêm các hình ảnh bất cứ khi nào chúng đã sẵn
sàng. Để làm như vậy, bấm đúp vào chỗ dành sẵn cho hình ảnh. Từ hộp thoại Select Image Source
sẽ được hiển thị, hãy chọn hình ảnh sẽ được chèn vào và sau đó, nhấp OK. Hình ảnh sẽ được hiển thị
trong chỗ dành sẵn.
1.6.4 Sửa đổi hình ảnh
Một khi bạn đã chèn một hình ảnh vào trang web, bạn có thể sử dụng Property Inspector để thay đổi
các thuộc tính của hình ảnh theo yêu cầu của bạn. Ví dụ, bạn có thể đặt tên cho hình ảnh, liên kết hình
ảnh đến một trang hoặc hình ảnh khác, căn chỉnh hình ảnh, cắt ảnh, và cài đặt viền. Hình 1.22 trình bày
Property Inspector cho một hình ảnh.
Hình 1.22: Property Inspector cho hình ảnh
Để hiển thị các thuộc tính cho một hình ảnh, hãy chọn hình ảnh đó. Các thuộc tính mà bạn có thể sửa
đổi sẽ được hiển thị trong Property Inspector.

Phần 1
Kháiniệm
Bảng 1.5 liệt kê các thuộc tính hình ảnh bạn có thể sửa đổi trong Property Inspector.
Loại Mô tả
W and H Cho phép bạn đặt chiều rộng và chiều cao của hình ảnh, theo pixel.
Khi bạn chèn hình ảnh, bạn sẽ thấy rằng những hộp văn bản này hiển
thị kích thước ban đầu của hình ảnh.
Src Bạn có thể chỉ ra tập tin nguồn cho hình ảnh. Để làm như vậy, bấm
vào biểu tượng thư mục và duyệt tập tin nguồn, hoặc gõ đường dẫn.
Link Bạn có thể chỉ ra siêu liên kết cho hình ảnh. Để làm như vậy, kéo biểu
tượng Point-To-File vào một tập tin trong bảng điều khiển Files. Bạn
cũng có thể bấm vào biểu tượng thư mục và duyệt đến tài liệu trên
Website của bạn. Ngoài ra, bạn có thể gõ thủ công Uniform Resource
Locator (URL - Bộ định vị tài nguyên đồng nhất).
Align Bạn có thể căn chỉnh hình ảnh và văn bản trên cùng một dòng.
Alt Bạn có thể chỉ ra văn bản thay thế. Văn bản thay thế sẽ xuất hiện
ở vị trí của hình ảnh cho các trình duyệt chỉ với văn bản hoặc cho
các trình duyệt đã được đặt để tải về thủ công các hình ảnh. Đối với
người dùng khiếm thị sử dụng máy tổng hợp tiếng nói với các trình
duyệt chỉ với văn bản, văn bản thay thế được phát ra thành lời. Trong
một số trình duyệt, văn bản này cũng xuất hiện khi con trỏ ở bên trên
hình ảnh.
Map Name and Hotspot
tools
Tùy chọn này cho phép bạn đặt tên và tạo ra bản đồ hình ảnh phía
máy khách.
V Space and H Space Những tùy chọn này thêm không gian, theo pixel, dọc theo hai bên
của hình ảnh. V Space thêm không gian dọc theo phía trên và phía
dưới của hình ảnh. H Space thêm không gian dọc theo phía bên trái
và phía bên phải của hình ảnh.
Border Cho phép bạn thêm viền cho hình ảnh theo pixel. Mặc định là không
có viền.
Edit Bạn có thể khởi động trình chỉnh sửa hình ảnh mà bạn đã chỉ ra trong
tùy chọn External Editors và mở hình ảnh đã chọn.
Edit Image Settings Tùy chọn này sẽ mở ra hộp thoại Image Preview và cho phép bạn tối
ưu hóa hình ảnh.
Crop Bạn có thể cắt bớt kích thước của hình ảnh, loại bỏ các khu vực
không mong muốn khỏi hình ảnh đã chọn.

Phần 1
Kháiniệm
Loại Mô tả
Target Bạn có thể chỉ ra khung hoặc cửa sổ trong đó trang liên kết sẽ tải.
(Tùy chọn này không có sẵn khi hình ảnh không liên kết đến tập tin
khác.) Tên của tất cả các khung trong tập khung hiện tại xuất hiện
trong danh sách Target. Bạn cũng có thể chọn từ những tên mục tiêu
dành riêng sau đây:
¾¾ blank: Tải tập tin liên kết vào trong một cửa sổ trình duyệt mới
chưa có tên.
¾¾ parent: Tải tập tin liên kết vào trong tập khung hoặc cửa sổ cha
mẹ của khung chứa liên kết. Nếu khung chứa liên kết không
được lồng nhau, tập tin liên kết được tải vào cửa sổ trình duyệt
đầy đủ.
¾¾ self: Tải tập tin liên kết vào cùng một khung hoặc cửa sổ làm
liên kết. Mục tiêu này là mặc định, vì vậy bạn thường không cần
phải chỉ ra nó.
¾¾ top: Tải tập tin liên kết vào cửa sổ trình duyệt đầy đủ, do đó loại
bỏ tất cả các khung.
Resample Tùy chọn này lấy mẫu lại hình ảnh đã thay đổi kích cỡ, nâng cao chất
lượng hình của nó ở kích thước và hình dạng mới của nó.
Brightness and Contrast Bạn có thể điều chỉnh các thiết đặt độ sáng và độ tương phản của
hình ảnh.
Sharpen Bạn có thể điều chỉnh độ sắc nét của hình ảnh.
Reset Size
Tùy chọn này đặt lại các giá trị W và H cho kích thước ban đầu của
hình ảnh. Nút này sẽ xuất hiện ở bên phải của hộp văn bản W và H
khi bạn điều chỉnh các giá trị của hình ảnh đã chọn.
Bảng 1.5: Các thuộc tính hình ảnh trong Property Inspector
1.6.5 Làm việc với trình biên tập hình ảnh bên ngoài
Sau khi thêm hình ảnh cho trang web trong Dreamweaver CS5, bạn có thể cần phải thay đổi hình ảnh.
Trong tình huống như vậy, bạn có thể chọn hình ảnh và chỉnh sửa nó trong trình biên tập hình ảnh bên
ngoài. Sau khi bạn lưu các thay đổi trong trình biên tập hình ảnh bên ngoài, những thay đổi này được
phản ánh trong cửa sổ Document trong Dreamweaver.
Dreamweaver còn cho phép bạn thiết lập Fireworks làm trình biên tập bên ngoài chính của bạn. Ngoài
ra, bạn cũng có thể chọn nhiều trình biên tập hình ảnh. Khi bạn cài đặt nhiều trình biên tập hình ảnh, bạn
có thể cài đặt sở thích để khởi động trình biên tập hình ảnh cụ thể để chỉnh sửa một số loại tập tin. Ví dụ,
bạn có thể cài đặt sở thích để khi bạn muốn chỉnh sửa hình ảnh ở định dạng Joint Photographic Experts
Group (JPEG - Nhóm liên hợp các chuyên gia đồ họa), Fireworks khởi động. Tương tự như vậy, bạn có
thể thiết lập các trình biên tập hình ảnh khác cho các loại tập tin khác, dựa trên yêu cầu của bạn.

Phần 1
Kháiniệm
¾¾ Khởi động trình biên tập hình ảnh bên ngoài
Để khởi động trình biên tập hình ảnh bên ngoài, thực hiện một trong các cách sau:
yy Bấm chuột phải vào hình ảnh bạn muốn chỉnh sửa và sau đó, bấm vào Edit With. Bấm vào
Browse và sau đó, chọn một trình biên tập. Trình biên tập khác hiện có là Photoshop,
Fireworks, iexplore, và Browse.
yy Chọn hình ảnh bạn muốn chỉnh sửa, và bấm vào nút Edit (biểu tượng bút chì) trong
Property Inspector.
yy Nếu bạn không xem hình ảnh đã cập nhật sau khi trở về cửa sổ Dreamweaver, chọn hình
ảnh và sau đó, bấm vào nút Refresh trong Property Inspector.
1.6.6 Tạo các hình ảnh cuộn qua
Hình ảnh cuộn qua là hình ảnh thay đổi khi bạn di chuyển con trỏ chuột qua nó. Nhiều Website đưa vào
các hình ảnh cuộn qua để quảng cáo. Bạn cần hai hình ảnh có cùng kích thước để tạo ra hiệu ứng cuộn
qua: một hình ảnh chính và một hình ảnh phụ. Hình ảnh chính được hiển thị khi trang tải lần đầu tiên,
trong khi đó hình ảnh phụ được hiển thị khi con trỏ di chuyển qua hình ảnh chính. Dreamweaver thay đổi
kích thước hình ảnh thứ hai để phù hợp với các thuộc tính của hình ảnh đầu tiên trong trường hợp cả hai
hình ảnh không cùng một kích thước.
Khi bạn di chuyển con trỏ chuột qua một hình ảnh cuộn qua, sự kiện onMouseOver được tự động kích
hoạt.
Tuy nhiên, bạn có thể cài đặt hình ảnh để phản ứng với một sự kiện khác, như là sự kiện
onMouseClick.
Ghi chú: Bạn không thể nhìn thấy ảnh hưởng của một hình ảnh cuộn qua trong giao diện Design.
Để chèn hình ảnh cuộn qua, thực hiện theo các bước sau:
1. Trong cửa sổ Document, đặt điểm chèn nơi bạn muốn hiệu ứng cuộn qua xuất hiện.
2. Chèn hiệu ứng cuộn qua sử dụng một trong những phương pháp này:
a. Trong thể loại Common của bảng điều khiển Insert, bấm vào nút Images, và bấm vào
biểu tượng Rollover Image. Với biểu tượng Rollover Image được hiển thị trong bảng
điều khiển Insert, bạn có thể kéo biểu tượng đến cửa sổ Document.
b. Bấm vào Insert, bấm vào Image Objects, và sau đó bấm vào Rollover Image.

Phần 1
Kháiniệm
3. Trong hộp thoại Insert Rollover Image xuất hiện như được trình bày trong hình 1.23, cài đặt
những tùy chọn sau:
Hình 1.23: Hộp thoại Insert Rollover Image
a. Chỉ ra tên hình ảnh trong hộp văn bản Image name.
b. Chỉ ra hình ảnh chính trong hộp văn bản Original image. Bạn có thể chỉ ra đường dẫn
hoặc duyệt tới hình ảnh.
c. Chỉ ra hình ảnh phụ trong hộp văn bản Rollover image. Bạn có thể chỉ ra đường dẫn hoặc
duyệt tới hình ảnh.
d. Chọn hộp kiểm Preload Rollover Image để không xảy ra chậm trễ khi người dùng cuộn
con trỏ qua hình ảnh.
e. Chỉ ra Alternate Text (văn bản thay thế) để mô tả hình ảnh cho người xem sử dụng trình
duyệt chỉ cho văn bản. Đây là một bước tùy chọn.
f. Chỉ ra tập tin mà bạn muốn mở khi người dùng bấm vào hình ảnh cuộn qua trong When
clicked, hộp văn bản Go to URL. Bạn có thể nhập đường dẫn hoặc bấm vào Browse và
chọn tập tin.
4. Bấm vào OK.
5. Trên menu File, bấm vào Preview in Browser hoặc nhấn F12.
6. Trong trình duyệt, di chuyển con trỏ lên hình ảnh gốc để xem hình ảnh cuộn qua.

Phần 1
Kháiniệm
1.6.7 Dấu ngắt dòng trong văn bản
Trong Dreamweaver CS5, bạn có thể thêm văn bản sử dụng bất kỳ phương pháp nào sau đây:
¾¾ Gõ văn bản trực tiếp vào Dreamweaver. Sau khi bạn viết một đoạn văn, nhấn Enter để tạo ra một
đoạn văn mới.
¾¾ Nhập khẩu các tập tin văn bản đơn giản hoặc tài liệu trong MS Word.
¾¾ Sao chép văn bản từ một ứng dụng khác, như là MS Word và dán nó vào Dreamweaver.
Khi bạn nhấn Enter ở cuối một câu hoặc một từ trong một đoạn văn, một không gian trống được tạo ra
ở trên và dưới nó tạo ra một đoạn văn, theo mặc định, như được trình bày.
312, Seawood Building
LakeShore
Jersey
Tuy nhiên, nếu bạn muốn chỉ đơn giản là di chuyển con trỏ xuống mà không cần tạo một đoạn văn, như
được trình bày, bạn cần phải ngắt dòng sử dụng thanh Insert.
312, Seawood Building
LakeShore,
Jersey
Để chèn ngắt dòng, làm một trong các cách sau:
¾¾ Nhấn Shift+Enter.
¾¾ Trên menu Insert, bấm vào HTML, bấm vào Special Characters, và sau đó bấm vào Line Break
từ menu con.
¾¾ Trong thể loại Text của bảng điều khiển Insert, bấm vào nút Characters, và bấm vào biểu tượng
Line Break.
1.6.8 Dấu không ngắt dòng trong văn bản
Trong Dreamweaver CS5, khi bạn cố gắng thêm nhiều hơn một khoảng trắng giữa các từ, nó bỏ qua tất
cả các khoảng trắng ngoại trừ cho cái đầu tiên. Để thêm nhiều hơn một khoảng trắng giữa các từ, bạn có
thể chèn Dấu không ngắt dòng theo cùng một cách như bạn chèn xuống dòng, đó là bằng cách sử dụng
tùy chọn Favorites trên bảng điều khiển Insert.

Phần 1
Kháiniệm
Đầu tiên, nhấn vào mũi tên bên trái của bảng điều khiển Insert và sau đó, chọn Favorites từ danh sách.
Khi thực hiện điều đó, thông báo sẽ xuất hiện với nội dung Right-click to customize your favorite
objects (Bấm chuột phải để tùy chỉnh các đối tượng yêu thích của bạn). Khi bấm chuột phải vào bảng
điều khiển Insert, sẽ hiển thị một menu. Chọn tùy chọn Customize Favorites từ danh sách.
Hộp thoại Customize Favorite Objects sẽ được hiển thị như được trình bày trong hình 1.24.
Hình 1.24: Hộp thoại Customize Favorite Objects
Ở đây, chọn Text từ danh sách thả xuống Available objects và sau đó chọn Non-Breaking Space, từ
danh sách Available Objects. Sau đó, bấm vào nút mũi tên ‘>>’ để thêm tùy chọn Non-Breaking Space
trong danh sách Favorites Objects và bấm vào OK.
Dấu không xuống dòng sẽ được hiển thị trong bảng điều khiển Insert. Sau khi đã làm điều đó, đặt điểm
chèn ở nơi bạn muốn thêm dấu cách. Cuối cùng, bấm vào Non-Breaking Space từ thanh Insert. Dấu
cách sẽ được nhập vào sau dấu hai chấm. Bạn có thể bấm vào tùy chọn Non-Breaking Space bao
nhiêu lần bạn muốn thêm các dấu cách.
Bạn cũng có thể chèn dấu cách không xuống dòng bằng bất kỳ phương pháp nào sau đây:
¾¾ Trên menu Insert, bấm vào HTML, sau đó bấm vào Special Characters, và sau đó bấm vào
Non-Breaking Space từ menu con.
¾¾ Trong thể loại Text của bảng điều khiển Insert, bấm vào nút Characters và bấm vào biểu tượng
Non-Breaking Space.

Phần 1
Kháiniệm
Ghi chú: Trong Dreamweaver CS5, bạn cũng có thể chèn Dấu cách không xuống dòng bằng cách
nhấn tổ hợp phím Ctrl+Shift+Space cùng một lúc.
1.6.9 Định dạng và chỉnh sửa văn bản (CSS so với HTML)
Định dạng văn bản không phải là một nhiệm vụ khó khăn. Tương tự như trình xử lý Word, bạn có thể định
dạng văn bản trong Dreamweaver. Bạn có thể thực hiện các hoạt động, như là chọn một đầu đề hoặc
kiểu đoạn văn cho một khối văn bản, thay đổi phông chữ, kích thước, màu, và sự căn chỉnh văn bản đã
chọn, hoặc áp dụng các kiểu văn bản, như là in đậm, in nghiêng, và gạch dưới.
Trong Dreamweaver CS5, bạn có thể áp dụng định dạng cho văn bản theo hai cách – sử dụng CSS
Property Inspector và HTML Property Inspector. Hai Property Inspector này được tích hợp vào thành
một. Hai Property Inspector có sẵn ở dạng nút trong Property Inspector. Chỉ cần bấm vào nút HTML or
CSS để chỉnh sửa văn bản theo nhu cầu của bạn.
Dreamweaver định dạng văn bản sử dụng CSS khi bạn sử dụng CSS Property Inspector. Khi bạn áp
dụng định dạng CSS, Dreamweaver viết các thuộc tính vào phần đầu của tài liệu hoặc vào style sheet
riêng biệt.
Nếu bạn muốn định dạng văn bản sử dụng HTML Property Inspector, bạn có thể sử dụng các thẻ đánh
dấu HTML. Khi bạn áp dụng định dạng HTML, Dreamweaver thêm các thuộc tính vào mã HTML trong
phần thân của trang của bạn.
Sau đây là một vài lợi thế của việc sử dụng CSS hơn là HTML:
¾¾ CSS cung cấp cho các nhà thiết kế web và các nhà phát triển kiểm soát tốt hơn đối với việc thiết
kế trang web.
¾¾ CSS cung cấp các tính năng cải tiến về khả năng tiếp cận và làm giảm kích thước tập tin.
¾¾ Bạn có thể tạo ra các kiểu mới với CSS Property Inspector cùng với việc truy cập vào các kiểu
hiện tại.
¾¾ CSS tách các phần tử thiết kế trực quan của một trang web từ logic cấu trúc của một trang web,
do đó cho phép các nhà thiết kế web điều khiển trực quan và chính tả mà không bị mất tính toàn
vẹn của nội dung.
¾¾ Định nghĩa thiết kế chính tả và bố cục trang từ bên trong một khối mã đơn lẻ, riêng biệt; mà không
cần phải dùng đến bản đồ hình ảnh, thẻ phông chữ, bảng, và các hình GIF đệm vào cho phép tải
nhanh hơn, bảo trì Website sắp xếp hợp lý, và một điểm trung tâm mà từ đó để kiểm soát các
thuộc tính thiết kế trên nhiều trang web.
¾¾ Bạn có thể lưu trữ các kiểu đã tạo ra với CSS trực tiếp trong tài liệu.
¾¾ Bạn có thể lưu trữ các kiểu trong style sheet bên ngoài để có sự linh hoạt hơn.

Phần 1
Kháiniệm
¾¾ Nếu bạn đính kèm một style sheet bên ngoài vào một số trang web, tất cả các trang tự động phản
ánh bất kỳ thay đổi nào bạn thực hiện cho style sheet đó. Để truy cập vào tất cả các quy tắc CSS
cho một trang, sử dụng bảng điều khiển CSS Styles. Để truy cập vào các quy tắc áp dụng cho
lựa chọn hiện tại, sử dụng bảng điều khiển CSS Styles hoặc menu bung ra Targeted Rule trong
CSS Property Inspector.
¾¾ Định dạng đoạn văn
Tổ chức văn bản trong một trang web, bạn cần phải định dạng văn bản cho các đoạn văn. Đoạn
văn là một khối văn bản hoặc thông tin logic. Bạn sử dụng các đoạn văn để làm cho văn bản trên
một trang web có cấu trúc và thanh lịch hơn. Đoạn văn luôn luôn bắt đầu với thẻ <p> và kết thúc
bằng thẻ </p>.
Dreamweaver CS5 có ba kiểu đoạn văn cơ bản: Paragraph, Heading, và Preformatted. Bạn có thể
áp dụng các kiểu đoạn văn bằng cách sử dụng hộp danh sách thả xuống Format trong Property
Inspector như được trình bày trong hình 1.25.
Hình 1.25: Định dạng hộp danh sách thả xuống trong Property Inspector
¾¾ Định dạng đoạn văn HTML
Khi bạn bắt đầu gõ văn bản vào một tài liệu mới trong Dreamweaver CS5, không
có định dạng đoạn văn nào được áp dụng cho văn bản theo mặc định. Do đó,
tùy chọn None được chọn theo mặc định trong hộp danh sách thả xuống Format
và không có các thẻ đoạn văn khi bạn xem văn bản trong giao diện Code.

Phần 1
Kháiniệm
Xem hình 1.26, trong đó cho thấy một khối các loại văn bản trong một tài liệu mới.
Hình 1.26: Khối văn bản
Bạn có thể áp dụng định dạng đoạn văn đặc biệt cho khối văn bản bằng cách đặt điểm chèn bất cứ
nơi nào trong khối văn bản trong giao diện Design. Bây giờ, trên menu Format, nhấn vào menu
con Paragraph Format và tiếp tục bấm vào lệnh Paragraph.
Định dạng đoạn văn bây giờ được áp dụng. Trong giao diện Code, khối văn bản được đặt trong thẻ
mở và đóng đoạn văn (<p> và </p>), như được trình bày trong hình 1.27.
Hình 1.27: Định dạng đoạn văn được áp dụng cho một khối văn bản
Sau khi bạn áp dụng định dạng Paragraph và nhấn phím Enter sau đoạn văn, một đoạn văn mới
sẽ được tạo ra với thẻ <p> mở và đóng, giúp bạn có thể xem trong giao diện Code. Bạn lại có thể
nhập một khối văn bản khác làm một đoạn văn riêng biệt.

Phần 1
Kháiniệm
¾¾ Đầu đề
Một phương pháp để định dạng văn bản là bằng các đầu đề. Đầu đề được sử dụng để xác định
các phần nội dung khác nhau trên một trang. Chúng bao gồm từ Heading1, <h1>, là lớn nhất, đến
Heading6, <h6>, là nhỏ nhất. Bạn có thể áp dụng một đầu đề đặc biệt cho văn bản trong một trang
bằng cách đặt điểm chèn vào bất cứ nơi nào trong dòng hoặc khối văn bản. Bạn cũng có thể chọn
văn bản và sau đó, trên menu Format, bấm vào Paragraph Format. Sau đó, bạn có thể chọn đầu
đề thích hợp từ 1-6 mà bạn muốn áp dụng. Ngoài ra, trong Property Inspector, bạn có thể bấm
vào danh sách thả xuống Format và chọn kiểu đầu đề thích hợp. Xem hình 1.28.
Hình 1.28: Đầu đề áp dụng cho văn bản
¾¾ Văn bản định dạng trước
Trong khi thiết kế một trang web, bạn thường cần phải sử dụng thêm dấu cách, tab và các ký tự
khoảng trống khác. Tuy nhiên, khi trình duyệt web hiển thị các trang web, những dấu cách, tab
thêm này và các ký tự khoảng trống được bỏ qua và không được hiển thị.
Trong tình huống như vậy, bạn có thể sử dụng văn bản định dạng trước để định dạng văn bản với
các dấu cách, tab, hoặc ngắt dòng thêm. Khi bạn áp dụng định dạng trước, câu văn bạn gõ không
tự động bẻ dòng, vì vậy bạn phải nhấn phím Enter để tạo ra một dòng mới. Ví dụ, đặt điểm chèn
trong tài liệu nơi bạn muốn gõ khối văn bản. Bây giờ, từ Format list, chọn tùy chọn Preformatted.
Bạn cũng có thể chọn Text và sau đó, từ lệnh Paragraph Format, chọn tùy chọn Preformatted
Text. Bây giờ, nhập văn bản và chỉ ra không gian thêm bất cứ nơi nào cần thiết. Khi bạn xem trước
văn bản này như là một trang trong trình duyệt, như được trình duyệt trong hình 1.29, văn bản định
dạng trước sẽ hiển thị các dấu cách thêm.

Phần 1
Kháiniệm
Hình 1.29: Xem trước văn bản định dạng trước trong trình duyệt
1.6.10 Kiểm tra chính tả
Sau khi bạn viết văn cho một trang web, bạn nên luôn sử dụng Spell Check để đảm bảo rằng không có
lỗi chính tả trong văn bản. Để kiểm tra chính tả trong tài liệu của bạn, trên menu Commands, bấm vào
Check Spelling hoặc nhấn tổ hợp phím Shift+F7 cùng một lúc. Hình 1.30 trình bày hộp thoại Check
Spelling.
Hình 1.30: Hộp thoại Check Spelling
Ghi chú: Trước khi bạn kiểm tra bất kỳ tài liệu nào về các lỗi chính tả, bạn nên luôn luôn chọn đúng từ
điển dựa trên ngôn ngữ mà bạn đã sử dụng để tạo ra văn bản trong trang web. Điều quan trọng là bạn
chọn từ điển bởi vì khi bạn chạy Spell Check, Dreamweaver CS5 sẽ kiểm tra cách viết từ với danh sách
các từ có trong từ điển đã chọn.
Theo mặc định, bộ kiểm tra chính tả sử dụng từ điển chính tả tiếng Anh Mỹ. Để cài đặt từ điển theo sự
lựa chọn của bạn, trên menu Edit, bấm vào Preferences. Hộp thoại Preferences sẽ được hiển thị.

Phần 1
Kháiniệm
Trong tab General, chọn từ điển cần thiết từ danh sách thả xuống Special Dictionary. Xem hình 1.31.
Hình 1.31: Danh sách thả xuống Spelling Dictionary
1.7 Tạo Website
Khi chúng ta tạo một Website sử dụng Dreamweaver, Website đề cập đến một vị trí lưu trữ cục bộ hoặc từ
xa cho các tài liệu mà chúng ta tạo ra. Khái niệm cơ bản nhất để tạo ra một Website trong Dreamweaver
CS5 là định nghĩa Website. Vì vậy, trước khi bạn bắt đầu để tạo ra Website của bạn, trước tiên bạn phải
định nghĩa Website.
1.7.1 Thiết lập một Website mới
Để thiết lập một Website mới, bạn cần phải sắp xếp tất cả các tài liệu Dreamweaver của bạn ở một nơi.
Hộp thoại Site Setup là nơi để bạn chỉ ra các thiết đặt cho Website Dreamweaver của bạn.
Để mở hộp thoại Site Setup, Từ menu Site, bạn bấm vào New Site.

Phần 1
Kháiniệm
Hộp thoại Site Setup được hiển thị như được trình bày trong hình 1.32.
Hình 1.32: Hộp thoại Site Setup
Bạn cần chỉ ra các tùy chọn khác nhau trên hộp thoại Site Setup để tạo ra một Website.
¾¾ Loại Website
Để bắt đầu làm việc với Website Dreamweaver của bạn, bạn cần phải chỉ ra trường thể loại
Website trong hộp thoại Site Setup. Trong trường này, bạn cần phải chỉ ra thư mục cục bộ, nơi
bạn sẽ lưu trữ tất cả các tập tin của Website. Thư mục cục bộ có thể là trên máy tính của bạn hoặc
trên máy chủ mạng.
Ghi chú: Bạn không cần phải chỉ ra thư mục từ xa nếu thư mục gốc cục bộ của bạn đang trên hệ
thống chạy máy chủ web của bạn. Điều này có nghĩa là máy chủ web đang chạy trên máy tính
của bạn.
Bạn có thể chỉ ra những tùy chọn trong Site Category:
yy Site Name: Trong hộp văn bản Site Name, bạn chỉ ra tên Website sẽ xuất hiện trong bảng
điều khiển Files và trong hộp thoại Manage Sites. Tên Website không xuất hiện trong trình
duyệt.
yy Local Site Folder: Trong trường này, bạn chỉ ra tên của thư mục trên ổ đĩa của bạn, nơi
bạn lưu trữ các tập tin, các mẫu, và các mục thư viện cho Website. Tạo ra một thư mục
trên đĩa cứng của bạn hoặc duyệt đến thư mục đó.

Phần 1
Kháiniệm
¾¾ Thể loại máy chủ
Bạn có thể chỉ ra thể loại Máy chủ, nơi bạn có thể chỉ ra một máy chủ từ xa và thử nghiệm. Bạn
chỉ ra thư mục từ xa trên máy chủ từ xa nơi các tập tin Website của bạn được lưu trữ. Trong
Dreamweaver bảng điều khiển Files, thư mục từ xa được tham chiếu tới Website từ xa của bạn.
Khi bạn thiết lập thư mục từ xa, bạn phải chọn một phương pháp kết nối cho Dreamweaver để tải
lên và tải về các tập tin vào máy chủ web của bạn.
¾¾ Thể loại điều khiển phiên bản
Bạn có thể kiểm nhập và kiểm xuất các tập tin sử dụng SVN, là một hệ thống điều khiển phiên bản
cho phép bạn cộng tác chỉnh sửa và quản lý các tập tin trên máy chủ web từ xa. Bạn có thể có
được phiên bản mới nhất cho các tập tin, thay đổi, và chuyển các tập tin sử dụng SVN. Bạn có thể
sử dụng công cụ so sánh tập tin của bên thứ ba để so sánh các tập tin về sự khác biệt và làm việc
với các tập tin điều khiển phiên bản SVN.
¾¾ Thể loại thiết đặt nâng cao
Bạn có thể chỉ ra các thiết đặt, như là thư mục hình ảnh mặc định nơi bạn muốn lưu trữ hình ảnh cho
Websitecủabạn,loạiliênkếtDreamweavertạorakhibạntạocácliênkếtđếncáctrangkháctrongWebsite
của bạn. Bạn cũng có thể chỉ ra URLcủa Website của bạn. Dreamweaver sử dụng Web URLđể tạo ra
các liên kết liên quan đến gốc của Website, và để xác minh các liên kết khi bạn sử dụng bộ kiểm
tra liên kết. Ngoài ra, bạn có thể chỉ ra các thiết đặt khác, như là Case-sensitive Links Checking,
Enable Cache, Cloaking và các thể loại khác.
1.7.2 Thiết lập một Website thử nghiệm
Phát triển các trang động đòi hỏi phải tạo ra và hiển thị nội dung động. Bạn cần phải thiết lập một Website
thử nghiệm cho mục đích này. Bạn chỉ ra một máy chủ thử nghiệm, có thể là máy tính của bạn, một máy
chủ phát triển, một máy chủ dịch chuyển, hoặc một máy chủ sản xuất.
Để thiết lập một máy chủ thử nghiệm, trên menu Site, bấm vào Manage Sites. Hộp thoại Manage Sites
xuất hiện như được trình bày trong hình 1.33. Sau đó, bấm vào New để thiết lập một Website mới, hoặc
chọn một Website Dreamweaver hiện có và bấm vào Edit. Trong hộp thoại Site Setup, chọn thể loại
Servers và thực hiện một trong các cách sau:
¾¾ Bấm vào nút Add New Server để thêm một máy chủ mới.
¾¾ Chọn một máy chủ hiện có và bấm vào nút Edit Existing Server.

Phần 1
Kháiniệm
Hình 1.33: Hộp thoại Manage Sites
Bạn chỉ ra các tùy chọn Basic cần thiết như được trình bày hình 1.34.
Hình 1.34: Màn hình Basic
Sau đó, bấm vào nút Advanced.

Phần 1
Kháiniệm
Màn hình Advanced xuất hiện như được trình bày trong hình 1.35.
Hình 1.35: Màn hình Advanced
Dưới máy chủ thử nghiệm, chọn đời máy chủ bạn muốn sử dụng cho ứng dụng web của bạn. Khi thực
hiện xong, bấm vào Save để đóng màn hình Advanced. Sau đó, trong thể loại Servers, chỉ ra máy chủ
bạn vừa mới thêm hoặc chỉnh sửa làm máy chủ thử nghiệm.
1.7.3 Tạo một trang mới
Sau khi tạo một Website cục bộ và máy chủ thử nghiệm, bạn có thể bắt đầu tạo các trang. Để tạo ra một
trang mới, trên menu File, nhấn vào lệnh New hoặc nhấn tổ hợp phím Ctrl+N cùng một lúc.

Phần 1
Kháiniệm
Hộp thoại New Document sẽ được hiển thị như được trình bày trong hình 1.36.
Hình 1.36: Hộp thoại New Document
Hộp thoại New Document hiển thị các loại trang khác nhau và các cách bố trí tương ứng bạn có thể sử
dụng trong mỗi loại trang trong cột liền kề. Bạn cũng có thể sử dụng hộp thoại này để chọn các loại tài liệu
khác nhau, như là trang cơ bản, trang động, trang mẫu, và tập khung. Bạn cũng có thể thay đổi ngôn ngữ
trang web của bạn từ HTML sang XHTML. Đối với điều này, bạn cần phải sử dụng tùy chọn DocType.
1.7.4 Sử dụng mẫu
Tương tự như các ứng dụng khác, như là MS Word, bạn có thể sử dụng các mẫu hiện có trong
Dreamweaver CS5 và tạo một tài liệu mới. Bạn có thể sử dụng hộp thoại New Document để chọn mẫu
từ bất kỳ Website do Dreamweaver định nghĩa hoặc sử dụng bảng điều khiển Assets để tạo ra một tài
liệu mới từ mẫu hiện tại.
Để tạo ra một tài liệu mới dựa trên mẫu, trên menu File, bấm vào New. Trong hộp thoại New Document,
chọn thể loại Blank Template như được trình bày trong hình 1.37. Sau đó, chọn HTML Template từ cột
Template Type và từ cột Layout, chọn tùy chọn thích hợp của bạn.

Phần 1
Kháiniệm
Trong cột Site, chọn Website Dreamweaver có chứa mẫu mà bạn muốn sử dụng, và sau đó, chọn một
mẫu từ danh sách ở bên phải. Xóa hộp kiểm Update Page When Template Changes (Cập nhật trang
khi mẫu thay đổi) nếu bạn không muốn cập nhật trang này bất cứ khi nào thay đổi mẫu mà trang này dựa
trên đó. Bấm vào Preferences nếu bạn muốn cài đặt sở thích tài liệu mặc định, như là loại tài liệu, mã
hóa, và đuôi tập tin. Bấm vào Get More Content (Có thêm nội dung) nếu bạn muốn mở Dreamweaver
Exchange nơi bạn có thể tải về thêm nội dung thiết kế trang. Bấm vào Create và lưu tài liệu.
1.7.5 Các thuộc tính trang
Sau khi tạo một trang web, bạn có thể cài đặt các thuộc tính cho trang web, như là hình nền, màu nền,
màu liên kết, và các lề. Để cài đặt hoặc sửa đổi các thuộc tính trang cho mỗi trang web, bạn sử dụng
hộp thoại Page Properties. Để mở hộp thoại Page Properties, trên menu Modify, bấm vào lệnh Page
Properties.

Phần 1
Kháiniệm
Hình 1.38 trình bày hộp thoại Page Properties.
Hình 1.38: Hộp thoại Page Properties
Hộp thoại Page Properties cho phép bạn chỉ ra họ phông chữ và cỡ chữ, màu nền, các lề, kiểu liên kết,
và nhiều khía cạnh khác của thiết kế trang. Bạn có thể gán các thuộc tính trang mới cho mỗi trang mới
bạn tạo ra, và sửa đổi những cái này cho các trang hiện tại. Các thay đổi mà bạn thực hiện trong hộp
thoại Page Properties áp dụng cho toàn bộ trang. Sau đây là các thể loại bạn có thể cài đặt sử dụng hộp
thoại Page Properties:
¾¾ Appearance (CSS): Bạn có thể đặt các thuộc tính phông chữ, màu nền, hình nền của trang CSS
sử dụng thể loại này.
¾¾ Appearance (HTML): Bạn có thể cài đặt các thuộc tính trang HTML, như là hình nền, các thuộc
tính văn bản, và màu liên kết sử dụng thể loại này.
¾¾ Links (CSS): Bạn có thể định nghĩa phông chữ, cỡ chữ và màu mặc định cho các liên kết, liên kết
đã truy cập, và liên kết hoạt động cho CSS sử dụng thể loại này.
¾¾ Headings (CSS): Bạn có thể định nghĩa phông chữ đầu đề và màu cho các đầu đề sử dụng thể
loại này.
¾¾ Title/Encoding: Thể loại Title/Encoding cho phép bạn chỉ ra loại mã hóa tài liệu là loại cụ thể cho
ngôn ngữ được sử dụng để cấp quyền tác giả cho các trang web của bạn cũng như chỉ ra
Unicode Normalization Form để sử dụng với loại mã hóa.
¾¾ Tracing Image: Bạn có thể chèn một tập tin hình ảnh có thể được sử dụng làm hướng dẫn trong
việc thiết kế trang web của bạn sử dụng thể loại này.

Phần 1
Kháiniệm
1.7.6 Xem một bản đồ Website
Bản đồ Website là một cái nhìn tổng quan về bố trí Website của bạn. Để xem bản đồ Website, trước tiên
bạn cần phải tạo ra trang web index.html. Trang chỉ mục này thường là trang chủ cho bất kỳ Website
nào. Trang index.html luôn luôn ở trên cùng và tất cả các tập tin khác của Website được liên kết với nó
theo cùng một cách mà trong đó chúng sẽ được hiển thị trên Website. Các tập tin khác được hiển thị bên
dưới trang index.html.
1.7.7 Xem trước trang web trong trình duyệt
Sau khi tạo một trang web, bạn cần phải xác thực liệu trang sẽ được hiển thị chính xác khi người truy
cập xem trang sử dụng các trình duyệt web khác nhau. Để làm như vậy, bạn có thể xem trước các trang
web trong trình duyệt, như là Internet Explorer hoặc Netscape. Bạn phải lưu tài liệu của bạn trước khi
xem trước nó, vì vậy bạn có thể xem những thay đổi gần đây được thực hiện. Để xem trước một trang
web trong trình duyệt, vào menu File, bạn bấm vào Preview In Browser. Sau đó, bạn cần phải chọn một
trong những trình duyệt được liệt kê. Ngoài ra, bạn có thể nhấn F12 để xem trước trang web trong trình
duyệt chính
Ghi chú: Nếu không có trình duyệt nào được liệt kê, trên menu Edit, bấm vào Preferences, và sau đó,
chọn thể loại Preview In Browser ở bên trái để chọn một trình duyệt.

Phần 1
Kháiniệm
¾¾ Adobe Dreamweaver CS5 được tăng cường và tích hợp với các ứng dụng nhiều hơn bất
kỳ phiên bản trước nào, làm cho nó tốt hơn để tạo ra các Website.
¾¾ Dreamweaver CS5 đã đơn giản hóa cả nhiệm vụ phát triển front-end cũng như back-end
để cho phép tạo ra các trang web dễ dàng hơn so với trước đây.
¾¾ Dreamweaver CS5 cung cấp các công cụ chỉnh sửa mã, như tô màu mã và hoàn thiện
thẻ, tài liệu tham khảo về HTML, Cascading Style Sheets (CSS), JavaScript, Active
Server Pages (ASP), Java Server Pages (JSP), và JavaScript Debugger.
¾¾ Một số tính năng mới của Dreamweaver CS5 bao gồm:
yy Tích hợp với Adobe BrowserLab
yy Tích hợp Adobe Business Catalyst
yy Vô hiệu/cho phép CSS
yy Các công cụ kiểm tra CSS nâng cao
yy Bố trí bộ khởi đầu CSS nâng cao
yy Tập tin liên kết tự động
yy Điều hướng giao diện Live
yy Gợi ý mã lớp tùy chỉnh PHP
yy Thiết lập Website đơn giản
yy Gợi ý mã theo Website cụ thể
yy Tăng cường Subversion
Tóm tắt

Phần 1
Kháiniệm
¾¾ Giao diện Dreamweaver CS5 bao gồm những mục sau đây:
yy Thanh ứng dụng
yy Thanh công cụ tài liệu
yy Cửa sổ tài liệu
yy Bộ chuyển không gian làm việc
yy Các nhóm bảng điều khiển
yy CS Live
yy Bộ chọn thẻ
yy Property Inspector
yy Bảng điều khiển các tập tin
¾¾ Dreamweaver CS5 tự động tạo ra đoạn mã cần thiết một khi bạn chèn hình ảnh.
¾¾ Đôi khi, khi bạn thiết kế các trang web, những hình ảnh có thể không sẵn sàng. Trong tình
huống như vậy, bạn có thể chèn chỗ dành sẵn cho hình ảnh trong một trang web thay vì
hình ảnh.
¾¾ Một khi hình ảnh đã sẵn sàng, bạn có thể chèn hình ảnh vào chỗ dành sẵn cho hình ảnh.
¾¾ Để tạo ra một Website trong Dreamweaver CS5, trước tiên bạn cần phải thiết lập một
Website mới và Website thử nghiệm.
¾¾ Bạn có thể tạo ra một trang web mới trên Website của riêng bạn hoặc sử dụng các mẫu
mặc định để tạo ra Website của bạn.
¾¾ Bạn có thể xem trước trang web sử dụng một số trình duyệt như là Internet Explorer.
Tóm tắt

Phần 1
Kháiniệm
Kiểm tra tiến bộ của bạn
1. Để tạo ra các trang web động sử dụng ColdFusion, bạn cần phải tạo __________
ColdFusion.
a. Mẫu
b. Tập tin nguồn
c. Đầu đề
d. Chân trang
2. ___________ cho phép bạn xem trang trong nhiều trình duyệt.
a. Flare
b. Giao diện Live
c. Adobe BrowserLab
d. Adobe Business Catalyst
3. Với ___________, bạn có thể di chuyển, sao chép và xóa các tập tin và đồng bộ hóa với
kho SVN.
a. Gợi ý mã theo Website cụ thể
b. Bố trí bộ khởi đầu CSS nâng cao
c. Điều hướng giao diện Live
d. Tăng cường Subversion
4. ______________ chứa các menu khác nhau.
a. Thanh ứng dụng
b. Thanh công cụ Document
c. Thanh công cụ Standard
d. Property Inspector

Phần 1
Kháiniệm
5. Trong giao diện ____________, bạn có thể thấy giao diện Code và giao diện Design cho
cùng một tài liệu trong một cửa sổ đơn lẻ.
a. Code and Design
b. Design
c. Code
d. Live
6. Bạn có thể sử dụng thanh công cụ _________ chỉ khi bạn sử dụng các style sheet phụ
thuộc vào phương tiện.
a. Coding
b. Style Rendering
c. Standard
d. Bộ chọn thẻ
7. Hình ảnh cuộn qua được tự động cài đặt để đáp lại với sự kiện _____________.
a. onMouseOver
b. onChange
c. onLoad
d. onSubmit

Phần 1
Kháiniệm
1. Tạo ra một Website cho ‘ABC Computers’. Nội dung nhận được từ khách hàng như sau:
Địa chỉ: 203-A, Kourtney Villa, J Tire Road, Jersey. Chúng tôi tham gia vào kinh doanh phần
cứng máy tính trong 10 năm qua và là nhà cung cấp hàng đầu trong và xung quanh Jersey.
Chúng tôi tin vào chất lượng hơn là số lượng.
Gợi ý:
a. Trước tiên, bạn sẽ định nghĩa một Website cục bộ trong Dreamweaver CS5 và đặt tên cho
Website là ‘ABC Computers’.
b. Sau đó, bạn sẽ tạo ra một trang web mới, cài đặt các thuộc tính của nó, và thêm nội dung
và các phần tử khác cho nó. Cuối cùng, bạn sẽ xem trước trang hoàn thành trong các trình
duyệt khác nhau.
Bạn hãy tự làm

“
“Nền tảng của mọi quốc gia là
giáo dục thế hệ thanh niên

Làm việc với các danh sách,
bảng, liên kết và khung
2
Phần
Kháiniệm
Mục tiêu
Ở cuối phần này, học viên sẽ có thể:
¾¾ Nhập khẩu các ứng dụng bên ngoài
¾¾ Tạo và chỉnh sửa các danh sách
¾¾ Tạo bảng ở chế độ tiêu chuẩn và bố trí
¾¾ Làm việc với dữ liệu bảng
¾¾ Tạo các liên kết bên trong và bên ngoài một trang web
¾¾ Sửa đổi liên kết
¾¾ Sử dụng khung
2.1 Giới thiệu
Trong phần trước, bạn đã học về các tính năng của Adobe Dreamweaver CS5 và các phần tử không
gian làm việc khác nhau của nó. Bạn còn học được cách chọn bố trí không gian làm việc, chèn và
sửa đổi hình ảnh, và thêm, định dạng và chỉnh sửa văn bản. Cuối cùng, bạn cũng được học cách tạo
ra một Website. Trong phần này, bạn sẽ tìm hiểu về chuyển nhập các tài liệu Microsoft Office thành
Dreamweaver CS5. Bạn cũng sẽ tìm hiểu về làm việc với các danh sách, bảng, hình ảnh, liên kết, và
khung trong Dreamweaver CS5.
2.2 Làm việc với các ứng dụng bên ngoài
Dreamweaver CS5 cho phép bạn sao chép nội dung từ các tài liệu Microsoft Office, như là Microsoft
Word và Excel, và thêm nó vào các trang web của bạn mà không làm mất định dạng. Để làm như vậy,
bạn cần phải chuyển đổi tài liệu Microsoft Office thành Hypertext Markup Language (HTML - Ngôn ngữ
đánh dấu siêu văn bản) và sau đó nhập khẩu tài liệu HTML vào Dreamweaver. Bạn cũng có thể nhập
khẩu trực tiếp các tài liệu Microsoft Office trong Dreamweaver CS5 sử dụng lệnh Import lệnh từ menu
File và sau đó chọn loại tài liệu (tài liệu Word hoặc tài liệu Excel) từ menu con. Với không gian làm việc
tích hợp cung cấp các cửa sổ tài liệu theo tab, các nhóm bảng điều khiển có thể neo, thanh công cụ tùy
chỉnh, và duyệt tập tin tích hợp, bây giờ bạn có thể tiết kiệm thời gian phát triển quý giá.
2.2.1 Làm việc Fireworks
Fireworks là công cụ phát triển web mạnh mẽ để tạo và quản lý đồ họa. Bạn có thể dễ dàng chỉnh sửa, tối
ưu hóa, và đặt các tập tin đồ họa vào các trang HTML của bạn sử dụng Fireworks với Dreamweaver.

Phần 2
Làm việc với các danh sách, bảng, liên kết và khung
Kháiniệm
Bạn có thể chuyển nhập đồ họa từ Fireworks trực tiếp vào một tài liệu Dreamweaver. Bạn cũng có thể
tạo ra một đồ họa Fireworks mới từ giữ chỗ hình ảnh Dreamweaver. Để chèn một hình ảnh Fireworks,
bạn cần phải đặt điểm chèn nơi bạn muốn hình ảnh xuất hiện. Sau đó, từ menu Insert, bấm vào Image.
Ngoài ra, bạn cũng có thể bấm vào thể loại Common của bảng điều khiển Insert, và sau đó bấm vào
nút Image hoặc kéo nó vào tài liệu. Sau đó, bạn có thể điều hướng đến tập tin xuất chuyển mong muốn
từ Fireworks, và bấm vào OK.
2.2.2 Làm việc với Photoshop
Dreamweaver tối ưu hóa các tập tin hình ảnh Photoshop (định dạng PSD) làm hình ảnh sẵn cho web
(định dạng GIF, JPEG, và PNG). Khi chúng tôi chuyển nhập hình ảnh từ Photoshop, Dreamweaver chèn
hình ảnh làm một đối tượng thông minh và duy trì kết nối trực tiếp đến tập tin PSD gốc. Có hai cách bạn
có thể làm việc với các tập tin Photoshop trong Dreamweaver CS5 – tiến trình công việc sao chép/dán
và tiến trình công việc Smart Objects.
¾¾ Tiến trình công việc sao chép/dán
Bạn sử dụng tiến trình công việc Copy/Paste khi bạn muốn chèn một phần của tập tin Photoshop
làm hình ảnh trên một trang web. Bạn có thể chọn một phần của hình ảnh trong Photoshop, sao
chép và dán nó vào Dreamweaver. Trong trường hợp bạn muốn thay đổi nội dung sau đó, bạn cần
phải mở tập tin Photoshop gốc, thực hiện thay đổi thích hợp, sao chép miếng hoặc lớp của bạn lại
vào clipboard, và sau đó dán miếng hoặc lớp đã cập nhật vào Dreamweaver.
¾¾ Tiến trình công việc đối tượng thông minh
Bạn sử dụng tiến trình công việc Smart Object khi bạn muốn làm việc với các tập tin Photoshop
hoàn chỉnh. Khi bạn chuyển nhập một hình ảnh Photoshop vào Dreamweaver sử dụng tiến trình
công việc Smart Objects, Dreamweaver đặt một biểu tượng Smart Objects vào hình ảnh sau khi
xuất chuyển hình ảnh đó. Bạn có thể thấy biểu tượng Smart Objects trong giao diện Design ở góc
trên bên trái của hình ảnh như được trình bày trong hình 2.1.
ĐểchuyểnnhậptậptinPhotoshopvàoDreamweaversửdụngtiếntrìnhcôngviệcSmartObjects,trong
giao diện Design hoặc Code, đặt điểm chèn vào trang của bạn nơi bạn muốn hình ảnh được chèn
vào. Sau đó, trên menu Insert, bấm vào Image. Xác định vị trí tập tin hình ảnh Photoshop PSD của
bạn trong hộp thoại Select Image Source (Chọn nguồn hình ảnh) bằng cách nhấn vào nút Browse
và điều hướng đến nó. Trong hộp thoại Image Preview (Xem trước hình ảnh) xuất hiện như được
trình bày trong hình 2.2, điều chỉnh các thiết đặt tối ưu hóa khi cần thiết và bấm vào OK. Cuối cùng, lưu
tập tin hình ảnh sẵn sàng cho web vào một vị trí trong thư mục gốc của Website.
Hình 2.1: Biểu tượng Smart Objects

Phần 2
Kháiniệm
Hình 2.2: Hộp thoại Select Image
Trong trường hợp bạn đã thực hiện bất kỳ thay đổi nào cho hình ảnh Photoshop gốc, Dreamweaver phát
hiện ra nó và hiển thị mũi tên của biểu tượng Smart Object bằng màu đỏ. Để cập nhật hình ảnh web,
bạn cần phải chọn hình ảnh web trong giao diện Design và bấm vào nút Update from Original trong
Property Inspector. Vì vậy, khi bạn sử dụng tiến trình công việc Smart Objects, bạn không cần phải mở
Photoshop để cập nhật hình ảnh web. Ngoài ra, bạn có thể thay đổi hình ảnh web mà không làm thay đổi
hoặc sửa đổi hình ảnh Photoshop.
2.2.3 Làm việc với Flash
Dreamweaver CS5 cho phép bạn xuất chuyển một tập tin Shockwave Flash (SWF) và chỉnh sửa nó sử
dụng Flash. Để chỉnh sửa tập tin SWF, Dreamweaver sử dụng tài liệu nguồn là tập tin Flash Authoring
(FLA) và tái xuất chuyển tập tin đã chỉnh sửa vào trong Dreamweaver. Để chỉnh sửa một tập tin SWF
sử dụng Flash trong Dreamweaver, bạn cần phải sử dụng Property Inspector. Sau đó, trong tài liệu
Dreamweaver, bạn bấm vào chỗ dành sẵn cho tập tin SWF để chọn nó. Sau đó, trong Property Inspector,
bạn bấm vào Edit. Ngoài ra, bạn bấm chuột phải vào chỗ dành sẵn cho tập tin SWF, và chọn Edit With
Flash từ menu ngữ cảnh.

Phần 2
Kháiniệm
Khi bạn đã chọn chỉnh sửa tập tin SWF sử dụng Flash, Dreamweaver chuyển tập trung sang Flash, và
Flash cố gắng định vị tập tin FLA cho tập tin SWF đã chọn. Trong Flash, chỉnh sửa tập tin FLA. Cửa sổ
Flash Document chỉ ra rằng bạn đang sửa đổi tập tin từ trong Dreamweaver. Sau khi chỉnh sửa tập tin,
bấm vào Done. Sau khi chỉnh sửa đã hoàn thành, Flash cập nhật tập tin FLA, tái xuất chuyển nó như tập
tin SWF vào Dreamweaver, Flash đóng lại, và sau đó trở về tập trung vào tài liệu Dreamweaver.
¾¾ Các thuộc tính tập tin SWF
Tương tự như các thuộc tính tập tin Shockwave, tập tin SWF có cùng các thuộc tính, trong đó
bạn có thể cài đặt sử dụng Property Inspector. Bảng 2.1 liệt kê các thuộc tính tập tin SWF trong
Property Inspector. Theo mặc định, bạn có thể chỉ xem một vài thuộc tính. Để xem tất cả các
thuộc tính, bấm vào mũi tên mở rộng nằm ở góc dưới bên phải của Property Inspector.
Tên thuộc tính Mô tả
ID Bạn cần phải chỉ ra một ID duy nhất cho tập tin SWF trong trường này.
W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel.
File Bạn cần phải chỉ ra đường dẫn đến tập tin phim Flash hay Shockwave. Để
làm như vậy, bấm vào biểu tượng thư mục và duyệt tập tin hoặc gõ đường
dẫn vào trường này.
Src Bạn cần phải chỉ ra đường dẫn đến tập tin FLA nguồn.
Bg Bạn có thể chỉ ra màu nền cho khu vực phim.
Edit Bạn sẽ có thể xem tùy chọn này chỉ khi bạn có Flash được cài đặt trên máy
tính của bạn. Bạn có thể sử dụng tùy chọn này để khởi động Flash và chỉnh
sửa tập tin FLA.
Class Bạn có thể sử dụng tùy chọn này để áp dụng một lớp CSS cho phim.
Loop Khi bạn chọn tùy chọn này, phim bắt đầu lại sau khi kết thúc. Nếu bạn bỏ tùy
chọn này, phim sẽ được phát chỉ một lần.
Autoplay Nếu bạn chọn tùy chọn này, phim sẽ được phát tự động. Bạn không cần
phải bấm vào nút Play.
V Space and H
Space
Bạn có thể chỉ ra số lượng điểm ảnh của khoảng trắng ở trên, dưới, và ở
cả hai bên của phim.
Quality Bạn có thể kiểm soát nhớ đệm và tải phim sử dụng thiết đặt này.
Scale Bạn có thể kiểm soát kích thước, trong đó phim sẽ được phát theo các giá
trị chiều rộng và chiều cao.
Align Bạn có thể chỉ ra sự căn chỉnh của phim trên trang.
W mode Bạn có thể kiểm soát sự xuất hiện của các phần tử HTML động (DHTML)
khác nhau cùng với tập tin SWF. Giá trị mặc định của thiết đặt này là Opaque,
đảm bảo các phần tử DHTML sẽ xuất hiện ở trên cùng của tập tin SWF.
Play Bạn có thể chọn tùy chọn này để phát phim trong cửa sổ Document.
Parameters Bạn có thể chỉ ra các tham số bổ sung để kiểm soát phim bằng cách sử
dụng hộp thoại này.
Bảng 2.1: Các thuộc tính tập tin SWF

Phần 2
Kháiniệm
2.2.4 AIR Extension for Dreamweaver
Với Adobe AIR Extension for Dreamweaver, bạn có thể tạo ra các ứng dụng Internet phong phú cho máy
tính để bàn của bạn. Vì vậy, bạn sẽ không bắt buộc phải có kết nối Internet để chạy những ứng dụng
này.
¾¾ Yêu cầu hệ thống
Sau đây là các yêu cầu phần mềm để sử dụng Adobe AIR Extension for Dreamweaver:
yy Dreamweaver CS3 hoặc mới hơn
yy Adobe Extension Manager CS3 hoặc mới hơn
yy Java JRE 1.4 hoặc mới hơn (cần thiết để tạo ra tập tin Adobe AIR)
Ghi chú: Java JRE có sẵn tại http://java.sun.com/.
Để cài đặt và chạy ứng dụng Adobe AIR trên máy tính, bạn cũng phải cài đặt Adobe AIR trên máy tính
của bạn.
¾¾ Cài đặt Adobe AIR Extension for Dreamweaver
Bạn có thể tải về Adobe AIR Extension for Dreamweaver từ http://www.adobe.com/products/air/
tools/ajax/. Trên Website này, bạn bấm kép vào tập tin mở rộng .mxp trong Windows Explorer
(Windows) hoặc trong Finder (Macintosh). Thực hiện theo các hướng dẫn trên màn hình để cài đặt
phần mở rộng. Sau khi bạn đã kết thúc quá trình cài đặt, khởi động lại Dreamweaver.
¾¾ Tạo ra một ứng dụng AIR trong Dreamweaver
Để tạo ra ứng dụng AIR dựa trên HTML trong Dreamweaver, hãy chắc chắn rằng các trang web mà
bạn muốn đóng gói vào một ứng dụng được chứa trong một Website Dreamweaver đã định nghĩa.
Trong Dreamweaver, mở trang chủ của tập hợp các trang bạn muốn đóng gói. Sau đó, trên menu
Site, bấm vào Air Application Settings. Hộp thoại AIR Application and Installer Settings được
hiển thị như được trình bày trong hình 2.3. Điền đầy đủ vào hộp thoại này và sau đó bấm vào nút
Create AIR File.
Ghi chú: Khi bạn tạo một tập tin Adobe AIR lần đầu tiên, Dreamweaver tạo ra tập tin application.xml
trong thư mục gốc của Website. Tập tin này phục vụ như là một biểu hiện, định nghĩa các thuộc tính
khác nhau của ứng dụng.

Phần 2
Kháiniệm
Hình 2.3: Hộp thoại AIR Application and Installer Settings
Bảng 2.2 liệt kê các tùy chọn khác nhau trong hộp thoại AIR Application and Installer Settings và mô
tả của chúng.
Ghi chú: Tất cả các tùy chọn được đánh dấu * là bắt buộc.
Các phần tử không gian
làm việc
Mô tả
Application File Name (Tên
tập tin ứng dụng)
Bạn cần phải chỉ ra tên sẽ được sử dụng cho tập tin thực thi ứng dụng.
Theo mặc định, trường này có tên của Website Dreamweaver. Bạn có thể
thay đổi tên nếu bạn thích.
Bạn nên lưu ý rằng tên đó chỉ được chứa các ký tự ASCII, và không thể
kết thúc bằng dấu chấm.

Phần 2
Kháiniệm
làm việc
Mô tả
Application Name (Tên ứng
dụng)
Bạn cần phải chỉ ra tên xuất hiện trên các màn hình cài đặt khi bạn cài đặt
ứng dụng trên máy tính để bàn của bạn.
Bạn nên lưu ý rằng tùy chọn này không có các hạn chế ký tự.
Application ID (Mã ứng
dụng)
Bạn cần phải chỉ ra một ID duy nhất sẽ xác định ứng dụng. Bạn có thể thay
đổi ID mặc định.
Bạn không nên sử dụng các dấu cách hoặc các ký tự đặc biệt trong ID.
Các ký tự hợp lệ là 0-9, a-z, A-Z, . (dấu chấm), và - (gạch nối).
Version (Phiên bản) Bạn cần phải chỉ ra số phiên bản cho ứng dụng của bạn.
Initial content (Nội dung
ban đầu)
Bạn cần phải chọn trang bắt đầu cho ứng dụng của bạn. Bạn bấm vào
nút Browse và chọn một tập tin mà phải nằm bên trong thư mục gốc của
Website.
Description (Mô tả) Bạn cần phải chỉ ra nội dung mô tả của ứng dụng sẽ được hiển thị khi ứng
dụng được cài đặt trên máy tính để bàn.
Copyright (Bản quyền) Bạn cần phải chỉ ra bản quyền sẽ được hiển thị trong phần thông tin About
cho các ứng dụng Adobe AIR được cài đặt trên máy Macintosh. Các ứng
dụng được cài đặt trên hệ điều hành Windows không sử dụng thông tin
này.
Window style (Kiểu cửa
sổ)
Bạn có thể chỉ ra kiểu cửa sổ hoặc màu crôm để sử dụng khi bạn chạy ứng
dụng này trên máy tính để bàn của bạn.
System Chrome sẽ bao quanh ứng dụng bằng điều khiển cửa sổ tiêu
chuẩn của hệ điều hành.
Custom Chrome (opaque) sẽ loại bỏ màu crôm chuẩn của hệ thống. Bạn
có thể tạo ra màu crôm của riêng bạn cho ứng dụng.
Custom Chrome (transparent) giống như Custom Chrome (opaque),
nhưng thêm khả năng trong suốt cho các cạnh của trang, cho phép các
cửa sổ của ứng dụng có hình dạng không phải là hình chữ nhật.
Window size (Kích thước
cửa sổ)
Bạn có thể chỉ ra kích thước của cửa sổ ứng dụng khi cửa sổ mở ra.
Icon (Biểu tượng) Bạn có thể chọn các hình ảnh tùy chỉnh cho các biểu tượng ứng dụng.
Những hình ảnh mặc định là hình ảnh Adobe AIR đi kèm với phần mở
rộng. Sử dụng hình ảnh tùy chỉnh, bạn bấm vào nút Select Icon Images.
Sau đó, trong hộp thoại Icon Images, bạn bấm vào thư mục cho mỗi kích
thước biểu tượng và chọn tập tin hình ảnh mà bạn muốn sử dụng.
Ghi chú: AIR chỉ hỗ trợ các tập tin PNG cho các hình ảnh biểu tượng ứng
dụng.

Phần 2
Kháiniệm
làm việc
Mô tả
Associated File Types (Các
loại tập tin liên kết)
Bạn có thể sử dụng tùy chọn này để kết hợp các loại tập tin với ứng dụng
của bạn.
Application Updates (Cập
nhật ứng dụng)
Bạn có thể chọn hộp kiểm này nếu bạn muốn Adobe AIR Application
Installer có được phiên bản mới nhất của ứng dụng. Theo mặc định, tùy
chọn này được chọn. Nếu bạn muốn ứng dụng của bạn thực hiện các cập
nhật của chính nó, hãy xóa bỏ hộp kiểm này.
Nếu bạn xóa bỏ hộp kiểm này, bạn cần phải viết một ứng dụng mà có thể
thực hiện cập nhật.
Included Files (Các tập tin
đi kèm)
Bạn có thể chỉ ra các tập tin hoặc thư mục cần được đưa vào trong ứng
dụng của bạn. Bạn có thể thêm các tập tin HTML và CSS, các tập tin hình
ảnh, và các tập tin thư viện JavaScript. Bạn bấm vào nút Cộng (+) để thêm
các tập tin, và biểu tượng thư mục để thêm các thư mục. Để xóa một tập
tin hoặc thư mục từ danh sách của bạn, bạn chọn tập tin hoặc thư mục và
nhấn vào nút Trừ (-).
Bạn không nên đưa vào một số tập tin nhất định, như là _mmServerScripts,
và _notes.
Digital Signature (Chữ ký
số)
Bạn bấm vào nút Set để ký ứng dụng của bạn với chữ ký số.
Program Menu Folder (Thư
mục menu của chương
trình)
Bạn có thể chỉ ra một thư mục con trong menu Windows Start mà bạn
muốn phím tắt của ứng dụng được tạo ra.
Thiết đặt này không áp dụng được trên máy Macintosh.
Destination (Điểm đến) Bạn có thể chỉ ra vị trí nơi trình cài đặt ứng dụng mới (tập tin .air) sẽ được
lưu lại. Vị trí mặc định là thư mục gốc của Website. Để chọn một địa điểm
khác, bạn bấm vào nút Browse. Tên tập tin mặc định dựa vào tên Website
với phần mở rộng air. được thêm vào.
Bảng 2.2: Các tùy chọn của hộp thoại AIR Application and Installer Settings
2.2.5 Chuyển nhập các tài liệu Microsoft Office (Chỉ Windows)
Với Dreamweaver CS5, bạn có thể trực tiếp nhập khẩu các tài liệu Microsoft Word hoặc bảng tính Excel
vào một trang web mới hoặc hiện tại. Khi bạn chuyển nhập một tài liệu Word hoặc Excel vào Dreamweaver
CS5, nó sẽ được tự động chuyển đổi thành tài liệu HTML. Khi nhận tài liệu HTML, Dreamweaver chèn nó
vào trang web. Kích thước tập tin của tài liệu HTML đã chuyển đổi phải nhỏ hơn 300KB.
Trong khi nhập khẩu một tài liệu Microsoft Office, Dreamweaver CS5 cung cấp các tùy chọn định dạng
khác nhau, như được mô tả trong bảng 2.3.
Tùy chọn định dạng Mô tả
Text Only (Chỉ văn bản) Tùy chọn này loại bỏ định dạng của văn bản gốc. Vì vậy, tùy chọn
này rất hữu ích khi bạn muốn chèn văn bản chưa định dạng.

Phần 2
Kháiniệm
Tùy chọn định dạng Mô tả
Text With Structure (Văn bản có
cấu trúc)
Tùy chọn này vẫn giữ được cấu trúc và loại bỏ định dạng cơ bản
từ nội dung của bạn. Ví dụ, bạn có thể giữ lại cấu trúc của các
đoạn văn, danh sách, và bảng biểu, trong khi loại bỏ các định dạng
khác, như là in đậm và in nghiêng.
Text With Structure Plus Basic
Formatting (Văn bản có cấu trúc
cộng thêm định dạng cơ bản)
Tùy chọn này vẫn giữ được cả cấu trúc và định dạng cơ bản của
nội dung.
Text With Structure Plus Full
Formatting (Văn bản có cấu trúc
cộng thêm định dạng đầy đủ)
Tùy chọn này giữ lại cấu trúc, định dạng HTML, và các kiểu CSS
của nội dung đã chèn vào.
Clean Up Word Paragraph Spacing
(Làm sạch giãn cách đoạn văn)
Tùy chọn này cho phép bạn loại bỏ các dấu cách dư giữa các
đoạn văn đã chèn vào sử dụng tùy chọn Text With Structure
hoặc Basic Formatting.
Bảng 2.3: Các tùy chọn định dạng
Để nhập khẩu một tài liệu Word hoặc bảng tính Excel vào Dreamweaver, đầu tiên mở trang web mà bạn
muốn chèn nó. Sau đó, trong giao diện Design, thực hiện một trong các bước sau:
¾¾ Bạn có thể kéo tập tin vào trang web nơi bạn muốn chèn nội dung.
¾¾ Trên menu File, bạn bấm vào lệnh Import, và sau đó chọn Word Document hoặc Excel Document
mong muốn từ menu con.
¾¾ Tiếp theo, trong hộp thoại Insert Document, bạn duyệt tài liệu Word hoặc bảng tính Excel mong
muốn mà bạn muốn thêm vào. Cuối cùng, từ danh sách thả xuống Formatting, chọn các tùy
chọn định dạng mà bạn muốn và bấm vào Open. Các nội dung của tài liệu Word hoặc Excel bây
giờ sẽ xuất hiện trong trang web của bạn.
Bạn có thể trực tiếp nhập khẩu tài liệu Microsoft Office vào Dreamweaver. Ngoài ra, bạn có thể tạo liên
kết đến các tài liệu Microsoft Office vào trang web nơi bạn muốn chuyển nhập nội dung. Để tạo liên kết
đến một tài liệu Microsoft Office, hãy mở trang mà bạn muốn tạo liên kết. Sau đó, kéo tập tin từ vị trí hiện
tại của nó đến vị trí mong muốn trong trang Dreamweaver của bạn. Hộp thoại Insert Document xuất
hiện. Thêm nữa, bạn chọn Create A Link, và sau đó bấm vào OK.
Để đảm bảo rằng tài liệu đã liên kết có sẵn khi bạn xuất bản Website, tài liệu phải được đặt trong thư
mục gốc của Website. Trong khi tạo liên kết, nếu tài liệu nằm bên ngoài thư mục gốc của Website,
Dreamweaver sẽ nhắc bạn chép tài liệu vào thư mục gốc của Website.
Khi bạn tải trang web của bạn lên máy chủ web, bạn cũng phải tải lên tập tin Word hoặc Excel đã liên kết
để đảm bảo rằng trang web được liên kết tới tài liệu Word hoặc bảng tính Excel.
Bạn có thể thay đổi văn bản của liên kết, theo mặc định là tên của tập tin đã liên kết. Ngoài việc chuyển
nhập toàn bộ nội dung của một tập tin, bạn có thể sao chép những phần nội dung cụ thể từ tài liệu Word
của bạn và dán nó vào Dreamweaver CS5.

Phần 2
Kháiniệm
Khi bạn chép các phần nội dung cụ thể của từ một tài liệu Word sang Dreamweaver CS5, nó không ảnh
hưởng đến định dạng của nội dung.
2.3 Làm việc với danh sách
Trình bày nội dung và đồ họa trên trang web theo một cách có tổ chức cũng quan trọng như chiều sâu
nội dung. Dreamweaver CS5 cung cấp cho bạn các phương pháp khác nhau để tổ chức văn bản trên
trang web của bạn. Một trong những phương pháp này là sử dụng các danh sách cho phép bạn tách các
dữ liệu cụ thể ra khỏi phần còn lại của nội dung. Trong Dreamweaver CS5, danh sách gạch đầu dòng và
đánh số được gọi tương ứng là danh sách không có thứ tự và có thứ tự. Ngoài các danh sách có thứ tự
và không có thứ tự thường được dùng nhiều nhất, Dreamweaver CS5 đưa vào danh sách định nghĩa và
danh sách lồng nhau.
2.3.1 Danh sách gạch đầu dòng và đánh số
Để tạo ra danh sách trong Dreamweaver CS5, bạn có thể trực tiếp gõ văn bản với danh sách gạch đầu
dòng hoặc đầu tiên gõ văn bản và sau đó chuyển đổi nó thành một danh sách. Bạn có thể tạo ra một
danh sách cho văn bản đã được gõ vào bằng cách chọn nội dung mà bạn muốn định dạng làm danh
sách. Sau đó, trong HTML Property Inspector, bạn bấm vào nút Bulleted or Numbered List, hoặc từ
menu Format, bấm vào lệnh List và chọn loại danh sách mong muốn - Unordered List, Ordered List,
hoặc Definition List từ menu con. Tham khảo hình 2.4 và 2.5.
Hình 2.4: Ví dụ về danh sách có thứ tự và danh sách không có thứ tự

Phần 2
Kháiniệm
Hình 2.5: Hộp thoại List Properties
Ghi chú: Theo mặc định, không có dấu cách giữa các điểm liên tiếp trong danh sách. Để thêm
khoảng cách giữa các điểm, chọn toàn bộ danh sách và từ Format list trên Property Inspector, chọn
Paragraph.
¾¾ Thay đổi dấu đầu dòng hoặc kiểu đánh số
Dreamweaver CS5 cung cấp cho bạn các loại dấu đầu dòng và số khác nhau, như là Bullet (Circle)
và Square cho các danh sách gạch đầu dòng và Roman và Alphabet cho các danh sách đánh số.
Bạn có thể áp dụng những kiểu danh sách này sử dụng danh sách hộp thoại List Properties. Bạn
có thể thay đổi kiểu của toàn bộ danh sách hoặc một điểm cụ thể trong danh sách. Bạn cũng có tùy
chọn để thay đổi kiểu của toàn bộ danh sách bằng cách đặt điểm chèn bất cứ nơi nào trong danh
sách. Sau đó, bạn có thể chọn một trong hai tùy chọn, như sau:
yy Trên menu Format, bấm vào lệnh List, và sau đó chọn lệnh Properties từ menu con.
yy Hoặc trên Property Inspector, bạn bấm vào nút List Item. Hộp thoại List Properties xuất
hiện như được trình bày trong hình 2.5.
Sau khi chọn từ hai tùy chọn, trong hộp danh sách thả xuống List type, chọn kiểu danh sách. Tùy
chọn này rất hữu ích cho việc thay đổi kiểu dấu đầu dòng thành kiểu đánh số hoặc ngược lại. Sau
đó, từ danh sách thả xuống Style, chọn một kiểu cụ thể. Nếu bạn chọn Numbered List từ danh
sách thả xuống List type, các trường Start count (Bắt đầu số đếm) và Reset count to (Đặt lại số
đếm) được kích hoạt tự động. Trong trường văn bản Start count, nhập số bắt đầu mà từ đó danh
sách sẽ bắt đầu. Cuối cùng, bấm vào OK để áp dụng các thay đổi.
Trong trường hợp, bạn muốn thay đổi kiểu của một thời điểm trong danh sách, đặt con trỏ trong
điểm mà bạn muốn thay đổi kiểu.

Phần 2
Kháiniệm
Sau đó, chọn một trong hai tùy chọn:
yy Trên menu Format, bạn bấm vào lệnh List, và sau đó chọn lệnh Properties từ menu con.
yy Trên Property Inspector, bạn bấm vào nút List Item.
Trong hộp thoại List Properties, từ danh sách thả xuống New Style trong thể loại List Item, hãy chọn
một kiểu mới. Tiếp theo, trong trường văn bản Reset count to, nhập số mà bạn muốn khởi động lại danh
sách để thay đổi đánh số các mục trong danh sách. Cuối cùng, bấm vào OK để áp dụng các thay đổi.
¾¾ Loại bỏ các dấu đầu dòng hoặc số
Bạn có thể loại bỏ các dấu đầu dòng hoặc số khỏi toàn bộ danh sách hoặc từ các điểm đã chọn
trong danh sách. Bạn có thể chọn toàn bộ danh sách, hoặc đặt con trỏ vào điểm mà từ đó bạn
muốn loại bỏ các dấu đầu dòng hoặc số.
Tiếp theo, thực hiện một trong các cách sau:
yy Trên menu Format, bấm vào lệnh List, và sau đó bấm vào lệnh None hoặc Unordered
List để loại bỏ các dấu đầu dòng.
yy Trên menu Format, bạn bấm vào lệnh List, và sau đó bấm vào lệnh None hoặc Ordered
List để loại bỏ các số.
yy Trên Property Inspector, bấm vào tùy chọn Unordered List hoặc Ordered List để loại bỏ
tương ứng các dấu đầu dòng hoặc số.
2.3.2 Danh sách định nghĩa
Dreamweaver CS5 bao gồm một loại danh sách đặc biệt, được gọi là danh sách định nghĩa, được sử
dụng để hiển thị các thuật ngữ trong một bảng thuật ngữ và các định nghĩa tương ứng. Xem hình 2.6.
Hình 2.6: Danh sách định nghĩa

Phần 2
Kháiniệm
Để tạo ra một danh sách định nghĩa, trước tiên bạn cần phải gõ các thuật ngữ và các định nghĩa mà bạn
muốn đưa vào trong danh sách. Tiếp theo, bạn cần chọn các thuật ngữ và định nghĩa của chúng và sau
đó trên menu Format, nhấn vào lệnh List, và chọn lệnh Definition List từ menu con.
Trong Dreamweaver CS5, bạn cũng có thể loại bỏ danh sách định nghĩa mà bạn đã tạo ra. Ngoài ra, bạn
cũng có thể chọn để xóa các thuật ngữ cụ thể từ danh sách định nghĩa.
Để loại bỏ danh sách định nghĩa, bạn cần phải chọn toàn bộ danh sách và sau đó chọn lệnh Definition
List từ menu Format dưới menu con của lệnh List. Tuy nhiên, nếu bạn muốn loại bỏ các thuật ngữ định
nghĩa cụ thể từ Definition List, bạn cần phải chọn những thuật ngữ đó và sau đó chọn lệnh Definition
List.
2.3.3 Danh sách lồng nhau
Trong Dreamweaver CS5, bạn cũng có thể tạo ra các danh sách lồng nhau. Bạn có thể làm như vậy bằng
cách chọn các mục cần được lồng trong một danh sách. Sau đó, trên Property Inspector, sau đó bấm
vào nút Blockquote, hoặc trên menu Format, bạn bấm vào Indent.
Điều này sẽ tạo ra một danh sách lồng nhau như được mô tả trong ví dụ được trình bày trong hình 2.7.
Hình 2.7: Danh sách lồng nhau

Phần 2
Kháiniệm
Hình 2.8: Danh sách lồng nhau đã loại bỏ
Nếu bạn muốn loại bỏ một danh sách lồng nhau, bạn cần phải chọn các mục lồng nhau và sau đó bấm
vào nút Remove Blockquote trên Property Inspector. Sau khi bạn loại bỏ tính năng lồng nhau; danh
sách gạch đầu dòng sẽ giống danh sách bình thường như được trình bày trong hình 2.8.
2.4 Làm việc với bảng và dữ liệu dạng bảng
Ngoài các danh sách, trong Dreamweaver CS5, bạn có thể tạo ra các bảng cho phép bạn tổ chức nội
dung của bạn hiệu quả hơn và theo một cách có cấu trúc.
2.4.1 Chèn bảng
Để tạo ra một bảng mới trong tài liệu của bạn, bạn sử dụng bảng điều khiển Insert hoặc menu Insert.
Sau đó, bạn thêm văn bản và các hình ảnh vào các ô bảng cùng một cách mà bạn thêm văn bản và hình
ảnh bên ngoài của bảng.
Trong giao diện Design của cửa sổ Document, bạn đặt điểm chèn nơi bạn muốn bảng xuất hiện. Sau
đó, menu Insert, bấm vào lệnh Table. Ngoài ra, trong thể loại Common của bảng điều khiển Insert, bạn
bấm vào Table.

Phần 2
Kháiniệm
Hộp thoại Table được hiển thị như được trình bày trong hình 2.9.
Hình 2.9: Hộp thoại Table
Hình 2.10: Bảng đã chèn trong cửa sổ Document
Cài đặt các thuộc tính của hộp thoại Table và bấm vào OK để tạo bảng. Bảng xuất hiện trong cửa sổ
Document như được trình bày trong hình 2.10.

Phần 2
Kháiniệm
2.4.2 Cài đặt các thuộc tính bảng
Một khi bạn đã chèn bảng vào tài liệu Dreamweaver, bạn có thể chỉnh sửa các thuộc tính của nó bất cứ
lúc nào. Bạn sử dụng Property Inspector để chỉnh sửa bảng và các thuộc tính của nó. Để làm điều này,
đầu tiên bạn chọn bảng. Sau đó, trong Property Inspector như được trình bày trong hình 2.11, bạn thay
đổi các thuộc tính thích hợp theo yêu cầu.
Hình 2.11: Các thuộc tính bảng trong Property Inspector
Bảng 2.4 liệt kê các thuộc tính bảng trong Property Inspector.
Thuộc tính bảng Mô tả
Table ID Bạn chỉ ra một ID duy nhất của bảng trong trường này.
Rows and Cols Bạn chỉ ra số lượng hàng và cột.
W Bạn chỉ ra chiều rộng của bảng tính theo pixel, hoặc là tỷ lệ phần trăm chiều
rộng cửa sổ trình duyệt.
Bạn thường không cần phải cài đặt chiều cao của bảng.
CellPad Bạn chỉ ra số lượng pixel giữa nội dung của ô và ranh giới ô.
CellSpace Bạn chỉ ra số lượng pixel giữa các ô bảng liền kề.
Align Tùy chọn này xác định nơi bảng xuất hiện, liên quan đến các phần tử khác
trong cùng một đoạn văn, như là văn bản hoặc hình ảnh.
Left căn bảng sang bên trái của các phần tử khác (để văn bản trong cùng một
đoạn văn bao bọc xung quanh bảng sang bên phải).
Right căn bảng sang bên phải của các phần tử khác (với văn bản bao bọc
xung quanh nó sang bên trái).
Center căn bảng vào giữa của trang (với văn bản xuất hiện phía trên và/hoặc
dưới bảng).
Default áp dụng căn chỉnh mặc định.
Khi căn chỉnh được đặt thành Default, nội dung khác không được hiển thị bên
cạnh bảng. Hiển thị bảng bên cạnh nội dung khác, sử dụng căn chỉnh Left hoặc
Right.
Border Bạn chỉ ra độ rộng, theo pixel, của các viền của bảng.
Class Tùy chọn này đặt một lớp CSS cho bảng.

Phần 2
Kháiniệm
Thuộc tính bảng Mô tả
Clear Column
Widths
Tùy chọn này xóa tất cả các giá trị chiều rộng cột đã chỉ định một cách rõ ràng
khỏi bảng đó.
Clear Row Heights Tùy chọn này xóa tất cả các giá trị chiều cao hàng đã chỉ định một cách rõ ràng
khỏi bảng đó.
Convert Table
Widths To Pixels
Tùy chọn này đặt chiều rộng của mỗi cột trong bảng thành chiều rộng hiện tại
của nó tính trong pixel (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng
hiện tại của nó tính theo pixel).
Convert Table
Heights To Pixels
Tùy chọn này đặt chiều cao của mỗi cột trong bảng thành chiều rộng hiện tại
của nó tính trong pixel (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng
hiện tại của nó tính theo pixel).
Convert Table
Widths To Percent
Tùy chọn này đặt chiều rộng của mỗi cột trong bảng thành chiều rộng hiện
tại của nó được thể hiện theo tỷ lệ phần trăm của chiều rộng của cửa sổ
Document (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng hiện tại của
nó theo tỷ lệ phần trăm của chiều rộng của cửa sổ Document).
Convert Table
Heights To Percent
Tùy chọn này đặt chiều cao của mỗi cột trong bảng thành chiều rộng hiện
tại của nó được thể hiện theo tỷ lệ phần trăm của chiều rộng của cửa sổ
Document (còn đặt chiều cao của toàn bộ bảng thành chiều rộng hiện tại của
nó theo tỷ lệ phần trăm của chiều cao của cửa sổ Document).
Bảng 2.4: Các thuộc tính bảng
2.4.3 Bảng lồng nhau
Trong Dreamweaver CS5, bạn có thể tạo ra một bảng lồng nhau bên trong ô của bảng khác như được
trình bày trong hình 2.12. Giống như bất kỳ bảng nào khác, bạn có thể cài đặt các thuộc tính của một
bảng lồng nhau. Bảng lồng nhau tự động lấy chiều rộng của ô trong đó nó xuất hiện.
Hình 2.12: Bảng lồng nhau

Phần 2
Kháiniệm
Hình 2.13: Hộp thoại Import Tabular Data
Bạn có thể lồng một bảng vào trong một ô bảng bằng cách nhấn vào bên trong bảng hiện có và chọn một
trong các tùy chọn sau:
¾¾ Trên menu Insert, bấm vào lệnh Table.
¾¾ Trong thể loại Common của bảng điều khiển Insert, bấm vào Table.
Sau khi chọn từ một trong hai lựa chọn, hộp thoại Table xuất hiện. Bây giờ, nhập số hàng, cột, chiều rộng,
và các thuộc tính viền cho bảng và bấm vào OK.
2.4.4 Chuyển nhập dữ liệu vào bảng
Ngoài việc tạo ra một bảng cho dữ liệu dạng bảng sử dụng Dreamweaver CS5, bạn có thể nhập dữ liệu
dạng bảng được tạo ra trong một ứng dụng khác, như là Microsoft Excel. Những dữ liệu trong ứng dụng
khác nên được lưu lại ở định dạng văn bản định giới, nơi các mục được phân cách bằng dấu phẩy, dấu
hai chấm, dấu chấm phẩy, và các ký tự phân cách khác. Sau khi nhập khẩu, bạn có thể định dạng dữ
liệu này như một bảng.
Ghi chú: Để chuyển đổi một tập tin thành định dạng được phân định trong Excel, trong hộp thoại Save
As, chọn bất kỳ tùy chọn phân định, như là là Text (định giới bằng tab) hoặc Formatted Text (định giới
bằng dấu cách).
Bạn có thể chuyển nhập dữ liệu dạng bảng bằng cách sử dụng lệnh Tabular Data nằm ở menu File. Trên
menu File, bấm vào lệnh Import và sau đó chọn lệnh Tabular Data từ menu con. Ngoài ra, trên menu
Insert, nhấn vào lệnh Table Objects, và sau đó bấm vào Import Tabular Data từ menu con. Hộp thoại
Import Tabular Data xuất hiện như được trình bày trong hình 2.13.
Bây giờ, trong hộp thoại Import Tabular Data, bấm vào Browse để chọn tập tin bạn muốn được chuyển
nhập. Tiếp theo, trong hộp danh sách Delimiter, chọn dấu tách được sử dụng trong tập tin của bạn. Nếu
bạn chọn Other, khi đó một hộp văn bản sẽ xuất hiện nơi bạn có thể nhập dấu tách.

Phần 2
Kháiniệm
Ghi chú: Để chuyển nhập dữ liệu dạng bảng đúng cách, bạn phải chỉ ra dấu tách được sử dụng trong
tập tin.
Trong trường Table width, thực hiện một trong các cách sau:
¾¾ Chọn tùy chọn Fit to data để làm cho mỗi cột đủ rộng để vừa với chuỗi dài nhất.
¾¾ Chọn tùy chọn Set to để chỉ ra chiều rộng bảng theo pixel hoặc là tỷ lệ phần trăm chiều rộng của
cửa sổ trình duyệt.
Trong trường Cell padding, chỉ ra không gian giữa nội dung và ranh giới của các ô tính theo pixel. Bạn
cũng có thể chỉ ra không gian giữa các ô bảng liền kề tính theo pixel trong trường Cell spacing.
Danh sách thả xuống Format top row (Định dạng hàng trên cùng) có những tùy chọn bạn có thể chọn
định dạng mà bạn muốn áp dụng cho hàng đầu tiên của bảng. Cuối cùng, trong trường Border, chỉ ra
chiều rộng viền theo pixel và bấm vào OK. Dữ liệu được chuyển nhập vào Dreamweaver ở dạng bảng
với các định dạng đã chỉ định.
2.4.5 Phân loại dữ liệu trong bảng
Dreamweaver CS5 đưa vào tùy chọn Sort Table cho phép bạn sắp xếp dữ liệu trong bảng. Ví dụ, nếu
bạn có một bảng các hồ sơ nhân viên, bạn có thể sắp xếp theo thứ tự abc hoặc theo thứ tự tăng dần
hoặc giảm dần bằng cách sử dụng tùy chọn Sort Table.
Để sắp xếp các bảng, chọn bảng và trên menu Commands, nhấn vào lệnh Sort Table. Hộp thoại Sort
Table xuất hiện như được trình bày trong hình 2.14.
Hình 2.14: Hộp thoại Sort Table

Phần 2
Kháiniệm
Hình 2.15: Hộp thoại Export Table
Hộp thoại Sort Table cung cấp tùy chọn sau đây:
¾¾ Với hộp danh sách thả xuống Sort by, bạn có thể chỉ ra giá trị cột sẽ được sử dụng để sắp xếp
các hàng của bảng.
¾¾ Dưới hai hộp danh sách thả xuống Order, bạn có thể chỉ ra xem sắp xếp các cột theo thứ tự abc
hay dạng số và tăng dần hay giảm dần.
¾¾ Chỉ ra các trường Then by và Order để sắp xếp nhiều cột.
¾¾ Trong trường Options, chọn một trong các hộp kiểm sau đây:
yy Chọn Sort includes the first row (Sắp xếp bao gồm hàng đầu tiên) để đưa hàng đầu tiên
của bảng vào sắp xếp.
yy Chọn Sort header rows (Sắp sếp các hàng đầu đề) để sắp xếp tất cả các hàng trong phần
chủ đề của bảng, nếu có, sử dụng cùng các tiêu chí như các hàng phần thân.
yy Chọn Sort footer rows (Sắp sếp các hàng cuối cùng) để sắp xếp tất cả các hàng trong
phần dưới cùng của bảng, nếu có, sử dụng cùng các tiêu chí như các hàng phần thân.
yy Chọn Keep all row colors the same after the sort has been completed (Giữ tất cả các
màu hàng như nhau sau khi đã hoàn thành việc sắp xếp) để chỉ ra rằng các thuộc tính hàng
của bảng, như là màu và phông chữ, nên duy trì liên kết với cùng một nội dung sau khi sắp
xếp.
Ghi chú: Trong trường hợp, các hàng của bảng được định dạng với hai màu xen kẽ, bạn không chọn
tùy chọn này. Nếu không, các hàng của bảng sẽ mất màu xen kẽ đã áp dụng. Nếu các thuộc tính hàng
cụ thể cho nội dung của mỗi hàng, khi đó chọn tùy chọn này để đảm bảo rằng những thuộc tính đó vẫn
còn được liên kết với đúng các hàng trong bảng đã sắp xếp.
Cuối cùng, bấm vào OK hoặc Apply. Dữ liệu trong bảng được sắp xếp theo các thiết đặt đã chỉ ra trong
hộp thoại Sort Table.

Phần 2
Kháiniệm
2.4.6 Xuất chuyển dữ liệu bảng
Dreamweaver CS5 còn cho phép bạn xuất chuyển dữ liệu đã nhập vào trong bảng từ Dreamweaver vào
một tập tin văn bản tách biệt bằng các dấu tách, như là các tab, dấu phẩy, dấu hai chấm, dấu chấm phẩy,
hoặc dấu cách. Để làm như vậy, đặt điểm chèn vào bất kỳ ô nào. Sau đó, trên menu File, bấm vào lệnh
Export, và sau đó chọn lệnh Table từ menu con. Hộp thoại Export Table xuất hiện như được trình bày
trong hình 2.15.
Như được trình bày trong hộp thoại, trong trường Delimiter, bạn chỉ ra dấu tách sẽ được sử dụng để
tách các mục trong tập tin đã xuất chuyển. Trong trường Line Breaks, bạn chỉ ra hệ điều hành, Windows,
Macintosh, hoặc UNIX, được sử dụng cho việc mở tập tin đã xuất chuyển. Cuối dòng văn bản được chỉ
định khác nhau trong các hệ điều hành khác nhau. Bây giờ, bạn bấm vào Export. Trong hộp thoại Export
Table As, gõ tên của tập tin sẽ chứa các dữ liệu đã xuất khẩu. Cuối cùng, bạn bấm vào Save. Cuối cùng,
tập tin phân tách với tên được chỉ ra trong hộp thoại Export Table As được tạo ra.
2.4.7 Lần vết ảnh
Tính năng lần vết ảnh của Dreamweaver CS5 cho phép bạn dễ dàng căn chỉnh các đối tượng trên một
trang web. Tính năng lần vết ảnh cho phép bạn đặt thiết kế trang web làm nền mờ có thể được sử dụng
làm tham chiếu để đưa các phần tử HTML lên trên cùng của nó. Bạn có thể dễ dàng đặt hình ảnh riêng
lẻ và các phần tử văn bản bạn muốn đưa trực tiếp vào trang web của bạn lên hình ảnh lần vết, bởi hình
ảnh lần vết không thấy được trong trình duyệt. Để chèn một hình ảnh lần vết, trên menu View, nhấn vào
lệnh Tracing Image, và sau đó bấm vào lệnh Load từ trình đơn phụ. Bây giờ, trong hộp thoại Select
Image Source, chọn tập tin hình ảnh bạn muốn chèn và bấm vào OK.
Tiếp theo, trong hộp thoại Page Properties, điều chỉnh thanh trượt Image Transparency để đặt độ trong
suốt của hình ảnh và bấm vào OK. Hình ảnh lần vết được chèn vào trong tài liệu như được trình bày
hình 2.16.
Hình 2.16: Ảnh lần vết đã chèn

Phần 2
Kháiniệm
Sau khi đã học được cách để chèn hình ảnh lần vết trong tài liệu, bạn cũng có thể trình bày hoặc ẩn hình
ảnh lần vết trong cửa sổ Document. Để làm như vậy, trên menu View, nhấn vào lệnh Tracing Image và
sau đó chọn lệnh Show từ menu con. Bạn cũng có thể thay đổi vị trí của hình ảnh lần vết bằng cách chọn
lệnh Adjust Position từ menu con của lệnh Tracing Image trong menu View. Khi lựa chọn nó, hộp thoại
Adjust Tracing Image Position (Điều chỉnh vị trí hình ảnh lần vết) xuất hiện.
Bây giờ, nhập các giá trị X và Y để định vị hình ảnh ở vị trí chính xác. Nhấn các phím mũi tên để di
chuyển hình ảnh mỗi lần một pixel. Để di chuyển hình ảnh năm pixel một lần, bấm vào phím Shift và
phím mũi tên cùng một lúc.
Bạn cũng có tùy chọn để thiết lập lại vị trí của hình ảnh. Để làm như vậy, hãy chọn lệnh Reset Position
từ menu con của lệnh Tracing Image trong menu View. Khi chọn tùy chọn này, vị trí hình ảnh thiết lập
lại vị trí ban đầu của nó (X = 0 và Y = 0).
Cuối cùng, để căn chỉnh hình ảnh lần vết theo một phần tử đã chọn, hãy chọn lệnh Align with Selection
từ menu con của lệnh Tracing Image trong menu View. Như vậy, hình ảnh được căn chỉnh theo góc trên
bên trái của phần tử đã chọn.
2.5 Hiểu các liên kết
Liên kết là mã máy tính kết nối các trang web với nhau trong một Website. Sau khi thiết lập một Website
cục bộ nơi bạn lưu trữ các tài liệu Website và tạo ra một trang web, bạn cần phải tạo ra các liên kết từ
một tài liệu Website sang tài liệu khác. Liên kết dẫn đến các phần cụ thể của một trang web hoặc tới một
trang web khác trong một Website.
Bạn có thể thiết lập các liên kết siêu văn bản cho các tài liệu, hình ảnh, các tập tin đa phương tiện, hoặc
chương trình có thể tải về theo các cách khác nhau. Bạn cũng có thể tạo ra các liên kết đến bất kỳ văn
bản hoặc hình ảnh nào bất cứ nơi nào trong một tài liệu, như là trong bảng, lớp hay khung.
2.5.1 Các loại liên kết
Trong Dreamweaver CS5, bạn có thể tạo ra các loại liên kết sau đây:
¾¾ Liên kết nội bộ: Liên kết nội bộ cho phép bạn liên kết các tài liệu trong một Website.
¾¾ Liên kết bên ngoài: Liên kết bên ngoài cho phép bạn liên kết các tài liệu bên ngoài Website cục
bộ.
¾¾ Liên kết email: Liên kết email mở một email mà từ đó bạn có thể sử dụng để gửi email.
¾¾ Liên kết đến các dấu neo có tên: Dấu neo có tên là nơi mà bạn muốn liên kết nhảy tới đó. Liên kết
các dấu neo có tên được người truy cập tới vị trí đã chỉ ra bằng dấu neo có tên. Những liên kết
này có thể được tạo ra để chuyển đến một khu vực cụ thể trên cùng một trang web hoặc tới một
trang web khác. Các dấu neo có tên cho phép chúng ta cài đặt các dấu mốc trong một tài liệu,
thường được đặt trong một phần cụ thể hoặc ở phần đầu của tài liệu.

Phần 2
Kháiniệm
¾¾ Để tạo ra một liên kết đến dấu neo có tên, trước tiên bạn cần phải tạo ra dấu neo có tên và sau
đó tạo ra một liên kết đến dấu neo có tên đó.
2.5.2 Các loại đường dẫn liên kết
Để tạo các liên kết, bạn phải có một sự hiểu biết đúng về đường dẫn tập tin giữa các tài liệu mà bạn
muốn liên kết.
Mỗi trang web có một địa chỉ duy nhất, được gọi là Uniform Resource Locator (URL). Khi bạn tạo liên
kết đến một tài liệu, bạn cung cấp địa chỉ URL của tài liệu mà bạn đang liên kết tới như một đường dẫn.
Tuy nhiên, để tạo ra một liên kết cục bộ, mà là một liên kết từ một tài liệu tới tài liệu khác trên cùng một
Website, bạn thường không chỉ ra toàn bộ URL của tài liệu mà bạn đang liên kết tới. Bạn chỉ cần chỉ ra
một đường dẫn tương đối từ tài liệu hiện tại hoặc từ thư mục gốc của Website tới tài liệu được liên kết.
Trong Dreamweaver CS5, ba loại đường dẫn liên kết có thể được xác định, cụ thể như sau:
¾¾ Đường dẫn tuyệt đối
Trong đường dẫn tuyệt đối, bạn cần cung cấp đầy đủ địa chỉ URL của tài liệu đã liên kết, bao gồm
cả giao thức được sử dụng, thường là http:// cho các trang web.
Ví dụ, http://www.adobe.com/support/dreamweaver/contents.html là đường dẫn tuyệt đối. Bạn sử
dụng đường dẫn tuyệt đối để tạo ra liên kết đến một tài liệu, nằm trên máy chủ khác.
¾¾ Đường dẫn tương đối trong tài liệu
Trong Dreamweaver CS5, để tạo ra các liên kết giữa các trang web trong một Website, bạn sử
dụng các đường dẫn tương đối trong tài liệu. Đường dẫn tương đối trong tài liệu không bao gồm
phần URL tuyệt đối giống nhau cho cả tài liệu hiện hành và tài liệu đã liên kết.
Chủ yếu, bạn sử dụng các đường dẫn tương đối trong tài liệu, khi các tài liệu mà bạn muốn liên
kết ở trong cùng một thư mục và có khả năng vẫn cùng nhau. Tuy nhiên, bạn cũng có thể sử dụng
đường dẫn tương đối trong tài liệu để liên kết đến tài liệu trong một thư mục khác. Để làm như vậy,
bạn phải chỉ ra đường dẫn thông qua hệ thống phân cấp thư mục từ tài liệu hiện tại đến tài liệu đã
liên kết.
Khi bạn cần phải liên kết tài liệu vào một tập tin trong cùng một thư mục, bạn chỉ cần cung cấp tên
của tập tin mà bạn muốn liên kết.
Mặt khác, nếu tập tin mà bạn muốn liên kết có trong một thư mục con của thư mục tài liệu hiện tại,
bạn cần phải chỉ ra tên của thư mục con, theo sau là một dấu gạch chéo, và cuối cùng là tên tập
tin để liên kết.
Khi tập tin có trong thư mục mẹ trong đó tài liệu hiện tại đang hiện diện, đặt tiền tố tên tập tin với
một dấu gạch chéo (/).
Điều này cho thấy rằng tập tin đang có mặt ở một mức cao hơn so với mức của tài liệu hiện tại
trong hệ thống phân cấp thư mục.

Phần 2
Kháiniệm
¾¾ Đường dẫn tương đối so với gốc Website
Đường dẫn tương đối so với gốc Website cung cấp đường dẫn từ thư mục gốc của Website đến
một tài liệu. Nó bắt đầu bằng một dấu gạch chéo, viết tắt cho thư mục gốc của Website. Ví dụ, /
support/tips.html là một đường dẫn tương đối so với thư mục gốc tới tập tin tips.html trong thư mục
con hỗ trợ của thư mục gốc của Website.
Bạn nên sử dụng các đường dẫn tương đối so với gốc để chỉ ra các liên kết trong một Website
trong đó bạn cần phải thường xuyên di chuyển các tập tin HTML từ một thư mục sang thư mục
khác. Khi bạn di chuyển một tài liệu có chứa các liên kết tương đối so với gốc, bạn không cần phải
thay đổi các liên kết. Ví dụ, nếu bạn di chuyển một tập tin HTML có sử dụng các liên kết tương đối
so với gốc cho các tập tin phụ thuộc, như là hình ảnh, các liên kết tập tin phụ thuộc của nó vẫn còn
hợp lệ. Tuy nhiên, khi bạn di chuyển hoặc đổi tên các tài liệu được liên kết đến các liên kết tương
đối so với gốc, bạn cần phải cập nhật những liên kết này, ngay cả khi các đường dẫn tương đối
trong tài liệu không thay đổi. Ví dụ, nếu bạn di chuyển một thư mục, tất cả các liên kết tương đối
so với gốc đến các tập tin trong thư mục đó phải được cập nhật.
Ghi chú: Khi bạn di chuyển các tập tin, bạn có thể dễ dàng cập nhật các liên kết tương ứng của tập tin
sử dụng bảng điều khiển Site. Hãy chắc chắn rằng bạn đã hiểu rõ những ưu điểm và hạn chế của các
đường dẫn tương đối so với gốc. Trong trường hợp bạn không quen thuộc với các đường dẫn tương
đối so với gốc, đề nghị bạn nên sử dụng các đường dẫn tương đối trong tài liệu.
2.6 Tạo các liên kết
Dreamweaver CS5 cho phép bạn thêm các liên kết đến một hình ảnh, văn bản, hoặc đối tượng vào tài
liệu khác, hoặc vào một phần cụ thể của tài liệu, sử dụng Property Inspector. Hình 2.17 và 2.18 hiển thị
tương ứng hộp thoại Adjust Tracing Image Position (Điều chỉnh vị trí hình ảnh theo vết) và các thuộc
tính hiển thị liên kết Property Inspector.
Hình 2.17: Hộp thoại Adjust Tracing Image Position

Phần 2
Kháiniệm
Hình 2.18: Các thuộc tính hiển thị liên kết Property Inspector
Dreamweaver tạo ra một thẻ dấu neo, đó là thẻ HTML để tạo liên kết siêu văn bản, cho các đối tượng
hoạt động như liên kết. Ví dụ, bạn muốn liên kết văn bản “giới thiệu” vào tập tin có tên là aboutus.htm
trong một tài liệu. Trong trường hợp này, mã nguồn HTML cho liên kết như sau:
<a href = “aboutus.htm”>aboutus </a>
2.6.1 Liên kết với Property Inspector
Để liên kết một đối tượng, hình ảnh, hoặc văn bản, để một tập tin cụ thể, bạn làm theo các bước sau:
1. Trong cửa sổ Document, bạn chọn văn bản hoặc hình ảnh, sẽ hoạt động như một liên kết.
2. Trên menu Window, nhấn vào lệnh Properties để mở Property Inspector.
3. Bấm vào biểu tượng thư mục đó là Browse for File bên phải của trường Link để duyệt và chọn
một tập tin. Hộp thoại Select File xuất hiện. Ở đây bạn có thể điều hướng và chọn tập tin mà bạn
muốn liên kết để mở.
4. Trong hộp thoại Select File, từ hộp danh sách thả xuống Relative to, bạn chọn Document hoặc
Site Root để chỉ ra xem đường dẫn có phải là tương đối so với tài liệu hay tương đối so với thư
mục gốc của Website.
5. Bấm vào OK để áp dụng liên kết.
6. Trong Property Inspector, từ hộp danh sách thả xuống Target, thực hiện một trong các cách
sau:
¾¾ Chọn _blank để mở tài liệu được liên kết trong một cửa sổ trình duyệt mới chưa đặt tên.
¾¾ Chọn _parent để mở tài liệu được liên kết trong tập khung mẹ hoặc cửa sổ của khung
chứa liên kết. Nếu khung chứa liên kết không được lồng nhau, khi đó tài liệu đã liên kết
được tải vào cửa sổ trình duyệt đầy đủ.
¾¾ Chọn _self để mở tài liệu được liên kết trong cùng một khung hoặc cửa sổ như liên kết.

Phần 2
Kháiniệm
¾¾ Chọn _top để mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủ, do đó loại bỏ tất cả
các khung.
¾¾ Bây giờ văn bản hoặc hình ảnh liên kết đến tài liệu khác như được trình bày trong hình 2.19.
Hình 2.19: Liên kết trong cửa sổ tài liệu
Như được trình bày trong hình 2.19, văn bản liên kết bây giờ xuất hiện gạch dưới và có màu khác. Bạn
có thể bấm vào liên kết mà sẽ đưa bạn đến trang được liên kết.
2.6.2 Gắn các hành vi Javascript vào liên kết
Dreamweaver CS5 cho phép bạn gắn một hành vi Javascript vào bất kỳ liên kết nào trong một tài liệu.
Bạn có thể sử dụng các hành vi sau đây khi chèn các phần tử đã liên kết vào tài liệu:
¾¾ Set text of Status bar: Hành vi này cho phép bạn hiển thị bất kỳ thông báo văn bản nào trong
thanh trạng thái ở phía dưới bên trái của cửa sổ trình duyệt. Ví dụ, thay vì hiển thị URL có liên
quan đến một liên kết, bạn có thể mô tả điểm đến của liên kết sử dụng hành vi Set Text of
Status bar.
¾¾ Open Browser window: Hành vi này cho phép bạn mở một URL trong cửa sổ mới mà bạn có
thể chỉ ra các thuộc tính, như là tên cửa sổ và kích cỡ.

Phần 2
Kháiniệm
Bạn cũng có thể chỉ ra cửa sổ mới có thay đổi kích thước được hay không và có một thanh menu
và các thuộc tính khác.
¾¾ Jump menu: Hành vi này cho phép bạn chỉnh sửa một menu nhảy. Sử dụng hành vi này, bạn có
thể thay đổi danh sách trình đơn, chỉ ra một tập tin liên kết khác, hoặc thay đổi trình duyệt, trong
đó tài liệu đã liên kết sẽ mở ra.
Để áp dụng một hành vi, chọn một phần tử trên trang web, như là hình ảnh hoặc liên kết. Để gắn một
hành vi cho toàn bộ trang, bấm vào thẻ <body> trong bộ chọn thẻ ở góc dưới bên trái của cửa sổ
Document. Trên menu Window, bấm vào Behaviors. Bấm vào nút Cộng (+) và chọn một hành động
từ menu Add Behavior.
Ghi chú: Có một số hành động trong menu bị vô hiệu hóa, bởi vì tài liệu của bạn không chứa một số
đối tượng bắt buộc đối với những hành động này. Bạn không thể chọn bất cứ hành động bị vô hiệu hóa
nào.
Khi lựa chọn một hành động, hộp thoại sẽ xuất hiện, hiển thị các tham số và hướng dẫn cho hành động.
Nhập các tham số cho hành động, và bấm vào OK.
Ghi chú: Để áp dụng hành vi cho một phần tử, phần tử phải có một ID duy nhất. Trong trường hợp,
phần tử không có một ID, Dreamweaver tự động chỉ ra cho bạn.
Cột Events hiển thị sự kiện mặc định để kích hoạt hành động. Bạn có thể chọn một sự kiện khác từ
menu bật lên Events. Để mở menu Events, chọn một sự kiện hay hành động trong bảng điều khiển
Behaviors, và bấm vào mũi tên đen chỉ xuống xuất hiện giữa tên sự kiện và tên hành động.
2.6.3 Liên kết các tài liệu sử dụng biểu tượng Point-To-File
Bạn cũng có thể tạo ra một liên kết sử dụng biểu tượng Point-To-File trong Property Inspector. Xem
hình 2.20.
Chúng ta hãy xem xét ví dụ để tạo ra liên kết đến văn bản ‘products’ cho một trang web có tên là products.
html.
Hình 2.20: Tạo ra một liên kết sử dụng biểu tượng Point-to-file

Phần 2
Kháiniệm
Tạo ra một liên kết tớ văn bản ‘products’ cho một trang web có tên là products.html sử dụng biểu tượng
Point-To-File như sau:
1. Bấm vào menu Site, và sau đó bạn chọn lệnh Manage Sites để hiển thị bản đồ Website.
2. Sau đó, trong hộp thoại Manage Sites, chọn Website có liên quan và bấm vào Done.
3. Các tập tin có liên quan đến Website đó được hiển thị trong bảng điều khiển Files. Trong bảng điều
khiển Files, bạn bấm vào Map View.
Ghi chú: Để có một sự trình bày trực quan cấu trúc Website, bạn sử dụng tính năng Sơ đồ
Website. Trong sơ đồ Website, bạn có thể thêm các tài liệu mới cho Website của bạn, tạo các liên
kết tài liệu, loại bỏ các tài liệu, và kiểm tra các liên kết đến tập tin phụ thuộc.
4. Trong cửa sổ Document, bạn chọn văn bản hoặc hình ảnh, nơi bạn muốn tạo ra liên kết. Ví dụ, ở
đây chúng ta đã lựa chọn văn bản, ‘products’.
5. Trong Property Inspector, bạn bấm vào biểu tượng Point-To-File và kéo nó vào trang web mong
muốn. Trong trường hợp này, bạn di chuyển nó đến products.html, trong bảng điều khiển Website.
Nhả nút chuột sau khi kéo biểu tượng Point-To-File để sửa trang web. Văn bản hoặc hình ảnh đã
chọn hiện đang được liên kết tới tập tin bạn đã trỏ vào.
2.6.4 Liên kết tới nơi cụ thể trong một tài liệu
Dreamweaver CS5 cho phép bạn thiết lập các liên kết đến một phần cụ thể của tài liệu bằng cách sử
dụng Property Inspector. Để làm như vậy, trước tiên bạn cần phải tạo ra các dấu neo đã đặt tên cho
phép bạn đặt các điểm đánh dấu trong một tài liệu. Chúng thường được đặt ở một chủ đề cụ thể hoặc
ở trên đầu tài liệu.

Phần 2
Kháiniệm
Xem hình 2.21.
Hình 2.21: Dấu neo có tên
Ghi chú: Bạn không thể đặt dấu neo có tên trong một phần tử được định vị tuyệt đối (phần tử AP).
Sau khi tạo các dấu neo có tên, bạn tạo ra các liên kết đến những dấu neo có tên này. Những dấu neo
có tên này đưa người truy cập tới vị trí đã chỉ ra bằng liên kết có liên quan. Bạn có thể tạo dấu neo có tên
bằng cách đặt điểm chèn, trong giao diện Design của cửa sổ Document, nơi bạn muốn chèn dấu neo
có tên. Sau đó, bạn có thể chọn một trong các tùy chọn sau:
¾¾ Bấm vào menu Insert và chọn lệnh Named Anchor.
¾¾ Nhấn các phím Ctrl+Alt+A cùng một lúc trong thể loại Common của bảng điều khiển Insert, bạn
bấm vào nút Named Anchor.
Tiếp theo, trong hộp thoại Anchor Name, gõ tên cho dấu neo, và bấm vào OK. Không sử dụng các dấu
cách trong các tên dấu neo. Điểm đánh dấu neo xuất hiện tại điểm chèn.
Ghi chú: Nếu điểm đánh dấu neo không hiển thị, trên menu View, bấm vào lệnh Visual Aids và chọn
lệnh Invisible Elements từ menu con để làm cho nó thấy được.

Phần 2
Kháiniệm
Để tạo ra liên kết đến một dấu neo có tên, hãy làm theo các bước sau:
1. Trong giao diện Design của cửa sổ Document, bạn chọn văn bản hoặc hình ảnh để tạo ra liên kết
từ đó.
2. Trong hộp Link của Property Inspector, bạn gõ một ký hiệu số (#) và tên của dấu neo.
Ví dụ, để liên kết đến dấu neo có tên là ‘top’ trong tài liệu hiện tại, bạn gõ #top. Để liên kết đến dấu neo
có tên là ‘top’ trong một tài liệu khác trong cùng một thư mục, bạn gõ filename.html#top.
Ghi chú: Tên dấu neo có phân biệt dạng chữ.
Bạn cũng có thể tạo ra liên kết đến một dấu neo có tên sử dụng phương thức Point-To-File.
Để liên kết dấu neo có tên sử dụng phương thức Point-To-File, đầu tiên, bạn mở tài liệu có chứa dấu
neo có tên. Sau đó, trên menu View, bạn bấm vào các lệnh Visual Aids và tiếp tục chọn lệnh Invisible
Elements từ menu con để làm cho dấu neo có tên thấy được, nếu nó không phải là thấy được. Tiếp theo,
trong giao diện Design của cửa sổ Document, hãy chọn văn bản hoặc hình ảnh bạn muốn liên kết từ
đó. Bây giờ, chọn một trong các cách sau:
¾¾ Bên phải của hộp Link trong Property Inspector, bạn bấm vào biểu tượng Point-To-File và kéo
nó vào dấu neo bạn muốn liên kết đến.
¾¾ Nhấn phím Shift và đồng thời kéo cửa sổ Document từ các văn bản hoặc hình ảnh đã chọn tới
dấu neo bạn muốn liên kết đến.
2.6.5 Liên kết email
Liên kết e-mail là một địa chỉ e-mail Internet cho phép người dùng tạo ra e-mail với địa chỉ đó. Khi bạn
bấm vào một liên kết e-mail, cửa sổ thông báo mới xuất hiện. Cửa sổ này sẽ mở ra trong cùng một
chương trình gửi thư hiện đang sử dụng. Trong cửa sổ tin nhắn e-mail, trường To: tự động hiển thị địa
chỉ đã chỉ định trong liên kết e-mail.
Để tạo ra một liên kết e-mail sử dụng lệnh Email Link, trong giao diện Design của cửa sổ Document,
bạn chọn vị trí điểm chèn nơi bạn muốn liên kết e-mail xuất hiện. Bạn cũng có thể chọn văn bản hoặc
hình ảnh, sẽ hoạt động như liên kết e-mail. Tiếp theo, chọn một trong hai tùy chọn:
¾¾ Trên menu Insert, bấm vào lệnh Email Link.
¾¾ Trên Common tab của bảng điều khiển Insert, bạn bấm vào Email Link. Hộp thoại Email link
và hộp thoại Hyperlinkđược trình bày tương ứng trong hình 2.22 và hình 2.23.

Phần 2
Kháiniệm
Hình 2.22: Hộp thoại Email Link
Hình 2.23: Hộp thoại Hyperlink
Sau đó, trong hộp văn bản E-Mail, bạn gõ địa chỉ e-mail và bấm vào OK. Liên kết e-mail được thêm vào
văn bản hoặc hình ảnh đã chọn.
Ngoài việc sử dụng lệnh Insert Email Link cho việc tạo ra một liên kết e-mail, bạn cũng có thể sử dụng
Property Inspector. Để tạo ra một liên kết e-mail sử dụng Property Inspector, trong cửa sổ Document,
bạn chọn văn bản hoặc hình ảnh mà bạn muốn thêm một liên kết vào đó. Sau đó, trong trường Link của
Property Inspector, bạn gõ ‘mailto:’ tiếp theo là địa chỉ e-mail. Liên kết e-mail bây giờ được thêm vào
văn bản hoặc hình ảnh đã chọn.
2.6.6 Liên kết sử dụng lệnh Hyperlink
Bạn cũng có thể tạo ra một liên kết bằng cách sử dụng lệnh Hyperlink. Tuy nhiên, với lệnh Hyperlink,
bạn không thể thêm liên kết vào văn bản đã tồn tại trong một trang web. Bạn chỉ có thể tạo ra một liên
kết cho văn bản mới.

Phần 2
Kháiniệm
Để tạo ra một liên kết sử dụng lệnh Hyperlink, bạn làm theo các bước sau:
1. Thực hiện một trong các cách sau:
¾¾ Trên menu Insert, bấm vào lệnh Hyperlink.
¾¾ Từ thể loại Common của bảng Insert, bạn bấm vào lệnh Hyperlink.
Hộp thoại Hyperlink xuất hiện như được trình bày trước đây trong hình 2.23.
2. Trong trường Text, gõ tên bạn muốn xuất hiện trong trang web.
3. Bấm vào biểu tượng thư mục ở bên phải của trường Link để chọn tập tin được liên kết. Trong
trường Target, cài đặt mục tiêu cho liên kết.
4. Trong trường Title, bạn nhập tiêu đề cho trang bạn đang liên kết tới đó. Khi bạn đưa chuột qua
một siêu liên kết, chú giải công cụ sẽ được hiển thị trình bày tiêu đề của trang.
5. Trong trường Access key, bạn gõ bất kỳ một ký tự nào từ bàn phím, sẽ tương đương với việc
chọn siêu liên kết trong trình duyệt. Có thể sử dụng phím truy cập làm cách để mở một liên kết mà
không cần sử dụng chuột.
6. Trong trường Tab index, bạn nhập số thứ tự cho tab. Theo thứ tự tab, siêu liên kết sẽ được đánh
dấu trong trang web khi người dùng nhấn phím Tab. Bạn có thể dễ dàng điều hướng qua các liên
kết sử dụng phím Tab.
7. Cuối cùng, bạn bấm vào OK. Văn bản sẽ xuất hiện với một siêu liên kết trong trang web.
2.6.7 Tạo liên kết null và tập lệnh
Bạn có thể sử dụng liên kết null để đính kèm các hành vi cho đối tượng hoặc văn bản trên một trang. Giả
sử, bạn muốn một hình ảnh để hiển thị một phần tử được định vị tuyệt đối (phần tử AP) khi bạn di chuyển
chuột lên liên kết, bạn có thể sử dụng liên kết null.
Liên kết tập lệnh được sử dụng khi bạn muốn cung cấp thêm thông tin cho người truy cập về một mục
mà không rời khỏi trang web hiện thời. Ngoài ra, liên kết tập lệnh cũng có thể được sử dụng để thực hiện
tính toán, xác thực các biểu mẫu, hoặc làm nhiệm vụ xử lý khác khi khách truy cập bấm vào một mục cụ
thể.
Để tạo ra một liên kết null, bạn chọn văn bản, hình ảnh, hoặc đối tượng trong giao diệnDesign của cửa
sổ Document. Sau đó, trong Property Inspector, bạn gõ javascript:; (từ javascript, tiếp theo là dấu hai
chấm, tiếp theo là dấu chấm phẩy) trong hộp Link.
Để tạo ra một liên kết tập lệnh, bạn chọn văn bản, hình ảnh, hoặc đối tượng trong giao diệnDesign của
cửa sổ Document. Sau đó, trong hộp Linkcủa Property Inspector, bạn gõ javascript: theo sau là một
số mã JavaScript hoặc gọi hàm. (Không gõ dấu cách giữa dấu hai chấm và mã hoặc gọi hàm.)

Phần 2
Kháiniệm
2.6.8 Sửa đổi liên kết
Với Dreamweaver CS5, bạn cũng có thể sửa đổi một liên kết đã có sẵn. Để làm như vậy, đầu tiên chọn
văn bản hoặc hình ảnh, đó là liên kết phải được sửa đổi. Đường dẫn hiện tại cho các tài liệu, nơi liên kết
được nhắm tới, xuất hiện trong trường Link của Property Inspector. Sau đó, trong Property Inspector,
bạn bấm vào Browse for File và chọn trang web mới. Đây là lý do đường dẫn mới được hiển thị trong
trường Link.
2.6.9 Loại bỏ liên kết
Trong Dreamweaver CS5, bạn cũng có thể loại bỏ liên kết hiện có bằng cách chọn văn bản hoặc hình
ảnh mà liên kết được áp dụng cho chúng. Sau đó, thực hiện bất kỳ hành động nào sau đây:
¾¾ Trên menu Modify, bấm vào lệnh Remove Link.
¾¾ Nhấn tổ hợp phím Ctrl+Shift+L cùng một lúc.
2.6.10 Cập nhật liên kết tự động
Bất cứ khi nào bạn di chuyển hoặc đổi tên một tài liệu trong một Website cục bộ, Dreamweaver tự động
cập nhật các liên kết đến và từ tài liệu cụ thể đó. Tính năng này rất hữu ích khi bạn lưu trữ toàn bộ
Website của bạn hoặc toàn bộ phần khép kín của nó trên ổ đĩa của bạn. Tuy nhiên, Dreamweaver không
thay đổi các tập tin trong thư mục từ xa cho đến khi bạn đặt các tập tin cục bộ hoặc kiểm tra xem chúng
có vào máy chủ từ xa không.
Dreamweaver tạo ra một tập tin bộ nhớ cache chứa các thông tin về tất cả các liên kết trong thư mục
cục bộ của bạn. Bộ nhớ cache tăng tốc quá trình cập nhật các liên kết. Khi bạn thêm, sửa đổi hoặc xóa
các liên kết trên Website cục bộ của bạn, Dreamweaver cập nhật bộ nhớ cache này không thấy được.
Để cho phép cập nhật liên kết tự động, bạn làm theo những bước sau:
1. Trên menu Edit, bấm vào lệnh Preferences.
2. Trong hộp thoại Preferences, bấm vào thể loại General ở bên trái.
3. Trong phần Document options của sở thích General, bạn chọn một tùy chọn từ danh sách thả
xuống Update Links When Moving Files.
yy Always: Tùy chọn này sẽ tự động cập nhật tất cả các liên kết đến và từ một tài liệu đã chọn
bất cứ khi nào bạn di chuyển hoặc đổi tên tài liệu đó.
yy Never: Tùy chọn này sẽ không tự động cập nhật tất cả các liên kết đến và từ một tài liệu đã
chọn khi bạn di chuyển hoặc đổi tên tài liệu đó.
yy Prompt: Tùy chọn này sẽ hiển thị một hộp thoại liệt kê tất cả các tập tin bị ảnh hưởng bởi
sự thay đổi.

Phần 2
Kháiniệm
Bạn bấm vào Update để cập nhật các liên kết trong những tập tin này, hoặc bấm vào Don’t
Update để giữ các tập tin không thay đổi.
yy Bấm vào OK.
2.7 Bản đồ hình ảnh
Bản đồ hình ảnh là một hình ảnh chia thành các phần khác nhau sử dụng các điểm truy cập, thường
được sử dụng như các siêu liên kết. Bất cứ khi nào bạn bấm vào một điểm truy cập, nó sẽ mở ra tài liệu
được liên kết. Mỗi bản đồ hình ảnh cần phải có một tên duy nhất, xuất hiện trong mã nguồn HTML.
2.7.1 Tạo bản đồ hình ảnh
Để tạo ra một bản đồ hình ảnh, bạn làm theo các bước sau:
1. Chọn một hình ảnh trong cửa sổ tài liệu.
2. Trong Property Inspector, bạn bấm vào mũi tên ở góc dưới bên phải để mở rộng Property
Inspector để nó hiển thị tất cả các tùy chọn như được trình bày trong hình 2.24.
Hình 2.24: Property Inspector hiển thị các thuộc tính bản đồ hình ảnh
3. Trong trường Alt của Property Inspector, bạn gõ văn bản thay thế.
4. Trong trường Map, bạn gõ tên của bản đồ hình ảnh.
5. Ở góc dưới bên trái của Property Inspector, bạn có bốn biểu tượng: Pointer Hotspot
Tool , Rectangular Hotspot Tool , Oval Hotspot Tool , và Polygon Hotspot Tool . Những
công cụ này được sử dụng để tạo ra các điểm truy cập với các hình dạng khác nhau. Bấm vào
bất kỳ công cụ điểm truy cập nào để tạo ra một điểm truy cập. Bạn có thể đặt con trỏ vào hình
ảnh mà bạn muốn điểm truy cập xuất hiện. Như vậy, con trỏ đổi thành chữ thập mảnh.
6. Giữ nút chuột trái và kéo nó xung quanh khu vực cần phải được ánh xạ và sau đó thả nút chuột
ra.

Phần 2
Kháiniệm
Khu vực này được chọn với một lớp màu xanh dương là điểm truy cập như được trình bày trong hình
2.25.
Hình 2.25: Các điểm truy cập được áp dụng cho hình ảnh
Sử dụng công cụ Pointer Hotspot để di chuyển nó đến vị trí mong muốn. Những tay cầm hình chữ nhật
này xuất hiện ở ranh giới của điểm truy cập có thể được sử dụng để thay đổi kích thước điểm truy cập.
Sau khi bạn tạo một điểm truy cập, Property Inspector hiển thị những tùy chọn như được trình bày trong
hình 2.26.
Hình 2.26: Property Inspector hiển thị các tùy chọn điểm truy cập

Phần 2
Kháiniệm
Trong hộp Link, bấm vào biểu tượng thư mục để duyệt đến và chọn tập tin bạn muốn mở khi người dùng
bấm vào điểm truy cập, hoặc gõ đường dẫn. Trong menu bật lên Target, chọn cửa sổ trong đó tập tin
cần mở hoặc gõ tên của nó.
Tên của tất cả những khung bạn đã nêu tên trong tài liệu hiện tại xuất hiện trong danh sách bật lên. Nếu
bạn chỉ ra một khung không tồn tại, trang đã liên kết tải vào một cửa sổ mới có tên mà bạn đã chỉ ra. Bạn
cũng có thể chọn từ những tên mục tiêu dành riêng sau đây:
¾¾ blank tải tập tin liên kết vào trong một cửa sổ trình duyệt mới chưa có tên.
¾¾ parent tải tập tin liên kết vào trong tập khung hoặc cửa sổ cha mẹ của khung chứa liên kết. Nếu
khung chứa liên kết không được lồng nhau, tập tin liên kết được tải vào cửa sổ trình duyệt đầy
đủ.
¾¾ self tải tập tin liên kết vào cùng một khung hoặc cửa sổ làm liên kết. Mục tiêu này là mặc định, vì
vậy bạn thường không cần phải chỉ ra nó.
¾¾ top tải tập tin liên kết vào cửa sổ trình duyệt đầy đủ, do đó loại bỏ tất cả các khung.
Ghi chú: Tùy chọn mục tiêu chỉ có sẵn khi điểm truy cập đã chọn có chứa một liên kết.
Sau đó, trong hộp Alt, gõ vào văn bản thay thế để hiển thị trong trình duyệt chỉ văn bản hoặc trình duyệt
tải về hình ảnh thủ công. Một số trình duyệt hiển thị văn bản này như là một chú giải công cụ khi người
dùng di chuyển con trỏ qua điểm truy cập.
Tương tự như vậy, bạn có thể định nghĩa thêm các điểm truy cập trong bản đồ hình ảnh. Khi bạn hoàn
thành lập bản đồ hình ảnh, bấm vào vùng trống trong tài liệu để thay đổi Property Inspector.
2.7.2 Chèn bản đồ hình ảnh phía máy khách
Trong Dreamweaver CS5, bạn có thể chèn bản đồ hình ảnh phía máy khách bằng cách tạo ra một khu
vực điểm truy cập và sau đó xác định một liên kết mở ra khi người dùng bấm vào khu vực điểm truy cập
đó. Bản đồ hình ảnh phía máy khách lưu trữ thông tin liên kết siêu văn bản trong tài liệu HTML, hơn là
lưu trữ vào một tập tin bản đồ riêng biệt. Điều này làm cho bản đồ hình ảnh phía máy khách nhanh hơn
so với bản đồ hình ảnh phía máy chủ.
Ghi chú: Bạn có thể tạo ra nhiều khu vực điểm truy cập, nhưng chúng là một phần của cùng một bản
đồ hình ảnh.
2.7.3 Sửa đổi các điểm truy cập bản đồ hình ảnh
Dreamweaver CS5 cho phép bạn dễ dàng chỉnh sửa các điểm truy cập bạn tạo ra trong một bản đồ hình
ảnh. Nó cho phép bạn di chuyển một khu vực điểm truy cập và thay đổi kích thước các điểm truy cập. Nó
còn cho phép bạn di chuyển một điểm truy cập về phía trước hoặc phía sau, trong một phần tử AP.

Phần 2
Kháiniệm
Dreamweaver CS5 còn cho phép bạn sao chép hình ảnh với các điểm truy cập từ một tài liệu sang tài
liệu khác hoặc sao chép một hoặc nhiều điểm truy cập từ một hình ảnh và dán chúng vào hình ảnh khác.
Bạn cũng có thể sao chép các điểm truy cập liên kết với hình ảnh vào tài liệu mới.
2.8 Hình ảnh cuộn qua
Hình ảnh cuộn qua thay đổi khi con trỏ chuột di chuyển trên nó. Những hình ảnh này có thể được sử
dụng có hiệu quả trong các thanh điều hướng. Bất cứ khi nào người dùng trỏ lên một liên kết trên thanh
điều hướng, hình ảnh tương ứng sẽ thay đổi.
2.8.1 Thêm các hình ảnh cuộn qua
Hình ảnh cuộn qua bao gồm hai hình ảnh: hình ảnh chính và hình ảnh phụ. Hình ảnh chính là hình ảnh
ban đầu và hình ảnh phụ là hình ảnh thấy được khi con trỏ di chuyển trên hình ảnh gốc. Cả hình ảnh
chính và hình ảnh phụ nên có cùng kích thước. Trong trường hợp khác kích thước, Dreamweaver thay
đổi kích thước hình ảnh phụ theo kích thước của hình ảnh chính. Để áp dụng hiệu ứng cuộn qua cho
hình ảnh, đầu tiên, tạo ra hai hình, mỗi một cái tương ứng cho hình ảnh chính và hình ảnh phụ. Sau đó,
chèn hình ảnh chính vào trang web của bạn. Bấm vào hình ảnh và thực hiện một trong các cách sau:
¾¾ Trên menu Insert, bấm vào lệnh Image Objects và sau đó chọn lệnh Rollover Image từ menu
con.
¾¾ Trong thể loại Common của bảng điều khiển Insert, bấm vào Rollover Image.
¾¾ Sau khi chọn tùy chọn này, hộp thoại Insert Rollover Image xuất hiện như được trình bày trong
hình 2.27.
Hình 2.27: Hộp thoại Insert Rollover Image

Phần 2
Kháiniệm
Hộp thoại chứa các tùy chọn sau:
¾¾ Trong trường Image name, bạn gõ tên của hình ảnh.
¾¾ Bên cạnh trường văn bản Original image, khi bạn bấm vào Browse, hộp thoại Original image
xuất hiện. Chọn hình ảnh sẽ được chèn vào và bấm vào OK. Đường dẫn của hình ảnh chính
được hiển thị trong trường văn bản Original Image.
¾¾ Bên cạnh trường văn bản Rollover image, bấm vào Browse. Hộp thoại Rollover image xuất
hiện. Chọn hình ảnh sẽ được chèn vào và bấm vào OK. Đường dẫn của hình ảnh phụ được hiển
thị trong trường văn bản Rollover image text.
¾¾ Trong trường Alternate text, nhập mô tả văn bản cho hình ảnh cuộn qua.
¾¾ Bên cạnh When clicked, trường văn bản Go to URL, bấm vào Browse để chọn URL. Khi
Clicked, trường văn bản Go to URL hiển thị đường dẫn của tập tin, được hiển thị sau khi hình
ảnh được bấm vào. Bấm vào OK.
Hình ảnh ban đầu được hiển thị trong tài liệu. Để xem hiệu ứng cuộn qua, xem trước trang trong một
trình duyệt và di chuyển con trỏ ở trên hình ảnh. Khi chuột ở trên, hình ảnh này được thay bằng hình
ảnh lăn qua.
2.9 Khung
Khung cho phép bạn phân chia một cửa sổ trình duyệt thành nhiều khu vực. Mỗi khu vực có thể hiển thị
một tài liệu HTML khác nhau. Loại bố trí khung phổ biến nhất là cái trong đó một khung hiển thị các điều
khiển điều hướng, trong khi khung kia hiển thị nội dung.
Xem xét bố trí một khung khác với ba khung, đó là:
¾¾ Một khung hẹp ở phía bên trái có chứa một thanh điều hướng.
¾¾ Một khung dọc theo phía trên có chứa logo của công ty và tiêu đề của Website.
¾¾ Một khung lớn bao gồm phần còn lại của trang và có chứa nội dung chính.
Mỗi khung này sẽ hiển thị một tài liệu HTML riêng biệt. Bố trí khung với nhiều khung như vậy được gọi
là một tập khung.

Phần 2
Kháiniệm
Hình 2.28 trình bày thiết kế trang được tạo ra sử dụng các tập khung.
Hình 2.28: Thiết kế trang được tạo ra sử dụng các tập khung
2.9.1 Tạo ra một khung và tập khung
Dreamweaver CS5 cung cấp cho bạn một số tùy chọn khung, như là Split Frame Left, Split Frame
Right, Split Frame Up, và Split Frame Down, để tạo ra các khung theo yêu cầu của bạn. Để làm như
vậy, mở một trang web mới. Bây giờ, trên menu View, bấm vào lệnh Visual Aids, và sau đó bấm vào
lệnh Frame Borders từ menu con. Một đường viền xuất hiện xung quanh cửa sổ tài liệu nơi bạn có thể
thêm các khung. Bây giờ, trên menu Modify, bạn bấm vào lệnh Frameset, và sau đó chọn một tùy chọn
khung. Bạn còn có tùy chọn để loại bỏ khung chỉ cần kéo viền của nó trở lại cạnh gần nhất của cửa sổ
tài liệu.
Với Dreamweaver CS5, ngoài việc thiết kế các tập khung của riêng bạn, bạn có thể sử dụng các tập
khung được xác định trước. Sử dụng một tập khung xác định trước là cách dễ nhất để tạo ra một bố cục
dựa trên các khung một cách nhanh chóng. Tập khung được xác định trước tự động thiết lập tất cả các
tập khung và khung cần thiết để tạo bố trí. Bạn có thể chèn một tập khung xác định trước chỉ trong giao
diện Design của cửa sổ Document. Bạn có thể sử dụng một tập khung xác định trước bằng cách sử
dụng bảng điều khiển Insert hoặc hộp thoại New Document.

Phần 2
Kháiniệm
Bảng điều khiển Insert cho phép bạn tạo ra một tập khung và hiển thị tài liệu hiện tại trong một trong
những khung mới. Khi bạn áp dụng một tập khung sử dụng bảng điều khiển Insert, Dreamweaver tự
động thiết lập tập khung để hiển thị tài liệu hiện tại trong một trong những khung này.
Các biểu tượng tập khung được xác định trước, như được trình bày trong hình 2.29, trong thể loại
Layout của bảng điều khiển Insert cung cấp sự trình bày trực quan của mỗi tập khung khi được áp dụng
cho tài liệu hiện tại. Vùng màu xanh dương của biểu tượng tập khung được xác định trước thể hiện tài
liệu hiện tại và vùng trắng trình bày khung sẽ hiển thị các tài liệu khác.
Vì vậy, để tạo ra một tập khung xác định trước và hiển thị một tài liệu hiện có trong một khung, đặt điểm
trong tài liệu nơi bạn muốn thêm vào tập khung. Sau đó, trên menu Insert, bấm vào lệnh HTML, và sau
đó bấm vào lệnh Frames. Bây giờ, từ menu con Frames, bạn chọn một khung. Không giống như bảng
điều khiển Insert, hộp thoại New Document tạo ra một tập khung trống mới.
Bạn có thể tạo ra một tập khung trống mới được xác định trước bằng cách nhấn vào menu File và chọn
lệnh New. Sau đó, trong hộp thoại New Document, bạn chọn Page from Sample từ thể loại Framesets.
Bây giờ, từ danh sách Framesets, chọn một tập khung và bấm vào Create. Do đó, một tập khung trống
mới được tạo ra trong cửa sổ Document.
Hình 2.29: Bảng điều khiển Insert trình bày khung và tập khung

Phần 2
Kháiniệm
2.9.2 Điều chỉnh các thuộc tính của khung và tập khung
Bạn có thể cài đặt các thuộc tính khác nhau của khung bằng cách sử dụng Property Inspector như
được trình bày trong hình 2.30. Bạn có thể điều chỉnh các thuộc tính của khung, như là viền, lề, và các
thanh cuộn xuất hiện trong các khung.
Hình 2.30: Các thuộc tính khung
¾¾ Các thuộc tính khung
Để xem hoặc cài đặt các thuộc tính khung, bạn chọn một khung. Để chọn khung, bạn nhấn Alt và
bấm vào khung trong giao diện Design của cửa sổ Document. Ngoài ra, bạn cũng có thể bấm vào
một khung trong bảng điều khiển Frames để chọn một khung. Sau đó, trong Property Inspector,
bạn bấm vào mũi tên giãn nở ở góc dưới bên phải để xem tất cả các thuộc tính khung. Bảng 2.5
liệt kê các thuộc tính khung trong Property Inspector.
Thuộc tính
khung
Mô tả
Frame Name Bạn chỉ ra tên được sử dụng bằng thuộc tính target của liên kết hoặc bằng tập lệnh
để tham khảo tới khung đó. Tên khung phải là một từ duy nhất, gạch dưới (_) được
cho phép, nhưng dấu gạch ngang (-), dấu chấm (.), và dấu cách thì không được.
Tên khung phải bắt đầu bằng chữ cái (không phải là số). Tên khung phân biệt dạng
chữ. Không sử dụng các biến và các thuật ngữ chuẩn là các từ dành riêng trong
JavaScript (như là top hoặc navigator) làm tên khung.
Src Bạn chỉ ra tài liệu nguồn để hiển thị trong khung. Bấm vào biểu tượng thư mục để
duyệt đến và chọn một tập tin.
Scroll Bạn chỉ ra xem các thanh cuộn có xuất hiện trong khung hay không. Nếu bạn chọn
Default, nó không cài đặt giá trị cho thuộc tính tương ứng và cho phép mỗi trình
duyệt sử dụng giá trị mặc định của nó. Hầu hết các trình duyệt có cài đặt này là
Auto. Điều này cho thấy các thanh cuộn chỉ xuất hiện khi không có đủ chỗ trong
một cửa sổ trình duyệt để hiển thị đầy đủ nội dung của khung hiện tại.
No Resize Tùy chọn này ngăn người truy cập không kéo các viền khung để thay đổi kích
thước khung trong trình duyệt.

Phần 2
Kháiniệm
Thuộc tính
khung
Mô tả
Borders Bạn có thể hiển thị hoặc ẩn viền của khung hình hiện tại khi nó được xem trong một
trình duyệt bằng cách sử dụng tùy chọn này. Việc chọn tùy chọn Borders cho một
khung sẽ ghi đè các thiết đặt viền của tập khung.
Các tùy chọn viền là Yes (hiển thị viền), No (ẩn viền), và Default; hầu hết các trình
duyệt lấy mặc định để hiển thị viền, trừ khi tập khung mẹ có thiết đặt này được đặt
thành No. Viền được ẩn chỉ khi tất cả các khung chia sẻ viền có thiết đặt này được
đặt thành No, hoặc khi thuộc tính Borders của tập khung mẹ được đặt thành No
và các khung chia sẻ viền có Borders được đặt thành Default.
Border Color Bạn có thể đặt màu viền cho tất cả các viền của khung với thiết đặt này. Màu này
áp dụng cho tất cả các viền chạm vào khung, và ghi đè màu viền đã chỉ định của
tập khung.
Margin Width Bạn có thể đặt chiều rộng theo pixel của lề trái và phải (không gian giữa các viền
khung và nội dung) với thiết đặt này.
Margin Height Bạn có thể đặt chiều cao theo pixel của lề trên và dưới (không gian giữa các viền
khung và nội dung) với thiết đặt này.
Bảng 2.5: Các thuộc tính khung
¾¾ Các thuộc tính của tập khung
Tương tự như các thuộc tính khung, bạn có thể sử dụng Property Inspector để đặt các thuộc
tính tập khung, như là tiêu đề, viền tập khung, và kích thước khung như được trình bày trong hình
2.31.
Hình 2.31: Các thuộc tính tập khung
Để xem hoặc đặt các thuộc tính tập khung, bạn chọn một khung. Để chọn khung, bạn bấm vào viền
giữa hai khung trong tập khung trong giao diện Design của cửa sổ Document. Ngoài ra, bạn cũng
có thể bấm vào viền xung quanh tập khung trong bảng điều khiển Frames để chọn một tập khung.
Sau đó, trong Property Inspector, bạn bấm vào mũi tên giãn nở ở góc dưới bên phải để xem tất
cả các thuộc tính tập khung. Bảng 2.6 liệt kê các thuộc tính tập khung trong Property Inspector.

Phần 2
Kháiniệm
Thuộc tính tập khung Mô tả
Borders Bạn chỉ ra xem các viền sẽ xuất hiện xung quanh các khung hay
không khi tài liệu được xem trong một trình duyệt. Để hiển thị các
viền, bạn chọn Yes; để ngăn trình duyệt không hiển thị các viền, bạn
chọn No. Để cho phép trình duyệt để xác định cách các viền được
hiển thị, bạn chọn Default.
Border Width Bạn chỉ ra độ rộng viền trong thiết đặt này.
Border Color Bạn có thể cài đặt màu viền. Bạn có thể sử dụng bảng chọn màu để
chọn màu hoặc gõ giá trị thập lục phân cho một màu.
RowCol Selection Bạn có thể cài đặt kích thước khung cho các hàng và cột của tập
khung đã chọn. Bạn bấm vào tab ở phía bên trái hoặc trên cùng của
khu vực RowCol Selection; sau đó, nhập chiều cao hoặc chiều rộng
vào hộp văn bản Value.
Để chỉ ra số lượng không gian trình duyệt phân bổ cho mỗi khung,
bạn chọn từ các lựa chọn sau đây trong menu Units:
Pixels: Tùy chọn này đặt kích thước của cột và hàng đã chọn thành
một giá trị tuyệt đối. Bạn chọn tùy chọn này cho một khung mà phải
luôn luôn có cùng kích thước, như là một thanh điều hướng. Khung
với kích thước đã chỉ định theo pixel được phân bổ không gian trước
các khung với kích thước đã chỉ định là Percent hoặc Relative:
Phương pháp phổ biến nhất cho kích thước khung là đặt khung bên
trái thành chiều rộng pixel cố định và đặt khung bên phải thành tương
đối, cho phép khung bên phải căng ra để tiếp nhận tất cả không gian
còn lại sau khi chiều rộng pixel được phân bổ.
Percent: Tùy chọn này chỉ ra rằng cột hoặc hàng đã chọn phải là
một tỷ lệ phần trăm của tổng chiều rộng hoặc chiều cao của tập
khung của nó. Khung với các đơn vị được đặt thành Percent được
phân bổ không gian sau các khung với các đơn vị được đặt thành
Pixels, nhưng trước các khung với các đơn vị được đặt thành
Relative.
Relative: Tùy chọn này chỉ ra rằng cột hoặc hàng đã chọn được
phân bổ phần còn lại của không gian có sẵn sau khi các khung
Pixels và Percent đã có không gian được phân bổ; không gian còn
lại đó được chia theo tỷ lệ giữa các khung với kích thước được đặt
thành Relative.
Bảng 2.6: Các thuộc tính tập khung
2.9.3 Kiểm soát nội dung khung với các liên kết
Bạn có thể chèn một liên kết vào các khung, mà sẽ mở một tài liệu trong một khung khác. Để làm điều
này, bạn cần phải cài đặt thuộc tính target của liên kết đó. Thuộc tính target chỉ ra khung hoặc cửa sổ
trong đó nội dung đã liên kết sẽ mở ra.

Phần 2
Kháiniệm
Để kiểm soát nội dung khung với một liên kết, bạn làm theo các bước sau:
1. Trong giao diện Design, bạn chọn văn bản hoặc một đối tượng.
2. Trong hộp Link trong Property Inspector, bạn làm một trong những bước đây:
¾¾ Bấm vào biểu tượng thư mục và chọn tập tin để liên kết đến đó.
¾¾ Kéo biểu tượng Point-To-File tới bảng điều khiển Files và chọn tập tin để liên kết đến.
3. Trong menu Target trong Property Inspector, bạn chọn khung hoặc cửa sổ trong đó tài liệu đã
liên kết sẽ xuất hiện:
¾¾ _blank mở tài liệu đã liên kết trong một cửa sổ trình duyệt mới, để lại cửa sổ hiện tại không
động đến.
¾¾ _parent mở tài liệu đã liên kết trong tập khung mẹ của khung nơi liên kết xuất hiện, thay
thế toàn bộ tập khung.
¾¾ _self mở liên kết trong khung hiện tại và thay thế nội dung trong khung đó.
¾¾ _top mở tài liệu đã liên kết trong cửa sổ trình duyệt hiện tại và thay thế tất cả các khung.
Tên khung cũng xuất hiện trong menu này. Chọn một khung có tên để mở tài liệu đã liên kết trong
khung đó.
Ghi chú: Bạn chỉ có thể nhìn thấy các tên khung khi bạn chỉnh sửa tài liệu trong tập khung. Nếu bạn
đang chỉnh sửa tài liệu bên ngoài tập khung, bạn có thể gõ tên của khung đích trong hộp văn bản
Target.
Nếu bạn đang liên kết đến một trang bên ngoài Website của bạn, hãy luôn sử dụng target=”_top” hoặc
target=”_blank” để đảm bảo rằng trang không xuất hiện là một phần Website của bạn.
2.9.4 Sử dụng hành vi JavaScript với khung
Bạn có thể sử dụng một số hành vi JavaScript và các lệnh liên quan đến điều hướng với khung:
¾¾ Set Text of Frame: Bạn sử dụng tùy chọn này để thay thế nội dung (HTML hợp lệ) và định dạng
một khung nhất định với nội dung cụ thể. Bạn sử dụng hành động này để tự động hiển thị thông
tin trong một khung.
¾¾ Go to URL: Bạn sử dụng tùy chọn này để mở một trang mới trong cửa sổ hiện tại hoặc trong
khung cụ thể. Hành động này đặc biệt hữu ích cho việc thay đổi các nội dung của hai hay nhiều
khung với một lần bấm chuột.

Phần 2
Kháiniệm
¾¾ Insert Jump menu: Bạn sử dụng tùy chọn này để thiết lập một danh sách menu các liên kết để
mở các tập tin trong cửa sổ trình duyệt khi bấm vào. Bạn cũng có thể nhắm tới một cửa sổhoặc
khung cụ thể trong đó tài liệu sẽ mở ra.

Phần 2
Kháiniệm
¾¾ Trong Dreamweaver CS5, bạn có thể chuyển nhập nội dung từ các ứng dụng khác, như là
Microsoft Word và Excel, và chèn vào các trang web của bạn.
¾¾ Dreamweaver CS5 gồm có bốn loại danh sách: danh sách có thứ tự, danh sách không có
thứ tự, danh sách định nghĩa và danh sách lồng nhau.
¾¾ Danh sách định nghĩa được sử dụng để hiển thị các mục trong bảng thuật ngữ hoặc khi
bạn đang định nghĩa một thuật ngữ.
¾¾ Nội dung có thể được tổ chức hiệu quả hơn và theo một cách có cấu trúc trong bảng.
¾¾ Các thuộc tính bảng có thể được cài đặt sử dụng Property Inspector.
¾¾ Trong Dreamweaver, bạn có thể tạo các liên kết nội bộ, liên kết bên ngoài, liên kết email, và
các liên kết đến các dấu neo có tên.
¾¾ Đường dẫn tuyệt đối cung cấp đầy đủ địa chỉ cho tập tin được liên kết.
¾¾ Đường dẫn tương đối theo tài liệu rất hữu ích khi tài liệu hiện tại và các tài liệu được liên
kết ở trong cùng một thư mục và có khả năng sẽ vẫn giữ như vậy.
¾¾ Đường dẫn tương đối so với gốc cung cấp đường dẫn từ thư mục gốc của Website đến
tài liệu. Thẻ HTML để tạo ra một liên kết siêu văn bản được gọi là thẻ dấu neo.
¾¾ Dreamweaver CS5 cho phép bạn tạo ra một liên kết bằng cách sử dụng biểu tượng Point-
To-File trong Property Inspector.
¾¾ Hình ảnh cuộn qua là hình ảnh thay đổi khi con trỏ chuột di chuyển trên nó.
¾¾ Khung cho phép bạn phân chia một cửa sổ trình duyệt thành nhiều khu vực.
¾¾ Mỗi khung này sẽ hiển thị một tài liệu HTML riêng biệt. Bố trí khung với nhiều khung như
vậy được gọi là một tập khung.
Tóm tắt

Phần 2
Kháiniệm
1. Thẻ HTML để tạo ra một liên kết siêu văn bản được gọi là _____________.
a. liên kết internet
b. Liên kết bên ngoài
c. thẻ dấu neo
d. liên kết email
2. ________ cung cấp cách để chia tách cửa sổ trình duyệt thành nhiều khu vực, mỗi khu
vực có thể hiển thị một tài liệu HTML khác nhau.
a. Tập khung
b. Hình ảnh cuộn qua
c. Viền khung
d. Khung
3. _________ là hình ảnh có thể được chia thành các phần khác nhau sử dụng các điểm truy
cập.
a. Trường liên kết
b. Bản đồ Website
c. Đối tượng siêu liên kết
d. Bản đồ hình ảnh
4. Bạn có thể bấm vào biểu tượng Point-To-File trong Property Inspector để tạo ra một liên
kết.
a. Đúng
b. Sai
5. Bạn có thể xuất chuyển dữ liệu bảng từ Dreamweaver vào tập tin văn bản tách biệt bằng
các dấu tách, như là các tab, dấu phẩy, dấu hai chấm, dấu chấm phẩy, hoặc dấu cách.
a. Đúng
b. Sai

Phần 2
Kháiniệm
1. Tạo liên kết dấu neo có tên, bản đồ hình ảnh, và thiết kế một trang web sử dụng khung.

Biểu mẫu, CSS,
hành vi, và đoạn mã nhỏ
3
Phần
Kháiniệm
Mục tiêu
¾¾ Tạo và xác thực các biểu mẫu
¾¾ Tạo và sửa đổi Cascading Style Sheets (CSS)
¾¾ Áp dụng các thuộc tính CSS
¾¾ Sử dụng các thẻ div
¾¾ Tạo hình động các phần tử API
¾¾ Làm việc với các Spry widgets
¾¾ Áp dụng hiệu ứng Spry
¾¾ Áp dụng các hành vi cho các đối tượng khác nhau
¾¾ Hiểu việc lập trình thông qua thanh công cụ lập trình và gợi ý mã
¾¾ Áp dụng hành động cho các đối tượng
¾¾ Sử dụng sự kiện cho các phần tử form
¾¾ Tạo và sử dụng các đoạn mã nhỏ
¾¾ Tạo và sửa đổi các mục thư viện
3.1 Giới thiệu
Ở phần trước, bạn đã học về các bản đồ hình ảnh và hình ảnh cuộn nổi. Bạn cũng đã học được cách tạo
liên kết và khung để dễ dàng xây dựng các trang web.
Trong phần này, bạn sẽ học cách tạo ra các biểu mẫu, thêm các phần tử biểu mẫu, và xác thực các biểu
mẫu. Bạn cũng sẽ thấy Cascading Style Sheets (CSS) là gì, và để tạo ra, sử dụng và chỉnh sửa chúng.
Phần này cũng bao gồm các hành vi và cách áp dụng chúng trong một tài liệu.
Bạn cũng sẽ tìm hiểu về các loại hành động và sự kiện khác nhau, và cách sử dụng một số trong số
này.

Phần 3
Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ
Kháiniệm
Ngoài ra, bạn cũng sẽ học cách tạo và sử dụng đoạn mã nhỏ.
3.2 Làm việc với biểu mẫu
Biểu mẫu được sử dụng trong các trang web để thu thập thông tin hữu ích về những người truy cập
Website và gửi thông tin này đến các máy chủ ứng dụng, như là PHP và ColdFusion. Đây là một cách
tuyệt vời để đưa vào tương tác web cho Website. Biểu mẫu bao gồm các trường văn bản, nhãn, danh
sách thả xuống, và các phần tử khác. Bạn có thể dễ dàng tạo ra các biểu mẫu trong Dreamweaver CS5
sử dụng các đối tượng biểu mẫu.
3.2.1 Tạo các biểu mẫu web
Trong Dreamweaver CS5, bạn có thể tạo ra biểu mẫu bằng cách đặt điểm chèn vào cửa sổ tài liệu nơi
bạn muốn chèn biểu mẫu. Sau đó, trên menu Insert, bấm vào lệnh Form. Xem hình 3.1.
Hình 3.1: Cửa sổ tài liệu hiển thị nét ngoài biểu mẫu
Bạn có thể chọn toàn bộ biểu mẫu bằng cách nhấn vào nét ngoài của biểu mẫu này hoặc bằng cách
chọn thẻ biểu mẫu <form>, được hiển thị ở góc dưới bên trái của cửa sổ tài liệu. Bây giờ, trong Property
Inspector, bạn gõ tên của biểu mẫu vào trường Form ID Name như được trình bày trong hình 3.2. Nếu
bạn không gán bất kỳ tên nào cho biểu mẫu, Dreamweaver sẽ tự gán tên mẫu bằng cách sử dụng cú
pháp ‘formn’, và tăng giá trị của ‘n’ cho mỗi biểu mẫu thêm vào trang.
Hình 3.2: Property Inspector hiển thị các thuộc tính biểu mẫu

Phần 3
Kháiniệm
Bảng 3.1 liệt kê các thuộc tính biểu mẫu và mô tả của chúng.
Thuộc tính Mô tả
Hành động Trong trường Action, chỉ ra đường dẫn của trang động, hoặc tập lệnh xử lý biểu
mẫu. Bạn có thể gõ đường dẫn đầy đủ vào trường Action hoặc bấm vào biểu
tượng Browse for File để chọn trang hay tập lệnh thích hợp.
Phương
thức
Trong trường Method, bạn chỉ ra phương pháp sẽ được sử dụng để gửi các dữ
liệu biểu mẫu cho máy chủ. Khi người dùng gửi biểu mẫu, có hai cách có thể gửi
thông tin từ trình duyệt đến máy chủ, một thông qua URL và cách kia trong yêu cầu
Hypertext Transfer Protocol (HTTP).
Sau đây là các phương pháp khác nhau:
GET: Tùy chọn này gắn thêm cặp tên/giá trị vào URL yêu cầu trang. Vì chiều dài
của URL là giới hạn, bạn không thể gửi số lượng lớn dữ liệu. Hơn nữa, dữ liệu
được gửi qua URL, không phải là phương pháp thích hợp để sử dụng cho bất kỳ
dữ liệu bí mật nào.
POST: Tùy chọn này nhúng các dữ liệu biểu mẫu trong yêu cầu HTTP. Phương
pháp POST được sử dụng cho các biểu mẫu dài, vì không có giới hạn về kích
thước của dữ liệu. Nó an toàn hơn.
Default: Tùy chọn này sử dụng các thiết đặt trình duyệt mặc định để chuyển dữ liệu
biểu mẫu đến máy chủ. GET là phương pháp mặc định.
Enctype Danh sách thả xuống Enctype cho phép bạn chỉ ra loại mã hóa MIME của các dữ
liệu đã gửi đến máy chủ để xử lý. Application/x-www-form- form-urlencode là
thiết đặt mặc định thường được sử dụng kết hợp với phương thức POST. Nếu
bạn đang tạo ra trường tải lên tập tin, hãy chỉ ra loại multipart/form-data MIME.
Trường này là tùy chọn.
Target Bạn có thể sử dụng danh sách thả xuống Target để chỉ ra cửa sổ hiển thị dữ liệu
do chương trình đã gọi trả về. Sau đây là các tùy chọn bạn có thể chọn:
_blank: mở tài liệu đích trong một cửa sổ mới chưa có tên.
_parent: mở tài liệu đích trong cửa sổ mẹ của cái đang hiển thị tài liệu hiện tại.
_self: mở tài liệu đích trong cùng một cửa sổ như cái trong đó biểu mẫu đã được
gửi.
_top: mở tài liệu đích trong phần thân của cửa sổ hiện tại. Giá trị này có thể được
sử dụng để đảm bảo rằng tài liệu đích chiếm toàn bộ cửa sổ ngay cả khi tài liệu gốc
được hiển thị trong một khung.
Class Danh sách thả xuống Class cho phép bạn áp dụng các quy tắc CSS cho đối
tượng.
Bảng 3.1: Các thuộc tính biểu mẫu

Phần 3
Kháiniệm
3.2.2 Thêm các phần tử biểu mẫu
Các phần tử biểu mẫu là cách để bạn thêm tương tác cho một trang web. Những phần tử này sẽ được
khách truy cập sử dụng để nhập dữ liệu vào một biểu mẫu. Một số phần tử biểu mẫu được trình bày
trong hình 3.3.
Hình 3.3: Các phần tử biểu mẫu
Bảng 3.2 liệt kê và mô tả một số phần tử biểu mẫu.
Các phần tử
biểu mẫu
Mô tả
Các trường
văn bản
Phần tử trường văn bản được sử dụng để nhập văn bản. Văn bản có thể là các
ký tự, số, chữ và số hoặc ký tự đặc biệt, như là dấu hoa thị và dấu chấm. Dấu hoa
thị và chấm rất hữu ích để hiển thị dữ liệu bí mật, như là mật khẩu. Các trường
văn bản có thể là đơn dòng, nhiều dòng, hoặc mật khẩu.

Phần 3
Kháiniệm
Các phần tử
biểu mẫu
Mô tả
Các nút Nút cung cấp cách để thông tin người dùng có thể được gửi đến các máy chủ ứng
dụng. Nút thực hiện một hành động khi chúng được nhấp. Nút có tên hoặc nhãn
được xác định trước, như là Submit hoặc Reset. Bạn cũng có thể thêm một tên
tùy chỉnh cho một nút bằng cách sử dụng Property Inspector.
Các trường
ẩn
Các trường ẩn được sử dụng để lưu trữ thông tin người dùng, như là tên và id
email. Thông tin này sau đó có thể được sử dụng khi người dùng truy cập vào
Website lần tiếp theo.
Các hộp kiểm Hộp kiểm được sử dụng để chọn nhiều lựa chọn từ một nhóm các tùy chọn. Hộp
kiểm cho phép người dùng chọn nhiều hơn một lựa chọn. Ví dụ, bạn có thể sử
dụng hộp kiểm tra để cho phép người dùng chọn nhiều trường quan tâm.
Các nút radio Nút radio cho phép người dùng chọn chỉ một lựa chọn từ một nhóm các tùy chọn.
Ví dụ, bạn có thể sử dụng nút radio để cho phép người dùng lựa chọn giới tính.
Các menu
danh sách
Menu danh sách hiển thị một danh sách các tùy chọn trong danh sách cuộn, từ đó
người dùng có thể chọn nhiều tùy chọn. Ngoài ra, người dùng có thể gõ văn bản
vào các menu Danh sách và tìm kiếm nếu tùy chọn được liệt kê trong menu. Ví
dụ, bạn có thể sử dụng các menu danh sách để cho phép người dùng lựa chọn
trình độ chuyên môn.
Các menu
nhảy
Menu nhảy là một danh sách các tùy chọn trong menu và mỗi tùy chọn đến lượt
mình được liên kết với một tài liệu hoặc tập tin.
Các trường
tập tin
Trường tập tin cho phép khách truy cập điều hướng và chọn các tập tin trên máy
tính và tải lên tập tin làm dữ liệu biểu mẫu. Ví dụ, bạn có thể dùng các trường tập
tin để cho phép người dùng duyệt dữ liệu sinh học hoặc bất kỳ tài liệu nào khác.
Các trường
hình ảnh
Trường hình ảnh cho phép khách truy cập điều hướng và chọn các tập tin hình
ảnh trên máy tính và tải lên tập tin làm dữ liệu biểu mẫu.
Trường văn
bản xác thực
Spry
Sử dụng phần tử này, người dùng có thể chỉ ra các loại xác thực có sẵn cho
widget Validation Text Field. Ví dụ, trường văn bản sẽ nhận được số thẻ tín
dụng khi chỉ ra loại xác thực thẻ tín dụng cụ thể. Trong trường hợp, người dùng
nhập vào một định dạng không hợp lệ, sẽ hiển thị thông báo lỗi.
Khu vực văn
bản xác thực
Spry
Với phần tử biểu mẫu này, người dùng có thể đặt điểm tại đó xác thực xảy ra. Nó
có thể là bằng cách nhấn vào bên ngoài widget, như loại người dùng, hoặc khi
gửi biểu mẫu.
Hộp kiểm xác
thực Spry
Sử dụng phần tử này, bạn có thể cho phép người dùng một số cụ thể của các
hộp kiểm. Trong trường hợp, người dùng không chọn nhiều các hộp kiểm đó, sẽ
hiển thị thông báo lỗi. Ví dụ, bạn có thể buộc người dùng phải lựa chọn ít nhất ba
loại mà họ sẽ nhận được e-mail quảng cáo. Trong trường hợp, người dùng chọn
ít hơn ba loại, thông báo lỗi sẽ được hiển thị và người dùng sẽ được yêu cầu làm
ít nhất ba lựa chọn.
Chọn xác
thực Spry
Phần tử này là một menu thả xuống cho phép người dùng chọn một tùy chọn từ
danh sách các tùy chọn được phân cách bằng một đường ngang. Ví dụ, bạn có
thể sử dụng phần tử này để hiển thị danh sách các quốc gia ở các khu vực khác
nhau.
Bảng 3.2: Các phần tử biểu mẫu

Phần 3
Kháiniệm
Hình 3.4 trình bày Bản câu hỏi được tạo ra bằng cách sử dụng các phần tử biểu mẫu khác nhau.
Hình 3.4: Bản câu hỏi được tạo ra sử dụng các phần tử biểu mẫu
¾¾ Nút radio
Nút radio được sử dụng khi người dùng phải chọn chỉ một lựa chọn từ một tập hợp các tùy chọn.
Nút radio thường được sử dụng trong các nhóm. Tất cả các nút radio trong một nhóm phải có cùng
tên và phải có các giá trị trường khác nhau. Để thêm nút radio, đầu tiên đặt điểm chèn vào nét
ngoài biểu mẫu. Sau đó, trên menu Insert, chọn lệnh Form, và sau đó bấm vào lệnh Radio Group
từ menu con. Hộp thoại Radio Group sẽ được hiển thị như được trình bày trong hình 3.5.
Hình 3.5: Hộp thoại Radio Group
Trong trường Name, nhập tên cho nhóm nút radio. Bạn cũng có thể chèn một nút radio mới vào
nhóm bằng cách nhấn vào biểu tượng ‘+’. Tương tự như vậy, bấm vào biểu tượng ‘–’ để loại
bỏ nút radio khỏi nhóm. Bạn cũng có thể nhập nhãn và giá trị cho nút đã chọn. Bạn có thể nhập
nhãn và giá trị bằng cách nhấn vào văn bản mặc định dưới cột Label và Value trong phần Radio
buttons.

Phần 3
Kháiniệm
Bấm vào mũi tên lên hoặc xuống để sắp xếp lại các nút như mong muốn. Bạn cũng có tùy chọn để
chọn bố trí của các nút. Có thể thực hiện điều này sử dụng tùy chọn Line breaks hoặc Table. Khi
chọn tùy chọn Table, Dreamweaver tạo ra bảng một cột và đặt các nút radio ở bên trái và các nhãn
ở bên phải. Sau khi chọn bố trí, bấm vào OK. Nhóm nút radio sẽ được chèn vào trong biểu mẫu.
Với Dreamweaver CS5, bạn còn có tùy chọn để chèn mỗi lần một nút radio. Đặt điểm chèn vào
nét ngoài biểu mẫu, nơi bạn muốn chèn các hướng dẫn nút radio. Sau đó, một lần nữa trên menu
Insert, chọn lệnh Form, và sau đó bấm vào lệnh Radio Button từ menu con. Hình 3.6 hiển thị các
thuộc tính Radio Button trong Property Inspector.
Hình 3.6: Property Inspector hiển thị các thuộc tính nút radio
Property Inspector hiển thị các tùy chọn nút radio sau đây:
yy Trong trường Radio Button, gõ tên duy nhất.
yy Trong trường Checked value, nhập giá trị bạn muốn gửi cho tập lệnh phía máy chủ hoặc
ứng dụng để xử lý khi khách truy cập chọn nút radio này. Ví dụ, bạn có thể gõ ‘cricket’ vào
trường Checked value để chỉ ra rằng người truy cập đã chọn tùy chọn này.
yy Bấm vào Checked trong tùy chọn Initial state nếu bạn muốn nút radio xuất hiện được
chọn khi tải trang web lần đầu tiên.
¾¾ Các hộp kiểm
Với Dreamweaver CS5, bạn cũng có tùy chọn chèn hộp kiểm tra. Đầu tiên, đặt điểm chèn vào nét
ngoài biểu mẫu, nơi bạn muốn chèn hộp kiểm. Sau đó, trên menu Insert, trỏ tới Form, và sau đó
bấm vào lệnh Check box Group từ menu con. Ngoài ra, bạn cũng có thể chèn một hộp kiểm bằng
cách nhấn vào nút Check box trong tab Forms của thanh Insert. Hộp thoại Input Tag Accessibility
Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện như được trình bày trong hình
3.7.
Nhập các trường thích hợp và bấm vào OK. Hộp kiểm được đưa vào tài liệu của bạn.

Phần 3
Kháiniệm
Hình 3.7: Hộp thoại Input Tag Accessibility Attributes
Hộp kiểm sẽ được chèn vào trong nét ngoài biểu mẫu với Property Inspector hiển thị các tùy chọn
hộp kiểm như được trình bày trong hình 3.8.
Hình 3.8: Property Inspector hiển thị các thuộc tính hộp kiểm
Những tùy chọn này như sau:
yy Trong trường Checkbox name, bạn gõ tên duy nhất cho hộp kiểm.
yy Trong trường Checked value, bạn gõ giá trị cho hộp kiểm.
yy Từ tùy chọn Initial state, bạn chọn Checked nếu bạn muốn hộp kiểm xuất hiện được chọn
khi biểu mẫu đầu tiên tải vào trình duyệt hoặc bằng không chọn Unchecked.
¾¾ Nút
Bạn có thể chèn nút vào biểu mẫu trong Dreamweaver CS5 bằng cách đặt điểm chèn vào nét ngoài
biểu mẫu nơi bạn muốn chèn nút.

Phần 3
Kháiniệm
Sau đó, trên menu Insert, trỏ đến lệnh Form, và sau đó bấm vào lệnh Button. Hộp thoại Input
Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các
trường bắt buộc trong hộp thoại này và bấm vào OK. Nút này sẽ được hiển thị trong nét ngoài biểu
mẫu với Property Inspector hiển thị các tùy chọn sau. Xem hình 3.9.
Hình 3.9: Property Inspector hiển thị các thuộc tính nút
Các thuộc tính nút được hiển thị trong Property Inspector như sau:
yy Trong trường Button Name, nhập tên cho nút.
yy Trong trường Value, gõ văn bản sẽ xuất hiện trên nút.
yy Trường Action chỉ ra những gì nút sẽ làm sau khi nó được nhấp. Chọn Submit form sẽ
tự động đặt nhãn nút thành Submit và chọn Reset form sẽ tự động đặt nhãn nút thành
Reset.
¾¾ Trường văn bản
Bạn có thể chèn trường văn bản trong Dreamweaver CS5 bằng cách đặt điểm chèn vào nét ngoài
biểu mẫu nơi bạn muốn chèn trường văn bản. Sau đó, trên menu Insert, trỏ tới lệnh Form, và sau
đó bấm vào lệnh Text Field từ menu con. Hộp thoại Input Tag Accessibility Attributes (Nhập các
thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và
bấm vào OK. Trong trường hợp, bạn được yêu cầu thêm một thẻ biểu mẫu, bấm vào Yes. Ngoài
ra, bạn cũng có thể thêm một trường văn bản bằng cách nhấn vào nút Text Field trong bảng điều
khiển Insert. Hình 3.10 trình bày các thuộc tính của phần tử Text field trong Property Inspector.
Hình 3.10: Property Inspector hiển thị các thuộc tính trường văn bản
Hình 3.3 trình bày các thuộc tính của phần tử trường văn bản trong Property Inspector.
Char width Bạn có thể hạn chế trường văn bản để chứa số ký tự tối đa sử dụng trường này.
Ví dụ, nếu bạn nhập vào 50 ký tự trong trường này và người dùng nhập 75 ký
tự, chỉ có 50 ký tự đầu sẽ có thể xem được trong trường văn bản.

Phần 3
Kháiniệm
Max chars Bạn có thể chỉ ra số ký tự tối đa người dùng có thể nhập vào trường này cho
các trường văn bản đơn dòng. Bạn có thể sử dụng trường này để hạn chế
người dùng sử dụng văn bản với chiều dài cụ thể, như là mật khẩu tối đa 10
ký tự. Trong trường hợp người dùng nhập vào văn bản vượt quá độ rộng ký tự
của trường này, văn bản sẽ cuộn lại. Nếu bạn bỏ trống trường này, người dùng
có thể nhập bất kỳ số lượng ký tự nào. Âm thanh cảnh báo được tạo ra trong
trường hợp vượt quá số ký tự tối đa.
Num lines Tùy chọn này chỉ có sẵn khi bạn chọn tùy chọn Multi line. Bạn có thể sử dụng
trường này để đặt chiều cao của trường này đối với các trường văn bản nhiều
dòng.
Disabled Nếu bạn chọn hộp kiểm này, trường văn bản sẽ xuất hiện bị vô hiệu hóa và
người dùng không thể nhập văn bản vào đó.
Read-only Nếu bạn chọn hộp kiểm này, trường văn bản sẽ xuất hiện chỉ đọc cho người
dùng. Người dùng không thể chỉnh sửa trường văn bản này.
Class Bạn có thể sử dụng danh sách thả xuống này để áp dụng quy tắc CSS cho đối
tượng.
Bảng 3.3: Các thuộc tính văn bản
¾¾ Widget Validation Text Area
Bạn có thể chèn widget Validation Text Area (Vùng văn bản xác thực) là một vùng văn bản hiển thị
trạng thái hợp lệ hoặc không hợp lệ khi người dùng nhập một số văn bản vào đó. Bạn có thể sử
dụng phần tử biểu mẫu này cho các trường bắt buộc. Trong trường hợp người dùng không nhập
văn bản vào các trường bắt buộc, widget trả về thông báo lỗi yêu cầu người dùng nhập văn bản.
Để chèn widget Validation Text Area, đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn
trường phần tử. Sau đó, trên menu Insert, trỏ tới lệnh Spry, và sau đó bấm vào Spry Validation
Text area từ menu con. Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả
năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK.
Widget Validation Text Area sẽ được chèn vào trong biểu mẫu của bạn và Property Inspector hiển
thị các thuộc tính của nó như được trình bày trong hình 3.11.
Hình 3.11: Property Inspector hiển thị các thuộc tính widget Validation Text Area
Bảng 3.4 liệt kê các thuộc tính của widget Validation Text Area trong Property Inspector.

Phần 3
Kháiniệm
Spry text
area
Bạn có thể chỉ ra một tên duy nhất cho trường vùng văn bản.
Min chars Bạn có thể chỉ ra số ký tự tối thiểu sẽ được nhập vào trường này. Ví dụ, nếu bạn
nhập 25 vào hộp ký tự Min chars, widget chỉ xác thực xem người dùng có nhập
vào 25 ký tự trở nên vào vùng văn bản hay không.
Max chars Bạn có thể chỉ ra số ký tự tối đa người dùng có thể nhập vào trường này.
Preview
states
Bạn có thể chọn trạng thái sẽ được xem trước khi tải biểu mẫu. Ví dụ, nếu bạn
muốn xem widget trong trạng thái hợp lệ của nó, chọn Valid.
Validate on Bạn có thể chọn một tùy chọn từ phần này sẽ cho biết khi nào xác nhận xảy ra.
Bạn có thể chọn tất cả các tùy chọn hoặc chỉ Submit. Sau đây là những tùy chọn
có sẵn:
¾¾ Blur: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực bất cứ khi nào người
dùng bấm vào bên ngoài trường văn bản.
¾¾ Change: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực bất cứ khi nào
người dùng thay đổi văn bản bên ngoài trường văn bản.
¾¾ Submit: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực khi người dùng
thử gửi biểu mẫu đi. Tùy chọn gửi đi được chọn theo mặc định, và không
thể bị hủy chọn.
Counter Bạn có thể sử dụng phần này để thêm bộ đếm ký tự cho phép người dùng biết có
bao nhiêu ký tự mà họ đã gõ vào, hoặc có bao nhiêu ký tự còn lại khi nhập văn
bản vào vùng văn bản.
Bạn có thể chọn một trong hai tùy chọn Chars count (Đếm ký tự) hoặc Chars
remaining (Ký tự còn lại). Tùy chọn Chars remaining chỉ có sẵn khi bạn đã đặt
số ký tự tối đa cho phép.
Block extra
characters
Nếu bạn chọn hộp kiểm này, nó sẽ chặn các ký tự thêm đã nhập vượt quá số
lượng đã chỉ ra trong trường Max char.
Hint Bạn có thể cung cấp gợi ý cho người dùng cho phép họ biết loại thông tin nào
được yêu cầu trong trường này. Ví dụ, bạn có thể thêm gợi ý, như là ‘Nhập sở
thích của bạn ở đây’.
Required Nếu bạn chọn hộp kiểm này, vùng văn bản sẽ là bắt buộc đối với người dùng. Xóa
bỏ hộp kiểm này sẽ làm cho vùng văn bản thành tùy chọn.
Bảng 3.4: Các thuộc tính widget Validation Text Area
¾¾ List/Menu
Bạn có thể chèn List/menu cho phép người dùng chọn nhiều tùy chọn từ một danh sách hoặc
menu.

Phần 3
Kháiniệm
Để làm như vậy, đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn trường phần tử. Trên
menu Insert, trỏ tới lệnh Form, và sau đó bấm vào lệnh Select (List/Menu) từ menu con.
Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất
hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK.
Widget Validation Text Area sẽ được chèn vào trong biểu mẫu của bạn và Property Inspector hiển
thị các thuộc tính của nó như được trình bày trong hình 3.12.
Hình 3.12: Property Inspector hiển thị các thuộc tính List/Menu
Khi bạn bấm vào nút List Values, hộp thoại List Values sẽ được hiển thị như thể hiện trong hình 3.13.
Gõ văn bản vào các cột Item Label và Value. Bấm vào nút + để thêm các giá trị. Bấm vào nút – để xóa
các giá trị đã chọn. Khi thực hiện xong, bấm vào OK.
Hình 3.13: Hộp thoại List Values

Phần 3
Kháiniệm
Bảng 3.5 liệt kê các thuộc tính của phần tử List/Menu trong Property Inspector.
Type Bạn có thể chọn Menu hoặc List từ phần Type. Lựa chọn Menu sẽ tạo ra một danh
sách thả xuống và chỉ có một tùy chọn sẽ được hiển thị khi biểu mẫu được hiển thị
trong trình duyệt. Để hiển thị những tùy chọn khác, người dùng phải nhấn vào mũi
tên xuống. Lựa chọn List sẽ tạo ra một danh sách tùy chọn đơn giản và tất cả các
tùy chọn sẽ được hiển thị khi biểu mẫu được hiển thị trong trình duyệt. Người dùng
có thể chọn nhiều mục từ danh sách.
Height Tùy chọn này được kích hoạt chỉ khi bạn chọn List từ phần Type. Bạn có thể sử
dụng tùy chọn này để đặt số mục được hiển thị trong menu.
Selections Tùy chọn này được kích hoạt chỉ khi bạn chọn List từ phần Type. Bạn có thể sử
dụng tùy chọn này để chỉ ra xem người dùng có thể chọn nhiều mục từ danh sách
hay không.
List Values Mở hộp thoại List Values.
Class Bạn có thể áp dụng quy tắc CSS cho đối tượng bằng cách sử dụng danh sách thả
xuống này.
Initially
selected
Bạn có thể sử dụng trường này để đặt các mục đã chọn trong danh sách theo mặc
định. Bấm vào mục hoặc các mục trong danh sách.
Bảng 3.5: Các thuộc tính List/Menu
3.2.3 Xác thực các biểu mẫu
Trước khi gửi biểu mẫu đến máy chủ bạn nên luôn luôn xem dữ liệu do người dùng nhập vào có chính
xác và hợp lệ hay không. Đối với điều này, bạn sử dụng hành động Validate Form. Việc này sẽ kiểm
tra nội dung của các trường đã chỉ định trong biểu mẫu để đảm bảo rằng người dùng đã nhập đúng
loại dữ liệu. Bạn có thể gắn hành động này vào các trường văn bản riêng lẻ với sự kiện onBlur. Vì vậy,
bạn có thể xác thực các trường khi người dùng điền vào biểu mẫu, hoặc gắn nó vào biểu mẫu với sự
kiện onSubmit. Sau đó nó đánh giá một số trường văn bản cùng một lúc, khi người dùng bấm vào nút
Submit. Việc gắn hoạt động này vào biểu mẫu sẽ tránh biểu mẫu được gửi đến máy chủ nếu bất kỳ
trường văn bản đã chỉ định có chứa dữ liệu không hợp lệ.
Bạn có thể xác thực các trường riêng lẻ khi người dùng điền vào biểu mẫu bằng cách chọn một trường
văn bản trong nét ngoài biểu mẫu và trên menu Window. Sau đó, bấm vào lệnh Behaviors. Chọn tùy
chọn Validate Form từ danh sách các hành vi Add như được trình bày trong hình 3.14.

Phần 3
Kháiniệm
Hình 3.14: Hành động Validate Form đã chọn trong menu bật lên Actions
Về việc chọn hành động Validate Form, hộp thoại Validate Form sẽ mở ra như được trình bày trong hình
3.15. Nếu bạn đang xác thức các trường riêng lẻ, chỉ có tên trường văn bản đó sẽ được hiển thị trong
danh sách Named Fields. Nó đã được chọn.
Hình 3.15: Hộp thoại Validate Form
Nếu bạn muốn trường này bắt buộc phải chứa một số dữ liệu, chọn tùy chọn Required. Tiếp theo, chọn
từ một trong các tùy chọn Accept sau đây xuất hiện trong hộp thoại này. Xem hình 3.15.

Phần 3
Kháiniệm
¾¾ Sử dụng Anything, nếu trường này là bắt buộc nhưng không cần phải chứa bất kỳ loại dữ liệu
cụ thể nào. (Nếu tùy chọn Required không được chọn, tùy chọn Anything là vô nghĩa – có nghĩa
là nó cũng giống như khi hành động Validate Form không được gắn vào trường này.)
¾¾ Sử dụng trường Email address để kiểm tra xem trường có chứa biểu tượng @ hay không.
¾¾ Sử dụng Number để kiểm tra xem trường có chứa chỉ chữ số hay không.
¾¾ Sử dụng Number from để kiểm tra xem trường có chứa số trong một phạm vi cụ thể. Nếu bạn
đang xác thực nhiều trường, lặp lại bước 3 và 5 cho bất kỳ trường bổ sung nào bạn muốn xác
thực.
Cuối cùng, bạn bấm vào OK. Hành vi sẽ được gắn vào trường văn bản đó.
3.2.4 Tạo các biểu mẫu ColdFusion
Bạn có thể xác thực các biểu mẫu trong Dreamweaver CS5 với sự giúp đỡ của ColdFusion, cung cấp
cho bạn một số cơ chế dựng sẵn để xác thực dữ liệu biểu mẫu.
Dreamweaver CS5 cung cấp một số cải tiến bao gồm thêm nút bảng điều khiển Insert, các mục menu,
và Property Inspectors để bạn có thể nhanh chóng xây dựng và cài đặt các thuộc tính của các biểu
mẫu ColdFusion. Bạn cũng có thể tạo ra mã xác thực thông tin đo khách truy cập Website cung cấp. Ví
dụ, bạn có thể kiểm tra xem địa chỉ email do người dùng cung cấp có chứa biểu tượng ‘@’ hay không.
¾¾ Cho phép cải tiến ColdFusion
Cải tiến cho ColdFusion chỉ sẵn có khi bạn xác định một máy tính chạy ColdFusion MX 7 hoặc cao
hơn làm máy chủ thử nghiệm cho Dreamweaver. Một khi bạn xác định một máy chủ thử nghiệm,
Dreamweaver sau đó, tự động phát hiện phiên bản máy chủ thử nghiệm và làm cho các cải tiến có
sẵn nếu phát hiện ColdFusion.
Để tạo ra máy chủ thử nghiệm, bạn làm theo các bước sau:
1. Bạn xác định một Website Dreamweaver cho dự án ColdFusion của bạn.
2. Trên menu Site, bấm vào Manage Sites, và sau đó, chọn Website của bạn từ danh sách, và
bấm vào Edit.
3. Bạn chọn thể loại Servers và chỉ ra máy tính đang chạy ColdFusion MX 7 hoặc cao hơn làm
máy chủ thử nghiệm cho Website Dreamweaver của bạn. Đảm bảo rằng bạn chỉ ra một URL
Web hợp lệ.
4. Mở bất kỳ tài liệu ColdFusion nào. Bạn sẽ không thấy bất kỳ thay đổi thấy được đối với
không gian làm việc Dreamweaver cho đến khi bạn mở một tài liệu ColdFusion.

Phần 3
Kháiniệm
Để tạo ra một biểu mẫu ColdFusion, bạn làm theo những bước sau:
yy Mở một trang ColdFusion và đặt điểm chèn nơi bạn muốn biểu mẫu ColdFusion xuất hiện.
yy Trên menu Insert, trỏ đến lệnh ColdFusion Objects và sau đó tới CFForm và sau đó, chọn
lệnh CFForm, hoặc chọn loại CFForm từ bảng điều khiển Insert, và bấm vào biểu tượng
CF Form. Dreamweaver chèn vào một biểu mẫu ColdFusion trống. Trong giao diện Design,
biểu mẫu được chỉ định bằng một đường viền chấm chấm màu đỏ. Nếu bạn không nhìn
thấy đường viền này, trên menu View, chọn Visual Aids, và chọn lệnh Invisible Elements.
Bạn có thể cài đặt một số thuộc tính biểu mẫu ColdFusion trong Property Inspector. Bảng 3.6 liệt
kê những thuộc tính của các biểu mẫu ColdFusion.
Các phần tử
biểu mẫu
Mô tả
CFForm Bạn chỉ ra tên của biểu mẫu trong trường này.
Action Tùy chọn này cho phép bạn chỉ ra tên của trang ColdFusion để được xử lý khi
biểu mẫu được gửi.
Method Tùy chọn này cho phép bạn định nghĩa phương pháp mà trình duyệt sử dụng để
gửi dữ liệu biểu mẫu cho máy chủ:
¾¾ POST: Việc chọn tùy chọn này sẽ gửi dữ liệu sử dụng phương pháp
HTTP post, phương pháp này sẽ gửi dữ liệu trong một thông điệp riêng
biệt cho máy chủ.
¾¾ GET: Việc chọn tùy chọn này sẽ gửi dữ liệu sử dụng phương pháp HTTP
get, đặt nội dung trường biểu mẫu trong chuỗi truy vấn URL.
Target Tùy chọn này cho phép bạn sửa đổi giá trị của thuộc tính target của thẻ cfform.
Encoding Type Tùy chọn này cho phép bạn chỉ ra phương pháp mã hóa được sử dụng để truyền
dữ liệu biểu mẫu.
Ghi chú: Phương pháp mã hóa đã chọn chỉ ra loại nội dung được sử
dụng để gửi biểu mẫu đến máy chủ. Giá trị mặc định cho thuộc tính này là
application/x-www-form-urlencoded.

Phần 3
Kháiniệm
Các phần tử
biểu mẫu
Mô tả
Format Tùy chọn này xác định loại biểu mẫu nào được tạo ra:
¾¾ HTML: Việc chọn tùy chọn này tạo ra một biểu mẫu HTML và gửi nó cho
máy khách. Các điều khiển con cfgrid và cftree có thể ở định dạng Flash
hay applet.
¾¾ Flash: Việc chọn tùy chọn này tạo ra một biểu mẫu Flash và gửi nó cho
máy khách. Tất cả các điều khiển ở định dạng Flash.
¾¾ XML: Việc chọn tùy chọn này tạo ra XForms XML và đặt kết quả vào một
biến với tên biểu mẫu ColdFusion. Nó không gửi bất cứ điều gì đến máy
khách. Các điều khiển con cfgrid và cftree có thể ở định dạng Flash hay
applet.
Style Tùy chọn này cho phép bạn chỉ ra kiểu cho biểu mẫu.
Flash/XML Skin Tùy chọn này cho phép bạn chỉ ra màu quầng để tạo kiểu cho kết quả. Chủ đề
xác định màu được sử dụng cho các phần tử nổi bật và đã chọn.
Preserve Data Tùy chọn này xác định có nên ghi đè lên các giá trị kiểm soát ban đầu với các giá
trị đã gửi khi biểu mẫu gửi cho chính nó.
¾¾ Nếu False, các giá trị đã chỉ định trong các thuộc tính thẻ kiểm soát được
sử dụng.
¾¾ Nếu True, các giá trị đã gửi được sử dụng.
Scripts src Tùy chọn này cho phép bạn chỉ ra URL, liên quan đến gốc web, của tập tin
JavaScript có chứa mã phía máy khách được sử dụng bởi thẻ này và các thẻ
con của nó. Thuộc tính này rất hữu ích nếu tập tin không phải là ở vị trí mặc
định. Thuộc tính này có thể là bắt buộc trong một số môi trường và cấu hình lưu
trữ ngăn chặn truy cập vào thư mục /CFIDE. Vị trí mặc định được cài đặt trong
ColdFusion Administrator; theo mặc định, là /CFIDE/scripts/cfform.js.
Archive Tùy chọn này cho phép bạn chỉ ra URL của các lớp Java có thể tải về cho các
điều khiển applet cfgrid, cfslider, và cftree. Vị trí mặc định là /CFIDE/classes/
cfapplets.jar.
Height Tùy chọn này cho phép bạn chỉ ra chiều cao của biểu mẫu.
Width Tùy chọn này cho phép bạn chỉ ra độ rộng của biểu mẫu.
Display Tag
Editor for cfform
Tùy chọn này cho phép bạn chỉnh sửa các thuộc tính không được liệt kê trong
Property Inspector.
Bảng 3.6: Các thuộc tính biểu mẫu ColdFusion
3.3 Cascading Style Sheets (CSS)
Kiểu là một nhóm các thuộc tính định dạng kiểm soát diện mạo của một loạt văn bản trong một tài liệu
đơn lẻ.

Phần 3
Kháiniệm
3.3.1 Hiểu về CSS
Cascading Style Sheet (CSS) là tập hợp các quy tắc định dạng, có thể được sử dụng để kiểm soát một
số tài liệu cùng một lúc và bao gồm tất cả các kiểu cho một tài liệu. Nếu CSS được cập nhật hoặc thay
đổi, định dạng của tất cả các tài liệu được liên kết có sử dụng kiểu của của CSS cũng được cập nhật tự
động. Đây là lợi thế của việc sử dụng CSS trên một kiểu HTML. CSS cung cấp cho cả các nhà phát triển
Website và người dùng kiểm soát nhiều hơn đối với cách các trang được hiển thị. Với CSS, các nhà thiết
kế và người dùng có thể tạo ra các tờ kiểu dạng định nghĩa cách các phần tử khác nhau, như là đầu đề
và các liên kết thể hiện và hoạt động như thế nào trong tài liệu của bạn. Sau đó những tờ kiểu dạng này
có thể được áp dụng cho bất kỳ trang web nào.
Các kiểu CSS được xác định theo tên hoặc theo thẻ HTML, cho phép bạn thay đổi thuộc tính của kiểu và
thấy rằng tất cả văn bản, nơi kiểu đó được áp dụng, ngay lập tức phản ánh sự thay đổi. Các kiểu CSS
trong các tài liệu HTML có thể kiểm soát hầu hết các thuộc tính định dạng văn bản truyền thống như
phông chữ, kích thước, và căn chỉnh. Các kiểu CSS cũng có thể chỉ ra các thuộc tính HTML duy nhất,
như là định vị, hiệu ứng đặc biệt và chuột lăn qua. Kiểu CSS nằm trong khu vực HEAD của một tài liệu
và định nghĩa một loạt các kiểu.
Ghi chú: CSS hoạt động trong Internet Explorer 4.0 và các trình duyệt mới hơn. Internet Explorer 3.0
nhận biết một số tờ kiểu dạng CSS, nhưng các trình duyệt trước đó bỏ qua chúng.
3.3.2 Ưu điểm của Style Sheets
Sau đây là một số ưu điểm của tờ kiểu dạng:
¾¾ Nhanh chóng và dễ dàng cập nhật và thay đổi định dạng
Ưu điểm của việc sử dụng CSS so với định dạng HTML là tờ kiểu dạng có thể được liên kết với
nhiều tài liệu (Tạo ra một CSS). Khi kiểu được liên kết, các thuộc tính định dạng của kiểu được đưa
vào tài liệu. Điều này có nghĩa rằng bạn chỉ phải định nghĩa kiểu một lần, trong tờ kiểu dạng của
bạn, và tất cả các trang trong Website của bạn sẽ tự động nhận những thuộc tính này.
Ngoài ra, khi kiểu CSS được cập nhật hoặc thay đổi, định dạng của tất cả các tài liệu sử dụng tờ
kiểu dạng đó cũng sẽ được tự động cập nhật. Ví dụ, hãy tưởng tượng việc quản lý một Website rất
lớn. Nếu bạn đang sử dụng CSS, bạn có thể làm cho phông chữ và định dạng thay đổi cho toàn bộ
Website hoặc nhiều trang một cách nhanh chóng và chính xác.
¾¾ Kiểm soát các tính năng bổ sung
Một số tính năng, như là gán các dấu đầu dòng danh sách tùy chỉnh với các cỡ chữ khác nhau
không thể kiểm soát được bằng cách sử dụng HTML. Với các kiểu CSS, bạn có thể kiểm soát các
tính năng như vậy. Bằng cách sử dụng các kiểu CSS, bạn có thể tạo ra các bố cục trang nhất quán
qua nhiều trình duyệt.
Nhiều nhà thiết kế và nhà sáng tạo Website đã rất miễn cưỡng sử dụng các kiểu CSS vì sự hỗ trợ
trình duyệt không nhất quán. Tuy nhiên, nếu đối tượng của bạn bao gồm những người xem đang
sử dụng trình duyệt hỗ trợ CSS Styles (4.0 và mới hơn), bạn nên sử dụng sức mạnh và khả năng
kiểm soát mà chúng cung cấp.

Phần 3
Kháiniệm
3.3.3 Bảng điều khiển CSS Styles
Bạn có thể theo dõi các quy tắc và thuộc tính CSS với sự giúp đỡ của bảng điều khiển CSS Styles. Bảng
điều khiển CSS Styles còn cho phép bạn xem, tạo, chỉnh sửa, và loại bỏ các kiểu CSS, cũng như để
đính kèm các tờ kiểu dạng bên ngoài cho các tài liệu. Để mở bảng điều khiển CSS Styles, trên menu
Window, bấm vào lệnh CSS Styles. Ngoài ra, bạn có thể nhấn các phím Shift+F11 cùng một lúc.
Có hai chế độ - Chế độ Current và chế độ All. Trong chế độ Current, bạn có thể theo dõi các quy tắc và
thuộc tính có ảnh hưởng đến một phần tử trang hiện tại đã chọn. Trong chế độ All, bạn có thể theo dõi
tất cả các quy tắc và thuộc tính có sẵn cho tài liệu. Bạn có thể chuyển đổi giữa hai chế độ bằng cách sử
dụng hai nút ở trên cùng của bảng điều khiển. Xem hình 3.16.
Hình 3.16: Bảng điều khiển CSS Styles trong chế độ Current
¾¾ Bảng điều khiển CSS Styles ở chế độ Current
Ở chế độ Current, bảng điều khiển CSS Styles hiển thị ba ngăn:
yy Tóm tắt về lựa chọn: Những thuộc tính CSS cho lựa chọn hiện tại trong tài liệu được hiển
thị trong ngăn này.
yy Quy tắc: Vị trí của các thuộc tính đã chọn sẽ được hiển thị trong ngăn này.
yy Thuộc tính: Bạn có thể chỉnh sửa các thuộc tính CSS cho quy tắc được áp dụng cho lựa
chọn sử dụng ngăn này.

Phần 3
Kháiniệm
¾¾ Bảng điều khiển CSS Styles ở chế độ All
Ở chế độ All, bảng điều khiển CSS Styles hiển thị hai ngăn:
yy Ngăn All Rules (ở trên cùng) sẽ hiển thị danh sách các quy tắc được quy định trong tài liệu
hiện tại cũng như tất cả các quy tắc được quy định trong tờ kiểu dạng được gắn vào tài liệu
hiện tại.
yy Ngăn Properties (ở dưới cùng) cho phép bạn chỉnh sửa các thuộc tính CSS cho bất kỳ quy
tắc đã chọn nào trong ngăn All Rules. Xem hình 3.17.
Hình 3.17: Bảng điều khiển CSS Styles trong chế độ All
3.3.4 Tạo và quản lý CSS
Để tạo ra một kiểu CSS mới, đầu tiên đặt điểm chèn vào tài liệu. Tiếp theo, trên menu Window, bạn bấm
vào lệnhCSS Styles. Bảng điều khiển CSS Styles sẽ được hiển thị. Bấm vào biểu tượng New CSS Rule
nằm ở góc dưới bên phải. Hộp thoại New CSS Rule sẽ mở ra.

Phần 3
Kháiniệm
Xem hình 3.18.
Hình 3.18: Hộp thoại New CSS Rule
Chọn bất kỳ kiểu tùy chỉnh từ các tùy chọn Selector Type. Để nhập tên, chọn một thẻ từ danh sách thả
xuống Name cho bất kỳ Selector Types. Sau đó, bạn bấm vào OK. Hộp thoại CSS Rule Definition
được hiển thị như được trình bày trong hình 3.19.
Hình 3.19: Hộp thoại CSS Rule Definition
Chọn các tùy chọn kiểu cho tờ kiểu dạng CSS mới như phông chữ, cỡ chữ, và màu. Khi bạn đã thực hiện
xong việc cài đặt các thuộc tính kiểu, bạn bấm vào OK.

Phần 3
Kháiniệm
Vì vậy, kiểu CSS đã tạo ra sẽ được thêm vào bảng điều khiển CSS Styles. Các kiểu áp dụng kiểu tùy
chỉnh như sau:
¾¾ Áp dụng kiểu CSS (lớp) tùy chỉnh
Kiểu CSS (lớp) tùy chỉnh là loại các kiểu CSS duy nhất có thể được áp dụng cho bất kỳ văn bản
trong một tài liệu, bất kể là thẻ nào kiểm soát văn bản. Tất cả các kiểu (lớp) tùy chỉnh kết hợp với
tài liệu hiện tại được hiển thị trong bảng điều khiển CSS Styles và trong danh sách thả xuống Style
của Property Inspector.
Bạn sẽ thấy rằng hầu hết các kiểu được cập nhật ngay lập tức; tuy nhiên, bạn nên xem trước trang
của bạn trong một trình duyệt để xác minh xem một kiểu đã được áp dụng như mong đợi hay chưa.
Khi bạn áp dụng hai hoặc nhiều kiểu CSS cho cùng một văn bản, kiểu có thể xung đột và tạo ra
các kết quả không mong đợi.
Để áp dụng một kiểu CSS tùy chỉnh, bạn chọn văn bản nơi bạn muốn áp dụng kiểu CSS. Sau đó,
trên menu Window, bấm vào lệnhCSS Styles. Trong bảng điều khiển CSS Styles, chọn kiểu bạn
muốn áp dụng và bấm chuột phải. Từ menu ngữ cảnh, bạn chọn tùy chọn Apply.
Ngoài ra, trong cửa sổ Document, bấm chuột phải vào văn bản đã chọn. Sau đó, chọn tùy chọn
CSS Styles từ menu ngữ cảnh và sau đó, chọn kiểu để áp dụng. Xem hình 3.20.
Hình 3.20: CSS Style
Một cách khác để áp dụng một kiểu CSS tùy chỉnh là sử dụng menu bật lên Class của Property
Inspector như được trình bày trong hình 3.21. Bạn cũng có thể áp dụng một kiểu CSS bằng cách
nhấn vào lệnh CSS Styles trên menu Format. Sau đó, chọn kiểu CSS mong muốn để áp dụng từ
menu con.

Phần 3
Kháiniệm
Kiểu CSS sẽ được áp dụng cho văn bản đã chọn.
Hình 3.21: Property Inspector hiển thị danh sách kiểu
Để loại bỏ một kiểu lớp từ một lựa chọn, đầu tiên bạn chọn đối tượng hoặc văn bản mà bạn muốn loại bỏ
kiểu khỏi đó. Sau đó, trong HTML Property Inspector, bạn chọn None từ menu bật lên Class.
Để đổi tên một kiểu lớp, trong bảng điều khiển CSS Styles, bạn bấm chuột phải vào kiểu lớp CSS bạn
muốn đổi tên và chọn Rename Class. Một phương pháp khác để đổi tên một lớp là bằng cách chọn
Rename Class từ menu tùy chọn bảng điều khiển CSS Styles. Sau đó, trong hộp thoại Rename Class,
hãy chắc chắn rằng lớp bạn muốn đổi tên được chọn trong menu bật lên Rename Class. Cuối cùng,
trong hộp văn bản New Name, bạn nhập vào tên mới cho lớp mới và bấm vào OK.
Bạn có thể liên kết/chuyển nhập tờ kiểu dạng bên ngoài bằng cách chọn lệnh CSS Styles trên menu
Window. Bấm vào nút Attach Style Sheet nằm ở góc dưới bên phải của bảng điều khiển CSS Styles.

Phần 3
Kháiniệm
Xem hình 3.22.
Hình 3.22: Menu văn bản hiển thị kiểu
Hộp thoại Attach External Style Sheet xuất hiện. Bạn bấm vào nút Browse để chọn một CSS Style
Sheet bên ngoài hoặc gõ đường dẫn đến Style Sheet trong trường File/URL. Xem hình 3.23.
Hình 3.23: Đính kèm tờ kiểu dạng bên ngoài
Để tạo ra một tài liệu tham khảo trên tờ kiểu dạng bên ngoài, bạn bấm vào Import. Điều này tạo ra một
thẻ @import trong mã HTML, và tham khảo URL nơi tờ kiểu dạng đã xuất bản được đặt. Phương pháp
này không hoạt động với Netscape Navigator. Cuối cùng, bạn bấm vào OK. Tên của tờ kiểu dạng bên
ngoài xuất hiện trong bảng điều khiển CSS Styles.

Phần 3
Kháiniệm
3.3.5 Bố trí CSS Starter
Trong Dreamweaver CS5, bạn có thể chọn 16 bố trí CSS khác nhau. Ngoài ra, bạn có thể tạo các bố trí
CSS của riêng bạn. Sau này bạn có thể thêm những bố trí này vào thư mục cấu hình để chúng xuất hiện
như là các lựa chọn bố trí trong hộp thoại New Document.
¾¾ Tạo ra một trang với bố trí CSS
Để tạo ra một trang với bố trí CSS, bạn làm theo những bước sau:
1. Trên menu File, bạn bấm vào New.
2. Trong hộp thoại New Document, bạn bấm vào thể loại Blank Page.
3. Đối với Page Type, bạn chọn các loại trang bạn muốn tạo ra.
Ghi chú: Dreamweaver CS5 hạn chế bạn chọn một loại trang HTML cho bố trí này. Hạn chế của
bố trí CSS là nó không cho phép bạn tạo ra một trang ActionScript CSS, Library Item, JavaScript,
XML, (Extensible Stylesheet Language Transformations (XSLT), hoặc ColdFusion Component.
Bạn không thể đưa vào các bố trí trang CSS cho những loại trang dưới thể loại Other của hộp
thoại New Document.
4. Đối với Layout, bạn chọn cách bố trí CSS bạn muốn sử dụng. Bạn có thể chọn từ 16 bố trí
khác nhau. Cửa sổ Preview cho thấy cách bố trí và đưa ra một mô tả ngắn gọn về cách bố
trí đã chọn.
Bảng 3.7 liệt kê các loại cột được cung cấp bằng các bố trí CSS được thiết kế trước.
Tên cột Mô tả
Fixed Bạn chỉ ra chiều rộng cột bằng pixel trong cột này. Chiều rộng
cột nếu cố định không phân biệt cài đặt trình duyệt và văn bản
của người truy cập.
Liquid Bạn chỉ ra chiều rộng cột như là tỷ lệ phần trăm của chiều rộng
trình duyệt của khách truy cập Website. Chiều rộng cột có thể
thay đổi theo cài đặt trình duyệt của khách truy cập; nhưng
không thích ứng với các thiết đặt văn bản của khách truy cập.
Bảng 3.7: Loại cột
5. Bạn chọn một loại tài liệu từ menu bật lên DocType.
6. Từ menu bật lên Layout CSS, chọn một vị trí cho CSS của bố trí.

Phần 3
Kháiniệm
yy Add To Head: Bạn chọn tùy chọn này để thêm CSS cho bố trí vào phần đầu trang bạn
đang tạo.
yy Create New File: Bạn chọn tùy chọn này để thêm CSS cho bố trí vào tờ kiểu dạng CSS
bên ngoài mới. Tùy chọn này gắn tờ kiểu dạng mới cho trang web bạn đang tạo.
yy Link To Existing File: Bạn chọn tùy chọn này để chỉ ra một tập tin CSS hiện tại đã có
chứa các quy tắc CSS cần thiết cho việc bố trí. Để sử dụng cùng một bố trí CSS trên
nhiều tài liệu, bạn sử dụng tùy chọn này.
7. Thực hiện một trong các bước sau:
yy Nếu bạn chọn Add to Head từ Layout CSS trong menu bật lên (tùy chọn mặc định), bạn
nhấn vào Create.
yy Nếu bạn chọn Create New File từ menu bật lên Layout CSS, bạn bấm vào Create, và
sau đó, chỉ ra tên cho tập tin bên ngoài mới trong hộp thoại Save Style Sheet File As.
yy Nếu bạn đã chọn Link to Existing File từ Layout CSS trong menu bật lên, bạn thêm tập
tin bên ngoài vào hộp văn bản Attach CSS file bằng cách nhấn vào biểu tượng Add
Style Sheet, điền đầy đủ vào hộp thoại Attach External Style Sheet, và bấm vào OK.
Cuối cùng, bấm vào Create trong hộp thoại New Document.
Ghi chú: Tùy chọn Link to Existing File yêu cầu tập tin được chỉ định phải có những quy tắc cho tập tin
CSS được chứa trong nó.
Khi bạn đặt Layout CSS trong một tập tin mới hoặc liên kết đến một tập tin hiện có, Dreamweaver tự động
liên kết tập tin vào trang HTML bạn đang tạo.
3.3.6 Các thuộc tính CSS
Bạn có thể định nghĩa các thuộc tính cho các quy tắc CSS như phông chữ, hình và màu nền, và các
thuộc tính bố trí. Đầu tiên bạn tạo một quy tắc mới và sau đó, cài đặt các thuộc tính.
¾¾ Thuộc tính Type
Bạn có thể sử dụng thuộc tính Type trong hộp thoại CSS Rule Definition như được trình bày trong
hình 3.24 để cài đặt phông chữ và dạng chữ cơ bản cho kiểu CSS.

Phần 3
Kháiniệm
Hình 3.24: Hộp thoại CSS Rule Definition hiển thị các thuộc tính Type
¾¾ Thuộc tính Background
Bạn có thể sử dụng thể loại Background của hộp thoại CSS Rule Definition để định nghĩa các
thiết đặt nền cho một kiểu CSS như được trình bày trong hình 3.25. Bạn có thể tạo ra một kiểu để
thêm màu nền hoặc hình nền cho bất kỳ phần tử trang nào, ví dụ văn bản phía sau, bảng, trang,
và vân vân. Bạn cũng có thể cài đặt vị trí của hình nền.
Hình 3.25: Hộp thoại CSS Rule Definition hiển thị các thuộc tính nền

Phần 3
Kháiniệm
¾¾ Thuộc tính Block
Sử dụng thể loại Block của hộp thoại CSS Rule Definition như được trình bày trong hình 3.26 để
định nghĩa các thiết đặt giãn cách và căn chỉnh cho các thẻ và thuộc tính. Để áp dụng thuộc tính
Block, đầu tiên, bạn mở bảng điều khiển CSS Styles. Sau đó, bạn bấm đúp vào một quy tắc hoặc
thuộc tính hiện có trong ngăn trên cùng của bảng điều khiển CSS Styles. Trong hộp thoại CSS
Rule Definition, bạn chọn Block, và sau đó, cài đặt bất kỳ thuộc tính style nào.
Hình 3.26: Hộp thoại CSS Rule Definition hiển thị các thuộc tính khối
¾¾ Thuộc tính Box
Sử dụng thể loại Box của hộp thoại CSS Rule Definition như được trình bày trong hình 3.27 để
định nghĩa các thiết đặt cho các thẻ và các thuộc tính kiểm soát việc bố trí các phần tử trên trang.
Bạn có thể sử dụng các thiết đặt khác nhau cho mỗi bên của một phần tử khi áp dụng các thiết đặt
đệm và lề, hoặc sử dụng thiết đặt Same For All để áp dụng cùng một thiết đặt cho tất cả các phía
của một phần tử.

Phần 3
Kháiniệm
Hình 3.27: Hộp thoại CSS Rule Definition hiển thị các thuộc tính hộp
¾¾ Thuộc tính Border
Sử dụng thể loại Border của hộp thoại CSS Rule Definition như được trình bày trong hình 3.28
để cài đặt kiểu viền, độ rộng và màu.
Hình 3.28: Hộp thoại CSS Rule Definition hiển thị các thuộc tính viền
¾¾ Thuộc tính List
Bạn có thể sử dụng thể loại List của hộp thoại CSS Rule Definition để định nghĩa các thiết đặt
danh sách, như là kích thước và loại dấu đầu dòng, cho các thẻ danh sách. Xem hình 3.29.

Phần 3
Kháiniệm
Hình 3.29: Hộp thoại CSS Rule Definition hiển thị các thuộc tính danh sách
¾¾ Thuộc tính Positioning
Các thuộc tính kiểu Positioning thay đổi thẻ hoặc khối văn bản đã chọn thành một tầng mới sử
dụng thẻ mặc định để xác định các tầng như được đặt trong sở thích Layer. Bạn sử dụng thể loại
Positioning của hộp thoại CSS Rule Definition như được trình bày trong hình 3.30 để định nghĩa
các thiết đặt về định vị.
Hình 3.30: Hộp thoại CSS Rule Definition hiển thị các thuộc tính định vị

Phần 3
Kháiniệm
¾¾ Thuộc tính Extensions
Các thuộc tính kiểu Extensions bao gồm các bộ lọc, ngắt trang, và các tùy chọn con trỏ, hầu hết
trong số đó không được hỗ trợ trong bất kỳ trình duyệt nào hoặc chỉ được hỗ trợ trong Internet
Explorer 4.0 trở lên. Xem hình 3.31.
Hình 3.31: Hộp thoại CSS Rule Definition hiển thị các tùy chọn Phần mở rộng
3.3.7 Chỉnh sửa, định dạng, và kích hoạt/vô hiệu hóa CSS
Bạn có thể chỉnh sửa một quy tắc riêng lẻ trong tờ kiểu dạng CSS sử dụng bảng điều khiển CSS Styles.
Bạn cũng có thể làm việc trực tiếp trong tờ kiểu dạng CSS để chỉnh sửa các quy tắc CSS. Một số hành
động bạn có thể làm với tờ kiểu dạng CSS như sau:
¾¾ Chỉnh sửa tờ CSS Style
Trong bảng điều khiển CSS Styles , trước tiên bạn chọn chế độ All. Sau đó, trong ngăn All rules,
bạn bấm đúp vào tên của tờ kiểu dạng bạn muốn chỉnh sửa. Cuối cùng, trong cửa sổ Document,
bạn sửa đổi tờ kiểu dạng như mong muốn, và sau đó, lưu tờ kiểu dạng.
¾¾ Định dạng tờ CSS Style
Bạn có thể đặt tùy chọn kiểm soát định dạng của mã CSS của bạn. Ví dụ, bạn có thể cài đặt sở
thích sẽ đặt tất cả các thuộc tính CSS trên các dòng riêng biệt hoặc đặt một dòng trống giữa các
quy tắc CSS.
Để cài đặt sở thích định dạng mã CSS, trên menu Edit, bấm vào Preferences. Trong hộp thoại
Preferences, bạn chọn thể loại Code Format. Bên cạnh Advanced Formatting, bấm vào nút
CSS.

Phần 3
Kháiniệm
Trong hộp thoại CSS Source Format Options xuất hiện, chọn những tùy chọn bạn muốn áp dụng
cho mã nguồn CSS. Bản xem trước của CSS như nó sẽ thể hiện theo các tùy chọn bạn đã chọn
xuất hiện trong cửa sổ Preview bên dưới. Sau đây là một tập hợp các tùy chọn bạn cần phải cài
đặt:
yy Indent properties with: Tùy chọn này đặt giá trị thụt đầu dòng cho các thuộc tính trong một
quy tắc. Bạn có thể chỉ ra các tab hoặc dấu cách.
yy Each property on a separate line: Tùy chọn này đặt mỗi thuộc tính trong một quy tắc trên
một dòng riêng biệt.
yy Opening brace On separate line: Tùy chọn này đặt mở ngoặc cho một quy tắc trên một
dòng riêng biệt từ bộ chọn.
yy Only If More Than 1 Property: Tùy chọn này đặt các quy tắc đơn thuộc tính trên cùng một
dòng như bộ chọn.
yy All selectors for a rule on same line: Tùy chọn này đặt tất cả các bộ chọn cho quy tắc
trên cùng một dòng.
yy Blank line between rules: Tùy chọn này chèn một dòng trống giữa mỗi quy tắc.
Khi bạn đã thực hiện xong việc cài đặt các tùy chọn đã đề cập, bấm vào OK.
Bạn cũng có thể định dạng mã CSS trong một tờ kiểu dạng CSS một cách thủ công. Để làm điều này,
đầu tiên, bạn mở một tờ kiểu dạng CSS. Trên menu Commands, bấm vào lệnh Apply Source Formatting.
Các tùy chọn định dạng mà bạn đặt trong sở thích định dạng mã CSS được áp dụng cho toàn bộ tài liệu.
Bạn không thể định dạng các lựa chọn riêng lẻ.
¾¾ Cho phép/vô hiệu hóa CSS
Trong Dreamweaver CS5, bạn có thể ghi chú các phần của CSS từ bảng điều khiển CSS Styles,
mà không làm thay đổi trực tiếp trong mã. Điều này có thể được thực hiện sử dụng tính năng
Disable/Enable CSS Property
Khi bạn vô hiệu hóa một thuộc tính CSS, Dreamweaver thêm các thẻ chú thích CSS và nhãn
[disabled] cho thuộc tính CSS mà bạn đã vô hiệu hóa. Sau đó bạn có thể dễ dàng kích hoạt lại hoặc
xóa thuộc tính CSS đã vô hiệu hóa theo sở thích.
Để vô hiệu hóa CSS, trong ngăn Properties của bảng điều khiển CSS Styles, chọn thuộc tính
bạn muốn vô hiệu hóa. Sau đó, bấm vào biểu tượng Disable/Enable CSS Property ở góc dưới
bên phải của ngăn Properties như được trình bày trong hình 3.32. Khi bạn bấm vào biểu tượng
Disable/Enable CSS Property, biểu tượng Disabled xuất hiện bên trái của thuộc tính. Để kích
hoạt lại thuộc tính, bạn bấm vào biểu tượng Disabled.

Phần 3
Kháiniệm
Hình 3.32: Biểu tượng Disable/enable CSS Property
3.3.8 Kiểm tra CSS trong giao diện Live
Bạn có thể nhanh chóng xác định các phần tử HTML và CSS có liên quan của chúng bằng cách sử dụng
chế độ Inspect, hoạt động cùng với giao diện Live.
Để kiểm tra CSS trong giao diện Live, với tài liệu của bạn mở trong cửa sổ Document, bấm vào nút
Inspect nằm bên cạnh nút Live View trong thanh công cụ Document.
Ghi chú: Chế độ Kiểm tra tự động cho phép chế độ Live.
Sau đó, di chuột qua các phần tử trên trang để xem mô hình hộp CSS. Chế độ Kiểm tra làm nổi bật các
màu khác nhau cho viền, lề, phần đệm, và nội dung như được trình bày trong hình 3.33. Ngoài ra, nhấn
phím mũi tên trái trên bàn phím của bạn để làm nổi bật phần gốc của phần tử hiện đã được tô sáng. Bạn
cũng có thể nhấn phím mũi tên bên phải để quay trở lại làm nổi bật cho phần tử con. Bạn cũng có thể
bấm vào một phần tử để khóa một lựa chọn tô sáng.

Phần 3
Kháiniệm
Hình 3.33: Chế độ Kiểm tra
Ghi chú: Chế độ Kiểm tra tắt nếu bạn bấm vào một phần tử để khóa một lựa chọn tô sáng.
3.4 Làm việc với các thẻ Div
Có thể tạo ra các bố cục trang một cách thủ công bằng cách chèn thẻ div và áp dụng kiểu định vị CSS
cho chúng. Thẻ div được định nghĩa là thẻ có các phần hợp lý trong nội dung của một trang web. Thẻ
này có thể được sử dụng để tạo ra các hiệu ứng cột, căn giữa các khối nội dung, tạo ra các khu vực màu
khác nhau, và nhiều hơn nữa.
Bạn còn có tùy chọn tạo ra bố trí CSS dựa trên một trong những bố cục thiết kế sẵn đi kèm với Dreamweaver
trong trường hợp không quen thuộc khi sử dụng các thẻ div và CSS trong khi tạo ra các trang web. Hãy
thử sử dụng các bảng nếu bạn không thấy thoải mái làm việc với CSS, nhưng đã quen thuộc với việc sử
dụng các bảng.
Ghi chú: Bạn nên tránh sử dụng cùng một ID như là thẻ khác trong tài liệu của bạn. Bằng không,
Dreamweaver sẽ hiển thị thông báo lỗi.
3.4.1 Chèn thẻ Div
Có thể sử dụng thẻ div để tạo ra các khối bố trí CSS và định vị chúng trong tài liệu của bạn. Điều này rất
hữu ích nếu bạn có một tờ kiểu dạng CSS hiện có với các kiểu định vị được gắn với tài liệu của bạn.

Phần 3
Kháiniệm
Để nhanh chóng chèn thẻ div và áp dụng các kiểu hiện có cho nó, đầu tiên, trong cửa sổ Document, đặt
điểm chèn nơi bạn muốn thẻ div xuất hiện. Tiếp theo, chọn một trong những tùy chọn như sau:
¾¾ Trên menu Insert, trỏ đến Layout Objects, và sau đó bấm vào lệnh Div Tag.
¾¾ Trong thể loại Layout của bảng điều khiển Insert, bạn bấm vào nút Insert Div Tag.
Hộp thoại Insert Div Tag xuất hiện như được trình bày trong hình 3.34.
Hình 3.34: Hộp thoại Insert Div Tag
Chọn để cài đặt bất kỳ tùy chọn nào sau đây:
¾¾ Insert: Tùy chọn này cho phép bạn chọn vị trí của thẻ div và tên thẻ nếu nó không phải là một thẻ
mới. Nó có thể được đặt tại điểm chèn trước hoặc sau thẻ, hoặc trước hoặc sau phần đầu của
thẻ.
¾¾ Class: Tùy chọn này sẽ hiển thị kiểu lớp hiện được áp dụng cho thẻ. Nếu bạn đính kèm một tờ
kiểu dạng, các lớp được định nghĩa trong tờ kiểu dạng sẽ xuất hiện trong danh sách. Sử dụng
menu bật lên này để chọn kiểu bạn muốn áp dụng cho thẻ.
¾¾ ID: Tùy chọn này cho phép bạn thay đổi tên được sử dụng để xác định thẻ div cụ thể. Khi bạn
đính kèm một tờ kiểu dạng cá biệt, các ID được định nghĩa trong tờ kiểu dạng cũng xuất hiện
trong danh sách. Tuy nhiên, các ID cho các khối đã có trong tài liệu của bạn không được liệt kê.
Ghi chú: Không phân biệt cho dù bạn tạo ra các thẻ div sử dụng công cụ vẽ AP Div, Dreamweaver
CS5 đối xử với tất cả các thẻ div như các phần tử AP.
¾¾ New CSS Rule: Tùy chọn này sẽ mở ra hộp thoại New CSS Rules.
Cuối cùng, bấm vào OK. Khi làm như vậy, thẻ div xuất hiện với văn bản giữ chỗ, làm một hộp trong
tài liệu của bạn như được trình bày trong hình 3.35. Dreamweaver nêu bật cạnh của hộp, khi con
trỏ được di chuyển trên cạnh của hộp. Thẻ div sẽ trở thành một phần tử AP khi được định vị tuyệt
đối. Điều này có thể được chỉnh sửa trong trường hợp các thẻ div không được định vị tuyệt đối.

Phần 3
Kháiniệm
Hình 3.35: Thẻ div xuất hiện trong tài liệu
3.4.2 Chỉnh sửa thẻ div
Sau khi chèn thẻ div, nó còn có thể được thao tác hoặc bạn cũng có thể thêm nội dung vào đó. Ví dụ,
các thẻ div có các viền thấy được khi bạn chỉ định các viền cho thẻ div, hoặc khi bạn có CSS Layout
Outlines đã chọn. CSS Layout Outlines được chọn theo mặc định trong menu Visual Aids của menu
View. Dreamweaver còn làm nổi bật thẻ, khi di chuyển con trỏ chuột trên nó. Bạn còn có tùy chọn thay
đổi màu tô sáng hoặc thậm chí vô hiệu hóa việc tô sáng.
Bảng điều khiển CSS Styles cho phép bạn xem và chỉnh sửa các quy tắc cho các thẻ div khi đã chọn.
Bạn cũng có thể thêm nội dung vào nó đơn giản bằng cách đặt điểm chèn của bạn bên trong thẻ Div, và
sau đó, thêm nội dung cũng giống như bạn sẽ thêm nội dung vào một trang.
Ghi chú: Thẻ div khi được định vị tuyệt đối, trở thành các phần tử AP.
Để xem và chỉnh sửa các quy tắc được áp dụng cho một thẻ div, đầu tiên chọn thẻ div. Bạn có thể làm
như vậy bằng cách chọn bất kỳ một trong những lựa chọn sau đây:
¾¾ Bấm vào viền của thẻ div.

Phần 3
Kháiniệm
¾¾ Bấm vào bên trong thẻ div, và nhấn Ctrl+A hai lần.
¾¾ Bấm vào bên trong thẻ div, sau đó, từ bộ chọn thẻ ở dưới cùng của cửa sổ Document, chọn thẻ
div.
Tiếp theo, trên menu Window, bạn bấm vào lệnh CSS Styles để mở bảng điều khiển CSS Styles nếu
nó chưa được mở. Bảng điều khiển này sẽ hiển thị những quy tắc được áp dụng cho thẻ div. Bây giờ,
bạn có thể chỉnh sửa các quy tắc đã áp dụng cho thẻ theo yêu cầu của bạn.
3.4.3 Các khối bố trí CSS
Khối bố trí CSS là một phần tử trang HTML bạn có thể định vị bất cứ nơi nào trên trang của bạn. Khối bố
trí CSS hoặc là một thẻ div mà không có display:inline, hay bất kỳ phần tử trang nào khác bao gồm các
khai báo CSS display:block, position:absolute, hoặc position:relative.
Trong Dreamweaver CS5, bạn có thể hình dung các khối bố trí CSS trong khi bạn làm việc trong giao diện
Design. Ngoài ra, bạn có thể cho phép các nét ngoài, nền, và mô hình hộp cho các khối bố trí CSS.
Để xem các nét ngoài khối bố trí CSS, trên menu View, bạn chọn Visual Aids, và sau đó, bấm vào CSS
Layout Outlines. Để xem các nền khối bố trí CSS, trên menu View, bạn chọn Visual Aids, và sau đó,
bấm vào CSS Layout Backgrounds. Để xem các mô hình hộp khối bố trí CSS, trên menu View, bạn
chọn Visual Aids, và sau đó, bấm vào CSS Layout Box Model.
3.4.4 Làm việc với các phần tử AP
Phần tử AP là một phần tử trang HTML viết tắt của phần tử được định vị tuyệt đối. Phần tử này đặc biệt
là một thẻ div, hoặc bất kỳ thẻ nào khác có một vị trí tuyệt đối được gán cho nó. Những phần tử này có
thể là văn bản, hình ảnh, hoặc bất kỳ nội dung nào khác bạn có thể đặt trong phần thân của một tài liệu
HTML.
Với Dreamweaver CS5, bạn có thể sử dụng các phần tử AP để thiết kế cách bố trí cho trang web của
bạn. Bạn có thể thiết kế trang web theo cách mà các phần tử AP được sắp xếp đấu lưng nhau, ẩn một
số phần tử AP trong khi hiển thị những cái khác, hoặc thậm chí di chuyển các phần tử AP trên màn hình.
Bạn còn có tùy chọn đặt các hình nền khác nhau cho từng phần tử AP trong hơn một phần tử AP, và còn
đặt một phần tử có chứa văn bản với nền trong suốt, ở phía trước của cái đó.
Những phần tử AP, theo mặc định sẽ được định vị tuyệt đối sử dụng các thẻ div. Tuy nhiên, bạn có thể
phân loại bất kỳ phần tử HTML nào, ví dụ một hình ảnh, làm phần tử AP bằng cách chỉ định một vị trí
tuyệt đối cho nó. Tất cả các phần tử AP bao gồm các thẻ div AP xuất hiện trong bảng điều khiển các
phần tử AP.
¾¾ Mã HTML cho các phần tử div AP
Như đã nói ở trên, Dreamweaver tạo ra các phần tử AP sử dụng thẻ div. Theo mặc định, các phần
tử có tên là ap Div1 cho div đầu tiên bạn vẽ, apDiv2 cho div thứ hai bạn vẽ, và vân vân. Khi một
phần tử AP được vẽ sử dụng công cụ Draw AP Div, Dreamweaver chèn thẻ div vào tài liệu và gán
div một giá trị id cho phần tử đó.

Phần 3
Kháiniệm
Cái này sau đó có thể được đổi tên thành một tên mà bạn muốn, sử dụng bảng điều khiển các phần
tử AP hoặc Property Inspector. Dreamweaver còn sử dụng CSS nhúng trong phần đầu của tài
liệu để định vị Div AP, và để gán Div AP các kích thước chính xác của nó.
¾¾ Chèn một AP Div
Dreamweaver, cùng với việc cho phép bạn dễ dàng tạo ra và định vị các AP Div trên trang web của
bạn, còn cung cấp cho bạn tùy chọn để tạo các AP Div lồng nhau. Khi một AP Div được chèn vào,
theo mặc định, nét ngoài của AP Div được hiển thị trong giao diện Design , và các khối được tô
sáng khi di chuyển con trỏ qua nó. Bạn còn có tùy chọn vô hiệu hóa sự trợ giúp trực quan hiển thị
các nét ngoài AP Div (hoặc bất kỳ phần tử AP nào) bằng cách vô hiệu hóa cả AP Element Outlines
và CSS Layout Outlines trong menu View và chọn menu con Visual Aids. Hơn nữa, cùng với
điều này bạn cũng có thể cho phép nền và mô hình hộp cho các phần tử AP như là một trợ giúp
trực quan trong khi bạn thiết kế.
Sau khi tạo một phần tử AP Div, bạn có thể thêm nội dung cho nó. Điều này có thể được thực hiện
bằng cách:
yy Đơn giản chỉ cần đặt điểm chèn trong AP Div, và sau đó, thêm nội dung cũng giống như
bạn thêm nội dung vào một trang web.
Bạn có thể vẽ một AP Div đơn lẻ hoặc nhiều AP Div liên tiếp. Để làm điều này, hãy làm theo các
bước sau:
1. Trong thể loại Layout của bảng điều khiển Insert, bấm vào nút Draw AP Div.
2. Trong giao diện Design của cửa sổ Document, thực hiện một trong các cách sau:
yy Kéo để vẽ một AP Div đơn lẻ.
yy Ctrl+kéo để vẽ nhiều AP Div liên tiếp.
Ghi chú: Bạn có thể tiếp tục vẽ các AP Div mới miễn là bạn không nhả phím Ctrl hoặc Command.
3.5 Widget Spry
Phần tử widget Spry là một phần tử trang cho phép tương tác người dùng như là bạn có thể có được trải
nghiệm người dùng phong phú hơn.
Widget Spry về cơ bản bao gồm các phần sau đây:
¾¾ Cấu trúc widget: Nó bao gồm một khối mã HTML định nghĩa thành phần cấu trúc của widget.
¾¾ Hành vi widget: Nó bao gồm JavaScript để kiểm soát phản ứng của widget đối với các sự kiện
người dùng khởi tạo.

Phần 3
Kháiniệm
¾¾ Tạo kiểu widget: Nó bao gồm một CSS chỉ ra sự xuất hiện của widget.
Hình 3.36 trình bày các mẫu widget Spry trong cửa sổ Document.
Hình 3.36: Các mẫu widget Spry
Khung Spry hỗ trợ một tập hợp các widget có thể tái sử dụng được viết bằng HTML, CSS và JavaScript
tiêu chuẩn. Bạn chỉ có thể chèn những widget này sử dụng mã HTML và CSS. Ngoài ra, bạn có thể tạo
kiểu widget.
Nó giúp tăng cường tương tác người dùng, như là người dùng có thể hiển thị hoặc ẩn nội dung trên trang
web, thay đổi diện mạo của trang, và tương tác với các mục menu.
Trong khuôn khổ Spry, mỗi widget có liên quan đến các tập tin CSS và JavaScript duy nhất. Tập tin CSS
cho phép bạn có các tùy chọn để tạo kiểu widget. Tập tin JavaScript chịu trách nhiệm cho chức năng của
widget. Khi bạn chèn widget trong Dreamweaver CS5, widget có chứa chức năng và kiểu được tự động
liên kết đến trang web của bạn.
Những widget này được đặt tên theo các tập tin CSS hoặc JavaScript có liên kết với nó. Ví dụ, các tập
tin liên quan đến widget Accordion được gọi là SpryAccordion.css và SpryAccordion.js. Điều này
làm cho dễ dàng biết loại tập tin nào tương ứng với widget nào. Khi bạn chèn một widget vào một trang
đã lưu, Dreamweaver tạo ra thư mục SpryAssets trong Website của bạn, và lưu các tập tin JavaScript
CSS tương ứng cho vị trí đó.

Phần 3
Kháiniệm
Với Dreamweaver, bạn có các tùy chọn sau đây khi làm việc trên các widget Spry:
¾¾ Chèn một widget Spry
Để chèn một widget Spry, trên menu Insert, nhấn vào lệnh Spry, và tiếp tục chọn widget mong
muốn mà bạn muốn chèn vào. Khi chèn một widget, Dreamweaver tự động đưa vào các tập tin
Spry JavaScript và CSS cần thiết trong Website của bạn khi bạn lưu trang web.
¾¾ Chọn một widget Spry
Để chọn widget Spry, đặt con trỏ chuột trên widget cho đến khi bạn nhìn thấy viền ngoài dạng tab
màu xanh của widget. Sau đó, ở góc trên bên trái của widget, bạn bấm vào tab của widget. Widget
Spry sẽ được chọn như được trình bày trong hình 3.37.
Hình 3.37: Widget Spry đã chọn

Phần 3
Kháiniệm
¾¾ Chỉnh sửa widget Spry
Để chỉnh sửa widget Spry, đầu tiên, bạn chọn widget nơi bạn muốn áp dụng các thay đổi. Bạn có
thể thực hiện những thay đổi này trong Property Inspector.
¾¾ Tạo kiểu widget Spry
Để tạo kiểu một widget Spry, hãy chỉ ra vị trí tập tin CSS thích hợp cho widget trong thư mục
SpryAssets của Website của bạn, và sau đó, chỉnh sửa CSS theo sở thích của bạn.
¾¾ Thay đổi thư mục tài nguyên Spry mặc định
Khi bạn chèn một widget Spry, tập dữ liệu hay hiệu ứng vào một trang đã lưu, Dreamweaver tạo
ra thư mục SpryAssets trong Website của bạn, và lưu các tập tin JavaScript CSS tương ứng cho
vị trí riêng biệt đó. Bạn còn có tùy chọn thay đổi vị trí nơi Dreamweaver lưu các tài nguyên Spry
theo mặc định, đến vị trí mong muốn. Để làm như vậy, trên menu Sites, bạn bấm vào lệnh Manage
Sites. Tiếp theo, trong hộp thoại Manage Sites, bạn chọn Website mong muốn và bấm vào Edit.
Trong thể loại Advanced của hộp thoại Site Setup, chọn Spry Now, bạn nhập đường dẫn đến thư
mục mà bạn muốn sử dụng cho SpryAssets và sau đó, bấm vào OK. Bạn cũng có thể bấm vào
biểu tượng thư mục và duyệt đến một vị trí.
3.6 Hiệu ứng Spry
Hiệu ứng Spry không là gì, nhưng cải tiến hình ảnh có thể được áp dụng cho hầu hết các phần tử trên
một trang HTML sử dụng JavaScript. Bạn có thể sử dụng hiệu ứng Spry để làm nổi bật thông tin, tạo ra
chuyển tiếp dạng động, hoặc thay đổi một phần tử trang mang tính trực quan trong một thời gian. Bạn
cũng có thể áp dụng hiệu ứng cho các phần tử HTML không có bất kỳ thẻ tùy chỉnh bổ sung nào.
Ghi chú: Để áp dụng hiệu ứng cho một phần tử, bạn phải chọn phần tử đó hoặc phần tử phải có một
ID.
Hiệu ứng giúp thay đổi các thuộc tính của các phần tử như độ mờ đục, tạo tỉ lệ, định vị, và tạo kiểu có liên
quan đến màu nền và vân vân. Bạn còn có tùy chọn tạo ra hiệu ứng trực quan thú vị bằng cách kết hợp
hai hoặc nhiều thuộc tính. Khi người dùng bấm vào vào đối tượng với một hiệu ứng đặc biệt, đối tượng
được tự động cập nhật, mà không làm mới toàn bộ trang HTML, vì hiệu ứng là dựa trên Spry.
Spry bao gồm những hiệu ứng sau:
¾¾ Appear/Fade: Sử dụng hiệu ứng này, phần tử xuất hiện hoặc biến mất dần.
¾¾ Highlight: Hiệu ứng này thay đổi màu nền của một phần tử.
¾¾ Blind Up/Down: Hiệu ứng này mô phỏng nhấp nháy cửa sổ đi lên hoặc xuống để ẩn hoặc để lộ
ra phần tử.

Phần 3
Kháiniệm
¾¾ Slide: Hiệu ứng này di chuyển phần tử lên hoặc xuống.
¾¾ Grow/Shrink: Hiệu ứng này làm tăng hoặc giảm kích thước của phần tử.
¾¾ Shake: Hiệu ứng này mô phỏng việc lắc phần tử từ trái sang phải.
¾¾ Squish: Hiệu ứng này làm cho phần tử biến mất vào góc trên bên trái của trang.
Ghi chú: Hãy lấy một ví dụ và xem bạn có thể áp dụng hiệu ứng Xuất hiện/Làm mờ như thế nào. Có
thể sử dụng hiệu ứng này với phần tử HTML hạn chế. Bạn không thể sử dụng hiệu ứng này với các thẻ
HTML, như là applet, body, iframe, object, tr, tbody, hay th.
Hãy lấy một ví dụ và xem bạn có thể áp dụng hiệu ứng Xuất hiện/Làm mờ như thế nào. Có thể sử dụng
hiệu ứng này với phần tử HTML hạn chế. Bạn không thể sử dụng hiệu ứng này với các thẻ HTML, như
là applet, body, iframe, object, tr, tbody, hay th.
Để áp dụng hiệu ứng này, hãy làm theo các bước sau:
1. Chọn nội dung hay phần tử bố trí nơi bạn muốn áp dụng hiệu ứng.
2. Trong bảng điều khiển Behaviors, bấm nút dấu cộng (+), bấm vào Effects và chọn Appear/Fade
từ menu con như được trình bày trong hình 3.38.

Phần 3
Kháiniệm
Hình 3.38: Tùy chọn hiệu ứng Xuất hiện/Làm mờ
3. Chọn ID của phần tử từ menu phần tử mục tiêu. Trong trường hợp, bạn đã lựa chọn một phần tử,
chọn <Current Selection>.
4. Trong hộp Effect Duration, chỉ ra thời gian cần thiết để hiệu ứng xảy ra, theo mili giây.
5. Chọn hiệu ứng bạn muốn áp dụng: Mờ dần hoặc Xuất hiện.
6. Trong hộp Fade From, chỉ ra tỷ lệ phần trăm độ mờ đục bạn muốn hiệu ứng phải có khi nó xuất
hiện.
7. Trong hộp Fade To, xác định tỷ lệ phần trăm độ mờ đục bạn muốn làm mờ.
8. Chọn Toggle Effect nếu bạn muốn hiệu ứng được đảo ngược, đi từ mờ dần sang xuất hiện và
ngược lại với các lần bấm chuột liên tiếp.

Phần 3
Kháiniệm
Hình 3.39 trình bày hiệu ứng Xuất hiện/Làm mờ được áp dụng cho tài liệu.
Hình 3.39: Hiệu ứng Xuất hiện/Làm mờ được áp dụng
Ghi chú: Với mỗi hiệu ứng Spry đã thêm, các dòng khác nhau của mã được thêm vào tập tin của bạn
trong giao diện Code. Một dòng xác định tập tin SpryEffects.js, đó là cần thiết để đưa vào các hiệu
ứng. Vô tình, nếu bạn loại bỏ dòng này khỏi mã của bạn, hiệu ứng sẽ không làm việc.
3.7 Hành vi
Trong Dreamweaver, các hành vi được sử dụng để đưa mã JavaScript vào trong tài liệu. Hành vi cho
phép khách truy cập tương tác với các trang web và thay đổi chúng theo nhiều cách khác nhau, như là
hiển thị cửa sổ bật lên, phát âm thanh, và trao đổi hình ảnh.
3.7.1 Hiểu về các hành vi
Hành vi trong Dreamweaver là một sự kết hợp sự kiện và hành động. Có thể áp dụng hành vi cho bất kỳ
đối tượng nào, như là một trang, hình ảnh, liên kết, và nút. Hành vi là đoạn mã tập lệnh phía máy khách
và được thực thi trong trình duyệt máy khách và không phải trên máy chủ.

Phần 3
Kháiniệm
Mỗi trình duyệt có một danh sách các sự kiện, có thể được liên kết với một danh sách các hành động
trong biểu tượng ‘+’ của bảng điều khiển Behaviors. Sự kiện chỉ ra sự xuất hiện của một hành động. Ví
dụ, khi khách truy cập bấm vào một nút, trình duyệt tạo ra sự kiện onClick cho nút đó; trình duyệt sau
đó kiểm tra và phát hiện ra liệu có một số mã JavaScript (được chỉ ra trong trang đang được xem) trình
duyệt được cho là gọi ra khi sự kiện này được tạo ra cho nút đó. Các sự kiện khác nhau được định nghĩa
cho các phần tử trang khác nhau. Ví dụ, trong hầu hết các trình duyệt onMouseOver và onClick là các
sự kiện thường được kết hợp với các liên kết, trong khi onLoad là một sự kiện gắn liền với các hình ảnh
và với phần thân của tài liệu. Sự kiện đơn lẻ có thể kích hoạt các hành động khác nhau và bạn có thể chỉ
ra thứ tự trong đó những hành động đó xảy ra.
Hành động bao gồm mã JavaScript viết sẵn để thực hiện một nhiệm vụ cụ thể, như là trao đổi hình ảnh,
mở một cửa sổ trình duyệt, hiển thị hoặc ẩn một lớp, phát âm thanh, hoặc dừng phim Shockwave.
Sau khi bạn gắn hành vi với một phần tử trang, mỗi lần sự kiện này diễn ra, hành động sẽ được gọi. Ví
dụ, nếu bạn áp dụng một sự kiện như onClick cho một nút và hành động này là để hiển thị cửa sổ bật
lên, khi đó, mỗi khi bạn bấm vào nút này, một cửa sổ bật lên sẽ được hiển thị.
3.7.2 Áp dụng các hành vi
Bạn có thể áp dụng các hành vi cho toàn bộ trang, cho hình ảnh, cho các phần tử biểu mẫu, các liên kết,
và vân vân. Trình duyệt bạn đang chọn xác định danh sách các sự kiện cho một phần tử trang cụ thể.
Internet Explorer 4.0 có nhiều các sự kiện hơn Navigator 4.0 hoặc bất kỳ trình duyệt 3.0. Bạn không thể
gắn một hành vi vào văn bản thuần. Bạn chọn phần tử trang như là nút hoặc liên kết tới nơi hành vi này
sẽ được gắn vào. Để truy cập bảng điều khiển Behaviors, bấm vào lệnh Behaviors từ menu Window.
Xem hình 3.40.
Hình 3.40: Bảng điều khiển Behaviors

Phần 3
Kháiniệm
Để thêm một hành vi mới, bạn bấm vào nút ‘+’ và menu bật lên Action sẽ được hiển thị như được trình
bày trong hình 3.41.
Hình 3.41: Danh sách hành động
Chọn một hành động từ menu bật lên Action. Khi bạn chọn một hành động, hộp thoại sẽ được hiển thị
cho thấy các tham số để được điền vào. Điền vào các tham số và bấm vào nút OK.
Trong cột Events, sự kiện mặc định sẽ được liệt kê trong đó sẽ kích hoạt hành động này. Nếu sự kiện
được liệt kê không phải là cái bạn muốn, bạn có thể thay đổi nó bằng cách đặt con trỏ vào cột Events.
Với cái này, một danh sách thả xuống xuất hiện, khi nhấn vào, sẽ hiển thị một danh sách các sự kiện liên
kết với phần tử đã chọn. Xem hình 3.42. Danh sách các sự kiện đã hiển thị phụ thuộc vào trình duyệt đã
chọn trong tùy chọn ‘Show Events For’. Ví dụ, nếu bạn chọn trình duyệt 3.0 và cao hơn, chỉ có một vài
tùy chọn sẽ được hiển thị, trong khi đó nếu bạn chọn trình duyệt 4.0 và cao hơn, nhiều sự kiện hơn sẽ
được đưa vào.

Phần 3
Kháiniệm
Hình 3.42: Các sự kiện được hiển thị trong bảng điều khiển Behaviors
3.7.3 Thay đổi hoặc xóa các hành vi
Một khi bạn đính kèm một hành vi, bạn có thể thay đổi sự kiện gây nên hành động, thêm hoặc loại bỏ các
hành động, và thay đổi các tham số cho các hành động. Để làm điều này, đầu tiên bạn chọn đối tượng
với một hành vi được gắn với nó. Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Làm như
sau để thực hiện những thay đổi theo yêu cầu:
¾¾ Để chỉnh sửa các tham số của một hành động, bạn bấm đúp chuột vào tên của nó, hoặc chọn nó
và nhấn Enter. Sau đó, bạn thay đổi các tham số trong hộp thoại và bấm vào OK.
¾¾ Để thay đổi thứ tự của các hành động cho một sự kiện nào đó, bạn chọn một hành động và bấm
vào phím mũi tên Lên hoặc Xuống. Ngoài ra, bạn có thể chọn một hành động và cắt và dán nó
vào vị trí mong muốn giữa những hành động khác.
¾¾ Để xóa một hành vi, chọn nó và bấm vào nút Dấu trừ (–) hoặc nhấn phím Delete.
3.8 Các hành vi Dreamweaver dựng sẵn
Với các hành động Dreamweaver, bạn có thể kiểm soát nhiều khía cạnh của một trang web như là mở cửa
sổ trình duyệt, phát âm thanh, hiển thị các thông báo bật lên và vân vân. Các hành động Dreamweaver
hoạt động trong Internet Explorer 4.0 và các trình duyệt cao hơn và Netscape 4.0 và các trình duyệt cao
hơn. Các hành động Dreamweaver đã được viết để hoạt động trong càng nhiều trình duyệt web càng tốt.
Vì vậy, nếu bạn loại bỏ mã trong hành động Dreamweaver hoặc thay thế nó bằng mã riêng của bạn, bạn
có thể mất chức năng nhiều trình duyệt.
Rất nhiều người dùng có JavaScript đã vô hiệu hóa trên các trình duyệt của họ. Do đó, họ không thể xem
các nội dung Website. Để tránh điều này, bạn nên cung cấp các giao diện thay thế được đưa vào trong
các thẻ <noscript> để mọi người không có JavaScript có thể sử dụng Website của bạn.

Phần 3
Kháiniệm
Bây giờ bạn sẽ tìm hiểu một vài hành động trong Dreamweaver.
3.8.1 Call JavaScript
Hành động Call JavaScript cho phép chúng tôi sử dụng bảng điều khiển Behaviors để chỉ ra chức
năng tùy chỉnh mà bạn đã thêm vào trong phần <head> của trang web hoặc để thực hiện một dòng mã
JavaScript khi sự kiện xảy ra.
Bạn có một nút tên là close window. Bạn sẽ thêm hành động Call JavaScript cho sự kiện onClick cho
nút này như được giải thích. Xem hình 3.43.
Hình 3.43: Đóng nút cửa sổ đã thêm vào tài liệu
Chọn một đối tượng. Ví dụ, ở đây, bạn sẽ chọn nút đóng cửa sổ. Sau đó, trên menu Window, bạn bấm
vào lệnh Behaviors. Bảng điều khiển Behaviors sẽ được hiển thị. Bạn bấm vào nút cộng ‘+’ và chọn
Call JavaScript từ menu bật lên Actions.
Hình 3.44: Hành vi Call JavaScript trong bảng điều khiển Behaviors
Ở đây, bạn có thể gõ chính xác mã JavaScript được thực thi, hoặc gõ tên của hàm. Do bạn muốn đóng
cửa sổ, bạn gõ ‘window.close()’ vào trường văn bản JavaScript.

Phần 3
Kháiniệm
Nếu bạn đã đặt mã của bạn làm một hàm trong thẻ <head>, bạn cần phải gõ chỉ có tên hàm (ví dụ,
win_close()). Bây giờ, bạn bấm vào OK. Hành vi Call JavaScript sẽ được thêm vào bảng điều khiển
Behaviors. Xem hình 3.44 được trình bày trước đây.
Trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn
hay không. Theo mặc định, sự kiện onClick được hiển thị. Nếu sự kiện đã hiển thị không phải là cái bạn
muốn, bạn có thể chọn cái khác từ menu bật lên Event. Trong trường hợp những sự kiện bạn muốn
không được liệt kê, bạn thay đổi trình duyệt mục tiêu trong tùy chọn Show Events For trong danh sách
Action.
3.8.2 Check Plugin
Khi sử dụng hành động Check Plugin, khách truy cập được định tuyến vào các trang khác nhau tùy
thuộc vào việc họ có plug-in đã chỉ định được cài đặt trên máy tính của họ hay không. Ví dụ, bạn có thể
sử dụng hành động này để chuyển hướng người dùng đến một trang nếu họ có Flash được cài đặt trên
máy tính của họ. Tương tự như vậy, trong trường hợp khách truy cập không có Flash, bạn có thể chuyển
hướng họ đến một trang khác. Bạn đã thấy cho chính mình, trong khi truy cập bất kỳ Website nào có
chứa phim flash, nếu bạn không có Shockwave player đã cài đặt trên máy tính của bạn, bạn sẽ được
chuyển hướng đến một trang từ nơi bạn có thể cài đặt nó trên máy tính của bạn.
Ghi chú: Bạn không thể phát hiện các plug-in cụ thể trong trình duyệt Internet Explorer sử dụng
JavaScript. Tuy nhiên, việc chọn Flash hoặc Director sẽ thêm mã VBScript thích hợp để trang web của
bạn để phát hiện những plug-in đó trong trình duyệt IE trên Windows. Việc phát hiện plug-in là không
thể trong Internet Explorer trên máy Macintosh.
Để sử dụng hành động Check Plugin, chọn một đối tượng và mở bảng điều khiển Behaviors. Sau đó,
bạn bấm vào nút cộng ‘+’ và chọn Check Plugin từ menu bật lên Actions. Hộp thoại Check Plugin sẽ
được hiển thị. Xem hình 3.45.
Hình 3.45: Hộp thoại Check Plugin
Chọn một plug-in từ danh sách thả xuống Select hoặc chọn tùy chọn Enter và gõ chính xác tên của plug-
in trong trường liền kề. Bạn phải sử dụng chính xác tên của plug-in như được chỉ ra bằng in đậm trên
trang About Plugins trong Navigator. Bạn có thể truy cập trang này trên menu Windows, bằng cách
nhấn vào menu con Help của Navigator và chọn lệnh About Plugins.
Trong trường If Found, go to URL, bạn chỉ ra một URL cho khách truy cập là những người có plug-in.
Nếu bạn chỉ ra một URL từ xa, bạn phải bao gồm tiền tố http:// trong địa chỉ.

Phần 3
Kháiniệm
Để làm cho khách truy cập có plug-in ở trên cùng một trang, bạn phải để trống trường này.
Trong trường Otherwise, go to URL, bạn chỉ ra một URL thay thế cho các khách truy cập không có plug-
in. Để làm cho khách truy cập không có plug-in ở trên cùng một trang, bạn để trống trường này.
Việc phát hiện plug-in là không thể trong Internet Explorer trên máy Macintosh, và hầu hết các plug-in
không thể phát hiện được trong Internet Explorer trên Windows. Theo mặc định, khi phát hiện là không
thể, khách truy cập sẽ được gửi đến URL được liệt kê trong trường Otherwise. Để gửi khách truy cập
đến URL đầu tiên (Nếu tìm thấy), chọn tùy chọn ‘Always go to first URL if detection is not possible’
(Luôn đi đến URL đầu tiên nếu không thể phát hiện).
Nói chung, nếu nội dung plug-in được tích hợp vào trang web của bạn, bạn nên chọn tùy chọn ‘Always
Go To First URL If Detection Is Not Possible’; khách truy cập không có plug-in sẽ thường được nhắc bởi
trình duyệt để tải về plug -in. Nếu nội dung plug-in là không cần thiết cho trang web của bạn, bạn để lại
tùy chọn này không chọn. Nếu nội dung plug-in là không cần thiết cho trang web của bạn, bạn để lại tùy
chọn này không chọn.
Ghi chú: Tùy chọn này chỉ áp dụng cho Internet Explorer, Navigator có thể luôn phát hiện ra các plug-
in.
Cuối cùng, bạn bấm vào OK. Tiếp theo, trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem
sự kiện mặc định có phải là cái bạn muốn hay không. Nếu là không phải, bạn có thể chọn sự kiện khác
từ danh sách thả xuống. Nếu những sự kiện bạn muốn không được liệt kê, bạn thay đổi trình duyệt mục
tiêu trong danh sách thả xuống Show Events For.
3.8.3 Go To URL
Bạn sử dụng hành động Go To URL để mở một trang mới trong tài liệu hiện tại hoặc trong khung cụ thể.
Sử dụng tốt nhất của hành động này là khi bạn muốn thay đổi các nội dung của hai hay nhiều khung với
một cú bấm chuột. Nó cũng có thể được gọi trong dòng thời gian để chuyển đến một trang mới sau một
khoảng thời gian quy định.
Hình 3.46: Hộp thoại Go To URL
Để sử dụng hành động Go To URL, đầu tiên, bạn chọn một đối tượng. Sau đó, trên menu Window, bạn
bấm vào lệnh Behaviors. Sau đó, bạn bấm vào nút cộng ‘+’ trong bảng điều khiển Behaviors và chọn
Go To URL từ menu bật lên Actions.

Phần 3
Kháiniệm
Chọn một khung hoặc cửa sổ nơi URL sẽ mở từ danh sách Open In. Danh sách Open In sẽ tự động liệt
kê tên của tất cả các khung trong tập khung hiện tại cũng như cửa sổ chính. Nếu không có khung, cửa
sổ chính là lựa chọn duy nhất. Bạn nên tránh sử dụng top, blank, self, hoặc parent làm tên khung. Đây
là do hành động này không hoạt động đúng trong các trường hợp như vậy. Những tên này đôi khi được
xử lý nhầm lẫn là các tên mục tiêu được dành riêng bởi các trình duyệt. Xem hình 3.46 được trình bày
trước đây.
Bạn bấm vào Browse để chọn một tài liệu để mở, hoặc nhập vào đường dẫn và tên tập tin của tài liệu
trong trường URL và bấm vào OK.
Trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn
hay không. Nếu là không phải, bạn có thể chọn sự kiện khác từ menu bật lên. Nếu các sự kiện mong
muốn không được liệt kê, bạn còn có tùy chọn để thay đổi trình duyệt mục tiêu trong menu bật lên Show
Events For.
3.8.4 Mở cửa sổ trình duyệt
Trong khi duyệt Internet, bạn phải quan sát thấy rằng khi bạn bấm vào URL, một cửa sổ mới được hiển
thị. Bạn cũng có thể có hành vi tương tự trong trang web của bạn. Để làm điều này, bạn sử dụng hành
động Mở cửa sổ trình duyệt. Bạn có thể tùy chỉnh diện mạo của cửa sổ mới mở URL ra. Không chỉ URL,
bạn có thể có hình ảnh mở trong một cửa sổ mới khi người dùng bấm vào hình ảnh.
Trong trường hợp, bạn không chỉ ra các thuộc tính cho cửa sổ mới, cửa sổ mới lấy các thuộc tính mặc
định của cửa sổ đã khởi chạy nó. Tuy nhiên, nếu bạn chỉ ra các thuộc tính cụ thể cho cửa sổ mới, tất cả
các thuộc tính mặc định trở thành vô hiệu.
Để sử dụng hành động Open Browser Window, đầu tiên bạn chọn một đối tượng trong cửa sổ Document.
Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Tiếp theo, trong bảng điều khiển Behaviors,
bạn bấm vào nút cộng ‘+’ và chọn Open Browser Window từ menu bật lên Actions. Xem hình 3.47.
Hình 3.47: Hộp thoại Open Browser Window Action
Bấm vào Browse để chọn một tập tin, hoặc bạn có thể nhập địa chỉ URL sẽ được hiển thị.

Phần 3
Kháiniệm
Bạn đặt bất kỳ tùy chọn nào sau đây cho các thuộc tính:
¾¾ Window width chỉ ra chiều rộng của cửa sổ theo pixel.
¾¾ Window height chỉ ra chiều cao của cửa sổ theo pixel.
¾¾ Navigation toolbar hiển thị các nút Back, Forward, Home, và Reload được sử dụng cho mục
đích điều hướng trên Website.
¾¾ Location toolbar hiển thị các tùy chọn trình duyệt cho trường địa điểm.
¾¾ Status bar nằm ở dưới cùng của cửa sổ trình duyệt sẽ hiển thị các thông báo, như là thời gian
tải còn lại.
¾¾ Menu bar hiển thị menu như là File, Edit, View, Go, và Help. Trong trường hợp, bạn muốn khách
truy cập sử dụng những menu này trên cửa sổ mới, bạn nên đặt một cách rõ ràng tùy chọn này.
Nếu không, khách truy cập chỉ có thể cực tiểu hóa hoặc đóng các tùy chọn trên cửa sổ mới.
¾¾ Scrollbars as needed chỉ ra rằng các thanh cuộn sẽ xuất hiện nếu nội dung vượt ra ngoài khu
vực thấy được. Nếu bạn không đặt một cách rõ ràng tùy chọn này, các thanh cuộn sẽ không xuất
hiện.
¾¾ Resize handles xem người dùng sẽ có thể thay đổi kích thước cửa sổ mới hay không. Người
dùng có thể thay đổi kích thước cửa sổ bằng cách kéo góc dưới bên phải của cửa sổ hoặc bằng
cách nhấn vào nút cực đại hóa trên cửa sổ. Trong trường hợp, bạn không muốn người dùng thay
đổi kích thước cửa sổ mới, bạn không nên đặt tùy chọn này một cách rõ ràng.
¾¾ Window name là tên của cửa sổ mới. Bạn nên đặt tên cửa sổ mới nếu bạn muốn nhắm tới nó
với các liên kết hoặc kiểm soát nó với JavaScript. Tên này không thể chứa dấu cách hoặc các ký
tự đặc biệt.
Sau khi chọn tùy chọn mong muốn, bấm vào OK. Xem hình 3.47.
Tiếp theo, trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái
bạn muốn hay không. Nếu là không phải, bạn có thể chọn sự kiện khác từ menu bật lên. Trong trường
hợp những sự kiện bạn muốn không được liệt kê, bạn có thể thay đổi trình duyệt mục tiêu trong menu
bật lên ‘Show Events For’.
3.8.5 Phần tử Drag AP
Bạn có thể yêu cầu một số phần tử giao diện để di chuyển trong trang web. Ví dụ, việc giải quyết một câu
đố đòi hỏi một số khối để được di chuyển từ nơi này đến nơi khác. Bạn có thể đạt được điều này bằng
cách sử dụng hành vi Drag AP Element cho phép khách truy cập kéo một phần tử AP. Bạn có thể chỉ
ra theo hướng nào người truy cập có thể kéo phần tử AP (chiều ngang, chiều dọc, hoặc theo chiều bất
kỳ), một mục tiêu để khách truy cập sẽ kéo phần tử AP, có nên bám phần tử AP với mục tiêu nếu phần
tử AP nằm trong một số lượng pixel nhất định của mục tiêu, phải làm gì khi phần tử AP đạt mục tiêu, và

Phần 3
Kháiniệm
nhiều hơn nữa.
Bởi hành vi Drag AP Element phải được gọi trước khi khách truy cập có thể kéo phần tử AP, bạn nên
gắn Drag AP Element vào đối tượng body (với sự kiện onLoad).
Để sử dụng hành động Drag AP Element, bạn làm theo các bước sau:
1. Trên menu Insert, bạn chọn Layout Objects, và sau đó bấm vào AP Div hoặc bấm vào nút Draw
AP Div trên bảng điều khiển Insert và vẽ AP Div trong giao diện Design của cửa sổ Document.
2. Bấm vào <body>trong bộ chọn thẻ ở góc dưới bên trái của cửa sổ Document.
3. Chọn Drag AP Element từ menu Add Behavior của bảng điều khiển Behaviors. Hộp thoại Drag
AP Element xuất hiện như được trình bày trong hình 3.48.
Hình 3.48: Hộp thoại Drag AP Element
Ghi chú: Nếu Drag AP Element không có sẵn, bạn có thể có một phần tử AP đã chọn.
4. Sau đó, trong menu bật lên AP element, bạn chọn phần tử AP.
5. Sau đó, bạn chọn Constrained hoặc Unconstrained từ menu bật lên Movement.
Ghi chú: Di chuyển không ràng buộc thích hợp cho các câu đố và trò chơi kéo thả khác. Đối với
các điều khiển thanh trượt và cảnh có thể di chuyển, như là ngăn kéo tập tin, rèm cửa, và rèm
mini, hãy chọn di chuyển có ràng buộc.
6. Để di chuyển có ràng buộc, nhập các giá trị (tính bằng pixel) vào hộp Up, Down, Left, và Right.

Phần 3
Kháiniệm
Ghi chú: Giá trị có liên quan đến vị trí bắt đầu của phần tử AP. Nhập giá trị dương trong tất cả
bốn hộp làm hạn chế chuyển động trong một khu vực hình chữ nhật. Các giá trị dương cho Up và
Down và 0 cho Left và Right ràng buộc chuyển động chỉ theo chiều thẳng đứng. Tương tự như
vậy, các giá trị dương cho Left và Right và 0 cho Up và Down ràng buộc chuyển động chỉ theo
chiều nằm ngang.
7. Nhập các giá trị (tính theo pixel) cho mục tiêu giảm trong các hộp Left và Top.
Ghi chú: Mục tiêu giảm là nơi bạn muốn khách truy cập kéo phần tử AP. Khi các giá trị trong tọa
độ bên trái và phía trên của phần tử AP khớp với các hộp Left và Top, phần tử AP đạt được mục
tiêu giảm. Các giá trị có liên quan đến góc trên bên trái của cửa sổ trình duyệt.
Bấm vào Get Current Position để tự động điền vào các hộp văn bản với vị trí hiện tại của phần
tử AP.
8. Nhập một giá trị (tính bằng pixel) vào hộp Snap if within để xác định khách truy cập phải đến gần
như thế nào với mục tiêu giảm trước khi phần tử AP dính vào mục tiêu.
Ghi chú: Các giá trị lớn hơn làm cho khách truy cập dễ tìm thấy mục tiêu giảm hơn.
9. Bấm vào OK và xác minh xem sự kiện mặc định có đúng hay không.
10. Bấm vào tab Advanced. Tab Advanced xuất hiện như được trình bày trong hình 3.49.
Hình 3.49: Tab Advanced
11. Trong danh sách thả xuống Drag handle, chọn tùy chọn thích hợp. Ví dụ, nếu bạn muốn rằng
phần tử AP nên được kéo nếu khách truy cập bấm vào một khu vực cụ thể của phần tử AP, chọn
tùy chọn Area within element.
12. Nhập tọa độ bên trái và phía trên và chiều rộng và chiều cao của tay cầm kéo.
13. Chọn các tùy chọn While dragging thích hợp như sau:
a. Chọn hộp kiểm Bring element to front nếu bạn muốn phần tử AP di chuyển tới phía trước của
thứ tự xếp chồng trong khi nó được kéo. Sau đó, bạn chọn tùy chọn thích hợp từ danh sách
thả xuống bên cạnh tùy chọn này.

Phần 3
Kháiniệm
14. Bấm vào OK và xác minh xem sự kiện mặc định có đúng hay không.
3.8.6 Popup Message
Bạn sử dụng hành vi Popup Message để hiển thị cảnh báo JavaScript với tin nhắn này.
Cùng với tin nhắn, bạn có thể nhúng bất kỳ hàm JavaScript hợp lệ nào, như là gọi hoặc biểu thức khác
trong văn bản tin nhắn. Để nhúng một biểu thức JavaScript, đặt biểu thức bên trong dấu ngoặc ({}). Để
hiển thị dấu ngoặc, đặt trước nó một dấu gạch chéo ngược ({).
Để sử dụng hành động Bật lên tin nhắn, chọn một đối tượng và chọn Popup Message từ menu Add
Behavior của bảng điều khiển Behaviors. Sau đó, bạn nhập thông báo của bạn vào hộp Message. Bấm
vào OK và xác minh xem sự kiện mặc định có đúng hay không.
3.8.7 Validate Form
Hành vi Validate Form kiểm tra nội dung của các trường văn bản đã chỉ định để đảm bảo rằng người
dùng đã nhập đúng loại dữ liệu. Bạn gắn hành vi này vào các trường văn bản riêng lẻ với sự kiện onBlur
để xác thực các trường khi người dùng điền vào biểu mẫu, hoặc gắn nó vào biểu mẫu với sự kiện
onSubmit để đánh giá một số trường văn bản cùng một lúc khi người dùng bấm vào nút Submit.
Việc gắn hành vi này vào biểu mẫu ngăn việc gửi các biểu mẫu với dữ liệu không hợp lệ. Để sử dụng
hành động Validate Form, bạn làm theo những bước sau:
1. Trên menu Insert, bạn bấm vào Form hoặc bạn bấm vào nút Form trong bảng điều khiển Insert
để chèn biểu mẫu.
2. Trên menu Insert, bạn bấm vào Form, và sau đó bấm vào Text Field hoặc bấm vào nút Text Field
trong bảng điều khiển Insert để chèn trường văn bản. Lặp lại bước này để chèn các trường văn
bản bổ sung.
3. Chọn một phương thức xác thực:
yy Để xác thực các trường riêng lẻ khi người dùng điền vào biểu mẫu, chọn một trường văn
bản và trên menu Window, bạn bấm vào Behaviors.
yy Để xác thực nhiều trường khi người dùng gửi biểu mẫu, bạn bấm vào thẻ <form> trong bộ
chọn thẻ ở góc dưới bên trái của cửa sổ Document và trên menu Window, bạn bấm vào
Behaviors.
4. Chọn Validate Form từ menu Add Behavior.

Phần 3
Kháiniệm
yy Nếu bạn đang xác thực các trường riêng lẻ, bạn chọn cùng một trường mà bạn đã chọn
trong cửa sổ Document từ danh sách Fields.
yy Nếu bạn đang xác thực nhiều trường, bạn chọn một trường văn bản từ danh sách Fields.
6. Chọn tùy chọn Required nếu trường này phải chứa một số dữ liệu.
7. Chọn một trong những tùy chọn Accept sau đây:
yy Use Anything: Kiểm tra xem trường bắt buộc có chứa dữ liệu hay không; dữ liệu có thể
thuộc bất kỳ loại nào.
yy Use E-mail address: Kiểm tra xem trường có chứa một biểu tượng @ hay không.
yy Use Number: Kiểm tra xem trường có chứa chỉ các số hay không.
yy Use Number From: Kiểm tra xem trường có chứa số trong một phạm vi cụ thể.
8. Nếu bạn đã chọn xác thực nhiều trường, lặp lại bước 6 và 7 cho bất kỳ trường bổ sung nào bạn
muốn xác thực.
9. Bấm vào OK nếu bạn đang xác thực nhiều trường khi người dùng gửi biểu mẫu, sự kiện onSubmit
tự động xuất hiện trong menu Events.
10. Nếu bạn đang xác thực các trường riêng lẻ, kiểm tra xem sự kiện mặc định là onBlur hay
onChange. Nếu không, chọn một trong những sự kiện đó. Cả hai sự kiện kích hoạt hành vi
Validate Form khi người dùng di chuyển ra khỏi trường này. Sự khác biệt là onBlur xảy ra dù
người dùng đã gõ vào trường này hay không, và onChange xảy ra chỉ khi người dùng đã thay đổi
nội dung của trường này. Bạn nên sử dụng sự kiện onBlur nếu trường này là bắt buộc.
3.9 Thanh công cụ Coding và thu gọn mã
Dreamweaver CS5 bao gồm một thanh công cụ Coding tiện dụng cung cấp các tính năng viết mã phổ
biến, như là mở rộng và thu gọn các lựa chọn mã, làm nổi bật cú pháp mã không chính xác, và sử dụng
chú thích.
3.9.1 Thanh công cụ Coding
Thanh công cụ Coding cho phép truy cập trực tiếp đến các đoạn mã. Ngoài ra, nó còn cung cấp tính
năng thu gọn mã, để bạn có thể tập trung vào các mã đang sử dụng và ẩn phần còn lại của các mã không
mong muốn, giúp các mã luôn có tổ chức.

Phần 3
Kháiniệm
Xem hình 3.50.
Hình 3.50: Thanh công cụ Coding
Bảng 3.8 hiển thị các nút mặc định được hiển thị trong thanh công cụ Coding.
Các nút Mô tả
Open Documents Khi nhấn vào nút này, menu thả xuống xuất hiện, cho phép bạn chuyển đổi
giữa các tài liệu khác nhau mà bạn đang làm việc.
Show Code
Navigator
Nút này hiển thị Code Navigator.
Collapse Full Tag
Nút này thu gọn nội dung giữa một tập hợp các thẻ mở và đóng. Bạn phải
đặt điểm chèn trong thẻ mở hoặc đóng và sau đó, bấm vào nút Collapse
Full Tag để thu gọn thẻ.
Collapse Selection Nút này thu gọn mã đã chọn.
Expand All Nút này phục hồi tất cả các mã đã thu gọn.

Phần 3
Kháiniệm
Các nút Mô tả
Select Parent Tag Tính năng này đem lại một cách nhanh chóng để chọn thẻ bạn đang làm
việc.
Balance Braces Nút này chọn nội dung và các dấu ngoặc bao quanh, dấu ngoặc nhọn,
hoặc dấu ngoặc vuông của dòng trong đó bạn đặt điểm chèn.
Line Numbers Nút này cho phép bạn ẩn hoặc hiển thị các số ở phần đầu mỗi dòng mã.
Highlight Invalid
Code
Nút này làm nổi bật mã không hợp lệ bằng màu vàng.
Syntax Error Alerts
in Info Bar
Nút này cho phép hoặc vô hiệu hóa thanh thông tin ở trên cùng của trang
để cảnh báo cho bạn về các lỗi cú pháp. Lỗi được chỉ ra trên Syntax Error
Information Bar với các dòng được làm nổi bật trong mã nơi lỗi xuất hiện.
Ngoài ra, Dreamweaver còn làm nổi bật số dòng của lỗi ở phía bên trái của
tài liệu trong giao diện Code. Theo mặc định, thanh thông tin được cho
phép. Tuy nhiên, nó chỉ xuất hiện khi gặp phải lỗi cú pháp trên trang web.
Apply Comment
Nút này cho phép bạn bọc các thẻ chú thích xung quanh mã đã chọn, hoặc
mở các thẻ chú thích mới.
Remove Comment Nút này loại bỏ các thẻ chú thích khỏi mã đã chọn. Trong trường hợp các
chú thích lồng nhau, nhấn vào nút này sẽ loại bỏ chỉ các thẻ chú thích bên
ngoài.
Wrap Tag
Nút này bọc mã đã chọn với thẻ đã chọn từ Quick Tag Editor. Đối tượng đã
chọn ở chế độ trình biên tập làm cho dễ dàng bọc một thẻ mới xung quanh
lựa chọn.
Recent Snippets
Nó chứa tất cả các đoạn được sử dụng gần đây. Việc chọn một mục từ
menu chèn mã của đoạn mã đó vào trang web.
Move or Convert
CSS
Nút này cho phép bạn di chuyển CSS đến vị trí khác, hoặc chuyển đổi CSS
trong dòng thành các quy tắc CSS.
Indent Code
Nút này dịch chuyển lựa chọn này sang phải.
Outdent Code
Nút này dịch chuyển lựa chọn này sang trái.
Format Source Code Nút này cho phép bạn áp dụng một định dạng đã định nghĩa cho toàn bộ
trang web sử dụng các tùy chọn định dạng mã.
Bảng 3.8: Các nút của thanh công cụ Coding
3.9.2 Thu gọn mã
Bạn có thể thu gọn mã để xem các phần khác nhau của mã mà không cần cuộn. Bạn có thể thu gọn
Code chỉ trong giao diện Code.
Một tập hợp các nút thu gọn xuất hiện bên cạnh lựa chọn khi bạn thu gọn mã (biểu tượng dấu trừ (-)).
Bạn bấm vào những nút này để thu gọn và mở rộng lựa chọn mã.

Phần 3
Kháiniệm
Khi mã được thu gọn, các nút thu gọn thay đổi thành nút mở rộng (nút trừ (+)). Dreamweaver CS5 sử
dụng ‘thu gọn thông minh’ để thu gọn lựa chọn mã phổ biến nhất và trực quan dễ chịu nhất. Ví dụ, nếu
bạn đã chọn một thẻ thụt vào và sau đó, chọn không gian thụt vào trước thẻ, Dreamweaver sẽ không thu
gọn các không gian thụt vào, bởi vì hầu hết người dùng mong chờ thụt dòng của họ được bảo tồn. Để chỉ
thu gọn mã đã chọn và vô hiệu hóa thu gọn thông minh, giữ phím Ctrl nhấn xuống trước khi thu gọn mã
của bạn. Trong trường hợp lỗi phân mảnh, biểu tượng cảnh báo xuất hiện trên các đoạn mã bị thu gọn.
Ghi chú: Bạn cũng có thể thu gọn mã bằng phím Alt + bấm vào một trong các nút thu gọn, hoặc bằng
cách nhấn vào nút Collapse Selection trong thanh công cụ Coding.
Sụp thu gọn lựa chọn mã, đầu tiên, bạn chọn một số mã. Sau đó, trên menu Edit, bạn bấm vào lệnh Code
Collapse và chọn bất kỳ tùy chọn nào.
3.9.3 Gợi ý mã
Trong Dreamweaver CS5, bạn có thể chèn và chỉnh sửa mã nhanh chóng và không có lỗi bằng cách
sử dụng tính năng gợi ý mã. Khi bạn gõ các ký tự đầu tiên của thẻ, thuộc tính, hoặc tên thuộc tính CSS,
danh sách các tùy chọn bắt đầu với những ký tự này được hiển thị. Bạn cũng có thể sử dụng tính năng
này để xem các thuộc tính có sẵn cho một thẻ, các tham số có sẵn cho một hàm, hoặc các phương thức
có sẵn cho một đối tượng. Danh sách các gợi ý mã biến mất khi bạn nhấn Backspace.
Dreamweaver CS5 hỗ trợ gợi ý mã cho HTML, CSS, Document Object Model (DOM), JavaScript bao gồm
gợi ý lớp tùy chỉnh, Ajax, Spry, Adobe ColdFusion, JSP, PHP MySQL, ASP JavaScript, ASP VBScript,
ASP.NET C#, và ASP.NET VB.
Menu gợi ý mã tự động xuất hiện khi bạn gõ mã trong giao diện Code. Để hiển thị menu gợi ý mã một
cách thủ công, trong giao diện Code, đặt điểm chèn bên trong thẻ. Sau đó, bạn nhấn Ctrl+Spacebar.
Để chèn mã trong giao diện Code bằng cách sử dụng gợi ý mã, bạn gõ đoạn đầu của mẩu mã. Ví dụ, để
chèn thẻ, gõ dấu ngoặc vuông bên phải (<). Để chèn một thuộc tính, đặt điểm chèn ngay sau tên thẻ và
nhấn Spacebar. Điều này sẽ hiển thị danh sách các mục, như là tên thẻ hoặc tên thuộc tính.
Ghi chú: Để đóng danh sách bất cứ lúc nào, nhấn Esc.
Sau đó, bạn cuộn qua danh sách bằng cách sử dụng thanh cuộn hoặc các phím mũi tên lên và mũi tên
xuống. Để chèn một mục từ danh sách, bạn bấm đúp vào nó, hoặc chọn nó và nhấn Enter. Để chèn một
thẻ đóng, bạn gõ </ (dấu gạch chéo).

Phần 3
Kháiniệm
3.10 Đoạn mã
Đoạn mã là đoạn của mã bạn có thể đặt vào trang web của bạn. Bạn cũng có thể tái sử dụng chúng lúc và
khi bạn muốn. Bạn lưu trữ các đoạn mã trong tab Snippets của bảng điều khiển Code để sử dụng sau.
Bạn có thể tạo ra các đoạn mã nhỏ HTML, ASP, JavaScript, JSP, và vân vân. Dreamweaver còn có một số
đoạn mã nhỏ được dựng trước, có thể được sử dụng.
Bạn có thể tạo ra các đoạn mã nhỏ hoặc sử dụng các đoạn mã nhỏ dựng sẵn, có sẵn trong Dreamweaver.
Có hai cách bạn có thể chèn một đoạn mã nhỏ. Một là khối mã bạn có thể trực tiếp chèn vào tài liệu và
cách kia là bọc xung quanh lựa chọn hiện tại. Ví dụ, bạn có thể tạo ra một liên kết xuất hiện nhiều lần
trong một trang, nhưng nó có thể được gắn vào các đối tượng hoặc văn bản khác nhau. Vì vậy, bạn có
thể tạo ra một đoạn mã nhỏ cho liên kết đó. Sau đó, bạn chọn đối tượng và bấm chuột phải vào đoạn mã
nhỏ trong bảng điều khiển Snippets và chọn Insert, mã cho liên kết sẽ bọc xung quanh lựa chọn. Xem
hình 3.51.
Hình 3.51: Danh sách các đoạn mã nhỏ dựng sẵn
3.10.1 Tạo các đoạn mã nhỏ
Để tạo ra một đoạn mã nhỏ, bấm vào menu Window và chọn các lệnh Snippet để mở bảng điều khiển
Snippets như được trình bày trong hình 3.52.

Phần 3
Kháiniệm
Hình 3.52: Bảng điều khiển Snippets
Trong bảng điều khiển Snippets, bạn bấm vào biểu tượng New Snippet ở dưới cùng của bảng điều
khiển. Hộp thoại Snippet sẽ mở ra. Trong trường văn bản Name, bạn nhập tên của đoạn mã nhỏ. Đoạn
mã nhỏ không chứa các ký tự không hợp lệ trong các tên tập tin, như là dấu ngoặc kép (“), ký tự đặc biệt
hoặc dấu gạch chéo xuôi/ngược (/ hoặc ).
Trong hộp mô tả, bạn nhập phần mô tả cho đoạn mã nhỏ. Điều này làm cho nó hữu ích cho các thành
viên khác, những người sẽ sử dụng nó hiểu đoạn mã nhỏ đó là về cái gì. Tiếp theo, từ tùy chọn Snippet
Type, bạn có thể chọn xem bạn muốn Wrap selection hay Insert block.

Phần 3
Kháiniệm
Hình 3.53: Hộp thoại Snippet
Nếu bạn chọn Insert block, khi đó, bạn cần phải gõ hoặc dán khối mã. Bây giờ, từ Preview Type,
bạn có thể chọn loại xem trước. Bạn có thể chọn Design hoặc Code. Nếu bạn chọn Design, khi đó
Dreamweaver tái tạo mã và hiển thị nó trong ngăn Preview của bảng điều khiển. Nếu bạn chọn Code,
khi đó nó chỉ cho thấy mã trong ngăn Preview. Cuối cùng, bạn bấm vào OK. Đây là cách đoạn mã mong
muốn được tạo ra. Xem hình 3.53.
3.10.2 Sử dụng các đoạn mã nhỏ
Việc chèn một đoạn mã có thể được thực hiện bằng cách đặt điểm chèn tại vị trí mong muốn trong tài
liệu. Nếu bạn muốn chèn đoạn mã nhỏ xung quanh một lựa chọn, khi đó bạn tạo ra lựa chọn. Sau đó,
trong bảng điều khiển Snippets, bấm chuột phải vào đoạn mã nhỏ và bấm vào Insert.
3.10.3 Chỉnh sửa và xóa một đoạn mã
Để chỉnh sửa một đoạn mã nhỏ, trong bảng điều khiển Snippets, bạn chọn một đoạn mã nhỏ, và bấm
vào nút Edit Snippet. Để xóa một đoạn mã nhỏ, trong bảng điều khiển Snippets, bạn chọn một đoạn mã
nhỏ, và bấm vào nút Remove ở dưới cùng của bảng điều khiển.
3.11 Tài nguyên và Thư viện
Tài nguyên là những phần tử, như là hình ảnh, hình ảnh động, màu, tập lệnh, và các liên kết bạn thêm
vào trang web của bạn. Trong Dreamweaver CS5, bạn có thể duy trì theo dõi và xem trước các tài
nguyên. Bạn có thể tạo các tài nguyên bên ngoài Dreamweaver sử dụng các ứng dụng, như là Adobe
Fireworks hoặc Adobe Flash. Bạn cũng có thể tạo ra các tài nguyên trong Dreamweaver.

Phần 3
Kháiniệm
3.11.1 Giới thiệu về tài nguyên và thư viện
Với hai loại tài nguyên đặc biệt - các thư viện và các mẫu, trong đó có các tài nguyên có liên kết: khi bạn
chỉnh sửa một mục thư viện hoặc mẫu, Dreamweaver cập nhật tất cả các tài liệu sử dụng các tài nguyên
đó. Các mục thư viện nói chung thể hiện các tài nguyên thiết kế nhỏ, như là một biểu tượng Website hoặc
bản quyền. Để kiểm soát một khu vực thiết kế lớn hơn, thay vào đó hãy sử dụng mẫu.
Thư viện là danh sách các phần tử trang có thể được lưu trữ để tái sử dụng. Các phần tử trang có thể
là hình ảnh, văn bản hoặc bất kỳ đối tượng nào khác có thể được sử dụng trong một vài trang. Những
phần tử trang, khi được chuyển đổi sang thư viện, được gọi là các mục thư viện. Bạn có thể dễ dàng lưu
trữ các phần tử trang làm các mục thư viện và sau đó, chèn chúng vào tài liệu bất cứ khi nào và bất cứ
nơi nào bạn muốn.
Dreamweaver lưu trữ mục thư viện trong thư mục Library trong thư mục gốc cục bộ cho mỗi Website. Mỗi
Website có thư viện riêng của mình, để sao chép một mục thư viện từ một Website sang Website khác
bạn sử dụng tùy chọn Copy to Site trong bảng điều khiển Assets.
Ghi chú: Nếu mục thư viện có chứa các liên kết, chúng có thể không làm việc trong một Website mới.
Ngay cả những hình ảnh trong một mục thư viện cũng không được sao chép đến Website mới.
3.11.2 Làm việc với tài nguyên
Bạn sử dụng bảng điều khiển Assets để quản lý các tài nguyên trong Website hiện tại. Bạn có thể truy
cập vào bảng điều khiển Assets, bằng cách bấm vào menu Windows và chọn lệnh Assets. Bảng
điều khiển Assets hiển thị các tài nguyên cho Website có liên quan đến tài liệu hoạt động trong cửa sổ
Document như được trình bày trong hình 3.54.
Hình 3.54: Bảng điều chỉnh Assets

Phần 3
Kháiniệm
Bảng điều khiển Assets cung cấp hai cách sau đây để xem tài nguyên:
¾¾ Site list: Bạn có thể xem tất cả các tài nguyên trong Website của bạn, bao gồm cả các màu và
URL được sử dụng trong bất kỳ tài liệu nào trong Website của bạn.
¾¾ Favorites list: Bạn có thể chỉ xem các tài nguyên bạn đã chọn một cách rõ ràng.
Để chuyển đổi giữa hai giao diện, bạn chọn một trong hai nút radio Site hoặc Favorites phía trên vùng
xem trước. (Hai giao diện này không có sẵn cho thể loại Templates và Library.)
Ghi chú: Nếu tập tin không rơi vào bất kỳ thể loại nào này, bạn sẽ không tìm thấy trong bảng điều khiển
Assets.
Bảng 3.9 liệt kê các thể loại khác nhau, trong đó các tài nguyên rơi vào cả hai danh sách.
Thể loại tài
nguyên
Mô tả
Hình ảnh
Tập tin hình ảnh ở định dạng GIF, JPEG, hoặc PNG.
Màu
Màu được sử dụng trong các tài liệu và tờ kiểu dạng, bao gồm cả màu của văn
bản, nền, và các liên kết.
URL
Liên kết bên ngoài trong các tài liệu Website hiện tại của bạn, bao gồm các
liên kết FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto), và tập tin cục
bộ (file://).
Flash
Các tập tin ở bất kỳ phiên bản Adobe Flash nào. Bảng điều khiển Assets hiển
thị chỉ các tập tin SWF (tập tin nén được tạo ra với Flash), nhưng không phải
tập tin FLA (tập tin nguồn Flash).
Shockwave
Các tập tin ở bất kỳ phiên bản Adobe Shockwave nào.
Phim
Các tập tin QuickTime hoặc MPEG.
Tập lệnh
Các tập tin JavaScript hoặc VBScript. Tập lệnh trong các tập tin HTML (thay vì
trong các tập tin JavaScript hoặc VBScript độc lập) không xuất hiện trong bảng
điều khiển Assets.
Mẫu
Bố trí trang chính được sử dụng trên nhiều trang. Việc sửa đổi mẫu tự động
sửa đổi tất cả các trang được gắn với nó.
Mục thư viện Các phần tử thiết kế bạn sử dụng trong nhiều trang, khi bạn sửa đổi một mục
thư viện, tất cả các trang có chứa mục đó được cập nhật.
Bảng 3.9: Các thể loại tài nguyên
Ghi chú: Bạn có thể thực hiện một số nhiệm vụ bổ sung trong danh sách Yêu thích. Tất cả các hoạt
động của bảng điều khiển Assets còn lại làm việc như nhau trong cả hai danh sách.

Phần 3
Kháiniệm
¾¾ Thêm một tài nguyên vào tài liệu
Để chèn các tài nguyên vào một tài liệu, bạn thường kéo chúng vào giao diện Code hoặc giao diện
Design trong cửa sổ Document, hoặc bạn sử dụng nút Insert trong bảng điều khiển. Bạn có thể
chèn các màu và URL hoặc áp dụng chúng vào văn bản đã chọn trong giao diện Design. Để thêm
một tài nguyên vào tài liệu:
1. Trong giao diện Design , đặt điểm chèn nơi bạn muốn tài nguyên xuất hiện.
2. Trong bảng điều khiển Assets, bạn chọn từ các nút thể loại tài nguyên ở bên trái.
3. Chọn Site hoặc Favorites ở trên cùng của bảng điều khiển, sau đó, chọn tài nguyên.
yy Kéo tài nguyên từ bảng điều khiển vào tài liệu.
yy Bạn có thể kéo các tập lệnh vào khu vực nội dung đầu trang của cửa sổ Document, nếu
khu vực đó không thấy được, trên menu View, bạn bấm vào Head Content.
yy Chọn tài nguyên trong bảng điều khiển và bấm vào Insert.
Nếu tài nguyên đã chèn vào là màu, nó áp dụng cho văn bản xuất hiện sau điểm chèn.
Ghi chú: Bạn không nên chọn thể loại Templates. Mẫu được áp dụng cho toàn bộ tài liệu, nó không
thể được chèn vào tài liệu.
3.11.3 Làm việc với các mục thư viện
Mục thư viện là những phần tử bạn muốn tái sử dụng hoặc cập nhật thường xuyên trong toàn bộ Website
của bạn.
¾¾ Tạo và sửa đổi các mục thư viện
Một phần đã chọn của phần BODY của tài liệu, như là các bảng và biểu mẫu thường được chuyển
đổi thành một mục thư viện.
Để mục thư viện làm việc đúng cách, tập tin ban đầu phải có mặt tại địa điểm quy định. Mục thư
viện cũng có thể chứa các hành vi, nhưng có các yêu cầu đặc biệt để chỉnh sửa các hành vi trong
các mục thư viện. Mục thư viện không thể chứa các mốc thời gian hoặc tờ kiểu dạng, vì mã cho
những phần tử này là một phần của phần HEAD và không phải là phần BODY.
Để tạo một mục thư viện, đầu tiên chọn một phần của tài liệu để lưu làm mục thư viện. Sau đó, trên
menu Window, bấm vào lệnh Assets. Sau đó, trong bảng điều khiển Assets, bấm vào biểu tượng
Library. Kéo văn bản đến bảng Library.

Phần 3
Kháiniệm
Nhập tên cho mục thư viện. Xem hình 3.55.
Hình 3.55: Phần tử trang được lưu trữ làm mục thư viện
¾¾ Chỉnh sửa mục thư viện
Khi bạn chỉnh sửa một mục thư viện, bạn thay đổi tập tin ban đầu của nó. Dreamweaver cung cấp
cho bạn tùy chọn cập nhật mục thư viện đã chỉnh sửa ở tất cả các tài liệu trong Website hiện tại,
đổi tên các mục thư viện để phá vỡ kết nối của chúng với các tài liệu hoặc mẫu, và xóa các mục
khỏi thư viện.
Để chỉnh sửa một mục thư viện, trên menu Window, chọn lệnh Assets. Khi làm như vậy, bảng điều
khiển Assets sẽ được hiển thị. Sau đó, đi đến thể loại Library của bảng điều khiển Assets và chọn
một mục thư viện. Tiếp theo, bấm vào nút Edit ở góc dưới bên phải của bảng điều khiển Assets.
Ngoài ra, bấm đúp vào mục thư viện. Mục thư viện sẽ được hiển thị trong giao diện Design của
cửa sổ Document. Ở đây bạn có thể chỉnh sửa mục thư viện và sau đó, lưu những thay đổi đó.
Trong hộp thoại xuất hiện, bạn cần phải chọn có cập nhật các tài liệu trên Website cục bộ sử dụng
mục thư viện đã chỉnh sửa hay không. Về điều này, sử dụng các tùy chọn sau:
yy Chọn Update để cập nhật tất cả các tài liệu trong Website cục bộ với mục thư viện đã
chỉnh sửa.

Phần 3
Kháiniệm
yy Chọn Don’t Update để tránh thay đổi bất kỳ tài liệu nào cho đến khi bạn sử dụng tùy chọn
Update Current Page hoặc Update Pages từ menu con Library trên menu Modify.
Để cập nhật tài liệu hiện tại để sử dụng phiên bản hiện tại của tất cả các mục thư viện, trên menu
Modify, bạn bấm vào Library và chọn tùy chọn Update Pages. Hộp thoại Update Pages sẽ được
hiển thị. Trong hộp thoại xuất hiện, bạn chọn các tập tin bạn muốn cập nhật. Xem hình 3.56.
Hình 3.56: Hộp thoại Update Pages
Từ menu bật lên Look in, chọn như sau:
¾¾ Chọn Entire Site, và sau đó, từ menu bật lên liền kề, chọn tên Website để cập nhật tất cả các tài
liệu trên Website chỉ định.
¾¾ Chọn Files That Use để cập nhật tất cả các tài liệu sử dụng mục thư viện chỉ định.
Bạn phải chắc chắn rằng Library Items được chọn trong tùy chọn Update. Cuối cùng, bạn bấm
vào Start.
Dreamweaver cập nhật các tập tin như đã chỉ định. Nếu bạn đã chọn lựa chọn Show Log,
Dreamweaver cung cấp thông tin về các tập tin nó cố gắng cập nhật, bao gồm thông tin về việc
chúng đã được cập nhật thành công hay chưa.
Ghi chú: Để thêm một mục thư viện mà không đưa vào tài liệu tham khảo của nó, bạn nhấn Ctrl trong
khi kéo một mục ra khỏi bảng điều khiển Assets.

Phần 3
Kháiniệm
Các phím tắt bàn phím
Lệnh Phím tắt
Mở bảng điều khiển CSS Styles Shift+F11
Thu gọn lựa chọn Ctrl+Shift+C
Thu gọn lựa chọn bên ngoài Ctrl+Alt+C
Mở rộng lựa chọn Ctrl+Shift+E
Thu gọn thẻ đầy đủ Ctrl+Shift+J
Thu gọn thẻ đầy đủ bên ngoài Ctrl+Alt+J
Mở rộng tất cả Ctrl+Alt+E

Phần 3
Kháiniệm

Tóm tắt
¾¾ Biểu mẫu là cách tuyệt vời để đưa vào sự tương tác web cho Website của bạn, bởi chúng
được sử dụng trong các trang web để thu thập thông tin hữu ích về khách truy cập đến
thăm Website của bạn.
¾¾ Nút radio thường được sử dụng trong các nhóm và được sử dụng khi người dùng phải
chọn chỉ một lựa chọn từ một tập hợp các tùy chọn.
¾¾ Hộp kiểm thường được sử dụng khi người dùng phải chọn một tùy chọn bất kỳ từ một tập
hợp các tùy chọn.
¾¾ Nút thường được sử dụng khi một hành động được thực hiện khi bấm vào nó. Ví dụ, biểu
mẫu được gửi đến máy chủ ứng dụng khi người dùng bấm vào nút Submit.
¾¾ Trước khi gửi biểu mẫu đến máy chủ bạn nên luôn luôn xem dữ liệu do người dùng nhập
vào có chính xác và hợp lệ hay không. Hành động Validate Form xác thực biểu mẫu.
¾¾ Bạn có thể xác thực các biểu mẫu trong Dreamweaver CS5 với sự giúp đỡ của ColdFusion,
cung cấp cho bạn một số cơ chế dựng sẵn để xác thực dữ liệu biểu mẫu.
¾¾ Cascading Style Sheet (CSS) là tập hợp các quy tắc định dạng, có thể được sử dụng để
kiểm soát một số tài liệu cùng một lúc và bao gồm tất cả các kiểu cho một tài liệu.
¾¾ Bạn có thể theo dõi các quy tắc và thuộc tính CSS với sự giúp đỡ của bảng điều khiển CSS
Styles.
¾¾ Trong bảng điều khiển CSS Styles, có hai chế độ - chế độ Current và chế độ All.
¾¾ Kiểu CSS (lớp) tùy chỉnh là loại các kiểu CSS duy nhất có thể được áp dụng cho bất kỳ văn
bản trong một tài liệu, bất kể là thẻ nào kiểm soát văn bản.
¾¾ Dreamweaver CS5 đi kèm với 16 bố trí CSS khác nhau để bạn có thể chọn.
¾¾ Bạn có thể định nghĩa các thuộc tính cho các quy tắc CSS như phông chữ, hình và màu
nền, và các thuộc tính bố trí.
¾¾ Bất kỳ thay đổi nào được thực hiện cho tờ kiểu dạng CSS bên ngoài được phản ánh cho tất
cả các tài liệu được liên kết đến tờ kiểu dạng CSS đó.

Phần 3
Kháiniệm

Tóm tắt
¾¾ Thẻ div được định nghĩa là thẻ có các phần hợp lý trong nội dung của một trang web.
¾¾ Phần tử AP đặc biệt là thẻ div, hoặc bất kỳ thẻ nào khác có một vị trí tuyệt đối được gán cho
nó.
¾¾ Phần tử widget Spry là một phần tử trang cho phép tương tác người dùng như là bạn có thể
có được trải nghiệm người dùng phong phú hơn.
¾¾ Hiệu ứng Spry không là gì, nhưng cải tiến hình ảnh có thể được áp dụng cho hầu hết các
phần tử trên một trang HTML sử dụng JavaScript.
¾¾ Trong Dreamweaver, các hành vi được sử dụng để đưa mã JavaScript vào trong tài liệu.
¾¾ Hành vi trong Dreamweaver là một sự kết hợp sự kiện và hành động.
¾¾ Dreamweaver CS5 đưa vào một thanh công cụ Coding tiện dụng cung cấp các tính năng viết
mã phổ biến.
¾¾ Với các hành động Dreamweaver, bạn có thể kiểm soát nhiều khía cạnh của một trang web
như là mở cửa sổ trình duyệt, phát âm thanh, hiển thị các thông báo bật lên và vân vân.
¾¾ Đoạn mã là đoạn của mã bạn có thể đặt vào trang web của bạn.
¾¾ Tài nguyên là những phần tử, như là hình ảnh, hình ảnh động, màu, tập lệnh, và các liên kết
bạn thêm vào trang web của bạn.
¾¾ Thư viện là danh sách các phần tử trang có thể được lưu trữ để tái sử dụng.

Phần 3
Kháiniệm

1. Phương thức __________ nhúng các dữ liệu biểu mẫu trong yêu cầu HTTP.
a. Get
b. Post
c. Default
d. _blank
2. ___________ là một danh sách các tùy chọn trong menu và mỗi tùy chọn đến lượt mình
được liên kết với một tài liệu hoặc tập tin.
a. Menu danh sách
b. Trường tập tin
c. Menu nhảy
d. Trường hình ảnh
3. Ngăn _____________ của bảng điều khiển CSS Styles cho phép bạn chỉnh sửa các thuộc
tính CSS cho bất kỳ quy tắc đã chọn nào trong ngăn All Rules.
a. Tóm tắt về lựa chọn
b. Các quy tắc
c. Tất cả các quy tắc
d. Các thuộc tính

Phần 3
Kháiniệm

4. Thể loại __________ của hộp thoại CSS Rule Definition cho phép bạn định nghĩa các thiết
đặt cho các thẻ và thuộc tính kiểm soát việc bố trí các phần tử trên trang web.
a. Hộp
b. Nền
c. Danh sách
d. Loại
5. _______________ là một phần tử trang HTML bạn có thể định vị bất cứ nơi nào trên trang
của bạn.
a. Thẻ div
b. Bố trí các khối CSS
c. Phần tử AP
d. Widget Spry
6. Trong khuôn khổ __________, mỗi widget có liên quan đến các tập tin CSS và JavaScript
duy nhất.
a. CSS
b. XML
c. Spry
d. Zend

Phần 3
Kháiniệm
7. Hành động _____________ gửi người truy cập tới các trang web khác nhau tùy thuộc
vào việc họ có plug-in đã chỉ định được cài đặt trên máy tính của họ hay không.
a. Call JavaScript
b. Drag AP Element
c. Popup Message
d. Check Plugin


Phần 3
Kháiniệm
1. Giả sử bạn vừa mua một chiếc tivi thương hiệu ABC. Thiết kế một mẫu khảo sát cho Website của
thương hiệu này. Mẫu khảo sát nên thu thập thông tin từ khách hàng về mức độ hài lòng của khách
hàng về các tính năng của tivi và hỗ trợ chăm sóc khách hàng của công ty.
Gợi ý:
a. Sử dụng các phần tử biểu mẫu khác nhau, như là nút radio, hộp kiểm, và các hộp văn bản
để thiết kế các câu hỏi khảo sát.

Làm việc với các đối tượng
đa phương tiện4
Phần
Kháiniệm
Mục tiêu
¾¾ Tạo các mẫu
¾¾ Áp dụng các mẫu cho các tài liệu khác nhau
¾¾ Sửa đổi các mẫu
¾¾ Chèn văn bản Flash và nút Flash
¾¾ Chèn Java Applet và cài đặt các thuộc tính của nó
¾¾ Chèn Shockwave, Java applets, và ActiveX vào một tài liệu
¾¾ Sử dụng tích hợp Photoshop có hiệu quả
¾¾ Sử dụng Adobe Bridge và Device Control
¾¾ Sử dụng Java Applet
¾¾ Chèn điều khiển ActiveX
¾¾ Sử dụng các plug-in
4.1 Giới thiệu
Trong phần trước, bạn đã học để tạo ra các hành vi để thêm tương tác cho các trang web. Bạn cũng đã
hiểu được hoạt động của các sự kiện và hành động khác nhau. Ngoài ra, bạn đã học cách tạo và sử dụng
các đoạn mã và các mục thư viện.
Trong phần này, bạn sẽ học cách tạo ra các mẫu để có được một điều khiển mạnh mẽ cho việc thiết kế
trang web. Bạn cũng sẽ tìm hiểu để tạo ra văn bản và các nút trong Flash sử dụng Dreamweaver, Java
Applets, ActiveX Control, mà không biết Flash. Hơn nữa, các plug-in cũng sẽ được thảo luận ngắn gọn.
4.2 Mẫu
Mẫu là một tài liệu có thể được sử dụng làm nền tảng cho các tài liệu khác. Mẫu là công cụ tiết kiệm thời
gian có thể được sử dụng trong các trang web chia sẻ cùng một thiết kế nhưng nội dung khác nhau như

Phần 4
Làm việc với các đối tượng đa phương tiện
Kháiniệm
Bạn có thể định nghĩa các phần tử có thể chỉnh sửa và không thể chỉnh sửa trong khi bạn tạo mẫu. Ví
dụ, trong khi xây dựng Website, đầu đề, thanh điều hướng, và chân trang vẫn giống nhau cho tất cả các
trang. Bây giờ, nếu bạn phải thực hiện một sự thay đổi nhỏ ở chân trang, bạn thường đi qua tất cả các
trang của Website để thay đổi. Tuy nhiên, trong khi sử dụng mẫu, bạn có thể thay đổi trong mẫu và cùng
thay đổi sẽ được cập nhật trong tất cả các trang mà mẫu được áp dụng.
Trong hình 4.1, các trang web có cùng thiết kế nhưng chỉ có nội dung là thay đổi. Những trang như vậy có
thể dễ dàng được xây dựng sử dụng các mẫu Dreamweaver. Trong trường hợp này, các mẫu có thể được
sử dụng để tạo thanh điều khiển và chân trang, mà vẫn không đổi cho tất cả các trang, và sẽ là phần đã khóa
(không thể chỉnh sửa) của mẫu. Sau đó mẫu có thể được áp dụng cho tất cả các trang.
Sử dụng các mẫu trong Dreamweaver thêm một cấu trúc và bố trí tiêu chuẩn cho trang. Các mẫu cho
phép bạn để đảm bảo rằng tất cả các trang được kết xuất một cách chính xác trong một loạt các trình
duyệt web, như là Microsoft Internet Explorer và Netscape Navigator. Bây giờ các nhà thiết kế và các tác
giả mẫu có các công cụ để khóa bố trí của một trang, để lại các khu vực mở khóa (khu vực có thể chỉnh
sửa) để các cộng tác viên nội dung thêm tài liệu của họ.
Các tính năng mẫu trong Dreamweaver cung cấp cho bạn hoàn toàn kiểm soát bố trí và nội dung của
trang, có nghĩa là bạn có thể định nghĩa nội dung tùy chọn, cài đặt các khu vực lặp lại, và định nghĩa các
mẫu lồng nhau.
Hình 4.1: Trang web được tạo sử dụng mẫu

Phần 4
Kháiniệm
4.2.1 Tạo một mẫu
Bạn có thể tạo một mẫu từ một tài liệu HTML có sẵn hoặc tạo ra nó từ đầu, bắt đầu với một tài liệu
HTML để trắng. Cách đơn giản nhất là tạo ra một trang web và sau đó, sử dụng nó làm mẫu. Một cách
khác là xây dựng mẫu từ đầu và sau đó, thêm hình ảnh, bảng, và văn bản cho nó. Mẫu được tự động
lưu trữ trong thư mục Templates và được lưu trữ trong thư mục gốc cục bộ cho Website. Nếu thư mục
Templates không có sẵn, Dreamweaver sẽ tạo ra nó khi bạn lưu mẫu mới.
Ghi chú: Bạn nên chắc chắn rằng các mẫu luôn luôn có mặt trong thư mục Templates. Ngoài ra, bạn
không nên lưu các tập tin không phải là mẫu vào thư mục Templates. Bạn cũng nên chắc chắn rằng thư
mục Templates luôn luôn có mặt trong thư mục gốc cục bộ. Trong trường hợp, nó đã chuyển ra khỏi thư
mục gốc cục bộ, lỗi có thể xảy ra trong các đường dẫn trong Templates.
Trên menu File, bạn bấm vào lệnh Save As Template. Như được trình bày trong hình 4.2, trong hộp
thoại Save As Template, bạn chọn một Website từ danh sách thả xuống Site, nơi bạn muốn lưu mẫu.
Hình 4.2: Hộp thoại Save As Template

Phần 4
Kháiniệm
Hình 4.3: Bảng tài nguyên hiển thị các mẫu
Bây giờ, trong trường Save as, bạn nhập tên cho mẫu và sau đó, bấm vào Save. Tài liệu này sẽ được
lưu làm mẫu trong thư mục Templates với đuôi .dwt.
Bạn cũng có thể tạo ra một mẫu mới để trống. Để làm như vậy, trên menu Window, bạn bấm vào lệnh
Assets. Sau đó, trên bảng Assets, bạn bấm vào biểu tượng Template. Bảng Templates sẽ được hiển
thị như được trình bày trong hình 4.3. Bây giờ, bấm vào nút New Template, được đặt ở góc dưới bên
phải, trong bảng Template.

Phần 4
Kháiniệm
Nhập tên cho mẫu trong trường Name như được trình bày trong hình 4.3, và nhấn phím Enter.
4.2.2 Chỉnh sửa mẫu
Dreamweaver cập nhật tất cả các tài liệu dựa trên mẫu bạn sửa đổi và lưu lại. Những cách mà bạn có
thể làm việc với các mẫu như sau:
¾¾ Mở mẫu để chỉnh sửa
Bạn có thể có thể mở một tập tin mẫu trực tiếp để chỉnh sửa, hoặc bạn có thể mở một tài liệu dựa
trên mẫu, và sau đó, mở mẫu đính kèm để chỉnh sửa. Để mở và chỉnh sửa một tập tin mẫu, bạn
làm theo những bước sau:
1. Trong bảng Assets, bạn bấm vào loại Templates ở phía bên trái của bảng. Bảng Assets liệt
kê tất cả các mẫu có sẵn cho Website của bạn và hiển thị một bản xem trước của mẫu đã
chọn.
2. Trong danh sách các mẫu có sẵn, thực hiện một trong các cách sau:
yy Nhấp đúp vào tên của mẫu mà bạn muốn chỉnh sửa.
yy Chọn một mẫu để chỉnh sửa và sau đó, bạn bấm vào nút Edit ở dưới cùng của bảng
Assets.
3. Sửa đổi các nội dung của mẫu. Để sửa đổi các thuộc tính trang của mẫu, trên menu Modify,
bạn bấm vào Page Properties. (Các tài liệu dựa trên mẫu kế thừa các thuộc tính trang của
mẫu.)
4. Lưu mẫu. Dreamweaver sẽ nhắc bạn cập nhật các trang dựa trên mẫu. Bấm vào Update để
cập nhật tất cả các tài liệu dựa trên mẫu sửa đổi, bấm vào Don’t Update nếu bạn không
muốn cập nhật các văn bản dựa trên mẫu đã sửa đổi. Dreamweaver sẽ hiển thị bản ghi cho
biết các tập tin đã được cập nhật.
¾¾ Xóa một tập tin mẫu
Để xóa một tập tin mẫu, bạn làm theo những bước sau:
1. Trong bảng Assets, bạn bấm vào loại Templates ở phía bên trái của bảng.
2. Bấm vào tên của mẫu để chọn nó.
3. Bấm vào nút Delete ở dưới cùng của bảng điều khiển và sau đó, xác nhận rằng bạn muốn
xóa mẫu.

Phần 4
Kháiniệm
Ghi chú: Sau khi bạn xóa một tập tin mẫu, bạn không thể truy xuất nó. Tập tin mẫu được xóa khỏi
Website của bạn. Tuy nhiên, bạn sẽ không mất các tài liệu đã được tạo ra sử dụng mẫu đã xóa. Những
tài liệu này vẫn sẽ có cùng một cấu trúc và các khu vực có thể chỉnh sửa theo tập tin mẫu đã xóa. Bạn
có thể chuyển đổi tài liệu như vậy vào một tập tin HTML mà không có khu vực có thể chỉnh sửa hoặc
bị khóa.
4.2.3 Các tham số mẫu
Mẫu không chỉ cung cấp cấu trúc cho các tài liệu của bạn, nhưng cũng có thể kiểm soát nội dung trong
các tài liệu bằng cách sử dụng các tham số mẫu. Bạn có thể định nghĩa các khu vực có thể chỉnh sửa
và không thể chỉnh sửa và các nhiệm vụ khác sử dụng các tham số mẫu. Bạn cũng cần phải chỉ ra các
thuộc tính của các tham số, như là tên, loại dữ liệu, và giá trị mặc định. Bạn cũng cần phải cung cấp tên
duy nhất cho các tham số. Tên có phân biệt dạng chữ và có thể là một trong năm loại dữ liệu được cho
phép: text, boolean, color, URL, hoặc number. Bạn có thể sửa đổi cấu trúc mẫu bằng cách thay đổi giá
trị mặc định của các tham số mẫu.
¾¾ Các khu vực có thể chỉnh sửa và không thể chỉnh sửa trong Dreamweaver
Có hai loại khu vực trong các mẫu – khu vực bị khóa hoặc khu vực không thể chỉnh sửa và khu vực
có thể chỉnh sửa. Khu vực bị khóa là nơi nội dung sẽ xuất hiện dựa trên mẫu. Bạn không thể chỉnh
sửa nội dung này. Để sửa đổi nội dung này, bạn cần phải sửa đổi mẫu. Tuy nhiên, khu vực có thể
chỉnh sửa là nơi nội dung có thể được sửa đổi trong các trang dựa trên mẫu này.
Trong Dreamweaver, những thay đổi này được thực hiện trong các khu vực không thể chỉnh sửa
(bị khóa) sẽ được phản ánh trong các trang được cập nhật trong khi sẽ không thể thay đổi trong
các khu vực có thể chỉnh sửa.
Do sự khác biệt cơ bản này, hai khu vực làm việc khác nhau:
yy Khu vực bị khóa
ƒƒ Các trang HTML được dựa trên mẫu sẽ có nội dung được viết trong các khu vực bị khóa
của mẫu.
ƒƒ Trong trường hợp có bất kỳ thay đổi nào được thực hiện cho nội dung trong các khu vực
bị khóa của mẫu, các trang HTML sử dụng mẫu này sẽ có một thông báo nhắc nhở về
sự thay đổi này.
ƒƒ Khi khu vực bị khóa là cập nhật, các trang HTML sử dụng mẫu này sẽ có nội dung thay
đổi trong khu vực bị khóa của mẫu.
yy Khu vực không khóa
ƒƒ Đồng thời khi một trang mới được tạo ra ban đầu, chỉ khi đó, nội dung trong khu vực có
thể chỉnh sửa của mẫu sẽ được ghi vào trang HTML.
ƒƒ Nội dung sẽ không được ghi vào các trang HTML bằng cách nhấn vào menu con
Templates từ menu Modify, và sau đó chọn tùy chọn Apply Template to Page.

Phần 4
Kháiniệm
ƒƒ Bạn chỉ có thể viết nội dung có thể chỉnh sửa các trang HTML bằng cách chọn lệnh New
from Template từ menu File.
ƒƒ Trong trường hợp có thay đổi, các khu vực có thể chỉnh sửa sẽ không được cập nhật.
Ghi chú: Khi bạn di chuyển con trỏ trên một khu vực bị khóa trong một trang, con trỏ sẽ thay đổi
từ mũi tên sang vòng tròn có gạch chéo chỉ ra rằng bạn không thể thực hiện bất kỳ thay đổi nào
trong khu vực đó.
4.2.4 Các loại khu vực mẫu
Trong khi tạo ra một mẫu, bạn phải quyết định những khu vực nào bạn muốn giữ làm có thể chỉnh sửa
và những cái nào giữ bị khóa. Ví dụ, trong một cuốn sách, thường là tiêu đề của cuốn sách được giữ bị
khóa, vì nó vẫn không đổi trong suốt cuốn sách. Trong khi đó, bạn có thể giữ tựa đề chương là có thể
chỉnh sửa, vì nó thay đổi cho mỗi chương. Có bốn loại khu vực mẫu như sau:
¾¾ Khu vực có thể chỉnh sửa: Nội dung xuất hiện trong phần này có thể được chỉnh sửa. Ví dụ
của khu vực có thể chỉnh sửa có thể là các đầu đề khác nhau trong một cuốn sách.
¾¾ Khu vực lặp lại: Bạn có thể sử dụng các khu vực lặp lại nơi các phần của nội dung là lặp lại. Ví
dụ, bạn có thể cài đặt một hàng của bảng để lặp lại dựa trên số lượng hàng yêu cầu. Có thể
chỉnh sửa nội dung trong các khu vực lặp lại.
¾¾ Khu vực tùy chọn: Nội dung xuất hiện trong khu vực này có thể hoặc không có thể xuất hiện
trong tài liệu. Ví dụ, tất cả các chương trong một cuốn sách có thể không có các phím tắt. Vì vậy,
bạn có thể để phần phím tắt làm khu vực tùy chọn trong mẫu và kiểm soát trong những chương
nào mẫu sẽ xuất hiện và ở đâu thì không.
¾¾ Thuộc tính thẻ có thể chỉnh sửa: Có một số phần tử cần được kiểm soát một phần bởi người
dùng. Ví dụ, sự căn chỉnh hình ảnh. Bạn có thể làm cho một hình ảnh ‘khóa’ và nó sẽ xuất hiện
trong tài liệu. Tuy nhiên, bạn có thể để người dùng tự do quyết định sự căn chỉnh hình ảnh.
4.2.5 Chỉ ra các thuộc tính thẻ có thể chỉnh sửa trong mẫu
Thuộc tính thẻ có thể chỉnh sửa là các vùng của mẫu nơi người dùng có thể chỉnh sửa. Ví dụ, căn chỉnh
các hình ảnh và màu nền của một trang. Quản trị mẫu sử dụng tham số mẫu trong đoạn mã để cài đặt
các thuộc tính có thể chỉnh sửa. Để chỉnh sửa thuộc tính thẻ, người dùng có thể chỉnh sửa tham số trong
tài liệu dựa trên mẫu.
Để chỉ ra các thuộc tính thẻ có thể chỉnh sửa trong mẫu, hãy làm theo những bước sau:
1. Trong cửa sổ Document, bạn chọn một mục mà bạn muốn đặt làm thuộc tính thẻ có thể chỉnh
sửa.
2. Trên menu Modify, bấm vào Templates, và sau đó bấm vào Make Attribute Editable.

Phần 4
Kháiniệm
Hộp thoại Editable Tag Attributes (Các thuộc tính thẻ có thể chỉnh sửa) xuất hiện như được trình
3. Trong hộp Attribute, bạn nhập tên hoặc chọn một thuộc tính bằng cách làm một trong các cách
sau:
yy Chọn thuộc tính từ menu bật lên Attribute.
yy Nếu thuộc tính yêu cầu không được liệt kê trong menu bật lên Attribute, bấm vào nút Add.
Hộp thoại Dreamweaver xuất hiện như được trình bày trong hình 4.5. Nhập tên của thuộc
tính mà bạn muốn thêm vào, và sau đó, bạn bấm vào OK.
4. Hãy chắc chắn rằng hộp kiểm Make attribute editable được chọn trong hộp thoại Editable Tag
Attributes.
5. Trong hộp Label, bạn nhập vào một tên duy nhất cho thuộc tính.
6. Trong menu Type, bạn chọn loại giá trị được cho phép cho thuộc tính này bằng cách cài đặt một
trong các tùy chọn sau:
yy Để cho phép người dùng nhập vào một giá trị văn bản cho thuộc tính, chọn Text.
yy Để cho phép người dùng chèn liên kết vào một phần tử, như là đường dẫn tập tin vào hình
ảnh, chọn URL.
yy Để cho phép người dùng chọn màu từ bảng chọn màu, chọn Color.
yy Để cho phép người dùng chọn giá trị đúng hay sai trên trang, chọn True/False.
yy Để cho phép người dùng nhập vào một giá trị số để cập nhật một thuộc tính, chọn Number.

Phần 4
Kháiniệm
Hình 4.4: Hộp thoại Editable Tag Attributes
Hình 4.5: Hộp thoại Dreamweaver

Phần 4
Kháiniệm
7. Hộp Default hiển thị giá trị của thuộc tính thẻ đã chọn trong mẫu. Nhập giá trị mới trong hộp này
để cài đặt một giá trị ban đầu khác nhau cho tham số trong tài liệu dựa trên mẫu.
8. Bấm vào OK.
4.2.6 Tạo các khu vực lặp lại
Khu vực lặp lại được sử dụng trong mẫu nơi các phần của mẫu được lặp lại. Ví dụ, các hàng của bảng.
Để cho phép người dùng chỉnh sửa một khu vực lặp lại, các quản trị viên mẫu chèn một khu vực có thể
chỉnh sửa vào khu vực lặp lại. Để làm như vậy, đặt điểm chèn vào tài liệu bạn muốn chèn khu vực lặp lại.
Sau đó, trên menu Insert, bấm vào Template Objects, và sau đó bấm vào tùy chọn Repeating Region.
Hộp thoại New Repeating Region xuất hiện như được trình bày trong hình 4.6.
Hình 4.6: Hộp thoại New Repeating Region

Phần 4
Kháiniệm
Hình 4.7: Khu vực lặp lại được chèn vào trong mẫu
Trong trường Name, bạn nhập vào tên cho khu vực lặp lại và bấm vào OK. Bạn nên luôn luôn sử dụng
một tên duy nhất cho tất cả các khu vực lặp lại. Bạn nên tránh sử dụng các ký tự đặc biệt cho tên. Khu
vực lặp lại sẽ được chèn vào trong tài liệu với tên RepeatRegion1. Bây giờ, để người dùng chỉnh sửa
nội dung trong các khu vực lặp lại, bạn phải chèn một khu vực có thể chỉnh sửa vào đó.
Như được trình bày trong hình 4.7, đầu tiên tạo ra một bảng nơi bạn nhập dữ liệu sinh viên. Từ đó, đầu
đề sẽ giữ không thay đổi, giữ cho nó bị khóa và do đó hàng sẽ là lặp lại, chèn một khu vực lặp lại có tên
là RepeatRegion1 vào trong đó. Do các khu vực lặp về bản chất không thể chỉnh sửa, chèn các khu
vực có thể chỉnh sửa vào mỗi cột cụ thể là tên học viên, số đăng ký, và điểm. Tạo ra một khu vực lặp
cho các hàng sẽ cho phép các tác giả trang chèn bao nhiêu hàng tùy họ muốn để chèn dữ liệu. Khi bạn
tạo ra một trang web dựa trên mẫu này, khu vực lặp sẽ được đặt với các điều khiển, như là các nút +, -,
mũi tên lên, mũi tên xuống như được trình bày trong hình 4.8. Các nút ‘+’ và ‘-’ được sử dụng cho việc
thêm và xóa các hàng trong các nút mũi tên lên và xuống được sử dụng để thay đổi trình tự của dữ liệu
đã nhập vào.

Phần 4
Kháiniệm
Hình 4.8: Lặp lại khu vực với các điều khiển
¾¾ Chèn một bảng lặp lại
Chèn một bảng lặp lại giống như chèn một vùng lặp lại, nhưng sự khác biệt là trong khi chèn tùy
chọn bảng lặp lại, toàn bộ hàng được lặp lại. Ở đây, mỗi ô trong hàng đó có thể chỉnh sửa, trong
khi đó, ở khu vực lặp lại, các ô có thể là không thể chỉnh sửa để lặp lại cùng một giá trị nhiều lần.
Để chèn một bảng lặp lại trong cửa sổ Document, bạn đặt điểm chèn vào tài liệu nơi bạn muốn
chèn bảng lặp lại. Sau đó, trên menu Insert, bấm vào Template Objects, và sau đó bấm vào
Repeating Table từ danh sách menu. Hộp thoại Insert Repeating Table xuất hiện như được trình
Hình 4.9: Hộp thoại Insert Repeating Table
Hộp thoại Insert Repeating Table chứa các trường sau:
¾¾ Rows xác định số lượng hàng mà bảng sẽ có.
¾¾ Columns xác định số lượng cột mà bảng sẽ có.

Phần 4
Kháiniệm
¾¾ Cell Padding xác định số lượng pixel giữa nội dung một của ô và ranh giới ô.
¾¾ Cell Spacing xác định số lượng pixel giữa các ô bảng liền kề.
¾¾ Width chỉ ra chiều rộng của bảng tính theo pixel, hoặc là tỷ lệ phần trăm chiều rộng cửa sổ
trình duyệt.
¾¾ Border chỉ ra độ rộng, theo pixel, của viền bảng.
Ghi chú: Khi bạn không chỉ định một cách rõ ràng các giá trị cho Cell Spacing và Cell Padding, hầu
hết các trình duyệt hiển thị bảng như thể Cell Padding đã được đặt thành 1 và Cell Spacing đã được
đặt thành 2. Để đảm bảo rằng các trình duyệt hiển thị bảng không có phần đệm hoặc giãn cách, đặt
Padding di động và di động Khoảng cách 0.
Khi bạn không chỉ định rõ ràng một giá trị cho Border, hầu hết các trình duyệt hiển thị bảng như thể
Border đã được đặt thành 1. Để đảm bảo rằng trình duyệt hiển thị bảng không có Border, đặt Border
thành 0. Để xem ranh giới ô và bảng khi Border được đặt thành 0, trên menu View, bấm vào Visual Aids
và chọn tùy chọn Table Borders.
¾¾ Repeat Rows của Table chỉ ra những hàng nào trong bảng được đưa vào trong khu vực lặp lại.
¾¾ Starting Row đặt số lượng hàng đã nhập vào, như hàng đầu tiên để đưa vào trong khu vực lặp
lại.
¾¾ Ending Row đặt số lượng hàng đã nhập vào, như hàng cuối cùng để đưa vào trong khu vực lặp
lại.
¾¾ Region Name cho phép bạn xác định tên duy nhất cho khu vực lặp lại.
¾¾ Cuối cùng, bạn bấm vào OK.
Bảng lặp lại sẽ được chèn vào mẫu với tên của khu vực được hiển thị trong một tab và mỗi ô là loại có
thể chỉnh sửa. Khi bạn lưu mẫu, nó sẽ hỏi các trang có nguồn gốc từ mẫu có cần được cập nhật hay
không.

Phần 4
Kháiniệm
Nếu bạn bấm Yes, bảng lặp lại sẽ được chèn vào trong trang với các điều khiển như trong hình 4.10.
Hình 4.10: Bảng lặp lại như được minh họa trong một trang
4.2.7 Các biểu thức mẫu
Tương tự như các biểu thức được sử dụng trong ngôn ngữ lập trình, biểu thức mẫu là các câu lệnh đánh
giá các giá trị đã chuyển vào trong đó. Ví dụ, bạn có thể sử dụng các biểu thức để thay đổi màu nền của
một trang. Bạn cũng có thể sử dụng câu lệnh điều kiện cho ‘if’ và điều kiện ‘nhiều if’. Kết quả của những
điều kiện này là đúng hoặc sai. Ví dụ, bạn có thể định nghĩa một biểu thức điều kiện mà nếu số điểm có
được của một học sinh trong một chủ đề là ít hơn 35, ô được làm đầy bằng màu đỏ chỉ ra rằng học viên
rớt về môn này.
Có thể định nghĩa các biểu thức mẫu trong giao diện Code hoặc trong hộp thoại Optional Region. Trong
giao diện Code, bạn có thể định nghĩa các biểu thức mẫu theo hai cách – hoặc sử dụng chú thích !--
TemplateExpr expr=”your expression”-- hoặc @@(your expression)@@. Khi chèn biểu thức, giao
diện Design hiển thị một điểm đánh dấu biểu thức. Về việc áp dụng mẫu, Dreamweaver đánh giá biểu
thức và hiển thị giá trị trong tài liệu dựa trên mẫu.
Để viết các biểu thức sẽ được đánh giá để hiển thị một giá trị trong các tài liệu dựa trên mẫu, bạn sử dụng
ngôn ngữ biểu thức mẫu, là một tập hợp con nhỏ của JavaScript. Ví dụ, để ghép họ và tên của nhân viên,
bạn có thể sử dụng các biểu thức sau.
@@(firstName+lastName)@@
Dreamweaver hỗ trợ các tính năng và toán tử sau đây:
¾¾ chữ số, các chuỗi (chỉ cú pháp dấu ngoặc kép), chữ boolean (đúng hoặc sai)
¾¾ tham chiếu biến (xem danh sách các biến đã định nghĩa sau ở phần này)
¾¾ tham chiếu trường (toán tử ‘chấm’)
¾¾ toán tử nguyên phân: +, -, ~, !

Phần 4
Kháiniệm
¾¾ toán tử nhị phân: +, -, *, /, %, , |, ^, , ||, , =, , =, ==, !=, ,
¾¾ toán tử có điều kiện: ?:
¾¾ dấu ngoặc: ()
4.3 Đối tượng Flash
Trong Dreamweaver CS5, bạn có thể dễ dàng tạo các đối tượng Flash và văn bản ngay cả khi bạn
không biết làm thế nào để sử dụng Flash. Bạn cũng không cần phải cài đặt Flash trên hệ thống của bạn.
Trong Dreamweaver, có các nút và biểu tượng dựng sẵn bạn có thể tùy chỉnh theo nhu cầu của bạn.
Dreamweaver cung cấp cho bạn hai tùy chọn sau đây để cung cấp video FLV cho khách truy cập
Website của bạn:
¾¾ Progressive Download Video: Tùy chọn này tải tập tin FLV về đĩa cứng của khách truy cập
Website và sau đó, mở tập tin đó.
¾¾ Streaming Video: Tùy chọn này tạo dòng nội dung video và phát nó trên một trang web sau một
thời gian nhớ đệm ngắn để đảm bảo phát lại trơn tru. Truy cập vào Adobe Flash Media Server là
bắt buộc để cho phép video theo dòng trên các trang web của bạn.
4.3.1 Giới thiệu về tích hợp Flash
Bạn có thể dễ dàng chèn các tập tin Adobe Flash SWF và FLV vào tài liệu Dreamweaver. Bạn có thể
dùng trình soạn thảo ban đầu để chỉnh sửa hình ảnh hoặc tập tin SWF chèn nó vào tài liệu Dreamweaver.
Một khi bạn chèn tập tin flash vào Dreamweaver, Dreamweaver tạo ra một liên kết đến tập tin FLA ban
đầu. Bạn có thể mở tập tin flash ban đầu sử dụng Property Inspector.
4.3.2 Chèn các tập tin FLV
Trong Dreamweaver CS5, bạn có thể dễ dàng thêm video FLV vào các trang web của bạn mà không cần
sử dụng công cụ thiết kế Flash. Hãy chắc chắn rằng bạn có tập tin FLV đã mã hóa trước khi bạn chèn
tập tin. Để chèn tập tin FLV, trên menu Insert, bạn chọn lệnh Media, và sau đó, bấm vào FLV từ menu
con. Trong hộp thoại Insert FLV như được trình bày trong hình 4.11, bạn chọn Progressive Download
Video hoặc Streaming Video từ danh sách thả xuống Video type. Hoàn thành phần còn lại của các tùy
chọn hộp thoại và sau đó, bấm vào OK.
Ghi chú: Để xem các tập tin FLV, bạn phải có Flash Player 8 hoặc cao hơn được cài đặt trên máy tính
của bạn.

Phần 4
Kháiniệm
Hình 4.11: Hộp thoại Insert FLV
4.4 Shockwave
Shockwave là tiêu chuẩn được thông qua bởi Macromedia cho đa phương tiện tương tác trên web. Nó
là một định dạng nén, cho phép tạo ra các tập tin phương tiện trong Adobe Director sẽ được tải về một
cách nhanh chóng và chạy bằng các trình duyệt phổ biến nhất.
Bạn sẽ có được plug-in cho các phim Shockwave như cả hai, một plug-in Netscape Navigator và một
điều khiển ActiveX. Dreamweaver sử dụng plug-in này để cung cấp kết quả tốt nhất trong tất cả các trình
duyệt khi bạn chèn phim Shockwave. Khi bạn thực hiện những thay đổi trong Property Inspector cho
phim, Dreamweaver ánh xạ các mục nhập của bạn vào các tham số thích hợp cho cả thẻ đối tượng và
thẻ nhúng.
4.4.1 Chèn phim Shockwave
Để chèn phim Shockwave, đầu tiên, trong cửa sổ Document, bạn đặt điểm chèn vào nơi bạn muốn chèn
phim Shockwave. Tiếp theo, trên menu Insert, bấm vào Media, và sau đó bấm vào tùy chọn Shockwave.
Khi bấm vào tùy chọn này, hộp thoại Select File sẽ được hiển thị như được trình bày trong hình 4.12.
Bây giờ, chọn một tập tin phim từ danh sách thả xuống và sau đó, bấm vào OK.
Tập tin Shockwave sẽ được chèn vào trong cửa sổ Document như một hình chữ nhật màu xám với logo
Shockwave ở trung tâm, như được trình bày trong hình 4.13.

Phần 4
Kháiniệm
Bạn cũng có thể nhập chiều rộng và chiều cao của phim trong hộp W và H của Property Inspector.
Hình 4.12: Hộp thoại Select File

Phần 4
Kháiniệm
Hình 4.13: Chèn phim Shockwave từ hộp thoại Select File
4.4.2 Các thuộc tính của phim Shockwave
Trong cửa sổ Document, bạn còn có tùy chọn thiết đặt các thuộc tính của phim Shockwave trong
Property Inspector. Xem hình 4.14.
Hình 4.14: Property Inspector hiển thị các thuộc tính Shockwave

Phần 4
Kháiniệm
Bảng 4.1 liệt kê các thuộc tính phim Shockwave.
Name Chỉ ra tên để xác định phim cho tập lệnh. Bạn nhập tên vào trường không có nhãn
ở phía xa bên trái của Property Inspector.
W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel. Không nên có
dấu cách giữa các chữ viết tắt và giá trị. Bạn cũng có thể chỉ ra các đơn vị sau
đây:
pc (picas)
pt (points)
in (inches)
mm (millimeters)
cm (centimeters)
% (phần trăm giá trị của đối tượng mẹ).
File Chỉ ra đường dẫn đến tập tin phim Flash hay Shockwave. Bạn cần bấm vào biểu
tượng thư mục để duyệt tập tin hoặc gõ đường dẫn.
V Space and H
Space
Chỉ ra số lượng điểm ảnh của khoảng trắng ở trên, dưới, và ở cả hai bên của
phim.
Align Xác định cách thức phim sẽ được căn chỉnh trên trang.
Play Cho phép bạn mở phim Shockwave trong cửa sổ Document.
Parameters Cho phép bạn đặt các tham số khác của phim.
Bảng 4.1: Các thuộc tính phim Shockwave
4.5 Làm việc với các thuộc tính hình ảnh Photoshop
Với Dreamweaver, bạn có thể chèn các tập tin hình ảnh Photoshop (định dạng PSD) vào các trang web,
nó tiếp tục tối ưu hóa vào các định dạng GIF, JPEG, và PNG như các hình ảnh sẵn sàng cho web. Bạn
còn có tùy chọn dán tất cả hoặc chỉ một phần của một hình ảnh Photoshop nhiều lớp hoặc nhiều lát vào
một trang web. Như đã thảo luận trong chương trước, có hai cách bạn có thể làm việc với các tập tin
Photoshop trong Dreamweaver CS5 – tiến trình công việc sao chép/dán và tiến trình công việc Smart
Objects.
Ghi chú: Hãy chắc chắn là bạn che những hình ảnh Photoshop trên Website của bạn để tránh việc xử
lý không cần thiết giữa Website cục bộ và các máy chủ từ xa, trong trường hợp bạn sử dụng tính năng
tích hợp này thường xuyên để lưu trữ các hình ảnh của bạn.

Phần 4
Kháiniệm
4.5.1 Cài đặt các tùy chọn của hộp thoại Xem trước hình ảnh
Hình ảnh Image Preview xuất hiện như được trình bày trong hình 4.15 khi bạn tạo ra một đối tượng
thông minh hoặc dán một lựa chọn từ Photoshop.
Ghi chú: Dreamweaver còn hiển thị hộp thoại này cho bất kỳ loại hình ảnh nào khác nếu bạn chọn hình
ảnh này và nhấn vào nút Edit Image Settings trong Property Inspector.
Hình 4.15: Hộp thoại Image Preview
Hộp thoại Image Preview cho phép bạn xác định và xem trước các thiết đặt cho hình ảnh sẵn sàng cho
web sử dụng đúng sự pha trộn màu, nén và chất lượng. Khi bạn chèn một hình ảnh Photoshop, bạn có
thể điều chỉnh các thiết đặt khác nhau để có được xuất bản web tối ưu với hộp thoại Image Preview.

Phần 4
Kháiniệm
Hộp thoại Image Preview có ba phần như sau:
¾¾ Tab Options: Nó cho phép bạn định nghĩa định dạng tập tin nào để sử dụng và đặt sở thích, như
là màu.
¾¾ Tab File: Nó cho phép bạn đặt hệ số tỉ lệ và kích thước tập tin mục tiêu của hình ảnh.
¾¾ Bảng điều khiển Preview: Nó cho phép bạn xem một phiên bản của hình ảnh với các thiết đặt
hiện tại của bạn.
Bảng 4.2 liệt kê các tùy chọn hình ảnh JPEG khác nhau trong hộp thoại Image Preview.
Tùy chọn Mô tả
Quality Thanh trượt này kiểm soát chất lượng hình ảnh. Bạn có thể tăng thanh
trượt để có được chất lượng hình ảnh tốt hơn và ngược lại. Tuy nhiên,
chất lượng hình ảnh tốt hơn sẽ làm tăng kích thước tập tin.
Smoothing Bạn có thể sử dụng thiết đặt này để làm mịn các hình ảnh chất lượng thấp
hơn.
Progressive Browser
Display
Tùy chọn này không được chọn theo mặc định. Nếu bạn chọn tùy chọn
này, lúc đầu nó sẽ tải các hình ảnh ở độ phân giải thấp. Sau đó nó làm tăng
độ phân giải hình ảnh khi hình ảnh tải về.
Sharpen Color Edges Cho phép bạn để có được hình ảnh chất lượng cao hơn.
Matte Bạn có thể sử dụng hộp thoại Matte để cài đặt nền của hình ảnh và sửa
chữa hiệu ứng chống răng cưa trong các hình ảnh.
Remove Unused Colors Bạn có thể sử dụng tùy chọn này để loại bỏ các màu không mong muốn từ
hình ảnh do đó, làm giảm kích thước tập tin.
Optimize to Size Bạn có thể sử dụng tùy chọn này để điều chỉnh số lượng màu trong một
hình ảnh và có được kích thước tập tin ưa thích.
Bảng 4.2: Các tùy chọn hình ảnh JPEG
Bảng 4.3 liệt kê các tùy chọn hình ảnh GIF và PNG trong hộp thoại Image Preview.
Palette Tùy chọn này được đặt thành Adaptive theo mặc định. Bạn có thể chọn bảng
màu phù hợp với các tùy chọn đặt sẵn.
Loss Đặt là 0 theo mặc định. Không áp dụng cho các hình ảnh PNG.
Dither Bạn có thể chọn tùy chọn này để đạt được phối màu khi màu tương tự được
tính xấp xỉ và pha trộn để phù hợp với các màu thiếu trong các hình ảnh.
Lưu ý: Phối màu rất có thể tăng kích thước tập tin.
Number Of Colors
List
Tùy chọn này được đặt thành giá trị 256 theo mặc định. Giá trị này được dựa
trên bảng màu hiện tại đã chọn.
Color palette Việc hiển thị màu khác nhau tùy thuộc vào hành vi của bảng màu đã chọn và
số lượng màu tối đa.

Phần 4
Kháiniệm
Palette Tools Bấm vào bất kỳ điểm ảnh nào trong bảng màu và sau đó, bấm vào những biểu
tượng này để thay đổi, thêm hoặc xóa màu, hoặc để tạo ra một màu trong suốt,
an toàn web, hoặc bị khóa.
Select
Transparency Color
Icons
Bạn có thể sử dụng những nút này để chỉnh sửa các bảng màu.
Transparency pop-
up menu
Bạn có thể sử dụng tùy chọn này để đặt độ trong suốt. Bạn có thể chọn từ ba
tùy chọn độ trong suốt: No Transparency, Index, và Alpha.
Index: Tùy chọn này được sử dụng khi xuất chuyển các hình ảnh GIF với các
vùng trong suốt. Độ trong suốt chỉ số bật hoặc tắt các điểm ảnh với các giá trị
màu cụ thể.
Alpha: Tùy chọn này được sử dụng khi xuất chuyển các hình ảnh 8-bpc PNG
với các vùng trong suốt. Độ trong suốt alpha cho phép độ trong suốt chuyển dần
và các điểm ảnh bán đục.
Matte Bạn có thể sử dụng hộp thoại Matte để cài đặt nền của hình ảnh và sửa chữa
hiệu ứng chống răng cưa trong các hình ảnh.
Remove Unused
Colors
Bạn có thể sử dụng tùy chọn này để loại bỏ các màu không mong muốn từ hình
ảnh do đó, làm giảm kích thước tập tin.
Interlaced Browser
Display
Tùy chọn này không được chọn theo mặc định. Nếu bạn chọn tùy chọn này, lúc
đầu nó sẽ tải các hình ảnh ở độ phân giải thấp. Sau đó nó làm tăng độ phân giải
hình ảnh khi hình ảnh tải về.
Optimize To Size Bạn có thể sử dụng tùy chọn này để điều chỉnh số lượng màu trong một hình
ảnh và có được kích thước tập tin ưa thích.
Bảng 4.3: Các tùy chọn hình ảnh GIF và PNG
4.6 Làm việc với Bridge and Device Central
Phần này sẽ giải thích Adobe Bridge và Device Central.
4.6.1 Giới thiệu về Bridge
Dreamweaver cung cấp tích hợp liền mạch với Adobe Bridge, đó là một ứng dụng duyệt tập tin hoạt động
độc lập. Adobe Bridge sẽ giúp bạn xác định vị, tổ chức và duyệt các tài nguyên bạn cần để tạo ra bản in,
web, video và nội dung âm thanh.
Hơn nữa, Adobe Bridge cung cấp cho bạn với các chức năng như Quản lý các tập tin hình ảnh, quản
lý hình ảnh của bạn, thực hiện các nhiệm vụ tự động, như là các lệnh Batch và các thiết đặt Đồng bộ
màu.

Phần 4
Kháiniệm
Bạn còn có tùy chọn xem các tập tin của bạn trước khi đặt chúng hoặc kéo chúng vào bố trí trang. Để làm
như vậy, bạn có thể khởi động Adobe Bridge từ Dreamweaver theo nhiều cách khác nhau:
¾¾ Bấm vào menu File và bấm vào lệnh Browse In Bridge.
¾¾ Bấm vào nút Browse In Bridge trong thanh công cụ Standard.
¾¾ Nhấn Ctrl+Alt+O cho tùy chọn Browse In Bridge.
Ghi chú: Bridge mở ở chế độ File Browser như được trình bày trong hình 4.16, hiển thị các nội
dung của thư mục mới mở trong Dreamweaver. Nếu Bridge đã được mở, nó sẽ trở thành cửa
sổ hoạt động.
Hình 4.16: Chế độ File Browser

Phần 4
Kháiniệm
4.6.2 Đặt các tập tin vào Dreamweaver từ Bridge
Các tập tin có thể được đặt trong các trang Dreamweaver hoặc bằng cách chèn chúng hoặc bằng cách
kéo chúng từ Bridge vào trang của bạn. Để chèn tập tin vào tài liệu Dreamweaver, bắt buộc là tập tin phải
được mở ra trong giao diện Design để sử dụng tính năng này.
Khi sử dụng Dreamweaver, bạn có thể chèn hầu hết các loại tập tin vào các trang của bạn, mỗi loại trong
số đó được xử lý khác nhau. Những loại tập tin này như sau:
¾¾ Khi chèn một hình ảnh sẵn sàng cho web (JPEG, GIF hoặc PNG), Dreamweaver trực tiếp chèn
các tập tin hình ảnh vào trang của bạn và đặt một bản sao vào thư mục hình ảnh mặc định của
Website.
¾¾ Khi chèn một tập tin PSD Photoshop, Dreamweaver đặt tập tin PSD vào trang của bạn chỉ khi bạn
định nghĩa các thiết đặt tối ưu của nó.
¾¾ Khi chèn một tập tin không phải hình ảnh, như là mp3, PDF, hoặc tập tin có loại tập tin không rõ,
Dreamweaver chèn một liên kết đến tập tin nguồn.
¾¾ Khi chèn tập tin HTML, Dreamweaver chèn một liên kết vào tập tin nguồn.
¾¾ Khi chèn một tập tin Microsoft Word hoặc Excel, bạn phải chỉ ra xem bạn muốn chèn tập tin riêng
hoặc chèn liên kết vào tập tin nguồn. Trong trường hợp bạn muốn chèn chỉ tập tin, bạn đặc biệt
có thể định dạng tập tin như mong muốn.
¾¾ Đặt tập tin Adobe Bridge vào trang
Để đặt tập tin Adobe Bridge vào trang, bạn làm theo những bước sau:
1. Trong giao diện Design của Dreamweaver, đặt điểm chèn vào trang của bạn nơi bạn muốn
tập tin được chèn vào.
2. Trong Adobe Bridge, bạn chọn tập tin và trên menu File, bạn bấm vào Place In
Dreamweaver.
3. Nếu tập tin không có trong thư mục gốc của Website, bạn sẽ được nhắc nhở để sao chép nó
ở đó.
4. Nếu bạn đã đặt EditPreferencesAccessibility để hiển thị các thuộc tính khi chèn các
hình ảnh, hộp thoại Image Tag Accessibility Attributes sẽ được hiển thị khi bạn chèn các
hình ảnh sẵn sàng cho web, như là JPEG và GIF.
Ghi chú: Bạn không thể đặt các tập tin trong giao diện Code. Bạn chỉ có thể đặt các tập tin trong giao
diện Design.

Phần 4
Kháiniệm
4.6.3 Giới thiệu về Device Central
Dreamweaver Device Central đã làm cho nhiệm vụ của các nhà thiết kế và nhà phát triển web dễ dàng
hơn, bởi họ bây giờ có thể xem trước các tập tin Dreamweaver sẽ thể hiện như thế nào trên một loạt các
thiết bị di động. Điều này được thực hiện bằng cách sử dụng Tái tạo màn hình nhỏ của Opera, cho phép
các nhà thiết kế và nhà phát triển một ý tưởng công bằng về trang web của họ sẽ thể hiện như thế nào
trên màn hình nhỏ. Nó còn cho phép các nhà thiết kế và các nhà phát triển kiểm tra xem CSS của họ
chạy có chính xác hay không.
Sau đây là các hướng dẫn để tạo ra nội dung web Dreamweaver cho các thiết bị di động:
¾¾ Thứ nhất, như đã nói ở trên, Device Central sử dụng Tái tạo màn hình nhỏ của Opera, để xem
trước các trang web được tạo ra trong Dreamweaver. Phần xem trước này có thể cung cấp cho
bạn một ý tưởng tốt về những gì trang web trông như thế nào trên một thiết bị di động.
¾¾ Hướng dẫn tiếp theo là, trong khi tạo ra các trang web trong Dreamweaver, bạn nên cân nhắc
những điểm sau đây để đảm bảo có sự hiển thị đúng trong các thiết bị di động.
yy Tránh các phần tử thiết kế như các khung, bật lên, gạch chân, gạch ngang, gạch trên, nhấp
nháy, và dòng chữ chạy, bởi Tái tạo màn hình nhỏ của Opera không hỗ trợ chúng.
yy Sử dụng số lượng tối thiểu các phông chữ, cỡ chữ, và màu, để giữ cho các trang web cho
các thiết bị di động đơn giản.
yy Tránh chia tỉ lệ kích thước hình ảnh, vì nó làm tăng khả năng hình ảnh xuất hiện bị răng
cưa. Sử dụng CSS hoặc HTML để chỉ ra chiều cao và chiều rộng chính xác cho mỗi hình
ảnh được sử dụng.
Ghi chú: Opera software Website là một nguồn thông tin tốt về tối ưu hóa các trang web cho thiết
bị di động.
4.7 Java Applets
Phần này sẽ giải thích về Java Applet.
4.7.1 Chèn Java Applet
Để chèn Applet Java, đầu tiên, đặt điểm chèn vào cửa sổ Document nơi bạn muốn nhúng applet. Tiếp
theo, trên menu Insert, bạn chọn Media, sau đó bấm vào tùy chọn Applet. Khi làm như vậy, hộp thoại
Select File sẽ xuất hiện. Ở đây, bạn chọn các tập tin applet và sau đó, bấm vào OK. Applet sẽ được
nhúng vào trong cửa sổ Document.

Phần 4
Kháiniệm
4.7.2 Để đặt các thuộc tính Java Applet
Sau khi chèn một Java applet như được giải thích, bạn sử dụng Property Inspector để đặt các tham
số applet. Để xem các thuộc tính sau đây trong Property Inspector, trước tiên bạn phải chọn một Java
applet. Property Inspector ban đầu hiển thị các thuộc tính thường được sử dụng nhất như được trình
bày trong hình 4.17. Bấm vào mũi tên mở rộng ở góc dưới bên phải để xem tất cả các thuộc tính.
Hình 4.17: Property Inspector trình bày các thuộc tính Java Applet
Bảng 4.4 liệt kê các thuộc tính Java applet.
Name Bạn có thể chỉ ra tên mà sẽ xác định applet cho tập lệnh. Bạn nhập tên vào
trường không có nhãn ở phía bên trái của Property Inspector.
Code Bạn có thể duyệt hoặc nhập vào tên tập tin có chứa mã Java của applet.
Base Bạn có thể chỉ ra thư mục có chứa applet đã chọn. Trường này sẽ tự động
phản ánh tên thư mục khi bạn chọn một applet.
Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh
trên trang này.
Alt Bạn có thể chỉ ra văn bản thay thế (văn bản ALT) cho hình ảnh. Văn bản này
sẽ được hiển thị nếu trình duyệt của người dùng không hỗ trợ Java applet
hoặc Java đã bị vô hiệu hóa. Nếu bạn nhập văn bản, Dreamweaver tái tạo văn
bản với thuộc tính Alt của thẻ applet. Nếu bạn chọn hình ảnh, Dreamweaver
chèn thẻ img giữa thẻ applet mở và đóng.
V Space and H Space Bạn chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai bên của
applet.
Parameters Bạn có thể truyền các tham số bổ sung để được truyền qua cho applet sử
dụng tùy chọn này.
Bảng 4.4: Các thuộc tính Java Applet
4.8 Các điều khiển ActiveX
Điều khiển ActiveX là các thành phần có thể tái sử dụng, phần nào giống như các ứng dụng thu nhỏ, có
thể hoạt động như các plug-in của trình duyệt. Họ làm cho nhiều tính năng mới có sẵn, đến lượt mình
tăng cường chức năng của các trình duyệt của bạn. Chúng chạy trong Internet Explorer với Windows,
nhưng chúng không chạy trên máy Macintosh hoặc trong Netscape Navigator. Điều khiển ActiveX có thể
được nhúng trong một trang giống như các applet.

Phần 4
Kháiniệm
Vì vậy, khi khách truy cập yêu cầu một trang có chứa ActiveX, nó sẽ tự động được tải về. Một số ví dụ về
điều khiển ActiveX là các hộp văn bản, nút lệnh, trình phát nhạc, trình phát video, và mã chứng khoán.
Đối tượng ActiveX trong Dreamweaver cho phép chúng ta cung cấp các thuộc tính và các tham số cho
điều khiển ActiveX trong trình duyệt của khách. Dreamweaver sử dụng thẻ đối tượng để đánh dấu vị trí
trên trang nơi điều khiển ActiveX sẽ xuất hiện, và để cung cấp các tham số cho điều khiển ActiveX.
4.8.1 Chèn nội dung điều khiển ActiveX
Trong cửa sổ Document, bạn đặt điểm chèn nơi nội dung sẽ được chèn vào. Sau đó, trên menu Insert,
bấm vào Media, và sau đó bấm vào lệnh ActiveX. Biểu tượng sẽ cho biết nơi mà điều khiển ActiveX sẽ
xuất hiện trên trang trong Internet Explorer.
4.8.2 Đặt các thuộc tính ActiveX
Sau khi chèn một đối tượng ActiveX, bạn sử dụng Property Inspector để đặt các thuộc tính của thẻ đối
tượng và các tham số cho điều khiển ActiveX. Bạn bấm vào Parameters trong Property Inspector để
nhập tên và giá trị cho các thuộc tính không xuất hiện trong Property Inspector. Property Inspector
ban đầu hiển thị các thuộc tính thường được sử dụng nhất. Bạn cần phải bấm vào mũi tên mở rộng ở
góc dưới bên phải để xem tất cả các thuộc tính. Xem hình 4.18.
Hình 4.18: Property Inspector hiển thị các thuộc tính ActiveX
Bảng 4.5 liệt kê các thuộc tính ActiveX.
Name Bạn có thể chỉ ra tên sẽ xác định đối tượng ActiveX cho tập lệnh.
ClassID Bạn có thể chỉ ra ID duy nhất sẽ xác định điều khiển ActiveX cho trình duyệt.
ID này được sử dụng bởi trình duyệt để định vị điều khiển ActiveX. Nếu trình
duyệt không định vị điều khiển ActiveX cụ thể, nó cố gắng tải nó về từ vị trí
được chỉ ra trong Base.
Embed Nếu bạn chọn hộp kiểm này, nó thêm một thẻ nhúng trong thẻ đối tượng cho
điều khiển ActiveX.
Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh
trên trang này.
Parameters Bạn có thể truyền các tham số bổ sung để được truyền qua cho đối tượng
ActiveX. Nhiều điều khiển ActiveX đáp lại các tham số đặc biệt.

Phần 4
Kháiniệm
Src Bạn cần phải chỉ ra tập tin dữ liệu được sử dụng cho plug-in Netscape
Navigator nếu tùy chọn Embed được bật. Nếu bạn không nhập một giá trị,
Dreamweaver cố gắng xác định giá trị từ các thuộc tính ActiveX đã nhập.
V Space and H Space Bạn có thể chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai
bên của đối tượng.
Base Bạn có thể chỉ ra URL có chứa điều khiển ActiveX. Trình duyệt sẽ không thể
hiển thị đối tượng ActiveX nếu nó không tìm thấy một tham số cơ sở và khách
truy cập đã không có điều khiển ActiveX liên quan được cài đặt.
Alt Img Bạn có thể chỉ định một hình ảnh sẽ được hiển thị nếu trình duyệt không hỗ trợ
thẻ đối tượng. Tùy chọn này chỉ có sẵn khi đã hủy chọn tùy chọn Embed.
Data Bạn có thể chỉ ra một tập tin dữ liệu cho điều khiển ActiveX để tải. Nhiều các
điều khiển ActiveX, như Shockwave và RealPlayer, không sử dụng tham số
này.
Bảng 4.5: Các thuộc tính ActiveX
4.9 Plug-ins
Bạn có thể sử dụng các plug-in để xem các đối tượng phương tiện khác nhau thuộc các loại khác nhau
trong trình duyệt web của bạn. Plug-in là phương tiện để các tập tin nội dung được chạy và hiển thị trên
Website của bạn. Ví dụ, plug-in điển hình bao gồm RealPlayer và QuickTime, cho phép chúng ta mở các
mẫu âm thanh và phim video từ bên trong trình duyệt của bạn.
Sau khi bạn tạo ra nội dung cho một plug-in Navigator, bạn có thể sử dụng Dreamweaver để chèn
nội dung vào tài liệu HTML. Dreamweaver sử dụng thẻ nhúng để đánh dấu tham chiếu đến tập tin nội
dung.
Để chèn nội dung plug-in Navigator, đầu tiên trong giao diện Design của cửa sổ Document, bạn đặt
điểm chèn nơi bạn muốn chèn nội dung. Sau đó, trên menu Insert, bạn bấm vào Media và sau đó bấm
vào lệnh Plug-in. Tiếp theo, trong hộp thoại Select File xuất hiện, bạn chọn một tập tin nội dung cho
plug-in Navigator và sau đó, bấm vào OK.
4.9.1 Đặt các thuộc tính plug-in Netscape Navigator
Sau khi chèn nội dung cho plug-in Netscape Navigator, bạn sử dụng Property Inspector để đặt các tham
số cho nội dung đó. Để xem các thuộc tính sau đây trong Property Inspector, bạn phải chọn một đối
tượng plug-in Netscape Navigator.
Property Inspector ban đầu hiển thị các thuộc tính thường được sử dụng nhất. Bấm vào mũi tên mở
rộng ở góc dưới bên phải để xem tất cả các thuộc tính.

Phần 4
Kháiniệm
Xem hình 4.19.
Hình 4.19: Property Inspector hiển thị các thuộc tính plug-in
Bảng 4.6 liệt kê các thuộc tính plug-in.
Name Bạn có thể chỉ ra tên sẽ xác định plug-in cho tập lệnh.
Src Bạn cần phải duyệt hoặc nhập tập tin dữ liệu nguồn.
Plg Url Bạn cần chỉ ra URL từ nơi người dùng có thể tải về plug-in.
Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh trên
trang này.
V Space and
H Space
Bạn có thể chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai bên
của đối tượng.
Border Bạn có thể chỉ ra độ rộng viền xung quanh plug-in.
Parameter Bạn có thể chỉ ra các tham số bổ sung để được truyền qua cho Netscape
Navigator
plug-in.
Bảng 4.6: Các thuộc tính plug-in

Phần 4
Kháiniệm
Tóm tắt
¾¾ Mẫu là công cụ tiết kiệm thời gian có thể được sử dụng trong các trang web chia sẻ
cùng một thiết kế nhưng nội dung khác nhau.
¾¾ Mẫu Dreamweaver là loại tài liệu đặc biệt được sử dụng để thêm cấu trúc và bố trí cho
một trang.
¾¾ Trong Dreamweaver, bạn có thể tạo ra mẫu từ một tài liệu HTML có sẵn hoặc tạo ra một
mẫu từ đầu.
¾¾ Dreamweaver cập nhật tất cả các tài liệu dựa trên mẫu khi bạn sửa đổi và lưu mẫu.
¾¾ Nội dung có thể được kiểm soát trong các tài liệu dựa trên mẫu bằng cách sử dụng các
tham số mẫu.
¾¾ Có bốn loại khu vực mẫu - khu vực có thể chỉnh sửa, khu vực lặp lại, khu vực tùy chọn,
và thuộc tính thẻ có thể chỉnh sửa.
¾¾ Trong Dreamweaver CS5, bạn có thể dễ dàng thêm video FLV vào các trang web của
bạn mà không cần sử dụng công cụ thiết kế Flash.
¾¾ Shockwave là một định dạng nén, cho phép tạo ra các tập tin phương tiện trong
Macromedia Director sẽ được tải về một cách nhanh chóng và chạy bằng các trình duyệt
phổ biến nhất.
¾¾ Với Dreamweaver, bạn có thể chèn các tập tin hình ảnh Photoshop (định dạng PSD) vào
các trang web.
¾¾ Adobe Bridge sẽ giúp bạn xác định vị, tổ chức và duyệt các tài nguyên bạn cần để tạo ra
bản in, web, video và nội dung âm thanh.
¾¾ Điều khiển ActiveX là các thành phần có thể tái sử dụng, phần nào giống như các ứng
dụng thu nhỏ, có thể hoạt động như các plug-in của trình duyệt.
¾¾ Đối tượng ActiveX trong Dreamweaver cho phép bạn cung cấp các thuộc tính và các
tham số cho điều khiển ActiveX trong trình duyệt của khách truy cập.

Phần 4
Kháiniệm
1. Khu vực ____________ chứa nội dung sẽ luôn luôn được ghi vào các trang dựa trên
mẫu.
a. Mở khóa
b. Có thể chỉnh sửa
c. Không thể chỉnh sửa
d. Bị khóa
2. Không thể sửa đổi mẫu sau khi bạn đã sử dụng nó để tạo ra các tài liệu.
a. Đúng
b. Sai
3. ____________ là tiêu chuẩn được thông qua bởi Macromedia cho đa phương tiện
tương tác trên web.
a. Shockwave
b. Tập tin SWF
c. HTML
d. Netscape Navigator
4. Tất cả mọi thứ bên ngoài khu vực có thể chỉnh sửa chỉ có thể được sửa đổi trong mẫu.
a. Đúng
b. Sai
5. ____________ duy trì tỷ lệ giữa chiều rộng và chiều cao của thành phần video Flash.
a. Chiều cao
b. Chiều rộng
c. Ràng buộc
d. URL
6. _________ là một phần của mẫu có thể được nhân đôi nhiều lần theo ý bạn trong một

Phần 4
Kháiniệm
trang dựa trên mẫu.
a. Bảng lặp lại
b. Khu vực lặp lại
c. Hàng lặp lại của bảng
d. Chèn bảng lặp lại
7. Khu vực lặp lại là khu vực không thể chỉnh sửa trong tài liệu dựa trên mẫu, trừ khi nó có
chứa một khu vực có thể chỉnh sửa.
a. Đúng
b. Sai
8. Văn bản và các nút Flash có thể được tạo ra sử dụng Dreamweaver.
a. Đúng
b. Sai

Phần 4
Kháiniệm
1. Tạo ra mẫu để thiết kế một Website đơn giản. Sửa đổi mẫu này.
2. Tạo ra một trang web khác và chuyển đổi trang này thành mẫu và thêm các khu vực có thể
chỉnh sửa vào đó.
Gợi ý:
a. Đối với nội dung trên trang web, bạn có thể sử dụng ‘text.doc’ từ thư mục Courseware.

“
“Khổ thân người dạy người khác
nhanh hơn họ có thể học.

Thử nghiệm Website
5
Phần
Kháiniệm
Mục tiêu
¾¾ Sử dụng danh sách kiểm tra để ra mắt Website
¾¾ Áp dụng tính năng Kiểm tra trình duyệt mục tiêu
¾¾ Áp dụng tính năng Xác thực đánh dấu
¾¾ Áp dụng tính năng Kiểm tra liên kết
¾¾ Áp dụng tính năng Kiểm tra khả năng tiếp cận
¾¾ Chuyển Website sang Internet
¾¾ Chuyển các tập tin sang Internet
¾¾ Đồng bộ hóa các tập tin Website
¾¾ So sánh các tập tin về sự khác biệt
¾¾ Thử nghiệm Website
5.1 Giới thiệu
Trong phần trước, bạn đã học được cách tạo ra các mẫu làm cho việc thiết kế Website dễ dàng hơn.
Bạn cũng đã học về các điều khiển ActiveX, Java Applet, plug-in, các thuộc tính của chúng, và cách để
chèn chúng vào tài liệu.
Trong phần này, bạn sẽ nhận dạng các bước khác nhau cần được tuân thủ theo để đảm bảo tính đầy đủ
của một Website trước khi nó được tải lên Internet. Bạn cũng sẽ tìm hiểu cách để công bố Website lên
Internet.
5.2 Danh sách kiểm tra khởi chạy Website
Sau khi bạn tạo một trang web trong Dreamweaver, bạn nên luôn luôn kiểm tra trang đó về tính hoàn
chỉnh. Bạn nên kiểm tra các trang lúc và khi bạn tạo ra chúng. Điều này sẽ giảm thiểu số lỗi khi toàn bộ
Website được xây dựng.

Phần 5
Kháiniệm
Trong khi tạo ra một trang web, bạn nên kiểm tra các khía cạnh sau.
5.2.1 Xem trước các trang trong Dreamweaver
Giao diện Design cho phép bạn xem trước các trang chính xác cách chúng được thấy trên web. Tuy
nhiên, giao diện Design không tái tạo các trang chính xác như trình duyệt. Để đạt được điều này, bạn
sử dụng giao diện Live, mang đến cho bạn một sự mô tả chính xác hơn. Bạn có thể làm việc trong giao
diện Code và xem trước những thay đổi trong thiết kế. Bạn có thể xem trước các trang cách chúng được
thấy trong các trình duyệt cụ thể bằng cách sử dụng tính năng Preview in Browser.
Bạn có thể có được một cái nhìn thực tế hơn về trang web của bạn trong giao diện Live mà không đóng
không gian làm việc Dreamweaver của bạn. Giao diện Live chỉ đơn giản là một cách khác để xem trước
trang. Nó không thay thế lệnh Preview in Browser. Khi bạn chuyển sang giao diện Live, giao diện
Design vẫn bất động, tuy nhiên, giao diện Code vẫn có thể chỉnh sửa, vì vậy bạn có thể thay đổi mã của
bạn, và sau đó, làm mới giao diện Live để xem những thay đổi mà bạn đã thực hiện. Để xem trước các
trang trong giao diện Live, trước tiên bạn hãy chắc chắn rằng bạn đang ở trong giao diện Design, hoặc
giao diện Code and Design. Sau đó, bạn bấm vào nút Live View .
Giao diện Live cần phải được làm mới trong trường hợp có bất kỳ thay đổi nào đã được thực hiện trong
giao diện Code hoặc trong một tập tin có liên quan. Để làm mới giao diệnLive, bấm vào nút Refresh
trong thanh công cụ Document, hoặc nhấn F5. Cuối cùng, để trở về giao diện Design có thể chỉnh sửa,
bạn bấm vào lại nút Live View.
5.2.2 Xem trước các trang trong Dreamweaver
Nhà phát triển ứng dụng web có xu hướng thường xuyên kiểm tra các trang của họ trong trình duyệt web,
sau đó gỡ lỗi chúng. Bạn có tùy chọn có được bản xem trước nhanh chóng của các trang động trong
trình duyệt web, chọn lệnh Preview In Browser từ menu File và sau đó, chọn các trình duyệt đã liệt kê.
Để làm như vậy, bạn phải điền đầy đủ các yêu cầu trong thể loại Testing Server có sẵn trên hộp thoại
Site Definition.
Bạn cũng có thể chỉ ra việc sử dụng các tập tin tạm thời trên những bản gốc. Khi bạn chỉ ra tùy chọn này,
Dreamweaver chạy một bản sao tạm thời của trang trên một máy chủ web trước khi hiển thị nó trong trình
duyệt của bạn. Sau đó Dreamweaver xóa bản sao tạm thời này khỏi máy chủ. Để cài đặt tùy chọn này,
trên menu Edit, bạn bấm vào Preferences, và tiếp tục bấm vào tùy chọn Preview In Browser từ thể loại
này. Sau đó, chọn hộp kiểm Preview using temporary file.
5.2.3 Xem trước các trang trong thiết bị di động
Để xem trước các trang được tạo ra trong Dreamweaver trên các thiết bị di động khác nhau, bạn sử dụng
Device Central với tính năng Opera Small-Screen Rendering dựng sẵn. Đầu ra xem trước của trang
web có thể thay đổi trên mỗi thiết bị di động dựa trên các trình duyệt mà thiết bị sử dụng. Đây là một ý
tưởng tốt để có được một bản xem trước tiêu chuẩn của tài liệu để thiết bị được chọn. Để xem trước các
trang trong các thiết bị di động, đầu tiên bạn khởi động Dreamweaver. Sau đó, bạn mở một tập tin và
thực hiện một trong các cách sau:
¾¾ Trên menu File, bạn bấm vào Preview in Browser, và sau đó bấm vào Device Central.

Phần 5
Kháiniệm
¾¾ Trên thanh công cụ cửa sổ Document, bạn bấm và giữ nút Preview/Debug In browser và
chọn Preview In Device Central.
Tập tin được hiển thị trong tab Device Central Emulator. Để xem trước tập tin trong một thiết bị khác,
bấm đúp chuột vào tên của một thiết bị khác trong danh sách Device Sets hoặc Available Devices. Xem
hình 5.1.
Hình 5.1: Xem trước trong thiết bị di động
5.2.4 Xác thực các trang
Tính năng các thẻ Xác thực đã bị phản đối trong Dreamweaver CS5; tuy nhiên, Dreamweaver hỗ trợ trình
xác thực mã bên ngoài bạn cài đặt như các phần mở rộng. Bạn sử dụng Trình xác thực để kiểm tra xem các
trangwebcóbấtkỳlỗimãhoặclỗithẻhaykhôngvàcònsosánhxemcáctrangwebcủabạnlàtrongdòngvới
các tiêu chuẩn đã thỏa thuận cho HTML và các ngôn ngữ khác, chẳng hạn như XHTML, ColdFusion
Markup Language (CFML), Java Server Pages (JSP) và Wireless Markup Language (WML).
¾¾ Chạy trình xác thực
Để chạy trình xác thực, thực hiện một trong các cách sau:
yy Đối với tập tin XML hoặc XHTML, trên menu File, bấm vào Validate, và sau đó, bấm vào
XML.

Phần 5
Kháiniệm
yy Đối với tập tin ColdFusion, trên menu File, bấm vào Validate, và sau đó, bấm vào
ColdFusion.
Tab Validation của bảng điều khiển Results sẽ hiển thị thông báo ‘No errors or warnings’ (Không có lỗi
hoặc cảnh báo) hoặc liệt kê các lỗi cú pháp tìm thấy như được trình bày trong hình 5.2.
Hình 5.2: Bảng điều khiển xác thực hiển thị các kết quả
Sau đó, bạn bấm đúp vào thông báo lỗi để tô sáng lỗi trong tài liệu. Để lưu báo cáo như là một tập tin
XML, bạn bấm vào nút Save Report. Để xem báo cáo trong trình duyệt chính của bạn (cho phép bạn in
báo cáo), bạn bấm vào nút Browse Report.
5.3 Kiểm tra các trình duyệt mục tiêu
Tính năng Target Browser Check đã được thay thế bằng Browser Compatibility Check (BCC) trong
Dreamweaver CS5. Bạn có thể sử dụng BCC để xác định vị trí các lỗi tái tạo trình duyệt được kích hoạt
bởi sự kết hợp của HTML và CSS. Bạn cũng có thể sử dụng tính năng này để kiểm tra mã nếu bạn không
chắc chắn trình duyệt của bạn không hỗ trợ một số thuộc tính CSS.
Để bắt đầu kiểm tra trình duyệt của bạn, chạy BCC trên một tập tin mở. Dreamweaver quét tập tin và
nếu nó tìm thấy bất kỳ vấn đề tái tạo nào, những vấn đề đó được hiển thị trong bảng điều khiển Results.
Dreamweaver còn hiển thị khả năng xảy ra lỗi. Khả năng xảy ra lỗi được chỉ ra bằng một vòng tròn tô
một phần tư. Tương tự như vậy, rất có khả năng xảy ra lỗi được chỉ ra bằng một vòng tròn tô đầy. Ngoài
việc chứng minh khả năng xảy ra, Dreamweaver còn cung cấp một liên kết trực tiếp đến tài liệu về lỗi
trên Adobe CSS Advisor, nơi bạn sẽ tìm thấy các lỗi tái tạo trình duyệt thường được biết đến và các giải
pháp để sửa chữa chúng.
Theo mặc định, tính năng BCC kiểm tra đối với những trình duyệt sau:
¾¾ Firefox 1.5
¾¾ Internet Explorer (Windows) 6.0 và 7.0
¾¾ Internet Explorer (Macintosh) 5.2

Phần 5
Kháiniệm
¾¾ Netscape Navigator 8.0
¾¾ Opera 8.0 và 9.0
¾¾ Safari 2.0
Để chạy trình duyệt kiểm tra khả năng tương thích, trên menu File, bạn bấm vào Check Page, và sau
đó, bấm vào Browser Compatibility. Xem hình 5.3.
Hình 5.3: Hộp thoại Browser Compatibility
Để chọn phần tử bị ảnh hưởng bởi vấn đề đã tìm thấy, bạn bấm đúp vào vấn đề trong bảng điều khiển
Results. Để chuyển đến vấn đề đã tìm thấy kế tiếp hoặc trước trong đoạn mã, bạn bấm vào Next Issue
hoặc Previous Issue từ menu Browser Compatibility Check trong thanh công cụ Document. Để kiểm
tra các trình duyệt khác cho Dreamweaver, bạn làm theo các bước sau:
1. Trong bảng điều khiển Results, bạn bấm vào tab Browser Compatibility Check.
2. Bấm vào mũi tên màu xanh lá cây ở góc trên bên trái của bảng điều khiển Results và bấm vào
Settings.
3. Chọn hộp kiểm bên cạnh mỗi trình duyệt bạn muốn kiểm tra.
4. Mỗi trình duyệt có một phiên bản nhỏ nhất, chọn phiên bản này từ menu bật lên tương ứng. Ví dụ,
để xem lỗi tái tạo CSS có thể xuất hiện trong Internet Explorer 5.0 và Netscape Navigator 7.0 và
cao hơn, bạn chọn các hộp kiểm bên cạnh những tên trình duyệt đó, và chọn 5.0 từ menu bật lên
Internet Explorer và 7.0 từ menu bật lên Netscape.
Sẽ hiển thị báo cáo như được trình bày trong hình 5.4 trong bảng điều khiển BCC của nhóm bảng điều
khiển Results. Báo cáo này cho thấy sự không tương thích khác nhau của trang web với trình duyệt. Báo
cáo chỉ ra tên tập tin, dòng trong đó lỗi đã xảy ra và mô tả về lỗi đó.

Phần 5
Kháiniệm
Hình 5.4: Bảng điều khiển Browser Compatibility Check (Bcc) hiển thị các kết quả
Bạn có thể lưu bản báo cáo kiểm tra khả năng tương thích trình duyệt. Để làm điều này, bạn chạy
kiểm tra khả năng tương thích trình duyệt. Sau đó, bạn bấm vào nút Save Report ở phía bên trái
của bảng điều khiển Results. Bây giờ, để xem báo cáo kiểm tra khả năng tương thích trình duyệt
trong trình duyệt, đầu tiên, bạn chạy kiểm tra khả năng tương thích trình duyệt.
Sau đó, bạn bấm vào nút Browse Report ở phía bên trái của bảng điều khiển Results.
5.4 Tìm và sửa các liên kết bị hỏng
Tính năng CheckLink của Dreamweaver là một công cụ mạnh mẽ bạn có thể sử dụng cho việc duy trì
các liên kết trong trang web của bạn. Với Link Checker, bạn có thể kiểm tra các liên kết trong một trang
web đơn lẻ, các trang web đã chọn, hoặc trong suốt toàn bộ Website. Dreamweaver xác minh chỉ các
liên kết đến các tài liệu trong Website của bạn. Các liên kết bên ngoài khác được biên dịch, nhưng không
được xác minh.
Sau khi Dreamweaver kiểm tra các liên kết, nó sẽ mở ra bảng điều khiển Link Checker như được trình
bày trong hình 5.5. Điều này sẽ hiển thị một danh sách các liên kết bị hỏng, các liên kết bên ngoài (mà
Dreamweaver không thể kiểm tra) và các tập tin Mồ côi. (Đây là những tập tin được gửi lại trong Website
của bạn nhưng không có các tập tin khác trong Website liên kết đến chúng.)
5.4.1 Tìm các liên kết bị hỏng
¾¾ Kiểm tra các liên kết trong tài liệu hiện tại
Để kiểm tra các liên kết trong tài liệu hiện tại, lưu tập tin vào một vị trí trong Website Dreamweaver
cục bộ của bạn.
Trên menu File, bạn bấm vào CheckPage và sau đó, bấm vào Links. Báo cáo xuất hiện trong
bảng điều khiển Link Checker (trong nhóm bảng điều khiển Results) như được trình bày trong
hình 5.5. Để lưu báo cáo, bạn bấm vào nút Save Report trong bảng điều khiển Link Checker.

Phần 5
Kháiniệm
Hình 5.5: Bảng điều khiển Link Checker hiển thị các kết quả
¾¾ Kiểm tra các liên kết trong một phần của Website cục bộ
Để kiểm tra các liên kết trong một phần của Website cục bộ, đầu tiên, trên bảng điều khiển Files,
chọn một Website từ menu bật lên Current Sites. Tiếp theo, trong giao diện Local, bạn chọn các
tập tin hoặc thư mục bạn muốn kiểm tra các liên kết, bằng cách chọn biểu tượng, nằm ở phía bên
tay trái của tập tin. Sau đó, vào menu File, bạn bấm vào Check Page và tiếp tục bấm vào lệnh
Links. Báo cáo xuất hiện trong bảng điều khiển Link Checker của nhóm bảng điều khiển Results.
Trong bảng điều khiển Link Checker, bạn có thể chọn một báo cáo liên kết cụ thể từ menu bật lên
Show để xem báo cáo đó. Các lựa chọn báo cáo là Broken Links, External Links và Orphaned
Links. Bạn có thể kiểm tra các liên kết mồ côi khi bạn kiểm tra các liên kết trên toàn bộ Website.
Bạn có thể lưu báo cáo bằng cách bấm vào nút Save Report trong bảng điều khiển Link Checker.
¾¾ Kiểm tra các liên kết trong toàn bộ Website
Để kiểm tra các liên kết trong toàn bộ Website, trên bảng điều khiển Files, đầu tiên bạn chọn một
Website từ menu bật lên Sites. Tiếp theo, bạn chọn Website được hiển thị trong bảng điều khiển
Files. Sau đó, trên menu Site, bạn bấm vào lệnh Check Links Sitewide. Khi làm như vậy, báo cáo
xuất hiện trong bảng điều khiển Link Checker của nhóm bảng điều khiển Results. Tiếp theo, trong
bảng điều khiển Link Checker, bạn có thể chọn một báo cáo liên kết cụ thể từ menu bật lên Show
để xem báo cáo khác. Các lựa chọn báo cáo là Broken Links, External Links, và Orphaned
Files. Khi làm điều đó, danh sách các tập tin phù hợp với loại báo cáo bạn chọn xuất hiện trong
bảng điều khiển Link Checker.
Bạn có thể lưu báo cáo bằng cách bấm vào nút Save Report trong bảng điều khiển Link
Checker.
Nếu bạn chọn Orphaned Files làm loại báo cáo của bạn, bạn có thể xóa trực tiếp các tập tin mồ côi
từ bảng điều khiển Link Checker bằng cách chọn một tập tin từ danh sách và nhấn phím Delete.
5.4.2 Sửa các liên kết bị hỏng
Khi bạn kiểm tra các liên kết trong Dreamweaver, nó sẽ hiển thị báo cáo các liên kết bị hỏng, các liên kết
bên ngoài, và nếu bạn chọn toàn bộ Website, các tập tin mồ côi cũng được hiển thị trong bảng điều khiển
Link Checker. Bạn có thể khắc phục các liên kết bị hỏng trong bảng điều khiển Link Checker hoặc mở
tập tin và thực hiện các thay đổi trong Property Inspector.

Phần 5
Kháiniệm
¾¾ Sửa các liên kết bị hỏng trong bảng điều khiển Link Checker
Đầu tiên kiểm tra tập tin về các liên kết sử dụng tùy chọn Check Links như đã thảo luận trong
chủ đề Tìm các liên kết bị hỏng. Trong cột Broken Links của bảng điều khiển Link Checker của
nhóm bảng điều khiển Results, bạn chọn liên kết bị hỏng. Biểu tượng Browse for File xuất hiện
bên cạnh liên kết bị hỏng như được trình bày trong hình 5.6.
Hình 5.6: Bảng điều khiển Link Checker hiển thị biểu tượng Browse for File
Bấm vào biểu tượng để duyệt đến đúng tập tin, để liên kết đến, hoặc gõ đúng đường dẫn và tên tập
tin. Sau khi nhập đúng tên tập tin vào trường Broken Links, bạn nhấn phím Tab hoặc Enter. Trong
trường hợp có nhiều tài liệu tham chiếu bị hỏng tới cùng một tập tin, có một hộp thoại cũng sẽ nhắc
bạn sửa các tài liệu tham chiếu trong các tập tin khác. Nếu bạn bấm vào Yes, Dreamweaver sẽ cập
nhật tất cả các tài liệu trong danh sách tham chiếu tập tin này. Nếu là No, Dreamweaver sẽ chỉ cập
nhật tài liệu tham chiếu hiện tại.
¾¾ Sửa các liên kết bị hỏng trong Property Inspector
Để sửa các liên kết bị hỏng, đầu tiên kiểm tra tập tin về các liên kết sử dụng tùy chọn Check Links
như đã thảo luận trong chủ đề Tìm các liên kết bị hỏng. Tiếp theo, trong bảng điều khiển Link
Checker, bạn bấm đúp vào một mục nhập trong cột File. Dreamweaver mở tài liệu, chọn hình ảnh
hoặc liên kết, và làm nổi bật đường dẫn và tên tập tin trong Property Inspector. Trong trường hợp
Property Inspector không thấy được, khi đó, bạn bấm vào Window và chọn lệnh Properties để
mở nó.
Bạn còn có tùy chọn cài đặt một con đường dẫn và tên tập tin mới trong Property Inspector. Để
làm như vậy, bạn bấm vào biểu tượng Browse for File để duyệt đến đúng tập tin, hoặc gõ trên văn
bản đã đánh dấu. Cuối cùng, lưu tập tin.
Sau khi các liên kết được sửa chữa, bạn lại chạy tính năng Check Links để xem các liên kết đã được
cập nhật hay chưa. Nếu đã cập nhật, khi đó, các liên kết biến mất khỏi bảng điều khiển Link Checker.
Nếu liên kết vẫn còn xuất hiện trong bảng điều khiển Link Checker, điều đó có nghĩa là Dreamweaver
không thể tìm thấy tập tin và vẫn coi liên kết là bị hỏng.
5.5 Khả năng tiếp cận
Các Website mà chúng ta tạo ra phải có thể truy cập cho tất cả các nhóm người kể cả những người
khuyết tật khác nhau, chẳng hạn như những người khiếm thị.

Phần 5
Kháiniệm
Cho dễ cho người khuyết tật, các sản phẩm phần mềm và Website phải bao gồm hỗ trợ trình đọc màn
hình, chuyển đổi văn bản cho đồ họa, phím tắt, thay đổi màu hiển thị thành độ tương phản cao, và vân
vân.
Bạn có thể sử dụng các công cụ khác nhau để đem lại khả năng đọc màn hình, điều hướng bàn phím,
và hỗ trợ khả năng tiếp cận hệ điều hành trong Dreamweaver CS5 để tạo ra các trang web có khả năng
truy cập đầy đủ. Trong Dreamweaver, bạn sẽ tìm thấy nhiều hộp thoại nhắc bạn nhập các thuộc tính khả
năng tiếp cận, chẳng hạn như chuyển đổi văn bản cho hình ảnh. Khi hình ảnh xuất hiện trên trang web,
các trình đọc màn hình đọc chuyển đổi văn bản cho hình ảnh cho người dùng khiếm thị.
5.5.1 Sử dụng trình đọc màn hình với Dreamweaver
Như tên gọi cho thấy, trình đọc màn hình ghi lại văn bản xuất hiện trên màn hình máy tính. Nó còn nhận
biết thông tin không văn bản, chẳng hạn như các nhãn nút hoặc mô tả hình ảnh trong ứng dụng, được
cung cấp trong các thẻ hoặc thuộc tính khả năng tiếp cận trong quá trình thiết kế. Khi người dùng khiếm
thị sử dụng trình đọc màn hình để truy cập vào trang web, trình đọc màn hình bắt đầu đọc trang từ góc
trên bên trái của cửa sổ Document.
Đối với nhà thiết kế Dreamweaver, trình đọc màn hình là một công cụ có thể được sử dụng để hỗ trợ
bạn trong việc tạo ra các trang web. Dreamweaver hỗ trợ JAWS cho Windows của Freedom Scientific,
và trình đọc màn hình Window Eyes của GW Micro.
5.5.2 Đặt sở thích khả năng tiếp cận
Trong Dreamweaver CS5, bạn cần phải chỉ ra sở thích khả năng tiếp cận cho các phần tử trang khác
nhau. Ví dụ, hình ảnh nên có văn bản thay thế (văn bản ALT). Văn bản ALT được đọc bằng trình đọc màn
hình và giúp người khiếm thị có được thông tin mô tả về hình ảnh.
Hình 5.7: Hộp thoại Preferences hiển thị các tùy chọn khả năng tiếp cận

Phần 5
Kháiniệm
Nhiều nhà thiết kế không quan tâm đến việc cung cấp các tính năng khả năng tiếp cận trong Website
của họ. Tuy nhiên, Dreamweaver CS5 cho phép bạn cài đặt sở thích khả năng tiếp cận khi bạn đang xây
dựng trang web. Bạn có thể kích hoạt các tùy chọn khả năng tiếp cận trong hộp thoại Preferences như
được trình bày trong hình 5.7. Vì vậy, mỗi khi bạn chèn một đối tượng, chẳng hạn như biểu mẫu hay
hình ảnh vào tài liệu của bạn, bạn sẽ được nhắc nhở cung cấp thông tin liên quan đến khả năng tiếp cận.
Ví dụ, trong thể loại Accessibility của hộp thoại Preferences, nếu bạn chọn hộp kiểm Images, khi đó
một hộp thoại, như được trình bày trong hình 5.8, sẽ được hiển thị khi bạn chèn hình ảnh vào tài liệu. Mỗi
khi bạn chèn hình ảnh vào cửa sổ Document, bạn sẽ được nhắc nhập vào trường Alternate Text.
Hình 5.8: Hộp thoại Image Tag Accessibility Attributes
Để cài đặt các tùy chọn khả năng tiếp cận thẻ hình ảnh, trong hộp Alternate text, bạn nhập tên hoặc
mô tả ngắn gọn về hình ảnh. Trình đọc màn hình đọc thông tin bạn nhập vào đây. Bạn nên hạn chế mục
nhập của bạn vào khoảng 50 ký tự. Trong trường hợp, bạn phải thêm một đoạn mô tả dài, bạn có thể
thêm đoạn mô tả dài vào một tập tin và cung cấp liên kết đến tập tin trong hộp văn bản Long description.
Cuối cùng, bạn bấm vào OK.
Ghi chú: Nếu bạn bấm vào nút Cancel, hình ảnh xuất hiện trong tài liệu, nhưng Dreamweaver không
liên kết các thẻ hoặc thuộc tính khả năng tiếp cận với hình ảnh đó.
5.5.3 Hỗ trợ tính năng tiếp cận hệ điều hành
Dreamweaver hỗ trợ các tính năng tiếp cận trong cả hai hệ điều hành Windows và Macintosh. Trên máy
Macintosh, bạn cài đặt sở thích trực quan trong hộp thoại Universal Access Preferences bằng cách
chọn Apple và sau đó System Preferences. Các thiết đặt của bạn được phản ánh trong không gian làm
việc Dreamweaver.
Thiết đặt độ tương phản cao của hệ điều hành Windows cũng được hỗ trợ. Bạn kích hoạt tùy chọn này
thông qua Control Panel của Windows và nó ảnh hưởng đến Dreamweaver như sau:
¾¾ Để đạt được khả năng tiếp cận, bạn nên tránh sử dụng các màu trong Website của bạn. Do đó,
bạn có thể cài đặt màu hệ thống để sử dụng các thiết đặt đen trắng.

Phần 5
Kháiniệm
Bạn có thể có tất cả các hộp thoại và bảng điều khiển Dreamweaver xuất hiện với màu nền trước
màu trắng và nền đen.
¾¾ Giao diện Code sử dụng màu văn bản của hệ thống và của cửa sổ. Ví dụ, nếu bạn đặt màu hệ
thống thành White on Black, và sau đó, thay đổi màu văn bản bằng cách chọn Preferences và
Code Coloring trên menu Edit, Dreamweaver bỏ qua các thiết đặt màu và hiển thị văn bản mã
với màu nền trước màu trắng và nền đen.
¾¾ Giao diện Design sử dụng màu nền và văn bản bạn đã đặt bằng cách chọn Page Properties
trong menu Modify để các trang bạn thiết kế tái tạo màu như một trình duyệt sẽ làm.
5.6 Chuyển Website sang Internet
Bất kỳ Website nào bạn tạo ra sẽ bao gồm các trang web, đồ họa, âm thanh và các phần tử khác được
lưu trữ trên máy tính trong một thư mục Website cục bộ còn được gọi là Website cục bộ. Khi bạn đang
làm việc trên Website, có rất nhiều trang được hoàn thành một phần. Khi bạn đã hoàn thành và thử
nghiệm các trang web, như được thảo luận trong các chủ đề trước, bạn sẽ chuyển chúng đến máy chủ
web, từ đó được kết nối với Internet.
5.6.1 Xác định một Website từ xa
Dreamweaver cung cấp các tùy chọn khác nhau để bạn có thể kết nối Website cục bộ với Website từ xa.
Đối với Dreamweaver, bản sao của các tập tin trên máy chủ web được gọi là Website từ xa.
Bảng 5.1 liệt kê năm cách bạn có thể truyền các tập tin đến Website từ xa.
Website Mô tả
Giao thức truyền tập tin (FTP) FTP là cách phổ biến nhất được sử
dụng để truyền các trang web từ máy
chủ đến trình duyệt.
Mạng cục bộ Nếu bạn đang làm việc trên mạng nội
bộ, hoặc máy chủ web của công ty bạn
được kết nối với mạng công ty, bạn có
thể chuyển các tập tin cũng giống như
bạn làm trên mạng văn phòng của bạn.
Dịch vụ phát triển từ xa (RDS) của
ColdFusion
Phần mềm này được sử dụng để bạn
kết nối với máy chủ web của bạn sử
dụng RDS. Đối với phương pháp truy
cập này, thư mục từ xa của bạn phải
nằm trên máy tính đang chạy.
SourceSafe Phần mềm này được sử dụng để bạn
dụng cơ sở dữ liệu SourceSafe.

Phần 5
Kháiniệm
WebDAV (Web-based Distributed
Authoring and Versioning)
Phần mềm này được sử dụng để bạn
dụng giao thức WebDAV. Máy chủ,
chẳng hạn như máy chủ web Apache
hỗ trợ giao thức này là bắt buộc.
Bảng 5.1: Các cách khác nhau để truyền các tập tin
5.6.2 Thiết lập một Website từ xa với FTP
Bạn cần phải cài đặt thông tin Website từ xa để truyền các tập tin trên máy tính của bạn đến máy chủ.
Để thiết lập một Website từ xa với FTP, trên menu Site, bạn bấm vào Manage Sites. Hộp thoại Manage
Sites sẽ được hiển thị. Tại đây, bạn nhấn vào tên của Website bạn muốn chuyển sang Internet và sau
đó, bạn bấm vào nút Edit. Tiếp theo, trong hộp thoại Site Setup, trong Servers category, bạn bấm vào
nút Add New Server . Màn hình Basic của thể loại Server được hiển thị như được trình bày trong
hình 5.9.
Hình 5.9: Màn hình Basic của thể loại Server
Để thiết lập một Website từ xa mới với FTP, hãy làm theo các bước sau:
¾¾ Chọn phương pháp truy cập từ Connect sử dụng menu bật lên. Việc này xác định phương pháp
sẽ được sử dụng để truyền các tập tin từ thư mục cục bộ sang Internet. Ở đây bạn chọn FTP.
¾¾ Trong trường FTP Address, bạn gõ tên máy chủ của máy chủ FTP nơi bạn tải lên các tập tin cho
Website của bạn. Máy chủ FTP là tên Internet đầy đủ của một hệ thống máy tính, chẳng hạn như
ftp.companyname.com. Bạn nên nhập vào tên máy chủ đầy đủ mà không có thêm bất kỳ văn bản
nào. Đặc biệt, bạn không nên thêm tên giao thức ở phía trước của tên máy chủ.

Phần 5
Kháiniệm
Ghi chú: Nếu bạn không biết máy chủ FTP của bạn, bạn cần phải liên hệ với ISP của bạn.
¾¾ Trong trường Root Directory, bạn nhập vào tên của thư mục gốc trên máy chủ từ xa, nơi bạn sẽ
lưu trữ tất cả các tài liệu thấy được đối với khách truy cập. (Cái này là tùy chọn.)
Ghi chú: Trong hầu hết các trường hợp, máy chủ được cấu hình để tự động định tuyến các
tập tin vào đúng thư mục theo mặc định, trong trường hợp đó trường Root Directory sẽ vẫn còn
trống. Nếu bạn không chắc chắn phải thêm những gì vào trường Root Directory, bạn nên liên
hệ với người quản trị máy chủ.
¾¾ Trong trường Username và Password , bạn nhập vào tên đăng nhập và mật khẩu bắt buộc bạn
sẽ sử dụng để kết nối đến máy chủ FTP. Dreamweaver lưu mật khẩu theo mặc định. Xóa hộp
kiểm Save nếu bạn muốn Dreamweaver nhắc bạn nhập mật khẩu mỗi khi bạn kết nối với máy
chủ từ xa.
Ghi chú: Các trường FTP Address, Username và Password trong tab Basic là bắt buộc và được
giữ bí mật giữa quản trị viên máy chủ và bạn.
¾¾ Bấm vào nút Test để kiểm tra đăng nhập và mật khẩu của bạn.
yy Các tùy chọn sau đây có sẵn trong phần More Options của màn hình Basic:
yy Chọn Use Passive FTP nếu cấu hình tường lửa của bạn đòi hỏi phải sử dụng FTP thụ
động. Nếu bạn không chắc chắn có nên sử dụng tùy chọn này, bạn cần phải tham khảo ý
kiến với quản trị viên hệ thống.
yy Chọn Use IPV6 Transfer Mode nếu bạn muốn sử dụng IP phiên bản 6 làm chế độ truyền.
yy Chọn Use Proxy, as defined in Preference nếu bạn muốn sử dụng máy chủ proxy làm
chế độ truyền.
yy Xóa Use FTP performance optimization nếu Dreamweaver không thể kết nối với máy chủ
của bạn.
yy Chọn Use alternative FTP move method nếu bạn nhận được lỗi khi hủy giao dịch được
kích hoạt hoặc khi di chuyển các tập tin.
5.7 Truyền các tập tin
Sau khi học để xác định một Website từ xa bây giờ bạn sẽ tìm hiểu thực sự bắt đầu truyền các tập tin
vào máy chủ từ xa. Trong Dreamweaver, điều này có thể được thực hiện bằng cách sử dụng bảng điều
khiển Files của Dreamweaver. Có rất nhiều cách bạn có thể truyền các tập tin đến máy chủ từ xa, chẳng
hạn như sử dụng lệnh Get và Put, tùy chọn Check In/Check Out, hoặc kéo tập tin trực tiếp đến Website
từ xa.
Lệnh Get và Put được sử dụng khi bạn xử lý Website một tay, trong khi tùy chọn Check In/Check Out
được sử dụng trong khi bạn đang làm việc trong một môi trường cộng tác.

Phần 5
Kháiniệm
5.7.1 Đưa các tập tin lên máy chủ từ xa
Để đưa các tập tin lên Remote Server, bạn bấm vào tab Files trong bảng điều khiển Files. Sau đó, từ
danh sách thả xuống, bạn chọn Website có các tập tin/thư mục bạn muốn tải lên đó.
Bảng điều khiển Files sẽ hiển thị danh sách các tập tin/thư mục cho Website đã chọn. Nếu bạn đang sử
dụng FTP để truyền các tập tin, bạn có thể bấm vào Connect to remote host button để mở một kết
nối đến máy chủ từ xa làm cho nó có thể cho bạn xem những gì trên Website từ xa trước khi truyền bất
kỳ tập tin nào. Việc bấm vào Connect với máy chủ từ xa là không bắt buộc, bởi vì việc bấm vào Put sẽ
tự động kết nối với máy chủ từ xa. Sau đó, từ bảng điều khiển Files, bạn chọn các tập tin/thư mục để
tải lên máy chủ web. Bạn có thể bấm vào nút Put Files trong bảng điều khiển Files để truyền các tập tin
trực tiếp đến máy chủ. Xem hình 5.10.
Hình 5.10: Nút Put Files

Phần 5
Kháiniệm
Hình 5.11: Tùy chọn Get File(s) and Put File(s) trong bảng điều khiển Files
Trong trường hợp bạn đã không lưu tập tin bạn đang tải lên, sẽ hiển thị hộp thoại yêu cầu bạn lưu tập
tin trước khi tải nó lên máy chủ từ xa. Hộp thoại này sẽ được hiển thị tùy thuộc vào các thiết đặt bạn đặt
trong hộp thoại Preferences.
Hộp thoại sẽ được hiển thị hỏi bạn có tải lên các tập tin phụ thuộc hay không. Bạn bấm vào Yes để
truyền các tập tin phụ thuộc (như hình ảnh) và No để chỉ truyền những tập tin bạn đã chọn. Để tránh bị
hỏi về các tập tin phụ thuộc trong các lần tải lên tiếp theo, bạn bấm vào tùy chọn Don’t Ask Me Again.
Bạn còn có tùy chọn dừng truyền tập tin. Để làm như vậy, bạn bấm vào nút Cancel trên hộp thoại trạng
thái. Dreamweaver ghi lại tất cả các hoạt động truyền FTP. Tất cả các lỗi xảy ra trong khi truyền các tập
tin được ghi lại trong nhật ký FTP. Nếu bạn muốn xác định vấn đề là gì, trên menu View, bạn bấm vào
lệnh Site FTP Log từ bảng điều khiển Site.

Phần 5
Kháiniệm
5.7.2 Lấy các tập tin từ máy chủ từ xa
Để sao chép các tập tin từ Website từ xa vào Website cục bộ của bạn, đầu tiên, trong bảng điều khiển
Site, bạn chọn một Website từ menu bật lên Files. Trong trường hợp bạn đang sử dụng FTP để truyền
các tập tin, khi đó, bạn bấm vào nút Connect để mở một kết nối đến máy chủ từ xa. Nếu kết nối đã được
mở, nó được chỉ định bằng nút Disconnect, khi đó bạn có thể bỏ qua bước này. Nếu các tập tin từ xa
thấy được trong bảng điều khiển Remote từ một kết nối trước đó, bấm vào Connect là không cần thiết,
khi bạn bấm vào Get, Dreamweaver tự động kết nối.
Bây giờ, bạn chọn các tập tin mong muốn để tải về. Thông thường, bạn chọn những tập tin này trong
giao diện Remote hoặc Testing Server, nhưng bạn có thể chọn các tập tin tương ứng trong giao diện
Local nếu bạn thích. Sau đó, trên menu Site, bạn bấm vào lệnh Get. Nếu tập tin hiện tại đang mở trong
cửa sổ Document, bạn cũng có thể bấm vào menu Site và bấm vào lệnh Get từ cửa sổ Document. Khi
thực hiện điều đó, một hộp thoại xuất hiện, hỏi xem bạn muốn nhận các tập tin phụ thuộc hay không. Để
tải về các tập tin phụ thuộc, bạn bấm vào Yes; để bỏ qua chúng, hoặc là bạn bấm vào No, nếu bạn đã
có các bản sao cục bộ của các tập tin phụ thuộc, bạn bấm vào No. Bạn có tùy chọn dừng truyền tập tin
bất cứ lúc nào. Để làm như vậy, bạn bấm vào nút Cancel trong hộp thoại trạng thái. Việc truyền này có
thể không dừng ngay lập tức.
5.7.3 Kiểm nhập/Kiểm xuất: Quản lý Website trong môi trường nhóm
Hệ thống Check In/Check Out rất hữu ích cho các nhà phát triển làm việc trong môi trường cộng tác để
quản lý Website. Hệ thống này mỗi lúc cho phép chỉ có một người làm việc trên một tập tin. Hệ thống này
tránh các thành viên trong nhóm không ghi đè lên những thay đổi của nhau.
¾¾ Chức năng cơ bản
Trong hệ thống Check In/Check Out, tất cả các thành viên trong nhóm phải xác định một Website
trong Dreamweaver. Mỗi thành viên trong nhóm xác định một thư mục gốc cục bộ trên ổ cứng của
mình, và một máy chủ từ xa chung được sử dụng để chia sẻ. Thành viên trong nhóm truy cập các
tập tin bằng cách kiểm xuất chúng ra khỏi máy chủ. Trong khi một thành viên trong nhóm kiểm xuất
một tập tin, các thành viên khác trong nhóm không nên truy cập tập tin đó. Các biểu tượng trong
cửa sổ Site sẽ chỉ ra cho tất cả các thành viên trong nhóm có hay không một tập tin từ máy chủ đã
được kiểm xuất. Một khi một thành viên trong nhóm đã hoàn tất làm việc với tập tin, nó được kiểm
nhập lại và trở lại thành có sẵn cho các thành viên khác trong nhóm.
¾¾ Thiết lập kiểm nhập/kiểm xuất
Đầu tiên bạn phải xác định một Website và chọn các tùy chọn nhất định trong hộp thoại Site
Definition để kích hoạt Check In/Check Out.
¾¾ Thiết lập Website cục bộ
Mỗi thành viên trong nhóm xác định một Website, chỉ định một thư mục trên ổ cứng của hệ thống
máy tính của mình làm Thư mục gốc cục bộ.

Phần 5
Kháiniệm
¾¾ Cài đặt Website từ xa
Trong thể loại Remote Info của hộp thoại Site Definition, các thành viên trong nhóm chỉ ra một thư
mục máy chủ (Thư mục máy chủ để truy cập FTP) hoặc thư mục từ xa (cho quyền truy cập cục bộ/
mạng). Như đã thảo luận trong phần này, tất cả các thành viên trong nhóm sử dụng cùng một thư
mục máy chủ này để chia sẻ các tập tin trong nhóm.
¾¾ Cho phép kiểm nhập/kiểm xuất
Trong bảng điều khiển Files, bạn sẽ tìm thấy hai nút như được trình bày trong hình 5.11 – Get
File(s) và Put File(s). Nút Get File(s) sao chép các tập tin đã chọn từ Website từ xa tới Website
cục bộ của bạn (ghi đè lên bản sao cục bộ hiện có của tập tin, nếu có). Để tạo ra các bản sao cục bộ
chỉ đọc, cho phép hộp kiểm Enable File Check In And Check Out trong thể loại Remote Info của
hộp thoại Site Definition. Ngoài ra, các tập tin vẫn có sẵn trên Website từ xa cho các thành viên
khác trong nhóm kiểm xuất. Để cung cấp đặc quyền đọc và viết cho các bản sao cục bộ, xóa hộp
kiểm Enable File Check In and Check Out. Nút Put File(s) chép các tập tin đã chọn từ Website
cục bộ vào Website từ xa.
¾¾ Kiểm nhập và kiểm xuất các tập tin từ một Website từ xa
Bạn sử dụng bảng điều khiển Files hoặc cửa sổ Document để kiểm nhập và kiểm xuất các tập tin
đến một máy chủ từ xa. Hệ thống Check In/Check Out sử dụng các ký hiệu sau đây trong bảng
điều khiển Site:
yy Dấu kiểm màu xanh lá cho thấy tập tin bạn đã kiểm xuất.
yy Dấu kiểm màu đỏ cho thấy rằng một thành viên khác trong nhóm đã kiểm xuất khỏi tập tin.
yy Biểu tượng khóa cho thấy rằng tập tin là chỉ đọc.
¾¾ Kiểm xuất
Để tải phiên bản mới nhất của tập tin từ máy chủ, người dùng chọn tập tin trong bảng điều khiển
Files và bấm vào nút Check Out . Nếu người dùng khác cố gắng kiểm xuất khỏi tập tin trong khi
nó được kiểm xuất, sẽ có cảnh báo rằng tập tin đang được sử dụng.
¾¾ Kiểm nhập
Sau khi chỉnh sửa tập tin, người dùng có thể bấm vào nút Check In trong bảng điều khiển Files.
Điều này tải lên phiên bản đã chỉnh sửa trên máy chủ. Sau khi nó đã được kiểm nhập, các thành
viên khác trong nhóm được phép kiểm xuất khỏi tập tin.
Ghi chú: Kiểm nhập một tập tin vào máy chủ cũng đặt bản sao cục bộ của tập tin đó vào trạng
thái chỉ đọc. Điều này nhắc nhở người dùng kiểm xuất một tập tin trước khi làm việc trên đó.

Phần 5
Kháiniệm
¾¾ Những cách khác để chuyển các tập tin vào máy chủ web
Trong bảng điều khiển Files bạn cũng có thể kéo tập tin từ thư mục cục bộ tới danh sách Remote Site.
Tuy nhiên, phương pháp này không được khuyến khích vì bạn có thể dễ dàng kéo tập tin vào một
thư mục sai trong Website từ xa và điều này có thể phá vỡ các liên kết trên trang. Tốt hơn là để
Dreamweaver làm việc truyền các tập tin.
¾¾ Truyền tập tin phía sau
Trong khi nhận hoặc đưa các tập tin, bạn có thể thực hiện các hoạt động khác không liên quan đến
máy chủ. Dreamweaver FTP, SFTP, LAN, WebDAV, Microsoft Visual SourceSafe, và RDS hỗ trợ
tất cả các giao thức truyền trên đó việc truyền tập tin phía sau hoạt động.
Có một vài hoạt động liên quan đến máy chủ mà Dreamweaver không thể thực hiện trong quá trình
truyền tập tin. Đó là:
yy Đưa/Nhận/Kiểm nhập/Kiểm xuất các tập tin
yy Hoàn tác kiểm xuất
yy Tạo một kết nối cơ sở dữ liệu
yy Gắn kết dữ liệu động
yy Xem trước dữ liệu trực tiếp
yy Chèn một dịch vụ web
yy Xóa các tập tin hoặc thư mục từ xa
yy Xem trước trong trình duyệt trên máy chủ thử nghiệm
yy Lưu tập tin tới máy chủ từ xa
yy Chèn hình ảnh từ một máy chủ từ xa
yy Mở tập tin từ máy chủ từ xa
yy Tự động đưa các tập tin khi lưu
yy Kéo các tập tin vào Website từ xa
yy Cắt, sao chép hoặc dán các tập tin trên Website từ xa
yy Làm mới giao diện từ xa

Phần 5
Kháiniệm
5.8 Đồng bộ hóa các tập tin Website
Sau khi tạo các tập tin trong các Website cục bộ và từ xa của bạn, bạn có thể đồng bộ hóa các tập tin
giữa hai Website. Lệnh Synchronize đảm bảo rằng phiên bản mới nhất của các tập tin được chuyển đến
và đi từ Website từ xa của bạn.
Nếu Website từ xa của bạn là một máy chủ FTP (chứ không phải là máy chủ được nối mạng), sau đó,
bạn cần phải đồng bộ hóa các tập tin của bạn sử dụng FTP.
Để đồng bộ hóa các tập tin của Website, đầu tiên, trong bảng điều khiển Files, bạn chọn một Website từ
menu bật lên danh sách Current Sites. Sau đó, bạn chọn các tập tin hoặc thư mục cụ thể. Bạn có thể
bỏ qua bước này, trong trường hợp bạn muốn đồng bộ hóa toàn bộ Website. Bây giờ, trong bảng điều
khiển Files, bạn bấm chuột phải vào tên Website hoặc các tập tin đã chọn và sau đó, chọn Synchronize
từ menu ngữ cảnh hoặc bạn cũng có thể bấm vào nút Synchronize trên tab bảng điều khiển Files.
Menu bật lên Synchronize xuất hiện. Tại đây, bạn chọn lệnh Entire ‘Site Name’ Site. Tiếp theo, chọn
hướng theo đó bạn muốn chép các tập tin, bạn có những tùy chọn sau:
¾¾ Bạn có thể tải lên tất cả các tập tin cục bộ với các ngày sửa đổi gần đây liên quan đến các bản
sao từ xa bằng cách chọn lệnh Put Newer Files to Remote.
¾¾ Bạn có thể tải về tất cả các tập tin từ xa với các ngày sửa đổi gần đây liên quan đến các bản sao
cục bộ bằng cách chọn lệnh Get Newer Files From Remote.
¾¾ Bạn có thể đặt các phiên bản gần đây nhất của tất cả các tập tin trên các Website cục bộ cũng
như từ xa bằng cách chọn lệnh Get and Put Newer Files.
Nếu có một số tập tin trên Website đích mà không có các bản tương đương trên Website gốc, bạn có thể
xóa các tập tin đó bằng cách sử dụng tùy chọn Delete. Bạn sẽ không tìm thấy tùy chọn này nếu tùy chọn
Get and Put được chọn trong menu Direction. Việc chọn tùy chọn Put Newer Files to Remote and
Delete sẽ xóa bất kỳ tập tin nào trong Website từ xa của bạn mà không có các tập tin cục bộ tương ứng.
Sau khi chọn hướng mong muốn, bạn bấm vào Preview. Trong trường hợp, đồng bộ hóa là không cần
thiết, trong phần xem trước Synchronize Files, bạn kiểm tra các tập tin bạn muốn xóa, đặt, và nhận
được bằng cách chọn hoặc xóa hộp kiểm thích hợp. Cuối cùng, bạn bấm vào OK. Dreamweaver thực
hiện hoạt động này dựa trên các tùy chọn đã chọn và sau đó, cập nhật hộp thoại cùng với trạng thái. Bạn
có thể lưu thông tin xác minh vào một tập tin cục bộ bằng cách nhấn vào lệnh Save Log.
5.9 So sánh các tập tin
Tùy chọn này so sánh các tập tin được sử dụng khi bạn phải tải một tập tin cụ thể lên máy chủ từ xa, sau
khi chỉnh sửa nó tại chỗ. Ở đây, Dreamweaver sẽ thông báo cho bạn biết liệu phiên bản từ xa của tập tin
đã được thay đổi hay chưa. Vì vậy, tùy chọn này cho phép bạn so sánh hai tập tin và xác minh chúng,
trước khi bạn tải lên các phiên bản từ xa của tập tin.

Phần 5
Kháiniệm
5.9.1 So sánh các tập tin về sự khác biệt
Trong trường hợp có nhiều phiên bản tập tin, so sánh các phiên bản khác nhau của các tập tin là một
nhiệm vụ quan trọng. So sánh các tập tin làm nổi bật những thay đổi trên tập tin và bạn có thể chấp nhận
hoặc từ chối những thay đổi này theo nhu cầu.
Ghi chú: Trước khi bắt đầu, bạn phải cài đặt một công cụ so sánh tập tin trên hệ thống của bạn và chỉ
ra nó trong Dreamweaver.
¾¾ So sánh hai tập tin cục bộ
Bạn có thể so sánh hai tập tin nằm bất cứ nơi nào trên máy tính của bạn. Để làm điều này, trong
bảng điều khiển Files, bạn chọn hai tập tin. Bạn cũng có thể chọn các tập tin bên ngoài Website
đã định nghĩa của bạn.
Để làm điều này, chọn ổ đĩa của bạn từ menu bật lên bên trái trong bảng điều khiển Files và sau
đó, chọn những tập tin này. Sau đó, bạn bấm chuột phải vào một trong những tập tin đã chọn và
bấm vào Compare Local Files từ menu ngữ cảnh. Công cụ so sánh tập tin khởi động và so sánh
hai tập tin.
¾¾ So sánh hai tập tin từ xa
Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh hai tập tin nằm
trên một máy chủ từ xa. Để làm điều này, trong bảng điều khiển Files, hiển thị các tập tin trên máy
chủ từ xa bằng cách chọn Remote View từ menu bật lên bên phải. Sau đó, bạn chọn hai tập tin.
Bạn bấm chuột phải vào một trong những tập tin đã chọn và bấm vào Compare Remote Files từ
menu ngữ cảnh. Công cụ so sánh tập tin khởi động và so sánh hai tập tin.
¾¾ So sánh một tập tin cục bộ với một tập tin từ xa
Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh một tập tin cục
bộ với một tập tin nằm trên máy chủ từ xa của bạn. Để làm điều này, trong bảng điều khiển Files,
bạn bấm chuột phải vào một tập tin cục bộ và bấm vào Compare With Remote từ menu ngữ cảnh.
Công cụ so sánh tập tin khởi động và so sánh hai tập tin.
¾¾ So sánh một tập tin từ xa với một tập tin cục bộ
Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh
một tập tin từ xa với một tập tin cục bộ. Để làm điều này, trong bảng điều khiển
Files, hiển thị các tập tin trên máy chủ từ xa bằng cách chọn Remote View từ menu
bật lên bên phải. Sau đó, bạn bấm chuột phải vào một tập tin trong bảng điều khiển và chọn
Compare with Local từ menu ngữ cảnh.

Phần 5
Kháiniệm
5.9.2 Thử nghiệm Website
Website phải được thử nghiệm cục bộ trước khi tải lên trên máy chủ. Bạn nên đảm bảo rằng các trang
xem trước như mong đợi trong các trình duyệt mục tiêu, tất cả các liên kết hoạt động tốt như mong đợi,
và thời gian tải về cho các trang ngắn. Các bản báo cáo Website thường rất hữu ích để kiểm tra và khắc
phục sự cố Website. Sau đây là hướng dẫn thử nghiệm nhanh chóng:
¾¾ Đảm bảo rằng các trang hoạt động tốt trong các trình duyệt mục tiêu.
¾¾ Xem trước các trang của bạn trong các trình duyệt và nền tảng khác nhau.
¾¾ Kiểm tra Website của bạn về các liên kết bị hỏng và sửa chữa chúng.
¾¾ Đảm bảo rằng kích thước tập tin không quá lớn và kết quả là thời gian tải về không quá dài.
¾¾ Chạy một vài báo cáo Website để kiểm tra và khắc phục sự cố toàn bộ Website.
¾¾ Xác nhận mã của bạn để xác định vị trí các lỗi thẻ hoặc cú pháp.
¾¾ Cập nhật và duy trì Website sau khi nó được công bố.
Bạn có thể chạy các báo cáo Website trong tiến trình công việc hoặc các thuộc tính HTML. Bạn cũng
có thể sử dụng lệnh Reports từ menu Site để kiểm tra các liên kết trong Website của bạn. Khi làm việc
trong một nhóm, báo cáo tiến trình công việc đóng một vai trò quan trọng trong việc để các thành viên
trong nhóm biết ai đã kiểm xuất khỏi một tập tin, các tập tin nào có Ghi chú thiết kế liên quan đến chúng,
và các tập tin nào đã được sửa đổi gần đây. Để chạy các báo cáo để kiểm tra một Website, trên menu
Site, bạn bấm vào lệnh Reports. Hộp thoại Reports xuất hiện như được trình bày trong hình 5.12. Sau
đó, bạn chọn những gì cần báo cáo từ menu bật lên Report on và đặt bất kỳ loại báo cáo nào để chạy
(Workflow hay HTML). Nếu bạn chọn Selected Files trong Website từ menu Report on, đầu tiên bạn
nên chọn các tập tin trong bảng điều khiển Files. Nếu bạn đã chọn báo cáo tiến trình công việc, bấm vào
Report Settings và chỉ ra những tùy chọn này.

Phần 5
Kháiniệm
Hình 5.12: Hộp thoại Reports

Phần 5
Kháiniệm
¾¾ Tính năng Browser Compatibility Check (Kiểm tra khả năng tương thích trình duyệt)
giúp bạn xác định vị trí kết hợp của HTML và CSS có thể kích hoạt các lỗi tái tạo của
trình duyệt.
¾¾ Trong khi tạo ra một trang web, có thể có nhiều liên kết bị hỏng cần được phát hiện ra
và được khắc phục. Nếu điều này không được quan tâm, nó sẽ chỉ gây nhầm lẫn cho
những người làm việc trên Website.
¾¾ Trình duyệt đã chọn xác định danh sách các sự kiện cho một phần tử trang cụ thể.
¾¾ Tính năng Link Checker là một công cụ mạnh mẽ sử dụng công cụ này bạn có thể kiểm
tra các liên kết trong một trang web đơn lẻ, các trang web đã chọn, hoặc trong toàn bộ
Website.
¾¾ Tính năng Kiểm tra các trình duyệt mục tiêu kiểm tra mã HTML trong tài liệu của bạn
để xem có bất kỳ thẻ hoặc thuộc tính nào không được hỗ trợ bởi các trình duyệt mục
tiêu.
¾¾ Các trang web khi thử nghiệm được chuyển đến máy chủ web, do đó được kết nối với
Internet.
¾¾ Dreamweaver cho phép bạn đặt sở thích nhắc bạn cung cấp thông tin khả năng tiếp
cận khi bạn đang xây dựng trang web.
¾¾ Các trường FTP Host, Login và Password là bắt buộc và được giữ bí mật giữa máy
chủ, quản trị viên máy chủ và bạn.
¾¾ Tùy chọn So sánh tập tin được sử dụng khi bạn đã chỉnh sửa một tập tin cụ thể tại chỗ
của bạn và sau đó, cố gắng tải nó lên máy chủ từ xa của bạn.
Tóm tắt

Phần 5
Kháiniệm
1. Dấu chọn ____________ trong hệ thống Kiểm nhập/Kiểm xuất cho thấy một tập tin đã
kiểm xuất.
a. Xanh lá
b. Đỏ
c. Cam
d. Vàng
2. Dreamweaver không hiển thị báo cáo về các liên kết bị hỏng.
a. Đúng
b. Sai
3. ____________ ghi lại văn bản xuất hiện trên màn hình máy tính và nhận biết thông tin
không phải là văn bản.
a. Điều hướng bàn phím
b. Trình viết màn hình
c. Trình đọc màn hình
d. Trình báo cáo màn hình
4. Trong Dreamweaver CS5, mỗi khi bạn chèn hình ảnh vào cửa sổ Document, bạn sẽ được
nhắc nhập vào trường ______________.
a. Văn bản có thể truy cập
b. Mô tả
c. Văn bản thay thế
d. Mô tả dài
5. Bạn cần phải cài đặt thông tin Website từ xa để truyền các tập tin trên máy tính của bạn đến
máy chủ.
a. Đúng
b. Sai
6. Hệ thống ___________ cho phép chỉ có một người làm việc trên một tập tin tại một thời
điểm và ngăn các thành viên trong nhóm không ghi đè lên những thay đổi của nhau.
a. Get and Put
b. Check In/Check Out
c. Synchronize
d. Compare Files

Phần 5
Kháiniệm
1. Thử trang web của bạn bằng cách chạy kiểm tra khả năng tương thích của trình duyệt.
Gợi ý:
a. Truy cập bảng điều khiển Browser Compatibility Check (BCC).
2. Kiểm tra các liên kết trong trang web của bạn.
Gợi ý:
a. Truy cập vào bảng điều khiển Link Checker.

“
“Tương lai phụ thuộc hoàn toàn vào
những gì bạn cho đi đến nay.

Làm việc với
các Website động6
Phần
Kháiniệm
Mục tiêu
¾¾ Áp dụng các công cụ mô hình máy chủ khác nhau được Dreamweaver CS5 hỗ trợ
¾¾ Thiết lập Dreamweaver cho Website động
¾¾ Kết nối Dreamweaver vào cơ sở dữ liệu
¾¾ Tạo ra các trang động
¾¾ Xem dữ liệu trực tiếp trong Dreamweaver
¾¾ Hiển thị dữ liệu XML trong các trang web
¾¾ Xây dựng một trang web được bảo vệ bằng mật khẩu
¾¾ Sử dụng Adobe Bridge và Adobe Device Central
¾¾ Thiết kế đa màn hình với HTML5
6.1 Giới thiệu
Trong phiên giao dịch trước, bạn đã học được các loại danh sách kiểm tra khác nhau để ra mắt một
Website. Bạn cũng đã học được cách thử nghiệm các trang web về khả năng tương thích với các trình
duyệt khác nhau, xác nhận chúng, tìm kiếm, và sửa chữa các liên kết bị hỏng trong chúng, thử nghiệm
các trang web về khả năng tiếp cận, định nghĩa Website từ xa, và truyền các tập tin.
Trong phần này, bạn sẽ học cách để tạo ra một Website động. Bạn cũng sẽ tìm hiểu về các mô hình máy
chủ khác nhau được Dreamweaver CS5 hỗ trợ và cách định nghĩa một máy chủ thử nghiệm. Bạn sẽ tìm
hiểu những điều cơ bản của cơ sở dữ liệu và tập bản ghi và cách để kết nối với một cơ sở dữ liệu, xem
dữ liệu trực tiếp, và bảo vệ các trang web sử dụng mật khẩu.
6.2 Mô hình máy chủ trong Dreamweaver
Dreamweaver có sự hỗ trợ dựng sẵn cho PHP và MySQL. Các phiên bản trước của Dreamweaver hỗ trợ
ASP, JSP, và ColdFusion. Cuối cùng nó cung cấp một công cụ đơn giản để nhanh chóng xây dựng các
Website định hướng cơ sở dữ liệu sử dụng hai công nghệ mã nguồn mở được hỗ trợ rộng rãi: PHP và
MySQL. Bây giờ bạn sẽ tìm hiểu một vài mô hình máy chủ được Dreamweaver hỗ trợ.

Phần 6
Làm việc với các Website động
Kháiniệm
6.2.1 Active Server Pages (ASP)
ASP là một công cụ mạnh mẽ để tạo ra các ứng dụng web động định hướng cơ sở dữ liệu và tương tác.
Để chạy các trang ASP trong hệ điều hành Windows, bạn cần những điều sau đây:
¾¾ Microsoft Internet Information Services (IIS), đi kèm với Windows NT Server, Windows 2000, và
Windows XP Professional.
¾¾ Microsoft Personal Web Server (PWS), là phiên bản thu nhỏ của IIS chạy trong Windows 98 và
NT Workstation.
¾¾ Sun Chili Soft ASP, các phiên bản của nó chạy trên Windows, Linux, Solaris, và các nền tảng
khác.
Để chạy các trang ASP trong hệ điều hành Macintosh, bạn cần phải kết nối với một máy tính Windows
và sử dụng nó làm Máy chủ thử nghiệm trong định nghĩa Website Dreamweaver.
6.2.2 Cold Fusion (CF)
ColdFusion là công cụ giúp các lập trình viên tạo ra một ứng dụng web truy cập cơ sở dữ liệu. ColdFusion
là một tập hợp các thẻ HTML ‘mở rộng’ được gọi là ColdFusion Markup Language (CFML - Ngôn ngữ
đánh dấu ColdFusion). Để chạy các trang ColdFusion, bạn cần có máy chủ ứng dụng ColdFusion. Máy
chủ này có sẵn cho các hệ thống Windows, Linux, Solaris, và HP-UX.
Bạn có thể định nghĩa các biến máy chủ ColdFusion như sau:
¾¾ Biến máy khách: Biến này kết hợp dữ liệu với một máy khách cụ thể. Khi người dùng di chuyển
từ một trang (hoặc phần) đến một trang (hoặc phần) khác trong ứng dụng, các biến máy khách
duy trì trạng thái ứng dụng. Ở đây, một tính năng được gọi là ‘Trạng thái duy trì’ bảo tồn thông tin
từ trang này sang trang khác (hoặc phần này sang phần khác) để ứng dụng ghi nhớ người dùng,
và sự lựa chọn và sở thích trước đây của người dùng.
¾¾ Biến cookie: Biến này truy cập các tập tin cookie được truyền đến máy chủ của trình duyệt.
¾¾ Các biến CGI: Biến này cung cấp thông tin về máy chủ đang chạy ColdFusion, trình duyệt yêu
cầu một trang, và các thông tin khác về môi trường xử lý.
¾¾ Biến máy chủ: Biến này có thể được truy cập bởi tất cả các máy khách và ứng dụng trên máy
chủ. Chúng vẫn tồn tại cho đến khi máy chủ được dừng lại.
¾¾ Biến cục bộ: Biến này được tạo ra với thẻ CFSET hoặc thẻ CFPARAM trong trang ColdFusion.

Phần 6
Kháiniệm
6.2.3 Trình xử lý siêu văn bản
PHP (Hypertext Preprocessor) là ngôn ngữ lập trình được sử dụng để tạo ra các Website có tính tương
tác động. Để chạy các trang PHP, bạn cần máy chủ ứng dụng PHP, là một phần mềm mã nguồn mở có
sẵn trên web. Các phiên bản của máy chủ ứng dụng tồn tại cho các hệ thống Windows, Linux, UNIX,
HP-UX, Solaris, và Mac OS X.
Máy chủ ứng dụng làm việc với bất kỳ của các máy chủ web, cụ thể là các máy chủ Apache, Microsoft
IIS hoặc PWS, Netscape và iPlanet, và gần như tất cả các máy chủ web có hỗ trợ Common Gateway
Interface (CGI).
6.3 Thiết lập Dreamweaver
Bạn cần chỉ ra nơi các trang web động sẽ được xử lý trong khi bạn đang làm việc trên các trang web.
Dreamweaver sử dụng nơi này để hiển thị các trang động và kết nối với cơ sở dữ liệu trong khi bạn làm
việc. Vì vậy, trong khi làm việc, bạn có thể tạo ra một máy chủ thử nghiệm để lưu trữ và xem trước các
trang động đang tiến hành, một máy chủ web thực sự, máy chủ ứng dụng, và cơ sở dữ liệu đang chạy
trên máy tính của bạn. Sau khi hoàn thành công việc bạn có thể chuyển các tập tin vào máy chủ từ xa
bằng cách sử dụng tính năng FTP của Dreamweaver.
6.3.1 Thiết lập một máy chủ thử nghiệm
Để chạy các ứng dụng web, máy chủ web cần phải làm việc với máy chủ ứng dụng, giúp máy chủ web
xử lý các trang web được đánh dấu đặc biệt. Khi một trang như vậy được yêu cầu, máy chủ web sẽ gửi
trang này đến máy chủ ứng dụng để xử lý trước khi gửi trang đến trình duyệt. Đối với các trang động,
máy chủ thử nghiệm tạo ra và hiển thị nội dung động. Máy chủ thử nghiệm có thể là máy tính của bạn,
một máy chủ phát triển, một máy chủ dịch chuyển, hoặc một máy chủ sản xuất.
Các máy chủ ứng dụng phổ biến bao gồm Macromedia ColdFusion MX, Macromedia JRun, Microsoft
.NET Framework, PHP, IBM WebSphere, và Jakarta Tomcat. Microsoft IIS và PWS còn hoạt động như
máy chủ ứng dụng ASP. Máy chủ ứng dụng thường được cài trên cùng hệ thống chạy máy chủ web.
Bạn có thể duyệt các tập tin HTML tĩnh trên máy tính của bạn mà không cần bất kỳ phần mềm đặc biệt
nào, nhưng trang động yêu cầu máy chủ web và cơ sở dữ liệu. Nếu bạn đang sử dụng Windows 2000
hoặc Windows XP Professional, bạn phải cài đặt IIS trên máy tính của bạn.
Sau khi cài đặt IIS, mở trình duyệt web và gõ http://localhost/ vào thanh địa chỉ. Bạn thấy một trang mặc
định cho máy chủ web, mà là một trang chào đón IIS chung. Thư mục gốc cho máy chủ web mới của bạn
là C:Inetpubwwwroot trên máy tính của bạn.
Ghi chú: PWS bắt buộc phải được cài đặt trong trường hợp bạn đang sử dụng Windows 98.
Để thiết lập một máy chủ thử nghiệm, trên menu Site, bấm vào Manage Sites. Sau đó, bấm vào New để
thiết lập một Website mới, hoặc chọn một Website Dreamweaver hiện có và bấm vào Edit.

Phần 6
Kháiniệm
Trong hộp thoại Site Setup, chọn thể loại Servers và thực hiện một trong các cách sau:
¾¾ Bấm vào nút Add New Server để thêm một máy chủ mới.
¾¾ Chọn một máy chủ hiện có và bấm vào nút Edit Existing Server.
¾¾ Sau đó, bạn chỉ ra các tùy chọn Basic khi cần thiết, và sau đó, bấm vào nút Advanced.
Ghi chú: Bạn phải chỉ ra một địa chỉ web trong màn hình Cơ bản khi chỉ ra một máy chủ thử nghiệm.
Trang tab Advanced, dưới Testing Server, chọn đời máy chủ bạn muốn để sử dụng cho ứng dụng web
của bạn.
Ghi chú: Các hành vi máy chủ ASP.NET, ASP JavaScript, hoặc JSP hành vi máy chủ không được tán
thành trong Dreamweaver CS5. Tuy nhiên, Dreamweaver hỗ trợ giao diện Live, tô màu mã, và gợi ý
mã cho những trang này.
Cuối cùng, bấm vào Save để đóng màn hình Advanced. Sau đó, trong thể loại Servers, chỉ ra máy chủ
vừa mới thêm hoặc chỉnh sửa làm máy chủ thử nghiệm.
6.3.2 Thiết lập một Website mới
Bây giờ, bạn sẽ học cách tạo ra các trang web động, sẽ cho phép khách truy cập nhập các chi tiết yêu
cầu thông tin trực tuyến. Bạn cũng sẽ tìm hiểu để xem các bản ghi từ cơ sở dữ liệu mà khách truy cập
đã vào.
Về điều này, đầu tiên, tạo ra bất kỳ thư mục nào trong thư mục gốc của máy chủ web mới được cài đặt, đó là
C:Inetpubwwwroot (giả định rằng ổ đĩa chính của máy tính Windows là ổ C:). Đây sẽ là thư mục gốc
cho Website nơi mà tất cả các tập tin mà bạn tạo ra sẽ được lưu trữ.
Để đảm bảo rằng thiết lập là đúng, bạn tạo ra bất kỳ trang kiểm tra ASP nào trong thư mục gốc và sau
đó, mở trình duyệt web và gõ http://localhost/rootfoldername/testpagename vào thanh địa chỉ. Nếu
trang web xuất hiện, máy chủ web được thiết lập đúng. Bạn có thể định nghĩa một Website mới cho các
trang động và chỉ ra nơi Dreamweaver có thể để các trang động được xử lý. Để định nghĩa một Website
mới, trên menu Site, bấm vào New Site. Hộp thoại Site Setup sẽ được hiển thị như được trình bày trong
hình 6.1. Trong hộp văn bản Site Name, nhập vào tên của Website. Trong thư mục Local Site, chỉ ra tên
của thư mục trên ổ đĩa của bạn, nơi bạn lưu trữ các tập tin, các mẫu, và các mục thư viện cho Website.
Bấm vào biểu tượng thư mục để duyệt đến thư mục.

Phần 6
Kháiniệm
Hình 6.1: Hộp thoại Site Setup (cho Website chưa đặt tên)
Bây giờ bạn cần phải định nghĩa các thiết đặt kết nối cho máy chủ mới được tạo ra. Để làm điều này,
nhấn vào thể loại Servers.

Phần 6
Kháiniệm
Màn hình Basic xuất hiện như được trình bày trong hình 6.2.
Trong hộp văn bản Server Name, chỉ ra tên cho máy chủ mới. Sau đó, chọn FTP từ menu bật lên
Connect using. Trong hộp văn bản FTP Address, ghi rõ tên Internet đầy đủ của một máy tính nơi bạn
tải lên các tập tin cho Website. Bạn sẽ thấy rằng Port 21 là cổng mặc định để nhận các kết nối FTP. Bạn
có thể chỉ ra một số cổng khác trong hộp văn bản. Sau đó, chỉ ra Username và Password được sử dụng
để kết nối đến máy chủ FTP. Để kiểm tra địa chỉ FTP cụ thể, tên người dùng và mật khẩu, nhấn vào nút
Test. Để tránh lưu mật khẩu, xóa hộp kiểm Save.
Sau đó, trong hộp văn bản Root Directory, chỉ ra thư mục trên máy chủ từ xa, nơi bạn lưu trữ các tài liệu
thấy được cho công chúng. Trong trường hợp, bạn không biết tên thư mục, bạn có thể để trống trường
này. Trong hộp văn bản Web URL, chỉ ra URL của Website của bạn. URL này sẽ được Dreamweaver sử
dụng để tạo ra các liên kết liên quan đến gốc của Website, và để xác minh các liên kết khi bạn sử dụng
bộ kiểm tra liên kết.
Mở rộng phần More Options. Bạn có thể chọn các tùy chọn sau đây theo yêu cầu:
¾¾ Use Passive FTP: Chọn tùy chọn này nếu cấu hình tường lửa của bạn đòi hỏi phải sử dụng FTP
thụ động.
¾¾ Use IPv6 Transfer Mode: Chọn tùy chọn này nếu bạn đang sử dụng máy chủ FTP hỗ trợ IPv6.
¾¾ Use Proxy: Chọn tùy chọn này nếu bạn muốn chỉ ra một máy chủ proxy hoặc cổng proxy.
Khi bạn đã làm xong việc cài đặt màn hình Basic, bấm vào Save để đóng màn hình Basic.

Phần 6
Kháiniệm
Website mới xuất hiện trong hộp thoại Site Setup như được trình bày trong hình 6.3.
Hình 6.3: Hộp thoại Site Setup
Sau đó, trong thể loại Servers, chỉ ra máy chủ bạn vừa mới thêm có phải là máy chủ từ xa, máy chủ thử
nghiệm, hay cả hai.
6.3.3 Khái niệm cơ bản về cơ sở dữ liệu
Cơ sở dữ liệu là tập hợp các sự kiện có tổ chức về một chủ đề cụ thể. Đó là cách để tổ chức một lượng
lớn dữ liệu để nó có thể được truy cập, phân tích và cập nhật dễ dàng.
Cơ sở dữ liệu thủ công, như là sổ địa chỉ hay thẻ chỉ mục, đòi hỏi thời gian và công việc tẻ nhạt. Hãy
tưởng tượng nếu công ty của bạn có hơn một ngàn khách hàng và/hoặc các nhà cung cấp để theo dõi.
Để truy cập hoặc cập nhật một thẻ cụ thể mà bạn sẽ phải định vị tập tin hoặc thẻ một cách thủ công và
sau đó, thực hiện thay đổi.
Cơ sở dữ liệu về mặt điện tử tương đương với cơ sở dữ liệu thủ công. Nó cho phép bạn tổ chức các sự
kiện và duy trì dữ liệu bằng điện tử. Cơ sở dữ liệu điện tử cho phép bạn truy cập và cập nhật thông tin
một cách nhanh chóng và dễ dàng. Để cập nhật một bản ghi trong cơ sở dữ liệu, gọi lên số mục và thực
hiện các thay đổi.
Sau đây là hai loại cơ sở dữ liệu:
¾¾ Bảng và bản ghi: Cơ sở dữ liệu bảng và bản ghi bao gồm các dữ liệu được lưu trữ trong một
bảng như các hàng và cột. Dữ liệu trong một hàng được gọi là một bản ghi trong khi dữ liệu trong
cột được gọi là trường. Cấu trúc của bảng định nghĩa loại dữ liệu được lưu trữ trong đó. Bảng có
thể lưu trữ dữ liệu như các chuỗi ký tự, số, số thập phân, ngày, và cả hình ảnh, được chỉ ra tại
thời điểm bảng được xây dựng.

Phần 6
Kháiniệm
Dữ liệu có thể được lưu trữ trong các bảng theo một cách có quan hệ để cho một mối quan hệ
được thiết lập giữa các bản ghi đã nhập vào. Mối quan hệ giữa các bản ghi đã mô tả phải là cùng
loại.
¾¾ Cơ sở dữ liệu quan hệ: Cơ sở dữ liệu quan hệ là một tập hợp thông tin có cấu trúc liên quan
đến một chủ đề hoặc mục đích cụ thể, như là cơ sở dữ liệu về thông tin sinh viên hoặc cơ sở dữ
liệu nguồn nhân lực. Bạn sử dụng các cơ sở dữ liệu để quản lý thông tin. Thông tin, như là mã
học viên, tên học viên, số đăng ký, chi tiết khóa học, và trung tâm được lưu trữ trong cơ sở dữ
liệu. Trong cơ sở dữ liệu, tổ chức dữ liệu vào các bộ chứa lưu trữ được gọi là bảng. Bảng được
tạo ra từ các cột và hàng. Cột thể hiện các trường riêng lẻ trong một bảng. Hàng thể hiện các
bản ghi dữ liệu trong một bảng. Bạn có thể nghĩ rằng bảng cơ sở dữ liệu là lưới, như được trình
Hình 6.4: Cơ sở dữ liệu và bảng tập bản ghi hiển thị thông tin học viên
Mỗi trường trong bảng có chứa một mẩu thông tin. Trong một bảng học viên, ví dụ, một cột chứa
mã và một cột chứa tên học viên. Số đăng ký, chi tiết khóa học, và trung tâm đều được lưu trữ
trong các cột riêng. Mỗi bản ghi thể hiện một tập hợp các thông tin liên quan. Ví dụ, bảng học viên
có thể lưu trữ thông tin về một học sinh trong mỗi hàng. Số lượng hàng trong bảng thể hiện tổng số
bản ghi của bảng. Một tập hợp con của dữ liệu lấy từ bảng được gọi là một tập bản ghi. Tập bản
ghi cũng là bảng bởi vì nó chứa các cột từ chính bảng đó. Để truy xuất một tập bản ghi, bạn chạy
truy vấn cơ sở dữ liệu. Bạn có thể chỉ ra trong truy vấn, cột nào cần phải được đưa vào. Ví dụ, từ
bảng học viên, bạn có thể lấy các bản ghi chỉ mã học viên và chi tiết khóa học trong tập bản ghi
như được trình bày trong hình 6.4.
6.3.4 Kết nối cơ sở dữ liệu
Sau khi bạn tạo ra một cơ sở dữ liệu cho ứng dụng web trong Dreamweaver CS5, bạn cần phải đầu tiên
kết nối với nó. Kết nối này sẽ nói cho ứng dụng cơ sở dữ liệu nằm ở đâu và làm thế nào để kết nối với
nó.
Tại đây, bạn sẽ học cách tạo ra một kết nối đến cơ sở dữ liệu. Đối với điều này, trước tiên bạn cần phải
học cách để tạo ra Tên nguồn dữ liệu (DSN).
¾¾ Thiết lập DSN trong Windows
DSN là một loại phím tắt của cửa sổ bạn có thể sử dụng để thiết lập kết nối cơ sở dữ liệu. Trước
khi sử dụng nó, bạn phải cài đặt nó trên máy tính của bạn hoặc máy chủ từ xa. Ở đây bạn sẽ giả
định rằng cơ sở dữ liệu nằm trên một hệ thống hỗ trợ Tên nguồn dữ liệu (DSN) của Open Database
Connectivity (ODBC - Khả năng kết nối cơ sở dữ liệu mở), như là Microsoft Windows và Windows
NT nhưng không phải Macintosh.
Để tạo ra DSN, bạn mở Control Panel và chọn tùy chọn DataSources (ODBC). (Điều này là hợp
lệ cho Windows 98, NT, và 2000).

Phần 6
Kháiniệm
Hộp thoại ODBC Data Source Administrator xuất hiện. Bây giờ, bạn bấm vào tab System DSN.
Khi làm như vậy, danh sách của các DSN hiện đã cài đặt sẽ được hiển thị.
Nếu bạn muốn tạo ra một DSN mới, bạn bấm vào nút Add. Hộp thoại Create New Data Source sẽ
xuất hiện như được trình bày trong hình 6.5. Ở đây, trong Select a driver bạn muốn thiết lập một
nguồn dữ liệu, chọn một trình điều khiển từ danh sách các trình điều khiển được hiển thị trong cột
tên của hộp thoại. Cuối cùng, bấm vào Finish. ODBC Microsoft Access Setup sẽ được hiển thị như
Hình 6.5: Hộp thoại Create New Data Source
Hình 6.6: Hộp thoại ODBC Microsoft Access Setup

Phần 6
Kháiniệm
Trong hộp thoại này, nhập tên của DSN trong trường Data Source Name. Sau đó, bấm vào Select. Khi
làm như vậy, Select Database sẽ xuất hiện. Ở đây, chọn cơ sở dữ liệu. Như vậy, bạn đã chỉ ra các cửa
sổ để biết nó sẽ sử dụng cơ sở dữ liệu nào.
Bây giờ, bấm vào OK để thoát khỏi cài đặt Access. DSN mà bạn đã tạo ra sẽ được hiển thị trong danh
sách System DSN. Một lần nữa, bấm vào OK để thoát khỏi hộp thoại.
6.3.5 Kết nối Dreamweaver với cơ sở dữ liệu
Sau khi tạo một DSN, bạn cần phải kết nối Dreamweaver với cơ sở dữ liệu. Đối với điều này, bạn có thể
mở bất kỳ tài liệu nào hoặc một tài liệu trống, từ đó kết nối được lưu trữ với Website và không với bất kỳ
trang cụ thể nào.
Bạn có thể kết nối Dreamweaver với cơ sở dữ liệu sử dụng các kết nối DNS từ xa như sau:
1. Định nghĩa DSN và mở một trang, hãy để chúng tôi nói mở một trang ASP trong Dreamweaver.
2. Trên menu Window, bấm vào lệnh Databases. Khi làm như vậy, trong bảng điều khiển Databases,
tất cả các kết nối được định nghĩa cho Website sẽ xuất hiện.
3. Bấm vào nút Plus (+) trên bảng điều khiển và chọn Data Source Name (DSN) từ menu.
4. Nhập tên cho kết nối mới, không có dấu cách hoặc ký tự đặc biệt.
5. Chọn Using DSN On Testing Server.
6. Nhập DSN hoặc bấm vào nút DSN để kết nối với máy chủ và chọn DSN cho cơ sở dữ liệu bạn
muốn, sau đó, hoàn tất các tùy chọn.
7. Điền đầy đủ hộp User Name và Password.
8. Bạn có thể hạn chế số lượng các mục cơ sở dữ liệu Dreamweaver lấy tại thời gian thiết kế bằng
cách bấm vào Advanced và bước vào một sơ đồ hoặc tên danh mục.
9. Bấm vào Test để kết nối với cơ sở dữ liệu, và sau đó, bấm vào OK.
Kết nối sẽ được thêm vào danh sách kết nối dưới bảng điều khiển Databases. Bạn có thể tạo ra kết nối
với các cơ sở dữ liệu khác nhau cho cùng một Website. Một kết nối thường là đủ vì hầu hết các dữ liệu
của bạn có thể được lưu trữ trong một cơ sở dữ liệu.
Trong thư mục gốc của Website, thư mục có tên Connections được tạo ra. Dreamweaver còn tạo ra một
tập tin nhỏ được viết bằng ngôn ngữ lập trình theo mô hình của máy chủ đã chọn và được đặt tên theo
tên kết nối bạn đã nhập ở bước 6.
6.4 Tạo ra các trang web động
Sau khi thiết lập một máy chủ ứng dụng và cơ sở dữ liệu, bây giờ bạn đã sẵn sàng để lấy thông tin và
hiển thị nó trên trang web. Trước tiên, bạn cần phải thiết kế trang để hiển thị thông tin cơ sở dữ liệu.

Phần 6
Kháiniệm
6.4.1 Tạo ra một trang động
Để tạo ra trang động, đầu tiên, trên menu File, nhấn vào lệnh New để mở một tài liệu mới. Sau đó, bấm
vào Blank Page. Chọn một loại trang động, như là ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.
NET VB, ColdFusion, ColdFusion Component, JSP, hoặc PHP từ danh sách Page Type. Bấm vào
Create. Tiếp theo, trên menu File, bấm vào lệnh Save. Trong hộp thoại Save As, gõ tên tập tin và chọn
tùy chọn Save As type thích hợp.
Dreamweaver sẽ tự động thêm phần mở rộng có liên quan: .asp cho ASP,.cfm cho ColdFusion, và
.php cho các trang PHP. Bạn có thể sử dụng bất kỳ công cụ xây dựng trang, như là các bảng, các mục
thư viện, và CSS để thiết kế trang. Trang động này sẽ chứa mã lập trình phía máy chủ cho phép trang
tương tác với cơ sở dữ liệu.
6.4.2 Lấy thông tin
Cơ sở dữ liệu bao gồm rất nhiều thông tin và bạn cần một cách để bạn có thể lấy chỉ những bản ghi mà
bạn muốn. Ví dụ, ngay cả khi bạn đã tạo ra bảng có chứa thông tin học viên như là tên học viên, địa chỉ,
khóa học đã lựa chọn và vân vân, bạn có thể chỉ cần thông tin về tên và địa chỉ của học viên ở một thời
điểm cụ thể.
6.4.3 Tập bản ghi
Tập bản ghi, còn được gọi là truy vấn cơ sở dữ liệu, được sử dụng để lấy thông tin cụ thể từ cơ sở dữ
liệu. Nó chỉ hiển thị những thông tin bạn muốn xem.
¾¾ Tạo ra một tập bản ghi
Bây giờ bạn sẽ tạo ra một tập bản ghi để chọn dữ liệu mà bạn muốn hiển thị. Tập bản ghi là một tập
hợp con thông tin từ một cơ sở dữ liệu bằng một truy vấn cơ sở dữ liệu. Truy vấn cơ sở dữ liệu bao
gồm các tiêu chí tìm kiếm định nghĩa những gì được đưa vào trong tập bản ghi. Sau đó bạn có thể
sử dụng thông tin được trích xuất làm nguồn nội dung từ các trang động của bạn. Dreamweaver
cung cấp một giao diện dễ sử dụng để tạo ra các truy vấn SQL đơn giản. Thậm chí nếu bạn không
biết SQL, bạn có thể dễ dàng tạo ra một tập bản ghi trong Dreamweaver. Bạn cũng có thể tạo ra
một tập bản ghi chọn tất cả các giá trị của bảng được tạo ra trong cơ sở dữ liệu.
Bạn có thể tạo ra một tập bản ghi chọn tất cả các giá trị từ bảng được tạo ra trong cơ sở dữ liệu.
Để làm như vậy, trên tab Application của thanh Insert, bấm vào nút Recordset, hoặc, trên menu
Window, chọn lệnh Bindings để mở bảng điều khiển Bindings. Tiếp theo, trong bảng điều khiển
Bindings, bấm vào nút cộng + và chọn tùy chọn Recordset (Query).

Phần 6
Kháiniệm
Hộp thoại Recordset sẽ được hiển thị như được trình bày trong hình 6.7.
Hình 6.7: Hộp thoại Recordset
Bây giờ, trong trường văn bản Name, gõ tên cho tập bản ghi. Bạn có thể thêm tiền tố rs vào tên tập bản
ghi, ví dụ: rsFeedback. Tiền tố này sẽ giúp phân biệt các tập bản ghi từ tên đối tượng khác trong đoạn
mã.
Ghi chú: Tránh sử dụng các ký tự đặc biệt hoặc dấu cách trong tên tập bản ghi. Tên tập bản ghi chỉ có
thể chứa chữ cái, số, và ký tự gạch dưới ‘_’.
Sau đó, từ menu thả xuống Connection, chọn kết nối mà bạn đã tạo ra cho cơ sở dữ liệu đó. Trong
trường hợp không có kết nối nào xuất hiện trong danh sách, bấm vào Define để tạo ra một kết nối.
Tiếp theo, trong danh sách thả xuống Table, chọn bảng cơ sở dữ liệu sẽ cung cấp dữ liệu cho tập bản
ghi. Menu Table hiển thị tất cả các bảng trong cơ sở dữ liệu đã chỉ định. Để chỉ đưa vào một vài cột của
bảng trong Recordset, chọn lại Selected đối với tùy chọn Columns và sau đó, nhấn phím Ctrl để chọn
cột mong muốn từ danh sách.
Hộp thoại Recordset còn cung cấp cho bạn tùy chọn để chỉ đưa vào một số bản ghi từ bảng. Để sử dụng
phần Filter, hãy làm như sau:
¾¾ Để so sánh một cột dữ liệu so với giá trị kiểm tra đã định nghĩa, từ danh sách thả xuống đầu tiên,
chọn một cột trong bảng cơ sở dữ liệu.
¾¾ Để so sánh giá trị đã chọn trong mỗi bản ghi so với giá trị kiểm tra, từ danh sách thả xuống thứ
hai, chọn một biểu thức điều kiện.
¾¾ Từ danh sách thả xuống thứ ba, chọn Entered Value.

Phần 6
Kháiniệm
¾¾ Tiếp theo, trong hộp văn bản, nhập giá trị kiểm tra. Nếu giá trị cụ thể trong bản ghi đáp ứng điều
kiện lọc của bạn, bản ghi được đưa vào trong tập bản ghi.
¾¾ Nếu bạn muốn các bản ghi được sắp xếp, chọn cột để sắp xếp theo và sau đó, chỉ ra, cho dù các
bản ghi phải được sắp xếp theo thứ tự tăng dần (1, 2, 3 ... hoặc A, B, C. ..) hoặc theo thứ tự giảm
dần (...... 3, 2, 1. hoặc ......... C, B, A).
Cuối cùng, bấm vào Test để kết nối với cơ sở dữ liệu và tạo ra một thể hiện của nguồn dữ liệu. Bấm vào
OK để đóng cửa sổ Test SQL và một lần nữa, bấm vào OK để đóng hộp thoại Recordset. Tập bản ghi
mà bạn đã tạo ra sẽ xuất hiện trong bảng điều khiển Bindings như được trình bày trong hình 6.8.
Hình 6.8: Bảng điều khiển Bindings hiển thị tập bản ghi
6.4.4 Hiển thị các bản ghi cơ sở dữ liệu
Chủ đề này giải thích cách để tạo ra một trang web hiển thị các bản ghi trong tập bản ghi. Đối với điều
này, bạn sẽ tự động tạo ra trang hơn là tự nhập thông tin. Để tạo ra một bảng, đầu tiên, trong trang động,
đặt điểm chèn và viết một đầu đề cho bảng. Tiếp theo, chèn một bảng bằng cách thực hiện một trong
các cách sau:
Bấm vào tab Layout trong thanh Insert và bấm vào nút Table. Trên menu Insert, bấm vào lệnh
Table. Tiếp theo, bấm vào OK trong hộp thoại Insert Table. Khi làm như vậy, một bảng trống sẽ được
chèn vào trong cửa sổ Document. Bây giờ, ở hàng trên cùng của bảng, bạn có thể thêm các đầu đề cho
các mục nhập của bảng. Bạn có thể lưu tài liệu bằng cách chọn lệnh Save từ menu File.
¾¾ Thêm nội dung động đến một trang sử dụng bảng điều khiển Bindings
Bây giờ bạn đã học được cách tạo ra các bảng, bạn sẽ học cách để thêm các trường tập bản ghi
vào bảng. Để làm như vậy, đầu tiên mở bảng điều khiển Bindings bằng cách thực hiện một trong
các cách sau:
yy Từ menu Window, chọn lệnh Databases.
yy Bấm vào mũi tên mở rộng của nhóm bảng điều khiển Application và chọn tùy chọn bảng
điều khiển Bindings.
Tập bản ghi mà bạn đã tạo ra sẽ được hiển thị.

Phần 6
Kháiniệm
Bấm vào biểu tượng + bên cạnh tập bản ghi để mở rộng nó. Bây giờ, thêm tập bản ghi đầu tiên vào
bảng bằng cách thực hiện một trong các cách sau:
yy Đặt điểm chèn vào ô đầu tiên của hàng thứ hai, và sau đó, trong bảng điều khiển Bindings
chọn tên tập bản ghi đầu tiên và bấm vào Insert.
yy Kéo tập bản ghi từ bảng điều khiển Bindings vào ô trong bảng tương ứng.
Tương tự như vậy, bạn có thể thêm các tập bản ghi khác vào bảng. Bảng sẽ như được trình bày
trong hình 6.9.
Hình 6.9: Bảng với các trường tập bản ghi
Cuối cùng, lưu tài liệu bằng cách bấm vào lệnh Save trên menu File.
¾¾ Thêm một khu vực lặp lại
Bảng mà bạn đã tạo ra bao gồm chỉ một hàng để hiển thị dữ liệu. Để hiển thị nhiều bản ghi, cài đặt
hàng làm khu vực lặp lại. Do đó, trong cửa sổ Document, hãy chọn hàng thứ hai của bảng. Bây
giờ, để đặt khu vực lặp lại, hãy làm một trong các cách sau:
yy Trong nhóm bảng điều khiển Application, chọn bảng điều khiển Server Behaviors, bấm
vào nút cộng +, và sau đó bấm vào Repeat Region.
yy Trên menu Insert, bấm vào Template Objects và chọn tùy chọn Repeated Region. Từ tab
Application trong thanh Insert, chọn nút Repeated Region. Hộp thoại Repeat Region sẽ
được hiển thị như được trình bày trong hình 6.10. Chọn các thiết đặt mặc định và bấm vào
OK.
Hình 6.10: Hộp thoại Repeat Region

Phần 6
Kháiniệm
6.4.5 Kết nối cơ sở dữ liệu cho các nhà phát triển ColdFusion
Nguồn dữ liệu ColdFusion được định nghĩa trong Dreamweaver hoặc trong ColdFusion Administrator.
Trong khi phát triển một ứng dụng web ColdFusion trong Dreamweaver, bạn cần phải kết nối với một cơ
sở dữ liệu bằng cách chọn nguồn dữ liệu. Dreamweaver sẽ biết vị trí nơi mà các nguồn dữ liệu được
lưu. Khi bạn yêu cầu Dreamweaver kết nối với cơ sở dữ liệu tại thời gian thiết kế, Dreamweaver lấy
nguồn dữ liệu bằng cách đặt các tập lệnh trên máy tính chạy ColdFusion. Thư mục trong đó những tập
lệnh được lưu cần phải được chỉ rõ trong thể loại Testing Server của hộp thoại Site Setup. Mở bất
kỳ trang ColdFusion nào trong Dreamweaver. Sau đó, mở bảng điều khiển Databases. Nguồn dữ liệu
ColdFusion của bạn sẽ xuất hiện trong bảng điều khiển. Nếu các nguồn dữ liệu không xuất hiện, hoàn
thành danh sách kiểm tra trong bảng điều khiển.
6.4.6 Kết nối cơ sở dữ liệu cho các nhà phát triển ASP
Ứng dụng ASP phải kết nối với một cơ sở dữ liệu thông qua trình điều khiển ODBC hoặc trình cung cấp
cơ sở dữ liệu nhúng và liên kết đối tượng (OLE DB). Giao tiếp giữa ứng dụng web và cơ sở dữ liệu được
phiên dịch bởi trình điều khiển hoặc trình cung cấp. Kết nối với cơ sở dữ liệu thông qua OLE DB yêu cầu
sử dụng DSN hoặc chuỗi kết nối trong trường hợp trình điều khiển ODBC không được cài đặt. Tất cả các
thông tin cần thiết để kết nối với cơ sở dữ liệu được viết mã trong chuỗi kết nối.
Ghi chú: Sử dụng DSN để kết nối với cơ sở dữ liệu dễ dàng hơn so với sử dụng một chuỗi kết nối nếu
bạn đang kết nối thông qua một trình điều khiển ODBC được cài đặt trên hệ thống Windows.
6.4.7 Kết nối cơ sở dữ liệu cho các nhà phát triển PHP
Cơ sở dữ liệu MySQL và máy chủ MySQL là các yêu cầu cơ bản để kết nối với cơ sở dữ liệu khi phát
triển một ứng dụng PHP trong Dreamweaver. Để kết nối với cơ sở dữ liệu, bạn làm theo các bước sau:
1. Bạn mở một trang PHP trong Dreamweaver, và sau đó, mở bảng điều khiển Databases.
2. Bạn bấm vào nút dấu cộng (+) trên bảng điều khiển, chọn MySQL Connection từ menu, và nhập
các trường trong hộp thoại như sau:
¾¾ Bạn nhập tên cho kết nối mới, không có dấu cách hoặc ký tự đặc biệt.
¾¾ Trong hộp MySQL Server, bạn nhập địa chỉ IP hoặc tên máy chủ cho máy tính lưu trữ
MySQL. Nếu MySQL đang chạy trên cùng một máy tính như PHP, bạn có thể nhập vào
localhost.
¾¾ Nhập tên người dùng và mật khẩu MySQL của bạn.
¾¾ Trong hộp Database, bạn nhập vào tên của cơ sở dữ liệu, hoặc bấm vàoSelect và chọn cơ
sở dữ liệu từ danh sách các cơ sở dữ liệu MySQL, và bấm vào Test.
Trong trường hợp có sự cố kết nối, kiểm lại tên máy chủ, tên người dùng và mật khẩu.

Phần 6
Kháiniệm
Trong trường hợp điều này là chính xác và kết nối vẫn không thành công, kiểm tra các thiết đặt cho
thư mục thử nghiệm mà Dreamweaver sử dụng để xử lý các trang động. Bạn có thể phải điều chỉnh
tiền tố URL trong hộp thoại Site Setup để có được kết nối của bạn để làm việc. Lý tưởng nhất, tiền
tố URL phải là URL mà người dùng sẽ gõ vào trình duyệt của họ để mở ứng dụng web. Tên tập tin
(hoặc trang bắt đầu) của ứng dụng không phải là một phần của URL này.
3. Bấm vào OK.
6.5 Xem dữ liệu trực tiếp trong Dreamweaver
Tính năng Xem dữ liệu trực tiếp đã bị Dreamweaver CS5 phản đối. Tính năng giao diện Live thay thế
tính năng này. Đảm bảo những điều sau đây để xem dữ liệu trực tiếp trong giao diện Live:
¾¾ Thư mục, như là thư mục gốc trên máy chủ ColdFusion, máy tính cục bộ, hoặc máy tính từ xa đã
được định nghĩa để xử lý các trang động. Trong giao diện Live, nếu trang hiển thị thông báo lỗi,
đảm bảo rằng tiền tố URL trong hộp thoại Site Setup là chính xác.
¾¾ Các tập tin liên quan đã được sao chép vào thư mục.
¾¾ Tất cả các tham số cần thiết được cung cấp cho trang này.
6.5.1 Cung cấp cho trang với dữ liệu Live in giao diện Live
Để cung cấp cho trang với dữ liệu Live trong giao diện Live, bạn làm theo các bước sau:
¾¾ Trên menu View, bấm vào Live View Options, Và sau đó, bấm vào HTTP Request Settings để
mở hộp thoại Live View Settings.
¾¾ Trong khu vực URL Request, bấm vào nút Plus (+) và nhập một tham số mà trang của bạn chờ
đợi.
¾¾ Chỉ rõ tên và một giá trị kiểm tra cho mỗi tham số.
¾¾ Trong menu bật lên Method, chọn phương thức biểu mẫu HTML mà trang của bạn mong đợi:
POST hoặc GET.
¾¾ Trong vùng văn bản Initialization Script, bao gồm bất kỳ mã nguồn nào bạn muốn chèn vào ở
đầu trang trước khi nó chạy. Các tập lệnh khởi tạo thường bao gồm mã đặt các biến phiên.
¾¾ Để lưu các thiết đặt của bạn cho trang hiện tại, bấm vào Save Settings For This Document, và
bấm vào OK.
Ghi chú: Để lưu các thiết đặt, bạn phải cho phép Design Notes bằng cách bấm vào Design Notes
trên menu File.

Phần 6
Kháiniệm
6.6 Hiển thị dữ liệu XML trong các trang web
Hiển thị dữ liệu XML liên quan đến việc khôi phục thông tin đã lưu trữ trong một tập tin XML cục bộ và
phản ánh dữ liệu đó trên trang web. Ưu điểm chính của việc sử dụng dữ liệu XML trên các trang web là
nó cho phép bạn tách biệt nội dung ra khỏi trình bày cuối cùng. Nó cho phép bạn làm việc trong tập tin
XML mà không cần phải thay đổi trang trình bày cuối cùng, và ngược lại.
Dữ liệu dựa trên XML tích hợp, như là RSS, nạp vào các trang web sử dụng một tiến trình công việc kéo
thả đơn giản. Bạn có thể di chuyển đến giao diện Code để tùy chỉnh sự chuyển đổi, sử dụng gợi ý mã
đã cải thiện cho XML và XSLT.
6.6.1 Giới thiệu sử dụng XML và XSL với các trang web
XML là viết tắt của Extensible Markup Language và XSL là viết tắt của Extensible Stylesheet Language.
XML là ngôn ngữ đánh dấu rất giống với HTML. Nó cho phép người dùng định nghĩa các thẻ của riêng
mình và cấu trúc tài liệu của riêng mình, trong khi XSL định dạng công việc và hiển thị giống nhau trong
trình duyệt.
XSL không chỉ là style sheet. Nó bao gồm ba phần sau đây:
¾¾ XSLT: Mục đích chính của XSLT là để chuyển đổi tài liệu XML thô thành tài liệu XML có định
dạng. XSLT là thành phần quan trọng nhất của XSL. Nó sử dụng XPath để điều hướng đến tài
liệu XML phải được định dạng.
¾¾ XPath: Đây là ngôn ngữ được sử dụng để tìm thông tin trong một tài liệu XML. XPath được sử
dụng để điều hướng qua tất cả các phần tử và các thuộc tính của chúng có mặt trong tài liệu
XML.
¾¾ XSL-FO: Ngôn ngữ này chủ yếu là liên quan đến định dạng tài liệu XML cho mục đích đầu ra.
Đây là chữ viết tắt của Extensible Stylesheet Language Formatting Objects (Ngôn ngữ tờ kiểu
dạng mở rộng định dạng các đối tượng).
6.6.2 Giới thiệu về biến đổi XSL phía máy chủ
Quá trình trong đó máy chủ thực hiện việc biến đổi XSL cho một tài liệu XML được gọi là biến đổi XSL phía
máy chủ. Để thực hiện truy cập biến đổi XSL phía máy chủ, phải có máy chủ ứng dụng. Dreamweaver
cung cấp các tùy chọn đặc biệt để tạo ra các trang XSLT. Dreamweaver còn tạo ra hai loại trang XSLT,
cụ thể là XSLT (Entire page), và XSLT (Fragment).
6.6.3 Giới thiệu về biến đổi XSL phía máy khách
Khi biến đổi XSL của dữ liệu XML được thực hiện phía máy khách, nó được gọi là biến đổi phía máy
khách. Biến đổi XSL phía máy khách chỉ có thể trên các trình duyệt hiện đại. Biến đổi phía máy khách
yêu cầu thao tác của tập tin XML có chứa dữ liệu cần phải được hiển thị. Có thể sử dụng Dreamweaver
để tạo các trang XSLT và liên kết nó với tài liệu XML.

Phần 6
Kháiniệm
6.6.4 Giới thiệu về dữ liệu XML và các phần tử lặp lại
Đối tượng XSLT của khu vực lặp lại cho phép hiển thị các phần tử lặp lại từ một tập tin XML trong trang.
Bất kỳ khu vực nào có chứa chỗ dành sẵn cho dữ liệu XML có thể được chuyển thành khu vực lặp lại.
Để hiển thị phần tử XML lặp lại, trên menu File, bạn bấm vào New, sau đó bấm vào Blank Page. Trong
phần Page Type, bấm vào XSLT (Entire Page). Hộp thoại Locate XML Source xuất hiện như được
trình bày trong hình 6.11. Bạn có thể định vị các tập tin nguồn bằng cách chọn từ một trong hai tùy chọn
được cung cấp trong hộp thoại.
Hình 6.11: Hộp thoại Locate XML Source
Tiếp theo, duyệt tập tin thích hợp. Sau đó, trên menu Insert, bạn bấm vào lệnh Table. Trong bảng hộp
bật lên, nhập giá trị 2 vào hộp Rows và hộp Columns. Bây giờ, đặt con trỏ vào ô đó và bấm đúp vào
phần tử cần được hiển thị từ cấu trúc cây Application Binding. Cuối cùng, lưu tập tin và xuất bản để
xem bản xem trước.
6.6.5 Giới thiệu Xem trước dữ liệu XML
Xem trước dữ liệu XML sử dụng tùy chọn Preview in Browser tùy thuộc vào từng tình huống. Đối với các
trang động có chứa các đoạn XSLT, máy chủ ứng dụng luôn luôn thực hiện việc biến đổi. Vào những lúc
khác, Dreamweaver hoặc trình duyệt có thể thực hiện việc biến đổi. Bảng 6.1 liệt kê các tình huống khi
sử dụng Preview in Browser, và những công cụ để thực hiện các phép biến đổi tương ứng.
Loại trang Biến đổi dữ liệu được thực hiện bởi
Trang động có chứa đoạn XSLT Máy chủ ứng dụng
Đoạn XSLT hoặc toàn bộ trang XSLT Dreamweaver
Tập tin XML với liên kết cho toàn bộ trang XSLT Trình duyệt
Bảng 6.1: Các công cụ và biến đổi

Phần 6
Kháiniệm
6.6.6 Các thực thể ký tự thiếu
Một số ký tự nếu được sử dụng tại một số nơi sẽ đưa ra thông báo lỗi. Ví dụ, nếu bạn sử dụng dấu ít hơn
() và dấu và () trong văn bản giữa các thẻ hoặc trong một giá trị thuộc tính, công cụ biến đổi XSLT sẽ
đưa ra lỗi. Các thực thể ký tự, là chuỗi các ký tự thể hiện các ký tự khác, có thể được sử dụng làm các
ký tự đặc biệt để giải quyết vấn đề này. Các thực thể ký tự hoặc là có tên hoặc đánh số. Thực thể có tên
bắt đầu bằng dấu và () tiếp theo là tên hoặc các ký tự và kết thúc bằng một dấu chấm phẩy (;). Ví dụ,
thay vì sử dụng dấu ít hơn (), bạn có thể sử dụng lt; để trình bày dấu ngoặc vuông bên trái. Tương tự
như vậy, bạn có thể sử dụng các thực thể đánh số, cũng bắt đầu và kết thúc theo cùng một cách. Trong
một thực thể đánh số, dấu thăng (#) và số chỉ ra ký tự. Bảng 6.2 liệt kê năm thực thể được xác định trước
trong XSLT.
Ký tự Mã thực thể
(nhỏ hơn) lt;
(và) amp;
(lớn hơn) gt;
“ (trích dẫn) quot;
‘ (dấu nháy đơn) apos;
Bảng 6.2: Các thực thể được xác định trước
6.7 Bảo vệ bằng mật khẩu cho các trang web
Bước đầu tiên trong việc xây dựng một trang web được bảo vệ bằng mật khẩu là xây dựng một trang
đăng ký. Trang đăng ký thường được sử dụng trong các Website để chi cho khách truy cập được chứng
thực có thể truy cập vào các trang được bảo vệ bằng mật khẩu.
6.7.1 Xây dựng một trang đăng ký
Ở đây bạn có để xây dựng một trang đăng ký cho khách truy cập để đăng ký. Sau khi đã đăng ký, khách
truy cập có thể sử dụng tên người dùng và mật khẩu mà họ đã chọn để truy cập vào khu vực hạn chế
của Website.
Trang đăng ký bao gồm những phần tử sau:
¾¾ Bảng cơ sở dữ liệu chứa thông tin người dùng.
¾¾ Biểu mẫu đăng ký cho phép người dùng nhập thông tin và chọn tên người dùng và mật khẩu.
¾¾ Hành vi máy chủ Insert Record cập nhật dữ liệu của người dùng Website.
¾¾ Hành vi máy chủ Check New Username để đảm bảo rằng tên người dùng mà khách truy cập đã
lựa chọn chưa bị bất kỳ người dùng nào khác lấy.

Phần 6
Kháiniệm
6.7.2 Lưu trữ thông tin đăng nhập về người dùng
Trang đăng ký đòi hỏi phải có một bảng cơ sở dữ liệu để lưu trữ tên người dùng, mật khẩu và các thông
tin hữu ích khác về khách truy cập. Bảng cơ sở dữ liệu của bạn sẽ chứa hai trường, cụ thể là tên người
dùng và mật khẩu, và các trường khác, nếu cần thiết.
6.7.3 Thêm biểu mẫu HTML và cho phép người dùng chọn tên và mật khẩu
Trên trang Đăng ký, bạn tạo ra một biểu mẫu cho khách truy cập để chọn tên người dùng và mật khẩu.
Trên menu File, bạn bấm vào New, và sau đó, bấm vào Blank Page. Tài liệu trống sẽ được chèn vào trong
cửa sổ Document. Ở đây bạn sẽ đặt ra mẫu đăng ký. Tiếp theo, chọn lệnh Form từ menu Insertđể thêm
một biểu mẫu HTML trống. Bạn có thể đặt tên biểu mẫu HTML này bằng cách chọn thẻ form, được
đặt ở dưới cùng của cửa sổ Document, và gõ tên trong trường Form Name của Property Inspector.
Bạn không cần phải chỉ ra thuộc tính Action và Method của biểu mẫu trong Property Inspectortức là
địa điểm và cách thức để gửi dữ liệu sau khi nút gửi được bấm. Hành vi máy chủ Insert Record sẽ đặt
những thuộc tính này.
Sau đó, chèn một bảng theo yêu cầu. Chọn Username và chọn Password. Bạn có thể chèn các trường
văn bản tương ứng từ menu Insert, bấm vào menu con Form để lựa chọn tùy chọn Text Field. Tiếp theo,
trên menu Insert, bạn bấm vào Form và chọn tùy chọn Button để chèn nút gửi vào biểu mẫu.
Bạn có thể thay đổi tên của nút gửi bằng cách chọn nút và nhập giá trị mới vào trường Label của
Property Inspector.
Tiếp theo, bạn sẽ thêm hành vi máy chủ Insert Record để cập nhật dữ liệu của khách truy cập trong
bảng cơ sở dữ liệu.
6.7.4 Cập nhật bảng của khách truy cập trong cơ sở dữ liệu
Trên menu Window, bạn bấm vào lệnh Server Behaviors. Sau đó, trong bảng điều khiển Server
Behaviors như được trình bày trong hình 6.12, nhấn vào biểu tượng ‘+’ và chọn tùy chọn Insert
Record.

Phần 6
Kháiniệm
Hình 6.12: Bảng điều khiển Server Behaviors
Hình 6.13: Hộp thoại Insert Record
Trong hộp thoại Insert Record như được trình bày trong hình 6.13, bạn chọn kết nối từ danh sách thả
xuống Connection. Sau đó, từ danh sách thả xuống Insert table, chọn bảng cơ sở dữ liệu trong đó các
bản ghi khách truy cập sẽ được chèn vào. Tiếp theo, trong tùy chọn After inserting, go to, bấm vào nút
Browse và chọn tập tin sẽ được hiển thị sau khi bản ghi được chèn vào trong bảng.
Hơn nữa, trong Get values từ danh sách thả xuống, chọn biểu mẫu mà bạn sẽ sử dụng để nhận dữ
liệu.

Phần 6
Kháiniệm
Tại đây, bạn cần chỉ ra đối tượng từng biểu mẫu nào trong trang sẽ cập nhật trong bảng cơ sở dữ liệu.
Đối với điều này, chọn đối tượng biểu mẫu từ danh sách Form elements, và chọn cột bảng tương ứng
từ danh sách thả xuống Columns. Tương tự như vậy, chọn loại dữ liệu từ danh sách thả xuống Submit.
Lặp lại bước này cho các phần tử biểu mẫu khác và bấm vào OK. Hành vi máy chủ Insert Record sẽ
được thêm vào trong bảng điều khiển Server Behaviors và được gắn vào trang đó. Xem hình 6.13.
6.7.5 Đảm bảo rằng người dùng đã chọn là duy nhất
Khi người dùng bấm vào nút gửi trên trang đăng ký, hành vi máy chủ so sánh tên người dùng được người
dùng nhập vào so với những tên người dùng đã được lưu trữ trong bảng cơ sở dữ liệu về người dùng
đã đăng ký. Nếu tên người dùng không khớp với những tên được lưu trữ trong cơ sở dữ liệu, hành vi
máy chủ thực hiện hoạt động chèn bản ghi một cách bình thường. Nếu tên người dùng đã tồn tại, hành
vi máy chủ hủy bỏ hoạt động chèn bản ghi và mở ra một trang mới (thường là trang nói cho người dùng
rằng tên người dùng đã được sử dụng và yêu cầu người dùng chọn một tên mới).
Sau đây là các bước để đảm bảo rằng tên người dùng là duy nhất:
¾¾ Trên menu Window, bạn bấm vào lệnh Server Behaviors. Bảng điều khiển Server Behaviors
sẽ xuất hiện trong nhóm bảng điều khiển Application.
¾¾ Bạn bấm vào biểu tượng dấu cộng ‘+’ và từ menu User Authentication, bạn chọn Check New
Username từ menu bật lên. Hộp thoại Check New Username sẽ xuất hiện. Xem hình 6.14.
Hình 6.14: Hộp thoại Check New Username

Phần 6
Kháiniệm
Hình 6.15: Hộp thoại Log in User
¾¾ Bây giờ, trong danh sách thả xuống Username Field, bạn chọn trường biểu mẫu, nhận tên người
dùng từ khách truy cập.
¾¾ Sau đó, trong If Already Exists,trường Go To, bấm vào nút duyệt và chọn tập tin sẽ hiển thị
thông báo cho khách truy cập để nói với họ rằng tên người dùng đã tồn tại và yêu cầu họ phải
đăng ký lại với một tên người dùng khác.
¾¾ Cuối cùng, bấm vào OK. Hành vi máy chủ Check New Username sẽ được thêm vào bảng điều
khiển Server Behaviors và được gắn vào trang đó.
Trang đăng ký bây giờ đã sẵn sàng để nhận tên người dùng và mật khẩu.
6.7.6 Tạo trang đăng nhập
Sau khi tạo trang đăng ký, bạn cần phải tạo một trang đăng nhập, nơi khách truy cập có thể nhập thông
tin đăng nhập (tên người dùng và mật khẩu), mà họ đã chọn trong trang đăng ký để truy cập vào các
trang web được bảo vệ bằng mật khẩu. Đầu tiên bạn cần phải tạo một trang đăng nhập cho người dùng
để nhập thông tin. Để làm như vậy, các bước như sau:
1. Thêm một biểu mẫu web vào một trang động như được giải thích trong chủ đề trước. Sau đó,
nhập các trường sau:
¾¾ Tên người dùng
¾¾ Mật khẩu

Phần 6
Kháiniệm
¾¾ Nút gửi đi
2. Trên menu Window, bấm vào Server Behaviors. Bảng điều khiển Server Behavior sẽ được hiển
thị trong nhóm bảng điều khiển Application.
3. Bấm vào biểu tượng cộng ‘+’ và sau đó, bấm vào menu User Authentication để chọn lệnh Log
In User. Khi làm như vậy, hộp thoại Log In User sẽ được hiển thị. Xem hình 6.15.
4. Sau đó, trong hộp thoại này, đầu tiên, chỉ ra biểu mẫu và các đối tượng biểu mẫu sẽ được khách
truy cập sử dụng để nhập thông tin đăng nhập. Sau đó, chỉ ra cơ sở dữ liệu và các cột có chứa
tên người dùng và mật khẩu của tất cả những người dùng đã đăng ký. Hành vi máy chủ sẽ kiểm
tra tên người dùng và mật khẩu đã nhập vào trang đăng nhập trong cơ sở dữ liệu.
5. Tiếp theo, trong If Log In Succeeds, tùy chọn Go To, chỉ ra một trang sẽ được hiển thị nếu đăng
nhập thành công. Đây sẽ là trang chính của trang được bảo vệ bằng mật khẩu. Tiếp theo, trong If
Log In Succeeds, tùy chọn Go To, chỉ ra một trang sẽ được hiển thị nếu đăng nhập thành công.
Trang này sẽ chuyển tải một thông điệp tới người dùng để cho họ biết rằng họ có thể không được
đăng ký hay các chi tiết đã nhập không chính xác.
6. Bạn cũng có thể chỉ ra có nên cấp quyền truy cập cho khách truy cập hay không dựa trên tùy
chọn Username and Password hoặc tùy chọn Username, Password, and Access Level.
7. Bây giờ, bấm vào OK. Hành vi máy chủ Log In User sẽ được thêm vào bảng điều khiển Server
Behaviors và được đính kèm vào trang đó. Trang đăng nhập đã sẵn sàng để nhận tên người
dùng và mật khẩu và hạn chế người dùng dựa trên các chi tiết họ nhập.
6.7.7 Hạn chế truy cập trang web đối với người dùng trái phép
Hạn chế truy cập trang đối với người dùng trái phép là cần thiết để ngăn khách truy cập không gõ địa chỉ
URL của trang và truy cập vào trang mà không có chứng thực phù hợp. Quyền truy cập này có thể được
cấp chỉ cho các trang HTML nhưng không cho các hình ảnh hoặc tập tin âm thanh. Để chuyển hướng
người dùng trái phép vào một trang khác, mở một tập tin mà bạn muốn bảo vệ. Trên menu Window, bạn
nhấn vào lệnh Behaviors để mở bảng điều khiển Behaviors. Bây giờ, bấm vào biểu tượng cộng ‘+’ và
sau đó, bấm vào menu User Authentication để chọn lệnh Restrict Access To Page. Hộp thoại Restrict
Access To Page sẽ được hiển thị. Xem hình 6.16.
Hình 6.16: Hộp thoại Restrict Access to Page

Phần 6
Kháiniệm
Tiếp theo, chọn Username and Password từ thể loại Restrict based on. Ngoài các tên người dùng và
mật khẩu, bạn cũng có thể muốn các trang được hiển thị trên cơ sở mức truy cập. Để làm như vậy, hãy
chọn lựa chọn Username, password, and access level và định nghĩa các mức.
Hơn nữa, trong tùy chọn If access denied, go to, bấm vào nút Browse và chọn tập tin mà bạn muốn
hiển thị nếu một người dùng trái phép truy cập vào một trang được bảo vệ. Cuối cùng, bấm vào OK.
Hành vi máy chủ Restrict Access To Page sẽ được thêm vào bảng điều khiển Server Behaviors và
được đính kèm vào trang đó.
6.8 Adobe Device Central
Adobe Device Central cho phép các nhà thiết kế và nhà phát triển web xem trước các tập tin Dreamweaver
sẽ thể hiện như thế nào trên một loạt các thiết bị di động. Device Central sử dụng Small Screen Rendering
của Opera để cung cấp cho các nhà thiết kế và nhà phát triển ấn tượng về trang web của họ trông như
thế nào trên một màn hình nhỏ. Nhà thiết kế và nhà phát triển cũng có thể kiểm tra xem CSS của họ thể
hiện có đúng hay không.
6.8.1 Xem trước với Adobe Device Central và Dreamweaver
Để xem trước các trang được tạo ra trong Dreamweaver trên các thiết bị di động khác nhau, bạn sử dụng
Device Central với tính năng Opera Small-Screen Rendering dựng sẵn. Bản xem trước của trang web
có thể khác nhau trên các trình duyệt khác nhau. Do đó, kiểm tra bản xem trước trên các thiết bị khác
nhau luôn là ý tưởng tốt, bởi các thiết bị khác nhau có các trình duyệt đã cài đặt khác nhau. Đầu tiên,
khởi động Dreamweaver. Sau đó, mở một tập tin và thực hiện một trong các bước sau:
¾¾ Trên menu File, bấm vào Preview in Browser, và sau đó bấm vào Device Central.
¾¾ Trên thanh công cụ cửa sổ Document, bấm và giữ nút Preview/Debug In browser và bấm vào
Preview In Device Central.
Tập tin được hiển thị trong tab Device Central Emulator. Để kiểm tra bản xem trước trên một
thiết bị khác, bấm đúp chuột vào tên của thiết bị trong danh sách Device Sets hoặc Available
Devices.
6.9 Adobe Bridge CS5
Adobe Bridge cho phép bạn xem các tập tin của bạn trước khi đặt chúng hoặc kéo chúng vào bố trí trang.
Bạn có thể mở Bridge theo hai cách như sau:
¾¾ Trên menu File, bấm vào lệnh Browse In Bridge.
¾¾ Bấm vào nút Browse In Bridge trên thanh công cụ Standard.
¾¾ Nhấn Ctrl+Alt+O (Windows) hoặc Command+Option+O (Macintosh).
Sau khi chọn từ một trong hai tùy chọn, Bridge sẽ mở ra ở chế độ File Browser, hiển thị các nội dung
của thư mục mới được mở trong Dreamweaver. Nếu Bridge đã được mở, nó sẽ trở thành cửa sổ hoạt
động.

Phần 6
Kháiniệm
Ghi chú: Để sử dụng những tính năng này, bạn phải cài đặt Adobe Bridge trên máy tính của bạn, nếu
không, Dreamweaver sẽ hiển thị thông báo lỗi.
6.9.1 Đặt tập tin Adobe Bridge vào trang web
Trong giao diện Design của Dreamweaver, bạn đặt điểm chèn vào trang của bạn nơi bạn muốn tập tin
được chèn vào. Sau đó, trong Adobe Bridge, bạn chọn tập tin và trên menu File, bạn bấm vào Place In
Dreamweaver. Trong trường hợp tập tin có mặt tại một địa điểm khác ngoài thư mục gốc của Website,
bạn sẽ được nhắc sao chép nó vào thư mục gốc. Nếu bạn đã đặt Preferences to Accessibility để hiển
thị các thuộc tính khi chèn các hình ảnh, hộp thoại Image Tag Accessibility Attributes sẽ được hiển thị
khi bạn chèn các hình ảnh sẵn sàng cho web, như là JPEG và GIF.
Ghi chú: Bạn không thể đặt tập tin vào giao diện Code. Bạn chỉ có thể đặt các tập tin trong giao diện
Design.
6.10 Thiết kế đa màn hình với HTML5
Bảng điều khiển Multiscreen Preview cho thấy trang web của bạn trông giống như thế nào trong các
thiết bị với ba độ phân giải màn hình khác nhau, như là máy tính để bàn, thiết bị máy tính bảng, và điện
thoại di động.
Bạn có thể đính kèm các tờ kiểu dạng khác nhau vào bảng điều khiển Multiscreen Preview. Vì vậy, bạn
có thể nhắm tới mỗi thiết bị sử dụng các truy vấn phương tiện CSS3. Nhờ điều này, cùng một trang sẽ
được tái tạo theo cách thích hợp nhất cho mỗi khán giả.
Để sử dụng những tính năng kết hợp do hỗ trợ HTML5, bạn cần phải cài đặt bản cập nhật 11.0.3 của
Dreamweaver CS5.
Trong thanh công cụ Document, bạn sẽ tìm thấy nút Multiscreen như được trình bày trong hình 6.17.
Hình 6.17: Nút Multiscreen

Phần 6
Kháiniệm
¾¾ Dreamweaver có sự hỗ trợ dựng sẵn cho PHP và MySQL.
¾¾ ColdFusion là công cụ giúp các lập trình viên tạo ra một ứng dụng web truy cập cơ sở dữ
liệu. Nó là một tập hợp các thẻ HTML ‘mở rộng’ được gọi là CFML - Ngôn ngữ đánh dấu
ColdFusion.
¾¾ Cơ sở dữ liệu là tập hợp các sự kiện có tổ chức về một chủ đề cụ thể. Đó là cách để tổ
chức một lượng lớn dữ liệu để nó có thể được truy cập, phân tích và cập nhật dễ dàng.
Điều này cũng có thể được thực hiện một cách thủ công.
¾¾ Sau khi tạo một DSN, bạn cần phải kết nối Dreamweaver với cơ sở dữ liệu. Đối với điều
này, bạn có thể mở bất kỳ tài liệu nào hoặc một tài liệu trống, từ đó kết nối được lưu trữ với
Website và không với bất kỳ trang cụ thể nào.
¾¾ Máy chủ web, khi được cài đặt trong máy tính của bạn, có thể được xem sử dụng http://
localhost/rootfoldername/dynamicpagename, nơi tên rootfolder là tên của thư mục gốc mà
bạn đã tạo ra trong Cinetpubwwwroot, và tên dynamicpage là tên của trang động trong
đó bạn đã thêm nội dung động.
¾¾ Ưu điểm chính của việc sử dụng dữ liệu XML trên các trang web là nó cho phép bạn tách
biệt nội dung ra khỏi trình bày cuối cùng. Nó cho phép người dùng làm việc trong tập tin
XML mà không cần phải thay đổi trang trình bày cuối cùng, và ngược lại.
¾¾ Khi người dùng bấm vào nút gửi trên trang đăng ký, hành vi máy chủ so sánh tên người
dùng được người dùng nhập vào so với những tên người dùng đã được lưu trữ trong bảng
cơ sở dữ liệu về người dùng đã đăng ký.
Tóm tắt

Phần 6
Kháiniệm
1. Biến ____________ cung cấp thông tin về máy chủ đang chạy ColdFusion, trình duyệt
yêu cầu một trang, và các thông tin khác về môi trường xử lý.
a. Cục bộ
b. Máy chủ
c. CGI
d. Cookie
2. Để chạy các trang PHP, bạn cần _____________PHP .
a. máy khách chủ
b. máy chủ ứng dụng
c. bộ định tuyến
d. bộ chuyển mạch
3. Bạn cần một ____________ để thiết lập kết nối cơ sở dữ liệu.
a. DNS
b. địa chỉ IP
c. DSN
d. FTP
4. ______________ đòi hỏi một máy chủ để thực hiện chuyển đổi XSL cho một tài liệu
XML.
a. chuyển đổi XSL phía máy khách
b. chuyển đổi XSL phía máy chủ
c. chuyển đổi XML phía máy khách
d. chuyển đổi XSL phía máy chủ

Phần 6
Kháiniệm

5. Khi bạn xem trước tập tin XSL của bạn trong một trình duyệt, Dreamweaver kiểm tra tập tin
XSL về_________ không xác định và thông báo cho bạn nếu thực thể không xác định
được tìm thấy.
a. các thực thể
b. mã
c. văn bản
d. các biến
6. ________________ cho phép các nhà thiết kế và nhà phát triển web xem trước các tập
tin Dreamweaver sẽ thể hiện như thế nào trên một loạt các thiết bị di động.
a. Adobe Bridge
b. Adobe Device Central
c. Adobe Photoshop
d. ConnectNow

“ “Hành động không luôn mang lại hạnh phúc,
nhưng hạnh phúc phải có hành động.

Câutrảlời
Các câu trả lời để
kiểm tra tiến bộ của bạnA
Câu trả lời
Học phần 1
1. b
2. c
3. d
4. a
5. a
6. b
7. a
Học phần 2
1. c
2. d
3. d
4. a
5. a
Học phần 3
1. b
2. c
3. d
4. a
5. b
6. c
7. d
Học phần 4
1. d
2. b
3. a
4. a
5. c
6. b
7. a
8. a

Câutrảlời
Các câu trả lời để kiểm tra tiến bộ của bạn
Học phần 5
1. a
2. b
3. c
4. c
5. a
6. b
Học phần 6
1. c
2. b
3. a
4. b
5. a
6. b

Designing websites in dreamweaver cs5

More Related Content

Similar to Designing websites in dreamweaver cs5 (20)

Designing websites in dreamweaver cs5