บทท่ี 3 การสราง WebSite แบบมืออาชีพดวย Wix.com

3.1 รูจัก Wix.com 3.2 การสมัครใชงาน 3.3 ข้ันท่ี 1. เลือก template 3.4 ข้ันท่ี 2 การเพ่ิมหนา Web 3.5 ข้ันท่ี 3 การตกแตงหนา Web 3.6 ข้ันท่ี 4 การเพ่ิม Component ลงในหนา Web 3.7 ข้ันท่ี 5 Wix App Market 3.8 ข้ันท่ี 6 การปรับขอมูลใน Web Site 3.9 ข้ันท่ี 7 การบันทึกและประกาศใชงาน

3.1 รูจัก Wix.com

Wix.com เปน Web Site ท่ีตั้งข้ึนมาเพ่ือเปน Hosting เปนจุดประสงคหลัก แตดวยสภาวะการแขงขันท่ีสูงมาก จึงทําใหทาง WIx.com ตองมีเครื่องมือท่ีจะดึงดูดลูกคาใหเขามาใชงาน Web Hosting ของตน จึงเปนท่ีมาของการสรางเครื่องมือท่ีชวยในการสราง Web โดยใชแนวความคิด Cloud Base Web Development ซ่ึงจะเนนในดานความสะดวก เขาใจงาย เปนหลัก

รูปท่ี 3.1 Wix.com

27

3.2 การสมัครใชงาน การใชงาน Wix.com มีข้ันตอนงายนิดเดียว เพียงแคเรามี e-Mail ใดๆ ก็สามารถสมัครเขาใชงานไดทันที หรือเราสามารถท่ีจะ Login ผาน Facebook ได (เราตองเปดเขาใชงาน Face Book ในเครื่องนั้นกอน)

รูปท่ี 3.2 การสมัครใชงาน 3.3 ข้ันท่ี 1. เลือก Template หลังจากท่ีเราผานข้ันตอนการ Login แลว ข้ันตอนถัดมาคือเราสามารถท่ีจะสราง Web Site ของเราได โดยเราสามารถสรางจาก Template ท่ีทาง Wix.com มีให หรือจะสรางเอง(เลือก Blank)ก็ไดเชนกัน

รูปท่ี 3.3 เลือก Template

28

ซ่ึง Template ของ Wix.com นั้นจะมรมาใหมเรื่อย ๆ มีท้ังแบบมีคาใชจายและแบบท่ีไมมีคาใชจาย โดยจะแบงเปนประเภทตาง ๆ ดังภาพดานลาง

เม่ือเราเลือก Template ท่ีถูกใจไดแลว ระบบของ “รูปแบบ จะทําการ Generate หนา Web

ของเรา เม่ือเสร็จแลวจะไดผลดังภาพดานลางซ่ึงเรียกวา Wix Editor

รูปท่ี 3.4 รูปแบบTemplate

29

ในสวนของ Wix Editor จะมีสวนประกอบตาง ๆ ดังนี้ 1. สวน Head Menu – ประกอบดวย เมนูดานซาย และขวา

a. เมนูดานซาย i. Desktop Editor เปนการเลือกแสดงหนาจอการแกไขเพ่ือแสดงผลบนเครื่อง

คอมพิวเตอร ii. Mobile Editor เปนการเลือกแสดงหนาจอการแกไขเพ่ือแสดงผลบนมือถือ iii. Navigator เปนการเลือหนา Web Page ท่ีเราจะแกไข(ในกรณีท่ี Web เรามี

หลายหนา) b. เมนูขวา

i. ปุมการจัดหนา Web เบื้องตน ii. ปุม Preview สําหรับดู Web Page ในมุมมองเสมือนจริง iii. Save สําหรับบันทึกการแกไขปรับปรุง Page iv. Publish สําหรับประกาศใชเม่ือ Web Site เสร็จแลว v. Upgrade สําหรับเพ่ิมประสิทธิภาพของ Web (มีคาใชจาย)

รูปท่ี 3.5 ในสวนของ Wix Editor

2. สวน Side Menu ในสวนนี้เปนเสมือนเครื่องมือหลักท่ีใชในการสราง Web โดย Site Menu นี้จะอยูทางดานซายมือ มี Function ตาง ๆ ดังนี้ Pages - คือการเพ่ิม ลบ แกไข Web Page ตางๆ Design - คือการออกแบบและแกไขพวก ส ีรูปแบบพ้ืนหลัง Add - สําหรับการเพ่ิม Component ตาง ๆ ลงใน Page App Market - สําหรับเพ่ิม App ทางการทําการตลาดแบบออนไลน Settings - สําหรับตั้งคาตาง ๆ ใน Web Site

30

รูปท่ี 3.6 สวน Side Menu

3.4 ข้ันท่ี 2 การเพ่ิมหนา Web เม่ือเราเลือก Template ท่ีถูกใจไดแลว บาง Template จะมีมาใหหลาย Page บาง Template ก็มีแคหนาเดียว ถาเราตองการท่ีจะเพ่ิมหนา Page ใหม สามารถทําไดโดยการกด Add Page

รูปท่ี 3.7 การเพ่ิมหนา Web

31

ถาเราตองการจะทําการตั้งคาในหนา Page ใด ๆ ใหกดท่ีเครื่องหมาย จะปรากฎหนาจอดังนี้

รูปท่ี 3.8 การตั้งคาในหนา Page Page Name คือ ชื่อของหนานั้นๆ Page Address คือ Link ท่ีจะให Page อ่ืนเชื่อมโยงไปหา Hide form menu คือการไมแสดงชื่อ Page ใน Menu Bar Set as home page การตงคาใหหนานี้เปน Page แรกของ Web ของเรา Protect Page ถาเลือกขอนี้จะมีการปองกันการเขาถึงหนานี้โดยมีการใส Password ในการเขาถึง SEO Page Setting มีไวสําหรับให Search Engine ท้ังหลายสามารถคนหาขอมูลในหนานั้น ๆ ไดโดยงาย โดยเราตองใสขอมูลสําหรับ SEO ดังนี้ (จะกลาวถึงโดยละเอียดในสวนของ SEO ในภายหลัง) Page Title - ใสขอมูลหัวขอของ Web เรา เชน ชื่อ Web Site ของเรา ชื่อธุรกิจ ชื่อองคกร เชน James Edward/Photograph/London

32

Page Description - คําอธิบายรายละเอียดใน WebSite ของเราในรูปแบบประโยค Keywords - เปนการใสคําสําคัญท่ีเก่ียวของกับ Web Site ของเรา การเพ่ิมหนาใหม ในกรณีท่ีเพ่ิมหนาใหม หลังจากท่ีเรากด Add Page แลวจะปรากฎหนาจอดังนี้

รูปท่ี 3.9 การเพ่ิมหนาใหม

ในสวนของ Page Layouts จะมี Template ของ Page ใหเลือก โดยทางดานซายมือจะแสดง

รูปแบบของแตละ Template ให เม่ือเลือกแลวเราตองต้ังชื่อ Page ของเราในชอง Name your Page : ถาเราตองการใหหนานั้น ๆ เปนหนายอย ใหเลือก Add as sub page 3.5 ข้ันท่ี 3 การตกแตงหนา Web ถาเราไมถูกใจสีสันของ Template ท่ีเราเลือก เราสามารถปรับแตงไดตามใจชอบ โดยสามารถทําไดในสวนตาง ๆ ไดแก พ้ืนหลัง(Background) สCีolor) และรูปแบบอักษร(Font)

33

รูปท่ี 3.10 การตกแตงหนา Web

34

3.6 ข้ันท่ี 4 การเพ่ิม Component ลงในหนา Web Component ตางๆ ท่ีจําเปนตอการสราง Web สามารถทําไดโดยงาย โดยการเลือก Add บน Side Menu ดังภาพ ซ่ึงจะมีประเภทตาง ๆ ดังนี้

รูปท่ี 3.11 การเพ่ิม Component ลงในหนา Web 4.1 Text ไดแกการเพ่ิมประโยค ลงใน Web Page ของเรา โดยสามารถเลือกได ท้ังแบบเปนคํา ๆ และเปนประโยค

รูปท่ี 3.12 การเพ่ิม Text

35

4.2 Image การเพ่ิมรูปภาพลงใน Web Page สามารถทําไดท้ัง รูปเด่ียว ๆ หรือ รูปภาพท่ีไมมีกรอบ หรืออาจจะเปน Clip Art ก็ได

รูปท่ี 3.13 การเพ่ิม Image

การเพ่ิมรูปภาพ เราสามารถปรับคาตาง ๆ ไดโดยการ คลิ้กขวาท่ีรูปนั้น ๆ จะปรากฏหนาตางยอยดังภาพ

รูปท่ี 3.14 การเพ่ิม Change Image

Change Image คือการเปลี่ยนรูป โดยมีข้ันตอนคือ เราตอง Upload ภาพ ข้ึนไปบน Server กอน โดยปรากฎหนาจอดังนี้

36

รูปท่ี 3.15 การ Change Image

Edit Image เรายังสามารถปรับแตง รูปได โดยมี Function การแตงรูปมาให

รูปท่ี 3.16 การ Edit Image

37

Link to คือการสราง Link เพ่ือเชื่อมโยงไปยังหนาตาง ๆ โดยมีหนาจอดังนี้

รูปท่ี 3.17 การสราง Link

Image Setting คือการปรับคาตาง ๆ ไดดังภาพ

รูปท่ี 3.18 Image Setting

38

Change Style คือการปรับรูปแบบของภาพ การทํากรอบ การปรากฎของภาพ ดังภาพ

รูปท่ี 3.19 Change Style

39

Add Animation เปนการเพ่ิมรูปแบบการเคลื่อนไหวของรูปภาพนั้น ๆ โดยสามารถเลือกไดดังภาพ

รูปท่ี 3.20 Add Animation

4.3 Gallery การเพ่ิม Gallery เปนการเพ่ิมรูปภาพทีละหลาย ๆ ภาพลงในหนา Page โดยสามารถเลือกรูปแบบไดดังภาพ

รูปท่ี 3.21 Add Animation

40

4.4 Media การเพ่ิมสื่ออ่ืน ๆ เชน เพลง วีดีโอ และอ่ืนๆ สามารถทําไดหลากหลายรูปแบบดังภาพดานลาง

รูปท่ี 3.22 การเพ่ิมสื่ออ่ืน ๆ

การเพ่ิม Video สามารถใส Video ท่ีมีอยูแลวใน Youtube หรือแหลงตาง ๆไดโดยการใส url ลงไปดังภาพ โดยทําการ คลิ้กขวาท่ีวีดิโอท่ีตองการ แลวเลือก Settings

รูปท่ี 3.23 การเพ่ิม Video

41

หลังจากเลือก Setting แลวจะปรากฎหนาจอใหเราใสคาตาง ๆ ดังภาพ

รูปท่ี 3.24 การ Setting ภาพ Video Url - ใหใส Url ท่ีเก็บวีดิโอ Control Bar - เปนการเลือกวาเราจะแสดงปุมในการควบคุมหรือไม 4.5 Shapes & Lines ในสวนนี้จะสามารถใหเราไดเพ่ิมเสนและรูปทรงตาง ๆ ลงใน Page โดยมีตัวเลือกตามภาพ ขางลาง รูปท่ี 3.25 Shapes & Lines

42

4.6 Buttons & Menus ในสวนนี้เปนการเพ่ิม ปุม และเมนูลงใน Page

รูปท่ี 3.26 Buttons & Menus 4.7 Blog Elemen ถาเราตองการท่ีจะสราง Web ของเราใหเปน Web Blog เราสามารถเลือกท่ีจะเพ่ิม Blog ได โดยเราจะสามารถเลือกไดวาจะเพ่ิม Blog แบบไหนลงใน Page โดยมีประเภทของ Blog ดังภาพ

รูปท่ี 3.27 Blog Elemen

43

4.7.1 Post Gallery เปนการสราง Blog ท่ีเปน Gallery โดยท่ีเราสามารถตั้งคาตาง ๆ ไดดังภาพ

รูปท่ี 3.28 Post Gallery

44

4.7.2 Post List เปนการสราง Blog ท่ีเปน List โดยท่ีเราสามารถตั้งคาตาง ๆ ไดดังภาพ

รูปท่ี 3.29 Post List

45

4.7.3 Post Gallery เปนการสราง Blog ท่ีเปนการแสดง Tag ท้ังหมดท่ีอยูใน Blog บน Web ของเราโดยท่ีเราสามารถตั้งคาตาง ๆ ไดดังภาพ

รูปท่ี 3.30 Post Gallery

46

4.8 Online Store การสราง Online Store คือการสรางรานคาออนไลน เหมาะสําหรับการทํา e-Commerch โดยเราสามารถท่ีจะจัดการรานคาของเราโดยมี Function การใชงานตาง ๆดังภาพ

รูปท่ี 3.31 Online Store 4.8.1 Product Gallery - เปนการเพ่ิม ลบ แกไข ขอมูลสินคาท่ีมีในรานคา 4.8.2 Shopping Cart - เปนการเพ่ิมคุณสมบัติการใชรถเข็นลงใน Web ของเรา 4.8.3 View Cart - เปนการสรางคุณสมบัติการแสดงรายการท่ีมีในรถเข็น ลงบนหนา Page 4.8.4 Add to Cart Button - เพ่ิมปุมการเพ่ิมสินคางรถเข็น ลงบนหนา Page

47

เม่ือเราเลือกท่ีจะทํา Online Store ทาง Wix จะแสดงตัวอยางใหเราดู และถาเราตองการท่ีจะทําตอ ทางระบบจะใหเรา Save ขอมูลกอน โดยจะมีข้ันตอนการ Save ดังภาพ

รูปท่ี 3.32 การทํา Online Store

48

ระบบจะใหเรา Save ทําโดยการกดปุม Save

รูปท่ี 3.33 การกดปุม Save

ระบบจะใหเราตั้งชื่อ Web ของเรา

รูปท่ี 3.33 การตั้งชื่อ Web

เม่ือกดปุม Save ใหรอสักพัก

49

การจัดการสินคาในรานคา จะมี Tab ตาง ๆ ใหเลือก - My Product เปนการเพ่ิม ลบ แกไข ขอมูลของสินคาในราน

รูปท่ี 3.34 การเพ่ิม ลบ แกไข ขอมูลของสินคา

50

โดยเราสามารถสรางหมวดหมูของสินคาไดโดยกด Add Collection ดังภาพ

รูปท่ี 3.35 สรางหมวดหมูของสินคา ในสวนของสินคาเราสามารถเพ่ิมสินคาใหมไดโดยการกดปุม Add Product

รูปท่ี 3.36 การ Add Product

51

เม่ือเราทําการเพ่ิมสินคา จะปรากฎหนาจอดังภาพดานลางใหเราทําการใสขอมูลตาง ๆ ดังนี้ Product Title - ชื่อสินคา Collection - ประเภทของสินคา Media - รูปสินคา หรืออาจเปนวีดิโอ Info - ขอมูลอ่ืนๆ

52

รูปท่ี 3.37 รายละเอียดสินคา

- Order เปนการดูรายการการสั่งซ้ือ กรณีท่ีมีลูกคาสั่งสินคาเขามา

รูปท่ี 3.38 รายการการสั่งซ้ือ

53

- Payment & Currency เปนการตั้งคาการชําระเงิน โดยทาง Wix จะใชการชําระทาง PayPal เปนหลัก

รูปท่ี 3.39 การตั้งคาการชําระเงิน - Shipping คือการตั้งราคาคาขนสงสินคา

รูปท่ี 3.40 การตั้งราคาคาขนสงสินคา

54

- Tax เปนการตั้งคาภาษี

รูปท่ี 3.41 เปนการตั้งคาภาษี 4.9 Social การเพ่ิม Social ลงใน Page คือการท่ีเชื่อมโยง Web ของเรากับ Social Networkตาง ๆ เชน Facebook Twitter และอ่ืนๆ โดยเราสามารถเพ่ิม Component ตาง ๆ ไดดังนี้

55

รูปท่ี 3.42 การเพ่ิม Social ลงใน Page

56

4.10 Apps การเพ่ิม App ลงบน Page ตาง ๆ จะมี App สําเร็จรูปตาง ๆ ดังภาพขางลาง

รูปท่ี 3.43 การเพ่ิม App ลงบน Page ตาง ๆ

57

4.11 List Builder การสราง List เปนการสราง Page ท่ีตองการใหมีการแสดงผลในรูปแบบรายการ โดยจะมีรูปแบบตาง ๆ ใหเลือกมากมาย ดังภาพดานลาง

รูปท่ี 3.44 การสราง List เปนการสราง Page

3.7 ข้ันท่ี 5 Wix App Market ในสวนนี้เปนการสงเสริมการตลาดของ Wix เปนการเพ่ิม Marketing App ลงใน Web ของเรา

รูปท่ี 3.45 การเพ่ิม Marketing App

58

3.8 ข้ันท่ี 6 Settings การตั้งคาตาง ๆ ใน Web ของเราสามารถทําไดดังนี้

รูปท่ี 3.46 การตั้งคาตาง ๆ ใน Web

59

6.1 Site Address เปนการตั้งคา Url ของ Web Site ของเรา จะมีหนาจอดังนี้

รูปท่ี 3.47 เปนการตั้งคา Url ของ Web Site

6.2 SEO (GOOGLE) เปนการตั้งคาเพ่ือให Google สามารถหา Web Site ของเราไดงายๆ ทําไดโดยการใสคาขอมูลตาง ๆดังนี้ Site Title - ใสชื่อ Web Site ประเภทของ Web Site Description - ใสคําอธิบายเลาถึง Web ของเราในณุปแบบประโยค Keyword - ใสคําสําคัญท่ีเปนแกนท่ีใชในการบอกถึง Web ของเรา

60

รูปท่ี 3.48 การตั้งคาเพ่ือให Google

6.3 Social Setting เปนการใสขอมูล Social ในกรณีท่ี Web ของเราเชื่อมตอดวย เชน Facebook

รูปท่ี 3.49 การตั้งคา Social Setting

61

3.9 ข้ันท่ี 7 การบันทึกและประกาศใชงาน การท่ีเราจะประกาศใชงาน Web ของเราได เราตองทําการ Save กอน ดังท่ีไดกลาวไวแลว จากนั้นตองทําการ Publish โดยกดท่ี Menu ดานบน จากนั้นจะปรากฎหนาจอดังนี้

รูปท่ี 3.50 การบันทึกและประกาศใชงาน

หลังจากท่ีเรา Publish แลว จะปรากฎหนาจอดังนี้

ถาเราตองการบอกใหเพ่ือน ๆ ใน Social Network ทราบใหเลือก Share ดังรูปดานลาง

62

63