công nghệ website - chương viii_deamweaver

CHƢƠNG VIII
DREAMWEAVER
I.GIỚI THIỆU
 Dreamweaver MX là một công cụ thiết kế web
chuyên nghiệp, phần cốt lõi của nó là HTML
 Dreamweaver MX là một công cụ trực quan, có
thể bổ sung Javascrip, biểu mẫu, bảng biểu và
nhiều loại đối tượng khác mà không cần viết
một đoạn mã nào
 Dreamweaver MX có thể thiết kế bằng Design
view hoặc Code view hoặc Code and Design
II. CÀI ĐẶT
 Dreamweaver MX 2004 là một chương trình
trong bộ Macromedia MX.
 Sau khi cài đặt, khởi động Draemvaerver MX:
Start Programs Macromedia  Macromedia
Dreamweaver MX 2004

III. MÀN HÌNH DREAMWEAVER
 Insert Bar:

– Common: Chèn các đối tượng: Image, Flash,
Date, Template, …
– Layout: Chứa các công cụ trình bày trang,
gồm 3 chế độ: Standard, Expended, Layout
– Forms: Chứa các công cụ tạo Form
– Text: Dùng định dạng văn bản
– HTML: Tạo trang web bằng code view…

III. MÀN HÌNH DREAMWEAVER
 Document Toolbar:

– Show code view: hiển thị mã HTML
– Show Design view: chế độ thiết kế, sử dụng
các công cụ của Dreamwerver
– Show code and design view: hiển thị mã
HTML và chế độ Design view
– Title: tiêu đề của trang Web
– Preview/Debug in Browser:Xem kết quả
trang web thông qua trình duyệt web

III. MÀN HÌNH DREAMWEAVER
 Document Window: Cửa sổ dùng để tạo và
hiệu chỉnh trang Web.
 Properties Inspector:
– Hiển thị các thuộc tính của các đối tượng
đang được chọn.
– Cho phép hiệu chỉnh các thuộc tính của đối
tượng được chọn.

III. MÀN HÌNH DREAMWEAVER
 Panel groups: nhóm các Panel dùng để quản
lý các đối tượng trong trang Web
– Bật / tắt các thanh Panel:
Chọn menu Window
 Chọn thanh Panel tương ứng
– Mở rộng các thanh Panel:
 Click vào mũi tên ở góc trái
của mỗi Panel.

III. MÀN HÌNH DREAMWEAVER

 Status bar: Thanh trạng thái, nằm dưới đáy
của Document Window, hiển thị Tag Selector,
Window size, Document size và Download time.

III. MÀN HÌNH DREAMWEAVER
–
Tag Selector
: Hiển thị tag HTML hiện hành
–
Document size and Download time
: Kích cở
ước chừng của tài liệu và thời gian tải tài liệu
–
Window size
: Hiển thị kích thước hiện tại của
tài liệu, được tính bằng Pixel. Khi định kích
thước của trang web phải tính đến việc sao
cho an toàn đối với mọi độ phân giải.

IV.KẾ HOẠCH THIẾT KẾ WEBSITE
 Các yêu cầu cơ bản khi thiết kế website:
– Xác định yêu cầu và mục đích của Website
– Chuẩn bị nội dung cho các trang
– Phác thảo khuôn mẫu (Template) cho trang,
thường các trang có cùng chủ đề thì sử dụng
chung một template.
– Mọi trang web phải có ít nhất một liên kết.
– Cho phép truy cập trực tiếp.
– Đơn giản và nhất quán.

IV.KẾ HOẠCH THIẾT KẾ WEBSITE
 Xác định cấu trúc của Website, có 3 kiểu cấu
trúc:
– Tuyến tính: Hiển thị thông tin một cách
tuần tự. Chỉ thích hợp cho các website nhỏ.


IV.KẾ HOẠCH THIẾT KẾ WEBSITE
– Phân cấp: theo tầm quan trọng của nội
dung.

IV.KẾ HOẠCH THIẾT KẾ WEBSITE
– Ô lƣới: Các chủ đề thường không có sự
phân cấp về mức độ quan trọng.
V.TẠO WEBSITE BẰNG DREAMWEAVER
 Cách tạo một Website mới:
Trong Document Window, chọn Site Manage
sites… New  Site hộp thoại Site Definition
 Chọn Tab Advance, trong mục Local info:
–
Site name
: Tên WebSite
–
Local Root Folder
: Khai báo đường dẫn của
folder lưu trữ Web
–
Default Images folder
: đường dẫn đến thư
mục chứa các hình ảnh của Website.

V.TẠO WEBSITE BẰNG DREAMWEAVER
–
Refresh Local file list Automatically
: Nếu
chọn Dreamweaver tự động cập nhật cấu
trúc file trong bảng Local Folder của Site
Panel. bằng cách chọn View  Refresh Local
files trong Site Window
– HTTP
Address
: Nhập địa chỉ của site.
– Enable
Cache
: Tạo một file lưu trữ các thông
tin về link giữa các file trong site. Sau khi
chọn xong Click OK Click Done.

V.TẠO WEBSITE BẰNG DREAMWEAVER
 Kiểm tra website đã tạo:
– Một website sau khi tạo
thành công thì trong site
panel phải có nhánh
thư mục trong đó các
biểu tượng file/folder
có màu xanh.

V.TẠO WEBSITE BẰNG DREAMWEAVER
 Mở một site đã tạo:
– Cách 1: Chọn tên Site trên Toolbar của
SitePanel

– Cách 2: Chọn menu Site Manage Sites 
Chọn tên Site muốn mở  Done
 Hiệu chỉnh Site:
– Chọn menu Site Manage Sites
– Chọn tên Site cần hiệu chỉnh  Click nút Edit
– Xuất hiện hộp thoại Site Definition thực
hiện hiệu chỉnh  OK  Done

V.TẠO WEBSITE BẰNG DREAMWEAVER
Tạo một Site mới
Hiệu chỉnh Site
Tạo một Site mới giống site đang
chọn
Xoá Site
Xuất thông tin một Site ra tập tin
.ste
Dẫn nhập thư mục, tập tin vào Site
V.TẠO WEBSITE BẰNG DREAMWEAVER
 Thiết kế trang web đơn:
– Tại màn hình khởi động chọn

Create new  HTML
– Xuất hiện Document Window, đây là nơi
thiết kế trình bày nội dung của từng trang
web đơn.
– Sau khi thiết kế xong mỗi trang trang web
được lưu trong thư mục HTML đã được khai
báo trong mục Local Root Folder, phần mở
rộng mặc định là HTML

VI. LIÊN KẾT CÁC TRANG WEB ĐƠN
 Trong một Website các trang phải được liên kết
theo một cấu trúc được xác định trước.
 Cách tạo liên kết:
– Mở trang nguồn Chọn nút liên kết
– Trong
Properties Inspector
, tại mục
link,

nhập địa chỉ của trang liên kết bằng 2 cách


VI. LIÊN KẾT CÁC TRANG WEB ĐƠN
–
Cách
1: Click nút kéo mũi tên chỉ đến tên
tập tin cần liên kết trong Site Panel




–
Cách
2: Click nút mở hộp thoại Select File
 Look in: Chọn tên Site
 File name: Chọn tên trang Web cần liên
kết đến

VI. LIÊN KẾT CÁC TRANG WEB ĐƠN

 Kiểm tra liên kết: File Check PageCheck
link
– Check links for entire Site: kiểm tra liên kết
cho tất cả các trang trong site
– Check links for Selected files /folders in Site:
kiểm tra nhóm tập tin/ thư mục được chọn
trong Site
 Xem kết quả bằng trình duyệt và hiệu chỉnh
– Chọn File / Preview in Browser / iexplore
– Hoặc Click nút Preview /Debug in Browser

VII. ĐƢA WEBSITE LÊN WEB SERVER
 Xuất bản Website là chép thư mục gốc của Site
lên Server của các nhà cung cấp dịch vụ
Internet (ISP).
 Để xuất bản Website
– Phải lưu lại tất cả các tập tin của website
– Kết nối với Server sau đó thực hiện Put File

VII. ĐƢA WEBSITE LÊN WEB SERVER

Kết nối với Remote Site
:
– Khi tạo Site mới ta chưa xác định Remote
Site (Thư mục chứa Site trên Server), nên
khi Put File chương trình yêu cầu kết nối với
Remote Site.

VII. ĐƢA WEBSITE LÊN WEB SERVER
 Trong cửa sổ Site Definition chọn Remote Info

– Trong khung Access, chọn Local/ Network
(giả lập một thư mục trên mạng cục bộ,
hoặc trên một thư mục khác của ổ đĩa
cứng).
– Tại mục Remote Folder, Click biểu tượng
Folder, để tìm thư mục mới chứa Site.