1. การสร้า งหัว ข้อ เว็บ ไซต์
(Header)
ด้ว ยโปรแกรม Photoshop CS5

2. หัว ข้อ เว็บ ไซต์ (Header)
หัว ข้อ เว็บ ไซต์ (Header) เป็น ส่ว นที่
อยู่ด ้า นบนสุด ของหน้า เว็บ ไซต์ และเป็น
ส่ว นที่ส ำา คัญ ที่ส ด ของหน้า เว็บ ไซต์ เพราะ
ุ
เป็น ส่ว นที่ด ึง ดูด ผูช มให้ต ิด ตามเนือ หา
้ ้
ภายในเว็บ ไซต์ มัก ใส่ภ าพกราฟิก เพื่อ
สร้า งความประทับ ใจให้ก ับ ผูเ ข้า มาเยี่ย ม
้
ชมเว็บ ไซต์ ส่ว นใหญ่ ประกอบด้ว ย
- โลโก้
(Logo) เป็น สิง ที่เ ว็บ ไซต์ค วรมี เป็น
่
ตัว แทนของ

3. หัว ข้อ เว็บ ไซต์ (Header)
หลัก การออกแบบ Header คือ
1. สี สดใสสวยงาม ควรเลือ กโทนสี
เดีย วกับ หน้า Template
2. ข้อ ความ โดดเด่น ชัด เจน สีส ัน
สวยงาม ควรเป็น ชื่อ หน่ว ยงาน
ชื่อ เว็บ ไซต์
3. รูป ภาพประกอบ สวยงาม ชัด เจน
ไม่ม ากเกิน ไป หรือ น้อ ยเกิน ไปควรเป็น รูป ภาพที่
เกี่ย วข้อ งกับ เว็บ ไซต์เ รา

4. ตัว อย่า งหัว ข้อ เว็บ ไซต์
มหาวิทยาลัยรามคำาแหง (http://www.ru.ac.th
โรงเรียนนายร้อยตำารวจ (http://
www.rpca.ac.th/)

5. ตัว อย่า งหัว ข้อ เว็บ ไซต์
โรงเรียนราชประชาสมาสัย ฝ่ายมัธยม รัชดาภิเษก
ในพระบรมราชูปถัมภ์ (http://www.rpr.ac.th)
ครัวบ้านพิม (http://pim.in.th/)

6. ตัว อย่า งหัว ข้อ เว็บ ไซต์
เว็บไซต์ครูชุลีกร พินธิระ
(http://krudaojar.wordpress.com/)

7. การสร้า งหัว ข้อ เว็บ ไซต์ใ นโปรแกรม
Joomla
มีข ั้น ตอนหลัก ๆ ดัง นี้
1. หา ตำา แหน่ง ชือ ขนาด และนามสกุล
่
ของไฟล์ห ัว ข้อ เว็บ ไซต์ใ น
โปรแกรม Joomla
2. สร้า งภาพกราฟิก หัว ข้อ เว็บ ไซต์
ด้ว ยโปรแกรม Photoshop CS5
3. นำา ภาพกราฟิก หัว ข้อ เว็บ ไซต์ไ ปวาง
แทนที่ไ ฟล์เ ดิม

8. ขั้น ตอนที่ 1 หาตำา แหน่ง ชือ ขนาด และ
่
นามสกุล ของไฟล์ห ัว ข้อ
เว็บ ไซต์ใ นโปรแกรม Joomla
ปฏิบ ต ิด ัง นี้
ั
เข้า ไปที่
D:appservwwwjoomlatemplate
sbeez_20imagespersonal
personal2.png

9. ขั้น ตอนที่ 2 สร้า งภาพกราฟิก หัว ข้อ
เว็บ ไซต์ด ้ว ยโปรแกรม Photoshop
1. เข้า โปรแกรม Photoshop แล้ว คลิก เมนู
File>>New เริ่ม ต้น สร้า งงานใหม่
2. คลิก เลือ กหน่ว ยวัด เป็น Pixels แล้ว พิม พ์
ขนาดภาพ กว้า ง (W) x สูง (H)
(ขนาดของ Header จะขึ้น อยูก บ Template
่ ั
ทีเ ลือ กใช้ แต่ล ะ Template
่
จะมีข นาดของ Header ทีแ ตกต่า งกัน ) ซึ่ง
่
ในบทเรีย นนีจ ะใช้ Template ชื่อ
้
Beez_20 ซึง ขนาดของ Header คือ กว้า ง
่
(W) 1060 x สูง (H) 288 pixels
3. ความละเอีย ดภาพ คลิก เลือ ก pixels/inch

10. ขั้น ตอนที่ 3 นำำ ภำพกรำฟิก หัว ข้อ เว็บ ไซต์
ไปวำงแทนที่ไ ฟล์เ ดิม
เมือ เรำสร้ำ งภำพกรำฟิก หัว ข้อ
่
เว็บ ไซต์ด ้ว ยโปรแกรม Photoshop
เสร็จ เรีย บร้อ ยแล้ว ให้น ก เรีย น Save ไฟล์
ั
ภำพ ชือ personal2.png แล้ว
่
นำำ ไฟล์ไ ปวำงทับ ไฟล์เ ดิม ใน
D:appservwwwjoomlatemplate
sbeez_20imagespersonal
personal2.png