JUNCTION X: WEB DESIGN ADVANCE

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdG5nzEQYLarg3YBdy-WeUmAHUBnzJD5ZzlGLK5OlipzUOw6HTn7G7Q2mhQG8sX_aFK_LdTIhX0Kxf0MzYwpBXlYtQTOtG4kmDEg5OjeJgIUBX9gF1E_XPCVZ2pp5HCdMhzun8Tvch2PgE/s1600/web-design.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdG5nzEQYLarg3YBdy-WeUmAHUBnzJD5ZzlGLK5OlipzUOw6HTn7G7Q2mhQG8sX_aFK_LdTIhX0Kxf0MzYwpBXlYtQTOtG4kmDEg5OjeJgIUBX9gF1E_XPCVZ2pp5HCdMhzun8Tvch2PgE/s200/web-design.gif" width="200" /></a></div>
<div style="background-color: white; margin-bottom: 0.5em; margin-top: 0.5em;">
<b><span style="font-family: Arial, Verdana, sans-serif;"><span style="line-height: 16px;"><span style="color: #666666;">สวัสดีครับ บทความต่อจากนี้ จะเป็น เทคนิคเกี่ยว กับ</span> <span style="color: red;">WEB DESIGN ADVANCE</span>    <span style="color: #666666;">ซึ่งผมจะเขียน เรื่อยๆ ถ่ายทอดจาก ประสพการณ์ จริง บวกกับ ความรู้ที่ได้จากการ ไปสัมนา หรือเรียน จากที่ต่างๆ <br />
<br />
ก่อนจะเข้าเนื้อหา ขอเกริ่นนำนิดหน่อยก่อนนะครับ ปกติแล้ว สายงานที่เกี่ยวข้องกับ Web นั้น มีมากมายหลายตำแหน่ง แต่ที่พอจะสรุปคร่าวๆ ได้ มีดังนี้ครับ </span></span></span></b></div>
<div style="background-color: white; font-family: Arial, Verdana, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 0.5em; margin-top: 0.5em;">
<b><br />
</b></div>
<div style="background-color: white; font-family: Arial, Verdana, sans-serif; line-height: 16px; margin-bottom: 0.5em; margin-top: 0.5em;">
<b><span style="color: blue;">สายเว็บไซต์ (Website)</span></b></div>
<div style="background-color: white; font-family: Arial, Verdana, sans-serif; line-height: 16px; margin-bottom: 0.5em; margin-top: 0.5em;">
-<span style="color: #666666;"> Web Programmer / Web Developer ทำหน้าที่พัฒนาแอพลิเคชั่น</span><br />
<span style="color: #666666;">- Web Designer ทำหน้าที่ออกแบบความสวยงานของเว็บไซต์</span><br />
<span style="color: #666666;">- Web Content ทำหน้าที่ดูแลข้อมูลก่อนนำมาใส่ลงเว็บไซต์</span><br />
<span style="color: #666666;">- Web Marketing ทำหน้าที่ทำการตลาด ทำรายได้ให้ตัวเว็บไซต์สร้างมูลค่าขึ้นมาได้</span><br />
<span style="color: #666666;">- Web Master / Web Manager ทำหน้าที่ดูแลและควบคุมเว็บ</span><br />
<span style="color: #666666;">- E-Commerce Developer พัฒนาระบบหน้าร้านขายของ</span><br />
<span style="color: #666666;">- Creative Web Designer</span><br />
<span style="color: #666666;">- Senior Web Designer</span><br />
<span style="color: #666666;">- Flash Programmer เน้นพัฒนาแอพลิเคชั่นด้วย Action Script</span><br />
<br />
<br /></div>
<div style="background-color: white; font-family: Arial, Verdana, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 0.5em; margin-top: 0.5em;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s1600/WebsiteJobs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s640/WebsiteJobs.jpg" width="640" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s1600/WebsiteJobs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s1600/WebsiteJobs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s1600/WebsiteJobs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEavPBOWZ3quz9xZ4UgB6Bq79tBYmVrbm8B141M9JDSxUm1aOS8Is0_CpswjCLoCZln_fOTWHtj3aJ054rVw_neiDCAd-v2n51XcOtDvNuHEuDjP15fxPvq0_vpjsu79PUqmmGQ0LF5xoj/s1600/WebsiteJobs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><u></u></div>
<br />
<br />
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px; text-align: center;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img alt="" class="size-full wp-image-445 aligncenter" height="300" src="http://nicha.in.th/wp-content/uploads/2011/09/why_designer_should_know_html_css.jpg" style="background-color: #fbfaf4; background-position: initial initial; background-repeat: initial initial; border: 1px dashed rgb(217, 215, 196); margin: 0px; padding: 11px;" title="why_designer_should_know_html_css" width="300" /><br />
<br />
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">Web Design เป็นสาขางานดีไซน์ที่ไม่เหมือนกับสาขาอื่นๆ เพราะสื่อของเว็บไม่ใช่กระดาษ แต่เป็นหน้าจอใดๆที่สามารถเชื่อมต่ออินเตอร์เน็ตได้ ทำให้การออกแบบเว็บไซต์ มีสิ่งที่ต้องคำนึงนอกเหนือไปจากความสวยงามอีก เช่น การใช้งาน และการรองรับการแสดงผลในหลายๆขนาดหน้าจอ และในทุกๆบราวเซอร์ ยิ่งปัจจุบันมีอุปกรณ์ที่สามารถเชื่อมต่อ Internet ได้มากขึ้น ก็ยิ่งทำให้เราต้องเขียนให้สะดวกกับผู้ใช้ในทุกๆอุปกรณ์ให้มากที่สุดตามไปด้วย และจุดนี้เองที่ทำให้เราต้องหันมาสนใจ HTML & CSS กันอย่างจริงจังสักที</span></div>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">การเขียน Code เหมือนเป็นยาขมของ Web Designer ที่ต้องทำใจกลืนมันลงไป จริงๆแล้วในมุมมองของผม คิดว่า html กับ css ไม่ยากที่จะทำความเข้าใจเลย เพราะมันเป็นภาษาที่เขียนแล้วแสดงผลออกมาทันที แบบผิดตรงไหนก็หาจุดที่ต้องแก้ได้ง่ายกว่า php หรือ javascript เยอะ จุดนี้ไม่พูดมากดีกว่า เดี๋ยวจะมีคนตัดพ้อว่า ก็เรียนสายโปรแกรมเมอร์มา ก็ต้องบอกว่าเขียนโปรแกรมง่ายอยู่แล้วสิ อะไรแบบนั้น เหอๆ</span><br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpAN6ohB2zBvwNIlComK-93N3X2iBiB31Lo_WfrJmcgqnSDXBPo-inBVg9TkFhDaQ7LsHuuI-hOkm5N5EN6KS4uhoDb5OkP6qo_GVqJOK8MXkanoruV7s8MhG8HFubXbIgFKoSst686FA/s1600/triskelion_Media___Web_Design_by_zaib.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpAN6ohB2zBvwNIlComK-93N3X2iBiB31Lo_WfrJmcgqnSDXBPo-inBVg9TkFhDaQ7LsHuuI-hOkm5N5EN6KS4uhoDb5OkP6qo_GVqJOK8MXkanoruV7s8MhG8HFubXbIgFKoSst686FA/s640/triskelion_Media___Web_Design_by_zaib.jpg" width="640" /></a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<br />
<br /></div>
<h2 style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 22px; font-style: italic; font-weight: normal; line-height: 17px; margin: 0px; padding: 0px;">

<span style="color: red; margin: 0px; padding: 0px;">ทำไม Web Designer ควรเขียน HTML & CSS เอง</span></h2>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">ถ้ามีคนแย้งว่า ทำไมหน้าที่การขึ้นหน้าเว็บด้วย HTML ต้องเป็นงานของ Web Designer ไม่ใช่งานของ Programmer เหรอ เราก็อยากบอกว่า โปรแกรมเมอร์ไม่สามารถเข้าใจได้หรอกว่า คนดีไซน์จริงๆแล้วต้องการอะไร แบบไหน อย่างไร ( อันนี้รู้เพราะว่าตัวเองก็เป็น Programmer อยู่ด้วย )  ยิ่งตัวเว็บยิ่งมีความละเอียดมาก เค้าก็ยิ่งไม่เข้าใจ สุดท้ายงานที่ออกมามักจะไม่เหมือนหน้าตาที่เราดีไซน์ไว้ซะทีเดียว แล้วแบบนี้ไม่ดีกว่าเหรอ ที่เราจะเขียนเว็บส่วนที่เป็นการแสดงหน้าตาเอง โดยไม่ต้องพึ่งโปรแกรมเมอร์ แถมออกมาสวยงามสมใจเราอีกต่างหาก โปรแกรมเมอร์เองก็เอาเวลาส่วนนั้นไปพัฒนาระบบอื่นๆได้อีกด้วย</span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAun8vDSDJuq51x7cKE_mKZSK3tXfMBL58jwd3tMK0LkF_PuSG1_ZzDBKIVehvy6wGxhDL_CvonEPnyfmdu_piBv_Yb0reyJev6bchyvSZ3z7lA0zpgk3xdHVafAlApHE2RyiLW_glPRPX/s1600/web-design+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAun8vDSDJuq51x7cKE_mKZSK3tXfMBL58jwd3tMK0LkF_PuSG1_ZzDBKIVehvy6wGxhDL_CvonEPnyfmdu_piBv_Yb0reyJev6bchyvSZ3z7lA0zpgk3xdHVafAlApHE2RyiLW_glPRPX/s320/web-design+%25281%2529.jpg" width="320" /></a></div>
<br /></div>
<h2 style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 22px; font-style: italic; font-weight: normal; line-height: 17px; margin: 0px; padding: 0px;">

<span style="color: red; margin: 0px; padding: 0px;">แล้วจะเริ่มต้นเขียน HTML & CSS อย่างไรดี</span></h2>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">เราอาจจะเริ่มที่ลองไปอ่านพื้นฐานของ html และ css ก่อน ที่ <a href="http://www.w3schools.com/" style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">http://www.w3schools.com/</a> เว็บนี้รวมทุกอย่างไว้แล้ว แล้วก็มั่นใจว่าตรงตามมาตรฐานแน่นอน  แนะนำให้เรียน html ก่อนเพราะเราจำเป็นต้องรู้จัก tag พื้นฐานใน html เอาไว้ใช้ใน css   เบื้องต้นเอาแค่ให้เราอ่านเป็นก่อนว่า โค้ดเขียนแบบนี้หมายถึงอะไร จากนั้นก็ลองแก้ดูศึกษาไปเรื่อยๆ พอถึงจุดที่เราเริ่มรู้จัก tag พื้นฐานแล้ว ก็เริ่มเขียนเองเว็บง่ายๆดูสักเว็บ แต่ต้องเขียนเองทั้งหมดตั้งแต่ต้น ไม่แนะนำให้ใช้พวก CSS framework เช่น <a href="http://960.gs/" style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">960.gs</a> มาใช้ตั้งแต่ช่วงหัดเขียน เพราะจะทำให้เราขึ้น layout เองไม่เป็น แต่พอเราเขียนได้แล้วค่อยเอา framework มาใช้ก็ไม่เสียหายอะไรครับ</span></div>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">พอถึงจุดหนึ่งที่เราเริ่มคุ้นเคยกับการเขียนโค้ดพวกนี้แล้ว เราก็จะไปต่อกับมันได้เรื่อยๆครับ แล้วจะค้นพบว่าการเขียน CSS สนุกไม่น้อยเลยทีเดียว ยิ่งมี CSS3 ออกมาให้ลองเล่น ยิ่งมีอะไรน่าลองเล่นเพิ่มมากจากเดิมอีกเยอะเลยครับ</span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZ-uBf9SmA4INUcOp3VJBNSLSPu50KVzKBZN4ejRz0-h6Uva1rFYJuK49SbZtFItKFdwk3_mv3cxQKBM1UBaN3Pwnhk-OcNVqoKOfDDzgx-oTOtSdpAyJ1_iDmKfRVv20PnXOIT6xwCtH/s1600/anc_web_tr.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZ-uBf9SmA4INUcOp3VJBNSLSPu50KVzKBZN4ejRz0-h6Uva1rFYJuK49SbZtFItKFdwk3_mv3cxQKBM1UBaN3Pwnhk-OcNVqoKOfDDzgx-oTOtSdpAyJ1_iDmKfRVv20PnXOIT6xwCtH/s640/anc_web_tr.jpg" width="640" /></a></div>
<br /></div>
<h2 style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 22px; font-style: italic; font-weight: normal; line-height: 17px; margin: 0px; padding: 0px;">

<span style="color: red; margin: 0px; padding: 0px;">ตำแหน่งใหม่! CSS Designer</span></h2>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0px;">
<span style="color: #666666;">กระแสของการให้ Web Design เขียนโค้ดเองเริ่มมาหลายปีแล้วในเมืองนอก ส่วนบ้านเราเราพึ่งจะเริ่มเห็นเมื่อราวๆปีที่ผ่านมานี่เอง  สังเกตง่ายๆจากการเริ่มเห็นชื่อตำแหน่งใหม่ของสาย web design คือ CSS Designer ก็คือ Web Designer ที่สามารถเขียน CSS ได้ด้วยนั่นเอง ช่วงนี้เห็นเปิดรับสมัครตำแหน่งนี้กันเยอะมาก โดยเฉพาะบริษัทที่ทำด้านเว็บไซต์ทั้งหลาย เรียกได้ว่าถ้าเราออกแบบเว็บได้ และเขียน CSS ได้ โอกาสตกงานก็แทบจะไม่มีเลยทีเดียว น่าสนใจศึกษากันมั้ยล่ะทีนี้</span><br />
<span style="color: #666666;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZKuD-uw1fPGy15utXA1hKJlzo-sEzdC2p3aYo3sTZzVriSLQftBNNIUMtd91uHmWpsAmcDQNlPwwgYvt0lQjLd6D_h8HgjLGiQUoAu8JoHKCFnBRI8eidRujDv2s26JyIpWA-yf-BUUG/s1600/csseditlogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZKuD-uw1fPGy15utXA1hKJlzo-sEzdC2p3aYo3sTZzVriSLQftBNNIUMtd91uHmWpsAmcDQNlPwwgYvt0lQjLd6D_h8HgjLGiQUoAu8JoHKCFnBRI8eidRujDv2s26JyIpWA-yf-BUUG/s320/csseditlogo.png" width="320" /></a></div>
<span style="color: #666666;"><br /></span></div>
<div>
<strong style="margin: 0px; padding: 0px;"><br />
</strong></div>

INTRODUCTION TO WEB DESIGN ADVANCE

สวัสดีครับ บทความต่อจากนี้ จะเป็น เทคนิคเกี่ยว กับ WEB DESIGN ADVANCE ซึ่งผมจะเขียน เรื่อยๆ ถ่ายทอดจาก ประสพการณ์ จริง บวกกับ ความ...

อ่านเพิ่มเติม »