tag:blogger.com,1999:blog-6967170445909211862024-09-24T16:40:20.238-07:00information workinformation workhttp://www.blogger.com/profile/00955786829595598775noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-696717044590921186.post-80329368108044420152011-12-11T23:01:00.000-08:002011-12-14T07:59:49.282-08:00การจัดองค์ประกอบบนเว็บเพจ<ul style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><li><span style="background-color: #d9ead3; color: #274e13; font-size: large;"><a href="http://seashore.buu.ac.th/~51028638/245372/html/chap08.html">การออกแบบ Scroll Bar</a></span></li>
<li><span style="background-color: #d9ead3; color: #274e13; font-size: large;"><a href="http://seashore.buu.ac.th/~51028638/245372/html/chap08.html">การสร้างส่วนชี้นำการใช้งาน</a></span></li>
<li><span style="background-color: #d9ead3; color: #274e13; font-size: large;"><a href="http://seashore.buu.ac.th/~51028638/245372/html/chap08.html">การจัดกลุ่มข้อมูลด้วยฟอร์ม</a></span></li>
</ul><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span style="background-color: #fce5cd; color: #783f04; font-size: large;"><u>วัตถุประสงค์</u></span></div><ul style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><li><span style="background-color: #f3f3f3; color: blue; font-size: large;">อธิบายความสัมพันธ์ระหว่างการใช้งาน Scroll Bar และโครงร่างเว็บเพจรูปแบบต่าง ๆ ได้</span></li>
<li><span style="background-color: #f3f3f3; color: blue; font-size: large;">อธิบายหลักการออกแบบ Scroll Bar เพื่อใช้งานบนหน้าเว็บได้</span></li>
<li><span style="background-color: #f3f3f3; color: blue; font-size: large;">ศึกษาความสำคัญของส่วนชี้นำการใช้งาน (Guiding User) และหลักการออกแบบที่สำคัญ</span></li>
<li><span style="background-color: #f3f3f3; color: blue; font-size: large;">ศึกษาการจัดกลุ่มข้อมูลบนหน้าเว็บด้วยฟอร์ม และหลักการออกแบบองค์ประกอบของฟอร์มที่สำคัญ</span></li>
</ul><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span style="font-size: large;"><span style="color: blue;"> <span style="background-color: white;"> </span></span><span style="background-color: #fff2cc; color: #990000;"> นอกจากองค์ประกอบบนหน้าเว็บที่เป็นส่วนของข้อมูลแล้ว ยังมีรายละเอียดอื่น ซึ่งมีความจำเป็นต่อการใช้งานบนหน้าเว็บ ยกตัวอย่างเช่น แถบเลื่อน Scroll Bar หรือการสร้างส่วนนำทางผู้ใช้ รวมทั้งการจัดกลุ่มข้อมูลบนหน้าเว็บให้ง่ายต่อการใช้งาน ซึ่งในบทนี้จะได้กล่าวถึงการออกแบบส่วนประกอบดังกล่าว และรายละเอียดอื่นที่เกี่ยวข้อง</span></span><br />
<br />
<span style="background-color: #f3f3f3; color: orange; font-size: large;"><u><strong>ตัวอย่างเว็บเพจสวยๆ</strong></u></span><br />
<span style="background-color: #f3f3f3; color: orange;"><u><br />
</u></span><span style="color: #85898c;"><span style="font-family: Arial;">1. หน้าเว็บสวย 1 สีสวยๆเจ็บจี๊ด<br />
<br />
<img alt="หน้าเว็บสวย 1 สีสวยๆเจ็บจี๊ด" border="1" height="350px" src="http://download.ie-mem.com/UserFiles/Image/webdesignsoi1.jpg" width="560px" /><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span></span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
2. หน้าเว็บสวย 2 สีสวยๆ สีฟ้าสดใส</span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
<img alt="หน้าเว็บสวย 2 สีสวยๆ สีฟ้าสดใส" border="1" height="350px" src="http://download.ie-mem.com/UserFiles/Image/webdesignsoi2.jpg" width="560px" /></span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
</span><br />
<span style="color: #85898c;"><span style="font-family: Arial;">3. หน้าเว็บสวย 3 สีสวยหวาน สีฟ้าและสีชมพู<span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span></span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
<img alt="หน้าเว็บสวย 3 สีสวยหวาน สีฟ้าและสีชมพู" border="1" height="350px" src="http://download.ie-mem.com/UserFiles/Image/webdesignsoi3.jpg" width="560px" /></span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
หน้าเว็บสวย 4 สีชมพู สวยหวานมาก</span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
<img alt="หน้าเว็บสวย 4 สีชมพู สวยหวานมาก" border="1" height="350px" src="http://download.ie-mem.com/UserFiles/Image/webdesignsoi4.jpg" width="560px" /></span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font: small arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
หน้าเว็บสวย 5 สีอ่อนๆ ดูสบายตา แนวสีเอิรทโทน น้ำตาลๆ</span><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; display: inline! important; float: none; font-family: arial, georgia, times, serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-converted-space"> </span></span><span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #85898c; font-family: arial, georgia, times, serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br />
<br />
<img alt="หน้าเว็บสวย 5 สีอ่อนๆ ดูสบายตา แนวสีเอิรทโทน น้ำตาลๆ" border="1" height="350px" src="http://download.ie-mem.com/UserFiles/Image/webdesignsoi5.jpg" width="560px" /></span> <br />
<div style="text-align: left;"></div><br />
<span style="color: purple;"><u>ที่มา </u></span><a href="http://download.ie-mem.com/?file=articlewebtip2&id=91"><span style="color: purple;">http://download.ie-mem.com/?file=articlewebtip2&id=91</span></a><br />
<br />
<br />
</div>information workhttp://www.blogger.com/profile/00955786829595598775noreply@blogger.com0