BÀI GIẢNG MÔN THIẾT KẾ WEB_6

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

34
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'bài giảng môn thiết kế web_6', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

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 MÔN THIẾT KẾ WEB_6

Bài Gi ng Môn Thi t K Web Ph n 4: MacroMedia DreamWeaver Chương 01 T NG QUAN V MACROMEDIA DREAMWEAVER Sơ lư c v Macro Media Dreamweaver Màn hình làm vi c nh nghĩa Site S d ng b ng i u khi n Site I. Sơ Lư c V Dreamweaver Là m t chương trình dùng t o ra và qu n lý các trang web. Ph n c t lõi c a nó là HTML (HyperText Markup Language - Ngôn ng ánh d u siêu văn b n) Là m t công c m nh, d dùng, m t công c tr c quan: 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 ph i vi t 1 dòng mã nào. Cung c p ch làm vi c Design WYSIWYG (nh ng gì th y là nh ng gì có ư c). và ch làm vi c mã –Code. II. Màn Hình Làm Vi c 1. Kh i ng: Start Programs MacroMedia MacroMedia DreamWeaver MX 2004 Create New HTML 2. Màn hình làm vi c 1.Thanh tiêu 2.Thanh trình ơn 7. B ng i u khi n 3.Thanh công c Insert 4.Thanh công c Document Vùng thi t k 5.Thanh tr ng thái 6.C a s thu c tính 1. Thanh tiêu : Ch a tên t p tin ang thi t kê This is trial version Trang 78 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. Thanh trình ơn: Ch a các t p lênh th c hi n các ch c năng 3. Thanh công c Insert: Ch a nhóm các công c t o và nh d ng các i tư ng. 4. Thanh công c Document: Các hình th c trình bày trang ang thi t k 5. Thanh tr ng thái: Báo khu v c trên trang ang ch n làm vi cvà kích thư c trang. 6. C a s thu c tính(Properties):Các thu c tính c a I tương ang ư c ch n. 7. B ng i u khi n: Trình bày các b ng i u khi n III. nh Nghĩa Site 1. Khái quát Site là vùng lưu tr c c b trên máy tính ch a các t p tin c a 1 website bao g m các thư m c con ch a các t p tin âm thanh, hình nh . . . 2. Thi t L p C u Trúc Site Vi c t ch c site c n th n ngay t lúc u s ti t ki m th i gian v sau. Thông thư ng xác l p 1 site là t o 1 thư m c g c trong ĩa c c b ch a t t c các file trong web site, sau ó sao chép các file này n web server 3. T o M I Site Ch n menu Site / Manage Sites New / Site H p tho i Site Definition for Unnamed Site 1 hi n th , có hai l p (Basic và Advanced). L p Advanced trình bày t ng quát, còn l p Basic trình bày d ng t ng bư c (s không có s khác bi t nhau gi a hai l p này.) Xét l p Advanced 1 2 3 4 5 6 This is trial version Trang 79 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 Xác nh các m c trong h p tho i: [1] Site name: Nh p tên cho site (VD: CLBTinHoc) • [2] Local Root Folder: Xác nh thư m c trên ĩa c c b nơi lưu tr các t p tin. • [3] Refresh Local File List Automaticaly: T ng tinh ch nh m i khi thay I các • t p tin có liên quan trong local site hay không. [4] Default Images Folder: Ch nh thư m c m c nh lưu tr các t p tin nh trong • site. [5] Cache: Ch nh Cache c c b có ư c t o hay không c i thi n t c liên k t • và qu n lý tài nguyên c a site. Khuyên nên ch n m c này, tuy nhiên n u máy không b nh RAM có th b qua tùy ch n này. Xác nh xong các m c trong h p tho i, click OK t o site Tr v c a s Manage Sites click Done IV. S D ng B ng i u Khi n Site 1. B ng i u khi n Site S d ng c a s Site cho các thao tác qu n lý t p tin trong Site như: t o trang HTML , xem, m và di chuy n; t o các thư m c và xóa các thư m c. m b ng i u khi n Site trong nhóm các b ng i u khi n ch n Files 2. Các thao tác qu n lý Local Site Các thao tác qu n lý thư m c và t p tin t I c a s Local Site ư c ánh x tr c ti p n cây thư m c trong ĩa c ng. a. T o thư m c trong Site Click ph i tên site(Ho c thư m c) mu n t o thư m c con New Folder Nh p tên b. T o t p tin HTML trong Site Click ph I tên site(Ho c thư m c) ch a trang HTML This is trial version Trang 80 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 New File Nh p tên. c. i tên Thư m c ho c t p tin Click ph I tên thư m c(Ho c t p tin ) Edit Rename Nh p tên khác. d. Nhân ôi t p tin Click ph i tên t p tin Edit Duplicate Nh p tên khác. e. Xóa thư m c t p tin HTML Click ph I tên t p tin(ho c thư m c) Edit Delete This is trial version Trang 81 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 02 THI T K TRANG WEB Các thao tác qu n lý trang Web Thi t l p các thu c tính trang T o và nh d ng văn b n T p tin hình nh T p tin Media T p tin Flash I. Các Thao tác Qu n Lý Trang Web Khi ã t o 1 site c c b , ta có th t o các trang web ưa vào site. Khi t o và làm vi c v i các trang web, Dreamweaver s t ng phát sinh mã ngu n HTML. Có các cách khác nhau t o: T o m i trang web tr ng hay t o m i d a vào các trang web m u (template) 1. T o m i trang tài li u: Ch n menu File / New H p tho i New Document hi n th , Ch n l p General, ch n Basic page ch n ki u d ng HTML. Nh n vào nút Create, 2. Lưu m t trang tài li u: Ch n menu l nh File / Save • Nh p tên cho t p tin và ch n thư m c ch a t p tin c n lưu. • Click nút Save lưu . • N u mu n lưu t p tin v i tên khác, ch n menu l nh File / Save as . . 3. M m t t p tin HTML ang t n t i: Ch n menu File / Open, ch n file c n m và nh n Open m. This is trial version Trang 82 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 II. Thi t L p Thu c Tính Trang Tiêu trang, nh và màu n n, màu văn b n và liên k t, các l và các thu c tính cơ b n c a trang web. Ch n menu Modify/Page Properties . . .Ho c click chu t ph i trên trên trang ang • thi t k ch n Page Properties . . . H p tho i Page Properties hi n th : • 1. Thu c tính chung cho trang: L p Appearance 1 2 3 4 5 6 (1)-Page Font: Font ch m c nh cho trang (2)-Size: C ch m c nh cho trang (3)-Text color: Màu ch m c nh cho trang (4)-Background color: Màu n n trang (5)-BackGround Image: nh n n cho trang ( nh ph I n m trong thư m c c a Site) (6)-Left/Right/Top/Bottom Margin: L trang 2. Các thu c tính chung cho liên k t : L p Link 1 2 3 4 (1)-Link Font: Font ch cho văn b n liên k t (2)-Size: C ch cho văn b n liên k t (3)-Link color: Màu ch cho văn b n liên k t -Visited links: Màu ch cho văn b n liên k t khi ã vi ng thăm -Rollover links: Màu ch cho văn b n liên k t khi rê chu t qua -Active links: Màu ch cho văn b n liên k t khi Click chu t (4)-Underline style: Ki u g ch chân cho văn b n liên k t + Never . . . .: Không bao gi có g ch chân This is trial version Trang 83 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 + Always . . .: Luôn có g ch chân + Show . . . .: Hi n th ư ng k ngang khi rê chu t vào + Hide. . . . .: n g ch chân khi rê chu t vào m c : L p Headings 3. T o m u văn b n T o các m u văn b n m c (Heading1, . . .) dùng khi nh d ng. trang: Ch n m c Title/Encoding 4. Tiêu Title: Nh p tiêu cho trang vào m c. Encoding: Ch n UTF-8 (n u trên trang có s d ng văn b n Uniode) III. T o Và n h D n g V ăn B n Vi c nh p và nh d ng văn b n trong Dreamweaver MX hoàn toàn gi ng như trình so n th o văn b n thông thư ng. 1. T o và nh d ng văn b n Nh p văn b n tr c ti p trong c a s Document. • thay i Font, kích thư c, màu s c và s canh l cho các văn b n ư c ch n có • th s d ng trình ơn Text ho c truy c p các thu c tính trên Properties. nh p văn b n ti ng Vi t, nên s d ng các font và b ng mã tương ng. Thông thư ng nên s d ng font theo mã Unicode có th xem trên m i máy. 2. Thi t l p và thay i các Font và Style: Ch n văn b n. • Thi t l p các tùy ch n sau: • i Font: Ch n t h p font t Properties (Hay t menu Text/Font) thay o i ki u Font: Click Bold/Italic trên Properties (Hay ch n ki u Font thay o trên menu Text/Style) This is trial version Trang 84 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 i c ch : Ch n 1 kích c t Properties (Hay t menu Text / Size) thay o các kích c t 1 n 7 l(M c nh là 3) tăng gi m kích c c a văn b n ư c ch n: Ch n kích c tương i (+1 o hay -1 cho n +7 hay -7) t Properties (Hay t menu Text / Size) S d ng các Paragraph và các Heading: t i m chèn vào trong o n văn b n. Dùng Format trên Properties (Hay menu Text/Paragraph Format) áp d ng o n văn b n chu n và các th Heading. 3. i màu văn b n: Ch n văn b n mu n i màu. • Th c hi n: Click ô Text Color trên Properties (Hay ch n Menu Text/Color) m • b ng màu , ch n 1 màu trong b ng. 4. Canh ch nh văn b n: 4. Ch n văn b n mu n canh ch nh hay t i m chèn vào trong o n văn b n. • Click ch n m t d ng canh l trên Properties (Hay ch n menu Text/Align) • 5. Thay i t h p Font: S d ng l nh Edit Font List thi t l p các t h p font ư c hi n th trên Properties và menu Text / Font. Ch n t h p font t danh sách phía trên c a h p tho i Edit Font List. Các font trong t h p ư c li t kê trong danh sách Chosen Fonts. Danh sách Available ch a các font cho phép cài t. N u không có Font nào trong t h p ư c cài t thì s hi n th Font m c nh c a trình duy t. 6. T o m t danh sách m i: t i m chèn v trí mu n tã t o danh sách(Ho c 1 nhóm các dòng) • Click nút Unordered List hay Ordered List trên Properties • (Hay Menu Text/List và ch n ki u c a danh sách) n Enter chuy n sang . hoàn thành danh sách, n Enter hai l n. This is trial version Trang 85 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 xem hay hi u ch nh các thu c tính c a danh sách. Các thu c tính c a danh sách: Ch n m t h ng m c trong danh sách và ch n Text / List / Properties (Hay click List • Item trên Properties) Trong h p tho i List Properties có các thu c tính. List Type: Ki u ánh d u c a danh sách. o Style: Ki u c a ký t dùng ánh d u danh sách. o t bi n b t u ánh d u cho h ng m c u tiên trong danh Start Count: o sách. New Style: Cho phép ch n m t ki u ký t m i ánh d u b t u t h ng m c o ư c ch n. t giá tr b t u ánh d u t h ng m c ư c ch n Reset Count To: o 7. T o danh sách k t t : o Ch n danh sách các h ng m c mu n k t t . o Click nút Text Indent / Text Out trên Properties (Hay ch n Text/Indent Ho c Text/Outdent) 8. S d ng ư ng k ngang: Các ư ng k ngang r t h u ích cho vi c t ch c thông tin. Trên 1 trang, có th tách r i các văn b n và các i tư ng v i m t hay nhi u ư ng k ngang. t i m chèn t i v trí mu n t o ư ng k ngang. • Ch n Insert / Horizontal Rule (Hay Click nút Insert Horizontal Rule trong Panel • Objects/HTML) Ch nh s a ư ng k ngang: Ch n ư ng k ngang. • Ch n và i u ch nh các thu c tính c a ư ng k ngang trên Properties: • nh chi u cao và b dày. W và H: o Align: ch n ch canh. o Shanding: ch n ki u bóng . o 9. Chèn các ký hi u c bi t t i m chèn t i v trí mu n chèn kí hi u c bi t • Ch n Insert/HTML/Special Charcters/ Orter (Hay Click nút Character trong Panel • Objects / Text) This is trial version Trang 86 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 n ký hi u Ok IV. T p Tin Hình nh 1. Khái quát v hình nh Hình nh là thành ph n quan tr ng góp ph n trang trí trang web thêm h p d n và linh ng. Tuy nhiên l I là nhân t gây c n tr t c hi n th trang web. Vì vây c n cân nh c theo các nguyên tăc sau: Màu s c ph I phù h p v I Tone màu chung c a trang web ng l m d ng quá nhi u hình nh trên cùng 1 trang. Không s d ng nh có kích thư c quá l n(N u c n nên t o liên k t phóng to) phân gi i nh thông thư ng 72dpi Ch n nh d ng nh phù h p theo d ng th c c a t ng lo I nh: Jpeg – Jpg : nh tĩnh, h tr 16 tri u màu, phù h p v i các nh Gif : nh tĩnh ho c ng h tr 256 màu Swf (Macromedi Flash): nh ng véctơ , h tr 16 tri u màu tuy nhiên xem máy tính ph i cài Flash Plug in. Ghi chú: Các hình nh ph i ư c lưu tr vào 1 thư m c trong Site. 2. Chèn nh Vào Trang Web a. Chèn hình nh vào trang t i m chèn v trí mu n chèn Click bi u tư ng Image Image trên thanh công c Common. (Ho c trình ơn Insert/ Image) Ho c Tìm ch n nh Click Ok This is trial version Trang 87 Biên so n: Dng Thành Ph t www.adultpdf.com