การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

85

การแก้ไขภาพขอบมุมโค้งและการใส่ภาพ (จากไฟล์ต้นแบบ Photoshop)

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

ภาพที่ 1 ภาพที่ 2

ภาพที่ 3 2.22555221111.65

ภาพที่ 4 2.22555221111.65

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

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

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

ภาพที่ 5 2.22555221111.65

ภาพที่ 6 2.22555221111.65

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

86

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

9. กดแป้น Ctrl+A เกิดเส้นประล้อมรอบภาพ และกดแปน้ Ctrl+C เพื่อคัดลอกภาพ

ภาพที่ 9 2.22555221111.65

ภาพท่ี 10 2.22555221111.65

ภาพที่ 7 2.22555221111.65

ภาพที่ 8 2.22555221111.65

ภาพที่ 11 2.22555221111.65

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

87

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

ภาพที่ 13 2.22555221111.65

ภาพที่ 12 2.22555221111.65

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

ภาพที่ 15 2.22555221111.65

ภาพที่ 14 2.22555221111.65

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

ภาพที่ 17 2.22555221111.65

ภาพที่ 16 2.22555221111.65

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

88

2. คลิก

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

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

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

ภาพท่ี 18 2.22555221111.65

ภาพท่ี 19 2.22555221111.65

1.คลิก

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

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

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

กรณีใช้ภาพมมุโค้ง ใช้ค่า 2 แทนเลข 5

ภาพท่ี 20 2.22555221111.65

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

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

89

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

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

ภาพท่ี 21 2.22555221111.65

ภาพท่ี 22 2.22555221111.65

ภาพที่ 23 2.22555221111.65

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

90

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

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

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

ภาพที่ 25 2.22555221111.65

ภาพที่ 24 2.22555221111.65

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

91

เรื่องที่ 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

ภาพที่ 26 11.65

ภาพที่ 27

ภาพที่ 28

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

92

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

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

โดยสรุป การปรับแต่งเอกสารเว็บเพจเป็นจัดรปูแบบตัวอักษร การเว้นวรรค การย่อหน้าให้เหมาะสมกับการแสดงผลบนโปรแกรมเว็บบราวเซอร์ สรุปแนวคิดการออกแบบและพัฒนาเว็บไซต ์ 1. ออกแบบผังโครงสร้างเว็บไซต์กอ่น (หน้าที่ 1) 2. ลงโปรแกรม และปรับตั งคา่ของโปรแกรม มีความส าคัญมาก ท าเพียงครั งเดียว คอมพิวเตอร์จะจ าไว้ตลอด (ดูการปรับตัง้ค่าในหน้าที่ 1-3) ถ้าลืมตั้งค่าจะท าให้เว็บไซต์ของนักเรียนเมื่อส่งข้อมูลขึ้นเครื่อง Server จะไม่แสดงผลเป็นภาษาไทย ท าให้นักเรียนตอ้งเสียเวลาท าใหม่ทั้งหมด เพราะแก้ไขไมไ่ด้ 3. ตั งไซต์ให้ถูกต้อง (หน้าที่ 5-9) 4. สร้างไฟล์เทมเพลต (ไฟล์แม่แบบ หรือ ไฟล์ dwt) (หน้า 9-41) 5. สร้างไฟล์เอกสารเว็บเพจ (ไฟลล์ูก หรือ ไฟล์ HTML) (หน้า 45-58) 5.1 แทรกตาราง 5.2 เรียกไฟล์เทมเพลต (dwt หรือ ไฟล์แม่แบบ) มาใส่หรือครอบไฟล์ลูก (HTML) 5.3 ได้หน้าเว็บตามที่ออกแบบไว ้ 6. ใส่ข้อมูลที่เป็นตัวอักษร และปรบัตัวอักษรให้ชิดด้านซ้ายมือเสมอ (หน้า 50–52) 7. เตรียมรูปภาพในโปรแกรม Photoshop (หน้า 53–55) 7.1 ออกแบบภาพตามต้องการ เชน่ ภาพแบนเนอร์ ภาพกราฟิกตา่ง ๆ ที่จะใช้

ภาพที่ 29 2.22555221111.65

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

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

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

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

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

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

การพัฒนาเว็บไซต์เพื่อจัดท าโครงงาน ชัยมงคล เทพวงษ ์ โรงเรียนนวมินทราชูทิศ มัชฌิม

93

7.2 ปรับขนาดภาพให้เหมาะสม 7.3 Save รูปภาพไปไว้ทีโ่ฟลเดอร์ย่อยในไซต์ที่ท างาน (เชน่ โฟลเดอร์ย่อย 100) 8. ใส่รูปภาพ (หน้า 55) 8.1 แทรกตารางบริเวณหน้าข้อความที่จะใส่รูปภาพ 8.2 ใส่รูปภาพ และปรับตารางที่ใส่รูปภาพให้อยู่ ด้านซา้ย / กลาง /ขวา ตามต้องการ 9. ปรับข้อความและรูปภาพให้สวยงามและเหมาะสม (หน้า 57-58) 9.1 ข้อความหรือตัวอักษรต้องปรับให้ชิดด้านซ้ายมือเสมอ 9.2 เว้นวรรคข้อความ โดยการกดแป้น Ctrl+Shift ค้างไว้ และกดแป้น Space Bar 9.3 ย่อหน้าข้อความประมาณ 8–10 ตัวอักษร (10 เคาะ) และย่อหน้าต่อไปให้ copy ช่องว่างจากย่อหน้าก่อน ไปวางในย่อหน้าต่อไป จะท าให้ได้ย่อหน้าที่มแีนวตรงกัน วิธีการ Copy ช่องว่าง 10 ตัวอักษร ท าได้ดังนี

กดแป้น Shift ค้างไว้พร้อมกดแป้นลูกศร เท่ากับจ านวนชอ่งว่าง กดแป้น Ctrl+C ค าสั่งลัด การคัดลอก ให้กดแป้น Ctrl+C (นิ วก้อยของมือซ้ายกดแป้น Ctrl ค้างไว้ พร้อมใช้นิ วชี ของมือขวากดแป้น C) และค าสั่ง Ctrl+V หมายถึง การวาง