Xem mẫu
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
b. Các thao tác nh d ng
1 2
7 3
4
6
8
[1]-Src: ư ng d n t p tin nh. 5
[2]-Alt: Câu chú thích khi rê chu t vào nh.
[3]-Border: dày Khung vi n quanh nh.
[4]-Các hình th c canh l nh so v i trang.
[5]-Align: Các hình th c canh l nh so v i văn b n trên trang.
[6]-Low Src: ư ng d n t p tin nh ch t lư ng th p(t I trư c nh th t)
[7]-Vspace : Kho ng tr ng (Pixel) bên trái/ph I nh
[8]- Hspace : Kho ng tr ng (Pixel) phía trên/dư I nh.
c. Gi ta v trí cho nh
Giúp cho ngư I thi t k nh v trư c v trí c a các nh s chèn b sung sau này:
t i m chèn v trí mu n nh v Click bi u tư ng Image Image Placehoder
trên thanh công c Common. (Ho c trình ơn Insert/ Image Object/ Images
Placeholder)
Ho c
Xu t hi n
Name: t tên
Width/Height: r ng/ Height: cao
Color: Màu n n
AlternateText: Câu chú thích
B sung hình nh và nh d ng t I v trí ã gi ch
Ch n v trí ã gi ch T I c a s thu c tính Properties th c hi n b sung nh và khai
báo các thu c tính nh d ng
This is trial version Trang 88
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
V. T p tin Media (Audio, Video)
1. Khái quát v các d ng t p tin Multi Media:
D ng .midi (hay .mid) ư c cung c p b i nhi u trình duy t và không yêu c u Plug-in.
•
D ng .wav có ch t lư ng âm thanh t t, ư c cung c p b i nhi u trình duy t, không
•
yêu c u Plug-in. Tuy nhiên kích thư c t p tin l n.
D ng .aif tương t d ng wav, cho ch t lư ng âm thanh t t, có th ch y h u h t các
•
trình duy t mà không yêu c u Plug-in, Tuy nhiên kích thư c t p tin l n
D ng .mp3,.avi, wma,wmv . . . là d ng nén làm t p tin âm thanh nh hơn nhi u. Ch t
•
lư ng âm thanh t t. Công ngh m i cho phép "phân lu ng" t p tin nên không ph i i
toàn b t p tin ư c t i trư c khi nghe nó. ch y các t p tin này, ngư i s d ng
ph i cài t trình ng d ng như Windows Media.
D ng .ra, .ram, .rpm,. . có nén r t cao, kích thư c t p tin nh hơn. Công ngh
•
ph n lu ng t p tin. Ch t lư ng âm thanh kém hơn các t p tin MP3 Ph i cài t trình
ng d ng như RealPlayer.
2. Liên k t n t p tin Media
Liên k t n t p tin Media là cách ơn gi n và hi u qu thêm âm thanh cho trang Web.
Ch n văn b n hay hình nh mu n s d ng liên k t v i t p tin Media.
•
Trên thanh properties, trư ng Link click vào bi u tư ng thư m c tìm t p tin âm
thanh mu n liên k t Ok (ho c gõ vào ư ng d n và tên t p tin).
3. Nhúng t p tin Media vào trang:
Nhúng Media k t h p v i trình ch y âm thanh tr c ti p vào trang.
t tr chèn t i v trí mu n nhúng t p tin.
•
Click vào nút Plug-in trên Common, hay ch n l nh Insert / Media / Plugin
•
Hay
H p tho i Select File hi n th , click ch n tìm t p tin Media. Ok
•
Trên thanh Properties, xác nh r ng, chi u cao và canh l cho Media control.
•
Ghi chú : T p tin Media nhúng vào trang ph i n m cùng thư m c v i trang dang thi t k .
This is trial version Trang 89
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
VI. Các T p Tin Flash
1 Thêm các t p tin Flash vào trang
t tr chèn t i v trí mu n nhúng t p tin.
•
Click vào nút Flash trên Common, hay ch n l nh Insert / Media / Flash
•
Hay
H p tho i Select File hi n th , click ch n tìm t p tin Flash, Ok
•
Trên thanh Properties, xác nh r ng, chi u cao và canh l , cho khung hi n th
•
hay xem th k t qu (Play)
2. Thi t k các chu i kí t có hi u ng Flash
t tr chèn t i v trí mu n t o chu I hi u ng Flash.
•
Click vào nút Flash Text trên Common, hay ch n l nh Insert / Media / FlashText
•
Hay
H p tho i Select File hi n th , click ch n tìm t p tin Flash,
•
Font: Font ch
Size: C ch
Color: Màu
RolloverColor: Màu khi rê chu t vào
Text: Nh p n I dung
Link: URL c a t p tin liên k t
Tartget: Hình th c hi n th cho trang liên k t
BgColor: Màu n n
Save as: V trí lưu tr t p tin nh c a nút
This is trial version Trang 90
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
Ok
Trên thanh Properties, xác nh r ng, chi u cao và canh l cho chu I Flash.
•
This is trial version Trang 91
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
Chương 03
LIÊN K T VÀ NH HƯ NG TRANG
Các lo i liên k t và nh hư ng
T o liên k t
B sung Navigation Bar
B sung Rollover
T ob n nh
T o nút Flash
I. Các Lo I Liên K t Và nh Hư ng
1. Khái quát v các ư ng d n và v trí c a tài li u:
M i trang Web có duy nh t m t a ch , ư c g i là URL (Uniform Resource Locator).
Tuy nhiên khi t o m t m i liên k t c c b , thông thư ng không xác nh toàn b URL, Thay
vào ó xác nh ư ng d n liên quan t thư m c g c c a site. Sau ây là 3 giai o n
ư ng d n liên k t:
2. ư ng d n tuy t i (Absolute paths):
Lo i ư ng d n này cung c p m t URL hoàn ch nh n tài li u ư c liên k t.
Ví d : http://www.macromedia.com/support/dreamweavermx/contents.html/
S d ng ư ng d n tuy t i k tn i n tài li u t trên m t server khác.
•
3. ư ng d n tương i (Document relative paths):
Lo i ư ng d n này thích h p cho các liên k t c c b trong h u h t các Web site.
•
k t n i v i 1 trang b ng cách ch nh ư ng d n qua h phân c p thư m c t tài li u
hi n hành n tài li u mu n liên k t.
N u t o ư ng d n này trư c khi lưu tài li u thì Dreamweaver MX s s d ng t m
th i ư ng d n tuy t ib t u v i "file://" cho n khi lưu t p tin, Dreamweaver MX
chuy n "file://" thành ư ng d n tương i.
4. Các ư ng d n tương i so v i g c (Root - relative paths)
Lo i ư ng d n này cung c p ư ng d n t thư m c g c c a site n tài li u. có th
s d ng lo i ư ng d n này n u ang làm vi c trên Web site l n s d ng vài server ho c
m t server mà gi nhi u site khác nhau.
Lo i ư ng d n này b t u b ng d u "/" ám ch thư m c g c c a site.
•
Ví d : /support/tips.html: là ư ng d n n t p tin trong thư m c con support trong thư
m c g c c a site.
5. Liên k t r ng: Là liên k t không ư c ch nh. Trong trư ng Link nh p vào d u "#".
II. T o Liên K t
Th c ch t vi c b sung các liên k t r t d dàng. M t liên k t là m t behavior báo cho
trình duy t r ng "khi ngư i dùng nh p vào ây, hãy m trang Web này ho c i n ph n
này c a trang".
1. T o m t liên k t:
Ch n dòng văn b n c n t o liên k t:
•
Click chu t ph i và ch n Make Link hay vào trình ơn Modify / Make Link hay khai
•
báo t i trư ng Link trên Properties
H p tho i Select file hi n th , click ch n tên file c n liên k t hay nh p m t a ch Web
•
Site mà nh liên k t vào h p tho i URL.
This is trial version Trang 92
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
2. T o liên k t thư i n t :
V i liên k t thư i n t , khi ngư i dùng nh p vào liên k t này, trình qu n lý thư i n
t m c nh c a ngư i s d ng s ư c m ra.
t v trí con tr chu t t i nơi mu n t dòng liên k t. Click ch n vào bi u tư ng Mail
•
link trên thanh công c Common hay (Hay vào trình ơn Insert / Email Link
H p tho i Email Link hi n th : Nh p nhãn hi n th vào ô Text và a ch thư i n t
•
vào ô E-mail. click OK,
III. B Sung Navigation Bar
1. Khái quát
Navigation Bar bao g m m t nh (ho c m t t p nh) hi n th nh ng thay i theo
thao tác c a ngư i s d ng.
Trư c khi s d ng l nh Insert Navigation Bar, ph i t o m t t p các nh hi n th
các tr ng thái c a m i ph n t trong thanh Navigation. g m có 4 tr ng thái:
Up: nh xu t hi n khi ngư i s d ng chưa click ho c ã tác ng vào nó.
•
Over: nh xu t hi n khi tr chu t di chuy n lên nó.
•
Down: nh xu t hi n khi click chu t.
•
Over While Down: nh xu t hi n khi tr chu t di chuy n ra ngoài sau khi click ch n.
•
không nh t thi t ph i có nh cho 4 tr ng thái, có th ch t o tr ng thái Up và Down.
2. Chèn thanh Navigation Bar
t i m chèn v trí mu n chèn Click bi u tư ng Image Image Naigation Bar
trên thanh công c Common. (Ho c trình ơn Insert/ Image Object / Navigation Bar)
1 2
3
4
5
6
7
8
9 10
[1]-: Thêm m i/ lo I b 1 m c
[2]-: Thay i tr t t các m c.
[3]-: Element name: t tên cho m I m c.
[4]-: Up Image: Hình hi n th ban u.
This is trial version Trang 93
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
[5]-: Over Image: Hình s hi n th khi rê chu t vào
[6]-: Down Image: Hình hi n th khi Click vào.
[7]-: Over while down Image: nh s hi n th khi Click và o hì nh và rê chu t qua hình
[8]-: Alternate text : Câu chú thích khi rê chu t vào nh trang.
[9]-: When Click, Go to URL: T p tin liên k t
[10]-: In: Hình th c hi n th cho trang liên k t
3. Hi u ch nh thanh Navigation Bar
Khi ã t o m t thanh i u hư ng, có th b sung ho c xóa các nh các tr ng thái.
Ch n Modify / Navigation Bar.
•
Trên danh sách Nav Bar Elements, ch n ph n t mà mu n ch nh s a.
•
Thao tác hi u ch nh xong, click ch n OK.
•
IV. B sung Rollover
1. Khái quát
Rollover là m t behavior làm cho hình nh b thay i b i m t hình nh khác khi con
tr chu t di chuy n lên phía trên nó. Thông thư ng ngư i s d ng s nh n bi t ư c r ng
m t hình nh thay i chính là m t liên k t n m t trang web khác.
2. T o nh Rollover
t i m chèn v trí mu n chèn Click bi u tư ng Image Image Rollover trên
thanh công c Common. (Ho c trình ơn Insert/ Image Object / Rollover Image)
1
2
3
4
5
[1]-Image Name: t tên.
[2]-Orignial Image: Anh g c.
[3]-Rollover Image: nh s hi n th khi rê chu t vào
[4]-Alternate text : Câu chú thích khi rê chu t vào nh trang.
[5]-URL: T p tin liên k t
V. T o B n nh
1. Khái quát
M t hình nh v i nhi u liên k t v i nó s t o ra m t b n nh. Các liên k t ư c
g n v i các vùng khác nhau c a cùng m t hình nh b ng cách s d ng các i m nóng
(hotspot). Vi c nh p vào các i m nóng s ưa ngư i s d ng n các liên k t tương ng.
2. T o b n nh
Vi c trư c tiên là ph i chèn m t nh c n t o Hotspot vào trang ang thi t k .
•
Trên thanh Insert, ch n l p Common. Lúc này thanh Properties trên trang thi t k
•
s hi n th công c Hotspot.
This is trial version Trang 94
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
Rectangular Hotspot: t o vùng nóng hình ch nh t.
-
Oval Hotspot: t o vùng nóng hình tròn ho c Elip.
-
Polygon Hotspot: t o vùng nóng theo cách v t do c a.
-
Ch n m t trong các công c v này sao cho tương ng v i hình c a và dùng
chu t rê, v lên b c nh. Có th v t o ra nhi u vùng i m nóng trên b c nh.
Khai báo các thông s sau
Link: a ch c a trang c n liên k t t I
Target: Hình th c hi n th
Alt: Câu chú thích khi rê vào liên k t.
Ghi chú: h y b phân vùng ã t o: Click ch n vùng 1o Delete
VI. B Sung Nút Flash
1. Khái quát
i tư ng nút Flash cho phép thay i tùy ý và chèn m t t p các nút Flash ã ư c
nh nghĩa trư c.
2. T o nút Flash
t tr chèn t i v trí mu n t o nút nh n.
•
Click vào nút Flash Button trên Common, hay
•
ch n l nh Insert / Media / FlashButton
H p tho i Select File hi n th , click ch n tìm t p tin Flash,
•
This is trial version Trang 95
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
Style: Ch nm u Nút
ButtonText: Nh p nhãn cho nút
Font: Font ch cho nhãn
Size: Cõơ ch nhãn
Link: URL c a t p tin liên k t
Tartget: Hình th c hi n th cho trang liên k t
BgColor: Màu n n
Save as: V trí lưu tr t p tin Flash c a nút
3. Ch nh s a các i tư ng nút Flash:
Ch n i tư ng nút Flash.
•
Trên Properties, hi n th các thu c tính c a nút Flash.
•
thay i n i dung, m h p tho i Insert Flash Button b ng các phương pháp sau:
•
Click ôi vào i tư ng nút Flash
-
Click vào nút Edit trên Properties inspector.
-
Click ph i lên i tư ng và ch n Edit t trình ơn Pop-up.
-
Trên h p tho i Insert Flash Button, t o nh ng ch nh s a cho i tư ng.
•
This is trial version Trang 96
Biên so n: Dng Thành Ph t
www.adultpdf.com
- Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver
Chương 04
THI T K B C C TRANG TABLE & LAYER
Thi t k b ng bi u - Table
Thi t k l p - Layer
Thi t k b c c trang – Page Layout
I. TTHI T K B NG BI U - TABLE
B ng là m t công c r t ti n l i sp t các nh và các d li u trên trang. B ng
bao g m 3 thành ph n cơ b n:
Row: hàng
Column: c t
Cell: ô
1. Chèn b ng:
Chuy n sang ch Standard mode
•
Ch n bi u tư ng Insert Table trên thanh công c Common hay Layout (ho c ch n
•
menu Insert / Table) t o m t b ng m i
H p tho i Insert Table hi n th , nh p các giá tr vào trong h p tho i.
•
Rows: Ch n s hàng cho b ng c n chèn.
-
Columns: Ch n s c t cho b ng c n chèn.
-
Width: Ch n r ng c a c t. ph n trăm (Percent) hay pixel.
-
Border: Ch n dày ư ng vi n.
-
Cell Padding và Cell Spacing: nh kho ng cách m gi a các ô và kho ng
-
cách n i dung trong ô so v i vi n ô. M c nh là 1 pixel và 2 pixel.
Sau khi ch n xong các giá tr thích h p, click OK t o m t b ng.
•
This is trial version Trang 97
Biên so n: Dng Thành Ph t
www.adultpdf.com
nguon tai.lieu . vn
