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

Dreamweaver คือโปรแกรมประเภท HTML Editor ระดับมืออาชีพ มีความสามารถในการใช้ออกแบบ
เขียนโค้ด บริหารจัดการเว็บไซต์ เว็บเพจ และเว็บแอพพลิเคชั่น ช่วยลดงาน ลดเวลาในการพัฒนาเว็บเพจ
ช่วยในการสามารถสร้างโค้ด HTML รวมทั้งสคริปต์ภาษา PHP, ASP หรือ JSP โดยที่เราไม่จำเป็นต้องเขียนโค้ดเลยก็ได้

 

แนะนำส่วนประกอบของ Dreamweaver

 

รูปแสดงหน้าจอของ Dreamweaver

• Menu bar    เป็นส่วนรวมคำสั่งในการใช้งานต่างๆ
  
• Insert bar     ประกอบด้วยปุ่มสำหรับแทรกอ็อบเจ็คต์ต่างๆ ลงในเว็บเพจ เช่น รูปภาพ, ตาราง, ฟอร์ม และ เลเยอร์ ฯลฯ ซึ่งอ็อบเจ็คต์เหล่านี้ เมื่อแทรกลงในเว็บเพจก็คือการแทรกแท็ก HTML ลงไปนั่นเอง ซึ่งอีกวิธีการหนึ่ง เราสามารถใช้เมนู Insert แทนการคลิกปุ่มต่างๆ บน Insert Bar ได้เช่นเดียวกัน
  
• Document toolbar     ประกอบด้วยปุ่มและเมนูสำหรับเปลี่ยนรูปแบบการดูเนื้อหาของเว็บเพจใน Document window เช่น Design view และ Code view และทางเลือกอื่นๆ นอกจากนั้น ยังมีเมนูสำหรับเรียกดูเว็บเพจในแบบ preview บนเว็บเบราเซอร์ เช่น Internet Explorer หรือ Netscape Navigator ได้อีกด้วย
  
• Document window     แสดงเนื้อหา โค้ด ของเว็บเพจที่เราสร้างและแก้ไข
  
• Property inspector     สำหรับให้เราตรวจสอบและแก้ไขคุณสมบัติของอ็อบเจ็คต์บนเว็บเพจ
  
• Panel groups         คือกลุ่มของแถบ (Panel) การทำงานกลุ่มต่างๆ หากต้องการดูรายการกลุ่มของแถบใด สามารถคลิกที่ลูกศรด้านซ้ายของชื่อกลุ่ม
  
• Site panel         สำหรับให้เราใช้ในการจัดการไฟล์และโฟลเดอร์ต่างๆ ภายในเว็บไซต์ของเรา
  
• Tag selector        สำหรับคลิกเพื่อเลือกแท็กในตำแหน่งที่ต้องการบนเว็บเพจ
  

 

นอกเหนือจากนี้ Dreamweaver ยังมีแถบ (Panel) และเครื่องมืออื่นๆ ที่ไม่ได้แสดงให้เห็นในหน้าจอนี้ เช่น History panel และ Code inspector เป็นต้น แต่สามารถเรียกใช้ได้ผ่านเมนู Window ของโปรแกรม

 

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

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

ในขั้นตอนนี้จะอธิบายถึงวิธีการนำเอาไฟล์ตัวอย่าง มาติดตั้งในไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์ ซึ่งจากขั้นตอน
การติดตั้ง PHP แอพพลิเคชั่นเซิร์ฟเวอร์โดยใช้ชุดโปรแกรม AppServ เว็บไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์จะถูกกำหนดไว้ที่
C:\AppServ\www\

รูปแสดงเครื่องคอมพิวเตอร์ที่เกี่ยวข้องในการกำหนดเว็บไซต์

ขั้นตอนการกำหนดเว็บไซต์:

• Unzip (Extract) ไฟล์ phpweb.zip ภายใต้ไดเร็คทอรี่ \PHPDW_Course จากแผ่น CD
  ไปลงในไดเร็คทอรี่ C:\AppServ\www\ จะได้ไดเร็คทอรี่ C:\AppServ\www\phpweb\
  
• เปิดโปรแกรม Dreamweaver แล้วไปที่เมนู Site -> Manage Sites…
  
• เมื่อปรากฏไดอะล็อก Manage Sites ให้คลิกที่ปุ่ม New > Site ดังรูป
  
  
  รูปแสดงไดอะล็อก Manage Sites
  
  
• ช่อง Category คลิกที่รายการ Local Info กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก Next
  
  
  

  รูปแสดงการกำหนดค่ารายการเมนู Local Info
  
  

Site name: PHPWEB (ชื่อเว็บแอพพลิเคชั่นที่เรากำหนดเอง) Local root folder: C:\AppServ\www\PHPWEB\ (การกำหนดไดเร็คทอรี่ที่ใช้บันทึกซอร์สโค้ดที่เราพัฒนาขึ้นบนเครื่องเราเอง (local) ) HTTP address: http://localhost/phpweb/ (URL สำหรับใช้งานเว็บแอพพลิเคชั่นที่เราพัฒนาบนเครื่องเราเอง (local) )

ตารางสรุปการกำหนดค่ารายการเมนู Local Info

• ที่ช่อง Category คลิกที่รายการ Testing Server กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก OK
  

  
  

  รูปแสดงการกำหนดค่ารายการเมนู Testing Server
  
  

Server Model: PHP MySQL (การกำหนดให้ Dreamweaver รู้ว่าเราจะใช้ภาษาคอมพิวเตอร์ใด ในการพัฒนา เว็บแอพพลิเคชั่นนั้น เช่น PHP MySQL หรือ ASP VBSCRIPT) Access: Local/Network (การกำหนดวิธีการติดต่อกับเว็บเซิร์ฟเวอร์ที่ใช้ทดสอบเว็บเพจ เลือกกำหนด เป็นค่า None FTP หรือ Local/Network) Testing Server Folder: C:\AppServ\www\PHPWEB\ (การกำหนดไดเร็คทอรี่ของเว็บเซิร์ฟเวอร์ เมื่อมีการทดสอบเว็บเพจด้วยการ กด F12 Dreamweaver จะอ่านซอร์สโค้ดเพื่อการทดสอบจาก ไดเร็คทอรี่นี้) URL Prefix: http://localhost/phpweb/ (URL ของเว็บเซิร์ฟเวอร์ที่จะใช้ในการทดสอบ PHP สคริปต์ เมื่อกด F12)

ตารางสรุปการกำหนดค่ารายการเมนู Testing Server

• ที่ช่อง Category คลิกที่รายการ Remote Info กำหนดค่าดังต่อไปนี้ หลังจากนั้นคลิก Next
  

  
  

  รูปแสดงการกำหนดค่ารายการเมนู Remote Info
  
  

Access: FTP (วิธีการติดต่อกับ Remote WWW Server) FTP Host: 192.168.1.100 (ชื่อเครื่อง หรือ IP address ของ FTP เซิร์ฟเวอร์ เช่น www.domain.com หรือ 192.168.1.100) Host Directory: ชื่อไดเร็คทอรี่ของ FTP เซิร์ฟเวอร์ที่จะอัพโหลดไฟล์ขึ้นไป ปกติจะถูกกำหนดค่าอัตโนมัติ (default) ไว้แล้ว ให้กำหนดค่าว่างไว้ Login: user1 (ชื่อ username สำหรับการใช้ล็อกอินเข้า FTP เซิร์ฟเวอร์) Password: ***** (รหัสผ่านสำหรับ FTP Login)

ตารางสรุปการกำหนดค่ารายการเมนู Remote Info

 

NOTE: ในกรณีที่พัฒนาเว็บไซต์บนเครื่องคอมพิวเตอร์ของเราเอง และเรายังไม่ต้องการอัพโหลดไฟล์เว็บเพจ ให้กำหนดค่า Access: None โปรแกรมก็จะข้ามการกำหนดค่าอื่นๆ ในส่วนของ Remote Info ทั้งหมด

 

• Dreamweaver จะแสดงรายการเว็บไซต์ปัจจุบันทั้งหมด ซึ่งจะมีรายชื่อเว็บไซต์ของ Dreamweaver แสดงอยู่ ให้คลิกปุ่ม DONE จะปรากฏเป็นหน้าจอของ Dreamweaver ซึ่งพร้อมสำหรับการพัฒนา PHP เว็บแอพพลิเคชั่น ซึ่งหน้าต่างด้านซ้ายหรือขวา (แล้วแต่การกำหนดรูปแบบ Workspace) จะแสดงไดเร็คทอรี่ที่กำลังใช้งานอยู่
  

  
  

  รูปแสดงไดอะล็อก Manage Sites หลังการกำหนดเว็บไซต์เสร็จแล้ว
  

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

  
  

  รูปแสดงหน้าจอของ Dreamweaver เมื่อเปิดเว็บไซต์ PHPWEB เพื่อใช้งาน