สร าง Web Page ด วยโปรแกรม Composer จ ดท าโดย นายศ กด เดช ศร แก วท ม อาจารย 2 ระด บ 7 โรงเร ยนแม เมาะว ทยา อ.แม เมาะ จ.ล าปาง ป การศ กษา 2546
ค าน า ป จจ บ น การเผยแพร ข าวสารสาระในระบบอ นเทอร เน ตก าล งเป นท น ยม ท งน เพราะ ต นท นต า กระจายข าวสารได รวดเร วในวงกว าง การเผยแพร ข าวสาร สาระในระบบอ นเทอร เน ตม หลากหลายร ปแบบ แต ร ปแบบท เป นพ นฐานค อการ เผยแพร ในล กษณะไฟล ท ม ส วนขยายเป น html ส าหร บโปรแกรมท ใช สร างไฟล ประเภทน ม หลากหลายโปรแกรม ประส ทธ ภาพข นอย ก บราคา Composer เป นโปรแกรมย อยท ต ดมาก บโปรแกรมบราวเซอร หลาย ๆ โปรแกรม ค ม อเล มน ได จ ดท าจาก Composer ท ต ดมาใน Mozilla ในล น กซ ทะเล 5.5 Mozilla+Composer เป นโปรแกรมท สามารถใช งานได ฟร ม ท งร นท ใช งานใน ระบบปฏ บ ต การว นโดวส จ งน บเป นโปรแกรมสร างเว บเพ จท น าศ กษาอ กโปรแกรม หน ง แม ประส ทธ ภาพของโปรแกรมจะไม ส งน ก แต ก ถ อว าเพ ยงพอส าหร บการสร าง งานในระด บพ นฐาน จ งหว งเป นอย างย งว าจะเก ดประโยชน ต อผ สนใจ ลดค าใช จ าย ในการจ ดซ อโปรแกรมท งของเอกบ คคล และประเทศชาต ศ กด เดช ศร แก วท ม
สารบ ญ เร อง หน า บทท 1 ร จ กโปรแกรม การเป ดโปรแกรม เคร องม อพ นฐาน บทท 2 ก าหนดค าพ นฐานก อนการสร างช นงาน ก าหนด Site ก าหนดค ณสมบ ต พ นฐาน บทท 3 การจ ดการก บต วอ กษร ร ปแบบต วอ กษร ส ต วอ กษร ขนาดต วอ กษร ส ญล กษณ หร อเลขข อ การจ ดต าแหน งข อความ บทท 4 การจ ดการร ปภาพ น าภาพมาเป นพ น น าภาพมาประกอบเน อหา ก าหนดขนาดภาพ บทท 5 ตาราง การสร างตาราง ปร บเปล ยนค ณสมบ ต ตารางหร อเซลล ส ตารางหร อเซลล การผสานเซลล การแทรกแถว สดมภ
สารบ ญ เร อง หน า บทท 6 การเช อมโยง ( Link ) การเช อมโยงด วยข อความ การเช อมโยงด วยร ปภาพ การเช อมโยงระหว างหน าในไฟล เด ยวก น
5 Web Page>Composer การสราง Web page ดวยโปรแกรม Composer โปรแกรม Composer เปนโปรแกรมยอยทตดมากบโปรแกรมบราวเซอรหลาย ๆ โปรแกรม ในทน %จะน(าเสนอ Composer ทตดมากบ Mozilla Mozilla เปนโปรแกรมทมใช0 แ ละตดต%งได0ท%งในระบบปฏบตการ Linux และ ระบบปฏบตการ Windows ( โปรแกรมทตดต%งใน Linux และ Windows เปนคนละช=ดกน ) ดงน%น โปรแกรม Composer จ?งเปนทางเล@อกทนาเล@อกอกโปรแกรมหน? ง เน@ องจากเรยนรA 0โปรแกรมเดยว แตสามารถใช0งานได0 2 ระบบปฏบตการ นบเปนข0อดอกข0อหน? ง ท นอกเหน@อจากเปนโปรแกรมทสามารถใช0งานได0ฟร ท% งน%ความสามารถของโปรแกรม แม0จะไมสAงนก แตกFถ@อวาเพยงพอในการสร0าง Web Page ในระดบเบ@%องต0น บทท 1 จดประสงค 1. สามารถเปMดโปรแกรมได0ท%ง ในระบบปฏบตการ Linux และ ระบบปฏบตการ Windows 2. บอกหน0าทสวนประกอบของโปรแกรมในระดบพ@%นฐานได0 แนวทางในการศกษา 1. การเปMดโปรแกรม ให0ผA0เรยนดAจากส@อ แล0วลองปฏบตจรง 2. สวนประกอบโปรแกรม ต0องจ(าให0ได0วาในแตละสวนใช0ท(าอะไร ส(าหรบวธการปฏบตจะมในบทตอไป
6 Web Page>Composer การเปดโปรแกรม โปรแกรม Composer เปนโปรแกรมทสามารถตดต%งได0ท%งในระบบปฏบตการ Linux และ ระบบปฏบตการ Windows และเปนโปรแกรมยอยของโปรแกรม เวFบบราวเซอร (ในลน=กซทะเล ) แตถ0าเปนบนระบบปฏบตการ วนโดว จะอยAในเวFบบราวเซอร Mzilla ดงน %น จะเปMดโปรแกรม Composer จ?งต0องเปMด โปรแกรม เวFบบราวเซอร (ในลน=กซทะเล ) หร@อโปรแกรม Mzilla กอน การเปMดโปรแกรม Composer ในระบบปฏบตการ Linux มวธการเปMดงาย ๆ 2 วธ โดยให0คลกตรงต(าแหนงทลAกศรช% ทใดทหน?งกFได0 ภาพท 1-1
7 Web Page>Composer เม@อเปMดโปรแกรมบราวเวอรแล0วกFจะได0ดงภาพท 1-2 แล0วคลกตรงลAกศรช%ทใดกFได0เพ@อเปMดโปรแกรม Composer ภาพท 1-2
8 Web Page>Composer การเปดโปรแกรม Composer ในระบบปฏ,บ-ต,การ Windows มวธการเปMดงาย ๆ 2 วธ ตรงต(าแหนงทลAกศรช% ทใดทหน? งกFได0 ภาพท 1-3
9 Web Page>Composer แนะน2าส3วนประกอบโปรแกรม Composer สตวอกษร/หร@อ ตาราง และวตถ=อ@น ๆ สพ@%นหลงตวอกษร เพมขนาดตวอกษร ลดขนาดตวอกษร บรเวณพมข0อความ วางรAปภาพหร@อสร0างงานตาง ๆ ทต0องการ ภาพท 1-4 แนะน2าส3วนประกอบเพ,6มเต,ม ก(าหนดคาเบ@%องต0นตาง ๆ เชน ก(าหนด Site เปMดดAช%นงานในโปรแกรมบราวเซอร แทรกวตถ=ตาง ๆ ในงาน เชน รAปภาพเปนต0น แทรกตาราง เช@อมโยงเอกสารไปยงเอกสารสวนอ@น ๆ หร@อหน0าอ@ น ๆ
10 Web Page>Composer ก(าหนดคาเบ@%องต0นตาง ๆ เชน ก(าหนด Site Body: การพมพตวอกษรปกต Paragraph:การยอหน0า หร@อการเขยนข0อความเปนวรรคตอน Heading:ก(าหนดข0อความเปนหวข0อใหญ Heading 1 ตวอกษรมขนาดใหญส=ด Heading 6 ตวอกษรมขนาดเลFกส=ด Address:ใช0ในการพมพ พวกทอยAของ Web Site ตาง ๆ เชน http://www.maemoh.com เปนต0น ก(าหนดให0ตวอกษรเปน ตวหนา ตวเอยง และขดเส0นใต0 สญญลกษณและเลขล(าดบข0อความ การจดระเบยบข0อความ เชน จดชดซ0าย จดกลางเปนต0น Normal:/ เปนม=มมองปกต HTML Tags:/ เปนม=มมองทมสญญลกษณ บอก Tags HTML <HTML>Source:// ม=มมองในการจดการโดยใช0ภาษา HTML Preview:// ดAลกษณะงานทสมบAรณ ตาราง 1-1
11 Web Page>Composer ประเมนตนเองทายบท บทท 1 ตอนทC6 1 ให0นกเรยนท(าเคร@ องหมาย X ในข0อทสอดคล0องกบระดบการเรยนรA 0ของนกเรยน 1. นกเรยนสามารถเปMดโปรแกรม Composer ในระบบปฏบตการ Windows ได0ในระดบใด ก. ช(านาญ ข.ปานกลาง ค.ไมแนใจ 2. นกเรยนสามารถเปMดโปรแกรม Composer ในระบบปฏบตการ Linux ได0ในระดบใด ก. ช(านาญ ข.ปานกลาง ค.ไมแนใจ 3. สามารถบอกหน0าทสวนประกอบของโปรแกรมเบ@%องต0นได0ในระดบใด ก. ช(านาญ ข.ปานกลาง ค.ไมแนใจ ตอนทC6 2 นกเรยนคดวาจะต0องศ?กษาเพมเตมในเร@องใด ถ?งจะสามารถน(าไปใช0สร0างงานจรงได0 1.... 2.... 3....
12 Web Page>Composer กหนดคพนฐนกอนกรสรงชนงน บทท 2 จดประสงค สามารถกาหนดคาและคณสมบตพนฐานของ Web Page ได% 1. กาหนดท) *จดเก-บไฟล/ตาง ๆ ( Site )ได%เหมาะสม 2. กาหนดส)ตวอกษร Normal Text ได% 3. กาหนดส)ตวอกษร Link Text ได% 4. กาหนดส)ตวอกษร Active Link Text ได% 5. กาหนดส)ตวอกษร Visited Link Text ได% 6. กาหนดส)พนได% 7. นารNปภาพมาเปQนพนได% 8. กาหนดข%อความบนแถบ Title ได% แนวทางในการศกษา 1. ให%นกเร)ยนศVกษาจากเอกสาร แล%วลองปฏบตจรงจนเกดความชานาญ 2. การนาภาพมาเปQนพน ให%ศVกษาในบทตอไป
13 Web Page>Composer กรกหนด Site Site ในท) *น)หมายถVงเว-บไซต/ หรอท)*เก-บไฟล/ตาง ๆ เชนไฟล/เอกสาร ไฟล/รNปภาพ หรอไฟล/อ *น ๆ ท)*ใช%ประกอบ เม*อเร *มสร%างโครงงานใหมทกครง ควรต%องกาหนด Site กอน ทงน)เพ*อสดวกในการทางาน โดยเฉพาะอยางย*ง การกาหนด Site จะม)ผลตอการเช *อมโยงเอกสาร หรอการ Link เปQนอยางมาก การกาหนด Site ม) 2 รNปแบบ หรอ 2 ประเภท คอ Local Site และ Remote Site ในท)*น)จะนาเสนอเพ)ยง การกาหนดในลกษณะ Local Site ในระดบพนฐานเทานน การกาหนด Site ในลกษณะ Local Site จะเปQนการกาหนดท)*เก-บไฟล/ตาง ๆ ในเคร *องคอมพวเตอร/ของเรา 1. สร%างโฟลเดอร/ ในสวนเก-บข%อมNลสวนใดก-ได% และตงช*อโฟลเดอร/ตามต%องการ 2. คลกท Edit และ Publishing Site Settings ดงภาพท 2-1 ภาพท 2-1
14 Web Page>Composer ภาพท 2-2 3. พมพ%ช'อ Site ทช)อง Site Name ช'อ Site อาจเป0นช' องานท ก2าลงจะท2าหร'อช'อใด ๆ ก7ได9ทบ)งบอกถ<งช=นงานน=น ๆ 4. ช)อง Publishing address ( e.g.: 'ftp://ftp.myisp.com/myusername'): ให9พมพ% ส)วนเก7บข9อมMล ตามด9วยโฟลด%ทเราสร9าง ( จากข9อ 1 ) เช)น A:School หร'อ A:lampang หร'อ C:school หร'อ D:lampang เป0นต9น 5. คลกทปVWม OK
15 Web Page>Composer กหนดคณสมบตพนฐน กอนลงมอสร%างหน%าเอกสาร ควรกาหนดหรอต งคาตาง ๆ ท)*จาเปQนเบองต%นกอน การกาหนดคณสมบตพ นฐาน 1. คลกท)* Format บนเมนNบาร/ 2. คลกท)* Page Colors and Background ซV*งจะปรากฎหน%าตางอ)กหน%าตางหนV*ง ดงภาพท) * 2-3 ภาพท)* 2-3
ภาพท 2-4 16 Web Page>Composer ถ9าต9องการปรบเปล ยนค)าสตวอกษรในลกษณะต)าง ๆ ให9คลกท Use custom colors: จากน=นก7ปรบค)าสตวอกษรตามต9องการ * Normal text:ค'อสตวอกษรปกต * Link text:สตวอกษรทเช'อมโยงไปยงส)วนอ'น ๆ หร'อไฟล%อ'น * Active link text:สตวอกษรทเป0น Link text จะเปล ยนส เม'อเม9าส%อยM)เหน'อข9อความน=น ๆ * Visited link text:สตวอกษรทเป0น Link text จะเปล ยนเป0นสทก2าหนดตามน =เม' อถMกคลดไปคร =ง หน< งแล9ว * Background :ค'อการก2าหนดสพ'=นของหน9า เอกสาร หร'อไฟล%เอกสาร ** Background Image คอการนาภาพมาเปQนพนหลง ซV*งจะกลาวในบทตอไป **
17 Web Page>Composer การกาหนด Page Properties 1. คลกท)* Format บนเมนNบาร/ ( ดNภาพท)* 2-3 ประกอบ ) 2. คลกท)* Page Title and Properties ซV*งจะปรากฎหน%าตางอ)กหน%าตางหนV*ง ดงภาพท)* 2-5 ภาพท)* 2-5 Title: เปQนข%อความท)*ปรากฎบนแถบ Title ดงภาพท) * 2-6 Author:สาหรบบอกผN%จดทา Description:ชองน)ม)ไว%สาหรบคาอธบายเพ*มเตม ภาพท)* 2-6
18 Web Page>Composer ประเมนตนเองทยบท บทท&' 2 ตอนท&' 1 ให%นกเร)ยนทาเคร *องหมาย X ในข%อท)*สอดคล%องกบระดบการเร)ยนรN %ของนกเร)ยน 1. นกเร)ยนสามารถกาหนด ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 2. นกเร)ยนสามารถกาหนดส)ตวอกษร Normal Text ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 3. นกเร)ยนสามารถกาหนดส)ตวอกษร Link Text ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 4. นกเร)ยนสามารถกาหนดส)ตวอกษร Active Link Text ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 5. นกเร)ยนกาหนดส)ตวอกษร Visited Link Text ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 6. นกเร)ยนสามารถกาหนดส)พนได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 7. นกเร)ยนสามารถบอกตาแหนงการนาภาพมาเปQนพนเอกสารได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ 8. นกเร)ยนสามารถสร%างข%อความบนแถบ Title ได%ในระดบใด ก. ชานาญ ข.ปานกลาง ค.ไมแนใจ ตอนท&' 2 นกเร)ยนคดวาจะต%องศVกษาเพ*มเตมในเร*องใด ถVงจะสามารถนาไปใช%สร%างงานจรงได% 1.... 2.... 3.... 4.... 5....
19 Web Page>Composer การจดการกบตวอกษร ตวอกษร เปนสงสคญสหรบกรสรง Web Page ทงน เพระเปนส#วนใหรยละเอ ยด ทงดนเน( อห กรอธบย ชแจง กรกหนดขนด ส และกรจดกรกบตวอกษรในดนต#ง ๆ ใหเหมะสมจะทใหช นงนสวยน#อ#น ด0แลวเขใจง#ย บทท 3 วตถประสงค 1. สมรถกหนดร0ปแบบตวอกษรได ( Font ) 2. สมรถกหนดสใหตวอกษรได 3. สมรถเพม ลด ขนดตวอกษรได 4. สมรถกลกษณะตวหน ตว เอยง และข ดเสนใตขอควม ตลอดจนยกเลกสงทกล#วมได 5. สมรถกหนดเลขลดบ หร(อสญลกษณAหนขอควมได 6. สมรถจดย#อหน หร(อจดตแหน#งขอควมได แนวทางในการศกษา ใหนกเรยนศDกษจกเอกสร แลวลองปฏบตจรงจนเกดควมชนญ
การกาหนดรปแบบตวอกษร ( Font ) 1. คลกท Edit และ Preferenecs... ดงภพท 3-1 20 Web Page>Composer ภพท 3-1 ภพท 3-2 2.2.คลกท Font 2.3.คลกท หวล0กศรช ลง 2.1.คลกท กรอบส เหลยม หนขอควม Appearance 2.4.คลกท thai 2. เม(อปรกฏหนต#ง Preferenecs ขDนมใหคลกตมลดบ จกขอ 2.1 2.4
21 Web Page>Composer 3. คลกหวล0กศรช ลงทช#อง Seri. ( ภพท 3-3 ) 4. เล(อนเมสAคลกทร0ปแบบตวอกษรตมตองกร ( ส#วนมก Font ไทย จะม UPC ต#อทยช(อ เช#น AngsanaUPC ) 5. คลกทปUVม Ok 3 4 5 ภพท 3-3
การกาหนดส$ให%ตวอกษร กรกหนดสใหตวอกษร สมรถทไดทงก#อน และหลงกรพมพAขอควม กรกหนดสใหตวอกษรก#อนพมพA 1. คลกท Shoose color for text 2. ในหนต#ง Text Color ใหเล(อกสตมตองกร จกนนคลกทปUVม OK 3. พมพAขอม0ลตมตองกร เท#น เรก]จะไดตวอกษรทมสตมท เรกหนด 22 Web Page>Composer Shoose color for text ภพ 3-1 กรกหนดสใหตวอกษรหลงพมพAขอควมแลว 1. คลกเมสAคลUมขอควมท ตองกรเปลยนส 2. คลกท Shoose color for text 3. ในหนต#ง Text Color ใหเล(อกสตมตองกร จกนนคลกทปUVม OK
23 Web Page>Composer การกาหนดขนาดตวอกษร อจกหนดก#อนพมพA หร(อหลงพมพAก]ได แต#ในท น จะนเสนอวธกรกหนดขนดหลงกรพมพAขอควม ทงน เพระจะเห]นขนดเปลยนแปลงไดชดเจนกว# 1. คลกคลUมขอควมท ตองกรเปลยนขนด 2. คลกทตวอกษร A ทมร0ปล0กศรช ขD น ซD งจะเปนกรเพมขนดตวอกษร 3. หกจะลดขนดก]ใหคลกท A ทมร0ปล0กศรช ลง ( ทงน ขอควมทปรบเปลยนขนดจะตองถ0กเล(อกอย0# ตมวธกรขอ 1 ) ปรบเปลยนขน าด ต วหนา ต วเอยง ขดเสนใต ภพท 3-2
24 Web Page>Composer ตวหนา ตวเอ$ยง หร)อข$ดเส%นใต%ข%อความ มวธกรคลยกน 1. คลกคลUมขอควมท ตองกร 2. หกตองกรใหเปนตวหน ก]คลกทตว B 3. หกตองกรใหเปนตวเอ ยง ก]คลกทตว I 4. หกตองกรใหขอควมข ดเสนใต ใหคลกทตว U สญญลกษณA หร(อเลขหนขอควม เพ(อใหขอม0ลม ระบบ หร(อจดเรยงตมลดบ สมรถทไดทงก#อน และหลงพมพAขอควม กรกหนดก#อนพมพAขอควม 1. คลกเมสAท Apply or remove bulleted list ถตองกรสญญลกษณA หร(อคลกท Apply or remove numdered list ถตองกรเลขลดบขอควม 2. พมพAขอม0ลตมตองกร กาหนดสญญลกษ ณ หรอเลขลาด บขอ ความ ภพท 3-3
25 Web Page>Composer การกาหนดหลงพ-มพข%อความ 1. คลกเมสAในบรรทดท ตองกร ถมหลยบรรทดก]ใหคลกคลUมทงหมด 2. คลกท Apply or remove bulleted list ถตองกรสญญลกษณA หร(อคลกท Apply or remove numdered list ถตองกรเลขลดบขอควม การจดย.อหน%า หร)อจดตาแหน.งข%อความ กรจดตแหน#งขอควมท เหมะสม ทใหหนเอกสรเปนระเบ ยบ น#ด0น#ชม และง#ยต#อกรทควมเขใจ ไม#ควรใชกรเคะคนวรรคในกรจดตแหน#งขอควม ทงนเพระไม#สะดวก และจดใหสวยงมไดยก การจดย#อหนา หรอการจดตาแหน#งขอความ ภพท 3-4 กรจดย#อหน หร(อจดตแหน#งขอควม อจจดก#อนพมพAขอควมหร(อหลงพมพAขอควมก]ได กรจดก#อนพมพA 1. ใหคลกท แถบเคร(องม(อตมตองกร [ ถเปน Indent text ( move right ) หร(อ Outdent text ( move
left ) ทงน จะตองคลกท Indent text ( move right ) ก#อน Outdent text ( move left ) จDงจะใชงนได เอ..เปนเพระอะไรนะ ตองลอง ไม#ลองไม#ร0 ] 2. พมพAขอม0ลตมตองกร กรจดหลงพมพA กรจดหลงพมพA จะจดทละบรรทดหร(อ หลยบรรทดก]ได 1. คลกทบรรทดหร(อ คลกคลUมกลU #มขอควม 2. คลกทแถบเคร(องม(อ อนใดอนหนDงตมตองกร 26 Web Page>Composer คาถามทายบท บทท 3 ตอนท 1 ใหนกเรยนทเคร( องหมย X ในขอทสอดคลองกบระดบกรเรยนร0 ของนกเรยน 1. นกเรยนสมรถกหนดสตวอกษร Normal Text ไดในระดบใด ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 2. นกเรยนสมรถกหนดสตวอกษร Link Text ไดในระดบใด ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 3. นกเรยนสมรถเพม ลด ขนดตวอกษรไดในระดบใด ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 4. นกเรยนสมรถกหนดลกษณะตวหน ตว เอยง และข ดเสนใตขอควม ตลอดจนยกเลกสงทกล#วมได ในระดบใด ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 5. นกเรยนสมรถกหนดเลขลดบ หร(อสญลกษณAหนขอควมไดในระดบใด
ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 6. นกเรยนสมรถจดย#อหน หร(อจดตแหน#งขอควมไดในระดบใด ก. ชนญ ข.ปนกลง ค.ไม#แน#ใจ 27 Web Page>Composer ตอนท 2 นกเรยนคดว#จะตองศDกษเพมเตมในเร(องใด ถDงจะสมรถนไปใชสรงงนจรงได 1.... 2.... 3.... 4.... 5.... 6....
28 Web Page>Composer การจ ดการร ปภาพ การน าภาพเข ามาประกอบในหน าเอกสารม หลายร ปแบบ เช น เป นภาพพ นหล ง เป นภาพประกอบเน อหา เป นต น บทท 4 ว ตถ ประสงค 1.น กเร ยนสามารถน าภาพมาเป นพ นเอกสารได 2.น กเร ยนสามารถน าภาพท เป นพนเอกสารออกได 3.น กเร ยนสามารถน าร ปภาพมาประกอบเน อหาได 4.น กเร ยนสามารถลบร ปภาพท ประกอบเน อหาออกได 5.น กเร ยนสามารถปร บเปล ยนค ณสมบ ต ร ปภาพท น ามาประกอบเน อหาได แนวทางในการศ กษา ให น กเร ยนศ กษาจากเอกสาร แล วลองปฏ บ ต จร งจนเก ดความช านาญ
29 Web Page>Composer การน าภาพมาเป นพ นหล ง 1.คล กท Format 2.คล กท Page Colors and Background จะปรากฏหน าต าง Page Colors and Background ด งภาพท 4-2 ภาพท 4-1 ให คล กท ป ม Choose File จากน นจะปรากฏหน าต าง Select Image File ด งภาพท 4-3 ภาพท 4-2
30 Web Page>Composer หาท เก บภาพตามท ได จ ดเตร ยมไว ซ ง โครงสร างการเก บข อม ลในล น กซ ส าหร บผ เร มต นใหม อาจเป นป ญหา บ าง ขอให ศ กษาเพ มเต มในส วนของ การใช ระบบปฏ บ ต การ ส วนการ เล อกภาพให คล กเล อกตามต องการ เม อเล อกภาพได แล วให กดป ม Open ภาพท 4-3 จากน นจะปรากฏหน าต าง Page Colors and Background ให คล กท ป ม OK ภาพท 4-4
31 Web Page>Composer จะสวยหร อไม ก ข นอย ก บการจ ดเตร ยม การน าภาพท เป นพ นหล งออก ม ว ธ การด งน ภาพท 4-5 เม อใส แล วปรากฏว าไม สวย อยากเอาออก ก สามารถท าได ไม ยาก 1.คล กท Format 2.คล กท Page Colors and Background จะปรากฏ หน าต าง Page Colors and Background 3.ลบขอความใน Background Image ออก 4.คล กท ป ม OK ภาพท 4-6
32 Web Page>Composer การน าร ปภาพมาประกอบเน อหา 1.คล กบร เวณท จะน าภาพมาใส ในท น จะน าภพมาไว ในตาราง ( หมายเลข 1 ) 2.คล กท Image จะปรากฏหน าต าง Image Properties ( ภาพท 4-8 ) ภาพท 4-7 3.พ มพ ข อความท เก ยวก บภาพท จะน าเข าในช อง Alternate text: ในท น ค อข อความ" ภาพโลก" เพราะภาพท จะน าเข ามาค อภาพโลก 4.คล กท ป ม Choose File จะปรากฏหน าต าง Select Image File ( ภาพท 4-9 ) ภาพท 4-8
5.คล กเพ อเล อกภาพท จ ดเตร ยมไว แล วคล กป ม Open จะปรากฏหน าต าง Image Properties (ด งภาพท 4-10) 33 Web Page>Composer ภาพท 4-9 6.คล กท Dimensions 7.ก าหนดขนาดความกว างของภาพได ท ช อง Width และก าหนดความส งของภาพได ท ช อง Height แต ถ าก าหนดขนาดไว ตามท ต องการในข นตอนการแต งภาพด วยโปรแกรมแต งภาพแล ว ก ไม จ าเป นต องก าหนดอ กก ได 8.คล กท ป ม OK จะได ร ปภาพมาประกอบช นงาน หร อเน อหา ท าให น าสนใจย งข น ภาพท 4-10
34 Web Page>Composer การลบภาพออก 1.คล กท ร ปภาพท ต องการลบ 2.กดป ม Delete ท แป นพ มพ ภาพท 4-11 การปร บเปล ยนค ณสมบ ต ภาพ 1.คล กขวาท ร ปภาพ 2.คล กท Image Properties 3.เม อหน าต าง Image Properties ถ กเป ดข นมา ก สามารถก าหนดค าต าง ๆได ตาม ต องการ
35 Web Page>Composer ค าถามท ายบท บทท 4 ตอนท 1 ให น กเร ยนท าเคร องหมายในข อท สอดคล องก บระด บการเร ยนร ของน กเร ยน 1.น กเร ยนสามารถน าภาพมาเป นพ นเอกสารได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 2.น กเร ยนสามารถนาภาพท เป นพ นเอกสารออกได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 3.น กเร ยนสามารถน าร ปภาพมาประกอบเนอหาได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 4.น กเร ยนสามารถลบร ปภาพท ประกอบเนอหาออกได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 5.น กเร ยนสามารถปรบเปล ยนค ณสมบ ต ร ปภาพท น ามาประกอบเน อหาได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ ตอนท 2 น กเร ยนค ดว าจะต องศ กษาเพ มเต มในเร องใดจ งจะสามารถน าไปใช สร างงานจร งได 1... 2... 3... 4... 5... 6...
36 Web Page>Composer ตาราง ตาราง ม ความส าค ญก บการสร าง web Page ท งการท าตารางเพ อจ ดเก บขอม ลให เป นระเบ ยบ และการจ ด วางแบบ หร อการออกแบบหน า Web Page ท งหมด Web Site ท เราเห นแทบท กแห งม การน าตารางมาช วยในการ จ ดร ปแบบท งน น ด งน นการศ กษาเร องตารางจ งม ความจ าเป น บทท 5 จ ดประสงค 1.สามารถสร างตารางตามตองการได 2.สามารถก าหนด หร อปร บเปล ยนค ณสมบ ต ของตารางและเซลล ได 3.สามารถก าหนดส ให เซลล หร อตารางได 4.สามารถผสานเซลล ได 5.สามารถแทรกแถว และลบแถวในตารางได 6.สามารถแทรกสดมภ และลบสดมภ ได 7.สามารถแทรกเซลล และลบเซลล ได แนวทางในการศ กษา ให น กเร ยนศ กษาจากเอกสาร แล วลองปฏ บ ต จร งจนเก ดความช านาญ
37 Web Page>Composer การสร างตาราง 1.คล กท แถบเคร องม อ Table จะม หน าต าง ถ กเป ดข น ( ภาพท -2 ) ภาพท 5-1 2.ก าหนดจ านวนแถวในช อง Rows ก าหนดจ านวนสดมภ ในชอง Columns ก าหนดความกวางของหนาเอกสารในชอง Width การก าหนดความกว างของหน าเอกสาร อาจก าหนดเป น เปอร เซ นต หร อเป น Pixels ก ได โดยการคล กท ล กศรช ลง ก าหนดขนาดของเส นในช อง Border ถ าไม ต องการให เส นตารางปรากฏ ให ก าหนดเป นเลข ศ นย ในต วอย างก าหนด Border เป น 1 หมายเหต * แถวค อแนวนอน * สดมภ ค อแนวต ง ภาพท 5-2 3.คล กท ป ม OK ก จะได ตาราง 2 แถว 2 สดมภ ด งร ปท 5-3 ภาพท 5-3
38 Web Page>Composer การปร บเปล ยนค ณสมบ ต ของตารางและเซลล คล กขวาในบร เวณตาราง จากน นเล อนเม าส ไปคล กท Table Cell Properties ภาพท 5-4 การปร บเปล ยนค ณสมบ ต ตาราง ม รายการท นาสนใจในระด บเบ องต น 4 ข อ ก อนอ นให คล กเล อกท Table คล กท น ภาพท 5-5
39 Web Page>Composer 1.Spading เป นการก าหนดระยะห างระหว างเซลล ท อย ในตารางจะต องม ค าต งแต 1 ข นไปถ งจะใส ส เส นได 2.Padding ก าหนดระยะ ระหว างข อความก บเส นตาราง 3.Teble Alignment เป นการก าหนดว าจะให ตารางอย ด านซ าย -กลางหร อขวาของหน าเอกสาร 4.Background Color เป นการก าหนดส เส น เม อก าหนดจนพอใจแล วให คล กท Apply และ OK การปร บเปล ยนค ณสมบ ต Cell จากภาพท 5-6 ให คล กเล อกท Cell ซ งอย ด านบนของหน าต าง ** ป ม Previous และ Next สามารถคล กเพ อเล อนไปย งเซลล ท ต องการได (ขณะคล กให ด ตารางประกอบด วย ) ภาพท 5-6 ส าหร บเร องการปร บเปล ยนค ณสมบ ต Cell ในระด บเบ องต นม ส งท น าสนใจอย ด งต อไปน 1.Size ม สองช อง ค อ Height เป นการก าหนดความสง Width เป นการก าหนดความกว าง จะให หน วยเป น เปอรเซ นต หร อพ กเซลล ก ได 2.Content Alignment ม สองช อง ค อ Vertical เป นการก าหนดให ว ตถ หร อข อความอย ตรงไหนในเซลล ( ดานบน - ตรงกลาง - และดานลาง ในแนวด ง ) Horizontal เป นการก าหนดให ว ตถ หร อข อความอย ตรงไหนในเซลล ( เช น ช ดซ าย - จดกลาง ช ดขวา ในแนวนอน ) ช อง Background Color ก าหนดส ให เซลล เม อก าหนดจนพอใจแล วให คล กท Apply และ OK
40 Web Page>Composer การก าหนดส ให เซลล หร อตาราง การก าหนดส ให ตาราง 1.ใช เม าส คล กคล มท กเซลล ในตาราง 2.คล กขวาในบร เวณตาราง เล อนเม าส ไปคล กท Table or Cell Background Color 3.เล อกส ท หน าตาง Table or Cell Color คล ก OK การก าหนดส ให เซลล 1.คล กขวาในเซลล ท ต องการเต ม หร อเปล ยนส เล อนเม าส ไปคล กท Table or Cell Background Color 2.เล อกส ท หน าต าง Table or Cell Color คล ก OK
41 Web Page>Composer การผสานเซลล ค อการรวมเซลล ต งแต 2 เซลล ท ม พ นท ต ดก น เข าด วยก น เม อผสานแล วจะเหล อเพ ยงเซลล เด ยว แต ม พ นท เพ มข นเท าก บจ านวนเซลล ท ประสาน ม ข นตอนด งน 1.เล อกเซลล ท จะประสาน ม ว ธ เล อกหลายว ธ เช น คล กเม าส ค างไว ท เซลล แรกแล วลากเม าส ไปย งเซลล อ นท ต องการ คล กเม าส ท เซลล แรก จากน นกดป ม Shift ท แป นพ มพ ค างไว แล วคล กเม าส ในเซลล ต อ ๆ ไป 2.คล กขวาในบร เวณเซลล ท เล อก 3.เล อนเม าส ไปคล กท Join Selected Cells เท าน เซลล ท เล อกไว ก จะประสานเป นเซลล เด ยวก น ภาพท 5-7
42 Web Page>Composer การแทรกแถว 1.คล กเม าส ในตารางบร เวณท จะแทรกแถว 2.คล กขวา แล วเล อกคล กระหว าง Row Above (แทรกแถวบนต าแหน งท คล กเม าส ) Row Below (แทรกแถวล างต าแหน งท คล กเม าส ) ภาพท 5-8 การลบแถว 1.คล กเม าส ในแถวท ต องการลบ 2.คล กขวา แล วเล อนเม าส ไปท Table Delete และ เล อนต อไปคล กท Row(s) ภาพท 5-9
การแทรกสดมภ 1.คล กขวาในตารางบร เวณท จะแทรกสดมภ 43 Web Page>Composer 2. เล อนเม าส ไปท Table Insert และเล อนต อไปคล กท Column Before (กรณ ท จะให สดมภ ท แทรกอย - หน าต าแหน งการพ มพ ) หร อคล กท Column After (กรณ ท จะให สดมภ ท แทรกอย หล งต าแหน งการพ มพ ) ภาพท 5-10 การลบสดมภ 1.คล กขวาในสดมภ ท ต องการลบ 2.เล อนเม าส ไปท Table Delete และ เล อนต อไปคล กท Column(s) ภาพท 5-11
44 Web Page>Composer การแทรกเซลล 1.คล กขวาในตารางบร เวณท จะแทรกเซลล 2.เล อนเม าส ไปท Table Insert และเล อนต อไปคล กท Cell Before (กรณ ท จะให เซลล ท แทรกอย - หน าต าแหน งการพ มพ ) หร อคล กท Cell After (กรณ ท จะให เซลล ท แทรกอย หล งต าแหน ง- การพ มพ ) ภาพท 5-12 การลบเซลล 1.คล กขวาในเซลล ท ต องการลบ 2.เล อนเม าส ไปท Table Delete และ เล อนต อไปคล กท Cell(s) แต ถ าจะลบความส งของเซลล ให พอด ก บว ตถ หร อข อความท อย ในเซลล ให คล กท Cell Contents ภาพท 5-13
45 Web Page>Composer ค าถามท ายบท บทท 5 ตอนท 1 ให น กเร ยนท าเคร องหมาย X ในข อท สอดคล องก บระด บการเร ยนร ของน กเร ยน 1.น กเร ยนสามารถสร างตารางตามต องการได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 2.น กเร ยนสามารถก าหนด หร อปร บเปล ยนค ณสมบ ต ของตารางและเซลล ได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 3.น กเร ยนสามารถก าหนดส ให เซลล หร อตารางได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 4.น กเร ยนสามารถผสานเซลล ได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 5.น กเร ยนสามารถแทรกแถว และลบแถวในตารางได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 6.น กเร ยนสามารถแทรกสดมภ และลบสดมภ ได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ 7.น กเร ยนสามารถแทรกเซลล และลบเซลล ได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ ตอนท 2 น กเร ยนค ดว าจะต องศ กษาเพ มเต มในเร องใดจ งจะสามารถน าไปใช สร างงานจร งได 1.... 2.... 3.... 4.... 5.... 6....
การเช อมโยง( Link ) Web Page เป นเอกสารด จ ตอล ใช ก บเคร องคอมพ วเตอร การท าไฟล เอกสารให ม เพ ยงหน าเด ยว ยาวไปเร อย ๆ จะม ผลเส ยหลายประการ เช น ไม สะดวกในการอ าน ไม เป นหมวดหม ท าให ไฟล ม ขนาดใหญ เป ดได ช า โดยเฉพาะการเป ดอ านผ านระบบเคร อข ายอ นเทอร เนต ด งน นจ งต องม การจ ดแบ งเอกสารออกเป นหน าย อย ๆ เหม อนเอกสารโดยท วไป ในการเป ดหน าเอกสารจากหน าหน งไปย งอ กหน าหน งจ งต องม จ ดท จะใช เม าส คล ก ซ งจ ด จ ดน เร ยกว า จ ดเช อมโยง หร อจ ด Link บทท 6 จ ดประสงค 1.สามารถเช อมโยงเอกสารด วยข อความได 2.สามารถเช อมโยงเอกสารด วยร ปภาพได 3.สามารถเช อมโยงเอกสารในหน าเด ยวก นได แนวทางในการศ กษา ให น กเร ยนศ กษาจากเอกสาร แล วลองปฏ บ ต จร งจนเก ดความช านาญ
การเช อมโยงม หลายร ปแบบ ในท น จะน าเสนอการเช อมโยงเพ ยง 3 ร ปแบบ ได แก 1.การเช อมโยงด วยข อความ การเช อมโยงด วยข อความ น บเป นการเช อมโยงท พบมากท ส ด 2.การเช อมโยงด วยร ปภาพ น บเป นการเช อมโยงท น ยมก นอ กร ปแบบหน ง 3.การเช อมโยงภายในไฟล เอกสารเด ยวก น การเช อมโยงในล กษณะน ใช ในกรณ ท หน าเอกสารน น ๆ ม ความยาวมาก ๆ การเช อมโยงด วยข อความ กรณ ต อไปน จะเป นการเช อมโยงเอกสารระหว างไฟล ซ งไฟล ท เช อมโยงก นจะต องเก บอย โฟลเดอร เด ยวก น และระด บเด ยวก น 1.ใช เม าส คล กคล มข อความท จะท าเป นจ ดเช อมโยง ภาพท 6-1 2.คล กท ป ม Link บนแถบเคร องม อ จะปรากฏหน าต าง Link Properties ภาพท 6-2
3.คล กท ป ม Choose File จะปรากฏหน าต าง Open HTML File ภาพท 6-3 4.ท หน าต าง Open HTML File ให คล กไฟล ท ต องการเช อมโยงไปหา ในต วอย างเป นการเช อมโยงจากไฟล 001.html ไปหาไฟล index.html ด งน นจ งคล กท ไฟล index.html 5.เม อคล กเล อกไฟล ท ต องการแล ว ให คล กท ป ม Open หล งจากน นจะปรากฏหน าต าง Link Properties ภาพท 6-4 6.คล กท ป ม OK ก เป นอ นเสร จการสรางจ ดเช อมโยงด วยข อความแล ว ลองทดสอบก บโปรแกรม บราวเซอร ด นะคร บว าได ผลเป นไปตามทต องการหร อไม
การเช อมโยงด วยร ปภาพ น บเป นอ กล กษณะในการเช อมโยงท ได ร บการน ยม ท งน เพราะนอกจากจะสวยงามแล วย งส อความเข าใจได ง ายด วย การเช อมโยงด วยภาพว ธ การเหม อนก บการเช อมโยงด วยข อความ เพ ยงแต ใช ร ปภาพแทนข อความเท าน น ว ธ การเช อมโยงด วยร ปภาพ 1.น าภาพเข ามาในโปรแกรม Composer เหม อนก บการน าภาพเข ามาประกอบช นงานตามปกต ภาพท 6-5 2.โดยการคล กบร เวณท จะน าภาพเข ามา แล วคล กท ป ม Image บนเมน บาร จะปรากฏหน าต าง Image Properties ดงภาพท 6-5
คล กท Link ( หมายเลข 1 ) แล วคล กท ป ม Choose File (เลข 2 ) จะปรากฏหน าต าง Open HTML File ภาพท 6-6 3. คล กเล อกไฟล ท จะเช อมโยงตามต องการ ( เลข 3 ) จากน นคล กท หมายเลข 4 ( Open ) จะปรากฏหน าต าง Alert ให คล กป ม OK จากน นจะกล บมาท หน าต าง Image Properties อ กคร งหน ง ด งภาพท 6-7 ภาพท 6-7
4.ให พ มพ ข อความในชอง Alternate text ด วยข อความท เก ยวข องก บเร อง หร อห วข อการเช อมโยง 5.คล กท ป ม OK ก เป นอ นเสร จการเช อมโยงด วยร ปภาพแล ว ลองเป ดโปรแกรมบราวเซอร ทดสอบผลด นะคร บ การเช อมโยงในเอกสารเด ยวก น ใช ในกรณ ท เอกสารน นม ความยาวมาก ๆ 1.คล กคล มข อความท ต องการให ม การเช อมโยงไปหา 2.คล กท Insert แล วเล อนลงไปคล กท Named Anchor จากน นคล กป ม OK 3.คล กคล มข อความท ต องการให เป นจ ดเช อมโยง จากน นคล กท ป ม Link บนเมน บาร 4.คล กท ล กศรช ลง (วงกลมส เทาเข ม ในภาพท 6-8 ) แล วเล อกข อความท ต องการให ม การเช อมโยงไปหา ( ข อความตามข นตอนท 1 ) จากน นคล กท ป ม OK เท าน ก จะได การเช อมโยงในเอกสารไฟล เด ยวก นแล วคร บ ภาพท 6-8
ค าถามท ายบท บทท 6 ตอนท 1 ให น กเร ยนท าเคร องหมาย ในข อท สอดคล องก บระด บการเร ยนร ของน กเร ยน 1.น กเร ยนสามารถเช อมโยงเอกสารด วยข อความได ในระด บใด ก. ช านาญ ข.ปานกลาง 2.น กเร ยนสามารถเช อมโยงเอกสารด วยร ปภาพได ในระด บใด ก. ช านาญ ข.ปานกลาง 3.น กเร ยนสามารถเช อมโยงเอกสารในไฟล เด ยวก นได ในระด บใด ก. ช านาญ ข.ปานกลาง ค.ไม แน ใจ ค.ไม แน ใจ ค.ไม แน ใจ ตอนท 2 น กเร ยนค ดว าจะต องศ กษาเพ มเต มในเร องใดถ งจะสามารถน าไปใช สร างงานจร งได 1... 2... 3...