color theory

38
สารบัญ เรื่อง หน้า 1. จิตวิทยาเกี่ยวกับสี 1. ความรู้สึกที่คนส ่วนใหญ่มีต่อสีต่างๆ 2. ทฤษฎีของสี 1. เรียนรู้ทฤษฎีสีสาหรับงานออกแบบ 2. ประเภทของสี 3. วรรณะของสี 4. เทคนิคการใช้สีในวงจรสี 5. เข้าใจความรู้สึกของมนุษย์โดยใช้จิตวิทยาแห่งสี 3. เอกสารและงานวิจัยที่เกี่ยวข้อง 1. ความหมายของเว็บไซต์ 2. ประเภทของเว็บไซต์ 3. ส่วนประกอบของเว็บไซต์ 4. กระบวนการพัฒนาเว็บไซต์ 5. โปรแกรมพัฒนาเว็บไซต์ 6. การประเมินเว็บไซต์ 4. เอกสารงานวิจัยที่เกี่ยวข้อง 1. ความหมายของเวิล์ดไวด์เว็บ 2. การออกแบบเว็บไซต์ 3. งานวิจัยที่เกี่ยวข้อง 5. การศึกษาและข้อมูลที่เกี่ยวข้อง 1.1 ข้อมูลหลักสูตรศิลปะศาสตร์บัณฑิต สาขาวิชาศิลปกรรม 1.2 อินเทอร์เน็ต 1.3 เวิลด์ไวด์เว็บ 1.4 การออกแบบเว็บไซต์ 1. หลักในการออกแบบเว็บไซต์ 2. การใช้สีบนเว็บไซต์

Upload: aomkanokporn

Post on 17-Nov-2014

199 views

Category:

Documents


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Color theory

สารบญ

เรอง หนา

1. จตวทยาเกยวกบส 1. ความรสกทคนสวนใหญมตอสตางๆ 2. ทฤษฎของส 1. เรยนรทฤษฎสส าหรบงานออกแบบ 2. ประเภทของส 3. วรรณะของส 4. เทคนคการใชสในวงจรส 5. เขาใจความรสกของมนษยโดยใชจตวทยาแหงส

3. เอกสารและงานวจยทเกยวของ 1. ความหมายของเวบไซต 2. ประเภทของเวบไซต 3. สวนประกอบของเวบไซต 4. กระบวนการพฒนาเวบไซต 5. โปรแกรมพฒนาเวบไซต 6. การประเมนเวบไซต

4. เอกสารงานวจยทเกยวของ 1. ความหมายของเวลดไวดเวบ 2. การออกแบบเวบไซต 3. งานวจยทเกยวของ 5. การศกษาและขอมลทเกยวของ

1.1 ขอมลหลกสตรศลปะศาสตรบณฑต สาขาวชาศลปกรรม 1.2 อนเทอรเนต 1.3 เวลดไวดเวบ 1.4 การออกแบบเวบไซต 1. หลกในการออกแบบเวบไซต 2. การใชสบนเวบไซต

Page 2: Color theory

สารบญ (ตอ)

เรอง หนา

3. การใชกราฟกบนเวบไซต 4. โปรแกรมทใชสรางเวบไซต 5. สรปสงส าคญในการออกแบบและจดท าเวบไซต อางอง

Page 3: Color theory

1.จตวทยาเกยวกบส

สนนมความสาคญอยางยงในการออกแบบเวบไซต การเลอกสใหเขากบเนอหาของเวบไซต จะทาใหเวบไซตมความนาเชอถอยงขน และยงสงผลอยางมากกบความสวยงามของเวบไซต

1.ความรสกทคนสวนใหญมตอสตางๆ

สฟา ใหความรสกสงบ สขม สภาพ หนกแนน เครงขรม เอาการเอางาน ละเอยด รอบคอบ สงางาม มศกดศร สงศกด เปนระเบยบถอมตน สามารถลดความตนเตน และชวยทาใหมสมาธ แตถามสนาเงนเขมเกนไป กจะทาใหรสกซมเศราได

สเขยว เปนสในวรรณะเยน จะสรางความรสกเยนสบาย ใชเปนสทชวยผอนคลายความเครยดได ใหความรสก สงบ เงยบ รมรน รมเยน การพกผอน การผอนคลาย ธรรมชาต ความปลอดภย ปกต ความสข ความสขม เยอกเยน

สเหลอง เปนสแหงความเบกบาน เราอารมณ และเรยกรองความสนใจ ใหความรสกแจมใส ความสดใส ความราเรง ความเบกบานสดชน ชวตใหม ความสด ใหม ความสกสวาง การแผกระจาย อานาจบารม ใหลองสงเกตดวา วนททองฟามดครมปราศจากแสงแดด เราจะรสกหงอยเหงา หดห แตพอมแสงแดด ทองฟาสวาง มสเหลอง เราจะรสกมชวตชวาขน

สแดง

เปนสทสรางความตนเตน และกระตนสมอง สแดงปานกลางแสดงถงความมสขภาพด ความมชวต ความรก ความสาคญ ความอดมสมบรณ ความมงคง

สแดงจดมความหมายแฝงดานกามารมณ นอกจากนสแดงยงสรางความรสกรนแรง ใหความรสกรอน กระตน ทาทาย เคลอนไหว ตนเตน เราใจ มพลง มนจะใชกนกรณทเกยวกบความตนเตน หรออนตราย

สมวง ใหความรสก มเสนห นาตดตาม เรนลบ ซอนเรน มอานาจ มพลงแฝงอย ความรก ความเศรา ความผดหวง ความสงบ ความสงศกด

Page 4: Color theory

เปนสทปลอบโยน และชวยลดความเครยด แตเดมสมวงไดมาจากสตวมกระดอง,เปลอก ในทะเลเมดเตอรเรเนยน มชอวา Purpura จงไดชอภาษาองกฤษวา Purple

สสม ใหความรสก รอน ความอบอน ความสดใส มชวตชวา วยรน ความคกคะนอง การปลดปลอย ความเปรยว การระวง เปนสทเราความรสก ปรกตควรใชแตนอยเมอเทยบกบสอน สงเกตวาคนทอยในหองสสมจะอยไดไมนาน

สนาตาล ใหความรสกอบอน ไดพกผอน แตควรใชรวมกบสสม เหลอง หรอสทอง เพราะถาใชสนาตาลเพยงสเดยว อาจทาใหเกดความรสกหดหได

สเทา ใหความรสก เศรา อาลย ทอแท ความลกลบ ความหดห ความชรา ความสงบ ความเงยบ สภาพ สขม ถอมตน

สนมขอดคอทาใหเยน แตสรางความสรางความรสกหมนหมองได ควรใชรวมกบสทมชวต โทนสวางอยางนอยหนงส

สขาว ใหความรสก บรสทธ สะอาด สดใส เบาบาง ออนโยน เปดเผย การเกด ความรก ความหวง ความจรง ความเมตตา ความศรทธา ความดงาม

ใหความรสกรนเรง โดยเฉพาะเมอใชกบสแดง เหลอง และสม

Page 5: Color theory

2.ทฤษฎส

รปดานลางวงลอความสมพนธของส ซงบรรจสทนยมใชในเวบไซตไว 20 ส เหมาะสาหรบผทกาลงเลอกสทจะใชในเวบไซตอยเราสามารถใชความสมพนธของวงลอขอสนใหเกดประโยชนไดอยางมากมาย เชน ตองการออกแบบใหเวบไซตรสกตดกนโดยสนเชง เราอาจใชชดส 4 สททามมกน 90 องศา เชนดงตวอยางถาเราเลอกชดส 1 , 6 , 11 , 16 สทไดจะตดกนชดเจน ถาตองการใหเวบไซตดกลมกลนกอาจเลอกชดสใกลเคยงกนกไดเชน เลอกชดสเขยวเบอร 8 , 9 , 10 , 11 กจะไดสในโทนสเขยวสวาง

1.เรยนรทฤษฎสสาหรบงานออกแบบ (Color Theory)

เรยนรทฤษฎสสาหรบงานออกแบบ (Color Theory)ความรเรองทฤษฎสเปนสงสาคญมากสาหรบงานออกแบบทกชนดและหากตองการใหงานออกแบบดสวยงามตองเขาใจเรองพนฐานของสเพองานออกแบบกอน ฉะนนไมควรมองขามเรองนไป เพราะเพยงแตการเรยนรการใชงาน Photoshop จนชานาญเทานนยงไมสามารถสรางสรรคงานด ๆ ออกมาไดหากไมรจกใชสใหเหมาะสม โดยเรองทนามาอธบายเปนทฤษฎสเบองตนจากสวตถธาตเพอนามาใชกบงานออกแบบดงน

Page 6: Color theory

Primary Colors (สขนท 1 แมสวตถธาต)

สขนท 1 คอ แมสเปนสชดแรกทเมอนามาผสมกนจะไดสอกมากมายสกลมนไดแกสเหลอง แดงและนาเงน

Secondary Colors (สขนท 2)

สขนท 2 เปนสทเกดจากการผสมกนของแมสขนท 1 ซงจะไดส ดงตอไปน

สสม สแดง + เหลอง สเขยว สเหลอง + สนาเงน สมวง สนาเงน + แดง

Tertiary Colors (สขนท 3)

สขนท 3 เปนสทเกดจากการผสมกนระหวางสขนท 1 กบสขนท 2 ซงจะมชอเรยกตามคทผสมกน เปนสใหมขนมา 6 สดงน สเหลอง – สม, แดง – สม, แดง – มวง, นาเงน – มวง, นาเงน – เขยว และ เหลอง – เขยว

Muddy Colors

เปนสทเกดจากการผสมสในวงจรสทงหมดรวมกนในอตราสวนเทากนเกดเปนสกลางหรอคาสเฉลยจากสทงหมดซงจะออกสนาตาลเขม (หากเปนสขาวจะเปนสกลางของสแสง)

2.ประเภทของส

Color : แมสแบงออกเปน 2 ประเภท

1. แมสวตถธาต เปนสทเกดจากธรรมชาตหรอการสงเคราะหขนมาเพอนามาใชในวงการศลปะ วงการพมพ เปนตน แมสกลมนไดแก แดง เหลอง นาเงน

2. แมสแสง เปนสทเกดจากแสงสามารถเหนไดเมอนาแทงแกวปรซมมาสองกบแสงแดดหรออาจหาดไดจากสรง สกลมนนามาใชประโยชน เชน ผลตจอภาพโทรทศน มอนเตอร และใชในงานออกแบบเวบไซตหรอภาพยนตรเปนตน แมสกลมนไดแกส แดง เขยว นาเงน

Page 7: Color theory

3.วรรณะส (Tone)

หลงจากทราบเรองวงจรของสแลวตอไปจะมาทาความเขาใจกบการใชสในวงจรเดยวกนเรมตนทวรรณส แบงเปนสองวรรณะ ไดแก วรรณสรอนกบวรรณสเยน โดยสามารถใชวรรณะสในการออกแบบใหไดความรสกรอนและเยนไดดงน

วรรณะสเยน (Cold Tone)

วรรณสเยนมอย 7 ชนด ไดแกสเหลอง เหลองเขยว เขยว เขยวนาเงน นาเงน นาเงนมวง มวง สกลมนเมอใชในงานจะไดความรสกสดชน เยนสบาย เปนตน

วรรณะสรอน (Warm Tone)

วรรณสรอนมอย 7 ส ไดแกมวง มวงแดง แดง แดงสม สม สมเหลอง เหลอง สกลมนเมอใชในงานจะรสกอบอน รอนแรง สนกสนาน เปนตน

Color : สทเปนทงวรรณะรอนและวรรณะเยน

สเหลองและมวงจะอยไดทงสองวรรณะขนอยกบสแวดลอม เชน หากนาสเหลองไปไวกบสแดงและสมกกลายเปนสโทนรอน แตหากนามาไวกบสเขยวกจะเปนสโทนเยนทนท

สกลาง (Muddy Colors)

สกลาง ในความหมายนเปนสทเขากบสไดทกส ไดแก สนาตาล สขาว สเทาและดา สเหลานเมอนาไปใชงานลดความรนแรงของสอนและจะเสรมใหงานดเดนยงขน

4.เทคนคการใชสในวงจรส

การใชสในวงจรสมหลายวธนอกจากการใชวรรณะสแลว ยงมเทคนคการใชสแบบอนทนาสนใจอก ดงน

การใชสทใกลเคยงกน (Analog Colors)

สใกลเคยงในวงจรส เปนสทอยตดกนในชวง 3 ส ซงอาจจะใชถง 5 แตตองใชสนนในปรมาณเลกนอย เชนเมอเลอกใชสมวงกจะเลอกสในโทนเดยวกน ไดแก สมวงแดง กบ นาเงนมวง เปนตน

การใชสคตรงขาม (Complementary Colors)

Page 8: Color theory

เปนคสตองหามแตถาใชใหถกวธจะทาใหงานดโดดเดนทนท สมมตวาเลอกใชสแดงกบสเขยว กใหใชวธทแนะนาดงน

1. เลอกสแรก (สมมตเปนสแดง) ในปรมาณมากกวา 80% ของพนท แตสทสอง (สมมตเปนสเขยว) ตองใชในปรมาณทนอยกวา 20%

2. ผสมหรอใสสกลางลงในงานทใชสคตรงขามเพอลดความรนแรงของส

3. ผสมสคตรงขามลงไปลดทอนความเขมขนของกนและกน

การใชสใกลเคยงกบสคตรงขาม (Split Complementary)

เปนการใชสทหลกเลยงการใชสคตรงขามโดยตรง เทคนคนทาใหงานดนมนวลขนมลกเลนสรางจดสนใจไดด สงเกตจากภาพตวอยางดานลางสมวงทมพนทนอยแตกลบดโดดเดนขนมาได

การใชโครงสสามเหลยมในวงจรส (Triad Colors)

เทคนคการใชโครงสรางสสามเหลยม คอ ใหวาดสามเหลยมขนมาแลวใชสทอยบนโครงรปสามเหลยม เทคนคนสทไดจะดสนกสนานและหลากหลายกวาแบบอน

Color : ในทกวงจรสสามารถใชสกลางได

เทคนคการใชสในวงจรทนามาอธบาย สามารถรวมสกลางเขาไปใชไดดวยเนองจากสกลางเปนสทเขาไดกบทกสและอาจแทรกสนอกโครงการสมาใชไดขนอยกบความเหมาะสม

การใชสเดยว (Mono Tone) เทคนคสเดยวเปนอกเทคนคทนยม การใชจะอาศยคาความออนแกของสแทนการใชคาสอน สวนมากจะนาสทเลอกมาผสมกบสกลางใหไดคาทตองการ

5.เขาใจความรสกของมนษยโดยใช จตวทยาแหงส (Psychology of colors)

ในบรการออกแบบเวบไซตของเรา ทกๆงาน เราจะตองนาจดเดนออกมานาเสนอผานสสน เพอใหงานออกแบบมความสมบรณสงสด โดยแบงความรสกเกยวกบสดงน

สแดง - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง อดมสมบรณ, มนคง, รนแรง, เรารอน, อนตราย

สสม - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง ฉดฉาด, เรารอน, สวาง

สเหลอง - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง ระวง, สดชน, สดใส, สวาง

Page 9: Color theory

สเขยว - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง สดชน, พกผอน, งอกงาม

สนาเงน - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง ทม, สงางาม, ผอนคลาย, สงบ

สมวง - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง เลศนย, สงบ, หนก

สนาตาล - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง สงบเงยบ, หนก, เกา

สขาว - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง สดใส, ใหม, สะอาด, บรสทธ

สดา - เหมาะสมกบงานออกแบบเวบไซตทแสดงถง ตน, ทบ, เศราใจ, หดห

Page 10: Color theory

3.เอกสารและงานวจยทเกยวของ

1.ความหมายของเวบไซต

คาวาเวบไซต (Web site) มผใหความหมาย ดงน ประภาพร ชางไม (2548: 5) กลาววา “เวบไซต คอ ทกสงทกอยางทประกอบกนขนมาเปนเวบ ซง

หมายความถงเวบเพจ (Webpage) ทกหนา รปทกรปทนาเขามาใช แฟมขอมลเสยง รปเคลอนไหวและสวนประกอบอนๆ ทนามาใช เชน โปรแกรมทเขยนขน สามารถเปรยบเทยบ ไดวาเวบไซตเปนเสมอนหนงสอทงเลม” สวนกฤษณะ สถต (2549: 23) กลาววา “เวบไซต คอ สถานทสาหรบเกบเอกสารเอชทเอมแอล (HTML) หรอเวบเพจสาหรบการเผยแพรขาวสาร บนอนเทอรเนต” อกทงดวงพร เกยงคา (2549: 22) กลาววา “เวบไซต คอ กลมของเวบเพจ ทเกยวของสมพนธกน เชน กลมของเวบเพจทใหขอมลเกยวกบประวต รวมทงสนคาและบรการ ของบรษทหนง เปนตน ภายในเวบไซตนอกจากเวบเพจหรอแฟมขอมลเอชทเอมแอลแลว ยงประกอบดวยแฟมขอมลชนดอนๆ ทจาเปนสาหรบสรางเปนหนาเวบเพจ เชน รปภาพ สอประสม(Multimedia) แฟมขอมลโปรแกรมภาษาสครปต (Script) และแฟมขอมลขอมลสาหรบใหดาวนโหลด เปนตน”

สวนสปราณ ธรไกรศร (2542: 18) กลาววา “เวบไซต คอ เครองคอมพวเตอร ทอาจใชระบบปฏบตการใดๆ กได เชน วนโดวส เอนท (Windows NT) หรอยนกซ (UNIX) เปนตน และมโปรแกรมจดการททางานอยในเครองนนเพอใหเครองดงกลาวทาหนาทเปนเครองบรการเวบ นอกจากนยงทาหนาทเกบเวบเพจทอยในรปของแฟมขอมลเอกสารทเขยนดวยภาษาเอชทเอมแอล อยดวย” ซงสอดคลองกบวเศษศกด โครตอาษา (2542: 180) ทกลาววา “เวบไซตเปนแหลงทรวมของเวบเพจทงหมดทจดอยในกลมเดยวกนของหนวยงานหรอองคกรหนงๆ เมอใดทใชโปรแกรม คนด (Browser) โปรแกรมคนดจะทาการตดตอกบเวบไซตทเกบเวบเพจนน เพอทาการโอนยายเวบทตองการมายงเครองของผใช” นอกจากน จกรชย โสอนทรและอรพงษ กลยาสร (2542: 18) กลาววา “เวบไซต คอ สถานทอยของเวบเพจทโปรแกรมคนดจะสามารถไปดงขอมลมาเปดใหดได โดยเวบไซตนจะอยในเครองทใหบรการทเรยกวาเครองบรการเวบ”

จากความหมายขางตน สรปไดวา เวบไซต คอ แหลงรวบรวมเวบเพจขององคกร หนงๆ ซงจะประกอบดวยสอประสมตางๆ ทงขอความ ภาพนง ภาพเคลอนไหว และเสยง เปนทอยของสารสนเทศบนอนเทอรเนต สามารถเขาถงไดโดยผานเวลดไวดเวบ

Page 11: Color theory

2.ประเภทของเวบไซต ประเภทของเวบไซตแบงตามลกษณะการใชงานสามารถแบงออกเปน 5 ประเภท ดงน (สมาน ลอย

ฟา. 2544: 3; วเศษศกด โครตอาษา. 2542: 184)

1. เวบไซตเพอการประชาสมพนธ เปนเวบไซตทจดทาโดยองคกรตางๆ เวบไซตเหลานเทยบไดกบแผนพบหรอจดหมายขาว เพยงแตเวบไซตอาจมขอมลเพมเตมมากกวา เชน ขอมลเกยวกบแนวคดและภารกจขององคกร หรออนๆ เปนตน ปกตทอยของเวบไซตเหลาน อาจลงทายดวย .org

2. เวบไซตเพอธรกจและการตลาด เปนเวบไซตทจดทาโดยบรษทธรกจตางๆ โดยมวตถประสงคเพอขายหรอโฆษณาสนคาและบรการตางๆ ในบางครงอาจมขอมลทเปนประโยชน เชอถอได และใหใชโดยไมมคาใชจาย แตในทสดกมกจะถกขอใหซอสนคาบางอยาง ในการใชขอมลเหลานควรวเคราะหดวยความรอบคอบกอน เนองจากธรกจการคาตางๆ มกจะมความลาเอยง ปกตทอยของเวบไซตเหลานอาจลงทายดวย .com

3. เวบไซตเพอขาวสาร เปนเวบไซตทมวตถประสงคเพอเสนอขอมลทเปนขอเทจจรงและเพอแลกเปลยนผลการวจย ขอมลบางอยางมลกษณะคลายจลสารทมกพบไดตามหนวยงาน ตางๆ ซงมประโยชนสาหรบเปนขอมลพนฐาน แตเนอหามกจะขาดความลมลก ปกตทอยของเวบไซตเหลานอาจลงทายดวย .gov

4. เวบไซตขาวและเหตการณ เปนเวบไซตทมวตถประสงคหลกในการใหขาวสาร ทเปนปจจบนทสดในฐานะทเปนบรการสาธารณะ อยางไรกตามเวบไซตเหลานมกจะมบรษทหรอองคกรตางๆ เปนผใหการสนบสนน ดงนนจงมกพบโฆษณาปรากฏบนเวบไซต ผใชพงระมดระวง ในเรองของความลาเอยงทอาจปรากฏในขาวทนาเสนอดวย ปกตทอยของเวบไซตเหลานอาจลงทายดวย .com

5. เวบไซตสวนบคคล เปนเวบไซตของบคคลเพอเสนอแนวคดหรอเพอประชาสมพนธตวเองในดานตางๆ สวนใหญมกเปนงานทไมคอยมสาระ ปกตทอยของเวบไซตเหลานอาจลงทายดวย .com และมกจะมเครองหมาย ~ ปรากฏในทอยดวย

การสรางเวบไซตมความจาเปนอยางมากในการกาหนดกรอบและทศทางของเวบไซตนนๆ ใหอยในลกษณะหนงลกษณะใดขางตน เพอใหการใชงานทจะเกดขนระหวางเวบไซต และผเยยมชมเปนไปตามวตถประสงคทไดตงไวอยางมประสทธภาพ

3.สวนประกอบของเวบไซต ภายในเวบไซตหนงๆ มเวบเพจจานวนหลายหนา ในแตละหนามทงขอความ และสอประสมรวมกน

ตามทวทยา เรองพรวสทธ (2539: 46-47) กลาวถงสวนประกอบของเวบไซตสรปไดวามสวนประกอบตางๆ ทจาเปนดงน

1. ตวอกษร เปนขอความปกต โดยสามารถตกแตงใหสวยงามและมลกเลนตางๆ เชนโปรแกรมประมวลคา เปนตน

2. กราฟก ประกอบดวยรปภาพ ลายเสน ลายพน ตางๆ มากมาย 3. สอประสม ประกอบดวยขอความ ภาพนง ภาพเคลอนไหว เสยง และวดทศน

Page 12: Color theory

4. ตวนบ ใชนบจานวนผทเขามาเยยมชมเวบเพจ 5. จดเชอมโยง ใชเชอมโยงไปยงเวบเพจของตนเองหรอเวบเพจของคนอน 6. แบบฟอรม เปนแบบฟอรมทใหผเขาเยยมชมกรอกรายละเอยดแลวสงกลบมายง เวบเพจ 7. กรอบ เปนการแบงจอภาพเปนสวนๆ แตละสวนกจะแสดงขอมลทแตกตางกน และเปนอสระจาก

กน 8. แผนทภาพ เปนรปภาพขนาดใหญทกาหนดสวนตางๆ บนรป เพอเชอมโยงไปยงเวบเพจอนๆ 9. จาวาแอปเพลด (Java applets) เปนโปรแกรมสาเรจรปเลกๆ ทใสลงในเวบเพจ สามารถเพม

ลกษณะพเศษ การโตตอบ เชน เพมเกมสหรอหนาตางสาหรบปอนหรอดขอมล บนเวบเซรฟเวอรได เปนตน เพอใหการใชงานเวบเพจมประสทธภาพมากยงขน

4.กระบวนการพฒนาเวบไซต การพฒนาเวบไซตอยางมหลกการ ดาเนนการตามขนตอนทชดเจน จะทาใหผสรางเวบไซตสามารถใส

ใจรายละเอยดทจาเปนในแตละขนตอนของการออกแบบ ดวงพร เกยงคา (2549: 27) กลาวถงกระบวนการพฒนาเวบไซตไวเปนขนตอน ดงภาพประกอบ

6. ดแลและปรบปรงตอเนอง (Maintenance and innovation)

5. เผยแพรและสงเสรมใหเปนทรจก (Publishing and promotion)

4. ลงมอสรางและทดสอบ (Construction and testing)

3. ออกแบบเวบเพจและเตรยมขอมล (Page design and content editing)

2. วเคราะหและจดโครงสรางขอมล (Analysis and information architecture)

1. ก าหนดเปาหมายและวางแผน (Site definition and planning)

Page 13: Color theory

1. กาหนดเปาหมายและวางแผน การพฒนาเวบไซตควรกาหนดเปาหมายและวางแผนไวลวงหนา เพอใหการทางานในขนตอไปมแนวทางทชดเจน เรองหลกๆ ทควรทาในขนตอนนประกอบดวย

1.1 กาหนดวตถประสงคของเวบไซต เพอใหผใชเขาใจวาเวบไซตนตองการนาเสนอหรอตองการใหเกดผลอะไร

1.2 กาหนดกลมผใชเปาหมาย เพอจะไดรวาผใชหลกคอใคร และออกแบบเวบไซตใหตอบสนองความตองการผใชกลมนนใหมากทสด

1.3 สงทจาเปนตองใชมาจากแหลงใดบาง เชน ถาเปนเวบขาวสาร ขาวนนจะมาจากแหลงใด มลขสทธหรอไม เปนตน

1.4 เตรยมทกษะหรอบคลากร การสรางเวบไซตตองอาศยทกษะหลายดาน เชน ในการเตรยมเนอหา ออกแบบกราฟก เขยนโปรแกรม และการดแลเครองบรการ เปนตน ซงถาเปนเวบไซตขนาดใหญอาจจะตองใชบคลากรเปนจานวนมาก แตสาหรบเวบไซตเลกๆ ทสามารถดแล ไดโดยบคลากรเพยงคนเดยวกจะตองศกษาหาความรในเรองนนๆ เพอเตรยมพรอม

1.5 เตรยมทรพยากรตางๆ ทจาเปน เชน โปรแกรมสาหรบสรางเวบไซต โปรแกรมสาหรบสรางกราฟก ภาพเคลอนไหวและสอประสม โปรแกรมอรรถประโยชน (Utilities) อนๆ ทจะตองใช เปนตน

2. วเคราะหและจดโครงสรางขอมล เปนการนาขอมลตางๆ ทรวบรวมไดจากขนแรกนามาประเมน วเคราะหและจดระบบ เพอใหไดโครงสรางขอมลและขอกาหนด ซงจะใชเปนกรอบสาหรบการออกแบบและดาเนนการในขนตอไป ผลทไดรบจากขนนประกอบไปดวย

2.1 แผนผงโครงสรางของเวบไซต สารบญ ลาดบการนาเสนอหรอผงงาน 2.2 ระบบนาทาง ซงผใชจะใชสาหรบเปดเขาไปยงสวนตางๆ ของเวบไซต เชน โครงสรางและ

รปแบบของเมน เปนตน 2.3 องคประกอบตางๆ ทจะนามาใชในเวบเพจมอะไรบาง เชน ภาพนง และภาพเคลอนไหว

เสยง วดทศน สอประสม แบบฟอรม ฯลฯ อะไรบางทโปรแกรมคนดของผใชสนบสนน และอะไรบางทตองอาศยโปรแกรมเสรม

2.4 ขอกาหนดเกยวกบลกษณะและรปแบบของเวบเพจ 2.5 ขอกาหนดของโปรแกรมภาษาสครปต หรอโปรแกรมประยกตสาหรบเวบ (Web

application) และฐานขอมลทใชในเวบไซต 2.6 คณสมบตของเครองบรการเวบ รวมถงขอจากด และบรการเสรมตางๆ ทมให

Page 14: Color theory

3. ออกแบบเวบเพจและเตรยมขอมล เปนขนตอนการออกแบบเคาโครงและลกษณะดานกราฟกของหนาเวบเพจ เพอใหผใชเกดอารมณความรบรตอเวบเพจตามทผสรางตองการ นอกจากนยงรวมไปถงการกาหนดสสนและรปแบบของสวนประกอบตางๆ ทไมใชกราฟก เชน ชนดตวอกษร ขนาด และสขอความ สพนบรเวณทวาง เปนตน ในสวนของเนอหา ขนตอนนจะเปนการนาเนอหาทเลอกไวมาปรบแกและตรวจทานความถกตอง เพอใหพรอมสาหรบจะนาไปใสเวบเพจ แตละหนาในขนตอนถดไป

4. ลงมอสรางและทดสอบ เปนขนตอนทเวบเพจจะถกสรางขนทละหนาโดยอาศย เคาโครงและองคประกอบกราฟกตามทออกแบบไว เนอหาตางๆ จะถกนามาใสและจดรปแบบ จดเชอมโยงและมระบบนาทางไปสหนาเวบตางๆ เวบไซตทสรางขนมาควรไดรบการทดสอบกอนทจะนาออกเผยแพร ไมวาจะเปนเรองความถกตองของเนอหา การทางานของจดเชอมโยงและระบบนาทาง ตรวจหาความผดพลาดของโปรแกรมภาษาสครปตและฐานขอมล นอกจากนกควรทดสอบ โดยใชสภาพแวดลอมทเหมอนกบของกลมเปาหมาย เชน รนของโปรแกรมคนด ความละเอยดของจอภาพ เพอดวาผใชกลมเปาหมายสามารถชมเวบไซตไดอยางสมบรณและมประสทธภาพหรอไม

5. เผยแพรและสงเสรมใหเปนทรจก โดยทวไปการนาเวบไซตขนเผยแพรบนอนเทอรเนตจะทาดวยการอพโหลด (Upload) แฟมขอมลทงหมด คอ เอชทเอมแอลและแฟมขอมลอนๆ ทเกยวของขนไปเกบบนเครองบรการทเปดบรการไว การอพโหลดเวบไซตอาจทาดวยโปรแกรมสรางเวบไซตหรออาจใชโปรแกรมอรรถประโยชนประเภทโปรแกรมถายโอนขอมล (FTP) หรอใชเครองมออนบนเครองบรการเวบ หลงจากนนเวบไซตควรไดรบการทดสอบอกครง เพอตรวจหาปญหาบางอยางทไมสามารถทดสอบบนคอมพวเตอรของผสรางเอง เชน การเชอมโยงของเวบเพจกบเวบไซตอน และการทางานของโปรแกรมคนดกบฐานขอมล ซงอาจทาไมได บนเครองของผสรางเวบ หรอบนเครองบรการเวบอาจมสภาพแวดลอมทตางออกไป เวบไซตทจะประสบความสาเรจ นอกจากตองมเนอหาทด มการวางโครงสรางการออกแบบทเหมาะสมแลว ยงตองไดรบการโฆษณา และสงเสรมใหเปนทรจกในผใชกลมเปาหมายหรอในวงกวางออกไปอกดวย การสงเสรมนมกลยทธททาไดหลายวธ ซงไมจาเปนตองใชงบประมาณจานวนมากเสมอไป โดยสามารถทาไดตงแตแบบงายๆ คอ การแลกเปลยนทอยเวบ ประกาศบนเวบบอรด (Webboard) การสงจดหมายอเลกทรอนกส (Email) เพมขอมลในโปรแกรมคนหาหรอสารบบเวบ (Web directory) จนถงแบบทใชงบประมาณมากขน เชน การจดงานเปดตว การลงโฆษณา บนเวบไซตอน ในสงพมพ หรอในวทยและโทรทศน เปนตน

6. ดแลและปรบปรงตอเนอง เวบไซตทเผยแพรออกไปแลว ควรดแลโดยตลอด ซงหนาทนครอบคลมตงแตการตรวจสอบเครองบรการเวบวาไมหยดทางานบอย จดเชอมโยงไปยงภายนอกยงคงใชงานไดหรอไม คอยตอบอเมลหรอคาถามทมผฝากไวบนเวบเพจ ถาเปนขาวสาร กตองปรบปรงขอมลใหทนสมยตลอดเวลา ถามการใชฐานขอมลกตองสารองขอมลอยางสมาเสมอ นอกจากนควรตรวจสอบสถตของการเขาใชเปนระยะๆ หลงจากทเวบไซตไดรบการเผยแพรไประยะหนง ควรปรบปรงเพอใหผใชรสกวามความเปลยนแปลง มความใหม ทนสมย หลกการออกแบบและนาเสนอดวยเวบไซตใหนาสนใจ และดงดดผคนใหเขามาชม จาเปนอยางยงทจะตองทราบถงหลกการและวธการในการออกแบบและการนาเสนอเวบไซต เพราะถาหากทาไปโดย

Page 15: Color theory

ปราศจากการออกแบบหรอการนาเสนอทดแลว ผใชอาจจะไมสนใจและใสใจทจะเขามาใช ทาใหการนาเสนอในครงนนสญเปลาได ดงนนจงควรเรยนรและเขาใจถงกระบวนการของการนาเสนอกอน ซงสามารถทาไดหลายรปแบบขนอยกบลกษณะของขอมลและความชอบ ของผพฒนา ตลอดจนกลมเปาหมายทตองการนาเสนอ

ทงนนกวชาการหลายทานไดเสนอขอแนะนาสาหรบการออกแบบเวบไซต อยางมประสทธภาพไวดงน (จตเกษม พฒนาศร . 2539; ธวชชย ศรสเทพ. 2544: 16; วเศษศกด โครตอาษา. 2542: 184) 14

1. ความเรยบงาย หมายถง การสอสารเนอหาถงผใชใหอานเขาใจงาย โดยจากดองคประกอบเสรมทเกยวของกบการนาเสนอใหเหลอเฉพาะสงทจาเปนเทานน

2. ความสมาเสมอ หมายถง สามารถสรางความสมาเสมอใหกบเวบไซตได นาเสนอเวบไซตในรปแบบเดยวกนตลอดทงเวบไซต เนองจากผใชจะรสกกบเวบไซตวาเปนเสมอนสถานทจรง ถาลกษณะของแตละหนาในเวบไซตเดยวกนนนแตกตางกนมากผใชกจะเกดความสบสน และไมแนใจวากาลงอยในเวบเดมหรอไม ดงนนรปแบบของหนาเวบ รปแบบของกราฟก ระบบ นาทางและกลมสทใชควรจะมความคลายคลงกนตลอดทงเวบไซต

3. ความเปนเอกลกษณ การออกแบบตองคานงถงลกษณะขององคกร เนองจากรปแบบของเวบไซตสามารถสะทอนถงลกษณะขององคกรนนได การใชชดส ชนดตวอกษร รปภาพและกราฟกจะมผลตอรปแบบของเวบไซตอยางมาก ผออกแบบจงตองเลอกใชองคประกอบเหลานอยางเหมาะสม

4. เนอหาทมประโยชน เนอหาถอเปนสงทสาคญทสดในเวบไซต ดงนนในเวบไซต ควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตองและสมบรณ โดยมการปรบปรงและเพมเตมใหทนตอเหตการณอยเสมอ เนอหาทสาคญทสดคอเนอหาทสรางขนมาเอง และไมซากบเวบอน เพราะจะเปนสงทดงดดผใชใหเขามาในเวบไซตอยเสมอ ตางจากเนอหาทเชอมโยงไปยงเวบไซตอนซงเมอผใชรถงแหลงขอมลจรงๆ แลวกไมจาเปนตองกลบมาทจดเชอมโยงเหลานนอก

5. ระบบนาทางทใชงานงาย ระบบนาทางเปนองคประกอบทสาคญมากของเวบไซต ตองออกแบบให

ผใชเขาใจไดงายและใชงานสะดวก โดยใชกราฟกทสอความหมายรวมกบคาอธบายทชดเจน รวมทงมรปแบบและลาดบของรายการทสมาเสมอ เชน วางไวในตาแหนงเดยวกน ของทกๆ หนา นอกจากนนถาใชระบบนาทางแบบกราฟกในสวนบนของหนาเวบแลว อาจเพมระบบนาทางทเปนตวอกษรไวทตอนทายของหนาเวบ เพอชวยอานวยความสะดวกใหกบผทใชโปรแกรมคนดอกทางหนง

6. มลกษณะทนาสนใจ เปนเรองยากทจะตดสนวาลกษณะหนาเวบของเวบไซต จะมความนาสนใจหรอไม เพราะเกยวของกบความชอบของแตละบคคล อยางไรกดหนาเวบของเวบไซตจะมความสมพนธกบคณภาพขององคประกอบตางๆ เชน คณภาพของกราฟกทจะตองสมบรณ ไมมรองรอยของความเสยหายเปนจดดางหรอมขอบเปนขนบนไดใหเหน การใชชนดตวอกษรทอานงาย สบายตา และการใชกลมสทเขากนอยางสวยงาม เปนตน

Page 16: Color theory

7. การเขาใชงานไดไมจากด ควรออกแบบเวบไซตใหผใชสวนใหญเขาถงไดมากทสด โดยไมมการบงคบใหผใชตองตดตงโปรแกรมใดๆ เพมเตม หรอตองเลอกใชโปรแกรมคนดโปรแกรมใดโปรแกรมหนงจงจะสามารถเขาถงเนอหาได สามารถแสดงผลไดในทกระบบปฏบตการและทความละเอยดหนาจอตางๆ กนอยางไมมปญหา สงเหลานจะยงมความสาคญมากขนสาหรบเวบทมผใชบรการจานวนมาก หรอมกลมเปาหมายทหลากหลาย

8. มคณภาพในการออกแบบ มความสาคญกบการออกแบบเวบไซตเชนเดยวกบสอประเภทอนๆ ทตองออกแบบและเรยบเรยงเนอหาอยางรอบคอบ เวบททาขนอยางไมมมาตรฐาน 15 ในการออกแบบและการจดระบบขอมลนน เมอมขอมลเพมขนเรอยๆ กจะเกดปญหาขอมลสบสน ไมเปนระบบ และไมสามารถสรางความนาเชอถอจากผใชได

9. ระบบใชงานไดถกตอง ระบบการทางานตางๆ ในเวบไซตจะตองมความแนนอน และทาหนาทไดอยางถกตอง เชน ถามแบบฟอรมสาหรบใหผใชกรอกขอมลตองแนใจวาแบบฟอรมนนสามารถใชการไดจรง หรออยางงายทสดกคอ จดเชอมโยงตางๆ ทมอยนนจะตองเชอมโยงไปยงหนาทมปรากฏอยจรงและถกตองดวย ความรบผดชอบของผจดทาเวบคอการทาใหระบบเหลานน ใชงานไดตงแตแรกและยงตองคอยตรวจสอบอยเสมอ เพอใหแนใจวาสงเหลานนยงทางานไดด โดยเฉพาะจดเชอมโยงทเชอมโยงไปยงเวบอนซงอาจมการเปลยนแปลงไดตลอดเวลา เวบไซตทสรางขนจะมคณภาพดหรอไมนน ผใชเปนผตดสน โดยเรมตงแตผใชเหนเวบไซตเปนครงแรก เพราะฉะนนจงตองสรางความประทบใจใหกบผใชงานตงแตครงแรกทใชงาน เพอใหผใชกลบมาใชเวบไซตอกครง 5.โปรแกรมพฒนาเวบไซต

ในปจจบนนมโปรแกรมทชวยใหสามารถสรางเวบขนมาโดยไมจาเปนตองเขยนรหสภาษาเอชทเอมแอล ซงการสรางเวบเพจกสามารถเลอกใชเครองมอตางๆ ไดมากมาย ในปจจบนโปรแกรมทใชในการสรางเวบ มประสทธภาพและมขอดขอเสยทแตกตางกนออกไป สดแทแตลกษณะงานทจะนาไปใช ตวอยางเครองมอทใชสรางเวบเพจ เชน ดรมวพเวอร (Dreamweaver) เนตออปเจกต (Netobject) โฮมไซต (Homesite) โคลฟวชน (Coldfusion) เปนตน หรออาจสรางไดโดยใชภาษาสาหรบสรางเวบเพจโดยเฉพาะ เชน พเอชพ (PHP) วบสครปต (VBScript) เปนตน ดรมวพเวอร เปนเครองมอในการจดการและบรหารเวบไซต ทชวยใหจดการกบไซต และแฟมขอมลทเกยวของกบไซต เชน สราง ลบ ยาย และเปลยนชอแฟมขอมล เปนตน นอกจากนยงมเครองมอในการอพโหลดแฟมขอมลขนเวบเซรฟเวอรเพอเผยแพรขอมลสอนเทอรเนตไดโดยตรง ในเวบเพจนอกจากจะมรหสภาษาเอชทเอมแอลแลว ในปจจบนเวบเพจสามารถโตตอบกบผใชได ซงจะตองอาศยเทคโนโลยอนๆ มาเสรมเพอใหการนาเสนอขอมลมประสทธภาพ เทคโนโลยเหลาน เชน ซเอสเอส (CSS: Cascading style sheet) ภาษาจาวาสครปต และมลตมเดยแฟลช (Multimedia flash) เปนตน ซงดรมวพเวอรไดสนบสนนเทคโนโลยตางๆ เหลานอยางสมบรณแบบ

ดวงพร เกยงคา (2549: 251) กลาววา “ดรมวพเวอร เปนโปรแกรมสาหรบออกแบบและพฒนาเวบไซตดวยการสรางเวบเพจและโปรแกรมประยกตสาหรบเวบทกาลงเปนทนยม นามาสรางเวบเพจใน

Page 17: Color theory

ปจจบน เนองจากใชงานงาย สามารถจดวางขอความ รปภาพ ตารางขอมล แบบฟอรม ฯลฯ ลงไปในเวบเพจไดอยางงายดายโดยไมจาเปนตองใชรหสเอชทเอมแอล ซงม ขนตอนยงยากและซบซอน ทาใหมโอกาสผดพลาดไดงาย ในดรมวพเวอรมเครองมอมากมาย ใหใชในการพฒนาเวบไซตไดอยางรวดเรว สวยงาม และมประสทธภาพสง”โปรแกรมทผศกษาใชในการพฒนาเวบไซตหองสมดโรงเรยนเตรยมอดมศกษาภาคใตคอ โปรแกรมอะโดบ ดรมวพเวอร ซเอส 3 ซงโปรแกรมอะโดบ ดรมวพเวอร หรอชอเดมคอ แมโครมเดย ดรมวพเวอร เปนโปรแกรมแกไขเอชทเอมแอล พฒนาโดยบรษทแมโครมเดย สาหรบการออกแบบเวบไซตในรปแบบ WYSIWYG: What you see is what you get กบการควบคมของสวนแกไขรหสเอชทเอมแอล ในการพฒนาโปรแกรมทมการรวมทงสองแบบเขาดวยกนแบบน ทาให ดรมวพเวอรเปนโปรแกรมทแตกตางจากโปรแกรมอนๆ ในประเภทเดยวกน อกทงยงเปนโปรแกรมสรางเอกสารเวบไซตททางานในลกษณะเอชทเอมแอล เจเนเรเตอร (HTML generator) คอ โปรแกรมจะสรางรหสคาสงเอชทเอมแอลใหอตโนมต โดยผใชไมตองศกษาภาษาเอชทเอมแอล หรอปอนรหสคาสง เอชทเอมแอล มลกษณะการทางานคลายๆ กบการพมพเอกสารดวยโปรแกรมประมวลผลคา (Word processor) อาศยปมเครองมอ (Toolbars) หรอแถบคาสง (Menu bar) ควบคมการทางาน ชวยใหงายตอการใชงาน สะดวก และรวดเรว นอกจากนโปรแกรมอะโดบ ดรมวพเวอร ยงมความสามารถในการใชสราง ออกแบบ เขยนรหสเวบเพจ บรหารจดการเวบไซต และโปรแกรมประยกตสาหรบเวบ โดยสามารถสรางรหสไดหลากหลายภาษา เชน เอชทเอมแอล พเอชพ เปนตน และสามารถตดตอกบฐานขอมลได เชน มายเอสควแอล (MySQL) เอมเอส เอสควแอล เซรฟเวอร(MS SQL Server) เปนตน โดยมจดเดนคอ

1. ผใชไมจาเปนตองมความรเรองภาษาเอชทเอมแอล 2. ปมควบคมการทางาน จดแบงเปนหมวดหม ชวยใหการสงงานกระทาไดสะดวก และรวดเรว 3. สามารถใชงานดวยภาษาไทยไดด 4. สามารถใชกลมเครองมอจากแถบสถานะ (Status bar) ชวยในการทางาน กบหนาเวบไดงาย

โปรแกรมอะโดบ ดรมวฟเวอร จงเปนโปรแกรมทชวยใหเขยนเวบไซตไดงายขน แกไขไดงายขน และมเครองมออานวยความสะดวกมากมายทมประโยชนในการทาเวบไซต 6.การประเมนเวบไซต

เนองจากเวบไซตไดกลายเปนเครองมออกชนดหนงทใชสาหรบการคนหาสารสนเทศ ปจจบนแนวโนมในการคนหาสารสนเทศบนเวบไดเพมทวมากขน และผใชจานวนไมนอยทเรมตนการคนสารสนเทศจากเวบกอนเปนอนดบแรก หลงจากนนจงคอยคนหาจากแหลงสารสนเทศอน เชน สงพมพ เปนตน สาหรบสารสนเทศทปรากฏบนเวบนน เนองจากทกคนสามารถสรางเวบ ขนเองได แมบางเวบจะสรางขนโดยผเชยวชาญในสาขาวชานนๆ แตกมเวบอกจานวนมาก ทสรางขนโดยผทไมไดเปนผเชยวชาญในสาขาวชานนแตอยางใด และพบวาบอยครงทมการนาเสนอสารสนเทศโดยไมระบแหลงทมาอยางชดเจน นอกจากนสารสนเทศทนาเสนอบนเวบยงไมไดมผใดประเมนคณภาพหรอความถกตอง หรอถามกปรากฏในระดบทนอยมาก ผใชจงมกมขอสงสยในเรอง ของความถกตองและความนาเชอถอของสารสนเทศ ดวยเหตทเวบมทงจดออน และจดแขง

Page 18: Color theory

ดงกลาว ดงนนการประเมนสารสนเทศทพบบนเวบจงเปนกจกรรมสาคญสาหรบผทตองการใชสารสนเทศ จากเวบเพอการศกษาคนควาและวจย ในการประเมนเวบไซต ควรประเมนเวบไซตตามหวขอดงตอไปน (สมาน ลอยฟา. 2544: 4; วเศษศกด โครตอาษา. 2542: 185)

1. จดมงหมายและกลมผใช ไดแก วตถประสงคของเวบไซตนนคออะไร มความชดเจนหรอไม เชน เพอขาวสารขอมล เพอการศกษา เพอความบนเทง เพอการชกจงใจ เพอสถาบน เพอการคา หรอเพอสวนบคคล เปนตน สารสนเทศทนาเสนอสอดคลองกบวตถประสงคหรอไม จดมงหมายสอดคลองกบกลมผใชหรอไม กลมเปาหมายของเวบไซตคอใคร และเอกสารนนนาเสนอไวทใด และสารสนเทศทนาเสนอเปนทพงพอใจกบความตองการของผใชหรอไม

2. ขอบขาย ไดแก 2.1 ความกวาง เชน ครอบคลมเนอหาอะไรบาง จดเนนของการนาเสนอ สารสนเทศคออะไร

ขอบเขตของเนอหาเนนเฉพาะเนอหาของเรองนนหรอรวมถงเนอหาอน ทเกยวของดวย เปนตน 2.2 ความลมลก เชน เนอหามความลมลกเพยงใด ระดบของรายละเอยดของเนอหาทนาเสนอ

เปนอยางไร มความสมพนธกบระดบของผใชหรอไม เปนตน 2.3 ชวงเวลา เชน สารสนเทศทนาเสนอไดจากดชวงเวลาไวแนนอนหรอไม เปนตน 2.4 รปแบบ เชน ถามการเชอมโยงไปยงแหลงสารสนเทศอนๆ ไดกาหนดขอบเขตการเชอมโยง

ไวอยางไร และมรปแบบใดบาง เปนตน 3. เนอหา องคประกอบสาคญทเกยวกบเนอหามดงน 3.1 ความถกตอง เชน สารสนเทศมความถกตองเพยงใดหรอมขอผดพลาดหรอไม จดมงหมาย

ของการเขยนเอกสารนนคออะไร ระบแหลงสารสนเทศไวหรอไม ผเขยนมแรงจงใจอะไรในการนาเสนอสารสนเทศ มบรรณาธการหรอผรบผดชอบในการตรวจสอบความถกตองหรอไม เปนตน

3.2 หลกฐานในการเขยน เนองจากผสรางเวบไซตเปนใครกได ดงนนการรขอมลเกยวกบผแตงจงเปนสงสาคญ ประเดนในการพจารณา เชน มผแตงหรอไม ถามใครเปนผแตง เปนบคคลหรอสถาบน ผแตงมคณสมบตอยางไร มความเชยวชาญเพยงพอหรอเปนทยอมรบ ในสาขานนหรอไม สามารถตดตอกบผเขยนนนไดหรอไม ระบทอย หมายเลขโทรศพท หรออเมล ไวหรอไม ใครเปนผสนบสนน ผสนบสนนมชอเสยงหรอไม ผแตงมความเกยวของกบองคกร หรอสถาบนหรอไม หลกฐานเกยวกบบคคลหรอองคกรเปนอยางไร ขอมลทนาเสนอไดมาจากไหน ขอมลทนาเสนอผานกระบวนการกลนกรองหรอไม มการเชอมโยงไปยงผแตงหรอผสนบสนนหรอไม มแนวทางในการตรวจสอบแหลงทมาหรอไม ความนาเชอถอของขอมลเปนอยางไรเมอเปรยบเทยบกบเรองเดยวกนจากสออนๆ และใครเปนผจดพมพ เปนตน

3.3 ความเปนปจจบน เชน ระบวนเดอนปแจงไวทหนาโฮมเพจหรอไม ถาไมม มวธการทจะรไดหรอไม เอกสารนนผลตขนเมอใด ขอมลมความเปนปจจบนหรอไม มการปรบปรงขอมลครงสดทายเมอใด การปรบปรงขอมลมบอยเพยงใด เปนตน

Page 19: Color theory

3.4 ความเปนปรนย เชน มโฆษณาทหนาโฮมเพจหรอไม หนาโฮมเพจสะทอนถงความลาเอยงหรอไม ความลาเอยงเปนไปโดยเปดเผยหรอซอนเรน ถามความลาเอยง ความลาเอยงนนมผลกระทบตอการใชสารสนเทศหรอไม ผเขยนมความลาเอยง ในเชงการเมอง หรอเชงความคดหรอไม ผเขยนไดระบวตถประสงคในการเสนอสารสนเทศไวหรอไม ขอมลมรายละเอยดอยางไร ถาขอมลทนาเสนอเปนการแสดงความคดเหน ผเขยนแสดงความเหนอะไร สารสนเทศทนาเสนอ มความลาเอยงหรอไม เปนตน

3.5 ลกษณะเฉพาะ เชน เนอหาทนาเสนอสามารถหาไดจากสอในรปแบบอน เชน สงพมพ หรอ ซดรอม เปนตน หรอไม จดเดนของเวบไซตนนคออะไร เปนเวบไซตทสงเสรม และสนบสนนแหลงขอมลอนดวยหรอไม เปนตน

3.6 การเชอมโยงไปยงแหลงสารสนเทศอนๆ เชน มการเชอมโยงไปยงเวบไซต อนๆ หรอไม การเชอมโยงไปยงแหลงสารสนเทศอนๆ มความเปนปจจบนเพยงใด และมความเหมาะสมหรอไม เปนตน

3.7 คณภาพในการเขยน เชน เนอหาเขยนดหรอไม ขอมลทนาเสนอ มความชดเจนหรอไม เนอหามความสมบรณหรอไม เนอหาเหมาะสมกบระดบของผอานหรอไม มตวสะกดผดพลาดหรอไม ขอมลอานงายหรอไม รปแบบการนาเสนองายตอการอานหรอไม รปแบบการเขยนและวธการนาเสนอเหมาะกบกลมของผใชหรอไม เปนตน

4. กราฟกและการออกแบบดานสอประสม เชน มจดสนใจหรอไม การนาเสนอ มลกษณะเปนมออาชพหรอไม สงทนาเสนอเปนภาพลวนๆ หรอมความสมดลระหวางขอความ และภาพหรอไม สารสนเทศทนาเสนอเปนไปตามหลกการออกแบบดานกราฟกทดเพยงใด มองคประกอบดานความคดสรางสรรคหรอไม กราฟกทนาเสนอมสวนชวยใหเนอหาดดขนหรอทาใหดอยลงหรอไม การมกราฟก ภาพ และเสยงประกอบเหมาะสมกบวตถประสงคในการนาเสนอนนหรอไม หรอเปนเพยงการตกแตงเวบใหสวยงามเทานน เปนตน

5. ความสามารถในการทางาน ประเดนในการพจารณา ไดแก 5.1 ดานความสะดวกในการใชงาน เชน สามารถใชไดงายและใชไดอยาง มประสทธภาพหรอไม

หนาโฮมเพจมการจดแยกเนอหาไวชดเจนหรอไม มการใหความชวยเหลอ หรอไม การออกแบบหนาจอเปนอยางไร มการเชอมโยงทเพยงพอหรอไมในการไดรบขอมล ทตองการ ผใชจะตองคลกผานการเชอมโยงกครง เปนตน

5.2 ดานสภาพแวดลอมเกยวกบคอมพวเตอรทตองการ เชน ตองมรหสผานในการเขาถงขอมลหรอไม เปนตน

5.3 ดานการสบคน เชน การสบคนขอมลมประสทธภาพเพยงใด มการจดโปรแกรมคนหาทมประโยชนไวใหหรอไม มความสามารถในการจดเรยงสารสนเทศทสบคนไดหรอไม เปนตน

5.4 ดานความสามารถในการเรยกดขอมล เชน มการจดระบบเพออานวย ความสะดวกในการคนหาสารสนเทศหรอไม รปแบบการจดระบบเหมาะสมหรอไม เปนตน

Page 20: Color theory

5.5 ดานการทางานเชงโตตอบ เชน ลกษณะของการโตตอบจดไวทไหน สามารถทางานไดดหรอไม ผใชสามารถตดตอสอสารกบผเขยนสารสนเทศหรอกบผอนไดหรอไม ปฏสมพนธมความเหมาะสมเพยงใด และเปนการเพมคณคาใหแกเวบไซตหรอไม เปนตน

6. ความสามารถในการเขาถง เปนองคประกอบทสาคญ เพราะหากไมสามารถเขาถงเวบไซตนนไดกไมสามารถประเมนสารสนเทศบนเวบได ประเดนในการพจารณา ไดแก สามารถเขาถงเวบนนไดหรอไม การเขาถงเวบไซตมความเชอมนไดเพยงใด ความเรวในการเขาถงเวบ เปนอยางไร การเปลยนหรอเชอมโยงไปยงสวนตางๆ ภายในเวบกระทาไดงายหรอไม ไมสามารถไปหรอกลบมาหนาเวบเดมหรอไม เวบยงคงมอยและสามารถเขาถงในครงตอไปไดหรอไม เปนตน

7. การวจารณเวบโดยผอน กลาวคอมผวจารณและพดถงเวบไซตนนเปนอยางไร 8. คาใชจาย เปนองคประกอบทใชในการประเมนนอยกวาองคประกอบอนๆ เนองจากปจจบน

อนเทอรเนตไดเพมโอกาสในการใหบรการแกผใชโดยไมตองเสยคาใชจายในการใชสารสนเทศ อยางไรกตามคาใชจายตางๆ ยงคงมอย เชน การใชสารสนเทศจากแหลงทตองเสยคาบรการ ซงเปนคาใชจายทเกยวของกบการใชทรพยสนทางปญญา หรอคาใชจายในการตดตอสอสารกบแหลงสารสนเทศ เปนตน

ดงนนจะเหนไดวา การประเมนเวบไซตเปนสงจาเปนในการออกแบบเวบไซต อนจะทาใหทราบวาเวบไซตใดเหมาะสมและเปนประโยชน ผใชบรการเวบและผออกแบบเวบ กจะไดประโยชนดวยกนทกฝาย เวบไซตทสรางขนกจะมคณภาพและเปนเวบทดบนอนเทอรเนตตอไป

Page 21: Color theory

4.เอกสารและงานวจยทเกยวของ

1.ความหมายของเวลดไวดเวบ

เวลดไวดเวบ(World Wide Wed หรอ WWW หรอ W3 หรอ Wed) คอ บรการคนหรอเรยกดขอมลแบบหนงในอนเตอรเนต ขอมลในเวลดไวดเวบ จะอยในแบบสอผสมหรอมลตมเดยทมทงตวอกษร รปภาพ เสยง ภาพเคลอนไหวแบบวดโอ ขอมลจะถกแบงเปนหนาๆ แตละหนาสามารถเชอมโยงถงกนไดเปนแบบเครอขายคลายใยแมงมม

2.การออกแบบเวบไซต

การออกแบบเวบไซตเพอการเผยแพรขอมลบนอนเทอรเนต มความเกยวของกบการเลอกเครองมอหรอโปรแกรมในการทางานและการออกแบบรปแบบของเวบไซต โดยมรายละเอยดดงน

1. โปรแกรมสรางเอกสารเวบ

การพฒนาเวบเพจในอดตจะอาศยโปรแกรมประเภท Text Editor โดยผพฒนาจะตองศกษาภาษา HTML ปจจบนเทคโนโลยเวบเพจไดเปลยนรปแบบไปโดยมการนาภาษาคอมพวเตอร เชนVBSeript,JavaScript,Java มาผสมผสานเพอเพมฟงนชนการมางานใหตรงกบความตองการมากขน เครองมอพฒนาเวบเพจ ทมใชงานในปจจบนแบงไดดงน

1.1 การพฒนาเวบเพจดวยการลงรหสHTML หรอ แบบText Editor 1.2 โปรแกรมสรางงานอตโนมต หรอ HTML Generaton & Website Manager 1.3 การพฒนาเวบเพจดวยคาสง Save as HTML

2. หลกการออกแบบเวบเพจ

การออกแบบและพฒนาเวบเพจ สามารถทาไดหลายระบบ ขนอยกบลกษณะของขอมล ความชอบของผพฒนา ตลอดจนกลมเปาหมายทตองการนาเสนอ เชน หากกลมเปาหมายเปนเดกวยรน และนาเสนอขอมลเกยวกบความบนเทง อาจจะออกแบบใหม ทศทางการไหลของหนาเวบทหลากหลายใชลกเลน ไดมากกวาเวบทนาเสนอ ใหกบผใหญ หรอเวบดานวชาการ

หลกการออกแบบเวบเพจ สามารถแบงได 3 ลกษณะ คอ

2.1 แบบลาดบขน (Hierarchy) เปนการจดแสดงหนาเวบ เรยงตามลาดบกงกานแตกแขนงตอเนองไปเหมอนตนไมกลบหว

2.2 แบบเชงเสน (Linear) เปนการจดแสดงหนาเวบเรยงตอเนองไปในทศทางเดยว

Page 22: Color theory

2.3 แบบผสม (Combination) เปนการจดหนาเวบชนดผสมระหวางแบบลาดบขน และแบบเชงเสน

3. ขนตอนการพฒนาเวบเพจ

การพฒนาเวบเพจมขนตอนดงตอไปน

1. วางแผนการพฒนาเวบเพจ

2. กาหนดไดเรกทรอร หรอโฟลเดอร (Directory/Folder) ทใชเกบเอกสารเวบสรางภาพ หรอจดหาภาพทเกยวของกบเนอหา แลวจดเกบไวในไดเรกทรอร ตามขอ 2

3. สรางเอกสารเวบ โดยกาหนดชอไฟลเอกสารเวบ ตามขอกาหนดของผดแลระบบเครอขาย และจดเกบไวในไดเรกทรอรตามขอ 2

4. ตรวจสอบผลเอกสารเวบผานบราวเซอร

5. สงขอมลขนเครองแมขาย (Server) และทาการตรวจสอบผลการเรยกดจากเครองแมขาย

3.งานวจยทเกยวของ

การพฒนาเวบไซตมงานวจยทเกยวของกบการใชงานเวบไซตเปนหลก เชน

งานพล เผาศร (2546) ศกษาเรอง สภาพและปญหาการใชบรการเวบไซตของหองสมดและลกษณะของเวบไซตหองสมดทตองการของนสตนกศกษามหาวทยาลยของรฐ ในภาคตะวนออกเฉยงเหนอ พบวาเวบไซตของหองสมดใชประโยชนเพอสนบสนนการเรยนการสอนปญหาในการใชงานคอ เนอหาเปนภาษาองกฤษ ขอเสนอแนะตอเวบไซตคอความทนสมยของเนอหาในเวบ

ณรงควทย สะโสดา (2545) ศกษาเรอง การประเมนการเลอกใชสารสารสนเทศจากเวลดไวดเวบของนสต ระดบปรญญาตรมหาวทยาลยของรฐในภาคตะวนออกเฉยงเหนอ พบวานสตระดบปรญญาตรใชเวบไซตรปแบบขอความ สถานททใชคอรานบรการอนเทอรเนต ปญหาในการใชคอ ไมไดสารสนเทศทตองการ เวบไซตมโฆษณามากเกนไป นอกจากน นศตสวนใหญจะเลอกใชเนอหาในเวบไซตโดยพจารณาจากชอผแตงและชอหนวยงานประกอบ

ฐปน สนธพงษ (2543) ศกษาเรอง รปแบบการนาเสนอขอมลขาวสารบนเวบไซตของหองสมดสถาบนอดมศกษาของรฐ พบวา เวบไซตของหองสมดของหองสมดสถาบนอดมศกษาของรฐมการจดรปแบบอยางงาย การใสชอหนวยงานจะใชอกษรตวหนา มการใชเทคนคเฟรมจดหนาและสพนหลงหลากหลาย มการใชภาพเคลอนไหวและเทคนคพเศษคอนขางนอย

Page 23: Color theory

5.การศกษาและขอมลทเกยวของ

ในการศกษาและวเคราะหขอมลทเกยวของกบโครงการออกแบบเวบไซตเพอประชาสมพนธ

ผลงานของนกศกษา สาขาวชาศลปกรรม (ออกแบบนเทศศลป) ในครงน ผศกษาไดคนควาขอมลและ

หลกการตางๆทเกยวกบการท างานโดยมรายละเอยดดงตอไปน

1. ขอมลหลกสตรศลปะศาสตรบณฑต สาขาวชาศลปกรรม

1. ชอหลกสตร

2. ชอปรญญา

3. หนวยงานทรบผดชอบ

4. ปรชญาและวตถประสงคของหลกสตร

5. ก าหนดการเปดสอน

6. คณสมบตของผเขาศกษา

7. การคดเลอกผเขาศกษาตอ

8. ระบบการศกษา

9. ระยะเวลาการศกษา

10. การลงทะเบยนเรยน

11. การวดผลและส าเรจการศกษา

12. หลกสตร

13. อาจารยประจ าคณะ

2. อนเทอรเนต

3. เวลดไวดเวบ

4. การออกแบบเวบไซต

1. หลกในการออกแบบเวบไซต

2. การใชสบนเวบไซต

3. การใชกราฟกบนเวบไซต

4. โปรแกรมทใชสรางเวบไซต

5. สรปสงส าคญในการออกแบบและจดท าเวบไซต

Page 24: Color theory

1. ขอมลหลกสตรศลปะศาสตร สาขาวชาศลปกรรม

หลกสตรศลปะศาสตรบณฑต สาขาวชาศลปกรรม หลกสตรปรบปรง พ.ศ. 2549 คณะมนษยศาสตร

และสงคมศาสตร มหาวทยาลยราชภฏจนทรเกษม

1. ชอหลกสตร

ชอหลกสตรภาษาไทย : หลกสตรศลปะศาสตรบณฑต สาขาวชาศลปกรรม

ชอหลกสตรภาษาองกฤษ : Bacheior of Arts Program in lne and Applied Arts

2. ชอปรญญา

ชอเตม : ศลปะศาสตรบณฑต(ศลปกรรม)

: Bacheior of Arts Program in Fine and Applied Arts

ชอยอ : ศศ.บ.(ศลปกรรม) B.A.(Fine and Applied Arts)

3. หนวยงานทรบผดชอบ

คณะมนษยศาสตรและสงคมศาสตร มหาวทยาลยราชภฏจนทรเกษม

4. ปรชญาและวตถประสงคของหลกสตร

4.1 ปรชญา

ผลตบณฑตทมความร คณธรรม จรยธรรมและมทกษะความช านาญในสาขาอาชพศลปกรรม

เพอสอดคลองกบความตองการของสงคม มความซอสตยและมความรบผดชอบ สามารถคดวเคราะหและ

สรางสรรคงานดานศลปกรรมไดอยามประสทธภาพ

4.2 วตถประสงค

1. เพอผลตบณฑตใหมความรและมทกษะในการปฏบตงานดานศลปกรรมผสมผสานกบการ

ใชเทคโนโลยใหเหมาะสมกบยคสมยเปนอยางด

2. เพอผลตบณฑตใหมเจตคตทดตองานศลปกรรมและสามารถน าความรไปใชพฒนาสงคม

และทองถนไดเปนอยางด

3. เพอผลตบณฑตใหมความซอสตยและความรบผดชอบตอสงคมและวชาชพศลปกรรม

4. เพอผลตบณฑตใหมความสามารถคดวเคราะห แกปญหาและสรางสรรคงานดานศลปกรรม

อยางมประสทธภาพ

5. เพอผลตบณฑตใหมส านกในการสรางสรรคงานศลปกรรมทมบทบาทตอการสงเสรมและ

ท านบ ารงศลปกรรมวฒนธรรมของชาต

Page 25: Color theory

5. ก าหนดการเปดสอน

ภาคเรยนท 1 ปการศกษา 2549

6. คณสมบตของผเขาศกษา

ตามขอบงคบของทางมหาลยราชภฏจนทรเกษมวาดวยการจดการศกษาระดบปรญญาตร พ.ศ. 2548

7. การคดเลอกผเขาศกษาตอ

ตามขอบงคบของทางมหาลยราชภฏจนทรเกษมวาดวยการจดการศกษาระดบปรญญาตร พ.ศ. 2548

8. ระบบการศกษา

ใชระบบการศกษาแบบทวภาคปการศกษาหนงแบงออกเปน 2 ภาคการศกษา ปกต 1 ภาคการศกษา

มระยะการศกษาไมนอยกวา 15 สปดาห และสามารถจดการศกษาระหวางปดภาคการศกษาโดยก าหนดเวลา

เรยน จ านวนหนวยกตทมสดสวนเทยบเคยงกนไดกบการศกษาภาคปกต

9. ระยะเวลาการศกษา

ระยะเวลาการศกษาตลอดหลกสตรไมนอยกวา 6 ภาคการศกษาปกตและไมเกน 16 ภาคการศกษา

ปกต

10. การลงทะเบยนเรยน

ตามขอบงคบของทางมหาลยราชภฏจนทรเกษมวาดวยการจดการศกษาระดบปรญญาตร พ.ศ. 2548

11. การวดผลและส าเรจการศกษา

ตามขอบงคบของทางมหาลยราชภฏจนทรเกษมวาดวยการจดการศกษาระดบปรญญาตร พ.ศ. 2548

12. หลกสตร

12.1 จ านวนหนวยกตรวมตลอดหลกสตรไมนอยกวา 129 หนวยกต

12.2 โครงสรางหลกสตร

1. หมวดวชาศกษาทวไป 30 หนวยกต

2. หมวดวชาเฉพาะ 93 หนวยกต

2.1 กลมวชาแกน 37 หนวยกต

2.2 กลมวชาเอกบงคบ 49 หนวยกต

2.2.1 แขนงออกแบบนเทศศลป

กลมวชาเอกบงคบ 42 หนวยกต

กลมวชาเอกเลอก 7 หนวยกต

Page 26: Color theory

2.2.2 แขนงออกแบบประยกตศลป

กลมวชาเอกบงคบ 33 หนวยกต

กลมวชาเอกเลอก 16 หนวยกต

2.3 กลมวชาปฏบตการณและฝกประสบการณวชาชพ 7 หนวยกต

3. หมวดวชาเลอกเสร

13. อาจารยประจ าคณะ

1. ผชวยศาสตราจารยกรรตน พวงพงษ

2. ผชวยศาสตราจารยประชด ทนบตร

3. อาจรยวารดา พมผกา

4. อาจารยจารณ เนตรบตร

5. อาจารยธระชย สขสวสด

6. อาจารยเกวรนทร พนธว

7. อาจารยนภทรพงษ วจนจ านงค

2. อนเทอรเนต

1. ความส าคญของอนเทอรเนต

สออนเทอรเนตไดถกหยบยกขนมาใหเปนแบบอยางของ “ทางดวนขอมล” และรวมไปถง

การสอแกนหลกในยคมลตมเดยอกดวย เพราะในปจจบนนนนอนเทอรเนตกมความสามารถทางมลตมเดย

แลวดวย ยกตวอยางเชนการดงขาวสารตางๆทางคอมพวเตอร ไมวาขาวเนนๆจะอยในรปแบบของภาพนง

ภาพส หรอวาภาพเคลอนไหวดวยระบบโตตอบ สามารถจองหรอสงออรเดอรสนคา การดขาวลาสดจาก

อนเทอรเนต จากนนแลวเทคโนโลยใหมทเกดขนกยงท าใหอนเทอรเนตสามารถถกน าไปใชในการประชม

ทางไกล การกระจายเสยงแบบวทยหรอการแพรภาพแบบสถานโทรทศนไดอกดวย

2. ความแพรหลายของอนเทอรเนต

เมออนเทอรเนตเปรยบเสมอนเสนทางของขอมลขาวสารทเชอมโยงถงกน ท าใหเกอบทก

องคกรตองเชอมโยงเครอขายภายในของตนเองเขากบอนเทอรเนต การแพรขยายจงเกดขนอยางรวดเรวและ

มแนวโนมทเพมขนอยางตอเนอง จนในทสดแลวนนอนเทอรเนตจะกลายเปนชวตประจ าวนของมนษยอยาง

หลกเลยงไมได ในปจจบนมเวบไซตจ านวนมากเกดขนใหมทกวนซงจ านวนของเวบไซตทมอยท วโลก

ประมาณ 60 ลานแหงและมทาทวาจะไปถงหลก 100 ลานในระยะเวลาไมนานน โดยอตราการแพรหลาย

ของอนเทอรเนตในประเทศไทยขนอยกบอตราการเจรญเตบโตของเศรษฐกจพอสมควร โดยในกรณท

Page 27: Color theory

เศรษฐกจขยายตวชาทสด คอรอยละ 2 ตอป ตลอดชวงเวลาดงกลาวประเทศไทยจะมผใชอนเทอรเนต

ประมาณ 2.78 ลานคน หรอรอยละ 4.29 ของประชากรทงหมดในชวงตนปของ ค.ศ. 2005 สวนในกรณท

เศรษฐกจขยายตวอยางรวดเรวถงรอยละ 6 ตอป ตลอดชวงเวลาดงกลาวจะมผใชอนเทอรเนตประมาณ 3.21

ลานคนหรอรอยละ 4.94 ของประชากรทงหมด ในชวงเวลาดงกลาวประเทศไทยจะมความเรวของวงจร

ตางประเทศโดยรวมในชวง 256-312 Mbps หากความสมพนธระหวางความเรววงจรระหวางประเทศตอ

จ านวนผใชยงคงอยในระดบเดม จากการคาดการอตราความแพรหลายของการใชอนเทอรเนต

ภายในประเทศไทย ในชวงตนป ค.ศ. 2005 นาจะอยระหวาง 2.78-3.21 ลานคนหรอประมาณรอยละ 4.29-

4.94 ของประชากรทวประเทศ หรอขยายตวปละประมาณรอยละ 30.40 จนผใชอนเทอรเนตในป 2005

เพมขน 4-5 เทา เมอเทยบกบปจจบนซงจะท าใหอนเทอรเนตมความแพรหลายอยางเพยงพอทจะใหบรการ

ดานสาธารณะประโยชนตางๆโดยมความครอบคลมพอสมควร (สมเกยรต ตงกจวาณช , กนยายน 2542 : 1-

15)

3. เวลดไวดเวบ

เวลดไวดเวบไดถกสรางขนในป ค.ศ. 1989 โดยหองปฏบตการทดลองแหงยโรป ส าหรบฟสกส –

อนภาค ซงเปนสถาบนในการคนควาวจยแหงประเทศสวตเซอรแลนดและไดน าออกมาใชในป ค.ศ. 1990 (ก

ดานนท มลทอง , 2542 : 3-4)

1. การท างานของเวลดไวดเวบ

เวลดไวดเวบ มความหมายวาเปนเนตเวรคทเชอมตอกนไปทวโลกมการแสดงผลเปนหนาๆ

เหมอนกบเอกสารทเราอานกนบนกระดาษ โดยเรยกวา “เวบเพจ” ซงประกอบไปดวยตวอกษร กราฟก เสยง

ภาพเคลอนไหวและขอมลในรปแบบอนและทส าคญกคอ ในแตละเวบเพจจะเปนสอมลตมเดยทสามารถ

โตตอบกบผใชได และถาเปนเพจหรอเปนหนาทมจดเรมตนหรอหนาแรกของเวบเพจทงหมดทจะแสดงกจะ

เรยกวา “โฮมเพจ” โดยทเวบเพจทงหลายจะเชอมตอซงกนและกนโดยใชไฮเปอรแทกซ ซงจะชวยใหการยาย

จากเวบเพจหนงไปยงอกเวบเพจหนงอนๆไดหรอจะไปยงไฟลกราฟก ไฟลใบนาร ไฟลมลตมเดย และ

บรการอนๆ ในอนเทอรเนตไดอยางรวดเรว วธในการกระโดดจากเวบเพจหนงไปยงอกเวบเพจหนงนน ก

เพยงแตคลกไปทลงคบนไฮเปอรแทกซเทานน เวลดไวดเวบท างานในรปแบบ Cline/Server โดยจะตองรน

โปรแกรมทเปน ”ลกขาย” หรอ Web clinet ทเรยกวา Web brower บนคอมพวเตอร ตวอยางเชน Moasic

Netscape หรอ Internet Explorer แลว Clinet เหลานกจะตดตอไปทเครอแมขายหรอเซฟเวอรทเรยกวา Web

server เพอเรยกดขอมลหรอบรการตางๆ จากนน Web server จะเปนตวคนหาแลวสงขอมลกลบไปยง Web

brosert ซงจะเปนตวแสดงผลออกมาอกทหนง เวบเพจบน World wide web นนถกสรางโดยใช “ภาษาท า

Page 28: Color theory

เครองหมาย”(makeup language) ทเรยกวา HTML (Hypertext markup language) ภาษานจะมค าสงทบอก

Web browser วาจะใหแสดงตวอกษรกราฟกและไฟลมลตมเดยอยางไร นอกจากนยงมค าสงส าหรบ

เชอมโยงเวบเพจหนงไปยงเวบเพจอนๆและไปยงบรการอนๆในอนเทอรเนตอกดวย (ทฑฤษพงศ เฟองวฒ

2543 : 26-27)

2. ต าแหนงทอยของเวบ (URL)

ในการทเราจะเรยกใชเวบเพจทอยในอนเทอรเนตนนเราจะตองทราบเสยกอนวา เวบเพจนนๆได

ถกเกบไวอยในเวบไซต โดยทต าแหนงทอยของเวบไซตนนจะเขยนอยในรปแบบมาตรฐาน URL (Uniform

Resource Location) โดยทวไปในการใชโปรแกรม Web browser เราจะเหนไดวาจะใช protocol แบบ HTTP

เชน http://www.MYWEB.com เปนตน นอกเหนอจาก protocol แบบ HTTP แลว Web browser ยงรจกใน

แบบอนๆอกมากมาย ท าให Web browser มการบรหารทเพมขน URL ยอมาจากค าวา Unifrom Resource

Location เปนชอทใชเรยกต าแหนงทอยขอขอมลบนอนเทอรเนต การท างานของ URL จะเรมจาก Hypertext

ท าการเชอมตอกบขอมลภายใน WEB ไปยงโปรแกรมตางๆ ตาม protocol ทผใชไดก าหนดรปแบบการ

เชอมตอไวโดยรปแบบของ URL มดงน

1. Fttp:// ท าหนาท Upload หรอ Download จาก FTP server

2. Fttp:// ท าหนาทเรยก Hypertext ขนมาแสดงผลจาก Web browser

3. File:// ท าหนาทคนหาและแสดงผลขอมลจากไฟลทก าหนดแบบ local

4. Telnel:// ท าหนาทเปน remote control

5. Gopher:// ท าหนาทเรยกไฟลขนมาใชงานจาก Gopher Server

6. mailto: ท าหนาทสงขอมลในรปแบบของ E – mail

7. News: ท าหนาทคลายกบ mailto แตจะเปนจดหมายขาว

3. โดนเมนเนม

ชอโดเมน เปนชอทระบทอยของคอมพวเตอรแมขายทเชอมโยงในอนเทอรเนตโดยเปนชอท

สมบรณของทตงอนเทอรเนตนน อนประกอบดวย ชอของคอมพวเตอรทตดตอเชอมโยงกบอนเทอรเนต เขต

ยอย และเขตระดบสงสด ระดบความส าคญของเขตจะดจากขวาไปซาย เขตขวาสดซงอยหลงสดของทอยจะ

เปนเขตระดบสงสด ซงจะครอบคลมชอทางซาย เขตขวาสดจะบอกถงระดบประเทศและเขตซายสดจะบอก

ชอเครอง โดยแตละเขตจะมจดแบงระดบชอเขต โดยสงเหลานจะแยกจากกนและหลกในการตงชอโดเมน

นนจะใช “ค าวา” แทนชดตวเลข เชน 202.182.0.1 เพองายแกการจดจ าของระบบคอมพวเตอร ซงจะแปลงคา

ของค านนๆออกเปนตวเลขทคอมพวเตอรสามารถอานไดแทน ถาจ าตวเลขไดกจะสามารถน าตวเลขนนมา

Page 29: Color theory

พมพคาแทนการพมพชอโดเมนปกตได เชน โดเมนทชอ www.siamweb.com แทนตวเลขชด 207.226.172.2

เปนตน Domain Name System (DNS) ชดแรกทถกน าออกมาใหทกคนไดใชงานมอยดวยกน 5 แบบ โดยเรา

สามารถแยกความแตกตางของโดเมนเนมไดจากอกษรยอทตอมาจากชอ www.***.com หรอ www.***.net

ซงยคแรกๆของโดเมนเนมนนมดวยกนไมกสกลแตปจจบนไดเกดเมนใหมๆขนมาอกมากมาย

เชน .shop, .sex เปนตน ส าหรบในประเทศไทยนนไดมการขอเรองจดโดเมนเนมไปยงองคกรจดโดเมนของ

โลกให .th เปนของประเทศไทย (ศภชย สขะนนทร. 2542 : 10-11)

4. โฮมเพจ

ส าหรบค าทความหมายเดยวกนกบโฮมเพจ ไดแก เวลดไวดเวบเพจและเวบเพจ โดยทค าวา โฮมเพจ

เปนการเนาถงการเปนขอมลประจ าเวลดไวดเวบเซรฟเวอร (หมายถงขอมลทงหมด) หรอเปนขอมลหนาแรก

ของเวลดไวดเวบนนๆ อยางไรๆกตามโฮมเพจอาจหมายถง แฟมขอมลทถกก าหนดโดยโปรแกรมเวบ

เบราวเซอร ดงนน โฮมเพจจงเปนขอมลทปรากฏบนเวบเบราวเซอรหรอเปนแฟม HTML ทไดจากการ

เชอมโยงและโอนยายมาจากเวบเซรฟเวอรแหลงอนๆ

5. ประโยชนของการจดท าเวบไซต

โดยหลกการแลวเวลดไวดเวบไดถกออกแบบมาใหเปนเอกสารอเลกทรอนกส ซงปจจบนถกเรยก

ยอๆวา เวบ ซงขดความสามารถของเทคโนโลยเวบมความสามารถในการท าหลายๆสงมากยงขนจงท าใหม

การประยกตงานตางๆ บนเวลดไวดเปนไปไดอยางหลากหลาย ตงแตการประกาศขาวธรรมดาๆไปจนถงการ

ท าการคาดวยอเลกทรอนกส เชนตวอยางทแสดงใหเหนวาเทคโนโลยของเวบไซดสามารถท าอะไรไดบาง

1. จดหมายขาว เปนลกษณะของสออยางหนงทหลายๆองคกรเลอกมาใชในการ

ประชาสมพนธขาวสารตางๆบนเวลดไวดเวบเปนไปอยางหลากหลาย ตงแตการประกาศขาวธรรมดาๆ ไป

จนถงการท าการคาดวยอเลกทรอนกส เชนตวอยางทแสดงใหเหนวาเทคโนโลยของเวบไซดสามารถท าอะไร

ไดบาง

2. จดหมายขาว เปนลกษณะของสออยางหนงทหลายๆองคกรเลอกมาใชในการ

ประชาสมพนธขาวสารตางๆ ขององคกรผานทางเวบไซตขององคกร ซงจะเปนทางทสามารถลดคาใชจาย

ขององคกรไดและองคสามารถทจะปรบปรงเนอหาหรอเพมเตมขาวสารตางๆขององคกรไดตลอดเวลา โดย

ไมจ าเปนตองจดพมพขาวสารเหลานนออกมาเปนเอกสารสงใหกบลกคาซงจะตองเสยคาใชจายในการพมพ

เอกสารเหลานนอก

3. ศนยบรการทางอนเทอรเนต มเวบไซตจ านวนมากทถกสรางขนเพอเปนศนยกลางในการ

ตดตอสอสารของคนทงโลก ไมวาจะเปนการใหบรการทางดานการคนหาขอมลทตองการการใหบรการดาน

Page 30: Color theory

อเมลล การใหบรการพนทส าหรบการสรางเวบไซตหรอการใหบรการทางดานหองสนทนา เปนตน

4. การศกษาระยะทางไกล ในปจจบนภาพวดโอและเสยงสามารถสงผานอนเทอรเนตไปถง

ผเขาชมเวบไซตไดอยางงายดาย

5. ธรกจออนไลน กระแสของ E – Commerce ปะทขนทวโลก แนวโนมในอนาคต Online

Business จะเปนแนวทางทเกอบทกองคกรโดยเฉพาะอยางยงองคกรธรกจจ าเปนจะตองน ามาเปนสวนหนง

ขององคกรไมมทางใดกทางหนง (ทธฤษพงศ เฟองวฒ , 2543: 8-12)

4. การออกแบบเวบไซต

เวบไซตคอแหลงทรวมหนาเวบจ านวนมากมายหลายหนาในเรองเดยวกนมารวมอยดวยกน แตสง

หนงในการเสนอการรวมทอยเวบไซตทแตกตางไปจากโปรแกรมโทรทศนเนอหาในนตยาสารหรอ

หนงสอพมพ คอการท างานบนเวบจะไมมวนสนสด ทงนเนองจากเราสามารถเพมหนาเวบบนเวบไซต

เพมเตมสารสนเทศททนสมย เปลยนภาพกราฟก ฯลฯ ไดอยตลอดเวลา จงนบเปนการทาทายความคด

สรางสรรคของนกออกแบบอยางมากในงานขยายวงกวางเชนน ดงนนการออกแบบเวบไซตจงเปนสงส าคญ

มากอยางหนงทควรค านงกอนลงรายละเอยดในเวบแตละหนาตอไป ตามลกษณะทแทจรงเวลดไวดเวบ

ประกอบดวยหนาเอกสารจ านวนมากมายหลายลานหนา ซงมลกษณะเชนเดยวกนกบเอกสารทใชพมพดวย

โปรแกรมประมวลค าสงนนเอง หนาเอกสารแตละหนาเหลานจะมการเชอมโยงกนเพอใหผอานสามารถอาน

ไดในเวลาอนรวดเรว เอกสารทมความเกยวของและเชอมโยงกนเหลานจะอยรวมกนเรยกวา “เวบไซต” หรอ

ทอยเวบเปนทรวบรวมเอกสารนนอยในเครองบรการอนเทอรเนต ปกตแลวในแตละเวบไซตจะม “โฮมเพจ”

หรอเรยกอกชอหนงวา “หนาตอนรบ” ซงปรากฏเปนหนาแรกเมอเปดเวบไซตนนขนมาในหนาโฮมเพจจะ

เปรยบเสมอนเปนหนาสารบญเพอบอกกลาวหวขอเรองราวเกยวกบเวบไซตนน แตในบางเวบไซตจะมหนา

น าเขารวมอยดวย หนาน าเขาเปรยบเสมอนชอเรองของหนงสอกอนทจะน าเขาไปสหนาโฮมเพจ (กดานนท

มะลทอง. 2542 : 7)

1. หลกในการออกแบบเวบไซต

ตามทไดกลาวมาแลววา เวบไซตเปนแหลงรวบรวมหนาเวบจ านวนมากมายหลายหนาในเรอง

เดยวกนมารวมอยดวยกน แตการท างานบนเวบจะไมมวนสนสด เนองจากนกออกแบบสามารถปรบปรงทก

อยางบนหนาเวบไซตไดตลอดเวลา ดงนนการออกแบเวบไซตจงตองมการเรมตนทดโดยค านงถงหลกการ

ตางๆ ซงแบงเปนหวขอใหญๆ ดงน

1. การวางแผนลวงหนา การท างานใดๆกตามยอมตองมการวางแผนไวเพอจดขนตอนใน

การท างานและเปนแนวทางใหสามารถด าเนนงานไปไดดวยความสะดวกรวดเรว ดงนนกอนทจะท าการ

Page 31: Color theory

สรางเวบไซตใดเวบไซตหนงจงตองมการวางแผนลวงหนา เพอใหสามารถออกแบบเวบไซตนนและ

หลกเลยงอปสรรคนานปการทอาจเกดขนได ถาไมมการวางแผนไวกอน คอ มการสรางเคาโครง การสราง

เคาโครงนจะชวยใหเราเหนสวนตางๆ ของโครงการไดอยางรวดเรวโดยยงไมตองสรางหนาเวบจรง และชวย

ใหสามารถรวบรวมจดระเบยบโครงสรางตางๆของเวบไซตไดอยางรวดเรวและงายดาย มการเกบรวบรวม

วสด เพราะเราจ าเปนทจะตองเกบรวบรวมเนอหาตางๆใหเรยบรอยกอนเรมท างานจรง ทงนยอมขนอยกบ

เคาโครงทรางไววาตองการสงใดในการท างานน แลวสรางรายการของสงตางๆทตองการใชในเวบไซต

รวมถงมการเกบแฟมตนฉบบ ซงแฟมตนฉบบเปนแฟมขอมลตางๆ ทรวบรวมไวแลวนนควรเกบไวเปน

โฟลเดอรยอมแฟมตนฉบบโดยอยภายในโฟลเดอรใหญของโฟลเดอรเวบไซตและตงชอตามแตชนดของ

แฟมนน เชน แฟมตนฉบบขอความ แฟมตนฉบบภาพ เปนตน

2. รวบรวมจดระเบยบ ภายหลงเมอวางแผนและเกบรวบรวมวสดตางๆทจ าเปนตองใชใน

การสรางเวบไซตเรยบรอยแลว สงแรกกอนทจะมการสรางเวบไซตไดนน นกออกแบบจ าเปนตองท าการจด

ระเบยบเพอความสะดวกในการท างาน คอ ควรมการรวบรวมแฟม ซงในการรวบรวมแฟมขอมลตางๆ ควร

ท าการจดเกบรวมกนไวในโฟลเดอรใหญ แตส าหรบเวบไซต เราควรจะสรางโฟลเดอรยอยใหมขนมา

ตวอยางเชน อาจตองเกบแฟมภาพจ านวนมากอยในโฟลเดอรยอยตางหากหรอเวบไซตนนมขนาดใหญ

พอทจะแตกยอยลงไปเปนสวนตางๆ โดยแตละสวนนนจะมแฟมเฉพาะของตนเอง ในกรณนอาจจะมากขน

อก 2 สวนหรอนอยลงอก 2 สวนได รวมถงควรมการจดล าดบขนตอนเนอหาของขอมลทจะน าเสนอซงมกฎ

ในเรองน กคอ ผอานไมควรตองคลกผานไปเกนกวา 5 หนาจงจะถงเนอหาทตองการ ทงน เพราะยงตองผาน

ไปไกลมากเทาใดยงท าใหผอานเกดการหลงทางได

3. การน าทาง การออกแบบเครองมอน าทางเพอใหการส ารวจเวบเปนไปดวยความสะดวก

รวดเรวและไมเกดการหลงทาง นบวาเปนสงจ าเปนอยางยงทงน เพราะจะเปนประโยชนแกผอานในการ

เขาถงขอมลตางๆไดโดยงาย และเปนสงดงดดใจเพอมใหผอานเกดความเบอหนายจนคลกผานเวบไซตนน

ไปเลย โดยเครองมอน าทางซงปกตแลวมกจะเรยกวาแถบเครองมอ แตบางครงจะเรยกวาเปน เมน หรอการ

น าทาง เวบไซตสวนมากจะมเครองมอน าทาง เพอใหผอานสามารถไปสสวนตางๆไดโดยไมตองกลบมา

หนาสารบญเรอง และจะเปนการดกวาถาจะใชเครองมอน าทางทเปนขอความในการเชอมโยง เพราะมฉะนน

แลวเครองมอน าทางทเปนกราฟกนนจะมขนาดใหญมากเกนไปและจะท าใหเสยเวลาในการโหลด

4. เกณฑมาตรฐาน การออกแบบเวบไซตทดนน ควรมเกณฑมาตรฐานของสงตางๆ ทอยใน

โครงสรางเวบนนเพอไมสรางความสบสนใหแกผออกแบบเองและผอานดวย เชน ควรมความคงตวทง

เวบไซต เนองจากความคงตวนบเปนสงส าคญมากทสดในการออกแบบหรอมการก าหนดความกวาง

Page 32: Color theory

มาตรฐาน โดยผออกแบบควรจะตดสนใจใหไดวาจะใชความกวางจดภาพเทาใดในเวบไซตนนกอนทจะเรม

การออกแบบหนาแตละหนา ความกวางทเหมาะสมส าหรบเวบไซตของเราจะขนอยกบระบบทผอานทวไป

ใชกนอย รวมถงในสวนของแบบการพมพหรอแบบตวอกษรเพอความคงตวในเวบไซต โดยการล าดบขน

ของการพมพหวเรอง หวขอใหญ หวขอยอย และเนอเรองใหมความแตกตางกนและใชตรงกนในทกๆหนา

เพอใหผอานสงเกตเหนไดงายในล าดบขนความส าคญของเนอหา

5. ผอาน เนองจากเวลดไวดเวบเปนสงททกคนในสวนตางๆของโลกสามารถเขาถงไดโดย

ไมมขดจ ากด จงอาจเปนความล าบากของนกออกแบบในการทจะตอบสนองความตองการของผอานในทก

ระดบได แตถานกออกแบบค านงถงแนวทางปางประการเกยวกบผอานแลวยอมสามารถออกแบบเวบไซต

นนใหเปนประโยชนกบผอานสวนมากได โดยเราตองค านงถงลกษณะผอาน เพราะถาเวบไซตนนสราง

ขนมาเพอความสนกเพลดเพลนสวนตวแลวยอมเปดโอกาสใหผอานทวไปเขามาส ารวจไดโดยไมมขดจ ากด

แตถาเปนเวบไซตทางดานธรกจหรอส าหรบจดมงหมายและสามารถระบกลมผอานไดมากเทาใด เวบไซต

จะสามารถน าเสนอสารสนเทศไดอยางมประสทธภาพและตองตรงตามประสทธผลทตองการไดมากขน

และทงนเพราะความแตกตางกนอยางมากของอปกรณในการเขาถงอนเทอรเนตจะมสวนในเรองของความ

คลองตวของการใชเปนอยางยง สงตางๆเหลานเปนสงทนกออกแบบตองค านงถงเปนอยางมาก ดงนน ถา

เปนไปไดแลวควรจะมการทดสอบเวบไซตนนกบวสดและอปกรณทแตกตางกนและพยายามคนหาใหทราบ

วา ผอานสวนมากเขาถงเวบไซตของเราดวยวสดและอปกรณสงใดทงหมดทกลาวมานนบเปนแนวทางเบอ

ตนกอนทจะถงการออกแบบหนาเวบ ทงนเพราะการออกแบบเวบไซตโดยค านงถงรายละเอยดตางๆกอนท

จะลงลกถงหนาเวบแตละหนานบเปนแกนหลกส าคญในการด าเนนการทงหมด ถาผออกแบบไมสามารถ

รกษาแนวทางหรอก าหนดสงตางๆในเวบไซตไวไดแลว กอาจท าใหเกดความล าบากและขดของในการ

ออกแบบหนาเวบในภายหลงได (กดานนท มะลทอง, 2542 : 8-16)

2. การใชสบนเวบไซต

การเลอกสทดทสดในการสรางเวบไซต คอ เลอกสทแสดงถงความรสกและคณลกษณะทงหมด

ของเวบไซตนน เมอมการสรางภาพกราฟกส าหรบชอเรอง หวเรองยอยและสญลษณรปน าทางเราควรใชส

จากแบบแผนส เพอเปนสน าของภาพกราฟก สงนจะชวยใหในแตละหนามองดและใหความรสกทคลายคลง

กนไมวาเนอหาในแตละหนาจะมความแตกตางกนเพยงใดกตามสงทควรค านงถงอยางหนงในการท างาน

เกยวกบส คอ ความเปรยบตาง เชน ขอความควรมความเปรยบตางทดระหวางสของตวอกษรและสของพน

หลง การใชสรวมกนของขอความและพนหลงบางสจะไมท าใหเกดความไมสบายตาเวลาอาน เชน การใช

ขอความสมวงเขมบนพนหลงสด า ท าใหมองดนาตกใจและท าใหไมนาอาน เราสามารถทจะเสนอสงพมพ

Page 33: Color theory

หลากสสนบนเวบไซตได แตการทจะเพมสสนบนเวบไซตนเราตองทราบถงเทคโนโลยของสทใชบน

เวบไซตเสยกอน ดงน

1. ส CMYK ยอมาจาก Cyan (สน าเงนเขยว) Magenta (สชมพเฉดแดง) Yellow (สเหลอง)

และ black (สด า) CMYK เปนสทเรามองเหนทวไปบนโลกใบน และนบเปนรปแบบของส “สะทอน”

อนเกดจากการทแสงเดนทางจากดวงอาทตยหรอหลอดไฟ และกระทบเขากบตนไมหรอภาพบนหนงสอ ส

บนวตถนนจะสะทอนจากวตถเขาสตาเรา แตบนจอมอนเตอรมไดเปนเชนนน แสงจะเดนทางจาก

แหลงก าเนดผานทางจอภาพและตรงเขาสสายตาเราโดยไมมการสะทอนออกมาจากวตถใดๆ จดนจงเปนจด

ทแตกตางกนอยางมากเมอใชสบนสงพมพและสเวบ

2. ส RGB ยอมาจาก Red (สแดง) Green (สเขยว) และ Blue (สน าเงน) จอมอนเตอร

ทงหลายซงรวมถงจอโทรทศน และจอมอนเตอรทใชกบคอมพวเตอรจะมการสรางภาพบนจอภาพโดยการ

เปลงแสงสแดง เขยวและน าเงนออกมา แสงเหลานสามารถเปลงออกมาดวยความหนาแนตางๆกน และจะม

การเหลอมทองซงกนและกน ท าใหจอมอนเตอรสามารถแสดงสไดเปนลานๆส ซง RGB ไมใชเปนสทเกด

จากการสะทอนเชนเดยวกบ CMYK แตเปนสทตรงมาจากแหลงแสงเขาสตาเราโดยปราศจากการสะทอนกบ

วตถใดๆ (กดานนท มะลทอง , 2542 : 77-83)

3. การใชกราฟกบนเวบไซต

นอกจากจะตองท าเรองเกยวกบสทใชบนเวบแลว เราควรตองเรยนรเกยวกบสงตางๆ ทใช

ทางดานกราฟกควบคกนไปดวย ซงการออกแบบงานทางดานกราฟกทดจงกลายเปนจดยทธศาสตรในการ

แขงขนระหวางแตละเวบไซต หากใครสามารถออกแบบภาพตางๆ ภายในเวบไซต จงเปนเรองทจ าเปนและ

ควรมการจดการกบรปกราฟกตางๆ บนเวบไซตของเราใหมความเหมาะสมทสด โดยงานของภาพดาน

กราฟกในคอมพวเตอรสามารถแบงออกไดเปน 2 ประเภทใหญๆ คอ

1. บตแมพอมเมจ หลงการท างานของบตแมพอมเมจ คอ การน าจดสตางๆมาวางเรยงกนเพอ

กอใหเกดเปนภาพตางๆขน ความสามารถในการแสดงสของแตละภาพจะเปนอยางไรขนอยกบการก าหนด

เมอมการบนทกภาพเหลานนในซอฟตแวรตกแตงตางๆ ภาพกราฟกทมใชบนอนเทอรเนตเกอบทงหมดรวม

ไปถงภาพวดโอตางๆ จะเปนการท างานแบบบตแมพอมเมจ หากตองการทจะขยายภาพแบบแมพบตอมเมจ

จะไดความละเอยดของภาพทลดลง จนในบางครงจะสามารถสงเกตเหนรปเปนสเหลยมชดเจน

2. เวกเตอรอมเมจ การท างานของเวกเตอรอมเมจจะแตกตางจากบตแมพอมเมจโดยสนเชง ซงจะ

เปนการจดการภาพตางๆ ในเชงมมแทนทจะมการจดการภาพในเชงจด โดยจะบนทกพกดของมมในการ

เชอมตอระหวางจดตางๆ ทงหมดเอาไว ดงนนเมอมการขยายภาพนนจะไมเปลยนแปลงคณภาพเลยแมแต

Page 34: Color theory

นอย ซอฟแวรทสนบสนนการท างานแบบเวกเตอรอมเมจมอยมากมาย เชน CorelDraw, Adobe Illustrator

และ Macromedia Flash เปนตน ภาพโดยมากทถกสรางขนมาจากซอฟแวรเหลานนมกจะเปนภาพทสรางขน

ดวยมอ เชน ภาพโลโกของบรษท และภาพสญลกษณตางๆ เปนตน ถงแมวาภาพทงหมดทถกสรางขนจาก

ซอฟแวร เชน CorelDraw หรอ Illustrator หรอ Macromedia Flash จะเปนแบบเวกเตอรอมเมจ แตเมอจะ

น าไปใชงานจรงๆ บนเวบจะตองท าการบนทกใหเปนแบบบตแมพอมเมจ เพราะเวบเบราวเซอรตางๆ ไมม

การสนบสนนการท างานของเวกเตอรอมเมจ เวนแตจะใชโปรแกรมอยางเชน Macromedia Flash ซงเปน

ซอฟแวรทท างานแบบเวกเตอรอมเมจในการสรางภาพเคลอนไหวตางๆ (ทธฤษพงศ เฟองวฒ, 2543 : 129-

134)

Page 35: Color theory

ภาพทง 2 ภาพนเกดจากการขยาย 500% จะเหนไดวาภาพแบบ Bitmap นนเรมมวและเหนเมดสท

แตกออก สวนภาพแบบ Vector นนยงคมชดอย สาเหตนนเพราะวาภาพแบบ Bitmap นนเปนเพยงเมดสท

จดเรยงกน เมอมการขยายภาพกจะเหนชองวางและเมดสทแตกออก สวนภาพแบบ Vector เปนภาพทเกด

จากการค านวณ เมอมการขยายภาพกจะมการค านวณสดสวนและขนาด ท าใหภาพทถกขยายจงยงคมชดอย

(ยทธชย รจรวมล, 2537 : 32-33)

โดยรปแบบของไฟลกราฟกทสามารถจะน ามาใชบนเวบเพจไดนน ความจรงแลวมอยหลายอยาง

แตทไดรบการนยมสงทสดจะมเพยง 2 ชนด เนองดวยทง 2 ชนดนมจดเดนทแตกตางกน จงจ าเปนจะตองใช

ทง 2 ชนดนควบคกนไป เราจงไมสามารถเลอกเฉพาะแบบใดแบบหนง ส าหรบน ามาใชในงานเทานน ซงทง

2 ชนดนคอ GIF และ JPG นนเอง โดยท GIF (Graphic Interchange Format) เปนรปแบบแฟมกราฟกท

พฒนาโดยบรษท CompuServ ซงค าวา GIF นนยอมาจากค าวา Graphic Interchange โดยรปแบบ GIF จะม

สงส าคญมากอย 2 ประการ คอ รปแบบ GIF สามารถใชขามโครงสรางระบบได ซงหมายถงวาคอมพวเตอร

ระบบใดๆกตามจะสามารถอานภาพรปแบบนไดทงหมดและสามารถบบอดกราฟกในรปแบบของ GIF ได

เพอลดขนาดแฟมใหเลกลง การบบอดนบเปนสงส าคญบนอนเทอรเนต ทงนเพอใหสามารถถายโอนไดอยาง

รวดเรวมากขนและเนองจากรปแบบ GIF จะเปนภาพแบบบบอด ดงนนจงเหมาะส าหรบใชกบขนาดใหญ

และสทบ เชน ภาพวาดงายๆ ภาพตราสญลกษณ ขอความทเปนกราฟก การตน ฯลฯ และรปแบบ JPEG

(Joint Photograph Expents Groups) โดยท JPEG ยอมาจาก Joint Photograph Expents Groups ซงเปนกลม

รวมผเชยวชาญภาพถายตามนยของชอน แสดงใหทราบวารปแบบนเหมาะทสดส าหรบการบนทกภาพถาย

Page 36: Color theory

หรอภาพทมการเปลยนแปลงของส ความลก แสง และโทนส รปแบบ JPEG จะไมสามารถบบอดเนอทสทบ

ไดดเทาทควร แตจะใชไดดกบภาพถาย ภาพ ภาพประเภทอนๆ ตามทกลาวมาแลว ดงนนเราควรทจะใช

JPEG เฉพาะกบภาพถายและภาพในประเภททคลายคลงกนเทานน

4. โปรแกรมทใชสรางเวบไซต

โปรแกรมทเกยวของกบการสรางเวบไซตนนมอยจ านวนมากโดยแบงออกได ดงน

1. โปรแกรมทมคณสมบตเปน Text editor โดยเราจะใชโปรแกรมประเภทนส าหรบเขยน

ค าสงตางๆ หรอรายละเอยดของขอมลทเราตองการน าเสนอไปและเซฟเปนไฟลทมนามสกลเปน .html

โดยทวไปในการสรางไฟล HTML อาจจะใชโปรแกรมแบบ Text editor หรอ Wrodpad ในโปรแกรม

Window กได

2. โปรแกรมเวลดไวดเวบเบราวเซอร เปนโปรแกรมทใชส าหรบทดสอบไฟล HTML นจะ

ถกอานค าสงตางๆ และแปลความหมายของค าสงใหแสดงผลบนหนาจอ ซงในปจจบนนนนไดมโปรแกรม

เวบเบราวเซอรมากมาย เชน Netscape Communicatior , Microsoft Internet Explorer , Opera เปนตน

3. โปรแกรมสรางแฟมกราฟก เปนโปรแกรมสรางแฟมรปภาพเพอใชประกอบในเอกสาร

HTML โปรแกรมเหลาน ไดแก

- ADOBE PHOTOSHOP เปนโปรแกรมทไวใชในการตดตอและตกแตงภาพและ

ยงสามารถบนทกไฟลไดหลายสกลไฟลเพอสะดวกในการน าไปประยกตใชงาน

- ADOBE ILLUSTRATOR เปนโปรแกรมไวส าหรบสรางภาพกราฟกแบบ

Vector ใชสรางรปภาพการตน สญลกษณ ภาพประกอบและอนๆอกมากมาย

- โปรแกรมสรางและออกแบบเวบเพจ เปนโปรแกรมส าหรบออกแบบโฮมเพจ

โดยตรง เชน Microsoft FrontPage, Net Opject Fusion Macromedia Dreamweaver, Macromedia Flash เปน

ตน ซงการท างานในครงนจะใชโปรแกรม Macromedia Flash เปนโปรแกรมหลกในการท า

โปรแกรมออกแบบเวบไซตในปจจบนนนมความทนสมยมากๆ ซงดไดจากเวบไซตในสมยกอนทม

ภาพกราฟกตางๆนอยมาก อาจเปนเพราะมความยงยากในการท า จนมาถงตอนนการแทรกกราฟกมนอย

มากๆ อาจเปนเพราะมความยงยากในการท า จนมาถงตอนนการท ากราฟกบนเวบไซตนนงายขนมาก

รปแบบของเวบไซตในปจจบนกมหลากหลาย มทงรปแบบธรรมดา รปแบบของภาพเคลอนไหวทเปน

ระบบมลตมเดยทเปนระบบภาพและเสยงพรอมสรรพ ซงสามารถพฒนาใหมความสมบรณแบบมากขนจน

เปนภาพยนตรไดเลย อกทงยงสามารถมระบบตอบสนองความตองการของผเขาชมเวบไซตในแบบตางๆ

ดวย และถาหากเราชนชอบเวบไซตทมสสนหรอวาภาพเคลอนไหวเหมอนกบภาพยนตร โปรแกรม

Page 37: Color theory

Macromedia Flash ทใชไฟลสกล .SWF กเปนโปรแกรมทใหทางเลอกกบเราไดเปนอยางด โดยตวโปรแกรม

นนใชสรางภาพแบบ เวกเตอรและยงสนบสนน Action Scripting ซงเปนภาษาการเขยนสครปต ทเหมาะใน

เบองตนส าหรบการสรางระบบปฏบตการโตตอบอยางงายๆ รวมถงระบบน าเสนองานทมลกเลนแบบ

ภาพเคลอนไหวตางๆ โดยในเวอรชนลาสดนนเปนเวอรชน MX 2004 แฟลชสามารถทจะแสดงผลบนเวบ

เพจไดเปนอยางด ทงยงสามารถสรางโปรแกรมใหท าการตอบสนองแบบเกมและอนๆ ไดมากมาย

นอกจากนนตวโปรแกรมยงสามารถ Export งานออกมาเปนไฟล .exe ซงสามารถเปดบน Windows ไดอยาง

อสระโดยไมตองเรยกผานเบราวเซอร จงท าใหแฟลชไดไดรบความนยมอยางสง

5. สรปสงส าคญในการออกแบบและจดท าเวบไซต

1. เนอหาบนเวบไซต ควรมการสรางขอความทเขาใจใหนาตดตามเปนหวขอ เพอชกชวน

และในการถายทอดเนอหาภายในตองเปนเนอหาทนาอานมการน าเสนอทไมนาเบอ รวมทงตองสอดคลอง

กบรปแบบของเวบไซตดวย

2. โครงสรางภายในเวบไซต ควรมการแบงหวขอตางๆทแจงในเนอหาใหออกมาเปน

หมวดหมเพองายตอการคนหา

3. การก าหนดพนทส าหรบการออกแบบ โดยทวไปขนาดของจอคอมพวเตอรจะมการ

แสดงผลทแตกตางกน ซงความละเอยดนนจะมตงแต 600 x 480 , 800 x 600 , 1024 x 768 พกเซลหรอ

มากกวานน แตทเหนโดยทวไปจะเปน 800 x 600 กบ 1024 x 768 พกเซล ฉะนนการออกแบบเราควร

ค านงถงเรองนดวย

4. การใชตวอกษร เราควรหลกเลยงการใชตวอกษรหลายๆแบบ เพราะจะท าใหดแลวไม

เปนอนหนงอนเดยวกน และควรจะระวงการใชตวอกษรแปลกๆ ดวย เพราะคอมพวเตอรบางเครองอาจไมม

ตวอกษรแบบนน

5. การใชกราฟกและระบบมลตมเดย ในการใชควรขนอยกบเรองราวแนวความคดและ

เนอหาภายในเวบไซตวาเปนอยางไร การน าเสนอกควรจะครอบคลมอยในเรองนนๆ จากหลกการในการ

ออกแบบและจดท าเวบไซตผศกษาไดน ามาใชเพอเปนแนวทางในการออกแบบ โดยแบงออกเปนแตละสวน

คอ จะมการวางโครงสรางและระบบการน าทางภายในเวบไซตใหมลกษณะในแนวทางเดยวกน คอจะม

ลกษณะการวางต าแหนงของเมนในหนาตางๆ ใหเหมอนกน และมการแบงหวขอของขอมลออกเปน

หมวดหมอยางชดเจน การใชตวอกษรจะเนนทความอานงาย รวมถงในสวนหวขอหลกๆ จะใชแบบตวอกษร

ทใหความรสกถงความเปน ROCK ในเอกลกษณความเปน SIGNATURE เปน FONT แบบ FREEHAND

และในสวนของพนทส าหรบการออกแบบหรอพนททแสดงผลภายในเวบไซตนน จะก าหนดใหหนา

Page 38: Color theory

โฮมเพจมลกษณะการแสดงผลแบบ 100% ซงเมอดทขนาดของจอคอมพวเตอรตางๆ ทมการแสดงผลท

แตกตางกนนนกจะท าใหไดขนาดของภาพในลกษณะพอดกบภาพทตองการ และในสวนของจอน าเสนอใน

สวนของหนาเนอหาของขอมลนน จะน าเสนอในรปแบบของเวบไซตหนาเดยว โดยก าหนดขนาดท 1024 x

768 พกเซล และจากขอดของโปรแกรมแฟลช ซงโปรแกรมแฟลชจะใชกราฟกแบบเวกเตอร ดงนนในสวน

ของภาพประกอบตางๆภายในเวบไซตนน จะใชเปนลกษณะของภาพกราฟกแบบเวกเตอรเปนสวนใหญ ซง

กจะเปนผลดท าใหขนาดของไฟลเลกกวา การใชภาพบตแมพรวมถงยงสามารถท ารปแบบของ

ภาพเคลอนไหวและเสยงได ท าใหเวบไซตมความนาสนใจมากยงขน

(อนนสารบญของออมนะ สวนของเจยวใหแพททานะเพราะเจยวไมรวาเอามาจาก

ไหนอะ) เอกสารอางอง

นตยา บญรตน. การพฒนาเวบไซตหองสมดโรงเรยนเตรยมอดมศกษาภาคใต จงหวดนครศรธรรมราช. มหาวทยาลยศรนครนทรวโรฒ.2553