วิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป ARTI3319 กลุม 102 การนําเสนอ การออกแบเว็บไซต โดย 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 วิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป ที่มาของการออกแบบ แนวความคิด (Design Brief) แนวคิดในการตั้งชื่อเรื่อง โจทย และวัตถุประสงค ขั้นตอนการปฏิบัติงาน
หนา
1 2 2 2 2 3
MOOD BOARO
4
สรุปผลการออกแบบ สิ่งที่ไดรับในการออกแบบ สิ่งที่ไดรับในการออกแบบ
5 5 5