dream weaver cs3
TRANSCRIPT
เอกสารประกอบการอบรม เทคนคการสราง และออกแบบ 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 พเศษ คอ หรอ กดปม 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
Menu Bar
Object Bar
Status Bar
Properties
Panel Group
Tool Bar
หนาจอแสดงผล
แสดงสวนประกอบของ 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 ตาง ๆ ดงน
Computer
Folder ยอย
(เกบไฟลรป)
(หนวยงาน)
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
รปแสดงสวนประกอบของตาราง ขนตอนการสรางตารางสามารถทาไดโดยเลอก Object ทแทบ Object แลวกาหนดคา
ตาง ๆ ของ ตารางดงรป
Rows > จานวนแถวทตองการ Column > จานวนคอลมนทตองการ Width > ความกวางของตาราง Border > ความหนาของขอบตาราง Cell Padding >ระยะระหวางขอความกบขอบตาราง
Cell
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
Training Service (ICT Center)
รปการเลอกเทมเพลตทจะนามาใชงาน
รปแสดงหนาจอเมอเปดเทมเพลตมาใชงาน
เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกนามาเพมเขาไปในหนาเวบใหม ในสวนทเปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเวบเพจในสวนทแกไขไดเทานน
การปรบปรงแกไขเทมเพลต เมอใดทเราทาการแกไขเทมเพลต Dreamweaver จะถามวาเราตองการใหการเปลยนแปลงนมผลกบหนาเวบเพจอนทใชเทมเพลตนดวยหรอไม
1. เปดเทมเพลตทสรางไวแลวขนมาทจะปรบปรง 2. ทาการแกไขเทมเพลตตามความตองการ เสรจแลวทาการ Save 3. Click Mouse ปม Yes เพอปรบปรงหนาเวบเพจทใชเทมเพลตนทงหมดตามการเปลยนแปลงท
เกดขน โดยในชอง Lock in ใหเราระบเพมเตมวาจะกาหนดใหปรบปรงไฟลทใชเทมเพลตในเวบไซตทเราเลอก หรอใหปรบปรงทกไฟลทใชเทมเพลตในเวบไซตทเรากาลงเปดอยนกได
4. จากนนจะมรายงานผลการ Update ไฟล Click Mouse ปม Close เพอปดหนาตางน หากในการแกไขเทมเพลตเราไมไดกาหนดใหการเปลยนแปลงนมผลกบหนาเวบเพจอน แต ตอมาภายหลงตองการใหมผล กทาไดโดยเลอกคาสง Modify > Templates > Update Pages
เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 24
รปการ Save เทมเพลตเมอมการปรบปรงแกไข
Training Service (ICT Center)