Sudah dijelaskan pada artikel sebelumnya bahwa website
statis yaitu website yang isinya bersifat statis. Web ini sangat cocok untuk
perusahaan berskala kecil yang ingin memberikan informasi singkat mengenai keberadaan
perusahaan, produk atau jasa yang diberikan.
Nah, sekarang kita akan mulai membuat website statis itu.
Adapun software yang kita perlukan untuk membuat dan mengeksekusi website,
yaitu :
a.
Dreamweaver (yang saya gunakan yaitu Adobe
Dreamweaver CS6)
b.
Browser (Seperti Firefox, Chrome, atau Internet
Explorer versi baru)
Sebelum itu, kita harus download dulu berkas yang berisi
gambarnya, linknya yang ada dibawah gambar.
Lalu Simpan folder "media" pada Dreamweaver Site folder anda
Kita harus tahu dulu dimana tata letak webnya dengan cara
membuat sketsa layout diatas kertas.
Ketika kita sudah tahu sketsa layout, kita mulai membuat
website. Disini, saya membuatnya dengan kode HTML. Dibawah inilah kode
HTML-nya.
Pertama : kita akan mengatur atribut websitenya.
Kedua : kita buat ruang layoutnya menggunakan Div tag ditempatkan didalam
kode <body>...</body>.
<div class="wrapper">
</div>
Ketiga : kita akan buat Header dan navigasi-nya dan ditempatkan di
dalam kode div tag yg sudah dibuat.
<header>
<h1>Ilham Blog </h1>
<nav>
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">Designs</a>
<ul>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
</ul>
</li>
<li><a
href="">Tutorials</a>
<ul>
<li><a
href="">Getting Ready</a></li>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
<li><a
href="">Publication</a></li>
<li><a
href="">Hosting</a></li>
</ul>
</li>
<li><a
href="">Downloads</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</header>
Keempat : kita akan membuat layout isi/konten pada website dan
ditempatkan di dalam div tag dibawah kode </header>.
<section class="content">
<article>
<figure>
<img src="media/css2.jpg" width="246"
height="195" />
</figure>
<h3>Mengenal CSS Style</h3>
<p>Cascade Style Sheets (atau biasa disebut CSS Style) adalah
suatu aturan yang digunakan untuk menentukan font pada tulisan yang akan
ditampilkan dalam bentuk HTML atau dokumen web lainnya.</p>
<p> </p>
</article>
</section>
Kelima : kita akan membuat layout Sidebar atau aside yang ditempatkan
didalam div tag dibawah kode </section>
<aside>
<section>
<banner>Related Post</banner>
<a
href="">Designs</a>
<a
href="">Tutorials</a>
<a
href="">Downloads</a>
<a
href="">Static Page</a>
<a
href="">Dynamic Page</a>
<a
href="">Publication</a>
<a
href="">Hosting</a>
</section>
</aside>
Keenam : kita akan membuat footer ditempatkan didalam div tag dibawah
kode </aside>
<footer><a href="">Home</a>
</footer>
Kode-nya hampir siap. Dibawah ini adalah website yang sudah dihasilkan
tapi belum sempurna karena belum diberi CSS style dan gambar
Dibawah ini adalah kode CSS untuk website yang setengah jadi. Letakkan kode
ini di dalam kode <head> dibawah kode <title>.
<style type="text/css">
.wrapper {
background-color:
#FFF;
width: 900px;
margin-top: 10px;
margin-right:
auto;
margin-bottom:
10px;
margin-left: auto;
}
header {
font-weight: bold;
display: block;
clear: both;
padding-top: 1px;
padding-bottom:
1px;
font-size: 24px;
padding-right:
0px;
padding-left: 0px;
}
nav ul {
font-size: 14px;
font-weight: bold;
background-color:
#666;
display: block;
padding-top: 0px;
padding-right:
0px;
padding-bottom:
22px;
padding-left: 0px;
border-top-width:
1px;
border-top-style:
solid;
border-top-color:
#fff;
list-style-type:
none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
color: #FFF;
text-decoration:
none;
background-color:
#666;
white-space:
nowrap;
display: block;
margin-left: 1px;
padding-top: 2px;
padding-right:
40px;
padding-bottom:
2px;
padding-left:
40px;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#FFF;
}
article {
margin-top: 0px;
margin-right: 0px;
margin-bottom:
20px;
margin-left: 0px;
display: block;
padding-bottom:
25px;
padding-top: 10px;
}
aside {
display: block;
float: left;
width: 220px;
padding-right:
0px;
padding-top: 0px;
padding-bottom:
0px;
padding-left:
10px;
margin-bottom:
20px;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
}
figure {
display: block;
padding: 10px;
margin: 0px;
float: left;
}
hgroup {
display: block;
padding-bottom:
25px;
margin-bottom:
25px;
}
ul li a:hover {
background-color:
#999;
}
li:hover ul {
display: block;
position:
absolute;
padding: 0px;
}
aside section a:hover {
background-color:
#eee;
}
footer a {
color: #FFF;
text-decoration:
none;
}
footer a:hover {
text-decoration:
underline;
}
.content {
display: block;
width: 650px;
float: left;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#eee;
}
banner {
background-color:
#666;
display: block;
font-weight: bold;
color: #FFF;
padding-top: 4px;
padding-right:
0px;
padding-bottom:
4px;
padding-left: 0px;
border-right-width:
1px;
border-left-width:
1px;
border-right-style:
solid;
border-left-style:
solid;
border-right-color:
#000;
border-left-color:
#000;
}
aside section a {
display: block;
padding: 10px;
color: #000;
text-decoration:
none;
border-bottom-width:
1px;
border-bottom-style:
solid;
border-bottom-color:
#eee;
}
footer {
display: block;
clear: both;
background-color:
#666;
padding-top: 20px;
padding-bottom:
20px;
padding-right:
0px;
padding-left: 0px;
text-align:
center;
}
li:hover li {
font-size: 12px;
float: none;
}
li:hover a {
background-color:
#999;
}
li:hover li a:hover {
background-color:
#b6b6b6;
}
body,td,th {
font-family:
Calibri;
}
body {
background-image:
url(media/bg.jpg);
background-repeat:
repeat-x;
}
</style>
Setelah itu, simpan dalam format HTML.
Thanks for reading & sharing Dreamweaver Tutorial
Terimakasih tutorialnya Om, statis memang penting untuk sebuah blog atau website.
ReplyDeleteHmm sepertinya bisa dipraktekan ni brader terima kasih ya sudah memberikan info yang muantappp.
ReplyDeleteMantaff gan :)
ReplyDelete