คู่มือการใช้งาน Adobe dreamweaver CS6

ความสามารถใหม่ของ Adobe Dreamweaver CS6

     1. Fluid grid layout

            การออกแบบหน้าเอกสารใหม่บนพื้นฐานของตารางที่สามารถนำไปใช้ได้หลากหลาย บนหน้าจอขนาดต่าง ๆ เช่น SmartPhone Tablet หรือ PC โดยเราสามารถออกแบบครั้งเดียว แล้วสามารถนำไปใช้ได้กับทุกอุปกรณ์

     2. JQuery Mobile Framework updates

            JQuery Mobile Framework เข้ามาใน  Adobe Dreamweaver CS5.5 ในเวอร์ชั่นนี้ได้มีการเพิ่มส่วนช่วยในการทำงานกับ JQuery Mobile Framework ได้สะดวกขึ้นไปอีก เช่น การนำ Theme ที่ออกแบบด้วย Adobe Firework CS6 มาเลือกใช้กับ Mobile Web project และ การเลือกกำหนด icon ต่าง ๆ ให้กับ button เป็นต้น

     3. Adobe PhoneGap Build integration

            สำหรับใน Adobe Dreamweaver CS6 ได้เพิ่มส่วนของการทำงานกับ PhoneGap Build เข้าไป ทำให้คุณสามารถที่จะนำ Mobile project ที่ทำอยู่ขึ้นไปบนระบบ online service ของ PhoneGap Build ให้ทำการ compile ออกมาเป็นไฟล์ mobile application บน platform ต่างๆ ได้ง่าย ๆ

     4. CSS3 Transition

            ความสามารถของ CSS3 นั้นเริ่มปรากฏออกมาให้เห็นมากขึ้นเรื่อย ๆ ทั้งเรื่อง Web Font หรือการทำ animation ของ HTML Element ก็สามารถทำได้อย่างน่าประทับใจ Adobe Dreamweaver CS6 ได้เพิ่มส่วน User Interface ให้คุณสามารถกำหนด CSS3 Transition ให้กับ element ได้ตามที่คุณต้องการ ลดขั้นตอนการเขียน code CSS ด้วยตนเอง ประหยัดเวลาและได้งานสวย ๆ ที่มีคุณภาพและน่าประทับใจ

     5. Integrate with Adobe Business Catalyst

            หากคุณยังไม่รู้จัก Adobe Business Catalyst มาก่อน ให้คุณนึกถึง บริการ hosting ตั้งแต่จด domain name, ใช้บริการ hosting, จนถึง SEO, Web Analytic จนไปถึง E-commerce system เรียกได้ว่าครบวงจร ซึ่ง Adobe นำ online service นี้มาเชื่อมเข้ากับ Adobe Dreamweaver เพื่อให้ Web designer ไม่ต้องออกไปหา domain หรือ hosting ที่ไหน แค่สมัครใช้บริการ แล้วก็สามารถ upload ตัว Web Project ขึ้นไปใช้งานได้ทันที (มีทั้งแบบฟรีให้ทดลองใช้ และเสียเงินเป็นรายเดือน)

     6. Web Font Management

            Adobe Dreamweaver CS6 ได้มีส่วนของการจัดการ Web Font ทำให้ปัญหาเรื่องฟอนต์ในเครื่องผู้ชมสามารถแสดงตัวอักษรบนหน้าเว็บได้ถูกต้อง

     7. CSS Multiple Classes selection

            การเลือกใส่ CSS Class ให้ HTML Element ใน Adobe Dreamweaver รุ่นก่อนๆ ไม่สามารถทำได้อย่างสะดวกนัก ต้องอาศัยความรอบคอบ แต่ใน Adobe Dreamweaver CS6 ได้มีการเพิ่มส่วนในการจัดการ CSS Multiple Class ให้ง่ายและสะดวกขึ้นมาก

ที่มา : http://www.idealready.com/whatsnew_2.html

 คุณสมบัติของเครื่องคอมพิวเตอร์ก่อนติดตั้งโปรแกรม

           

            1. หน่วยประมวลผลกลาง (CPU) ไม่น้อยกว่า Intel Pentium4 หรือ AMD Athlon 64

            2. หน่วยความจำ (RAM) ไม่น้อยกว่า 512 MB (แนะนำ 1 GB)

            3. เนื้อที่ว่าง (Harddisk) ไม่น้อยกว่า 1 GB

            4. จอภาพ (Monitor) ความละเอียดไม่น้อยกว่า 1,024 x 768 Pixels

            5. ระบบปฏิบัติการ (OS) ไม่ต่ำกว่าระบบปฏิบัติการ Windows XP

            6. ไดร์ฟดีวีดี-รอม (DVD-ROM drive)

 การติดตั้งโปรแกรม Adobe Dreamweaver CS6

     การติดตั้งโปรแกรม Adobe Dreamweaver CS6 สามารถติดตั้งจากแผ่นซีดีหรือดาวน์โหลดจากอินเทอร์เน็ต มีขั้นตอนการติดตั้งดังนี้

            1. คลิกที่ไอคอน

            2. จะปรากฏหน้าต่าง ให้เลือกตำแหน่งที่จะติดตั้งโปรแกรม เมื่อเลือกเสร็จแล้ว คลิกที่ปุ่ม Next

            3. จะปรากฏหน้าต่าง การติดตั้งโปรแกรม ซึ่งแบ่งออกเป็น 2 แบบ คือ

                - Install ต้องมี Serial Number เพื่อใช้ติดตั้งโปรแกรม

                - Try เป็นโปรแกรมสำหรับทดลองใช้ 30 วัน

                หมายเหตุ การติดตั้งโปรแกรมในครั้งนี้ เลือกการติดตั้งแบบ Install

            4. จะปรากฏหน้าต่าง แสดงลิขสิทธิ์เกี่ยวกับโปรแกรม ให้คลิกที่ปุ่ม Accept

            5. จะปรากฏหน้าต่าง ให้ใส่ Serial Number จากนั้นให้คลิกที่ปุ่ม Next

            6. จะปรากฏหน้าต่าง Options เพื่อเลือกโปรแกรมในการติดตั้ง ดังนี้

                 - เลือกโปรแกรม Adobe Dreamweaver CS6 เพื่อติดตั้งโปรแกรม

                 - ช่อง Language เพื่อเลือกภาษาในการติดตั้งโปรแกรม

                 - ช่อง Location เพื่อเลือกตำแหน่งในการติดตั้งโปรแกรม โดยการติดตั้งอัตโนมัติ จะถูกติดตั้งที่ตำแหน่ง C:\Program Files\Adobe (สามารถเปลี่ยนตำแหน่งในการติดตั้งได้)

                 - เมื่อกำหนด Options ต่าง ๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Install

            7. จะปรากฏหน้าต่าง กำลังติดตั้งโปรแกรม เมื่อติดตั้งโปรแกรมเสร็จเรียบร้อย ให้คลิกที่ปุ่ม Close

 การเปิดใช้งาน Adobe Dreamweaver CS6

     เมื่อต้องการเข้าสู่้โปรแกรม Adobe Dreamweaver CS6 เพื่อเปิดใช้งาน มีขั้นตอนดังนี้ (ระบบปฏิบัติการ Windows XP)

            1. คลิกที่ปุ่ม Start

            2. คลิก Programs หรือ All Programs

            3. เลือก Adobe Dreamweaver CS6

            4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเข้าสู่หน้าโปรแกรมหลัก ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้

                    1. Open a Recent Item : แสดงชื่อเว็บเพจที่เคยใช้งานมาแล้ว หรือคลิกที่ปุ่ม Open เพื่อค้นหาไฟล์ที่ต้องการ

                    2. Create New : เป็นการสร้างไฟล์งานใหม่ เช่น HTML, ColdFusion, PHP, ASP, JavaScript เป็นต้น

                        - HTML : สร้างหน้าเว็บธรรมดา เหมาะสำหรับผู้เริ่มต้นสร้างเว็บ

                        - ColdFusion : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ ColdFusion

                        - PHP : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ PHP

                        - CSS : สร้างไฟล์เก็บรูปแบบตัวอักษร ตาราง สีพื้นหลัง เพื่อนำไปใช้ในทุก ๆ หน้าเว็บเพจ

                        - JavaScript : สร้างไฟล์สคริปต์ที่ทำงานฝั่งไคลเอนต์ และทำงานที่เครื่องของผู้เข้าชมเว็บไซต์

                        - Dreamweaver Site : สร้างเว็บไซต์ใหม่

                    3. Top Features (Videos) : เข้าสู่หน้าเว็บ Adobe TV ดูวีดิโอสาธิตการใช้งาน

 ส่วนประกอบของ Adobe Dreamweaver CS6

           

     ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 มีองค์ประกอบ ดังนี้

            1. Menu bar เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม

                - Code สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย

                - Split สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่ง ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง

                - Design สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้

                - Title สำหรับแสดงชื่อของเว็บเพจ ในส่วนของแถบหัวเรื่อง

            2. Toolbar เป็นแถบรวบรวมคำสั่งที่ใช้งานบ่อยๆ

            3. Document Windows เป็นพื้นที่สำหรับสร้างหน้าเว็บเพจ และสามารถเลือกพื้นที่การทำงานได้หลายมุมมอง เช่น

                - Code View สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย

                - Code and Design สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยด้านบนจะแสดงส่วนของคำสั่ง และด้านล่างแสดงเว็บเพจปกติไว้

                - Design View สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้

            4. Status bar เป็นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า Tag Selector ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอกขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ

            5. Properties Inspector เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ

            6. Insert Bar เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่ซึ่งมีรายละเอียดดังนี้

                - Common เป็นกลุ่มเครื่องมือพื้นฐานในการสร้างเว็บเพจ เช่น รูปภาพ กราฟิก ตาราง ไฟล์มีเดีย เป็นต้น

                - Layout เป็นกลุ่มเครื่องมือที่ช่วยในการจัดองค์ประกอบของหน้าเว็บเพจ

                - Forms เป็นกลุ่มเครื่องมือที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผู้ชม เช่น ช่องรับข้อความ และฟิลด์ชนิดต่างๆ

                - Data เป็นกลุ่มเครื่องมือที่ใช้สำหรับสร้างหน้าเว็บติดต่อกับฐานข้อมูล

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

                - jQuery Mobile เป็นกลุ่มเครื่องมือที่ช่วยในการสร้างหน้าเว็บบนมือถือ

                - InConext Editing เป็นกลุ่มเครื่องมือที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้

                - Text เป็นกลุ่มเครื่องมือที่ใช้จัดรูปแบบข้อความในเว็บเพจ

                - Favorite เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ เพื่อความสะดวกในการใช้งาน

                - Color Icons แสดงสีของปุ่มเครื่องมือ

                - Hide Labels ซ่อนชื่อเรียกของปุ่มเครื่องมือ

            7. Panel Group เป็นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบเว็บเพจ

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

ขั้นตอนที่ 1 คลิกเลือกคำสั่ง Site --> Manage Sites... จาก Menu Bar ขั้นตอนที่ 2 จะปรากฏไดอะล็อกบ็อกซ์ Manage Site ให้ทำการคลิกที่ปุ่ม New... จากนั้นเลือก Site

	ขั้นตอนที่ 3 รอสักครู่จะปรากฏไดอะล็อกบ็อกซ์ Site Definition ให้ทำการตั้งชื่อไซต์ ในช่อง Site name ขั้นตอนที่ 4 ระบุโฟลเดอร์ที่จะใช้ใน การจัดเก็บเว็บไซต์ โดยการคลิกที่รูปโฟลเดอร์ ที่บริเวณ Local root folder ซึ่งจะมีไดอะล็อกบ็อกซ์ใหม่เพิ่มมา ให้เลือกไปยังโฟลเดอร์ที่เราจะจัดเก็บข้อมูล จากนั้น คลิกปุ่ม Select (เลือกไปยังโฟลเดอร์ที่จะจัดเก็บเว็บไซต์ โดยต้องสร้างโฟลเดอร์นี้ไว้ก่อน จากตัวอย่าง Webmaster สร้างโฟลเดอร์ชื่อ nextstepdev ไว้ที่ C:\ AppServ\www ดังนั้น Webmaster จึงเลือกเข้าไปในโฟลเดอร์ชื่อ nextstepdev แล้วจึงกดปุ่ม Select ) ขั้นตอนที่ 5 เมื่อระบุโฟลเดอร์สำหรับเก็บข้อมูลเรียบร้อยแล้ว คลิกปุ่ม OK

	ขั้นตอนที่ 6 จะปรากฏชื่อ Site name ที่เราสร้างขึ้นในหน้าต่าง Manage Site ดังภาพ จากนั้นให้เราคลิกปุ่ม Done

	แค่นี้ก็เรียบร้อยแล้วค่ะ Site ที่เราสร้างขึ้น จะปรากฏขึ้นที่บริเวณ File Panel ทางด้านขวามือ ดังภาพ

การกำหนดคุณสมบัติพื้นฐานของเว็บเพจ  ก่อน ที่เราจะเริ่มต้นสร้างเว็บเพจ หลังจากเราได้สร้างไฟล์ใหม่แล้ว เราควรกำหนดคุณสมบัติพื้นฐานให้กับหน้าเว็บเพจของเราก่อน เพื่อใช้เป็นค่าเริ่มต้นในการทำเว็บเพจของเพจนั้น คุณสมบัติพื้นฐานหรือค่าเริ่มต้นของเว็บเพจ ซึ่งเราจะต้องเริ่มกำหนดก่อนทำเว็บ ได้แก่ การกำหนดค่าของฟอนต์ ขนาดของฟอนต์ สีของข้อความ สีของพื้นหลัง เป็นต้น ซึ่งมีวิธีกำหนดค่าคุณสมบัติพื้นฐานของเว็บเพจ ดังนี้ ขั้นตอนแรก คลิกที่เมนู Modify --> Page Properties จะมีไดอะล็อกบ็อกซ์ ปรากฏขึ้น ขั้นตอนที่ 2 กำหนดค่าในส่วนของ Appearance ซึ่งจะประกอบไปด้วย รายละเอียดที่ต้องกำหนดดังนี้ 1. ข้อมูลเกียวกับลักษณะของข้อความ ที่จะปรากฏทางหน้าเว็บเพจ เช่น จะเป็นฟอนต์อะไร ขนาดเท่าไหร่ สีอะไรเป็นต้น 2. ข้อมูลเกี่ยวกับพื้นหลังของเว็บเพจ ซึ่งสามารถกำหนดได้ ว่าต้องการให้พื้นหลังของเว็บเพจเป็นสีอะไร หรือหากไม่กำหนดเป็นสีก็สามารถกำหนด เป็นพื้นหลังแบบรูปภาพก็ได้ 3. ส่วนของระยะขอบของเว็บเพจ ซึ่งหากคุณไม่ได้กำหนดไว้ ค่าเริ่มต้นของเว็บเพจของคุณจะมีลักษณะเว้นว่างบริเวณขอบทั้งสี่ด้าน หากไม่ต้องการให้มีขอบให้กำหนดค่า margin ทั้งสี่ด้านให้เท่ากับ 0 ขั้นตอนที่ 3เมื่อกำหนดเรียบร้อยแล้ว ให้ทำการคลิกปุ่ม OK เพจของคุณก็จะมีคุณสมบัติตามค่าเริ่มต้น ที่คุณได้กำหนดค่าไว้ คุณสมบัติส่วนนี้ หากคุณไม่ได้กำหนดไว้ ชนิดของฟอนต์และขนาด ที่แสดงผลใน Dreamweaver จะถูกแสดงผลตามค่าดีฟอลต์ที่คุณได้กำหนดที่ในส่วน Preferences ของโปรแกรม (ติดตามอ่านได้ในบทความต่อไปค่ะ) ส่วนการแสดงผลทางบราวเซอร์ หากคุณไม่ได้กำหนดชนิดของฟอนต์ ขนาด สีของฟอนต์ และสีพื้นหลัง การแสดงผลจะขึ้นอยู่กับค่าดีฟอลต์ที่กำหนดไว้ที่เว็บบราวเซอร์ของผู้เยี่ยม ชมแต่ละคน การใช้งาน CSS Style กำหนดรูปแบบตัวอักษร การทำ เว็บเพจนั้นบางครั้ง เราจะต้องมีการทำงานหลาย ๆ อย่าง และบางครั้งก็ต้องทำซ้ำ ๆ หลาย ๆ ครั้ง ซึ่งจะทำให้เกิดความไม่สะดวก และทำให้เสียเวลาได้ ซึ่งโปรแกรม Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยแก้ปัญหานี้ จะมีวิธีแก้ปัญหาอย่างไร ดูได้ที่บทความนี้ค่ะ  จากปัญหาข้างต้นที่ได้กล่าวไป เพื่อน ๆ บางคนอาจจะยังไม่เห็นภาพชัดเจน ว่าอะไรบ้างที่เราต้องทำหลาย ๆ อย่าง และต้องทำซ้ำ ๆ หนึ่งในนั้นที่ Webmaster จะขอยกตัวอย่างให้เห็นกันชัด ๆ ก็คือ เกี่ยวกับการพิมพ์ข้อความ การพิมพ์ข้อความนั้นเราต้องปรับแต่งคุณสมบัติ ของข้อความอยู่หลาย ๆ อย่างด้วยกัน ไม่ว่าจะเป็นการปรับเลือกฟ้อนต์ เลือกขนาดของข้อความ เลือกสีของข้อความ เห็นไหมละค่ะ เราต้องปรับค่าตั้ง 3 ครั้ง ถึงจะได้ลักษณะรูปแบบข้อความที่เราต้องการ แล้วเมื่อเราต้องพิมพ์ข้อความหลาย ๆ ข้อความ หลาย ๆ ตำแหน่ง เราก็ต้องมาทำขั้นตอนที่กล่าวมาซ้ำ ๆ อีก เพื่อแก้ไขปัญหานี้ Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยลดขั้นตอนการทำงานซ้ำ ๆ แบบที่กล่าวมา โดยแค่กำหนดค่าไว้ที่ CSS Style แล้วเรียกใช้ CSS Style แค่เพียงครั้งเดียวก็เป็นอันเสร็จเรียบร้อยค่ะ ก่อนจะไปพบวิธีการสร้าง CSS Style เรามารู้จัก CSS Style กันสักหน่อย CSS Style ย่อมาจาก Cascading Style Sheets เป็นเครื่องมือที่ช่วยกำหนดคุณสมบัติของสิ่งต่าง ๆ ในหน้าเว็บเพจ ไม่ว่าจะเป็นการกำหนดคุณสมบัติของฟอนต์ เช่น ลักษณะของฟอนต์ ขนาด กำหนดคุณสมบัติของสี เกี่ยวกับพื้นหลัง เกี่ยวกับตาราง และอื่น ๆ อีกมากมาย รูปร่างหน้าตา CSS Style ใน Macromedia Dreamweaver Mx 2004 ก็มีลักษณะดังภาพด้านบนค่ะ ซึ่งก็ประกอบไปด้วยส่วนต่าง ๆ ตามที่เห็นในภาพค่ะ เอาละครับ เรามาเริ่มสร้าง CSS Style เพื่อกำหนดรูปแบบตัวอักษรและข้อความกันเลยค่ะ ขั้นตอนแรก ให้คุณคลิกที่ปุ่ม สร้างสไตล์ใหม่ ซึ่งอยู่บริเวณด้านล่าง (ตำแหน่ง สร้างสไตล์ใหม่ ตามรูปที่ 1 ค่ะ) ขั้นตอนที่ 2 ถ้าทำขั้นตอนแรกถูกต้อง คุณก็จะเจอไดอะล็อกบ็อกซ์ New CSS Style ตามภาพที่ 2 ค่ะ ให้คุณทำการตั้งชื่อของ Style ที่ช่อง Name ต้องตั้งชื่อให้สื่อความหมายนะค่ะ เพราะชื่อนี้จะปรากฏให้เราเลือกเมื่อต้องการใช้งาน ตั้งให้สื่อความหมายจะได้จำได้ (บางครั้งเราก็สร้าง Style หลาย ๆ ตัวค่ะ สร้างเยอะถ้าชื่อไม่สื่อความหมายเดียวจะลืมเอาได้) Webmaster ตั้งชื่อ Style ว่า "tahoma_12" เพราะจะสร้างรูปแบบฟอนต์ที่ใช้ฟอนต์แบบ tahoma และจะกำหนดขนาดฟอนต์เท่ากับ 12 pixels เมื่อตั้งชื่อและกำหนดรายละเอียดตามภาพแล้ว กด OK ขั้นตอนที่ 3 จะปรากฏไดอะล็อกบ็อกซ์ เพื่อให้ทำการเซฟ Style Sheets ให้ทำการตั้งชื่อ Style Sheets จากนั้นเซฟไว้ในโฟลเดอร์ Site งานที่กำหนดไว้สำหรับเก็บข้อมูลเว็บไซต์ที่เราจะสร้างขึ้น ขั้นตอนที่ 4 เมื่อเราได้เซฟ Style Sheets เรียบร้อยแล้วจะมีไดอะล็อกบ็อกซ์ปรากฏขึ้น เพื่อให้เรากำหนดลักษณะของ Style Sheets ในที่นี้เราจะกำหนดลักษณะของตัวอักษรและข้อความ ดังนั้นให้เลือก Type สังเกตบริเวณทางขวามือ จะมีลักษณะของ Type ให้เรากำหนด ซึ่ง Webmaster ก็ได้กำหนดฟอนต์แบบ tahoma และกำหนดขนาดฟอนต์เท่ากับ 12 pixels และกำหนดสีของฟอนต์ เป็น รหัสสี #333333 และเลือกเป็นแบบตัวอักษรแบบธรรมดา เมื่อกำหนดค่าต่าง ๆ เรียบร้อยแล้วก็กดปุ่ม OK เพียงแค่นี้เราก็สร้าง Style Sheets ได้แล้วค่ะ สังเกตที่บริเวณ CSS Style จะปรากฏชื่อ Style Sheets ที่เราสร้างขึ้น พร้อมทั้งรายละเอียดลักษณะของสไตล์ และที่บริเวณ File Panel ก็จะปรากฏไฟล์ CSS Style ที่เราได้สร้างขึ้นปรากฏให้เห็นค่ะ ขั้นตอนการสร้าง CSS Style ก็เสร็จเรียบร้อยแล้วค่ะ เดียวบทความหน้าเราจะมาเรียนรู้วิธีการใช้งาน CSS Style ที่เราได้สร้างไว้กันค่ะ ติดตามอ่านในบทความถัดไปค่ะ การเรียกใช้งาน CSS Style ที่ได้กำหนดไว้ บทความนี้เราจะมาเริ่มต้น ลองเรียกใช้งาน CSS Style ที่เราได้สร้างไว้ในบทความที่แล้ว มาดูกันค่ะว่าจะเรียกใช้งานกันอย่างไร แต่รับรองได้ค่ะว่าทได้ง่าย ๆ และรวดเร็วด้วยค่ะ จากบทที่แล้วเราได้สร้าง CSS Style ไว้แล้ว ซึ่งเป็น Style เกี่ยวกับตัวอักษรและข้อความ ทีนี้เราก็มาเริ่มต้นกันเลยค่ะ ขั้นตอนที่ 1 ให้เราสร้างข้อความขึ้นมาก่อนค่ะ โดยไม่ต้องกำหนดคุณสมบัติใด ๆ ของข้อความค่ะ แค่พิมพ์ข้อความธรรมดา ๆ ขั้นตอนที่ 2 หลังจากนั้นให้ใช้เมาท์ลากเพื่อเลือกข้อความ ตามภาพที่ 2 ค่ะ ขั้นตอนที่ 3 เลื่อนเมาส์มาที่บริเวณ ด้านล่าง ตรงส่วนของ Properties จากนั้นคลิกเลือกที่ชื่อ Style ตามภาพที่ 3 ค่ะ จากนั้นเลือก Style ตามชื่อที่เราได้สร้างไว้ ในบทความที่แล้วครับ จากภาพผลลัพธ์ Webmaster สร้างสไตล์อีกชื่อ คือ tahoma_B12red คือสร้างสไตล์ ฟอนต์แบบ tahoma ขนาด 12 pixels และมีสีแดง #FF0000 และเป็นตัวหนา ซึ่งเมื่อเลือกใช้ Style ตัวนี้ก็จะได้ผลลัพธ์อย่างที่เห็นค่ะ การใส่สี Background ให้กับเว็บเพจ บทความนี้เป็นบทความ Basic ของการใช้โปรแกรม Dreamweaver เกี่ยวกับการใส่สีสันให้กับหน้าเว็บเพจ โดยการกำหนดสีพื้นหลัง (Background) ให้กับเว็บเพจ ซึ่งสามารถใส่สีให้กับพื้นหลังของเว็บเพจได้ง่าย ๆ ดังนี้ เสร็จเรียบร้อยแล้วค่ะ เพียงแค่นี้ข้อความที่เราใช้ Style นี้ ก็จะเปลี่ยนคุณสมบัติตามค่าของ Style ที่เราได้กำหนดไว้ คือฟอนต์แบบ tahoma ขนาด 12 pixels และมีสีเทาดำ #333333 ขั้นตอนที่ 1 ให้เราเปิดโปรแกรม Dreamweaver ขึ้น มาก่อนค่ะ จากนั้นเราจะมาเริ่มต้นการใส่สีของหน้าเอกสาร Web Page โดยคลิกที่ Menu Bar ที่เมนู Modify --> Properties ตามภาพที่ 1 ค่ะ ขั้นตอนที่ 2 จากนั้นเมื่อปรากฏไดอะ ล็อกบ็อกซ์ Page Properties ขึ้น ให้ทำการเลือกสีที่ต้องการในตำแหน่ง Background ตามภาพที่ 2 จากนั้นคลิกปุ่ม OK เพียงแค่นี้ พื้นสีเว็บเพจของเพื่อน ๆ ก็จะเปลี่ยนเป็นสีตามที่ได้กำหนดไว้ในขึ้นตอนที่ 2 แล้วค่ะ  การใส่ลิงค์ให้ข้อความและรูปภาพ บทความนี้จะเป็นการใส่ลิงค์ให้กับข้อความและรูปภาพ โดยใช้โปรแกรม Dreamweaver ซึ่งสามารถทำได้ง่าย ๆ ดัง ขั้นตอนที่ 1 ให้ทำการสร้างไฟล์ใหม่ใน Dreamweaver ก่อนค่ะจากนั้นดึงภาพเข้ามาในโปรแกรม Dreamweaverสำหรับทำลิงค์แบบลิงค์รูปภาพ ตามตำแหน่งที่ 1 และการสร้างข้อความสำหรับเตรียมทำลิงค์แบบลิงค์ข้อความ ตามตำแหน่งที่ 2 ขั้นตอนที่ 2 เราจะมาเริ่มใส่ลิงค์ให้ กับข้อความและรูปภาพกันค่ะ ก่อนอื่น้เรามาทำลิงค์แบบรูปภาพกันก่อนค่ะ เริ่มต้นก็คลิกที่ภาพที่เราจะทำลิงค์ตามตำแหน่งที่ 1 ของรูปที่ 1 จากนั้นลองสังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ในส่วนของ Properties สังเกตบริเวณช่องที่มีชื่อว่า Link ตามภาพที่ 2 ในตำแหน่ง 1.1 หากต้องการลิงค์ไฟล์เอกสารเราสามารถลิงค์ได้โดยคลิกที่รูปแฟ้ม (ภายในวงกลม) เพื่อ Select File ที่ต้องการลิงค์ไปหา หรือหากเราจะลิงค์แบบลิงค์เว็บไซต์ เราก็สามารถพิมพ์ URL ของเว็บไซต์นั้น ๆ ลงในช่อง Link นี้ได้เลย ดังที่เห็นในภาพที่ 2 ซึ่งเป็นการลิงค์แบบลิงค์ไปเว็บไซต์ โดยตามตัวอย่างจะลิงค์ไปที่ http://www.thainextstep.com แบบที่ 2 การลิงค์แบบลิงค์ข้อความ หลังจากที่เราพิมพ์ข้อความแล้ว ให้เราทำการแด็กเมาส์ที่บริเวณข้อความที่เราต้องการทำลิงค์ ตามภาพที่ 1 ตำแหน่งที่ 2 เมื่อแด็กเมาส์ที่ข้อความแล้ว สังเกตบริเวณด้านล่างของโปรแกรม Dreamweaver ใน ส่วนของ Properties ตามภาพที่ 2.1 ซึ่งจะมีช่องที่ชื่อว่า Link อยู่เหมือนกัน วิธีการทำลิงค์ก็เหมือนกันกับแบบลิงค์ภาพค่ะ ซึ่งก็จะมีช่องให้ใส่ลิงค์ และปุ่มให้ Select File เพียงแค่นี้ ก็เสร็จแล้วค่ะ ลองเซฟไฟล์แล้วลอง test กันดูค่ะ ... เวลาเราเอาเมาส์ Over บนรูปและลิงค์ เมาส์พอยเตอร์ก็จะเปลี่ยนไป จากเป็นลูกศรก็จะกลายเป็นรูปมือแทน ถ้าได้ตามนี้ก็ลิงค์สำเร็จแล้วค่ะ การสร้างตารางใน Dreamweaver  บท ความนี้เราจะมาเริ่มต้นสร้างตารางให้กับเว็บเพจกันค่ะ ซึ่งเป็นบทความ Basic อีกบทความหนึ่ง ใครที่เริ่มต้นใช้งานโปรแกรม Deamweaver ก็เข้ามาดูกันได้ค่ะ ขั้นตอนที่ 1 ให้เราเปิดโปรแกรม Dreamweaver ขึ้นมาก่อนค่ะ จากนั้นเรามาเริ่มสร้างตารางให้เว็บเพจของเรากันเลยค่ะ โดยคลิกที่รูปตาราง ตามภาพที่ 1 ค่ะ ขั้นตอนที่ 2 จะปรากฏไดอะล็อกบีอก Insert Table ขึ้นมา ซึ่งในส่วนนี้จะเป็นส่วนกำหนดรายละเอียดของตารางที่เราต้องการจะสร้าง อันดับแรกก็คือกำหนดขนาดของตาราง โดยตามตัวอย่างจะขอสร้างตารางขนาด 3 แถว 3 คอลัมน์ โดยให้มาขนาดความกว้างของตารางเท่ากับ 300 pixels และกำหนดขอบของตารางให้เป็นแบบไม่มีขอบ เมื่อกำหนดได้ตามต้องการแล้วคลิกที่ปุ่ม OK และแล้วเราก็จะได้ตารางขนาด 3 แถว 3 คอลัมน์ และกว้าง 300 pixels หากเรา Save ไฟล์แล้วดูผลลัพธ์ ก็จะไม่เห็นอะไรใด ๆ ทั้งสิ้น เพราะเรากำหนดให้เป็นแบบไม่มีขอบ โดยส่วนใหญ่แล้วเราจะกำหนดให้เป็นแบบไม่มี ขอบ ในกรณีที่ใช้สำหรับจัดตำแหน่งของข้อความเนื้อหาซะเป็นส่วนใหญ่ และหากเราต้องการแบบให้แสดงผลด้วย เราก็จะต้องปรับแต่งรายละเอียดให้กับตารางด้วย ไม่ว่าจะเป็นการใส่เส้นขอบ การใส่สีขอบตาราง การใส่สีให้พื้นของตาราง และรวมไปถึงการใส่ภาพให้กับพื้นของตาราง  การปรับแต่งตาราง ด้วยการใส่สีพื้นและเส้นขอบ บท ความนี้เป็นบทความต่อจากบทความสอน Dreamweaver ในบทความที่แล้วค่ะ หลังจากที่บทความที่แล้วเราทำ Workshop Photoshop สร้างตารางได้แล้ว ในบทความนี้เราจะมาปรับแต่งตารางของเราโดยการเพิ่มสีสันให้พื้นตารางและเส้น ขอบ  ขั้นตอนแรก ก่อนอื่นเราต้องสร้างตารางขึ้นมาก่อนนะค่ะ จะกี่แถวกี่คอลัมน์ก็ได้ Webmaster ขอใช้ Table จากบทความ การสร้างตารางใน Dreamweaver ที่ได้สร้างไว้ในบทความที่แล้วนะค่ะ เมื่อสร้างตารางแล้ว หากเราไม่ได้กำหนดเส้นขอบตาราง (เหมือนบทความที่ผ่านมาตอนสร้าง Table กำหนด Border=0) ตั้งแต่เริ่มต้นสร้าง เมื่อเราจะใส่สีของเส้นขอบ ถ้าเราใส่สีไปจะทำให้ไม่เห็นสีของเส้นขอบตาราง ดังนั้นเราจึงต้องไปกำหนดเส้นขอบของตารางกันก่อน โดยการใช้เมาส์จับที่ตาราง จากนั้นกำหนดค่า Border ที่ส่วน Properties ให้มีค่าเท่ากับ 1 ดังที่ปรากฏตามภาพที่ 1 เมื่อเรากำหนด Border=1 แล้ว เส้นขอบของตารางจะเปลี่ยนไปดังภาพที่ 2 และ เมื่อทดสอบดูผ่าน Browser ก็ทำให้เราสามารถเห็นขอบของตารางได้ ขั้นตอนที่ 2 เมื่อเราได้เส้นขอบของ ตารางแล้ว ให้เราใช้เมาส์จับที่ที่ตาราง จากนั้น สังเกตที่ส่วนของ Properties แล้วคลิกเลือก Brdr Color เพื่อใส่สีให้กับเส้นของตาราง และเมื่อใส่สีแล้วก็จะได้เส้นขอบตารางเหมือนภาพที่ 3 ค่ะ ขั้นตอนที่ 3 ขั้นตอนนี้เราจะมาใส่สี ให้กับพื้นหลังของตารางกันค่ะ เริ่มต้นโดยให้เราใช้เมาส์จับที่ที่ตาราง จากนั้นใส่สีให้ Background ของตารางโดยคลิกเลือกสีที่ Bg Color ของ Properties จากนั้นคลิกเลือกสีที่ต้องการค่ะ และแล้วก็เสร็จเรียบร้อย ได้ผลลัพธ์ของการปรับแต่งตาราง ตามภาพที่ 4 ค่ะ การใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver การใส่คำอธิบายให้รูปภาพ ก็คือการใส่คำสั่ง ALT Tag ในภาษา HTLM นั่นเอง และเราสามารถใช้โปรแกรม Dreamweaver ในการใส่คำอธิบายให้รูปภาพได้ ซึ่งสามารถทำได้อย่างง่ายดายและรวดเร็ว ติดตามดูได้ในบทความนี้ค่ะ ขั้นตอนการใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver อย่างแรกเราก็ต้องนำภาพเข้ามาในโปรแกรม โดยคลิกที่ปุ่มที่ 1 เมื่อเราได้รูปภาพมาแล้วให้เรา คลิกที่รูปภาพตามรูปภาพที่ 2 จากนั้นสังเกตในส่วนบริเวณ Properties เราจะเห็นในส่วนของช่อง Alt ตามภาพที่ 3 ให้เราใส่คำอธิบายรูปภาพลงในช่อง Alt นี้ค่ะ แค่ นี้ก็เสร็จเรียบร้อยแล้วค่ะ ลองเซฟไฟล์เป็น HTML ไฟล์แล้วลองเปิดไฟล์ดู หรือจะกด F12 ดูเลยก็ได้ค่ะ เมื่อเราเลื่อนเม้าส์ไปบนรูปภาพ เราก็จะเห็นคำอธิบายของรูปภาพ ตามที่เรากำหนดไว้ค่ะ เพิ่มอักขระพิเศษใน Dreamweaver ในการทำเว็บเพจ บางครั้งเราอาจจะต้องใส่อักขระพิเศษต่าง ๆ ซึ่งทาง Dreamweaver เค้าก็เตรียมเครื่องมือในส่วนนี้ไว้ให้เราใช้อยู่แล้วค่ะ ทำได้อย่างไรเข้ามาดูได้ที่บทความนี้ค่ะ สำหรับตัวอย่างอักขระที่เราจะมาลองใส่กันวันนี้ ก็คือ Copyright ที่มีลักษณะตามภาพฝั่งซ้ายมือ วิธีทำก็ไม่อยากค่ะ โดยทำได้ดังนี้ ก่อนอื่นก็ให้พิมพ์ข้อความขั้นมาก่อนนะค่ะ จากนั้นให้วางเคอเซอร์ตรงตำแหน่ง X จากนั้นไปที่บริเวณเมนูบาร์ เลือกใช้คำสั่ง Insert --> Special Charecters --> Copyright ก็จะได้ผลลัพธ์ตามภาพด้านล่างค่ะ เทคนิคการทำภาพ Swap Image สำหรับบทความนี้ เราจะมาทำเทคนิคการ Swap Image เพื่อเพิ่มความน่าสนใจให้กับการลิงค์รูปภาพบนเว็บ นอกจากนี้สามารถนำไปประยุกต์ ทำให้เว็บไซต์ดูดี แต่จะประยุกต์แบบไหน ดูไอเดียการทำได้ที่นี่ค่ะ เทคนิคนี้ทได้ไม่อยากค่ะ เพราะเป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver ... เราจะทำเทคนิคนี้ได้นั้น ก่อนอื่นต้องเตรียมไฟล์รูปภาพไว้ก่อน 2 ภาพค่ะ ในบทความนี้ Webmaster เตรียมภาพไว้ 2 ภาพตามรูปด้านบนค่ะ จากนั้นเมื่อเราได้รูปภาพมา 2 รูปแล้ว เราก็จะมาเริ่มทำกันเลยค่ะ ขั้นตอนที่ 1 ก็ให้ทำการสร้างไฟล์ใหม่ใน Dreamweaver เลยค่ะ ขั้นตอนที่ 2 ให้ทำการดึงรูปเข้ามาใน โปรแกรม โดยการที่ตำแหน่ง A ตามภาพค่ะ จากนั้นจะมีไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพแรกที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง C ขั้นตอนที่ 3 เมื่อได้รูปมาแล้ว ให้ทำการคลิกที่รูป จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม เลือกแท็บ Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image ขั้นตอนที่ 4 จะปรากฏไดอะล็อกบ็อก Swap Image ให้ทำการคลิก Browse... ตามตำแหน่งที่ 1 จากนั้นจะปรากฏไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพอีกภาพที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง 2 จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ 3 ขั้นตอนที่ 5 ทำการบัญทึกหน้าเว็บเพจ เป็นเอกสาร .html หรือ .htm แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ ลองเรียกไฟล์ที่บันทึกไว้ มาดูสิค่ะ ว่าได้ผลลัพธ์อย่างไร...? สำหรับคนที่ทำตามขึ้นตอนต่าง ๆ ข้างต้นมาหมดแล้วก็คงจะได้ทราบแล้วนะค่ะ ว่าได้ผลลัพธ์อย่างไร สำหรับคนที่ยังไม่ได้ลงมือทำก็ลองทำตามดูค่ะ แล้วจะได้เทคนิคไปทำเว็บของคุณให้สวยขึ้นอีกแบบ     อ้างอิงโดย http://papillondreamweaver.blogspot.com/2014/02/dreamweaver-cs6.html                          http://krupichai4259.blogspot.com/p/dreamweaver-cs6-adobe-dreamweaver-cs6.html