Desain web HTML5 menggunakan framework 960

Banyak cara sebenarya untuk mendesain sebuah tampilan web, tergantung dari kebiasaan dan kemampuan masing-masing, ada yang langsung mendesain menggunakan perangkat design web otomatis, ada yang menggunakan framework tertentu dan ada juga menggunakan tools-tools tertentu, kali ini saya akan mencoba mengajak teman-teman untuk belajar bersama bagaimana mendesain sebuah layout dari sebuah halaman web, tetapi bukan mendesign secara grafis, artinya saya tidak akan menjelaskan bagaimana membuat design dari photoshop, melainkan mendesign dengan menggunakan CSS Framework, mungkin teman-teman ada yang bertanya bedanya apa ? memang kedua hal tersebut tidak dapat di pisahkan, photosop merupakan tools utama untuk melakukan design Web tetapi dalam bentuk hard grafis (image) bukan dalam bentuk Web Template (berupa kode html yang menyusun sebuah tampilan web),emang benar dari photoshop juga bisa langsung kita export menjadi bentuk html template, setelah melakukan beberapa slice (pemotongan) pada image, tentu saja hasilnya tidak akan rapi, alias tidak akan sama seperti halnya yang kita inginkan

Untuk itu saya mengajak teman-teman untuk berfokus pada pembuatan web template dengan menggunakan CSS Framework yang di sebut 960 Framework, 960 merupakan framework CSS yang sangat terkenal (menurut saya), selain mudah digunakan juga cocok dengan beberapa jenis browser, jadi kita tidak perlu lagi khawatir dengan yang nama-nya un-competible cross browser.untuk memulainya ada baiknya jika teman-teman membaca sedikit tentang framework 960 ini di situs penyedianya 960.gs, oke mari kita lanjutkan, saya yakin teman-teman sudah membacanya :D

Cara menggunakan 960 grid system

Sebelum ke arah yang lebih jauh, sebaiknya kita bahas sedikit tetang cara penggunaan 960 grid ini, karena nantinya kita akan banyak menggunakannya dalam tutorial ini, grid 960 terdiri dari beberapa jenis grid, grid sendiri merupakan perhitungan atau skala perbandingan jenis dan tipe yang akan kita gunakan dalam menyesuaikan ukuran Web kita nantinya di semua jenis monitor (wide dan non wide screen). misalnya yang bertipe 12 kolom, 24 colom,atau lebih umum pada pengguanaan per skala, maksudnya penggunaan untuk widescreen yang mana, penggunaan untuk normal screen yang mana, penggunaan untuk mobile yang mana, nah 960 grid system menyediakan keseluruhanya dan namanya pun tergantung dari jenis grid yang akan kita gunakan, dalam tutorial ini saya akan menggunakan grid yang berjenis layar normal atau 1024 x 768 atau sama dengan 960 grid dengan 12 kolom, karena jenis ini paling banyak digunakan, dan kompetible dengan semua jenis resolusi monitor

Aturan penggunaan grid-grid tersebut di kelompokan dalam satu wadah, atau kontainer, artinya semua grid akan berada dalam cakupan satu induk, masih bingung ya ? gini deh misalkan saya mempunyai satu kolam ikan, tentu saja dalam kolam tersebut banyak jenis ikan, bener ga ? nah kemudian dalam satu kolam itu saya ingin membagi-bagikan wilayah atau tempat dari masing-masing ikan, misalnya ikan a berada di kiri kolam, ikan b berada di kanan kolam, ikan c berada di tengah kolam, setiap wilayah memiliki lebar yang berbeda-beda, tetapi masih dalam satu kolam, hanya sekat-sekat yang memisahkan perwilayahnya, masih bingung juga? cek gambar aja deh :D

Jelas kan sekarang maksudnya apa ? secara sederhana 960 merupakan sebuah denah dari website yang akan kita bangun, denah-denah tersebut suda ada dan tinggal kita pakai saja, setiap denah memiliki ukuran berbeda-beda dan nama yang berbeda juga, misalnya container_12merupakan pencakup dari seluruhnya, artinya di dalam container_12 ini lah nantinya kita meletekan kolom-kolom lainya, beberapa kolom yang bisa kita gunakan

grid_1 sampai dengan grid_12 merupakan denah yang bisa kita pakai, perhatikan tata-letaknya, masing-masing telah di pasangkan, grid_12 tidak cocok di pasangkan dengan grid_x sedangkan grid_11 bisa di pasangkan dengan grid_2, begitu seterusnya, jadi kita hanya tinggal memakai grid mana saja yang akan kita gunakan untuk merancang layaout dari web kita, sedangkan untuk mengimplementasikanya kedalam halaman cukup menggunakan tag html div, seperti contoh berikut

Perhatikan baris code yang memiliki class="clear" artinya, setiap kahir dari penggunaan grid harus di akhiri dengan clear karena clear akan meneetralisasikan posisi float:right atau float:left untuk pemahaman tentang float teman-teman bisa membacanya di w3c, karena itu memang permasalahan yang cukup komplek juga jika di bahas, secara sederhana setiap kita habis menggunakan tag-tag pada grid kita harus mengakhirinya dengan memberikan clear seperti contoh di atas, nah sudah mengerti kan bagaiaman mengguanakan grid 960 ?

Planing Web Template

Sebelum kita memulai membuat sebuah web template, lebih baik siapkan dulu planing atau perencanaan untuk tata-letak dari web template kita, agar nantinya kita tidak susah untuk melakukan styling tambahan dan mudah untuk melakukan organisasi pada grid-grid yang akan kita gunakan, dalam tutorial ini saya menggunakn planing yang cukup simple saja, untuk yang lebih advanced teman-teman bisa berkreasi sendiri nantinya, berikut planing dari template yang akan kita buat dalam tutorial ini

Kode

Setelah sketasa atau planing dari web template kita buat sekarang kita harus membuat blok-blok atau memposisikan grid - grid yang sudah kita susun kedalam bentuk html, dengan sususan seperti yang kita rancang dan mengguanakan grid 960, pertama jangan lupa includkan dulu 960.css yang sudah teman-teman download sebelumnya,kemudian siapkan satu folder dengan nama css, js, dan folder images, ketiga folder ini bertujuan agar webtemplate teroganisir dengan baik,letakan file 960.css dalam folder css folder images dan js biarkan saja kosong untuk sementara, kemudian di luar ketiga folder tersebut buat sebuah file dengan nama index.html, sehingga struktur folder yang ada sekarang menjadi seperti berikut ini

Kemudian setelah semua file berada pada tempatnya, sekarang saatnya kita melakukan sedikti kode-kodeaan, seperti yang saya jelaskan di atas, kita akan menggunakan tag div untuk memvisualisasikan blok-blok yang ada dalam grid, setiap grid memiliki fungsi masing-masing, dan setiap grid nantinya akan kita beri tambahan style selain grid 960.css, untuk itu saya harap teman-teman sudah memahami sedikit banyak tentang CSS dan HTML dasar, berikut kode dan keteranganya

Cukup jelas kan setiap bloknya, tersusun dari grid grid tertentu dengan porsi masing-masing dan sesuai dengan yang kita rancang, jika kita buka menggunakan browser tentu saja belum ada isinya itu template, karena memang kita masih menyusun blok per bloknya, nah sekarang mari kita isikan agar hasil belajar kita terlihat dan tidak membosankan, isi saja sesuka hati teman-teman, yang penting ada isinya lah, berikut isi dari yang saya isikan

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Belajar Membuat Template</title>

<link rel="stylesheet" href="css/960.css">
</head>
<body>

<div class="container_12">

<div class="grid_12"><h1>Template Ane Gan</h1></div>


<div class="clear"></div>


<div class="grid_12">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
</div>


<div class="clear"></div>


<div class="grid_6">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<div class="grid_6">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>


<div class="clear"></div>


<div class="grid_12">© 2012 Ane Ganteng :p</div>

<div class="clear"></div>
</div>
</body>
</html>

Save dan kemudian lihat di browser hasilnya, maka teman-teman akan melihat hasilnya, saya sarankan mengisi tulisan yang agak banyak agar terlihat hasilnya secara nyata, karena jika isinya sedikit tidak akan memperlihatkan hasilnya, untuk itu isikan saja dulu dengan lorem ipsum khairu ganteng banget :p wkwkwkw ngaur ah, woke lanjutm, kalo saya punya begini hasilnya

Sampai disni tentu saja belom selsai, nah sekarang saatnya kita memberikan sedikit sentuhan untuk template baru kita, agar hasilnya tidak terlihat seperti itu saja, karena menurut sayang saya baca di google (hehehe) tampilan mempengaruhi user, kalo tampilan biasa aja user cepat jenuh dan malas berkunjung, tetapi jika tampilan menarik mudah-mudahn user balik lagi (ga janji lho), tetapi jika tampilan terlalu jreng dan berat malahan membuat pengunjung malas untuk berkunjung, oleh karena itu penggunaan image / plugin dan third party yang digunakan harus di pertimbangkan, woke mari kita lanjut, kita akan mencoba stylenya tanpa menggunakan image, modifikasi bagian bagian berikut pada file index.html

Bagian header

pertama kita akan atur style untuk bagian headernya, teman-teman bisa berekperiment ria disini, saya tidak menuntut teman-teman harus mengikuti 100% apa yang saya sajikan, berkreasilah sesuka teman-teman, dapatkan tampilan yang sesuai dengan selera masing-masing,disini saya mengguanakan @fontface, jadi jika teman-teman mau bisa mengguanak font apa saja, tambahkan baris kode css berikut ke file style.css, setelah selesai save dan lihat di browser hasilnya

/*RESETER*/
*{margin:0;padding:0;}

/*Font untuk judul*/
@font-face { font-family: judul; src: url('../GrutchShaded.ttf'); }
/*font untuk tulisan*/
@font-face { font-family: tulisan; src: url('../Jura.ttf'); }

/*bagian header*/
.header h1{font-family: 'judul'; font-size:48px;text-align:center;padding-bottom:5px;border-bottom:thin solid #c1c1c1;}

setelah bagian header sekarang kita lanjut ke bagian top menu, disini saya menggunaka tag ul > li > a jika teman-teman hanya mengguanakn a sebaiknya ikuti saja style yang teman-teman rasa pas dan sesuai selera, oke pada style.css tambahkan lagi baris berikut ini, kemudian save dan lihat hasilnya

/*bagian menu*/
.top_menu ul{
display:block;
width:auto;
height:31px;
list-style:inside none;
padding:0; margin-top:10px;margin-bottom:10px;
border:1px solid;
}

.top_menu ul li{list-style:inside none; padding:0; margin:0; display:inline-block; position:relative;}
.top_menu ul li a{
outline:none;
display:block;
margin:0;
padding:9px 15px;
font:bold 11px Tahoma, sans-serif;
text-decoration:none;
border-left:1px solid transparent;
border-right:1px solid transparent;
color:#000;
}

.top_menu ul li a:hover, li.active{
color:#fff;
background:#f7af6f;
}

Bagian konten paragraf

/*bagian konten kiri dan kanan*/
.kiri p, .kanan p{
font-family: 'tulisan'; font-size:12px;
line-height:25px;
text-align:justify;
}
.kiri p:first-letter, .kanan p:first-letter {font-family: 'judul'; font-size:48px;float:left;padding:5px;}

Bagian footer

.footer{text-align:right;margin-top:15px;font:normal 11px Tahoma, sans-serif;font-style:italic;}

Cukup mudah bukan ? secara dasar beigutlah cara kerja pembuatan template dasar dari sebuah website, jadi tidak asal copat copet, dengan begini kita hanya tinggal menambhakan beberapa image pendukung saja untuk mempercantik tampilan dari template kita, disini saa hanya menunjukan langkah-langkah dasar saja bagaiamna mebuat sebuah template, saya rasa teman-teman pasti punya kreatifitas masing-masing yang dapat membuat template sederhana menjadi template yang luar biasa, nah oleh karena itu template itu sama dengan menggambar, semakin bagus kombinasi warna dan keunikan sebuah template, semakin bagus pula jadinya, oke hasil kahir yang di harapkan adalah template yang bagus dan buatan sendiri, saya menambahakn beberapa style tambahan dalam template kita kali ini, teman-teman bisa merubahnya sesuai keinginan, beberapa image akan saya tambahkan, hasil akhir bisa teman-teman dowload di akhir tutorial ini, berikut beberapa tambahan style yang saa tambahkan, sehingga secara keseluruhan isi dari file style.css adalah sebagai berikut

/*RESETER*/
*{margin:0;padding:0;}
body{background:url(../images/struckaxiom.png);}
.container{background:#fff;}
/*Font untuk judul*/
@font-face { font-family: judul; src: url('../GrutchShaded.ttf'); }
/*font untuk tulisan*/
@font-face { font-family: tulisan; src: url('../Jura.ttf'); }

/*bagian header*/
.header{height:134px;background:url(../images/header.png);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.header h1{font-family: 'judul'; font-size:48px;text-align:center;padding-bottom:5px;padding-top:35px;}

/*bagian menu*/
.top_menu ul{
display:block;
width:auto;
height:31px;
list-style:inside none;
padding:0; margin-top:10px;margin-bottom:10px;
border:1px solid;
}

.top_menu ul li{list-style:inside none; padding:0; margin:0; display:inline-block; position:relative;}
.top_menu ul li a{
outline:none;
display:block;
margin:0;
padding:9px 15px;
font:bold 11px Tahoma, sans-serif;
text-decoration:none;
border-left:1px solid transparent;
border-right:1px solid transparent;
color:#000;
}

.top_menu ul li a:hover, li.active{
color:#fff;
background:#6dd5ed;
}

/*bagian konten kiri dan kanan*/
.kiri, .kanan{background:url(../images/lined_paper.png);}
.kiri p, .kanan p{
font-family: 'tulisan'; font-size:12px;
line-height:25px;
text-align:justify;
padding:4px;
}
.kiri p:first-letter, .kanan p:first-letter{font-family: 'judul'; font-size:48px;float:left;padding:5px;}

/*bagian footer*/
.footer{height:74px;background:url(../images/footer.png);margin-bottom:10px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.footer p{text-align:center;margin-top:15px;font:bold 11px Tahoma, sans-serif;margin-top:30px;}

/*tambahan*/
img#imgpost{height:200px;width:auto;float:left;padding-right:5px;}

ini hanya contoh saja, urusan jelek sama engga ya menurut selera masing-masing, yang penting kreativitas :), oke deh sekian dulu dari saya, semoga berguna dan bermanfaat, kalo bagus ya di baca, kalo engga ya di cuekin aja, yang mau dowload sourcenya bisa ke SINI AJA See ya and thanks for reading

Tagged as : HTML

Cyber Kepri

Senin, 13 Februari 2012