Transcript หลักการออกแบบเว็บเพจ

Logo
วิชา การสร้ างเว็บด้ วยโปรแกรม Text Editor
รหัสวิชา ง20205
ความรู ้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์
การพัฒนาเว็บเพจ (Web Page)
บทนา : การพัฒนาเว็บเพจ
Logo
นับเป็ นศาสตร์ หนึ่งทีน่ ักคอมพิวเตอร์ และผู้สนใจที่จะศึกษา
เพือ่ สร้ างสรรค์ ผลงาน ชิ้นงานผ่ านเครือข่ ายอินเตอร์ เน็ต การ
ออกแบบและพัฒนาเว็บเพจ สามารถทาได้ หลายระบบ ขึน้ อยู่กบั
ลักษณะของข้ อมูล ความชอบของผู้พฒ
ั นา ตลอดจน
กลุ่มเป้าหมาย ทีต่ ้ องการนาเสนอ ดังนั้นการศึกษาถึงหลักการ
พัฒนาเว็บเพจจึงเป็ นสิ่ งที่จาเป็ นและสาคัญอย่ างยิ่ง
www.themegallery.com
Logo
คาทีค่ วรรู้จักก่ อนสร้ างเว็บไซต์
เว็บไซต์ (Website) คือ ชุดของข้อมูลที่ตอ้ งนาเสนอบนระบบ
อินเตอร์เน็ต ประกอบด้วย เว็บเพจ (Web Page) ตั้งแต่ 1 หน้า
ขึ้นไป
เว็บเพจ (Webpage) คือ ไฟล์ HTML 1 ไฟล์ที่แสดงผลบน
บราวเซอร์ นนั่ เอง
โฮมเพจ(Homepage) คือ เว็บเพจหน้าแรกของเว็บไซต์ หรื อ
เปรี ยบหน้าเหมือหน้าปกหนังสื อ
www.themegallery.com
Logo
ตัวอย่ าง
Homepage
Website
Webpage
Logo
คาทีค่ วรรู้จักก่ อนสร้ างเว็บไซต์
URL (Universal Resource Location) คือ มาตรฐานในการกาหนด
ที่อยูข่ องเว็บไซต์ในเครื อข่ายอินเทอร์เน็ต หรื อเรี ยกอีกอย่างว่าที่
อยูข่ องเว็บไซต์ (Internet Address) เช่นhttp://www.hi.ac.th
บราวเซอร์ (Browser) คือ โปรแกรมแสดงเว็บเพจหรื อหน้า
เว็บไซต์ที่ถูกสร้างขึ้นมาจากภาษา HTML เช่ น Internet
Explorer, Mozilla Firefox, Opera, Netscape
www.themegallery.com
Logo
คาทีค่ วรรู้ จักก่ อนสร้ างเว็บไซต์ (ต่ อ)
HTML(Hyper Text Markup Language)คือ ภาษามาตฐานที่ใช้
ในการสร้างเว็บเพจ เพื่อนาไปแสดงบนบราวเซอร์
FTP (File Transfer Protocol) คือ โปรโตคอลหรื อมาตรฐาน
รู ปแบบหนึ่งที่ใช้ในการรับ-ส่ งข้อมูลระหว่างเครื่ อง
คอมพิวเตอร์ผา่ นเครื อข่ายอินเทอร์เน็ต
www.themegallery.com
Logo
คาทีค่ วรรู้ จักก่ อนสร้ างเว็บไซต์ (ต่ อ)
เว็บเซิร์ฟเวอร์ (Web server) คือ เครื่ องคอมพิวเตอร์เครื่ อง
หนึ่งในเครื อข่ายอินเทอร์เน็ตที่ทาหน้าที่เก็บรวบรวมเว็บไซต์
ต่าง ๆ เอาไว้ เพื่อให้ผชู้ มสามารถเข้ามาเปิ ดดูเว็บไซต์น้ นั ได้
ชื่อโดเมน (Domain name) คือ ชื่อที่ใช้อา้ งถึงเว็บไซต์แทน IP
Address เพื่อให้จดจาได้ง่าย โดยรู ปแบบคือ ชื่อ.รหัสโดเมน
www.themegallery.com
Logo
รู้จักรหัสโดเมน
รหัสโดเมน
com
edu
gov
ใช้ สาหรับ
กลุ่มการค้าและเว็บไซต์ ทั่วไป
สถาบันการศึกษา
หน่ วยงานของรัฐที่ไม่ ใช่ หน่ วยงานทางการทหาร
mil
net
org
co.th
หน่ วงงานทางการทหาร
หน่ วยงานเกีย่ วกับเครือข่ าย
หน่ วยงานที่ไม่ หวังผลกาไร
บริษทั ที่จดทะเบียนในประเทศไทย
www.themegallery.com
ตัวอย่ าง
Pantip.com
Ucla.edu
Nasa.gov
Army.mil
Isp.net
Unesco.org
Infopress.co.th
Logo
โปรแกรมสร้ างเว็บเพจ
เดิมการพัฒนาเว็บเพจจะใช้ โปรแกรมประเภท Text Editor
โดยผู้พฒ
ั นาจะต้ องศึกษาภาษา HTML(HyperText Markup
Language) ซึ่งสร้ างภาระให้ แก่ ผู้สนใจในกลุ่มทีไ่ ม่ ได้ ศึกษาด้ าน
ไอทีมาโดยตรง
ดังนั้น นักโปรแกรมเมอร์ จึงพัฒนา เครื่องมือพัฒนาเว็บเพจ มา
เผยแพร่ ให้ กบั ผู้สนใจเพือ่ เลือกใช้ งาน
www.themegallery.com
Logo
เครื่องมือพัฒนาเว็บเพจ
การพัฒนาเว็บเพจด้ วยการลงรหัส HTML ด้ วยโปรแกรม Simple Text
Editors
การพัฒนาเว็บเพจด้ วยคาสั่ ง Save as HTML…
การพัฒนาเว็บเพจด้ วย Browser-Based HTML Editor
การพัฒนาเว็บเพจด้ วยคาสั่ ง Web Server/Developer Platforms
WYSIWYG HTML(What You See Is What You Get)
www.themegallery.com
Logo
หลักการออกแบบเว็บเพจ
หลักการออกแบบ สามารถทาได้ หลายระบบ ขึน้ อยู่กบั ลักษณะ
ของข้ อมูล ความชอบของผู้พฒ
ั นา ตลอดจนกลุ่มเป้าหมาย ที่
ต้ องการนาเสนอ เช่ น หากกลุ่มเป้าหมายเป็ นเด็กวัยรุ่นและ
นาเสนอข้ อมูลเกีย่ วกับ ความบันเทิง อาจจะออกแบบให้ มที ิศ
ทางการไหลของหน้ าเว็บเพจ ทีห่ ลากหลายให้ ลูกเล่ นได้ มากกว่ า
เว็บทีน่ าเสนอให้ กบั ผู้ใหญ่ หรือเว็บด้ านวิชาการ
www.themegallery.com
Logo
หลักการออกแบบเว็บเพจ (ต่ อ)
สามารถแบ่ งได้ 3 ลักษณะ
1. แบบลาดับขั้น (Hierarchy) เป็ นการจัดแสดงหน้ าเว็บ เรียงตามลาดับกิง่
ก้านแตกแขนงต่ อเนื่องไปเหมือนต้ นไม้ กลับหัว
www.themegallery.com
Logo
หลักการออกแบบเว็บเพจ (ต่ อ)
2. แบบเชิงเส้ น (Linear) เป็ นการจัดแสดงหน้ าเว็บเรียง
ต่ อเนื่องไปในทิศทางเดียว
www.themegallery.com
Logo
หลักการออกแบบเว็บเพจ (ต่ อ)
3. แบบผสม (Combination) เป็ นการจัดหน้ าเว็บชนิดผสม
ระหว่ างแบบลาดับขั้นและแบบเชิงเส้ น
www.themegallery.com
Logo
แนวคิดในการออกแบบ
เรียนรู้ จากเว็บไซต์ ต่างๆ
ประยุกต์ รูปแบบจากสิ่ งพิมพ์
ใช้ แบบจาลองเปรียบเทียบ
ออกแบบอย่ างสร้ างสรรค์
www.themegallery.com
Logo
หลักในการออกแบบเว็บไซต์
สร้ างลาดับชั้นความสาคัญขององค์ ประกอบ
สร้ างรู ปแบบ บุคลิก และสไตล์
สร้ างความสม่าเสมอตลอดทั้งไซต์
จัดวางองค์ ประกอบทีส่ าคัญไว้ ในส่ วนบนของหน้ าเสมอ
สร้ างจุดสนใจด้ วยความแตกต่ าง
จัดแต่ งหน้ าเว็บให้ เป็ นระเบียบและเรียบง่ าย
ใช้ กราฟิ กอย่ างเหมาะสม
www.themegallery.com
Logo
สิ่ งที่ต้องคานึงถึงในการออกแบบเว็บเพจที่ดี
1. ความแปลก ความแตกต่ าง (Contrast) คือแยกความแตกต่ างที่
อยู่บนจอภาพให้ เห็นชัดเจน เช่ นการใช้ ตวั หนังสื อ เส้ น สี ขนาด
ฯลฯ เพราะจะสามารถดึงดูดความสนใจได้ ดี
2. การยา้ ซ้า (Repetition) คือแบบแผนหรือสไตล์ ของผู้ออกแบบ
จะต้ องมีลกั ษณะรู ปแบบ สอดคล้ องกันทั้งหมด
Logo
สิ่ งทีต่ ้ องคานึงถึงในการออกแบบเว็บเพจที่ด(ี ต่ อ)
3. การจัดแถว การวางแนว (Alignment) คือ การจัดวาง
องค์ ประกอบต่ าง ๆ ต้ องไม่ สะเปะสะปะ ไร้ เหตุผล ไม่ ขดั กับ
ความรู้ สึก ของผู้อ่าน จัดให้ ดูสะอาด
4. ความใกล้ เคียง ความเกีย่ วเนื่อง (Proximity) คือ การจัดวาง
องค์ ประกอบทีเ่ กีย่ วเนื่องกัน ให้ เป็ นกลุ่มก้ อนเดียวกัน
Logo
องค์ ประกอบของการออกแบบเว็บไซต์
1. ความเรียบง่ าย
2. ความสม่าเสมอ
3. ความเป็ นเอกลักษณ์
4. เนือ้ หาที่มีประโยชน์
5. ระบบเนวิเกชันที่ใช้ งานง่ าย
6.ลักษณะทีน่ ่ าสนใจ หน้ าตาของเว็บไซต์ จะต้ องมีความสั มพันธ์
กับคุณภาพขององค์ ประกอบต่ างๆ
Logo
องค์ ประกอบของการออกแบบเว็บไซต์ (ต่ อ)
7. การใช้ งานอย่ างไม่ จากัด ผู้ใช้ ส่วนใหญ่ สามารถเข้าถึงได้
มากทีส่ ุ ด
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียง
เนือ้ หาอย่ างรอบคอบ
9.ระบบการใช้ งานทีถ่ ูกต้ อง การใช้ แบบฟอร์ มสาหรับกรอก
ข้ อมูลต้ องสามารถกรอกได้ จริง ใช้ งานได้ จริง
Logo
กระบวนการสร้ างและออกแบบเว็บเพจ
1. การวางแผน (Planning) ผูส้ ร้างเว็บจะต้องรวบรวมข้อมูลที่ตอ้ งการจะ
นามาสร้างเว็บ กาหนดวัตถุประสงค์และกลุ่มเป้ าหมาย
2. การออกแบบ (Design) การลงมือปฏิบตั ิ จัดพิมพ์เนื้อหา และ
คุณลักษณะอื่นที่ตอ้ งใช้ในเว็บ การออกแบบก็จะเน้นที่การจัดหน้าจอ
ของเว็บให้สอดคล้องกัน
3. การพัฒนา (Development) เน้นไปที่การตกแต่งและเสริ มเครื่ องมือต่าง
ๆ สาหรับเว็บ
Logo
กระบวนการสร้ างและออกแบบเว็บเพจ
4. การติดตั้ง (Publishing) การนาเว็บที่ได้สร้างขึ้นเข้าไปติดตั้งในเว็บ
เซอร์เวอร์เพื่อให้แสดงผลได้ในระบบอินเทอร์เน็ต หรื อจะเรี ยกว่า การ
อับโหลด (Up load)
5. การบารุงรักษา (Maintenance) เป็ นขั้นตอนประเมินผลและติดตามผล
การติดตั้งเว็บไซต์วา่ มีขอ้ ขัดข้องหรื อต้องปรับปรุ งเปลี่ยนแปลงเว็บ
เพิ่มเติมให้ทนั สมัยอยูเ่ สมอ อาจจะเรี ยกได้วา่ ขั้นตอนการอับเดท (Up
date)
Logo
การกาหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ
ควรใช้ ตัวอักษร a - z หรือตัวเลข 0 - 9 หรือผสมกัน
ตัวอักษร a - z ควรเป็ นตัวพิมพ์เล็ก
ห้ ามตั้งชื่อไฟล์ เป็ นภาษาไทย
ชื่อไฟล์ แรกของเอกสารเว็บ มักจะใช้ ชื่อ index หรือ
default
www.themegallery.com
Logo
ขั้นตอนการพัฒนาเว็บเพจ
 วางแผนการพัฒนาเว็บเพจ
 กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ทีใ่ ช้
เก็บเอกสารเว็บ
 สร้ างภาพ หรือจัดหาภาพทีเ่ กีย่ วข้ องกับเนือ้ หา แล้ วจัดเก็บไว้
ในไดเร็กทรอรี่ทสี่ ร้ างไว้
www.themegallery.com
Logo
ขั้นตอนการพัฒนาเว็บเพจ




วางแผนการพัฒนาเว็บเพจ
กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ทีใ่ ช้ เก็บเอกสารเว็บ
สร้ างภาพ หรือจัดหาภาพที่เกีย่ วข้ องกับเนือ้ หา แล้วจัดเก็บไว้ ในไดเร็กทรอรี่ทสี่ ร้ างไว้
สร้ างเอกสารเว็บ โดยกาหนดชื่อไฟล์ เอกสารเว็บ ตามข้ อกาหนดของผู้ดูแลระบบ
เครือข่ าย (Web System Administrator) และจัดเก็บไว้ ในไดเร็กทรอรี่ทสี่ ร้ างไว้
 ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์
 ส่ งข้ อมูลขึน้ เครื่องแม่ ข่าย (Server) และทาการตรวจสอบผลการเรียกดูจากเครื่องแม่ ข่าย
www.themegallery.com
Logo
หลักเกณฑ์ในการเลือกภาพ Graphic




ขนาดไฟล์ไม่ ควรเกิน 80 กิโลไบต์ เพือ่ ความรวดเร็วในการแสดงผล
ใช้ ไฟล์แบบ JPEG สาหรับรูปถ่ าย หรือรูปทีม่ ีสีเกิน 256 สี
ใช้ ไฟล์แบบ GIF สาหรับภาพวาดหรือภาพการ์ ตูนทีม่ ีสีไม่ เกิน 256 สี
เลือกภาพทีม่ ีความน่ าสนใจและดึงดูด เพือ่ ไม่ ให้ เสี ยเวลาทีเ่ สี ยไปในการ
Download
 ภาพเปล่าประโยชน์
www.themegallery.com
Logo
ไฟล์ภาพกราฟิ กที่นามาใช้ในการทาเว็บ
ไฟล์ ฟอร์ แมต JPG, JPEG
ไฟล์ ฟอร์ แมต GIF
ไฟล์ ฟอร์ แมต PNG
www.themegallery.com
Logo
ไฟล์สกุล JPG (Joint Photographer’s Experts Group)
จุดเด่น






แสดงสี ได้สูงสุ ด16.7 ล้านสี (สนับสนุนสี ได้ถึง 24 bit)
สามารถกาหนดค่าการบีบไฟล์ได้ตามที่ตอ้ งการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ ละเอียดในระบบ Progressive
มีโปรแกรมสนับสนุนการสร้างจานวนมาก
เรี ยกดูได้กบั Graphics Browser ทุกตัว
ตั้งค่าการบีบไฟล์ได้ (compress files)
จุดด้อย
 ทาให้พ้นื ของรู ปโปร่ งใสไม่ได้
www.themegallery.com
Logo
ไฟล์สกุล GIF (Graphics Interlace File)
 จุดเด่น
 แสดงสี ได้สูงสุด 256 สี
 สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่วา่ จะใช้ Windows, Unix
ก็สามารถเรี ยกใช้ไฟล์ภาพสกุลนี้ได้
 มีขนาดไฟล์ต่า จากเทคโนโลยีการบีบอัดภาพ ทาให้สามารถส่งไฟล์ภาพได้รวดเร็ว
 สามารถทาพื้นของภาพให้เป็ นพื้นแบบโปร่ งใสได้ (Transparent)
 มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
 มีโปรแกรมสนับสนุนการสร้างจานวนมาก
 เรี ยกดูได้กบั Graphics Browser ทุกตัว
 ความสามารถด้านการนาเสนอแบบภาพเคลื่อนไหว (GIF Animation)
 จุดด้อย
 ไฟล์ชนิดนี้กม็ ีจุดด้อยในเรื่ องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทาให้ การนาเสนอภาพถ่าย หรื อภาพที่
ต้องการความคมชัดหรื อภาพสดใส จะต้องอาศัยฟอร์แมตอื่น
www.themegallery.com
Logo
ไฟล์สกุล PNG (Portable Network Graphics)
 จุดเด่น





แสดงสี ได้สูงสุด 16.7 ล้านสี
สนับสนุนสี ได้ถึงตามค่า True color (16 bit, 32 bit หรื อ 64 bit)
สามารถกาหนดค่าการบีบไฟล์ได้ตามที่ตอ้ งการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
สามารถทาพื้นโปร่ งใสได้
 จุดด้อย




หากกาหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่า
ไม่สนับสนุนกับ Graphic Browser รุ่ นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4
ความละเอียดของภาพและจานวนสี ข้ ึนอยูก่ บั Video Card
โปรแกรมสนับสนุนในการสร้างมีนอ้ ย
www.themegallery.com
Logo
การออกแบบระบบเนวิเกชัน
ระบบเนวิเกชันแบบลาดับขั้น (Hierarchical)
ระบบเนวิเกชันแบบโกลบอล (Global)
ระบบเนวิเกชันแบบโลคอล (Local)
ระบบเนวิเกชันเฉพาะที่ (Ad Hoc)
www.themegallery.com
Logo
HTML (Hyper Text Markup Language)
HTML เป็ นภาษาที่ใช้ ในการพัฒนาเว็บเพจ เพือ่ ให้
โปรแกรมเว็บ บราวเซอร์ (web brower) ต่ างๆ สามารถ
แปลงคาสั่ ง แสดงผลในลักษณะของรู ปภาพ ตัวอักษร เสี ยง
ภาพเคลือ่ นไหว โดยไฟล์ ทสี่ ร้ างจะมีนามสกุล .html หรือ
.htm ก็ได้
www.themegallery.com
Logo
HTML (Hyper Text Markup Language)
<html>
<head>
<title>Hello</title>
</head>
<body>
<p>สวัสดี</p>
</body>
</html>
<HTML> หมายถึง การระบุว่าเอกสารใช้ ภาษา
HTML และบรรทัดสุ ดท้ ายจะต้ องมี </HTML>
<HEAD> เพือ่ ระบุชื่อเว็บเพจ โดยจะต้ องใช้ คาสั่ ง
<TITLE> เป็ นตัวบอก และบรรทัดสุ ดท้ ายจะต้ องมี
</TITLE> </HEAD>
<body> เปิ ดส่ วนเนือ้ หา </body>
next
www.themegallery.com
Logo
Tag
Tag เป็ นลักษณะเฉพาะของภาษา HTML ใช้ ในการระบุรูปแบบคาสั่ ง หรือการลง
รหัสคาสั่ ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than
bracket ( > ) โดยที่ Tag HTML แบ่ งได้ 2 ลักษณะ คือ
 Tag เดีย่ ว
เป็ น Tag ที่ไม่ตอ้ งมีการปิ ดรหัส เช่น <P>, <HR> เป็ นต้น
 Tag เปิ ด/ปิ ด
เป็ น Tag ที่ประกอบด้วย Tag เปิ ด และ Tag ปิ ด โดย Tag ปิ ด จะมีเครื่ องหมาย slash
(/) นาหน้าคาสัง่ ใน Tag นั้นๆ เช่น <B>…</B>, <P>…</P> เป็ นต้น
back
www.themegallery.com