Embed Size (px)
DESCRIPTION
Liverpool FC Fanpage
Citation preview
Theme: Liverpool
Nop Suksanguansri
ID: 511313382
Theme: Liverpool FC
ท่ีมาของการออกแบบ: เนื่องจากการเรียนในรายวิชา ARI3319 ได้มีการเรียนการ
สอนเกี่ยวกับการใช้งานโปรแกรม Word Press Thai จึงได้ศึกษาเรียนรู้ และลองใช้
งานเพื่อให้เข้าใจถึงการสร้างและโครงสร้างของเว็บไซต์ จึงเกิดโครงการการออกแบบ
Theme นี้ขึ้นมา ซึ่งจะเป็นเรื่องราวเกี่ยวกับทีมฟุตบอลทีมโปรดของผม นั่นคือทีม
Liverpool FC นั่นเองโจทยแ์ละวตัถปุระสงค:์ เพื่อเรียนรู้การจัดการกับ WordPressThai3.3.2 และ
เพื่อฝึกฝนการออกแบบเว็บไซต์โปรแกรมท่ีใช้งาน: Adobe Photoshop, WordPressThai3.3.2
1. เปิด WordPressThai3.3.2Portable-Academy-Version แล้วดับเบิ้ลคลิกที่ usbwebserver.exe เพื่อเปิดใช้งานโปรแกรม
2. จากนั้นจะขึ้นหน้าต่าง USBWebserver 8.0 ให้คลิกที่ Localhost เพื่อเข้าสู่หน้าจอการจัดการเว็บไซต์
3. เมื่อเข้ามาที่หน้าหลักแล้วให้ท าการ Login เข้าสู่ระบบ
4. จากนั้นให้เข้าไปที่ “ศูนย์จัดการระบบ” เพื่อท าการตกแต่ง โดยจะเปลี่ยน theme
เป็น pagelines ดาวน์โหลดมาจาก http://wordpress.org/extend/themes
ดาวน์โหลดไฟล์จากเว็บไซต์แล้วเอาไฟล์ที่ได้ไปวางที่ path: \wordpressthaiedition
\wp-content\themes ดังรูป
5. จากนั้นให้ refresh browser แล้วคลิกที่ “รูปลักษณ์หน้าเว็บ” ก็จะเห็น theme ที่
ได้ท าการดาวน์โหลดมาลงเพิ่ม ดังรูป
5. เปลี่ยนชื่อเว็บไซต์ โดยเข้าไปที่ "การตั้งค่าระบบ" -> "การตั้งค่าทั่วไป"
จากนั้นก็ท าการเปลี่ยนชื่อเว็บไซต์และค าอธิบายบล็อก ดังรูป
6. เปลี่ยน logo โดยการเอาไฟล์ภาพที่ต้องการใช้เป็น logo โดยเปลี่ยนชื่อให้เป็น
logo.png แล้วเอาไปวางแทนที่ไฟล์เดิมที่ path:\wordpressthaiedition
\wp-content\themes\pagelines\images ดังรูป
7. ท าการจัดการกับสีของตัวอักษร โดยคลิกที่ เข้าไปที่ PageLines -> Site
Options -> Color Control ดังรูป
8. จากนั้นเปลี่ยน background โดยเลื่อนลงมาก าหนดค่า background ดังรูป
9. ท าการแก้ไขเนื้อหาบล็อกโดยเข้าไปที่ “เนื้อหาล็อก” จากนั้นระบบจะแสดงเนื้อหา
ทั้งหมดที่มีอยู่ ซึ่งสามารถคลิกเพื่อลบหรือแก้ไขเนื้อหาที่มีอยู่แล้ว ดังรูป หรือหาก
ต้องการสร้างใหม่ ให้คลิกที่ “สร้างเนื้อหา:
เรื่องที่จะส่งใหม่”
10. เมื่อท าการแก้ไขเสร็จแล้วให้คลิกที่ปุ่ม “ปรับปรุงใหม”่ หรือหากต้องการจะดู
ตัวอย่างหน้าที่ได้ท าการแก้ไขไปแล้วก็ให้คลิกที่ปุ่ม “ดูการดูเปลี่ยนแปลง” ดังรูป
11. ท าการสร้างและแก้ไขหน้า โดยเข้าไปที่ “เมน-ูเนื้อหาหลัก” ระบบจะแสดง หัวข้อ:เมน:ูหมวดรายการหลัก ทั้งหมดที่มีอยู่ วิธีการสร้างและแก้ไขก็เหมือนกับ “เนื้อหา
บล็อก” ดังรูป
12. ท าการเพิ่มหน้าและเมนูใหม่ ซึ่งในที่นี้จะยกตัวอย่างหน้า “Gallery” โดยคลิก
“สร้างหัวข้อเมนู-หมวดรายการหลัก” แล้วใส่ชื่อหัวข้อเป็น Gallery จากนั้นตรงส่วน
ของรายละเอียดจะเป็นการใส่รูปต่างๆ ซึ่งจะใช้ code html ในส่วนของตารางมาเป็น
ตัวช่วยในการจัดการให้รูปภาพสามารถแสดงได้อย่างเป็นระเบียบมาขึ้น โดยใส่
<table><tr><td></td></tr></table> ลงไปในส่วนของรายละเอียด จากนั้นให้คลิกที่
ปุ่ม ตรงส่วนของ “แทรกสื่อ” เพื่อน าไฟล์รูปมาแสดง ดังรูป ท าเช่นนี้ไปเรื่อยๆ
จนกว่าจะใส่รูปครบตามที่ต้องการ
12.1) เลือกไฟล์รูปที่ต้องการ จากน้ันรอจนกระทั่งระบบน าไฟล์รูปเข้าสู่ระบบเสร็จ
12.2) เมื่อเสร็จแล้วก็สามารถแก้ไขรายเอียดหรือข้อมูลต่างๆเกี่ยวไฟล์รูปได้อีกด้วย
จากนั้นคลิกที่ปุ่ม “แทรกเข้าในเนื้อหา” ได้เลย ถ้ารายละเอียดของรูปไหนไม่
แสดงก็ให้คลิกที่ “แสดง” ดังรูป
12.3) เมื่อคลิกแทรกแล้วจะแสดง code ดังรูป
13. หลังจากสร้างหน้าจนครบแล้วก็จะท าการสร้าง/แก้ไข/จัดการ Widgets โดย
เข้าไปที่ “รูปลักษณ์หน้าเว็บ” -> “บล็อกเมนูข้าง:Widgets” ดังรูป
จากการออกแบบสามารถสรุปได้ว่าจะให้ Theme เป็นสีด าเนื่องจากทีมลิเวอรพ์ลู
มี Logo เป็นสีแดง เพื่อให้ตัดกัน และจะท าให้ดูไม่จืดเกินไป และที่สร้างเป็นประวัติ
และ Gallery เพื่อให้รู้ถึงประวัติความเป็นมาของทีมลเิวอรพ์ลู อีกทั้งยังมีรูปภาพต่างๆไม่ว่าจะเป็นผู้เล่นในทีม อีกทั้งยังมีกิริยาท่าทางต่างๆ อีกด้วย
เนื่องจากเป็นการสร้างเว็บไซต์ด้วย Word Press Thai เป็นครั้งแรกจึงท าให้ใช้เวลาในการสร้างนาน และต้องลองผิดลองถูกก่อน ท าให้ไม่สามารถสร้างได้อย่างเต็มที่
เท่าไหร่นัก
ชื่อ: นายนพ สุขสงวนศรี
รหัสนักศึกษา: 5111313382
Email: [email protected]
Blogger: http://nop-arti3319.blogspot.com/
Wordpress: http://noparti3319.wordpress.com/
