ใบความรู้การสร้างเว็บไซต์ด้วยโปรแกรม Wix

ใบความรู้
ช่อื วชิ า 30001-2003 เทคโนโลยดี จิ ิทัลเพือ่ การจดั การอาชพี
ชื่อหน่วย การทำธรุ กจิ บนส่ือสังคมออนไลน์ (Online Business)
ชื่อเรื่อง การสร้างเว็บไซต์
1. โปรแกรมวิกซ์ (Wix)
โปรแกรมวิกซ์ พัฒนาขึ้นโดย บริษัท วิกซ์ดอดคอม จำกัด ของประเทศอิสราเอล เป็นอพลตฟอร์มเว็บไซต์ที่
ให้บริการ พัฒนาเว็บไซต์บนระบบคลาวน์ ช่วยใหผ้ ู้ใช้สามารถสร้างเว็บไซต์บนคอมพิวเตอร์และโทรศพั ท์มือถือ ใช้
ภาษา HTML5 ในการสรา้ งเวบ็ เพจ โดยใช้เครื่องมือลากและวางบนออนไลน์
โปรแกรมวิกซ์เป้นเครื่องมือสำหรับสร้างเว็บไซต์ออนไลน์ สามารถสร้างงานได้หลายประเภท เช่น เว็บไซต์
ส่วนตัว เว็บไซต์ธุรกิจ แฟ้มสะสมงาน บล็อก เป็นต้น ซึ่งรูปแบบการใช้งานไม่ซบั ซอ้ น สามารถเลือก ลาก วางบน
ตำแหน่งที่ต้องการ มีเครื่องมือและฟังก์ชันมากมายให้ใช้งาน อาทิ รูปแบบ (Template) เสียง (Sound)
ภาพเคลื่อนไหว (Animation) ลักษณะพิเศษ (Effects) เป็นต้น ผู้ใช้สามารถกำหนดปรับแต่งเนื้อหาและแก้ไขได้
ด้วยตนเอง ไม่จำเป็นต้องมีความรู้หรือทักษะด้านการเขียนโค้ด โปรแกรมวิกซ์สามารถสร้างภาพเคลื่อนไหวด้วย
โปรแกรมแฟลช (Flash Animation) จากหน้าเว็บไซต์ได้โดยตรงไม่จำเป็นต้องติดตั้งโปรแกรมใดๆ รวมทั้งรองรับ
การใช้งานกับทุกอุปกรณท์ เี่ ชอื่ มต่ออนิ เตอร์เน็ต เชน่ เครื่องคอมพิวเตอร์ สมารท์ โฟน เป็นต้น
2. ขัน้ ตอนการใช้โปรแกรมวิกซ์ (Wix)
1. การลงทะเบียนเขา้ ใชง้ านโปรแกรมวกิ ซ์
(1) เขา้ ไปทเี่ ว็บไซต์ htts://www.wix.com (htts://www.th.wix.com : ภาษาไทย)

(2) คลิกปุ่ม เร่ิมเลย (Get Started) เพือ่ สร้างเวบ็ ไซต์

(1)

(2)

รปู ที่ 6.1 แสดงเข้าสโู่ ปรแกรมวิกซ์
ท่ีมา : https://th.wix.com

เอกสารประกอบการสอนวิชาเทคโนโลยธี ุรกจิ ดจิ ทิ ลั เพ่อื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพิวเตอรธ์ รุ กจิ วทิ ยาลยั เทคนคิ ศรีสะเกษ 1

(3) ปรากฎหนา้ ต่างสำหรบั ลงทะเบียน การใช้งานทำได้ 2 วธิ ี ดงั น้ี
(3.1) การลงทะเบยี นเขา้ ใชง้ านโดยใช้ทอี่ ยู่ Email
• ปอ้ นชอื่ ที่อยอู่ ีเมลในช่อง Email
• ป้อนท่ีอยู่อีเมลซำ้ อีกครง้ั เพื่อยนื ยนั ในชอ่ ง Type your email again
• กำหนดรหัสผา่ นในชอ่ ง Password
• ป้อนรหสั ผา่ นซำ้ อีกครั้ง เพื่อยืนยันในชอ่ ง Type your password again
• คลิกปุ่ม Sing Up
(3.2) การลงทะเบียนเข้าใชง้ านผ่านชองทางเฟสบุ๊ก กูเกิล หรอื แอปเปิล

(3)

3.1 3.2

รูปท่ี 6.2 แสดงลงทะเบยี นการใชง้ าน
ที่มา : https://users.wix.com/signin
หมายเหตุ : สำหรับผมู้ บี ญั ชแี ลว้ คลกิ Log in จากน้นั ปอ้ นที่อย่อู เี มลและรหสั ผ่านท่ไี ดล้ งทะเบียนไว้
และคลกิ ป่มุ Log In

2. เริม่ ตน้ การสรา้ งเวบ็ ไซต์

(1) หนา้ เร่ิมตน้ จะพบกบั ขอ้ ความ Let's bring your ideas to life. Answer some questions to get
the best tools for what you're creating. “มาทำให้ความคิดของคุณเปน็ จริง ตอบคำถามเพื่อรับเครื่องมือที่ดี
ที่สุดสำหรับสิ่งที่คุณกำลังสร้าง” เพื่อสร้างเว็บไซต์ด้วยคำถามต่างๆ จากนั้นโปรแกรมวิกซ์จะให้เลือกว่าต้องการ
ดำเนินการสร้างเว็บไซต์ของตนเองด้วย Editor หรือใช้เว็บไซต์ที่เป็นโปรแกรมวิกซ์ออกแบบให้โดยเฉพาะ ซ่ึง
สามารถปรับแต่งได้เองในภายหลัง และปุ่ม Skip เพื่อข้ามหน้านี้เข้าสู่หน้าเลือกวิธีสร้างของเว็บไซต์ (ในที่นี้คลิก
Skip)

เอกสารประกอบการสอนวชิ าเทคโนโลยีธุรกิจดิจิทลั เพอ่ื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กจิ วทิ ยาลยั เทคนคิ ศรสี ะเกษ 2

(1)

รูปท่ี 6.3 แสดงเร่มิ ต้นการสร้างเวบ็ ไซต์
ท่ีมา : https://www.wix.com/intro/site/

(2) เลอื กวธิ สี รา้ งเว็บไซต์ มี 2 วธิ ี ดงั นี้
(2.1) Let Wix ADI Create a Website for you การสรา้ งเว็บไซตผ์ า่ นการตอบคำถาม ระบบจะ

ออกแบบเวบ็ ไซตใ์ ห้โดยอตั โนมัติ
(2.2) Create You Website with the Editor เปน็ การสร้างเว็บไซต์โดยใชเ้ ท็มเพลตสำเรจ็ รูป ในที่น้ี

เลือกวิธที ่ี 2 คลกิ ปมุ่ Choose a Template

(2) (2.2)

(2.1)

รปู ท่ี 6.4 แสดงการเลอื กวิธสี รา้ งเวบ็ ไซต์ 3
ทมี่ า : https://th.wix.com/intro/site/

เอกสารประกอบการสอนวิชาเทคโนโลยีธุรกจิ ดจิ ทิ ลั เพื่องานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพิวเตอรธ์ รุ กจิ วิทยาลยั เทคนคิ ศรสี ะเกษ

(3) เลือกรูปแบบ ซึง่ โปรแกรมวิกซ์จะทำการอัปเดตรปู แบบใหม่ๆ ทงั้ แบบทีม่ คี ่าใชจ้ ่ายและแบบท่ีไม่มี
คา่ ใช้จ่าย โดยจะแบ่งเป็นประเภทตา่ งๆ ให้คลกิ รูปแบบที่ต้องการ หรือป้อนคำสำคญั เพ่ือค้นหาที่ชอ่ ง “ค้นหา”
(ในทีน่ ี้ ให้เลอื ก “สัตวเ์ ลย้ี งและสตั ว์”)

(3)

รูปที่ 6.5 แสดงการเลือกวิธีสรา้ งเวบ็ ไซต์
ท่มี า : https://th.wix.com/website/templates/html/business/pets-animals

(4) คลิกปุ่มดู (View) เพ่ือดูตัวอย่างรูปแบบ

(4)

รปู ท่ี 6.6 แสดงการคลิกปมุ่ ดู (View) เพอ่ื ดูตวั อยา่ งรปู แบบ
ท่มี า : https://th.wix.com/website-template/view/html/

(5) คลิกปุ่มแก้ไข (Edit) หากต้องการใช้งานรปู แบบนน้ั ระบบจะทำการสรา้ งหนา้ เว็บไซต์ ดงั รูปที่ 6.7
พรอ้ มปรากฎวิกซ์อีดิเตอร์ (Wix Editor) ซงึ่ มีส่วนประกอบตา่ งๆ ได้แก่ เมนดู ้านบน (Head Menu) และเมนู
ดา้ นข้าง (Side Menu)

เอกสารประกอบการสอนวชิ าเทคโนโลยธี รุ กิจดจิ ทิ ลั เพื่องานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพวิ เตอรธ์ รุ กจิ วทิ ยาลยั เทคนคิ ศรีสะเกษ 4

(5.1)

(5)

(5.2)

รปู ที่ 6.7 แสดงหนา้ เวบ็ ไซตท์ ่โี ปรแกรมวิกซส์ ร้างขึ้นและเมนูตา่ งๆ
ทมี่ า : https://editor.wix.com/html/editor/web/renderer/edit/

(5.1) เมนดู า้ นบน ประกอบด้วย

เคร่ืองมอื คำสั่ง การใชง้ าน

Page การเพ่ิมและแกไ้ ขเวบ็ เพจต่างๆ เชน่ Home, About, Contact เป็นต้น

Desktop กำหนดรูปแบบเว็บไซต์สำหรับใชง้ านบนคอมพวิ เตอร์

Mobile กำหนดรปู แบบเว็บไซต์สำหรับใช้งานบนหนา้ จอโทรศัพท์มือถือ

Site การจัดการขอ้ มูลเบ้ืองต้นในเว็บไซต์ ประกอบด้วย บันทึก ตัวอยา่ ง รับ

ขอ้ เสนอแนะ เผยแพร่ ดูเว็บไซต์ทเี่ ผยแพร่ ประวัติเว็บไซต์ ทำเวบ็ ไซต์ซ้ำ

โอนย้ายเวบ็ ไซต์ และ ออกจาก Editor

Settings การต้ังคา่ เว็บไซต์ ประกอบดว้ ย Connect Domain รับเมลบ็อกซ์ อปั เดรด

ใหก้ เู กลิ หาคุณพบ Favicon ขอ้ มลู เกีย่ วกับธุรกิจ แชรส์ อ่ื โซเชยี ล ตดิ ตาม

และวิเคราะห์ บทบาท & หน้าที่ การเข้าถงึ ใช้งานง่ายบนอุปกรณพ์ กพา เพิ่ม

ความคมชัดองรปู ภาพ หลายภาษา Error Page (404) และแคชบอรด์ ของ

ฉัน

Tools การแสดงเคร่ืองมือต่างๆ ได้แก่ Toolbar, Layers, Rulers, Gridlines และ

snap to Objects

Dev Mode โหมดพฒั นาแอปพลิเคชันดว้ ยแพลตฟอรม์ สาธารณะ Corvid ทีมเี ครื่องมือ

พัฒนาแอปพลเิ คชันบนเวบ็ ไซตส์ ำหรบั นักพฒั นามืออาชพี เชน่ Visual

Builder, front-end

เอกสารประกอบการสอนวิชาเทคโนโลยีธุรกิจดจิ ทิ ลั เพ่ืองานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพิวเตอรธ์ รุ กจิ วทิ ยาลยั เทคนิคศรีสะเกษ 5

เครอื่ งมือคำส่ัง การใชง้ าน
Help ความชว่ ยเหลอื
Upgrade สำหรบั เพิ่มประสิทธิภาพของเวบ็ ไซต์ (มคี ่าใช้จ่าย)
Hire a Partner บริการสรา้ งเวบ็ ไซตจ์ ากหุ้นส่วนวิกซ์ ไดแ้ ก่ การออกแบบเวบ็ ไซต์ การ
for You นำเสนอแบรนด์ดว้ ยกราฟกิ เว็บร้านค้าออนไลน์สำหรบั ใชง้ านข้ันสูง และ
Website การตลาดเพื่อขยาธรุ กิจ
Zoom Out & ย่อ-ขยายหนา้ เวบ็
Recorder
Undo เรียกคนื คำสง่ั
Redo ทำซำ้ คำสั่ง
Save บนั ทกึ การแก้ไขปรับปรงุ เพจ
Preview การดเู ว็บเพจในมุมมองเสมือนจริง
Publish ประกาศใชเ้ มื่อสร้างเว็บไซต์เสร็จแล้ว

(5.2) เมนดู า้ นขวา ประกอบด้วย

เคร่อื งมือคำสั่ง การใชง้ าน

Add Element การเพ่ิมองค์ประกอบ

Add Section การเพ่ิมส่วนประกอบตา่ งๆ ลงในเพจ

Menu & Page การจดั กาผรเมนูเวบ็ ไซต์ เพิม่ เพจแบบไดนามิก การเปลย่ี นผ่าน

หน้าเพจ

Site Design การออกแบบเว็บไซต์

Add Apps การส่งเสรมิ การตลาดของวกิ ซ์เพอ่ื เพิม่ เขา้ ไปในเว็บไซต์

Media การอปั โหลดรูปภาพ วดิ โี อ รูปแบบตัวอักษร และเอกสารต่างๆ

Start Blogging เรม่ิ ต้นการสร้งบลอ็ กบนเว็บไซต์

My Store ทเ่ี ก็บเพจทส่ี ร้าง

Background การออกแบบและแก้ไขรูปแบบพนื้ หลงั หน้าเว็บไซต์

เอกสารประกอบการสอนวชิ าเทคโนโลยีธรุ กิจดจิ ิทลั เพื่องานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพิวเตอรธ์ รุ กจิ วิทยาลยั เทคนิคศรีสะเกษ 6

3. การเพ่มิ ส่วนประกอบต่างๆ ลงในเว็บ
(1) ข้อความ (Text)
(1.1) การเพม่ิ ขอ้ ความ

• คลกิ ปุ่มลงข้อมูล (Add)

• เลือกรปู แบบข้อความ (Text) ที่ต้องการ ดังน้ี
➢ ธมี ข้อความ (Themed Text)
➢ ชอื่ เรอ่ื ง (Title)
➢ ยอ่ หน้า (Paragraphs)

รปู ที่ 6.8 แสดงเครื่องมือสำหรับปรับแต่งรูปแบบข้อความ
ทมี่ า : https://editor.wix.com/html/editor/web/renderer/edit/

(1.2) การแกไ้ ขรูปแบบข้อความ
• คลกิ ปุ่มแกไ้ ขข้อความ (Edit Text) จะปรากฎหน้าต่างการตัง้ ค่าข้อความ (Text Setting) และ
กรอบข้อความ เพ่ือแก้ไขขอ้ ความตามท่ีต้องการ
• เมอื่ แกไ้ ขเสร็จ คลกิ ป่มุ เคร่ืองหมายกากบาท

เอกสารประกอบการสอนวิชาเทคโนโลยธี รุ กิจดจิ ิทลั เพ่อื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กิจ วทิ ยาลยั เทคนิคศรีสะเกษ 7

รูปที่ 6.9 แสดงหนา้ ตา่ งการตั้งค่าขอ้ ความ เพ่อื แกไ้ ขข้อความและรปู แบบขอ้ ความ
ที่มา : https://editor.wix.com/html/editor/web/renderer/edit/

(1.3) การเพิ่มเอฟเฟ็กต์หรอื ข้อความเคลอ่ื นไหว
• คลกิ ปมุ่ ภาพเคลื่อนไหว คลิกเลอื กแบบท่ตี ้องการในหนา้ ต่างเลือกภาพเคล่ือนไหว
(Choose Animation)
• คลกิ ปมุ่ ปรับแตง่ (Customize) เพื่อทำการปรับแตง่ เอฟเฟ็กต์เพ่ิมเตมิ

รูปที่ 6.10 แสดงหนา้ ต่างภาพเคลอื่ นไหว เพอื่ เพม่ิ และปรบั แตง่ เอฟเฟ็กต์
ทีม่ า : https://editor.wix.com/html/editor/web/renderer/edit/

เอกสารประกอบการสอนวชิ าเทคโนโลยีธรุ กิจดจิ ิทลั เพอ่ื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพวิ เตอรธ์ รุ กิจ วิทยาลยั เทคนคิ ศรีสะเกษ 8

(1.4) การลบข้อความ
• เลอื กข้อความทต่ี ้องการลบ
• คลกิ ขวา เลอื กปุม่ ลบ (Delete) หรือกดปมุ่ Delete ที่แป้นพมิพ์

รปู ที่ 6.11 แสดงการลบข้อความ
ท่มี า : https://editor.wix.com/html/editor/web/renderer/edit/

(2) รูปภาพ (Images)

(2.1) การเพ่ิมรปู ภาพ

เลือกลงข้อมลู (Add) เลือก รปู ภาพ (Images) เลอื กได้ 3 รปู แบบ ดังนี้

• My Uploads การอัปโหลดรปู ภาพจากเคร่ืองคอมพิวเตอร์

• Image Collections การนำรปู ภาพหรือคลปิ อาร์ตทม่ี ีอยู่ในระบบวกิ ซ์

• My Social Images การนำรูปภาพจากโซเชียลมเี ดีย

กรณเี ลือก My Uploads จะปรากฎหน้าตา่ งใหเ้ ลือกรปู ภาพท่ีต้องการ ระบบจะรองรับไฟลป์ ระเภท

JPG, PNG, GIF เปน็ ต้น ทม่ี ขี นาดไฟลไ์ ม่เกนิ 15 MB

เอกสารประกอบการสอนวิชาเทคโนโลยีธุรกจิ ดจิ ิทลั เพือ่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพิวเตอรธ์ รุ กจิ วิทยาลยั เทคนิคศรีสะเกษ 9

1 3 4
2

5

7
6

8

9 11

10
รปู ที่ 6.12 แสดงขัน้ ตอนการอปั โหลดรปู ภาพจากเครือ่ คอมพิวเตอร์
ท่ีมา : https://editor.wix.com/html/editor/web/renderer/edit/

(2.2) การเปลย่ี นรูปภาพ
• คลิกที่รูปภาพ
• คลกิ ปมุ่ เปล่ยี นรูปภาพ (Chang Images) จากน้ันเลอื กรปู ภาพใหม่ทต่ี ้องการ

เอกสารประกอบการสอนวิชาเทคโนโลยีธรุ กจิ ดิจทิ ลั เพื่องานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพิวเตอรธ์ รุ กิจ วทิ ยาลยั เทคนิคศรสี ะเกษ 10

• คลิกปุ่มเลือกรูปภาพ (Choose Images) เพือ่ เพ่ิมรูปภาพเข้าหน้าเวบ็ ไซต์

1
2

4

3 5
6

8

7

รปู ท่ี 6.13 แสดงขน้ั ตอนการเปลย่ี นรปู
ที่มา : https://editor.wix.com/html/editor/web/renderer/edit/

เอกสารประกอบการสอนวชิ าเทคโนโลยธี ุรกิจดิจทิ ลั เพอื่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กจิ วิทยาลยั เทคนคิ ศรสี ะเกษ 11

4. การออกแบบและแกไ้ ขรูปพ้นื หลงั ของหนา้ เว็บไซต์ (Page Background)
(1) คลกิ ปุ่มพน้ื หลัง (Background)
(2) การเปล่ยี นสีพ้นื หลัง คลกิ ปมุ่ สี (Color) จะปรากฎหนา้ ต่างตัวเลอื กสี (Color Picker) จากน้นั เลอื กโทนสีท่ี

ต้องการ โปรแกรมวิกจะแสดงสีบนหนา้ เว็บไซต์เปน็ สที ี่เปลี่ยนโดยอัตโนมัติ

2
1

รปู ท่ี 6.14 แสดงขน้ั ตอนการเปลยี่ นพน้ื หลงั
ทมี่ า : https://editor.wix.com/html/editor/web/renderer/edit/

(3) การอปั โหลดรูปภาพเปน็ พื้นหลงั คลิกปุ่มรปู ภาพ (Image) แล้วเลอื กรปู ภาพทตี่ ้องการ

รปู ที่ 6.15 แสดงขั้นตอนการอปั โหลดรปู ภาพพน้ื หลัง
ทมี่ า : https://editor.wix.com/html/editor/web/renderer/edit/

เอกสารประกอบการสอนวิชาเทคโนโลยธี ุรกจิ ดจิ ทิ ลั เพือ่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กิจ วทิ ยาลยั เทคนิคศรสี ะเกษ 12

(4) การต้ังคา่ พน้ื หลังเปน็ วิดโี อ (Video) จะปรากฎหนา้ ตา่ งเลือกวิดีโอสำหรับพ้ืนหลังของคณุ (Choose a
Video for You Background) คลิกปุม่ อัปโหลดสอ่ื (Upload Media) เลือกไฟลว์ ิดโี อท่ตี อ้ งการ ระบบจะ
รองรับไฟล์ประเภท MP4, MOV, WebM เป็นตน้ ทม่ี ขี นาดไฟล์ไม่เกิน 50 MB และขนาดความละเอียดสูงสดุ
ของวดิ โี ออย่ทู ่ี 1920 x 1080 (Full HD) เมื่ออัปโหลดเสรจ็ แล้ว คลกิ ปมุ่ เปลี่ยนพื้นหลงั (Change Background)

(5) การใช้รูปภาพพ้นื หลังทอ่ี ยใู่ นระบบ คลกิ ไฟลว์ ิดีโอหรือรปู ภาพท่ีต้องการในช่องพ้นื หลังท่ีได้เลอื กไป
(Selected Background) แล้วคลกิ ปุ่มนำไปใช้กับหนา้ เพจอน่ื (Appy to Other Pages) และคลิกหนา้ เพจท่ี
ตอ้ งการนำพน้ื หลงั ไปใช้

รปู ท่ี 6.16 แสดงขั้นตอนการตง้ั ค่าพ้นื หลงั เป็นไฟลว์ ิดีโอ
ทมี่ า : https://editor.wix.com/html/editor/web/renderer/edit/

5. การดูตวั อย่างและบันทึก (Preview & Save) หนา้ เว็บไซต์
(1) คลกิ ปุ่มตัวอยา่ ง (Preview) เพ่ือดภู าพรวมก่อนใชง้ านจรงิ หากต้องการแกไ้ ข คลิกกลบั ไปท่ี Editor (Back

to Editor)
(2) คลกิ ปุ่มบนั ทึก (Save) เพื่อบันทกึ หน้าเว็บไซต์ จะปรากฎหน้าต่าง (Choose a Domain to save your

site) เพื่อเลือกการกำหนดโดเมน (Domain) ดังน้ี
• Get a Free Wix.com domain คอื การใชโ้ ดเมนฟรีของระบบวกิ ซ์ ตง้ั ชื่อโดเมนได้
• Connect your own customized domain คือ การเชอื่ มตอ่ โดเมนท่กี ำหนด รายละเอียดตา่ งๆ เอง

(3) คลกิ ปุ่มบนั ทึกและดำเนนิ การต่อ (Save & Continue) เพอื่ บันทกึ โดเมนของเวบ็ ไซต์
(4) หากต้องการแก้ไขชื่อโดเมน คลิกทป่ี ุม่ แก้ไข (edit) เสรจ็ แล้วคลิกปมุ่ เสร็จ (Done)

เอกสารประกอบการสอนวิชาเทคโนโลยธี รุ กจิ ดจิ ิทลั เพือ่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กิจ วทิ ยาลยั เทคนิคศรสี ะเกษ 13

รูปท่ี 6.17 แสดงขนั้ ตอนการการดตู วั อยา่ งหนา้ เว็บไซต์
ทม่ี า : https://editor.wix.com/html/editor/web/renderer/edit/

รปู ท่ี 6.18 แสดงขั้นตอนการการบนั ทกึ เวบ็ ไซต์
ที่มา : https://editor.wix.com/html/editor/web/renderer/edit/

6. การอปั โหลดแบบอักษร (Font) เพ่ือนำไปใชง้ านบนเวบ็ ไซต์
กรณตี ้องการใช้แบบอกัษรที่ไมม่ ีในโปรแกรมวิกซ์ สามารถอัปโหลดแบบอักษรเพ่มิ ไดต้ ามขัน้ ตอนต่อไปนี้
(1) คลิกขอ้ ความทต่ี ้องการเปล่ยี นแบบอกั ษร คลิกปุ่มแก้ไขข้อความ (Edit Test)
(2) ทหี่ วั ข้อแบบอกั ษร (Fonts) ให้คลิกสญั ลักษณ์ แลว้ คลกิ ปุ่มอปั โหลดฟอนต์ (Upload Fonts)

เอกสารประกอบการสอนวชิ าเทคโนโลยธี ุรกจิ ดิจิทลั เพอ่ื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพวิ เตอรธ์ รุ กจิ วิทยาลยั เทคนิคศรีสะเกษ 14

(3) ปรากฎหน้าต่างจดั การแบบอักษรของคณุ (Manage Your Fonts) คลกิ ปุ่มอัปโหลดฟอนต์ (Upload
Fonts)

(4) เลือกฟอนต์ที่ตอ้ งการอัปโหลด และคลกิ ปมุ่ เปิด (Open)
(5) เมื่ออปั โหบดเสรจ็ คลิกปุ่มเสร็จ (Done)
(6) นำแบบอักษรมาใชโ้ ดยคลิกสญั ลักษณ์ ทหี่ ัวข้อแบบอักษร (Fonts) แบบอักษรท่ีอปั โหลดจะปรากฎอยู่
ด้านบนสดุ ในหวั ข้อ My Fonts สามารถคลิกใชง้ านไดท้ นั ที

(1) (2)

(3)

(4)

(5)

เอกสารประกอบการสอนวิชาเทคโนโลยธี รุ กิจดิจทิ ลั เพอื่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพวิ เตอรธ์ รุ กจิ วทิ ยาลยั เทคนคิ ศรีสะเกษ 15

(6)

รูปท่ี 6.19 แสดงขั้นตอนการอปั โหลดแบบอักษร (Font) เพ่อื นำไปใชง้ านบนเวบ็ ไซต์
ทีม่ า : https://editor.wix.com/html/editor/web/renderer/edit/

7. การเพิม่ และแก้ไขเมนใู นโปรแกรม Wix
การเปลยี่ นชื่อเมนู
คลิกปมุ่ หน้าเพจและเมนู (Page&Menu) ทำการเลือกเมนูท่ีจะเปล่ยี นชือ่ โดยคลิกท่ีปุ่มจุดไข่ปลา 3 จุด
“...” จากนั้นเลือก “ตง้ั ช่ือใหม่” แลว้ คลิก “เสร็จ”

รปู ท่ี 6.20 แสดงข้นั ตอนการ การเปลยี่ นชือ่ เมนู

ทม่ี า : https://editor.wix.com/html/editor/web/renderer/edit/

เอกสารประกอบการสอนวิชาเทคโนโลยธี รุ กจิ ดจิ ิทลั เพอ่ื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวชิ าคอมพิวเตอรธ์ รุ กจิ วิทยาลยั เทคนิคศรีสะเกษ 16

การแก้ไขเนื้อหา
คลิกปุม่ หน้าเพจและเมนู (Page&Menu) ทำการเลอื กเมนูทีจ่ ะแก้ไข

รูปที่ 6.21 แสดงขั้นตอนการแกไ้ ขเนอื้ หา
ที่มา : https://editor.wix.com/html/editor/web/renderer/edit/

การเพ่ิมพ้ืนที่
เป็นการเพ่ิมพ้นื ทีเ่ พ่ือใสเ่ น้ือหา โดยการคลิก ค้างไว้ แล้วเลือ่ นปรบั ขนาดทตี่ อ้ งการ (สังเกตกุ รอบสี

นำ้ เงิน)

รูปท่ี 6.22 แสดงขนั้ ตอนการเพิ่มพืน้ ท่ี
ที่มา : https://editor.wix.com/html/editor/web/renderer/edit/

การเพิ่มเนื้อหา
การเพ่ิมเน้ือหา สามารถเพิ่มไดห้ ลายรูปแบบ อทเิ ชน่ ข้อความ รปู ภาพ วดิ ีโอ เป็นตน้ โดยการคลิก

เครือ่ งหมาย + “เพิม่ องค์ประกอบ”

เอกสารประกอบการสอนวิชาเทคโนโลยธี รุ กิจดจิ ทิ ลั เพือ่ งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพวิ เตอรธ์ รุ กจิ วทิ ยาลยั เทคนคิ ศรสี ะเกษ 17

รูปที่ 6.23 แสดงข้นั ตอนการเพิ่มเน้อื หา ด้วย วิดโี อ
ทีม่ า : https://editor.wix.com/html/editor/web/renderer/edit/

7. การเผยแพร่เว็บไซต์ (Publish)
(1) คลกิ ปุ่มเผยแพร่ (Publish) ระบบจะทำการประมวลผลสักครู่
(2) ปรากฎหน่างแสดงความยินดี (Congratulations) หากตอ้ งการดเู ว็บไซต์ คลกิ ปุ่มดเู ว็บไซต์ (View Site)
(3) คลิกปุ่มเสรจ็ (Done) เป็นการเผยแพร่เว็บไซตเ์ สร็จสมบูรณ์

รปู ท่ี 6.24 แสดงขนั้ ตอนการการเผยแพร่เว็บไซต์ (Publish) และ URL ทีส่ ามารถเผยแพรไ่ ดใ้ นโลกของอินเทอรเ์ นต็
ทม่ี า : https://editor.wix.com/html/editor/web/renderer/edit/

เอกสารประกอบการสอนวชิ าเทคโนโลยธี รุ กจิ ดจิ ิทลั เพ่อื งานอาชพี 30001-2003 ครูผสู้ อน นางวราดา ขนั ตี แผนกวิชาคอมพิวเตอรธ์ รุ กจิ วิทยาลยั เทคนคิ ศรีสะเกษ 18