Tutorial Photoshop Web 2.0 Layout With CSS Part-3 | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

Feb ‘08 26 Web 2.0 Layout With CSS Part-3

5269 hits 7 comments 724 download print send

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>

.firstClass {
font-family: "Trebuchet MS";
font-size: 12px;
color: #009900;
}

Tag
Tag dapat di gunakan bwat me-modifikasi tampilan default sebuah tag HTML, misalkan tag untuk input

input {
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>.

ni Kode HTML lengkapna na:

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

#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 *.CSS

Dalam 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

724 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-3.html

SHARE TUTORIAL :

<style type="text/css">
<!--
.tagContent {
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	color: #006600;
	text-decoration: none;
	background-color: #F7FFEA;
	padding: 4px;
	border: 1px solid #99CC00;
	width: 90%;
}

-->
</style>
<p><strong>Part - 3 Layout Style with CSS </strong></p>
<p>sesua ma tema na, kita bakalan bikin layout menggunakan teknik perancangan web 2.0.</p>
<p><strong>Pendahuluan :D Apa itu CSS ? </strong></p>
<p>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.</p>
<p>Dalam teknik ini <strong>CSS (Cascading Style Sheet)</strong> sangat diandalkan sebagai pengatur tata letak dan modeling tampilan dalam layoutna. Tag-tag CSS diletakkan diantara kode HTML <strong><HEAD></strong> tag CSS disini <strong></HEAD></strong> </p>
<p>Konsep penggunaan  CSS yang gw ketahui dibagi menjadi 3 kategori utama jenis style untuk objek layout:</p>
<ol>
  <li><strong>Class</strong> <br />
  Class dapat di gunakan pada tag HTML yang telah ditentukan sebelumnya, misalnya Class untuk link, akan dipasang pada tag <strong>a</strong>:<br />
  <br />
  <br />
  <div class="tagContent"><a href="#" class="firstClass"> test </a></div>
  </li>
  <br />
  contoh style na:<br /> 
  <br /><br />

  <div class="tagContent">.firstClass {<br />
font-family: "Trebuchet MS";<br />
font-size: 12px;<br />
color: #009900;<br />
}</div><br />
  hasilna dalam HTML:<br />
  <br />
  <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css35.png" width="52" height="49" /><br />
  <br />
  <br />
  Untuk style berjenis Class, diawali dengan titik { <strong>.</strong> } pada setiap nama style na <br />
  <br />

  <li><strong>Tag</strong><br />
   Tag dapat di gunakan bwat me-modifikasi tampilan default sebuah tag HTML, misalkan tag untuk <strong>input</strong><br />
   <br />
  <br />
    <div class="tagContent">input {<br />
font-family: "Trebuchet MS";<br />
font-size: 12px;<br />
color: #003399;<br />
background-color: #E6EEFF;<br />
padding: 4px;<br />
border: 1px solid #0099FF;<br />
}</div>
    <br />
    contoh kode html input: 
    <br />
    <br />
    <br />
    <div class="tagContent"><input type="button" name="Submit" value="Submit" /></div>
    <br />
    coba modifikasi style input na ke tag style di atas, jadi gini dah style input {type = button} na:<br />
    <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/submit-modified.png" alt="submit modified" width="76" height="48" /><br />
    <br />
    bandingkan dengan tag input sebelum dimodifikasi:<br />
    <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/submit-default.png" alt="submit default" width="65" height="41" /><br />
  Untuk style berjenis Tag, tidak diawali dengan titik { <strong>.</strong> } atow tanda <strong>#</strong> untuk nama style na <br />
  <br />
  </li>
  <li><strong>Anvanced ID</strong><br />
    Style ini sangat fleksible, dapat digabungkan dengan kedua jenis style sebelumnya, ciri nya diawali dengan tanda # untuk setiap penamaan style na:<br />
    <br />
    <br />
    <div class="tagContent">#slice {<br />
font-family: Tahoma;<br />
font-size: 11px;<br />
color: #339900;<br />
text-decoration: none;<br />
background-attachment: fixed;<br />
background-image: url(icons/slice-tool.png);<br />
background-repeat: no-repeat;<br />
background-position: left center; <br />
padding-top: 8px;<br />
padding-left: 30px;<br />
height: 22px;<br />
}</div>
    <br />
  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 :<br />
  <br />
  <br />
  <div class="tagContent"><div id="slice"> ini tool slice </div> </div>
  <br />
  jadi lengkapnya kalo dalam kode HTML ke gini:<br />
  <br />
  <br />
  <div class="tagContent">
    <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
      <html xmlns="http://www.w3.org/1999/xhtml"><br />
      <head><br />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
      <title>STYLE : ADVANCED ID</title><br />
      <br />
      <style type="text/css"><br />
      #slice {<br />
      font-family: Tahoma;<br />
      font-size: 11px;<br />
      color: #339900;<br />
      text-decoration: none;<br />
      background-attachment: fixed;<br />
      background-image: url(icons/slice-tool.png);<br />
      background-repeat: no-repeat;<br />
      background-position: left center; <br />
      padding-top: 8px;<br />
      padding-left: 30px;<br />
      height: 22px;<br />
      }<br />
  </style><br />
  <br />
  </head></p>
    <p><body><br />
      <br />
      <div id="slice"> ini tool slice </div><br />
      <br />
      </body><br />
      </html></p>
  </div> 
  <br />
  hasil na ke gini:<br />
  <br />
  <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css34.png" width="148" height="75" /><br />
  <br />
  Jika dikombinasikan dengan kedua jenis style sebelumnya, misalkan ke contoh dibawah:<br />
  <br />
  <br />
  <div class="tagContent"><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/nomor_01.png" width="50" height="50" /><br />
    #boxPan {<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: 11px;<br />
color: #333333;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/nomor_02.png" width="50" height="50" /><br />
#boxPan ul { list-style-type: none; }<br />
<br />
<img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/nomor_03.png" width="50" height="50" /><br />
#boxPan li a {<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
color: #006699;<br />
background-image: url(list.png);<br />
background-repeat: no-repeat;<br />
padding-left: 20px;<br />
height:20px;<br />
background-position: left center;<br />
text-decoration: none;<br />
font-weight: bold;<br />
}<br />
<br />
<img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/nomor_04.png" width="50" height="50" /><br />
#boxPan li a:hover {<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
color: #CC0000;<br />
background-image: url(list-over.png);<br />
background-repeat: no-repeat;<br />
padding-left: 20px;<br />
height:20px;<br />
background-position: left center;<br />
text-decoration: underline;<br />
font-weight: bold;<br />
}<br />
  </div> 
  <br />
    <ul>
	<li>
	Style no. 1 : style ID pertama untuk identifikasi awal, di dalamna diatur margin dan padding <br />
	<br />
	</li>
	<li>Style no. 2 : style ID kedua untuk identifikasi style TAG Unordered List (UL), dalam kode diikuti oleh TAG <strong>ul</strong>, yang artinya kalo style ID <strong>boxPan</strong> dapat digunakan untuk memodifikasi style TAG  <strong>ul</strong> juga<br />
	  Baris <strong>list-style-type: none; </strong>digunakan untuk mendisable titik list item  saat memberikan TAG <strong><li></strong> <br />
	  <br />
	  </li>
	<li>
    Style no. 3 : style ID ketiga untuk identifikasi style TAG link , dalam kode diikuti oleh TAG <strong>li a</strong>, yang artinya kalo style ID <strong>boxPan</strong> dapat digunakan untuk memodifikasi style TAG link <strong>a</strong> yang terdapat dalam TAG <strong><li></strong>.<br />
    <br /></li>
	<li>
    Style no. 4 : style ID keempat untuk identifikasi style TAG link , dalam kode diikuti oleh TAG <strong>li a:hover, </strong>yang artinya kalo style ID <strong>boxPan</strong> bisa mengatur tampilan saat mouse menyentuh text link na, namun masih dalam area TAG <strong><li></strong>.<br />
    <br />
</li>
	</ul>
  </li>
  <p>ni Kode HTML lengkapna na:<br />
    <br />
  </p>
  <div class="tagContent">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
      <html xmlns="http://www.w3.org/1999/xhtml"><br />
      <head><br />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
      <title>STYLE : ADVANCED ID</title><br />
      <br />
      <style type="text/css"><br />
      <br />
    #boxPan {<br />
      font-family: Verdana, Arial, Helvetica, sans-serif;<br />
      font-size: 11px;<br />
      color: #333333;<br />
      margin: 0px;<br />
      padding: 0px;<br />
      }<br />
      <br />
      #boxPan ul { list-style-type: none; }<br />
      <br />
    #boxPan li a {<br />
      font-family: Verdana, Arial, Helvetica, sans-serif;<br />
      font-size: 12px;<br />
      color: #006699;<br />
      background-image: url(list.png);<br />
      background-repeat: no-repeat;<br />
      padding-left: 20px;<br />
      height:20px;<br />
      background-position: left center;<br />
      text-decoration: none;<br />
      font-weight: bold;<br />
      }<br />
      <br />
      #boxPan li a:hover {<br />
      font-family: Verdana, Arial, Helvetica, sans-serif;<br />
      font-size: 12px;<br />
      color: #CC0000;<br />
      background-image: url(list-over.png);<br />
      background-repeat: no-repeat;<br />
      padding-left: 20px;<br />
      height:20px;<br />
      background-position: left center;<br />
      text-decoration: underline;<br />
      font-weight: bold;<br />
      }<br />
      <br />
  </style><br />
  <br />
  </head></p>
    <p><body></p>
    <p><div id="boxPan"><br />
      <ul><br />
      <li><a href="#1" title="slice 1"> slice 1</a></li><br />
      <li><a href="#2" title="slice 2"> slice 2</a></li><br />
      </ul><br />
      </div></p>
    <p></body><br />
  </html></div>
  <p>  </p>
  <p>Woke sebagai contoh ni hasilna:<br />
    <br />
    <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/advanced-id-listitemlink.png" width="353" height="156" /><br />
    </p>
</ol>

<p><strong>Menggabungkan Style Sheet</strong></p>
<p>Dalam menggabungkan kode style CSS ke dalam HTML ada 2 (dua) pilihan cara.  </p>
<ol>
  <li><strong>Style Sheet Internal (langsung) </strong><br />
    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><br />
    <br />
    <br />
        <div class="tagContent"><html><br />
          <head><br />
          <title>Style Sheet Internal </title> <br />
          <br />
          <style type="text/css"><br />
    .mainText {<br />
font-family: Tahoma;<br />
font-size: 11px;<br />
color: #000000;<br />
}<br />
</style><br />
    <br />
    </head><br />
    <br />
    <body><br />
    </body><br />
    </html></div>
      <br />
    <br />
  </li>
  <li><strong>Attach Style Sheet External <br />
    </strong>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 <strong>*.CSS</strong> <br />
        <br />
      Dalam TAG HTML, digunakan TAG <LINK> untuk menghubungkan kode HTML dengan style CSS yang dibuat terpisah di file external.<strong><br />
      <br />
        <br />
      </strong>
        <div class="tagContent"><html><br />
  <head><br />
  <title>Attach Style Sheet External </title> <br />
  <br />
  <link href="style.css" rel="stylesheet" type="text/css" /><br />
  <br />
  </head><br />
  <br />
  <body><br />
  </body><br />
  </html><strong><br />
    </strong></div>
  </li>
</ol>
Untuk modifikasi layout di Dreamweaver terusin ke babak berikutna :D 
<p><a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-1.html">Part-1</a> | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-2.html">Part-2</a> | Part-3 | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-4.html">Part-4</a></p>
 <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-3.html' title='tutorial photoshop Web 2.0 Layout With CSS Part-3'>Web 2.0 Layout With CSS Part-3</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/web-layout.html' title='tutorial photoshop Web Layout'>Web Layout</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.