การทำเว็บไซต์ด้วย Dreamweaver MX
Macromedia Dreamweaver MX คือโปรแกรมประเภท HTML Editor ยอดนิยม มีความสามารถในการใช้ออกแบบ เขียนโค้ด บริหารจัดการเว็บไซต์ เว็บเพจ และเว็บแอพพลิเคชั่น ช่วยลดงาน ลดเวลาในการพัฒนาเว็บเพจ ช่วยในการสามารถสร้างโค้ด HTML รวมทั้งสคริปต์ภาษา PHP, ASP หรือ JSP โดยที่เราไม่จำเป็นต้องเขียนโค้ดเลยก็ได้ สามารถดาวน์โหลดมาใช้งานได้ที่ http://www.macromedia.com/ ตัวทดลองนะครับ
1ให้เพื่อนๆติดตั้งโปรแกรม Dreamweaver MX 2004 ลงเครื่องก่อนนะครับ คลิ๊กที่ตัว install แล้ว Next ไปเรื่อยๆ จน finish นะครับ
2 เปิดโปรแกรมขึ้นมานะครับ ดูส่วนประกอบต่างๆของโปรแกรม
• 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 MX สำหรับการพัฒนาแต่ละเว็บแอพพลิเคชั่น กล่าวคือ หากต้องการใช้งาน Dreamweaver MX ในการพัฒนาเว็บแอพพลิเคชั่น 1 ระบบงานก็ต้องกำหนดเว็บไซต์เพิ่มขึ้นมาอีก 1 เว็บไซต์ หรืออีก 1 โปรเจ็คต์นั่นเอง
ในขั้นตอนนี้จะอธิบายถึงวิธีการนำเอาไฟล์ตัวอย่าง มาติดตั้งในไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์ ซึ่งจากขั้นตอนการติดตั้ง PHP แอพพลิเคชั่นเซิร์ฟเวอร์โดยใช้ชุดโปรแกรม AppServ เว็บไดเร็คทอรี่ของ Apache เว็บเซิร์ฟเวอร์จะถูกกำหนดไว้ที่C:\AppServ\www\
ขั้นตอนการกำหนดเว็บไซต์ PHP ใน Dreamweaver MX:
1. ก็อปปี้ไฟล์ phpweb.zip ภายใต้ไดเร็คทอรี่ \PHPWEB จากแผ่น CD CD-ROMไปลงในไดเร็คทอรี่ C:\AppServ\www\ Unzip ไฟล์ C:\AppServ\www\phpweb.zip จะได้ไดเร็คทอรี่ C:\AppServ\www\phpweb\
2. เปิดโปรแกรม Dreamweaver MX แล้วไปที่เมนู Site -> Manage Sites…
3. เมื่อปรากฏไดอะล็อก Manage Sites ให้คลิกที่ปุ่ม New > Site ดังรูป
4. ช่อง Category คลิกที่รายการ Local Info กำหนดค่าตามในรูปเลยนะครับ หลังจากนั้นคลิก OK
5. ที่ช่อง Category คลิกที่รายการ Remote Info กำหนดค่าตามรูป หลังจากนั้นคลิก OK
6. ที่ช่อง Category คลิกที่รายการ Testing Server กำหนดค่าตามรูปอีก หลังจากนั้นคลิก OK
7. Dreamweaver MX จะแสดงรายการเว็บไซต์ปัจจุบันทั้งหมด ซึ่งจะมีรายชื่อเว็บไซต์ของ Dreamweaver MX แสดงอยู่ ให้คลิกปุ่ม DONE จะปรากฏเป็นหน้าจอของ Dreamweaver MX ซึ่งพร้อมสำหรับการพัฒนา PHP เว็บแอพพลิเคชั่น ซึ่งหน้าต่างด้านซ้ายหรือขวา (แล้วแต่การกำหนดรูปแบบ Workspace) จะแสดงไดเร็คทอรี่ที่กำลังใช้งานอยู่
8. Dreamweaver MX ก็พร้อมสำหรับการเริ่มต้นใช้งาน เพื่อพัฒนาเว็บแอพพลิเคชั่น PHPWEB ในการเรียกใช้งานครั้งต่อไป Dreamweaver MX จะเปิดมาที่เว็บไซต์ที่มีการเปิดใช้งานล่าสุดเสมอ
ทีนี้ก็จะเเริ่มเข้าสู่หน้าโปรแกรมที่พร้อมใช้งานแล้ว การใช้งานโปรแกรม และเทคนิคต่างๆ ผมจะทะยอยนำบทความมาให้เพื่อนๆอ่านเรื่องๆนะครับ
การแสดงไฟล์รูปภาพและข้อความในเว็บเพจ
การนำรูปภาพชนิดต่างๆ เข้ามาตกแต่งหน้าเว็บเพจ นอกจากจะช่วยทำให้เกิดความสวยงามแล้ว ยังสามารถทำเป็นลิงค์ (Hyperlink) เพื่อใช้ในการลิงค์หน้าเว็บเพจได้ด้วย ชนิดของรูปภาพที่นิยมนำมาใช้ตกแต่งเว็บเพจ คือ
.JPG เป็นรูปภาพที่มีลักษณะเป็นภาพนิ่ง ถูกสร้างขึ้นมาจากโปรแกรมทางด้านกราฟิก เช่น Photoshop หรือเป็นการไฟล์รูปภาพจากกล้องดิจิตอล
.GIF รูปภาพชนิดนี้จะมีขนาดเล็กกว่า .jpg เล็กน้อย จะมีลักษณะทั้งรูปแบบภาพนิ่ง และภาพเคลื่อนไหว ถูกสร้างขึ้นมาจากโปรแกรมทางด้านกราฟิก เช่น Photoshop ImageReady เป็นต้น
นอกเหนือจากนี้ ยังมีรูปแบบอื่นๆ อีก เช่น .PNG .BMP ฯลฯ รวมทั้งไฟล์จาก Flash หรือ Shockwave
ขั้นตอนการแสดงไฟล์รูปภาพและข้อความในเว็บเพจ:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Basic Page > HTML หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ memberprofile.htm
2. คลิกที่เมนู Insert > Image จะปรากฏไดอะล็อก Select Image Source ขึ้นมา ให้คลิกเลือกไฟล์รูปภาพ หลังจากนั้นคลิกปุ่ม OK
เมื่อกด OKแล้วรูปก็จะมาลงที่โปรแกรม กด F12 เพื่อแสดงผลผ่านหน้าเว็บบราวเซอร์
การสร้างลิงค์เชื่อมโยงเว็บเพจ
การสร้างจุดลิงค์ระหว่างหน้าเว็บเพจหรือระหว่างเว็บไซต์ เราเรียกว่า ไฮเปอร์ลิงค์ (Hyperlink) ซึ่งมีหน้าที่ในการเปิดหน้าเว็บเพจนั้นๆ ตามที่ได้กำหนดไว้ การลิงค์เว็บเพจเป็นการสั่งให้เว็บเบราเซอร์ไปทำงานที่อีกเว็บเพจหนึ่ง หรือไปทำงานที่เว็บไซต์อื่นๆ หรือแม้แต่ในหน้าเว็บเพจเดียวกัน ในที่นี้จะยกตัวอย่างการสร้างลิงค์แบบต่างๆ ดังต่อไปนี้
การสร้างลิงค์จากข้อความ
เมื่อเราเปิดไปที่เว็บไซต์ใดๆ โดยปกติจะพบข้อความที่เป็นจุดลิงค์ มีลักษณะขีดเส้นใต้ เมื่อเราเลื่อนเม้าส์ไปวางไว้บนข้อความ ลูกศรของเม้าส์จะเปลี่ยนเป็นรูปนิ้วมือชี้ เพื่อเป็นการบอกให้รู้ว่าเป็นจุดลิงค์ไปยังเว็บเพจอื่นๆ
ขั้นตอนการสร้างลิงค์จากข้อความ
ทำต่อจากที่เพื่อนๆทำไว้เลยนะครับ ให้เพื่อนๆลองใส่ข้อความลงไปใต้ภาพดู ดูตัวอย่างของผมจะได้ประมาณนี้
1 จากนั้นกลับมาที่โปรแกรมdreamweaver ให้เพื่อนๆลากเมาส์คลุม ข้อความที่ต้องการจะทำลิ้งค์
2 คลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties แสดงขึ้นมา ให้คลิกที่ปุ่ม Browse for File เพื่อเลือกไฟล์ที่ต้องการลิงค์ไป หรือพิมพ์ชื่อ URL หรือชื่อไฟล์ ที่ต้องการลิงค์ไปที่ช่อง Link ได้เลย
จากนั้นกด F12 เพื่อดูการแสดงผล จะได้ลิ้งค์ตามภาพข้างล่างครับ
เป็นไงครับลองทำกันดูนะครับไม่ยากเลย สำหรับการทำลิ้งค์ หากต้องการทำลิ้งค์ให้รูปภาพเพื่อนๆก็เพียงแต่คลิ๊กไปที่รูปภาพแล้วทำตามขึ้นตอนเดิมนะครับ
การสร้างตาราง HTML
การสร้างตาราง คือขั้นตอนในการแทรกแท็ก ของตาราง HTML ลงในเว็บเพจ เพื่อช่วยในการจัดรูปแบบการแสดงผลข้อมูลหรือรูปภาพในเว็บเพจ ในที่นี้จะเป็นการแทรกโดยการใช้เครื่องมือของโปรแกรม Dreamweaver MX ช่วยในการสร้างโค้ด HTML โดยผู้พัฒนาเว็บไซต์ไม่ต้องพิมพ์โค้ดเอง ช่วยประหยัดเวลาในการพัฒนา ขั้นตอนการสร้างตาราง HTML: 1. เริ่มต้นที่โปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Basic Page > HTML หลังจากนั้นคลิกปุ่ม Create ให้บันทึกเป็นไฟล์ htmltable.htm 2. เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK 
ไม่มีความคิดเห็น:
แสดงความคิดเห็น