หนวยการเรยนท 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