คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course...

12
คูมือการใชงาน Wix

Transcript of คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course...

Page 1: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

คูมือการใชงาน Wix

Page 2: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

2

คูมือการใชงาน Wix

สารบัญ

รายการ หนา

Wix คืออะไร 3

การลงทะเบียนเขาใชงาน 3

การเร่ิมตนการสรางเว็บไซต 4

การเพิ่ม Component ลงในหนา Web

- ขอความ (Text) 7

- รูปภาพ (Image) 8

- พื้นหลัง (Page Background) 9

การ Preview & Save หนาเว็บไซตขณะที่สราง 10

การ Publish เว็บไซต 11

การอัพโหลด Font เพื่อนําไปใชงานบนเว็บไซต 12

Page 3: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

3

คูมือการใชงาน Wix

Wix คืออะไร

เคร่ืองมือสําหรับสรางเว็บไซตออนไลน สามารถสรางงานไดหลายประเภท เชน เว็บไซตสวนตัว

Business, Portfolio หรือ Blog เปนตน ซ่ึงรูปแบบการใชงานไมซับซอนเพียงแคลากวางอีกทั้งมีเคร่ืองมือและ

ฟงกชันใหเลือกใชงานมากมายทั้ง Template, Sound, Animation และ Effects ผูใชสามารถกําหนดปรับแตง

เนื้อหาและแกไขไดดวยตัวเองต้ังแตตนจนจบโดยไมจําเปนตองมีความรูหรือทักษะทางดานการเขียนโคด

นอกจากนี้ Wix ยังสามารถสราง Flash Animation จากหนาเว็บไซตไดโดยตรงไมจําเปนตองติดต้ัง

โปรแกรมใดๆ รวมท้ังรองรับการใชงานกับทุกอุปกรณที่เชื่อมตออินเตอรเน็ต เชน เคร่ืองคอมพิวเตอร และมือถือ

สมารทโฟน เปนตน

การลงทะเบียนเขาใชงาน

1. เขาไปที่เว็บไซต https://www.wix.com

2. คลิกปุม Start Now เพื่อสรางเว็บไซต

Page 4: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

4

คูมือการใชงาน Wix

3. จะปรากฎหนาตางสําหรับลงทะเบียนเขาใชงาน

3.1 คลิกที่ Sign Up เพื่อสรางบัญชีผูใชงานใหม จากนั้นใหใสชื่อที่อยูอีเมลในชอง Email และ

ชอง Type your email again อีกคร้ัง ถัดมาใหกําหนดรหัสผานลงในชอง Password

และชอง Type your password again เพื่อยืนยันรหัสผานอีกคร้ัง แลวคลิกปุม Sign Up

3.2 สําหรับการลงทะเบียนเขาใชงานผานชองทาง Facebook และ Google+

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

1. เขาสูระบบการใชงาน Wix.com เรียบรอยแลวใหคลิกปุม Create Your Website เพื่อสราง

เว็บไซต จากนั้นใหเลือกประเภทของเว็บไซตที่ตองการสราง

Page 5: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

5

คูมือการใชงาน Wix

2. เลือกวิธกีารสรางเว็บไซต ซ่ึงมี 2 วิธีคือ (คูมือจะแสดงการใชงานแบบวิธีที ่2.2)

2.1 Let Wix ADI Create a Website for you การสรางเว็บไซตผานการตอบคําถามงายๆ

และระบบจะออกแบบเว็บไซตสําหรับคุณโดยอัตโนมติั

2.2 Create a Website Yourself with the Wix Editor การสรางเว็บไซตโดยใช

Templates สําเร็จรูป ดวยการคลิกปุม Choose a Template

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

คาใชจายโดยจะแบงเปนประเภทตางๆ ใหเลือกรูปแบบ Templates ที่ตองการ หรือใส

Keyword เพื่อคนหาที่ชอง

4. สามารถดูตัวอยาง Templates ของเว็บไซตกอนตัดสินใจเลือกใชงานไดดวยการคลิกปุม View

แตถาตองการใชงาน Templates นั้นๆ ใหคลิกปุม Edit

Page 6: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

6

คูมือการใชงาน Wix

5. ระบบจะทําการ Generate หนาเว็บไซต และเมื่อเสร็จแลวจะไดผลดังภาพดานลางซ่ึงเรียกวา

Wix Editor ซ่ึงจะมีสวนประกอบตางๆ ดังนี้

5.1 Head Menu ประกอบดวย

- Pages การเพิ่มแกไข Web Page ตางๆ เชน Home, About Us และContact

- Site การจัดการขอมูลเบื้องตนในเว็บไซต

- Tools การแสดงชุดเคร่ืองมือตางๆ เชน Toolbar, Rulers และGridlines

- Help ความชวยเหลือ

- Upgrade สําหรับเพิ่มประสิทธิภาพของเว็บไซต (มีคาใชจาย)

- Mobile กําหนดรูปแบบการแสดงหนาจอซ่ึงมีทั้งรูปแบบมือถือ และรูปแบบ

เคร่ืองคอมพิวเตอร (Desktop) ใหเลือกใชงาน

- Save สําหรับบันทึกการแกไขปรับปรุง Page

- Preview สําหรับดู Web Page ในมุมมองเสมือนจริง

- Publish สําหรับประกาศใชเมื่อสราง Web Site เสร็จแลว

5.2 Side Menu ประกอบดวย

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

- Add สําหรับการเพิ่ม Component ตางๆ ลงใน Page

- App Market การสงเสริมการตลาดของ Wix เพื่อเพิ่มเขาไปในเว็บไซตของเรา

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

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

Page 7: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

7

คูมือการใชงาน Wix

การเพ่ิม Component ลงในหนา Web

1. ขอความ (Text)

1.1 การเพิ่มขอความ คลิกปุม Add เลือกที่ Text จากนั้นใหคลิกเลือกรูปแบบของ

ขอความที่ตองการ ซ่ึงมีทั้งหมด 3 รูปแบบ คือ

- Themed Text คือรูปแบบขอความที่เปนแกนขอความ

- Title คือรูปแบบขอความที่เปนหัวขอ

- Paragraphs คือรูปแบบขอความที่เปนเนื้อหา

1.2 จะแสดงหนาตาง Text Settings และกรอบขอความขึ้นมา คลิกเลือก Edit Text เพื่อทํา

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

1.3 ถาตองการเพิ่มลูกเลนหรือ Effect ใหกับขอความ คลิกปุม Animate และเลือก

รูปแบบ Animation ที่ตองการ หรือคลิกปุม Customize เพื่อทําการปรับแตง

1.4 การลบขอความใหเลือกขอความที่ตองการลบแลวคลิกขวาเลือกคําส่ัง Delete หรือคลิก

ปุม Delete ที่ Keyboard เพื่อลบขอความนั้นทิ้ง

Page 8: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

8

คูมือการใชงาน Wix

2. รูปภาพ (Image)

2.1 การเพิ่มรูปภาพ คลิกปุม Add เลือกที่ Image ซ่ึงสามารถเลือกวิธีการเพิ่มรูปภาพ

ได 4 รูปแบบ คือ

- My Uploads คือการนํารูปภาพจากเคร่ืองคอมพิวเตอรของคุณ

- Image Collections คือการนํารูปภาพ หรือ Clip Art ที่มีอยูในระบบ Wix

- My Social Images คือการนํารูปภาพมาจากชองทาง Social Media

- Related Apps คือการใชแอปพลิเคชันสําเร็จรูปเพื่อปรับแตงรูปภาพ

2.2 กรณีที่เลือก My Uploads จะปรากฎหนาตาง Choose Images ใหคลิกปุม Upload

Images และเลือกรูปภาพท่ีตองการ โดยระบบจะรองรับไฟลประเภท JPEG PNG และ

GIF ที่มีขนาดไฟลไมเกิน 15 MB เมื่ออัพโหลดเสร็จใหคลิกปุม Done และคลิกปุม Add

to Page เพื่อเพิ่มรูปภาพเขาหนาเว็บไซต

2.3 ถาตองการเปล่ียนรูปภาพใหคลิกที่ รูปภาพแลวเลือก Change Image จากนั้นเลือก

รูปภาพใหมที่ตองการ และคลิกปุม Choose Images เพื่อเพิ่มรูปภาพเขาหนาเว็บไซต

Page 9: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

9

คูมือการใชงาน Wix

3. พื้นหลัง (Page Background)

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

3.2 หากตองการใชสี (Color) เปนพื้นหลังใหคลิกปุม Color จะปรากฎหนาตาง Color Picker

ใหเลือกโทนสีที่ตองการหรือสามารถคัดลอกโคดสีที่ตองการมาใสได

3.3 การใชรูปภาพ (Image) สามารถอัพโหลดรูปภาพมาเปนพืน้หลังไดดวยการคลิกปุม Image

และเลือกรูปภาพที่ตองการ

3.4 กรณีตองการต้ังคาพื้นหลังเปนไฟลวิดีโอ (Video) ใหคลิกปุม Video จะปรากฎหนาตาง

Choose a Video for Your Background ใหคลิกปุม Upload Videos และเลือกไฟล

วิดีโอที่ตองการ ซ่ึง Wix จะรองรับไฟลประเภท MP4 MOV และ WebM ที่มีขนาดไฟลไม

เกิน 50 MB และขนาดความละเอียดสูงสุดของวิดีโออยูที่ 1920 x 1080 (Full HD) เมื่อ

อัพโหลดเสร็จใหคลิกปุม Done และคลิกปุม Change Background

3.5 นอกจากนี้สามารถใชภาพพื้นหลังที่มีอยูในระบบไดโดยการคลิกเลือกไฟลวิดีโอหรือรูปภาพ

ที่ตองการในชอง Selected Backgrounds และคลิกปุม Apply to Other Pages

3.6

Page 10: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

10

คูมือการใชงาน Wix

การ Preview & Save หนาเว็บไซตขณะท่ีสราง

1. การดูตัวอยางใหคลิกปุม Preview จะปรากฎหนาตางเว็บไซต เพื่อดูภาพรวมของเว็บไซตกอนใช

งานจริง และเมื่อตองการกลับไปแกไขเว็บไซตใหคลิกปุม Back to Editor

2. จากนั้นคลิกปุม Save เพื่อทําการบันทึกหนาเว็บไซต ซ่ึงจะปรากฎหนาตาง Choose a domain

to save your site มาใหเลือกการกําหนด Domain

- Get a Free Wix.com domain คือการใช Domain ฟรีของระบบซ่ึงสามารถต้ังชื่อ

Domain ได

- Connect your own customized domain คือการเชื่อมตอ Domain ที่กําหนด

รายละเอียดตางๆ ขึ้นเอง

3. เมื่อกําหนดโดเมนเรียบรอยแลวคลิกปุม Save & Continue เพื่อบันทกึ Domain ของเว็บไซต

4. ถาตองการแกไขชื่อ Domain ใหคลิกปุม Saved ที่มุมบนขวาของเว็บ Wix จะปรากฎหนาตาง

Your changes were saved คลิกที่ปุม Edit เพื่อแกไขชื่อ Domain เสร็จแลวคลิกปุม Done

1

Page 11: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

11

คูมือการใชงาน Wix

การ Publish เว็บไซต

1. การเผยแพรหนาเว็บไซตใหคลิกปุม Publish ระบบจะทําการประมวลผลสักครู

2. จะปรากฎหนาตาง Congratulations ถาตองการดูเว็บไซตคลิกปุม View Site

3. จากนั้นคลิกปุม Done การเผยแพรเว็บไซตก็เสร็จสมบูรณ

Page 12: คู มือการใช งาน Wix › thatsanan_ch › pluginfile.php › 183 › course › s… · คืออะไร 3 การลงทะเบียนเข

12

คูมือการใชงาน Wix

การอัพโหลด Font เพ่ือนําไปใชงานบนเว็บไซต

1. คลิกปุม My Uploads เลือก Font จะปรากฎหนาตาง Manage Your Fonts

2. แลวคลิกปุม Upload Fonts เพื่ออัพโหลด Font ตามที่ตองการ

3. เม่ืออัพโหลด Font เสร็จเรียบรอยใหคลิกปุม Close