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
Hình 1.37: Màn hình Basic
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
Kiểm tra tiến bộ của bạn
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

Designing websites in dreamweaver cs5

Designing websites in dreamweaver cs5

Recomendados

Recomendados

Más contenido relacionado

Similar a Designing websites in dreamweaver cs5

Similar a Designing websites in dreamweaver cs5 (20)

Designing websites in dreamweaver cs5