Làm quen với Dreamweaver CS4

Bài 1
Những nội dung
chính trong bài:
• Tìm hiểu các tính năng
chính của Dreamweaver
• Giới thiệu những tính
năng mới trong phiên
bản CS4
• Tìm hiểu cách thức hoạt
động của website và
trang web
• Viết các đoạn mã HTML/
XHTML cơ bản

Làm quen với
Dreamweaver CS4
Dù bạn là người mới học thiết kế web hay đã là một
lập trình viên nhiều kinh nghiệm, Dreamweaver luôn
là một công cụ đa năng mà bạn có thể sử dụng để
phục vụ cho việc thiết kế, bố cục và quản lý website.
Trong bài học này, ta sẽ tìm hiểu về các tính năng
chính của Dreamweaver và cách thức hoạt động của
các trang web.
Chuẩn bị
Trước khi bắt đầu, hãy đảm bảo rằng các công cụ và bảng làm việc đã được đưa về trạng
thái mặc định. Xem phần “Thiết lập lại không gian làm việc Dreamweaver” ở trang 3.
Trong bài học này, bạn sẽ thao tác với một số file trong thư mục dw01lessons. Hãy đảm
bảo rằng bạn đã sao chép thư mục dwlessons từ đĩa DVD vào ổ cứng. Xem “Nạp các
file bài học” ở trang 3.
Chú ý: Để tạo một trang web mới, hãy xem phần “Cấu trúc thẻ và các thuộc tính”
ở trang 20. Trong phần tiếp theo, bạn sẽ tìm hiểu một số tính năng chính của

Dreamweaver CS4.

Bài 1, Làm quen với Dreamweaver CS4

7


1

Dreamweaver là gì?

1

Xem video minh họa Bài 1!
Sử dụng video kèm theo để hiểu rõ hơn về cách sử dụng một số tính năng trong bài học.
Có thể tìm thấy video hướng dẫn cho bài này trên đĩa DVD đính kèm.

Dreamweaver là gì?
Dreamweaver là một công cụ thiết kế, soạn thảo mã trang web và phát triển xuất sắc
dành cho cả những người mới làm web cũng như người đã có kinh nghiệm. Chính vì
vậy, Dreamweaver đã nhanh chóng trở thành phần mềm quản lý và xây dựng website
rất được ưa chuộng. Dreamweaver cung cấp một môi trường sáng tạo cho các nhà thiết
kế, cho phép xây dựng website, phát triển nội dung di động, phát triển những ứng dụng
sử dụng các mã lệnh kịch bản phức tạp phía máy chủ.

Các công cụ thiết kế và bố cục
Dreamweaver có hệ thống giao diện phong phú với rất nhiều menu, biểu tượng và
các bảng, khiến việc chèn cũng như định dạng văn bản, hình ảnh và các nội dung đa
phương tiện (như các file video và Flash) trở nên rất đơn giản. Giờ đây, với sự hỗ
trợ của Dreamweaver, bạn có thể tạo ra những trang web giàu chức năng với giao

diện đẹp mà không cần viết một dòng mã lệnh nào. Bản thân Dreamweaver vốn
không hỗ trợ việc tạo ra các hình ảnh. Thay vào đó, Dreamweaver được tích hợp
với Adobe Photoshop CS4 để có thể chỉnh sửa các hình ảnh ngay trong ứng dụng
Dreamweaver.

Bảng Insert cung cấp những chức năng cho phép
bạn có thể dễ dàng chèn các hình ảnh, form và
các nội dung đa phương tiện vào trang web.

Quản lý site và giao thức truyền file (FTP)
Dreamweaver cung cấp mọi chức năng cần thiết cho việc quản lý site, bao gồm: khả
năng truyền file (FTP) giữa máy chủ và máy tính cục bộ của bạn, các đối tượng có thể
tái sử dụng (như các mẫu trang web (template), các đối tượng trong thư viện) và một số
cơ chế để đảm bảo an toàn (như kiểm tra liên kết hỏng và báo cáo về site), để đảm bảo
giao diện và khả năng hoạt động của site đều tốt. Trong trường hợp thiết kế trang web
sử dụng Cascading StyleSheets (CSS), công cụ Kiểm tra tính tương thích trình duyệt
(Browser compatibility Check) và Cố vấn về CSS (CSS Advisor) sẽ giúp bạn xác định
và khắc phục những vấn đề tiềm tàng có thể nảy sinh khi hiển thị trang web trên các
trình duyệt khác nhau.
8

Thiết kế web với Dreamweaver CS4


Dreamweaver là gì?

1

Môi trường viết mã và soạn thảo nội dung
Dreamweaver cho phép bạn làm việc trong chế độ chỉ hiển thị mã nguồn với công cụ

soạn thảo hữu hiệu. Chế độ này cho phép chỉnh sửa trực tiếp mã HTML và chuyển đổi
giữa các chế độ để quan sát kết quả hiển thị của trang web. Các tính năng như hiển thị
dòng mã nguồn với màu sắc khác nhau, lùi đoạn và hệ thống giao diện trực quan khiến
Dreamweaver trở thành một công cụ soạn thảo và môi trường viết mã hoàn hảo cho các
nhà thiết kế web ở bất kỳ trình độ nào.
Đối với những nhà phát triển giàu kinh nghiệm, Dreamweaver cũng hỗ trợ các ngôn ngữ
lập trình và ngôn ngữ kịch bản nổi tiếng như JavaScript và các ngôn ngữ phía server,
bao gồm: ColdFusion, PHP và ASP.NET. Các menu và bảng hỗ trợ viết mã lệnh được
thiết kế đặc biệt cho phép bạn xây dựng các trang và ứng dụng trên ngôn ngữ lập trình
yêu thích.

Chế độ hiển thị mã lệnh (code) cung cấp một trình soạn thảo giàu tính năng bao gồm khả năng đổi màu cho
các thẻ (tag) và các mã kịch bản (script) để các đoạn mã trở nên dễ đọc và dễ hiểu hơn.

Các ngôn ngữ kịch bản được dùng để xây dựng những trang web tương tác
hay website thương mại điện tử, được phân thành hai loại: phía máy khách
(client-side) và phía máy chủ (server-side). Các ngôn ngữ phía máy khách
(như JavaScript) chạy ngay trên trình duyệt web trong khi các ngôn ngữ phía
máy chủ (như ColdFusion) lại yêu cầu phải cài đặt các phần mềm đặc biệt trên
máy chủ để có thể chạy được.

Dreamweaver dành cho đối tượng nào?
Dreamweaver được sử dụng phổ biến bởi sự đa năng của nó. Với khả năng hỗ trợ trong
việc xây dựng ý tưởng, biến ý tưởng thành sản phẩm thực và hỗ trợ công tác phát triển
website, Dreamweaver trở thành một công cụ được rất nhiều chuyên gia công nghệ,
doanh nghiệp và tổ chức giáo dục ưa chuộng. Tuy vậy, Dreamweaver vẫn giữ được tính
đơn giản và dễ tiếp cận đối với những người mới bắt đầu tham gia vào lĩnh vực thiết
kế web. Dreamweaver cũng được sử dụng trong những dự án cá nhân và dự án của các
doanh nghiệp nhỏ hay các chuyên gia truyền thông, như nhiếp ảnh gia hay họa sỹ có nhu
cầu xây dựng một trang web cho riêng mình.

Bài 1, Làm quen với Dreamweaver CS4

9


1

Giao diện người dùng mới

Những tính năng mới trong Dreamweaver CS4
Trong bài học này, ta sẽ cùng tìm hiểu một số tính năng mới nhất ở phiên bản
Dreamweaver CS4. Một số tính năng được giới thiệu dưới đây dành cho những ai
đã có kinh nghiệm sử dụng Dreamweaver các phiên bản trước. Đối với những người
mới bắt đầu tiếp cận với Dreamweaver, có thể bỏ qua mục này và chuyển đến mục
“Tổng quan về các tính năng của Dreamweaver CS4” ở cuối bài học.
Bản CS4 giới thiệu rất nhiều các tính năng mới về thiết kế và viết mã. Ngoài ra, các
tính năng chính của Dreamweaver trong phiên bản này cũng được cải tiến nhiều.
Dreamweaver là một trong các công cụ thuộc bộ Adobe Creative Suite, nên mặc định
Dreamweaver có thể làm việc với các file được tạo ra từ các ứng dụng CS4 khác,
chẳng hạn, cho phép chỉnh sửa các hình ảnh tạo bởi Adobe Photoshop CS4 trực tiếp
trong Dreamweaver.

Giao diện người dùng mới
Dreamweaver CS4 có giao diện khá giống với các ứng dụng khác trong bộ Creative
Suite. Điểm nổi bật của giao diện mới này là công cụ cấu hình không gian làm việc,
cho phép người dùng có thể dễ dàng sắp xếp một không gian làm việc thuận tiện nhất
cho mình.

Chọn một không gian làm việc có sẵn phù hợp nhất với công

việc hoặc tự xây dựng một không gian làm việc tùy chỉnh riêng.

Dreamweaver đã cung cấp sẵn một số kiểu không gian làm việc thông dụng. Tuy nhiên,
nếu muốn, người dùng cũng có thể tự sắp xếp và xây dựng một không gian làm việc tùy
chỉnh riêng. Bên cạnh các không gian làm việc, Dreamweaver CS4 còn cung cấp chế
độ thu nhỏ cho các bảng của chương trình. Điều này cho phép người sử dụng có thể tiết
kiệm được không gian làm việc trên màn hình bằng cách thu nhỏ các bảng vào cạnh phải
của màn hình và mở rộng ra khi cần.

10

Thiết kế web với Dreamweaver CS4


Live View

1

Live View
Thông thường, các công cụ soạn thảo web trực quan đều không hiển thị chính xác như
trên trình duyệt web mà chúng cố gắng mô phỏng. Việc tương tác sử dụng mã kịch bản
ngày càng trở nên phổ biến khiến nhu cầu thiết kế các trạng thái khác nhau cho trang
web (bao gồm các menu, bảng và các thành phần giao diện) ngày càng trở nên quan
trọng hơn. Việc hiển thị tĩnh của chế độ xem Design trong Dreamweaver lúc này không
còn đáp ứng được các nhu cầu cao cấp của người dùng.
Chế độ xem Live View (xem chạy thực) mới của Dreamweaver, sử dụng động cơ
kết xuất WebKit (là nền tảng cho trình duyệt web Safari và Adobe AIR), cho bạn
một cái nhìn chính xác hơn về giao diện của trang web và khá gần với việc hiển thị
trên trình duyệt web. Ngoài ra, bạn còn có thể tương tác với trang web một cách
trực tiếp trong Dreamweaver, đồng thời xem được tất cả các trạng thái khác nhau

của trang web.



Tương tác với trang web trong chế độ Live View.

Khi chế độ xem Live Code (xem mã nguồn) và Live View được kích hoạt đồng thời,
ngay lập tức, mỗi thay đổi trên trang sẽ ảnh hưởng đến các đoạn mã đằng sau và ngược
lại. Với chế độ này, bạn có thể xem thử kết quả khi thêm vào và loại bỏ các mã JavaScript
hay việc bổ sung các nội dung động sử dụng Spry, vv...
Dreamweaver CS4 hỗ trợ khả năng xem thử các trạng thái của trang web bằng cách nhấn
vào nút Freeze JavaScript (đóng băng JavaScript) hoặc nhấn phím F6 để cố định trang
web tại một trạng thái cụ thể (chẳng hạn, giữ nguyên trang web trong trạng thái menu
mở và rê chuột lên menu). Bạn có thể chỉnh sửa và xem thử các thành phần của trang
web ngay trong Dreamweaver mà không phải sử dụng tính năng Preview in Browser
(hoặc nhấn phím F12) để chạy thử trên trình duyệt.

Bài 1, Làm quen với Dreamweaver CS4

11


1

Các file liên quan

Các file liên quan
Các dự án web đang ngày càng trở nên phức tạp hơn so với trước đây và mỗi trang
web bây giờ được tạo nên bởi rất nhiều thành phần khác nhau. Các thành phần này có
thể là Cascading StyleSheets (CSS), các file JavaScript hay thậm chí là những thành

phần được đính kèm vào mã kịch bản phía server. Dreamweaver CS4 cải thiện tính
năng thiết kế, quản lý site và ứng dụng web sử dụng nhiều tài nguyên một cách hiệu
quả hơn.
Thanh Related Files (các file liên quan) nằm ở trên cùng cửa sổ tài liệu và ngay dưới
các thẻ (tab) tài liệu. Thanh này liệt kê các file tạo nên trang web hoàn chỉnh. Bạn có thể
chuyển qua lại giữa các file này bằng thanh Related Files mà vẫn giữ được cửa sổ xem
thử của trang chính. Chế độ xem Design (xem thiết kế) (hoặc Live View) luôn hiển thị
ra file trang chính nhưng bạn vẫn có thể chỉnh sửa mọi file liên quan khác mà vẫn giữ
được cửa sổ hiển thị trực quan của trang web chính.

Thanh Related Files hiển thị các file khác nhau tạo nên trang web.

Code Navigator
Công cụ Code Navigator (điều hướng trong mã nguồn) đã được cải tiến để có thể dễ
dàng di chuyển đến tất cả các file liên quan (được liệt kê trong danh sách các định
nghĩa CSS) tham gia vào việc tạo style cho đối tượng được chọn. Từ giờ, bạn sẽ không
nhất thiết phải mở tất cả các file stylesheet để tìm một định nghĩa CSS nữa. Trong
phiên bản Dreamweaver CS4 mới, mọi thông tin về style của một đối tượng sẽ nằm
trong một menu ngữ cảnh. Với công cụ Code Navigator, mỗi khi trỏ chuột vào một
định nghĩa CSS, chương trình sẽ hiển thị các thuộc tính và giá trị tương ứng. Khi nhấn
chuột vào một định nghĩa CSS trong danh sách thì ngay lập tức đoạn mã nguồn CSS
liên quan sẽ được mở ra. Giống như những file liên quan khác, bạn có thể sử dụng
công cụ Code Navigator để mở các file CSS khác trong khi vẫn có thể tương tác với
trang HTML chính.

Công cụ Code Navigator cho phép di chuyển đến
mọi file liên quan một cách dễ dàng.

12

Thiết kế web với Dreamweaver CS4


Cải tiến về CSS

1

Cải tiến về CSS
Công cụ Property Inspector (Bộ rà thuộc tính) đã được thiết kế lại nhằm giảm thiểu các
sai sót có thể xảy ra khi thêm một đoạn mã HTML và CSS vào trang web. Ở các phiên
bản trước, tùy thuộc vào nút được nhấn trong Property Inspector mà một đoạn HTML
hoặc CSS có thể sẽ được thêm vào trong trang web. Việc này thường tạo ra một danh
sách các style rất khó hiểu như Style1, Style2... Ở phiên bản Dreamweaver CS4, hai
chức năng thêm các style dạng HTML và tạo kiểu CSS được tách thành hai phần riêng
biệt trong Property Inspector.

Property Inspector giúp cho việc chèn các đoạn mã HTML và CSS trở nên rõ ràng hơn.

Tập dữ liệu HTML
Tính năng tập dữ liệu HTML (HTML data set) mới của Dreamweaver cho phép chuyển
một file HTML thành một cơ sở dữ liệu nhỏ. Ví dụ, với tính năng tập dữ liệu HTML
này, bạn có thể nhập một bảng HTML chứa dữ liệu từ trang web này sang một trang
web khác (sử dụng JavaScript và Spry). Dữ liệu có thể được trình bày theo nhiều cách
khác nhau, như kiểu “Master/Detail” (Chính/Chi tiết) với một danh sách tóm tắt các dữ
liệu trong bảng. Sau khi nhấn chuột vào một mục trong danh sách này, nội dung chi tiết
của bảng sẽ hiện ra.

Tính năng tập dữ liệu HTML cho phép nhập
vào và hiển thị dữ liệu theo nhiều cách khác nhau.

Bài 1, Làm quen với Dreamweaver CS4

13


1

Các đối tượng Photoshop thông minh

Các đối tượng Photoshop thông minh
Trong phiên bản này, Dreamweaver hỗ trợ một tính năng rất quan trọng của bộ chương
trình Creative Suite, đó là các đối tượng thông minh - smart object. Khả năng này cho
phép bạn có thể kéo một file PSD vào trang web trong Dreamweaver, chỉnh sửa hình ảnh
cho phù hợp với trang web, thậm chí, thay đổi kích thước của hình ảnh. Nếu có bất cứ
cập nhật mới nào với file PSD ban đầu, một mũi tên màu đỏ sẽ xuất hiện trên hình ảnh
trong Dreamweaver thông báo rằng file nguồn đã bị thay đổi. Để cập nhật lại hình ảnh,
nhấn chuột vào Update (cập nhật) trên nút Original (gốc) trong Property Inspector.

Các đối tượng thông minh giúp việc cải tiến và cập nhật hình ảnh trong
Dreamweaver trở nên dễ dàng hơn.

Các tính năng mới bổ sung của Dreamweaver CS4
Hỗ trợ xây dựng ứng dụng Adobe AIR
Adobe AIR là một hệ thống đa nền tảng cho phép các nhà lập trình kết hợp công nghệ
HTML, AJAX, Adobe Flash và Flex để triển khai các ứng dụng Rich Internet Applications
(RIA) trên desktop. Với việc hỗ trợ đầy đủ Adobe AIR, Dreamweaver cho phép các nhà
lập trình sử dụng những công cụ quen thuộc để phát triển ứng dụng và dễ dàng tạo bộ cài
đặt giúp ứng dụng chạy được trên nhiều hệ điều hành khác nhau.

Subversion

Dreamweaver hiện tại đã cung cấp Subversion - một hệ thống quản lý phiên bản tương
tự như CVS và Visual Sourcesafe (VSS). Subversion thường được các công ty sử dụng
để xây dựng một môi trường cộng tác nhóm trong những dự án đòi hỏi ghi lại thay đổi
và quản lý các phiên bản mã nguồn/sản phẩm dự án. Trước đây, trong Dreamweaver,
14

Thiết kế web với Dreamweaver CS4


Tổng quan về các tính năng của Dreamweaver CS4

1

nếu muốn duy trì các phiên bản website, bạn phải làm một cách thủ công là sao chép
các phiên bản ra những thư mục khác nhau. Với Subversion, tất cả file đều được lưu
lên máy chủ Subversion. Các thay đổi giờ đây sẽ được theo dõi để có thể khôi phục
dự án về một trạng thái ở thời điểm bất kỳ trong quá khứ.

Tổng quan về các tính năng của Dreamweaver CS4
Cuốn sách này nhằm mục tiêu giúp người học tìm hiểu và sử dụng được các tính năng mà
Dreamweaver cung cấp. Phần sau đây sẽ tổng hợp các tính năng quan trọng của ứng dụng.
Ba chế độ hiển thị khác nhau: Khi soạn thảo một trang web, Dreamweaver cung cấp
ba chế độ xem: Design (xem thiết kế), Split (xem cả mã và thiết kế) và Code (xem
mã nguồn). Một chế độ xem rất dễ sử dụng trong Dreamweaver là Design, cho phép
xây dựng trang web một cách trực quan và quan sát được trang web sẽ hiển thị ra sao
trên thực tế trong khi đang kiến tạo. Các nhà thiết kế web và các lập trình viên có kinh
nghiệm hơn thường sử dụng chế độ xem Code để tiến hành viết mã HTML trực tiếp cho
trang web. Trong chế độ xem Code, mã nguồn được hiển thị với các màu sắc khác nhau
khiến việc đọc mã trở nên dễ dàng hơn.
Trong trường hợp muốn hiển thị cả hai chế độ trên, Dreamweaver cung cấp thêm chế

độ xem Split. Với chế độ này, màn hình làm việc sẽ được chia thành hai phần để người
dùng có thể quan sát được cùng lúc cả hai chế độ xem Design và Code. Để chuyển đổi
giữa các chế độ hiển thị trong Dreamweaver, bạn chỉ cần nhấn chuột vào chế độ cần
chuyển trên thanh công cụ Document (tài liệu).

Chế độ xem Split cho phép chỉnh sửa trang web một cách trực quan và xem phần mã phía sau
thay đổi như thế nào.

Hỗ trợ sẵn FTP: Dreamweaver hỗ trợ sẵn khả năng tải lên (upload) và tải xuống
(download) các file từ máy chủ, bằng cách sử dụng giao diện kéo thả của bảng Files
hoặc sử dụng nút Get/Put (Lấy về/Đẩy lên) ở bất kỳ thời điểm nào, để gửi các trang web
đang soạn thảo lên máy chủ, mà không cần phải cài đặt thêm bất cứ phần mềm bổ sung
nào khác. Ngoài ra, Dreamweaver cũng cung cấp chức năng Check In/Check Out và các
tính năng đồng bộ hóa để quản lý dễ dàng hơn.
Bài 1, Làm quen với Dreamweaver CS4

15


1

Tổng quan về các tính năng của Dreamweaver CS4
Chèn các đối tượng và mã vào trang web bằng bảng Insert: Hầu hết các đối tượng
phổ biến nhất của một trang web đều có thể được tìm thấy trên bảng Insert. Các đối
tượng đã được tổ chức thành từng nhóm trên bảng. Bạn chỉ cần nhấn chuột một lần vào
các biểu tượng tương ứng trên bảng để thêm đối tượng đó vào trong trang web. Ngoài
ra, Dreamweaver cũng cung cấp các bảng bổ sung để có thể điều chỉnh các đối tượng
hiện ra như mong muốn. Các công cụ mặc định trong bảng Insert là những công cụ định
dạng, xây dựng form và bố cục trang web. Bạn có thể lựa chọn các biểu tượng hay sử
dụng nhất và sắp xếp vào thẻ Favorites trong bảng.

Bảng Insert được chia thành nhiều
chủ đề tương ứng với từng tác vụ cụ thể.

Tùy biến bố cục không gian làm việc: Dreamweaver cho phép lưu lại vị trí các bảng và
thanh công cụ để tiện thao tác trong quá trình làm việc. Dreamweaver CS4 hỗ trợ việc
lưu lại các bố cục không gian làm việc riêng theo những người dùng khác nhau, hoặc
tạo các không gian làm việc riêng cho từng loại công việc cụ thể như: viết mã, thiết kế
hay xây dựng bố cục giao diện cho trang web.

Tùy biến bảng Favorites với các biểu
tượng từ bất kỳ mục nào trong bảng Insert.

16

Thiết kế web với Dreamweaver CS4


Cách thức hoạt động của website

1

Giao diện trực quan: Giao diện làm việc của Dreamweaver chứa các công cụ thiết kế
quen thuộc như: đường canh (guide), thước (ruler), các công cụ đo (measuring tool) và
lưới định vị (positioning grid). Stylesheet thời gian thực cho phép tùy biến giao diện
của trang ngay khi thiết kế, khiến việc tạo bố cục cho trang trở nên nhanh chóng và dễ
dàng hơn.

Thước, đường lưới và các đường canh khiến việc xác định kích thước và định vị các đối tượng trên trang
web trở nên chính xác hơn.

Bảng CSS: Dreamweaver cung cấp rất nhiều tùy chọn về thiết kế và định dạng,
cho phép người dùng có thể tạo, chỉnh sửa và quản lý các style khi cần thông qua
bảng CSS.

Cách thức hoạt động của website
Trước khi tiến hành xây dựng trang web (và một website), bạn cần nắm được cách
thức hoạt động cơ bản của một website, trang web sẽ hiển thị ra sao trên máy tính của
người dùng và những điều cơ bản cần biết để đảm bảo website hiển thị và hoạt động
tốt nhất.

Bài 1, Làm quen với Dreamweaver CS4

17


1

Cách thức hoạt động của website

Một lưu đồ đơn giản
Điều gì xảy ra khi nhập một địa chỉ vào thanh địa chỉ trên trình duyệt web? Hầu hết mọi
người không quan tâm đến điều này và chỉ biết mỗi khi nhập một địa chỉ vào thanh địa
chỉ (URL) của trình duyệt là website sẽ hiện ra tức thì. Sự thực, rất nhiều hoạt động đã
diễn ra đằng sau để có thể gửi đến trình duyệt kết quả hiển thị là một trang web mỗi khi
ta mua sắm trên mạng, kiểm tra e-mail hay tìm tài liệu.
User Machine (client)

/>
Web Host (server)

Sau khi nhập một URL hoặc một địa chỉ IP vào trình duyệt, máy tính sẽ kết nối đến một
máy tính ở xa (còn gọi là máy chủ hay server) và tải về nội dung HTML, hình ảnh và các
tài nguyên cần thiết để tạo nên trang web hoàn chỉnh. Các trang web được gửi đến máy
tính của người dùng ở một dạng không hoàn chỉnh mà các trình duyệt web (như Internet
Explorer, Firefox, Safari…) sẽ chịu trách nhiệm kết hợp lại và định dạng trang dựa trên
mã HTML nhận được. HTML (Hypertext Markup Language) là một ngôn ngữ đơn giản
dựa trên cấu trúc thẻ hướng dẫn cho trình duyệt biết làm thế nào và ở chỗ nào sẽ thêm
vào hoặc định dạng hình ảnh, văn bản và các nội dung đa phương tiện. Các trang web
được viết bằng ngôn ngữ HTML. Dreamweaver sẽ tự động tạo ra các mã HTML khi ta
xây dựng trang web bằng chế độ xem Design.
Nhà cung cấp dịch vụ Internet (ISP) là công ty chuyên cung cấp dịch vụ Internet cho
người dùng. Một số ISP nổi tiếng ở Mỹ bao gồm America Online và Earthlink (ở Việt
Nam có FPT, Viettel, VDC). Để xem nội dung của các trang web thông qua kết nối Internet, bạn phải có một trình duyệt web như Internet Explorer, Firefox hay Safari. Một
trình duyệt có thể phân tích mã HTML và hiển thị ra nội dung của các trang web với các
hình ảnh, văn bản và video.

Tên miền và địa chỉ IP
Thông thường, bạn hay nhập tên miền của một website vào thanh địa chỉ của trình duyệt
web (chẳng hạn như eBay.com). Chủ sở hữu của website đã mua tên miền này và sử
dụng nó để thay thế cho địa chỉ IP. Địa chỉ IP là một địa chỉ dạng số được dùng để định
vị, tìm kiếm các trang web và file của một website.
Vậy làm thế nào web biết được tên miền nào sẽ gắn với địa chỉ IP nào (và website nào)?
Để làm được điều này, cần có một máy chủ Dịch vụ phân giải tên miền (Domain Name
Service, gọi tắt là DNS). DNS sẽ tạo ra các kết nối giữa tên miền và địa chỉ IP.

18

Thiết kế web với Dreamweaver CS4

Giới thiệu về HTML

1

Server và web host
Một máy chủ DNS chịu trách nhiệm gắn một tên miền với địa chỉ IP tương ứng. Có thể
hình dung, máy chủ DNS giống như một nhân viên trực tổng đài điện thoại, chịu trách
nhiệm kết nối các cuộc gọi giữa người gọi và người nghe với nhau. Các máy chủ DNS
cơ bản được quản lý bởi nhà cung cấp máy chủ web hoặc các nhà đăng ký dịch vụ web
nơi tên miền được mua. Khi tìm thấy một địa chỉ IP tương ứng với tên miền, yêu cầu của
người dùng sẽ được đưa đến máy chủ và thư mục lưu trữ website. Sau khi yêu cầu đến
được máy chủ, máy chủ sẽ gửi trang chủ của website, thường có tên dạng index.html,
default.html hay bất kỳ trang chủ nào khác, do máy chủ cấu hình trước.
Máy chủ là một máy tính khá giống với máy tính để bàn thông thường, nhưng lại có khả
năng xử lý được một lượng truy cập từ hàng nghìn người dùng cùng một lúc. Đồng thời,
máy chủ phải duy trì kết nối liên tục đến Internet để website có thể hoạt động được 24
giờ một ngày. Máy chủ thường được quản lý bởi các nhà cung cấp máy chủ web (web
host). Những công ty này sẽ thu phí lưu trữ và chịu trách nhiệm đưa website lên mạng
Internet. Một máy chủ có thể lưu trữ được hàng trăm website. Có rất nhiều nhà cung
cấp dịch vụ web nổi tiếng, chẳng hạn như Yahoo! và các công ty lớn chuyên về lưu trữ
web như GoDaddy. Các công ty lớn thường có các hệ thống máy chủ và website riêng
đặt tại công ty.

Vai trò của trình duyệt web
Một trình duyệt web là một ứng dụng có khả năng tải về và hiển thị các trang HTML.
Mỗi khi gửi một yêu cầu đến máy chủ web bằng cách nhấn chuột vào một liên kết hoặc
nhập vào một địa chỉ website, nghĩa là bạn đang yêu cầu trang HTML và các file đi kèm.
Công việc của trình duyệt web là tái tạo và hiển thị trang web dựa vào các chỉ dẫn trong
mã HTML để có thể bố cục và định dạng các nội dung văn bản, hình ảnh… trên trang

web. Mã HTML giống như một tập các chỉ thị lắp ráp cho trình duyệt.

Giới thiệu về HTML
HTML là cơ sở cho hoạt động của web. Các trang web được xây dựng bằng mã
HTML. Trình duyệt sẽ đọc và xử lý mã HTML để bố cục, định dạng cho văn bản,
hình ảnh và video của trang web. Khi thiết kế và bố cục trang web trong chế độ xem
Design, Dreamweaver sẽ tự động viết mã để hiển thị và định dạng trang web trong
trình duyệt.
Ngược lại với suy nghĩ của nhiều người, HTML không phải là một ngôn ngữ lập trình,
mà là một ngôn ngữ đánh dấu văn bản đơn giản. HTML không thuộc sở hữu của Dreamweaver nên bạn có thể tạo và chỉnh sửa HTML bằng bất kỳ công cụ soạn thảo văn bản nào,
thậm chí cả với ứng dụng Notepad của Windows và TextEdit của Mac OS X. Công việc
của Dreamweaver là cung cấp một cách thức để tạo các trang web mà không phải viết mã
thủ công. Nếu muốn viết mã, Dreamweaver cũng cung cấp chế độ xem Code đã được trình
bày trong các phần trước. Chế độ xem Code cung cấp một trình soạn thảo giàu tính năng,
hỗ trợ hiển thị các màu sắc khác nhau cho mã và hỗ trợ các công cụ định dạng, để việc viết
và đọc mã HTML cũng như các ngôn ngữ khác trở nên dễ dàng hơn.
Bài 1, Làm quen với Dreamweaver CS4

19


1

Giới thiệu về HTML

Cấu trúc thẻ và các thuộc tính
HTML sử dụng các thẻ hoặc từ khóa đặt trong các dấu ngoặc nhọn (< và >), cho phép
sắp xếp hoặc định dạng nội dung của trang web. Nhiều thẻ yêu cầu cần có một thẻ
đóng. Về bản chất, thẻ đóng giống thẻ bình thường, nhưng trước tên thẻ là một dấu
xổ (/).

1 Chọn File > Open. Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons.
Chọn file BasicHTML.html và nhấn vào nút Open.

2 Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để quan sát bố cục của
trang web cũng như mã nguồn của trang web.

Quan sát ở dòng 10 (xem số dòng ở cạnh bên trái của bảng Code). Chuỗi My Bold
Title đang nằm trong thẻ Strong (từ strong chứa trong cặp dấu ngoặc). Bất kỳ ký tự
hay chữ cái nào nằm trong thẻ này đều được định dạng in đậm và hiển thị trong chế
độ xem Design như sau:

Đoạn mã chứa các thẻ để định dạng nội dung văn bản trên trang.

Các thẻ có thể chứa định nghĩa CSS bổ sung thông tin về cách thức hiển thị nội dung
chứa trong thẻ. Các định nghĩa CSS có thể mang một số giá trị khác nhau, như kích
cỡ, màu sắc hoặc văn bản sẽ được căn về bên nào. Hãy quan sát dòng chữ This text
will appear inside of its own paragraph. Dòng này được bao trong một thẻ p (viết
tắt của paragraph - đoạn) và tách biệt với các đoạn khác bằng một dòng bên trên và
bên dưới. Bạn có thể bổ sung các định nghĩa loại (class) cho thẻ này để căn chỉnh
đoạn văn bản về một bên như mong muốn.

3 Bôi đen toàn bộ dòng This text will appear inside of its own paragraph ở phía dưới
màn hình trong chế độ xem Design.

4 Trong khi nút CSS đang được chọn trong Property Inspector, tìm các nút căn chỉnh
đoạn. Nhấn chuột vào nút Align Center (căn giữa) ( ).

20

Thiết kế web với Dreamweaver CS4


Giới thiệu về HTML

1

5 Trong hộp thoại New CSS Rule (Tạo định nghĩa CSS mới), nhập chuỗi .center vào
trường Selector Name và nhấn OK.

Đặt tên cho style mới tạo trong hộp thoại New CSS Rule.

6 Đoạn văn bản lúc này đã được căn giữa. Quan sát trong chế độ xem Code, chú ý
rằng định nghĩa .center đã được thêm vào thẻ

mở.

Sau khi căn chỉnh hoặc định dạng văn bản trong Property Inspector, các định nghĩa và thuộc tính
CSS sẽ được bổ sung vào trong phần mã của trang web.

Bài 1, Làm quen với Dreamweaver CS4

21


1

Giới thiệu về HTML
Để tìm hiểu thêm về việc định dạng văn bản với các định nghĩa CSS, xem Bài 3,
“Thêm văn bản và hình ảnh”.

7 Chọn File > Save để lưu trang web lại, sau đó chọn File > Close.

Cấu trúc của một trang HTML
Mặc dù có rất nhiều thẻ HTML để định dạng văn bản, tuy nhiên một số thẻ được thiết kế
để tạo ra các dữ liệu cấu trúc như danh sách, bảng hoặc chính trang HTML. Thẻ HTML
là thẻ cơ bản nhất, được dùng để xác định điểm bắt đầu và kết thúc của mã HTML trong
một trang web.


<html></html>

Bên trong thẻ HTML chính là hai thẻ định nghĩa các khu vực quan trọng nhất của trang
web: head (phần mô tả) và body (phần nội dung). Phần head của một trang chứa những
đối tượng không hiện ra ở phía người dùng. Tuy nhiên, dữ liệu phần này đóng vai trò rất
quan trọng, chẳng hạn như các từ khóa cho công cụ tìm kiếm, mô tả về trang, các liên
kết tới những mã kịch bản hoặc stylesheet bên ngoài. Để tạo head cho trang web, trong
thẻ HTML, bổ sung thêm thẻ <head>:




<html>
<head></head>
</html>

Phần body chứa tất cả các thành phần có thể hiển thị của trang web. Đây là nơi bạn sắp
xếp định dạng văn bản, hình ảnh và các nội dung đa phương tiện khác. Để định nghĩa
phần body, ta dùng thẻ <body>:

<html>
<head></head>
<body>



Văn bản và hình ảnh sẽ nằm ở đây...




</body>
</html>

Đối với mỗi file HTML được tạo ra, Dreamweaver sẽ tự động bổ sung các lệnh trên
vào trang. Mỗi khi có một đối tượng có thể hiển thị được thêm vào trang, các đoạn mã
HTML tương ứng sẽ được thêm vào bên trong thẻ <body>.

22

Thiết kế web với Dreamweaver CS4


Giới thiệu về HTML

1

Chèn hình ảnh bằng mã HTML
Trong HTML, một số thẻ được dùng để đặt một đối tượng như hình ảnh hoặc file đa

phương tiện vào trong trang. Thẻ <img> là thẻ thường gặp nhất. Nhiệm vụ của thẻ này
là đặt và định dạng một hình ảnh lên trang web. Để thêm một hình ảnh và quan sát mã
kết quả, bạn làm như sau:

1 Chọn File > Open. Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons.
Chọn file Images.html và nhấn Open để chỉnh sửa file.

2 Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để xem cả giao diện và
mã lệnh của trang. Trong màn hình Design của chế độ xem Split, nhấn chuột vào
bên dưới dòng văn bản để đặt con trỏ chuyển đến vị trí này. Đây là nơi bạn cần đặt
hình ảnh mới vào.

Chọn chế độ xem Split trước khi chèn một hình ảnh vào trang.

Bài 1, Làm quen với Dreamweaver CS4

23


1

Giới thiệu về HTML

3 Trong mục Common của bảng Insert ở bên phải màn hình, nhấn chuột vào mục

Images ( ) và chọn Image. Hộp thoại Select Image Source hiện ra. Chọn file có tên
gears.jpg nằm trong thư mục con images của thư mục dw01lessons.

Chọn Image từ thẻ Common của thanh
công cụ Insert.

4 Nhấn OK (Windows) hoặc Choose (Mac OS). Sau khi hộp thoại Image Tag

Accessibility Attributes (Các thuộc tính về khả năng truy cập của thẻ ảnh) hiện
ra, nhập chuỗi Gears Image vào trong trường Alternate. Nhấn OK để chèn
hình ảnh vào trang.

Thêm một đoạn văn bản thay thế cho hình ảnh.

Khi chèn ảnh, hộp thoại Image Tag Accessibility Attributes hiện ra, cho phép
bạn bổ sung các thông tin dành cho người dùng có nhu cầu đặc biệt (chẳng
hạn như, những người bị khiếm thị). Đối với mỗi hình ảnh, bạn nên nhập một
đoạn văn bản thay thế. Để hộp thoại này không hiện ra mỗi lần chèn ảnh, có
thể chọn Edit > Preferences (Windows) hoặc Dreamweaver > Preferences (Mac
OS). Trong nhóm lệnh Accessibility, bỏ chọn trong mục Images.
24

Thiết kế web với Dreamweaver CS4


Giới thiệu về HTML

1

5 Trong đoạn mã trên, thẻ <img> HTML đã được dùng để chèn hình ảnh. Nhấn chuột

lên hình ảnh trong cửa sổ tài liệu để chọn hình ảnh đó. Thanh Property Inspector ở
phía dưới trang sẽ hiển thị và cho phép bạn thiết lập các thuộc tính cho hình ảnh.

6 Trong mục Border của Property Inspector, nhập giá trị 3 để tạo một đường viền có

độ rộng 3 pixel xung quanh hình ảnh và nhấn Enter (Windows) hoặc Return (Mac
OS). Nhấn chuột vào nền của trang để bỏ chọn hình ảnh, chú ý sự xuất hiện của
đường viền. Lúc này, thẻ <img> chứa thuộc tính về đường viền và mang giá trị là
3, đúng như bạn vừa nhập vào trong thanh Property Inspector.

Mỗi khi thay đổi hoặc bổ sung các tùy chỉnh cho hình ảnh được chọn, Dreamweaver sẽ tự động
thay đổi phần mã ở phía sau.

7 Chọn File > Save để lưu trang web lại, sau đó chọn File > Close. Chú ý rằng, trong

HTML, hình ảnh và nội dung đa phương tiện không được nhúng vào mà được chèn
vào trong trang. Điều này có nghĩa là, các thẻ sẽ trỏ đến vị trí tương đối của file so
với trang. Những file được các thẻ trỏ đến đều phải luôn tồn tại để có thể hiển thị lên
trang. Đó là lý do vì sao các trang HTML thường có kích thước file rất nhỏ.

Màu sắc trong HTML
Trong rất nhiều bảng của Dreamweaver và trong các đoạn mã của trang web, mỗi màu sắc
thường được đại diện bởi một mã 6 ký tự và đứng trước là dấu thăng (#). Mã này được gọi
là mã thập lục phân. Các trang HTML sử dụng hệ thống mã này để xác định và sử dụng màu
sắc. Bằng cách sử dụng mã thập lục phân, bạn gần như có thể tạo ra bất kỳ màu sắc nào.
Chẳng hạn, nếu muốn tạo ra một màu đỏ thẫm trong HTML, bạn dùng mã #CC0000.
Các cặp hai chữ số ở đầu, giữa và cuối của mã thập lục phân đại diện cho giá trị trong
phổ màu RGB (Red - đỏ, Green - xanh lá cây, Blue - xanh da trời). Chẳng hạn, màu
trắng trong RGB có các giá trị R:255 G:255 B:255 thì trong HTML sẽ là #FFFFFF
(255|255|255). Việc chọn màu trong Dreamweaver khá đơn giản và thuận tiện nhờ có
bảng Swatches dễ sử dụng.

Bảng Swatches giúp việc chọn
màu sắc trở nên dễ dàng hơn.

Bài 1, Làm quen với Dreamweaver CS4

25


1

Giới thiệu về HTML
Công cụ lấy mẫu màu trong Adobe Photoshop và Illustrator cũng sử dụng các
mã màu thập lục phân, cho phép bạn có thể dễ dàng sao chép màu sắc từ các
ứng dụng này cho Dreamweaver.

Các quy tắc về phân biệt kiểu chữ hoa, chữ thường và khoảng trắng
HTML là một ngôn ngữ mềm dẻo và có rất ít các quy tắc về hình thức riêng. Tùy thuộc
vào yêu cầu của bạn mà HTML sẽ phân biệt chữ hoa, chữ thường, hoặc không. Để xem
cách HTML xử lý các khoảng trắng, thực hiện các bước sau:

1 Chọn File > Open. Hộp thoại Open mở ra, di chuyển đến thư mục dw01lessons.
Chọn file Whitespace.html và nhấn Open.

2 Nếu file chưa được mở trong chế độ xem Split, nhấn chuột vào nút Split ( ) trên
thanh công cụ Document để xem được cả bố cục trang và phần mã. Chú ý hình bên
dưới, dòng 9 của phần mã có ba thẻ trông tương đối giống nhau:

Tất cả các thẻ này đều hợp lệ dù có kiểu chữ hoa, chữ thường khác nhau.

26

Thiết kế web với Dreamweaver CS4

Giới thiệu về HTML

1

Cả ba thẻ này có kiểu chữ hoa, chữ thường khác nhau hoàn toàn, tuy nhiên tất cả
đều hợp lệ và được xử lý như nhau. Hãy để ý đoạn This is one sentence. This is
another. Quan sát trong cửa sổ mã, bạn thấy có rất nhiều dấu cách giữa hai dòng
này, nhưng trong chế độ xem Design thì lại không thấy có dấu cách nào hiện ra.
Điều này là do tất cả các dấu cách và dấu xuống dòng giữa hai đoạn của văn bản
hoặc thẻ sẽ bị loại bỏ.

Mặc dù có rất nhiều khoảng trống giữa hai câu nhưng chúng vẫn được hiển
thị liền nhau trong chế độ xem Design.

3 Để tạo một dấu xuống dòng hoặc một đoạn mới, bạn phải nhập vào thẻ HTML.
Đặt con trỏ vào vị trí sau câu đầu tiên phía dưới cửa sổ Design, sau đó nhấn phím
Shift+Enter (Windows) hoặc nhấn Shift+Return (Mac OS) hai lần. Ngay lập tức,
hai dấu xuống dòng được thêm vào trang. Quan sát trong cửa sổ Code lúc này, hai
thẻ
(break) đã được thêm vào trong mã HTML của trang. Sau khi hiển thị trên
trình duyệt, thẻ
sẽ thêm các dòng trắng giữa các câu, tuy nhiên các câu này
vẫn được HTML coi là trong cùng một đoạn (paragraph).

Để tạo một dấu xuống dòng, giữ phím Shift và nhấn phím Enter hoặc Return.

Bài 1, Làm quen với Dreamweaver CS4

27

1

Giới thiệu về HTML

4 Để tạo một đoạn mới, đặt con trỏ trước cụm This is another và nhấn Enter (Windows)
hoặc Return (Mac OS). Đoạn này sẽ được tách ra khỏi dòng trước và sau nó, đồng thời
được bao trong cặp thẻ

(paragraph).

Dreamweaver sẽ tự động tạo ra một đoạn mới mỗi khi bạn nhấn phím
Enter hoặc Return.

Trong Dreamweaver, các dấu cách liên tiếp sẽ bị loại bỏ và chỉ hiển thị như một
dấu cách trong chế độ xem Design cũng như trên trình duyệt.

5 Chọn File > Save để lưu trang web lại, sau đó chọn File > Close.

Phân cấp thẻ
Các thẻ HTML tuân theo một thứ tự gọi là phân cấp thẻ để đảm bảo mọi thứ sẽ hiển
thị đúng. Thẻ đứng đầu trong phân cấp thẻ là thẻ <html> và các thẻ khác sẽ nằm dưới
thẻ <html>. Các thẻ như <body> lại chứa những thẻ nhỏ hơn dưới nó, như: thẻ

,
<img> (image) và <strong> (bold). Ngoài ra, các thẻ cấu trúc như thẻ tạo đoạn, danh
sách, bảng sẽ có cấp độ cao hơn so với những thẻ định dạng như <strong> và <em>
(italic). Quan sát đoạn mã ví dụ sau:


<strong>

Đoạn được in đậm

</strong>

Mặc dù đoạn mã này có thể sẽ hoạt động trên một số trình duyệt, song cách làm này
không được khuyến khích vì thẻ <strong> có phân cấp thấp hơn so với thẻ

. Đoạn

mã sau là cách chuẩn hơn và an toàn hơn nếu muốn tạo một đoạn được in đậm:


28

<strong>Đoạn được in đậm</strong>

Thiết kế web với Dreamweaver CS4


Giới thiệu về HTML

1

Dreamweaver giữ được nguyên tắc các thẻ lồng nhau rất tốt. Nếu muốn thao tác với mã
theo phương pháp thủ công, bạn phải nhớ các kỹ thuật viết mã chuẩn.

XHTML 1.0 Transitional
Phiên bản mới nhất của HTML là XHTML 1.0, một phiên bản chặt chẽ hơn so với HTML,
khiến HTML tương thích hơn với những nền tảng mới như các thiết bị di động, bằng cách
quy định nghiêm khắc hơn về định dạng mã. XHTML là sự kết hợp giữa các thành phần
của HTML và ngôn ngữ mô tả dữ liệu XML. XML là chữ viết tắt của Extensible Markup
Language (ngôn ngữ đánh đấu mở rộng), đã trở thành một cách thức phổ biến để trao đổi
thông tin giữa các ứng dụng, nền tảng và hệ thống dường như không liên quan với nhau.
Mặc định rằng, Dreamweaver tạo ra các trang web mới sử dụng tiêu chuẩn XHTML 1.0
Transitional.

Sự khác nhau giữa HTML và XHTML
Mặc dù các thẻ và thuộc tính vẫn giữ nguyên nhưng cấu trúc của ngôn ngữ đã chặt chẽ
hơn trong XHTML. Trong khi HTML rất thoải mái trong việc viết mã cẩu thả như lồng

và đóng các thẻ, thì XHTML lại yêu cầu tất cả các thẻ đều phải có thẻ đóng và phải lồng
các thẻ đúng theo phân cấp. HTML không phân biệt kiểu chữ hoa, chữ thường khi tạo
thẻ; tuy nhiên, trong XHTML, tất cả các thẻ phải sử dụng kiểu chữ thường.
Ví dụ, một thẻ
thông thường không cần phải có thẻ đóng thì bây giờ buộc phải
có thẻ đóng. Tuy nhiên, bạn có thể viết các thẻ tự đóng bằng cách dùng một dấu gạch
chéo (/) - bảo đảm rằng có một khoảng trống giữa chữ (br) và dấu gạch chéo - rồi đóng
dấu ngoặc như sau:





Kết quả, bạn sẽ nhận được một ngôn ngữ chuẩn tắc hơn, tận dụng được các trình duyệt
và nền tảng thiết bị mới, trong khi vẫn giữ được tính tương thích với những trình duyệt
cũ. Khi tạo một trang mới, để tạo các trang web sử dụng chuẩn XHTML, bạn chỉ cần
chọn kiểu Document Type (Doc Type - loại tài liệu) là XHTML 1.0 Transitional.

Tìm hiểu thêm về mã
Mặc dù đôi chỗ trong giáo trình đưa ra các đoạn mã ví dụ, nhưng viết mã thủ công
không phải là mục đích chính của các bài học. Cách tốt nhất để tìm hiểu mã ứng với
thành phần giao diện trong chế độ xem Design là chuyển qua chế độ xem Code để quan
sát các đoạn mã tương ứng được tạo ra.
Cần nhớ rằng, mỗi nút, bảng và menu trong Dreamweaver đều đại diện cho một số kiểu
thẻ, thuộc tính hoặc giá trị HTML nào đó, và gần như bạn sẽ không nghiên cứu các
thành phần không liên quan đến hoặc chỉ có trong Dreamweaver. Có thể coi không gian
làm việc của Dreamweaver như một cách thức thoải mái hơn, dễ dàng để thao tác với
ngôn ngữ HTML.
Bài 1, Làm quen với Dreamweaver CS4

29

1

Màn hình chào mừng

Màn hình chào mừng
Điểm chung của hầu hết các ứng dụng CS4 là màn hình chào mừng chứa các file mới tạo
hoặc được mở gần đây. Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động
xong hoặc không có file nào được mở. Từ màn hình chào mừng, bạn có thể tạo các trang
hoặc tạo site mới, mở một file gần đây hoặc tạo ra một file mới với nhiều kiểu định dạng
được hỗ trợ bởi Dreamweaver.

Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động xong hoặc không
có file nào được mở.

Những thành phần chính trên màn hình chào mừng:
Open a Recent Item (Mở một file làm việc gần đây): Danh sách các file làm việc gần
đây nhất sẽ xuất hiện ở cột bên trái cùng của màn hình khởi động. Ngoài ra, bạn có thể
lựa chọn các file khác để mở bằng cách nhấn vào nút Open ( ) ở dưới cùng màn hình.
Create New (Tạo mới): Ngoài các trang HTML, Dreamweaver hỗ trợ tạo mới rất nhiều
các định dạng khác như CSS, JavaScript và XML. Dreamweaver không chỉ là một công
cụ xây dựng trang web, mà còn là một trình soạn thảo lý tưởng cho việc tạo các file
không phải là HTML. Ngoài ra, bạn có thể tạo các site mới trong Dreamweaver bằng
cách sử dụng liên kết bên dưới màn hình hoặc chọn mục More để xem những tùy chọn
file khác.
Tạo file từ các file mẫu: Nếu không muốn tạo một file và thiết kế lại từ đầu, hoặc trong
trường hợp cần một vài ý tưởng thiết kế ban đầu, Dreamweaver cung cấp sẵn rất nhiều file
mẫu, từ các trang với thiết kế trang đầy đủ đến những file chỉ có bố cục từng phần. Thiết kế
của các trang mẫu có thể chia thành nhiều loại, từ các trang về sức khỏe đến giải trí, cung

cấp nhiều lựa chọn giúp bạn có thể nhanh chóng xây dựng được một trang web phù hợp.
Trang mẫu chứa rất nhiều bố cục phổ biến và hữu ích cho việc xây dựng nên các trang web
thương mại điện tử, hiển thị hình ảnh và dùng các form (mẫu biểu) hữu dụng.
30

Thiết kế web với Dreamweaver CS4


Tạo, mở và lưu tài liệu

1

Tạo, mở và lưu tài liệu
Các bài học trong cuốn sách này yêu cầu người học phải có kỹ năng tạo, lưu và mở
file có sẵn. Hầu hết các tác vụ liên quan đến file đều nằm trên menu File ở trên cùng
của cửa sổ chương trình, hoặc nằm ở trang chào mừng hiện ra khi vừa khởi động xong
Dreamweaver.

Tạo tài liệu mới
Dreamweaver hỗ trợ việc tạo các file văn bản, phổ biến nhất là dạng HTML (trang web).
Ngoài ra, Dreamweaver còn hỗ trợ việc tạo các loại file khác như CSS, XML, JavaScript
và thậm chí cả Flash ActionScript.
Bạn có thể tạo file từ đầu hoặc sử dụng các chủ đề và mẫu bố cục sẵn. Để tạo file mới,
sử dụng menu File hoặc màn hình chào mừng.

Hộp thoại New Document cung cấp các lựa chọn file mới với nhiều định dạng và mẫu có sẵn.

1 Để tạo một file mới, chọn File > New. Hộp thoại New Document (tài liệu mới)
hiện ra.

2 Chọn mục Blank Page và dưới cột Page Type, chọn HTML. Dưới mục Layout, chọn
<none> để bắt đầu với một file trắng. Trong mục DocType, giữ nguyên như mặc
định. Nhấn vào nút Create.

3 Chọn File > Save hoặc File > Save As để tiến hành lưu file.
4 Một hộp thoại sẽ hiện ra, yêu cầu chọn vị trí lưu file và tên file. Chú ý rằng, các
file HTML phải được lưu với phần mở rộng là .html để trình duyệt có thể hiểu và
hiển thị chính xác. Quy tắc này cũng đúng với mọi kiểu file khác (như .xml, .css
hay .cfm).


Bài 1, Làm quen với Dreamweaver CS4

31