บทที่ 2 สร้างเว็บเพจเบื้องต้น

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

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

จากภาพ จะเห็นว่าหน้าโฮมเพจหลัก (index.html) จะต้องอยู่ในโฟเดอร์หลักและไม่ควรอยู่ในโฟเดอร์ย่อยใด ๆ เพราะ  index.html  คือเว็บหน้าแรกที่จะถูกแสดงเมื่อมีการเยี่ยมชมเว็บไซต์

 

การกำหนดเว็บไซต์ใหม่ใน Dreamweaver

   เราจะเริ่มต้นโดยการกำหนดเว็บไซต์ใหม่ในโปรแกรม Dreamweaver ( เราเรียกว่าเป็นการสร้าง Site ใหม่ ) โดยมี 2 วิธีแรกจะใช้วิซาร์ดช่วย และวิธีที่สองเราจะกำหนดค่าต่าง ๆ เอง

  วิธีที่ 1 สร้างเว็บไซต์แบบใช้วิซาร์ด

  1. เลือกคำสั่ง Site> New Site... เพื่อเข้าสู่การสร้างเว็บไซต์ ดังภาพ

     2.  จะปรากฏหน้าจอ Site Definition for Unnamed Site1 เพื่อให้ตั้งค่า ดังต่อไปนี้


หมายเลข 1 คลิกเมาส์เลือกที่แท็บ Basic ที่อยู่มุมบนซ้าย
หมายเลข 2 คลิกเมาส์เลือก Local Info
หมายเลข 3 ที่ Site name : ให้ตั้งชื่อไซต์งานตามต้องการ ควรให้มีความหมายเกี่ยวข้องกับงานหรือกิจกรรมของเว็บไซต์นั้น ๆ   ในที่นี้ จะตั้งชื่อว่า           myorganization
หมายเลข 4 ที่ Local root folder : เป็นการกำหนดที่อยู่ของเว็บไซต์บนเครื่องที่เรากำลังทำงานอยู่   (ควรสร้างโฟลเดอร์เก็บงานไว้ก่อนแล้ว ในที่นี้สร้างโฟลเดอร์เก็บงาน ชื่อ organization ไว้ใน ไดร์ฟ C) และสามารถคลิกเลือกโฟลเดอร์ได้เลย
หมายเลข 5 กำหนดโฟลเดอร์ที่จะเก็บภาพ โดยอาจคลิกเลือกโฟลเดอร์ย่อยที่สร้างไว้แล้ว ในโฟลเดอร์เก็บงาน ในที่นี้ใช้ชื่อ images
หมายเลข 6 ที่ HTTP address : เป็นการกำหนดที่อยู่ บน Server ถ้ายังไม่มีที่อยู่บน Server ไม่ต้องใส่ หรือถ้ามีแต่ไม่ต้องการให้ Dreamweaver ส่งขึ้นไปก็ไม่ต้องใส่
หมายเลข 7 ที่ Case - sensitive links :ให้คลิกเลือกเครื่องหมายถูก เพื่อตรวจสอบตัวอักษร เล็ก-ใหญ่ ซึ่งจะเห็นข้อแตกต่าง ถ้า Server เป็นระบบ Unix เพราะ Unix ถือว่าตัวอักษร เล็ก-ใหญ่ ไม่เหมือนกันเป็นคนละตัวกัน

 

     3.  ใส่ชื่อ Site name เลือกโฟลเดอร์ และตั้งค่าต่าง ๆ ดังภาพ แล้วคลิก Ok ที่ปุ่มด้านล่าง

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

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

การสร้างเว็บเพจใหม่
       ให้เราคลิกเมาส์ปุ่มขาวที่โฟลเดอร์ที่ต้องการสร้างหน้าเว็บเพจใหม่ แล้วเลือกคำสั่ง New File จะปรากฏเว็บเพจใหม่ที่มีนามสกุล .html แล้วตั้งชื่อไฟล์ใหม่ที่จะสร้างได้ตามต้องการ

  1. คลิกเมาส์ปุ่มขวาที่โฟลเดอร์ Site งาน แล้วคลิกเลือก New File ดังภาพ

      2. ตั้งชื่อไฟล์ใหม่แล้วกด Enter

 

สร้างโฟลเดอร์ใหม่ในเว็บไซต์

 ในกรณีที่เราต้องการสร้างโฟลเดอร์ใหม่เพื่อเก็บภาพ หรือแยกจัดเก็บเรื่องต่าง ๆ ไม่ให้ปะปนกัน เราจำเป็นต้องสร้างโฟลเดอร์ใหม่ การสร้างโฟลเดอร์ใหม่ สามารถทำได้ดังนี้

  1. คลิกเมาส์ปุ่มขวาที่โฟลเดอร์ที่เก็บ Site งาน แล้วเลือก New Folder ดังภาพ

      2.  ให้ตั้งชื่อโฟลเดอร์ใหม่ สมมุติโฟลเดอร์นี้ไว้เก็บข้อมูลบุคคลที่ใช้ในเว็บไซต์นี้ ให้ชื่อโฟลเดอร์ว่า personal พิมพ์ชื่อแล้วกด Enter

เปลี่ยนชื่อไฟล์และโฟลเดอร์

  การเปลี่ยนชื่อไฟล์และโฟลเดอร์ สามารถกระทำได้ง่าย โดยคลิกเมาส์ขวาที่ไฟล์ หรือโฟลเดอร์ที่ต้องการจะเปลี่ยนชื่อ แล้วเลือก Edit >Rename จะเกิดลักษณะพร้อมที่จะเปลี่ยน แล้วพิมพ์ชื่อใหม่ที่ต้องการ ดังภาพ

การลบไฟล์และโฟลเดอร์

         การลบไฟล์และโฟลเดอร์ ทำได้โดยคลิกเมาส์ขวาที่ไฟล์ หรือโฟลเดอร์ที่ต้องการลบ แล้วเลือก Edit >Delete ไฟล์หรือโฟลเดอร์จะถูกลบไป ดังภาพ

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

 

 

เข้าใจหลักการเพิ่มและแก้ไของค์ประกอบบนหน้าเว็บ

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

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

การบันทึกเว็บเพจ
        เมื่อเราออกแบบเว็บเพจได้ตามต้องการแล้ว การที่จะบันทึกงาน ให้เลือกคำสั่ง File>Save As เพื่อบันทึกไฟล์ในชื่อใหม่ ดังภาพ

 ต่อไป ให้ทำตามขั้นตอน ดังภาพ

  1. เลือกโฟล์เดอร์ที่เก็บไฟล์งาน
  2. ให้ตั้งชื่อไฟล์ โดยใส่นามสกุลเป็น .html
  3. คลิกปุ่ม Save เพื่อสั่งบันทึกไฟล์

 

เปิดดูหน้าเว็บที่สร้างบนบราวเซอร์

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

การย้อนกลับเพื่อแก้ไขข้อผิดพลาดด้วยพาเนล History
         ในการทำงานออกแบบเว็บเพจ เมื่อทำไปเรื่อย ๆ อาจเกิดข้อผิดพลาดได้ เราสามารถย้อนกลับไปแก้ไขข้อผิดพลาดได้ โดยไปที่เมนูบาร์ Winndow>History หรือกดคีย์ < Shift+F10> ดังภาพ

 

การย้อนกลับการทำงานหลาย ๆ ขั้นด้วยพาเนล History

  

                เราทำได้โดย คลิกเลื่อนแถบ ไปยังขั้นตอนที่เราต้องการย้อนกลับไป โดยจะเลื่อนไปทีละขั้นตอน หรือหลายขั้นตอนได้ ดังภาพ

การทำซ้ำขั้นตอนการทำงาน

              เราสามารถสั่งให้ทำซ้ำขั้นตอนการทำงานที่เราต้องการจะให้ทำซ้ำ ในพาเนล History ได้ โดย คลิกเลือกขั้นตอนที่ต้องการให้ซ้ำคลิกที่ปุ่ม ที่อยู่มุมล่างด้านซ้ายมือ ดังภาพ

 

จัดทำโดย

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

 

 

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