เบื้องต้น Dreamweaver CS4

ประวัติความเป็นมาของโปรแกรม Dreamweaver

Adobe Macromedia Dreamweaver ผู้พัฒนา อะโดบีซิสเต็มส์ (เริ่มพัฒนาโดย แมโครมีเดีย) รุ่นเสถียร ล่าสุด CS4 (10.0) รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550) โอเอส Windows Mac OS X ชนิด โปรแกรมแก้ไข HTML ลิขสิทธิ์ Closed source เว็บไซต์ http://www.adobe.com/ อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมแก้ไข HTML พัฒนาโดยบริษัทแมโครมีเดีย  (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) สำหรับการออกแบบเว็บไซต์ ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรม ที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่าง จากโปรแกรมอื่นๆ ในประเภทเดียวกัน ในช่วงปลายปีทศวรรษ 2533 จนถึงปีพ.ศ. 2544  ดรีมวีฟเวอร์มีสัดส่วนตลาดโปรแกรมแก้ไข HTML อยู่มากกว่า 70% ดรีมวีฟเวอร์มีทั้งใน ระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวีฟเวอร์ยังสามารถทำงาน บนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINEได้ รุ่นล่าสุดคือ  ดรีมวีฟเวอร์ CS4 การทำงานกับภาษาต่างๆ ดรีมวีฟเวอร์ สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดง ผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย และใน เวอร์ชันล่าสุด (เวอร์ชัน CS4) ยังสามารถทำงานร่วมกับ XML และ CSS ได้อย่างง่ายดาย รุ่นต่างๆ Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997) Dreamweaver 1.2 (มีนาคม ค.ศ. 1998) Dreamweaver 2.0 (ธันวาคม ค.ศ. 1998) Dreamweaver 3.0 (ธันวาคม ค.ศ. 1999) Dreamweaver UltraDev 1.0 (มิถุนายน ค.ศ. 2000) Dreamweaver 4.0 (ธันวาคม ค.ศ. 2000) Dreamweaver UltraDev 4.0 (ธันวาคม ค.ศ. 2000) Dreamweaver MX (พฤษภาคม ค.ศ. 2002) Dreamweaver MX 2004 (10 พฤศจิกายน ค.ศ. 2003) Dreamweaver 8 (13 พฤศจิกายน ค.ศ. 2005) Dreamweaver CS3 Dreamweaver CS4

ที่มาของข้อมูลและภาพ : http://pirun.ku.ac.th/~g5166298/lesson5.html ความสามารถของโปรแกรม Dreamweaver  ในการเขียนเว็บเพจ จะมีลักษณะคล้ายกับการพิมพ์งานในโปรแกรม Text Editor ทั่วไป คือว่ามันจะเรียงชิดซ้ายบน ตลอดเวลา ไม่สามารถย้าย หรือ นำไปวางตำแหน่งที่ต้องการได้ทันที่เหมือนโปรแกรมกราฟิก เพราะฉะนั้นหากเรา ต้องการจัดวางรูปแบบตามที่เราต้องการ ก็ใช้ตาราง Table เข้ามาช่วยจัดตำแหน่ง ซึ่งเมื่อมีการจัดวางรูปแบบที่ ซับซ้อนมากขึ้น การเขียนภาษา HTML ก็ซับซ้อนยิ่งขึ้นเช่นกัน โปรแกรม Dreamweaver อาจจะไม่สามารถเขียนเว็บ ได้ตามที่เราต้องการทั้งหมด วิธีการแก้ไขปัญหาที่ดีที่สุดคือ ควรจะเรียนรู้หลักการของภาษา HTML ไปด้วย ซึ่งถือว่า เป็นสิ่งที่จำเป็นมากสำหรับผู้ที่ต้องการประกอบอาชีพ Webmaster แบบจริงจัง อาจจะไม่ต้องถึงกับท่องจำ Tag ต่าง ๆ  ได้ทั้งหมด แต่ขอให้รู้ เข้าใจหลักการก็พอแล้ว เพราะหลาย ๆ ครั้งที่เราจะเขียนเว็บใน Dreamweaver แล้วกลับได้ ผลผิดเพี้ยนไป ไม่ตรงตามที่ต้องการ ก็ต้องมาแก้ไข Code HTML เอง และความสามารถของ Dreamweaver สรุปได้ดังนี้ 1. สนับสนุนการทำงานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า เว็บที่เราเขียนหน้าจอ Dreamweaver ก็จะแสดงแบบเดียวกับเว็บเพจจริงๆ ช่วยให้เราเขียนเว็บเพจง่ายขึ้น ไม่ต้องเขียน Code HTML เอง 2. มีเครื่องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุ่นสูง 3. สนับสนุนภาษาสคริปต์ต่างๆ ทั้งฝั่ง Client และ Server เช่น Java, ASP, PHP, CGI, VBScript 4. มีเครื่องมือในการ Upload หน้าเว็บเพจไปที่เครื่อง Server เพื่อทำการเผยแพร่งานที่เราสร้างในอินเทอร์เน็ต โดยการส่งผ่าน FTP หรือ โดยการใช้โปรแกรม FTP ภายนอกช่วย เช่น WS FTP 5. รองรับมัลติมีเดีย เช่น การใส่เสียง, การแทรกไฟล์วิดีโอ, การใช้งานร่วมกับโปรแกรม Flash , Fireworks ที่มาของข้อมูล : http://aster.spu.ac.th/ การใช้งานเบื้องต้น (สิ่งที่ควรทราบ) 1. ภาษา HTML เป็นภาษาที่ออกแบบสำหรับการแสดงผลเท่านั้น! ไม่สามารถประมวลผล หรือ ใช้เขียนเว็บ แอพพลิเคชั่นได้ 2. หากต้องการเพิ่มลูกเล่น หรือ เทคนิคพิเศษ เช่น Effect ต่าง ๆ ต้องนำภาษา JavaScript มาเสริม HTML อีกที 3. การจัดรูปแบบใน Code เช่นการขึ้นบรรทัดใหม่ การเว้นวรรค ไม่มีผลต่อการแสดงผลทาง Web Browser 4. การขึ้นบรรทัดใหม่ ต้องใช้ Tag <BR> หรือ กดปุ่ม Shift+Enter 5. การขึ้นย่อหน้าใหม่ ต้องใช้ Tag <P> หรือ กดปุ่ม Enter 6. การเว้นวรรค ต้องใช้ Tag พิเศษ คือ &nbsp; หรือ กดปุ่ม Ctrl+ Shift + Spacebar 7. หลักการอ่าน Tag ของภาษา HTML จะอ่านค่าจาก Tag ที่อยู่ด้านในก่อน 8. ไฟล์ HTML และ Script ต่างๆ สามารถเปิดแก้ไขในโปรแกรม Text Editor ทั่ว ๆ ไป ไม่จำเป็นต้องแก้ไขใน  Dreamweaver เพียงอย่างเดียว 9. การแทรกข้อความ และ การปรับแต่งค่าต่าง ๆ ให้คลิกตำแหน่งที่ต้องการ แล้วพิมพ์ข้อความตามต้องการ หรือให้เลือกข้อความเมื่อต้องการกำหนดค่าต่าง ๆ เพิ่มเติม ที่มาของข้อมูล : http://aster.spu.ac.th/ ส่วนประกอบต่างๆ ของโปรแกรม Dreamweaver

แถบคำสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคำสั่งทั้งหมดของโปรแกรม • แถบคำเครื่องมือ (Toolbar) รวบรวมปุ่มคำสั่งที่ใช้งานบ่อย • แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ เช่น เส้นกราฟิก  (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer) • แถบแสดงสถานะ (Status Bar) คอยแสดงสถานะการทำงานต่างๆ ของเรา • แถบควบคุมการทำงาน (Properties Palette) เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการ เลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทำงานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลือกที่รูปภาพ  รายการในแถบนี้ ก็จะเป็นคำสั่งต่างๆ ที่เกี่ยวกับ การควบคุมเรื่องรูปภาพ • ส่วนของ Panel Group เป็นกลุ่มของแถบเครื่องมือที่สามารถเรียกใช้งานได้อย่างรวดเร็ว เพื่อให้ง่ายในการสร้าง  Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้อย่างง่ายๆ  โดยสามารถเรียกใช้งานได้จาก Panel Group