พฤษภาคม 2012

INTRODUCTION TO 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 ซึ่งผมจะเขียน เรื่อยๆ ถ่ายทอดจาก ประสพการณ์ จริง บวกกับ ความ...

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

วันพุธ, พฤษภาคม 30, 2555

ใครอยากเรียน วิศวกรรมคอมพิวเตอร์ ต้องอ่าน Computer Engineer Handbook (Thai version)

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qszHGq-UoYUhpBJxGO_D8dm7ZHzpPwwrU20ma53FLeDQ5oJqlco-9rvqrrY7HAr8zKWmVYDuQ4y6fVNdKB-bIjcX_8fbVaL0TG8LfKqwRlEDMU3mqE9ajlMLuaLgbhg19-xoQRvNuE6E/s1600/computer-engineer.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qszHGq-UoYUhpBJxGO_D8dm7ZHzpPwwrU20ma53FLeDQ5oJqlco-9rvqrrY7HAr8zKWmVYDuQ4y6fVNdKB-bIjcX_8fbVaL0TG8LfKqwRlEDMU3mqE9ajlMLuaLgbhg19-xoQRvNuE6E/s320/computer-engineer.gif" width="320" /></a></div>
<br />
<div style="text-align: center;">
<span style="color: blue; font-size: large;">Computer Engineering</span></div>
<br />
<br />
<div style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 0.5em; margin-top: 0.4em; text-indent: 2.5em;">
<b>วิศวกรรมคอมพิวเตอร์</b> (computer engineering) เป็นศาสตร์ที่เกี่ยวข้องกับการออกแบบและสร้างเครื่องหรือระบบคอมพิวเตอร์ และ ระบบที่ใช้คอมพิวเตอร์ ศาสตร์นี้เกี่ยวข้องกับการศึกษาทางด้าน <a href="http://th.wikipedia.org/wiki/%E0%B8%AD%E0%B8%B8%E0%B8%9B%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%E0%B8%84%E0%B8%AD%E0%B8%A1%E0%B8%9E%E0%B8%B4%E0%B8%A7%E0%B9%80%E0%B8%95%E0%B8%AD%E0%B8%A3%E0%B9%8C" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="อุปกรณ์คอมพิวเตอร์">ฮาร์ดแวร์</a> <a href="http://th.wikipedia.org/wiki/%E0%B8%8B%E0%B8%AD%E0%B8%9F%E0%B8%95%E0%B9%8C%E0%B9%81%E0%B8%A7%E0%B8%A3%E0%B9%8C" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ซอฟต์แวร์">ซอฟต์แวร์</a> <a href="http://th.wikipedia.org/wiki/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AA%E0%B8%B2%E0%B8%A3" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="การสื่อสาร">การสื่อสาร</a> และความเกี่ยวเนื่องระหว่างเรื่องทั้งสาม หลักสูตรการเรียนมุ่งเน้นทางด้าน ทฤษฎี กฎ และ การฝึกฝนปฏิบัติของทางด้านวิศวกรรมไฟฟ้า และ คณิตศาสตร์ รวมถึงการประยุกต์เข้ากับปัญหาทางด้านการออกแบบคอมพิวเตอร์ และ อุปกรณ์ที่ใช้คอมพิวเตอร์</div>
<div style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 0.5em; margin-top: 0.4em; text-indent: 2.5em;">
วิศวกรคอมพิวเตอร์จะต้องเคยศึกษาการออกแบบระบบฮาร์ดแวร์ดิจิทัล ซึ่งรวมถึงระบบการสื่อสาร องค์ประกอบของคอมพิวเตอร์ และอุปกรณ์ที่ประกอบด้วยคอมพิวเตอร์ วิศวกรคอมพิวเตอร์จะเรียนการพัฒนาซอฟต์แวร์ โดยมุ่งเน้นเกี่ยวกับซอฟต์แวร์สำหรับอุปกรณ์ดิจิทัล และ การสร้างส่วนต่อประสานระหว่างผู้ใช้งานซอฟต์แวร์ และ ระหว่างอุปกรณ์ต่าง ๆ วิศวกรคอมพิวเตอร์อาจจะมีความรู้เน้นทางด้านฮารด์แวร์มากกว่าซอฟต์แวร์ หรือ มีความรู้พอ ๆ กันทั้งสองด้านก็ได้ แต่สิ่งที่โดดเด่นคือวิศวกรคอมพิวเตอร์จะมีความรู้ทางด้านการ<a href="http://th.wikipedia.org/wiki/%E0%B8%A7%E0%B8%B4%E0%B8%A8%E0%B8%A7%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%A8%E0%B8%B2%E0%B8%AA%E0%B8%95%E0%B8%A3%E0%B9%8C" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="วิศวกรรมศาสตร์">วิศวกรรม</a>ที่ดีด้วย</div>
<div style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 0.5em; margin-top: 0.4em; text-indent: 2.5em;">
ปัจจุบันสาขาวิชาที่สำคัญในด้านวิศวกรรมคอมพิวเตอร์คือ <a href="http://th.wikipedia.org/wiki/%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%9D%E0%B8%B1%E0%B8%87%E0%B8%95%E0%B8%B1%E0%B8%A7" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ระบบฝังตัว">ระบบฝังตัว</a> การพัฒนาอุปกรณ์ที่มีซอฟต์แวร์และฮาร์ดแวร์ฝังตัวภายใน เช่น อุปกรณ์สื่อสารอย่าง โทรศัพท์มือถือ เครื่องเล่นวิทยุระบบดิจิทัล เครื่องบันทึกวิดีทัศน์ระบบดิจิทัล ระบบเตือนภัย เครื่องถ่ายรังสีเอกซ์ และ เครื่องมือผ่าตัดด้วยแสงเลเซอร์เป็นต้น ซึ่งล้วนแล้วแต่ต้องการการผนวกรวมฮาร์ดแวร์และซอฟต์แวร์ฝังตัวหรือของอื่น ๆ ที่เป็นผลจากการวิศวกรรมคอมพิวเตอร์เข้าด้วยกัน</div>
<br />
<br />
<div style="text-align: center;">
 <span style="color: blue;">หนังสือ  รีวิว วิศวกรรมคอมพิวเตอร์ ที่ละเอียดที่สุด เท่าที่ผม เคยเจอมา</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<object style="height: 450px; width: 600px;"><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf?mode=mini&backgroundColor=%23222222&documentId=111101134916-74ae712407a34fa2a2094eb4126f84d0" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
<param name="wmode" value="transparent"/>
<embed src="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" wmode="transparent" style="width:600px;height:450px" flashvars="mode=mini&backgroundColor=%23222222&documentId=111101134916-74ae712407a34fa2a2094eb4126f84d0" /></object></div>
<div style="text-align: left; width: 600px;">
<div style="text-align: center;">
<a href="http://issuu.com/hungryman/docs/computer_engineer_handbook?mode=window&backgroundColor=%23222222" target="_blank">Open publication</a> - Free <a href="http://issuu.com/" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=computer" target="_blank">More computer</a></div>
</div>

ใครอยากเรียน วิศวกรรมคอมพิวเตอร์ ต้องอ่าน Computer Engineer Handbook (Thai version)

Computer Engineering วิศวกรรมคอมพิวเตอร์ (computer engineering) เป็นศาสตร์ที่เกี่ยวข้องกับการออกแบบและสร้างเครื่องหรือระบบคอมพิวเต...

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

วันพฤหัสบดี, พฤษภาคม 24, 2555

ติดตั้ง Drupal แบบ Multi Site

<span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ช่วงนี้เป็นช่วงขายไอเดียสำหรับผู้ประกอบการธุรกิจ IT ที่ต้องการสร้างสินค้าและบริการจากซอฟต์แวร์โอเพนซอร์ส ซึ่งงาน MICT สร้างคนสร้างชาติก็กำลังใกล้เข้ามาแล้วครับ เอาล่ะก่อนจะเข้าเรื่องการทำมาหากิน มาดูเรื่องของ Drupal กันก่อน Drupal มีคุณสมบัติพิเศษอย่างหนึ่งที่ CMS อื่นๆ ไม่มีคือสามารถใช้ตัวมันเองสร้างเว็บไซต์ได้อีกหลายๆ เว็บ บางคนก็เรียก sub site, minisite ก็แล้วแต่จะเรียกครับ วิธีการนี้ไม่ใช้วิธีการคัดลอกโค้ดไปยังไดเรคทอรีอื่นแล้วติดตั้งนะครับ เอาละเดี๋ยวนึก</span><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ภาพกันไม่ออก ขอยกตัวอย่างง่ายๆ ดีกว่าครับ เราจะใช้ Drupal ทำเว็บไซต์ให้กับวิทยาลัยแห่งหนึ่งโดยแต่ละคณะแต่ละสาขาวิชามีเว็บไซต์เป็นของตนเอง นั่นหมายความว่าคุณต้องติดตั้ง Drupal ตามจำนวนคณะและสาขาวิชา เช่น</span><br />
<br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/college  <= เว็บวิทยาลัย</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/science  <= เว็บคณะวิทยาศาสตร์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/science_physic  <= เว็บคณะวิทยาศาสตร์ สาขาวิชาฟิสิกส์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/science_math  <= เว็บคณะวิทยาศาสตร์ สาขาวิชาคณิตศาสตร์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/nurse  <= เว็บคณะพยาบาล</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/engieering  <= เว็บคณะวิศวกรรม</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/engieering_comp  <= เว็บคณะวิทยาศาสตร์ สาขาวิชาคอมพิวเตอร์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/techno  <= เว็บคณะเทคโน</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/techno_food  <= เว็บคณะเทคโนโลยี สาขาวิชาการอาหาร </span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ก็เล่นไปซะ 9 เว็บ 9 Drupal เข้าไปแล้ว หาก Drupal ของคุณมีเวอร์ชั่นไม่เท่ากันอีกก็กุมขมับเวลาอัพเกรดกันได้เลยครับ แต่หากคุณมีผู้ดูแลระบบที่สามารถดูแลเรื่องการจัดการ Drupal ในเรื่องต่างๆ ได้ เช่น อัพเกรด, อัพเดทโมดูล, อัพเดทธีม ฯลฯ จะใช้วิธี virtual host ก็ไม่ว่ากันครับ หากไม่มีละแย่เลย ต้องดูเว็บไซต์อย่างน้อยก็ 9 เว็บเข้าไปแล้ว วิธีนี้แก้ปัญหาจุกจิกนี้ แก้ได้โดยการใช้ multi site ครับ ซึ่ง เราจะติดตั้ง drupal ไว้ที่เดียวคือ /var/www/college จากนั้นทำ muti site จากจุดนี้ไป แล้วทำยังไง? Drupal ออกแบบเรื่อง multi site ไว้เรียบร้อยแล้ว เพียงสร้างไดเรคอรีเก็บ config และใส่ setting.phpให้แต่ละเว็บไซต์เท่านั้น ลองมาดูกันอีกรอบครับ</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/college <= เราติดตั้ง Drupal ไว้ที่นี่สำหรับเว็บวิทยาลัย</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/college/sites/default/setting.php <= ใส่ configของเว็บวิทยาลัย</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/college/sites/science.mycollege.ac.th/setting.php <= ใส่ configของเว็บคณะวิทยาศาสตร์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">/var/www/college/sites/physic.science.mycollege.ac.th/setting.php <= ใส่ config ของเว็บคณะวิทยาศาสตร์ สาขาวิชาฟิสิกส์ </span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">…</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ไปเรื่อยๆ จนครบ สำหรับฐานข้อมูลเราสามารถสร้างฐานข้อมูลแยกออกตามคณะและสาขาวิชาได้ จะทำให้การบริการจัดการฐานข้อมูลได้ง่ายขึ้น คิดว่าน่าจะเข้าในในแนวคิดกันแล้วมาดู how-to แบบเต็มๆ ครับ ก่อนลงมือทำเรามาดูว่ามีอะไรกันบ้าง  เรามีโดเมนวิทยาลัยชื่อ mycolledge.ac.th, เรามีเว็บ 9 เว็บไซต์ที่ต้องติดตั้ง drupal แบบ multisite, ใช้ /var/www เป็นที่เก็บเว็บไซต์ เรา config DNS และ Apache Virtual Hostไว้แล้ว ใครยังงงๆ อ่านตอนเก่าๆ ได้ครับ เอาล่ะมาเริ่มกันเลย</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">แปลงร่างเป็น root ก่อนครับ</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">sudo -s</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">จากนั้นย้ายตัวเองไปที่ /var/www</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cd /var/www</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ดาวน์โหลด Drupal </span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">wget http://ftp.drupal.org/files/projects/drupal-6.12.tar.gz</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">คลี่ไฟล์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">tar zxvf drupal-6.12.tar.gz</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เปลี่ยนชื่อไดเรคทอรีจาก  drupal-6.12 เป็น college เพื่อใช้เป็นเว็บหลัก อ้อ อย่าลืมแก้ไข document root ของ default virtual host นะครับ</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mv  drupal-6.12  college</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">สร้างไดเรคทอรีสำหรับเก็บ config ของแต่ละเว็บไซต์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cd college/sites</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir physic.science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir math.science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir nurse.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir engineer.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir comp.engineer.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir techno.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mkdir food.techno.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">สร้าง ฐานข้อมูล mysql ให้แต่ละเว็บครับ </span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database college”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database science”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database science_physic”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database science_math”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database nurse”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database engineer”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database engineer_comp”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database techno”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">mysql -u root -pmy-root-password -e “create database techno_food”</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">จากนั้น browse เว็บไปที่ mycolledge.ac.th ติดตั้ง drupal สำหรับเว็บหลักให้เรียบร้อย แล้วจึงคัดลอก setting.php ไปยังไดเรคทอรีสำหรับเก็บ config ของแต่ละเว็บไซต์ ดังนี้</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php physic.science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php math.science.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php nurse.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php engineer.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php comp.engineer.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php techno.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">cp default/setting.php food.techno.mycolledge.ac.th</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">แก้ไขชื่อฐานข้อมูลใน setting.php ของแต่ละเว็บให้ถูกต้อง </span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">$db_url = 'mysqli://username:password@localhost/databasename';</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">จากนั้นทะยอยติดตั้งทีละเว็บไซต์โดยเบราส์ไปที่ URL ดังนี้</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://science.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://physic.science.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://math.science.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://nurse.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://engineer.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://comp.engineer.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://techno.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">http://food.techno.mycolledge.ac.th/install.php</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เท่านี้ก็ได้ Drupal ในแบบฉบับ Multi Site แล้ว อ้อลืมไปนิดนึง หากคุณมี module หรือ theme ที่ต้องใช้ร่วมกัน ให้คุณคัดลอก module, หรือ theme ไปยัง sites/all/modules และ sites/all/themes ครับ เอาละ มาดูวิธีการประยุกต์ให้ได้ธุรกิจบริการกันบ้าง จากตัวอย่างข้างต้นคุณสามารถรับจ้างทำเว็บไซต์ได้ง่ายๆ แต่หากเป็นการประยุกต์ในธุรกิจบริการ คุณสามารถใช้ Drupal ติดตั้งแบบ Multi Site นี้ทำอะไรได้บ้าง ?</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เว็บบล็อก</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เว็บไซต์</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เว็บอีคอมเมิร์ซ</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">เว็บฐานข้อมูลความรู้</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">ฯลฯ</span><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><br style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;" /><span style="background-color: white; font-family: SPLaksaman, sans; font-size: 14px; line-height: 21px;">บริการในรูปแบบธุรกิจบริการได้อย่างสบายๆ</span>

ติดตั้ง Drupal แบบ Multi Site

ช่วงนี้เป็นช่วงขายไอเดียสำหรับผู้ประกอบการธุรกิจ IT ที่ต้องการสร้างสินค้าและบริการจากซอฟต์แวร์โอเพนซอร์ส ซึ่งงาน MICT สร้างคนสร้างชาติก็กำลั...

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

วันอังคาร, พฤษภาคม 22, 2555

มาดูว่าใน CSS3 มี Cursor Styles อะไรใหม่ๆบ้าง

<br />
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.</div>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…</div>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS2 Cursor Styles</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS2 offered relatively few options <em style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">(hover over any element to see how the cursor changes)</em>:</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: auto; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: auto</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: inherit; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: inherit</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: crosshair; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: crosshair</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: default; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: default</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: help; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: help</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: move; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: move</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: pointer; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: pointer </pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: progress; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: progress</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: text; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: text</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: wait; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: wait</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: e-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: e-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ne-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ne-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: n-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: n-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: se-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: se-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: sw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: sw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: s-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: s-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: w-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: w-resize</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS3 Cursor Styles</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:</div>
<div id="div-gpt-ad-1328644474660-10" style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; height: 90px; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 728px;">
<div id="div-gpt-ad-1328644474660-10_ad_container" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<ins style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: inline-table; height: 90px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; width: 728px;"><ins style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block; height: 90px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; width: 728px;"><iframe frameborder="0" height="90" id="google_ads_iframe_/7448792/InArticle_728x90_1_0" marginheight="0" marginwidth="0" name="google_ads_iframe_/7448792/InArticle_728x90_1_0" scrolling="no" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; left: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: absolute; top: 0px;" width="728"></iframe></ins></ins></div>
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: none; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: none (not IE, Safari, Opera)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: context-menu; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: context-menu (not Firefox, Chrome)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: cell; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: cell (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: vertical-text; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: vertical-text</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: alias; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: alias (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: copy; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: copy (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: no-drop; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: no-drop</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: not-allowed; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: not-allowed</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ew-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ew-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ns-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ns-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nesw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nesw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nwse-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nwse-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: col-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: col-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: row-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: row-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: all-scroll; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: all-scroll</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Browser-Specific Cursors</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-grab; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-grab; cursor: -moz-grab;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-grabbing; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-grabbing; cursor: -moz-grabbing;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-zoom-in; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-zoom-in; cursor: -moz-zoom-in;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-zoom-out; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-zoom-out; cursor: -moz-zoom-out;</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Creating Your Own Cursor</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Finally, you can create your own cursor graphic, e.g.</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: auto; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;</pre>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Note:</div>
<ol style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; margin-left: 1.467em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Internet Explorer requires a Windows cursor file (.cur).</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Firefox also requires a second non-URL cursor fallback value.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">It’s not supported in Opera.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.</li>
</ol>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…</div>

มาดูว่าใน CSS3 มี Cursor Styles อะไรใหม่ๆบ้าง

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in...

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

วันศุกร์, พฤษภาคม 18, 2555

10 อันดับ สุดยอดอาหารเพิ่มพลังงานที่คุณต้องลอง

<br />
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; color: black; width: 720px;"><tbody>
<tr><td align="left" class="text-black" colspan="2" height="32" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; color: #555555; font-family: tahoma; font-size: 0.8em; padding-left: 1em;">หนุ่ม ๆ สมัยนี้ นอกจากจะหันมาสนใจเรื่องเสื้อผ้า เครื่องแต่งกายของตัวเองกันมากขึ้นแล้ว เรื่องของรูปร่างก็เป็นปัจจัยสำคัญอีกเช่นเดียวกัน ดังนั้นพวกเขาจึงมักจะเข้าฟิตเนสออกกำลังกาย เพื่อฟิตแอนด์เฟิร์มกล้ามเนื้อให้แน่นเปรี้ยะอยู่เป็นประจำ ที่สำคัญยังต้องบำรุงร่างกายเพิ่มด้วยอาหารที่ให้พลังงานสูงด้วย ซึ่งยังมีอีกหลาย ๆ คน ที่อาจยังไม่ทราบว่าอาหารเหล่านั้นมีอะไรบ้าง วันนี้ ทีมงาน toptenthailand จึงมาช่วยไขข้อสงสัยเรื่องนี้ให้ทราบกัน ใน "10 อันดับ สุดยอดอาหารเพิ่มพลังงานที่คุณต้องลอง "</td></tr>
<tr><td align="center" colspan="2" style="padding-top: 1em;"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">10</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ชา</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40690.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40690.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ถ้าหากคิดว่ากาแฟมีสารคาเฟอีนมาก เมื่อดื่มเข้าไปแล้วทำให้ใจสั่น งั้นลองหันมาดื่ม "ชา" แทนดีกว่า เพราะชาก็มีประโยชน์ไม่แพ้กาแฟ แถมยังมีคาเฟอีนน้อยกว่าด้วย (ชาแต่ละชนิด มีปริมาณคาเฟอีนไม่เท่ากัน) นอกจากนี้ยังมีส่วนช่วยพัฒนากระบวนการป้องกันสารพิษในร่างกาย และมีสารต้านอนุมูลอิสระที่สามารถชะลอความแก่ รวมทั้งต้านโรคมะเร็งได้อีกด้วย ที่สำคัญช่วยเผาผลาญไขมันส่วนเกินได้เป็นอย่างดี</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">9</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">กาแฟ</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40689.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40689.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">เครื่องดื่มยอดนิยมของคนทำงานแทบทุกคน เพราะในกาแฟมีสารคาเฟอีนอยู่จำนวนมาก ซึ่งช่วยให้ร่างกายรู้สึกตื่นตัว และเพิ่มประสิทธิภาพในการทำงาน หากดื่มในปริมาณที่เหมาะสม นอกจากนี้ยังอุดมไปด้วยสารต้านอนุมูลอิสระ รวมทั้งช่วยเพิ่มการทำงานเอนไซม์ในการกำจัดสารที่เป็นอันตรายด้วย</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">8</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">น้ำเปล่า</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40688.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40688.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">คงไม่ต้องกล่าวอะไรให้ยืดยาวมากเกี่ยวกับประโยชน์ของ "น้ำ" เพราะเป็นสิ่งที่มีความจำเป็นต่อร่างกายคนเราอย่างมาก เนื่องจาก 70 เปอร์เซ็นต์ ของร่างกายคนเราประกอบด้วยน้ำ โดยน้ำช่วยให้ผิวพรรณดูอ่อนนุ่ม ชุ่มชื้น ลดปัญหาท้องผูก ช่วยชะลอความแก่ เนื่องจากถ้าเซลล์ในร่างกายขาดน้ำเรื้อรัง และมีอนุมูลอิสระจะทำให้เซลล์เสื่อมสภาพลงทำให้ดูแก่ขึ้น การดื่มน้ำ ควรดื่มวันละประมาณ 2–3 ลิตร และจิบน้ำในระหว่างวันให้บ่อย แล้วคุณจะรู้สึกได้เลยว่า น้ำช่วยให้ร่างกายกะปรี้กะเปร่าขึ้น และเติมเต็มความสดชื่นให้กับร่างกายอย่างเต็มที่</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">7</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ผลไม้</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40687.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40687.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ผลไม้ คือ แหล่งรวมสารอาหารที่มีประโยชน์ชั้นดีจำนวนมาก ซึ่งในผลไม้บางชนิดยังให้พลังงานกับร่างกายที่สำคัญ เช่น กล้วย, แอพพริคอท, แคนตาลูป และกีวี โดยอุดมไปด้วยโพแทสเซียม, น้ำตาลธรรมชาติ 3 ชนิด (ซูโครส, ฟรุคโทส และกลูโคส), วิตามินอีกนานาชนิด, เกลือแร่, สารต้านอนุมูลอิสระ รวมทั้งยังมีเส้นใยที่ช่วยให้การขับถ่ายดีขึ้น เรียกว่าจัดหนัก จัดเต็มพลังงานและคุณประโยชน์อย่างเต็มที่</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">6</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ควินัว</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40686.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40686.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ควินัว (Quinoa) คือ เมล็ดพืชประเภทข้าวชนิดหนึ่ง ซึ่งนับว่าเป็นของหาซื้อได้ยาก แต่เป็น เมล็ดพืชที่มีคุณประโยชน์ต่อร่างกายมาก โดยจะให้สารอาหารประเภทโปรตีน, คาร์โบไฮเดรท, ธาตุเหล็ก, แคลเซียม, โพแทสเซียม, แมกนีเซียม และมีไฟเบอร์สูง นอกจากนี้ยังเหมาะเป็นอาหารสำหรับคนที่ต้องการลดน้ำหนักด้วยนะ</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">5</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ข้าวโอ๊ตแผ่น (Old-fashioned oats)</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40685.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40685.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ความจริงแล้ว ข้าวโอ๊ตชนิดนี้มีลักษณะต่างจากข้าวโอ๊ตที่เคยเห็นกันทั่ว ๆ ไป เพราะจะมีการนำมาอบไอน้ำแล้วบดให้แบนก่อน โดยอาหารชนิดนี้อุดมไปด้วยคาร์โบไฮเดรต, วิตามินบี, ไฟเบอร์ และยังช่วยลดระดับน้ำตาลในเลือดได้อีกด้วย</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-01.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">4</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">เมล็ดพันธุ์ต่าง ๆ</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40684.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40684.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">เมล็ดพันธุ์ มีคุณสมบัติที่ใกล้เคียงกับถั่วอยู่หลายอย่าง เช่น มีไขมันไม่อิ่มตัว, ไฟเบอร์, วิตามิน, โอเมก้า 3, แร่ธาตุและสารต้านอนุมูลอิสระ ที่สำคัญเมื่อทานเข้าไปแล้วจะทำให้คุณรู้สึกอิ่มนาน และให้พลังงานกับร่างกายสูงอย่างที่คุณคาดไม่ถึง</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-03.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">3</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ถั่ว</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40683.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40683.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ตัวอย่างเช่น อัลมอนด์, วอลนัท, พีแคน, และเม็ดมะม่วงหิมพานต์ ซึ่งของขบเคี้ยวกินเพลิน ๆ เหล่านี้ นอกจากจะให้ความอร่อยแล้ว ถั่วยังเป็นอาหารที่ให้พลังงานสูง มีไขมันไม่อิ่มตัวซึ่งเป็นประโยชน์ต่อร่างกาย แถมยังมีไฟเบอร์, วิตามิน, โอเมก้า 3, แร่ธาตุและสารต้านอนุมูลอิสระอีกด้วย โดยคุณสามารถกินเปล่า ๆ เป็นของว่าง หรือจะนำไปปั่นทำเป็นสมูทตี้ใส่ในเครื่องดื่มเย็น ๆ ก็ยังได้ อย่างไรก็ดี ก็ไม่ควรรับประทานในปริมาณมากจนเกินไป เพราะอาจทำให้น้ำหนักขึ้นได้นะ</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-02.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">2</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ไข่</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40682.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40682.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">ไข่ คือ แหล่งพลังงานชั้นดีที่คนทั่วโลกมักนำมาใช้ในการประกอบอาหาร เพราะสามารถนำมาปรุงได้อย่างหลากหลาย จึงทำให้ได้รับความนิยมเป็นอย่างมาก นอกจากนี้มันยังเต็มไปด้วยสารอาหารอีกหลายชนิด ทั้งวิตามิน, เกลือแร่, ธาตุเหล็ก, วิตามินดี, บี 12, เอ ไอโอดีน เซเลเนียมและโปรตีน โดยมีกรดอะมิโนที่สำคัญต่อการเจริญเติบโตอยู่ในไข่ใบเล็ก ๆ อีกจำนวนมาก</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" colspan="2"></td></tr>
<tr><td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" height="87" style="background-image: url(http://toptenthailand.com/images/topten_detai-top-04.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;" valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 719px;"><tbody>
<tr><td align="center" class="text-White-big" height="20" style="color: white; font-family: tahoma; font-size: 3em; font-weight: bold; padding-top: 0.1em;" valign="middle" width="76">1</td><td align="left" class="text-red-big2" style="color: #a8100d; font-family: tahoma; font-size: 1em; font-weight: bold; padding-left: 1em;" valign="bottom" width="643">ปลา</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td align="center" style="background-image: url(http://toptenthailand.com/images/topten_detai-center.gif); background-position: 50% 50%; background-repeat: no-repeat repeat; padding-left: 2em;"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 673px;"><tbody>
<tr><td align="center" width="165"><table border="0" cellpadding="0" cellspacing="0" style="width: 128px;"><tbody>
<tr><td align="center" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 5px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 5px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 5px;"><a href="http://toptenthailand.com/images/rank/r_40681.jpg" id="topten_zoom" style="text-decoration: none;"><img height="128" src="http://toptenthailand.com/images/rank/r_40681.jpg" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial;" width="128" /></a></td></tr>
</tbody></table>
</td><td align="left" valign="top" width="508"><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;">หลาย ๆ คนคงทราบกันดีว่า "ปลา" คือ อาหารที่อุดมไปด้วยกรดไขมันโอเมก้า 3 ซึ่งให้คุณประโยชน์กับร่างกายมากมาย เช่น ลดความเสี่ยงการเป็นโรคหัวใจ โรคมะเร็งชนิดต่าง ๆ โรคข้ออักเสบ และที่สำคัญช่วยลดความอ้วนได้ด้วยน่ะสิ โดยโอเมก้า 3 จะพบมากในปลาทะเล และปลาน้ำจืดบางชนิด</td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
<tr><td align="left" class="text-black" style="color: #555555; font-family: tahoma; font-size: 0.8em;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td height="36" style="background-image: url(http://toptenthailand.com/images/topten_detai-bottom.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><br />
<br /></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<br /><div>
เครดิต : <a href="http://toptenthailand.com/display.php?id=4112">http://toptenthailand.com/display.php?id=4112</a>
</div>

10 อันดับ สุดยอดอาหารเพิ่มพลังงานที่คุณต้องลอง

หนุ่ม ๆ สมัยนี้ นอกจากจะหันมาสนใจเรื่องเสื้อผ้า เครื่องแต่งกายของตัวเองกันมากขึ้นแล้ว เรื่องของรูปร่างก็เป็นปัจจัยสำคัญอีกเช่นเดียวกัน ดัง...

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

วันพุธ, พฤษภาคม 16, 2555

สมัครสมาชิก: ความคิดเห็น ( Atom )