ใบความรู้ หน่วยที่ 5

หนว่ ยท่ี 5

5.1 ความหมายของ AP Element AP Element (Absolutely Positioned Element) หรือในโปรแกรมAdobe Dreamweaver รุ่นกอ่ นๆ เรียกวา่ เลเยอร์ (Layer) เปรียบเสมือนแผน่ ใสที่สามารถใสเ่ นือ้ หา ข้อความ รูปภาพ วดิ ีโอ หรือสอื่ มลั ติมีเดียชนิดตา่ ง ๆลงไปและสามารถนามาวางเรียงซ้อนกนั เป็ นชนั้ ๆได้ ประโยชนข์ อง AP element คอื สามารถใช้ AP element ช่วยจดั เลย์เอาต์ของเว็บเพจ และใช้สร้างคณุ ลกั ษณะพิเศษ เชน่ กาหนดให้แสดงหรือซอ่ นเนือ้ หาให้ปรากฏขนึ ้ โดยใช้กบั เงื่อนไขตา่ ง ๆได้

5.2 การสรา้ ง AP Element การสร้าง AP Element ในการพัฒนาเว็บไซต์ นน้ั สามารถเลอื กทา ในมมุ มอง Standard หรือมุมมอง Expanded โดยสามารถสร้างได้ 2 วิธีคือ วธิ ที ี่ 1 การวาดด้วยเคร่อื งมือ Draw AP Div มีขนั้ การวาดดงั นี ้วธิ ที ่ี 2 การวาด AP element โดยใช้คาสงั่ Insert > Layout Objects > APDiv

5.3 การซอ่ นหรือแสดงจดุ ยึด AP element มีคุณสมบัตทิ ีด่ ูเหมอื นว่าสามารถเคล่อื นยา้ ยหรือลอยอย่บู นเว็บได้อย่างอสิ ระ แต่ความจริงแลว้ ทกุ ชิน้ จะยึดกบั เว็บเพจท่จี ุดหน่งึ ซง่ึ เรียกวา่ จุดแองเคอร์(Anchor Point)โดยมสี ญั ลักษณแ์ สดงด้วยไอคอนในกรณีทส่ี ร้าง AP element ดว้ ยวิธีวาด ไอคอนนีจ้ ะอยู่ท่ีมุมซ้ายบนของเว็บเพจ สว่ นกรณีใชค้ าสง่ั Insert ไอคอนน้จี ะอยู่ตรงจุดที่วางเคอร์เซอร์ จดุ ยึดมคี วามสาคัญเพราะสามารถใชอ้ า้ งองิ ตาแหนง่ ของ APelement จะคิดเทียบจากมมุ ซา้ ยบนขององค์ประกอบหลกั ทจ่ี ดุ ยดึ น้นั ถกู วางไว้ ซ่ึงอาจจะเป็นการวางบนเว็บเพจหรือ AP element อื่นกไ็ ด้ นอกจากน้ัน AP element

5.4 การกาหนดคุณสมบัตใิ ห้กบั AP Element5.4.1 กาหนดช่อื AP element5.4.2 ย้ายหรอื กาหนดตาแหนง่ AP element5.4.3 ปรบั ขนาด ทาได้โดยใช้วธิ ีต่างๆดงั น้ี 1. ป้อนค่าทีช่ อ่ ง W และ H บนพาเนล Properties 2. คลกิ ลากที่จดุ แฮนเดิล (Handle)

5.5 การจัดลาดับชน้ั AP Element เมือ่ วาง AP Element ซอ้ นทับกนั เนื้อหาของช้นิ บนจะบงั ชน้ิ ทีอ่ ยู่ด้านลา่ งไปตามบลาดับช้นั ยกเวน้ เฉพาะบริเวณทีช่ น้ิ ลา่ งเหลอ่ื มออกมาหรอืบรเิ วณทช่ี ้นิ บนไมม่ ีขอ้ มลู ลาดบั ชนั้ (Z-Index) ของ AP Element มคี า่ เปน็จานวนเต็มบวกหรอื จานวนเตม็ ลบ เช่น –2, -1, 0, 1, 2 โดยค่าท่มี ากกวา่หมายถงึ ชน้ิ ท่ีอยดู่ ้านบน ผพู้ ฒั นาเว็บไซต์ สามารถเปลยี่ นลาดับชน้ั ของ APElement

5.6 การซ่อนหรือแสดง AP Elementคุณสมบตั ิน้ีมกั ใช้ร่วมกบั การกาหนดพฤตกิ รรมการแสดงออก (Behavior) เพ่ือสร้างคณุ ลกั ษณะพเิ ศษ (Effect) ในการโต้ตอบกบั ผ้เู ข้าชมเว็บไซต์ เช่น เม่ือผ้ชู มชีเ้มาส์บนข้อความที่กาหนดไว้ ให้แสดง AP Element ซงึ่ มภี าพที่เก่ียวข้องขนึ ้ มา เป็ นต้น ในตวั อยา่ งดงั กลา่ วนีก้ ารซอ่ น/แสดง AP Element จะทาโดยคาสง่ั โปรแกรม แตก่ ารตงั้ สถานะเริ่มต้นของ AP Element

5.7 การกาหนดใหแ้ สดงเนอื้ หาเพียงบางสว่ นสามารถกาหนดให้ AP element แสดงเนื้อหาออกมาเพยี งบางสว่ นและซอ่ นสว่ นท่ีเหลือไว้ โดยจะกาหนดได้ท่ีออปชนั กลมุ่ Clip บนพาเนล Properties ดงั น้ี 1. L (Left) ตดั ขอบซ้ายออก ตามจานวนพิกเซลลท์ ี่กาหนด 2. T (Top) ตดั ขอบบนออก ตามจานวนพกิ เซลลท์ ี่กาหนด 3. R (Right) ตดั ขอบขวาออก ตามจานวนพกิ เซลลท์ ่กี าหนด 4. B (Bottom) ตดั ขอบล่างออก ตามจานวนพิกเซลล์ท่ีกาหนด

5.8 การสร้าง AP Element วิธที ี่ 1 คลกิ ลากไอคอนของ AP element ยอ่ ยออกมาจาก APelement หลกั โดยนาไปวางไว้ทีใ่ ดบนเว็บเพจกไ็ ด้ วิธีที่ 2 บนพาเนล AP element ให้คลิกลากชือ่ AP elementย่อยขนึ้ ไปเหนอื AP element หลกั

5.9 การจัดเรยี งและการปรบั ขนาดใหก้ บั AP Elementจดั เรยี ง AP elementในการจดั เรียงจะต้องเลอื ก AP Element มีขนั้ ตอนการจดั เรียงดงั นี ้1. เลอื ก AP Element ที่ต้องการจดั เรียงโดยคลกิ ท่ีป่ มุ Shift เพือ่ เลอื ก APElement2. คลกิ ที่เมนู Modify3. เลอื ก Arrange4. เลอื กการจดั เรยี ง Align Left

ปรบั ขนาด AP element ให้เทา่ กัน ใช้หลกั การเดียวกับการจดั เรยี ง คือต้องเลือก AP Element เหล่านี้พร้อม ๆ กัน และกาหนดใหช้ ้นิ ใดช้ินหนงึ่ เป็นหลักซึง่ จะมขี นาดคงที่สว่ นชิน้ อ่ืนจะถกู ปรบั ให้เทา่ กับช้ินหลกั ขนั้ ตอนการปรบั ขนาด มดี งั นี้ 1. คลิกเลือก AP Element ทงั้ หมดทต่ี อ้ งการปรบั ขนาด โดยคลกิ ทป่ี ่มุ Shift 2. คลกิ ท่ีเมนู Modify 3. เลอื ก Arrange คาสัง่ ในการปรบั ขนาด - Make Same Width ปรบั ให้ AP Element กว้างเทา่ กัน - Make Same Height ปรบั ให้ AP Element สงู เทา่ กนั 4. คลิกเลือก Make Same Width

5.10 การใช้ AP Element จัดเลย์เอาต์ให้เว็บเพจแปลง AP Element ใหเ้ ป็นตาราง 1. คลกิ เลอื ก AP element ทั้งหมด โดยใชป้ มุ่ shift ในการเลือก 2. คลกิ เมนู Modify 3. เลอื ก Convert 4. เลือก AP Dives to Table 5. จะปรากฏหน้าตา่ ง AP Dives to Table โดยมี Option สร้างตาราง 6. จะได้ ตารางท่ีแปลงมาจาก AP element