[บทความ]มาตกเเต่งร้าน Associate-O-Matic 4.01 กันเถอะ !!

[เกรียนเทพ]

ผมเห็นว่าเพื่อน ๆ พี่ ๆ น้อง ๆ นั้นบ่นกันเหลือเกิน ว่าเเต่งยากมั่ง ออกเเบบยากโคตร
เเละผมยังเห็นที่คุณเเป๊ะ (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 ครับผม

#####################################################

โปรดติดตามตอนต่อปาย

[janistar]

ขอบคุณค่ะ ตอนนี้กะลังทำบ้าบอกับ Associate-O-Matic 4.01 พอดีเลย ได้ความรู้เพิ่มอีกแล้ว 

[kornss]

มาขอบคุณไม่ทันคุณแบมซะแล้ว 

[*~เก้าคุง~*]

รบกวนย้ายไป tutorial ด้วยเด้อ เด๋วตก

[Clicker]

กำลังลองผิดลองถูกอยู่ ขอบคุณมากๆ ครับ

[pbforever]

ขอบคุณครับ เยี่ยมเจงๆ
มารอตอนต่อปายครับ

[pburin22]

ขอบคุณครับ

[D-N-A]

แหร่มเรย

[เกรียนเทพ]

กำลังเขียนการทำ header อยู่นะครับ

ประมาณดึก ๆ นู่นเเหละถึงจามาโพส

[asshur]

+1

[khanom]

ขอบคุณค่า +1

[ก็องโต้]

ขอบคุณครับ มาปูเสื่อรอ 

[เกรียนเทพ]

ไครมีเทคนิคการตกเเต่ง ดี ๆ มาเเชร์กันหน่อยครับ

[Sylar]

สวยดีครับ 

[kdwc]

ขอบคุณคร่า แล้ว Deal เราเอาลิ้งจากไหน บอกหน่อยๆ

[Sylar]

อะไรคือ deal

[เกรียนเทพ]

ขอบคุณคร่า แล้ว Deal เราเอาลิ้งจากไหน บอกหน่อยๆ

Deal ไหนครับ ?

[nu221]

 :Dถามคุณ tazan951 หน่อยครับใช้โฮสฟรีที่ใหนทดลองทำครับปรับเเตง่ในส่วนของ seo ไฟล์ .htaccess ได้หรือเปล่าผมทดลองทำใน 000webhost มันทำ seo ไฟล์ .htaccess ไม่ใด้อ่ะครับ

[เกรียนเทพ]

:Dถามคุณ tazan951 หน่อยครับใช้โฮสฟรีที่ใหนทดลองทำครับปรับเเตง่ในส่วนของ seo ไฟล์ .htaccess ได้หรือเปล่าผมทดลองทำใน 000webhost มันทำ seo ไฟล์ .htaccess ไม่ใด้อ่ะครับ

Freehostia.com ครับ

เว็บขายโทสับผมก็ไช้ 000webhost.com อะคับ
มันทำ SEO ไม่ได้ ก็กะจะย้ายเข้าโฮสเสียตังผมเเล้วอะครับ ไม่อยากทิ้งเว็บนี้ อะครับ เสียดาย
เพราะเพิ่งจดโดเมนมาใหม่ เเล้วก็สมัครโฮสของไปเถอะพ่อขี้โกง (godaddy.com) อะครับ
เดี๋ยวผมดูก่อนนะครับ ว่าโฮสเหลือให้เเอดโดเมนไหม ถ้าเหลือก็จะเเบ่งโฮสให้ใช้ครับ

เฮ้อ โฮสปิสาจล่มบ่อย เลยลองย้ายมาลองโฮสเเพลนถูก ๆ นั่งโหลดเว็บปั่นโฮสเก่ามาไส่อันใหม่ เหนื่อยชิบเป้งเยย
ไครพอจะมีวิธีย้ายไฟร์ข้ามโฮสไหมคร้าบ

[น้องบิ้ว]

ขอบคุนมากคับ ติดตามมมมคับ ตอนต่อไป