More Related Content Similar to หน่วยการเรียนรู้ที่ 6 dw8 Similar to หน่วยการเรียนรู้ที่ 6 dw8 (20) หน่วยการเรียนรู้ที่ 6 dw82. โปรแกรม Macromedia Dreamweaver โปรแกรมสำหรับกำรสร ้ำงเว็บเพจ
บริหำรจัดกำรเว็บไซต์ รวมไปถึงกำรพัฒนำเว็บแอปพลิเคชัน เนื่องจำกตัว
Dreamweaver มีควำมสำมำรถที่โดดเด่น ดังนี้ สำมำรถเขียนโปรแกรมสำหรับเว็บได ้
ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำสั่งและ
เครื่องมือต่ำงๆ เรียกใช ้งำนได ้ง่ำยและสะดวกมีกำรปรับปรุงกลไกภำยในให ้มี
ประสิทธิภำพสูงขึ้น สำมำรถสร ้ำงแอปพลิเคชันง่ำยๆ โดยไม่จำเป็นต ้องเขียนโปรแกรม
สร ้ำงเว็บเพจภำษำไทยได ้ทันทีโดยไม่ต ้องติดต ้องโปรแกรมเสริมเพรำะ
Dreamweaver รองรับตัวอักษรแบบ Unicode
3. การเข้าสู่โปรแกรม
Macromedia Dreamweaver 8
มีขั้นตอน คือ คลิกเลือก Start -> Program -> Macromedia -> Macromedia
Dreamweaver 8 ในกำรเข ้ำสู่ระบบในครั้งแรกโปรแกรมจะถำมรูปแบบกำรใช ้งำน 2
รูปแบบ คือ
1. Designer หมำยถึง กำรสร ้ำงและออกแบบเว็บเพจโดยทั่วไป ส่วนมำก
นิยมเลือกรูปแบบนี้
2. Code หมำยถึง วิธีกำรสร ้ำงเว็บเพจที่เน้นกำรเขียนชุดคำสั่งเอง
6. 1. แถบชื่อเรื่อง (Titlebar) เป็นส่วนที่ใช ้แสดงชื่อโปรแกรม Dreamweaver 8
และชื่อไฟล์เอกสำรเว็บเพจที่กำลังทำงำนอยู่
2. แถบรายการคาสั่ง (Menu Bar) เป็นส่วนที่รวบรวมรำยกำรคำสั่งกำรทำงำน
เอำไว ้สำมำรถเปิดรำยกำรคำสั่งต่ำงๆ ขึ้นมำใช ้งำนโดยคลิกที่ชื่อรำยกำรคำสั่งแล ้วเลื่อน
เมำส์ไปยังตำแหน่งที่ต ้องกำรใช ้งำน หำกรำยกำรคำสั่งใดมีรำยกำรคำสั่งย่อยจะแสดงลูกศร
อยู่มุมขวำของรำยกำร หำกเลื่อนเมำส์ไปยังบริเวณดังกล่ำว จะแสดงรำยกำรคำสั่งย่อยเพื่อ
ใช ้งำนต่อไป
3. แถบแทรก (Insert Bar) เป็นแถบที่ประกอบด ้วยปุ่ มคำสั่งที่ใช ้ในกำรแทรก
ออบเจ็กต์หรือวัตถุต่ำงๆ ลงในเอกสำรเว็บเพจ โดยแบ่งเป็นหมวดหมู่ มีรำยละเอียด
ดังต่อไปนี้
Common เป็นชุดคำสั่งสำหรับแทรกออปเจ็กต์ที่เรียกใช ้งำนบ่อยๆ ในกำรสร ้ำง
เว็บเพจ เช่น รูปภำพ กรำฟิก ตำรำง ไฟล์มีเดีย เป็นต ้น
Layout สำหรับเลือกมุมมองในกำรสร ้ำงเว็บเพจ เช่น มุมมองปกติ มุมมองแบบ
ขยำย เพื่อให ้เห็นออปเจ็กต์ต่ำงๆ ได ้อย่ำงชัดเจน
Forms ใช ้สำหรับแทรกออปเจ็กต์ที่ใช ้สร ้ำงแบบฟอร์มรับข ้อมูลจำกผู้ชม เช่น
ช่องรับข ้อควำม และฟิลด์ (Field) ชนิดต่ำงๆ
Text สำหรับจัดรูปแบบข ้อควำมในเว็บเพจ เช่น หัวเรื่อง ตัวหนำ ตัวเอียง จัด
หัวข ้อ จัดย่อหน้ำ และแทรกสัญลักษณ์พิเศษต่ำงๆ
Application สำหรับแทรกคำสั่งและกำรดึงข ้อมูลจำกฐำนข ้อมูลมำแสดงบนเว็บ
Flash element สำหรับนำไฟล์ Flash เข ้ำมำใช ้งำน
Favorite สำหรับจัดเก็บออบเจ็กต์ที่ชอบเพื่อควำมสะดวกในกำรใช ้งำน
7. 4. Toolbar เป็นแถบเครื่องมือที่เก็บปุ่ มคำสั่งที่ต ้องใช ้งำนบ่อยๆ
5. Document Area เป็นส่วนที่ใช ้สำหรับสร ้ำงหน้ำเว็บเพจ โดยกำรใส่
เนื้อหำและจัดองค์ประกอบต่ำงๆ นำมำวำงใน Document Area และสำมำรถเลือกพื้นที่
กำรทำงำนได ้หลำยมุมมอง เช่น Show Code View,Show Code and Design View
ดังที่ได ้กล่ำวไว ้แล ้วข ้ำงต ้น
6. Status Bar คือ แถบแสดงสถำนะที่อยู่บริเวณด ้ำนล่ำงของพื้นที่สร ้ำงงำน
(Document Area) ซึ่งประกอบด ้วย 2 ส่วน คือ ทำงด ้ำนซ ้ำยเรียกว่ำ Tag Selector ใช ้
สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทำงด ้ำนขวำเป็น
ส่วนที่บอกขนำดและเวลำที่ใช ้ในกำรดำวน์โหลดเว็บเพจ
7. Properties Inspector เป็นหน้ำต่ำงแสดงคุณสมบัติของออปเจ็กต์ที่เรำ
กำลังเลือกในเว็บเพจ และสำมำรถกำหนดหรือแก ้ไขคุณสมบัติของส่วนประกอบต่ำงๆ ใน
หน้ำเว็บเพจได ้ เช่น ข ้อควำม สี ขนำด ตำรำง ลิงก์ เป็นต ้น โดยรำยละเอียดภำยใน
หน้ำต่ำง Properties Inspector จะไม่เหมือนกันขึ้นอยู่กับว่ำขณะนั้นเรำกำลังเลือก
ทำงำนกับออปเจ็กต์ใดอยู่
8. Panels เป็นกรอบเล็กๆ บริเวณด ้ำนขวำ ประกอบด ้วยเครื่องมือสำหรับใช ้
ทำงำนต่ำงๆ ซึ่งแต่ละส่วนของ Panels จะมีหน้ำที่แตกต่ำงกันไป เช่น กำรจัดเก็บ Code,
CSS, Behavior อีกทั้งไฟล์และโฟลเดอร์ภำยในเว็บไซต์
8. กำรเข ้ำสู่โปรแกรม
1. คลิกปุ่ ม start > All Programe > Macromedia > Macromedia
Dreamweaver MX 2004 เพื่อเข ้ำสู่โปรแกรม
ส่วนประกอบ
1. แถบ Menu Barหน้ำต่ำง File สำหรับดูข ้อมูลต่ำง ๆ ในหน้ำเพจ เช่น
เครื่องมือต่ำง ๆ และกำรใช ้ FTP
2. แถบเครื่องมือ Insert Bar มีหลำยเครื่องมือด ้วยกัน จะแสดงให ้
เห็นเมื่อคลิ๊กที่กลุ่มเครื่องมือ แต่ละกลุ่มในที่นี้จะอธิบำยบำงเครื่องมือ และเรำจะ
ลองใช ้งำนกันในบทหลังๆ
3. ส่วน Panel ต่าง ๆ เป็นส่วนของหน้ำต่ำงซึ่งเรำต ้องใช ้งำนเมื่อเรำ
ต ้องกำรเพิ่มเติมควำมสำมำรถบำงอย่ำงลงไปในเว็บเพจของเรำเช่นเพิ่ม CSS เข ้ำ
ไปเพื่อใช ้ในกำรจัดแต่งส่วนต่ำง ๆ ของ webpage กำรทำ Layer เป็นต ้น
9. ส่วน Design หน้าต่าง Design นี้จะเป
็ นหน้าต่างที่รวบรวมเครื่องมือ
อาทิเช่น หน้าต่าง CSS Styles หน้าต่าง HTML Styles หน้าต่าง Bahaviors
หรือจะพูดให้เข้าใจ ก็คือ หน้าต่าง Design นี้จะรวบรวม เครื่องมือที่เกี่ยวกับการ
ตกแต่งเว็บด้วย CSS Style และ HTML Styles รวมถึงการใส่ลูกเล่นพิเศษต่าง ๆ
มารวมกันไว้นั่นเอง
ส่วน Code หน้าต่าง Code นี้จะรวบรวมเครื่องไม้เครื่องมือต่างๆ
เหมือนกับหน้าต่าง Design ซึ่งหน้าต่าง Code นี้ได้รวบรวมหน้าต่าง เครื่องมือที
จาเป
็ นไว้ดังนี้ Tag Inspector , Snippets , Reference
5. ส่วนต่าง ๆ properties ส่วนของ Properties ส่วนนี้ก็เป
็ นอีกส่วนที่
เราใช้งานกันบ่อยมากเป
็ นเครื่องมือที่ไว้ใช้กาหนดค่าของเครื่องมือใน tool File
หน้าต่าง Property นี้จะขึ้นอยู่กับเครื่องมือที่เราเลือกใช้ ว่ามีค่าอะไรให้ set บ้าง
เช่น ใช้ในการกาหนดชื่อ Font ภายใน webpage ใช้ในการกาหนด link สี
ตาราง ฟอร์ม อีก มากมายเป
็ นต้น
10. คุณสมบัติทั่วไปของโปรแกรม
Macromedia Dreamweaver เป
็ นโปรแกรมสาหรับออกแบบและพัฒนา
เว็บไซท์ ด้วยการสร้างเว็บเพจและเว็บแอพพลิเคชั่น ที่กาลังเป
็ นที่นิยมนามา
สร้างเว็บไซท์ในปัจจุบัน เนื่องจากใช้งานง่าย โดยเราสามารถที่จะจัดวาง
ข้อความ รูปภาพ ตารางข้อมูล แบบฟอร์ม ฯลฯ ลงไปในเว็บเพจได้อย่าง
ง่ายดายโดยไม่จาเป
็ นต้องใช้โค้ด HTML ซึ่งมีขั้นตอนยุ่งยากและซับซ้อน ทา
ให้มีโอกาสผิดพลาดได้ง่าย ใน Dreamweaver มีเครื่องมือมากมายให้ใช้ใน
การพัฒนาเว็บได้อย่างรวดเร็ว สวยงาม และมีประสิทธิภาพสูง
Dreamweaver มีเครื่องมือในการจัดการและบริหารเว็บไซท์ ที่ช่วยให้เรา
จัดการกับไซท์และไฟล์ที่เกี่ยวข้องกับไซท์ของเรา เช่น สร้าง ลบ ย้าย และ
เปลี่ยนชื่อไฟล์เป
็ นต้น นอกจากนี้ยังมีเครื่องมือในการอัพโหลดไฟล์ของเราขึ้น
เว็บเซิร์ฟเวอร์เพื่อเผยแพร่ข้อมูลสู่อินเตอร์เน็ตได้โดยตรง
ในเว็บเพจนอกจากจะมีโค้ดภาษา HTML แล้ว ในปัจจุบันเว็บเพจจะมีการ
โต้ตอบกับผู้ใช้ได้ ซึ่งจะต้องอาศัยเทคโนโลยีอื่นๆมาเสริม เพื่อให้การนาเสน
ข้อมูลมีประสิทธิภาพ เทคโนโลยีเหล่านี้ได้แก่ CSS (Cascading Style
Sheet) ภาษา JavaScript , ภาษา XML และมัลติมีเดีย Flash เป
็ นต้น ซึ่ง
Dreamweaver ได้สนับสนุนเทคโนโลยีต่างๆเหล่านี้อย่างสมบูรณ์แบบ
11. การวางแผนออกแบบเว็บไซท์
1. กาหนดเป
้ าหมายของเว็บไซท์Dreamweaver MX
2. กาหนดกลุ่มเป
้ าหมายของผู้เข้าชม
3. จัดโครงสร้างเว็บไซท์
4. ออกแบบโครงร่างหลักของเว็บไซท์
5. กาหนด Dreamweaver Site
Dreamweaver Site มี 3 ส่วนด้วยกันคือ
Local Folder เป
็ นไดเร็กทอรี่ที่เก็บเว็บไซท์ที่เราสร้างขึ้นภายใน
เครื่องคอมพิวเตอร์ของเราเอง ซึ่ง Dreamweaver จะเรียกว่า Local Site
Remote Folder เป
็ นไดเร็กทอรี่ที่ใช้เก็บและเผยแพร่เว็บไซท์ที่อยู่บน
เว็บเซิร์ฟเวอร์ ซึ่ง Dreamweaver เรียกว่า Remote Site
Folder For Dynamic Page เป
็ นไดเร็กทอรี่ที่ใช้ในการจัดเก็บและ
ประมวลผล Dynamic Page หรือเว็บเพจที่มีการใช้ Server Side
Script ที่สร้างขึ้นภายในเว็บไซท์ของเรา
การสร้างและแก้ไขเว็บไซท์
12. ขั้นตอนการสร้างเว็บไซท์ใหม่
1. เลือกคาสั่ง Site New Site จากเมนู
2. จะปรากฏไดอะล็อกบ็อกซ์ Site Definition for Untitled
Site 1 ให้คลิกที่แท็บ Basic
3. ใน Edit Files หน้าแรกพิมพ์ชื่อเว็บไซท์ลงไปที่ช่อง What
would you like to name your site ? และคลิกปุ
่ ม Next
4. ใน Edit Files, Part 2 เลือก Server Technology แล้ว
เลือก No , I do not want to use server technology และคลิกที่
Next
5. ใน Edit Files , Part 3 ให้เลือกไดเร็กทอรี่ที่จะทาเป
็ นเว็บ
ไซท์ โดยคลิกที่ไอคอน เพื่อเปิดเข้าไปในโฟลเดอร์ที่ต้องการแล้วคลิก
Select จากนั้นคลิกปุ
่ ม Next
6. หลังจากนั้นจะปรากฏหน้าจอของการเลือกการ Sharing
Files ให้เลือกเป
็ น None และคลิกปุ
่ ม Next
7. จะปรากฏหน้าจอ Summary ซึ่งแสดงรายละเอียดของเว็บ
ไซท์ขึ้นมา ให้คลิกที่ปุ
่ ม Done เพื่อสิ้นสุดการสร้าง Site
13. การสร้างเว็บเพจใหม่
ทุกครั้งที่เปิด Dreamweaver ขึ้นมา จะปรากฏเว็บเพจว่างขึ้นมาให้ 1
หน้า เพื่อให้เราสามารถลงมือสร้างได้ทันที แต่ถ้าต้องการสร้างเว็บเพจเพิ่ม เรา
สามารถทาได้โดย
1. คลิกเลือกคาสั่ง File New หรือ กด Ctrl+N
2. จะปรากฏไดอะล็อกบ็อกซ์ New Document
3. เลือก ประเภทของเว็บเพจใหม่ที่จะสร้าง จาก Category
4. เลือกประเภทของเว็บเพจ(โดยส่วนใหญ่คือ HTML)
5. คลิกปุ
่ ม Create
17. การสร้างไฮเปอร์ลิงค์
ไฮเปอร์ลิงค์ หรือเรียกสั้นๆว่า ลิงค์ (Link) คือการสร้างจุดเชื่อมโยง
เอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือจากเอกสารหนึ่งไปยังเอกสารหนึ่ง
โดยใช้ ข้อความ รูปภาพ หรือเมนู เป
็ นตัวนาทางไปยังเอกสารดังกล่าว ซึ่ง
เนื้อหาข้อมูลอาจเกี่ยวข้องกัน หรือไม่เกี่ยวข้องกันก็ได้เพราะเอกสารเว็บเพจมี
เป
็ นจานวนมากและไม่สามารถนามาวางหน้าเดียวกันได้ทั้งหมด จึงนิยมสร้าง
ลิงค์ขึ้นมาเพื่อให้ผู้ชมสามารถคลิกกระโดดไปยังตาแหน่งต่างๆภายในเว็บไซท์
ได้ง่ายขึ้น
ในอินเตอร์เน็ตแต่ละไฟล์หรือแต่ละเว็บเพจที่สร้างขึ้นจะมีที่อยู่ที่เรา
สามารถอ้างถึงที่ไม่ซ้ากัน ซึ่งเรียกว่า Uniform Resource Locator (URL)
รูปแบบของ URL ประกอบด้วย 3 ส่วนคือ โปรโตคอล(Protocol) โดเมน
(Domain) และที่อยู่ไฟล์ในโดเมน (Path)
19. การสร้างลิงค์ภายในเว็บไซท์
เป
็ นการสร้างลิงค์ภายในเว็บไซท์เดียวกัน จากเว็บเพจหนึ่งไปยังอีกเว็บเพจ
หนึ่ง(ไฟล์ HTML หรือไปยังไฟล์อื่นๆ
1. เลือกข้อความหรือรูปภาพที่ต้องการสร้างเป
็ นลิงค์
2. คลิกที่ปุ
่ ม Browse for File
3. คลิกเลือกชื่อไฟล์ที่จะลิงค์ไปหา
4. คลิกปุ
่ ม OK
5. ถ้าต้องการกาหนดเฟรมหรือวินโดว์ปลายทางที่ต้องการให้เว็บเพจนี้
แสดงผลให้เลือกจากช่อง Target
_blank ให้เปิดเว็บเพจปลายทางในวินโดว์ใหม่
_self ให้แสดงเว็บเพจในเฟรมเดิมจากที่เลือกลิงค์
_parent ให้แสดงเว็บเพจในเฟรมที่ครอบเฟรมปัจจุบันอยู่
_top ให้แสดงเว็บเพจในวินโดว์เดิม โดยยกเลิกเฟรมที่ครอบอยู่ทั้งหมด
6. ทดสอบการทางานของลิงค์ภายในเว็บไซท์
20. การลิงค์ไปยังเว็บไซท์อื่น
เป
็ นการลิงค์ไปยังเว็บไซท์ เว็บเพจ รูปภาพ โปรแกรม หรือ
แหล่งข้อมูลอื่นที่อยู่ภายนอกเว็บไซท์ของเรา
1. เลือกข้อความหรือรูปภาพที่จะทาเป
็ นลิงค์
2. ใส่ URL ปลายทางในช่อง Link บน Properties
Inspector (URL ปลายทางต้องระบุแบบ เต็ม เช่น
http://www.microsoft.com
3. เลือกวินโดว์หรือเฟรมปลายทางที่จะแสดงเว็บเพจใน
ช่อง Target(ถ้าต้องการ)
21. การลิงค์ไปยังอีเมล์
การสร้างลิงค์ไปยังอีเมล์ คือการระบุชื่ออีเมล์แอดเดรสเป
็ นปลายทาง
ของลิงค์ ซึ่งเมื่อผู้ชมคลิกที่ลิงค์จะมีการเปิดโปรแกรมอีเมล์ขึ้นมา (ตามค่าดี
ฟอลต์ที่กาหนดไว้ในเครื่องของผู้ชม เช่น Outlook Express) พร้อมกับนาที่
อยู่อีเมล์ในลิงค์ไปใส่ในช่อง To โดยอัตโนมัติทาให้ผู้ชมสามารถกรอกข้อมูล
และส่งอีเมล์ได้เลย
1. เลือกข้อความหรือรูปภาพที่จะทาเป
็ นลิงค์
2. ใส่แอดเดรสปลายทางในช่อง Link บน Properties Inspector
โดยแอดเดรสปลายทางต้องระบุในรูปแบบ mailto:emailaddress เช่น
mailto:tanaysu@thaimail.com
24. การจัดรูปแบบตารางอัตโนมัติ
โปรแกรม Dreamwever ได้เตรียมคาสั่งในการจัดการรูปแบบ
อัตโนมัติ ที่ออกแบบไว้อย่างสวยงาม ไม่ว่าข้อความ สีพื้น เส้นขอบ โดย
สร้างเป
็ ยชุดสาเร็จให้เลือกใช้งานได้เลย
การเรียกใช้รูปแบบการจัดตารางสาเร็จรูป
1. คลิกในส่วนใดส่วนนึ่งของตาราง
2. เลือกคาสั่งจากเมนู Command Format Table
3. คลิกเลือกชื่อรูปแบบและดูรูปตัวอย่างทางด้านขวา
4. รายละเอียดที่กาหนดในรูปแบบที่เลือก เราสามารถเปลี่ยนแปลงได้
ตามต้องการ
5. คลิก Apply เพื่อดูผลลัพธ์ หากยังไม่พอใจสามารถเลือกแบบ
ใหม่ได้
6. คลิก OK เมื่อเลือกรูปแบบได้แล้ว