บทท 43

การกาหนดเวบไซตใน Macromedia Dreamweaver MX Macromedia Dreamweaver MX คอโปรแกรมประเภท HTML Editor ระดบมออาชพ มความสามารถในการใช

ออกแบบ เขยนโคด บรหารจดการเวบไซต เวบเพจ และเวบแอพพลเคชน ชวยลดงาน ลดเวลาในการพฒนาเวบเพจ ชวยในการสามารถสรางโคด HTML รวมทงสครปตภาษา PHP, ASP หรอ JSP โดยทเราไมจาเปนตองเขยนโคดเลยกได

แนะนาสวนประกอบของ Dreamweaver MX 2004

รปแสดงหนาจอของ Macromedia Dreamweaver MX 2004

• 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 ยงมแถบ (Panel) และเครองมออนๆ ทไมไดแสดงใหเหนในหนาจอน เชน History panel และ Code inspector เปนตน แตสามารถเรยกใชไดผานเมน Window ของโปรแกรม

การกาหนดเวบไซตใน Macromedia Dreamweaver MX

การกาหนดเวบไซต คอ การกาหนดคาเรมตนในโปรแกรม 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 ดงรป

รปแสดงไดอะลอก Manage Sites

ชอง Category คลกทรายการ Local Info กาหนดคาดงตอไปน หลงจากนนคลก Next 4.

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

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

ทชอง Category คลกทรายการ Remote Info กาหนดคาดงตอไปน หลงจากนนคลก Next 5.

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

Access: FTP (วธการตดตอกบ Remote WWW Server) FTP Host: www.moph.go.th (ชอเครอง หรอ IP address ของ FTP เซรฟเวอร เชน www.moph.go.th หรอ 192.168.202.100) Host Directory: /var/www/html/phpweb/ (ชอไดเรคทอรของ FTP เซรฟเวอรทจะอพโหลดไฟลขนไป Login: phpweb (ชอ username สาหรบการใชลอกอนเขา FTP เซรฟเวอร) Password: ***** (รหสผานสาหรบ FTP Login)

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

ทชอง Category คลกทรายการ Testing Server กาหนดคาดงตอไปน หลงจากนนคลก OK 6.

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

Server Model: PHP MySQL (การกาหนดให Dreamweaver MX รวาเราจะใชภาษาคอมพวเตอรใด ในการพฒนา เวบแอพพลเคชนนน เชน PHP MySQL หรอ ASP VBSCRIPT) Access: Local/Network (การกาหนดวธการตดตอกบเวบเซรฟเวอรทใชทดสอบเวบเพจ เลอกกาหนด เปนคา None FTP หรอ Local/Network) Testing Server Folder: C:\AppServ\www\PHPWEB\ (การกาหนดไดเรคทอรของเวบเซรฟเวอร เมอมการทดสอบเวบเพจดวยการ กด F12 Dreamweaver MX จะอานซอรสโคดเพอการทดสอบจาก ไดเรคทอรน)

URL Prefix: http://localhost/phpweb/ (URL ของเวบเซรฟเวอรทจะใชในการทดสอบ PHP สครปต เมอกด F12)

7. Dreamweaver MX จะแสดงรายการเวบไซตปจจบนทงหมด ซงจะมรายชอเวบไซตของ Dreamweaver MX แสดงอย ให

คลกปม DONE จะปรากฏเปนหนาจอของ Dreamweaver MX ซงพรอมสาหรบการพฒนา PHP เวบแอพพลเคชน ซงหนาตางดานซายหรอขวา (แลวแตการกาหนดรปแบบ Workspace) จะแสดงไดเรคทอรทกาลงใชงานอย

รปแสดงไดอะลอก Manage Sites หลงการกาหนดเวบไซตเสรจแลว

8. Dreamweaver MX กพรอมสาหรบการเรมตนใชงาน เพอพฒนาเวบแอพพลเคชน PHPWEB ในการเรยกใชงานครงตอไป Dreamweaver MX จะเปดมาทเวบไซตทมการเปดใชงานลาสดเสมอ

รปแสดงหนาจอของ Dreamweaver MX เมอเปดเวบไซต PHPWEB เพอใชงาน

ขนตอนการสราง Site โปรแกรม Adobe Dreamweaver CS3 1. เปดโปรแกรม Adobe Dreamweaver CS3

2

3

1

2. สราง site เพอความสะดวกในการเกบไฟลงาน และรนผลลพธหนาจอออกแบบ

2

1

3. กาหนดตงคา site

1) กรอกชอ site ทตองการ

2) กรอก http://localhost ในชอง URL

3) คลก Next

3

4. กาหนดคาดงน

1

2

3

5. กาหนดคาดงน

1

2

6. เลอกตาแหนงโฟลเดอรทจะใชเกบไฟล แตเนองจากยงไมมโฟลเดอรเกบงาน จงตองสรางโฟลเดอรขนมาใหมกอน

ดงน

1) คลกเขาไปเลอกไดรฟทลงโปรแกรม AppServ ไวกอนหนาน แลวเลอก AppServ www

2) คลกเพอสรางโฟลเดอรใหม

3) พมพชอโฟลเดอรทใชเกบไฟลงาน

4) คลก Open

5) คลก Select ในหนาตางตอไปทปรากฏ

6) จะไดพาธไฟลงาน เชน C:\AppServ\www\krudui_m605\ ถาไมปรากฏชอ

โฟลเดอร สามารถพมพพมพเพมเขาไปเองได (ตองใหแสดงถงชนโฟลเดอรของเรา)

1 2

3

4

7. กาหนดคาดงน

1) กรอกชอโฟลเดอรทเราสรางขนตอจาก http://localhost/

จะไดดงตอไปน เชน http://localhost/krudui_m605

2) คลก Next

1

2

8. คลก OK

9. เลอก no Next

10. เลอก Done

11. คลก OK