หน่วยที่ 4 การสร้างเว็บเพจด้วย dreamweaver
Post on 28-Jul-2015
3.696 Views
Preview:
DESCRIPTION
TRANSCRIPT
หนวยการเรยนท 4 การสรางเวบเพจดวยโปรแกรม Dreamweaver
สาระการเรยนร การสรางเวบเพจในปจจบน เราจะเหนวาหนาเวบเพจมความสวยงาม มเทคนคตาง ๆ มากมาย แตละเวบไซตกจะม รปแบบทผออกแบบพยายามสรางสรรคดวยโปรแกรมกราฟกมากกวา 2 โปรแกรมขน ไป ซงหมายถงเบองหลงการจดทาเวบนน นกออกแบบตอ งมความรทงโปรแกรมสรางเวบ โปรแกรมสรางงานกราฟก ตาง ๆ ดานโปรแกรมสรางเวบนน การท เราตองสรางเวบเพจในเวบไซตหนง ๆ จานวนมาก การเขยนดวยโปรแกรมภาษาเพยงอยางเดยวอาจไมเพยงพอ เพราะการใสเทคนค สรางความนาสนใจตาง ๆ จะตอง ใชคาสงภาษา HTML จานวนหลายสบบรรทด นกสรางเวบระดบมออาชพจงหนมาใชโปรแกรมสาเรจรปรวมกบโปรแกรมภาษา ซงเปนวธททางานไดเรวเพราะโปรแกรมเหลานนสรางคาสง HTML หรอ XMLใหทาใหประหยดเวลาและไดงานมคณภาพ การจดเนอหา วชาการสรางเวบในเอกสารน จงจดใหนกศกษาเรยนรโปรแกรมภาษา HTML แลวตามดวยโปรแกรมสาเรจรป โดยใชโปรแกรม Dream weaver 8 ซงถอไดวาเปนโปรแกรมสาเรจรป ทนยมใชกน มากใหเทคนคพนฐานไดด ไมตองใชหนวยความจา (RAM) มาก เหมาะกบเครองคอมพวเตอรในสถานศกษา ซงไมสามารถปรบเปลยนรนไดงานนก เนอทจดไว แบงตาม เงอนไขเวลาเรยนทหลกสตรกาหนด โดยหนวยการเรยนท 4 นจะกลาวถงการ เตรยมโปรแกรมเพอใชงาน การตงคา เรมตน ใหรองรบภาษาไทย รจกเครองมอของโปรแกรม แลวทาการฝกสรางเวบดวยการใชตาราง จดระเบยบเนอหา ซงถอเปนหนวยเรมตน เตรยมใหสามารถใชงานโปรแกรมและลงเนอหา ได ตอไป
ผงความคด (Mind Mapping)
2.ลกษณะและความสาคญของโปรแกรม
การสรางเวบดวยโปรแกรม Dreamweaver8.0
1.ประวตการพฒนาโปรแกรม
6.การกาหนด Folder และ Site เกบงาน
5.รจกเครองมอของโปรแกรม
3.การตดตงโปรแกรม
4.การกาหนดคาเรมตนกอนใช โป
7.การสรางเวบเพจดวย Dreamweaver
90
จดป ระสงคการเรยนร 1. บอกลกษณะความสาคญโปรแกรม Dreamweaver8.0 ได 2. บอกประวตการพฒนาโปรแกรม Dreamweaver8.0 ได 3. ตดตงโปรแกรม Dreamweaver8.0 ได 4. สามารถกาหนดคาเรมตนกอนใชงานโปรแกร มDreamweaver 8.0 5. ใชเครองมอของโปรแกรม Dreamweaver 8.0 ได 6. สรางโฟลเดอร และ ไซต เกบขอมลสรางเวบไซตได 7. ปฏบตการออกแบบเวบดวยเทคนคการใชตารางจดขอมลได 8. สามารถทางานรวมกบเพอน มคณธรรมจรยธรรม รกษาระเบยบวนยไดด
ได
91
การสรางเวบเพจดวยโปรแกรม Dreamweaver 8.0
การสรางเวบ ตองสามารถสรางงานไดเรว มเทคนคสรางความนาสนใจทาใหผชมตดตามไดอยางเหมาะสม ในขณะสรางตองสามารถแกปญหาคาสง HTML ได ดงไดจดเนอหาภาษา HTML ไวในหนวยการเรยนท 3 แลว ตงแ ตหนวยการเรยนท 4 เปนตนไปนกเรยนจะเรยนรการใชโปรแกรม Dreamweaver 8.0 สรางเวบไซต เพอใหไดเรยนรและสรางผลงานไดรวดเรว ดงหวขอตอไปน
1. ประวตการพฒนาโปรแกรม Dreamweaver
อะโดบ ดรมวฟเวอร (Adobe Dreamweaver) ชอเดมคอแมโครมเดย ดรมวฟเวอร (Macromedia Dreamweaver) พฒนาโดยบรษทแมโครมเดย ปจจบนควบกจ การรวมกบบรษท อะโดบซสเตมส คนสวนใหญเรยกช อสนสนวา “โปรแกรมดรมวฟเวอร”โปรแกรม Dreamweaver เปนโปรแกรมออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML การพฒนาโปรแกรมทมการรวมทงสองแบบเขาดวยกนแบบน ทาใหเปนผออกแบบสามารถออกแบบงานในมมมองเหมอนจรงอยางทตองการไปพรอม ๆ กบ การมองเหน รหสภาษา HTML ผออกแบบทมพนความรภาษา HTML บางจงสามารถออกแบบงาน แกไขคาสง ทตองปรบแกไข ความกระชบ หรอตดสวน ทโปรแกรมสรางมา แตไมได ใชออกได เพอใหแสดงผลไดตรงความตองการมากทสด จงทาใหเปนโปรแกรมทไดรบความนยมใชมาก ป พ.ศ. 2544 ดรมวฟเวอร มสดสวนตลาด การใชโปรแกรมประเภทสาเรจรปมากกวา 70% ประวตการพฒนาโปรแกรมเวอรชนตางๆ ของ Dreamweaver มดงน Dreamweaver 1.0 (ธ.ค.1997) Dreamweaver 1.2 (ม.ค.1998)
Dreamweaver 2.0 (ธ.ค.1998) Dreamweaver 3.0 (ธ.ค.1999) Dreamweaver UltraDev 1.0 (ม.ย.2000) Dreamweaver 4.0 (ธ.ค.2000) Dreamweaver UltraDev 4.0 (ธ.ค.2000) Dreamweaver MX (พ.ค.2002) Dreamweaver MX 2004 (พ.ย.2003) Dreamweaver 8 หรอ CS2 (พ.ย. ค.ศ.2005) Dreamweaver 9 หรอ CS3 (ม.ค.2007) Dreamweaver 10 หรอ CS4 ( ต.ค. 2008)
ทมา: http://www.webthaidd.com/dreamweaver/news.php?id=445
92
2. ลกษณะและความสาคญของโปรแกรม
โปรแกรม Dream weaver เปนโปรแกรมออกแบบเวบสาเรจรปทรวมการทางาน 2 รปแบบไวในโปรแกรมคอ รปแบบ WYSIWYG(What -You – See- Is-What-You-Get ) และ การควบคมของสวนแกไขรหส HTML ทาใหผใชงานสามารถออกแบบเวบเพจไดงาย ไมตองมความรดานโปรแกรมภาษา มากนก เพราะโปรแกรมจะทาการสรางรหส HTML ใหทนทเมอมการออกแบบในมมมองออกแบบ ตามรปแบบ WYSIWYG คอเราสามารถใสเนอหา กราฟกตาง ๆ ลงในหนาเอกสารเวบ พรอมกบ สามารถดรปแบบจรงไดในระหวางการ สราง หรอแกไข หากตองการเพมเตมหรอแกไขรหส HTML กสามารถทาได และดผลไดทนท เนองจากภาษา HTML เปนโปรแกรมทไมยดตดกบโครงสรางภาษา ปญหาการเขยนรหสคาสง จงแทบไมมเลย การเรยนรการใชงานโปรแกรม Dreamweaver หากไดเรม ตนดวยภาษา HTML เพยงเลกนอยเปนพนฐาน รคาสงหลก ๆ พอสมควร กจะสามารถเรยนรการใชงานโปรแกรม Dreamweaver ไดงายและรวดเรว ยงขน
ความสามารถของโปรแกรม กบการใชงานรวมกบโปรแกรมภาษาอน ๆ Dream weaver สามารถทางานกบโปรแกรมภาษาคอมพวเตอรในการเขยนเวบไซตแบบ ไดนามค ซงมการใช HTML เปนตวแสดงผลของเอกสาร เชน ASP, ASP.NET, PHP, JSP และ Cold Fusion รวมถงการจดการฐานขอมลตางๆ และ ยงสามารถทางานรวมกบ XML และ CSS ไดอยางงายดาย สรป จดเดนของโปรแกรม Macromedia Dreamweaver 8
1. โปรแกรมจะทาการแปลงรหสใหเปนภาษา HTML โดยอตโนมต ดงนน ผใชทไมมความร ดานนกสามารถทาได
2. มแถบเครองมอ หรอแถบคาสง ทใชในการควบคมการทางาน แบงออกเปนหมวดหมจงชวย ในการทางานทดขน และรวดเรวยงขน
3. สนบสนนเวบเพจทเปนภาษาไทยไดด 4. มคณสมบตทสามารถจดการกบรปภาพเคลอนไหว ไดโดยไมตองอาศย โปรแกรมเสรม 5. สามารถเรยกใชตารางจากภายนอก โดยการอมพอรทจาก Text File 6. เปนโปรแกรมทสนบสนนการใชงาน CSS (Cadcading Style Sheet) 7. มความสามารถในการทา Drop Down Menu รวมไปถงการทาใหรปภาพเปลยน
เมอนาเมาสไปช
93
3. การตดตงโปรแกรม Dreamweaver 8.0
ในทนจะแสดงการตดตง กรณใชแผนชด Studio 8 มขนตอนดงรปท 4.1 1. ใสแผน Dreamweaver 8 ลงในไดรฟ CD-ROM ใหคลกเลอกท Dreamweaver 8 > Install โปรแกรมจะดาเนนการขนตอไป 2. โปรแกรมตดตงจะเรมทางานโดยอตโนมต หากไมทางานใหเลอ กคาสง Start > Run คลกทปม Browse... แลวเลอกไฟล Dreamweaver 8 .exe ในแผน Dreamweaver 8 จากนนคลกทปม OK เพอเรมตดตง หรอกรณไมใชแผนชด Studio 8.0 ใหเรมจาก Start > Run…เชนกน
รปท 4.1 แสดงหนาตางเมน โปรแกรมชด Macromedia Studio 8
3. โปรแกรมตดตงจะแสดงขอความเกยวกบลขสทธในการใชงานใหเขาใจแลวเลอกหวขอ I accept… แลวคลกปม Next ดงรปท 4.2
รปท 4.2 แสดงหนาตาง ยอมรบลขสทธของโปรแกรม
94
4. โปรแกรมจะบอกตาแหนง ทจะตดตงอยทไหน โดยปกตจะตดตงท C:\Program Files\Macromedia\Dreamweaver 8 หากตองการเปลยนทตดตงใหเลอก Change… และเลอกตาแหนงในการตดตงใหมตามตองการ และถาตองการใหสราง Shortcut ไวทหนาจอ ใหคลกเลอก Create Shortcut on Desktop (for All Users) ดงรปท 4.3
รปท 4.3 แสดงตาแหนงตดตง โปรแกรม
5. เลอกชนดของไฟลทจะใชงานรวมกบ Dreamweaver 8 เลอกตวทเราตองการ ใหเลอกทงหมด แลวคลก Next ดงรปท 4.4
รปท 4.4 แสดงการเลอกโปรแกรมทสามารถใชรวมกนได
ขนท 1-5 นถอเปนขนตอนการเตรยมความพรอม และเลอกรายการเพอใหโปรแกรมเลอก รายการตดตงใหเราเทานน
6.โปรแกรมพรอมทาการตดตง ใหเลอกปม Install > โปรแกรมจะกาลงทาการตดตง ใหสงเกตความกาวกาวหนา > จนถง แสดงป ม Finish > คลกปม Finish เปนอนวาการลงโปรแกรมเสรจ สามารถใชงานได ดงรปท 4.5
95
รปท 4.5 แสดงลาดบการ Install โปรแกรม
4. การกาหนดคาเรมตนกอนใชงานโปรแกรม
เมอตดตงโปรแกรมเสรจใหทาการตง คาเรมตนเพอไมใหเกดปญหา การใชงาน และเมอแสดงบนโปรแกรมบราวเซอร โดยเฉพาะการแสดงภาษาไทย หรอ การแสดงขนาดรหส HTML ในหนา-ออกแบบ การตงคาเรมตนทาไดดงน
เปดเมน Edit > Preference เพอตงคาต ามตองการ โดยในทนจะไมกลาวรายละเอยดของแตละ รายการ จะกลาวเนนเฉพาะจดสาคญ ดรปท 4.6 เปดหนาตาง Preference
96
รปท 4.6 หนาตาง Preference ตงคาเรมตนกอนใช โปรแกรม
จะเหนสวนประกอบรายการ (Category) ม 19 รายการคอ(เวอรชน CS3 ม 20 รายการ)
สวนประกอบ คาอธบาย General ปรบแตงการทางานทวไป Accessibility ปรบแตงการใชงาน Dreamweaver ใหเหมาะกบผมปญหาทางดานรางกาย Code Coloring กาหนดสแทก HTML Code Format กาหนดรปแบบการเขยน รหสคาสง HTML Code Hints กาหนดคาทใชบอกใบรหสเพอใหเขยนรหสคาสง ไดเรวขน Code Rewriting กาหนดวธจดการ รหสคาสง HTML อตโนมต Copy/Paste กาหนดรปแบบการวางขอความ การโปรแกรมอน CSS Styles กาหนดการใชสไตล Cascading Style Sheet File Compare กาหนดโปรแกรมทใชเปรยบเทยบไฟลวาไฟลไหนอพเดททสด File Types/Editors กาหนดการ ใชโปรแกรมเสรม
97
สวนประกอบ คาอธบาย Fonts กาหนด Font และชดตวอกษรทใช Highlighting กาหนดสทใชแสดงองคประกอบตางๆ Invisible Elements กาหนดการแสดงไอคอนองคประกอบตาง ๆ ในหนาเวบ Layout Mode กาหนดรปแบบเลยเอาท New Document กาหนดคาใหกบหนาเวบใหมทเราสรางข น Preview in Browser กาหนดการเรยกใชบราวเซอร Site การอพโหลดขอมลไปยงเวบเซรฟเวอรโดยใช FTP Status Bar ปรบแตงแถบสถานะ Validator กาหนดตวตรวจสอบความถกตองของ รหสคาสง
ในทนจะแนะนา รายการทสาคญจาเปนทตองตงคากอนใช สวนรายการทไ มไดแนะนาเพราะ
ถงแมไมตงคาใหม คาทตงมาเปนมาตรฐานกใชงานได General : ปรบแตงการทางานทวไป ใหเลอกคาเพมเตมจากทโปรแกรมตงมาคอ Allow multiple consecutive spaces เพอใหสามารถ
ใช Spacebar เคาะเวนวรรคไดตามทเราตองการ หากไมเลอกจ ะเคาะวรรคได 1 ครงเทานนสวนตวเลอ ก อน ๆ เลอกตามทโปรแกรมเลอกมา สาหรบ Maximum number of history steps เปนจานวนขนตอน ของการยอนถอยหลง สามารถปรบจานวนใหมได เพราะยงคา มากกยงเปลองหนวยความจา RAM ทาใหเครองคอมพวเตอรทางานชาลงได ดงรปท 4.7
รปท 4.7 แสดงการเลอกคาเพ มเตมในรายการเครองมอ General
98
Fonts: กาหนด Font และชดตวอกษรทใช โปรแกรม Macromedia Dreamweaver 8 นนถกออกแบบมา ใหใชไดกบเวบเพจทกภาษา และ
สามารถทจะเลอกใชฟอนต ไดตามทมในระบบปฏบตการ ซงโปรแกรม Macromedia Dreamweaver 8 จะมวธในการเขารหสทเปนตวอกษรแบบมาตรฐานเทานน คอ (Unicode) ซงจะทาใหมความสะดวกสบายยงขน ทไมตองตดตงโปรแกรมเพมเตมเหมอนกบ เวอรชนกอนทผานมา ทงน ในการทจะใชกบภาษาอะไร ตองมการกาหนดรหส (Encoding) ใหกบโปรแกรมดวยเพอทจะไดไมมปญหา เกดขนภายหลง
เนองจากภาษาไทยนน มตวอกษร ทคอนขางจะละเอยดออนมาก จงทาใหเกดปญหาบางครง จะ อานภาษาไทยไมได ดงนน กอนทจะ ลงมอในการสรางเวบเพจ ดวยโปรแกรม Macromedia Dreamweaver 8 นนตองมการกาหนดรหส (Encoding) เพอใหเวบเพจนนสา มารถอานและแสดง ภาษาไทยได อยางแนนอน
การตงคาใหโปรแกรมอานภาษาไทยได การกาหนดเรมท Font > Font setting = Thai สวนอนอาจไมสาคญ มาก สามารถตงตาม
มาตรฐานได แตใน Code View ตองเลอก Font ทแสดงไดทง ภาษาไทย และภาษาองกฤษและตองปรบ Size ใหสามารถมองเหนไดชดเจน และ ดงตวอยางทเลอกไวคอ Angsana New Size = 16 pt ดงรปท 4.8
รปท 4.8 แสดงการกาหนด Font ใหแสดงภาษาไทย
99
New Document: กาหนดคาใหหนาเวบแสดงภาษาไทยบนบราวเซอรได
การกาหนดคาใน New Document ถอวาสาคญทสดในรายการของ Preference เพราะชวยใหเ ราไมตองกงวลเรองการตงคาเอกสารเวบทเปดใหมอก โดยเราจะทาการตงคาในหนาน ตอจากการกาหนดคา ในหนาตาง Font รปท 4.8 โดยมการกาหนดเพมเตมจากคา Default ทโปรแกรมกาหนดมาใหแลว สงท กาหนดเพมเตมคอ
- Default encoding: ประเภทเอกสารตองกาหนดเปน Thai Windows ซงจาทาใหสามารถแสดงภาษาไทยในโปรแกรมเวบบราวเซอร เมอตงคาแลว โดยสามารถตรวจสอบท Tag <Meta> จะปรากฏดงน <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
- Use when opening existing files that don’t specify an encoding: คอกาหนดวาถาเปดไฟลเกา ขนมาทางานใหใชคาตวอกษรเดมทเคยระบไว แตหากไฟลเกาทเปดขนมาไมไดระบชดตวอกษร กใหใชคาทเราตงไวน (จากทเราระบใหม) ตรงนจะมผลใหทงไฟลเกา และ ไฟลใหมใชคาภาษาไทยตามท เรากาหนด ไดทงหมด
- Unicode Normalization From: โปรแกรม Macromedia Dreamweaver 8 จะมวธในการเขารหสทเปนตวอกษรแบบมาตรฐานเทานน คอ (Unicode) ซงการใชงานปกตจะใชแบบ C ดงตวอยาง
สวนรายการอนไมตองเปลยน เปนตามมาตรฐานของโปรแกรม ดงรปท 4.9
รปท 4.9 แสดงการกาหนดคาเรมตนใหหนาเวบใหม ทกหนา
100
การตรวจสอบการตงคา Encoding เพอใหเกดความมนใจ การกาหนด ภาษาไทย เมอเขามาในหนาสรางเวบเพจใหม ใหตรวจสอบ
การเขารหสท Page Properties หนานน ๆ กอนเสมอ เนองจากผสรางสวนใหญจะพบปญหาเรองไวรส ททาใหรหสทตงไว ถกไวรสเขาไปแกเปนรหสอน ๆ จงควรตรวจสอบกอนทจะพบวาเมอสรางหนาเวบเพจ มาจนเสรจแลวไมสามารถแสดงผลภาษาไทยได การตรวจสอบ ทาได ดงน
1. เลอกคาสงทเมนบา ร โดยเลอก Modify จากนนเลอก Page Properties (หรอสามารถเลอกไดทปม Page Properties ทอยบนพาแนล Properties Inspector)
2. จากนนใหเลอกทหมวดของ Title/Encoding 3. ในชอง Encoding จะตองแสดงในสถานะ Thai (Windows) เทานน (หากเปนอยางอน
แสดงวามการถกไวรสรบกวน หรอลอกไวแลว ใหแกไขเรองไวรสกอน ) 4. จากนนคลก OK ดงรปท 4.10
รปท 4.10 แสดงลาดบการตงคาการใชภาษาไทยกอนใชงานโปรแกรม
คาสง หรอ ฟงกชนตาง ๆ ของ Macromedia Dreamweaver โปรแกรม Macromedia Dreamweaver เปน โปรแกรมเขยนเวบ ทออกแบบมาเพอ ชวยจดการ
กบ เวบเพจ โดยผใชไมจาเปนตองมความร ในภาษา HTML ซงเปนภาษาสาหรบสรางเวบเพจ โดยตรง ดงนน โปรแกรม Macromedia Dreamweaver จงมฟงกชน ตางๆ มากมายซงแตละ ฟงกชน กจะ แสดงผลในลกษณะของ วนโดวส (Windows) หรอแถบคาสง ตวอยางของ ฟงกชน เชน (Behaviors) เปนฟงกชน
101
สาหรบใชในการควบคม การใชสครปตตางๆ ในการทจะเลอกใชฟงกชน ผใชตองทาความเขาใจ และเรยนรวธในการควบคมการทางาน ของฟงกชน ตางๆ ใหเขาใจเสยกอน วธเรยกใชฟงกชน ตางๆ ของโปรแกรม Macromedia Dreamweaver ทาไดดงน
เลอกคาสงทเมนบา รโดยคลกเลอกเมน Window กจะปรากฏ รายการของคาส งควบคม หรอฟงกชน ตางๆ ใหเลอก เปนกลม ๆ เรยกวา กลมหนาตาง พาเนล ดงรปท 4.11
รปท 4.11 แสดงหนาตางเมน Window สาหรบเรยกใชฟงกชนตางๆ
102
สาหรบฟงกชน ทเปนมาตรฐานในการ ทางานกบโปรแกรม Macromedia Dreamweaver ทมการใช งานบอยๆ กมอย 3 ฟงกชน ไดแก
1. ฟงกชน Insert จะเปนฟงกชน ทใชสาหรบควบคมเกยวกบวตถตางๆ เชน เลเยอร , รปภาพ ซงแถบเครองมอนจะประกอบไปดวย ชดเครองมอตางๆ คอ Characters, Common, Form, Frames, head, Invisible
2. ฟงกชน Properties เปนฟงกชน ลกษณะตางๆ เชน ใชในการกาหนดค าของขอความในเวบ สของตวหนงสอ รปภาพ ตาราง เปนตน
3. ฟงกชน Launcher เปนฟงกชน สาหรบใชในการจดการหรอควบคมในสวนของ สครปต หรอ Behavior ตาง ๆ ดฟงกชนตาง ๆ ดงรปท 4.12
รปท 4.12 แสดงหนาตางคาสง หรอ พาเนลกรป ตางๆ
103
5. รจกเครองมอของโปร แกรม เมอเขาสโปรแกรม Dreamweaver 8 ครงแรก จะปรากฏกรอบ Workspace Setup ใหคลกเลอก Designer แลวคลก OK เพอเขาสหนาจอการออกแบบของโปรแกรม Macromedia Dreamweaver 8 > จากนนจะ ปรากฏหนาจอ Start Page ซงเปนเครองมอสาหรบเรมต นการทางาน โดยตวเลอกจะแบงเปน 3 กลม สาหรบการสรางเวบเพจเปลาแบบพนฐาน ใหเลอกกลม Create New แลวคลกท HTML ดงรปท 4.13
รปท 4.13 แสดงการเปดโปรแกรม Dreamweaver 8.0
รปท 4.14 แสดงหนาเอกสารเวบ HTML ใหม
จะเขาสหนาตางโปรแกรมสรางหนาเวบเพจให ม ดงรปท 4.14 ทนท
104
จากรปท 4.14 สวนประกอบ ของเครองมอโปรแกรม ตามหมายเลขทแสดง มดงน 1. แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทกาลงใชงานอย 2. แถบคาสง (Menu Bar) เปนสวนทเกบคาสงตาง ๆ ทใชงานในโปรแกรม Dreamweaver 8 3. แถบ Insert Bar เปนกลมเครองมอทใชสรางองคประกอบตาง ๆ ในเวบเพจ ซง
ประกอบดวยชดเครองมอ 8 ชดดวยกน 4. เอกสารใหมทเปดขนมา 5. แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ขณะนน เชนการเปลยน
มมมองในการดหนาเวบเพจ 6. พนทออกแบบ (Document Window) เปนสวนทใชสาหรบใสเนอหาและจดองคประกอบ
ของเวบเพจ โดยประกอบดวยมมมองการทางาน 3 รปแบบดวยกนคอ Design, Code และ Code and Design
7. แถบสถานะ (Status Bar) เปนสวนท แสดงสถานะของการใชงานโปรแกรม ขณะนน 8. Properties Inspector กลมเครองมอควบคมคณสมบต ขององคประกอบตาง ๆ 9. Panel Group เปนกลมของแผงควบคม ทใชแทนคาสง ชวยเพ มความสามารถในการ
จดการและออกแบบหนาเวบเพจ 10. จดคลกเพอปด -เปด หนาตางพาเ นล
รายละเอยดของเครองมอทสาคญตองร มดงน แถบสถานะ หมายเลข 1 สวนทไวเลอก Tag HTML หรอ แสดงสถานะวาเรากาลงทางานอยท Tag HTML ใด เชนหากเราคลกเมาสทพนท ตาราง กจะแสดง Tag Table โดยมหนาตาง Properties เปนสวนของคาสง ทใชในการกาหนดคณสมบตขององคประกอบตาง ๆ ทเราตองการเปลยนแปลงหรอตกแตง หมายเลข 2 แสดงเครองมอปรบขนาดของพนททางาน สามารถยอขยาย หรอใช Handle รปมอคลกลากไป เปลยนตาแหนงได หมายเลข 3 แสดงขนาดการแสดงผลของหนาตาง Windows หมายเลข 4 แสดงขนาดความเรวในการโหลดไฟล โดยใชมาตรฐานความเรวในการโหลด ท 56 K/sec ดงรปท 4.15
รปท 4.15 แสดงสวนประกอบแถบสถานะ
105
แถบ Insert Bar รปท 4.16 แสดงเครองมอใน Insert bar จากรปท 4.16 แถบ Insert Barประกอบดวยเครองมอ 8 ชด ตามคาทปรากฏ ในรป มความหมายดงน Common แสดงเครองมอทเรยกใชบอย เ ชน ตาราง รปภาพ การสรางลงค เปนตน Layout แสดงเครองมอชวยการออกแบบหนาเวบ Form แสดงเครองมอทใชสรางแบบสอบถาม และตวเลอกตางๆ Text แสดงเครองมอจด ปรบแตงตวอกษร HTML แสดงเครองมอชวยในการเขยน HTML และจดการรปแบบ Application แสดงเครองมอชวยจดการระบบเครองมอ และจดการขอมล Flash Elements แสดงเครองมอจดการกบไฟลแฟล ช Favorite แสดงเครองมอทใชจดการบนทกงานทใชบอยใหสามารถเรยกใชไดเรว
106
มมมองตาง ๆ ของ Document Windows ในการออกแบบหนาเวบเพจดวยโปรแกรม Dreamweaver 8 เราสามารถเลอกรปแบบหรอมมมองของหนาตางเวบเพจได 3 รปแบบดวยกน ดงรปท 4.17 คอ
รปท 4.17 แสดงมมมองการทางานของโปรแกรมม 3 รปแบบ
1. Code ใชแสดงหนาจอออกแบบเปนภาษา HTML
รปท 4.18 แสดงมมมอง Code
2. Spit (Show Code and Design View) ใชแสดงหนาจอออกแบบเปนภาษา HTML และหนาจอ ออกแบบจรงพรอมกน
รปท 4.19 แสดงมมมอง Spit
107
3. Design ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบ จรง
รปท 4.20 แสดงมมมอง Design
6. การสรางโฟลเดอร (Folder) และ ไซต(Site)เกบงาน การเรมตนสรางเวบไซตใหมในโปรแกรม Dreamweaver จะตองเรมตนจากการ สรางโฟลเดอรเกบไฟลขอมล ของเวบไซตไวกอน โดยควรออกไปท My computer เลอกไดรฟ ทาการสรางโฟลเดอรเปนโฟลเดอรหลก(Local root) การตงชอโฟลเดอร ขอแนะนาใหใชภาษาองกฤษตวพมพเลก ใชชอสน ๆ โดยชอตองสอใหรวาทางานอะไร ใหใคร เชน web_prasit แลวใหสรางโฟลเดอรยอย เกบรปภาพตาง ๆ ซงอาจมหลายโฟลเดอรยอยขนอยกบลกษณะงา น และปรมาณงานทจะนามาใช เมอสรางโฟลเดอรหลก และโฟลเดอรยอย เรยบรอยแลว จงกลบเขาโปรแกรม Dreamweaver เมอเรมสรางไฟลเวบเพจใหม โปรแกรมมหนาตาง Pop up ขนมา ใหสรางไซต (ดงหมายเลข 1 รปท 4.21) ใหคลกปม Manage Site เพอเขาสหนาตาง Manage Site (ดงหมายเลข 2 รปท 4.21) ถาเขามาทางานเกามไซตเดมแลว กเลอกชอไซตใน รายการ แลวคลกปม Done จะเขาสการทางานไดเลย ถา สรางไซตใหม คลกปม New จะเขาสหนาตาง สรางไซตใหม แตหากคลก Cancle ทหมายเลข 1 จะเขาหนาตางสรางเวบเลย เราสามารถสรางไซตได โดย ใชเมน Site ในหนาตางออกแบบเวบ กไดเชนกน ดรปท 4.21
108
รปท 4.21 แสดงขนตอนการเรมสราง Site
การสรางไซต (Site) ของโปรแกรม Dreamweaver จะเกบทพาเนล File เปนเครองมอเสรมการทางานใหสามารถทางาน เชน การเปด บนทก หรอสรางการเชอมโยงไฟลขอมลตาง ๆ ในขณะออกแบบเปนไปอยางรวดเรว หากไมไดสรางไซตการทางาน เปด บนทก หรอสรางการเชอมโยงจะตองเขาไปเปดโฟลเดอรเกบงานทกครง ทาใหทางานชา ตอไปนจะเปนการ แสดงขนตอนการสรางไซตใหม ดวยวธใชเมน Site จากหนาตางทางานออกแบบ เพอจะไดเหนขนตอนไดทงหมด ซงการใชคาสงสรางจากเมน Site กบ การคลกปม New ตามรปท 4.21 จะเขาสหนาตางสรางไซตใหมไดเชนเดยวกน ดงน 1. คลกคาสง Site>New Site >จะปรากฏหนาตาง ๆ สรางไซต ใหม มใหเลอกสราง 2 วธ คอ Basic และ Advanced > ในทนจะแสดงวธ แบบ Basic กอน > ใหคลกเลอก Basic
2. จะปรากฏกรอบ Site Definition ขนมา 3. ใหพมพชอเวบไซตทตองการ ดงตวอยาง พมพชอ e-learning
4. ในชอง What is the HTTP address(Url) of your site? ยงไมตองใส คลกปม Next ดงรปท 4.22
109
รปท 4.22 แสดงขนตอนการสราง Site แบบ Basic
5. ในหนาตางท 2 > ทคาถาม Do you want to work with a server technology…เนองจากเรายงไมไดใช Server ตามขนท 4 จงใหคลกเลอก No, I do not want to use a server technology แลวคลกปม Next 6. ในหนาตาง path 3 >How do you to work with your filed during development? ถามเกยวกบการทางานกบไฟล ระหวางดาเนนการ ซงตองตอบขอแรก คอเราจะทางานทเครองของเราจนเสรจกอนแลว Upload ภายหลง ใหเลอกตอบตามตวอยาง หมายเลข 6
7. ทหมายเลข 7 Where on your computer do you want to store your files? คอถามวาเราจะเกบ งานไวทไหนในเครอง ใหคลกปม Brown ระบชอไดรฟและโฟลเดอรทจะใชเกบขอม ลของเวบไซตซงไดแนะนาใหสรางไวกอนแลว ใหคลกเลอก Folder ทสรางไว จากนนคลกปม Next ดงรปท 4.23
110
รปท 4.23 แสดงขนตอนการสราง Site แบบ Basic
8. คลกทชอง How do you connect to your remote server? แลวคลกตวเลอก None จากนนใหคลกทปม Next
9. จะแสดงกรอบสรปรายละเอยดทเรากาหนด ใหเหนวาไดกาหนดเวบไซตใหมเปน ทเรยบรอยแลว
10. คลกทปม Done เพอเรมตนการออกแบบเวบเพจ จะปรากฏชอของเวบไซต พรอมทงตาแหนงทเกบเวบไซต แสดงไวใน Panel Group ดงรปท 4.24
111
รปท 4.24 แสดงขนตอนการสราง Site แบบ Basic
วธสราง Site แบบ Advanced ใหเลอกรายการ Local Info แลวตงชอ Site ระบโฟลเดอรเกบงาน โดยเงอนไขตาง ๆ เชนเดยวกบ แบบ Basicเพยงแตเรา จะเหนรายการทตองระบอยในหนาเดยวกน ใหเลอก Local Info > ตงชอ Site name > Local root folder โดยการคลกปม Browse เลอก Folder ทสรางเตรยมไวแลว > Default images folder โดยการคลกปม Browse เลอก Sub Folder ชอ images ทสรางไวใน Local root folder แลว > ท Links relative to เลอก Document > ท HTTP address: ไมระบ เพราะไมม Url > ท Cache ใหคลก Enable Cache เพอเปดใชหนวยความจา Cache จะทาใหการทางานเรวขน > เสรจแลวคลก OK ซงจะเหนวาการสราง Site แบบ Advance สามารถทาไดรวดเรวกวาแบบ Basic และเราใสขอมลภายในหนาตางเดยว ดงรปท 4.25
112
รปท 4.25 แสดงการสราง Site แบบวธ Advanced
จะปรากฏโฟลเดอรและไซต ทพาเนลไฟล บนหนาตางออกแบบดานขวา ตามหมายเลข 3 ดงรปท 4.26
รปท 4.26 แสดงสรางในพาเนล File
113
7. เรมตนสรางเวบเพจกบ Dreamweaver 8.0
โปรแกรม Dreamweaver เปนโปรแกรม ออกแบบสรางเวบในแบบ WYSIWYG คอสามารถใสเนอหา รปภาพไดเหมอนการใชโปรแกรม MS Word ออกแบบเอกสาร โปรแกรมจะสรางรหสคาสง HTML หรอ Tag ใหอตโนมต ผใชไมจาเปนตองมความรดาน ภาษา HTML มากนกกสามารถสรางเวบได เพยงแตอาจแกปญหาไดไมด เทาผทมพนฐานภาษ า HTML เพราะการสรางเวบจะตองสามารถดรหสคาสง เพอแกไข หรอเพมคาสงบางอยางลงไปไดดวย การทางานสรางเอกสารเวบแบงได 2 กรณ คอ กรณการสรางเวบใหม กบ กรณ เปดเวบทสรางไวแลวมาแกไขตอ ซงในทนจะเนน เฉพาะการสรางไฟลใหม เพราะการเปดไฟลทเกบไวมาทางาน ผออกแบบเพยงเขาเมน File > Open กเปดงานมาทางานตอได เลย การเรมตนสรางเวบเพจดวยโปรแกรม Dreamweaver8.0 ตองเขาใจลาดบการทางาน การกาหนดกรอบพนทเนอหาใหเปนระเบยบกอน แลวจงดาเนนการใสเนอหา ตกแตงควา มสวยงามดวยภาพกราฟก ใสเทคนคสรางความนาสนใจตอไป การจดเนอหาในเอกสารนไดจดเรยงลาดบไวตงแตขนเรมตน ดงน
1. สรางหนาเวบเพจใหม การ เรมสรางเวบเพจใหม ทาได 2 วธดงน วธท 1 เลอก Design > เลอก Create New คลกท HTML จะเขาสหนาตางโปรแกรม เราจะไดหนาเอกสารเวบสาหรบออกแบบใหม 1 หนา ดงรปท 4.27
รปท 4.27 แสดงการเปดสรางเอกสารเวบเพจใหมเมอเรมใชโปรแกรม
114
วธท 2 ใชวธสรางไฟลใหมจากเมนไฟล ทาไดดงน 1. คลกคาสง File > 2. New... ทแถบเมน 3. จะปรากฏกรอบ New Document ขนมา โดยคลกทตวเ ลอก Basic page ในชอง Category 4. คลกตวเลอก HTML ทชอง Basic page 5. คลกปม Create ดงรปท 4.28
รปท 4.28 แสดงการเปดสรางเอกสารเวบเพจใหมเมอใชโปรแกรมแลว
115
2. การกาหนดคณสมบตพนฐานของ หนาเวบเพจ การสรางเวบเพจทกครง นอกจากตองกาหนดคาพนฐานแกตวโปรแกรมใน Edit Preferences และกาหนด Site ในพาเนล File ดงไดกลาว มาแลว เมอจะลงมอออกแบบหนาเวบเพจ จะตองทาการกาหนดคาพนฐาน เชน ชอหนาเวบเพจ (Title) สพน (Background color) สของขอความ (Text color) เพอใชเปนคาพนฐานของหนาเวบ การกาหนดคณสมบต พนฐานหนาเวบทาไดจากรายการใน Page Properties ทาไดดงน เรมท คาสง Modify > Page Properties ทหนาตาง Page Properties มรายการ 2 สวน คอ 1. Category คอรายการม 5 รายการ ดงหมายเลข 1 ใหเลอกตงคาทจาเปนกอน ดงรปท 4.28 2. กาหนดลกษ ณะการแสดงผลของแตละรายการใน Category ดงตวอยางทนามา แสดง 2 ตวอยาง คอ 2.1 Appearance Appearance เปนคณสมบตทวไป ของหนาเวบเพจ มรายละเอยด ดงรปท 4.29
รปท 4.29 แสดงการกาหนดคา Appearanceใหหนาเวบใหม
116
ความหมายของ ชองรายก ารทใหใสรายละเอยด ใน Appearance มดงน 1. Page font รปแบบตวอกษร 2. Size ขนาดตวอกษร 3. Text color สของขอความทวไป 4. Background color สพนหลงของหนาเวบเพจ 5. Background image ภาพฉากหลงของหนาเวบ
6. Repeat วธแสดงภาพฉากหลงแบบซา ๆ 7. Left margin ระยะขอบดานซายของหนาเวบ 8. Right margin ระยะขอบดานขวาของหนาเวบ 9. Top margin ระยะขอบดานบนของหนาเวบ
10. Bottom margin ระยะขอบดานลางของหนาเวบ
2.2 Title/Encoding Title เปนการกาหนดชอหวเรองหนาเวบ และ Encoding Title เปนการกาหนดภาษา ทใชของ เวบเพจ ใหกาหนดเปน Thai (windows) เลอกรายการแลวคลก OK ดงรปท 4.30
3. การใชตารางกาหนดพนทแสดงผลเนอหาบนเวบ ตาราง (Table) นบเปนเครองมอสาคญในการจดการระเบยบขอมล เพราะการออกแบบเวบเพจนนเราจะตองกาหนดตาแหนงก ารแสดงผลขอมล รปภาพ หรอกราฟกตาง ๆ บนบราวเซอร ใหตรงกบ การออกแบบทเราสรางใหมากทสด การผดเพยนจากตาแหนงทออกแบบกบการแสดงผลบนบราวเซอรจะ เกดเสมอ เชน ขนาดตวอกษรใหญขน หรอมชองวางเกดขน ตาแหนงบรรทดเปลยนไป ตารางจะเปนเครองมอทดทสดทจะชวย กาหนด ตาแหนงใหเราได การใสตารางทาไดดงรปท 4.31 1. คลกตาแหนงวางตาราง > 2. เลอกรายการคาสง Common > 3. เลกเลอกคาสงแทรกตาราง > จะปรากฏตารางใหกาหนดรายละเอยด (ดงหมายเลข 4 – 8) >
รปท 4.30 แสดงการกาหนดหวเรองใหหนา เวบใหม
117
หมายเลข 4. กาหนดจานวนแถว (Rows) และจานวนคอลมน (Columns) หมายเลข 5. ความกวางของตาราง สามารถเลอกเปน Percent หรอ pixels หมายเลข 6. กาหนดความหนาของเสนตาราง หมายเลข 7. กาหนดระยะหางของ Objects กบเสนขอบตารางแตละเซลล หมายเลข 8. กาหนดระยะระหวางเซลล > 9. เสรจแลว คลก OK ดงรปท 4.31
เมอไดตารางแลวเรากสามารถ เลอกพนทตารางแลวทาการ ปรบแตงแกไข ได โดยเมอเลอกพนทแลวคลกเมาสปมขวา จะปรากฏคาสงตามรายการใหเราเลอกใชคาสงได ดงรปท 4.32
รปท 4.31 แสดงการใชคาสงสรางตาราง
118
4. การใสขอความบนหนาเวบ การแทรกขอความในหนาเวบเพจ ผออกแบบเพยงแตพมพขอความทตองการลงไป หรออาจจะคดลอก (Copy) ขอความทพมพไวเรยบรอยแลวจากไฟลอนมาใชกได ทงนขอแนะนาใหใชตารางชวย กาหนดพนทเนอหาเหลานนไว จะดทสด 4.1 การพมพข
รปท 4.32 แสดงคาสงเพอแกไข ปรบแตง ตาราง
อความในหนาเวบเพจ การพมพขอความในหนาเวบเพจสามารถทาไดงาย โดยพมพขอความทตองการ เมอตองการขนบรรทดใหมใหกด Enter (Tag <P>) หรอกด Shift + Enter (Tag <br>) ในกรณทตองการใหระยะบรรทดไมหางกนมาก 4.2 การคดลอกขอความจากไฟลอนมาไวในหนาเวบเพจ เราสามารถคดลอกขอความทพมพไวดวยโปรแกรมอน แลวนามาวางไวในหนาเวบเพจได ซงสวนมากในการทาเวบไซต มกจะนยมพมพขอความทตองการเตรยมไวโดยใชโปรแกรม Notepad (นามสกลเปน txt) หรอ จากไฟล Word (.doc) กไดเชนก น 4.3 การเวนวรรคระหวางขอความ การใสขอความบนหนาเวบเพจนน ปกตแลวโปรแกรม Dreamweaver 8 จะเวนวรรคใหเพยง 1 ครงเทานน แตอยางไรกตามเราสามารถทจะเวนวรรคมากกวา 1 ครงได โดย กดแปนพมพ <Ctrl>+<Shift>+<Space> ซงหากมการกาหนดท Edit Preferences > General > Allow multiple consecutive spaces ดงกลาวแลวในรปท 4.7 กจะสามารถเคาะ Space bar เพอเวนวรรคไดเลย
119
4.4 การจดรปแบบขอความบนหนาเวบ การจดรปแบบอกษรในงานออกแบบเวบเพจดวยโปรแกรม Dreamweaver 8 สามารถทาไดดงนคอ รปท 4.33
1. ระบายขอความทตองการจดรปแบบอกษร 2. กาหนดคาในสวนของพาเนล Properties
4.5 การแทรกสญลกษณพเศษ สญลกษณพเศษทไมมในแปนพมพ สามารถจะแทรกเพมเตมไดจากแถบ Characters โดยทาไดดงนคอ ดงรปท 4.34
รปท 4.33 แสดงการกาหนดคาใหกบตวอกษร (Font)
1. วางเคอรเซอรในตาแหนงทตองการแทรกสญลกษณพเศษ 2. คลกเลอกแถบคาสง "Text" 3. จากนนคลกเครองมอ เลอกสญลกษณตามตองการ
รปท 4.34 คาสงแทรกสญลกษณพเศษ
120
4.6 การใสเสนคนเนอหา 1. การแทรกเสนแบงเนอหา มวธการดงนคอ
> เรมจาก วางเคอรเซอรในตาแหนงทตองการแทรกเ สน > คลกเลอกแถบ "HTML" บน
Insert Bar > จากนนคลกเครองมอ จะไดเสนคนเนอหาตามตองการ 2. การปรบแตงสเสน เมอไดเสนมาแลว เราสามารถปรบแตงเ สนได ดงน > คลกทเสนคนทตองการปรบแตง > กาหนดคาในสวนของพาเนล Properties ซงประกอบดวย
W คอความยาวของเสน ซงจะเลอกกาหนดเปนแบบพกเซล หรอ % กได H คอความหนาของเสน คาปกตจะกาหนดความหนาไว ท 3 พกเซล Align คอการจดวางเสน จะเลอกแบบชดซาย กลาง ขวา กได Shading คอการกาหนดใหเสนเปนแบบเสนทบหรอเสนโปรง
4.7 การบนทก (Save) เวบเพจ ไฟลเวบเพจของ Dreamweaver 8 ถายงไมไดบนทก (Save) ขอมลททาการแกไข จะสงเกตไดจากบนแถบชอเรอง (Title Bar) จะมเครองหมาย * ปรากฏอยทายชอไฟล ซงเปนเครองหมายเตอนวายง ไมไดบนทก (Save) ขอมลของไฟลนน ไฟลขอมลของ Dreamweaver 8 จะถกจดเกบใหเปนไฟลประเภท html ใหอตโนมต คาสงทใชในการจดเกบขอมล สามารถเล อกใชตามรปแบบการออกแบบไดดงนคอ
File>Save… จดเกบไฟลโดยใชชอเดม File>Save As… จดเกบไฟลโดยใชชอใหม File>Save as Template… จดเกบเปนไฟลเทมเพลต File>Save to Remote Server จดเกบไวท Remote Server File>Save All จดเกบทกไฟล ทเปดใชงานอย
นอกจากนยงสามารถใชแปนพมพ <Ctrl>+<S> แทนการใชคาสง File>Save… หรอ File>Save As… ได
4.8 การเปด (Open) ขนมาแกไข เวบเพจทไดออกแบบยงไมเสรจหรอตองการทา การแกไขใหม สามารถเปดเวบเพจนน ๆ ขนมาแกไขได ตามขนตอนดงน คอ
1. เรยกใชงานในสวนของ Group Panel ซงเราไดสราง Site ไวแลว จากนนใหคลกเลอกชอของเวบไซตทตองการแกไขขนมา
2. ดบเบลคลกชอไฟลประเภท htm หรอ html ทตองการแกไข 3. ไฟลทตองการแกไขจะปรากฏขนมา
ดงรปท 4.35
121
5. การดผลการออ กแบบบนบราวเซอร การออกแบบเวบเพจไมวาจะ ดวยโปรแกรม Dreamweaver8.0 หรอโปรแกรมใด ๆ กตาม ผออกแบบตองทาการตรวจสอบการแสดงผลดวยโปรแกรมเวบบราวเซอร (Web Browser) ทกระยะ ทมการใสเนอหา รปภาพ หรอกราฟกตาง ๆ เพอตรวจสอบผล เพราะการแสดงผลบางอยางไมสามารถ จะแสดงผลในบราวเซอรได คาสงเพอ ดผลทเวบบราวเซอร (Browser) ของโปรแกรม Dreamweaver ทาได 3 วธ ดงน (ทกครงทสงดผลตองบนทกไฟลเวบเพจนนกอน ถาไมบนทกโปรแกรม จะเตอนเสมอ)
วธท 1 ใชคาสง File > Preview in Browser > Explorer วธท 2 คลกทปมหรอไอคอนคาสง Preview in Browser ดงรปท 4.36 วธท 3 ใหใชคลกทคย F12 ซงเปนวธทงายและเรวทสด
รปท 4.35 แสดงการเปดไฟลมาแกไขจาก Group Panel
รปท 4.36 แสดงการใชปมคาสง ดผลบนบราวเซอร
122
สรปบทเรยน ในหนวย การเรยนท 4 นนกเรยนตองสามารถตดตงโปรแกรม ทาความเขา ใจเครองมอของโปรแกรม ทดสอบคาสงตาง ๆ ตามทไดแนะนาไว โดยเฉพาะการตงคาเรมตนใน Preferences เรองการกาหนด ภาษา การแสดงผลเปน Thai windows นบวาสาคญตอนกออกแบบเวบทใชภาษาไทยมาก หากออกแบบไปแลวมาตงคาภายหลงจะมปญหามาก ทตองแกไข ซงหากนกเรยนสามารถแกไขรหสคาสง ไดปญหากจะนอย เชนเรองภาษาไทยกเขาไปแกไขท Tag META ในสวน Head เปนตน การเรยนรการสรางเวบตามเนอหาน นกศกษาตองทาการทดสอบปฏบต ตามคาสงท กลาวถงทกคาสง แลวทาใบงานเพอทดสอบความเขาใจ เมอไดทาใบงานทกาหนดได แสดงวาเรามความเขาใจในสวนเนอหานแลว จง เรยนรในหนวยการเรยนตอไปได
.............................................................................................
123
เพอใหนกศกษาทบทวนความรในบทเรยน ใหตอบคาถามตอไปน วาเรามความรในสงตอไปนเพยงใด
แบบฝกหดประจาบทเรยน
คาสง ใหตอบคาถามตอไปน 1. บรษทผผลตโปรแกรม Dreamweaver คอ......................................................................................... 2. โปรแกรม Dreamweaver กบ “WYSIWYG” อานวา "วซซวก" มความหมายสมพนธกนอยางไร .... ...................................................................................................................................................... 3. เมอเรมตนใชโปรแกรมทตดตงใหม ตองตงคาพนฐานทคาสงใด และตงคาอะไรบาง ....................................................................................................................................................... ................................................................................................................................................................. 4. เพราะเหตใดกอนลงมอออกแบบสรางหนาเวบ จงกาหนดใหตองเรมสราง Folder และ Site กอน ................................................................................................................................................................. 5. Meta Tag : คาสงพเศษ เพอชวยอานวยประโยชนตอการ สรางเวบใชระบไวในสวนใดของ คาสง HTML ..............................ใหหาตวอยางคาสง Meta มา 4 คาสง ...............................…… ................................................................................................................................................................. 6. คาสงเรยกใชตารางใน Dreamweaver มกวธอะไรบาง……………………………………………… ………………………………………………………………………………………………………… 7. การกาหนดชนด แบบ ตวอกษร มขนตอนการกาหนดอยางไร ……………………………………...
………………………………………………………………………………………………………… 8. การซอนเสนตารางมใหแสดงผลบนบราวเซอรทาอยางไร ………………………………………… …………………………………………………………………………………………………............. 9. ตองการกาหนดพนทเนอหา กวาง 800 พกเซล เมอแสดงผลใหอยกงกลางหนาจอเสมอ ตอง ปฏบตอยางไร ................................................................................................................................. ………………………………………………………………………………………………………….
10. หากมการแกไขหนาเวบ แลวสงแสดงผลดวยการกดป ม F12 ทนทจะเกดเหตการณอะไรขนเสมอ และตองแกไข อยางไร ………………………………………………………………………………...... ………………………………………………………………………………………………………….
124
อางอง
กตต ภกดวฒนะกล , Dream weaver MX 2004,กรงเทพ , เคทพ เกรยงศกด เจรญวงศศกด,ออกแบบและสรางเวบสวยดวย Dream weaver CS3,กรงเทพ ; ซเอดยเคชน,2551.
สรางโฮมเพจดวยตนเองกฤษณะ สถต , ,กรงเทพ:Info press. ประภาพร ชางไม , สรางเวบสวยดวย Dreamweaver 8.0 , กรงเทพฯ : ดจอารต. การสรางเวบไซต พรเศก จตตแจง , ,กรงเทพ ; Success Media. แหลงสบคน : http://www.macromedia.com/.../dreamweaver/ ) http://www.nectect.or.th http://www.webthaidd.com/dreamweaver/news.php?id=445 http://cannot.info/page?p=1310520034773 http://www.pyayam.com/article/show.php?Category=webpage&No=67
top related