?????? ? NCSA ? ??? ? by 73jiEX9y

VIEWS: 0 PAGES: 23

									                        หลักการ ทฤษฎีของการออกแบบหน้ า Home Page

ความเป็ นมาของเวิลด์ ไวด์ เว็บและเว็บบราวเซอร์


เวิลด์ไวด์เว็บเริ่ มต้นจากสถาบันเซิ ร์น(CERN:European Laboratory for Particle Physics) โดย
สถาบันนี้ได้พฒนาเว็บบราวเซอร์ ข้ ึนครั้งแรกและเป็ นรุ่ นที่มีความสามารถทั้งเป็ นเว็บบราวเซอร์ และ
                ั
โปรแกรมแก้ไขในตัวโปรแกรมโดยโปรแกรมเหล่านี้ใช้งานบนคอมพิวเตอร์ Next Step ลักษณะการ
แสดงผลของบราว์เซอร์ แสดงผลเฉพาะข้อความเพียงอย่างเดียว ซึ่ งต่างจากเว็บบราวเซอร์ ในปั จจุบน       ั
                                                ู้ ั
นอกจากสถาบันเซิร์น แล้วในระยะเดียวกันมีผพฒนาเว็บบราวเซอร์ อื่นๆ ออกมาเช่นกัน อาทิ เช่น
                                              ั
Erwise, Viola และ Lynx เป็ นต้น ซึ่ งในปั จจุบนนี้ โปรแกรมเว็บบราวเซอร์ ที่ชื่อ Lynx ซึ่งแสดงผลด้วย
                                                                 ั
ข้อความเพียงอย่างเดียวยังมีใช้ในคอมพิวเตอร์ ที่ใช้บนระบบปฏิบติการยูนิกซ์, ลีนุกซ์
ในระยะต่อมา สถาบัน NCSAC (National Center for Supercomuting Appli cations) ร่ วมกับ
University of Illinois Urbana - Champain พัฒนาเว็บบราวเซอร์ ชื่อ Mosaic ซึ่งใช้งานแบบกราฟฟิ ก
             ั
ได้ โดยใช้กบคอมพิวเตอร์ PC/Windows และ Macintosh เมื่อเดือนกันยายน พศ. 2536
บุคคลสาคัญที่เกี่ยวข้องกับการพัฒนาเว็บบราวเซอร์ คือ Mark And Reesen ซึ่งเป็ นนักศึกษา
ในสถาบัน NCSA ร่ วมกับ เพื่อน ๆ อีก 5 คน ได้ออกจากสถาบัน NCSA และ ร่ วมกันตั้ง Mosaic
Communication Corporation ขึ้นซึ่ งต่อมาได้กลายมาเป็ น Netscape Communication Corporation ซึ่ง
ได้พฒนามาเป็ น Netscape Communication Corporation เว็บบราวเซอร์ รุ่ นแรกออกมาของ Netscape
     ั
                                                                                   ั
Navigator ใช้ชื่อเรี ยกกว่า Mozilla ตอนช่วงปลายปี พศ. 2537 ในขณะเดียวกันบริ ษทไมโครซอฟต์
พัฒนาเว็บบราวเซอร์ ชื่อ IE(Internet Explorer) ออกมาและเป็ นคู่แข่งสาคัญของ Netscape Navigator
          ั
ของบริ ษท Netscape Communication Corporation (NavarroAnn,1998)
                                                           ั
พัฒนาการของเว็บบราวเซอร์ ที่มีอย่างต่อเนื่ องจนถึงปั จจุบนเพิ่มขีด ความสามารถด้านการเสนอ
                                                                   ้
ข้อมูลข่าวสารผ่านเครื่ อข่ายอินเทอร์ เน็ตมายังจอคอมพิวเตอร์ ของผูใช้อินเทอร์ เน็ตทาให้การสื่ อสารบน
อินเทอร์ เน็ตมีประสิ ทธิ ภาพมากขึ้นเนื่องจากแสดงด้วยภาพเสี ยงมีสีสรรชวนติดตาม ทาให้เวิลด์ไวด์เว็บ
กลายเป็ นเครื่ องมือที่ใช้ในการติดต่อสื่ อสารและเสนอผ่านเครื อข่ายอินเทอร์ เน็ตที่ได้มีการยอมรับและใช้งา
นกันอย่างกว้างขวางทัวโลกในปั จจุบน
                         ่             ั




                                                                                                           1
โฮมเพจ เว็บเพจ และเว็บไซต์

                                                                                 ่
การใช้งานเว็บบราวเซอร์ แต่ละครั้งเพื่อให้ขอมูลที่เก็บไว้ในเว็บเซิ ร์ฟเวอร์ ที่อยูห่างไกลออกไปในอินเทอร์ เน็
                                                ้
ต โปรแกรมเว็บบราวเซอร์ จะดึงข้อมูลมาแสดงผลบนจอคอมพิวเตอร์ ข้อมูลที่แต่ละ
            ั                           ู้
เว็บไซด์จดทาและเก็บไว้เพื่อให้ผสนใจเปิ ดเข้าชมและแสดงผลหน้าแรกเรี ยกว่าหน้าโฮมเพจ ซึ่งผูใช้จะได้ ้
                                                               ่
พบก่อนเมื่อเปิ ดเข้าไปในเว็บไซด์หนึ่งๆ ด้วยการพิมพ์ที่อยูของเว็บไซด์ลงในบราวเซอร์ ส่ วนเว็บเพจ
                                      ้
คือเอกสารที่ปรากฏต่อสายตาผูชมซึ่ งเขียนด้วยภาษาสาหรับสร้างหน้าเว็บเพจที่เรี ยกว่า ภาษาเอชทีเอ็มแอล
หรื อภาษาอื่น ๆ ที่โปรแกรมเว็บบราวเซอร์ สามารถอ่านและแสดงผลทางจอคอมพิวเตอร์ ได้
เว็บเพจแต่ละหน้าจะทาหน้าที่เป็ นเนื้ อหาสารที่ถูกวางบนสื่ อเพื่อนาเสนอข้อมูลบนอินเทอร์ เน็ต (วิภา
เพิ่มทรัพย์ และวศิน เพิ่มทรัพย์, 2546) การเปิ ดเข้าสู่ เว็บไซต์ต่าง ๆ ต้องพิมพ์ระบุชื่อลงในช่องURL หรื อ
Address ของโปรแกรมเว็บบราวเซอร์ ให้ถูกต้องจึงจะสามารถเปิ ดอ่านหน้าเว็บเพจที่ตองการได้    ้
                ่
การระบุที่อยูของเว็บเพจในหน้าเว็บไซต์ ตัวอย่างเช่น
http : // puffer.sru.ac.th/bsd/index.html
http : // คือชื่อโปรโตคอลหรื อวิธีการติดต่อทัวไปในการคืนเว็บเพจ
                                                  ่
puffer คือชื่อเครื่ องคอมพิวเตอร์ที่ระบุใน DNS
sru คือชื่อเครื่ อข่ายย่อยในที่น้ ี คือ มหาวิทยาลัยราชภัฏสุ ราษฎร์ธานี
ac คือประเภทการศึกษา (academic)
th คือประเทศไทย
bsd คือไดเร็ คทอรี่ สาหรับเก็บไฟล์ต่าง ๆ
index.html คือ ชื่อไฟล์และนามสกุลของเว็บเพจที่ตองการ    ้

ชื่อคอมพิวเตอร์ บนอินเทอร์ เน็ตและชื่อโดเมนช่วยให้ผใช้สามารถจดจาได้ง่ายและสะดวกในการพิมพ์ที่อยูล
                                                    ู้                                           ่
งใน URL ของเว็บบราวเซอร์ ชื่อเหล่านี้ จะถูกจัดเก็บในคอมพิวเตอร์ ซ่ ึ งทาหน้าที่ DNS (Domain Name
Service) ตามที่ได้จดทะเบียนชื่อไว้

ส่ วนประกอบในหน้ าเว็บเพจ
ในแต่ละเว็บไซด์จะประกอบด้วยหน้าเว็บเพจจานวนมาก
หน้าเว็บเพจแต่ละหน้าจะประกอบด้วยส่ วนประกอบสาคัญ ๆ ดังนี้
1. แถบเครื่องมือ (Navigational Menus)
                            ั่    ้    ้
ปกติการใช้งานคอมพิวเตอร์ ทวไป ผูใช้จะคุนเคยกับการใช้งานเครื่ องมือที่เรี ยกว่าเมนู (Menu)
แนวคิดของเมนู หมายถึง
แถบที่ประกอบด้วยคาหรื อข้อความที่จะใช้สาหรับเลือกให้ส่วนของโปรแกรมทางานเพื่อใช้เมาส์กดคลิกหรื

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

           ่
2. สิ่ งทีมองเห็นได้ (visual Cues)
หน้าเว็บเพจหนึ่ง ๆ จะมีส่วนที่รับรู ้ทางสายตา ภาพรวมที่ปรากฎในหน้าเว็บเพจจะแสดงส่ วนต่าง ๆ คือ
1. แถบเครื่ องมือ หรื อรายการทาหน้าที่เหมือนสารบัญ
                                        ้
2. การเชื่อมโยงเพื่อเปิ ดหน้าเว็บเพจที่ตองการหรื อเปิ ดหน้าเว็บเพจจากเว็บไซต์อื่น ๆ ก็ได้
                        ่
3. ช่องสาหรับใส่ ที่อยูของจดหมายอิเล็คโทรนิกส์ เพื่อประโยชน์อย่างใดอย่างหนึ่ง เช่น
                               ั
สมัครรับข่าวสารที่เว็บไซต์น้ นให้บริ การ
4. ภาพประกอบที่ใช้สาหรับเชื่อมโยง หรื อทาให้ดูเหมือนปุ่ มสาหรับกด
5. ภาพเครื่ องหมายสัญลักษณ์ หรื อโลโก้ของเว็บไซต์น้ นๆ ั
เพื่อเชื่ อมโยงไปถึงเครื่ องหมายสัญลักษณ์ของหน่วยงาน

         ้
3. เนือหาข่ าวสารในอินเทอร์ เน็ต
อินเทอร์ เน็ตจัดเป็ นสื่ อแบบใหม่ ซึ่ง Rogers (อ้างใน กาญจนา แก้วเทพ, 2540 หน้า 122-124)
ได้ศึกษาคุณลักษณะของสื่ อแบบใหม่ที่กาลังเกิดขึ้นในปั จจุบน     ั
และได้ช้ ีให้เห็นว่าคุณลักษณะสาคัญๆของสื่ อแบบใหม่ที่จะมีผลต่อเนื่ องไปถึงการเปลี่ยนแปลงประสบการ
ณ์ของมนุษย์ และการเปลี่ยนแปลงสังคมนั้นมีอยู่ 3 ประการ คือ
           1. ลักษณะ Interactivity ของสื่ อ แต่เดิมนั้นคุณสมบัติที่จะตอบโต้การสารระหว่าง 2
                 ่
ฝ่ ายนั้นจะมีอยูแต่เฉพาะในการสื่ อสารระหว่างบุคคลแบบเผชิญหน้าเท่านั้น ( Face-to-Face Communication
) หากเริ่ มมีการใช้สื่อกลางแบบใดเข้ามาเกี่ยวข้อง ลักษณะ “ตอบโต้อย่างฉับผลันทันที” จะสู ญหายไป
แต่ในสื่ อสมัยใหม่ใหม่ เช่น การใช้ E-mail Computer-Conference
                                                                                 ้
จะสามารถสร้างเงื่อนไขให้เกิดการตอบโต้ได้อย่างฉับพลันทันทีอาจจะทาให้มิติดานกาละและเทศะของการ
สื่ อสารเปลี่ยนแปลงไปอย่างมาก
           2. ลักษณะ Individualiz /Demassified
แต่เดิมนั้นรู ปแบบการสื่ อสารแบบสื่ อมวลชนจะสร้างกลุ่มผูรับสารแบบเป็ น “มวลชน” (Massified)
                                                             ้
ขึ้นมาทุกคนจะดูรายการทุกอย่างเหมือน ๆ กันในช่วงเวลาเดียวกัน
      ิ่                                                         ู้
แต่ยงนับวันความก้าวหน้าของเทคโนโลยีการสื่ อสารจะทาให้ผใช้สามารถเลือกใช้ตามกาละและเทศะที่ตอง     ้
การได้มากขึ้น ตัวอย่างง่าย ๆ

                                                                                                      3
                                              ี
ก็เช่นเครื่ องอัดวิดีโอเทปการดูรายการเคเบิลทีวแบบเสี ยเงินที่เลือกรายการดูได้เอง (Pay per view)
แม้แต่ระบบการใช้โปรแกรมคอมพิวเตอร์ แบบที่ผเู ้ รี ยนด้วยตนเองในเวลาใดก็ได้ ณ สถานที่ไหนก็ได้
เป็ นต้น
          3. ลักษณะ Asynchronous natre of new communication คุณลักษณะประการหนึ่งของสื่ อแบบใหม่
คือ สามารถจะแบ่งแยกออกเป็ นส่ วน ๆ ได้ (asynchronize) โดยไม่มาเป็ นกลุ่มก้อนเดียวตัวอย่างเช่น
ลักษณะการให้ข่าวสารจะไม่มาเป็ นข่าวที่ต่อเนื่องกันยาว ๆ ทีเดียว แต่จะมาแบบแยกเป็ นส่ วน ๆ เช่น
                           ู้
ข่าวสั้นทุกชัวโมง โดยที่ผรับสารจะต้องมาประกอบเอาเอง ลักษณะ hardware
              ่
ของคอมพิวเตอร์ ก็เช่นเดียวกัน สามารถจะแยกซื้ อเป็ นส่ วน ๆ แล้วค่อยมาประกอบมาเพิ่มเติมภายหลังได้
นอกจากนั้นยังหมายความถึง ศักยภาพของสื่ อ ที่สามารถจะเก็บรักษาข่าวสารข้อมูลเอาไว้ดวย      ้
และวิธีการเก็บข่าวสารก็ยงสามารถแยกไว้ในที่ต่าง ๆ ได้ดวย อรัญญา ม้าลายทอง (2539) ศึกษาเรื่ อง
                              ั                           ้
การเปิ ดรับข่าวสาร
และการใช้การสื่ อสารผ่านระบุอินเทอร์ เน็ตของพนักงานในกลุ่มบริ ษทล้อกซเล่ยจากัด(มหาชน)
                                                                     ั          ์
ได้สรุ ปประเภทของข้อมูลที่เกิดรับในการสื่ อสารผ่านระบบเครื อข่ายอินเทอร์ เน็ต
แบ่งประเภทของข้อมูลออกเป็ นหัวข้อดังนี้
1. ข่าวสารทางธุ รกิจ
2. บันเทิง
3. ข่าวสารท่องเที่ยว
4. กีฬา
5. ข่าวสารคอมพิวเตอร์
6. การศึกษา
7. อื่น ๆ

                                                             ้                       ่
ข้อมูลข่าวสารที่นาเสนอของสื่ อมวลชนไทยเป็ นข้อมูลเดียวกับที่ขอมูลข่าวสารที่นาเสนออยูบนช่องทางปก
ติ ตัวอย่างเช่น การเสนอข้อมูลข่าวสารทางเว็บไซต์ของสถานีโทรทัศน์กองทพบกช่อง 5ประกอบด้วย
ข้อมูลด้านข่าวได้แก่ ข่าวสารในราชสานัก ข่าวการเมือง ข่าวเศรษฐกิจ ข่าววงการทหาร และข่าวกีฬา
ข้อมูลความรู้ ได้แก่ เทคโนโลยี ศิลปวัฒนธรรม และประเพณี ไทย ข้อมูลบริ การอื่นๆ ได้แก่
การเสนอข่าวของหน่วยงานราชการ หรื อรัฐวิสาหกิจอื่น ๆ
ในลักษณะที่เป็ นประโยชน์ต่อประชาชนโดยรวม

4. รู ปแบบการนาเสนอข้ อมูลข่ าวสาร
ลักษณะของสื่ ออินเทอร์ เน็ต แตกต่างจากสื่ อดั้งเดิมนั้นรู ปแบบการนาเสนอของเว็บไซด์ต่าง ๆ
จึงปรับเปลี่ยนไปตามลักษณะของสื่ อด้วย

                                                                                                  4
                                     ้
การสื่ อสารบนอินเทอร์ เน็ตสามารถใส่ ขอมูลข่าวสารในหน้าเว็บเพจทั้งข้อความรู ปภาพ
ภาพเคลื่อนไหวและเสี ยงรู ปแบบการนาเสนอข้อมูลข่าวสาร
                                                       ้
จากการศึกษาของ ศุจิกา ดวงมณี (2539) เรื่ องการเผยแพร่ ขอมูลข่าวสารผ่าน เวิลด์ไวด์เว็บ
ของสื่ อมวลชนไทย พบว่านาเสนอได้หลายรู ปแบบในเวลาเดียวกัน โดยพิจารณา 2 ส่ วน คือ

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

        1.1 ลักษณะการใช้กรอบ (frame) นิยมแบ่งออกเป็ น 2 ส่ วนซ้ายและขวา โดยด้านซ้าย
ของหน้าจอจะเป็ นหัวข้อเรื่ องหลักๆ ส่ วนจอด้านขวาจะนาเสนอ รายละเอียดของแต่ละหัวข้อหลักทางซ้าย
และพื้นที่สาหรับการนาเสนอหัวข้อเรื่ องหลักจะแคบกว่าพื้นที่แสดงรายละเอียดทางด้านขวาการใช้กรอบใน
การแบ่งหน้าจอนี้ เป็ นเสมือนกับการนาเสนอ 2 หน้า จอในเวลาเดียวกัน
วิธีการนาเสนอแบบใช้กรอบนี้พบการใช้ในหน้าเว็บเพจของสื่ อมวลชนไทยทุกประเภทยกเว้นวิทยุกระจายเ
สี ยง

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



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

                           ้
          2.1 เทคโนโลยีดานเสี ยง
เสี ยงก็นามาใช้ประกอบในหน้าเว็บเพจในลักษณะเป็ นเสี ยงประกอบคลออยูเ่ บื้องหลังเว็บไวต์ที่
                             ้
          2.2 เทคโนโลยีดานภาพวีดีโอ
ภาพเคลื่อนไหวเป็ นอีกรู ปแบบหนึ่งที่มีถูกนามาในหน้าเว็บเพจเช่นเดียวกับแบบเสี ยงการนาเสนอข้อมูลข่าว
สารจะถูกจัดเก็บไว้ในรู ปแบบของแฟ้ มข้อมูลวิดีโอ เช่น .avi,.mov,.mpeg เป็ นต้น
          2.3
                                       ั
การสื่ อสารสองทางระหว่างเว็บไซต์กบผูเ้ ข้าชมการสื่ อสารแบบสองทางที่นิยมนามาใช้เพื่อการสื่ อสารทางเว็
บเพจต่าง ๆ
เป็ นการเปิ ดโอกาสให้ผเู้ ข้ามาในเว็บเซต์สามารถถามคาถามเสนอความคิดเห็นให้คาแนะนาโดยสื่ อสารทางจ
                                ู้ ้
ดหมายอิเล็คโทรนิกส์ เพื่อให้ผที่ตองการติดต่อสามารถส่ งจดหมาอิเล็คโทรนิกส์ได้
การสื่ อสารสองทางจึงใช้เพื่อสอบถาม เสนอความคิดเห็นหรื อให้คาแนะนาต่างๆ
รวมทั้งใช้ในการรับสมัครสมาชิก จากแนวคิดและทฤษฎีน้ ี จะเห็นได้วา         ่
อินเทอร์ เน็ตมีความแตกต่างไปจากสื่ อปกติ
                       ั
มีคุณสมบัติเสนอได้ท้ งภาพและเสี ยงสามารถเพิ่มคุณสมบัติการติดต่อสื่ อสารสองทางได้
             ่
เนื้อหาที่อยูปรากฏในเว็บไซด์ต่างซึ่ งเป็ น ข้อมูลข่าวสารที่ปรากฏอยู่ ถูกนาเสนอออกมาด้วยรู ปแบบต่าง
                                                                                              ั
คือสิ่ งสาคัญที่จะช่วยให้ทราบสภาพการใช้งานอินเทอร์ เน็ตของมหาวิทยาลัยราชภัฎสุ ราษฎร์ ธานีมีลกษณะอ
ย่างไร

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



                                                                                                      6
นอกจากนี้ควรมีการให้ขอสังเกตเมื่อมีขอมูลใหม่เกิดขึ้น และมีส่วนติดต่อกลับไปยังผูพฒนาเว็บไซต์
                     ้              ้                                          ้ ั
เพื่อสอบถามหรื อแสดงความคิดเห็น

1) แถบทิศทางเดินหลัก
เว็บไซต์ส่วนใหญ่นิยมสร้างแถบทิศทางเดินหลักโดยจัดวางไว้ดานบนหรื อด้านซ้ายของหน้าเว็บเพจ
                                                            ้
                                                              ู้
แทนการวางปุ่ มคลิกไปทีละหน้าเหมือนการเปิ ดหนังสื อ ทาให้ผใช้มีความสะดวกต่อการใช้งาน
การแสดงแถบทิศทางเดินหลักให้ปรากฏในทุกหน้าที่เชื่อมโยงไปจะทาให้มีการถ่ายโอนข้อมูลของแถบทิศ
ทางเดินเพียงครั้งเดียว
แต่ใช้ทรัพยากรบนแถบทิศทางเดินในทุกหน้าร่ วมกันแสดงแถบทิศทางเดินหลักในหน้าเว็บเพจ
2) เส้นทางเดิน เส้นทางเดินหน้าช่วยในการเข้าไปยังข้อมูลต่าง ๆ
ในเว็บไซต์การออกแบบเส้นทางเดินในหน้าเว็บเพจ
ได้มีการสร้างและพัฒนาเส้นทางเดินหลากหลายรู ปแบบโดยใช้ภาษาจาวาและภาษาจาวาสคริ ปต์
    ่                                                    ู้
เพือให้เส้นทางเดินมีความน่าใช้และง่ายต่อการใช้งานทาให้ผใช้สะดวกไม่เกิดความสับสน
                          ั
รู ปแบบเส้นทางเดินอาจมีดงต่อไปนี้

�� เส้นทางชั้นเมนู (Menu-tree navigation)
เป็ นการเข้าสู่ เนื้ อหาที่จดเป็ นลาดับชั้นของเมนูที่แตกกิ่งแยกย่อยออกไป และย้อนกลับออกทางเดิมที่เข้าไป
                            ั
�� เส้นทางปรากฏเมื่อเลือก (Pop-up navigation)
                        ้
เมื่อคลิกรายการที่ตองการจะมีกรอบรายการปรากฏให้คลิกเลือกรายการที่ตองการต่อไป   ้
�� เส้นทางแถบแท็บ (Tab-stop navigation) เนื้อหาจัดเป็ นระดับหัวข้อใหญ่และหัวข้อย่อย
  ้
ผูใช้จะไปยังหัวข้อดังกล่าวโดยวิธีการกดแป้ นแท็บเหมือนแท็บของแฟ้ มเอกสาร
�� เส้นทางดัชนี (Index navigation) จัดทาเป็ นตารางสารบัญ ให้เลือกคลิกรายการที่ตองการ ้
         ้
โดยไม่ตองเข้าไปเป็ นชั้นเพื่อไปยังข้อมูล
�� เส้นทางเมนูแบบปล่อย (Pull-down menu) ใช้ภาษาจาวาสคริ ปต์ในการสร้างเพื่อให้ไปยังส่ วนต่าง ๆ
ของเว็บไซต์
�� เส้นทางสัญรู ป (Iconic navigation) ใช้สัญรู ปแทนข้อความ ซึ่ งควรมีขอความประกอบอยูดวย
                                                                          ้             ่ ้
เพื่อความชัดเจนขึ้น
                                                                            ั
�� เส้นทางพลิกหน้า (Page Turning navigation) เหมาะสาหรับเนื้อหาที่จดทาในลักษณะบทเรี ยน
�� เส้นทางประสมประสาน (Combining navigation) เป็ นการใช้เส้นทางลักษณะดังกล่าวข้างต้น
ประสมประสานให้มีความเหมาะสม




                                                                                                          7
การใช้องค์ประกอบมัลติมีเดียเกี่ยวข้องกับการใช้ขอความ สี กราฟิ ก ภาพเคลื่อนไหว วีดิทศน์ และเสี ยง
                                               ้                                   ั
ให้มีความเหมาะสม ประสมประสานในการนาเสนอข้อมูลจากเว็บเพจนั้น ๆ
ให้น่าสนใจและเกิดการรับรู ้ขอมูลได้ดีข้ ึน
                            ้
การวางรู ปแบบขององค์ประกอบมัลติมีเดียในเว็บเพจจะต้องมีความคงเส้นคงวา และมีตรรกะ

5. การใช้ ข้อความ
                   ้
1) ไม่ควรบรรจุขอความเต็มหน้าจอ เพราะทาให้ยากต่อการอ่าน ทาให้รู้สึกน่าเบื่ออาจลดการเรี ยนรู ้ลงได้
                                                             ิ                  ้
ควรใช้การเขียนเป็ นแบบโครงร่ างรายการแทน อาจใช้วธีวางรู ปประกอบไว้ดานข้างของข้อความ
หรื อแบ่งเนื้ อหาออกเป็ นส่ วนย่อย สิ่ งสาคัญของการออกแบบหน้าจอให้มีประสิ ทธิ ผล คือ
                                            ั
การทาให้หน้าจอนั้นดูธรรมดา และใช้ลกษณะตัวอักษร
หัวข้อหลักและหัวข้อย่อยในเว็บเพจแต่ละหน้าอย่างคงเส้นคงวา แสดงการจัดข้อความให้อ่านง่าย
2) การใช้ขอความ เกี่ยวข้องกับการจัดรู ปแบบการพิมพ์ที่เหมาะสมกล่าวคือ เลือกลักษณะของตัวอักษร
              ้
                                                                     ้
และจัดแถววางแนวของอักษรในแต่ละหน้าของเว็บเพจ โดยมีขอควรพิจารณาดังนี้ คือ
ขนาดของตัวอักษรมีความคงเส้นคงวา ไม่ควรใช้ ตัวอักษรเกินกว่า 2 รู ปแบบในภาวะปกติ
                                                   ่
ไม่เจตนาเน้นคาจนเกินควร จัดข้อความให้อยูในรู ปแบบที่อ่านง่าย และกาหนดช่องว่าง
หรื อช่องไฟให้เหมาะสม
        ้                                                                              ้
3) ใช้ขอความเป็ นส่ วนเชื่ อมโยงเพื่อกาหนดทิศทาง การใช้ในลักษณะนี้เป็ นการใช้ที่คุนเคยกัน
                                                ้
ข้อความที่เป็ นไฮเปอร์ลิงค์ จะมีเส้นขีดใต้ขอความสี น้ าเงินด้วยเหตุน้ ีในหน้าเว็บเพจ
                                              ั
จึงควรมีขอความเป็ นไฮเปอร์ ลิงค์ควบคู่กบการใช้ภาพกราฟิ กเป็ นส่ วนกาหนดทิศทางข้อดีของการใช้ขอควา
            ้                                                                                  ้
มเป็ นส่ วนเชื่ อมโยงคือ เข้าถึงข้อมูลเร็ ว ดังนั้นถ้าเว็บเพจนั้นใช้ภาพกราฟิ กขนาดใหญ่
          ้
การใช้ขอความเป็ นส่ วนเชื่ อมโยงก็จะมีความ
เหมาะสม ส่ วนข้อเสี ยคือการใช้ขอความเป็ น ส่ วนเชื่ อมโยงจะทาให้ดูน่าเบื่อ
                                    ้
และถ้ามีมากไปก็จะทาให้ยากต่อการใช้ ในกรณี น้ ีควรใช้แถบสี ช่วยให้ดูน่ามอง
4) ใช้เป็ นเมนูแบบแสดงรายการให้เลือก โดยใช้ภาษาจาวาสคริ ปต์สร้างเมนูแบบแสดงรายการให้เลือกนี้
จะใช้พ้ืนที่ในหน้าจอน้อยกว่าการใช้กราฟิ ก

6. การใช้ พนหลัง และสี
           ื้
              ั                              ั
แนวทางปฏิบติในการใช้พ้ืนหลัง และสี ตวอักษรมีดงนี้       ั
1) ถ้าเลือกใช้พ้ืนหลังสี เข้ม ให้เลือกสี ตวหนังสื อสี อ่อน หรื อเลือกพื้นหลังสี อ่อนให้เลือกสี ตวหนังสื อสี เข้ม
                                           ั                                                    ั
2) ให้ระมัดระวังเมื่อใช้พ้ืนหลังที่มีลาย ข้อความหรื อกราฟิ กบนพื้นลวดลายมักจะทาให้อ่านได้ลาบาก
ถ้าต้องใช้พ้ืนหลังที่มีลาย ให้ใช้สีพ้ืนเรี ยบเป็ นพื้นรองรับส่ วนที่เป็ นข้อความและกราฟิ กนั้นอีกครั้ง


                                                                                                                   8
7. การใช้ กราฟิ ก
กราฟิ กมีท้ งที่เป็ นภาพลายเส้น ภาพ 3 มิติ และภาพถ่าย การใช้กราฟิ กในเว็บมีเหตุผลหลักอยู่ 3 ประการ คือ
            ั
                                                    ้         ่
เพื่อทาให้เว็บเพจนั้นน่าสนใจ ดึงดูดความสนใจของผูใช้เมื่อมาเยียมหน้าแรกของเว็บไซต์
              ั
และทาให้หวข้อเด่นน่าสนใจติดตาม นอกจากนี้ ในการใช้กราฟิ กในแต่ละหน้าของเว็บเพจ
จะต้องมีความคงเส้นคงวา
รู ปแบบของการใช้กราฟิ กในเว็บเพจ มีดงนี้ ั

                                                            ู้ ่
1) ใช้เป็ นปุ่ มกาหนดทิศทาง(Navigation button) เพื่อช่วยให้ผมาเยียมชมใช้เข้าไปยังส่ วนต่าง ๆ ของเว็บไซต์
หากออกแบบได้ดี ปุ่ มเหล่านี้จะมองหาและอ่านได้ง่ายกว่าการใช้ขอความเป็ นส่ วนเชื่ อมโยง
                                                                 ้
ภาพกราฟิ กช่วยเพิ่มความเด่น เพิ่มสี สันและลักษณะเฉพาะของเว็บไซต์ จึ
งมักพบว่าเว็บไซต์ส่วนใหญ่ใช้กราฟิ กเป็ นปุ่ มกาหนดทิศทาง
ข้อดีของการใช้กราฟิ กเป็ นส่ วนกาหนดทิศทาง คือ ทาให้น่าดู
                                                                                     ั
คนเรามักจะสะดุดตากับสี สันหรื อส่ วนที่เปลี่ยนไปที่สาคัญช่วยให้ผเู ้ ข้ามาเว็บไซต์น้ นใช้ได้สะดวก ข้อเสี ย
คือ หากใช้ขนาดไม่เหมาะสม
อาจทาให้ใช้เวลาในการถ่ายโอนนานและดูเกะกะสายตาควรใช้ปุ่มที่มีขนาดของแฟ้ มภาพประมาณ 1-5 K
และมีความกว้างระหว่าง 60 – 165 จุดความสู ง 25 – 60 จุด
                                               ้
และไม่ควรใช้เอฟเฟ็ กต์ในการแสดงปุ่ มมากจนผูใช้ไม่เข้าใจว่าเป็ นปุ่ มไฮเปอร์ ลิงค์
                     ้
และถ้ากาหนดให้มีขอความปรากฏก่อนภาพ (Alternative text) จะช่วย
     ู้                                 ้
ให้ผใช้สามารถคลิกเชื่อมโยงได้โดยไม่ตองรอให้ภาพถ่ายโอนมาเสร็ จ

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

1) ใช้เป็ นโลโก เพื่อแสดงภาพสัญลักษณ์ขององค์กร
                                                ั
โลโกช่วยให้เกิดการจดจาชื่อและเพิ่มความน่ามองให้กบเอกสารหรื อเว็บเพจนั้น




                                                                                                         9
                                                       ้ ่
2) ใช้เป็ นจุดบูลเล็ต (Bullet point) เพื่อดึงสายตาผูมาเยียมชมให้มองเห็นส่ วนหลักของเอกสาร
และยังใช้เพื่อคันย่อหน้าในเว็บเพจที่มีหลายย่อหน้า
                   ่
                                          ู้ ่ ่ ่
3) ใช้เป็ นหัวเรื่ อง (Masthead) เพื่อให้ผมาเยียมรู ้วาอยูส่วนไหนของเว็บเพจ โดยอาจเพิ่มภาพคลิปอาร์ ต (Clip
art) ให้ดูน่ามองขึ้น
4) ใช้เป็ นเส้นแบ่งหรื อเส้นคัน (Divider line หรื อ horizontal rule)โดยทัวไปใช้เพื่อกั้นส่ วนท้ายของหน้า
                               ่                                         ่
ที่มีขอมูลเกี่ยวกับหัวข้อ คาถามและคาตอบ
      ้
7) ใช้เป็ นภาพพื้นหลัง (Background image)
                                             ้
เพื่อให้เว็บเพจดูสวยงามและง่ายสาหรับผูใช้ในการเข้าไปในส่ วนต่าง ๆ พื้นหลังที่เป็ นที่นิยม คือ
แถบด้านข้างที่มีส่วนเชื่ อมโยงไปยังเว็บเพจหน้าอื่น ๆ
8) ใช้เป็ นหัวข้อ (Heading) ด้วยข้อความที่เป็ นกราฟิ ก
เพื่อลดปั ญหาการไม่มีรูปแบบอักขระในเครื่ องคอมพิวเตอร์ ของผูใช้     ้
9) ใช้เป็ นภาพถ่าย (Photo) มักใช้เพื่อให้เว็บเพจนั้นน่าสนใจด้วยภาพถ่ายของคน

ข้ อควรพิจารณาในการใช้ กราฟิ ก มีดงนี้ ั
1)ในภาวะปกติไม่ควรต้องใช้เวลาในการรอให้ภาพปรากฏนานกว่า 10 วินาที
2) ใช้กราฟิ กเพื่อเป็ นส่ วนนาทางผูอ่าน ไปยังข้อมูลที่เกี่ยวข้อง
                                    ้
                            ั
3) ใช้กราฟิ กเพื่อทาให้หวข้อหลักน่าสนใจ และสื่ อความหมาย
4) ใช้กราฟิ กเพื่อทาให้เว็บเพจหน้านั้น เหมาะสมและสอดคล้องกับเป้ าประสงค์ของเว็บเพจนั้น
และหมาะกับความรู ้สึกที่เป็ นความต้องการของผูใช้   ้
5) เว็บจะมองดูเหมือนเว็บที่สร้างด้วยมืออาชีพ เมื่อใช้ชุดของกราฟิ กที่ประกอบด้วยส่ วนที่เป็ นเส้นทางเดิน
โลโก และหัวเรื่ องเท่านั้น เพื่อให้ใช้เวลาในการแสดงผลเร็ วใช้กราฟิ กอื่นประกอบ
ก็ต่อเมื่อเวลาที่ใช้ในการแสดงผลชุดของกราฟิ กดังกล่าวใช้เวลาไม่นานนัก
                              ่                                        ้
6) ขนาดของเว็บเพจควรอยูระหว่าง 40-60 K ซึ่ งเป็ นกฎโดยทัวไป แต่ถาจาเป็ นต้องมีภาพเว็บเพจ
                                                                ่
                          ั
เว็บเพจขนาด 75 K ก็ยงมีความเหมาะสมต่อระยะเวลาในการถ่ายโอนกล่าวโดยสรุ ป
การใช้กราฟิ กจะต้องพิจารณาถึงความเร็ วในการปรากฏภาพเป้ าประสงค์ การเน้นกราฟิ ก
พื้นที่ในการวางหัวข้อ และ “ความรู้สึก” ทั้งนี้กราฟิ กในเว็บไซต์ควรมีสี
อักขระรู ปแบบเดียวกันและใช้การแสดงผลพิเศษแบบเดียวกัน ทั้งนี้ปุ่มทิศทาง หัวเรื่ อง บูลเล็ต และเส้นแบ่ง
                                                ่                   ั
จะดูดีข้ ึน เมื่ออกแบบให้ใช้สีใดสี หนึ่งที่มีอยูในโลโกของเว็บไซต์น้ น

                 ่
9. การใช้ ภาพเคลือนไหว
                                                  ่
ภาพเคลื่อนไหวมีอิทธิ พลต่อการมองสิ่ งต่าง ๆ ที่อยูในสภาพโดยรอบ
       ้
การที่ตองอ่านอะไรในสภาพที่มีสิ่งเคลื่อนไหวไปมาโดยรอบ จะทาให้รู้สึกราคาญ

                                                                                                       10
                                                               ู้
จึงไม่ควรมีภาพเคลื่อนไหวถาวรในหน้าเว็บเพจ เพราะจทาให้ผใช้ไม่มีสมาธิ ในการอ่านข้อความนอกจากนี้
ก่อนจะใช้ภาพเคลื่อนไหวควรตรวจสอบโฮมเพจที่สร้างก่อนว่าง่ายต่อการอ่านง่ายต่อการไปยังส่ วนต่าง ๆ
มีความคงเส้นคงวาในการออกแบบ และใช้เวลาไม่นานในการปรากฏหรื อไม่
เพราะภาพเคลื่อนไหวหรื อเทคนิคพิเศษที่ใช้จะเพิมเวลาในการปรากฏและภาพเคลื่อนไหวบางชนิดจาเป็ นต้
                                               ่
องติดตั้งโปรแกรมสาหรับแสดงผลก่อน จึงจะแสดงผลได้เช่น โปรแกรม Shockwave Player และโปรแกรม
Flash Player การนาภาพเคลื่อนไหวมาใช้
ต้องพิจารณาข้อดีและความเหมาะสมในการนามาใช้และมีจุดประสงค์ในการนาเสนอ ดังนี้
1) แสดงความต่อเนื่องของภาพที่เปลี่ยนแปลงไป
2) บ่งบอกขนาดและมิติในการเปลี่ยน
3) แสดงการเปลี่ยนแปลงไปตามเวลา
4) แสดงสิ่ งหลากหลายอย่าง
5) ทาให้ภาพกราฟิ กน่าสนใจมากขึ้น
6) ช่วยในการมองโครงสร้าง 3 มิติ
7) ใช้ดึงดูดความสนใจในช่วงเริ่ มต้น แล้วให้หยุดนิ่งเพื่อไม่ให้น่าราคาญ
            ู้               ั
8) เพื่อให้ผใช้มีปฏิสัมพันธ์กบข้อมูล

           ี ั
10 การใช้ วดีทศน์
การใช้วดิทศน์บนเว็บ อาจเกิดปั ญหาเกี่ยวกับความกว้างของช่องสัญญาณ จึงควรมีให้นอยที่สุด
          ี ั                                                                      ้
ถ้ามีความจาเป็ นต้องใช้
                         ั                    ้
ควรใช้การแสดงผลวีดิทศน์ที่ส้ ันและใช้พ้ืนที่นอยใช้เพื่อเป็ นส่ วนเสริ มข้อความและภาพ
มากกว่าการใช้ส่วนหลักของเนื้อหาในเว็บไซต์การใช้วีดิทศน์มีขอดีและมีความเหมาะสมในกรณี ต่อไปนี้
                                                           ั     ้
1) มีการนาเสนอในลักษณะของรายการโทรทัศน์ ภาพยนตร์
       ู้                               ้ ู
2) ให้ผใช้ประทับใจในบุคลิกภาพของผูพด และรับประสบการณ์เพิ่มขึ้น
3) แสดงสิ่ งที่เคลื่อนไหว เช่น ส่ วนของการเต้นบัลเลย์ หรื อการสาธิต

11 การใช้ เสี ยง
          ่
เสี ยงไม่วาจะเป็ นเสี ยงพูด เสี ยงดนตรี และเสี ยงประกอบฉาก ช่วยในการนาเสนอเว็บน่าสนใจ ข้อมูลที่เป็ น
RealAudio
                                    ้                        ้
ทาให้เกิดการเปลี่ยนแปลงการใช้ขอมูลเสี ยงในเว็ลจากเดิมที่ตองรอให้แฟ้ มเสี ยงมีการถ่ายโอนมาก่อนแล้วจึ
                                            ั
งเปิ ดฟังได้ มาเป็ นการเรี ยกฟังได้ในทันทีทนใด
                                                               ้
ทาให้เว็บเพจนั้นมีชีวิตชีวาการใช้เสี ยงกันเช่นเดียวกับการใช้ขอความและภาพ


                                                                                                  11
ที่จะต้องมีการเลือกใช้ให้เหมาะสมกับเวลาและโอกาส นันหมายความว่า
                                                           ่
                                                                           ้                    ั
บางทีการไม่ใช้เสี ยงอาจมีความเหมาะสมกว่าการใช้เสี ยง ประโยชน์หลักของการใช้ขอมูลที่เป็ นเสี ยงมีดงนี้
1) ช่องของการสื่ อด้วยเสี ยง แยกออกจากการแสดงผลในลักษณะอื่น จึงไม่กระทบต่อข้อมูลบนหน้าจอ
2) เสี ยงพูดใช้เพื่อเสริ มการช่วยเหลือ หรื อให้คาแนะนา
                          ั                                         ้ ู
3) เสี ยงพูดใช้แทนวีดิทศน์ เพื่อช่วยให้จินตนาการถึงบุคลิกลักษณะของผูพด
4) ทั้งนี้การใช้เสี ยงบนเว็บอาจเป็ นเสี ยงดนตรี เสี ยงพูด และเสี ยง
ประกอบต่าง ๆ เสี ยงดนตรี เป็ นรู ปแบบของเสี ยงที่ใช้กนมากั

ความสั มพันธ์ ระหว่ างสื่ อโสตทัศนูปกรณ์ ต่าง ๆ
การแสดงขั้นตอนของประสบการณ์การเรี ยนรู้ และการใช้สื่อแต่ละประเภทในกระบวนการเรี ยนรู้ดวย          ้
โดยพัฒนาความคิดของ Bruner ซึ่งเป็ นนักจิตวิทยา นามาสร้างเป็ น “กรวยประสบการณ์” (Cone of
Experiencess) โดยแบ่งเป็ นขั้นตอนดังนี้
1) ประสบการณ์ตรง โดยการให้ผเู้ รี ยนได้รับประสบการณ์ตรงจากของจริ ง เช่น การจับต้อง และการเห็น
เป็ นต้น
2) ประสบการณ์รอง เป็ นการเรี ยนโดยให้ผเู ้ รี ยนเรี ยนจากสิ่ งที่ใกล้เคียงความเป็ นจริ งที่สุด
ซึ่ งอาจเป็ นการจาลองก็ได้
3) ประสบการณ์นาฏกรรมหรื อการแสดง เป็ นการแสดงบทบาทสมมติหรื อการแสดงละคร
เนื่องจากข้อจากัดด้วยยุคสมัยเวลา และสถานที่ เช่น เหตุการณ์ที่เกิดขึ้นในประวัติศาสตร์
หรื อเรื่ องราวที่เป็ นนามธรรม เป็ นต้น
4) การสาธิต เป็ นการแสดงหรื อการทาเพื่อประกอบคาอธิ บายเพื่อให้เห็นลาดับขั้นตอนของการกระทานั้น
5) การศึกษานอกสถานที่ เป็ นการเรี ยนรู ้จากประสบการณ์ต่าง ๆภายนอกสถานที่เรี ยน
                 ่
อาจเป็ นการเยียมชมสถานที่ การสัมภาษณ์บุคคลต่าง ๆ เป็ นต้น
6) นิทรรศการ เป็ นการจัดแสดงสิ่ งของต่าง ๆ เพื่อให้สาระประโยชน์แก่ผชม        ู้
โดยการนาประสบการณ์หลายอย่างผสมผสานกันมากที่สุด
7) โทรทัศน์
             ั                                                  ้                           ้  ่
โดยใช้ท้ งโทรทัศน์การศึกษาและโทรทัศน์การสอนเพื่อให้ขอมูลความรู ้แก่ผเู ้ รี ยนหรื อผูชมที่อยูในห้องเรี ยน
           ่
หรื ออยูทางบ้าน
8) ภาพยนตร์
               ั                                                           ั
เป็ นภาพที่บนทึกเรื่ องราวลงบนฟิ ล์มเพื่อให้ผเู ้ รี ยนได้รับประสบการณ์ท้ งภาพและเสี ยงโดยใช้ประสาทตาแล
ะหู




                                                                                                      12
9) การบันทึกเสี ยง วิทยุ ภาพนิ่ง อาจเป็ นทั้งในรู ปของแผ่นเสี ยง เทปบันทึกเสี ยง วิทยุ รู ปภาพ สไลด์
            ่
ข้อมูลที่อยูในขั้นนี้ จะให้ประสบการณ์แก่ผเู้ รี ยนที่ถึงแม้จะอ่านหนังสื อไม่ออกแต่ก็จะสามารถเข้าใจเนื้อหาไ
ด้
10) ทัศนสัญลักษณ์ เช่น แผนที่ แผนภูมิ หรื อเครื่ องหมายต่างๆ ที่เป็ นสัญลักษณ์แทนสิ่ งของต่าง ๆ
                               ั
11) วจนสัญลักษณ์ ได้แก่ตวหนังสื อในภาษาเขียน
และเสี ยงพูดของคนในภาษาพูดการใช้กรวยประสบการณ์ของเดลจะเริ่ มต้นด้วยการให้ผเู ้ รี ยนมีส่วนร่ วมอยูใ      ่
นเหตการณ์หรื อการกระทาจริ งเพื่อให้ผเู ้ รี ยนมีประสบการณ์ตรงเกิดขึ้นก่อน
แล้วจึงเรี ยนรู ้โดยการเฝ้ าสังเกตในเหตุการณ์ที่เกิดขึ้น ซึ่ งเป็ นขั้นต่อไปของการได้รับประสบการณ์รอง
                                    ้
ต่อจากนั้นจึงเป็ นการเรี ยนรู ้ดวยการรับประสบการณ์โดยผ่านสื่ อต่างๆ
และท้ายที่สุดเป็ นการให้ผเู ้ รี ยนเรี ยนจากสัญลักษณ์ซ่ ึ งเป็ นเสมือนตัวแทนของเหตุการณ์ที่เกิดขึ้น
นักจิตวิทยาท่านหนึ่งชื่อ เจโรม บรุ นเนอร์ (Jerome Bruner)
ได้ออกแบบโครงสร้างของกิจกรรมการสอนไว้รูปแบบหนึ่ง
                                  ้
โดยประกอบด้วยมโนทัศน์ดานการกระทาโดยตรง (Enactive) การเรี ยนรู้ดวยภาพ (Iconic)  ้
                   ้
และการเรี ยนรู้ดวยนามธรรม(Abstract) เมื่อเปรี ยบเทียบกับกรวยประสบการณ์ของเดลกับลักษณะสาคัญ 3
ประการของการเรี ยนรู ้ของบรุ นเนอร์ แล้วจะเห็นว่ามีลกษณะใกล้เคียงและเป็ นคู่ขนานกัน
                                                            ั
ดังแสดงให้เห็นการเปรี ยบเทียบดังแสดงในภาพ




                                                                                                       13
ภาพ แสดงกรวยประสบการณ์ของเอดการ์ เดล (Edgar Dale) เปรี ยบเทียบกับการเรี ยนรู ้ของบรุ นเนอร์

ทฤษฎีการเรียนรู้ และจิตวิทยาการเรียนรู้
ถนอมพร เลาหจรัสแสง (2541)
ได้กล่าวทฤษฏีการเรี ยนรู ้และจิตวิทยาการเรี ยนรู ้ที่เกี่ยวข้องกับการออกแบบสื่ อมัลติมีเดียเพื่อการศึกษา
     ั
มีดงนี้
1) ทฤษฎีพฤติกรรมนิยม (Behaviorism)
เป็ นทฤษฎีซ่ ึ งเชื่อว่าจิตวิทยาเป็ นเสมือนการศึกษาทางวิทยาศาสตร์ ของพฤติกรรมมนุษย์ (Scientific Study
ofHuman Behavior) และการเรี ยนรู ้ของมนุษย์เป็ นสิ่ งที่สามารถสังเกตได้จากพฤติกรรมภายนอก
นอกจากนี้ยงมีแนวคิดเกี่ยวกับความสัมพันธ์ระหว่างสิ่ งเร้าและการตอบสนอง( Stimuli and Response )
             ั
เชื่อว่าการตอบสนองต่อสิ่ งเร้าของมนุษย์จะเกิดขึ้นควบคู่กนใน   ั
                                      ั
ช่วงเวลาที่เหมาะสม นอกจากนี้ยงเชื่อว่าการเรี ยนรู ้ของมนุษย์เป็ นพฤติกรรมแบบแสดงอาการกระทา
(Operant Conditioning) ซึ่งมีการเสริ มแรง ( Reinforcement) เป็ นตัวการ
                                        ู
โดยทฤษฏีพฤติกรรมนิยมนี้ จะไม่พดถึงความนึกคิดภายในของมนุษย์ ความทรงจา ภาพ ความรู้สึก
โดยถือว่าคาเหล่านี้เป็ นคาต้องห้าม (Taboo) ซึ่ งทฤษฎีน้ ีส่งผลต่อการเรี ยนการสอนที่สาคัญในยุคนั้น


                                                                                                           14
ในลักษณะที่การเรี ยนเป็ นชุดของพฤติกรรมซึ่ งจะต้องเกิดขึ้นตามลาดับที่แน่ชด    ั
                          ั              ั
การที่ผเู ้ รี ยนจะบรรลุวตถุประสงค์ได้น้ นจะต้องมีการเรี ยนตามขั้น ตอนเป็ นวัตถุประสงค์ๆ ไป
ผลที่ได้จากการเรี ยนขั้นแรกนี้จะเป็ นพื้นฐานของการเรี ยนในขั้นต่อ ๆ ไป ในที่สุด
สื่ อมัลติมีเดียเพื่อการศึกษาที่ออกแบบตามแนวคิดของทฤษฎีพฤติกรรมนิยมนี้
จะมีโครงสร้างของบทเรี ยนในลักษณะเชิงเส้นตรง (Linear)
โดยผูเ้ รี ยนทุกคนจะได้รับการนาเสนอเนื้อหาในลาดับที่เหมือนกันและตายตัว
                     ู้
ซึ่ งเป็ นลาดับที่ผสอนได้พิจารณาแล้วว่าเป็ นลาดับการสอนที่ดีและผูเ้ รี ยนจะสามารถเรี ยนรู ้ได้อย่งมีประสิ ทธิ
ภาพมากที่สุด นอกจากนั้นจะมีการตั้งคาถาม ๆ
ผูเ้ รี ยนอย่างสม่าเสมอโดยหากผูเ้ รี ยนตอบถูกก็จะได้รับการตอบสนองในรู ปผลป้ อนกลับทางบวกหรื อรางวั
ล (Reward) ในทางตรงกัน
ข้ามหากผูเ้ รี ยนตอบผิดก็จะได้รับการตอบสนองในรู ปของผลป้ อนกลับในทางลบและคาอธิ บายหรื อการลงโ
                                                                                 ้
ทษ ( Punishment) ซึ่ งผลป้ อนกลับนี้ถือเป็ นการเสริ มแรงเพื่อให้เกิดพฤติกรรมที่ตองการ
สื่ อมัลติมีเดียเพื่อการศึกษาที่ออกแบบตามแนวคิดของทฤษฎีพฤติกรรมนิยม
จะบังคับให้ผเู ้ รี ยนผ่านการประเมินตามเกณฑ์ที่กาหนดไว้ตามจุดประสงค์เสี ยก่อน
                                                                           ่
จึงจะสามารถผ่านไปศึกษาต่อยังเนื้ อหาของวัตถุประสงค์ต่อไปได้หากไม่ผานเกณฑ์ที่กาหนดไว้ผเู ้ รี ยนจะต้
องกลับไปศึกษาในเนื้อหาเดิมอีกครั้งจนกว่าจะผ่านการประเมิน

2) ทฤษฎีปัญญานิยม (Cognitivism) เกิดจากแนวคิดของชอมสกี้(Chomsky) ที่ไม่เห็นด้วยกับสกินเนอร์
(Skinner) บิดาของทฤษฎีพฤติกรรมนิยม
                                       ่
ในการมองพฤติกรรมมนุษย์ไว้วาเป็ นเหมือนการทดลองทางวิทยาศาสตร์
                                         ั                                       ้
ชอมสกี้เชื่อว่าพฤติกรรมของมนุษย์น้ นเป็ นเรื่ องของภายในจิตใจมนุษย์ไม่ใช้ผาขาวที่เมื่อใส่ สีอะไรลงไปก็จ
                  ั
ะกลายเป็ นสี น้ น มนุษย์มีความนึกคิด มีอารมณ์ จิตใจ และความรู ้สึกภายในที่แตกต่างกันออกไป
ดังนั้นการออกแบบการเรี ยนการสอนก็ควรที่จะคานึงถึงความแตกต่างภายในของมนุษย์ดวย                ้
ในช่วงนี้มีแนวคิดต่างๆ เกิดขึ้นมากมาย เช่น แนวคิดเกี่ยวกับการจา ( Short Term Memory , Long Term
Memory and Retention) แนวคิดเกี่ยวกับการแบ่งความรู ้ออกเป็ น 3 ลักษณะคือ
ความรู ้ในลักษณะเป็ นขั้นตอน (Procedural Knowledge)
                                                               ้                         ั
ซึ่ งเป็ นความรู ้ที่อธิ บายว่าทาอย่างไรและเป็ นองค์ความรู้ที่ตองการลาดับการเรี ยนรู้ที่ชดเจน
ความรู้ในลักษณะการอธิบาย (Declarative Knowledge) ซึ่ งได้แก่ความรู ้ที่อธิ บายว่าคืออะไร
และความรู้ในลักษณะเงื่อนไข (Conditional Knowledge)ซึ่ งได้แก่ความรู ้ที่อธิ บายว่าเมื่อไร แและทาไม
                                     ้
ซึ่งความรู้ 2 ประเภทหลังนี้ ไม่ตองการลาดับการเรี ยนรู ้ที่ตายตัว
ทฤษฎีปัญญานิยมนี้ส่งผลต่อการเรี ยนการสอนที่สาคัญในยุคนั้น กล่าวคือ



                                                                                                          15
ทฤษฎีปัญญานิยมทาให้เกิดแนวคิดเกี่ยวกับการออกแบบในลักษณะสาขา (Branching)ของคราวเดอร์
(Crowder) ซึ่งเป็ นการออกแบบในลักษณะสาขา หากเมื่อเปรี ยบเทียบกับ
บทเรี ยนที่ออกแบบตามแนวคิดของพฤติกรรมนิยมแล้ว
จะทาให้ผเู ้ รี ยนมีอิสระมากขึ้นในการควบคุมการเรี ยนด้วยตัวเอง
โดยเฉพาะอย่างยิงการมีอิสระมากขึ้นในการเลือกลาดับของการนาเสนอเนื้อหาบทเรี ยนที่เหมาะสมกับตน
                     ่
สื่ อมัลติมีเดียเพื่อการศึกษาที่ออกแบบตามแนวคิดของทฤษฎีปัญญานิยมก็จะมีโครงสร้างของบทเรี ยนในลัก
ษณะสาขาอีกเช่นเดียวกัน
โดยผูเ้ รี ยนทุกคนจะได้รับการเสนอเนื้ อหาในลาดับที่ไม่เหมือนกันโดยเนื้อหาที่จะได้รับการนาเสนอจต่อไป
                ่ ั
นั้นจะขึ้นอยูกบความสามารถ ความถนัด และ
ความสนใจของผูเ้ รี ยนเป็ นสาคัญ

3) ทฤษฎีโครงสร้างความรู้ (Scheme Theory) ภายใต้ทฤษฎีปัญญานิยม (Cognitivism)
     ั
นี้ยงได้เกิดทฤษฎีโครงสร้างความรู ้ ( Scheme Theory)
                                                                            ่ ั
ขึ้นซึ่ งเป็ นแนวคิดที่เชื่ อว่าโครงสร้างภายในของความรู ้ที่มนุษย์มีอยูน้ นจะมีลกษณะเป็ นโหนดหรื อกลุ่มที่มีก
                                                                                   ั
ารเชื่ อมโยงกันอยู่ ในการที่มนุษย์จะรับรู ้อะไรใหม่ ๆ นั้น มนุษย์จะนาความรู ้ใหม่ ๆ
ที่เพิ่งได้รับนั้นไปเชื่ อมโยงกับกลุ่มความรู ้ที่มีอยูเ่ ดิม (Pre-existing Knowledge) รู เมลฮาร์ทและออโทนี่
(Rumelhart and Ortony,1977)
                                                   ่
ได้ให้ความหมายของคาโครงสร้างความรู ้ไว้วาเป็ นโครงสร้างข้อมูลภายในสมองของมนุษย์ซ่ ึ งรวบรวมควา
มรู้เกี่ยวกับวัตถุ ลาดับเหตุการณ์ รายการกิจกรรมต่างๆ เอาไว้ หน้าที่ของโครงสร้างความรู ้น้ ีก็คือ
การนาไปสู่ การรับรู ้ขอมูล (Perception) การรับรู ้ขอมูลนั้นไม่สามารถ
                          ้                               ้
เกิดขึ้นได้หากขาดโครงสร้างความรู ้ (Schema)
ทั้งนี้ก็เพราะการรับรู ้ขอมูลนั้นเป็ นการสร้างความหมายโดยการถ่ายโอนความรู ้ใหม่เข้ากับความรู ้เดิม
                            ้
                                   ่
ภายในกรอบความรู ้เดิมที่มีอยูและจากการกระตุนโดยเหตุการณ์หนึ่ง ๆ ที่ช่วยให้เกิดการเชื่ อมโยงความรู ้น้ น
                                                     ้                                                      ั
ๆเข้าด้วยกัน การรับรู ้เป็ นสิ่ งสาคัญที่ทาให้เกิดการเรี ยนรู ้
เนื่องจากไม่มีการเรี ยนรู ้ใดที่เกิดขึ้นได้โดยปราศจากการรับรู้
                                                                                              ั
นอกจากโครงสร้างความรู ้จะช่วยในการรับรู ้และการเรี ยนรู ้แล้วนั้น โครงสร้างความรู ้ยงช่วยในการระลึก
(Recall) ถึงสิ่ งต่างๆ ที่เราเคยเรี ยนรู้มา (Anderson,1984)

การนาทฤษฎีโครงสร้างความรู้มาประยุกต์ใช้ในการสร้างโปรแกรมคอมพิวเตอร์
             ั
จะส่ งผลให้ลกษณะการนาเสนอเนื้อหาที่มีการเชื่ อมโยงกันไปมา คล้ายใยแมงมุม(Webs)
หรื อบทเรี ยนในลักษณะที่เรี ยกว่า บทเรี ยนแบบสื่ อหลายมิติ
(Hypermedia)ดังนั้นในการออกแบบสื่ อมัลติมีเดียเพื่อการศึกษา จึงจาเป็ นต้องนาแนวคิดของทฤษฎีต่าง ๆ

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

                                                       ้           ู้
1) การออกแบบให้เหมาะสมกับรู ปแบบความคิดของผูใช้ ช่วยให้ผใช้มองเห็นภาพของระบบ
                                                         ่
2) มีความสม่าเสมอแต่ตองไม่น่าเบื่อ ความสม่าเสมออยูในลักษณะของคาสั่งที่ใช้กระบวนการที่ผใช้ใช้
                           ้                                                               ู้
ในการควบคุมและการเคลื่อนไหว
              ั                      ้                                     ้
3) จัดให้มีข้ นตอนที่ส้ ันสาหรับผูที่มีประสบการณ์ และมีรายละเอียดสาหรับผูที่เพิ่งเริ่ มใช้
           ้                    ู้             ู้                ่
4) ให้ขอมูลย้อนกลับในสิ่ งที่ผใช้ทา ไม่ให้ผใช้มองเห็นจอภาพที่วางเปล่า
5) ทาหน้าจอภาพให้สามารถแสดงสิ่ งต่าง ๆ ได้อย่างมีความหมายและใช้อย่างคุมค่า   ้
6) ใช้ขอความที่เป็ นทางบวก สามารถสื่ อหรื อนาไปสู่ การกระทาได้
         ้
                                   ั
โดยหลีกเลี่ยงการใช้ขอความรู ้กนเฉพาะคนบางกลุ่มหรื อเครื่ องหมายที่ทาให้สับสนหรื อคาย่อที่ไม่สื่อความ
                         ้
หมาย
7) พยายามจัดหน้าจอภาพให้เหมาะสม
น่าอ่านและใช้การต่อไปยังเว็บเพจหน้าถัดไปมากกว่าที่จะใช้การเลื่อนหน้าจอภาพไปทางขวามือ
                      ้
8) พยายามไม่ให้มีขอผิดพลาด
                                                  ้
9) ถ้ามีการเชื่อมโยงภายในเพจจะต้องแน่ใจว่าผูใช้เข้าใจและสามารถทาได้อย่างสะดวก
                                             ้             ่
10) ถ้ามีการเชื่อมโยงกับภายนอกจะต้องมีขอความบอกไว้วามีการเชื่ อมโยงกับสิ่ งใด
                                       ั ้          ู้                   ่
และเมื่อเรี ยกใช้จะแสดงสิ่ งใดให้กบผูใช้เพื่อให้ผใช้สามารถตัดสิ นใจได้วาจะมีประโยชน์ในการเรี ยกดูหรื อ
ไม่
11) ต้องมีเหตุผลที่สมควรในการนาสิ่ งภายนอกมาเชื่ อมโยงกับเพจ
และจะต้องทดสอบการเชื่ อมโยงสม่าเสมอเพื่อไม่ให้เกิดกรณี ที่ไม่สามารถเชื่ อมโยงได้
12) หลีกเลี่ยงการทาเว็บเพจที่ยาว จะต้องแบ่งสาระอย่างเหมาะสมหรื อมีการจัดทาเป็ นกลุ่ม
                                           ั
13) การจัดทาข้อความและภาพ จะต้องมีวตถุประสงค์ มีการจัดเตรี ยมวางแบบขนาดของตัวอักษร สี
การกาหนดปุ่ มต่าง ๆ และการใช้เนื้ อที่
14) ภาพที่ใช้ตองไม่ใหญ่เกินไปและต้องไม่ใช้เวลานานในการเชื่ อมโยงภาพมาสู่ เว็บเพจ
                 ้
15) การเชื่ อมโยงภาพมาสู่ เว็บเพจนั้นควรบอกขนาดของภาพเพื่อให้ผใช้ตดสิ นใจก่อนที่จะเลือกใช้
                                                                      ู้ ั
รื อสั่งพิมพ์ได้อย่างสะดวก

                                                                                                       17
                                       ้
17) จัดทาส่ วนท้ายของเว็บเพจให้มีชื่อผูทา E-mail ที่จะติดต่อได้ วันที่ที่มีการจัดทา/แก้ไข เปลี่ยนแปลง
แนวการเลือกต่าง ๆ เพื่อให้สามารถเห็นภาพรวมทั้งหมดได้
และจานวนหน้าที่มีการจัดทาและต้องไม่ยาวเกินไปหรื อสั้นเกินไป
18) หลักสาคัญ คือ การทาให้เว็บเพจน่าสนใจ
                                                                   ้
โดยการใช้การเชื่อมโยงศักยภาพในการที่จะดึงดูดความสนใจของผูใช้โดยการใช้ภาพและการวางแบบ
การใช้ง่ายและให้คุณค่าในการเรี ยนรู ้
19) ต้องมีการปรับปรุ งเว็บเพจอยูเ่ สมอแมกกริ ล (Megreal, 1997)
ได้แสดงความคิดเห็นและเสนอแนะโครงสร้างของเว็บเพจของเว็บไซต์ สาหรับรายวิชา
ซึ่งควรจะมีองค์ประกอบที่เป็ นเว็บเพจ ดังต่อไปนี้
(อ้างถึงในสรรรัชต์ ห่อไพศาล,2544)

1) โฮมเพจ (Home Page) เป็ นเว็บเพจแรกของเว็บไซต์ โฮมเพจควรมี
เนื้อหาสั้น ๆ เฉพาะที่จาเป็ น เกี่ยวกับรายวิชา ซึ่งประกอบด้วย ชื่อรายวิชา ชื่อหน่วยงานผูรับผิดชอบรายวิชา
                                                                                        ้
สถานที่โฮมเพจควรจะจบในหน้าจอเดียว ควรหลีกเลี่ยงที่จะใส่ ภาพกราฟิ ก ขนาดใหญ่
              ้
ซึ่งจะทาให้ตองใช้เวลาในการเรี ยกโฮมเพจ ขึ้นมาดู

องค์ ประกอบของกราฟิ ก
•ตัวอักษร(typographic)
•สัญลักษณ์(symbol)
•ภาพประกอบ(illustrator)
•ภาพถ่าย(photography)

ความแตกต่ าง
การออกแบบ เป็ นการใช้กระบวนการคิดแบบ จินตนาการ อิสระ และสร้างสรรค์
การวางแผน เป็ นการใช้ความคิดเป็ นขั้นตอน ที่จะนาไปสู่ รูปแบบของจินตนาการ

กระบวนการออกแบบ
1. พิจารณาเนื้อหา
2. วิเคราะห์กลุ่มเป้ าหมาย
3. วิเคราะห์จุดมุ่งหมายของแต่ละงาน
4. จัดองค์ประกอบให้เหมาะสมกับข้อ1,2,และ3



                                                                                                        18
องค์ ประกอบของทัศนศิลป์
เส้น สี จุด พื้นผิว รู ปร่ าง รู ปทรง
สี เส้น สี สี พื้นผิว พื้นผิว จุด จุด สี เส้น

สี color
สี หมายถึง แสงที่ตกกระทบวัตถุแล้วสะท้อนเข้าสู่ ตาเรา
ทาให้มองเห็นวัตถุเหล่านั้นเป็ นสี ต่างๆตามคุณลักษณะของแสงสะท้อน

มิติ การใช้สีในการออกแบบ
•มิติ..สี โทนร้อน/สี โทนเย็น
                       ั
•มิติ..สี กลมกลืน/สี ตดกัน
•มิติ..สี มืด/สี สว่าง
มิติ การใช้สีในการออกแบบ
•การใช้สีกลมกลืน/สี ตดกันั
•สี กลมกลืน นุ่มนวลอ่อนหวาน เป็ นกันเอง พวกเดียวกัน
     ั
•สี ตดกัน ตื่นเต้น ขัดแย้ง ลึกลับ จริ งจัง แข็งแรง อันตราย

มิติ การใช้สีในการออกแบบ
•มิติการใช้สีมืด/สี สว่าง
•สี มืด มันคง ลึกลับ เข้มแข็ง จริ งจัง ลดปริ มาณพื้นที่
          ่
•สี สว่าง เปิ ดเผย กว้างขวาง เป็ นกันเอง เพิ่มปริ มาณพื้นที่

เส้ น Line




เส้น เป็ นองค์ประกอบที่มีรูปลักษณะเป็ นรอยยาวต่อเนื่ องกันหน้าที่สาคัญของเส้นคือการแสดงทิศทาง
ลักษณะของเส้นจาแนกได้เป็ น 2 กลุ่มคือ กลุ่มเส้นตรงและกลุ่มเส้นไม่ตรง




                                                                                                19
กลุ่มเส้ นตรง
เส้นตรงตั้งฉาก ให้ความรู ้สึกมันคง สง่า มีอานาจเส้นตรงแนวนอน ให้ความรู ้สึกสงบเงียบ ราบเรี ยบ
                                   ่
                                         ั่
เส้นตรงเฉี ยง ให้ความรู ้สึกรวดเร็ ว ไม่มนคง ไม่แน่นอน
กลุ่มเส้ นไม่ ตรง
เส้นโค้ง ให้ความรู ้สึกนุ่มนวล อ่อนหวาน
เส้นคด ให้ความรู้สึกสับสน งุนงง กังวล
เส้นซิ กแซก ให้ความรู ้สึกรุ นแรง ไม่ไว้ใจ ตื่นเต้น
   ้
พืนผิว texture
พื้นผิวเป็ นองค์ประกอบที่ให้ความรู ้สึกสัมผัสด้านนอกสุ ดของวัตถุสิ่งของ
พื้นผิวมี 2 มิติ ได้แก่
1. มิติพ้ืนผิวเรี ยบ/พื้นผิวขรุ ขระ
2. มิติพ้ืนผิวด้าน/พื้นผิวมันวาว

           ื้
การใช้ พนผิวกับการออกแบบ
1. พื้นผิวเรี ยบ ให้ความรู ้สึกมีระเบียบ จริ งจัง เป็ นทางการ
2. พื้นผิวขรุ ขระ ให้ความรู ้สึกน่ากลัว ลึกลับ ขบขัน
3. พื้นผิวด้าน ให้ความรู ้สึกเป็ นกันเอง สบาย ๆ เฉื่ อยชา
4. พื้นผิวมันวาว ให้ความรู้สึกตื่นเต้น รวดเร็ ว ฉาบฉวย
จุด Dot
เป็ นองค์ประกอบที่มีขนาดเล็กที่สุดทาหน้าที่สาคัญคือการแสดงตาแหน่งการวางจุดตั้งแต่2
                                                                                    ั
จุดขึ้นไปเรี ยงไปทิศทางเดียวกันจะทาให้ดูเป็ นเส้นแต่ถาวางจุดไว้ตาแหน่งใกล้กนเป็ นกลุ่มก้อนจะแลดูเป็ นรู
                                                           ้
ปร่ างรู ปทรง
รู ปร่ าง Form
รู ปร่ างเป็ นลักษณะของพื้นที่ภายในที่ถูกล้อมรอบด้วยเส้นเส้นเดียวที่ลากปลายทั้งสองด้านมาบรรจบกันหรื อ
ปลายด้านใดด้านหนึ่งลากไปบรรจบช่วงใดช่วงหนึ่งของเส้นเดียวกันก็ทาให้เกิดรู ปร่ างได้
                ้
ส่ วนพื้นที่ดานนอกของรู ปร่ างเรี ยกว่า “พื้น” (ground)รู ปร่ างมี 2 มิติคือความกว้างกับความยาว
รู ปทรง Shape
              ั
รู ปทรง มีลกษณะเหมือนกับรู ปร่ าง แต่รูปทรงมี 3 มิติ ได้แก่
ความกว้าง ความยาว และความหนาหรื อความลึก
การจัดภาพ COMPOSITION
ความหมาย
การจัดภาพ หมายถึง การนาองค์ประกอบต่างๆ มาเรี ยบเรี ยงหรื อ

                                                                                                    20
                          ้
จัดวางให้ได้ภาพตามที่ตองการ การจัดภาพจึงเป็ นการออกแบบ
   ่
เพือการถ่ายทอดความรู ้สึกนึ กคิดให้เป็ นรู ปธรรม
หลักการออกแบบ
                        ั
การออกแบบให้บรรลุวตถุประสงค์ควรคานึงถึงหลักใหญ่ๆ 2 ประการคือ
1. หน้าที่ (function) ของชิ้นงาน
2. ความสวยงาม(beauty) ของชิ้นงาน
หลักการจัดภาพ
1. ความสมดุล (balance)
2. การเน้น (emphasis)
3. ความเป็ นเอกภาพ (unity)

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

                                                                                                    21
                                                  ั
คือการตั้งโจทย์ให้ตนเองได้คิดมีกระบวนการ มีข้ นตอน และก็การวางแผนการดาเนินการต่อไป
เพื่อให้เกิดแนวความคิดใหม่
                                                                                                 ั
คิดในสิ่ งที่สร้างสรรค์เพื่อให้เกิดประโยชน์สูงสุ ดต่อการออกแบบแล้วการเริ่ มต้นก็จะบังเกิดขึ้นที่ตวคุณได้
พยายามนาเอากรอบความคิดที่กว้างทาให้แคบลงแล้วก็จะได้คาตอบเอง

ขั้นตอนการออกแบบเว็บ
     1. เข้าใจวัตถุประสงค์ก่อนการออกแบบเว็บ
     2. ออกแบบให้ตรงกับกลุ่มเป้ าหมาย
     3. ออกแบบหน้าโฮมเพจอย่างมีสไตล์
     4. จัดรู ปแบบโครงสร้างเว็บอย่างเหมาะสม
     5. จัดหมวดหมู่และหัวข้อให้เข้าใจง่าย
     6. เน้นการเข้าถึงเว็บด้วยความรวดเร็ ว
     7. การแสดงผลหน้าเว็บเบราเซอร์
     8. การใช้สัญลักษณ์รูปภาพกราฟฟิ กสาหรับเว็บไซต์
     9. การเลือกสี อย่างถูกหลักตามทฤษฎี
     10. การจัดรู ปแบบตัวอักษรสาหรับให้หน้าอ่าน



บรรณานุกรม

กิดานัน มลิทอง. เทคโนโลยีการศึกษาร่ วมสมัย.กรุ งเทพฯ : ภาควิชาโสตทัศนศึกษา คณะครุ ศาสตร์
จุฬาลงกรณ์มหาวิทยาลัย,2535.
ฉลอง ทับศรี . การพัฒนาบทเรี ยนคอมพิวเตอร์ ช่วยสอน(ตอนที่2).วารสารศึกษา-ศาสตร์
มหาวิทยาลัยบูรพา 10, 2(มิถุนายน-ตุลาคม ) : 84-100,2540.
ชัยยงค์ พรหมวงศ์ และคณะ . ระบบสื่ อการสอน. กรุ งเทพฯ : โรงพิมพ์จุฬาลงกรณ์ มหาวิทยาลัย,2520.
ถนอมพร เลาหจรัสแสง. อินเทอร์ เน็ต : เครื อข่ายเพื่อการศึกษา. วารสารครุ ศาสตร์ 26
(พฤศจิกายน 2541 – กุมภาพันธ์ 2542) : 55 – 66.
การสอนบนเว็บ (Web-Based Instruction) นวัตกรรมเพื่อ คุณภาพการเรี ยนการสอน.วารสารศึกษาศาสตร์
มหาวิทยาลัยเชียงใหม่ . ปี ที่ 28 ฉบับที่ 1 มกราคม – มิถุนายน , 2544.
Designing e-Learning : หลักการออกแบบและสร้ างเว็บเพจเพือการเรียนการสอน. เชียงใหม่ :
                                                                ่
มหาวิทยาลัยเชียงใหม่, 2545.


                                                                                                       22
ทักษิณา สวนานนท์. คอมพิวเตอร์ ช่วยสอน (CAI). คอมพิวเตอร์ รีวว 3 (กันยายน) 2529: 56-67.
                                                                 ิ
บุญชู ใจซื่อกุล. เปรียบเทียบผลสั มฤทธิ์ทางการเรียนของนักเรียนพยาบาลที่เรียน
จากคอมพิวเตอร์ ช่วยสอนโดยมีกลยุทธ์ ในการออกแบบโปรแกรมควบคุมความก้ าวหน้ าในการเรียนและสิ่ งช่
                                      ั
วยจัดมโนทัศน์ . ปริ ญญานิพนธ์ดุษฎีบณฑิต, มหาวิทยาลัยศรี นคริ นทรวิโรฒ ประสานมิตร : 2537.
ไพรัช ธัชยพงษ์ และ พิเชษฐ ดุรงคเวโรจน์.
รายงานการศึกษาวิจัยประกอบการร่ างพระราชบัญญัติการศึกษาแห่ งชาติ พ.ศ. .... ประเด็น
เทคโนโลยีสารสนเทศเพือการศึกษา.สานักงานคณะกรรมการการศึกษาแห่งชาติ สานักนายกรัฐมนตรี ,
                         ่
2541.
วิชาการ, กรม. มัลติมีเดียเพือการศึกษา.กรุ งเทพมหานคร : โรงพิมพ์คุรุสภา ลาดพร้าว, 2544.
                            ่
สรรรัชต์
ห่อไพศาล.การพัฒนาระบบการเรี ยนการสอนผ่ านเว็บวิชาศึกษาทัวไปเพือเพิมประสิ ทธิภาพการเรียนรู้ ของ
                                                               ่     ่ ่
ผู้เรียน .กรุ งเทพมหานคร : คณะครุ ศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ,2544.
สุ กรี รอดโพธิ์ ทอง. เทคนิคการออกแบบบทเรี ยนแบบ Tutorial โดยอาศัยคอมพิวเตอร์ ช่วยสอน . ครุ ศาสตร์
16(มกราคม -มีนาคม) 2531 : 1-15.
สุ ขเกษม อุยโต. การพัฒนาบทเรียนคอมพิวเตอร์ ช่วยสอนวิชาถ่ ายภาพ หลักสู ตรปริ ญญาตรี .
ปริ ญญานิพนธ์การศึกษามหาบัณฑิต, มหาวิทยาลัยศรี นคริ นทรวิโรฒ ประสานมิตร, 2540.
อรพันธุ์ ประสิ ทธิรัตน์.คอมพิวเตอร์ เพือการเรียนการสอน .กรุ งเทพฯ : คราฟแมนเพรส, 2530.
                                        ่
Clark.,C.L. A Student’ guide to the internet. Saddle River, New Jersey: Prentice-Hall,1966.
Driscoll,M. Defining Internet-Based and Web-Based Training. Performance Improvement. 36(4), April
1997 : 5-9.
Khan, B.H, (Ed.). Web- based instruction. Englewood Cliffs, NJ: Educational Technologies
Publications, 1997.
McGreal, Rory. (1997)The Internet : a learning environment. Teaching and Learning
at a Distance : What It Takes to Effectively Design, Deliver andEvaluate Programs. No. 71, (Fall
1997) : 67-74.
Parson, R. Type of the Web-based Instruction, 1997. [On-Line]. Available:
http://www.oise.on/ca
Relan.A.and Gillani,B.B. Web - Based Instruction. Engelwood Cliffs. New Jersey : Educational
Technology Publications,1997 .




                                                                                               23

								
To top