Transcript การออกแบบและพัฒนาเว็บ (web design and development)

การออกแบบและพัฒนาเว็บ
(WEB DESIGN AND
DEVELOPMENT)
.
การออกแบบและพัฒนาเว็บไซต ์
โดย อ.ปริญญา น้อยดอนไพร
คณะวิทยาศาสตร ์และเทคโนโลยี
มหาวิทยาลัยราชภัฏสุราษฎร ์ธานี
่ ต ้องอาศัยการออกแบบและการ
การสร ้างเว็บไซต ์ทีดี
จัดระบบข ้อมูลอย่างเหมาะสม
 การจัดระบบโครงสร ้าง จะเป็ นการพิจารณาว่าเว็บไซต ์
ควรจะมีข ้อมูลและการทางานใดบ ้าง ด ้วยการสร ้างเป็ น
แผนผังโครงสร ้างก่อน แล ้วลงมือพัฒนาเว็บเพจ

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
องค ์ประกอบของการออกแบบเว็บไซต ์
1. เลือกใช ้สีให ้เหมาะสม
 2. มีความเป็ นเอกลักษณ์
 3. ต ้องสามารถใช ้งานได ้อย่างเหมาะสม
 4. สามารถแสดงผลได ้อย่างรวดเร็ว

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
่
การออกแบบเว็บเพจทีดี
1. ควรมีรายการสารบัญแสดงรายละเอียดของเว็บเพจ
นั้น
่
 2. เชือมโยงข
้อมูลไปยังเป้ าหมายได ้ตรงกับความต ้องการ
่ ด
มากทีสุ
้
้
 3. เนื อหากระช
ับ สันและทั
นสมัย
 4. สามารถโต ้ตอบกับผูใ้ ช ้ได ้อย่างทันท่วงที
 5. การใส่ภาพประกอบ
 6. เข ้าสูก
่ ลุม
่ เป้ าหมายได ้อย่างถูกต ้อง
 7. ใช ้งานง่าย

8.DESIGN
เป็ นมาตรฐานเดี
ยวกัMr.Parinya
น
WEB
AND DEVELOPMENT::
Noidonphrai (www.freebsd.sru.ac.th)

กระบวนการพัฒนาเว็บไซต ์
กระบวนการในการสร ้างและออกแบบเว็บมีกระบวนการ
้
้
พืนฐานอยู
่ด ้วยกัน 5 ขันตอนคื
อ
 1. การวางแผน (Planning)
 2. การออกแบบ (Design)
 3. การพัฒนา (Development)
 4. การเผยแพร่
 5. ปร ับปรุงและพัฒนา

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
การจัดระบบข้อมู ลบนเว็บไซต ์
่ ขอ้ มูลจานวนมากที่
้
เมือมี
1) จัดกลุ่มและระบุชอเนื
ื่ อหา
จะนามาใช ้ในเว็บไซต ์ จะตอ้ งนาขอ้ มูลเหล่านั้นมาจัดให ้
่ ้ได ้เป็ นร่างแผนผังโครงสร ้าง
เป็ นระบบ เพือให
 2) จัด ท าโครงสร ้างข อ
้ มู ล โครงสร ้างที่ดีจ ะช่ว ยให เ้ รา
่
้
สร ้างระบบการเชือมโยงให
ง้ ่ า ยขึนการจั
ด ท ารายการ
่ ข ้อมูลถูกจัดกลุ่มใหเ้ ป็ นระเบียบ
โครงสร ้างของไซต ์ เมือมี
้
้
แล ้ว ขันตอนต่
อไปคือจัดเป็ นโครงสร ้างของเนื อหา
 3) การจัดทาแผนผังโครงสร ้างเว็บไซต ์

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
การกาหนดโครงสร ้างของเว็บ
การก าหนดโครงสร า้ งของเว็ บ มี ค วามส าคัญในการ
จัด การ การจัด เก็ บ เว็ บให เ้ ป็ นระเบี ย บจะท าให ก
้ าร
ตรวจสอบความผิดพลาดของเว็บเพจทาได ้ง่ายขึน้ เช่น
่
แฟ้ มภาพ จัด เก็ บไว ท
้ ี่เดี ย วกัน จัด เก็ บ เว็ บ เพจ เรือง
เดียวกันไวใ้ นไดเรกทอรีเดียวกัน การกาหนดโครงสร ้าง
้
เว็บ โครงสร ้างของเว็บโดยพืนฐานจะมี
2 ลักษณะคือ
้
 1) โครงสร ้างเว็บแบบตืน
 2) โครงสร ้างเว็บแบบลึก

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
้
โครงสร ้างเว็บแบบตืน
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
โครงสร ้างเว็บแบบลึก
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
การออกแบบหน้าเว็บเพจ
ขนาดของหน้า โฮมเพจ การออกแบบหน้า โฮมเพจที่
นิ ยมใช ้งานมี 3 ขนาด คือ
 640 x 480 pixels
 800 x 600 pixels
 10240 x 768 pixels
่ ้กัน มากทีสุ
่ ด คือ
 โดยปกติข นาดของหน้า โฮมเพจทีใช
่
800 x 600 pixels เนื่ องจากเป็ นขนาดกลางทีสามารถ
ใช ้งานได ส้ ะดวก ไม่ ว่ า จอภาพจะเป็ นขนาดเล็ ก หรือ
ขนาดใหญ่

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ส่วนประกอบสาคัญ ๆ ในหน้าโฮมเพจ
่ วยใหผ้ ูช
่ ช่
้ มสามารถจาเว็บไซต ์เรา
1.โลโก ้( Logo) เป็ นสิงที
ได ้ง่าย มองดูมเี อกลักษณ์
่
่
 2.เมนู หลัก (Link Menu) เป็ นจุดเชือมโยงที
รวบรวมรู
ปแบบ
ของเมนู ปม
ุ่ หรือข ้อความโดยผูช
้ มสามารถร ับรู ้ว่า ภายในเว็บ
่
ไซตต ์มีเรืองราวที
น่่ าสนใจอย่างไรบ ้าง
 3.แถบโฆษณา (Banner) จะช่วยส่งเสริมภาพลักษณ์ ความ
่ อ และกระตุ้น ความสนใจ มักใช ้ภาพเคลื่อนไหว
น่ าเชือถื
่
ประกอบเว็บไซต ์ให ้ดูตนตาตื
ื่
นใจ
้
้
่
 4.ภาพประกอบเเละเนื อหา
(Content) ควรเป็ นเนื อหาที
ปรบั ปรุงอยู่เสมอ วางรูปแบบการจัดวางใหอ้ ่านง่าย ไม่ ยาว
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
้ นไป และควรใช ้ภาพประกอบทีสวยงามและฟอนต
่
หรือสันเกิ
์

้ การใช้
่
การแบ่งพืนที
หน้าโฮมเพจ

การใช ง้ านหน้ า โฮมเพจในปั จ จุ บ ั น มี รู ป แบบการจัด วางที่
่
หลากหลาย โดยทัวไปเราสามารถพบเห็
น แบ่งได ้ 3 ลักษณะ คือ


้ ่ 3 ส่วน และ 2 ส่วน ในเว็บไซต ์ของ
เรามักพบเห็ นการแบ่งพืนที
่ ขนาดใหญ่เนื่ องจากเป็ นรูปแบบทีใช
่ ้งานง่าย มีสด
องค ์กรทีมี
ั ส่วน
่ ดเจน สาหรบั การแบ่งพืนที
้ ่ 1 ส่วนหรือแบบอิสระ
การใช ้งานทีชั
มัก เห็ น กับ เว็ บไซต ์ที่เน้น การออกแบบให ส้ วยงามมากกว่ า เน้น
่ บั ซ ้อน
การใช ้งาน และการออกแบบทีซ
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
การเตรียมตัวก่อนสร ้างโฮมเพจ
่ ต
่ ้องเตรียมเพือน
่ าไปสร ้างเว็บเพจ
สิงที
้
 1. เนื อหา
้
 2. รูปภาพประกอบเนื อหา
้
 3. ภาพกราฟิ ก เช่น เส ้น (line) ปุ่ มหน้ารายการ (dot) พืน
หลัง (background) ภาพการ ์ตูนแต่งเว็บ (ClipArt)
ภาพถ่าย (Picture)
่ บสนุ นระบบอินเตอร ์เน็ ต ส่วนใหญ่ใช ้ 3
 ไฟล ์กราฟิ กทีสนั
ไฟล ์หลัก คือ
•
ไฟล ์สกุล GIF (Graphic Interlace File)
•
ไฟล ์สกุล JPG (Joint Photographer’s Exports
Group)
WEB
DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)

้
ขันตอนในการสร
้างโฮมเพจ
การสร ้างโฮมเพจ เราสามารถสร ้างโฮมเพจไดง้ ่าย ๆ อย่าง
้
เป็ นขันตอนด
้วยวิธก
ี ารดังต่อไปนี ้
่
้ ในการวางโฮมเพจนั
่
้น
 1) มีพนที
ื ้ ของโฮมเพจ
ในการขอพืนที
เ ร า อ า จ ข อ พื ้น ที่ แ บ บ ฟ รีโ ฮ ม เ พ จ ( ไ ม่ เ สี ย ค่ า ใ ช จ้ ่ า ย
ค่าบริการ) เช่น geocitties.com แต่สาหรบั ในหอ้ งเรีย น
้
ครูจะเป็ นผู้กาหนดขึนมาอาจใช
้แบบออนไลน์ (online) หรือ
off line ก็ขนอยู
ึ้
่กบ
ั การกาหนดของครูผู้สอนนักเรียน
้
จะตอ้ งทาความเขา้ ใจและ จดจาขันตอนในการวางโฮมเพจ
ให ้ดี
 2) กาหนดลักษณะของโฮมเพจ เช่น โฮมเพจจะมีโทนสีอะไร
มีข ้อมูลอะไรบ ้าง
 3 ) อ อ ก แ บ บ ห น้ า โ ฮ ม เ พ จ ด ้ ว ยโ ป ร แ ก ร ม Adobe
Photoshop
WEB
DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)

้
่
เนื อหาที
ควรมี
ในเว็บไซต ์
่
บบริษท
ั องค ์กร หรือผูจ้ ด
ั ทา (About Us)
ข ้อมูลเกียวกั
 รายละเอียดของผลิตภัณฑ ์หรือบริการ
(Product/Service Information)
 ข่าวสาร (News/Press Release)
 คาถาม/คาตอบ (Frequently Asked Question)
 ข ้อมูลในการติดต่อ (Contact Information)

WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
WEB DESIGN AND DEVELOPMENT:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)