i have designed one website with 20 pages and the menu and header have the css design my problem is if i change the menu content then i have to change all the page so how to make the separate page for the header.
I have tried and include page method but not work please.
Code snippet:
<!DOCTYPE html>
<html class=" no-bgpositionxy" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<link rel="shortcut icon" href="Fav.ico">
<meta name="robots" content="follow,index">
<link type="text/css" href="css/BodyAlign.css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/Menu.js"></script>
<script type="text/javascript" src="js/Menu1.js"></script>
<script type="text/javascript" src="js/MenuDrop.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
ct = "us";
selURL = "manufacturing.html";
$(function(){$('#popularSearches,#country-list').hide();});
</script>
<style media="screen" type="text/css">
<!--
.enlarge {width:330px;bottom:55px;}
-->
</style>
</head>
<!-- Head -->
<body>
below the code is menu so i want to make separate page for below code
<header id="header"> <div class="container"> <div id="topnav_wrap"> <ul id="topnav"> <li class="topnav_column_title"> <a href="index.html">Home</a></li>
<li id="why_workday_menu"> <a href="manufacturing.html">Why </a> <div style="width: 200px;" class="topnav_content 1-columns"> <ul class="topnav_column1 last">
<li class="topnav_column_title"> <a href="manufacturing.html">Why </a></li> <li> <a href="manufacturing.html">Designed for the Way You Work</a></li> <li> <a href="manufacturing.html">Real Cloud</a></li> <li> <a href="manufacturing.html">Mobile</a></li> <div class="clearfix"></div>
You can use <object> in a non standard way like this:
<object name="header" type="text/html" data="header.inc.html"></object>
Or you can also use SSI if your server support it..
<!--#include file="header.inc.shtml" -->
If your html document can be parsed with php, you can use the include statement..
<?php include('header.inc.phtml'); ?>
Another way is to use Ajax, e.g. with jQuery:
// if you have a container for it with id 'header-wrapper'
$('#header-wrapper').load('header.inc.html');
// ..or if you have no container for it
$.get("header.inc.html", function(data) {
$("body").prepend(data);
});
Last but not least you can use a Frameset or a iFrame as bad practice.
Since you tagged the question with PHP, I'm going to assume you're using PHP for your server-side logic. In that case, PHP has an include statement which will include the contents of another PHP file at the location at which it's called. That other file doesn't need to have PHP code, it can just be plain HTML.
So your code might look something like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<?php include "header.html"; ?>
<!-- page-specific content goes here -->
</body>
</html>
That way you just create the header content once in the header.html file and include it in every file where you want to use it.
Use SSI (Server side includes) if it enabled on your server.
<!--#include file="menu.html" --> or <!--#include virtual="menu.html" -->
Or use php include functions if php anabled on your server.
<?php include 'menu.php'; ?>
Ok...where to begin...I'll show you how to create basic HTML5 master template.
If you don't have prefered text editor yet I would recommend Notepad++
1st - Create Master Page | master.php.
<!doctype html>
<html>
<head>
<title>My Title</title>
<meta charset="utf-8">
<meta name="description" content="My Website">
<meta name="keywords" content="keyword1, keyword2, keyword3...">
<meta name="author" content="Me">
<link href="favicon.ico" rel="shortcut icon">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<?php include('header.html'); ?> <!-- Put Navigation in Header -->
<?php include('navigation.html'); ?> <!-- Or Make Separate Navigation -->
</header>
<div id="content">
<?php include($page_content); ?> <!-- More about this in final step -->
<?php include('sidebar.html'); ?> <!-- Yes, you can add the sidebar too :) -->
<div class="clearfix"></div> <!-- Smart to put it here ;) -->
</div>
<footer>
<?php include('footer.html'); ?>
</footer>
</body>
</html>
*Note - In documents below we don't write <!doctype html> or anything else from the master page master.php.
2nd - Create header.html or header.php document.
<img src="images/logo.png" alt="Site Name"/>
<nav>
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
<li><a href="#">LINK 4</a></li>
<li><a href="#">LINK 5</a></li>
</ul>
</nav>
...and some more header content if needed...
3rd - Create footer.html or footer.php document.
<div>
Some footer content here...
</div>
Anything else what we want in the footer area.
4th & Final - Create folder includes in your document root and in that folder create .html or .php document index-content.php with following content for example
<div id="divName">
<p>this is some text...</p>
</div>
and whatever you want here...
Than put newly created index-content.php in folder includes
Than create new document index.php and put it in document root folder
Content of the index.php document
<?php
$page_content = 'includes/index-content.php';
include('master.php');
?>
Now navigate in your web browser to localhost/sitename/index.php and done.
(if you do not have a localhost server up and running then open index.php in your web browser.
The same way later you create other pages/documents, for document content create e.g.pagename-content.php or pagename-content.html and for actual page which you link in navigation create pagename.php like in example above, than in navigation link call it like<a href="pagename.php">Page Name</a>
That's it for now, for any additions please ask in comments.