หน่วยที่ 6 การปรับแต่งหน้าปก เมนูและเผยแพร่เว็บไซต์

1

2 1.การปรับแต่งหน้าปก หน้าแรก (Home page) การปรับแต่งหน้าปกหน้าแรก (Home Page) คือ หน้าเว็บเพจหลักหรือหน้าแรก ของเว็บไซต์ โดยทุกครั้งที่เข้ามายังเว็บไซต์จะพบหน้านี้ก่อนเสมอ จึงคล้ายเป็นห้องรับแขกหรือหน้าตาของ เว็บไซต์สำหรับรอรับการมาเยี่ยมชมของผู้เข้าชมในโลกอินเทอร์เน็ตโฮมเพจที่สวยจะได้รับความสนใจ ดังนั้น จึงควรให้ความสำคัญกับหน้าแรกเป็นอันดับแรกการปรับแต่งหน้าปกเว็บไซต์ (Cover) ในหน้าแรก (Home Page) มีวิธีปฏิบัติดังนี้ 1.1 คลิกที่ Edit homepage (แก้ไขหน้าแรกเว็บไซต์)

3 1.2 ปรากฏข้อความ Welcome to your new site. 1.3 พิมพ์หรือความหน้าปกเว็บไซต์ ในที่นี้พิมพ์ข้อความ Welcome to Sweatshop2020 (การกำหนดชื่อเป็น Sweatshop2020) เพื่อให้ทราบว่าร้านค้าได้มีการดำเนินการมาแล้ว และได้สร้างเว็บไซต์ขึ้นมาเพื่อดำเนินการ ธุรกิจให้กว้างขึ้น 1.4 พิมพ์ข้อความหัวข้อย่อย ในที่นี้คือ พบกับสินค้าที่หลากหลาย ของใช้ อาหารและของกินเล่น อร่อย ๆ

4 เครื่องมือการปรับรูปแบบข้อความประกอบด้วย การกำหนดพื้นหลังของปกเว็บไซต์มีวิธีปฏิบัติดังนี้ 1) คลิกที่ บริเวณพื้นหลัง 2) คลิกที่ แทนที่

5 3) เลือก อัปโหลด 4) เลือกภาพพื้นหลังที่ต้องการ เสร็จแล้วคลิกที่ open 5) ปรากฏพื้นที่หลังตามที่เลือกไว้

6 การปรับรูปแบบตัวอักษร มีวิธีปฏิบัติดังนี้ 1) ทำแถบสีคลุมข้อความที่เป็นหัวข้อเรื่อง 2) ปรับรูปแบบของข้อความตามต้องการ 3) กำหนดสีของตัวอักษร

7 4) เมื่อปรับแต่งข้อความแล้ว จะปรากฏดังภาพ 2. การสร้างเมนู เมนู (Menu) คือ คำสั่งต่าง ๆ ที่จะเชื่อมโยงไปยังหน้าเว็บเพจที่ต้องการได้อย่างรวดเร็ว โดยจะแสดงให้เห็น อย่างเด่นชัด ซึ่ง WordPress มีระบบจัดการเมนูที่เรียบง่าย แต่สามารถสร้างเมนูได้หลายชุด แสดงได้ หลากหลายตำแหน่ง เช่น Main menu, Mobile menu, Secondary menu ทั้งนี้ ขึ้นอยู่กับแต่ละชิมด้วยว่า มีตำแหน่งให้แสดงเมนูได้ที่จุด การสร้างเว็บไซต์ที่ให้ความสะดวกกับผู้ใช้ คือ การสร้างเมนูเพื่อให้เลือกไปยังหน้าที่ต้องการได้รวดเร็ว มีปฏิบัติ ดังนี้ 2.1 คลิกที่ Customize your site menu (กำหนดเมนูเอง)

8 2.2 คลิกที่ Customize your site menu 2.3 ปรากฏหน้าต่าง Customize your site menu ให้คลิกที่ เพิ่มเมนู (Add) 2.4 ปรากฏหน้าต่างเว็บไซต์ Siwatshop2020

9 2.5 คลิกที่ เมนู 2.6 คลิกที่ continue 2.7 เมนูในปัจจุบัน มีดังนี้ 2.8 คลิกที่ primary

10 2.9 ปรากฏหน้าต่างเมนูที่มีอยู่แล้ว ในที่นี้จะมีเมนูHome Blog 2.10 คลิกที่ เพิ่มรายการ

11 2.11 คลิกที่ เพิ่มหน้าใหม่ 2.12 พิมพ์ชื่อเมนูที่ต้องการ ในที่นี้คือ Gallery เสร็จแล้วคลิกที่ เพิ่ม 2.13 ปรากฏเมนูชื่อ Gallery

12 2.14 คลิกที่ เมนู Gallery ลากไปวางเรียงตามลำดับ ของเมนูที่ต้องการ 2.15 คลิกที่ บันทึกการเปลี่ยนแปลง 2.16 ปรากฏเมนูที่ได้สร้างไว้ดังนี้ 2.17 ถ้าต้องการเพิ่มเมนูอีก ให้คลิกที่ เพิ่มรายการ

13 2.18 พิมพ์ชื่อเมนู Contact เพื่อใช้เป็นการติดต่อ เสร็จแล้วคลิกที เพิ่ม 2.19 ปรากฏชื่อเมนูดังนี้ 2.20 เสร็จแล้วคลิกที่ บันทึกการเปลี่ยนแปลง

14 2.21 ปรากฏเมนูดังภาพ 2.22 เมื่อเพิ่มรายการเมนูแล้ว ให้คลิกที่ เครื่องหมายกากบาทเพื่อปิดกรอบเมนู 2.23 ในส่วนของ Site setup จะปรากฏเครื่องหมาย on Customize your site menu 3. การเผยแพร่เว็บไซต์ การเผยแพร่เว็บไซต์ (Web Publishing) คือ การนำเว็บไซต์ที่สร้างเสร็จแล้ว มาเข้าสู่ระบบอินเทอร์เน็ต โดยสามารถเข้าดูเว็บไซต์ผ่านทางเบราว์เซอร์ซึ่งสามารถนำเว็ปไซต์ไปวางไว้ที่โฮสติ้ง (Web Hosting) ทั้งนี้ ถ้า ใช้ WordPress.com ไม่ต้องเช่าเว็บโฮสติ้ง สามารถเปิดดูได้ทันที เมื่อกำหนดรูปแบบของเว็บไซต์บางส่วนแล้ว อาจจะทดสอบการเผยแพร่เว็บไซต์ก่อน โดยมีวิธีปฏิบัติดังนี้

15 3.1 An Launch your site to the world ในส่วนของ Site setup Site setup 3.2 คลิกที่ Lunch site 3.3 ปรากฎกรอบ Choose a domain ให้คลิกที่ Skip Purchase (ข้ามในส่วนของการจัดซื้อ)

16 4. การกลับสู่หน้าแก้ไข ถ้าต้องการกลับมาแก้ไขหรือพัฒนาเว็บไซต์เพิ่มเติม มีวิธีปฏิบัติดังนี้ 4.1 คลิกที่ เว็บของฉัน 4.2 ปรากฏหน้าที่ต้องการแก้ไข สังเกตว่า Launch you site to the world มีเครื่องหมายถูก แสดงว่า ได้มีการเผยแพร่เว็บไซต์เรียบร้อยแล้ว ภาษาและการแปล WordPress มีการแปลอย่างเป็นทางการมากกว่า 180 รายการ เนื่องจาก WordPress มีผู้ชม จากต่างประเทศจึงจำเป็นต้องแปลเป็นภาษาต่าง ๆ จนถึงขณะนี้มีมากกว่า 180 คำแปล อย่างเป็นทางการของ WordPress ที่มี 48 ภาษาได้รับการแปล 100% และ 25 ภาษาที่มีการแปลมากกว่า 95% WordPress เป็นแพลตฟอร์มระดับโลกซึ่งหมายความว่าต้องรองรับผู้ชมจากต่างประเทศที่อ่านและพูด ภาษาต่างกัน ในปัจจุบัน WordPress ได้รับการสนับสนุนใน 120 ภาษา โดยภาษาอังกฤษมีผู้ใช้มากที่สุด 71% ตามมาด้วยภาษาสเปน และภาษาอินโดนีเซีย 4.7% และ 2.4% ตามลำดับ เกร็ดความรู้

17 QR-Code https://bit.ly/3bKpxZe https://plaradise.com/create- website-wordpress/ https://www.youtube.com /watch?v=3DrBBSeazrl หน่วยที่ 6 การปรับแต่งหน้าปก เมนูและเผยแพร่เว็บไซต์ สรุปประเด็นสําคัญ หน้าแรก (Home Page) คือ หน้าเว็บเพจหลักหรือหน้าแรกของเว็บไซต์ โดยทุกครั้งที่เข้ามายังเว็บไซต์ จะพบ หน้านี้ก่อนเสมอ จึงคล้ายเป็นห้องรับแขกหรือหน้าตาของเว็บไซต์สำหรับรอรับการมาเยี่ยมชมของผู้เข้า ชมใน โลกอินเทอร์เน็ต โฮมเพจที่สวยจะได้รับความสนใจ ดังนั้น จึงควรให้ความสำคัญกับหน้าแรกเป็นอันดับ แรก เมนู (Menu) คือ คำสั่งต่าง ๆ ที่จะเชื่อมโยงไปยังหน้าเว็บเพจที่ต้องการได้อย่างรวดเร็ว โดยจะแสดงให้ เห็น อย่างเด่นชัด ซึ่ง WordPress มีระบบจัดการเมนูที่เรียบง่าย แต่สามารถสร้างเมนูได้หลายชุด แสดงได้ หลากหลายตำแหน่ง เช่น Main menu, Mobile menu, Secondary menu ทั้งนี้ ขึ้นอยู่กับแต่ละซึมด้วยว่า มีตำแหน่งให้แสดงเมนูได้จุด การเผยแพร่เว็บไซต์ (Web Publishing) คือ การนำเว็บไซต์ที่สร้างเสร็จแล้ว มา เข้าสู่ระบบอินเทอร์เน็ต โดยสามารถเข้าดูเว็บไซต์ผ่านทางเบราว์เซอร์ ซึ่งสามารถนำเว็บไซต์ไปวางไว้ที่เว็บโฮส ติ้ง (Web Hosting) ทั้งนี้ถ้าใช้ WordPress.com ไม่ต้องเช่าเว็บโฮสติ้งสามารถเปิดดูได้ทันที Web Guide

18 กิจกรรมเสนอแนะ 1. ให้ผู้เรียนค้นหาเว็บไซต์ที่ใช้ WordPress ในการสร้าง โดยจับภาพหน้าจอ แล้วนำเสนอผู้สอน 2. ให้ผู้เรียนค้นหาวิดีโอที่สอนการใช้ WordPress.com ในการสร้างเว็บไซต์ คนละ 1 เรื่อง แล้วนำเสนอผู้สอน

19 ใบงานที่ 6 ใบงานที่ 6.1 เรื่อง การปรับแต่งหน้าปกเว็บไซต์ ใบงานที่ 6.2 เรื่อง การสร้างเมนู การประเมิณ คำชี้แจง ให้ผู้เรียนสร้างหน้าปกเว็บไซต์ตามที่ได้สมัครใช้งานไว้ โดยให้มีข้อความ รูปภาพที่เกี่ยวข้องกับสินค้าที่ ผู้เรียน จะทำธุรกิจ และให้เผยแพร่เว็บไซต์ แล้วนำเสนอผู้สอน คำชี้แจง ให้ผู้เรียนสร้างเมนูจากเว็บไซต์ที่ผู้เรียนได้สร้างไว้ จำนวน 5 เมนู แล้วนำเสนอผู้สอน 5=ดีเยี่ยม 4 = ดีมาก 3 = ดี2 = พอใช้ 1=ไม่ผ่าน ลำดับ รายการประเมิน เกณฑ์การประเมิน 5 4 3 2 1 1 พฤติกรรมการทํางาน 2 การตรงต่อเวลา 3 ความคิดสร้างสรรค์ 4 ความถูกต้องและน่าสนใจ 5 เทคนิคการนําเสนอ/ตอบข้อซักถาม รวม ข้อเสนอแนะ

20 แบบทดสอบหลังเรียน ตอนที่ 1 จงทําเครื่องหมายกากบาท (X) ลงหน้าข้อที่ถูกต้องที่สุด 1. หมายถึงเครื่องมือใด ก. เปลี่ยนชนิดของบล็อก ข. เลื่อนลง ค. เปลี่ยนการจัดตำแหน่ง ง. เปลี่ยนระดับส่วนหัว จ. เลือกส่วนนำเรื่อง 2. หมายถึงเครื่องมือใด ก. เปลี่ยนชนิดของบล็อก ข. เลื่อนลง ค. เปลี่ยนการจัดตำแหน่ง ง. เปลี่ยนระดับส่วนหัว จ. เลือกส่วนนำเรื่อง 3. ระดับส่วนหัวมีกระดับ ก. 3 ระดับ ข. 4 ระดับ ค. 5 ระดับ ง. 6 ระดับ จ. 7 ระดับ

21 4. H6 หมายถึงขนาดตัวอักษรเท่าใด ก. น้อยที่สุด ข. น้อย ค. ปานกลาง ง. ใหญ่ 5. / หมายถึงเครื่องมือใด ก. ค่าร้อยละ ข. ตัวหนา ค. ตัวเอียง ง. ตัวปกติ จ. ขีดเส้นใต้ 6. Line height หมายถึงข้อใด ก. ความกว้างของเส้น ข. ปรับแต่ง ค. ความยาวของเส้น ง. ขนาดตัวอักษร จ. ความหนาของเส้น 7. เมนูแบบใดเหมาะสำหรับโทรศัพท์มือถือ n. Main menu ข. Secondary menu ค. Mobile menu

22 ง. Head menu Cover menu จ. cover menu 8.เมื่อกำหนดเมนูเสร็จแล้ว จะปรากฏ เครื่องหมายถูกที่ส่วนใด n. Give your site a name ข. Update your homepage ค. Customize your site menu . ง. Confirm your email address จ. Lunch your site to the world 9. ส่วนใดหมายถึงการเผยแพร่เว็บไซต์ n. Give your site a name ข. Update your homepage ค. Customize your site menu . ง. Confirm your email address จ. Lunch your site to the world 10. การกลับสู่หน้าแก้ไข ต้องคลิกที่ ก. ผู้เขียน ข. ผู้อ่าน ค. เรื่อง ง. อัปเกรด จ. เว็บของฉัน

23 จงเติมคําหรือข้อความลงในช่องว่างต่อไปนี้ให้ถูกต้อง 1. หน้าแรก (Home Page) คือ………………………………………………………………………………………………………………………………..………………………… ………………………………………………………………………………………………………….…………………………………………………… ………………………………………………………………………………………….…………………………………………………………………… 2. เมนู(Menu) คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 3. การเผยแพร่เว็บไซต์ (Web Publishing) คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 4. การกำหนดหน้าปกเว็บไซต์ (Cover) ในหน้าแรก (Home Page)มีวิธีปฏิบัติดังนี้ คือ…………………………………………………………………………………………………………………..……………..…………….…… …………………………………………………………………………………………………………………….……………………………….…… ………………………………………………………………………………………………………….……………………………….……………… …………………………………………………………………………………………………………………..……………………………………… 5. การกำหนดพื้นหลังของปกเว็บไซต์ มีวิธีปฏิบัติดังนี้ คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. ตอนที่ 2

24 6. การปรับรูปแบบตัวอักษร มีวิธีปฏิบัติดังนี้ คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 7. ส่วนของ Site setup ประกอบด้วย (บอกมา 3 ชื่อ) คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 8. การเพิ่มเมนู มีวิธีปฏิบัติดังนี้ คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 9. แผนการใช้งานเว็บไซต์ของ WordPress มีดังนี้ คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… ………………………………………………………………………………………………………………………………………………………….. 10. การเผยแพร่เว็บไซต์ มีวิธีปฏิบัติดังนี้ คือ………………………………………………………………………………………………………………………………..…………….……… ……………………………………………………………………………………………………………….……………………………….………… …………………………………………………………………………………………………….……………………………….…………………… …………………………………………………………………………………………………………………………………………………………..

25 A. หน้าแรกของเว็บไซต์ B. พื้นหลัง C. เผยแพร่ D. ก าหนดเอง E. ปก F. ข้าม G. แทนที่ H. รูปแบบของเว็บไซต์ I. สั่งซื ้อ J. ยินดีต้อนรับ K. พัฒนาเว็บไซต์ L. แก้ไข ตอนที่ 3 จงจับคู่ข้อความต่อไปนี้ให้สัมพันธ์กัน 1. ..................Cover 2. ..................Home Page 3. ..................Welcome 4. ..................Background 5. ..................Replace 6. ..................Customize 7. ..................Publishing 8. ..................Purchase 9. ..................Skip 10. ..................Edit