Selasa, 07 Juni 2011

Cara Membuat Website Semantik Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3

info52.jpg
Apakah anda sudah selesai dengan tutorial membuat "website semantik 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

?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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
?
1
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
?
1
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 :
?
1
2
3
4
5
6
7
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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)
?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.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
?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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
?
1
2
3
4
5
6
7
8
9
<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


Selamat mencoba Widi Mawardi
di 18.53