DWHandsOn_CS4_Dept

แบบฝกหัด: การสรางเว็บไซตด ว ย Adobe Dreamweaver CS4 โดย สุวมิ ล คงศักดิ์ตระกูลคําอธบิ ายหลกั สตู ร: ศกึ ษาการใชโปรแกรม Adobe Dreamweaver CS4 ซ่งึ เปนโปรแกรมสาํ เร็จรปู ทีช่ วยในการสรา ง เวบ็ ไซตไดอยางงายๆ โดยสามารถนาํ ขอความ รูปภาพ ไฟลมลั ติมีเดยี ที่ตองการมาประกอบเปน หนาเวบ็ เพจ และเขา ใจถึงการออกแบบเว็บไซตโดยการใชเ ทมเพลต ซง่ึ ทาํ ใหง ายตอ การแกไ ข รวมทง้ั การสรางเว็บไซตแบบใช Cascading Style Sheetวตั ถุประสงค: เพื่อใหผเู ขารบั การอบรมสามารถสรา งเวบ็ ไซตดวย Adobe Dreamweaver CS4 ไดSoftware:  Adobe Dreamweaver CS4  Flash Slideshow Maker ProfessionalDocument Files: ไฟลทใี่ ชในการทําแบบฝกหดั จัดเกบ็ ไวใน folder ช่ือ TrainingDW ซึ่งภายในจะมี folder ดังน้ี  Source จดั เก็บไฟลเอกสาร Source_TrainingDW.docx ท่จี ะใชในการทําแบบฝกหัด  Images จัดเก็บไฟลร ปู ภาพ  Documents จดั เก็บไฟลเ อกสาร  css จดั เกบ็ ไฟล Style Sheet  activity จดั เกบ็ ไฟลร ปู ภาพกิจกรรมเอกสารประกอบการอบรม:  พนั จันทร ธนวัฒนเสถยี ร. “ออกแบบและสรา งเว็บสวยดวย Dreamweaver CS4 ” บริษัท ซัคเซส มเี ดีย จํากัด ธนั วาคม 2552.Module 1: การสรา งเวบ็ ไซต แบบฝกหดั ที่ 1: การสรางเวบ็ ไซต 1. เปด โปรแกรม Adobe Dreamweaver CS4 โดยเรียกที่ Start >> Program >> Adobe Master Collection CS4 >> Adobe Dreamweaver CS4 2. คลกิ เลอื กคาํ ส่ัง HTML จะแสดงหนา เอกสาร HTML ใหมท่ีถูกสรางขึ้น

แบบฝก หัด: การสรางเว็บไซตดว ย Adobe Dreamweaver CS43. คลกิ เมนู Site >> New Site… คลิกเลือกแท็บ Advanced กาํ หนดรายละเอียดของเวบ็ ไซตท่สี รางดังนี้  Site Name :: TrainingDW  Local root folder :: คลกิ เลือกไปท่ี folder TrainingDW ทอี่ ยู Desktop4. คลกิ ปมุ OK5. ท่หี นาตาง Panel Group จะเปด Panel Files แสดงชอ่ื เวบ็ ไซตเปน TrainingDWModule 2: การสรา งเว็บเพจ index.html แบบฝกหดั ท่ี 1: การสรา งเว็บเพจ 1. ท่ี Panel Files คลิกขวาท่ี folder Site TrainingDW เลอื ก New File 2. ตงั้ ชอ่ื ไฟลใ หมเปน index.html กดปุม Enter 2 3. double click ท่ไี ฟล index.html เพื่อเปดไฟล 4. ท่ี Toolbar ตงั้ ชื่อ Title ของเวบ็ เพจเปน SWU Computer Centerสวุ มิ ล คงศักดติ์ ระกูล สาํ นกั คอมพิวเตอร มศว

แบบฝกหัด: การสรางเวบ็ ไซตดว ย Adobe Dreamweaver CS4แบบฝก หัดท่ี 2: การออกแบบเลยเ อาท การวางเลยเ อาทเ ปนการจัดแบง พื้นท่ีบนหนา เว็บใหเ ปน สดั สว น กอนวางเนอ้ื หา เพ่อื ที่จะ ควบคุมเน้ือหาใหอ ยใู นกรอบพ้นื ทที่ จี่ ัดแบง ไว1. ท่ี Insert Panel เลือกแท็บ Layout คลิกเลอื ก2. กําหนดรายละเอียดของตารางดังน้ี  Rows : 1  Columns : 2  Table width : 95 %  Border thickness : 0 pixels  Cell padding : 0  Cell spacing : 03. คลิกปมุ OK4. ท่ี Property Inspector ของ Table ใหกําหนด Align เปน Center5. คลกิ เมาสเ ลือกที่ Column ดา นขวา เพ่อื กําหนดความกวางของ Column ท่ี Property Inspector ชอ ง W กาํ หนดขนาดเปน 35%สุวิมล คงศักดติ์ ระกูล สํานักคอมพิวเตอร มศว 3

แบบฝกหัด: การสรางเว็บไซตด ว ย Adobe Dreamweaver CS4แบบฝกหัดท่ี 3: การใช Cascading Style Sheet บน Panel CSS1. ในกรณที ี่ไดสรางไฟล .css ไวแ ลว ใหทาํ การลงิ คไ ฟล .css มาใช โดยคลกิ ท่ี STYLES2. คลกิ ปมุ Browse… ที่ชอง File/URL เพอื่ คนหาไฟล .css3. ทห่ี นา ตาง Select Style Sheet File ทําการเลือกไฟลชื่อ style_sheet.css ใน folder css4. ที่ Panel CSS STYLES จะแสดงชือ่ Style Sheet5. double click ท่ี Style ช่ือ Topic สามารถทาํ การแกไขรปู แบบการแสดงผลของ Style ได โดยเลือกจาก ฟอรม โดยไมจ ําเปนตอ งเขยี น Code ขน้ึ มาเอง6. คลกิ ปุม OKแบบฝก หดั ที่ 4: การใสข อความบนหนา เว็บเพจ การใสข อความบนหนา เว็บเพจคลายกบั การพมิ พเ อกสารในโปรแกรม Word โดยคลกิ บนพ้ืนที่ทํางาน แลว ทําการพิมพขอความลงบนหนาเว็บไดเ ลย การข้นึ ยอ หนา ใหม ใหก ดปมุ Enter การขึน้ บรรทัดใหม ใหก ดปมุ Shift+Enter หรือ ท่ี Insert Panel เลอื กแทบ็ text คลิกเลอื กสุวมิ ล คงศักดต์ิ ระกูล สํานักคอมพิวเตอร มศว 4

แบบฝกหดั : การสรางเว็บไซตดวย Adobe Dreamweaver CS4 การเวน วรรคระหวา งตัวอักษร ในการการสรา งเวบ็ ไมสามารถเคาะ Space เพ่อื เวนวรรคหลายๆ คร้งัไดเ หมอื นโปรแกรม Word ได ดงั นน้ั หากตองการเวน วรรคระหวางตัวอกั ษรมากกวา 1 ครั้ง ใหกดปมุCtrl+Shift+Space หรอื ท่ี Insert Panel เลอื กแท็บ text คลิกเลือก การจัดรูปแบบขอความ ใหทําการ Select ขอความท่ตี อ งการจัดรูปแบบใหเกดิ แถบสดี ํา โดยกาํ หนดคาใน Property Inspectorคลกิ เลือก เพือ่ กาํ หนด ตวั หนา ตวั เอียง การใส Bulletการจัดยอหนา การเรียกใช Style Sheet กับขอความ ใหทาํ การ Select ขอความทต่ี องการจัดรูปแบบใหเ กดิ แถบสดี ําโดยกําหนดคาใน Property Inspector ท่ชี อง class1. คลิกเมาสท ่ีตาํ แหนง Row ที่ 1 Column ที่ 1 ของ Table Layout พิมพข อความ CC information2. กดปุม Enter เพือ่ ขน้ึ ยอ หนา ใหม3. ทวี่ นิ โดวเอกสาร- Source_TrainingDW.docx ทําการ copy ขอ ความในยอ หนา The Computer Center ทงั้ หมดถงึ คําวา by the Center. แลว ทําการ paste4. ทําการ Select ขอความ CC information เลอื กใช Class ชอ่ื Topic5. ทาํ การ Select ขอความสวนรายละเอยี ด เลือกใช Class ชือ่ Text6. กดปมุ Enter เพอื่ ข้นึ ยอหนาใหม7. พิมพขอ ความ Announcement เลือกใช Class ช่อื Topic กดปมุ Enter เพอ่ื ขน้ึ ยอหนาใหม8. คลกิ เลือก พิมพขอ ความรายละเอยี ดของขา วที่ 19. เลอื กใช Class ชื่อ text10. กดปุม Enter พมิ พขอ ความรายละเอยี ดขา วถัดไป11. พิมพขอ ความ News & Events เลอื กใช Class ชอ่ื Topic12. กดปมุ Enter เพ่อื ข้ึนยอหนา ใหมสุวมิ ล คงศักด์ติ ระกูล สาํ นกั คอมพิวเตอร มศว 5

แบบฝกหดั : การสรา งเวบ็ ไซตด วย Adobe Dreamweaver CS4แบบฝก หดั ที่ 5: การใสตารางบนหนา เว็บเพจ การใสตารางเหมาะสาํ หรับการนําเสนอขอ มลู ที่ตองการจดั ใหเ ปนระเบยี บหรือเพื่อแบงแยก ขอความกบั รูปภาพไดอยา งชดั เจน โดยอยใู นรปู ของแถว และคอลมั น1. คลกิ เมาสยงั ตาํ แหนงท่ตี องการวางตาราง ท่ี Insert Panel เลือกแท็บ common คลิกเลือก2. กาํ หนดตาราง  Rows : 2  Columns : 2  Table width : 100 %  Border thickness : 0 pixels  Cell padding : 2  Cell spacing : 23. คลกิ ปมุ OK การเพม่ิ จํานวนแถวของตาราง ใหนําเมาสไปคลกิ ในเซลลสุดทายของตาราง กดปุม Tab จะไดแถวใหม ตอ จากแถวสดุ ทายของตาราง การลบตาราง คลกิ เลือกตารางทั้งตาราง กดปมุ Delete การลบแถว,ลบคอลัมน คลิกเลือกแถวหรือคอลัมนท่ตี องการลบ กดปุมขวาของเมาส เลือก Table เลือกคําส่งั Delete Row หรอื Delete Column การแทรกแถว,คอลัมน คลกิ เลอื กแถวหรอื คอลัมนท ่ตี อ งการแทรก กดปุมขวาของเมาส เลือก Table เลือกคําสั่ง Insert Row , Insert Column หรือ Insert Rows or Columns…สวุ มิ ล คงศกั ด์ิตระกูล สาํ นักคอมพิวเตอร มศว 6

แบบฝกหัด: การสรางเวบ็ ไซตดวย Adobe Dreamweaver CS44. คลกิ เมาสเ ลอื กท่ี Column ดา นซาย เพ่อื กําหนดความกวา งของ Column ท่ี Property Inspector ชอง W กาํ หนดขนาดเปน 160 การจดั เรียงขอความในตาราง สามารถจัดเรียงไดทัง้ แนวนอน(Horz) Default,Left,Center,Right และ แนวตัง้ (Vert) Default,Top,Middle,Bottom5. คลิกเลอื กที่ Column ดา นขวา กําหนด Vert ใหเ ปน Topแบบฝกหัดที่ 6: การใสรปู ภาพบนหนาเว็บเพจ ที่ Insert1. คลกิ เมาสย งั ตาํ แหนง ท่ีตองการแสดงภาพ Row ที่ 1 Column ที่ 1 จากนน้ั คลิกเลือก Panel เลือกแท็บ common2. เลอื กไฟลภ าพ photo1.jpg ท่ีจดั เก็บอยใู น folder images3. ใสข อ ความกาํ กับภาพ (Alt) ท่ี Property Inspector ท่ีชอง Alt เปน ภาพประกอบท่ี 14. คลกิ เมาส Row ที่ 1 Column ท่ี 2 พิมพข อความรายละเอยี ดขาวกิจกรรม5. คลิกเมาส Row ท่ี 2 Column ที่ 1 เลือกไฟลภ าพ photo2.jpg ท่จี ัดเกบ็ อยูใน folder images ใส ขอ ความกาํ กับภาพ (Alt) ท่ี Property Inspector ทช่ี อง Alt เปน ภาพประกอบที่ 26. คลกิ เมาส Row ท่ี 2 Column ที่ 2 พมิ พขอ ความรายละเอยี ดขาวกิจกรรมแบบฝกหัดที่ 7: การเชื่อมโยงไปยังเวบ็ ไซตอ ่ืน1. คลิกเมาสท ี่ตําแหนง Row ท่ี 1 Column ที่ 2 ของ Table Layout พิมพขอ ความ Quick Link เลอื กใช class ช่อื Topic กดปุม Enter2. ที่ Property Inspector กําหนด Vert ใหเปน Top เพอ่ื ดนั ขอ ความขึ้นดานบน3. คลกิ เลือก พมิ พขอความ SWU ทําการ Select ขอ ความสุวิมล คงศักดิ์ตระกูล สํานกั คอมพิวเตอร มศว 7

แบบฝก หัด: การสรา งเว็บไซตดว ย Adobe Dreamweaver CS44. ที่ Property Inspector พิมพช่อื เวบ็ ไซต http://www.swu.ac.th ทช่ี อ ง Link5. เลือกใช class ช่อื text6. Target เลือก _blank เพ่อื เปด หนาเวบ็ เพจใหม7. กดปุม Enter พิมพข อ ความ Quick Link ถัดไป การสรา งรายการ Link โดยใหแ สดงเปน DropDown Menu เพื่อชวยประหยัดพ้นื ทใี่ นการแสดงรายการ ท้ังหมด8. พิมพขอ ความ Interesting Link เลอื กใช class ชือ่ Topic กดปุม Enter9. ท่ี Insert Panel เลอื กแทบ็ Forms คลกิ เลือก10. ทช่ี อง Text ใหพมิ พช อ่ื เว็บไซต Mict11. ท่ชี อ ง When Selected,go to URL ใหพมิ พ URL ของเว็บไซตน น้ั http://www.mict.go.th12. คลิกเลอื ก เพื่อเพมิ่ รายการใหม13. พมิ พ UniNet Link ไปที่ http://www.uni.net.th14. ถา ตองการใหม ีปุม Go เพ่อื คลิกแลวจงึ เรียกไปยงั เวบ็ ไซตท ี่กําหนดไว ใหทาํ เครื่องหมายถูก หนาชอง Insert go button after menu คลิกปมุ OK แบบฝกหัดที่ 8: การใสขอ ความบนหนาเว็บเพจ 8 1. พมิ พข อความ Office Hours & Location เลอื กใช class ช่ือ Topic กดปมุ Enter 2. พมิ พขอ ความสุวิมล คงศกั ดิ์ตระกูล สํานกั คอมพิวเตอร มศว

แบบฝกหดั : การสรา งเวบ็ ไซตดว ย Adobe Dreamweaver CS4 Computer Center 4th Floor, Building 16 Srinakharinwirot University Monday- Friday : 8:00 a.m.-7:00 p.m. Weekend : 8:30 a.m.- 4:30 p.m. 3. เลอื กใช class ช่ือ Text 4. ทาํ การ Save ไฟล index.htmlModule 3: การสรา งเว็บเพจ about.html แบบฝก หดั ที่ 1: การแกไขเว็บเพจ about.html 1. double click ทีไ่ ฟล about.html เพ่ือเปดไฟล 2. ในสว นของ Administrator ท่แี สดงขอ มูลผบู ริหารในตาราง ใหท าํ การคลิกเลือกแถวสุดทา ย กดปมุ ขวา ของเมาส เลอื ก Table เลอื กคําสง่ั Delete Row3. ทาํ การเพมิ่ แถว โดยใหนําเมาสไ ปคลกิ ในเซลลสุดทา ยของตาราง กดปมุ Tab จะไดแถวใหมต อจาก แถวสุดทา ยของตาราง4. ทาํ การเพมิ่ ขอ มูลผบู รหิ าร โดยทาํ การแทรกรปู ภาพ person.jpg ใน Folder images ที่ Column ดา นซาย5. พิมพ ชอ่ื ตาํ แหนง ท่ี Column ดา นขวาแบบฝกหัดที่ 2:การเชื่อมโยงเพ่ือดาวนโ หลดไฟลเ อกสาร1. พมิ พขอ ความ Document Download เลอื กใช class ชอื่ Topic กดปมุ Enter2. คลกิ เลอื ก พิมพขอความ Self Assessment Report 2009 ทาํ การ Select ขอความ 3. ท่ี Insert Panel เลอื กแทบ็ Common คลิกเลอื ก 9สุวมิ ล คงศักดติ์ ระกูล สํานกั คอมพิวเตอร มศว

แบบฝกหัด: การสรางเวบ็ ไซตดว ย Adobe Dreamweaver CS4 4. คลกิ เลอื กไปท่ี folder documents เลือกเอกสารช่อื sar2009.pdf 5. กําหนด Target เปน _blank เพ่ือเปดหนา เวบ็ เพจใหม 6. ทช่ี อง Title พมิ พ Self Assessment Report 2009 7. คลิกปุม OK 8. กดปมุ Enter พิมพขอ ความ Report on Quality Assessment 2009 ทาํ การ Link ไปยังเอกสารช่ือ Rsar2009.pdf 9. ทําการ Save ไฟล about.htmlModule 4: การสรา งเวบ็ เพจ services.html แบบฝก หัดท่ี 1:การเชอื่ มโยงเวบ็ ไซตด ว ยไฟลร ูปภาพ 1. double click ท่ไี ฟล services.html เพือ่ เปด ไฟล 2. คลิกเลอื กรปู ภาพที่ 1 3. ที่ Property Inspector ท่ชี อง Link พมิ พ https://ipass.swu.ac.th เลอื ก Target เปน _blank กําหนด Border เปน 0 กาํ หนด Alt เปน IPass ทาํ ซาํ้ ตามขอที่ 2 และ 3 กับรูปภาพท่เี หลือท้งั หมด 10 4. ทําการ Save ไฟล services.htmlModule 5: การสรา งเว็บเพจ faq.html แบบฝก หัดที่ 1:การเช่ือมโยงในหนา เวบ็ เพจเดียวกัน 1. double click ท่ไี ฟล faq.html เพอ่ื เปด ไฟล 2. นาํ เมาสคลกิ ที่หนา ขอ ความ Web Mail 3. ท่ี Insert Panel เลือกแท็บ Common คลิกเลอื ก 4. ทหี่ นา ตา ง Named Anchor ตง้ั ช่ือ Anchor name เปน n1 คลิกปุม OKสวุ มิ ล คงศกั ด์ิตระกูล สํานกั คอมพิวเตอร มศว

แบบฝกหัด: การสรา งเวบ็ ไซตดวย Adobe Dreamweaver CS4 5. จะพบสัญลกั ษณรปู สมอเรืออยูหนาขอ ความ Web Mail 6. ทาํ การสรา ง Anchor Link ท่ีหนาขอความ IPass โดย Anchor name ต้งั เปน n2 7. ทําการ Select ขอความ Web Mail ที่อยูดานบน 8. ที่ Insert Panel เลอื กแท็บ Common คลิกเลือก 9. ท่ีหนาตา ง HyperLink ชอ ง Link ใหเลือก #n1 คลิกปมุ OK 10. ทาํ การสรา ง HyperLink ทขี่ อ ความ IPass โดยเลือก Link ไปท่ี #n2 11. ทาํ การ Save ไฟล faq.htmlModule 6: การสรา งเว็บเพจ activity.html แบบฝก หดั ท่ี 1:การสรา ง Photo Album 1. เปดโปรแกรม Flash Slideshow Maker Professional โดยเรียกท่ี Start >> Programs >> Flash Slideshow Maker Professional >> Flash Slideshow Maker Professional 2. คลกิ ปมุ Close เพือ่ ทาํ การปดหนา ตาง Slideshow Wizard 3. ทาํ การเลอื กรปู ภาพทจ่ี ะนาํ มาสรา ง Photo Album โดยเลอื กไปที่ folder TrainingDW >> activity >> activity2 หนาตางดานขวาจะแสดงรูปภาพใน folder ท่ีเลอื กไว 4. ทําการเลอื กรปู ภาพที่จะนาํ มาสรา ง Photo Album จากนัน้ คลิกปุม 11 5. ที่หนา ตา งดา นลางจะแสดงรูปภาพที่ Add เขา มาสุวิมล คงศักด์ิตระกูล สํานักคอมพิวเตอร มศว

แบบฝก หดั : การสรา งเวบ็ ไซตดว ย Adobe Dreamweaver CS46. คลกิ เลอื กท่ีแท็บ Theme กําหนดคา Album ดังน้ี  Ablum Title : activity2  Width : 400  Height : 300  คลิกเลอื ก Theme Album ท่ีตองการ7. คลกิ เลอื กท่ีแทบ็ Publish กาํ หนด  Output folder ไวท ่ี TrainingDW >> Activity >> Activity2  Flash file name : activity2.swf  Html file name : activity2.html8. คลกิ ปุม Publish Now!แบบฝก หดั ท่ี 2:การแทรกไฟลม ัลติมเี ดีย1. สรา งเว็บเพจชอื่ activity2.html โดยกําหนด Layout 1 row 1 column ขนาด 95% กําหนด Align เปน Center2. ทาํ การ Linkไฟล style_sheet ช่ือ style_sheet.css ใน folder css3. พิมพขอ ความ สาํ นักคอมพิวเตอรรบั การประเมนิ คณุ ภาพภายใน ประจาํ ปการศึกษา 2552 จากคณะกรรมการประเมินคณุ ภาพภายในของมหาวทิ ยาลัย เมื่อวนั ท่ี 23 มิถุนายน 2553 เวลา 8.30-16.30 น. ณ สํานักคอมพิวเตอร กําหนด Class ชื่อ Topicสุวิมล คงศกั ดิต์ ระกูล สํานักคอมพิวเตอร มศว 12

แบบฝกหัด: การสรางเว็บไซตด วย Adobe Dreamweaver CS44. ทาํ การแทรกไฟล Flash ท่ี Insert Panel เลือกแท็บ Common คลกิ เลือก5. เลอื กไฟลช่อื activity2.swf ท่ีอยใู น folder activity >> activity26. ทําการ Save ไฟล activity2.htmlแบบฝกหดั ที่ 3:การเชอ่ื มโยงในเว็บไซตเ ดยี วกัน1. double click ที่ไฟล activity.html เพ่อื เปด ไฟล2. ทาํ การ Select ขอความ ผูบรหิ ารสํานกั คอมพิวเตอรใ หก ารตอ นรบั คณะศกึ ษาดูงานสาํ นักบรกิ าร คอมพวิ เตอร มหาวทิ ยาลยั เกษตรศาสตร เขาศึกษาดูงานดา นเทคโนโลยสี ารสนเทศ และการบริการเครอื ขาย เม่ือวันท่ี 14 กรกฎาคม 2553 ณ สํานักคอมพวิ เตอร มศว3. ท่ี Insert Panel เลอื กแท็บ Common คลกิ เลือก4. ทช่ี อ ง Link เลอื กไปทีไ่ ฟล activity1.html คลิกปุม OKสุวมิ ล คงศกั ดิ์ตระกูล สํานกั คอมพิวเตอร มศว 13

แบบฝก หัด: การสรา งเว็บไซตดวย Adobe Dreamweaver CS4 5. ทาํ การ Select ขอความ สํานักคอมพวิ เตอรรบั การประเมินคณุ ภาพภายใน ประจาํ ปก ารศึกษา 2552 จาก คณะกรรมการประเมินคุณภาพภายในของมหาวิทยาลยั เมอ่ื วันที่ 23 มิถนุ ายน 2553 เวลา 8.30-16.30 น. ณ สาํ นักคอมพิวเตอร 6. ที่ Insert Panel เลอื กแท็บ Common คลิกเลือก 7. ท่ชี อง Link เลือกไปท่ีไฟล activity2.html คลิกปุม OK 8. ทําการ Save ไฟล activity.htmlModule 7: การสรา งเว็บเพจ contact.html แบบฝก หดั ท่ี 1:การเชอ่ื มโยงเพื่อสง e-mail 1. double click ทไี่ ฟล contact.html เพื่อเปด ไฟล2. ทําการ Select ขอ ความ [email protected]. ท่ี Insert Panel เลือกแท็บ Common คลิกเลือก4. ท่ชี อง E-Mail พมิ พ [email protected] คลิกปุม OK 5. ทําการ Save ไฟล contact.htmlModule 8: การสรา งเทมเพลต ขอ ดีของการใชเทมเพลต คอื กรณที ่เี ราเรยี กใชเทมเพลตกบั เวบ็ หลายๆหนา เมอื่ เราตองการ แกไขเทมเพลต เราไมตอ งเสยี เวลาในการแกไ ขทีละหนาใหเสียเวลา แบบฝกหดั ที่ 1: การสรางเทมเพลต 1. double click ทไ่ี ฟล template.html เพ่ือเปด ไฟลต น แบบสวุ มิ ล คงศกั ด์ติ ระกูล สํานักคอมพิวเตอร มศว 14

แบบฝกหดั : การสรา งเวบ็ ไซตดว ย Adobe Dreamweaver CS42. ทําการแกไขช่ือ หนวยงาน… ใหถูกตอง3. ท่ี footer ใหทําการแกไ ขขอมลู ใหถ กู ตอง4. คลกิ เมาสบนพ้ืนที่สีเทา ทาํ การลบขอ ความ “…” ทแี่ สดงอยดู า นซายมือ5. จากนัน้ คลิกเมนู Insert เลือก Template Objects เลอื ก Editable Region6. จะปรากฏหนาตางใหตั้งชอ่ื พน้ื ท่ีท่ีสามารถเปลยี่ นแปลงแกไ ขไดใน template น้ัน คลิกปมุ OK7. เมือ่ กําหนดพื้นที่ที่สามารถเปลีย่ นแปลงแกไ ขได เรียบรอยแลวใหคลิกเมนู File เลือก Save as Template… 8. ทาํ การต้งั ชอ่ื template คลิกปุม Save 15สุวิมล คงศักดิต์ ระกูล สาํ นักคอมพิวเตอร มศว

แบบฝกหัด: การสรา งเว็บไซตด ว ย Adobe Dreamweaver CS49. โปรแกรมจะทําการบนั ทกึ ไฟลโ ดยใชนามสกุลเปน .dwt (template.dwt) และสราง folder ชื่อ Templates เพ่อื จัดเก็บไฟลไ วแบบฝกหัดที่ 2: การเรียกใชเ ทมเพลต1. double click ท่ไี ฟล index.html เพือ่ เปด ไฟล2. คลิกเมนู Modify เลอื ก Templates เลือก Apply Template to Page…3. คลกิ เลือก Templates ชอื่ template คลิกปุม Select4. คลิกเลอื กที่ Document body และ Document head ท่ี Move content to new region เลอื ก EditRegion1 (เปนช่ือพ้นื ท่ที ีต่ งั้ ไวตอนสรา ง template เปนพื้นท่ีทส่ี ามารถเปลี่ยนแปลงแกไ ขได) คลกิ ปุม OK5. Template จะถกู แทรกเขาไปในหนาเว็บ 6. ทาํ ซา้ํ ตามขอ ที่ 1 - 4 กบั เวบ็ เพจทเี่ หลือทั้งหมด 16 แบบฝกหดั ท่ี 3: การแกไขเทมเพลต 1. double click ที่ไฟล template.dwt ที่อยูใน folder Templatesสวุ มิ ล คงศกั ดิต์ ระกูล สาํ นักคอมพิวเตอร มศว

แบบฝกหดั : การสรา งเวบ็ ไซตดว ย Adobe Dreamweaver CS42. ท่ี footer ใหกดปมุ Enter หลังขอความเพ่อื ทําการ เพ่มิ วันที่ Update เว็บไซต3. ที่ Insert Panel เลือกแท็บ common คลกิ เลือก4. ท่ีหนาตา ง Insert Date ใหเลือก Format วันท่ที ี่ตองการแสดง ทําเคร่ืองหมายถกู ที่ Update automatically on save เพอ่ื เวลามีการแกไขโปรแกรมจะดึงวันทที่ แี่ กไขลาสุดมาแสดงให คลกิ ปุม OK5. คลิกเมนู File เลอื ก Save6. ที่หนา ตา ง Update Template File จะแสดงไฟลทเ่ี รยี กใช template น้ที ัง้ หมด คลกิ ปุม Update 7. ท่ีหนา ตา ง Update Pages ท่ี Look in เลือก Entire Site เพือ่ ทําการ Update template ทงั้ เวบ็ ไซต คลิกปมุ StartModule 9: การอพั โหลดไฟลสูเว็บไซต แบบฝก หดั ท่ี 1: การตรวจสอบการทาํ งานของหนาเว็บเพจ (Check Link) ในระหวา งการสรา งเวบ็ ไซต อาจมกี ารกําหนด Link ใหเ ชอ่ื มโยงไปยงั ไฟลต า งๆ แตบ างครง้ั เรา อาจไมไดสรางไฟลน ั้นข้นึ มา ทําใหเ ว็บของเราเกดิ ปญหา Link เสีย หรอื Broken Link 1. ที่ Panel Files คลิกขวาท่ี folder Site TrainingDW คลิกเลือก Check Links เลอื ก Entire Local Site2. Dreamweaver จะตรวจสอบทกุ Link ใน folder และไฟลต างๆ และสรปุ ใหเราทราบ โดยแบงแสดงเปน 3 กลมุ  Broken Links แสดง Link ภายในที่เสีย (หาไฟลท่ีเชือ่ มโยงไมเ จอ)สุวิมล คงศักด์ิตระกูล สาํ นกั คอมพิวเตอร มศว 17

แบบฝกหดั : การสรา งเว็บไซตดว ย Adobe Dreamweaver CS4  External Links แสดง Link ภายนอกเวบ็ ไซต (เปนการแสดง Link ใหเ ห็นเทานัน้ ไมไดร ะบวุ า Link น้ันเสียหรือไม)  Orphaned Files แสดงไฟลก ําพรา ไฟลท ไ่ี มถ กู เชื่อมโยงแบบฝก หดั ท่ี 2: การอัพโหลดไฟลไปยงั เว็บเซิรฟเวอร1. ที่ Panel Files คลิกเลอื ก Remote view คลิก define a remote site2. ท่หี นา ตา Site Definition ใหกาํ หนดคาดังนี้  Access : FTP  FTP Host : พมิ พชือ่ เครอื่ ง Server  Login : พิมพช อื่ Account  Password : พมิ พร หสั ผา น  เลอื ก Use Passive FTP สําหรบั เครอื่ ง Server ท่มี ีการตดิ ตง้ั ระบบ Firewall  คลิกปุม OKสวุ มิ ล คงศกั ดต์ิ ระกูล สํานักคอมพิวเตอร มศว 18

แบบฝก หดั : การสรางเวบ็ ไซตดวย Adobe Dreamweaver CS43. เลอื กไฟลแ ละโฟลเดอรทต่ี องการอพั โหลด4. คลกิ ปมุ Put Files เพอ่ื นาํ ไฟลเขาเคร่อื ง Server5. คลกิ ปุม Get Files เพอ่ื นําไฟลจากเครื่อง Server มายังเครอ่ื ง PC ที่ทาํ งานสุวิมล คงศักด์ิตระกูล สาํ นกั คอมพิวเตอร มศว 19