Lesson 2

1. การกาหนด Encoding แสดงข้อความบนเว็บเพจเป็นภาษาไทย
Encoding เป็นการกาหนดรูปแบบการแสดงภาษาบนเว็บเพจ เมื่อเราแสดงเว็บเพจนี้บนบราวเซอร์ ก็
จะแสดงตัวอักษรเป็นภาษาในรูปแบบที่กาหนดไว้อัตโนมัติ ปัจจุบันการกาหนดภาษาไทยบนเว็บเพจจะนิยม
ใช้อยู่ 2 รูปแบบ คือ
Thai (Windows) เป็นมาตรฐานภาษาไทยของ Windows โดยใช้ค่ารหัสตัวอักษรเป็น Windows-874
Unicode (UTF-8) เป็นมาตรฐานที่เข้ารหัสแบบไบนารี่ Unicode ซึ่งเก็บอักษรได้ 34, 168 ตัว และเป็น
ภาษาต่างๆ ได้ถึง 24 ภาษา รวมทั้งภาษาไทยด้วย การกาหนดจะใช้ค่า
รหัสตัวอักษรเป็น UTF-8
ปัจจุบันการทาเว็บเพจจะนิยมกาหนดเป็น UTF-8 เพราะรองรับการทางานข้ามระบบ รวมถึง
แสดงผลตัวอักษรบนอุปกรณ์แบบพกพา ปาล์ม พ็อกเก็ตพีซี ไอโฟน และสมาร์ทโฟนได้อย่างถูกต้อง
วิธีการกาหนด Encoding บนหน้าเว็บ ดังนี้
เลือกคาสั่ง Modify
>Page Properties…
เพื่อเลือกรูปแบบการ
เข้ารหัสตัวอักษร
การใส่ข้อความและรูปภาพลงในเว็บเพจ

2. 37
คลิกเลือกที่หัวข้อ
Title/Encoding
การพิมพ์ข้อความ
เราสามารถพิมพ์ข้อความต่าง ๆ ลงไปในหน้าเว็บเพจได้โดยตรง โดยเนื้อความที่พิมพ์มักจะถูกแบ่ง
ออกเป็นส่วน ๆ เรียกว่า ย่อหน้า (Paragraph)ซึ่งแต่ละย่อหน้าอาจมีเพียงบรรทัดเดียวหรือหลายๆ บรรทัดก็
ได้ โดยการกดปุ่ม Enterเมื่อจบบรรทัดหมายถึงการจบย่อหน้านั้นและขึ้นย่อหน้าใหม่
วิธีการพิมพ์ข้อความ
วิธีการพิมพ์เนื้อความจะต้องอยู่ในมุมมองออกแบบ (Design View)โดยเลือกคาสั่ง
Viewเลือก Design
1. เลื่อนเคอร์เซอร์ไปยังตาแหน่งที่ต้องการพิมพ์ข้อความ
2. กดปุ่มเปลี่ยนภาษาไทย/อังกฤษ( ปุ่ม Tile)
3. พิมพ์ข้อความที่ต้องการ เราสามารถพิมพ์ข้อความต่าง ๆ ไปจนสุดขอบขวาของหน้าเว็บเพจ
และเมื่อเราพิมพ์ต่อไป ข้อความส่วนที่เกินนั้นจะถูกตัดขึ้นบรรทัดใหม่เองโดยอัตโนมัติ ดังนั้น
เราจึงสามารถพิมพ์ข้อความไปได้เรื่อย ๆ จนจบย่อหน้า
4. หากต้องการขึ้นย่อหน้าใหม่ให้กดปุ่ม Enter
เลือกรูปแบบการ
เข้ารหัสตัวอักษร
Thai (Windows)
Unicode (UTF-8)
คลิก

3. 38
การเลือกข้อความ
ในการทางานของโปรแกรม Adobe Dreamweaver CS3นี้การเลือกข้อความที่จะทางานก็เหมือนกับ
การเลือกข้อความทั่วๆไปคือจะต้องมีการเลือกข้อความหรือทาแถบสีดาคลุมข้อความที่ต้องการก่อนทาการ
เปลี่ยนแปลงรายละเอียดต่าง ๆ โดยมีวิธีการดังนี้
การใช้เมาส์
1. เลื่อนเมาส์ไปยังตาแหน่งที่ต้องการเลือกข้อความ
2. กดปุ่มเมาส์ทางซ้ายค้างไว้ แล้วลากไปยังตาแหน่งสุดท้ายของข้อความที่ต้องการเลือก
3. ปล่อยเมาส์ก็จะได้แถบสีดาเลือกข้อความที่ต้องการ
การใช้แป้นพิมพ์
1. เลื่อนเคอร์เซอร์ไปยังตาแหน่งต้นข้อความที่จะเลือก
2. กดปุ่ม Shiftค้างไว้ พร้อมกดปุ่มลูกศรบนแป้นพิมพ์ เพื่อเลื่อนเคอร์เซอร์ไปยังตาแหน่งสุดท้าย
ของข้อความ
3. ปล่อยปุ่มทั้งสองก็จะได้แถบสีดาเลือกข้อความที่ต้องการ

4. 39
 การเลือกข้อความยาว ๆเราสามารถเลือกข้อความยาว ๆ ได้โดยการใช้วิธีลัดที่คลิกเมาส์เพียง
สองครั้ง ซึ่งไม่ต้องเสียเวลาในการดรากส์เมาส์ยาว ๆ โดยทาตามขั้นตอนดังนี้
1. คลิกเมาส์เพื่อวางเคอร์เซอร์ที่ต้นข้อความที่ต้องการ
2. กดปุ่ม Shiftค้างไว้
3. คลิกเคอร์เซอร์ที่ตาแหน่งสุดท้ายของข้อความ ก็จะได้ข้อความที่เลือก
 การเลือกทีละคาหรือทีละวรรค
ดับเบิ้ลคลิกที่คาหรือวรรคนั้น ก็จะสามารถเลือกคาได้โดยไม่ต้องดรากส์เมาส์เลือกทีละคาหรือทีละ
วรรค

5. 40
 การเลือกข้อความทั้งหมด
การเลือกข้อความทั้งหมด เราสามารถใช้คาสั่งบนเมนูบาร์ คือ เลือกเมนูคาสั่ง Editเลือกคาสั่ง Select
All จะได้แถบสีดาคลุมข้อความทั้งหมดในแฟ้มข้อมูล
 การเลือกข้อความโดยใช้ Selection bar
Selection barเป็นแถบว่างๆ ที่อยู่ด้านซ้ายสุดของหน้าต่าง document เมื่อนาเมาส์มาอยู่บริเวณ
Selection bar เมาส์พอยน์เตอร์จะเปลี่ยนเป็นรูป
Selection bar

6. 41
 เลือกทีละบรรทัด
คลิกที่ Selection bar ในต้นบรรทัดที่ต้องการเลือก
 เลือกทีละหลาย ๆ บรรทัด
คลิกที่ Selection bar ในต้นบรรทัดนั้น แล้วลากเมาส์ขึ้นหรือลงใน Selection bar
 การยกเลิกส่วนที่เลือกไว้
คลิกที่ตาแหน่งใด ๆ บนพื้นที่ว่างที่ไม่ใช่บริเวณแถบสีดา ซึ่งจะทาให้แถบสีดาที่เลือกไว้หายไป

7. 42
การจัดรูปแบบตัวอักษร
เมื่อเราทาการเลือกข้อความตามที่ต้องการได้แล้วถ้าต้องการเปลี่ยนลักษณะของตัวอักษร เรา
สามารถทาได้โดยใช้การกาหนดค่าในส่วนของพาเนล Propertiesที่อยู่ด้านล่างของโปรแกรมเช่น การ
เปลี่ยนแบบอักษร , ขนาดตัวอักษร , สีตัวอักษร , กาหนดตัวหนาและตัวเอียงให้กับตัวอักษร ก็สามารถ
เปลี่ยนได้จากพาเนลตัวอักษรได้ทันที ซึ่งมีรายละเอียดของแต่ละไอคอนดังต่อไปนี้
เลือกรูปแบบหัวข้อ
ของข้อความ
เลือกสไตล์ที่เราเคยกาหนด
ให้กับตัวอักษร หรือสร้างสไตล์
ใหม่จากหน้าต่าง CSS Style
เปิดแถบพาเนล CSS
ตัวหน
า
ตัวเอียง
จัดตาแหน่งข้อความ
จัดย่อหน้าของข้อความ
ใส่ Bullet หรือตัวเลขกากับในแต่
ละบรรทัดของข้อความ
คลิกเมาส์เลือกสีให้กับ
ตัวอักษร
ขนาดตัวอักษร
เลือกรูปแบบตัวอักษรที่มี
อยู่ หรือเพิ่ม/ลบรูปแบบ
ตัวอักษร โดยเลือกที่ Edit
Font List…

8. 43
การเปลี่ยนสีตัวอักษร
ในการเปลี่ยนลักษณะของแบบอักษร หรือสีตัวอักษรของการใช้โปรแกรม Adobe Dreamweaver
CS3หรือการสร้างโฮมเพจทั่วไป จะต้องเขียนเป็นรหัสสี เช่น #FF9900 จะได้เป็นสีเขียว , #990000เป็นสี
แดงเข้ม เป็นต้น ซึ่งรหัสสีนี้เมื่อเราเลือกสีใดจะปรากฏในช่องสี่เหลี่ยมด้านข้างและจะปรากฏในมุมมอง
Code View ด้วย หรือจะเลือกใช้คาสั่งจากเมนูบาร์ก็ได้เช่นกัน คาสั่ง คือ Text เลือกคาสั่ง Color…
การเปลี่ยนรูปแบบตัวอักษร
ในการเปลี่ยนลักษณะของแบบอักษร สามารถทาได้โดยเลือกข้อความที่ต้องการแล้วเลือก
ลักษณะรูปแบบตัวอักษรที่ต้องการ หรือจะเลือกใช้คาสั่งจากเมนูบาร์ก็ได้เช่นกัน คาสั่ง คือ Textเลือกคาสั่ง
Font

9. 44
การเปลี่ยนขนาดตัวอักษร
การกาหนดขนาดตัวอักษรใน Dreamweaver CS5มีความยืดหยุ่นมากขึ้นด้วยคุณสมบัติของ CSS
คือสามารถระบุหน่วยซึ่งจะทาให้ได้ขนาดที่แน่นอน
หากต้องการเปลี่ยนขนาดของแบบอักษรในรูปแบบ HTML สามารถทาได้โดย
เลือกคาสั่ง Edit >> Preferences คลิกที่กลุ่มGeneral และคลิกยกเลิกที่
ในกาหนดรูปแบบแทน CSS
การเปลี่ยนลักษณะของแบบอักษร
ในการเปลี่ยนลักษณะของแบบอักษรสามารถทาได้โดยเลือกข้อความที่ต้องการแล้วเลือกลักษณะ
ตัวอักษรที่ต้องการ เช่น ตัวหนา ตัวเอียง หรือ ตัวขีดเส้นใต้ หรือจะเลือกใช้คาสั่งจากเมนูบาร์ก็ได้เช่นกัน
คาสั่ง คือ Textเลือกคาสั่ง Style
กาหนดรูปแบบเป็น
แบบHTML
กาหนดรูปแบบเป็น
แบบ CSS

10. 45
การจัดย่อหน้า
 การจัดวางข้อความในย่อหน้า
การจัดวางข้อความสามารถทาได้หลายรูปแบบ เพื่อสะดวกในการจัดข้อความให้อยู่ในตาแหน่งที่
สวยงามและเป็นระเบียบ สามารถทาได้ 2 วิธี
วิธีที่ 1
1. เลือกย่อหน้าที่ต้องการจะจัดรูปแบบ หรือคลิกเมาส์ที่ย่อหน้านั้น
2. คลิกไอคอนการจัดย่อหน้าบนพาเนล Properties
วิธีที่ 2 เลือกเมนูคาสั่ง Format เลือกคาสั่งAlign
ชิดขวา
ชิดขอบ
กึ่งกลาง
ชิดซ้าย

11. 46
 การจัดระยะเยื้อง (Indent) ของย่อหน้า
เป็นการจัดให้ย่อหน้านั้นห่างจากขอบของหน้าเอกสาร โดยย่อหน้านั้นจะถูกจัดให้ทั้งซ้ายและขวา
ห่างจากขอบเท่า ๆ กัน ซึ่งในแต่ละย่อหน้า เราสามารถใช้คาสั่งนี้ได้หลายครั้งเพื่อให้เยื้องจนได้ระยะที่
ต้องการ สามารถทาได้ 2 วิธี
วิธีที่ 1 1. วางตัวบอกตาแหน่งการพิมพ์ในย่อหน้าที่ต้องการ
2. คลิกที่ไอคอนบนพาเนล Properties
วิธีที่ 2 1. วางตัวบอกตาแหน่งการพิมพ์ในย่อหน้าที่ต้องการ
2. เลือกเมนูคาสั่ง Formatเลือกคาสั่ง Indentหรือ Outdent
Indentคือ ขยับย่อหน้าเข้าด้านใน
Outdentคือ ขยับย่อหน้าออกด้านนอก
เยื้องออก เยื้องเข้า

12. 47
 การขึ้นบรรทัดใหม่ภายในย่อหน้า
ในโปรแกรม Dreamweaverrการพิมพ์ข้อความในแต่ละบรรทัดโปรแกรมจะทาการตัดคาขึ้นบรรทัด
ใหม่ให้เองตามความกว้างของหน้า แต่ถ้าต้องการให้ขึ้นบรรทัดใหม่ในตาแหน่งที่เราต้องการ สามารถทา
ได้ดังนี้
1. วางเคอร์เซอร์ยังตาแหน่งที่จะตัดขึ้นบรรทัดใหม่ หรือหลังตัวอักษรสุดท้ายของบรรทัด
2. กดปุ่ม Shift + Enterจะเห็นว่าข้อความที่ต้องการให้ขึ้นบรรทัดใหม่จะอยู่บรรทัดใหม่ต่อจาก
บรรทัดแรก แต่ยังอยู่ภายในย่อหน้าเดียวกัน
การใส่สัญลักษณ์แสดงหัวข้อย่อย
ในการพิมพ์ข้อความบนแฟ้มข้อมูล บางครั้งเราอาจจะต้องการทาข้อความให้เป็นรายการที่มี
ลักษณะเป็นหัวข้อย่อย ซึ่งในโปรแกรม Dreamweaverr ก็สามารถใส่สัญลักษณ์เหล่านี้ได้เช่นเดียวกับ
โปรแกรมอื่น ซึ่งสัญลักษณ์เหล่านี้มีหลายรูปแบบ ได้แก่ ตัวเลขลาดับ(Ordered) , สัญลักษณ์ (Bullet) ,
รายการที่ไม่ต้องเรียงลาดับ (Unordered) และ รายการที่ไม่ใส่อะไรเลย (Defintion List)สามารถทาได้ 2 วิธี
วิธีที่ 1
1. เลือกย่อหน้าทั้งหมดที่ต้องการใส่สัญลักษณ์แสดงหัวข้อย่อยหรือเลขลาดับ
2. คลิกไอคอน หรือ บนพาเนล Properties
วิธีที่ 2
1. เลือกย่อหน้าทั้งหมดที่ต้องการใส่สัญลักษณ์แสดงหัวข้อย่อยหรือเลขลาดับ
2. เลือกเมนูคาสั่ง Format เลือกคาสั่งList แล้วเลือกหัวข้อตามต้องการ
ตัวอย่างของสัญลักษณ์แสดงหัวข้อย่อยแต่ละชนิด

13. 48
Unordered list Ordered list Definition list
 ห้องเรียนคอมพิวเตอร์ 1. ห้องเรียนคอมพิวเตอร์ ห้องเรียนคอมพิวเตอร์
ห้อง Sound Lab 2. ห้อง Sound Lab ห้อง Sound Lab
 ห้อง PlayLand 3. ห้อง PlayLand ห้อง PlayLand
การพิมพ์รายการหัวข้อย่อยขึ้นใหม่
1. วางตัวบอกตาแหน่งการพิมพ์ในตาแหน่งที่จะเริ่มพิมพ์หัวข้อย่อย
2. ใช้ไอคอนแสดงสัญลักษณ์หัวข้อย่อยบนพาเนล หรือ ใช้คาสั่ง TextเลือกList จะปรากฏ
สัญลักษณ์หน้าหัวข้อ และพร้อมให้เราพิมพ์รายการได้
3. พิมพ์รายการหัวข้อย่อย กด Enterเพื่อพิมพ์หัวข้อถัดไป
4. เมื่อพิมพ์รายการครบแล้ว ให้กด Enterสองครั้ง
 การพิมพ์รายการย่อยในหัวข้อย่อย
1. เลือกหัวข้อที่จะทาเป็นหัวข้อย่อย
2. คลิกไอคอน Indent ในพาเนล Propertiesหรือใช้คาสั่ง Text เลือกIndentหัวข้อนั้นจะถูก
เลื่อนไปเป็นหัวข้อย่อย
3. ถ้าต้องการพิมพ์หัวข้อย่อยอื่นให้กดปุ่ม Enter
การแทรกช่องว่างเพื่อเว้นวรรค
ในภาษา HTML จะอนุญาตให้เว้นวรรคตัวอักษรได้เพียง 1 ช่องว่างเท่านั้น ถ้าเราต้องการให้เว้น
วรรคมากกว่า 1 ช่องว่างเราจะต้องทาการแทรกช่องว่างลงไป ซึ่งสามารถทาได้ 2 วิธี ดังนี้
วิธีที่ 1
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะแทรกช่องว่าง
2. ในแถบ Insertเลือกคลิปแท็บ Text แล้วคลิกที่ปุ่ม (Non-breaking Space)

14. 49
วิธีที่ 2
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะแทรกช่องว่าง
2. กดปุ่ม Ctrl+Shift+Spacebar
การใช้อักขระพิเศษ
นอกเหนือจากการพิมพ์ข้อความหรือตัวอักษรทั่ว ๆ ไป แล้ว เรายังสามารถใช้อักขระพิเศษให้กับ
เนื้อหาในเว็บเพจของเราได้อีกด้วย โดยมีวิธีการใช้อักขระพิเศษ 2 วิธี ดังนี้
วิธีที่ 1
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะใช้อักขระพิเศษ
2. ในแถบ Insertเลือกคลิปแท็บ Textแล้วคลิกที่ เพื่อเลือก
อักขระพิเศษที่ต้องการ
การใส่วันที่
ในการสร้างโฮมเพจนอกเหนือจากการใส่ข้อความแล้วเรายังสามารถใส่วันที่ เพื่อให้แสดงวันที่ปัจจุบัน
ในหน้าเว็บเพจ มีวิธีใส่วันที่ 2 วิธี ดังนี้
วิธีที่ 1
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะใส่วันที่

15. 50
2. ในแถบ Insertเลือกคลิปแท็บ Common แล้วคลิกที่ปุ่ม Date
วิธีที่ 2
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะใส่วันที่
2. เลือกเมนูคาสั่ง Insertเลือกคาสั่ง Date จะปรากฏไดอะล๊อกบล็อกซ์ของการใส่
วันที่ ให้เรากาหนดรายละเอียดของการใส่วันที่ตามต้องการ
3. เมื่อกาหนดได้แล้วคลิกเมาส์ที่ปุ่ม OK. จะปรากฏวันที่บนหน้าเว็บเพจ
นาเคอร์เซอร์ไป
วางยังตาแหน่งที่
ต้องการจะใส่วันที่

16. 51
การใส่เส้นคั่นแนวนอน
การใส่เส้นคั่นแนวนอนในหน้าเว็บเพจเพื่อคั่นข้อมูลออกเป็นตอน ๆ เพื่อสะดวกในการอ่าน
ข้อความที่มีการแบ่งส่วนไว้อย่างชัดเจน ทาให้เว็บเพจของเราอ่านง่ายและสวยงาม โดยมีวิธีการใส่เส้นคั่น
แนวนอน ดังนี้
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะใส่เส้นคั่น
2. เลือกเมนูคาสั่ง Insertเลือกเมนูคาสั่ง HTML >>>Horizontal Ruleจะปรากฏเส้นคั่นที่เป็นสี
เทาคั่นข้อความ
เลือกคาสั่ง
Insert > Date
เลือกรูปแบบวัน
เลือกรูปแบบวันที่
เลือกรูปแบบเวลา
คลิก

17. 52
เลือกคาสั่ง
Insert > HTML
>Horizontal Rule
จะปรากฏเส้นคั่น
ที่เป็นสีเทาคั่น
ข้อความ

18. 53
การปรับเปลี่ยนเส้นคั่นแนวนอน
1. เลือกเส้นคั่นแนวนอนที่จะปรับเปลี่ยน โดยการคลิกเมาส์ที่เส้นคั่นซึ่งเส้นคั่นจะมีแถบสีดา
คลุม
2. จะปรากฏพาเนล Propertiesของเส้นคั่นที่ด้านล่างของโปรแกรม ให้เราทาการปรับเปลี่ยนค่า
ต่าง ๆ ในพาเนลได้ตามต้องการ
คลิกเลือก
เส้นคั่น
จะปรากฏ
พาเนล Properties
ของเส้นคั่น
กาหนดความสูงของเส้น วาดเส้นแบบมีความลึก
กาหนดความยาวของเส้น จัดวางตาแหน่ง
ตั้งชื่อให้กับเส้น

19. 54
การใส่รูปภาพลงในเว็บเพจ
นอกเหนือจากการใส่ข้อความที่เป็นตัวอักษรลงในเว็บเพจแล้ว เรายังสามารถใส่รูปภาพต่าง ๆ ลง
ไปในเว็บเพจได้อีกด้วย ซึ่งรูปภาพก็เป็นส่วนที่ช่วยสร้างสีสันให้กับเว็บเพจของเราได้เป็นอย่างดี โดยใน
เว็บเพจนี้อาจจะประกอบด้วยรูปภาพ เช่น ภาพถ่าย , ภาพวาด , หรือรูปปุ่มต่าง ๆ ก็ได้และในการใส่
รูปภาพลงในเว็บเพจยังมีรายละเอียดเกี่ยวกับรูปภาพอีกมากมายดังนี้
ชนิดของรูปภาพ ชนิดของไฟล์ภาพมีอยู่มากมายแต่ในที่นี้จะแนะนา 4 ชนิด คือ
1. GIF (Graphic Interchange Format)
เป็นรูปแบบของไฟล์รูปภาพที่เป็นที่นิยมกันอย่างมาก ซึ่งนิยมใช้บนงานอินเตอร์เน็ตเนื่องจากไฟล์ที่
ได้จะมีขนาดเล็ก สามารถกาหนดสีได้สูงสุด 256 สี ทาภาพโปร่งแสงและสร้างเป็นภาพเคลื่อนไหว มักใช้
กับภาพการ์ตูน , โลโก้ และภาพเคลื่อนไหว
2. JPEG (Joint Photographic Experts Group)
เป็นรูปแบบของไฟล์รูปภาพที่สามารถกาหนดสีได้เป็นล้านสี และไฟล์ที่ได้จะมีขนาดเล็กกว่าไฟล์
.GIF แต่จะเก็บรายละเอียดของภาพได้น้อยกว่า และสามารถที่จะบีบอัดไฟล์ได้ เหมาะสาหรับภาพถ่าย
รูปภาพจากสแกน , รูปภาพที่มีพื้นผิว , และรูปภาพใด ๆ ที่มีสีมากกว่า 256 สี
3. TIFF (Tagged Image File Format)
ไฟล์ประเภทนี้สามารถเก็บรายละเอียดของภาพได้เป็นอย่างดี ทาให้ไฟล์ที่ได้มีขนาดค่อนข้างใหญ่ จึงไม่
นิยมนามาใช้งานบนอินเตอร์เน็ต
4. PNG (Portable Network Graphic)
เป็นรูปแบบของไฟล์กราฟฟิคที่ใช้บนเว็บ แต่อาจใช้ไม่ได้กับทุกบราวเซอร์ รองรับความลึกของ
สีแบบ 32 บิต สามารถใส่เอ็ฟเฟ็คได้ ไฟล์ชนิดนี้เป็นไฟล์มาตรฐานของโปรแกรม Macromedia
Fireworks

20. 55
วิธีการใส่รูปภาพลงในเว็บเพจ
เลือกตาแหน่งของ
ภาพที่ต้องการจะวาง
บนหน้าเว็บแล้วเลือก
เครื่องมือ
(image) แท็บ
Common
เลือกภาพที่ต้องการ
คลิก เพื่อตกลงเลือกภาพ
จะได้รูปแสดงบนหน้าเว็บ
เขียนคาอธิบายรูปภาพ
และคลิก

21. 56
การปรับขนาดของรูปภาพ
เมื่อเราทาการแทรกรูปภาพในเว็บเพจแล้ว บางครั้งรูปภาพที่แทรกอาจจะมีขนาดที่ใหญ่หรือเล็ก
เกินไป จาเป็นต้องมีการปรับขนาดเพื่อให้สวยงามและเหมาะสมกับเว็บเพจ โดยมีวิธีการดังนี้
1. คลิกที่รูปภาพที่จะปรับขนาด จะปรากฏจุดยึด (Handle)ที่ขอบล่าง , ขอบขวา และมุมขวาล่าง
ของรูป
2. ลากจุดยึดเพื่อปรับขนาด หากต้องการให้มีขนาดเล็กลงให้ลากเมาส์เข้าไปด้านในภาพ และถ้า
ต้องการให้ภาพมีขนาดใหญ่ให้ลากเมาส์ออกไปจากภาพ และถ้าหากต้องการให้ขนาดมีการขยาย หรือ ย่อ
ให้ได้สัดส่วนเท่ากันระหว่างความกว้างและความยาวให้กดปุ่ม Shiftบนแป้นพิมพ์ค้างไว้ขณะที่ลากเมาส์
ด้วย
จุดยึด (Handle)

22. 57
ในการใช้พาเนล Propertiesของรูปภาพ ถ้าเราคลิกเมาส์ที่รูปภาพจะปรากฏพาเนลด้านล่าง
โปรแกรม ซึ่งจะปรากฏภาพเล็กที่แสดงว่าเราเลือกภาพใดอยู่บนพาเนลด้วย และในการปรับภาพนั้นจะมี
ขนาดของภาพบอกอยู่ในพาเนลด้วย คือ Wหมายถึง กว้าง ,H หมายถึง สูง นอกจากการใช้เมาส์ในการ
ปรับขนาดของภาพแล้ว เรายังสามารถใส่ค่าตัวเลขของขนาดลงในช่อง W , Hได้อีกด้วย และถ้าต้องการ
กลับไปยังขนาดปกติให้ลบค่าในส่วนของ W และH ออก แล้วกดปุ่ม Enterหรือคลิกปุ่ม
ในพาเนล Properties
นอกจากนี้ด้านล่างขวาของพาเนลจะมีสัญลักษณ์ซึ่งแสดงว่ายังมีรายละเอียดของการตั้งค่า
รูปภาพอยู่อีก ซึ่งถ้าคลิกเมาส์ที่สัญลักษณ์นี้จะปรากฏไอคอนการตั้งค่าเพิ่มขึ้นอีกสองแถวด้านล่าง และ
สัญลักษณ์จะเปลี่ยนเป็นรูป  ซึ่งถ้าคลิกที่สัญลักษณ์นี้อีกครั้งก็จะเป็นการซ่อนไอคอนให้เหลือแค่สอง
แถวบนตามเดิม
ปรับความกว้างของรูปภาพ
ใส่ชื่อของรูปภาพ แสดงที่เก็บไฟล์รูป
ใส่ข้อความกากับรูป
จัดตาแหน่งการวางภาพ
ปรับความสูงของรูปภาพ
ใช้กาหนดการเชื่อมโยงภาพไปยังข้อมูลหรือเว็บไซต์อื่น
กาหนดความหนาของเส้นขอบภาพ
กาหนดตาแหน่งของภาพในหน้าเว็บ

23. 58
การจัดวางตาแหน่งรูปภาพ
เมื่อเราทาการแทรกรูปภาพและกาหนดขนาดที่พอใจแล้ว และถ้าต้องการจัดวางในตาแหน่งต่าง ๆ
บนเว็บเพจ รวมทั้งการจัดวางร่วมกับข้อความดังต่อไปนี้
- Default วางบนขอบล่าง หรือเป็นไปตามค่าปกติของโปรแกรม
เว็บบราวเซอร์ที่ผู้ชมใช้
- Baseline วางขอบล่างของภาพเสมอแนวขอบล่างของข้อความ
- Top วางขอบบนของภาพเสมอกับขอบบนที่สูงสุดของข้อความหรือ
ออบเจ็คอื่นที่อยู่ในบรรทัดนั้น
- Middle วางกึ่งกลางของภาพเสมอกับขอบล่างของข้อความบรรทัดนั้น
- TextTop วางขอบบนของภาพเสมอกับขอบบนของข้อความในบรรทัดนั้น
วางขอบบนของภาพ
- Absolute Middle วางกึ่งกลางของภาพเสมอกับกึ่งกลางของข้อความบรรทัดนั้น
- Absolute Bottom วางขอบล่างของภาพเสมอแนวขอบล่างของข้อความ รวมถึง ตัวอักษรที่มี
หางห้อย เช่น g ด้วย
- Left วางภาพไว้ทางขอบซ้าย และจัดข้อความไว้ทางขวาของภาพ
- Right วางภาพไว้ทางขอบขวา และจัดข้อความไว้ทางซ้ายของภาพ
ตัวอย่างการจัดวางตาแหน่งของรูปภาพร่วมกับข้อความ
Default
Default Baseline

24. 59
Middle
Top
TextTop
LeftAbsolute Bottom
Middl
e
Absolute
Right

25. 60
การใส่รูปภาพเป็นพื้นฉากหลัง
โดยปกติพื้นหลังเว็บเพจจะมีสีขาว แต่หากเราต้องการนาภาพสวย ๆ มาเป็นพื้นหลังเว็บเพจ หรือ
ต้องการเปลี่ยนสีขาวของพื้นหลังให้มีรูปโลโก้ต่าง ๆ ดังนี้
เลือกคาสั่ง Modify > Page Properties…
คลิกปุ่ม
เพื่อกาหนดรูปที่จะ
นามาใช้

26. 61
เลือกไฟล์ภาพพื้นหลัง
ที่จะนามาใช้
คลิกปุ่ม
คลิกปุ่ม
คลิกปุ่ม
เพื่อดูผลลัพธ์ก่อนแสดงผล
ที่หน้าจอ