Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



6. MEMBERI STYLE (STYLING)
December 29, 2009
Posted by: Fauzie


Setelah kita berjaya mengasingkan blok-blok elemen template ini, setiap bahagian ini hendaklah diberi stail supaya nampak lebih kemas dan cantik. Apa yang kita telah bina selama ini tidak menarik.

Mari kita beri styling pada bahagian page container dahulu. Pertama, membuat kotak container mempunyai bayang (box shadow). Dan kedua, membuat tulisan yang akan kita tulis mempunyai bayang (text shadow).

Sila pergi ke kod seperti di bawah ini:

#page-container {
width: 450px;
margin: auto;
background: red;
}

Tukarkan perkataan auto kepada "10px auto 40px auto", padam atau delete perkataan "background: red; kemudian tambah kod-kod berwarna seperti di bawah ini:

#page-container {
width: 450px;
margin:10px auto 40px auto;
border-top: 0px solid #a9a9a9;
border-bottom: 0px solid #a9a9a9;
text-shadow: 0px 1px 2px #111;
font-family: "Liberation Sans Bold", Arial, sans-serif;
color:#fff;
font-size: 15px;
-webkit-box-shadow: 7px 7px 10px #000;
-moz-box-shadow: 7px 7px 10px #000;
filter: progid:DXImageTransform.Microsoft.dropShadow
(color=#818181, offX=7, offY=7, positive=true);
}

Klik Preview dan anda akan dapati terdapat bayang hitam di tepi dan bawah container dan juga tulisan yang terdapat dalam container ini. Jika semua ok, klik Save Template.

Selepas berjaya memberi stail "box shadow" dan "text shadow", mari kita masukkan image di dalam header supaya ia nampak lebih menarik. Untuk tujuan ini kita akan menggunakan image seperti di bawah yang telah saya upload dan disimpan dalam album Photobucket saya.


Cari kod CSS header seperti di bawah ini:

#header {
background: blue;
height: 150px;
}


Padam atau delete perkataan background:blue dan height: 150px dan gantikan dengan kod berwarna maroon di bawah ini:

#header {
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/toppic.png) no-repeat center top;
padding:25px;
}


URL di atas adalah untuk gambar header yang telah saya upload menggunakan Photobucket (free hosting).

Klik Preview dan anda akan dapati bahagian header telah mempunyai image. Seperti biasa jika ok, klik Save Template.

Sekarang klik view untuk melihat rupa template dalam window. Sila perhatikan perkataan "Header" dalam image di bahagian header itu. Kita perlu menukarnya dengan nama kita atau dengan apa-apa nama yang anda fikirkan sesuai.

Untuk menukarnya, sila cari kod ini:

<div id='header'>Header</div>

Sila anda padam/delete perkataan Header dan taipkan nama anda atau nama yang sesuai di bahagian ini. Untuk mendapatkan font besar, sila taip <h1> dan </h1> sebelum dan selepas nama anda seperti ini:

<div id='header'><h1>Nama Anda</h1></div>

Klik Preview dan seterusnya klik Save Template.

Setelah menaip nama anda, kita perlu memberi stail untuk memberi effek yang lebih cantik. Mari kita warnakan font nama anda itu dan juga letakkan di bahagian tengah (centralized).

Sila cari kod #header { dan di bawah tanda ini "}", anda paste kod warna maroon seperti ini:

#header {
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/toppic.png) no-repeat center top;
padding:25px;
}
h1 {
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
text-align: center;
color:#000; font-size: 20px;
}

Klik Preview dan nama anda telah diberi warna dan terletak di bahagian tengah.
Klik Save Template.