Selamat pagi semuanya :) ini merupakan artikel bagian ke 2 dari artikel sebelumnya yang berjudul Belajar Membuat Website Tanpa Table (table less) dengan Photoshop dan Dreamweaver Bagian 1. Di artikel sebelumnya saya menjelaskan tahapan cara membuat website mulai dari membuat background dan layout desain di Photoshop sampai menyiapkan struktur tag HTML untuk kerangka website dengan menggunakan macromedia Dreamweaver.Sekarang mari kita lanjut ke pembuatan input pencarian, navigasi website, content web dan lain sebagainya. Untuk menyegarkan lagi ingatan kita, berikut ini merupakan hasil akhir projek kita pada bagian pertama :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome | Bila Luang</title>
<style media="screen">
body {
background: #000000 url(images/background.jpg) no-repeat top;
margin:0;
padding:0;
font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
}
.header{
background:url(images/bgheader.png) top right no-repeat;
width: 646px;
height: 150px;
margin: 0 auto;
padding:0;
}
.content{
width: 646px;
margin: 0 auto;
background:url(images/bgcontent.png);
}
.container{
padding:5px 10px 10px 15px;
line-height:18px;
}
.container h1{
border-bottom:1px solid #999999;
font-size:18px;
line-height:30px;
margin-bottom:10px;
}
.container p{
margin-bottom:10px;
}
.footer{
width: 646px;
height: 30px;
margin: 0 auto;
margin-bottom:50px;
background:url(images/bgfooter.png) top right no-repeat;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="container">
<h1>The standard Lorem Ipsum passage.</h1>
<p>Text apa saja bebas sakarep anjeun</p>
<p>Text apa saja bebas sakarep anjeun</p>
<p>Text apa saja bebas sakarep anjeun</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Membuat Input Pencarian
Sesuai dengan judulnya yaitu membuat website tanpa table maka tag HTML yang akan kita buat tidak akan menggunakan table. Mari kita mulai mark up tag HTML dari yang paling atas yaitu input pencarian, silahkan tambahkan tag berikut pada div dengan class="header"
<div class="header">
<div class="left">
<form name="search_form" action="/* link untuk proses */" method="post">
<input type="text" name="search" id="search" class="search" value="Pencarian" />
<input type="submit" name="submit" id="submit" class="submit" />
</form>
</div>
</div>
Pada tag bagian CSS tambahkan gaya css sebagai berikut:
.header .left{
width: 230px;
float:left;
height: 30px;
padding:68px 0 0 40px;
color:#FFFFFF;
}
.header .left .search{
width: 250px;
height: 14px;
padding:3px 5px;
color:#aaa;
}
.header .left .submit{
display: none;
}
dengan tag di atas kita memberi gaya css pada div dengan class="left", class="search", dan class="submit" sehingga kita mendapatkan tampilan web sebagai berikut :
Buat sebuah gambar berukuran 10px x 10px dengan tingkat transparansi nol di Photoshop save dengan nama transparent.gif, cara membuatnya pada canvas rubah opsi blending option - opacity = 0% apabila gambar ini di tampilkan di browser maka gambar ini tidak akan terlihat. Tapi karena tidak terlihat bukan berarti tidak berguna, ini bisa kita jadikan background untuk elemen tertentu seperti input sehingga tampilannya juga menjadi transparan tidak putih.
Sekarang mari kita tambahkan tag background dan menghilangkan border pada css [ .header .left .search ]
background:url(images/transparent.gif);
border:0;
width: 250px;
height: 14px;
padding:3px 5px;
color:#aaa;
}
Hasilnya kita memiliki form invisible dan akan terlihat seperti ini :
Menempatkan Logo
Pada layout project ini kita menempatkan logo pada sebelah kanan silahkan buat logo anda sendiri dengan ukuran yang cukup kemudian tambahkan tag html berikut setelah tag dengan class="left" :
<div class="left">
<form name="search_form" action="/* link untuk proses */" method="post">
<input type="text" name="search" id="search" class="search" value="Pencarian" />
<input type="submit" name="submit" id="submit" class="submit" />
</form>
</div>
<div class="right"><a href="#"><img src="images/logo.png" alt="w3Function.com" /></a></div>
Tambahkan markup CSS untuk class="right"
.header .right{
width:225px;
padding:30px 60px 0 0;
float:right;
}
.clear{ clear:both; }
Perhatikan pada class="left" ada property float : left; dan pada class="right" ada propertyfloat : right properti ini digunakan untuk menggeser elemen sesuai dengan yang kita inginkan ke sebelah kiri/kanan. Apabila dibawah parent ada dua elemen dengan float berlawanan maka elemen tersebut akan membentuk kolom sejajar seperti table dengan 2 kolom asalkan presisi width nya tepat. kalau presisi pengukuran width anda salah maka elemen di sebelah kanan akan jatuh ke bawah sehingga hanya terbentuk 2 kolom yang berantakan. Hal yang paling rumit adalah setelah selesai mengatur presisi di browser anda harus melakukan tes di beberapa browser yang lain, karena setiap jenis browser memiliki kompatibilitas yang berbeda-beda. bisa saja di firefox udah okay, tapi begitu dilihat di internet explorer ternyata gak ada yang okay.
Apabila presisinya sudah tepat maka tampilan nya akan seperti dibawah ini :
Pada tag CSS diatas bisa anda lihat ada tag seperti ini .clear{ clear:both; } , tag ini digunakan untuk membersihkan tag sebelumnya dari float sehingga tag yang dibuat di bawah float tidak terpengaruhi geser ke kanan atau ke kiri ( kembali default ).
Membuat Navigasi Menu
Saya akan menggunakan tag
<ul> untuk pembuatan navigasi menu, sebelum menuliskan tag silahkan
membuat background dengan ukuran 10 pixel x 40 pixel buat gradasi hitam ke
merah tua. save sebagai image dengan nama bg_navigation_hover.jpg simpan di folder images. Selanjutnya mari kita tambahkan tag HTML sebagai berikut:
<ul class="navigation">
<li class="active"><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Galerry</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
tambahkan gaya markup CSS sebagai berikut pada bagian CSS tepat di bawah tag .clear
ul.navigation{
list-style:none;
margin:0 auto;
padding:0;
}
ul.navigation li{
display: block;
float: left;
text-align: center;
width: 125px;
height:40px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
line-height:30px;
text-decoration:none;
border-left:3px solid #000000;
}
ul.navigation li:hover, li.active{
background:url(images/bg_navigation_hover.jpg) repeat-x top;
}
ul.navigation li a{
display: block;
width: 125px;
height:40px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
line-height:30px;
text-decoration:none;
}
ul.navigation li a:hover, ul.navigation li a.active{
color: #6fca0e;
}
tampilan navigasi menu kita akan tampak seperti di bawah ini :
Membuat
Content Web
Ok
sekarang kita sudah mempunyai menu pencarian, memasang logo dan juga menu
navigasi. langkah selanjutnya dan terakhir adalah membuat markup untuk content
dari website kita
Untuk Bagian membuat content akan saya lanjutkan di
bagian ke 3 
0 komentar:
Post a Comment