นางสาวเบญจมาศ รัตน์พิทักษ์

งานนำเสนอเรื่อง: "นางสาวเบญจมาศ รัตน์พิทักษ์"— ใบสำเนางานนำเสนอ:

1 นางสาวเบญจมาศ รัตน์พิทักษ์
การจัดหน้าเว็บเพจด้วยAP Element นางสาวเบญจมาศ รัตน์พิทักษ์

2 จุดประสงค์การเรียนรู้
ผู้เรียนเข้าใจหลักการจัดหน้าเว็บเพจด้วย AP Element ผู้เรียนสามารถจัดหน้าเว็บเพจด้วย AP Element รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

3 เนื้อหาสาระ การจัดหน้าเว็บเพจด้วย AP Element
รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

4 AP Element AP Element (Absolutely Positioned Element)
เดิมเรียกว่า เลเยอร์ (layer)เปรียบเสมือนแผ่นใสที่ สามารถใส่เนื้อหาต่างๆลงไปและนำมาวางเรียงช้อนกัน เป็นชั้นๆได้โดยเนื้อหาชั้นบนที่อยู่ถัดไปตามลำดับ ส่วน บริเวณที่ไม่มีเนื้อหาก็จะโปร่งใสทำให้มองผ่านไปเห็น ชั้นถัดไปได้ รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

5 AP Element ประโยชน์ของ AP Element คือใช้เอฟเฟ็คต์พิเศษ เช่น กำหนดให้แสดงหรือซ่อนเนื้อหาโดยขึ้นกับ เงื่อนไขต่างๆ และให้ผู้ชมลากย้าย AP Element ไป มาบนเว็บเพจได้ เป็นตน รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

6 การสร้าง AP Element วาดด้วยเครื่องมือ Draw AP Div
วาด AP Element โดยใช้คำสั่ง Insert Layout Objects AP Div รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

7 การสร้าง AP Element คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ
เลือก Layout Objects > AP Div รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

8 การใส่เนื้อหา AP Element
หลังจากที่สร้าง AP Element แล้วจะปรากฏเคอร์เซอร์ขึ้น ภายในกรอบซึ่งสามารถพิมพ์ ข้อความหรือวางเนื้อหา ต่างๆได้ทันที แต่หากต้องการคลิกวางเคอร์เซอร์ใน AP Element ก่อนหรือไม่ก็ใช่วิธีลากออบเจ็คมาวาง โดยตรง รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

9 ซ่อน/แสดงเส้นกรอบAP Element
view > visual aids > AP Element outlines และ CSS layout outlines แสดง ซ่อน รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

10 ซ่อน/แสดงจุดยึด AP Element
Edit > Preferences จากเลือกหมวด Invisible Elements และ ดูที่ออปชั่น ซึ่งออปชั้นนี้จะต้องถูกเลือกไว้ ไม่เช่นนั้น จะไม่ สามารถซ่อน/แสดงจุดยึดของ AP Element รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

11 ซ่อน/แสดงจุดยึด AP Element
เลือก view > Visual Aide > Invisible Elements คลิกปุ่ม แล้วเลือกคำสั่ง invisible Elements รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

12 เลือก AP Element 1. 2. รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป
ผู้สอน เบญจมาศ รัตน์พิทักษ์

13 ปรับแต่ง AP Element กรณีเลือก 1 AP เดียว กรณีเลือกหลาย AP
รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

14 การจัดเรียง AP Element
รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป ผู้สอน เบญจมาศ รัตน์พิทักษ์

15 เข้าสู่โปรแกรม รายวิชาการพัฒนาเว็บไซท์ด้วยโปรแกรมสำเร็จรูป
ผู้สอน เบญจมาศ รัตน์พิทักษ์