Bài giảng Thiết kế Web: Công cụ thiết kế Web - Phạm Thế Bảo

Bài giảng Thiết kế Web - Công cụ thiết kế Web giới thiệu 2 công cụ hỗ trợ thiết kế web, đó là: MicroSoft Frontpage (MicroSoft Publisher) và DreamWaver 8. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế Web: Công cụ thiết kế Web - Phạm Thế Bảo 4/16/2010 CÔNGCӨ THIӂTKӂWEB PHҤM THӂ BҦO ptbao@hcmus.edu.vn 1. MicroSoft Frontpage (MicroSoft Publisher) 2. DreamWaver 8 1 16/04/2010 I. TӘNG QUAN MICROSOFT FRONT PAGE : 1. Công dөng Ӭng dөng trong bӝ Microsoft Office dùng ÿӇ thiӃt kӃ các trang Web hay các bӝ Web. 2. Tұp tin Tұp tin chѭѫng trình FRONTPG.Exe Tұp tin lѭu trӳ có kiӇu *.Htm 3. Khӣi ÿӝng Start Æ Programs Æ Microsoft FrontPage ThiӃt kӃ Web bҵng Microsoft Front Page 1 16/04/2010 4. Giao diӋn Vùng thiӃt kӃ trang Web ChӃ ÿӝ thiӃt kӃ ThiӃt kӃ Web bҵng Microsoft Front Page a. ChӃ ÿӝ thiӃt kӃ : - Design : ChӃ ÿӝ thiӃt kӃ mһc ÿӏnh. Các trang thiӃt kӃ nhѭ 1 trang văn bҧn sӑan thҧo Word. - Split : HiӇn thӏ trang thiӃt kӃ thành 2 phҫn. Nӝi dung Design và nӝi dung bҵng HTML. - Code : HiӇn thӏ trang Web bҵng ngôn ngӳ HTML. - Preview : Xem kӃt quҧ thiӃt kӃ khi duyӋt Web. ThiӃt kӃ Web bҵng Microsoft Front Page 2 16/04/2010 b. Vùng thiӃt kӃ : Nhѭ 1 trang văn bҧn sӑan thҧo Word, cho phép nhұp nӝi dung trӵc tiӃp hay chèn các ÿӕi tѭӧng Table, WordArt. ThiӃt kӃ Web bҵng Microsoft Front Page II. THAO TÁC THIӂT Kӂ : 1. Tҥo mӟi bӝ Web : - B1 : Khӣi ÿӝng Front Page Æ Chӑn File Æ New - B2 : Chӑn Æ Empty Web Site hay One Page Web Site - B3 : Trong cӱa sә Web Sites Æ Chӑn Empty Web Site hay One Page Web Site. - B4 : ChӍ ÿӏnh thѭ mөc chӭa bӝ Web Æ Ok ; Add to current Web Æ Mһc ÿӏnh thѭ mөc Web hiӋn hành. ThiӃt kӃ Web bҵng Microsoft Front Page 3 16/04/2010 Thành phҫn bӝ Web : - Folders : Thành phҫn chi tiӃt trong thѭ mөc bӝ Web. Thѭ mөc gӕc chӭa tòan bӝ Web Æ Rood Folder. - Reports : Các thông tin báo biӇu liên quan ÿӃn Web site. - Navigation : Cҩu trúc liên kӃt di chuyӇn trong bӝ Web. - Hyperlinks : Thông tin liên kӃt trên Web Site. - Tasks : Thông tin vӅ quҧn lý Web Site. _Private : Lѭu trӳ các thông tin WebSite . Images : Lѭu trӳ các hình ҧnh Trang 1 cͿa bͱ Web ph̻i ĺu vͳi tên Index. Htm và ĺu ͷ th́ mͽc gͩc bͱ Web ThiӃt kӃ Web bҵng Microsoft Front Page 2. Tҥo mӟi 1 trang Web : - B1: New Æ Blank Page. - B2 : ThiӃt kӃ. - B3 : Lѭu trang Web vào bӝ Web. 3. Lѭu thiӃt kӃ Web : - File Æ Save : Lѭu trang ÿang chӑn thiӃt kӃ. - File Æ Save All : Lѭu tòan bӝ các trang ÿang ÿѭӧc hiӇn thӏ trong thiӃt kӃ. 4. Ĉóng thiӃt kӃ Web : - File Æ Close : Ĉóng trang ÿang chӑn thiӃt kӃ. - File Æ Close Site : Ĉóng tòan bӝ các trang ÿang ÿѭӧc hiӇn thӏ trong thiӃt kӃ và ÿóng bӝ Web. ThiӃt kӃ Web bҵng Microsoft Front Page 4 16/04/2010 5. Mӣ thiӃt kӃ Web : - File Æ Open : Mӣ trang Web. - File Æ Open Site : Mӣ bӝ Web. 6. Nhúng 1 thành phҫn vào bӝ Web : - File Æ Import … - Chӑn lӑai thành phҫn nhúng vào bӝ Web œ Add File : 1 Trang Web œ Add Folder : 1 Thѭ mөc Web hay hình ҧnh, trang .. œ From Web : 1 Bӝ Web tӯ 1 ÿӏa chӍ Website. - Ok ThiӃt kӃ Web bҵng Microsoft Front Page 7. DuyӋt trang Web : - File Æ Preview in Browser (F12) - Chӑn cӱa sә duyӋt Web. ThiӃt kӃ Web bҵng Microsoft Front Page 5 16/04/2010 III. ĈӔI TѬӦNG THIӂT Kӂ : 1. Nӝi dung trang Web : - Dӳ liӋu nhұp trӵc tiӃp trên Trang nhѭ Word. - Trên Web không chia cӝt, Drop Cap ÿѭӧc nhѭ Word. ĈӇ thӵc hiӋn chia nӝi dung thành cӝt Æ Dùng Table. 2. Chèn Bullets and Numbering: - Chӑn khӕi nӝi dung Æ Click chӑn biӇu tѭӧng Bullets hay Numbering trên thanh công cө Formatting. 3. Chèn ÿӕi tѭӧng ÿӗ hӑa : - Sӱ dөng thanh công cө ÿӗ hӑa ( Drawing ) ThiӃt kӃ Web bҵng Microsoft Front Page 4. Chèn ÿӕi tѭӧng hiӋu ӭng : a. Chӳ chҥy : - Chӑn vӏ trí cҫn chèn. - Insert Æ Web Component … - Chӑn Dynamic Effects Æ Marquee Æ Finish. - Nhұp nӝi dung. - Tùy chӑn hiӋu ӭng và thӡi gian Æ Ok Direction : Hѭӟng hiӋu ӭng. Speed : Tӕc ÿӝ. Behavior : HiӋu ӭng. Repeat : Sӕ lҫn lһp. Background : Màu nӅn. ThiӃt kӃ Web bҵng Microsoft Front Page 6 16/04/2010 4. Chèn ÿӕi tѭӧng hiӋu ӭng (tt): b. Nút lӋnh : - Chӑn vӏ trí cҫn chèn. - Insert Æ Web Component … - Chӑn Dynamic Effects Æ Interactive Button Æ Finish. - Nhұp nӝi dung trên nút lӋnh (Text). - Ĉѭӡng dүn liên kӃt trang hay BookMark (Link) Æ Ok ThiӃt kӃ Web bҵng Microsoft Front Page 5. Trang thѭ viӋn ҧnh : - Insert Æ Web Component … - Chӑn Photo Gallery - Chӑn mүu thѭ viӋn Æ Finish. - Khai báo hình và nӝi dung hình (Add) Æ Ok ThiӃt kӃ Web bҵng Microsoft Front Page 7 16/0 ...