
รู้จักกับโปรแกรม
Dreamweaver CS6
Dreamweaver
เป็นโปรแกรมของบริษัท Macromedia Inc. ที่ใช้สำหรับออกแบบ
และพัฒนาเว็บไซต์ เว็บเพจและเว็บ แอปพลิเคชั่น ด้วยโปรแกรม Dreamweaver เราสามารถที่จะออกแบบและพัฒนาเว็บไซต์โดยการเขียนโค๊ดภาษา HTML หรือใช้เครื่องมือ ที่โปรแกรม Dreamweaver มีให้ ซึ่งเครื่องมือเหล่านี้จะสร้างโค้ดภาษา
HTML ให้เราโดยอัตโนมัติ โดยที่เราไม่จำเป็นต้องเขียนโค๊ดภาษา
HTML เอง ในปัจจุบันโปรแกรม Dreamweaver นอกจากจะสนับสนุนการใช้งานกับภาษา
HTML และยังสนับสนุนการใช้งานร่วมกับเทคโนโลยีทางด้านเว็บอื่นๆ ด้วย
เช่น CSS และ Java Script เป็นต้น การสร้างเว็บแอปพลิเคชั่น
(Web Application) ด้วยโปรแกรม Dreamweaver นั้นสามารถที่จะสร้าง
การติดต่อกับฐานข้อมูลและดึงข้อมูลจากฐานข้อมูลโดยไม่จำเป็นที่ต้องเขียนโค้ดของเซิร์ฟเวอร์สคริปต์
(Server Script)เลย ตัวโปรแกรมจะสร้างให้เองโดยอัตโนมัติ ซึ่งจะทำให้เวลาที่ใช้ในการพัฒนาเว็บแอปพลิเคชั่นนั้นน้อยลง
การเริ่มต้นในการออกแบบเว็บไซต์
1.สร้างความสัมพันธ์เอกสารข้อมูล
โดยเรียงลำดับความสำคัญ ของข้อมูลที่ใช้ในการนำเสนอกำหนดชื่อไฟล์ของเอกสารเว็บ ให้สามารถสื่อเข้าใจได้ง่าย
และต้องทำการตั้งชื่อไฟล์เป็น ภาษาอังกฤษเท่านั้น
2.สร้างโฟลเดอร์เฉพาะ
สำหรับเอกสารเว็บแต่ละชุด/เรื่อง เพื่อความเป็นระเบียบ และต้องทำการตั้ง
ชื่อโฟลเดอร์เป็นภาษาอังกฤษเท่านั้น
3.จัดหาภาพ
หรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา หลังจากนั้นให้นำภาพที่ต้องใช้งานทั้งหมดบันทึกไว้
ในโฟลเดอร์ที่สร้างไว้ก่อน เพื่อความสะดวกต่อการเรียกใช้งาน
4.สร้างเอกสารเว็บ
โดยการลงรหัส HTML หรือใช้โปรแกรมช่วย หลังจากนั้นให้นำไฟล์เอกสาร
HTML ทุกไฟล์บันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน เพื่อความสะดวกต่อการเรียกใช้งาน
5.ตรวจสอบผล เอกสาร HTML ด้วยเว็บเบราเซอร์
เพื่อแก้ไขข้อผิดพลาดที่อาจเกิดขึ้น เนื่องจากเว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น รู้จักคำสั่ง
HTML ไม่เท่ากัน
การกำหนดค่าเริ่มต้น
Dreamweaver
การดู
Preferences
การดูและกำหนดค่า
Preferences ของ โปรแกรม Macromedia Dreamweaver เป็นสิ่งที่สำคัญที่สุด
ของการสร้างเว็บไซต์ ด้วยโปรแกรมนี้ เพราะ Preferences ของโปรแกรมก็คือ
การกำหนดค่าเบื้องต้นทั้งหมดของโปรแกรม ถ้าเราออกแบบเว็บโดยไม่ได้กำหนดค่าเว็บก็จะมีค่าผิดพลาด
เพี้ยนจากความเป็นจริง และไม่สามารถแก้ไขได้ในเหน้านั้น เราต้อง set ค่าแล้วก็ออกแบบใหม่ มาดูวิธีการกำหนดที่สำคัญดังนี้
การตั้งกำหนดค่าของเอกสารเริ่มต้น
การกำหนดFont
1. ไปที่เมนูEdit >Preferences จะได้หน้าต่างการกำหนดค่า
2. หลังจากนั้นให้เลือกFront settings เป็น Thai แล้วในส่วนของProportional font และ Code view เป็นTahoma เพื่อเป็นการกำหนดค่า Front เริ่มต้น
การกำหนดชื่อไฟล์
และนามสกุลของไฟล์เอกสารเว็บ
1. ควรใช้ตัวอักษร a -
z หรือตัวเลข 0 - 9 หรือผสมกัน
2. ตัวอักษร a -
z ควรเป็นตัวพิมพ์เล็ก
3. ห้ามตั้งชื่อไฟล์เป็นภาษาไทย
4. ชื่อไฟล์แรกของเอกสารเว็บ มักจะใช้ชื่อ
index หรือ default
การตั้งค่าไฟล์เอกสารเริ่มต้น
หากต้องการกำหนดค่าตำแหน่งเริ่มต้นชิดบนสุด
ซ้ายสุด
1. เลือก Modify > Page Properties…
2.
กำหนดค่า Left margin : 0 และ Top
margin : 0
กำหนดค่า
Title เพื่อใช้แสดงใน Title bar บนโปรแกรมเว็บเบราเซอร์
1. เลือก Modify > Page Properties… แล้วเลือกที่ Title/Encoding
2. ใส่ข้อความลงไปใน Title
การทำงานเบื้องต้นในโปรแกรม
Dreamweaver
1. Document
Window
อยู่ด้านล่างของ
Document Toolbar ซึ่งเป็นส่วนที่ใช้แสดงเนื้อหาของเว็บเพจที่เราสร้างขึ้น
และกำลังทำงานอยู่ในขณะนั้น
2. Insert
Bar
ประกอบไปด้วยปุ่มที่ใช้แทรกอ๊อบเจ๊กต์
(Object) ชนิดต่างๆ เช่น รูปภาพ ตาราง และ เลเยอร์ เป็นต้น
ลงในเว็บเพจที่เรากำลังทำงานอยู่ในขณะนั้น
3. Property
Inspector
ใช้แสดงคุณสมบัติของวัตถุหรือ
ข้อความที่เราเลือกในเว็บเพจ โดยเราสามารถที่จะเปลี่ยนแปลงแก้ไขคุณสมบัติต่างๆของวัตถุที่เราเลือกผ่านทาง
Property Inspector ได้
4. Tag
Selector
อยู่ใน
Status Bar ที่อยู่ทางด้านล่างของ Document Window เมื่อเราคลิกวัตถุในเอกสารจะปรากฏ Tag
Select ใน Status Bar ขึ้นมา เมื่อเราคลิกเลือก
Tag Selector แล้วแท็กต่างๆ ที่ถูกล้อมด้วยแท็กที่เราเลือกจะถูกเลือกด้วย
5. Site
Panel
ใช้ในการจัดการไฟล์และ
โฟลเดอร์ที่ใช้ในการสร้างเว็บไซต์ นอกจากนี้ยังสามารถใช้ดูไฟล์ต่างๆในเครื่องได้อีกด้วย

6. Document
Toolbar
ประกอบไปด้วยปุ่มและป๊อปอัพเมนูที่ใช้กำหนดรูปแบบมุมมองของ Document Window ที่เรากำลังทำงานอยู่และคำสั่งต่างๆที่ใช้ทำงานกับ Document Window อย่างเช่น การแสดงเว็บเพจที่สร้างขึ้นในเว็บบราวเซอร์หรือ
การกำหนดอ็อปชั่นของ Document Window เป็นต้น
หลักเกณฑ์การใช้
Multimed
ในการใช้งาน
Multimedia บนเว็บไซต์ จะมีข้อดีคือทำให้ มีความสวยงามแปลกและเพิ่มความน่าสนใจมากขึ้นแต่จะมีข้อเสียคืออาจทำให้เกิดความล่าช้าในการ Download หน้าเว็บเพจ
เพิ่มมากขึ้นและการใช้ไฟล์ Multimedia บางประเภทจาเป็นที่เครื่องคอมพิวเตอร์ของผู้เข้าชมต้องทำการติดตั้งโปรแกรมเพิ่มเติมทำให้ไม่สามารถแสดงผลได้กับคอมพิวเตอร์ที่ยังไม่ได้ติดตั้งโปรแกรมดังกล่าว
1.
หลักเกณฑ์ในการใช้งานไฟล์
Multimedia แบบ Flash ได้แก่ ไม่ควรสร้าง
Multimedia ที่ประกอบด้วยรูปภาพจำนวนมากควรจะใช้เครื่องมือวาดรูปของโปรแกรม Flash เอง เพื่อให้ได้ขนาดไฟล์ที่ไม่ใหญ่จนเกินไปและ
Download ได้เร็วกว่า 2. หลักเกณฑ์ในการใช้ไฟล์
Video และ Audio ไม่ควรใช้ไฟล์แบบ WAV เพราะจะมีขนาดใหญ่ควรเปลี่ยนมาใช้ไฟล์ที่มีขนาดเล็กกว่าเช่น
mp3,ram หรือ wmv หากต้องการแสดงผล
Video ควรจะใช้กระบวนการแบบ Streaming ซึ่งเป็นการลดระยะเวลาในการ
Download ทำให้การแสดงผลรวดเร็วยิ่งขึ้น เช่นไฟล์แบบ
Streaming ของ Real,Quick Time และWindows
Media เป็นต้น
3. หากมีการเรียกใช้ไฟล์
Multimedia ที่ต้องการโปรกรมพิเศษในการเรียกดูควรที่จะทำLink
สำหรับการ Download โปรแกรมเหล่านั้นไว้ด้วยหากเปิดโอกาสให้ผู้เข้าชมสามารถ
Downloadโปรแกรมเหล่านั้นจากเว็บไซต์
หน่วยงานนั้น
จะต้องทำการตรวจสอบข้อมูลทางด้านลิขสิทธ์ของเจ้าของโปรแกรมคอมพิวเตอร์นั้นๆก่อนว่าสามารถทำได้หรือไม่
หลักเกณฑ์ในการเลือกภาพ
Graphic
1. ขนาดไฟล์ไม่ควรเกิน 80 กิโลไบต์ เพื่อความรวดเร็วในการแสดงผล
2. ใช้ไฟล์แบบ
JPEG สำหรับรูปถ่าย หรือรูปที่มีสีเกิน 256 สี
3. ใช้ไฟล์แบบ GIF
สำหรับภาพวาดหรือภาพการ์ตูนที่มีสีไม่เกิน 256 สี
4. เลือกภาพที่มีความน่าสนใจและดึงดูด เพื่อไม่ให้เสียเวลาที่เสียไปในการ
Download
5. ภาพเปล่าประโยชน์
ไฟล์ภาพกราฟิกที่นามาใช้ในการทำเว็บ
ภาพกราฟิก
หรือรูปกราฟิกที่นามาใช้ในการทำเว็บเพจ หรือนำมาใช้ในอินเทอร์เน็ตจะต้องเป็นไฟล์ลักษณะเฉพาะ
ปัจจุบันนิยมใช้กัน 3 ฟอร์แมต คือ
1. ไฟล์ฟอร์แมต
JPEG (Joint Photographer's Experts Group File)
2. ไฟล์ฟอร์แมต GIF
(Graphics Interlace File)
3. ไฟล์ฟอร์แมต PNG
(Portable Network Graphics)
ไฟล์สกุล JPG
(Joint Photographer’s Experts Group)
เป็นอีกไฟล์หนึ่งที่นิยมใช้บน
Internet มักใช้กรณี
1. ภาพที่ต้องการนำเสนอมีความละเอียดสูง และใช้สีจำนวนมาก (สนับสนุนถึง 24 bit color)
2. ต้องการบีบไฟล์ตามความต้องการของผู้ใช้
3. ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนอินเทอร์เน็ต
เพราะให้ความคมชัดและความละเอียดของภาพสูง
ไฟล์สกุล GIF
(Graphics Interlace File)
ภาพกราฟฟิกสกุล GIF
พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านอินเทอร์เน็ต ตั้งแต่ยุคแรก
ไฟล์สกุล PNG
(Portable Network Graphics)
ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF
และ JPEG มาพัฒนาร่วมกัน ทำให้ภาพในสกุลนี้แสดงผลสีได้มากกว่า
256 สี และยังสามารถทำพื้นภาพให้โปร่งใสได้ จึงเป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบันด้วยอีกสกุลหนึ่ง
การบีบอัดภาพ
เทคนิคการบีบอัดภาพสกุล GIF เป็นเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยข้อมูลเดิมจะถูกสร้างขึ้นใหม่ด้วยวิธีสร้าง Index สีจากสีที่ซ้าๆ และใกล้เคียงกัน โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบว่าแนวใดได้ข้อมูลที่จะบันทึกเป็นไฟล์น้อยกว่ากัน
หลังจากที่เราวางโครงสร้างเว็บไซต์ของเราแล้ว
ต่อมาเราจะใช้ Dreamweaver Site เข้ามาช่วยในการสร้างและ จัดการเว็บไซต์ของเรา
การนำ Dreamweaver Site เข้ามาจัดการเว็บไซต์ของเราจะทำให้เราสามารถที่จะทำการอัพโหลดไฟล์ที่ใช้ในการสร้างเว็บไซต์ไปในเว็บเซริฟเวอร์ได้
ง่ายขึ้น นอกจากนี้Dreamweaver Site ยังช่วยในการตรวจสอบการชื่อโยงของไฟล์ต่างๆ
ให้อีกด้วยเมื่อเวลามีการแก้ไขไฟล์ต่างๆ ในเว็บไซต์ ด้วย
การกำหนด
Dreamweaver Site
การสร้าง
Site
1. ไปที่เมนู Site > New Site
2. กำหนดค่า Site name และ
Local Site folder หลังจากนั้นกดปุ่ม Save เมื่อเสร็จสิ้นการสร้าง Site แล้วจะปรากฏอยู่ในส่วนของ
Site Panel
การใส่เนื้อหาให้กับเว็บเพจ
โปรแกรม
Dreamweaver ซึ่งมีคุณสมบัติแบบ WYSIWYG (What you see is
what you get)ซึ่งหมายถึง เว็บไซต์ที่คุณเห็นหรือสร้างด้วย
Dreamweaver โดยการพิมพ์หรือวางรูปลงไป เมื่อนำไปแสดงในเว็บบราวเซอร์ก็จะเห็นผลเหมือนกับที่คุณสร้างไว้
ดังนั้น
หากต้องการใส่เนื้อหาลงไปในเว็บเพจ ก็ให้ทำการพิมพ์ข้อความที่ต้องการลงไปในส่วนของDocument
Window ได้เลย
การขึ้นบรรทัดใหม่ในโปรแกรม
Dreamweaver สามารถทำได้ 2 วิธีคือ
1. กดปุ่ม Enter โดยตรง (Tag <p>)
2. กดปุ่ม Shift ค้างไว้ แล้วกด Enter (Tag
<br>)
การจัดรูปแบบตัวอักษร
HTML โดยการกาหนดค่า Property มีดังนี้
1.Fomat : รูปแบบของตัวอักษร เป็น
Paragraph, Heading 1-16
2.Class : การกำหนดแม่แบบอักษร (Style sheet)
3. Line : การเชื่อมโยง
4. Font : การกำหนด Font ตัวอักษร
5. การจัดตำแหน่ง
6. การกำหนดขนาดอักษร (Font) size 1-7
7. การกำหนดลักษณะอักษร
ใส่สีอักษร
การใส่รูปภาพให้กับเว็บเพจ
ขั้นตอนในการแทรกรูปภาพลงบนเว็บเพจ
มี 3 วิธี ดังนี้
1. ไปที่เมนู Insert > Image
2. ไปที่กลุ่มคำสั่ง Common แล้วเลือกที่ปุ่มการแทรกรูปภาพ
3. ทำการลากไฟล์รูปภาพจาก Files Panel มาวางในส่วนของ
Document Windows
การกำหนดคุณสมบัติของรูปภาพ
1.W : ขนาดของภาพ
2. Src : ที่อยู่ของภาพ
3. Ait : คำอธิบายรูปภาพ
4. Link :การเชื่อมโยงด้วยรูปภาพ
การเชื่อมโยงเอกสาร
ในโปรแกรม
Dreamweaver เราสามารถสร้างเมนู Link ได้
2 แบบ คือ การทำเมนูข้อความ Link และการทำเมนูรูปภาพ
Link
การทำเมนูข้อความ
Link มีขั้นตอน ดังนี้
1. พิมพ์เมนูข้อความที่ต้องการ
2. Crop ข้อความที่ต้องการทำ Link
3. ไปที่ Properties แล้วใส่ชื่อเว็บเพจที่ต้องการเชื่อมโยงข้อมูลลงในช่อง
Link
การทำเมนูรูปภาพ
Link มีขั้นตอน ดังนี้
1. Insert รูปภาพที่ต้องการสร้างเป็นเมนูลงบน Document Window
2. คลิกที่รูปภาพ
3. ไปที่ Properties แล้วใส่ชื่อเว็บเพจที่ต้องการเชื่อมโยงข้อมูลลงในช่อง
Link
การกำหนดลักษณะการเปิดหน้าเว็บเพจ
หลังจากคลิกที่ Link
เมื่อทำการการเชื่อมโยงเองสาร
โดยการใส่ชื่อเว็บเพจลงในช่อง Link แล้วให้คลิกเลือกที่
Target ความหมายของ
Target มีดังนี้
_blank ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง
Browser ใหม่อีกหน้าต่าง
_new ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง
Browser ใหม่อีกหน้าต่าง
_parent ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง
Browser เดิม
_self ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในเฟรมเดิม
_top ให้เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่าง
Browser เดิม โดยแสดงให้เต็มพื้นที่หน้าต่าง
ขั้นตอนการแสดงผลเว็บบนหน้าเพจ
1. ให้ทำการ Save เว็บเพจ ก่อนทำการแสดงผลบน
Browser ทุกครั้ง
2. ไปที่ Document Toolbar แล้วคลิกที่สัญลักษณ์คล้ายกับรูปโลก
3. เลือกเมนู Preview in IExplore
หลังจากนั้นโปรแกรม
Dreamweaver จะทำการแสดงผลของเว็บเพจที่โปรแกรม Internet
Explorer
Cascading Style
Sheet (CSS) คืออะไร
CSS เป็นกลุ่มของรูปแบบการแสดงผลที่เราได้สร้างไว้เพื่อใช้กำหนดการแสดงผลของเนื้อหาในเว็บเพจ การนำ CSS
เข้ามากำหนดการแสดงผลจะช่วยให้การกำหนดการแสดงผลของเนื้อหาที่อยู่ในเว็บเพจทำได้ง่ายและ
ถูกต้องมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผลบางอย่างที่ HTML ไม่สามารถควบคุมได้ด้วย
อย่างเช่น ขนาดของตัวอักษรบนเว็บเพจใน CSS จะกำหนดขนาดเป็นพิกเซล
ซึ่งจะทำให้แสดงผลของตัวอักษรในทุกๆ
เว็บบราเซอร์เหมือนกัน หรือ ตำแหน่งของเลเยอร์ซึ่งด้วย CSS
เราสามารถที่จะกำหนดตำแหน่งการแสดงผลของมันได้
เป็นต้น
ส่วนประกอบของ CSS
1. Selector เป็นชื่อของ CSS
2. Declaration เป็นส่วนที่ใช้กำหนดว่า CSS นี้มีรูปแบบอะไรบ้าง ซึ่งประกอบไปด้วยคุณสมบัติ
และค่าของคุณสมบัติ
ประโยชน์ที่สำคัญของการนำ CSS
มาใช้ก็คือ เมื่อเราเปลี่ยนแปลงรูปแบบที่กำหนดไว้ใน CSS เมื่อใดแล้ว
รูปแบบการแสดงผลของข้อความหรือ วัตถุทั้งหมดที่ใช้ CSS ดังกล่าวจะเปลี่ยนแปลงด้วย ซึ่งประเภทของ CSS
มีดังนี้
1. Customer
CSS Style เป็น
CSS ที่สร้างขึ้น และสามารถใช้ได้ทุกที่ของเว็บ
2. HTML Tag
Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับ
HTML เดิมที่มีอยู่แล้ว
3. CSS
Sector Style เป็น CSS ที่มีการกำหนดรูปแบบให้กับแท็กที่มีการผสมกันหรือทุกแท็กที่มี
id ตรงกับที่เรากำหนดใน CSS
การอัพโหลดเว็บไซต์
(FTP)
ขั้นตอนสุดท้ายสำหรับการจัดทำเว็บไซต์
ก็คือทำการอัพโหลดข้อมูลขึ้นไปยัง Web Server ซึ่งในตัวโปรแกรม
Dreamweaver นี้ มีเครื่องมือสำหรับการอัพโหลดที่ง่าย สะดวก และรวดเร็วต่อการใช้งานเป็นอย่างมาก
ขั้นตอนการสร้าง FTP
Connection มีดังนี้
1. คลิกที่ปุ่ม
ที่ Files Panel
2. ในกรณีที่ยังไม่ได้มีการกำหนดค่า
FTP จะขึ้นหน้าต่าง Site Setup for mysite ให้เลือกที่ปุ่มเครื่องหมายบวก +
3. จากนั้นทำการกำหนดค่าต่างๆ
ดังนี้
4. ใส่ค่าสำหรับการ FTP
5. เมื่อกำหนดค่าเสร็จเรียบร้อยแล้ว
ให้ลองทำสอบการเชื่อมต่อ โดยการกดปุ่ม Test ถ้าสำเร็จจะขึ้นข้อความ
ขั้นตอนการอัพโหลดข้อมูลขึ้น Web
Server มีขึ้นตอน ดังนี้
1. คลิกเลือกไฟล์ที่ต้องการอัพโหลดที่ Files Panel
ขั้นตอนการดาวน์โหลดข้อมูลจาก Web
Server ลงมาแก้ไข มีขึ้นตอน ดังนี้
1. คลิกเลือกไฟล์ที่ต้องการดาวน์โหลดที่ Files Panel
อ้างอิงจากข้อมูลจาก :
https://www.youtube.com/watch?v=3eg4HVQTJEc#t=30
https://sites.google.com/site/adobepresentcs6/adobecs6-presents












