วิชาการสร้างเว็บไซต์

</tr> </table> 2. การใส่ข้อความในตาราง ในการใส่ข้อความในตารางสามารถทําได้โดยพิมพ์ข้อความที่ต้องการลงในส่วนของแถวหรือคอลัมน์ที่ต้องการ ภายในแท็ก <td> ข้อความในตาราง <ds 3. การจัดตําแหน่งข้อความในตาราง การกําหนดตําแหน่งข้อความสามารถทําได้ด้วยการกําหนดแอททริบิวท์align จํากําหนดที่คําสั่งแท็กหรือ <td> ก็ได้มีรูปแบบคําสั่งดังนี้<table> <tr align= "ตําแหน่งการแสดงผลข้อความ"> <td align="ตําแหน่งการแสดงผลข้อความ"></td> <tr> </table 4. การใส่หัวตาราง ในการกําหนดหัวข้อตารางจะใช้แท็ก <th> ในการกําหนด ซึ่งย่อมาจาก Table Head ซึ่งในการ กําหนดหัว ของตารางนี้โปรแกรมบราวเซอร์ที่สําคัญ ๆ ส่วนมากกําหนดให้ของดาราตัวอักษรเป็นตัวหนา และมีตําแหน่ง อยู่ที่กึ่งกลางของตาราง แบบทดสอบหลังเรียนหน่วยที่6 การแทรกตาราง คําชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงตอบเดียว 1.คําสั่งในข้อใดที่ใช้สร้างแถวของตาราง ก. <table>...</table> ข. <td>.....</td> ง. <th>...</th>

ง.<th>...</th> 2. การจัดตําแหน่งข้อความในตาราง ข้อใดถูกต้องที่สุด ก. <ta align="ตําแหน่งการแสดงผลข้อความ"> ข. <tr align="ตําแหน่งการแสดงผลข้อความ"> ค. <table align="ตําแหน่งการแสดงผลข้อความ"> ง. <tx align="ตําแหน่งการแสดงผลข้อความ 3. การใส่หัวตาราง ข้อใดถูกต้องที่สุก. <table> หัวข้อตาราง</table> ข. <tr>หัวข้อตาราง</tr> ค. <td>หัวข้อตาราง</td ง. <th>หัวข้อตาราง</th> 4. การใส่ข้อความกํากับตาราง ข้อใดถูกต้องที่สุด ก. <table align="ตําแหน่งชื่อตาราง"> ข. <td align="ตําแหน่งชื่อตาราง > ค. <tr align="ตําแหน่งตาราง"> ง. <caption align="ตําแหน่งชื่อตาราง"> 5. การกําหนดตําแหน่งของตาราง ข้อใดถูกต้องที่สุด ก. <td align="ตําแหน่งของตาราง"> ค. <table align="ตําแหน่งของตาราง ข. <tr align="ตําแหน่งของตาราง ง. <th align="ตําแหน่งของตาราง"> 6. การกําหนดขนาดตาราง ข้อใดถูกต้องที่สุด ก. <table width ขนาดความกว้างของตาราง” height=" ขนาดความสูงกว้างของตาราง ข. <table align="ขนาดของตาราง"> ค. <caption Galign="ขนาดของตาราง"> ง. <table> ขนาดของตาราง 7. การกําหนดสีให้กับตาราง ข้อใดถูกต้องที่สุด ก. <tablebackground="ชื่อสี"> ข. <table align="ชื่อส"ี> ค. <table border="ชื่อสี"> ง. <table bgcolor="ชื่อ"> 8. การใส่รูปภาพในเซลล์ของตาราง ข้อใดถูกต้องที่สุด ก. <table><img src="ชื่อไฟล์รูปภาพ"></img></table> ข. <tr>-<img src="ชื่อไฟล์รูปภาพ"></img></tr>

ค. <table background "ชื่อไฟล์รูปภาพ"> ง. <td><img src="ชื่อไฟล์รูปภาพ"></img></td> 9. การรวมเซลล์ในแนวนอนของตาราง ข้อใดถูกต้องที่สุด ก. <td rowspan="จํานวนคอลัมน์ที่ต้องการรวมเซลล์"> ข. <td rowspan=" - จํานวนแถวที่ต้องการรวมเซลล"์> ค. <td colspan="จํานวนคอลัมน์ที่ต้องการรวม"> ง. <td colspan="จํานวนแถวที่ต้องการรวม 10. การกําหนดขนาดเส้นขอบตาราง ข้อใดถูกต้องที่สุด ก. <table border="ขนาดของเส้นขอบ > ข. <table bordercolor="ขนาดของเส้นขอบ > ค. <table align="ขนาดของเส้นขอบ"> ง. <table bordercolor="ขนาดของเส้นขอบ > เฉลย 1.ค.2.ข.3.ข.4.ค.5.ค 6.ก.7.ง.8.ง.9.ค.10.ก. หน่วยท7ี่การเชื่องโยง 7.1 การสร้างการเชื่อมโยง การสร้างการเชื่อมโยงในหน้าเว็บเพจ เป็นการกําหนดส่วนของข้อความหรือรูปภาพที่เลือกไว้เพียงใน จุดเชื่อมโยงไปยังเนื้อหาภายในหน้าเดียวกันหรือเชื่อมโยงไปยังเว็บเพจอื่น หรือเชื่อมโยงไปยังเว็บไซต์อื่นได้การสร้างการเชื่อมโยงประกอบด้วยส่วนที่ใช้สําหรับเชื่อมโยงเป็นจุดเชื่อมโยงไปยังเป้าหมายปลายทางอาจเป็น ข้อความหรือรูปภาพก็ได้และส่วนปลายทางที่ต้องการนําผลมาแสดง

การเชื่อมโยงเว็บเพจในระบบอินเทอร์เน็ตเข้าด้วยกันเป็นสิ่งที่ทําให้เห็นเขามีความแตกต่างจากเอกสาร ธรรมดาที่ทําให้ผู้ใช้สามารถเปิดดูเฉพาะหน้าเว็บเพจที่สนใจได้การเชื่อมโยงบนเว็บเพจมีด้วยกันหลายรูปแบบ อาจแบ่งตามการใช้งานหรือตามลักษณะของการเชื่อมโยงก็ได้สามารถกําหนดรูปแบบการเชื่อมโยงเว็บเพจ ดังนี้<a hrels ชื่อตําแหน่งที่ทําการเชื่อมโยง > ข้อความที่เข้าเทียมโยง /> 7.2 การสร้างการเชื่องโยง การเยี่ยมโยงจากรูปภาพเป็นการทําให้รูปภาพที่ประกอบอยู่ในหน้าเว็บเพจสามารถเชื่อมโยงไปยัง ส่วนอื่น ๆ ได้เช่นเดียวกับการใช้ข้อความเป็นส่วนเชื่อมโยง ซึ่งมีรูปแบบคําสั่งดังนี้<a href="ชื่อเว็บไซต์หรือไฟล์เอกสารเว็บเพจ"> <img src=ชื่อไฟล์รูปภาพ </a> 7.3 การสร้างการเชื่อมโยงภายในเว็บเพจ การเชื่อมโยงภายในเว็บเพจเดียวกัน เป็นการเชื่อมโยงไปยังตําแหน่งต่าง ๆ ภายในหน้าเว็บเพจ เดียวกัน อันเนื่องมาจากเนื้อหาในหน้าเว็บเพจมีข้อมูลที่ต้องการนําเสนอจํานวนมาก หรืออาจจะแบ่งข้อมูลไว้ เป็นหัวข้อ ย่อยต่าง ๆ ในหน้าเดียวกัน โดยการสร้างการเชื่อมโยงภายในเว็บเพจจะต้องกําหนดชื่อตําแหน่งที่ต้องการ เชื่อมโยงไปถึง จากนั้นให้สร้างการเชื่อมโยงโดยใช้เครื่องหมาย "#" (Sharp) นําหน้าชื่อของตําแหน่งที่กําหนด ไว้เช่น #topic มีวิธีการดังนี้กําหนดชื่อในตําแหน่งที่ต้องการภายในหน้าเว็บเพจ มีรูปแบบคําสั่งแท็กดังนี้<a name= a ตําาแหน่งที่จะทําการเชื่อมโยงมาหา"></a> แท็ก <a> มีแอททริบิวท์name ที่ใช้สําหรับกําหนดชื่อในตําแหน่งที่ต้องการ กําหนดจุดเชื่อมโยงไปยังซื้อที่กําหนดไว้มีรูปแบบคําสั่งแท็กดังนี้<a href#ชื่อตําแหน่งที่ทําการเชื่อมโยง ข้อความที่ใช้เชื่อมโยง</a>

7.4 การสร้างการเชื่อมโยงไปเว็บเพจอนื่การสร้างเชื่อมโยงไปเว็บเพจอื่นเป็นการเชื่อมโยงภายในเว็บไซต์เดียวกัน โดยคําสั่งสําหรับการ เชื่อมโยงเว็บเพจ มีรูปแบบดังนี้<a href= ชื่อไฟล์เอกสารเว็บเพจ" target= เป้าหมายการแสดงผล">ข้อความที่ใช้เชื่อมโยง</a> href กําหนดชื่อไฟล์เอกสารเว็บเพจที่ต้องการแสดง Target กําหนดเป้าหมายการแสดงผลหากไม่กําหนดจะหมายถึงให้แสดงไฟล์เอกสารเว็บ เพจที่หน้าต่าง โปรแกรมเว็บเบราว์เซอร์ปัจจุบัน แบ่งได้ดังนี้Blank ให้แสดงเว็บเพจโดย Parent ให้แสดงเว็บเพจในเฟรมก่อนหน้าเฟรมปัจจุบัน 1 ระดับ Self ให้แสดงเว็บเพจในเฟรมปัจจุบัน Top ให้แสดงเว็บเพจในหน้าต่างปัจจุบัน โดยยกเลิกเฟรมทั้งหมด

เว็บไซต์ทั่วไปจะประกอบด้วยไฟล์ต่าง ๆ เพื่อเก็บข้อมูลหรือเนื้อหาที่ใช้แสดงผลในเว็บเพจทั้งไฟล์รูปภาพ ไฟล์HTML หรือไฟล์เอกสารอื่น ๆ ซึ่งเราสามารถอ้างอิงชื่อไฟล์เพื่อการนํามาใช้งานได้ทั้งแบบเจาะจง เช่น <img src="vec.jpg"> ซึ่งการอ้างอิงแบบนี้ไฟล์นั้น ๆ จะต้องอยู่ในโฟลเดอร์เดียวกันกับไฟล์เว็บเพจหรือ ใช้เครื่องหมาย */* (Slash) คั่นระหว่างชื่อโฟลเดอร์เพื่อระบุโฟลเดอร์7.5 การสร้างการเชื่อมโยงไปเว็บไซต์ภายนอก การเชื่อมโยงข้อมูลกับเว็บไซต์อื่น เป็นกําหนดการเชื่อมโยงไปยังชื่อเว็บไซต์ต่าง ๆ ที่อยู่ในเครือข่าย อินเทอร์เน็ต โดยมีรูปแบบการเชื่อมโยงเหมือนกับการเชื่อมโยงไปยังไฟล์เว็บเพจในเว็บไซต์เดียวกันโดยการ กําหนดตําแหน่งเว็บไซต์หรือโดเมนเนมแทนการกําหนดชื่อไฟล์ด้วยการพิมพ์http:// นําหน้าชื่อเว็บไซต์นั้น เสมอ มีรูปแบบคําสั่งดังนี้<a href="URL ของเว็บไซต์ที่ต้องการเชื่อมโยง”>ข้อความที่ใช้เชื่อมโยง</a> 7.6การสร้างการเชื่อมโยงเพื่อส่งอีเมล การเชื่อมโยงเพื่อส่งอีเมล์เป็นการสร้างการเชื่อมโยงเพื่อส่งอีเมล์ไปยังตําแหน่งที่กําหนดซึ่งเมื่อคลิก ที่จุดเชื่อมโยงแล้วโปรแกรมสําหรับส่งอีเมล เช่น โปรแกรม MS Outlook Express ในระบบปฏิบัติการ Windows จะถูกเรียกใช้งานอัตโนมัติการสร้างการเชื่อมโยงเพื่อส่งอีเมลสามารถกําหนดแอททริบิวท์href โดย ใช้mailto: นําหน้าชื่อตําแหน่งที่อยู่ของอีเมล์มีรูปแบบดังนี้<a href="mailto a E-mail Address">ข้อความที่ใช้เชื่อมโยง</a>

7.7 การเชื่อมโยงไปยังไฟล์ดาวน์โหลด การเชื่อมโยงไปยังไฟล์ดาวน์โหลด เป็นการเชื่อมโยงไปยังไฟล์ชนิดอื่นที่ไม่ใช่ไฟล์HTML ได้แก่ ไฟล์รูปภาพ ไฟล์โปรแกรม ไฟล์บีบอัด ไฟล์เสียงไฟล์มัลติมีเดีย และไฟล์เอกสาร เพื่อเปิดดูข้อมูลหรือบันทึกไฟล์ซึ่งมีลักษณะการใช้งานเหมือนกับการสร้างการเชื่อมโยงแบบอื่น โดยการทํางานของโปรแกรมเว็บเบราว์เซอร์จะทํางานตามลักษณะของไฟล์นั้น ๆ ดังนี้1. ถ้าเป็นไฟล์รูปภาพโปรแกรมเว็บเบราว์เซอร์จะเปิดไฟล์ภาพอัตโนมัติ2. ถ้าเป็นไฟล์อื่นๆ จะปรากฏหน้าต่างให้ดาวน์โหลดไฟล์หรือบันทึกไฟล์เก็บไว้ก่อน เพื่อเปิดไว้ใช้งาน 3. ถ้าเป็นไฟล์โปรแกรมระบบจะทําการรันโปรแกรมเพื่อติดตั้งทันทีหรือบนัทึกเก็บไฟล์ไว้ก่อนแล้ว ติดตั้ง 7.8 การทํา Image Map เพื่อสร้างการเชื่อมโยง อิมเมจแม็พ (Image Map) เป็นการแบ่งพื้นที่ย่อยให้กับรูปภาพ เพื่อใช้สร้างการเชื่อมโยงไปยัง ส่วน ต่าง ๆ ซึ่งการใช้Image Map จะช่วยลดจํานวนรูปภาพที่ใช้เป็นจุดเชื่อมโยงด้วยการแสดงรูปภาพเพียง รูป เดียว แต่สามารถเชื่อมโยงไปยังสิ่งที่ต้องการได้การสร้างพื้นที่ย่อยของอิมเมจแม็พ เรียกว่า Hotspot มีวิธีและรายละเอียดต่าง ๆ ดังนี้7.8.1 การแบ่งพื้นที่ของ Image Map การกําหนดพื้นที่ของ Image Map เป็นการกําหนดตําแหน่งและขนาดของพื้นที่ที่ต้องการให้เป็น จุดเชื่อมโยง รวมถึงการกําหนดไฟล์เว็บเพจที่ต้องการให้แสดง 7.9 การกําหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล การสร้างการเชื่อมโยงเพื่อให้ผู้ใช้งานสามารถคลิกเพื่อเปิดไฟล์เว็บไซต์และอื่น ๆ ได้นั้น จะปรากฏ เป็น สีที่แตกต่างจากข้อความปกติหรือเปลี่ยนเป็นสีอื่นเมื่อมีการคลิก เหล่านี้เราสามารถกําหนดให้มีการแสดง สีต่าง ๆ ได้ตามต้องการดังนี้7.9.1 สถานะของสีที่แสดงข้อความเชื่อมโยง มี3 สถานะ คือ 1. สีของส่วนเชื่อมโยงที่ยังไม่เคยถูกคลิก (Hyperlink) เป็นจุดเชื่อมโยงที่โปรแกรมเว็บ เบราว์เซอร์ยังไม่เคยแสดงผลไฟล์เว็บเพจตามที่กําหนดไว้ปกติโปรแกรมเว็บเบราว์เซอร์จะแสดงข้อความจะ เป็นสีน้ําเงิน 2. สีของส่วนเชื่อมโยงที่เคยถูกคลิกไปแล้ว (Visited Hyperlink) เป็นจุดเชื่อมโยงที่โปรแกรม 3. สีของส่วนเชื่อมโยงตอนถูกคลิก (Active Hyperlink) เป็นจุดเชื่อมโยงกําลังถูกเลือกด้วยโปรแกม เว็บเบราว์เซอร์

สรุปสาระสําคัญ การเชื่อมโยงหน้าเว็บเพจเป็นการกําหนดส่วนของข้อความที่ต้องการหรือรูปภาพที่ได้เลือกไว้เพื่อ จุด เชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ เป็นสิ่งที่ทําให้เว็บเพจมีความแตกต่างจากเอกสารธรรมดาสามารถกํา รูปแบบ การเชื่อมโยงเว็บเพจดังนี้<a href= ชื่อตําแหน่งที่ทําการเชื่อมโยง” ข้อความที่ใช้เชื่อมโยง</a> การสร้างการเชื่อมโยงจากรูปภาพ การกําหนดจุดการเชื่อมโยงด้วยรูปภาพ โดยที่จุดเชื่อมโยงที่เป็นรูปภาพในรูปแบบต่าง ๆ มีรูปแบบคําสั่ง ดังต่อไปนี้<a href="ชื่อเว็บไซต์หรือไฟล์เอกสารเว็บเพจ"> <img src= ชื่อไฟล์รูปภาพ </a> การสร้างการเชื่อมโยงภายในเว็บเพจ การเชื่อมโยงภายในเว็บเพจเดียวกัน เป็นการเชื่อมโยงไปยังตําแหน่งต่าง ๆ ภายในไฟล์เว็บเพ หน้าเดียวกัน เนื่องจากเอกสารเว็บเพจมีข้อมูลจํานวนมากที่ต้องการนําเสนอและอาจแบ่งข้อมูลเป็นหัวข้อย่อย ต่าง ๆ ใน หน้าเดียวกัน การสร้างการเชื่อมโยงมีการกําหนด 2 ส่วน คือ

ส่วนที่1 การกําหนดชื่อ ณ ตําแหน่งที่ต้องการภายในไฟล์เอกสารเว็บเพจ โดยมีรูปแบบคําสั่งแท็กดังนี้<a name="ชื่อตําแหน่งที่จะทําการเชื่อมโยงมาหา"></a> ส่วนที่2 การกําหนดจุดเชื่อมโยงไปยังชื่อที่กําหนดไว้ในส่วนที่1 โดยมีรูปแบบคําสั่งดังนี้<a href="#ชื่อตําแหน่งที่ทําการเชื่อมโยง">ข้อความที่ใช้เชื่อมโยง</a> แบบทดสอบหลังเรียนหน่วยที่7 การเชื่อมโยง (Link) คําชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. การสร้างการเชื่อมโยง (Link) ด้วยข้อความ ข้อใดถูกต้องที่สุด ก. <a img href= "ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง </a> ข. <a href="mailto: ชื่อ E-mail Address"> ข้อความที่ใช้เชื่อมโยง </a> ค. <a href="ชื่อตําแหน่งที่ทําการเชื่อมโยง">ข้อความที่ใช้เชื่อมโยง </a> ง. <a href ="ซึ่งตําแหน่งที่ทําการเชื่อมโยง">< img src="ไฟล์รูปภาพ"></a> 2. การสร้างการเชื่อมโยง (Link) ด้วยรูปภาพ ข้อใดถูกต้องที่สุด ก. <a href="ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง/a> ข. <a href= "ชื่อตําแหน่งที่ทําการเชื่อมโยง"><img src="ไฟล์รูปภาพ"></a> ค. <a href="mailtoชื่อ E-mail Address" > ข้อความที่ใช้เชื่อมโยง</a> ง. a img href="ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง</a> 3. คําสั่งใดใช้สร้างการเชื่อมโยงภายในเว็บเพจ

ก. <a href="URLของเว็บไซต"์ข้อความที่ใช้เชื่อมโยง </a> ข.<a href="mailto: ชื่อ E-mail Address"> ข้อความที่ใช้เชื่อมโยง</a> ค. <a href=“ชื่อไฟล์เว็บเพจ"> ข้อความที่ใช้เชื่อมโยง</a> ง. <a href="#ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง</a> 4. คําสั่งใดใช้สร้างการเชื่อมโยงไปเว็บเพจอื่น ก. <a href="#ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง</a> ข. <a href="mailto: ชื่อ E-mail Address">ข้อความที่ใช้เชื่อมโยง ค. <a href="URL ของเว็บไซต์" > ข้อความที่ใช้เชื่อมโยง</a> ง. <a href= "ชื่อไฟล์เว็บเพจ"> ข้อความที่ใช้เชื่อมโยง</a> 5. คําสั่งใดใช้สร้างการเชื่อมโยงไปเว็บไซต์ภายนอก ก. <a href="ชื่อไฟล์ดาวน์โหลด"> ข้อความที่ใช้เชื่อมโยง </a> ข. <a href="mailto: ชื่อ E-mail Address"> ข้อความที่ใช้เชื่อมโยง</a> ค. <a href="URLของเว็บไซต์">ข้อความที่ใช้เชื่อมโยง</a> ง. <a href="ชื่อไฟล์เว็บเพจ">ข้อความที่ใช้เชื่อมโยง</a> 6. คําสั่งใดใช้สร้างทานชื่อโยงเพื่อส่ง E-mail ก.<a href="mailto: ชื่อ E-mail Address ข้อความที่ใช้เชื่อมโยง</a> ข. <a href= ชื่อไฟล์เว็บเพจ ข้อความที่ใช้เชื่อมโยง</a> ข. <a href ชื่อตําแหน่งที่ทําการเชื่อมโยง ข้อความที่ใช้เชื่อมโยง /> ค. href="URL ของเว็บไซต์ข้อความที่ใช้เชื่อมโยง</a> ง. <a href=”URL ของเว็บไซต์”>ข้อความที่ใช้เชื่อมโยง</a> 7.คําสั่งใดใช้สร้างการเชื่อมโยงไปยังไฟล์ดาวน์โหลด ก. <a href="ชื่อตําแหน่งที่ทําการเชื่อมโยง"> ข้อความที่ใช้เชื่อมโยง</a> ข. <a href="URL ของเว็บไซต"์> ข้อความที่ใช้เชื่อมโยง</a> ค. <a href="mailto: ชื่อ E-mail Address" > ข้อความที่ใช้เชื่อมโยง</a> ง.<a href="ชื่อไฟล์ดาวน์โหลด"> ข้อความที่ใช้เชื่อมโยง /a> 8. การกําหนดพิกัดโคออร์ดิเนตของพื้นที่วงกลมของ Image Map ตรงกับข้อใด ก. x1,y1, x2, y2, r ข.x1,y1, x2, y2,....xn, yn"ค. x1, y1, x2, y2 ง.1 x, y, 9. การหาค่าโคออร์ดิเนตของรูปภาพของ image Map ข้อไม่กล่าวถูกต้อง ก. คํานวณโดยใช้สูตรทางคณิตศาสตร์

ข. สามารถกําหนดค่าตัวเลขได้เอง ค. ดูตําแหน่งของเคอร์เซอร์ในโปรแกรม Paint ง. ใช้ไม้บรรทัดวัดขนาดบนรูปภาพ 10. จากค้าสั่ง body Vink= ชื่อของสี">…ข้อความ ... body มายถึงข้อใด ก. การกําหนดสีของการเชื่อมโยงที่เคยถูกคลิกไปแล้ว ข.การกําหนดสีของการเชื่อมโยงตอนถูกคลิก ค. การกําหนดของการเขียนโยงที่ยังไม่เคยถูกคลิก ง. การกําหนด ความในหน้าเว็บเพจ เฉลย 1.ค.2.ข.3.ง.4.ง.5.ค.6.ก.7.ง.8.ง.9.ค. 10.ก.หน่วยท8ี่การแบ่งหน้าเว ็ บเพจด้วยเฟรม(Frem) 8.1 การแบ่งหน้าเว็บเพจออกเป็นเฟรม การแบ่งหน้าเว็บเพจออกเป็นเฟรม สามารถทําได้ด้วยคําสั่ง <frameset ที่จะต้องใช้ควบคู่กับคําสั่ง <frame> rows ใช้กําหนดจํานวนและขนาดของเฟรมที่ต้องการแบ่งในแนวนอน cols ใช้กําหนดจํานวนและขนาดของเฟรมที่ต้องการแบ่งในแนวตั้ง src ใช้กําหนดชื่อไฟล์เว็บเพจที่ต้องการแสดงในแต่ละเฟรม การกําหนดขนาดของเฟรม สามารถกําหนดได้ดังนี้1.กําหนดขนาดของเฟรมเป็นตัวเลข เป็นการกําหนดตัวเลขขนาดของเฟรมที่ต้องการแบ่ง มีหน่วยเป็น พิกเซล 2. กําหนดขนาดของเฟรมเป็นสัดส่วนร้อยละ เป็นการกําหนดขนาดของเฟรมที่ต้องการแบ่งเป็น สัดส่วน ร้อยละของหน้าต่างแสดงผล

3. กําหนดขนาดของเฟรมด้วยสัญลักษณ์มี2 ความหมาย คือ การแบ่งเฟรมให้มีขนาดเท่ากัน และ หมายถึง การแบ่งเฟรมด้วยพื้นที่ที่เหลืออยู่จากการแบ่งเฟรม กําหนดขนาดของเฟรมในคําสั่ง <frameset> ไม่ว่าจะแบ่งตามแนวตั้งหรือแนวนอน จะใช้การกําหนด ขนาดของเฟรม วิถีหนึ่ง โดยจะต้องกําหนดอย่างน้อย 2 เฟรมเสมอและจะคั่นขนาดของแต่ละเฟรมด้วย เครื่องหมาย (,) เช่น <frameset cols=*600, * > หมายถึง การแบ่งหน้าเว็บเพจออกเป็น 2 เฟรมตามแนวตั้ง โดยเฟรมที่1 มีขนาด 600 พิกเซล และเฟรมที่2 เป็นพื้นที่ที่เหลือ <frameset cols=' *, * '> หมายถึง การแบ่งหน้าเว็บ เพจออกเป็น 2 เฟรมตามแนวตั้ง โดยมีขนาด เฟรมที่เท่ากัน <frameset rows=20%, * > หมายถึง การแบ่ง หน้าเว็บเพจออกเป็น 2 เฟรมตามแนวนอน โดยเฟรม ที่1 มีขนาด 20% ของพื้นที่ทั้งหมด และเฟรมที่2 เป็น พื้นที่ที่เหลือ โปรแกรมเว็บ เบราว์เซอร์จะแสดงผลไฟล์เว็บเพจในส่วนที่อยู่ระหว่างคําสั่ง <body> เท่านั้น และเมื่อใช้คําสั่ง <frameset> แบ่งหน้าต่างโปรแกรมเว็บเบราว์เซอร์ออกเป็นเฟรมและระบุไฟล์ไฟล์ที่ใช้แสดงในเฟรมซึ่งจะ เห็นว่าการใช้คําสั่ง <frameset> เพื่อแบ่งหน้าต่างออกเป็นเฟรมจะไม่มีคําสั่ง <body> และแม้ว่ามีคําสั่ง <body> ก็จะไม่สามารถแสดงผลข้อความที่อยู่ระหว่างคําสั่งได้เนื่องจากการแสดงผลไฟล์เว็บเพจจะเป็นไป ตามที่กําหนดในคําสั่ง <frame> เท่านั้น การระบุไฟล์เว็บเพจที่จะใช้แสดงของแต่ละเฟรมในคําสั่ง <frame> ด้วย การกําหนดที่แอททริบิวท์src ในคําสั่ง <frame> เรียงตามลําดับของการแบ่งเฟรม เช่นหากแบ่งออกเป็น 2 เฟรม ชื่อไฟล์เว็บเพจในคําสั่ง <frame> คําสั่งที่1 จะแสดงผลในเฟรมที่1 และชื่อไฟล์เว็บเพจในคําสั่ง <frame> คําสั่งที่2 ก็จะแสดงผล ในเฟรมที่2 ตามลําดับดังแสดงในตัวอย่างต่อไปนี้

8.2การเชื่อมโยงและแสดงในเฟรม การเชื่อมโยงและแสดงในเฟรมเป็นรูปแบบการเชื่อมโยงส่วนที่ต้องการให้แสดงผลในเฟรมที่ต้องการ ซึ่งจะต้อง กําหนดการเชื่อมโยงเช่นเดียวกับการเชื่อมโยงรูปแบบอื่น และจะต้องกําหนดเป้าหมายส่วนที่ต้องการ 8.2.1 การกําหนดชื่อเฟรม การกําหนดชื่อของเฟรมเพื่อใช้ในการแสดงไฟล์เว็บเพจในกรณีที่ต้องการ ให้แสดงไฟล์เว็บเพจ ในเฟรมที่กําหนด ส่วนใหญ่จะกําหนดให้เฟรมหนึ่งเป็นรายการเมนูและใช้อีกเฟรมหนึ่ง เป็นส่วนแสดงผล เช่น การสร้างไฟล์เว็บเพจเพื่อแบ่งหน้าต่างโปรแกรม เว็บเบราว์เซอร์ออกเป็นเฟรม แต่ละเฟรมให้กําหนดชื่อเฟรม ด้วยการกําหนดแอททริบิวท์name ภายในคําสั่ง <frame> ซึ่งมีรูปแบบต่อไปนี้8.2.2 การเชื่อมโยงและระบุเป้าหมายเฟรม การกําหนดการเชื่อมโยงและระบุเฟรมที่ต้องการเชื่อมโยง นั้น ต้องสร้างเอกสารเว็บเพจที่มีการเชื่อมโยง และกําหนดแอททริบิวท์target ไว้ในคําสั่งแท็ก <a> มีรูปแบบ ดังนี้ Blank แสดงผลการเชื่อมโยงในหน้าต่างใหม่Parent แสดงผลการเชื่อมโยงในพื้นที่เฟรมหลัก Self แสดงผลการเชื่อมโยงในพื้นที่เฟรมของ Link เอง Top แสดงผลการเชื่อมโยงในพื้นที่กรอบโปรแกรมเว็บเบราว์เซอร์

สรุปสาระสําคัญ การใช้เฟรมเป็นการแบ่งหน้าจอของโปรแกรมเว็บเบราว์เซอร์ออกเป็นส่วนย่อย ทําให้สามารถใช้พื้นที่ทั้งหมดบนหน้าจอได้อย่างประสิทธิภาพ เช่นกําหนดให้หน้าจอส่วนบนสุดแสดงชื่อและโลโก้ของหน่วยงานหรือ บริษัท หน้าจอส่วนทางซ้ายแสดงเมนูเพื่อเปิดหรือเชื่อมโยงเว็บเพจอื่น ๆ และหน้าจอส่วนกลางสําหรับแสดง เนื้อหา 1. การแบ่งหน้าเว็บเพจออกเป็นเฟรม สามารถทําได้ด้วยคําสั่ง <frameset> ซึ่งจะต้องใช้ควบคู่กับ คําสั่ง <frame> เสมอซึ่งสามารถกําหนดได้ดังนี้ 2. การแทรกเฟรมซ้อนเฟรมการแทรกเฟรมภายในเฟรมหลัก สามารถกําหนดให้เฟรมมีเฟรมย่อยขึ้นมา ด้วย การเพิ่มคําสั่งแท็ก <frameset> เพื่อเพิ่มการแบ่งเฟรมอีก ซึ่งมีรูปแบบดังนี้<frameset rows= ขนาดของ เฟรม"> <frame src="ไฟล์หรือสิ่งที่ต้องการแสดง> <frameset cols="ขนาดของเฟรม > <frame src="ไฟล์หรือสิ่งที่ต้องการแสดง > <frame src="ไฟล์หรือสิ่งที่ต้องการแสดง > </ frameset> frameset> 3. การกําหนดรายละเอียดของการแบ่งเฟรมสามารถกําหนดได้ด้วยการใช้แอททริบิวท์border ภายใน คําสั่ง <frameset> โดยมีหน่วยเป็นพิกเซล

<frameset border="ขนาดของเส้นแบ่งเฟรม" frameset frameborder="no" bordercolor="ชื่อของสีหรือ#สีรหัสเลขฐานสิบหก" framespacing-กําหนดความห่างระหว่างเฟรม > <frame src= ชื่อไฟล์เว็บเพจ " ></ frameset> 4.การกําหนดรายละเอียดของแต่ละเฟรม (1) การป้องกันการปรับขนาดของเฟรม < frameset> <frame src="ชื่อไฟล์เว็บเพจ” noresize> </ frameset> (2) การกําหนดการแสดงแถบเลื่อน (Scrollbar) สามารถทําได้ด้วยการกําหนด แอททริบิวท์scrolling ภายในค่าสั่ง <frame> โดยสามารถกําหนดค่าตามต้องการ ดังนี้yes กําหนดให้แสดงแถบเลื่อน no กําหนดให้ไม่แสดงแถบเลื่อน auto กําหนดให้หากมีข้อมูลมากกว่าพื้นที่ที่แสดงผลให้แสดงแถบเลื่อนแต่หากข้อมูล น้อย กว่าพื้นที่แสดงผลไม่ต้องแสดงแถบเลื่อน 5.การเชื่อมโยงและแสดงผลในเฟรม (1) การกําหนดชื่อเฟรม < frameset> <frame name="ชื่อของเฟรม" src="ชื่อไฟล์เว็บเพจ " > < frameset> (2) การเชื่อมโยงโดยระบุเป้าหมายเฟรม < body> <a href= ชื่อเอกสารเว็บเพจ" target="เป้าหมายเฟรมที่ต้องการแสดงผล > </ body> 6.การแทรกเฟรมภายในเอกสารเว็บเพจ < body> <iframe src="ชื่อไฟล์HTML หรือชื่อเว็บไซต์> </ iframe>

</ body> แบบทดสอบหลังเรียนหน่วยที่8 การแบ่งเว ็ บด้วยเฟรม (เฟรม) คําชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงข้อเดียว 1. คาํสงั่ใดใชแ้บ่งหนา้เวบ็เพจออกเป็นเฟรม ไดถู้กตอ้งที่สุด ก. <iframe>.....</iframe> ข. < frame> < frameset></frame> ค. < frameset><frame></frameset> ง. < frame><tr><td></td></tr</frame> 2. จากคาํสงั่ต่อไปน้ีจะปรากฏผลตามขอ้ใด ก.หน้าเว็บเพจถูกแบ่งเป็นเฟรมซ้ายขวา จากนั้นแบ่งเฟรมซ้ายเป็นเฟรมบนล่าง ข. หน้าเว็บเพจถูกแบ่งเป็นเฟรมบนล่าง จากนั้นแบ่งเฟรมล่างเป็นเฟรมซ้ายขวา

ค. หน้าเว็บเพจถูกแบ่งเป็นเฟรมบนล่าง ง. หน้าเว็บเพจถูกแบ่งเป็นเฟรมซ้ายขวา 3. การกําหนดขนาดของเส้นแบ่งเฟรมคือข้อใด ก. <frameset frameborder="ตัวเลข"> ข. < frameset bordercolor="no"> ค. < frameset border="no"> ง.<frameset border="ตัวเลข"> 4.การกําหนดไม่ให้แสดงเส้นแบ่งเฟรมคือข้อใด ก. <frameset border="yes"> ข. < frameset bordercolor="no"> ค. < frameset frameborder="yes"> ง.< frames < frameset frameborder="no"> 4. การกําหนดสีของเส้นแบ่งเฟรมคือข้อใด ก. <frameset bordercolor="ชื่อสี"> ข. <frameset frameborder="ชื่อสีค. <frameset border="ชื่อสี"> ง. <iframe src="ชื่อสี"> 5. การกําหนดระยะห่างของช่องว่างทางด้านซ้ายและด้านขวา ในเฟรมคือข้อใด ก. < frame src="page1.html" marginwidth="50"> ข. < frame src="page1.html" marginheigth="50"> ค. < frame src="page1.html" leftmargin="50"> ง. < frame src="page1.html" rightmargin="50"> 6. การป้องกันการปรับขนาดของเฟรมคือข้อใด ก. < frame src="h.html" noresize="no"> ข. < frame src="h.html" noresize="auto"> ค. <frame src="h.html"> ง.< frame src="h.html" noresize> 7. การกําหนดให้ไม่แสดงแถบเลื่อนของเฟรมคือข้อใด ก. <frame src="h.html" noresize> ข. < frame src="h.html" scrolling="auto">

ค. < frame src="h.html" scrolling="yes"> ง. < frame src="h.html" scrolling="no"> 9.การสร้างการเชื่อมโยงโดยระบุเป้าหมายเฟรมคือข้อใด ก. src ข. href ค. target ง. frameset 10.การแทรกเฟรมภายในเอกสารเว็บเพจคือข้อใด ก. <iframe src="ชื่อไฟล์เว็บเพจหรือชื่อเว็บไซต์">...</iframe> ข. <frame src="ชื่อไฟล์เว็บเพจหรือชื่อเว็บไซต"์>...</frame> ค. <frameset src="ชื่อไฟล์เว็บเพจหรือชื่อเว็บไซต์">...</frameset> ง. <frame src="ชื่อไฟล์เว็บเพจ"> เฉลย 1.ค.2.ก.3.ง.4.ง.5.ก.6.ก.7.ง.8.ง.9.ค.10.ก.

หน่วยท9ี่Cascading Style Sheets (CSS) 9.1 ความร ู้เบื้องต ้ นเกยี่วกบั CSS CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียนเฉพาะ ใช้สําหรับตกแต่ง เอกสาร HTML/XHTML ให้มีรูปแบบ สีตัวอักษร เส้นขอบ พื้นหลัง และระยะห่างต่าง ๆ ตามต้องการ ด้วย การกําหนดคุณสมบัติให้กับ Element ต่าง ๆ ของ HTML ซึ่งการสร้างเว็บเพจส่วนใหญ่จะต้องมีการ ทํางาน หลายอย่างที่ต้องทําซ้ํา ๆ ซึ่งทําให้เกิดความไม่สะดวกและทําให้เสียเวลา เช่น การปรับแต่งคุณสมบัติของ ข้อความ แบบตัวอักษร ขนาดตัวอักษร หรือสีของตัวอักษร ซึ่งจะต้องมีการปรับหรือกําหนดคําหลายครั้ง ช่วย ลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทําให้คําสั่งภายในเอกสาร HTML เหลือเพียง ส่วน เนื้อหา ทําให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทําได้ง่ายและรวดเร็วโหลดเว็บเพจได้เร็วเวลาแก้ไขหรือ ปรับปรุง ทําได้ง่าย ไม่ต้องตามแก้ที่HTML tag ต่าง ๆ ทั่วทั้งเอกสารสามารถควบคุมการแสดงผลให้เหมือนกัน หรือ ใกล้เคียงกันในหลาย Web Browser ทําให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนําให้เราใช้CSS แทน ดังนั้นหากเราใช้CSS กับเอกสาร HTML ของเราก็จะทําให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดีCascading Style Sheets (CSS) คือภาษาที่ใช้กําหนดรูปแบบการแสดงผล HTML โดยสร้างขึ้นเพื่อ ใช้ร่วมกับ HTML นั้นคือ HTML ใช้สําหรับกําหนด โครงสร้างข้อมูล ส่วน CSS ใช้สําหรับกําหนดรูปแบบการแสดงผล ตัวอย่างเช่น

การกาํหนดรูปแบบดว้ยCSS ในตัวอย่างข้างต้นเราใช้แท็ก <h3> เพื่อกําหนดหัวข้อเท่านั้น และให้CSS กําหนดการแสดงผลสีน้ํา เงิน จะเห็นได้ว่า CSS คือภาษาที่ใช้ในการกําหนดรูปแบบหรือสไตล์(Style) สําหรับ HTML การแยกการ แสดงผลออกจากข้อมูลช่วยให้ง่ายต่อการเปลี่ยนแปลงรูปแบบในอนาคต เช่น ถ้าต้องการ เปลี่ยนสีให้กับหัวข้อ ในแท็ก <h3> ในทุกเว็บเพจ เราเพียงเปลี่ยนแปลงค่าที่ไฟล์CSS เท่านั้น ทําให้CSS เป็นที่นิยมอย่างมากใน การจัดรูปแบบให้กับเว็บเพจในปัจจุบัน ซึ่งก่อนหน้านี้เราใช้ตารางในการจัดเลย์เอาท์และ ใช้พร็อพเพอร์ตี้ของ HTML ในการจัดรูปแบบ ซึ่งยุ่งยากต่อการเปลี่ยนรูปแบบของทุกเว็บเพจในเว็บไซต์การนําสไตล์ซีทหรือ CSS มาใช้ในการจัดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ ร่วมกับ HTML นั้น เราสามารถทําได้3 วิธีด้วยกัน ดังนี้1. Inline Style เป็นการกําหนดค่าสําหรับ Tag เฉพาะ Tag โดยใช้คําสั่ง Style แทนการใช้ Tas 2.Embedded Style Sheet โดยสร้าง Style ในส่วน Head แล้วกําหนดค่าต่าง ๆ หากส่วน Body Attribute มีTay ที่กําหนดไว้ในส่วน Style ก็จะได้การกําหนดค่าตามนั้น ซึ่ง เหมาะกับการใช้ในเป็นแพง เดียว 3. External Style Sheet เป็นการสร้าง Style Sheet เป็นไฟล์ไว้และถูกเรียกใช้ในไฟล์HTML โดยใช้คําสั่ง Link rel ในส่วน Head ซึ่งเหมาะกับการใช้กับหลาย ๆ เว็บเพจ รูปแบบคําสั่ง CSS คําสั่งของ CSS ประกอบ ด้วย selector, attribute และ value โดยมี โครงสร้างคําสั่งดังนี้

9.2 การเขียน CSS แบบ Inline การเขียน CSS แบบ Inline เป็นการแทรกคําสั่ง CSS ในส่วนของท็กนั้น ๆ โดยทําหน้าที่เป็นเหมือน แอททริบิวท์ของแท็กนั้นแอททริบิวท์style ใช้ในการกําหนดค่าสไตล์ต่าง ๆ ซึ่งอยู่ในรูปของ "attribute:value” ซึ่งถ้ามีมากกว่า หนึ่งชุดจะคั่นด้วยเครื่องหมาย (;) Semicolon ตัวอย่างข้างต้นกําหนดสไตล์ให้แท็ก <h1> โดยให้ข้อความเป็นสีฟ้าด้วยรูปแบบ color ส่วนการ กําหนด รูปแบบให้กับแท็ก <p> เป็นการกําหนดสไตล์ที่มีหลายรูปแบบ การเขียนแบบ Inline ไม่เป็นที่นิยมเนื่องจากต้องเขียนโค้ด CSS ลงไปในแท็ก HTML ดังนั้นจึงไม่สามารถนําสไตล์ไปประยุกต์ใช้กับแท็กอื่น ๆ ได้เช่น ถ้าต้องระบุค่าให้กับทุก ๆ เล็ก ในทุก ๆ เป็นแพน และมีความยุ่งยากในการเปลี่ยนสีภายหลัง 9.3 การเขียน CSS แบบ Embedded การเขียน CSS แบบ Ernbedded เป็นการเขียน CSS ลงไปในไฟล์HTML เช่นเดียวกับการเขียน CSS แบบ inline ซึ่งจะเขียนไว้ในส่วนของ chew โดยมีรูปแบบดังนี้

<style tyle="text/css”>คําสั่ง CSS </style> การกําหนดรูปแบบต่าง ๆ จะถูกกําหนดไว้ภายในแท็ก <style> ซึ่งอยู่ภายในแท็ก <head> อีกทีการกําหนด รูปแบบจะเริ่มต้นด้วยการระบุแท็กที่ต้องการ (selector) จากนั้นจึงเป็นรูปแบบหรือ attribute value ต่าง ๆ ภายในเครื่องหมายปีกกา โดยรูปแบบแต่ละชุดจะถูกคั่นด้วยเครื่องหมาย (;) Semicolon 9.4 การเขียน CSS แบบ External การเขียน CS5 แบบ External เป็นการเขียน CSS ไว้ภายนอกเอกสาร HTML เป็นลักษณะ External Style Sheet ซึ่งสามารถทําได้ด้วยการสร้างไฟล์เอกสาร CSS ที่มีนามสกุล .css ที่ภายในเขียนคําสั่ง CSS ไว้ทั้งหมด ไว้อีกหนึ่งไฟล์เมื่อต้องการให้รูปแบบ CS5 นี้มีผลกับไฟล์เอกสาร HTML ใดก็สามารถเชื่อมโยงมายัง ไฟล์นั้น ๆ ได้ทันทีด้วยคําสั่งดังนี้<link rel="stylesheet" type="text/css" href="ตาํแหน่งไฟล.์css"> เช่น < head> < link rel="stylesheet" type="text/css" href="myStyle.css"> </ head> รูปแบบนี้จะแยกคําสั่ง CSS ไปไว้อีกไฟล์หนึ่ง โดยมีนามสกุลเป็น .css" ส่วนโครงสร้างการเขียนคําสั่ง จะเหมือนกับแบบ Embedded ที่จะต้องเริ่มต้นด้วยการระบุแท็ก (Selector) แล้วตามด้วยรูปแบบ “attribute: value” ต่าง ๆ ภายในเครื่องหมายปีกกา และสังเกตว่าในไฟล์CSS ไม่ต้องมีแท็ก <style> มีแต่คําสั่ง CSS เท่านั้น

9.5 Selectors Selectors หมายถึง สิ่งที่ใช้ระบุแท็กคําสั่ง HTML ที่เราต้องการกําหนดรูปแบบ เช่น แท็ก <p>, <b cus และอื่น ๆ หรืออาจเป็น id หรือ class ที่อยู่ใน HTML ได้โดยมีรูปแบบดังนี้ จากตัวอย่าง p หมายถึง ส่วนของ Selector นั่นเอง การระบุSelector มีความสําคัญในการนํารูปแบบ ที่กําหนดไว้ไปใช้งานที่ไม่เพียงระบุด้วยชื่อแท็กเท่านั้น 9.6 รูปแบบการกาํหนดคุณสมบัติใน CSS การนํา CSS ไปใช้งานจะต้องทราบถึงการกําหนดคุณสมบัติในรูปแบบต่าง ๆ เพื่อการใช้งานเบื้องต้น โดยมีรูปแบบการกําหนดคุณสมบัติใน CSS ดังนี้Fonts คําสั่งเกี่ยวกับข้อความ ได้แก่ขนาดข้อความ (font-size) ฟอนต์ของข้อความ (font-family) ความหนา ของข้อความ (font-weight) และสีของข้อความ (color) เป็นต้น ซึ่งมีคุณสมบัติและค่าที่กําหนดได้ดังนี้ font-family serif, sans-serif, monospace, etc font-size 16pt, larger, 120%, 1.5em font-style normal, italic, oblique font-variant normal, small-caps font-weight normal, bold, bolder, lighter, 100, 200, .., 800 font 16pt sans-serif

สรุปสาระสําคัญ CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียนเฉพาะ ใช้สําหรับตกแต่ง เอกสาร HTML/XHTML ให้มีรูปแบบ สีตัวอักษร เส้นขอบ พื้นหลัง และระยะห่างต่าง ๆ ตามต้องการ ด้วย การกําหนดคุณสมบัติให้กับ Element ต่าง ๆ ของ HTML คําสั่งของ CSS ประกอบด้วย setector, attribute และ value โดยมีโครงสร้างคําสั่งดังนี้selector { attribute: value;} การเขียนCSS แบบ Inline การเขียน CSS แบบ Inline เป็นการแทรกคําสั่ง CSS ลงในส่วนของแท็กนั้น ๆ โดยทําหน้าที่เป็นเสมือน ๆ พอทนั้น มีรูปแบบดังนี้< tag style="attribute: value attribute: value; ....> การเขียนCSS แบบ Embedded การเขียน CSS แบบ Embedded เป็นการเขียน CSS ลงไปในไฟล์HTML เช่นเดียวกับการเขียน CSS แบบ Inline มักนิยมเรียนไว้ในส่วนของ head โดยมีรูปแบบดังนี้<style tyle="text/css"> คําสั่ง CSS </style> เช่น <head> <title>.........</title> <style type="text/css"> selector { attribute: value;

attribute: value; … } </style> </head> การเขียน CSS แบบ External การเขียน CSS แบบ External เป็นการเขียน CSS ไว้ภายนอกเอกสาร HTML เป็นลักษณะ External Style Sheet ซึ่งวิธีการนี้ทําได้ด้วยการสร้างไฟล์เอกสาร CSS ที่มีนามสกุล .css ที่ภายในเขียนคําสั่ง CSS ทั้งหมดไว้อีกหนึ่งไฟล์เมื่อต้องการให้รูปแบบ CSS นี้มีผลกับไฟล์เอกสาร HTML ใดก็สามารถเชื่อมโยงมายัง ไฟนั้น ๆ ได้ทันทีด้วยคําสั่ง <link rel="stylesheet" type="text/css" href="ตําแหน่งไฟล์.css"> Selectors Selectors หมายถึงตัวที่ใช้ระบุแท็ก HTML ที่เราต้องการกําหนดสไตล์เช่น <p>, <i>, <u> และอื่น ๆ หรือ อาจเป็น id หรือ class ที่อยู่ใน HTML ได้มีรูปแบบดังนี้selector { attribute: value; } 1. การระบุSelector ด้วยชื่อแท็ก เป็นการระบุSelector ด้วยชื่อแท็กคําสั่งซึ่งจะส่งผลถึงทุกแท็ก ภายในเว็บเพจ รูปแบบนี้เหมาะ สําหรับการใช้แท็กคําสั่งในรูปแบบเดียวกันทั้งเว็บเพจ ตัวอย่างเช่น ถ้าต้องการ เปลี่ยนลิงค์ทั้งหมดให้เป็นสีเทา เข้ม โดยมีรูปแบบการใช้งานดังนี้tagName { attribute: value; } 2. การระบุSelector ด้วย id Attribute การระบุด้วยild Attribute ใช้ในกรณีที่ต้องการระบุถึงแท็ก เดียวภายในเว็บเพจเท่านั้น เนื่องด้วยเรา สามารถตั้ง 4 ให้กับแท็ก HTML ใด ๆ ได้และ id จะต้องไม่ซ้ํากันด้วย ๆ ดังนั้นหากเราต้องการระบุถึงแท็กใด เป็นการเฉพาะเจาะจง ให้ตั้ง id ให้กับแท็กนั้น ๆ เสียก่อน ตัวอย่างเช่น <p id="topic">Cascading Style Sheets (CSS)</p>

3. การระบุSelector ด้วย Class Attribute การระบุSelector ด้วย class Attribute เป็นการระบุเพื่อเลือก Selector ให้มีการเปลี่ยนแปลง สไตล์ให้กับแท็กคําสั่งได้มากกว่าหนึ่งแท็ก วิธีการนี้มีประโยชน์มาก เช่นเราต้องการให้สิงค์ภายในเว็บไซต์เรามีสี เทา แต่ลิงค์ไปยังเว็บไซต์อื่นเป็นสีฟ้า จะเห็นได้ว่าเราต้องการ ให้แท็ก <3 มีรูปแบบการแสดงผลที่แตกต่างกัน แม้จะเป็นแม็ก car เหมือนกัน เป็นต้น การระบุSelector ด้วย class Attribute เริ่มต้นด้วยการกําหนดclass Attribute ภายในแท็กนั้น ๆ ก่อน ตัวอย่างเช่น < a class="dept" href="/teacher">teacher</a> < a class="dept' href="/activities">activities</a> 4. การระบุSelector แบบอื่น ๆ นอกจากการระบุSelector ใน 3 รูปแบบหลักที่ได้กล่าวไปแล้วนั้น ยังมีการระบุSelector ในรูปแบบอื่น ๆ ซึ่งเป็นในลักษณะของลูกเล่นพิเศษเพื่อเพิ่มความยืดหยุ่นในการเขียน คําสั่ง CSS ดังนี้ (1)การระบุSelector แบบผสมชื่อแท็ก และ class (2)การระบุSelector แบบContextual เป็นการระบุถึงแท็กที่อยู่ภายในแท็กเฉพาะอีกที (3) การระบุSelector แบบรวมกลุ่ม (Grouping) ซึ่งสามารถกําหนด Selector ได้มากกว่าหนึ่ง ในคราวเดียวกัน ตัวอย่างเช่น h1, h2, h3 { color: # fd0000;} h3 { font-style: italic;}

แบบทดสอบหลังเรียนหน่วยที่9 Cascading Style Sheets (CSS) คําชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1.รูปแบบคําสั่ง CSS ข้อใดถูกต้อง ก. selector ( value: attribute;} ข. value { selector: attribute;} ค.selector fattribute: value;} ง. attribute ( selector: value;} 2. การเขียน CSS แบบ Inline ข้อใดถูกต้อง ก. <style tyle="text/css">คําสั่ง CSS </style> ข. <tag style="attribute: value; attribute: value; . . ."> ค. <link rel="stylesheet" type="text/css" href="ตําแหน่งไฟล์.css"> ง. ถูกทุกข้อ 3.การเขียน CSS แบบ Embedded ข้อใดถูกต้อง ก. < tag style="attribute: value; attribute: value; ..."> ข. <link rel="stylesheet" type="text/css" href="ตําแหน่งไฟล์.css"> ค. <style tyle="text/css">คําสั่ง CSS </style> ง. ถูกทุกข้อ 4. การเขียน CSS แบบ External ข้อใดถูกต้อง ก. <link rel="stylesheet" type="text/css" href="ตําแหน่งไฟล์.css”> ข. <style tyle="text/css"> คําสั่ง CSS </style> ค. < tag style="attribute: value; attribute: value; ...">

ง. ถูกทุกข้อ 5. การระบุSelector ด้วยชื่อแท็กที่ถูกต้องคือข้อใด ก. #topic font-weight: bold;} ข. .dept {color: #504f50;} ค. tagName { attribute: value; } ง. < p id="topic"> Cascading Style Sheets ( CSS)</p> 5. การระบุSelector ด้วย id Attribute ที่ถูกต้องคือข้อใด ก. < p id="topic"> Cascading Style Sheets ( CSS)</p> ข. tagName { attribute: value; } ค. a {color: #50450) ง. base{font-weight: bold;} 7. การระบุSelector ด้วย class Attribute มีความหมายตรงตามข้อใด ก. base{font-weight: bold;} ข. เป็นการระบุSelector ด้วยชื่อแท็กคําสั่ง ค. ใช้ระบุแท็กเดียวภายในเว็บเพจเท่านั้น ง. เป็นการเลือก Selector ให้มีการเปลี่ยนแปลงสไตล์ได้มากกว่าหนึ่งแท็ก 8.จากคําสั่งต่อไปนี้จะปรากฏผลตามข้อใด ก. ข้อความ Information เป็นตัวหนาและเอียง ข. ข้อความ Information เป็นสีแดง ตัวหนาและเอียง ค. ข้อความ Technology เป็นสีแดง ง. ข้อความ Technology เป็นสีแดง ตัวหนาและเอียง 9. การระบุSelector แบบ Contextual มีความหมายตามข้อใด ก. เป็นการระบุSelector ด้วย id Attribute ข. เป็นการระบุSelector แบบผสมชื่อแท็กและ class loyarma 2

ค. เป็นการระบุถึงแท็กที่อยู่ภายในแท็กเฉพาะอีกที ง. เป็นการกําหนด Selector มากกว่าหนึ่งในคราวเดียวกัน 10. จากตัวอย่างคําสั่งเป็นลักษณะการระบุSelector แบบใด h1, h2, h3 {color: #fd0000;} ก. การระบุSelector แบบรวมกลุ่ม ข. การระบุSelector แบบ Contextual ค. การระบุSelector ด้วย class Attribute ง. การระบุSelector ด้วยชื่อแท็ก เฉลย 1.ค 2.ข.3.ค.4.ก.5.ค.6.ก.7.ง.8.ข.9.ค.10.ก.หน่วยท1ี0 การสร้างแบบฟอร์ม 10.1 วิธีสร้างแบบฟอร์ม การสร้างแบบฟอร์ม(Form) เพื่อใช้ในการรับข้อมูลเป็นวิธีการหนึ่งที่Dear กันในเว็บไซต์ทั่วไป เพราะ การ สร้าง แบบฟอร์มจะทําให้กรอกข้อมูลได้ง่ายเป็นระเบียบสวยงามและเป็นสัดส่วน การออกแบบฟอร์มให้มีลักษณะ ต่าง ๆ ขึ้นอยู่กับประโยชน์ในการใช้งาน โดยทั่วไปแบบฟอร์มจะถูกนํามาใช้กับเว็บไซต์ประเภท Dynamic Web ที่มีการส่งข้อมูลไปใช้ในการ ประมวล stall Server ส่วนเนื้อหาในหน่วยนี้จะกล่าวถึงพื้นฐานการสร้าง แบบฟอร์มด้วยภาษา HTML เท่านั้น การสร้างแบบฟอร์มจะเริ่มต้นด้วยแท็ก forms และปิดท้ายด้วยแท็ก <forms ซึ่งมีรูปแบบของฟอร์มดังนี้โดยที่name ชื่อของฟอร์ม Method เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบไปด้วย - get เป็นตัวรับส่งข้อมูลขนาดจํากัดจาก Server ไม่เกิน 256 ตัวอักษร - post เป็นตัวรับส่งข้อมูลไม่จํากัดจาก Server

action เป็นตําแหน่ง URL ปลายทางในเว็บเซิร์ฟเวอร์ที่จะส่งข้อมูลไป ประมวลผล 10.2 การเพิ่มส่วนรับข้อมูล ส่วนรับข้อมูลในแบบฟอร์ม เป็นส่วนที่จะนําข้อมูลต่าง ๆ ส่งไปประมวลผลยัง Server ประกอบด้วย อุปกรณ์ต่าง ๆ ที่จะต้องเขียนอยู่ภายในแท็ก <form>...</form> 10.2.1 การสร้างช่องรับข้อมูลชนิด Text Box ช่องรับข้อมูลชนิด Text Box เป็นกรอบสําหรับให้ผู้เข้าเว็บไซต์กรอกข้อมูลลงไป ลักษณะข้อมูล ที่กรอกลงไปจะเป็นข้อความหนึ่งบรรทัดซึ่งมีรูปแบบดังน<ี้input type="text" name="ชื่อของช่องรับข้อความ" value="ค่าเริ่มต้น" size="ความกว้างของช่องรับข้อความ”maxlength="จํานวนตัวอักษรสูงสุดที่ป้อนได้> 10.2.2 การสร้างมูลชนิด Password ช่องรับข้อมูลชนิด Password เป็นช่องสําหรับกรอกข้อมูลลงไปแบบหนึ่งบรรทัดเหมือนกับ ช่องรับข้อมูลชนิด Text Box โดยเมื่อใส่ข้อมูลเข้าไปในช่องแล้วจะมองเห็นเป็นเครื่องหมาย • จะไม่สามารถ มองเห็นข้อมูลจริง ๆ ที่ใส่เข้าไปได้มีรูปแบบดังนี้<input type="password" name="Reของ password" value="ค่าเริ่มต้น" size="ขนาด Password' maxlength="จํานวนสูงสุด"> 10.2.3 การสร้างช่องรับข้อมูลชนิด Text Area ช่องรับข้อมูลชนิด Text การมีความยาวมาก ๆ ส่วนใหญ่จะใช้กับข้อมูล ทีเป็นการแสดง ความคิดเห็น (Comment) หรือจะเห็นได้บ่อยในการรับข้อมูลจากกระดานถามตอบกระทู้ต่าง ๆ มีรูปแบบคําสั่งดังนี้<textarea name="ชื่อTextArea"cols="จํานวนตัวอักษรในแต่ละแถว”rows="จํานวนแถว"> ...ค่าเริ่มต้นของแท็กมีหรือไม่มีก็ได้...</textarea> 10.2.4 การสร้างช่องรับข้อมูลชนิด Check Box Check Box เป็นการรับข้อมูลจากการคลิกเลือกข้อมูลที่กําหนดมาให้โดยสามารถเลือกได้มากกว่าหนึ่งหัวข้อ เช่นการเลือกโปรแกรมที่นักเรียนต้องการเรียน อาหารที่ชอบวิชาที่ชอบเรียนมาก ที่สุด เป็นต้นรูปแบบคําสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Check Box มีดังนี้

<input type="checkbox nameของcheckbox" value- ท่าเริ่มต้นของcheckbox > 10.2.5 การสร้างงบ มูRadio Sutton การสร้างช่องรับข้อมูลชนิด Radio Button เป็นการรับข้อมูลจาก ข้อกําหนดมาให้โดยสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Radio Button สามารถเลือกได้เพียงหัวข้อเดียวเท่านั้น เช่น เพศ ช่วงอายุวุฒิการศึกษาสูงสุด เงินเดือน อาชีพ เป็นต้นรูปแบบมีดังนี้<input type="radio" name="ชื่อของ Radio" value="ค่าของFadio"> 10.2.6 การสร้างช่องรับข้อมูลชนิด Selection Box การสร้าง Selection Box หรือ Drop Down List หรือ List Box คือการรับข้อมูลจาก รายการ ข้อมูลที่มีให้เลือกโดยสามารถเลือกได้เพียงแค่หนึ่งรายการ ใช้กรณีที่มีรายการให้เลือกมาก ๆ เช่น ประเทศ หรือจังหวัดที่เป็นภูมิลําเนาเพื่อประหยัดเนื้อที่ในการแสดงข้อมูลและสามารถกําหนด จํานวนบรรทัด ในการ แสดง Selection Box ได้รูปแบบคําสั่ง HTML ในการสร้างช่องรับข้อมูล ประเภท Selection Box <select name="SelectionBox size="จํานวนรายการ > <option value="ค่าของรายการที่1 รายการที่1 </ option> … </ select> 10.2.7 การสร้างปุ่ม (Button) การสร้างปุ่มหรือ Button ในฟอร์มสามารถสร้างได้ทั้งปุ่มส่งข้อมูลหรือสั่งให้ทํางานที่เรียกว่า Submit และปุ่มยกเลิกการทํางานหรือ Reset Submit คําสั่งนี้จะทําหน้าที่ส่งข้อมูลในแบบฟอร์มไป ยังเซอร์ฟเวอร์เพื่อทําการประมวลผล การแสดงในค่านี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกําหนดค่าที่จะ แสดงบนปุ่น value Reset คําสั่งนี้จะทําหน้าที่ในการยกเลิกข้อมูลต่าง ๆ ที่ท่าการป้อนลงในแบบฟอร์ม เป็นค่าสั่ง ที่ใช้ใน การลบข้อมูลในแบบฟอร์มทั้งหมด เพื่อทําการป้อนข้อมูลลงในแบบฟอร์มใหม่การแสดงผลในคําสั่งนี้จะ แสดงผลเป็นลักษณะปุ่ม โดยมีการกําหนดค่าที่จะแสดงบน value

< form> <input type="button" name="ชื่อbutton" value="ค่าขอ้มูล"> </ form> สรุปสาระสําคัญ แบบฟอร์มเป็นรูปแบบการรับข้อมูลบนหน้าเว็บเอง เพื่อใช้ค้นหาข้อมูลจากอินเทอร์เน็ต แสดงความ คิดเห็น การกรอกข้อมูลในการสมัคร การซื้อสินค้า Online การตอบหรือตั้งกระทู้ตลอดจนการกรอก แบบสอบถามต่าง ๆ 1. การสร้างแบบฟอร์มด้วยภาษา HTML จะเริ่มต้นด้วยแท็ก <form> และจะปิดท้ายด้วยแท็ก </form> ซึ่งมีรูปแบบของฟอร์ม ดังนี้<form name="ชื่อของform" method="post/get" action="URL > ....ส่วนประกอบของฟอร์ม...</form> หรือ <form>..ส่วนประกอบของฟอร์ม.... </ form> 2. การเพิ่มส่วนกับข้อมูล ส่วนรับข้อมูลในแบบฟอร์ม เป็นส่วนที่จะนําข้อมูลต่าง ๆ ส่งไปประมวลผลยัง Server ประกอบด้วย อุปกรณ์ต่าง ๆ ที่จะต้องเขียนอยู่ภายในแท็ก <formn>...</form> (1) การสร้างช่องรับข้อมูลชนิด Text Box ช่องรับข้อมูลชนิด Text Box เป็นช่องกรอกข้อมูลแบบบรรทัดเดียวซึ่งมีรูปแบบดังนี้<input type="text" name="ชื่อของช่องรับข้อความ" value="ค่าเริ่มต้น size= ความกว้างของช่องรับข้อความ” maxlength="จํานวนตัวอักษรสูงสุดที่ป้อนได้ (2) การสร้างช่องรับข้อมูลชนิด Password ช่องรับข้อมูลชนิด Faswordเป็นกรอบสําหรับกรอกข้อมูลลงไปแบบข้อความหนึ่งบรรทัด เหมือน•กับ ร่องรับข้อมูลชนิด Text Box โดยเมื่อข้อมูลเข้าไปในร่องแล้ว เราจะมองเห็นเป็นเครื่องหมาย จะไม่สามารถ มองเห็นข้อมูลจริง ๆ ที่เราคีย์เข้าไปได้มีรูปแบบดังนี้

<input type="password" name="ชื่อของ password" value="ค่าเริ่มต้น" size="ขนาดPassword" maxlength="จํานวนสูงสุด" (3) การสร้างของข้อมูลชนิด Text Areas เป็นการรับข้อมูลชนิด Text Area เป็นการรับข้อมูลทีมีความยาวมาก ๆ ส่วนใหญ่จะใช้กับข้อมูลที่เป็นการแสดงความคิดเห็น มีรูปแบบดังนี้<textarea name="ชื่อ TextArea" clos="จํานวนตัวอักษรในแต่ละแถว" rows="จํานวนแถว"> …ค่าเริ่มต้นของแท้มีหรือไม่มี... </textarea> (4) การสร้างช่องรับข้อมูลชนิด Check Box Check Box เป็นการรับข้อมูลจากการให้คลิกเลือกข้อมูลที่กําหนดมาให้ โดยสามารถเลือกได้มากกว่าหนึ่งหัวข้อ check box จะนิยมนํามาใช้กับการรับข้อมูลชนิดที่สามารถเลือกได้หลายข้อ มีรูปแบบดังนี้<input type="checkbox" name="ชื่อของ checkbox" value="ค่าเริ่มต้นของcheckbox > (5) การสร้างช่องรับข้อมูลชนิด Radio Button การสร้างช่องรับข้อมูลชนิด Radio Button รับข้อมูลจากหัวข้อที่กําหนดมาให้โดย สามารถเลือกได้ข้อเดยีว เท่านั้น (6) การสร้างช่องรับข้อมูลชนิด Selection Box การสร้าง Selection Box หรือ Drop Down List หรือList Box คือการรับข้อมูลจาก List รายการที่มีให้ เลือกโดยสามารถเลือกได้เพียงแค่หนึ่งรายการ จะใช้กรณีที่มีรายการให้เลือกมาก ๆ เพื่อประหยัด เนื้อที่ในการ แสดง (7) การสร้างปุ่ม (Button) การสร้างหรือ Button ในฟอร์มสามารถสร้างได้ทั้งส่งข้อมูลหรือสั่งให้ทํางานที่เรียกว่า Submit และ ปุ่มยกเลิกการทํางานหรือ Besit การแสดงผลในคําสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดย การ กําหนดค่าที่จะ แสดงบนมที่value 3. การจัดกลุ่มรายการ <optgroup> เป็นการกําหนดกลุ่มของตัวเลือก (Options) ที่เกี่ยวข้องในรายการ โดยใช้แท็กคําสั่ง optgroup จัด กลุ่มให้กับตัวเลือกแบบรายการเลื่อนลง 4.การจัดแบ่งแบบฟอร์ม <fieldset> การจัดกลุ่มฟิลด์ป้อนข้อมูลในฟอร์มที่มีความสัมพันธ์กัน จะทําให้ฟอร์มมีความเป็นระเบียบสวยงาม และ ผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้น

< form> < fieldset> <legend>ชื่อกลุ่มขอ้มูล</legend> ส่วนประกอบของฟอร์ม </ fieldset> < fieldset> <legend>ชื่อกลุ่มขอ้มูล</legend> ส่วนประกอบของฟอร์ม </ fieldset> </ form>

แบบทดสอบหลังเรียนหน่วยที่10 การสร้างแบบฟอร์ม คําชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1.ซึ่งได้รูปแบบคําสั่งการสร้างฟอร์มในภาษา HTML ที่ถูกต้อง ก. <form name = ชื่อฟอร์ม" method="post/get" action="URL"> ข. com method="post/get" action="URL"> ค.Com>ส่วนประกอบของฟอร์ม</form> ง.<form ส่วนประกอบของฟอร์ม</form> 2.ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Text Box ก.<input type="submit"> ข.<input type="text"> ค. <input type="password'> ง.<input type="button"> 3. ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Password ก.<input type="radio"> ข. <input type="submit"> ค.<input type="checkbox"> ง.<input type="password"> 4. ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Text Area ก.<input type="checkbox"> ข. <input type="textarea"> ค. <input type="text"> ง.<textarea>...</textarea> 5. ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Check Box ก. <input type="password"> ข. <input type="text"> ค. <input type="radio"> ง. <input type="checkbox">

ง. X. <textarea>......</textarea> 6. ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Radio Button ก. <input type="radio"> ข. <input type="checkbox"> ค. <input type-"button"> ง. <input type="text"> 7. ข้อใดเป็นคําสั่งที่ใช้สร้างช่องรับข้อมูลชนิด Selection Box ก. <option><select>รายการ</option> ข. <option><select>รายการ</select></option> ค. <select><option>รายการ</select> ง. <select><option>รายการ</option></select 8. ข้อใดเป็นคําสั่งที่ใช้สร้างปุ่มยกเลิก ที่ถูกต้องที่สุด ก. <input type="button"> ข. <input type="password"ค. <input type="submit"> ง. <input type="reset"> 9. คําสั่งในข้อใดที่ใช้ในการจัดกลุ่มรายการ n. <legend ข. <option> ค. <optgroup> ง<fieldset> 10. คําสั่งในข้อใดที่ใช้ในการจัดแบ่งแบบฟอร์ม ก. <fieldset> ข. <optgroup> ค. <legend> ง. <form>

หน่วยที่11 การใช้โปรแกรมกราฟิกเสริม ในการออกแบบสร้างเว ็ บไซต์11.1 ส่วนประกอบของโปรแกรม Adobe Photoshop โปรแกรม Adobe Photoshop เป็นโปรแกรมประยุกต์ที่มีความสามารถด้านการตกแต่งภาพกราฟิก ซึ่งประกอบด้วยพื้นที่ทํางาน เครื่องมืออํานวยความสะดวกต่อการตกแต่งภาพที่ครบครัน โดยจัดแบ่ง ส่วนประกอบต่าง ๆ ของโปรแกรมดังนี้11.1.1 Menu bar Menu bar หรือเมนูของโปรแกรม เป็นชุดคาสั่งสําหรับจัดการกับไฟล์เช่น สร้างงานใหม่เปิดงาน ปิดงาน หรือบันทึกไฟล์งาน ไปจนถึงคําสั่งในการตกแต่งภาพ ซึ่งจะมีส่วนประกอบของเมนูดังนี้ 1. File คําสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่เปิด ปิด บันทึกไฟล์นําเข้าไฟล์ส่งออกไทล์และอื่น ๆ ที่เกี่ยวกับไฟล์2. Edit คําสั่งที่ใช้สําหรับแก้ไขภาพ ปรับแต่ง ตัดต่อ รวมถึงการปรับตั้งค่า (Preferences) 3. Image คําสั่งที่ใช้ปรับแต่งภาพ เช่น สีแสง ขนาดของภาพ ขนาดของเอกสาร ไหมดสีของ ภาพ หมุนภาพ และอื่น ๆ 4. Layer คําสั่งที่ใช้จัดการกับเลเยอร์เช่น การสร้าง คัดลอก ลบ และการรวมเลยอ 5. Type คําสั่งที่ใช้จัดการกับข้อความ เช่น รูปแบบตัวอักษร จัดย่อหน้า 6. Select คําสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ เพื่อนําไปใช้งานร่วมกับคําสั่งอื่นใน Toolbox 7. Filter คําสั่งเกี่ยวกับฟิลเตอร์เพื่อตกแต่งรูปภาพและวัตถุอัตโนมัติ8. 30 คําสั่งที่ใช้ในการสร้างภาพให้เป็นสามมิติ

9. View คําสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่าง ๆ เช่น การขยายและย่อภาพ การแสดงไม้บรรทัด 10. Window คํา จัดการหน้าต่าง กําหนดการแสดงหรือซ่อนหน้าต่างงานและ Panel ต่าง ๆ 11. Help วิธีการใช้งานและคําแนะน้าเกี่ยวกับโปรแกรม 11.1.2 Options Bar Options Bar หรือแถบตัวเลือก เป็นส่วนที่ใช้ในการปรับแต่งค่าการทํางานของเครื่องมือต่าง ๆ ซึ่งตัวเลือกการ กําหนดค่าจะเปลี่ยนไปตามเครื่องมือที่ใช้งานอยู่เช่น เมื่อเลือกเครื่องมือ Brush Tool ออปชั่นบาร์จะปรากฏอ อปชั่นที่ใช้ในการกําาหนดขนาดของหัวฟูกัน ลักษณะหัวแปรง โหมดในการระบาย ความโปร่งใสของสีและ อัตราการไหลของสีเป็นต้น 11.1.3 Toolbox Toolbox หรือกล่องเครื่องมือ ที่ประกอบด้วยเครื่องมือที่จําเป็นต่อการใช้งาน มีการจัดกลุ่ม เครื่องมือไว้ด้วยกัน ซึ่งจะปรากฏรูปสามเหลี่ยมอยู่ที่มุมขวาล่างบนรูปเครื่องมือเพื่อบอกให้รู้ว่าในเครื่องมือนั้น มีเครื่องมือ อื่นซ่อนอยู่ ประกอบไปด้วยเครื่องมือย่อยดังต่อไปนี้

Tool box หรือกล่องเครื่องมือจะประกอบไปด้วยเครื่องมือที่ใช้ในการวาด ตกแต่ง และแก้ไข ภาพ เครื่องมือ เหล่านี้มีจํานวนมาก มีคุณสมบัติดังนี้Move เครื่องมือที่ใช้สําหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพในเลเยอร์หรือย้าย เส้นไกด์

11.1.4 Working Area Working Area เป็นพื้นที่ทํางาน สําหรับแสดงงานที่กําลังทําอยู่เริ่มต้นจะเป็นพื้นที่ว่างเมื่อ สร้างงานใหม่หรือ เปิดงานขึ้นมาแก้ไขซึ่งสามารถเปิดขึ้นมาพร้อมกันได้หลายหน้าต่างและจะเป็นพื้นที่สําหรับ ตกแต่งภาพ และ สามารถย้ายตําแหน่งหน้าต่างงานไปมาหรือย่อขยายภาพให้ใหญ่ขึ้นภายในพื้นที่ทํางานได้11.1.5 Panel Panel เป็นกลุ่มของหน้าต่างที่ช่วยควบคุมรายละเอียดในขั้นตอนการทํางานร่วมกับคําสั่งในเมนูและเครื่องมือ บน Toolbox ซึ่งปกติหน้าต่าง Panel จะปรากฏด้านขวาของจอ เช่น Character, History หรือ Layers การ ควบคุมหน้าต่าง Panel สามารถทําได้ด้วยการคลิกคําสั่ง Window ที่Menu bar แล้วเลือก Panel ที่ต้องการ ซึ่งสามารถรวมกลุ่มหน้าต่าง Panel ได้ด้วยการคลิกที่แท็บของหัวข้อ แล้วลากไปวางไว้ใน กลุ่มที่มีอยู่ก่อนแล้ว ส่วนการปิด Panel ให้คลิกที่แท็บของหัวข้อแล้วลาก Panel นั้นออกมา แล้วคลิกที่กากบาทที่อยู่มุมบนขวา ลูกศรคู่สีเทาบนแถบสีดําบนสุดของ Panel มีไว้เพื่อย่อหน้าต่าง Panel เพื่อเพิ่มพื้นที่ในการทํางาน การทํางานในโปรแกรม เราสามารถควบคุมและจัดการกับเลเยอร์ได้หลากหลายดังนี้11.2.1 การสร้างเลเยอร์ใหม่การสร้างเลเยอร์ขึ้นมาใหม่เราสามารถสร้างเพิ่มขึ้นมาได้ตามต้องการ เพื่อที่จะทําการตกแต่ง เพิ่มเติมรูปภาพ โดยที่ไม่ให้ปะปนกับเลเยอร์ของเดิม ด้วยการคลิกเมนูLayer/New/Layer... หรือคลิกไอคอน Create a new Layer ซึ่งอยู่ด้านล่างของ Layer Panel จะปรากฏเลเยอร์ใหม่ขึ้นมา

11.2.2 การตั้งชื่อเลเยอร์ปกติการเลเยอร์ขึ้นมาใหม่ด้วยคําสั่ง Layer/New/Layer จะปรากฏหน้าต่าง New ขึ้นมาให้กําาหนดชื่อ สีและโหมดของเลเยอร์ในกรณีที่คําสั่ง Create a new Layer จะปรากฏเลเยอร์พร้อมชื่อเลเยอร์อัตโนมัติซึ่งสามารถ แก้ไขเปลี่ยนชื่อ เลเยอร์นี้ได้ด้วยการดับเบิ้ลคลิกที่ชื่อบนเลเยอร์นั้น และพิมพ์ชื่อเสร็จแล้วกด Enter 11.2.3 แสดงหรือซ่อนเลเยอร์การแสดงหรือซ่อนเลเยอร์สามารถคลิกที่รูปดวงตา แต่ละครั้ง จะเป็นการเปิดเพื่อแสดงหรือปิดเพื่อซ่อนเลเยอร์Na Layer 2 None Mode: Namal Layer Cancel Color: New Leyer Use Previbus Layer to Create Coping Mask Indicates layer visibility 11.2.3 แสดงหรือซ่อนเลเยอร์การแสดงหรือซ่อนเลเยอร์สามารถคลิกที่รูปดวงตา แต่ละครั้ง จะเป็นการเปิดเพื่อแสดงหรือปิดเพื่อซ่อนเลเยอร์ Indicates layer visibility 1.2.4 คัดลอกและท่า เลเยอร์การคัดลอกและทําเลเยอร์(Copy and Duplicate Layer) แบ่งเป็นการคัดลอกเนอร์จาก ชิ้นงานหนึ่งไปยังอีก ชิ้นงานหนึ่ง ทําได้โดยคลิกเลเยอร์ที่ต้องการทําการคัดลอก ใช้โปรแกรมเมนูEdit/Kopy หรือกดปุ่ม Ctrl+C แล้วคลิก แท็บของชิ้นงานที่เราต้องการจะให้เลเยอร์นั้นมาวางไว้แล้วคลิก Edity/Patte หรือ กดปุ่ม Ctrl V และการทําซ้ํา เลเยอร์ด้วยการคลิกเลเยอร์ที่ต้องการ คลิกขวาแล้วเลือกคําสั่ง Duplicate Loyer จะได้หน้าต่างตามภาพด้านล่าง ใส่ชื่อชิ้นงานที่เราต้องการนําเลเยอร์นี้ไปไว้ในช่อง Destination) การคัดลอกเลเยอร์ในชิ้นงานเดียวกัน ทําได้โดยการคลิกที่เลเยอร์ ใช้โปรแกรมเมนูLayer เลือก Duplicate Layer... จะมีหน้าต่างเหมือนภาพที่ด้านบน เช่นกัน แต่ช่อง Destination ไม่ต้องกําหนดชื่อชิ้นงาน อื่น หรือ

คลิกที่เลเยอร์แล้วคลิกเมนูLayer/New/Layer via Copy หรือ Ctrl+) หรือใช้วิธีการคลิกที่เลเยอร์นั้น และ กดคีย์Alt พร้อมกับลากเลเยอร์ไปยังตําแหน่งใน Panel ที่ต้องการวาง 11.2.5 ย้ายตําแหน่งเลเยอร์การย้ายตําแหน่งเลเยอร์(Move Layer) ด้วยการใช้คําสั่ง Edit/Cut หรือ Ctrl+X แล้วใช้คําสั่ง Eokty/Paste หรือกดปุ่ม Ctrl+V ในกรณีที่ย้ายไปคนละชิ้นงาน ในการณีที่มีการย้ายเลเยอร์ในชิ้นงานเดียวกัน สามารถคลิก ที่เลสเตอร์แล้วการเพื่อเตือนไปยังตําแหน่งบนหรือล่างเลอื่น ๆ ที่ต้องการ 11.2.6 ลบเลเยอร์การลบเลเยอร์ Dlete Layer) ทําโดยคลิกที่เลเยอร์ที่ต้องการลบ แล้วกดปุ่ม Backspace หรือใช้เมนูLayer/Tonlete-Layer หรือการคลิกที่เลเยอร์แล้วลากมาที่รูปถังขยะด้านล่าง หรือคลิกขวาที่เลเยอร์แล้วคลิก คําสั่ง Delete Layer 11.2.7 การล็อคและปลดล็อคเลเยอร์การล็อคและปลดล็อคเลเยอร์ (Lock and Unlock Layer) เพื่อป้องกันการแก้ไขโดยไม่ตั้งใจ ทําได้โดยคลิกที่เลเยอร์ที่ต้องการแล้วคลิกที่รูปกุญแจ ซึ่งจะปรากฏรูปแม่กุญแจขึ้นหลังชื่อของเลเยอร์และในขั้นตอนที่ซ้ํากัน เพื่อการปลดล็อค 11.3 การใช้งานโปรแกรม Photoshop โปรแกรม Adobe Photoshop เป็นโปรแกรมสําหรับตกแต่งภาพกราฟิกที่มีคําสั่งที่ใช้จัดการและ ตกแต่งภาพ มากมายซึ่งมีวิธีการใช้งานต่าง ๆ 11.3.1 การสร้างงานใหม่การเริ่มต้นสร้างงานในโปรแกรม Photoshop นั้น จะต้องสร้างไฟล์งานใหม่ขึ้นมาก่อน ซึ่งเหมือนกับการ สร้างแผ่นกระดาษว่างๆ ขึ้นมาใช้วาดรูป หรือใส่รูปภาพตามต้องการ ทําได้โดยคลิกที่เมนูFile/New จะปรากฏหน้าต่าง New ขึ้นมาจากนั้นให้กําหนดค่าต่างๆ เพื่อการเริ่มใช้งานดังนี้1. Name การกําหนดชื่อของชิ้นงาน 2. Preset ชนิดของงานที่กําหนดไว้ให้เลือก 3. Size ขนาดของงานที่จะสัมพันธ์กับช่อง Preset เช่นค่า Preset เป็น International paper ช่อง Size จะมีตัวเลือกเป็น A4, A3, A2, A1 และอื่น ๆ 4.Width ขนาดความกว้างของชิ้นงาน

5. Hilight ขนาดความสูงของชิ้นงาน 6. Resolution ความละเอียดของงาน 7. Colorimode ชนิดของพื้นที่ในการทํางาน เช่น RGB, CMYK และค่าความละเอียด 8. Background Contents ชนิดของพื้นหลังงาน เช่น แบบขาว แบบสีและแบบโปร่งใส เมื่อทําการกําหนดขนาดของงานเสร็จเรียบร้อยแล้ว ให้คลิกปุ่ม OK เพื่อทําการเปิดพื้นที่การทํา งานตามขนาดที่กําหนดที่มีพื้นหลังสีขาว 11.3.2 การบ้าภาพเข้าใช้งาน การนํารูปภาพเข้ามาใช้งานในโปรแกรม Photoshop สามารถทําได้หลายวิธีและการลากและ วาง (Drag and Drop) เป็นวิธีการที่ง่ายและรวดเร็ว ด้วยการเลือกไฟล์รูปภาพที่ต้องการจาก หน้าต่าง Window Explorer จากนั้นใช้เม้าส์คลิกค้างไว้ที่ไฟล์รูปภาพ แล้วลากมาวางลงในส่วน ของหน้ากระดาษ

จากนั้นจะปรากฏรูปภาพขึ้นบนพื้นที่ไฟล์งาน พร้อมกับสร้างเลเยอร์ให้โดยอัตโนมัติกรณีที่ต้องการใช้บางส่วน ของรูปภาพหรือต้องการจัดการบางอย่างกับรูปภาพก่อนนํามาใช้งาน สามารถเปิดไฟล์รูปภาพนั้นขึ้นมาก่อน ด้วยคําสั่ง File/open คลิกเลือกไฟล์รูปภาพที่ต้องการ แล้วคลิก Open จะปรากฏ หน้าต่างงานเพิ่มขึ้นมา ซึ่ง เราสามารถคลิกลากรูปภาพนั้นมาวางในพื้นที่ทํางานของเราได้ทันทีหรือในกรณีที่ต้องการใช้บางส่วนของ ภาพ เราสามารถเลือกส่วนที่ต้องการแล้วคลิกลากมาวางในพื้นที่งานหรือใช้คําสั่ง EditCopy และ Edit/Paste มาวางก็ได้เช่นกัน 11.3.3 การเลือกพื้นที่การเลือกพื้นที่เพื่อใช้ร่วมกับเครื่องมืออื่น ๆ เช่น การตัดบางส่วนของภาพเพื่อนําไปต่อกับภาพ อื่นหรือส่วนอื่น ๆ ของภาพ มีความสําคัญในการทํางานบนโปรแกรม Adobe Photoshop ที่สามารถทําได้หลายวิธีขึ้นอยู่กับ ความถนัดของแต่ละบุคคลด้วยการใช้Marquee ที่เป็นกลุ่มเครื่องมือที่ใช้เลือกพื้นที่บนภาพดังนี

ตามแนว หรืออิสระที่ต้องการ หรือใช้เครื่องมือ Magic Wan คลิกเลือกพื้นที่ที่มีโทนสีเดียวกันหรือเลือก จากสีที่ใกล้เคียงกัน ซึ่งพื้นที่ที่สร้างขึ้นมานั้นจะมีรอยเส้นประขึ้นมา จากนั้นให้ใช้เครื่องมืออื่น ๆ เพื่อจัดการกับ พื้นที่ที่เลือกไว้เช่นใช้เครื่องมือ Move Tool ลากภาพส่วนที่อยู่ในพื้นที่เส้นประออกมาใช้งาน หรือใช้คําสั่ง Edit/copy หรือ Edit/Cut แล้วนําไปวางในพื้นที่ที่ต้องการด้วย Edit/Paste เลื่อนแถบ Size เพื่อปรับขนาดตามที่ต้องการ หรือเลือกรูปแบบของยางลบ แล้วนําเคอร์เซอร์ไปคลิกเลือกพื้นที่ที่ต้องการลบ 11.3.5 การบันทึกงาน การบันทึกไฟล์งาน เป็นขั้นตอนสําคัญที่สามารถกําหนดรูปแบบของไฟล์รูปภาพได้หลากหลาย โดยคลิกที่เมนูFile Save As...จากนั้นจะปรากฏหน้าต่าง Save as... ขึ้นมา ให้กําหนดค่าต่าง ๆ ก่อนการ บันทึกไฟล์งาน Save in: กําหนดพื้นที่สําหรับการบันทึกไฟล์File name: กําหนดชื่อไฟล์

Fermat กําหนดรูปแบบหรือนามสกุลไฟล์ที่ต้องการ ดังนี้Photoshop (*,PSD, *.POD) เป็นไฟล์ของโปรแกรม photoshop ที่จะบันทึกแบบแยกเลเยอร์และประวัติการทํางาน แต่มีข้อจํากัดคือไฟล์มีขนาดใหญ่BMP เป็นไฟล์มาตรฐานที่ใช้ในระบบปฏิบัติการ Windows และ Dos สามารถที่จะจัดเรียง ดําไปหาสีขาว (1 ไบต์ต่อ 1 pixel) และจะสามารถเลือกระดับสีสูงถึง 24 บิต หรือ 16.7 ล้านสีGIF เป็นไฟล์ที่ใช้ในการสร้าง เว็บไซต์มีขนาดเล็กง่ายต่อการบีบอัดข้อมูลทั้งไฟล์PES เป็นไฟล์กราฟิก นิยมใช้งานกันอย่างแพร่หลาย เพราะ ขนาดเล็กง่ายต่อการบีบอัด PNG เป็นไฟล์ที่พัฒนาต่อจาก Gif ซึ่งมีความสูญเสียจากการบีบอัดข้อมูลน้อย ทําให้มีความ เหมาะสมในการ โอนถ่ายข้อมูลบนระบบเครือข่าย Internet 11.4 การแต่งภาพ การแต่งภาพในส่วนของการปรับแต่งสีและแสงให้กับภาพเพื่อขจัดข้อบกพร่องของภาพ เช่น ภาพมีสีผิดเพี้ยน ภาพมืดหรือสว่างเกินไป หรือการเปลี่ยนสีภาพ ซึ่งหลังจากการปรับแต่งภาพแล้ว จะทําให้ภาพ มีความคมชัด มีดใด ทําให้ภาพดูโดดเด่น ท่านลม กันการนําาไปใช้ใน น ไป 11.4.1 การปรับความสว่างสีและค่าความต่างสี(Brightness/Contrast) การปรับความสว่างสีและค่าความต่างสีทําได้โดยคลิกเมนูImage/Adjustments/Brightness/ Contrast จากนั้นจะปรากฎหน้าต่าง Brightness Contrast ขึ้นมาให้ปรับเลื่อนค่าต่าง ๆ 11.4.2 การปรับค่าความสมดุลของ Color Balance) การปรับความสมดุลของสีด้วยการคลิกเมนูคําสั่ง mage adj.stmenty/Color Balanceซึ่งจะปรากฏหน้าต่าง Color Balance ขึ้นมา 11.4.3 การปรับความคมชัด (Sharpen) การปรับความคมชัดของภาพด้วย Unsharp Mask เมื่อ ต้องการให้ภาพมีความคมขึ้น โดยคลิก เมนูFilter/Sharpen/Unsharp Mask จะปรากฏหน้าต่าง Unsharp Mask ขึ้นมาให้ปรับค่าต่าง ๆ ซึ่งโปรแกรม จะแสดงตัวอย่างการปรับแต่งให้เห็นและสามารถย่อขยายเพิ่อดูราย ละเอียดา งภาพในขณะที่ปรับค่าได้11.4.5 การปรับขนาดภาพการปรับขนาดภาพให้เหมาะสมกับการใช้งานสามารถทําได้ตั้งเริ่ม สร้างใหม่ด้วยค่า P/ ..... หรือจะทําการแก้ไขปรับขนาดของภาพจากคําสั่ง image image size ซึ่งทั้งสองวิธีต้องเกี่ยวข้อง กับการกําหนดต่างต่าง ๆ

11.1.5การแทรกข้อความ การแทรกข้อความลงในภาพสามารถพิมพ์ข้อความลงไปและทําการปรับรูปแบบ ปรับตําแหน่งปรับ ขนาดของตัวษรที่เราใส่ไปในภาพได้โดยใช้เครื่องมือ Type Tool แล้วคลิกในตําแหน่งที่ต้องการจะพิมพ์ข้อความ โปรแกรมจะสร้างเลเยอร์สําหรับข้อความขึ้นมา ให้เราสามารถพิมพ์ข้อความได้ทันทีและในกรณีที่ต้องการเปลี่ยนรูปแบบ (Fonts) ปรับขนาด (Size) หรือเปลี่ยนสี(Color) ข้อความตัวอักษร สามารถใช้คําสั่ง จัดการตัวอักษรได้จาก Options Bar

สรุปสาระสําคัญ โปรแกรม Adobe Photoshop เป็นโปรแกรมประยุกต์ที่มีความสามารถด้านการตกแต่งภาพกราฟิก ซึ่งประกอบด้วยพื้นที่ทํางาน เครื่องมืออํานวยความสะดวกต่อการตกแต่งภาพที่ครบครัน เลเยอร์ (Layer) เป็น ชั้นของชิ้นงาน ซึ่งการทํางานของโปรแกรม Adobe Photoshop เป็นการนําขั้นของชิ้นงานต่าง ๆ มาวางซ้อน กันเพื่อให้เกิดภาพที่สมบูรณ์การเริ่มต้นสร้างงานในโปรแกรม Photoshop นั้น จะต้องสร้างไฟล์งานใหม่ขึ้นมาก่อน ซึ่งเหมือนกับ การ สร้างแผ่นกระดาษว่างๆ ขึ้นมาใช้วาดรูป หรือใส่รูปภาพตามต้องการ ทําได้โดยคลิกที่Fittiew การนํา รูปภาพเข้ามาใช้งานในโปรแกรม Photoshop กาถาด้วยการเลือกไฟล์รูปภาพที่ต้องการจากหน้าต่าง Window Explorer จากนั้นใช้เม้าส์คลิกค้างไว้ที่ไฟล์รูปภาพ การเลือกพื้นที่เพื่อใช้ร่วมกับเครื่องมืออื่นๆ ที่สามารถทําได้หลายวิธีขึ้นอยู่กับความถนัดของแต่ละ บุคคลด้วย การใช้Marquee การลบภาพด้วยการใช้เครื่องมือยางลบ เพื่อลบส่วนบางส่วนของรูปภาพ โดยการ คลิกที่เครื่องมือ EraserTool แล้วก็น่าเคอร์เซอร์ไปใช้ลบส่วนต่าง ๆ ตามต้องการ การบันทีกไฟล์งานเป็นขั้นตอนสําคัญที่สามารถกําหนดรูปแบบของไฟล์รูปภาพให้หลากหลายโดยคลิก ทีเมนูFile/Save As... จากนั้นจะปรากฏหน้าต่าง Save as ขึ้นมา การปรับความสว่างสีและค่าความต่างสีทํา ได้โดยคลิกเมนูimage/Adjustments/trightness/ Contrast การปรับความสมดุลของสีด้วยการคลิกเมนูคําสั่ง Image/Adjustnents/Color Balance การปรับ ความคมชัดของภาพด้วย Unsharp Mask เมื่อต้องการให้ภาพมีความคมขึ้น โดยคลิกเมนูFilter/Sharpen/Unsharp Mask... การปรับภาพด้วย Curves เป็นวิธีการสําหรับการเปลี่ยนโทนสีของภาพใน โปรแกรม Adobe Photoshopเพื่อปรับแต่งภาพให้เหมาะสมกับการใช้งาน ด้วยการคลิกคําสั่งเมนู Image/Adjustments/ Curves... การปรับขนาดภาพให้เหมาะสมกับการใช้งานสามารถทําได้ตั้งเริ่มสร้างงาน ใหม่ด้วยคําสั่ง File/New...หรือจะทําการแก้ไขปรับขนาดของภาพจากคําสั่ง imnate/msite size: การแทรก ข้อความลงในภาพสามารถพิมพ์ข้อความลงไปและทําการปรับรูปแบบ ปรับตําแหน่ง ปรับขนาดของตัวษรที่เรา ใส่ไปในภาพได้โดยใช้เครื่องมือ Type Tool การสร้างภาพเพื่อนําไปใช้บนหน้าเว็บนั้นสามารถดึงดูดความสนใจในการใช้งานและทําในงานนําเสนอ บนหน้าเว็บมีความสวยงามเป็นเอกลักษณ์เฉพาะตัว Tel (Logo) เป็นเครื่องหมายหรือสัญลักษณ์ที่เกิดจากการ ออกแบบกราฟิกที่ช่วยสร้างเอกลักษณ์แก่สินค้าหรือหน่วยงาน ที่จะต้องออกแบบให้มีเอกลักษณ์เฉพาะของ ตนเอง

แบบทดสอบหลังเรียนหน่วยที่11 การใช้โปรแกรมกราฟิกเสริมในการออกแบบสร้างเว ็ บไซต์ชี้แจง ให้นักเรียนเลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. Option bar คืออะไร ก. เมนูของโปรแกรม ข. กล่องเครื่องมือ ค. แถบตัวเลือกของคําสั่งเครื่องมือ ง. พื้นที่ทํางาน 2. Toolbox คืออะไร ก. หน้าต่างควบคุมรายละเอียดคําสั่ง ข. กล่องเครื่องมือ ค. เมนูของโปรแกรม ง. แถบตัวเลือกของคําสั่งเครื่องมือ 3. การสร้างเลเยอร์ใหม่ข้อใดถูกต้องที่สุด ก.Create/New/Layer...ข. New/Layer...ค.Layer/New/Create a new Layer ง. คลิกไอคอน Create a new Layer 4. การคัดลอกเลเยอร์ข้อใดถูกต้องที่สุด ก. คลิกไอคอน Create a new Layer ข. คลิกที่เลเยอร์ที่ต้องการ แล้วคลิกที่รูปกุญแจ ค.ลากเลเยอร์เพื่อเลื่อนไปยังตําแหน่งบนหรือล่าง ง.คลิกขวาแล้วเลือกคําสั่ง Duplicate Layer 5. การย้ายตําแหน่งเลเยอร์ข้อใดถูกต้องที่สุด ก. คลิกที่เลเยอร์ที่ต้องการ แล้วคลิกที่รูปกุญแจ ข. คลิกขวาแล้วเลือกคําสั่ง Duplicate Layer ค. ลากเลเยอร์เพื่อเลื่อนไปยังตําแหน่งบนหรือล่าง ง. คลิกไอคอน Create a new Layer