ช

โครงการ การพฒนาสออเลกทรอนกสเพอสงเสรมการพฒนาเวบไซต เรอง การละเลนพนบานของไทยสมยอดต

นางสาวจราวรรณ ศรเสนา

รายงานนเปนสวนหนงของการศกษาวชาโครงการหลกสตรประกาศนยบตรวชาชพ

สาขาคอมพวเตอรธรกจ คณะเทคโนโลยสารสนเทศ โรงเรยนพายพเทคโนโลยและบรหารธรกจ

ปการศกษา 2554 กตตกรรมประกาศ

ช

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

นางสาวจราวรรณ ศรเสนา

ผจดท า

ชอโครงการ เวบไซต การละเลนพนบานของไทยสมยอดต ผเขยน นางสาวจราวรรณ ศรเสนา สาขา คอมพวเตอรธรกจธรกจ

ช

คณะ เทคโนโลยสารสนเทศ ปการศกษา 2554

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

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

ช

สารบญ เรอง หนา บทคดยอ ง กตตกรรมประกาศ จ สารบญ ฉ สารบญ(ตอ) ช สารบญตาราง ซ สารบญรปภาพ ฌ สารบญรปภาพ(ตอ) ญ แบบเสนอเคาโครงของการศกษาโครงการ 1 บทท 1 บทน า

1.1 หลกการและเหตผล 5 1.2 วตถประสงคของโครงการ 6 1.3 ผลทคาดวาจะไดรบ 6 1.4 ขนตอนและวธด าเนนงาน 6 1.5 ระยะเวลาด าเนนงาน 7 1.6 ขอบเขตของโครงการ 7 1.7 เครองมอและอปกรณ 8 1.8 สถานทในการด าเนนงาน 8

บทท 2 ทฤษฎและเนอหาทเกยวของ

2.1 ทฤษฏเกยวกบโปรแกรม Dreamweaver cs3 9 2.1 ทฤษฎการสรางเทมเพลต (Template) 20 2.2 ทฤษฎสกบการออกแบบ 27 2.3 ทฤษฏการออกแบบพนฐานและการออกแบบเวบไซต 29

ช

สารบญ(ตอ)

เรอง หนา บทท 3 การออกแบบและพฒนาโปรแกรม

3.1 การออกแบบหนาจอหลกของระบบ 35 3.2 การออกแบบหนาจอแสดงผลเนอหาเวบไซต 36

บทท 4 การพฒนาระบบ 4.1 หลกในการพฒนาโปรแกรม 42 4.2 เครองมอทใชในการพฒนาโปรแกรม 43

บทท 5 สรปผลการด าเนนโครงการ 5.1 การประเมน 44 5.2 สรปผลการศกษา 45 5.3 ปญหาอปสรรค และขอจ ากดของระบบ 46 5.4 ขอแนะน า 46

เอกสารอางอง 46 ภาคผนวก 48 ภาคผนวก ก คมอการตดตงโปรแกรม Dreamweaver 8 49 ภาคผนวก ข คมอการใชงานเวบไซต 53 ภาคผนวก ค แบบประเมนความพงพอใจตอการเขาใชเวบไซต 55

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

ฌ

สารบญตาราง

ตารางท หนา 5.1 แสดงรายละเอยดแบบประเมนผลโครงการทางสถต 31

ฌ

สารบญรปภาพ ภาพท หนา

2.1 แสดงการออกแบบหนาเวบไซต 34 2.2 แสดงการตงชอเวบไซต 1 2.3 แสดงขนตอนตอไปของการตงชอเวบไซต 1 2.4 แสดงการก าหนดโฟลเดอรส าหรบเกบเวบไซต 1 2.5 แสดงการคลกเลอกโฟลเดอรทจะเกบเวบไซต 1 2.6 แสดงขนตอนสดทายในการเลอกโฟลเดอรทจะเกบเวบไซต 1 2.7 แสดงการ Save As Template 25 2.8 แสดงหนาเทมเพลตทเสรจเรยบรอยแลว 26 2.9 แสดงการบนทกเทมเพลต 25 2.10 การเปดหนาเทมเพลต 26 2.11 ภาพแสดงวงจรส 28 3.1 แสดงหนาจอหลกของเวบไซตการละเลนพนบานไทยสมยอดต 34 3.2 แสดงหนาจอแสดงผลเนอหาเมน 34 3.6 แสดงหนาจอแสดงผลเนอหาเมนอลบมรปภาพ 35

สารบญรปภาพ(ตอ)

ภาพท หนา ก.1 ไอคอน Setup โปรแกรม 48 ก.2 หนาตางตกลงสทธการใชงาน (License Agreement) 49 ก.3 เลอกไดเรกทอรทตองการ 51 ก.4 เลอกชนดของโปรแกรมทจะใชรวมกบ Dreamweaver 9 ก.5 การ Install เพอตดตงโปรแกรม 50 ก.6 การเรมตดตงโปรแกรมลงเครอง 49 ก.7 การตดตงเสรจสมบรณ 51 ข.1 การใชงานหนาหลกของเวบไซต 53 ข.2 การใชงานหนาเนอหาตางๆ 53 ข.3 การใชงานเมนยอย 53 ค.1 แบบประเมนความพงพอใจตอการเขาใชเวบไซต 54 ค. 2 ประวตผจดท า 55

บทท 1 บทน า

1.1 หลกการและเหตผล

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

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

1.2 วตถประสงค

1.2.1 เพออนรกษการละเลนพนบานของไทยสมยอดต 1.2.2 ในเพอศกษาการวธการละเลนตางๆทถกวธ 1.2.3 เพอฝกวนยและการเคารพตอกตกา 1.2.4 เพอฝกความสงเกต ไหวพรบ และการใชเชาวนปญญา

1.3 ผลทคาดวาจะไดรบ

1.3.1 อนรกษกฬาพนเมองไทยบางชนดเหลออยแตชอ 1.3.2 เพอสงเสรมการละเลนออกก าลงกาย 1.3.3 สงเสรมวธการเลนกฬาพนเมองไทยทยงพอมเลนอยปจจบน 1.3.4 สบสานการละเลนของทกภาคทงภาคเหนอ ภาคกลาง ภาคตะวนออก ภาคตะวนออกเฉยงเหนอ และภาคใต 1.3.5 แนะน าแตละรปแบบ มวธการเลนทแตกตางกน

1.4 ขนตอนและวธการด าเนนงาน

1.4.1 เสนอโครงรางของการศกษาโครงการ 1.4.2 วางแผนและออกแบบโครงรางของขอมลเพอน าเสนอบนเวบไซต

- เกบรวบรวมขอมล - วเคราะหขอมลเพอน าเสนอบนเวบไซต

1.4.3 ออกแบบและเขยนแผนผงของเวบไซต - จดรปแบบของขอมล - เขยนรปแบบของเวบไซตอยางงาย

1.4.4 จดท าเวบไซต 1.4.5 ตรวจสอบและพฒนาเวบไซต 1.4.6 จดท าคมอประกอบการใชเวบไซต

1.4.7 น าเสนอผลงานการคนควาอสระ

1.5 ระยะเวลาด าเนนงาน

1.6 ขอบเขตของโครงงาน

1.6.1 เวบไซตสามารถใหขอมลและรายละเอยดตาง ๆ ของเวบไซต การละเลนพนบานของไทยสมยอดตได 1.6.2 เปนการประชาสมพนธเวบไซตอกชองทางหนง ในรปแบบการออนไลน

การด าเนนการ

ระยะเวลาปฏบตงาน ก.ค. 52

ส.ค. 52

ก.ย. 52

ต.ค. 52

พ.ย. 52

ธ.ค. 52

ม.ค. 53

ก.พ. 53

1. จดท าแบบเสนอโครงรางของการศกษาโครงการ

2. วางแผนและออกแบบโครงรางของขอมลเพอน าเสนอ บนเวบไซต

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

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

1.7 เครองมอและอปกรณ

1.7.1 ดานฮารดแวร (Hardware) 1. เครองคอมพวเตอรจ านวน 1 เครอง

- CPU Intel Core 2 Duo 2.10 GHz - RAM DDRII 2 GB - Hard Disk 320 GB

2. Flash Drive Kingston 4 GB

1.7.2 ดานซอฟแวร (Software) 1. ระบบปฏบตการ Microsoft Windows Vista 2. โปรแกรม Adobe Photoshop CS3 3. โปรแกรม Adobe Dreamweaver 8 4. โปรแกรม Adobe Illustrator CS3 5. โปรแกรม Micromedia Flash

1.8 สถานท

1.8.1 โรงเรยนพายพเทคโนโลยและบรหารธรกจ กม.ท 4 ถ.เชยงใหม – แมโจ 262 หม 6 ต. หนองจอม อ. สนทราย จ. เชยงใหม

1.8.2 4/1 ถ.สนามกฬา ต.ศรภม อ.เมอง จ.เชยงใหม 50200

บทท 2

ทฤษฎและเอกสารทเกยวของ

สวนประกอบของ Dreamweaver • แถบค าสง (Menu Bar) เปนแถบทใชเกบค าสงทงหมดของโปรแกรม • แถบค าเครองมอ (Toolbar) รวบรวมปมค าสงทใชงานบอย • แถบวตถ (Object Palette) เปนกลมเครองมอตางๆ ทใชในการควบคมวตถ บนชนงาน เอกสารเวบ เชน เสนกราฟก (Horizontal Rule), ตาราง, รปภาพ, เลเยอร (Layer) • แถบแสดงสถานะ (Status Bar) • แถบควบคมการท างาน (Properties Palette) เปนรายการทปรบเปลยนได ตามลกษณะการเลอกขอมล เชน หากมการเลอกทจะพมพ หรอแกไขเนอหา รายการกจะเปน สวนท างานทเกยวกบอกษร, การจดพารากราฟ ถาเลอกทรปภาพ รายการในแถบน กจะเปนค าสงตางๆ ทเกยวกบ การควบคมเรองรปภาพ

• สวนของ Panel Group เปนกลมของแถบเครองมอทสามารถเรยกใชงานไดอยางรวดเรว เพอใหงายในการสราง Application บนอนเทอรเนต เชน การแทรก Code ของ JavaScript และ VBScript ลงในเวบเพจไดอยางงายๆ โดยสามารถเรยกใชงานไดจาก Panel Group

Training Service (ICT Center)เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3

สวนประกอบตางๆ ของหนาจอ Dreamweaver Menu Bar Object Bar Status Bar Properties Panel Group Tool Barหนาจอแสดงผลแสดงสวนประกอบของ Dreamweaver

หนาจอแสดงผล (Document Windows)

หนาตางการท างานของ Dreamweaver สามารถเลอกหนาตางการท างานได 3 รปแบบ โดยการคลกไอคอนทอยในแถบเครองมอ Toolbar ดงน Show Code View เปนหนาตางทใหแสดงเฉพาะโคด HTML ของหนาเวบเพจท ก าลงท างาน Show Code and Design View เปนหนาตางทแสดงทงโคด HTML และหนาเวบเพจทก าลงท างาน Show Design View ใหแสดงแตหนาเวบเพจไมตองแสดงโคด HTML

Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การเรมก าหนดโครงรางของเวบ

กอนด าเนนการสรางเวบเพจ ขนแรกควรก าหนดใหขอมลตางๆ ทเกยวของอยใน Folder เดยวกน เพองายตอคนหาและจดเกบ ตวอยางเชนท าเวบเพจของหนวยงานกอนอนเราควรสราง Folder ชอของหนวยงานกอนอาจเปนภาษาองกฤษหรอภาษาไทยกได แลวใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder ยอย เพอใชส าหรบแยกเกบไฟลตาง ๆ เปนหมวดหม เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 แสดงการสราง Folder และ Folder ยอย เพอใชเกบขอมลใหเปนหมวดหม จากตวอยาง จะท าการสราง Folder ตาง ๆ ดงน Computer

Folder ยอยเรมตนสรางเวบไซต

หลงจากทสราง Folder เพอใชเกบขอมลแลว ขนตอไปคอการสรางเวบไซต โดยการก าหนด Site Manager ใหกบเอกสาร โดยมหลกการสรางดงน 1. เลอก เมน Site > เลอกค าสง New Site 2. เลอกแทบ Advanced

เรมตนสรางเวบไซต

หลงจากทสราง Folder เพอใชเกบขอมลแลว ขนตอไปคอการสรางเวบไซต โดยการก าหนด Site Manager ใหกบเอกสาร โดยมหลกการสรางดงน เลอก เมน Site > เลอกค าสง New Site

Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การตงคาเพอใหอานภาษาไทยได

หลงจากทท าการตดตงโปรแกรม Dreamweaver แลว โปรแกรมจะไมรจก Font ภาษาไทย เนองจาก Dreamweaver ไมสนบสนนภาษาไทย ดงนนเราตองตดตง Font ภาษาไทยกอน ซงสามารถ Download ไดท http://www.thaiware.com/softwae/develop/DV00250.htm ซงเปนโปรแกรมทถกพฒนาจากคนไทย เมอ Download ไดแลวใหท าการตดตงเพมเตม เพอใหโปรแกรมสามารถอานภาษาไทยได หลงจากตดตง Font ภาษาไทยลงเครองแลว เมอเปดโปรแกรม Dreamweaver มาใชงานใหเลอกค าสงดงน เพอตง Font ใหมใหเอกสาร

1. เลอกเมน Edit > เลอกค าสง Preferences 2. เลอก Fonts > Font Setting > เลอก Thai Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 ตอบ OK การเพม Font เพอใชงาน

เราสามารถเพม Font เพอใชงานได โดยการน า Font จาก Windows มาใชงาน Dreamweaver โดยเลอกค าสงดงน 1. Text > Font > Edit Font List Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การก าหนดรายละเอยดของหนาเวบเพจ กอนเรมก าหนดรายละเอยดตางๆ ใหหนาเวบ เราควรเรมโดยการก าหนดรายละเอยดของหนา เวบกอน โดยมขนตอนดงน 1. เลอกเมน Modify > Page Properties 2. ปรบเปล Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การสราง Table การใชตารางเหมาะส าหรบการน าเสนอขอมลจ านวนมาก เพอความสะดวกในการจดการขอมลและความเปนสดสวน ควรจดระบบการน าเสนอขอมลของหนาเวบเพจโดยการใชตารางเปนตวจดการในการจดวางขอมลในแตละหนาเวบเพจ กอนอนเรามาท าความรจกกบสวนประกอบของตารางกอน Column Row รปแสดงสวนประกอบของตาราง ขนตอนการสรางตารางสามารถท าไดโดยเลอก Object ทแทบ Object แลวก าหนดคา ตาง ๆ ของ ตารางดงรป Rows > จ านวนแถวทตองการ Column > จ านวนคอลมนทตองการ Width > ความกวางของตาราง Border > ความหนาของขอบตาราง Cell Padding >ระยะระหวางขอความกบขอบตาราง Cell Cell Spacing > ระยะระหวางแตละเซลลในตาราง เมอก าหนดขอมลเสรจแลว Click ปม OK จะไดขอมลตารางตามทก าหนด Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3

การก าหนดขนาดของเซลล 1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอกตารางไวกอนแลว) ให Click ท Properties เพอก าหนดขนาดของเซลล ดงรป การเลอกเซลล และ การก าหนดสพน 1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอกตารางไวกอนแลว) 2. ให Click ท Properties เพอก าหนดส โดยเลอกท BG แลวก าหนดเลอกส (ใหเลอกสเขยว) หรอสามารถพมพรหสสได Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การผสานเซลล (Marge Cell) 1. ให Click เลอกเซลลทตองการ ผสาน 2. Click Properties แลวเลอก เพอก าหนดการผสานเซลล ดงรป การแทรกรปภาพลงตาราง 1. ให Click เลอกเซลลทตองการแทกรป 2. เลอกเมน Insert > image ดงรป เลอกหาทเกบของรป แลวเลอกรปทตองการแทรกลงตาราง ดงรป Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 ตอบ OK รปท แสดงทเกบของรปภาพและการเลอกรปลงเวบเพจ การแทรกแถวและคอลมน การแทรกแถว 1. น าเคอรเซอรไปวางยงต าแหนงทตองการจะแทรกแถว 2. Click Mouse ปมขวาจะปรากฎเมนยอย ใหเลอก Table > Insert Rows or Columns.. 3. จะม Dialog Box ใหก าหนดรปแบบของการแทรกตารางวา จะเลอกแทรก Rows หรอ Column (ใหแทรก Rows จ านวน 2 Rows) 4. ก าหนดการแทรก Rows ใหแทรกกอน (Above the Selection) หรอหลง (Before the Selection) ได 5. ในกรณทตองแทรก Column จะมใหแทกกอน (Before current Column) หรอหลง (After current Column)

Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 แสดงขนตอนการแทรกแถวและคอลมน แสดงการแทรก Column หลงจากแทรก Rows จ านวน 2 Rows หนาจอทไดแสดงดงรป Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การพมพขอความและการก าหนดตวอกษร การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอใหสามารถอานไดงาย และเราสามารถจดรปแบบและขนาดตวอกษรไดโดยใหเลอกขอความทตองการปรบแตง และแกไขคาตาง ๆ ไดทหนาตาง Properties โดยมรายละเอยดดงน • Format เปนรปแบบตวอกษรส าเรจทเราน ามาก าหนดใหกบขอความได • Font รปแบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมในเครอง PCและเครอง MAC • Size ขนาดของตวอกษร ขนาดมาตรฐานทก าหนดไวคอ 3 • Color ก าหนดสใหตวอกษร การเชอมโยง (Link) การเชอมโยงบนเวบเพจมดวยกนหลายรปแบบ อาจแบงตามการใชงาน หรอตามลกษณะของการเชอมโยงภายในเวบเพจ และการเชอมโยงภายนอกเวบเพจ แตถาแบงตามวตถประสงคของรปแบบการใชงานจะแบงการเชอมโยงเวบเพจ ออกเปนดงน การเชอมโยงภายในเวบเพจเดยวกน การเชอมโยงภายในไซตเดยวกน การเชอมโยงไปยงเวบไซตอน 1. การเชอมโยงดวย e-Mail 2. การเชอมโยงไปยงไฟล Download 3. การเชอมโยงดวย Map Link Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 การท าลงคเชอมไฟล

การท าลงคเชอมไฟล สามารถท าไดหลายฟอรแมต ทงไฟลสกล HTML และอนๆ โดยไฟลอนๆ จะท างานในลกษณะ Download ไฟล 1. ท าแถบสคลมขอความทใชเปนจดลงค 2. สงเกตทแถบ Properties จะเหนรายการ Link .. พมพชอไฟลทตองการใหลงค ชอไฟลอาจจะเปนไฟล .html หรอ ไฟลใดๆ กได โดยจะตองระบ "นามสกล" ของไฟลดวยเสมอ (หมาย เหต ระวงเรองพมพชอไฟลตวพมพใหญ ตวพมพเลก ถอวาเปนคนละตวกน) สามารถใชปมสญลกษณรปแฟมสเหลอง เลอกไฟลได เมอก าหนดชอไฟลทตองการลงคจากรายการ Link เรยบรอยแลว ใหน าเมาสมาคลกในพนทท างาน เพอยนยนการก าหนดลงค การยกเลกลงค 1. ใหคลกเมาส ณ จดลงคเดม 2. ลบรายชอไฟลออกจากรายการ Link การท าลงค 1. ท าแถบสคลมขอความทตองการ 2. สงเกตทแถบ Properties จะเหนรายการ Link 3. พมพค าบงคบในการท าจดลงคเพอสงเมลคอ mailto: แลวตามดวย E-Mail Address ของผจดท าเอกสารเวบ (หมายเหต ระวงเรองพมพชอไฟลตวพมพใหญ ตวพมพเลก ถอวาเปนคนละตวกน และใหพมพตดกนทงหมด) ตวอยาง ตองการท าลงคเพอใหสงเมลไปยง http://ictcenter.spu.ac.thใหระบคาดงน เลอกขอความทจะลงค Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 รปแสดงการเชอมโยงกบ e-Mail การท าจดลงคเรยกเวบไซตอน ใชหลกการเดยวกบการท าลงคเชอมไฟล แตใหระบดวยค าบงคบ คอ http://ชอเวบ ทงนสามารถระบ Target =_blank เพอเปดหนาตางใหมในการแสดงผล Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 เทมเพลตคออะไร

เทมเพลตใน Dreamweaver จะชวยอ านวนความสะดวกในการสราง และการพฒนาเวบเพจโดยจะก าหนดสวนทคงทในแตละหนาของเวบเพจ โดยทเราจะแกไขเฉพาะเนอหาของเพจทมการเปลยนแปลงเทานน การสรางเทมเพลตจากหนาเวบทออกแบบไวแลว 1. เลอกค าสง File > Save as Template เพอ save file หนาเวบเพจทเราไดออกแบบไวเปนไฟลเทมเพลต 2. ตงชอไฟลเทมเพลตในหนาตาง Save as Template แลว click ปม Save 3. เมอเปดดหนาตาง Template (เปดหนาตางนไดโดยเลอก Windows > Template) จะแสดงไฟลเทมเพลตทเราสรางเกดขน เลอกค าสง File > Save as Template เพอ save file หนาเวบเพจทเราไดออกแบบไวเปนไฟลเทมเพลต รปแสดงการเกบขอมลของเทมเพลต ตงชอไฟลเทมเพลตในหนาตาง Save as Template แลว click ปม Save เมอเปดดหนาตาง Template (เปดหนาตางนไดโดยเลอก Windows >Template) จะแสดงไฟลเทม Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 เพลตทเราสรางเกดขน การก าหนดพนททเปลยนแปลงไดในเทมเพลต 1. เปดหนาเทมเพลตเลอกเมน Insert > Template Object > Edit Region 2. ก าหนดชอเรยกพนททสามารถเปลยนแปลงได แลว click mouse ปม ok 3. ชอทตงจะปรากฎในบรเวณทสามารถเปลยนแปลงได ซงในขณะทเราเปดเทมเพลตเราจะแกไขไดทงพนททก าหนดใหเปลยนแปลงได และพนทลอคไว แตเมอใดทเราน าเทมเพลตนไปใชกบหนาเวบเพจ หนาเวบเพจนนจะแกไดเฉพาะพนททถกก าหนดไวใหเปลยนแปลงไดเทานน รปการเปลยนแปลงขอมลเทมเพลต เปดหนาเทมเพลตเลอกเมน Insert > Template Object > Edit Region รปการตงชอสวนทสามารถแกไขเทมเพลต ก าหนดชอเรยกพนททสามารถเปลยนแปลงได แลว click mouse ปม ok รปแสดงหนาจอเมอก าหนดจดทแกไขเทมเพลต ชอทตงจะปรากฎในบรเวณทสามารถเปลยนแปลงได ซงในขณะทเราเปดเทมเพลตเราจะแกไขไดทงพนททก าหนดใหเปลยนแปลงได และพนทลอคไว แตเมอใดทเราน าเทมเพลตน

Training Service (ICT Center) เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 ไปใชกบหนาเวบเพจ หนาเวบเพจนนจะแกไดเฉพาะพนททถกก าหนดไวใหเปลยนแปลงไดเทานน การน าเทมเพลตมาใชงาน 1. เปดหนาเวบเพจเปลาขนมา 2. เลอกแทบ Template เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกน ามาเพมเขาไปในหนาเวบใหม ในสวนทเปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเวบเพจในสวนทแกไขไดเทานน รปการน าเทมเพลตมาใชงาน เลอกแทบ Template Training Service (ICT Center) รปการเลอกเทมเพลตทจะน ามาใชงาน รปแสดงหนาจอเมอเปดเทมเพลตมาใชงาน เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกน ามาเพมเขาไปในหนาเวบใหม ในสวนทเปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเวบเพจในสวนทแกไขไดเทานน การปรบปรงแกไขเทมเพลต เมอใดทเราท าการแกไขเทมเพลต Dreamweaver จะถามวาเราตองการใหการเปลยนแปลงนมผลกบหนาเวบเพจอนทใชเทมเพลตนดวยหรอไม 1. เปดเทมเพลตทสรางไวแลวขนมาทจะปรบปรง 2. ท าการแกไขเทมเพลตตามความตองการ เสรจแลวท าการ Save 3. Click Mouse ปม Yes เพอปรบปรงหนาเวบเพจทใชเทมเพลตนทงหมดตามการเปลยนแปลงทเกดขน โดยในชอง Lock in ใหเราระบเพมเตมวาจะก าหนดใหปรบปรงไฟลทใชเทมเพลตในเวบไซตทเราเลอก หรอใหปรบปรงทกไฟลทใชเทมเพลตในเวบไซตทเราก าลงเปดอยนกได 4. จากนนจะมรายงานผลการ Update ไฟล Click Mouse ปม Close เพอปดหนาตางน หากในการแกไขเทมเพลตเราไมไดก าหนดใหการเปลยนแปลงนมผลกบหนาเวบเพจอน แต ตอมาภายหลงตองการใหมผล กท าไดโดยเลอกค าสง Modify > Templates > Update Pages เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 รปการ Save เทมเพลตเมอมการปรบปรงแกไข__

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 รจกกบ Dreamweaver Dreamweaver ถอไดวาเปนเครองมอส าหรบสรางเวบเพจ และ ดแลเวบไซต ทมประสทธภาพสง เปนทนยมใชของ Web Master อยางกวางขวาง ซงเปนโปรแกรมส าหรบเขยนภาษา HTML โดยเฉพาะ พรอมทงสามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมาย โดยทผใชไมจ าเปนตองรหลกภาษา HTML มากนก ซงชวยประหยดเวลา และ ท างานไดสะดวกยงขน ความสามารถของ Dreamweaver ในการเขยนเวบเพจ จะมลกษณะคลายกบการพมพงานในโปรแกรม Text Editor ทวไป คอวามนจะเรยงชดซายบนตลอดเวลา ไมสามารถยาย หรอ น าไปวางต าแหนงทตองการไดทนทเหมอนโปรแกรมกราฟก เพราะฉะนนหากเราตองการจดวางรปแบบตามทเราตองการ กใชตาราง Table เขามาชวยจดต าแหนง ซงเมอมการจดวางรปแบบทซบซอนมากขน การเขยนภาษา HTML กซบซอนยงขนเชนกน โปรแกรม Dreamweaver อาจจะไมสามารถเขยนเวบไดตามทเราตองการทงหมด วธการแกไขปญหาทดทสดคอ ควรจะเรยนรหลกการของภาษา HTML ไปดวย ซงถอวาเปนสงทจ าเปนมากส าหรบผทตองการประกอบอาชพ Webmaster แบบจรงจง อาจจะไมตองถงกบทองจ า Tag ตาง ๆ ไดทงหมด แตขอใหร เขาใจหลกการกพอแลว เพราะหลาย ๆ ครงทเราจะเขยนเวบใน Dreamweaver แลวกลบไดผลผดเพยนไป ไมตรงตามทตองการ กตองมาแกไข Code HTML เอง และความสามารถของ Dreamweaver สรปไดดงน 1. สนบสนนการท างานแบบ WYSIWYG (What You See Is What You Get) หมายความวา เวบทเราเขยนหนาจอ Dreamweaver กจะแสดงแบบเดยวกบเวบเพจจรงๆ ชวยใหเราเขยนเวบเพจงายขน ไมตองเขยน Code HTML เอง 2. มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง 3. สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java, ASP, PHP, CGI, VBScript 4. มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server เพอท าการเผยแพรงานทเราสรางในอนเทอรเนต โดยการสงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย เชน WS FTP 5. รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงานรวมกบโปรแกรม Flash , Fireworks Training Service (ICT Center) การใชงานพนฐาน (สงทควรทราบเบองตน) 1. ภาษา HTML เปนภาษาทออกแบบส าหรบการแสดงผลเทานน! ไมสามารถประมวลผล หรอ ใชเขยนเวบแอพพลเคชนได

2. หากตองการเพมลกเลน หรอ เทคนคพเศษ เชน Effect ตาง ๆ ตองน าภาษา JavaScript มาเสรม HTML อกท 3. การจดรปแบบใน Code เชนการขนบรรทดใหม การเวนวรรค ไมมผลตอการแสดงผลทาง Web Browser 4. การขนบรรทดใหม ตองใช Tag <BR> หรอ กดปม Shift+Enter 5. การขนยอหนาใหม ตองใช Tag <P> หรอ กดปม Enter 6. การเวนวรรค ตองใช Tag พเศษ คอ &nbsp; หรอ กดปม Ctrl+ Shift + Spacebar 7. หลกการอาน Tag ของภาษา HTML จะอานคาจาก Tag ทอยดานในกอน 8. ไฟล HTML และ Script ตางๆ สามารถเปดแกไขในโปรแกรม Text Editor ทว ๆ ไป ไมจ าเปนตองแกไขใน Dreamweaver เพยงอยางเดยว การแทรกขอความ และ การปรบแตงคาตาง ๆ ใหคลกต าแหนงทตองการ แลวพมพขอความตามตองการ หรอใหเลอกขอความเมอตองการก าหนดคาตาง ๆ เพมเตม การเรมตนใชงาน Dreamweaver หลงจากทท าการตดตง Dreamweaver เรยบรอยแลว กสามารถเรยกใชงานโปรแกรมดวยวธการตอไปน 1. Click Mouse ทปม 2. เลอกค าสง All Program > เลอกตามรป Training Service

2.1 ทฤษฏการสราง Template Template ของโปรแกรม Dream weaver ท าใหสามารถแบงรปแบบของเอกสารนน ๆ ออกเปนสองสวน คอ สวนทแกไขได (Editable Regions) และสวนทแกไขไมได (Non-Editable Regions) เอกสารทสรางจาก Template เดยวกนจะมรปแบบเหมอนกนหมด การสราง Template สามารถสรางไดจากหนาเอกสารวาง ๆ หรอหนาทมขอมลอยแลว ซงรวมถงหนาเอกสารทมขอมล แบบไดนามค เชน ASP, Cold Fusion, JSP หรอ PHP กตาม 2.1.1 ขนตอนการสราง Template

1. ออกแบบหนาเวบเพจตามตองการ ก าหนดใหสวนหวและสวนเมนเปน Template 2. คลกเมน File > Save as Template

ภาพท 2.1 แสดงการออกแบบหนาเวบไซต

จากนนจะปรากฏหนาตาง Dream weaver ขนมา 3. คลกปม Edit Sites… จะปรากฏหนาตาง Site Definition ขนมา 4. พมพชอเวบไซตทตองการลงในชอง What would you like to name your site? 5. คลกปม Next เพอผานไปยงขนตอนตอไป

ภาพท 2.2 แสดงการตงชอเวบไซต

6. คลกเลอก No, I do not want to use a server technology. เนองจากเราจะสรางเวบไซตโดยจะไมใชงานอะไรเกยวของกบ Server

7. คลกปม Next

ภาพท 2.3 แสดงขนตอนตอไปของการตงชอเวบไซต

8. คลกเลอกรายการแรก นนคอ Edit local copies on my machine, then upload to server when ready (recommended) เพอเลอกทจะเกบเวบไซตทสรางไวในเครองของเรากอน เมอพรอมแลวจงจะอพโหลดขนไปยง server

9. ก าหนดโฟลเดอรส าหรบเกบเวบไซตทจะสรางขน ในชอง Where on your computer do you want to store your files?

10. คลกปม Next

ภาพท 2.4 แสดงการก าหนดโฟลเดอรส าหรบเกบเวบไซต จากนนหนาตาง Choose Remote Root Folder จะปรากฏขนมา ใหเลอกต าแหนงทตองการจะเกบไฟล

11. คลกวธการเชอมตอกบ Server ทชอง How do you connect to your remote server? โดยในตวอยางรายการ Local/Network เนองจากเชอมตออนเตอรเนตผานระบบเครอขายภายในองคกร

12. คลกปม เพอเลอกโฟลเดอรทางฝง Server ทจะอพโหลดไฟลขนไปเกบไวในชอง what folder on your server do you want to store your files in? คลกเลอกโฟลเดอรทจะเกบไฟล คลกปม Select

ภาพท 2.5 แสดงการคลกเลอกโฟลเดอรทจะเกบเวบไซต

13. คลกเลอก No, do not enable check in and check out. 14. คลกปม Next 15. คลกปม Done

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

16. คลกปม Cancel เพอปดหนาตาง Save As Template ทปรากฏขนมากอน

ภาพท 2.7 แสดงการ Save As Template

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

1. คลกรปภาพทตองการจะก าหนดใหสามารถแกไขได 2. คลกรปภาพ Insert > Template Objects > Editable Region หรอ Ctrl+Alt+V จะ

ปรากฏหนาตาง New Editable Region ขนมา 3. พมพชอของสวนทตองการใหแกไขไดทชอง Name จากตวอยางพมพวา

EditPicture01 คลกปม OK

ภาพท 2.8 แสดงขนตอนการแกไขชอ

4. สงเกตทรปภาพ จะมขอความวา EditPicture01 แสดงอย

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

ภาพท 2.9 แสดงหนาเทมเพลตทเสรจเรยบรอยแลว 2.1.3 การบนทก Template ในกรณทตองการบนทกหนาเทมเพลตทสรางขน ใหท าตามขนตอนดงแสดงตอไปน

1. คลกเมน File > Save As Template… เพอบนทกหนาเวบเพจ จะปรากฏหนาตาง Save As Template ขนมา

2. ก าหนดชอเทมเพลตทสรางขน ในชอง Save As: 3. คลกปม Save

ภาพท 2.10 แสดงการบนทก เทมเพลต

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

1. คลกเมน File > New จะปรากฏหนาตาง New From Template ขนมา 2. คลกแทบ Templates 3. คลกเลอกไฟลเทมเพลตทตองการ 4. คลกปม Create

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

สวนทสามารถแกไขไดสญลกษณของเมาสจะแสดงเปนรปเคอรเซอร และสวนทไมสามารถแกไขขอมลไดนนสญลกษณเมาสจะไมแสดงเครองหมายเคอรเซอรขนมา ดงรปดานลาง

ภาพท 2.11 การเปดหนาเทมเพลต

2.2 ทฤษฏสกบการออกแบบ

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

2.2.1 การใชสกลมกลนกน

การใชสใหกลมกลนกน เปนการใชสหรอน าหนกของสใหใกลเคยงกน หรอคลายคลงกน เชน การใชสแบบเอกรงค เปนการใชสสเดยวทมน าหนกออนแกหลายล าดบ การใชสขางเคยง เปนการใชสทเคยงกน 2 – 3 ส ในวงส เชน สแดง สสมแดง และสมวงแดง การใชสใกลเคยง เปนการใชสทอยเรยงกนในวงสไมเกน 5 ส ตลอดจนการใชสวรรณะรอนและวรรณะเยน (warm tone colors and cool tone colors) ดงไดกลาวมาแลว

2.2.2 การใชสตดกน สตดกนคอสทอยตรงขามกนในวงจรส (ดภาพวงจรส ดานซายมอประกอบ) การใชสใหตดกนมความจ าเปนมาก ในงานออกแบบ เพราะชวยใหเกดความนาสนใจ ในทนททพบเหน สตดกนอยางแทจรงม อยดวยกน 6 คส คอ 1. สเหลอง ตรงขามกบ สมวง 2. สสม ตรงขามกบ สน าเงน 3. สแดง ตรงขามกบ สเขยว 4. สเหลองสม ตรงขามกบ สมวงน าเงน 5. สสมแดง ตรงขามกบ น าเงนเขยว 6. สมวงแดง ตรงขามกบ สเหลองเขยว

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

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

ภาพท 2.12 ภาพแสดงวงจรส

2.3 ทฤษฏการออกแบบพนฐานและการออกแบบเวบไซต

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

2.3.1 วธการออกแบบ

1. การออกแบบทเปนไปตามธรรมชาต (Natural Design) นกออกแบบอาจจะไดแรงบนดาลใจในการออกแบบผลงานจากสงทเหนไดในธรรมชาต เชน ดอกไม ใบไม คน สตว ทวทศน น าสงทเหนนนมาจดองคประกอบ (Composition) และอาจตกแตงเพมเตมตามความเหมาะสมใหงานชนนนสวยงามสมบรณ 2. การออกแบบเรขาคณต (Geometrical Design) คอ การออกแบบโดยใชรปทรงเรขาคณตเชน สามเหลยม สเหลยม วงกลม เปนตน มาประกอบกนเปนรปรางตางๆ ตามตองการ 3. การออกแบบนามธรรม (Abstract Design) คอ การออกแบบทไมแสดงเนอหาแตมงเนนความสวยงาม และความรสกของผด อาจไดแรงดลใจ ไดความคดจากธรรมชาตกได เปนการออกแบบทท าไดหลายแงมม หลากหลายความคด 4. การออกแบบตกแตง (Decorative Design) คอ การออกแบบตกแตงใหดสวยงามนาชม ไมวาจะเปนการออกแบบตกแตงอาคารรานคา ออกแบบตกแตงสภาพแวดลอม ออกแบบลายผา เครองประดบ เปนตน 5. การออกแบบคตก าหนด (Conventional Design) คอ การออกแบบโดยก าหนดขนเองวาสงนแทนสงนนทผออกแบบตองการ ซงความจรงอาจไมมอย สงทออกแบบอาจจะไดความคด

จากธรรมชาต แตมงตกแตงเพมเตมใหความสวยงาม และเปนไปตามความตองการ เชนพระพทธรป อนประกอบดวยศลปะและอดมคต สรางขนตามความคดเกยวกบรปรางทสมบรณทเรยกวา “มหาบรษลกษณะ” ศลปกรรมสมยคลาสสคของกรกกเชนกน เปนการผสมผสานลกษณะของคนจรงๆ ความเปนศลปะ และอดมคตเขาดวยกน ซงจะไมพบเหนคนทรปรางอยางนน 6. การออกแบบกระจายลวดลาย (All over Design) เปนการออกแบบตามใจชอบ อาจจะมลายทซ าหรอไมซ ากน การออกแบบประเภทนมงเนนเรองชวงระยะ (Space) เปนส าคญ 7. การออกแบบลวดลายซ ากน (Repeated Design) หมายถง การออกแบบทมลวดลายซ าๆกน เชน ลายผา ลายถวยชาม ซงจะมลายซ าเรยงล าดบอยางสวยงาม เปนจงหวะโดยเวนชองวางทเทากนพองาม

2.3.2 หลกการออกแบบเวบไซต

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

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

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

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

2. รปแบบโครงสรางของหนาเวบ รปแบบโครงสรางหนาเวบทเราเหนกนอยทวไปนน มหลากหลายรปแบบซงสามารถแบงกลมไดตามโครงสราง ซงมทพบบอย ๆ อย 4 ประเภท ไดแก - โครงสรางหนาเวบในแนวตง ถอเปนโครงสรางทไดรบความนยมมากทสดเพราะเปนรปแบบทงายในการพฒนา และมขอจ ากดนอยทสดเมอเทยบกบรปแบบอน ไมวาคณจะมเนอหามากหรอนอย มระบบเนวเกชนอยดานบนหรอดานขาง ตางกใชรปแบบแนวตงทงสน เมอใดทหนาเวบมความยาวมากกวาพนทหนาจอ บราวเซอรกจะแสดงสโครลบารขนทขอบดานขวาของหนาตางบราวเซอร ซงสโครลบารในแนวตงทเกดขนนเปนสงทผใชสวนใหญเขาใจ และใชงานไดโดยไมมปญหา - โครงสรางหนาเวบในแนวนอน ตองอาศยความคดสรางสรรคและความพยายามมากกวาปกต ผออกแบบมขอจ ากดและสงทตองระวงคอนขางมาก เพราะเปนการใชประโยชนของพนทในแนวนอนอยางเตมท ปญหาแรกทจะพบคอความกวางของหนาจอทไมแนนอน เนองจากความละเอยดของมอนเตอรทตางกน ถาขอมลเปนตวอกษรทงหมดและมความกวางของบรรทดเตมหนาจอ กจะสรางความล าบากตอผอานทจะตองสายศรษะไปมา ถาหนานนมขอมลจ านวนมาก ผใชกตองเลอนหนาจอไปทางดานขาง ซงสรางความล าบากตอผใชเปนอยางมาก - โครงสรางหนาเวบทพอดกบหนาจอ โดยทวไปรปแบบนจะใชพนทหนาจอนอยกวาเวบทวไป และมกจะจดไวกงกลางของหนาจอ ซงจะออกแบบใหมขนาดพอดกบ หนาจอโดยไมมสโครลบารปรากฏขนมา เพราะทจะใชในการน าเสนอขอมลทมปรมาณไมมากนก ขอดของรปแบบนคอการน าเสนอทไมซบซอนและสะดวกตอการใชงาน เพราะผใชมองเหนขอมลทกสวนของหนาไดพรอมกนตลอดเวลา - โครงสรางหนาเวบแบบสรางสรรค รปแบบนเปนโครงสรางทอยเหนอกฎเกณฑใด ๆ มกมรปแบบและการจดวางองคประกอบเฉพาะตวทคณคาดไมถง ซงเปนทนยมในเวบไซตของศลปน, นกออกแบบ, บรษทโฆษณา หรอผทท างานเกยวของกบความคดสรางสรรคเพราะสามารถใชเวบไซตของตวเอง ในการสอในการแสดงถงฝมอและความสามารถในการออกแบบอยางสรางสรรค

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

- สวนหวของหนา (Page Header) ถอเปนบรเวณทส าคญทสดของหนา เพราะเปนสวนทจะดงดดผใชใหตดตามเนอหาทเหลอภายในหนาดงกลาว โดยปกตสวนหวมกจะประกอบดวยชอเวบ ระบบเนวเกชน และหวขอหลกหรอชอของเนอหาในหนานนกได และไมวาทบรเวณนจะใชองคประกอบอะไรกตาม แตสงส าคญคอความสม าเสมอทจะตองมเหมอนกนในทกๆ หนาและทตองระวงคอ ถาเราใชกราฟกทมขนาดใหญ ซงตองใชเวลานานในการดาวนโหลด และไมมการแสดงสงทนาสนใจใหเหนในสวนนไปพลาง ๆ อาจจะท าไดดนาเบอ และกลายเปนการขบไลผใชใหเปลยนไปยงเวบอนได -บรเวณทส าคญคอมมซายดานบนของเวบ ซงถอเปนบรเวณทมความส าคญมากเปนพเศษ เพราะถอเปนบรเวณแรกของหนาจอทผใชจะเรมตนใหความสนใจ ดวยเหตนเวบไซตสวนใหญ จงมการจดวางโลโกหรอชอของเวบไซต ทต าแหนงน และมกจะท าเปนลงคส าหรบเชอมกลบไปยงหนาโฮมเพจอกดวย - สวนของเนอหา (Page Body) ควรจะมความกะทดรด และจดเปนระเบยบเพอใหมองเหนขอมลไดรวดเรว โดยแสดงใจความส าคญไวในสวนตน ๆ ของหนา พรอมทงมการจดรปแบบตวอกษรอยางเหมาะสม เพอท าใหเนอหาดนาสนใจ และอานไดอยางสะดวก เชน การใชขนาดประเภทของตวอกษร ทเหมาะสม การก าหนดความยาวบรรทดทไมใหยาวเกนไป จนยากตอการอาน การจดตวหนงสอใหชดขอบดานตาง ๆ อยางเปนระเบยบ สงเหลานจะชวยสรางความเชอมนตอเนอหายงขน

บทท 3

การออกแบบและพฒนาโปรแกรม

3.1. การออกแบบหนาจอหลกของระบบ

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

3

1 2

1

4

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

สวนท 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท 2 คอ สวนแสดงเมนแนะน าของเวบไซต

สวนท 3 คอ สวนทแสดงเนอหาของเวบไซต สวนท 4 คอ สวนแสดงเมนยอยของเวบไซต

3.2 การออกแบบหนาจอแสดงผลเนอหา

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

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

1

2

4

3

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

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

สวนท 2 คอ สวนแสดงเมนแนะน าเวบไซต สวนท 3 คอ สวนแสดงเมนยอยของเวบไซต

3.1.2 การออกแบบหนาจอแสดงผลเนอหาเวบไซตเวบไซต

1 2

3

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

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

สวนท 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท 2 คอ สวนแสดงเมนแนะน าเวบไซต

สวนท 3 คอ สวนแสดงเมนยอยของเวบไซต

3.1.3 การออกแบบหนาจอแสดงผลเนอหาเวบไซต

3

2 1

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

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

สวนท 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท 2 คอ สวนแสดงเมนแนะน าเวบไซต

สวนท 3 คอ สวนแสดงเมนยอยของเวบไซต

3.1.4 การออกแบบหนาจอแสดงผลเนอหาเวบไซต

1

2

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

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

สวนท 2 คอ สวนแสดงเมนแนะน าเวบไซต สวนท 3 คอ สวนแสดงเมนยอยของเวบไซต

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

3

ภาพท 3.6 แสดงหนาจอแสดงผลเนอหาเมนอลบมรปภาพ

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

สวนท 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท 2 คอ สวนแสดงเมนแนะน าเวบไซต

สวนท 3 คอ สวนแสดงเมนยอยของเวบไซต

สวนท 4 คอ สวนแสดงภาพสไลด

1

2

4

4

3

บทท 4

การพฒนาระบบ

4.1 หลกในการพฒนาโปรแกรม

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

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

1. การวเคราะหเนอหา

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

การสอสารกบผเขาชมเวบไซต

การออกแบบสวนตาง ๆ ของเวบไซต

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

ชองวางมากเกนไป

2. ก าหนดวตถประสงคโดยค านงถง

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

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

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

สามารถเขาชมได

3. ล าดบขนการน าเสนอ

การใชภาษามความเหมาะสมและเขาใจงายตอผเขาชมและยงสามารถรองรบ

ชาวตางชาตได

ขนาดของตวอกษร สของของตวอกษรสามารถอานไดงายไมท าใหผเขาชมเสย

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

4.1.2 การสรางหรอผลตเวบไซต

1. วางเคาโครงการสรางเวบไซตตามทตองการ

2. น าเคาโครงทไดออกแบบไวมาสรางหรอผลตเวบไซต

3. แสดงหนาเวบไซตของการแสดงผล

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

การลงคเนอหาตาง ๆ ภายในเวบไซตมความถกตอง และใชงานไดงาย

4.1.3 การประยกตใชงานเวบไซต

1. สามารถน าไปใชงานดานตาง ๆ ได เชน การคนควาหาความรเพมเตมเกยวกบ

การละเลนพนบานของไทยสมยอดต เปนตน

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

ขน

4.2 เครองมอทใชในการพฒนาโปรแกรม

4.2.1 โปรแกรม Macromedia Dream weaver 8 เปนอกโปรแกรมหนง ทมการออกแบบมา

เพอทจะใชในการจดการกบเอกสารทใชส าหรบการสรางเวบเพจ

4.2.2 โปรแกรม Adobe Photoshop CS3 เปนโปรแกรมทใชในการตดตอและตกแตงภาพ

หรอรปภาพทตองการ

4.2.3 โปรแกรม Adobe Illustrator CS3 เปนโปรแกรมทใชงานการตดตอและตกแตงภาพหรอ

รปภาพทตองการ มการใชงานคลายคลงกบโปรแกรม Adobe Photoshop CS3

บทท 5 การประเมนผลและสรปผลการศกษา

4.3 การประเมนผล

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

5.1.1 การประเมนผลโดยทางสถต

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

รายละเอยด เกณฑ การประเมน

5 4 3 2 1 1. เวบไซตมความสวยงามและนาสนใจ 10% 30% 20% 15% 20% 2. เวบไซตมความงายตอการเขาใชงาน 20% 10% 10% 10% 20% 3. เวบไซตมประโยชนส าหรบบคคลทวไปรวมไป

ถงนกทองเทยวทงชาวไทยและชาวตางชาต 10% 30% 10% 20% 10%

4. เวบไซตมประโยชนตอสถานประกอบการ 20% 10% 30% 10% 30% 5. เนอหาในเวบไซตมความเหมาะสม 30% 20% 30% 20% 30%

5 = ดมาก 4 = ด 3 = ปานกลาง 2 = พอใช 1 = ปรบปรง ตารางท 5.1 แสดงรายละเอยดแบบประเมนผลโครงการทางสถต

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

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

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

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

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

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

5.1.2 การสงเกต

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

1. ผเขาชมเวบไซตมความสนใจและเพลดเพลนในการเขาชมและใชงานเวบไซต

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

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

5.2 สรปผลการศกษา

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

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

5.3 ปญหาอปสรรค และขอจ ากดของระบบ

5.3.1 ผจดท าไมมความช านาญและความสามารถในการท าเวบไซต

5.3.2 ผจดท าขาดความรทางดานการใชโปรแกรมในการท าเวบไซตรวมไปถงโปรแกรม

ตกแตงรปภาพ และโปรแกรมตดตอ

5.3.3 มการแสดงผลทผดพลาดจากทไดออกแบบไว

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

การใชงาน

5.4 ขอเสนอแนะ

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

5.4.2 เวบไซตควรจะมฐานขอมล

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

บรรณานกรม

David Morris.สรางเวบสวยดวย Flash 8. แปลโดย ไพโรจน เวชชพพฒน. พมพครงท 1. กรงเทพฯ: ส.เอเซยเพลส, 2549.

Nolan Hester. เวบดวนเสรจทนใจดวย Dream weaver 8. แปลโดย ไพฑรย ประมวลชยกล. พมพครงท 1. กรงเทพฯ: ส.เอเซยเพลส, 2549.

เวบไซตการละเลนพนบานของไทย

หนงสอการละเลนของไทยสมยอดต

ภาคผนวก

ภาคผนวก ก คมอการตดตงโปรแกรม Dream weaver 8

การตดตงโปรแกรม Dreamweaver 8 Macromedia Dreamweaver 8 เปนอกโปรแกรมหนง ทมการออกแบบ มาเพอทจะใชในการจดการกบเอกสารทใชส าหรบ การสรางเวบเพจ ซงในสมยกอนหากจะม การสรางเวบเพจ ขนแตละเวบเพจนน ตองใหผทมความรในภาษา HTML มาเขยนรหสค าสง (Code) ให แตในปจจบน โปรแกรม Macromedia Dreamweaver 8 สามารถทจะสรางรหสค าสงใหกบผใชโดยอตโนมต ซง

ผใชไมจ าเปนตองมความรดานของภาษา HTML เนองจากโปรแกรม Macromedia Dreamweaver 8 นนจะมลกษณะ การท างานทคลายๆ กบโปรแกรมพมพเอกสารทเราเคยใชและรจกกนด ซงจะมเครองมอและแถบค าสงใหเราเลอกใชได เหมอนกบ Word Processor จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

การตดตงโปรแกรม Dreamweaver 8 มขนตอนดงน ใสแผนซดรอม โปรแกรม Dreamweaver 8 เขาไปในไดรฟซดรอม

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

ไอคอน Setup โปรแกรม

ภาพท ก.1 ไอคอน Setup โปรแกรม

จะไดหนาตางขอตกลงสทธการใชงาน (License Agreement) คลกเลอก I accept … แลว

คลกปม Next

ภาพท ก.2 หนาตางตกลงสทธการใชงาน (License Agreement)

เลอกไดเรกทอรทตองการ เชน C:\Program File … ถาตองการเปลยนใหคลกปม Change

… เลอกไดรฟและโฟลเดอรทตองการแลวคลกปม Next

ภาพท ก.3 เลอกไดเรกทอรทตองการ

เลอกชนดของโปรแกรมทจะใชรวมกบ Dreamweaver (Default Editor) ถาเลอกทง

หมดแลวคลกปม Select All แลวคลกปม Next

ภาพท ก.4 เลอกชนดของโปรแกรมทจะใชรวมกบ Dreamweaver

คลกปม Install เพอตดตงโปรแกรม

ภาพท ก.5 การ Install เพอตดตงโปรแกรม

เรมตดตงโปรแกรมลงในเครองจนเสรจสมบรณ

ภาพท ก.6 การเรมตดตงโปรแกรมลงเครอง

คลกปม Finish

ภาพท ก.7 การตดตงเสรจสมบรณ

ภาคผนวก ข

คมอการใชงานเวบไซต

การใชงานเวบไซต เวบไซต การละเลนพนบานของไทยสมยอดต จะประกอบไปดวย หนาหลกหรอหนา Home และหนาหลกกจะมเมนหลก คอ โปรแกรม & แพกเกจ ปรนนบตสขภาพ สงอ านวยความสะดวก เกยวกบฉน อลบมรปภาพ และตดตอเรา สวนเมนยอย (เมนซายมอ) คอ โปรโมชน (Promotion) ขาวสารและกจกรรม ( New & Activity) วดโอ (VDO) แผนผงงาน (Site Map) ซงเวบไซต การละเลนพนบานของไทยสมยอดต สามารถเปลยนภาษาได 2 ภาษา คอ ภาษาไทยและภาษาองกฤษ หนาตางการใชงานเวบไซตจะมความคลายคลงกน คอ ไมวาจะคลกเมนอะไรกตาม สวนเมนหลก (สวนหว) สวนเมนยอย (เมนซายมอ) และสวนปมเปลยนภาษาจะอยทเดม ดงนนผจดท าจงขอยกตวอยางการใชงานเวบไซต ดงน

1. เรมการใชงานหนาหลก หนาหลกนจะมเมนยอยตาง ๆ ใหเขาชมกนพรอมทงสามารถ

เปลยนภาษาได2 ภาษา คอ ภาษาไทยและภาษาองกฤษตามทผใชงานตองการ ตามภาพท ข.1 การใช

งานหนาหลกของเวบไซต

ภาพท ข.1 การใชงานหนาหลกของเวบไซต

สามารถเขาชมลงคแนะน าของ

เวบไซต

สามารถเขาชมลงคยอยของเวบไซตได

2. เมอคลกเมนเวบไซต กจะเขาสหนาโปรแกรม & แพกเกจของ การละเลนพนบานของ

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

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

สวยงามได ตามภาพท ข.2 การใชงานหนาเนอหาตางๆ

ภาพท ข.2 การใชงานหนาเนอหาตางๆ

ภาพท ข.3 การใชงานเมนยอย

สามารถเลอกอานรายละเอยดของเวบไซต

เมนยอยยงคงอย เพอใหเกดความสะดวกตอผใชงาน

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

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

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

รายละเอยดการประเมน เกณฑการประเมน

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

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

4. เวบไซตมประโยชนตอผชมทสนใจเกยวกบการละเลน

พนบานของไทยในสมยอดต

5. เนอหาในเวบไซตมความเหมาะสม เกณฑคะแนน 5 = ดมาก 4 = ด 3 = ปานกลาง 2 = พอใช 1 = ปรบปรง

ขอเสนอแนะ .................................................................................................................................................... .................................................................................................................................................... .................................................................................................................................................... ....................................................................................................................................................