Swap image ใน Dreamweaver

เริ่มต้น swap image

1.ไปที่ Window > Behaviors จะมีหน้าต่างขึ้นมาดังรูป

หน้าต่างนี้ใช้สำหรับควบคุมการทำงานของ JavaScript ทั้งหมด

2.คลิกปุ่ม  ไปที่ Show Event for > IE (6.0) ขั้นตอนนี้ทำเพื่อแสดงเฉพาะคำสั่งที่ใช้IE 6.0 เท่านั้น

3.วางตำแหน่งของรูปตามต้องการ

4.กำหนดชื่อให้กับรูป โดยรูปขนาดเล็กจะให้ชื่อว่า a,b,c,d,e ส่วนรูปใหญ่ให้ชื่อว่า big

5.เลือกรูป a จากนั้นคลิกที่ปุ่ม  เลือก Swap image จะมีหน้าต่างดังรูป

มีรายละเอียดดังนี้

>> image ให้เลือกตำแหน่งรูปที่ต้องการให้มีรูป a ขนาดใหญ่มาแทน ดังรูปให้แทนในตำแหน่งของ big

>> set source to เลือกรูปที่ต้องการให้มาแทน ในตัวอย่างจะเลือกรูปขนาดใหญ่ของ a

>> preload image ไม่ควรเลือกช่องนี้ เพราะจะทำให้โหลดภาพขยายของ a ด้วย ทำให้เว็บเพจโหลดได้

ช้าลง ถ้าไม่เลือกภาพขยาย จะถูกโหลดเมื่อเมาส์อยู่เหนือภาพ a

>> restore images onmouseout แสดงรูปปรกติเมื่อเคลื่อนเมาส์ออกรูป a ทำแบบนี้ทุกรูปที่จะแสดง

6.ในช่อง Behaviors จะสังเกตุว่าเป็นดังรูป

7.เราสามารถเลือกได้ว่าจะให้แสดงรูปเมื่อมีกิจกรรมอะไร ดังตัวอย่างให้แสดงรูปเมื่อมีเมาส์อยู่เหนือรูป

onmouseover หรือจะให้แสดงรูปเมื่อคลิก onmousedown

การจัดการกับ Hyperlink ข้าม Frame

ขั้นตอนการสร้างลิงค์เพื่อแสดงผลใน frame

1.ไปที่ window > frame หรือกด Shift + F2 จะทำให้ที่ panel ทางขวามือมีหน้าต่างของ frame ขึ้นมา

2.เมื่อคลิกที่ left frame เครื่องมือ Property inspector จะเปลี่ยนไปดังรูปด้านล่าง

ในช่อง framename ให้ใส่ชื่อ frame ลงไปดังในตัวอย่างจะใส่ชื่อ frame ดังนี้

>> ช่อง topframe ใส่ให้กับ frame บนสุด

>> ช่อง leftframe ใส่ให้กับ frame ด้านซ้ายมือ

>> ช่อง mainframe ใส่ให้กับ frame ด้านขวามือ

3.เปิดไฟล์ left.html ขี้นมา ดังรูป

4.จากนั้นคลิกรูปที่ต้องการสร้างให้เป็นลิงค์ Property inspector จะเปลี่ยนไปดังรูป

>> ช่อง link ให้ใส่ชื่อไฟล์ที่ต้องการเปิด ดังตัวอย่างเป็น pic1.html

>> ช่อง target ให้ใส่ชื่อ frame ที่ต้องการให้แสดงผล ดังตัวอย่างเป็น mainframe

รู้จักโปรแกรม Flash การใช้งานร่วมกับ Dreamweaver

Flash เป็นโปรแกรมที่ใช้ในการสร้างอนิเมชั่นต่างๆ หรือใช้เปิดไฟล์วิดีโอ เปิดเพลง ผ่านเว็บไซต์

แม้แต่กระทั่งทำอัลบัมภาพผ่านเว็บไซต์ ในปัจจุบันโปรแกรม Flash นั้นได้รับความนิยมในการทำเว็บไซต์

กระทั้งมีบางเว็บไซต์ที่สร้างเว็บด้วย Flash

การใช้ Flash นั้นก็มีข้อเสียอยู่เหมือนกัน คือ

1.ถ้าใช้ทำอนิเมชั่น ไฟล์จะมีขนาดใหญ่ ทำให้การแสดงหน้าเว็บเพจทำได้ช้าลง

2.Search engine ต่างๆไม่สามารถอ่านข้อความที่อยู่ในไฟล์ Flash ได้

3.ถ้าผู้ใช้ไม่มี Flash player จะทำให้ไฟล์ Flash นั้นไม่แสดงผล ดังนั้นควรใช้งาน Flash ให้เหมาะสม

ข้อดีของ Flash มีอยู่มากมาย คือ

1.ทำให้เว็บไซต์เราดูน่าสนใจมากขึ้น

2.สามารถเปิดไฟล์วิดิโอ หรือไฟล์เสียง ผ่านเว็บไซต์ได้

3.ปัจจุบัน Flash นั้นมีความสามารถสร้างโปรแกรม หรือเกมดีๆ ได้ ถ้านำมาประยุกต์ใช้ให้ถูกต้อง

ไฟล์ Flash นั้นจะมี 2 แบบ คือ

1.swf เป็นไฟล์ที่เราสามารถใส่ได้ทุกที่ในเว็บเพจ

2.flv เป็นไฟล์ Flash video

การใช้งาน flash ร่วมกับ dreamweaver

เมื่อเราแทรกไฟล์ flash หรือ ไฟล์มัลติมีเดียต่างๆ ลงใน dreamweaver โปรแกรมจะทำการ

เขียน JavaScript ขึ้นมาโดยอัตโนมัติ ชื่อว่า AC_RunActiveContent.js ไฟล์นี้จะอยุ่ใน folder

ชื่อว่า scripts การใช้งานจริง หรือการอัพโหลดข้อมูลสู่ webserver นั้นห้ามลืมที่จะอัพโหลดไฟล์

นี้เด็ดขาด มิฉนั้นไฟล์ Flash หรือไฟล์มัลติมีเดียต่างอาจไม่แสดงผลได้

Spry Menu Bar

การใช้งาน Spry Menu Bar

1.เปิดเว็บที่ต้องการแทรก navigation ขึ้นมา จากนั้นทำการ save ให้เรียบร้อย

2.คลิกตำแหน่งที่ต้องการวาง navigation จากนั้นคลิกที่ spry menu bar ดังรูป

3.เมื่อคลิกแล้วจะมีหน้าต่างขึ้นมาดังรูป หน้าต่างนี้สำหรับเลือกว่าต้องการให้ navigation ของเราวาง

ในแนวนอน (horizontal) หรือแนวตั้ง (vertical)

4.เมื่อคลิก ok ที่เอกสารของเราจะเป็นดังรูป ดังตัวอย่างเลือก navigation แบบ horizontal

5.เมื่อคลิกที่แถบสีฟ้าที่เขียนว่า spry menu bar : menubar1 สังเกตุ Property inspector จะเป็นดังรูป

มีรายละเอียดดังนี้

5.1.ช่องซ้ายบน ใส่ชื่ออ้างอิงของ navigation

5.2.Turn style off สำหรับปิดการแสดงผล CSS ทำให้เราสามารถเห็น navigation ในรูปแบบของ list

5.3.ช่องสี่เหลี่ยมขนาดใหญ่ 3 ช่อง

>> ช่องที่ 1 สำหรับกำหนดชื่อเมนูหลักของ navigation

>> ช่องที่ 2 สำหรับกำหนดเมนูย่อยของ ช่องที่ 1

>> ช่องที่ 3 สำหรับกำหนดเมนูย่อยของ ช่องที่ 2

5.4.Text เป็นคำที่ใช้แสดงผลใน navigation

5.5.Link เป็นใช้กำหนดลิงค์สำหรับ navigation

5.6.Title เป็นคำบรรยายลิงค์ เมื่อวางเมาส์เหนือ navigation จะมีคำบรรยายนี้ขึ้นมา

5.7.Target กำหนดรูปแบบของลิงค์ เช่น _blank เปิดหน้าใหม่ เราสามารถเพิ่ม หรือลบรายการของเมนูได้

โดยคลิกที่เครื่องหมาย + และ – ในช่องที่เราต้องการแก้ไข

6.เราสามารถกำหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือจะมี

รายการแสดงดังรูป การใช้งาน CSS สามารถอ่านได้โดย คลิกที่นี่

7.เมื่อแสดงผลใน Browser จะเห็นดังรูป

สำหรับ navigation แบบ vertical ก็ทำงานแบบเดียวกัน

การแทรกไฟล์ Flash

การแทรกไฟล์ Flash ลงในเว็บเพจ

ขั้นตอนที่ 1 เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว

ขั้นตอนที่ 2 ไปที่ Common และเลือกเครื่องมือดังรูป หรือไปที่ Insert > Media > Flash

ขั้นตอนที่ 3 เมื่อคลิกที่ flash แล้วจะมีหน้าต่างดังรูป เลือกไฟล์ Flash ที่ต้องการแทรก จากนั้นคลิก OK

ขั้นตอนที่ 4 เมื่อเราคลิกที่ไฟล์ Flash ที่แทรกไปจะพบว่า Property inspector เปลี่ยนไปดังรูป

มีรายละเอียดดังนี้

1.ช่องแรกสุดทางซ้ายมือ สำหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป

2.W (Width) กำหนดความกว้างที่ใช้แสดงผลของ flash

3.H (Height) กำหนดความสูงที่ใช้แสดงผลของ flash

4.File ช่องนี้จะแสดงค่าตำแหน่งที่เราบันทึกไฟล์ flash เอาไว้ไม่ต้องแก้ไขอะไรทั้งสิ้น

5.Src (Source) ให้เราระบุตำแหน่งที่เราเก็บไฟล์ต้นฉบับที่สามารถแก้ไขได้ .fla เอาไว้

6.Edit ใช้สำหรับแก้ไขไฟล์ flash (.swf) โดยจะเรียกโปรแกรม Adobe Flash ขึ้นมา

โดยจะอ้างอิงจากช่อง Src (Source) ที่เราได้บอกตำแหน่งไฟล์ .swf ไว้

7.Reset Size เราสามารถเปลี่ยนแปลงขนาดของไฟล์ Flash ได้โดยคลิกที่มุมของไฟล์

แล้วลากจะขยาย หรือย่อก็ได้ ถ้าต้องการให้ขยายในอัตตราส่วนเท่าเดิมก็ให้กด Shift ค้างไว้

เมื่อเราต้องการให้ขนาดกลับมาเหมือนเดิมก็ให้คลิกที่ปุ่มนี้

8.Class กำหนด Style Sheet ให้กับไฟล์นี้

9.Loop เมื่อเลือกช่องนี้ไฟล์ Flash จะเล่นซ้ำไปซ้ำมา ถ้าไม่ได้เลือกจะแสดงเพียงครั้งเดียวแล้วหยุดไป

10.Autoplay ถ้าเลือกช่องนี้ Flash จะแสดงผลเองอัตโนมัติเมื่อโหลดไฟล์เรียบร้อย ถ้าไม่เลือกการแสดง

ผลจะขึ้นอยู่กับ behavior (เช่น onMouseOver , onMouseDown) ที่เราได้กำหนดไว้ให้กับไฟล์นั้น

11.V Space (Vertical Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในตำแหน่งบนและล่าง

12.H Space (Horizontal Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในตำแหน่งซ้ายและขวา

13.Quality ตัวเลือกนี้จะทำให้เสามารถจัดการกับ anti-aliasing คือการกำหนดคุณภาพของ flash

โดยถ้าเปิด anti-aliasing จะทำให้ flash แสดงผลได้ดี ภาพสวยขึ้น แต่ความเร็วของการเล่นไฟล์

flash จะช้าลง

14.Scale เราจะใช้คำสั่งนี้เมื่อได้เปลี่ยนขนาดของ flash จากขนาดเดิมโดยไม่มีมาตราส่วน คำสั่งนี้

จะเป็นการกำหนดการแสดงผลของ flash ในขนาดที่เรากำหนด Default (Show All) แสดงผลตาม

มาตราส่วนปรกติ และจะแสดงผลทั้งหมดของไฟล์

15.Align จัดตำแหน่งของไฟล์

16.Bg กำหนดพื้นหลังให้ไฟล์

17.Play button กำหนดให้แสดงผลไฟล์ flash ใน Dreamweaver ถ้ากด play จะทำให้เห็นไฟล์ flash

แสดงผลใน Dreamweaver แต่ถ้าต้องการแก้ไขต้องกด stop ก่อน

18.Parameters กำหนดค่าตัวแปรให้กับ flash

การสร้าง Frame ด้วย Dreamweaver

ขั้นตอนการสร้าง frame

1.เปิดไฟล์ html ใหม่ขึ้นมา

2.จากนั้นคลิกที่ปุ่มตามรูป

ดังตัวอย่างเราจะสร้าง frame ทั้งหมด 3 frame เมื่อคลิกที่ปุ่มแล้วจะเป็นดังรูปด้านล่าง

ถ้าเรามองไม่เห็นขอบของ frame ดังรูปด้านบนให้ไปที่ view > visual aid > frame borders

3.เราสามารถเลือก frame ที่ต้องการ และพิมพ์เนื้อหา หรือใส่รูปลงไปใน frame นั้นได้เลย ดังรูป

4.เมื่อเราเขียนเนื้อหาใน frame ใดเรียบร้อยแล้วก็ให้คลิกที่ file > save frame

ในตัวอย่างเรากำลังเขียนส่วน topframe เมื่อ save เราก็ให้ชื่อไฟล์ว่า topframe.html

ให้เราทำแบบนี้ในทุก frame ที่เหลือ จะได้ file มาทั้งหมด 3 ไฟล์ ได้แก่

>> topframe.html

>> leftframe.html

>> mainframe.html

5.เมื่อเขียนทุก frame เรียบร้อยแล้วจะทำการ save หน้าเว็บเพจ ให้ไปที่ file > save all เพื่อเป็นการ save

หน้าหลักในการแสดงผล โดยจะ save ในชื่อ index.html เท่านี้ก็จะได้ file ทั้งหมด 4 ไฟล์ด้วยกัน ได้แก่

>> topframe.html

>> leftframe.html

>> mainframe.html

>> index.html

การแทรก Word มาใช้ใน Dreamweaver

ขั้นตอนที่ 1 ทำการ New File ขึ้นมาใหม่ แล้วให้ทำการ Save ไฟล์นั้น

ขั้นตอนที่ 2 ไปเมนู File  ->  Import  ->  Word Document (Main Menu -> Import -> Word Document)

ขั้นตอนที่ 3 คลิกที่ Import -> Word Document จากนั้นเลือกไฟล์ที่จะทำการ Import เข้ามาใช้

ขั้นตอนที่ 4 เลือกไฟล์ Word ที่มีนามสกุลเป็น *.doc แล้ว Click ไปที่ปุ่ม Open

ขั้นตอนที่ 5 โปรแกรมจะนำเอกสาร Word นั้นใส่ลงใน Web Page โดยอัตโนมัติทั้งรูปและข้อความ

การปรับแต่งตาราง

ขั้นตอนที่ 1 สร้างตารางตามที่ต้องการ

ขั้นตอนที่ 2 คลิกที่ตาราง สังเกตส่วนของ Properties แล้วคลิก Brdr Color เพื่อใส่สีให้เส้นของตาราง

ขั้นตอนที่ 3 คลิกที่ตาราง ใส่สีให้ Background ของตาราง โดยคลิกเลือกสีที่ Bg Color ของ Properties

ขั้นตอนที่ 4 เมื่อเลือกสีได้ตามที่ต้องการแล้ว กดปุ่ม OK

การสร้างตารางให้กับเว็บเพจ

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

ขั้นตอนที่ 2 กำหนดขนาดของตาราง (แล้วแต่จะกำหนด)

ขั้นตอนที่ 3 เมื่อกำหนดได้ตามต้องการแล้วคลิกที่ปุ่ม OK

การใส่สี Background ให้กับเว็บเพจ

ขั้นตอนที่ 1 โดยคลิกที่ Menu Bar ที่เมนู Modify –> Properties

ขั้นตอนที่ 2 จะปรากฏหน้า Page Properties ขึ้นมา ให้ทำการเลือกสีที่ต้องการในตำแหน่ง Background

ขั้นตอนที่ 3 เมื่อเลือกสีได้ตามที่ต้องการแล้วให้กดปุ่ม OK