การสร้า งหัว ข้อ เว็บ ไซต์           (Header)ด้ว ยโปรแกรม Photoshop CS5
หัว ข้อ เว็บ ไซต์ (Header)        หัว ข้อ เว็บ ไซต์ (Header) เป็น ส่ว นที่อยู่ด ้า นบนสุด ของหน้า เว็บ ไซต์ และเป็นส่ว นที...
หัว ข้อ เว็บ ไซต์ (Header)        หลัก การออกแบบ Header คือ              1. สี สดใสสวยงาม ควรเลือ กโทนสีเดีย วกับ หน้า Tem...
ตัว อย่า งหัว ข้อ เว็บ ไซต์ มหาวิทยาลัยรามคำาแหง (http://www.ru.ac.th โรงเรียนนายร้อยตำารวจ (http://        www.rpca.ac.th/)
ตัว อย่า งหัว ข้อ เว็บ ไซต์โรงเรียนราชประชาสมาสัย ฝ่ายมัธยม รัชดาภิเษกในพระบรมราชูปถัมภ์ (http://www.rpr.ac.th)       ครัว...
ตัว อย่า งหัว ข้อ เว็บ ไซต์       เว็บไซต์ครูชุลีกร พินธิระ(http://krudaojar.wordpress.com/)
การสร้า งหัว ข้อ เว็บ ไซต์ใ นโปรแกรม                       Joomlaมีข ั้น ตอนหลัก ๆ ดัง นี้       1. หา ตำา แหน่ง ชือ ขนาด ...
ขั้น ตอนที่ 1 หาตำา แหน่ง ชือ ขนาด และ                                ่     นามสกุล ของไฟล์ห ัว ข้อ                 เว็บ ไ...
ขั้น ตอนที่ 2 สร้า งภาพกราฟิก หัว ข้อ     เว็บ ไซต์ด ้ว ยโปรแกรม Photoshop1. เข้า โปรแกรม Photoshop แล้ว คลิก เมนู    File...
ขั้น ตอนที่ 3 นำำ ภำพกรำฟิก หัว ข้อ เว็บ ไซต์     ไปวำงแทนที่ไ ฟล์เ ดิม         เมือ เรำสร้ำ งภำพกรำฟิก หัว ข้อ           ...
Upcoming SlideShare
Loading in …5
×

การสร้างหัวข้อเว็บไซต์

1,222 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,222
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

การสร้างหัวข้อเว็บไซต์

  1. 1. การสร้า งหัว ข้อ เว็บ ไซต์ (Header)ด้ว ยโปรแกรม Photoshop CS5
  2. 2. หัว ข้อ เว็บ ไซต์ (Header) หัว ข้อ เว็บ ไซต์ (Header) เป็น ส่ว นที่อยู่ด ้า นบนสุด ของหน้า เว็บ ไซต์ และเป็นส่ว นที่ส ำา คัญ ที่ส ด ของหน้า เว็บ ไซต์ เพราะ ุเป็น ส่ว นที่ด ึง ดูด ผูช มให้ต ิด ตามเนือ หา ้ ้ภายในเว็บ ไซต์ มัก ใส่ภ าพกราฟิก เพื่อสร้า งความประทับ ใจให้ก ับ ผูเ ข้า มาเยี่ย ม ้ชมเว็บ ไซต์ ส่ว นใหญ่ ประกอบด้ว ย               -  โลโก้(Logo) เป็น สิง ที่เ ว็บ ไซต์ค วรมี เป็น ่ตัว แทนของ
  3. 3. หัว ข้อ เว็บ ไซต์ (Header) หลัก การออกแบบ Header คือ 1. สี สดใสสวยงาม ควรเลือ กโทนสีเดีย วกับ หน้า Template 2. ข้อ ความ โดดเด่น ชัด เจน สีส ันสวยงาม ควรเป็น ชื่อ หน่ว ยงานชื่อ เว็บ ไซต์ 3. รูป ภาพประกอบ สวยงาม ชัด เจนไม่ม ากเกิน ไป หรือ น้อ ยเกิน ไปควรเป็น รูป ภาพที่เกี่ย วข้อ งกับ เว็บ ไซต์เ รา
  4. 4. ตัว อย่า งหัว ข้อ เว็บ ไซต์ มหาวิทยาลัยรามคำาแหง (http://www.ru.ac.th โรงเรียนนายร้อยตำารวจ (http:// www.rpca.ac.th/)
  5. 5. ตัว อย่า งหัว ข้อ เว็บ ไซต์โรงเรียนราชประชาสมาสัย ฝ่ายมัธยม รัชดาภิเษกในพระบรมราชูปถัมภ์ (http://www.rpr.ac.th) ครัวบ้านพิม (http://pim.in.th/)
  6. 6. ตัว อย่า งหัว ข้อ เว็บ ไซต์ เว็บไซต์ครูชุลีกร พินธิระ(http://krudaojar.wordpress.com/)
  7. 7. การสร้า งหัว ข้อ เว็บ ไซต์ใ นโปรแกรม Joomlaมีข ั้น ตอนหลัก ๆ ดัง นี้ 1. หา ตำา แหน่ง ชือ ขนาด และนามสกุล ่ ของไฟล์ห ัว ข้อ เว็บ ไซต์ใ นโปรแกรม Joomla 2. สร้า งภาพกราฟิก หัว ข้อ เว็บ ไซต์ ด้ว ยโปรแกรม Photoshop CS5 3. นำา ภาพกราฟิก หัว ข้อ เว็บ ไซต์ไ ปวาง แทนที่ไ ฟล์เ ดิม
  8. 8. ขั้น ตอนที่ 1 หาตำา แหน่ง ชือ ขนาด และ ่ นามสกุล ของไฟล์ห ัว ข้อ เว็บ ไซต์ใ นโปรแกรม Joomla ปฏิบ ต ิด ัง นี้ ัเข้า ไปที่ D:appservwwwjoomlatemplate sbeez_20imagespersonal personal2.png
  9. 9. ขั้น ตอนที่ 2 สร้า งภาพกราฟิก หัว ข้อ เว็บ ไซต์ด ้ว ยโปรแกรม Photoshop1. เข้า โปรแกรม Photoshop แล้ว คลิก เมนู File>>New เริ่ม ต้น สร้า งงานใหม่2. คลิก เลือ กหน่ว ยวัด เป็น Pixels แล้ว พิม พ์ ขนาดภาพ กว้า ง (W) x สูง (H) (ขนาดของ Header จะขึ้น อยูก บ Template ่ ั ทีเ ลือ กใช้ แต่ล ะ Template ่ จะมีข นาดของ Header ทีแ ตกต่า งกัน ) ซึ่ง ่ ในบทเรีย นนีจ ะใช้ Template ชื่อ ้ Beez_20 ซึง ขนาดของ Header คือ กว้า ง ่ (W) 1060 x สูง (H) 288 pixels3. ความละเอีย ดภาพ คลิก เลือ ก pixels/inch
  10. 10. ขั้น ตอนที่ 3 นำำ ภำพกรำฟิก หัว ข้อ เว็บ ไซต์ ไปวำงแทนที่ไ ฟล์เ ดิม เมือ เรำสร้ำ งภำพกรำฟิก หัว ข้อ ่ เว็บ ไซต์ด ้ว ยโปรแกรม Photoshopเสร็จ เรีย บร้อ ยแล้ว ให้น ก เรีย น Save ไฟล์ ั ภำพ ชือ personal2.png แล้ว ่นำำ ไฟล์ไ ปวำงทับ ไฟล์เ ดิม ใน D:appservwwwjoomlatemplate sbeez_20imagespersonal personal2.png

×