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.

[hr]

Preview

Inilah hasil akhir dari tutorial ini.

[hr]

Detail Tutorial

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

[hr]

Tutorial

Langkah 1: Mengatur Line-Height

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

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.

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

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.

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

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

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

Langkah 9

Tambahkan gambar latar di belakang banner dengan kode css berikut.

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

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

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

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

[hr]

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.

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/06/tutorial-desain-web-sederhana-psd-html-3/final.zip”%5DDownload File HTML dan CSS[/ilink]

4 pemikiran pada “Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 3

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

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s