ความรู้เบื้องต้นWeb Design

เนื้อเรื่อง

ความรู้เบื้องต้น Web Design

Web Design คือการออกแบบเว็บไซต์ ซึ่งสำคัญมากๆ ในหลายๆบริษัทที่ทำธุรกิจทางด้านนี้โดยตรง จะต้องมีพนักงานที่ทำหน้าที่ Web Design อย่างเดียวเท่านั้น บางทีก็รวมคนเขียน Code HTML ไปด้วยและคนทำ Graphic ไปด้วย แต่บางทีก็มองว่า Design อย่างเดียวเพียงแค่ร่างๆออกมาเท่านั้น เพราะการเขียน Code HTML นั้นไม่ใช่ปัญหา ในที่นี้เราจะรวมเอาทั้ง Design + Graphic ไปด้วย โดยเราจะบอกแนวให้เป็น Step สำหรับ Web Design ครับ

งาน Web Design เป็นงานที่ค่อนข้างยากและต้องอาศัยพรสวรรค์พอสมควร + กับรสนิยมด้วย เพราะบางคนออกแบบเว็บไซต์มาตนเองคิดว่าสายมากแต่หลายๆสายตามองว่าไม่สวยก็มี ดังนั้นจึงต้องเกี่ยวกับรสนิยมไปด้วย แต่หลายคนที่มีพรสวรรค์ออกแบบมาก็ทำให้คนส่วนมากมองว่าสวยเหมือนกัน ผมเองไม่ได้บอกว่าตนเองเก่งด้าน Web Design มากมายบอกได้เลยว่าตนเองไม่เก่งทางนี้เท่าไร ก็ขอคำชี้แนะด้วยนะครับสำหรับมืออาชีพทั้งหลายถ้าเขียนบทความผิดไป ติกันได้

1. ออกแบบเว็บไซต์

Step ของเราอาจจะงงๆสักหน่อย แต่รวมก็อยู่ในประมาณนี้ ขั้นแรกต้องเริ่มจากการออกแบบก่อน อาจจะออกแบบโดยการร่างใส่เศษกระดาษ หรือเปิด Tool อย่าง Frontpage มาเขียนเลยก็ได้เหมือนกัน ส่วนใหญ่หัวการออกแบบนี่สอนกันยากครับ บางคนก็เริ่มจากการเข้าเว็บไซต์จำนวนมาก ดูการออกแบบ ดูรูปแบบการจัดวาง และก็เกิดไอเดียขึ้นก็มี อันนี้ต้องเริ่มจากการออกแบบและให้เพื่อนๆดูกันก่อนก็ได้เหมือนกันครับว่าเป็นอย่างไร ต้องเป็นผู้ที่ยอมฟังคำวิจารย์ครับดีไหม ต้องปรับอะไรอย่างไร ก็จะเริ่มดีขึ้น ผมทำเว็บมาร่วม 3 ปีก็เห็นพัฒนาการของตนเองจากไม่ได้เรื่องจนใช้ได้สักหน่อย (ไม่รู้ใช้ได้หรือเปล่า ลองวิจารย์กันมาดู)

2. ฝึกกราฟฟิก

เมื่อเราทำการออกแบบหน้าตาของเว็บเราเสร็จ ในการออกแบบนั้นก็จะมีกราฟฟิกที่อยู่ในเว็บเช่น Logo และอื่นๆ ก็มาสู่ขั้นตอนการทำกราฟฟิก สำหรับท่านที่ทำหน้าที่ออกแบบอย่างเดียวก็ต้องคุยกับคนทำกราฟฟิกว่าสิ่งที่ออกแบบนี้ทำได้ไหมอย่างไรต้องปรับอะไรบ้าง ซึ่งต้องค่อนข้างทำงานเป็นทีมและคุยกันตลอดว่าจะไปอย่างไร ส่วนท่านที่ทำเองก็ต้องศึกษาครับ หลายคนฝึกมานานสะสม

Tool ที่ใช้สำหรับกราฟฟิก

Adobe Photoshop ,Macromedia Firework : สำหรับ Photoshop Version นั้นก็แล้วแต่ครับอาจจะ 5.0 ,5.5 หรือตอนนี้ก็ 6.0 ใช้สำหรับตกแต่งรูปภาพ เช่น ทำภาพบร่อ ,ภาพซ้อน ฯลฯ โดยทั่วไปจะเกี่ยวกับการตกแต่งภาพที่มีอยู่แล้ว

Adobe illustrator : ก็มี Version 8 ,9 ซึ่งใช้สำหรับวาดภาพ หรือบางคนก็อาจจะใช้ Macromedia Flash วาด

Macromedia Flash : สำหรับทำ Movie เป็นกราฟฟิกที่กำลังดังในตอนนี้เพราะสามารถทำภาพกราฟฟิกได้ไหลลื่นมาก มีเครื่องมือในการช่วยให้ภาพสวยงามและเทคนิคหลายอย่าง และที่สำคัญขนาดของ File ไม่ใหญ่ถ้าเทียบกับภาพที่เป็น Gif Animation

และมีอีกมากมายที่ไม่ได้พูดถึง เช่น Plug-in ของ Photoshop อย่าง EyeCandy ทีรู้จักกันดี ส่วนใหญ่ก็แล้วแต่ละคนว่าถนัดแบบไหน โดยส่วนตัวผมไม่ค่อยถนัดอะไรเลยรู้นิดๆหน่อยๆสำหรับแต่ละอย่างนะ แต่ก็ไม่ได้รู้น้อยจนหน้าเกียจ หรือมากจน Profressional

3. สร้าง Code HTML

ขั้นตอนนี้ก็สำคัญ Code HTML จะใช้รีนบน Browser โดยเป็นนามสกุลเช่น .html .htm .shtml โดยก็คล้ายๆกันในหลายๆอย่าง จะแตกต่างตรงที่ .shtml ทำให้สามารถใช้ Server Side Include (SSI) ได้

Server Side Include (SSI)

เป็นคุณสมบัติที่ผมมองว่ามหัศจรรย์ และดีมาก เช่น เมนูด้านข้างของเว็บท่านจะเหมือนกันในทุกๆหน้า แทนที่ท่านจะเขียน Code สำหรับเมนูนั้นในทุกๆหน้า ก็ทำการ Copy ในส่วน Code ตรงนั้นไว้ใน file เช่น menu.inc และทำการแทรกคำสั่ง <!--#include virtual="menu.inc" --> เป็นต้นก็จะดึง Code ที่อยู่ใน File menu.inc มาให้และถ้าทำอย่างนี้เวลาท่านแก้ไขอะไรก็แก้เพียงแค่ file menu.inc เท่านั้น อีกนิดไม่จำเป็นต้องเป็น .inc ก็ได้นะครับจะ dot อะไรก็ได้แล้วแต่

อีกอันสำหรับ SSI ที่น่าสนใจคือการแอบสั่งให้ CGI ทำงานโดยการใช้คำสั่งดังต่อไปนี้ <!--#exec cgi="/cgi-bin/file.cgi" --> ก็จะทำให้ส่วนของ Code ที่นำคำสั่งดังกล่าวไปใส่จะแสดงผลในส่วนของ CGI คงไม่งงนะครับ

Tool ที่ใช้สำหรับการเขียน Code HTML

Microsoft Frontpage 98/2000 : การทำงานจะง่ายมากเหมือนเพียงคุณต้องการให้มีอะไรบนเว็บก็พิมพ์ลงไป มีส่วนของเครื่องมือให้คุณสามารถสร้าง Code HTML ต่างๆโดยไม่ต้องมาเขียน Code เอง

Macromedia Dreamweaver : อันนี้จะง่ายเหมือนกัน แล้วแต่ชอบอันนี้จะคล้าย Word คือมีหน้ากระดาษเปล่าๆให้คุณ แต่นั้นคือหน้าเว็บและอยากใส่อะไรก็ใส่กัน แต่จะมีคุณสมบัติในการสร้าง Java Script และเทคนิคมากมายในนี้

โดยทั่วไป 2 Tool ที่ยกให้นั้นจะเหมือนๆกันในหลายๆด้าน ก็อย่างเคยก็แล้วแต่ถนัด ถนัดแบบไหนก็ใช้แบบนั้น โดยส่วนใหญ่ Macromedia Dreamweaver จะอิงไปทาง Netscape มากกว่า IE แต่ Microsoft Frontpage คงเดาง่ายว่าจะอิงไปทางไหน ปกติโดยส่วนตัวผมเขียนให้สำหรับคนใช้ IE นะแต่ผมมักเขียนเองมากกกว่าไม่ค่อยได้ใช้ Tool นอกจากจำเป็นเช่น สร้าง Java Script หรือบางอย่างที่ขี้เกียจทำ