第4章网页设计实战案例

第4章

网页设计实战案例内容简介本章将向读者介绍实际网页设计时所需掌握的各种技能。例如，首先需要了解网页设计的流程、选择一款合适的开发工具以及了常见的网页布局结构。接下来，需要掌握如何设计布局、使布局标准化的方法以及布局时的理论知识。最后通过3个实战案例讲解HTML中使用DIV结合CSS实现网页常见效果的方法。本章重点：了解网页设计流程熟悉常用的网页设计工具掌握Dreamweaver的基本操作熟悉常见网页布局结构掌握居中和自适应布局的设计了解网站重构的意义和方法理解区块的概念及定义方法掌握定位区块的方法了解空白边叠加产生的原因及解决方法4.1网页设计流程

为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。通过使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性，减小项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页，最后是上传和维护网站阶段。4.2网页设计工具

“工欲善其事，必先利其器。”

使用不同的网页设计工具并不会影响设计网页质量的好坏。但是，如果拥有一款功能强大、使用简单的网页设计工具往往会使我们的工作变得事倍功半，提高网页开发效率。下面介绍几款比较常用的网页设计工具。4.2.1记事本

使用Windows系统自带的记事本也可以编辑网页。只需要在保存文档时，以.html或者.htm为后缀名进行保存即可。使用记事本编辑网页，没有语法检查、没有代码格式化、没有自动提示，使网页开发非常困难，因此并不推荐使用，如图4-2所示。

图4-2记事本编辑HTML文档4.2.2FrontPage

FrontPage是微软公司出品的一款网页制作入门级软件。FrontPage作为一款中低端网页制作软件拥有广泛的用户群，FrontPage的特点是简单、易学、易用，正是这些特点吸引了绝大多数的网页设计初学者的眼光。FrontPage的多个版本中FrontPage2003被用户使用最广泛，其主界面如图4-3所示。4.2.3DreamweaverDreamweaver是Adobe公司的产品，它与Flash、Fireworks并称网页三剑客，是网页制作工具界的霸主。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。Dreamweaver的主界面如图4-4所示。4.2.3Dreamweaver

图4-4Dreamweaver主界面Dreamweaver主要有以下优点：最佳的制作效率Dreamweaver可以使用鼠标拖拽的方式快速的放入页面元素，它的智能提示的功能使你更加惬意的编写代码网站管理Dreamweaver使用网站地图可以很方便的管理站点资源和文件无可比拟的控制能力Dreamweaver是惟一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具集成动态开发语言Dreamweaver还集成了动态程序开发语言，完全支持对ASP、.NET、PHP、JS的基本语言和连接操作数据库的功能4.2.4实战——制作个人主页

在设计个人主页时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。另外可以使用图片和CSS样式来进行修饰效果。具体步骤如下：（1）打开Dreamweaver新建一个空白的HTML文件，保存为index.html。（2）在【标题】文本框中输入“欢迎光临我的主页”，按Ctrl＋S保存文档。在空白页面中右击，选择【页面属性】命令打开【页面属性】对话框，在对话框中设置【左边距】、【右边距】、【上边距】和【下边距】都为0，单击【确定】按钮，如图4-5所示。4.2.4实战——制作个人主页

图4-5设置页面属性和标题（3）单击【常用】选项卡中的【表格】按钮

，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100％，【边框宽度】为0像素，单击【确定】创建第一个表格，如图4-6所示。

图4-6插入1行1列表格

图4-7设置表格背景图片4.2.4实战——制作个人主页（4）单击选中这个单元格，在【属性】面板上设置单元格的高度为100。进入【拆分】视图，输入代码“background="images/header.gif"”为单元格设置一张背景图片，如图4-7所示。（5）在单元格中输入“我的个人主页”，然后在【属性】面板中设置【字体】为“黑体”，【大小】为28，【文本颜色】为#FDFDE0，如图4-8所示。图4-8设置标题文字的字体属性

图4-9设置1行6列表格属性4.2.4实战——制作个人主页(6）接下来制作导航栏目。单击【常用】选项卡中的【表格】按钮，创建第二个表格，设置为6列、间距为1。选择表格，在【属性】面板中设置表格的【行】、【列】、【宽】、【间距】、【边框】以及【背景颜色】为#006600，如图4-9所示。（7）单击第二个表格，然后单击标记<tr>选中该行，在【属性】面板中，设置【高】为18、【背景颜色】为#669900、【水平】对齐方式为“居中对齐”，【垂直】为“底部”、字体【大小】为12、【字体颜色】为#EFF6D6，如图4-10所示。

图4-10设置单元格属性

图4-11设置菜单文字4.2.4实战——制作个人主页（8）选中前5个单元格，设置它们的宽度为120，分别输入文字“我的日记”、“我的收藏”、“我的相册”、“我的朋友”和“给我留言”。（9）打开【页面属性】对话框，设置页面的【背景颜色】为#FDFDE0。单击【常用】选项卡中的【表格】按钮

，设置参数为1行2列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第三个表格。（10）将光标置于右边的单元格中，单击【常用】选项卡中的【图像】按钮，在打开的【选择图像源文件】对话框中，选择图像tree.jpg，单击【确定】按钮返回。（11）将光标置于左边的单元格，在【属性】面板中设置它的【垂直】对齐方式为“顶端”。单击【常用】选项卡中的【表格】按钮

，设置参数为4行1列，【表格宽度】为90%，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第四个表格。（12）将光标置于第一个单元格，输入文章标题，在【属性】面板中设置文字的大小、颜色、对齐方式以及单元格的高度、对齐方式等参数。（13）在第二个单元格中输入文章的正文，在【属性】面板中设置文字的大小和颜色。（14）将光标置于第3个单元格中，设置它的高度为50。单击【常用】选项卡中的【表格】按钮

，设置参数为1行7列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建一个嵌套表格。4.2.4实战——制作个人主页（15）将光标置于第4个单元格中，设置它的高度为50，输入版权信息。（16）至此个人网站的首页制作完成，按Ctrl＋S保存文档，再按F12就可以在IE窗口中预览网页效果了。4.3网页布局

网页设计已经渐渐走向成熟，毫无修饰的网站必定会很快地被人遗忘，所以在制作网站之前，首先要考虑网站的整体视觉效果。在网站整体视觉效果中，主要是网页的色彩搭配与网页布局。前者决定了浏览该网站的第一印象；而后者则决定网站中的信息是否为合理的安排。

下面向读者介绍常见的网页布局结构，设计居中和自适应网页布局的方法，以及DIV+CSS布局网页的内容。4.3.1常见网页布局结构网页设计也属于平面设计，所以平面设计中的构成原理同样适用于网页设计。网页布局可以从两方面理解，一种是结构布局，另一种是艺术布局。在介绍网页结构布局之前，先来了解网页布局的基本概念。页面尺寸与显示器大小及分辨率有关系，网页的局限性就在于网页无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给网页的页面范围变得越来越小。1．“国”字型网页布局“国”字型也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。2．拐角型网页布局拐角型结构与上一种只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧或者右侧是一窄列链接等，正文是在很宽的区域中，下面也是一些网站的辅助信息。3．左右框架型网页布局这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右侧是正文。4．封面型网页布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。4.3.2设计居中布局

布局的居中设计在目前网页布局中的应用非常广泛。所以，如何在CSS中设计居中的页面布局也是大多数开发人员首先要学的技能之一。要使用CSS实现让页面居中主要有两个基本方法：一个方法是使用自动空白边；另一个方法是使用定位和负值的空白边。1．使用自动空白边设计居中这种方法适用于让页面上的div容器在屏幕上水平居中。2．使用定位和负值的空白边设计居中与第一种方法类似，这种方法同样要定义容器的宽度。然后，将容器的position属性设置为“relative”，将left属性设置为“50%”，就会把容器的左边缘定位在页面的中间。4.3.3设计自适应布局

顾名思义，自适应布局是指页面中容器的大小会随着浏览器的大小自动调整。自适应布局可以分为浮动布局、流体布局和弹性布局三种。1．浮动布局在基于浮动的网页布局中，需要设置希望定位元素的宽度，然后再控制他们在调整时是向左或者向右进行浮动。浮动布局的经典应用分为两种情况：两列和三列的浮动布局。2．流体布局在浮动布局中都是使用像素为单位来定义宽度，因此这种布局类型又称为固定布局。在使用流体布局时，尺寸是使用百分数而是像素设置的。这样可以使流体布局能够相对于浏览器容器进行伸缩。3．弹性布局弹性布局是相对于字号（而不是浏览器宽度）来设置元素宽度的。通过以em为单位设置宽度，可以确保在字号增加时整个布局也跟着扩大。这可以将行保持在可阅读范围内，对于视力弱或有认知障碍的人尤其有用。4.3.4DIV+CSS重构网站布局

网站的重构可以理解为改变旧的HTML表格布局，使用新的符合Web标准的网站结构及代码改良的方式。将现有网站转向Web标准设计可以称之为网站重构。网站重构的意义在于建立良好的可扩充性，通过DIV布局来进行数据结构的设计便于以后更多DIV数据的扩充，而CSS对ID、CLASS这些元素的样式定义也使得可维护性大大提高。

与传统的表格布局页面相比，DIV+CSS方式的最大优势就是结构清晰、维护简单和易于理解。在这种方式中，DIV（层）负责在页面中表现内容的层次和结构，CSS则来控制内容表现方式和位置。4.4布局理论

所有CSS布局技术都是依赖于三个基本概念：定位、浮动和空白边的操作。不同的技术其实没有本质的差异，而且如果理解了这些概念，那么创建自己的布局和理解网页的结构也是相当容易的。通过上节对网布布局的介绍，本节详细介绍布局时所需掌握的理论知识。4.4.1区块的概念

理解区块的概念是理解DIV+CSS制作页面的基础，他控制页面中元素的安排和显示方式。需要注意区块的实际应用以及绝对定位和相对定位，掌握如何控制页面中的每个元素。

通常在使用CSS设计页面布局时，所有的页面元素都包含在一个矩形框内，称为元素框。元素框描述了元素及其在页面布局中所占的空间大小，因此元素框可以影响其他元素的位置及大小。例如，页面中第一个元素框为10px，那么下一个元素框就处于离顶部10px距离的位置。如果第一个元素框增加为20px，则下一个元素框就要再下移10px。而整个页面就是由这些个大大小小，但不会重叠的元素框形成的。4.4.2定义区块

我们知道，区块由内容、边距、填充及边框共同构成。除内容外，其他都是可选的，这就会产生一个问题。例如，对于div标记在IE6浏览器中会有2像素的边距，而其他浏览器则没有问题。解决方法是可以通过将元素的margin和padding设置为0来覆盖这个浏览器的默认值。实现时，可以分别进行，也可以使用通用选择器对所有元素进行设置。下面给出的是使用通用选择器时的CSS样式：*{ margin:0; padding:0;}

另外，在CSS中的width和height属性指的是内容区域的宽度和高度。增加边框、边距和填充不会影响内容区域的大小，但是会增加区块的总大小。假设，区块的每个边上有30像素的边距和20像素的填充，如果希望这个区块的宽度达到500像素，就需要将内容的宽度设置为400像素，CSS样式如下：4.4.2定义区块#Page{ width:400px; margin:30px; padding:20px;}

使用上述CSS样式后，Page容器所定义的区块宽度即达到500像素，图4-28中给出上述CSS样式的作用示意图。

图4-28定义区块4.4.3定位定位是CSS设计页面中的重要概念之一，用于控制页面元素的显示方式。如果习惯于用表格来控制布局，那么这些概念最初可能有点复杂，不宜理解。可通过在实际使用过程中逐渐掌握区块的复杂性，定位分为绝对定位和相对定位两种类型。1．绝对定位如果元素的定位类型为绝对定位，那么其显示的位置将参照浏览器左上角为开始点，其偏移方向及距离将配合边偏移属性的设定进行定位，并且是浮动正常元素之上的。定义了绝对定位的元素将固定于页面中的某个区域，而且不会随着页面变化而变化。

如果元素中还包含有边距和间隙，则元素的定位是在元素总的区域内根据绝对定位的边偏移属性值而设定的，如图4-29所示。图中的灰色区域显示了包含边距和间隙的元素块应用偏移属性在页面中的绝对定位。4.4.3定位2．相对定位

相对定位是以上级元素的原始点为参照点，然后再配合偏移属性对元素块进行定位。如果元素无上级元素，则以body元素为参照点；如果上级元素有边距或间隙属性，则参照点以上级元素的内容区域为原始点进行定位，如图4-30所示。图中显示了设定了边偏移属性的元素块，在应用相对定位之后是相对其上级元素的内容来进行定位的。图4-30相对定位示意图4.4.4实战——具有固定位置的广告框

很多网站通常会在页面中放置一些广告框，当然如果将广告作为页面模块显得不够醒目。所以很多站长喜欢把广告做成一直悬停在页面的侧边栏上。这样可以弥补页面的空白，也可以使广告更加醒目。

要实现上面的效果，通常做法是使用JavaScript控制广告模块的位置，这种做法有一种拖拽的延迟效果。其实利用布局中的绝对定位也可以使广告框固定在浏览器窗口的某一位置。这样在浏览器中页面滚动的时候广告似乎和窗口是浑然一体的，完全不会晃动。具体步骤如下：（1）创建一个名为position.html的HTML文件。（2）在文件所在目录下新建imgs目录存放网页的图片素材，新建css目录存放样式表文件。（3）在css目录中创建一个CSS样式表文件，命名为position.css。（4）修改position.css文件，添加样式表代码，如下所示：4.4.4实战——具有固定位置的广告框@charset"utf-8";/*CSSDocument*/#ad{ background-image:url(../imgs/ad_bg.gif); height:126px; width:211px; bottom:0; right:0; position:fixed; padding:9px; font-family:"宋体",Arial;}#adspan{ margin:00015px; font-size:14px; font-weight:700; color:#FFF;}#adulli{ color:#FFF; font-size:12px; padding:5px;4.4.4实战——具有固定位置的广告框<linkrel="stylesheet"type="text/css"href="css/position.css"/>

（5）打开position.html文件，在head部分引入刚才创建的CSS样式表文件，代码如下：（6）在页面body部分添加显示QQ群号信息的页面元素，代码如下：<divid="ad"><span>窗内QQ群号</span><ul><li>QQ群1：33925615</li><li>QQ群2：45368980</li><li>QQ群3：107423140</li><li>QQ群4：7858178</li></ul></div>4.4.4实战——具有固定位置的广告框（7）在position.html文件中添加其他的页面内容，最后保存文件。（8）在Chrome浏览器中运行position.html页面，运行结果如图4-31所示。

图4-31固定定位广告框运行结果4.4.5空白边叠加

简单来说，当两个垂直空白边相遇时，他们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的低空白边与第二个元素的顶空白边发生叠加。例如，下面的CSS样式代码：#Box1{ height:40px; border:1pxsolid#000; margin:30px; background-color:#CCC;}#Box2{ margin:30px; border:1pxsolid#000; background-color:#CCC; height:40px;4.4.5空白边叠加

两个元素的空白边叠加效果如图4-32所示。

图4-32空白边叠加

当一个元素包含在另一个元素中时（假设没有填充或边框将空白边分隔开），他们的顶和底空白边也会发生叠加。还有一种情况，假设有一个空元素，他有空白边，但是没有边框和填充。在这种情况下，顶空白边与底空白边就碰到了一起，此时也会发生叠加。4.5实战——制作网页导航条

每个网页都有一个导航条，它通常位于页面Logo的下方，呈水平方向显示。导航条可以使网站的结构比较清晰，更容易阅读和维护。本次实战将使用HTML中的ul列表元素配合CSS实现一个漂亮的网页导航条。具体步骤如下：（1）创建一个名为menu.html的HTML文件（2）打开menu.html文件并进行编辑，添加如下的导航条代码：（3）在HTML文件下创建css目录，并在css目录中创建一个名为style.css的文件。（4）编辑style.css文件，添加如下样式代码：（5）在menu.html页面的head部分中添加对CSS样式表文件style.css的引用，代码如下：（6）在Chrome浏览器中运行menu.html页面，运行结果如图4-34所示。4.6实战——制作文本环绕图片像很多报纸上的版块一样，一篇新闻往往附带一张或多张图片，这些图片多是对新闻内容的一个说明。为了将适当的图片放置到适当的位置上，而且又美观又节省页面资源，往往会使用文字环绕的效果布局页面。当然，很多网站或博客也大量使用这种方式布局网页。环绕效果节省了页面中大量的空白，使页面显得更加紧凑。下面我们利用布局的浮动实现一个文字环绕的图片效果。具体步骤如下：（1）创建一个名为index2.html的HTML文件。（2）打开index2.html文件并进行编辑，添加如下的页面代码：<divid="content"><imgsrc="imgs/15.jpg"class="box"/><p>下载是指通过网络进行传输文件，把互联网或其他电子计算机上的信息保存到本地电脑上的一种网络活动。下载可以显式或隐式地进行，只要是获得本地电脑上所没有的信息的活动，都可以认为是下载，如在线观看视频。</p><p>下载是指通过网络进行传输文件，把互联网或其他电子计算机上的信息保存到本地电脑上的一种网络活动。下载可以显式或隐式地进行，只要是获得本地电脑上所没有的信息的活动，都可以认为是下载，如在线观看视频。</p><p>下载是指通过网络进行传输文件，把互联网或其他电子计算机上的信息保存到本地电脑上的一种网络活动。下载可以显式或隐式地进行，只要是获得本地电脑上所没有的信息的活动，都可以认为是下载，如在线观看视频。</p></div>4.6实战——制作文本环绕图片（3）在css目录中创建一个CSS文件，命名为box.css。（4）编辑box.css文件，添加如下CSS样式代码：@charset"utf-8";body{ background-image:url(../imgs/float_bg.gif); padding:70px0050px;}#content{ font-size:13px; font-family:"宋体",Arial; color:#666; width:550px; line-height:21px;}#content.box{ float:right; width:173px; height:192px; margin:10px; border:2pxsolid#999;4.6实战——制作文本环绕图片（5）在index2.html页面的head部他引入box.css文件，代码如下：<linkrel="stylesheet"type="text/css"href="css/box.css"/>（6）在Chrome浏览器中运行index2.html页面，运行结果如图4-35所示。

图4-35文字环绕效果4.7实战——制作三列博客页面

我们曾经在网页设计中大量地运用表格来进行布局，而学习了DIV+CSS布局之后，我们要思考的是如何不用表格，而用DIV容器以及CSS和XHTML来控制实现一个不但文件体积小而且内容和页面更具亲和力的效果。本次实战我们来一步一步学习如何基于CSS建立一个包含三列的博客页面。为了方便讲解示例中使用了Dreamweaver工具，主要步骤如下：（1）执行【文件】|【新建】命令，打开【新建文档】对话框，选择【空白页】选项卡，【页面类型】选择HTML，【布局】选择“无”，在【文档类型】下拉列表框中选择XHTML1.0Transitional，单击【创建】按钮，如图4-36所示。4.7实战——制作三列博客页面

图4-36【新建文档】对话框（2）在【文档】工具栏【标题】文本框中输入“我的个人博客”，保存文档。首先创建基本的HTML结构，切换到代码视图和设计视图，在【文档】窗口中<body>标记内输入如下代码，如图4-37所示。基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。<divid="header"></div><divid="left"></div><divid="right"></div><divid="middle"></div><divid="footer"></div>4.7实战——制作三列博客页面

图4-37定义页面标题和结构

图4-38设置博客标题文字（3）在id为header的标记中输入文字，设为１级标题作为网页的标题内容，如图4-38所示。（4）在id为left的标记中输入“网站目录”，设为3级标题，然后插入无序列表，输入网站目录作为网页的左侧边栏，代码如下，如图4-39所示。<h3>网站目录</h3><ul><li><ahref="#">日志</url></a></li><li><ahref="#">相册</url></a></li><li><ahref="#">收藏</url></a></li><li><ahref="#">好友</url></a></li><li><ahref="#">群组</url></a></li><li><ahref="#">我参与</url></a></li><li><ahref="#">个人资料</url></a></li></ul>4.7实战——制作三列博客页面

图4-39设置左侧栏目内容

图4-40设置右侧栏目内容（5）在id为right的标记中输入“最近发表”，设为3级标题，然后插入无序列表，输入最新发表文章列表，作为网页的右侧边栏，如图4-40所示。（6）在id为middle的标记中输入文章的正文，标题设为2级标题，如图4-41所示。

图4-41设置文章标题和正文内容

图4-42设置页脚内容（7）在id为footer的标记中输入版权信息作为页脚，如图4-42所示。（8）现在我们有了一个完整的、没有经过修饰的XHTML文档，下面可以运用CSS来控制它的布局了。首先是调整<body>，设置边距和填充都为0，背景颜色为#BEBFC1，字体大小为12像素，行高为20像素。将文档切换到代码窗口，在<head>标记中输入如下代码，如图4-43所示。4.7实战——制作三列博客页面<styletype="text/css"><!--body{ margin:0px; padding:0px; background-color:#BEBFC1; font-size:12px; line-height:20px;--></style>

图4-43定义body样式4.7实战——制作三列博客页面div#header{ clear:both; height:50px; background-color:#D01F3C; padding:20px; vertical-align:middle; color:#FFFFFF;（9）接下来调整标题部分，用clear的属性确保浮动部分不会占据标题空间，标题部分的高度为50像素，背景颜色为#D01F3C，填充为20像素，并且设置字体颜色为白色和垂直居中显示。在style标记中加入如下代码，如图4-44所示。4.7实战——制作三列博客页面div#left{ float:left; width:150px; background-color:#FFFFFF; margin-top:20px; padding:5px; margin-left:5px;}

图4-44定义标题部分样式

图4-45定义左侧栏目样式（10）然后调整<left>使它浮动在页面左方，宽度为150像素，背景颜色为白色，上端距标题20像素，左边距5像素，填充5像素。在style标记中加入如下代码，如图4-45所示。

（11）调整<right>使它浮动在页面右方，宽度为150像素，背景颜色为#E9EBEF，上边距20像素，右边距5像素，填充5像素。在style标记中加入如下代码，如图4-46所示。div#right{float:right;width:150px;background-color:#E9EBEF; margin-top:20px; margin-right:5px; padding:5px;4.7实战——制作三列博客页面

图4-46定义右侧栏目样式

图4-47定义正文样式（12）此时已经可以看初步效果了，我们再来调整middle使布局看起来更合理一些。设置它的边距为0，上方填充0像素，下方填充5像素，左边和右边填充175像素。在style标记中加入如下代码，如图4-47所示。div#middle{ padding-top:0px; padding-right:175px; padding-bottom:5px; padding-left:175px; margin:0px;4.7实战——制作