30
Macromedia Macromedia Dreamweaver 8 Dreamweaver 8

หน่วยการเรียนรู้ที่ 6

Embed Size (px)

Citation preview

Page 1: หน่วยการเรียนรู้ที่ 6

Macromedia Macromedia Dreamweaver 8Dreamweaver 8

Page 2: หน่วยการเรียนรู้ที่ 6

โปรแกรม Macromedia Dreamweaver โปรแกรมสำำหรบกำรสรำงเวบเพจ บรหำรจดกำรเวบไซต รวมไปถงกำรพฒนำเวบแอปพลเคชน เนองจำกตว Dreamweaver มควำมสำมำรถทโดดเดน ดงน สำมำรถเขยนโปรแกรมสำำหรบเวบไดทกรปแบบ เชน ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนคำำสงและเครองมอตำงๆ เรยกใชงำนไดงำยและสะดวกมกำรปรบปรงกลไกภำยในใหมประสทธภำพสงขน สำมำรถสรำงแอปพลเคชนงำยๆ โดยไมจำำเปนตองเขยนโปรแกรม สรำงเวบเพจภำษำไทยไดทนทโดยไมตองตดตองโปรแกรมเสรมเพรำะ Dreamweaver รองรบตวอกษรแบบ Unicode

Page 3: หน่วยการเรียนรู้ที่ 6

กำรเข ำส โปรแกรม กำรเข ำส โปรแกรม Macromedia Dreamweaver Macromedia Dreamweaver

88มขนตอน คอ คลกเลอก Start -> Program -> Macromedia -> Macromedia Dreamweaver 8 ในกำรเขำสระบบในครงแรกโปรแกรมจะถำมรปแบบกำรใชงำน 2 รปแบบ คอ

1. Designer หมำยถง กำรสรำงและออกแบบเวบเพจโดยทวไป สวนมำกนยมเลอกรปแบบน

2. Code หมำยถง วธกำรสรำงเวบเพจทเนนกำรเขยนชดคำำสงเอง

Page 4: หน่วยการเรียนรู้ที่ 6

สวนประกอบของหนำต ำงส วนประกอบของหนำต ำง หนำจอ Start Pageทกครงเมอเปดโปรแกรม Macromedia

Dreamweaver 8 จะปรำกฏหนำจอเรมตน (Start Page) สำำหรบเปดเอกสำรเวบเพจเดมหรอสรำงเอกสำรเวบเพจใหม โดยทวไปแบงออกเปน 3 กลม ดงตอไปน

Page 5: หน่วยการเรียนรู้ที่ 6

เมอเรำเลอกประเภทกำรทำำงำนแลว (ในกรณนผสอนคลกเลอก HTML จำกสวนของ Create New) จะปรำกฏหนำตำงกำรทำำงำนของโปรแกรม โดยมรำยละเอยดดงตอไปน

Page 6: หน่วยการเรียนรู้ที่ 6

1. แถบชอเร อง (Tit lebar) เปนสวนทใชแสดงชอโปรแกรม Dreamweaver 8 และชอไฟลเอกสำรเวบเพจทกำำลงทำำงำนอย

2. แถบรำยกำรคำำส ง (Menu Bar) เปนสวนทรวบรวมรำยกำรคำำสงกำรทำำงำนเอำไว สำมำรถเปดรำยกำรคำำสงตำงๆ ขนมำใชงำนโดยคลกทชอรำยกำรคำำสงแลวเลอนเมำสไปยงตำำแหนงทตองกำรใชงำน หำกรำยกำรคำำสงใดมรำยกำรคำำสงยอยจะแสดงลกศรอยมมขวำของรำยกำร หำกเลอนเมำสไปยงบรเวณดงกลำว จะแสดงรำยกำรคำำสงยอยเพอใชงำนตอไป

3. แถบแทรก (Insert Bar) เปนแถบทประกอบดวยปมคำำสงทใชในกำรแทรกออบเจกตหรอวตถตำงๆ ลงในเอกสำรเวบเพจ โดยแบงเปนหมวดหม มรำยละเอยดดงตอไปน

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

Layout สำำหรบเลอกมมมองในกำรสรำงเวบเพจ เชน มมมองปกต มมมองแบบขยำย เพอใหเหนออปเจกตตำงๆ ไดอยำงชดเจน

Forms ใชสำำหรบแทรกออปเจกตทใชสรำงแบบฟอรมรบขอมลจำกผชม เชน ชองรบขอควำม และฟลด (Field) ชนดตำงๆ

Text สำำหรบจดรปแบบขอควำมในเวบเพจ เชน หวเรอง ตวหนำ ตวเอยง จดหวขอ จดยอหนำ และแทรกสญลกษณพเศษตำงๆ

Application สำำหรบแทรกคำำสงและกำรดงขอมลจำกฐำนขอมลมำแสดงบนเวบFlash element สำำหรบนำำไฟล Flash เขำมำใชงำนFavorite สำำหรบจดเกบออบเจกตทชอบเพอควำมสะดวกในกำรใชงำน

Page 7: หน่วยการเรียนรู้ที่ 6

4. Toolbar เปนแถบเครองมอทเกบปมคำำสงทตองใชงำนบอยๆ 5. Document Area เปนสวนทใชสำำหรบสรำงหนำเวบเพจ โดยกำรใส

เนอหำและจดองคประกอบตำงๆ นำำมำวำงใน Document Area และสำมำรถเลอกพนทกำรทำำงำนไดหลำยมมมอง เชน Show Code View,Show Code and Design View ดงทไดกลำวไวแลวขำงตน

6. Status Bar คอ แถบแสดงสถำนะทอยบรเวณดำนลำงของพนทสรำงงำน (Document Area) ซงประกอบดวย 2 สวน คอ ทำงดำนซำยเรยกวำ Tag Selector ใชสำำหรบแสดงคำำสง HTML ของสวนประกอบในเวบเพจทเลอกอย และทำงดำนขวำเปนสวนทบอกขนำดและเวลำทใชในกำรดำวนโหลดเวบเพจ

7. Propert ies Inspector เปนหนำตำงแสดงคณสมบตของออปเจกตทเรำกำำลงเลอกในเวบเพจ และสำมำรถกำำหนดหรอแกไขคณสมบตของสวนประกอบตำงๆ ในหนำเวบเพจได เชน ขอควำม ส ขนำด ตำรำง ลงก เปนตน โดยรำยละเอยดภำยในหนำตำง Properties Inspector จะไมเหมอนกนขนอยกบวำขณะนนเรำกำำลงเลอกทำำงำนกบออปเจกตใดอย

8. Panels เปนกรอบเลกๆ บรเวณดำนขวำ ประกอบดวยเครองมอสำำหรบใชทำำงำนตำงๆ ซงแตละสวนของ Panels จะมหนำทแตกตำงกนไป เชน กำรจดเกบ Code, CSS, Behavior อกทงไฟลและโฟลเดอรภำยในเวบไซต

Page 8: หน่วยการเรียนรู้ที่ 6

กำรเขำสโปรแกรมกำรเขำสโปรแกรม   1. คลกปม start > All Programe > Macromedia > Macromedia Dreamweaver MX 2004 เพอเขำสโปรแกรม

สวนประกอบสวนประกอบ1. แถบ Menu Barหนำตำง File สำำหรบดขอมลตำง ๆ ในหนำเพจ

เชนเครองมอตำง ๆ และกำรใช FTP2. แถบเคร องม อ Insert Bar มหลำยเครองมอดวยกน จะแสดงให

เหนเมอคลกทกลมเครองมอ แตละกลมในทนจะอธบำยบำงเครองมอ และเรำจะลองใชงำนกนในบทหลงๆ

3. ส วน Panel ต ำง ๆ เปนสวนของหนำตำงซงเรำตองใชงำนเมอเรำตองกำรเพมเตมควำมสำมำรถบำงอยำงลงไปในเวบเพจของเรำเชนเพม CSS เขำ ไปเพอใชในกำรจดแตงสวนตำง ๆ ของ webpage กำรทำำ Layer เปนตน

Page 9: หน่วยการเรียนรู้ที่ 6

ส วน ส วน DesignDesign หนาต าง Design น จะเป นหนาต างท รวบรวมเคร องม อ อาทเช น หนาต าง CSS Styles หนาต าง HTML Styles หนาต าง Bahaviors หร อจะพดให เข าใจ ก ค อ หนาต าง Design น จะรวบรวม เคร องม อท เก ยวก บการ ตกแตงเว บด วย CSS Style และ HTML Styles รวมถงการใส ล กเล นพเศษตาง ๆ มารวมกนไว น นเอง

ส วน Code หนาต าง Code น จะรวบรวมเคร องไม เคร องม อต างๆเหม อนกบหนาต าง Design ซ งหนาต าง Code น ได รวบรวมหนาต าง เคร องม อท จ ำาเป นไว ด งน Tag Inspector , Snippets , Reference

5. ส วนต าง ๆ propert ies ส วนของ Propert ies ส วนนก เป นอ กส วนทเราใชงานกนบ อยมากเป นเคร องม อท ไว ใช ก ำาหนดคาของเคร องม อใน tool File หนาต าง Property น จะข นอย ก บเคร องม อท เราเล อกใช ว าม ค าอะไรให set บ าง เช น ใช ในการกำาหนดชอ Font ภายใน webpage ใช ในการกำาหนด l ink ส ตาราง ฟอร ม อ ก มากมายเป นต น

Page 10: หน่วยการเรียนรู้ที่ 6

คณสมบต ท วไปของโปรแกรมคณสมบต ท วไปของโปรแกรมMacromedia Dreamweaver เป นโปรแกรมสำาหร บออกแบบและ

พฒนาเว บไซท ด วยการสร างเว บเพจและเว บแอพพลเคช น ท ก ำาล งเป นท น ยมนำามาสร างเว บไซทในปจจ บ น เน องจากใชงานง าย โดยเราสามารถทจะจ ดวางข อความ ร ปภาพ ตารางข อม ล แบบฟอรม ฯลฯ ลงไปในเว บเพจไดอย างง ายดายโดยไม จ ำาเป นต องใชโค ด HTML ซ งม ข นตอนยงยากและซบซ อน ท ำาให ม โอกาสผดพลาดไดง าย ใน Dreamweaver ม เคร องม อมากมายใหใช ในการพฒนาเว บได อย างรวดเร ว สวยงาม และม ประส ทธ ภาพสง

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

ในเว บเพจนอกจากจะม โค ดภาษา HTML แล ว ในปจจ บ นเว บเพจจะม การโต ตอบกบผ ใช ได ซ งจะต องอาศ ยเทคโนโลยอ นๆมาเสร ม เพ อให การนำาเสนขอม ลม ประส ทธ ภาพ เทคโนโลยเหล าน ได แก CSS (Cascading Style Sheet) ภาษา JavaScript , ภาษา XML และม ลต ม เด ย Flash เป นต น ซ ง Dreamweaver ได สน บสนนเทคโนโลยต างๆเหลาน อย างสมบรณแบบ

Page 11: หน่วยการเรียนรู้ที่ 6

ว นโดว ว นโดว DocumentDocumentว นโดว Document ค อส วนทจะใส เน อหาและจ ดองคประกอบของ

เว บเพจลงไป การใชงานว นโดว น จะคล ายก บการใชงานเว ร ดโปรเซสเซอร ท วไป ค อการพมพข อความ ใส ร ปภาพ สร างตารางข อม ล โดยเน อหาต างๆทแทรกลงไปจะปรากฏใหเห นคลายก บท ปรากฏในบราวเวอร ยกเว นข อมลบางอย าง เช น ภาพเคลอนไหว หร อ Movie Flash (แต ส ำาหร บ Flash เราสามารถคลกท ป ม Play เล นภาพเคลอนไหวได

ว นโดว Document ม ม มมองในการทำางาน 3 ม มมอง ค อ1. ม มมองออกแบบ (Design View)2. ม มมองโคด HTML(Code View)3. ม มมองโคดและออกแบบ(Code & Design View)ในการทำางานกบม มมองต างๆ ท ำาให การสร างเว บเพจสะดวกรวดเร ว

เพราะสามารถทจะท ำางานไดหลายว ธ สล บก นไปตามความเหมาะสม

Page 12: หน่วยการเรียนรู้ที่ 6

การตดต งระบบภาษาไทยการตดต งระบบภาษาไทยDreamweaver MX เป นโปรแกรมทไม ได สน บสนนภาษาไทย

โดยตรง ฉะนนเวลาต ดต งโปรแกรมแลวเร มใช งานเลย จะเห นว าเวลาพมพภาษาไทยลงไปในเว บเพจจะอ านไม ออก (แต ในบราวเซอร จะอ านออก) แต เราไม ต องตกใจเพราะสามารถทจะต ดต งต วช วยเหลอภาษาไทยได(Dreamweaver MX Thai Addon) ท ำาให การใชภาษาไทยไม ม ป ญหาอ กต อไป แต ต องไปดาวนโหลดไฟลจากอ นเตอร เน ตท เว บไซท Thaiware.com หร อเว บไซท marianasgraphix.com หร อจะเข าไปท google.com จากนน Search หาคำาว า Dreamweaver MX ร บรองว าม เว บไซทให ดาวนโหลดมากมาย หลงจากดาวนโหลดมาแลวก ต ดต งเพ มลงไปทโฟลเดอร ด ฟอลตของโปรแกรมคอ C:\Program Files\Macromedia\Dreamweaver MX\Configuration\ (โปรแกรมเล อกใหอย แล ว) หล งจากนนก สามารถใชภาษาไทยไดแล ว

Dreamweaver MX Thai Addon ม ค ณสมบต ด งน 1. เพ มการเข ารห ส (Encoding) แบบ windows-874 และ t is-620

ส ำาหร บเว บเพจภาษาไทย2. ท ำาให สามารถแสดงผลและพมพภาษาไทยในพาเนลตางๆ3. แก ไขการแสดงผลภาษาไทยตามเมนให ใหญข น

Page 13: หน่วยการเรียนรู้ที่ 6

การวางแผนออกแบบเว บไซทการวางแผนออกแบบเว บไซท1. ก ำาหนดเป าหมายของเว บไซทDreamweaver MX2. ก ำาหนดกลมเป าหมายของผเข าชม3. จ ดโครงสร างเว บไซท4. ออกแบบโครงร างหลกของเว บไซท5. ก ำาหนด Dreamweaver Site

Dreamweaver Site ม 3 ส วนด วยก นค อLocal Folder เป นไดเร กทอร ท เก บเว บไซทท เราสร างข นภายใน

เคร องคอมพวเตอร ของเราเอง ซ ง Dreamweaver จะเร ยกว า Local Site

Remote Folder เป นไดเร กทอร ท ใช เก บและเผยแพรเว บไซทท อย บนเว บเซ ร ฟเวอร ซ ง Dreamweaver เร ยกว า Remote Site

Folder For Dynamic Page เป นไดเร กทอร ท ใช ในการจ ดเก บและประมวลผล Dynamic Page หร อเว บเพจทม การใช Server Side Script ท สร างข นภายในเว บไซทของเรา

การสร างและแกไขเว บไซทการสร างและแกไขเว บไซท

Page 14: หน่วยการเรียนรู้ที่ 6

ขนตอนการสร างเว บไซทใหม 1. เล อกคำาส ง Site New Site จากเมน2. จะปรากฏไดอะล อกบอกซ Site Definit ion for

Untit led Site 1 ให คล กท แท บ Basic3. ใน Edit Files หนาแรกพมพช อเว บไซทลงไปทช อง

What would you l ike to name your site ? และคลกป ม Next

4. ใน Edit Files, Part 2 เล อก Server Technology แล วเล อก No , I do not want to use server technology และคลกท Next

5. ใน Edit Files , Part 3 ให เล อกไดเร กทอร ท จะท ำาเป นเว บไซท โดยคลกท ไอคอน เพ อเป ดเข าไปในโฟลเดอร ท ต องการแลวคล ก Select จากนนคล กป ม Next

6. หล งจากนนจะปรากฏหนาจอของการเล อกการ Sharing Files ให เล อกเป น None และคลกป ม Next

7. จะปรากฏหนาจอ Summary ซ งแสดงรายละเอ ยดของเว บไซทข นมา ให คล กท ป ม Done เพ อส นส ดการสร าง Site

Page 15: หน่วยการเรียนรู้ที่ 6

การสร างเว บเพจใหม

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

1. คล กเล อกคำาส ง File New หร อ กด Ctrl+N 2. จะปรากฏไดอะล อกบอกซ New Document3. เล อก ประเภทของเว บเพจใหมท จะสร าง จาก Category4. เล อกประเภทของเว บเพจ(โดยสวนใหญค อ HTML)5. คล กป ม Create

Page 16: หน่วยการเรียนรู้ที่ 6

การใส ร ปลงในเว บเพจการใส ร ปลงในเว บเพจภาพกราฟกท จะน ำามาแสดงในเว บไซทมก นอย มากมายหลายแบบ แต ท น ยมนำามาใชงานกนมากทส ดได แก แบบ GIF และ JPG

Page 17: หน่วยการเรียนรู้ที่ 6

การจ ดต ำาแหนงภาพเท ยบก บการจ ดต ำาแหนงภาพเท ยบก บข อความขอความ

Page 18: หน่วยการเรียนรู้ที่ 6
Page 19: หน่วยการเรียนรู้ที่ 6

การสร างไฮเปอร ล งค การสร างไฮเปอร ล งค

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

ในอ นเตอร เน ตแต ละไฟลหร อแต ละเว บเพจทสร างข นจะม ท อย ท เราสามารถอ างถ งท ไม ซ ำาก น ซ งเร ยกว า Uniform Resource Locator (URL) ร ปแบบของ URL ประกอบดวย 3 ส วนคอ โปรโตคอล(Protocol) โดเมน(Domain) และทอย ไฟล ในโดเมน (Path)

Page 20: หน่วยการเรียนรู้ที่ 6

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

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

1. สร าง Name Anchor หร อก ำาหนดชอให ก บจ ดท จะเช อมโยงไป

2. สร างล งค ไปย ง Name Anchor ท สร างไว

Page 21: หน่วยการเรียนรู้ที่ 6

การสร างล งค ภายในเว บไซทการสร างล งค ภายในเว บไซทเป นการสร างล งค ภายในเว บไซทเด ยวก น จากเว บเพจหนงไปย งอ กเว บเพจหนง(ไฟล HTML หร อไปยงไฟลอ นๆ

1. เล อกขอความหรอร ปภาพทต องการสร างเป นล งค 2. คล กท ป ม Browse for File 3. คล กเล อกชอไฟลท จะล งค ไปหา4. คล กป ม OK5. ถ าต องการกำาหนดเฟรมหรอว นโดว ปลายทางทต องการใหเว บเพจนแสดงผลใหเล อกจากชอง Target

_blank ให เป ดเว บเพจปลายทางในวนโดว ใหม _self ให แสดงเว บเพจในเฟรมเด มจากทเล อกล งค _parent ให แสดงเว บเพจในเฟรมทครอบเฟรมปจจ บ นอย _top ให แสดงเว บเพจในวนโดว เด ม โดยยกเล กเฟรมทครอบอยท งหมด

6. ทดสอบการทำางานของลงค ภายในเว บไซท

Page 22: หน่วยการเรียนรู้ที่ 6

การล งค ไปย งเว บไซทอ นการล งค ไปย งเว บไซทอ นเป นการล งค ไปย งเว บไซท เว บเพจ ร ปภาพ โปรแกรม หร อ

แหลงข อม ลอ นท อย ภายนอกเว บไซทของเรา1. เล อกขอความหรอร ปภาพทจะท ำาเป นล งค 2. ใส URL ปลายทางในชอง Link บน Propert ies

Inspector (URL ปลายทางต องระบ แบบ เต ม เช น http://www.microsoft.com

3. เล อกว นโดว หร อเฟรมปลายทางทจะแสดงเว บเพจในชอง Target(ถ าต องการ)

Page 23: หน่วยการเรียนรู้ที่ 6

การล งค ไปย งอ เมล การสร างล งค ไปย งอ เมล ค อการระบช ออ เมล แอดเดรสเป นปลายทาง

ของลงค ซ งเม อผ ชมคลกท ล งค จะม การเป ดโปรแกรมอเมล ข นมา (ตามคาด ฟอลตท ก ำาหนดไวในเคร องของผชม เช น Outlook Express) พร อมก บนำาท อย อ เมล ในลงค ไปใส ในชอง To โดยอ ตโนมต ท ำาให ผ ชมสามารถกรอกขอม ลและส งอ เมล ได เลย

1. เล อกขอความหรอร ปภาพทจะท ำาเป นล งค 2. ใส แอดเดรสปลายทางในชอง Link บน Propert ies

Inspector โดยแอดเดรสปลายทางต องระบ ในร ปแบบ mailto:emailaddress เช น mailto:[email protected]

Page 24: หน่วยการเรียนรู้ที่ 6

การสร าง การสร าง Image MapImage MapImage Map ค อ การนำาร ปภาพมาแบงเป นส วนย อยๆ เพ อก ำา

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

ข นตอนการสร าง Image Map1. คล กเล อกร ปภาพทจะน ำามาสร างเป น Image Map2. เล อกเคร องมอ Image Map บน Propert ies Inspector

ทางด านลางซ าย3. คล กลากบนรปภาพเพอวาดร ปทรงก ำาหนดขอบเขตของ Image

Map4. คล กในชอง Link เพ อก ำาหนด URL หร อช อไฟลท จะล งค ไป

หา5. ก ำาหนดเฟรมหรอว นโดว ปลายทางทจะแสดงผลในชอง Target

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

ล งค ในชอง Alt (ถ าต องการ)7. ท ำาซ ำาข นตอนท 2-6 เพ อสร าง Hotspot ส วนอ นๆในร ปภาพ8. ทดสอบการทำางานของ Image map โดยกด F12 แล วเล อน

เมาส ไปคลกบนขอบเขตทก ำาหนดไว

Page 25: หน่วยการเรียนรู้ที่ 6

การสร างล งค แบบ การสร างล งค แบบ RolloverRolloverการสร าง Rollover Image น น ก อนอ นต องเตร ยมร ปภาพทม

ขนาดเท าก นไว 2 ร ป เพ อเวลาเปล ยนภาพจะได ด น มนวล ภาพไมกระต กมาก ม ข นตอนดงน

1. เล อกคำาส ง Insert } Interactive Image } Rollover Image จะปรากฏไดอะล อกบอกซ Insert Rollover Image ข นมา

2. พ มพช อของ Rollover ลงในชอง Image Name3. คล กป ม Browse เล อก Original Image (ร ปท แสดงคร ง

แรก)4. คล กป ม Browse เล อก Rollover Image (ร ปท แสดงเม อผ

ชมวางเมาส เหนอร ป)5. พ มพ Alternate Text (ข อความอธบายลงค ) 6. พ มพช อเว บเพจหรอเว บไซทท จะล งค ไปหาในชอง When

Click Go To URL และคลก OK

Page 26: หน่วยการเรียนรู้ที่ 6

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

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

ตารางประกอบไปดวยคอลมน(Column) ในแนวตง และ แถว(Row) ในแนวนอน ม จ ดต ดท เก ดข นจากแถวและคอลมนเร ยกว า เซล (Cell)

Page 27: หน่วยการเรียนรู้ที่ 6

ขนตอนการสร างตารางขนตอนการสร างตาราง

Page 28: หน่วยการเรียนรู้ที่ 6

การจ ดร ปแบบตารางอ ตโนมต การจ ดร ปแบบตารางอ ตโนมต โปรแกรม Dreamwever ได เตร ยมคำาส งในการจ ดการร ปแบบ

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

การเร ยกใชร ปแบบการจ ดตารางส ำาเร จร ป1. คล กในสวนใดสวนนงของตาราง2. เล อกคำาส งจากเมน Command 4 Format Table3. คล กเล อกชอร ปแบบและด ร ปต วอย างทางด านขวา4. รายละเอ ยดทก ำาหนดในรปแบบทเล อก เราสามารถ

เปลยนแปลงได ตามตองการ5. คล ก Apply เพ อด ผลล พธ หากยงไม พอใจสามารถเล อกแบบ

ใหมได 6. คล ก OK เม อเล อกร ปแบบไดแล ว

Page 29: หน่วยการเรียนรู้ที่ 6

การจ ดหนาเว บเพจดวยเลเยอร การจ ดหนาเว บเพจดวยเลเยอร

ในการจ ดหนาเว บเพจทซ บซ อน นอกจากตารางแลว Dreamweaver ย งม เคร องม ออ กชนดหนงท ช วยในการจ ดวางเลย เอาทค อ เลเยอร (Layer)

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

Page 30: หน่วยการเรียนรู้ที่ 6

ว ธ การแสดงเน อหาทใหญกว าว ธ การแสดงเน อหาทใหญกว าเลเยอร เลเยอร

ถาม การก ำาหนดขนาดเลเยอร เล กกว าเน อหาภายใน ก สามารถเล อกได ว าจะแสดงเน อหาภายในอยางไร โดยเล อกออปชน Overf low จาก Propert ies Inspector ด งน

Visible ให แสดงเลเยอร ออกจนสามารถแสดงเน อหาได ครบHidden ซ อนเน อหาทเก นขนาดเลเยอร ไว Scroll แสดง Scroll bar ท ขอบขวาของเลเยอร ให เล อนด เน อหาท

เก นได Auto แสดง Scroll bar เฉพาะกรณเน อหาเก นขนาดเลเยอร เท าน นช องว างหมายถงไม ระบ ค าปกต ค อ visible