Dibagian satu yang lalu kita sudah sampai pada perancangan kerangka website 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 :
tag HTML dan CSS dari project kita terdahulu adalah sebagai berikut
<!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 | Websiteku</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>
The standard Lorem Ipsum passage.
Text apa saja bebas sakarep anjeun
Text apa saja bebas sakarep anjeun
Text apa saja bebas sakarep anjeun
</body>
</html>Untuk melihat demo dan hasil dari tampilan project website yang akan saya bahas kali ini klik di sini atau bisa di lihat pada gambar berikut :
Membuat Input Pencarian
Sesuai dengan judulnya yaitu membuat website semantik 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"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 ]
.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" :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 property float : 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 okayApabila 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 sehingga tampak seperti dibawah ini
save image diatas dengan nama bg_navigation_hover.jpg simpan di folder images. Selanjutnya mari kita tambahkan tag HTML sebagai berikut:
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
okay sekarang kita sudah mempunyai menu pencarian, memasang logo dan juga menu navigasi. langkah selanjutnya dan terakhir adalah membuat markup untuk content dari website kitaUntuk Bagian membuat content akan saya lanjutkan di bagian ke 3 :)
