SlideShare a Scribd company logo

Dream weaver cs3

F
first351
1 of 25
Downloaded 62 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
เอกสารประกอบการอบรม เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 สารบัญ Training Service (ICT CENTER)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 2 สารบัญ (ตอ) การสรางเทมเพลตจากหนาเว็บที่ออกแบบไวแลว .....................................................................................20  การกําหนดพื้นที่ที่เปลี่ยนแปลงไดในเทมเพลต ..........................................................................................21  การนําเทมเพลตมาใชงาน ............................................................................................................................... 22  การปรับปรุงแกไขเทมเพลต ............................................................................................................................23    Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย 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 พิเศษ คือ &nbsp; หรือ กดปุม 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)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 7 การเริ่มกําหนดโครงรางของเว็บ กอนดําเนินการสรางเว็บเพจ ขั้นแรกควรกําหนดใหขอมูลตางๆ ที่เกี่ยวของอยูใน Folder เดียวกัน เพื่องายตอคนหาและจัดเก็บ ตัวอยางเชนทําเว็บเพจของหนวยงานกอนอื่นเราควรสราง Folder ชื่อของ หนวยงานกอนอาจเปนภาษาอังกฤษหรือภาษาไทยก็ได แลวใน Folder หนวยงานคอยสราง Folder ยอยอีกที อาจประกอบดวยหลาย Folder ยอย เพื่อใชสําหรับแยกเก็บไฟลตาง ๆ เปนหมวดหมู เชน ไฟลรูปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 9 การตั้งคาเพื่อใหอานภาษาไทยได หลังจากที่ทําการติดตั้งโปรแกรม Dreamweaver แลว โปรแกรมจะไมรูจัก Font ภาษาไทย เนื่องจาก Dreamweaver ไมสนับสนุนภาษาไทย ดังนั้นเราตองติดตั้ง Font ภาษาไทยกอน ซึ่งสามารถ Download ไดที่ http://www.thaiware.com/softwae/develop/DV00250.htm ซึ่งเปนโปรแกรมทีถูกพัฒนาจาก ่ คนไทย เมื่อ Download ไดแลวใหทําการติดตั้งเพิ่มเติม เพื่อใหโปรแกรมสามารถอานภาษาไทยได หลังจากติดตั้ง Font ภาษาไทยลงเครื่องแลว เมื่อเปดโปรแกรม Dreamweaver มาใชงานใหเลือก คําสั่งดังนี้ เพือตั้ง Font ใหมใหเอกสาร ่ 1. เลือกเมนู Edit > เลือกคําสั่ง Preferences 2. เลือก Fonts > Font Setting > เลือก Thai Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 11 การกําหนดรายละเอียดของหนาเว็บเพจ กอนเริ่มกําหนดรายละเอียดตางๆ ใหหนาเว็บ เราควรเริ่มโดยการกําหนดรายละเอียดของหนา เว็บกอน โดยมีขั้นตอนดังนี้ 1. เลือกเมนู Modify > Page Properties 2. ปรับเปลี่ยนขอมูล Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 12 การสราง Table การใชตารางเหมาะสําหรับการนําเสนอขอมูลจํานวนมาก เพื่อความสะดวกในการจัดการขอมูล และความเปนสัดสวน ควรจัดระบบการนําเสนอขอมูลของหนาเว็บเพจโดยการใชตารางเปนตัวจัดการในการจัด วางขอมูลในแตละหนาเว็บเพจ กอนอืนเรามาทําความรูจักกับสวนประกอบของตารางกอน ่ Column Row Cell รูปแสดงสวนประกอบของตาราง ขั้นตอนการสรางตารางสามารถทําไดโดยเลือก Object ทีแท็บ Object แลวกําหนดคา ่ ตาง ๆ ของ ตารางดังรูป Rows > จํานวนแถวที่ตองการ Column > จํานวนคอลัมนทตองการ ี่ Width > ความกวางของตาราง Border > ความหนาของขอบตาราง Cell Padding >ระยะระหวางขอความกับขอบ ตาราง Cell Spacing > ระยะระหวางแตละเซลลในตาราง เมื่อกําหนดขอมูลเสร็จแลว Click ปุม OK จะไดขอมูลตารางตามที่กําหนด Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 13 การกําหนดขนาดของเซลล 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) ให Click ที่ Properties เพื่อกําหนดขนาดของเซลล ดังรูป การเลือกเซลล และ การกําหนดสีพื้น 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) 2. ให Click ที่ Properties เพื่อกําหนดสี โดยเลือกที่ BG แลวกําหนดเลือกสี (ใหเลือกสี เขียว) หรือสามารถพิมพรหัสสีได Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 14 การผสานเซลล (Marge Cell) 1. ให Click เลือกเซลลที่ตองการ ผสาน 2. Click Properties แลวเลือก เพื่อกําหนดการผสานเซลล ดังรูป การแทรกรูปภาพลงตาราง 1. ให Click เลือกเซลลที่ตองการแทกรูป 2. เลือกเมนู Insert > image ดังรูป เลือกหาที่เก็บของรูป แลวเลือกรูปที่ตองการแทรกลงตาราง ดังรูป  Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 16 แสดงขั้นตอนการแทรกแถวและคอลัมน แสดงการแทรก Column หลังจากแทรก Rows จํานวน 2 Rows หนาจอที่ไดแสดงดังรูป Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 18 การทําลิงคเชื่อมไฟล การทําลิงคเชื่อมไฟล สามารถทําไดหลายฟอรแมต ทั้งไฟลสกุล HTML และอื่นๆ โดยไฟลอื่นๆ จะ ทํางานในลักษณะ Download ไฟล 1. ทําแถบสีคลุมขอความที่ใชเปนจุดลิงค 2. สังเกตที่แถบ Properties จะเห็นรายการ Link .. พิมพชื่อไฟลที่ตองการใหลิงค ชื่อไฟลอาจจะเปนไฟล .html หรือ ไฟลใดๆ ก็ได โดยจะตองระบุ "นามสกุล" ของไฟลดวยเสมอ (หมาย เหตุ ระวังเรื่องพิมพชื่อไฟลตวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน) สามารถใชปุมสัญลักษณรูปแฟมสี ั เหลือง เลือกไฟลได เมื่อกําหนดชื่อไฟลทตองการลิงคจากรายการ Link เรียบรอยแลว ใหนําเมาสมาคลิกในพื้นที่ ี่ ทํางาน เพื่อยืนยันการกําหนดลิงค การยกเลิกลิงค 1. ใหคลิกเมาส ณ จุดลิงคเดิม 2. ลบรายชื่อไฟลออกจากรายการ Link การทําลิงค 1. ทําแถบสีคลุมขอความที่ตองการ 2. สังเกตที่แถบ Properties จะเห็นรายการ Link 3. พิมพคําบังคับในการทําจุดลิงคเพื่อสงเมลคือ mailto: แลวตามดวย E-Mail Address ของผูจัดทํา เอกสารเว็บ (หมายเหตุ ระวังเรื่องพิมพชื่อไฟลตัวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน และใหพิมพ ติดกันทั้งหมด) ตัวอยาง ตองการทําลิงคเพื่อใหสงเมลไปยัง http://ictcenter.spu.ac.thใหระบุคาดังนี้ เลือกขอความที่จะลิงค Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 19 รูปแสดงการเชื่อมโยงกับ e-Mail การทําจุดลิงคเรียกเว็บไซตอื่น ใชหลักการเดียวกับการทําลิงคเชื่อมไฟล แตใหระบุดวยคําบังคับ คือ http://ชื่อเว็บ ทั้งนี้สามารถระบุ Target =_blank เพื่อเปดหนาตางใหมในการแสดงผล Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 22 ไปใชกับหนาเว็บเพจ หนาเว็บเพจนั้น จะแกไดเฉพาะพื้นที่ที่ถูกกําหนดไวให เปลี่ยนแปลงไดเทานั้น การนําเทมเพลตมาใชงาน 1. เปดหนาเว็บเพจเปลาขึ้นมา 2. เลือกแท็บ Template เลือกชื่อเทมเพลตที่ตองการ และ click mouse ปุม Select เนือหาที่มีในเทมเพล ้ ตจะถูกนํามาเพิ่มเขาไปในหนาเว็บใหม ในสวนที่เปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเว็บเพจในสวนที่แกไขไดเทานั้น รูปการนําเทมเพลตมาใชงาน เลือกแท็บ Template Training Service (ICT Center)
เทคนิคการสราง และออกแบบ Website ดวย 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)
เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 24 รูปการ Save เทมเพลตเมื่อมีการปรับปรุงแกไข Training Service (ICT Center)

More Related Content

PDF
รายงาน window
NooLuck
 
PPTX
Dreamweaver
Mevenwen Singollo
 
PDF
การสร้่างเว็บด้วยภาษา html
CC Nakhon Pathom Rajabhat University
 
PDF
Doc2
phochai
 
PDF
ภาษา css
CC Nakhon Pathom Rajabhat University
 
PDF
Designing of Web-Based Instruction of Education
khon Kaen University
 
PDF
PHP & Dreamweaver ch03
Webidea Petchtharat
 
PDF
หลักการออกแบบเว็บไซต์
CC Nakhon Pathom Rajabhat University
 
รายงาน window
NooLuck
 
Dreamweaver
Mevenwen Singollo
 
การสร้่างเว็บด้วยภาษา html
CC Nakhon Pathom Rajabhat University
 
Doc2
phochai
 
ภาษา css
CC Nakhon Pathom Rajabhat University
 
Designing of Web-Based Instruction of Education
khon Kaen University
 
PHP & Dreamweaver ch03
Webidea Petchtharat
 
หลักการออกแบบเว็บไซต์
CC Nakhon Pathom Rajabhat University
 

What's hot (16)

PPT
ICT with Web site
Boonlert Aroonpiboon
 
PPT
20100803 wordpress-com
Boonlert Aroonpiboon
 
PPT
Wordpress com
anupongjongjirawat
 
PPT
20100803 wordpress-com
thanischet
 
PPT
wordpress
dawnamex
 
PPT
20100803 wordpress-com
ajangkana
 
PPT
20100803 wordpress-com
krittykrit
 
PDF
ภาษา html5
CC Nakhon Pathom Rajabhat University
 
PDF
รายงาน คอม
NooLuck
 
PDF
Webbasic
khon Kaen University
 
DOC
Chapter7
Surapong Jakang
 
DOC
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Champ Wachwittayakhang
 
PDF
ภาษา xhtml
CC Nakhon Pathom Rajabhat University
 
PDF
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Dreamweaver CS6
Khon Kaen University
 
PDF
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
Khon Kaen University
 
PDF
Lesson1
krunueng1
 
ICT with Web site
Boonlert Aroonpiboon
 
20100803 wordpress-com
Boonlert Aroonpiboon
 
Wordpress com
anupongjongjirawat
 
20100803 wordpress-com
thanischet
 
wordpress
dawnamex
 
20100803 wordpress-com
ajangkana
 
20100803 wordpress-com
krittykrit
 
ภาษา html5
CC Nakhon Pathom Rajabhat University
 
รายงาน คอม
NooLuck
 
Webbasic
khon Kaen University
 
Chapter7
Surapong Jakang
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Champ Wachwittayakhang
 
ภาษา xhtml
CC Nakhon Pathom Rajabhat University
 
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Dreamweaver CS6
Khon Kaen University
 
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
Khon Kaen University
 
Lesson1
krunueng1
 
Ad

Similar to Dream weaver cs3 (20)

PDF
Dreamwever cs3
สุเมธี​​​​ ตี่พนมโอรัล / សុមេធី ទីភ្នំឱរ៉ាល់ (Sumedhi TyPhnomAoral)
 
PDF
Dream CS3
lemonleafgreen
 
PDF
การสร้างเว็บด้วย Macromedia dreamweaver8
doraemonbookie
 
PDF
โปรแกรม dream 8
kruppp46
 
PDF
New
sirinet
 
PDF
Yuu
sirinet
 
PDF
Ten
sirinet
 
PDF
รออกแบบเว็บไซต์
sirinet
 
PDF
ดรีม
sirinet
 
PDF
หวิว
ViewMik
 
PDF
Best
sirinet
 
PDF
โบ
sirinet
 
PDF
หมวย
sirinet
 
PDF
หมวย
sirinet
 
PDF
นุ๊ก
sirinet
 
PPT
หน่วยการเรียนรู้ที่ 6 dw8
arachaporn
 
PDF
คู่มือการใช้ Dream cs3
wanida401
 
PPTX
Website ett
Phranakornsoft
 
PPT
Dreamweaver
guesta2c119
 
PDF
เอกสารประกอบการสอน Dreamweaver8 ม.6
ไกรลาศ จิบจันทร์
 
Dreamwever cs3
สุเมธี​​​​ ตี่พนมโอรัล / សុមេធី ទីភ្នំឱរ៉ាល់ (Sumedhi TyPhnomAoral)
 
Dream CS3
lemonleafgreen
 
การสร้างเว็บด้วย Macromedia dreamweaver8
doraemonbookie
 
โปรแกรม dream 8
kruppp46
 
New
sirinet
 
Yuu
sirinet
 
Ten
sirinet
 
รออกแบบเว็บไซต์
sirinet
 
ดรีม
sirinet
 
หวิว
ViewMik
 
Best
sirinet
 
โบ
sirinet
 
หมวย
sirinet
 
หมวย
sirinet
 
นุ๊ก
sirinet
 
หน่วยการเรียนรู้ที่ 6 dw8
arachaporn
 
คู่มือการใช้ Dream cs3
wanida401
 
Website ett
Phranakornsoft
 
Dreamweaver
guesta2c119
 
เอกสารประกอบการสอน Dreamweaver8 ม.6
ไกรลาศ จิบจันทร์
 
Ad

Dream weaver cs3

  • 2. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 2 สารบัญ (ตอ) การสรางเทมเพลตจากหนาเว็บที่ออกแบบไวแลว .....................................................................................20  การกําหนดพื้นที่ที่เปลี่ยนแปลงไดในเทมเพลต ..........................................................................................21  การนําเทมเพลตมาใชงาน ............................................................................................................................... 22  การปรับปรุงแกไขเทมเพลต ............................................................................................................................23    Training Service (ICT Center)
  • 4. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย 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 พิเศษ คือ &nbsp; หรือ กดปุม 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. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 7 การเริ่มกําหนดโครงรางของเว็บ กอนดําเนินการสรางเว็บเพจ ขั้นแรกควรกําหนดใหขอมูลตางๆ ที่เกี่ยวของอยูใน Folder เดียวกัน เพื่องายตอคนหาและจัดเก็บ ตัวอยางเชนทําเว็บเพจของหนวยงานกอนอื่นเราควรสราง Folder ชื่อของ หนวยงานกอนอาจเปนภาษาอังกฤษหรือภาษาไทยก็ได แลวใน Folder หนวยงานคอยสราง Folder ยอยอีกที อาจประกอบดวยหลาย Folder ยอย เพื่อใชสําหรับแยกเก็บไฟลตาง ๆ เปนหมวดหมู เชน ไฟลรูปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ Training Service (ICT Center)
  • 9. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 9 การตั้งคาเพื่อใหอานภาษาไทยได หลังจากที่ทําการติดตั้งโปรแกรม Dreamweaver แลว โปรแกรมจะไมรูจัก Font ภาษาไทย เนื่องจาก Dreamweaver ไมสนับสนุนภาษาไทย ดังนั้นเราตองติดตั้ง Font ภาษาไทยกอน ซึ่งสามารถ Download ไดที่ http://www.thaiware.com/softwae/develop/DV00250.htm ซึ่งเปนโปรแกรมทีถูกพัฒนาจาก ่ คนไทย เมื่อ Download ไดแลวใหทําการติดตั้งเพิ่มเติม เพื่อใหโปรแกรมสามารถอานภาษาไทยได หลังจากติดตั้ง Font ภาษาไทยลงเครื่องแลว เมื่อเปดโปรแกรม Dreamweaver มาใชงานใหเลือก คําสั่งดังนี้ เพือตั้ง Font ใหมใหเอกสาร ่ 1. เลือกเมนู Edit > เลือกคําสั่ง Preferences 2. เลือก Fonts > Font Setting > เลือก Thai Training Service (ICT Center)
  • 11. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 11 การกําหนดรายละเอียดของหนาเว็บเพจ กอนเริ่มกําหนดรายละเอียดตางๆ ใหหนาเว็บ เราควรเริ่มโดยการกําหนดรายละเอียดของหนา เว็บกอน โดยมีขั้นตอนดังนี้ 1. เลือกเมนู Modify > Page Properties 2. ปรับเปลี่ยนขอมูล Training Service (ICT Center)
  • 13. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 13 การกําหนดขนาดของเซลล 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) ให Click ที่ Properties เพื่อกําหนดขนาดของเซลล ดังรูป การเลือกเซลล และ การกําหนดสีพื้น 1. ให Click เลือกเซลลที่ตองการ หรือ Click ที่แท็ก <td> ที่มุมซายของหนาจอก็ได (ใชไดใน กรณีที่เลือกตารางไวกอนแลว) 2. ให Click ที่ Properties เพื่อกําหนดสี โดยเลือกที่ BG แลวกําหนดเลือกสี (ใหเลือกสี เขียว) หรือสามารถพิมพรหัสสีได Training Service (ICT Center)
  • 15. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 14 การผสานเซลล (Marge Cell) 1. ให Click เลือกเซลลที่ตองการ ผสาน 2. Click Properties แลวเลือก เพื่อกําหนดการผสานเซลล ดังรูป การแทรกรูปภาพลงตาราง 1. ให Click เลือกเซลลที่ตองการแทกรูป 2. เลือกเมนู Insert > image ดังรูป เลือกหาที่เก็บของรูป แลวเลือกรูปที่ตองการแทรกลงตาราง ดังรูป  Training Service (ICT Center)
  • 16. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 16 แสดงขั้นตอนการแทรกแถวและคอลัมน แสดงการแทรก Column หลังจากแทรก Rows จํานวน 2 Rows หนาจอที่ไดแสดงดังรูป Training Service (ICT Center)
  • 18. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 18 การทําลิงคเชื่อมไฟล การทําลิงคเชื่อมไฟล สามารถทําไดหลายฟอรแมต ทั้งไฟลสกุล HTML และอื่นๆ โดยไฟลอื่นๆ จะ ทํางานในลักษณะ Download ไฟล 1. ทําแถบสีคลุมขอความที่ใชเปนจุดลิงค 2. สังเกตที่แถบ Properties จะเห็นรายการ Link .. พิมพชื่อไฟลที่ตองการใหลิงค ชื่อไฟลอาจจะเปนไฟล .html หรือ ไฟลใดๆ ก็ได โดยจะตองระบุ "นามสกุล" ของไฟลดวยเสมอ (หมาย เหตุ ระวังเรื่องพิมพชื่อไฟลตวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน) สามารถใชปุมสัญลักษณรูปแฟมสี ั เหลือง เลือกไฟลได เมื่อกําหนดชื่อไฟลทตองการลิงคจากรายการ Link เรียบรอยแลว ใหนําเมาสมาคลิกในพื้นที่ ี่ ทํางาน เพื่อยืนยันการกําหนดลิงค การยกเลิกลิงค 1. ใหคลิกเมาส ณ จุดลิงคเดิม 2. ลบรายชื่อไฟลออกจากรายการ Link การทําลิงค 1. ทําแถบสีคลุมขอความที่ตองการ 2. สังเกตที่แถบ Properties จะเห็นรายการ Link 3. พิมพคําบังคับในการทําจุดลิงคเพื่อสงเมลคือ mailto: แลวตามดวย E-Mail Address ของผูจัดทํา เอกสารเว็บ (หมายเหตุ ระวังเรื่องพิมพชื่อไฟลตัวพิมพใหญ ตัวพิมพเล็ก ถือวาเปนคนละตัวกัน และใหพิมพ ติดกันทั้งหมด) ตัวอยาง ตองการทําลิงคเพื่อใหสงเมลไปยัง http://ictcenter.spu.ac.thใหระบุคาดังนี้ เลือกขอความที่จะลิงค Training Service (ICT Center)
  • 20. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 19 รูปแสดงการเชื่อมโยงกับ e-Mail การทําจุดลิงคเรียกเว็บไซตอื่น ใชหลักการเดียวกับการทําลิงคเชื่อมไฟล แตใหระบุดวยคําบังคับ คือ http://ชื่อเว็บ ทั้งนี้สามารถระบุ Target =_blank เพื่อเปดหนาตางใหมในการแสดงผล Training Service (ICT Center)
  • 21. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 22 ไปใชกับหนาเว็บเพจ หนาเว็บเพจนั้น จะแกไดเฉพาะพื้นที่ที่ถูกกําหนดไวให เปลี่ยนแปลงไดเทานั้น การนําเทมเพลตมาใชงาน 1. เปดหนาเว็บเพจเปลาขึ้นมา 2. เลือกแท็บ Template เลือกชื่อเทมเพลตที่ตองการ และ click mouse ปุม Select เนือหาที่มีในเทมเพล ้ ตจะถูกนํามาเพิ่มเขาไปในหนาเว็บใหม ในสวนที่เปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเว็บเพจในสวนที่แกไขไดเทานั้น รูปการนําเทมเพลตมาใชงาน เลือกแท็บ Template Training Service (ICT Center)
  • 24. เทคนิคการสราง และออกแบบ Website ดวย 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. เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาที่ 24 รูปการ Save เทมเพลตเมื่อมีการปรับปรุงแกไข Training Service (ICT Center)