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]

Iklan

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

Di tutorial sebelumnya, kita telah membuat file PSD sederhana dengan Framework 960gs. Di tutorial ini, kita akan belajar teknik slicing, markup dengan HTML 5, dan mengatur penempatan setiap elemen dengan Framework 960gs. Pastikan Anda telah menguasai dua artikel sebelumnya tentang 960gs yaitu Panduan Mudah Desain Web dengan 960gs –Bagian 1 dan Bagian 2.

Preview

Berikut adalah tahapan yang akan kita peroleh di tutorial ini.

mendesain-halaman-web-sederhana-psd-html-bag-2-30.jpg

Detail Tutorial

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

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:

Lanjutkan membaca Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

Panduan Mudah Desain Web dengan 960gs –Bag 2

Di bagian kedua panduan desain web dengan 960gs ini, kita akan melihat penggunaan beberapa class untuk memperbaiki tampilan elemen. Walaupun pendek, dengan berbekal artikel ini dan pengetahuan dasar CSS dan HTML Anda akan mampu membuat projek desain web sederhana.

[hr]

Menggeser Elemen Untuk Perbaikan Tampilan

Di bagian pertama, kita telah melihat keberadaan class dengan nama push_X dan pull_X. Dalam prakteknya, kedua class ini berguna dalam mengubah tampilan elemen tanpa mengubah posisi markup.

Lihat contoh di atas. Misalnya Anda ingin menyimpan logo situs di tengah dan sebelumnya menambahkan beberapa paragraf. Dalam markup html, mungkin alurnya adalah menempatkan paragraf baru kemudian logo. Cara ini tidak tepat bagi search engine atau pengunjung dengan browser terbatas karena dengan begitu paragraf ditempatkan lebih penting daripada logo. Dengan class push_X dan pull_X, kita bisa mengubah posisi elemen tanpa perlu menggeser alur markup.

Penggunaan Class clear

960gs membuat kolom-kolom dengan cara mengubah element menjadi float (melayang). Dalam kondisi float, kita menarik elemen itu dari alur dokumen dan menarik semua elemen lain ke atas.

Perhatikan layout di atas. Artikel 4 otomatis berada di sebelah artikel 1 karena menyesuaikan dengan sisa area kosong yang diperolehnya. Bagaimana jika Anda ingin menyimpannya di baris baru, tepat di bawah artikel 1?

Anda dapat menambahkan div kosong dengan class clear untuk mengosongkan div yang sebelumnya dalam kondisi float.

1. Judul Artikel

Lorem ipsum dolor sit amet.

2. Judul Artikel

Quisque accumsan tristique tristique.

3. Judul Artikel

Maecenas consequat pellentesque sem.

4. Judul Artikel

Donec at orci nisi.

5. Judul Artikel

Donec at orci nisi.

6. Judul Artikel

Donec at orci nisi.

Kesimpulan

Sistem grid 960.gs memberi kita cara mudah dalam mendesain web secara terstruktur dan rapi. Cukup saja dengan teori. Di artikel berikutnya, saya akan memperlihatkan cara mendesain sebuah situs portfolio menggunakan sistem grid 960.

Panduan Mudah Desain Web dengan 960gs –Bag 1

Beberapa hari ini, saya mulai mencoba belajar pemrograman web HTML dan CSS. Saya juga mulai belajar menggunakan framework populer 960gs. Ternyata framework ini sangat mudah digunakan. Artikel ini akan membahas konsep dan cara penggunaan 960gs secara praktis.

[hr]

Pentingnya Penggunaan Grid Dalam Desain

Grid memungkinkan desain yang logis, masuk akal, dan mudah dipahami. Penggunaan grid juga mempermudah penyampaian alur informasi dalam desain. Mari kita bandingkan dua layout berikut.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Layout pertama
Panduan Mudah Desain Web dengan 960gs --Bag 1
Layout kedua

Layout pertama sangat teratur sementara yang kedua membingungkan. Dalam layout pertama, gerakan mata sangat mudah. Kita dapat dengan segera menemukan area mana yang perlu didahulukan dan mana yang bisa ditinggalkan.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Pergerakan mata di layout pertama

Saat ini penggunaan grid dalam desain web sudah demikian populer sehingga bisa dikatakan sebagai standar umum para desainer professional. Beberapa desain sangat jelas menggunakan format grid semisal dribbble. Desain yang terkesan tanpa grid pun sesungguhnya tidak mungkin lepas dari grid.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Dribbble jelas sekali menggunakan layout grid

Sesungguhnya, konsep desain grid bukanlah hal baru dan sudah umum digunakan dalam berbagai area. Mulai dari koran hingga interface. Mungkin Anda familiar dengan tampilan grid di bawah.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Grid dalam interface Windows.
Panduan Mudah Desain Web dengan 960gs --Bag 1
Interface software gambar.

[hr]

Konsep 960gs

Konsep 960gs adalah dengan membagi area desain selebar 960 px ke dalam beberapa kolom. Angka 960 dipilih karena dapat dibagi dengan mudah sehingga menjadi 2 kolom, 3 kolom, 4 kolom, hingga 24 kolom.

Saat ini, framework 960px dibagi ke dalam 12, 16, dan 24 kolom. Di bawah adalah perbandingan yang diperoleh dalam 12 kolom.

Panduan Mudah Desain Web dengan 960gs --Bag 1
Pembagian 12 kolom di 960gs.

[hr]

Template Photoshop 960gs

Di dalam file zip yang tersedia, Anda akan menemukan template PSD yang telah terisi oleh kolom-kolom dalam bentuk Guide. Pastikan Anda mengunci guide dengan cara klik View > Lock Guide.

Panduan Mudah Desain Web dengan 960gs --Bag 1

Selanjutnya, Anda tinggal mengisi elemen desain dalam tempat yang sesuai. Desaindigital sendiri pernah menulis beberapa tutorial mendesain web dengan framework 960gs.

[hr]

Pengkodean Dengan 960gs

Untuk mempermudah, kita akan mempelajari proses pengkodean dalam bentuk tutorial.

Langkah 1: Menyiapkan file CSS

Ada banyak file di dalam paket zip 960. Untuk bisa menggunakan kolom 960gs, yang Anda butuhkan hanyalah file 960_12_col.css. Simpan file ini ke dalam folder css. Di dalam file html utama, tambahkan link ke file ini.


Langkah 2: Menyimpan Area Yang Akan Dibagi

Anda perlu menyimpan area yang ingin dibagi ke dalam class container_12 untuk 12 kolom.

Langkah 3: Tinggal Menggunakan Nama

Proses selanjutnya sangat mudah. Anda cukup memberikan nama class yang sesuai dengan lebar kolom. Misalnya, untuk membuat 9 kolom dan 3 kolom Anda cukup menambahkan class grid_9 dan grid_3.

9 Kolom
3 Kolom

Dengan cara yang sama, kita bisa dengan mudah membuat layout tiga kolom seperti yang bisa ditemukan dalam situs portfolio. Jumlah kolom yang digunakan haruslah 12, misalnya grid_3 + grid_3 + grid_3 atau grid_2 + grid_4 + grid_6.

4 Kolom
4 Kolom
4 Kolom

Langkah 4: Menggeser Kolom

Anda juga bisa menggeser posisi sejumlah kolom tertentu dengan menambah class push_X dan pull_X. Class push_X akan menggeser ke kanan sejauh X kolom dan sebaliknya untuk pull_X.

Kode pertama akan menggeser kotak dari kolom 1 dan 3 menjadi ada di kolom 2 dan 3. Kode kedua akan menggeser kotak dari kolom 3 dan 4 ke kolom 2 dan 3.

2 Kolom
2 Kolom

Langkah 5: Mengosongkan Kolom

Sejauh ini, kita telah mengisi kedua belas kolom yang tersedia. Bagaimana jika kita ingin mengosongkan kolom tertentu? Anda bisa menggunakan class prefix_X dan suffix_X. Class prefix_X untuk bagian belakang sementara suffix_X untuk bagian depan.

Kode pertama akan menggeser kotak 3 kolom, menyisakan 2 kolom kosong di belakang dan 7 kolom kosong di depan. Kode kedua akan menggeser kotak 4 kolom, menyisakan 2 kolom di belakangnya dan menggeser kotak 4 kolom dengan 2 kolom kosong di depan dan 1 di belakang.

Perhatikan bahwa jumlah kolom kosong dan terisi adalah 12, prefix_2 + grid_3 + suffix_7.

3 Kolom
3 Kolom
4 Kolom

Langkah 6: Membuat Child Kolom

Framework ini ternyata cukup canggih untuk membuat child kolom. Dalam kolom child, kita harus menandai kolom awal dengan alpha dan kolom akhir dengan omega.

6 Kolom Tinggi
3 Kolom
3 Kolom
2 Kolom
1 Kolom
3 Kolom

[hr]

Demo HTML/CSS

[hr]

Referensi