สารบญ
หวขอ หนา 1. ความรเบองตนในการสรางเวบไซต 6
หลกการสรางเวบไซต 6 อนเทอรเนตพนฐาน 6 ความสาคญของอนเทอรเนต 6 ทาความรจก HTML 8 คณสมบตของเครองทเหมาะกบ Dreamweaver 8 9 การตดตง Dreamweaver 8 9 การเปดใชงาน Dreamweaver 2 8 1 สวนประกอบของ Dreamweaver 8 13
2. หลกก สาร รางเวบไซต 17 เรมตนสรางเวบไซต 17 การจดการโครงสรางโฟลเดอร 20 การสรางเวบเพจใหม 20 การเพมและแกไของคประกอบบนหนาเวบ 26 การใสหวเรองบนหนาเวบ 27 การใชงานภาษาไทยใน Dre 27 amweaver 8
3. การป แการเพม-ลบฟอนต 29
รบ ตงขอความบนเวบเพจ 30 การใสขอความบนหน 30 าเวบ การตกแตงและจดรปแบบ 31 ขอความ การยอนกลบเพอแกไขขอผด 32 พลาดดวยพาเนล History การบนทกเวบเพจ 34 การดผลลพธของเวบเพจบนหนาตางบราวเซอร 36
4. ตกแตงเวบเพจดวยกราฟก 36 เตรยมภาพเพอใชในเวบเพจ 36 การปรบแตงรปภาพ 38 การนาภาพมาแสดงเปนพนหล 43 งเวบเพจ การแกไขรปภาพ 45
5. การสรางตารางบนเวบเพจ 46 การสรางตาราง 46 การปรบขนาดชองต 48 าราง การใสขอมลและภาพในตาราง การเลอกตาราง แถว 50 คอลมน และเซล การปรบแตงรายล 52 ะเอยดของตาราง
เนรมตเวบสวยดวย Dreamweaver หนา 1/96
หนา 2/96 เนรมตเวบสวยดวย Dreamweaver
การจดเรยงขอความในตาราง 52 การแทรกแถวและคอลมน 54 การลบแถวและคอลมน 56 การรวมและการแบงเซล 57 างเซลในตารางการขยายและลดความกว 58 ปรบความสงและความกว 59 างของตารางใน Property Inspector การซอนตาราง 62 การกาหนดสใหกบพนตาราง 62 การคดลอกขอมลในตาราง 65
6. การเชอมโยง 65 การเชอมโยงภายในเวบเพจหน 65 าเดยวกน การเชอมโยงภายในเวบไซตเด 66 ยวกน การเช 68 อมโยงไปเวบไซตอนและเชอมโยงดวยอเมล การเชอมโยงดวย Map Link 69 การกาหนดคณสมบตของการเชอมโยง
7. การอ70
อกแบบเลยเอาท 71 การใชเลยเอาท 71 โครงสรางของหนาเวบ 73 การสรางเลยเอาทเทเบล และเลยเอาทเซล 73
8. เฟรม เลเยอร แฟลช 77 การใชเฟรม 77 การใชเลเยอร 80 การใชแฟลช (Flash) 82
9. การจดทะเบยนเวบไซต 85 การหาเวบโฮสตง และการอพโหลดไฟล การจดทะเบยนเวบไซต 85 การหาเวบโฮสต 88 ง การอพโหลดไฟล 90
เนรมตเวบสวยด Dreamweaver
วย
คาอธบายรายวชา หลกสตรเนรมตเวบสวยดวย Dreamweave จะชวยใหผเขาอบรมลดภาระการประชาสมพนธ
การเผยแพรขอมลตางๆ ของ องคการ และลดปรมาณเอกสารภายใน โดยการจดเกบไวในรปแบบของสออเลกทรอนกส หลกสตรนเหมาะอยางยงสาหรบหนวยงานทตองการจดทาเอกสารไวในรปแบบของเอกสารอเลกทรอนกส หรอตองการลดปรมาณกระดาษ เชน ฝายบคคลตองการสรางเวบเพอแสดงขอมลของพนกงานแตละคนไดวาชออะไร อยแผนกไหน เบอรโทรศพทอะไร อเมลอะไร พรอมรปถาย หรอแจงขาวสารการจดฝกอบรม การจดเกบคมอปฏบตงาน การจดเกบวดโอสอนการทางาน ฝายขายกสามารถแสดงภาพสนคา และคณสมบตตางๆ ของ สนคาแตละชนดได ฝายประชาสมพนธกสามารถเผยแพรขาวสารของบรษทได ไมวาจะเปน ขาวเกยวกบ 5ส การไปทศนะศกษาดโรงงาน หรอวดโอการทากจกรรมในวนสาคญตางๆ ฝายหองสมดกสามารถแนะนาหนงสอใหมๆ หรอความรตางๆ สาหรบเผยแพรภายในบรษท ฝายธรการกสามารถสรปรายงานการประชม ขาวสารจากผบรหารได ซงจะชวยใหองคการ ของทานมการสอสารกนไดอยางมประสทธภาพ
r น
จดประสงค 1. เพอใหผเขาอบรมเขาใจหลกการสรางเวบไซตสาหรบใชภายในองคกรของตนได 2. เพอใหผเขาอบรมเขาใจการทางาน และสามารถใชโปรแกรม Dreamweaver ได 3. เพอใหผเขาอบรมนาไฟลประเภทตาง ๆ เชน ไฟลรปภาพ ไฟลวดโอ มาใชในการจดทาเวบไซต
ไดอยางมประสทธภาพ ความรพนฐานของผเขาอบรม
1. Microsoft Windows 2. Internet Explorer
เนอหาหลกสตร 1. ความรเบองตนในการสรางเวบไซต
หลกการสรางเวบไซต อนเทอรเนตพนฐาน ความสาคญของอนเทอรเนต ทาความรจก HTML คณสมบตของเครองทเหมาะกบ Dreamweaver 8 การตดตง Dreamweaver 8 การเปดใชงาน Dreamweaver 8 สวนประกอบของ Dreamweaver 8
เนรมตเวบสวยดวย Dreamweaver หนา 3/96
หนา 4/96 เนรมตเวบสวยดวย Dreamweaver
2. หลกการสรางเวบไซต เรมตนสรางเวบไซต การจดการโครงสรางโฟลเดอร การเปดเวบเพจใหม การเพมและแกไของคประกอบบนหนาเวบ การ หวเรองบนหนาเวบ ใส การใชงานภาษาไทยใน Dreamweaver 8 การเพม-ลบฟอนต
3. การปรบแตงขอความบนเวบเพจ การใสขอความบนหนาเวบ การตกแตง ละจดรปแบบขอความ แ การยอนกลบเพอแกไขขอผดพลาดดวยพาเนล History การบนทกเวบเพจ การดผลลพธของเวบเพจบนหนาตางบราวเซอร
4. ตกแต บเพจดวยกราฟก งเว เตรยมภาพเพอใชในเวบเพจ การปรบแตงรปภาพ การนาภาพมาแสดงเปนพนหลงเวบเพจ การแกไขรปภาพ
รางตารางบนเวบเพจ 5. การส การสรางตาราง การปรบขนาดชองตาราง การใสขอมลและภาพในตาราง การเลอกตาราง แถว คอลมน และเซล การปรบแตงรายละเอยดของตาราง การจดเรยงขอความในตาราง การแทรกแถวและคอลมน การลบแถวและคอลมน การรวมและการแบงเซล การขยายและลดความกวางเซลในตาราง ปรบความสงและความกวางของตารางใน Property Inspector การซอนตาราง การกาหนดสใหกบพนตาราง การคดลอกขอมลในตาราง
6. การเชอมโยง การเชอมโยงภายในเวบเพจหนาเดยวกน การเชอมโยงภายในเวบไซตเดยวกน
การเชอมโยงไปเวบไซตอนและเชอมโยงดวยอเมล การเชอมโยงดวย Map Link การกาหนดคณสมบตของการเชอมโยง
7. การออกแบบเลยเอาท การใชเลยเอาท โครงสรางของหนาเวบ ะเลยเอาทเซล
8. เฟรม เการสรางเลยเอาทเทเบล แลยอร แฟลช เล การใชเฟรม การใชเลเยอร การใชแฟลช (Flash)
9. การจ ะ ตง และการอพโหลดไฟล ดท เบยนเวบไซต การหาเวบโฮส การจดทะเบยนเวบไซต การหาเวบโฮสตง การอพโหลดไฟล
เนรมตเวบสวยดวย Dreamweaver หนา 5/96
หนา 6/96 เนรมตเวบสวยดวย Dreamweaver
ความรเบองตนในการสรางเวบไซต หลกการสรางเวบไซต
ะตองมความรเกยว กบภาษา HTML จงจะสามารถ หรอ Notepad ในการเขยนโคดทงหมด แลวบนทก เปนไฟล นาเวบทสราง ซงทาใหเสยเวลาในการทางานม างสรรคงานไดอยางสวยงาม ตามความตองการ
รแกรม สรางเอกสารเวบเพจ ททางานในลกษณะ รแกรมจะสรางรหสคาสง HTML ใหอตโนมต โดยผใช ไมตองศกษาภาษา
HTML HTML มลกษณะการทางานคลายๆ กบการพมพเอกสารดวย Word Processor oolbars) หรอแถบคาสง (Menu Bar) ควบคมการทางาน ชวยใหงายตอก
ในการสรางเวบไซตในยคเรมแรกนน ผสรางจสรางเวบเพจได โดยใชโปรแกรม EditPlus นามสกล .html จากนนเปดบราวเซอรเพอดผลลพธของห
บางจะชวยใหเราสราก แตถาม ความรในภาษา HTML
จจบนโปรแกรม Dreamweaver เปนโปในปHTML Generator คอ โป
หรอปอนรหสคาสงโดยอาศยปมเครองมอ (T
ารใชงาน สะดวก และรวดเรวในการสรางเวบเพจ
อนเทอรเนตพนฐาน คาวา Inter Connection Network เปนระบบเครอขายคอมพวเตอรทมขนาด
ใหญ เ ทวโลกสามารถตดตอสอสารถงกนได โดยใชมาตรฐานในการรบสงใชบนระบบเครอขาย
อนเทอร /IP : Transmission Control Protocol/Internet Protocol) ล รเนตเปนเสมอนใยแมงมม ทครอบคลมทวโลก ในแตละจดทเชอมตออนเทอร นไดหลายเสนทางตามความตองการ โดยไมกาหนดตายตว และไมาเปนต รง อาจจะผานจดอน ๆ หรอเลอกไปเสนทางอนไดหลาย ๆ เสนทาง การดตอสอสารผานระบบเครอขายอนเทอรเนตนนอาจเรยกวา การตดตอสอสารแบบไรมต หรอ yberspace
อนเทอรเนต มาจากครองคอมพวเตอรทกเครอง
ขอมลทเปนหนงเดยว หรอทเรยกวา โปรโตคอล (Protocol) ซงโปรโตคอลทเนตมชอวา ทซพ/ไอพ (TCPกษณะของระบบอนเทอเนตนน สามารถสอสารกองไปตามเสนทางโดยตจ
ตC
ความสาคญของอนเทอรเนต 1. การประยกตใชเทคโนโลยสารสนเทศททนสมย 2. การตดตอสอสารทสะดวก และรวดเรว 3. สามารถใชเปนแหลงคนควาหาขอมลไดทวโลก ระบบเครอขายอนเทอรเนตจะทาหนาท
เสมอนเปนหองสมดขนาดใหญ และเปนแหลงรวบรวมขอมลแหลงใหญทสดในโลก ในการตดตอสอสารบนเครอขายอนเทอรเนตทคอมพวเตอรทวโลกเชอมโยงถงกนนน มการดตอสอสารอย 2 แบบคอ แบบสงขอมลและรบขอมล และการทจะสรางเวบเพจดวย Dreamweaver นน าควรมความรเกยวกบศพททางอนเทอรเนตทเกยวของ เพอความเขาใจทด ดงน
เครองใหบรการ (Server) คอ เครองคอมพวเตอรททาหนาทสงขอมล เครองรบบรการ (Client) คอ เครองคอมพวเตอรททาหนาทรบขอมล เครอขายใยแมงมม WWW (World Wide Web) หรอเรยกสน ๆ วาเวบ คอ การใหบรการในรปแบบทเรยกบราวเซอร เชน Internet Explorer จากเครอง
ตเร
ของเรา และระบทอย URL กสามารถทจะเปดเวบไซตได เชน ถาเราระบ URLทตองการเปด คอ www.TrainingDD.com กเปนการเปดดเวบไซต ของ TrainingDD ดงภาพ
เวบเพจ (Web Page) คอ เอกสารทเราเปดดจาก www ซงสวนใหญจะถกสรางขนจากภาษาคอมพวเตอรท เรยกวา HTML ประกอบดวยตวหนงสอ รปภาพ และมการเชอมตอกบเวบเพจอนๆ
เวบไซต (Web Site) คอ การรวบรวมเวบเพจไวหลาย ๆ หนา และ กาหนดเวบเพจหนาหนงใหเปนหนาแรก เรยกวา โฮมเพจ (Home Page) ซงเปนประต
บเพจหนาอน ๆ ทงหมดในเวบไซตนน ๆ
รตดแอดเดรส (IP address)ในการทางาน แตเปนตวเลขหลายตว ทาใหจดจาไดยาก จงมการใชโดเมนเนม ซงเปนตวอกษรทจดกน และจะมชอไมซากนโดยตงชอให
าน องคกร บรษท หางราน เพอความสะดวกในการจดจาทย มโดเมนเนม คอ egat.co.th
ทางเขาสเว เวบบราวเซอร (Web Browser) คอ โปรแกรมทใชเขาส World Wide Web เปนโปรแกรมทอยในเครองคอมพวเตอรลกขาย (Client) ทาหนาทในการนาเสนอขอมลเวบ บราวเซอรทไดรบความนยมในปจจบน เชน Internet Explorer ของไมโครซอฟท และ Firefox ซงเปนบราวเซอรโอเพนซอสต
เวบเซรฟเวอร (Server) คอ ทเกบเวบเพจ โดยใชโปรแกรม WFTP ในการนาเวบเพจขนไปไวบนเซรฟเวอร เรยกวาอพโหลด (Upload) และนาเวบเพจลงมาแกไขในเครองของเรา เรยกวา ดาวนโหลด (Download)
โดเมนเนม (Domain name) คอ กา ตอกนบนอนเทอรเนต จะใชไอพ
สอดคลองกบหนวยงชอ เชน การไฟฟาฝายผลตแหงประเทศไ
เนรมตเวบสวยดวย Dreamweaver หนา 7/96
หนา 8/96 เนรมตเวบสวยดวย Dreamweaver
ทาความรจก HTML HTML ยอมาจาก Hyper Text Markup Language ภาษา HTML เปนภาษาทใชในวงการ
อนเทอรเนต เวบไซตตาง ๆ เขยนขนโดยใชภาษา HTML เปนหลก ทาใหเราสามารถนาเสนอ ขอความ ภาพ เสยง หรอแมแ
คาวา Hype ามารถกระโดดขามขนตอน เจาเปนตองอานเรยงไปท ไ
คาวา Text หมโปรแกรมไดหลายโปรแก
คาวา Markup เ กเปนสวน ๆ โดยมคาสง หรอ tag บอกใหทราบวาจะใหแสดงภาพ หรอ นา หรอ ตวเอยง เปนตน
สวนคาวา วเตอรภาษาหนง แตใชในการนาเสนอเน HTML เปนภาษาทางคอมพวเตอร วแปรแตอยางใด
ตวดโอ ผานทางอนเทอรเนตได r มความหมายตรงขามกบคาวา เรยงลาดบ คอ ไมจาเปนตองเรยงลาดบ สได ชน ในหนาเวบ เราสามารถทจะคลกไปยงทตาง ๆ ตามลงค ไดตามตองการ ไม
ละหนา นจงเปนลกษณะสาคญของ HTML ทสามารถลงค ปยงทตาง ๆ ได ายถงขอความ HTML เปนไฟลตวอกษร หรอ text file สามารถสรางโดยใชรม เชน Notepad, EditPlus หรอแมแต MS Word กได ปนการแบงขอความออ
ขอความนน ๆ อยางไร เชน ใหตวอกษรเปนสตาง ๆ มลกษณะตวห
Language หมายถง ภาษา เราจด HTML เปนภาษา ทางคอมพอหาสาระบนเวบเทานน อยางไรกตาม มบางคนยง ไมยอมรบวา
เพราะขาดคณสมบตทางดานตวแปรเพราะ HTML ไมมการเกบคา ต
โครงสรโครงสร วเปดการควบคม
อกษรและปดการควบค หมายถง การปดการควบคม ภายใน องประกอบกนเปนชด (Composite) และไดอกดวย นอกจากนน สญลกษณทอยระหวางเค
Tag ในภาษ <HTML> และ <
Markup Langua <HEAD> แเอกสารภายใน คณสมบตตาง ๆของเวบใหทางาโลกน ดวยว
<TITLE> และ <อยท Task Bar title> การไฟฟาฝายผลตแหงปร ศ
<BODY> และ <ม Attribute ตาง ๆ ไดแก BGCOLOR = "#XXXXXX", TEXT = "# XXXXXX " เปนตน
างของภาษา HTML างหลกของภาษา จะม Tag ทประกอบจากวงเลบ <TAG name> เปนต
มอกษรดวย </TAG name> โดยมเครองหมาย / อยใน Tag Tag ตาง ๆ จะม Tag ทอยเดยว (Single) กบ Tag ทตใน Tag แตละตวอาจจะม Attribute เพอขยาย ความหมายหรอเพมการควบคม Tag
HTML สามารถทา Comment ไดดวยการใช <! และจบดวย !> เพอไมตองแปลรองหมายทงสองน
า HTML ทสาคญมดงตอไปน /HTML> เปน Tag ทใชเพอกาหนดวาเอกสารตอไปน เปนเอกสาร HTML เปน
ge ละ </HEAD> เปน Tag ทใชกาหนดสวนหวของเอกสาร HEAD ไมไดเปนสวนของ
แตจะให ขอมลเกยวกบเอกสารฉบบน โดยจะม <METHA> Tag เปนตวกาหนด การกาหนด Key Word ใหรวาเวบของเราคออะไร เปนคาสงควบคมการทางานนแบบอตโนมตได ซงจะเปนประโยชนสาหรบการคนหาเวบไซตตาง ๆ ทมอยใน
ธ Search Engine /TITLE> เปนการระบขอความทตองการใหเปนสวนหวของเอกสาร ทจะปรากฏใน Browser โดย Title จะเปนสวนหนงของ Head เชน <
ะเท ไทย</title> จะปรากฏใหเหนรายละเอยดอยดานบน Task Bar ดานบน /BODY> เปน Tag ทบอกถงลกษณะตาง ๆ ของเอกสารฉบบน ซงใน Body จะ
ตวอยาง HTML Code
ตวอยางผลลพธทได
คณสมบตของเครองทเหมาะกบ Dreamweaver 8 สาหรบเครอง PC
หนวยประเมนผลกลาง(CPU) CPU ความเรวไมตากวา 800 MHz ระดบไมตากวา Pentium III processor หรอเทยบเทา
ระบบปฏบตการ windows 2000 หรอ Windows XP หนวยค กใชงานบน Windows XP ควรใช 512 MB หรอ 1 GB ขนไป วามจา(RAM) 256 MB หาพนทวางบนฮารดดสก อยางนอย 650 MB
การตดตง Dreamweaver 8 การตดตง Dreamweaver 8 เรมตนดวยการนาแผนโปรแกรมใสในชองอาน CD และเรมตดตง
ตามขนตอนดงตอไปน 1. ดบเบลคลกทไอคอน Install Dreamweaver 8 ดงภาพ 2. จะปรากฏหนาตางเตรยมการตดตงโปรแกรม ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 9/96
หนา 10/96 เนรมตเวบสวยดวย Dreamweaver
3. คลกเมาสทปม Next เพอเรมขนตอนการตดตง ดงภาพ
กเมาสเลอก I accept the terms in the license agreement
งาน Dreamweaver และคลก Next เพอตดตงโปรแกรมตอไป 4. จากนนคล เพอรบขอตกลง
ในการใช ดงภาพ
5. 8 ถาไมตองการ ก
สามารถคล ปรแกรมยงเปดโอกาสใหเลอกสราง Shortcut ไวทแถบ Quick launch และไวทบนหนาจอ (Desktop) หากไม
โปรแกรมจะแสดงไดเรกทอรทจะเกบโปรแกรม Dreamweaver กปม Change เพอเปลยนไดเรกทอรได นอกจากนโ
ตองการไมตองคลกเลอก แลวคลกปม Next ดงภาพ
6. กาหนดวาจะให Dreamweaver แกไขไฟลชนดใดบาง ให ll แลว คลก
Next เพอเขาสขนตอนตอไเลอก Select A
ป
7. คลกเมาสทปม Install เพอตดตงโปรแกรม
โปรแกรมจะเรมทาการตดตง ดงภาพ 8.
9. ขนตอนสดทาย เมอตดตงเสรจ ใหคลก Finish ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 11/96
หนา 12/96 เนรมตเวบสวยดวย Dreamweaver
10.
เปนการเสรจสนขนตอนการตดตงโปรแกรม
การเปเมอตดตง Dreamweaver 8
โดยปฏบตตามขนตอนด
1. คล
ดใชงาน Dreamweaver 8 Dreamweaver 8 เสรจเรยบรอยแลว เรากสามารถเปดใชโปรแกรม
งตอไปน
กเมาสทปม าสง All Programs>Macromedia>Macromedia Dreamweaver 8 2. เลอกค ดงภาพ
3. คลกเล ดงภาพ อก Macromedia Dreamweaver 8 โปรแกรมจะเปดหนาจอ
4. หน
เปนการเลอกเวบเพจทเราสรางไวแลว นากลบขนมาทางานใหม
าจอนมสวนสาคญ 3 สวน คอ a. สวนท 1 Open a Recent Item
b. สวนท 2 Create New เปนการสรางหนาเวบใหม โดยเราจะต
การทางาน เชน HTML, Cold Fusion, PHP, ASP, JavaScript c. สวนท 3 Create from Samples เปนการสรางหนาเวบใหม
สาเรจรปมาใชเปนแบบเรมตน d. ในทน เราจะสรางเวบเพจใหม ใหคลกเลอกใช HTML ในส
ดงภาพ
องเลอกรปแบบตามทตองการ โดยใชหนาเวบ
วนท 2 Create New
าเอกสารวาง ๆ จะถกเปดขนสาหรบการสรางเวบเพจ เราสามารถใ5. หน สขอความและ
รปภาพ ในหนานได ดงตวอยางทเหนในภาพ
สกอน ระกอบตาง ๆ ของ Dreamweaver 8 ใน
องตนเพอเปนพนฐานในการใชงานไดสะดวก eamweaver 8 และคลกเลอก HTML จะเกดหนาจอ ดง
วนประกอบของ Dreamweaver 8 ทเราจะใชงาน Dreamweaver 8 เราควรรสวนป
เบ1. เมอคลกเมาสเขาสโปรแกรม Dr
ภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 13/96
หนา 14/96 เนรมตเวบสวยดวย Dreamweaver
2. สงหมดของโปรแกรม รวมเครองมอตาง ๆ ใน
ๆ ทใชงานบอย ยวกบงานทกาลงทา
ctor เปนสวนกาหนดคณสมบ ประกอบตาง
3. แถบแส ดงภาพ
วนประกอบทสาคญของหนาจอน มดงน สวนท 1 แถบเมน (Menu bar) เปนแถบทเกบคาสงท สวนท 2 แถบกลมเครองมอ (Insert bar) เปนแถบทการสรางเวบ
สวนท 3 แถบเครองมอ (Toolbar) รวมปมเครองมอตาง สวนท 4 แถบสถานะ (Status bar) แสดงขอมลเพมเตมเกอย
สวนท 5 Property Inspe ตขององคๆ บนหนาเวบและ สามารถปรบแตงคาขององคประกอบตาง ๆ ได ดงสถานะทควรรจก
นสวนท 1 สวนไวเลอกแทก HTML: จะแสดงโคด HTML ของเวบเพจ สว ท 2 เปนเครองมอปรบการแสดงผลเวบเพจขณะทางาน: Zoom Tool สาหรบซมเขาออกเพอขยายหนาจอการแสดงผล หรอใช Hand Tool เลอนดหนาเวบในสวนทมองไมเหน
3 แสดงขนาดหน
สวนท Window Size: ทเรากาหนด สามารถเลอกกาหนดเป
สวนท 4 : แสดงเวลาโดยประมาณ ทใชใน
าตางของเวบเพจนขนาดและเปอรเซนต
แสดงขนาดเอกสารและเวลาในการโหลดการโหลดหนาเวบเพจทเราสราง
กลมเครองมอ ถงกลมเครองมอ ใหคลกเมาสทปมตวเลอก ดงภการเขา าพ
อกกลมเครองมอทตองการได ดงภาพ และคลกเล
กลมเคร
1. องมอ Common: เปนสวนทรวบรวมเครองมอตาง ๆ ทเราใชงานบอย เชน องมอทใชสาหรบสรางงานเวบเพจ มอย 8 กลมทควรรจก ดงน กลมเครการแทรกภาพ แทรกตาราง เปนตน
2. กลม บน
หนา เครองมอ Layout :เปนสวนทรวบรวมเครองมอตาง ๆ ทใชจดองคประกอบ
เวบ เชน การจดวางขอความใหอยในตาแหนงตาง ๆ เปนตน
3. กลม ปม
ตวเเครองมอ Forms :เปนสวนทรวบรวมเครองมอในการสรางแบบฟอรม
ลกษณะตาง ๆ เชน check box, radลอก io button เปนตน
4. กลม
ปรบแตงเครองมอ Text :เปนสวนทรวบรวมเครองมอสาหรบการจดวางตาแหนง และ
ตวอกษรบนหนาเวบ
ดการภาษา HTML บน
หน5. กลมเครองมอ HTML :เปนสวนทรวบรวมเครองมอสาหรบจ
าเวบ
6. ม อ รส
ตดตกล เครองม Application :เปนสวนทรวบรวมเครองมอสาหรบกา ง Application
อกบฐานขอมล รา
7. ม
โปรกล เครองมอ Flash elements: เปนเครองมอสาหรบนาองคประกอบทสรางจาก
แกรม Flash มาวางบนหนาเวบ
เครองมอ Favorites: เราสามาร8. กลม ถเลอกเครองมอทใชบอยจากแตละกลมเครองมอ
ไดตามความตองการ มาใสในเมนน
เนรมตเวบสวยดวย Dreamweaver หนา 15/96
หนา 16/96 เนรมตเวบสวยดวย Dreamweaver
การเปลยนรในกล
ปแบบการเรยกใชงานกลมเครองมอ มเครองมอ คาสงสดทาย คอ Show as Tabs ดงภาพ
เราสามารถคลกเลอกแทบ
ของเครองมอทตองการใชShow as Tabs คอคาสงทใหแสดงกลมเครองมอแยกเปนแทบ ๆ
งานไดตามความตองการ ดงภาพ
การกาหนดค (Property Inspector) ทาไดเมอเราคลกเลอก
ภาพ ตารางใหเราสามาร
ณสมบตขององคประกอบตาง ๆ บนหนาเวบการกาหนดคณสมบตขององคประกอบตาง ๆ บนหนาเวบ สามารถกระ
ตวหนงสอหรอองคประกอบอน ๆ กจะปรากฏ Property Inspector ขององคประกอบนน ๆ ถปรบแตงไดตามตองการ
กลมหนาตางพาเนล(Panel Group)
โปรแกรม Dreamweaver 8 มหนาตางพาเนลตาง ๆ ทเพมความสามารถในการจดการและออกแบบหนาเวบเพจ ซงแตละพาเนลจะมความสามารถในการจดการหนาเวบเพจไดไมเหมอนกน เราเรยกเปดพาเนลไดจากเมน Window > และเลอกพาเนลทตองการ ดงภาพ
มมมองการทางานใน Dreamweaver
รางงานเวบเพจ เราสามารถเลอกมมมองในการทางานในการส
ได 3 รปแบบ โดยคลกทรปไอคอน ทอยใน Toolbar แถบเครองมอมาตรฐาน ดงน
1. Show Code View คลกท จะปรากฏมมมองแสดงโคด HTML ของหนาเวบเพจทเรากาลงทางานอย ถาเรามความรเรองภาษา HTML กสามารถแกไขโคดไดตามตองการ ดงภาพ
หนา 17/96
2. Show Code and Design View คลกท จะปรากฏมมมองทแสดงทงโคดและ
หนาเวบเพจทเรากาลงทางานอย ส หรบผทตองการดโคดไปพรอมกบการออกแบบหนาจอ ดงภาพ
า
3. Show Design View คลกท จะแสดงหนประกอบดวยภาพ ขอความ ตาราง หรออน ๆ
าจอทเราออกแบบเวบเพจซงมการแสดงโคดตาง ๆ มาโดยไม
เกยวของ ดงภาพ
การออกจากโปรแกรม Dreamweaver การออกจากโปรแกรม Dreamweaver ทาไดหลายวธดวยกน ดงน
1. เลอกคาสง File แลวเลอกคาสง File>Exit เปนการสดสนการใชงานโปรแกรม 2. คลกเมาสท บรเวณมมบนขวาของหนาจอ 3. คลกเมาสท บรเวณมมบนซายของหนาจอและเลอกค4. กดทคยบอรด <Ctrl+Q>
ลกท Close
หลกการสรางเวบไซต
เรมตนสรางเวบไซต ในการสรางเวบไซตดวย Dreamweaver 8 กอนอนตองมการกาหนด Site เพอใชจดเกบหนาเวบเพจแตละหนาใหอยในชอเวบไซตเดยวกน และจดการกบไซตทเราสรางขน ไดตามตองการ
เนรมตเวบสวยดวย Dreamweaver
หนา 18/96 เนรมตเวบสวยดวย Dreamweaver
การกาหนดโครงรางของเวบ ในการสรางเวบไซต กอน นควรออกแบบโครงรางคราวๆ ของเวบไซตนนกอน เพอไมใหเกด
ความยงยากทจะตามมาในภายหลง เวบไซตทประกอบดวยเวบเพจหลาย ๆหนา ควรจดเกบเวบเพจไวในโฟลเดอรตาง ๆ ดงตวอยาง ถาเราทาเวบไซตเกยวกบองคกรของเร
อ
า กอาจสรางตงโฟลเดอรชอ Organization เปนโฟลเดอร ทเกบรวมเวบเพจและไฟลตาง ๆ ทใชไวทงหมด โดยโฟลเดอรนอาจประกอบ ด ๆ ทประกอบกนเปนเวบไซต ดตวอยาง ดงภาพ
าโฮมเพจหลละไมควรอยในโฟลเดอรยอย
ไป วยโฟลเดอรยอย ๆ สาหรบเกบไฟลตาง ตวอยางการจดโฟลเดอรสาหรบเกบไฟลตาง ๆ
ก (index.html) จะตองอยในโฟลเดอรหลกแ ใด ๆ ทงสน
จากภาพ จะเหนวาหน
การสรางเวบไซตใหมใน Dreamweaver งเวบไซตใหมใน Dreamweaver ตองกาหนดทอยของไฟลตาง ๆ อน โดยการสราง Site
การสราบนเวบไซตเสยก ไฟลทกไฟลและภาพทนามาใช ตองอยใน Site งานทกาหนด
วธการสรางเว1. เลอกค
บไซตแบบใชวซารด สามารถดาเนนการไดตามขนตอนดงน าสง Site> New Site... เพอเขาสการสรางเวบไซต ดงภาพ
1. จะปรากฏหนาจอ อไปน
ทอย• • te name : ใหตงชอไซตงานตามตองการ ควรใหมความหมาย
เกยวของก อวา myorganization • หมายเลข บไซตบนเครองทเรากาลง
ทางานอย างโฟลเดอรเกบงาน ชอ organization ไดเลย
• หมายเลข 5 กาหนดโฟลเดอรทจะเกบภาพ โดยอาจคลกเล กโฟลเดอรยอยทสรางไว
Site Definition for Unnamed Site1 เพอใหตงคา ดงต
• หมายเลข 1 คลกเมาสเลอกทแทบ Basic มมบนซาย หมายเลข 2 คลกเมาสเลอก Local Info หมายเลข 3 ท Si
บงานหรอกจกรรมของเวบไซตนน ๆ ในทน จะตงช 4 ท Local root folder : เปนการกาหนดทอยของเว (ควรสรางโฟลเดอรเกบงานไวกอนแลว ในทนสร
ไวใน ไดรฟ C) และสามารถคลกเลอกโฟลเดอรอ
แลว ในโฟลเดอรเกบงาน ในทนใชชอ images
• หมายเลข 6 ท HTTP address : เปนการกาหนดทอย บน Server ถายงไมมทอยบน
คลกเลอกเครองหมายถก เพอตรวจสอบ
เพราะ Unix ถอมอนกนเปนคนละตวกน
Server ไมตองใส หรอถามแตไมตองการให Dreamweaver สงขนไปกไมตองใส• หมายเลข 7 Case - sensitive links :ใหท
ตวอกษร เล หญ ซงจะเหนขอแตกตาง ถา Server เปนระบบ Unixก-ใวาตวอกษร เลก-ใหญ ไมเห
2. ใสชอ Site name เลอกโฟลเดอร และตงคาตาง ๆ ดงภาพ แลวคลก Ok ทป ดานลาง ม
3. โปรแกรมจะแสดงชอเวบไซต โฟลเดอรทเกบเวบไซตทเรากาลงจะสรางขนใหม และโฟลเดอรเกบภาพ ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 19/96
หนา 20/96 เนรมตเวบสวยดวย Dreamweaver
การจดการโครงสร ในการสรางเวบไซตดวย นมาแลว โปรแกรมจะสรางโฟลเดอรใหมสาหรบเก กวธหนง เราสามารถสรางโฟลเดอร เกบงานไวทไดร ละประเภท และเมอใชโปรแกรม Dreamweaver ให ตามตองการ
างโฟลเดอร Dreamweaver 8 เมอสรางเวบไซต หรอ Site งานขบขอมลการทางานในเวบไซตนน ทงหมด หรออ C และสรางโฟลเดอรยอย ๆ ในการเกบงานแต
เราเลอกโฟลเดอรทสรางเตรยมไวสาหรบเกบเวบเพจได
การสรางเวบเพจใหม ในการสรางเวบเพจใหม วธ ดวยกน คอ การสรางเวบเพจใหมในหนาต Files
กอนสรางเวบ ทานตองสรางโครงสราง และกาหนด Site ตามขนตอนในเรองท 1 ใหเรยบรอยเสยกอน จา ขนตอน ตอไปน
1. ไปท
2. หนาตางเวบเพจ งภาพ
ทจะเกบไวในเวบไซตของเรา เราสามารถสรางได 2 าง New Document และการสรางเวบเพจใหมในพาเนล
• การสรางเวบเพจใหมในหนาตาง New Document
กนนจงสรางหนาเวบแตละหนา ซงทานสามารถดาเนนการไดตาม
เมน File แลวคลกเลอก New ดงภาพ
New Document จะปรากฏขน ใหคลกเลอกแทบ General เพอเลอกหวขอการสรางใหม และในชอง Category คลกหวขอ Basic page แลวเลอก HTML ด
3. จะเกดหนาเวบเพจใหมขน และพรอมทจะสรางงาน
4. เมอออกแบบเวบเพจเสรจแลว จะทาการบนทก ใหไปท File>save จะเกดหนาจอขน ดงภาพ
5. ใหตงชอเวบเพจ ในทน เราจะตงชอเวบเพจปรากฏอยในเวบไซตหรอ Site งานทเราสรางข
นวา index.html แลวคลก save ชอเวบเพจนจะน ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 21/96
หนา 22/96 เนรมตเวบสวยดวย Dreamweaver
• เนล File
1. คลกเมาสปมขวาทโฟลเดอร Site งาน
เปลยนชอ ใหตงชอไฟลงานตามตองการ
3. ดงตวอยาง สมมตเวบเพจนเปนหนาหลก ใชชอวา index.html กพมพชอแลวกด Enter
การสรางเวบเพจใหมในพาเปนการสรางไฟลงานใหมทเกบไวใน Site งานทงาย สะดวก รวดเรว มขนตอน ดงตอไปน
แลวคลกเลอก New File
2. จะปรากฏเวบเพจใหม ชอ Untitled (แปลวา ไมมชอ) ทมนามสกล .html พรอมสาหรบการ
การสรางโฟลเดอรใหมในเวบไซต ในกรณทเราตองการสรางโฟลเดอรใหมเพอเกบภาพ หรอแยกจดเกบเรองตาง ๆ ไมใหปะปนกน เราจาเปนตองสรางโฟลเดอรใหม การสรางโฟลเดอรใหม สามารถทาไดดงน
เลอก New Folder
2. ใหตงชอโฟลเดอรใหม สมมตโฟลเดอรนไวเกบขอมลบคคลทใชในเวบไซตน ใหชอโฟลเดอรวา personal พมพชอแลวกด Enter จะไดดงภาพ
1. คลกเมาสปมขวาทโฟลเดอรทเกบ Site งาน แลว
การเปลยนชอไฟลและโฟลเดอร การเปลยนชอไฟลและโฟลเดอร สามารถ
กระทาไดงาย โดยคลกเมาสขวาทไฟล หรอโฟลเดอรทตองการจะเปลยนชอ แลวเลอก Edit >Rename จะเกดลกษณะพรอมทจะเปลยน แลวพมพชอใหมทตองการ
การลบไฟลและโฟลเดอร การลบไฟลและโฟลเดอร ทาไดโดยคลกเมาสขวา ทไฟล หรอโฟลเดอรทตองการลบ แลวเลอก Edit >Delete ไฟลหรอโฟลเดอรจะถกลบไป ดงภาพ
การเปดเวบเพจใหม ในการเปดเวบเพจใหม ใหดบเบลคลกไฟลทสรางไว เพอทจะเขาไปทางาน เวบเพจจะถกเปดหนาวางขนมาใหเราออกแบบการทางาน
เนรมตเวบสวยดวย Dreamweaver หนา 23/96
หนา 24/96
คลกเมา อตงคาตาง ๆ P คอ
1. หมวด Appearance เปนการกาหนดสวนประกอบตาง ๆ บนหนาเวบ ดงภาพ
กอนทจะเรมตนการออกแบบทางาน เราควรทจะกสขวาทหนาเวบ แลวเลอก Page Properties เพage Properties จะแบงออกเปน 5 หมวด โดยในหมวดแรก
าหนดรายละเอยดของหนาเวบเสยกอน โดย
ส า ดงน
พนหลงของหนาเวบเพจ
5 Background image กาหนดภาพทเปนพนหลงของหนาเวบเพจ หมายเลข 6 Repeat กาหนดใหเลอกภาพ Background วาใหกระทาซาอยางไร
(no-repeat ไมซา, repeat เปนแบบปเตมพนท, repeat-x ปไปตามแนวนอน, repeat-y ปไปตามแนวตง)
ขอบซายของหนาเวบ
บบนของหนาเวบ างของหนาเวบ
2. หมวด 2 Links เปนการกาหนดคณสมบตของ Links มรายละเอยด ดงน
วนประกอบตาง ๆ ในหนาน มการกาหนดค หมายเลข 1 Page font ใหเลอกรปแบบตวอกษรทจะใชในเวบเพจ หมายเลข 2 Size กาหนดขนาดของตวอกษร หมายเลข 3 Text color กาหนดสของต หมายเลข 4 Background color กาหนดส หมายเลข
วอกษร
หมายเลข 7 Left margin กาหนดระยะ หมายเลข 8 Right margin กาหนดระยะข หมายเลข 9 Top margin กาหนดระยะขอ หมายเลข 10 Bottom margin กาหนดระยะขอบล
อบขวาของหนาเวบ
หมายเลข หมายเลข กษรของลงค
นดสใหกบลงค
1 Link font กาหนดตวอกษรของลงค 2 Size กาหนดขนาดตวอ
หมายเลข 3 Link color กาห
เนรมตเวบสวยดวย Dreamweaver
หมายเลข 4 Rollover links การกาหนดสเมอเมาสลากผาน หมายเลข 5 Visited links กาหนดสมอไปท Link นแลว หมายเลข 6 Active links การกาหนดส Link ทใชงานได หมายเลข 7 Underline style ก นดรปแบบการขดเสนใตใหกบลงค
3. หมวด 3 Headings เปนการกาหนดคณสมบตหวขอของเวบเพจ มรายละเอยด ดงน าห
ปแบบตวอกษรหวขอทจะปรากฏบนหนาเวบ วอกษรทใชสรางหวขอบนหนาเวบ
หมายเลข 1 Heading font กาหนดร หมายเลข 2 Heading 1-6 กาหนดขนาดต
4. หมวด 4 Title/Encoding เปนการกาหนดชอใหสวนไตเตลและกาหนดชดตวอกษรทใชของงน เวบเพจ มรายละเอยด ด
เวบเพจ สาหรบ
ows) ถาตองการใชภาษาไทย
5. หมวด 5 Tracing Image เปนการกาหนดคณสมบตของรปทใชเปนแบบในการสรางหนาเวบเพจ มรายละเอยด ดงน
หมายเลข 1 Title กาหนดสวนไตเตลหรอชอหวเรองใหเวบเพจ หมายเลข 2 Document type กาหนดประเภทของ หมายเลข 3 Encoding กาหนดรปแบบภาษาของตวอกษรทใชในเวบเพจการแปลงตวอกษรเพอเปนภาษามาตรฐาน โดยใหเลอก Thai (Wind
เนรมตเวบสวยดวย Dreamweaver หนา 25/96
หนา 26/96 เนรมตเวบสวยดวย Dreamweaver
จะแสดงบนหนาหมายเลข 1 Tracing Image ใหเลอกไฟลภาพทจะใช หมายเลข 2 Image Transparency กาหนดคาความโปรงใสของภาพทเวบเพจ
การ ในการเพ ไดงาย ๆ ไมวาจะพมตาราง รปภาพ หรอแบบฟอรมตจะเรยกองคประโดยเราสามารถเครองมอตาง ๆดงตวอยาง ถาเราต
ใหไปทเครองมอรป
เพมและแกไของคประกอบบนหนาเวบ มและปรบแตงองคประกอบบนหนาเวบ สามารถทาาง ๆ ในโปรแกรม Dreamweaver กอบเหลานวา Object (ออบเจกต) สรางออบเจกตนได โดยอาศยกลม ทไดกลาวไวแลวในตอนตน
องการนาภาพเขา ในโปรแกรม
ซงอยในกลม Common เมอเลอกภาพทตอโปรแกรม ภาพก
เคอรเซอรอย
ถาเราจะจออบเจกต ใหจดดา 3 จInspector กาหนดรายละเอ
สาหรบกา ม และปรบแตงตวหนงสอ กาหนดขนาด กาหนดสดานลาง
งการไดแลว ใหคลกแทรกภาพเขาจะปรากฏในหนาเวบ ณ ตาแหนงท
เมอนาภาพเขาโปรแกรมไดแลว ดการปรบแตงภาพ หรอ
คลกทภาพนน ๆ จะเกอดรอบภาพ และเกด Property
ของภาพดานลาง เพอใหยดตามตองการ
รพ พตวหนงสอ สามารถพมพลงบนหนาเวบไดเลย และอน ๆ ไดท Properties
การใสหวเรองบนหนาเวบ
การใสห เราสามารถพมพชอหวเรองทต
วเรองบนหนาเวบ เมอเราเปดเวบไซตขนมา ในชอง Title บน Toolbar องการลงไปไดเลย
ตอจากนนเลอกคาสง File>Save เพอบนทก แลวกดปม F12 ด ชอหวเรองของหนาเวบบนหนาตางบราวเซอร ซงจะปรากฏชอตามทเราตงไว ดงภาพ
การใช การใชงานภาษาไทยใน Dreamweaver 8 ซงในเวอรชนน เราสามารถพมพภาษาไทย ในหนาตาง Design w งบราวเซอรทนท สาหรบผท นไดวาขอความทเราพมพท Design
งานภาษาไทยใน Dreamweaver 8
Vie ไดเลยและขอความภาษาไทยกจะปรากฏในหนาตาตองการเขาไปแกไขโคด HTML ในหนาตาง Code View จะเห
View จะแสดงเปนเลขรหส ในหนาตาง Code View ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 27/96
หนา 28/96 เนรมตเวบสวยดวย Dreamweaver
ถาเรา esign View ตองกาหนดใหภาษาทใชในหนาเวบ แลวเลอ roperties ดงภาพ
ตองการจะอานโคดออก เปนภาษาไทยเหมอนทเราพมพท Dเวบเปน Thai (Windows) โดยเลอกเมนคาสง Modify>Page Properties หรอคลกขวาท
ก Page P
ตอไป ใหเลอกหวขอ Title/Encoding ทชอง Encoding เลอก Thai (Windows) ดงภาพ
เมอเลอก Thai (Windows) แลว โคดทเปนรหสจะแสดงเปนภาษาไทยเหมอนทเราพมพ ทหนาตาง Design View ดงภาพ
การเพม
ก า ร เ พ ม -Dreamweaver ทText>Font>Edit Font List
ขนตอนการเพภาพประกอบ
-ลบฟอนต ล บ ฟ อ น ต เ พ อ ใ ช ง า น ใ น าไดโดย เลอกคาสงทเมนบาร
ดงภาพ
มฟอนต มรายละเอยดดงน ด
Font list เปนฟอนตทมอยแลว 1. หมายเลข 1 2. หมายเลข 2 Available fonts เลอกฟอนตจาก windows ทตองการเพม ด ตวอยาง ถาตองการง
เลอกฟอนต ชอ AngsanaUPC ใหคลกเลอก
3. หมายเลข 3 เมอเลอกฟอนตไดแลว ใหคลกปม เพอสงมาทชองหมายเลข 4 4. หมายเลข 4 Chosen fonts เปนชองทวางฟอนตทถกเลอกเพมขนมา 5. หมายเลข 5 สามารถจดลาดบของฟอนตทใชบอย ๆ ใหเลอนขนมาอยลาดบแรก ๆ ได โดยใช
ลกศรเลอนขน หรอลกศรเลอนลงเพอตองการจดใหฟอนตเลอนลงจากตาแหนงเดม 6. หมายเลข
• การลบฟ วเลอกฟอนตท
ตองการลบในช
6 เมอเลอกฟอนตไดตามตองการแลว ใหกดปม OK
การลบฟอนต อนต ทาไดโดย เลอกคาสงทเมนบาร Text>Font>Edit Font List แล
อง Font list และคลกปม แลวคลกปม OK
เนรมตเวบสวยดวย Dreamweaver หนา 29/96
หนา 30/96 เนรมตเวบสวยดวย Dreamweaver
การปรบแตงขอความบนเวบเพจ การใสข
การใสข เลย หรอจะ copy ขอความมาจากไฟล ดงภาพ
อความบนหนาเวบ อความบนหนาเวบเพจ กระทาไดงาย ๆ โดยการพมพบนหนาเวบเพจได
word หรอจากโปรแกรมอน ๆ แลวนามาวางบนหนาเวบเพจกได
ถาเราตองการขนยอหนาใหม ตรงขอความ "ตอมา ไดมการจตองการจะขนยอหนาใหมแลวกด Enter ทแปนพมพ ขอความนน
ดวางขน ดงภาพ
จากตวอยาง ดตง...ใหเราตงเคอร เซอรหนาขอความท จะขนยอหนาใหม ให และเกดการแทรกบรรท
ถาเราไมตองการขนยอหนาใหม แตตองการขนบรรทดใหม ใหกด <Shift + Enter> หรอคลก
เมาสทปม ในกลมเครองมอ Text จะเปนการแทรก Line Break ในขอความตาง ถาเราตองการขนบรรทดใหม ตรงขอความ "ตอมา ไดมการจดตงองการจะขนบรรทดใหมแลวกด <Shift + Enter> ทแปนพมพ กจะได
รงตาแหนงทเราตองการ ดงตวอย ...ใหเราตงเคอรเซอรหนาขอความทต ดงภาพ
ตอไป ถาเราตองการจะยอหนา ใหคลกเมาสท สามเหลยมเลก ๆ ขางปม BR ดงภาพ
ซงอยในกลมเครองมอ Text และเลอก Non-Breaking Space
งเคอรเซอร ทหนาคาวา "ศนย... และบรรทดท 5 ตอไป เราตองการยอหนา บรรทดแรก ใหเราต
คาวา "ตอมา...ใหคลกทรป ดงภาพ โดยคลกตด ๆ กน จนกวาจะยอหนาเขาไปไดตามตองการ ดงภาพ
การตกแตงและจดรปแบบขอความ อกคาสง Edit >Se งภ
กอนทจะตกแตงและจดรปแบบขอความ เราตองเล อความทงหมดกอน โดยเลle All หรอคลกเลอกทแทก <body> จะไดผลลพธ ด าพ
อกขct
เมอเลอกข Inspector หรอใชกลมเครองมอ Text ท โปรแกรมจะเปด เครองมอ Properties งภาพ
อความแลว เราปรบแตงและจดรปแบบขอความ โดย Property แถบ Insert Bar ในทน ใหไปท Window และเลอก Properties
เรากสามารถตงคาฟอนต ขนาด ส ตาแหนงของขอความ ด
เมอเปดหน เราสามารถกาหนดขนาด ประเภทตวหนงสอหร ขอความเปน ตวส
าจอเครองมอ ทจะใชปรบแตงตวหนงสอ หรอขอความ ขน อฟอนต สของตวอกษร ตาแหนง และอน ๆ สมมตวา ตองการให
เนรมตเวบสวยดวย Dreamweaver หนา 31/96
หนา 32/96 เนรมตเวบสวยดวย Dreamweaver
นาเงน ง งเวบเพจ และหวขอเปนตวหนา สามารถกระทาไดโดยใชเอย ขอความตาแหนงชดซายขอเครองมอดงทกลาวมาแลว ขางตน จะไดผลลพธ ดงภาพ
เครองมอทใชจดตาแหนงและตกแตงขอความ ทควรร มดงน
การจดตาแหนงขอความโดยใชปม
1. จดชดซายของเวบเพจ 2. จดอยก3.
งกลาง จดชดขวา
4.
จดใหข
การจดยอหนาโดยใช
อความอยเตมบรรทด
ปม
5. คลกทปม Text Indent เพอจดยอหนาของขอความใหเขาไปมากนอยไดตามตองการ
6. ถาจดยอหนาเขาไปมากเกนไป กสามารถคลกปม Text Outdent เพอยกเลกยอหนา ใหไดระยะหางตามตองการ
การใส Bullet และตวเลขกากบในแตละบรรทด
7. ใชจดลาด กษณรปแบบ ตาง ๆ 8.
บเนอหาในแตละบรรทดดวย Bullet หรอสญลใชจดลาดบเนอหาในแตละบรรทดดวยตวเลข
การยอนกลบเพ ในการทางานออกแบบเว ดพลาดได เราสามารถยอนกลบไป
อแกไขขอผดพลาดดวยพาเนล History บเพจ เมอทาไปเรอย ๆ อาจเกดขอผ
แกไขขอผดพลาดได โดยไปทเมนบาร Window>History หรอกดคย < Shift+F10> ดงภาพ
างานทกขนตอน โดยขนตอนลาสด จะเรยงอยลาด เมอเปดพาเนล History จะเหนบนทกการท บ
นสดของรายการ ขนตอนกอนหนานจะอยลาง ๆ ดงภาพ บ
างานหลาย ๆ ขนดวยพาเนลน เราทาไดโดย คลกเลอนแถบ การยอนกลบการท ไปยงขนตอนท
เราตองการยอนกลบไป โดยจะเลอนไปทละขนตอน หรอหลายขนตอนได ดงภาพ
าซาขนตอนการทางาน เราสามารถสงใหทาซาขนตอนการทางานทเราตองการจะให การท ทาซา
ในพาเนล History ได โดย
1. คลกเลอกขนตอนทตองการใหซา
เนรมตเวบสวยดวย Dreamweaver หนา 33/96
หนา 34/96 เนรมตเวบสวยดวย Dreamweaver
2. คลกท ม ป ทอยมมลางดานซายมอ ดงภาพ
การบนทกเวบเพจ ม ลว การทจะบนทกงาน ใหเลอกคาสง File>Save As เพอบนทกไฟลใ
เ อเราออกแบบเวบเพจไดตามตองการแนชอ ดงภาพ ใหม
2. ใหตงชอไฟล โดยใสนามสกลเปน .html 3. คลกปม Save เพอสงบนทกไฟล
จากนนใหทาตามขนตอน ดงน
1. เลอกโฟลเดอรทเกบไฟลงาน
นอกจากน ยงมรปแบบในการ คอ
• วธท 1 เลอกคาสง File>Save • วธท 2 เลอกคาสง File>Save All การเปลยนแปลงแกไข • วธท 3 เลอกคาสง าการบนทกเวบเพจและอพโหลดไปยง
เซรฟเวอร
• วธท 4 คลกเลอกรป
บนทกเวบเพจทควรรอก 4 วธ
เพอบนทกไฟลในชอเดม บนทกไฟลทงหมดทม
File>Save to Remote Server ท
น บน Insert Bar เพอบนทกไฟลเวบเพจใหมโดยตงชอใหมตามท บเพจในชอเดมไดอยางรวดเรว โดยดาเนนการไดดงน
1. คลกเมาสขวาทแถบกล อกคาสง Standard ดงภาพ
ในกลมเครองมอ Standard Bar เราตองการ หรอบนทกไฟลเว
มเครองมอ Document และเล
2. คลกเมาสบนทกไฟล งภาพ เวบเพจทเรากาลงทางานอย ด
แตถาเราออกแบบงานเว ไดมการบนทก หรอมการแกไขเปลยนแปลงและยงไมไดบ เครองหมาย * ปรากฏเตอนอยทมมบนขวาของชอไฟล ด
บเพจเสรจแลว และยงไมนทก โปรแกรม Dreamweaver จะม
งภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 35/96
หนา 36/96 เนรมตเวบสวยดวย Dreamweaver
การดผลล งเวบเพจบนหนาตางบราวเซอพธขอ ร เมอเราบนทกเวบเพจเสรจเร บเพจทเราออกแบบวาเวลาแสดงผลบนหนาตางบราวเซอรจะมผลตามท าเนนการได 3 วธการ ดงน
วธท 1 กดปม < F12 > วธท 2 ดบเบลคลกท องคอมพวเตอร วธท 3 เลอกคาสง ดงภาพ
ยบรอยแลว และ ตองการทจะดเวตองการหรอไม อยางไร เราสามารถด
ทคยบอรด ไฟล html ทเราบนทกเกบไวในเคร
File>Preview in Browser>IEexplore
หลงจากนนผลลพธ จะปรากฏบนหนาจอในหนาตางบราวเซอร ดงภาพ
ตกแตงเวบเพจดวยกราฟก เตรยมภาพเพอใชในเวบเพจ
ในการออกแบบเวบเพจ นอกจากจะมขอความแลว ภาพนบวาเปนสงสาคญทจะชวยทาใหเวบเพจนน ๆ มความนาสนใจมากยงขน
การทจะนาภาพมาใชในเวบเพจ เราตองทาความเขาใจถงความแตกตางระหวางไฟลภาพแตละชนด เพอทจะไดเลอกใชไดตามความเหมาะสม สาหรบไฟลภาพทควรรจกและนามาใชบอย ๆ ในงานออก บ
ไมได
บภาพถายทตองการใหมลกษณะโปรงแสง แตไฟลทไดหลงการบบอดจะมIF
แบ เวบเพจ มดงน
.JPEG เหมาะสาหรบภาพถาย หรอภาพทมจานวนสมาก ๆ ถง 16.7 ลานส ใชกบภาพโปรงแสง
.GIF ใชสาหรบภ มลกษณะเปนลายเสนหรอภาพทตองการสรางเปนภาพโปรงใส แตใชสไดเพยง 256 สเทานน เชน ภาพการตนและภาพเคลอนไหว
.PNG สาหร
าพท
ขนาดใหญและมคณภาพมากกวาไฟล JPEG นอกจากน ยงแสดงผลไดเรวกวาแบบ .G
การจดเกบภาพทใชในเวบเพจ ในการนาภาพมาใชในเวบเพจ เพอความสะดวกและรวดเรวในการทางานโปรแกรม Dreamweaver ควรทจะเกบภาพทงหมดไวในโฟลเดอร images ซงเปนโฟลเดอรยอยในไฟลเดอร organization ทเกบเวบไซต ซงอยในเครองคอมพวเตอรของเรา ดงภาพ
• หมายเลข 1 คอ โฟลเดอรทเกบเวบไซต • หมา • หมายเลข
ยเลข 2 คอ โฟลเดอรทเกบภาพทงหมดทจะนามาใชในเวบไซต 3-5 คอ ไฟลเวบเพจทสรางขนในเวบไซต
การแทรกภาพในเวบเพจ การแทรกภาพในหนาเวบเพจ เราสามารถทาได โดยการคลกทปม ในกลมเครองมอ Common และเรยกไฟลภาพทเราจดเกบไวในโฟลเดอร images นามาใชบนหนาเวบได ตามขนตอน ดงน
1. วางเคอรเซอรในตาแหนงทตองการจะวางภาพ
2. จะปรากฏหนาจอ อกภาพทตองการ ตามขนตอนดงภาพ
บนเวบเพจ แลวคลกทสามเหลยมเลก ๆ ขางรปตนไม และเลอก Images ดงภาพ
Select Image Source ใหเลอกโฟลเดอร images และเล
เนรมตเวบสวยดวย Dreamweaver หนา 37/96
หนา 38/96 เนรมตเวบสวยดวย Dreamweaver
ขนตอนท 1 ขนตอนท 2 ขนตอนท 3
จะไดภาพทต
เลอกโฟลเดอร images ซงอยในโฟลเดอร organization เลอกภาพทตองการ เมอเลอกภาพไดแลว คลกปม OK
องการ บนหนาเวบเพจ ดงภาพ
วามเชอมโยงของภาพ และอน ๆ ได ดงภาพ
การปรบแตงรปภาพ นาภาพเขาเวบเพจไดแลว เราสาเมอ มารถปรบแตงภาพไดโดยใช Properties ของภาพนน ๆ
โดยคลกทภาพจะเกดจดดา 3 จดรอบภาพและเกด Properties ของภาพ ซงสามารถปรบความกวาง ความสงของภาพ ใสชอภาพ กาหนดค
ะเอยดในการตกแตงภาพสามารถกระทาไดหลายประการ ดไดจากภาพ ดงน รายล
หมายเลข 1 คอ ความกวางของภาพ เราสามารถแกไขและปรบขนาดรปโดยใสตวเลข
บขนาดรปโดยใสตวเลขได
ปภาพ ไฟลรปภาพ
หมายเลข 7 กาหนดความหนาของเส
า พ าเวบ
นอกจาก การกาหนดขนาดของภาพโดยใสตวเลขทชอง W และ H ดงทไดกลาวมาแลว เรายงสามารถยอ -ขยายขนาดของภาพได ดงภาพ
ไดตามตองการ หมายเลข 2 คอ ความสงของภาพ เราสามารถแกไขและปร
ตามตองการ หมายเลข 3 ชองใสชอของร หมายเลข 4 แสดงทเกบ หมายเลข 5 ใชกาหนดการเชอมโยงภาพไปยงขอมลหรอเวบไ หมายเลข 6 ไวใสขอความกากบภาพ
ซตอน
นขอบภาพโดยกาหนดเปนตวเลข ตงแตเลข 1 จะขอบบางสด
หมายเลข 8 กาหนดตาแหนงก รวางภา หมายเลข 9 กาหนดตาแหนงการวางภาพบนหน
เนรมตเวบสวยดวย Dreamweaver หนา 39/96
หนา 40/96 เนรมตเวบสวยดวย Dreamweaver
ใหเราวางเมาสทจดดาทมมภาพดานลาง เมอเกดลกศรสองทางเอยงใหดหดไดตามตองการ แตถาตองการใหภาพยดหดไดตามสดสวนของภาพ
หมายเลข 1 กดเมาสคางไว แลวดงย ใหกด Shift คาง ข
หม ล โดยใสคาตวเลขทชอง W และ H เมอเปลยนแปลงคาควา ว ใหกลบมาสขนาดเดมของภาพตนแบบทเรานาเขามา ใหคลกทปม
ไว ณะยดหดภาพ ายเ ข 2 สาหรบการกาหนดขนาดภาพมก าง ความสงของภาพไปแลว ตองการปรบภาพ
ทอยระหวางชอง W และ H กจะไดขนาดของภาพเดม
การใสกรอบใหกบรปภาพ เมอนาภาพมาวางบนเว อความสวยงาม หรอ
ตองการเนน ดานนการได บเพจแลว เราตองการทจะใสกรอบใหกบภาพเพ
โดยใสคาตวเลขในชอง Border ใน Property Inspector ดงภาพ
การจดวางภาพใหเขากบขอความ การจดตาแหนงของภาพใหเขากบขอความทมอย จะทาใหเวบเพจดสวยงาม นาสนใจ ซงเรา
สามารถจดตาแหนงของภาพไดจาก Align ดงภาพ
รปแบบการวางต
1.
3. Top : ขอบบนของภาพตรงกบแนวบนสดของของขอความ
8. Abs9. Lef10. Rig
ตวอยางก ภาพกบขอความ ในลกษณะตาง ๆ ดงน
1. เลอกใช วามตอจากภาพ ดงภาพ
าแหนงภาพ มดงน
Default : เปนการจดเรยงภาพและขอความตามบราวเซอรทใช 2. Baseline : ขอบลางของภาพตรงกบแนว Baseline ของขอความ
4. Middle : กงกลางของภาพตรงกบแนว Baseline ของขอความ 5. Bottom : ขอบลางของภาพตรงกบแนวลางสดของของขอความ 6. Text Top : ขอบบนของภาพตรงกบแนวบนสดของขอความ 7. Absolute Middle : กงกลางของภาพตรงกบกงกลางของขอความ
olute Bottom : ขอบลางของภาพตรงกบแนวลางสดของของขอความ t : ภาพอยทางซายโดยมขอความลอมอยทางขวา ht : ภาพอยทางขวาโดยมขอความลอมอยทางซาย
ารวางตาแหนง
Default เปนคาปกต ของการพมพขอค
2. เลอกใช Top จะแสดงผลลพธของขอความทอยในแนวดานบนของขอบภาพ ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 41/96
หนา 42/96 เนรมตเวบสวยดวย Dreamweaver
3. เลอกใช Middle จะแสดงผลลพธของขอความทอยกงกลางของภาพ ดงภาพ
จะแสดงผลลพธภาพอยทางซายมอ และขอความลอมรอบอย4. เลอกใช Left างขวา ดงภาพ ท
การกาหนดระยะของรปภาพจากขอบเวบเพจหรอสงทอยรอบ ๆ ภาพ เมอ ป การแลว เรายงสามารถปรบระยะหางของรปภาพจากขอบเวบ
เพจหรอเรา รบขนาดของภาพไดตามตองสงทอยลอมรอบภาพนน ๆ ได โดยการกาหนดตวเลขทชอง V space ซงเปนระยะหางของ
แนวตง และ H Space เปนระยะหางของแนวนอน ท Property Inspector ดงภาพ
1 คอ ระยะหางของภาพกบหวขอเรอง 1. หมายเลขวหนงสอดานขวามอ
อดว
าพกบขอบหนาเวบและสงทอยรอบภาพ โดยกาหนดระยะหางของ V Space = 20 และ H Space = 20 ผลลพธกจะไดตามหมายเลข 1-4
2. หมายเลข 2 คอ ระยะหางของภาพกบต หมายเลข 3 คอ ระยะหางของภาพกบ3. ตวหนงส านลาง
4. หมายเลข 4 คอ ระยะหางของภาพกบขอบของเ บเพจ 5. หมายเลข 5 คอ กาหนดระยะหางของภ
การนาภาพมาแสดงเปนพนหลงเวบเพจ
ในเวบเพจหนง ๆ นอกจากภาพ ขอความ ตาราง และอน ๆ ทนามาประกอบเปนเวบเพจแลวเรายงสามารถนาภาพเลก ๆ 1 ภาพมาเรยงซากน เพอปเปนพนหลงของเวบเพจได แตขอสาคญภาพทจะนามาใชเปนพนหลง ตองเปนภาพทมลวดลายนอย สออน ๆ ดไมรกตา เพราะถาเปนภาพทมรายละเอยดมาก จะทาใหตวหนงสอในหนาเวบนน อานไดยาก ไมชดเจน โดยเราจะเรมตนดวยการนภาพทจะใชเปนพนหลงมาเกบไวในโฟลเดอร images ของเวบไซตเสยกอน แลวคอยดาเนนการตา
า
1.
มขนตอนตอไปน
ไฟลภาพทจะนามาใชเปนพนหลงของเวบเพจ ดงภาพ
2. เลอกคาสง Modify >Page Properties...หรอกด <Ctrl+J> ดงภาพ
3. หนาจอ Page Properties Browse... เพอเลอกภาพทจะนามาใชเปนพนหลง
จะเกดขน ตอจากนน ใหคลกปม
4. จะเกดหนาจอ1. หมายเลข 1 เล
Select Images Source ใหดาเนนการตามขนตอน ดงน อกโฟลเดอรทเกบเวบไซต
เนรมตเวบสวยดวย Dreamweaver หนา 43/96
หนา 44/96 เนรมตเวบสวยดวย Dreamweaver
2. หมายเลข 2 จะพบโฟลเดอรยอย คอ images ทเกบรปภาพ ใหดบเบลคลกทโฟลเดอรนเพอเปดหาภาพทตองการ ดงภาพ
3. เมอไดภาพทตองการ ใหคลกเลอกภาพ แลวคลก OK
5. จะเกดหนาจอ Page Images จะปรากฏทอยของไฟลภาพและชอภาพท ผลลพธกอนแสดงผลทหนาจอ ตอจากนน ใหคลกปม
Properties อกครง ในชอง Background เราเลอก ตอไป ใหคลกเมาสทปม Apply เพอด
OK ดงภาพ
หนาเวบเพจของเรา จะถกปพนหลงดวยภาพทเราเลอก ดงน
การแกไขรปภาพ ภาพทนาเขามาวางบนหนาเวบเพจ สามารถกระทาได โดยใชเครองมอ
ปรบแตงภาพ ใน Property Inspector ดงภาพถาเราตองการแกไข
จากภาพ เราจะใชกล อแตละตว มหนาทแตกตางกน ดงน
หมายเลข 1
มเครองมอ Edit ในการปรบแตงแกไขภาพ โดยเครองม
คอ
หมายเลข 2
เครองมอสงภาพทเลอกไปตกแตงในโปรแกรม Fireworks
คอ การลดขนาดภาพทใชในโปรแกรม Fireworks
หมายเลข 3 คอ การเล กสวนใดสวนหนงของภาพเพอใชตกแตง เราสามารถตดสวนของภาพเฉพาะทตองการ
อ โดยมขนตอนงาย ๆ ดงน
1. คลกเมาสทภาพ และคลกท เพอตดภาพทตองการ
2. คลกเมาสเลอนปมสดาทลอมรอบภาพ เพอเลอกสวนทตองการ แลวกด < Enter > เพอตดภาพ
3. ภาพจะถกตดสวนทไมตองการออก ตามทเราเลอก ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 45/96
หนา 46/96 เนรมตเวบสวยดวย Dreamweaver
หมายเลข 4 คอ การกาหนดใหภาพทปรบขนาดแลวเปนภาพตนแบบ เมอเราปรบขนาดroperty Inspector ในชอง W (ควาภาพท P มกวาง) และ H (ความสง) จนเปนทพอใจแลว และ
ตองการภาพนไปแทนภาพตนฉบบ ใหคลกท หมายเลข 5 คอ
หมายเลข 6
เครงมอปรบความสวาง/ความเขมสของภาพ
คอ ปรบความคมชดของภาพ
การสรางตารางบนเวบเพจ การสรางตาราง
ในการออกแบบเวบเพจ วเลข รปภาพ แผนภม กราฟ และอน ๆ แตม าหรบการนาเสนอขอมลจานวนนมาก งาย สบายตา เชน ตารางประวตบคลากร ในรปของแถ
การสรางตาราง างตารางไดตามตองการ เชน เราจะสร างขอบเซลกบขอความภายในเซล spacing) เปน 5 พกเซล และกาหนดให
สวนใหญแลวในหนาเวบเพจ จะมขอมลทเปนตวหนงสอ ต
สงหนงทจะเหนอยบอย ๆ ในหนาเวบเพจ คอ ตาราง ตารางเหมาะส มทงตวหนงสอ ตวเลข รปภาพ ทตองการจดระเบยบใหด
ตารางคะแนนของนกเรยน ตารางทะเบยนครภณฑ เปนตน ซงตารางจะอยวและคอลมน และจดวางไวในหนาเวบเพจอยางเหมาะสม
ใน Dreamweaver 8 มขนตอนงาย ๆ เพราะมเครองมอชวยสรางตาราง 4 คอลมน 4 แถว, มเสนขอบขนาด 2 พกเซล, ระยะระหว
(Cell padding) เปน 5 พกเซล, ระยะหางระหวางแตละเซล (Cell แถวแรกของตารางเปนหวขอ ดงภาพ
ข วธ คอ
• วธท 1 เลอกเมน Insert >Table ดงภาพ
นตอนในการสรางตาราง ม ใหเลอก 3
• กท วธท 2 ทกลมเครองมอ Common หรอกลมเครองมอ Layout เลอกคล
< Ctrl + Alt + T>
าตาง Table ใชสาหรบกาหนดรายละเอยดเกยวก
• วธท 3 กดทคยบอรด
โดยทง 3 วธน จะแสดงหน บตาราง ดงภาพ
ร
•
• หมายเลข 3 Table width : ความกวางของตาราง ม• หม ามห าราง • หมาย ล g : ระยะหางระหวางขอบเซลกบขอความภายในเซล • หม ละเซล ทงแนวตงและแนวนอน • หมายเล • หมายเล : กาหนดใหคอลมนแรกเปนหวข• หม วขอของเซล • หมายเล นดใหทงแถวและคอลมนแรกเปนหวขอของเซล • หมายเลข 11 Caption : กาหนดหวขอของตาราง • หมายเลข 12 Align caption : ดวางหวขอของตารางไวในตาแหนงทตองการ
ายละเอยดของตาราง สามารถอธบายได ดงน
• หมายเลข 1 s : กาหนดจานวนแถว หมายเลข 2 Columns : กาหนดจานวนคอลมน
Row
หนวยเปน พกเซล หรอเปอรเซนต ายเลข 4 Border thickness : คว นาของต
ข 5 Cell paddinเายเลข 6 Cell spacing : ระยะหางระหวางเซลแต
ข 7 None : ไมมการกาหนดหวขอของขอมลในตารางข 8 Left อของเซล
ายเลข 9 Top : กาหนดใหแถวแรกของตารางเปนหข 10 Both : กาห
จ
เนรมตเวบสวยดวย Dreamweaver หนา 47/96
หนา 48/96 เนรมตเวบสวยดวย Dreamweaver
o defau : ไมมการกาหนดคา ใชคาทกาหนดแบบอตโนมต คอ จดวางหวขอของตารางไวขางบนและจดวางตรงกลางของตาราง ดงภาพ
Top : จดวางหวขอของตารางไวดานบน
lt
o
ตรงกลางของตาราง และจดตาแหนง
าง และจดตาแหนงตรงกลางของตาราง o left : จดวางหวขอของตารางไวดานบน และจดตาแหนงชดซายของตาราง o right : จดวางหวขอขอ นงชดขวาของตาราง
• ry : เขยนคาอธบายเกยวกบตาราง แสดงใหเหนบนหนาเวบ •
o botto จดวางหวขอของตารางไวดานลm :
งตารางไวดานบน และจดตาแหหมายเลข 13 Summaหมายเลข 14 คลกปม OK เมอกาหนดคาตามตองการเสรจแลว
การปรบขนาดชองตาราง การใสขอมลและภาพในตาราง เมอเรากาหนดให ตารางม 4 คอลมน 4 แถว ระยะหาง
ระหวางขอความภายในเซลกบขอบเซล (Cell padding) เปน 5 พกเซล
ทงแนวตง และแนวนอน ตามความตองการ ดงภาพ
และระยะหางระหวางเซลแตละเซล (Cell spacing) เปน 2 พกเซล จะไดดงภาพ
เมอเราตองการทจะปรบแตงขนาดหรอยดหดชองตารางในคอลมนหรอแถว สามารถทาไดโดยวางเคอรเซอร ทเสน
เคอรเซอรจะเปลยนเปนลกศร 2 ทาง เราสามารถดงยดหด ได
การใสขอมลและภาพในตาราง งเคอรเซอรทชองเซลทตองการใสขอความและพมพข
เมอปรบแตงชองตารางไดตามตองการแลว เราสามารถใสขอความในตารางทเราสรางได โดยตอความลงไป ดงภาพ
เซลไหน ใหตงเคอรเซอรในเซลนน แลวใชเครองมอแทรกภาพ เพอเขาไปเลอกไฟลภาพ ทเกบอยในโฟลเดอร Images ไดแล
การใสภาพในตาราง กทาเชนเดยวกบการใสขอความ คอ ถาตองการใสภ ในาพ
วคลกปม OK ดงภาพ
ภาพจะเขามาปรากฏในชองเซลทเราเลอกตามตองการ ดงภาพ
เมอเรานาภาพเข โดยคลกทภาพ แลวกาหนดคาของภาพได
การกาห
สามารถใสทอย หรอคลก
ามาไวในเซลไดตามตองการแลว สามารถปรบแตงภาพไดจาก Property Inspector ดงภาพ
นดรายละเอยดของภาพ มดงน
หมายเลข 1 ใสชอภาพ หมายเลข 2 ปรบความสงของภาพ หมายเลข 3 ปรบความกวางของภาพ หมายเลข 4 แสดงทเกบไฟลภาพ หมายเลข 5 สาหรบการเชอมโยงไปยงขอมลหรอเวบไซตอน
เลอกไดจากโฟลเดอรดานขวาของชอง หมายเลข 6 ใสขอความกากบภาพ หมายเลข 7 กาหนดความหนาเสนขอบภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 49/96
หนา 50/96 เนรมตเวบสวยดวย Dreamweaver
หมหมายเลข 8 เลอกจดตาแหนงการวางภาพ
ายเลข 9 กาหนดตาแหนงของภาพในหนาเวบเพจ
การเลอกตาราง แถว คอลมน และเซล กตารางทงตารางเพอปการเลอ รบแตง สามารถเลอกทาได 3 วธดงน
1. เลอนเม ดการเลอ
2. 3.
าสไปทขอบตาราง จนเคอรเซอรเปลยนเปนรป แลวคลกจะเกกทงตาราง หรอ
ใหคลกทเซลใดกไดในตาราง และใชคาสง Modify>Table>Select Table หรอ งภาพ คลกทแทก <table> ทแถบสถานะดานลางของเวบทกาลงทางาน ด
การเล การเลอกแถว เคอรเซอร จะเปลยนเปนรปลกศร ใหคลกเลอก แถวจะถกเลอกท
อกแถว ทาไดงาย ๆ โดยนาเคอรเซอรไปวางทหนาแถวทตองการจะเลอก
งแถวตามตองการ ดงภาพ
อกวธหนงในการเลอกแถว คอ คลกเลอกเซลใดกไดในตาราง แลวคลกแทก < tr > ทกเซลในแถวนนจะถกเลอก ดงภาพ
การเลการเลอกคอล ไปวางไวบนคอลมนท
ตองการเลอก จะปรากฏล
อกคอลมน มน ดาเนนการคลาย ๆ กบการเลอกแถว คอ นาเคอรเซอร
กศรสดา ใหคลกเมาส คอลมนจะถกเลอกทงคอลมน ดงภาพ
การเลอกเซล
การเลอกเซล ทาไดงาย ๆ 3 วธ ดวยกน คอ
1. ถาตองการเลอกเซลเดยว ใหวางเคอรเซอรทเซลนน ๆ แลวคลกแทก < td > ขางลาง ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 51/96
หนา 52/96 เนรมตเวบสวยดวย Dreamweaver
2. ง กเลอกเซลแรก และกดคย < Shift > คางไว ว ลทงสอง
ตอ การเลอกหลายเซลทอยตดกนในตาราง ใหคลแล กดเซลสดทาย จะเปนการเลอกเซลทกเซลทอยระหวางเซ
3. ยตดกน ใหคลกเลอกทเซลแรกทต แลวกดคย < Ctrl > คางไว ถาตองการเลอกเซลทไมอ องการ แลวเลอกคลกเซลตอไป เซลจะถกเลอกไดตามความตองการ ดงภาพ
การปรบแตงรายละเอยดของตาราง การปรบแตงรายละเอยดของตาราง นอกจากจะใชเมาสในการปรบแตงแลว เรายยดของตารางได โดยใช Property Inspector เมอเราคลกทตาราง คอลมน หรอเซล จะปรบขนาด เซล แถว คอลมน ปรบความสง ความกวาง ความหนาของตาราง เล
บเพจได ดงภาพ
งปรบแตงรายละเอ ในตาราง กสามารถท อกตาแหนงการวางตารางบนเว
เม ดงน
• ชอของตารางได
• หมายเลข• หมายเลข• หมายเลข ผลกบทงตาราง • หมายเลข• หมายเลข• หมายเลข• หมายเลข• หมายเลข 11 คลกทปม เพอลบคาความสง หรอความกวางทกาหนดใหกบตาราง
อเราคลกเลอกตาราง จะเกด Property Inspector ของตาราง ใหเราปรบรายละเอยดได
หมายเลข 1 กาหนด• หมายเลข 2 กาหนดจานวนแถวและคอลมน • หมายเลข 3 กาหนดความกวางและความสงของชองตาราง
4 กาหนดสพนหลงของตาราง 5 กาหนดสพนหลงของตาราง 6 กาหนดระยะหางระหวางขอความในตารางกบขอบตาราง คานม 7 กาหนดระยะหางระหวางเซลทอยในตาราง และมผลทงตาราง 8 กาหนดรปภาพพนหลงใหกบตาราง 9 กาหนดการวางตาแหนงของตารางบนหนาเวบ 10 กาหนดความหนาของเสนขอบตาราง
การจดเรยงขอความในตาราง
การจดเรยงขอความในตาราง จะทาใหดสวยงาม เปนระเบยบ โดยเราสามารถจดเรยงขอความ ไดทงแนวตงและแนวนอน ดไดจากภาพ ดงน
จากภาพเป อกท Horz จาก Property Inspector
1. หมายเลข
นการจดเรยงขอมล ตามแนวนอน โดยคลกทชองตาราง แลวคลกเล
1 คลกเลอก เปนการจดใหขอมลอยชดซายของช
2 คลกเลอก
องตาราง
2. หมายเลข เปนการจดใหขอมลอยกงกลางของช
3 คลกเลอก
องตาราง
3. หมายเลข เปนการจดใหขอมลอยชดขวาของชองตาราง
ส บาหร เปนการจดเรยงขอมลแบบปกต คอ อยชดซายของชองตาราง
นการจจากภาพเป ยงขอมล ตามแนวตง โดยคลกทชองตาราง แลวคลกเลอกท Vert จาก
Property Inspector ดเร
เนรมตเวบสวยดวย Dreamweaver หนา 53/96
หนา 54/96 เนรมตเวบสวยดวย Dreamweaver
1. หมายเลข 1 คลกเลอก เปนการจดใหขอมลอยบนสดของชองตาราง
2. หมายเลข 2 คลกเลอก เปนการจดใหขอมลอยกงกลางของชองตาราง
3. หมายเลข 3 คลกเลอก เปนการจดใหขอมลอยลางสดของชองตาราง
เพม ว
การแทรกแถวและคอลมน การแทรกแถวและคอลมน มประโยชน คอ เมอเราทาตารางเสรจเรยบรอยแลวและตองการทจะ
แถ หรอคอลมนในชวงไหน สามารถทาไดตามตองการ ดงภาพ
การแทรกแถว จากภาพเราจะแทรกแถวเซอรในชองตารางทตองการ Table>Insert Row จะปรากฏแถวเพดานลาง
ใหเราตงเคอรแลวคลกขวา ใชคาสง
มขน ดงภาพน
การแทรกคอลมน
การแทรกคอลมน ใหเราตงเคอรเซอรในชองตารางทตองการจะแทรก ตวอยาง เราจะแทรกมน ระหวางชอ กบรปภาพ ใหเราตงเคอรเซอรทชองรปภาพแลวคลกขวา ใชคาสง Table>Insert
ดงภาพ คอลColumn
เม คอลมนเพมขนมา 1 คอลมน และอยระหวางคอลมนชอ
อใชคาสง Table>Insert Column จะปรากฏและคอลมนรปภาพ ดงภาพ
การแทรกหลายแถว/คอลมน
ถาเราตองการจะแทรกหลายแถว หรอหลายคอลมน ในทเดยวกน สามารถกระทาได โดยไมตองแทรกทละแถว ทละคอลมน ใหตงเคอรเซอรในชองตารางทตองการจะแทรก ตวอยาง เราตองการเพม 2 คอลมน ตอจากชอง ชอ กคลกตงเคอรเซอรในชองชอ แลวคลกขวา เลอกคาสง Table>Insert Rows or Columns...
กเลอก Insert Rows or Columns...แลวจะปรากฏหนอจอ ดงน เมอคล
กคลก
2. หมายเลข 2 ใหเลอกระบจานวนคอลมนทตองการแทรก ในทน เราตองการแทรก 2 คอลมน ก
3. หมายเลข 3 เลอกวาจะแทรกกอนหรอหลงคอลมน ในแถวทเลอก แลวคลกปม OK
ผลลพธ องการ ดงภาพ
จากภาพ เราตองกาหนด ดงน
1. หมายเลข 1 เลอกวาจะ อลมน จากตวอยาง เราตองการแทรกคอลมนแทรกแถวหรอคเลอกคอลมน
ใสเลข 2
จะปรากฏคอลมนเพมขน 2 คอลมน และปรบขนาดของคอลมนไดตามต
เนรมตเวบสวยดวย Dreamweaver หนา 55/96
หนา 56/96 เนรมตเวบสวยดวย Dreamweaver
การลบแถวและคอลมน เมอเราเพมแถว หรอคอล จะลบแถวหรอคอลมนทเราไมตองการใช
กน โดยดาเนนการงาย ๆ คอ หรอคอลมนทตองการจะลบ ดงภาพ มนได กสามารถท งานได
เชน คลกเลอกแถว
เม ารจะลบไดแลว ใหดาเน
ก รลวคลกขวา เลอกคาสง Table > Delete Column
อเลอกคอลมนทตองก นการ ดงน ดปม Delete ทคยบอรด ห อ ตงเคอรเซอรในชองตารางทตองการจะลบ แดงภาพ
รในชองตารางทตองการจะลบ แลวเลอกคาสง
หรอตงเคอรเซอ Modify >Table > Delete Column ดงภาพ
การลบแถวกทาเชนเดยวกบ Column คอ เลอกแถวทตองการจะลบ กดปม Delete ทคยบอรด
หรอตงเคอรเซอรในชองตารางทตองการจะลบ แลวคลกขวา เลอกคาสง Table > Delete Row หรอเลอกคาสง Modify >Table > Delete Row
การรวมและการแบงเซล ในการจดขอมลในตารางเพอความเหมาะสม เปนระเบยบเรยบรอย เราสามารถรวมและแบงเซล
ได
การรวมเซล ด
1. การรวมเซล จะต บเลอกเซลทตองการรวม
าเนนการตามขนตอน ดงน
องเปนเซลทอยตดกน โดยใหกด Ctrl คางไว พรอมกดงภาพ
2. คลกเมาสทปม ท Property Inspector ของเซล ดงภาพ
3. หรอคลกเมาสขวา เลอกคาสง Table > Merge Cells ดงภาพ
ผลลพธทได ในแถวแรกเซลทกเซลจะถกรวมกน ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 57/96
หนา 58/96 เนรมตเวบสวยดวย Dreamweaver
การแบ ดงน งเซล ดาเนนการตามขนตอน
1. การแบงเซล ใหคลกตงเคอรเซอรในเซลทตองการจะแบง ดงภาพ
2. คลกเมาสทปม ท Property Inspector ของเซล ดงภาพ
จานวน แลจะปรากฏหนาจอ ใหเลอกแบงเซลตามแถวหรอคอลมน ในทน เราจะเลอกเปน Column และระบเปน 2 Column วคลก OK ดงภาพ
ผลลพธทได องการ ดงภาพ ในแถวแรกเซลจะถกแบงออกเปน 2 คอลมนตามต
การขยายและลดความกวางเซลในตาราง ในเรองของเซล นอกจากจะรวมและแยกเซลแลว ในแตละชองเซล ยงสามารถทจะขยายและลด
ความกวางของเซลในตารางได
การขยายเซล
การขยายเซล เราสามารถเพ โดยตงเคอรเซอร ในชองเซลทตองการจะปรบ แล เพอเพมความกวางของเซลในแนวตง หรอเล เพมความกวางเซลตามแนวนอน ไปทางขวา ดงภาพ
การขยายเซล โดยใชค
มความกวางของเซลไดทงแนวตง และแนวนอนวคลกเมาสขวา ใชคาสง Table > Increse Row Span อกคาสง Table > Increse Column Span
าสง Table > Increse Row Span จะไดดงภาพ
ารขยายเซล โดยใชคาสง Table > Increse Column Span จะไดดงภาพ ก
การลดความกว
เมอเราปรบขยายช จะปรบชองเซล ใหกลบคนสสภาพเดมได ใหใช นสภาพเซลในแถว หรอใชคาสง Table >Decrease Column Span นการดงน
าย ง Table >Decrease Row
Span หรอ ดงภาพ
จากภาพเป
างของเซล องเซล ทงแนวตงและแนวนอนไดแลวแตเราตองการทคาสง Table >Decrease Row Span เปนการค
เปนการคนสภาพเซลในคอลมน โดยดาเน
1. คลกตงเคอรเซอ ซลทตองการจะคนสภาพเดมกอนปรบขย2. คลกขวา ใช คาส
รในเ
Table >Decrease Column Span
นการคนสภาพคอลมน เมอใชคาสงแลว จะไดดงภาพ
ปรบความส เราสามารถปร Inspector ได โดยถาเราปรบ
ความสงเปน 100% ความกว าเวบทเปดอย โดยดาเนนการดงน
1. คลกเลอกทตาราง ดงภาพ
งและความกวางของตารางใน Property Inspectorบความสงและความกวางของตารางใน Property
างเปน 100% ขนาดของตารางกจะถกขยายตามขนาดของหน
เนรมตเวบสวยดวย Dreamweaver หนา 59/96
หนา 60/96 เนรมตเวบสวยดวย Dreamweaver
2. กาหนดคา ความกวางในชอง ความสง ในชอง ท Property Inspector ของตาราง ดงภาพ
จะไดผลลพธ ดงภาพ
การปรบความสงและคว
เพอความเหมาะสมของตวหนงส จะปรบขนาดความสงและความกวางของชองเซลได โดยดาเนนการ ดงน
1. คลกเมาสในชองเซลทตองการปร
ามกวางของชองเซล อในชองเซล เราสามารถท
บขนาด ดงภาพ
2. กาหนดตวเลขความกวาง ความสง ท Property Inspector ของเซล จากตวอยาง กาหนดใหชองเซล กวาง 50% สง 40 พกเซล ดงภาพ
3. จะไดผลลพธ ดงภาพ
การกาหนดขนาดของชองเซล ถาเปนเปอรเซนต ใหใส % ดวย แตถาเปนพกเซล ใสแตตวเลข
เนรมตเวบสวยดวย Dreamweaver หนา 61/96
หนา 62/96 เนรมตเวบสวยดวย Dreamweaver
การซเราสามารถสร าเนนการ ดงน
1. คล
อนตาราง างตารางซอนตารางทมอยแลว เพอนาเสนอขอมลเพมเตมได โดยด
กเลอกเซล ทตองการจะแทรกตาราง ดงภาพ
กเมาสรปตาราง ทกลมเครอง Common เพอแทรกตารางใหม ดงภาพ 2. คล
าหนดรปแบบของตารางทจะแทรก แลวคลกปม OK ดงภาพ 3. ก
ผลลพธ ตารางใหม 2 แถว 2 คอลมน แทรกเขามาในเซลทเราตองการ ดงภาพ4. จะได
การกาหนดสใหกบพนตาราง เราสามารถใสส ใหกบตารางได โดย
กาหนดท Property Inspector ดงน
1. คลกเลอกตาราง ดงภาพ
2. กาหนด Property Inspector ของตาราง ดงภาพ
งใหกบตาราง 5. หมายเลข 3 Brdr color กาหนดสขอบตาราง 6. ตวอยาง เลอกใสสพนหลง ท Bg
color เปนสเหลอง ดงภาพ 7. จะปรากฏผลลพธ ดงภาพ
8. ถาตองการใส จากตวอยางเลอกสนาเง
3. หมายเลข 1 Bg color เลอกกาหนดสพนหลง 4. หมายเลข 2 Bg Image กาหนดรปภาพพนหล
สเสนขอบตาราง ใหเลอกใสท Brdr color เลอกสตามตองการ น และกาหนดความหนาของเสนขอบตาราง เปน 2 ดงภาพ
9. จะไดผลลพธ เปนตารางสเหลอง มเสนขอบเปนสนาเงน ดงภาพ
ตาราง มเสนขอบสนาเงน เปนเสนทบ ท CellSpace ใหกาหนด10. ถาตองการให 0 ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 63/96
หนา 64/96 เนรมตเวบสวยดวย Dreamweaver
11. จะปรากฏผลลพธ ดงภาพ
การนาภาพมาเปนพนหลงตาราง เราสามารถนาภาพมาปเป ดงน
2. เลอกกาหนดภาพ Bg โดย Browse for File เพอเลอกภาพ
นพนตารางได โดยกาหนดท Property Inspector 1. คลกเลอกตาราง
Image ท Property Inspector ของตาราง
3. จะปรากฏหนาจอใหเล OK อกภาพดงน เมอเลอกภาพไดแลว คลก
4. เมอเลอกภาพไดแลว จะปรากฏชอภาพ ชอง Bg Image ดงภาพ ท
5. จะปรากฏผลลพธ ดงภาพ
การคดลอกขอมลในตาราง ดาเคลกเลอกเซลทตองการจะคดลอก
นนการได ดงน 1. ดงภาพ
เลอกคาสง Edit > Copy
< Ctrl+V> ขอมลทถกคดลอกมาจะปรากฏในเซล ตามตองการ ดงภาพ
2.
3. คลกวางเคอรเซอร ในเซลทตองการวางขอมล แลวเลอกคาสง Edit > Paste หรอ กดคย
การเชอมโยง ทจะคลก Linkไปหาเรอง/
ขอมล/ภาพ ทตองการไดอยางรวดเรว ถาแบงตามลกษณะการเชอมโยง เปน 2 ประเภทใหญ ๆ คอ การเช อมโยงภายนอกเวบเพจ นอกจากน ยงสามารถทจะแบงตามลกษณะการใช งน
1. การเชอมโยงภายในเวบเพจหน2. การเชอมโยงภายในเวบไซตเดยวกน 3. 4. การเช5. การเช
การเชอมโยง เปนเสนหอยางหนงของเวบไซต ทาใหผใชเวบสามารถการเชอมโยงมหลายรปแบบ
อมโยงภายในเวบเพจ และการเชงานไดเปนประเภทตาง ๆ ด
าเดยวกน
การเชอมโยงไปยงเวบไซตอน อมโยงดวยอเมล อมโยงดวย Map Link
อมโยงภายในเวบเพจหนาเดยวกน การเช
เนรมตเวบสวยดวย Dreamweaver หนา 65/96
หนา 66/96 เนรมตเวบสวยดวย Dreamweaver
ก ดยวกน เหมาะสาหรบเวบเพจนน ๆ มขนาดขอมลยาวมาก เวลาดขอมลตองใชเมาสคลกเลอนแถบ Scrollbar เราสามารถกาหนดจดลงคได โดยคลกทขอความขางบน แลวกระโดดไปหาขอมลทอยดานลาง หรอสวนใดสวนหนงของเวบได ด วอยาง เราจะใชขอความเปนตวลงค โดยเมอเราคลกท คาวา "ว ยทศน" กจะกระโดดไปทขอมลเรอง "วสยทศน" ซงอยานลางของเวบเพจ โดยปฏบตตามขนตอนไดดงน
1. กาหนดจด Anchor ในทน คอหวขอเรอง วสยทศน ซงหนาหวขอ วสยทศน
2. นจดเชอมโยง
ารเชอมโยงภายในเวบเพจหนาเ
งตส
ด
เปนขอมลอยดานลาง โดยคลกตงเคอร เซอรคลกเมาสปมรปสมอเรอ ทอยในกลมเครองมอ Common เพอกาหนดใหหวขอน เปดงภาพ
3.
จดเชอม Anchor เมอตงชอแลว กดป
4. เมอคลกปม OK งเปนการแสดงวา ได
กาหนดจดการเช
จะปรากฏหนาจอ Named Anchor ใหตงชอname ในทนตงชอวา vision ม OK
แลว จะเกดสญลกษณสมอเรอ หนาหวขอ วสยทศน ซอมโยงแลว
จากนนใหกาหนดขอความทจะเปนตวคลกลงค แลวกระโดดมาหาจด5. เชอมโยง คอ หวขอวสยท
a. องแรกในแถบ
ชอง Link คอ เครองหมาย # และตามดวยชอจด Anchor คอ อตกลงการลงคขอความ
ศน ใหทาตามขนตอน ดงน หมายเลข 1 ใหเราคลกปายขอความ วสยทศน ซงอยดานบน เปนเรสารบญ
b. หมายเลข 2 ใสคาสง ในvision แลวกด Enter เพ
6. บนทก แลวทดสอบด โดยกด วสยทศน กจะกระโดดมาทหวขอ
วสยทศน จดลงคทตงไว 7. ขอสาคญ เรากาหนดชอ Link ตองพมพสะกดใหถกเหมอน
ทตงชอไว และอยาลมเคร งคไดตามตองการ
< F12> แลวคลกทขอความตามตองการ Anchor วาอะไร เวลาพมพในชององหมาย # อยขางหนาชอดวย จะล
การเชอมโยงภายในเว การเช าเว เพจหนงไปยงอกหนาเวบเพจหนง ซงมเนอโฮมเพจ บ นหนาโฮมเพจน วาจะใชขอความใดก เ ร าจะใชขอความ "บคลากร" เปนตตอไปน
.
. ท Property Inspector ในชอง Link ใหพมพชอไฟลทจะลงคไปหาหรอคลกเลอกไฟล โดยคลกท
. จะปรากฏหนาตาง Select File ใหเลอกไฟลทจะลงคไปหา เมอเลอกไฟลไดแลว คลกปม OK
4. จะปรากฏชอไฟล ในชอง Link ดงภาพ
บไซตเดยวกน อมโยงภายในเวบไซตเดยวกน เปนการเชอมจากหนเกยวของกน จากตวอยาง เราจะลงคจากหนา
บหา ไปยงหนาบคลากร ดงนนเราจะตองเลอกขอความ
าหนดเปนลงค ซงในทน วลงค ปฏบตไดตามขนตอน
1 ใหคลกเลอก/ปายขอความทตองการลงค ดงภาพ
2โฟลเดอร ดงภาพ
3
5. บนทกงาน และกดปม < F12 > เพอทดสอบผลการลงค เมอคลกทขอความ "บคลากร" จะปรากฏหนาเวบบคลากร
เนรมตเวบสวยดวย Dreamweaver หนา 67/96
หนา 68/96 เนรมตเวบสวยดวย Dreamweaver
6. วธการลงค อกวธหนงทสะดวก คอ คลกท หมายเลข 1 Point to File คางไวแลวลากไปท หมายเลข 2 คอไฟลทตองการลงคไปหา จะปรากฏชอไฟลทชอง Link ดงภาพ
การเชอมโยงไปเวบไซตอนและเชอมโยงดวยอเมล การเชอมโยงไปเวบไซตอน
การเชอมโยงไปเวบไซตอน มวธการคลาย ๆ กบการเชอมโยงไปเวบเพจอน เราสามารถใชขอความ/ภาพ เปนตวคลกเชอมโยงได ตางกนทในชอง Link จะตองระบ URL ใหครบถวน จากตวอยาง เราตองการใชภาพเปนตวลงค ไปยงเวบไซต www.crnfe ac.th ใหปฏบต ดงน
ล จ
ในชอง Link ระบทอย
ac.th
หมายเลข 1 ค กทภาพท ะเปนตวเชอมโยง
หมายเลข 2 เวบไซต ทตองการ Link ไปหา เชน http://www.crnfe.
การเชอมโยงดวยอ
หาในชอ งน
1. คลก ล
เมล การเชอมโยงดวยอเมล ใชไดทงภาพ/ขอความ เปนตวเชอมโยง และระบอเมลทตองการลงคไป ง Link ทสาคญ ตองมคาวา mailto: ตามดวยชอ e-mail address ปฏบตตามขนตอน ด
เลอกขอความ/ภาพ ทตองการเปนจดเชอมโยง ตวอยางใชภาพเปนจด งค
2. ท Property Inspector ในชอง Link ใหพมพ e-mail address ดงตวอยางเชน mailto:[email protected] เมอพมพเสรจ กด Enter ดงภาพ
3. บนทกงาน แลวกด < F12 > แลวคลกภาพทเรากาหนดการลงคไว จะปรากฏหนาจอ New ook ทใชสาหรบสงเมล โดยม e-mail address Message ซงเปนโปรแกรม Microsoft Outl
ปรากฏใหเหนดวย ดงภาพ
การเชอมโยงดวย การเชอมโยงดวย Map Link ก โดยใชเครองมอ
Map Link เปนการกาหนดขอบเขตของการลงคบนภาพกราฟ
จาก roperty inspector เราสามารถวาดพนทลงคเปนรปสเหลยม วงกลม รปหลายเหล งค และใชเครองมอ Map Link วาดรปสเหลยมทภาพเพ ร ปฏบตตามได ดงน
1. คลกเลอกทภาพ
Pยมได ดงตวอยาง เราจะใชภาพเปนตวกาหนดพนทล
อกาหนดพนทลงค ไปยงหนาเวบเพจทตองกา
2. คลกเลอกทเครองมอสเหลยม วาดสเหลยมบนภาพ ดงภาพ
3. เลอกไฟลทจะเชอมโยงไป โดยคลกทไอคอน เมอเลอกไฟลไดแลว Link เลยกได จะปรากฏชอไฟลในชองลงค หรอจะพมพชอเวบลงในชอง
เนรมตเวบสวยดวย Dreamweaver หนา 69/96
หนา 70/96 เนรมตเวบสวยดวย Dreamweaver
4. นอกจากน เรายงกาหนดคาเพมเตมได ในชอง Target ดงภาพ
o _blank เ ม วบทเชอมโยงไปในหนาตางบราวเซอรเดม
า
ปนการเปดหนาเวบทเชอมโยงไปในหนาตางบราวเซอรใหo _parent เปนการเปดหนาเo _self เปนการเปดหน เวบทเชอมโยงไปในเฟรมเดม o _top เปนการเปดหนาเวบทเชอมโยงไปในหนาตางบราวเซอรเดม โดยจดใหเตมเฟรม
5. เราสามารถแกไข Map Link ไดโดยใชเครองมอ ท Property Inspector คลกเลอก Map Link ทปรบเปลยน อนไปวางสวนอนของภาพไดตามตองการ ดงภาพ
6. การลบ Map นททเรากาหนดเปนลงค จะเรยกวา image map ใหคลกเลอก image map แลวกดปม < Delete >
ตองการแกไข ปรบขนาด หรอตาแหนง/เล
Link ทาไดงาย ๆ คอ พ
การกาหนดคณสมบตของการเชอมโยง กา
หลายอยาง จากหนา Page Properties ใหเลอกคาสตามขนตอน ดงภาพ
1. หมายเลข 1 ท Category เลอก Links 2. หมายเลข 2 Link font : ใหเลอกกาหนด
ตวอกษรทเปนลงค กาหนดตวหนา
รกาหนดคณสมบตของการเชอมโยง เราสามารถกาหนดคณสมบตของการเชอมโยงได
ง Modify > Page Properties... และปฏบต
และตวเอยง Si
4. 3. หมายเลข 3 ze : กาหนดขนาดของตวอกษรทเปนลงค
หมายเลข 4 Link color : เลอกสลงคปกต
5. หมายเลข 56. หมายเลข 67. หมายเลข 7
ly on rollover : แสดงขดเสนใตขอความทเปนลงค เมอผใชนาเมาสมาวางบนสวนน
o Hide underline only on rollover : นลงค เมอผใชนาเมาสมาวางบนสวนน
9. หมายเลข 9 เมอกาหนดค Apply ขอใชตามน 10. หมายเลข 10 คลก OK
Visited links : เลอกสลงคทถกผใชเวบคลกไปแลว Rollover links : เลอกสลงคเมอผใชนาเมาสมาวางบนสวนน Active links : เลอกสลงคทถกคลก
8. หมายเลข 8 Underline style : กาหนด/เลอกรปแบบการขดเสนใตขอความทเปนลงค มดงน o Always underline : ขดเสนใตขอความทเปนลงคเสมอ o Never underline : ไมขดเสนใตขอความทเปนลงค o Show underline on
ซอนเสนใตขอความทเป
ณสมบตทกอยางตามตองการแลว คลก
การออกแบบเลยเอาท การใชเลยเอาท
เลยเอาท ใชสาหรบการออตาง ๆ ของหนาเวบตามตองการ Layout ออกแบบหนา
o ะ
กแบบหนาเวบ จดสวนเลยเอาท ม 2 แบบ คอ
Table และ Layout Cell ชวยในการเวบ การใช Layout Table และ Layout Cell ตองไปท
Mode > Lay ut Mode จ พบหนาจอดงภาพ View > Table
การสราง La ใหคลกเลอกท
yout Table รป แลวนามาลากเปนรปสเหลยม
โปรแกรมจะวาดขอบเขตของตารางให ดงภาพ
เราสามารถปรบความกวางและความยาวของตารางโดยการ
คลกลากปมรอบขอบเขตของตาราง
เนรมตเวบสวยดวย Dreamweaver หนา 71/96
หนา 72/96 เนรมตเวบสวยดวย Dreamweaver
ถาตองการแกไขปรบปรงตาราง ตองแกไขท Property ของตาราง ดงน
1. Fixed เปนการกาหนดความกวางความสงแบบตายตว โดยมหนวยเปน pixel
ยดหดไดตามขนาดของหนาจอ 3. Height เปนการก4. CellPad กาหนดระยะห5. CellSpace กาหนดระยะห6. Clear Row Heights Cell ทก Cell ในตาราง
7. ายออกไป เชน ดเกนความกวางของ Cell ทาให
ารางอนออก โดยไมทาใหเนอหายงคงอยเหมอนเดม าราง
2. Autostretch เปนการกาหนดชองตารางขวามอสด สามารถาหนดความสง
างจากเนอหาใน cell กบขอบ Cell างระหวาง Cell
ปกต Dreamweaver จะกาหนดความสงของควรจะคลกปมนเมอเตมขอมลลงใน Cell แลวเทานน Make Widths Consistent บางครงอาจจะมขอมลใน Cell ททาให Cell ขยกาหนดความกวางของ Cell เทากบ 100 แตนาภาพขนาCell ขยายออกไป จงทาให คาความกวางทกาหนด กบทเปนจรงไมตรงกน ความกวางทขยายออกไป จะอยในวงเลบ
8. Remove All Spacers เอากราฟฟกของโปรแกรมทใชสาหรบทาใหตารางมความกวางตามกาหนด
9. Remove Nesting เอาตารางทอยในต10. Bg เปนการกาหนดสพนของต
การสราง Layout Cell ใหคลกเลอกทรป แลวนามาลากเปนรปสเหลยม
มจะวาดขอบเขตของตารางให โปรแกร
ความ ถาด อกษร ใหนาเคอรเซอรารถคลกได ปมรอบ ๆ พรอมกน
cell สามารถเปลยนแปลงได นขอบแลวลากไปยงตาแ
สรางเสรจ Cell จะอยในสภาพพรอมทจะรบขอ เมอ
Property ในขณะน จะพบวาเปน Property ของตวถาตองการเปลยนแปลงลกษณะของ Cell
มาทเสนขอบ เสนขอบจะเปลยนเปนสแดง ซงสามใหคลกเลอกทเสนขอบ จะเกดเสนและม
นน จะเหน Property ของ ถาตองการยายตาแหนง อาจจะคลกทเส
หนงทตองการ
มเทากน เนองมาจากขอมลใน Cel งของ Cell นน ๆ ใหตรง
ในกรณทความกวางทกาหนด กบความกวางของ Cell ทเปนจรงไl ทาให Cell มความกวางเพมขน สามารถทจะคลกทลกศรเพอกาหนดความกวาตามจรงได
โครงสรางของหนาเวบ บบเวบ นยมใ การออกแ ชตารางเปนกรอบกาหนดสวนตาง ๆ ทงนเพราะ HTML ไมเหมอนการ
พม รทดใหม จะต หม การยอหนา การเวนวรรค ไมสามารถทาไดเหมอนโปรแกรมพมพเอกสารโดยทวไป ดงนนการกาหนดวา อะไรจะอยสวนไหนของหนาจอ วธทสะดวกและงายทสด คอการใชตาราง ต าง (Table) และหองของตาราง (cell) เราจะนาภาพและขอความมาไวในหอง สว รง แตมหนาทหลกในการกาหนดตาแหนง
2. สวนท 2 สวนซกซายสาหรบเมน 3. สวนท 3 สวนหลกสาหรบเนอหา
ะดวกในการองมอ
ใหยบรอยแลว ถาตองการจดอะไร อยแหนงใด กใหวาดตารางและหรแกรม Dreamweaver จะทาหนาทแปลงเปนโคด HTML ใหทนท ทาใหการออกแบบหนาเวบ ทาได
ายและรวดเรว
พเอกสารทว ๆ ไป เพราะ เปนการนาภาพและขอความมาตอ ๆ กน ถาตองการขนบรองม TAG บอกใหขนบรรทดใ
ารางประกอบดวย ตารนตารางไมสามารถนาภาพหรอขอความบรรจโดยต
และเปนทสาหรบวาดหองของตาราง เราจะใชตารางในการออกแบบหนาเวบ ดงน
จะเหนหนาเวบน ประกอบไปดวย 3 สวนคอ 1. สวนท 1 สวนหว
Dreamweaver ใหความสออกแบบหนาเวบโดยมเค สาหรบวางตาราง (layout table) และหองของตาราง (layout cell) ไว
ร
เร องของตาราง ตามตาแหนงทตองการ โปง
ใชสาหรบน2. Expanded Tables Mode ใชสาหรบการทางานก
มองเหนชดเจนขน สามารถคลกเมาสในตาแหนงทถ3. Layout Mode ใชสาหรบการออกแบบหนาเวบ
โดยไปท View > Table Mode > Layout Mode หรอโดยการคลกทเมน ดงภาพ
การสรางเลยเอาทเทเบล และเลยเอาทเซล การใชตารางม 3 ลกษณะ คอ 1. Standard Mode เปนการใชตามปกต าเสนอขอมลในรปตาราง
บตาราง โปรแกรมจะขยายตาราง ทาใหกตองไดดขน เราสามารถเขาหนาออกแบบดวยตาราง
เนรมตเวบสวยดวย Dreamweaver หนา 73/96
หนา 74/96 เนรมตเวบสวยดวย Dreamweaver
เมอคลกเมน Layout จะเหน Table Mode เปน 3 ลกษณะ โดยปกตเมอเขในภาพ า จะอยใน
ลกษณะ างกไมสามารถ
าม Standard Mode ถาดบนแถบเมน จะเหนวาเครองมอบางอยางทใชงานได แตบางอยใชงานได ในทนเราตองการออกแบบหนาเวบ ใหคลกแถบ Layout ดงภาพ
จะส มอจะสามารถใชได 2 เครองมอ คอ เครองมอสาหรบวาดตาราง เครองมอสาหรบวาดหองตาราง
งเกตเหนวาเมอกดปม Layout เครองมอบนแถบเครอง
หลกการออกแบบหนาเวบดวยตาราง 1. layout cell จะตองอยใน layout table 2. ถาวาด layout cell กอน โปรแกรม Dreamweaver จะวาดตารางครอบ cell นน ๆ 3. ตารางสามารถซอนตารางได
4. ถามขอความหรอภาพในหนาเวบ และจะสรางตารางใหมในบรเวณพนทวาง ตารางใหมจะ ขอความ เทานน ะถกบงคบดวยขนาดของตารางของม
งไมไดอความ หรอภาพภายในตารางยอย จะไมถกกระทบกระเทอน
เมอมการเปลยนแปลงขนาดของตารางภายนอก
le Mode
สรางไดเฉพาะใตรป หรอ5. ชองตาราง หรอ cell จ น จะกาหนดขนาดจนเกน
ออกไปนอกต 6. ในกรณทมการซอนตาราง ข
ารา
7. ขนตอนการออกแบบหนาเวบดวยตาราง 8. เลอก Layout Mode โดยไปท View > Tab > Layout Mode หรอ คลกเลอก
Layout บนแถบ Insert แลวคลก Layout
9. คลกเลอก Layout Table เพอวาดตารางใหญครอบคลมพนททางานทงหมด
10. นาเคอรเซอรมาในบร ยนเปนรปกากบาท 11. ใหนาเคอรเซอรมาวางไว าจอชดมมบนดานซาย ในตาแหนง 0,0 (ถาไมเหน
ไมบรรทด ใหไปท View > Rulers > Show)
เวณพนททางาน เคอรเซอรจะเปลบนมมพนทหน
12. วาดสเหลยมพอประมาณ
โปรแกรมจะสรางตารางใหมลกษณะดงภาพ 13. เมอปลอยเมาส
14. ไปดทแถบ Property เพอปรบขนาดความกวางยาวของตาราง ใหคลอดคลมพนททงหนาจอ 15. ใหกาหนดขนาดความกวางเทากบ 760 pixel และสงเทากบ 420 pixel ซงเปนขนาดทใชกบ
หนาจอความละเอยด 600 X 800 pixel
16. ตอไปจะสรางตารางสาหรบสวนหวทสาหรบภาพกราฟฟกขนาด 760 X 70 pixel 17. คลกทรป layout table
ณกวางเทากบ 760 pixel และสงเทากบ 70 pixel
บภาพหวของหนา ารางสวนหว
18. วาดสเหลยม ขนาดความกวางพอประมา และสงพอประมาณ 19. กาหนด ขนาดตารางใน property ใหความ
ซงเปนขนาดพอดก20. คลกท layout cell เพอวาดหองในต
21. นาเคอรเซอรมาวาดในบรเวณตารางใหเตม
22. ตอมาจะสรางตารางสาหรบเมนดานซาย และสวนทเปนเนอหาหลก 23. คลกบรเวณนอกตารางสวนหวทสรางขน จะเหนวาเสนขอบ
ตาง ๆ ของตารางสวนหวจะหายไป ดงภาพ
เนรมตเวบสวยดวย Dreamweaver หนา 75/96
หนา 76/96 เนรมตเวบสวยดวย Dreamweaver
24. คลกทรป layout table ยม ขนาดความกวางพอประมาณ และสงพอประมาณ ต25. วาดสเหล อจากตารางแรก
ขนาดตารางใน property ใหความกวางเทากบ 760 pixel และส26. กาหนด งเทากบ 350 pixel
27. จากนน ใหคลกท layout cell หรอรป และวาดสเหลยมในบรเวณตารางทสรางใหม เพอ
เปนสวนสาหรบเมน ดงภาพ
สวนทเหลอจะเปนสวนเนอหาหลก ใหคลกท28. layout cell หรอรป และวาดสเหลยมในบรเวณตอจากชองตารางสวนทเปนเมน ดงภาพ
29. จากนน ในแต งออกเปน 3 สวน ละสวน ใหนาภาพและขอความเขา กจะไดหนาเวบทแบ
เฟรม เลเยอร แฟลช การใชเฟรม
นอสระจากกน แตละสวนจะมไฟลเปน มการแสดงของสวนตาง ๆ บนหนาจอ
การใชเฟรมทาใหไมสามารถมองเห นกออกแบบเวบระดบมออาชพจานวนมาก ไมชอบการใชเฟรม แตม วนตาง ๆ ออกดวยตาราง มากกวาการใชเฟหนาจอค ตดานลาง แล งไดเพราะม Scroll bar แตสวนทเปนห เลอนขนลง ทาใหสามารถมองเหนโลโกพร
การใชเฟรม เปนการแบงหนาจอเวบออกเปนสวน ๆ แตละสวนเปของตนเอง และจะมไฟลอก 1 ไฟลททาหนาทกาหนด หรอควบค
นชอไฟลทใชในแตละเฟรมกนยมออกแบบโดยการแบงส
รม อยางไรกตาม การใชเฟรมกยงมประโยชน โดยเฉพาะถาตองการใหสวนใดสวนหนงของงอยตลอดเวลา ไมตองโหลดภาพ ขอความใหมทกครงทมการเปลยนเนอหา วอยางขางลางน แบงหนาจอออกเปน 2 เฟรม คอสวนท 1 เปน สวนหวพรอมทงมเมนอย
ะสวนท 2 เปนเนอหา จะสงเกตเหนไดวา สวนทสอง สามารถเลอนขนลวซงมภาพโลโกศนย กศน ภาคกลาง และเมน จะอยคงท ไมอมทงเมนสามารถคลกไปยงกลมงานตาง ๆ ได
เฟรม(Frame) และ เฟรมเซท (Frameset) (Frame) คอสวนตาง ๆ บนหนาจอทถกแบงออกไป แตละสวนจะมไฟล
(Frameset) คอโปรแกรม HTML ทควบคมการแบงหนาจอ ไฟลอะไร
หนาเวบจะประกอบดวยไฟลทสาคญ ดงน index.html เปน Frameset ใชแบงหนาจอออกเปนสองสวน คอสเนอหา
เฟรม เปนของตนเอง เฟรมเซท และเปนตวบอกวาสวนไหนใช
จากตวอยาง1. วนหว และ สวน
ศนยการศกษานอก
จงทาใหผใชมองเหนชอหนวยงานตลอดเวลา
2. top.html เปนไฟลสวนหว สวนนมภาพกราฟฟกทเปนชอโรงเรยนภาคกลาง และมเมนเพอจะลงคไปยงกลมงอยบนหนาจอเสมอ ไมเกยวของกบส
านตาง ๆ สวนนจะยงคงแสดงวนเนอหาหลก
เนรมตเวบสวยดวย Dreamweaver หนา 77/96
หนา 78/96 เนรมตเวบสวยดวย Dreamweaver
3. crnfe.html เปนไฟลเนอหาหนาแรก สามารถเลอนขนลงได (สามารถตงชอไฟลเปน
4. administration.html นอกจากน ทกลงคทมเมน จะตองมไฟลมารองรบท นชออนได)
ชออนได) เปนไฟลของกลมงานอานวยการกเมน (สามารถตงชอไฟลเป
การสรางเฟรม ดวย Dreamweaver เราจะสรางเวบโดยใหมเฟรม 2 งนน กอนอนตองสรางไฟล
HTML ท1. ไฟลแรกใชชอวา กขนาด 760 X 70
pixel และมเมนช2. ไฟลทสอง ชอ วยภาพและขอความ
งานอานวยการ หมายเหต
1. ไฟลทงหมด ต 2. ขนตอนการสราง แมแบบจาก Dreamweaver
จากนนจงเรยกไฟล ก จากนนจงจะทาการลงคจากเมนในไฟล
เฟรม เหมอนตวอยางขางบน ดจาเปน จานวน 3 ไฟล
top.html สาหรบเปนสวนหว ประกอบดวยภาพกราฟอกลมงาน
crnfe.html สาหรบเปนสวนเนอหาหลก ประกอบด3. ไฟลทสาม ชอ administration.html เป ลของกลมอานวยการ ไฟลนจะถกเรยกมาใชเมอ
มการคลกลงคทเมน เพอดกลมนไฟ
องอยในหองเดยวกน เพอสะดวกในการลงค กอนอน ตองสราง Frameset โดยใชในสวนหว (top.html) และสวนเนอหาหล
top.html อกครงหนง
การสรางเฟรมเซท (Frameset) 1. เปดโปรแกรม Dreamweaver 8 ไปท File > New ...
โปรแกรมจะมหนาจอ New Document ใหเลอกแถ2. บ General 3. กลม Category: เลอก Framesets กลม
Frameset ใหเลอก Fix top ซงเปนแบบทเราตองการ แลวคลกปม Create
4. โปรแกรมจะใหตงชอเฟรม ทงสองสวน คอสวนบน และสวนเนอหา โดยโปรแกรมจะมชอมาใหวา สวนบนคอ topFrame และสวนหลกคอ mainFrame ใหยอมรบและคลก OK โปรแกรมจะเปดหนาจอและแบงหนาจอตามทเรากาหนด
5. หนาจอน อยใน Standard Mode (ถาไมได
อยใน Standard Mode ใหไปท View > Table Mode > Standard Mode แตถงแมจะอยใน Layout Mode กสามารถทาขนตอนตอไปไดเชนเดยวกน)
6. หนาจอนเปน Frameset าจอve และใชชอวา main.html โดยไปท File >
ซงทาหนาทควบคมหนทงหมด ให SaSave Frame As... และใหตงชอไฟลวา main.html
การนาไฟลเขาในแตละเฟรม 1. คลกในบรเวณทจะเป สวนหว (บรเวณน จะนาไฟลชอ top.html มาวาง) น
2. ไปท File > Open in Frame...
top.html เสรจแลวสวนหวจะปรากฎใหเหน ดงน 3. เลอกไฟล
น หรอนอยลง ใหคลกท
6. คลกในบ ะเปนสวนเนอหาหลก (บรเวณน จะนาไฟลชอ crnfe.html มาวาง) 7. ไปท8. เลอกไฟ
4. ถาตองการขยายพนทในสวนหวใหกวางมากขขอบเพอเปด property ของ Frame
5. และตงคา Row ใหมากขน หรอนอยลงตามตองการ
รเวณทจ File > Open in Frame...
ล crnfe.html เสรจแลวจะไดทงสองสวนครบ ดงน
เนรมตเวบสวยดวย Dreamweaver หนา 79/96
หนา 80/96 เนรมตเวบสวยดวย Dreamweaver
9. ถาพบวามขอบสขาวรอบเฟรม ใหตง Margin ในไฟลตนฉบบ คอ top.html และ crnfe.html ใหมคาเปน 0
10. ถาตองการใหสของพนทงในสวนหวและสวนเนอหาหลกเปนสเดยวกน ใหตงคาสพนของไฟล top.html และcrnfe.html ใหเปนสเดยวกน
การสรางลงคจากเมน ใและนามาไว
สคลมขอความทตองการลงค ในทนคอ กลมอานวยการ
นสวนหว มเมนทจะตองลงค คอ เมอคลก กลมอานวยการ ใหไปเปดไฟล Administration.html ในเฟรมลาง ซงมชอวา mainFrame
1. Drag เมา
2. ไปด งคไปหา ในทนคอไฟล administration.html ท Property เลอก หรอพมพชอไฟลทจะล
เพราะสวนเนอหาหลกเราตงชอวา 3. ท Property เลอก Target ใหเปน mainFrame
mainFrame ในตอนสราง frameset
ตรวจสอบดจาก Browser โดยกดปม F12 4. เปนอนเสรจสนการลงค และการสรางเฟรม ให
การใชเลเยอร เลเยอร (layer) ใน Dreamweaver เปนสวนหนและสาม จดวางตาแห โดยนาภาพหรอขอความวางลงใน เลเยอร และนาเลเยอรไป มประโยชนในการจดวาง หรอออกแบบหนาจอ เชนเดยวกบ กต อาจจะไมสามารถแสดงเลเยอรได ดงนนถาใช เลเยอรในก นตาราง จะสามารถแสดงไดในทก Browser เลเยอ คอ สามารถนามาซอนกนไดเปนชน ๆ และสามารถทาใหโปรงใสได
งของหนาเวบ ทสามารถนามาซอนกนเปนชน ๆ ารถกาหนดตาแหนงในแตละชนได วาจะใหอย ณ
นงตาง ๆ ของ ภาพ หรอขอความในหนาได วางในตาแหนงทตองการ ดงนน เลเยอรจงการใชตาราง อยางไร าม Browser เกา ๆ ารจดหนาเวบ เมอเสรจแลวจงควรแปลงใหเปรมคณสมบตพเศษ
ตาแหนงใดของหนา เลเยอรมประโยชนในการ
นอกจากผใชสามารถ
นยงสามารถสงใหมองเหนหรอซอน กได นอกจากนยงสามารถสงใหเคลอนท หรอแมแตทาใหใชเมาสลากชนสวนนน ๆ ไดอกดวย
การสรางเลเยอร 1. การสรางเลเยอร ตองอยในโหมดมาตรฐาน หรอ Standard M
ถาไมไดอยใน Standard Mode ใหไปทเมน View > Table คลกทแถบ Layout และเลอก Standard ดงภาพ
ode 2. Mode >Standard Mode หรอ
3. คลกปมสาหรบวาดเลเยอร
4. วาดสเหลยมในตาแหนงทตองการบนหนาจอ
5. ถาตองการลบ
สามารถกดปม Delete บนแปนพมพลบออกและวาดใหมได
การนาภาพเข1. กอนอนต วอยางนใชภาพ
2. 3. คลกเลอกเมน Common แลวคลกปมสาหรบนา
ภาพเขา
5. เมอนาเขาเลเยอร จะไดดงน
าเลเยอร องนาภาพเขามายงหองเกบภาพใน Site ททางานเสยกอน ต
crnfe1.jpg คลกทเลเยอรทตองการนาภาพเขา
4. เลอกภาพทตองการ
เนรมตเวบสวยดวย Dreamweaver หนา 81/96
หนา 82/96 เนรมตเวบสวยดวย Dreamweaver
ก 1 เลเยอร ตรงมมบนดานซายของภาพ
องการสรางเลเยอร) 6. สรางเลเยอรอ
ดงรป (ดเร
7. go.jpg มาวางในเลเยอรน ดงรป
นาไฟล king_lo
8. เมอนาภาพเขาแลว ถาตองการลดขนาดลง ใหนาเมาสไปวางทมมลางดานขวา แลวลากลด
ดวย ขนาดใหเลกลง ถาตองการรกษาสดสวนของภาพ ใหกดปม Shift คางไว
9. จะไดดงน
องการเลอกภาพควรคลนวาทขอบภาพจะมปมส
10. ขอควรระวง ในการเลอก ถาต กทภาพกอน จะสงเกตเห ดา
11. ถาตองการเลอกเลเยอร ใหคลกทขอบของเลเยอร จะเหนอร ดงน
ลอมรอบ
มปมลอมรอบเลเย
การเรยงชนเลเยอร
การจดลาดบชนกอน-หลงใหกบเลเยอร สามารถทาไดดงน 1. คลกเลอกเลเยอรทตองกา ร2. ไปท Window > Layer
หนา 83/96
3. เปลยนตวเลขในชอง Z ถาตองการใหอยดานบน ใหใชตวเลขทมากกวาชนทอยดานลาง
การใชแฟลช (Flash) แ ช มลตมเดย มทงภาพ เสยง และการเคลอนไหว โดยทามาจากโปรแกรม Adobe อนไหวดกวาภาพเคล
ฟล (Flash) เปนไฟลFlash ไฟลแฟลช นยมใชเปนภาพเคลอนไหว ซงมรายละเอยด และการเคลอนไหวทเปน Gif Animation เวบไซตปจจบนนยมใชแฟลชกนมาก
ขอควรทราบเกยวกบ Flash 1. Browser ส อผใชเวบ สามารถเลน
ไดทนท แตถ Flash Player มา
3. Flash สามารถม ปกรณสาหรบเสยงดวย 4. Flash สามารถท มควบคม สามารถใชทา
บทเรยน หรอเกมสาน
วนใหญจะม Flash Player รวมอยดวยแลว ทาใหสะดวกตาเปน Flash เวอรชนใหม ๆ ผใชตอง Download โปรแกรม
ตดตงเสยกอน 2. Flash สามารถขยายใหมขนาดใหญได โดยทยงมความคมชดดงเดม
เสยงประกอบได แตเครองคอมพวเตอรนนตองมอาเปนโปรแกรมสมบรณในตวเอง สามารถสรางปบนอนเทอรเนตได
5. ถาการตอเชอมไมด ผใชอาจตองคอยเปนเวลาน
การใช Flash ในนาไฟล Flash มาไว ามการใชไฟล 2 ไฟล คอ
firework.swf เปน Flash และ1. เลอกคาสงสงเมน
Dreamweaver 8 ในหองทตองการ ในแบบฝกหดนสมมตว
wat.jpg เปนไฟลภาพปกต ทง 2 ไฟล Insert > Media > Flash
นาเขามา 2. เลอกไฟล flash ทตองการ
3. เมอนาเขามาแลว จะยงไม หนทนท แตจะเหนเปนกเ รอบสเทาและม logo ของ Flash ดงน
ดขนาดตามตองการ โดยการคลกทปมทเสนขอบแลวลาก 4. เราสามารถขยาย หรอยอ ใหไ
เนรมตเวบสวยดวย Dreamweaver
หนา 84/96 เนรมตเวบสวยดวย Dreamweaver
5. Flash ใหแสดงใน Browser
หากตองการเหนผลลพธของไฟล
การใช Flash รวมกบภาพปกต เปนการนาภาพปกตมาแสดงร ภาพวดพระแกวตอนกลางคน ทม
แสงไฟจบงามตา สวนภาพ Flash เป น จะเหนเปนพลสองสวางอยเหนอวดพระแกวตอนกลางคน สวยงามมาก firework.swf)
ในการทา เราจะใชภาพวดพระแก องระวงอยาใหมการใชภาพปพน เพราะจFlash ใหมอ
ขนตอนการทา 1. เลอก Layout Mode 2. สรางตาราง ขนาดกวาง 236
เทากบรปททานจะนามาใชMode ท Property คลก Bg เพอ
kground
วมกบ Flash ภาพปกต เชน นภาพพล เมอนามาแสดงรวมก (ไฟลทใช คอ wat.jpg และ
วเปนพนของตาราง แตตะทาใหเกดภาพหลายภาพ จากนน จงนาเอา Flash เขามาในตาราง และใสคาใน Parameter ของ
งไมเหนสพน
สง 129 หรอใหมขนาด
3. กลบมาท Standard กาหนด Bac
4. เลอกภาพ wat.jpg เปนภาพ ก background ภาพจะพอด บตาราง เพราะเรากาหนดขนาดให
เทากนอยแลว
5. คลกกลบมาท Layout Mode เราจะนา Flash มาไวใน Cell น 6. คลกทเสนขอบ Cell เพอบอกวา น 7. ไปท Insert > Media > Flash
นมขนาดใหญ จงตองหดใหเลกลง ใหครอบคลมพนททองฟา และ
และวาด Cell ลงในตาราง จะนา Flash มาไวทแลวเลอกไฟล firework.swf
8. เนองจาก Flash ภาพสวนบนของวดพระแกว
9. ถาดใน Browser ขณะน จะเหนวา Flash มพนหลงสดา และจะทบสวนบนของวดพระแกว
โปรงใส โดยการตงคา Parameter ของ Flash เราตองทาใหพนหลงของ Flash
0 ไปดท Property ของ Flash และ1 . คลกปม Parameters ...
11. คา Parameter ใหพมพ wmode และคา value ใหพมพ Transparent
ะจายอยเหนอวดพระแกว 12. เสรจแลวใหดผลลพธใน Browser จะเหนภาพพล กร
การจดทะเบยนเวบไซต การหาเวบโฮสตง และการอพโหลดไฟล
การจดทะเ นเวบไซต หลงจากทสรางเวบเสรจแลว หวใจสาคญ คอ การใหบรกา
บยรเวบบนอนเทอรเนต เวบไซตบน
อนเทอร อนบาน ๆ หนง ถาจะใหรวาบานหลงไหน เปนของใคร อยทไหน จาเปนทจะต บาน และมหนวยงานทคอยควบคมดแลการออกเลขทบาน
เวบไซตแตละเวบกเหม ยนเพอไมใหซากน และมหนวยงา
เนต มนบลาน ๆ เวบ เวบแตละแหงเปรยบเสมองมระบบ นนคอ แตละบาน จะมเลขท
เลขทบานแตละบานจะไมซากน อนกน จาเปนตองมระบบ มการลงทะเบ
นทคอยควบคมดแล
ระบบของเวบไซต เวบไซตแตละแหงใชหมายเลข กษณของตนเอง หมายเลข IP
หรอ IP Address เปนหมายเลขประจ บนอนเทอรเนต เพอใหเครองคอมพวกนดวยจด (.) เชน 10.24.254.3 และ
เนองจากหมายเลข IP การจา จงไดมการหาทางออกโดยใชชอทจางาย เขาใจงาย เพอใชเร อ โดเมนเนม ดงนน โดเมนเนม หรอ ชอโดเมน จงเปนชอทตงขนเพ แอดเดรสนนจดจาไดยากกวา ตวอยางโดเมนเนม เชน
แต โดเมนเ ลง
IP เปนตวกาหนดความเปนเอกลาตวของเครองคอมพวเตอรทอย
เตอรสามารถสอสาร สงขาวสารไปหากนได หมายเลข IP ประกอบดวยตวเลข 4 ชด คนระหวาง 192.168.62.231 เปนตน
ประกอบดวยตวเลขหลายตว จงยากแกยกหมายเลข IP นน ๆ ชอดงกลาว ค
อใหงายตอการจดจา เนองจากไอพ yahoo.com, crnfe.ac.th เปนตน
เนองจากระบบอนเทอรเนต ใช ไอพแอดเดรส ซงเปนระบบต เลขเปนหลกในการสอสาร นมเปนระบบตวอกษร ดงนน ในทก Server ทใหบรการอนเทอรเนต จงตองมระบบการแป
ว
เนรมตเวบสวยดวย Dreamweaver หนา 85/96
หนา 86/96 เนรมตเวบสวยดวย Dreamweaver
ระหวาง ไอพแอดเดรส และ โดเมนเนม DNS หรอ Domain Name System (หรอ Server) ตาแหนงทอยของหนาเวบ ตลอ ไฟลภาพ ไฟลเสยง ทอยบนอนเทอรเนต เรยกวา URL หรอ URL จะใหรายละเอยดทมากกวาชอโดเม
ftp://www.pcwebopedia.com/stuff.exe /index.html
URL แร
ระบบการแปลงดงกลาว คอ
ดจนทรพยากรตาง ๆ เชน Uniform Resource Locator ตาแหนง
น เชน บนโดเมน pcwebopedia.com ม URL ดงน
http://www.pcwebopedia.comก บอกใหทราบวา ไฟล stuff.exe สามารถเขาถงไดดวย FTP Protocal สวน URL หลง แสดงวา
เปนหนาเวบปกตทวไป
ลกษณะของโดเมนเนม โดเมนเนม มการแบงออกเปนกลม ๆ โดยใชนามสกล (Suffix) ตอทายชอ โดยคนดวย
เครองหมายจด และมการแบงยอย ๆ ลงไปอกหลายระดบ ระดบนอกสด หรอทเรยกวาเปน Top Level Domain (TLD) มหลายอยาง ทควรทราบ เชน
านภาครฐ
net - องค ca - th - ประเทศไทย
gov - หนวยง edu - สถาบนการศกษา org - องคกรสาธารณะ ไมหวงผลกาไร mil - การทหาร com - ธรกจ การพาณชย
กรเครอขาย ประเทศแคนาดา
ตวอยาง โดเมนเนม เชน www.sanook.com www.trainingdd.com www.egat.co.th เปนตน
สาหรบประเทศไทย มการแบงยอยประเภทลงไปอก เชน ประเภท คาอธบาย
co.th สาหรบการพาณ ยนชอโดเมนภายใตหมวดหมน จะตองเปนองค หรอบรษทตางประเทศทมตวแทนอย องจดทะเบยนในประเทศไทย
ศ
ชยและธรกจ ผสมครขอจดทะเบกรพาณชยทจดทะเบยนในประเทศไทย
ในประเทศไทย และตวแทนนน จะตและไดรบการโอนสทธ ในการจดทะเบยนชอโดเมนจากบรษทแมในตางประเทเปนทเรยบรอย
in.th สาหรบหนวยงานทกประเภท และบคคลทวไป a
บนการศกษาทจดทะเบยนในประเทศไทย c.th สาหรบสถาบนการศกษา ผสมครขอจดทะเบยนโดเมนเนมภายใตหมวดหมน
จะตองเปนสถาgo.th สาหรบการใชของภาครฐบาล เชน กระทรวงหรอหนวยงานรฐบาล net.th สาหรบนตบคคลผไดรบใบอนญาตประกอบกจการโทรคมนาคมทง 3 แบบ ตาม
พระราชบญญต พ.ศ. ๒๕๔๔ การประกอบกจการโทรคมนาคม
or.th สาหรบองคกรทไมแสวงผลกาไร ตวอยาง www.kmutnb.ac.th เว พระจอมเกลาพระนครเหนอ บของมหาวทยาลยเทคโนโลย www.su.ac.th เวบของมหาวทยาลยศลปากร www.thairath.co.th เวบของหนงสอพมพไทยรฐ www.photostyle.in.th เวบของผรกการถายรป หนวยงานทควบคมการจดโดเมนเนม
โดเมนเนม เปนชอสาหร งตองมหนวยงานทควบคม ไมใหมการใชชอซากน
terNIC
บเวบไซต ทเปนเอกลกษณไมซาใคร ดงนนจ
1. หนวยงานทควบคมการจดชอโดเมนเนม ในระดบนานาชาต คอ in ชอทจด จะม suffix เปน .com .org
2. หนวยงานทควบค THNICเปนตน
มการจดชอโดเมน ในประเทศไทย คอ ชอทใชจด จะม suffix เปน .go.th, .co.th
เปนตน
วธการจดโดเมนเนม มขนตอนดงน
ส
) ใไดแลว ตองตรวจสอบกอนวา ชอนน มการนาไปใชแลวหรอยง ถาใชแลว
ตงชอซากนได ตองเปลยนใหม การตรวจสอบ สามารถทาไดจาก
1. ตรวจสอบชอทตองการ 2. หาเวบโฮสตง 3. ดาเนนการจดทะเบยน
1) ตงชอโดเมนทตองการ กอนทจะจดชอโดเมนเนม ตองมชอเ ยกอน การตงชอ ควรตงชอโดเมนใหจางาย และเกยวของกบสาระ หรอจดประสงคของเวบไซต ไมควรตงชอยาวเกนไป ควรเลอกนามสกล (suffix หถกกบประเภทของเวบ
2) เมอคดชอจะไมสามารถเวบไซตทใหบรการตรวจสอบชอโดเมน ซงสวนมากมกจะใหบรการการจดโดเมนไปพรอมกนดวย โปรแกรมทตรวจสอบ คอ Whois มเวบใหบรการเชน www.thnic.net www.ecomsiam.com และ http://www.siamwebhost.com เปนตน โดยปกต หนาตาในการตรวจสอบ จะใหพมพชอทตองการ และคลกปม เพอตรวจสอบ
ถาพบวา เปนโดเมนทมอยแลว มกจะแจงใหทราบ เชน
เนรมตเวบสวยดวย Dreamweaver หนา 87/96
หนา 88/96 เนรมตเวบสวยดวย Dreamweaver
ยนในประเทศไทย (นามสกล .co.th .or.th
นเนมท http://www.thnic.net3) ดาเนนการจดทะเบยน การจดทะเบ
.ac.th เปนตน) ตองจดทะเบยนโดเม เทานน
ยน ตองเตรยมเอกสารหลกฐานนอกจากน ท thnic.net ยงใหบรการพนทสาหรบฝากเวบอกดวย กอนการจดทะเบ ตาง ๆ ใหพรอม และถาจะนาเวบไปไวทอน ตองขอ DNS จาก (หรอ เวบโฮสตง) ทจะนาเวบไปวางไวดวย เพอ thnic จะ
ยของโดเมนไดถกตอง การจดทะเบยนตางประเทศ (นามสกล โด ษท
ทานควรลงทะเบยนผานเวบไซตทใหบรการ เซรฟเวอร
สามารถชไปยงทอ.com .org .biz เปนตน) ทานสามารถตดตอได ยตรง กบบร ทใหบรการ เซรฟเวอร ไดโดยตรง แตอาจจะไมสะดวก ในการสงเงน เพราะตองแลกเปลยนเงนตราตางประเทศ ทางทดหรอ เวบโฮสตง ซงมกจะใหบรการ 2 อยาง คอ จดโดเมนเนมตางประเทศ และ
รบเวบไซต การลงทะเบยนปกตทาไดงาย ไมตองการเอกสาราษาองกฤษ และสงเงนตามจานวนทตกลง เมอ
แลว จะไดรบการแจงจากทางอเมล พรอมทจะสงไฟลขนเวบตอไป
ใหบรการพนทสาหมาก เพยงกรอกแบบฟอรมเปนภเรยบรอย
การหาเวบโฮสตง เทอรเนต จาเปนทจะตองนาเวบไปวางไว ทใดทหนง ทเครองคอมพว รถเขาถงได เครองคอมพวเตอรทสาหรบใหเวบไปวางไวเพอใหบรการดงกลาว ต โดยปกต นของตวเอง มบคลากรทดแลระบบของ Ser กบคคลนวา เปน administrator หรอ เ า เปน admin มหนาทหลกในการบรหาร ร Serveเกยวกบระบบ ตองรบแๆ เชน การจดการเกยว สาหรบองคกรขเสยคาใชจาย ทงดาน อ และดานบคลากรทจะดแล Server ดงนน องคกรขนาดเลก สวนใหญจ ไปใชบรก ver สาหรบเวบไซต โดยผใหเชา รบผดชอบในดานการดเวบไซต สามารถเขาใช นได ไมมอปสรรค ผใชเวบสามารถเขาถงไดโด
การใหบรการเวบทางอนเตอรเครองอน ๆ สามา เราเรยกวาเปน Server ลงจากทเราสรางเวบเพจเสรจแลว เราจาเปนทจะตองหา Server เพอนาเวบขนสอนเทอรเนหถาเปนองคกร ขนาดกลาง หรอขนาดใหญ จะม Server เปver ซงเรย รยกสน ๆ ว
จดกา r ให Server สามารถทางานไดตลอดเวลา 24 ชวโมง โดยไมลม หากมปญหากไขทนท และนอกจากน ยงมหนาทในการทาการจดสรรทรพยากร ใหแกเวบตาง กบ IP, DNS ตลอดจนระบบบรการตาง ๆ เชน ระบบฐานขอมล อเมล เปนตน นาดเลก ถาจะดาเนนการจดหา Server เปนของตนเอง อาจจะไมคม เพราะตองปกรณฮารดแวร
งมกจะ ารเวบโฮสตง ซงเปนบรการใหเชาพนทบน Serแล Server พรอมทงจดบรการตาง ๆ ให สาหรบ web master ซงเปนผดแลบรการอยางเตมท ดวยความมนใจวา ระบบสามารถทางายสะดวก และสามารถใชบรการไดตลอด 24 ชวโมง
เวบโฮสตง คอ เวบโฮสตง มทง
การให ฟร และเว
หนวยงานทใหบรการพนทบน Server สาหรบเวบไซตตาง ๆบรการ บโฮสตงทคดคาบรการ
เวบโฮสตงทใหบรการฟร มหลายรปแบบ เชน การมโฆษณาฝากไวทหนาเวบทกเวบทเขาใหบรการ หรอแมแตการตงชอ
ทใชชอข เ นการแนะนาตวในตอนแรก เปนตน รายกวานน ง กใหผสมครเขาไปใช ตอมากเสนอบรการเพมเตม ร สวนมากมาจากการโฆษณา หรอการคลกแผนปายโฆษ
าะบางเวลาเทานน สวนใหญไมมฐานขอมลใหทาใหไมสามารถเกบขอมลตาง ๆ ได และนอกทสรางขน โดยให
เวบและใหสามารถใ CGI มกจะถกโจมตจากภายนอกไดงาย โดยการสง spam รอถก hack ได บางแหงมนโยบายเครงครดในการพจารณารายละเอยดตาง ๆ กอนทจะรบ หรอไมรบ
ซงอาจต ายแหงไดรวบรวมเวบฟร เพอใหเลอก เชน
อง วบทใหบรการฟรนาหนา ทาใหเปนทรจก หรอเป บา แหงนาอเมลของผสมครไปขาย บางแหงหลอซงตองเสยเงน อยางไรกตาม รายไดของเวบฟณา (Banner) เวบไซตทใหบรการฟร บางแหง เมอมสมาชกมากขน กปดบรการ หรอ เปดให
สามารถสมครสมาชกเฉพจากน สวนใหญ มกจะไมอนญาตให สงไฟลขนบน Server ดวยวธการ FTP แตใหใชหนาจอ
เหตผลดานความปลอดภย ทใหบรการฟรสวนใหญไมคอยมนคง โดยเฉพาะอยางยงถาเปดใหบรการอยางไมมขอจากด
ช Web script เชน PHP หรอห
องใชเวลาอยบาง แหลงเวบฟร มเวบไซตหล www.absolutely-free-hosting.com www.free-webhosts.com mwww.freewebdir.co www.prospector.cz
การใชเวบโฮสตงฟร นาจะเปนการใชชวคราว หรอ เปนการทดสอบ หรออาจจะมเหตผลในดานงบประมาณ แตอบาง ซงตองมเวลาใน
ยาคาดหวงมากนก อยางไรกตาม เวบทใหบรการฟร และมความนาเชอถอ กยงคงมอยการคนหา และทดลองใชด
เวบถาตองการค ป
ตาม แตละเวบกมคณยายโฮสตงได โดยท
แมวา การใ ก บสวนใหญ มกจะมบรจาเปนทตองขอ DNS
บรการทอย บรการหลก ๆ เชน พนท สครปต ฐานขอม SQL ซงพอเพยงสาหรบหนวยงานทไมใหญมาก
โฮสตงทคดคาบรการ วามมนคง เชอถอได และมบรการหลงการขาย ตองมองหาเวบ ระเภทน อยางไรกภาพลดหลนกนออกไป หากพบวา ไมสามารถใหบรการตามทเราตองการ กอาจจะยงใชโดเมนชอเดม ชบรการเวบโฮสตง กบ ารจดโดเมนเนม เปนคนละสวนกน เว ทใหบรการโฮสตงการจดโดเมนเนมตางประเทศ ดวยควบคกนไปดวย แตถาทาน จะจดโดเมนทอน
หมการโตตอบกบผใชได ล สวนใหญจะใหเปน My
จากเวบโฮสตงดวย บนเวบ ขนอยกบราคาคาบรการ สวนใหญมกจะม
การใชงาน จะไดรบมาก-นอย ตางกนไป เชน PHP, CGI, ASP ซงทาใหสามารถจดทาเวบใ
เนรมตเวบสวยดวย Dreamweaver หนา 89/96
หนา 90/96 เนรมตเวบสวยดวย Dreamweaver
ปร เชน 3000 MB ตอเดอน ถาเว เวบไซตบางแหง คดคาใช
SSL วบได เวบทใช SSI จะมนาม
แหลงเวบโฮ ง san
มาณการถายโอนขอมล มกจะกาหนดเปนจานวน MB ตอเดอน บมการดาวนโหลดขอมลมาก อาจจะใชเกนปรมาณทกาหนดจาย ถามการถายโอนขอมลมากกวาทใหไว
SMTP Server ทาใหสามารถเขยนสครปตสงเมลได ทาใหสามารถเรยกใชขอมลจากไฟลอนและนามาแสดงในหนาเสกลเปน shtml
สตง มเวบไซตหลายแหงไดรวบรวมแหลงเวบโฮสต เชน ook.com w.webhostingbluebook.com ww w.madoo.com ww
การอพเมอสรางเวบ
ยงเซรฟเวอร เพอใหการอพโหล
หลายวธ เชน อาจจอยางไรกตาม ทานสจะเปนการสงไฟลโด
โหลดไฟล ไซตเสรจแลว ขนตอนสดทาย คอ การอพโหลดไฟล การอพโหลดเปนการสงไฟลไปบรการอนเทอรเนต ผใชสามารถเขาดได ดไฟล ในบทเรยนนจะใชวธ FTP ไปยงเซรฟเวอร การ FTP ไปยงสามารถทาไดะใชโปรแกรมสาหรบสงโดยเฉพาะ เชน WS_FTP LE หรอ CuteFTP เปนตน ามารถสงไฟลไปยงเซรฟเวอร โดยใช Dreamweaver ได เชนเดยวกน ในบทเรยนน ยใช Dreamweaver8
การจดหาเซรฟเวอร
อรเสยกอน เซรฟเวอร คอ คอมพวเตอรทใหบรการเวบไซต ซงอาจจะง ห บท
f โดยใชคาคนหาวา โฮสตง หรอ โฮสตง+ฟร (สาหรบคนหาเวบท
กอนสงไฟลตองมเซรฟเวจดหาเอ รอใชบรการ Web hosting ซงมทงฟร และเสยคาใชจาย สวนใหญเว ใหบรการฟร มกจะไมสามารถสงไฟลทาง FTP ได ตองสงผาน ile manager ของเวบนน ๆ ถาตองการทราบรายละเอยดลองหาดไดจาก Google Searchใหบรการฟร)
เมอมเซรฟเวอรแลว ขนตอไป คอ การหา URL ซงสามารถทาได ทงการขอ Sub domain ของเวบทมอยแลว หรอ ขอ Domain เปนของตนเอง รายละเอยดการขอ Domain ใหทานศกษาไดท http://www.thnic.or.th ถาตองการใช Sub domain ของเวบไซตใด ตองตดตอผดแลระบบของเวบไซตนน ๆ เมอม URL หรอทอยทจะสงไฟลไปแลว ถาจะสงดวยวธ FTP จาเปนตองมชอผใช (uer name) และรหสผาน (password) ซงผดแลระบบของ เซรฟเวอร จะเปนผใหมา ทงสามอยางน (URL, user name และ password) จาเปนตองม เปรยบเสมอนกญแจทจะเขาไปยงเซรฟเวอร
สงทควรระวงในการสงไฟลไปยงเซรฟเวอร 1. ชอของไฟลทกาหนดในสงคและชอไฟลจรง จะตองตรงกน โดยเฉพาะตวอกษร
ภาษาองกฤษ ตวพมพเลก หรอตวพมพใหญ ควรใหเหมอนกน ทงนเพราะ ถาสงไฟลขนเซรฟเวอรทเปนระบบ UNIX ถาใชตวอกษรตวเลก-ใหญ ไมเหมอนกน จะไมสามรถลงค
ได จงตองตรวจสอบเสยกอน ทงนเพราะบางครงมการคดลอกไฟลไปยง Windows รนอน ๆ ทาใหชอของไฟลเปลยนไป และเปนปญหาเมอสงไฟลไปยง UNIX Server
2. ไฟลทลงคจะตองมอยจรง และอยในหองทระบ ควรตรวจสอบใหดวา ทกลงคอยครบสมบรณ
การอพโหลดดวย reamweaver8
มขนตอนดงน 1. กาหนดรายละเอยดเกยวกบ Remote Site 2. การตดตอกบเซรฟเวอรโดยผาน Dreamweaver จาเปนตองกาหนดรายละเอยด ท Remote
Site เสยกอน Remote Site คอ Site ทอยบนเซรฟเวอรทเราจะสงไฟลไปเพอใหบรการบนอนเทอรเนต (ถากาหนดแลวในตอน กาหนด Site กอนการทางาน กไมจาเปนตองทาขนตอนน)
D
3. เปดโปรแกรม Dreamweaver8 4. ไปท Site > Manage Site... 5. เลอก Site ททางานทตองการสงขอมลขนเซรฟเวอร แลวคลกปม Edit เพอไปกาหนด
รายละเอยดเพมเตม ในตวอยางน ไดกาหนดชอ Site วา myCenter
6. จะเปดหนาตาง Site Definition for DreamSite ขน ถาเปนชออน กจะมชอ Site อน เชน
Site Definitin for mySite เปนตน 7.
หรอ Folder ทเกบไฟล และร ถามการกาหนด site กอนทางาน กจะเหนขอมลของ Site ททางาน เชน ชอ Site และหอง
ายละเอยดอน ๆ คลายขางลางน
8. ในหวขอ Category ใหคลกท Remote Info เพอไปตงคาของ Remote Site
เนรมตเวบสวยดวย Dreamweaver หนา 91/96
หนา 92/96 เนรมตเวบสวยดวย Dreamweaver
9. ในชอง Access ซงหมายถงการตดตอกบเซรฟเวอร ใหคลกเลอก FTP เพราะเราจะสงไฟลดวยวธน การสงไฟลดวยวธ FTP จะตองแนใจวาเซรฟเวอรทจะสงไปอนญาตใหสงไฟล วยวธน ถาไมทราบทานตองถามผดแลเซรฟเวอรดว
ดยตนเอง แตสวนใหญถาเปนเซรฟเวอรท
องตรวจสอบวาอนญาตใหสงดวยวธนเชา จะสามารถใชไดทกแหง แตถาเปนบรการฟร ตหรอไม
10. นการสง ถาไมทราบ ตองถามผดแลเซรฟเวอรททานจะสงไป ถาไม
กขอมลไมถกตอง กจะไมสามารถสงขอมลได
irewall settings... ถาไมทราบตองถามผดแลเซรฟเวอร รฟเวอรใช ระบบความปลอดภยตองระบดวย
ใหกรอกขอมล ทจาเปนใกรอกขอมล หรอกรอ 11. FTP host: ทอยทจะสงไป
12. host directory: หองทจะสงขนไป 13. Login: ชอทไดรบการอนญาตใหเขาใชเซรฟเวอร
14. Password: รหสผาน 15. Use passive FTP: ปลอยวางไว ถาคลก Test แลวยงเขาไมได ใหทดลองคลกสลบไปมา 16. Use Firewall: ถาเซรฟเวอรมการใช Firewall ปองกน ตองระบ และตองตรวจสอบวา port
ถกตองหรอไม โดยคลกทปม F17. Use Scure FTP: ถาเซ
18. กรอกเสรจแลวใหทาก รตรวจสอบโดยค กปม Test ถาไมสามารถเขาได ใหคลกเลอก Use
passive FTP แลว ทดสอบอกครง ถายงเขาไมได ใหตรวจสอบขอมลกบผดแลเซรฟเวอร 19. ถาสามารถตดตอกบเซรฟเวอรได Dreamweaver จะแจงใหทราบ ดงน
า ล
การสงไฟลทงหมดขนเซรฟเวอร
เมอตดต
ทงหมดทกไฟล ค
น
อกบเซรฟเวอรไดแลว ขนตอไปจงจะสามารถสงไฟลได ถาเปนการสงครงแรก ตองสงซงมขนตอน ดงน
1. เปดไฟล ตรวจดทกไฟลใหพรอมทจะสง อยาใหมขอผดพลาด เชน ลง เสย หรอไมมภาพ เปนต
เปด Files Panel (ไปท Window > Files) ถายดออกขยาย
2. ถา Files panel ไมเปดอย ใหใหกวางขนจะเหนเมน ดงน
a) b) คอ ตอเชอมแลว ถายง
ไมต
หมายเลข 1 เลอกด Site ตาง ๆ ถามหลาย Site หมายเลข 2 ปมตอเชอมกบเซรฟเวอร ลกษณะทเหน
อกบเซรฟเวอร จะมลกษณะ หมายเลข 3 คดลอกไฟลจากเซรฟเวอรมายงเครองทc) างาน หรอ Get File
อมกน จะ
3.
d) หมายเลข 4 สงไฟลจากเครองทางานไปยงเซรฟเวอร รอ Put File e) หมายเลข 5 ในกรณทางานหลายคน เปนการบอกวาขอไฟลนมาแกไข คนอน
หามยง จนกวาจะแกไขแล
ห
วเสรจ f) หมายเลข 6 เปนการสงไฟลเพอใหคนอนแกไขได g) หมายเลข 7 เปนมมมองทงบนเซรฟเวอร และบนเครองทางานพร
แบงหนาจอออกเปนสองสวน ท Files panel ใหคลกเลอก Site ทง Site
ตดตอกบ เซรฟเวอร ใหกดปมตดตอ (แตทงน จะตองก
Remote Site และทดสอบวาสามารถตดตอกบเซรฟเวอรได4. ถายงไมได าหนดรายละเอยด
เกยวกบ วเทานน ถายงไมไดกาหนด Dreamweaver จะเปดหนาจอใหตงคาของ Remote Site)
แล
เนรมตเวบสวยดวย Dreamweaver หนา 93/96
หนา 94/96 เนรมตเวบสวยดวย Dreamweaver
5. ถาไมมปญหา ปมนจะแสดงใหเหนวาตดตอกบเซรฟเวอรไดแลว ดงน
6. ถาไมสามารถตดตอได แตเคยทดสอบผาน ใหตรวจสอบ ชอและรหสผาน ท Remote
การตดตอกบเซรฟเวอรไมได ตองกาหนดคSite แตถายงทดสอบ าสาหรบตดตอ กบ อน ตามขนตอนขางตน พรอมทงทดสอบดวาสามารถRemote Site ใหถกตองเสยก
ตดตอกบเซรฟเวอรไดแลวเทานน 7. กดปมสงไฟล หรอ Put File(s)
8. Dreamweaver จะถามเพอความแนใจวาตองการสงไฟลทงหมดจรงหรอไม ใหคลก OK
9. Dreamweaver จะสงไฟลทงหมดไปยงหอง ทกาหนดไว เมอครงก หนดรายละเอยดา
ของ Remote Site ขนตอนนอาจจะใชเวลามาก ถามหลายไฟล หรอความเรวในการตอเชอมตา ถาการตอเชอมกบอนเทอรเนตขาดตอน กตองดาเนนการสงใหม
การตรวจสอบไฟลบนเซรฟเวอร และบนเครองทางาน 1. ท Files Panel ใหคลกปม เพอเปดหนาจอใหม ดงน
2. ทางดานซ อจะเปนไฟลทอยบน
เครองท นาจอน ไดเชนเดยวกบบน
ายมอ จะเปนไฟลทสงขนไปบนเซรฟเวอร สวนทางขวามางาน เราสามารถคลกเมน หรอ เครองมอตาง ๆ บนห
Files panel
การสงไฟลเฉพาะบางไฟล
ใหคลกเลอกไฟล บนเครองทางาน1. ทตองการสงขนเซรฟเวอร
ม Put File ( 2. คลกป )
การนาไฟ1. ใหคล นเครอง
ทางาน2. คลกปม
ลจากเซรฟเวอรมาทเครองทางาน กเลอกไฟลในฝงซาย ซงอยบนเซรฟเวอร ซงตองการคดลอกมาทางานบ
et File ( G )
การลบไฟซายมอ แลวคลก Edit และ คลก Delete ดง
ลบนเซรฟเวอร าทไฟลบนฝงเซรฟเวอรทอยดา1. ใหคลกขว น
ภาพ
โปรแกรมจะตดตอกบเซรฟเวอร และเมอตดตอไดแลว จะถามวาจะลบจรงหรอเปลา ใหกด OK เพอตอบรบวาตองการลบ
2.
เนรมตเวบสวยดวย Dreamweaver หนา 95/96
หนา 96/96 เนรมตเวบสวยดวย Dreamweaver