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

2. หลักการออกแบบเว็บไซต์
เว็บไซต์เป็นสื่อที่ได้รับความนิยมอย่ามากบนอินเตอร์เน็ต ซึ่งเว็บไซต์เป็นสื่อที่อยู่ในความควบคุมของผู้ใช้
โดยสมบูรณ์ กล่าวคือ ผู้ใช้สามารถตัดสินใจเลือกได้ว่าจะดูเว็บไซต์ใดและจะไม่เลือกดูเว็บไซต์ใดได้ตามต้องการ จึง
ทาให้ผู้ใช้ไม่มีความอดทนต่ออุปสรรคและปัญหาที่เกิดจากการออกแบบเว็บไซต์ผิดพลาดถ้าผู้ใช้เห็นว่าเว็บที่กาลังดู
อยู่นั้นไม่มีประโยชน์ต่อตัวเขา หรือไม่เข้าใจว่าเว็บไซต์นี้จะใช้งานอย่างไร เขาก็สามารถที่จะเปลี่ยนไปดูเว็บไซต์
อื่นๆ ได้อย่างรวดเร็ว เนื่องจากในปัจจุบันมีเว็บไซต์อยู่มากมาย และยังมีเว็บไซด์ที่เกิดขึ้นใหม่ ๆ ทุกวัน ผู้ใช้จึงมี
ทางเลือกมากขึ้น และสามารถเปรียบเทียบคุณภาพของเว็บไซด์ต่าง ๆ ได้เอง
เว็บไซด์ที่ได้รับการออกแบบอย่างสวยงาม มีการใช้งานที่สะดวก ย่อมได้รับความสนใจจากผู้ใช้ มากกว่า
เว็บไซด์ที่ดูสับสนวุ่นวาย มีข้อมูลมากมายแต่หาอะไรไม่เจอ นอกจากนี้ยังใช้เวลาในการแสดงผลแต่ละหน้านาน
เกินไป ซึ่งปัญหาเหล่านี้ล้วนเป็นผลมาจากการออกแบบเว็บไซด์ไม่ดีทั้งสิ้น
ดังนั้น การออกแบบเว็บไซด์จึงเป็นกระบวนการสาคัญในการสร้างเว็บไซด์ ให้ประทับใจผู้ใช้ ทาให้เขาอยากกลับ
เข้ามาเว็บไซด์เดิมอีกในอนาคต ซึ่งนอกจากต้องพัฒนาเว็บไซด์ที่ดีมีประโยชน์แล้ว ยังต้องคานึงถึงการแข่งขันกับ
เว็บไซด์อื่น ๆ อีกด้วย
องค์ประกอบของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคานึงถึง องค์ประกอบสาคัญดังต่อไปนี้
1. ความเรียบง่าย (Simplicity)
หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก กล่าวคือในการสื่อสารเนื้อหากับ
ผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการนาเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและ
ภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคาราญต่อผู้ใช้ตัวอย่าง
เว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่นApple Adobe MicrosoftหรือKokiaที่
มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก
2. ความสม่่าเสมอ (Consistency)
หมายถึง การสร้างความสม่าเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้ง
เว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้เกิดความ
สับสนและไม่แน่ใจว่ากาลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่จะมี
รูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation)และโทนสีที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์

3. 3. ความเป็นเอกลักษณ์ (Identity)
ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถึง
เอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์
เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจ
ทาให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือขององค์กรได้
4. เนื้อหา (Useful Content)
ถือเป็นสิ่งสาคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่
เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สาคัญที่สุดคือเนื้อหาที่ทีม
ผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้า
เป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จาเป็นต้องกลับมา
ใช้งานลิงค์เหล่านั้นอีก
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่มีความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์
ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก
ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่าเสมอ เช่น อยู่ตาแหน่งบนสุด
ของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่าง
ด้วย เพื่อช่วยอานวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)
ลักษณะที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสาคัญ แต่โดยรวมแล้วก็สามารถสรุป
ได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้
ให้เห็น ชนิดตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility)
การใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจากัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่
หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่
แสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มี
ผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ความสาคัญกับเรื่องนี้ให้มาก

4. 8. ความคงที่ในการออกแบบ (Design Stability)
ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญกับการออกแบบ
เว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้นอย่างลวก ๆ ไม่
มีมาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและทาให้ผู้ใช้หมด
ความเชื่อถือ
9. ความคงที่ของการท่างาน (Function Stability)
ระบบการทางานต่าง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และ
ตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่
เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหา
ที่สร้างความราคาญกับผู้ใช้เป็นอย่างมาก
การออกแบบเว็บไซต์
ในการออกแบบเว็บไซต์นั้นประกอบด้วยกระบวนการต่าง ๆ มากมาย เช่น การออกแบบโครงสร้าง
ลักษณะหน้าตา หรือการเขียนโปรแกรม แต่มีหลายคนที่พัฒนาเว็บไซต์ โดยขาดการวางแผนและทางานไม่เป็น
ระบบ ตัวอย่างเช่น การลงมือออกแบบโดยการใช้โปรแกรมช่วยสร้างเว็บ เนื้อหาและรูปแบบก็เป็นไปตามที่นึกขึ้น
ได้ขณะนั้น และเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลย ทาให้เว็บนั้นมีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้จึง
เสี่ยงกับความล้มเหลวค่อนข้างมาก
ความล้มเหลวที่พบเห็นได้ทั่วไป ได้แก่ เว็บที่แสดงข้อความว่าอยู่ระหว่างการก่อสร้าง(Under
ConstructionหรือComing soon)ซึ่งแสดงให้เห็นถึงการขาดการวางแผนที่ดีบางเว็บถือได้ว่าตายไปแล้ว เนื่องจาก
ข้อมูลไม่ทันสมัย ขาดการพัฒนาปรับปรุงเทคโนโลยีล้าสมัย ลิงค์ผิดพลาด สิ่งเหล่านี้แสดงให้เห็นถึงการขาดการ
ดูแล ตรวจสอบและพัฒนาให้ทันสมัยอยู่เสมอ
การออกแบบเว็บไซต์อย่างถูกต้องจะช่วยลดความผิดพลาดเหล่านี้ และช่วยลดความเสี่ยงที่จะทาให้เว็บ
ประสบความล้มเหลว การออกแบบเว็บไซต์ที่ดีต้องอาศัยการออกแบบและจัดระบบข้อมูลอย่างเหมาะสม
กระบวนการแรกของการออกแบบเว็บไซต์คือการกาหนดเป้าหมายของเว็บไซต์กาหนดกลุ่มผู้ใช้ ซึ่งการจะ
ให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจาลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหา
และการใช้งานเว็บไซต์ได้อย่างเหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง

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

6. - คาถามยอดนิยม
- ข้อมูลในการติดต่อ
ออกแบบหน้าเว็บไซต์ (Page Design)
หน้าเว็บเป็นสิ่งแรกที่ผู้ใช้จะได้เห็นขณะที่เปิดเข้าสู่เว็บไซต์และยังเป็นสิ่งแรกที่แสดงถึงประสิทธิภาพใน
การออกแบบเว็บไซต์อีกด้วย หน้าเว็บจึงเป็นสิ่งสาคัญมาก เพราะเป็นสื่อกลางให้ผู้ชมสามารถใช้ประโยชน์จาก
ข้อมูลของระบบงานของเว็บไซต์นั้นได้ โดยปกติหน้าเว็บจะประกอบด้วย รูปภาพ ตัวอักษร สีพื้น ระบบเนวิเกชั่น
และองค์ประกอบอื่น ๆ ที่ช่วยสื่อความหมายของเนื้อหาและอานวยความสะดวกต่อการใช้งาน
หลักสาคัญในการออกแบบหน้าเว็บก็คือ การใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกันเพื่อสื่อความหมาย
เกี่ยวกับเนื้อหาหรือลักษณะสาคัญของเว็บไซต์ โดยมีเป้าหมายสาคัญเพื่อการสื่อความหมายที่ชัดเจนและน่าสนใจ
บนพื้นฐานของความเรียบง่ายและความสะดวกของผู้ใช้
การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
โครงสร้างเว็บไซท์ (Site Structure )เป็นแผนผังของการลาดับเนื้อหาหรือการจัดวางตาแหน่งเว็บเพจ
ทั้งหมด ซึ่งจะทาให้เรารู้ว่าทั้งเว็บไซท์ประกอบไปด้วยเนื้อหาอะไรบ้าง และมีเว็บเพจหน้าไหนที่เกี่ยวข้องเชื่อมโยง
ถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซท์จึงเป็นเรื่องสาคัญ เปรียบเสมือนกับการเขียนแบบอาคารก่อนที่จะลง
มือสร้าง เพราะจะทาให้เรามองเห็นหน้าตาของเว็บไซท์เป็นรูปธรรมมากขึ้น สามารถออกแบบระบบเนวิเกชั่นได้
เหมาะสม และเป็นแนวทางการทางานที่ชัดเจน สาหรับขั้นตอนต่อๆไป นอกจากนี้โครงสร้างเว็บไซท์ที่ดียังช่วยให้
ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
วิธีการจัดโครงสร้างเว็บไซท์สามารถทาได้หลายแบบ แต่แนวคิดหลักๆที่นิยมใช้กันมีอยู่2 แบบคือ
จัดตามกลุ่มเนื้อหา (Content-based Structure )
จัดตามกลุ่มผู้ชม (User-based Structure )
รูปแบบของโครงสร้างเว็บไซต์
เราสามารถวางรูปแบบโครงสร้างเว็บไซท์ได้หลายแบบตามความเหมาะสม เช่น
แบบเรียงลาดับ (Sequence )เหมาะสาหรับเว็บไซท์ที่มีจานวนเว็บเพจไม่มากนักหรือเว็บไซท์ที่มีการ
นาเสนอข้อมูลแบบทีละขั้นตอน
แบบระดับชั้น (Hierarchy )เหมาะสาหรับเว็บไซท์ที่มีจานวนเว็บเพจมากขึ้น เป็นรูปแบบที่เราจะพบได้
ทั่วไป

7. แบบผสม(Combination )เหมาะสาหรับเว็บไซท์ที่ซับซ้อน เป็นการนาข้อดีของรูปแบบทั้ง2 ข้างต้นมา
ผสมกัน
การใช้สีในการออกแบบเว็บไซต์
การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สีให้เหมาะสม
กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถทาให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ สี
เป็นองค์ประกอบหลักสาหรับการตกแต่งเว็บ จึงจาเป็นอย่างยิ่งที่จะต้องทาความเข้าใจเกี่ยวกับการใช้สี
ระบบสีที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลาแสงที่เรียกว่าCRT (Cathode ray
tube)โดยมีลักษณะระบบสีแบบบวก อาศัยการผสมของของแสงสีแดง สีเขียว และสีน้าเงิน หรือระบบสีRGB
สามารถกาหนดค่าสีจากถึงได้ จากการรวมสีของแม่สีหลักจะทาให้เกิดแสงสีขาว มีลักษณะเป็นจุดเล็ก ๆ บน
หน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็นสีที่ถูกผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือ
พิกเซล (Pixel)เป็นส่วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจานวนบิตที่ใช้ในการกาหนดความสามารถ
ของการแสดงสีต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป(Bit-depth)ในภาษาHTMLมีการกาหนดสีด้วย
ระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย(#)อยู่ด้านหน้าและตามด้วยเลขฐานสิบหกจานวนอักษรอีกหลัก โดยแต่ละ
ไบต์ (byte)จะมีตัวอักษรสองตัว แบ่งออกเป็นกลุ่ม เช่น#FF12ACการใช้ตัวอักษรแต่ละไบต์นี้เพื่อกาหนดระดับ
ความเข้มของแม่สีแต่ละสีของชุดสีRGBโดยหลักแรก แสดงถึงความเข้มของสีแดงหลักต่อมา แสดงถึงความเข้มของ
สีเขียวหลักสุดท้ายแสดงถึงความเข้มของสีน้าเงิน
สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัดกระตุ้นการรับรู้ทางด้านจิตใจมนุษย์ สีแต่ละสีให้
ความรู้สึก อารมณ์ที่ไม่เหมือนกัน สีบางสีให้ความรู้สึกสงบ บางสีให้ความรู้สึกตื่นเต้นรุนแรง สีจึงเป็นปัจจัยสาคัญ
อย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้นการเลือกใช้โทนสีภายในเว็บไซต์เป็นการแสดงถึงความแตกต่างของสีที่
แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็น สามารถแบ่งออกเป็นกลุ่ม
คือ
1.สีโทนร้อน (Warm Colors)เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ
สีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชามีชีวิตชีวามากยิ่งขึ้น
2.สีโทนเย็น (Cool Colors)แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมาก
ที่สุด สามารถโน้มนาวในระยะไกลได้
3.สีโทนกลาง (Neutral Colors)สีที่เป็นกลาง ประกอบด้วย สีดา สีขาว สีเทา และสีน้าตาล กลุ่ม
สีเหล่านี้คือ สีกลางที่สามารถนาไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีกลางขึ้นมา

8. ** สีนั้นมีความสาคัญอย่างยิ่งในการออกแบบเว็บไซต์ การเลือกสีให้เข้ากับเนื้อหาของเว็บไซต์ จะทาให้
เว็บไซต์มีความน่าเชื่อถือยิ่งขึ้น และยังส่งผลอย่างมากกับความสวยงามของเว็บไซต์
สีบอกความรู้สึก
สีฟ้า
ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการเอางาน ละเอียด รอบคอบ สง่างาม มีศักดิ์ศรี สูง
ศักดิ์ เป็นระเบียบถ่อมตน
สามารถลดความตื่นเต้น และช่วยทาให้มีสมาธิ แต่ถ้ามีสีน้าเงินเข้มเกินไป ก็จะทาให้รู้สึกซึมเศร้าได้
สีเขียว
เป็นสีในวรรณะเย็น จะสร้างความรู้สึกเย็นสบาย ใช้เป็นสีที่ช่วยผ่อนคลายความเครียดได้ ให้ความรู้สึก สงบ
เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความปลอดภัย ปกติ ความสุข ความสุขุม เยือกเย็น
สีเหลือง
เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจ ให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง
ความเบิกบานสดชื่น ชีวิตใหม่ ความสด ใหม่ ความสุกสว่าง การแผ่กระจาย อานาจบารมี
ให้ลองสังเกตดูว่า วันที่ท้องฟ้ามืดครื้มปราศจากแสงแดด เราจะรู้สึกหงอยเหงา หดหู่ แต่พอมีแสงแดด ท้องฟ้า
สว่าง มีสีเหลือง เราจะรู้สึกมีชีวิตชีวาขึ้น
สีแดง
เป็นสีที่สร้างความตื่นเต้น และกระตุ้นสมอง สีแดงปานกลางแสดงถึงความมีสุขภาพดี ความมีชีวิต ความรัก
ความสาคัญ ความอุดมสมบูรณ์ ความมั่งคั่ง
สีแดงจัดมีความหมายแฝงด้านกามารมณ์ นอกจากนี้สีแดงยังสร้างความรู้สึกรุนแรง ให้ความรู้สึกร้อน กระตุ้น
ท้าทาย เคลื่อนไหว ตื่นเต้น เร้าใจ มีพลัง มันจะใช้กันกรณีที่เกี่ยวกับความตื่นเต้น หรืออันตราย
สีม่วง
ให้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ ซ่อนเร้น มีอานาจ มีพลังแฝงอยู่ ความรัก ความเศร้า ความ
ผิดหวัง ความสงบ ความสูงศักดิ์
เป็นสีที่ปลอบโยน และช่วยลดความเครียด แต่เดิมสีม่วงได้มาจากสัตว์มีกระดอง,เปลือก ในทะเลเมดิเตอร์เร
เนียน มีชื่อว่า Purpura จึงได้ชื่อภาษาอังกฤษว่า
Purple

9. สีส้ม
ให้ความรู้สึก ร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การปลดปล่อย ความเปรี้ยว การ
ระวัง
เป็นสีที่เร้าความรู้สึก ปรกติควรใช้แต่น้อยเมื่อเทียบกับสีอื่น สังเกตว่าคนที่อยู่ในห้องสีส้มจะอยู่ได้ไม่นาน
สีน้่าตาล
ให้ความรู้สึกอบอุ่น ได้พักผ่อน แต่ควรใช้ร่วมกับสีส้ม เหลือง หรือสีทอง เพราะถ้าใช้สีน้าตาลเพียงสีเดียว อาจ
ทาให้เกิดความรู้สึกหดหู่ได้
สีเทา
ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ ความเงียบ สุภาพ สุขุม ถ่อมตน
สีนี้มีข้อดีคือทาให้เย็น แต่สร้างความสร้างความรู้สึกหม่นหมองได้ ควรใช้ร่วมกับสีที่มีชีวิต โทนสว่างอย่างน้อย
หนึ่งสี
สีขาว
ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความจริง ความ
เมตตา ความศรัทธา ความดีงาม
ให้ความรู้สึกรื่นเริง โดยเฉพาะเมื่อใช้กับสีแดง เหลือง และส้ม
** ในการสร้างเว็บก็ควรที่จะเลือกสีให้เหมาะกับสม
ทฤษฎีสี
รูปด้านล่างวงล้อความสัมพันธ์ของสี ซึ่งบรรจุสีที่นิยมใช้ในเว็บไซต์ไว้20 สี เหมาะสาหรับผู้ที่กาลังเลือกสี
ที่จะใช้ในเว็บไซต์อยู่เราสามารถใช้ความสัมพันธ์ของวงล้อขอสีนี้ให้เกิดประโยชน์ได้อย่างมากมาย เช่น
ต้องการออกแบบให้เว็บไซต์รู้สึกตัดกันโดยสิ้นเชิง เราอาจใช้ชุดสี4 สีที่ทามุมกัน 90 องศา เช่นดังตัวอย่างถ้า
เราเลือกชุดสี 1 , 6 , 11 , 16 สีที่ได้จะตัดกันชัดเจน
ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็อาจเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์8 , 9 , 10 , 11 ก็จะ
ได้สีในโทนสีเขียวสว่าง

10. ด้านล่างเป็นเบอร์สีที่ใช้แบ่งตามมาตราฐานการอ้างอิงของสี
Hexadecimal - Browser Colour Codes
1 - #FF0000 6 - #FFFF00 11 - #009900 16 - #0000FF
2 - #FF3300 7 - #CCFF00 12 - #006633 17 - #3300CC
3 - #FF6600 8 - #99CC00 13 - #006666 18 - #660099
4 - #FF9900 9 - #66CC00 14 - #003399 19 - #990066
5 - #FFCC00 10 - #339900 15 - #0033CC 20 - #CC0033
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
โปรแกรมที่ใช้ในการท่าเว็บ
"Joomla"
joomla เป็น CMS ที่ได้รับความนิยมเป็นอันดับต้น ๆ เพราะมีระบบการจัดการเนื้อหาที่มี
รูปแบบสากล การปรับแต่งหน้าตาของเว็บไซต์ทาได้ง่าย เพราะถูกออกแบบมาให้รองรับกับเทคโนโลยีการ
ออกแบบเว็บไซต์ สมัยใหม่ ไม่ว่าจะเป็นการรองรับFlash หรือ GIF Animation นอกจากนี้คุณยัง
สามารถ Download Template ได้อย่างมากมายมีทั้งแบบที่สามารถนามาใช้งานได้ฟรี
** สาหรับใครที่ยังไม่รู้จักว่า CMS คืออะไร ขออธิบายสั้น ๆ เพิ่มเติมดังนี้นะคะ CMS นั้นเป็น
อักษรย่อของ คาว่า "Content Management System" ซึ่งเมื่อเราแปลเป็นภาษาไทย หมายถึง ระบบ
บริหารจัดการเนื้อหาของเว็บไซต์ นั่นหมายความว่า สิ่งที่เราจะต้องดูแลก็คือเนื้อหาของเว็บไซต์ เช่น การ
เพิ่มบทความ การเพิ่มรูปภาพ หรือการปรับแต่งโยกย้ายโมดูลต่าง ๆ ไม่จาเป็นจะต้องมานั่งเขียนCode
ด้วยภาษา HTML, PHP, SQL เพียงแต่เรียนรู้วิธีการติดตั้ง การปรับแต่ง การใช้งาน CMS เท่านั้น สาหรับ
Code ต่าง ๆ ที่นามาสร้าง และ ออกแบบเว็บไซต์ จะทาโดยทีมงานของผู้พัฒนา CMS ของแต่ละทีม ซึ่ง
ทาให้ประหยัดเวลาในการสร้าง และออกแบบเว็บไซต์ ได้อย่างมาก
ข้อดีของ CMS
1. ผู้ใช้งานไม่จาเป็นต้องมีความรู้เรื่องการทาเว็บไซต์ เพียงแค่เคยพิมพ์ หรือเคยโพสข้อความในอินเทอร์
เนต ก็สามารถมีเว็บไซต์เป็นของตัวเองได้

11. 2. ไม่เสียเวลาในการพัฒนาเว็บไซต์ ไม่เสียเงินจานวนมาก
3. ง่ายต่อการดูแล เพราะมีระบบจัดการทุกอย่างให้เราหมด
4. มีระบบจัดการที่เราสามารถหามาใส่เพิ่มได้มากมาย อย่างเช่น ระบบแกลลอรี่
5. สามารถเปลี่ยนหน้าตาเว็บไซต์ได้ง่ายๆ เพียงแค่โหลดทีม (Theme) ของ CMS นั้นๆ
วิธีติดตั้ง ขั้นตอน การติดตั้ง joomla 2.5
ขั้นก่อนการติดตั้ง
Joomla คือโปรแกรม OpenSource จาพวก CMS (Content Management System) ซึ่งใช้สาหรับสร้าง
เว็บไซต์ มีความปลอดภัยสูง และเป็นที่นิยมมาก
ก่อนการติดตั้งโปรแกรมเราต้องจาลองเครื่องของเราให้เป็นเครื่องsever ก่อน ตามลิงค์ ติดตั้ง php Mysql
Apache โปรแกรมจาลอง Web Server ด้วย XAMPP
แล้วเตรียมฐานข้อมูลตามวิธีด้านล่าง
เมื่อเสร็จแล้วจะได้ดังรูป
ขั้นการติดตั้งโปรแกรม
โหลดโปรแกรม Joomla 2.5 ก่อน (โหลดได้ที่ http://www.joomla.org/download.html )
หลังจากโหลดไฟล์โปรแกรมjoomla2.5 มาเรียบร้อยแล้ว ให้ทาการ Unzip ไฟล์โปรแกรม ไปไว้ที่
D:xampphtdocsjoomla25
ตัวอย่างวิธีการ Unzip โปรแกรม
เริ่มการติดตั้ง
1. เปิดweb browserพิมพ์URLชื้อไปที่ http://localhost/joomla25/ จะได้หน้าจอดังรูป
ในขั้นตอนนี้ให้เลือก ภาษาไทยแล้วคลิก ปุ่ม ต่อไป
2.จะสังเกตว่าบนหน้าต่าง เป็นคาว่า ใช่ ทั้งหมด แล้วจึงคลิกปุ่ม ต่อไป
3.หน้านี้อธิบายเกียวกับลิขสิทธิ์ ก็คลิก ต่อไปได้เลย
4. การตั้งค่าฐานข้อมูล
ชนิดของฐานข้อมูล : Mysql (ต้องเลือก Mysql เท่านั้นนะครับ)
ชื้อโฮส : localhost
ชื้อผู้ใช้ฐานข้อมูล : root(ค่าปกติ admin ของฐานข้อมูล Mysqlจะ ชื่อ root)
รหัสผ่าน : *** (หรืออาจไม่ตั้งก็ได้)

12. ชื้อฐานข้อมูล : joomla25 (ตั้งชื้อฐานข้อมูลอะไรก็ได้ แต่ต้องไม่ซ้ากันนะ)
คานาหน้าตาราง : (อันนี้ไม่ต้องสนใจก็ได้ ให้เป็นตามค่าปกติที่เว็บกาหนดมาก็ได้)
จากนั้นคลิกปุ่ม ต่อไป ได้
5.ตั้งค่าหลักของเว็บ
ชื้อเว็บ : ทดลองติดตั้ง joomla2.5(พิมพ์ชื้ออะไรก็ได้ สามารถแก้ไข้ได้ภายหลังนะ)
อีเมล์ของคุณ :jaideiw_may@hotmail.com (เป็นเมล์ของผู้ดูแลระบบ ระบบจะติดต่อกับadminที่เมล์นี้)
รหัสผ่านผู้ดูแล : admin (กาหนดอะไรก็ได้ )
ยืนยันรหัสผ่านผู้ดูแล : admin
ข้อมูลตัวอย่าง ให้กดที่ปุ่ม ..ติดตั้งข้อมูลตัวอย่าง..
6.ข้อมูลตัวอย่างจะช่วยให้เราเห็นตาแหน่งของโครงสร้างได้ชัดเจน ทาเสร็จแล้วค่อยลบออกก็ได้
กรอบข้อมูลเสร็จก็คลิก ต่อไป ได้เลย
7.มาถึงตรงนี้เราได้ทาการติดตั้งjoomla เสร็จเรียบร้อยแล้ว แต่ยังใช้งานไม่ได้
ต้องลบโฟล์เดอร์ installation ก่อน กดปุ่ม..ลบโฟลเดอร์ installation
8.เสร็จเรียบร้อยให้คลิก ปุ่ม ดูหน้าเว็บ จะปรากฏหน้าเว็บ ดังรูปข้างล่างนี้
ความเป็นเอกลักษณ์
*วิทยาลัยเซนต์หลุยส์มีการออกแบบเว็บต์ไซต์ที่เป็นเอกลักษณ์เฉพราะที่โดดเด่น โดยมีพระแม่ฟาติมาอยู่ด้าน
ขวามือ ซึงเป็นสัญลักษณ์ของศาสนาคริสต์ และมีรูปพระเยซูคริสต์ อยู่ด้านซ้ายมือ มีตราสัญลักษณ์อยู่ทางด้านบน
ซ้าย และมีดอกไม้ประจามหาวิทยาลัยอยู่ด้านบนขวา (จากทฤษฏีการออกแบบเว็บไซต์ อ.ชัยมงคล เทพวงษ์)
เนื้อหาเป็นหมวดหมู่
*วิทยาลัยเซนต์หลุยส์ มีการแบ่งเนื้อหาออกเป็นหมวดหมู่อย่างชัดเจน เพี่อให้สะดวกในการค้นหาข้อมูล เช่น
เกียรติประวัติวิทยาลัยเซนต์หลุยส์ การบริหาร
คณะวิชา หน่วยงานวิทยาลัยฯเป็นต้น(จากhttp://www.ic-myhost.com)
เ

13. นื้อหาที่มีประโยชน์
(จากทฤษฏีการออกแบบเว็บไซต์ อ.ชัยมงคล เทพวงษ์)
*วิทยาลัยเซนต์หลุยส์ มีเนื้อหาที่ทาให้นักศึกษาในมหาวิทยาลัยได้ความรู้ได้ประโยชน์ทั้งงานวิชาการ งานด้าน
การศึกษาที่เป็นผลกับตัวนักศึกษา
และงานประชาสัมพันธ์ให้บุคคลทั่วไปที่เข้ามาเยี่ยมชมเว็บไซต์ได้ประโยชน์ได้ความรู้ทั่วถึงกัน

14. ผู้จัดท่า
นางสาวทิพวัลย์ วินทะวุธ 533410080309
นางสาวนิจพร ทรัพย์สมบัติ 533410080312
นางสาวปริญดา วารีศรี 533410080316
นางสาวสายสมร ชมพู่ทอง 533410080327
สาขาวิชาคอมพิวเตอร์ศึกษา หมู่ 3 ปี 4 คณะครุศาสตร์
เสนอ
อาจารย์ปวริศ สารมะโน
สมุดเล่มเล็กนี้เป็นส่วนหนึ่งในรายวิชา โปรแกรมสร้างเวปเพื่อการศึกษา

15. หลักการออกแบบเว็บไซต์
วิเคราะห์ทฤษฎีการออกแบบเว็บไซต์วิทยาลัยเซนต์หลุยส์
ทฤษฎีความเรียบง่าย
วิทยาลัยเซนต์หลุยส์มีการออกแบบเว็บไซต์ที่เรียบง่าย ดูแล้วสบายตา การใช้ตัวอักษรเห็นได้ชัดเจนไม่มี
ภาพเคลื่อนไหวตลอดเวลาจนทาให้เวียนหัว มีการแบ่งหมวดหมู่ ต่างๆไว้อย่างชัดเจน ทาให้สะดวกค้นหาได้ง่าย
(จากทฤษฏีการออกแบบเว็บไซต์ อ.ชัยมงคล เทพวงษ์
ความสม่่าเสมอ
*วิทยาลัยเซนต์หลุส์มีการออกแบบที่สม่าเสมอในทุกหน้า ของเว็บไซต์องค์ประกอบหลักๆที่สาคัญจะอยู่ใน
ตาแหน่งเดิมในทุกหน้า เพื่อให้ดูง่าย สม่าเสมอมองเห็นได้ชัดเจน
*(จากทฤษฏีการออกแบบเว็บไซต์ อ.ชัยมงคล เทพวงษ์)