Page 1

FINAL PROJECT Theme Design and Customization for Wordpress Thai Edition:Wordpress Thai Acedemy เรื่อง การออกแบบปรับแต่งชุดรูปแบบกราฟฟิกสำหรับโปรแกรมระบบล็อกเวิร์ดเพรส ไทยอิดิชั่น:ชุดเวิร์ดเพรสไทย อคาเดมี่

โดย นายนรวิชญ์ วิชัยดิษฐ รหัสนักศึกษา 4821302031 กลุ่มเรียน 102 e-mail: noravit48@gmail.com

เสนอ ผศ. ประชิด ทิณบุตร

รายงานนี้เป็นส่วนหนึ่งของวิชาวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ รหัสวิชา ARTI 3319 วันที่ส่ง 21 กุมภาพันธ์ 2544 เวลา 14:00 น.


คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยราชภัฎจันทรเกษม

FINAL PROJECT Theme Design and Customization for Wordpress Thai Edition:Wordpress Thai Acedemy เรื่อง การออกแบบปรับแต่งชุดรูปแบบกราฟฟิกสำหรับโปรแกรมระบบล็อกเวิร์ดเพรส ไทยอิดิชั่น:ชุดเวิร์ดเพรสไทย อคาเดมี่

โดย นายนรวิชญ์ วิชัยดิษฐ รหัสนักศึกษา 4821302031 กลุ่มเรียน 102 e-mail: noravit48@gmail.com

เสนอ ผศ. ประชิด ทิณบุตร

รายงานนี้เป็นส่วนหนึ่งของวิชาวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ รหัสวิชา ARTI 3319 วันที่ส่ง 21 กุมภาพันธ์ 2544 เวลา 14:00 น. คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยราชภัฎจันทรเกษม


แนวคิดในการออกแบบ: ชื่อธีม: The Koi การออกแบบธีมนี้เลือกทำการดัดแปลงโดยใช้ธีม Twenty Ten เป็นต้นแบบในการแก้ไขส่วนต่างๆ โดยการออกแบบธีมนี้เป็นเรื่องราวเกี่ยวกับปลาคาร์ปซึ่งเป็นสัตว์เลี้ยงที่สวยงามและน่าสนใจ

โปรแกรมที่ใช้งาน: -Adobe Photoshop: ใช้ในการออกแบบ ตกแต่ง และสร้างสรรค์งานออกแบบส่วนหัว ฉากหลัง และในส่วนต่างๆ -WordPressThai3.0.4Portable:โปรแกรมระบบล็อกเวิร์ดเพลสไทยอิดิชั่น โดย ผศ.ประชิด ทิณบุตร -Notepad หรือ Dreamweaver: ใช้สาหรับแก้โค้ดรหัสต่างๆ

โจทย์ และวัตถุประสงค์: 1.เพื่อให้รู้จักขั้นตอนการทำ wordpess thai 2.เพื่อศึกษาการใส่โค้ตของโปรแกรม wordpess thai 3.เพื่อศึกษาการทำงานและวิธีทำบล็อก wordpess thai 4.เพื่อฝึกฝนด้านการออกแบบเว็ปไซต์

ขั้นตอนการปฏิบัติงาน 1.เปิดโปรแกรมระบบจำลองแม่ข่ายบริการเว็บไซต์แบบเคลื่อนที่WordPressThai3.0.4Porta ble-Acedemy-Version โดย ผศ.ประชิด ทิณบุตร ดับ เบิ้ลคลิกไฟล์ชื่อ usbwebserver.exe เพื่อเปิดระบบบริการฐานข้อ มูลก่อน เมื่อปรากฏหน้าต่างของระบบUSBWebserver 8.0 แล้วให้คลิกปุ่มคำสั่งต่างๆตามที่ท่านต้องการ ใช้งานหรือจัดการระบบ


ความหมายของปุ่มการทำงานแต่ละปุ่ม

-ปุ่ม

ใช้เปิดโฟลเดอร์ชื่อของแต่ละเว็บไซต์

หรือชื่อโปรแกรมเว็บสำเร็จรูปที่ใช้จัดการในส่วนของเนื้อ หาเว็บไซต์ -ปุ่ม

ใช้เข้าสู่ตำแหน่งที่อยู่หรือชื่อ URL ซึ่ง

เป็นหน้าแรกของเครื่องแม่ข่ายบริการหลักที่เปิดบริการให้ เข้าถึงได้ทางอินเตอร์เน็ตผ่านช่องทางหรือพอร์ทหมายเลข8080(Port:8080) โดยแสดงชื่อในเว็บบราวเซอร์ คือ http://localhost:8080

2.เมื่อกดปุ่ม Localhost จะเข้าสู้หน้าเว็ปไซต์ของ USBWebserver : WordPressThai Edition และกดลิ้งค์่สีแดงในกรอบสี่เหลี่ยมสีแดงที่แสดงดังภาพด้านล่างเพื่อเข้าสู่การจัดการเว็ปไซต์ ของ WordPress


3.เมื่อเข้าสู่หน้าจอ Log in ให้ทำการเข้าสู่ระบบโดยการใส่ชื่อสมาชิกคือ admin และรหัสผ่าน คือ admin เหมือนกัน

4.เข้าสู่หน้าจอการจัดการระบบของ UsbWordPress การจัดการบล็อคของเราทำเหมือนกับ


WordPress Online ซึ่งสามารถจัดการเปลี่ยนชุดแบบกราฟฟิกบล็อก

5.เมื่อคลื๊กแล้วจะเข้าสู่หน้าของการจัดการธีม จึงทำการเลือกธีมแม่แบบเพื่อทำการแก้ไขส่วน ต่างๆของไซต์ (ธีมต้นแบบ:Twenty Ten)


6.เมื่อเลือกธีมเสร็จเรียบร้อยจึงเริ่มออกแบบสร้างสรรค์ส่วนหัวของหน้าเว็บไซต์ตามขนาดของ ธีม ขั้นตอนการสร้างส่วนหัวของไซต์ 7.เปิดโปรแกรม Adobe Photoshop ขนาด 940x198 พิกเซล Resolution 72 เมื่อสร้างภาพ เสร็จให้เซฟเป็นไฟล์ jpeg ขนาดจริง1ชิ้น และเซฟเป็นขนาด230x48 สำหรับ thumbnail เพิ่มอีก 1ชิ้น หลังจากนั้นจึงนำไปเซฟที่WordPressThai3.0.4Portable-AcademyVersion\root\ wordpressthaiedition\wpcontent\themes\twentyten\images\headers(เวลาเซฟให้เซฟเป็นชื่อเดียวกับต้นฉบับเพื่อที่จ ะแทนที่ต้นฉบับ)

8.เมื่อเข้าระบบเพื่อเปลี่ยนส่วนหัวก็จะพบกับภาพที่สร้างขึ้น เลือกเพื่อเปลี่ยน


ขั้นตอนการสร้างพื้นหลัง 9.เปิดโปรแกรม Adobe Photoshop ขนาด 200x800พิกเซล Resolution 72 แล้วใช้คำสั่ง fade ทำให้ส่วนล่างจางลงเพื่อความกลมกลืนและเหมาะสมของหน้าเว็บไซต์เมื่อได้ภาพตามต้องการ จึงทำการเซฟแล้วกลับไปที่สีพื้นหลังในส่วนรูปลักษณ์หน้าเว็บ>สีพื้นหลัง>อัพโหลดภาพ>จัด ตำแหน่ง


การแก้โค้ด 10.สำหรับแก้รหัสต่างๆซึ่งสามารถใช้ Firebug ดูรหัสแล้วแก้ไขใน Notepad Dreamweaver ก็ได้ โดยเปิดโปรแกรมและเปิดไฟล์ชื่อ style ในโปรแกรม แล้วเปิดใช้งาน Firebug เพื่อที่จะดูรหัสของแต่ละส่วนเพียงนำcurser ไปไว้ตรงจุดตามวงกลมในภาพ แล้วสังเกตุรหัสด้านขวามือที่มีสีฟ้า style.css(line14. ซึ่งจะบอกรหัสสีในแต่ละ บรรทัดทำให้สามารถเข้าไปแก้ไขรหัสใน Notepad ง่าย ขึ้น โดยเข้า Notepad และไปที่ บรรทัดที่ 14 แล้วแก้รหัสสีตามต้องการ


หน้าเว็บที่ออกแบบธีมเรียบร้อยแล้ว

สรุปผลการออกแบบ: จากการออกแบบสามารถสรุปได้ว่าการออกแบบธีมครั้งนี้จะเน้นเป็นสีขาว ซึ่งทำให้ดู


สะอาด ไม่รกสายตา ภาพโดยรวมมีการใส่เนื้อหาทั่วไปเกี่ยวกับปลาคาร์ป

ปัญหาที่พบ: เนื่องจากการใช้งานนี้เป็นการใช้งานครั้งแรกจึงทำให้ไม่คุ้นเคยกับโปรแกรมจึงยังไม่สา มารถใช้งานได้อย่างเต็มที่ต้องใช้เวลาในการศึกษามากกว่านี้เพื่อที่จะทำให้งานมีประสิทธิภาพ มากขึ้น

โดย นายนรวิชญ์ วิชัยดิษฐ รหัสนักศึกษา 4821302031 E-mail: noravit48@gmail.com

Final Project  

Design Wordpress Theme

Read more
Read more
Similar to
Popular now
Just for you