ใบเนื้อหา 8

วชิ า การสรา้ งเว็บไซต์ รหสั วิชา 2204-2009 หนว่ ยท่ี 8 การสร้างเลเยอร์ ครูผูส้ อน ศิรนิ ภา บตุ ะเขียว แผนกวชิ าคอมพิวเตอรธ์ รุ กิจวทิ ยาลัยเทคนคิ กาญจนาภเิ ษก สมทุ รปราการ

ใบเนอ้ื หา หนว่ ยที่ 8 การสร้างเลเยอร์เน้ือหาสาระการสอน/การเรียนรู้• ดา้ นความรู้(ทฤษฎี) Layer เป็นเคร่ืองมือหนงึ่ ใน Dreamweaver ท่เี หมาะในการใชจ้ ัดหน้าเว็บเพจเนือ่ งจากมีความสะดวกในการเคลื่อนย้ายหรอื จัดหนา้ เวบ็ ได้ตามความต้องการ ทั้งนเ้ี พราะLayer เปรียบเสมือนแผ่นใสที่สามารถนาองคป์ ระกอบต่าง ๆ มาวางไว้ภายใน และซ้อนกันหลายชน้ั ได้ 1. การสร้างเลเยอร์ การสรา้ งเลเยอร์มีวธิ กี าร ดังนี้ 1. คลกิ แท็บ Insert เพอื่ สร้างเลเยอร์ คลกิ เลอื ก Layout Objects 2. คลกิ ปมุ่ AP Div 3. ลากพอยนเ์ ตอร์ให้เปน็ กรอบส่ีเหลีย่ มบนเว็บเพจ การพมิ พ์ข้อความในเลเยอร์ เม่อื สร้างเลเยอร์เสร็จแล้ว ตาแหนง่ เคอร์เซอรจ์ ะกะพรบิ อยู่ในเลเยอร์ สามารถพิมพ์ข้อความลงไปได้เหมอื นการพมิ พง์ านปกติ โดยขอ้ ความจะปรากฏอยู่ดา้ นบนของเลเยอร์

การใสร่ ูปภาพในเลเยอร์ - คลกิ ที่เลเยอร์ทต่ี ้องการจะแทรกรูปภาพ - คลิกทค่ี าสั่ง Insert >> Image หรือ เครื่องมือ Image บนกลุ่มเคร่ืองมือ Common - จะได้หน้าต่าง Select Image Source เลอื กรปู ภาพทีต่ ้องการแล้วคลกิ OK - ภาพท่เี ลือกจะแทรกอยูใ่ นเลเยอรท์ ันที หากภาพใหญ่เกนิ ไปเลเยอร์จะขยายใหเ้ ทา่ กบั ขนาดของภาพโดยอัตโนมัติ - คลิกท่ปี ุ่มแฮนเดิลเพื่อปรบั ขนาดภาพและเลเยอรต์ ามความเหมาะสม การใส่ตารางในเลเยอร์

ตารางทส่ี ร้างในเลเยอร์อาจจะเป็นตารางเปล่าที่สร้างขนึ้ มาใหม่ หรอื คดั ลอกตารางที่สรา้ งไว้แลว้ มาใสก่ ็ได้ ดังนี้ - คลกิ ที่เลเยอรท์ จ่ี ะแทรกตาราง - คลกิ ทีเ่ คร่ืองมือ Table จะได้หนา้ ตา่ ง Table ขึ้นมา - เลือกลกั ษณะตาราง เช่น 3 แถว 3 คอลัมน์ แล้วคลิกปุ่ม OK - ตารางจะแทรกในเลเยอร์ทนั ที ปรับขนาดตารางและตกแต่งตาราง (ตามทไ่ี ด้ศึกษามาในบทที่ 5) 2. การปรบั แตง่ รายละเอียดของเลเยอร์ การปรับแต่งเลเยอร์ โดยทว่ั ไปจะใช้ Properties Inspector ซ่ึงเมอ่ื คลกิ ทเ่ี ลเยอร์จะได้ Propertiesหน้าตาดังนี้ Layer ID หมายถึง หมายเลขอ้างองิ เม่ือเรียกใช้ Layer นั้น ๆ เชน่ Layer1, Layer2 ซึ่งจะเรียงลาดับเลเยอร์ ทสี่ ร้างก่อนเป็นหลกั L และ T หมายถงึ การกาหนดตาแหนง่ ของเลเยอร์ ซง่ึ ยอ่ มาจาก Left และ Top W และ H หมายถึง การกาหนดขนาดของเลเยอร์ ซ่งึ ย่อมาจาก Width และ Height มีหน่วยเปน็พกิ เซล (Pixel)

Z-Index ใชใ้ นการเปลีย่ นลาดับเลเยอร์ Bg image สาหรบั ปรบั แต่งสแี ละรูปภาพพ้ืนหลังเลเยอร์ Vis สาหรบั กาหนดว่าจะแสดงหรือซอ่ นเลเยอร์ Overflow หมายถึง การตง้ั ค่าเผ่อื องค์ประกอบท่มี ีขนาดใหญก่ วา่ เลเยอร์ ซง่ึ แบ่งออกเปน็ Visible ขยายเลเยอร์เพ่ือให้เห็นทง้ั หมด Hidden จากดั เลเยอร์เท่าเดิม Scroll ใหส้ รา้ งสกรอลบ์ าร์โดยอัตโนมัติ Auto ให้สรา้ งสกรอลบ์ าร์อตั โนมตั ิเมอื่ ขนาดองค์ประกอบใหญ่กวา่ เลเยอร์ Clip สาหรบั จากดั ส่วนในการแสดงผล โดยมีตาแหน่ง L (Left), R (Right), T (Top), B (Bottom) การเคล่อื นยา้ ยเลเยอร์ เมื่อสรา้ งเลเยอร์เสรจ็ แล้ว ตาแหน่งเคอรเ์ ซอรจ์ ะกะพริบอยู่ในเลเยอร์ สามารถพิมพข์ ้อความลงไปได้เหมอื นการพิมพง์ านปกติ โดยขอ้ ความจะปรากฏอยู่ด้านบนของเลเยอร์ - การยา้ ยเลเยอร์ด้วย Properties โดยกาหนดเปน็ ตัวเลขที่ L (Left) และ T (Top) - การใชเ้ มาส์ ใหเ้ ลอื่ นเมาสไ์ ปตรงเส้นขอบหรือปุม่ เมาสจ์ ะเปลย่ี นเปน็ คลิกเมาส์ค้างไวแ้ ล้วลากยา้ ยไปยังตาแหนง่ ทตี่ ้องการจึงให้ปล่อยเมาส์ การย่อ / ขยายเลเยอร์ - คลิกท่ีเลเยอร์ ใช้ Properties กาหนดทีช่ อ่ ง W เพื่อกาหนดความกว้าง และ H เพอื่ กาหนดความสูง โดยกาหนดเปน็ ตัวเลข Pixel - คลกิ ที่เลเยอร์ เลอื่ นเมาส์ไปท่ีปมุ่ แฮนเดลิ ด้านใดดา้ นหน่งึ เมาส์จะเปล่ยี นเป็นรูปลูกศร 2 ทศิคลิกค้างไวแ้ ล้วลากเมาสเ์ พื่อย่อหรอื ขยายเลเยอร์

การใส่สีและภาพพื้นหลงั เลเยอร์- การใสส่ พี น้ื หลังให้คลกิ ท่เี ลเยอร์ แลว้ คลิกเลอื ก Bg Color ที่ Properties Inspector

- การใส่ภาพพนื้ หลัง ให้คลกิ เลือกที่ Bg Image ท่ีช่อง Properties Inspector - เลือกภาพทีต่ ้องการจากหน้าต่าง Select Image Source 3. การใช้งานพาเนลเลเยอร์ พาเนลเลเยอร์ มีไว้สาหรับจัดการกับเลเยอร์ เชน่ จดั วางลาดบั เลเยอร์ เปลย่ี นชื่อเลเยอร์ ลบเลเยอร์เปน็ ตน้ การจัดลาดับเลเยอร์ ในกรณที ส่ี รา้ งเลเยอร์ไวห้ ลายอัน เลเยอรท์ ีส่ รา้ งก่อนจะวางอยลู่ ่างสุด เลเยอร์อ่นื ๆ จะถูกวางซ้อนๆ กนั ข้ึนมาด้านบนโดยลาดบั การจดั ลาดับหรือสลับเลเยอร์ใหเ้ ลือกเลเยอรท์ ต่ี ้องการที่พาเนล แล้วพมิ พต์ ัวเลขค่าทตี่ ้องการลงไป โดยค่าท่ีมีตัวเลขน้อยทีส่ ุดจะอยลู่ า่ งสุด

การซ่อน / แสดงเลเยอร์ ในขณะออกแบบเว็บเพจ ถ้ามีเลเยอร์อย่บู นเวบ็ เพจหลายอัน อาจไม่สะดวกในการทางาน ผูอ้ อกแบบเวบ็ เพจสามารถซ่อนเลเยอร์เอาไวช้ ่ัวคราวกอ่ นได้ เมื่อออกแบบเว็บเพจเสรจ็ แล้วจึงส่งั ให้แสดงเลเยอรท์ ัง้ หมดการซอ่ นเลเยอรท์ าได้ดงั น้ี - คลกิ ที่เลเยอร์ทีต่ ้องการจะซ่อนที่พาเนลเลเยอรจ์ ะมีไอคอนรปู ดวงตา ปรากฏขึน้ มาตรงหน้าเลเยอร์ชือ่ นนั้ คลกิ ตรงดวงตา ถ้าดวงตาปดิ หมายถงึ ซ่อนเลเยอร์ เลเยอร์ท่หี น้าเว็บเพจจะหายไป ถ้าดวงตาเปิด หมายถงึ แสดงเลเยอร์ จะเห็นเลเยอร์นน้ั ปรากฏขน้ึ มา การเปลี่ยนชือ่ เลเยอร์ - ดับเบลิ คลิกทช่ี อ่ื เลเยอรใ์ นพาเนลเลเยอร์ - พิมพช์ ่ือใหมล่ งไปแทนทคี่ าวา่ Layer หรอื คลิกที่เลเยอร์เว็บเพจแลว้ เปล่ียนช่ือที่ Layer ID ของProperties Inspector ก็ได้

การลบเลเยอร์ การลบเลเยอรท์ ่ีต้องการให้คลิกท่เี ลเยอรน์ น้ั ๆ แลว้ คลิกปมุ่ < Delete > ถ้าต้องการเรยี กเลเยอรท์ ่ีเพ่ิงลบไปกลบั คืนมา ให้คลกิ คาสง่ั Edit >> Undo >> Delete หรอื ใชแ้ ป้น < Ctrl > + < Z > 4. การสรา้ งเลเยอรซ์ ้อนกัน ในบางกรณีอาจจะต้องนาเลเยอรห์ ลายอันมาซ้อนทบั กนั อยใู่ นเลเยอร์แม่ (Parent Layer) อนั ใหญ่อันหนง่ึ เพื่อทจ่ี ะใส่ข้อความ ภาพประกอบ หรือตาราง การซอ้ นเลเยอร์ช่วยใหเ้ วบ็ เพจน่าสนใจมากขนึ้ ช่วยประหยัดเนื้อท่ี สะดวกเวลาเคลื่อนยา้ ย แก้ไข และปรับแตง่ เวบ็ เพจให้สวยงาม การซ้อนเลเยอร์มวี ธิ ที า ดังนี้ - วาดเลเยอร์ดว้ ยเคร่ืองมือ Draw Layer โดยวาดเลเยอร์แม่ก่อน แล้วกดแป้น < Alt >คา้ งไว้พรอ้ มกบั ลากเมาส์เพื่อสรา้ งเลเยอรย์ อ่ ยให้ซอ้ นกนั

- หรือใชพ้ าเนลเลเยอร์ โดยคลิกที่เลเยอร์ย่อยพร้อมกับกดแป้น < Ctrl > ค้างไว้แลว้ ลากไปวางยงัเลเยอรแ์ ม่ - หรือคลิกเลือกเลเยอร์แล้วใชเ้ มนู Insert >> Layout Objects >> Layer

การกาหนดให้เลเยอรท์ ี่สร้างใหท้ หี ลงั ซอ้ นกันอตั โนมตั ิทุกคร้งั ใหเ้ ลอื กคาสง่ั Edit >> Preference…หรอื < Ctrl > + < U > จะไดห้ นา้ ตา่ ง Preferences คลิกที่ Layers ใน Category แล้วเลอื กตัวเลือก Nestwhen creates within a layer 5. การแปลงเลเยอร์ การแปลงเลเยอร์ ในการใชเ้ ลเยอรจ์ ัดองคป์ ระกอบต่าง ๆ ในหนา้ เวบ็ เพจสามารถทาไดง้ า่ ยและสะดวกแตผ่ ู้เข้าชมทใ่ี ช้บราวเซอรร์ ุน่ ตา่ กว่าเวอรช์ นั 4 จะไมส่ ามารถชมหนา้ เวบ็ เพจทส่ี รา้ งจากเลเยอร์ได้ สาหรับในกรณนี ้ีมวี ิธแี กไ้ ขคอื เปล่ยี นเลเยอร์ให้เปน็ ตาราง ซ่ึงจะทาใหบ้ ราวเซอร์ทว่ั ไปแสดงข้อมูลได้ - คลกิ เมนู Modify >> Convert >> AP Divs to Table - จะปรากฏหนา้ ต่างตงั้ ค่าตาราง Convert AP Divs to Table

- คลกิ ปุม่ OKการแปลงตารางเป็นเลเยอร์- คลิกเมนู Modify >> Convert >> Table to AP Divs…- จะปรากฏหนา้ ตา่ งตงั้ คา่ ต่าง ๆ ในสว่ นของ Convert Tables to AP Divs…