Berikut adalah cara merancang layout web dasar dengan menggunakan alat bantu dasar yaitu notepad (sebaiknya gunakan notepad ++). Sebenarnya banyak cara untuk merancang tampilan websiter seperti adobe dreamweaver, photoshop, wysiwyg, dan masih banyak lagi yang lainnya. Tapi tidak ada salahnya jika kita gunakan notepad, justru dengan menggunakan tool yang jadul ini bisa membuat kita sangat dekat dan lebih paham dengan coding - coding pembentuk sebuah website. OK sudah cukup mutar - mutarnya sekarang saatnya kita langsung ke tahapanya :
Langkah - demi langkah :
1. Silahkan jalankan / buka aplikasi notepadnya, lalu tinggal copas saja coding dibawah biar cepetan dikit. Kemudian save dengan nama index.html.
<html>
<head><title>Main Project</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="mode/style.css" />
<link type="text/css" rel="stylesheet" href="mode/topmenustyle.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="topmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">Web Programmer</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tips & Trik</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Review</a></li>
</ul>
</div>
<div id="kontenkiri"></div>
<div id="kontenkanan"></div>
<div id="footer"></div>
</div>
</body>
</html>
Ket :
- div berfungsi untuk mengelompokan / membagi halaman web menjadi beberapa bagian.
- div id yang kita definisikan pada css nantinya akan ditambahkan tanda # didepanya.
misal : - div id ="kontenkiri" pada css akan dituliskan #kontenkiri, begitupun dengan id lainya.
- coding <link type="text/css" rel="stylesheet" href="mode/topmenustyle.css"/>
- dan <link type="text/css" rel="stylesheet" href="mode/style.css"/> dimaksudkan untuk menghubungkan css ke html.
Berikut screen shot hasilnya, semua masih standar dan tampak halamanya juga belum dibagi - bagi :
dari gambar diatas terlihat bahwa hasilnya masih dalam bentuk sederhana, selanjutnya kita akan poles coding html diatas dengan coding css agar tampilanya menjadi lebih memukau.
2. Selanjutnya copy coding css dibawah untuk mempercantik / membagi tampilanya menjadi beberapa bagian dan simpan dengan nama style.css.
body{
background: #f1f1f1;
}
#wrapper{
background: #f1f1f1;
border: 1px solid black;
width: 1024px;
margin: 0px auto;
height: auto;
}
#header{
background: orange;
width: 1024px;
margin: 0px auto;
height: 170px;
margin-top: 10px;
border-radius: 20px 0 20px 0;
}
#topmenu{
width: 1024px;
margin: 0px auto;
height: 30px;
margin-top: -10px;
}
#kontenkiri{
background: #f8d883;
width: 750px;
margin: 0px auto;
float: left;
height: 400px;
margin-top: 10px;
border-radius: 20px 20px 20px 20px;
}
#kontenkanan{
background: #f8d883;
width: 272px;
margin: 0px auto;
float: right;
height: 400px;
margin-top: 10px;
}
#footer{
background: orange;
margin: 0px auto;
width: 1024px;
height: 30px;
margin-top: 420px;
border-radius: 10px 0 10px 0;
}
o...ya...buat folder baru dengan nama mode, lalu pindahkan file style.css tadi kedalam folder mode tersebut. coding diatas hanya akan memberikan efek pembagian halaman dalam beberapa bagian, sedangkan untuk top menu nya silahkan ikuti langkah ke tiga berikut.
3. selanjutnya copy coding css dibawah ini untuk memberikan efek dropdown menu pada list menu yang standard tadi.
/* MENU-UTAMA TOP MENU*/
#topmenu ul {
background: rgba(255, 165, 0, 0.7); /* Memberi warna pada latar belakang menubar */
padding: 0 6px; /* Membuat jarak antara teks dengan sisi kotak menubar */
border-radius: 0px 0px 0px 0px; /* Membuat efek tumpul pada sudut menubar */
list-style: none; /* Menghilangkan tanda titik di samping daftar menu */
position: relative; /* Untuk mengatur setiap posisi elemen */
box-shadow: 0px 0px 5px rgba(0,0,0,.25); /* Membuat efek bayangan */
}
#topmenu ul:after {
content: "";
clear: both;
display: block;
}
#topmenu ul li {
float: left;
}
#topmenu ul li:hover {
background: #ccc;
}
#topmenu ul li a {
display: block;
padding: 5px 40px;
color: #fff; /* Memberi warna pada teks */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.95em;
text-decoration: none;
border-radius: 40px 0 40px 0; /* Memberi border pada elemen */
}
#topmenu ul li:hover > a {
color: #333;
}
/* SUB-MENU */
#topmenu ul ul {
background: #ccc;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
display: none;
}
#topmenu ul ul li {
float: none;
position: relative;
}
#topmenu ul ul li a {
padding: 5px 40px;
color: #333;
}
#topmenu ul ul li a:hover {
background: rgba(255, 165, 0, 1);
color: #fff;
-webkit-transition:background-color 500ms ease-in-out;/* efek animasi untuk chrome */
-moz-transition:background-color 500ms ease-in-out;/* efek animasi untuk mozila */
}
#topmenu ul li:hover > ul {
display: block;
}
/* SUB-SUB-MENU */
#topmenu ul ul ul {
position: absolute;
left: 100%;
top:0;
}
lalu simpan pada folder mode dan beri nama topmenustyle.css. Berikut screen shot hasil akhirnya :
Note : File index.html letakan diluar folder mode, sedangkan file style.css dan topmenustyle.css letakan didalam folder mode. Tulisan yanga diapit tanda /* */ merupakan penjelasan dari codingnya.
Finish.
Bagikan
Merancang Layout / Halaman Website dengan Tampilan Dropdown Menu
4/
5
Oleh
Jiu Bunta
