However we still need :
Member register form, just a simple HTML code
jQuery library, the Ajax Masterpiece
PHP Script, basic validation script
Little bit of member sql table, we will create it using PHPMyAdmin
Now, open your Dreamweaver, or any Code Editor, Notepad++ are welcome!
First, we will create HTML code for member register form. Remember, this form is just for illustrate the real form.

<form id="form1" name="form1" method="post" action="">
<fieldset>
	<legend>Check Username Availability</legend>
	<label>Username <span class="require">(* requiered: alphanumeric, without white space, and minimum 4 char</span></label>
    <input type="text" name="username" id="username" size="15" maxlength="15" onchange="loadContentResult(this.value)" />
	<div id="spinner"></div>
    <div id="actionresult"></div>
	<div class="clear"></div>
	<label>Email:</label>
	<input type="text" name="email" id="email" size="30" maxlength="255" />
	<div class="clear"></div>
	<input type="submit" name="submit" id="submit" value="Register" />
</fieldset>
</form>

On my input code, I use onchange=”loadContentResult(this.value)” to handle username field value while onChange event. So, where is come from the loadContentResult() ?

Here are the Javascript code, include for jQuery preloader.
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Count the number of times a substring is in a string.
String.prototype.substrCount =
  function(s) {
    return this.length && s ? (this.split(s)).length - 1 : 0;
  };
// Return a new string without leading and trailing whitespace
// Double spaces whithin the string are removed as well
String.prototype.trimAll =
  function() {
    return this.replace(/^\s+|(\s+(?!\S))/mg,"");
  };
//event handler
function loadContentResult(username) {
	if(username.substrCount(' ') > 0)
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?msg=whitespace", '', callbackResult);
	}
	else
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?username="+username.trimAll()+"", '', callbackResult);
	}
}
//callback
function callbackResult() {
	$("#actionresult").show();
}
//ajax spinner
$(function(){
	$("#spinner").ajaxStart(function(){
		$(this).html('<img src="image/wait.gif" />');
	});
	$("#spinner").ajaxSuccess(function(){
		$(this).html('');
 	});
	$("#spinner").ajaxError(function(url){
		alert('Error: server was not respond, communication interrupt. Please try again in a few moment.');
 	});
});
</script>

To call jQuery library, use
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

You must carefull to validate string from username field before send it into PHP script. The problem is if you enter white space string from username field then send it into PHP script without validate it before, you will trouble while accessing user.php as PHP Script. So I need to add this javascript before validated by PHP script.
// Count the number of times a substring is in a string.
String.prototype.substrCount =
  function(s) {
    return this.length && s ? (this.split(s)).length - 1 : 0;
  };
// Return a new string without leading and trailing whitespace
// Double spaces whithin the string are removed as well
String.prototype.trimAll =
  function() {
    return this.replace(/^\s+|(\s+(?!\S))/mg,"");
  };

How about jquery as script loader? To load user.php and attempt it into DIV ID for #actionresult, we can use this script:
//event handler
function loadContentResult(username) {
	if(username.substrCount(' ') > 0)
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?msg=whitespace", '', callbackResult);
	}
	else
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?username="+username.trimAll()+"", '', callbackResult);
	}
}
//callback
function callbackResult() {
	$("#actionresult").show();
}

Don’t worry about ajax loading animation, I use simple GIF animation as spinner:
//ajax spinner
$(function(){
	$("#spinner").ajaxStart(function(){
		$(this).html('<img src="image/wait.gif" />');
	});
	$("#spinner").ajaxSuccess(function(){
		$(this).html('');
 	});
	$("#spinner").ajaxError(function(url){
		alert('Error: server was not respond, communication interrupt. Please try again in a few moment.');
 	});
});

So, what netxt!? It’s time to make cool PHP Script to validate our username string (in this case, I just use username field as POST variable. But before it, let’s create our mysql table:
CREATE TABLE `member2` (
`member_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`username` varchar( 15 ) NOT NULL ,
`email` varchar( 255 ) NOT NULL ,
PRIMARY KEY ( `member_id` )
);
INSERT INTO `member` VALUES (1, 'dremi', 'webmaster@dremi.info');

This script for user.php file as response validator. Remember this is main function only, you may add some connection script.
function clearString($value)
{
	if (get_magic_quotes_gpc())
	{
		$value = stripslashes($value);
	}
	if (!is_numeric($value))
	{
		$value = mysql_real_escape_string($value);
	}
	$value = trim(strip_tags($value));
	return $value;
}
function validStr($str, $num_chars, $behave) //alpha numeric only for entire of string width
{
	if($behave=="min")
	{
		$pattern="^[0-9a-zA-Z]{".$num_chars.",}$";
	}
	elseif($behave=="max")
	{
		$pattern="^[0-9a-zA-Z]{0,".$num_chars."}$";
	}
	elseif($behave=="exactly")
	{
		$pattern="^[0-9a-zA-Z]{".$num_chars.",".$num_chars."}$";
	}
	if(ereg($pattern,$str))
	{
		return true;
	}
	else
	{
		return false;
	}
}

And this is for validate condition.
$username	= $_REQUEST['username'];
$msg		= $_REQUEST['msg'];
if(isset($username) && $username != '')
{
	if(validStr($username, 4, 'min') == false)
	{
		?>
		<span style="color:red">You enter invalid username</span>
		<?php
	}
	else
	{
		connect(_HOST, _USER, _PASS, _DB);
		$jCekMember = numrows(query("SELECT * FROM member WHERE username = '".clearString($username)."'"));
		if($jCekMember != 0)
		{
			?>
			<span style="color:blue">Username <?php echo $username; ?> was unavailable, another people has taken.</span>
			<?php
		}
		else
		{
			?>
			<span style="color:green">Username <?php echo $username; ?> available.</span>
			<?php
		}
		close();
	}
}
elseif($msg == 'whitespace')
{
	?>
	<span style="color:red">Username cannot contain of white space</span>
    <?php
}
else
{
	?>
	<span style="color:red">Insert username</span>
    <?php
}

While username is valid string, PHP script will check availablility on member table using this code:
$jCekMember = numrows(query("SELECT * FROM member WHERE username = '".clearString($username)."'"));

So, as showed on next line, if username is not available to register in member table, it’s mean the username has taken by another people, and message will say :
Username <?php echo $username; ?> was unavailable, another people has taken.

Well, everything is gonna be Allright 

Now let’s see the result by click on Demo Button or you can Download full code to learn.
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/html/how-to-check-username-availability-using-jquery-php.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html
					https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html#comments
		
		
		Wed, 26 Nov 2008 01:22:20 +0000
				
		
		
		
		
		
		
		
		
		
		https://www.dremi.info/?p=87

					[…]]]>
										 Welcome back friend! This tutorial explains how to create an interactive layout. A combination of designing web layout using Photoshop and Editing with HTML + CSS. Then implement it using jQuery Ajax when loading PHP Content


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/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/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
		
		
			
		
		
		https://www.dremi.info/tutorials/html/eye-shadow-photoshop-make-up.html
					https://www.dremi.info/tutorials/html/eye-shadow-photoshop-make-up.html#comments
		
		
		Sat, 19 May 2007 01:25:50 +0000
				
		
		
		
		
		
		
		
		https://www.dremi.info/?p=29

					[…]]]>
										 How to make eye shadow with photoshop.






First, create a new layer above the photo background layer. Change the layer mode to Color.

Then select the Brush Tool with a Size of 17 Pixels / adjust the size of the object to be brushing, its opacity is about 30%, Flow = 70%. Pick the purple color # 00448F.

Start pulling the brush tool on top of the lashes.

Create a new layer with the mode: Soft Light on the layer, change the brush size to 32 px, and the opacity to 22%, the Flow is the same. Choose a pink color. Brushing under the eyebrows.

Continue to the bottom of the eye, create a new layer with mode: multiply, use a dark color, but change the brush opacity to 52%. Just reduce the brush size to 9-10 px, the flow is the same 70.

So if it’s not bright enough, you can give a dark brush again on a new layer (layer mode: multiply too).

So that’s it

Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/html/eye-shadow-photoshop-make-up.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-6.html
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-6.html#comments
		
		
		Tue, 27 Mar 2007 00:18:55 +0000
				
		
		
		
		https://www.dremi.info/?p=448

					[…]]]>
										 Langkah Editing Layout 

Menggunakan Macromedia DreamWeaver
WOKE kita lanjut lagi…contoh lainnya kita akan membuat table dalam bagian konten tadi.


 
1. Pilih Menu Insert > Table ato [CTRL+ALT+T]

Masukkan jumlah Row, Coloum, Border, Cellpadding dan Cellspacing nya terserah lu…..
  
Klik OK….

2. Dalam Table lu bisa isiin apa aja sesuai inspirasi lu…Contohnya seperti pada gambar…
  
Wah ga nyadar lu yak? lu dah bisa bikin web sekarang, wahhhh hebat2…hehehhee OKE sampai sini langkah editing layout selesai, lu tinggal publish deee web lu.

Pake hosting gratisan juga boleee, kayak Geocities, Tripod, dlll. Kalo yang udah cukup mahir bisa nyoba ke http://www.awardspace.com untuk hosting 200 mbyte GRATIIISSSSS !!! pokoknya disinimah kita nyang gratisan aja deee..

WOKE2 udah ngantuk neee gueh nya.. lu cobain yak,,,semua langkah2nya dan kasi tau gue kalo ada yg ga ngerti atau yang udah berhasil bikin webnya …langsung aja ke FORUm dremi.info yak…

Thanks, semoga bermanfaat AMIN…

Hairul Azami

Hal. 1 – 2 – 3 – 4 – 5 – 6
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-6.html/feed
			2
		
		
			
		
		
		https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-5.html
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-5.html#respond
		
		
		Tue, 27 Mar 2007 00:17:19 +0000
				
		
		
		
		https://www.dremi.info/?p=446

					[…]]]>
										 Langkah Editing Layout 

Menggunakan Macromedia DreamWeaver
Macromedia Dreamaweaver merupakan tool pengolah web yang paling cerdas menurut gue. Karena hingga saat ini penulis merasa sangat terbantu secara optimal dan belum ada yang mampu menyaingi Tool ini kalo dilihat dari fiture keseluruhannya.
 
Pada kasus ini gue cuma akan membahas penggunaan Dreamweaver dari segi Editing dan Organisasi Webnya saja.

1. Mulailah dari proses Management Site. Pilih Site > Manage Site pada Dreamweaver.

2. Nanti bakal muncul jendela Manage Site. Lalu pilih New untuk membuat Situs baru.


  


Nah akan muncul lagi Window baru “Site Definition”

Ketik nama Website Lu misalnya “Website Gue”

Pada kolom Website http://……bisa dikosongkan karena kali ini kita tidak akan membahas pembuatan website under Root Server. Pilih NEXT
  
Pilih “No, I Do not want to use a server technology” – NEXT
  
Pilih “Edit Local copies on my machine, then ….dstrusnya” , dan klik icon Folder tempat penyimpanan folder situs Anda (dalam hal ini hasil optimize yang lu buat tadi dari Image Ready) – NEXT
  
Pilih No, do not enable check in and check out – NEXT
  
Terakhir akan muncul konfirmasi hasil sementara perancangan manajemen situs baru lu, Lu klik deh tombol DONE nya. Selesai dee..

Aduuuh ngantuk gue
  
3. Selanjutnya pilih File > Open = index.html (file situs) atau bisa juga melalui double klik pada Panel Files yang sebelah kanan.

4. Ubah ke Mode Layout dengan mengklik tombol Layout seperti di bawah ini…
  
Klik dulu, lalu akan muncul pilihan mode tampilan dokumen web. Pilih Layout.
  
Secara otomatis Tab tombol utama layout akan muncul tepat disebelah kanan Tombol pilihan Layout tadi.

Pilih Tab Layout
  
5. Dengan memilih Tab Layout Dokumen diatas, maka akan muncul tampilan garis2 pemisah slice yang kita buat di Image Ready sebelumnya. Garis2 ini merupakan table2 yang telah diciptakan oleh Imageready dalam kode2 HTML nya saat kita mengexport Dokumen gambar design webnya. Cerdas bukan yang bikin Tool Adobe nya ??? hakhakhak….
  
6. Nah lu sekarang tinggal klik + [DELETE] aja bagian image nomor 1 dan 2, karena nantinya akan kita isi dengan konten website

7. Sebagai contoh di bagian nomor dua lu [CTRL + KLIK] pada kotak slice berwarna birunya baru lu pilih warna backgroundnya pada Properties Panel (dibagian bawah)

Sentuh warna background pada gambar lainnnya dengan mouse untuk mengambil sample warna.


  


8. Setelah kedua bagian konten lu kasi warna background lu tinggal isi deee website lu pake apa yang lu mau…Mau Text boleh mau gambar lagi boleh…suka2 lu deee. nama Website nya juga kan “Website Gue” hehekeehehekehehe….Ntar yee gue pipis dulu dah jam 1:00 malem niii

Hal. 1 – 2 – 3 – 4 – 5 – 6
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-5.html/feed
			0
		
		
			
		
		
		https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-3.html
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-3.html#respond
		
		
		Tue, 27 Mar 2007 00:15:51 +0000
				
		
		
		
		https://www.dremi.info/?p=441

					[…]]]>
										 Langkah Perancangan Layout 

Bikin Layout Box Content
Ulangi langkah no. 3 pada halaman 1 untuk membuat box contentnya.

Box content nya bikin tiga: box kiri (left menu), kanan (main body), dan bawah (footer).
 
  
Bikin Menu 

1. Pada bagian box main body Bikin kotak dengan rounded rectangle tool radius terserah lu yang penting matching aja. kasi gradasi abu2 dan sedikit sentuhan Outer glow multiply gelap dan stroke 1 px (color #000000).

Tambahkan text2 menu diatasnya dengan dipisahkan oleh garis2 pencil berwarna hitam.

Tambahkan juga hiasan rectangle gradasi biru (kaya bikin tombol biru tadi) di bagian kanan nya.
  
Hal. 1 – 2 – 3 – 4 – 5 – 6
Share on Facebook
]]>
					
					https://www.dremi.info/tutorials/html/merancang-website-full-abis-part-3.html/feed
			0