intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

BÀI GIẢNG VỀ MÔN HỌC THIẾT KẾ WEB

Chia sẻ: Trần Ngọc Mai | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST
Báo xấu
63
lượt xem 7
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tài liệu tham khảo dành cho Giáo viên, sinh viên, lỹ thuật viên chuyên môn lập trình - Giáo trình lập trình với Java. Mong các thầy cô và các bạn có thêm tư liệu học tập tốt môn lập trình

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: BÀI GIẢNG VỀ MÔN HỌC THIẾT KẾ WEB

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
6=>0