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
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
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_12 merupakan 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
Code :
<div class="container_12">
<div class="grid_12">isi dari grid 12</div>
<div class="clear"></div>
<div class="grid_3"></div>
<div class="grid_9"></div>
<div class="clear"></div>
</div>
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
Code :
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Belajar Membuat Template</title>
<!-- panggil grid 960.css-->
<link rel="stylesheet" href="css/960.css">
</head>
<body>
<!-- kita mengguanakan container_12 kolom -->
<div class="container_12">
<!-- Bagian Header -->
<div class="grid_12"></div>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian top menu-->
<div class="grid_12"></div>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian konten kiri -->
<div class="grid_6"></div>
<!-- bagian konten kanan-->
<div class="grid_6"></div>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian footer-->
<div class="grid_12"></div>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
</div>
</body>
</html>
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
Code :
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Belajar Membuat Template</title>
<!-- panggil grid 960.css-->
<link rel="stylesheet" href="css/960.css">
</head>
<body>
<!-- kita mengguanakan container_12 kolom -->
<div class="container_12">
<!-- Bagian Header -->
<div class="grid_12"><h1>Template Ane Gan</h1></div>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian top menu-->
<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>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian konten kiri -->
<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>
<!-- bagian konten kanan-->
<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>
<!-- ingat selalu gunakan clear -->
<div class="clear"></div>
<!-- bagian footer-->
<div class="grid_12">© 2012 Ane Ganteng :p</div>
<!-- ingat selalu gunakan clear -->
<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
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
Code :<link rel="stylesheet" href="css/style.css">
...
<div class="container_12 container">
<div class="grid_12 header">...</div>
<div class="grid_12 top_menu">...</div>
<div class="grid_6 kiri">...</div>
<div class="grid_6 kanan">...</div>
<div class="grid_12 footer">...</div>
</div>
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
Code :/*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
Code :
/*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
Code :/*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
Code :.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
Code :/*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
Thank's to:
wenkhairu
.jpg)
