Dreamweaver เวอร์ชั่น CS4 (พ.ย.2551)

Dreamweaver CS4 ที่ผมจะทำการแนะนำในบทความนี้ เป็นเวอร์ชั่นใหม่ครับ ออกมาเมื่อราว ๆ เดือนตุลาคม 2551 ซึ่งเป็นเวอร์ชั่นต่อจาก CS3 สำหรับในเวอร์ชั่น CS4 จะมีอะไรเปลี่ยนแปลงไปบ้าง ลองอ่านบทความนี้ดูครับ แต่ก็เป็นแค่เพียงบางส่วนนะครับ ถ้าท่านต้องการรู้ถึงความสามารถของโปรแกรมจริง ๆ ท่านสามารถทำการ Download ไปทดลองใช้ได้ จากเว็บไซต์ Adobe ครับ

มีอะไรใหม่ใน Dreamweaver CS4 (1)

หน้าตาใหม่ไฉไลไหมหว่า.....????

หน้า จอการทำงานของโปรแกรมเปลี่ยนไปมากจากเดิมครับ เครื่องมือเครื่องใช้ต่าง ๆ ก็มีการจัดวางที่แตกต่างไปจากเวอร์ชั่นก่อน ๆ เป็นอันมาก ผมจะหยิบนำมาแนะน เป็นบางอย่างครับ เช่น

Main Menu และ Toolbars


ในส่วนของ Main Menu และ Tools Bar มีการเปลี่ยนไปเยอะพอสมควรเลยครับ เข้าใจว่า ผู้ผลิตโปรแกรมต้องการขยายหน้าจอของโปรแกรมให้มีพื้นที่มากขึ้น โดยได้มีพื้นที่การออกแบบเว็บได้มากขึ้น เลยทำการตัดในส่วนของ Title Bar ของโปรแกรมออกไป และถ้าเราสังเกตที่ Tool Bar เราจะพบว่าโปรแกรมได้เพิ่มสิ่งอำนวยความสะดวกมาให้แก่ผู้ใช้พอสมควร เช่น เพิ่มแติม Input สำหรับการค้นหาข้อมูลมาให้เรา

ซึ่งเมื่อเราทำการกรอกคีย์ที่ต้องการค้นหาลงไป แล้วเรากดที่ปุ่ม Enter โปรแกรมจะไปค้นหาคีย์นั้นที่เว็บของ Adobe ให้เราในทันที

มา ดูเรื่องหน้าตาของโปรแกรมในเวอร์ชั่นนี้กันต่อครับ โปรแกรมมีการจัดวางพวก Panel ต่าง ๆ แตกต่างไปจากเดิม พร้อมทั้งรูปลักษณ์ที่แปลกไปจากเดิมเล็กน้อย เช่น จากเดิมเมื่อคุณทำการยุบพาเนลลงไป ตัวพาเนลก็จะยุบหายไปเลย แต่มาในเวอร์ชั่นนี้ไม่หายครับ แต่จะปรากฏเป็นรูปแบบ List icon ให้คุณเห็น ดังรูป

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

จะได้หน้าจอโปรแกรม ดังนี้

Properties Panel ที่เปลี่ยนไป

ในเวอร์ชั่นนี้ในส่วนของ Properties Panel มีการเปลี่ยนไปเล็กน้อย (แต่อาจจะมากสำหรับบางท่าน) ดังในรูป

เริ่ม กันที่อย่างแรกเลยที่เปลี่ยนไป คือ Align icon หรือไอคอนสำหรับการจัดตำแหน่งข้อความที่เราต้องใช้กันเสมอ ๆ สำหรับในเวอร์ชั่นนี้หายไป....(สำหรับในโหมด HTML) หากคุณต้องการใช้งานการจัดตำแหน่งข้อความ ให้กระทำดังนี้

เลือก ที่ข้อความที่ต้องการจัดตำแหน่ง จากนั้นทำการ Click ขวา แล้วทำการเลือกที่ Align -> ตำแหน่งที่ต้องการ (Left, Center, Right, Justify) ดังรูป

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

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

สำหรับ บทความนี้เป็นเพียงส่วนหนึ่งที่ผมได้ทำการแนะนำโปรแกรม Dreamweaver CS4 คาดว่าจะมีตอน 2 ต่อมาในเร็ว ๆ นี้ ความสามารถเพิ่มขึ้นมาเยอะจริง ๆ เขียนบทความเดียวไม่หมด ^^!

การทำ ToolTip กับ Dreamweaver CS4

Tooltip คืออะไร สำหรับทูลทิปคือข้อความหรือกลุ่มของข้อมูลสั้น ๆ ที่ใช้อธิบายคำหรือจุดที่ต้องการอธิบายเพิ่มเติมบนหน้าเว็บ เช่น บนหน้าเว็บของคุณอาจจะมีข้อความเป็นศัพท์ทางเทคนิคอยู่ ถ้าคนทั่วไปอ่านแล้วอาจจะไม่เข้าใจในคำนั้น คุณก็อาจจะสร้างเป็นลักษระ Tooltip ไว้สำหรับอธิบายคำนั้นบนหน้าเว็บก็ได้ ลองดูจากตัวอย่างด้านล่างนี้ (ให้นำเมาท์วางเหนือข้อความ XHTML ด้านล่าง)

>> XHTML

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

วิธีการทำ ToolTip

1. ขั้นตอนแรกให้ทำการเลือกบริเวณข้อความ หรือตำแหน่งที่ต้องการใช้ทูลทิปนี้ ดังรูป

2. จากนั้นไปที่ Insert Bar -> Spry  แล้วเลือกที่ไอคอน Spry Tooltip ดังรูป

3. โปรแกรมจะทำการแสดงกรอบข้อความสำหรับให้เราทำการพิมพ์ข้อความที่จะแสดงเป็น Tooltip ให้เรา ดังรูป

4. ให้เราทำการพิมพ์ข้อความที่ต้องการลงไปตามต้องการ หรือคุณจะทำการแทรกรูปภาพลงไปด้วยก็ได้

5. จากนั้นทำการเลือกที่กรอบ Spry Tooltip: (กรอบสีฟ้า ๆ ล้อมรอบข้อความ) แล้วให้เราทำการกำหนดค่าที่ Properties ดังรูป

Trigger	เลือกชื่อ Trigger (ถ้าจะกำหนดค่าให้กับ Tooltip ปัจจุบันไม่ต้องเลือก)
Follow mouse	ข้อความ Tooltip จะเคลื่อนไหวไปกับ Mouse
Hide on Mouse out	ทำการซ่อน Tooltip เมื่อนำเมาท์ออก
Horizontal offset	ตำแหน่งแนวนอน (แกน x) ที่ต้องการให้ Tooltip ปรากฏ
Vertical offset	ตำแหน่งแนวตั้ง (แกน y) ที่ต้องการให้ Tooltip ปรากฏ
Effect	รูปแบบเทคนิคการแสดงผล None ไม่มีการใช้เทคนิคการแสดงผล Blind แสดงผลแบบค่อย ๆ ยืดข้อความออกมา (แบบตัวอย่างด้านบน) Fade แสดงผลแบบค่อย ๆ ปรากฏขึ้น
Show delay	ค่าเวลาที่กำหนดให้ Tooltip ค่อย ๆ ปรากฏขึ้น
Hide delay	ค่าแวลาที่กำหนดให้ Tooltip ค่อย ๆ หายไป

6. จากนั้นทำการ Save ไฟล์ ถ้าหากเป็นการบันทึกครั้งแรกที่มีการใช้งาน Tooltip โปรแกรมจะแสดงหน้าต่างดังรูป ให้เราทำการกดปุ่ม OK เพื่อให้เราทำการบันทึกไฟล์ที่เกี่ยวข้อง ซึ่งไฟล์ทั้งหมดนี้ เมื่อเราจะนำไปใช้งานบน Hosting เราต้องทำการอัพโหลดขึ้นไปด้วย

7. กด F12 ทำการ Preview แสดงผลกับ Browser
8. หากต้องการตบแต่งข้อความหรือกรอบของ Tooltip เราสามารถกำหนดได้จาก CSS ที่ชื่อว่า .tooltipContent 

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

CSS Layout ด้วย Dreamweaver ตอนที่ 1

CSS Layout ปัจจุบันได้รับความนิยม และได้รับความสนใจอย่างมาก จากกลุ่มผู้ออกแบบเว็บ หรือนักพัฒนาเว็บ สำหรับประโยชน์ หรือว่าทำไมต้องเปลี่ยนจากการเลย์เอาท์เว็บที่แต่ก่อนใช้ Table หรือตารางในการจัดหน้าเว็บ มาใช้ CSS ในปัจจุบัน ทางผมจะขออนุญาตไม่กล่าวถึงในที่นี้ เนื่องจากเคยเขียนไปแล้วในบทความที่เกี่ยวกับ CSS (อ่านได้ที่นี่) ในบทความนี้จะกล่าวถึง การใช้งาน Dreamweaver ตัวเก่งของเราในการเลย์เอาท์ การจัดวางด้วย CSS กันครับ

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

วิธีการเลย์เอาท์ด้วย CSS โดยใช้โปรแกรม Dreamweaver

1. ให้เราทำการกำหนดรูปแบบของเว็บเราว่าจะแบ่งออกเป็นกี่ส่วน ซึ่งโดย Basic ของเว็บแล้ว ก็จะมีการแบ่งหน้าเว็บออกมาเป็น 2 หรือ 3 ส่วน หรือเราอาจจะเรียกว่า 2 Columns or 3 Columns ก็ได้ ในตัวอย่างบทความ ผมเลือกที่จะแบ่งหน้าจอออกเป็น 2 Columns ดังรูป

Header
Side Bar	Main Content
Footer

2. เมื่อเราได้ทำการกำหนดรูปแบบการเลย์เอาท์ของเรา ตามขั้นตอนที่ 1 แล้ว จากนัน ให้เราทำการ New File ขึ้นมา เป็น XHTML แล้ว Save เก็บไว้ โดย Save เป็นไฟล์ชื่อ csslayout.hrml

3. ทำการสร้างไฟล์ CSS ขึ้นมา ดังรูป จากนั้นทำการ Save ไฟล์ CSS เป็นชื่อ mylayout.css

4. จากนั้นที่ไฟล์ csslayout.hrml ทำการเชื่อมโยงกับไฟล์ CSS ที่เราได้สร้างไว้ในขั้นตอนที่ 3 โดย ไปที่ CSS PANEL (Shift + F11) เลือกที่ Attach Style Sheet ดังรูป

กดที่ปุ่ม Browse.. เพื่อเลือกไฟล์ CSS ของเรา ในที่นี้คือไฟล์ mylayout.css ดังรูป แล้วกดที่ปุ่ม OK

5. จากนั้นให้เรากลับมาที่ไฟล์ csslayout.html ที่เราเปิดไว้กับโปรแกรม Dreamweaver เพื่อทำการวางโครงสร้างหน้าเว็บของเรา โดยการใช้ Insert Div Tag ดังนี้
ไปที่ Insert Bar เลือกที่ Insert Div ดังรูป

โปรแกรมทำการเปิดหน้าต่างขึ้นมา ให้เราทำการพิมพ์ชื่อ Class หรือชื่อ ID ตามที่เราต้องการ

6. ที่หน้าเว็บให้เราทำการวางโครงสร้าง โดยทำตามลำดับ ดังนี้

เมื่อเรา View ที่ Code จะได้โค้ด ดังนี้

ใครที่ชอบเขียนโค้ดด้วยโปรแกรม Dreamweaver อาจจะพบปัญหาที่ว่า พอเขียนโค้ดไปบ่อย ๆ หรือนาน ๆ เข้า รูปแบบโค้ดไม่สวยงามเอาเสียเลย หรือเขียนแล้วทำให้พอเวลาผ่านไปกลับมาอ่านโค้ดอีกทีอ่านยากมาก ไม่ว่าจะเป็นโค้ด HTML โค้ด CSS หรือโค้ดอื่น ๆ ที่เกี่ยวข้องกับการพัฒนาเว็บของเรา โปรแกรม Dreamweaver ช่วยท่านจัดรูปแบบหรือ Format ของโค้ดเหล่านั้นได้ ด้วยการ Click เพียงครั้งเดียว ซึ่งบทความนี้จะแนะนำท่านลองติดตาม วิธีการใช้งาน Apply Source Formatting 1. ทำการเปิดไฟล์เว็บเพจที่ท่านต้องการจัดรูปแบบ Code ขึ้นมากับโปรแกรม Dreamweaver 2. จากนั้นให้ท่านคลิ๊กที่ Code View (Code View) 3. จากนั้นไปที่ Main Menu > Command > Apply Source Formatting ดังรูป Apply Format Before Code After CODE 4. เมื่อท่านเลือกที่เมนูดังกล่าวแล้ว โปรแกรมจะทำการจัดรูปแบบโค้ดให้ท่านตามรูปแบบที่มีมากับ Code Format ซึ่งท่านสามารถ Set ได้ที่ Main Menu > Edit > Preferences.. Dreamweaver Preferences.. ................................................................................................................................................................................ ส่งท้าย..หวังว่าบทความนี้คงจะเป็นประโยชน์กับผู้ที่ใช้งานโปรแกรม Dreamweaver ไม่มากก็น้อยครับ.

เมื่อเราได้ทำการกำหนดโครงสร้าง ของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต่อมาก็มาถึงจุดสำคัญกัน นั่นก็คือ การกำหนด CSS ที่ใช้ในการบอกถึงการแสดงผล ว่าจะให้ออกมาในรูปแบบเลย์เอาท์ที่เราต้องการได้อย่างไร มาดูกันต่อนะครับ

1. ให้เราทำการเปิด CSS Panel ขึ้นมา ดังรูป เพื่อกำหนดค่า CSS (สำหรับการสร้างและการกำหนดค่า CSS เราเริ่มต้นที่การกดไปที่ icon ที่ชื่อว่า New CSS Rule ของ CSS Panel นะครับ)

* การใช้งาน CSS Panel สำหรับการกำหนดค่า คุณสามารถอ่านได้จากบทความ เหล่านี้
- การใช้งาน CSS กับโปรแกรม Dreamweaver
- การใช้งาน CSS กับโปรแกรม Dreamweaver 2
(การใช้งาน Panel ดังกล่าวผมจะไม่กล่าวถึงในที่นี้)

2. ผมกำหนด CSS ที่ Tag Body ดังรูป

- Padding: 0px;
- Margin: 0px;

ต่อมาในการกำหนดค่าให้กับ DIV ที่เราได้กำหนดเป็น ID ต่าง  ๆ ให้ทำตามขั้นตอนดังนี้
- ถ้าเป็นการกำหนดที่ ID ที่ชื่อว่า header ให้เราสร้าง ดังรูป

การกำหนดค่าให้กับ ID Selector กำหนดให้ส่วนที่เป็น header มีความสูงที่ 100 pixels (Height: 100px;)

3. จากนั้นที่ container กำหนดค่า ดังรูป

4. ที่ sidebar กำหนด ดังรูป

5. ที่ mainContent กำหนด ดังรูป

6. ในส่วนสุดท้าย คือ footer ให้กำหนด ดังนี้

7. เมื่อเราได้กำหนด CSS ตามขั้นตอนต่าง ๆ ที่แนะนำมา เราก็จะได้โครงสร้างของเลย์เอาท์กันแล้วนะครับ ต่อไปก็ให้เราทำการกำหนดค่าสีพื้นหลังของส่วนต่าง ๆ หรือรูปแบบ Font ต่าง ๆ กัน โดยใช้วิธีการแก้ไข CSS เมื่อเสร็จสิ้นแล้ว เราก็จะได้รูปแบบเว็บหน้าตาออกมาในลักษณะนี้

หากใครสงสัยค่า Properties ที่ผมกำหนดให้กับ CSS ในส่วนต่าง ๆ อาจจะดูได้จากโค้ด CSS นี้ประกอบ

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

สำหรับ รายละเอียดเรื่องของการเลย์เอาท์ด้วย CSS ยังมีอีกมาก ที่นำเสนอบทความนี้ เป็นเพียงแค่พื้นฐานให้คุณทำความเข้าใจเบิ้องต้นก่อน หากคุณสนใจที่จะศึกษาเรื่องการเลย์เอาท์ด้วย CSS ลองติดตามบทความที่ DwThai.Com ไปเรื่อย ๆ  นะครับ จะพยายามเขียนในส่วนอื่น ๆ ที่เกี่ยวข้องให้ได้อ่านกันต่อไป

จัดรูปแบบบโค้ดด้วย Apply Source Formatting

ใครที่ชอบเขียนโค้ดด้วยโปรแกรม Dreamweaver อาจจะพบปัญหาที่ว่า พอเขียนโค้ดไปบ่อย ๆ หรือนาน ๆ เข้า รูปแบบโค้ดไม่สวยงามเอาเสียเลย หรือเขียนแล้วทำให้พอเวลาผ่านไปกลับมาอ่านโค้ดอีกทีอ่านยากมาก ไม่ว่าจะเป็นโค้ด HTML โค้ด CSS หรือโค้ดอื่น ๆ ที่เกี่ยวข้องกับการพัฒนาเว็บของเรา โปรแกรม Dreamweaver ช่วยท่านจัดรูปแบบหรือ Format ของโค้ดเหล่านั้นได้ ด้วยการ Click เพียงครั้งเดียว ซึ่งบทความนี้จะแนะนำท่านลองติดตาม

วิธีการใช้งาน Apply Source Formatting

1. ทำการเปิดไฟล์เว็บเพจที่ท่านต้องการจัดรูปแบบ Code ขึ้นมากับโปรแกรม Dreamweaver
2. จากนั้นให้ท่านคลิ๊กที่ (Code View)
3. จากนั้นไปที่ Main Menu > Command > Apply Source Formatting ดังรูป

4. เมื่อท่านเลือกที่เมนูดังกล่าวแล้ว โปรแกรมจะทำการจัดรูปแบบโค้ดให้ท่านตามรูปแบบที่มีมากับ Code Format ซึ่งท่านสามารถ Set ได้ที่ Main Menu > Edit > Preferences..

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

ส่งท้าย..หวังว่าบทความนี้คงจะเป็นประโยชน์กับผู้ที่ใช้งานโปรแกรม Dreamweaver ไม่มากก็น้อยครับ.

แนะนำเครื่องมือใหม่ Adobe Dreamweaver CS3

แนะนำเครื่องมือใหม่ Adobe Dreamweaver CS3
1. เริ่มจากเครื่องมือพื้นฐานการสร้างเว็บเพจกันก่อน เครื่องมือแรกที่ Adobe เตรียมมาให้สำหรับคนที่ชอบเขียนเว็บเพจด้วย CSS มี Template ให้เราได้เลือกใช้ตามความเหมาะสมของหน้าเว็บกันหลายรูปแบบ ดังภาพตัวอย่าง

2. เครื่องมือใหม่ที่ Adobe เตรียมมาให้นักพัฒนาเว็บไซต์ เพื่อช่วยในการจัด Content ภายในหน้าเว็บเพจให้เป็นระเบียบ และง่ายกว่าเดิมที่ต้องมานั่งเขียน Java Script นั่นก็คือเครื่องมือที่ชื่อว่า Spry มีด้วยกันหลายเครื่องมือตัวอย่างเช่น
เครื่องมือ Spry Menu Bar ดูจากรูปก็พอจะเดากันออกเลยใช่ไหมครับ เครื่องมือนี้ช่วยจัดการเมนูของเว็บไซต์

เครื่องมือ Spry Tabbed Panels

ยังมีเครื่องมือ Spry อื่นๆ อีกมากมายทั้งที่ใช้กับโปรแกรมมิ่งก็มี ฟอร์มต่างๆภายในเว็บไซต์ เอาไว้ผมจะรวบรวมทำเป็นบทความมาให้นำไปประยุกต์ใช้ในโอกาสต่อไปนะครับ
3. เครื่องมือที่แถบ Properties ที่จะช่วยเชื่อโยงรูปภาพกับโปรแกรมตบแต่งรูปภาพของ Adobe เข้าด้วยกัน ดังตัวอย่าง

4. เครื่องมือช่วยตรวจสอบ Script ที่เราเขียน หรือรูปแบบว่าสามารถใช้งานร่วมกันได้ทุก Browsers หรือไม่ ดังภาพตัวอย่าง

และเครื่องมืออื่นๆ อีกมากมาย ซึ่งผมและทีมงานจะทยอยเรียบเรียงเป็นบทความ เพื่อนำมาให้ศึกษา และประยุกต์ใช้งาน ให้เข้ากับเทคโนโลยีของ Software ปัจจุบันในโอกาสต่อไปครับฃ
http://www.webthaidd.com