บทที่ 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) สีColor) และรูปแบบอักษร(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