Tutorial Photoshop Web 2.0 Layout With CSS Part-4 | 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 27 Web 2.0 Layout With CSS Part-4

4274 hits 12 comments 817 download print send

Part - 4 Layout Modify in Dreamweaver

Dengan Software Macromedia Dreamweaver, kita bakalan coba cara bikin halaman layout web 2.0 sesuai rancangan design kita di sotoshop sebelumna. Jadi CSS na pun kita bikin disini bro...

Buka dreamweaver lu, pilih menu File > New (jenis halaman CSS), dan simpan dengan nama file style.css

klik pada icon New CSS di panel CSS sebelah kanan

pada jendela yang muncul, gw mau nge-modif tag body:

klik ok, akan muncul jendela berikutna:

have fun aja, tentuin segala bentuk jenis huruf, besar na, dan margin padding:

kalo dah selesei, klik OK ....

style body telah di modif:

body {
font-family: "Trebuchet MS";
font-size: 11px;
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
}

Attach link Style Sheet na, dengan klik ikon Attach Style Sheet

tentukan lokasi penyimpanan file CSS

klik OK...

bikin lagi untuk style mainPan dan topHeader

/*MAIN PANEL*/
#mainPan{
width:760px;
position:relative;
margin:0 auto;
}

/*TOP HEADER PANEL*/
#topHeader {
width:760px;
height:89px;
position:relative;
margin:0 auto;
background-attachment: fixed;
background-image: url(images/bg-topheader.png);
background-repeat: repeat-x;
background-position: left top;
}

naaah coba sekarang ambil tool Insert DIV Tag bwat bikin div tag di area body na:

pilih style top Header:

pad Code Preview atur baris div tag na ke gini, jadi div tag topHeader berada dalam div tag mainPan

sekarang preview tampilanna pada Design View

lu tinggal masukin gambar icon area di sebelah kiri na (masih dalam div tag topHeader), gunakan tool Insert Image

sampe sini, apakah TAG TABLE diperlukan ? hahahaaa tentu saja tidak sama sekali, webmaster modern kudu make cara ini biar ga ketinggalan jaman....hehehehe...

lanjot bro, bikin style ID untuk bodyTopPan dan menuPan masing-masing untuk style ID BODY TOP dan MENU PANEL

/*---BODY TOP PANEL---*/
#bodyTopPan{
width:760px;
height:106px;
}

/*---MENU PANEL---*/
#menuPan{
width:760px;
height:28px;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
position:relative;
}

#menuPan li {float:left; list-style-type:none;}
#menuPan li span.spacekosong {
width:195px;
height:23px;
display:block;
background-color: #f1f1f1;
font-family: "Trebuchet MS";
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
padding-top: 5px;
text-align: center;
}

#menuPan li a{
width:108px;
height:23px;
display:block;
background-color: #f1f1f1;
font-family: "Trebuchet MS";
font-size: 11px;
font-weight: bold;
color: #7b7b7b;
text-decoration: none;
cursor: hand;
margin-right: 5px;
padding-top: 5px;
text-align: center;
}

#menuPan li a:hover{
background-color: #CEE9FF;
color: #0066CC;
}

#menuPan li.current a{
background-color: #CEE9FF;
color: #0066CC;
}

dimana style menuPan gw ga pake tag ul , karena biar menu na ga menjorok ke dalem...jadi langsong li aja men ...!

code HTML na:

<div id="topHeader"><img src="images/master_01.png" width="135" height="89" /></div>

<div id="bodyTopPan">
<div id="menuPan">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="news.html">News</a></li>
<li><a href="support.html">Support</a></li>
<li><span class="spacekosong">Sat, 23-Feb-08</span></li>
</div><img src="images/master_05.png" />
</div>

</div>

</body>

langsong insert gambar top body utama na di bawah menu:

MAPPING

Untuk membuat link, kita bisa juga menggunakan teknik mapping pada gambar, sehingga bagian link dapat ditentukan sendiri pada area gambar.

klik pada area gambar yang akan dikasi mapping link,

aktifkan tool mapping klik dan drag pada area gambar yang dikehendaki sebagai area mapping link :

Copy mapping na (Klik kanan pada mapping, pilih Copy)

untuk memasang atribut na bisa dilakukan di panel properti mapping:

FORM

Dalam layout kita punya field form untuk login password, nah sekarang kita bikin style untuk form, input, dan submit na:

/*FORM PANEL*/
#formTop {
position:absolute;
margin:0;
padding-right:15px;
padding-top: 30px;
padding-left: 200px;
width: 405px;
}
form { margin:0; padding:0; }
.input {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #ffffff;
border: 1px solid #b0c3d2;
}
.submit {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
cursor:hand;
background-color: #0099CC;
border: 1px solid #999999;
}

Nah sekarang tugas lu bwat latihan, bikin style untuk footer na, dengan cara yang sama dengan membuat top header. Jangan lupa, simpan ulang file eksternal CSS lu dan file index.html (master html na). Untuk preview di browser, pencet [F12].

diKulik-kulik aja, biar nanti hasil akhirna ke gini, kakakkakwww...

Part-1 | Part-2 | Part-3 | Part-4

817 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-4.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 - 4 Layout Modify in Dreamweaver </strong></p>
<p>Dengan Software Macromedia Dreamweaver, kita bakalan coba cara bikin halaman layout web 2.0 sesuai rancangan design kita di sotoshop sebelumna. Jadi CSS na pun kita bikin disini bro... </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css13.png" width="377" height="296" /> </p>
<p>Buka dreamweaver lu, pilih menu <strong>File > New</strong> (jenis halaman CSS), dan simpan dengan nama file <strong>style.css</strong> </p>
<p>klik pada icon New CSS <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/new-css.png" alt="New CSS" width="19" height="18" /> di panel CSS sebelah kanan </p>
<p>pada jendela yang muncul, gw mau nge-modif tag body:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css38.png" width="361" height="199" /> </p>
<p>klik ok, akan muncul jendela berikutna:</p>
<p>have fun aja, tentuin segala bentuk jenis huruf, besar na, dan margin padding:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css39.png" width="400" height="291" />  </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css40.png" width="400" height="289" /></p>
<p> </p>
<p>kalo dah selesei, klik OK ....</p>
<p>style body telah di modif:</p>
<div class="tagContent">body {<br />
font-family: "Trebuchet MS";<br />
font-size: 11px;<br />
color: #000000;<br />
text-decoration: none;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
</div>
<p>Attach link Style Sheet na, dengan klik ikon Attach Style Sheet <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/attach-css.png" alt="Attach CSS" width="19" height="17" /></p>
<p>tentukan lokasi penyimpanan file CSS </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css41.png" width="400" height="176" /></p>
<p>klik OK...</p>
<p>bikin lagi untuk style <strong>mainPan</strong> dan <strong>topHeader</strong> </p>
<div class="tagContent">
  <p>/*MAIN PANEL*/<br />
    #mainPan{<br />
    width:760px;<br />
    position:relative;<br />
    margin:0 auto;<br />
    }</p>
  <p>/*TOP HEADER PANEL*/<br />
    #topHeader {<br />
    width:760px;<br />
height:89px;<br />
position:relative;<br />
margin:0 auto;<br />
background-attachment: fixed;<br />
background-image: url(images/bg-topheader.png);<br />
background-repeat: repeat-x;<br />
background-position: left top;<br />
}</p>
</div>
<p> </p>
<p>naaah coba sekarang ambil tool Insert DIV Tag <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/insert-div-tag.png" alt="Insert DIV Tag" width="30" height="29" /> bwat bikin div tag di area body na:</p>
<p>pilih style top Header:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css43.png" width="400" height="154" /> </p>
<p>pad Code Preview atur baris div tag na ke gini, jadi div tag <strong>topHeader</strong> berada dalam div tag <strong>mainPan</strong> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css42.png" width="236" height="242" /></p>
<p>sekarang preview tampilanna pada Design View </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css45.png" width="198" height="49" /></p>
<p>lu tinggal masukin gambar icon area di sebelah kiri na (masih dalam div tag topHeader), gunakan tool Insert Image </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css44.png" width="341" height="232" /> </p>
<p>sampe sini, apakah TAG TABLE diperlukan ? hahahaaa tentu saja tidak sama sekali, webmaster modern kudu make cara ini biar ga ketinggalan jaman....hehehehe...</p>
<p>lanjot bro, bikin style ID untuk <strong>bodyTopPan</strong> dan <strong>menuPan</strong> masing-masing untuk style ID BODY TOP dan MENU PANEL</p>
<div class="tagContent">
  <p>/*---BODY TOP PANEL---*/<br />
    #bodyTopPan{<br />
    width:760px;<br />
    height:106px;<br />
    }</p>
  <p>/*---MENU PANEL---*/<br />
    #menuPan{<br />
    width:760px;<br />
    height:28px;<br />
    margin: 0px;<br />
    padding-top: 5px;<br />
    padding-bottom: 5px;<br />
    position:relative;<br />
    }</p>
  <p>#menuPan li {float:left;  list-style-type:none;}<br />
    #menuPan li span.spacekosong {<br />
    width:195px;<br />
    height:23px;<br />
    display:block;<br />
    background-color: #f1f1f1;<br />
    font-family: "Trebuchet MS";<br />
    font-size: 11px;<br />
    font-weight: bold;<br />
    color: #000000;<br />
    text-decoration: none;<br />
    padding-top: 5px;<br />
    text-align: center;<br />
    }<br />
    <br />
    #menuPan li a{<br />
    width:108px;<br />
    height:23px;<br />
    display:block;<br />
    background-color: #f1f1f1;<br />
    font-family: "Trebuchet MS";<br />
    font-size: 11px;<br />
    font-weight: bold;<br />
    color: #7b7b7b;<br />
    text-decoration: none;<br />
    cursor: hand;<br />
    margin-right: 5px;<br />
    padding-top: 5px;<br />
    text-align: center;<br />
    }<br />
    <br />
    #menuPan li a:hover{<br />
    background-color: #CEE9FF;<br />
    color: #0066CC;<br />
    }<br />
    <br />
    #menuPan li.current a{<br />
    background-color: #CEE9FF;<br />
    color: #0066CC;<br />
    }</p>
</div>
<p>dimana style menuPan gw ga pake tag ul , karena biar menu na ga menjorok ke dalem...jadi langsong li aja men ...! :D</p>
<p>code HTML na:</p>
<div class="tagContent">
  <p><body><br />
    <!--MAIN PANEL--><br />
    <div id="mainPan"></p>
  <p><!--TOP HEADER PANEL--><br />
    <div id="topHeader"><img src="images/master_01.png" width="135" height="89" /></div><br />
    <!--END TOP HEADER PANEL--></p>
  <p><!--MENU PANEL--><br />
    <div id="bodyTopPan"><br />
  <div id="menuPan"><br />
  <li class="current"><a href="index.html">Home</a></li><br />
  <li><a href="contact.html">Contact Us</a></li><br />
  <li><a href="services.html">Services</a></li><br />
  <li><a href="news.html">News</a></li><br />
  <li><a href="support.html">Support</a></li><br />
  <li><span class="spacekosong">Sat, 23-Feb-08</span></li> <br />
  </div><img src="images/master_05.png" /><br />
  </div><br />
  <!--END TOP BODY PANEL--></p>
  <p></div><br />
    <!--END MAIN PANEL--><br />
    </body></p>
</div>
<p>langsong insert gambar top body utama na di bawah menu:</p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css47.png"><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css47-400.png" alt="Gedein" width="400" height="165" border="0" /></a> </p>
<p><strong>MAPPING</strong></p>
<p>Untuk membuat link, kita bisa juga menggunakan teknik mapping pada gambar, sehingga bagian link dapat ditentukan sendiri pada area gambar.</p>
<p>klik pada area gambar yang akan dikasi mapping link, </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css49.png" width="148" height="101" /></p>
<p>aktifkan tool mapping <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/mapping-tool.png" width="18" height="17" /> klik dan drag pada area gambar yang dikehendaki sebagai area mapping link :</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css50.png" width="148" height="102" /> </p>
<p>Copy mapping na (Klik kanan pada mapping, pilih <strong>Copy</strong>) </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css51.png" width="148" height="101" /></p>
<p>untuk memasang atribut na bisa dilakukan di panel properti mapping:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css48.png" width="400" height="96" /> </p>
<p> </p>
<p><strong>FORM </strong></p>
<p>Dalam layout kita punya field form untuk login password, nah sekarang kita bikin style untuk form, input, dan submit na:</p>
<div class="tagContent">/*FORM PANEL*/<br />
  #formTop {<br />
position:absolute;<br />
margin:0;<br />
padding-right:15px;<br />
padding-top: 30px;<br />
padding-left: 200px;<br />
width: 405px;<br />
}<br />
form { margin:0; padding:0; }<br />
.input {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 11px;<br />
color: #000000;<br />
background-color: #ffffff;<br />
border: 1px solid #b0c3d2;<br />
}<br />
.submit {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 11px;<br />
color: #FFFFFF;<br />
cursor:hand;<br />
background-color: #0099CC;<br />
border: 1px solid #999999;<br />
}</div>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css52.png" target="blank"><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css52-400.png" alt="Gedein" width="400" height="152" border="0" /></a> </p>
<p>Nah sekarang tugas lu bwat latihan, bikin style untuk footer na, dengan cara yang sama dengan membuat top header. Jangan lupa, simpan ulang file eksternal CSS lu dan file index.html (master html na). Untuk preview di browser, pencet [F12]. </p>
<p>diKulik-kulik aja, biar nanti hasil akhirna ke gini, kakakkakwww... :D </p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css53.png" target="blank"><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css53-400.png" alt="gedein" width="400" height="296" border="0" /></a>  </p>
<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> | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-3.html">Part-3</a> | Part-4</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-4.html' title='tutorial photoshop Web 2.0 Layout With CSS Part-4'>Web 2.0 Layout With CSS Part-4</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.

12 Comments to
“ Web 2.0 Layout With CSS Part-4 “

dr.emi

Posted On: 13-12-2008 / 11:13:31

ok heru ! senang bisa berguna bwat lu

)

heru

Posted On: 10-12-2008 / 15:14:52

nah ketemu juga tutor dari design apliaksi ke css...thanks ya....

ibenk

Posted On: 31-07-2008 / 19:46:22

Thanks Bos wat tutornya, selain diatas (part1-4)ada lagi ga tutor berikutnya. Ane tunggu ya.....

dr.emi

Posted On: 22-03-2008 / 01:08:50

penamaan panel hanya untuk komentar tanda biar gampang nginget posisi style, untuk bikin style baru tetep lwat ikon New CSS, kalo mau manual, bisa dimainkan coding css na. ditunggu di forum, kalo lom jelas

thanks

oscar

Posted On: 18-03-2008 / 09:02:37

ok mas dr.emi tutorialnya. cuma saya masih belum jelas bagaimana bikin style untuk main panel dan top header, apa jg dari klik ikon New CSS juga ? trus tag nya apa ? kalo sebelumnya kan tag body. mohon penjelasannya, maklum nih masih pemula banget. thanks

dr.emi

Posted On: 17-03-2008 / 06:27:55

menarik sekalina kok dalam tanda petik ?

cahyo

Posted On: 17-03-2008 / 03:15:13

wow keren...saya coba dan hasilnya seperti anda jelaskan jadi ini"menarik sekali" terimakasih

dr.emi

Posted On: 08-03-2008 / 10:33:46

woke....terimakasih kembali....hehehe

akhwat_sporty

Posted On: 08-03-2008 / 10:10:30

Jazakallah khairon katsiroo

Moeldy

Posted On: 06-03-2008 / 15:01:14

Thank's ya mas atas tutorialnya semoga Allah Melipatgandakan Ilmu yg mas miliki skrg

yudha

Posted On: 28-02-2008 / 12:21:53

waahh. mantabz, mas... patut dicoba nih. makasi yaa