การออกแบบและพัฒนาเว็บ (web design and development)
Download
Report
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)