How to Create Simple Web (2) - Slice

How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan

Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah di slice pada tuts sebelumnya How to Create Simple Web (1) - Slice. Sekarang, kita akan melanjutkan tuts tersebut dimana intisari yang kita pelajari sekarang adalah menerjemahkan gambar menjadi sebuah web (HTML & CSS), kalo bahasa isengnya..maksudnya asi...

Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dan bersama dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah di slice pada tuts sebelumnya How to Create Simple Web (1) - Slice. Sekarang, kita akan melanjutkan tuts tersebut dimana intisari yang kita pelajari sekarang adalah menerjemahkan gambar menjadi sebuah web (HTML & CSS), kalo bahasa isengnya..maksudnya asing :D "Convert PSD to HTML & CSS". Hal-hal yang harus dipersiapkan terlebih dahulu, sebelum memulai, yaitu! 1. Lemaskan jari-jemari Anda 2. Siapkan Text Editor 3. Keep Focus. Its show time! ●

●

●

Sebelumnya, kita sudah menyimpan file yang sudah kita buat, bukan? Kalo belum! Monggo dibuat terlebih dahulu... Buka file yang sudah Anda simpan, pastikan seperti dibawah ini (kalo terjadi perbedaan nama dengan contoh, it's ok) :

Coba Anda masuk kedalam folder images :

●

● ● ●

●

●

● ●

Sekarang, kita buat sebuah folder dengan nama simple-web-slice, terserah Anda mau buat di direktori manapun Kemudian masuk kedalam folder tersebut, lalu buatlah folder images dan css didalamnya Lalu didalam folder simple-web-slice, buatlah file HTML dan beri nama index.html Buatlah kembali, hanya saja file CSS dan beri nama style.css didalam folder css yang sebelumnya sudah dibuat Sekarang, kita kembali ke folder images pada hasil template yang sudah di slicing, lalu copy file images yang ada didalamnya ke folder images yang baru saja kita buat Jika, sudah di copy kita ubah namanya agar sesuai dan mudah dalam coding :

Saatnya meng-coding, pertama-tama buka file style.css dalam folder css Ketik code, jangan copas loh! Supaya terbiasa :)

@charset "utf-8"; /* Om'Kenu Document */ body { background-color: #EEE; } #wrapper {

width: 900px; height: auto; min-height: 100px; margin: 30px auto; } #header { width: 900px; height: 124px; background-image: url(../images/header.png); } #navigasi { width: 900px; height: 33px; background-color: #000; } #navigasi .menu-home { width: 93px; height: 33px; float: right; padding-right: 14px; background-image: url(../images/nav-home.png); background-repeat: no-repeat; } #navigasi .menu-portofolio { width: 125px; height: 33px; float: right; padding-right: 14px; background-image: url(../images/nav-portofolio.png); background-repeat: no-repeat; } #frame-bar { width: 900px; height: auto; min-height: 443px; background-color: #FFF; } #leftbar { width: 660px; height: auto; min-height: 443px; padding: 0px 4px; float: left; background-image: url(../images/leftbar.png); background-repeat: no-repeat;

text-align: justify; } #rightbar { width: 222px; height: auto; min-height: 443px; padding: 0px 5px; float: right; background-image: url(../images/rightbar.png); background-repeat: repeat; text-align: justify; } ●

Karena images nav, dan navigasi berwarna hitam, jadi kita pakai pada #navigasi menggunakan background-color: #000; agar loadingnya lebih cepat

Note: Ukuran-ukuran width & Height id diatas, diambil berdasarkan ukuran gambar yang telah di slicing pada folder images

●

Kemudian buka file index.html Anda dan isikan code seperti dibawah ini :

<meta charset="utf-8">

●

Akhirnya, selese sudah converting nya.

Anda dapat mengeksplorasi lebih bagus lagi dari yang Saya buat, dengan tambahan hover dan fitur-fitur lain, beserta isinya. Selamat mencoba ya! :D

●

Tutorial sebelumnya: How to Create Simple Web (1) - Slice

Download Full Source Code

Salam.. Om' Kenu

Tentang Penulis Isnu Arief Darmawan Simple person..