Lab 08 : การสร้างเว็บไซต์ด้วย Weebly€¦ · แดรกเมาส์ซ้ายขวา เพื่อปรับขนาด...

Lab 08 : การสร้างเว็บไซต์ด้วย Weeblyพท 260 เทคโนโลยีสารสนเทศและการสื่อสารทางการท่องเที่ยว

อาจารย์อภิพงศ์ ปิงยศ

apipong.ping@gmail.com

Outline

แนะน า Weebly

เริ่มต้นใช้งาน Weebly

ออกแบบเว็บไซต์

การสร้างเว็บเพจ

การสร้าง Blog

การสร้างร้านออนไลน์

2

แนะน ำ Weebly

Weebly เป็นเว็บไซต์ที่ให้บริการการสร้างเว็บไซต์ด้วยตัวเองที่ใช้งานง่าย และมีประสิทธิภาพสูงที่สุดเว็บหนึ่ง

สามารถสร้างเว็บไซต์ เว็บบล็อก และร้านค้าออนไลน์ได้ด้วยตัวเอง

สามารถใช้งานได้ทุกแพล็ตฟอร์ม ไม่ว่าจะบน PC, Smart Phone หรือ Tablet

ไม่จ าเป็นต้องมีความรู้ด้านการเขียนโปรแกรม เพราะใช้การลากแล้ววางเท่านั้น

3

แนะน ำ Weebly [cont.]

ผู้ใช้สามารถใช้งานได้ทั้งเวอร์ชั่นฟรี และเสียเงิน

ซึ่งเพียงแค่เวอร์ชั่นฟรีก็สามารถสร้างเว็บไซต์ที่มีความทันสมัย สวยงาม และมีเครื่องมือครบครันสามารถตอบโจทย์ความต้องการของผู้ใช้ทั่วไปได้แล้ว

4

5

ออกแบบเว็บไซต์

ก่อนที่จะท าการสร้างเว็บไซต์ใดๆ จ าเป็นที่จะต้องมีการออกแบบเว็บไซต์ก่อนว่าควรจะมีเนื้อหาอะไรอยู่ในหน้าใดบ้าง แต่ละหน้าจะก าหนดเป็นชนิดใด

ในที่นี้ก าหนดให้นักศึกษาทดลองสร้างเว็บไซต์ที่พักตามแหล่งท่องเที่ยว ซึ่งมี เค้าโครงดังนี้ (สไลด์ถัดไป)

6

เค้ำโครงเว็บไซต์

Website

หน้าแรก

- แนะน าสถานที่ - รูปสถานที่

จองห้องพัก

รูปห้องพัก ราคา

Blog แนะน าสถานที่ท่องเที่ยวใกล้เคียง

หรือกิจกรรม

ติดต่อเรา

ที่อยู่ เบอร์โทร อีเมลแผนที่ (ชื่อ รหัสนศ.)

7

ดูตัวอย่างได้ที่ http://mju-phrae-homestay.weebly.com

เริ่มต้นใช้งำน Weebly

ไปที่ url: www.weebly.com

8

เริ่มต้นใช้งำน Weebly [cont.]9

คลิกที่ Sign Up เพื่อสมัครสมาชิกก่อน

เริ่มต้นใช้งำน Weebly [cont.]10

• สามารถสมัครได้โดยใช้บัญชี Facebook, Google Plus หรือใช้อีเมลสมัครก็ได้

• แต่แนะน ำให้ใช้อีเมลในกำรสมัคร

• เมื่อกรอกข้อมูลเสร็จแล้วคลิก Sign Up

เลือกรูปแบบเว็บไซต์

เมื่อสมัครเสร็จเรียบร้อยแล้วให้ท าการ Log In เข้าสูร่ะบบ

ระบบจะให้เลือกรูปแบบเว็บไซต์ ซึ่งมี 3 แบบ คือ Site, Blog, Store

ให้เราท าการเลือกสร้าง Site ก่อน แล้วค่อย ๆ เพ่ิมอย่างอื่นต่อไป

11

เลือก Theme

จากนั้นระบบจะให้เลือก Theme ส าหรับเว็บไซต์ของเรา ให้นศ.เลือก Theme ที่นศ.ชอบ และเหมาะสมกับงาน

12

ตั้งชื่อ Domain Name

ในการใช้งานฟรี ระบบจะให้ตั้งชื่อโดเมนแล้วต่อท้ายด้วย .weebly.com

ชื่อโดเมนที่สามารถตั้งได้จะมีเครื่องหมายถูกแสดงขึ้นมา

หากไม่ต้องการ .weebly.com พ่วงท้าย จะต้องช าระเงิน

เสร็จแล้วคลิก Continue

13

หน้ำเว็บเพจจะปรำกฎ14

เครื่องมือสร้าง เว็บเพจ

พื้นที่แสดงเว็บเพจ

สร้ำงหน้ำแรก

ใช้วิธีการลากเครื่องมือด้านซ้าย มาวางลงในพื้นที่เว็บเพจ

สามารถสร้างจาก Template ด้วยการคลิก Choose a Layout ก็ได้

15

กำรปรับขนำดและต ำแหน่ง16

แดรกเมาส์ซ้ายขวาเพื่อปรับขนาด

ปรับให้ได้ขนาดตามต้องการ

กำร Copy, Delete และ Move วัตถุ17

Cut or Copy Move Delete

เมื่อลากเมาส์ผ่านวัตถุ จะปรากฎเครื่องมือดังรูป

ตัวอย่ำงกำรสร้ำงเว็บเพจหน้ำแรกของแม่โจ-้แพร่ โฮมสเตย์18

ตัวอย่ำงกำรสร้ำงเว็บเพจหน้ำแรกของแม่โจ-้แพร่ โฮมสเตย์[cont.]

19

ตัวอย่ำงกำรสร้ำงเว็บเพจหน้ำแรกของแม่โจ-้แพร่ โฮมสเตย์[cont.]

20

กำรเผยแพร่เว็บไซต์21

คลิก Publish เพื่อท าการเผยแพร่เว็บไซต์ ระบบจะถามยืนยัน

ชื่อโดเมนอีกครั้ง

สำมำรถเข้ำถึงได้แล้วจำกอินเทอร์เน็ต22

กำรแก้ไขช่ือของเว็บเพจ23

1) คลิกที่ Pages

2) คลิกที่เว็บเพจที่ต้องการแก้ไขชื่อ

3) เปลี่ยนชื่อจาก Home เป็น หน้าแรก

กำรเพิ่มเว็บเพจ (เพิ่มหน้ำจองห้องพักออนไลน์)24

1) คลิกเพิ่มเว็บเพจ

2) คลิกเพิ่มเว็บเพจแบบ Store Page

3) ตั้งชื่อเป็น “จองห้องพัก”

แล้ว Save

เพิ่มห้องพัก (แต่เวอร์ชั่นฟรีไม่สำมำรถท ำได้)25

สร้ำงเว็บเพจประชำสัมพันธ์ห้องพักเอง โดยใช้เครื่องมือในเมนู Builds

ก่อนอ่ืนให้ลบหน้าจองห้องพักแบบร้านค้าออลไลน์ (Store) ออกไปก่อน

แล้วสร้างใหม่ในรูปแบบ Standard Page

ให้นศ.ทดลองหารูปจากอินเทอร์เน็ตมาประกอบก่อน

26

ตัวอย่ำงหน้ำเว็บเพจจองหอ้งพักhttp://mju-phrae-homestay.weebly.com/27

อย่ำลืมใส่ข้อมูลติดต่อเพื่อท ำกำรจองห้องพัก28

เพิ่ม Blog เพื่อสร้ำงรีวิวกิจกรรม หรือสถำนที่ท่องเที่ยว29

1) คลิก Pages2) คลิกเพิ่มเว็บเพจ

3) คลิก Blog Page 4) ตั้งชื่อ Blog

สร้ำงบล็อกใหม่30

เขียนบล็อกได้ตำมควำมคิดสร้ำงสรรค์ โดยใช้เครื่องมือที่ระบบมีให้

31

เมื่อสร้ำงบล็อกเสร็จให้ post และ publish ตำมล ำดับ32

ข้อดีของ Blog คือ ผู้อื่นสำมำรถมำ Comment ได้ และข้อมูลใน Blog ค่อนข้ำงจะเป็นกันเองมำกกว่ำข้อมูลในเว็บเพจ

33

สร้ำงเว็บเพจ “ติดต่อเรำ”34

ใส่ข้อมูล ที่อยู่ เบอร์ติดต่อ อีเมล แผนที่และที่ส ำคัญอย่ำลืมใส่ชื่อ-นำมสกุล และรหัสนักศึกษำ เพื่อให้อำจำรย์ตรวจด้วย

35

ถ้ำจะให้ง่ำยควรสร้ำงจำก Layout หมวด Contact

ส่งงำน

เมื่อสร้างและปรับแต่งจนเสร็จสมบูรณ์แล้ว ให้ส่ง url ของเว็บไซต์ที่นักศึกษาสร้างมาที่อีเมล apipong.ping@gmail.com

โดยส่งในช่ือหัวเรื่อง “(พท260 Lab08 Section…) รหัส... Weebly”

ภายในอเีมลอย่าลืมเขียน ชื่อ-นามสกุล รหัสนศ. และ url เว็บไซตข์องนศ.มาให้เรียบร้อย

ก าหนดส่งก่อนวันที่ 2 เม.ย. 2559

36

URL เมื่อเข้ำถึงจำกผู้ใช้ทั่วไป ไม่ใช่ URL ตอนสร้ำงใน Weeblyนะครับเด็กๆ

37