Membuat Website Project 2

7/31/2019 Membuat Website Project 2

1/47

Membuat Website Semantik dengan Photoshop dan Dreamweaver

Mari kita mulai melanjutkan project website kedua yaitu membuat website semantik tanpa tabel,tentunya masih menggunakan Photoshop dan Dreamweaver. Bila anda belum membaca tutorialsebelumnya, saya sarankan untuk membaca dan mempraktekannya terlebih dahulu supaya lebih

mantap lagi untuk memulai project kita kali ini.

Mengapa harus membuat Template web tanpa table?

Pada pembahasan CSS saya sering kali membahas bahwa implementasi CSS, Table Less dan

Semantik tapi tidak Divitis merupakan standarisasi web yang baik (Web 2.0). Template Webyang di buat dengan table adalah web tradisional yang tidak stabil, berat untuk di load, tag

coding yang banyak, isu kompatibilitas yang sangat tinggi pada setiap browser dan lain

sebagainya.

Pada project kali ini kita akan menggunakan photoshop untuk merancang template, lalu meng-

convert template dari .PSD ke HTML dengan Dreamweaver secara handcode (coding dengantangan) sedikit agak rumit memang tapi disinilah seni dalam menciptakan Design di mulai.Layout yang di buat tidak akan menggunakan Table melaiinkan dengan DIV yang di kustomisasi

CSS

Banyak sekali gambar tutorial yang harus di load jadi bila koneksi anda menggunakan dial-up

loading nya pasti lama dan bila ada image dalam tutorial ini tidak muncul, mohon klik kananpada image kemudian pilih show image/reload image (untuk FFox, saya sarankan selalu

menggunakan FireFox). ok Tampilan project website kita kali ini adalah sebagai berikut (klik

untuk memperbesar)

Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini
http://www.w3function.com/images_tutor/bmwsbb10.jpg


2/47


3/47

pada dialog blending option centang dan klik gradient overlay kemudian atur gradasi warna

sehingga menjadi seperti pada gambar berikut :

pilih ellipse tool kemudian buat bidang bulat pada layer background yang telah diberi warna

gradasi hitam putih, sehingga menjadi sebagai berikut :


4/47

buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah sehingga

menjadi sebagai berikut :

klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius GausianBlur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua

bidang :

apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :


5/47

buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong

kemudian tempatkan disebelah atas :

Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehinggagambar menjadi sebagai berikut :


6/47

Dengan demikian background untuk website kita kali ini bisa dikatakan selesai, anda bisa saja

menambahkan variasi sesuka anda. Sebagai catatan saja dari saya, background yang kita buat

usahakan selalu dengan ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rataresolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop berukuran hanya 1024 x

780 pixel. Jika kita membuat background dengan ukuran lebar 1024 tentu tidak akan tampilbagus pada resolusi diatasnya, lebih baik lagi bila kita bisa membuat background yang dinamis

namun indah dan dengan ukuran byte yang rendah.

Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout

content website kita. Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640

pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang

berwarna putih.


7/47

geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan

menggunakan move tool .. klik kanan pada layout kemudian pilih blending option gunakan

setingan berikut

hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di

gabungkan dengan background akan menghasilkan gambar sebagai berikut


8/47

buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas

kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih

merge visible

Gabungkan gambar awan dengan design website sebelumnya kemudian tambahkan bulatan-

bulatan hitam lain disekelilingnya sehingga kita mendapatkan design website seperti gambarberikut


9/47

OK sekarang content website dan background sudah jadi, selanjutnya mari kita buat Design

Menu untuk website kita. langkah pertama adalah buat bidang persegi dengan rectangle toolpada bagian atas content selebar content atau 640 pixel kemudian tambahkan gradient overlay

pada blending option dengan variasi warna merah tua dengan hitam (caranya sama sepertisebelumnya)

buatkan lagi bidang kali ini dengan rounded rectangle tool disebelah pojok kiri atas yang

nantinya akan kita gunakan untuk input pencarian, beri gradisi warna seperti sebelumnya

tambahkan icon pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logowebsite anda sehingga bagian atas menu tampak seperti gambar berikut


10/47

Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren

Mark Up Design dengan xHTML dan CSS

Sekarang anda sudah memiliki design website yang anda buat sendiri dengan photoshop, nahlangkah selanjutnya adalah membuat Mark Up atas Desain yang telah kita buat kedalam xHTML

dan CSS, silahkan buka Macromedia Dreamweaver anda.

Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan

nama index.html.


11/47

Setiap kita membuat file baru maka akan ditampilkan tag html bawaan, ubah tagUntitled Document yang berfungsi untuk memberi title website pada tab

browser sesuai dengan title website yang anda kehendaki.

?

1

23

4

56

78

910

11

1213

Welcome | Websiteku

Sebelum melanjutkan XHTML mari kita kembali lagi ke photoshop untuk menyiapkan

background dokumen, pastikan save gambar pada photoshop yang telah kita buat dengan

ekstensi psd. Delete dulu semua image menu, kemudian pada blending option untuk layout

content centang dan ubah color overlay menjadi hitam pekat ( #000000 )
http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3function.com/blog/index.php?p=det&idn=34


12/47

potong atau crop gambar sehingga memiliki ukuran dengan kb yang lebih kecil, buat persis

menjadi sebagai berikut dan pastikan layout hitam berada ditengah-tengah..


13/47

Simpan gambar background yang telah di crop dengan nama background.jpg, tempatkan pada

direktori image yang terdapat pada direktori index.html. Ingat pada saat menyimpan gambar,gunakanlah save for web sehingga kita bisa mengoptimasi ukuran byte gambar dan gambar lebih

cepat untuk di load oleh browser

kita terapkan CSS untuk Tag body XHTML. Sementara untuk memudahkan kita, terapkan CSSdengan cara internal style sheet dulu baru kemudian setelah semua mark up selesai kita

pindahkan menjadi eksternal stylesheet dengan ekstensi tersendiri. bila anda belum pahamdengan penerapan CSS silahkan buka artikel saya sebelumnyaPengertian CSS dan Cara

Penerapan CSS pada HTML. OK, tambahkan tag CSS berikut dibawah tag title html

?

1

2

34

567

style media="screen">ody {

margin:0;background:#000000url(images/background.jpg) no-repeattop;font: normalmedium"Trebuchet MS", Arial, Helvetica, sans-serif

}/style>

Penambahan mark up css diatas bila kita lihat di browser akan menampilkan dokumen websebagai berikut

Sekarang kembalikan lagi layout content web menjadi putih kembali ( undo color overlay )

kemudian delete layout background sehingga kita mendapatkan gambar sebagai berikut
http://www.w3function.com/blog/?p=det&idn=31http://www.w3function.com/blog/?p=det&idn=31http://www.w3function.com/blog/?p=det&idn=31http://www.w3function.com/blog/?p=det&idn=31http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/?p=det&idn=31http://www.w3function.com/blog/?p=det&idn=31


14/47

klik kanan pada layer kemudian pilih merge visible pastikan bagian tetap transparent persisseperti gambar diatas. Selanjutnya potong gambar dengan crop menjadi tiga bagian, bagian yang

harus dipotong dapat anda lihat pada gambar dibawah ditandai dengan warna merah, pastikan

presisi pemotongan gambar sama..


15/47

simpan (save for web) ketiga gambar yang telah dipotong dengan ekstensi PNG pada folderimages.

Potongan #1 simpan dengan nama bgheader.png Potongan #2 simpan dengan nama bgcontent.png Potongan #3 simpan dengan nama bgfooter.png

saya tidak memberi patokan ukuran masing-masing potongan, maka dari itu buka semua

potongan yang tadi telah disimpan klik kanan pada bagian title kemudian pilih image size untuk

mengetahui ukuran pixel potongan anda dan ingat baik-baik ukuran pixel gambar2 tersebut.

Selanjutnya pada style css dibawah body tambahkan kode sebagai berikut

?

1

23

4

.header{

width: 646px;height: 170px;
http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34


16/47

5

67

8

9

1011

12

1314

15

1617

18

19

20

2122

23

margin: 0;background:url(images/bgheader.png) bottomrightno-repeat;

}.content{

width: 646px;margin: 0auto;height:500px;background:url(images/bgcontent.png);

}.container{

padding : 10px;}.footer{

width: 646px;height: 30px;margin: 0auto;background:url(images/bgfooter.png) toprightno-repeat;

}

Ukuran width dan height pada property css diatas tergantung dari hasil potongan gambar anda,oleh karena itu untuk width dan height-nya jangan mengacu pada kode diatas silahkan mengacupada gambar anda.

tambahkan juga tag HTML berikut pada body

?

12

3

45

divclass="header">divclass="content">

/div>divclass="footer">

Dengan demikian maka tag HTML sekarang menjadi sebagai berikut

?

1

2

34

5

67

8

910

Welcome | Websiteku.header{

width: 646px;height: 170px;margin: 0;background:url(images/bgheader.png) bottom right no-repeat;
http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34


17/47

11

1213

14

15

1617

18

1920

21

2223

24

25

26

2728

2930

31

3233

34

35

3637

38

39

}.content{

width: 646px;margin: 0 auto;height:500px;background:url(images/bgcontent.png);

}.container{

padding : 10px;}.footer{

width: 646px;height: 30px;margin: 0 auto;background:url(images/bgfooter.png) top right no-repeat;

}

Tag HTML diatas sementara akan menghasilkan dokumen website seperti gambar dibawah.Apabila tidak tampil seperti gambar dibawah berarti ada yang salah dengan presisi width danheight pada property CSS, trus utak-atik ukuran width dan heightnya hingga mempunyai presisi

yang benar.


18/47

Div dengan atribut class content akan mengikuti isi karena tidak dipatok dengan ukuran height.

sedangkan isi content sendiri kita masukan didalam container. bila kita menambahkan beberapa

heading (h1) dan paragraph (p) pada content maka kita akan mendapatkan tampilan sebagaiberikut click untuk memperbesar

Ok tutorial membuat website table less dengan photoshop dan dreamweaver bagian pertamahanya sampai disini.. dibagian kedua nanti kita akan belajar membuat menu navigasi dan

mengisi kolom content kita sehigga content kita tidak hanya paragraph saja, he.... Bila anda ingin

mengetahui dan suka dengan artikel saya ini silahkan subscribe RSS nya. Terimakasih untuk

kunjungannya
http://www.w3function.com/images_tutor/bmws1.jpg


19/47

TUTORIAL 2

Dibagian satu yang lalu kita sudah sampai pada perancangan kerangka website sekarang marikita 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 :

tag HTML dan CSS dari project kita terdahulu adalah sebagai berikut

?

1

2

3

4

5

6

7

8

9

10

11

Welcome | Websiteku

body {

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

margin:0;

padding:0;

font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/images_tutor/bmws1.jpg


20/47

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

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{


21/47

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

width: 646px;

height: 30px;

margin: 0 auto;

margin-bottom:50px;

background:url(images/bgfooter.png) top right no-repeat;

}

The standard Lorem Ipsum passage.

Text apa saja bebas sakarep anjeun




22/47

Untuk melihat demo dan hasil dari tampilan project website yang akan saya bahas kali ini klik di

siniatau bisa di lihat pada gambar berikut :

Membuat Input Pencarian

Sesuai dengan judulnya yaitu membuat website semantik 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"

?

1

2

3

4

5

6

7

8

Pada tag bagian CSS tambahkan gaya css sebagai berikut:

?
http://w3function.com/demo-tutor/bmws/bmws1.htmlhttp://w3function.com/demo-tutor/bmws/bmws1.htmlhttp://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://w3function.com/demo-tutor/bmws/bmws1.html


23/47

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.header .left{

width: 230px;

float:left;

height: 30px;

padding:68px0040px;

color:#FFFFFF;

}

.header .left.search{

width: 250px;

height: 14px;

padding:3px5px;

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


24/47

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 untukelemen tertentu seperti input sehingga tampilannya juga menjadi transparan tidak putih.

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

?

1

2

3

4

5

6

7

8

.header .left.search{

background:url(images/transparent.gif);

border:0;

width: 250px;

height: 14px;

padding:3px5px;

color:#aaa;

}

Hasilnya kita memiliki form invisible dan akan terlihat seperti ini


25/47

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" :

?

1

2

3

4

5

6

7

Tambahkan markup CSS untuk class="right"

?

1

2

.header .right{

width:225px;
http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40


26/47

3

4

5

6

padding:30px60px00;

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 kitainginkan 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 kananakan 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

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


27/47

save image diatas dengan nama bg_navigation_hover.jpg simpan di folder images. Selanjutnya

mari kita tambahkan tag HTML sebagai berikut:

?

1

2

3

4

5

6

7

Home

About

Galerry

Blog

Contact

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

?

1

2

3

4

5

6

7

8

9

10

11

ul.navigation{

list-style:none;

margin:0auto;

padding:0;

}

ul.navigation li{

display: block;

float: left;

text-align: center;

width: 125px;

height:40px;

color: #FFFFFF;


28/47

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

font-size: 18px;

font-weight:bold;

line-height:30px;

text-decoration:none;

border-left:3pxsolid#000000;

}

ul.navigation li:hover, li.active{

background:url(images/bg_navigation_hover.jpg) repeat-xtop;

}

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


29/47

Membuat Content Web

okay 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 :)


30/47

TUTORIAL

Apakah anda sudah selesai dengan tutorial membuat "website semantik tanpa table" di bagianpertamadankeduayang 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 ditampilkan 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 klikdisini

atau bisa di lihat pada gambar berikut :

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

?
http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://w3function.com/demo-tutor/bmws3/http://w3function.com/demo-tutor/bmws3/http://w3function.com/demo-tutor/bmws3/http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/images_tutor/bmws1a.jpghttp://www.w3function.com/images_tutor/bmwsbb10.jpghttp://w3function.com/demo-tutor/bmws3/http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=34


31/47

12

3

45

67

89

10

1112

13

14

1516

1718

1920

21

2223

24

25

2627

282930

31

3233

34

3536

37

38

3940

41

42

4344

45

46

Welcome | Websitekubody {

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;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


32/47

47

4849

50

51

5253

54

5556

57

5859

60

61

62

6364

6566

67

6869

70

71

7273

74

75

7677

78

7980

81

8283

84

85

8687

88

8990

91

92

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;

}


33/47

93

9495

96

97

9899

100

101102

103

104105

106

107

108

109110

111112

113

114115

116

117

118119

120

121

122123

124

125126

127

128129

130

131

132133

134

135

Home AboutGalerryBlogContact

The standard Lorem Ipsum passage.




Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini


34/47

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 terlebihdahulu:

Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

Cara Penerapan CSS pada HTML Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links,

List dan Table

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model :Border, Padding, Margin, Outline

Belajar Membuat Website dengan Photoshop dan Dreamweaver Silahkan cari referensi lain untuk dasar HTML dan dasar ilustrasi Photoshop, banyak

sekali di Google.

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

Belajar Membuat Website Semantik Tanpa Table Bagian 1 Belajar Membuat Website Semantik Tanpa Table Bagian 2

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 untukmemudahkan 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 tambahpanjang. 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 kitabuat sebelumnya misalnya pada tag body berikut

?1 ackground: #000000url(images/background.jpg) no-repeattop;
http://www.w3function.com/blog/index.php?p=det&idn=41http://www.w3function.com/blog/index.php?p=det&idn=41http://www.w3function.com/blog/index.php?p=det&idn=31http://www.w3function.com/blog/index.php?p=det&idn=31http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=24http://www.w3function.com/blog/index.php?p=det&idn=24http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=40http://www.w3function.com/blog/index.php?p=det&idn=34http://www.w3function.com/blog/index.php?p=det&idn=24http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=49http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=46http://www.w3function.com/blog/index.php?p=det&idn=31http://www.w3function.com/blog/index.php?p=det&idn=41


35/47

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

background menjadi sebagai berikut

?

1 ackground: #000000url(../images/background.jpg) no-repeattop;

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 kiridan 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

34

56

7

divclass="container">

/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

?

12

34

5

6

78

.container .column{ }

.container .column .left-column{float:left;width:186px;border-top:2pxsolid#aaa;border-bottom:2pxsolid#aaa;border-left:2pxsolid#aaa;border-right:2pxsolid#aaa;margin-left:8px;height:200px;
http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52


36/47

9

1011

12

13

1415

16

1718

}.container .column .right-column{

float:right;width:415px;border:2pxsolid#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 itusaya 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 denganlengkungan di tiap sudutnya, sehingga tidak perlu repot lagi memanipulasi gambar di photoshop.Supaya tidak kotak persegi mari kita tambahkan CSS3:


37/47

?

12

3

4

56

7

89

10

1112

13

14

15

1617

1819

20

2122

23

24

.container .column{}

.container .column .left-column{float:left;width:186px;border-top:2pxsolid#aaa;border-bottom:2pxsolid#aaa;border-left:2pxsolid#aaa;border-right:2pxsolid#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;


float:right;width:415px;border:2pxsolid#aaa;margin-right:8px;height:360px;-moz-border-radius:10px;-webkit-border-radius:10px;

}

Dengan penambahan properti CSS3 tersebut kita akan mendapatkan web dengan tampilanberikut


38/47

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


39/47

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 beriopacity 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

23

4

56

.container .column .left-column{float:left;width:186px;border:1pxsolid#555;margin-left:8px;height:200px;-moz-border-radius-topleft:10px; -moz-border-radius-bottomright:10px;


40/47

7

89

10

11

1213

14

1516

17

1819

20

21

22

-webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:10px; background:url(../images/bar-left.png) toprepeat-x;


float:right;width:415px;border:1pxsolid#111;margin-right:8px;height:360px;-moz-border-radius:10px;-webkit-border-radius:5px;background:url(../images/bar-right.png) topno-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 padaCSS buat tag berikut (ini hanya contoh format yang saya buat, berikutnya semuanya tergantung

pada kreatifitas design anda)

?

1

23

.container .column .right-column .no-warp{width:410px;margin:0auto;padding:5px05px0;


41/47

4

56

7

8

910

11

1213

14

1516

17

18

19

2021

2223

24

2526

27

28

2930

31

32

3334

35

3637

38

3940

41

42

4344

45

4647

48

49

background:url(../images/bg_warp.jpg) toprepeat-x;}.container .column .left-column h1{

width:180px;margin:0auto;margin-bottom:10px;border-bottom:1pxdotted#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:05px;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:2px5px;margin-bottom:5px;

}.container .column .right-column p{

margin-bottom:10px;padding:05px;

}.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;}


42/47


43/47

Markup Tag dan Content di HTML sesuai dengan format dari CSS adalah sebagai berikut

?

12

3

4

56

7

89

10

1112

13

1415

16

17

18

1920

21

2223

24

2526

Welcome | Websiteku

HomeAboutGalerryBlogContact
http://www.w3function.com/images_tutor/bmwsbb8.jpghttp://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3function.com/blog/index.php?p=det&idn=52http://www.w3function.com/images_tutor/bmwsbb8.jpg


44/47

27

2829

30

31

3233

34

3536

37

3839

40

41

42

4344

4546

47

4849

50

51

5253

54

55

5657

58

5960

61

6263

64

65

6667

68

6970

71

72

Categories

Lorem ipsumdolor sit ametadipiscingsuscipit elitDuis nuncaccumsan quis

Most View

Lorem ipsumdolor sit ametadipiscingsuscipit elit

Duis nuncaccumsan quis

Bagaimana Cara Membuat WebsiteLorem ipsum dolor sit amet, consectetur adipiscing elit.

Post under news | 25 February 2011

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 maurisVestibulum ut nibh sed lorem pretium mollis quis non ligula. Pellentesque at ipsum at metus auctor aliquet.

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 maurisVestibulum ut nibh sed lorem pretium mollis quis non ligula.Pellentesque at ipsum at metus auctor aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscingelit.

Post under news | 25 February2011

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
http://www.w3function.com/images_tutor/dcytbvp.jpghttp://www.w3function.com/images_tutor/dcytbvp.jpghttp://www.w3function.com/images_tutor/dcytbvp.jpg


45/47

73

7475

76

77

7879

80

8182

83

8485

86

87

88

8990

9192

93

9495

96

97

98

Vestibulum ut nibh sed lorem pretium mollis quis nonligula.

Pellentesque at ipsum at metus auctor aliquet.

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 maurisVestibulum ut nibh sed lorem pretium mollis quis non

ligula.Pellentesque at ipsum at metus auctor aliquet.

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


46/47

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

34

5

6

7

89

1011

12

13

1415

16

.footer .circle_leaf{width: 330px;height: 250px;position:absolute;margin:-170px00-50px;display:block;background:url(../images/leaf_footer.png) no-repeat;

}.copy{

width: 646px;height: 50px;margin: 0auto;color:#FFF;text-align:center;font-size:14px;

}

Pada html di bagian footer menjadi seperti berikut

?1

2

34

5

6

divclass="footer">HomeAboutGalerryBlogContact


47/47

7

89

/div>divclass="copy">CopyRight by w3function.com

Hasil akhirnya akan seperti ini
http://www.w3function.com/images_tutor/bmwsbb10.jpg

Membuat Website Project 2

Documents

Transcript of Membuat Website Project 2