คู่มือการใช้ Dream cs3

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

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

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

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

อธิบายเครื่องมือต่างๆ
1. Document window เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กาลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบ
เสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทางานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บ
เพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง
กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย
2.Insert Bar
ประกอบด้วยคาสั่งต่างๆ แยกย่อยดังนี้
2.1. Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูป
ในเว็บเพจ
2.2. Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สาหรับใช้
สร้างเว็บเพจ แบบ layout
2.3. Forms ในแถบนี้ประกอบด้วยคาสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น
2.4 Data เป็นแถบที่ใส่สาหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา
web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก
2.5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ
HTML , CSS เข้าด้วยกัน ทาให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น
2.6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ
2.7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สาหรับผู้ที่ต้องการเก็บ
เครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้
3.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 <title> </title> ของ
หน้าเว็บเพจอีกด้วย หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทาได้โดยคลิกที่ Edit >Preferences เป็น
หน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา
กาหนด Site ขั้นตอนสาคัญที่สุดของการทาเว็บด้วย Dreamweaver
การกาหนดไซต์มีความสาคัญมากในการทาเว็บด้วย Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือ แก้ไขเว็บไซต์
เก่าที่เคยทามาแล้ว การกาหนดไซต์เป็นขั้นแรกของการทาเว็บด้วย Dreamweaver เป็นการกาหนดให้โปรแกรมทราบที่อยู่
ของไฟล์ต่างของเว็บไซต์ที่เราทาไว้ ทาให้โปรแกรมสามารถดึงมาแก้ไขได้ เครื่องมือต่างๆของ Dreamweaver นั้นจะทางาน
โดยอ้างอิง site ที่เรากาหนดทั้งหมด ถ้าไม่ได้กาหนด site ก็ทาให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว สิ่ง
แรกที่เราจะต้องเข้าใจในการทาเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่างๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ใน
เว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder

ขั้นตอนการกาหนด 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 ทั้งหมดที่เรามีอยู่
ใส่ข้อความในเว็บเพจด้วย Dreamweaver
เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ dreamweaver นั้นทาได้ง่ายมากเมื่อเปิดโปรแกรมขึ้นมา
จะเห็นว่ามีหน้าจอดังภาพ เราสร้างเอกสารได้จากหน้าจอนี้ดังรูป
จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่
เราสามารถสร้างได้ แต่ในบทนี้จะขอพูดถึง
แค่ HTML เท่านั้น นอกเหนือจากการใช้
หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายัง
สามารถสร้างเอกสารใหม่ได้ด้วยการไปที่
Menu เลือก File > New Document จะมี
หน้าจอให้เลือกดังรูปด้านล่าง เลือก Blank
Page > HTML
เลือก Create จะได้เอกสาร HTML ขึ้นมา ให้
เรา save ทันทีโดยไปที่ Menu เลือก File > save

การตั้งชื่อให้กับเว็บเพจ
การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคในชื่อ เราอาจใช้
เครื่องหมาย underscore (_) หรือ hyphen (-) แทนการเว้นวรรคได้หน้าหลักที่จะต้องมีในเว็บไซต์คือหน้า index.html หน้านี้
เปรียบเสมือนกับสารบัญของเว็บไซต์ เมื่อเราพิมพ์ชื่อเว็บไซต์ หน้า index.html จะถูกนามาแสดงเป็นหน้าแรก
เริ่มต้นใส่เนื้อหาให้เว็บเพจ
การใส่เนื้อหานั้นทาได้ง่ายมาก แค่เราคลิกที่ Document window ก็สามารถพิมพ์เนื้อหาลงไปได้เลย ดังตัวอย่างพิมพ์
ข้อความว่า ท่องเที่ยววัดพระศรีรัตนศาสดาราม (วัดพระแก้ว) เพื่อเป็นหัวข้อของเว็บเพจอันนี้
การสร้างหัวข้อให้กับเว็บเพจ
จากเนื้อหา HTML เราทราบอยู่แล้วว่าการสร้างหัวข้อให้กับข้อความนั้น เราจะให้คาสั่ง <h1>หัวข้อขนาดใหญ่มาก
</h1> , <h2>หัวข้อขนาดเล็กลงมา</h2> การใส่หัวข้อให้กับเว็บเพจนั้น เป็นเรื่องที่สาคัญมาก แต่หลายคนมักละเลยเรื่องนี้
Search Engine หลายแห่ง เช่น Google นั้นจะให้ความสาคัญกับคาที่เป็นหัวข้อของแต่ละเว็บเพจมากโดยเฉพาะอย่างยิ่งหัวข้อ
ที่อยู่ใน <h1>
เราสามารถสร้างหัวข้อใน dreamweaver ได้โดย
1.เลือกที่คาที่ต้องการให้เป็นหัวข้อ
2.ไปที่ Property inspector จะมีคุณสมบัติของตัวอักษรให้เราเลือก ให้เราดูที่ Format จะมีรายการหัวข้อขึ้นมาให้
เลือก ดังรูป
เปลี่ยน font และขนาดตัวอักษร
เราสามารถเปลี่ยน font ที่ใช้ในการแสดงตัวอักษรและขนาดของตัวอักษรได้ โดย
1.เลือกตัวอักษรที่ต้องการเปลี่ยน

2.ไปที่ Property inspector เลือก font จะมีรายการแสดงชื่อ font มากมายให้เลือก
3.การปรับขนาดก็ไปที่ size แล้วเลือกขนาดที่เราต้องการได้ทันที
สามารถเปลี่ยน font ในรายการที่แสดงอยู่ได้โดยคลิกที่ท้ายของรายการจะมีหัวข้อ Edit font list สามารถ
ปรับเปลี่ยนรายการได้
** หมายเหตุ ** font ที่ใช้แสดงผลนั้นจะถูกดึงมาจากเครื่องของผู้ที่มาเปิดเว็บของเรา ถ้าเครื่องนั้นไม่มี font ที่เรา
กาหนดไว้ก็จะไม่แสดงผลตามที่กาหนด ดังนั้นควรกาหนด font ที่มีอยู่ในทุกเครื่อง เช่น
ระบบปฏิบัติการ window จะมี Tahoma
ระบบปฏิบัติการ linux จะมี loma
การขึ้นย่อหน้าใหม่ หรือเริ่มบรรทัดใหม่
ในการขึ้นบรรทัดใหม่ทาได้ดังนี้
1.กด Enter เพื่อทาการขึ้นบรรทัดใหม่ ตัวอักษรที่เราพิมพ์มาทั้งหมดจะอยู่ใน <p> </p> โดยอัตโนมัติ
2.กด shift + enter จะทาการแทรก <br /> ใน code ในส่วนของการแสดงผล <p> </p> จะทาให้ความห่างของ
บรรทัดมีมากว่าการใช้คาสั่ง <br> เครื่องมืออื่นที่เกี่ยวกับตัวอักษร ก็มีการใช้งานเหมือนกับตัวอย่างข้างบนทั้งหมด
ใส่รูปภาพในเว็บเพจ (พื้นฐาน)
การกาหนด site เราได้กาหนด local root folder ไว้เพื่อเก็บไฟล์ทั้งหมด และกาหนด default images folder สาหรับ
เก็บไฟล์รูปไว้ด้วย ซึ่งตามที่แนะนาไว้คือ เราจะนิยมสร้าง folder ชื่อ images ไว้ใน local root folder เพื่อเอาไว้เก็บรูป
** หมายเหตุ ** อย่าลืมว่าไฟล์รูปที่นามาใช้นั้นต้องอยู่ใน local root folder เท่านั้น

การใส่รูปในเว็บเพจนั้นทาได้หลายวิธี ดังนี้
1.ลากรูปลงไปใน document window ได้ทันที โปรแกรมจะทาการ save รูปไว้ใน default images folder
ให้เอง
2.ไปที่ file panel ด้านขวามือแล้วลากไฟล์จากใน panel ไปที่ document window ได้เลย
3.คลิกพื้นที่ใน document window ที่คุณต้องการแทรกรูปลงไป จากนั้นไปที่ Insert Bar หา icon ดังรูป
ด้านล่าง เมื่อคลิกก็จะมีหน้าต่างขึ้นมาให้เลือกรูป แค่นี้ก็สามารถใส่ภาพในเว็บเพจได้แล้ว ไม่ว่าเราจะแทรกรูปด้วยวิธีไหนก็
ตาม จะมีหน้าต่างดังภาพด้านล่าง สาหรับใส่ Alternate Text ซึ่งเอาไว้สาหรับเป็นคาบรรยายภาพ จะแสดงแทนภาพเมื่อภาพที่
เรากาหนดโหลดขึ้นมาแสดงไม่ได้ หรือสาหรับ IE จะแสดงเมื่อมีเมาส์ไปอยู่เหนือ ถ้าเราเขียนคาบรรยายไว้ในไฟล์อื่นก็
สามารถทาลิงค์ไปหาได้โดยเลือกจากหัวข้อ long description
เครื่องมือที่ใช้ปรับแต่งภาพ
เมื่อเราคลิกที่ภาพ ที่ Property inspector จะปรากฏตัวเลือกที่ใช้ในการปรับแต่งภาพ ดังรูปด้านล่าง จากรูปได้ปรับ
คุณสมบัติของรูปให้ชิดซ้าย และปรับให้มีช่องว่างระหว่างภาพและตัวหนังสือ เท่ากับ 10 pixel

รายละเอียด Property inspector เมื่อเลือกที่รูป
1.Image Name (Name) กาหนดชื่อให้กับรูป ใช่สาหรับเมื่อเราเขียน script อ้างอิงรูป
2.W (Width) กาหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
3.H (Height) กาหนดความสูงของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
4.Src (Source) บอก folder ที่ใช้เก็บไฟล์รูปที่เราเลือก
5.Link (Hyperlink) ใช้กาหนด hyperlink ของรูป
6.Alt (Alternate Text) คาบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนาเมาส์ไปอยู่เหนือรูป (ie)
7.Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ dreamweaver จะทาการแก้ไขที่ไฟล์รูปโดยตรง
7.1 Fireworks แก้ไขรูปด้วย โปรแกรม Fireworks
7.2 Optimize แก้ไขขนาดไฟล์ของรูป
7.3 Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ
7.4 Brightness and Contrast ปรับความสว่างของรูป
7.5 Sharpen ใช้แก้ไขความคมชัดของรูป
8.V Space (Vertical Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป
9.H Space (Horizontal Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป
10.Low Src (Low Source) ในกรณีที่รูปของเราไฟล์ใหญ่มากต้องใช้เวลาโหลดนาน เราอาจกาหนดให้มี
รูปที่ขนาดเล็กๆ รูปอื่นโหลดขึ้นมาก่อน โดยใช้ตัวเลือกนี้
11.Border (Image Border) ใช้กาหนดขนาดของขอบรูป
12.Align (Alignment) ใช้กาหนดตาแหน่งของรูปเช่น ชิดซ้าย ขวา บน ล่าง
13.Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กาหนด CSS ที่เราเขียนไว้
14.Map (Map Name) ใช้กาหนดชื่อให้กับ Map image จะกล่าวถึงในบทอื่น
15.Hot spot tool (Name) เป็นเครื่องมือที่ใช้ร่วมกับ Map Name จะกล่าวถึงในบทอื่น

16.Target (Name) กาหนดตัวเลือกของหน้าที่จะเปิด link จะกล่าวถึงในบทอื่น หลายคนคงสงสัยว่า การ
เปลี่ยนขนาดรูปด้วยการกาหนด W,H (width,height) ต่างกับการใช้คาสั่ง Edit อย่างไร คาตอบคือ ถ้าเรากาหนดด้วย W,H จะ
ไม่เปลี่ยนขนาดของรูปจริง แต่จะมีผลต่อการแสดงผลใน browser เท่านั้น ซึ่งในความจริงแล้วเราจะไม่นิยมแก้ไขขนาดของ
รูปด้วยวิธีนี้ เพราะนอกจากจะมีผลต่อความคมชัดของรูปแล้ว อาจทาให้สัดส่วนของรูปผิดไปได้ การแก้ไขด้วยคาสั่ง Edit จะ
แก้ไขที่ไฟล์รูปโดยตรงทาให้การแสดงผลตรงตามที่เราแก้ไข ในบทความนี้เป็นเพียงพื้นฐานการใส่รูปในเว็บเพจ คุณ
สามารถศึกษารายละเอียดโดยเลือกหัวข้อ "ใส่ภาพในเว็บเพจ " จากเมนูหัวข้อทางขวามือ
การสร้าง Hyperlink
เว็บไซต์ประกอบด้วยไฟล์หลายไฟล์มารวมกัน ทั้งเว็บเพจ รูป วีดีโอ เสียง ในบทความนี้จะทา link เพื่อเชื่อมโยงไป
ยังไฟล์ต่างๆที่อยู่ในเว็บไซต์กัน
สร้างลิงค์ในเว็บไซต์เดียวกัน เป็นการสร้างลิงค์หากันในเว็บไซต์เดียวกัน จากเว็บเพจหนึ่งไปอีกเว็บเพจหนี่ง
ขั้นตอนการสร้างมีขั้นตอนดังนี้
1.เปิดหน้าเอกสารที่ต้องการสร้างลิงค์ ใน Dreaweaver
2.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการให้เป็นลิงค์ จากนั้นไปที่สัญลักษณ์ตามภาพ
3.จะมีหน้าต่างขึ้นมาดังรูป
3.1 ช่อง Text คือคาที่เราเลือกไว้ให้เป็นลิงค์
3.2 ช่อง link คือ ไฟล์ที่เราต้องการลิงค์ไป โดยการคลิกที่รูป folder สีเหลืองด้านหลัง ไฟล์ที่ลิงค์ไปจะเป็น
เว็บเพจ ไฟล์รูป หรือเป็นไฟล์อะไรก็ได้ที่อยู่ใน local root folder
3.3 ช่อง Target มีรายละเอียดดังนี้
1.target='_blank' เป็นคาสั่งให้เปิด link ในหน้าใหม่
2.target='_parent' เป็นคาสั่งให้เปิด link ในหน้าเดิม (ถ้าไม่เลือกจะเป็นค่านี้อัตโนมัติ)
3.target='_self' เป็นคาสั่งให้เปิด link ใน frame ปัจจุบัน (อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.target='_top'เป็นคาสั่งให้เปิด link ทับหน้าเดิมทั้งหมดซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน
(อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.คลิกโอเคก็จะสร้างลิงค์เรียบร้อย

สร้างลิงค์ในหน้าเดียวกัน
เว็บเพจบางหน้าที่มีเนื้อหาเยอะมากๆ ทาให้ผู้อ่านหาข้อมูลที่ต้องการทราบได้ยาก ดังนั้นเราจึงทา link ภายในหน้า
เอาไว้ เพื่อให้สามารถหาเนื้อหาอ่านได้ง่ายขึ้น ถ้านึกภาพไม่ออกก็ให้เปิด wikipedia.org ดูจะเห็นว่ามี link ภายในเว็บอยู่ใน
หน้าที่เนื้อหาเยอะมากๆ
1.เปิดหน้าที่เราต้องการให้มีลิงค์ภายในหน้าเดียวกัน
2.เลือกจุดที่ต้องการให้ลิงค์ไป ไม่จาเป็นต้องใช้ตัวหนังสือ หรือภาพ ใช้แค่จุดในเว็บเพจนั้น เช่นลิงค์ไปบรรทัด
สุดท้ายของหน้า ก็ให้คลิกเมาส์บริเวณที่ต้องการจะลิงค์ไป
3.ไปที่ Insert > Named Anchor จะมีหน้าต่างขึ้นมากให้ใส่ชื่อของจุดลิงค์ ชื่อที่ใส่จะต้องเป็นชื่อที่ไม่มีการเว้นวรรค
เป็นภาษาอังกฤษ ห้ามมีจุดต่างๆ เราจะสร้างจุดลิงค์ภายในหน้ากี่จุดก็ได้แต่ห้ามชื่อซ้ากัน
4.คลิก OK จะมีสัญลักษณ์ แสดงในจุดที่เราเลือก ถ้าไปดู Code จะเห็นดังนี้ <A NAME=?ชื่อที่ตั้ง?></A>
5.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการจะทาเป็นลิงค์
6.ที่ Property inspector จะเห็นว่ามีสัญลักษณ์ ให้ลากไปยังจุด ก็จะสร้างลิงค์ได้เรียบร้อย
สร้างลิงค์ไปยังเว็บไซต์อื่น
1.เปิดหน้าที่ต้องการสร้างลิงค์ขึ้นมา
2.เลือกตัวอักษร หรือรูปภาพที่ต้องการสร้างลิงค์
3.ที่ Property inspector ให้ใส่ชื่อเว็บที่ต้องการลิงค์ไป เช่น ในรูปเลือกภาพเป็นลิงค์
3.1.ช่องลิงค์ใส่ http://www.hellomyweb.com (ต้องใส่ http:// หน้าเว็บที่ต้องการลิงค์ไปด้วย)
3.2.จากนั้นที่ช่อง border ให้ใส่ค่า 0 เพื่อไม่ให้มีขอบรูปเมื่อรูปเป็นลิงค์
แค่นี้ก็สามารถสร้างลิงค์ไปยังเว็บไซต์อื่น และไฟล์ต่างๆในเว็บไซต์ของตัวเองได้แล้ว

ปรับแต่งเว็บเพจด้วย Page Properties
Page propertiese สามารถทาให้เราปรับแต่งเว็บเพจของเราได้ ทั้งพื้นหลัง , ชนิดตัวอักษร , รูปแบบของ hyperlink
และอื่นๆ อีกมากที่เราสามารถปรับได้ด้วยเครื่องมือนี้
การใช้งานเครื่องมือ Page Properties สามารถทาได้ดังนี้
1.เปิดเว็บเพจที่ต้องการปรับแต่ง
2.ไปที่ Menu เลือก Modify > Page Properties
3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง
ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ
1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง
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 กาหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านล่างเป็นระยะที่เรากาหนด
คลิกโอเค เว็บเพจก็จะปรับหน้าตามที่เราได้ตั้งไว้
เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink
เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง
1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง
4.ที่ categoty ทางซ้ายมือเลือก link จะมีหน้าจอให้ปรับดังรูป
รายละเอียดต่างๆของเครื่องมือมีดังนี้
1. Link font เป็น font ที่จะใช้แสดงตัวอักษรที่เป็น hyperlink ด้านหลังจะมีสัญลักษณ์ B (ทาให้ตัวอักษรที่เป็น

hyperlink เป็นตัวหนาทั้งหมด) และ I (ทาให้ตัวอักษรที่เป็น hyperlink เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้
2. Size ปรับขนาดของตัวอักษรที่เป็น hyperlink
3. การปรับสีของ hyperlink เมื่ออยู่ในสถานะต่างๆ มีรายละเอียดดังนี้
1.Link Color เป็นสีที่ใช้แสดง Hyperlink ที่เรายังไม่เคยคลิกเปิดดู
2.Visited Links เป็นสีที่ใช้แสดง Hyperlink ที่เราเคยคลิกเปิดดูแล้ว
3.Rollover Links เป็นสีที่ใช้แสดง Hyperlink เมื่อมีเมาส์วางอยู่ด้านบน
4.Active Links: เป็นสีที่ใช้แสดง Hyperlink เมื่อเราคลิกที่ hyperlink
4.ปรับการขีดเส้นใต้ของ Hyperlink มีรายละเอียดดังนี้
1.Always underline ให้แสดงเส้นใต้ในทุกกรณี
2.Never underline ไม่แสดงเส้นใต้ในทุกกรณี
3.Show underline only on rollver แสดงเส้นใต้เฉพาะตอนที่มีเมาส์อยู่ด้านบนเท่านั้น
4.Hide underline on rollver ปรกติจะแสดงเส้นใต้ แต่เมื่อเมาส์อยู่ด้านบนไม่ต้องแสดงเส้นใต้ คลิกโอเค
Hyperlink ก็จะปรับหน้าตามที่เราได้ตั้งไว้ จริงแล้วการตั้ง page properties เป็นการกาหนด CSS ในเว็บเพจนั้นเองเราสามารถ
ดูรายละเอียด CSS ที่เรากาหนดได้ที่ code หรือที่ vertical docking panel ในหัวข้อ CSS ดังรูปด้านล่าง
Adding Meta Tags สาหรับการค้นหาของ Search Engine
Search Engine เป็นเครื่องมือที่ใช้ในการค้นหาเว็บไซต์ โดยเราทาการใส่คาที่ต้องการค้นหา (keywords) ลงไป
Search Engine จะทาการค้นหาเว็บไซต์ที่ใกล้เคียงกับ keywords ออกมาแสดงSearch Engine ที่มีชื่อเช่น www.google.com ,
www.yahoo.com หลักการทางานของ Search Engine คือจะเขียนโปรแกรมค้นหาเว็บไซต์ในอินเทอร์เนต และทาการเก็บ
รายละเอียดเว็บไซต์เอาไว้ในฐานข้อมูล เมื่อมีผู้ใช้บริการ Search Engine ก็จะหาเว็บไซต์ที่มีข้อมูลตรงกับฐานข้อมูลมากที่สุด
โปรแกรมที่ใช้ค้นหาเว็บไซต์ เราจะเรียกว่า bots หรืออาจมีชื่ออื่นแล้วแต่ผู้คิดค้นว่าจะตั้งให้ชื่ออะไร สิ่งที่ bots เข้ามาค้นหา
ในเว็บไซต์นั้นก็จะมีเนื้อหาของเว็บไซต์ , ลิงค์ต่างๆ และ Meta tags
Meta tags เป็นข้อความที่เราประกาศเอาไว้ใน Code จะไม่แสดงผลในเว็บเพจ โดยเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์ ,
Keywords ที่ใช้ที่เกี่ยวข้อกับเว็บไซต์ Search Engine จะทาการเก็บรายละเอียดพวกนี้ไว้อ้างอิงเว็บไซต์เรา ถ้าเราไม่เขียนก็ได้
แต่ Search Engine จะทาการหาข้อความ หรือเนื้อหาที่ปรากฏอยู่ในเว็บไซต์ไปแทน ซึ่งอาจไม่ใช่ใจความสาคัญ หรือส่วน
สาคัญของเว็บไซต์ของเราก็ได้ จะเป็นการดีมากถ้าเราสละเวลาเล็กน้อยเพื่อเขียนรายละเอียดส่วนนี้

ขั้นตอนการแทรก Meta tags ในเว็บเพจ
Meta tags ที่เราจะแทรกนั้นจะมี 2 อย่างคือ
1.Description เป็นส่วนที่ใช้บอกรายละเอียดของเว็บเพจแบบคร่าวๆ
2.Keywords เป็นส่วนที่ใช้บอก คาที่เกี่ยวข้องกับเว็บเพจหน้านี้ เป็นคาที่ใช้ในการค้นหาหน้านี้
การแทรก Meta tags ในส่วนของ Description
1.เปิดหน้าเว็บเพจที่เราต้องการแทรก Meta tags ขึ้นมา
2.ไปที่ Menu เลือก Insert > HTML > Head Tags > Description ดังรูปด้านล่าง
3.จะมีกล่องข้อความขี้นมาให้เราเขียนรายละเอียดลงไปในกล่องนั้น ใส่ได้เฉพาะตัวอักษรห้ามใส่ Code
ต่างๆ จะเป็นภาษาอังกฤษ หรือไทยก็ได้
4.คลิก OK ก็จะแทรก Meta tags เรียบร้อย
การแทรก Meta tags ในส่วนของ Keywords
1.เปิดหน้าเว็บเพจที่เราต้องการแทรก Meta tags ขึ้นมา
2.ไปที่ Menu เลือก Insert > HTML > Head Tags > Keywords
3.จะมีกล่องข้อความขี้นมาให้เราเขียนรายละเอียดลงไปในกล่องนั้น การใส่ Keywords จะใส่เป็นคาและคั่นด้วย (,)
เช่น สอนทาเว็บ , dreamweaver เป็นต้น
4.คลิก OK ก็จะแทรก Meta tags เรียบร้อย
การแสดงผลเว็บเพจ ใน Web Browser
ถึงแม้ว่า Dreamweaver จะแสดงผลเสมือนจริง แต่ก็ยังไม่ถูกต้องเสมอไป สุดท้ายเราก็ต้องดูผ่าน browser อยู่ดีว่า
เว็บเพจที่เราเขียนนั้นเป็นอย่างไร การแสดงผลของเว็บเพจที่เราเขียนนั้นอาจแสดงผลไม่เหมือนกันถ้าเราเปลี่ยน Browser เช่น
ถ้าเราใช้ Internet Explorer อาจแสดงผลไม่ตรงกับ Firefox ก็ได้ การทาเว็บที่ดีเราควรตรวจสอบผ่าน Browser หลายๆตัว เผื่อ
ไว้สาหรับผู้ใช้งานด้วย เมื่อเราลงโปรแกรม Dreamweaver นั้นโปรแกรมจะทาการหา Browser ในเครื่องของเราเตรียมไว้อยู่
แล้วซึ่งถ้าเราต้องการจะแสดงผลหน้าเว็บเพจที่เราทาอยู่ก็สามารถ กดปุ่ม F12 ที่คีบอร์ด หรือไปที่ Document tool bar จะเห็น
รูปลูกโลกเมื่อคลิกก็จะเป็นการแสดงเว็บเพจของเราใน Browser เหมือนกัน ในกรณีที่เราต้องการตั้งค่า Browser ที่ใช้ในการ

แสดงผลเองก็สามารถทาได้โดยไปที่ Menu ไปที่คาว่า File > Preview in Browser > Edit browser list ก็จะมีหน้าต่างขึ้นมาดัง
รูปให้เราสามารถแก้ไขเพิ่ม Browser ที่ใช้ในการแสดงผลได้
ใน Dreamweaver CS3 มีการแสดงผลผ่าน Browser ของโทรศัพท์มือถือได้ด้วยโดยสามารถดูการแสดงผลผ่านมือ
ถือได้ โดยไปที่ File > Preview in Browser > Device Central ก็จะแสดงผลดังรูปด้านล่าง
แทรกไฟล์มัลติมีเดีย
รู้จักโปรแกรม Flash
โปรแกรม Flash เป็นโปรแกรมที่ใช้ในการสร้างอนิเมชั่นต่างๆ หรือใช้เปิดไฟล์วิดีโอ เปิดเพลง ผ่านเว็บไซต์ แม้แต่
กระทั่งทาอัลบัมภาพผ่านเว็บไซต์ ในปัจจุบันโปรแกรม Flash นั้นได้รับความนิยมมากในการทาเว็บไซต์ กระทั้งมีบาง
เว็บไซต์ที่สร้างเว็บด้วย Flash เลยก็มี
แต่อย่างไรก็ดีการใช้ Flash นั้นก็มีข้อเสียอยู่เหมือนกัน คือ
1.ถ้าเราใช้ทาอนิเมชั่น ไฟล์จะมีขนาดใหญ่แล้วแต่ความซับซ้อนของอนิเมชั่นนั้น ทาให้การแสดงหน้าเว็บเพจทา
ได้ช้าลง
2.Search engine ต่างๆไม่สามารถอ่านข้อความที่อยู่ในไฟล์ Flash ได้ ทาให้เราเสียโอกาศในการอยู่ในอันดับดีๆ
ของ search engine
3.ถ้าผู้ใช้ไม่มี Flash player จะทาให้ไฟล์ Flash ของเรานั้นไม่แสดงผล
ดังนั้นเราควรใช้งานโปรแกรม Flash ให้เหมาะสมไม่ควรใช้มากเกินไป

ข้อดีของ Flash มีอยู่มากมาย อย่างเช่น
1.ทาให้เว็บไซต์เราดูน่าสนใจมากขึ้น
2.สามารถเปิดไฟล์วิดิโอ หรือไฟล์เสียง ผ่านเว็บไซต์ได้
3.Flash นั้นปัจจุบันมีความสามารถมาก สามารถสร้างโปรแกรม หรือเกมดีๆ ได้เลย ถ้าเรานามาประยุกต์ใช้ให้
ถูกต้องจะทาให้เว็บของเรามีความสามารถมากขึ้น
ไฟล์ Flash นั้นจะมี 2 แบบคือ
1.swf เป็นไฟล์ที่เราสามารถใส่ได้ทุกที่ในเว็บเพจ
2.flv เป็นไฟล์ Flash video
การใช้งาน flash ร่วมกับ dreamweaver
เมื่อเราแทรกไฟล์ flash หรือ ไฟล์มัลติมีเดียต่างๆ ลงใน dreamweaver โปรแกรมจะทาการเขียน JavaScript ขึ้นมา
โดยอัตโนมัติ ชื่อว่า AC_RunActiveContent.js ไฟล์นี้จะอยุ่ใน folder ชื่อว่า scripts การใช้งานจริงหรือการอัพโหลดข้อมูลสู่
webserver นั้นห้ามลืมที่จะอัพโหลดไฟล์นี้เด็ดขาด มิฉนั้นไฟล์ Flash หรือ ไฟล์มัลติมีเดีย ต่างอาจไม่แสดงผลได้
สร้างตัวอักษร Flash ด้วย Dreamweaver
สร้างไฟล์ Flash ตัวอักษร
1.เปิดไฟล์ใหม่ขึ้นมา และทาการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว
2.ไปที่ Common และเลือกเครื่องมือดังรูป
3.จะมีหน้าต่างดังรูปขึ้นมา

มีรายละเอียดดังนี้
1.Font เลือกรูปแบบตัวอักษรที่ใช้
2.Size เลือกขนาด
3.Color เลือกสี
4.Rollover color เลือกสีตัวอักษรเมื่อ เมาส์อยู่เหนือ
5.Text พิมพ์ข้อความ
6.Show font แสดงรูปแบบของตัวอักษร ในส่วน Text
7.link กาหนดลิงค์
8.Target ตัวเลือกของลิงค์
9.Bg color สีพื้นหลัง
10.Save as กาหนดตาแหน่งที่บันทึกไฟล์ flash
4.คลิก ok เราก็จะได้ไฟล์ flash เรียบร้อย
แทรกปุ่ม flash ของโปรแกรม Dreamweaver
2.ไปที่ Common และเลือกเครื่องมือดังรูป
3.เมื่อคลิกที่ flash button แล้วจะมีหน้าต่างดังรูป
1.Sample ตัวอย่างปุ่ม
2.Style รายชื่อปุ่มที่มีให้เลือก

3.Button text ตัวหนังสือที่จะให้แสดงในปุ่ม
4.Font เลือกชนิดตัวอักษร
5.Size เลือกขนาดตัวอักษร
6.Link กาหนดลิงค์
7.Target ตัวเลือกการแสดงผลของลิงค์
8.Bg color กาหนดสีพื้นหลังให้กับ Flash button ถ้าไม่กาหนด จะเป็นสีขาว
9.Save as เลือกตาแหน่งที่ต้องการให้บันทึกไฟล์ flash button
4.คลิก ok ก็จะได้ปุ่มที่เป็น file flash เรียบร้อยแล้ว
การแทรกไฟล์ Flash ลงในเว็บเพจ
2.ไปที่ Common และเลือกเครื่องมือดังรูป หรือไปที่ Insert > Media > Flash
3.เมื่อคลิกที่ flash แล้วจะมีหน้าต่างดังรูป
เลือกไฟล์ Flash ที่ต้องการจะแทรก จากนั้นคลิก OK
4.เมื่อเราคลิกที่ไฟล์ Flash ที่แทรกไปจะพบว่า Property inspector เปลี่ยนไปดังรูป

1.ช่องแรกสุดทางซ้ายมือ สาหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป
2.W (Width) กาหนดความกว้างที่ใช้แสดงผลของ flash
3.H (Height) กาหนดความสูงที่ใช้แสดงผลของ flash
4.File ช่องนี้จะแสดงค่าตาแหน่งที่เราบันทึกไฟล์ flash เอาไว้ไม่ต้องแก้ไขอะไรทั้งสิ้น
5.Src (Source) ให้เราระบุตาแหน่งที่เราเก็บไฟล์ต้นฉบับที่สามารถแก้ไขได้ .fla เอาไว้
6.Edit ใช้สาหรับแก้ไขไฟล์ flash (.swf) โดยจะเรียกโปรแกรม Adobe Flash ขึ้นมา โดยจะอ้างอิง
จากช่อง Src (Source) ที่เราได้บอกตาแหน่งไฟล์ .swf ไว้
7.Reset Size เราสามารถเปลี่ยนแปลงขนาดของไฟล์ Flash ได้โดยคลิกที่มุมของไฟล์ แล้วลากจะ
ขยาย หรือย่อก็ได้ ถ้าต้องการให้ขยายในอัตตราส่วนเท่าเดิมก็ให้กด Shift ค้างไว้ เมื่อเราต้องการให้ขนาดกลับมา
เหมือนเดิมก็ให้คลิกที่ปุ่มนี้
8.Class กาหนด Style Sheet ให้กับไฟล์นี้
9.Loop เมื่อเลือกช่องนี้ไฟล์ Flash จะเล่นซ้าไปซ้ามา ถ้าเราไม่ได้เลือกจะแสดงเพียงครั้งเดียวแล้ว
หยุดไป
10.Autoplay ถ้าเลือกช่องนี้ Flash จะแสดงผลเองอัตโนมัติเมื่อโหลดไฟล์เรียบร้อย ถ้าไม่เลือก
การแสดงผลจะขึ้นอยู่กับ behavior (เช่น onMouseOver , onMouseDown) ที่เราได้กาหนดไว้ให้กับไฟล์นั้น
11.V Space (Vertical Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจใน
ตาแหน่งบนและล่าง
12.H Space (Horizontal Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจใน
ตาแหน่งซ้ายและขวา
13.Quality ตัวเลือกนี้จะทาให้เราสามารถจัดการกับ anti-aliasing คือการกาหนดคุณภาพของ
flash โดยถ้าเราเปิด anti-aliasing จะทาให้ flash แสดงผลได้ดี ภาพสวยขึ้น แต่ความเร็วของการเล่นไฟล์ flash จะช้า
ลง สมมุติว่าเราใส่รูปคนวิ่งลงไป เมื่อเปิด anti-aliasing จะทาให้รูปสวยขึ้น แต่คนจะวิ่งได้ช้าลง โดยจะมีตัวเลือก
ดังนี้
Low ปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สาคัญกว่าความสวยงาม
High เปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สาคัญน้อยกว่าความ
สวยงาม
Auto High คาสั่งนี้จะเปิด anti-aliasing ก่อน เมื่อความเร็วของการเล่นไฟล์ช้าลงมาก ก็จะทาการปิด anti-
aliasing ให้ความสาคัญความสวยงามมากว่าความเร็ว

Auto Low คาสั่งนี้จะเริ่มต้นด้วยการปิด anti-aliasing ก่อน จะเปิดก็ต่อเมื่อเครื่อง CPU ของเครื่องผู้ใช้งาน
สามารถประมวลผลได้โดยไม่ทาให้ความเร็วของการเล่นไฟล์ลดลง ก็จะเปิด anti-aliasing ให้ความสาคัญความเร็ว
มากว่าความสวยงาม
14.Scale เราจะใช้คาสั่งนี้เมื่อได้เปลี่ยนขนาดของ flash จากขนาดเดิมโดยไม่มีมาตราส่วน คาสั่งนี้จะ
เป็นการกาหนดการแสดงผลของ flash ในขนาดที่เรากาหนด
Default (Show All) แสดงผลตามมาตราส่วนปรกติ และจะแสดงผลทั้งหมดของไฟล์ เช่น ถ้าเราเปลี่ยน
ขนาดที่ผิดมาตราส่วนไป ตัวเลือกนี้จะปรับให้แสดงผลในมาตราส่วนที่สามารถแสดงได้เท่านั้น
No Border แสดงผลให้โดยใช้มาตราส่วนปรกติ แต่จะไม่แสดงผลส่วนที่เกินออกไป เช่นถ้าเราปรับมาตรา
ส่วนผิดไป ตัวเลือกนี้จะปรับมาตราส่วนตามนั้น แต่ส่วนที่เกินออกไปขนาดที่เรากาหนด จะไม่แสดงผล
Exact Fit จะปรับการแสดงผลให้เท่ากับขนาดที่เรากาหนด
15.Align จัดตาแหน่งของไฟล์
16.Bg กาหนดพื้นหลังให้ไฟล์
17.Play button กาหนดให้แสดงผลไฟล์ flash ใน Dreamweaver ถ้าเรากด play จะทาให้เห็นไฟล์ flash
แสดงผลใน Dreamweaver แต่ถ้าเราต้องการแก้ไขต้องกด stop ก่อน
18.Parameters กาหนดค่าตัวแปรให้กับ flash จะพูดถึงในบทอื่น
รู้จักชนิดของไฟล์วิดีโอ และเสียง
การแทรกไฟล์วิดีโอ และไฟล์เสียงนั้นทาเหมือนกัน แต่สาคัญตรงที่เราจะต้องรู้ด้วยว่าไฟล์ที่เราแทรกนั้นสามารถ
เปิดได้ด้วยโปรแกรมอะไร มิฉะนั้นไฟล์ที่เราแนบไปก็ไม่แสดงผลที่เครื่องผู้รับ เนื่องจากไม่มีโปรแกรมที่สามารถเปิดได้
ตัวอย่างเช่น
ไฟล์วิดีโอ
1.Flash Video (.flv) จะเปิดด้วย Flash player ซึ่งจะมีอยู่ใน web browser เกือบทุกตัวอยู่แล้ว การที่เราใช้ไฟล์นี้จะทา
ให้ผู้ใช้ส่วนมากเปิดได้ทุกคน
2.Windows Media Video (.wmv, .asx) จะเปิดด้วย Windows Media Player เป็นโปรแกรมที่มีทุกเครื่องที่ลง
window อยู่แล้วและส่วนใหญ่ผู้ใช้งานจะสามารถเปิดได้ (ผู้ใช้งานส่วนใหญ่ใช้ window)
3.RealVideo (.rm, .rv) เปิดด้วย RealPlayer มีเฉพาะบางเครื่องเท่านั้น
4.QuickTime (.qt, .mov) ส่วนใหญ่จะมีในเครื่องของ Apple
5.AVI (Audio Video Interleave) เป็นรูปแบบของไฟล์วิดีโอของ window อยู่แล้วทาให้ผู้ใช้งาน window สามารถ
เปิดได้
ไฟล์เสียง
1.MP3 (.mp3) เป็นไฟล์ยอดนิยมสามารถเปิดได้กับคอมพิวเตอร์ส่วนใหญ่
2.Windows Audio (.wma) Microsoft?s Windows Audio format สามารถเปิดได้โดย Windows Media Player เป็น
โปรแกรมที่มีทุกเครื่องที่ลง window อยู่แล้วและส่วนใหญ่ผู้ใช้งานจะสามารถเปิดได้ (ผู้ใช้งานส่วนใหญ่ใช้ window)
3.RealAudio (.ra) เปิดด้วย RealPlayer มีเฉพาะบางเครื่องเท่านั้น

4.WAV (.wav) เป็นไฟล์ที่นิยมใช้ในอินเตอร์เนตเนื่องจากว่า เครื่องเกือบคอมพิวเตอร์ทุกเครื่อง (ส่วนใหญ่)
สามารถอ่านไฟล์นี้ได้ แต่ข้อเสียคือไฟล์มีขนาดใหญ่มากๆ
แทรกไฟล์วิดีโอ และเสียงลงในเว็บเพจ
1.เปิดไฟล์ใหม่ขึ้นมา และทาการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตาแหน่งที่ต้องการจะ
แทรก
2.ไปที่ Insert > Media > Plugin จะมีหน้าต่างดังรูป
ให้เลือกไฟล์ที่ต้องการแทรก
3.คลิกโอเคจะมีหน้าต่างดังภาพ
เราสามารถเปลี่ยนแปลงขนาดที่แสดงในเว็บเพจได้ การแทรกไฟล์วิดีโอ หรือเสียง ในเว็บเพจนั้นถ้าไม่ใช่ไฟล์
flash(flv)โปรแกรมDreamweaver จะไม่รู้ขนาดที่ใช้ในการแสดง ทาให้เราจะต้องกาหนดขนาดที่เราต้องการให้แสดงเอง
4.เมื่อเราเลือกไฟล์วิดีโอที่แทรก ส่วน Property inspector จะเป็นแบบนี้
1.ช่องแรกสุดทางซ้ายมือ สาหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป
2.W (Width) and H (Height) กาหนดความกว้าง และสูงของ ไฟล์ที่จะให้แสดงผล
3.Class กาหนด Style Sheet ให้กับไฟล์นี้
4.Src (Source) ตาแหน่งที่เก็บไฟล์
5.Align จัดตาแหน่งของไฟล์

6.Play button ใช้ทดลองเปิดไฟล์
7.Plg URL ใช้กาหนดเว็บไซต์สาหรับโหลดโปรแกรมสาหรับเปิดไฟล์ที่เราแทรก จะปรากฏเมื่อเครื่องผู้ใช้ไม่
สามารถเปิดไฟล์ของเราได้
8.V Space (Vertical Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่งบนและล่าง
9.H Space (Horizontal Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่งซ้ายและขวา
10.Border กาหนดขอบให้กับไฟล์
11.Parameters กาหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น
การแสดงผลไฟล์วิดีโอและเสียงที่เราแทรกลงไปนี้ จะแสดงผลก็ต่อเมื่อโหลดข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น จะไม่
มีการโหลดไฟล์พร้อมกับการเล่นไฟล์ อย่างในเว็บ youtube ถ้าต้องการให้โหลดไปด้วยเล่นเป็นได้ต้องใช้งานในตัวเลือก
Streaming ซึ่งจะต้องติดต่อกับ ผู้ดูแล server ว่าได้เปิด Streaming server ไว้หรือไม่
แทรกไฟล์ Flash video (Flv) ลงในเว็บเพจ
ไฟล์ flv เปิดด้วยโปรแกรม Flash player โชคดีที่ Browser ส่วนใหญ่จะมี flash player ติดมาด้วย เราสามารถแปลง
จากไฟล์นามสกุลอื่นให้เป็น flv ได้โดยใช้โปรแกรม เช่น โปรแกรม Flash ก็สามารถแปลงได้ หรือในปัจจุบันนี้มีโปรแกรม
มากมายที่ทามาเพื่อรองรับส่วนนี้
การแทรกไฟล์ Flash video ในเว็บเพจ
1.เปิดไฟล์ใหม่ขึ้นมา และทาการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตาแหน่งที่ต้องการจะ
แทรก
2.ไปที่ Insert > Media > Flash video จะมีหน้าต่างดังรูป

1.Video type ให้เลือกเป็น progressive จะแสดงผลเมื่อโหลดไฟล์เสร็จเท่านั้น ส่วนแบบ Streaming นั้นเป็นแบบที่
สามารถโหลดไฟล์ไปพร้อมกับเล่นไฟล์ได้ แต่จะต้องติดต่อกับผู้ดูแล server ว่าได้เปิดบริการส่วน Streaming server ไว้
หรือไม่
2.URL กาหนดตาแหน่งที่เก็บไฟล์ของเราโดยคลิกที่ Browse เพื่อกาหนดไฟล์ที่ต้องการแทรก
3.Skin เลือกรูปแบบของส่วนควบคุมการแสดงผลไฟล์วิดีโอ
4.height , width กาหนดความสูงให้กับไฟล์ flash ของเรา ตามปรกติถ้าเราไม่ใส่ Dreamweaver จะรู้ขนาดของไฟล์
อยู่แล้ว
5.Auto play เล่นไฟล์อัตโนมัติเมื่อโหลดเสร็จ
6.Auto rewind เล่นซ้าอัตโนมัติ
7.Prompt ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้ไม่มี Flash player จะปรากฏข้อความในช่อง message
การใช้งาน Spry
หลายคนคงได้ยินชื่อ Ajax มากันบ้างแล้ว ว่าเป็นการเขียนเว็บเพจให้ตอบโต้กับผู้ใช้ ได้อย่างรวดเร็วและนุ่มนวล ซึ่ง
ทาง Adobe ก็ได้นา Ajax มาพัฒนาต่อให้เพื่อให้ใช้กับ Dreamweaver ได้และตั้งชื่อเครื่องมือว่า spry
Spry Menu Bar
หลายคนคงเคยเห็น navigation แบบที่เมื่อเอาเมาส์ไปวางบนนั้นแล้วจะมีรายการแสดงรายละเอียดเพิ่มเติม หรือมี
เมนูเพิ่มขึ้นมา ซึ่งการเขียน navigation แบบนั้นจาเป็นต้องใช้ความรู้เรื่อง CSS แต่ตอนนี้ Dreamweaver นั้นได้เตรียม
เครื่องมือสาหรับสร้าง navigation แบบง่ายๆด้วย Spry Menu bar
การใช้งาน Spry Menu Bar
1.เปิดเว็บที่ต้องการแทรก navigation ขึ้นมา จากนั้นทาการ save ให้เรียบร้อย
2.คลิกตาแหน่งที่ต้องการวาง navigation จากนั้นคลิกที่ spry menu bar ดังรูป
3.เมื่อคลิกแล้วจะมีหน้าต่างขึ้นมาดังรูป หน้าต่างนี้สาหรับเลือกว่าต้องการให้ navigation ของเราวางในแนวนอน
(horizontal) หรือแนวตั้ง (vertical)
4.เมื่อคลิก ok ที่เอกสารของเราจะเป็นดังรูป ดังตัวอย่างเลือก navigation แบบ horizontal
5.เมื่อเราคลิกเมาส์ที่แถบสีฟ้าที่เขียนว่า spry menu bar : menubar1 ให้สังเกตุที่ Property inspector จะเป็นดังรูป

5.1.ช่องซ้ายบน ใส่ชื่ออ้างอิงของ navigation
5.2.Turn style off สาหรับปิดการแสดงผล CSS ทาให้เราสามารถเห็น navigation ในรูปแบบของ list
5.3.ช่องสี่เหลี่ยมขนาดใหญ่ 3 ช่อง
ช่องที่ 1 สาหรับกาหนดชื่อเมนูหลักของ navigation
ช่องที่ 2 สาหรับกาหนดเมนูย่อยของ ช่องที่ 1
ช่องที่ 3 สาหรับกาหนดเมนูย่อยของ ช่องที่ 2
5.4.Text เป็นคาที่ใช้แสดงผลใน navigation
5.5.Link เป็นใช้กาหนดลิงค์สาหรับ navigation
5.6.Title เป็นคาบรรยายลิงค์ เมื่อวางเมาส์เหนือ navigation จะมีคาบรรยายนี้ขึ้นมา
5.7.Target กาหนดรูปแบบของลิงค์ เช่น _blank เปิดหน้าใหม่
เราสามารถเพิ่มหรือลบรายการของเมนูได้โดยคลิกที่เครื่องหมาย + และ - ในช่องที่เราต้องการแก้ไข
6.เราสามารถกาหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือ จะมีรายการแสดงดัง
รูป การใช้งาน CSS สามารถอ่านได้โดย
7.เมื่อแสดงผลใน Browser จะเห็นดังรูป
สาหรับ navigation แบบ vertical ก็ทางานแบบเดียวกัน

Spry Tabbed Panel
แสดงผลข้อมูลแบบ Tab เป็นการแสดงผลข้อมูลที่มีประสิทธิภาพมากวิธีหนึ่ง ผู้ใช้งานสามารถเลือกหัวข้อด้านบน
เนื้อหาจะถูกแสดงผลด้านล่างของหัวข้อทันที
ขั้นตอนการใช้งาน Spry Tabbed Panel
1. เปิดเว็บเพจที่ต้องการแทรก Tabbed Panel ขึ้นมา จากนั้นทาการ save ให้เรียบร้อย
2. คลิกตาแหน่งที่ต้องการวาง Tabbed Panel จากนั้นคลิกที่ Spry Tabbed Panelดังรูป
3. เมื่อคลิกแล้วจะแสดงผลดังรูป
เราสามารถแก้ไขข้อความได้โดยตรงจากหน้าที่แสดงผลได้ทันที
4. การเลือก Tab ที่ 2 ให้นาเมาส์ไปวางเหนือ Tab ที่ 2 จะเห็นรูปตาปรากฏขึ้นมา ให้คลิกที่รูปตานั้น ก็จะสามารถ
แก้ Tab ที่ 2 ได้
5.Property inspector เมื่อเราทาการแก้ไข Tabbed Panel จะเป็นดังรูป
1.ช่องซ้ายบน ใส่ชื่ออ้างอิงให้กับ Tabbed Panel
2.Panels เลือกเพิ่มหรือลบ Tab โดยคลิกที่เครื่องหมาย + และ -
3.Default Panel เลือก Tab ที่ต้องการให้แสดงผลก่อน
6.เราสามารถกาหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือ จะมีรายการแสดง
ดังรูป การใช้งาน CSS สามารถอ่านได้โดย

7.เมื่อแสดงผลผ่าน Browser จะเป็นดังภาพ

Spry Accordion Panel
สร้างการแสดงผลแบบพับได้ Spry Accordion จะสร้างการแสดงผลในแบบที่เราสามารถแบ่งหมวด และให้
ผู้ใช้งานสามารถกดเพื่อแสดงผลตามหมวดที่ต้องการได้
ขั้นตอนการใช้งาน Spry Accordion Panel
1.เปิดเว็บเพจที่ต้องการแทรก Accordion ขึ้นมา จากนั้นทาการ save ให้เรียบร้อย
2.คลิกตาแหน่งที่ต้องการวาง Accordion Panel จากนั้นคลิกที่ Spry Accordion Panelดังรูป
3.เมื่อคลิกแล้วจะแสดงผลดังรูป
4.การแก้ไขหัวข้อต่อไปให้เราวางเมาส์เหนือหัวข้อที่ต้องการ จะมีรูปตาขึ้นมา ให้คลิกที่รูปตานั้นก็จะสามารถแก้ไข
เนื้อหาในหัวข้อนั้นได้
5.Property inspector เมื่อเราทาการแก้ไข Accordion Panel จะเป็นดังรูป

1.ช่องซ้ายมือบนสุด ใส่ชื่ออ้างอิง Accordion Panel
2.Panels รายชื่อหัวข้อใน Acordion panel สามารถเพิ่มหรือลบด้วยการคลิกที่ เครื่องหมาย + หรือ -

Spry Collapsible Panel
ในกรณีที่เรามีข้อมูลมากๆที่จาเป็นจะต้องแสดงในหน้าเดียว การใช้ Spry Collapsible ก็เป็นทางเลือกที่น่าสนใจแบ่ง
การแสดงข้อมูลเป็นหัวข้อ
ขั้นตอนการใช้งาน Collapsible Panel
1.เปิดเว็บเพจที่ต้องการแทรก Collapsible ขึ้นมา จากนั้นทาการ save ให้เรียบร้อย
2.คลิกตาแหน่งที่ต้องการวาง Collapsible Panel จากนั้นคลิกที่ Spry Collapsible Panelดังรูป
3.เมื่อคลิกแล้วจะแสดงผลดังรูป
4.เราสามารถเลือกแสดงหรือ ไม่แสดงเนื้อหาโดยการวามเมาส์เหนือหัวข้อ จะมีสัญลักษณ์รูปตาปรากฏขึ้นมา ให้เรา
คลิกได้

5.Property inspector เมื่อเราทาการแก้ไข Collapsible Panel จะเป็นดังรูป
1.ช่องซ้ายมือบนสุด ใส่ชื่ออ้างอิง Collapsible Panel
2.Display สั่งให้แสดงหรือไม่แสดงเนื้อหา
3.Default Stat สั่งให้แสดงผลเนื้อหาเมื่อโหลดหน้าเว็บเพจเสร็จ หรือไม่แสดงเนื้อหา
4.Enable animation เมื่อเลือกช่องนี้การแสดงผลปิดเปิดเนื้อหาจะทาได้นุ่มนวลขึ้น

คู่มือการใช้ Dream cs3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to คู่มือการใช้ Dream cs3

Similar to คู่มือการใช้ Dream cs3 (20)

คู่มือการใช้ Dream cs3