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

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

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

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

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

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

1.1.3. 2.1.3 แบบผสม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1. 1.1 Web Page

2.2. 1.2 Home Page

2.3. 1.3 Web Site

2.4. 1.4 Internet

2.5. 1.5 Client

2.6. 1.6 Server

2.7. 1.7 Web Server

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

2.8. 1.8 Web Browser

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

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

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

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

2.9. 1.9 World Wide Web

2.10. 1.10 Electronic Mail

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4.1. 6.4.1 แบบง่ายๆ

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

3.5. 6.5 ดูแลและพัฒนา

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

3.6.1. Wed Master

3.6.2. Wed Designer

3.6.3. Wed Programmer

3.6.4. Contrnt Writer/Editor

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

3.7.1. ข้อมูล

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

3.7.3. ของแจกฟรี

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

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

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

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

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

3.8.3. ข่าวสาร

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

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

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

4.1. 4.1 ภาษา HTML

4.2. 4.2 ภาษา CSS

4.3. 4.3 ภาษา XHTML

4.4. 4.4 ภาษา Script

4.4.1. Server Side Script

4.4.2. Client Side Script

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

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

5.1.1. ข้อดี

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

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

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

5.1.2. ข้อเสีย

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

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

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

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

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

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

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

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

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