การออกแบบเว็บไซต์

Get Started. It's Free
or sign up with your email address
การออกแบบเว็บไซต์ by Mind Map: การออกแบบเว็บไซต์

1. 1. คำศัพท์ที่เกี่ยวข้องกับเว็บ

1.1. 1.1 Web Page

1.2. 1.2 Home Page

1.3. 1.3 Web Site

1.4. 1.4 Internet

1.5. 1.5 Client

1.6. 1.6 Server

1.7. 1.7 Web Server

1.7.1. 1.8.2 กูเกิลโครม (Google Chrome หรือ Chrome)

1.8. 1.8 Web Browser

1.8.1. 1.81 อินเทอร์เน็ตเอกซ์พลอเรอร์ (IE : Internet Explorer Browser)

1.8.2. 1.8.3 ไฟร์ฟอกซ์ (Firefox)

1.8.3. 1.8.4 ซาฟารี (Safari)

1.8.4. 1.8.5 โอเปร่า (Opera)

1.9. 1.9 World Wide Web

1.10. 1.10 Electronic Mail

1.10.1. 1.10.1 องค์ประกอบของ E-mail Address

1.10.1.1. 1) ชื่อผู้ใช้ (Username)

1.10.1.2. 2) ชื่อโดเมน (Domain Name) เช่น [email protected]

1.10.2. 1.10.2 การใช้งานอีเมล

1.10.2.1. 1) Corporate E-mail คือ อีเมลที่หน่วยงานต่างๆ สร้างขึ้นให้กับพนักงานหรือบุคคลากรในองค์กรนั้น

1.10.2.2. 2) Free E-mail คือ อีเมลที่สามารถสมัครได้ฟรีตาม Web Mail ต่างๆ

1.11. 1.11 Domain Name ชื่อที่เรียกของเว็บไซต์ ใช้สำหรับระบุที่อยู่ของเว็บนั้นๆแทน IP Address (Internet Protocol Address)

1.11.1. 1.11.1 โดเมนเนม 2 ระดับ เช่น www.facebook.com

1.11.2. 1.11.2 โดเมนเนม 3 ระดับ เช่น www.pticec.ac.th

1.12. 1.12 URL (Uniform Resource Locator) คือ ตำแหน่งอ้างอิงเว็บเพจในระบบอินเทอร์เน็ต

1.12.1. 1.12.1 Content Identifier คือ ส่วนที่ใช้ระบุรูปแบบการรับทรัพยากรที่เชื่อม โยงกับภายนอก

1.12.2. 1.12.2 Domain Name คือ ส่วนที่ใช้ระบุชื่อเว็บ

1.12.3. 1.12.3 ไดเรกทอรีหรือส่วนระบุตำแหน่ง คือ ระบุเก็บหรือโฟลเดอร์ที่เก็บเว็บไซต์ในเครื่องแม่ข่าย

1.12.4. 1.12.4 ชื่อไฟล์ของหน้าเว็บเพจนั้นๆ คือ ส่วนสุดท้ายของ URL จะเป็นชื่อไฟล์ข้อมูลเว็บเพจที่เราสร้างขึ้น

1.13. 1.13 FTP เป็นการบริการที่เกี่ยวข้องกับการโอนย้ายไฟล์ผ่ายระบบอินเทอร์เน็ต การโอนย้ายไฟล์สามารถแบ่งได้ ดังนี้

1.13.1. 1.13.1 การดาวน์โหลดไฟล์ คือ การดึงข้อมูลจากเครื่องแม่ข่าย มาเก็บไว้ที่เครื่องลูกข่าย ปัจจุบันหลายเว็บไซต์เปิดให้ดาวน์โหลดโปรแกรมฟรี

1.13.2. 1.13.2 การอัปโหลดไฟล์ คือ การนำไฟล์ข้อมูลจากเครื่องลูกข่ายไปเก็บไว้บนเครื่องแม่ข่าย ผ่านระบบอินเทอร์เน็ต

1.14. 1.14 IRC หรือบริการสนทนาบนอินเทอร์เน็ต คือ การส่งข้อความถึงกันโดยทันทีทันใด นอกจากนี้ยังสามารถส่งสัญลักษณ์ต่างๆ เช่น รูปภาพนิ่ง ภาพเคลื่อนไหว และวิดีโอได้ด้วย

1.15. 1.15 Search Engine เป็นโปรแกรมที่คอยให้บริการสืบค้นหาข้อมูลโดยเฉพาะข้อมูลบนอินเทอร์เน็ต ซึ่งครอยคลุมทั้งข้อความ รูปภาพ ภาพเครื่องไหว เพลง ซอฟแวร์ แผนที่ ข้อมูลบุคคล

1.16. 1.16 Webboard เป็นบริการกระดานข่าวหริอเป็นศูนย์กลางในการแสดงความคิดเห็น มีการตั้งกระทู้ถาม - ตอบในหัวข้อที่สนใจ

1.17. 1.17 Social Media เป็นโปรแกรมที่ผู้ใช้อินเทอร์เน็ตสามารถแลกเปลี่ยนประสบการณ์ซึ่งกันและกันได้ทุกที่ทุกเวลาผ่านสื่อต่างๆ เช่น facebook lnstagram twitter line เป็นต้น

2. 2. หลักการออกแบบเว็บไซต์

2.1. 2.1 การออกแบบโรงสร้างเว็บไซต์

2.1.1. 2.1.1 แบบเรียงลำดับ

2.1.2. 2.1.2 แบบระดับชั้น

2.1.3. 2.1.3 แบบผสม

2.2. 1.12.2 Domain Name คือ ส่วนที่ระบุชื่อเว็บไซต์

2.3. 2.2 การออกแบบระบบเนวิเกชัน

2.3.1. 2.2.1 เครื่องนำทาง

2.3.1.1. 1) เมนูหลัก

2.3.1.2. 2) เมนูเฉพาะกลุ่ม

2.3.1.3. 3) เครื่องมือเสริม

2.3.2. 2.2.2 เครื่องบอกตำแหน่ง

2.3.2.1. ลักษณะระบบเนวิเกชันที่ดี

2.3.2.1.1. 1) อยู่ในตำแหน่งที่เห็นได้ชัดและเข้าถึงง่าย

2.3.2.1.2. 2) เข้าใจง่ายหรือมีข้อความกำกับชัดเจน

2.3.2.1.3. 3)มีความสม่ำเสมอและเป็นระบบ ไม่ชวนให้สับสนหรือกลับไปกลับมา

2.3.2.1.4. 4) มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก

2.3.2.1.5. 5) มีจำนวนรายการพอเหมาะไม่มากเกินไป

2.3.2.1.6. 6) มีหลายทางเลืกให้ใช้ เช่น เมนูกราฟิก, เมนูข้อความ เป็นต้น

2.3.2.1.7. 7) มีลิงก์ให้คลิกกลับไปยังโฮมเพจได้เสมอ

3. 3. ส่วนประกอบของเว็บไซต์

3.1. 3.1 ส่วนหัว (Header)

3.2. 3.2 ส่วนของเนื้อหา (Body)

3.3. 3.2 ส่วนท้าย (Footer)

3.4. 3.3 แถบข้าง (Side Bar)

4. 4. การใช้สี

4.1. 4.1 จิตวิทยาเกี่ยวกับสี

4.1.1. 4.1.1 สีฟ้า ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เอาการเอางาน

4.1.2. 4.1.2 สีเขียว เป็นสีในวรรณะเย็นจะสร้างความรู้สึกเย็นสบาย

4.1.3. 4.1.3 สีเหลือง เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจ

4.1.4. 4.1.4 สีแดง เป็นสีสร้างความตื่นเต้นและกระตุ้นสมอง

4.1.5. 4.1.5 สีม่วง ให้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ มีอำนาจ มีพลังแฝงอยู่

4.1.6. 4.1.6 สีส้ม ให้ความรู้สึกร้อน ความอบอุ่น ความสดใส ความมีชีวิตชีวา

4.1.7. 4.1.7 สีตาล ให้ความรู้สึกอบอุ่น ได้พักผ่อน แต่ควรใช่ร่วมกับสีส้ม สีเหลือง หรือสีทอง ถ้าใช้สีน้ำตาลเพียงสีเดียว อาจทำให้รู้สึกหดหู่ได้

4.1.8. 4.1.8 สีเทา ให้ความรู้สึกเศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ

4.1.9. 4.1.9 สีขาว ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง

4.2. 4.2 ทฤษฎีการใช้สี

4.2.1. 4.2.1 แบบที่ 1 ชุดสีแบบสามเส้า ต้องการออกแบบให้เว็บไซต์รู้สึกโดดเด่นสะดุดตา

4.2.2. 4.2.2 แบบที่ 2 ชุดโทนสีเดียวกัน เป็นชุดที่มีการไล่ระดับสี เป็นชุดสีที่นิยม เพราะทำให้เว็บไซต์ดูทันสมัย

4.2.3. 4.2.3 แบบที่ 3 ชุดสีตรงข้าม เป็นชุดสีที่ให้ความรู้สึกตัดกันเหมาะสำหรับเว็บไซต์ ที่ต้องการความโดนเด่นมากๆ

5. 5. การจัดตัวอักษรสำหรับเว็บไซต์

5.1. จัดชิดซ้าย ตัวอักษรที่ถูกจัดให้ชิดซ้ายจะมีปลายด้านขวาไม่สม่ำเสมอ เนื่องจากตัวักษรในแต่ละบรรทัดมีความยาวไม่เท่ากัน แต่ก็สามารถหาจุดเริ่มต้นของแต่ละบรรทัดได้ง่ายกว่า

5.2. จัดชิดขวา การตัดตัวอักษรให้ชดขวาจะดูน่าสนใจ แต่จุดเริ่มต้นของแต่ละบรรทัดที่ไม่สม่ำเสมอทำให้อ่านยาก เนื่องจากผู้อ่านต้องหยุดชะงักเพื่อหาจุดเริ่มต้นของแต่ละบรรทัด

5.3. จัดกึ่งกลาง การจัดตัวอักษรให้อยู่กึ่งกลางใช้ได้ผลดีกับข้อมูลที่มีปริมาณไม่มาก เหมาะสมกับรูปแบบที่เป็นทางการ เช่น คำประกาษหรือคำเชื้อเชิญ เป็นต้น

6. 6. ไฟล์รูปภาพที่เหมาะสำหรับการพัฒนาเว็บไซต์

6.1. 6.1 ไฟล์ภาพนามสกุล JPG คือภาพถ่ายจากหล้องถ่ายภาพดิจิตอลทั่วไปเป็นภาพความละเอียดของภาพสูง

6.2. 6.2 ไฟล์ภาพนามสกุล GIF คือภาพกราฟิกที่จัดทำขี้นจากโปรแกรมคอมพิวเตอร์ เป็นภาพความละเอียดของภาพต่ำ

6.3. 6.3 ไฟล์ภาพนามสกุล PNG เป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบัน เพราะได้นำจุดเด่นของไฟล์ JPG และ GIF มาพัฒนาร่วมกัน

7. 7. ขั้นตอนการพัฒนาเว็บไซต์

7.1. 7.1 วิเคราะห์และจัดโครงสร้างข้อมูล

7.1.1. 7.1.1 แผนผังโครงสร้างของเว็บไซต์

7.1.2. 7.1.2 ระบบนำทางหรือเนวิเกชัน

7.1.3. 7.1.3 องค์ประกอบที่จะนำมาใช้บนเว็บเพจมีอะไรบ้าง เช่น ภาพกราฟิก, เสียง, วีิดีโอ, มัลติมีเดีย

7.1.4. 7.1.4 ข้อกำหนดเกี่ยวกับลักษระหน้าตาและรูปแบบของเว็บเพจ

7.1.5. 7.1.5 ข้อกำหนดของโปรแกรม ภาษาสคริปต์ หรือแอปพลิเคชั่น และฐานข้อมูลที่ใช้ในเว็บไซต์

7.1.6. 7.1.6 คุณสมบัติของเว็บเซิร์ฟเวอร์รวมถึงข้อจำกัดและบริการเสริมต่างๆ ที่มีให้

7.2. 7.2 ออกแบบเว็บเพจและเตรียมข้อมูล

7.3. 7.3 ลงมือสร้างและทดสอบ

7.4. 7.4 เผยแพร่และส่งเสริมให้เป็นที่รู้จัก

7.4.1. 7.4.1 แบบง่ายๆ

7.4.2. 7.4.2 แบบที่ใช้งบประมาณมากขึ้น

7.5. 7.5 ดูแลและพัฒนา

7.6. 7.6 ทีมงานพัฒนาเว็บไซต์

7.6.1. Wed Master

7.6.2. Wed Designer

7.6.3. Wed Programmer

7.6.4. Contrnt Writer/Editor

7.7. 7.7 การศึกษาความต้องการของผู้เข้าเว็บไซต์

7.7.1. ข้อมูล

7.7.2. ข่าวสารความเคลื่อนไหว

7.7.3. ของแจกฟรี

7.7.4. การมีปฎิสัมพันธ์

7.7.5. ความบังเทิง

7.8. 7.8 เนื้อหาที่ควรมีในเว็บไซต์

7.8.1. ข้อมูลเกี่ยวกับบริษัทองค์กรหรือผู้จัดทำ

7.8.2. รายละเอียดของผลิตภัณฑ์หรือบริการ

7.8.3. ข่าวสาร

7.8.4. คำถามที่มีผู้ใช้ถามบ่อย

7.8.5. ข้อมูลในการติดต่อ

8. 8. ภาษาที่ใช้ในการพัฒนาเว็บไซต์

8.1. 8.1 ภาษา HTML

8.2. 8.2 ภาษา CSS

8.3. 8.3 ภาษา XHTML

8.4. 8.4 ภาษา Script

8.4.1. Server Side Script

8.4.2. Client Side Script

9. 9. รูปแบบการพัฒนาเว็บไซต์

9.1. 9.1 Static Website เป็นเว็บที่สร้างด้วยภาษา HTML ธรรมดา อาจจะสร้างโดยโปรแกรม Dreamweaver นามสกุลของไฟล์ที่สร้างจะเป็น .html โดยข้อความและรูปภาพบนหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้

9.1.1. ข้อดี

9.1.1.1. สร้างได้ง่ายหากมีพื้นฐานเกี่ยวกับภาษา HTML

9.1.1.2. ดูแลง่ายเนื่องจากไม่มีการเปลี่ยนแปลงอะไรมากมาย

9.1.1.3. ใช้เวลาในการเรียกเว็บเพจน้อยกว่าแบบอื่นๆ

9.1.2. ข้อเสีย

9.1.2.1. ถ้าเป็นข้อมูลที่ต้องเปลี่ยนแปลงบ่อยจะเกิดความไม่สะดวก

9.1.2.2. ขาดความยืดหยุ่น

9.1.2.3. ไม่สามารถสร้างการโต้ตอบกับผู้ใช้ได้

9.2. 9.2 Dynnamic Website เป็นเว็บแบบ Dynnamic ที่มีคำสั่งซึ่งทำงานบนเครื่อง Sever เมื่อผู้ใช้เข้าไปยังเว็บเพจแบบนี้ Server จะอ่านไฟล์ดังกล่าววก่อนแล้วแปล Code ที่ได้เขียนไว้ในหน้าเว็บนั้นทั้งหมดเพื่อให้ได้ผลลัพธ์ออกมา