Membuat desaign web dengan Dreamweaver [Praktikum PHP 5]
Di praktikum Php 5 ini kita akan mencoba membuat desaign web kecil kecilan di Dreamweaver
Pilih NEW site seperti yang sebelum sebelumnya dengan nama footer.php dan ketikkan coding dibawah..
<html>
<head>
<style type="text/css">
.footer{border-radius:5px;background-color:#F09;text-align:center;}
</style>
</head>
<body>
<div class="footer">
<table>
<tr>
<td>
CopyRight @desyalathifaa 2013
</td>
</tr>
</table>
</div>
</body>
</html>
Hasilnya akan tampak seperti gambar dibawah :
Pilih NEW site seperti yang sebelum sebelumnya dengan nama footer.php dan ketikkan coding dibawah..
<html>
<head>
<style type="text/css">
.footer{border-radius:5px;background-color:#F09;text-align:center;}
</style>
</head>
<body>
<div class="footer">
<table>
<tr>
<td>
CopyRight @desyalathifaa 2013
</td>
</tr>
</table>
</div>
</body>
</html>
Hasilnya akan tampak seperti gambar dibawah :
selanjutnya buat lagi new file dengan nama header.php
dan ketikkan coding dibawah..
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Basic Horizontal Menu CSS : DEMO</title>
<style type="text/css">
h1{margin:5px}
.demo-container{margin:0px;color:#F06;background-color:#FCF;border-radius:5px}
.horizon-menu{list-style-type:none;padding:0;margin:0; background:#F09;padding:10px;border-radius:5px; box-shadow:inset 0 0 5px 2px #f4f4f4}
.horizon-menu a{text-decoration:none; color:#FCC;font-weight:bold}
.horizon-menu li{display:inline;margin:5px 0}
.horizon-menu li:before{content:' | ';color:rgba(0,0,0,.1)}
.horizon-menu li:first-child:before{content:' '}
.horizon-menu li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:#3CF}
</style>
</head>
<body>
<div class="demo-container">
<h1><font face="Tempus Sans ITC"><center>Desya Lathifa </center></font></h1>
<ul class="horizon-menu">
<li><a href="#" class="">Home</a></li>
<li><a href="#" class="lang">About</a></li>
<li><a href="#" class="lang">Work</a></li>
<li><a href="#" class="lang">Portfolio</a></li>
<li><a href="#" class="lang">Contact</a></li>
</ul>
</div>
</body>
</html>
Hasilnya akan seperti gambar dibawah ini ..
dan langkah selanjutnya buat file baru dengan nama body.php
ketikkan coding dibawah ini..
<html>
<head>
<style type="text/css">
.body{background-color:#F69;color:#000;border-radius:5px; height:80%; width:70%; }
</style>
</head>
<body background="ed.jpg">
<center>
<div class="body">
<table width="100%" height="100%">
<tr >
<td width="100%" height="100%">
<img src="roses.png" width="100%" />
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
Hasilnya akan nampak seperti Gambar dibawah ..
Untuk Langkah terakhir buat file dengan nama Praktikum5.php
dan ketikkan coding dibawah ..
<?php
require ("header5.php");
require ("body5.php");
require ("footer5.php");
?>
<body bgcolor="#000000">
</body>
Hasilnya dari keseluruhan akan terlihat seperti gambar dibawah ini ..
apabila dilihat dari browser hasilnya seperti ini ...
CATATAN : untuk nama file bisa kalian beri nama sesuka kalian dan untuk gambar background kalian bisa ganti dengan gambar sesuka kalian...
selamat mencobaa :)
0 komentar