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.
4/16/2010 CÔNGCӨ THIӂTKӂWEB PHҤM THӂ BҦO ptbao@hcmus.edu.vn MicroSoft Frontpage (MicroSoft Publisher) DreamWaver 1 16/04/2010 I TӘNG QUAN MICROSOFT FRONT PAGE : Công dөng Ӭng dөng bӝ Microsoft Office dùng ÿӇ thiӃt kӃ trang Web hay bӝ Web Tұp tin Tұp tin chѭѫng trình FRONTPG.Exe Tұp tin lѭu trӳ có kiӇu *.Htm Khӣi ÿӝng Start Ỉ Programs Ỉ Microsoft FrontPage ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 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ѭ trang văn bҧn sӑan thҧo Word - Split : HiӇn thӏ trang thiӃt kӃ thành phҫn Nӝi dung Design 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Ӄ duyӋt Web ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 b Vùng thiӃt kӃ : Nhѭ 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 ÿӕi tѭӧng Table, WordArt ThiӃt kӃ Web bҵng Microsoft Front Page II THAO TÁC THIӂT Kӂ : 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 16/04/2010 Thành phҫn bӝ Web : - Folders : Thành phҫn chi tiӃt 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 bӝ Web - Hyperlinks : Thông tin liên kӃt Web Site - Tasks : Thông tin vӅ quҧn lý Web Site _Private : Lѭu trӳ thông tin WebSite Images : Lѭu trӳ hình ҧnh Trang cͿa bͱ Web ph̻i ĺu vͳi tên Index Htm ĺu ͷ th́ mͽc gͩc bͱ Web ThiӃt kӃ Web bҵng Microsoft Front Page Tҥo mӟi trang Web : - B1: New Æ Blank Page - B2 : ThiӃt kӃ - B3 : Lѭu trang Web vào bӝ Web 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ӝ trang ÿang ÿѭӧc hiӇn thӏ thiӃt kӃ Ĉóng thiӃt kӃ Web : - File Æ Close : Ĉóng trang ÿang chӑn thiӃt kӃ - File Ỉ Close Site : Ĉóng tịan bӝ trang ÿang ÿѭӧc hiӇn thӏ thiӃt kӃ ÿóng bӝ Web ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 Mӣ thiӃt kӃ Web : - File Ỉ Open : Mӣ trang Web - File Ỉ Open Site : Mӣ bӝ Web Nhúng 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 : Trang Web Add Folder : Thѭ mөc Web hay hình ҧnh, trang From Web : Bӝ Web tӯ ÿӏa chӍ Website - Ok ThiӃt kӃ Web bҵng Microsoft Front Page 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 16/04/2010 III ĈӔI TѬӦNG THIӂT Kӂ : Nӝi dung trang Web : - Dӳ liӋu nhұp trӵc tiӃp 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 Chèn Bullets and Numbering: - Chӑn khӕi nӝi dung Ỉ Click chӑn biӇu tѭӧng Bullets hay Numbering công cө Formatting Chèn ÿӕi tѭӧng ÿӗ hӑa : - Sӱ dөng công cө ÿӗ hӑa ( Drawing ) ThiӃt kӃ Web bҵng Microsoft Front Page 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 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 16/04/2010 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 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 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 nӝi dung hình (Add) Ỉ Ok ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 Chèn ÿѭӡng kҿ ngang: - Chӑn vӏ trí Ỉ Insert Ỉ Horizontal Line - ĈӇ ÿӏnh dҥng ÿѭӡng Line Ỉ Chӑn Line Ỉ Right Mouse Ỉ Horizontal Line Properties Chèn Table: - Chӑn vӏ trí Ỉ Table Ỉ Insert - Có thӇ sӱ dөng cơng cө DrawTable ÿӇ vӁ Table ( Table Ỉ Draw Table) - Hoһc sӱ dөng dҥng mүu chuҭn cӫa FrontPage ( Table Ỉ Layout Table and Cells ) ThiӃt kӃ Web bҵng Microsoft Front Page II ĈӎNH DҤNG : Trang Web: a NӅn ( BackGround) - Format Ỉ Background Thҿ General : Tiêu ÿӅ, âm nӅn Thҿ Formatting : Ҧnh nӅn, màu nӅn… ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 Trang Web (tt): b ChuyӇn cҧnh sang trang - Format Ỉ Page Transition… - Chӑn hiӋu ӭng Event : Sӵ kiӋn Transition Effect: HiӋu ӭng Duration : Thӡi gian ThiӃt kӃ Web bҵng Microsoft Front Page Nӝi dung : a Ký tӵ : - Format Ỉ Font b Ĉӑan : - Format Ỉ Paragraph c Màu nӅn viӅn khung ÿӑan : - Format Æ Border and Shading d Bullets and Numbering : - Format Ỉ Bullets and Numbering Picture Bullets : Dùng ҧnh Plain Bullets : Ký tӵ symbol Numbers : Sӕ ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 Table: a Chèn Table : - Table Ỉ Insert Ỉ Table - Khai báo : Size : Dòng cӝt Layout : ThӇ hiӋn nӝi dung Table ; Specify width : ÿӝ rӝng Table Border : ViӅn khung Background : Màu nӅn hình ҧnh nӅn ThiӃt kӃ Web bҵng Microsoft Front Page Table: b Chèn dòng, cӝt, tiêu ÿӅ : - Table Ỉ Insert Ỉ Rows or Columns - Table Ỉ Insert Ỉ Cell - Table Ỉ Insert Ỉ Caption c Xóa , trӝn, chia : - Table Æ Delete Cells - Table Æ Merge Cells - Table Æ Split Cell ( Split Table) d Thuӝc tính Table : - Table Ỉ Table Properties ThiӃt kӃ Web bҵng Microsoft Front Page 10 16/04/2010 Picture: a Ĉӏnh dҥng hình so vӟi văn bҧn : - Chӑn hình - Format Ỉ Position - Chӑn cách thӇ hiӋn Ỉ Ok b Ĉӏnh dҥng hình : - Sӱ dөng cơng cө Picture - View Ỉ Toolbars Ỉ Picture ThiӃt kӃ Web bҵng Microsoft Front Page IV LIÊN KӂT : Ĉӕi tѭӧng liên kӃt : a Liên kӃt nӝi : - Liên kӃt BookMark - Liên kӃt Trang bӝ Web b Liên kӃt ngӑai : - Liên kӃt ÿӃn ÿӏa chӍ Web Site khác • Ĉӕi tѭӧng dùng làm liên kӃt có thӇ Chuәi ký tӵ, hình ҧnh , Nút lӋnh hay khu vӵc chӍ ÿӏnh hình (Hostpot) ThiӃt kӃ Web bҵng Microsoft Front Page 11 16/04/2010 Tҥo ÿiӇm dӯng ( BookMark ) : - Chӑn vӏ trí cҫn ÿánh dҩu BookMark - Insert Ỉ BookMark - Ĉһt tên BookMark - Ok Tên BookMark BiӇu tѭӧng BookMark ThiӃt kӃ Web bҵng Microsoft Front Page Tҥo liên kӃt nӝi : - Chӑn nӝi dung hay hình, nút lӋnh - Insert Ỉ Hyperlink - Khai báo liên kӃt nӝi : • BookMark • Page Htm - Target Frame : Cӱa sә mӣ liên kӃt ThiӃt kӃ Web bҵng Microsoft Front Page 12 16/04/2010 Tҥo liên kӃt ngoҥi : - Chӑn nӝi dung hay hình, nút lӋnh - Insert Ỉ Hyperlink - Khai báo ÿӏa chӍ Web liên kӃt Target Frame : Cӱa sә mӣ liên kӃt ThiӃt kӃ Web bҵng Microsoft Front Page 13 ... ĺu ͷ th́ mͽc gͩc bͱ Web ThiӃt kӃ Web bҵng Microsoft Front Page Tҥo mӟi trang Web : - B1: New Ỉ Blank Page - B2 : ThiӃt kӃ - B3 : Lѭu trang Web vào bӝ Web Lѭu thiӃt kӃ Web : - File Ỉ Save : Lѭu... ÿóng bӝ Web ThiӃt kӃ Web bҵng Microsoft Front Page 16/04/2010 Mӣ thiӃt kӃ Web : - File Ỉ Open : Mӣ trang Web - File Æ Open Site : Mӣ bӝ Web Nhúng thành phҫn vào bӝ Web : - File Ỉ Import … - Chӑn... nhúng vào bӝ Web Add File : Trang Web Add Folder : Thѭ mөc Web hay hình ҧnh, trang From Web : Bӝ Web tӯ ÿӏa chӍ Website - Ok ThiӃt kӃ Web bҵng Microsoft Front Page DuyӋt trang Web : - File Ỉ