• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2

12‘11
February

noimg.jpg

Selamat malam semuanya :) ini merupakan artikel bagian ke 2 dari artikel sebelumnya yang berjudul Belajar Membuat Website Tanpa Table (table less) dengan Photoshop dan Dreamweaver Bagian 1. Di artikel sebelumnya saya menjelaskan tahapan cara membuat website mulai dari membuat background dan layout desain di Photoshop sampai menyiapkan struktur tag HTML untuk kerangka website dengan menggunakan macromedia Dreamweaver. Sekarang mari kita lanjut ke pembuatan input pencarian, navigasi website, content web dan lain sebagainya. Untuk menyegarkan lagi ingatan kita, berikut ini merupakan hasil akhir projek kita pada bagian pertama :

Gambar Jadi Bagian 1

tag HTML dan CSS dari project kita terdahulu adalah sebagai berikut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome | Websiteku</title>
<style media="screen">
body {
	background: #000000 url(images/background.jpg) no-repeat top;
	margin:0;
	padding:0;
	font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
}
.header{
	background:url(images/bgheader.png) top right no-repeat;
	width: 646px;
	height: 150px;
	margin: 0 auto;
	padding:0;
}
	.content{
	width: 646px;
	margin: 0 auto;
	background:url(images/bgcontent.png);
}
.container{
	padding:5px 10px 10px 15px;
	line-height:18px;
}
.container h1{
	border-bottom:1px solid #999999;
	font-size:18px;
	line-height:30px;
	margin-bottom:10px;
}
.container p{
	margin-bottom:10px;
}
.footer{
	width: 646px;
	height: 30px;
	margin: 0 auto;
	margin-bottom:50px;
	background:url(images/bgfooter.png) top right no-repeat;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
	<div class="container">
		<h1>The standard Lorem Ipsum passage.</h1>
		<p>Text apa saja bebas sakarep anjeun</p>
		<p>Text apa saja bebas sakarep anjeun</p>
		<p>Text apa saja bebas sakarep anjeun</p>
	</div>
</div>
<div class="footer"></div>
</body>
</html>

Untuk melihat demo dan hasil dari tampilan project website yang akan saya bahas kali ini klik di sini atau bisa di lihat pada gambar berikut :

Gambar Jadi Bagian 2

Membuat Input Pencarian

Sesuai dengan judulnya yaitu membuat website tanpa table maka tag HTML yang akan kita buat tidak akan menggunakan table. Mari kita mulai mark up tag HTML dari yang paling atas yaitu input pencarian, silahkan tambahkan tag berikut pada div dengan class="header"

<div class="header">
	<div class="left">
		<form name="search_form" action="/* link untuk proses */" method="post">
			<input type="text" name="search" id="search" class="search" value="Pencarian" />
			<input type="submit" name="submit" id="submit" class="submit" />
		</form>
	</div>
</div>

Pada tag bagian CSS tambahkan gaya css sebagai berikut:

.header .left{
	width: 230px;
	float:left;
	height: 30px;
	padding:68px 0 0 40px;
	color:#FFFFFF;
}
.header .left .search{
	width: 250px;
	height: 14px;
	padding:3px 5px;
	color:#aaa;
}
.header .left .submit{
	display: none;
}

dengan tag di atas kita memberi gaya css pada div dengan class="left", class="search", dan class="submit" sehingga kita mendapatkan tampilan web sebagai berikut

Gambar Input

Buat sebuah gambar berukuran 10px x 10px dengan tingkat transparansi nol di Photoshop save dengan nama transparent.gif, cara membuatnya pada canvas rubah opsi blending option - opacity = 0% apabila gambar ini di tampilkan di browser maka gambar ini tidak akan terlihat. Tapi karena tidak terlihat bukan berarti tidak berguna, ini bisa kita jadikan background untuk elemen tertentu seperti input sehingga tampilannya juga menjadi transparan tidak putih.

Sekarang mari kita tambahkan tag background dan menghilangkan border pada css [ .header .left .search ]

.header .left .search{
	background:url(images/transparent.gif);
	border:0;
	width: 250px;
	height: 14px;
	padding:3px 5px;
	color:#aaa;
}

Hasilnya kita memiliki form invisible dan akan terlihat seperti ini

Gambar Input Invisible

Menempatkan Logo

Pada layout project ini kita menempatkan logo pada sebelah kanan silahkan buat logo anda sendiri dengan ukuran yang cukup kemudian tambahkan tag html berikut setelah tag dengan class="left" :

	<div class="left">
		<form name="search_form" action="/* link untuk proses */" method="post">
			<input type="text" name="search" id="search" class="search" value="Pencarian" />
			<input type="submit" name="submit" id="submit" class="submit" />
		</form>
	</div>
	<div class="right"><a href="#"><img src="images/logo.png" alt="w3Function.com" /></a></div>

Tambahkan markup CSS untuk class="right"

.header .right{
	width:225px;
	padding:30px 60px 0 0;
	float:right;
}
.clear{ clear:both; }

Perhatikan pada class="left" ada property float : left; dan pada class="right" ada property float : right properti ini digunakan untuk menggeser elemen sesuai dengan yang kita inginkan ke sebelah kiri/kanan. Apabila dibawah parent ada dua elemen dengan float berlawanan maka elemen tersebut akan membentuk kolom sejajar seperti table dengan 2 kolom asalkan presisi width nya tepat. kalau presisi pengukuran width anda salah maka elemen di sebelah kanan akan jatuh ke bawah sehingga hanya terbentuk 2 kolom yang berantakan. Hal yang paling rumit adalah setelah selesai mengatur presisi di browser anda harus melakukan tes di beberapa browser yang lain, karena setiap jenis browser memiliki kompatibilitas yang berbeda-beda. bisa saja di firefox udah okay, tapi begitu dilihat di internet explorer ternyata gak ada yang okay

Apabila presisinya sudah tepat maka tampilan nya akan seperti dibawah ini

Gambar Kolom Input dan Logo

Pada tag CSS diatas bisa anda lihat ada tag seperti ini .clear{ clear:both; } , tag ini digunakan untuk membersihkan tag sebelumnya dari float sehingga tag yang dibuat di bawah float tidak terpengaruhi geser ke kanan atau ke kiri ( kembali default )

Membuat Navigasi Menu

Saya akan menggunakan tag <ul> untuk pembuatan navigasi menu, sebelum menuliskan tag silahkan membuat background dengan ukuran 10 pixel x 40 pixel buat gradasi hitam ke merah tua sehingga tampak seperti dibawah ini

save image diatas dengan nama bg_navigation_hover.jpg simpan di folder images. Selanjutnya mari kita tambahkan tag HTML sebagai berikut:

	

tambahkan gaya markup CSS sebagai berikut pada bagian CSS tepat di bawah tag .clear

ul.navigation{
	list-style:none;
	margin:0 auto;
	padding:0;
}
ul.navigation li{
	display: block;
	float: left;
	text-align: center;
	width: 125px;
	height:40px;
	color: #FFFFFF;
	font-size: 18px;
	font-weight:bold;
	line-height:30px;
	text-decoration:none;
	border-left:3px solid #000000;
}
ul.navigation li:hover, li.active{
	background:url(images/bg_navigation_hover.jpg) repeat-x top;
}
ul.navigation li a{
	display: block;
	width: 125px;
	height:40px;
	color: #FFFFFF;
	font-size: 18px;
	font-weight:bold;
	line-height:30px;
	text-decoration:none;
}
ul.navigation li a:hover, ul.navigation li a.active{
	color: #6fca0e;
}

tampilan navigasi menu kita akan tampak seperti di bawah ini

Gambar Navigasi Menu

Membuat Content Web

Ok sekarang kita sudah mempunyai menu pencarian, memasang logo dan juga menu navigasi. langkah selanjutnya dan terakhir adalah membuat markup untuk content dari website kita

Untuk Bagian membuat content akan saya lanjutkan di bagian ke 3 :), Anda bisa melihat demo tutorila atau mendownload hasil yang saya buat untuk pembelajaran anda semoga bermanfaat

 

Update

Bagian ketiga bisa anda lihat di artikel berikut : Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  2. Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)
  3. Tips dalam Menuliskan CSS yang Baik
  4. Tahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5
  5. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3

Komentar

  • gofatik (17 Nov 2014 06:35:58)

    Keren..,
    Aplikasinya ada di google play.
    Made in Indonesia.... (*0*)

  • Yudo (29 Jul 2012 02:42:52)

    gan,, ane ndk mudeng yg bagian ngasi search box nya mohon pencerahannya!!! :)

  • Benua (15 Jun 2012 05:48:35)

    Saya ingin belajar tentang java script dan jQuery tolong dibantu kang.
    oh ya saya di Japan,dan belajar di sekolah kejuruan khusus web desain.saya menjalaninya mulai 3 bulan yg lalu.saya ingin design web dengan jquery and java script.Saya ingin berhubungan langsung via phone apakah bisa?

  • andy scevorz (24 Apr 2012 06:02:25)

    gan gimana kalo tuh tombol navigasinya tempatnya tetap gak berubah walau tampilannya di zoom in di firefox ? thx b4...... artikel anda sangat bermanfaat.... :)

  • gerai kecantikan (24 Apr 2012 09:30:26)

    ane kurang begitu faham, maklum msh newbie.di bookmark dulu deh gan.trims sharingnya.

» Muat Komentar Sebelumnya (20 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff