Я разработал один веб-сайт с 20 страницами, а меню и заголовок имеют дизайн css. Моя проблема в том, что если я изменяю содержимое меню, тогда мне нужно изменить всю страницу, чтобы как сделать отдельную страницу для заголовка.
Я попробовал и включил метод страницы, но не работал.
Фрагмент кода:
<!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> ниже кода находится меню, поэтому я хочу сделать отдельную страницу ниже кода
<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>
Вы можете использовать <object> нестандартным способом:
<object name="header" type="text/html" data="header.inc.html"></object>
Или вы также можете использовать SSI, если ваш сервер поддерживает его.
<!--#include file="header.inc.shtml" -->
Если ваш html-документ можно разобрать с помощью php, вы можете использовать оператор include .
<?php include('header.inc.phtml'); ?>
Другой способ – использовать Ajax, например, с помощью 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); });
И последнее, но не менее важное: вы можете использовать Frameset или iFrame как плохую практику.
Поскольку вы отметили вопрос с помощью PHP, я предполагаю, что вы используете PHP для своей серверной логики. В этом случае PHP имеет оператор include который будет содержать содержимое другого файла PHP в том месте, где он вызывается. Для этого другого файла не требуется PHP-код, он может просто быть простым HTML.
Таким образом, ваш код может выглядеть примерно так:
<!DOCTYPE html> <html> <head></head> <body> <?php include "header.html"; ?> <!-- page-specific content goes here --> </body> </html>
Таким образом, вы просто создаете содержимое заголовка один раз в файле header.html и включаете его в каждый файл, в котором вы хотите его использовать.
Хорошо … с чего начать … Я покажу вам, как создать базовый шаблон HTML5.
Если у вас нет предпочтительного текстового редактора, я бы рекомендовал Notepad ++
1-й – Создать главную страницу | 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>
* Примечание. В нижеприведенных документах мы не пишем <!doctype html> или что-либо еще из главной страницы master.php .
2nd – Создайте header.html или header.php .
<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 – создайте footer.html или footer.php .
<div> Some footer content here... </div> Anything else what we want in the footer area.
4-я и последняя – папка «Создать» includes в свой корень документа и в этой папке создайте .html или .php document index-content.php со следующим содержимым, например
<div id="divName"> <p>this is some text...</p> </div> and whatever you want here...
Вместо добавления вновь созданного index-content.php в папку includes
Затем создайте новый документ index.php и поместите его в корневую папку документа
Содержание документа index.php
<?php $page_content = 'includes/index-content.php'; include('master.php'); ?>в<?php $page_content = 'includes/index-content.php'; include('master.php'); ?>
Теперь перейдите в свой веб-браузер к localhost/sitename/index.php и выполните.
(если у вас нет сервера localhost и запущен, откройте index.php в своем веб-браузере.
Аналогичным образом вы создадите другие страницы / документы, для создания содержимого документа, например
pagename-content.php или pagename-content.html а для фактической страницы, которую вы связываете в навигации, создайте pagename.php, как в примере выше, чем в ссылке навигации, назовите его
<a href="pagename.php">Page Name</a>
На данный момент, для любых дополнений, пожалуйста, спросите в комментариях.
Используйте SSI (на стороне сервера), если он включен на вашем сервере.
<!--#include file="menu.html" --> или <!--#include virtual="menu.html" -->
Или используйте функции php include, если php не поддерживается на вашем сервере.
<?php include 'menu.php'; ?>