เริ่มต้นใช้งานด้วยโปรแกรม Adobe Dreamweaver CS6 Show
ประวัติความเป็นมาของโปรแกรม Dreamweaver Adobe Macromedia Dreamweaver ผู้พัฒนา อะโดบีซิสเต็มส์ (เริ่มพัฒนาโดย แมโครมีเดีย) รุ่นเสถียร ล่าสุด CS4 (10.0) รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550) อะโดบี ดรีมวีฟเวอร์ (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 ความสามารถของ Dreamweaver 1. สนับสนุนการทํางานแบบ WYSIWYG (What You See Is What You Get) หมายความวาอะไรก็ตามที่เราทํา บนหนาจอ Dreamweaver ก็จะปรากฎผลแบบเดียวกันบนเว็บเพจ ซึ่งชวยใหการสรางและแกไขเว็บเพจนั้นทําได งาย โดยไมตองมีความรูภาษา HTML เลย 2. มีเครื่องมือในการสรางรูปแบบหนาจอเว็บเพจ ซึ่งชวยอํานวยความสะดวกใหผูใชงานไดมาก 3. สนับสนุนภาษาสคริปตตางๆ เชน Java,ASP,PHP,CGI,VBScript 4. มีเครื่องมือที่ชวยในการ upload หนาเว็บที่สรางไปที่ server เพื่อทําการเผยแพรงานที่สรางบน internet 5. รองรับการใชมัลติมีเดียตางๆ เชน เสียง กราฟก และภาพเคลื่อนไหว ที่สรางโดยโปรแกรม Flash, Shockwave, Firework เปนตน 6. มีความสามารถทําการติดตอกับฐานขอมูล เพื่อเชื่อมตอกับเว็บไซต การเปิดโปรแกรม วิธีที่ 1 คลิก start -> All Programs -> Adobe Dreamweaver CS6 ดังตัวอย่างด้านล่าง วิธีที่ 2 ดับเบิลคลิกไอคอน ที่หน้าจอ Desktop
ส่วนประกอบของ welcome screen หลังจากเปิดโปรแกรมขึ้นมาจะปรากฏหน้าต่าง welcome screen ซึ่งแบ่งออกเป็น 3 กลุ่มหลัก ดังภาพด้านล่าง ดังนี้ A. เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน B. สร้างงานใหม่ (create new) ใช้สำหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์งานได้หลายชนิด ไม่ว่าจะเป็น ไฟล์ html, php, asp,หรือ JavaScript C. สร้างงานสำเร็จรูป (create from samples) สร้างเว็บเพจใหม่โดยใช้ไฟล์ตัวอย่าง ที่โปรแกรมจัดเตรียมเอาไว้ให้ 2. สีเหลือ คือ แถบเครื่องมือ (Insert Bar) เป็นแหล่งรวมเครื่องมือซึ่งใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้าเว็บเพจ เช่น ข้อความ รูปภาพ ลิงค์ รูปเคลื่อนไหว เป็นต้น โดยจะแบ่งเป็นกลุ่มคำสั่งเพื่อให้ใช้งานได้สะดวก ซึ่งจะประกอบด้วยกลุ่มคำสั่งดังนี้ - Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น - Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element - Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟร์อมรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น - Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ - Sary ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax - jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery - InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้ - Text ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น - Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความสะดวกในการใช้งาน 3.สีแดง คือ พื้นที่สร้างงาน (Document area) เป็นส่วนที่ใช้สร้างหน้าเว็บเพจ ใส่เนื้อหา และองค์ประกอบต่าง ๆ ของเว็บเพจ ซึ่งสามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง - มุมมองออกแบบ (Design View) ใช้แก้ไขและจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจ - มุมมองโค้ด (Code View) ใช้สำหรับเปิดดูคำสั่งต่าง ๆ เช่น HTML PHP ASP และ JSP และสามารถแก้ไขคำสั่งต่าง ๆ ได้ตามต้องการ - มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) แสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ดพร้อมกัน สามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยคลิกลากที่เส้นแบ่งระหว่างทั้ง 2 ส่วนนี้ - มุมมองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดูบนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin 4.สีฟ้า คือ หน้าต่าง properties inspector เป็นหน้าต่างเล็ก ๆ ที่อยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้งานมากที่สุด เนื่องจากเป็นส่วนที่ใช้กำหนดคุณสมบัติสำคัญ ๆ ของออบเจ็กต์ที่วางในหน้าเว็บเพจ เช่น ตำแหน่ง ขนาด และสี 5. สีน้ำตาล คือ กลุ่มหน้าต่างพาเนล (Panels) เป็นหน้าต่างเล็ก ๆ ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ที่เกี่ยวข้อง ทำให้ใช้งานได้สะดวกขึ้น 6. สีเขียว คือ แถบสถานะ (Status Bar) เป็นแถบที่อยู่ทางด้านล่างของหน้าต่าง ๆ Document ประกอบด้วย 2 ส่วน คือ ด้านซ้ายเป็น Tag Selector ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ หลักสำคัญก่อนการสร้างเว็บเพจ 1. เลือกรูปแบบพื้นที่ทำงาน(Workspace) ให้เหมาะสม 3. เตรียมโฟลเดอร์สำหรับสร้างเว็บไซต์ 4. สร้าง Define Site เพื่อจัดระบบให้ข้อมูล การบันทึกเว็บเพจ 1.คลิกเลือกคำสั่ง File - > Save (หรือกดคีย์ลัด Ctrl+S) - ถ้าต้องการบันทึกเว็บเพจเดิมให้เป็นชื่อใหม่ เลือกคำสั่ง Save As - ถ้าต้องการบันทึกเว็บเพจทั้งหมดที่เปิดใช้งานอยู่ เลือกคำสั่ง Save All
2. เปิดเข้าไปยังโฟลเดอร์หลักที่จัดเก็บเว็บไซต์และโฟลเดอร์ย่อยที่จะใช้เก็บไฟล์ 3. ตั้งชื่อไฟล์ที่ต้องการ (กรณีหน้าแรกของเว็บไซต์ ต้องตั้งเป็น Index.html เท่านั้น นอกจากนั้นตั้งชื่อตามชนิดของไฟล์งาน) 4. เลือกประเภทไฟล์ที่จะบันทึกเป็น html โปรแกรม Adobe Dreamweaver CS6 จะต้องติดตั้งบนระบบปฏิบัติการรุ่นใดความต้องการของระบบ การติดตั้งโปรแกรม Adobe Dreamweaver CS6 บนระบบปฏิบัติการ Windows ให้สามารถใช้งานได้นั้น จะต้องมีองค์ประกอบของฮาร์ดแวร์และระบบปฏิบัติการดังนั้น 1. หน่วยประมวลผลกลาง (CPU) Intel Pentium 4 หรือ AMD Athlon 64 2. หน่วยความจา (RAM) 512 MB ขึ้นไปฮาร์ดดิสก์มีพื้นที่ว่าง 1 GB ขึ้นไป Page 13 โปรแกรมออกแบบและ ...
โปรแกรม Dreamweaver CS6 เหมาะสำหรับการทำงานประเภทใดAdobe Dreamweaver CS6 เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ และเหมาะสมสำหรับนักพัฒนาเว็บไซต์มือใหม่ โดยสามารถนำรูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกยังเพิ่มลูกเล่นต่าง ๆ เช่น เสียง ภาพเคลื่อนไหว วีดิโอ ซึ่งไม่จำเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถสร้างเว็บไซต์ได้
Adobe Dreamweaver CS6 ใช้สร้างอะไรAdobe Dreamweaver คือโปรแกรมทำเว็บ แก้ไข HTML สำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรมที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่างจากโปรแกรมอื่นๆ ในประเภทเดียวกัน Dreamweaver สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ...
ข้อใดคือการเข้าสู่โปรแกรม Adobe Dreamweaver CS6เริ่มต้นใช้งาน Dreamweaver
ขั้นตอนการเรียกเปิดโปรแกรม Dreamweaver ขึ้นมาใช้งานมีขั้นตอนดังนี้ 1. คลิก Start > All Programs > Adobe Dreamweaver CS6. รูปที่1 แสดงขั้นตอนการเข้าสู่โปรแกรม Page 2 2 ขั้นตอนการเรียกเปิดใช้งาน Site (folder) ขึ้นมาใช้งานมีขั้นตอนดังนี้ 1. Site > New site > Browse for folder > Select > Save > ...
|