Dream weaver8

เอกสารประกอบการสอน

การสรางเว็บเพจดวยโปรแกรมสํารจ็รูป Macromedia Dreamweaver 8

นายแมนสรวง แซซิม้ ครู คศ.1

โรงเรียนแมจนัวิทยาคม สํานักงานเขตพื้นที่การศึกษาเชียงราย เขต 3

อําเภอแมจัน จงัหวัดเชียงราย

2แมนสรวง แซซิ้ม มิ.ย.49

คํานํา เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการประกอบการเรียนการสอน ในสาระการเรียนรูเทคโนโลยีสารสนเทศ กลุมสาระการงานอาชีพและเทคโนโลยี ซึ่งเนื้อภายในเอกสารนี้ มีทั้งหมด 7 บท ประกอบดวย บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8 บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต บทที่ 3 การใสขอความบนเว็บเพจ บทที่ 4 การใสรูปภาพบนเว็บเพจ บทที่ 5 การจัดหนาเว็บเพจดวยตาราง บทที่ 6 การสรางไฮเปอรลิงกเช่ือโยงระหวางเว็บ บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ ซึ่งสามารถนําไปปฏิบัติและใชงานจริงได และสามารถนําไปสูการเปนมืออาชีพในการสรางเว็บเพจไดอีกดวย หวังวาเอกสารประกอบการสอนเลมนี้คงเปนประโยชนตอนักเรียน และผูสนใจทั่วไปไดเปนอยางดี นายแมนสรวง แซซิ้ม มิถุนายน 2549


สารบัญ หนา บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8 1 บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต 14 บทที่ 3 การใสขอความบนเว็บเพจ 23 บทที่ 4 การใสรูปภาพบนเว็บเพจ 26 บทที่ 5 การจัดหนาเว็บเพจดวยตาราง 31 บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ 34 บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ 43


บทที่ 1 ทําความรูจกักับ Macromedia Dreamweaver 8

acromedia Dreamweaver เปนโปรแกรมสําหรับการสรางเว็บเพจ บริหารจัดการเว็บไซต รวมไปถึงการพัฒนาเว็บแอปพลิเคชัน เนื่องจากตัว Dreamweaver มีความสามารถที่โดดเดน ดังนี้

สามารถเขียนโปรแกรมสําหรับเว็บไดทุกรูปแบบ เชน ASP, ASP.Net, ColdFusion, JSP, PHP, XML, XHTML

เมนูคําสั่งและเครื่องมือตางๆ เรียกใชงานไดงายและสะดวก มีการปรับปรุงกลไกภายในใหมีประสิทธิภาพสูงขึ้น สามารถสรางแอปพลิเคชันงายๆ โดยไมจําเปนตองเขียนโปรแกรม สรางเว็บเพจภาษาไทยไดทันทีโดยไมตองติดตองโปรแกรมเสริมเพราะ Dreamweaver รองรับตัวอักษรแบบ Unicode

การติดตั้งโปรแกรม Dreamweaver 8 ในการติดตั้งโปรแกรม Dreamweaver 8 เริ่มจากใสแผนซีดีติดตั้งลงในไดรฟซีดีรอม หลังจากนั้นทําตามขั้นตอนดังนี้

M

1 ดับเบิลคลิกท่ีไอคอน


ปรากฏหนาตางตอนรับการติดตั้งโปรแกรม จากนั้น คลิกที่ปุม เพื่อเริ่มตนการติดตั้ง

ปรากฏขอความการใชงานโปรแกรมคลิกที่ปุม เพื่อยอมรับขอตกลง

คลิกปุม

คลิกปุม หากตองการเลือกตําแหนงในการติดตั้งโปรแกรม


2

3

5

4

6


คลิกปุม เพื่อเริ่มตนการติดตั้ง

ปรากฏสถานะการติดตั้ง

เมื่อติดตั้งโปรแกรมเรียบรอยแลว คลิกที่ปุม เพียงเทานี้ก็สามารถใชโปรแกรม Dreamweaver 8 ไดแลว

7

7


1 คลิกปุม

3 เลือกรูปแบบพื้นที่ทํางานของโปรแกรม โดยมีรายละเอียดดังนี้ Designer หมายถึง การสรางและออกแบบเว็บเพจโดยทั่วไป ซึ่งสวนมากนิยมเลือกรูปแบบนี้

Code หมายถึง วิธีการสรางเว็บเพจที่เนนการเขียนชุดคําสั่งเองจากนั้นคลิกปุม OK (โดยในที่เลือก Disigner)

การเขาสูโปรแกรม Dreamweaver 8 เมื่อเราติดตั้งโปรแกรม Dreamweaver 8 เรียบรอยแลว สามารถเปดโปรแกรมขึ้นมาใชงานไดเลย โดยมีขั้นตอนดังนี้

2 เลือก All Programs>Macromedia> Macromedia Dreamweaver 8 เพื่อ เริ่มตนการใชงาน


แนะนําสวนประกอบของโปรแกรม Dreamweaver 8 กอนลงมือสรางหนาเว็บเพจนั้น ขอแนะนะสวนประกอบของโปรแกรม Dreamweaver 8 วาแตละสวนมีรายละเอียดอยางไรบาง หนาจอ Start Page ในการเปดโปรแกรม Dreamweaver 8 ทุกครั้งจะปรากฏหนาจอเริ่มตน (Start Page) สําหรับเปดเว็บเพจเดิมหรือสรางเว็บเพจใหม โดยแบงเปน 3 กลุม ดังนี้

1. เปดไฟลเว็บเพจที่เคยใชงานมาแลว (Open a Recent Item) เปนสวนแรกของหนาจอเริ่มตนใชสําหรับเปดงานที่เราทําคางไว ซึ่งเลือกจากรายการชื่อที่แสดงอยู โดย

โปรแกรมจะแสดงงานที่เปดใชบอยอยูดานบน 2. การสรางงานใหม (Create New)

ในสวนนี้เปนการเลือกประเภทงานที่ตองการสรางใหม โดยเลือกประเภทไฟลตางๆ ได เชน HTML, PHP, ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, JSS, CSS หรือเลือกแบบฟอรมอื่นๆ เปนตน

3. การสรางงานตามแบบฟอรม (Create from Sample) เปนสรางเว็บเพจตามแบบฟอรมที่โปรแกรมไดจัดไวใหแลว ซึ่งมีรูปแบบใหเลือกหลายประเภท

1 เปดเว็บเพจที่เคยใชงานมาแลว

2 การสรางงานใหม 3 การสรางงานตามแบบฟอรม


ตัวอยางแบบฟอรมท่ีชวยในการออกแบบ นอกจากนี้ยังสามารถศึกษาโปรแกรม Dreamweaver 8 จากอินเตอรเน็ตในหัวขอ Take a quick tour of Dereamweaver. หรือเรียนรูจากโปรแกรมชวยสอนจากหัวขอ Learn about documentation resources

เรียนรูจากโปรแกรมชวยสอน (Dreamweaver Help)


สวนประกอบหนาจอโปรแกรม เมื่อเราเลือกประเภทการทํางานแลว (ในกรณีนี้ผูสอนคลิกเลือก HTML จากสวนของ Create New) จะปรากฏหนาตางการทํางานของโปรแกรม 1. Titlebar

เปนสวนแสดงชื่อโปรแกรม Dreamweaver 8 และชื่อไฟลที่ทํางานอยู

2. Menu Bar

เปนสวนที่รวบรวมเมนูคําสั่งการทํางานเอาไว ซึ่งสามารถเปดเมนูตางๆ ขึ้นมาใชงานโดยคลิกที่ช่ือเมนูแลวเลื่อนเมาสไปยังตําแหนงที่ตองการได หากเมนูนั้นมีคําสั่งยอยจะมีลูกศร แลวเลื่อนเมาสไปยังคําสั่งยอยเหลานั้นได

1 Titlebar

2 Menu Bar 3 Insert Bar

4 Toolbar

5 Document Area

6 Status Bar

7 Properties Inspector 8 Panel


คําสั่งยอยของเมนูตางๆ

3. Insert Bar

เปนแถบที่ประกอบดวยปุมคําสั่งที่ใชในการแทรกออบเจ็กต (องคประกอบตางๆ) ลงในเว็บเพจ โดยแบงเปนหมวดหมูซึ่งมีรายละเอียดดังนี้

Common เปนชุดคําสั่งสําหรับแทรกออปเจ็กตที่เรียกใชงานบอยๆ ในการสรางเว็บเพจ เชน รูปภาพ กราฟก ตาราง ไฟลมีเดีย เปนตน

Layout สําหรับเลือกมุมมองในการสรางเว็บเพจ เชน มุมมองปกติ มุมมองแบบขยาย เพื่อใหเห็นออปเจ็กตตางๆ ไดอยางชัดเจน

Forms สํากรับแทรกออปเจ็กตที่ใชสรางแบบฟอรมรับขอมูลจากผูชม เชน ชองรับขอความและฟลดชนิดตางๆ

Text สําหรับจัดรูปแบบขอความในเว็บเพจ เชน หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวขอ จัดยอหนา และแทรกสัญลักษณพิเศษตางๆ

Application สําหรับแทรกคําสั่งและการดึงขอมูลจากฐานขอมูลมาแสดงบนเว็บ

แสดงคําสั่งยอยของเมนู Table Mode


Flash element สําหรับนําไฟล Flash เขามาใชงาน

Favorite สําหรับจัดเก็บออบเจ็กตที่ชอบเพื่อความสะดวกในการใชงาน

Show as Tabs เปลี่ยนแถบเครื่องมือใหแสดงผลในลักษณะแท็บคําสั่งเรียงตอกันไป

4. Toolbar

เปนแถบเครื่องมือที่เก็บปุมคําสั่งที่ตองใชงานบอยๆ ซึ่งประกอบดวย

Show Code View สําหรับแสดงการทํางานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคําสั่ง HTML หรือคําสั่งภาษาสคริปต (Script) อื่นๆ ไดดวย

Show Code and Design สําหรับแสดงการทํางานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงสวนของคําสั่งไวดานบนและแสดงเว็บเพจปกติไวดานลาง


Show Design View สาํหรับแสดงเว็บเพจคลายกับที่เราเห็นใจเบราเซอร เชน ขอความ กราฟก หรือออปเจ็กตอื่นๆ และสามารถแกไขเนื้อหาลงเว็บเพจได

5. Document Area เปนสวนที่ใชสําหรับสรางหนาเว็บเพจ โดยการใสเนื้อหาและจัดองคประกอบตางๆ นํามาวางใน Document Area และสามารถเลือกพื้นที่การทํางานไดหลายมุมมอง เชน Show Code View, Show Code and Design View ดังที่ไดกลาวไวแลวขางตน

6. Status Bar คือ แถบแสดงสถานะที่อยูบริเวณดานลางของพื้นที่สรางงาน (Document Area) ซึ่งประกอบดวย 2 สวน คือ ทางดานซายเรียกวา Tag Selector ใชสําหรับแสดงคําสั่ง HTML ของสวนประกอบในเว็บเพจที่เลือกอยู และทางดานขวาเปนสวนที่บอกขนาดและเวลาที่ใชในการดาวนโหลดเว็บเพจ

7. Properties Inspector

Tag Selector สวนที่บอกขนาดและเวลาที่ใชในการดาวนโหลดเว็บเพจ


เปนหนาตางแสดงคุณสมบัติของออปเจ็กตที่เรากําลังเลือกในเว็บเพจ และสามารถกําหนดหรือแกไขคุณสมบัติของสวนประกอบตางๆ ในหนาเว็บเพจได เชน ขอความ สี ขนาด ตาราง ลิงก เปนตน โดยรายละเอียดภายในหนาตาง Properties Inspector จะไมเหมือนกันขึ้นอยูกับวาขณะนั้นเรากําลังเลือกทํางานกับออปเจ็กตใดอยู

Properties Inspector ของภาพกราฟก

Properties Inspector ของขอความ

Properties Inspector ของตาราง

8. Panels

เปนกรอบเล็กๆ บริเวณดานขวา ประกอบดวยเครื่องมือสําหรับใชทํางานตางๆ ซึ่งแตละสวนของ Panels จะมีหนาที่แตกตางกันไป เชน การจัดเก็บ Code, CSS, Behavior อีกทั้งไฟลและโฟลเดอรภายในเว็บไซต (โดยรายละเอียดตางๆ จะอธิบายใน Chapter ตอๆ ไป) และเรียกขึ้นมาใชงานโดยใชคําสั่ง Windows จากนั้นเลือกช่ือ Panels ทีต่องการเปด/ปด หรือใชคียลัดดานหลังช่ือ Panels ก็ไดเชนกัน

สําหรับซอน/แสดง Properties Inspector สําหรับยอ/ขยาย Properties Inspector

คลิกเพื่อซอน/แสดง Panels คลิกเพื่อเปดพาเนลที่ซอนอยู

ดับเบิลคลิกเพื่อขยายกลุมพาเนล

คลิกเพื่อเปดหัวขอยอย


บทที่ 2 กําหนดคุณสมบัติและการจัดขอมลูของเว็บไซต

เม่ือเริ่มตนสรางเว็บไซตนั้น เราตองทําความเขาใจในเรื่องการกําหนดโครงสรางการจัดขอมูลของ

เว็บไซตและการกําหนดคุณสมบัติตางๆ โดยใน Chapter นี้จะอธิบายขั้นตอนในการสรางเว็บไซต และ เว็บเพจและกําหนดคุณสมบัติตางๆ เชน การแกไขและการบันทึกเว็บไซต เพื่อเตรียมความพรอมกอนการใสเนื้อหาใหกับเว็บเพจ การกําหนดไฟลและโฟลเดอรภายในเว็บไซต ภายในเว็บไซตประกอบดวยหนาเว็บเพจและไฟลตางๆ เปนจํานวนมาก หากเว็บไซตของเรามีขนาดใหญจํานวนหนาเว็บเพจและไฟลตางๆ ก็จะมีจํานวนมากขึ้น ดังนั้นการวางแผนในการจัดเก็บไฟลเหลานี้ก็นับวาเปนสิ่งสําคัญ โครงสรางโฟลเดอรภายในเว็บไซตจะประกอบไปดวยโฟลเดอรหลักและโฟลเดอรยอยๆ ที่ซอนกันอยูเปนช้ัน ๆ ลงมา ดังนั้นในการแบงโฟลเดอรหสําหรับเก็บไฟลควรแบงเปนหมวดหมู และแยกตามประเภทของไฟล เชน เว็บเพจ กราฟก สคริปต เปนตน

โครงสรางของโฟลเดอรดังรูปตัวอยาง เปนการกําหนดตําแหนงและสถานที่เก็บไฟลขอมูล โดยมีรายระเอียดของโครงสรางโฟลเดอรภายในเว็บไซต ดังนี้

1. WEBket3 เปนโฟลเดอรหลักของเว็บไซต สําหรับเก็บไฟล HTML ของเว็บเพจ

2. Data เปนโฟลเดอรยอยเก็บฐานขอมูล 3. Flash เปนโฟลเดอรยอยเก็บไฟลที่เปนภาพเคลื่อนไหว

ที่ทําจากโปรแกรมแฟลช 4. galary เปนโฟลเดอรยอยที่เก็บเกี่ยวกับภาพที่ตางๆ ที่

เปนกิจกรรมตางๆ 5. image เปนโฟลเดอรยอยที่เก็บรูปภาพตางๆ ที่ใชใน

เว็บเพจทั้งหมด

ตัวอยางโครงสรางโฟลเดอรภายในเว็บไซต


Dreamweaver Site ขั้นแรกของการสรางเว็บไซต คือการสราง Dreamweaver Site เพื่อกําหนดชื่อเว็บไซต ระบุไฟลเดอรสําหรับจัดเก็บไฟล เปนตน โดยโฟลเดอรนี้จะเปนแหลงรวมเว็บเพจ กราฟก ไฟลอื่นที่สําคัญใหอยูภายในสถานที่เดียวกัน เพื่อความสะดวกในการอัพโหลดขึ้นสูอินเตอรเน็ต โดยการสราง Dreamweaver Site มีขั้นตอนดังนี้

1 คลิกเมนู Site>Manage

2 คลิกปุม แลวเลือกคําสั่ง Site

พิมพช่ือไซตที่ตองการลงในชอง What would you like to name your site? (ควรเปนภาษาอังกฤษ)

3

คลิกปุม เพื่อเริ่มตนขั้นตอไป

4


7

6

89

910

คลิกที่ชอง No, I do not want use a server technology เพื่อสรางเฉพาะไฟล HTML

5

คลิกที่ชอง Edit Local copies on my machine, then upload to server when ready (recommended) เพื่อเลือกทํางานในเครื่องคอมพิวเตอรกอนแลวจึงอัพโหลดขึ้นไปยังเชิรฟเวอรภายหลัง


คลิกปุม เพื่อเลือกโฟลเดอรที่ตองการเก็บเว็บไซต

คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว



11

12

13

14

คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว

คลิกเลือกหัวขอ None เนี่องจากขณะนี้ยังไมตองการเชื่อมตอกับเว็บเซิรฟเวอร


คลิกที่ปุม เพื่อสราง Dreamweaver Site ตามคาที่กําหนดไว

ปรากฏชื่อไซตบริเวณพาเนล Files


1 2

3

4

5

การสรางหนาเว็บเพจ เราสามารถสรางหนาเว็บเพจขึ้นมาใหมไดทันที ในกรณีที่เปดโปรแกรมแลวไมปรากฏหนาเว็บเพจในพ้ืนที่สรางงาน โดยการสรางหนาเว็บเพจมีขั้นตอนดังนี้

คลิกเมนู File > New คลิกเลือก Basic page

คลิกเลือก HTML เพื่อสรางหนาเว็บเพจเปลาแบบธรรมดา

คลิกปุม Create

ปรากฏหนาวางเปลาสําหรับสรางเว็บเพจ


1

2

1 2

3

4

การกําหนดคณุสมบัติใหเว็บเพจ เมื่อเราสรางหนาเว็บเพจขึ้นมาแลวขั้นตอนตอไปคือ การกําหนดคุณสมบัติใหเว็บเพจ โดยมีขั้นตอนดังนี้

ชื่อของเว็บเพจ ช่ือของเว็บเพจจะไปปรากฏอยูที่แถบ Titlebar โดยการตั้งช่ือหนาเว็บเพจมีขั้นตอนดังนี้

คลิกเมนู Modify > Page Properties

ในชอง Category คลิกเลือก Title/Encoding

ปรากฎหนาตาง Page Properties สําหรับกําหนดคุณสมบัติใหเว็บเพจ

พิมพช่ือเว็บที่ตองการ

คลิกปุม Apply

ปรากฏชื่อที่ต้ังบนแถบ Titlebar


1

2

3

1

2

3

5 4

กําหนดรูปแบบแสดงภาษา เราสามารถกําหนดรูปแบบการแสดงภาษาเพื่อใหเว็บเพจแสดงผลเปนภาษาไทย โดยมีขั้นตอนดังนี้

การใสสีพื้นหลังใหหนาเว็บเพจ พ้ืนหลัง (Background) ในหนาเว็บเพจปกติจะมีสีขาวไมเปนที่นาสนใจ การใสสีใหพ้ืนหลังก็เปนอีกวิธีหนึ่งซึ่งจะชวยใหเว็บของเรานาสนใจมากขึ้น โดยการใสสีพ้ืนหลังใหหนาเว็บเพจมีขั้นตอนดังนี้

ในชอง Category คลิกเลือก Title/Encoding

ในชอง Encoding คลิกเลือก Thai (Windows)

คลิกปุม OK

คลิกเมนู Modify > Page Properties

ในชอง Categry คลิกเลือก Appearance

คลิกในชอง Background area

คลิกที่ปุม OK คลิกเลือกสีที่ตองการเปนพื้นหลัง


6

1

2

3

4

การบันทึกเว็บเพจ เมื่อสรางและกําหนดคุณสมบัติพ้ืนฐานของเว็บเพจเรียบรอยแลว ขั้นตอนตอไปที่ขาดไมไดคือ การบันทึกเว็บเพจเพื่อปองกันการผิดพลาดระหวางการทํางาน โดยการบันทึกเว็บเพจมีขั้นตอนดังนี้

ปรากฎสีพ้ืนหลัง บนหนาเว็บเพจที่ตองการ

คลิกเมนู File > Save หรือปุม <Ctrl+S>

เลือกโฟลเดอร

ต้ังช่ือไฟล

คลิกปุม Save เพื่อบันทึกเว็บเพจ


1

2

3

การทดสอบเว็บเพจกับเบราเซอร ในระหวางการสรางเว็บเพจ เราตองตรวจสอบการแสดงผลของเนื้อหา เชน สี ขนาด และตําแหนงของขอความหรือรูปภาพเมื่อนําขึ้นไปแสดงผลบนเบราเซอร โดยมีขั้นตอนดังนี้

การปดไฟลเว็บเพจ หลังจากที่แกไขหรือบันทึกเว็บเพจเรียบรอยแลว เมื่อตองการเลิกใชงานเราสามารถปดไฟลในแตละหนาตาง โดยมีหลายวิธีดังนี้

o กดปุมคียบอรด <Ctrl+F4> o คลิกเมนู File > Close o คลิกปุม Close บริเวณมุมขวาของหนาตางงาน

คลิกเมนู File > Save หรือปุม <Ctrl+S>

คลิกที่ปุม เลือก Preview in iexplore หรือกดปุม <F12>

ปรากฏผลการทดสอบเว็บเพจใน Internet Explorer


บทที่ 3 การใสขอความบนเว็บเพจ

ขอความตางๆ บนหนาเว็บเพจนับวาเปนองคประกอบที่มีความสําคัญมาก เนื่องจากขอความที่

ปรากฏบนหนาเว็บเพจ จะเปนตัวกลางสื่อความหมายถึงผูเขามาเยี่ยมชมเว็บไซต ดวยเหตุนี้จึงจําเปนตองจัดวางขอความเนื้อหาตางๆ บนหนาเว็บเพจใหเหมาะสมสวยงาม เพื่อเปนสิ่งดึงดูดใหมีผูเขาชมเว็บไซตของเรามากๆ เร่ิมใสขอความในเว็บเพจ

วางเคอรเซอรในตําแหนงที่ตองการพิมพขอความ แลวพิมพขอความที่ตองการ เพียงเทานี้ก็จะไดขอความที่ตองการแลว แตถาตองการตกแตงสวนตางๆ เพิ่มเติม เชน ใสสีพ้ืนหลังหรือกําหนดระยะหางจากขอบก็สามารถทําไดเชนกัน


2

1

3 4

การเลือกรูปแบบตัวอักษร (Font) ในการเลือกรูปแบบตัวอักษรที่ไมมีมาตรฐานนั้น อาจจะเกิดปญหาไดในกรณีที่มีผูเขาชมเว็บไซตแลวอานยาก ไมสวย หรือเปนภาษาที่อานไมออก ดังนั้นจึงควรใชรูปแบบตัวอักษรที่เปนมาตรฐาน เชน MS Sans Serif เนื่องจากสามารถแสดงผลบนเบราเซอรทุกชนิด โดยการเลือกรูปแบบตัวอักษร (Font) มีขั้นตอนดังนี้

Properties Inspector ของขอความ

คลิกเลือก Edit Font List

คลิกในชอง Font บริเวณดานลางในหนาตาง Properties

คลิกเลือกรูปแบบตัวอักษร MS Sans Serif

คลิกที่ปุม สําหรับเพิ่มรูปแบบตัวอักษรอีก

ขนาดตัวอักษร สีตัวอักษร สรางหัวขอ ตัวหนา ตัวเอียง

จัดตําแหนงยอหนาขอความ

จัดเรียงหัวขอและลิสตบุค


1

2

3

4

การนําขอมูลจากไฟลอ่ืนมาใช ความสามารถพิเศษอีกอยางของ Dreamweaver 8 ก็คือ นําขอมูลตางๆ ที่อยูในไฟลประเภทอื่น เชน Word, Excel, Powerpoint เปนตน มาวางบนพื้นที่สรางงานซึ่งจะชวยเพิ่มความสะดวกและประหยัดเวลาในการทํางานเปนอยางมาก โดยมีขั้นตอนดังนี้

เลือกขอมูลจากหนาเอกสาร Word

คลิกเมาสขวาเลือกคําสั่ง คัดลอก

กลับมาทํางานในหนาเว็บเพจของโปรแกรม Dreamweaver 8 จากนั้นคลิกเมนู Edit > Paste

ปรากฏไฟลจากหนาเอกสาร Word มาใชในเว็บเพจของ Dreaweaver 8 แลว


บทที่ 4 การใสรูปภาพบนเว็บเพจ

ภายในเว็บเพจของเรานอกจากจะมีเนื้อหาที่มีประโยชนแกผูเขาชมแลว หากมีการเพิ่มรูปภาพกราฟกตางๆ ก็จะชวยใหเว็บเพจมีสีสันสวยงามนาสนใจมากยิ่งขึ้น ดังนั้นเราจะเห็นไดวาเว็บไซตจํานวนมากจึงนิยมนํารูปภาพมาใชตกแตงและอธิบายเนื้อหาเพื่อใหผูเขามาเยี่ยมชมเว็บไซตไดเห็นภาพและเขาใจเนื้อหามากขึ้น ขอพิจารณาในการเลือกใชรูปภาพ ในการนําภาพมาประกอบขอความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นํามาใชใหเหมาะสม โดยมีขอพิจารณาดังนี้

1. ไมควรเนนรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีขอความและรูปภาพที่สมดุลกัน 2. การใชรูปภาพที่เปนไฟลขนาดใหญจะทําใหการโหลดเว็บเพจใชเวลานานกวาจะแสดงภาพ ดังนั้น

จึงควรใชภาพที่มีพอเหมาะกับสิ่งที่เราตองการสื่อกับผูชม หรืออาจใชโปรแกรมทางกราฟก เชน Photoshop หรือ ACDSee ทําการลดขนาดภาพ (Resize) กอนนํามาลงบนเว็บเพจก็ได

3. ปจจุบันการนํารูปภาพลงเว็บเพจควรคํานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นดวย แตบางเว็บไซตก็มีการแจกรูปภาพใหฟรี ซึ่งสามารถนํามาใชประโยชนโดยไมตองเสียคาลิขสิทธิ ์

4. ควรเลือกใชภาพที่มีโทนเดียวกับสวนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไมแตกตางกัน

ชนิดของรปูภาพที่ใชในเว็บเพจ ชนิดของรูปภาพที่ใชในเว็บเพจมีอยู 3 ชนิดดวยกัน ซึ่งแตละชนิดมีรายละเอียดและลักษณะที่แตกตางกันดังนี้

GIF (Graphic Interchange Format) GIF นับเปนไฟลภาพที่สามารถแสดงผลกับเบราเซอรไดทุกชนิด จึงไดรับความนิยม โดยสวนมากมักจะใชรูปภาพไฟล .gif กําหนดฉากหลังหรือพ้ืนที่โปรงใส การใชทําภาพเคลื่อนไหว (Animation) ภาพโลโก ตัวการตูน ภาพตัวอักษรลายเสนตางๆ

JPG (Joint Photographic Expert Group) JPG เปนไฟลภาพที่แสดงสีไดถึง 16.7 ลานสี เหมาะสําหรับภาพที่ใชสีจํานวนมาก ภาพที่มีการไลระดับสีอยางตอเนื่องหรือภาพถายทั่วไป

PNG (Portable Network Graphic) PNG เปนไฟลภาพที่ไมไดรับความนิยมมากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเปนรูปแบบใหม จึงไมสามารถแสดงผลไดทุกเบราเซอร


4 5

6 7

8

9

การใสรูปภาพลงบนเว็บ ในการใสรูปภาพลงบนเว็บเพจ มีขั้นตอนดังนี้

วางเคอรเซอรตรงตําแหนงที่ตองการใสรูปภาพ 1

ในแท็บ Common คลิกที่ปุม เลือก Image 2

ในชอง Look in ใหเลือกโฟลเดอรที่เก็บไฟลภาพ 3

เลือกรูปภาพที่ตองการ คลิกปุม OK

ปรากฏหนาตางแสดงขอความวา ภาพนี้อยูนอกเว็บไซตใหกอบปเขามาในเว็บไซต จากนั้นคลิกปุม Yes

เลือกโฟลเดอรที่ใชเก็บภาพ

คลิกที่ปุม Save

ปรากฏรูปภาพที่ตองการบนเว็บเพจ


1

2

การจัดการเกี่ยวกับรูปภาพ เมื่อเรานํารูปภาพมาวางไวในเว็บเพจแลว หากเราตองการจัดเกี่ยวกับรูปภาพในลักษณะตางๆ เชน การปรับขนาด การจัดวางรูป การใสขอความอธิบายรูปภาพ การใสกรอบใหรูปภาพ การกําหนดระยะหางระหวางรูปภาพ เปนตน เราสามารถจัดการเกี่ยวกับรูปภาพไดโดยใช การจัดวางรปูภาพประกอบขอความ เราสามารถจัดวางรูปภาพประกอบขอความบนหนาเว็บเพจใหมีความสวยงาม เปนที่นาดูของผูเขามาเยี่ยมชมเว็บไซต โดยมีขั้นตอนดังนี้

การจัดวางรูป

ใสขอความอธิบายรูปภาพ

ใสกรอบใหรูปภาพ กําหนดระยะหางของรูป

ปรับขนาดของรูปภาพ

ปรับแสงและความคมชัด

คลิกเลือกรูปภาพที่ตองการ

คลิกเลือกรูปแบบการจัดวางรูปภาพในหนาตาง Properties ของ Align โดยในที่นี้เลือก Left เพื่อจัดวางรูปภาพไวดานซายมือ


3

ในการจัดวางรูปภาพประกอบขอความมีรายละเอียดดังนี้

• Default เปนการจัดเรียงแบบปกติ • Baseline เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับบรรทัดของขอความ

• Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความ • Middle เปนการจัดใหตรงกลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความ

• Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความคลายการจัดแบบ Baseline

• Text Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกับบรรทัดของขอความคลายการจัดแบบ Top

• Absolote Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับสวนกลางของบรรทัดขอความ

• Left เปนการจัดใหรูปภาพอยูทางซายมือของบรรทัดขอความ • Right เปนการจัดใหรูปภาพอยูทางขวามือของบรรทัดขอความ

การใสรูปภาพเปนฉากหลัง การใสรูปภาพเปนฉากหลัง (Background) ถือวาเปนการเพิ่มความสวยงามและนาสนใจใหกับเว็บเพจ ซึ่งภาพที่นาจะนํามาเปนฉากหลังตองไมมีลวดลายหรือสีสันมากเกินไป เพื่อไมใหผูชมเว็บไซตสับสน หรือสีของพื้นหลังอาจตัดกับสีของขอความทําใหลําบากในการอานได ดังนั้นภาพที่นํามาเปนฉากหลังตองเปนสีที่กลมกลืนกับขอความหรือรูปภาพที่วางไวในเว็บเพจ ซึ่งการใสรูปภาพเปนฉากหลังมีขั้นตอนดังนี้

ปรากฏการจัดวางรูปที่ตองการ


1

2

3 4

5

6

7

คลิกที่ปุม Page Properties... หรือกดปุม <Ctrl+J> เพื่อเปดหนาตาง Page Properties

คลิกที่หัวขอ Apperance

คลิกที่ปุม Browse... เลือกไฟลรูปภาพที่ตองการนํามาเปนฉากหลัง

คลิกที่ปุม OK

คลิกที่ปุม OK ที่หนาตาง Page Properties อีกครั้ง

ปรากฏภาพที่นํามาเปนฉากหลังเรียบรอยแลว


บทที่ 5 การจัดหนาเว็บเพจดวยตาราง

เว็บเพจสวนมากมักนิยมใชตารางในการจัดวางองคประกอบ ซึ่งสวนมากจะเกี่ยวกับการนําเสนอขอมูลที่เปนรายชื่อหรือรายการตางๆ และที่สําคัญคือใชตารางสําหรับจัดเลยเอาตหนาเอกสาร เพื่อชวยในการแสดงขอมูลและองคประกอบตรงตามตําแหนงที่ตองการ โครงสรางของตาราง กอนที่จะลงมือสรางตารางควรมาทําความรูจักโครงสรางของตารางซึ่งจะชวยทํางานไดงายขึ้น โดยมีรายละเอียดดังนี้

• คอลัมน (Column) ชองในแนวตั้ง • แถว (Row) ชองในแนวนอน • เซลล (Cell) ชองแตละชองที่อยูในตาราง • Cell Spacing เปนชองวางระหวางเซลลแตละเซลล • Cell Padding เปนระยะหางของขอความหรือรูปภาพจากขอบทุกดานของเซลล • สีพ้ืนเซลล • ขอบตาราง • ขอบเซลล • ความกวางทั้งหมดของตาราง • ความกวางจริงในคอลัมน • ความกวางของคอลัมนที่กําหนด • คอลัมนที่ไมกําหนดความกวาง

Row

Cell Column ขอบตาราง

Cell Padding สีพ้ืนเซลล

ขอบเซลล

ความกวางทั้งหมดของตาราง คอลัมนที่ไมกําหนดความกวาง ความกวางจริงในคอลัมน


1

2

3

4

วิธีการสรางตาราง ในโปรแกรม Dreamweaver มีเครื่องในการสรางตารางมากมาย เชน เครื่องมือในการสรางเสนขอบของตาราง กําหนดสีพ้ืนตารางและเซลล การจัดขอมูลตางๆ ภายในเซลล เปนตน โดยวีธีการสรางตารางมีขั้นตอนดังนี้

คลิกแท็บ Common ที่แถบ Insert Bar

คลิกที่ปุม Insert Table เพื่อสรางตาราง

ปรากฎหนาตาง Table จากนั้นในชอง Rows ใหกําหนดจํานวนแถว ของตาราง โดยในที่นี้กําหนดเปน 3

ในชอง Column ใหกําหนดจํานวนคอลัมนของตาราง โดยในที่นี้กําหนดเปน 3


การกําหนดคณุบัติของตาราง ในหนาตาง Properties จะแสดงคณุสมบัติของตาราง ซ่ึงมีรายละเอียดในการปรบัแตงดังนี ้

• Table Id แสดงชื่อตาราง • Rows แสดงจํานวนแถว • Cols แสดงจํานวนคอลัมน • W ความกวาง • H ความสูง • CellPad แสดงระยะหางระหวางขอบเซลลและเนื้อหาภายในเซลล • CellSpace แสดงระยะหางระหวางเซลลแตละเซลล • Align กําหนดตําแหนงตาราง • Border กําหนดความหนาของเสนตาราง • Bg Color กําหนดสีพ้ืนตาราง • Brdr กําหนดสีขอบตาราง • Bg Image กําหนดฉากหลังตาราง • Clear Column Widths ยกเลิกคาความกวางในทุกคอลัมน

• Convert Table Widths to Pixels เปลี่ยนหนวยวัดความกวางใหเปนพิกเซล

• Convert Table Widths to Percent เปลี่ยนหนวยวัดความกวางใหเปนเปอรเซ็นต • Clear Row Heights ยกเลิกคาความสูงในแถว • Convert Table Heights to Pixels เปลี่ยนหนวยวัดความสูงใหเปนพิกเซล

• Convert Table Heights to Percent เปลี่ยนหนวยวัดความสูงใหเปนเปอรเซ็นต


บทที่ 6 การสรางไฮเปอรลิงกเช่ือโยงระหวางเว็บ

ไฮเปอรลิงก (Hyperlink) หรือที่เรียกวา “ลิงก” เปนการเช่ือมโยงเว็บไซตบนอินเตอรเน็ต จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเช่ือมตอเขาสูอีเมลลของ Webmaster เพื่อติดตอสื่อสารกัน การเช่ือมโยงในลักษณะนี้นับวามีประโยชนอยางมาก เนื่องจากทําใหผูเขาชม สามารถเขาถึงขอมูลและเนื้อหาทุกหนาเว็บเพจภายในเว็บไซตของเราได

สวนประกอบของไฮเปอรลิงก ในการทํางานของไฮเปอรลิงกมีสวนประกอบดังนี้

1. ตนทาง (Source Anchor) หมายถึง สวนประกอบบนเว็บที่เปนจะลิงก ซึ่งเมื่อเลื่อเมาสไปชี้พอยเตอรจะเปลี่ยนเปนรูปมือ และเมื่อคลิกเลือกหนาเว็บหรือขอมูลปลายทางจะปรากฏขึ้นมา ซึ่งอาจเปนขอความหรือรูปภาพก็ได

2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาขอมูลตางๆ ไมวาจะเปนขอความหรือรูปภาพ ซึ่งถูกเรียกใหปรากฏขึ้นมาเมื่อมีผูชมคลิกที่ลิงกตนทาง ซึ่งลิงกปลายทางแบงไดเปนหลายรูปแบบ ดังนี้

ตําแหนงเฉพาะบนเว็บเพจ คือการสั่งใหเบราเซอรเปดเว็บเพจพรอมทั้งเลื่อนไปยังตําแหนงที่ระบุไวโดยทันที

เว็บเพจหรือเว็บไซต โดยสวนมากลิงกบนเว็บเพจจะใชสําหรับเปดไปยังหนาเว็บเพจอื่นภายในเว็บไซตเดียวกัน หรือเปดไปยังหนาเว็บไซตอื่น

ไฟลเอกสารอื่นๆ สามารถลิ งก ไปยั ง เนื้ อหาหรือขอมูลต างๆ บนอินเตอรเน็ตได หากรูตําแหนงที่อยู โดยวิธีการทํางานของเบราเซอร จะขึ้นอยูกับประเภทของไฟลเหลานั้น

คําสั่งสงอีเมลล คื อก ารสั่ ง ให เ ป ด โปรแกรมอี เ มลลบน เครื่ อ งคอมพิวเตอรของผูชม เพื่อเตรียมเขียนขอความสง อีเมลล

การรันโปรกแกรมจาวาสคริปต สําหรับใชในการโตตอบบนเว็บเพจ การปดวินโดวเบราเซอร การเปดลิงก็เปนวินโดวใหม แบบปอบอัพ


รูปแบบลิงกตางๆ บนอินเตอรเน็ต ลิงกนับวาเปนสวนสําคัญของหนาเว็บเพจ โดยในปจจุบันไดมีลิงกในรูปแบบตางๆ มากมาย ซึ่งสามารถแบงไดดังนี้ ลิงกขอความ หมายถึง ลิงกที่ใชขอความเปนจุดเชื่อมโยงไปยังตําแหนงปลายทาง ซึ่งปกติจะใชสีใหแตกตางจากขอความปกติหรือมีการขีดเสนใตขอความนั้นๆ

ตัวอยางลิงกขอความ (www.mwk.ac.th/maechancop) ลิงกรูปภาพ หมายถึง ลิงกที่ใชรูปภาพเปนจุดเชื่อมโยง โดยเมื่อนําเมาสไปวางบนรูปภาพเคอรเซอรของเมาสจะเปลี่ยนเปนรูปมือ

ตัวอยางลิงกรูปภาพ (www.sawasdeeit.com)


ลิงกภาพเคล่ือนไหว ในปจจุบันนี้ลิงกภาพเคลื่อนนิยมนํามาใชตกแตงหนาเว็บเพจ เนื่องจากมีความสวยงามและมีลูกเลนตางๆ ที่ทําใหผูเขาชมเว็บไซตสนุกและตื่นตา โดยการลิงกแบบภาพเคลื่อนไหวจะใชรูปภาพเปนจุดเชื่อมโยงเชนเดียวกัน แตเมื่อนําเมาสไปวางไวบนรูปจะมีลูกเลนตางๆ เชน การเปลี่ยนรูป ขนาดสี ปรากฏขึ้นมา ภาพกอนนําเคอรเซอรไปวาง

ภาพหลังนําเคอรเซอรไปวาง

ลิงกแบบ Flash การสรางลิงกดวยโปรแกรม Macromedia Flash หรอืโปรแกรม SWISH จะมีลูกเลนความสวยงามและสามารถโตตอบกับผูเขาชมไดดวย โดยการลิงกแบบ Flash เพื่อประกอบในเว็บเพจมักเปนที่นิยมในปจจุบัน

ตัวอยางลิงกแบบ Flash (www.kapook.com)


1

2

3

4

เราสามารถตรวจสอบลิงกที่สรางจากโปรแกรม Macromedia Flash โดยคลิกขวาที่ลิงก ถามีคําสั่ง About Macromedia Flash Player แสดงวาเปนลิงกแบบ Flash

คลิกทดสอบลิงกแบบ Flash การสรางลิงกขอความ ในการลิงกขอความนั้นสามารถทําได 2 วิธี คือ วิธีท่ี 1 การลิงกขอความไปยังหนาเว็บเพจอื่นในเว็บไซตเดียวกัน มีขั้นตอนดังนี้

เลือกขอความที่ตองการ สรางจุดลิงก

คลิกที่ปุม

ปรากฎหนาตาง Select File จากนั้นคลิกเลือกเว็บเพจปลายทางที่ตองการลิงก



2

1

3

4

จากนั้นใหบันทึกเว็บเพจแลวกดปุม F12 เพื่อเรียกดูผานเบราเซอร ทดสอบโดยการคลิกที่ลิงก จากนั้นก็จะเชื่อมโยงไปยังหนาเว็บเพจที่กําหนด

คลิกที่ลิงก

ปรากฏหนาเว็บเพจที่ตองการ วิธีท่ี 2 การลิงกขอความไปยังสวนตางๆ ในหนาเว็บเพจเดียวกัน มีขั้นตอนดังนี้

คลิกเมนู Insert > Named Anchor

วางเคอรเซอรหนาขอความที่ตองการลิงกไปหา

ปรากฎหนาตาง Named Anchor จากนั้น พิมพช่ือลิงก โดยในที่นี้พิมพคําวา When



5

6

7

8

ปรากฎไอคอน

เลือกขอความที่ใชเปนจุดลิงก

พิมพ # ตามดวยช่ือจุดลิงก โดยในที่นี้พิมพคําวา When

เมื่อบันทึกและคลิกลิงกที่สรางขึ้น บนหนาเว็บเบราเซอรจะปรากฎการลิงกไปยังสวนที่ตองการ

ปรากฏสวนที่ลิงก


1

2

4

3

การสรางลิงกดวยรูปภาพ การสรางลิงกดวยรูปภาพนับเปนการเพิ่มความนาสนใจกับลิงกในหนาเว็บเพจ โดยมีขั้นตอนดังนี้

บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร << ทดสอบกับเบราเซอร

หนาเว็บเพจที่ปรากฏขึ้นมา >>

คลิกเลือกรูปที่ตองการ สรางลิงก

คลิก ในหนาตาง Properties เพื่อ เลือกหนาเว็บเพจที่ตองการลิงกไปหา


ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง


1

2

3

4

การลิงกกลับไปหนาโฮมเพจ หากตองการสรางลิงกรูปภาพกลับไปหนาโฮมเพจ (หนาแรกของเว็บไซต) มีขั้นตอนดังนี้

บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร

คลิกเลือกรูปที่ตองการ สรางลิงก

คลิก ในหนาตาง Properties เพื่อเลือกหนา เว็บเพจที่ตองการลิงกไปหา

ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง


<< ทดสอบกับเบราเซอร

หนาเว็บเพจที่ปรากฎขึ้นมา >>


1

2

การลิงกไปยังเว็บไซตอ่ืน เปนการสรางลิงกไปยังเว็บไซตหรือแหลงขอมูลภายนอกเว็บไซตของเรา ซึ่งมีขั้นตอนดังนี้


ทดสอบกับเบราเซอร >>

<< หนาเว็บเพจที่ปรากฎขึ้นมา

ลากเมาสเลือกขอความหรือรูปภาพสําหรับกําหนดใหเปนจุดลิงก

พิมพช่ือเว็บเพจปลายทางในชอง Link ใหใส http:// จากนั้นตามดวยช่ือเว็บไซตที่ตองการลิงก ในตัวอยางพิมพ http://www.mwk.ac.th/maechancop


1

2

3

4

บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ

เมื่อไดเรียนรูถึงองคประกอบพื้นฐานในการสรางเว็บเพจ เชน การใสขความ รูปภาพ การใชตาราง การสรางลิงก เรียบรอยแลว หากตองการเพิ่มลูกเลนบนหนาเว็บเพจเพื่อดึงดูดความสนใจของผูเขาชม ก็สามารถทําไดมากมาย ไมวาจะเปนการใชภาพเคลื่อนไหว การคนหาขอมูล การสรางเมนู Pop Up เปนตน ซึ่งเราจะมาศึกษากันในบทนี้

การสรางชองคนหาขอมูลในเว็บเพจ การใส Search Engine หรือเครื่องมือสําหรับการคนหาขอมูลตางๆ นับเปนสิ่งที่สําคัญขาดไมไดโดยการสรางชองคนหาขอมูลในเว็บเพจมีขั้นตอนดังนี้

กําหนดคาในชอง Properties ซึ่งมีรายละเอียดดังนี้

วางเคอรเซอรบริเวณ ที่ตองการสรางชองคนหาขอมูล

คลิกปุม Form บนแท็บ Forms

ในชอง Action ใหพิมพ http://www.google.co.th/search เพื่อสราง Search engine ของ Google

ในชอง Method ใหเลือกคา


6

7

8

9

10

คลิกปุม Text Field เพื่อใสฟลดรับขอมูล

วางในบริเวณเดิมที่เราจะสรางฟลดรับขอมูล

ใสช่ือของ Field ที่ตองการ


Text Field ที่ได


11

12

13


คลิกปุม Button แบบ Submit เพื่อสรางปุมสงขอมูลจากฟอรมไปยัง Google

พิมพช่ือปุมลงไปในชอง Value

ทดสอบกับเบราเซอรพิมพขอมูลที่ตองการคนหาแลวคลิกที่ปุม Search


1

2

เพิ่มเติมลูกเลนดวย Behavior ในโปรแกรม Dreamwever สามารถสรางการโตตอบระหวางองคประกอบตางๆ บนเว็บเพจกับผูเยี่ยมชมเว็บไซต เชน เมื่อนําเมาสไปวางบนลิงกจะมีกรอบเมนูยอยปรากฏใหเลือกหรือแสดงขอความอธิบาย เปนตน โดยเราเรียกคุณสมบัติที่ใชสรางนี้วา Behaviors

ความหมายของ Behaviors Behavior คอื การนํา JavaScript สําเร็จรูปที่โปรแกรม Dreamweaver สรางไวใหมาใช Behaviors ประกอบดวย 2 สวนดวยกันคือ

1. Event หมายถึง การกําหนดเหตุการณหรือลูกเลนตางๆ ที่สรางไวใหเกิดขึ้นเมื่อไร เชน เมื่อผูเยี่ยมชม นําเมาสไปวางหรือคลิก

2. Action หมายถึง การตอบสนองของเหตุการณที่เราตองการใหเกิดขึ้น ซึ่งเปนผลมาจากชุดคําสั่งภาษา JavaScript ที่เขียนขึ้นเพื่อแสดงการทํางานตางๆ เชน การแสดงภาพ การแสดงกลองขอความ การเปดหนาตางเบราเซอรใหม เปนตน

การเปดพาเนล Behavior

กอนการสราง Behavior ใหเราเปดพาเนล Behavors ขึ้นมากอน ซึ่งมีขั้นตอนดังนี้ การนํา Behavior มาใชงาน ขอแนะนําการใชงาน Behavior เปนหัวขอตางๆ ดังนี้ การสรางกลองขอความ (Popup Message) เปนการแสดงกลองขอความแจงคําเตือนตางๆ ใหผูเยี่ยมชม ซึ่งมีขั้นตอนการสรางดังนี้

คลิกเมนู Windows > Behaviors หรือกดปุม <Shift+F4>

ปรกฎพาเนล Behaviors ซึ่งจะชวยในการกําหนด Event และ Action


1

2

3 4

5

6

คลิกเลือกรูปภาพ

คลิกที่ปุม Add Behavior

เลือก Popup Message

พิมพขอความที่ตองการใหแสดงบนรูปภาพ คลิกปุม OK

จากนั้นที่พาเนล Behavior จะปรากฏ Action เปน Popup Message และ Event เปน onClick

บันทึกเว็บเพจแลวทดสอบเบราเซอร จากนั้นคลิกที่รูปภาพจะปรากฏกลองขอความที่กําหนด


2 3

1

4

5

6

7

8

การใสเสียงเพลงลงในเว็บไซต การใสเสียงเพลงนับเปนอีกวิธีหนึ่งที่ชวยเพิ่มความนาสนใจใหกับเว็บไซตของเรา ยกตัวอยางเชน ใหเปดเสียงเพลงเมื่อผูเยี่ยมชมคลิกเมาสบนปุมหรือเมื่อเปดหนาเว็บเพจ สําหรับการใสเสียงเพลงลงในเว็บไซต มีขั้นตอนดังนี้

คลิกปุม Media : Flash เลือก Plugin

วางเคอรเซอรบริเวณที่ตองการ สรางหนาจอควบคุมเสียง

ปรากฎหนาตาง Select File ในชอง Look in คลิกเลือกโฟลเดอรที่เก็บไฟลเพลง

คลิกเลือกไฟลเพลงที่ตองการใสลงในเว็บเพจ

คลิกที่ปุม OK

คลิกที่ปุม Yes เพื่อ Copy ไฟลเพลงไวภายในเว็บของเรา

คลิกที่ปุม Save เพื่อบันทึกไฟลเพลง


9

10


แถบควบคุมการแสดงเสียง

ปรากฎไอคอน บริเวณที่เราวางเคอรเซอรไว

ปรับขนาดของไอคอนในหนาตาง Properties ตามตองการ


1

2

3 4

5 6

การสรางหนาตาง Pop Up หนาตาง Pop Up มีลักษณะเปนหนาตางแสดงรูปภาพและขอความโฆษณาหรือบงบอกเงื่อนไขใน

การเยี่ยมชมเว็บไซต ซึ่งเปนเทคนิคในการดึงดูดความสนใจ โดยมีขั้นตอนในการสรางหนาตาง Pop Up ดังนี้

เตรียมหนาตาง Pop Up ที่จะใหปรากฏบนหนาเว็บเพจเมื่อเปดเขาชม

คลิกเลือกไฟลเดอรเก็บไฟล ในชอง Save in

ในชอง File name ใหต้ังช่ือไฟล โดยในที่นี้พิมพคําวา popup คลิกปุม Save

เปดเว็บเพจตนทางที่จะใหแสดงหนาตาง Pop up และคลิกแท็ก <Body>

คลิกเลือกที่ปุม เลือก Open Browse Window


7

8

9

10

11

12

13

บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร ซึ่งเว็บเพจจะปรากฏหนาตาง Pop up ขึ้นมาทันที

ปรากฎหนาตาง Open Browser Window จากนั้นที่ปุม Browse เพื่อเลือกไฟลหนาตาง Pop up

เลือกไฟลหนาตาง popup


ในชอง Window width กําหนดความกวางของหนาตาง Pop up

ในชอง Window height กําหนดความสูงของหนาตาง Pop up

ในชอง Window name พิมพช่ือหนาตาง Pop up



เว็บไซตท่ีใหบริการพื้นท่ีฟรี (ในประเทศ) 1. http://www.thai.net 2. http://www.siamwebhost.com 3. http://www.vhostweb.com 4. http://member.se-ed.net 5. http://thailand.hosify.com

เว็บไซตท่ีใหบริการพื้นท่ีฟรี (ตางประเทศ)

1. http://www.clickheretree.com 2. http://www.free-webhosts.com 3. http://www.thefreesite.com 4. http://www.free-web-space.com 5. http://www.freewebspace.com 6. http://www.onlineexpress.net 7. http://www.topcities.com 8. http://www.simplecities.com 9. http://geocities.yahoo.com 10. http://www.fortunecity.com 11. http://www.50megs.com 12. http://www.doteasy.com 13. http://www.freewebspace.net 14. http://www.free-webhosts.com 15. http://www.brinkster.com


เอกสารอางอิง ภุชชงค เกวียกกุทัณฑ และอนรรฆณง คุณมณ.ี ออกแบบเว็บไซตฉบับกาวหนาสูเซียน

Dreamweaver 8.บริษัท เสริมวิทย อินฟอรเมชัน่ เทคโนโลยี จํากัด. กรุงเทพมหานคร,2549.

livedocs_dreamweaver. http://livedocs.macromedia.com/go/ livedocs_dreamweaver : ออนไลน . เขาถึงเมื่อวันที่ 26 มิถุนายน 2549 เวลา 13.00 น.

Documents

Dream weaver8