ARI JULIANTO Network www.arijulianto.com

Oleh | HTML | | Dibaca 9.158 kali | 0 komentar

Baiklah kali ini saya akan mencoba membahas secara rinci mengenai teknik membuat layout website secara mudah dan cepat. Untuk tutorial kali ini saya akan mencoba berbagi trik dengan jaminan layout akan beres hanya dalam 5 menit. Gimana keren kan????

Oke, yang pertama kita butuhkan adalah Notepad (saya lebih prefer sofwer ini, kalo sahabat AJN pake sofwer text editor kayak DW, Notepad++, atau apapun itu gak masalah, yang penting text editor). Untuk tahap awal silahakn buat potongan layout utama seperti berikut!

<!DOCTYPE html>

<html>

<head>

<title>Judul Website</title>

</head>

<body>

<div class="wrapper">

<header>HEADER</header>

<section>

<article>CONTENT</article>

<aside>SIDEBAR</aside>

</section>

<footer>FOOTER</footer>

</div>

</body>

</html>

Script di atas adalah script dasar yang kita butuhkan dalam membuat layout sebuah website. Jadi kita butuh untuk menyiapkan dulu elemen-elemen apa saja yang dibutuhkan untuk template kita. Untuk contoh ini saya membuat layout fixed 2 kolom dengan sidebar di sebelah kanan. Elemen atau komponen yang kita kumpulkan adalah

  1. sebuah DIV dengan class .wrapper: Sebagai wrapper atau pembungkus layout website kita, dimana wrapper ini bermanfaat untuk menentukan lebar area dari website kita dan membuat layoutnya manjadi tepat di tengah-tengah browser.
  2. tag header: Sebagai header dari website
  3. tag section: Sebagai konten utama dari website (pembungkus konten dan sidebar)
  4. tag article: Sebagai konten utama (kiri) dari website
  5. tag aside: Sebagai sidebar (kanan) dari website
  6. tag footer: Sebagai footer dari website

Lihat Demo | Lihat Source Code

Bila layout kita sudah fix, maka kita tinggal melanjutkannya dengan membuat koding, tapi bila kita ingin menukar posisi antara konten dan sidebar, ya boleh saja. Untuk sementara layout fixnya adalah sesuai yang di atas yakni konten di kiri dan sidebar di kanan. Ya persis kayak website saya ini (versi dekstop) :D.

Langkah berikutnya adalah menentukan dimensi dari masing-masing blok elemen dari layout website kita. Langkahnya adalah kita buat style CSS-nya secara inline. Oya perlu saya tekankan, ketika kita membuat layout sebuah website, biasakan untuk desain utamanya dengan menyimpan style css secara inline di blok header. Tujuannya supaya selagi masih desain kita tidak dipusingkan dengan bekerja pada banyak file. Namun penting juga bahwasanya kalau desain sudah selesai sebaiknya style CSS tersebut dipisahkan menjadi file yang berbeda. Oke, di bawah ini adalah script final dari layuot website yang kita bikin

<!DOCTYPE html>

<html>

<head>

<title>Judul Website</title>

<style>

body{background:#ccc;margin:0;padding:10px 0px;font-size:13px;font-family:tahoma;color:#333}

.wrapper{width:950px;margin:auto}

header{height:150px;background:#e8f0f6}

header h1{margin:0px;padding:20px 10px 5px 10px;font-size:24px}

header h2{margin:0px;padding:0px 10px 10px 10px;font-size:18px}

nav{background:#2f5e79}

nav ul{list-style:none;margin:0;padding:0}

nav ul li{list-style-type:none;display:inline-block}

nav li a,nav li a:visited{color:#fff;text-decoration:none;padding:10px 16px;display:block}

nav li a:hover{background:#20455c}

section{overflow:hidden}

article{overflow:hidden;width:700px;float:left;background:#fff}

article h1.title{margin:0;padding:2px 0px;color:#00009e;font-size:22px}

article p{margin:2px 0px 6px 0px;line-height:155%}

article .post-info{color:#777}

aside{overflow:hidden;width:250px;float:right;background:#eee}

aside h2{margin:0;padding:6px 10px;background:#00009e;color:#fff;font-size:18px}

aside .sidebox{padding:10px;margin-bottom:10px}

footer{padding:10px;background:#000;color:#f3f3f3;text-align:center}

.pad{padding:10px}

img.left{float:left;margin-right:5px}

img.right{float:right;margin-left:5px}

</style>

</head>

<body>

<div class="wrapper">

<header>

<h1>My Website</h1>

<h2>Slogan Website</h2>

</header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact-us.html">Contact Us</a></li>

</ul>

</nav>

<section>

<article>

<div class="pad">

<h1 class="title">Judul Utama</h1>

<div class="post-info">Oleh Ari Julianto | 27 Juni 2014 jam 22:57 | Dibaca 123 kali</div>

<p><img src="home.png" class="left" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>

<p><img src="home.png" class="right" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>

</div>

</article>

<aside>

<h2>Title Blok 1</h2>

<div class="sidebox">

konten sidebox 1</div>

<h2>Title Blok 2</h2>

<div class="sidebox">

konten sidebox 2</div>

<h2>Title Blok 3</h2>

<div class="sidebox">

konten sidebox 3</div>

</aside>

</section>

<footer>Copyright &copy; 2014. My Website</footer>

</div>

</body>

</html>

Layout Finish

Lihat Demo | Lihat Source Code
Tukar posisi konten: Lihat Demo | Lihat Source Code

Untuk mempercantik layout, kita bisa membuat desainnya dengan kolaburasi (ataun tidak) menggunakan sofware designer seperti CorelDRAW dan Photoshop. Berikut ini adalah contoh desain yang saya buat dengan CorelDRAW X6
Desain Layout dengan CorelDRAW

Untuk memecah layoutnya kita perlu melakukan slice pada desain untuk bagian header, konten dan menu sehingga desain kita bisa diaplikasikan pada layout kita. Dan hasil akhirnya header kita diberikan sentuhan desain gambar yang kita crop 950 x 150 pixel, begitupun layout utamanya agar backround dan sidebar seimbang kita membutuhkan slicing image dengan dimensi 950 x 1 pixel. Karena header kita ada nama website dan slogan sedangkan pada desain sudah kita masukkan teks permanen maka kita perlu merubah CSSnya dengan menambahkan display:none pada bagian header h1 dan header h2.

Desain Layout dengan Photoshop

HASIL AKHIR SETELAH DIBERIKAN SNTUHAN DESAIN:  Lihat Demo | Lihat Source Code

Bila desain kita sudah fix, maka kita perlu memisahkan file CSSnya agar jika nanti ingin melakukan perubahan pada sisi desain maupun layout tidak akan dipusingkan dengan baris koding yang sampai puluhan atau bahkan ratusan baris kode. Baris kode CSS yang ada di bawah <style> sampa sebelum </style>

ke sebuah file terpisah yang dalam hal ini kita bikin di Notepad dan simpan dengan nama style.css dan file htmlnya kita Save As dengan nama index.html. Adapun hasil akhirnya dapat dilihat seperti pada source code berikut

File index.html

<!DOCTYPE html>

<html>

<head>

<title>Judul Website</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div class="wrapper">

<header>

<h1>My Website</h1>

<h2>Slogan Website</h2>

</header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</nav>

<section>

<article>

<div class="pad">

<h1 class="title">Judul Utama</h1>

<div class="post-info">Oleh Ari Julianto | 27 Juni 2014 jam 22:57 | Dibaca 123 kali</div>

<p><img src="home.png" class="left" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>

<p><img src="home.png" class="right" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>

</div>

</article>

<aside>

<h2>Title Blok 1</h2>

<div class="sidebox">

konten sidebox 1</div>

<h2>Title Blok 2</h2>

<div class="sidebox">

konten sidebox 2</div>

<h2>Title Blok 3</h2>

<div class="sidebox">

konten sidebox 3</div>

</aside>

</section>

<footer>Copyright &copy; 2014. My Website</footer>

</div>

</body>

</html>

File style.css

body{background:#ccc;margin:0;padding:10px 0px;font-size:13px;font-family:tahoma;color:#333}

.wrapper{width:950px;margin:auto}

header{height:150px;background:#e8f0f6 url(header.jpg) no-repeat}

header h1{margin:0px;padding:20px 10px 5px 10px;font-size:24px;display:none}

header h2{margin:0px;padding:0px 10px 10px 10px;font-size:18px;display:none}

nav{background:#2f5e79}

nav ul{list-style:none;margin:0;padding:0}

nav ul li{list-style-type:none;display:inline-block}

nav li a,nav li a:visited{color:#fff;text-decoration:none;padding:10px 16px;display:block}

nav li a:hover{background:#20455c}

section{overflow:hidden;background:transparent url(bg-main.jpg) repeat-y}

article{overflow:hidden;width:700px;float:left;background:#fff}

article h1.title{margin:0;padding:2px 0px;color:#00009e;font-size:22px}

article p{margin:2px 0px 6px 0px;line-height:155%}

article .post-info{color:#777}

aside{overflow:hidden;width:250px;float:right;background:#eee}

aside h2{margin:0;padding:6px 10px;background:#00009e;color:#fff;font-size:18px}

aside .sidebox{padding:10px;margin-bottom:10px}

footer{padding:10px;background:#000;color:#f3f3f3;text-align:center}

.pad{padding:10px}

img.left{float:left;margin-right:5px}

img.right{float:right;margin-left:5px}

Beriktu adalah hasil akhir dari layout yang telah kita bikin

Live Preview

Source Code