บทที่ 1 รู้จักการทำงานของเว็บเพจเบื้องต้น

พื้นฐานอินเทอร์เน็ต

      อินเทอร์เน็ต (Internet) คือ เครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เชื่อมต่อถึงกัน ทำให้เครื่องคอมพิวเตอร์แต่ละเครื่องสามารถสื่อสารถึงกันได้ ผ่านบริการต่างๆที่มีบนอินเทอร์เน็ต เช่น การส่งข้อความผ่านอีเมล์ การเผยแพร่ข้อมูลในรูปของเว็บเพจ การโอนย้ายไฟล์ผ่านบริการอย่าง FTP เป็นต้น เรามาดูนิยามคำศัพท์ต่าง ๆ ที่เกี่ยวข้อง เพื่อเป็นพื้นฐานสำหรับการสร้างเว็บด้วย Dreamweaver ต่อไป

ไคลเอนต์ - เซิร์ฟเวอร์

      คือ การติดต่อสื่อสารบนเครือข่ายอินเทอร์เน็ต โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูลเราจะ เรียกว่า เครื่องให้บริการ (Server) และเครื่องคอมพิวเตอร์ที่รับข้อมูล เราจะเรียกว่า เครื่องรับบริการ (Client)

                                                                               

                                                เครื่องคอมพิวเตอร์รับบริการ (ไคลเอนต์)                           เครื่องคอมพิวเตอร์ให้บริการ (เซิร์ฟเวอร์)

เครือข่ายใยแมงมุม WWW (World Wide Web)

         คือ บริการรูปแบบหนึ่งในอินเทอร์เน็ต เราเรียกสั้น ๆ ว่า "เว็บ" การให้บริการในรูปแบบนี้ คือเราต้องเปิดบราวเซอร์ เช่น Internet Explorer, FireFox หรือ Safari จากเครื่องของเราและระบุ URL เพื่อใช้ในการอ้างที่อยู่ที่เก็บเว็บ เท่านี้เราก็สามารถเปิดดูเว็บได้แล้ว เช่น เมื่อเราระบุ URL ที่ ต้องการเปิดเป็น www.bangkokcity.com ก็จะเป็นการเปิดดูเว็บไซต์ Bangkokcity.com

เว็บไซต์ และเว็บเพจ

         คือ เอกสารที่เราเปิดดูใน World Wide Web เราเรียกสั้น ๆ ว่า "เว็บเพจ" (Web Page) ซึ่งส่วนใหญ่จะถูกสร้างขึ้นจากภาษาคอมพิวเตอร์ที่เรียกว่า HTML ซึ่งจะกำหนดรูปแบบและหน้าตาของเว็บเพจที่ปรากฏบนหน้าจอ และส่วนที่เชื่อมต่กับเว็บเพจอื่น (แต่ในปัจจุบันเว็บไซต์จะเริ่มเปลี่ยนภาษามาเป็น XHTML แล้ว เพื่อให้รองรับกับอุปกรณ์และโปรโตคอลอื่น ๆ ได้มากขึ้น)

        ผู้สร้างเว็บจะเก็บข้อมูลที่เป็นกลุ่มของหน้าเว็บเพจไว้รวมกัน เรียกว่า "เว็บไซต์" (Web Site) โดยจะมีการกำหนดหน้าเว็บเพจหน้าหนึ่งไว้เป็นหน้าแรกเรียกว่า "โฮมเพจ" เป็นทางเข้าเว็บทั้งหมดภายในเว็บไซต์นั้น

                                                                        ตัวอย่างหน้าโฮมเพจของเว็บไซต์
                                                                                                                                                                                                www.successmedia.com

เว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์

        เว็บบราวเซอร์   (Web Browser) คือโปรแกรมที่เป็นประตูสู่โลก World Wide Web ซึ่งเป็นโปรแกรมที่อยู่ในเครื่องคอมพิวเตอร์ลูกข่าย (Client) มีหน้าที่ในการส่งข้อมูลร้องขอและแสดงหน้าเว็บ โดยตัวเว็บบราวเซอร์จะเข้าใจภาษา HTML ที่เป็นมาตรฐานของเว็บ บราวเซอร์ที่ได้รับความนิยมในปัจจุบัน ก็มี Internet Explorer ของไมโครซอฟท์ , Firefox ซึ่งเป็นบราวเซอร์โอเพ่นซอสต์ และ Safari ของแอปเปิ้ล

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

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

  1. คลิกเมาส์ที่ปุ่ม startแล้วเลือกคำสั่ง All Programs>Macromedia>Macromedia Dreamweaver 8 ดังภาพ

  1. คลิกเลือก Macromedia Dreamweaver 8 โปรแกรมจะเปิดหน้าจอ ดังภาพ



หน้าจอนี้มีส่วนสำคัญ 3 ส่วน คือ

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

    ส่วนประกอบของ Dreamweaver 8
            ก่อนที่เราจะใช้งาน Dreamweaver 8 เราควรรู้ส่วนประกอบต่าง ๆ ของ Dreamweaver 8 ในเบื้องต้นเพื่อเป็นพื้นฐานในการใช้งานได้สะดวก

    1. เมื่อคลิกเมาส์เข้าสู่โปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหน้าจอ ดังภาพ

    ส่วนประกอบที่สำคัญของหน้าจอนี้ มีดังนี้

    1. แถบแสดงสถานะที่ควรรู้จัก ดังภาพ


    กลุ่มเครื่องมือ
    การเข้าถึงกลุ่มเครื่องมือ ให้คลิกเมาส์ที่ปุ่มตัวเลือก ดังภาพ


    และคลิกเลือกกลุ่มเครื่องมือที่ต้องการได้ ดังภาพ


    กลุ่มเครื่องมือที่ใช้สำหรับสร้างงานเว็บเพจ มีอยู่ 8 กลุ่มที่ควรรู้จัก ดังนี้

การเปลี่ยนรูปแบบการเรียกใช้งานกลุ่มเครื่องมือ
ในกลุ่มเครื่องมือ คำสั่งสุดท้าย คือ Show as Tabs ดังภาพ



Show as Tabs คือคำสั่งที่ให้แสดงกลุ่มเครื่องมือแยกเป็นแท็บ ๆ เราสามารถคลิกเลือกแท็บของเครื่องมือที่ต้องการใช้งานได้ตามความต้องการ ดังภาพ

                                                                                                              


การกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ (Property Inspector)
     การกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ สามารถกระทำได้เมื่อเราคลิกเลือกภาพ ตาราง ตัวหนังสือหรือองค์ประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององค์ประกอบนั้น ๆ ให้เราสามารถปรับแต่งได้ตามต้องการ
    ตัวอย่าง

                                             จากภาพข้างล่าง ถ้าเราคลิกเลือกที่ภาพ จะเกิด Property Inspector ที่แสดงคุณสมบัติต่างๆ ของภาพ ซึ่งเราสามารถปรับแต่งได้
                                                                                                           

ขั้นตอนการนำภาพเข้าและตกแต่งภาพ

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

กลุ่มหน้าต่างพาเนล (Panal Group)
     นอกจากนี้ โปรแกรม Dreamweaver 8 ยังมีหน้าต่างพาเนลต่าง ๆ ที่เพิ่มความสามารถในการจัดการและออกแบบหน้าเว็บเพจ ซึ่งแต่ละพาเนลจะมีความสามารถในการจัดการหน้าเว็บเพจได้ไม่เหมือนกัน เราเรียกเปิดพาเนลได้จากเมนู Window > และเลือกพาเนลที่ต้องการ ดังภาพ
                                                                                                             


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

    1. Show Code View คลิกที่ จะปรากฏมุมมองแสดงโค้ด HTML ของหน้าเว็บเพจที่เรากำลังทำงานอยู่ ถ้าเรามีความรู้เรื่องภาษา HTML ก็สามารถแก้ไขโค้ดได้ตามต้องการ ดังภาพ
    2. Show Code and Design View คลิกที่ จะปรากฏมุมมองที่แสดงทั้งโค้ดและหน้าเว็บเพจที่เรากำลังทำงานอยู่ สำหรับผู้ที่ต้องการดูโค้ดไปพร้อมกับการออกแบบหน้าจอ ดังภาพ

  

                3.Show Design View คลิกที่ จะแสดงหน้าจอที่เราออกแบบเว็บเพจซึ่งประกอบด้วยภาพ ข้อความ ตาราง หรื่ออื่น ๆ โดยไม่มีการแสดงโค้ดต่าง ๆ มาเกี่ยวข้อง ดังภาพ

 

 

จัดทำโดย

นางสาวชุติมา ฉัตรคำ 

 

 

กลับไปหน้าแรก

 

     

 

                                                                                                                                                               

้้่้