หน่วยที่ 3 การออกแบบเว็บด้วย Adobe Dreamweaver 2020

หนว่ ยท่ี 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 40

หนว่ ยท่ี 3 การออกแบบเว็บด้วย Adobe Dreamweaver 2020

สาระการเรียนรู้
1. ส่วนประกอบหลักใน Adobe Dreamweaver 2020
2. การจัดการไซต์สำหรบั เกบ็ ข้อมลู
3. การจัดการข้อความด้วยตาราง
4. การตกแตง่ เวบ็ ไซต์ดว้ ย CSS

จุดประสงคเ์ ชิงพฤตกิ รรม
1. รู้และเข้าใจสว่ นประกอบหลกั ใน Adobe Dreamweaver 2020 ได้ (K)
2. เข้าใจและปฏบิ ัติการจดั การไซตส์ ำหรับเก็บขอ้ มูลได้ (K,P)
3. สามารถปฏิบัติการจัดการขอ้ ความดว้ ยตารางได้ (K,P)
4. สามารถปฏิบัติการตกแต่งเว็บไซต์ดว้ ย CSS (K,P)

สมรรถนะการเรยี นรปู้ ระจำหนว่ ย
1. แสดงความรู้เก่ียวกับส่วนประกอบหลกั ใน Adobe Dreamweaver 2020
2. แสดงความรู้และปฏบิ ตั ิการจัดการไซต์สำหรับเก็บข้อมูล
3. ปฏบิ ัติการจัดการขอ้ ความดว้ ยตารางได้
4. ปฏบิ ตั ิการตกแต่งเว็บไซต์ดว้ ย CSS

สาระสำคัญ

Adobe Dreamweaver 2020 คือโปรแกรมเท็กซ์เอดิเตอร์ (Text Editor) ตัวล่าสุดในปัจจุบัน
ซึ่งช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา HTML หรือภาษาสคริปต์ที่ยุ่งยาก เรียกว่า
“WYSIWYG” โดย Dreamweaver 2020 มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง
ฟอรม์ วิดโี อ รวมถึงองค์ประกอบอนื่ ๆ ภายในเว็บเพจได้อย่างสวยงามตามทีผ่ ู้ใชต้ ้องการ มคี วามสามารถ
ที่เอื้อประโยชน์ต่อผู้พัฒนาเว็บได้อย่างเต็มความสามารถ เช่น ระบบบริหารเกี่ยวกับไซต์ (Site) และ
จดั การเกบ็ ไฟล์ อีกท้ังยงั สามาราถรองรับการทำงานหลายระบบปฏิบตั ิการ

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกิจ

หนว่ ยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 41

ส่วนประกอบหลักใน Dreamweaver 2020

Adobe Dreamweaver 2020 คือโปรแกรมประเภท HTML Editor ระดับมืออาชีพ มี
ความสามารถในการใช้ออกแบบ เขยี นโค้ด บริหารจัดการเวบ็ ไซต์ เวบ็ เพจ และเวบ็ แอพพลิเคชัน ช่วยลด
งาน ลดเวลาในการพัฒนาเว็บเพจ ช่วยในการสามารถสร้างโค้ด HTML รวมทั้งสคริปต์ภาษา PHP, ASP
และ JSP เป็นต้น เม่ือตดิ ต้ังโปรแกรมเรยี บร้อยแลว้ สามารถเรียกใชง้ านโปรแกรมโดยเลือกคำสง่ั Strat >
Adobe Dreamweaver 2020 ซ่ึงจะแสดงหน้าต่างดงั ภาพ

หมายเลข 1 เป็นสว่ นเมนลู ัดสำหรบั เปิดงาน หรอื สรา้ งงานใหม่
หมายเลข 2 การสร้างงานใหมโ่ ดยมีรูปแบบให้เลือก เชน่ CSS, HTML เปน็ ตน้
รปู แบบทใี่ ชง้ านสำหรับหนา้ เว็บใหม่
Bootstrap คือ Frontend Framework ที่รวม HTML, CSS และ JS เข้าด้วยกันสำหรับ
พฒั นา Web ท่ีรองรับทกุ Smart Device หรือ เรยี กวา่ Responsive Web หรอื Mobile Firs
CSS Document สำหรับสร้างรูปแบบตัวอักษร ตาราง และสีพื้นหลัง รวมถึงการลิงก์
เชื่อมโยง เป็นต้น เพื่อเก็บไว้เป็นสไตล์ตามที่ได้ออกแบบและสามารถนำไปใช้งานในหน้าเว็บของเราที่
ต้องการให้เป็นรูปแบบเดียวกันได้อยา่ งรวดเร็ว

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หนว่ ยที่ 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 42

HTML Document สำหรับเลือกสร้างเว็บเพจธรรมดา เพื่อแสดงข้อมูลที่เป็นข้อความหรือ
รูปภาพโดยไมม่ ีการทำงานทเี่ ก่ียวข้องกบั ฐานข้อมลู

JS Document สำหรบั สรา้ งสคริปต์ฝง่ั ไคลเอน็ ต์ ซง่ึ สคริปตน์ ี้จะส่งมาพรอ้ มกับแท็ก HTML
มาถึงผ้ใู ช้งาน

PHP Document สำหรับสร้างเว็บแอพพลิเคชัน่ ซึ่งเป็นภาษาสคริปต์ที่สามารถนำมาติดตั้ง
ใช้งานได้ฟรี โดยฐานขอ้ มลู ทรี่ องรับในการทำงานรว่ มกนั คือ MySQL, dBase และ Oracle เปน็ ต้น

XML Document สำหรบั สรา้ งโครงสร้างข้อมูลในรูปแบบ XML เพ่อื ใช้แสดงในหนา้ เว็บ
ส่วนประกอบใน Adobe Dreamweaver 2020

หมายเลข 1 เมนูหลัก
หมายเลข 2 แท็บมุมมอง
หมายเลข 3 กล่องควบคุมการทำงาน
หมายเลข 4 กลุ่มพาเนล
หมายเลข 5 สว่ นแสดงเนอ้ื หา / ส่วนแสดงโค้ดโปรแกรม

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หนว่ ยที่ 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 43
แท็บมุมมองการทำงานใน Adobe Dreamweaver 2020 มีการแบ่งมุมมองออกเป็น 4
รปู แบบ ไดแ้ ก่

 มุมมองออกแบบ (Design) มมุ มองนจี้ ะแสดงพื้นท่ีในการจัดวางเน้ือหาในเวบ็ เพจทั้งหมด
เชน่ ขอ้ ความ รูปแบบ หรือวัตถุอื่น ๆ ทีเ่ ราสามารถแก้ไขและวางเนื้อหาตามตอ้ งการได้

ตวั อย่างการแสดงผลมุมมองออกแบบ (Design)
 มุมมองโค้ดและออกแบบ (Split) มุมมองนีจ้ ะแสดงพื้นทีใ่ นการจัดวางเนื้อหาและคำสงั่
ในเวบ็ เพจท้งั หมด เช่น ข้อความ รูปภาพ หรือวตั ถอุ นื่ ๆ ทเ่ี ราสามารถแกไ้ ขและวางเนอ้ื หาตามตอ้ งการได้

ตัวอยา่ งการแสดงผลมมุ มองโคด้ และออกแบบ (Split)

30204-2103 การพัฒนาเวบ็ ไซต์ทางธุรกิจ

หน่วยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 44

 มุมมองโค้ด (Code) มุมมองนี้จะแสดงส่วนคำสั่งที่ถูกสร้างขึ้นอัตโนมัติในส่วนของเรา
เมื่อมีการเพิ่มเนื้อหาลงไปในหน้าการออกแบบเว็บเพจ หรือเป็นคำสั่งที่มีการเขียนเพิ่มเติมลงไป เช่น
ภาษาพเี อชพี หรอื อาจจะมคี ำสง่ั สไตลช์ ตี (CSS) และภาษาสครปิ ต์ (Script) ต่าง ๆ ทตี่ ้องการเขา้ มาเขียน
ในมมุ มองนี้

ตวั อยา่ งการแสดงผลมุมมองโคด้ (Code)
 มมุ มอง Live แสดงเอกสารแบบไมส่ ามารถแกไ้ ขได้ แสดงการทำงานเหมอื นบนหน้าต่าง
เว็บเบราเซอร์
กลุ่มพาเนล Insert Bar เป็นกลุ่มเครื่องมือที่ใช้สำหรับสร้างองค์ประกอบต่าง ๆ ซึ่งเราเรียก
องค์ประกอบเหล่านว้ี ่า “ออบเจก็ ต์” ทจ่ี ะนำมาสร้างหน้าเวบ็ เพจ โดยมีเครอื่ งมอื ต่าง ๆ แบ่งออกเป็น 8
ชนิด ดงั น้ี
 กลุ่มเครอ่ื งมือ HTML เปน็ สว่ นทรี่ วบรวมเครือ่ งมือต่าง ๆ ทม่ี ีการเรียกใช้งานบ่อยได้แก่
การแทรกภาพ แทรกตาราง เป็นต้น

 กลุ่มเครื่องมือ Form เป็นส่วนที่รวบรวมเครื่องมือสำหรับสร้างแบบฟอร์มการในรับ
ข้อมูลจากผูใ้ ช้งาน

30204-2103 การพฒั นาเว็บไซตท์ างธุรกิจ

หนว่ ยท่ี 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 45

 กลมุ่ เครอ่ื งมือ PHP เป็นส่วนท่ีรวบรวมเคร่ืองมือสำหรบั ใชใ้ นการเขยี นสคริปตด์ ้วยภาษา
พเี อชพี เช่น Tag ในภาษาพเี อชพี การใชค้ ำส่งั include การปิดแทก็ เพื่อไมใ่ ชแ้ สดงผล เป็นต้น

 กลุ่มเคร่ืองมอื Templates เป็นส่วนทใี่ ชใ้ นการสรา้ ง Templates เปน็ ต้นแบบไวใ้ ช้งาน
ในเว็บเพจ

 กลุ่มเครื่องมือ Bootstrap Components เป็นส่วนที่ใช้ในการสร้างเครื่องมือต่างของ
Bootstrap เพือ่ สรา้ งเว็บเพจให้มคี วามน่าสนใจ

 กลุ่มเครอ่ื งมือ jQuery Mobile เปน็ สว่ นท่ีเก่ยี วข้องกับการพัฒนาเว็บไซต์เพ่ือให้รองรับ
อุปกรณเ์ คลื่อนทโ่ี ดยใช้ jQuery Mobile Framework เป็นการแบง่ หนา้ การจัดสว่ นแสดงผล เปน็ ต้น

 กล่มุ เครอ่ื งมือ jQuery UI เปน็ กล่มุ ออบเจก็ ตท์ ่เี กยี่ วข้องกับส่วนประสานงานของ jQuery
 กล่มุ เครอ่ื งมือ Favorites เป็นส่วนท่สี ามารถเลือกเครอื่ งมอื ทีม่ ีการใช้งานบ่อยจากแต่ละกลุ่ม
เครื่องมอื มาใส่ในกล่มุ เครือ่ งมือนไ้ี ดต้ ามตอ้ งการ

การจัดการไซต์สำหรบั เกบ็ ขอ้ มูล

การสร้างเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver 2020 นั้นเราสามารถเริ่มการกำหนด
โครงร่างของเวบ็ ไซต์ และสรา้ งโพลเดอรส์ ำหรับเก็บขอ้ มูลโดยมรี ายละเอียดเบ้อื งตน้ ดงั นี้

30204-2103 การพฒั นาเวบ็ ไซต์ทางธุรกิจ

หน่วยที่ 3 การออกเวบ็ ดว้ ย Adobe Dreamweaver 2020 46

1. กำหนดโครงรา่ งเวบ็ ไซต์ ก่อนอนื่ ต้องมกี ารำหนดหรือออกแบบโครงร่างแบบครา่ ว ๆ กอ่ น
เพื่อไม่ให้เกิดความสับสน ตัวอย่างเช่น ในกรณีที่เราต้องการจัดทำเว็บไซต์ซื้อขายสินค้าที่เกี่ยวข้องกับ
คอมพิวเตอร์ กอ็ าจสรา้ งโพลเดอรช์ ่อื Salecom ซึง่ เปน็ โพลเดอร์ทร่ี วบรวมเวบ็ เพจและไฟล์ตา่ ง ๆ ที่ใช้ทัง
หมด โดยภายในโพลเดอร์นั้นประกอบด้วยหลาย ๆ โพลเดอร์สำหรับแยกเก็บไฟล์ต่าง ๆ ที่ประกอบกัน
เป็นเว็บไซตด์ งั ภาพ

ภาพตัวอยา่ งการสรา้ งโพลเดอร์สำหรบั เก็บขอ้ มลู ตา่ ง ๆ ของเวบ็ ไซต์
admin ใช้สำหรับเก็บไฟล์สำหรับการจัดการข้อมูลหลังร้าน เช่น เพิ่มสินค้า แก้ไข ลบ
เป็นต้น
image ใช้สำหรับเก็บไฟล์รปู ภาพตา่ ง ๆ ท่เี ก่ยี วข้องกบั เวบ็ เพจ
css ใชส้ ำหรับเก็บไฟลร์ ปู ภาพตา่ ง ๆ ท่ีเก่ยี วข้องกับเว็บเพจ
ไฟล์ index ใชเ้ ปน็ ไฟล์หนา้ แรกของเว็บเพจ
2. กำหนด Site เป็นการเริ่มต้นสร้างเว็บไซต์ใหม่ หรือเรียกว่าเป็นการสร้างไซต์ ซึ่งการ
กำหนดรูปแบบการทำงาน เช่น ต้องการสรา้ งเว็บไซต์กับเซริ ฟ์ เวอร์แบบไหนจะสรา้ งเว็บไซต์คนเดียวหรือ
ทำงานรว่ มกนั เปน็ ทมี โดยไปคลกิ ท่ีเมนู Site > New Site ดงั ภาพ

30204-2103 การพฒั นาเวบ็ ไซต์ทางธุรกิจ

หนว่ ยที่ 3 การออกเว็บด้วย Adobe Dreamweaver 2020 47

ภาพเรม่ิ ตน้ การสร้างไซต์ (Site)
ภาพการกำหนดค่าการสรา้ งไซต์

30204-2103 การพัฒนาเว็บไซต์ทางธรุ กิจ

หนว่ ยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 48

ภาพแสดงไซตห์ ลงั จากำหนดค่าแล้ว
หากต้องการแก้ไขไซตท์ เี่ ราทำการสร้างไวแ้ ล้ว เราสามารถคลกิ เลอื ก Site > Manage Site
จะปรากฏหนา้ ต่างแสดงรายช่ือ Site ที่ไดส้ ร้างไว้ และเราสามารถเลอื ก Site ที่สร้างขน้ึ ในแต่ละ Site ได้
เมอ่ื เลอื ก Site ท่ตี อ้ งการแลว้ ใหค้ ลิกที่ปุ่ม Done ดงั ภาพ

30204-2103 การพัฒนาเว็บไซตท์ างธุรกจิ

หน่วยที่ 3 การออกเว็บด้วย Adobe Dreamweaver 2020 49

3. การสรา้ งหนา้ เวบ็ เพจใหม่
วธิ ีท่ี 1 เลอื กเมนูคำสง่ั File > New
เมื่อคลกิ ที่ New แลว้ จะปรากฏหน้าตา่ งให้เลือกรูปแบบของไฟล์ท่ตี ้องการ

30204-2103 การพัฒนาเว็บไซต์ทางธรุ กจิ

หน่วยที่ 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 50

วิธีที่ 2 สร้างเวบ็ เพจใหม่ในพาเนล ซึ่งเราสามารถทีจ่ ะสร้างโพลเดอรแ์ ละไฟล์ใน Site ท่ี
สร้างขึ้นโดยทำการคลกิ ขวาท่ีชื่อ Site ทส่ี ร้างข้นึ แล้วคลิกเลอื กชุดคำสง่ั ที่ตอ้ งการ เช่น สร้างไฟล์ ให้คลิก
เลอื ก New File สร้างโฟลเดอร์ ใหค้ ลกิ เลือก New Folder

คลกิ ขวาทห่ี มายเลข 1 แล้วกเ็ ลอื ก New File แล้วจะปรากฏหน้าต่าง ดังภาพ

30204-2103 การพฒั นาเว็บไซตท์ างธุรกิจ

หน่วยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 51

และในกรณีที่ตองการลบและแก้ไข ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ที่ต้องการเลือกคำสั่งใน
กลุ่ม Edit เช่น ตอ้ งการเปล่ียนชอื่ คลิกเลอื ก Rename ตอ้ งการลบคลิกเลอื ก Delete และต้องการ Copy
ไฟลเ์ หมอื นกนั ใหเ้ ลอื ก Duplicate ดังภาพ

การจัดการข้อความดว้ ยตาราง

การแทรกตารางเพื่อจัดการข้อความนั้นสามารถแทรกตารางโดยไปที่ Insert Panel >
HTML และเลอื ก Table ดังภาพ

30204-2103 การพัฒนาเวบ็ ไซตท์ างธรุ กจิ

หนว่ ยที่ 3 การออกเวบ็ ดว้ ย Adobe Dreamweaver 2020 52

เมอื่ คลกิ ท่ี Table จะปรากฎหนา้ ตา่ ง Table Properties เพื่อกำหนดคณุ สมบตั ิของตารางท่ี
เราต้องการ ดังภาพ

การกำหนดรายละเอยี ดของตาราง สามารถกำหนดได้ดงั นี้
Rows คอื จำนวนแถวแนวนอน
Columns คือ จำนวนคอลมั นแ์ นวตั้ง
Table Width คือ ความกวา้ งของตารางมีหน่วยเปน็ Pixels หรอื เลอื กเปน็ Percent
Border thickness คือ เลอื กความหนาของเสน้ ขอบตารางเป็น 0 ในกรณที ไ่ี มต่ ้องการ

ให้แสดงเสน้ และ 1 กรณีทีต่ ้องการแสดงเสน้ ตาราง
Cell padding คือ ระยะห่างระหวา่ งเซลล์
Cell spacing คอื ระยะห่างของเน้อื หากบั เสน้ แบ่งตารางเป็น 0 pixels

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หน่วยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 53

เมื่อกำหนดกำหนดคุณสมบัติของตารางแล้วจะปรากฎตารางดงั ภาพ เราสามารถเพิ่มขอ้ มูล
เขา้ ไปยังตาราง จัดตำแหนง่ ของขอ้ มูล กำหนดสีพ้นื หลังของตารางได้ ดังภาพ

หมายเลข 1 การแทรกขอ้ มูลเขา้ ไปในตาราง
หมายเลข 2 การจัดตำแหน่งของข้อมูลภายในตาราง เช่น กำหนดให้ข้อความ
ชิดซา้ ย ชดิ ขวา กึง่ กลาง เป็นตน้
หมายเลข 3 กำหนดสพี ้ืนใหต้ าราง
หมายเลข 4 จัดรูปแบบขอ้ ความ เชน่ ตวั หนา ตัวเอียง เปน็ ต้น
การแทรก/ลบ และผสานแถวและคอลมั น์
การแทรกแถวแนวนอน ทำได้โดยคลิกที่ตำแหน่งท่ีต้องการแทรก และคลิกขวาเลือก
Table>Insert Row หรอื ใช้คีย์ Ctrl + M
การแทรคอลัมน์ ทำได้โดยคลิกท่ีตำแหน่งที่ต้องการแทรกคอลัมน์ และคลิกขวาเลือก
Table>Inset Colum หรอื ใชค้ ีย์ Ctrl + Shift + A
การลบแถวแนวนอน ทำได้โดยคลิกที่ตำแหน่งที่ต้องการลบ และคลิกขวาเลือก
Table>Delete Row หรือใชค้ ยี ์ Ctrl + Shift + M
การลบคอลัมน์ ทำได้โดยคลิกที่ตำแหน่งที่ต้องการลบคอลัมน์ และคลิกขวาเลือก
Table>Delete Column หรือใช้คยี ์ Ctrl + Shift + -

30204-2103 การพัฒนาเว็บไซตท์ างธุรกจิ

หน่วยที่ 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 54

การผลานเซลล์ ทำไดโ้ ดยคลกิ เลอื กเซลล์ที่ต้องการผสานใหเ้ ป็นเซลล์เดียวกันและคลิก
ขวาเลือก Table > Merge Cells หรอื ใช้คยี ์ Ctrl + Alt + M

การตกแต่งเวบ็ ไซต์ด้วย CSS

รจู้ กั กับ CSS
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาไสต์ชีตเพื่อใช้สำหรับการจัดรูปแบบ
ของเกสารในหน้าเวบเพจ สร้างขึ้นด้วยกลุ่มกำหนดมาตรฐาน W3C (World Wide Web Consortium)
เช่นด้วยเดียวกับ HTML และ XHTML จะใช้งาน CSS เพื่อตกแต่งเอกสาร HTML หรือ XHTML เพื่อ
กำหนดหน้าตา สี ตัวอักษร พื้นหลัง ระยะห่างของเอกสารเว็บเพจให้สวยงามปัจจุบัน CSS จะแบ่ง
ออกเปน็ 4 รนุ่ คือ CSS 1, CSS 2, CSS 3, CSS 4
ขอ้ ดีของ CSS
การใช้งาน Cascading Style Sheets นั้นได้รับความนิยมใช้งานจากการใช้งานกับเว็บไซต์
ทัว่ ไป เพราะมขี อ้ ดีต่าง ๆ ดงั น้ี

1. ประหยัดเวลาในการจัดรปู แบบเว็บเพจ จากเดมิ ใช้ HTML ตอ้ งพมิ พโ์ ค้ดหลายบรรทัด
แต่เมื่อใช้ CSS ทำให้โคด้ มบี รรทดั ทีส่ ้ันลง

2. การแก้ไขสะดวกกว่า โดยหากมีการเปลี่ยนแปลงรูปแบบทั้งข้อความในหน้าเว็บ ก็
สามารถทำได้รวดเร็ว หากใช้ HTML ต้องไปแก้ไขในแท็กต่าง ๆ ขณะที่ CSS แก้ไขที่ไฟล์ Style Sheet
อย่างเดยี ว

3. ควบคุมการแสดงขอ้ มลู บนเว็บไซต์ผ่านโปรแกรมเวบ็ เบราเซอร์ โดยไมว่ า่ จะเปดิ ใช้งาน
ดว้ ยเวบ็ เบราเซอรใ์ ดจะมหี น้าตาคลา้ ย ๆ กนั

4. เมื่อโค้ดของหน้าเว็บเพจมีขนาดสั้นลง ก็ทำให้เวลาในการโหลดหน้าเว็บเพจน้อยลง
การแสดงผลหนา้ เวบ็ เพจก็ทำได้รวดเร็วข้ึน

30204-2103 การพฒั นาเวบ็ ไซต์ทางธุรกิจ

หนว่ ยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 55

โครงสรา้ งคำส่งั CSS
คำส่งั ของ CSS น้นั จะประกอบด้วย 3 สว่ น คอื
selector {property: value}

property property

ตวั อยา่ งเช่น h1 {color:blue; font-size:12px;}

selector value value

Selector ส่วนของ HTML tag ที่ต้องการให้แสดงผล เช่น <h1> ก็จะแสดงผลข้อความ
ขนาดใหญท่ ีส่ ดุ หรือ header 1

Property คณุ สมบตั กิ ารจดั รูปแบบที่ตอ้ งการ เช่น สตี วั อักษร, ชนดิ ตวั อกั ษร
Value กำหนดคา่ ที่ตอ้ งการให้กับ Property เชน่ ตัวอักษรสแี ดง, อกั ษรขนาด 12px

การใส่คอมเมนต์ใน CSS
ในกรณีที่สร้างเว็บต้องการใส่คอมเมนต์ลงไปใน CSS เพื่อบอกว่าเป็นส่วนควบคุมการ
แสดงผลสว่ นใด ให้ไปแทรกโคด้ ลงในหน้าตา่ ง Code โดยเรมิ่ ตน้ ดว้ ย /* และปิดดว้ ย */

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกจิ

หนว่ ยท่ี 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 56

การเขยี นคำสั่ง Style Sheet
รูปแบบการเขียนคำสั่ง Style Sheet นั้นจะใช้กำหนดคุณสมบัติของต่าง ๆ เช่น ขนาด
ตวั อักษร สีตัวอกั ษร พน้ื หลัง เป็นตน้ เมื่อนำไปใชง้ านจะสามารถกำหนดรูปแบบ selectors ไดด้ งั น้ี

id selectors
ใช้กำหนดรูปแบบใดรูปแบบหนึ่ง โดยการนำไปใช้งานจะมีการประกาศที่ขึ้นต้นด้วย
เครือ่ งหมาย # จากตวั อยา่ งคอื การกำหนด id= “para”

#text1
{
text-align:center;
color:blue;
}

หมายเลข 1 การกำหนดรปู แบบของ CSS
หมายเลข 2 การเรยี กใช้งาน CSS แบบ id selector

30204-2103 การพัฒนาเว็บไซตท์ างธรุ กจิ

หนว่ ยที่ 3 การออกเว็บด้วย Adobe Dreamweaver 2020 57

class selector
ใช้กำหนดรูปแบบของกลุ่มอิลิเมนต์ (element คือแท็กคำสั่ง เช่น <p>, <br> เป็นต้น)
โดย ยอมให้กำหนดรูปแบบให้กับอิลิเมนต์ HTML ได้หลายรูปแบบในคลาสเดียวกัน ใช้การประกาศท่ี
ข้นึ ตน้ ด้วยเครอื่ งหมาย .

.center {text-align:center;}
ตัวอยา่ ง ทกุ อิลเิ มนต์ของ HTML เมอื่ ใช้ class= “center” จะจดั ขอ้ ความอยกู่ ลาง
หนา้ จอ

หมายเลข 1 การกำหนดรปู แบบของ CSS
หมายเลข 2 การเรยี กใช้งาน CSS แบบ class selector
tag selector
เป็นการอ้างอิงโดยใช้ HTML tags เช่น h1{color:red} เป็นการกำหนดให้ <h1>
แสดงผลขอ้ ความเปน็ สแี ดง

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หนว่ ยท่ี 3 การออกเว็บด้วย Adobe Dreamweaver 2020 58

หมายเลข 1 การกำหนดรปู แบบของ CSS
หมายเลข 2 การใชง้ าน CSS แบบ tag selector
การแทรก CSS
การแทรก Style Sheet น้นั มอี ย่ดู ้วยกัน 3 แบบ คือ
External Style Sheet
Internal Style Sheet
Inline Style
External Style Sheet เหมาะกับการใช้งานกับหลาย ๆ หน้าเพจ โดยการอ้างถึงแบบนี้จะ
สามารถเปลี่ยนแปลงหนา้ ตาของเว็บได้ดว้ ยไฟล์เดยี ว ซง่ึ แต่ละเพจจะมีการลิงก์ไปยัง Style Sheet โดยใช้
แทก็ <link> เอาไว้ในสว่ นของ head เชน่
<head>
<link rel=“stylesheet” type=“text/css” href= “css/new.css”
</head>

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกจิ

หน่วยที่ 3 การออกเว็บด้วย Adobe Dreamweaver 2020 59

ไฟล์ External Style Sheet นั้นจะเขียนด้วยโปรแกรม Text Editor ก็ได้โดยไฟล์ดังกล่าว
จะไม่มแี ท็ก html แตจ่ ะบันทกึ เป็นไฟลน์ ามสกุล .css ตวั อย่างเช่น

hr {color:gray;}
p {margin-left:10px;}
body {background-image:url(“images/back.gif”);}
Internal Style Sheet มักใช้งานกับเอกสาร HTML เพจเดียว โดยจะแทรกลงไปในส่วน
<head> ด้วยการใช้แทก็ <style>
<head>
<style type=“text/css”>
hr {color:gray;}
p {ma-left:10px;}
body {background-image:url(“images/back.gif”);}
</style>
</head>
Inline Style ใชก้ บั การกำหนด Style ใหก้ ับอิลเิ มนต์ของ html โดยจะใช้คำสง่ั style=“”
<p style= “color:gray;margin-left:10px”> แสดงข้อความตามรปู แบบ</p>

การสร้างไฟล์ CSS สำหรับการตกแต่งข้อความควบคุมการแสดงผลของหน้าเวบ็ เพจโดยไม่
ตอ้ งไปเขยี นคำส่งั CSS ใหม่ทุกคร้งั เม่อื มกี ารสร้างหนา้ เว็บเพจ ใหท้ ำการสรา้ งไฟล์ใหม่ File > New… ดัง
ภาพ

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกิจ

หน่วยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 60

เมื่อทำการคลิกเลือก CSS Document แล้วจะปรากฎไฟล์ให้ทำการบันทึกไฟลช์ ือ่ new
และจัดเก็บไว้ในโฟลเดอร์ CSS ดังภาพ

30204-2103 การพฒั นาเว็บไซต์ทางธุรกจิ

หน่วยที่ 3 การออกเวบ็ ดว้ ย Adobe Dreamweaver 2020 61

ใบงาน 3.1 การออกแบบเวบ็ ดว้ ย Adobe Dreamweaver 2020

คำสั่ง : จงตอบคำถามต่อไปน้ีให้ได้ใจความที่สมบรู ณ์

1. จงอธบิ ายสว่ นประกอบหลกั ของโปรแกรม Adobe Dreamweaver 2020 มาพอสังเขป
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
2. จงบอกขน้ั ตอนการสร้างไซตด์ ว้ ยโปรแกรม Adobe Dreamweaver 2020
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
3. จงบอกขัน้ ตอนการสรา้ งตารางและการกำหนดค่า
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
4. จงอธบิ ายความหมายของ CSS
..............................................................................................................................................................
..............................................................................................................................................................
..............................................................................................................................................................
..............................................................................................................................................................
5. จงบอกการแทรก Style Sheet มกี รี่ ูปแบบ อะไรบ้าง
..............................................................................................................................................................
..............................................................................................................................................................
..............................................................................................................................................................
...............................................................................................................................................................

30204-2103 การพัฒนาเว็บไซต์ทางธุรกิจ

หนว่ ยท่ี 3 การออกเวบ็ ด้วย Adobe Dreamweaver 2020 62

ใบงาน 3.2 การแสดงผลขอ้ ความดว้ ย CSS

คำสัง่ : ใหศ้ ึกษาเนอื้ หา หนว่ ยที่ 3 การออกแบบเวบ็ ดว้ ย Adobe Dreamweaver 2020 และ
เขยี นโปรแกรมแสดงข้อมูล ควบคุมข้อมลู ด้วย CSS

เขยี นโปรแกรมแสดงข้อมูลและกำหนดรปู แบบด้วย CSS ใหไ้ ด้ตามรปู แบบ
บนั ทึกไฟล์ช่อื JOB3-1.php
เวลา 60 นาที

-----------------------------------------------------------------

วทิ ยาลยั การอาชพี ขอนแก่น

แผนกวชิ าคอมพวเตอร์ธรุ กิจ

รหัสนักศกึ ษา : xxx

ช่อื : xxx นามสกุล : xxx <h2>
ท่ีอยู่ : xxx

เบอรโ์ ทร : xxx-xxxxxxx

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กิจ

หน่วยท่ี 3 การออกเว็บด้วย Adobe Dreamweaver 2020 63

แบบทดสอบหลงั เรยี น
การออกแบบเวบ็ ด้วย Adobe Dreamweaver 2020

คำสั่งช้แี จง : 1. แบบทดสอบฉบบั บนีเ้ ปน็ แบบปรนยั ชนิดเลอื กตอบ 4 ตวั เลือก จำนวน 10 ข้อ
ข้อละ 1 คะแนน
2. ให้เลอื กคำตอบท่ีถกู ต้องที่สดุ เพียงขอ้ เดียว แล้วทำเครือ่ งหมายกากบาท (X) ลงใน
กระดาษคำตอบ
3. เวลาท่ีใช้ในการทำแบบทดสอบ 10 นาที

1. โปรแกรม Adobe Dreamweaver 2020 คอื โปรแกรมประเภทใด
ก. เท็กซ์เอดิเตอร์
ข. ระบบปฏบิ ัตกิ าร
ค. ตกแตง่ ภาพ
ง. สรา้ งสื่อมลั ติมีเดยี

2. การสร้างหนา้ เวบ็ สำหรับสร้างเวบ็ แอพพลเิ คชั่นควรเลือกรูปแบบใด
ก. Bootstrap
ข. CSS Document
ค. PHP Document
ง. JS Document

3. มุมมองการทำงานใน Adobe Dreamweaver 2020 มีการแบง่ มมุ มองกี่รูปแบบ
ก. 1 รปู แบบ
ข. 2 รปู แบบ
ค. 3 รูปแบบ
ง. 4 รูปแบบ

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กิจ

หน่วยที่ 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 64

4. การสรา้ งไซตใ์ หมจ่ ะตอ้ งเลือกทเ่ี มนูใด
ก. Site > New Site
ข. Tools > New Site
ค. File > New Site
ง. Edit > New Site

5. การสร้างไฟล์ใหม่จะต้องเลอื กทเี่ มนใู ด
ก. Site > New…
ข. Tools > New…
ค. File > New…
ง. Edit > New…

6. การแทรกตารางต้องเลอื กท่ี Insert Panel ใด
ก. Form > Table
ข. HTML > Table
ค. Templates > Table
ง. JQuery Mobile >Table

7. เม่ือต้องการแทรกแถวในตารางต้องใช้คำสงั่ ใด
ก. Ctrl + Shift + M
ข. Ctrl + Shift + A
ค. Ctrl + M
ง. Ctrl + Shift + -

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกจิ

หนว่ ยท่ี 3 การออกเวบ็ ดว้ ย Adobe Dreamweaver 2020 65

8. CSS ย่อมาจากขอ้ ใด
ก. Cascading Style Sheets
ข. Classing Style Sheets
ค. Closing Style Sheets
ง. Casting Style Sheets

9. ขอ้ ใด ไม่ใช่ ขอ้ ดีของ CSS
ก. ประหยัดเวลาในการจัดรูปแบบเว็บเพจ
ข. การแกไ้ ขสะดวกกวา่
ค. โค้ดของหน้าเว็บเพจมขี นาดสนั้ ลง
ง. คำสงั่ มีมากยากต่อการจดจำ

10. ข้อใดคอื การเขยี นคอมเมนตข์ อง CSS
ก. // ข้อความ
ข. <!--- ข้อความ -->
ค. /* ข้อความ */
ง. ## ขอ้ ความ

30204-2103 การพฒั นาเว็บไซตท์ างธรุ กจิ

หนว่ ยท่ี 3 การออกเวบ็ ดว้ ย Adobe Dreamweaver 2020 66

ใบกระดาษคำตอบ
การออกแบบเวบ็ ด้วย Adobe Dreamweaver 2020

ชอื่ ........................................นามสกลุ ....................................ระดับชั้น.............กลมุ่ .........เลขท.่ี ..........

ข้อ ก ข ค ง ผล
1
2
3
4
5
6
7
8
9
10

คะแนนท่ีทำได้

เกณฑก์ ารประเมนิ 70 เปอรเ์ ซน็ ต์ ลงชื่อ..........................................ผู้ตรวจ
ทำได้ 7-10 คะแนน ผ่านเกณฑ์ (.........................................)
สรปุ ผล  ผ่านเกณฑ์ ........../................/..........

 ไม่ผ่านเกณฑ์

30204-2103 การพฒั นาเวบ็ ไซต์ทางธุรกจิ

หนว่ ยท่ี 3 การออกเว็บดว้ ย Adobe Dreamweaver 2020 67

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กจิ