Script Template CSS (style.css)
body{
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
}
#container{
width:780px;
margin:auto;
border: solid 1px #993300;
#topbar{
width:auto;
display:block;
height:147px;
background-image:url(image/header.jpg);
}
#navbar{
width:auto;
display:block;
height:24px;
background-image:url(image/navbar.jpg);
}
#main{
width:auto;
display:block;
}
#column_left{
width:560px;
margin-right:20px;
float:left;
}
#column_right{
width:200px;
float:left;
background-color:#CCCCCC;
}
div.spacer{
clear:both;
height:10px;
display:block;
}
#footer{
width:auto;
display:block;
height:24px;
background-color:black;
}
#navbar{
font-size:90%;
height:24px;
background-color:#000000;
margin:0;
padding-top:0.2em;
}
#navbar ul {
list-style:none;
margin-top:0;
padding:0;
float:left;
}
#navbar li{
height:24px;
display:inline;
list-style:none;
float:left;
}
#navbar a:link, #navbar a:visited{
padding: 0.4em 1em 0.4em 1em;
color:#ffffff;
background-color: #999900;
text-decoration: none;
border: 1px solid #669900;
}
#navbar a:hover {
color: #FFFFFF;
background-color:#99CC00;
border: 1px solid #669900;
border:;
Membuat kerangka Layout index.php
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id="container">
<div id="topbar"></div>
<div id="navbar"></div>
<div id="main">
<div id="column_right"></div>
<div id="column_left"></div>
<div class="spacer"></div>
<div id=“footer”></div>
</div>
</div>
Menu Navigasi
<ul id="navbar">
<li id="navbar"><a href=“#">Home</a></li>
<li id="navbar"><a href=“#">Profile</a></li>
<li id="navbar"><a href=“#">Kontak</a></li>
<li id="navbar"><a href=“#">PetaSitus</a></li>
</ul>
Script template php
Script php di letakan diantara <div id="column_left"><?php ... ?></div>
<?php
include ('main.php');}
elseif($_GET['page']!=null && $_GET['page']!=""){
include $_GET['page'];
}
?>
Tambahkan Link untuk menu navigasi
<li id="navbar"><a href="?page=main.php">Home</a></li>
<li id="navbar"><a href="?page=profil.php">Profile</a></li>
<li id="navbar"><a href="?page=kontak.php">Kontak</a></li>
<li id="navbar"><a href="?page=sitemap.php">Peta Situs</a></li>
Buat halaman main.php, profil.php, kontak.php dan sitemap.php, untuk di link kan ke menu navigasi.
Hasil Akhirnya adalah seperti pada gambar di bawah
Tidak ada komentar:
Posting Komentar