BÀI GIẢNG VỀ MÔN HỌC THIẾT KẾ WEB
lượt xem 7
download
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
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: BÀI GIẢNG VỀ MÔN HỌC THIẾT KẾ WEB
- 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
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Giáo trình về môn thiết kế web
135 p | 455 | 263
-
Thiết kế lập trình Web phần 2
8 p | 350 | 152
-
Bài giảng: THIẾT KẾ VÀ TRIỂN KHAI WEBSITE
44 p | 516 | 147
-
Bài giảng Lập trình web PHP - Giới thiệu về môn học- Trường ĐH SP Tp. HCM
14 p | 369 | 146
-
Bài giảng môn học Các đối tượng của ASP.NET
33 p | 304 | 112
-
Bài giảng Thiết kế web bài 3: Bố cục trang web & bảng (table) trên trang web
34 p | 273 | 66
-
Bài giảng môn học: Bài 2 GIỚI THIỆU VỀ ASP.NET
22 p | 212 | 62
-
Bài giảng Thiết kế web bài 1: XHTML trong cấu trúc nội dung web
26 p | 327 | 61
-
Bài giảng môn học Thiết kế Web - GV. Phạm Hồng Phong
85 p | 330 | 52
-
Bài giảng Thiết kế Web: Chương 1 - Giới thiệu môn học
7 p | 192 | 30
-
Bài giảng Thiết kế và triển khai Website - ĐH Thương Mại
0 p | 473 | 22
-
BÀI GIẢNG VỀ MÔN THIẾT KẾ WEB
8 p | 67 | 13
-
Bài giảng CSS - Bài 1: Giới thiệu về CSS
4 p | 91 | 13
-
Bài giảng Công nghệ Web (ASP.NET): Bài 1 - Lê Quang Lợi
22 p | 109 | 8
-
Bài giảng Lập trình web 1: Giới thiệu môn học - Phan Thị Kim Loan
12 p | 23 | 7
-
Bài giảng Lập trình web 1: Chương 1 - Nguyễn Huy Khánh
8 p | 87 | 4
-
Bài giảng Lập trình ứng dụng Web - Chương 0: Giới thiệu tổng quan về môn học
19 p | 105 | 4
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