Lab 05 : การสร้างเว็บไซต์ด้วย Weebly สธ212 ระบบสื่อประสมสำหรับธุรกิจ

งานนำเสนอเรื่อง: "Lab 05 : การสร้างเว็บไซต์ด้วย Weebly สธ212 ระบบสื่อประสมสำหรับธุรกิจ"— ใบสำเนางานนำเสนอ:

1 Lab 05 : การสร้างเว็บไซต์ด้วย Weebly สธ212 ระบบสื่อประสมสำหรับธุรกิจ
อาจารย์อภิพงศ์ ปิงยศ

2 Outline แนะนำ Weebly เริ่มต้นใช้งาน Weebly ออกแบบเว็บไซต์
การสร้างเว็บเพจ การสร้าง Blog การสร้างร้านออนไลน์

3 แนะนำ Weebly Weebly เป็นเว็บไซต์ที่ให้บริการการสร้างเว็บไซต์ ด้วยตัวเองที่ใช้งานง่าย และมี ประสิทธิภาพสูงที่สุดเว็บหนึ่ง สามารถสร้างเว็บไซต์ เว็บบล็อก และร้านค้า ออนไลน์ได้ด้วยตัวเอง สามารถใช้งานได้ทุกแพล็ตฟอร์ม ไม่ว่าจะบน PC, Smart Phone หรือ Tablet ไม่จำเป็นต้องมีความรู้ด้านการเขียนโปรแกรม เพราะใช้การลากแล้ววางเท่านั้น

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

5

6 ออกแบบเว็บไซต์ ก่อนที่จะทำการสร้างเว็บไซต์ใดๆ จำเป็นที่จะต้องมี การออกแบบเว็บไซต์ก่อนว่าควรจะมีเนื้อหาอะไรอยู่ ในหน้าใดบ้าง แต่ละหน้าจะกำหนดเป็นชนิดใด ให้นักศึกษาทดลองสร้างเว็บไซต์ของสินค้าหรือ บริการเดียวกับปฏิบัติการที่ผ่านๆมา ในตัวอย่างปฏิบัติการนี้ อาจารย์จะสร้างเว็บไซต์ โฮมสเตย์ ซึ่งมีเค้าโครงดังนี้ (สไลด์ถัดไป)

7 เค้าโครงเว็บไซต์ Website หน้าแรก - แนะนำสถานที่ - รูปสถานที่
ดูตัวอย่างได้ที่ เค้าโครงเว็บไซต์ Website หน้าแรก - แนะนำสถานที่ รูปสถานที่ จองห้องพัก รูปห้องพัก ราคา ติดต่อเรา ที่อยู่ เบอร์โทร อีเมล แผนที่ (ชื่อ รหัสนศ.)

8 เริ่มต้นใช้งาน Weebly
ไปที่ url:

9 เริ่มต้นใช้งาน Weebly [cont.]
คลิกที่ Sign Up เพื่อสมัครสมาชิกก่อน

10 เริ่มต้นใช้งาน Weebly [cont.]
สามารถสมัครได้โดยใช้บัญชี Facebook, Google Plus หรือใช้อีเมลสมัครก็ได้ แต่แนะนำให้ใช้อีเมล ในการสมัคร เมื่อกรอกข้อมูลเสร็จแล้วคลิก Sign Up

11 เลือกรูปแบบเว็บไซต์ เมื่อสมัครเสร็จเรียบร้อยแล้วให้ทำการ Log In เข้า สู่ระบบ ระบบจะให้เลือกรูปแบบเว็บไซต์ ซึ่งมี 3 แบบ คือ Site, Blog, Store ให้เราทำการเลือกสร้าง Site ก่อน แล้วค่อย ๆ เพิ่มอย่างอื่นต่อไป

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

13 ตั้งชื่อ Domain Name ในการใช้งานฟรี ระบบจะให้ตั้งชื่อ โดเมนแล้ว ต่อท้ายด้วย .weebly.com ชื่อโดเมนที่ สามารถตั้งได้จะ มีเครื่องหมายถูก แสดงขึ้นมา หากไม่ต้องการ .weebly.com พ่วงท้าย จะต้องชำระเงิน เสร็จแล้วคลิก Continue

14 เครื่องมือสร้าง เว็บเพจ
หน้าเว็บเพจจะปรากฎ พื้นที่แสดงเว็บเพจ เครื่องมือสร้าง เว็บเพจ

15 สร้างหน้าแรก ใช้วิธีการลาก เครื่องมือ ด้านซ้าย มาวาง ลงในพื้นที่เว็บ เพจ สามารถสร้างจาก Template ด้วย การคลิก Choose a Layout ก็ได้

16 การปรับขนาดและตำแหน่ง
แดรกเมาส์ซ้ายขวาเพื่อปรับขนาด ปรับให้ได้ขนาดตามต้องการ

17 การ Copy, Delete และ Move วัตถุ
เมื่อลากเมาส์ผ่านวัตถุ จะปรากฎเครื่องมือดังรูป Cut or Copy Move Delete

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

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

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

21 การเผยแพร่เว็บไซต์ คลิก Publish เพื่อทำการเผยแพร่เว็บไซต์ ระบบจะถามยืนยัน ชื่อโดเมนอีกครั้ง

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

23 การแก้ไขชื่อของเว็บเพจ
1) คลิกที่ Pages 2) คลิกที่เว็บเพจที่ต้องการแก้ไขชื่อ 3) เปลี่ยนชื่อจาก Home เป็น หน้าแรก

24 การเพิ่มเว็บเพจ (เพิ่มหน้าจองห้องพักออนไลน์)
1) คลิกเพิ่มเว็บเพจ 3) ตั้งชื่อเป็น “จองห้องพัก” แล้ว Save 2) คลิกเพิ่มเว็บเพจแบบ Store Page

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

26 สร้างเว็บเพจประชาสัมพันธ์ห้องพักเอง โดยใช้เครื่องมือในเมนู Builds
ก่อนอื่นให้ลบหน้าจอง ห้องพักแบบร้านค้าออลไลน์ (Store) ออกไปก่อน แล้วสร้างใหม่ในรูปแบบ Standard Page ให้นศ.ทดลองหารูปจาก อินเทอร์เน็ตมาประกอบก่อน

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

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

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

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