1. หลักการออกแบบ
สาขาวิชาคอมพิวเตอร์ศึกษา คณะครุศาสตร์ มหาวิทยาลัยราชภัฏมหาสารคาม
1
หลักการออกแบบ

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

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

4. การออกแบบเว็บไซต์
ในการออกแบบเว็บไซต์นั้นประกอบด้วยกระบวนการต่าง ๆ มากมาย เช่น การออกแบบโครงสร้าง ลักษณะหน้าตา หรือการเขียนโปรแกรม แต่มีหลายคนที่
พัฒนาเว็บไซต์ โดยขาดการวางแผนและทางานไม่เป็นระบบ ตัวอย่างเช่น การลงมือออกแบบโดยการใช้โปรแกรมช่วยสร้างเว็บ เนื้อหาและรูปแบบก็เป็นไปตามที่นึกขึ้น
ได้ขณะนั้น และเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลย ทาให้เว็บนั้นมีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้เึงเสี่ยงกับความล้มเหลวค่อนข้างมาก
ความล้มเหลวที่พบเห็นได้ทั่วไป ได้แก่ เว็บที่แสดงข้อความว่าอยู่ระหว่างการก่อสร้าง (Under Construction หรือ Coming soon) ซึ่งแสดงให้เห็นถึงการ
ขาดการวางแผนที่ดีบางเว็บถือได้ว่าตายไปแล้ว เนื่องเากข้อมูลไม่ทันสมัย ขาดการพัฒนาปรับปรุงเทคโนโลยีล้าสมัย ลิงค์ผิดพลาด สิ่งเหล่านี้แสดงให้เห็นถึงการขาด
การดูแล ตรวเสอบและพัฒนาให้ทันสมัยอยู่เสมอ
การออกแบบเว็บไซต์อย่างถูกต้องเะช่วยลดความผิดพลาดเหล่านี้ และช่วยลดความเสี่ยงที่เะทาให้เว็บประสบความล้มเหลว การออกแบบเว็บไซต์ที่ดีต้อง
อาศัยการออกแบบและเัดระบบข้อมูลอย่างเหมาะสม
กระบวนการแรกของการออกแบบเว็บไซต์คือการกาหนดเป้าหมายของเว็บไซต์กาหนดกลุ่มผู้ใช้ ซึ่งการเะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือเาลอง
สถานการณ์ สิ่งเหล่านี้เะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่างเหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้เริง
ก่าหนดเป้าหมายของเว็บไซต์
ขั้นตอนแรกของการออกแบบเว็บไซต์ คือการกาหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อเะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้
โดยทั่วไปมักเะเข้าใเว่าการทาเว็บไซต์มีเุดมุ่งหมายเพื่อบริการข้อมูลของหน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นเริงแล้ว เว็บไซต์แต่ละแห่งก็เะมีเป้าหมายของ
ตนเองแตกต่างกันออกไป
ก่าหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ออกแบบเว็บไซต์เาเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซต์ เพื่อที่เะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเเน ตัวอย่างเช่น
เว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นเิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นเะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สาหรับทุกคน
เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
21
เนื้อหาเป็นหมวดหมู่
*วิทยาลัยเซนต์หลุยส์ มีการแบ่งเนื้อหาออกเป็นหมวดหมู่อย่างชัดเเน เพี่อให้สะดวกในการค้นหาข้อมูล เช่น เกียรติประวัติวิทยาลัยเซนต์หลุยส์ การบริหาร
คณะวิชา หน่วยงานวิทยาลัยฯเป็นต้น(เากhttp://www.ic-myhost.com)

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

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

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

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

9. 5.ตั้งค่าหลักของเว็บ
ชื้อเว็บ : ทดลองติดตั้ง joomla2.5 (พิมพ์ชื้ออะไรก็ได้ สามารถแก้ไข้ได้ภายหลังนะ)
อีเมล์ของคุณ : jaideiw_may@hotmail.com (เป็นเมล์ของผู้ดูแลระบบ ระบบเะติดต่อกับadminที่เมล์นี้)
รหัสผ่านผู้ดูแล : admin (กาหนดอะไรก็ได้ )
ยืนยันรหัสผ่านผู้ดูแล : admin
ข้อมูลตัวอย่าง ให้กดที่ปุ่ม ..ติดตั้งข้อมูลตัวอย่าง..
ข้อมูลตัวอย่างเะช่วยให้เราเห็นตาแหน่งของโครงสร้างได้ชัดเเน ทาเสร็เแล้วค่อยลบออกก็ได้
กรอบข้อมูลเสร็เก็คลิก ต่อไป ได้เลย
9
สีส้ม
ให้ความรู้สึก ร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การปลดปล่อย ความเปรี้ยว การระวัง
เป็นสีที่เร้าความรู้สึก ปรกติควรใช้แต่น้อยเมื่อเทียบกับสีอื่น สังเกตว่าคนที่อยู่ในห้องสีส้มเะอยู่ได้ไม่นาน
สีน้่าตาล
ให้ความรู้สึกอบอุ่น ได้พักผ่อน แต่ควรใช้ร่วมกับสีส้ม เหลือง หรือสีทอง เพราะถ้าใช้สีน้าตาลเพียงสีเดียว อาเทาให้เกิดความรู้สึกหดหู่ได้
สีเทา
ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ ความเงียบ สุภาพ สุขุม ถ่อมตน
สีนี้มีข้อดีคือทาให้เย็น แต่สร้างความสร้างความรู้สึกหม่นหมองได้ ควรใช้ร่วมกับสีที่มีชีวิต โทนสว่างอย่างน้อยหนึ่งสี
สีขาว
ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความเริง ความเมตตา ความศรัทธา ความดีงาม
ให้ความรู้สึกรื่นเริง โดยเฉพาะเมื่อใช้กับสีแดง เหลือง และส้ม
** ในการสร้างเว็บก็ควรที่เะเลือกสีให้เหมาะกับสม

10. ทฤษฎีสี
รูปด้านล่างวงล้อความสัมพันธ์ของสี ซึ่งบรรเุสีที่นิยมใช้ในเว็บไซต์ไว้ 20 สี เหมาะสาหรับผู้ที่กาลังเลือกสีที่เะใช้ในเว็บไซต์อยู่เราสามารถใช้ความสัมพันธ์ของวงล้อ
ขอสีนี้ให้เกิดประโยชน์ได้อย่างมากมาย เช่น
ต้องการออกแบบให้เว็บไซต์รู้สึกตัดกันโดยสิ้นเชิง เราอาเใช้ชุดสี 4 สีที่ทามุมกัน 90 องศา เช่นดังตัวอย่างถ้าเราเลือกชุดสี 1 , 6 , 11 , 16 สีที่ได้เะตัดกันชัดเเน
ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็อาเเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์ 8 , 9 , 10 , 11 ก็เะได้สีในโทนสีเขียวสว่าง
ด้านล่างเป็นเบอร์สีที่ใช้แบ่งตามมาตราฐานการอ้างอิงของสี
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
15
3.หน้านี้อธิบายเกียวกับลิขสิทธิ์ ก็คลิก ต่อไป ได้เลย
4. การตั้งค่าฐานข้อมูล
ชนิดของฐานข้อมูล : Mysql (ต้องเลือก Mysql เท่านั้นนะครับ)
ชื้อโฮส : localhost
ชื้อผู้ใช้ฐานข้อมูล : root (ค่าปกติ admin ของฐานข้อมูล Mysqlเะ ชื่อ root)
รหัสผ่าน : *** (หรืออาเไม่ตั้งก็ได้)
ชื้อฐานข้อมูล : joomla25 (ตั้งชื้อฐานข้อมูลอะไรก็ได้ แต่ต้องไม่ซ้ากันนะ)
คานาหน้าตาราง : (อันนี้ไม่ต้องสนใเก็ได้ ให้เป็นตามค่าปกติที่เว็บกาหนดมาก็ได้)
เากนั้นคลิกปุ่ม ต่อไป ได้เลย

11. เริ่มการติดตั้ง
1. เปิด web browser พิมพ์ URL ชื้อไปที่ http://localhost/joomla25/ เะได้หน้าเอดังรูป
ในขั้นตอนนี้ให้เลือก ภาษาไทย แล้วคลิก ปุ่ม ต่อไป
2.เะสังเกตว่าบนหน้าต่าง เป็นคาว่า ใช่ ทั้งหมด แล้วเึงคลิกปุ่ม ต่อไป
11
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใเง่าย
โปรแกรมที่ใช้ในการท่าเว็บ
"Joomla"
joomla เป็น CMS ที่ได้รับความนิยมเป็นอันดับต้น ๆ เพราะมีระบบการเัดการเนื้อหาที่มีรูปแบบสากล การปรับแต่งหน้าตาของเว็บไซต์ทาได้ง่าย
เพราะถูกออกแบบมาให้รองรับกับเทคโนโลยีการ ออกแบบเว็บไซต์ สมัยใหม่ ไม่ว่าเะเป็นการรองรับ Flash หรือ GIF Animation นอกเากนี้คุณยังสามารถ
Download Template ได้อย่างมากมายมีทั้งแบบที่สามารถนามาใช้งานได้ฟรี
** สาหรับใครที่ยังไม่รู้เักว่า CMS คืออะไร ขออธิบายสั้น ๆ เพิ่มเติมดังนี้นะคะ CMS นั้นเป็นอักษรย่อของ คาว่า "Content Management Sys-
tem" ซึ่งเมื่อเราแปลเป็นภาษาไทย หมายถึง ระบบบริหารเัดการเนื้อหาของเว็บไซต์ นั่นหมายความว่า สิ่งที่เราเะต้องดูแลก็คือเนื้อหาของเว็บไซต์ เช่น
การเพิ่มบทความ การเพิ่มรูปภาพ หรือการปรับแต่งโยกย้ายโมดูลต่าง ๆ ไม่เาเป็นเะต้องมานั่งเขียน Code ด้วยภาษา HTML, PHP, SQL เพียงแต่เรียนรู้
วิธีการติดตั้ง การปรับแต่ง การใช้งาน CMS เท่านั้น สาหรับ Code ต่าง ๆ ที่นามาสร้าง และ ออกแบบเว็บไซต์ เะทาโดยทีมงานของผู้พัฒนา CMS ของแต่
ละทีม ซึ่งทาให้ประหยัดเวลาในการสร้าง และออกแบบเว็บไซต์ ได้อย่างมาก
ข้อดีของ CMS
1. ผู้ใช้งานไม่เาเป็นต้องมีความรู้เรื่องการทาเว็บไซต์ เพียงแค่เคยพิมพ์ หรือเคยโพสข้อความในอินเทอร์เนต ก็สามารถมีเว็บไซต์เป็นของตัวเองได้
2. ไม่เสียเวลาในการพัฒนาเว็บไซต์ ไม่เสียเงินเานวนมาก
3. ง่ายต่อการดูแล เพราะมีระบบเัดการทุกอย่างให้เราหมด
4. มีระบบเัดการที่เราสามารถหามาใส่เพิ่มได้มากมาย อย่างเช่น ระบบแกลลอรี่
5. สามารถเปลี่ยนหน้าตาเว็บไซต์ได้ง่ายๆ เพียงแค่โหลดทีม (Theme) ของ CMS นั้นๆ

12. วิธีติดตั้ง ขั้นตอน การติดตั้ง joomla 2.5
ขั้นก่อนการติดตั้ง
Joomla คือโปรแกรม OpenSource เาพวก CMS (Content Management System) ซึ่งใช้สาหรับสร้างเว็บไซต์ มีความปลอดภัยสูง และเป็นที่นิยมมาก
ก่อนการติดตั้งโปรแกรมเราต้องเาลองเครื่องของเราให้เป็นเครื่อง sever ก่อน ตามลิงค์ ติดตั้ง php Mysql Apache โปรแกรมเาลอง Web Server ด้วย XAMPP
แล้วเตรียมฐานข้อมูลตามวิธีด้านล่าง
เมื่อเสร็เแล้วเะได้ดังรูป
13
ขั้นการติดตั้งโปรแกรม
โหลดโปรแกรม Joomla 2.5 ก่อน (โหลดได้ที่ http://www.joomla.org/download.html )
หลังเากโหลดไฟล์โปรแกรม joomla2.5 มาเรียบร้อยแล้ว ให้ทาการ Unzip ไฟล์โปรแกรม ไปไว้ที่ D:xampphtdocsjoomla25
ตัวอย่างวิธีการ Unzip โปรแกรม