1
2 1. การเพิ่มส่วนนําเรื่อง ส่วนนําเรื่อง เป็นบล็อกรูปแบบที่สามารถนําไปวางไว้ส่วนใดของหน้าเว็บไซต์ก็ได้ ส่วนใหญ่จะใช้วาง รูปภาพ หรือ วางไว้ส่วนท้ายของเว็บไซต์ในการบอกสถานที่ติดต่อหรือใช้ในการใส่ปุ่มเครื่องมือเพื่อเชื่อมโยงไป ยังหน้าต่าง ๆ ของเว็บไซต์ หรือเว็บไซต์อื่น ๆ หน้าเว็บไซต์แต่ละหน้า ประกอบด้วย 3 ส่วน คือ ส่วนที่เป็น Heading (หัวข้อเรื่อง) ส่วนที่เป็น Body (เนื้อหา) และส่วนที่เป็น Footer (ส่วนท้าย) ในกรณีนี้จะเป็นการเพิ่มส่วนนําเรื่องของส่วนท้าย (Footer) โดยมี วิธีปฏิบัติ ดังนี้ 1.1 คลิกที่ เพิ่มบล็อก ในส่วนที่อยู่ด้านท้ายของหน้าเว็บ 1.2 ค้นหาคําว่า Hero คลิกที่ ส่วนนําเรื่อง
3 1.3ปรากฏส่วนนําเรื่อง ซึ่งจะประกอบด้วยหัวเรื่อง เนื้อหาและปุ่มเครื่องมือ ปุ่มหลัก (Primary button) และปุ่มรอง (Secondary button) 1.4 คลิกที่ Add background image (เพิ่มภาพพื้นหลัง) 1.5 ปรากฏรูปภาพที่เคยอัปโหลดไว้แล้ว 1.6 ถ้าต้องการรูปภาพใหม่ ให้ คลิกที่ Add new (เพิ่มใหม่)
4 1.7 เลือกรูปภาพที่ต้องการ เสร็จแล้วคลิกที่ Open 1.8 คลิกที่ เพิ่ม 1.9 ปรากฏภาพพื้นหลังตามต้องการ 1.10 พิมพ์หัวข้อเรื่อง ในที่นี้คือ สนใจติดต่อสอบถาม
5 1.11 ในส่วนของเนื้อหา ให้พิมพ์รายละเอียดเกี่ยวกับการติดต่อ 2. การสร้างความเชื่อมโยงให้กับข้อความ การสร้างความเชื่อมโยง (Hyperlink) ให้กับข้อความเพื่อไปยังเว็บไซต์ต่าง ๆ มีวิธีปฏิบัติดังนี้ 2.1 คัดลอก URL ที่ต้องการ 2.2 ทําแถบสีคลุมข้อความที่ต้องการสร้างความเชื่อมโยง 2.3 คลิกเครื่องมือ ลิงก์ (Link) หรือกดปุ่ม Ctrl+K
6 2.4 คลิกในกรอบ โปรดกรอกฟิลด์นี้ 2.5 คลิกเมาส์ข้างขวาเลือก วาง (Paste) 2.6 ปรากฏ URL ที่ได้คัดลอกไว้ 2.7 คลิกที่ เปิดในแท็บใหม่
7 2.8 คลิกที่ ENTER เพื่อเพิ่มลิงก์นี้ 2.9 ปรากฏเส้นใต้ข้อความที่สร้างความเชื่อมโยง ดังภาพ 3. การสร้างความเชื่อมโยงให้กับปุ่มเครื่องมือ การสร้างความเชื่อมโยงให้กับปุ่มเครื่องมือ มีวิธีปฏิบัติดังนี้ 3.1 เปลี่ยนชื่อปุ่มเครื่องมือ ดังนี้ ปุ่มหลัก เปลี่ยนเป็น Facebook Page และปุ่มรอง เปลี่ยนเป็น YouTube 3.2 คลิกที่ ปุ่มเครื่องมือที่ต้องการ ในที่นี้คือ Facebook Page เสร็จแล้วคลิกที่เครื่องมือ ลิงก์ 3.3 คัดลอก URL ที่ต้องการ มาวางไว้ในช่อง และ กําหนดให้เปิดในแท็บใหม่ และคลิกที่ กด ENTER เพื่อเพิ่ม ลิงก์นี้
8 3.4 คลิกปุ่ม YouTube 3.5 คลิกเครื่องมือ ลิงก์ (Link) 3.6 นํา URL ของวิดีโอช่อง YouTube ที่ต้องการ มาวางไว้ กําหนดให้เปิดในแท็บใหม่ และคลิกที่ กด ENTER เพื่อเพิ่มลิงก์นี้ 3.7เมื่อสร้างความเชื่อมโยงเรียบร้อยแล้วจะปรากฏดังภาพ
9 3.8 คลิกที่ อัปเดต 3.9 คลิกที่ ดูก่อน 3.10 คลิกที่ Preview in new tab 3.1.1 ปรากฏดังภาพ 3.12 ทดสอบการใช้งานของการเชื่อมโยงที่ได้ทําไว้ ในรูปแบบของข้อความ
10 และปุ่มเครื่องมือ 4. การปรับรูปแบบการเชื่อมโยง การปรับรูปแบบการเชื่อมโยง มีวิธีปฏิบัติดังนี้ 4.1 คลิกที่ ตัวเลือก (Option) 4.2 คลิกที่ Show more settings 4.3 ปรากฏหน้าต่าง บล็อก
11 4.4 ทำแถบสีคลุมข้อความที่ได้ร้างความเชื่อมโยงไว้ 4.5 ปรับรายละเอียดตามต้องการ
12 4.6 ปรับสีอักษร สีพื้นหลัง และสีLink Color (สีของการเชื่อมโยง) 5. การดูตัวอย่าง การดูตัวอย่างเพื่อทดสอบเว็บไซต์ว่าจะปรับปรุงแก้ไขเพิ่มเติมอย่างไร โดยมีวิธีปฏิบัติดังนี้ 5.1 อัปเดต 5.2 คลิกที่ ดูก่อน
13 5.3 คลิกที่ Preview in new tab (ดูตัวอย่างใน หน้าใหม่) 5.4 คลิกหน้าที่ต้องการ ในที่นี้คลิกที่เมนูหน้าโฮมเพจชื่อ Siwatshop2020 5.5 ปรากฎหน้าเว็บไซต์ที่ต้องการ แล้วทดสอบคลิกเมนูต่าง ๆ อีกครั้ง ได้แก่ Blog Gallery Contact 5.6 ถ้าต้องการกลับไปแก้ไขเว็บไซต์ ให้คลิกที่ เขียน
14 6. การเข้าเว็บไซต์ การทดสอบเว็บไซต์ สามารถทดสอบในเครื่องคอมพิวเตอร์ แท็บเล็ต โทรศัพท์มือถือ เพื่อที่จะได้ทราบว่า จะปรับปรุงแก้ไขเพิ่มเติมอย่างไร โดยมีวิธีการเข้าเว็บไซต์ ดังนี้ 6.1 ป้อนชื่อเว็บไซต์ในส่วนของ Address 6.2 ปรากฏหน้าเว็บไซต์ 6.3 คลิกเมนู Gallery 6.4 ปรากฏหน้า Gallery
15 ในกรณีทีดูเว็บไซต์ด้วยโทรศัพท์มือถือ จะปรากฏดังภาพ ซึ่งสังเกตว่า ตัวอักษรอาจจะไม่พอดีกับหน้าจอ ให้แก้ไข ดังนี้ 1) เข้าสู่หน้าเว็บไซต์ 2) คลิกที่ แก้ไข (Edit)
16 3) ทําแถบสีคลุมข้อความที่ต้องการ 4) คลิกที่ ตัวเลือก 5) คลิกที่ Show more settings 6) กําหนดขนาดตัวอักษรที่ ขนาด ตัวอักษร
17 7) ในที่นี้ปรับให้เป็น ใหญ่มาก 8) รูปแบบข้อความที่แก้ไขแล้ว 9) คลิกที่ อัปเดต
18 เข้าดูเว็บไซต์ด้วยโทรศัพท์มือถืออีกครั้ง จะปรากฏดังนี้ สรุปประเด็นสำคัญ ส่วนเรื่อง เป็นบล็อกรูปแบบที่สามารถนําไปวางไว้ส่วนใดของ หน้าเว็บไซต์ก็ได้ ส่วนใหญ่จะใช้วางรูปภาพ หรือ วางไว้ส่วนท้ายของ เว็บไซต์ในการบอกสถานที่ติดต่อหรือใช้ในการใส่ปุ่มเครื่องมือเพื่อ เชื่อมโยงไปยังหน้าต่าง ๆ ของเว็บไซต์หรือเว็บไซต์อื่นๆ หน้าเว็บไซต์แต่ละหน้า ประกอบด้วย 3 ส่วน คือ ส่วนที่เป็น Heading (หัวข้อเรื่อง) ส่วนที่เป็น Body (เนื้อหา) และส่วนที่เป็น Footer (ส่วนท้าย)
19 กิจกรรมเสนอแนะ 1. ให้ผู้เรียนสร้างไลน์ (LINE) เพื่อใช้ในการติดต่อ ซื้อขายสินค้า และกําหนด LINE ID แล้ว นําเสนอผู้สอน 2. ให้ผู้เรียนสร้าง Facebook Page ที่จะใช้ในการติดต่อซื้อขายสินค้า แล้วนําเสนอผู้สอน Web Guide https://tumweb.co/WordPress-beginners/ https://www.themevilles.com/teach-WordPress/ https://bit.ly/3mOgaON เกร็ดความรู้ สิ่งจําเป็นในการเริ่มต้นสร้างบล็อก WordPress คือ เว็บโฮสต์สําหรับการวางไฟล์ไซต์บนเซิร์ฟเวอร์ เซิร์ฟเวอร์ที่ใช้ร่วมกัน จะทํางานได้ดีสําหรับบล็อกขนาดเล็ก แต่อาจต้องใช้โฮสติ้ง (Hosting) ที่มีประสิทธิภาพ มากขึ้นหากวางแผนที่จะขยายเว็บไซต์ ชื่อโดเมนหรือชื่ออินเทอร์เน็ตและที่อยู่ URL สําหรับบล็อก คือ วิธีที่ นิยมใช้ทางออนไลน์ ตัวอย่างชื่อโดเมน คือ ecommerce platforms.com บางครั้งสามารถรับชื่อโดเมนฟรี จากโฮสต์ได้ ใน WordPress เวอร์ชันล่าสุด ระบบจัดการเนื้อหาที่ใช้ในการออกแบบบล็อกของคุณและสร้างบทความใน บล็อก ธีม WordPress ที่สร้างขึ้นสําหรับการเขียนบล็อก ธีมจะแตกต่างกันไปตามราคา (หลายรายการ ให้บริการฟรี) แต่จําเป็นสําหรับการออกแบบไซต์และทําให้ไซต์สวยงาม โดยพื้นฐานแล้วไม่จําเป็นต้องเป็นนัก ออกแบบเว็บไซต์ขั้นสูงหากใช้ธีม QR-Code หน่วยที่ 9 การเพิ่มส่วนนําเรื่องและการเชื่อมโยง
20 ใบงานที่ 9 ใบงานที่ 9.1 เรื่อง การเพิ่มส่วนนําเรื่อง คําชี้แจง ให้ผู้เรียนจัดทําส่วนนําเรื่องไว้หน้าติดต่อเรา (Contact us) หรือหน้าใดหน้าหนึ่ง เพื่อนําเสนอลูกค้าเกี่ยวกับข้อมูล ที่จะใช้ในการติดต่อ พร้อมทั้งนําการเชื่อมโยงไปยัง Facebook Page และ LINE แล้วนําเสนอผู้สอน ใบงานที่ 9.2 เรื่อง การสร้างปุ่มเครื่องมือ คําชี้แจง ให้ผู้เรียนสร้างปุ่มเครื่องมือเพื่อเชื่อมโยงไปยัง Facebook Page และช่องรีวิวสินค้าทางช่อง YouTube ไว้หน้าใด หน้าหนึ่ง หรือหน้าแรกของเว็บไซต์ แล้วนําเสนอผู้สอน การประเมินผล การประเมินและรายการประเมิน 5=ดีเยี่ยม 4 = ดีมาก 3 = ดี2 = พอใช้1=ไม่ผ่าน ลำดับ รายการประเมิน เกณฑ์การประเมิน 5 4 3 2 1 1 พฤติกรรมการทํางาน 2 การตรงต่อเวลา 3 ความคิดสร้างสรรค์ 4 ความถูกต้องและน่าสนใจ 5 เทคนิคการนําเสนอ/ตอบข้อซักถาม รวม ข้อเสนอแนะ
21 ONLINE TEST แบบทดสอบหลังเรียน ตอนที่ 1 จงทําเครื่องหมายกากบาท (X) ลงหน้าข้อที่ถูกต้องที่สุด 1. ข้อใดหมายถึงส่วนท้าย ก. Heading ข. Body ค. Footer ง. Blog . จ. Title 2. Primary button หมายถึงปุ่มใด ก. ปุ่มหลัก ข. ปุ่มรอง ค. ปุ่มสําคัญ ง. ปุ่มหน้า จ. ปุ่มท้าย 3. Secondary button หมายถึงปุ่มใด ก. ปุ่มหลัก ข. ปุ่มรอง ค. ปุ่มสําคัญ ง. ปุ่มหน้า จ.ปุ่มท้าย
22 4. ข้อใดหมายถึงเครื่องมือ Add background image ก. ข. ค. ง. จ. 5. Hyperlink หมายถึงเครื่องมือใด ก. การแทรกภาพ ข. การแทรกตาราง ค. การใส่ข้อความ ง. การสร้างบล็อก จ. การสร้างความเชื่อมโยง 6. เครื่องมือใดใช้ในการเชื่อมโยง ก. ข. ค. ง. จ. 7. แป้นใดใช้แทนเครื่องมือ ลิงก์ (Link) ก. Ctrl+K ค. Ctrl+L จ. Ctrl+N ข. Ctrl+M
23 ง. Ctrl+O 8. การดูตัวอย่างเว็บไซต์จะต้องทําสิ่งใดก่อน ก. บันทึก ข. ไปที่เว็บของฉัน ค. อัปเดต ง. สลับร่าง จ. ดูก่อน 9. Link Color หมายถึงข้อใด ก. สีตัวอักษร ข. สีพื้นหลัง ค. สีปรับแต่ง ง. สีการเชื่อมโยง จ. สีเส้นขอบ 10. ชื่อเว็บไซต์ตามข้อใดถูกต้อง ก. www.shop.WordPress.com ข. www.shop.WordPress.org ค. www.shop.WordPress.or.th ง. www.WordPress.shop.com จ. www.WordPress.shop.org
24 ตอนที่ 2 จงเติมคําหรือข้อความลงในช่องว่างต่อไปนี้ให้ถูกต้อง 1. ส่วนนําเรื่อง คือ……………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 2. หน้าเว็บไซต์แต่ละหน้าประกอบด้วย..............ส่วน คือ……………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 3. การเพิ่มส่วนนําเรื่องของส่วนท้าย (Footer) มีวิธีปฏิบัติ ดังนี้……………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 4. การสร้างความเชื่อมโยง (Hyperlink) ให้กับข้อความเพื่อไปยังเว็บไซต์ต่าง ๆ มีวิธีปฏิบัติ ดังนี้……………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 5. การสร้างความเชื่อมโยงให้กับปุ่มเครื่องมือ มีวิธีปฏิบัติ ดังนี้……………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………
25 6. การปรับรูปแบบการเชื่อมโยง มีวิธีปฏิบัติ ดังนี้……………………………………………………………………………………………………………………………………… ……..…………………………………………………………………………………………………………………………………… …………….……………………………………………………………………………………………………………………………… 7. การดูตัวอย่างเพื่อทดสอบเว็บไซต์ว่าจะปรับปรุงแก้ไขเพิ่มเติมอย่างไร มีวิธีปฏิบัติ ดังนี้……………………………………………………………………………………………………………………………………… ……..…………………………………………………………………………………………………………………………………… …………….……………………………………………………………………………………………………………………………… 8. การทดสอบเว็บไซต์ มีวิธีการเข้าเว็บไซต์ ดังนี้……………………………………………………………………………………………………………………………………… ……..…………………………………………………………………………………………………………………………………… …………….……………………………………………………………………………………………………………………………… 9. ในกรณีที่ดูเว็บไซต์ด้วยโทรศัพท์มือถือ จะปรากฏภาพ ซึ่งสังเกตว่าตัวอักษรอาจจะไม่พอดีกับ หน้าจอ มีวิธีการแก้ไข ดังนี้……………………………………………………………………………………………………………………………………… ……..…………………………………………………………………………………………………………………………………… …………….……………………………………………………………………………………………………………………………… 10. การปรับขนาดตัวอักษร มี ดังนี้……………………………………………………………………………………………………………………………………… ……..…………………………………………………………………………………………………………………………………… …………..….……………………………………………………………………………………………………………………………
26 ตอนที่ 3 จงจับคู่ข้อความต่อไปนี้ให้สัมพันธ์กัน 1. ............Body A. ทําสําเนา 2. ..……….Footer B. เป็นหลัก 3. ………….Hero C. ปุ่มเครื่องมือ 4. .............Buttons D. ดูตัวอย่าง 5. ..............Primary E. การเชื่อมโยง 6. ..............Secondary F. การตั้งค่า 7. …………..Hyperlink G. เนื้อหา 8. …………..Paste H. ตัวเลือก 9. …………..Preview I. ส่วนนำเรื่อง 10. ..............Option J. วาง K. ส่วนท้าย L. เป็นรอง