Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 3

By on 6 July 2012 in Desain Web, Tutorial 1

Di dua tutorial sebelumnya, kita telah membuat menghasilkan layout sederhana tanpa pengaturan CSS dengan Framework 960gs. Di tutorial penutup ini, kita akan memperbaiki tampilannya dengan menambahkan beberapa kode CSS. Anda akan belajar cara menggunakan font custom dengan @font-face, memahami fungsi class clear di Framework 960gs, dan beberapa fungsi dasar lainnya.

Preview

Inilah hasil akhir dari tutorial ini.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Teks Editor
  • Teknik yang Dipelajari: Grid 960, Proses Slicing Desain Web
  • Lama Pengerjaan: 20 menit

Tutorial

Langkah 1: Mengatur Line-Height

Langkah pertama adalah memperbaiki line-height. Isikan kode berikut ke file style.css.

1
2
3
4

body {
	line-height: 20px;
	margin: 40px auto 90px;
}

Kode di atas akan mengubah jarak antar garis teks dan menambahkan ruang dengan sisi atas dan bawah browser.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 2: Menggunakan Font Custom @font-face

Desain kita menggunakan font custom Quicksand. Buka halaman font di Fontsquirrel. Klik tombol Download @font-face kit untuk mengambil semua resources yang dibutuhkan. Di dalam file zip akan tersedia file font dan kode css yang dibutuhkan.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3

Langkah 3

Desain kita hanya menggunakan tipe font Quicksand Light dan Quicksand Book. Simpan kedua file font ini ke folder baru bernama fonts. Dari file stylesheet.css ambil kode @font-face untuk kedua font itu dan simpan ke file css yang kita gunakan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@font-face {
    font-family: 'QuicksandLight';
    src: url('../fonts/Quicksand_Light-webfont.eot');
    src: url('../fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Quicksand_Light-webfont.woff') format('woff'),
         url('../fonts/Quicksand_Light-webfont.ttf') format('truetype'),
         url('../fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
@font-face {
    font-family: 'QuicksandBook';
    src: url('../fonts/Quicksand_Book-webfont.eot');
    src: url('../fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Quicksand_Book-webfont.woff') format('woff'),
         url('../fonts/Quicksand_Book-webfont.ttf') format('truetype'),
         url('../fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

Langkah 4

Font custom Quicksand sudah bisa digunakan dalam desain. Untuk mengaplikasikannya, tambahkan kode berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

h2, h4, nav {
	font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
}
 
h3 {
	font-family: 'QuicksandLight', Arial, Helvetica, sans-serif;
	font-size: 21px;
}
 
h2, h3, h4 {
	font-weight: normal;
}
 
h2 {
	font-size: 36px;
	margin-top: 30px;
}
 
h4 {
	color: #4c4c4c;
	font-size: 24px;
	letter-spacing: -1px;
	padding-bottom: 10px;
	border-bottom: #969696 solid 1px;
}
 
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4c4c4c;
}

Kode di atas akan mengatur font default paragraf ke Arial, Helvetica, dan sans-serif. Font custom digunakan pada Heading 2, Heading 3, Heading 4, dan area navigasi.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 5: Logo

Tambahkan kode berikut untuk mengganti teks Heading 1 yang merupakan judul halaman dengan logo situs.

1
2
3
4
5
6

#logo h1 {
	background: url(../img/logo.png) no-repeat;
	width: 160px;
	height: 22px;
	text-indent: 9999em;
}

Kode background akan mengisi latar teks dengan gambar. Kode width dan height untuk menentukan ukuran gambar. Kode text-indent akan menyingkirkan teks sehingga tidak muncul di layar.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 6: Navigasi

Berikutnya mengatur tampilan navigasi. Gunakan kode di bawah.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/*Navigasi*/
nav ul {
	float: right;
}
 
nav a {
	font-size: 14px;
	color: #969696;
	text-decoration: none;
}
 
nav a:hover {
	color: black;
	text-decoration: underline;
}
 
nav li {
	display: inline;
	margin-left: 20px;
}
 
.selected {
	color: black;
}

List diberi properti inline agar tampil memanjang. Class selected untuk menandai menu terpilih.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 7

Masalah muncul di sini. Teks banner lompat ke atas.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3

Ini terjadi karena secara default setiap elemen akan mengisi area yang cukup baginya. Teks banner muat di sebelah logo. Oleh karena itu dia loncat ke sana.

Langkah 8

Untuk memperbaikinya, tambahkan div dengan class clear sebelum teks banner.

1

<div class="clear"></div>
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 9

Tambahkan gambar latar di belakang banner dengan kode css berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*Banner*/
 
#banner article {
	background: url(../img/big-photo.jpg);
	height: 294px;
	width: 620px;
	position: relative;
}
 
#banner h3 {
	background: rgba(0,0,0, .2);
	color: white;
	padding: 20px 35px 20px 15px;
	width: 460px;
	position: absolute;
	bottom: 0;
	margin-bottom: 0;
}

Heading 3 dibuat absolute dengan posisi relative terhadap banner. Dengan cara ini, secara manual kita bisa menggeser Heading 3 agar berada tetap di bagian bawah dengan memberinya bottom: 0.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 10

Perbaiki tampilan tombol di isi artikel dengan kode berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*Post*/
 
.button a {
	font-size: 11px;
	text-transform: uppercase;
	color: #dadada;
	background-color: #2a2a2a;
	padding: 5px;
	text-decoration: none
}
 
.button a:hover {
	background-color: black;
}
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 11

Perbaiki kutipan dengan memberinya kode di bawah.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/*Blockquote*/
 
blockquote {
	background: url(../img/quote.png) top left no-repeat;
	padding-left: 35px;
	margin-top: 30px;
}
 
blockquote, blockquote p {
	font-size: 16px;
	font-style: italic;
	color: #4c4c4c;
}
 
blockquote a {
	color: black;
	text-decoration: none;
}
 
blockquote a:hover {
	text-decoration: underline;
}
 
#nama {
	font-weight: bold;
}
 
#status {
	font-size: 14px;
}
 
#nama, #status {
	font-style: normal;
}

Tanda kutip raksasa di sisi kiri atas kutipan berupa latar dengan bantuan kode background.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Langkah 13

Langkah terakhir adalah pengaturan teks dan link di footer. Garis di atas footer ditambahkan dengan memberi border pada paragraf.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*Footer*/
 
footer p {
	font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-top: #969696 1px solid;
	margin: 40px 0;
}
 
footer a {
	text-decoration: none;
	color: black;
}
 
footer a:hover {
	text-decoration: underline;
}
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Hasil Akhir

Hasil tutorial ini sangat sederhana namun jadi awal pembelajaran yang berguna bagi Anda yang sangat awam dengan desain web. Saya juga sangat menyarankan Anda untuk mengikuti tutorial asli dari Jeffrey Way di 30 Days to Learn HTML & CSS.

Di bawah adalah hasil akhir tutorial yang kita peroleh.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3
Demo

Download Link

Download File HTML dan CSS

, ,

  • Hananto

    Jep, dibagian kanan bawah halaman post kok bisa muncul recommended article. Itu pake plugin apa ya? Nuhun :)