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