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...

How to Create Simple Web (2) - Slice

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) :

Hasil Save

  • Coba Anda masuk kedalam folder images :

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 :
 
 Ganti Nama
 
  • 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 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Web - Ramadhan</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper"> <!--WRAPPER-->
	<div id="header"></div> <!--HEADER-->
    	    <div id="navigasi"> <!--NAVIGASI-->
        	<div class="menu-portofolio"></div> <!--PORTOFOLIO-->
                <div class="menu-home"></div> <!--HOME-->
            </div> <!--NAVIGASI-->
        	<div id="frame-bar"> <!--FRAME-BAR-->
            	    <div id="leftbar"></div> <!--LEFTBAR-->
                    <div id="rightbar"></div> <!--RIGHTBAR-->
                </div> <!--FRAME-BAR-->
</div> <!--WRAPPER-->
</body>
</html>
  •  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
 
Hasil Akhir
 
 
 
 
Salam.. Om' Kenu



About Author

Isnu Arief Darmawan

Simple person..


Comment & Discussions

    Please LOGIN before if you want to give the comment.