第19章 综合案例四：使用dreamweaver制作中文网站

《第19章 综合案例四：使用dreamweaver制作中文网站》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第19章综合案例四：使用Dreamweaver制作中文网站在制作网页时，使用可视化的开发工具，不但简单易用，而且可以大大提高站点开发的效率。这一章的内容主要是讲解怎样使用可视化开发工具Dreamweaver，进行标准网站的开发。其中包括一个完整的站点首页和一个二级页面的制作。19.1分析效果图在本实例中，同样也只讲解站点首页和一个二级页面的制作方法，其它页面的制作，可以参照类似的方法。其中站点首页的效果图，如图19.1所示。19.1分析效果图19.1分析效果图一个二级页面的效果图，如下图所示。19.1分析效

2、果图1．首页效果图的分析从图19.1可以看出，此时首页在纵向，可以分为三个部分：头部（包括logo部分和导航）、内容部分、底部。其中中间内容部分，又可以分为两个部分：左侧的公告热点信息等、右侧的“关于我们”、新闻列表和相关链接的部分。2．二级页面的分析二级页面和首页的结构基本相同，其中的区别在于，右侧的内容为新闻列表。19.2制作首页的切图在制作切图时，首先要区分出，页面内容和修饰的部分，然后分析出，哪些修饰部分是可以用CSS代码来实现的，哪些部分是可以用背景图片来实现的，哪些是需要知道详细宽度的。在制作切

3、图时，首先要把影响背景的文本内容去掉，同时要尽量减少图片文件的数量。制作好的首页切片，如下图所示。19.2制作首页的切图19.3制作站点首页头部做好准备工作后，就可以开始制作页面了。同前面章节的实例制作一样，首页头部也要分成几个部分进行制作。19.3.1首页头部的信息和基础样式的制作首先建立index.html页面。关于建立文件的方法，前面章节已经讲解过了，这里就不再讲解了。然后制作链接的样式文件。1．制作链接的外部样式文件2．设置页面属性19.3.2首页头部的分析首先还是对首页头部效果图进行分析，主要目的

4、是区分页面中内容和修饰的部分。头部的效果图，如下图所示。19.3.3首页头部logo和banner部分的制作从上一节的分析可知，首页头部结构比较简单，主要由两个用来显示背景的元素，和一个用来显示列表的元素组成的。其中导航列表以上的内容，分成两个部分，分别是logo部分和banner部分。首页头部logo和banner部分的制作效果如下图所示。19.3.3首页头部logo和banner部分的制作下面分别讲解详细的制作过程。1．制作logo元素的样式2．定义banner元素的样式19.3.4导航列表的制作导航列

5、表由两个部分组成的，分别是用来显示背景的父元素，用来显示导航内容的列表元素。导航列表的效果如下图所示。其具体的制作方法如下所示。1．父元素menu的制作2．列表元素的制作19.4制作首页的主体部分首页的主体部分可以分为两个部分，分别是左侧包含公告的侧栏部分，右侧含有新闻的内容部分。19.4.1分析主体部分效果图在制作之前，同样先要分析一下效果图，分清页面中的内容和修饰部分。主体部分的效果图，如下图所示。19.4.2制作主体部分的父元素主体部分的父元素主要定义元素的居中和背景。19.4.3制作主体左侧部分的样

6、式主体左侧部分分为三个部分来制作。1．left元素和公告部分的制作left元素是控制整个左侧内容的位置、宽度和高度的元素。left元素和公告页面的显示效果如下图所示。19.4.3制作主体左侧部分的样式2．制作热点推荐部分热点部分的显示效果如下图所示。19.4.3制作主体左侧部分的样式3．制作咨询热线部分咨询热线部分很简单，只需要添加一个div元素，同时定义好行高，在内容中将标题和联系电话，用换行符号分隔成两行就可以了。19.4.4制作主体右侧内容中“关于我们”的部分在制作右侧的具体内容之前，首先要制作控制所

7、有内容显示位置的父元素right。1．制作父元素right19.4.4制作主体右侧内容中“关于我们”的部分2．制作“关于我们”的部分“关于我们”部分的显示效果如下图所示。19.4.5制作“今日新闻”部分制作“今日新闻”部分，同样先添加新的元素，定义类名为news，并设置其参数。页面新闻部分的显示效果如下图所示。19.4.6制作点拨和时评的部分点拨和时评部分的样式基本相同，区别在于位置不同。可以使用两个浮动的元素，分别控制两个部分的位置。点拨和时评效果如下图所示。1．点拨部分的制作2．制作时评部分19.4.7

8、制作“合作伙伴”部分“合作伙伴”部分的制作分为以下几个部分。1．制作“合作伙伴”部分的父元素添加新的div元素，定义类名为partnership，并定义其样式。2．内容的制作“合作伙伴”效果如下图所示19.5制作首页的底部首页的底部相对来说比较简单一些，主要由背景和居中的内容组成。其效果如下图所示。19.6二级页面的制作从效果图中可以看出，首页和二级页面的头部、左侧、底部都是相同的，所以只需要更改首页右侧内容部分