Tutorial Mendesain Halaman
Login menggunakan Adobe Dreamweaver CS5
Anda akan
mempelajari bagaimana membuat halaman login. Tutorial ini diutamakan untuk
pengguna Adobe Dreamweaver CS5 ke atas (meskipun versi sebelumnya bisa juga,
tapi beberapa fitur tidak akan jalan).
Membuat file
baru
Untuk
membuat file html baru, klik menu File > New... Lalu
pilih Blank page > None > HTML. Pastikan Doctype-nya
adalah HTML5 lalu klik Create.
Ubah lembar
kerja Anda menjadi Code View, lalu ubah title yang semula
berisi “Untitled Document” menjadi “Halaman login”.
<!doctype
html>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Login</title>
</head>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Login</title>
</head>
<body>
</body>
</html>
</body>
</html>
Menggunakan
CSS untuk mempercantik tampilan
<!doctype
html>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Login</title>
<style type=”text/css”>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666;
}
#login {
width: 30%;
height: auto;
margin: 10% auto auto auto;
background-color: #FFF;
padding: 20px;
border-radius: 10px;
}
#login form {
padding: 5px;
padding: 10px 20px;
border-radius: 5px;
background-color: #F5F5F5;
border: solid thin #EEE;
margin: 10px 0 0 0;
}
#login label {
display: block;
font-weight: bold;
}
#login input {
padding: 4px 6px;
}
#login h2 {
margin: 0;
padding: 10px 20px;
font-weight: 16px;
background-color: #066;
color: #FFF;
border-radius: 5px;
}
.tombol {
color: #FFF;
background-color: #099;
cursor: pointer;
border: none;
border-radius: 4px;
width: auto;
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Login</title>
<style type=”text/css”>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666;
}
#login {
width: 30%;
height: auto;
margin: 10% auto auto auto;
background-color: #FFF;
padding: 20px;
border-radius: 10px;
}
#login form {
padding: 5px;
padding: 10px 20px;
border-radius: 5px;
background-color: #F5F5F5;
border: solid thin #EEE;
margin: 10px 0 0 0;
}
#login label {
display: block;
font-weight: bold;
}
#login input {
padding: 4px 6px;
}
#login h2 {
margin: 0;
padding: 10px 20px;
font-weight: 16px;
background-color: #066;
color: #FFF;
border-radius: 5px;
}
.tombol {
color: #FFF;
background-color: #099;
cursor: pointer;
border: none;
border-radius: 4px;
width: auto;
}
.tombol:hover {
background-color: #066;
}
</style>
</head>
.tombol:hover {
background-color: #066;
}
</style>
</head>
<body>
<div id=”login”>
<h2>Halaman login</h2>
<form name=”form1″ method=”post” action=””>
<p>
<label for=”username”>Username</label>
<input type=”text” name=”username” id=”username”>
</p>
<p>
<label for=”password”>Password</label>
<input type=”password” name=”password” id=”password”>
</p>
<p>
<input name=”submit” type=”submit” class=”tombol” id=”submit” value=”Login”>
<input name=”submit2″ type=”reset” class=”tombol” id=”submit2″ value=”Reset”>
</p>
</form>
<p align=”center”>© Java Web Media </p>
</div>
</body>
</html>
<div id=”login”>
<h2>Halaman login</h2>
<form name=”form1″ method=”post” action=””>
<p>
<label for=”username”>Username</label>
<input type=”text” name=”username” id=”username”>
</p>
<p>
<label for=”password”>Password</label>
<input type=”password” name=”password” id=”password”>
</p>
<p>
<input name=”submit” type=”submit” class=”tombol” id=”submit” value=”Login”>
<input name=”submit2″ type=”reset” class=”tombol” id=”submit2″ value=”Reset”>
</p>
</form>
<p align=”center”>© Java Web Media </p>
</div>
</body>
</html>
sumber : javawebmedia.com/
0 komentar for "Tutorial Mendesain Halaman Login menggunakan Dreamweaver "
Posting Komentar