การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

1

การใส่รูปภาพในหน้าเว็บ (ไฟล ์100.html ถึง 107.html)

1. เปิดภาพต้นแบบไฟล์ Photoshop (*.PSD) ได้แก่ ไฟล์ s250x200.psd (รูปภาพขนาด 250 x 200 pixels) 2. คลิก มาคลิกที่ภาพต้นแบบไฟล์ Photoshop และคลิกที่แถบ Layers 3. คลิก Paths หมายเลข 1 คลิกเมาส์ขวาหมายเลข 2 เลือกค าสั่งหมายเลข 3 และ 4 ตามล าดับ

ภาพที่ 4.1 ภาพที่ 4.2

ภาพที่ 4.3 2.22555221111.65

ภาพที่ 4.4

3. คลิกที่ Shape2 . เกิดแถบสีน าเงิน

1. คลิกที่แถบ Layers

ภาพที่ 4.5 2.22555221111.65

ภาพที่ 4.6

2. คลิกเอารูป ออก22555221111.65

คลิกเมาส์ขวา

| การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) | Update 8/07/2563

| การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) | | << ด้านบน >> |

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

2

4. เกิดกรอบเส้นประที่ล้อมรอบที่ขอบภาพ 5. เลือกเปิดภาพใหม่ที่ต้องการจะใส่ในภาพที ่1 6. ใช้ค าสั่งจากแถบเมนู Image–Image size ย่อขนาดภาพกวา้ง (Width) ไม่เกิน 620 pixels ก าหนดขนาดดา้นกวา้งอย่างเดียว ส่วนความสูงจะก าหนดให้โดยอัตโนมัต ิ(ย่อให้มีขนาดใหญ่กว่าภาพตน้แบบไฟล์ Photoshop เล็กน้อย)

7. กดแป้น Ctrl ค้างไว้ และกดแป้น A C ตามล าดับ (การกดแป้น Ctrl+A จะปรากฏเส้นประล้อมรอบภาพ และกดแปน้ Ctrl+C เพื่อคัดลอกภาพ)

ภาพที่ 4.9 ภาพที่ 4.10

ภาพที่ 4.7 ภาพที่ 4.8

ภาพที่ 4.11

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

3

8. คลิกเมาส์ ที่ภาพตน้แบบ Photoshop ในขณะที่มีกรอบเส้นประ และใช้ค าสั่ง จากแถบเมนู Edit-Paste Into เพื่อวางภาพภายในกรอบเสน้ประ (หากไม่มีเส้นประ ให้ย้อยกลับไปท าในขั นตอนภาพที่ 3-7) 9. กดแป้น Ctrl+T พร้อมกับกดแป้น Shift ค้างไว้พร้อมน าเคอร์เซอร์ลากทแยงมุม ปรับลดภาพให้เหมาะสม แล้วกดแป้น Enter คลกิ เลื่อนภาพอยู่ในต าแหน่งเหมาะสม

10. การท าบันทึก หรือ Save ไฟล์เก็บต้นฉบบัชิ้นงาน (แบบ Photoshop *.PSD ไฟล์แบบนี สามารถปรบัปรุงแก้ไขได)้ ใช้ค าสั่งจากแถบเมนู File – Save หรือกดแป้น Ctrl+S 11. บันทึกภาพเก็บในไซต์ที่ท างาน ใช้ค าสั่ง File–Save for Web & Devices ตามล าดบัหมายเลขสัญลักษณ ์น าไปไว้ในโฟลเดอร์ย่อย 100 หรือโฟลเดอร์ย่อยในไซต์ที่ท างาน (ตามขั นตอนหนา้ 54-55)

ภาพที่ 4.13 ภาพที่ 4.12 2.22555221111.65

ได้ Layers ที่เพ่ิมใหม่(Layers ก าลังท างานอยู่)

ภาพท่ี 4.15 2.22555221111.65

ภาพที่ 4.14 2.22555221111.65

Ctrl+D ค าสั่งยกเลิกเส้นประ

ภาพที่ 4.17 2.22555221111.65

ภาพที่ 4.16 2.22555221111.65

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

4

2. คลิก

แฟม้รูปภาพที่บนัทัก (Save) จะปรากฏอยู่ในโฟลเดอร์ย่อย 100 ชื่อ 101.jpg ดังภาพ

ข้อควรระวัง ไฟล์รูปภาพที่ Save จะต้องอยู่ในไซต์ที่ท างานเสมอ หากไม่พบไฟล์ที่ Save ให้กลับไป ท าการ Save รูปภาพใหม่

การใส่รูปภาพในหน้าเว็บ

ภาพท่ี 4.18 2.22555221111.65

ภาพท่ี 4.19 2.22555221111.65

1.คลิก

2. ปรากฏชื่อไฟล์ที่ Save

Save แบบภาพเดยีวให้เลือกชนิดไฟล์แบบ jpg หรือ gif

1. วางเคอร์เซอร์หน้าบรรทัด

3. ใส่ค่าตามตาราง

ภาพสีเหลี่ยม ใส่ค่า 5 ดังภาพ ส่วน ภาพมุมโค้ง ใช้ก าหนด ค่า 2 แทนเลข 5

ภาพท่ี 4.20 2.22555221111.65 | การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) |

| << ด้านบน >> |

หน้าต่างโปรแกรม Dreamweaver

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

5

การใส่รูปภาพ เร่ิมต้นน าเมาสไ์ปคลิกไฟล์ภาพที่จะใส่ 101.jpg (หมายเลข 1) คลิกเมาส์ค้างไว้และลากไปยังภายกรอบตารางที่แทรกไวก้่อนหน้านี และปล่อยเมาส์ (หมายเลข 2) คลิกปุ่ม OK (หมายเลข 3) ดังภาพ

การจัดต าแหน่งรูปภาพ (ซ้ายหรือขวาข้อความ) คลิกที่ขอบของตาราง (หมายเลข 1) คลิกที่ ช่อง Align (หมายเลข 2) เลือกต าแหน่งของภาพด้าน ซ้าย (Left) กลาง (center) และ ขวา (Right) ปรากฏผล ดังภาพ

บันทึก ใช้ค าสั่ง Ctrl+S จากนั นให้กลับย้อนไปท าในขั นตอนข้างต้น เพื่อใส่ภาพในหน้าเว็บ ให้ครบ 2-3 ภาพต่อหน้าเว็บ

ภาพท่ี 4.22 2.22555221111.65

ภาพที่ 4.23 2.22555221111.65

ภาพท่ี 4.21 2.22555221111.65

1.คลิกเมาส์ทีข่อบมุมตาราง

2. เลือก Left หรือ Right

| การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) | | << ด้านบน >> |

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

6

2. แทรกตารางและวางภาพต่อไป ปฏิบัติตามขั นตอนข้างต้น และจะไดภ้าพ 2 ภาพ ดังภาพ

โดยสรุป การใส่รูปภาพหน้าเว็บเพจต้องมีการเตรียมรูปภาพให้มีขนาดเหมาะสมกับการแสดงผลบนโปรแกรมเว็บบราวเซอร์ การใส่รูปภาพต้องท าการแทรกตารางก่อนและใส่รูปภาพในตารางนั นต่อไป

1. น าเมาส์วางเคอร์เซอรห์น้าข้อความ ให้มีระยะห่างจากภาพแรก ประมาณ 6-8 บรรทัด

ภาพที่ 4.25 2.22555221111.65

ภาพที่ 4.24 2.22555221111.65

การใส่ภาพ (ภาพที่ 2)

| การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) | | << ด้านบน >> |

การใส่รูปภาพในหน้าเว็บ ชัยมงคล เทพวงษ ์โรงเรยีนนวมินทราชูทิศ มัชฌิม

7

สร้างภาพต่อไป ตามขั นตอนตั งแต่ภาพที่ 4.3 คลิกตามเลข 1, 2, 3 และย้อนกลับไปท าต่อใน ขั้นตอนข้อที่ 2 ตั้งแต่ภาพที่ 4.3 (หน้าที่ 1)

การจัดข้อความ (เว้นวรรค) หรือย่อหน้า

การเพิ่มจ านวนช่องว่างหรือย่อหน้าให้ กดแป้น Ctrl+Shift ค้างไว้ พร้อมเคาะแป้น Space Bar เพราะค่าเร่ิมของโปรแกรมไม่สามารถเคาะแป้นเว้นวรรคมากกว่า 1 ครั ง แก้โดยการปฏิบัติตามขั นตอน ในหนังสือเรียนภาพที่ 1.1 (หน้า 1)

สัญลักษณ ์ ไม่แสดง ให้ไปตั งคา่ของโปรแกรมตามหนังสือภาพที่ 1.4 (หน้าที่ 1)

ภาพที่ 4.27 2.22555221111.65

1. กดแป้น Ctrl+Shift ค้างไว้พร้อมเคาะแป้น Space Bar 10 ครั ง

2. กดแป้น Ctrl+Shift ค้างไว้พร้อมกดแป้นลูกศรท าแถบสดี า กดแปน้ Ctrl+C

3. วางเคอร์เซอร์ตรงต าแหน่งที่จะวางช่องว่าง กดแป้น Ctrl+V

4. เกิดช่องวางหน้าหัวข้อ 2

6. เคอร์เซอรเ์ลื่อนมาหน้าหัวข้อ 3

5. กดแป้นลูกศรลง และกดแป้น Home

ภาพท่ี 4.26 2.22555221111.65

2. คลิกเอารูป หน้าภาพท่ี Save เสร็จแล้วออก

3. คลิกที่ Shape2 เกิดแถบสีน าเงนิ

1. คลิกที่แถบ Layers

| การใส่รูปภาพหน้าเวบ็ | ใส่รูปภาพที่ 2-3 | การจัดต าแหน่งรูปภาพ | การจัดข้อความ (เว้นวรรค) | | << ด้านบน >> |

(ในหน้าต่างโปรแกรม Dreamweaver)