บทที่ 1 การเริ่มต นโปรแกรม Dreamweaver€¦ ·...

Post on 17-Aug-2020

6 views 0 download

Transcript of บทที่ 1 การเริ่มต นโปรแกรม Dreamweaver€¦ ·...

1

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

บทท 1 การเรมตนโปรแกรม Dreamweaver

1. ขนตอนการเขาสโปรแกรม วธการเขาสโปรแกรมมขนตอนดงน

1. คลก ท Taskbar ดานลาง 2. เลอกท Program > Macromedia >Macromedia Dreamweaver 8 โปรแกรมจะทางาน และเปดหนาตางโปรแกรมขนมา 3. โปรแกรมถกเปดขนแลว

2

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

สวนประกอบของโปรแกรม สวนท 1 เปดงานทกาลงทาคางอย โปรแกรมจะแสดงงานทเปดใชบอยๆ ไวดานบน สวนท 2 เลอกประเภทงานทตองการสรางใหม ไดแก HTML, PHP, ASP, JavaScrip ฯลฯ สวนท 3 เลอกงานตามฟอรมทโปรแกรมจดไวใหโดยมรปแบบใหเลอกหลายประเภท

3

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

สวนท 4 เรยนรโปรแกรมทางเวบไซด www.Macromedia.com สวนท 5 เรยนรโปรแกรมจากโปรแกรมชวยสอน

4

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

2. หนาจอการทางานหลกของโปรแกรม

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

1. Title Bar คอ สวนทแสดงชอโปรแกรม และชอไฟลทกาลงทางานอย 2. Menu Bar คอ สวนทรวมคาสงการทางานทงหมด แลวแบงยอยตามประเภทและในคาสงหลกมกจะม

เมนลดใหกดดวย 3. Object Palette คอ แถบแสดงปมตางๆ ของโปรแกรม

สามารถเลอกประเภทคาสงไดดวยการคลกท Common จะปรากฏเมนขนมา

5

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

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

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

• กลมเครองมอ Forms เปนทรวบรวมเครองมอสาหรบทใชในการสรางแบบฟอรมสอบถาม และตวเลอกตาง ๆ

• กลมเครองมอ Text เปนทรวบรวมเครองมอสาหรบจดวาง และปรบแตงตวอกษรบนหนาเวบ

• กลมเครองมอ HTML เปนทรวบรวมเครองมอสาหรบจดการภาษา HTML บนหนาเวบ

• กลมเครองมอ Application เปนทรวบรวมเครองมอสาหรบสรางแอพพลเคชนตดตอกบฐานขอมล

• กลมเครองมอ Flash elements เปนเครองมอสาหรบนาองคประกอบทสรางจากโปรแกรม Flash มาวางบนหนาเวบ

• กลมเครองมอ Favorites สามารถเลอกเครองมอทใชบอยจากแตละกลมเครองมอมาใสในเมนนไดตามทตองการ

6

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

ถาคลก Show as Tabs การแสดงกลมเครองมอจะเปลยนเปนแทบ

4. Toolbar คอ แถบเครองมอสาหรบการใชงานดาน HTML และอนเตอรเนต ประกอบดวย

• Show Code View แสดงการทางานในรปแบบ HTML • Show Code and Design Views แสดงการทางานแบบ HTML ควบคกบแสดง

พนทออกแบบ

• Show Design View แสดงการทางานแบบแสดงพนทออกแบบ

• Document Title ตงชอของเวบเพจ

• Check Errors ตรวจสอบขอผดพลาดจาก Browser

• File Management จดการกบไฟลๆ ทอยในเวบเพจ

• Preview / Debug in Brower ทดลองดเวบเพจของ Browser หรอกด F12

• View Options มมมองในการทางานเพมเตม

5. หนาตางออกแบบเวบเพจ ใชพมพขอความและจดเรยงรปภาพ 6. Tag Selector ใชควบคมการทางานในรปแบบ HTML 7. Window Size กาหนดพนทใชงานตามตองการ 8. Estimate Download Time แสดงเวลา ทใชในการดาวโหลด 9. Properties ใชกาหนดรปแบบตางๆ ของตวอกษร และรปภาพ รวมถงการสรางลงก

7

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

หนาตาง Properties สามารถจะเปดปดไดตามตองการดวยการคลกเครองหมายถกทคาวา Properties 3. วธการสราง Site

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

8

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

9

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

10

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

11

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

12

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

4. การสรางขอความบน Dreamweaver 8

การสรางขอความ Dreamweaver 8 มอยดวยกน 3 วธ ดงน

1. พมพขอความลงในสวนของหนาจอการทางาน เปนวธทงายทสด

2. พมพขอความจากโปรแกรมอน แลว copy มาใสทหนาจอการทางาน เปนอกความสามารถหนงของ Dreamweaver 8 ทสนบสนนการโอนยายขอมลจากโปรแกรมอน เชน Word, Excel และ Notepad โดยสามารถนามาใสทหนาจอการทางานไดเลย และยงแสดงผมไดเหมอนตนฉบบอกดวย

13

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

3. พมพในรปแบบการทางานแบบ HTML ซงเหมาะสาหรบคนทถนดภาษา HTML โดยคลกท แลวพมพขอความลงในสวน <BODY> หรอ <HEAD>

ขอควรจา ในเรองของการพมพขอความ ควรตรวจเรองของ Font ใหด เพราะบาง Font อานไทยไมได โดนสามรถตงคาไดโดยการกด Ctrl + U แลวกจะไดหนาตาง Preferences ดงรป

14

กรมโรงงานอตสาหกรรม

Macromedia Dreamweaver 8

วธการเปลยนรปแบบตวอกษร 1. ลากเมาสขอความทตองการเปลยน 2. คลกท Font เพอเลอก Font ทตองการ ควรเปน MS Sans Serif

15Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

การเปลยนขนาดตวอกษร 1. ลากเมาสขอความทตองการเปลยนแปลง 2. คลกท Size เพอปรบขนาดตามตองการ 3. ขนาดตวอกษรจะเปลยนไป

16Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

วธการเปลยนสตวอกษร 1. ลากเมาสขอความทตองการเปลยนแปลง 2. คลกทปม Text color เพอเลอกสทตองการ 3. สตวอกษรไดเปลยนสไปตามทตองการ

17Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

การตกแตงและจดรปแบบขอความจากกลมเครองมอ Text

นอกจากนในเมน Text จะมคาสงเพมเตมในการตกแตงลกษณะตวอกษร ตงแตการกาหนดรปแบบตวอกษร ขนาด ส และสไตลของตวอกษร - ขนบรรทดใหมแบบมระยะหางของบรรทดเยอะๆ ใหกด Enter - ขนบรรทดใหมแตตองการใหบรรทดชดกนใหกด Shift+Enter - การเวนวรรคใน Dream จะเวนวรรคไดทเดยว

การตงคาใหสามารถเวนวรรคได เลอก Menu Bar -- > Preferences... เมอเลอกแลวจะปรากฏหนาตาง Preferences

ตรง Alow Mutiple Consecutive Spaces ซงจะทาใหสามารถเวนวรรคไดปกต

18Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 2 การเตรยมความพรอมกอนสรางเวบไซต

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

- โฟลเดอรเกบไฟลรปภาพตางๆ - เกบไฟลขาวสารทประกาศในเวบไซต - ไฟล Homepage

คลกขวาตรงชอ Site และเลอก New Folder

ปอนชอโฟลเดอรทตองการสราง

19Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

- การแบงสวนของหนา Website แบงหนา web ออกเปน 4 สวน แบงหนา web ออกเปน 3 สวน แบงหนา web ออกเปน 2 สวน 3. เตรยมรปภาพสาหรบ Website รปภาพทจะนามาประกอบใน website สามารถสรางจากโปรแกรมตกแตงรปภาพตาง ๆ หรอ Download จากอนเทอรเนต

20Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

เชน การเตรยมภาพจากโปรแกรม Adobe Photoshop หรอการ Download จากอนเทอรเนต ซงอาจจะใชพวก Search Engine มาชวยในการคนหาภาพในเวบไซตได เชน www.google.co.th

21Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 3 การสรางตาราง

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

แถว

คอลมน

Rows จานวนแถวทตองการ Columns จานวนคอลมนทตองการ Table Width ความกวางของตาราง Border thickness ความหนาของขอบตาราง Cell padding ระยะหางระหวางขอความ ภายในเซลลกบขอบเซลล Cell spacing ระยะหางระหวางแตละ เซลลในตาราง

22Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

- เลอกใชเครองมอ - เลอกภาพทตองการจากนนกดปม OK

โปรแกรมจะถามกรณทภาพอยนอก site แนะนาใหตอบ Yes เพอบนทกไฟลรปไวใน Site เวลาเคลอนยายขอมลไปเครองอนหรอทอนไฟลรปภาพจะไดไมหายไป ใสคาอธบายรปภาพ กรณนาเมาสไปวางใกล ๆ จะแสดงขอความทปอนในชองของ Alternate text

ควรเกบไฟลรปภาพไวในโฟลเดอร Images จากนนกดปม

23Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

รปแบบตวอกษร ตาแหนงการจดวาง การเชอมโยง

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

24Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

การแทรกแถวและคอลมน คลกเลอกแถวหรอคอลมนทตองการแทรก จากนนคลกขวาและเลอกคาลง Table และเลอกตองการแทรกแถวหรอคอลมน หรอเพมจานวนแถวหรอคอลมนใน สวนของ Properties แตการเพมแบบนจะเปนการเพมตอทายตารางใหจะไมใชการแทรก การลบแถวและคอลมน เลอกแถวหรอคอลมนทตองการลบ จากนนคลกเมาสขวา และเลอกคาสง Table และเลอกคาสง Delete Row หรอ Delete Column

25Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

การรวมเซลล 1. เลอกเซลลทตองการจะรวม และตองเปนเซลลทตดกน

2. เมอเลอกเซลลเรยบรอยแลวกดทเครองมอ

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

26Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

สามารถเลอกวาจะแยกแถว (Rows) หรอคอลมน (Columns)

แสดงความกวางของตาราง

ปรบขนาดของตาราง W (กวาง) H (สง)

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

ปรบขนาดของเซลล W (กวาง) H (สง)

1. คลกชองเซลลทตองการสรางตารางซอนขางใน 2. คลกเครองมอ

27Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

3. กาหนดจานวนแถวและคอลมน เชน ตวอยาง 5 แถว และ 1 คอลมน

4. ตวอยางผลลพธการซอนตารางในเซลล

ตกแตงสพน สเสนตาราง

28Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

ผลลพธการใสภาพเปนพนหลงของตาราง การปรบเสนขอบของตาราง Cell Pad ระยะหางระหวางขอความกบเสนขอบตาราง Cell Space ขนาดของเสนขอบตาราง Border กาหนดความหนาของเสนตาราง ถาตงคาเปนเลขศนย คอไมมเสนตาราง

29Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 4 การเชอมโยง (Link)

การเชอมโยงมหลายรปแบบ โดยจะแบงการเชอมโยงดงน

1. การเชอมโยงภายในเวบเพจหนาเดยวกน 2. การเชอมโยงภายในเวบไซตเดยวกน 3. การเชอมโยงไปยงเวบไซตอน 4. การเชอมโยงดวยอเมล 5. การเชอมโยงไปยงไฟลดาวโหลด 6. การเชอมโยงดวย Map link 7. การเชอมโยงดวย RollOver Image

1. การเชอมโยงภายในเวบเพจหนาเดยวกน

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

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

1. กาหนดจด Anchor หรอท Link จะกระโดดไปในหนาเวบเพจนน โดยใชเครองมอ 2. ตงชอ Anchor ซงจะเปนชอทใชในการอางองมายงจดน

30Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. การสราง Link ไปยงจดททาจด Anchor ไว เชน การทา link เพอกลบขนไปขางบนเวบเพจ กรณทอยดานลางของเวบเพจนนอย โดยการทาเลอกขอความทตองการทา Link ดงรป

จากนนใหพมพในชอง Link โดยตองพมพสญลกษณ # กอนหนาชอ Link ทตงไว 2. การเชอมโยงภายในเวบไซตเดยวกน ขนตอน

- เลอกขอความหรอรปภาพทตองการทาเปน link - ตรง Property Inspector ใน Link คลกปม เพอกาหนดไฟลทตองการเชอมโยง ถาร

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

- เลอกไฟลทตองการเชอมโยง แลวกดปม OK - กาหนด Target

31Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

_blank เปดหนาเวบใหมทเชอมโยงไปยงอกหนาตางบราวเซอรใหม _parent เปดหนาเวบใหมทเชอมโยงไปยงอกหนาตางบราวเซอรเดม _self เปดหนาเวบใหมทเชอมโยงในเฟรมเดม _top เปดหนาเวบใหมทเชอมโยงในหนาตางบราวเซอรเดม โดยจดใหเตมเฟรม หมาเหต ถาไมกาหนดจะเปนการเปดในหนาตางบราวเซอรเดม 3. การเชอมโยงไปยงเวบไซตอน ขนตอน

- เลอกขอความหรอรปภาพทตองการทา link - พมพชอ URL ลงในชอง link ดงรป ซงตองทราบ URL ของเวบไซตทตองการทา link เชอมโยง

ไป และตองพมพ http:// นาหนาเสมอ 4. การเชอมโยงดวยอเมล

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

- เลอกขอความหรอ รปทตองการทา link

- พมพอเมลในชอง link โดยจะตองมรปแบบ ดงน mailto:ชออเมลแอดเดรส

32Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

หรอ ใชเครองมอ ปอนขอความ และอเมล ดงรป 5. การเชอมโยงไปยงไฟลดาวโหลด

โดยปกตทวไปจะพบวาในเวบไซตจะมการใหบรการ Download เชน โปรแกรม หรอบทความตาง ๆ ได ซงไฟลเหลานสวนมากจะเปนไฟลประเภท zip , doc หรอ pdf ขนตอน

- เลอกขอความหรอรปภาพทตองการทา link - ตรง Link คลกปม

- เลอกไฟลทจะให Download

33Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

6. การเชอมโยงดวย Map link การเชอมโยงดวย Map link จะตองกาหนดขอบเขตของลงกบนภาพ ซงสามารถใชเครองมอ

ขนตอน

- เลอกรปทตองการจะทาแมบลงก - เลอกเครองมอทจะกาหนดบรเวณแมบลงก ทตองการ (Hotspot) ตามรปแบบทตองการ

สาหรบเลอก บรเวณ Hotspot เมอตองการยายตาแหนง สาหรบกาหนดขอบเขต Hotspot เปนรปสเหลยม

สาหรบกาหนดขอบเขต Hotspot เปนรปวงกลม สาหรบกาหนดขอบเขต Hotspot เปนรปเหลยมใดๆ

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

34Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

7. การเชอมโยงดวย RollOver Image เปนการสรางลกเลนใหกบภาพบนหนาเวบเพจใหนาใชมากยงขน โดยเมอนาเมาสมาวาง

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

1. เลอกบรเวณทจะทา RollOver Image 2. คลก ทแถบเครองมอ หรอคลกเมน Image>>Interactive Image จะปรากฎ ดง

รปใหคลกปม เพอเลอกภาพ โดยตองเลอกภาพ 2 ภาพสาหรบการทา RollOver

ตวอยาง

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

เชอมโยงไดจากหนาตาง Page Properties โดยเลอกเมน Modify > Page Properties

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

35Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

ซงสามารถกาหนดรายละเอยดได ดงน - Link font กาหนดรปแบบตวอกษรทเปนลงก - Size กาหนดขนาดของรปแบบตวอกษรทเปนลงก - Link color เลอกสลงกปกต - visited links เลอกสลงกทถกผใชคลกไปแลว - Rollover links เลอกสลงกเมอผใชนาเมาสมาอยเหนอสวนน - Active links เลอกสลงกทถกคลก - Underline style กาหนดรปแบบการขดเสนใตขอความทเปนลงก Always underline ขดเสนใตขอความทเปนลงกเสมอ Never underline ไมขดเสนใตขอความทเปนลงก Show underline only on rollover ใหขดเสนใตขอความทเปนลงกเมอผใชนาเมาสวางสวนน Hide underline on rollover ซอนเสนใตขอความทเปนลงกเมอผใชนาเมาสวางสวนน

36Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 5 การสรางฟอรม

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

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

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

1) คลกเมาส ณ ตาแหนงทตองการวางฟอรม 2) เปลยนแถบเครองมอ Object เปน Form โดยคลกทปม Control Menu ซงมรปรางเปนปม

สามเหลยมชลง แลวเลอกรายการ Form 3) คลกเลอกเครองมอการสรางฟอรม จะปรากฏเสนประสแดง ณ ตาแหนงทวาง Cursor

ดงรป

37Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

การกาหนดรายละเอยดของฟอรม (Form Properties ) จะมรายการตางๆ ดงน Form Name : ชอฟอรม ใชในการอางองเมอจะเขยนสครบตควบคม Action : เปน URL หรอทอยของโปรแกรมสครบต เชน http://www2.diw.go.th/sendemail.asp Method : วธในการสงขอมล

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

GET คอ การสงขอมลภายในฟอรม ไปยงโปรแกรมสครปต เพอประมวลผล โดยจะสงคาขอมลการสงผาน Address Bar เชน http://www.abc.com/view.php?name=wanchalong&txt=สวสด เปนตน ทาใหสามารถมองเหนขอมลผานทางบราวเซอร Target : เปาหมายทผลลพธแสดง Enctype : กาหนดการเขารหส เครองมอในการสรางฟอรม 1. ฟลดกรอกขอความ (Text Field) สาหรบสรางสวนรบ แสดงขอมลทงตวอกษรและตวเลข หรอรหสผาน โดยคลกทเครองมอ จะปรากฎหนาตางใหปอนรายละเอยด ดงรป

ขอความหรอชอของ text field Style เลอกรปแบบของขอความ เชน Wrap เปนการตดขอความ Position ตาแหนงของขอความจะอยกอนหรอลงชอง text field

38Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

การตงคา Properties ของ Text field TextField Name กาหนดชอฟลดใชในการประมวลผล Char Width กาหนดความกวางของฟลดสาหรบกรอกขอความ มหนวยเปนตวอกษร Max Chars กาหนดจานวนอกษรสงสดทยอมใหปอนในฟลด มหนวยเปนตวอกษร Type ประเภทของฟลดขอความ ไดแก - แบบบรรทดเดยว (Single Line)

- แบบหลายบรรทด (Multi Line) -แบบรหสผาน (Password) ซงจะแสดงเครองหมาย * เมอมการปอนขอมลในฟลดน

Init Val ระบขอความทตองการใหแสดงในฟลดนทกครงทมการแสดงผลผานเบราเซอร Wrap ควบคมการตดคาเมอเลอก Type เปน Multi Line ตวอยาง

39Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

2. ปมทางเลอกแบบเชคบอกซ (Check Box) เปนปมใหผชมสามารถเลอก หรอยกเลกสงทเลอกได โดยมไดหลายตวเลอก เหมาะสาหรบ

คาถามทมคาตอบไดหลายคาตอบ ดงรป ขนตอน

- คลกเมาส วางตาแหนงทตองการในฟอรม (Form) - คลกเครองมอ ในแทบ Forms หรอ คลกเมน Insert > Form > Check Box - ปรบแตงรายละเอยดของเครองมอตามความตองการ

การกาหนดรายละเอยดของเชคบอกซ (Check Box Properties )

o Check Box ใสชอตวแปร สาหรบเกบคาทผใชเลอก o Checked Value กาหนดคาทใชรวมกบชอตวแปรของเชคบอกซในการสงคาใหกบ

โปรแกรมสครปตประมวลผล o Initial กาหนดคาเรมตนให เลอก (Checked) /ไมเลอก (Unchecked

3. ปมทางเลอกแบบเรดโอ (Radio Button)

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

- คลกเมาส วางตาแหนงทตองการในฟอรม (Form) - คลกเครองมอ (กรณเลอกแบบเดยว) หรอ (กรณเลอกแบบกลม) ในแทบ Forms

หรอ คลกเมน Insert > Form > Radio Button (Radio Group) - ปรบแตงรายละเอยดของเครองมอตามความตองการ - การกาหนดรายละเอยดของ Radio Button (Radio Button Properties ) จะมรายการตางๆ ดงน

40Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

• Radio Button ใสชอตวแปร สาหรบเกบคาทผใชเลอก • Checked Value กาหนดคาทใชรวมกบชอตวแปรของตวเลอกในการสงคาใหกบ

โปรแกรมสครปตประมวลผล • Initial กาหนดคาเรมตนให เลอก (Checked) /ไมเลอก (Unchecked)

4. การสรางลสตรายการ การสรางลสตรายการจะใชในการเลอกสงทตองการไดจากรายการ โดยม 2 รปแบบ ไดแก 1. รายการแบบเมน (Menu) เหมาะสาหรบรายการขอมลจานวนมาก ขนาดของขอมลไมมาก

และใชพนทนอย เชน วน เดอน ป เปนตน 2. รายการแบบลสต (List) เหมาะสาหรบรายการขอมลจานวนมาก และสามารถเลอกขอมล

ไดหลายคา เชน อาหารทชอบ เปนตน การกาหนดรายละเอยดของรายการ (List/Menu Properties ) จะมรายการตางๆ ดงน

• List/Menu กาหนกชอตวแปร สาหรบเกบคาทผใชเลอก • Type กาหนดแบบของรายการทจะแสดง

o Menu แสดงรายการแบบเมน (Menu) o List แสดงรายการแบบลสต (List)

• Height จานวนบรรทดของขอมลทแสดง เมอผชมคลก

กรณเลอก list สามารถระบจานวนทจะแสดงรายการได

ถา สามารถเลอกไดหลายคา

41Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

• List Value... กาหนดรายการขอมล

1. คลกปม เพอเพมลสตรายการ หรอ เพอลบรายการ 2. พมพรายการลงในชอง Item Label เพอกาหนดคาทจะแสดง และ Value เพอกาหนดคาของ

ขอมล [คลก เมอตองการเปลยนอนดบขอมล] 3. คลกปม OK

5. กรอบสาหรบเลอกไฟล (File Field)

สาหรบใหผชมสามารถเลอกไฟลเพอนาเขา (Upload) มาทเวบไซต โดยคลกเลอกไฟลท ปม เชน นาเขาร ปภาพของสมาชก ขนตอน

• คลกเมาส วางตาแหนงทตองการในฟอรม (Form) • คลกเครองมอ ในแทบ Forms หรอ คลกเมน Insert > Form > File Field • ปรบแตงรายละเอยดของเครองมอตามความตองการ

42Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

- FileField ใสชอตวแปร สาหรบเกบคาทผใชเลอก - Char Width กาหนดคาความยาวของกรอบเลอกไฟล - Max Chars กาหนดจานวนอกษรทชองรบไดสงสด

ตวอยาง 6. การสรางปมกด (Button)

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

• คลกเมาส วางตาแหนงทตองการในฟอรม (Form) • คลกเครองมอ ในแทบ Forms หรอ คลกเมน Insert > Form > Button • ปรบแตงรายละเอยดของเครองมอตามความตองการ • การกาหนดรายละเอยดของปมกด (File Field Properties )

- Button Name ใสชอตวแปร สาหรบเกบคาทผใชเลอก - Label กาหนดคาความยาวของกรอบเลอกไฟล - Action กาหนดประเภทของ bottom

Submit form Reset form None

ตวอยาง

43Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

สามารถนารปภาพมาทาเปนปม submit ได ขนตอน

• คลกเมาส วางตาแหนงทตองการในฟอรม (Form) • คลกเครองมอ ในแทบ Forms • เลอกไฟลรปภาพทตองการมาทาปม เชน

7. การตรวจสอบความถกตองของขอมล (Validate Form) เปนการทางานของ Behaviors ในโปรแกรมของ Dreamweaver โดยเลอกเมนการทางานท window > Behaviors

เมอคลกทตรงเครองหมายบวกจะมเมนยอยใหเลอก โดยใหเลอกท Validate Form

44Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

เมอคลกเลอก Validate Form จะปรากฎหนาตางดงรป

- Value ตองมคาเสมอ - Accept

Anything ปอนขอมลอะไรกได Number ขอมลเฉพาะตวเลขเทานน Email address ขอมลตองเปนรปแบบ Email Number form …. To …..ขอมลตวเลขตองมคาอยในชวงทกาหนด

กลบมาทหนาตาง Behaviors ใหดวาตรง Events นนเปน OnSubmit หรอไม ถาไมใช

ใหทานกาหนดเปน OnSubmit การตรวจเชคฟอรมถงจะทางานได

จะมรายการ text field ตางๆ ททาไวใหเลอก

45Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 6 Behaviors หรอ Action Script

1. ทา Window Popup โฆษณา หรอขาวประชาสมพนธ คอการทาหนาตางเลก ๆ เปดขนมาพรอมกบหนา Home Page ดวย ซงหนาตางนนอาจจะไมม

เมน ไมม Status Bar ไมม Address ของ window ตามปรกต

ขนตอน 1. ให New File ขนมาใหม หรอจะใชเพจเดมทมการออกแบบไวแลวกได เชน เตรยมหนาโฆษณาดงรป และเกบไฟลชอ promotion.html 2. เปดไฟลทตองการใหหนาโฆษณา แสดงขนมาตอนทเปดหนาไฟลนขนมา ซงโดยปกตนยม

หนาแรกของเวบไซต เมอคนเขามาเวบครงแรกกจะแสดงหนาตางขาวสารหรอหนาโฆษณา - คลกเลอก Tag Body ดงรป

46Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

- จากนนเลอกคลกทเครองหมายบวก และเลอก Open Browser Window ดงรป

URL to Display : ใหกรอก URL ของเวบเพจททานจะทาการเปดขนมาพรอมกบเวบเพจน หรอ กรณอยในไซตเดยวกนใหทานทาการ Browse...หาไฟลทตองการ

Window Width & Window Height :: ใหทาการกาหนดขนาดของหนาตาง window ทจะเปดขนมา

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

- Navigation Toolbar แถบปมคาสง - Location Toolbar แถบสาหรบใส URL - Status bar แถบสถานะ - Menu bar แถบเมน

- Scrollbars as Needed แถบเลอน ซงจะปรากฎเมอหนาเวบทแสดงมความยาวกวาขนาดของหนาตางบราวเซอร

- Resize Handles ใหผใชปรบขนาดหนาตางได - Window Name กาหนดชอไวสาหรบอางอง Window Name :: ตงชอหนาตางทจะเปดขนมา

3. เมอ OK ไปแลวกกลบมาดทหนาตาง Behaviors อกครง เพอใหแนใจวากาหนดคาถกตอง ให

ดวาตรง Events ของ Open Window Browser นนเปน OnLoad ถาไมเปนใหทาการเปลยน Events เปน onLoad ดงรป - การแกไข สามารถดบเบลคลกตรงแถบสนาเงนเพอกลบไปแกไขรายละเอยดตางๆ ได

47Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

2. การทาปมปด Windows การทาปมปดหนาตาง browser ซงอาจจะนาไปประยกตใชกบการใชกบ Window Popup ขนตอน

1.นา Cursor ไปวางในตาแหนงทตองการแลว ใหเปด Snippet Panel ขนมา โดยไปท Main Menu -> Window -> Snippets ดงรป

2. เมอทาการเปด Snippets Panel ขนมาแลว ใหไปทหมวด Form Elements แลวทาการ click ไปทเครองหมายบวก ( + ) หนารายการ Form Elements เพอทาการขยายหรอเปดรายการของ Form Elements ดงรป

48Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. จากนนใหทาการ Double-click ไปทรายการ Close Window Button ดงรป กจะไดปมกดสาหรบการปดหนาตาง Browser ทตาแหนงททาการวาง cursor ไวในหนาเวบเพจของ

4. ปรบแตง Properties ไดดงรป 3. การใสเสยงบนเวบ (Play Sound) เมอผใชกระทาบางอยางบนเวบ เชน เลอนเมาสหรอเหนอปมกด หรอใหเลนเพลงเมอโหลดหนาเวบนโดยไฟลเสยงทจะใชเปน .midi, .wav เปนพนฐาน ถาเปนไฟลอนอาจจะตองตดตงโปรแกรมเสรมใหกบบราวเซอรจงจะเลนได ขนตอน

1. คลกเลอก Tag Body ดงรป

2. คลกเครองหมายบวกตรง Behaviors และเลอก Play Sound ดงรป

49Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. Brows หาเพลงทตองการ 4 .แสดงกลองขอความ (Popup Message)

ขนตอน 1. คลกตรงเครองหมายบวกของ Behaviors 2. เมอเปดไฟลผาน browser จะแสดงกลองขอความดงรป 5. การทา Popup Menu ขนตอน 1. คลกเลอกขอความหรอรปภาพทตองการทา Popup Menu 2. ตองพมพเครองหมาย # ในชองลงกกอนเสมอ จากนนทาการบนทกไฟล

พมพขอความทตองการใหแสดง

50Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. คลกเครองหมายบวกตรง Behaviors และเลอก Show Pop-up Menu 4. เพมเมนยอย

+ เพมเมน - ลบเมนออก

ปรบเมนยอย

ชอไฟลหรอ URL ทตองการลงก

51Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

5. ปรบแตงสของเมน ในแถบเมน Appearance

6. ปรบแตงเมนเพมเตมใน Advanced 7. ปรบตาแหนงแสดงเมนใน Position

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

Up state สตวหนงสอและสพน ขณะทเมาสยงไมผาน Over state สตวหนงสอและสพน ขณะทเมาสเลอนผาน

ปรบขนาดของเซลล

เสนและสของขอบเซลล

52Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 7 การทางานเกยวกบ Flash

การแทรกไฟล Flash

ขนตอน 1. กาหนดตาแหนงทตองการแทรกปมกดในหนาเวบเพจ

2. คลกปม จากแทบ Media หรอเลอกคาสง Insert>Media>Flash

3. เลอกไฟล flash ทตองการ 4. ปรากฏสญลกษณ และทดสอบแสดงผล โดยกดปม F12 การสราง Images Slide Show

สามารถสราง Image ในรปแบบสไลดโชวเปนลกษณะ Flash 1. ใหเตรยมรปภาพทจะนามาทาเปน Slide ในจานวนทตองการ 2. เมอการจดเตรยมรปภาพแลว จากนนใหทาการ New Flie ขนมาและทาการ Save File

53Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. ไปท Insert Bar เลอกไปท Flash elements TAB ดงรป แลว Click ท Icon ทชอวา Image Viewer

4. เมอ Click ไปทไอคอนดงกลาวแลว โปรแกรมจะให Save ไฟล Flash ทกาลงจะสรางขนมา

ใหทาการ Save ไวท Site ทกาหนดคาไว ดงรป 5. เมอไดทาการ Save ไฟลเกบไวแลว ทโปรแกรม Dreamweaver จะพบ ไฟล Flash เพมขนมา

ซงจะมลกษณะเปนพนทสเทา และมสญลกษณของ Flash อยตรงกลาง ให Click เลอกทพนทนไว ท Flash elements Panel น ตองทาการกาหนดคาตาง ๆ ทจาเปนตอการใชงานลงไป ดงน

54Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

- bgColor : คาสพนหลงของ Flash - captionColor : สของชอรปภาพ - frameColor : สของเสนกรอบ - frameTrickness : ขนาดของเสนกรอบ - imageCaption : ชอรปภาพในแตละรป - imageLink : ไฟลหรอ URL ทราจะทาการ Link ไปเมอผเขาชมเวบ Click ไปทรปภาพ - imageURLs : ตาแหนงทเกบไฟลรปภาพทจะนามาทาเปนสไลด - slideDelay : คาความหนวงเวลาในการเปลยนรปภาพแตละภาพ มหนวยเปน วนาท - transitionsType : รปแบบเอฟเฟคพเศษทจะนามาใชในระหวางการเปลยนรปภาพ

- showControls : แสดงปมเลอน slide หรอไม (Yes-แสดง No-ไมแสดง) - SlideAutoplay : แสดงปมเลอน slide หรอไม (Yes-แสดงอตโนมต No-ไมแสดงอตโนมต)

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

7. เมอกาหนดคาตาง ๆ ทตองการเสรจสน ให Save และทาการ Preview ดผลกบ Web Browser

55Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

1. กาหนดตาแหนงทตองการแทรกลงกขอความในหนาเวบเพจ 2. คลก Insert>Media>Flash Text

3. ปรบแตงรายละเอยด

Font กาหนดรปแบบตวอกษร Size กาหนดขนาดตวอกษร กาหนดลกษณะตวอกษรเปนตวหนา หรอตวเอยง

กาหนดตาแหนงตวอกษร Color กาหนดสของตวอกษร Rollover Color กาหนดสของตวอกษรเมอผใชนาเมาสไปวางอยเหนอขอความน Text พมพขอความทตองการ

56Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

Link กาหนดไฟลหรอ URL ทตองการใหขอความนนเชอมโยงไป Target กาหนดลกษณะหนาตางเวบเพจหรอบราวเซอรทตองการเปดขนมา เมอไดลงก Bg Color กาหนดสพนหลงใหกบขอความ Save As กาหนดชอไฟลทจะบนทกไฟล Flash Text

การทา Flash Button ขนตอน

1. กาหนดตาแหนงทตองการแทรกลงกขอความในหนาเวบเพจ 2. คลก Insert>Media>Flash button

3. ปรบแตงรายละเอยด

57Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 8 การสราง Layer

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

เชน ตาราง, รปภาพ, ขอความตางๆ แตการใช Layer โปรแกรมทใชดเวบตองเปน Internet Explorer ตงแต version 4 ขนไป ดงนนจะไมคอยใช Layer มาใชในหนาเวบหลกๆ

เครองมอ การสราง Layer ขนตอน

1. สรางเอกสารทตองการสราง Layer ขนมา 2. หลงจากนนใหเลอกเครองมอ Draw Layer หลงจากทคลกแลวใหนา Mouse ไปวาดท

ชนงาน ดงรป 3. พมพขอความหรอแทรกรปภาพใน Layer

58Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

4. แตถาตองการยาย Layer ใหคลกทขอบของ Layer ดานไหนกได หลงจากนน Click ท ของLayer แลวทาการยายไดเลย

5. หรอจะยายทเครองมอ Properties กไดแตตองคลกทขอบกอนเหมอนกน ดงรป Properties Layer

- การยายในแนวนอน - การยายในแนวตง

59Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

บทท 9 การสรางเฟรม

การใชเฟรมเซต (Frame Set) เปนรปแบบหนงของการนาเสนอผลงานผานหนาเวบเพจ

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

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

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

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

เวบเพจขนไปในครงเดยว 4. เฟรมไมเปนทสบอารมณของบรรดา Search Engine ทงหลาย ถาคณคดจะทาเวบขายของ

หรอเวบอะไรกแลวแตทตองการใหคนเขาใชเวบคณมาก ๆ คงไมดแน 5. อน ๆ

TopFrame

LeftFrame MainFrame

60Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

1. เฟรมหลก (Frameset) คอ หนาตางเฟรมทใหญทสด ทคอยควบคมเฟรมยอยอนๆ โดยทหนาตางเฟรมทกาหนดลกษณะการแบงเฟรมในแนวตงและแนวนอน และสามารถกาหนดคาคณสมบต ขนาด สของเสนของ ระยะหางระหวางเฟรมไดตามตองการ

2. เฟรมยอย (Frame) คอ หนาตางเฟรมทกาหนดชอของเฟรมแตละเฟรม โดยสามารถกาหนดไฟลเวบเพจหรอเวบไซตทแสดงประจาเฟรมเวบเพจไดอยางอสระ

ทาไมตองมชอในแตละ Window

เฟรมควรจะมชอในแตละ window เนองจากเมอทาการสราง Link หรอสราง Form ในการสงขอมล จะไดอางอง target ไดถกตอง หลายครงเจอ ปญหา เนองจากการสราง Link ไมไดกาหนดเปาหมายหรอ target ของ window ของเฟรม เมอไมไดกาหนด คา Default ของ target จงเปน _self หรอกคอเปาหมายของ window คอ ตวไฟลทมลงกนนเอง

61Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

เครองมอ

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

1. ใหไปท Main Menu -> File -> New โปรแกรมจะทาการเปดหนาตางใหมขนชอวา New Document หนาตางน ใหเลอกไปท Tab ท

ชอวา General แลวเลอก Category เปน Framesets จากนนทาง List ตรงการหนาตางทชอวา Framesets: ใหเลอกรปแบบของ Frame ทตองการใชงาน ซงรปแบบของ Frame จะถก Preview ใหเหน เมอเลอกไปทรายการใดรายการหนงท List Framesets ดงรป

62Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

2. เมอไดไฟลเวบเพจ ซงมลกษณะเฟรมตามทตองการแลว จากนนใหทาการ save ไฟล ซงการ Save ไฟลของเวบเพจทมรปแบบเปนเฟรมน จะมการบนทกทแตกตางจากไฟลเวบเพจปรกตทวไป ดงทไดอธบายไปเมอบทความกอนวา เฟรมประกอบดวยไฟลเวบเพจมากกวา 1 ไฟล ดงนนการบนทกไฟลจงตองมมากกวา 1 ครงในการเวบครงแรก หลงจากทไดทาการ Create ขนมาใหม โดยมวธการดงน

- ใหไปท Main Menu -> Save All ดงรป - เมอเลอกท Save All แลว โปรแกรมจะเรมดาเนนการให Save ไฟล ในการ Save ครงแรกของโปรแกรมจะเปนการ Save ไฟลทเปน Frameset ดงรป

ใหสงเกตทเสนขอบของจอภาพขณะบนทกวาจะปรากฏมเสนขด ๆ สดา แบบตะเขบ ลอมรอบ Frame ทงหมด และทชอไฟลเรมตน จะมคาวา Frameset ปรากฏอย นนแสดงวากาลงทาการ Save ไฟลซงเปน Frameset อย - ครงตอมาโปรแกรมจะดาเนนการบนทกไฟลอน ๆ ตอไป

63Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

จากรปขางตน จะเปนการ Save ไฟลทอยดานลางซงเปน Main Frame ของเฟรมรปแบบนใหสงเกตท เสนขด ๆ สดา แบบตะเขบ ลอมรอบ Frame ทโปรแกรมกาลงจะทาการบนทก จะเหนวาเสนนนจะมาลอมรอบอยทกรอบดานลาง นนแสดงวาโปรแกรมกาลงจะทาการบนทกไฟลของหนาจอของเฟรมในสวนน การปรบขนาดของเฟรม การลบเฟรม สามารถลบเฟรมทไมตองการออกไป โดยคลกเมาสทขอบเฟรม แลวลากออกไปนอกหนาเวบ ตามแนวนอนหรอแนวตงของขอบเฟรมทเลอกอย การนาหนาเวบมาประกอบในเฟรม

64Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

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

65Macromedia Dreamweaver 8

กรมโรงงานอตสาหกรรม

3. เมอเลอกไฟลเวบเพจเรยบรอย รายละเอยดจะปรากฎในเฟรมทเลอก