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

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.

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.

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.

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.

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.

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

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.

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;
}

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.

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;
}

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.

Download Link

Download File HTML dan CSS

, ,

2 Responses to Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 3

  1. Hananto 13 July 2012 at 10:05 pm #

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

  2. Lavin 10 July 2014 at 3:08 pm #

    gan link font nya sudah tidak menyediakan web font kit link download

Tinggalkan komentar Anda.

var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-9527890-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })(); (function() { var em = document.createElement(\'script\'); em.type = \'text/javascript\'; em.async = true; em.src = (\'https:\' == document.location.protocol ? \'https://id-ssl\' : \'http://id-cdn\') + \'.effectivemeasure.net/em.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(em, s); })();