网站设计与制作综合实例.ppt

1、网站规划与网页设计,电子工业出版社同名教材 配套电子教案 2009.9,14.1 实例创意和效果展示 14.2 实例说明 14.3 设计过程 14.4 网站测试与性能分析 14.5 网站的发布,第14章 网站设计与制作综合实例,本实例讲解的是一个小型诗词欣赏网站的制作过程，页面包括静态页面和动态页面，使读者将前面所学的知识有机地结合起来，并且能够在此基础上设计站点的其他功能，达到触类旁通的效果。静态页面部分主要包括主页和一些简单的链接页面，动态页面主要包括在线留言的制作。整个站点页面的主色调为绿色，给人凉爽、清新的感觉，将绿色与白色混合，能体现优雅、舒适的气氛，精美的表格线条使整个页面显得简练

2、而整洁。 在页面的顶部是站标、广告条和常用的页面功能链接。接着下面是导航部分，整个页面总共有7个导航按钮，除了“网站首页”导航按钮之外，其余的按钮分别对应这个小型站点的6个版块。如图14-1所示为网站的首页。在页面的左侧和中间是诗词欣赏的栏目区域；页面的右侧是公告区域、站内搜索区域；在页面的底部是诗词书展图片和版权信息。,14.1 实例创意和效果展示,本实例采用的网页模型是前面章节中生成的网页模型，然后在该模型的基础上添加网页元素，细化网站内容。整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊。,14.1 实例创意和效果展示,图 实例效果,14.2.1 技术要点 1站点的设计 由于网站

3、提供留言板，使用的是动态网站技术，因此除了建立一个本地站点之外，还要建立一个测试服务器。在本地站点中完成网页的设计，在测试服务器中测试网页的效果。 2CSS样式的使用 通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。 3表格的布局 通过表格的布局，使页面的内容既丰富又整齐、清晰。 4脚本的应用 通过JavaScript脚本的应用，实现公告中的滚动字幕特效；通过VBScript脚本的应用，实现在线留言程序的设计。 5表单的制作 通过表单的制作，为用户提供站内搜索诗词的捷径。,14.2 实例说明,6图像的使用 在网站Logo、广告条上和新书展示区域中插入图像，使得整个页面

4、充满动感。 7ASP数据库编程 设计留言板时，采用ASP结合数据库编程管理留言信息，使站点具有交互功能。 14.2.2 准备素材 在设计本站点时，需要使用的素材包括以下4种。 网站Logo使用的GIF图像、广告条使用的SWF动画。 公告字幕、诗词链接文字前边的GIF图像。 新书展示中的图书JPEG图像。 读书相册中的照片JPEG图像。,14.2 实例说明,14.3.1 站点规划 1在IIS中建立虚拟目录 在IIS中建立的虚拟目录别名为sample，对应的本地物理文件夹为D:webtest ，如图所示。这里建立的虚拟目录所对应的物理文件夹将来就是作为测试服务器使用的，即本地站点中制作的页面最终要

5、上传到测试服务器中进行验证。,14.3 设计过程,图 在IIS中建立虚拟目录,2建立本地站点 打开Dreamweaver，执行“站点”“管理站点”命令，打开站点定义对话框，新建一个名称为poem的站点，使用的本地文件夹为D:webex14 ，如图所示。,14.3 设计过程,图 建立本地站点,3建立测试服务器 将分类切换到“测试服务器”类别，设置服务器模型为ASP VBScript，访问为“本地/网络”，测试服务器文件夹为D:webtest （与IIS中物理文件夹的设置一致），HTTP地址为http:/localhost/sample。在以上的设置中，一定要注意在HTTP地址中原来的http:/

6、localhost/之后添加上在IIS中设置的虚拟目录的别名sample，如图所示。,14.3 设计过程,单击“基本”选项卡，对话框如图所示。单击“下一步”按钮，在弹出的对话框中单击“测试URL”按钮。如果测试服务器设置正确，则弹出的对话框中将提示URL前缀测试已成功，如图所示。单击“确定”按钮，完成测试服务器的定义。,14.3 设计过程,图 站点定义对话框 图 URL前缀测试已成功,4建立主页文件和相关文件夹 在文件面板中，选择已经建立好的站点，单击鼠标右键，从快捷菜单中选择“新建文件”命令，定义主页文件名为index.html 。接着在站点上单击鼠标右键，从快捷菜单中选择“新建文件夹”命令

7、，定义图像文件使用的文件夹images和留言板栏目的文件夹guest。,14.3 设计过程,14.3.2 制作主页 1CSS样式的设计 （1）页面中的文字 目前流行的大多数网页文字字体都是11pt大小的宋体，本页面同样采用这种字体，分别重新定义、和标签的CSS样式，字体为“宋体”、大小为11pt，如图所示。,14.3 设计过程,14.3.2 制作主页 1CSS样式的设计 （2）表格边框细线的制作 表格有两种用途：一种是纯粹为了布局使用的表格，其边框粗细为0；另一种是在布局的基础上显示细线风格的表格，可以使用CSS样式中的类定义细线边框，如图所示。,14.3 设计过程,14.3.2 制作主页 2

8、修改页面顶部内容 3修改页面主体内容 4修改页面网站公告及站内搜索内容 5制作页面底部版权内容 14.3.3 制作其他静态页面,14.3 设计过程,14.3.4 制作留言板 1设计概要 留言板是Internet上最基本的交互式网页，是网络上提供的一项基本服务，也是一个和浏览者交流、沟通的园地。它可以设计得很简单，纯粹只收集浏览者的资料和意见，也可以设计得很复杂，这取决于网页开发者的能力及需求。无论是主动地上网提问，还是被动地留下姓名、E-mail、留言及建议等，无不是留言板基本应用或其变形。 本设计采用ASP作为开发工具，后台数据库采用Access数据库设计，利用ADO数据库访问技术实现对数据

9、库的各种管理操作，实现留言板的留言及管理功能。,14.3 设计过程,14.3.4 制作留言板 2选择设计方案 实现网上留言的原理很简单，无非是为用户提供表单界面书写留言内容，并把这些留言信息加以保存，然后读取和显示留言。网上留言板可以有不同的实现方式，可以使用文件管理组件将留言数据存储到文本文件中，也可以使用ADO数据库访问组件将留言数据存储到数据库表中。 设计留言板时，输入的界面并不难设计，主要是要考虑留言数据的存储问题。由于留言板上留言的数量可多可少，也就意味着数据量多寡不定。如果不提供查询留言历史功能的话，那么建议用文本文件保存数据即可。但若想让留言板有更强大的功能，则应使用数据库方式建

10、立文件，这样将来进行查询、新增或删除都比较方便。 考虑到留言数据管理的高效性和安全性，本设计采用数据库方式存储留言的内容来实现。,14.3 设计过程,14.3.4 制作留言板 3留言板的主要模块和功能 留言板的核心功能是在网络上提供让浏览者留言的功能。用户分为一般用户和管理员用户，一般用户可以浏览留言、发表留言，管理员可以管理用户留言和对留言板进行设置。 制作留言板可以从客户界面和管理员管理界面两个角度考虑。所有用户都可以访问客户界面，包括显示留言和书写留言两个主要功能。管理员管理界面只能由该留言板的管理员访问和管理，可以由登录页面、删除留言等功能组成。除此之外，还需要对管理员管理界面设置安全

11、机制。综合这些要求，留言板至少应该具有以下4个功能： 留言的签写与保存功能； 留言的读取与显示功能； 留言的回复功能； 管理员对留言管理的功能。,14.3 设计过程,14.3.4 制作留言板 3留言板的主要模块和功能 根据需求分析，留言板系统的模块主要包括签写与保存留言模块、读取与显示留言模块、回复留言模块和管理留言模块。其中，管理留言模块包括管理员登录模块编辑留言模块和删除留言模块。系统模块结构如图13-22所示。,14.3 设计过程,图13-22 留言板系统模块结构图,14.3.4 制作留言板 4数据库结构设计 在编写留言板之前，首先要规划好留言板的数据库结构。数据库主要用于保存留言数据和

12、管理留言数据的用户信息。这里，采用Access 2000创建一个名为books的数据库，并在库中创建名为liuyan和admin的两个数据表，分别用于保存留言数据和管理留言数据，如图所示。,14.3 设计过程,图 留言板数据库的创建与结构,14.3.4 制作留言板 5留言板设计实现过程 本系统的设计过程主要包括以下4个部分：签写与保存留言模块设计、读取与显示留言模块设计、回复留言模块设计和管理留言模块设计。 代码请参见实例。,14.3 设计过程,本网站采取的测试方法是先进行各模块测试，经过修改和调整通过以后，再进行总体测试。本网站采用的测试环境是：服务器采用的是Windows XP Profe

13、ssional操作系统+IIS信息服务管理，客户机采用的是Windows 98/2000/XP操作系统+IE浏览器。测试的主要模块包括：留言的签写与显示、留言的回复、管理员登录、留言的编辑与删除及留言信息的存储等。 由于大多数网站都是由一些专业人员设计的，相对于普通用户，专业人员对计算机和网络的理解更深刻，对网站的性能要求更高。但是，同时也要考虑到访问网站的大多数用户只是使用网络的一般功能，对网站的性能要求可能与专业人员不太相同。因此，网站的性能应切实满足普通用户的需要。所以，有许多成功的经验表明，让非专业人员参加网站的测试，工作效果有时更好，这些人会提出许多专业人员没有顾及到的问题或一些好的

14、建议。,14.4 网站测试与性能分析,网页设计好并在本地站点测试通过后，必须把它发布到Internet上形成真正的网站，否则网站形象仍然不能展现出去。要构建远程站点，必须知道ISP提供的主页空间是如何支持上传的。网页的上传一般是通过FTP软件工具连接Internet服务器进行上传的。FTP软件很多，有CutFtp、LeapFtp等，也可以使用Dreamweaver的站点管理器上传网页。 Dreamweaver内置了FTP上传功能，可以通过FTP实现在本地站点和远程站点之间的文件传输。,14.5 网站的发布,网页设计好并在本地站点测试通过后，必须把它发布到Internet上形成真正的网站，否则网站形象仍然不能展现出去。要构建远程站点，必须知道ISP提供的主页空间是如何支持上传的。网页的上传一般是通过FTP软件工具连接Internet服务器进行