Bikin Web Layout menggunakan teknik Web 2.0 – seru wabis, dibahas dari design layout ampe editing CSS na di Dreamweaver.
Part – 3 Layout Style with CSS
sesua ma tema na, kita bakalan bikin layout menggunakan teknik perancangan web 2.0.
Pendahuluan 😀 Apa itu CSS ?
Sebelumna gw sendiri yang bikin tutorial ini, belum pernah sma sekali membaca buku yang berisikan khusus penggunaan CSS dalam HTML. Tapi dari pengalaman coba-coba dan ulik-mengulik, mudah-mudahan penjelasanna bisa dimengerti.
Dalam teknik ini CSS (Cascading Style Sheet) sangat diandalkan sebagai pengatur tata letak dan modeling tampilan dalam layoutna. Tag-tag CSS diletakkan diantara kode HTML <HEAD> tag CSS disini </HEAD>
Konsep penggunaan CSS yang gw ketahui dibagi menjadi 3 kategori utama jenis style untuk objek layout:
- Class
Class dapat di gunakan pada tag HTML yang telah ditentukan sebelumnya, misalnya Class untuk link, akan dipasang pada tag a:<a href="#" class="firstClass"> test </a> - Tag
Tag dapat di gunakan bwat me-modifikasi tampilan default sebuah tag HTML, misalkan tag untuk inputinput {
font-family: "Trebuchet MS";
font-size: 12px;
color: #003399;
background-color: #E6EEFF;
padding: 4px;
border: 1px solid #0099FF;
}contoh kode html input:
<input type="button" name="Submit" value="Submit" />coba modifikasi style input na ke tag style di atas, jadi gini dah style input {type = button} na:
bandingkan dengan tag input sebelum dimodifikasi:
Untuk style berjenis Tag, tidak diawali dengan titik { . } atow tanda # untuk nama style na - Anvanced ID
Style ini sangat fleksible, dapat digabungkan dengan kedua jenis style sebelumnya, ciri nya diawali dengan tanda # untuk setiap penamaan style na:#slice {
font-family: Tahoma;
font-size: 11px;
color: #339900;
text-decoration: none;
background-attachment: fixed;
background-image: url(icons/slice-tool.png);
background-repeat: no-repeat;
background-position: left center;
padding-top: 8px;
padding-left: 30px;
height: 22px;
}Banyak digunakan pada DIV TAG dalam HTML, sebagai contoh, bwat style ke diatas (ingat selalu diantara tag HEAD) dan bwat DIV TAG na dalam area BODY :
<div id="slice"> ini tool slice </div>jadi lengkapnya kalo dalam kode HTML ke gini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STYLE : ADVANCED ID</title><style type="text/css">
#slice {
font-family: Tahoma;
font-size: 11px;
color: #339900;
text-decoration: none;
background-attachment: fixed;
background-image: url(icons/slice-tool.png);
background-repeat: no-repeat;
background-position: left center;
padding-top: 8px;
padding-left: 30px;
height: 22px;
}
</style></head>
<body>
<div id="slice"> ini tool slice </div>
</body>
</html>hasil na ke gini:
Jika dikombinasikan dengan kedua jenis style sebelumnya, misalkan ke contoh dibawah:
#boxPan {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0px;
padding: 0px;
}
#boxPan ul { list-style-type: none; }
#boxPan li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-image: url(list.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: none;
font-weight: bold;
}
#boxPan li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
background-image: url(list-over.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: underline;
font-weight: bold;
}- Style no. 1 : style ID pertama untuk identifikasi awal, di dalamna diatur margin dan padding
- Style no. 2 : style ID kedua untuk identifikasi style TAG Unordered List (UL), dalam kode diikuti oleh TAG ul, yang artinya kalo style ID boxPan dapat digunakan untuk memodifikasi style TAG ul juga
Baris list-style-type: none; digunakan untuk mendisable titik list item saat memberikan TAG <li> - Style no. 3 : style ID ketiga untuk identifikasi style TAG link , dalam kode diikuti oleh TAG li a, yang artinya kalo style ID boxPan dapat digunakan untuk memodifikasi style TAG link a yang terdapat dalam TAG <li>.
- Style no. 4 : style ID keempat untuk identifikasi style TAG link , dalam kode diikuti oleh TAG li a:hover, yang artinya kalo style ID boxPan bisa mengatur tampilan saat mouse menyentuh text link na, namun masih dalam area TAG <li>.
contoh style na:
font-family: "Trebuchet MS";
font-size: 12px;
color: #009900;
}
hasilna dalam HTML:
Untuk style berjenis Class, diawali dengan titik { . } pada setiap nama style na
ni Kode HTML lengkapna na:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STYLE : ADVANCED ID</title>
<style type="text/css">
#boxPan {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0px;
padding: 0px;
}
#boxPan ul { list-style-type: none; }
#boxPan li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-image: url(list.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: none;
font-weight: bold;
}
#boxPan li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
background-image: url(list-over.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<div id="boxPan">
<ul>
<li><a href="#1" title="slice 1"> slice 1</a></li>
<li><a href="#2" title="slice 2"> slice 2</a></li>
</ul>
</div>
</body>
</html>
Woke sebagai contoh ni hasilna:
Menggabungkan Style Sheet
Dalam menggabungkan kode style CSS ke dalam HTML ada 2 (dua) pilihan cara.
- Style Sheet Internal (langsung)
Yang gw maksud internal (langsung) adalah memasukkan TAG CSS langsung dalam kode HTML, tag style CSS terletak diantara TAG <HEAD>tag CSS</HEAD> . Dimana tag CSS sendiri diawali dengan TAG <STYLE>, dan ditutup dengan TAG </STYLE><html>
<head>
<title>Style Sheet Internal </title><style type="text/css">
.mainText {
font-family: Tahoma;
font-size: 11px;
color: #000000;
}
</style></head>
<body>
</body>
</html> - Attach Style Sheet External
Dengan attach style sheet via file external, cenderung lebih mudah, karena saat menghendaki perubahan style, kita cukup merubah 1 file external CSS saja. File external ini berekstensi *.CSSDalam TAG HTML, digunakan TAG <LINK> untuk menghubungkan kode HTML dengan style CSS yang dibuat terpisah di file external.
<html>
<head>
<title>Attach Style Sheet External </title><link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Untuk modifikasi layout di Dreamweaver terusin ke babak berikutna 😀
Part-1 | Part-2 | Part-3 | Part-4
ok thank’s
ok thank’s
bodor…. thanks hungkulll kakakakwww 😀
bodor…. thanks hungkulll kakakakwww 😀
keren banget … mau donk belajar web
keren banget … mau donk belajar web
bwat karina, thanks yak 😀 di forum juga bisa tanya2 seputar web. kalo srius pasti bisa 🙂
bwat karina, thanks yak 😀 di forum juga bisa tanya2 seputar web. kalo srius pasti bisa 🙂
bucret dah gw baru nmu ni tutorial na, bikin web yang ga make table.. uhuii.. dapet dapeeeeett 😀 thanks dah bwat nyang punya web na, lam knal dari Mataram..
bucret dah gw baru nmu ni tutorial na, bikin web yang ga make table.. uhuii.. dapet dapeeeeett 😀 thanks dah bwat nyang punya web na, lam knal dari Mataram..
lama nih mas nggak mampir ke sini, nanti saya review lagi web dremi di blog saya
Thanks ya
lama nih mas nggak mampir ke sini, nanti saya review lagi web dremi di blog saya
Thanks ya
wow that is an awesome post thanks man
wow that is an awesome post thanks man
Assalamu’alaikum,
Topicnya dah lama basi jg nih, tp saya butuh pencerahannya.
Apakah ada bedanya jika membuat CSS manual di HTML dg CSS yg tinggal klik2 aja di Dreamwaver ?
Wassalam,
:: Q ::
Assalamu’alaikum,
Topicnya dah lama basi jg nih, tp saya butuh pencerahannya.
Apakah ada bedanya jika membuat CSS manual di HTML dg CSS yg tinggal klik2 aja di Dreamwaver ?
Wassalam,
:: Q ::
@mulki
mengoptimalkan kode CSS dikenal namanya CSS Hack. nah dengan manual CSS kita bisa lebih leluasa melakukannya. misal, menulis kode CSS tidak perlu panjang ke bawah, jadikan satu baris menjadikannya lebih optimize. itu hanya salah satunya, banyak alasan lain knapa gw lbih milih manual CSS
@mulki
mengoptimalkan kode CSS dikenal namanya CSS Hack. nah dengan manual CSS kita bisa lebih leluasa melakukannya. misal, menulis kode CSS tidak perlu panjang ke bawah, jadikan satu baris menjadikannya lebih optimize. itu hanya salah satunya, banyak alasan lain knapa gw lbih milih manual CSS
Keren abis bosssss… terusin lagi sampe advanced he he…
Keren abis bosssss… terusin lagi sampe advanced he he…
Baguss nih artikelnya, sekalian bikin pak Tutorial convert HTML ke joomla
Baguss nih artikelnya, sekalian bikin pak Tutorial convert HTML ke joomla
Walau masih agak bingung tapi tetp tak pelajari mas,,, thanks tipsnya..
Walau masih agak bingung tapi tetp tak pelajari mas,,, thanks tipsnya..
Thanks for writing about this. There’s a lot of important tech info on the internet. You’ve got a lot of that info here on your site. I’m impressed – I try to keep a couple blogs reasonably ongoing, but it’s a struggle sometimes. You’ve done a solid job with this one. How do you do it?
Thanks for writing about this. There’s a lot of important tech info on the internet. You’ve got a lot of that info here on your site. I’m impressed – I try to keep a couple blogs reasonably ongoing, but it’s a struggle sometimes. You’ve done a solid job with this one. How do you do it?