Rekomondasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen html.
2. Inline: properti diterapkan secara langsung per baris atau per elemen html.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen html.
Untuk membuat desain layout, kita harus mempersiapkan wrapper dulu. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
Langkah pertama yang harus dilakukan yaitu harus mendefinisikan style nya terlebih dahulu dengan nama mystyle.css.
Setelah itu baru lah membuat layoutnya.
Untuk lebih jelasnya, lihat contoh desain layout dibawah ini:
Untuk membuat desain layout seperti di atas, langkah yang harus dilakukan yaitu:
Yang pertama, membuat kerangka desain layout terlebih dahulu, dengan kode berikut:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 85px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;
}
#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;
}
#right {
width: 227px;
height: 180px;
border: 1px solid red;
}
#footer {
clear: both;
height: 75px;
border: 1px solid blue;
}
Simpan dengan nama tugas2.css
Kemudian tulis kode html berikut ini:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout Halaman Web</title>
<link rel="stylesheet" href="tugas2.css" type=& quot;text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Simpan dengan nama desain.html
Untuk melengkapi dari desain diatas agar menghasilkan halaman web yang atraktif, maka setiap kolom-kolom yang kosong harus kita isi dengan cara berikut:
Buka file tugas2.css, kemudian lengkapi kode html nya seperti berikut
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid #99CC00;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: black;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: black
}
#bok1 {
float: left;
margin-right:20px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#bok2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok3{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok4{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#bok6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #99CC00;
border: 1px solid #99CC00;
}
#bok8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#bok9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Selanjutnya mengetikkan kode berikut pada file html yang tadi dibuat
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout Halaman Web</title>
<link rel="stylesheet" href="tugas2.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "bok1">
<img src="kampus qu.jpg">
</div>
<div id = "bok7">
<img src="elektro.jpg">
</div>
<div id = "bok5">
</div>
<div id = "bok6"><font color="black"> Search :
</div>
<div id = "bok2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "bok3">
<a href="link.html"><font color="black"> Contact</a></p>
</div>
<div id = "bok4">
<a href="link.html"><font color="black"> Home</a></p>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "bok8">
<img src="gambar3.jpg">
</div>
<div id = "bok9">
<img src="gambar5.jpg">
</div>
</div>
<div id="content">
<b>Lomba Desain Web <br/></b>
<br/>
23 Maret 2010 [07:00]<br/>
Buat kamu-kamu yang asyk dengan mendesain web, silahkan ikuti lomba desain web yang
diselenggarakan oleh Jurusan Elektro UM.<br/>
Pemesanan tiket dapat langsung dibeli ke gedung Jurusan Elektro (G4)<br/>
<br/>
Read More...<br/>
<br/>
</div>
<div id="right">
<b>Events :</b>
<ul>
<li>Lomba Menggambar </li>
<li>Lomba Membuat Blog</li>
<li>Lomba Ubah Foto</li>
</div>
</div>
<div id="footer">
<p align="center">© 2010 Teknik Elektro UM, Malang, Indonesia</a>
</div>
</div>
</body>
</html>
Hasil akhir dari tadi adalah:
Tidak ada komentar:
Posting Komentar