1

สร้างเว็บไซต์ด้วย Dreamweaver

วิธีใช้ Dreamweaver CS6

เกี่ยวกับ Dreamweaver

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

	นอกจากโปรแกรม Macromedia Dreamweaver จะออกแบบมาให้ใช้สร้างเว็บ อย่างง่ายดายแล้ว ยังเพิ่มคุณสมบัติต่าง ๆ ที่มีประสิทธิภาพ และเอื้อประโยชน์สำหรับผู้ทำเว็บอย่างเต็มที่ ไม่ว่าจะเป็นระบบการจัดการเกี่ยวกับ Site และการจัดเก็บไฟล์ นอกจากนี้ยังมีระบบช่วยจัดการเกี่ยวกับการ Upload ไฟล์ไปยังเซิร์ฟเวอร์อีกด้วย นอกจากนี้แล้วปัจจุบัน Macromedia Dreamweaver รุ่นใหม่ ๆ ยังสนับสนุนการใช้งานเว็บแบบไดนามิคเพิ่มมากขึ้น มีการรองรับสคริปภาษาต่าง ๆ เช่น CSS , Java Script , ภาษา XML และรองรับลูกเล่นเกี่ยวกับการทำภาพเคลื่อนไหว Gif Animation และสนับสนุนการใช้งาน Flash เพิ่มขึ้นอีกด้วย

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

ในอดีตโปรแกรม Macromedia Dreamweaver ถูกสร้างขึ้นโดยบริษัท แมโครมีเดีย แต่ปัจจุบันนี้ควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์ ดังนั้นเวอร์ชั่นที่ถูกพัฒนาขึ้นในภายหลัง จึงมีการใช้ชื่อใหม่ จากชื่อเดิม แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เปลี่ยนเป็น อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) การสร้าง Site เพื่อจัดเก็บไฟล์และโฟลเดอร์ ในการสร้างเว็บไซต์นั้น จะประกอบไปด้วยไฟล์ต่าง ๆ มากมาย ไม่ว่าจะเป็นไฟล์ HTML รูปภาพ และโฟลเดอร์ ซึ่งเราจะต้องมีการเตรียมการจัดเก็บส่วนประกอบเหล่านี้ เพื่อไม่ให้เกิดความสับสนในภายหลัง ซึ่งการสร้าง Site สามารถช่วยจัดการได้ ผู้ที่เริ่มต้นสร้างเว็บไซต์ใหม่ ๆ อาจจะคิดว่าการสร้างเว็บไซต์ไม่น่าจะยุ่งยากมากนัก รวมทั้งส่วนประกอบก็ไม่ได้สร้างความสับสน แต่จะเกิดปัญหาขึ้นได้ในภายหลังเมื่อคุณมีเว็บไซต์ที่ประกอบไปด้วยไฟล์จำนวน มากเพิ่มขั้น ซึ่งหากคุณไม่จัดเก็บให้ดี คุณจะได้เจอกับปัญหานี้แน่ ๆ ค่ะ เช่น เมื่อต้องการจะแก้ไขไฟล์ภาพสักภาพ คุณก็ต้องมาเสียเวลาคิดว่าไฟล์ที่ใช้งานในหน้านี้ ถูกจัดเก็บไว้ที่ไหน ชื่อไฟล์อะไร เป็นต้น บางครั้งแก้ไขเสร็จเซฟไว้คนล่ะที่ ทำให้เกิดปัญหาลิงค์ผิดพลาด หรือ บางทีลบไฟล์ หรือเซฟไฟล์ทับผิดที่ เป็นต้น เพราะฉนั้น เพื่อป้องกันปัญหายุ่งยากเหล่านี้ เราจึงต้องมีการวางแผนในการจัดเก็บไฟล์ต่าง ๆ ให้เป็นระเบียบ มีแบบแผน เช่น จากรูปข้างต้น จะเป็นตัวอย่างลักษณะการจัดเก็บไฟล์ที่ Webmaster กำหนดขึ้น ซึ่งข้อมูลของเว็บไซต์จะถูกเก็บอยู่ในโฟลเดอร์ชื่อ nextstepdev โดยภายในโฟลเดอร์นี้จะเป็นข้อมูลของเว็บ nextstepdev เท่านั้น ซึ่งจะประกอบไปด้วย ไฟล์ HTP และรูปภาพต่าง ๆ โดย Webmaster วางแผนให้ไฟล์ต่าง ๆ ที่เป็นไฟล์เกี่ยวกับเว็บถูกจัดเก็บอยู่ด้านนอกสุด และได้สร้างโฟลเดอร์เพื่อจัดเก็บรูปภาพโดยเฉพาะ คือ โฟลเดอร์ images สำหรับเก็บรูปภาพที่เป็นภาพที่เป็นโครงร่างของเพจ ส่วนโฟลเดอร์ imgs ถูกสร้างขึ้นมาเพื่อเก็บภาพที่เป็นภาพ ประกอบเนื้อหา เป็นต้น ซึ่งเมื่อเราวางแผนไว้แล้วแบบนี้ เมื่อมีการจัดเก็บไฟล์เพิ่มขึ้น หรือเรียกใช้งานไฟล์ เราก็จะสามารถใช้งานได้สะดวก เพราะจะทราบโดยอัตโนมัติ ว่าจะเซฟไฟล์ไว้ที่ไหน จะเรียกไฟล์จากที่ไหน เป็นต้น ซึ่งในโปรแกรม Macromedia Dreamweaver ก็มีส่วนที่สนับสนุนการจัดการเกี่ยวกับการจัดเก็บไฟล์และโฟลเดอร์อยู่ ซึ่งเราเรียกว่าการสร้าง Site เพื่ออำนวยความสะดวกในการสร้างเว็บไซต์ เวลาเรียกใช้งาน ก็จะสามารถเรียกใช้งานได้อย่างรวดเร็ว ซึ่งทุก ๆ ครั้งที่เรามีการสร้างเว็บไซต์ใหม่ เราควรจัดการสร้าง Sit ในโปรแกรม Macromedia Dreamweaver เป็นลำดับแรกก่อนค่ะ โดยมีขึ้นตอนในการสร้างดังนี้ค่ะ ขั้นตอนที่ 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 ของโปรแกรม (ติดตามอ่านได้ในบทความต่อไปค่ะ) ส่วนการแสดงผลทางบราวเซอร์ หากคุณไม่ได้กำหนดชนิดของฟอนต์ ขนาด สีของฟอนต์ และสีพื้นหลัง การแสดงผลจะขึ้นอยู่กับค่าดีฟอลต์ที่กำหนดไว้ที่เว็บบราวเซอร์ของผู้เยี่ยม ชมแต่ละคน การใช้งาน CSS Style กำหนดรูปแบบตัวอักษร การทำ เว็บเพจนั้นบางครั้ง เราจะต้องมีการทำงานหลาย ๆ อย่าง และบางครั้งก็ต้องทำซ้ำ ๆ หลาย ๆ ครั้ง ซึ่งจะทำให้เกิดความไม่สะดวก และทำให้เสียเวลาได้ ซึ่งโปรแกรม Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยแก้ปัญหานี้ จะมีวิธีแก้ปัญหาอย่างไร ดูได้ที่บทความนี้ค่ะ  จากปัญหาข้างต้นที่ได้กล่าวไป เพื่อน ๆ บางคนอาจจะยังไม่เห็นภาพชัดเจน ว่าอะไรบ้างที่เราต้องทำหลาย ๆ อย่าง และต้องทำซ้ำ ๆ หนึ่งในนั้นที่ 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 ก็มีลักษณะดังภาพด้านบนค่ะ ซึ่งก็ประกอบไปด้วยส่วนต่าง ๆ ตามที่เห็นในภาพค่ะ เอาละครับ เรามาเริ่มสร้าง CSS Style เพื่อกำหนดรูปแบบตัวอักษรและข้อความกันเลยค่ะ ขั้นตอนแรก ให้คุณคลิกที่ปุ่ม สร้างสไตล์ใหม่ ซึ่งอยู่บริเวณด้านล่าง (ตำแหน่ง สร้างสไตล์ใหม่ ตามรูปที่ 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 ที่เราได้สร้างขึ้นปรากฏให้เห็นค่ะ ขั้นตอนการสร้าง CSS Style ก็เสร็จเรียบร้อยแล้วค่ะ เดียวบทความหน้าเราจะมาเรียนรู้วิธีการใช้งาน CSS Style ที่เราได้สร้างไว้กันค่ะ ติดตามอ่านในบทความถัดไปค่ะ การเรียกใช้งาน CSS Style ที่ได้กำหนดไว้ บทความนี้เราจะมาเริ่มต้น ลองเรียกใช้งาน CSS Style ที่เราได้สร้างไว้ในบทความที่แล้ว มาดูกันค่ะว่าจะเรียกใช้งานกันอย่างไร แต่รับรองได้ค่ะว่าทได้ง่าย ๆ และรวดเร็วด้วยค่ะ จากบทที่แล้วเราได้สร้าง CSS Style ไว้แล้ว ซึ่งเป็น Style เกี่ยวกับตัวอักษรและข้อความ ทีนี้เราก็มาเริ่มต้นกันเลยค่ะ ขั้นตอนที่ 1 ให้เราสร้างข้อความขึ้นมาก่อนค่ะ โดยไม่ต้องกำหนดคุณสมบัติใด ๆ ของข้อความค่ะ แค่พิมพ์ข้อความธรรมดา ๆ ขั้นตอนที่ 2 หลังจากนั้นให้ใช้เมาท์ลากเพื่อเลือกข้อความ ตามภาพที่ 2 ค่ะ ขั้นตอนที่ 3 เลื่อนเมาส์มาที่บริเวณ ด้านล่าง ตรงส่วนของ Properties จากนั้นคลิกเลือกที่ชื่อ Style ตามภาพที่ 3 ค่ะ จากนั้นเลือก Style ตามชื่อที่เราได้สร้างไว้ ในบทความที่แล้วครับ เสร็จเรียบร้อยแล้วค่ะ เพียงแค่นี้ข้อความที่เราใช้ Style นี้ ก็จะเปลี่ยนคุณสมบัติตามค่าของ Style ที่เราได้กำหนดไว้ คือฟอนต์แบบ tahoma ขนาด 12 pixels และมีสีเทาดำ #333333 จากภาพผลลัพธ์ Webmaster สร้างสไตล์อีกชื่อ คือ tahoma_B12red คือสร้างสไตล์ ฟอนต์แบบ tahoma ขนาด 12 pixels และมีสีแดง #FF0000 และเป็นตัวหนา ซึ่งเมื่อเลือกใช้ Style ตัวนี้ก็จะได้ผลลัพธ์อย่างที่เห็นค่ะ การใส่สี Background ให้กับเว็บเพจ บทความนี้เป็นบทความ Basic ของการใช้โปรแกรม Dreamweaver เกี่ยวกับการใส่สีสันให้กับหน้าเว็บเพจ โดยการกำหนดสีพื้นหลัง (Background) ให้กับเว็บเพจ ซึ่งสามารถใส่สีให้กับพื้นหลังของเว็บเพจได้ง่าย ๆ ดังนี้ ขั้นตอนที่ 1 ให้เราเปิดโปรแกรม Dreamweaver ขึ้น มาก่อนค่ะ จากนั้นเราจะมาเริ่มต้นการใส่สีของหน้าเอกสาร Web Page โดยคลิกที่ Menu Bar ที่เมนู Modify --> Properties ตามภาพที่ 1 ค่ะ ขั้นตอนที่ 2 จากนั้นเมื่อปรากฏไดอะ ล็อกบ็อกซ์ Page Properties ขึ้น ให้ทำการเลือกสีที่ต้องการในตำแหน่ง Background ตามภาพที่ 2 จากนั้นคลิกปุ่ม OK เพียงแค่นี้ พื้นสีเว็บเพจของเพื่อน ๆ ก็จะเปลี่ยนเป็นสีตามที่ได้กำหนดไว้ในขึ้นตอนที่ 2 แล้วค่ะ  การใส่ลิงค์ให้ข้อความและรูปภาพ บทความนี้จะเป็นการใส่ลิงค์ให้กับข้อความและรูปภาพ โดยใช้โปรแกรม Dreamweaver ซึ่งสามารถทำได้ง่าย ๆ ดัง ขั้นตอนที่ 1 ให้ทำการสร้างไฟล์ใหม่ใน Dreamweaver ก่อนค่ะจากนั้นดึงภาพเข้ามาในโปรแกรม Dreamweaverสำหรับทำลิงค์แบบลิงค์รูปภาพ ตามตำแหน่งที่ 1 และการสร้างข้อความสำหรับเตรียมทำลิงค์แบบลิงค์ข้อความ ตามตำแหน่งที่ 2 ขั้นตอนที่ 2 เราจะมาเริ่มใส่ลิงค์ให้ กับข้อความและรูปภาพกันค่ะ ก่อนอื่น้เรามาทำลิงค์แบบรูปภาพกันก่อนค่ะ เริ่มต้นก็คลิกที่ภาพที่เราจะทำลิงค์ตามตำแหน่งที่ 1 ของรูปที่ 1 จากนั้นลองสังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ในส่วนของ Properties สังเกตบริเวณช่องที่มีชื่อว่า Link ตามภาพที่ 2 ในตำแหน่ง 1.1 หากต้องการลิงค์ไฟล์เอกสารเราสามารถลิงค์ได้โดยคลิกที่รูปแฟ้ม (ภายในวงกลม) เพื่อ Select File ที่ต้องการลิงค์ไปหา หรือหากเราจะลิงค์แบบลิงค์เว็บไซต์ เราก็สามารถพิมพ์ URL ของเว็บไซต์นั้น ๆ ลงในช่อง Link นี้ได้เลย ดังที่เห็นในภาพที่ 2 ซึ่งเป็นการลิงค์แบบลิงค์ไปเว็บไซต์ โดยตามตัวอย่างจะลิงค์ไปที่ http://www.thainextstep.com แบบที่ 2 การลิงค์แบบลิงค์ข้อความ หลังจากที่เราพิมพ์ข้อความแล้ว ให้เราทำการแด็กเมาส์ที่บริเวณข้อความที่เราต้องการทำลิงค์ ตามภาพที่ 1 ตำแหน่งที่ 2 เมื่อแด็กเมาส์ที่ข้อความแล้ว สังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ใน ส่วนของ Properties ตามภาพที่ 2.1 ซึ่งจะมีช่องที่ชื่อว่า Link อยู่เหมือนกัน วิธีการทำลิงค์ก็เหมือนกันกับแบบลิงค์ภาพค่ะ ซึ่งก็จะมีช่องให้ใส่ลิงค์ และปุ่มให้ Select File เพียงแค่นี้ ก็เสร็จแล้วค่ะ ลองเซฟไฟล์แล้วลอง test กันดูค่ะ ... เวลาเราเอาเมาส์ Over บนรูปและลิงค์ เมาส์พอยเตอร์ก็จะเปลี่ยนไป จากเป็นลูกศรก็จะกลายเป็นรูปมือแทน ถ้าได้ตามนี้ก็ลิงค์สำเร็จแล้วค่ะ การสร้างตารางใน Dreamweaver  บท ความนี้เราจะมาเริ่มต้นสร้างตารางให้กับเว็บเพจกันค่ะ ซึ่งเป็นบทความ Basic อีกบทความหนึ่ง ใครที่เริ่มต้นใช้งานโปรแกรม Deamweaver ก็เข้ามาดูกันได้ค่ะ ขั้นตอนที่ 1 ให้เราเปิดโปรแกรม Dreamweaver ขึ้นมาก่อนค่ะ จากนั้นเรามาเริ่มสร้างตารางให้เว็บเพจของเรากันเลยค่ะ โดยคลิกที่รูปตาราง ตามภาพที่ 1 ค่ะ ขั้นตอนที่ 2 จะปรากฏไดอะล็อกบีอก Insert Table ขึ้นมา ซึ่งในส่วนนี้จะเป็นส่วนกำหนดรายละเอียดของตารางที่เราต้องการจะสร้าง อันดับแรกก็คือกำหนดขนาดของตาราง โดยตามตัวอย่างจะขอสร้างตารางขนาด 3 แถว 3 คอลัมน์ โดยให้มาขนาดความกว้างของตารางเท่ากับ 300 pixels และกำหนดขอบของตารางให้เป็นแบบไม่มีขอบ เมื่อกำหนดได้ตามต้องการแล้วคลิกที่ปุ่ม OK และแล้วเราก็จะได้ตารางขนาด 3 แถว 3 คอลัมน์ และกว้าง 300 pixels หากเรา Save ไฟล์แล้วดูผลลัพธ์ ก็จะไม่เห็นอะไรใด ๆ ทั้งสิ้น เพราะเรากำหนดให้เป็นแบบไม่มีขอบ โดยส่วนใหญ่แล้วเราจะกำหนดให้เป็นแบบไม่มี ขอบ ในกรณีที่ใช้สำหรับจัดตำแหน่งของข้อความเนื้อหาซะเป็นส่วนใหญ่ และหากเราต้องการแบบให้แสดงผลด้วย เราก็จะต้องปรับแต่งรายละเอียดให้กับตารางด้วย ไม่ว่าจะเป็นการใส่เส้นขอบ การใส่สีขอบตาราง การใส่สีให้พื้นของตาราง และรวมไปถึงการใส่ภาพให้กับพื้นของตาราง  การปรับแต่งตาราง ด้วยการใส่สีพื้นและเส้นขอบ บท ความนี้เป็นบทความต่อจากบทความสอน Dreamweaver ในบทความที่แล้วค่ะ หลังจากที่บทความที่แล้วเราทำ Workshop Photoshop สร้างตารางได้แล้ว ในบทความนี้เราจะมาปรับแต่งตารางของเราโดยการเพิ่มสีสันให้พื้นตารางและเส้น ขอบ  ขั้นตอนแรก ก่อนอื่นเราต้องสร้างตารางขึ้นมาก่อนนะค่ะ จะกี่แถวกี่คอลัมน์ก็ได้ Webmaster ขอใช้ Table จากบทความ การสร้างตารางใน Dreamweaver ที่ได้สร้างไว้ในบทความที่แล้วนะค่ะ เมื่อสร้างตารางแล้ว หากเราไม่ได้กำหนดเส้นขอบตาราง (เหมือนบทความที่ผ่านมาตอนสร้าง Table กำหนด Border=0) ตั้งแต่เริ่มต้นสร้าง เมื่อเราจะใส่สีของเส้นขอบ ถ้าเราใส่สีไปจะทำให้ไม่เห็นสีของเส้นขอบตาราง ดังนั้นเราจึงต้องไปกำหนดเส้นขอบของตารางกันก่อน โดยการใช้เมาส์จับที่ตาราง จากนั้นกำหนดค่า Border ที่ส่วน Properties ให้มีค่าเท่ากับ 1 ดังที่ปรากฏตามภาพที่ 1 เมื่อเรากำหนด Border=1 แล้ว เส้นขอบของตารางจะเปลี่ยนไปดังภาพที่ 2 และ เมื่อทดสอบดูผ่าน Browser ก็ทำให้เราสามารถเห็นขอบของตารางได้ ขั้นตอนที่ 2 เมื่อเราได้เส้นขอบของ ตารางแล้ว ให้เราใช้เมาส์จับที่ที่ตาราง จากนั้น สังเกตที่ส่วนของ Properties แล้วคลิกเลือก Brdr Color เพื่อใส่สีให้กับเส้นของตาราง และเมื่อใส่สีแล้วก็จะได้เส้นขอบตารางเหมือนภาพที่ 3 ค่ะ ขั้นตอนที่ 3 ขั้นตอนนี้เราจะมาใส่สี ให้กับพื้นหลังของตารางกันค่ะ เริ่มต้นโดยให้เราใช้เมาส์จับที่ที่ตาราง จากนั้นใส่สีให้ Background ของตารางโดยคลิกเลือกสีที่ Bg Color ของ Properties จากนั้นคลิกเลือกสีที่ต้องการค่ะ และแล้วก็เสร็จเรียบร้อย ได้ผลลัพธ์ของการปรับแต่งตาราง ตามภาพที่ 4 ค่ะ การใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver การใส่คำอธิบายให้รูปภาพ ก็คือการใส่คำสั่ง ALT Tag ในภาษา HTLM นั่นเอง และเราสามารถใช้โปรแกรม Dreamweaver ในการใส่คำอธิบายให้รูปภาพได้ ซึ่งสามารถทำได้อย่างง่ายดายและรวดเร็ว ติดตามดูได้ในบทความนี้ค่ะ ขั้นตอนการใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver อย่างแรกเราก็ต้องนำภาพเข้ามาในโปรแกรม โดยคลิกที่ปุ่มที่ 1 เมื่อเราได้รูปภาพมาแล้วให้เรา คลิกที่รูปภาพตามรูปภาพที่ 2 จากนั้นสังเกตในส่วนบริเวณ Properties เราจะเห็นในส่วนของช่อง Alt ตามภาพที่ 3 ให้เราใส่คำอธิบายรูปภาพลงในช่อง Alt นี้ค่ะ แค่ นี้ก็เสร็จเรียบร้อยแล้วค่ะ ลองเซฟไฟล์เป็น HTML ไฟล์แล้วลองเปิดไฟล์ดู หรือจะกด F12 ดูเลยก็ได้ค่ะ เมื่อเราเลื่อนเม้าส์ไปบนรูปภาพ เราก็จะเห็นคำอธิบายของรูปภาพ ตามที่เรากำหนดไว้ค่ะ เพิ่มอักขระพิเศษใน Dreamweaver ในการทำเว็บเพจ บางครั้งเราอาจจะต้องใส่อักขระพิเศษต่าง ๆ ซึ่งทาง Dreamweaver เค้าก็เตรียมเครื่องมือในส่วนนี้ไว้ให้เราใช้อยู่แล้วค่ะ ทำได้อย่างไรเข้ามาดูได้ที่บทความนี้ค่ะ สำหรับตัวอย่างอักขระที่เราจะมาลองใส่กันวันนี้ ก็คือ Copyright ที่มีลักษณะตามภาพฝั่งซ้ายมือ วิธีทำก็ไม่อยากค่ะ โดยทำได้ดังนี้ ก่อนอื่นก็ให้พิมพ์ข้อความขั้นมาก่อนนะค่ะ จากนั้นให้วางเคอเซอร์ตรงตำแหน่ง X จากนั้นไปที่บริเวณเมนูบาร์ เลือกใช้คำสั่ง Insert --> Special Charecters --> Copyright ก็จะได้ผลลัพธ์ตามภาพด้านล่างค่ะ เทคนิคการทำภาพ Swap Image สำหรับบทความนี้ เราจะมาทำเทคนิคการ Swap Image เพื่อเพิ่มความน่าสนใจให้กับการลิงค์รูปภาพบนเว็บ นอกจากนี้สามารถนำไปประยุกต์ ทำให้เว็บไซต์ดูดี แต่จะประยุกต์แบบไหน ดูไอเดียการทำได้ที่นี่ค่ะ เทคนิคนี้ทได้ไม่อยากค่ะ เพราะเป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver ... เราจะทำเทคนิคนี้ได้นั้น ก่อนอื่นต้องเตรียมไฟล์รูปภาพไว้ก่อน 2 ภาพค่ะ ในบทความนี้ Webmaster เตรียมภาพไว้ 2 ภาพตามรูปด้านบนค่ะ จากนั้นเมื่อเราได้รูปภาพมา 2 รูปแล้ว เราก็จะมาเริ่มทำกันเลยค่ะ ขั้นตอนที่ 1 ก็ให้ทำการสร้างไฟล์ใหม่ใน Dreamweaver เลยค่ะ ขั้นตอนที่ 2 ให้ทำการดึงรูปเข้ามาใน โปรแกรม โดยการที่ตำแหน่ง A ตามภาพค่ะ จากนั้นจะมีไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพแรกที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง C ขั้นตอนที่ 3 เมื่อได้รูปมาแล้ว ให้ทำการคลิกที่รูป จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม เลือกแท็บ Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image ขั้นตอนที่ 4 จะปรากฏไดอะล็อกบ็อก Swap Image ให้ทำการคลิก Browse... ตามตำแหน่งที่ 1 จากนั้นจะปรากฏไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพอีกภาพที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง 2 จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ 3 ขั้นตอนที่ 5 ทำการบัญทึกหน้าเว็บเพจ เป็นเอกสาร .html หรือ .htm แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ ลองเรียกไฟล์ที่บันทึกไว้ มาดูสิค่ะ ว่าได้ผลลัพธ์อย่างไร...? สำหรับคนที่ทำตามขึ้นตอนต่าง ๆ ข้างต้นมาหมดแล้วก็คงจะได้ทราบแล้วนะค่ะ ว่าได้ผลลัพธ์อย่างไร สำหรับคนที่ยังไม่ได้ลงมือทำก็ลองทำตามดูค่ะ แล้วจะได้เทคนิคไปทำเว็บของคุณให้สวยขึ้นอีกแบบ อ้างอิง : http://papillon-dreamweaver.blogspot.com/2014/02/dreamweaver-cs6.html