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

Dreamweaver CS3 เป็นโปรแกรมที่ดีตัวหนึ่งในการใช้สร้างเว็ปไซด์ มันเป็นโปรแกรมในแบบ WYSIWYG หรือ What you see is what you get หมายถึงถ้าคุณเห็นรูปแบบของหน้าเว็ปที่คุณออกแบบเป็นแบบไหนเวลาที่อยู่ในโปรแกรม มันก็จะออกมาเป็นแบบนั้นในบราวเซอร์หรือโปรแกรมที่ใช้ดูหน้าเว็ป มันช่วยให้คุณสร้างหน้า html ได้ โดยที่คุณไม่จำเป็นต้องรู้ code html เลย

แต่ก่อนที่คุณจะสร้างเว็ปไซด์ใน 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

การ define site ใหม่ใน Dreamweaver

01. สร้างโฟล์เดอร์ที่คุณจะใช้เก็บไฟล์ต่างๆที่จะใช้ในเว็ปไซด์ของคุณขึ้นมาใหม่ คุณควรตั้งชื่อของโฟล์เดอร์ให้คุณจำได่ง่ายว่ากำลังทำงานกับเว็ปไซด์อะไรอยู่ เช่น ถ้าคุณกำลังสร้างเว็ปไซด์ชื่อ samplesite.com คุณก็ควรตั้งชื่อโฟล์เดอร์ว่า samplesite ภายในโฟล์เดอร์นั้นคุณก็สร้างโฟล์เดอร์ย่อยขึ้นมาอีกอันหนึ่งตั้งชื่อว่า images แล้วคุณก็ copy ไฟล์ที่เป็นรูปภาพทั้งหมดที่จะใช้ในเว็ปไซด์ ไปไว้ในโฟล์เดอร์ images
02. เปิดโปรแกรม Dreamweaver CS3
03. Define ไซด์ใหม่ โดยไปที่เมนู Site แล้วเลือก New Site แล้วก็เลือกที่ Tab “Advanced”
04. ตั้งชื่อไซด์ของคุณในช่อง Site Name คุณควรตั้งชื่อเพื่อให้คุณจำได้ว่าคุณกำลังทำงานอยู่กับไซด์อะไร
05. คลิกที่ไอค่อนรูปโฟล์เดอร์สีเหลืองที่อยู่ทางขวาของช่อง Local Root Folder แล้วก็ browse หาโฟล์เดอร์ที่จะใช้เป็นเว็ปไซด์ของคุณ ที่คุณได้สร้างขึ้นในข้อที่ 01 เลือกโฟล์เดอร์นั้น แล้วคลิกปุ่ม open แล้วคลิกที่ปุ่ม select แล้วก็คลิกที่ปุ่ม OK ใน window Site Definition
06. ตอนนี้คุณก็น่าจะเห็นโฟล์เดอร์ชื่อ images ตรง File panel ทางขวามือแล้ว ถ้ายังไม่เห็นให้คุณไปที่เมนู Window แล้วก็เลือก Files


การสร้าง Dreamweaver Template
ข้อดีของการสร้าง 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 ข้อดีของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป

- ออกแบบและเข้าใจได้ง่ายในการใช้งาน
- ใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ ข้อเสียของการใช้ Table ในการกำหนดรูปแบบของหน้าเว็ป
- จะแสดงให้คนดูหน้าเว็ปเห็นสิ่งที่อยู่ใน Table ทั้งหมดได้ก็ต่อเมื่อ Table ตัวนั้นได้ถูกโหลดเสร็จแล้ว ซึ่งโดยทั่วไปแล้วจะช้ากว่าการใช้ CSS ในกำหนดรูปแบบของหน้าเว็ป
- การจะเปลี่ยนแปลงรูปแบบของหน้าเว็ปที่ใช้ Table จะต้องทำแบบหน้าต่อหน้าถ้าคุณไม่ได้ใช้ template ในการสร้างรูปแบบของหน้าต่างๆในเว็ปไซด์ และคุณต้อง upload หน้าที่เปลี่ยนแปลงเหล่านั้นไปที่ server อีกครั้ง หลังจากที่คุณได้แก้ไขมันแล้ว ข้อดีของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป
- หน้าเว็ปโหลดได้เร็ว ไฟล์ CSS ที่ Link กับหน้าเว็ปที่อยู่ในเว็ปไซด์จะถูกโหลดเพียงครั้งเดียว หลังจากนั้นมันก็จะใช้งานได้เลยโดยไม่ต้องโหลดใหม่กับทุกหน้าที่เปิด
- คุณสามารถเปลี่ยนหรือปรับปรุงรูปแบบของหน้าเว็ปทุกหน้าในเว็ปไซด์ของคุณ โดยการเปลี่ยนแปลงแค่สิ่งที่อยู่ในไฟล์ CSS ที่ Link กับหน้าต่างๆในเว็ปไซด์นั้น เพราะว่าการกำหนดรูปแบบของหน้าเว็ปได้ถูกแยกออกจากเนื้อหาของหน้าเว็ปเหล่านั้นแล้ว โดยการใช้ CSS ข้อเสียของการใช้ CSS ในการกำหนดรูปแบบของหน้าเว็ป
- ออกแบบและเรียนรู้การใช้งานได้ยาก
- อาจจะไม่สามารถใช้ได้กับโปรแกรมที่ใช้ดูหน้าเว็ปหรือบราวเซอร์เวอร์ชั่นเก่าๆ

การสร้าง CSS Style Sheet

การสร้างไฟล์ 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

การใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ การใส่ตัวหนังสือ
คุณสามารถพิมพ์ตัวหนังสือลงไปในหน้าเว็ป ในแบบเดียวกับที่คุณทำในโปรแกรมพวก 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 ที่คลุมรูปนี้ โดยใช้เมนูตรงนี้เช่นเดียวกัน


การสร้าง Libraries หรือ Server Side Includes

การใช้ 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: เลือก แล้วคลิก Create

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


การกำหนด Editable Regions ใน Template

ในการใช้งาน 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 ในเว็ปไซด์ทั้งในหน้าที่เป็นส่วนของเนื้อหาและหน้าที่เป็นฟอร์ม
การสร้างหน้า HTML หรือ SHTML ขึ้นใหม่ โดยใช้ template ที่คุณได้สร้างขึ้นเป็นต้นแบบ ทำได้โดย
1. ไปที่เมนู File แล้วเลือก New แล้วก็ Page from Template หลังจากนั้นก็เลือกชื่อเว็บไซด์ของคุณ จากนั้นก็เลือกชื่อของ 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
การสร้าง Link ในหน้าเว็บ
หลังจากที่คุณสร้างหน้าต่างๆที่อยู่ในเว็บไซด์ของคุณเสร็จแล้ว ตอนนี้คุณก็ต้องสร้าง 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 เป็นตัว Default
1.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

รู้จักกับ Photoshop CS 3

คุณสมบัติ Smart Fllters
คือการกำหนดคุณสมบัติให้กับเลเยอร์ โดยการแปลงให้เป็น Smart Objects ก่อน แล้วสามารถที่จะใช้ฟิวเตอร์ ( Fllter ) เพื่อแต่งภาพในเลเยอร์นั้นได้หลาย ๆ ฟิวเตอร์ได้โดยจะยังคงรักษาข้อมูลเดิมของภาพต้นฉบับไว้ รวมถึงสามารถกลับมาแก้ไข fllter ต่างๆ ได้อีกด้วย
คุณสมบัติ Quick Selection Tool
เครื่องมือที่ใช้เลือกพื้นที่หรือภาพได้อย่างฉลาดและรวดเร็ว โดยใช้วิธีการคำนวณสีที่ใกล้เคียงกันและเพิ่มพื้นที่ที่เราเลือกได้อัตโนมัติ ทำให้การเลือกภาพทำได้ง่ายและสะดวกมากขึ้นโดยไม่ต้องเสียเวลากับการคลิกเลาะภาพอีกต่อไป
การปรับสีภาพด้วยคำสั่ง Curve
สามารถสร้าง Curve เพื่อตกแต่งรูปได้อย่างง่ายดายด้วยคุณสมบัติของ Cllpping Warning และ In – Dlalog Histogram ซึ่งจะทำให้มองเห็นการทำงานของผลลัพธ์ได้ทันที สามารถปรับสีของภาพได้หลายระดับและปรับสีแยกได้ทีละแชนแนลสี ซึ่งจะช่วยให้การปรับแต่งแสงสีของภาพได้อย่างปราณีต
พาเล็ต
พาเล็ตใหม่นี้ ช่วยให้คุณแสตมป์ภาพได้ดียิ่งขึ้น เพราะสามารถเก็บตำแหน่งพิกเซลของภาพต้นฉบับที่เลือกจากเครื่องมือ Clone Stamp และ Healing Brush ไว้ได้ถึง 5 ชุดด้วยกัน ทำให้คุณเลือกสลับใช้งานภาพต้นฉบับ ที่จะแสตมป์ในจุดอื่นๆ ได้อย่างรวดเร็ว โดยไม่ต้องคลิกเลือต้นฉบับบ่อยๆความสามารถของ Vanishing Pointความสามารถใหม่อีกอย่าง คือ การสร้างพื้นที่ แบบ Perspective ด้วย Vanishing Point สามารถสร้างพื้นที่ระนาบ ( หรือ plane ) ได้หลายๆจุดในภาพเดียวกัน เพื่อนำรูปภาพ ข้อความ มาจัดวางลงภายในพื้นที่เชื่อมต่อกันได้แบบต่อเนื่อง

ข้อสอบข้อ 1 วิชาโปรแกรมสำเร็จรูป

ใช้เครื่องมือฮ Gradient สร้างพื้นหลังเป็นรูปแบบที่ต้องการ จากนั้นก็นำรูปเข้ามาโดยใช้ เครื่องมือ Magic wand จกานั้นก็ไปกดที่ตัด ดึงรูปลงมาที่งานของเราที่ต้องการ รูปต่างๆนั้น กด Ctrl+t ปรับรูปแบบต่างๆตามใจชอบ Brush เขียนข้อความตามใจขอบ จากนั้นก็ตกแต่ง และใช้เครื่องมือ Type เขียนข้อความที่เราต้องการจะเขียน เลื่อกรูปแบบต้างๆตามใจชอบ ไม่ว่าจะใส่เงา ขอบสีของข้อความ เป็นต้น มีอีก...(พิมพ์ไม่ทัน)

ประวัติ RATTAPONG BOMZAA

ชื่อ นายรัตพงษ์ ธานีรัตน์
ชื่อเล่น บอม
วันเกิด 8 กันยายน 2532
มีอยู่ 82 หมู่ 7 ตำบลปริก อำเภอทุ่งใหญ่ จังหวัดนครศรีธรรมราช 80240
กีฬาที่ชอบ ฟุตซอล
สัตว์เลี้ยงที่ชอบ สุนัข
กิจกรรมยามว่าง เล่นเกม
คติประจำใจ
จบจาก โรงเรียนทุ่งใหญ่เฉลิมราช อนุสรณ์ รัชมังคลาภิเษก
ศึกษาต่อ มหาวิทยาลัยเทคโนโลยีราชมงคลศรีวิชัย
คณะวิทยาศาสตร์และเทคโนโลยี
สาขาเทคโนโลยีคอมพิวเตอร์