Dreamweaver CS

Dreamweaver CS

Dreamweaver CS เป็นโปรแกรมสำหรับทำเว็บไซต์ ข้อดีคือสามารถแก้ไขเว็บไซต์โดยไม่ต้องเขียน code มากมาย

รายละเอียดคอร์ส

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

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

บทความนี้ถูกเขียนขึ้นมานานแล้วตั้งแต่ Dreamweaver ยังเป็นเวอร์ชัน CS3 แต่อุปกรณ์หรือเครื่องมือต่างๆของโปรแกรมนี้ยังใช้ได้เหมือนในรุ่นปัจจุบัน

พื้นฐาน Dreamweaver

แนะนำการใช้งานโปรแกรมเบื้องต้น ให้เราได้รู้จักเครื่องมือต่างๆของโปรแกรม และยังไม่วิธีการตั้งค่าที่ถูกต้องอีกด้วย หัวข้อที่น่าสนใจคือการกำหนดค่า site ของ dreamweaver ถ้าเราไม่ได้ตั้งค่านี้ไว้การใช้งานโปรแกรมอาจไม่สะดวกเท่าที่ควร ดังนั้นไม่ควรอย่างยิ่งที่จะข้ามหัวข้อนี้ไป

1

แนะนำ Dreamweaver

แนะนำข้อดีของโปรแกรม Dreamweaver ทำไมถึงต้องใช้งาน มีประโยชน์อย่างไรบ้าง

2

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

เริ่มต้นด้วยการตั้งค่าให้โปรแกรมสามารถทำงานกับภาษาไทยได้อย่างไม่ติดขัด

3

เครื่องมือต่างๆในโปรแกรม Dreamweaver

เครื่องมือต่างๆอะไรเรียกว่าอะไรบ้างในโปรแกรม dreamweaver

4

กำหนด Site ขั้นตอนสำคัญที่สุดของการทำเว็บด้วย Dreamweaver

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

5

ใส่ข้อความในเว็บเพจด้วย Dreamweaver

เริ่มต้นการสร้างเว็บไซต์ด้วยการเพิ่มข้อความในเว็บเพจด้วยโปรแกรม dreamweaver

6

ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

แทรกรูปในเว็บเพจด้วยโปรแกรม dreamweaver

7

สร้าง Hyperlink

สร้างลิงก์เชื่อมโยงกันภายในเว็บเพจ และลิงก์ไปยังเว็บไซต์อื่นๆ

8

ปรับแต่งเว็บเพจด้วย Page Properties

Page propertiese สามารถทำให้เราปรับแต่งเว็บเพจของเราได้ ทั้งพื้นหลัง , ชนิดตัวอักษร , รูปแบบของ hyperlink และอื่นๆ อีกมากที่เราสามารถปรับได้ด้วยเครื่องมือนี้

9

Adding Meta Tags สำหรับการค้นหาของ Search Engine

Search Engine เป็นเครื่องมือที่ใช้ในการค้นหาเว็บไซต์ โดยเราทำการใส่คำที่ต้องการค้นหา (keywords) ลงไป Search Engine จะทำการค้นหาเว็บไซต์ที่ใกล้เคียงกับ keywords ออกมาแสดง

10

แสดงผลเว็บเพจของคุณใน browser

ถึงแม้ว่า Dreamweaver จะแสดงผลเสมือนจริง แต่ก็ยังไม่ถูกต้องเสมอไป สุดท้ายเราก็ต้องดูผ่าน browser อยู่ดีว่าเว็บเพจที่เราเขียนนั้นเป็นอย่างไร


ตัวอย่างการใช้งานจริง

ในหมวดนี้เป็นตัวอย่างการใช้งาน Dreamweaver ในการสร้างเว็บเพจ เพื่อให้ทราบถึงการใช้งานในภาพรวม ผู้อ่านสามารถทดลองใช้ Dreamweaver และสามารถสร้างเว็บเพจได้ทันที ในตัวอย่างนี้จะสร้างเว็บเพจด้วยคำสั่ง Table ซึ่งเป็นวิธีเก่า

1

ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 1)

ลองสร้างเว็บเพจด้วยคำสั่ง table เป็นการสร้างด้วยวิธีเก่าไม่เป็นที่นิยมแล้วในปัจจุบัน

2

ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 2)

เริ่มการทำเว็บไซต์ด้วยโปรแกรม dreamweaver

3

ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 3)

สร้างไฟล์ index สำหรับเว็บไซต์

4

ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 4)

สร้าง layout ให้เว็บไซต์ด้วยคำสั่ง table

5

ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 5)

บทสุดท้ายสามารถดาวน์โหลดไฟล์ที่เสร็จสมบูรณ์ได้ท้ายบทความนี้


การใส่ภาพในเว็บเพจ

ในหมวดนี้เกี่ยวกับการใส่ภาพในเว็บเพจ และเครื่องมือที่เกี่ยวกับภาพโดยละเอียด จะเริ่มตั้งแต่การหาภาพ , ขนาดภาพที่เหมาะสมในการทำเว็บเพจ , การปรับขนาดภาพ , การใส่ภาพพื้นหลัง , การทำ image map ผู้อ่านหัวข้อนี้ควรผ่านหัวข้อพื้นฐานมาก่อน

1

การบีบอัดไฟล์รูป

บทนี่เกี่ยวกับรูปภาพที่ใช้ภายในเว็บไซต์ โดยจะพูดถึงการบีบอัดไฟล์รูปเพื่อให้มีขนาดเหมาะสมที่จะใช้ภายในเว็บไซต์

2

การใส่รูป และการจัดตำแหน่งของรูป

ใส่รูปในเว็บเพจและการจัดตำแหน่งของรูป การจัดรูปให้อยู่ระหว่างตัวหนังสือ

3

เครื่องมือที่ใช้ปรับแต่งภาพของ Dreamweaver

ปรับขนาดไฟล์ภาพด้วยเครื่องมือที่ติดมากับ dreamweaver

4

การใส่ภาพพื้นหลัง ให้เว็บเพจ

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

5

Image Map

สำหรับคนที่เคยใช้ image map ใน html จะพบกว่ามันยากมากที่จะหาพิกัดตำแหน่งของภาพ และต้องมานั่งกำหนดจุดต่างๆเพื่อให้ภาพลิงก์ได้ตามที่เราต้องการ แต่ทั้งหมดนั้นจะเป็นเรื่องง่ายเมื่อเราใช้เครื่องมือของ dreamweaver


ทำงานร่วมกับ CSS

CSS เป็นภาษาที่เข้ามาช่วยเราให้สามารถปรับแต่งหน้าเว็บเพจได้ดียิ่งขึ้น และทำให้การแสดงผลถูกต้องยิ่งขึ้น ผู้ที่เข้ามาอ่านในหัวข้อนี้ควรมีพื้นฐานเรื่อง CSS มาก่อนบ้างแล้ว (สามารถอ่านพื้นฐาน CSS ได้ในหัวข้อ สร้าง web page ) จึงจะทำให้สามารถเข้าใจเนื้อหาได้ดีขึ้น

1

เริ่มต้นกับ CSS

เรียนรู้พื้นฐานของ css เพื่อที่จะใช้งานร่วมกับ dreamweaver ได้อย่างมีประสิทธิภาพ

2

Internal CSS

การประกาศ CSS สามารถทำได้หลายที่เราสามารถประกาศไว้ในหน้าเว็บเพจ หรือจะแยกเป็นไฟล์ CSS ออกมาแล้วสั่งให้นำไปใช้กับ HTML ที่เราสร้างไว้ก็ได้ ในบทความนี้จะเป็นการประกาศ CSS ไว้ในหน้าเว็บเพจ

3

External CSS

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

4

การใช้งาน CSS

กำหนดค่าของ CSS ที่เขียนไว้ให้กับวัตถุต่างๆภายในเว็บเพจ

5

เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink

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

6

Type category

จัดรูปแบบตัวหนังสือที่แสดงในเว็บเพจทั้ง Font ขนาด สี ความสูง รูปแบบแสดงผล

7

Background category

ปรับภาพพื้นหลังของเว็บไซต์ต่าง เช่น เลือกภาพพื้นหลัง ปรับขนาด ปรับตำแหน่ง

8

Block category

กำหนดช่องไฟ การจัดตำแหน่งของตัวอักษร ทั้งการขึ้นบรรทัดใหม่และระยะย่อหน้า

9

Box category

กำหนด margin, padding, ความกว้าง, ความสูง ให้กับ element

10

Border category

กำหนดเส้นขอบของวัตถุ เช่น สีเส้นขอบ ระยะเส้นขอบ ชนิดเส้นขอบ สี

11

List category

กำหนดรูปแบบการแสดงผลให้กับ list <li>

12

Positioning category

กำหนดตำแหน่งให้กับวัตถุ

13

Extensions category

กำหนด CSS สำหรับใช้ในการ Print หน้าเว็บเพจ กำหนดรูปแบบของ cursor ในหน้าเว็บเพจได้


CSS Layouts

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

1

แนะนำ CSS Layouts

CSS Layout คือะไรทำไม่ต้องใช้มีข้อดีข้อเสียอย่างไร

2

พื้นฐาน CSS Layouts

รายละเอียดและแนวคิดในการเขียน CSS layout

3

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 1)

ออกแบบเว็บไซต์ที่จะลองสร้างด้วย CSS Layout

4

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 2)

แยก element ที่อยู่ในเว็บไซต์ เพื่อให้ง่ายต่อการเขียน CSS layout

5

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 3)

เริ่มสร้าง HTML ตามที่ได้ออกแบบไว้

6

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 4)

เริ่มทำส่วน header ของเว็บไซต์

7

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 5)

เริ่มสร้างส่วนแสดงผลของเนื้อหาภายในเว็บไซต์

8

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 6)

เริ่มทำส่วนที่เป็น navigation ของเว็บไซต์

9

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 7)

ต่อจากตอนที่ 6 เริ่มใส่รายละเอียดให้กับ Navigation

10

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 8)

จัด CSS สำหรับแสดงผลในส่วนของเนื้อหาเว็บไซต์

11

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 9)

จัด CSS สำหรับแสดงผลในส่วนของเนื้อหาทางขวามือต่อจากบทที่ 8

12

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 10)

เพิ่มรายละเอียดให้กับเว็บเพจต่อจากบทที่ 9

13

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 11)

กำหนดรูปแบบการแสดงผลให้กับ Footer ของเว็บเพจ


ทำงานร่วมกับตาราง

เมื่อก่อนคำสั่ง ตาราง (table) ถือว่าเป็นคำสั่งที่จำเป็น และสำคัญมากในการสร้างเว็บเพจ เพราะการจัดตำแหน่งของหน้า layout นั้นจำเป็นจะต้องใช้คำสั่งตารางทั้งหมด แต่ตอนนี้มีการใช้ CSS layout ทำให้คำสั่งตารางลดความสำคัญลงไปมา

1

บทนำตาราง (Table)

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

2

สร้างตารางในเว็บเพจ

สร้างตารางด้วยวิธีง่ายๆ

3

การแยก และผสาน ช่องของตาราง

ตารางประกอบด้วยช่องหลายๆช่องมารวมกัน เราสามารถเอาช่องพวกนั้นมารวมกันเพื่อแสดงผลในรูปแบบต่างกันไปได้

4

กำหนดคุณสมบัติช่อง table cells

จัดรูปแบบการแสดงผลให้กับตาราง

5

การเรียงลำดับข้อมูลในตาราง

เรียงลำดับข้อมูลภายในตาราง หลังจากที่สร้างตารางเสร็จแล้ว

6

นำเข้าข้อมูลตารางจากโปรแกรมอื่น

เราสามารถนำข้อมูลจากโปรแกรมอื่นๆเช่น Excel หรือ Word มาแปลงให้อยู่ในรูปแบบตารางในเว็บไซต์เราได้ง่ายๆตามในบทความนี้


การใช้งาน frame

ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame

1

แนะนำระบบ frame

Frame เป็นการแบ่งหน้าเว็บไซต์ออกเป็นส่วนๆ โดยแต่ละส่วนนั้นมาจากคนละเว็บเพจ หรือคนละเว็บไซต์กันก็ได้

2

สร้าง frame ด้วย dreamweaver

สร้าง Frame ด้วยเครื่องมือของ Dreamweaver กัน

3

จัดการกับ hyperlink ข้าม frame

สร้างลิงก์ระหว่าง Frame


ใส่ลูกเล่น JavaScript

JavaScript เป็นภาษาคอมพิวเตอร์อย่างหนึ่งที่ทำให้เว็บไซต์ของเรา มีลูกเล่นมากขึ้นเช่น เปลี่ยนสีรูปภาพเมื่อเมาส์เคลื่อนไปอยู่เหนือภาพ ซึ่ง dreamweaver ก็เตรียมเครื่องมือสำหรับใช้ JavaScript อยู่แล้ว และทำได้ดีกว่าเวอร์ชั่นเก่ามาก

1

Rollover Image

สลับภาพเมื่อนำเมาส์ไปว่างเหนือภาพ

2

Swap image

เปลี่ยนภาพเมื่อเมาส์เลื่อนไปตามจุดที่กำหนด

3

Behaviors ที่ใช้กับ JavaScript

Behaviors คือพฤติกรรม การกระทำของผู้ใช้งานที่ทำกับเว็บไซต์เช่น คลิก ลากเมาส์ กดคีบอร์ด ในบทความนี้จะรวม behaviors ทั้งหมดที่มีได้ในเว็บไซต์

4

เขย่าภาพเมื่อเมาส์อยู่เหนือภาพ

ลองใช้ effect สำหรับภาพหรือวัตถุ

5

ทำลิงค์เปิดหน้าต่างใหม่ด้วย JavaScript

สร้าง hyperlink ด้วยคำสั่ง javascript ข้อดีคือเราสามารถกำหนดรูปแบบของ browser ที่แสดงผลได้ เช่นให้มีขนาดเท่าไหร่ จะให้แสดง address bar หรือไม่

6

ตรวจสอบความถูกต้องของฟอร์มข้อมูลด้วย JavaScript

ฟอร์มสำหรับกรอกข้อมูลเราสามารถใช้ javascript ช่วยในการแจ้งเตือนผู้ใช้ได้ว่าตอนนี้ข้อมูลที่กรอกอยู่นั้นผิดอยู่หรือเปล่า


แทรกไฟล์มัลติมีเดีย

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

1

รู้จักโปรแกรม Flash

Flash เป็นโปรแกรมสำหรับแสดงไฟล์มัลติมีเดียทั้งหลาย ปัจจุบันนี้ไม่ได้รับความนิยมแล้ว

2

รู้จักชนิดของไฟล์วิดีโอ และเสียง

ชนิดของไฟล์มัลติมีเดียที่เราควรรู้จัก ไฟล์พวกนี้มีหลายประเภทในบทความนี้จะรวมไฟล์ที่ใช้ได้กับเว็บไซต์เท่านั้น

3

สร้างตัวอักษร Flash ด้วย Dreamweaver

เราสามารถสร้างตัวหนังสือด้วย Flash ได้ข้อดีคือปรับเปลี่ยนสีได้ง่าย

4

แทรกปุ่ม flash ของโปรแกรม Dreamweaver

ปุ่มที่สร้างโดยโปรแกรม Flash นั้นสามารถปรับเปลี่ยนรูปแบบได้ง่าย

5

แทรกไฟล์ Flash ในเว็บเพจ

ไฟล์ Flash นั้นส่วนใหญ่จะเป็นไฟล์การ์ตูน หรือไฟล์ที่มีลูกเล่นเยอะ เช่น เกมส์ ในบทนี้จะบอกวิธีการแทรกไฟล์พวกนี้ไว้ในเว็บไซต์

6

แทรกไฟล์วิดีโอ และเสียงลงในเว็บเพจ

ไฟล์วิดีโอและเสียงนั้นมี plugin สำหรับแสดงผลต่างกันในบทความนี้จะบอกวิธีนำไฟล์ทั้ง 2 แบบมาแสดงในเว็บเพจ

7

แทรกไฟล์ Flash video (Flv) ลงในเว็บเพจ

ไฟล์ Flv เป็นไฟล์ video ที่ต้องเล่นผ่านทาง Flash Player เท่านั้น


Spry

หลายคนคงได้ยินชื่อ Ajax มากันบ้างแล้ว ว่าเป็นการเขียนเว็บเพจให้ตอบโต้กับผู้ใช้ ได้อย่างรวดเร็วและนุ่มนวล ซึ่งทาง Adobe ก็ได้นำ Ajax มาพัฒนาต่อให้เพื่อให้ใช้กับ Dreamweaver ได้และตั้งชื่อเครื่องมือว่า spry

1

บทนำ Spry

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

2

Spry Menu Bar

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

3

Spry Tabbed Panel

Tab เหมือนแฟ้มเอกสารเราสามารถแบ่งข้อมูลเดียวกันเป็นหมวดย่อยๆได้เพื่อความง่ายในการอ่าน

4

Spry Accordion Panel

ข้อมูลในหมวดเดียวกันบางที่ถ้าเราแสดงทั้งหมดทำให้เราอ่านหัวข้อมันได้ยาก เช่น FAQ ถ้าเราแสดงทั้งคำถามและคำตอบด้วยกันหน้าเว็บเพจจะยาวมากส่งผลให้อ่านคำถามได้ยากการใช้ Accordion ทำให้เราสามารถย่อคำตอบแล้วแสดงเฉพาะคำถามได้ง่ายขึ้น

5

Spry Collapsible Panel

ซ่อนข้อมูลแสดงเฉพาะหัวข้อ ทำให้เราอ่านหัวข้อได้ง่ายขึ้น


เลื่อนขึ้นด้านบน