วันพุธที่ 20 กุมภาพันธ์ พ.ศ. 2562

บทที่7 การตกแต่งเว็บเพจ

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

7. 1การใช้ไฟล์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 จะช้าลง สมมุติว่าเราใส่รูปคนวิ่งลงไป เมื่อเปิด anti-aliasing จะทำให้รูปสวยขึ้น แต่คนจะวิ่งได้ช้าลง โดยจะมีตัวเลือกดังนี้

        Low ปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สำคัญกว่าความสวยงาม 

        High เปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สำคัญน้อยกว่าความสวยงาม 

        Auto High คำสั่งนี้จะเปิด anti-aliasing ก่อน เมื่อความเร็วของการเล่นไฟล์ช้าลงมาก ก็จะทำการปิด anti-aliasing ให้ความสำคัญความสวยงามมากว่าความเร็ว

        Auto Low คำสั่งนี้จะเริ่มต้นด้วยการปิด anti-aliasing ก่อน จะเปิดก็ต่อเมื่อเครื่อง CPU ของเครื่องผู้ใช้งานสามารถประมวลผลได้โดยไม่ทำให้ความเร็วของการเล่นไฟล์ลดลง ก็จะเปิด anti-aliasing ให้ความสำคัญความเร็วมากว่าความสวยงาม

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

        Default (Show All) แสดงผลตามมาตราส่วนปรกติ และจะแสดงผลทั้งหมดของไฟล์ เช่น ถ้าเราเปลี่ยนขนาดที่ผิดมาตราส่วนไป ตัวเลือกนี้จะปรับให้แสดงผลในมาตราส่วนที่สามารถแสดงได้เท่านั้น 

        No Border แสดงผลให้โดยใช้มาตราส่วนปรกติ แต่จะไม่แสดงผลส่วนที่เกินออกไป เช่นถ้าเราปรับมาตราส่วนผิดไป ตัวเลือกนี้จะปรับมาตราส่วนตามนั้น แต่ส่วนที่เกินออกไปขนาดที่เรากำหนด จะไม่แสดงผล

        Exact Fit จะปรับการแสดงผลให้เท่ากับขนาดที่เรากำหนด 

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

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

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

    18.Parameters กำหนดค่าตัวแปรให้กับ flash จะพูดถึงในบทอื่น

7.2 การแทรกวิดีโอให้กับเว็บเพจ

แทรกไฟล์ Flash video (Flv) ลงในเว็บเพจDreamweaver
ไฟล์ flv เปิดด้วยโปรแกรม Flash player โชคดีที่ Browser ส่วนใหญ่จะมี flash player ติดมาด้วย 

เราสามารถแปลงจากไฟล์นามสกุลอื่นให้เป็น flv ได้โดยใช้โปรแกรม เช่น โปรแกรม Flashก็สามารถแปลงได้ หรือในปัจจุบันนี้มีโปรแกรมมากมายที่ทำมาเพื่อรองรับส่วนนี้ 
การแทรกไฟล์ Flash video ในเว็บเพจ
1.เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตำแหน่งที่ต้องการจะแทรก 

2.ไปที่ Insert > Media > Flash video จะมีหน้าต่างดังรูป 


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

    1.Video type ให้เลือกเป็น progressive จะแสดงผลเมื่อโหลดไฟล์เสร็จเท่านั้น ส่วนแบบ Streaming นั้นเป็นแบบที่สามารถโหลดไฟล์ไปพร้อมกับเล่นไฟล์ได้ แต่จะต้องติดต่อกับผู้ดูแล server ว่าได้เปิดบริการส่วน Streaming server ไว้หรือไม่ 

    2.URL กำหนดตำแหน่งที่เก็บไฟล์ของเราโดยคลิกที่ Browse เพื่อกำหนดไฟล์ที่ต้องการแทรก 

    3.Skin เลือกรูปแบบของส่วนควบคุมการแสดงผลไฟล์วิดีโอ 

    4.height , width กำหนดความสูงให้กับไฟล์ flash ของเรา ตามปรกติถ้าเราไม่ใส่ Dreamweaver จะรู้ขนาดของไฟล์อยู่แล้ว 

    5.Auto play เล่นไฟล์อัตโนมัติเมื่อโหลดเสร็จ 

    6.Auto rewind เล่นซ้ำอัตโนมัติ 

    7.Prompt ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้ไม่มี Flash player จะปรากฏข้อความในช่อง message

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

แทรกไฟล์วิดีโอ และเสียงลงในเว็บเพจ
Dreamweaver
ในบทนี้จะเป็นการแทรกไฟล์วิดีโอ และเสียง ซึ่งเราได้กล่าวถึงชนิดของไฟล์ในบทที่แล้วไว้แล้ว (ยกเว้นส่วนของ flash จะไม่รวมในนี้) 
แทรกไฟล์วิดีโอ และเสียง
1.เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตำแหน่งที่ต้องการจะแทรก 

2.ไปที่ Insert > Media > Plugin จะมีหน้าต่างดังรูป 


ให้เลือกไฟล์ที่ต้องการแทรก 

3.คลิกโอเคจะมีหน้าต่างดังภาพ 


เราสามารถเปลี่ยนแปลงขนาดที่แสดงในเว็บเพจได้ 

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

4.เมื่อเราเลือกไฟล์วิดีโอที่แทรก ส่วน Property inspector จะเป็นแบบนี้ 


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

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

    2.W (Width) and H (Height) กำหนดความกว้าง และสูงของ ไฟล์ที่จะให้แสดงผล 

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

    4.Src (Source) ตำแหน่งที่เก็บไฟล์ 

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

    6.Play button ใช้ทดลองเปิดไฟล์ 

    7.Plg URL ใช้กำหนดเว็บไซต์สำหรับโหลดโปรแกรมสำหรับเปิดไฟล์ที่เราแทรก จะปรากฏเมื่อเครื่องผู้ใช้ไม่สามารถเปิดไฟล์ของเราได้ 

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

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

    10.Border กำหนดขอบให้กับไฟล์ 

    11.Parameters กำหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น 

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

7.4การแทรกปุ่มแบบRollover Image

Rollover Image เป็นการสร้างเอฟเฟ็คต์ให้กับรูปภาพคือลักษณะของการสลับรูปภาพเมื่อนำเมาส์ไปชี้ที่รูปภาพนั้นๆ จะเปลี่ยนจากรูปหนึ่งเป็นอีกรูปหนึ่งทันทีโดยไม่ต้องใช้โค้ด Java Script อีกทั้งยังสามารถใช้ Rollover เป็นจุดเชื่อมโยงได้อีกด้วย แต่ก่อนที่จะแทรกรูปภาพแบบ Rollover Image นั้น จะต้องมีการเตรียมรูปภาพไว้ รูปและมีขนาดที่เท่ากันเพื่อความสวยงามในขณะเปลี่ยนรูปภาพ สำหรับการแทรกรูปภาพแบบ Rollover Image มีวิธีการดังนี้

         1. คลิกเมาส์เลือกตำแหน่งที่ต้องการวางรูปภาพ
         2. คลิกเลือกเครื่องมือ Rollover Image ซึ่งอยู่บน Insert bar อยู่ในกลุ่ม Common  จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมา
         3. ให้ทำการกำหนดตัวเลือกตามที่ต้องการ
              - Image name เป็นการตั้งชื่อให้กับรูปภาพ (ถ้าไม่ตั้งชื่อโปรแกรมจะมีให้แล้ว)
              - Original image กำหนดภาพแรกเป็นภาพแรกเมื่อแสดงผล โดยการกดปุ่ม Browse..
              - Rollover image กำหนดภาพที่สองซึ่งเป็นภาพที่แสดงผลเมื่อนำเมาส์ไปชี้บริเวณรูปภาพ โดยการกดปุ่ม Browse..
              - Preload rollover image เป็นการกำหนดให้รูปภาพที่สองโหลดไว้ล่วงหน้า (ควรจะต้องเลือกไว้)
              - Alternate text เป็นการใส่ข้อความอธิบายรูปภาพที่แทรกมา
              - When clicked, Go to URL เป็นการกำหนดจุดเชื่อมโยงให้กับรูปภาพ(ในกรณีที่ต้องการให้รูปภาพเป็นจุดเชื่อมโยง) ทำโดบคลิกปุ่ม Browse.. เลือกเว็บเพจที่ต้องการหรือทำการพิมพ์ URL ที่ต้องการ
          4. เมื่อกำหนดตัวเลือกที่ต้องการเรียบร้อยแล้ว กดปุ่ม OK จะได้ผลลัพธ์ดังรูป
   
       ผลลัพธ์จากการแสดงบนโปรแกรมเว็บบราวเซอร์ เมื่อนำเมาส์ไปชี้ที่รูปภาพ

บทที่7 การตกแต่งเว็บเพจ

เนื้อหาสาระ โปรแกรมแฝดเป็นสื่อที่ช่วยในการสร้างสื่อมันติมีเดียเคลื่อนไหวแอนิเมชั่นกราฟฟิคที่มีความคมชัดเด้อจากเฟซกราฟฟิคแบบเวกเตอร์สามารถ...