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

Description
บทท 3 การใช งาน HTML Editor ผลการเร ยนร ท คาดหว ง ผ เร ยนสามารถใช HTML

Please download to get full document.

View again

of 17
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Data & Analytics

Publish on:

Views: 15 | Pages: 17

Extension: PDF | Download: 0

Share
Transcript
บทท 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 อ นๆ เร องท 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 เร องท 2 การเพ มข อความ เม อต องการพ มพ ข อความ ให คล กเมาส ในช องท เป นพ นท พ มพ เน อหา ซ งสามารถพ มพ ได เช นเด ยวก บการพ มพ เอกสารท วๆ ไป แต ในกรณ ท ต องการนาเอาข อความจากเอกสารท พ มพ ไว แล วมาใช เช น เอกสารท พ มพ ไว จากโปรแกรม Microsoft Word ไม สามารถเป ดเข ามาใช ได โดยตรง แต ต องใช ว ธ การ ไป Copy เอกสารแต ละส วนมาวาง แต ไม แนะน าให copy มาจาก เอกสาร word โดยตรง แต ควร save เอกสารเป น wordpad เส ยก อน ปร บแต งข อความ โดยสามารถปร บแต งข อความได ด งน ปร บร ปแบบต วหน งส อ จากช องต างๆ ด งน - Style เป นร ปแบบต วอ กษร สาเร จร ปท ได เตร ยมไว 3 ร ปแบบ - Font ปร บร ปแบบ Font ของต วหน งส อ ซ งม อย 9 ร ปแบบ - Size ขนาดของต วหน งส อ - Paragraph กาหนดร ปแบบต วหน งส อเป นแบบ heading ปร บต วหน งส อเป นต วหนา ต วอย าง ต วหนา ปร บต วหน งส อเป นต วเอ ยง ต วอย าง ต วเอ ยง ปร บต วหน งส อ ให ม เส นใต ต วอย าง ต วข ดเส นใต ปร บต วหน งส อให เป นต วยกกาล ง ต วธรรมดา ต วยกกาล ง ปร บต วหน งส อให เป นต วห อย เปล ยนส ต วหน งส อ ต วหน งส อส แดง ต วธรรมดา ต วห อย เปล ยนพ นหล งต วหน งส อ ต วหน งส อม พ นหล งส แดง เร องท 3 การสร างเส นและปร บแต งเส น การสร างเส น ให เราคล กท ป ม จะปรากฏเส นข นมา ซ งเส นท สร างข นมาน สามารถ ปร บแต งได ด งน ปร บความยาว และ ความหนาของเส น ปร บได โดย คล กเมาส ท เส น จะปรากฏเป น จ ด ส เหล ยนล อมรอบเส น ให ใช เมาส คล กท ส เหล ยนเล กๆ น แล วลากเมาส เพ อปร บขนาของเส น ท งความยาว และ ความหนาของเส น ปร บส ของเส น โดยคล กท เส น แล วคล กท ป ม เพ อเล อกส ของเส น เร องท 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 เพ อเล อกภาพท ต องการ ภาพก จะมาปรากฏแทรกในเน อหา การใช ภาพท อย ในเคร องคอมพ วเตอร กรณ ท ต องการใช ภาพท เราสร างข นมาใหม และบ นท กไว ในเคร องคอมพ วเตอร ดาเน นการ ด งน 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 แถว ส วนต วหน งส อในแถว อ น อย เสมอขอบด านล างของภาพ 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 ทางแนวต ง 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 ข นมา ให เราเล อกส ท ต องการ แต ถ าต องการให พ นตารางเป น ส ขาว ก ไม ต องเล อกข อน 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 ให เราเข าไปแก ไขตารางได ใหม อ กคร ง ซ งเราจะสามารถแก ไข หร อเปล ยนแปลงตารางได ตามท ต องการ การแก ไขตาราง หล งจากท เราสร างตารางเสร จแล ว สามารถแก ไขตาราง ตามท ต องการได อ ก ด งน 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 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 เร องท 6 การน าเอา Flash เข ามาใช เพ อเพ มความน าสนใจ ใน Webpage ระบบ Web Template จ งอานวยความสะดวกใน การนาเอา Flash เข ามาแสดงใน web ได โดยสามารถเข ยน Code ท เป นภาษา HTML ใน HTML Editor เพ อนาเอา Flash เข ามาแสดง แต ถ าไม สะดวกท จะเข ยนภาษา HTMLเอง ก อานวยความสะดวกด วยการเข ยน Code สาเร จร ป ให นาเอามาใช ก อนท จะน าเอา Flash เข ามาใช จะต องสร าง Flash ให เร ยบร อยก อน แล วเก บไว ใน เคร องคอมพ วเตอร ซ งกระบวนการสร าง Flash ท าอย างไรน น จะไม ขอกล าวถ งในท น ท านต อง ไปศ กษาเอาเอง ในการใช
Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks