Tutorial Mendesain Halaman Login menggunakan Dreamweaver

Standar

https://i2.wp.com/javawebmedia.com/blog/wp-content/uploads/2013/01/capture_28012013_135102.jpg

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 > HTMLPastikan Doctype-nya adalah HTML5 lalu klik Create.

Web Design Course in Depok

Web Design Course in Depok

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>
<body>
</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;
}
.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”>&copy; Java Web Media </p>
</div>
</body>
</html>
http://javawebmedia.com/blog/tutorial-mendesain-halaman-login-menggunakan-dreamweaver/

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s