สอน Dreamweaver CS3 ตอนที่ 03 : การสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template

คุณสามารถสร้างรูปแบบของหน้าเว็ปแบบทั่วๆไปโดยใช้ 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 ให้คุณทดสอบดูได้ ดังรูปตัวอย่างข้างล่างนี้



รูปของไซด์ตัวอย่างที่ผมสร้างใน Photoshop




รุปตัวอย่างที่แสดงว่าเราควรแบ่งเป็น กี่ 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 แล้วเลือก Properties




Property Inspector


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

คุณควรจะทดลองเปลี่ยนแปลงสิ่งต่างๆใน Table ดู เช่น ใส่สี background สร้าง Table อีกตัวข้างใน table ตัวนั้น เปลี่ยนแปลงการจัดรูปแบบของตัวหนังสือหรือรูปภาพในแต่ละ cell ของ table และก็อื่นๆ คุณจะได้ใช้ความรู้ที่คุณทดลองทำลงไปมากขึ้น เวลาที่เราจะทำโปรเจ็ค 01 : การสร้างรูปแบบของหน้าเว็ปโดยใช้ Table ในตอนท้ายของการเรียนเรื่องนี้ และตอนนี้ถ้าคุณอยากเข้าไปดูวิธีการตั้งค่าความกว้างของ table ในแบบที่เป็นวีดีโอ คุณก็สามารถไปดูที่ //www.dw3thai.com/dvd_info.html#08 เมื่อหน้าเปิดขึ้นมาแล้ว คุณก็คลิกที่หัวข้อ “การตั้งความกว้างของ 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 ในแบบที่สอนเป็นวีดีโอ คุณสามารถไปดูรายละเอียดและวีดีโอตัวอย่าง ได้ที่เว็ปไซด์นี้ //www.dw3thai.com ซึ่งจะมีดีวีดีสอนการใช้งานโปรแกรม โดยลินดาดอทคอม เป็นเวอร์ชั่นภาษาไทย (พากษ์ไทย) ด้วยความยาวกว่า 10 ชั่วโมง ในราคาเพียง 150 บาท (รวมค่าส่งทางไปรษณีย์ลงทะเบียน) และตอนนี้ก็มีทางเลือกอีกทางในการชำระเงิน โดยใช้บริการเรียกเก็บเงินปลายทางจากกรมไปรษณีย์ ซึ่งก็ช่วยให้คุณสะดวกและมั่นใจยิ่งขึ้น คุณสามารถเข้าไปดูรายละเอียดได้จาก link นี้ครับ

Create Date : 13 ธันวาคม 2550 Last Update : 13 ธันวาคม 2550 19:01:28 น. Counter : 2711 Pageviews.		1 comments
Share Tweet