1. 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<br />แต่ก่อนที่คุณจะสร้างเว็ปไซด์ใน Dreamweaver CS3 คุณควรจะทำสิ่งเหล่านี้ก่อน<br />- คิดว่าคุณจะใช้ 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 เว็ปคุณจะให้ตั้งแบบไหน<br />- หลังจากนั้นคุณก็ต้องคิดว่าเว็ปไซด์ของคุณจะเกี่ยวกับอะไร มีกี่หน้า แล้วก็ออกแบบหน้าตาของเว็ปไซด์ โดยใช้โปรแกรมที่ใช้ทำกราฟฟิค เช่น โฟโต้ช็อป แล้วคุณก็ควรเตรียมรูปที่จะเอาใส่ไว้ในหน้าเว็ปที่เป็น gif หรือ jpg และถ้าไซด์คุณจะมี Flash animation คุณก็ควรทำไฟล์เตรียมเอาไว้ด้วย<br />นี่คือตอนและโปรเจ็คต่างๆที่เราจะมาเรียนรู้ในการใช้งานขั้นพื้นฐานของโปรแกรม Dreamweaver CS3<br />ตอนที่ 01 : การ define site ใหม่ใน Dreamweaver<br />ตอนที่ 02 : การสร้าง Dreamweaver Template<br />ตอนที่ 03 : การสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template<br />ตอนที่ 04 : การสร้าง CSS Style Sheet<br />ตอนที่ 05 : การใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ<br />ตอนที่ 06 : การสร้าง Libraries หรือ Server Side Includes<br />ตอนที่ 07 : การกำหนด Editable Regions ใน Template<br />ตอนที่ 08 : การสร้างหน้า Html ในเว็ปไซด์ทั้งในหน้าที่เป็นส่วนของเนื้อหาและหน้าที่เป็นฟอร์ม<br />ตอนที่ 09 : การสร้าง link ในหน้าเว็ป<br />เว็ปไซด์ของคุณ<br />เอาละครับ ตอนด่อไปเราจะพูดถึงเรื่อง การ define site ใหม่ใน Dreamweaver<br />เริ่มต้นด้วยการทำตามขั้นตอนต่างๆในหัวข้อข้างล่างนี้ครับ<br />01. สร้าง โฟล์เดอร์ที่คุณจะใช้เก็บไฟล์ต่างๆที่จะใช้ในเว็ปไซด์ของคุณขึ้นมาใหม่ คุณควรตั้งชื่อของโฟล์เดอร์ให้คุณจำได่ง่ายว่ากำลังทำงานกับเว็ปไซด์อะไร อยู่ เช่น ถ้าคุณกำลังสร้างเว็ปไซด์ชื่อ samplesite.com คุณก็ควรตั้งชื่อโฟล์เดอร์ว่า samplesite ภายในโฟล์เดอร์นั้นคุณก็สร้างโฟล์เดอร์ย่อยขึ้นมาอีกอันหนึ่ง ตั้งชื่อว่า images แล้วคุณก็ copy ไฟล์ที่เป็นรูปภาพทั้งหมดที่จะใช้ในเว็ปไซด์ ไปไว้ในโฟล์เดอร์ images<br />02. เปิดโปรแกรม Dreamweaver CS3<br />03. Define ไซด์ใหม่ โดยไปที่เมนู Site แล้วเลือก New Site แล้วก็เลือกที่ Tab “Advanced”<br />04. ตั้งชื่อไซด์ของคุณในช่อง Site Name คุณควรตั้งชื่อเพื่อให้คุณจำได้ว่าคุณกำลังทำงานอยู่กับไซด์อะไร<br />05. คลิ กที่ไอค่อนรูปโฟล์เดอร์สีเหลืองที่อยู่ทางขวาของช่อง Local Root Folder แล้วก็ browse หาโฟล์เดอร์ที่จะใช้เป็นเว็ปไซด์ของคุณ ที่คุณได้สร้างขึ้นในข้อที่ 01 เลือกโฟล์เดอร์นั้น แล้วคลิกปุ่ม open แล้วคลิกที่ปุ่ม select แล้วก็คลิกที่ปุ่ม OK ใน window Site Definition<br />06. ตอนนี้คุณก็น่าจะเห็นโฟล์เดอร์ชื่อ images ตรง File panel ทางขวามือแล้ว ถ้ายังไม่เห็นให้คุณไปที่เมนู Window แล้วก็เลือก Filesถ้า หน้าเว็ปส่วนใหญ่ที่อยู่ในเว็ปไซด์คุณมีลักษณะคล้ายๆกัน ผมอยากจะแนะนำให้ใช้ Template ใน Dreamweaver เพื่อใช้สร้างต้นแบบของหน้าเว็ป<br />ข้อดีของการสร้าง Template ใน Dreamweaver เพื่อเป็นต้นแบบของหน้าเว็ป :<br />- ทุกหน้าที่ใช้ Template เดียวกันเป็นต้นแบบในการสร้างจะมีล้กษณะคล้ายกัน<br />- ถ้า คุณต้องการจะเปลี่ยนรูปแบบของหน้าตาของหน้าเว็ปในทั้งเว็ปไซด์ของคุณ ถ้าคุณใช้ Template ตัวเดียวกัน ในการสร้างหน้าเว็ปทั้งไซด์ คุณก็แค่เปลี่ยนแปลงรูปแบบของ Template ตัวนั้น Dreamweaver ก็จะมีตัวเลือกให้ update ทุกหน้าที่ใช้ Template ตัวนั้น รูปแบบของหน้าเว็ปทุกหน้าในไซด์คุณก็จะเปลี่ยนแปลงไปโดยอัตโนมัติ<br />ไฟล์ Template ใน Dreamweaver จะมี extension หรือนามสกุลเป็น .dwt และจะถูก save ไว้ในโฟล์เดอร์ชื่อ template การสร้าง Template ใน Dreamweaver ทำได้โดยการทำตามขั้นตอนต่อไปนี้<br />1. ไปที่เมนู File แล้วเลือก New<br />2. ในหมวดของ Blank Page ตรงช่อง Page Type ให้เลือก HTML template<br />3. ส่วน ตรงช่อง Layout คุณสามารถเลือกจากรูปแบบของ Layout ที่มีให้แล้วใน Dreamweaver และคุณก็สามารถสร้างรูปแบบของตัวคุณเองได้โดยเลือก <none><br />คุณ สามารถสร้างรูปแบบของหน้าเว็ปแบบทั่วๆไปโดยใช้ Dreamweaver template ซึ่งก็มีใช้เลือกทั้งแบบที่ใช้ Table หรือ CSS เป็นตัวกำหนดรูปแบบ ซึ่งมันก็มีทั้งข้อดีและข้อเสียในการใช้ Table หรือ CSS ในการกำหนดรูปแบบ ผมจะอธิบายถึงข้อดีและเสียของการใช้สองสิ่งนี้ในการกำหนดรูปแบบตามหัวข้อ ข้างล่างครับ<br />ข้อดีของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป- ออกแบบและเข้าใจได้ง่ายในการใช้งาน- ใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ<br />ข้อเสียของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป<br />- จะ แสดงให้คนดูหน้าเว็ปเห็นสิ่งที่อยู่ใน Table ทั้งหมดได้ก็ต่อเมื่อ Table ตัวนั้นได้ถูกโหลดเสร็จแล้ว ซึ่งโดยทั่วไปแล้วจะช้ากว่าการใช้ CSS ในกำหนดรูปแบบของหน้าเว็ป<br />- การจะเปลี่ยนแปลงรูปแบบ ของหน้าเว็ปที่ใช้ Table จะต้องทำแบบหน้าต่อหน้าถ้าคุณไม่ได้ใช้ template ในการสร้างรูปแบบของหน้าต่างๆในเว็ปไซด์ และคุณต้อง upload หน้าที่เปลี่ยนแปลงเหล่านั้นไปที่ server อีกครั้ง หลังจากที่คุณได้แก้ไขมันแล้ว<br />ข้อดีของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป<br />- หน้า เว็ปโหลดได้เร็ว ไฟล์ CSS ที่ Link กับหน้าเว็ปที่อยู่ในเว็ปไซด์จะถูกโหลดเพียงครั้งเดียว หลังจากนั้นมันก็จะใช้งานได้เลยโดยไม่ต้องโหลดใหม่กับทุกหน้าที่เปิด<br />- คุณ สามารถเปลี่ยนหรือปรับปรุงรูปแบบของหน้าเว็ปทุกหน้าในเว็ปไซด์ของคุณ โดยการเปลี่ยนแปลงแค่สิ่งที่อยู่ในไฟล์ CSS ที่ Link กับหน้าต่างๆในเว็ปไซด์นั้น เพราะว่าการกำหนดรูปแบบของหน้าเว็ปได้ถูกแยกออกจากเนื้อหาของหน้าเว็ปเหล่า นั้นแล้ว โดยการใช้ CSS<br />ข้อเสียของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป<br />- ออกแบบและเรียนรู้การใช้งานได้ยาก- อาจจะไม่สามารถใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ<br />ตอนนี้เราจะมาพูดถึงการออกแบบหน้าเว็ปโดยใช้วิธีทั้งสองแบบการออกแบบหน้าเว็ปโดยใช้ Table<br />การ ใช้ Table ในการกำหนดรูปแบบของหน้าเว็ปคุณ จะทำให้ ตัวหนังสือ เนื้อหา รูป และไฟล์มีเดียต่างๆ เช่น ไฟล์ Flash วีดีโอ ไฟล์เสียง หรือไฟล์ชนิดอื่นๆ ต้องอยู่ภายใน cell ต่างๆของ Table คุณสามารถวิเคราะห์หรือตรวจสอบดูได้ว่าคุณควรจะมี Table กี่อัน และ cell กี่ row และกี่ column โดยออกแบบหน้าเว็ปในโปรแกรมกราฟฟิคก่อน เช่น Firework หรือ Photoshop ซึ่งมันจะมีเส้น guide ให้คุณทดสอบดูได้ โปรดจำไว้ว่ารูปแบบของ Table จะเป็นสี่เหลี่ยมได้เท่านั้น ดังรูปตัวอย่างข้างล่างนี้<br />รุปตัวอย่างของไซด์ที่แสดงว่าเราควรแบ่งเป็น กี่ Table กี่ row และกี่ column<br /> <br />ตอน นี้คุณก็รู้ว่าจะมี 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<br />คุณ ควรสร้าง Table แยกเป็นตัวๆให้ได้มากที่สุดเท่าที่จะทำได้ ให้เหมาะสมกับรูปแบบของหน้าเว็ปคุณ เพราะว่าคนดูจะสามารถเห็น Table แต่ละตัวได้ก็ต่อเมื่อ ข้อมูลใน Table ตัวนั้นๆได้ถูกโหลดเสร็จหมดแล้ว<br />คุณ ควรจะทดลองเปลี่ยนแปลงสิ่งต่างๆใน Table ดู เช่น ใส่สี background สร้าง Table อีกตัวข้างใน table ตัวนั้น เปลี่ยนแปลงการจัดรูปแบบของตัวหนังสือหรือรูปภาพในแต่ละ cell ของ table และก็อื่นๆ คุณจะได้ใช้ความรู้ที่คุณทดลองทำลงไปมากขึ้น เวลาที่เราทำโปรเจ็ค 01 : การสร้างรูปแบบของหน้าเว็ปโดยใช้ Table ในตอนท้ายของการเรียนเรื่องนี้ และตอนนี้ถ้าคุณอยากเข้าไปดูวิธีการตั้งค่าความกว้างของ table ในแบบที่เป็นวีดีโอ คุณก็สามารถคลิกที่ link นี้ เมื่อหน้าเปิดขึ้นมา คุณก็คลิกที่หัวข้อ “การตั้งความกว้างของ table (table widths)” แต่ว่าคุณต้องมี Plug-in ของ Flash install อยู่ในเครื่องน่ะครับ ถึงจะดูวีดีโอได้<br />การออกแบบหน้าเว็ปโดยใช้ Tags DIV และ CSS<br /> <br />การ ใช้ CSS กำหนดรูปแบบของหน้าเว็ป คุณต้องสร้างรูปแบบของหน้าเว็ปโดยใช้ Tags DIV เพื่อแยกเนื้อหาส่วนต่างๆในหน้าออกจากกัน และก็กำหนดตำแหน่งต่างๆของเนื้อหาหรือข้อมูลแต่ละส่วนที่อยู่ใน Tags DIV แต่ละอันไว้ในไฟล์ CSS หรือ cascading style sheets ซึ่งคุณก็ต้องสร้างไฟล์ขึ้นก่อน แล้วก็ attach หรือ link มันกับ template<br />Tags DIV ทุกตัวที่คุณสร้างขึ้นใน template คุณจำเป็นต้องสร้างหรือกำหนด Style ต่างๆให้กับ DIV ตัวนั้นๆด้วยในไฟล์ CSS เช่น คุณสามารถกำหนดตำแหน่งว่า DIV ตัวนั้นจะอยู่ตรงส่วนไหนของหน้าเว็ป กำหนดสีของ background กำหนดขนาดของกรอบ(border) และก็กำหนดสิ่งอื่นๆอีกตามที่คุณต้องการ ซึ่งการออกแบบหน้าเว็ปโดยใช้ Tags DIV และ CSS เป็นสิ่งที่ค่อนข้างจะยุ่งยากและซับซ้อน แต่คุณจะเข้าใจมันมากขึ้นเวลาที่เราทำแบบฝึกหัดใน โปรเจ็ค 02 : การสร้างรูปแบบของหน้าเว็ปโดย DIV/CSS แทนการใช้ Table ในตอนท้ายของการเรียนเรื่องนี้<br />วิธีง่ายๆในการออกแบบหน้าเว็ป โดยใช้ Tags DIV และ CSS ก็คือการใช้ Template ที่ทำไว้ให้แล้วใน Dreamweaver แบบตัวอย่างที่คุณเห็นในรูปข้างล่าง คุณสามารถเลือกรูปแบบของหน้าเว็ปแบบที่ทำไว้ให้แล้วได้โดยไปที่ เมนู File แล้วเลือก New แล้วเลือกที่หมวด Blank Page แล้วก็ HTML template ตรงช่อง Page Type แล้วก็เลือกรูปแบบที่คุณต้องการตรงช่อง Layout หลังจากนั้นคุณก็สามารถเปลี่ยนแปลงและใส่เนื้อหาของคุณเองได้ทีหลัง<br />สิ่ง หนึ่งที่คุณควรจะทำคือ คุณควรรวบรวมการกำหนดรูปแบบต่างๆของตัวหนังสือในหน้าเว็ปคุณไว้ในที่เดียว กันคือในไฟล์ CSS ให้ได้มากที่สุดเท่าที่จะทำได้ เพื่อที่จะจัดการให้รูปแบบของหน้าเว็ปต่างๆของคุณ มีลักษณะในทิศทางเดียวกันทั้งเว็ปไซด์<br />ในกรณีที่คุณออกแบบหน้า เว็ปไซด์โดยใช้ Tags DIV และ CSS แทนการใช้ Table หรือใช้ Template ของหน้าเว็ปที่มีไว้ให้แล้วใน Dreamweaver(prebuilt layout) มันก็น่าจะสร้างไฟล์ CSS หรือ cascading style sheet ให้คุณ และกำหนดตำแหน่งหรือรูปแบบของ tags div แต่ละอันเอาไว้แล้ว<br />ข้าง ล่างคือลิสต์ของ style sheet แบบ external ที่คุณสามารถรวบรวมเอาไว้ในไฟล์ CSS(style sheet แบบ external คือแบบที่แยกเป็นไฟล์ CSS อีกตัวหนึ่ง แล้ว attach หรือ link เข้ากับหน้าเว็ปนั้นๆ ไม่ใช่แบบ internal ซึ่งรวม code ของ CSS ไว้ในหน้าเว็ปนั้นเลย)<br />- การกำหนดรูปแบบของ Tag H1 ใหม่ ซึ่ง Tag H1 ส่วนใหญ่จะใช้กับหัวข้อเรื่องในหน้าเว็ปที่เป็นแบบตัวใหญ่ที่สุด- การกำหนดรูปแบบของ Tag H2 ใหม่ ซึ่ง Tag H2 ส่วนใหญ่จะใช้กับหัวข้อเรื่องในหน้าเว็ปที่เป็นแบบตัวใหญ่รองลงมา<br />- การ กำหนดรูปแบบของ Tag p หรือ paragraph ใหม่ ซึ่ง Tag p ก็คือ Tag ของรูปแบบตัวหนังสือที่จะใช้ในหน้าเว็ปที่จะแสดงออกมา ถ้าคุณไม่ได้เลือกหรือเจาะจงให้ใช้ Tag ตัวอื่นกับตัวหนังสือเหล่านั้น- การ กำหนดรูปแบบของ Tag a หรือ anchor ใหม่ Tag a เป็น Tag ที่เอาไว้กำหนด link การตั้งค่าใหม่กับ Tag a จะกำหนดและเปลี่ยนแปลงรูปแบบของตัวหนังสือที่ใช้เป็น link- การกำหนดรูปแบบของเมนูใหม่- การ กำหนดรูปแบบของตัวหนังสือที่เป็น footer ซึ่งจะใช้กับส่วนล่างสุดของหน้าเว็ป ส่วนใหญ่จะเป็นข้อมูลของชื่อ ที่อยู่ และเบอร์ติดต่อของบริษัท<br />การสร้างไฟล์ CSS แบบ external ทำได้โดยการทำตามขั้นตอนข้างล่างนี้<br />1. ไปที่เมนู File แล้วเลือก New<br />2. ตรงช่องของตัวเลือก Page Type เลือก CSS<br />3. กด ปุ่ม Create แล้ว save ไฟล์ไว้ในโฟล์เดอร์เดียวกับที่เก็บเว็ปไซด์คุณ แต่ผมแนะนำให้สร้างโฟล์เดอร์ย่อยขึ้นมาใหม่ อาจจะตั้งชื่อว่า style หรืออะไรก็ได้ที่จะทำให้คุณรู้ว่าโฟล์เดอร์นั้นเกี่ยวกับ style sheet แล้วก็ตั้งชื่อไฟล์ แล้วก็ save ไฟล์ไปในนั้น ไฟล์ตัวนั้นจะมี extension หรือนามสกุลเป็น .css<br />หลัง จากที่คุณสร้างไฟล์ CSS แล้ว คุณก็ต้อง attach หรือ link ไฟล์ตัวนั้นกับไฟล์ Dreamweaver template ที่คุณสร้างไว้ก่อนหน้านี้ คุณสามารถทำได้โดยการไปที่ panel ของ CSS Styles (ถ้าคุณไม่เห็น panel นี้ ก็ไปที่เมนู Window แล้วเลือก CSS Styles) จากนั้นก็คลิกที่ไอคอน Attach Style Sheet(ดูรูปตัวอย่างข้างล่าง) แล้วก็เลือกไฟล์ CSS แล้วก็คลิก OK <br />คุณสามารถสร้าง rule หรือการกำหนด style ของ css ขึ้นใหม่ได้โดยการคลิกที่ไอค่อน New CSS Rule<br />มันก็จะมี dialog box ของ New CSS Rule ขึ้นมา<br /> <br />ถ้าคุณต้องการตั้ง style ของตัวเอง ซึ่งจะสามารถใช้ใส่ไปใน Tag ของ Html ตัวใดก็ได้ คุณก็เลือก Class โดยทำตามขั้นตอนข้างล่าง<br />1. ตรงส่วนของ Selector Type: คุณก็เลือก Class<br />2. ตั้งชื่อโดยพิมพ์จุดนำหน้า(.) เช่น .heading<br />3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK<br />ถ้าคุณต้องการเปลี่ยนแปลง style ของ Tag ที่มีอยู่แล้วใน code Html คุณก็เลือก Tag โดยทำตามขั้นตอนข้างล่าง<br />1. ตรงส่วนของ Selector Type: คุณก็เลือก Tag<br />2. เลือก Tag ที่คุณต้องการจะเปลี่ยนแปลงรูปแบบจากเมนูที่ให้เลือกทางขวาของ Tag: เช่น h1 อย่างในรูป<br />3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK<br />มัน ก็จะมี dialog box ของ CSS Rule Definition ขึ้นมา คุณก็สามารถตั้งว่าจะใช้ฟอนต์อะไร ขนาดเท่าไหร่ มี style แบบไหน แล้วก็อื่นๆอีกมากมาย ในหมวดต่างๆ dialog box ตัวนี้ได้ เมื่อตั้งเสร็จแล้ว คุณก็คลิก OK<br />คุณ ควรทดลองตั้งค่าและกำหนด style ต่างๆ ใน dialog box นี้ดู แต่ CSS เป็นเรื่องที่ซับซ้อนขึ้นมาอีกหน่อย ดังนั้นมันจึงต้องใช้เวลาและการทดลองทำ เพื่อทำความเข้าใจกับสิ่งนี้ และถ้าคุณอยากจะฟังคำอธิบายเกี่ยวกับ CSS rule แบบที่เป็นวีดีโอ คุณสามารถเข้าไปดูได้โดยคลิกที่ link นี้ เมื่อหน้าเปิดขึ้นมา คุณก็คลิกที่หัวข้อ “โครงสร้างของ Style Sheet” แต่ว่าคุณต้องมี Plug-in ของ Flash install อยู่ในเครื่องน่ะครับ ถึงจะดูวีดีโอได้<br />แต่ไม่ต้องกังวลน่ะครับถ้าคุณยังไม่ค่อยเข้า ใจเรื่อง CSS เพราะสิ่งนี้ต้องใช้เวลาในการเรียนรู้ คุณจะเข้าใจมันมากขึ้นเวลาที่เราได้เริ่มทำโปรเจ็คในตอนท้ายของการเรียน เรื่องนี้<br />ในตอนต่อไปเราจะพูดถึงเรื่องการใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ<br />หลัง จากที่คุณได้ออกแบบ layout ของ template แล้ว ไม่ว่าจะด้วยวิธีใช้ table หรือ tags div ในการออกแบบ ตอนนี้คุณก็สามารถใส่รูปต่างๆ สิ่งที่อยู่ในเมนูของหน้าเว็ป ตัวหนังสือ เช่น รายละเอียดเกี่ยวกับเรื่องลิขสิทธิ์ของเว็ปไซด์คุณ และก็อื่นๆ ซึ่งองค์ประกอบต่างๆเหล่านี้จะเป็นตัวกำหนดรูปแบบโดยรวมของเว็ปไซด์คุณ<br />การใส่ตัวหนังสือ<br /> <br />คุณ สามารถพิมพ์ตัวหนังสือลงไปในหน้าเว็ป ในแบบเดียวกับที่คุณทำในโปรแกรมพวก Microsoft Word หลังจากนั้น คุณก็สามารถเปลี่ยนแปลงรูปแบบของตัวหนังสือได้โดยใช้ Proprety Inspector ดังรูปตัวอย่างข้างล่าง แต่ในกรณีที่คุณจะทำแบบนี้ได้ คุณต้องได้กำหนดรูปแบบของ style ไว้ก่อนแล้ว แบบที่เราพูดถึงการสร้าง style sheets ในบทก่อน(ตอนที่ 04 : การสร้าง CSS Style Sheet)<br />นอก จากนี้แล้ว คุณยังสามารถตั้ง style ได้ โดยใช้ tags html ทั่วๆไป แบบรูปตัวอย่างข้างล่าง ซึ่งคุณสามารถเปลี่ยนแปลงรูปแบบของสิ่งที่อยู่ใน tags html ได้โดยกำหนดรูปแบบใหม่ได้ในไฟล์ CSS<br />การใส่รูปภาพ<br /> <br />คุณสามารถใส่รูปภาพไปในหน้าเว็ปได้ โดยไปที่เมนู Insert > Image แล้วก็เลือกรูปที่คุณต้องการ แล้วคลิก OK<br /> <br />คุณสามารถจัดระเบียบการวางรูปภาพ เป็นชิดซ้าย ชิดขวา ตรงกลาง หรืออื่นๆ โดย<br /> <br />1. คลิกที่รูป เพื่อเลือกมัน<br />2. ตรง Property Inspector ข้างล่าง(ถ้าคุณไม่เห็นมัน ให้ไปที่เมนู Window แล้วเลือก Properties) แล้วก็เลือกการจัดระเบียบอย่างที่คุณต้องการ จากเมนู Align ดังรูปตัวอย่างข้างล่าง และคุณก็ยังสามารถจัดระเบียบของสิ่งที่อยู่ภายใน cell หรือ tag div ที่คลุมรูปนี้ โดยใช้เมนูตรงนี้เช่นเดียวกัน<br />การใส่เมนู<br /> <br />ตรง ส่วนของสิ่งที่เป็นเมนูของหน้าเว็ป คุณสามารถทำให้โดยใช้ตัวหนังสือทั่วไป แล้วก็กำหนด style ลงไปโดยใช้ CSS หรือถ้าคุณชำนาญมากขึ้น คุณก็สามารถใช้ code javascript เพื่อทำให้เมนูของคุณมีลูกเล่นมากขึ้น และก็ยังมีอีกหลายวิธีในการสร้างเมนูสำหรับหน้าเว็ป แต่เราจะไม่พูดถึงสิ่งเหล่านี้ ในการเรียนขั้นพื้นฐานชุดนี้<br /> <br />ตอนต่อไปเราจะพูดถึงเรื่อง การสร้าง Libraries และ Server Side Includes<br />การใช้ Server Side Includes<br /> <br />เวลา ที่คุณออกแบบเว็ปไซด์ คุณควรออกแบบให้มันง่ายในการเปลี่ยนแปลงหรือเพิ่มข้อมูลได้ภายหลัง ตัวอย่างเช่น เวลาที่คุณทำหน้าเพิ่มเข้าไปในเว็ปไซด์ คุณก็คงอยากจะให้เมนูในเว็ปไซด์ของคุณเพิ่มตามไปด้วย เพื่อที่จะสามารถ link ไปยังหน้าใหม่ที่เพิ่มเข้ามานั้นได้ แล้วคุณก็อาจจะอยากเปลี่ยนแปลงส่วนที่เหมือนกันในแต่ละหน้า เช่น ส่วนที่เป็น footer ซึ่งโดยส่วนใหญ่แล้วจะเอาไว้ตรงล่างสุดของหน้า เพื่อใส่ข้อมูลเกี่ยวกับลิขสิทธิ์(copyright)ของเว็ปไซด์คุณ โดยที่ไม่ต้องไปเปลี่ยนมันในทุกๆหน้าที่มีสิ่งนี้อยู่ มันจึงเป็นการดีที่คุณจะใช้สิ่งที่เรียกว่า server side include(ssi) ข้อดีของมันก็คือเมื่อคุณเปลี่ยนแปลงสิ่งที่คุณตั้งเป็น include หรือตัวที่คุณเปลี่ยนแปลงได้ คุณก็ไม่จำเป็นต้องเข้าไปเปลี่ยนแปลงทุกๆหน้าที่มีสิ่งนั้นอยู่ มันจะเปลี่ยนแปลงทุกๆหน้าที่ใช้สิ่งนั้นร่วมกันให้คุณโดยอัตโนมัติ แล้วคุณก็ไม่จำเป็นต้อง upload หน้าที่เปลี่ยนแปลงเหล่านั้นที่ใช้ตัว include ไปยัง server ทุกครั้งที่คุณทำการเปลี่ยนแปลง คุณแค่ upload ตัวไฟล์ include ที่คุณเปลี่ยนแปลงตัวนั้นตัวเดียว ไปยัง server<br />ข้อที่คุณควรรู้ : ทุกหน้า html ที่คุณสร้างขึ้นและใส่ Template ที่มีตัว include ลงไป คุณต้องตั้ง extension หรือนามสกุลเป็น .shtml หรือ .shtm และ server ที่คุณใช้สำหรับเก็บข้อมูลเว็บไซด์ของคุณ จะต้องรองรับการใช้งาน server side include(ssi) ด้วย การสอนในตอนนี้จะพูดถึงวิธีทำอย่างคร่าวๆ เพื่อให้คุณเข้าใจวิธีทำงาน ssi แต่การที่คุณจะทำให้มันใช้งานได้จริงๆในเว็ปไซด์ของคุณ คุณต้องถามคำถามเหล่านี้กับบริษัทที่รับ Host เว็ปไซด์ของคุณ<br />- server ที่คุณใช้อยู่สามารถใช้งาน server side include ได้หรือเปล่า ?<br />- ถ้าได้ จะต้องเอาไฟล์ที่เป็นตัว include ไปไว้ในโฟลเดอร์ชื่ออะไร และอยู่ใน directory ไหน<br />- จะ ต้องตั้งชื่อของ extension หรือนามสกุลของไฟล์ที่ใส่ตัว include ลงไปเป็นอะไร (โดยส่วนใหญ่แล้ว จะเป็น .shtml หรือ .shtm) และจะต้องตั้งชื่อ extension หรือนามสกุลของไฟล์ ssi เป็นอะไร ซึ่งตัวนี้ แล้วแต่ผู้ให้บริการ server แต่ละที่ บางที่ก็เป็น .ssi .inc หรือ .txt<br /> <br />ดังนั้น คุณต้องรู้ข้อมูลพวกนี้ก่อน จึงจะสามารถใช้งาน server side include ได้<br />การใช้ Server Side Include จะมีประโยชน์และช่วยประหยัดเวลาได้มาก ถ้าคุณสร้างไฟล์ที่มีตัว include กับสิ่งเหล่านี้<br /> <br /> - header หรือตัวหัวข้อเรื่อง<br /> - footer หรือส่วนที่เป็นสิ่งที่อยู่ทางล่างสุดของหน้า ส่วนใหญ่จะเอาไว้ใส่ข้อมูลเกี่ยวลิขสิทธิ์หรือ copyright ของเว็ปไซด์<br /> - เมนูหลักของเว็ปไซด์<br /> - เมนูย่อยของเว็ปไซด์<br />การสร้างตัว include ทำได้โดย<br /> <br />1. Copy ส่วนใดส่วนหนึ่งในหน้าเว็ปที่คุณต้องการจะทำเป็นตัว include<br />2. สร้าง หน้า html ขึ้นใหม่ โดยไปที่เมนู File แล้วเลือก Blank Page ตรงช่อง Page Type: เลือก HTML ตรงช่อง Layout: เลือก <none> แล้วคลิก Create แบบรูปตัวอย่างข้างล่าง<br />3. เข้า ไปดูที่ code html ของหน้าใหม่ที่เพิ่งสร้างขึ้น โดยไปที่เมนู View แล้วเลือก Code หรือกดปุ่ม Code ดังรูปตัวอย่างข้างล่าง หลังจากนั้นก็เลือก code ทั้งหมดที่ dreamweaver สร้างไว้ให้ แล้วก็ delete มันออกไป<br />4. กลับ ไปที่ design view โดยกดปุ่ม Design หรือไปที่เมนู View แล้วเลือก Design หลังจากนั้นก็ paste สิ่งที่คุณได้ copy มาจากข้อที่ 1 ลงไป<br /> <br />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<br />ถ้า คุณไม่ได้ตั้ง 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 คุณจำเป็นต้องลงทะเบียนชื่อเว็ปไซด์ และรู้ที่อยู่ของเว็ปไซด์คุณอยู่ก่อนแล้ว<br />6. ขั้น ตอนสุดท้ายคือคุณตั้งชื่อไฟล์ตัวนี้ แล้ว save มันเป็นไฟล์ .html หรือ .ssi หรือนามสกุลอื่น(ขึ้นอยู่กับว่าบริษัทที่รับ host เว็ปไซด์คุณจะให้ตั้งเป็นนามสกุลอะไร) ไว้ในโฟลเดอร์ใหม่ โดยตั้งชื่อโฟลเดอร์ว่า includes หรือชื่ออื่นที่บริษัทที่รับ host เว็ปไซด์คุณจะให้ตั้งและให้เอาไปไว้ใน directory ไหน<br />การใส่สิ่งที่อยู่ในไฟล์ include ลงไปใน template<br /> <br />1. คลิกไปในบริเวณที่คุณต้องการใส่สิ่งที่อยู่ในไฟล์ include ใน template<br />2. ไปที่เมนู Insert แล้วเลือก Server Side Include หลังจากนั้นคุณก็ Browse หาไฟล์ include ในโฟลเดอร์ includes เลือกมัน แล้วก็คลิก OK<br />ตอน นี้ ส่วนที่เป็นตัว include ก็ได้เข้ามาอยู่ใน template ของคุณแล้ว ถ้าคุณต้องการเปลี่ยนแปลงสิ่งที่อยู่ในไฟล์ include ภายหลัง เช่น ในไฟล์ include อาจจะมีเมนูที่ link ไปหาหน้าอื่นอยู่ 10 หน้า แต่คุณได้เพิ่มหน้าขึ้นอีกในภายหลังอีก 2 หน้า คุณก็แค่ไปเพิ่มเมนูในไฟล์ที่เป็นตัว include เป็น 12 หน้า หลังจากนั้น หน้าเว็ปที่ link กับ template ตัวนี้ก็มีเมนู 12 หน้าเหมือนกันหมด และคุณก็แค่ upload ไฟล์ที่เป็นตัว include ที่คุณเปลี่ยนแปลงมันไปที่ server ตัวเดียว ก็จะเห็นการเปลี่ยนแปลงกับหน้าต่างๆที่ใช้ template ตัวนี้ คุณไม่จำเป็นต้อง upload หน้าที่ใช้ template ตัวนี้ขึ้นไปใหม่ ซึ่งก็ช่วยประหยัดเวลาคุณได้มาก<br />การใช้ Library Items ใน Dreamweaver<br /> <br />ถ้า คุณไม่ต้องการที่จะสร้างไฟล์ที่มีนามสกุล .shtml หรือ server ที่คุณใช้บริการอยู่ไม่รองรับการใช้งาน server side includes คุณก็สามารถใช้ Library items ใน Dreamweaver สำหรับเก็บส่วนที่ใช้บ่อยๆในหลายๆหน้าของเว็ป เพื่อให้ง่ายต่อการ update หน้าเหล่านั้น เช่น ส่วนที่เป็นเมนู เมนูย่อย การเปลี่ยนแปลงสิ่งเหล่านี้ที่อยู่ใน Library ก็จะ update ข้อมูลในแต่ละหน้าที่ใช้ Library ตัวนั้น แต่คุณต้อง upload แต่ละหน้าที่เปลี่ยนแปลงไปยัง server ใหม่ทั้งหมดถึงจะเห็นผลที่เปลี่ยนแปลง<br />การสร้าง Library item ทำได้โดย :<br /> <br />1. เลือก แล้ว copy ส่วนที่คุณอยากทำเป็น Library items ใน template<br />2. ไปที่เมนู File เลือก New แล้วก็ Blank Page แล้วก็ Library item แล้วคลิก Create<br />3. ไฟล์ Library ก็เปิดขึ้นมา คุณก็ paste สิ่งที่คุณ copy มา ไปในนั้น<br />4. คุณก็ save แล้วก็ตั้งชื่อที่เหมาะสมให้กับไฟล์<br />หลังจากที่คุณสร้าง Library item แล้ว คุณก็สามารถ insert หรือเอามันไปใส่ใน template หรือในหน้าเว็ปต่างๆได้ โดยใช้วิธีข้างล่างนี้<br /> <br />1. ไปที่เมนู Window แล้วเลือก Assets<br />2. คลิกที่ไอคอนของ Library(ดูรูปข้างล่าง)ใน panel Assets<br />3. เลือกชื่อของ library ที่คุณต้องการใช้<br />4. กดปุ่ม Insert ที่อยู่ข้างล่างของ panel นี้นการ ใช้งาน Template คุณจำเป็นต้องตั้ง editable regions หรือส่วนที่สามารถเปลี่ยนแปลงได้ ส่วนนี้ใน Template จะเอาไว้สำหรับใส่เนื้อหา หรือสิ่งต่างๆไปในหน้าเว็บ ซึ่งจะแตกต่างกันไปในแต่ละหน้า<br />เราสามารถสร้าง editable regions ใน Template ได้โดย :<br />1. เอา cursor ไปคลิกที่ส่วนที่คุณต้องการให้สามารถเปลี่ยนแปลงได้<br />2. ไปที่เมนู Insert แล้วเลือก Template Objects แล้วก็เลือก Editable Region<br />3. ตั้ง ชื่อเฉพาะให้กับ editable region หรือส่วนที่เปลี่ยนแปลงได้ตัวนั้น เช่น ตั้งว่า content ถ้าคุณจะเอาส่วนนั้นไว้ใส่เนื้อหาหลักของหน้า<br />4. ส่วนที่เป็น editable region ก็จะปรากฏใน Template โดยแสดงเป็นกรอบสี แล้วมีชื่อที่คุณตั้งอยู่ข้างใน ดังรูปตัวอย่างข้างล่าง<br />ถ้า คุณมี library item (เช่น ส่วนที่เป็นเมนูย่อย ) หรือมี banner หรือสิ่งอื่นๆ อยู่ใน Template ที่จะปรากฎในหน้าเว็บเป็นส่วนใหญ่ที่ใช้ template ตัวนั้นเป็นต้นแบบในการสร้าง แต่ก็จะมีการเปลี่ยนแปลงบ้างในบางหน้า คุณก็สามารถใส่ตัว library item หรือ banner หรือสิ่งอื่นๆ ไว้ใน template ตัวนั้น หลังจากนั้นคุณก็เลือกมัน แล้วก็สร้าง editable region จากสิ่งที่คุณต้องการจะให้เปลี่ยนแปลงได้ วิธีนี้จะทำให้หน้าเว็บใหม่ที่คุณสร้างขึ้นมาโดยใช้ template ตัวนี้เป็นต้นแบบ จะมีสิ่งที่อยู่ใน library item หรือ banner หรือสิ่งอื่นๆ ที่คุณตั้งเป็น editable region ในหน้านั้น แล้วคุณยังก็สามารถเปลี่ยนแปลงสิ่งนั้น โดยใส่สิ่งอื่นแทนลงไป ในหน้าที่คุณต้องการจะเปลี่ยนครับ<br />การสร้างหน้า HTML หรือ SHTML ขึ้นใหม่ โดยใช้ template ที่คุณได้สร้างขึ้นเป็นต้นแบบ ทำได้โดย<br />1. ไป ที่เมนู File แล้วเลือก New แล้วก็ Page from Template หลังจากนั้นก็เลือกชื่อเว็บไซด์ของคุณ เช่น ของผม ผมก็เลือก samplesite จากนั้นก็เลือกชื่อของ template ที่คุณจะใช้ซึ่งคุณได้สร้างเอาไว้ในเว็บไซด์นั้น แล้วก็กดปุ่ม Create<br />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<br />3. เปลี่ยนชื่อไดเดิ้ลของหน้าเว็บคุณ ให้เหมาะสมกับหน้าที่คุณกำลังทำอยู่ เช่น ถ้าหน้าที่คุณกำลังทำอยู่เป็นหน้าแรกของเว็บไซด์ คุณก็ควรจะพิมพ์ว่า ขอต้อนรับสู่เว็บไซด์ samplesite.com หรืออะไรที่เกี่ยวข้องกับหน้านั้น ซึ่งผมมั่นใจว่าคุณจะตั้งไตเติ้ลได้เพราะ และเหมาะสมกว่าตัวอย่างที่ผมให้ครับ ;-) คุณสามารถพิมพ์ไดเดิ้ลของหน้าได้โดยไปที่เมนู Modify แล้วก็เลือก Page Properties แล้วก็เลือก Title/Encoding แล้วในที่สุด ;-) คุณก็พิมพ์สิ่งที่คุณต้องการลงไปในช่อง Title: ครับ หรือถ้าคุณขี้เกียจทำตามขั้นตอนเหล่านี้ คุณก็สามารถพิมพ์ชื่อไตเติ้ลของหน้าลงไปบนช่อง Title: ของหน้าที่คุณกำลังทำงานอยู่แบบรูปที่สองข้างล่างครับ มันก็จะได้ผลลัพท์แบบเดียวกันครับ สิ่งที่คุณพิมพ์ลงไปก็จะไปโชว์ตรงบาร์ด้านบนของ Browser Window<br />4. ใส่ ข้อมูลที่เกี่ยวข้องกับหน้านั้นของเว็บไซด์คุณ ไปในส่วนที่เรียกว่า meta data ซึ่งข้อมูลตรงนี้จะไม่สามารถมองเห็นได้ด้วยตาเปล่า ;-) สำหรับผู้ที่เข้ามาดูเว็บไซด์คุณ (หมายความว่า ถ้าผู้เข้ามาดูอยากจะเห็นข้อมูลตรงนี้ เขาต้องเข้าไปดูใน code XHTML ของหน้านั้น ถึงจะมองเห็น) ส่วนใหญ่จะนิยมใส่ไปในหมวดของ keywords และ description<br />ตรงส่วนของ keywords เป็นส่วนของคำที่เกี่ยวข้องกับเว็บไซด์ของคุณ เช่น ถ้าเว็บไซด์ของคุณเกี่ยวกับข่าวดารา คุณอาจจะพิมพ์คำว่า ดารา แล้วพิมพ์ , หรือเครื่องหมาย comma หรือตัวลูกน้ำ(ถ้าผมจำไม่ผิด ผมคิดว่ามันเรียกว่าตัวลูกน้ำ) เคาะทีนึง แล้วก็ตามด้วยคำอื่นๆที่เกี่ยวข้อง เช่น ซุบซิบ แล้วพิมพ์ , (comma) แล้วก็เคาะทีนึง แล้วก็พิมพ์คำอื่นๆที่เกี่ยวข้องอีก คุณควรให้ keywords ของคุณ อยู่ภายใน 10 – 20 คำ เพราะถ้ามากกว่านั้น search engine บางตัวก็อาจจะมองข้ามเว็บไซด์ของคุณได้ เพราะมันอาจจะมองว่า เว็บไซด์ของคุณเป็นเว็บไซด์ครอบจักรวาล ซึ่งเกี่ยวข้องกับเรื่องทุกเรื่องในโลกนี้ ดังนั้นมันก็จะไม่สนใจ<br />ตรงส่วนของ description เป็น ส่วนของประโยคอธิบายเนื้อหาที่อยู่ในหน้านั้นของเว็บไซด์คุณ เช่น ถ้าหน้านั้นเป็นหน้าข่าวซุบซิบดารา ซึ่งอยู่ภายในเว็บไซด์ของคุณที่เกี่ยวกับข่าวดารา คุณอาจจะพิมพ์ว่า<br />รับรู้ข้อมูลข่าวดาราแย่งแฟน แย่งรถ แย่งงาน มีกิ๊กใหม่ เป็นเกย์ ได้จากหน้านี้ ข้อมูลเจาะลึกที่สุดในประเทศไทย<br />ก็ประมาณนี้ครับ ข้างล่างคือตัวอย่างของ meta data ซึ่งอยู่ใน code XHTML ของเว็บไซด์ sanook.com ครับ<br />คุณสามารถใส่ส่วนของ meta data ได้โดย :<br />4.1 ไปที่เมนู Insert แล้ว เลือก HTML แล้วก็เลือก Head Tags จากนั้นก็เลือก Keywords มันก็จะมี Dialog box ของ Keywords ขึ้นมา คุณก็พิมพ์คำที่คุณต้องการจะใส่ลงไป โดยทำตามวิธีที่กล่าวถึงข้างบนครับ<br />4.2 ไปที่เมนู Insert แล้ว เลือก HTML แล้วก็เลือก Head Tags จากนั้นก็เลือก Description มันก็จะมี Dialog box ของ Description ขึ้นมา คุณก็พิมพ์ประโยคที่คุณต้องการจะใส่ลงไปครับ<br />รูปข้างล่างคือตัวอย่างของเว็บไซด์ของผมเอง เวลาที่มีคนพิมพ์ว่า ดีวีดี-รอมสอนโปรแกรม ลงไปในช่อง Search ของ Google เพื่อหาข้อมูล มันก็จะแสดงข้อมูลที่คุณใส่ไปในส่วนของ meta data ออกมา ในแบบที่คุณเห็นในรูปน่ะครับ ซึ่งจริงๆแล้วผมมั่นใจว่าคงไม่มีใครพิมพ์คำว่า ดีวีดี-รอมสอนโปรแกรม ลงไปในช่อง Search หรอกครับ แต่นี่ก็เพื่อเป็นตัวอย่างให้คุณเข้าใจได้ง่ายขึ้นครับ<br />การใส่ข้อมูลลงไปในส่วนของ meta data ก็เป็นสิ่งหนึ่งที่ทำให้คนหาเว็บไซด์ของคุณได้ง่ายขึ้น แต่การทำการตลาดกับ Search Engine เป็นเรื่องที่ค่อนข้างละเอียดและซับซ้อน มีคนที่รู้วิธีการทำให้เว็บไซด์สามารถติดอันดับต้นๆเวลาที่มีคนหาข้อมูลใน Search Engine พวก Google, Yahoo ซึ่งเขาสามารถใช้ความรู้นี้ทำเป็นอาชีพได้เลย ผมไม่ได้รู้ลึกซึ้งขนาดนั้นครับ แต่ผมก็ได้ลูกค้าหลายคนที่หาข้อมูลใน Search Engine แล้วมาพบเว็บไซด์ผม ดังนั้น การทำการตลาดกับ Search Engine ก็เป็นวิธีที่ได้ผล และประหยัดอันหนึ่ง โดยเฉพาะสำหรับผม เพราะผมไม่มีเงินไปทำการตลาดในช่องทางอื่นครับ<br />5. พิมพ์ หรือ paste ข้อมูลของหน้านั้น ลงไปในส่วนที่เปลี่ยนแปลงได้ (Editable Region) ที่คุณได้ตั้งเอาไว้ของหน้านั้น เช่น ในส่วนที่เป็นหัวข้อเรื่อง (Heading) และส่วนที่เป็นเนื้อหา (Content) แบบตัวอย่างรูปข้างล่าง ;-)<br />6. ใส่รูปภาพหรือไฟล์ Flash ไป ในส่วนที่สามารถเปลี่ยนแปลงได้ (Editable region) แล้วก็จัดระเบียบ รูปภาพหรือไฟล์ Flash ให้เป็นในแบบที่คุณต้องการโดยใช้เครื่องมือใน Property Inspector เหมือนรูปตัวอย่างข้างล่าง<br />7. เปลี่ยนแปลงในส่วนของ Library items หรือส่วนของ SSI(server side includes) ให้เป็นในแบบที่คุณต้องการ<br />8. คุณก็ทำวีธีการแบบเดียวกันนี้กับหน้าอื่นๆครับ<br /> <br />ในบางหน้า คุณอาจจะต้องการสิ่งที่เรียกกันว่าฟอร์ม (Form) เช่น ในหน้า contact us หรือหน้าที่ต้องการให้คนที่เข้ามาดูเว็บไซด์ติดต่อกับคุณ หรือบริษัทคุณ ซึ่งจะมีช่องต่างๆให้คนที่ต้องการติดต่อกรอกข้อมูลลงไป ในบทเรียนนี้ผมจะพูดคร่าวๆเกี่ยวกับแบบฟอร์มในหน้าเว็บครับ<br />คุณสามารถใส่ฟอร์มลงไปในหน้าเว็บได้โดย :<br /> ไปที่เมนู Insert แล้วเลือก Form แล้วก็เลือก Form แบบรูปตัวอย่างข้างล่าง<br />ในการทำแบบฟอร์มใหม่ทุกครั้ง คุณต้องเลือก Insert > Form > Form ก่อนทุกครั้งแบบในรูปตัวอย่าง เพื่อให้ทุกอย่างที่คุณจะให้อยู่ในแบบฟอร์ม เช่น ช่องใส่ตัวหนังสือ( Text Field), ปุ่มตัวเลือก (Radio Button) และอื่นๆ อยู่ภายใน Tag Form ไม่อย่างงั้น มันจะใช้การไม่ได้ หลังจากนั้น คุณก็สามารถใส่สิ่งต่างๆ ลงไปในแบบฟอร์มได้ เช่น ถ้าคุณจะใส่ช่องกรอกตัวหนังสือ คุณก็ไปที่ Insert > Form > Text Field แล้วก็ทำแบบเดียวกันกับสิ่งอื่นๆที่คุณต้องการใส่ในแบบฟอร์ม ปุ่มที่สำคัญที่สุดปุ่มหนึ่งในแบบฟอร์ม คือปุ่ม Submit หรือปุ่มส่งข้อมูลในฟอร์ม ซึ่งคุณจำเป็นต้องมีในแบบฟอร์มทุกอันของคุณ ไม่งั้นคนที่กรอกแบบฟอร์มก็จะไม่สามารถส่งข้อมูลที่กรอกได้ หลังจากที่คุณใส่ช่องตัวหนังสือ เมนู ปุ่มตัวเลือก และสิ่งอื่นๆ จนแบบฟอร์มของคุณเสร็จสมบูรณ์แล้ว สิ่งสำคัญอีกอย่างที่คุณต้องทำคือ คุณต้องคุยกับผู้ที่ให้บริการ Host เว็บไซด์ของคุณว่าจะต้องทำอะไรบ้าง และใส่อะไรลงไปในช่อง Action และ Method เพื่อให้แบบฟอร์มของคุณส่งไปที่ใดที่หนึ่งได้ มันอาจจะถูกส่งไปเก็บไว้ในฐานข้อมูล (database) หรือส่งไปยังอีเมล์ของคุณ หรือทั้งสองอย่าง<br />นี่ คือการแนะนำคร่าวๆเกี่ยวกับหน้าที่เป็นแบบฟอร์ม แต่การทำหน้าฟอร์มเป็นเรื่องที่ค่อนข้างละเอียด ถ้าจะสอนทั้งหมดคงจะต้องเป็นตอนๆหนึ่งเกี่ยวกับฟอร์มอย่างเดียวเลยครับ ถ้าคุณต้องการให้ผมเขียนตอนๆหนึ่งเกี่ยวกับหน้าฟอร์มอย่างเดียวเลย คุณก็ส่งความคิดเห็นมาน่ะครับ ถ้ามีคนจำนวนมากที่ต้องการเรียนเรื่องนี้ ผมก็จะเขียนครับ และถ้าคุณอยากจะดูวีดีโอเกี่ยวกับ การใส่ checkboxes และ radio buttons ในแบบฟอร์ม คุณก็สามารถไปดูได้ที่ link นี้ครับ โดยคลิกที่ตัวหนังสือ การใส่ checkboxes และ radio buttons แต่คุณต้องมี Flash Plug-in installed ในเครื่องน่ะครับถึงจะดูได้ครับ<br />หลังจากที่คุณสร้างหน้าต่างๆที่อยู่ในเว็บไซด์ของคุณเสร็จแล้ว ตอนนี้คุณก็ต้องสร้าง Link เพื่อ เชี่อมหน้าต่างๆเหล่านั้นเข้าไว้ด้วยกัน คุณอาจจะสร้าง Link ตรงส่วนที่เป็นเมนู ตัวหนังสือ หรือตรงรูปภาพในแต่ละหน้า มี Link 3 แบบที่ใช้กันมาก ที่เราจะพูดถึงในบทความนี้คือ Link แบบทั่วๆไป Link แบบ Anchor point และ Link ที่ไปหาเว็บไซด์อื่น<br />1. Link แบบทั่วๆไป การสร้าง Link ทำได้โดย :<br />1.1 เลือกตัวหนังสือ หรือรูปภาพที่คุณต้องการจะสร้าง Link<br />1.2 กดไอคอนที่เข้ารูปโฟลเดอร์สีเหลือง ที่อยู่ถัดจากช่อง Link ตรง Property Inspector panel<br />1.3 มันก็จะเปิด Dialog Box ขึ้นมา คุณก็ Browse หาหน้าเว็ปที่คุณต้องการจะ Link ไปหา แล้วก็คลิกเลือกมัน<br />1.4 ถ้าคุณ Link ไป ยังหน้าเว็ปของคุณ ที่มีการใช้ Server Side Include (SSI) คุณต้องเช็คให้แน่ใจว่า คุณได้เลือกการ Link แบบ Relative to: Site Root ไม่งั้นมันจะ Link หาหน้านั้นไม่เจอเวลาที่มีคนกดที่ Link แต่โดยทั่วไปแล้ว ถ้าเว็บไซด์ของคุณไม่ได้ใช้ SSI Dreamweaver CS3 จะเลือก Relative to: Document เป็นตัว Default1.5 คลิก OK ตอนนี้คุณก็สร้าง Link เสร็จแล้ว<br />ถ้าคุณสร้าง Link ใน Template หรือใน Libra item Dreamweaver ก็จะถามคุณว่า คุณต้องการจะ Update หน้าต่างๆที่ใช้ Template หรือ Library item ตัวนี้หรือเปล่า ถ้าคุณต้องการก็คลิก Update<br />2. Link แบบ Anchor point มี Link อีกประเภทหนึ่งที่คุณอาจจะจำเป็นต้องทำ ในกรณีที่คุณมีหน้าเว็ปที่มีข้อมูลมากและยาวอยู่ในนั้น เช่นในหน้า FAQ หรือคำถามที่ถูกถามบ่อย ซึ่งจะมีข้อมูลของคำถามแต่ละข้อที่ถูกถามอยู่ด้านบนของหน้า และคำตอบของแต่ละคำถาม อยู่ด้านล่างของหน้า เพื่อความสะดวกในการดูข้อมูล เมื่อผู้เข้ามาดูคลิกที่ Link ของคำถามแต่ละข้อ มันก็จะเลื่อนลงไปยังด้านล่างของคำตอบในข้อนั้นๆ Link ชนิดนี้เรียกว่า Anchor Link (อ่านว่า แองเคอร์ ครับ)<br />การสร้าง Anchor Link ทำได้โดย :<br />2.1 เอา Cursor คลิกที่ส่วนที่คุณต้องการจะ Link ไปหาในหน้านั้น<br />2.2 กดที่ปุ่ม Named Anchor<br />2.3 ตั้งชื่อของ Anchor point แล้วคลิก OK มันก็จะมีรูปสมอเรือแสดงอยู่ที่จุดที่คุณกำหนดให้เป็น Anchor point ดังรูปตัวอย่างข้างล่าง<br />2.4 เลือกตัวหนังสือที่คุณต้องการจะสร้าง Anchor Link แล้วไปพิมพ์ชื่อของ Anchor point ที่คุณจะ Link ไปหา ตรง Property Inspector คุณต้องพิมพ์ # นำหน้าชื่อ Anchor point แบบรูปตัวอย่างข้างล่างครับ<br />2.5 ตอนนี้คุณก็ได้สร้าง Anchor point และทำ Link ไปหา Anchor point ตัวนั้นแล้ว ถ้าคุณ Preview หน้าเว็บนี้ใน Browser เวลาที่คุณคลิกที่ Link หน้านั้นก็จะเลื่อนลงไปตรงจุดที่ที่คุณสร้าง Anchor Link เอาไว้<br />3. การ Link ที่ไปหาเว็บไซด์อื่น สามารถทำได้โดย เลือกตัวหนังสือหรือรูปภาพที่คุณต้องการใช้เป็นตัว Link แล้วก็พิมพ์ที่อยู่ของเว็บไซด์ที่คุณจะ Link ไปหาในช่อง Link ของ Property Inspector อย่างในรูปตัวอย่างข้างล่าง แล้วสิ่งหนึ่งที่ต้องระวังในการทำ Link ไปยังเว็บไซด์อื่นก็คือ คุณต้องพิมพ์ชื่อเต็มของ URL ของเว็บไซด์นั้นๆ ไม่อย่างงั้น มันอาจจะไม่ Link ไปหาเว็บไซด์อื่น เช่น ถ้าคุณจะ Link ไปหาเว็บไซด์ www.dw3thai.com คุณต้องพิมพ์ชื่อเต็มของ URL คือ http://www.dw3thai.com ไม่ใช่แค่ www.dw3thai.com หรือ dw3thai.com ครับ<br />ถ้าคุณอยากให้เว็บไซด์ที่คุณจะ Link ไป หา เปิดขึ้นมาใน Window ของมันเอง เหมือนกับที่เวลาคุณดูในเว็บไซด์ที่โชว์รูปดารา เวลาที่คุณคลิกที่รูปเล็กๆของดารา มันก็จะเปิด Window ใหม่ขึ้นมา ซึ่งจะโชว์รูปขนาดใหญ่ของดาราคนนั้น คุณก็สามารถทำได้โดยเลือกเมนู _blank ดังรูปตัวอย่างข้างล่างครับ<br />ก็จบแล้วครับ สำหรับการสร้าง Link พื้นฐาน 3 แบบ ถ้าคุณอยากดูในแบบที่เป็นวีดีโอ คุณก็ไปดูได้ที่ Link นี้ครับ แล้วคลิกที่หัวข้อ พื้นฐานของการสร้าง link ในตอนต่อไป ซึ่งเป็นตอนสุดท้ายของบทความชิ้นนี้ ก่อนที่ผมจะเขียนเรื่องแบบฝึกหัดในการทำเว็บไซด์อีก 3 ตอน ผมจะพูดถึงเรื่อง การทดสอบการใช้งานของเว็ปไซด์ และการ upload เว็ปไซด์ไปยัง Server ที่ host เว็ปไซด์ของคุณครับ<br />ที่มา.http://writer.dek-d.com/Writer/story/view.php?id=341538<br />