Tải bản đầy đủ (.pdf) (28 trang)

bài giảng thiết kế web - chương8 - dreamweaver

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.62 MB, 28 trang )

DREAMWEAVER
CHNG VIII
I. GII THIU
1. 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
2. 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
loi đi tng khác mà không cn vit mt đon mã nào
3. Dreamweaver MX có th thit k bng ch đ Design
view hoc Code view hoc Code and Design
II. CÀI T
1. 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
2. Sau khi cài đt, khi đng Draemvaerver MX:
Start Programs Macromedia  Macromedia
Dreamweaver MX 2004
III. MÀN HÌNH DREAMWEAVER
1. Insert Bar: Gm các chc nng tin ích dùng đ chèn
các đi tng vào trang web
a) Common: Chèn các đi tng: Image, Flash, Date,
Template, …
b) Layout: Cha các công c trình bày trang, gm 3 ch
đ: Standard, Expended, Layout
c) Forms: Cha các công c to Form
d) Text: Dùng đnh dng vn bn
e) HTML: cha các công c to trang web
bng code view
2. Document Toolbar: Cha các nút cho phép xem
trang web  dng Design hay dng Code
a) Show code view: Xem dng trang HTML


b) Show Design view: Xem trang dng thit k, s
dng các công c ca Dreamwerver
c) 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
Design view
d) Title: tiêu đ ca trang Web
e) Preview/Debug in Browser:Xem kt qu trang web
thông qua trình duyt web
f) Document Window: Ca s dùng đ to và hiu
chnh trang Web
3. Properties Inspector: 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
sa các thuc tính đó
4. Panel groups: nhóm các Panel cho phép qun lý các
đi tng trong trang Web
a) Bt / tt các thanh Panel: Chn menu Window 
Chn thanh Panel tng ng
b) M rng các thanh Panel: Click vào mi tên  góc
trái ca mi Panel
5. 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.
a) Tag Selector: Hin th các tag HTML ti v trí
hin hành ca con tr
b) 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
c) 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 MT WEBSITE
1. Các yêu cu c bn khi thit k website:
a) Xác đnh yêu cu và mc đích ca Website
b) Chun b ni dung cho các trang
c) 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
d) Xác đnh cu trúc ca Website, có 3 kiu cu trúc:
– Tuyn tính
– Phân cp
– Hình chóp
Tu theo mc đích ca Website mà chn kiu phù hp
2. Khi thit k Website cn lu ý 2 vn đ:
a) 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
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 đó
quyt đnh cn bao nhiêu trang, ni dung ca tng
trang
b) 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í…
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
Mt s kiu liên kt gia các trang:
V. TO WEBSITE BNG DREAMWEAVER
1. Cách to mt Website mi:
Trong Document Window, chn Site Manage sites…New 
Site xut hin hp thoi Site Definition  Chn Tab Advance,
trong mc Local info:

a) Site name: đt tên WebSite
b) Local Root Folder: Khai báo đng dn ca folder lu tr
Website trên  đa cng bng cách
– Nhp đng dn hoc
– Click vào biu tng Folder, Ch đng dn đn folder
lu website
c) Default Images folder: 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
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
a) 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, vic cp
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
View  Refresh Local files trong Site Window
b) HTTP Address: Nhp đa ch ca site, đ qun lý
site và liên kt các file trong site
c) Enable Cache: 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
trong site. Sau khi chn xong Click OK Click
Done đ hoàn tt công vic to site mi
2. 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 nh sau trong đó các
biu tng file/folder có màu xanh

3. M mt site đƣ to:
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

Cách 2: Chn menu Site Manage Sites  Chn
tên Site mun m  Done
4. 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
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. 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 di
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
khai báo trong mc Local Root Folder
VII. LIÊN KT CÁC TRANG WEB N
1. Cách to:
–  to liên kt, cn phân bit trang ngun và trang
đích.
– Trang ngun: cha các nút liên kt
– Trang đích là trang cn liên kt đn
– M trang ngun Chn nút liên kt
– Trong Properties Inspector, ti mc link, thc hin
mt trong hai cách sau:

– 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
2. 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
3. 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
I. KT NI VÀ A WEBSITE LÊN WEB SERVER
1. 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
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
Internet (ISP).
– 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
Put File lên sau
 Kt ni vi Remote Site: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),
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
– Chn Yes, Xut hin hp thoi Site Definition
– 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
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
 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
– Click nút Put File
– Xut hin hp thoi: Are you sure you wish to put
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
ca Site ln lt đc chép t site lên Remote Site
2. Kim tra li trên Remote Site
– 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
phi là Local Site

VIII. SITE MAP
1. GII THIU: 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
tin trong WebSite. Mt WebSite khi đc to đy đ
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
Site phi có trang Index.htm
2. Xem mt Site Map:
– Trong Site Panel, chn Map view trong khung Site
view

3. To liên kt trong Site Map: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
dng Site Map. Cách to:

a) Ch đnh đng dn đn trang home page
– To Site mi trong đó phi có trang Index.htm
hoc Home Page
– Chn Site Manage Sites Click nút Edit
– Xut hin ca s Definition Chn Site Map
Layout
– Home Page: đng dn đn tp tin Index
OKDone
b) To liên kt bng SiteMap
– Click nút Expand/Collapse đ m rng Site
Panel
– Click chn nút SiteMap
– Màn hình xut hin trang Index.htm trong site

×