All you need is:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Open your Photoshop, make the canvas size like this:

Select the Rectangle Marquee Tool, create a header object like this:

Apply multiple layer styles:

Look at the results

Now create a white line using single row marquee tool, between gradient and drop shadow. fill line make white color

Use the rounded rectangle tool to create a navigation button, use the radius as you wish

apply layer style

All gradients are in the tutorial na download package

Press [CTRL + Click] on the navigation button layer, to make a selection around the button.

Select Elliptical Marquee Tool selection and option option: Intersect with selection. Makes an oval selection above the previous selection

You will get the selection results like this

Click [CTRL + D] to Deselect
Transform vertical na object, by pressing [CTRL + T] -> Flip Vertical
Select menu Filter> Blur> Gaussian Blur. Add a 2 px radius.
and change the layer’s blending to Overlay

Give the na text button too

You can group all navigation layers into a group, and duplicate the groups into groups

Almost done with the layout, add the icon and text objects as the web title

Finally, make a footer in a simple way, like a header

Review the final layout results

Part II Slicing Images

So we’re going to take certain pictures only, take part with the slicing tool that will be needed to create CSS code.
First is the navigation slice

Pilih File > Save for Web and Device

Remember: choose Selected Slice, dowank

Then continue to the next slice, like bg-header, bg-footer and logo
So you will get some of the images needed in coding na CSS

Part III Make HTML+CSS Code

By making your website load when opened in a browser, Less Table is one of the best ways
I like this part the most, open Dreamweaver, create a CSS file
So this is the CSS code:

  <style type="text/css">
html,body{
margin:0;
padding:0;
border:0;
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body {
background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;
color:#000000;
min-width:960px;
}
#mainPan {
width:960px;
position:relative;
margin:0 auto;
}
#bodyPan {
width:960px;
margin:0 auto;
}
#headerPan {
width:960px;
height:127px;
margin:0px;
padding:0px;
}
#headerPan img.logo {
border:0px;
width:148px;
height:69px;
margin-left:20px;
margin-top:10px;
}
/* MENU TAB NAVIGATION */
#tabs {
line-height:normal;
top: 25px;
right:10px;
position:absolute;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
float:left;
background:url(images/bg-navigasi.gif) no-repeat left top;
margin:0;
padding-top:10px;
text-decoration:none;
width:137px;
height:59px;
text-align:center; /*for IE + FF right here*/
}
#tabs a:hover {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color: #FFCC00;
}
.spacer {
margin-bottom:20px;
}
/* CONTENT */
#contenPan {
font-size:11px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
width:960px;
margin:0px;
}
#contenPan h2 {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
}
#contenPan a {
color:#0066CC;
text-decoration:none;
}
#contenPan a:hover {
color: #FF0000;
text-decoration:none;
}
/* FOOTER */
#footerMainPan {
position:relative;
clear: both;
width:100%;
height:138px; /*for FF add 10px;*/
overflow:hidden;
background:url(images/bg-footer.gif) 30px center repeat-x;
text-align:center;
}
#footerPan {
padding-top:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #666666;
width:960px;
height:88px;
background: url(images/cutter.gif) right top no-repeat;
margin:0px;
}
#footerPan a {
color: #0099FF; text-decoration:none;
}
#footerPan a:hover {
color: #333399; text-decoration:none;
}
</style>
save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:
<div id="mainPan">
<div id="bodyPan">
<div id="headerPan">
<img src="images/logo.gif" class="logo" />
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</div>
</div>
<div id="contenPan">
<h2>Heloo....</h2>
<p>This is main Content <a href="#">[link]</a></p>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
</div>
</div>
</div>
<div id="footerMainPan">
<div id="footerPan">
© 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>
I think that’s the code na, I’m sure you will be familiar 
Part IV Adding jQuery Ajax Scripts to Load Contents
You know jQuery right? if not, read the introduction to jQuery dlo yak on the web na 

In this section we need the jQuery script library, while plugins are not needed.

Just give this line in the HTML na, when loading the jQuery Javascript Library na
 & amp; lt; script src = "jquery-1.2.6.js" type = "text / javascript" & amp; gt; & amp; lt; / script & amp; gt; [/ javascript]

and give the javascripts code to create a function to load external content on contentPan Div
<pre>[javascript]<script type="text/javascript">
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<p><img src="images/ajax-loader.gif" /></p>');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
$(document).ready(loadContent(id));
</script>
Simple line:
  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');
/*this line will load the ajax-loader.gif while progress on request*/
and the following code is required to call data content
  function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
php-loader.php is a PHP file whose task is to provide values in HTML form, these values will be requested by jQuery Ajax to be loaded into contentPan Div
<?
$allCount = 60; //just to simulation for data ready
if($_GET['cPub'] == 2)
{
echo "<h2>Photoshop</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is Photoshop Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 3)
{
echo "<h2>CSS</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is CSS Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 4)
{
echo "<h2>PHP</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is PHP Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 5)
{
echo "<h2>AJAX</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is AJAX Content. ";
}
echo "</p>";
sleep(2);
}
else
{
echo "<h2>Home</h2>";
echo "<p><a href=''>this is a link</a></p>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. ";
}
echo "</p>";
}
?>
I use sleep (2) to simulate loading content which is quite long

As if everything is complete, you just need to upload it to the web server so that PHP works. ni screen shoot na


I also input this tutorial in English at PSDREMI.CO.CC and Good-tutorials.Com

Best Regard, dr.emi
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html/feed
			24
		
		
			
		
		
		https://www.dremi.info/tutorials/css/css-for-rounded-box-style.html
					https://www.dremi.info/tutorials/css/css-for-rounded-box-style.html#comments
		
		
		Thu, 13 Nov 2008 10:44:10 +0000
				
		
		
		https://www.dremi.info/?p=75

					[…]]]>
										 Tips for implementing how to create a round html box


CSS for Rounded Box Style

Tips for implementing how to create a round html box with CSS.



style code:
<style type="text/css">
#boxDiv
{
	margin:0px;
	padding:0px;
	position:absolute;
	width:197px;
	float:left;
}
#boxDiv h2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background:url("images/kopi-hari-ini_01.gif") 0 0 no-repeat;
	width:117px;
	height:26px;
	padding-left:80px;
	padding-top:16px;
	margin:0px;
}
#boxDiv .content
{
	background:url("images/kopi-hari-ini_02.gif") 0 0 repeat-y #000000;
	width:177px;
	padding:10px;
	margin:0px;
}
#boxDiv p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	margin:0px;
	padding:0px;
}
#boxDiv .bottom
{
	background:url("images/kopi-hari-ini_04.gif") 0 0 no-repeat;
	width:197px;
	height:15px;
}
body {
	margin:5px;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
a:link {
	color: #0099FF;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
	color: #009900;
}
a:active {
	text-decoration: underline;
	color: #0099FF;
}
.spacer { margin-bottom:20px; }
</style>

dan ini implementasi pada body html na:
<!--just to cover all size box-->
<div id="boxDiv">
<!--start the title-->
<h2>Todays Cofee</h2>
<!--start the content-->
<div class="content">
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
</div>
<!--start the bottom-->
<div class="bottom"></div>
</div>

Thanks, dr.emi
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/css/css-for-rounded-box-style.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/articles/design-form-smooth-shadow-dremi.html
					https://www.dremi.info/articles/design-form-smooth-shadow-dremi.html#comments
		
		
		Thu, 21 Aug 2008 19:42:57 +0000
				
		
		
		
		
		
		
		
		https://www.dremi.info/?p=68

					[…]]]>
										helo brother !!

To have a most beautifull form for your blog / website, so easy. I just create a style that compatible for IE and FF.

Take a look my CSS

First, open your photoshop to create a 

Design Form Smooth Shadow [dr.emi]
helo broder !!

mao ngobok-obok form lu, biar cantik and cakep ? nih gw ada tutorrial CSS form yang keren banged, kali ja bisa jadi inspirasi lu ..

Dengan Photoshop siapkan dlu untuk Background field na, gw pake gradasi dowank kok !

bwat bidang ukuran seleksi make marquee tool (2px x 30px)



Gradasi na dari warna #dddddd ke #ffffff perhatikan settingan gradasina



crop bagian gradasi dowank, save as ke GIF





bwat juga button na, terserah lu !



Buka Dreamweaver lu, bwat dokumen baru untuk CSS. Tetap berkonsep Web 2.0 design, CSS na pun kudu kompatible dengan IE dan FF

Nama file: styles.css


Code: 
/* CSS Web 2.0 Builder by dr.emi */

body,td,th { font-family: Arial; font-size: 11px; color: #000000; }

body { background-color: #FFFFFF; margin: 10px 10px 10px 10px; }

#BlueSky { background-color: #F2F9FF; padding: 30px; margin-bottom:5px; width:350px; border:1px solid #91CBF7; }

#FormBox { margin:0px;padding:0px; }

#FormBox h1 { color:#333399; font-size:13px;margin-bottom:10px;padding:0px; }

#FormBox p { color:#777777; font-size:10px;margin-bottom:20px;padding:0px; }

#FormBox label { margin-bottom:10px; color:#555555;display:block;font-weight:bold; font-size:12px; }

#FormBox .input { margin-bottom:20px; border: 1px solid #cdcdcd; padding: 0.2em; background: #FFFFFF url(“form-smooth-sdw-dre-bg-field.gif”) repeat-x 0 1px; color:#666666; }

#FormBox .input:hover { margin-bottom:20px; border: 1px solid #FF0000; padding: 0.2em; background: #FFFFFF url(“form-smooth-sdw-dre-bg-field.gif”) repeat-x 0 1px; color:#666666; }

#FormBox .submit { width:117px; height:40px; border:none; background: #FFFFFF url(“button.gif”) no-repeat 0 0; }

#FormBox .spacer { margin-bottom:10px; }


display:block; gw pake bwat menghemat penggunaan tag html, kalo tanpa block maka lu kudu perlu style baru kaya span atau p, biar field input na terletak di bawah label nama, dst.

untuk field dengan background, gw pake background:(bla bla); kalo make background-image:dst… compatible na di IE dowank, di FF ga isa.

note *) gunakan input tanpa titik jika ingin menerapkan langsung style na pada tag input, tapi pada sesi ini form field na gw kasi hover untuk bisa merubah warna saat disentuh, jadi gunakan class .input untuk normal dan class .input:hover untuk saat mouse menyentuh form field

tros attach style na pada dikumen HTML baru





ni bwat kode HTML form na:

Code: 
<div id=”BlueSky”>

<div id=”FormBox”>

<h1>Yang ngerasa cakep dan cantik, ngisi Form disinih !!</h1>

<p>For whom that beautifull and handsome, fill this form !!</p>

<form action=”” method=”get”>

<label>Nama:</label>

<input class=”input” type=”text” size=”50″ />

<label>E-Mail:</label>

<input  class=”input”type=”text” size=”50″ />

<label>Website:</label>

<input class=”input” value=”http://” type=”text” size=”50″ />

<label>Message:</label>

<textarea class=”input” cols=”38″ rows=”5″></textarea>

<div class=”spacer”></div>

<input name=”” value=”” class=”submit” type=”submit” />

</form>

</div>

</div>


jadi kalo lu preview bakalan ke gini :



Thanks berat kalo ada yang mereplay !!!    

Share on Facebook
]]>
					
					https://www.dremi.info/articles/design-form-smooth-shadow-dremi.html/feed
			4
		
		
			
		
		
		https://www.dremi.info/articles/membuat-box-style-link-cantik-ala-dremi-dengan-css.html
					https://www.dremi.info/articles/membuat-box-style-link-cantik-ala-dremi-dengan-css.html#comments
		
		
		Mon, 28 Jul 2008 14:28:57 +0000
				
		
		
		
		
		
		
		
		https://www.dremi.info/?p=64

					[…]]]>
										Membuat Box Style Link Cantik ala dr.emi dengan CSS. Jimanee nDesign box link cantik dengan menggunakan CSS ?

Pernah liat page link nyang ada di : https://www.dremi.info/tutorial/photoshop-forum.php  

Membuat Box Style Link Cantik ala dr.emi dengan CSS
 
Jimanee nDesign box link cantik dengan menggunakan CSS ?
Pernah liat page link nyang ada di : 
https://www.dremi.info/tutorial/photoshop-forum.php ???
nah bagian paging na gw pake CSS bwat bikin box link na, kali ini kita bikin nyang sama tapi dengan style CSS nyang berbeda.
 
Simple aja mulai dengan style ke gini:

<style>
 #pagin a
 {
 font-family:Tahoma;
 font-size:11px; 
 display:block;
 float:left;
 cursor:pointer;
 color:#00c;
 text-decoration:none;
 display:inline-block;
 border:1px solid #ccc;
 padding:.3em .7em;
 margin:0 .38em 0 0;
 text-align:center
 }
 #pagin a:hover
 {
 background:#f0f7e8;
 border:1px solid #83bc46
 }
 #pagin a.sel
 {
 color:#333;
 font-weight:normal;
 background:#f0f7e8;
 cursor: default;
 border:1px solid #83bc46
 }
 </style>

 
Tros terapkan ke dalam halaman HTML lu:

<div id=”pagin”>
 <a class=”sel”>1</a><a href=”http://csslovers.co.cc”>2</a>
 <a href=”http://dremi468.blogspot.com”>3</a>
 <a href=”http://dremi.info/tutorial/photoshop-forum.php”>4</a>
 </div>

heehe jadi dah, lagi lagi tutorial CSS na singket !!! biarin weks  !!
Penasaran kan mao liat hasilna ?? klik ajah link dibawah ini, bwat preview hasilna:
https://www.dremi.info/web/tips/css-box-style-design.html
 
Tros kalo mao download disini:
http://www.ziddu.com/download/1774822/css-box-style-design.rar.html
 
Thanks, dr.emi
 
Share on Facebook
]]>
					
					https://www.dremi.info/articles/membuat-box-style-link-cantik-ala-dremi-dengan-css.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/articles/beautifull-form-dremi-with-css-2.html
					https://www.dremi.info/articles/beautifull-form-dremi-with-css-2.html#respond
		
		
		Sat, 26 Jul 2008 10:10:14 +0000
				
		
		
		
		
		
		
		
		https://www.dremi.info/?p=62

					[…]]]>
										Beautifull Form dr.emi with CSS

Bijimane bikin form nyang kaga mbosenin ????

nah kali ni kite bakalan bikin form make css style.. cantik dah pokokna 

Style na si ke gini ajah:    

Beautifull Form dr.emi with CSS
Bijimane bikin form nyang kaga mbosenin ????
nah kali ni kite bakalan bikin form make css style.. cantik dah pokokna 
Style na si ke gini ajah:

<style type=”text/css”>
 <!–
 body,td,th {
 font-family: Trebuchet MS;
 font-size: 11px;
 color: #333333;
 }
 body {
 background-color: #FFFFFF;
 margin-left: 20px;
 margin-top: 20px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
 a:link {
 color: #0099FF;
 text-decoration: underline;
 }
 a:visited {
 text-decoration: underline;
 color: #0099FF;
 }
 a:hover {
 text-decoration: none;
 color: #009900;
 }
 a:active {
 text-decoration: underline;
 color: #0099FF;
 }
 #OrangeWhiteBox {
 background-color:#FFFBF2;
 padding: 5px;
 margin-bottom:5px;
 border:2px solid #FFE9D2;
 width:550px;
 }
 #GreyWhite {
 background-color: #FBFBFB;
 padding: 5px;
 margin-bottom:5px;
 border:2px solid #F4F4F4;
 width:550px;
 text-align:center;
 }
 /* BOX DESIGN BY dr.emi */
#formM { margin:0px;padding-left:20px;padding-bottom:20px;}
 #formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px; color:#990000; }
 #formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
 #formM .inputM{
 border:1px solid #C0C0C0;
 color:#666666;
 background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
 height:26px;
 font-size:16px;
 }
 #formM .textareaM{
 border:1px solid #C0C0C0;
 color:#666666;
 font-size:16px;
 }
 #formM label{
 display:block;
 margin-bottom:10px;
 color:#666666;
 }
#formM label span{
 display:block;
 float:left;
 padding-right:6px;
 width:70px;
 text-align:right;
 font-weight:bold;
 font-size:16px;
 }
 #formM .spacer{margin-left:80px; 
 margin-bottom:10px;
 font-size:11px;
 color:#555555;
 }
 #formM .buttonM{
 background:url(coklat.gif) 0 0 no-repeat;
 border:1px solid #3b6e22;
 height:26px; width:100px;
 color:#FFFFFF;
 font-size:14px;
 text-decoration:none;
 font-weight:bold;
 }
 .spacerA { clear:both; height:20px; margin:0px; padding:0px; }
 –>
 </style>

Nah lu bikin dah form na, nysuaiin ama style css diatas:

<div id=”OrangeWhiteBox”>
 <div id=”formM”>
 <h1>Komentar gw bwat eloh !  (bahasa abg mumet) </h1>
 <form id=”form1″ name=”form1″ method=”post” action=””>
 <label><span>Nama </span>
 <input name=”name2″ type=”text” class=”inputM” id=”name2″ value=”dr.emi” size=”20″ />
 </label>
 <label><span>E-Mail </span>
 <input name=”name” type=”text” class=”inputM” id=”name” value=”lia@cintaku.com” size=”20″ />
 </label>
 <label><span>No. HP </span>
 <input name=”name” type=”text” class=”inputM” id=”name” value=”081300004000″ size=”20″ />
 </label>
 <label><span>Website</span>
 <input name=”name” type=”text” class=”inputM” id=”name” value=”http://” size=”41″/>
 (* kosong ? yo ra popo </label>
 <label><span>Komentar</span>
 <textarea cols=”38″ rows=”5″ class=”textareaM”>sumpeh deh ! gueh naksir ama eloh ! mau jadi gebetan gue kagak ?</textarea>
 </label>
 <label>
 <div class=”spacer”><input type=”submit” name=”Submit” value=”Kirim” class=”buttonM”/>
 </label>
 </div>
 </form>
 </div>
 </div>
 <p class=”spacerA”>&nbsp;</p>
 <div id=”GreyWhite”><a href=”http://dremi.info/forum” target=”_blank”>Falling in love to dr.emi ? Just Click Here !</a></div>

Cepet banged !!!! ??? iye mang cpet bikin na, palagi kalo make dreamweaver, kaga usah ribet ….
ni preview na kalo udah jadi…

Mao coba html na ? klik na disini …
Nyang mao nDownload disinih …
Sumbangkan sedikit ilmu lu, bwat kebaikan… kami tunggu di http://dremi.info/forum
Woke ! Met malem mingguan yak  thanks !
 
Share on Facebook
]]>
					
					https://www.dremi.info/articles/beautifull-form-dremi-with-css-2.html/feed
			0
		
		
			
		
		
		https://www.dremi.info/articles/semantic-code-untuk-mengoptimize-html-web-20.html
					https://www.dremi.info/articles/semantic-code-untuk-mengoptimize-html-web-20.html#comments
		
		
		Sun, 22 Jun 2008 12:30:16 +0000
				
		
		
		
		
		
		https://www.dremi.info/?p=59

					[…]]]>
										Semantic Code untuk mengoptimize HTML Web 2.0  

Semantic Code untuk mengoptimize   HTML Web 2.0 
Semantic code pada HTML, digunakan bwat   mengoptimize halaman Web 2.0 lu agar lebih mudah di kenali oleh google. 
Semantic code ini bisa dibilang juga sebagai teknik sederhana web   designer dalam merancang struktur TAG HTML agar lebih bersifat deskriptif dimata   Google / Yahoo sebagai search engine. 
Gunakan semantic code untuk   menterjemahkan / mengidentifikasikan konten . Misalkan semantic code pada TAG   DIV dapat berupa : 



Code:


<div   id=”page-titlle”>Ini adalah Title   page</div>



intinya semantic code pada css berperan dalam membantu   google untuk menterjemahkan apa isi dalam TAG <DIV>. 
penggunaan   semantic code juga diperlukan untuk menampilkan list item pada halaman, misalkan   penggunaan <UL> dan <LI> 



Code:



        Items: 

        <ul> 

              <li>List Item1</li> 

                <li>List Item2</li> 

              <li>List Item3</li> 

                <li>List Item4</li> 

              <li>List Item5</li> 

              <li>List Item6</li> 

              <li>List   Item7</li> 

      </ul> 



Bayangkan jika menggunakan table, akan banyak memerlukan   TAG <TR> dan <TD> nah inilah maksud dari semantic code, selain   meringkas penggunaan table juga lebih banyak dipahami oleh ROBOT google dalam   mengindeknya. 
Beberapa yg tergolong semantic code adalah sbb: 



Code:



        <STRONG>            pengganti <B> untuk ketebalan huruf 

        <UL>                     UnOrdered List 

        <OL>                   Ordered List 

        <H1> sd   <H6>     Heading, disarankan digunakan pada judul paragraph 

      <P>                      Paragraph, sebagai pengganti <BR> yang lebih di sukai   ROBOT 



Berikut beberapa kasus yang bisa di gunakan dalam   menerapkan semantic code: 
Penggunaan   jarak objek. 
PADDING, bisa juga digunakan untuk menggantikan TAG   <BR> untuk jadi lebih search engine friendly, dibandingkan penggunaan   <BR> yang banyak. 



Code:



      <div   style=”padding-top:20px;”>ini padding topnya 20px</div> 



kalo   yang bukan semantic code biasanya kita make ini: 



Code:



      <BR>satu TAG   BR dapat diganti dengan padding-top 20 px; 



ke na   gitu aj, mungkin diantara temen2 ada yang masih tau TAG2 bwat CSS dalam   menerapkan Semantic Code ini silakan replay di forum dr.emi. Thanks
Share on Facebook
]]>
					
					https://www.dremi.info/articles/semantic-code-untuk-mengoptimize-html-web-20.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/articles/59-css-tab-design-sample.html
					https://www.dremi.info/articles/59-css-tab-design-sample.html#comments
		
		
		Mon, 16 Jun 2008 07:34:15 +0000
				
		
		
		
		
		
		https://www.dremi.info/?p=57

					[…]]]>
										59 CSS Tab Design Sample  59 CSS Tab Design Sample

pas lagi bosen bosen nya, gw nmu satu freeware, yg bisa bwat bikin tab menu otomatis, dengan model yg keren2. bisa bwat inspirasi lu nge-layout make CSS.
beberapa sample na gw coba generate ke HTML, wew.. keren brow



mayan nih, bwat belajar CSS model web 2.0

cek yak, bisa di download juga kok




Share on Facebook
]]>
					
					https://www.dremi.info/articles/59-css-tab-design-sample.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/articles/css-tab-designer-v10.html
					https://www.dremi.info/articles/css-tab-designer-v10.html#respond
		
		
		Mon, 16 Jun 2008 07:29:29 +0000
				
		
		
		
		
		
		https://www.dremi.info/?p=56

					[…]]]>
										CSS Tab Designer v1.0  


CSS Tab Designer v1.0
   
Mbikin CSS Tab bwat mnu di web / blog lu ga usah binun. Ada   cara lain kalo hasil na kurang bagus juga. 
Cobain Freeware nyang sato   ini, namana CSS Tab Designer v1.0, bwatan OverZone Software 
lu   tinggal pilih, model yang udah disediakan, isi text menu2 na, generate ke HTML,   jadi dah. 
Cek disini bwat donlot
Share on Facebook
]]>
					
					https://www.dremi.info/articles/css-tab-designer-v10.html/feed
			0
		
		
			
		
		
		https://www.dremi.info/articles/css-horizontal-hover-menu.html
					https://www.dremi.info/articles/css-horizontal-hover-menu.html#comments
		
		
		Thu, 08 May 2008 23:59:54 +0000
				
		
		
		
		
		
		https://www.dremi.info/?p=53

					[…]]]>
										CSS Horizontal Hover Menu  ni bwat nyang lagi pada dmen belajar CSS, ada tutorial dikit bikin CSS bwat menu horizontal

seperti biasa kita butuh 2 file pendukung dalam proses styling layout, css dan html / halaman web
untuk CSS na:



Code:


<style type="text/css">

.hovermenu ul{



font: bold 13px arial;



padding-left: 0;



margin-left: 0;



height: 20px;



}
.hovermenu ul li{



list-style: none;



display: inline;



}
.hovermenu ul li a{



padding: 2px 0.5em;



text-decoration: none;



float: left;



color: black;



background-color: #FFF2BF;



border: 2px solid #FFF2BF;



}
.hovermenu ul li a:hover{



background-color: #FFE271;



border-style: outset;



}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */



border-style: inset;



}



</style>



pasang style css di atas antara <HEADER></HEADER>
nah untuk di html na ke gini:






Code:


<div class="hovermenu">



<ul>



<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>



<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>



<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>



<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>



<li><a href="http://dremi468.blogspot.com">dr.emi’s BlogSpot</a></li>



<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>



</ul>



</div>







jadi kalo lengkapna ke gini broder:



Code:


<!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>CSS Horizontal Hover Menu</title>



<style type="text/css">

.hovermenu ul{



font: bold 13px arial;



padding-left: 0;



margin-left: 0;



height: 20px;



}
.hovermenu ul li{



list-style: none;



display: inline;



}
.hovermenu ul li a{



padding: 2px 0.5em;



text-decoration: none;



float: left;



color: black;



background-color: #FFF2BF;



border: 2px solid #FFF2BF;



}
.hovermenu ul li a:hover{



background-color: #FFE271;



border-style: outset;



}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */



border-style: inset;



}



</style>



</head>
<body>



<div class="hovermenu">



<ul>



<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>



<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>



<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>



<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>



<li><a href="http://dremi468.blogspot.com">dr.emi’s BlogSpot</a></li>



<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>



</ul>



</div>



</body>



</html>






Share on Facebook
]]>
					
					https://www.dremi.info/articles/css-horizontal-hover-menu.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/tutorials/css/web-20-layout-with-css-part-4.html
					https://www.dremi.info/tutorials/css/web-20-layout-with-css-part-4.html#comments
		
		
		Wed, 27 Feb 2008 00:01:01 +0000
				
		
		
		
		
		
		
		
		https://www.dremi.info/?p=66

					[…]]]>
										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… 



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:

<body>

<!–MAIN PANEL–>

<div id=”mainPan”>

<!–TOP HEADER PANEL–>

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

<!–END TOP HEADER PANEL–>

<!–MENU PANEL–>

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

<!–END TOP BODY PANEL–>

</div>

<!–END MAIN PANEL–>

</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
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/css/web-20-layout-with-css-part-4.html/feed
			16