ผมเห็นว่าเพื่อน ๆ พี่ ๆ น้อง ๆ นั้นบ่นกันเหลือเกิน ว่าเเต่งยากมั่ง ออกเเบบยากโคตร
เเละผมยังเห็นที่คุณเเป๊ะ (thusawan) ทำเเล้วบอกได้เลย งามสุดยอดครับ
ถ้าอยากได้เเบบสวยงามสุด ๆ ละก็ผมเเนะนำคุณเเป๊ะเลยครับ
มันเลยจุดประกายให้ผมงัดเอาความรู้เกี่ยวกับเว็บเก่า ๆ มา
ผมก็เลยเริ่มจากใช้โฮสฟรีเเละโดเมน .co.cc ไปก่อน
ทำไปทำมา เอ้า ! มันก็ไม่ค่อยยากหนิ ก็ทำไปทำมาก็ได้ออกมาหน้าตาเป็นเเบบนี้
################### ตอนที่ 1 #######################
เข้าเรื่องเลยดีกว่าครับ
วันนี้ผมจะมาเเนะนำเรื่องการทำเมนูด้านซ้ายให้สวยงาม
จากเเบบเก่าเป็นเเบบนี้
เราจะมาทำให้มันเป็นเเบบนี้กันครับ
หรูเลยไช่มิหละ อยากได้กันละสิ
อยากได้ผมก็จะบอกวิธีทำครับ
ขั้นเเรก ให้เราไปหาโค้ดเมนู CSS มาก่อนครับ หาจากโปรเเกรมมาก็ได้ครับ ผมจะยกตัวอย่างโดยผมหาจากเว็บ
hxxp://www.dynamicdrive.com/style/csslibrary/category/C1/
ก็ไปจัดการ Copy โค้ดเเละรูปมาไส่เครื่องเราก่อน
CSS Styles ที่ผมใช้ก็คือ
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.arrowlistmenu{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(http://www.dynamicdrive.com/cssexamples/media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://www.dynamicdrive.com/cssexamples/media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>
เเละโค้ด HTML ที่ผมใช้ก็คือ
<div class="arrowlistmenu">
<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://ชื่อลิ้งค์ของ Categories">หน้าเเรก</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ก</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ข</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ค</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ง</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">จ</a></li>
</ul>
</div>
ผมก็จัดการไปเพิ่ม Custom Boxes โดยจัดให้อยู่ทางด้านซ้าย เเละ Order 1 เลย
เเละก็จัดการไส่โค้ดเหมือนข้างบน ดังนี้
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.arrowlistmenu{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(http://www.dynamicdrive.com/cssexamples/media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://www.dynamicdrive.com/cssexamples/media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>
<div class="arrowlistmenu">
<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://ชื่อลิ้งค์ของ Categories">หน้าเเรก</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ชื่อ categories</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ชื่อ categories</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ชื่อ categories</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ชื่อ categories</a></li>
<li><a href="http://ชื่อลิ้งค์ของ Categories">ชื่อ categories</a></li>
</ul>
</div>
เเล้วก็กด Save all Setting ซะเลย
เเค่นี้เราก็จะได้เมนูเเบบไหม่ออกมา
ขั้นตอนต่อมาก็คือ เเก้ไขลิ้งค์โดยการนำลิ้งค์ของ Categories อันเก่ามาไส่เเทนที่
http://ชื่อลิ้งค์ของ Categories
เเละตรง ก ข ค ง จ ให้เราเปลี่ยนเป็นชื่อของ Categories
พอเราเเก้เสร็จก็กด Save all Setting
ก็จะได้เมนูใหม่ออกมาเเล้นนนนนน
ขั้นตอนสุดท้ายก็คือการเอา Categories อันเก่าออก
เอาออกได้โดยการตั้งให้มันไม่โชว์ครับ
เเค่นี้ก็เป็นอันเสร็จครับ
พูดไม่ค่อยเก่งอะครับ ไม่เข้าใจตรงไหนก็โพสถามได้ครับ
ครั้งหน้าจะมาบอกวิธีการทำ Header เเละ Footer ครับผม
################## ตอนที่ 2 ##################
ในตอนที่สอง นี้ผมจะมาบอกวิธีการทำ Header ของเว็บไซต์ครับ
ผมจะยกตัวอย่างจากโปรเเกรม Dreamweaver 8 นะครับ
ขั้นเเรกให้เราดูก่อนนะครับ ว่าร้านของเราหนะมีความกว้างกี่ % ของร้านเรา
โดยไปดูได้ที่เเถบ Layout ในช่อง Width ครับ ของผมที่ใช้ทั่ว ๆ ไปก็คือ 90%
พอเราได้ขนาดเเล้ว เราก็เปิดโปรเเกรม Dreamweaver 8 ขึ้นมา
เเล้วทำการสร้างตารางขึ้นมา 1 ตาราง โดยให้ใส่ตัวเลข
ในช่อง Table Width ให้ไส่เลขตามความกว้างของร้านค้าเรา
ทีนี้เราก็จัดการให้มันอยู่กลางซะ
ต่อจากนี้ก็อยู่ที่เราเเละครบว่าจะดีไซน์มันได้ดีเเค่ไหน ผมก็ไม่สามารถบอกได้ เพราะเเนวไครเเนวมันครับตรงนี้
พอทำเสร็จ ให้เรา save เป็นชื่อ header.html
หลังจากนั้นให้อัพโหลดไฟร์ header.html (ถ้า header.html เรามีรูปก็ให้อัพรูปด้วย) ขึ้นโฮสของร้านเรา
พออัพเสร็จเเล้ว ให้เข้าไปที่เเถบ Site ใน Control Panel
ในช่อง Header ให้เราไส่ที่อยู่ของไฟร์ header.html ที่เราอัพขึ้นไป ถ้ามันอยู่ root อยู่เเล้ว ก็ไส่ header.html ไปได้เลย
เเค่นี้ก็เป็นอันว่า้เสร็จเเล้วหละครับ สำหรับการทำ Header ครับผม
#####################################################
โปรดติดตามตอนต่อปาย
ไทย เสียว บอร์ด
