เร่ืองที่ 3.5 การเตรียมรูปภาพและการใสรูปภาพ (การใสภาพแบบไมตองทำมุมโคง)

หลังจากพิมพและใสขอความในเว็บเพจเรียบรอยแลว ก็มาถึงข้ันตอนการใสรูปภาพในหนาเว็บเพจ และกอนนำรูปภาพมาวางในเวบ็เพจ จะตองมีการเตรียมรูปภาพใหอยูในลักษณะที่สามารถแสดงผลบนอินเทอรเน็ตได การเตรียมรูปภาพ 1) เปดโปรแกรม Photoshop และคลิกเมาสขวาที่ปุม Start เปด Open Window Explorer เลือกไฟลภาพที่ตองการ กดเมาสคางไวและลากไฟลภาพมาวาง (หรือยกค้ิวที่กดเมาส) ในหนาของโปรแกรม Photoshop

\

2) เมื่อเปดภาพไดแลว ใชคำสั่งจากแถบเมนู Image–Image size ยอหรือกำหนดขนาดความกวาง (Width) ไมเกิน 250-300 pixels หากขนาดเกินกวา 300 pixels ตองใชวิธีแบงซอยภาพ

3) การบันทึกรูปภาพ ใชคำสั่งจากแถบเมนู Save For Web กำหนดเลือก JPEG ขนาด Medium Quality 30 หรือ Save เปนสุกล GIF ก็ได

ภาพท่ี 3.25

ภาพท่ี 3.24

ภาพท่ี 3.26

ภาพท่ี 3.27

คลิกเมาสคางไว พรอมลากภาพมาวาง ที่หนาตางโปรแกรม Photoshop

| การเตรียมรูปภาพ | การ Save รูปภาพ | การแทรกตารางใสรูปภาพ | การใสภาพ (ภาพที่ 2) | | จัดตำแหนงภาพ | ปรับแตงเอกสาร | จัดขอความ (เวนวรรค) | Update 31/07/2563

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

46

Save For Web เปน JPEG ขนาด Medium Quality 30 หรือ Save For Web เปน GIF ตั้งชื่อไฟล เปนตัวเลข หรือภาษาอังกฤษตัวพิมพเล็กเทานัน้ หามตั้งชื่อเปนภาษาไทย (เพราะจะแสดงผลของภาพไมสมบูรณ)

เลือกไดรที่เก็บขอมูลเว็บไซต

1. บันทึกภาพไวในไซตที่ทำงาน 5203สมพร

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

ภาพท่ี 3.28

ภาพท่ี 3.29

ภาพท่ี 3.30

ภาพท่ี 3.31

ภาพท่ี 3.32

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

5203สมพร

2. คลิกกลอง 100

3. เลือกชนิดไฟล *.jpg

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

47

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

การแทรกตารางใสรูปภาพ

กอนใสรูปภาพในหนาเว็บตองทำการพิมพขอความหรือวางขอความ โดยที่ยังไมตองจดัเรียงขอความ ใหใสรูปภาพกอนแลวคอนจัดขอความที่หลัง การใสรูปภาพในหนาเว็บ มีวิธีการทำ ดังนี้ คือ 1. นำเมาสไปวางเคอรเซอร ในตำแหนงที่ตองการใสรูปภาพ คือ ใหวางในตำแหนงหนาขอความแรกในบรรทัดแรก (หามวางในบรรทัดหัวขอเร่ือง เพราะจะทำใหจัดขอความไมสมดุล ไมสวยงาม) 2. คลิกคำสั่ง เพื่อทำการแทรกตางราง ดังภาพ 3. ปรากฏกรอบโตตอบ Table ตั้งคาของตารางตามในรูป คาความกวาง (Table Width) ควรกำหนดใหนอยไวกอน พอแทรกวางรูปภาพจะขยายขนาดเทากับ รูปภาพโดยอัตโนมัต ิ 4. คลิกปุม OK (หมายเลข 4)

ภาพท่ี 3.33

ภาพท่ี 3.35

1.คลิก

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

ภาพเดียวให Save แบบ jpg หรือ gif

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

ภาพท่ี 3.34

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

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

48

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

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

ทำการบนัทึก กดแปน Ctrl+S และคลิกลูกโลก

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

ภาพท่ี 3.36

ภาพท่ี 3.37

ภาพท่ี 3.38

เลือกคลิกท่ีมุมขอบตาราง แตหามกดลากเมาส

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

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

49

การใสภาพ (ภาพท่ี 2) เมื่อคลิกลูกโลก หรือแสดงผลทางเว็บบราวเซอร จะปรากฏ ดังภาพ

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

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

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

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

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

50

เร่ืองที่ 3.6 การปรับแตงเอกสารเว็บเพจ

หลังจากเอกสารเว็บเพจไดพิมพหรือใสขอความ ทำการแทรกตารางและใสรูปภาพในตารางที่แทรก จัดตำแหนงการวางของรูปภาพวาจะวางในตำแหนง ซาย กลาง หรือ ขวาของหนาเว็บเพจ ก็มาถึง ข้ันตอน การปรับแตงเอกสารเว็บเพจพิมพขอความลงในหนาเวบ็เพจ มีลกัษณะคลาย ๆ กับการพิมพงานดวยโปรแกรมประมวลผลคำ (Microsoft Word) หรือโปรแกรมพิมพทั่วไป ซึง่สามารถสรุปหลักการพิมพ ไดดังนี้ 1. ใหพิมพงานกอน โดยไมตองสนใจเก่ียวกับแบบอักษร (Font), ขนาดของอักษร (Size) และลักษณะพิเศษ (Format, Style) 2. ใหใสชองวางระหวางคำเปนชวง ๆ (กดแปน Ctrl+Shift คางไว พรอมเคาะแปน Space Bar) เพื่อเวนวรรคตามความเหมาะสม เพื่อชวยในการตัดคำ เนื่องจาก โปรแกรมไมมีความสามารถ ดานการตัดคำอัตโนมัติ

3. ขอความใหพิมพไปเร่ือย ๆ ไมตองกดแปน Enter เมื่อถึงระยะขอบขวา เพราะโปรแกรมจะทำ การตัดคำข้ึนบรรทัดใหม ใหโดยอัตโนมัติ 4. การข้ึนยอหนาใหม ใหกดแปน Enter 5. การข้ึนหัวเร่ืองใหมหรือหัวขอใหม ใหกดแปน Enter 6. การข้ึนบรรทัดใหมโดยใหเนื้อความอยูในพารากราฟเดิม ใชการ กดแปน Shift คางไวพรอมกับ กดแปน Enter 7. การปรับแตงลักษณะตัวอักษร ใหใชเมาสลากทำแถบสีคลุมขอความที่ตองการ แลวเลือกลักษณะอักษรที่ตองการ จากปุมควบคุมในแถบ Properties

8. การจัดพารากราฟ เชน จัดชิดขอบซาย, จัดก่ึงกลาง และจัดชิดขอบขวา ใชปุม Alignment จากแถบ Properties

ภาพท่ี 3.39

ภาพท่ี 3.40

ภาพท่ี 3.41

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

การใสภาพแบบงาย (แบบไมตองทำมุมโคง) ชัยมงคล เทพวงษ โรงเรียนนวมินทราชูทิศ มัชฌิม

51

การจัดขอความ (เวนวรรค)

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

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

โดยสรุป การปรับแตงเอกสารเว็บเพจเปนจัดรูปแบบตัวอักษร การเวนวรรค การยอหนาใหเหมาะสมกับการแสดงผลบนโปรแกรมเว็บบราวเซอร

ภาพท่ี 3.42

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

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

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

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

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

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

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