Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 3)
Jika pada bagian ke-2 template yang anda lihat sama persis dengan previewnya, selanjutnya tahap penyempurnaan akhir dapat anda praktekkan seperti yang tertulis di bawah.
Modifikasi kode 'Header'
Pada tag 'header (#header)' tambahkan kode berikut ini pada mode edit css (style.css) => position: relative; <= Kemudian tambahkan kode di bawah ini:
[css]
#header ul {
margin: 0;
list-style: none;
float: left;
right: 0px;
bottom: 0px;
position: absolute;
}
#header li {
float: left;
display: inline;
}
#header li a:link,#header li a:visited {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #4E4E4E;
padding: 34px 20px 20px 20px;
margin-right: 0.5em;
}
#header li a:hover,#header li a:active {
color: #060;
border-bottom: none;
}
#header li a.aktif {
background: url(../images/img03.jpg) no-repeat center top;
cursor: default;
color: #333;
}
[/css]
Modifikasi kode 'Konten Utama (maincontent)'
Tambahkan kode berikut ini => text-align: justify;
Modifikasi kode 'footer'
Tambahkan ID Tag seperti di bawah ini:
[css collapse="false"]
#footer p {
color: #fff;
font-size: 0.75em;
padding: 15px;
text-align: center;
font-family: arial;
font-weight: bolder;
margin: 0;
clear: both;
}
[/css]
Div Tag tambahan
Tambahkan id Tag seperti di bawah ini:
[css]
#logogambar p.text1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
margin: 0 0 0 15px;
padding: 90px 20px 0px 30px;
font-size: 30px;
color: #FFFFFF;
}
[/css]
Tambahkan juga kode ini untuk sliding tab sidebar:
[css]
#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
font:12px arial;
}
#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}
a.selected {
text-decoration:underline !important;
color:#4b412f !important;
}
#scroller-header {
background:url(../images/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}
#scroller-body {
background:url(../images/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}
#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}
#panel div {
float:left;
}
#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}
#panel ul li.last {
border-bottom:none !important;
}
[/css]
Nah selanjut tinggal menambahkan konten yang anda ingin tulis. Sebelumnya download dulu file tambahannya di link ini. Extract filenya, tempatkan gambar pada folder 'images' dan yang lainnya (file javascript) buatkan folder tersendiri. Beri nama folder 'js', tempatkan 'jquery.scrollTo.js' dan 'jquery-1.3.1.min.js' di folder 'js. Selanjutnya tambahkan kode berikut ini diantara tag <head> & </head>:
[jscript]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('#mask').css({'height':$('#panel-1').height()});
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
$('#panel div').width($('#mask').width());
$('a[rel=panel]').click(function () {
var panelheight = $($(this).attr('href')).height();
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
$('#mask').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
[/jscript]
Pada bagian tag <body> dibawahnya cari dan hapus tulisan "Content for id "header" Goes Here". Untuk header kontennya akan diisikan dengan navigasi menu, ambil contoh menu yang akan dipakai antara lain "Home, gallery, tentang, link, dan kontak". Maka "Content for id "header" Goes Here" ganti dengan kode di bawah ini:
[html collapse="false"]
<ul>
<li><a href="#" class="aktif">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Kontak</a></li>
</ul>
[/html]
"<a href="#" ganti dengan alamat link url anda. Selanjutnya cari kode "<div id="logogambar"></div>" ganti dengan:
[html collapse="false"]
<div id="logogambar">
<p class="text1">“Tulis kata-kata sakti anda <br />
pada bagian ini”</p></div>
[/html]
Selanjutnya cari tulisan "Content for id "maincontent" Goes Here" dan ganti dengan konten inti yang ingin anda tulis.
Cari lagi tulisan "Content for id "footer" Goes Here" dan ganti dengan footer anda, contoh: "<p>Copyright @ 2009 nama-websiteblog-anda.com</p>"
Yang terakhir cari "Content for id "sidebar" Goes Here" dan ganti dengan kode di bawah ini:
[html]
<div id="scroller-body">
<div id="mask">
<div id="panel">
<div id="panel-1">
<ul>
<li>Populer</li>
<li>Populer 2</li>
<li>Populer 3</li>
<li>Populer 4</li>
<li>Populer 5</li>
<li>Populer 6</li>
<li>Populer 7</li>
<li>Populer 8</li>
<li class="last">Populer 9</li>
</ul>
</div>
<div id="panel-2">
<ul>
<li>Komentar 1</li>
<li>Komentar 2</li>
<li>Komentar 3</li>
<li>Komentar 4</li>
<li>Komentar 5</li>
<li>Komentar 6</li>
<li class="last">Komentar 7</li>
</ul>
</div>
<div id="panel-3">
<ul>
<li>Recent post 1</li>
<li>Recent Post 2</li>
<li class="last">Recent Post 3</li>
</ul>
</div>
<div id="panel-4">
<ul>
<li><a href="#">Categories 1</a></li>
<li><a href="#">Categories 2</a></li>
<li><a href="#">Categories 3</a></li>
<li><a href="#">Categories 4</a></li>
<li>Categories 5</li>
<li>Categories 6</li>
<li>Categories 7</li>
<li>Categories 8</li>
<li>Categories 9</li>
<li>Categories 10</li>
<li>Categories 11</li>
<li>Categories 12</li>
<li>Categories 13</li>
<li>Categories 14</li>
<li>Categories 15</li>
<li>Categories 16</li>
<li>Categories 17</li>
<li>Categories 18</li>
<li>Categories 19</li>
<li>Categories 20</li>
<li>Categories 21</li>
<li>Categories 22</li>
<li>Categories 23</li>
<li class="last">Categories 24</li>
</ul>
</div>
</div>
</div>
</div>
[/html]
Nah sudah jadi, coba preview pada halaman browser dengan klik tombol 'F12'. Atau lihat contohnya di halaman ini.
Jika masih ada yang belum jelas silahkan hubungi saya di halaman ini, atau cukup dengan mengisikan komentar pada kotak komentar di bawah. Terima kasih sudah meluangkan waktu mampir di blog saya.
mas maaf saya mau tanya ini link yang buat download fila di layout 3 ko ga ada ya mas mohon bantuannya mas makasihh mas sukses selalu
BalasHapusklo bisa tolong kirim email mas ya
Udah nggak valid lagi ya link yang di filefactory, ini saya upload alamat url barunya,
BalasHapushttp://www.4shared.com/file/G-F3tssE/aset_1_.html
Saya kirim juga ke emailnya mas Adhi.