วิธีการ หัดออกแบบเว็บไซต์

ดาวน์โหลดบทความ

ดาวน์โหลดบทความ

ภายในบทความนี้:

รู้จักพื้นฐาน

เรียนรู้

ประยุกต์ใช้ความรู้ที่เรียนไป

บทความที่เกี่ยวข้อง

เดี๋ยวนี้ใครมีสกิลออกแบบเว็บไซต์ถือว่าโชคดีมีประโยชน์มาก เพราะเราอยู่ในโลกที่อะไรๆ ก็ขับเคลื่อนด้วยอินเทอร์เน็ตไปแทบจะทั้งหมด ยิ่งใครเป็นเซียนออกแบบเว็บไซต์ ก็ทำเป็นอาชีพ หารายได้งามๆ ได้เลย หรือกระทั่งสร้างเว็บไซต์สำหรับสมาชิก รวมถึงโปรเจ็คต์ทำเงินอื่นๆ ถ้าคุณเป็นคนหนึ่งที่สนใจอยากเรียนรู้วิธีออกแบบเว็บไซต์ วันนี้คุณก็มาถูกบทความแล้ว!

ขั้นตอน

ส่วน 1

ส่วน 1 ของ 3:

รู้จักพื้นฐาน

ดาวน์โหลดบทความ

1. 
   1
   การออกแบบเว็บไซต์นั้นแตกต่างจากการออกแบบอื่นๆ ยังไง. การออกแบบเว็บไซต์นั้นไม่เหมือนออกแบบหนังสือ และยิ่งไม่เหมือนการออกแบบโปสเตอร์ เพราะไม่ได้เน้นภาพประกอบสวยงามอย่างเดียว ถึงจะออกแบบทุกอย่างที่ว่ามาได้สวยโดดเด่น ก็ไม่ได้บรรลุจุดประสงค์การออกแบบเว็บไซต์ จริงอยู่ว่าเว็บไซต์เป็น delivery system นำเสนอเกมหรือวีดีโอต่างๆ ได้ แต่ถึง delivery system จะออกมาสวยงามน่ามองแค่ไหน ก็เป็นแค่ต้นแบบสำหรับการออกแบบเกม กับวีดีโอที่บอกเล่าเรื่องราวเท่านั้น ไม่ใช่การออกแบบเว็บไซต์
2. 
   2
   ออกแบบเว็บไซต์ต้องทำอะไรบ้าง. การออกแบบเว็บไซต์คือการสร้างสรรค์สิ่งแวดล้อมดิจิตอล (digital environments) ที่

   • อำนวยความสะดวกและสนับสนุนให้เกิดกิจกรรมต่างๆ ของคนเรา
   • สะท้อนหรือปรับตามความคิดเห็นและความพึงพอใจของแต่ละคน และ
   • เปลี่ยนแปลงไปตามเวลาในทางที่ดี แต่ก็รักษาเอกลักษณ์ไว้ด้วย
3. 
   3
   จะเรียนรู้จากแหล่งข้อมูลไหนบ้าง. หลักๆ ก็คือเว็บไซต์ วีดีโอ และหนังสือ เว็บดังๆ ที่คนนิยมเข้าไปศึกษาหาความรู้กันก็เช่น Codecademy หรือ W3Schools แต่เว็บดังๆ ดีๆ ก็ยังมีอีกเยอะ ต้องลองค้นหาแล้วศึกษาดู!

   • เจอเว็บที่ใช่แล้วให้ลงทะเบียน จะได้เซฟความคืบหน้าไว้ได้ ไม่ต้องเริ่มใหม่ทั้งหมด
   • ถ้าเลือกวีดีโอได้แล้ว ให้ bookmark วีดีโอที่จำเป็นทั้งหมดเก็บไว้
   • แวะไปห้องสมุดหรือหอสมุด ทั้งสาธารณะและของสถานศึกษา หรือร้านหนังสือใกล้บ้าน ถ้าอยากได้หนังสืออ้างอิง แต่ถ้างบน้อย (หรืออยากได้ของฟรี) ก็ดาวน์โหลด eBook หรือไฟล์ PDF มาอ่านซะเลย
   • ถ้ายินดีทุ่มทุนสร้าง ก็เข้าคอร์สตามโรงเรียนเฉพาะทาง หรือจ้างนักออกแบบเว็บไซต์เก่งๆ มาสอนตัวต่อตัวซะเลย
4. 
   4
   ต้องใช้เวลาเรียนรู้แค่ไหน. จะได้จัดตารางเวลาในแต่ละวัน สำหรับคนที่ภารกิจรัดตัว
5. 
   5
   ดาวน์โหลดโปรแกรมออกแบบเว็บไซต์ถ้ายังไม่มี. จริงๆ ใช้ Notepad ก็ได้ แต่จะดีกว่าถ้าใช้โปรแกรมอย่าง Adobe Dreamweaver, Microsoft Expression Web หรือ KompoZer นอกจากนี้ก็มีตัวเลือกอีกเยอะ ต้องค้นหาแล้วศึกษาเพิ่มเติมดู
   โฆษณา

ส่วน 2

ส่วน 2 ของ 3:

เรียนรู้

ดาวน์โหลดบทความ

1. 
   1
   หัดใช้ HTML. HTML ถือเป็นการศึกษาภาคบังคับของนักออกแบบเว็บไซต์ทุกคน เพราะงั้นต้องเรียนรู้และเข้าใจเรื่องแท็ก คลาส ID input และอื่นๆ

   • HTML เวอร์ชั่นล่าสุดคือ HTML5 ซึ่งมาพร้อมเทคโนโลยีใหม่ๆ แนะนำให้เรียนรู้จากเวอร์ชั่นนี้จะดีที่สุด
   • XHTML ก็เป็นอีกตัวเลือกที่น่าสนใจ แต่กฎต่างๆ จะเข้มกว่านิดหน่อย
2. 
   2
   หัดใช้ CSS. CSS ย่อมาจาก "Cascading Style Sheet" ถ้าไม่มี CSS หน้าตาเว็บไซต์ก็จะไม่ออกมาสวยงามน่าอ่านอย่างที่เห็น พูดให้เห็นภาพคือ HTML นั้นเปรียบเหมือนโครงกระดูก ส่วนเนื้อหนังสวยงามด้านนอกที่ทำให้เว็บตื่นตาตื่นใจ ก็คือ CSS นั่นเอง

   • CSS จะเคร่งเรื่องกฎเกณฑ์มากกว่า เช่น ถ้าลืมใส่ semicolon (;) ปิดท้ายแต่ละบรรทัด ก็อาจต้องมาปวดหัวทีหลังได้ ว่าทำอะไรผิดพลาดไปตรงไหน
3. 
   3
   หัดใช้ JavaScript กับ jQuery. ถ้าใครอยากทำเว็บเรียบๆ ง่ายๆ ก็ไม่จำเป็น แต่ถือเป็นของจำเป็นสำหรับคนที่อยากได้เว็บไซต์แบบ interactive

   • ถ้าจะใช้ jQuery ก็ขอแค่มีความรู้พื้นฐานเรื่อง JavaScript เพราะ jQuery จะช่วยให้ทุกอย่างง่ายขึ้นอีกเยอะ
   • ถ้าใช้ jQuery คุณจะใส่ widgets ต่างๆ ได้ เช่น accordion (เนื้อหายืด-หดได้) ปฏิทิน และอื่นๆ ซึ่งก็จะมีสไตล์แตกต่างกันไป เลือกสไตล์ที่เหมาะกับเว็บไซต์ที่ต้องการได้เลย
4. 
   4
   ขยับไปเรียนรู้ภาษาขั้นสูง. เช่น PHP, MySQL, Perl, Ruby และอื่นๆ ย้ำกันอีกทีว่าถ้าอยากสร้างเว็บเรียบๆ แบบง่ายๆ ก็ไม่จำเป็น แต่จะเป็นประโยชน์มากถ้าสร้างเว็บใหญ่ๆ แบบ interactive

   • บางภาษา เช่น PHP ต้องมี test server หรือเซิร์ฟเวอร์ทดสอบด้วย เพราะงั้นต้องสมัครบัญชีของบริษัท web hosting หรือติดตั้งโปรแกรมเซิร์ฟเวอร์ในคอมไว้ก่อน
   โฆษณา

ส่วน 3

ส่วน 3 ของ 3:

ประยุกต์ใช้ความรู้ที่เรียนไป

ดาวน์โหลดบทความ

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

เคล็ดลับ

• อย่าใจร้อน! ถ้าพยายามยัดความรู้ใหม่ๆ ลงสมองใน 6 ชั่วโมง สุดท้ายคุณจะลืมหมดอย่างรวดเร็ว
• HTML editor ดีๆ แบบไม่ต้องเสียเงินก็มี บอกเลยว่ามี editor ที่ฟรีแต่ดีแค่ต้องศึกษาและค้นหาดู บางตัวดีพอๆ กับโปรแกรมราคาหลายพันหรือเป็นหมื่นเลย
• พอเสร็จโปรเจ็คต์หนึ่งแล้ว อย่าลืมเก็บโค้ดไว้แล้วเปลี่ยนเป็น library จะได้ไม่ต้องเสียเวลามานั่งพิมพ์เองทั้งหมดทุกครั้งที่เริ่มโปรเจ็คต์ใหม่ ยิ่งถ้าเป็นโปรเจ็คต์ใหญ่ๆ นี่อาจจะขายโค้ดได้เลย!
• ไฟล์ PDF จะใช้สะดวกกว่า eBook เพราะไฟล์ PDF เปิดได้ทั้งในคอมและแทบทุกอุปกรณ์ ในขณะที่ eBook เน้นเปิดในอุปกรณ์เฉพาะเท่านั้น เช่น Kindle หรือ iPad เป็นต้น
• ถ้ามีเพื่อนหรือคนในครอบครัวที่ออกแบบเว็บเป็น ก็ให้เขาช่วยสอนซะเลย รับรองได้ความรู้และเทคนิคมาฟรีๆ (หวังว่านะ)

โฆษณา

คำเตือน

• อย่าอัดความรู้เข้าหัว! นอกจากจำอะไรไม่ค่อยได้แล้วยังทำให้เหนื่อยจนท้อได้ง่ายๆ สุดท้ายจะเหมือนไม่ได้เรียนรู้อะไรเลย
• ในภาษาเขียนสคริปต์จะมีอย่างหนึ่งที่เรียกว่า infinite loop หรือวนลูปไม่มีที่สิ้นสุด ถือเป็นอะไรที่สยองมากสำหรับโปรแกรมเมอร์ทั้งหลาย ก็ระวังอย่าให้เกิดกับตัวคุณเองบ้างแล้วกัน!
• เวลาจะดาวน์โหลดโปรแกรมอะไรต้องระวัง! เดี๋ยวนี้ไวรัสแฝงตัวอยู่ทุกหนทุกแห่งเลย
• เวลาจะ sign up หรือลงทะเบียนในเว็บไหน ต้องหาข้อมูลสักนิด ถ้าเป็นเว็บดังๆ คนนิยมใช้กัน ก็ไม่น่าเป็นห่วง แต่ถ้าเว็บใหม่ๆ ไม่ค่อยเคยได้ยินมาก่อน ระวังจะเป็นพวก scam หลอกเอาเงินหรือข้อมูลส่วนตัว

โฆษณา

สิ่งของที่ใช้

• คอมพิวเตอร์
• โปรแกรมออกแบบเว็บไซต์
• เว็บ หนังสือ หรือวีดีโอ tutorial สอนออกแบบเว็บไซต์