บทท 3 การใช งาน HTML Editor

Transcription

1 บทท 3 การใช งาน HTML Editor ผลการเร ยนร ท คาดหว ง ผ เร ยนสามารถใช HTML Editor ในการสร าง Webpage ได เน อหา เร องท 1 HTML Editor เร องท 2 การพ มข อความ เร องท 3 การสร างเส นและปร บแต งเส น เร องท 4 การเพ มร ปภาพ เร องท 5 การสร างตาราง เร องท 6 การนาเอา Flash เข ามาใช เร องท 7 การนาเอา Video เข ามาใช เร องท 8 การแทรกเส ยง เร องท 9 การสร าง Hyperlink สร ปสาระสาค ญ HTML Editor ค อ เคร องม อในการสร าง Webpage ของระบบ Web Template เปร ยบ เหม อนโปรแกรมท ใช สร าง Webpage ซ งผ สร างเน อหาของ Webpage ต องเร ยนร ก อนสร าง Webpage เน อหาในบทน กล าวถ งการใช งาน HTML Editor โดยการใช งานป มค าส งต างๆ เพ อ สร างเน อหา ได แก การสร างต วหน งส อ เส น ภาพ Flash เส ยง Video และการเช อมโยงไปย ง Website อ นๆ

2 เร องท 1 HTML Editor HTML Editor เป นส วนท อ านวยความสะดวกในการใช งานส าหร บ ผ สร างเน อหา บน web ส าเร จร ป เพราะสามารถพ มพ ข อความ หร อแทรกร ปภาพได ตามท ต องการ รวมท ง สามารถเข ยนภาษา HTML สาหร บท านท ม ความสามารถใช ภาษา HTML ได ภาพท 1 ส วนประกอบของ HTML Edito ประกอบด วย 2 ส วน ค อด านบนเป นป มเคร องม อต างๆ ส วนด านล างเป นพ นท ในการสร าง Webpage หร อเป นพ นท พ มพ เน อหา และสร าง Multimedia อ นๆ โดยส วนล างส ด จะม ป มเอาไว เพ อให ผ ใช เล อกว ธ การสร างเน อหาว า จะสร างโดยใช การ Design ซ งเป นการสร างแบบ wysiwyg ค อสร างอย างไรก เห นอย างน น หร อจะสร างแบบ Html ค อเข ยน Code ภาษา HTML HTML Editor จ งเปร ยนเหม อนก บโปรแกรมเล กๆ ในการสร าง Webpage ของระบบ Web Template โดยโปรแกรมน เร ยกว า Spaw Editor ซ งเป น Free Source Code ท สามารถ Download จาก Interet นาเอามาใช งานได จาก website

3 เร องท 2 การเพ มข อความ เม อต องการพ มพ ข อความ ให คล กเมาส ในช องท เป นพ นท พ มพ เน อหา ซ งสามารถพ มพ ได เช นเด ยวก บการพ มพ เอกสารท วๆ ไป แต ในกรณ ท ต องการนาเอาข อความจากเอกสารท พ มพ ไว แล วมาใช เช น เอกสารท พ มพ ไว จากโปรแกรม Microsoft Word ไม สามารถเป ดเข ามาใช ได โดยตรง แต ต องใช ว ธ การ ไป Copy เอกสารแต ละส วนมาวาง แต ไม แนะน าให copy มาจาก เอกสาร word โดยตรง แต ควร save เอกสารเป น wordpad เส ยก อน ปร บแต งข อความ โดยสามารถปร บแต งข อความได ด งน ปร บร ปแบบต วหน งส อ จากช องต างๆ ด งน - Style เป นร ปแบบต วอ กษร สาเร จร ปท ได เตร ยมไว 3 ร ปแบบ - Font ปร บร ปแบบ Font ของต วหน งส อ ซ งม อย 9 ร ปแบบ - Size ขนาดของต วหน งส อ - Paragraph กาหนดร ปแบบต วหน งส อเป นแบบ heading ปร บต วหน งส อเป นต วหนา ต วอย าง ต วหนา ปร บต วหน งส อเป นต วเอ ยง ต วอย าง ต วเอ ยง ปร บต วหน งส อ ให ม เส นใต ต วอย าง ต วข ดเส นใต ปร บต วหน งส อให เป นต วยกกาล ง ต วธรรมดา ต วยกกาล ง ปร บต วหน งส อให เป นต วห อย เปล ยนส ต วหน งส อ ต วหน งส อส แดง ต วธรรมดา ต วห อย เปล ยนพ นหล งต วหน งส อ ต วหน งส อม พ นหล งส แดง

4 เร องท 3 การสร างเส นและปร บแต งเส น การสร างเส น ให เราคล กท ป ม จะปรากฏเส นข นมา ซ งเส นท สร างข นมาน สามารถ ปร บแต งได ด งน ปร บความยาว และ ความหนาของเส น ปร บได โดย คล กเมาส ท เส น จะปรากฏเป น จ ด ส เหล ยนล อมรอบเส น ให ใช เมาส คล กท ส เหล ยนเล กๆ น แล วลากเมาส เพ อปร บขนาของเส น ท งความยาว และ ความหนาของเส น ปร บส ของเส น โดยคล กท เส น แล วคล กท ป ม เพ อเล อกส ของเส น

5 เร องท 4 การเพ มร ปภาพ เราสามารถเพ มร ปภาพ เข ามาใน page ท เราสร างได ด งน Insert Image คล กท ป มน เม อต องการเพ มร ปภาพ จะเป ดหน าต าง Insert Image --- Web Page Dialog ข นมา ให เราเล อกภาพ ด งน ภาพท 2 การเล อกใช ภาพท อย บน server บน server จะม ภาพอย จานวนหน ง ท สร างไว ให หร อภาพท เราส งข นไป ว ธ การใช ภาพให ด าเน นการด งน 1 เล อก Library ท เก บภาพ ซ งม ให เล อก 4 Folder ค อ - picture เป น Folder สาหร บเก บภาพท วๆ ไปท น าเข ามาใหม - Image เป น Folder สาหร บเก บภาพท วๆ ไปท ต ดมาก บระบบ - Topic เป น Folder ท ใช เก บภาพส าหร บเน อหาหล งท ง 8 ห วข อ - News เป น Folder ท ใช เก บภาพส าหร บเน อหาท เป นข าว และเหต การณ ป จจ บ น - Download เป น Folder ท เก บ File เพ อผ ใช งาน Download ไปใช จ งไม ควร เก บภาพใน Folder น 2 คล กเล อกภาพท ต องการ บนช อภาพ ในช อง Image จะปรากฏภาพต วอย างในช อง Preview 3 คล กท ป ม Select เพ อเล อกภาพท ต องการ ภาพก จะมาปรากฏแทรกในเน อหา

6 การใช ภาพท อย ในเคร องคอมพ วเตอร กรณ ท ต องการใช ภาพท เราสร างข นมาใหม และบ นท กไว ในเคร องคอมพ วเตอร ดาเน นการ ด งน 1 คล กป ม Browse เพ อไปเล อกภาพ จะเป ดกรอบ Choose File ให เข าไปเล อกภาพท ต องการ โดยเป ดไปย ง Folder ท เก บภาพไว ในเคร องคอมพ วเตอร 2 เล อกภาพท เก บไว ในเคร องคอมพ วเตอร ท ต องการ 3 คล กท ป ม Upload หร อเล อก Library โดยสามารถเล อกได 2 ว ธ ค อ ถ าต องการเก บ ไว ใน Folder ท ก าล งเป ดอย ก คล กท ป ม Upload แต ถ าต องการเปล ยน Folder ท เก บภาพ ให เล อก Folder ท เก บภาพในช อง Library 4 คล กท ป ม Select เพ อเล อกภาพท ต องการ ภาพก จะมาปรากฏแทรกในเน อหา การแก ไขร ปภาพ Image Properties แก ไขภาพ สามารถแก ไขภาพท เราน าเข ามาใช แล ว ได ด งน 1 คล กท ภาพท ต องการแก ไข 2 คล กท ป ม Image Properties เพ อแก ไขภาพ 3 จะเป ดกรอบ Image properties -- Web Page Dialog ซ งม ส วนท แก ไข ด งน ภาพท 3 Alternative text: ข อความท ต องการให เก ดบนภาพ เม อเล อนเมาส ไปบนภาพ Align กาหนดต าแหน งของภาพก บต วหน งส อ โดยสามารถเล อกได ตามท ต องการ Left กาหนดให ภาพอย ทางซ าย โดยให ต วหน งส อล อมรอบภาพ ทางขวา right กาหนดให ภาพอย ทางขวา โดยให ต วหน งส อล อมรอบภาพ ทางซ าย top กาหนดให ต วหน งส อ อย เสมอขอบด านบนของภาพ 1 แถว ส วนต วหน งส อในแถว อ น อย เสมอขอบด านล างของภาพ

7 middle กาหนดให ต วหน งส อ อย ตรงกลางของภาพ 1 แถว ส วนต วหน งส อในแถวอ น อย เสมอขอบด านล างของภาพ bottom กาหนดให ต วหน งส อ อย เสมอขอบด านล างของภาพ absmiddles กาหนดให ต วหน งส อ อย ตรงกลางของภาพ 1 แถว ส วนต วหน งส อใน แถวอ น อย เสมอขอบด านล างของภาพ texttop top กาหนดให ต วหน งส อ อย เสมอขอบด านบนของภาพ 1 แถว ส วน ต วหน งส อในแถวอ น อย เสมอขอบด านล างของภาพ baseline กาหนดให ต วหน งส อ อย เสมอขอบด านล างของภาพ Border ความกว างของขอบภาพ Width ขนาดความกว างของภาพ Height ขนาดความส งของภาพ Hor,space ช องว างระหว างภาพก บต วหน งส อตามแนวต ง Vert,space ช องว างระหว างภาพก บต วหน งส อตามแนวนอน เร องท 5 การสร างตาราง ป มคาส งเก ยวก บการสร างตาราง ม อย 11 ป ม Create table สร างตารางใหม Table properties กาหนดค ณสมบ ต ของตาราง Cell properties กาหนดค ณสมบ ต ของ cell Insert row แทรกแถว Insetr column แทรกคอมล มน Delete row ลบแถว Delete column ลบคอล มน Merg right ผสาน cll ไปทางขวา merg down ผสานcell ไปทางด านล าง Split cell horizontaly แยก cell ทางแนวนอน Split cell vertically แยก cell ทางแนวต ง

8 Create table สร างตารางใหม ในกรณ ท เราต องการสร างตารางเข ามาใช ใน web ไม ว า จะเป นตารางท จะน ามาใช งาน ในร ปแบบตารางโดยตรง หร อ ตารางเพ อการออกแบบ web เราจะต องสร างตารางข นมาใหม โดยคล กเมาส ในต าแหน งท ต องการสร างตาราง แล วคล กท ป ม Create table จะเป ดกรอบ Table Properties ข นมาให เรากาหนดส วนประกอบต างๆ ของตาราง ด งภาพ ภาพท 4 Rows: กาหนดจานวนแถวของตาราง Columns: กาหนดจานวนคอล มน ของตาราง CSS class: กาหนดร ปแบบสาเร จร ป ในท น ให เล อกเป น Normal Width: ความกว างของตาราง ให เล อกหน วยเป น เปอร เซ นต หร อ pixel ข นอย ก บความต องการ ถ าเล อกเป น เปอร เซ นต จะกาหนดเป น เปอร เซ นต จากหน าจอท แสดง Height: ความส งของตาราง โดยท วไปม กจะไม กาหนด Border: ความหนาของขอบตาราง Cell padding: ระยะห างของต วหน งส อ หร อว ตถ ท อย ใน cell ก บขอบของ cell Cell spacing: ระยะห างระหว าง cell Background color: ส พ นหล งของตาราง ถ าต องการให พ นตารางเป นส ให พ มพ code ส ใน ช องว าง หร อ คล กท ป มท เป นร ป eye dropper จะเป ดกรอบ Color picker ข นมา ให เราเล อกส ท ต องการ แต ถ าต องการให พ นตารางเป น ส ขาว ก ไม ต องเล อกข อน

9 Background image: เล อกภาพท ต องการมาป เป นพ นหล งของตาราง โดยคล กท ป ม insert image ด านหล งช องว าง แล วเล อกภาพท ต องการ แล วทาเช นเด ยวก บ การแทรกภาพ ท ผ านมาแล ว แต ถ าไม ต องการให ม ภาพเป นพ นตาราง ก ไม ต องเล อกข อน ภาพท 5 เม อกาหนดค าต างๆ เสร จแล ว ให คล กท ป ม OK ก จะปรากฏตารางข นมาตามท เราได กาหนด ในท น จะเป นตาราง 3 แถว และ 3 คอล มน และในแต ละช อง เราเร ยกว า Cell cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 6 ในกรณ ท เราต องการเปล ยนค ณสมบ ต ของตารางใหม เช นต องการเปล ยนส พ น ก าหนด ขอบตารางใหม ให เราคล กเมาส ท ขอบตาราง จนเก ดเป นจ ดส เหล ยมท ม มตาราง แล วคล กท ป ม (Table properties ก าหนดค ณสมบ ต ของตาราง) ก จะเป ดกรอบ Table properties ให เราเข าไปแก ไขตารางได ใหม อ กคร ง ซ งเราจะสามารถแก ไข หร อเปล ยนแปลงตารางได ตามท ต องการ

10 การแก ไขตาราง หล งจากท เราสร างตารางเสร จแล ว สามารถแก ไขตาราง ตามท ต องการได อ ก ด งน Insert row แทรกแถว สามารถเพ มแถวของตารางได อ ก เช นจากต วอย าง ด านล าง เราต องการเพ มแถวท 4 เราก คล กเมาส ไว แถวท 3 แล วคล กท ป ม Insert row ก จะม แถวเพ มข นมาอ ก 1 แถว ด งภาพ cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 Insetr column แทรกคอมล มน ภาพท 7 cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 8 Delete row ลบแถว cell 1 1 cell 1 2 cell 1 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 9 Delete column ลบคอล มน cell 1 1 cell 1 3 cell 2 1 cell 2 3 cell 3 1 cell 3 3 ภาพท 10

11 Merg right ผสาน cll ไปทางขวา cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 11 merg down ผสานcell ไปทางด านล าง cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 3 cell 2 2cell 3 2 cell 3 1 cell 3 3 ภาพท 12 Split cell horizontaly แยก cell ทางแนวนอน cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 13 Split cell vertically แยก cell ทางแนวต ง cell 1 1 cell 1 2 cell 1 3 cell 2 1 cell 2 2 cell 2 3 cell 3 1 cell 3 2 cell 3 3 ภาพท 14

12 เร องท 6 การน าเอา Flash เข ามาใช เพ อเพ มความน าสนใจ ใน Webpage ระบบ Web Template จ งอานวยความสะดวกใน การนาเอา Flash เข ามาแสดงใน web ได โดยสามารถเข ยน Code ท เป นภาษา HTML ใน HTML Editor เพ อนาเอา Flash เข ามาแสดง แต ถ าไม สะดวกท จะเข ยนภาษา HTMLเอง ก อานวยความสะดวกด วยการเข ยน Code สาเร จร ป ให นาเอามาใช ก อนท จะน าเอา Flash เข ามาใช จะต องสร าง Flash ให เร ยบร อยก อน แล วเก บไว ใน เคร องคอมพ วเตอร ซ งกระบวนการสร าง Flash ท าอย างไรน น จะไม ขอกล าวถ งในท น ท านต อง ไปศ กษาเอาเอง ในการใช โปรแกรมสร าง Flash เช น การใช โปรแกรม Macromedia Flash หร อ โปรแกรมท ใช งานง าย เช น Swish หร ออาจจะน าเอา Flash ท เขาสร างไว แล ว มาใช ก ได แต ท ส าค ญประการหน งค อ ท านควรร ว า ขนาดของ Flash ท จะเอาเข ามาใช น น ม ขนาดกว างเท าไร และส งเท าไร เม อสร างต นฉบ บ Flash ได แล ว ก เร มต นเอา Flash เข ามาใช ใน webpage โดยม ข นตอนด งน ข นท 1 Insert Flash โดยเข าระบบ แล วเข าไปเพ มแก ไข เน อหาท Page ท ต องการ น าเอา Flash เข ามาใช เพ อเป ด HTML Editor เม อเป ดข นมาแล ว ให คล กท ป ม Insert Flash ด งภาพ ภาพท 15 ข นท 2 Upload Flash ข นไว ท Server เม อเราคล กท ป ม Upload Flash จะปรากฏ กรอบ Add Flash ให เราเล อกหา Flash ท เก บไว แล ว Upload ข นไปไว ท server ตามภาพท 2 ให คล กท ป ม Browse เพ อเข าไปเป ดหา Flash ท อย ในเคร องคอมพ วเตอร (ตามภาพท 3) เม อ หาพบแล ว ให คล กท file Flash แล ว คล กท ป ม Open จะกล บมาท กรอบ Add Flash ในภาพท 2 อ กคร ง ตอนน ให คล กท ป ม Upload

13 ภาพท 16 ภาพท 17 ข นท 2 Copy Code ในข นน ท กรอบ Add Flash จะแสดง (Preview) ต วอย าง Flash ข นมาให เห นด งภาพท 4 พร อมก บด านล าง จะม Code ท เป นภาษา HTML ท เป นค าส งการ แสดง Flash ภาพท 18

14 ให Copy Code เอาไว โดยทาแถบด าท Code แล ว Copy ต อจากน น ก ป ดกรอบ Add Flash กล บมาท กรอบ HTML Editor แล วมาคล กท ป ม Html ท อย ม มล างด านขวา ตามภาพท 5 จะปรากฏ Code ต างๆ ข นมา ด งภาพท 6 ให เราน าเอา Code การแสดง Flash ท เราได Copy ไว ไปวาง (Past) ในตาแหน งท ต องการ ภาพท 19 ภาพท 20 เม อวางเสร จแล ว ให คล กท ป ม Design (ท อย ข างป ม Html) จะปรากฏ เป นกรอบ ส เหล ยมเล กๆ ด งภาพท 7 โดยไม เห นต วอย าง Flash ก ไม ต องแปลกใจ ให คล กท ป ม Submit Quary เพ อบ นท กการแก ไข และกล บไปย ง Page ให ลองเป ด Page น ด ก จะเห น Flash แสดง ในหน า webpage ตามท ต องการ ภาพท 21

15 เร องท 7 การน าเอา Video เข ามาใช ท านท ม ความสามารถในการเข ยนภาษา HTML สามารถแทรกอะไรก ได เข ามาใน webpage เช นเด ยวก บการแทรก Video ท านก สามารถท าได แต เน องจากผ พ ฒนาระบบ ไม ได เข ยน Code สาเร จไว เหม อนก บ Flash (ซ งจะม การพ ฒนาต อไป) ด งน นท านจะต องเข ยน Code เอาเอง โดยม ว ธ การด งน ก อนท ท านจะน าเอา Video เข ามาใช จะต องสร าง Video ให เร ยบร อยก อน แล วเก บไว ในเคร องคอมพ วเตอร ซ งกระบวนการสร าง Video ท าอย างไรน น จะไม ขอกล าวถ งในท น ท าน ต องไปศ กษาเอาเอง โดย Video ท สร าง จะต องอย ในร ปแบบ Streaming Video (wmv) แต ท ส าค ญประการหน งค อ ควรร ว า ขนาดของ Video ท จะเอาเข ามาใช น น ม ขนาดกว างเท าไร และ ส งเท าไร เม อสร างต นฉบ บ Video ได แล ว ก เร มต นเอา Video เข ามาใช ใน webpage โดยม ข นตอนด งน ข นท 1 เป ดหน า webpage ท ต องการแทรก Video โดยเข าระบบ ป อน User Name และ Password แล วเข าไปย ง HTML Editor ของ Page ท ต องการแทรก Video ข นท 2 Upload video ข นไว ท server ให คล กท ป ม Intert Image แล วด าเน นการตาม ข นตอนในภาพท 1 ด งน 1. คล กท ป ม Browse เพ อเข าไปเล อก Video ท เก บอย ในเคร องคอมพ วเตอร จะเป ด กรอบ Choose file ข นมา 2. เล อก File Video โดยคล กเมาส ท ช อ File 3. คล กท ป ม Open 4. ให ด ในช อง Library ว า อย ใน folder image หร อไม ถ าไม ใช ให คล กเล อก Folder image (ความจร งเก บไว ท ไหนก ได แต เวลาเข ยน Code ก ให อ างอ ง Folder ให ถ กต อง) 5. คล กท ป ม Upload เพ อส ง Video ข นไว บน Server ภาพท 22

16 ข นท 3 เข ยนคาส งแสดง Video โดยเล อกท ป ม Html ท อย ม มล างด านขวาของ HTML Editor แล วเข ยน Code ตามภาพท 3 ภาพท 23 หมายเหต การก าหนดขนาดของ Video ควรกาหนดให เท าก บขนาดของต นฉบ บ โดย เปล ยนค าจากใน คาส ง width และ height ภาพท 24 เม อเข ยน Code เสร จแล ว ให คล กท ป ม Submit Quary แล วไปเป ดด จะปรากฏกรอบแสดง Video ตามภาพท 4 ภาพท 25

17 เร องท 8 การแทรกเส ยง ถ าต องการน าเอาเส ยงเข ามาแสดงใน Webpage เราสามารถท าได โดยใช ว ธ การ เช นเด ยวก บการแทรก Video ท กประการ เพ ยงแต เปล ยนจาก File Video เป น File เส ยง และ ลดขนาดความส งของกรอบการแสดงเส ยงเป น ประมาณ 50 Pixel