bài giảng môn thiết kế web - chương viii dreamweaver

DREAMWEAVER
DREAMWEAVER
I.
I.
GIỚI THIỆU
GIỚI THIỆU
1.
1.
Dreamweaver MX là một công cụ thiết kế web chuyên
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
nghiệp, phần cốt lõi của nó là HTML
2.
2.
Dreamweaver MX là một công cụ trực quan, trong đó
Dreamweaver MX là một công cụ trực quan, trong đó
có thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều
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
loại đối tượng khác mà không cần viết một đoạn mã nào
3.
3.
Dreamweaver MX có thể thiết kế bằng chế độ Design
Dreamweaver MX có thể thiết kế bằng chế độ Design
view hoặc Code view hoặc Code and Design
view hoặc Code view hoặc Code and Design
II.
II.
CÀI ĐẶT
CÀI ĐẶT
1.

1.
Dreamweaver MX 2004 là một chương trình trong
Dreamweaver MX 2004 là một chương trình trong
bộ Macromedia MX, bạn nên cài đặt trên máy trọn
bộ Macromedia MX, bạn nên cài đặt trên máy trọn
bộ Macromedia MX
bộ Macromedia MX
2.
2.
Sau khi cài đặt, khởi động Draemvaerver MX:
Sau khi cài đặt, khởi động Draemvaerver MX:
Start
Start


Programs
Programs


Macromedia
Macromedia


Macromedia
Macromedia
Dreamweaver MX 2004
Dreamweaver MX 2004
III.
III.
MÀN HÌNH DREAMWEAVER

MÀN HÌNH DREAMWEAVER


1.
1.
Insert Bar
Insert Bar
: Gồm các chức năng tiện ích dùng để chèn
: Gồm các chức năng tiện ích dùng để chèn
các đối tượng vào trang web
các đối tượng vào trang web
a)
a)
Common: Chèn các đối tượng: Image, Flash, Date,
Common: Chèn các đối tượng: Image, Flash, Date,
Template, …
Template, …
b)
b)
Layout: Chứa các công cụ trình bày trang, gồm 3 chế
Layout: Chứa các công cụ trình bày trang, gồm 3 chế
độ: Standard, Expended, Layout
độ: Standard, Expended, Layout
c)
c)
Forms: Chứa các công cụ tạo Form
Forms: Chứa các công cụ tạo Form
d)
d)
Text: Dùng định dạng văn bản

Text: Dùng định dạng văn bản
e)
e)
HTML: chứa các công cụ tạo trang web
HTML: chứa các công cụ tạo trang web
bằng code view
bằng code view
2.
2.
Document Toolbar
Document Toolbar
: Chứa các nút cho phép xem
: Chứa các nút cho phép xem
trang web ở dạng Design hay dạng Code
trang web ở dạng Design hay dạng Code
a)
a)
Show code view: Xem dạng trang HTML
Show code view: Xem dạng trang HTML
b)
b)
Show Design view: Xem trang dạng thiết kế, sử
Show Design view: Xem trang dạng thiết kế, sử
dụng các công cụ của Dreamwerver
dụng các công cụ của Dreamwerver
c)
c)
Show code and design view: Chia cửa sổ làm 2
Show code and design view: Chia cửa sổ làm 2
phần: phần trên dạng code view, phần dưới dạng

phần: phần trên dạng code view, phần dưới dạng
Design view
Design view
d)
d)
Title: tiêu đề của trang Web
Title: tiêu đề của trang Web
e)
e)
Preview/Debug in Browser:Xem kết quả trang
Preview/Debug in Browser:Xem kết quả trang
web thông qua trình duyệt web
web thông qua trình duyệt web
f)
f)
Document Window: Cửa sổ dùng để tạo và hiệu
Document Window: Cửa sổ dùng để tạo và hiệu
chỉnh trang Web
chỉnh trang Web
3.
3.
Properties Inspector
Properties Inspector
: Hiển thị các thuộc tính của các
: Hiển thị các thuộc tính của các
đối tượng đang được chọn, đồng thời cho phép chỉnh
đối tượng đang được chọn, đồng thời cho phép chỉnh
sửa các thuộc tính đó
sửa các thuộc tính đó
4.

4.
Panel groups
Panel groups
: nhóm các Panel cho phép quản lý các
: nhóm các Panel cho phép quản lý các
đối tượng trong trang Web
đối tượng trong trang Web
a)
a)
Bật / tắt các thanh Panel: Chọn menu Window
Bật / tắt các thanh Panel: Chọn menu Window




Chọn thanh Panel tương ứng
Chọn thanh Panel tương ứng
b)
b)
Mở rộng các thanh Panel: Click vào mũi tên ở góc
Mở rộng các thanh Panel: Click vào mũi tên ở góc
trái của mỗi Panel
trái của mỗi Panel
5.
5.
Status bar
Status bar
: Thanh trạng thái, nằm dưới đáy của
: Thanh trạng thái, nằm dưới đáy của
Document Window, hiển thị Tag Selector, Window

Document Window, hiển thị Tag Selector, Window
size, Document size và Download time.
size, Document size và Download time.
a)
a)
Tag Selector: Hiển thị các tag HTML tại vị trí
Tag Selector: Hiển thị các tag HTML tại vị trí
hiện hành của con trỏ
hiện hành của con trỏ
b)
b)
Document size and Download time: Kích cở ước
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 xuống
chừng của tài liệu và thời gian tải tài liệu xuống
c)
c)
Window size: Hiển thị kích thước hiện tại của tài
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
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
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.
đối với mọi độ phân giải.
IV.
IV.
KẾ HOẠCH THIẾT KẾ MỘT WEBSITE
KẾ HOẠCH THIẾT KẾ MỘT WEBSITE
1.

1.
Các yêu cầu cơ bản khi thiết kế website:
Các yêu cầu cơ bản khi thiết kế website:
a)
a)
Xác định yêu cầu và mục đích của Website
Xác định yêu cầu và mục đích của Website
b)
b)
Chuẩn bị nội dung cho các trang
Chuẩn bị nội dung cho các trang
c)
c)
Phác thảo khuôn mẫu (Template) cho trang, thường
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
các trang có cùng chủ đề thì sử dụng chung một
template
template
d)
d)
Xác định cấu trúc của Website, có 3 kiểu cấu trúc:
Xác định cấu trúc của Website, có 3 kiểu cấu trúc:
–
Tuyến tính
Tuyến tính
–
Phân cấp
Phân cấp
–

Hình chóp
Hình chóp
Tuỳ theo mục đích của Website mà chọn kiểu phù hợp
Tuỳ theo mục đích của Website mà chọn kiểu phù hợp
2.
2.
Khi thiết kế Website cần lưu ý 2 vấn đề:
Khi thiết kế Website cần lưu ý 2 vấn đề:
a)
a)
Nội dung chủ đề chính, từ đó chọn bố cục, hệ màu
Nội dung chủ đề chính, từ đó chọn bố cục, hệ màu
cho tương ứng, (ví dụ: Website thương mại phải
cho tương ứng, (ví dụ: Website thương mại phải
sáng sủa, rõ ràng về bố cục, …) sau đó thu thập
sáng sủa, rõ ràng về bố cục, …) sau đó thu thập
đầy đủ tài liệu, phân nhóm theo nội dung, từ đó
đầy đủ tài liệu, phân nhóm theo nội dung, từ đó
quyết định cần bao nhiêu trang, nội dung của từng
quyết định cần bao nhiêu trang, nội dung của từng
trang
trang
b)
b)
Chọn hình ảnh, logo, Banner, hệ thống nút liên
Chọn hình ảnh, logo, Banner, hệ thống nút liên
kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí…
kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí…
Phác hoạ sơ đồ liên kết trên giấy để thấy rỏ mối
Phác hoạ sơ đồ liên kết trên giấy để thấy rỏ mối

liên kết giữa các trang đơn trong một website
liên kết giữa các trang đơn trong một website
Một số kiểu liên kết giữa các trang:
Một số kiểu liên kết giữa các trang:
V.
V.
TẠO WEBSITE BẰNG DREAMWEAVER
TẠO WEBSITE BẰNG DREAMWEAVER
1.
1.
Cách tạo một Website mới
Cách tạo một Website mới
:
:
Trong Document Window, chọn Site
Trong Document Window, chọn Site


Manage sites…
Manage sites…


New
New




Site

Site


xuất hiện hộp thoại Site Definition
xuất hiện hộp thoại Site Definition


Chọn Tab Advance,
Chọn Tab Advance,
trong mục Local info:
trong mục Local info:
a)
a)
Site
Site
name
name
: đặt tên WebSite
: đặt tên WebSite
b)
b)
Local
Local
Root Folder
Root Folder
: Khai báo đường dẫn của folder lưu trữ
: Khai báo đường dẫn của folder lưu trữ
Website trên ổ đĩa cứng bằng cách
Website trên ổ đĩa cứng bằng cách
–

Nhập đường dẫn hoặc
Nhập đường dẫn hoặc
–
Click vào biểu tượng Folder, Chỉ đường dẫn đến folder
Click vào biểu tượng Folder, Chỉ đường dẫn đến folder
lưu website
lưu website
a)
a)
Default
Default
Images folder
Images folder
: khai báo đường dẫn đến thư mục chứa
: khai báo đường dẫn đến thư mục chứa
các hình ảnh của Website, thư mục này phải nằm trong Local
các hình ảnh của Website, thư mục này phải nằm trong Local
root Folder đã khai báo ở trên, tât cả các hình ảnh trong trang
root Folder đã khai báo ở trên, tât cả các hình ảnh trong trang
web mặc định được lưu trong thư mục này
web mặc định được lưu trong thư mục này
a)
a)
Refresh
Refresh
Local file list Automatically
Local file list Automatically
: Nếu chọn
: Nếu chọn
Dreamweaver tự động cập nhật cấu trúc file

Dreamweaver tự động cập nhật cấu trúc file
trong bảng Local Folder của Site Panel, việc cập
trong bảng Local Folder của Site Panel, việc cập
nhật này sẽ sử dụng một ít tài nguyên của hệ
nhật này sẽ sử dụng một ít tài nguyên của hệ
thống, ta có thể cập nhật khi cần bằng cách chọn
thống, ta có thể cập nhật khi cần bằng cách chọn
View
View


Refresh Local files trong Site Window
Refresh Local files trong Site Window
b)
b)
HTTP
HTTP
Address
Address
: Nhập địa chỉ của site, để quản lý
: Nhập địa chỉ của site, để quản lý
site và liên kết các file trong site
site và liên kết các file trong site
c)
c)
Enable
Enable
Cache
Cache
: khi được chọn, Dreamweaver tạo

: khi được chọn, Dreamweaver tạo
một file lưu trữ các thông tin về link giữa các file
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
trong site. Sau khi chọn xong Click OK


Click
Click
Done để hoàn tất công việc tạo site mới
Done để hoàn tất công việc tạo site mới
2.
2.
Kiểm tra website đã tạo:
Kiểm tra website đã tạo:
Một website sau khi tạo thành công thì trong site
Một website sau khi tạo thành công thì trong site
panel phải có nhánh thư mục như sau trong đó các
panel phải có nhánh thư mục như sau trong đó các
biểu tượng file/folder có màu xanh
biểu tượng file/folder có màu xanh
3.
3.
Mở một site đã tạo
Mở một site đã tạo
:
:
Cách 1: Click vào menu hiển thị tên Site trên
Cách 1: Click vào menu hiển thị tên Site trên
Toolbar của Site Panel, chọn tên Site muốn mở

Toolbar của Site Panel, chọn tên Site muốn mở
Cách 2: Chọn menu Site
Cách 2: Chọn menu Site


Manage Sites
Manage Sites


Chọn
Chọn
tên Site muốn mở
tên Site muốn mở


Done
Done
3.
3.
Hiệu chỉnh Site
Hiệu chỉnh Site
:
:
–
Chọn menu Site
Chọn menu Site


Manage Sites
Manage Sites

–
Chọn tên Site cần hiệu chỉnh
Chọn tên Site cần hiệu chỉnh


Click nút Edit
Click nút Edit
–
Xuất hiện hộp thoại Site Definition
Xuất hiện hộp thoại Site Definition


thực hiện
thực hiện
hiệu chỉnh
hiệu chỉnh


OK
OK


Done
Done
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
VI.
VI.
THIẾT KẾ TRANG WEB ĐƠN
THIẾT KẾ TRANG WEB ĐƠN
–
Tại màn hình khởi động chọn Create new
Tại màn hình khởi động chọn Create new


HTML
HTML
–
Xuất hiện Document Window, đây là nơi thiết kế
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
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 dưới
thiết kế xong mỗi trang trang web được lưu dưới
dạng một tập tin có phần mở rộng mặc định là
dạng một tập tin có phần mở rộng mặc định là
.HTM (hoặc .HTML) trong thư mục HTML đã được
.HTM (hoặc .HTML) trong thư mục HTML đã được
khai báo trong mục Local Root Folder
khai báo trong mục Local Root Folder
VII.
VII.
LIÊN KẾT CÁC TRANG WEB ĐƠN
LIÊN KẾT CÁC TRANG WEB ĐƠN
1.

1.
Cách tạo
Cách tạo
:
:
–
Để tạo liên kết, cần phân biệt trang nguồn và trang
Để tạo liên kết, cần phân biệt trang nguồn và trang
đích.
đích.
–
Trang nguồn: chứa các nút liên kết
Trang nguồn: chứa các nút liên kết
–
Trang đích là trang cần liên kết đến
Trang đích là trang cần liên kết đến
–
Mở trang nguồn
Mở trang nguồn


Chọn nút liên kết
Chọn nút liên kết
–
Trong Properties Inspector, tại mục link, thực hiện
Trong Properties Inspector, tại mục link, thực hiện
một trong hai cách sau:
một trong hai cách sau:
–
Cách

Cách
1: Click nút
1: Click nút
kéo mũi tên chỉ đến
kéo mũi tên chỉ đến
tên tập tin cần liên kết trong Site Panel
tên tập tin cần liên kết trong Site Panel
–
Cách
Cách
2: Click nút
2: Click nút
mở hộp thoại Select File
mở hộp thoại Select File

Look in: Chọn tên Site
Look in: Chọn tên Site

File name: Chọn tên trang Web cần liên kết đến
File name: Chọn tên trang Web cần liên kết đến
2.
2.
Kiểm tra liên kết
Kiểm tra liên kết
: File
: File


Check Page
Check Page



Check link
Check link
–
Check links for entire Site: kiểm tra liên kết cho
Check links for entire Site: kiểm tra liên kết cho
tất cả các trang trong site
tất cả các trang trong site
–
Check links for Selected files /folders in Site:
Check links for Selected files /folders in Site:
kiểm tra nhóm tập tin/ thư mục được chọn trong
kiểm tra nhóm tập tin/ thư mục được chọn trong
Site
Site
3.
3.
Xem kết quả bằng trình duyệt và hiệu chỉnh
Xem kết quả bằng trình duyệt và hiệu chỉnh
–
Chọn File / Preview in Browser / iexplore
Chọn File / Preview in Browser / iexplore
–
Hoặc Click nút Preview /Debug in Browser
Hoặc Click nút Preview /Debug in Browser
I.
I.
KẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVER
KẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVER

1.
1.
Cách thực hiện:
Cách thực hiện:
–
Cần phải lưu lại tất cả các tập tin trước khi xuất bản
Cần phải lưu lại tất cả các tập tin trước khi xuất bản
Website. Xuất bản Website là chép thư mục gốc (root)
Website. Xuất bản Website là chép thư mục gốc (root)
của Site lên Server của các nhà cung cấp dịch vụ
của Site lên Server của các nhà cung cấp dịch vụ
Internet (ISP).
Internet (ISP).
–
Trong Macromedia Dremwearver MX 2004, xuất bản
Trong Macromedia Dremwearver MX 2004, xuất bản
Website cần có bước kết nối với Server trước rồi mới
Website cần có bước kết nối với Server trước rồi mới
Put File lên sau
Put File lên sau

Kết nối với Remote Site
Kết nối với Remote Site
:Nếu khi tạo Site mới ta chưa
:Nếu khi tạo Site mới ta chưa
xác định Remote Site (Thư mục chứa Site trên Server),
xác định Remote Site (Thư mục chứa Site trên Server),
nên sau khi click Put File sẽ xuất hiện thông báo yêu
nên sau khi click Put File sẽ xuất hiện thông báo yêu
cầu kết nối với Remote Site

cầu kết nối với Remote Site
–
Chọn Yes, Xuất hiện hộp thoại Site Definition
Chọn Yes, Xuất hiện hộp thoại Site Definition
–
Chọn mục Remote Info, trong khung Access, chọn
Chọn mục Remote Info, trong khung Access, chọn
Local/ Network (giả lập một thư mục trên mạng cục
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)
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ại mục Remote Folder, Click biểu tượng Folder, để
tìm thư mục mới chứa Site
tìm thư mục mới chứa Site

Xuất bản Site lên Remote Site
Xuất bản Site lên Remote Site
:
:
–
Trong Site Panel, chọn lại tên Site cần xuất bản
Trong Site Panel, chọn lại tên Site cần xuất bản
–
Click nút Put File
Click nút Put File
–
Xuất hiện hộp thoại: Are you sure you wish to put

Xuất hiện hộp thoại: Are you sure you wish to put
the entire site? Click OK
the entire site? Click OK
–
Xuất hiện hộp thoại kết nối, các tập tin và thư mục
Xuất hiện hộp thoại kết nối, các tập tin và thư mục
của Site lần lượt được chép từ site lên Remote Site
của Site lần lượt được chép từ site lên Remote Site
2.
2.
Kiểm tra lại trên Remote Site
Kiểm tra lại trên Remote Site
–
Click nút Expand trong Site Panel: Màn hình
Click nút Expand trong Site Panel: Màn hình
chia làm 2 phần: Bên trái là Remote Site, Bên
chia làm 2 phần: Bên trái là Remote Site, Bên
phải là Local Site
phải là Local Site
VIII.
VIII.
SITE MAP
SITE MAP
1.
1.
GIỚI THIỆU
GIỚI THIỆU
: Site map là một sơ đồ cấu trúc
: Site map là một sơ đồ cấu trúc
WebSite, nó hiển thị vị trí và sự phân cấp của các tập

WebSite, nó hiển thị vị trí và sự phân cấp của các tập
tin trong WebSite. Một WebSite khi được tạo đầy đủ
tin trong WebSite. Một WebSite khi được tạo đầy đủ
liên kết, có thể xem dưới dạng Site map
liên kết, có thể xem dưới dạng Site map
Cần phải định nghĩa trang HomePage trước hoặc trong
Cần phải định nghĩa trang HomePage trước hoặc trong
Site phải có trang Index.htm
Site phải có trang Index.htm
2.
2.
Xem một Site Map:
Xem một Site Map:
–
Trong Site Panel, chọn Map view trong khung Site
Trong Site Panel, chọn Map view trong khung Site
view
view
3.
3.
Tạo liên kết trong Site Map
Tạo liên kết trong Site Map
:Có thể tạo liên kết
:Có thể tạo liên kết
trang một cách trực quan và đơn giản bằng cách sử
trang một cách trực quan và đơn giản bằng cách sử
dụng Site Map. Cách tạo:
dụng Site Map. Cách tạo:
a)
a)

Chỉ định đường dẫn đến trang home page
Chỉ định đường dẫn đến trang home page
–
Tạo Site mới trong đó phải có trang Index.htm
Tạo Site mới trong đó phải có trang Index.htm
hoặc Home Page
hoặc Home Page
–
Chọn Site
Chọn Site


Manage Sites
Manage Sites


Click nút Edit
Click nút Edit
–
Xuất hiện cửa sổ Definition
Xuất hiện cửa sổ Definition


Chọn Site Map
Chọn Site Map
Layout
Layout
–
Home Page: đường dẫn đến tập tin Index
Home Page: đường dẫn đến tập tin Index





OK
OK


Done
Done
b)
b)
Tạo liên kết bằng SiteMap
Tạo liên kết bằng SiteMap
–
Click nút Expand/Collapse để mở rộng Site
Click nút Expand/Collapse để mở rộng Site
Panel
Panel
–
Click chọn nút SiteMap
Click chọn nút SiteMap
–
Màn hình xuất hiện trang Index.htm trong site
Màn hình xuất hiện trang Index.htm trong site