ค ม อ การ ใช งาน dreamweaver cs3

2. ให้สร้างไดเรคทอรีไว้เก็บไฟล์หลักของเว็บไซต์เช่น pasakresort ให้ตั้งชื่อตามชื่อเว็บไซต์ที่ได้ลง ทะเบียนไว้

3. ส่วนท่านใดที่ไม่ได้ดาวน์โหลดโปรแกรม Appserv มาติดตั้ง ก็ให้สร้างเป็นไดเรคทอรรีชื่อ pasakresort ไว้เก็บไฟล์ได้เช่นกัน อาจสร้างไว้ในไดรว์ใดๆ ก็ได้

กำหนดรายละเอียดเกี่ยวกับ Site Dreamweaver CS3

เป็นการกำหนดรายละเอียดเกี่ยวกับ Site หรือเว็บไซต์ของเราในโปรแกรม Dreamweaver เช่น ตำแหน่งเก็บไฟล์เว็บเพจ เก็บไฟล์ภาพ เป็นต้น

1. ในหน้าจอโปรแกรม Dreamweaver ให้คลิก Site>>New Site...

2. ในกรอบข้อความที่ปรากฏขึ้นมา ช่อง Site name พิมพ์ชื่อเว็บไซต์ของเราเช่น pasakresort

3. ช่อง HTTP Address คลิกและพิมพ์ชื่อเว็บไซต์เช่น //www.pasakresort.kmancity.com เป็นฟรีเว็บไซต์ที่ได้สร้างไว้ที่ www.kmancity.com คุณผู้อ่านได้ขอฟรีเว็บไซต์ด้วยชื่ออะไร ก็พิมพ์เข้าไป ตามนั้น

4. ช่อง Local root folder คลิกปุ่ม Browse

5. คลิกเลือกไดเรคทอรีที่ได้สร้างไว้เก็บไฟล์เว็บเพจของเรา ก็คือ pasakresort

6. คลิกปุ่ม Select

7. คลิกปุ่ม Select

8. คลิกปุ่ม OK

สร้างไฟล์เว็บเพจ Dreamweaver CS3

เป็นการสร้างไฟล์เว็บเพจ ในที่นี้จะใช้ไฟล์เว็บเพจแบบ php

1. คลิกเลือก Site ที่ได้สร้างไว้ เช่น pasakresort

2. ชี้พื้นที่ว่างๆ ด้านล่าง แล้วคลิกปุ่มขวาของเมาส์ เรียกคำสั่งลัด

3. คลิก New File

4. พิมพ์ชื่อไฟล์ เช่น index.php แล้วกด Enter

5. จากนั้นก็สร้างไฟล์อื่นๆ ที่เหลือ เช่น aboutus.php, album.php, contact.php, map.php และ promotion.php

6. จัดการสร้างไฟล์ภาพประกอบแล้วก็อปปี้มาไว้ในไดเรคทอรี pasakresort เช่นกัน

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

8. จากนั้นก็จัดการก็อปปี้ไฟล์ภาพไปไว้ในโฟลเดอร์หลักของเว็บไซต์ของคุณ จากตัวอย่างก็คือโฟล เดอร์ชื่อ images ก็อปปี้ไปทั้งโฟลเดอร์เลย

• 1. ดวย Adobe Dreamweaver CS3 สารบัญ Training Service (ICT CENTER)
• 2. ดวย Adobe Dreamweaver CS3 หนาที่ 1 สารบัญ รูจักกับ Dreamweaver............................................................................................................................................3 ความสามารถของ Dreamweaver .......................................................................................................................3 การใชงานพื้นฐาน (สิ่งที่ควรทราบเบื้องตน) ..................................................................................................4 การเริ่มตนใชงาน Dreamweaver .........................................................................................................................4 สวนประกอบของ Dreamweaver ........................................................................................................................5 หนาจอแสดงผล (Document Windows)...............................................................................................................6 การเริ่มกําหนดโครงรางของเว็บ .......................................................................................................................7 เริ่มตนสรางเว็บไซต .............................................................................................................................................8 เริ่มตนสรางเว็บไซต .............................................................................................................................................8 การตั้งคาเพือใหอานภาษาไทยได ...................................................................................................................9 ่ การเพิ่ม Font เพื่อใชงาน .................................................................................................................................10 การกําหนดรายละเอียดของหนาเว็บเพจ .....................................................................................................11 การสราง Table....................................................................................................................................................12 การกําหนดขนาดของเซลล..............................................................................................................................13 การเลือกเซลล และ การกําหนดสีพื้น ...........................................................................................................13 การผสานเซลล (Marge Cell) .............................................................................................................................14 การแทรกรูปภาพลงตาราง ..............................................................................................................................14 การแทรกแถวและคอลัมน ............................................................................................................................... 15 การพิมพขอความและการกําหนดตัวอักษร.................................................................................................17 การทําลิงคเชื่อมไฟล.........................................................................................................................................18 การยกเลิกลิงค ...................................................................................................................................................18 การทําลิงค ..........................................................................................................................................................18 การทําจุดลิงคเรียกเว็บไซตอื่น ........................................................................................................................19 เทมเพลตคืออะไร ..............................................................................................................................................20 Training Service (ICT Center)
• 3. ดวย Adobe Dreamweaver CS3 หนาที่ 2 สารบัญ (ตอ) การสรางเทมเพลตจากหนาเว็บที่ออกแบบไวแลว .....................................................................................20 การกําหนดพื้นที่ที่เปลี่ยนแปลงไดในเทมเพลต ..........................................................................................21 การนําเทมเพลตมาใชงาน ............................................................................................................................... 22 การปรับปรุงแกไขเทมเพลต ............................................................................................................................23 Training Service (ICT Center)
• 4. ดวย Adobe Dreamweaver CS3 หนาที่ 3 เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 รูจักกับ Dreamweaver Dreamweaver ถือไดวาเปนเครื่องมือสําหรับสรางเว็บเพจ และ ดูแลเว็บไซต ที่มีประสิทธิภาพสูง เปนที่ นิยมใชของ Web Master อยางกวางขวาง ซึ่งเปนโปรแกรมสําหรับเขียนภาษา HTML โดยเฉพาะ พรอมทั้ง สามารถแทรก Java Scripts และ ลูกเลนตางๆไดมากมาย โดยที่ผูใชไมจาเปนตองรูหลักภาษา HTML มากนัก ํ ซึ่งชวยประหยัดเวลา และ ทํางานไดสะดวกยิ่งขึ้น ความสามารถของ Dreamweaver ในการเขียนเว็บเพจ จะมีลักษณะคลายกับการพิมพงานในโปรแกรม Text Editor ทั่วไป คือวามันจะเรียง ชิดซายบนตลอดเวลา ไมสามารถยาย หรือ นําไปวางตําแหนงที่ตองการไดทันที่เหมือนโปรแกรมกราฟก เพราะฉะนั้นหากเราตองการจัดวางรูปแบบตามที่เราตองการ ก็ใชตาราง Table เขามาชวยจัดตําแหนง ซึ่งเมื่อมี การจัดวางรูปแบบที่ซับซอนมากขึ้น การเขียนภาษา HTML ก็ซับซอนยิ่งขึนเชนกัน โปรแกรม Dreamweaver ้ อาจจะไมสามารถเขียนเว็บไดตามที่เราตองการทั้งหมด วิธีการแกไขปญหาที่ดีที่สุดคือ ควรจะเรียนรูหลักการของ  ภาษา HTML ไปดวย ซึ่งถือวาเปนสิ่งที่จําเปนมากสําหรับผูที่ตองการประกอบอาชีพ Webmaster แบบจริงจัง อาจจะไมตองถึงกับทองจํา Tag ตาง ๆ ไดทั้งหมด แตขอใหรู เขาใจหลักการก็พอแลว เพราะหลาย ๆ ครั้งที่เรา จะเขียนเว็บใน Dreamweaver แลวกลับไดผลผิดเพี้ยนไป ไมตรงตามที่ตองการ ก็ตองมาแกไข Code HTML เอง และความสามารถของ Dreamweaver สรุปไดดังนี้ 1. สนับสนุนการทํางานแบบ WYSIWYG (What You See Is What You Get) หมายความวา เว็บที่เรา เขียนหนาจอ Dreamweaver ก็จะแสดงแบบเดียวกับเว็บเพจจริงๆ ชวยใหเราเขียนเว็บเพจงายขึ้น ไมตองเขียน Code HTML เอง 2. มีเครืองมือในการชวยสรางเว็บเพจ ที่มีความยืดหยุนสูง ่ 3. สนับสนุนภาษาสคริปตตางๆ ทังฝง Client และ Server เชน Java, ASP, PHP, CGI, VBScript ้ 4. มีเครื่องมือในการ Upload หนาเว็บเพจไปที่เครื่อง Server เพื่อทําการเผยแพรงานที่เราสรางใน อินเทอรเน็ต โดยการสงผาน FTP หรือ โดยการใชโปรแกรม FTP ภายนอกชวย เชน WS FTP 5. รองรับมัลติมีเดีย เชน การใสเสียง, การแทรกไฟลวิดีโอ, การใชงานรวมกับโปรแกรม Flash , Fireworks Training Service (ICT Center)
• 5. ดวย Adobe Dreamweaver CS3 หนาที่ 4 การใชงานพื้นฐาน (สิงที่ควรทราบเบื้องตน) ่ 1. ภาษา HTML เปนภาษาที่ออกแบบสําหรับการแสดงผลเทานั้น! ไมสามารถประมวลผล หรือ ใช เขียนเว็บแอพพลิเคชั่นได 2. หากตองการเพิ่มลูกเลน หรือ เทคนิคพิเศษ เชน Effect ตาง ๆ ตองนําภาษา JavaScript มาเสริม HTML อีกที 3. การจัดรูปแบบใน Code เชนการขึ้นบรรทัดใหม การเวนวรรค ไมมีผลตอการแสดงผลทาง Web Browser 4. การขึ้นบรรทัดใหม ตองใช Tag <BR> หรือ กดปุม Shift+Enter 5. การขึ้นยอหนาใหม ตองใช Tag <P> หรือ กดปุม Enter 6. การเวนวรรค ตองใช Tag พิเศษ คือ   หรือ กดปุม Ctrl+ Shift + Spacebar 7. หลักการอาน Tag ของภาษา HTML จะอานคาจาก Tag ที่อยูดานในกอน 8. ไฟล HTML และ Script ตางๆ สามารถเปดแกไขในโปรแกรม Text Editor ทั่ว ๆ ไป ไมจําเปนตอง แกไขใน Dreamweaver เพียงอยางเดียว 9. การแทรกขอความ และ การปรับแตงคาตาง ๆ ใหคลิกตําแหนงที่ตองการ แลวพิมพขอความตาม ตองการ หรือใหเลือกขอความเมื่อตองการกําหนดคาตาง ๆ เพิ่มเติม การเริ่มตนใชงาน Dreamweaver หลังจากที่ทําการติดตั้ง Dreamweaver เรียบรอยแลว ก็สามารถเรียกใชงานโปรแกรมดวยวิธีการตอไปนี้ 1. Click Mouse ที่ปุม 2. เลือกคําสั่ง All Program > เลือกตามรูป Training Service (ICT Center)
• 6. ดวย Adobe Dreamweaver CS3 หนาที่ 5 สวนประกอบของ Dreamweaver • แถบคําสั่ง (Menu Bar) เปนแถบที่ใชเก็บคําสั่งทั้งหมดของโปรแกรม • แถบคําเครืองมือ (Toolbar) รวบรวมปุมคําสั่งที่ใชงานบอย ่ • แถบวัตถุ (Object Palette) เปนกลุมเครื่องมือตางๆ ที่ใชในการควบคุมวัตถุ บนชินงาน ้ เอกสารเว็บ เชน เสนกราฟก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร (Layer) • แถบแสดงสถานะ (Status Bar) • แถบควบคุมการทํางาน (Properties Palette) เปนรายการที่ปรับเปลี่ยนได ตามลักษณะการ เลือกขอมูล เชน หากมีการเลือกที่จะพิมพ หรือแกไขเนื้อหา รายการก็จะเปน สวนทํางานที่ เกี่ยวกับอักษร, การจัดพารากราฟ ถาเลือกที่รูปภาพ รายการในแถบนี้ ก็จะเปนคําสั่งตางๆ ที่ เกี่ยวกับ การควบคุมเรื่องรูปภาพ • สวนของ Panel Group เปนกลุมของแถบเครื่องมือที่สามารถเรียกใชงานไดอยางรวดเร็ว เพื่อใหงายในการสราง Application บนอินเทอรเน็ต เชน การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจไดอยางงายๆ โดยสามารถเรียกใชงานไดจาก Panel Group Training Service (ICT Center)
• 7. ดวย Adobe Dreamweaver CS3 หนาที่ 6 สวนประกอบตางๆ ของหนาจอ Dreamweaver Panel Group Menu Bar Object Bar Tool Bar หนาจอแสดงผล Status Bar Properties แสดงสวนประกอบของ Dreamweaver หนาจอแสดงผล (Document Windows) หนาตางการทํางานของ Dreamweaver สามารถเลือกหนาตางการทํางานได 3 รูปแบบ โดย การคลิกไอคอนที่อยูในแถบเครื่องมือ Toolbar ดังนี้ Show Code View เปนหนาตางที่ใหแสดงเฉพาะโคด HTML ของหนาเว็บเพจที่ กําลังทํางาน Show Code and Design View เปนหนาตางที่แสดงทั้งโคด HTML และหนาเว็บเพจที่กําลัง ทํางาน Show Design View ใหแสดงแตหนาเว็บเพจไมตองแสดงโคด HTML Training Service (ICT Center)
• 8. ดวย Adobe Dreamweaver CS3 หนาที่ 7 การเริ่มกําหนดโครงรางของเว็บ กอนดําเนินการสรางเว็บเพจ ขั้นแรกควรกําหนดใหขอมูลตางๆ ที่เกี่ยวของอยูใน Folder เดียวกัน เพื่องายตอคนหาและจัดเก็บ ตัวอยางเชนทําเว็บเพจของหนวยงานกอนอื่นเราควรสราง Folder ชื่อของ หนวยงานกอนอาจเปนภาษาอังกฤษหรือภาษาไทยก็ได แลวใน Folder หนวยงานคอยสราง Folder ยอยอีกที อาจประกอบดวยหลาย Folder ยอย เพื่อใชสําหรับแยกเก็บไฟลตาง ๆ เปนหมวดหมู เชน ไฟลรูปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ Training Service (ICT Center)
• 9. ดวย Adobe Dreamweaver CS3 หนาที่ 8 แสดงการสราง Folder และ Folder ยอย เพื่อใชเก็บขอมูลใหเปนหมวดหมู จากตัวอยาง จะทําการสราง Folder ตาง ๆ ดังนี้ Folder แรก Computer (หนวยงาน) Folder ยอย (เก็บไฟลรูป) เริ่มตนสรางเว็บไซต หลังจากที่สราง Folder เพื่อใชเก็บขอมูลแลว ขั้นตอไปคือการสรางเว็บไซต โดยการกําหนด Site Manager ใหกับเอกสาร โดยมีหลักการสรางดังนี้ 1. เลือก เมนู Site > เลือกคําสั่ง New Site 2. เลือกแท็บ Advanced เริ่มตนสรางเว็บไซต หลังจากที่สราง Folder เพื่อใชเก็บขอมูลแลว ขั้นตอไปคือการสรางเว็บไซต โดยการกําหนด Site Manager ใหกับเอกสาร โดยมีหลักการสรางดังนี้ เลือก เมนู Site > เลือกคําสั่ง New Site Training Service (ICT Center)
• 10. ดวย Adobe Dreamweaver CS3 หนาที่ 9 การตั้งคาเพื่อใหอานภาษาไทยได หลังจากที่ทําการติดตั้งโปรแกรม Dreamweaver แลว โปรแกรมจะไมรูจัก Font ภาษาไทย เนื่องจาก Dreamweaver ไมสนับสนุนภาษาไทย ดังนั้นเราตองติดตั้ง Font ภาษาไทยกอน ซึ่งสามารถ Download ไดที่ //www.thaiware.com/softwae/develop/DV00250.htm ซึ่งเปนโปรแกรมทีถูกพัฒนาจาก ่ คนไทย เมื่อ Download ไดแลวใหทําการติดตั้งเพิ่มเติม เพื่อใหโปรแกรมสามารถอานภาษาไทยได หลังจากติดตั้ง Font ภาษาไทยลงเครื่องแลว เมื่อเปดโปรแกรม Dreamweaver มาใชงานใหเลือก คําสั่งดังนี้ เพือตั้ง Font ใหมใหเอกสาร ่ 1. เลือกเมนู Edit > เลือกคําสั่ง Preferences 2. เลือก Fonts > Font Setting > เลือก Thai Training Service (ICT Center)
• 11. ดวย Adobe Dreamweaver CS3 หนาที่ 10 ตอบ OK การเพิ่ม Font เพื่อใชงาน เราสามารถเพิ่ม Font เพื่อใชงานได โดยการนํา Font จาก Windows มาใชงาน Dreamweaver โดยเลือกคําสั่งดังนี้ 1. Text > Font > Edit Font List 2. เลือก Font เชน Microsoft Sans Serif Training Service (ICT Center)
• 12. ดวย Adobe Dreamweaver CS3 หนาที่ 11 การกําหนดรายละเอียดของหนาเว็บเพจ กอนเริ่มกําหนดรายละเอียดตางๆ ใหหนาเว็บ เราควรเริ่มโดยการกําหนดรายละเอียดของหนา เว็บกอน โดยมีขั้นตอนดังนี้ 1. เลือกเมนู Modify > Page Properties 2. ปรับเปลี่ยนขอมูล Training Service (ICT Center)
• 13. ดวย Adobe Dreamweaver CS3 หนาที่ 12 การสราง Table การใชตารางเหมาะสําหรับการนําเสนอขอมูลจํานวนมาก เพื่อความสะดวกในการจัดการขอมูล และความเปนสัดสวน ควรจัดระบบการนําเสนอขอมูลของหนาเว็บเพจโดยการใชตารางเปนตัวจัดการในการจัด วางขอมูลในแตละหนาเว็บเพจ กอนอืนเรามาทําความรูจักกับสวนประกอบของตารางกอน ่ Column Row Cell รูปแสดงสวนประกอบของตาราง ขั้นตอนการสรางตารางสามารถทําไดโดยเลือก Object ทีแท็บ Object แลวกําหนดคา ่ ตาง ๆ ของ ตารางดังรูป Rows > จํานวนแถวที่ตองการ Column > จํานวนคอลัมนทตองการ ี่ Width > ความกวางของตาราง Border > ความหนาของขอบตาราง Cell Padding >ระยะระหวางขอความกับขอบ ตาราง Cell Spacing > ระยะระหวางแตละเซลลในตาราง เมื่อกําหนดขอมูลเสร็จแลว Click ปุม OK จะไดขอมูลตารางตามที่กําหนด Training Service (ICT Center)
• 14. ดวย Adobe Dreamweaver CS3 หนาที่ 13 การกําหนดขนาดของเซลล 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) ให Click ที่ Properties เพื่อกําหนดขนาดของเซลล ดังรูป การเลือกเซลล และ การกําหนดสีพื้น 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) 2. ให Click ที่ Properties เพื่อกําหนดสี โดยเลือกที่ BG แลวกําหนดเลือกสี (ใหเลือกสี เขียว) หรือสามารถพิมพรหัสสีได Training Service (ICT Center)
• 15. ดวย Adobe Dreamweaver CS3 หนาที่ 14 การผสานเซลล (Marge Cell) 1. ให Click เลือกเซลลที่ตองการ ผสาน 2. Click Properties แลวเลือก เพื่อกําหนดการผสานเซลล ดังรูป การแทรกรูปภาพลงตาราง 1. ให Click เลือกเซลลที่ตองการแทกรูป 2. เลือกเมนู Insert > image ดังรูป เลือกหาที่เก็บของรูป แลวเลือกรูปที่ตองการแทรกลงตาราง ดังรูป  Training Service (ICT Center)
• 16. ดวย Adobe Dreamweaver CS3 หนาที่ 15 ตอบ OK รูปที่ แสดงที่เก็บของรูปภาพและการเลือกรูปลงเว็บเพจ การแทรกแถวและคอลัมน การแทรกแถว 1. นําเคอรเซอรไปวางยังตําแหนงที่ตองการจะแทรกแถว 2. Click Mouse ปุมขวาจะปรากฎเมนูยอย ใหเลือก Table > Insert Rows or Columns.. 3. จะมี Dialog Box ใหกําหนดรูปแบบของการแทรกตารางวา จะเลือกแทรก Rows หรือ Column (ใหแทรก Rows จํานวน 2 Rows) 4. กําหนดการแทรก Rows ใหแทรกกอน (Above the Selection) หรือหลัง (Before the Selection) ได 5. ในกรณีที่ตองแทรก Column จะมีใหแทกกอน (Before current Column) หรือหลัง (After current  Column) Training Service (ICT Center)
• 17. ดวย Adobe Dreamweaver CS3 หนาที่ 16 แสดงขั้นตอนการแทรกแถวและคอลัมน แสดงการแทรก Column หลังจากแทรก Rows จํานวน 2 Rows หนาจอที่ไดแสดงดังรูป Training Service (ICT Center)
• 18. ดวย Adobe Dreamweaver CS3 หนาที่ 17 การพิมพขอความและการกําหนดตัวอักษร การพิมพขอความในเว็บเพจจะคลายกับการพิมพเอกสารใน Word โดยเราสามารถจัดรูปแบบขอความให สวยงามไดดวย โดยอาจใชตัวอักษรกราฟกที่สีตัวอักษรตัดกับสีพื้นฉากหลัง เพื่อใหสามารถอานไดงาย และเรา สามารถจัดรูปแบบและขนาดตัวอักษรไดโดยใหเลือกขอความที่ตองการปรับแตง และแกไขคาตาง ๆ ไดที่ หนาตาง Properties โดยมีรายละเอียดดังนี้ • Format เปนรูปแบบตัวอักษรสําเร็จที่เรานํามากําหนดใหกับขอความได • Font รูปแบบตัวอักษร โดยใน Dreamweaver จะแสดงรูปแบบตัวอักษรที่มีในเครือง PCและ่ เครื่อง MAC • Size ขนาดของตัวอักษร ขนาดมาตรฐานที่กําหนดไวคือ 3 • Color กําหนดสีใหตัวอักษร การเชื่อมโยง (Link) การเชื่อมโยงบนเว็บเพจมีดวยกันหลายรูปแบบ อาจแบงตามการใชงาน หรือตามลักษณะของการ เชื่อมโยงภายในเว็บเพจ และการเชื่อมโยงภายนอกเว็บเพจ แตถาแบงตามวัตถุประสงคของรูปแบบการใชงาน จะแบงการเชื่อมโยงเว็บเพจ ออกเปนดังนี้ การเชื่อมโยงภายในเว็บเพจเดียวกัน การเชื่อมโยงภายในไซตเดียวกัน การเชื่อมโยงไปยังเว็บไซตอื่น 1. การเชื่อมโยงดัวย e-Mail 2. การเชื่อมโยงไปยังไฟล Download 3. การเชื่อมโยงดวย Map Link Training Service (ICT Center)
• 19. ดวย Adobe Dreamweaver CS3 หนาที่ 18 การทําลิงคเชื่อมไฟล การทําลิงคเชื่อมไฟล สามารถทําไดหลายฟอรแมต ทั้งไฟลสกุล HTML และอื่นๆ โดยไฟลอื่นๆ จะ ทํางานในลักษณะ Download ไฟล 1. ทําแถบสีคลุมขอความที่ใชเปนจุดลิงค 2. สังเกตที่แถบ Properties จะเห็นรายการ Link .. พิมพชื่อไฟลที่ตองการใหลิงค ชื่อไฟลอาจจะเปนไฟล .html หรือ ไฟลใดๆ ก็ได โดยจะตองระบุ "นามสกุล" ของไฟลดวยเสมอ (หมาย เหตุ ระวังเรื่องพิมพชื่อไฟลตวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน) สามารถใชปุมสัญลักษณรูปแฟมสี ั เหลือง เลือกไฟลได เมื่อกําหนดชื่อไฟลทตองการลิงคจากรายการ Link เรียบรอยแลว ใหนําเมาสมาคลิกในพื้นที่ ี่ ทํางาน เพื่อยืนยันการกําหนดลิงค การยกเลิกลิงค 1. ใหคลิกเมาส ณ จุดลิงคเดิม 2. ลบรายชื่อไฟลออกจากรายการ Link การทําลิงค 1. ทําแถบสีคลุมขอความที่ตองการ 2. สังเกตที่แถบ Properties จะเห็นรายการ Link 3. พิมพคําบังคับในการทําจุดลิงคเพื่อสงเมลคือ mailto: แลวตามดวย E-Mail Address ของผูจัดทํา เอกสารเว็บ (หมายเหตุ ระวังเรื่องพิมพชื่อไฟลตัวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน และใหพิมพ ติดกันทั้งหมด) ตัวอยาง ตองการทําลิงคเพื่อใหสงเมลไปยัง //ictcenter.spu.ac.thใหระบุคาดังนี้ เลือกขอความที่จะลิงค Training Service (ICT Center)
• 20. ดวย Adobe Dreamweaver CS3 หนาที่ 19 รูปแสดงการเชื่อมโยงกับ e-Mail การทําจุดลิงคเรียกเว็บไซตอื่น ใชหลักการเดียวกับการทําลิงคเชื่อมไฟล แตใหระบุดวยคําบังคับ คือ //ชื่อเว็บ ทั้งนี้สามารถระบุ Target =_blank เพื่อเปดหนาตางใหมในการแสดงผล Training Service (ICT Center)
• 21. ดวย Adobe Dreamweaver CS3 หนาที่ 20 เทมเพลตคืออะไร เทมเพลตใน Dreamweaver จะชวยอํานวนความสะดวกในการสราง และการพัฒนาเว็บเพจโดยจะ กําหนดสวนที่คงที่ในแตละหนาของเว็บเพจ โดยที่เราจะแกไขเฉพาะเนื้อหาของเพจที่มการเปลี่ยนแปลงเทานั้น ี การสรางเทมเพลตจากหนาเว็บที่ออกแบบไวแลว 1. เลือกคําสั่ง File > Save as Template เพือ save file หนาเว็บเพจที่เราไดออกแบบไวเปนไฟล ่ เทมเพลต 2. ตั้งชื่อไฟลเทมเพลตในหนาตาง Save as Template แลว click ปุม Save 3. เมื่อเปดดูหนาตาง Template (เปดหนาตางนี้ไดโดยเลือก Windows > Template) จะแสดงไฟล เทมเพลตที่เราสรางเกิดขึ้น เลือกคําสั่ง File > Save as Template เพือ save file ่ หนาเว็บเพจที่เราได ออกแบบไวเปนไฟลเทม เพลต ตั้งชื่อไฟลเทมเพลตใน หนาตาง Save as Template แลว click ปุม Save รูปแสดงการเก็บขอมูลของเทมเพลต เมื่อเปดดูหนาตาง Template (เปดหนาตางนี้ไดโดยเลือก Windows >Template) จะแสดงไฟลเทม Training Service (ICT Center)
• 22. ดวย Adobe Dreamweaver CS3 หนาที่ 21 เพลตที่เราสรางเกิดขึ้น การกําหนดพื้นที่ทเปลี่ยนแปลงไดในเทมเพลต ี่ 1. เปดหนาเทมเพลตเลือกเมนู Insert > Template Object > Edit Region 2. กําหนดชื่อเรียกพื้นที่ที่สามารถเปลี่ยนแปลงได แลว click mouse ปุม ok 3. ชื่อที่ตั้งจะปรากฎในบริเวณที่สามารถเปลี่ยนแปลงได ซึ่งในขณะที่เราเปดเทมเพลตเราจะแกไข ไดทั้งพื้นที่ที่กาหนดใหเปลี่ยนแปลงได และพื้นที่ล็อคไว แตเมื่อใดที่เรานําเทมเพลตนี้ไปใชกับ ํ หนาเว็บเพจ หนาเว็บเพจนันจะแกไดเฉพาะพื้นที่ที่ถูกกําหนดไวใหเปลี่ยนแปลงไดเทานั้น ้ เปดหนาเทมเพลตเลือกเมนู Insert > Template Object > Edit Region รูปการเปลี่ยนแปลงขอมูลเทมเพลต กําหนดชื่อเรียกพื้นที่ที่สามารถ เปลี่ยนแปลงได แลว click mouse ปุม ok รูปการตั้งชื่อสวนที่สามารถแกไขเทมเพลต ชื่อที่ตั้งจะปรากฎในบริเวณที่สามารถ เปลี่ยนแปลงได ซึ่งในขณะที่เราเปด เทมเพลตเราจะแกไขไดทั้งพืนที่ที่ ้ กําหนดใหเปลี่ยนแปลงได และพื้นที่ รูปแสดงหนาจอเมื่อกําหนดจุดที่แกไขเทมเพลต ล็อคไว แตเมื่อใดที่เรานําเทมเพลตนี้ Training Service (ICT Center)
• 23. ดวย Adobe Dreamweaver CS3 หนาที่ 22 ไปใชกับหนาเว็บเพจ หนาเว็บเพจนั้น จะแกไดเฉพาะพื้นที่ที่ถูกกําหนดไวให เปลี่ยนแปลงไดเทานั้น การนําเทมเพลตมาใชงาน 1. เปดหนาเว็บเพจเปลาขึ้นมา 2. เลือกแท็บ Template เลือกชื่อเทมเพลตที่ตองการ และ click mouse ปุม Select เนือหาที่มีในเทมเพล ้ ตจะถูกนํามาเพิ่มเขาไปในหนาเว็บใหม ในสวนที่เปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเว็บเพจในสวนที่แกไขไดเทานั้น รูปการนําเทมเพลตมาใชงาน เลือกแท็บ Template Training Service (ICT Center)
• 24. ดวย Adobe Dreamweaver CS3 หนาที่ 23 รูปการเลือกเทมเพลตที่จะนํามาใชงาน รูปแสดงหนาจอเมื่อเปดเทมเพลตมาใชงาน เลือกชื่อเทมเพลตที่ตองการ และ click mouse ปุม Select เนือหาที่มีในเทมเพลตจะถูกนํามาเพิ่ม ้ เขาไปในหนาเว็บใหม ในสวนที่เปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนา เว็บเพจในสวนที่แกไขไดเทานั้น การปรับปรุงแกไขเทมเพลต เมื่อใดที่เราทําการแกไขเทมเพลต Dreamweaver จะถามวาเราตองการใหการเปลี่ยนแปลงนี้มีผลกับ หนาเว็บเพจอืนที่ใชเทมเพลตนี้ดวยหรือไม ่ 1. เปดเทมเพลตที่สรางไวแลวขึ้นมาที่จะปรับปรุง 2. ทําการแกไขเทมเพลตตามความตองการ เสร็จแลวทําการ Save 3. Click Mouse ปุม Yes เพื่อปรับปรุงหนาเว็บเพจที่ใชเทมเพลตนี้ทั้งหมดตามการเปลี่ยนแปลงที่ เกิดขึ้น โดยในชอง Lock in ใหเราระบุเพิ่มเติมวาจะกําหนดใหปรับปรุงไฟลที่ใชเทมเพลตใน เว็บไซตที่เราเลือก หรือใหปรับปรุงทุกไฟลที่ใชเทมเพลตในเว็บไซตที่เรากําลังเปดอยูนี้ก็ได 4. จากนั้นจะมีรายงานผลการ Update ไฟล Click Mouse ปุม Close เพือปดหนาตางนี้ ่ หากในการแกไขเทมเพลตเราไมไดกําหนดใหการเปลี่ยนแปลงนี้มีผลกับหนาเว็บเพจอื่น แต ตอมาภายหลังตองการใหมีผล ก็ทําไดโดยเลือกคําสั่ง Modify > Templates > Update Pages Training Service (ICT Center)
• 25. ดวย Adobe Dreamweaver CS3 หนาที่ 24 รูปการ Save เทมเพลตเมื่อมีการปรับปรุงแกไข Training Service (ICT Center)