您的位置：首页 > 运维架构 > 网站架构

综合练习——俏江南网站之三——如何从一个网页得到网站的其他页面

2013-01-18 15:51 281 查看

综合练习——俏江南网站之三——如何从一个网页得到网站的其他页面
我们已经制作了一个网页的基本框架，下面的工作，我们将分为两部分来做。
1.用动态页结合数据库生成页面中的新闻列表部分。
2.以已经完成的页面为基础快速得到其余页面。
下面我们首先来谈第二个部分，如何动态生成里面的新闻列表，将在下一篇中谈到。

首先来看我们做好的页面

红色文字和方框标注出来的部分是各个页面相同的（除了首页），蓝色部分标出来的是每个页面独立的部分。为了加快页面设计速度，降低网站管理成本。我们需要把公共的部分拿出来单独创建文件，然后再把文件用include的方式放回去。这样，未来每个页面中，相同的部分都指向同一个文件，需要修改公共内容时，不需要一个个修改，只需要把指向的那个公共文件修改掉就可以了。
下面我们来看详细的步骤

1、从源文件中创建公共部分
（1）首先来看源代码
我们需要导出成单独文件的部分包括，logo和menu（头部），mind（理念部分），导航（含电话号码和地址部分），footer，right_edge(右边的红灯笼)。
公共部分（content）
这些部分，有的是一个div，有的是两个div ，有的级别较高，有的级别较低。大家制作的时候要加以注意。
（2）导出头部（logo和menu）
切换到代码视图，找到类似如下字样（各个同学的可能不尽相同）。
<div id="logo"></div> 

<div id="menu">

<ul>

<li class="index"><a href="#">首页</a></li>

<li class="sub1"><a href="#">关于俏江南</a></li>

<li class="sub2"><a href="#">菜品介绍</a></li>

<li class="sub3"><a href="#">餐厅导航</a></li>

<li class="sub4"><a href="#">人才招聘</a></li>

<li class="sub5"><a href="#">新闻中心</a></li>

</ul>

</div> 
将之拷贝，在dw下新建一个静态页，切换到代码视图，如图所示

将之全部删除，把上一步的logo和menu的代码粘贴进来。如图所示

将这个页面另存为head.html。切换到设计视图，可以看到，其实这个里面只有内容，没有样式。

(3)用相同的方法分离出mind
<div id="mind">

<div id="m1">

<p> <span class="STYLE13" >正是江南好风景</span></p>

<p class="STYLE13" >花开时节又<span class="STYLE7">逢</span>君</p>

</div>

</div>

同样新建一个静态页，进入代码视图，将里面所有的文字删除，把上面这段mind的代码粘贴进来，另存为mind.html.

(4)分类导航部分
<div id="nav">

<div>

<h1>新闻中心</h1>

<ul>

<li>公司新闻</li>

<li>公关活动</li>

<li>优惠信息</li>

<li>企业内刊</li>

<li>公益事业</li>

<li></li>

</ul>

</div>

<div id="tel"> 

<p class="STYLE8"> </p>

<p align="left" class="STYLE8"> 公司地址</p>

<p align="left" class="STYLE11">北京东城区</p>

<p align="left" class="STYLE11">国贸大厦18楼1820号</p>

<p align="left" class="STYLE10"> Tel：010-1234567</p>

<p align="left" class="STYLE10"> </p>

</div> 

</div> 
新建一个静态页，删掉里面的代码，把上面的代码粘贴进去，另存为nav5.html（各个页面的二级导航不同，这里的nav是sub5，也就是第五个栏目“新闻中心”的二级导航）
（5）右边的红灯笼部分
这部分内容非常简洁，很容易辨认。导出后另存为right_edge.html
<div id="right_edge">

<div id="r1"></div>

<div id="r2"></div>

</div> 
（6）footer部分
footer部分边界清晰，非常容易辨认。导出后另存为footer.html
<div id="footer">

<p class="STYLE14">俏江南饮食服务有限公司 2012 版权所有京ICP 000123456号</p>

<p class="STYLE14"> </p>

<p><span class="STYLE14">South Beauty restaurant Co., Ltd. 2012 all right reseverd? <a href="qjn@163.com
mailto:qjn@163.com">qjn@163.com</a></span></p>

</div>

2.创建动态页
因为上述这个公共部分需要用include的形式才能导回到页面，而静态页并不认识include代码，所以们需要创建一个动态页。
在dw下新建一个动态页（VBScript）。切换到代码视图

可以看到，动态页和静态页相比，除了文件本身的扩展名之外，代码里面最上面多了一行代码，其他的没有什么区别。
（1）拷入样式
回到原网页，在两个head之间找到类似如下代码
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">



</style>
其中，最上面的一句“<link href="style.css" rel="stylesheet" type="text/css" />”是导入相应的样式表文件，这个文件是我们在设计过程中不断创建的，下面的部分是我们生成的内嵌样式，主要是在修改左变靠下的电话号码和公司地址信息的时候直接在属性栏里修改样式得到的。这种嵌入在网页中的样式，我们并不提倡，因为它会使得网页中样式代码比例太多，影响内容文字所占的比例，进而影响到SEO的质量。以后大家要加以注意，尽量不要图省事，产生这种代码。
大家可以把这些内容剪切出来，从.style7开始到</style>之前，然后打开样式表文件，把代码粘贴到样式表文件的最后，最后把<style type="text/css">和</style>删除掉（这两行标志样式代码的开头和结束。里面的样式代码拷出后就没什么用处了），这样在网页中，代码部分看起来就干净多了。

修改过以后的网页代码头部

CSS文件（尾部）

可以看到刚才拷贝过来的代码。从style7到style14

把原网页<head></head>之间剩下的<link href="style.css" rel="stylesheet" type="text/css" />

拷贝出来，拷贝到新建的动态页同样的位置。样式文件导入即告完工，下面我们开始导入内容部分。
(2)在<body>后面先写入如下代码
<div id="container">
<div id="main">
</div>
</div>

进一步的修改，将上面我们生成的各个页面导入进来，注意br的使用和页面的整体结构。
div id="container">
<div id="main">

<br>
<!--#include file="mind.html">
<!--#include file="nav5.html">
<div id="content">此处放内容</div>
</div>
<!--#include file="right_edge.html>
<br>
<!--#include file="footer.html>
</div>
回到设计视图中预览效果，在content里面随意敲入几个空行，将页面拉长。最终需要传到服务器上才能看到完整的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航