1. สารบัญ
หัวขอ หนา
1. ความรูเบื้องตนในการสรางเว็บไซต 6
หลักการสรางเว็บไซต 6
อินเทอรเน็ตพืนฐาน้ 6
ความสําคัญของอินเทอรเน็ต 6
ทําความรูจัก HTML 8
คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8 9
การติดตั้ง Dreamweaver 8 9
การเปดใชงาน Dreamweaver 8 12
สวนประกอบของ Dreamweaver 8 13
2. หลักการสรางเว็บไซต 17
เริ่มตนสรางเว็บไซต 17
การจัดการโครงสรางโฟลเดอร 20
การสรางเว็บเพจใหม 20
การเพิ่มและแกไของคประกอบบนหนาเว็บ 26
การใสหัวเรื่องบนหนาเว็บ 27
การใชงานภาษาไทยใน Dreamweaver 8 27
การเพิ่ม-ลบฟอนต 29
3. การปรับแตงขอความบนเว็บเพจ 30
การใสขอความบนหนาเว็บ 30
การตกแตงและจัดรูปแบบขอความ 31
การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History 32
การบันทึกเว็บเพจ 34
การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร 36
4. ตกแตงเว็บเพจดวยกราฟก 36
เตรียมภาพเพือใชในเว็บเพจ
่ 36
การปรับแตงรูปภาพ 38
การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ 43
การแกไขรูปภาพ 45
5. การสรางตารางบนเว็บเพจ 46
การสรางตาราง 46
การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง 48
การเลือกตาราง แถว คอลัมน และเซล 50
การปรับแตงรายละเอียดของตาราง 52
เนรมิตเว็บสวยดวย Dreamweaver หนา 1/96

2. การจัดเรียงขอความในตาราง 52
การแทรกแถวและคอลัมน 54
การลบแถวและคอลัมน 56
การรวมและการแบงเซล 57
การขยายและลดความกวางเซลในตาราง 58
ปรับความสูงและความกวางของตารางใน Property Inspector 59
การซอนตาราง 62
การกําหนดสีใหกับพื้นตาราง 62
การคัดลอกขอมูลในตาราง 65
6. การเชื่อมโยง 65
การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน 65
การเชื่อมโยงภายในเว็บไซตเดียวกัน 66
การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล 68
การเชื่อมโยงดวย Map Link 69
การกําหนดคุณสมบัติของการเชื่อมโยง 70
7. การออกแบบเลยเอาท 71
การใชเลยเอาท 71
โครงสรางของหนาเว็บ 73
การสรางเลยเอาทเทเบิล และเลยเอาทเซล
้ 73
8. เฟรม เลเยอร แฟลช 77
การใชเฟรม 77
การใชเลเยอร 80
การใชแฟลช (Flash) 82
9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล 85
การจดทะเบียนเว็บไซต 85
การหาเว็บโฮสติ้ง 88
การอัพโหลดไฟล 90
หนา 2/96 เนรมิตเว็บสวยดวย Dreamweaver

3. เนรมิตเว็บสวยดวย Dreamweaver

คําอธิบายรายวิชา
หลักสูตรเนรมิตเว็บสวยดวย Dreamweaver นี้ จะชวยใหผูเขาอบรมลดภาระการประชาสัมพันธ
การเผยแพรขอมูลตางๆ ของ องคการ และลดปริมาณเอกสารภายใน โดยการจัดเก็บไวในรูปแบบของสื่อ
อิเล็กทรอนิกส หลักสูตรนี้เหมาะอยางยิ่งสําหรับหนวยงานที่ตองการจัดทําเอกสารไวในรูปแบบของ
เอกสารอิเล็กทรอนิกส หรือตองการลดปริมาณกระดาษ เชน ฝายบุคคลตองการสรางเว็บเพื่อแสดงขอมูล
ของพนักงานแตละคนไดวาชื่ออะไร อยูแผนกไหน เบอรโทรศัพทอะไร อีเมลอะไร พรอมรูปถาย หรือแจง
ขาวสารการจัดฝกอบรม การจัดเก็บคูมือปฏิบัติงาน การจัดเก็บวิดีโอสอนการทํางาน ฝายขายก็สามารถ
แสดงภาพสินคา และคุณสมบัติตางๆ ของ สินคาแตละชนิดได ฝายประชาสัมพันธก็สามารถเผยแพร
ขาวสารของบริษัทได ไมวาจะเปน ขาวเกี่ยวกับ 5ส การไปทัศนะศึกษาดูโรงงาน หรือวิดีโอการทํา
กิจกรรมในวันสําคัญตางๆ ฝายหองสมุดก็สามารถแนะนําหนังสือใหมๆ หรือความรูตางๆ สําหรับ
เผยแพรภายในบริษัท ฝายธุรการก็สามารถสรุปรายงานการประชุม ขาวสารจากผูบริหารได ซึ่งจะชวยให
องคการ ของทานมีการสื่อสารกันไดอยางมีประสิทธิภาพ
จุดประสงค
1. เพื่อใหผูเขาอบรมเขาใจหลักการสรางเว็บไซตสําหรับใชภายในองคกรของตนได
2. เพื่อใหผูเขาอบรมเขาใจการทํางาน และสามารถใชโปรแกรม Dreamweaver ได
3. เพื่อใหผูเขาอบรมนําไฟลประเภทตาง ๆ เชน ไฟลรูปภาพ ไฟลวิดีโอ มาใชในการจัดทําเว็บไซต
ไดอยางมีประสิทธิภาพ
ความรูพื้นฐานของผูเขาอบรม
1. Microsoft Windows
2. Internet Explorer
เนื้อหาหลักสูตร
1. ความรูเบื้องตนในการสรางเว็บไซต
หลักการสรางเว็บไซต
อินเทอรเน็ตพืนฐาน
้
ความสําคัญของอินเทอรเน็ต
ทําความรูจัก HTML
คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8
การติดตั้ง Dreamweaver 8
การเปดใชงาน Dreamweaver 8
สวนประกอบของ Dreamweaver 8
เนรมิตเว็บสวยดวย Dreamweaver หนา 3/96

4. 2. หลักการสรางเว็บไซต
เริ่มตนสรางเว็บไซต
การจัดการโครงสรางโฟลเดอร
การเปดเว็บเพจใหม
การเพิ่มและแกไของคประกอบบนหนาเว็บ
การใสหัวเรื่องบนหนาเว็บ
การใชงานภาษาไทยใน Dreamweaver 8
การเพิ่ม-ลบฟอนต
3. การปรับแตงขอความบนเว็บเพจ
การใสขอความบนหนาเว็บ
การตกแตงและจัดรูปแบบขอความ
การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History
การบันทึกเว็บเพจ
การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร
4. ตกแตงเวบเพจดวยกราฟก
็
เตรียมภาพเพือใชในเว็บเพจ
่
การปรับแตงรูปภาพ
การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ
การแกไขรูปภาพ
5. การสรางตารางบนเว็บเพจ
การสรางตาราง
การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง
การเลือกตาราง แถว คอลัมน และเซล
การปรับแตงรายละเอียดของตาราง
การจัดเรียงขอความในตาราง
การแทรกแถวและคอลัมน
การลบแถวและคอลัมน
การรวมและการแบงเซล
การขยายและลดความกวางเซลในตาราง
ปรับความสูงและความกวางของตารางใน Property Inspector
การซอนตาราง
การกําหนดสีใหกับพื้นตาราง
การคัดลอกขอมูลในตาราง
6. การเชื่อมโยง
การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน
การเชื่อมโยงภายในเว็บไซตเดียวกัน
หนา 4/96 เนรมิตเว็บสวยดวย Dreamweaver

5. การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล
การเชื่อมโยงดวย Map Link
การกําหนดคุณสมบัติของการเชื่อมโยง
7. การออกแบบเลยเอาท
การใชเลยเอาท
โครงสรางของหนาเว็บ
การสรางเลยเอาทเทเบิล และเลยเอาทเซล
้
8. เฟรม เลเยอร แฟลช
การใชเฟรม
การใชเลเยอร
การใชแฟลช (Flash)
9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล
การจดทะเบียนเว็บไซต
การหาเว็บโฮสติ้ง
การอัพโหลดไฟล
เนรมิตเว็บสวยดวย Dreamweaver หนา 5/96

6. ความรูเบื้องตนในการสรางเว็บไซต
หลักการสรางเว็บไซต
ในการสรางเว็บไซตในยุคเริ่มแรกนั้น ผูสรางจะตองมีความรูเกี่ยว กับภาษา HTML จึงจะ
สามารถสรางเว็บเพจได โดยใชโปรแกรม EditPlus หรือ Notepad ในการเขียนโคดทั้งหมด แลวบันทึก
เปนไฟลนามสกุล .html จากนั้นเปดบราวเซอรเพื่อดูผลลัพธของหนาเว็บที่สราง ซึ่งทําใหเสียเวลาในการ
ทํางานมาก แตถามี ความรูในภาษา HTML บางจะชวยใหเราสรางสรรคงานไดอยางสวยงาม ตามความ
ตองการ
ในปจจุบันโปรแกรม Dreamweaver เปนโปรแกรม สรางเอกสารเว็บเพจ ที่ทํางานในลักษณะ
HTML Generator คือ โปรแกรมจะสรางรหัสคําสั่ง HTML ใหอัตโนมัติ โดยผูใช ไมตองศึกษาภาษา
HTML หรือปอนรหัสคําสั่ง HTML มีลักษณะการทํางานคลายๆ กับการพิมพเอกสารดวย Word
Processor โดยอาศัยปุมเครื่องมือ (Toolbars) หรือแถบคําสั่ง (Menu Bar) ควบคุมการทํางาน ชวยให
งายตอการใชงาน สะดวก และรวดเร็วในการสรางเว็บเพจ
อินเทอรเน็ตพื้นฐาน
อินเทอรเน็ต มาจากคําวา Inter Connection Network เปนระบบเครือขายคอมพิวเตอรที่มีขนาด
ใหญ เครื่องคอมพิวเตอรทุกเครื่องทั่วโลกสามารถติดตอสื่อสารถึงกันได โดยใชมาตรฐานในการรับสง
ขอมูลที่เปนหนึ่งเดียว หรือที่เรียกวา โปรโตคอล (Protocol) ซึ่งโปรโตคอลที่ใชบนระบบเครือขาย
อินเทอรเน็ตมีชื่อวา ทีซีพี/ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol)
ลักษณะของระบบอินเทอรเน็ตเปนเสมือนใยแมงมุม ที่ครอบคลุมทั่วโลก ในแตละจุดที่เชื่อมตอ
อินเทอรเน็ตนั้น สามารถสื่อสารกันไดหลายเสนทางตามความตองการ โดยไมกําหนดตายตัว และไม
จําเปนตองไปตามเสนทางโดยตรง อาจจะผานจุดอื่น ๆ หรือเลือกไปเสนทางอื่นไดหลาย ๆ เสนทาง การ
ติดตอสื่อสารผานระบบเครือขายอินเทอรเน็ตนั้นอาจเรียกวา การติดตอสื่อสารแบบไรมิติ หรือ
Cyberspace
ความสําคัญของอินเทอรเน็ต
1. การประยุกตใชเทคโนโลยีสารสนเทศที่ทันสมัย
2. การติดตอสื่อสารที่สะดวก และรวดเร็ว
3. สามารถใชเปนแหลงคนควาหาขอมูลไดทั่วโลก ระบบเครือขายอินเทอรเน็ตจะทําหนาที่
เสมือนเปนหองสมุดขนาดใหญ และเปนแหลงรวบรวมขอมูลแหลงใหญที่สุดในโลก
ในการติดตอสื่อสารบนเครื่อขายอินเทอรเน็ตที่คอมพิวเตอรทั่วโลกเชื่อมโยงถึงกันนั้น มีการ
ติดตอสื่อสารอยู 2 แบบคือ แบบสงขอมูลและรับขอมูล และการที่จะสรางเว็บเพจดวย Dreamweaver นั้น
เราควรมีความรูเกี่ยวกับศัพททางอินเทอรเน็ตที่เกี่ยวของ เพื่อความเขาใจที่ดี ดังนี้
เครื่องใหบริการ (Server) คือ เครื่องคอมพิวเตอรที่ทําหนาที่สงขอมูล
เครื่องรับบริการ (Client) คือ เครื่องคอมพิวเตอรที่ทําหนาที่รับขอมูล
เครือขายใยแมงมุม WWW (World Wide Web) หรือเรียกสั้น ๆ วาเว็บ คือ
การใหบริการในรูปแบบที่เรียกบราวเซอร เชน Internet Explorer จากเครื่อง
หนา 6/96 เนรมิตเว็บสวยดวย Dreamweaver

7. ของเรา และระบุที่อยู URL ก็สามารถที่จะเปดเว็บไซตได เชน ถาเราระบุ URLที่
ตองการเปด คือ www.TrainingDD.com ก็เ ปนการเปดดูเ ว็บไซต ของ
TrainingDD ดังภาพ
เว็บเพจ (Web Page) คือ เอกสารที่เราเปดดูจาก www ซึ่งสวนใหญจะถูกสราง
ขึ้นจากภาษาคอมพิวเตอรที่ เรียกวา HTML ประกอบดวยตัวหนังสือ รูปภาพ
และมีการเชื่อมตอกับเว็บเพจอื่นๆ
เว็บไซต (Web Site) คือ การรวบรวมเว็บเพจไวหลาย ๆ หนา และ กําหนด
เว็บเพจหนาหนึ่งใหเปนหนาแรก เรียกวา โฮมเพจ (Home Page) ซึ่งเปนประตู
ทางเขาสูเว็บเพจหนาอื่น ๆ ทั้งหมดในเว็บไซตนั้น ๆ
เว็บบราวเซอร (Web Browser) คือ โปรแกรมที่ใชเขาสู World Wide Web
เปนโปรแกรมที่อยูในเครื่องคอมพิวเตอรลูกขาย (Client) ทําหนาที่ในการ
นําเสนอขอมูลเว็บ บราวเซอรที่ไดรับความนิยมในปจจุบัน เชน Internet
Explorer ของไมโครซอฟท และ Firefox ซึ่งเปนบราวเซอรโอเพนซอสต
เว็บเซิรฟเวอร (Server) คือ ที่เก็บเว็บเพจ โดยใชโปรแกรม WFTP ในการนํา
เว็บเพจขึ้นไปไวบนเซิรฟเวอร เรียกวาอัพโหลด (Upload) และนําเว็บเพจลงมา
แกไขในเครื่องของเรา เรียกวา ดาวนโหลด (Download)
โดเมนเนม (Domain name) คือ การติดตอกันบนอินเทอรเน็ต จะใชไอพี
แอดเดรส (IP address)ในการทํางาน แตเปนตัวเลขหลายตัว ทําใหจดจําไดยาก
จึงมีการใชโดเมนเนม ซึ่งเปนตัวอักษรที่จดกัน และจะมีชื่อไมซ้ํากันโดยตั้งชื่อให
สอดคลองกับหนวยงาน องคกร บริษัท หางราน เพื่อความสะดวกในการจดจํา
ชื่อ เชน การไฟฟาฝายผลิตแหงประเทศไทย มีโดเมนเนม คือ egat.co.th
เนรมิตเว็บสวยดวย Dreamweaver หนา 7/96

8. ทําความรูจัก HTML
HTML ยอมาจาก Hyper Text Markup Language ภาษา HTML เปนภาษาที่ใชในวงการ
อินเทอรเน็ต เว็บไซตตาง ๆ เขียนขึ้นโดยใชภาษา HTML เปนหลัก ทําใหเราสามารถนําเสนอ ขอความ
ภาพ เสียง หรือแมแตวิดีโอ ผานทางอินเทอรเน็ตได
คําวา Hyper มีความหมายตรงขามกับคําวา เรียงลําดับ คือ ไมจําเปนตองเรียงลําดับ สามารถ
กระโดดขามขั้นตอนได เชน ในหนาเว็บ เราสามารถที่จะคลิกไปยังที่ตาง ๆ ตามลิงค ไดตามตองการ ไม
จําเปนตองอานเรียงไปทีละหนา นี่จึงเปนลักษณะสําคัญของ HTML ที่สามารถลิงคไปยังที่ตาง ๆ ได
คําวา Text หมายถึงขอความ HTML เปนไฟลตัวอักษร หรือ text file สามารถสรางโดยใช
โปรแกรมไดหลายโปรแกรม เชน Notepad, EditPlus หรือแมแต MS Word ก็ได
คําวา Markup เปนการแบงขอความออกเปนสวน ๆ โดยมีคําสั่ง หรือ tag บอกใหทราบวาจะให
แสดงภาพ หรือ ขอความนั้น ๆ อยางไร เชน ใหตัวอักษรเปนสีตาง ๆ มีลักษณะตัวหนา หรือ ตัวเอียง
เปนตน
สวนคําวา Language หมายถึง ภาษา เราจัด HTML เปนภาษา ทางคอมพิวเตอรภาษาหนึ่ง แต
ใชในการนําเสนอเนื้อหาสาระบนเว็บเทานั้น อยางไรก็ตาม มีบางคนยัง ไมยอมรับวา HTML เปนภาษา
ทางคอมพิวเตอรเพราะขาดคุณสมบัติทางดานตัวแปรเพราะ HTML ไมมีการเก็บคา ตัวแปรแตอยางใด
โครงสรางของภาษา HTML
โครงสรางหลักของภาษา จะมี Tag ที่ประกอบจากวงเล็บ <TAG name> เปนตัวเปดการควบคุม
อักษรและปดการควบคุมอักษรดวย </TAG name> โดยมีเครื่องหมาย / อยูใน Tag หมายถึง การปด
การควบคุม ภายใน Tag ตาง ๆ จะมี Tag ที่อยูเดี่ยว (Single) กับ Tag ที่ตองประกอบกันเปนชุด
(Composite) และใน Tag แตละตัวอาจจะมี Attribute เพื่อขยาย ความหมายหรือเพิ่มการควบคุม Tag
ไดอีกดวย นอกจากนั้น HTML สามารถทํา Comment ไดดวยการใช <! และจบดวย !> เพื่อไมตองแปล
สัญลักษณที่อยูระหวางเครื่องหมายทั้งสองนี้
Tag ในภาษา HTML ที่สําคัญมีดังตอไปนี้
<HTML> และ </HTML> เปน Tag ที่ใชเพื่อกําหนดวาเอกสารตอไปนี้ เปนเอกสาร HTML เปน
Markup Language
<HEAD> และ </HEAD> เปน Tag ที่ใชกําหนดสวนหัวของเอกสาร HEAD ไมไดเปนสวนของ
เอกสารภายใน แตจะให ขอมูลเกี่ยวกับเอกสารฉบับนี้ โดยจะมี <METHA> Tag เปนตัวกําหนด
คุณสมบัติตาง ๆ การกําหนด Key Word ใหรูวาเว็บของเราคืออะไร เปนคําสั่งควบคุมการทํางาน
ของเว็บใหทํางานแบบอัตโนมัติได ซึ่งจะเปนประโยชนสําหรับการคนหาเว็บไซตตาง ๆ ที่มีอยูใน
โลกนี้ ดวยวิธี Search Engine
<TITLE> และ </TITLE> เปนการระบุขอความที่ตองการใหเปนสวนหัวของเอกสาร ที่จะปรากฏ
อยูที่ Task Bar ใน Browser โดย Title จะเปนสวนหนึ่งของ Head เชน <title> การไฟฟาฝาย
ผลิตแหงประเทศไทย</title> จะปรากฏใหเห็นรายละเอียดอยูดานบน Task Bar ดานบน
<BODY> และ </BODY> เปน Tag ที่บอกถึงลักษณะตาง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะ
มี Attribute ตาง ๆ ไดแก BGCOLOR = "#XXXXXX", TEXT = "# XXXXXX " เปนตน
หนา 8/96 เนรมิตเว็บสวยดวย Dreamweaver

9. ตัวอยาง HTML Code
ตัวอยางผลลัพธที่ได
คุณสมบัติของเครื่องทีเหมาะกับ Dreamweaver 8
่
สําหรับเครื่อง PC
CPU ความเร็วไมต่ํากวา 800 MHz ระดับไมต่ํากวา Pentium III
หนวยประเมินผลกลาง(CPU)
processor หรือเทียบเทา
ระบบปฏิบัติการ windows 2000 หรือ Windows XP
หนวยความจํา(RAM) 256 MB หากใชงานบน Windows XP ควรใช 512 MB หรือ 1 GB ขึ้นไป
พื้นที่วางบนฮารดดิสก อยางนอย 650 MB
การติดตั้ง Dreamweaver 8
การติดตั้ง Dreamweaver 8 เริ่มตนดวยการนําแผนโปรแกรมใสในชองอาน CD และเริ่มติดตั้ง
ตามขั้นตอนดังตอไปนี้
1. ดับเบิ้ลคลิกที่ไอคอน Install Dreamweaver 8 ดังภาพ
2. จะปรากฏหนาตางเตรียมการติดตั้งโปรแกรม ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 9/96

10. 3. คลิกเมาสที่ปุม Next เพื่อเริ่มขั้นตอนการติดตั้ง ดังภาพ
4. จากนั้นคลิกเมาสเลือก I accept the terms in the license agreement เพื่อรับขอตกลง
ในการใชงาน Dreamweaver และคลิก Next เพื่อติดตั้งโปรแกรมตอไป ดังภาพ
5. โปรแกรมจะแสดงไดเร็กทอรี่ที่จะเก็บโปรแกรม Dreamweaver 8 ถาไมตองการ ก็
สามารถคลิกปุม Change เพื่อเปลี่ยนไดเร็กทอรี่ได นอกจากนี้โปรแกรมยังเปดโอกาสให
เลือกสราง Shortcut ไวที่แถบ Quick launch และไวที่บนหนาจอ (Desktop) หากไม
ตองการไมตองคลิกเลือก แลวคลิกปุม Next ดังภาพ
หนา 10/96 เนรมิตเว็บสวยดวย Dreamweaver

11. 6. กําหนดวาจะให Dreamweaver แกไขไฟลชนิดใดบาง ใหเลือก Select All แลว คลิก
Next เพื่อเขาสูขั้นตอนตอไป
7. คลิกเมาสที่ปุม Install เพื่อติดตั้งโปรแกรม
8. โปรแกรมจะเริ่มทําการติดตั้ง ดังภาพ
9. ขั้นตอนสุดทาย เมื่อติดตั้งเสร็จ ใหคลิก Finish ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 11/96

12. 10. เปนการเสร็จสิ้นขั้นตอนการติดตั้งโปรแกรม
การเปดใชงาน Dreamweaver 8
เมื่อติดตั้ง Dreamweaver 8 เสร็จเรียบรอยแลว เราก็สามารถเปดใชโปรแกรม Dreamweaver 8
โดยปฏิบัติตามขั้นตอนดังตอไปนี้
1. คลิกเมาสที่ปุม
2. เลือกคําสั่ง All Programs>Macromedia>Macromedia Dreamweaver 8 ดังภาพ
3. คลิกเลือก Macromedia Dreamweaver 8 โปรแกรมจะเปดหนาจอ ดังภาพ
4. หนาจอนี้มีสวนสําคัญ 3 สวน คือ
a. สวนที่ 1 Open a Recent Item เปนการเลือกเว็บเพจที่เราสรางไวแลว นํากลับ
ขึ้นมาทํางานใหม
หนา 12/96 เนรมิตเว็บสวยดวย Dreamweaver

13. b. สวนที่ 2 Create New เปนการสรางหนาเว็บใหม โดยเราจะตองเลือกรูปแบบ
การทํางาน เชน HTML, Cold Fusion, PHP, ASP, JavaScript ตามที่ตองการ
c. สวนที่ 3 Create from Samples เปนการสรางหนาเว็บใหม โดยใชหนาเว็บ
สําเร็จรูปมาใชเปนแบบเริ่มตน
d. ในที่นี้ เราจะสรางเว็บเพจใหม ใหคลิกเลือกใช HTML ในสวนที่ 2 Create New
ดังภาพ
5. หนาเอกสารวาง ๆ จะถูกเปดขึ้นสําหรับการสรางเว็บเพจ เราสามารถใสขอความและ
รูปภาพ ในหนานี้ได ดังตัวอยางที่เห็นในภาพ
สวนประกอบของ Dreamweaver 8
กอนที่เราจะใชงาน Dreamweaver 8 เราควรรูสวนประกอบตาง ๆ ของ Dreamweaver 8 ใน
เบื้องตนเพื่อเปนพื้นฐานในการใชงานไดสะดวก
1. เมื่อคลิกเมาสเขาสูโปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหนาจอ ดัง
ภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 13/96

14. 2. สวนประกอบที่สําคัญของหนาจอนี้ มีดังนี้
สวนที่ 1 แถบเมนู (Menu bar) เปนแถบที่เก็บคําสั่งทังหมดของโปรแกรม
้
สวนที่ 2 แถบกลุมเครื่องมือ (Insert bar) เปนแถบที่รวมเครื่องมือตาง ๆ ใน
การสรางเว็บ
สวนที่ 3 แถบเครื่องมือ (Toolbar) รวมปุมเครื่องมือตาง ๆ ที่ใชงานบอย
สวนที่ 4 แถบสถานะ (Status bar) แสดงขอมูลเพิ่มเติมเกี่ยวกับงานที่กําลังทํา
อยู
สวนที่ 5 Property Inspector เปนสวนกําหนดคุณสมบัติขององคประกอบตาง
ๆ บนหนาเว็บและ สามารถปรับแตงคาขององคประกอบตาง ๆ ได
3. แถบแสดงสถานะที่ควรรูจัก ดังภาพ
สวนที่ 1 สวนไวเลือกแท็ก HTML: จะแสดงโคด HTML ของเว็บเพจ
สวนที่ 2 เปนเครื่องมือปรับการแสดงผลเว็บเพจขณะทํางาน: Zoom Tool
สําหรับซูมเขาออกเพื่อขยายหนาจอการแสดงผล หรือใช Hand Tool เลื่อนดู
หนาเว็บในสวนที่มองไมเห็น

สวนที่ 3 แสดงขนาดหนาตางของเว็บเพจ Window Size: ที่เรากําหนด สามารถ
เลือกกําหนดเปนขนาดและเปอรเซ็นต
สวนที่ 4 แสดงขนาดเอกสารและเวลาในการโหลด: แสดงเวลาโดยประมาณ ที่ใชใน
การโหลดหนาเว็บเพจที่เราสราง
กลุมเครื่องมือ
การเขาถึงกลุมเครื่องมือ ใหคลิกเมาสที่ปุมตัวเลือก ดังภาพ
และคลิกเลือกกลุมเครื่องมือที่ตองการได ดังภาพ
หนา 14/96 เนรมิตเว็บสวยดวย Dreamweaver

15. กลุมเครื่องมือที่ใชสําหรับสรางงานเว็บเพจ มีอยู 8 กลุมที่ควรรูจัก ดังนี้
1. กลุมเครื่องมือ Common: เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่เราใชงานบอย เชน
การแทรกภาพ แทรกตาราง เปนตน
2. กลุมเครื่องมือ Layout :เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่ใชจัดองคประกอบบน
หนาเว็บ เชน การจัดวางขอความใหอยูในตําแหนงตาง ๆ เปนตน
3. กลุมเครื่องมือ Forms :เปนสวนที่รวบรวมเครื่องมื่อในการสรางแบบฟอรม ปุม
ตัวเลือก ลักษณะตาง ๆ เชน check box, radio button เปนตน
4. กลุมเครื่องมือ Text :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการจัดวางตําแหนง และ
ปรับแตงตัวอักษรบนหนาเว็บ
5. กลุมเครื่องมือ HTML :เปนสวนที่รวบรวมเครื่องมื่อสําหรับจัดการภาษา HTML บน
หนาเว็บ
6. กลุมเครื่องมือ Application :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการสราง Application
ติดตอกับฐานขอมูล
7. กลุมเครื่องมือ Flash elements: เปนเครื่องมือสําหรับนําองคประกอบที่สรางจาก
โปรแกรม Flash มาวางบนหนาเว็บ
8. กลุมเครื่องมือ Favorites: เราสามารถเลือกเครื่องมือที่ใชบอยจากแตละกลุมเครื่องมือ
มาใสในเมนูนี้ไดตามความตองการ
เนรมิตเว็บสวยดวย Dreamweaver หนา 15/96

16. การเปลี่ยนรปแบบการเรียกใชงานกลุมเครื่องมือ
ู 
ในกลุมเครื่องมือ คําสั่งสุดทาย คือ Show as Tabs ดังภาพ
Show as Tabs คือคําสั่งที่ใหแสดงกลุมเครื่องมือแยกเปนแท็บ ๆ เราสามารถคลิกเลือกแท็บ
ของเครื่องมือที่ตองการใชงานไดตามความตองการ ดังภาพ
การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ (Property Inspector)
การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ สามารถกระทําไดเมื่อเราคลิกเลือก
ภาพ ตาราง ตัวหนังสือหรือองคประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององคประกอบนั้น ๆ
ใหเราสามารถปรับแตงไดตามตองการ
กลุมหนาตางพาเนล(Panel Group)
โปรแกรม Dreamweaver 8 มีหนาตางพาเนลตาง ๆ ที่เพิ่ม
ความสามารถในการจัดการและออกแบบหนาเว็บเพจ ซึ่งแตละพาเนลจะ
มีความสามารถในการจัดการหนาเว็บเพจไดไมเหมือนกัน เราเรียกเปด
พาเนลไดจากเมนู Window > และเลือกพาเนลที่ตองการ ดังภาพ
มุมมองการทํางานใน Dreamweaver
ในการสรางงานเว็บเพจ เราสามารถเลือกมุมมองในการทํางาน
ได 3 รูปแบบ โดยคลิกที่รูปไอคอน ที่อยู
ใน Toolbar แถบเครื่องมือมาตรฐาน ดังนี้
1. Show Code View คลิกที่ จะปรากฏมุมมอง
แสดงโคด HTML ของหนาเว็บเพจที่เรากําลังทํางานอยู
ถาเรามีความรูเรื่องภาษา HTML ก็สามารถแกไขโคดไดตามตองการ ดังภาพ
หนา 16/96 เนรมิตเว็บสวยดวย Dreamweaver

17. 2. Show Code and Design View คลิกที่ จะปรากฏมุมมองที่แสดงทั้งโคดและ
หนาเว็บเพจที่เรากําลังทํางานอยู สําหรับผูที่ตองการดูโคดไปพรอมกับการออกแบบ
หนาจอ ดังภาพ
3. Show Design View คลิกที่ จะแสดงหนาจอที่เราออกแบบเว็บเพจซึ่ง
ประกอบดวยภาพ ขอความ ตาราง หรื่ออื่น ๆ โดยไมมีการแสดงโคดตาง ๆ มา
เกี่ยวของ ดังภาพ
การออกจากโปรแกรม Dreamweaver
การออกจากโปรแกรม Dreamweaver ทําไดหลายวิธีดวยกัน ดังนี้
1. เลือกคําสั่ง File แลวเลือกคําสั่ง File>Exit เปนการสุดสิ้นการใชงานโปรแกรม
2. คลิกเมาสที่ บริเวณมุมบนขวาของหนาจอ
3. คลิกเมาสที่ บริเวณมุมบนซายของหนาจอและเลือกคลิกที่ Close
4. กดที่คียบอรด <Ctrl+Q>
หลักการสรางเว็บไซต
เริ่มตนสรางเว็บไซต
ในการสรางเว็บไซตดวย Dreamweaver 8 กอนอื่นตองมีการกําหนด Site เพื่อใชจัดเก็บหนาเว็บ
เพจแตละหนาใหอยูในชื่อเว็บไซตเดียวกัน และจัดการกับไซตที่เราสรางขึ้น ไดตามตองการ
เนรมิตเว็บสวยดวย Dreamweaver หนา 17/96

18. การกําหนดโครงรางของเว็บ
ในการสรางเว็บไซต กอนอื่นควรออกแบบโครงรางคราวๆ ของเว็บไซตนั้นกอน เพื่อไมใหเกิด
ความยุงยากที่จะตามมาในภายหลัง เว็บไซตที่ประกอบดวยเว็บเพจหลาย ๆหนา ควรจัดเก็บเว็บเพจไว
ในโฟลเดอรตาง ๆ ดังตัวอยาง ถาเราทําเว็บไซตเกี่ยวกับองคกรของเรา ก็อาจสรางตั้งโฟลเดอรชื่อ
Organization เปนโฟลเดอร ที่เก็บรวมเว็บเพจและไฟลตาง ๆ ที่ใชไวทั้งหมด โดยโฟลเดอรนี้อาจ
ประกอบไปดวยโฟลเดอรยอย ๆ สําหรับเก็บไฟลตาง ๆ ที่ประกอบกันเปนเว็บไซต ดูตัวอยาง ดังภาพ
ตัวอยางการจัดโฟลเดอรสําหรับเก็บไฟลตาง ๆ
จากภาพ จะเห็นวาหนาโฮมเพจหลัก (index.html) จะตองอยูในโฟลเดอร
หลักและไมควรอยูในโฟลเดอรยอยใด ๆ ทั้งสิ้น
การสรางเว็บไซตใหมใน Dreamweaver
การสรางเว็บไซตใหมใน Dreamweaver ตองกําหนดที่อยูของไฟลตาง ๆ
บนเว็บไซตเสียกอน โดยการสราง Site ไฟลทุกไฟลและภาพที่นํามาใช ตองอยูใน Site งานที่กําหนด
วิธีการสรางเว็บไซตแบบใชวิซารด สามารถดําเนินการไดตามขั้นตอนดังนี้
1. เลือกคําสั่ง Site> New Site... เพื่อเขาสูการสรางเว็บไซต ดังภาพ
1. จะปรากฏหนาจอ Site Definition for Unnamed Site1 เพื่อใหตั้งคา ดังตอไปนี้
• หมายเลข 1 คลิกเมาสเลือกที่แท็บ Basic ที่อยูมุมบนซาย
• หมายเลข 2 คลิกเมาสเลือก Local Info
• หมายเลข 3 ที่ Site name : ใหตั้งชื่อไซตงานตามตองการ ควรใหมีความหมาย
เกี่ยวของกับงานหรือกิจกรรมของเว็บไซตนั้น ๆ ในที่นี้ จะตั้งชื่อวา myorganization
• หมายเลข 4 ที่ Local root folder : เปนการกําหนดที่อยูของเว็บไซตบนเครื่องที่เรากําลัง
ทํางานอยู (ควรสรางโฟลเดอรเก็บงานไวกอนแลว ในที่นี้สรางโฟลเดอรเก็บงาน ชื่อ
organization ไวใน ไดรฟ C) และสามารถคลิกเลือกโฟลเดอรไดเลย
• หมายเลข 5 กําหนดโฟลเดอรที่จะเก็บภาพ โดยอาจคลิกเลือกโฟลเดอรยอยที่สรางไว
แลว ในโฟลเดอรเก็บงาน ในที่นี้ใชชื่อ images
หนา 18/96 เนรมิตเว็บสวยดวย Dreamweaver

19. • หมายเลข 6 ที่ HTTP address : เปนการกําหนดที่อยู บน Server ถายังไมมีที่อยูบน
Server ไมตองใส หรือถามีแตไมตองการให Dreamweaver สงขึ้นไปก็ไมตองใส
• หมายเลข 7 ที่ Case - sensitive links :ใหคลิกเลือกเครื่องหมายถูก เพื่อตรวจสอบ
ตัวอักษร เล็ก-ใหญ ซึ่งจะเห็นขอแตกตาง ถา Server เปนระบบ Unix เพราะ Unix ถือ
วาตัวอักษร เล็ก-ใหญ ไมเหมือนกันเปนคนละตัวกัน
2. ใสชื่อ Site name เลือกโฟลเดอร และตั้งคาตาง ๆ ดังภาพ แลวคลิก Ok ที่ปุมดานลาง
3. โปรแกรมจะแสดงชื่อเว็บไซต โฟลเดอรที่
เก็บเว็บไซตที่เรากําลังจะสรางขึ้นใหม และ
โฟลเดอรเก็บภาพ ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 19/96

20. การจัดการโครงสรางโฟลเดอร
ในการสรางเว็บไซตดวย Dreamweaver 8 เมื่อสรางเว็บไซต หรือ Site งานขึ้นมาแลว โปรแกรม
จะสรางโฟลเดอรใหมสําหรับเก็บขอมูลการทํางานในเว็บไซตนั้น ทั้งหมด หรืออีกวิธีหนึ่ง เราสามารถ
สรางโฟลเดอร เก็บงานไวที่ไดร C และสรางโฟลเดอรยอย ๆ ในการเก็บงานแตละประเภท และเมื่อใช
โปรแกรม Dreamweaver ใหเราเลือกโฟลเดอรที่สรางเตรียมไวสําหรับเก็บเว็บเพจไดตามตองการ
การสรางเว็บเพจใหม
ในการสรางเว็บเพจใหมที่จะเก็บไวในเว็บไซตของเรา เราสามารถสรางได 2 วิธี ดวยกัน คือ
การสรางเว็บเพจใหมในหนาตาง New Document และการสรางเว็บเพจใหมในพาเนล Files
• การสรางเว็บเพจใหมในหนาตาง New Document
กอนสรางเว็บ ทานตองสรางโครงสราง และกําหนด Site ตามขั้นตอนในเรื่องที่ 1 ใหเรียบรอย
เสียกอน จากนั้นจึงสรางหนาเว็บแตละหนา ซึ่งทานสามารถดําเนินการไดตามขั้นตอน ตอไปนี้
1. ไปที่เมนู File แลวคลิกเลือก New ดังภาพ
2. หนาตาง New Document จะปรากฏขึ้น ใหคลิกเลือกแท็บ General เพื่อเลือกหัวขอการสราง
เว็บเพจใหม และในชอง Category คลิกหัวขอ Basic page แลวเลือก HTML ดังภาพ
3. จะเกิดหนาเว็บเพจใหมขึ้น และพรอมที่จะสรางงาน
หนา 20/96 เนรมิตเว็บสวยดวย Dreamweaver

21. 4. เมื่อออกแบบเว็บเพจเสร็จแลว จะทําการบันทึก ใหไปที่ File>save จะเกิดหนาจอขึ้น ดังภาพ
5. ใหตั้งชื่อเว็บเพจ ในที่นี้ เราจะตั้งชื่อเว็บเพจนี้วา index.html แลวคลิก save ชื่อเว็บเพจนี้จะ
ปรากฏอยูในเว็บไซตหรือ Site งานที่เราสรางขึ้น ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 21/96

22. • การสรางเว็บเพจใหมในพาเนล File
เปนการสรางไฟลงานใหมที่เก็บไวใน Site งานที่งาย สะดวก รวดเร็ว มีขั้นตอน ดังตอไปนี้
1. คลิกเมาสปุมขวาที่โฟลเดอร Site งาน
แลวคลิกเลือก New File
2. จะปรากฏเว็บเพจใหม ชื่อ Untitled (แปลวา
ไมมีชื่อ) ที่มีนามสกุล .html พรอมสําหรับการ
เปลี่ยนชื่อ ใหตั้งชื่อไฟลงานตามตองการ
3. ดังตัวอยาง สมมุติเว็บเพจนี้เปนหนาหลัก ใช
ชื่อวา index.html ก็พิมพชื่อแลวกด Enter
การสรางโฟลเดอรใหมในเว็บไซต
ในกรณีที่เราตองการสรางโฟลเดอรใหมเพื่อเก็บภาพ หรือแยกจัดเก็บเรื่องตาง ๆ ไมใหปะปนกัน
เราจําเปนตองสรางโฟลเดอรใหม การสรางโฟลเดอรใหม สามารถทําไดดังนี้
1. คลิกเมาสปุมขวาที่โฟลเดอรที่เก็บ Site งาน แลว
เลือก New Folder
2. ใหตั้งชื่อโฟลเดอรใหม สมมุติโฟลเดอรนี้ไวเก็บ
ข อ มู ล บุ ค คลที่ ใ ช ใ นเว็ บ ไซต นี้ ให ชื่ อ โฟลเดอร ว า
personal พิมพชื่อแลวกด Enter จะไดดังภาพ
หนา 22/96 เนรมิตเว็บสวยดวย Dreamweaver

23. การเปลี่ยนชือไฟลและโฟลเดอร
่
การเปลี่ ย นชื่ อ ไฟล แ ละโฟลเดอร สามารถ
กระทําไดงาย โดยคลิกเมาสขวาที่ไฟล หรือโฟลเดอรที่
ตองการจะเปลี่ยนชื่อ แลวเลือก Edit >Rename จะเกิด
ลักษณะพรอมที่จะเปลี่ยน แลวพิมพชื่อใหมที่ตองการ
การลบไฟลและโฟลเดอร
การลบไฟลและโฟลเดอร ทําไดโดยคลิกเมาสขวา ที่
ไฟล หรือโฟลเดอรที่ตองการลบ แลวเลือก Edit >Delete
ไฟลหรือโฟลเดอรจะถูกลบไป ดังภาพ
การเปดเว็บเพจใหม
ในการเปดเว็บเพจใหม ใหดับเบิ้ลคลิกไฟลที่สรางไว เพื่อที่จะเขาไปทํางาน เว็บเพจจะถูกเปดหนา
วางขึ้นมาใหเราออกแบบการทํางาน
เนรมิตเว็บสวยดวย Dreamweaver หนา 23/96

24. กอนที่จะเริ่มตนการออกแบบทํางาน เราควรที่จะกําหนดรายละเอียดของหนาเว็บเสียกอน โดย
คลิกเมาสขวาที่หนาเว็บ แลวเลือก Page Properties เพื่อตั้งคาตาง ๆ
Page Properties จะแบงออกเปน 5 หมวด โดยในหมวดแรก คือ
1. หมวด Appearance เปนการกําหนดสวนประกอบตาง ๆ บนหนาเว็บ ดังภาพ
สวนประกอบตาง ๆ ในหนานี้ มีการกําหนดคา ดังนี้
หมายเลข 1 Page font ใหเลือกรูปแบบตัวอักษรที่จะใชในเว็บเพจ
หมายเลข 2 Size กําหนดขนาดของตัวอักษร
หมายเลข 3 Text color กําหนดสีของตัวอักษร
หมายเลข 4 Background color กําหนดสีพื้นหลังของหนาเว็บเพจ
หมายเลข 5 Background image กําหนดภาพที่เปนพื้นหลังของหนาเว็บเพจ
หมายเลข 6 Repeat กําหนดใหเลือกภาพ Background วาใหกระทําซ้ําอยางไร
(no-repeat ไมซ้ํา, repeat เปนแบบปูเต็มพื้นที่, repeat-x ปูไปตามแนวนอน,
repeat-y ปูไปตามแนวตั้ง)
หมายเลข 7 Left margin กําหนดระยะขอบซายของหนาเว็บ
หมายเลข 8 Right margin กําหนดระยะขอบขวาของหนาเว็บ
หมายเลข 9 Top margin กําหนดระยะขอบบนของหนาเว็บ
หมายเลข 10 Bottom margin กําหนดระยะขอบลางของหนาเว็บ
2. หมวด 2 Links เปนการกําหนดคุณสมบัติของ Links มีรายละเอียด ดังนี้
หมายเลข 1 Link font กําหนดตัวอักษรของลิงค
หมายเลข 2 Size กําหนดขนาดตัวอักษรของลิงค
หมายเลข 3 Link color กําหนดสีใหกับลิงค
หนา 24/96 เนรมิตเว็บสวยดวย Dreamweaver

25. หมายเลข 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 เปนการกําหนดชื่อใหสวนไตเติ้ลและกําหนดชุดตัวอักษรที่ใชของ
เว็บเพจ มีรายละเอียด ดังนี้
หมายเลข 1 Title กําหนดสวนไตเติ้ลหรือชื่อหัวเรื่องใหเว็บเพจ
หมายเลข 2 Document type กําหนดประเภทของเว็บเพจ
หมายเลข 3 Encoding กําหนดรูปแบบภาษาของตัวอักษรที่ใชในเว็บเพจ สําหรับ
การแปลงตัวอักษรเพื่อเปนภาษามาตรฐาน โดยใหเลือก Thai (Windows) ถา
ตองการใชภาษาไทย
5. หมวด 5 Tracing Image เปนการกําหนดคุณสมบัติของรูปที่ใชเปนแบบในการสรางหนา
เว็บเพจ มีรายละเอียด ดังนี้
เนรมิตเว็บสวยดวย Dreamweaver หนา 25/96

26. หมายเลข 1 Tracing Image ใหเลือกไฟลภาพที่จะใช
หมายเลข 2 Image Transparency กําหนดคาความโปรงใสของภาพที่จะแสดงบนหนา
เว็บเพจ
การเพิ่มและแกไของคประกอบบนหนาเว็บ
ในการเพิ่มและปรับแตงองคประกอบบนหนาเว็บ สามารถทําไดงาย ๆ ไมวาจะพิ่มตาราง รูปภาพ
หรือแบบฟอรมตาง ๆ ในโปรแกรม Dreamweaver
จะเรียกองคประกอบเหลานี้วา Object (ออบเจ็กต)
โดยเราสามารถสรางออบเจ็กตนี้ได โดยอาศัยกลุม
เครื่องมือตาง ๆ ที่ไดกลาวไว แลวในตอนตน
ดังตัวอยาง ถาเราตองการนําภาพเขา ในโปรแกรม
ใหไปที่เครื่องมือรูป ซึ่งอยูในกลุม Common เมื่อ
เลือ กภาพที่ ตอ งการไดแ ลว ให ค ลิก แทรกภาพเข า
โปรแกรม ภาพก็จะปรากฏในหนาเว็บ ณ ตําแหนงที่
เคอรเซอรอยู
เมื่อนําภาพเขาโปรแกรมไดแลว
ถ า เราจะจั ดการปรั บ แต ง ภาพ หรื อ
ออบเจ็กต ใหคลิกที่ภาพนั้น ๆ จะเกิอ
จุดดํา 3 จุดรอบภาพ และเกิด Property
Inspector ของภาพดานลาง เพื่อให
กําหนดรายละเอียดตามตองการ
สําหรับการพิมพตัวหนังสือ สามารถพิมพลงบนหนาเว็บไดเลย และปรับแตงตัวหนังสือ กําหนด
ขนาด กําหนดสีและอื่น ๆ ไดที่ Properties
ดานลาง
หนา 26/96 เนรมิตเว็บสวยดวย Dreamweaver

27. การใสหัวเรืองบนหนาเว็บ
่
การใสหัวเรื่องบนหนาเว็บ เมื่อเราเปดเว็บไซตขึ้นมา ในชอง Title บน Toolbar เราสามารถพิมพ
ชื่อหัวเรื่องที่ตองการลงไปไดเลย
ตอจากนั้นเลือกคําสั่ง File>Save เพื่อบันทึก แลวกดปุม F12 ดู ชื่อหัวเรื่องของหนาเว็บบน
หนาตางบราวเซอร ซึ่งจะปรากฏชื่อตามที่เราตั้งไว ดังภาพ
การใชงานภาษาไทยใน Dreamweaver 8
การใชงานภาษาไทยใน Dreamweaver 8 ซึ่งในเวอรชั่นนี้ เราสามารถพิมพภาษาไทย ในหนาตาง
Design View ได เ ลยและข อ ความภาษาไทยก็ จ ะปรากฏในหน า ต า งบราวเซอร ทั น ที
สําหรับผูที่ตองการเขาไปแกไขโคด HTML ในหนาตาง Code View จะเห็นไดวาขอความที่เรา
พิมพที่ Design View จะแสดงเปนเลขรหัส ในหนาตาง Code View ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 27/96

28. ถาเราตองการจะอานโคดออก เปนภาษาไทยเหมือนที่เราพิมพที่ Design View ตองกําหนดให
ภาษาที่ใชในเว็บเปน Thai (Windows) โดยเลือกเมนูคาสั่ง Modify>Page Properties หรือคลิกขวาที่
ํ
หนาเว็บ แลวเลือก Page Properties ดังภาพ
ตอไป ใหเลือกหัวขอ Title/Encoding ที่ชอง Encoding เลือก Thai (Windows) ดังภาพ
เมื่อเลือก Thai (Windows) แลว โคดที่เปนรหัสจะแสดงเปนภาษาไทยเหมือนที่เราพิมพ ที่
หนาตาง Design View ดังภาพ
หนา 28/96 เนรมิตเว็บสวยดวย Dreamweaver

29. การเพิ่ม-ลบฟอนต
ก า ร เ พิ่ ม -ล บ ฟ อ น ต เ พื่ อ ใ ช ง า น ใ น
Dreamweaver ทําไดโดย เลือกคําสั่งที่เมนูบาร
Text>Font>Edit Font List ดังภาพ
ขั้นตอนการเพิ่มฟอนต มีรายละเอียดดังนี้ ดู
ภาพประกอบ
1. หมายเลข 1 Font list เปนฟอนตที่มีอยูแลว
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. การปรับแตงขอความบนเว็บเพจ
การใสขอความบนหนาเว็บ
การใสขอความบนหนาเว็บเพจ กระทําไดงาย ๆ โดยการพิมพบนหนาเว็บเพจไดเลย หรือจะ copy
ขอความมาจากไฟล word หรือจากโปรแกรมอื่น ๆ แลวนํามาวางบนหนาเว็บเพจก็ได ดังภาพ
จากตัวอยาง ถาเราตองการขึ้นยอหนาใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอร
เซอรหนาขอความที่ตองการจะขึ้นยอหนาใหมแลวกด Enter ที่แปนพิมพ ขอความนั้น จะขึ้นยอหนาใหม
ให และเกิดการแทรกบรรทัดวางขึ้น ดังภาพ
ถาเราไมตองการขึ้นยอหนาใหม แตตองการขึ้นบรรทัดใหม ใหกด <Shift + Enter> หรือคลิก
เมาสที่ปุม ในกลุมเครื่องมือ Text จะเปนการแทรก Line Break ในขอความตรงตําแหนงที่เรา
ตองการ ดังตัวอยาง ถาเราตองการขึ้นบรรทัดใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอรเซ
อรหนาขอความที่ตองการจะขึ้นบรรทัดใหมแลวกด <Shift + Enter> ที่แปนพิมพ ก็จะได ดังภาพ
ตอไป ถาเราตองการจะยอหนา ใหคลิกเมาสที่ สามเหลี่ยมเล็ก ๆ ขางปุม BR ดังภาพ
หนา 30/96 เนรมิตเว็บสวยดวย Dreamweaver

31. ซึ่งอยูในกลุมเครื่องมือ Text และเลือก Non-Breaking Space
ตอไป เราตองการยอหนา บรรทัดแรก ใหเราตั้งเคอรเซอร ที่หนาคําวา "ศูนย... และบรรทัดที่ 5
คําวา "ตอมา...ใหคลิกที่รูป ดังภาพ
โดยคลิกติด ๆ กัน จนกวาจะยอหนาเขา
ไปไดตามตองการ ดังภาพ
การตกแตงและจัดรูปแบบขอความ
กอนที่จะตกแตงและจัดรูปแบบขอความ เราตองเลือกขอความทั้งหมดกอน โดยเลือกคําสั่ง Edit

>Select All หรือคลิกเลือกที่แท็ก <body> จะไดผลลัพธ ดังภาพ
เมื่อเลือกขอความแลว เราปรับแตงและจัดรูปแบบขอความ โดย Property Inspector หรือใชกลุม
เครื่องมือ Text ที่แถบ Insert Bar ในที่นี้ ใหไปที่ Window และเลือก Properties โปรแกรมจะเปด
เครื่องมือ Properties เราก็สามารถตั้งคาฟอนต ขนาด สี ตําแหนงของขัอความ ดังภาพ
เมื่อเปดหนาจอเครื่องมือ ที่จะใชปรับแตงตัวหนังสือ หรือขอความ ขึ้น เราสามารถกําหนดขนาด
ประเภทตัวหนังสือหรือฟอนต สีของตัวอักษร ตําแหนง และอื่น ๆ สมมุติวา ตองการใหขอความเปน ตัวสี
เนรมิตเว็บสวยดวย Dreamweaver หนา 31/96

32. น้ําเงิน เอียง ขอความตําแหนงชิดซายของเว็บเพจ และหัวขอเปนตัวหนา สามารถกระทําไดโดยใช
เครื่องมือดังที่กลาวมาแลว ขางตน จะไดผลลัพธ ดังภาพ
เครื่องมือที่ใชจัดตําแหนงและตกแตงขอความ ที่ควรรู มีดังนี้
การจัดตําแหนงขอความโดยใชปุม
1. จัดชิดซายของเว็บเพจ
2. จัดอยูกึ่งกลาง
3. จัดชิดขวา
4. จัดใหขอความอยูเต็มบรรทัด
การจัดยอหนาโดยใชปุม
5. คลิกที่ปุม Text Indent เพื่อจัดยอหนาของขอความใหเขาไปมากนอยไดตาม
ตองการ
6. ถาจัดยอหนาเขาไปมากเกินไป ก็สามารถคลิกปุม Text Outdent เพื่อยกเลิกยอหนา
ใหไดระยะหางตามตองการ
การใส Bullet และตัวเลขกํากับในแตละบรรทัด
7. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวย Bullet หรือสัญลักษณรูปแบบ ตาง ๆ
8. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวยตัวเลข
การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History
ในการทํางานออกแบบเว็บเพจ เมื่อทําไปเรื่อย ๆ อาจเกิดขอผิดพลาดได เราสามารถยอนกลับไป
แกไขขอผิดพลาดได โดยไปที่เมนูบาร Window>History หรือกดคีย < Shift+F10> ดังภาพ
หนา 32/96 เนรมิตเว็บสวยดวย Dreamweaver

33. เมื่อเปดพาเนล History จะเห็นบันทึกการทํางานทุกขั้นตอน โดยขั้นตอนลาสุด จะเรียงอยูลําดับ
บนสุดของรายการ ขั้นตอนกอนหนานี้จะอยูลาง ๆ ดังภาพ
การยอนกลับการทํางานหลาย ๆ ขั้นดวยพาเนลนี้ เราทําไดโดย คลิกเลื่อนแถบ ไปยังขั้นตอนที่
เราตองการยอนกลับไป โดยจะเลื่อนไปทีละขั้นตอน หรือหลายขั้นตอนได ดังภาพ
การทําซ้ําขั้นตอนการทํางาน เราสามารถสั่งใหทําซ้ําขั้นตอนการทํางานที่เราตองการจะใหทําซ้ํา
ในพาเนล History ได โดย
1. คลิกเลือกขั้นตอนที่ตองการใหซ้ํา
เนรมิตเว็บสวยดวย Dreamweaver หนา 33/96

34. 2. คลิกที่ปุม ที่อยูมุมลางดานซายมือ ดังภาพ
การบันทึกเว็บเพจ
เมื่อเราออกแบบเว็บเพจไดตามตองการแลว การที่จะบันทึกงาน ใหเลือกคําสั่ง File>Save As เพื่อ
บันทึกไฟลในชื่อใหม ดังภาพ
จากนั้นใหทําตามขั้นตอน ดังนี้
1. เลือกโฟลเดอรที่เก็บไฟลงาน
2. ใหตั้งชื่อไฟล โดยใสนามสกุลเปน .html
3. คลิกปุม Save เพื่อสั่งบันทึกไฟล
หนา 34/96 เนรมิตเว็บสวยดวย Dreamweaver

35. นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจทีควรรูอีก 4 วิธี คือ
่
• วิธีที่ 1 เลือกคําสั่ง File>Save เพื่อบันทึกไฟลในชื่อเดิม
• วิธีที่ 2 เลือกคําสั่ง File>Save All บันทึกไฟลทั้งหมดที่มการเปลี่ยนแปลงแกไข
ี
• วิธีที่ 3 เลือกคําสั่ง File>Save to Remote Server ทําการบันทึกเว็บเพจและอัพโหลดไปยัง
เซิรฟเวอร
• วิธีที่ 4 คลิกเลือกรูป นี้ ในกลุมเครื่องมือ Standard Bar บน Insert Bar เพื่อบันทึกไฟลเว็บ
เพจใหมโดยตั้งชื่อใหมตามที่เราตองการ หรือบันทึกไฟลเว็บเพจในชื่อเดิมไดอยางรวดเร็ว โดย
ดําเนินการไดดงนี้
1. คลิกเมาสขวาที่แถบกลุมเครื่องมือ Document และเลือกคําสั่ง Standard ดังภาพ
2. คลิกเมาสบันทึกไฟลเว็บเพจที่เรากําลังทํางานอยู ดังภาพ
แตถาเราออกแบบงานเว็บเพจเสร็จแลว และยังไมไดมีการบันทึก หรือมีการแกไข
เปลี่ยนแปลงและยังไมไดบันทึก โปรแกรม Dreamweaver จะมีเครื่องหมาย * ปรากฏเตือนอยูที่
มุมบนขวาของชื่อไฟล ดังภาพ
เนรมิตเว็บสวยดวย Dreamweaver หนา 35/96

36. การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร
เมื่อเราบันทึกเว็บเพจเสร็จเรียบรอยแลว และ ตองการที่จะดูเว็บเพจที่เราออกแบบวาเวลาแสดงผล
บนหนาตางบราวเซอรจะมีผลตามที่ตองการหรือไม อยางไร เราสามารถดําเนินการได 3 วิธีการ ดังนี้
วิธีที่ 1 กดปุม < F12 > ที่คียบอรด
วิธีที่ 2 ดับเบิ้ลคลิกที่ไฟล html ที่เราบันทึกเก็บไวในเครืองคอมพิวเตอร
่
วิธีที่ 3 เลือกคําสั่ง File>Preview in Browser>IEexplore ดังภาพ
หลังจากนั้นผลลัพธ จะปรากฏบนหนาจอในหนาตางบราวเซอร ดังภาพ
ตกแตงเว็บเพจดวยกราฟก
เตรียมภาพเพื่อใชในเว็บเพจ
ในการออกแบบเว็บเพจ นอกจากจะมีขอความแลว ภาพนับวาเปนสิ่งสําคัญที่จะชวยทําใหเว็บ
เพจนั้น ๆ มีความนาสนใจมากยิ่งขึ้น
หนา 36/96 เนรมิตเว็บสวยดวย Dreamweaver