Bagi seorang pemula dalam dunia Design Website, biasanya akan banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan TAG DIV. Hal ini dikarekanakan TAG DIV tidak dapat berdiri sendiri dalam penggunaannya, dimana TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik
Pada contoh kali ini, kami mencoba menyajikan salah satu contoh layout product pendidikan yang demo programnya dapat anda lihat pada alamat di sini. Untuk membuat layout seperti demo program tersebut, langkah - langkah yang bisa kita lakukan adalah sebagai berikut
1. Persiapkan design layout
Persiapan design dilakukan dengan cara membuat sebuah design halaman website, kemudian kita potong - potong sesuai dengan kebutuhan seperti terlihat pada gambar disamping. Pada gambar terlihat gambar dipotong kecil - kecil tetapi beraturan sesuai dengan kebutuhan, sehingga design website yang kita buat nantinya akan menjadi lebih ringan ketika sudah publish di internet
2. Membuat halaman layout index.php
Pada langkah berikut ini, kita harus bisa menentukan bagian - bagian dalam layout tersebut seperti bagian Header , Bagian Content, Bagian footer dan bagian - bagian lain yang akan digunakan dalam layout website. Karena layout menggunakan TAG DIV, maka kita belum bisa melihat tampilan layout sebelum kita menggunakan CSS.
Berikut script html dari design layout kita
<!-- bagian ini merupakan hasil generate dari macromedia dreamweaver -->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- bagian ini untuk menampilkan icon website kecil disebelah alamat url -->
<link rel="Shortcut icon" href="images/favicon.jpg" type="image/x-icon" />
<!-- bagian ini untuk menampilkan title halaman website -->
<title>Tutorial pembelajaran website - computer technology </title>
<!-- bagian ini digunakan untuk memanggil script css yang berada pada folder style -->
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style/slider.css" type="text/css" />
<!-- bagian ini digunakan untuk memanggil script javascript yang berada pada folder js -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/slider.min.jquery.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<!--
bagian utama halaman website dengan lebar tertentu yang akan kita posisikan pada
posisi center browser.
-->
<div id="wrapper">
<!-- membuat bagian header untuk penempatan logo dan lain - lain -->
<div id="header">
<div id="logo">
<img src="images/theme/logo.png" border="0" align="absmiddle" />
</div>
<div id="share">
<img src="images/theme/share.png" border="0" align="absmiddle" />
</div>
</div>
<!-- membuat bagian untuk penempatan menu dan lain - lain -->
<div id="top-menu">
<div id="navigasi">
<a href="#home">Home</a>
<a href="http://media-kreatif.com" title="Situs pendidikan dan teknology">Media kreatif</a>
<a href="http://media-kreatif.com/creativeclass">Pendidikan online</a>
<a href="#home">Product</a>
<a href="http://dynamic-307.media-kreatif.com" title="Live demo pendidikan kreatif">Demo product</a>
</div>
</div>
<!-- membuat bagian untuk penempatan banner -->
<div id="banner_web">
<div class="slides_container" style="width:900px; height:250px;">
<a href="#"><img src="images/theme/banner-1.jpg" width="900" height="250" /></a>
<a href="#"><img src="images/theme/banner-2.jpg" width="900" height="250" /></a>
</div>
</div>
<!--mem buat bagian untuk menampilkan content website -->
<div id="content">
<?php
include("script/homepage.php");
?>
</div>
</div>
<!-- membuat bagian footer website untuk penempatan menu bawah dan tulisan copyright -->
<div id="footer">
<div id="footer-dom">
<p class="copy">copyright © 2012 - Media Kreatif</p>
</div>
</div>
</body>
</html>
3. Membuat layout untuk bagian content - homepage.php
Bagian content merupakan isi dari halaman website yang akan kita buat, dalam contoh kali ini kami mencoba menyajikan sebuah content dengan sebuah pesan pembuka dan juga beberapa contoh posting statis seperti terlihat pada contoh script dibawah ini.
<h1 class="judul">Selamat Datang</h1> <p> <img src="./images/theme/logo.png" title="Media kreatif" alt="media kreatif" align="left" class="tumb" /> Media kreatif merupakan website yang telah kami buat sebagai langkah awal dalam menyediakan pembelajaran dalam bidang website. Pada website yang sederhana ini, telah kami lengkapi dengan menu - menu yang dinamis sehingga dapat dikelola dengan mudah oleh Administrator. </p> <p>Dalam program ini, kami mencoba menyediakan script - script program yang dilengkapi dengan penjelasan - penjelasan dalam bentuk komentar untuk mempermudah anda sekalian dalam mempelajari program ini. Dengan metode ini, pembaca sekalian yang ingin belajar tentang website dapat belajar dengan lebih mudah.</p> <p>Dalam hal ini, kami juga melengkapi proses pembelajaran dengan forum belajar online pada masing - masing script pembelajaran yang kami sediakan. Adapun harga yang kami tetapkan untuk script pembelajaran dan juga penyediaan forum belajar online adalah sebesar <strong>Rp. 50.000,-</strong>. Silahkan melakukan pemesanan produk mk11307 ini dengan mengisi form pemesanan pada alamat berikut :</p> <p align="center"><a href="http://media-kreatif.com/home/order/mk11307/website-computer-technology" title="Pesan product ini sekarang" target="_blank"><img src="images/icons/order-now.png" border="0" alt="Pesan sekarang" /></a></p> <p> </p> <!-- Untuk menampilkan daftar postingan --> <h1 class="judul">Posting terbaru</h1> <!-- Posting pertama --> <div id="posting"> <div id="thumbnail"><img src="./images/post/t_video.png" title="Gambar dari Video Processing" alt="video.png" class="tumb" /></div> <a href="?p=24" title="Baca Video Processing selengkapnya" class="judulBerita">Video Processing</a> <div id="headline"><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <p class="tanggal"><span class="orange">12-Desember-2012 13:14:32</span> <span class="by">Oleh Admin</span></p> <p class="more"><a href="?p=24" title="Baca Video Processing selengkapnya">Readmore...</a></p> </div> <!-- Posting kedua --> <div id="posting"> <div id="thumbnail"><img src="./images/post/t_audio.png" title="Gambar dari Software Audio" alt="audio.png" class="tumb" /></div> <a href="?p=23" title="Baca Software Audio selengkapnya" class="judulBerita">Software Audio</a> <div id="headline"><p> Lorem Ipsum is simply dummy text of the printing and typesetting</p> </div> <p class="tanggal"><span class="orange">12-Desember-2012 13:14:44</span> <span class="by">Oleh Admin</span></p> <p class="more"><a href="?p=23" title="Baca Software Audio selengkapnya">Readmore...</a></p> </div> <!-- Posting ketiga --> <div id="posting"><div id="thumbnail"><img src="./images/post/t_linux.png" title="Gambar dari Linux OS" alt="linux.png" class="tumb" /></div> <a href="?p=22" title="Baca Linux OS selengkapnya" class="judulBerita">Linux OS</a> <div id="headline"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p> </div> <p class="tanggal"><span class="orange">12-Desember-2012 13:14:59</span> <span class="by">Oleh Admin</span></p> <p class="more"><a href="?p=22" title="Baca Linux OS selengkapnya">Readmore...</a></p> </div> <!-- Posting keempat --> <div id="posting"> <div id="thumbnail"><img src="./images/post/t_lcd-monitor.png" title="Gambar dari LCD Monitor" alt="lcd-monitor.png" class="tumb" /></div> <a href="?p=21" title="Baca LCD Monitor selengkapnya" class="judulBerita">LCD Monitor</a> <div id="headline"><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p> </div> <p class="tanggal"><span class="orange">12-Desember-2012 13:15:11</span> <span class="by">Oleh Admin</span></p> <p class="more"><a href="?p=21" title="Baca LCD Monitor selengkapnya">Readmore...</a></p> </div> <span class="nav">1 <a href="#">2</a> <a href="#"> >></a></span> </div>
Jangan merasa illfeel dengan kode - kode HTML diatas, karena kode - kode tersebut sebenarnya hanya sedikit ketika kita sudah berhadapan dengan sisi pemrograman PHP. Ketika sudah kita aplikasikan dalam PHP, bagian posting ini hanya kita ketik satu bagian saja seperti <!-- Posting pertama --> , dan itupun yang kita ketik hanya bagian HTMLnya saja, sedangkan kontennya otomatis kita ambilkan dari Database
4. Membuat CSS - simpan dalam folder style/style.css
Bagaimana cara mempelajari fungsi dari CSS dibawah ini, caranya simple saja. Copy saja dulu semua contoh script HTML yang ada diatas, tapi untuk css nya kita copy sedikit demi sedikit supaya kita bisa melihat bagaimana fungsi masing-masing perintah yang terdapat dalam CSS, kemudian lanjutkan mempelajari hingga semua bagian CSS sudah terintegrasi dengan script layout diatas
/*CSS yang umum dipakai dalam halaman website */
body{
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
padding:0 0 0 0;
background-image:url('../images/theme/body.png');
background-position:top left;
background-repeat:repeat-x;
}
a{
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#0066FF;
}
a.judul-halaman{
font:bold 18px Verdana, Arial, Helvetica, sans-serif;
color:#1284a5;
}
#wrapper{
width:900px;
margin-left:auto;
margin-right:auto;
}
#header{
height:105px;
}
#header #logo{
width:400px;
float:left;
}
#header #share{
width:300px;
text-align:right;
float:right;
margin:60px 0 0 0;
}
#top-menu{
height:105px;
background-image:url('../images/theme/slogan.png');
background-position:550px -10px;
background-repeat:no-repeat;
}
#top-menu #navigasi{
height:35px;
margin:30px 0 0 0;
}
#top-menu #navigasi a{
font:bold 14px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
line-height:35px;
text-decoration:none;
padding:0 5px 0 5px;
}
#banner_web{
height:250px;
margin:0 0 20px 0;
}
#content{
color:#666666;
text-align:justify;
letter-spacing:0.2px;
}
#content p,#content ul li, #content ol li, #content a{
line-height:18px;
}
#posting{
display:block;
width:200px;
float:left;
margin:0 10px 0 0;
}
#headline #thumbnail{
display:block;
text-align:left;
}
a.judulBerita{
font:bold 14px Verdana, Arial, Helvetica, sans-serif;
display:block;
color:#1284a5;
text-decoration:none;
}
a.judulterkait{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
color:#1284a5;
text-decoration:none;
background-image:url('../images/icons/bullet.png');
background-position:center left;
background-repeat:no-repeat;
padding:0 0 0 20px;
}
span.by{
font:normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666666;
}
p.more{
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
text-align:left;
}
p.more a{
font-weight:bold;
color:#1284a5;
display:block;
text-decoration:underline;
}
a:hover{
color:#FF9900;
}
#footer{
height:42px;
background-image:url('../images/theme/footer.png');
background-position:top left;
background-repeat:repeat-x;
}
#footer #footer-dom{
width:900px;
margin-left:auto;
margin-right:auto;
}
#footer p.copy{
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
width:300px;
float:left;
line-height:30px;
color:#FFFFFF;
}
/* Css untuk TAG HTML Standard */
h1,h2,h3{
font:bold 18px Verdana, Arial, Helvetica, sans-serif;
margin:5px 0 5px 0;
}
h1.judul{
color:#1284a5;
display:block;
border-bottom:#dcdcdc 1px solid;
padding:0 0 5px 0;
line-height:30px;
}
/*CSS untuk bagian paging */
span.nav{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
text-align:center;
color:#666666;
}
span.nav a{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
color:#0099FF;
}
/*Span untuk warna */
span.hijau{
color:#97c43d;
}
span.orange{
color:#FF9900;
}
span.blue{
color:#3d73b1;
}
Sangat diperlukan ketekunan dan ketelitian dalam mempelajari layout dengan menggunakan TAG DIV dan CSS, hal ini dikarenakan kita harus melakukan Coding manual dan sesekali melakukan preview pada browser untuk melihat hasilnya. Selamat mencoba contoh layout diatas, dan silahkan tuliskan komentar dan pertanyaan anda pada form komentar dibawah