Post on 09-Mar-2016
description
คำ�นำ�
รายงานเล่มนี้จัดทำาขึ้นเพื่ออธิบายหลักและขั้นตอนวิธีทำาWebThemeโดย
รายงานเล่มนี้เลือกใช้โปรแกรมของWordpressในการออกแบบThemeเพราะ
สะดวกและมีคนใช้อย่างแพร่หลายผู้จัดทำามีความหวังอย่างยิ่งว่าผู้อ่านจะได้
ประโยชน์จากรายงานเล่มนี้ไม่มากก็น้อยและหากผิดพลาดประการใดผู้จัดทำา
ขออภัยไว้ณที่นี้ด้วย
จิระพงษ์สมบูรณ์ทรัพย์
ผู้จัดทำา
ส�รบัญ
เรื่อง หน้า
ประวัติผู้จัดทำา 1
แนวคิดในการออกแบบ 2
โจทย์และวัตถุประสงค์ 2
โปรแกรมที่ใช้งาน 2
ขั้นตอนการออกแบบ2-7
สรุปผลการออกแบบและปัญหาที่พบ8
อ้างอิง9
1
นายจิระพงษ์สมบูรณ์ทรัพย์
รหัสนักศึกษา5111302211
สาขาวิชาศิลปกรรม(ออกแบบนิเทศศิลป์)
คณะมนุษยศาสตร์และสังคมศาสตร์
มหาวิทยาลัยราชภัฏจันทรเกษม
Tel:086-5652836
GoogleEmail:jirapong.js@gmail.com
Website
http://www.facebook.com/hazji
http://jirapongjs.wordpress.com
https://sites.google.com/site/jirapongarti3319/
2
แนวคิดในก�รออกแบบ :
ชื่อTheme:SneakerManiac
การออกแบบธีมนี้เลือกใช้ธีมที่มีสีเรียบง่ายเพื่อที่จะ
ไม่แย่งความเด่น
จากตัวเนื้อหาซึ่งเป็นรองเท้าที่มีสีฉุดฉาดเป็นส่วน
ใหญ่และใส่รองเท้าผ้าใบด้านข้างเพื่อจะได้มีความ
หลากหลายอีกด้วย
โจทย์ และวัตถุประสงค์ :
1.เพื่อเรียนรู้การจัดการกับ
WordPressThai3.0.4Portable
2.เพื่อฝึกฝนการออกแบบเว็บไซต์
โปรแกรมที่ใช้ง�น:AdobePhotoshop,
WordPressThai3.0.4Portable
3
ขั้นตอนก�รออกแบบ Wordpress Theme
1.เริ่มต้นการดาวน์โหลดดาวน์โหลดโปรแกรมติดตั้ง
เวิร์ดเพรสภาษาไทยฉบับอคาเดมี่เพื่อการศึกษาเรียนรู้
ของคนไทยเวอร์ชั่น3.0.4จากเว็บwordpressthai.org
เมื่อได้ไฟล์Zipให้ทำาการแตกไฟล์
4
2.เมื่อแตกไฟล์แล้วให้เปิดเข้าไปที่โฟลเดอร์เมื่อเข้าไป
แล้วให้คลิ๊กที่ตัวโปรแกรมจะขึ้นเป็นหน้าต่างตาม
นี้จากนั้นคลิ๊กเข้าไปที่Localhostเพื่อเข้าสู่หน้าเว็บจำาลอง
ส่วนRootdirคือส่วนที่เอาไว้สำาหรับเก็บไฟล์ต่างๆ
เมื่อทำาการอัพโหลด
3.เมื่อเข้าLocalhostแล้วจะได้หน้าต่างนี้ขึ้นมาให้คลิ๊กที่ลิ้ง
สีแดง
5
4.คลิ๊กเข้าสู่ระบบชื่อล็อกอินคือadminและรหัสadmin
5.เมื่อทำาการล็อกอินแล้วคลิ๊กเข้าไปจะปรากฎหน้าต่าง
ดังรูปจากนั้นเลือกธีมที่จะทำาการแก้ไข
6
6.เริ่มที่การสร้างส่วนหัสโดยใช้โปรแกรมAdobe
Photoshopขนาด940x198Resolution72เมื่อ
สร้างเสร็จแล้วให้เซฟเป็นไฟล์JPEGขนาดจริง1
อันและเซฟเป็นขนาด230x48อีก1อันโดยเซฟ
ไปที่wordpressthaiedition>wp-content>themes>
twentyten>images>headers(เวลาเซฟให้เซฟเป็นชื่อ
เดียวกับต้นฉบับเพื่อที่จะแทนที่ต้นฉบับ)
7
7.เมื่อเซฟเสร็จให้มาเปิดดูที่หน้าเว็บกดBrowse
เพื่อเรียกไฟล์ที่เราเซฟไว้แล้วกดส่งไฟล์
8.หากต้องการเปลี่ยนสีพื้นหลังให้กดที่สีพื้นหลังแล้ว
เลือกสีพื่นหลังหรือกดกดBrowseเพื่อเรียกไฟล์ที่
เราเซฟไว้แล้วกดส่งไฟล์หากต้องการใช้รูปเป็นพื้นหลัง
8
9.แก้ไขเมนูด้านข้างโดยกดที่บล็อกเมนู
ข้าง:Widgetsแล้วลากเมนูที่เราต้องการไปวางไว้
ที่แถบด้านขวาตามที่เราต้องการไม่ว่าจะเป็นแถบ
ด้านซ้ายหรือแถบด้านขวา
9
สรุปผลก�รออกแบบ
จากการออกแบบสมมารถสรุปได้ว่าการออก
แบบตีมในครั้งนี้เน้นสีขาวเป็นหลักเพื่อจะได้
มองดูสบายตาแต่เพื่อไม่ให้เรียบจนเกินไปจึง
ใส่รองเท้าผ้าใบหลากหลายสีไว้ด้านข้างของหน้า
เวป
ปัญห�ที่พบ
เนื้องจากผู้จัดทำาไม่มีความรู้เรื่องโค้ดในการ
เขียนเวปทำาให้การเปลี่ยนแปลงสีและรูปแบบ
มีอย่างจำากัดจึงควรศึกษาภาษาและโค้ดในการ
เขียนเวปเพิ่มเพื่อประสิทธิภาพในการบริหารเวป
ไซด์และจัดตีมต่อไป
10
อ้�งอิง
1.http://sneakermaniac.com/
2.http://www.wordpressthai.com/download-word-
press-thai-edition/