DW网页设计—第19章综合案例四：使用Dreamweaver制作中文网站.ppt

19.6 二级页面的制作 从效果图中可以看出，首页和二级页面的头部、左侧、底部都是相同的，所以只需要更改首页右侧内容部分就可以了。二级页面的中间内容部分的效果图，如图19.102所示。 19.7 小结 如果说前面的案例全部是手写代码让你很头疼的话，那本章的制作方式就有点太简单了。Dreamweaver俗称网页剑客，就是专门用来轻松制作网页的工具。本章依据上一个案例的制作思路，通过Dreamweaver进行一些设置，可以自动生成网页所需要的HTML代码和CSS代码。 第19章 综合案例四：使用DREAMWEAVER制作中文网站 在制作网页时，使用可视化的开发工具，不但简单易用，而且可以大大提高站点开发的效率。这一章的内容主要是讲解怎样使用可视化开发工具Dreamweaver，进行标准网站的开发。其中包括一个完整的站点首页和一个二级页面的制作。 19.1 分析效果图 在本实例中，同样也只讲解站点首页和一个二级页面的制作方法，其它页面的制作，可以参照类似的方法。其中站点首页的效果图，如图19.1 所示。 19.1 分析效果图 19.1 分析效果图 一个二级页面的效果图，如下图所示。 19.1 分析效果图 1．首页效果图的分析 从图19.1可以看出，此时首页在纵向，可以分为三个部分：头部（包括logo部分和导航）、内容部分、底部。其中中间内容部分，又可以分为两个部分：左侧的公告热点信息等、右侧的“关于我们”、新闻列表和相关链接的部分。 2．二级页面的分析 二级页面和首页的结构基本相同，其中的区别在于，右侧的内容为新闻列表。 19.2 制作首页的切图 在制作切图时，首先要区分出，页面内容和修饰的部分，然后分析出，哪些修饰部分是可以用CSS代码来实现的，哪些部分是可以用背景图片来实现的，哪些是需要知道详细宽度的。在制作切图时，首先要把影响背景的文本内容去掉，同时要尽量减少图片文件的数量。制作好的首页切片，如下图所示。 19.2 制作首页的切图 19.3 制作站点首页头部 做好准备工作后，就可以开始制作页面了。同前面章节的实例制作一样，首页头部也要分成几个部分进行制作。 19.3.1 首页头部的信息和基础样式的制作 首先建立index.html页面。关于建立文件的方法，前面章节已经讲解过了，这里就不再讲解了。然后制作链接的样式文件。 1．制作链接的外部样式文件 2．设置页面属性 19.3.2 首页头部的分析 首先还是对首页头部效果图进行分析，主要目的是区分页面中内容和修饰的部分。头部的效果图，如下图所示。 19.3.3 首页头部LOGO和BANNER部分的制作 从上一节的分析可知，首页头部结构比较简单，主要由两个用来显示背景的元素，和一个用来显示列表的元素组成的。其中导航列表以上的内容，分成两个部分，分别是logo部分和banner部分。首页头部logo和banner部分的制作效果如下图所示。 19.3.3 首页头部LOGO和BANNER部分的制作 下面分别讲解详细的制作过程。 1．制作logo元素的样式 2．定义banner元素的样式 19.3.4 导航列表的制作 导航列表由两个部分组成的，分别是用来显示背景的父元素，用来显示导航内容的列表元素。导航列表的效果如下图所示。 其具体的制作方法如下所示。 1．父元素menu的制作 2．列表元素的制作 19.4 制作首页的主体部分 首页的主体部分可以分为两个部分，分别是左侧包含公告的侧栏部分，右侧含有新闻的内容部分。 19.4.1 分析主体部分效果图 在制作之前，同样先要分析一下效果图，分清页面中的内容和修饰部分。主体部分的效果图，如下图所示。 19.4.2 制作主体部分的父元素 主体部分的父元素主要定义元素的居中和背景。 19.4.3 制作主体左侧部分的样式 主体左侧部分分为三个部分来制作。 1．left元素和公告部分的制作 left元素是控制整个左侧内容的位置、宽度和高度的元素。 left元素和公告页面的显示效果如下图所示。 19.4.3 制作主体左侧部分的样式 2．制作热点推荐部分 热点部分的显示效果如下图所示。 19.4.3 制作主体左侧部分的样式 3．制作咨询热线部分 咨询热线部分很简单，只需要添加一个div元素，同时定义好行高，在内容中将标题和联系电话，用换行符号分隔成两行就可以了。 19.4.4 制作主体右侧内容中“关于我们”的部分 在制作右侧的具体内容之前，首先要制作控制所有内容显示位置的父元素right。 1．制作父元素right 19.4.4 制作主体右侧内容中“关于我们”的部分 2．制作“关于我们”的部分 “关于我们”部分的显示效果如下图所示。 19.4.5 制作“今日新闻”部分 制作“