搜索
第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．制作父元素right19.4.4制作主体右侧内容中“关于我们”的部分•2．制作“关于我们”的部分•“关于我们”部分的显示效果如下图所示。19.4.5制作“今日新闻”部分•制作“今日新闻”部分，同样先添加新的元素，定义类名为news，并设置其参数。•页面新闻部分的显示效果如下图所示。19.4.6制作点拨和时评的部分•点拨和时评部分的样式基本相同，区别在于位置不同。可以使用两个浮动的元素，分别控制两个部分的位置。点拨和时评效果如下图所示。•1．点拨部分的制作•2．制作时评部分19.4.7制作“合作伙伴”部分•“合作伙伴”部分的制作分为以下几个部分。•1．制作“合作伙伴”部分的父元素•添加新的div元素，定义类名为partnership，并定义其样式。•2．内容的制作•“合作伙伴”效果如下图所示19.5制作首页的底部•首页的底部相对来说比较简单一些，主要由背景和居中的内容组成。其效果如下图所示。19.6二级页面的制作•从效果图中可以看出，首页和二级页面的头部、左侧、底部都是相同的，所以只需要更改首页右侧内容部分就可以了。二级页面的中间内容部分的效果图，如图19.102所示。19.7小结•如果说前面的案例全部是手写代码让你很头疼的话，那本章的制作方式就有点太简单了。Dreamweaver俗称网页剑客，就是专门用来轻松制作网页的工具。本章依据上一个案例的制作思路，通过Dreamweaver进行一些设置，可以自动生成网页所需要的HTML代码和CSS代码。