Group Blog
Dreamweaver
เรื่องทั่วไป
ธันวาคม 2550
>>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
13 ธันวาคม 2550
สอน Dreamweaver CS3 ตอนที่ 04 : การสร้าง CSS Style Sheet
สอน Dreamweaver CS3 ตอนที่ 03 : การสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template
All Blogs
สอนการใช้งานโปรแกรม Dreamweaver CS3 ในขั้นพื้นฐาน : ตอนที่ 10/03 : การ Preview และ upload
สอนการใช้งานโปรแกรม Dreamweaver CS3 ในขั้นพื้นฐาน : ตอนที่ 10/02 : การ Preview และ upload
สอนการใช้งานโปรแกรม Dreamweaver CS3 ในขั้นพื้นฐาน : ตอนที่ 10/01 : การ Preview และ upload
สอน Dreamweaver CS3 : ตอนที่ 09 : การสร้าง Link ใน Dreamweaver CS3
สอน Dreamweaver CS3 : ตอนที่ 08 : การสร้างหน้า Html ในไซด์ ทั้งในหน้าที่เป็นส่วนของเนื้อหาและฟอร์ม
สอน Dreamweaver CS3 : ตอนที่ 07 : การกำหนด Editable Regions ใน Template
สอน Dreamweaver CS3 ตอนที่ 06 : การสร้าง Libraries และ Server Side Includes
สอน Dreamweaver CS3 ตอนที่ 05 : การใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template
สอน Dreamweaver CS3 ตอนที่ 04 : การสร้าง CSS Style Sheet
สอน Dreamweaver CS3 ตอนที่ 03 : การสร้าง Page Layout หรือรูปแบบของหน้าเว็ปใน Dreamweaver Template
สอน Dreamweaver CS3 ตอนที่ 02 : การสร้าง Dreamweaver Template
สอน Dreamweaver CS3 ตอนที่ 01 : การ define site ใหม่ใน Dreamweaver
สอน Dreamweaver CS3 หน้าแรก : แนะนำถึงสิ่งต่างๆที่จะสอน
แนะนำวิธีการใช้งานขั้นพื้นฐานของโปรแกรม Dreamweaver CS3
สอน 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 น.
1 comments
Counter : 2713 Pageviews.
Share
Tweet
ไม่อยากบอกเลยว่า ขนาดจุดูทั้งหนังสือ และวีดีโอ ทำออกมายังมั่ว
โดย:
กระจ้อน
วันที่: 16 กรกฎาคม 2551 เวลา:19:29:53 น.
ชื่อ :
* blog นี้ comment ได้เฉพาะสมาชิก
Comment :
*ส่วน comment ไม่สามารถใช้ javascript และ style sheet
tutorcat
Location :
[ดู Profile ทั้งหมด]
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 3 คน [
?
]
Friends' blogs
Destinyhurtsme
Revolve
Webmaster - BlogGang
[Add tutorcat's blog to your web]
Links
Bloggang.com
Pantip.com
|
PantipMarket.com
|
Pantown.com
| © 2004
BlogGang.com
allrights reserved.