หน่วยการเรียนรู้ที่ 9 การทดสอบการทำงานของเว็บไซต์

ส่วนประกอบของพาเนล Files

        พาเนล Files จะรวบรวมโครงสร้างทั้งหมดของเว็บไซต์ไว้ ได้แก่ ไฟล์และโฟลเดอร์ต่างๆ
ดังนี้

https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054594759/swn-prakxb-khxng-phanel-files/224.1.png

        สามารถเลือกทํางานกับแต่ละไฟล์ รวมถึงการย้ายหรือลบไฟล์ได้โดยมีเครื่องมือต่างๆ
ดังนี้
        1.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054889483/swn-prakxb-khxng-phanel-files/i1.png  Connect to Server ใช้เชื่อมต่อกับ Server เพื่ออัพโหลดเว็บไซต์ขึ้นสู่อินเทอร์เน็ต
และในขณะที่เชื่อมต่ออยู่ จะกลายเป็นปุ่มสําหรับใช้ในการตัดการเชื่อมต่อกับ Server ได้ทันที
        2.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054937971/swn-prakxb-khxng-phanel-files/i2.png  Refresh ใช้คลิกเพื่อรีเฟรชหรือปรับปรุงรายการไฟล์และโฟลเดอร์ เมื่อมีการ
เปลี่ยนแปลงจากนอกโปรแกรมได้ทันที
        3.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054954901/swn-prakxb-khxng-phanel-files/i3.png  Get Files from Server ใช้คลิกเพื่อนําไฟล์หรือโฟลเดอร์จาก Server ดาวน์โหลดมา
เก็บไว้ในเครื่องคอมพิวเตอร์
        4.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054962037/swn-prakxb-khxng-phanel-files/i4.png  Put Files to Server ใช้คลิกเพื่อนําไฟล์หรือโฟลเดอร์ที่เลือกไปวางบน Server
        5.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054968224/swn-prakxb-khxng-phanel-files/i5.png  Check Out File คลิกเพื่อดาวน์โหลดไฟล์จาก Server มาแก้ไข รวมทั้งป้องการ
แก้ไขจากผู้อื่น
        6.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054974282/swn-prakxb-khxng-phanel-files/i6.png  Check In File คลิกเพื่ออัพโหลดไฟล์ที่แก้ไขแล้วขึ้นไปบน Server และคืนสิทธิ์
การแก้ไขให้ผู้อื่น
        7.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054980849/swn-prakxb-khxng-phanel-files/i7.png  Synchronize to Remote Server คลิกเพื่อซิงค์ (Sync) หรือเปรียบเทียบไฟล์บน
คอมพิวเตอร์ และ Server ว่ามีไฟล์ที่ต่างกันหรือไม่ หากมีไฟล์ที่แตกต่างกันจะปรับปรุง
และคัดลอกไว้ให้ เหมือนทั้งสองฝั่ง
        8.  https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545054989404/swn-prakxb-khxng-phanel-files/i8.png  Expand to Show คลิกเพื่อขยายการทํางานระหว่างมุมมอง Local View และ
มุมมอง ไฟล์เชื่อมต่อกับ Server ไว้

การตรวจสอบการเชื่อมโยงของเว็บเพจ
ก่อนทำการอัพโหลดเว็บขึ้นสู่ระบบอินเทอร์เน็ต การตรวจสอบการเชื่อมโยง
ของเว็บเพจหน้าต่าง ๆ ถือว่าเป็นสิ่งที่สาคัญ เพื่อป้องกันไม่ให้เกิด Broken Link คือ ลิงค์ที่
ผู้ใช้คลิกแล้วไม่สามารถเปิดเว็บเพจที่ต้องการได้
         สำหรับ Broken Link จะเกิดขึ้นได้เมื่อมีการเปลี่ยนชื่อไฟล์ ย้ายไฟล์หรือโฟลเดอร์
รวมถึงการลบไฟล์ มักเกิดขึ้นเมื่อทำงานนอกโปรแกรม Dreamweaver จะทำให้ไม่มีการ
อัพเดตลิงค์เหมือนกับการทำบนพาแนล Files การตรวจสอบการเชื่อมโยงของเว็บเพจ
จะมีอยู่ 3 ระดับด้วยกันดังนี้
ตรวจสอบการเชื่อมโยงทั้งหมดใน Site
  การตรวจสอบการเชื่อมโยงทั้งหมดใน Site เป็นการตรวจสอบว่าเว็บเพจแต่ละหน้า
มีการเชื่อมโยงที่สมบูรณ์หรือไม่ และยังสามารถตรวจสอบว่ามีภาพที่หายไปหรือ
ไม่ด้วย การตรวจสอบการเชื่อมโยงทั้งหมดใน Site มีขั้นตอนดังนี้
1.  คลิกเมนู Site
2.  คลิกคำสั่ง Check Links Sitewide
3.  จะปรากฏไฟล์ที่มีลิงค์ขาด และ Broken Links ที่หาไม่พบ 
https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858608/kar-trwc-sxb-kar-cheuxm-yong-khxng-webphec/Picture10.png

ตรวจสอบการเชื่อมโยงเฉพาะไฟล์
ในกรณีที่ต้องการตรวจสอบการเชื่อมโยงเฉพาะไฟล์เท่านั้น สามารถตรวจสอบได้
จากพาแนล Files มีขั้นตอนดังนี้
1.  คลิกเลือกไฟล์ที่ต้องการ
2.  คลิกเมาส์ขวา
3.  เลือกคำสั่ง Check Links
4.  คลิกคำสั่ง Selected Files
5.  จะปรากฏไฟล์ที่มีลิงค์ขาด และBroken Links ที่หาไม่พบ

https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858608/kar-trwc-sxb-kar-cheuxm-yong-khxng-webphec/Picture11.png

 

https://sites.google.com/site/dreamweavercs6byjatuporn/_/rsrc/1538122858608/kar-trwc-sxb-kar-cheuxm-yong-khxng-webphec/Picture12.png

ตรวจสอบการเชื่อมโยงเฉพาะไฟล์ที่ทำงาน
         สามารถตรวจสอบการเชื่อมโยงไฟล์ที่กำลังทำงานอยู่ได้ มีขั้นตอนดังนี้
         1.  คลิกเมนู File
         2.  เลือก Check Page
         3.  คลิกคำสั่ง Link
         4.  ในแท็บ LINK CHECKER จะปรากฏ Broken Links ที่หาไม่พบในไฟล์ที่กำลังทำงาน
อยู่การแก้ไขลิงก์เสีย

        หลังจากที่ตรวจสอบพบแล้วว่าเว็บเพจภายใน Site นั้นมีลิงก์เสียหรือ Broken link
อยู่ สามารถ แก้ไขได้ โดยมีหลากหลายวิธีดังนี้
แก้ไขบนพาเนล Files
        หลังจากที่ได้ทําการตรวจสอบลิงก์แบบต่างๆ แล้วจะพบได้ว่า Dreamwคะ ผ่าน
พาเนล Link Checker โดยสามารถแก้ไขการเชื่อมโยงจากพาเนลดังขั้นตอนต่อไปนี้
        1. เลือกไฟล์ จากนั้นคลิกปุ่ม https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545058362917/kar-kaekhi-lingk-seiy/i9.png  (Browse for fle) เพื่อปรับปรุงการเชื่อมโยง
แต่ละไฟล์

https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545058421884/kar-kaekhi-lingk-seiy/231.1.png?height=127&width=400

        2. เลือกโฟลเดอร์หรือไฟล์ให้ถูกต้อง 
        3. จากนั้นคลิกปุ่ม OK การเชื่อมโยงจะถูกปรับปรุงทันที

https://sites.google.com/site/karsrangwebsit13/_/rsrc/1545058785097/kar-kaekhi-lingk-seiy/231.png?height=256&width=320

การเปิดไฟล์ลิงก์ที่มีปัญหาขึ้นมาแก้ไข
        ในกรณีที่พบว่าลิงก์ที่มีปัญหาเป็นภาพ หรือ CSS การคลิกปุ่ม Browse to File อาจ
จะไม่สะดวกนัก โดยสามารถดับเบิ้ลคลิกที่ไฟล์ที่มีปัญหาจากพาเนล Link Checker
ขึ้นมาแก้ไขด้วยขั้นตอนต่อไปนี้
        1.  ตัวอย่างไฟล์ที่ตรวจสอบแล้วว่ามีปัญหาภาพหายไป ดับเบิ้ลคลิกเพื่อเปิด
ขึ้นมาแก้ไข
        2.  ดับเบิ้ลที่ภาพที่หายไป
        3.  เลือกโฟลเดอร์และภาพที่ต้องการ จากนั้นคลิก OK
        4.  การเชื่อมโยงในเว็บจะถูกอัพเดต และภาพที่หายไปจะกลับมาแสดงผล
ทันที
การแก้ไขการเชื่อมโยงทั้งเว็บไซต์
        ในกรณีที่ไม่ได้สร้างเว็บไซต์ด้วยเทมเพลต จะทําให้เว็บเพจแต่ละหน้าแยกจากกัน
เมื่อมีการ เปลี่ยนแปลงใดๆ จะต้องไปทําการแก้ไขที่ละเว็บเพจ แม้ว่าจะเชื่อมโยงไป
ยังเว็บเพจเดียวกันก็ตาม อย่างไร ก็ตามสามารถใช้คําสั่ง Change Link Sitewide มาช่วย
แก้ไขในกรณีการเชื่อมโยงผิดพลาดได้ดังขั้นตอนดังนี้
        1.  คลิกเมนู Site > Change Link Sitewide เพื่อเปิดคําสั่ง
        2.  คลิก Browse for File ในหัวข้อ Change a links to จากนั้นเลือกเว็บเพจหรือระบุ
URL ที่สร้างการเชื่อมโยงผิดพลาด
            2.1 คลิก Browse for File ในหัวข้อ Into links to จากนั้นเลือกเว็บเพจหรือระบุ
URL ที่ต้องการแก้ไข
            2.2 คลิกปุ่ม OK
        3. จะปรากฏรายการเว็บเพจที่จะถูกปรับปรุงการเชื่อมโยง คลิกปุ่ม Update
เพื่อปรับปรุง การเชื่อมโยงเว็บเพจตามรายการที่ปรากฏ