lab 08 : การสร้างเว็บไซต์ด้วย weebly€¦ ·...
TRANSCRIPT
Lab 08 : การสร้างเว็บไซต์ด้วย Weeblyพท 260 เทคโนโลยีสารสนเทศและการสื่อสารทางการท่องเที่ยว
อาจารย์อภิพงศ์ ปิงยศ
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 [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 ของเว็บไซต์ที่นักศึกษาสร้างมาที่อีเมล [email protected]
โดยส่งในช่ือหัวเรื่อง “(พท260 Lab08 Section…) รหัส... Weebly”
ภายในอเีมลอย่าลืมเขียน ชื่อ-นามสกุล รหัสนศ. และ url เว็บไซตข์องนศ.มาให้เรียบร้อย
ก าหนดส่งก่อนวันที่ 2 เม.ย. 2559
36
URL เมื่อเข้ำถึงจำกผู้ใช้ทั่วไป ไม่ใช่ URL ตอนสร้ำงใน Weeblyนะครับเด็กๆ
37