วิชาเทคโนโลยีเพ่ือการออกแบบนิเทศศิลป กลุม 102 ARTI3319

การนําเสนอ การออกแบเว็บไซต โดย wordpress Thai

นาย ยุทธนา สีสรอย รหัสนักศึกษา 5111313432 Email: yuthana5111@gmail.com

http://yuthana51.wordpress.com/ Website : https://sites.google.com/site/yuthanaarti3319/

ที่มาของการออกแบบ : วิชาการเทคโนโลยีเพื่อการออกแบบนิเทศศิลป ARTI3319โดย ผศ.ประชิด ทิณบุตร ไดฝกสอนและไดความรูเกี่ยวกับ การทําเวบ็ไซต โดยออกแบบเว็บไซต wordpress เว็ปเซฟเวอรขนาดพกพาท่ีเราจะสามารถจัดการทําบล็อคของเราไดในรูปแบบ offline การทํางานและจัดการตางๆสามารถทําไดไมวาจะอยูที่ไหนกต็ามเพยีงมีแค FlashDrive อยางนอยประมาณขนาด 1 GB ก็ เพียงพอ และรวมถึงรูปตางๆ ไมวาจะเปนรูปเฮดเดอร รูปพื้นหลัง ฯลฯ ที่เราไดออกแบบไว เรียกไดวาเปน WordPress แบบ Offline หรือ เซฟเวอร ขนาดพกพานัน่เอง โจทย และวัตถุประสงค : 1.เพื่อใหรูจกัข้ันตอนการทํา wordpess thai 2.เพื่อศึกษาการใสโคตของโปรแกรม wordpess thai 3.เพื่อศึกษาการทํางานและวธีิทําบล็อก wordpess thai 4.เพื่อฝกฝนในการออกแบบเว็ปไซต ขั้นตอนการปฏิบัตงิาน วิธีใชงานเบ้ืองตน

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

ปุม Root dir กรอบสีแดง

เปดโฟลเดอรชื่อของแตละเว็บไซตหรือช่ือโปรแกรมเวบ็สําเร็จรูปท่ีใชจัดการเนื้อหาเว็บไซต

ปุม Localhost กรอบสีเหลือง

เชาสูตําแหนงที่อยูหรือช่ือ URL อันเปนหนาแรกของเครื่องแมขายบริการหลักท่ีเปดบริการใหเขาถึงได

ทาง อินเตอรเน็ตผานชองทางหรือพอรทหมายเลข8080(Port:8080)โดยแสดง ชื่อในเว็บ บราวเซอร

คือ http://localhost:8080

2.เม่ือกดปุม Localhost จะเขาสูหนาเว็ปไซตของ USBWebserver : WordPressThai Edition และกดลิ้งท่ี

แสดงไวในกรอบสีแดงดานลางเพื่อเชาสูการจัดการเว็ปไซตของ WordPress

.3.จะเขาสูหนาจอ Log in เขาสูระบบโดยการใส User name คือ admin และ Password คือ admin

เชนเดยีวกัน

4.เขาสูหนาจอการจัดการระบบของ USBWordPress การจัดการบล็อคของเราทําเหมือนกับ WordPress

Online เพียงแตการออกแบบธีมการลงรูป Header สวนหัว การลงรูปพื้นหลังหรือรูปตางๆของเรานั้น

5.จากนั้นทําการสรางสรรคการออกแบบ โดยการออกแบบสวนหวัของหนาเว็บไซต จากโปรแกรมท่ีถนัด

(ในท่ีนี้จัดทําจากโปรแกรม PhotoshopCs3)

6.ใสสวนหวัของหนาเว็บใซตโดยการปรับเปล่ียนโคด ใน style

(ในท่ีนี้คือ .home{ background:#000000url(images/yuthana.png top no-repeat;)

7.ปรับ แกโคดท่ีคนหา เนื่องจากสีพื้นหลังนั้นไมเขากันกบัธีม สังเกตุไดวาจากเดิมนัน้เปนสีแดง ไดปรับ

เปล่ียนเปนสีดาํพรอมจัดทํา icon search

จากแบบเดิม search จะมี bg เปนสีแดง หรือรหัสสีเดิม คือ #000000

โคดดังนี้ :

background:#000000; width:180px; border:1px solid #2c2c2c;

8. ปรับแกสี สวนแถบเมนูดานขาง จากรหสัสี #8f1b32 แกไขใหตรงกับธีมเปน #4d4d4d

9.ภาพนี้คือการปรับแกหนาเว็บท่ีสําเร็จบางสวนแลว

10. เนื้อหาหนาเว็ป

The Kooks แนวดนตรี: เปนแนวดนตรี Indie Rock งั้นผมจะมาขยายความตาม Myspace ของวงนี้ที่แจงไว

วา เปนแนว Alternative, Indie และ Reggae ไอแนวสุดทายนะ เทาท่ีฟงมีผสมอยูประปรายนะ ไมมากมาย

เทาไหร เนนๆ ก็ Indie Rock ที่มีความเปน Pop ผสมผสานลงไป ทําใหฟงงายข้ึนเยอะเลย

ท่ีมาของวง: ทั้ง 4 คน (กอนเปล่ียนมือเบส) เรียนอยูที่ Brighton Institute of Modern Music ดวยกนันะ

(อยากมีสถาบันดนตรีแบบนีใ้นเมืองสารขัณฑของเราจังเลย)พบปะเจอกัน มีความเหน็ตรง กันวาอยากโฟร

ซัม เอย! ตั้งวงดนตรีข้ึนมาเลยถือกําเนิดข้ึนมา พรอมกับเอาช่ือเพลงของ David Bowie มาต้ังเปนชื่อวง และก็

เร่ิมท่ีการทํา EP เผยแพรกอน เผยแพรไมทันไร ฝมือเตะแสกหนาแมวมอง เลยไดเซ็นสัญญาเขาคาย

11. หนาเว็บท่ีเสร็จสมบูรณประกอบดวย

หนาเว็บหลัก HOME :

12. มิวสิควิดีโอ วง THE KOOKS

13. หนาประวตัิและขอมูลเนือ้หา

สรุปผลการออกแบบ

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

ทั้งหมดนี้คือ เนื้อหาข้ันตอนการสรางงานเวิรดเพรสเว็บบล็อก โดยนาย ยุทธนา สีสรอย

หากขอมูลสวนนี้มีขอผิดพลาดประการใด ขออภัย ณ.ทีน่ีด้วยครับ ขอบคุณครับ

คํานํา โครงงานการออกแบบบล็อก wordpress Thai จัดทําข้ึนเพื่อเผยแพร ประวัติ วงดนตรี THE KooKsและวิธีการทํา wordpress Thaiสามารถนําวิธีทําบล็อกไปทําบล็อกของตัวเองได นําเสนอเปนบล็อก และในรายงานเลมนีส้ามารถที่จะใหความรูผูท่ีสนใจไดศึกษา ซ่ึงอาจเปนเนือ้ท่ีใหความรูไมมากก็นอยหากผิดพลาดประการใด ขออภัยไว ณ.ท่ีนีด้วย

ผูจัดทํา นาย ยุทธนา สีสรอย

สารบัญ เร่ือง หนา

เร่ือง การออกแบบ wordpress Thai วิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป 1

ท่ีมาของการออกแบบ 2 แนวความคิด (Design Brief) 2 แนวคิดในการต้ังช่ือเร่ือง 2 โจทย และวัตถุประสงค 2 ข้ันตอนการปฏิบัติงาน 3

MOOD BOARO 4

สรุปผลการออกแบบ 5 ส่ิงท่ีไดรับในการออกแบบ 5 ส่ิงท่ีไดรับในการออกแบบ 5