คุยเฟื่องเรื่องรถ: สิงหาคม 2009

Adobe Photoshop CS3

เริ่มต้นกับการใช้โปรแกรม
1.ในส่วนของ Mene Bar คลิ๊กที่ File แล้วเลือก New จะปรากฏหน้าจอ New เพื่อกำหนดคุณสมบัติของงานใหม่
2.หน้าจอ New จะต้องกำหนดค่าต่าง ๆ ให้กับหน้าจอทำงานใหม่ที่ผู้ใช้ต้องการสร้างขึ้นซึ่งสามารถแจกแจงได้ตามนี้
1) Name ชื่อของชิ้นงานใหม่ที่เราสร้างขึ้น
2) Image Size ขนาดของชิ้นงานใหม่ที่เราสร้างขึ้น (กำหนดอันโนมัติ)
3) Preset Sizes ความกว้าง / สูงของชิ้นงานใหม่ที่สร้างขึ้น หน่วยเป็น Pixels
4) Width /Height ส่วนกำหนดความกว้าง/สูง ของชิ้นงานใหม่ โดยผู้ใช้เป็นผู้กรอกข้อมูลในส่วนนี้
5) ส่วนที่ใช้กำหนดหน่วยของความ กว้าง/สูง ของชิ้นงานใหม่
6) Resolution กำหนดจำนวน Pixels ต่อหน่วยพื้นที่
7) Mode กำหนดรูปแบบการแสดงผลของงาน
8) Contents กำหนดรูปแบบของ Background

การสร้างเอกสารใหม่ ใน Photoshop CS3
เมื่อสร้างไฟล์ใหม่ก็จะปรากฏหน้าต่าง new ก็จะมี Name = การตั้งชื่อหัวข้อเหนือไฟล์ Image Size = ขนาดความสูงความกว้างของ พื้นที่ Mode = เป็นการกำหนด Mode สีถ้า เป็นมาตรฐานจะเป็น RGB Color Contents ก็จะเป็นลักษณะพื้นหลังก็จะมี White ( สีขาว) , Background Color ( สีที่เรากำหนด) , Transparent ( สีพื้นแบบ - โปร่งใส , ไม่แสดงสีพื้นโล่ง)

Menu bar
เป็นส่วนที่แสดงชื่อเมนูต่างๆ ของโปรแกรมก็จะประกอบด้วย
File , Edit , Image , Layer , Select , Filter , View , Window , Help
1.File หมายถึง คำสั่งเกี่ยวกับการจัดเก็บและเรียกใช้ไฟล์รูปภาพต่างๆ
2.Edit หมายถึง คำสั่งเกี่ยวกับการแก้ไขลักษณะของรูปภาพและ Image ต่างๆ
3. Image หมายถึง คำสั่งการจัดการรูปภาพและ Image ต่างเช่น การเปลี่ยนสีและการเปลี่ยนขนาด
4. Layer หมายถึง ชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects
5. Select เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น

หน้าต่างสำหรับการปรับขนาดชิ้นงาน (Image Size)
จะประกอบด้วยส่วนต่าง ๆ ที่สำคัญหลายส่วน คือ
1. Pixel Dimensions เป็นส่วนที่ระบุขนาดความจุของชิ้นงานนั้น ๆ
2. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ในมุมมองของหน้าจอแสดงผลของคอมพิวเตอร์ หน่วยเป็น Pixels หรือ Percent
3. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ซึ่งในส่วนนี้จะระบุเป็นขนาดจริงของภาพเมื่อทำการ Print ภาพออกมาทางเครื่องพิมพ์
4. Resolution จำนวนจุดสีของภาพต่อหน่วยพื้นที่ เมื่อสั่งพิมพ์ชิ้นงาน
5. ส่วนควบคุมความสัมพันธ์ข้อมูล เป็นส่วนที่เลือกระบุความสัมพันธ์ ระหว่างความกว้าง/สูงของภาพ เพื่อไม่ให้อัตราส่วนของภาพ มีความผิดเพี้ยนไปจากเดิมหมกเกินไป

พื้นที่ทำงานใน Photoshop CS3
1. Menu bar เป็นเมนูที่รวบรวมคำสั่งต่าง ๆที่ใช้ในการจัดการกับภาพ หรือ ไฟล์ภาพ การปรับค่าต่าง ๆ ในการกำหนดคุณสมบัติของภาพ หรือ ไฟล์ภาพ
2. Toolbox กล่องเก็บเครื่องมือซึ่งส่วนนี้จะรวบรวมเครื่องมือที่ใช้ในการทำงานของ Photoshop ที่สำคัญ และใช้บ่อยไว้
3. Option bar เป็นส่วนที่ใช่ในการปรับแต่งค่าต่าง ๆ ของเครื่องมือใน Photoshop ซึ่งในส่วนนี้เริ่มมีใช้ในเวอร์ชั่น 6.0 จากเดิมที่ต้องปรับแต่งเครื่องมือเองในส่วน
4. พื้นที่ทำงาน เป็นส่วนหลักที่ทำงานจริงของภาพ เป็นตัวเก็บงานที่กำลังดำเนินงานอยู่ และยังเป็นพื้นที่ทำงานจริงของโปรแกรมอีกด้วย
5. Palette เป็นวินโดว์ย่อยที่เป็นส่วนเก็บรายละเอียดและปรับแต่งชิ้นงาน ซึ่ง จะถูกแบ่งเป็นส่วน ๆ ตามงานเละคุณสมบัติของงานต่าง ๆ เพื่อสะดวกในการปรับชิ้นงาน

Toolbox (กล่องเครื่องมือ)
Toolbox เป็นส่วนที่เก็บเครื่องมือที่ใช้ในการตกแต่งภาพซึ่งเครื่องมือแต่ละตัวจะทำงานแตกต่างกันไป ซึ่งเครื่องมือต่าง ๆ จะทำงานในส่วน ของตนเองเท่านั้นเว้นแต่ในบางกรณีที่ต้องการทำงานแบบผสมผสานกันหลาย ๆ รูปแบบจะมีการใช้ปุ่มคำสั่งบนคีย์บอร์ดช่วย
เครื่องมือที่สำคัญในการตกแต่งภาพ
1. Marquee ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบขอบเขตมาตรฐาน
2. Lasso ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบกำหนดขอบเขตเอง
3. Move เครื่องมือสำหรับการเคลื่อนย้ายงานหรือส่วนของงานที่เลือกไว้
4. Magic Wand ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบสุ่มค่าสี
5. Crop ตัดภาพเฉพาะในส่วนที่ต้องการ
6. Clone Stampใช้สำหรับ Copy สีในภาพเดียวกัน
7. Paing Bucket เทสีในส่วนที่ทำการเลือกไว้
8. Eraser ลบเม็ดสีที่ไม่ต้องการออก
9. Blur กระจายเม็ดสีออกไปรอบ ๆ
10. Horizontl Type แทรกตัวอักษร ข้อความลงในชิ้นงาน
11. Rectangle รูปทรงอัตโนมัติ
12. Note แทรกข้อความ/เสียงในชิ้นงาน
13. Eyedropper บันทึกค่าสีที่ต้องการ
14. Hand ใช้เลื่อนดูมุมมองของชิ้นงาน
15. Zoomขยายงานเพื่อแก้ไข
16. สีพื้น/ใช้งานสีที่ใช้เป็นพื้นหลังหรือที่ต้องการจะใช้กับชิ้นงานนั้น ๆ

ขั้นตอนการบันทึกชิ้นงาน ใน Photoshop CS3
ไปที่ Menu Bar เลือก File จะปรากฏคำสั่งสำหรับการบันทึกชิ้นงาน 3 รูปแบบ คือ
1.Save การบันทึกรูปแบบงานแบบมาตรฐานที่สุด ใช้สำหรับงานที่มีการบันทึกไว้แล้วในขั้นแรก และทำการบันทึกการใช้งานซ้ำหลังจากการแก้ไขหรือปรับแต่งชิ้นงานเพิ่มเติม
2.Save As…การบันทึกชิ้นงานใหม่ หรือต้องการบันทึกรูปแบบการตกแต่ง แก้ไข ไว้อีกชุดหนึ่ง หรือเพื่อสำรองชิ้นงานไว้เพื่อใช้งานอื่น หรือต้องการบันทึกเพื่อเปลี่ยนรูปแบบชิ้นงาน ให้เป็นรูปแบบอื่น ๆ
3.Save for Web…เป็นการบันทึกชิ้นงานเพื่อให้ออกมาในรูปแบบของ Webpage

ฟังก์ชั่นการทำงานใหม่ ใน Photoshop CS3
1. Camera Raw
Camera Raw คือฟีเจอร์ในการตกแต่งภาพจากกล้องดิจิตอล ที่ยังคงรักษาคุณภาพของภาพไว้ 100 เปอร์เซ็นต์ ซึ่งโปรแกรม Adobe Photoshop CS3 มีฟังชั่นการทำงานที่ดีกว่า Photoshop CS2 มาก และฟังก์ชั่นที่ใช้งานได้ดีกว่าเดิมคือ Fill Light Slider (เช่นเดียวกับ Shadow Slider) และ Vibrance Slider ซึ่งเป็นตัวเพิ่มความเข้มของภาพ โดยไม่กระทบ ต่อไฟล์ต้นฉบับ
นอกจากนี้ยังมีฟังก์ชั่นใหม่ๆ อย่าง Parametric Curve ซึ่งช่วยให้การปรับแต่งนั้นทำได้ง่ายดายยิ่งขึ้น เพราะระบบ Live Preview ให้ผู้ใช้สามารถเห็นการเปลี่ยนแปลงแบบ ซีนต่อซีน ทำให้มีความสะดวกยิ่งขึ้น
2.Quick Selection Tool
เป็นเครื่องมือที่ใช้ในการปรับแต่งขอบของ Selection และตัดต่อภาพกราฟิก สิ่งที่สำคัญคือการเลือกพื้นที่บนรูปภาพ จากนั้นจึงใช้คำสั่งต่างๆ เพื่อให้เกิดผลเฉพาะบนพื้นที่ดังกล่าว การเลือกพื้นที่ใน Photoshop CS3 เรียกการสร้าง “ซีเล็คชั่น” ซึ่งจะเป็นเครื่องมือที่ใช้งานง่าย โดยมีฟีเจอร์ที่มีจุดเด่นคือ RefineEdge floating palette ที่จะให้ผู้ใช้ควบคุมการเลือกได้ดีกว่า Photoshop CS2
3. Mo Better Curves
Curves เป็นคำสั่งที่มีประสิทธิภาพสูงเพราะสามารถเลือกปรับเพิ่มหรือลดแสงเงาของภาพที่ค่าความสว่างต่างๆ ได้อย่างอิสระกว่าคำสั่ง Level และ Shadow/Highlight และเป็นเครื่องมือในการตกแต่งรูปโดยการคลิกลากที่เส้นกราฟเพื่อปรับแสงสว่างชองพิกเซลนอกจากนี้ยังมี AdobeClipping Warning และ In-Dialog เพื่อช่วยให้ผู้ใช้สามารถทำงานได้ง่ายขึ้น
4.Printing Done Right
Adobe Photoshop CS3 ได้มีการพัฒนาการสั่งพิมพ์ของโปรแกรมให้มีความสามารถมากขึ้น โดยผู้ใช้สามารถกำหนดออปชั่นและตั้งค่าการพิมพ์ได้ดังนี้
- สามารถปรับขนาดภาพที่เหมาะสมสำหรับภาพที่จะนำไปอัดหรือพิมพ์
- สามารถปรับขนาด สัดส่วน และ Resolution ของภาพให้มีความเหมาะสม
- สามารถพิมพ์ภาพสีและขาวดำได้โดยตรง
- สามารถพิมพ์ภาพแบบเป็นชุดหรือหลายๆขนาดได้ตามความต้องการ
- สามารถปรับแต่งการดูเอกสารก่อนพิมพ์ได้อย่างง่ายดาย ผ่านทางไดอะล็อค
5.Cloning และ Healing
พาเล็ตต์ Clone Source เป็นพาเลตต์ที่ทำให้ผู้ใช้สามารถเห็นกระบวนการทำงานในภาพรวมได้ดียิ่งขึ้น ซึ่งทำให้ผู้ใช้ควบคุมการทำงานได้อย่างรวดเร็ว

........................................................................................................

Macromedia Dreamweaver

เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง Editor ที่มีประสิทธิภาพตัวหนึ่งในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น โปรแกรมจัดการเว็บไซต์ที่ดีDreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น

1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสำรองไว้ในเครื่องเราตลอดด้วย

2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด ช่วยให้เราทำเว็บได้ง่ายขึ้น สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก

ปรับแต่ง Dreamweaver ให้ทำงานกับภาษาไทยได้

1.ปรับแต่งระบบ dreamweaver ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Dreamweaver ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preferenceจากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูป

การเปลี่ยน font อาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้ Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design) Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวกในการอ่าน codeจากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูป

การเปลี่ยน head ของเอกสารใหม่ เมื่อเราเลือกที่ new document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยน Default encoding เป็น Thai ตามภาพ เสร็จแล้วก็ให้ไปที่ default document อีกทีเลือก CSS และเปลี่ยน Default encoding เป็น thai อีกเช่นเดียวกันแค่นี้ Dreamweaver ก็สามารถทำงานกับภาษาไทยได้แล้ว ติดตามตัวอย่างการใช้งาน Dreamweaver ในบทต่อไป

เครื่องมือต่างๆ

1.Document window เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กำลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบเสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทำงานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บเพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย

2.Insert Bar ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้

1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ

2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ แบบ layout

3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น

4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก

5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น

6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ

7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้

3.Property inspector property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น

4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels

5.menu เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย

6.Status bar ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้

7.Document Tool bar ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title ของหน้าเว็บเพจอีกด้วย หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา

ขั้นตอนการกำหนด site

1.ไปที่ Menu เลือก Site > New site จะปรากฏหน้าต่างดังรูปข้างล่างขึ้นมา

2.ที่แถบด้านบนสุดเลือก Advanced ถ้าเราเลือกที่แถบ Basic จะเป็นการกำหนดแบบอัตโนมัติซึ่งโปรแกรมจะถามเราไปที่ละขั้นตอน

3.แถบ Category ทางซ้ายมือให้เลือก Local Info

4.ช่อง Site name จะใส่ชื่ออะไรลงไปก็ได้ เป็นแค่ชื่ออ้างอิงที่ใช้ในโปรแกรมเท่านั้น เพราะผู้ใช้งาน Dreamweaver อาจทำเว็บไซต์มากกว่า 1 จึงต้องตั้งชื่ออ้างอิงเอาไว้

5.ช่อง Local root folder ให้เราคลิกที่รูป folder สีเหลืองเพื่อเลือก folder ที่ใช้ในการเก็บไฟล์ทั้งหมดของเว็บไซต์ เราจะสร้าง folder นี้ไว้ที่ใดก็ได้ ถ้าคุณมีเว็บไซต์ที่ทำเสร็จแล้วต้องการจะแก้ไขก็ให้เลือก folder ที่เก็บไฟล์ของเว็บนั้นได้เลย 6.ช่อง Default image folder ให้เราระบุสถานที่เก็บไฟล์รูปภาพของเว็บไซต์ แนะนำว่าให้เราสร้าง folder ชื่อ image เอาไว้ใน Local root folder เพื่อเก็บไฟล์รูปทั้งหมดไว้ในนั้น 7.Links Relative to ให้เราเลือก Document เป็นการกำหนดการเขียน link ในเว็บไซต์ของเรา ส่วนการกำหนดแบบ site root จะนิยมใช้เมื่อทำงานกันหลายคนจะใช้วิธีการเขียนลิงค์โดยอ้างอิง root folder 8.Http address เป็นชื่อเว็บไซต์ของเรา เราอาจปล่อยช่องนี้ว่างไว้ก็ได้ถ้ายังไม่มีชื่อเว็บ (url)

9.Case-Sensitive Link ให้เลือกช่องนี้ด้วย เพื่อกำหนดให้การเขียน link เขียนแบบ case sensitive คือคำนึงถึงตัวพิมพ์ใหญ่ หรือพิมพ์เล็กในภาษาอังกฤษด้วย

10.Enable Cache ให้เลือกช่องนี้ เพื่อกำหนดให้ dreamweaver สร้างหน่วยความจำเอาไว้จำทำให้เราสามารถทำงานได้เร็วขึ้น

11.คลิก ok แค่นี้การกำหนด site ของเราก็เสร็จเรียบร้อย ให้เราไปเปิดดูที่ panel ทางขวามือ ในหัวข้อ file จะเห็นรายละเอียดของไฟล์ต่างๆที่เราสร้างไว้ ดังรูปด้านล่าง ในรูปตั้งชื่อเว็บว่า ex1 และกำหนด Local root folder ชื่อ ex และ save ไว้ที่ C: และสร้าง folder ชื่อ images เพื่อใช้ในการเก็บไฟล์รูป ถ้าเราต้องการแก้ไข site ก็ให้เลือกที่ site > manage site ก็จะทำการแก้ไขการกำหนดค่าของ site ได้ ถ้าเรามีหลายไซต์สามารถเลือกแก้ไขแต่ละไซต์ได้โดยคลิกที่ปุ่มที่วงกลมสีแดงไว้ จะแสดง site ทั้งหมดที่เรามีอยู่

การใช้งานเครื่องมือ Page Properties สามารถทำได้ดังนี้

1.เปิดเว็บเพจที่ต้องการปรับแต่ง

2.ไปที่ Menu เลือก Modify > Page Properties

3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ

1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง

2.ไปที่ Menu เลือก Modify > Page Properties

3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป

รายละเอียดต่างๆของเครื่องมือมีดังนี้

1.Page font ใช้ปรับแต่งชนิดของ font ที่แสดงผล ด้านหลังจะมีสัญลักษณ์ B (ทำให้แสดงผลในหน้านี้เป็นตัวหนาทั้งหมด) และ I (ทำให้แสดงผลในหน้านี้เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้

2.Size ในช่องนี้คือขนาดของตัวอักษรที่จะแสดงในเว็บเพจ

3.Text color ใช้กำหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก 4.Background Color ใช้กำหนดสีพื้นหลังของเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก 5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง

6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้

1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว

2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ

3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น

4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น

7.Margin เป็นคำสั่งที่ใช้กำหนดระยะห่างของตัวอักษร และภาพ กับเว็บเพจ มีรายละเอียดดังนี้

1. left margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางซ้ายเป็นระยะที่เรากำหนด

2. right margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางขวาเป็นระยะที่เรากำหนด

3. top margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านบนเป็นระยะที่เรากำหนด

4. bottom margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านล่างเป็นระยะที่เรากำหนดคลิกโอเค เว็บเพจก็จะปรับหน้าตามที่เราได้ตั้งไว้