• 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 3

26‘11
February

info52.jpg

Apakah anda sudah selesai dengan tutorial membuat "website tanpa table" di bagian pertama dan kedua yang lalu? mari kita lanjut membuat layout untuk isi halaman utama website. Umumnya halaman utama website di isi dengan pengenalan website itu sendiri. Apabila website ditujukan untuk menjual product (website ecommerce) beberapa product unggulan juga di tampilkan di halaman utama, namun karena website yang kita bangun sekarang adalah jenis website personal maka di halaman utama kita isi dengan alakadarnya dulu :)

Untuk melihat demo dan hasil dari tutorial project membuat website kita ini silahkan klik disini atau bisa di lihat pada gambar berikut :

Gambar Jadi

Berikut ini gambar dan markup HTML dari project website Bagian 2 lalu

<!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;
}
.header .left{
	width: 230px;
	float:left;
	height: 30px;
	padding:68px 0 0 40px;
	color:#FFFFFF;
}
.header .left .search{
	background:url(images/transparent.gif);
	border:0;
	width: 250px;
	height: 15px;
	padding:3px 5px;
	color:#FFF;
}
.header .left .submit{
	display: none;
}
.header .right{
	width:225px;
	padding:28px 65px 0 0;
	float:right;
}
.clear{ clear:both; }
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;
}
.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 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>
    <div class="clear"></div>
    <ul class="navigation">
        <li class="active"><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Galerry</a></li>
        <li><a href="#">Blog</a></li>
        <li style="width:128px"><a href="#">Contact</a></li>
    </ul>
</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>

Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini

Untuk mengerjakan tutorial saya ini maka Anda harus menguasai dasar dari CSS, HTML dan minimal bisa membuat website dengan table. Berikut daftar yang bisa anda pelajari terlebih dahulu:

Apabila anda sudah menguasai selanjutnya tentunya anda harus selesai mengerjakan tutorial pada bagian pertama dan kedua:

Memindahkan Metode penerapan CSS

Pada tutorial membuat "website semantik tanpa table" yang lalu saya memberi petunjuk kepada anda untuk menerapkan CSS dengan cara inline style sheet, tujuannya adalah untuk memudahkan anda dalam mengerjakannya dan juga karena pada bagian yang lalu kita masih kerja pada satu file saja (index.html). Sekarang dan selanjutnya kita akan mulai bekerja dengan banyak file HTML sehingga sudah tidak logis lagi untuk menerapkan inline style sheet karena selain nanti kita mengulangi penulisan CSS di setiap file HTML, coding kita juga jadi tambah panjang. Silahkan buat file dengan ekstensi .css kemudian simpan di folder style, susunan foldernya adalah sebagai berikut

Karena CSS kita pindahkan ke dalam folder style maka kita juga harus merubah arah penunjukan gambar untuk background pada CSSnya, perhatikan coding CSS untuk background yang kita buat sebelumnya misalnya pada tag body berikut

	background: #000000 url(images/background.jpg) no-repeat top;

Silahkan tunjuk ulang posisi gambar yang kita jadikan background, atau ubah arah penunjukan background menjadi sebagai berikut

	background: #000000 url(../images/background.jpg) no-repeat top;

Membuat 2 Kolom untuk Content Halaman Utama

Mari kita membuat 2 kolom untuk layout content di halaman utama. Kolom di sebelah kiri kita gunakan untuk membuat kategori, menyimpan widget dan lain sebagainya (di blog w3function.com saya gunakan kolom ini di sebelah kanan).

Kolom di sebelah kanan kita gunakan untuk isi dari halaman itu sendiri. Ukuran content kita adalah 646 px, 6 px sudah terpakai border dan 20 px sudah terpakai padding untuk container, maka sisa lebar untuk content tinggal 620 px. Berapa lebar yang di perlukan untuk kolom kiri dan kanan?

Hal yang paling logis adalah karena sebelah kiri untuk keperluan widget maka lebar cukup sebesar 186px + border kiri 2px + border kanan 2px (190px), untuk kolom kanan kita gunakan lebar sebesar 416px + border 4px + padding 10 px (430px), total yang akan di pakai jadi 620px. sisanya kita gunakan sebagai jarak antara kolom kiri dan kanan, jiga bingung gunakan calculator :p. Okay sekarang buang heading dan paragraph yang sudah kita buat sebelumnya didalam div dengan class="container" kemudian tambahkan mark up berikut :

<div class="container">
    <div class="column">
        <div class="left-column"></div>
        <div class="right-column"></div>
        <div class="clear"></div>
    </div>
</div>

Div dengan class left-column akan kita gunakan sebagai kolom kiri dan Div dengan class right-column akan kita gunakan sebagai kolom kanan. Tambahkan style untuk membentuk 2 kolom tersebut dengan menuliskan tag CSS berikut

.container .column{ }
.container .column .left-column{
	float:left;
	width:186px;
	border-top:2px solid #aaa;
	border-bottom:2px solid #aaa;
	border-left:2px solid #aaa;
	border-right:2px solid #aaa;
	margin-left:8px;
	height:200px;
}
.container .column .right-column{
	float:right;
	width:415px;
	border:2px solid #aaa;
	margin-right:8px;
	height:360px;
}

Hasilnya akan seperti gambar dibawah

Sayang sekali pada saat saya menulis artikel ini saya belum memberikan penjelasan tentang CSS3 (mudah-mudahan anda membaca ini pada saat saya sudah membahasnya :P) karena itu saya akan jelaskan salah satu kegunaan CSS3 disini. Jaman dulu pada saat saya pertama belajar Web Design, semua elemen HTML berbentuk kotak persegi, untuk menambahkan lengkung pada setiap sudut persegi kotak maka harus bersusah susah dulu memanipulasi gambar di photoshop

Pada CSS3 dan HTML5 salah satu tambahan propertinya yaitu -moz-border-radius dan -webkit-border-radius kita dipermudah dengan kemampuan untuk membuat kotak dengan lengkungan di tiap sudutnya, sehingga tidak perlu repot lagi memanipulasi gambar di photoshop. Supaya tidak kotak persegi mari kita tambahkan CSS3:

.container .column{}
.container .column .left-column{
	float:left;
	width:186px;
	border-top:2px solid #aaa;
	border-bottom:2px solid #aaa;
	border-left:2px solid #aaa;
	border-right:2px solid #aaa;
	margin-left:8px;
	height:200px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
}
.container .column .right-column{
	float:right;
	width:415px;
	border:2px solid #aaa;
	margin-right:8px;
	height:360px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

Dengan penambahan properti CSS3 tersebut kita akan mendapatkan web dengan tampilan berikut

Membuat Bar untuk Judul Kolom

Sebuah kolom biasanya memiliki judul kolom dan di beri background berbeda dengan isi kolom, mari kita membuat background di photoshop buat sebuah canvas berukuran 600pixel x 32pixel, pada blending option beri gradasi hitam (#11111) ke abu2 (#555555), atau mengenai warna terserah anda

Masih di photosop dengan rectangle tool buatlah bidang-bidang berwarna putih dengan berbagai ukuran lebar kemudian miringkan, merge semua layer bidang yang telah di buat selanjutnya beri opacity hanya 5% pada bidang yang telah di merge

Tambahkan variasi sesuka anda sebagus mungkin, bar yang saya buat hasilnya sebagai berikut:

buat lagi gambar dengan gradasi abu-abu (#aaaaaa) ke putih (#ffffff)

Simpan bar pertama dengan nama bar-right.png dan yang kedua dengan nama bar-left.png, tambahkan CSS background pada .container .column .left-column dan .container .column .right-column

.container .column .left-column{
	float:left;
	width:186px;
	border:1px solid #555;
	margin-left:8px;
	height:200px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
    background:url(../images/bar-left.png) top repeat-x;
}
.container .column .right-column{
	float:right;
	width:415px;
	border:1px solid #111;
	margin-right:8px;
	height:360px;
	-moz-border-radius:10px;
	-webkit-border-radius:5px;
    background:url(../images/bar-right.png) top no-repeat;
}

Ok kita sudah membuat kerangka kolom untuk isi kita selanjutnya apa?

Memformat elemen content (heading, paragraph, dsb) di HTML

Delete properti height untuk class left-column dan right-column, Format semua bentuk elemen HTML yang akan kita jadikan tempat untuk text, gambar, video (konten) kita, misalnya pada CSS buat tag berikut (ini hanya contoh format yang saya buat, berikutnya semuanya tergantung pada kreatifitas design anda)

.container .column .right-column .no-warp{
	width:410px;
	margin:0 auto;
	padding:5px 0 5px 0;
	background:url(../images/bg_warp.jpg) top repeat-x;		
}
.container .column .left-column h1{
	width:180px;
	margin:0 auto;
	margin-bottom:10px;
	border-bottom:1px dotted #aaa;
	font-size:14px;
	font-weight:bold;
	color:#000;
	line-height:26px;
	height:26px;
	text-indent:10px;
}
.container .column .left-column ul{
	margin-bottom:20px;
	margin-left:20px;
	list-style:circle;
}
.container .column .left-column p{
	padding:0 5px;
	margin-bottom:10px;
}

.container .column .left-column ul li{
	margin-bottom:5px;
}
.container .column .right-column h1{
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	line-height:32px;
	height:32px;
	text-align:center;
}
.container .column .right-column h2{
	font-size:14px;
	font-weight:bold;
	padding:2px 5px;
	margin-bottom:5px;
}
.container .column .right-column p{
	margin-bottom:10px;
	padding:0 5px;
}
.container .column .right-column p img{
	width:180px;
	float:left;
}
.container .column .right-column a{
	color:#F30;
	text-decoration:none;
}
.container .column .right-column a:hover{
	text-decoration:underline;
}

Wew, penasaran kan apa yang saya buat diatas. Semua elemen dan class (p, h, dsb ) yang saya tulis di depan .container .column .left-column adalah bentuk format yang akan diterapkan pada semua elemen HTML yang ada di kolom kiri begitu juga semua elemen dan class yang saya tulis di depan .container .column .right-column adalah bentuk format yang akan diterapkan pada semua elemen HTML yang ada di kolom kanan

Jika masih bingung dengan properti seperti margin, border, padding dsb silahkan buka referensi berikut:

Pada class no-warp saya tambahkan background untuk memisahkan isi content background:url(../images/bg_warp.jpg) top repeat-x; gambar yang saya buat berukuran 40pixel x 100pixel dengan gradasi abu-abu ke putih, silahkan berkreasi

Ok dengan memformat elemen content (heading, paragraph, dsb) di HTML dan juga mengisi content yang kita format maka tampilannya akan seperti ini (klik untuk memperbesar)

Markup Tag dan Content di HTML sesuai dengan format dari CSS 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" />
<link rel="stylesheet" href="style/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<title>Welcome | Websiteku</title>
</head>
<body>
<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 class="right">
    	<a href="#"><img src="images/logo.png" alt="w3Function.com" /></a>
    </div>
	<div class="clear"></div>
    <ul class="navigation">
        <li class="active"><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Galerry</a></li>
        <li><a href="#">Blog</a></li>
        <li style="width:128px"><a href="#">Contact</a></li>
    </ul>
</div>
<div class="content">
    <div class="container">
        <div class="column">
            <div class="left-column">
                <h1>Categories</h1>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>dolor sit amet</li>
                    <li>adipiscing</li>
                    <li>suscipit elit</li>
                    <li>Duis nunc</li>
                    <li>accumsan quis</li>
                </ul>
                <h1>Most View</h1>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>dolor sit amet</li>
                    <li>adipiscing</li>
                    <li>suscipit elit</li>
                    <li>Duis nunc</li>
                    <li>accumsan quis</li>
                </ul>
            </div>
        <div class="right-column">
        <h1>Bagaimana Cara Membuat Website</h1>
        <div class="no-warp">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
        <p>Post under <a href="#">news</a> | <em>25 February 2011</em></p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam id suscipit elit. Nam orci mauris, semper sed gravida id, 
            accumsan quis lectus. In lorem felis Duis nunc mauris
            Vestibulum ut nibh sed lorem pretium mollis quis non ligula. P
            ellentesque at ipsum at metus auctor aliquet.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam id suscipit elit. Nam orci mauris, semper sed gravida id, 
            accumsan quis lectus. In lorem felis Duis nunc mauris
            Vestibulum ut nibh sed lorem pretium mollis quis non ligula. 
            Pellentesque at ipsum at metus auctor aliquet.
        </p>
        </div>
        <div class="no-warp">
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
            <p>Post under <a href="#">news</a> | <em>25 February 2011</em></p>
            <p><img src="http://www.w3function.com/images_tutor/dcytbvp.jpg"  /></p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Nam id suscipit elit. Nam orci mauris, semper sed gravida id, 
                accumsan quis lectus. In lorem felis Duis nunc mauris
                Vestibulum ut nibh sed lorem pretium mollis quis non ligula. 
                Pellentesque at ipsum at metus auctor aliquet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Nam id suscipit elit. Nam orci mauris, semper sed gravida id, 
                accumsan quis lectus. In lorem felis Duis nunc mauris
                Vestibulum ut nibh sed lorem pretium mollis quis non ligula. 
                Pellentesque at ipsum at metus auctor aliquet.
            </p>
            </div>
        </div>
        <div class="clear"></div>
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>

 

Membuat Footer (Bagian bawah)

Bagian bawah website biasanya berisi copy right dan link navigasi tapi sesuai gambar jadi di tutorial bagian 1 mari kita memperindah dengan beberapa background gambar :)

Untuk memperbagus bagian footer sesuai background saya membuat bulatan-bulatan warna warni di bagian footer dan menambahkan vektor karangan daun, disini saya tidak akan menjelaskan cara membuatnya karena topik kita tentang membuat website :) silahkan berkreasi dan berinovasi sendiri di photoshop

Gambar diatas saya buat berukuran 330pixel x 250 pixel dan saya beri nama leaf_footer.png. Untuk menambahkan format hiasan gambar dan copy right pada CSS bagian footer ganti margin-botom jadi 10px, kemudian di bawahnya tambahkan tag berikut

.footer .circle_leaf{
	width: 330px;
	height: 250px;
	position:absolute;
	margin:-170px 0 0 -50px;
	display:block;
	background:url(../images/leaf_footer.png) no-repeat;
}
.copy{
	width: 646px;
	height: 50px;
	margin: 0 auto;
	color:#FFF;
	text-align:center;
	font-size:14px;
}

Pada html di bagian footer menjadi seperti berikut

<div class="footer">
	<div class="circle_leaf"></div>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Galerry</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
</div>
<div class="copy">CopyRight &copy; by w3function.com</div>

Hasil akhirnya akan seperti ini

Selanjutnya tidak ada bagian ke 4, selanjutnya adalah mengembangkan kreatifitas anda untuk membuat desain sendiri. Sumber inspirasi dalam membuat desain website daat anda temukan di link berikut Inspiration.

Untuk memperdalam pengetahuan desain website anda silahkan pelajari trend pembuatan website terbaru yaitu Desain website Responsif (Responsive Design) tutorialnya sudah saya post disini : Membuat Desain Website Responsif

Untuk memperdalam pengetahuan desain website semantic dengan HTML5 silahkan buka artikel berikut Tahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5

Anda bisa melihat demo atau mendownload hasil akhir dari pembelajaran desain website tableless dibawah

  

Selamat mencoba semoga bermanfaat, P.S jiga suka artikel-artikel di w3function mohon dukunganya di facebook dengan menekan tombol like di atas menu recent comment w3Function :) Terimakasih Widi Mawardi

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  2. Tips dalam Menuliskan CSS yang Baik
  3. CSS 3 untuk border dan background
  4. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2
  5. Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya

Komentar

  • Fatrin Budiman (31 Jul 2015 03:31:13)

    mlm mas mau tanya,, ini desainnya berupa template ya ?, kalo mau dijadikan template joomlah atau wordpress gimana mas ? trims

  • unnibaee (29 May 2015 11:06:10)

    makasih :)
    sangat membatu ;)

  • jumiri (20 Nov 2013 01:46:06)

    Subhanallah Banget ...Sangat pemurah dan tak ada yang murahan di sini...semunya berkualitas :)...Thank Kyuu...so much.....:)..bang w3fungcion.com

  • i[at]w3function.com (14 May 2013 07:20:54)

    @mordigian di artikel ini anda bisa download source code secara gratis untuk membantu belajarnya, silahkan download dan cari tau apa yang salah dari source kami

  • mordigian (13 May 2013 11:38:54)

    gan, saya bingung koq background nya malah ga muncul setelah css nya tidak inline, padahal sudah ditunjuk ulang posisi nya

» Muat Komentar Sebelumnya (42 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