Dreamweaver8 new[1]

สารบญ

หวขอ หนา 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

http://www.crnfe.ac.th/dream8/unit1/dww_unit1_01.html




















หนา 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



2. หลกการสรางเวบไซต เรมตนสรางเวบไซต การจดการโครงสรางโฟลเดอร การเปดเวบเพจใหม การเพมและแกไของคประกอบบนหนาเวบ การ หวเรองบนหนาเวบ ใส การใชงานภาษาไทยใน Dreamweaver 8 การเพม-ลบฟอนต

3. การปรบแตงขอความบนเวบเพจ การใสขอความบนหนาเวบ การตกแตง ละจดรปแบบขอความ แ การยอนกลบเพอแกไขขอผดพลาดดวยพาเนล History การบนทกเวบเพจ การดผลลพธของเวบเพจบนหนาตางบราวเซอร

4. ตกแต บเพจดวยกราฟก งเว เตรยมภาพเพอใชในเวบเพจ การปรบแตงรปภาพ การนาภาพมาแสดงเปนพนหลงเวบเพจ การแกไขรปภาพ

รางตารางบนเวบเพจ 5. การส การสรางตาราง การปรบขนาดชองตาราง การใสขอมลและภาพในตาราง การเลอกตาราง แถว คอลมน และเซล การปรบแตงรายละเอยดของตาราง การจดเรยงขอความในตาราง การแทรกแถวและคอลมน การลบแถวและคอลมน การรวมและการแบงเซล การขยายและลดความกวางเซลในตาราง ปรบความสงและความกวางของตารางใน Property Inspector การซอนตาราง การกาหนดสใหกบพนตาราง การคดลอกขอมลในตาราง

6. การเชอมโยง การเชอมโยงภายในเวบเพจหนาเดยวกน การเชอมโยงภายในเวบไซตเดยวกน







การเชอมโยงไปเวบไซตอนและเชอมโยงดวยอเมล การเชอมโยงดวย Map Link การกาหนดคณสมบตของการเชอมโยง

7. การออกแบบเลยเอาท การใชเลยเอาท โครงสรางของหนาเวบ ะเลยเอาทเซล

8. เฟรม เการสรางเลยเอาทเทเบล แลยอร แฟลช เล การใชเฟรม การใชเลเยอร การใชแฟลช (Flash)

9. การจ ะ ตง และการอพโหลดไฟล ดท เบยนเวบไซต การหาเวบโฮส การจดทะเบยนเวบไซต การหาเวบโฮสตง การอพโหลดไฟล













ความรเบองตนในการสรางเวบไซต หลกการสรางเวบไซต

ะตองมความรเกยว กบภาษา 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) คอ กา ตอกนบนอนเทอรเนต จะใชไอพ

สอดคลองกบหนวยงชอ เชน การไฟฟาฝายผลตแหงประเทศไ



ทาความรจก 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. จะปรากฏหนาตางเตรยมการตดตงโปรแกรม ดงภาพ



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 ดงภาพ



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

ภาพ



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. กลม ถเลอกเครองมอทใชบอยจากแตละกลมเครองมอ

ไดตามความตองการ มาใสในเมนน



การเปลยนรในกล

ปแบบการเรยกใชงานกลมเครองมอ มเครองมอ คาสงสดทาย คอ 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


การกาหนดโครงรางของเวบ ในการสรางเวบไซต กอน นควรออกแบบโครงรางคราวๆ ของเวบไซตนนกอน เพอไมใหเกด

ความยงยากทจะตามมาในภายหลง เวบไซตทประกอบดวยเวบเพจหลาย ๆหนา ควรจดเกบเวบเพจไวในโฟลเดอรตาง ๆ ดงตวอยาง ถาเราทาเวบไซตเกยวกบองคกรของเร

อ

า กอาจสรางตงโฟลเดอรชอ 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 ให ตามตองการ

างโฟลเดอร 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 ชอเวบเพจนจะน ดงภาพ



• เนล File

1. คลกเมาสปมขวาทโฟลเดอร Site งาน

เปลยนชอ ใหตงชอไฟลงานตามตองการ

3. ดงตวอยาง สมมตเวบเพจนเปนหนาหลก ใชชอวา index.html กพมพชอแลวกด Enter

การสรางเวบเพจใหมในพาเปนการสรางไฟลงานใหมทเกบไวใน Site งานทงาย สะดวก รวดเรว มขนตอน ดงตอไปน

แลวคลกเลอก New File

2. จะปรากฏเวบเพจใหม ชอ Untitled (แปลวา ไมมชอ) ทมนามสกล .html พรอมสาหรบการ

การสรางโฟลเดอรใหมในเวบไซต ในกรณทเราตองการสรางโฟลเดอรใหมเพอเกบภาพ หรอแยกจดเกบเรองตาง ๆ ไมใหปะปนกน เราจาเปนตองสรางโฟลเดอรใหม การสรางโฟลเดอรใหม สามารถทาไดดงน

เลอก New Folder

2. ใหตงชอโฟลเดอรใหม สมมตโฟลเดอรนไวเกบขอมลบคคลทใชในเวบไซตน ใหชอโฟลเดอรวา personal พมพชอแลวกด Enter จะไดดงภาพ

1. คลกเมาสปมขวาทโฟลเดอรทเกบ Site งาน แลว

การเปลยนชอไฟลและโฟลเดอร การเปลยนชอไฟลและโฟลเดอร สามารถ

กระทาไดงาย โดยคลกเมาสขวาทไฟล หรอโฟลเดอรทตองการจะเปลยนชอ แลวเลอก Edit >Rename จะเกดลกษณะพรอมทจะเปลยน แลวพมพชอใหมทตองการ

การลบไฟลและโฟลเดอร การลบไฟลและโฟลเดอร ทาไดโดยคลกเมาสขวา ทไฟล หรอโฟลเดอรทตองการลบ แลวเลอก Edit >Delete ไฟลหรอโฟลเดอรจะถกลบไป ดงภาพ

การเปดเวบเพจใหม ในการเปดเวบเพจใหม ใหดบเบลคลกไฟลทสรางไว เพอทจะเขาไปทางาน เวบเพจจะถกเปดหนาวางขนมาใหเราออกแบบการทางาน


หนา 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 กาห


หมายเลข 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



จะแสดงบนหนาหมายเลข 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 ดงภาพ



ถาเรา 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



การปรบแตงขอความบนเวบเพจ การใสข

การใสข เลย หรอจะ 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

เรากสามารถตงคาฟอนต ขนาด ส ตาแหนงของขอความ ด

เมอเปดหน เราสามารถกาหนดขนาด ประเภทตวหนงสอหร ขอความเปน ตวส

าจอเครองมอ ทจะใชปรบแตงตวหนงสอ หรอขอความ ขน อฟอนต สของตวอกษร ตาแหนง และอน ๆ สมมตวา ตองการให



นาเงน ง งเวบเพจ และหวขอเปนตวหนา สามารถกระทาไดโดยใชเอย ขอความตาแหนงชดซายขอเครองมอดงทกลาวมาแลว ขางตน จะไดผลลพธ ดงภาพ

เครองมอทใชจดตาแหนงและตกแตงขอความ ทควรร มดงน

การจดตาแหนงขอความโดยใชปม

1. จดชดซายของเวบเพจ 2. จดอยก3.

งกลาง จดชดขวา

4.

จดใหข

การจดยอหนาโดยใช

อความอยเตมบรรทด

ปม

5. คลกทปม Text Indent เพอจดยอหนาของขอความใหเขาไปมากนอยไดตามตองการ

6. ถาจดยอหนาเขาไปมากเกนไป กสามารถคลกปม Text Outdent เพอยกเลกยอหนา ใหไดระยะหางตามตองการ

การใส Bullet และตวเลขกากบในแตละบรรทด

7. ใชจดลาด กษณรปแบบ ตาง ๆ 8.

บเนอหาในแตละบรรทดดวย Bullet หรอสญลใชจดลาดบเนอหาในแตละบรรทดดวยตวเลข

การยอนกลบเพ ในการทางานออกแบบเว ดพลาดได เราสามารถยอนกลบไป

อแกไขขอผดพลาดดวยพาเนล History บเพจ เมอทาไปเรอย ๆ อาจเกดขอผ

แกไขขอผดพลาดได โดยไปทเมนบาร Window>History หรอกดคย < Shift+F10> ดงภาพ

างานทกขนตอน โดยขนตอนลาสด จะเรยงอยลาด เมอเปดพาเนล History จะเหนบนทกการท บ

นสดของรายการ ขนตอนกอนหนานจะอยลาง ๆ ดงภาพ บ

างานหลาย ๆ ขนดวยพาเนลน เราทาไดโดย คลกเลอนแถบ การยอนกลบการท ไปยงขนตอนท

เราตองการยอนกลบไป โดยจะเลอนไปทละขนตอน หรอหลายขนตอนได ดงภาพ

าซาขนตอนการทางาน เราสามารถสงใหทาซาขนตอนการทางานทเราตองการจะให การท ทาซา

ในพาเนล History ได โดย

1. คลกเลอกขนตอนทตองการใหซา



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 จะม

งภาพ



การดผลล งเวบเพจบนหนาตางบราวเซอพธขอ ร เมอเราบนทกเวบเพจเสรจเร บเพจทเราออกแบบวาเวลาแสดงผลบนหนาตางบราวเซอรจะมผลตามท าเนนการได 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 และเล



ขนตอนท 1 ขนตอนท 2 ขนตอนท 3

จะไดภาพทต

เลอกโฟลเดอร images ซงอยในโฟลเดอร organization เลอกภาพทตองการ เมอเลอกภาพไดแลว คลกปม OK

องการ บนหนาเวบเพจ ดงภาพ

วามเชอมโยงของภาพ และอน ๆ ได ดงภาพ

การปรบแตงรปภาพ นาภาพเขาเวบเพจไดแลว เราสาเมอ มารถปรบแตงภาพไดโดยใช Properties ของภาพนน ๆ

โดยคลกทภาพจะเกดจดดา 3 จดรอบภาพและเกด Properties ของภาพ ซงสามารถปรบความกวาง ความสงของภาพ ใสชอภาพ กาหนดค


ะเอยดในการตกแตงภาพสามารถกระทาไดหลายประการ ดไดจากภาพ ดงน รายล

หมายเลข 1 คอ ความกวางของภาพ เราสามารถแกไขและปรบขนาดรปโดยใสตวเลข

บขนาดรปโดยใสตวเลขได

ปภาพ ไฟลรปภาพ

หมายเลข 7 กาหนดความหนาของเส

า พ าเวบ

นอกจาก การกาหนดขนาดของภาพโดยใสตวเลขทชอง W และ H ดงทไดกลาวมาแลว เรายงสามารถยอ -ขยายขนาดของภาพได ดงภาพ

ไดตามตองการ หมายเลข 2 คอ ความสงของภาพ เราสามารถแกไขและปร

ตามตองการ หมายเลข 3 ชองใสชอของร หมายเลข 4 แสดงทเกบ หมายเลข 5 ใชกาหนดการเชอมโยงภาพไปยงขอมลหรอเวบไ หมายเลข 6 ไวใสขอความกากบภาพ

ซตอน

นขอบภาพโดยกาหนดเปนตวเลข ตงแตเลข 1 จะขอบบางสด

หมายเลข 8 กาหนดตาแหนงก รวางภา หมายเลข 9 กาหนดตาแหนงการวางภาพบนหน



ใหเราวางเมาสทจดดาทมมภาพดานลาง เมอเกดลกศรสองทางเอยงใหดหดไดตามตองการ แตถาตองการใหภาพยดหดไดตามสดสวนของภาพ

หมายเลข 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 จะแสดงผลลพธของขอความทอยในแนวดานบนของขอบภาพ ดงภาพ



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 ใหดาเนนการตามขนตอน ดงน อกโฟลเดอรทเกบเวบไซต



2. หมายเลข 2 จะพบโฟลเดอรยอย คอ images ทเกบรปภาพ ใหดบเบลคลกทโฟลเดอรนเพอเปดหาภาพทตองการ ดงภาพ

3. เมอไดภาพทตองการ ใหคลกเลอกภาพ แลวคลก OK

5. จะเกดหนาจอ Page Images จะปรากฏทอยของไฟลภาพและชอภาพท ผลลพธกอนแสดงผลทหนาจอ ตอจากนน ใหคลกปม

Properties อกครง ในชอง Background เราเลอก ตอไป ใหคลกเมาสทปม Apply เพอด

OK ดงภาพ

หนาเวบเพจของเรา จะถกปพนหลงดวยภาพทเราเลอก ดงน

การแกไขรปภาพ ภาพทนาเขามาวางบนหนาเวบเพจ สามารถกระทาได โดยใชเครองมอ

ปรบแตงภาพ ใน Property Inspector ดงภาพถาเราตองการแกไข

จากภาพ เราจะใชกล อแตละตว มหนาทแตกตางกน ดงน

หมายเลข 1

มเครองมอ Edit ในการปรบแตงแกไขภาพ โดยเครองม

คอ


เครองมอสงภาพทเลอกไปตกแตงในโปรแกรม Fireworks

คอ การลดขนาดภาพทใชในโปรแกรม Fireworks

หมายเลข 3 คอ การเล กสวนใดสวนหนงของภาพเพอใชตกแตง เราสามารถตดสวนของภาพเฉพาะทตองการ

อ โดยมขนตอนงาย ๆ ดงน

1. คลกเมาสทภาพ และคลกท เพอตดภาพทตองการ

2. คลกเมาสเลอนปมสดาทลอมรอบภาพ เพอเลอกสวนทตองการ แลวกด < Enter > เพอตดภาพ

3. ภาพจะถกตดสวนทไมตองการออก ตามทเราเลอก ดงภาพ



หมายเลข 4 คอ การกาหนดใหภาพทปรบขนาดแลวเปนภาพตนแบบ เมอเราปรบขนาดroperty Inspector ในชอง W (ควาภาพท P มกวาง) และ H (ความสง) จนเปนทพอใจแลว และ

ตองการภาพนไปแทนภาพตนฉบบ ใหคลกท หมายเลข 5 คอ


เครงมอปรบความสวาง/ความเขมสของภาพ

คอ ปรบความคมชดของภาพ

การสรางตารางบนเวบเพจ การสรางตาราง

ในการออกแบบเวบเพจ วเลข รปภาพ แผนภม กราฟ และอน ๆ แตม าหรบการนาเสนอขอมลจานวนนมาก งาย สบายตา เชน ตารางประวตบคลากร ในรปของแถ

การสรางตาราง างตารางไดตามตองการ เชน เราจะสร างขอบเซลกบขอความภายในเซล 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 : กาห

จ



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 กาหนดความหนาเสนขอบภาพ



หมหมายเลข 8 เลอกจดตาแหนงการวางภาพ

ายเลข 9 กาหนดตาแหนงของภาพในหนาเวบเพจ

การเลอกตาราง แถว คอลมน และเซล กตารางทงตารางเพอปการเลอ รบแตง สามารถเลอกทาได 3 วธดงน

1. เลอนเม ดการเลอ

2. 3.

าสไปทขอบตาราง จนเคอรเซอรเปลยนเปนรป แลวคลกจะเกกทงตาราง หรอ

ใหคลกทเซลใดกไดในตาราง และใชคาสง Modify>Table>Select Table หรอ งภาพ คลกทแทก <table> ทแถบสถานะดานลางของเวบทกาลงทางาน ด

การเล การเลอกแถว เคอรเซอร จะเปลยนเปนรปลกศร ใหคลกเลอก แถวจะถกเลอกท

อกแถว ทาไดงาย ๆ โดยนาเคอรเซอรไปวางทหนาแถวทตองการจะเลอก

งแถวตามตองการ ดงภาพ

อกวธหนงในการเลอกแถว คอ คลกเลอกเซลใดกไดในตาราง แลวคลกแทก < tr > ทกเซลในแถวนนจะถกเลอก ดงภาพ

การเลการเลอกคอล ไปวางไวบนคอลมนท

ตองการเลอก จะปรากฏล

อกคอลมน มน ดาเนนการคลาย ๆ กบการเลอกแถว คอ นาเคอรเซอร

กศรสดา ใหคลกเมาส คอลมนจะถกเลอกทงคอลมน ดงภาพ

การเลอกเซล

การเลอกเซล ทาไดงาย ๆ 3 วธ ดวยกน คอ

1. ถาตองการเลอกเซลเดยว ใหวางเคอรเซอรทเซลนน ๆ แลวคลกแทก < td > ขางลาง ดงภาพ



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 ดเร



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 คอลมน และปรบขนาดของคอลมนไดตามต



การลบแถวและคอลมน เมอเราเพมแถว หรอคอล จะลบแถวหรอคอลมนทเราไมตองการใช

กน โดยดาเนนการงาย ๆ คอ หรอคอลมนทตองการจะลบ ดงภาพ มนได กสามารถท งานได

เชน คลกเลอกแถว

เม ารจะลบไดแลว ใหดาเน

ก รลวคลกขวา เลอกคาสง 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 ดงภาพ

ผลลพธทได ในแถวแรกเซลทกเซลจะถกรวมกน ดงภาพ



การแบ ดงน งเซล ดาเนนการตามขนตอน

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% ขนาดของตารางกจะถกขยายตามขนาดของหน



2. กาหนดคา ความกวางในชอง ความสง ในชอง ท Property Inspector ของตาราง ดงภาพ

จะไดผลลพธ ดงภาพ

การปรบความสงและคว

เพอความเหมาะสมของตวหนงส จะปรบขนาดความสงและความกวางของชองเซลได โดยดาเนนการ ดงน

1. คลกเมาสในชองเซลทตองการปร

ามกวางของชองเซล อในชองเซล เราสามารถท

บขนาด ดงภาพ

2. กาหนดตวเลขความกวาง ความสง ท Property Inspector ของเซล จากตวอยาง กาหนดใหชองเซล กวาง 50% สง 40 พกเซล ดงภาพ

3. จะไดผลลพธ ดงภาพ

การกาหนดขนาดของชองเซล ถาเปนเปอรเซนต ใหใส % ดวย แตถาเปนพกเซล ใสแตตวเลข



การซเราสามารถสร าเนนการ ดงน

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 ดงภาพ



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

อมโยงภายในเวบเพจหนาเดยวกน การเช



ก ดยวกน เหมาะสาหรบเวบเพจนน ๆ มขนาดขอมลยาวมาก เวลาดขอมลตองใชเมาสคลกเลอนแถบ 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 > เพอทดสอบผลการลงค เมอคลกทขอความ "บคลากร" จะปรากฏหนาเวบบคลากร



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 เลยกได จะปรากฏชอไฟลในชองลงค หรอจะพมพชอเวบลงในชอง



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 รป แลวนามาลากเปนรปสเหลยม

โปรแกรมจะวาดขอบเขตของตารางให ดงภาพ

เราสามารถปรบความกวางและความยาวของตารางโดยการ

คลกลากปมรอบขอบเขตของตาราง



ถาตองการแกไขปรบปรงตาราง ตองแกไขท 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 เปนการใชตามปกต าเสนอขอมลในรปตาราง

บตาราง โปรแกรมจะขยายตาราง ทาใหกตองไดดขน เราสามารถเขาหนาออกแบบดวยตาราง


HanK_MaN

Inserted Text

Edited by Foxit Reader Copyright(C) by Foxit Software Company,2005-2007 For Evaluation Only.


เมอคลกเมน 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. คลกบรเวณนอกตารางสวนหวทสรางขน จะเหนวาเสนขอบ

ตาง ๆ ของตารางสวนหวจะหายไป ดงภาพ



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 เปนไฟลสวนหว สวนนมภาพกราฟฟกทเปนชอโรงเรยนภาคกลาง และมเมนเพอจะลงคไปยงกลมงอยบนหนาจอเสมอ ไมเกยวของกบส

านตาง ๆ สวนนจะยงคงแสดงวนเนอหาหลก



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 เสรจแลวจะไดทงสองสวนครบ ดงน



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. เลอกภาพทตองการ



ก 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. เราสามารถขยาย หรอยอ ใหไ



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 ทใหบรการอนเทอรเนต จงตองมระบบการแป

ว



ระหวาง ไอพแอดเดรส และ โดเมนเนม 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 เปนตน โดยปกต หนาตาในการตรวจสอบ จะใหพมพชอทตองการ และคลกปม เพอตรวจสอบ

ถาพบวา เปนโดเมนทมอยแลว มกจะแจงใหทราบ เชน



ยนในประเทศไทย (นามสกล .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 ซงทาใหสามารถจดทาเวบใ



ปร เชน 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 ถาใชตวอกษรตวเลก-ใหญ ไมเหมอนกน จะไมสามรถลงค

http://www.thnic.net/

http://www.thnic.net/

http://www.thnic.net/index.php?page=policy

http://www.thnic.net/index.php?page=policy

ได จงตองตรวจสอบเสยกอน ทงนเพราะบางครงมการคดลอกไฟลไปยง 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



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)

แล



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.



Technology

Dreamweaver8 new[1]