SlideShare a Scribd company logo
1 of 25
Macromedia
Dreamweaver 8
โปรแกรม Macromedia Dreamweaver โปรแกรมสำหรับกำรสร ้ำงเว็บเพจ
บริหำรจัดกำรเว็บไซต์ รวมไปถึงกำรพัฒนำเว็บแอปพลิเคชัน เนื่องจำกตัว
Dreamweaver มีควำมสำมำรถที่โดดเด่น ดังนี้ สำมำรถเขียนโปรแกรมสำหรับเว็บได ้
ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำสั่งและ
เครื่องมือต่ำงๆ เรียกใช ้งำนได ้ง่ำยและสะดวกมีกำรปรับปรุงกลไกภำยในให ้มี
ประสิทธิภำพสูงขึ้น สำมำรถสร ้ำงแอปพลิเคชันง่ำยๆ โดยไม่จำเป็นต ้องเขียนโปรแกรม
สร ้ำงเว็บเพจภำษำไทยได ้ทันทีโดยไม่ต ้องติดต ้องโปรแกรมเสริมเพรำะ
Dreamweaver รองรับตัวอักษรแบบ Unicode
การเข้าสู่โปรแกรม
Macromedia Dreamweaver 8
มีขั้นตอน คือ คลิกเลือก Start -> Program -> Macromedia -> Macromedia
Dreamweaver 8 ในกำรเข ้ำสู่ระบบในครั้งแรกโปรแกรมจะถำมรูปแบบกำรใช ้งำน 2
รูปแบบ คือ
1. Designer หมำยถึง กำรสร ้ำงและออกแบบเว็บเพจโดยทั่วไป ส่วนมำก
นิยมเลือกรูปแบบนี้
2. Code หมำยถึง วิธีกำรสร ้ำงเว็บเพจที่เน้นกำรเขียนชุดคำสั่งเอง
ส่วนประกอบของหน้าต่าง
หน้าจอ Start Pageทุกครั้งเมื่อเปิดโปรแกรม Macromedia Dreamweaver
8 จะปรำกฏหน้ำจอเริ่มต ้น (Start Page) สำหรับเปิดเอกสำรเว็บเพจเดิมหรือสร ้ำงเอกสำร
เว็บเพจใหม่ โดยทั่วไปแบ่งออกเป็น 3 กลุ่ม ดังต่อไปนี้
เมื่อเรำเลือกประเภทกำรทำงำนแล ้ว (ในกรณีนี้ผู้สอนคลิกเลือก HTML จำก
ส่วนของ Create New) จะปรำกฏหน้ำต่ำงกำรทำงำนของโปรแกรม โดยมีรำยละเอียด
ดังต่อไปนี้
1. แถบชื่อเรื่อง (Titlebar) เป็นส่วนที่ใช ้แสดงชื่อโปรแกรม Dreamweaver 8
และชื่อไฟล์เอกสำรเว็บเพจที่กำลังทำงำนอยู่
2. แถบรายการคาสั่ง (Menu Bar) เป็นส่วนที่รวบรวมรำยกำรคำสั่งกำรทำงำน
เอำไว ้สำมำรถเปิดรำยกำรคำสั่งต่ำงๆ ขึ้นมำใช ้งำนโดยคลิกที่ชื่อรำยกำรคำสั่งแล ้วเลื่อน
เมำส์ไปยังตำแหน่งที่ต ้องกำรใช ้งำน หำกรำยกำรคำสั่งใดมีรำยกำรคำสั่งย่อยจะแสดงลูกศร
อยู่มุมขวำของรำยกำร หำกเลื่อนเมำส์ไปยังบริเวณดังกล่ำว จะแสดงรำยกำรคำสั่งย่อยเพื่อ
ใช ้งำนต่อไป
3. แถบแทรก (Insert Bar) เป็นแถบที่ประกอบด ้วยปุ่ มคำสั่งที่ใช ้ในกำรแทรก
ออบเจ็กต์หรือวัตถุต่ำงๆ ลงในเอกสำรเว็บเพจ โดยแบ่งเป็นหมวดหมู่ มีรำยละเอียด
ดังต่อไปนี้
Common เป็นชุดคำสั่งสำหรับแทรกออปเจ็กต์ที่เรียกใช ้งำนบ่อยๆ ในกำรสร ้ำง
เว็บเพจ เช่น รูปภำพ กรำฟิก ตำรำง ไฟล์มีเดีย เป็นต ้น
Layout สำหรับเลือกมุมมองในกำรสร ้ำงเว็บเพจ เช่น มุมมองปกติ มุมมองแบบ
ขยำย เพื่อให ้เห็นออปเจ็กต์ต่ำงๆ ได ้อย่ำงชัดเจน
Forms ใช ้สำหรับแทรกออปเจ็กต์ที่ใช ้สร ้ำงแบบฟอร์มรับข ้อมูลจำกผู้ชม เช่น
ช่องรับข ้อควำม และฟิลด์ (Field) ชนิดต่ำงๆ
Text สำหรับจัดรูปแบบข ้อควำมในเว็บเพจ เช่น หัวเรื่อง ตัวหนำ ตัวเอียง จัด
หัวข ้อ จัดย่อหน้ำ และแทรกสัญลักษณ์พิเศษต่ำงๆ
Application สำหรับแทรกคำสั่งและกำรดึงข ้อมูลจำกฐำนข ้อมูลมำแสดงบนเว็บ
Flash element สำหรับนำไฟล์ Flash เข ้ำมำใช ้งำน
Favorite สำหรับจัดเก็บออบเจ็กต์ที่ชอบเพื่อควำมสะดวกในกำรใช ้งำน
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 อีกทั้งไฟล์และโฟลเดอร์ภำยในเว็บไซต์
กำรเข ้ำสู่โปรแกรม
1. คลิกปุ่ ม start > All Programe > Macromedia > Macromedia
Dreamweaver MX 2004 เพื่อเข ้ำสู่โปรแกรม
ส่วนประกอบ
1. แถบ Menu Barหน้ำต่ำง File สำหรับดูข ้อมูลต่ำง ๆ ในหน้ำเพจ เช่น
เครื่องมือต่ำง ๆ และกำรใช ้ FTP
2. แถบเครื่องมือ Insert Bar มีหลำยเครื่องมือด ้วยกัน จะแสดงให ้
เห็นเมื่อคลิ๊กที่กลุ่มเครื่องมือ แต่ละกลุ่มในที่นี้จะอธิบำยบำงเครื่องมือ และเรำจะ
ลองใช ้งำนกันในบทหลังๆ
3. ส่วน Panel ต่าง ๆ เป็นส่วนของหน้ำต่ำงซึ่งเรำต ้องใช ้งำนเมื่อเรำ
ต ้องกำรเพิ่มเติมควำมสำมำรถบำงอย่ำงลงไปในเว็บเพจของเรำเช่นเพิ่ม CSS เข ้ำ
ไปเพื่อใช ้ในกำรจัดแต่งส่วนต่ำง ๆ ของ webpage กำรทำ Layer เป็นต ้น
ส่วน 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 สี
ตาราง ฟอร์ม อีก มากมายเป
็ นต้น
คุณสมบัติทั่วไปของโปรแกรม
Macromedia Dreamweaver เป
็ นโปรแกรมสาหรับออกแบบและพัฒนา
เว็บไซท์ ด้วยการสร้างเว็บเพจและเว็บแอพพลิเคชั่น ที่กาลังเป
็ นที่นิยมนามา
สร้างเว็บไซท์ในปัจจุบัน เนื่องจากใช้งานง่าย โดยเราสามารถที่จะจัดวาง
ข้อความ รูปภาพ ตารางข้อมูล แบบฟอร์ม ฯลฯ ลงไปในเว็บเพจได้อย่าง
ง่ายดายโดยไม่จาเป
็ นต้องใช้โค้ด HTML ซึ่งมีขั้นตอนยุ่งยากและซับซ้อน ทา
ให้มีโอกาสผิดพลาดได้ง่าย ใน Dreamweaver มีเครื่องมือมากมายให้ใช้ใน
การพัฒนาเว็บได้อย่างรวดเร็ว สวยงาม และมีประสิทธิภาพสูง
Dreamweaver มีเครื่องมือในการจัดการและบริหารเว็บไซท์ ที่ช่วยให้เรา
จัดการกับไซท์และไฟล์ที่เกี่ยวข้องกับไซท์ของเรา เช่น สร้าง ลบ ย้าย และ
เปลี่ยนชื่อไฟล์เป
็ นต้น นอกจากนี้ยังมีเครื่องมือในการอัพโหลดไฟล์ของเราขึ้น
เว็บเซิร์ฟเวอร์เพื่อเผยแพร่ข้อมูลสู่อินเตอร์เน็ตได้โดยตรง
ในเว็บเพจนอกจากจะมีโค้ดภาษา HTML แล้ว ในปัจจุบันเว็บเพจจะมีการ
โต้ตอบกับผู้ใช้ได้ ซึ่งจะต้องอาศัยเทคโนโลยีอื่นๆมาเสริม เพื่อให้การนาเสน
ข้อมูลมีประสิทธิภาพ เทคโนโลยีเหล่านี้ได้แก่ CSS (Cascading Style
Sheet) ภาษา JavaScript , ภาษา XML และมัลติมีเดีย Flash เป
็ นต้น ซึ่ง
Dreamweaver ได้สนับสนุนเทคโนโลยีต่างๆเหล่านี้อย่างสมบูรณ์แบบ
การวางแผนออกแบบเว็บไซท์
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 ที่สร้างขึ้นภายในเว็บไซท์ของเรา
การสร้างและแก้ไขเว็บไซท์
ขั้นตอนการสร้างเว็บไซท์ใหม่
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
การสร้างเว็บเพจใหม่
ทุกครั้งที่เปิด Dreamweaver ขึ้นมา จะปรากฏเว็บเพจว่างขึ้นมาให้ 1
หน้า เพื่อให้เราสามารถลงมือสร้างได้ทันที แต่ถ้าต้องการสร้างเว็บเพจเพิ่ม เรา
สามารถทาได้โดย
1. คลิกเลือกคาสั่ง File  New หรือ กด Ctrl+N
2. จะปรากฏไดอะล็อกบ็อกซ์ New Document
3. เลือก ประเภทของเว็บเพจใหม่ที่จะสร้าง จาก Category
4. เลือกประเภทของเว็บเพจ(โดยส่วนใหญ่คือ HTML)
5. คลิกปุ
่ ม Create
การใส่รูปลงในเว็บเพจ
ภาพกราฟิกที่จะนามาแสดงในเว็บไซท์มีกันอยู่มากมายหลายแบบ แต่ที่นิยม
นามาใช้งานกันมากที่สุดได้แก่แบบ GIF และ JPG
การจัดตาแหน่งภาพเทียบกับ
ข้อความ
การสร้างไฮเปอร์ลิงค์
ไฮเปอร์ลิงค์ หรือเรียกสั้นๆว่า ลิงค์ (Link) คือการสร้างจุดเชื่อมโยง
เอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือจากเอกสารหนึ่งไปยังเอกสารหนึ่ง
โดยใช้ ข้อความ รูปภาพ หรือเมนู เป
็ นตัวนาทางไปยังเอกสารดังกล่าว ซึ่ง
เนื้อหาข้อมูลอาจเกี่ยวข้องกัน หรือไม่เกี่ยวข้องกันก็ได้เพราะเอกสารเว็บเพจมี
เป
็ นจานวนมากและไม่สามารถนามาวางหน้าเดียวกันได้ทั้งหมด จึงนิยมสร้าง
ลิงค์ขึ้นมาเพื่อให้ผู้ชมสามารถคลิกกระโดดไปยังตาแหน่งต่างๆภายในเว็บไซท์
ได้ง่ายขึ้น
ในอินเตอร์เน็ตแต่ละไฟล์หรือแต่ละเว็บเพจที่สร้างขึ้นจะมีที่อยู่ที่เรา
สามารถอ้างถึงที่ไม่ซ้ากัน ซึ่งเรียกว่า Uniform Resource Locator (URL)
รูปแบบของ URL ประกอบด้วย 3 ส่วนคือ โปรโตคอล(Protocol) โดเมน
(Domain) และที่อยู่ไฟล์ในโดเมน (Path)
การลิงค์ภายในเว็บเพจเดียวกัน
จะใช้ในกรณีที่เอกสารเว็บเพจนั้นมีเนื้อหายาว และเนื้อหาอาจจะ
แบ่งเป
็ นหัวข้อย่อยๆ ทาให้ผู้ชมเลื่อนไปยังตาแหน่งที่ต้องการได้ช้า กังนั้น
อาจจะมีการทาสารบัญหรือดัชนีไว้ที่ตอนบนของเว็บเพจ และสร้างลิงค์ไปยัง
ส่วนต่างๆภายในเอกสาร การสร้างลิงค์ภายในเว็บเพจเดียวกันประกอบด้วย
2 ขั้นตอนคือ
1. สร้าง Name Anchor หรือกาหนดชื่อให้กับจุดที่จะเชื่อมโยงไป
2. สร้างลิงค์ไปยัง Name Anchor ที่สร้างไว้
การสร้างลิงค์ภายในเว็บไซท์
เป
็ นการสร้างลิงค์ภายในเว็บไซท์เดียวกัน จากเว็บเพจหนึ่งไปยังอีกเว็บเพจ
หนึ่ง(ไฟล์ HTML หรือไปยังไฟล์อื่นๆ
1. เลือกข้อความหรือรูปภาพที่ต้องการสร้างเป
็ นลิงค์
2. คลิกที่ปุ
่ ม Browse for File
3. คลิกเลือกชื่อไฟล์ที่จะลิงค์ไปหา
4. คลิกปุ
่ ม OK
5. ถ้าต้องการกาหนดเฟรมหรือวินโดว์ปลายทางที่ต้องการให้เว็บเพจนี้
แสดงผลให้เลือกจากช่อง Target
_blank ให้เปิดเว็บเพจปลายทางในวินโดว์ใหม่
_self ให้แสดงเว็บเพจในเฟรมเดิมจากที่เลือกลิงค์
_parent ให้แสดงเว็บเพจในเฟรมที่ครอบเฟรมปัจจุบันอยู่
_top ให้แสดงเว็บเพจในวินโดว์เดิม โดยยกเลิกเฟรมที่ครอบอยู่ทั้งหมด
6. ทดสอบการทางานของลิงค์ภายในเว็บไซท์
การลิงค์ไปยังเว็บไซท์อื่น
เป
็ นการลิงค์ไปยังเว็บไซท์ เว็บเพจ รูปภาพ โปรแกรม หรือ
แหล่งข้อมูลอื่นที่อยู่ภายนอกเว็บไซท์ของเรา
1. เลือกข้อความหรือรูปภาพที่จะทาเป
็ นลิงค์
2. ใส่ URL ปลายทางในช่อง Link บน Properties
Inspector (URL ปลายทางต้องระบุแบบ เต็ม เช่น
http://www.microsoft.com
3. เลือกวินโดว์หรือเฟรมปลายทางที่จะแสดงเว็บเพจใน
ช่อง Target(ถ้าต้องการ)
การลิงค์ไปยังอีเมล์
การสร้างลิงค์ไปยังอีเมล์ คือการระบุชื่ออีเมล์แอดเดรสเป
็ นปลายทาง
ของลิงค์ ซึ่งเมื่อผู้ชมคลิกที่ลิงค์จะมีการเปิดโปรแกรมอีเมล์ขึ้นมา (ตามค่าดี
ฟอลต์ที่กาหนดไว้ในเครื่องของผู้ชม เช่น Outlook Express) พร้อมกับนาที่
อยู่อีเมล์ในลิงค์ไปใส่ในช่อง To โดยอัตโนมัติทาให้ผู้ชมสามารถกรอกข้อมูล
และส่งอีเมล์ได้เลย
1. เลือกข้อความหรือรูปภาพที่จะทาเป
็ นลิงค์
2. ใส่แอดเดรสปลายทางในช่อง Link บน Properties Inspector
โดยแอดเดรสปลายทางต้องระบุในรูปแบบ mailto:emailaddress เช่น
mailto:tanaysu@thaimail.com
การออกแบบเว็บเพจด้วยตาราง
ตารางเป
็ นเครื่องมือที่เราใช้ในการแสดงผลข้อมูล ช่วยในการจัดวาง
เลย์เอาท์ของเว็บเพจได้อย่างสวยงาม และยังช่วยในการจัดวางตาแหน่งการ
แสดงผลของข้อความหรือรูปภาพให้ตรงตามตาแหน่งที่ต้องการ
ตารางประกอบไปด้วยคอลัมน์(Column) ในแนวตั้ง และ แถว(Row)
ในแนวนอน มีจุดตัดที่เกิดขึ้นจากแถวและคอลัมน์เรียกว่า เซล (Cell)
ขั้นตอนการสร้างตาราง
การจัดรูปแบบตารางอัตโนมัติ
โปรแกรม Dreamwever ได้เตรียมคาสั่งในการจัดการรูปแบบ
อัตโนมัติ ที่ออกแบบไว้อย่างสวยงาม ไม่ว่าข้อความ สีพื้น เส้นขอบ โดย
สร้างเป
็ ยชุดสาเร็จให้เลือกใช้งานได้เลย
การเรียกใช้รูปแบบการจัดตารางสาเร็จรูป
1. คลิกในส่วนใดส่วนนึ่งของตาราง
2. เลือกคาสั่งจากเมนู Command  Format Table
3. คลิกเลือกชื่อรูปแบบและดูรูปตัวอย่างทางด้านขวา
4. รายละเอียดที่กาหนดในรูปแบบที่เลือก เราสามารถเปลี่ยนแปลงได้
ตามต้องการ
5. คลิก Apply เพื่อดูผลลัพธ์ หากยังไม่พอใจสามารถเลือกแบบ
ใหม่ได้
6. คลิก OK เมื่อเลือกรูปแบบได้แล้ว
การจัดหน้าเว็บเพจด้วยเลเยอร์
ในการจัดหน้าเว็บเพจที่ซับซ้อน นอกจากตารางแล้ว
Dreamweaver ยังมีเครื่องมืออีกชนิดหนึ่งที่ช่วยในการจัดวางเลย์เอาท์คือ
เลเยอร์ (Layer)
เลเยอร์เปรียบเสมือนแผ่นใสที่สามารถวางออปเจ็กต่างๆลงไป และ
นามาเรียงซ้อนกันหลายๆชั้น โดยออปเจ็คชั้นบนจะบังออปเจ็คชั้นที่อยู่ถัดไป
เลเยอร์แต่ละชิ้นสามารถจัดวางไว้ที่ส่วนใดของหน้าเว็บเพจก็ได้ และสามารถ
ที่จะใส่รูปภาพ ข้อความ ตาราง หรือออปเจ็คต่างๆลงไปได้เช่นเดียวกับใน
เว็บเพจ

More Related Content

What's hot

หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์
หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์
หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์Nakharin Inphiban
 
หน่วยที่ 1 รู้จักกับ joomla!
หน่วยที่ 1 รู้จักกับ joomla!หน่วยที่ 1 รู้จักกับ joomla!
หน่วยที่ 1 รู้จักกับ joomla!Nakharin Inphiban
 
การแทรกรูปภาพ
การแทรกรูปภาพการแทรกรูปภาพ
การแทรกรูปภาพkruple
 
Joomla คืออะไร
Joomla คืออะไรJoomla คืออะไร
Joomla คืออะไรkrudaojar
 
คู่มือ Joomla
คู่มือ Joomlaคู่มือ Joomla
คู่มือ JoomlaJatupon Panjoi
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)Thachanok Plubpibool
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานโปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานThachanok Plubpibool
 
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่Manop Kongoon
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บKhon Kaen University
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บKhon Kaen University
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บanuchit025
 
ส่งงาน Microsoft Visual Basic 6.0
ส่งงาน Microsoft Visual Basic 6.0ส่งงาน Microsoft Visual Basic 6.0
ส่งงาน Microsoft Visual Basic 6.0Bass Bass
 
รายงาน window
รายงาน windowรายงาน window
รายงาน windowNooLuck
 

What's hot (19)

หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์
หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์
หน่วยที่ 9 จัดการหน้าแรกให้กับเว็บไซต์
 
หน่วยที่ 1 รู้จักกับ joomla!
หน่วยที่ 1 รู้จักกับ joomla!หน่วยที่ 1 รู้จักกับ joomla!
หน่วยที่ 1 รู้จักกับ joomla!
 
การแทรกรูปภาพ
การแทรกรูปภาพการแทรกรูปภาพ
การแทรกรูปภาพ
 
Joomla คืออะไร
Joomla คืออะไรJoomla คืออะไร
Joomla คืออะไร
 
คู่มือ Joomla
คู่มือ Joomlaคู่มือ Joomla
คู่มือ Joomla
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)
โปรแกรมย่อยและฟังก์ชันมาตรฐาน (1)
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานโปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
 
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
 
Lesson 1
Lesson 1Lesson 1
Lesson 1
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บ
 
ส่งงาน Microsoft Visual Basic 6.0
ส่งงาน Microsoft Visual Basic 6.0ส่งงาน Microsoft Visual Basic 6.0
ส่งงาน Microsoft Visual Basic 6.0
 
Joomla2-5-article-manager
Joomla2-5-article-managerJoomla2-5-article-manager
Joomla2-5-article-manager
 
รายงาน window
รายงาน windowรายงาน window
รายงาน window
 
ภาษา xhtml
ภาษา xhtmlภาษา xhtml
ภาษา xhtml
 
joomla-2-5-install-appserv
joomla-2-5-install-appservjoomla-2-5-install-appserv
joomla-2-5-install-appserv
 
Joomla2 5
Joomla2 5Joomla2 5
Joomla2 5
 
C0163 08
C0163 08C0163 08
C0163 08
 

Similar to หน่วยการเรียนรู้ที่ 6 dw8

หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6arachaporn
 
โปรแกรม dream 8
โปรแกรม dream 8โปรแกรม dream 8
โปรแกรม dream 8kruppp46
 
คู่มือ Dream cs3
คู่มือ Dream cs3คู่มือ Dream cs3
คู่มือ Dream cs3Natda Wanatda
 
Dream weaver cs3
Dream weaver cs3Dream weaver cs3
Dream weaver cs3first351
 
รายงาน คอม
รายงาน คอมรายงาน คอม
รายงาน คอมNooLuck
 
คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3wanida401
 
รายงานคอม
รายงานคอมรายงานคอม
รายงานคอมdekthai
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla WorkshopSatapon Yosakonkun
 

Similar to หน่วยการเรียนรู้ที่ 6 dw8 (20)

หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
 
PHP & Dreamweaver ch03
PHP & Dreamweaver  ch03 PHP & Dreamweaver  ch03
PHP & Dreamweaver ch03
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
E book4
E book4E book4
E book4
 
โปรแกรม dream 8
โปรแกรม dream 8โปรแกรม dream 8
โปรแกรม dream 8
 
คู่มือ Dream cs3
คู่มือ Dream cs3คู่มือ Dream cs3
คู่มือ Dream cs3
 
Dream weaver cs3
Dream weaver cs3Dream weaver cs3
Dream weaver cs3
 
รายงาน คอม
รายงาน คอมรายงาน คอม
รายงาน คอม
 
คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Frontpage
FrontpageFrontpage
Frontpage
 
Joomla
JoomlaJoomla
Joomla
 
รายงานคอม
รายงานคอมรายงานคอม
รายงานคอม
 
Unit2
Unit2Unit2
Unit2
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
Joomla 3.7 Workshop 1 Day
Joomla 3.7 Workshop 1 Day Joomla 3.7 Workshop 1 Day
Joomla 3.7 Workshop 1 Day
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Wordpress 3.5 -install-appserv
Wordpress 3.5 -install-appservWordpress 3.5 -install-appserv
Wordpress 3.5 -install-appserv
 

More from arachaporn

หน่วยการเรียนรู้ที่ 4
หน่วยการเรียนรู้ที่ 4หน่วยการเรียนรู้ที่ 4
หน่วยการเรียนรู้ที่ 4arachaporn
 
หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5arachaporn
 
หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3arachaporn
 
หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2arachaporn
 
หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2arachaporn
 
หน่วยการเรียนรู้ที่ 1
หน่วยการเรียนรู้ที่ 1หน่วยการเรียนรู้ที่ 1
หน่วยการเรียนรู้ที่ 1arachaporn
 

More from arachaporn (6)

หน่วยการเรียนรู้ที่ 4
หน่วยการเรียนรู้ที่ 4หน่วยการเรียนรู้ที่ 4
หน่วยการเรียนรู้ที่ 4
 
หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5
 
หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3
 
หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2
 
หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2หน่วยการเรียนรู้ที่ 2
หน่วยการเรียนรู้ที่ 2
 
หน่วยการเรียนรู้ที่ 1
หน่วยการเรียนรู้ที่ 1หน่วยการเรียนรู้ที่ 1
หน่วยการเรียนรู้ที่ 1
 

หน่วยการเรียนรู้ที่ 6 dw8

  • 2. โปรแกรม 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 หมำยถึง วิธีกำรสร ้ำงเว็บเพจที่เน้นกำรเขียนชุดคำสั่งเอง
  • 4. ส่วนประกอบของหน้าต่าง หน้าจอ Start Pageทุกครั้งเมื่อเปิดโปรแกรม Macromedia Dreamweaver 8 จะปรำกฏหน้ำจอเริ่มต ้น (Start Page) สำหรับเปิดเอกสำรเว็บเพจเดิมหรือสร ้ำงเอกสำร เว็บเพจใหม่ โดยทั่วไปแบ่งออกเป็น 3 กลุ่ม ดังต่อไปนี้
  • 5. เมื่อเรำเลือกประเภทกำรทำงำนแล ้ว (ในกรณีนี้ผู้สอนคลิกเลือก HTML จำก ส่วนของ Create New) จะปรำกฏหน้ำต่ำงกำรทำงำนของโปรแกรม โดยมีรำยละเอียด ดังต่อไปนี้
  • 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
  • 16.
  • 17. การสร้างไฮเปอร์ลิงค์ ไฮเปอร์ลิงค์ หรือเรียกสั้นๆว่า ลิงค์ (Link) คือการสร้างจุดเชื่อมโยง เอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือจากเอกสารหนึ่งไปยังเอกสารหนึ่ง โดยใช้ ข้อความ รูปภาพ หรือเมนู เป ็ นตัวนาทางไปยังเอกสารดังกล่าว ซึ่ง เนื้อหาข้อมูลอาจเกี่ยวข้องกัน หรือไม่เกี่ยวข้องกันก็ได้เพราะเอกสารเว็บเพจมี เป ็ นจานวนมากและไม่สามารถนามาวางหน้าเดียวกันได้ทั้งหมด จึงนิยมสร้าง ลิงค์ขึ้นมาเพื่อให้ผู้ชมสามารถคลิกกระโดดไปยังตาแหน่งต่างๆภายในเว็บไซท์ ได้ง่ายขึ้น ในอินเตอร์เน็ตแต่ละไฟล์หรือแต่ละเว็บเพจที่สร้างขึ้นจะมีที่อยู่ที่เรา สามารถอ้างถึงที่ไม่ซ้ากัน ซึ่งเรียกว่า Uniform Resource Locator (URL) รูปแบบของ URL ประกอบด้วย 3 ส่วนคือ โปรโตคอล(Protocol) โดเมน (Domain) และที่อยู่ไฟล์ในโดเมน (Path)
  • 18. การลิงค์ภายในเว็บเพจเดียวกัน จะใช้ในกรณีที่เอกสารเว็บเพจนั้นมีเนื้อหายาว และเนื้อหาอาจจะ แบ่งเป ็ นหัวข้อย่อยๆ ทาให้ผู้ชมเลื่อนไปยังตาแหน่งที่ต้องการได้ช้า กังนั้น อาจจะมีการทาสารบัญหรือดัชนีไว้ที่ตอนบนของเว็บเพจ และสร้างลิงค์ไปยัง ส่วนต่างๆภายในเอกสาร การสร้างลิงค์ภายในเว็บเพจเดียวกันประกอบด้วย 2 ขั้นตอนคือ 1. สร้าง Name Anchor หรือกาหนดชื่อให้กับจุดที่จะเชื่อมโยงไป 2. สร้างลิงค์ไปยัง Name Anchor ที่สร้างไว้
  • 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
  • 22. การออกแบบเว็บเพจด้วยตาราง ตารางเป ็ นเครื่องมือที่เราใช้ในการแสดงผลข้อมูล ช่วยในการจัดวาง เลย์เอาท์ของเว็บเพจได้อย่างสวยงาม และยังช่วยในการจัดวางตาแหน่งการ แสดงผลของข้อความหรือรูปภาพให้ตรงตามตาแหน่งที่ต้องการ ตารางประกอบไปด้วยคอลัมน์(Column) ในแนวตั้ง และ แถว(Row) ในแนวนอน มีจุดตัดที่เกิดขึ้นจากแถวและคอลัมน์เรียกว่า เซล (Cell)
  • 24. การจัดรูปแบบตารางอัตโนมัติ โปรแกรม Dreamwever ได้เตรียมคาสั่งในการจัดการรูปแบบ อัตโนมัติ ที่ออกแบบไว้อย่างสวยงาม ไม่ว่าข้อความ สีพื้น เส้นขอบ โดย สร้างเป ็ ยชุดสาเร็จให้เลือกใช้งานได้เลย การเรียกใช้รูปแบบการจัดตารางสาเร็จรูป 1. คลิกในส่วนใดส่วนนึ่งของตาราง 2. เลือกคาสั่งจากเมนู Command  Format Table 3. คลิกเลือกชื่อรูปแบบและดูรูปตัวอย่างทางด้านขวา 4. รายละเอียดที่กาหนดในรูปแบบที่เลือก เราสามารถเปลี่ยนแปลงได้ ตามต้องการ 5. คลิก Apply เพื่อดูผลลัพธ์ หากยังไม่พอใจสามารถเลือกแบบ ใหม่ได้ 6. คลิก OK เมื่อเลือกรูปแบบได้แล้ว
  • 25. การจัดหน้าเว็บเพจด้วยเลเยอร์ ในการจัดหน้าเว็บเพจที่ซับซ้อน นอกจากตารางแล้ว Dreamweaver ยังมีเครื่องมืออีกชนิดหนึ่งที่ช่วยในการจัดวางเลย์เอาท์คือ เลเยอร์ (Layer) เลเยอร์เปรียบเสมือนแผ่นใสที่สามารถวางออปเจ็กต่างๆลงไป และ นามาเรียงซ้อนกันหลายๆชั้น โดยออปเจ็คชั้นบนจะบังออปเจ็คชั้นที่อยู่ถัดไป เลเยอร์แต่ละชิ้นสามารถจัดวางไว้ที่ส่วนใดของหน้าเว็บเพจก็ได้ และสามารถ ที่จะใส่รูปภาพ ข้อความ ตาราง หรือออปเจ็คต่างๆลงไปได้เช่นเดียวกับใน เว็บเพจ