ปัจจุบัน โปรแกรม dreamweaver ใช้ ชื่อ เต็ม ว่า อะไร

• ที่กล่าวมาข้างต้น เป็นคุณสมบัติและความสามารถของโปรแกรมตัวเก่งตัวนี้ ซึ่งสามารถครองใจผู้ทำเว็บมาอย่างยาวนาน ตั้งแต่เริ่มต้นก่อตั้ง ซึ่งจากอดีตจนถึงปัจจุบัน Macromedia Dreamweaver มีออกมาแล้วหลายเวอร์ชั่น ซึ่งมีทั้งหมดดังนี้
• Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997)
• Dreamweaver 1.2 (มีนาคม ค.ศ. 1998)
• Dreamweaver 2.0 (ธันวาคม ค.ศ. 199
• 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 (9.0) รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550)

ในอดีตโปรแกรม Macromedia Dreamweaver ถูกสร้างขึ้นโดยบริษัท แมโครมีเดีย แต่ปัจจุบันนี้ควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์ ดังนั้นเวอร์ชั่นที่ถูกพัฒนาขึ้นในภายหลัง จึงมีการใช้ชื่อใหม่ จากชื่อเดิม แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เปลี่ยนเป็น อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver)

​

​

​

• การสร้าง Site เพื่อจัดเก็บไฟล์และโฟลเดอร์
• ในการสร้างเว็บไซต์นั้น จะประกอบไปด้วยไฟล์ต่าง ๆ มากมาย ไม่ว่าจะเป็นไฟล์ HTML รูปภาพ และโฟลเดอร์ ซึ่งเราจะต้องมีการเตรียมการจัดเก็บส่วนประกอบเหล่านี้ เพื่อไม่ให้เกิดความสับสนในภายหลัง ซึ่งการสร้าง Site สามารถช่วยจัดการได้

​

• ผู้ที่เริ่มต้นสร้างเว็บไซต์ใหม่ ๆ อาจจะคิดว่าการสร้างเว็บไซต์ไม่น่าจะยุ่งยากมากนัก รวมทั้งส่วนประกอบก็ไม่ได้สร้างความสับสน แต่จะเกิดปัญหาขึ้นได้ในภายหลังเมื่อคุณมีเว็บไซต์ที่ประกอบไปด้วยไฟล์จำนวน มากเพิ่มขั้น ซึ่งหากคุณไม่จัดเก็บให้ดี คุณจะได้เจอกับปัญหานี้แน่ ๆ ค่ะ เช่น เมื่อต้องการจะแก้ไขไฟล์ภาพสักภาพ คุณก็ต้องมาเสียเวลาคิดว่าไฟล์ที่ใช้งานในหน้านี้ ถูกจัดเก็บไว้ที่ไหน ชื่อไฟล์อะไร เป็นต้น บางครั้งแก้ไขเสร็จเซฟไว้คนล่ะที่ ทำให้เกิดปัญหาลิงค์ผิดพลาด หรือ บางทีลบไฟล์ หรือเซฟไฟล์ทับผิดที่ เป็นต้น
  เพราะฉะนั้น เพื่อป้องกันปัญหายุ่งยากเหล่านี้ เราจึงต้องมีการวางแผนในการจัดเก็บไฟล์ต่าง ๆ ให้เป็นระเบียบ มีแบบแผน เช่น จากรูปข้างต้น จะเป็นตัวอย่างลักษณะการจัดเก็บไฟล์ที่ Webmaster กำหนดขึ้น ซึ่งข้อมูลของเว็บไซต์จะถูกเก็บอยู่ในโฟลเดอร์ชื่อ nextstepdev โดยภายในโฟลเดอร์นี้จะเป็นข้อมูลของเว็บ nextstepdev เท่านั้น ซึ่งจะประกอบไปด้วย ไฟล์ HTP และรูปภาพต่าง ๆ

• ขั้นตอนที่ 1 คลิกเลือกคำสั่ง Site --> Manage Sites... จาก Menu Bar
• ขั้นตอนที่ 2 จะปรากฏไดอะล็อกบ็อกซ์ Manage Site ให้ทำการคลิกที่ปุ่ม New... จากนั้นเลือก Site

​

• ขั้นตอนที่ 3 รอสักครู่จะปรากฏไดอะล็อกบ็อกซ์ Site Definition ให้ทำการตั้งชื่อไซต์ ในช่อง Site name

​

• ขั้นตอนที่ 4  ระบุโฟลเดอร์ที่จะใช้ใน การจัดเก็บเว็บไซต์ โดยการคลิกที่รูปโฟลเดอร์ ที่บริเวณ Local root folder ซึ่งจะมีไดอะล็อกบ็อกซ์ใหม่เพิ่มมา ให้เลือกไปยังโฟลเดอร์ที่เราจะจัดเก็บข้อมูล จากนั้น คลิกปุ่ม Select (เลือกไปยังโฟลเดอร์ที่จะจัดเก็บเว็บไซต์ โดยต้องสร้างโฟลเดอร์นี้ไว้ก่อน จากตัวอย่าง Webmaster สร้างโฟลเดอร์ชื่อ nextstepdev ไว้ที่ C:\ AppServ\www ดังนั้น Webmaster จึงเลือกเข้าไปในโฟลเดอร์ชื่อ nextstepdev แล้วจึงกดปุ่ม Select

• ขั้นตอนที่ 5  เมื่อระบุโฟลเดอร์สำหรับเก็บข้อมูลเรียบร้อยแล้ว คลิกปุ่ม OK

​

• ขั้นตอนที่ 6 จะปรากฏชื่อ Site name ที่เราสร้างขึ้นในหน้าต่าง Manage Site ดังภาพ จากนั้นให้เราคลิกปุ่ม Done

​

• แค่นี้ก็เรียบร้อยแล้วค่ะ Site ที่เราสร้างขึ้น จะปรากฏขึ้นที่บริเวณ File Panel ทางด้านขวามือ ดังภาพ

​

• การกำหนดคุณสมบัติพื้นฐานของเว็บเพจ

ก่อนที่เราจะเริ่มต้นสร้างเว็บเพจ หลังจากเราได้สร้างไฟล์ใหม่แล้ว เราควรกำหนดคุณสมบัติ พื้นฐานให้กับหน้าเว็บเพจของเราก่อน เพื่อใช้เป็นค่าเริ่มต้นในการทำเว็บเพจของเพจนั้น

• คุณสมบัติพื้นฐานหรือค่าเริ่มต้นของเว็บเพจ ซึ่งเราจะต้องเริ่มกำหนดก่อนทำเว็บ ได้แก่ การกำหนดค่าของฟอนต์ ขนาดของฟอนต์ สีของข้อความ สีของพื้นหลัง เป็นต้น

​

• ซึ่งมีวิธีกำหนดค่าคุณสมบัติพื้นฐานของเว็บเพจ ดังนี้
• ขั้นตอนแรก คลิกที่เมนูModify --> Page Propertiesจะมีไดอะล็อกบ็อกซ์

ปรากฏขึ้น

​

​

• ขั้นตอนที่ 2 กำหนดค่าในส่วนของ Appearance ซึ่งจะประกอบไปด้วย รายละเอียดที่ต้องกำหนดดังนี้

1. ข้อมูลเกียวกับลักษณะของข้อความ ที่จะปรากฏทางหน้าเว็บเพจ เช่น จะเป็นฟอนต์อะไร ขนาดเท่าไหร่ สีอะไรเป็นต้น

2. ข้อมูลเกี่ยวกับพื้นหลังของเว็บเพจ ซึ่งสามารถกำหนดได้ ว่าต้องการให้พื้นหลังของเว็บเพจเป็นสีอะไร หรือหากไม่กำหนดเป็นสีก็สามารถกำหนด เป็นพื้นหลังแบบรูปภาพก็ได้

3. ส่วนของระยะขอบของเว็บเพจ ซึ่งหากคุณไม่ได้กำหนดไว้ ค่าเริ่มต้นของเว็บเพจของคุณจะมีลักษณะเว้นว่างบริเวณขอบทั้งสี่ด้าน หากไม่ต้องการให้มีขอบให้กำหนดค่า margin ทั้งสี่ด้านให้เท่ากับ 0

​

​

​

​

ขั้นตอนที่ 3 เมื่อกำหนดเรียบร้อยแล้ว ให้ทำการคลิกปุ่ม OK เพจของคุณก็จะมีคุณสมบัติตามค่าเริ่มต้น ที่คุณได้กำหนดค่าไว้

คุณสมบัติส่วนนี้ หากคุณไม่ได้กำหนดไว้ ชนิดของฟอนต์และขนาด ที่แสดงผลใน Dreamweaver จะถูกแสดงผลตามค่าดีฟอลต์ที่คุณได้กำหนดที่ในส่วPreferences ของโปรแกรม (ติดตามอ่านได้ในบทความต่อไปค่ะ)

​

​

​

• จากปัญหาข้างต้นที่ได้กล่าวไป เพื่อน ๆ บางคนอาจจะยังไม่เห็นภาพชัดเจน ว่าอะไรบ้างที่เราต้องทำหลาย ๆ อย่าง และต้องทำซ้ำ ๆ หนึ่งในนั้นที่ Webmaster จะขอยกตัวอย่างให้เห็นกันชัด ๆ ก็คือ เกี่ยวกับการพิมพ์ข้อความ
  การพิมพ์ข้อความนั้นเราต้องปรับแต่งคุณสมบัติ ของข้อความอยู่หลาย ๆ อย่างด้วยกัน ไม่ว่าจะเป็นการปรับเลือกฟ้อนต์ เลือกขนาดของข้อความ เลือกสีของข้อความ เห็นไหมละค่ะ เราต้องปรับค่าตั้ง 3 ครั้ง ถึงจะได้ลักษณะรูปแบบข้อความที่เราต้องการ แล้วเมื่อเราต้องพิมพ์ข้อความหลาย ๆ ข้อความ หลาย ๆ ตำแหน่ง เราก็ต้องมาทำขั้นตอนที่กล่าวมาซ้ำ ๆ อีก
• เพื่อแก้ไขปัญหานี้ Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยลดขั้นตอนการทำงานซ้ำ ๆ แบบที่กล่าวมา โดยแค่กำหนดค่าไว้ที่ CSS Style แล้วเรียกใช้ CSS Style แค่เพียงครั้งเดียวก็เป็นอันเสร็จเรียบร้อยค่ะ
  

• ก่อนจะไปพบวิธีการสร้าง CSS Style เรามารู้จัก CSS Style กันสักหน่อย CSS Style ย่อมาจาก Cascading Style Sheets เป็นเครื่องมือที่ช่วยกำหนดคุณสมบัติของสิ่งต่าง ๆ ในหน้าเว็บเพจ ไม่ว่าจะเป็นการกำหนดคุณสมบัติของฟอนต์ เช่น ลักษณะของฟอนต์ ขนาด กำหนดคุณสมบัติของสี เกี่ยวกับพื้นหลัง เกี่ยวกับตาราง และอื่น ๆ อีกมากมาย รูปร่างหน้าตา CSS Style ใน Macromedia Dreamweaver Mx 2004 ก็มีลักษณะดังภาพด้านบนค่ะ ซึ่งก็ประกอบไปด้วยส่วนต่าง ๆ ตามที่เห็นในภาพค่ะ
  

• ขั้นตอนแรก ให้คุณคลิกที่ปุ่ม สร้างสไตล์ใหม่ ซึ่งอยู่บริเวณด้านล่าง (ตำแหน่ง สร้างสไตล์ใหม่ ตามรูปที่ 1 ค่ะ)
  ขั้นตอนที่ 2 ถ้าทำขั้นตอนแรกถูกต้อง คุณก็จะเจอไดอะล็อกบ็อกซ์ New CSS Style ตามภาพที่ 2 ค่ะ ให้คุณทำการตั้งชื่อของ Style ที่ช่อง Name ต้องตั้งชื่อให้สื่อความหมายนะค่ะ เพราะชื่อนี้จะปรากฏให้เราเลือกเมื่อต้องการใช้งาน ตั้งให้สื่อความหมายจะได้จำได้ (บางครั้งเราก็สร้าง Style หลาย ๆ ตัวค่ะ สร้างเยอะถ้าชื่อไม่สื่อความหมายเดียวจะลืมเอาได้)
  Webmaster ตั้งชื่อ Style ว่า "tahoma_12" เพราะจะสร้างรูปแบบฟอนต์ที่ใช้ฟอนต์แบบ tahoma และจะกำหนดขนาดฟอนต์เท่ากับ 12 pixels
  เมื่อตั้งชื่อและกำหนดรายละเอียดตามภาพแล้ว กด OK

​

• ขั้นตอนที่ 3 จะปรากฏไดอะล็อกบ็อกซ์ เพื่อให้ทำการเซฟ Style Sheets ให้ทำการตั้งชื่อ Style Sheets จากนั้นเซฟไว้ในโฟลเดอร์ Site งานที่กำหนดไว้สำหรับเก็บข้อมูลเว็บไซต์ที่เราจะสร้างขึ้น
  

• ขั้นตอนที่ 4 เมื่อเราได้เซฟ Style Sheets เรียบร้อยแล้วจะมีไดอะล็อกบ็อกซ์ปรากฏขึ้น เพื่อให้เรากำหนดลักษณะของ Style Sheets ในที่นี้เราจะกำหนดลักษณะของตัวอักษรและข้อความ ดังนั้นให้เลือก Type

  สังเกตบริเวณทางขวามือ จะมีลักษณะของ Type ให้เรากำหนด ซึ่ง Webmaster ก็ได้กำหนดฟอนต์แบบ tahoma และกำหนดขนาดฟอนต์เท่ากับ 12 pixels และกำหนดสีของฟอนต์ เป็น รหัสสี #333333 และเลือกเป็นแบบตัวอักษรแบบธรรมดา เมื่อกำหนดค่าต่าง ๆ เรียบร้อยแล้วก็กดปุ่ม OK

• เพียงแค่นี้เราก็สร้าง Style Sheets ได้แล้วค่ะ สังเกตที่บริเวณ CSS Style จะปรากฏชื่อ Style Sheets ที่เราสร้างขึ้น พร้อมทั้งรายละเอียดลักษณะของสไตล์ และที่บริเวณ File Panel ก็จะปรากฏไฟล์ CSS Style ที่เราได้สร้างขึ้นปรากฏให้เห็นค่ะ

​

นางสาวศุภิสรา ใหมอ่อน เลขที่ 33 ปวส.2

แผนกคอมพิวเตอร์ธุรกิจ

จบการนำเสนอ...ขอบคุณค่ะ