Dream 10 การสร้าง Interactive Image

Dreamweaver10

การสร้าง Interactive Image

            อินเทอร์แอ็คตีฟอิมเมจ ( Interactive Image) เป็นเทคนิคที่ทำให้รูปภาพธรรมดา มีชีวิตขึ้นมา เช่น สามารถเปลี่ยนรูปไปเป็นรูปได้เมื่อผู้ชมชี้ตัวมาที่รูปนั้น ซึ่งเรียกว่า โรลโอเวอร์ ( Rollover),หรือ ใช้รูปภาพนั้นเป็นจุดเชื่อมโยงไปยังที่ตีต่างๆ เมื่อผู้ชมคลิกที่รูปภาพนั้น ที่เรียกว่า ฮอดสปอด ( Hotspot ) และ อิมเมจแมป ( Image map ) เป็นต้น นอกจากนี้ยังไม่สามารถนำมาสร้างเป็นแถบปุ่มเพื่อให้ผู้ชมคลิกเลือกไปยังส่วนต่างๆ ที่เรียกว่า นาวิเกชั่นบาร์ ( Navigation Bar ) ได้อีกด้วย

สร้างอิมเมจแมป ( Image map )

            สร้างอิมเมจแมป ( Image map ) เป็นรูปภาพที่ถูกกำหนดให้บางส่วนของภาพนีสิ่งใดสิ่งหนังเกิดขึ้นเมื่อผู้ชมคลิกที่ส่วนนั้น พื้นที่ของส่วนที่ถูกกำหนดนี้ จะเรียกว่า ฮอดสปอด ( Hspot ) ซึ่งโดยทั่วไปแล้ว เรามักจะใช้ฮอดสปอดนี้ในการสร้างจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไซต์ต่างๆ

---------------------------รูป--------------------------------------------------

การกำหนดฮอดสปอด

1.   ในหน้าต่าง Document เลือกรูปภาพที่จะสร้างฮอดสปอด

2.     ขยายพาเนล Properties ให้เต็มขนาด ( 4 แถว )

3.     ในส่วนของ Map ตั้งซื่อให้กับอิมเมจแมปนี้หากมีหลายอิมเมจเดียวกัน ซื่อต้องไม่ช้ำกัน

4.      เลือกเครื่องมือในการสร้างฮอดสปอด ซึ่งอาจเป็น

----------------------------------รูป----------------------------------------------------------------

การสร้างฮอดสปอดรูปสี่เหลี่ยมและวงกลม

    เลือกเครื่องมือ

             Rectangle Hotspot tool หรือ Oval Hotspot tool ลากตัวชี้เพื่อทำการวาดฮอดสปอดบนส่วนของพื้นที่ของภาพที่ต้องการ

การสร้างฮอดสปอดรูปสามเหลี่ยม

      เลือกเครื่องมือ    Polygon Hotspot tool  คลิกเพื่อสร้างทางเดินของเส้น ให้ได้รูปที่ต้องการ

      คลิกที่เครื่องมือ  Pointer hotspot tool เพื่อปิดขอบเขต

5.  กำหนดค่าการเชื่อมโยงให้กับฮอดสปอด

---------------------------------รูป------------------------------------------

6. คลิกที่ว่างบนหน้าเว็บเพจ เมื่อเสร็จดูผลที่ได้ในเว็บบราวเซอร์

-----------------------รูป----------------------------------------------------

การแก้ไขอิมเมจแมป

     การเลือกฮอดสปอด
                  เลือกเครื่องมือ  Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการหากต้องการเลือกหลายๆ ฮอดสปอด ให้กดปุ่ม Shift ค้างไว้คลิกเลือกหากต้องการเลือกทั้งหมด ให้กดปุ่ม Ctrl+A

การเคลื่อนย้ายฮอดสปอด

1. เลือกเครื่องมือ—รูป-- Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2. ลากไปยังตำแหน่งที่ต้องการ หรือ กดปุ่มลูกศร เพื่อขยาบไปทีละ 1 พิกเซลกดปุ่ม Shift+ปุ่มลูกศร เพื่อเลื่อนไปทีละ 10 พิกเซล

การปรับขนาดฮอดสปอด

1.  เลือกเครื่องมือ Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2.  ลากจุดยึดของขอบเขตฮอดสปอดเพื่อปรับขนาดและรูปทรงของฮอดสปอด

การทำรูปภาพแบบโรลโอเวอร์ ( Rrollover image )

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

Dream 9 การออกแบบด้วย Layout View

Dreamweaver9

การออกแบบด้วย Layout View

การออกแบบเว็บด้วย Layout View

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

            การจัดวางเนื้อหาให้เป็นระเบียบนั้น วิธีหนึ่งนิยมใช้กันก็คือการสร้างตาราง (Table) เพื่อจัดแบ่งการจัดวางเนื้อหาออกเป็นส่วนๆ ตามที่อธิบายไว้ แต่ Dreamweaver ยังมีอีกวิธีหนึ่งที่ง่ายและสะดวกกว่า เพราะออกแบบมาเพื่อใช้ในการออกแบบจัดวางเนื้อหาโดยเฉพาะนั่นก็คือ Layout View ด้วย Layout View นี้ เราสามารถออกแบบหน้าเว็บเพจของเราโดยใช้การวาดโครงร่างของตารางซึ่งแบ่งออกเป็นเชลล์ต่างๆ เพื่อช่วยในในการจัดวางตำแหน่งขององค์ประกอบในหน้าเว็บนั้น ตัวอย่างเช่น เราอาจสร้างเซลล์ขึ้น 1 เซลล์ไว้ในตำแหน่งบนสุดของหน้าตามแนวนอนเพื่อใช้จัดเก็บหัวเรื่องของเว็บเพจ อีกเซลล์หนึ่งอยู่ด้านซ้ายตามแนวตั้งเพื่อใส่กลุ่มของตัวเลือกการเชื่อมโยงต่างๆ และอีกเซลล์หนึ่งทางด้านขวาในพื้นที่ที่เหลือเพื่อใช้ในการแสดงเนื้อหา-----รูป-------

การเข้าสู่ Layout View
       1.  หากไม่อยู่ในมุมมอง Design View ให้เลือกคำสั่ง View > Design หรือ  View > Code and Design
       2.  เลือกคำสั่ง  View > Table View > Layout View หรือ จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม Layout View จะปรากฏกรอบคำแนะนำในการใช้ Layout View เลือก OK

การออกจาก Layout View

    เลือกคำสั่ง View > Table View > Standard View หรือ จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม Standard View

การสร้างโครงร่างตารางและเซลล์

     การสร้างตาราง

         เราสามารถสร้างตารางขึ้นในพื้นที่ว่างๆ ของหน้าเลย์เอ๊าต์, หรือสร้างครอบตารางหรือเซลล์ที่มีอยู่ก่อน, หรือสร้างซ้อนไว้ในตารางอื่นๆ อีกทีหนึ่ง ก็ได้

      1.  จากแถบ Insert เลือกแท็บ  Layout แล้วคลิกที่ปุ่ม -------Draw Layout Table ตัวชี้จะเปลี่ยนรูปเครื่องหมาย +

      2.  วางตัวชี้ที่ตำแหน่งเริ่มต้นของเซลล์ที่จะวาด แล้วลากเพื่อสร้างตารางหากต้องการวาดหลายๆ ตารางต่อเนื่องกัน ให้กดปุ่ม Ctrl ค้างไว้ แล้วลากเพื่อสร้างตาราง

------------------------รูป-------------------------
    หากในเลย์เอ๊าต์ยังไม่มีองค์ประกอบใดๆ ตารางจะถูกสร้างที่มุมซ้ายของหน้าหากในหน้าเลยเอาต์มีองค์ประกอบใดๆอยู่ก่อนแล้ว เราสามารถสร้างตารางไว้ในบรรทัดถัดไปจากองค์ประกอบนั้นๆ เท่านั้น

การสร้างเซลล์
      1.   จากแถบ Insert เลือกแท็บ Layout  แล้วคลิกที่ปุ่ม---รูป—Draw Layout Cell ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
      2.    วางตัวชี้ที่ตำแหน่งเริ่มต้นของเซลล์ที่จะวาด แล้วลากเพื่อสร้างเซลล์หากต้องการวาดหลายๆ เซลล์ต่อเนื่องกัน ให้กดปุ่ม Ctrl ค้างไว้แล้วลากเพื่อสร้างเซลล์

--------------------รูป--------------------------------
 หากเราสร้างเซลล์ภายนอกตาราง โปรแกรมจะทำการสร้างตารางให้กับเซลล์นั้นโดยอัตโนมัติ

การสร้างตารางซ้อนตาราง
      1.  จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม –รูป—Draw Layout Table ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
      2.    สร้างตารางขึ้นในพื้นที่ของตารางที่มีอยู่ก่อนแล้วหรือ สร้างครอบตารางที่มีอยู่เดิมนั้น

------------------------รูป---------------------------------

การใช้เส้นพิกัดช่วยในการจัดวางเซลล์

            เส้นพิกัด หรือ เส้นกริด (Grid) เป็นเส้นตารางที่ช่วยให้เราสามารถจัดวางเซลล์ในตำแหน่งต่างๆ ได้อย่างแม่นยำ

-----------------------------------------------รูป----------------------------------------------------------
การปิด – เปิดเส้นพิกัด

   เลือกคำสั่ง  View > Grid > Show Grid

  การยึดแนวเส้นพิกัด

            เลือกคำสั่ง View > Grid > Snap to Grid  เมื่อเราสร้างเซลล์ใดๆ เซลล์นั้นจะถูกดึงเข้ายึดถึงกับแนวเส้นพิกัดที่ใกล้ที่สุด

   การปรับค่าของเส้นพิกัด

            เลือกคำสั่ง   View > Grid > Grid Settings เลือกปรับค่าตามต้องการ แล้วเลือก OK

--------------------------------------------------รูป-------------------------------------------------------------------

การใส่เนื้อหาลงในเซลล์

      เราสามารถใส่ข้อความหรือรูปภาพลงในเซลล์ที่เราสร้างไว้ในหน้าเลย์เอ๊าต์ได้ เช่นเดียวกันการใส่ลงมนหน้าเว็บเพจในมุมมองออกแบบ (Design View)

1.  วางตัวบอกตำแหน่งการพิมพ์ลงในเซลล์

2.   พิมพ์ข้อความที่ต้องการ ขนาดของเซลล์จะขยายออกตามความกว้างของข้อความ

การใส่รูปภาพลงในเซลล์

1. วางตัวบอกตำแหน่งการพิมพ์ลงในเซลล์

2. เลือกคำสั่ง  Insert > Image  หรือ  คลิกที่ปุ่ม---รูป—Image ในแท็บ Common ของแถบ Insert

3. เลือกรูปภาพตามความต้องการ

การจัดการเซลล์และตาราง

      การเลือกเซลล์หรือตาราง

             หากต้องการเลือกเซลล์ ให้คลิกที่ขอบของเซลล์

              หากต้องการเลือกตาราง ให้คลิกที่แบของตาราง

----------------------------------รูป--------------------------------------------------

 จะปรากฏจุดยึดรอบเซลล์หรือตารางนั้น

   การปรับขนาดเซลล์หรือตาราง

1.   เลือกเซลล์หรือตารางที่จะปรับขนาด

2.  ลากจุดยึดเพื่อปรับขนาด                                                                                             การเคลื่อนย้ายเซลล์หรือตาราง

1.    เลือกเซลล์หรือตารางที่จะเคลื่อนย้าย

2.    ลากเซลล์หรอตารางนั้นไปยังตำแหน่งที่ต้องการ หรือ กดปุ่มลูกศรบนแป้นพิมพ์ เพื่อขยับไปทีละ 1 พิกเซล หากกดปุ่ม Shift ค้างไว้ แล้วกดปุ่มลูกศร จะขยับไปทีละ 10 พิกเซล

  การจัดรูปแบบเซลล์หรือตาราง

1.  เลือกเซลล์หรือตารางที่จะจัดรูปแบบ

2.   กำหนอค่าต่างๆ ในพาเนล Properties

                      ----------------------------------รูป------------------------------------------------

การจัดการคอลัมน์ในตาราง

    เมนูของคอลัมน์

          เราสามารถจัดการคอลัมน์ในตารางได้ด้วยคำสั่งในเมนูของคอลัมน์ โดยคลิกที่รูปหัวลูกศรในแถบของหัวคอลัมน์

-----------------------------------------------------รูป------------------------------------------------

การกำหนดให้คอลัมน์ยืดขนาดเองอัตโนมัติ

            เลือกคำสั่ง  Make Column Autostretch จากเมนูของคอลัมน์ หรือ เลือกเซลล์ใดๆ ในคอลัมน์นั้น แล้วคลิกเลือก Autostretch ในพาเนล Properties

-------------------------------------------รูป-------------------------------------------------

ในการยึดคอลัมน์นั้น โปรแกรมจะต้องเติมช่องว่างลงไปให้ เรียกว่า Spacer image ให้เลือกตัวเลือก แล้วเลือก OK

---------------------------------------------รูป----------------------------------------------

การกำหนดให้ความกว้างคอลัมน์คงที่

            เลือกคำสั่ง Make Column Fixed  Width จากเมนูของคอลัมน์ หรือ เลือกเซลล์ใดๆ ในคอลัมน์นั้น แล้วคลิกเลือก Fixed พาเนล Properties แล้วใส่ข้อความกว้างที่ต้องการ

-----------------------------------------------รูป-------------------------------------------------------------

การตัดที่ว่างส่วนเกินในแนวตั้งของเซลล์

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

            เลือกคำสั่ง  Clear Cell Heights จากเมนูคอลัมน์

---------------------------------รูป-----------------------------------

Dream 8 การใส่สื่อแบบ Multimedia

Dreamweaver8

 การใส่สื่อแบบ Multimedia

การใส่มัลติมีเดียลงในเว็บเพจ

1.   วางตัวบอกตำแหน่งการพิมพ์ในตำแหน่งที่ต้องการ

2.    จากแถบ Insert เลือกแทบ Media แล้วคลิกที่ปุ่มของออบเจ็ดตามชนิดที่ต้องการ

รูปหรือเลือกคำสั่ง Insert > Media หรือ Insert > Interactive Images

การใส่ Flash movie

       ก่อนอื่นเรามาทำความเข้าใจเกี่ยวกับไฟล์ที่ถูกสร้างด้วยโปรแกรม Flash กันก่อน

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

    ไฟล์ที่เกิดจากโปรแกรม Flash จะมีอยู่ด้วยกัน 3 ชนิดคือ

1.   ไฟล์ Flash (.fla) เป็นไฟล์หลักที่ถูกสร้างขึ้นในโปรแกรม Flash และต้องเปิดใช้โปรแกรม Flash เท่านั้น ไม่สามารถเปิดใน Dreamweaver หรือเว็บบราวเซอร์ได้

2.   ไฟล์ Flash movie (.swf)เป็นไฟล์ Flash (.fla)  ที่ถูกบีบอัดเพื่อนำไปใช้แสดงผลบนเว็บบราวเซอร์ ซึ่งสามารถดูผลใน Dreamweaver ได้ แต่ไฟล์ชนิดนี้ไม่สามารถกลับไปแก้ไข้ในโปรแกรม Flash ได้อีก

3.   ไฟล์ Flash template (.swt)เป็นไฟล์ Flash movie ที่สามารถแก้ไข้ได้ มักใช้เป็นไฟล์แม่แบบ แต่ไฟล์ชนิดนี้ไม่สามารถใช้ใน Dreamweaver  ได้

การใส่ Flash movie จะกระทำได้ดังนี้

1.   วางตัวบอกตำแหน่งการพิมพ์อยู่ในตำแหน่งวที่ต้องการ----

2.   จากแถบ Insert ในแท็บ  media เลือกปุ่ม -------- หรือลากปุ่มนี้ลงมายังหน้าต่าง Document เลือกคำสั่ง Insert movie > Media > Flash

3.  เลือกไฟล์ Flash movie (.swf) ที่ต้องการ------หากไฟล์นั้นไม่ได้อยู่ในไฟลเดอร์ของเว็บไซต์ ให้เลือก Yes เพื่อคัดลอกมาไว้ แล้วตั้งซื่อไฟล์

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

1.  วางตัวบอกตำแหน่งการพิมพ์ไว้ในตำแหน่งที่ต้องการ

2.    จากแถบ Insert ในแท็บ Media เลือกปุ่ม ---------- Flash Button หริอลากลงมาไว้ในหน้าต่าง Document  หรือ เลือกคำสั่ง Insert > Interactive Images > Flash Button

------------------------------------------------รูป----------------------------------

3.    กำหนดค่าต่างๆ แล้วเลือก OK

-------------------------------------------รูป--------------------------------
ในพาเนล Properties คลิกที่ปุ่ม  paly เพื่อดูรูปที่ 

การสร้างข้อความจุดเชื่อมโยงด้วย Flash text

       Flash text เป็นส่วนที่ใช้ในการสร้างข้อความจุดเชื่อมโยง เมื่อผู้ชมคลิกที่ข้อความนี้ ก็ไปยังเป้าหมายที่กำหนด

1.   วางตัวบอกตำแหน่งการพิมพ์ไว้ในตำแหน่งที่ต้องการ

2.    จากแถบ Insert ในแท็บ Media เลือกปุ่ม ---- Flash Text หรือ เลือกคำสั่ง Insert > Interactive Images > Flash Text

3.    กำหนดค่าต่างๆ แล้วเลือก OK

การใส่ Shockwave movie,Activex controt,Java applet

            Shockwave movie  เป็นไฟล์ภาพเคลื่อนที่มีเสียงประกอบในลักษณะของภาพยนตร์ ถูกสร้างโปรแกรม macromedia Director และต้องใช้ไฟล์ควบคลุม Shockwave ในการแสดงผลได้อย่างรวดเร็ว เนื่องจากโปรแกรมจะแบ่งไฟล์ออกเป็นส่วนๆ แล้วทำการอ่านไฟล์แสดงผลไป ไม่ต้องรอจนอ่านให้จบไฟล์ก่อน โปรแกรมแสดงผล Shockwave movie นี้จะสามารถใช้ได้ทั้ใน Netscape Navigator plug-in และ Activex control

            Activex controt  หรือ OLE control เป็นส่วนที่ถูกฝังอยู่ในบราวเซอร์เช่นเดียวกับปลั๊กอิน สามารถทำงานได้กับ Internet Explorer ในระบบ Windows เท่านั้น ไม่สามารถใช้ได้กับ Macintosh หรือ Netscape Navigator

            Java applet จาวา (Java) เป็นภาษาคอมพิวเตอร์สม้ยใหม่ที่สามารถทำงานได้กับเครื่องคอมพิวเตอร์ทุกชนิดโดยไม่ขึ้นกับระบบปฏิบัติการ ลักษณะจาวาจะเป็นรโปรแกรมขนาดเล็ก เรียกว่า แอปเพล็ต (applet) ที่สามารถนำไปใส่ในเว็บเพจ และทำงานร่วมกับเว็บบราวเซอร์ได้

การใส่ Shockwave movie,Activex controt,Java applet

1.   วางตัวบอกตำแหน่งการพิมพ์ไว้ในตำแหน่งที่ต้องการ

2.     จากแถบ Insert ในแท็บ Media เลือกปุ่ม

------------รูป----------------
หรือลากลงไปยังหน้าต่าง Document หรือ เลือกคำสั่ง Insert > Media > Shockwave หรือ Aotive หรือ Applet

3.  เลือกไฟล์ที่ต้องการ

การใส่ไฟล์เสียง

            ไฟล์เสียงที่สามารถนำมาใช้ได้จะมีอยู่ด้วยกันหลายชนิด ซึ่งแต่ละชนิดกก็จะมีข้อดีข้อเสียในการนำมาใช้ในเว็บเพจต่างกัน อีกทั้งยังโปรแกรมเสริม (Plug-in) ในการแสดงผลที่ กัน

 รูปแบบของไฟล์เสียง

 .midi หรือ .mid (Musical Digital Interface) เป็นรูปแบบสำหรับเพลงบรรเลง สามารถเรียกใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่ โดยไม่ต้องอาศัยโปรแกรมเสริม (Plug-in) โดยทั่วไปเป็นไฟล์เสียงที่มีคุณภาพดีมาก แต่ก็ขึ้นกับการ์ดเสียงของเราด้วย

 .wav (Waveform Extension) เป็นไฟล์เสียงที่มีคุณภาพเสียง สามารถใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่ โดยไม่ต้องอาศัยโปรแกรมเสริม แต่มีขนาดของไฟล์ค่อนข้างใหญ่

.aif (Audio Interchange File Format, หรือAIFF)  มีรูปแบบคล้ายกับไฟล์ชนิด WAV เป็นไฟล์เสียงที่ดี สามารถใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่โดยไม่ต้องอาศัยโปรแกรมเสริม แต่มีขนาดของไฟล์ค่อนข้างใหญ่

 .mp3 (Motion Picture Experts Group Audio, หรือ MPEG-Audio Layer-3)  เป็นรูปแบบไฟล์ที่ถูกบีบอัดให้มีขนาดเล็กลง โดยยังคงคุณภาพเสียงที่ดีมากเทียบเท่า CD แต่ต้องใช้โปรแกรมเสริม เช่น Quick Time, Windows Media Player หรือ RealPlayer ในการแสดงผล และเทคโนโลยี Streaming ทำให้ทะยอยแสดงผลโดยที่ไม่ต้องรออ่านจนจบไฟล์

 .ra, .ram, .rpm, หรือ Real Audioโปรแกรมเสริม  เป็นรูปแบบไฟล์ที่ถูกบีบอัดให้มีขนาดเล็กกว่า mp3 แต่คุณภาพเสียงด้วยกว่าเล็กน้อยแต่ต้องใช้โปรแกรมเสริม RealPlayer ในการแสดงผลพร้อมกับเทคนิค Streaming

การใส่ไฟล์เสียงลงในเว็บเพจ

          1. วางตัวบอกตำแหน่งการพิมพ์ไว้ในตำแหน่งที่ต้องการ   

          2. จากแถบ Insert ในแท็บ Media เลือกปุ่ม –รูป—Plugin  หรือ เลือกคำสั่ง Insert > Media > Plugin

          3.  ที่ส่วนของ Link ในพาเนล Properties พิมพ์หรือเลือกไฟล์เสียงที่ต้องการ

Dream 7 การสร้างฟอร์ม (Form)

Dreamweaver 7

การสร้างฟอร์ม (Form)

เว็บไซต์หลายเว็บมักจะมีส่วนโต้ตอบกับผู้ใช้ อย่างน้อยก็ในลักษณะของฟอร์มต่างๆ ซึ่งในการทำงานส่วนนี้ จำเป็นต้องอาศัยความสามารถด้านโปรแกรมมากำกับ แต่ในขั้นต้นนี้ผู้ที่สนใจก็สามารถสร้างส่วนโต้ตอบ กับผู้ใช้ได้โดยอาศัยเทคนิคการผสม Form กับคำสั่ง Mailto: ได้เช่นกัน โดยจะเป็นการสร้างฟอร์มส่งรายงานเข้ามายังอีเมล์ของผู้พัฒนาผ่านคำสั่ง Mailto นั่นเอง
หลักการสร้างฟอร์ม
                1.  คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางฟอร์ม
                2.  เปลี่ยนแถบเครื่องมือ Object เป็น Form โดยคลิกที่ปุ่ม Control Menu ซึ่งมีรูปร่างเป็นปุ่มสามเหลี่ยมชี้ลง แล้วเลือกรายการ Form

3.  คลิกเลือกเครื่องมือกำหนดตำแหน่งการสร้างฟอร์ม จะปรากฏเส้นประสีแดงในเอกสาร ณ ตำแหน่งที่วาง Cursor ซึ่งต่อไปเมื่อต้องการวัตถุเกี่ยวกับการสร้างฟอร์ม จะต้องตรวจสอบ Cursor ให้อยู่ในกรอบสีแดงนี้ก่อนเสมอ 

 4.  สังเกตที่บัตร Properties จะมีรายการต่างๆ ดังนี้

5. ให้พิมพ์คำบังคับ mailto:E-Mail Address ในบรรทัด Action เช่น ถ้าผู้พัฒนาเอกสารเว็บมีอีเมล์ คือ boonlert@nectec.or.th ก็ให้ระบุรายการในบรรทัด Actionดังนี้

6.  เมื่อกำหนดคุณสมบัติของฟอร์มตามข้อ 5. แล้ว ต่อไปก็จะเป็นการวางวัตถุต่างๆ ในฟอร์ม ซึ่งประกอบด้วยวัตถุสำคัญๆ ดังนี้

o    ฟิลด์กรอกข้อความ (Text Field) ทั้งตัวอักษรและตัวเลข

o    ฟิลด์ตัวเลือกแบบ CheckBox

o    ฟิลด์ตัวเลือกแบบ Radio Button

o    ฟิลด์รายการ (List/Menu Field)

o    ฟิลด์ปุ่ม (Button Field)

                วัตถุในฟอร์มที่แนะนำ เป็นฟิลด์หรือวัตถุพื้นฐานที่สามารถนำมาใช้งานได้กับคำสั่ง Mailto: ส่วนฟิลด์ที่เหลือจะเป็นส่วนที่ต้องทำงานกับโปรแกรมมิ่ง ดังนั้นจึงไม่ได้แนะนำ แต่อย่างไรก็ตามก็มีหลักการนำมาใช้ใกล้เคียงกัน และการควบคุมตำแหน่งของฟอร์มจำเป็นต้องอาศัย Table มาจัดการ

ฟิลด์กรอกข้อความ (Text Field)                ฟิลด์กรอกข้อความ (Text Field) เป็นฟิลด์สำหรับสร้างส่วนรับ แสดงข้อมูลทั้งตัวอักษรและตัวเลข ซึ่งมี Properties ที่ต้องระบุคือ

·        

TextField Name

-กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับ ชื่อ/นามสกุล อาจจะตั้งชื่อฟิลด์เป็น F-Lname เป็นต้น

·         Char Width
กำหนดความกว้างของฟิลด์ มีหน่วยเป็นตัวอักษร

·         Max Chars
กำหนดจำนวนอักษรสูงสุดที่ยอมให้ป้อนในฟิลด์ มีหน่วยเป็นตัวอักษร

·         Type
ประเภทของฟิลด์ข้อความ ได้แก่ ฟิลด์แบบบรรทัดเดียว (Single Line), ฟิลด์แบบหลายบรรทัด (Multi Line) และฟิลด์แบบรหัสผ่าน (Password) ซึ่งจะแสดงเครื่องหมาย * เมื่อมีการป้อนข้อมูลในฟิลด์นี้

·         Init Val
ระบุข้อความที่ต้องการให้แสดงในฟิลด์นี้ทุกครั้งที่มีการแสดงผลผ่านเบราเซอร์

·         Wrap
ควบคุมการตัดคำเมื่อเลือก Type เป็น Multi Line

ฟิลด์ตัวเลือก Checkbox
               ฟิลด์ตัวเลือก Checkbox   ใช้สำหรับรายการเลือกที่จะเลือก หรือไม่เลือกก็ได้ และไม่จำกัดจำนวนตัวเลือก เช่น วุฒิการศึกษา, สิ่งที่ชอบ, รายการที่ชอบ เป็นต้น ซึ่งมี Properties ที่ต้องระบุคือ

-  Checkbox Name
กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับเพศ อาจจะตั้งชื่อฟิลด์เป็น Sex เป็นต้น

·         Checkbox Value
กำหนดค่าของฟิลด์ เช่น ถ้าต้องการให้ระบุว่าฟิลด์นี้เก็บค่าของเพศชาย ก็อาจจะกำหนดค่าเป็น Male เป็นต้น

·         Initial State
ตัวเลือกว่าจะให้ฟิลด์ Checkbox นี้ถูกเลือกไว้ก่อนหรือไม่ ถ้าเลือกเป็น Checked จะปรากฏเครื่องหมาย x ในช่องฟิลด์นี้ทุกครั้งที่เรียกผ่านเว็บ

ฟิลด์ตัวเลือก Radio Button
                ฟิลด์ตัวเลือก Radio Button สำหรับรายการที่ใช้เลือก เช่น เพศชาย/หญิง ซึ่งมี Properties ที่ต้องระบุเหมือนกับ Checkbox เพียงแต่ฟิลด์แบบนี้อนุญาตให้เลือกได้เพียง 1 รายการเท่านั้น ในขณะนี้ Checkbox สามารถคลิกเลือกได้ทุกรายการที่ระบุ

ฟิลด์รายการ (List/Menu Field)\ฟิลด์รายการ (List/Menu Field) สำหรับรายการเลือกแบบเมนู ซึ่งมีตัวเลือกหลายตัวเลือก เช่น วุฒิการศึกษา ตั้งแต่ ปวช., ปวส., ปริญญาตรี เป็นต้น ซึ่งมี Properties ที่ต้องระบุดังนี้

·         List/Menu กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับวุฒิการศึกษา อาจจะตั้งชื่อฟิลด์เป็น education เป็นต้น

·         Type เลือกประเภทของรายการว่าจะให้แสดงเป็น List หรือเป็นเมนู Drop Down

·         Height ความสูงของเมนู
Selections อนุญาตให้ผู้ใช้เลือกรายการจากเมนูได้มากกว่า 1 รายการหรือไม่ โดยถ้าอนุญาตให้เลือกรายการได้มากกว่า 1 รายการ ผู้ใช้สามารถใช้ปุ่ม หรือ <Ctrl> ควบคุมการเลือกได้

List Values ปุ่มกำหนดค่าของรายการเมนู โดยเมื่อคลิกจะปรากฏหน้าต่างทำงาน ดังนี้

พิมพ์รายการแต่ละรายการโดยกำหนดทั้งใน Item Label และ Value สามารถใช้ปุ่ม เลื่อนไปยังรายการถัดไป หรือคลิกปุ่มเครื่องหมาย + ในการเพิ่มรายการ หรือคลิกปุ่มเครื่องหมาย - เมื่อต้องการลบรายการที่เลือกออกไป สามารถเปลี่ยนลำดับของรายการได้จากการกดปุ่มสามเหลี่ยมชี้ขึ้น หรือชี้ลง

เมื่อกำหนดค่าที่ต้องการ ก็คลิกปุ่ม OK เพื่อยืนยันการบันทึกค่าและใช้งาน

·         Initial Selection ตัวเลือกเพื่อกำหนดว่ารายการใดจะให้แสดงเป็นค่าเริ่มต้นเมื่อมีการเรียกใช้งาน

ฟิลด์ปุ่ม (Button Field)

       ฟิลด์ปุ่ม (Button Field) รายการเลือกสำหรับสร้างปุ่มส่งข้อมูล (Submit) หรือยกเลิกการป้อนข้อมูลในฟอร์ม (Reset) โดยมี Properties สำคัญดังนี้

 

- Button Name กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้ทำหน้าที่ส่งข้อมูล ก็อาจจะตั้งชื่อฟิลด์เป็น Submit เป็นต้น

                - Label ข้อความกำกับใช้ในการแสดงผลบนเบราเซอร์ เช่น หากต้องการให้ฟิลด์นี้ทำหน้าที่ส่งข้อมูล ก็อาจจะตั้งชื่อฟิลด์เป็น "ส่งข้อมูล" เป็นต้น

                - Action ตัวเลือกว่าปุ่มนี้จะทำหน้าที่ในการส่งข้อมูล (Submit Form) หรือเคลียร์ค่าในฟอร์ม (Reset Form) หรือไม่ต้องทำหน้าที่ใดๆ

File Field      เป็นการดึงไฟล์จากเครื่องของคุณ เพื่อที่จะส่งไปยังปลายทาง โดยจะเห็นได้ทั่ว ๆ ไปจากเว็บเซิร์ฟเวอร์ต่าง ๆ ที่ให้คุณดึงไฟล์จากในเครื่องเพื่ออัพโหลด

ตัวอย่าง 

Browse

 Hidden Field      เป็นตัวส่งข้อมูลที่ผู้ใช้แบบฟอร์มนั้นจะไม่สามารถเห็นค่าที่ใส่ลงไป แต่เราต้องกำหนดค่าให้กับ

ออบเจ็กต์นี้ด้วย

Jump Menu      การใช้งานคล้าย ๆ กับออบเจ็กต์ Insert List/Menu แต่ต่างกันตรงที่เอาไว้เชื่อมไปยัง เว็บเพจ ปลายทาง ทันที่ทีมีการเลือกตัวเลือกอื่น แล้วกดปุ่มมันก็จะพาเราลิงค์ไปยังเว็บเพจที่ได้มีการกำหนดไว้