DREAMWEAVER
CHNG VIII
I. GII THIU
1. Dreamweaver MX là mt công c thit k web chuyên
nghip, phn ct lõi ca nó là HTML
2. Dreamweaver MX là mt công c trc quan, trong đó
có th b sung Javascrip, biu mu, bng biu và nhiu
loi đi tng khác mà không cn vit mt đon mã nào
3. Dreamweaver MX có th thit k bng ch đ Design
view hoc Code view hoc Code and Design
II. CÀI T
1. Dreamweaver MX 2004 là mt chng trình trong
b Macromedia MX, bn nên cài đt trên máy trn
b Macromedia MX
2. Sau khi cài đt, khi đng Draemvaerver MX:
Start Programs Macromedia Macromedia
Dreamweaver MX 2004
III. MÀN HÌNH DREAMWEAVER
1. Insert Bar: Gm các chc nng tin ích dùng đ chèn
các đi tng vào trang web
a) Common: Chèn các đi tng: Image, Flash, Date,
Template, …
b) Layout: Cha các công c trình bày trang, gm 3 ch
đ: Standard, Expended, Layout
c) Forms: Cha các công c to Form
d) Text: Dùng đnh dng vn bn
e) HTML: cha các công c to trang web
bng code view
2. Document Toolbar: Cha các nút cho phép xem
trang web dng Design hay dng Code
a) Show code view: Xem dng trang HTML
b) Show Design view: Xem trang dng thit k, s
dng các công c ca Dreamwerver
c) Show code and design view: Chia ca s làm 2
phn: phn trên dng code view, phn di dng
Design view
d) Title: tiêu đ ca trang Web
e) Preview/Debug in Browser:Xem kt qu trang web
thông qua trình duyt web
f) Document Window: Ca s dùng đ to và hiu
chnh trang Web
3. Properties Inspector: Hin th các thuc tính ca các
đi tng đang đc chn, đng thi cho phép chnh
sa các thuc tính đó
4. Panel groups: nhóm các Panel cho phép qun lý các
đi tng trong trang Web
a) Bt / tt các thanh Panel: Chn menu Window
Chn thanh Panel tng ng
b) M rng các thanh Panel: Click vào mi tên góc
trái ca mi Panel
5. Status bar: Thanh trng thái, nm di đáy ca
Document Window, hin th Tag Selector, Window
size, Document size và Download time.
a) Tag Selector: Hin th các tag HTML ti v trí
hin hành ca con tr
b) Document size and Download time: Kích c c
chng ca tài liu và thi gian ti tài liu xung
c) Window size: Hin th kích thc hin ti ca tài
liu, đc tính bng Pixel. Khi đnh kích thc
ca trang web phi tính đn vic sao cho an toàn
đi vi mi đ phân gii.
IV. K HOCH THIT K MT WEBSITE
1. Các yêu cu c bn khi thit k website:
a) Xác đnh yêu cu và mc đích ca Website
b) Chun b ni dung cho các trang
c) Phác tho khuôn mu (Template) cho trang, thng
các trang có cùng ch đ thì s dng chung mt
template
d) Xác đnh cu trúc ca Website, có 3 kiu cu trúc:
– Tuyn tính
– Phân cp
– Hình chóp
Tu theo mc đích ca Website mà chn kiu phù hp
2. Khi thit k Website cn lu ý 2 vn đ:
a) Ni dung ch đ chính, t đó chn b cc, h màu
cho tng ng, (ví d: Website thng mi phi
sáng sa, rõ ràng v b cc, …) sau đó thu thp
đy đ tài liu, phân nhóm theo ni dung, t đó
quyt đnh cn bao nhiêu trang, ni dung ca tng
trang
b) Chn hình nh, logo, Banner, h thng nút liên
kt, nh minh ho, nh b cc, nh trang trí…
Phác ho s đ liên kt trên giy đ thy r mi
liên kt gia các trang đn trong mt website
Mt s kiu liên kt gia các trang:
![]()
V. TO WEBSITE BNG DREAMWEAVER
1. Cách to mt Website mi:
Trong Document Window, chn Site Manage sites…New
Site xut hin hp thoi Site Definition Chn Tab Advance,
trong mc Local info:
a) Site name: đt tên WebSite
b) Local Root Folder: Khai báo đng dn ca folder lu tr
Website trên đa cng bng cách
– Nhp đng dn hoc
– Click vào biu tng Folder, Ch đng dn đn folder
lu website
c) Default Images folder: khai báo đng dn đn th mc cha
các hình nh ca Website, th mc này phi nm trong Local
root Folder đã khai báo trên, tât c các hình nh trong trang
web mc đnh đc lu trong th mc này
a) Refresh Local file list Automatically: Nu chn
Dreamweaver t đng cp nht cu trúc file
trong bng Local Folder ca Site Panel, vic cp
nht này s s dng mt ít tài nguyên ca h
thng, ta có th cp nht khi cn bng cách chn
View Refresh Local files trong Site Window
b) HTTP Address: Nhp đa ch ca site, đ qun lý
site và liên kt các file trong site
c) Enable Cache: khi đc chn, Dreamweaver to
mt file lu tr các thông tin v link gia các file
trong site. Sau khi chn xong Click OK Click
Done đ hoàn tt công vic to site mi
2. Kim tra website đã to:
Mt website sau khi to thành công thì trong site
panel phi có nhánh th mc nh sau trong đó các
biu tng file/folder có màu xanh
3. M mt site đƣ to:
Cách 1: Click vào menu hin th tên Site trên
Toolbar ca Site Panel, chn tên Site mun m
Cách 2: Chn menu Site Manage Sites Chn
tên Site mun m Done
4. Hiu chnh Site:
– Chn menu Site Manage Sites
– Chn tên Site cn hiu chnh Click nút Edit
– Xut hin hp thoi Site Definition thc hin
hiu chnh OK Done
To mt Site mi
Hiu chnh Site
To mt Site mi ging site đang chn
Xoá Site
Xut thông tin mt Site ra tp tin .ste
Dn nhp th mc, tp tin vào Site
VI. THIT K TRANG WEB N
– Ti màn hình khi đng chn Create new HTML
– Xut hin Document Window, đây là ni thit k
trình bày ni dung ca tng trang web đn, sau khi
thit k xong mi trang trang web đc lu di
dng mt tp tin có phn m rng mc đnh là
.HTM (hoc .HTML) trong th mc HTML đã đc
khai báo trong mc Local Root Folder
VII. LIÊN KT CÁC TRANG WEB N
1. Cách to:
– to liên kt, cn phân bit trang ngun và trang
đích.
– Trang ngun: cha các nút liên kt
– Trang đích là trang cn liên kt đn
– M trang ngun Chn nút liên kt
– Trong Properties Inspector, ti mc link, thc hin
mt trong hai cách sau:
– Cách 1: Click nút kéo mi tên ch đn
tên tp tin cn liên kt trong Site Panel
– Cách 2: Click nút m hp thoi Select File
Look in: Chn tên Site
File name: Chn tên trang Web cn liên kt đn
2. Kim tra liên kt: File Check PageCheck link
– Check links for entire Site: kim tra liên kt cho
tt c các trang trong site
– Check links for Selected files /folders in Site:
kim tra nhóm tp tin/ th mc đc chn trong
Site
3. Xem kt qu bng trình duyt vƠ hiu chnh
– Chn File / Preview in Browser / iexplore
– Hoc Click nút Preview /Debug in Browser
I. KT NI VÀ A WEBSITE LÊN WEB SERVER
1. Cách thc hin:
– Cn phi lu li tt c các tp tin trc khi xut bn
Website. Xut bn Website là chép th mc gc (root)
ca Site lên Server ca các nhà cung cp dch v
Internet (ISP).
– Trong Macromedia Dremwearver MX 2004, xut bn
Website cn có bc kt ni vi Server trc ri mi
Put File lên sau
Kt ni vi Remote Site:Nu khi to Site mi ta cha
xác đnh Remote Site (Th mc cha Site trên Server),
nên sau khi click Put File s xut hin thông báo yêu
cu kt ni vi Remote Site
![]()
– Chn Yes, Xut hin hp thoi Site Definition
– Chn mc Remote Info, trong khung Access, chn
Local/ Network (gi lp mt th mc trên mng cc
b, hoc trên mt th mc khác ca đa cng)
– Ti mc Remote Folder, Click biu tng Folder, đ
tìm th mc mi cha Site
Xut bn Site lên Remote Site:
– Trong Site Panel, chn li tên Site cn xut bn
– Click nút Put File
– Xut hin hp thoi: Are you sure you wish to put
the entire site? Click OK
– Xut hin hp thoi kt ni, các tp tin và th mc
ca Site ln lt đc chép t site lên Remote Site
2. Kim tra li trên Remote Site
– Click nút Expand trong Site Panel: Màn hình
chia làm 2 phn: Bên trái là Remote Site, Bên
phi là Local Site
VIII. SITE MAP
1. GII THIU: Site map là mt s đ cu trúc
WebSite, nó hin th v trí và s phân cp ca các tp
tin trong WebSite. Mt WebSite khi đc to đy đ
liên kt, có th xem di dng Site map
Cn phi đnh ngha trang HomePage trc hoc trong
Site phi có trang Index.htm
2. Xem mt Site Map:
– Trong Site Panel, chn Map view trong khung Site
view
3. To liên kt trong Site Map:Có th to liên kt
trang mt cách trc quan và đn gin bng cách s
dng Site Map. Cách to:
a) Ch đnh đng dn đn trang home page
– To Site mi trong đó phi có trang Index.htm
hoc Home Page
– Chn Site Manage Sites Click nút Edit
– Xut hin ca s Definition Chn Site Map
Layout
– Home Page: đng dn đn tp tin Index
OKDone
b) To liên kt bng SiteMap
– Click nút Expand/Collapse đ m rng Site
Panel
– Click chn nút SiteMap
– Màn hình xut hin trang Index.htm trong site