1
2 1. การจัดการหน้าเว็บเพจ เว็บเพจ (Web Page) คือ หน้าย่อย ๆ ในแต่ละหน้าของเว็บไซต์ เช่น หากคลิกเข้าไปในเว็บไซต์ และคลิก ต่อ เข้าไปในหน้าเลือกสินค้า หน้าเลือกสินค้า คือ หน้าที่เรียกว่าเว็บเพจ เว็บไซต์ (Website) คือ ทุกสิ่งทุกอย่างที่รวมเข้าไว้ด้วยกัน ทั้งเว็บเพจหรือโฮมเพจเมื่อรวมกันแล้วจะ กลายเป็น เว็บไซต์หนึ่งเว็บไซต์ การจัดการหน้าเว็บเพจ (Web Page) เพื่อให้เกิดความเป็นระเบียบและสวยงาม โดยอาจจะเป็นการกําหนด โครงร่า (Layout) ก่อนที่จะลงมือปฏิบัติ ใน WordPress จะมีการจัดหน้าเว็บเพจด้วยบล็อก (Blog) ในที่นี้จะ กล่าวถึงเครื่องมื ของการจัดหน้าเว็บเพจด้วยบล็อก (Blog) โดยมีวิธีปฏิบัติดังนี้ 1.1 เข้าสู่เว็บไซต์
3 1.2 คลิกที่ หน้า (Page) 1.3 ปรากฏรายชื่อหน้าเว็บที่ได้สร้างไว้ตามเมนู ให้คลิกที่ Blog 1.4 ปรับแต่งหน้าปกของเว็บเพจ 1.5 เพิ่มบล็อกเพื่อจัดการหน้าเว็บเพจ เพื่อใส่ข้อความหรือรูปภาพ
4 2. เครื่องมือในการจัดการหน้าเว็บเพจ การจัดการหน้าเว็บเพจมีเครื่องมือต่าง ๆ ของ WordPress ให้เลือกจํานวนมาก แต่ไม่ได้แสดงไว้ที่หน้า โปรแกรมซึ่งจะใช้วิธีการค้นหา โดยมีเครื่องมือต่าง ๆ ดังนี้ 2.1 คลิกที่ เพิ่มบล็อก 2.2 ปรากฏกรอบให้ค้นหาเครื่องมือต่างๆ ให้คลิกดูทั้งหมด 2.2.1 เครื่องมือข้อความ ประกอบด้วยเครื่องมือ ต่าง ๆ เช่น Paragraph (ย่อหน้า) Heading (หัวข้อเรื่อง) List (รายการ) Table (ตาราง) เป็นต้น
5 2.2.2 เครื่องมือ DESIGN (ออกแบบ) ประกอบด้วย เครื่องมือต่าง ๆ เช่น Buttons (ปุ่ มเครื่องมือ) Columns (คอลัมน์) Page Break (แบ่งหน้า) Site Title (ชื่อเรื่อง หรือชื่อหน้า) เป็นต้น 2.2.3 เครื่องมือวิดเจ็ต (Widget) ประกอบด้วย เครื่องมือต่าง ๆ เช่น Calendar (ปฏิทิน) Custom HTML (กําหนดภาษา HTML) Latest Comments (ความคิดเห็นสุดท้าย) Search (ค้นหา) เป็นต้น
6 2.2.4เครื่องมือธีม (Themes) ประกอบด้วยเครื่องมือต่าง ๆ เช่น Post Content (โพสต์เนื้อหา) เครื่องมือ ต่าง ๆ เช่น การเชื่อมโยงไปยัง Twitter YouTube post Date (โพสต์วันเดือนปี) Post List (โพสต์รายการ) Navigation (การนําทาง) Login/out (การเข้าและออก) เป็นต้น 2.2.5 เครื่องมือฝัง (Embed)ประกอบด้วย เครื่องมือต่างๆ เช่น การเชื่อมโยงไปยัง twitter YouTube Spotify Vimeo เป็นต้น 2.2.6 เครื่องมือ EARN (ระบบการเงิน) ประกอบด้วยเครื่องมือต่าง ๆ เช่น Payments (การชําระเงิน) Pay with PayPal (ชําระเงินด้วยระบบ PayPal) ตารางราคา เป็นต้น
7 3. การกําหนดชื่อหน้าโฮมเพจ การกําหนดชื่อหน้าโฮมเพจ (Home Page) ซึ่งเป็นหน้าแรกของเว็บไซต์ มีวิธีปฏิบัติดังนี้ 3.1 คลิกที่ หน้า (Page) 3.2 หน้าแรกของเว็บจะปรากฏว่า ยังไม่ได้ตั้งชื่อ 3.3 คลิกที่ ยังไม่ได้ตั้งชื่อ 3.4 ในที่นี้กําหนดชื่อ Siwatshop2020 3.5 ปรากฏชื่อที่หน้าโฮมเพจ ดังนี้
8 4. การจัดการหน้าคลังภาพ คลังภาพ (Gallery) คือ แหล่งเก็บหรือรวบรวมรูปภาพไว้ในที่เดียวกัน เพื่อสะดวกในการค้นหาและใช้ใน การออกแบบต่าง ๆ นอกจากนี้ ยังช่วยให้ลูกค้าสามารถเลือกดูสินค้าที่อยู่ในหมวดหมู่เดียวกันได้ง่ายขึ้น การจัดการหน้าคลังภาพ (Gallery) ที่ได้ทําเพิ่มไว้ ซึ่งส่วนใหญ่จะเป็นการแสดงรูปสินค้าที่ต้องการขาย โดย มีวิธีปฏิบัติดังนี้ 4.1 คลิกที่ Gallery 4.2 ปรากฏหน้า Gallery 4.3 คลิกที่ เพิ่มบล็อก 4.4 เลือกเครื่องมือ Gallery 4.5 ปรากฏกรอบ คลังภาพ ให้คลิกที่ อัปโหลด 4.6 เลือกรูปภาพที่ต้องการ ในที่นี้เลือกจํานวน 6 ภาพ เสร็จแล้วคลิกที่ Open
9 4.7 ปรากฏรูปภาพที่ต้องการ 5. การเปลี่ยนชนิดหรือรูปแบบของบล็อก การจัดรูปแบบของรูปภาพ WordPress มีเครื่องมือในการจัดรูปแบบด้วยการจัดบล็อก โดยมีวิธีปฏิบัติดังนี้ 5.1 คลิกที่ เปลี่ยนชนิดหรือรูปแบบบล็อก 5.2 มีรูปแบบให้เลือก ดังนี้ 5.2.1 Slidshow (แสดงแบบสไลด์) 5.2.2 Tiled Gallery (เรียงภาพ) 5.2.3 Premium Content (เนื้อหาระดับ) 5.2.4 ภาพปะติด
10 5.2.5 เรียงอิฐ (จะไม่แสดงตัวอย่างให้ดูก่อน) 5.2.6 สมดุล 5.2.7 เรียงแนวตั้ง 5.2.8 Columns (ANY) 5.2.9 Group (กลุ่ม) ในที่นี้ให้เลือกแบบ Tiled Gallery ปรากฏดังภาพ
11 ถ้าต้องการอัปโหลดรูปภาพเพิ่ม ให้คลิกที่ Upload an image 6. การเพิ่มรูปภาพในรูปแบบของบล็อก ในกรณีที่ต้องการเพิ่มรูปภาพในรูปแบบของบล็อก มีวิธีปฏิบัติดังนี้ 6.1 คลิกที่ เพิ่มบล็อก 6.2 เลือกรูปแบบ ในที่นี้เลือกแบบภาพปะติด จากการค้นหาคําว่า collage 6.3 ปรากฏรูปแบบบล็อกแบบภาพปะติด 6.4 คลิกที อัปโหลด
12 6.5เลือกรูปภาพที่ต้องการ เสร็จแล้วคลิกที่ Open 6.6 ปรากฏดังภาพ 6.7 อัปโหลดรูปภาพจนครบ 7. เครื่องมือในการจัดรูปแบบบล็อก เมื่อใส่ข้อมูลต่าง ๆ ในบล็อกแล้ว มีเครื่องมือที่ใช้ในการจัดรูปแบบบล็อกต่าง ๆ ดังนี้ 7.1 เครื่องมือ เปลี่ยนชนิดหรือรูปแบบบล็อก
13 ซึ่งจะประกอบด้วยบล็อกรูปแบบต่าง ๆ และมีสไตล์ (Style) ให้เลือกอีก เช่น Tiled mosaic,Circles, Square tiles, Tiled columns 7.2 เครื่องมือ เปลี่ยนการจัดตําแหน่ง ประกอบด้วย ไม่มี กึ่งกลาง กว้าง กว้างเต็มจอ
14 7.3 เครื่องมือ Edit Gallery คือ การแก้ไขคลังภาพ 7.4เครื่องมือ Pick an image filter ประกอบด้วย Original, Black and White, Sepia,1977, Clarendon, Gingham 7.5 เครื่องมือที่เป็นสัญลักษณ์3 จุด ประกอบด้วยเพิ่มไปยังบล็อกใช้ซ้ําได้ รวมกลุ่ม และลบบล็อก การคัดลอก ทําสําเนา แทรกก่อนหน้าแทรกต่อท้ายเพิ่มไปยังบล็อกใช้ซ้ําได้รวมกลุ่มและลบบล็อก
15 กิจกรรมเสนอแนะ เกร็ดความรู้ WordPress สําหรับระบบปฏิบัติการแอนดรอยด์ให้อํานาจในการเผยแพร่มาอยู่ในมือคุณ ทําให้การเขียน และการอ่าน บทความกลายเป็นเรื่องง่าย ทั้งเขียน แก้ไขและเผยแพร่ไปยังเว็บไซต์ของคุณ เช็กสถิติ และหา แรงบันดาลใจจากบทความ ต่าง ๆ ในตัวอ่าน และเป็นสิ่งที่ให้ใช้ฟรี (Open Source) WordPress สําหรับแอน ดรอยด์ สนับสนุน WordPress.com และเว็บ WordPress ที่ใช้โฮลของตัวเองที่ใช้งาน WordPress รุ่น 3.7 หรือสูงกว่า สามารถค้นหาข้อมูลเพิ่มเติมได้ที่http://android.forums.wordpress.org สรุปประเด็นสําคัญ เว็บเพจ (Web Page) คือ หน้าย่อย ๆ ในแต่ละหน้าของเว็บไซต์ เช่น หากคลิกเข้าไปในเว็บไซต์ และ คลิก ต่อเข้าไปในหน้าเลือกสินค้า หน้าเลือกสินค้า คือ หน้าที่เรียกว่าเว็บเพจส่วนเว็บไซต์ (Website) คือ ทุกสิ่ง ทุกอย่างที่รวมเข้าไว้ด้วยกัน ทั้งเว็บเพจหรือโฮมเพจเมื่อรวมกันแล้วจะกลายเป็นเว็บไซต์หนึ่งเว็บไซต์การจัดการ หน้าเว็บเพจ (Web Page) เพื่อให้เกิดความเป็นระเบียบและสวยงาม โดยอาจจะเป็นการกําหนด โครงร่าง (Layout) ก่อนที่จะลงมือปฏิบัติ ใน WordPress จะมีการจัดหน้าเว็บเพจด้วยบล็อก (Blog) คลังภาพ (Gallery) คือ แหล่งเก็บหรือรวบรวมรูปภาพไว้ในที่เดียวกัน เพื่อสะดวกในการค้นหา การออกแบบต่าง ๆ นอกจากนี้ ยัง ช่วยให้ลูกค้าสามารถเลือกดูสินค้าที่อยู่ในหมวดหมู่เดียวกันได้ง่ายขึ้น 1.ให้ผู้เรียนจับภาพหน้าจอเว็บไซต์ที่ผู้เรียนคิดว่าสวยงามและน่าสนใจ คนละ 1 เว็บไซต์ แล้วนําเสนอผู้สอน 2. ให้ผู้เรียนเตรียมรูปภาพที่จะนําเสนอสินค้า โดยใช้โปรแกรมในการจัดทํา เช่น Adobe Photoshop หรือ Canva แล้วนําเสนอผู้สอน Web Guide https://www.youtube.com/watch?v=C3TbhHkcrM4 https://www.youtube.com/watch?v=Bub_6mxwAJ8 https://www.youtube.com/watch?v=elinVVFP7fg
16 QR-Code หน่วยที่ 8 การจัดการหน้าเว็บเพจและหน้าคลังภาพ
17 ใบงานที่ 8 ใบงานที่ 8.1 เรื่อง การจัดการหน้าเว็บเพจ ใบงานที่ 8.2 เรื่อง การจัดการคลังภาพ การประเมิณ คำชี้แจง ให้ผู้เรียนจัดการหน้าเว็บเพจให้สวยงามและมีข้อมูลที่ครบถ้วน โดยใส่เนื้อหาและรูปภาพ เพื่อให้ผู้ที่เข้าชม เว็บไซต์ประทับใจตั้งแต่หน้าแรก พร้อมทั้งกําหนดชื่อหน้าเว็บเพจ แล้วนําเสนอผู้สอน คำชี้แจง ให้ผู้เรียนเปิดหน้าคลังภาพหรือ Gallery เพื่อนําภาพสินค้าที่ได้จัดเตรียมไว้ มาใส่ในบล็อกให้เป็นระเบียบและ สวยงาม อย่างน้อย 2 รูปแบบ แล้วนําเสนอผู้สอน 5=ดีเยี่ยม 4 = ดีมาก 3 = ดี2 = พอใช้ 1=ไม่ผ่าน ลำดับ รายการประเมิน เกณฑ์การประเมิน 5 4 3 2 1 1 พฤติกรรมการทํางาน 2 การตรงต่อเวลา 3 ความคิดสร้างสรรค์ 4 ความถูกต้องและน่าสนใจ 5 เทคนิคการนําเสนอ/ตอบข้อซักถาม รวม ข้อเสนอแนะ
18 แบบทดสอบหลังเรียน ตอนที่ 1 จงทําเครื่องหมายกากบาท (X) ลงหน้าข้อที่ถูกต้องที่สุด 1.เครื่องมือใด ไม่อยู่ในกลุ่มออกแบบ (Design) ก. Buttons ข. Calendar ค. Group ง. Page Break จ. Spacer 2. Calendarอยู่ในกลุ่มเครื่องมือใด ก. Widget ข. Design ง. Embed ค. Themes จ. Earn 3. การเชื่อมโยงไปยัง Twitter อยู่ในกลุ่มเครื่องมือใด ก. Widget ข. Design ค. Themes ง. Embed จ. Earn
19 4. ระบบการชําระเงิน (Payment) อยู่ในกลุ่ม เครื่องมือใด ก. Widget ข. Design ค. Themes ง. Embed จ. Earn 5. เมื่อสร้างเว็บไซต์ครั้งแรก หน้าแรกจะปรากฏ ชื่อว่าอะไร ก. หน้าแรก ข. Home ค. ยังไม่ได้ตั้งชื่อ ง. Contact จ. Blog 6.รูปภาพเครื่องมือใดใช้ในการเปลี่ยนชนิดของบล็อก 7. หมายถึงบล็อกรูปภาพแบบใด ก. ภาพปะติด ข. เรียงอิฐ ค. สมดุล
20 ง. เรียงแนวตั้ง จ. เรียงลําดับ 8. เครื่องมือแก้ไขคลังภาพมีลักษณะอย่างไร ก. ปากกา ข. ดินสอ ค. สี่เหลี่ยม ง. วงกลม จ. จุด 3 จุด 9. แป้นพิมพ์ใดใช้ลบบล็อก ก. Shift+* ข. Ctrl+* ค. Ctrl+Alt+T ง. Ctrl+Alt+Y จ. Ctrl+Alt+Z 10. แป้นพิมพ์ใดใช้แทรกต่อท้ายบล็อก ก. Shift+’ ข. Ctrl+* ค. Ctrl+Alt+T ง. Ctrl+Alt+Y จ. Ctrl+Alt+Z
21 จงเติมคําหรือข้อความลงในช่องว่างต่อไปนี้ให้ถูกต้อง 1. 1. เว็บเพจ (Web Page) คือ………………………………………………………………………………………………………………………………..………………………… ………………………………………………………………………………………………………….…………………………………………………… ………………………………………………………………………………………….…………………………………………………………………… 2. เว็บไซต์ (Website) คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 3. เครื่องมือข้อความ ประกอบด้วย………………………………………………………………………………………………………………………………..……… …….……………………………………………………………………………………………………………………….…………………………… ….……………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………………………………………………………… ……………….. 4. เครื่องมือ Design (ออกแบบ) ประกอบด้วย…………………………………………………………………………………………………………………..……………..…… ……….………………………………………………………………………………………………………………………….……………………… ……….……………………………………………………………………………………………………………….………………………………. …………………………………………………………………………………………………………………………………..……………………… ……………… 5. เครื่องมือวิดเจ็ต (Widget) ประกอบด้วย………………………………………………………………………………………………………………………………..……… …….……………………………………………………………………………………………………………………….…………………………… ….……………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………………………………………………………… ……………….. ตอนที่ 2
22 6. เครื่องมือธีม (Themes) ประกอบด้วย………………………………………………………………………………………………………………………………..……… …….……………………………………………………………………………………………………………………….…………………………… ….……………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………………………………………………………… ……………….. 7. เครื่องมือ ฝัง (Embed) ประกอบด้วย………………………………………………………………………………………………………………………………..……… …….……………………………………………………………………………………………………………………….…………………………… ….……………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………………………………………………………… ……………….. 8. เครื่องมือ Earn (ระบบการเงิน) ประกอบด้วย………………………………………………………………………………………………………………………………..……… …….……………………………………………………………………………………………………………………….…………………………… ….……………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………………………………………………………… ……………….. 9. การกําหนดชื่อหน้าโฮมเพจ (Home Page) ซึ่งเป็นหน้าแรกของเว็บไซต์ มีวิธีปฏิบัติ ดังนี้………………………………………………………………………………………………………………………………..…………….…… ………………………………………………………………………………………………………………….……………………………….……… ……………………………………………………………………………………………………….……………………………….………………… ………………………………………………………………………………………………………………………………………………………… …..
23 10. คลังภาพ (Gallery) คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. ตอนที่ 3 จงจับคู่ข้อความต่อไปนี้ให้สัมพันธ์กัน 1. .................. Web Page A. หัวข้อเรื่อง 2. .................. .Website B. รายการ 3. .................. .Heading C. ปฏิทิน 4. .................. Design D. การฝัง 5. .................. Buttons E. แต่ละหน้าของเว็บไซต์ 6. .................. Calendar F. ออกแบบ 7. .................. Navigation G. ระบบการเงิน 8. .................. Embed H. ทุกหน้าของเว็บไซต์ 9. .................. Earn i. เนื้อหา 10. .................. Gallery J. การนําทาง K. คลังภาพ l. ปุ่มเครื่องมือ
24