第13章 网站设计与制作综合实例

吕梁高等专科学校汾阳师范分校12020年1月31日网站规划与网页设计王建平[e-mail]213.1实例创意和效果展示13.2实例说明13.3设计过程13.4网站测试与性能分析第13章网站设计与制作综合实例3本实例讲解的是一个小型娱乐在线网站的制作过程，页面包括静态页面和动态页面，使读者将前面所学的知识有机地结合起来，并且能够在此基础上设计站点的其他功能，达到触类旁通的效果。静态页面部分主要包括主页和一些简单的链接页面，动态页面主要包括留言板的制作。整个站点页面的色调为淡蓝色，给人凉爽、清新的感觉，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。在页面的顶部是站标、广告条和常用的页面功能链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。如图13-1所示为网站的首页，因此“首页”的导航是展开的。在页面的左侧主要为聊天室登录区域和今日更新音乐区域；页面的中间是新闻区域和新碟推荐区域；页面的右侧是公告区域、音乐搜索区域和今日看点区域；在页面的底部是版权信息。13.1实例创意和效果展示4整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊。13.1实例创意和效果展示图13-1实例效果【例13】513.2.1技术要点1．站点的设计由于网站提供留言板，使用的是动态网站技术，因此除了建立一个本地站点之外，还要建立一个测试服务器。在本地站点中完成网页的设计，在测试服务器中测试网页的效果。2．页面属性的设置通过页面属性的设置，定义页面的标题、文字颜色和超链接的颜色。3．CSS样式的使用通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。4．表格的布局通过表格的布局，使页面的内容既丰富又整齐、清晰。13.2实例说明613.2.1技术要点5．脚本的应用通过JavaScript脚本的应用，实现公告中的滚动字幕特效；通过VBScript脚本的应用，实现留言板程序的设计。6．表单的制作通过表单的制作，为用户提供聊天室的登录窗口和搜索音乐的捷径。7．图像的使用在导航条的背景上、广告条上和新碟推荐区域中插入图像，使得整个页面充满动感。8．ASP数据库编程设计留言板时，采用ASP结合数据库编程管理留言信息，使站点具有交互功能。13.2实例说明713.2.2准备素材在设计本站点时，需要使用的素材包括以下4种。网站站标、广告条及导航条背景使用的GIF图像。公告字幕、新闻文字前边的GIF图像。新碟推荐中的明星JPEG图像。留言板中使用的留言板GIF图像。13.2实例说明813.3.1站点规划1．在IIS中建立虚拟目录在IIS中建立的虚拟目录别名为sample，对应的本地物理文件夹为G:\test，如图13-2所示。这里建立的虚拟目录所对应的物理文件夹将来就是作为测试服务器使用的，即本地站点中制作的页面最终要上传到测试服务器中进行验证。13.3设计过程图13-2在IIS中建立虚拟目录92．建立本地站点打开Dreamweaver8，执行“站点”→“管理站点”命令，打开站点定义对话框，新建一个名称为cool的站点，使用的本地文件夹为G:\fun，如图13-3所示。13.3设计过程图13-3建立本地站点103．建立测试服务器将分类切换到“测试服务器”类别，设置服务器模型为ASPVBScript，访问为“本地/网络”，测试服务器文件夹为G:\test（与IIS中物理文件夹的设置一致），HTTP地址为。在以上的设置中，一定要注意在HTTP地址中原来的之后添加上在IIS中设置的虚拟目录的别名sample，如图13-4所示。13.3设计过程11单击“基本”选项卡，对话框如图13-5所示。单击“下一步”按钮，在弹出的对话框中单击“测试URL”按钮。如果测试服务器设置正确，则弹出的对话框中将提示URL前缀测试已成功，如图13-6所示。单击“确定”按钮，完成测试服务器的定义。13.3设计过程图13-5站点定义对话框图13-6URL前缀测试已成功124．建立主页文件和相关文件夹在文件面板中，选择已经建立好的站点，单击鼠标右键，从快捷菜单中选择“新建文件”命令，定义主页文件名为index.htm。接着在站点上单击鼠标右键，从快捷菜单中选择“新建文件夹”命令，定义图像文件使用的文件夹image和留言板栏目的文件夹guest，如图13-7所示。13.3设计过程图13-7主页文件和相关文件夹1313.3.2制作主页1．CSS样式的设计（1）页面中的文字目前流行的大多数网页文字字体都是9pt大小的宋体，本页面同样采用这种字体，分别重新定义body、tr和td标签的CSS样式，字体为“宋体”、大小为9pt，如图13-8所示。13.3设计过程图13-8定义body、tr和td标签的CSS样式1413.3.2制作主页1．CSS样式的设计（2）表格边框细线的制作表格有两种用途：一种是纯粹为了布局使用的表格，其边框粗细为0；另一种是在布局的基础上显示细线风格的表格，可以使用CSS样式中的类定义细线边框，如图13-9所示。13.3设计过程图13-9使用CSS样式中的类定义细线边框1513.3.2制作主页2．制作页面顶部的广告条表格13.3设计过程图13-11向表格中添加图片和链接文字1613.3.2制作主页3．制作导航表格将光标定位在顶部表格的右侧，插入一个1行9列，宽度为760像素的表格。接着，将光标定位在导航表格的第一个单元格中，将这个单元格的背景图片设置为一个底色较浅的图片。其他单元格的背景分别设置为颜色较深的图片。最后分别输入9个导航链接文字，将链接地址暂时均设为#，效果如图13-12所示。13.3设计过程图13-12添加导航栏目1713.3.2制作主页4．制作主体内容的框架主体部分从左到右可以分为两个部分，左边是一个登录表单和一个今日更新音乐区域，右边是娱乐新闻、新碟推荐、本站公告、音乐搜索和今日看点5个栏目。将鼠标定位在导航表格的最右边，插入一个1行1列，宽度为760像素的分隔表格，该表格仅仅用于分隔导航表格和主体表格。然后，将鼠标定位在分隔表格的最右边，插入一个1行2列，宽度为760像素的表格。然后选中整个表格，将其背景色设为#3399ff，再将左侧单元格的宽度设为220像素，右侧单元格的宽度设为540像素。13.3设计过程1813.3.2制作主页5．制作主体表格左侧的内容将鼠标定位在主体表格的左侧单元格中，插入一个10行1列，宽度为220像素的表格。选中表格中的所有单元格，应用样式xixian，这样可以产生一个立体显示效果的表格，效果如图13-13所示。接下来，分别制作聊天室登录表单区域和今日更新音乐区域，制作比较简单，这里不再赘述，效果如图13-14所示。13.3设计过程图13-13设置左侧单元格的样式图13-14制作聊天室登录表单和今日更新音乐区域1913.3.2制作主页6．制作主体部分右侧单元格的内容分别制作最新娱乐新闻区域、新碟推荐区域、公告区域、音乐搜索区域和今日看点区域的内容，栏目布局如图13-15所示，栏目内容的制作过程这里不再赘述，读者可根据需要设计具体的内容，本实例的设计效果如图13-16所示。13.3设计过程图13-15制作主体部分的主要栏目图13-16制作主体部分的栏目内容2013.3.2制作主页7．制作底部的版权信息区域将鼠标定位在主体表格的最右端，插入一个1行1列，宽度为760像素的表格。在属性面板中将表格高度设置为40像素，表格内文字的对齐方式为居中对齐，输入使用浏览器的建议版本和版权信息，如图13-17所示。13.3设计过程图13-17制作底部的版权信息2113.3.3制作其他静态页面由于篇幅所限，这里只讲解QQ一族链接页面的实现方法。首先在站点根目录中建立一个qq.htm页面，然后制作一个QQ商城情侣购物中心的页面，并且建立主页和该页面之间的链接，效果如图13-18所示。此时，会发现该页面的风格与主页的风格不太一致，例如，超链接文字显示下划线等。13.3设计过程图13-18最初的页面效果2213.3.3制作其他静态页面其余的页面风格的设置同样也可以按照上述附加外部样式表的方法来实现。13.3设计过程图13-21附加外部样式表的效果2313.3.4制作留言板1．设计概要留言板是Internet上最基本的交互式网页，是网络上提供的一项基本服务，也是一个和浏览者交流、沟通的园地。它可以设计得很简单，纯粹只收集浏览者的资料和意见，也可以设计得很复杂，这取决于网页开发者的能力及需求。无论是主动地上网提问，还是被动地留下姓名、E-mail、留言及建议等，无不是留言板基本应用或其变形。本设计采用ASP作为开发工具，后台数据库采用Access数据库设计，利用ADO数据库访问技术实现对数据库的各种管理操作，实现留言板的留言及管理功能。13.3设计过程2413.3.4制作留言板2．选择设计方案实现网上留言的原理很简单，无非是为用户提供表单界面书写留言内容，并把这些留言信息加以保存，然后读取和显示留言。网上留言板可以有不同的实现方式，可以使用文件管理组件将留言数据存储到文本文件中，也可以使用ADO数据库访问组件将留言数据存储到数据库表中。设计留言板时，输入的界面并不难设计，主要是要考虑留言数据的存储问题。由于留言板上留言的数量可多可少，也就意味着数据量多寡不定。如果不提供查询留言历史功能的话，那么建议用文本文件保存数据即可。但若想让留言板有更强大的功能，则应使用数据库方式建立文件，这样将来进行查询、新增或删除都比较方便。考虑到留言数据管理的高效性和安全性，本设计采用数据库方式存储留言的内容来实现。13.3设计过程2513.3.4制作留言板3．留言板的主要模块和功能留言板的核心功能是在网络上提供让浏览者留言的功能。用户分为一般用户和管理员用户，一般用户可以浏览留言、发表留言，管理员可以管理用户留言和对留言板进行设置。制作留言板可以从客户界面和管理员管理界面两个角度考虑。所有用户都可以访问客户界面，包括显示留言和书写留言两个主要功能。管理员管理界面只能由该留言板的管理员访问和管理，可以由登录页面、删除留言等功能组成。除此之外，还需要对管理员管理界面设置安全机制。综合这些要求，留言板至少应该具有以下4个功能：留言的签写与保存功能；留言的读取与显示功能；留言的回复功能；管理员对留言管理的功能。13.3设计过程2613.3.4制作留言板3．留言板的主要模块和功能根据需求分析，留言板系统的模块主要包括签写与保存留言模块、读取与显示留言模块、回复留言模块和管理留言模块。其中，管理留言模块包括管理员登录模块编辑留言模块和删除留言模块。系统模块结构如图13-22所示。13.3设计过程留言板系统签写与保存留言读取与显示留言回复留言管理留言编辑留言删除留言管理员登录图13-22留言板系统模块结构图2713.3.4制作留言板4．数据库结构设计在编写留言板之前，首先要规划好留言板的数据库结构。数据库主要用于保存留言数据和管理留言数据的用户信息。这里，采用Access2000创建一个名为books的数据库，并在库中创建名为liuyan和admin的两个数据表，分别用于保存留言数据和管理留言数据，如图13-23所示。13.3设计过程图13-23留言板数据库的创建与结构2813.3.4制作留言板5．留言板设计实现过程本系统的设计过程主要包括以下4个部分：签写与保存留言模块设计、读取与显示留言模块设计、回复留言模块设计和管理留言模块设计。代码请参见实例。13.3设计过程29本网站采取的测试方法是先进行各模块测试，经过修改和调整通过以后，再进行总体测试。本网站采用的测试环境是：服务器采用的是WindowsXPProfessional操作系统+IIS信息服务管理，客户机采用的是Windows98/2000/XP操作系统+IE浏览器。测试的主要模块包括：留言的签写与显示、留言的回复