在HTML设计中插入页面 [英] Insert Page in html design

查看:138
本文介绍了在HTML设计中插入页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我设计了一个网站20页,菜单和标题有css设计我的问题是,如果我改变菜单内容,那么我必须改变所有的页面,如何使单独的页面的标题。 p>

我已经尝试过并包含网页方法,但不工作。



代码段:

 <!DOCTYPE html> 
< html class =no-bgpositionxyxmlns =http://www.w3.org/1999/xhtmllang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< title>示例< / title>
< link rel =stylesheethref =css / style.csstype =text / cssmedia =screen/>
< script type =text / javascriptsrc =js / jquery-1.5.1.min.js>< / script>
< script type =text / javascriptsrc =js / custom.js>< / script>
< link rel =stylesheethref =css / nivo-slider.csstype =text / cssmedia =screen/>
< script src =js / jquery.nivo.slider.jstype =text / javascript>< / script>



< link rel =shortcut iconhref =Fav.ico>
< meta name =robotscontent =follow,index>



< link type =text / csshref =css / BodyAlign.css =stylesheetmedia =all>



< script type =text / javascriptsrc =js / Menu.js>< / script>
< script type =text / javascriptsrc =js / Menu1.js>< / script>

< script type =text / javascriptsrc =js / MenuDrop.jslanguage =javascript>< / script&
< script type =text / javascriptlanguage =javascript>
ct =us;
selURL =manufacturing.html;
$(function(){$('#popularSearches,#country-list')。hide();});
< / script>


< style media =screentype =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>首页< / a>< / li> 

< li id =why_workday_menu> < a href =manufacturing.html>为什么< / a> < div style =width:200px; class =topnav_content 1-columns> < ul class =topnav_column1 last>

< li class =topnav_column_title> < a href =manufacturing.html>为什么< / a>< / li> < li> < a href =manufacturing.html>专为您的工作方式< / a>< / li> < li> < a href =manufacturing.html> Real Cloud< / a>< / li> < li> < a href =manufacturing.html>移动< / a>< / li> < div class =clearfix>< / div>


解决方案

您可以使用 < object> 以非标准方式如下:

 < object name =headertype =text / htmldata = header.inc.html>< / object> 

也可以使用 SSI (如果您的服务器支持)。

 <! - #include file =header.inc.shtml - > 

如果你的html文档可以用php解析,你可以使用 include statement ..

 <?php include('header.inc.phtml'); ?> 

另一种方法是使用Ajax与 jQuery

  //如果你有一个容器为它的id'header-wrapper'
$('#header-wrapper')。load('header.inc.html');

// ..如果没有容器
$ .get(header.inc.html,function(data){
$(body ).prepend(data);
});

最后但同样重要的是,您可以使用Frameset或iFrame作为不良做法。


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.

这篇关于在HTML设计中插入页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆