ข้อมูลเบื้องต้นของเรื่องนี้หน้าแรก
ผมอยากจะแนะนำวิธีการใช้งานขั้นพื้นฐานของโปรแกรม Dreamweaver เวอร์ชั่นล่าสุดซึ่งก็คือเวอร์ชั่น CS3 โดยผมนำบทความชิ้นนี้มาแปลและเรียบเรียงใหม่ให้เหมาะสมกับภาษาไทยมากขึ้น จาก http://www.vineyardesigns.com/resources/dreamweaver/ โดยจะแบ่งเป็น 10 ตอนและ 3 โปรเจ็คสำหรับฝึกทำเว็ปไซด์แบบต่างๆ เวลาในการแปลและเรียบเรียงให้เสร็จทั้งหมดนี้คงจะประมาณหนึ่งอาทิตย์ ผมจะโพสตอนใหม่ๆเพิ่มขึ้นเรื่อยๆ หลังจากที่ผมทำเสร็จในแต่ละตอนแล้ว ถ้าคุณสนใจเรียนก็เข้ามาเช็คดูได้เรื่อยๆครับ
Dreamweaver CS3 เป็นโปรแกรมที่ดีตัวหนึ่งในการใช้สร้างเว็ปไซด์ มันเป็นโปรแกรมในแบบ WYSIWYG หรือ What you see is what you get หมายถึงถ้าคุณเห็นรูปแบบของหน้าเว็ปที่คุณออกแบบเป็นแบบไหนเวลาที่อยู่ในโปรแกรม มันก็จะออกมาเป็นแบบนั้นในบราวเซอร์หรือโปรแกรมที่ใช้ดูหน้าเว็ป มันช่วยให้คุณสร้างหน้า html ได้ โดยที่คุณไม่จำเป็นต้องรู้ code html เลย คุณสามารถ download โปรแกรมเพื่อทดลองใช้ภายใน 30 วันได้จาก link นี้ http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver
แต่ก่อนที่คุณจะสร้างเว็ปไซด์ใน Dreamweaver CS3 คุณควรจะทำสิ่งเหล่านี้ก่อน
- คิดว่าคุณจะใช้ web hosting ที่ไหนในการ upload เว็ปไซด์ของคุณ จะเอาแบบที่ฟรีหรือเสียเงิน ซึ่งก็แน่นอนว่าแบบที่เสียเงินจะดีกว่า ข้อเสียก็คือคุณต้องจ่ายตัง แต่ถ้าคุณคิดว่าจะลองทำเว็ปไซด์เล่นดูก่อน คุณก็ลองใช้บริการแบบฟรีไปก่อน ผมไปอ่านในเว็ปบอร์ดมีคนแนะนำเว็ปนี้ http://www.yourname.or.hn/995.tik?main=hosting&lang=th เป็น hosting ของไทยที่ฟรีและไม่มีโฆษณา แต่ผมไม่เคยใช้บริการน่ะครับเลยไม่รู้ว่าดีหรือเปล่า ส่วนบริษัทที่จะรับ host เว็ปไซด์คุณก็ลองหาใน google ดูครับ หลังจากนั้นคุณก็ต้องซื้อ domain name หรือชื่อของเว็ปไซด์ เช่น google.com ซึ่งส่วนใหญ่แล้วบริษัทที่รับ host เว็ปไซด์ก็จะมีบริการนี้อยู่ จริงๆแล้วมันน่าจะเรียกว่าเช่ามากกว่าเพราะคุณต้องเสียค่าบริการเป็นปี แต่ถ้าคุณใช้ host แบบฟรีและยังไม่ได้จดชื่อ domain คุณก็ใช้ชื่อที่เป็นแบบ Sub-domain หรือ Sub-directory ไปก่อน เช่น http://yourname.exteen.com หรือ http://exteen.com/yourname ซึ่งก็ใช้ได้ทั้งสองอย่าง แล้วแต่ว่าบริษัทที่ host เว็ปคุณจะให้ตั้งแบบไหน
- หลังจากนั้นคุณก็ต้องคิดว่าเว็ปไซด์ของคุณจะเกี่ยวกับอะไร มีกี่หน้า แล้วก็ออกแบบหน้าตาของเว็ปไซด์ โดยใช้โปรแกรมที่ใช้ทำกราฟฟิค เช่น โฟโต้ช็อป แล้วคุณก็ควรเตรียมรูปที่จะเอาใส่ไว้ในหน้าเว็ปที่เป็น gif หรือ jpg และถ้าไซด์คุณจะมี Flash animation คุณก็ควรทำไฟล์เตรียมเอาไว้ด้วย
นี่คือตอนและโปรเจ็คต่างๆที่เราจะมาเรียนรู้ในการใช้งานขั้นพื้นฐานของโปรแกรม Dreamweaver CS3
ตอนที่ 01 : การ define site ใหม่ใน Dreamweaver
ตอนที่ 02 : การสร้าง Dreamweaver Template
ตอนที่ 03 : การสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template
ตอนที่ 04 : การสร้าง CSS Style Sheet
ตอนที่ 05 : การใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ
ตอนที่ 06 : การสร้าง Libraries หรือ Server Side Includes
ตอนที่ 07 : การกำหนด Editable Regions ใน Template
ตอนที่ 08 : การสร้างหน้า Html ในเว็ปไซด์ทั้งในหน้าที่เป็นส่วนของเนื้อหาและหน้าที่เป็นฟอร์ม
ตอนที่ 09 : การสร้าง link ในหน้าเว็ป
ตอนที่ 10 : การทดสอบการใช้งานของเว็ปไซด์และการ upload เว็ปไซด์ไปยัง Server ที่ host เว็ปไซด์ของคุณ
โปรเจ็ค 01 : การสร้างรูปแบบของหน้าเว็ปโดยใช้ Table
โปรเจ็ค 02 : การสร้างรูปแบบของหน้าเว็ปโดย DIV/CSS แทนการใช้ Table
โปรเจ็ค 03 : การสร้างเว็ปไซด์ที่มี Server Side Includes
เอาละครับ ตอนด่อไปเราจะพูดถึงเรื่อง การ define site ใหม่ใน Dreamweaver
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
เอาละครับ ผมเพิ่งกลับมาจากการเที่ยวต่างจังหวัด ตอนนี้เราก็จะเริ่มการเรียนรู้การใช้งานขั้นพื้นฐานต่อไปเลยครับ อ้อ ! ขอบคุณสำหรับข้อความที่โพสกันมาน่ะครับ เป็นกำลังใจให้ผมอย่างมากในการทำเรื่องนี้ให้จบเร็วที่สุด ผมจะพยายามตอบคำถามที่ถามกันมาให้ได้มากที่สุดน่ะครับ เรามาเริ่มเรียนต่อกันเลยครับถ้าหน้าเว็ปส่วนใหญ่ที่อยู่ในเว็ปไซด์คุณมีลักษณะคล้ายๆกัน ผมอยากจะแนะนำให้ใช้ Template ใน Dreamweaver เพื่อใช้สร้างต้นแบบของหน้าเว็ป
ข้อดีของการสร้าง Template ใน Dreamweaver เพื่อเป็นต้นแบบของหน้าเว็ป :
- ทุกหน้าที่ใช้ Template เดียวกันเป็นต้นแบบในการสร้างจะมีล้กษณะคล้ายกัน
- ถ้าคุณต้องการจะเปลี่ยนรูปแบบของหน้าตาของหน้าเว็ปในทั้งเว็ปไซด์ของคุณ ถ้าคุณใช้ Template ตัวเดียวกัน ในการสร้างหน้าเว็ปทั้งไซด์ คุณก็แค่เปลี่ยนแปลงรูปแบบของ Template ตัวนั้น Dreamweaver ก็จะมีตัวเลือกให้ update ทุกหน้าที่ใช้ Template ตัวนั้น รูปแบบของหน้าเว็ปทุกหน้าในไซด์คุณก็จะเปลี่ยนแปลงไปโดยอัตโนมัติ
ไฟล์ Template ใน Dreamweaver จะมี extension หรือนามสกุลเป็น .dwt และจะถูก save ไว้ในโฟล์เดอร์ชื่อ template การสร้าง Template ใน Dreamweaver ทำได้โดยการทำตามขั้นตอนต่อไปนี้
1. ไปที่เมนู File แล้วเลือก New
2. ในหมวดของ Blank Page ตรงช่อง Page Type ให้เลือก HTML template
3. ส่วนตรงช่อง Layout คุณสามารถเลือกจากรูปแบบของ Layout ที่มีให้แล้วใน Dreamweaver และคุณก็สามารถสร้างรูปแบบของตัวคุณเองได้โดยเลือก
ตอนต่อไปเราจะพูดถึงเรื่องการสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
หายไปนานสักเล็กน้อย เนื่องจากเกิดอาการต้อแต้ครับ แต่ตอนนี้ดีขึ้นแล้ว ผมตั้งใจว่าไม่ว่าอะไรจะเกิดขึ้นผมต้องเขียนเรื่องนี้ให้จบตามที่ได้ลิสต์เอาไว้ในบทแนะนำครับ เรามาเรียนกันต่อเลยครับคุณสามารถสร้างรูปแบบของหน้าเว็ปแบบทั่วๆไปโดยใช้ Dreamweaver template ซึ่งก็มีใช้เลือกทั้งแบบที่ใช้ Table หรือ CSS เป็นตัวกำหนดรูปแบบ ซึ่งมันก็มีทั้งข้อดีและข้อเสียในการใช้ Table หรือ CSS ในการกำหนดรูปแบบ ผมจะอธิบายถึงข้อดีและเสียของการใช้สองสิ่งนี้ในการกำหนดรูปแบบตามหัวข้อข้างล่างครับ
ข้อดีของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป- ออกแบบและเข้าใจได้ง่ายในการใช้งาน- ใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ
ข้อเสียของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป
- จะแสดงให้คนดูหน้าเว็ปเห็นสิ่งที่อยู่ใน Table ทั้งหมดได้ก็ต่อเมื่อ Table ตัวนั้นได้ถูกโหลดเสร็จแล้ว ซึ่งโดยทั่วไปแล้วจะช้ากว่าการใช้ CSS ในกำหนดรูปแบบของหน้าเว็ป
- การจะเปลี่ยนแปลงรูปแบบของหน้าเว็ปที่ใช้ Table จะต้องทำแบบหน้าต่อหน้าถ้าคุณไม่ได้ใช้ template ในการสร้างรูปแบบของหน้าต่างๆในเว็ปไซด์ และคุณต้อง upload หน้าที่เปลี่ยนแปลงเหล่านั้นไปที่ server อีกครั้ง หลังจากที่คุณได้แก้ไขมันแล้ว
ข้อดีของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป
- หน้าเว็ปโหลดได้เร็ว ไฟล์ CSS ที่ Link กับหน้าเว็ปที่อยู่ในเว็ปไซด์จะถูกโหลดเพียงครั้งเดียว หลังจากนั้นมันก็จะใช้งานได้เลยโดยไม่ต้องโหลดใหม่กับทุกหน้าที่เปิด
- คุณสามารถเปลี่ยนหรือปรับปรุงรูปแบบของหน้าเว็ปทุกหน้าในเว็ปไซด์ของคุณ โดยการเปลี่ยนแปลงแค่สิ่งที่อยู่ในไฟล์ CSS ที่ Link กับหน้าต่างๆในเว็ปไซด์นั้น เพราะว่าการกำหนดรูปแบบของหน้าเว็ปได้ถูกแยกออกจากเนื้อหาของหน้าเว็ปเหล่านั้นแล้ว โดยการใช้ CSS
ข้อเสียของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป
- ออกแบบและเรียนรู้การใช้งานได้ยาก- อาจจะไม่สามารถใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ
ตอนนี้เราจะมาพูดถึงการออกแบบหน้าเว็ปโดยใช้วิธีทั้งสองแบบการออกแบบหน้าเว็ปโดยใช้ Table
การใช้ Table ในการกำหนดรูปแบบของหน้าเว็ปคุณ จะทำให้ ตัวหนังสือ เนื้อหา รูป และไฟล์มีเดียต่างๆ เช่น ไฟล์ Flash วีดีโอ ไฟล์เสียง หรือไฟล์ชนิดอื่นๆ ต้องอยู่ภายใน cell ต่างๆของ Table คุณสามารถวิเคราะห์หรือตรวจสอบดูได้ว่าคุณควรจะมี Table กี่อัน และ cell กี่ row และกี่ column โดยออกแบบหน้าเว็ปในโปรแกรมกราฟฟิคก่อน เช่น Firework หรือ Photoshop ซึ่งมันจะมีเส้น guide ให้คุณทดสอบดูได้ โปรดจำไว้ว่ารูปแบบของ Table จะเป็นสี่เหลี่ยมได้เท่านั้น ดังรูปตัวอย่างข้างล่างนี้
รุปตัวอย่างของไซด์ที่แสดงว่าเราควรแบ่งเป็น กี่ Table กี่ row และกี่ column
ตอนนี้คุณก็รู้ว่าจะมี Table row และ column กี่อัน คุณก็เริ่มสร้าง Table ใน Dreamweaver ได้ คุณสามารถกำหนดค่าความกว้าง(widths)ของ Table เป็นแบบ pixels หรือแบบที่เป็นเปอร์เซ็น ถ้า Table ของคุณมีมากกว่า 1 column คุณควรเช็คให้แน่ใจว่าความกว้างของแต่ละ column เมื่อรวมกันแล้ว จะเท่ากับความกว้างของ Table ตัวนั้น คุณสามารถสร้าง Table ได้โดยไปที่เมนู Insert แล้วเลือก Table คุณจะเห็น Property Inspector ข้างล่าง ซึ่งมันมีประโยชน์มากในการใช้กำหนด หรือเปลี่ยนแปลงค่าของสิ่งต่างๆที่อยู่ใน Table คุณได้ โดยคุณเลือกที่ Table ตัวนั้น ด้วยการลากเม้าไปที่ขอบ Table มันก็จะมีเส้นสีแดงขึ้นมา คุณก็คลิกตรงขอบสีแดง ก็สามารถเลือก Table ได้แล้ว มันก็จะมีช่องต่างๆใน Property Inspector ให้คุณตั้งค่าของ Table ได้ แต่ถ้าคุณไม่เห็น Property Inspector คุณก็ไปเปิดมันได้โดยไปที่เมนู Window แล้วเลือก PropertiesProperty Inspector
คุณควรสร้าง Table แยกเป็นตัวๆให้ได้มากที่สุดเท่าที่จะทำได้ ให้เหมาะสมกับรูปแบบของหน้าเว็ปคุณ เพราะว่าคนดูจะสามารถเห็น Table แต่ละตัวได้ก็ต่อเมื่อ ข้อมูลใน Table ตัวนั้นๆได้ถูกโหลดเสร็จหมดแล้ว
คุณควรจะทดลองเปลี่ยนแปลงสิ่งต่างๆใน Table ดู เช่น ใส่สี background สร้าง Table อีกตัวข้างใน table ตัวนั้น เปลี่ยนแปลงการจัดรูปแบบของตัวหนังสือหรือรูปภาพในแต่ละ cell ของ table และก็อื่นๆ คุณจะได้ใช้ความรู้ที่คุณทดลองทำลงไปมากขึ้น เวลาที่เราทำโปรเจ็ค 01 : การสร้างรูปแบบของหน้าเว็ปโดยใช้ Table ในตอนท้ายของการเรียนเรื่องนี้ และตอนนี้ถ้าคุณอยากเข้าไปดูวิธีการตั้งค่าความกว้างของ table ในแบบที่เป็นวีดีโอ คุณก็สามารถคลิกที่ link นี้ เมื่อหน้าเปิดขึ้นมา คุณก็คลิกที่หัวข้อ “การตั้งความกว้างของ table (table widths)” แต่ว่าคุณต้องมี Plug-in ของ Flash install อยู่ในเครื่องน่ะครับ ถึงจะดูวีดีโอได้
การออกแบบหน้าเว็ปโดยใช้ Tags DIV และ CSS
การใช้ CSS กำหนดรูปแบบของหน้าเว็ป คุณต้องสร้างรูปแบบของหน้าเว็ปโดยใช้ Tags DIV เพื่อแยกเนื้อหาส่วนต่างๆในหน้าออกจากกัน และก็กำหนดตำแหน่งต่างๆของเนื้อหาหรือข้อมูลแต่ละส่วนที่อยู่ใน Tags DIV แต่ละอันไว้ในไฟล์ CSS หรือ cascading style sheets ซึ่งคุณก็ต้องสร้างไฟล์ขึ้นก่อน แล้วก็ attach หรือ link มันกับ template
Tags DIV ทุกตัวที่คุณสร้างขึ้นใน template คุณจำเป็นต้องสร้างหรือกำหนด Style ต่างๆให้กับ DIV ตัวนั้นๆด้วยในไฟล์ CSS เช่น คุณสามารถกำหนดตำแหน่งว่า DIV ตัวนั้นจะอยู่ตรงส่วนไหนของหน้าเว็ป กำหนดสีของ background กำหนดขนาดของกรอบ(border) และก็กำหนดสิ่งอื่นๆอีกตามที่คุณต้องการ ซึ่งการออกแบบหน้าเว็ปโดยใช้ Tags DIV และ CSS เป็นสิ่งที่ค่อนข้างจะยุ่งยากและซับซ้อน แต่คุณจะเข้าใจมันมากขึ้นเวลาที่เราทำแบบฝึกหัดใน โปรเจ็ค 02 : การสร้างรูปแบบของหน้าเว็ปโดย DIV/CSS แทนการใช้ Table ในตอนท้ายของการเรียนเรื่องนี้
วิธีง่ายๆในการออกแบบหน้าเว็ปโดยใช้ Tags DIV และ CSS ก็คือการใช้ Template ที่ทำไว้ให้แล้วใน Dreamweaver แบบตัวอย่างที่คุณเห็นในรูปข้างล่าง คุณสามารถเลือกรูปแบบของหน้าเว็ปแบบที่ทำไว้ให้แล้วได้โดยไปที่ เมนู File แล้วเลือก New แล้วเลือกที่หมวด Blank Page แล้วก็ HTML template ตรงช่อง Page Type แล้วก็เลือกรูปแบบที่คุณต้องการตรงช่อง Layout หลังจากนั้นคุณก็สามารถเปลี่ยนแปลงและใส่เนื้อหาของคุณเองได้ทีหลัง
รูปแบบของหน้าเว็ปแบบที่ทำไว้ให้แล้วใน Dreamweaver
หลังจากที่เราเลือกมันแล้ว เราสามารถเปลี่ยนแปลงสิ่งต่างๆในนี้ได้
ในตอนต่อไปเราจะพูดถึงเรื่องการสร้าง CSS Style Sheet
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
สิ่งหนึ่งที่คุณควรจะทำคือ คุณควรรวบรวมการกำหนดรูปแบบต่างๆของตัวหนังสือในหน้าเว็ปคุณไว้ในที่เดียวกันคือในไฟล์ CSS ให้ได้มากที่สุดเท่าที่จะทำได้ เพื่อที่จะจัดการให้รูปแบบของหน้าเว็ปต่างๆของคุณ มีลักษณะในทิศทางเดียวกันทั้งเว็ปไซด์
ในกรณีที่คุณออกแบบหน้าเว็ปไซด์โดยใช้ Tags DIV และ CSS แทนการใช้ Table หรือใช้ Template ของหน้าเว็ปที่มีไว้ให้แล้วใน Dreamweaver(prebuilt layout) มันก็น่าจะสร้างไฟล์ CSS หรือ cascading style sheet ให้คุณ และกำหนดตำแหน่งหรือรูปแบบของ tags div แต่ละอันเอาไว้แล้ว
ข้างล่างคือลิสต์ของ style sheet แบบ external ที่คุณสามารถรวบรวมเอาไว้ในไฟล์ CSS(style sheet แบบ external คือแบบที่แยกเป็นไฟล์ CSS อีกตัวหนึ่ง แล้ว attach หรือ link เข้ากับหน้าเว็ปนั้นๆ ไม่ใช่แบบ internal ซึ่งรวม code ของ CSS ไว้ในหน้าเว็ปนั้นเลย)
- การกำหนดรูปแบบของ Tag H1 ใหม่ ซึ่ง Tag H1 ส่วนใหญ่จะใช้กับหัวข้อเรื่องในหน้าเว็ปที่เป็นแบบตัวใหญ่ที่สุด- การกำหนดรูปแบบของ Tag H2 ใหม่ ซึ่ง Tag H2 ส่วนใหญ่จะใช้กับหัวข้อเรื่องในหน้าเว็ปที่เป็นแบบตัวใหญ่รองลงมา- การกำหนดรูปแบบของ Tag p หรือ paragraph ใหม่ ซึ่ง Tag p ก็คือ Tag ของรูปแบบตัวหนังสือที่จะใช้ในหน้าเว็ปที่จะแสดงออกมา ถ้าคุณไม่ได้เลือกหรือเจาะจงให้ใช้ Tag ตัวอื่นกับตัวหนังสือเหล่านั้น- การกำหนดรูปแบบของ Tag a หรือ anchor ใหม่ Tag a เป็น Tag ที่เอาไว้กำหนด link การตั้งค่าใหม่กับ Tag a จะกำหนดและเปลี่ยนแปลงรูปแบบของตัวหนังสือที่ใช้เป็น link- การกำหนดรูปแบบของเมนูใหม่- การกำหนดรูปแบบของตัวหนังสือที่เป็น footer ซึ่งจะใช้กับส่วนล่างสุดของหน้าเว็ป ส่วนใหญ่จะเป็นข้อมูลของชื่อ ที่อยู่ และเบอร์ติดต่อของบริษัท
การสร้างไฟล์ CSS แบบ external ทำได้โดยการทำตามขั้นตอนข้างล่างนี้
1. ไปที่เมนู File แล้วเลือก New
2. ตรงช่องของตัวเลือก Page Type เลือก CSS
3. กดปุ่ม Create แล้ว save ไฟล์ไว้ในโฟล์เดอร์เดียวกับที่เก็บเว็ปไซด์คุณ แต่ผมแนะนำให้สร้างโฟล์เดอร์ย่อยขึ้นมาใหม่ อาจจะตั้งชื่อว่า style หรืออะไรก็ได้ที่จะทำให้คุณรู้ว่าโฟล์เดอร์นั้นเกี่ยวกับ style sheet แล้วก็ตั้งชื่อไฟล์ แล้วก็ save ไฟล์ไปในนั้น ไฟล์ตัวนั้นจะมี extension หรือนามสกุลเป็น .css
หลังจากที่คุณสร้างไฟล์ CSS แล้ว คุณก็ต้อง attach หรือ link ไฟล์ตัวนั้นกับไฟล์ Dreamweaver template ที่คุณสร้างไว้ก่อนหน้านี้ คุณสามารถทำได้โดยการไปที่ panel ของ CSS Styles (ถ้าคุณไม่เห็น panel นี้ ก็ไปที่เมนู Window แล้วเลือก CSS Styles) จากนั้นก็คลิกที่ไอคอน Attach Style Sheet(ดูรูปตัวอย่างข้างล่าง) แล้วก็เลือกไฟล์ CSS แล้วก็คลิก OK
คุณสามารถสร้าง rule หรือการกำหนด style ของ css ขึ้นใหม่ได้โดยการคลิกที่ไอค่อน New CSS Rule
มันก็จะมี dialog box ของ New CSS Rule ขึ้นมา
ถ้าคุณต้องการตั้ง style ของตัวเอง ซึ่งจะสามารถใช้ใส่ไปใน Tag ของ Html ตัวใดก็ได้ คุณก็เลือก Class โดยทำตามขั้นตอนข้างล่าง
1. ตรงส่วนของ Selector Type: คุณก็เลือก Class
2. ตั้งชื่อโดยพิมพ์จุดนำหน้า(.) เช่น .heading
3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK
ถ้าคุณต้องการเปลี่ยนแปลง style ของ Tag ที่มีอยู่แล้วใน code Html คุณก็เลือก Tag โดยทำตามขั้นตอนข้างล่าง
1. ตรงส่วนของ Selector Type: คุณก็เลือก Tag
2. เลือก Tag ที่คุณต้องการจะเปลี่ยนแปลงรูปแบบจากเมนูที่ให้เลือกทางขวาของ Tag: เช่น h1 อย่างในรูป
3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK
มันก็จะมี dialog box ของ CSS Rule Definition ขึ้นมา คุณก็สามารถตั้งว่าจะใช้ฟอนต์อะไร ขนาดเท่าไหร่ มี style แบบไหน แล้วก็อื่นๆอีกมากมาย ในหมวดต่างๆ dialog box ตัวนี้ได้ เมื่อตั้งเสร็จแล้ว คุณก็คลิก OK
คุณควรทดลองตั้งค่าและกำหนด style ต่างๆ ใน dialog box นี้ดู แต่ CSS เป็นเรื่องที่ซับซ้อนขึ้นมาอีกหน่อย ดังนั้นมันจึงต้องใช้เวลาและการทดลองทำ เพื่อทำความเข้าใจกับสิ่งนี้ และถ้าคุณอยากจะฟังคำอธิบายเกี่ยวกับ CSS rule แบบที่เป็นวีดีโอ คุณสามารถเข้าไปดูได้โดยคลิกที่ link นี้ เมื่อหน้าเปิดขึ้นมา คุณก็คลิกที่หัวข้อ “โครงสร้างของ Style Sheet” แต่ว่าคุณต้องมี Plug-in ของ Flash install อยู่ในเครื่องน่ะครับ ถึงจะดูวีดีโอได้
แต่ไม่ต้องกังวลน่ะครับถ้าคุณยังไม่ค่อยเข้าใจเรื่อง CSS เพราะสิ่งนี้ต้องใช้เวลาในการเรียนรู้ คุณจะเข้าใจมันมากขึ้นเวลาที่เราได้เริ่มทำโปรเจ็คในตอนท้ายของการเรียนเรื่องนี้
ในตอนต่อไปเราจะพูดถึงเรื่องการใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
สวัสดีครับคุณผู้อ่านและผู้ที่ต้องการจะเรียนรู้การออกแบบเว็ปไซด์ โดยใช้ Dreamweaver CS3 ผมหายไปและไม่ได้ update บทเรียนบทใหม่นานพอสมควร ต้องขอโทษด้วยครับ เนื่องจากต้องจัดการภารกิจส่วนตัว และมุ่งมั่นกับการติดตามข่าวดาราทะเลาะแย่งรถกัน ซึ่งผมจะเขียนความเห็นของผมในตอนท้ายของบทเรียนแต่ละบท ในสองสามตอนต่อจากนี้ คือว่าอยากจะเขียนน่ะครับ ถ้าสนใจก็อ่านได้ในตอนท้ายของแต่ล่ะบทครับ เอาล่ะครับ เรามาเรียนกันต่อเลยครับ
หลังจากที่คุณได้ออกแบบ layout ของ template แล้ว ไม่ว่าจะด้วยวิธีใช้ table หรือ tags div ในการออกแบบ ตอนนี้คุณก็สามารถใส่รูปต่างๆ สิ่งที่อยู่ในเมนูของหน้าเว็ป ตัวหนังสือ เช่น รายละเอียดเกี่ยวกับเรื่องลิขสิทธิ์ของเว็ปไซด์คุณ และก็อื่นๆ ซึ่งองค์ประกอบต่างๆเหล่านี้จะเป็นตัวกำหนดรูปแบบโดยรวมของเว็ปไซด์คุณ
การใส่ตัวหนังสือ
คุณสามารถพิมพ์ตัวหนังสือลงไปในหน้าเว็ป ในแบบเดียวกับที่คุณทำในโปรแกรมพวก Microsoft Word หลังจากนั้น คุณก็สามารถเปลี่ยนแปลงรูปแบบของตัวหนังสือได้โดยใช้ Proprety Inspector ดังรูปตัวอย่างข้างล่าง แต่ในกรณีที่คุณจะทำแบบนี้ได้ คุณต้องได้กำหนดรูปแบบของ style ไว้ก่อนแล้ว แบบที่เราพูดถึงการสร้าง style sheets ในบทก่อน(ตอนที่ 04 : การสร้าง CSS Style Sheet)
นอกจากนี้แล้ว คุณยังสามารถตั้ง style ได้ โดยใช้ tags html ทั่วๆไป แบบรูปตัวอย่างข้างล่าง ซึ่งคุณสามารถเปลี่ยนแปลงรูปแบบของสิ่งที่อยู่ใน tags html ได้โดยกำหนดรูปแบบใหม่ได้ในไฟล์ CSS
การใส่รูปภาพ
คุณสามารถใส่รูปภาพไปในหน้าเว็ปได้ โดยไปที่เมนู Insert > Image แล้วก็เลือกรูปที่คุณต้องการ แล้วคลิก OK
คุณสามารถจัดระเบียบการวางรูปภาพ เป็นชิดซ้าย ชิดขวา ตรงกลาง หรืออื่นๆ โดย
1. คลิกที่รูป เพื่อเลือกมัน
2. ตรง Property Inspector ข้างล่าง(ถ้าคุณไม่เห็นมัน ให้ไปที่เมนู Window แล้วเลือก Properties) แล้วก็เลือกการจัดระเบียบอย่างที่คุณต้องการ จากเมนู Align ดังรูปตัวอย่างข้างล่าง และคุณก็ยังสามารถจัดระเบียบของสิ่งที่อยู่ภายใน cell หรือ tag div ที่คลุมรูปนี้ โดยใช้เมนูตรงนี้เช่นเดียวกัน
การใส่เมนู
ตรงส่วนของสิ่งที่เป็นเมนูของหน้าเว็ป คุณสามารถทำให้โดยใช้ตัวหนังสือทั่วไป แล้วก็กำหนด style ลงไปโดยใช้ CSS หรือถ้าคุณชำนาญมากขึ้น คุณก็สามารถใช้ code javascript เพื่อทำให้เมนูของคุณมีลูกเล่นมากขึ้น และก็ยังมีอีกหลายวิธีในการสร้างเมนูสำหรับหน้าเว็ป แต่เราจะไม่พูดถึงสิ่งเหล่านี้ ในการเรียนขั้นพื้นฐานชุดนี้
ตอนต่อไปเราจะพูดถึงเรื่อง การสร้าง Libraries และ Server Side Includes
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
สุดท้ายนี้ ผมก็อยากจะแสดงความคิดเห็นเกี่ยวกับเรื่องดาราแย่งรถกัน ผมติดตามเรื่องนี้จนจบ(เอ ! หรือยังไม่จบ ) มันก็ทำให้ผมนึกถึงหนังที่เคยดูอยู่ 2 เรื่อง เรื่องแรกคือ The crying game ซึ่งผมจะพูดถึงในตอนนี้ ส่วนอีกเรื่องคือ Rashomon ซึ่งผมจะพูดถึงในตอนหน้า
ผมนึกถีงคำพูดตอนหนึ่งในหนังเรื่อง the crying game ตัวละครตัวหนึ่งเล่านิทานว่า มีแมลงป่องตัวหนึ่งต้องการจะข้ามคลองไปยังอีกฝากหนึ่ง แต่มันว่ายน้ำไม่เป็น มันก็เลยขอร้องจรเข้ว่า ให้มันขี่หลังเพื่อไปยังอีกฝากหนึ่งได้มั้ย จรเข้ก็บอกว่าถ้ามันให้ขี่หลัง แมงป่องก็ต่อยมันสิ แมงป่องก็บอกว่ามันจะทำอย่างงั้นได้ยังไง ถ้าทำมันก็ตายด้วยสิ เพราะมันว่ายน้ำไม่เป็น จรเข้คิดดูแล้ว ก็เลยให้แมงป่องขี่หลังไป ระหว่างที่อยู่กลางคลอง แมงป่องก็ต่อยแล้วป่อยพิษเข้าไปที่หลังจรเข้ จรเข้ก็หมดแรงแล้วค่อยๆจมน้ำลงไป แต่ก่อนที่มันจะตาย มันก็ถามแมงป่องว่า แกทำอย่างนี้ทำไม เพราะแกก็จะต้องตายด้วย แมงป่องก็บอกว่ามันก็ไม่อยากทำหรอก แต่นี่คือธรรมชาติของมัน แล้วทั้งสองก็จมน้ำตายไปพร้อมๆกันผมก็เลยคิดถึงคุณกรรชัย ผมคิดว่าเขาไม่อยากเป็นแบบนี้หรอก แต่นี่คือธรรมชาติของเขา การโกหกเป็นสิ่งที่เขาทำจนเป็นมากกว่านิสัย ไม่ว่าเขาจะต้องการหรือไม่ต้องการโกหก แต่ที่เขายังทำงานและเป็นที่รักของคนอื่นได้ ก็เพราะเขามีพรสวรรค์ ความสามารถ และมนุษยสัมพันธ์ที่ดี อยู่ด้วยแล้วสนุก สรุปแล้วเรื่องนี้ทั้งหมดคือเรื่องธรรมชาติของคนครับ เราก็คงจะได้ข่าวทำนองนี้เกี่ยวกับคุณกรรชัยอยู่เป็นระยะ ตราบใดที่เขายังอยู่ในวงการ ผมไม่คิดว่านี่จะเป็นเรื่องสุดท้าย และผมก็แสดงความเสียใจกับเมย์ด้วย แม้ว่าคุณจะเป็นผู้ชนะในเกมส์นี้ ที่กรรชัยเลือกคุณ แต่คุณคือผู้แพ้ในเกมส์ชีวิต เพราะนี่คงไม่ใช่ครั้งสุดท้ายที่จะมีเหตุการณ์ทำนองนี้เกิดขึ้น และผมก็หวังว่าอั้มยังเป็นขุนศึกคู่ใจคุณเหมือนเคยน่ะครับ จบแค่นี้ก่อนครับ สำหรับตอนนี้
ในตอนนี้ ผมอยากจะแนะนำวิธีที่จะช่วยให้การ update หน้าต่างๆในเว็ปไซด์ของคุณ ทำได้สะดวกและรวดเร็วขึ้น นอกเหนือจากการใช้ template ในการสร้างต้นแบบหน้าเว็ปแล้ว การใช้ Library และ Server Side Includes จะช่วยประหยัดเวลาให้คุณในการ update เว็ปไซด์ และเหมือนกับตอนก่อน ในตอนท้ายผมจะแสดงความเห็นเกี่ยวกับเรื่องดาราแย่งรถกัน ตอนนี้จะเทียบกับหนังเรื่อง Rashomon ถ้าสนใจก็อ่านดูข้างล่างได้ครับ ส่วนตอนนี้ เรามาเรียนกันต่อเลยครับ
การใช้ Server Side Includes
เวลาที่คุณออกแบบเว็ปไซด์ คุณควรออกแบบให้มันง่ายในการเปลี่ยนแปลงหรือเพิ่มข้อมูลได้ภายหลัง ตัวอย่างเช่น เวลาที่คุณทำหน้าเพิ่มเข้าไปในเว็ปไซด์ คุณก็คงอยากจะให้เมนูในเว็ปไซด์ของคุณเพิ่มตามไปด้วย เพื่อที่จะสามารถ link ไปยังหน้าใหม่ที่เพิ่มเข้ามานั้นได้ แล้วคุณก็อาจจะอยากเปลี่ยนแปลงส่วนที่เหมือนกันในแต่ละหน้า เช่น ส่วนที่เป็น footer ซึ่งโดยส่วนใหญ่แล้วจะเอาไว้ตรงล่างสุดของหน้า เพื่อใส่ข้อมูลเกี่ยวกับลิขสิทธิ์(copyright)ของเว็ปไซด์คุณ โดยที่ไม่ต้องไปเปลี่ยนมันในทุกๆหน้าที่มีสิ่งนี้อยู่ มันจึงเป็นการดีที่คุณจะใช้สิ่งที่เรียกว่า server side include(ssi) ข้อดีของมันก็คือเมื่อคุณเปลี่ยนแปลงสิ่งที่คุณตั้งเป็น include หรือตัวที่คุณเปลี่ยนแปลงได้ คุณก็ไม่จำเป็นต้องเข้าไปเปลี่ยนแปลงทุกๆหน้าที่มีสิ่งนั้นอยู่ มันจะเปลี่ยนแปลงทุกๆหน้าที่ใช้สิ่งนั้นร่วมกันให้คุณโดยอัตโนมัติ แล้วคุณก็ไม่จำเป็นต้อง upload หน้าที่เปลี่ยนแปลงเหล่านั้นที่ใช้ตัว include ไปยัง server ทุกครั้งที่คุณทำการเปลี่ยนแปลง คุณแค่ upload ตัวไฟล์ include ที่คุณเปลี่ยนแปลงตัวนั้นตัวเดียว ไปยัง server
ข้อที่คุณควรรู้ : ทุกหน้า html ที่คุณสร้างขึ้นและใส่ Template ที่มีตัว include ลงไป คุณต้องตั้ง extension หรือนามสกุลเป็น .shtml หรือ .shtm และ server ที่คุณใช้สำหรับเก็บข้อมูลเว็บไซด์ของคุณ จะต้องรองรับการใช้งาน server side include(ssi) ด้วย การสอนในตอนนี้จะพูดถึงวิธีทำอย่างคร่าวๆ เพื่อให้คุณเข้าใจวิธีทำงาน ssi แต่การที่คุณจะทำให้มันใช้งานได้จริงๆในเว็ปไซด์ของคุณ คุณต้องถามคำถามเหล่านี้กับบริษัทที่รับ Host เว็ปไซด์ของคุณ
- server ที่คุณใช้อยู่สามารถใช้งาน server side include ได้หรือเปล่า ?
- ถ้าได้ จะต้องเอาไฟล์ที่เป็นตัว include ไปไว้ในโฟลเดอร์ชื่ออะไร และอยู่ใน directory ไหน
- จะต้องตั้งชื่อของ extension หรือนามสกุลของไฟล์ที่ใส่ตัว include ลงไปเป็นอะไร (โดยส่วนใหญ่แล้ว จะเป็น .shtml หรือ .shtm) และจะต้องตั้งชื่อ extension หรือนามสกุลของไฟล์ ssi เป็นอะไร ซึ่งตัวนี้ แล้วแต่ผู้ให้บริการ server แต่ละที่ บางที่ก็เป็น .ssi .inc หรือ .txt
ดังนั้น คุณต้องรู้ข้อมูลพวกนี้ก่อน จึงจะสามารถใช้งาน server side include ได้
การใช้ Server Side Include จะมีประโยชน์และช่วยประหยัดเวลาได้มาก ถ้าคุณสร้างไฟล์ที่มีตัว include กับสิ่งเหล่านี้
- header หรือตัวหัวข้อเรื่อง
- footer หรือส่วนที่เป็นสิ่งที่อยู่ทางล่างสุดของหน้า ส่วนใหญ่จะเอาไว้ใส่ข้อมูลเกี่ยวลิขสิทธิ์หรือ copyright ของเว็ปไซด์
- เมนูหลักของเว็ปไซด์
- เมนูย่อยของเว็ปไซด์
การสร้างตัว include ทำได้โดย
1. Copy ส่วนใดส่วนหนึ่งในหน้าเว็ปที่คุณต้องการจะทำเป็นตัว include
2. สร้างหน้า html ขึ้นใหม่ โดยไปที่เมนู File แล้วเลือก Blank Page ตรงช่อง Page Type: เลือก HTML ตรงช่อง Layout: เลือก
3. เข้าไปดูที่ code html ของหน้าใหม่ที่เพิ่งสร้างขึ้น โดยไปที่เมนู View แล้วเลือก Code หรือกดปุ่ม Code ดังรูปตัวอย่างข้างล่าง หลังจากนั้นก็เลือก code ทั้งหมดที่ dreamweaver สร้างไว้ให้ แล้วก็ delete มันออกไป
4. กลับไปที่ design view โดยกดปุ่ม Design หรือไปที่เมนู View แล้วเลือก Design หลังจากนั้นก็ paste สิ่งที่คุณได้ copy มาจากข้อที่ 1 ลงไป
5. ถ้าคุณมีสิ่งที่เป็น link และรูปภาพ อยู่ในสิ่งที่จะเป็นตัว include คุณต้องเช็คให้แน่ใจว่าทั้ง link และรูปภาพทั้งหมดของสิ่งที่อยู่ในนั้น จะตั้งเป็นแบบ Relative to: Site Root ไม่ใช่แบบ Document คุณสามารถเช็คได้โดยเลือกสิ่งที่ใช้เป็นตัว link หรือรูปภาพ แล้วคลิกที่รูปโฟลเดอร์เพื่อเปิด dialog box ของ Select File คุณสามารถดูตัวอย่างวิธีทำได้จากรูปข้างล่าง รูปแรกเป็นแบบที่สิ่งที่ใช้ link เป็นตัวหนังสือ ส่วนรูปที่สองเป็นแบบที่สิ่งที่ใช้ link เป็นรูปภาพ ซึ่งตัวนี้คุณต้องตั้งทั้งตรงช่อง Src และ Link ใหม่ หลังจากที่ dialog box ของ Select File เปิดขึ้นมาแล้ว คุณก็เลือกตรงช่อง Relative to: เป็น Site Root
ถ้าคุณไม่ได้ตั้ง address ของ site คุณในช่อง HTTP address: ของ dialog Site Definition มันก็จะมี Dialog ขึ้นมาเตือนว่า การที่จะทำให้ link เหล่านี้ทำงานได้อย่างถูกต้อง ในเวลาที่ใช้งานจริง คุณต้องตั้งชื่อของที่อยู่เว็ปไซด์ที่ถูกต้อง ในช่อง HTTP address: ของ dialog box ของ Site Definition ซึ่งคุณก็สามารถกลับไปตั้งได้ โดยไปที่เมนู Site แล้วเลือก Manage Sites หลังจากนั้นก็เลือก site ที่คุณกำลังทำงานอยู่จาก list ที่มี แล้วก็คลิกที่ปุ่ม Edit… จากนั้นก็พิมพ์ที่อยู่ของเว็ปไซด์คุณ ในช่อง HTTP address: อย่างเช่น http://www.dw3thai.com/ หรือที่อยู่อื่นๆ ที่คุณได้จดทะเบียนเอาไว้ เพราะฉะนั้นการทำงานโดยใช้ Server Side Includes คุณจำเป็นต้องลงทะเบียนชื่อเว็ปไซด์ และรู้ที่อยู่ของเว็ปไซด์คุณอยู่ก่อนแล้ว
6. ขั้นตอนสุดท้ายคือคุณตั้งชื่อไฟล์ตัวนี้ แล้ว save มันเป็นไฟล์ .html หรือ .ssi หรือนามสกุลอื่น(ขึ้นอยู่กับว่าบริษัทที่รับ host เว็ปไซด์คุณจะให้ตั้งเป็นนามสกุลอะไร) ไว้ในโฟลเดอร์ใหม่ โดยตั้งชื่อโฟลเดอร์ว่า includes หรือชื่ออื่นที่บริษัทที่รับ host เว็ปไซด์คุณจะให้ตั้งและให้เอาไปไว้ใน directory ไหน
การใส่สิ่งที่อยู่ในไฟล์ include ลงไปใน template
1. คลิกไปในบริเวณที่คุณต้องการใส่สิ่งที่อยู่ในไฟล์ include ใน template
2. ไปที่เมนู Insert แล้วเลือก Server Side Include หลังจากนั้นคุณก็ Browse หาไฟล์ include ในโฟลเดอร์ includes เลือกมัน แล้วก็คลิก OK
ตอนนี้ ส่วนที่เป็นตัว include ก็ได้เข้ามาอยู่ใน template ของคุณแล้ว ถ้าคุณต้องการเปลี่ยนแปลงสิ่งที่อยู่ในไฟล์ include ภายหลัง เช่น ในไฟล์ include อาจจะมีเมนูที่ link ไปหาหน้าอื่นอยู่ 10 หน้า แต่คุณได้เพิ่มหน้าขึ้นอีกในภายหลังอีก 2 หน้า คุณก็แค่ไปเพิ่มเมนูในไฟล์ที่เป็นตัว include เป็น 12 หน้า หลังจากนั้น หน้าเว็ปที่ link กับ template ตัวนี้ก็มีเมนู 12 หน้าเหมือนกันหมด และคุณก็แค่ upload ไฟล์ที่เป็นตัว include ที่คุณเปลี่ยนแปลงมันไปที่ server ตัวเดียว ก็จะเห็นการเปลี่ยนแปลงกับหน้าต่างๆที่ใช้ template ตัวนี้ คุณไม่จำเป็นต้อง upload หน้าที่ใช้ template ตัวนี้ขึ้นไปใหม่ ซึ่งก็ช่วยประหยัดเวลาคุณได้มาก
การใช้ Library Items ใน Dreamweaver
ถ้าคุณไม่ต้องการที่จะสร้างไฟล์ที่มีนามสกุล .shtml หรือ server ที่คุณใช้บริการอยู่ไม่รองรับการใช้งาน server side includes คุณก็สามารถใช้ Library items ใน Dreamweaver สำหรับเก็บส่วนที่ใช้บ่อยๆในหลายๆหน้าของเว็ป เพื่อให้ง่ายต่อการ update หน้าเหล่านั้น เช่น ส่วนที่เป็นเมนู เมนูย่อย การเปลี่ยนแปลงสิ่งเหล่านี้ที่อยู่ใน Library ก็จะ update ข้อมูลในแต่ละหน้าที่ใช้ Library ตัวนั้น แต่คุณต้อง upload แต่ละหน้าที่เปลี่ยนแปลงไปยัง server ใหม่ทั้งหมดถึงจะเห็นผลที่เปลี่ยนแปลง
การสร้าง Library item ทำได้โดย :
1. เลือก แล้ว copy ส่วนที่คุณอยากทำเป็น Library items ใน template
2. ไปที่เมนู File เลือก New แล้วก็ Blank Page แล้วก็ Library item แล้วคลิก Create
3. ไฟล์ Library ก็เปิดขึ้นมา คุณก็ paste สิ่งที่คุณ copy มา ไปในนั้น
4. คุณก็ save แล้วก็ตั้งชื่อที่เหมาะสมให้กับไฟล์
หลังจากที่คุณสร้าง Library item แล้ว คุณก็สามารถ insert หรือเอามันไปใส่ใน template หรือในหน้าเว็ปต่างๆได้ โดยใช้วิธีข้างล่างนี้
1. ไปที่เมนู Window แล้วเลือก Assets
2. คลิกที่ไอคอนของ Library(ดูรูปข้างล่าง)ใน panel Assets
3. เลือกชื่อของ library ที่คุณต้องการใช้
4. กดปุ่ม Insert ที่อยู่ข้างล่างของ panel นี้
ตอนต่อไปเราจะพูดถึงเรื่องการกำหนด Editable Regions ใน Template
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
ตอนท้ายนี้ ผมอยากจะแสดงความเห็นเรื่องดาราแย่งรถกันต่อ หนังอีกเรื่องที่ทำให้ผมนึกถึงเกี่ยวกับเหตุการณ์นี้ คือเรื่อง Rashomon ซึ่งเป็นหนังเก่าของญี่ปุ่น เนื้อเรื่องของหนังเป็นเล่าเรื่องเกี่ยวกับเหตุการณ์ข่มขืนและฆ่า ซึ่งถูกเล่าผ่านพยานสี่คนที่เห็นเหตุการณ์ รวมทั้งฆาตกรและเหยื่อที่ถูกฆ่าด้วย หลังจากที่ฟังทุกคนเล่าเหตุการณ์ที่เกิดขึ้น คนดูก็งงและสรุปไม่ได้ว่าเรื่องจริงๆที่เกิดขึ้นมันเป็นยังไง เพราะทุกคนที่เล่าเรื่อง ก็จะเล่าเรื่องที่ทำให้ตัวเองดูดี เพราะนี่คือธรรมชาติของคน อย่างน้อยผมก็คนหนึ่งที่เป็นแบบนี้ ผมก็นึกถึงเหตุการณ์แย่งรถกัน คนที่จะรู้จริงๆว่าเกิดอะไรขึ้นกันแน่ก็คือคู่กรณีทั้งสองฝ่ายนั่นแหละครับ ส่วนคนนอกก็ได้แต่แค่เดาว่าเกิดอะไรขึ้นกันแน่ จบแค่นี้ล่ะครับ สำหรับความคิดเห็นของผมเรื่องนี้
ขอโทษด้วยน่ะครับที่หายไปนาน เนื่องจากมีปัญหาเรื่องปากท้อง เรามาเรียนกันต่อเลยครับ
ในการใช้งาน Template คุณจำเป็นต้องตั้ง editable regions หรือส่วนที่สามารถเปลี่ยนแปลงได้ ส่วนนี้ใน Template จะเอาไว้สำหรับใส่เนื้อหา หรือสิ่งต่างๆไปในหน้าเว็บ ซึ่งจะแตกต่างกันไปในแต่ละหน้า
เราสามารถสร้าง editable regions ใน Template ได้โดย :
1. เอา cursor ไปคลิกที่ส่วนที่คุณต้องการให้สามารถเปลี่ยนแปลงได้
2. ไปที่เมนู Insert แล้วเลือก Template Objects แล้วก็เลือก Editable Region
3. ตั้งชื่อเฉพาะให้กับ editable region หรือส่วนที่เปลี่ยนแปลงได้ตัวนั้น เช่น ตั้งว่า content ถ้าคุณจะเอาส่วนนั้นไว้ใส่เนื้อหาหลักของหน้า
4. ส่วนที่เป็น editable region ก็จะปรากฏใน Template โดยแสดงเป็นกรอบสี แล้วมีชื่อที่คุณตั้งอยู่ข้างใน ดังรูปตัวอย่างข้างล่าง
ถ้าคุณมี library item (เช่น ส่วนที่เป็นเมนูย่อย ) หรือมี banner หรือสิ่งอื่นๆ อยู่ใน Template ที่จะปรากฎในหน้าเว็บเป็นส่วนใหญ่ที่ใช้ template ตัวนั้นเป็นต้นแบบในการสร้าง แต่ก็จะมีการเปลี่ยนแปลงบ้างในบางหน้า คุณก็สามารถใส่ตัว library item หรือ banner หรือสิ่งอื่นๆ ไว้ใน template ตัวนั้น หลังจากนั้นคุณก็เลือกมัน แล้วก็สร้าง editable region จากสิ่งที่คุณต้องการจะให้เปลี่ยนแปลงได้ วิธีนี้จะทำให้หน้าเว็บใหม่ที่คุณสร้างขึ้นมาโดยใช้ template ตัวนี้เป็นต้นแบบ จะมีสิ่งที่อยู่ใน library item หรือ banner หรือสิ่งอื่นๆ ที่คุณตั้งเป็น editable region ในหน้านั้น แล้วคุณยังก็สามารถเปลี่ยนแปลงสิ่งนั้น โดยใส่สิ่งอื่นแทนลงไป ในหน้าที่คุณต้องการจะเปลี่ยนครับ
ตอนต่อไปเราจะพูดถึงเรื่องการสร้างหน้า Html ในเว็ปไซด์ ทั้งในหน้าที่เป็นส่วนของเนื้อหา และหน้าที่เป็นฟอร์ม
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย(พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท(รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
สวัสดีอีกครั้งครับ หายไปนานหน่อยครับช่วงนี้ เนื่องจากต้องพยายามหาเลี้ยงชีพ แล้วคอมพิวเตอร์ก็เจ๊ง ตอนนี้กำลัง backup ข้อมูล แล้วก็จะลง Windows XP ใหม่เป็นครั้งที่ 700 เอ ! หรือมากกว่านั้น ;-) เมื่อยครับ แฮะๆๆ ขอบ่นหน่อยครับ
ตอนนี้ เราก็มาเริ่มเรียนกันต่อเลยครับ ตอนนี้เราจะพูดถึงเรื่องการสร้างหน้า Html ในเว็ปไซด์ ทั้งในหน้าที่เป็นส่วนของเนื้อหา และหน้าที่เป็นแบบฟอร์มเพื่อให้ผู้มาเยี่ยมชมเว็บไซด์ กรอกข้อมูลต่างๆลงไปเพื่อส่งให้เจ้าของเว็บไซด์ ซึ่งอาจจะใช้ประโยชน์ในการสอบถามข้อมูลจากผู้มาเยี่ยมชม หรือใช้กรอกรายละเอียดการสั่งซื้อสินค้า แล้วก็อื่นๆอีก แต่ตอนนี้ผมนึกออกแค่สองอย่างครับ ;-)
หลังจากที่คุณได้สร้าง template เพื่อใช้เป็นต้นแบบสำหรับหน้าต่างๆในเว็บไซด์ แล้วก็สร้างไฟล์ CSS เพื่อใช้กำหนดรูปแบบต่างๆของตัวหนังสือในเว็บไซด์ รวมทั้งคุณได้สร้าง server side includes(SSI) หรือ library items สำหรับใช้กับเว็บไซด์ที่คุณออกแบบ (เราพูดถึงเรื่องนี้ใน ตอนที่ 06 : การสร้าง Libraries และ Server Side Includes) ตอนนี้ คุณก็สามารถที่จะสร้างหน้าเว็บที่จะใช้งานจริงๆ ในแบบที่คุณได้แปลนโครงสร้างเอาไว้ว่าจะให้มันออกมาเป็นแบบไหนได้แล้วครับ
แต่คุณต้องระวังตรงนี้เอาไว้ด้วย ในกรณีที่คุณใช้ server side includes คุณจะต้องสร้างหน้าเว็บ แล้ว save มันเป็นไฟล์ .shtml หรือ .shtm น่ะครับ ไม่งั้นมันจะใช้งานในส่วนของ server side includes ไม่ได้
การสร้างหน้า HTML หรือ SHTML ขึ้นใหม่ โดยใช้ template ที่คุณได้สร้างขึ้นเป็นต้นแบบ ทำได้โดย
1. ไปที่เมนู File แล้วเลือก New แล้วก็ Page from Template หลังจากนั้นก็เลือกชื่อเว็บไซด์ของคุณ เช่น ของผม ผมก็เลือก samplesite จากนั้นก็เลือกชื่อของ template ที่คุณจะใช้ซึ่งคุณได้สร้างเอาไว้ในเว็บไซด์นั้น แล้วก็กดปุ่ม Create
2. ตั้งชื่อให้กับหน้าที่คุณสร้างขึ้นใหม่ แล้วก็ save หน้านั้น ไปในโฟลเดอร์ที่คุณเอาไว้ใส่เว็บไซด์ที่คุณกำลังทำงานอยู่ การจัดระเบียบของการเก็บไฟล์หรือหน้าต่างๆที่อยู่ในเว็บไซด์ของคุณ ขึ้นอยู่กับว่าคุณชอบวิธีแบบไหน แต่ผมขอแนะนำว่าถ้าคุณมีเว็บไซด์ที่ใหญ่ หรือมีหน้าเว็บมากมายอยู่ในนั้น คุณควรแยกหน้าในแต่ละหมวด เช่น หมวด about_us, company_profile ให้อยู่ในโฟลเดอร์ของมันเอง เพื่อให้ง่ายต่อการค้นหา และ update หน้าเหล่านั้น คุณจะจัดเก็บไฟล์ของหน้าเว็บต่างๆในเว็บไซด์ของคุณ แบบใดก็ได้ ยกเว้น หน้าแรกหรือหน้าหลักของเว็บไซด์คุณ หรือที่ภาษาอังกฤษเรียกว่า homepage หรือ frontpage ซึ่งจะต้องอยู่ใน root directory หรือ directory แรกในโฟลเดอร์ที่เก็บเว็บไซด์ของคุณ เช่น ถ้าคุณเอาไฟล์ทั้งหมดของเว็บไซด์ไว้ในโฟลเดอร์ชื่อ samplesite เวลาที่เปิดโฟลเดอร์นี้ขึ้นมา จะต้องเห็นไฟล์ที่จะใช้เป็นหน้าแรกของเว็บไซด์คุณอยู่ในนั้น มันไม่สามารถอยู่ในโฟลเดอร์ย่อยที่คุณสร้างไว้ในโฟลเดอร์ samplesite อย่าง about_us หรือ company_profile ได้ หน้านี้จะเป็นหน้าที่คนเข้ามาดูจะเห็นเป็นหน้าแรก เวลาที่พิมพ์ที่อยู่ของเว็บไซด์คุณ เช่น ถ้าเขาพิมพ์ http://www.samplesite.com เขาก็จะเห็นหน้านี้เปิดขึ้นมาเป็นหน้าแรก หน้านี้จะต้องมีชื่อว่า index ส่วนนามสกุลหรือ extension ของไฟล์ อาจจะเป็นได้ทั้งแบบ .htm .html .shtml ขึ้นอยู่กับว่าคุณใช้เทคโนโลยีของ web server แบบไหนกับเว็บไซด์ของคุณ ถ้าคุณใช้ server side includes (SSI) แล้ว web server ที่คุณเช่าอยู่เป็นระบบ UNIX หรือ Linux คุณก็ต้องตั้งชื่อของหน้าแรกของเว็บไซด์คุณเป็น index.shtml แต่ถ้าคุณเช่า web server ที่เป็นระบบ Windows ส่วนใหญ่แล้ว ถ้าคุณจะใช้ SSI คุณต้องตั้งชื่อหน้านี้เป็นชื่อ default.shtml แต่ถ้าคุณไม่ได้ใช้ SSI คุณก็สามารถใช้นามสกุลเป็น .htm หรือ .html ก็ได้ ใน web server ทั้งแบบ UNIX และ Windows
3. เปลี่ยนชื่อไดเดิ้ลของหน้าเว็บคุณให้เหมาะสมกับหน้าที่คุณกำลังทำอยู่ เช่น ถ้าหน้าที่คุณกำลังทำอยู่เป็นหน้าแรกของเว็บไซด์ คุณก็ควรจะพิมพ์ว่า ขอต้อนรับสู่เว็บไซด์ samplesite.com หรืออะไรที่เกี่ยวข้องกับหน้านั้น ซึ่งผมมั่นใจว่าคุณจะตั้งไตเติ้ลได้เพราะ และเหมาะสมกว่าตัวอย่างที่ผมให้ครับ ;-) คุณสามารถพิมพ์ไดเดิ้ลของหน้าได้โดยไปที่เมนู Modify แล้วก็เลือก Page Properties แล้วก็เลือก Title/Encoding แล้วในที่สุด ;-) คุณก็พิมพ์สิ่งที่คุณต้องการลงไปในช่อง Title: ครับ หรือถ้าคุณขี้เกียจทำตามขั้นตอนเหล่านี้ คุณก็สามารถพิมพ์ชื่อไตเติ้ลของหน้าลงไปบนช่อง Title: ของหน้าที่คุณกำลังทำงานอยู่แบบรูปที่สองข้างล่างครับ มันก็จะได้ผลลัพท์แบบเดียวกันครับ สิ่งที่คุณพิมพ์ลงไปก็จะไปโชว์ตรงบาร์ด้านบนของ Browser Window
4. ใส่ข้อมูลที่เกี่ยวข้องกับหน้านั้นของเว็บไซด์คุณ ไปในส่วนที่เรียกว่า meta data ซึ่งข้อมูลตรงนี้จะไม่สามารถมองเห็นได้ด้วยตาเปล่า ;-) สำหรับผู้ที่เข้ามาดูเว็บไซด์คุณ (หมายความว่า ถ้าผู้เข้ามาดูอยากจะเห็นข้อมูลตรงนี้ เขาต้องเข้าไปดูใน code XHTML ของหน้านั้น ถึงจะมองเห็น) ส่วนใหญ่จะนิยมใส่ไปในหมวดของ keywords และ description
ตรงส่วนของ keywords เป็นส่วนของคำที่เกี่ยวข้องกับเว็บไซด์ของคุณ เช่น ถ้าเว็บไซด์ของคุณเกี่ยวกับข่าวดารา คุณอาจจะพิมพ์คำว่า ดารา แล้วพิมพ์ , หรือเครื่องหมาย comma หรือตัวลูกน้ำ(ถ้าผมจำไม่ผิด ผมคิดว่ามันเรียกว่าตัวลูกน้ำ) เคาะทีนึง แล้วก็ตามด้วยคำอื่นๆที่เกี่ยวข้อง เช่น ซุบซิบ แล้วพิมพ์ , (comma) แล้วก็เคาะทีนึง แล้วก็พิมพ์คำอื่นๆที่เกี่ยวข้องอีก คุณควรให้ keywords ของคุณ อยู่ภายใน 10 – 20 คำ เพราะถ้ามากกว่านั้น search engine บางตัวก็อาจจะมองข้ามเว็บไซด์ของคุณได้ เพราะมันอาจจะมองว่า เว็บไซด์ของคุณเป็นเว็บไซด์ครอบจักรวาล ซึ่งเกี่ยวข้องกับเรื่องทุกเรื่องในโลกนี้ ดังนั้นมันก็จะไม่สนใจ
ตรงส่วนของ description เป็นส่วนของประโยคอธิบายเนื้อหาที่อยู่ในหน้านั้นของเว็บไซด์คุณ เช่น ถ้าหน้านั้นเป็นหน้าข่าวซุบซิบดารา ซึ่งอยู่ภายในเว็บไซด์ของคุณที่เกี่ยวกับข่าวดารา คุณอาจจะพิมพ์ว่า
รับรู้ข้อมูลข่าวดาราแย่งแฟน แย่งรถ แย่งงาน มีกิ๊กใหม่ เป็นเกย์ ได้จากหน้านี้ ข้อมูลเจาะลึกที่สุดในประเทศไทยก็ประมาณนี้ครับ ข้างล่างคือตัวอย่างของ meta data ซึ่งอยู่ใน code XHTML ของเว็บไซด์ sanook.com ครับ
คุณสามารถใส่ส่วนของ meta data ได้โดย :
4.1 ไปที่เมนู Insert แล้วเลือก HTML แล้วก็เลือก Head Tags จากนั้นก็เลือก Keywords มันก็จะมี Dialog box ของ Keywords ขึ้นมา คุณก็พิมพ์คำที่คุณต้องการจะใส่ลงไป โดยทำตามวิธีที่กล่าวถึงข้างบนครับ
4.2 ไปที่เมนู Insert แล้วเลือก HTML แล้วก็เลือก Head Tags จากนั้นก็เลือก Description มันก็จะมี Dialog box ของ Description ขึ้นมา คุณก็พิมพ์ประโยคที่คุณต้องการจะใส่ลงไปครับ
รูปข้างล่างคือตัวอย่างของเว็บไซด์ของผมเอง เวลาที่มีคนพิมพ์ว่า ดีวีดี-รอมสอนโปรแกรม ลงไปในช่อง Search ของ Google เพื่อหาข้อมูล มันก็จะแสดงข้อมูลที่คุณใส่ไปในส่วนของ meta data ออกมา ในแบบที่คุณเห็นในรูปน่ะครับ ซึ่งจริงๆแล้วผมมั่นใจว่าคงไม่มีใครพิมพ์คำว่า ดีวีดี-รอมสอนโปรแกรม ลงไปในช่อง Search หรอกครับ แต่นี่ก็เพื่อเป็นตัวอย่างให้คุณเข้าใจได้ง่ายขึ้นครับ
การใส่ข้อมูลลงไปในส่วนของ meta data ก็เป็นสิ่งหนึ่งที่ทำให้คนหาเว็บไซด์ของคุณได้ง่ายขึ้น แต่การทำการตลาดกับ Search Engine เป็นเรื่องที่ค่อนข้างละเอียดและซับซ้อน มีคนที่รู้วิธีการทำให้เว็บไซด์สามารถติดอันดับต้นๆเวลาที่มีคนหาข้อมูลใน Search Engine พวก Google, Yahoo ซึ่งเขาสามารถใช้ความรู้นี้ทำเป็นอาชีพได้เลย ผมไม่ได้รู้ลึกซึ้งขนาดนั้นครับ แต่ผมก็ได้ลูกค้าหลายคนที่หาข้อมูลใน Search Engine แล้วมาพบเว็บไซด์ผม ดังนั้น การทำการตลาดกับ Search Engine ก็เป็นวิธีที่ได้ผล และประหยัดอันหนึ่ง โดยเฉพาะสำหรับผม เพราะผมไม่มีเงินไปทำการตลาดในช่องทางอื่นครับ
5. พิมพ์หรือ paste ข้อมูลของหน้านั้น ลงไปในส่วนที่เปลี่ยนแปลงได้ (Editable Region) ที่คุณได้ตั้งเอาไว้ของหน้านั้น เช่น ในส่วนที่เป็นหัวข้อเรื่อง (Heading) และส่วนที่เป็นเนื้อหา (Content) แบบตัวอย่างรูปข้างล่าง ;-)
6. ใส่รูปภาพหรือไฟล์ Flash ไปในส่วนที่สามารถเปลี่ยนแปลงได้ (Editable region) แล้วก็จัดระเบียบ รูปภาพหรือไฟล์ Flash ให้เป็นในแบบที่คุณต้องการโดยใช้เครื่องมือใน Property Inspector เหมือนรูปตัวอย่างข้างล่าง
7. เปลี่ยนแปลงในส่วนของ Library items หรือส่วนของ SSI(server side includes) ให้เป็นในแบบที่คุณต้องการ
8. คุณก็ทำวีธีการแบบเดียวกันนี้กับหน้าอื่นๆครับ
ในบางหน้า คุณอาจจะต้องการสิ่งที่เรียกกันว่าฟอร์ม (Form) เช่น ในหน้า contact us หรือหน้าที่ต้องการให้คนที่เข้ามาดูเว็บไซด์ติดต่อกับคุณ หรือบริษัทคุณ ซึ่งจะมีช่องต่างๆให้คนที่ต้องการติดต่อกรอกข้อมูลลงไป ในบทเรียนนี้ผมจะพูดคร่าวๆเกี่ยวกับแบบฟอร์มในหน้าเว็บครับ
คุณสามารถใส่ฟอร์มลงไปในหน้าเว็บได้โดย :
ไปที่เมนู Insert แล้วเลือก Form แล้วก็เลือก Form แบบรูปตัวอย่างข้างล่าง
ในการทำแบบฟอร์มใหม่ทุกครั้ง คุณต้องเลือก Insert > Form > Form ก่อนทุกครั้งแบบในรูปตัวอย่าง เพื่อให้ทุกอย่างที่คุณจะให้อยู่ในแบบฟอร์ม เช่น ช่องใส่ตัวหนังสือ( Text Field), ปุ่มตัวเลือก (Radio Button) และอื่นๆ อยู่ภายใน Tag Form ไม่อย่างงั้น มันจะใช้การไม่ได้ หลังจากนั้น คุณก็สามารถใส่สิ่งต่างๆ ลงไปในแบบฟอร์มได้ เช่น ถ้าคุณจะใส่ช่องกรอกตัวหนังสือ คุณก็ไปที่ Insert > Form > Text Field แล้วก็ทำแบบเดียวกันกับสิ่งอื่นๆที่คุณต้องการใส่ในแบบฟอร์ม ปุ่มที่สำคัญที่สุดปุ่มหนึ่งในแบบฟอร์ม คือปุ่ม Submit หรือปุ่มส่งข้อมูลในฟอร์ม ซึ่งคุณจำเป็นต้องมีในแบบฟอร์มทุกอันของคุณ ไม่งั้นคนที่กรอกแบบฟอร์มก็จะไม่สามารถส่งข้อมูลที่กรอกได้ หลังจากที่คุณใส่ช่องตัวหนังสือ เมนู ปุ่มตัวเลือก และสิ่งอื่นๆ จนแบบฟอร์มของคุณเสร็จสมบูรณ์แล้ว สิ่งสำคัญอีกอย่างที่คุณต้องทำคือ คุณต้องคุยกับผู้ที่ให้บริการ Host เว็บไซด์ของคุณว่าจะต้องทำอะไรบ้าง และใส่อะไรลงไปในช่อง Action และ Method เพื่อให้แบบฟอร์มของคุณส่งไปที่ใดที่หนึ่งได้ มันอาจจะถูกส่งไปเก็บไว้ในฐานข้อมูล (database) หรือส่งไปยังอีเมล์ของคุณ หรือทั้งสองอย่าง
นี่คือการแนะนำคร่าวๆเกี่ยวกับหน้าที่เป็นแบบฟอร์ม แต่การทำหน้าฟอร์มเป็นเรื่องที่ค่อนข้างละเอียด ถ้าจะสอนทั้งหมดคงจะต้องเป็นตอนๆหนึ่งเกี่ยวกับฟอร์มอย่างเดียวเลยครับ ถ้าคุณต้องการให้ผมเขียนตอนๆหนึ่งเกี่ยวกับหน้าฟอร์มอย่างเดียวเลย คุณก็ส่งความคิดเห็นมาน่ะครับ ถ้ามีคนจำนวนมากที่ต้องการเรียนเรื่องนี้ ผมก็จะเขียนครับ และถ้าคุณอยากจะดูวีดีโอเกี่ยวกับ การใส่ checkboxes และ radio buttons ในแบบฟอร์ม คุณก็สามารถไปดูได้ที่ link นี้ครับ โดยคลิกที่ตัวหนังสือ การใส่ checkboxes และ radio buttons แต่คุณต้องมี Flash Plug-in installed ในเครื่องน่ะครับถึงจะดูได้ครับ
ตอนต่อไปเราจะพูดถึงเรื่องการสร้าง link ในหน้าเว็ปครับ
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย (พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท (รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
สวัสดีครับ คุณผู้อ่าน ผมไม่ได้เขียนเรื่องการสอน Dreamweaver CS3 หลังจากที่เขียนตอนที่ 08 ที่เกี่ยวกับการสร้างหน้า Html ในเว็ปไซด์ จนถึงปัจจุบันก็ประมาณ 5 เดือนได้แล้ว ผมมัวแต่ไปทำอย่างอื่น โดยเฉพาะงานที่ไม่ได้เงิน เช่น การถ่ายรูป pretty ตามงานต่างๆ อย่างรูปตัวอย่างข้างล่างครับ ;-)เพิ่งรู้ว่าตัวเองชอบทำงานพวกนี้ครับ ชอบมากๆ
เอาละครับ เรามาเรียนกันต่อเลยละกัน
หลังจากที่คุณสร้างหน้าต่างๆที่อยู่ในเว็บไซด์ของคุณเสร็จแล้ว ตอนนี้คุณก็ต้องสร้าง Link เพื่อเชี่อมหน้าต่างๆเหล่านั้นเข้าไว้ด้วยกัน คุณอาจจะสร้าง Link ตรงส่วนที่เป็นเมนู ตัวหนังสือ หรือตรงรูปภาพในแต่ละหน้า มี Link 3 แบบที่ใช้กันมาก ที่เราจะพูดถึงในบทความนี้คือ Link แบบทั่วๆไป Link แบบ Anchor point และ Link ที่ไปหาเว็บไซด์อื่น
1. Link แบบทั่วๆไป การสร้าง Link ทำได้โดย :
1.1 เลือกตัวหนังสือ หรือรูปภาพที่คุณต้องการจะสร้าง Link
1.2 กดไอคอนที่เข้ารูปโฟลเดอร์สีเหลือง ที่อยู่ถัดจากช่อง Link ตรง Property Inspector panel
1.3 มันก็จะเปิด Dialog Box ขึ้นมา คุณก็ Browse หาหน้าเว็ปที่คุณต้องการจะ Link ไปหา แล้วก็คลิกเลือกมัน
1.4 ถ้าคุณ Link ไปยังหน้าเว็ปของคุณ ที่มีการใช้ Server Side Include (SSI) คุณต้องเช็คให้แน่ใจว่า คุณได้เลือกการ Link แบบ Relative to: Site Root ไม่งั้นมันจะ Link หาหน้านั้นไม่เจอเวลาที่มีคนกดที่ Link แต่โดยทั่วไปแล้ว ถ้าเว็บไซด์ของคุณไม่ได้ใช้ SSI Dreamweaver CS3 จะเลือก Relative to: Document เป็นตัว Default1.5 คลิก OK ตอนนี้คุณก็สร้าง Link เสร็จแล้ว
ถ้าคุณสร้าง Link ใน Template หรือใน Libra item Dreamweaver ก็จะถามคุณว่า คุณต้องการจะ Update หน้าต่างๆที่ใช้ Template หรือ Library item ตัวนี้หรือเปล่า ถ้าคุณต้องการก็คลิก Update
2. Link แบบ Anchor point มี Link อีกประเภทหนึ่งที่คุณอาจจะจำเป็นต้องทำ ในกรณีที่คุณมีหน้าเว็ปที่มีข้อมูลมากและยาวอยู่ในนั้น เช่นในหน้า FAQ หรือคำถามที่ถูกถามบ่อย ซึ่งจะมีข้อมูลของคำถามแต่ละข้อที่ถูกถามอยู่ด้านบนของหน้า และคำตอบของแต่ละคำถาม อยู่ด้านล่างของหน้า เพื่อความสะดวกในการดูข้อมูล เมื่อผู้เข้ามาดูคลิกที่ Link ของคำถามแต่ละข้อ มันก็จะเลื่อนลงไปยังด้านล่างของคำตอบในข้อนั้นๆ Link ชนิดนี้เรียกว่า Anchor Link (อ่านว่า แองเคอร์ ครับ)
การสร้าง Anchor Link ทำได้โดย :
2.1 เอา Cursor คลิกที่ส่วนที่คุณต้องการจะ Link ไปหาในหน้านั้น
2.2 กดที่ปุ่ม Named Anchor
2.3 ตั้งชื่อของ Anchor point แล้วคลิก OK มันก็จะมีรูปสมอเรือแสดงอยู่ที่จุดที่คุณกำหนดให้เป็น Anchor point ดังรูปตัวอย่างข้างล่าง
2.4 เลือกตัวหนังสือที่คุณต้องการจะสร้าง Anchor Link แล้วไปพิมพ์ชื่อของ Anchor point ที่คุณจะ Link ไปหา ตรง Property Inspector คุณต้องพิมพ์ # นำหน้าชื่อ Anchor point แบบรูปตัวอย่างข้างล่างครับ
2.5 ตอนนี้คุณก็ได้สร้าง Anchor point และทำ Link ไปหา Anchor point ตัวนั้นแล้ว ถ้าคุณ Preview หน้าเว็บนี้ใน Browser เวลาที่คุณคลิกที่ Link หน้านั้นก็จะเลื่อนลงไปตรงจุดที่ที่คุณสร้าง Anchor Link เอาไว้
3. การ Link ที่ไปหาเว็บไซด์อื่น สามารถทำได้โดย เลือกตัวหนังสือหรือรูปภาพที่คุณต้องการใช้เป็นตัว Link แล้วก็พิมพ์ที่อยู่ของเว็บไซด์ที่คุณจะ Link ไปหาในช่อง Link ของ Property Inspector อย่างในรูปตัวอย่างข้างล่าง แล้วสิ่งหนึ่งที่ต้องระวังในการทำ Link ไปยังเว็บไซด์อื่นก็คือ คุณต้องพิมพ์ชื่อเต็มของ URL ของเว็บไซด์นั้นๆ ไม่อย่างงั้น มันอาจจะไม่ Link ไปหาเว็บไซด์อื่น เช่น ถ้าคุณจะ Link ไปหาเว็บไซด์ www.dw3thai.com คุณต้องพิมพ์ชื่อเต็มของ URL คือ http://www.dw3thai.com ไม่ใช่แค่ www.dw3thai.com หรือ dw3thai.com ครับ
ถ้าคุณอยากให้เว็บไซด์ที่คุณจะ Link ไปหา เปิดขึ้นมาใน Window ของมันเอง เหมือนกับที่เวลาคุณดูในเว็บไซด์ที่โชว์รูปดารา เวลาที่คุณคลิกที่รูปเล็กๆของดารา มันก็จะเปิด Window ใหม่ขึ้นมา ซึ่งจะโชว์รูปขนาดใหญ่ของดาราคนนั้น คุณก็สามารถทำได้โดยเลือกเมนู _blank ดังรูปตัวอย่างข้างล่างครับ
ก็จบแล้วครับ สำหรับการสร้าง Link พื้นฐาน 3 แบบ ถ้าคุณอยากดูในแบบที่เป็นวีดีโอ คุณก็ไปดูได้ที่ Link นี้ครับ แล้วคลิกที่หัวข้อ พื้นฐานของการสร้าง link ในตอนต่อไป ซึ่งเป็นตอนสุดท้ายของบทความชิ้นนี้ ก่อนที่ผมจะเขียนเรื่องแบบฝึกหัดในการทำเว็บไซด์อีก 3 ตอน ผมจะพูดถึงเรื่อง การทดสอบการใช้งานของเว็ปไซด์ และการ upload เว็ปไซด์ไปยัง Server ที่ host เว็ปไซด์ของคุณครับ
สำหรับผู้ที่ต้องการจะเรียนรู้โปรแกรม Dreamweaver CS3 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดได้ที่เว็ปไซด์นี้ http://www.dw3thai.com/ ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรมโดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย (พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท (รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ
Thanks:webboard
ไม่มีความคิดเห็น:
แสดงความคิดเห็น