25
เอกสารประกอบการอบรม เทคนิคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 สารบัญ Training Service (ICT CENTER)

Dreamwever cs3

Embed Size (px)

Citation preview

Page 1: Dreamwever cs3

เอกสารประกอบการอบรม เทคนคการสราง และออกแบบ Website ดวย

Adobe Dreamweaver CS3

สารบญ Training Service (ICT CENTER)

Page 2: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 3: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 2

สารบญ (ตอ)

การสรางเทมเพลตจากหนาเวบทออกแบบไวแลว ..................................................................................... 20 

การกาหนดพนททเปลยนแปลงไดในเทมเพลต .......................................................................................... 21 

การนาเทมเพลตมาใชงาน ............................................................................................................................... 22 

การปรบปรงแกไขเทมเพลต ............................................................................................................................ 23 

 

Training Service (ICT Center)

Page 4: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 5: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 6: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 7: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 8: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 7

การเรมกาหนดโครงรางของเวบ

กอนดาเนนการสรางเวบเพจ ขนแรกควรกาหนดใหขอมลตางๆ ทเกยวของอยใน Folder เดยวกน เพองายตอคนหาและจดเกบ ตวอยางเชนทาเวบเพจของหนวยงานกอนอนเราควรสราง Folder ชอของหนวยงานกอนอาจเปนภาษาองกฤษหรอภาษาไทยกได แลวใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder ยอย เพอใชสาหรบแยกเกบไฟลตาง ๆ เปนหมวดหม เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ

Training Service (ICT Center)

Page 9: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 10: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 11: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 12: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 11

การกาหนดรายละเอยดของหนาเวบเพจ กอนเรมกาหนดรายละเอยดตางๆ ใหหนาเวบ เราควรเรมโดยการกาหนดรายละเอยดของหนา

ยนขอมล

เวบกอน โดยมขนตอนดงน 1. เลอกเมน Modify > Page Properties 2. ปรบเปล

Training Service (ICT Center)

Page 13: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 14: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 13

การกาหนดขนาดของเซลล 1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดใน

กรณทเลอกตารางไวกอนแลว) ให Click ท Properties เพอกาหนดขนาดของเซลล ดงรป

การเลอกเซลล และ การกาหนดสพน

1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอกตารางไวกอนแลว)

2. ให Click ท Properties เพอกาหนดส โดยเลอกท BG แลวกาหนดเลอกส (ใหเลอกสเขยว) หรอสามารถพมพรหสสได

Training Service (ICT Center)

Page 15: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 14

การผสานเซลล (Marge Cell) 1. ให Click เลอกเซลลทตองการ ผสาน 2. Click Properties แลวเลอก เพอกาหนดการผสานเซลล ดงรป

การแทรกรปภาพลงตาราง 1. ให Click เลอกเซลลทตองการแทกรป 2. เลอกเมน Insert > image ดงรป

เลอกหาทเกบของรป แลวเลอกรปทตองการแทรกลงตาราง ดงรป

Training Service (ICT Center)

Page 16: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 17: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 16

แสดงขนตอนการแทรกแถวและคอลมน

แสดงการแทรก Column หลงจากแทรก Rows จานวน 2 Rows หนาจอทไดแสดงดงรป

Training Service (ICT Center)

Page 18: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 19: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 20: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 19

รปแสดงการเชอมโยงกบ e-Mail

การทาจดลงคเรยกเวบไซตอน

ใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบดวยคาบงคบ คอ http://ชอเวบ ทงนสามารถระบ

Target =_blank เพอเปดหนาตางใหมในการแสดงผล

Training Service (ICT Center)

Page 21: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 22: Dreamwever cs3

เทคนคการสราง และออกแบบ 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)

Page 23: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 22

ไปใชกบหนาเวบเพจ หนาเวบเพจนนจะแกไดเฉพาะพนททถกกาหนดไวใหเปลยนแปลงไดเทานน

การนาเทมเพลตมาใชงาน

1. เปดหนาเวบเพจเปลาขนมา 2. เลอกแทบ Template

เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกนามาเพมเขาไปในหนาเวบใหม ในสวนทเปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเวบเพจในสวนทแกไขไดเทานน

รปการนาเทมเพลตมาใชงาน

เลอกแทบ Template

Training Service (ICT Center)

Page 24: Dreamwever cs3

เทคนคการสราง และออกแบบ 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

Page 25: Dreamwever cs3

เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3 หนาท 24

รปการ Save เทมเพลตเมอมการปรบปรงแกไข

Training Service (ICT Center)