แต่ง astore แบบรูปข้างบนนี้ผมใข้เวลา 4 นาที!!!
จริงๆแล้วมันก็ไม่ได้มีอะไรยากนะครับ
ขั้นที่ 1 แค่จัดหน้าโดยแก้ css
/* PAGE STYLE */
body {
margin:auto;
padding:0px;
background:#FFFFFF;
color:#000000;
min-width:auto;
font-family:'Verdana', sans-serif;
font-size:9pt;
font-weight:500;
line-height:12pt;
text-decoration: none;
margin-top:190px;
text-align:center;
background-image:
url('http://i129.photobucket.com/albums/p209/arnon001/tem2-1.jpg');
background-position: 50% 0%;
background-repeat: repeat-x
}
/* MAIN PAGE AREA */
#mainwrap {
float:right;
}
#wrap {
margin:0 auto;
text-align:left;
}
#main {margin-top:90px;
width:530px;
overflow:hidden;
border-style: solid;
border-left-width: thin;
border-top-width: thin;
border-bottom-width: thin;
border-right-width: thin;
border-color: #00FFFF;
}
div#header {
background:#206BA2;
padding:6px 24px 4px;
margin:0;
vertical-align:middle;
}
a#mainheadertitle {
padding:0px;
font-family:serif;
font-size:15pt;
font-weight:normal;
line-height:1.5em;
color:#FFFFFF;
margin:0px;
text-align:left;
vertical-align:middle;
text-decoration:none;
}
a#mainheadertitle:hover {
text-decoration:underline;
}
td#mainheaderlogo {
padding:5px;
}
img#mainlogo {
padding-right:5px;
}
div#mainsubheader {
background:#F2F2F2;
padding:10px 24px;
vertical-align:middle;
}
div#contentsubheader {
width:482px;
overflow:hidden;
}
div#subheaderlinks {
float:right;
text-align:right;
}
div#subheadertitle {
font-size:12pt;
font-weight:bold;
}
div#contenterror {
background:#FFFFFF;
padding:14px 24px;
}
span.currentpage {
font-weight:bold;
}
span.error {
font-weight:bold;
}
/* SIDEBAR */
#sidebar {
float:left;
width:200px;
overflow:hidden;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px;
}
/* GENERAL SIDEBAR WIDGET STYLES */
ul#widget,ul.widget li.widget {
margin:0;
padding:0;
list-style:none;
}
li.widget {
float:left;
width:200px;
margin-bottom:0px;
}
ul#widget div {
background:#FFFFFF;
}
ul#widget h3 {
font-family:'Verdana', sans-serif;
font-size: 10pt;
font-weight: bold;
color:#FFFFFF;
margin:0px;
padding:4px 15px 4px;
text-align:left;
background-image:
url('http://i537.photobucket.com/albums/ff332/qecera/tab.jpg');
}
code css ด้านบนนี้ใส่ตรง Global ครับ
ขั้นที่ 2 ก็เอารูปภาพไปใส่เป็น Background ครับ
ทีนี้จะแต่งยังไงก็อยู่ที่จินตนาการครับ ลองดูภาพประกอบ
จากภาพแสดงให้เห็นว่าจริงๆแล้วก็เป็นเพียงการจัดหน้าเวบธรรมดา
แล้วเอา Background มาซ้อนครับ
วิธีการใส่ Background ก็คือ เอา url รูป background ไปใส่ตรงบรรทัดที่ 16 ใน css ครับ
ส่วนตรงหัวข้อ Search ที่เป็นสีดำๆ ก็เอา url รูปไปใส่ตรงบรรทัดรองสุดท้ายของ css ครับ
แค่นี้เองครับ การทำไม่ยากหรอกครับ มันยากตรงที่ทำยังไงให้มันออกมาดูลงตัว ให้ดูดี
ทุกคนทำได้อยู่แล้วครับ...
รูปตัวอย่าง Background ของผมครับ
ขอบคุณครับ