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

Dreamweaver8网页制作实例短训教程 机械工业出版社同名教材配套电子教案2007 1 1 9 1课前导读9 2课堂教学9 3上机操作9 4课后作业 第9课网站设计与制作综合实例 2 在前面章节讲解的基础上 本课讲解网站从规划设计到制作实现 测试发布的全部过程 通过本课的学习 进一步加强用户进行网站设计与制作的综合应用能力 学习中要注意上机实际操作与理论的结合 做到如下3点 对每一种操作方法都要上机多实践 上机前进行预习 课后作业认真完成 结合一些基本概念 进行上机操作练习 9 1课前导读 3 9 2 1实例创意和效果展示本实例讲解的是一个小型汽车资讯网站的制作过程 页面包括静态页面和动态页面 使读者将前面所学的知识有机地结合起来 并且能够在此基础上设计站点的其他功能 达到触类旁通的效果 静态页面部分主要包括主页和一些简单的链接页面 动态页面主要包括客户信息管理的页面制作 整个站点页面的色调为淡蓝色 给人凉爽 清新的感觉 将蓝色与白色混合 能体现柔顺 淡雅 浪漫的气氛 精美的表格线条使整个页面显得华丽而整洁 如图9 1所示为网站的首页 页面的顶部是站标 广告条和常用的功能链接 接着下面是导航部分 整个页面总共有7个导航链接 在页面的左侧主要为汽车社区登录区域 聊天室登录区域和友情链接区域 页面的中间是新闻区域 新车推荐区域和汽车鉴赏区域 页面的右侧是公告区域 汽车搜索区域和汽车贴士区域 在页面的底部是版权信息 9 2课堂教学 4 9 2 1实例创意和效果展示 9 2课堂教学 例9 1 5 1 技术要点 1 站点的设计由于网站提供客户信息管理功能 使用的是动态网站技术 因此除了建立一个本地站点之外 还要建立一个测试服务器 在本地站点中完成网页的设计 在测试服务器中测试网页的效果 2 页面属性的设置通过页面属性的设置 定义页面的标题 文字颜色等 3 CSS样式的使用通过CSS样式的使用 改变文字的显示风格和表格的框线风格 使界面更加美观 9 2课堂教学 6 4 使用布局表格布局通过布局表格布局 使页面的内容既丰富又整齐 清晰 5 脚本的应用通过JavaScript脚本的应用 实现公告中的滚动字幕特效和其他页面中的特效 6 表单的制作通过表单的制作 为用户提供汽车社区 聊天室的登录窗口和搜索汽车的捷径 7 图像的使用在站标 广告条上和新车推荐区域中插入图像 使得整个页面充满动感 8 设计动态Web页面通过Dreamweaver结合Access数据库设计动态Web页面 实现客户信息管理的功能 使站点具有交互功能 9 2课堂教学 7 2 准备素材在设计本站点时 需要使用的素材包括以下3种 网站站标 广告条使用的GIF图像 公告字幕 新闻文字前边的GIF图像 新车推荐中的汽车JPEG图像 9 2课堂教学 8 9 2 3设计过程设计的过程总体上包括站点规划 网页制作和网页测试三个环节 其中的网页制作部分是整个设计的核心 1 站点规划本实例的站点规划包括在IIS中建立虚拟目录和在Dreamweaver中建立本地站点 测试服务器 建立主页文件 图像文件夹image 音乐文件夹music 视频文件夹video及数据库存放的文件夹data 2 制作主页 1 CSS样式的设计本站点的CSS样式定义在一个名字为style css的外部样式表文件中 目的是将该文件中定义的风格应用到本站点的所有页面中 以便对站点的风格进行统一的管理 9 2课堂教学 9 2 设计页面布局为了使网页在浏览器中居中对齐 在制作页面之前 首先单击 属性 面板中的 居中对齐 按钮使页面在浏览器中居中对齐 然后使用布局表格和布局单元格设计页面布局 页面布局主要包括以下几个主要布局表格 广告条布局表格导航条布局表格分隔条布局表格汽车社区 聊天室和友情链接布局表格页面主体布局表格版权信息布局表格 9 2课堂教学 10 2 设计页面布局布局表格在标准模式下的显示如图9 7所示 在布局模式下的显示如图9 8所示 9 2课堂教学 11 3 制作广告条广告条由3部分组成 左面的站标 中间的广告动画和右边的网站常用链接文字 完成后的效果如图9 9所示 9 2课堂教学 12 4 制作导航条主页共包含7个导航条按钮 链接的页面都是前面章节中的实例 分别是 首页 链接的页面是index asp 汽车广告 链接的页面是cxtx html 汽车评测 链接的页面是word html 汽车视听 链接的页面是enjoy html 汽车销售 链接的页面是carsale html 汽车相册 链接的页面是showcar html 客户信息 链接的页面是custom asp 在此使用的是插入Flash按钮的方法实现的 完成后的效果如图9 10所示 9 2课堂教学 13 4 制作导航条 9 2课堂教学 14 5 制作分隔条在导航条与网页主体内容之间一般需要设置一个空白的表格 这样设计能使页面更加美观 完成的效果如图9 11所示 9 2课堂教学 15 6 制作汽车社区 聊天室和友情链接将光标定位于页面左侧的表格中 使用表单技术制作汽车社区和聊天室 最后在表格的下方制作其他汽车网站的友情链接 完成的效果如图9 12所示 9 2课堂教学 16 7 制作页面主体内容页面主体内容包括 汽车新闻 本站公告 新车推荐 汽车搜索 汽车鉴赏和汽车贴士6个版块 完成后的效果如图9 13所示 9 2课堂教学 17 8 制作版权信息版权信息通常都是一些关于建议使用的浏览器分辨率和版权所有的声明 制作比较简单 完成后的效果如图9 14所示 9 2课堂教学 18 9 制作表格细线风格以上步骤制作完后 页面中的表格并不能自动套用使用CSS定义的细线风格 接下来 对页面中的表格和单元格套用 xixian样式 完成后的效果如图9 15所示 9 2课堂教学 19 10 统一站点风格站点中其他页面的风格与主页的风格不太一致 例如 超链接文字显示下划线等 因此 必须将样式表应用于其他页面 使整个站点风格一致 9 2课堂教学 20 3 网站测试与性能分析网站测试与传统的软件测试不同 它不但需要检查和验证网站是否按照设计的要求运行 而且还要测试系统在不同用户的浏览器端的显示是否合适 更为重要的是 还要从最终用户的角度进行安全性和可用性测试 然而 Internet和Web媒体的不可预见性使网站的测试变得困难 网站测试主要包括以下方面 1 链接测试链接是Web应用系统的一个主要特征 链接测试可分为三个方面 首先 测试所有链接是否按指示链接到了该链接的页面 其次 测试所链接的页面是否存在 最后 保证Web应用系统上没有孤立的页面 所谓孤立页面是指没有链接指向该页面 只有知道正确的URL地址才能访问 链接测试必须在集成测试阶段完成 也就是说 在整个Web应用系统的所有页面开发完成之后进行链接测试 9 2课堂教学 21 2 表单测试当用户给Web应用系统管理员提交信息时 就需要使用表单操作 例如用户注册 登陆 信息提交等 在这种情况下 必须测试提交操作的完整性 以校验提交给服务器的信息的正确性 例如 用户填写的出生日期与职业是否恰当 填写的所属省份与所在城市是否匹配等 3 设计语言测试网站设计语言版本的差异可以引起客户端或服务器端严重的问题 例如 使用哪种版本的HTML等 除了HTML的版本问题外 不同的脚本语言 例如Java JavaScript ActiveX VBScript或Perl等也要进行验证 9 2课堂教学 22 4 数据库测试在使用了数据库技术的网站中 一般情况下 可能发生两种错误 分别是数据一致性错误和输出错误 数据一致性错误主要是由于用户提交的表单信息不正确而造成的 而输出错误主要是由于网络速度或程序设计问题等引起的 针对这两种情况 可分别进行测试 5 连接速度测试浏览者或许是电话拨号上网 或许是宽带上网 连接到网站的速度因不同的上网方式而不同 当下载一个程序时 用户可以等较长的时间 但如果仅仅访问一个页面就不会这样 如果网站响应时间太长 例如超过5秒钟 用户就会因没有耐心等待而离开 9 2课堂教学 23 6 负载测试负载测试是为了测量网站在某一负载级别上的性能 以保证网站在需求范围内能正常工作 负载级别可以是某个时刻同时访问网站的用户数量 也可以是在线数据处理的数量 负载测试应该安排在网站发布以后 在实际的网络环境中进行测试 因为一个企业内部员工 特别是项目组人员总是有限的 而一个网站能同时处理的请求