Macromedia Macromedia Dreamweaver 8Dreamweaver 8

โปรแกรม Macromedia Dreamweaver โปรแกรมสำหร�บกรสำร�งเว็�บเพจ บร�หรจ�ดกรเว็�บไซต์� รว็มไปถึ�งกรพ�ฒนเว็�บแอปพลิ�เคชั�น เน#$องจกต์�ว็ Dreamweaver ม%คว็มสำมรถึที่%$โดดเด'น ด�งน%( สำมรถึเขี%ยนโปรแกรมสำหร�บเว็�บได�ที่+กร,ปแบบ เชั'น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมน,คสำ� $งแลิะเคร#$องม#อต์'งๆ เร%ยกใชั�งนได�ง'ยแลิะสำะดว็กม%กรปร�บปร+งกลิไกภยในให�ม%ประสำ�ที่ธิ�ภพสำ,งขี�(น สำมรถึสำร�งแอปพลิ�เคชั�นง'ยๆ โดยไม'จเป2นต์�องเขี%ยนโปรแกรม สำร�งเว็�บเพจภษไที่ยได�ที่�นที่%โดยไม'ต์�องต์�ดต์�องโปรแกรมเสำร�มเพระ Dreamweaver รองร�บต์�ว็อ�กษรแบบ Unicode

การเข้�าสู่�โปรแกรม การเข้�าสู่�โปรแกรม Macromedia Macromedia

Dreamweaver 8Dreamweaver 8ม%ขี� (นต์อน ค#อ คลิ�กเลิ#อก Start -> Program -> Macromedia -> Macromedia Dreamweaver 8 ในกรเขี�สำ,'ระบบในคร�(งแรกโปรแกรมจะถึมร,ปแบบกรใชั�งน 2 ร,ปแบบ ค#อ

1. Designer หมยถึ�ง กรสำร�งแลิะออกแบบเว็�บเพจโดยที่�$ว็ไป สำ'ว็นมกน�ยมเลิ#อกร,ปแบบน%(

2. Code หมยถึ�ง ว็�ธิ%กรสำร�งเว็�บเพจที่%$เน�นกรเขี%ยนชั+ดคสำ�$งเอง

สู่วนประกอบข้องหน�าต่างสู่วนประกอบข้องหน�าต่าง หน�าจอ Start Pageที่+กคร�(งเม#$อเป4ดโปรแกรม Macromedia

Dreamweaver 8 จะปรกฏหน�จอเร�$มต์�น (Start Page) สำหร�บเป4ดเอกสำรเว็�บเพจเด�มหร#อสำร�งเอกสำรเว็�บเพจใหม' โดยที่�$ว็ไปแบ'งออกเป2น 3 กลิ+'ม ด�งต์'อไปน%(

เม#$อเรเลิ#อกประเภที่กรที่งนแลิ�ว็ (ในกรณี%น%(ผู้,�สำอนคลิ�กเลิ#อก HTML จกสำ'ว็นขีอง Create New) จะปรกฏหน�ต์'งกรที่งนขีองโปรแกรม โดยม%รยลิะเอ%ยดด�งต์'อไปน%(

1. แถบชื่��อเร��อง (Titlebar) เป2นสำ'ว็นที่%$ใชั�แสำดงชั#$อโปรแกรม Dreamweaver 8 แลิะชั#$อไฟลิ�เอกสำรเว็�บเพจที่%$กลิ�งที่งนอย,'

2. แถบรายการคำ�าสู่��ง (Menu Bar) เป2นสำ'ว็นที่%$รว็บรว็มรยกรคสำ�$งกรที่งนเอไว็� สำมรถึเป4ดรยกรคสำ�$งต์'งๆ ขี�(นมใชั�งนโดยคลิ�กที่%$ชั#$อรยกรคสำ�$งแลิ�ว็เลิ#$อนเมสำ�ไปย�งต์แหน'งที่%$ต์�องกรใชั�งน หกรยกรคสำ�$งใดม%รยกรคสำ�$งย'อยจะแสำดงลิ,กศรอย,'ม+มขีว็ขีองรยกร หกเลิ#$อนเมสำ�ไปย�งบร�เว็ณีด�งกลิ'ว็ จะแสำดงรยกรคสำ�$งย'อยเพ#$อใชั�งนต์'อไป

3. แถบแทรก (Insert Bar) เป2นแถึบที่%$ประกอบด�ว็ยป+:มคสำ� $งที่%$ใชั�ในกรแที่รกออบเจ�กต์�หร#อว็�ต์ถึ+ต์'งๆ ลิงในเอกสำรเว็�บเพจ โดยแบ'งเป2นหมว็ดหม,' ม%รยลิะเอ%ยดด�งต์'อไปน%(

Common เป2นชั+ดคสำ� $งสำหร�บแที่รกออปเจ�กต์�ที่%$เร%ยกใชั�งนบ'อยๆ ในกรสำร�งเว็�บเพจ เชั'น ร,ปภพ กรฟ4ก ต์รง ไฟลิ�ม%เด%ย เป2นต์�น

Layout สำหร�บเลิ#อกม+มมองในกรสำร�งเว็�บเพจ เชั'น ม+มมองปกต์� ม+มมองแบบขียย เพ#$อให�เห�นออปเจ�กต์�ต์'งๆ ได�อย'งชั�ดเจน

Forms ใชั�สำหร�บแที่รกออปเจ�กต์�ที่%$ใชั�สำร�งแบบฟอร�มร�บขี�อม,ลิจกผู้,�ชัม เชั'น ชั'องร�บขี�อคว็ม แลิะฟ4ลิด� (Field) ชัน�ดต์'งๆ

Text สำหร�บจ�ดร,ปแบบขี�อคว็มในเว็�บเพจ เชั'น ห�ว็เร#$อง ต์�ว็หน ต์�ว็เอ%ยง จ�ดห�ว็ขี�อ จ�ดย'อหน� แลิะแที่รกสำ�ญลิ�กษณี�พ�เศษต์'งๆ

Application สำหร�บแที่รกคสำ�$งแลิะกรด�งขี�อม,ลิจกฐนขี�อม,ลิมแสำดงบนเว็�บFlash element สำหร�บนไฟลิ� Flash เขี�มใชั�งนFavorite สำหร�บจ�ดเก�บออบเจ�กต์�ที่%$ชัอบเพ#$อคว็มสำะดว็กในกรใชั�งน

4. Toolbar เป2นแถึบเคร#$องม#อที่%$เก�บป+:มคสำ� $งที่%$ต์�องใชั�งนบ'อยๆ 5. Document Area เป2นสำ'ว็นที่%$ใชั�สำหร�บสำร�งหน�เว็�บเพจ โดยกรใสำ'

เน#(อหแลิะจ�ดองค�ประกอบต์'งๆ นมว็งใน Document Area แลิะสำมรถึเลิ#อกพ#(นที่%$กรที่งนได�หลิยม+มมอง เชั'น Show Code View,Show Code and Design View ด�งที่%$ได�กลิ'ว็ไว็�แลิ�ว็ขี�งต์�น

6. Status Bar ค#อ แถึบแสำดงสำถึนะที่%$อย,'บร�เว็ณีด�นลิ'งขีองพ#(นที่%$สำร�งงน (Document Area) ซ�$งประกอบด�ว็ย 2 สำ'ว็น ค#อ ที่งด�นซ�ยเร%ยกว็' Tag Selector ใชั�สำหร�บแสำดงคสำ�$ง HTML ขีองสำ'ว็นประกอบในเว็�บเพจที่%$เลิ#อกอย,' แลิะที่งด�นขีว็เป2นสำ'ว็นที่%$บอกขีนดแลิะเว็ลิที่%$ใชั�ในกรดว็น�โหลิดเว็�บเพจ

7. Properties Inspector เป2นหน�ต์'งแสำดงค+ณีสำมบ�ต์�ขีองออปเจ�กต์�ที่%$เรกลิ�งเลิ#อกในเว็�บเพจ แลิะสำมรถึกหนดหร#อแก�ไขีค+ณีสำมบ�ต์�ขีองสำ'ว็นประกอบต์'งๆ ในหน�เว็�บเพจได� เชั'น ขี�อคว็ม สำ% ขีนด ต์รง ลิ�งก� เป2นต์�น โดยรยลิะเอ%ยดภยในหน�ต์'ง Properties Inspector จะไม'เหม#อนก�นขี�(นอย,'ก�บว็'ขีณีะน�(นเรกลิ�งเลิ#อกที่งนก�บออปเจ�กต์�ใดอย,'

8. Panels เป2นกรอบเลิ�กๆ บร�เว็ณีด�นขีว็ ประกอบด�ว็ยเคร#$องม#อสำหร�บใชั�ที่งนต์'งๆ ซ�$งแต์'ลิะสำ'ว็นขีอง Panels จะม%หน�ที่%$แต์กต์'งก�นไป เชั'น กรจ�ดเก�บ Code, CSS, Behavior อ%กที่�(งไฟลิ�แลิะโฟลิเดอร�ภยในเว็�บไซต์�

กรเขี�สำ,'โปรแกรมกรเขี�สำ,'โปรแกรม   1. คลิ�กป+:ม start > All Programe > Macromedia > Macromedia Dreamweaver MX 2004 เพ#$อเขี�สำ,'โปรแกรม

สำ'ว็นประกอบสำ'ว็นประกอบ1. แถบ Menu Barหน�ต์'ง File สำหร�บด,ขี�อม,ลิต์'ง ๆ ในหน�เพจ เชั'น

เคร#$องม#อต์'ง ๆ แลิะกรใชั� FTP2. แถบเคำร��องม�อ Insert Bar ม%หลิยเคร#$องม#อด�ว็ยก�น จะแสำดงให�เห�น

เม#$อคลิ�=กที่%$กลิ+'มเคร#$องม#อ แต์'ลิะกลิ+'มในที่%$น%(จะอธิ�บยบงเคร#$องม#อ แลิะเรจะลิองใชั�งนก�นในบที่หลิ�งๆ

3. สู่วน Panel ต่าง ๆ เป2นสำ'ว็นขีองหน�ต์'งซ�$งเรต์�องใชั�งนเม#$อเรต์�องกรเพ�$มเต์�มคว็มสำมรถึบงอย'งลิงไปในเว็�บเพจขีองเรเชั'นเพ�$ม CSS เขี� ไปเพ#$อใชั�ในกรจ�ดแต์'งสำ'ว็นต์'ง ๆ ขีอง webpage กรที่ Layer เป2นต์�น

สู่วน สู่วน DesignDesign หน�าต่าง Design น"#จะเป$นหน�าต่างท"�รวบรวมเคำร��องม�อ อาท%เชื่น หน�าต่าง CSS Styles หน�าต่าง HTML Styles หน�าต่าง Bahaviors หร�อจะพู�ดให�เข้�าใจ ก)คำ�อ หน�าต่าง Design น"#จะรวบรวม เคำร��องม�อท"�เก"�ยวก�บการ ต่กแต่งเว)บด�วย CSS Style และ HTML Styles รวมถ+งการใสู่ล�กเลนพู%เศษต่าง ๆ มารวมก�นไว�น��นเอง

สู่วน Code หน�าต่าง Code น"#จะรวบรวมเคำร��องไม�เคำร��องม�อต่างๆเหม�อนก�บหน�าต่าง Design ซึ่+�งหน�าต่าง Code น"#ได�รวบรวมหน�าต่าง เคำร��องม�อท"จ�าเป$นไว�ด�งน"# Tag Inspector , Snippets , Reference

5. สู่วนต่าง ๆ properties สู่วนข้อง Properties สู่วนน"#ก)เป$นอ"กสู่วนท"�เราใชื่�งานก�นบอยมากเป$นเคำร��องม�อท"�ไว�ใชื่�ก�าหนดคำาข้องเคำร��องม�อใน tool File หน�าต่าง Property น"#จะข้+#นอย�ก�บเคำร��องม�อท"�เราเล�อกใชื่� วาม"คำาอะไรให� set บ�าง เชื่น ใชื่�ในการก�าหนดชื่��อ Font ภายใน webpage ใชื่�ในการก�าหนด link สู่"ต่าราง ฟอร2ม อ"ก มากมายเป$นต่�น

คำ3ณสู่มบ�ต่%ท��วไปข้องโปรแกรมคำ3ณสู่มบ�ต่%ท��วไปข้องโปรแกรมMacromedia Dreamweaver เป$นโปรแกรมสู่�าหร�บออกแบบและพู�ฒนา

เว)บไซึ่ท2 ด�วยการสู่ร�างเว)บเพูจและเว)บแอพูพูล%เคำชื่��น ท"�ก�าล�งเป$นท"�น%ยมน�ามาสู่ร�างเว)บไซึ่ท2ในป6จจ3บ�น เน��องจากใชื่�งานงาย โดยเราสู่ามารถท"�จะจ�ดวางข้�อคำวาม ร�ปภาพู ต่ารางข้�อม�ล แบบฟอร2ม ฯลฯ ลงไปในเว)บเพูจได�อยางงายดายโดยไมจ�าเป$นต่�องใชื่�โคำ�ด HTML ซึ่+�งม"ข้�#นต่อนย3งยากและซึ่�บซึ่�อน ท�าให�ม"โอกาสู่ผิ%ดพูลาดได�งาย ใน Dreamweaver ม"เคำร��องม�อมากมายให�ใชื่�ในการพู�ฒนาเว)บได�อยางรวดเร)ว สู่วยงาม และม"ประสู่%ทธิ%ภาพูสู่�ง

Dreamweaver ม"เคำร��องม�อในการจ�ดการและบร%หารเว)บไซึ่ท2 ท"�ชื่วยให�เราจ�ดการก�บไซึ่ท2และไฟล2ท"�เก"�ยวข้�องก�บไซึ่ท2ข้องเรา เชื่น สู่ร�าง ลบ ย�าย และเปล"�ยนชื่��อไฟล2เป$นต่�น นอกจากน"#ย�งม"เคำร��องม�อในการอ�พูโหลดไฟล2ข้องเราข้+#นเว)บเซึ่%ร2ฟเวอร2เพู��อเผิยแพูรข้�อม�ลสู่�อ%นเต่อร2เน)ต่ได�โดยต่รง

ในเว)บเพูจนอกจากจะม"โคำ�ดภาษา HTML แล�ว ในป6จจ3บ�นเว)บเพูจจะม"การโต่�ต่อบก�บผิ��ใชื่�ได� ซึ่+�งจะต่�องอาศ�ยเทคำโนโลย"อ��นๆมาเสู่ร%ม เพู��อให�การน�าเสู่นข้�อม�ลม"ประสู่%ทธิ%ภาพู เทคำโนโลย"เหลาน"#ได�แก CSS (Cascading Style Sheet) ภาษา JavaScript , ภาษา XML และม�ลต่%ม"เด"ย Flash เป$นต่�น ซึ่+�ง Dreamweaver ได�สู่น�บสู่น3นเทคำโนโลย"ต่างๆเหลาน"#อยางสู่มบ�รณ2แบบ

ว%นโดว2 ว%นโดว2 DocumentDocument

ว%นโดว2 Document คำ�อสู่วนท"�จะใสู่เน�#อหาและจ�ดองคำ2ประกอบข้องเว)บเพูจลงไป การใชื่�งานว%นโดว2น"#จะคำล�ายก�บการใชื่�งานเว%ร2ดโปรเซึ่สู่เซึ่อร2ท��วไป คำ�อการพู%มพู2ข้�อคำวาม ใสู่ร�ปภาพู สู่ร�างต่ารางข้�อม�ล โดยเน�#อหาต่างๆท"�แทรกลงไปจะปรากฏให�เห)นคำล�ายก�บท"�ปรากฏในบราวเวอร2 ยกเว�นข้�อม�ลบางอยาง เชื่น ภาพูเคำล��อนไหว หร�อ Movie Flash (แต่สู่�าหร�บ Flash เราสู่ามารถคำล%กท"�ป3;ม Play เลนภาพูเคำล��อนไหวได�

ว%นโดว2 Document ม"ม3มมองในการท�างาน 3 ม3มมอง คำ�อ1. ม3มมองออกแบบ (Design View)2. ม3มมองโคำ�ด HTML(Code View)3. ม3มมองโคำ�ดและออกแบบ(Code & Design View)

ในการท�างานก�บม3มมองต่างๆ ท�าให�การสู่ร�างเว)บเพูจสู่ะดวกรวดเร)ว เพูราะสู่ามารถท"�จะท�างานได�หลายว%ธิ"สู่ล�บก�นไปต่ามคำวามเหมาะสู่ม

การต่%ดต่�#งระบบภาษาไทยการต่%ดต่�#งระบบภาษาไทยDreamweaver MX เป$นโปรแกรมท"�ไมได�สู่น�บสู่น3นภาษาไทยโดยต่รง

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

Dreamweaver MX Thai Addon ม"คำ3ณสู่มบ�ต่%ด�งน"#1. เพู%�มการเข้�ารห�สู่ (Encoding) แบบ windows- 874 และ

tis- 620 สู่�าหร�บเว)บเพูจภาษาไทย2. ท�าให�สู่ามารถแสู่ดงผิลและพู%มพู2ภาษาไทยในพูาเนลต่างๆ3. แก�ไข้การแสู่ดงผิลภาษาไทยต่ามเมน�ให�ใหญข้+#น

การวางแผินออกแบบเว)บไซึ่ท2การวางแผินออกแบบเว)บไซึ่ท21. ก�าหนดเป>าหมายข้องเว)บไซึ่ท2Dreamweaver MX2. ก�าหนดกล3มเป>าหมายข้องผิ��เข้�าชื่ม

3 จ�ดโคำรงสู่ร�างเว)บไซึ่ท2 4. ออกแบบโคำรงรางหล�กข้องเว)บไซึ่ท2 5 . ก�าหนด Dreamweaver Site

Dreamweaver Site ม" 3 สู่วนด�วยก�นคำ�อLocal Folder เป$นไดเร)กทอร"�ท"�เก)บเว)บไซึ่ท2ท"�เราสู่ร�างข้+#นภายใน

เคำร��องคำอมพู%วเต่อร2ข้องเราเอง ซึ่+�ง Dreamweaver จะเร"ยกวา Local SiteRemote Folder เป$นไดเร)กทอร"�ท"�ใชื่�เก)บและเผิยแพูรเว)บไซึ่ท2ท"�อย�

บนเว)บเซึ่%ร2ฟเวอร2 ซึ่+�ง Dreamweaver เร"ยกวา Remote SiteFolder For Dynamic Page เป$นไดเร)กทอร"�ท"�ใชื่�ในการจ�ดเก)บ

และประมวลผิล Dynamic Page หร�อเว)บเพูจท"�ม"การใชื่� Server Side Script ท"�สู่ร�างข้+#นภายในเว)บไซึ่ท2ข้องเรา

การสู่ร�างและแก�ไข้เว)บไซึ่ท2การสู่ร�างและแก�ไข้เว)บไซึ่ท2

ข้�#นต่อนการสู่ร�างเว)บไซึ่ท2ใหม1. เล�อกคำ�าสู่��ง Site New Site จากเมน�2. จะปรากฏไดอะล)อกบ)อกซึ่2 Site Definition for

Untitled Site 1 ให�คำล%กท"�แท)บ Basic3. ใน Edit Files หน�าแรกพู%มพู2ชื่��อเว)บไซึ่ท2ลงไปท"�ชื่อง What

would you like to name your site ? และคำล%กป3;ม Next4. ใน Edit Files, Part 2 เล�อก Server Technology

แล�วเล�อก No , I do not want to use server technology และคำล%กท"� Next

5. ใน Edit Files , Part 3 ให�เล�อกไดเร)กทอร"�ท"�จะท�าเป$นเว)บไซึ่ท2 โดยคำล%กท"�ไอคำอน เพู��อเป?ดเข้�าไปในโฟลเดอร2ท"�ต่�องการแล�วคำล%ก Select จากน�#นคำล%กป3;ม Next

6. หล�งจากน�#นจะปรากฏหน�าจอข้องการเล�อกการ Sharing Files ให�เล�อกเป$น None และคำล%กป3;ม Next

7. จะปรากฏหน�าจอ Summary ซึ่+�งแสู่ดงรายละเอ"ยดข้องเว)บไซึ่ท2ข้+#นมา ให�คำล%กท"�ป3;ม Done เพู��อสู่%#นสู่3ดการสู่ร�าง Site

การสู่ร�างเว)บเพูจใหมท3กคำร�#งท"�เป?ด Dreamweaver ข้+#นมา จะปรากฏเว)บเพูจวางข้+#นมาให� 1 หน�า

เพู��อให�เราสู่ามารถลงม�อสู่ร�างได�ท�นท" แต่ถ�าต่�องการสู่ร�างเว)บเพูจเพู%�ม เราสู่ามารถท�าได�โดย

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

การใสู่ร�ปลงในเว)บเพูจการใสู่ร�ปลงในเว)บเพูจภาพูกราฟ?กท"�จะน�ามาแสู่ดงในเว)บไซึ่ท2ม"ก�นอย�มากมายหลายแบบ แต่ท"�น%ยมน�ามาใชื่�งานก�นมากท"�สู่3ดได�แกแบบ GIF และ JPG

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

การสู่ร�างไฮเปอร2ล%งคำ2การสู่ร�างไฮเปอร2ล%งคำ2

ไฮเปอร2ล%งคำ2 หร�อเร"ยกสู่�#นๆวา ล%งคำ2 (Link) คำ�อการสู่ร�างจ3ดเชื่��อมโยงเอกสู่ารจากจ3ดหน+�งไปย�งอ"กจ3ดหน+�ง หร�อจากเอกสู่ารหน+�งไปย�งเอกสู่ารหน+�ง โดยใชื่� ข้�อคำวาม ร�ปภาพู หร�อเมน� เป$นต่�วน�าทางไปย�งเอกสู่ารด�งกลาว ซึ่+�งเน�#อหาข้�อม�ลอาจเก"�ยวข้�องก�น หร�อไมเก"�ยวข้�องก�นก)ได�เพูราะเอกสู่ารเว)บเพูจม"เป$นจ�านวนมากและไมสู่ามารถน�ามาวางหน�าเด"ยวก�นได�ท�#งหมด จ+งน%ยมสู่ร�างล%งคำ2ข้+#นมาเพู��อให�ผิ��ชื่มสู่ามารถคำล%กกระโดดไปย�งต่�าแหนงต่างๆภายในเว)บไซึ่ท2ได�งายข้+#น

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

การล%งคำ2ภายในเว)บเพูจเด"ยวก�นการล%งคำ2ภายในเว)บเพูจเด"ยวก�นจะใชื่�ในกรณ"ท"�เอกสู่ารเว)บเพูจน�#นม"เน�#อหายาว และเน�#อหาอาจจะแบงเป$น

ห�วข้�อยอยๆ ท�าให�ผิ��ชื่มเล��อนไปย�งต่�าแหนงท"�ต่�องการได�ชื่�า ก�งน�#นอาจจะม"การท�าสู่ารบ�ญหร�อด�ชื่น"ไว�ท"�ต่อนบนข้องเว)บเพูจ และสู่ร�างล%งคำ2ไปย�งสู่วนต่างๆภายในเอกสู่าร การสู่ร�างล%งคำ2ภายในเว)บเพูจเด"ยวก�นประกอบด�วย 2 ข้�#นต่อนคำ�อ

1. สู่ร�าง Name Anchor หร�อก�าหนดชื่��อให�ก�บจ3ดท"�จะเชื่��อมโยงไป

2. สู่ร�างล%งคำ2ไปย�ง Name Anchor ท"�สู่ร�างไว�

การสู่ร�างล%งคำ2ภายในเว)บไซึ่ท2การสู่ร�างล%งคำ2ภายในเว)บไซึ่ท2เป$นการสู่ร�างล%งคำ2ภายในเว)บไซึ่ท2เด"ยวก�น จากเว)บเพูจหน+�งไปย�งอ"กเว)บเพูจหน+�ง(ไฟล2 HTML หร�อไปย�งไฟล2อ��นๆ

1. เล�อกข้�อคำวามหร�อร�ปภาพูท"�ต่�องการสู่ร�างเป$นล%งคำ22. คำล%กท"�ป3;ม Browse for File 3. คำล%กเล�อกชื่��อไฟล2ท"�จะล%งคำ2ไปหา4. คำล%กป3;ม OK5. ถ�าต่�องการก�าหนดเฟรมหร�อว%นโดว2ปลายทางท"�ต่�องการให�เว)บเพูจน"#แสู่ดงผิลให�เล�อกจากชื่อง Target

_blank ให�เป?ดเว)บเพูจปลายทางในว%นโดว2ใหม_self ให�แสู่ดงเว)บเพูจในเฟรมเด%มจากท"�เล�อกล%งคำ2_parent ให�แสู่ดงเว)บเพูจในเฟรมท"�คำรอบเฟรมป6จจ3บ�นอย�_top ให�แสู่ดงเว)บเพูจในว%นโดว2เด%ม โดยยกเล%กเฟรมท"�คำรอบอย�ท�#งหมด

6. ทดสู่อบการท�างานข้องล%งคำ2ภายในเว)บไซึ่ท2

การล%งคำ2ไปย�งเว)บไซึ่ท2อ��นการล%งคำ2ไปย�งเว)บไซึ่ท2อ��นเป$นการล%งคำ2ไปย�งเว)บไซึ่ท2 เว)บเพูจ ร�ปภาพู โปรแกรม หร�อแหลงข้�อม�ล

อ��นท"�อย�ภายนอกเว)บไซึ่ท2ข้องเรา1. เล�อกข้�อคำวามหร�อร�ปภาพูท"�จะท�าเป$นล%งคำ22. ใสู่ URL ปลายทางในชื่อง Link บน

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

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

การล%งคำ2ไปย�งอ"เมล2

การสู่ร�างล%งคำ2ไปย�งอ"เมล2 คำ�อการระบ3ชื่��ออ"เมล2แอดเดรสู่เป$นปลายทางข้องล%งคำ2 ซึ่+�งเม��อผิ��ชื่มคำล%กท"�ล%งคำ2จะม"การเป?ดโปรแกรมอ"เมล2ข้+#นมา (ต่ามคำาด"ฟอลต่2ท"�ก�าหนดไว�ในเคำร��องข้องผิ��ชื่ม เชื่น Outlook Express) พูร�อมก�บน�าท"�อย�อ"เมล2ในล%งคำ2ไปใสู่ในชื่อง To โดยอ�ต่โนม�ต่%ท�าให�ผิ��ชื่มสู่ามารถกรอกข้�อม�ลและสู่งอ"เมล2ได�เลย

1. เล�อกข้�อคำวามหร�อร�ปภาพูท"�จะท�าเป$นล%งคำ22. ใสู่แอดเดรสู่ปลายทางในชื่อง Link บน Properties

Inspector โดยแอดเดรสู่ปลายทางต่�องระบ3ในร�ปแบบ mailto:emailaddress เชื่น mailto:tanaysu@thaimail.com

การสู่ร�าง การสู่ร�าง Image MapImage Map

Image Map คำ�อ การน�าร�ปภาพูมาแบงเป$นสู่วนยอยๆ เพู��อก�าหนดเป$นไฮเปอร2ล%งคำ2ท"�แต่กต่างก�น โดยสู่ามารถสู่ร�างได�หลายล%งคำ2ในหน+�งร�ป

ข้�#นต่อนการสู่ร�าง Image Map1. คำล%กเล�อกร�ปภาพูท"�จะน�ามาสู่ร�างเป$น Image Map2. เล�อกเคำร��องม�อ Image Map บน Properties Inspector

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

Map4. คำล%กในชื่อง Link เพู��อก�าหนด URL หร�อชื่��อไฟล2ท"�จะล%งคำ2ไปหา5. ก�าหนดเฟรมหร�อว%นโดว2ปลายทางท"�จะแสู่ดงผิลในชื่อง Target (ถ�า

ต่�องการ)6. ใสู่ข้�อคำวามอธิ%บายล%งคำ2 ซึ่+�งจะแสู่ดงเม��อผิ��ชื่มเล��อนเมาสู่2ไปชื่"#ท"�ล%งคำ2ในชื่อง

Alt (ถ�าต่�องการ)7. ท�าซึ่�#าข้�#นต่อนท"� - 26 เพู��อสู่ร�าง Hotspot สู่วนอ��นๆในร�ปภาพู8. ทดสู่อบการท�างานข้อง Image map โดยกด F 12 แล�วเล��อน

เมาสู่2ไปคำล%กบนข้อบเข้ต่ท"�ก�าหนดไว�

การสู่ร�างล%งคำ2แบบ การสู่ร�างล%งคำ2แบบ RolloverRolloverการสู่ร�าง Rollover Image น�#น กอนอ��นต่�องเต่ร"ยมร�ปภาพูท"�ม"ข้นาด

เทาก�นไว� 2 ร�ป เพู��อเวลาเปล"�ยนภาพูจะได�ด�น3มนวล ภาพูไมกระต่3กมาก ม"ข้�#นต่อนด�งน"#

1. เล�อกคำ�าสู่��ง Insert Interactive Image Rollover Image จะปรากฏไดอะล)อกบ)อกซึ่2 Insert Rollover Image ข้+#นมา

2. พู%มพู2ชื่��อข้อง Rollover ลงในชื่อง Image Name3. คำล%กป3;ม Browse เล�อก Original Image (ร�ปท"�แสู่ดงคำร�#ง

แรก)4. คำล%กป3;ม Browse เล�อก Rollover Image (ร�ปท"�แสู่ดงเม��อ

ผิ��ชื่มวางเมาสู่2เหน�อร�ป)5. พู%มพู2 Alternate Text (ข้�อคำวามอธิ%บายล%งคำ2 )

6. พู%มพู2ชื่��อเว)บเพูจหร�อเว)บไซึ่ท2ท"�จะล%งคำ2ไปหาในชื่อง When Click Go To URL และคำล%ก OK

การออกแบบเว)บเพูจด�วยต่ารางการออกแบบเว)บเพูจด�วยต่าราง

ต่ารางเป$นเคำร��องม�อท"�เราใชื่�ในการแสู่ดงผิลข้�อม�ล ชื่วยในการจ�ดวางเลย2เอาท2ข้องเว)บเพูจได�อยางสู่วยงาม และย�งชื่วยในการจ�ดวางต่�าแหนงการแสู่ดงผิลข้องข้�อคำวามหร�อร�ปภาพูให�ต่รงต่ามต่�าแหนงท"�ต่�องการ

ต่ารางประกอบไปด�วยคำอล�มน2(Column) ในแนวต่�#ง และ แถว(Row) ในแนวนอน ม"จ3ดต่�ดท"�เก%ดข้+#นจากแถวและคำอล�มน2เร"ยกวา เซึ่ล (Cell)

ข้�#นต่อนการสู่ร�างต่ารางข้�#นต่อนการสู่ร�างต่าราง

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

อ�ต่โนม�ต่% ท"�ออกแบบไว�อยางสู่วยงาม ไมวาข้�อคำวาม สู่"พู�#น เสู่�นข้อบ โดยสู่ร�างเป$ยชื่3ดสู่�าเร)จให�เล�อกใชื่�งานได�เลย

การเร"ยกใชื่�ร�ปแบบการจ�ดต่ารางสู่�าเร)จร�ป1. คำล%กในสู่วนใดสู่วนน+�งข้องต่าราง2. เล�อกคำ�าสู่��งจากเมน� Command Format Table3. คำล%กเล�อกชื่��อร�ปแบบและด�ร�ปต่�วอยางทางด�านข้วา4. รายละเอ"ยดท"�ก�าหนดในร�ปแบบท"�เล�อก เราสู่ามารถเปล"�ยนแปลงได�

ต่ามต่�องการ5. คำล%ก Apply เพู��อด�ผิลล�พูธิ2 หากย�งไมพูอใจสู่ามารถเล�อกแบบ

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

การจ�ดหน�าเว)บเพูจด�วยเลเยอร2การจ�ดหน�าเว)บเพูจด�วยเลเยอร2

ในการจ�ดหน�าเว)บเพูจท"�ซึ่�บซึ่�อน นอกจากต่ารางแล�ว Dreamweaver ย�งม"เคำร��องม�ออ"กชื่น%ดหน+�งท"�ชื่วยในการจ�ดวางเลย2เอาท2คำ�อ เลเยอร2 (Layer)

เลเยอร2เปร"ยบเสู่ม�อนแผินใสู่ท"�สู่ามารถวางออปเจ)กต่างๆลงไป และน�ามาเร"ยงซึ่�อนก�นหลายๆชื่�#น โดยออปเจ)คำชื่�#นบนจะบ�งออปเจ)คำชื่�#นท"�อย�ถ�ดไป เลเยอร2แต่ละชื่%#นสู่ามารถจ�ดวางไว�ท"�สู่วนใดข้องหน�าเว)บเพูจก)ได� และสู่ามารถท"�จะใสู่ร�ปภาพู ข้�อคำวาม ต่าราง หร�อออปเจ)คำต่างๆลงไปได�เชื่นเด"ยวก�บในเว)บเพูจ

ว%ธิ"การแสู่ดงเน�#อหาท"�ใหญกวาว%ธิ"การแสู่ดงเน�#อหาท"�ใหญกวาเลเยอร2เลเยอร2

ถ�าม"การก�าหนดข้นาดเลเยอร2เล)กกวาเน�#อหาภายใน ก)สู่ามารถเล�อกได�วาจะแสู่ดงเน�#อหาภายในอยางไร โดยเล�อกออปชื่��น Overflow จาก Properties Inspector ด�งน"#

Visible ให�แสู่ดงเลเยอร2ออกจนสู่ามารถแสู่ดงเน�#อหาได�คำรบHidden ซึ่อนเน�#อหาท"�เก%นข้นาดเลเยอร2ไว�Scroll แสู่ดง Scroll bar ท"�ข้อบข้วาข้องเลเยอร2ให�เล��อนด�เน�#อหาท"�เก%น

ได�Auto แสู่ดง Scroll bar เฉพูาะกรณ"เน�#อหาเก%นข้นาดเลเยอร2เทาน�#นชื่องวางหมายถ+งไมระบ3 คำาปกต่% คำ�อ visible