คู่มือเรียนรู้การใช้งาน ...kmcenter.rid.go.th/kmc08/km_56/km2013/book56_8/namo5.pdf4.2 องค ประกอบในการเร

คมอเรยนรการใชงานเบองตนของ Namo WebEditor V. 5

การสรางบทเรยนบนเครอขาย เคาโครงเนอหา 4.0 บทนา 4.1 สอประสม (Multimedia) 4.2 องคประกอบในการเรยนร 4.3 ขนตอนในการสรางเวบไซตและเวบเพจ 4.4 การใชงานโปรแกรมสรางบทเรยนบนเครอขาย 4.2.1 สวนประกอบของโปรแกรม Namo WebEditor 4.2.2 การใชงานโปรแกรม Namo WebEditor วตถประสงค

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

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

เพราะตางตองเกยวของกบกระบวนการสอสาร (Communication Process) และใชเปนประจาทกวน ทกคนตองสรางชองทางหรอสอ (Media) เพอจะสอสารสารสนเทศไปยงกลมเปนเปาหมายใหเกดผลทรวดเรวตามตองการ สอทมประสทธภาพและสามารถเขาถงผใชไดดเยยมในยคน คอคอมพวเตอรซงมใหเลอกใชไดหลายรปแบบ เชน การนาเสนอ (Presentation) ดวยโปรแกรมนาเสนอดวยคอมพวเตอร การใชมลตมเดย (Multimedia) ในการนาเสนอเรองเนอหาทมการสมพนธกบผใช และการสรางเวบไซต (Website) เพอเผยแพรความร หรอมจดประสงคอนสาหรบผเขามาเยยมชม เปนตน 4.0 บทนา การออกแบบเวบไซตหนงๆ คลายกบการสรางเอกสารหรอหนงสอหนงเลมกคอมปกหนงสอ (เปรยบไดกบหนาแรก (Home Page) ของเวบไซต) และมเนอหาของหนงสอแบงเปนหนา เปรยบไดกบหนาอนๆ (Web Page) ของเวบไซตนนเอง การสรางเวบไซตใหนาสนใจชชวนใหผทเขาไปศกษาและแวะเวยนมาอก นอกจากมเนอหาสาระดแลวจะตองออกแบบใหตรงกบความตองการของผชม เชน สวยงาม งายตอการเขาหาเนอหา ฯลฯ 4.1 สอประสม (Multimedia) ในปจจบนน บทบาทของไมโครคอมพวเตอรนบวนจะมบทบาทตอการดาเนนชวตของผคนมากขน ไมวาจะเปนในแงของการดาเนนธรกจ การศกษา หรออน ๆ บรษทผผลตจะมการผลตเครองคอมพวเตอรทมประสทธภาพสงในราคาตา ปจจยตางๆ ทมผลทาใหการเตบโตของตลาดพซเปนไปอยางรวดเรวนน ไดแก ความสามารถของเครองพซทเพมมากขน การใชเครองพซในปจจบนไมจากดอยกบซอฟตแวรทงายๆ อยางเชน เวรดโปรเซสซงอกตอไป มซอฟตแวรประยกตมากมายทสนบสนนการทางานใหมความนยมใชมากขน ซงขนอยกบ

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

สอประสมไมใชเทคโนโลยเดยวเพยงลาพง แตระบบคอมพวเตอรสอประสมนน เปนการรวมเทคโนโลยหลายอยางเขาดวยกน เพอทาใหเกดความสมบรณในการทางานเทคโนโลยเหลานนไดแก 1. เทคโนโลยการบนทกขอมล การทางานของสอประสมประกอบไปดวยภาพและเสยง การบนทกภาพไวในคอมพวเตอรเปนสงทสนเปลองหนวยความจาเปนอยางมาก ดงนนความจของสอเกบขอมลจงเปนขอจากดในการพมพสอประสม เพราะตองการสอทมความเรวสงแตราคายอมสงตาม การแกปญหาของหนวยเกบขอมลทตองขนาดใหญและราคาถกนน ไดแกไขดวยการนาเอาเทคโนโลย ของการบนทกขอมลดวยแสงเขามาใช (Optical Technology) กคอการพฒนา CD-ROMs ซงกาลงมบทบาทอยางมากในระบบสอประสมในปจจบน 2. เทคโนโลยการยอขนาดขอมล การยอขอมลทมประสทธภาพจะเปนปจจยสาคญอยางหนงในการทางานของระบบคอมพวเตอรสอประสม เพราะถาเกบภาพจากจอทมความละเอยด 1,024 x 768 จด โดยทไมมการยอขนาดขอมล กจะกนเนอทดสกมากกวา 1 เมกกะไบท ยงถาเปนการเกบในลกษณะเปนวดโอในหนงวนาททมความเรว 30 เฟรม อาจใชเนอทมากกวา 80 เมกกะไบท ดงนนการยอขนาดแฟมขอมล จงมความจาเปนมากทจะตองมการลดขนาดของขอมลใหลดลงมากทสด โดยยงมความสมบรณถกตองของเนอหาไว 3. เทคโนโลยไมโครคอมพวเตอร การทางานของคอมพวเตอรสอประสมเปนการทางานทเกยวของกบขอมลในปรมาณมหาศาล กระบวนการยอและขยายขนาดขอมล จะตองเกดอยางรวดเรวมากพอทจะทาใหการตดตอสงขอมลระหวางหนวยความจาและอปกรณตาง ๆ ไมเกดการหยดชะงกหรอลาชา เพราะ ถาเกดเหตการณเชนนจะทาใหการแสดงผลทงภาพและเสยงผดพลาดไปจากทเปน 4. เทคโนโลยจอภาพ ในปจจบนการพฒนาจอ super VGA สามารถทาใหไดความละเอยดของภาพถง 1,024 x 768 จด และใหสไดถง 16.7 ลานส ระบบสอประสมจะยงเราความสนใจมากขนเปนทวคณ เทคโนโลยจอภาพ

คอมพวเตอรสามารถสรางภาพ ไดคมชดมากขนและสเปนธรรมชาตมากขน ถาเทคโนโลยจอภาพ HDTV พฒนาไดสมบรณถงระดบและมการพฒนาเปนจอภาพ Monitor ของระบบคอมพวเตอรแลว ระบบสอประสมจะยงนาสนใจมากขน นอกเหนอจากเทคโนโลยจอภาพอน ๆ ทไดพฒนาในปจจบนเชน Touch-Screen Monitor 5. เทคโนโลยอปกรณปอนขอมล การตดตอกบคอมพวเตอรกบผใช เดมทาไดโดยการปอนคาสงผานคยบอรดซงเปนอปกรณมาตรฐานเพยงอยางเดยว การพฒนาเมาส จอระบบสมผสทาใหเกดการตดตอกบเครองคอมพวเตอรเปนไปอยางสะดวกและงายขน 6. เทคโนโลยระบบคอมพวเตอรเครอขาย สงทระบบคอมพวเตอรสอประสมเขาไปมบทบาทรวมกบระบบคอมพวเตอรเครอขาย ไดแก การตดตอสอสารดวยระบบ Electronics Mail ซงเดมเปนการตดตอทเปนลกษณะ Text Base เทานน นบวาเปนการนาเอาสองเทคโนโลยมาใชรวมกนทาใหการตดตอสอสารในระบบเครอขายคอมพวเตอร ทาไดทงทเปนภาพและเสยง การใชงานระบบสอประสมจะเขาหามวลชนมากขน ถาเทคโนโลยเครอขายคอมพวเตอรพฒนาถงระดบ เนองจากสามารถกระจายไดหลายๆ จดในเวลาเดยวกน 7. เทคโนโลยซอฟตแวร สงททาใหโลกคอมพวเตอรสอประสมเปนจรงขนมาสวนหนงกคอ การพฒนาซอฟตแวรทมประสทธภาพสง และมการใชงานไดงายขน และประการสาคญทสดกคอความเหมาะสมกบเนอหาหรอขอมลทจะนาเสนออกทงยงจะตองมความออนตวในการประยกตเขากบสวนอน ๆ ของระบบ ปจจบนบรษทผผลต ไดมการตนตวอยางสงในการพฒนาซอฟตแวรคอมพวเตอรสาหรบสรางสรรคงานสอประสม เนองจากผทเกยวของไดเลงเหนถงความเปนธรรมชาตในการสอความหมายของระบบสอประสมและแนวโนมของการพฒนาตอไป 8. เทคโนโลยการสอความหมาย ขอมลนาเสนอ และวธการ สงนนบวาเปนสงทสาคญในระดบตนทจะทาใหระบบสอประสมบรณเพราะถงแมวาคอมพวเตอรสอประสมจะพฒนาเทคโนโลยทก ๆ ดานก แตถาขาดขอมลนาเสนอทดวธการนาเสนอ ทไมสอดคลองกบกลมเปาหมาย ตลอดจนไมไดพจารณาถงการใชเทคโนโลยการสอ ความหมายทดแลว ระบบสอประสมทไดพฒนานนกจะไมบรรลวตถประสงคตามทตงไวผสรางสรรค ระบบสอประสมจงควรจะตองพจารณาเทคโนโลยดานนดวยเปนประการหลก 4.1.3 การพจารณาเลอกซอฟตแวรเพอสรางสรรคงานดานสอประสม ดงน

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

Multimedia Personal Computer <MPC> บรษท IBM และบรษท Microsoft Inc. ไดรวมมอของบรษทฮารดแวรอก

หลายบรษท กาหนดเปนมาตรฐานทเรยกวา Multimedia Pernonal Computer หรอ MPC โดย MPCกาหนดคณลกษณะของฮารดแวรไดดงน 1. CPU ตองมความเรวไมนอยกวา 10 MHz ตองเปนเครอง 80286 80386 หรอ 80486 ทสามารถตดตงและใชงานโปรแกรม Microsoft Windows ได 2. มหนวยความจาอยางนอย 2 MB

3. การดแสดงผลเปนการด VGA ทมขนาดขอมลเปน 4 หรอ 8 บท 4. ม Digital Audio Subsystem 5. มฮารดดสกอยางนอย 30 MB

6. มเครองอาน CD-ROMs 4.2 องคประกอบในการเรยนร องคประกอบทชวยใหเกดการรบรของผเรยนตอสอทนาเสนอผานประสาทสมผส ผเรยนจะไดรบสงเราจากสอภายนอก ไดแก 1. ขอความ (Text) สอทใชนาเสนอเนอหาจะประกอบดวยขอความทแสดงผลทางจอภาพคอมพวเตอร ผเรยนจะใชสายมองทจอภาพเพออานขอความ ตวอกษร ตวเลขหรอสญลกษณพเศษอนๆ การใชสายตาเพอเพงอานขอความทปรากฏในจอภาพคอมพวเตอรเปนเวลานานจะทาใหผเรยนเกดอาการลาและปวดกลามเนอตาจากการแผรงสและเปลงพลงงานของแสงจากจอภาพเขากระทบจอประสาทตาโดยตรง ดงนนการออกแบบเพอนาเสนอเนอหาในรปของขอความจงจะตองจดระบบนาเสนอทตอเนองในลกษณะของการเสนอทละกรอบ (Frame By Frame) 2. กราฟก (Graphics) โดยมากใชเพอดงดดความสนใจ และเพอเปนตวชแบงแยกความแตกตางในการนาเสนอเนอหา โดยแสดงผลดวยเสน วงกลม สเหลยม และแสงเงา ท อธบายความหมายหรอแสดงองคประกอบของวตถไดอยางชดเจนเปนรปธรรม 3. รปภาพ (Images) ไดแก ภาพนง ภาพถายขาว-ดา ภาพถายส หรอภาพจากเอกสารสงพมพประเภทตางๆ เพอแสดงภาพซงมขนาดใหญทเสมอนจรงเชนภาพอาคารตกภาพสะพานขาม แมนา และเพอใหสอความหมายและจดประสบการณแกผเรยน รปภาพทใชในบทเรยนคอมพวเตอร ชวยสอนโดยมากไดมาจากเครองอานสญญาณภาพ (Scanner) หรอถายภาพดวยกลองถายภาพชนดดจตอล 4. เสยง (Audio) ไดแก เสยงธรรมชาต เสยงประดษฐ เสยงดนตร รวมทงเสยงประกอบอนๆ ใชเพอกระตนความสนใจและอธบายขอเทจจรงแกผเรยนผานทางประสาทรบสมผสทางการไดยน 5. ดจทลวดโอ (Digital Video) ใชอธบายขอเทจจรงของภาพเหตการณทตอเนอง เชน ภาพทสรางขนใหสามารถเคลอนไหวได หรอไดจากสญญาณภาพของดจทลวดโอ 4.3 ขนตอนในการสรางเวบไซตและเวบเพจ

การสรางเวบไซตและเวบเพจใหมประโยชนและนาสนใจควรมขนตอนการออกแบบ 4 ขน ไดแก (1) การวเคราะห (Analysis) (2) การออกแบบ (Design) (3) การพฒนา (Development) และ (4) การปรบปรงและแกไข (Revise&Edit)

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

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

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

4.การปรบปรงและแกไขเวบไซต (Revise&Edit) การออกแบบมาอยางดไมได หมายความวาจะดดงทใจผสรางคาดคดเพราะ ผทจะบอกวาเวบไซตนนดหรอไมดนนกคอชมนนเอง ดงนน เมอสรางเสรจแลวตองไปทดลองใช และการปรบปรงแกไขใหทนสมยและสอดคลองกบความตองการของผชมในขนการปรบปรงและแกไขนผออกแบบเวบไซตหรอเวบเพจจะสามารถปรบปรงแกไขไดทกขนทผานมา ตงแตขนการวเคราะหการออกแบบและการพฒนาเพอทจะใหเวบทสรางขนทนสมยและสอดคลองกบความตองการของผชม 4.4 การใชงานโปรแกรมสรางบทเรยนบนเครอขาย 4.1 สวนประกอบของโปรแกรม NAMO WebEditor 1. Layout Table Layout Table เปนเครองมอชวยในการจดวางหนาเวบเพจแมนยาตรงตามตาแหนงทตองการ มากขน โดยมลกษณะเปนเสนกรดตารางชวยในการจดวางองคประกอบตางๆไดตรงตาแหนงทแนนอน การทางานรวมกบ Layout Table นผใชงานเพยงลากองคประกอบทงรปภาพ ปม ขอความ หรออนๆทตองการนามาจดวางลงบนตาแหนงทตองการ นอกจากนผใชงาน สามารถกาหนดระยะ สแนปและขนาดของกรดใหเหมาะสมมความละเอยดและ ความแมนยาตามทตองการได หลงจาก ไดตาแหนงทตองการแลวกสามารถแปลงเสนกรดกลบไปเปนตาราง โดยไมทาใหตาแหนงทวางไวคลาดเคลอนเลย

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

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

3. Site wizard Namo WebEditor 5 มความสามารถสงในการ สรางเวบไซตสาเรจรปมาตงแตเวอรชนแรกๆ ทาใหผออกแบบเวบไซตทไมคอยมเวลา และตองการสรางเวบไซตอยางรวดเรว สามารถเลอกใชเวบไซตทออกแบบไวเรยบรอยแลวมาใชงานไดทนท โดยใน Namo WebEditor 5 นกมรปแบบของเวบสาเรจรปใหเลอกใชงานมากกวา 200 รปแบบ ผออกแบบเวบไซตเพยงเตรยมขอมลและเนอหาของเวบไซตไวเทานน หนาทออกแบบหนาตาของเวบไซตกปลอยให Namo Web-Editor 5 จดการให Namo WebEditor 5 ใช Site Wizard ในการสรางและจดการเกบเวบไซตแบบสาเรจรป หลงจากทไดเวบไซตแลวผออกแบบกสามารถเปลยนแปลง แกไข รปแบบของหนาตาไดตามตองการ

4. Improved Table Features เครองมอ Database wizard ชวยในการสรางเวบไซตแบบ Database-Driven ทตองดงขอมลจากฐานขอมลมาแสดงบนหนาเวบไซต ทาไดงายขน ผออกแบบสามารถสรางฟอรมสาหรบ การแสดงผล ขอมลในฐานขอมล ฟอรมสาหรบกรอกขอมลลงในฐานขอมล หรอฟอรมสาหรบแกไขขอมลลงบนหนาเวบเพจไดภาษาสาหรบเรยกใชฐานขอมลท Namo WebEditor 5 สนบ

สนนกม ASP,PHP ,JSP โดยจะทาการเรยกใชฐานขอมลผานทาง ODBC หรอ JDBC สาหรบ ภาษา PHP สามารถเรยนใชฐานขอมล MySQL ไดดวยการเชอมตอแบบ Direct TCP/IP

5. Hyperlink Toolbar Namo WebEditor ไดใหเครองมอ HTML source Editor ซงชวยให Advance User สามารถปรบโหมด Visual และ Source โหมด ดวยการกด F6 เทานน Source Editor ชวยในการกาหนดสของ Tag,คณสมบต,และสวนอนๆ รวมถงการยอหนาอตโนมต การแสดงเลขทของบรรทดทางดานซายของขอบ แถบแสงเนนสวนของบรรทดปจจบน เรายงสามารถเลอกทจะให Namo WebEditor ทาตามฟอรแมตหรอโครงสราง Source code เดมของ HTML หรอไม หรอจะยอมใหมการแปลงฟอรแมต ตามทเรากาหนดคาใหมได และ Namo WebEditor ยงสามารถเชค Source code วาจะเขากนไดกบ Browser หลกๆ หรอมาตรฐานภาษา HTML หรอไม รวมทงขจดหรอลบ tag ทซา ซอนและฟมเฟอยออกไปไดดวย

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

ยงรายงานไฟลทใชทงหมด ในโปรเจกต เชน ไฟลHTML ไฟลรปภาพตางๆ ไฟล Style sheet เปนตน เพอใหผดแลโปรเจกตสามารถบรหารจดการทรพยากรในเวบไซต ไดงายขน Site manager ยงสามารถรายงาน Broken link ในหนาเวบเพจใดๆ และทแทบ Publish ผออกแบบเวบไซตสามารถ Synchronize และอพโหลดเวบไซตทออกแบบเสรจแลวไปยง Web Server ไดทนท

7. Resorce Manager Resorce Manager เปนศนยรวมของทรพยกรทใชในโปรเจกต เชน Document templates, Clip art , Color sets, Smart buttons, Themes, Table styles และอนๆ ซงนอกจากเปนแหลงรวบรวมและ จดการกบองคประกอบทสรางขนโดย Namo WebE-ditor แลว ผออกแบบยงสามารถเพมองคประกอบ อนๆเขามา ไวในศนยรวมนดวยกได ซงทาใหสามารถนาองคประกอบในศนยรวมนไปใชกบเวบเพจในหลายๆหนาได เปนการใชทรพยากรอยางคมคาและเสยพนทในการจดเกบนอยลง นอกจากน Resorce manager ยงสามารถอดและขยาย Resourcs ในรปแบบของไฟล Zip ซงทา ใหการแบง Resource กบผอนบนอนเตอรเนตทาไดงายขน เพราะขนาดไฟลเลกลง

8. Source Control

เครองมอ Source Control ของ Namo WebEditor 5 พฒนาตามมาตรฐาน Microsoft SourceSafe ใชสาหรบควบคมการใชงานทรพยากรตางๆของเวบไซต เชน ถามการเปดไฟลใดๆ ในโปรเจกตโดยทมงานคนใดคนหนงไฟลนนกจะไมสามารถเปดได โดยทมงานคนอนๆ จนกวาการแกไขจะเสรจสนและถกปดไฟลเรยบรอยแลวเทานน ซงจะชวยปองกนความผดพลาด ในการสรางหรอแกไขทรพยากรตางๆ ในโปรเจกตไดเปนอยางด นอกจากนยงสามารถตรวจสอบวาการ เปดและแกไขไฟลตางๆ กระทาโดยบคคลใดในทม ซงโปรแกรมจะทาการอพเดตไฟลทแกไขเรยบรอยแลวใหกบทกคนในทมงานอกดวย

9. Themes Themes เปนเทมเพลตเวบไซตสาเรจรป (อาทเชน พนหลง ปม และการเชอมลงคตางๆ สอกษร และองคประกอบอนๆ) จะถกออกแบบมาใหเลอกใชไวมากมายกวา 200 รปแบบ และยงสามารถเพม Themes ทเกดจากผใชออกแบบเองไปเพมไวในคลงของ Templates น ซงผใช สามารถเปลยน Themes บนหนาเวบไซตทสรางไวแลวไดตลอด มผลใหหนาเวบเพจซงมจานวนหนามากมายนนถกเปลยนไปยง Themes ทเราเลอกลาสด ดวยการ Update themes เพยงครงเดยว เวบไซตทเราสรางขน กจะมชวตชวา มการปรบเปลยนหนาตาไปเรอยๆ เพอมให จาเจ โดยยงคงรกษาไวเฉพาะบทความ รปภาพ เดมไว

11. Smart Buttons Smart Buttons กคอภาพปม แบนเนอร หรอภาพองคประกอบกราฟฟกทถกนามาบอยครงบนหนาเวบเพจ ทสามารถนามาแกไข ปรบแตงไดตลอด เมอดบเบลคลกบนภาพ Namo WebEditor จะแสดงหนาตางปรบแตงภาพมาให เพอให ผใชแกไขอกษร ขนาด ส รปราง สามารถสรางเงา ขอบของภาพในรปแบบตางๆหรอหากผใชสรางภาพ Vector ขนมาเอง (การยดหดภาพจะไมทาใหภาพแตกหรอลดความชดลง) กสามารถเพมเขาไปในหมวดคลงของภาพไดดวยตนเอง นอกจากน การยดหดภาพยงสามารถกระทาไดบนหนา Edit window ของ Namo WebEditor ไดโดยตรง

12. Flash Button Namo WebEditor 5 สนบสนนการใสไฟล มลตมเดยตางๆ ลงในหนาเวบ เพจรวมถงไฟล Flash (*.swf) ดวยและสาหรบผออกแบบทไมมความรดาน Flash หรอไมมเวลาออกแบบเองกสามารถใส Flash Button ท Namo WebEditor 5 ไดสรางไวใหแลวกได โดยผออกแบบสามารถแกไขขอความ และขนาดรปรางของ Flash

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

13. Image Effect หนาตางเมน Image Effect จะใหผใชสามารถแกไขปรบแตงภาพบนหนา Edit window ไดอยางงายๆ ดายโดยสามารถ ยอ-ขยาย ,Crop ตดขนาดของภาพ ปรบองศาเพอหมนภาพ เพมลดความสวาง ความคมชด ใสกรอบภาพ สรางเงา สรางขอบนน สามารถกาหนดความโปรงแสงใหกบภาพ และอนๆอกหลายทางเลอกใหกบภาพโดยทผใชไมจาเปนตองใชโปรแกรมกราฟกอน เขามารวมใชงานอกเลยโดยการดบเบลคลกบนภาพนนๆบน Edit window นนเอง

14. Table Namo WebEditor 5 เพมความสามารถในการจดการกบตาราง ใหดยงขนโดยทขนาดของเซลลจะแสดงขนมาเปน ToolTip โดยอตโนมต เมอเซลลใดถกเลอก ทงยงสนบสนนแทก Table row (<tr>) ทเขากนไดกบเวบเบราเซอรเกอบทกโปรแกรมในปจจบน นอกจากนผออบแบบจะเลอกกาหนดคณสมบตเซลลของตารางทงายกวาเดมจาก Inspector กได Namo WebEditor 5 ยงมฟงกชน ในการสลบเปลยนขอมลในตารางจากแถวเปนคอมลมนหรอจาก คอลมนหรอจากคอลมนเปนแถวไดโดยไมตองสรางตารางขนมาใหม

15. Table Styles Table Styles ทาใหผออกแบบเวบไซตสามารถทจะเลอกใชรปแบบ ของตารางท Namo WebEditor ไดออกแบบไวใหเรยบรอยแลวมาใชกบ ตารางในหนาเวบเพจไดทนท โดยผออกแบบเพยงเลอกรปแบบของตาราง จากแทบ Table style เทานน และผออกแบบเวบไซตยงสามารถบนทกรปแบบของตารางทออกแบบดวยตนเองไปไวใน Table style นไดอกดวย ทาใหสามารถนารปแบบของตารางทชอบไปใชกบ ตารางอนๆไดตอไป

4.2 การใชงานโปรแกรม Namo WebEditor การเปดเอกสารใหม 1. คลกเลอกเมน File > New

2. กาหนดคณสมบตและคลกปม OK

การเปดเอกสารเกา 1. คลกเลอกเมน File > Open

2. คลกเลอกเอกสารหรอเวบเพจเกาทเคยสรางไว และกด Open

การกาหนดขนาดกระดาษ 1. คลกเลอกเมน File > Page Setup

2. กาหนดคณสมบตและคลกปม OK

การบนทกเวบเพจ 1. คลกเลอกเมน File > Save

2. กาหนดคณสมบตและคลกปม Save

การกาหนดเสนกรดตาราง 1. คลกเลอกเมน Table > Layout Table > New Layout Table

2. กาหนดคณสมบตและคลกปม OK

การสรางงานบนพนทเสนกรด 1. คลกเลอกเมน Table > Layout Table > Draw Layout Table

2. กาหนดคณสมบตและคลกปม OK

3. เลอกหนาตางเครองมอ ในการสรางงาน

4. กาหนดพนทและสรางงานลงบนพนทเสนกรดตาราง

การกาหนดรายละเอยดตวอกษร 1. ทาพนทเลอกตวอกษรแลวคลกเลอกเมนWindows > Inspector

2. กาหนดคณสมบตและปดหนาตางคณสมบต

การกาหนดรายละเอยดตาราง 1. กาหนดพนทตารางแลวคลกเลอกเมนWindows > Inspector

2. กาหนดคณสมบตและปดหนาตางคณสมบต

การกาหนดรายละเอยดรปภาพ 1. เลอกรปภาพแลวคลกเลอกเมนWindows > Inspector

2. กาหนดคณสมบตและปดหนาตางคณสมบต

การแทรกเวบไซตสาเรจรป 1. คลกเลอกเมนFile > Site > Site Wizard

2. กาหนดคณสมบตและคลกปม Finish

การเชอมโยง 1. กาหนดสงทตองการเชอมโยงแลวคลกเลอกเมน Insert > Hyperlink

2. กาหนดคณสมบตและคลกปม OK

3. ตรวจสอบการเชอมโยงทภาษา HTML

การสรางและจดเกบเวบไซตสาเรจรป 1. คลกเลอกเมน Windows > Site Manager

2. กาหนดคณสมบตพมพชอเวบไซต

3. บนทกเวบไซตโดยคลกปม Site > Save

การแทรกองคประกอบลงในเวบไซต 1. คลกเลอกเมน Windows > Resurce Manager

2. เลอกองคประกอบทตองการพรอมทงกาหนดคณสมบตและคลกปม Insert

การแทรกเวบไซตสาเรจรป 1. คลกเลอกเมน Format > Theme

2. กาหนดคณสมบตและคลกปม OK

การแทรกภาพปม 1. คลกเลอกเมน Insert > Smart Button

2. เลอกรปแบบปมและคลกปม OK

3. ปรบเปลยนคณสมบตและคลกปม Finish

การแทรกปมแฟลต ปม Flash Button จะถกจดทาไวใน Resource Manager เหมอน Clip Arts และ Smart Buttons.ใหเลอกเมน เมอเปดหนาตาง Resource Manager เราสามารถแทรกและแกไขปม Flash Buttons แลวสามารถนาไปใชกบการทาเวบหนาอนๆได ดงขนตอนตอไปน 1. คลกเลอกเมน Insert > Flash Button

2. เลอกรปแบบปมและคลกปม OK

3. ปรบเปลยนขอความรวมทงคณสมบตตาง ๆ และคลกปม OK

การแทรกรปภาพ 1. คลกเลอกเมน Insert > Image

2. คนหารปภาพจากแฟมดวยคาสง

3. เลอกรปททาการคนหาและคลกปม Open

4. กาหนดคณสมบตและคลกปม OK

5. แสดงภาพแทรกมา

การแทรกภาพตดปะ 1. คลกเลอกเมน Insert > Image

2. คนหารปภาพจาก Clip Art ดวยคาสง

3. เลอกรปแบบภาพตดปะและคลกปม OK

การทาเอฟเฟค 1. คลกเมาสขวาบรเวณรปทตองการทาเอฟเฟค 2. เลอกเมน Image > Image Effects

3. กาหนดคณสมบตและคลกปม OK

4. ปรบเปลยนรปแบบคณสมบตและคลกปม OK

การสรางตาราง 1. เลอกเมน Table > New Table

2. กาหนดคณสมบตของตารางและคลกปม OK

3. รปแบบตารางทเลอกเซลลทถกเลอกจะแสดงขนาดของเซลลออกมา

การเปลยนรปแบบตาราง 1. คลกเมาสขวาบรเวณตารางแลวเลอกเมน Table > Table Style

2. เลอกรปแบบพรอมทงกาหนดคณสมบตของตารางและคลกปม OK

การแตงตารางโดยใช Smart Buttons เราสามารถตกแตงตารางไดหลายรปแบบ โดยการใช Smart Button ซงเปนกราฟกชนด Vector-based คอเมอมการยดหรอหดรปภาพๆจะไมแตก ภาพยงคงคมชดเหมอนเดม ตวอยาง การแตงโดยใช Smart Buttons มขนตอนดงตอไปน 1. สรางตารางในหนา Edit window ดงน

2) ทาตารางใหเปน Invisible (ไมเสนตารางไมเหน) โดยการวาง cursor ลงในตารางและกาหนด Cell padding,Cell spacing และ ความหนาของเสนเปนศนย ขอบของตารางจะแสดงเปนเสนจดๆสเทา ในหนาตาง Edit (ในกรณทขอบตารางไมแสดงอะไรเลย ใหเลอก [View > Marks > Table Gridlines]

3) วาง cursor ลงใน header cell และเลอกเมน [Insert > Smart Button.....] 4) ในแทป Smart Button ของ Resource Manager ใหเลอก Table titles ในรายการ ดานซายมอ 5) ดบเบลคลกท Smart Button ทตองการในหนา Preview ดานขวามอ (Right pane)

6) ใน Smart Button dialog box ใหแกไขปม (Button) ตามทเลอกไว 7) ดบเบลคลกท Text และใสอกษรหรอคา พรอมทงกาหนดชนดฟอนต 8) ในรายการองคประกอบของปมทางดานบนขวา เลอก "Shape1" และคลกเลอกแทป Effects ทางดานลางขวาใหเอาเอฟเฟค Drop Shadow ออก โดยการเลอกปมนนๆและ คลก Remove button 9) คลกแทป Stroke เลอก Solid Color จากเมน drop-down แลวกาหนด Width เปน "2" 10) ในแทป Fill ใหเลอก Type และ Style ของปมพนหลง (Background Button)

11) คลกเลอกแทป Info และปรบขนาดความกวางและความสงของปมใหพอดกบขนาด ของตาราง 12) คลกเลอกไอคอน Export Area Tool ทดานซายบนของ Smart Button dialog box

13) รปภาพเทานนทอยภายใน Export Area คอสวนทแสดงบน เวบเพจ ระบ Export Area ใหรวมเอาปมรปภาพทงหมด เวนแต The button stroke

14) คลก Finish จากนน Smart Button กจะถกแทรกเขาไปในเซล 15) วาง cursor ทดานลางของเซล และแทรก Smart Button ทแสดงเปนสวนทายของตาราง โดยกาหนดคณสมบตเหมอนสวนหวของ Smart Button.

16) แทรกตารางลกลงในสวนกลางของตาราง

17) ระบ Cell padding , Cell spacing และความหนาของตารางลกใหเปนศนย พรอมทง กาหนดความกวางของตารางเหมอนตารางแม ( parent table) 18) วาง cursor ลงในตารางลก แลวเลอก [Table > Cell properties...] 19) ใน Cell properties dialog box คลกเลอก Style...Button 20) ใน Style dialog box ใหคลกเลอกแทป Border และกาหนด Left และ Right ใหเปน "Solid"สวน Top และ Bottom ใหเปน "None" และกาหนดสของขอบซายและขวาท เมน drop-down picker ดานใต Color พรอมทงระบความหนาทดานใตคา Width

21) ตารางทไดจะมลกษณะดงน

22) วาง cursor ลงในกลางเซลและเลอก Table properties....ในเมน Shortcut สวนใน

แทป Table ของ Table properties dialog box ทาสของพนหลงของเซลใหเหมอน กบสของ Smart Button โดยการกาหนดสพนใหใกลเคยงกน 23) ใสเนอหาหรอคาทตองการลงในเซล จากนนตารางทสมบรณจะไดดงน

การสราง Rollover Effect หลายชน เราสามารถเปลยนแปลงภาพหลายๆภาพ (Multiple images) ในเวลาเดยวกน เมอ เหตการณ (Event)ปรากฏขนโดยการใสAction ใหกบรปภาพ ในตวอยาง ตองการภาพจานวน 10 ภาพ ปมจานวน 3 ปม และ ปม Rollover จานวน 3 ปมและรปภาพ 4 ภาพ ตรงบรเวณตรงกลาง 1. อนดบแรกสด ใหใสปม 3 ปม ทสวนบน และรปภาพ default ตามตารางดานลาง

2. ดบเบลคลก ทปมแตละปมรวมทงรปภาพ Default จากนนในImage properties dialog box.ใหกาหนด Name attribute ของแตละภาพ ชอเหลานจะถกใชในการอางถงในการกาหนดเหตการณ (Event)และ Action 3. ใหเลอกรปภาพทเปน Default ทรปขวามอ "Flagship Products" และยกเลกการเลอกWidth, Height ในหนาตาง Inspector window ตามดานลาง และใหใชวธการเดยวกนนกบอก 3 ภาพทเหลอ

4. เลอกปม "WebEditor" และคลกเลอกปม Add....ในหนาตาง Action ในกรณทหนาตาง Action window ไมปรากฏใหเหน ใหเลอกเมน [Window > Action] 5. เพอทจะทาการแสดง Rollover ทงสองปมของ "WebEditor" ใหทาการกาหนด Action properties ตามดานลาง ใชวธการเดยวกนนกบปม "DeepSearch" และ "WebEditor control" Event: OnMouseOver Action: Replace Image Original Image Name: WebEditor(the name specified for the 'webeditor' image in Step 2) Replace image path: mages/we_text2.gif Preload replacement image: Yes Event: OnMouseOut Action: Restore Image Original Image Name: WebEditor(the name specified for the 'webeditor' image in Step 2) Event: OnMouseOver Action: Replace Image Original Image Name: Default(the name specified for the default image in Step 2) Replace image path: mages/we_text2.gif Preload replacement image: Yes Event: OnMouseOut Action: Restore Image Original Image Name: Default(the name specified for the default image in Step 2) 6. ใหแนในวา 4 เหตการณ (Event) ไดถกเพมเขาไปแลวใน Action window ซง Action เหลานควรจะไดถกนาไปใชกบปมทง 3 ปม

7. ตรวจสอบผลทไดทาง Preview tab การพมพเวบเพจ 1. เลอกเมน Table > New Table

2. กาหนดคณสมบตของตารางและคลกปม OK