知否论坛设计与实现.doc

第 1 页 共 25 页 课课 程程 设设 计计 题 目（中文） 知否论坛设计与实现 姓 名杨涛武 龙飞帆 学 号201303801033、201303801034 院 （系）网络传媒系 专业、 年级网络新闻编辑1301班 指导教师文林彬 二一四年 九九 月 第 2 页 共 25 页 网络传媒系网络传媒系 20142014 年课程设计方案年课程设计方案 学生姓名 杨涛武、 龙飞帆 学号 201303801033 、20130380103 4 专业、班 级 网络新闻编辑 1301 班 课程设计选题 知否论坛的制作与实现 设计目标： 本网站建设目标就是想要为更多享受生活的人们提供一个便捷、快速、高效的平台，提 供人们所需的信息。 设计内容：设计内容： 本网站设有 15 页面，分别为首页、登陆、注册、编辑推荐、提问、话题广场、各个问题子 页面。从各个方面体现网站。 首页：主要设有大型 banner 及其梅赛德斯奔驰的历史简介。 车款：主要以图片为主，从 AB、C、 CLS、E、G、GL、GLK、M、R、S、SL、SLS、AMG 每一款 车型照片，加以链接。 奔驰天下：设有六个链接分别介绍奔驰天下、传承历史、奔驰新闻、企业社会责任、创新科 技与环保、壁纸电视&广告全方位让查看着了解。 车主专区：主要从车辆的维修保养着手，充分介绍汽车专业配置及其套餐服务。 金融服务：租赁业务、保险业务、售后市场活动。为车主或即将购买的车主提供更好的专业 服务。 认证二手车：全面介绍联系梅赛德斯-奔驰认证二手车的权威，及其它的优势。 设计进程：（设计的主要步骤及计划进程安排） 2014 年 9 月 2 号： 确定网站主题，收集资料。 2014 年 9 月 3 号： 初步确定网站形式；撰写设计方案。 2014 年 9 月 4 号：制作网站首页。 2014 年 9 月 5 号：制作子页大概框架。 2014 年 9 月 6 号：美化子页。 2014 年 9 月 7 号：美化子页。 2014 年 9 月 8 号：检查连接。 2014 年 9 月 8 号：网站制作完成，修整方案，准备答辩。 指导老师意见： 签名： 第 3 页 共 25 页 填报日期： 年 月 日 第 4 页 共 25 页 目 录 1 需求分析 1.1 知否论坛网站网络需求 2 技术应用 2.1 DREAMWEAVER 介绍. 2.2 PHOTOSHOP 介绍. 3.1 系统描述 3.2 网站前台系统 3.2.1 可行性分析 10 4 网站设计 4.1 主页设计与实现 . 4.2 子页设计与实现 4.2.1 奔驰天下页设计与实现. 4.2.2 车主专区子页设计与实现. 4.2.3 金融服务子页设计与实现. 4.2.4 认证二手车子页设计与实现. 4.2.5 联系梅德赛斯-奔驰子页设计与实现 5 网站测试 总结 参考文献 第 5 页 共 25 页 网站设计与实现 学生姓名： 杨涛武 龙飞帆 指导老师：文林彬 湖南大众传媒学院网络传媒系 摘要 本网站设计的主要内容是通过 Dreamwerver 6 网页设计软件来制作网页中的文字、图像、 表格、表单、动画和视频等。Dreamwerver 6 是一款专业的 HTML 编辑器，用于对 web 站点、web 页 和 web 应用程序进行设计、编辑和开发。梅赛德斯-奔驰网站就是通过该软件建立。 关键词 Dreamwerver 6 论坛 第 页 共 25 页 1 需求分析 1.1 知否网站需求 一个人大脑中从未分享过的知识、经验、见解和判断力，总是另一群人非常想知道的东西。 我们论坛的使命是把人们大脑里的知识经验和见解搬上互联网，让彼此更好地连接。“知否 （ZhiFou）”一词本意“你知道么”，不仅生动地体现了其问答属性，而且取词文言文，显得古典优雅， 大方得体。知否论坛不同于“百度知道”或者“新浪爱问”这类即问即答类站，而是建立起了社会 网络，期望以关系社区形式来帮助用户找到更好的问题和答案。 在产品设计上，用户在社区内提出问题或解答，还可以 Follow 三项：其他用户、问题和话题 从关注人和关注事两个不同维度来更好的发现内容。在问题答案中，用户可以用类似 Digg 的 支持机制，给好的答案投票，将好的答案顶到页面靠上的位置。 任何人都能编辑任何人的提问，是一大特点。 相比回答，更在意引导用户“正确地提问”。不会在意显示提问者的身份（除非你上提问者的主 页查看），在我们看来，提问者是谁并不重要，重要的是问题本身。所以，“引导”无处不在。用户 之间可以互相修改对方的问题，对于提问“姿势”不对的“新手”，总会有老用户来修改你的问题。 第 页 共 25 页 2 技术应用 数据库处理在信息系统的研究中一直是非常重要的主题，然而，近年来，随着 World Wide Web(WWW)的猛增及 Internet 技术的迅速发展，使得数据库技术之时成为最热门技术之一。数据库 技术能使 Internet 应用超越具有早期应用特点的简单的发布。同时，Internet 技术提供了一种向用户 发布数据库内容的标准化的访问方法。这些技术没有脱离经典数据库技术的要求。它们只是加重了 数据库技术的重要性。 2.1 Dreamweaver 应用 Dreamweaver 是个原本由 Macromedia 公司所开发的著名网站开发工具。它有 HTML 编辑的 功能。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称， Dreamweaver 会自动更新所有链接。使用支援文字、HTML 码、HTML 属性标签和一般语法的搜 寻及置换功能使得复杂的网站更新变得迅速又简单。 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包 含 HomeSite 和 BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶 表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组， Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。 梅赛德斯-网站就是选用 Dreamweaver 作为制作网页的软件。在里面使用了 CSS 样式将页面 加以美化。 2.2 PHOTOSHOP 应用 Adobe Photoshop，简称“PS”，是一个由 Adobe Systems 开发和发行的图像处理软件。 Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行 图片编辑工作。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等； 也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的 用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 梅赛德斯-奔驰网站的图片大小，及其美化效果都使用了 Photoshop，网站中的背景图片的透明 度，及其 banner 部分都是经过 Photoshop 处理，在网站的建设中起到了相当大的作用。 3 系统描述 网站应具有良好的开放性、扩展性、完善的系统功能，能全面满足用户在查看资讯的需求。第 一阶段的建设以网站基本结构和系统管理平台搭建为主，整个应用软件系统符合网上信息发布与交 流需要，既为用户提供一个简单易用的浏览界面，也为管理员提供一个通用的、友好的、易扩展的 管理员界面，并对于以后进一步会员增值服务的开展具有灵活的扩展性。 第 页 共 25 页 3.1 网站前台系统 一、功能模块结构图 如下图 3-1，网站前台页面基本架构 图 3-1 前台系统结构图 二、功能描述 1、前台显示后台模块 1） 5） 2、站内搜索 网站的站内搜索功能对于用户获取网站信息具有非常重要的作用，尤其对于含有大量信息的网站， 本网站包含信息量大，设置站内搜索功能很有必要，为用户的浏览和获取信息提供便利。 3、论坛频道（留言板） 留言板页面上包括查看留言和填写留言。游客和注册用户都可以查看留言，但填写留言必须是注 册为雅致论坛的会员。 第 页 共 25 页 3.2.2 可行性分析 可行性分析（已具备的条件和待解决的问题；拟采取的研究方法、技术路线、实验方案等） 1、已具备的条件：资料的查询、计算机硬件的准备、对网络上流行并成功的网站的研究和体 会。 2、待解决的问题：页面的设计实现、数据源的建立、数据库的构建、数据库的连接及各个表 的创建。 3、拟采取的研究方法：本网站使用 jsp 作为后台开发环境、使用 Microsoft Access 作为数据库 来建立数据表。 第 页 共 25 页 4 网站设计 一个杰出的网站，和实体公司一样，也需要整体的形象包装和设计。准确的，有创意的形象设 计，对网站的宣传推广有事半功倍的效果。在网站主题和名称定下来之后，需要思考的就是网站的 形象。 一、主题定位一、主题定位 一个好的主题才能定位出一个好的网站，本网站采用“奔驰汽车”作为主题，其很好的与网站 所包含奔驰汽车历史、最新最权威于一体的信息内容相互融合。下面是网站版面布局： 搜索框 LOGO 车款、奔驰天下、车主专区、金融服务、认证二手车、联系梅赛德斯-奔 驰 banner 链接内容 结束语 表 4-1 版面布局设计框架 二、二、LOGOLOGO 的设计与的设计与 BANNERBANNER 条的设计条的设计 本网站的 LOGO 的设计如下： 图 4-2 Logo 图 设计好网站的标志(logo).首先需要设计制作一个网站的标志(logo)。就如同商标一样，logo 是站 点特色和内涵的集中体现，看见 logo 就让大家联想起站点。本网站的 Logo 以简单的网站名的中英 文相结合的方式融入到 GIF 广告条中。 图 4-3 banner 条的融合设计图 三、网站色彩设计三、网站色彩设计 本网站采用的是简单的两色调，以黑灰色为主，色调在黑灰之间自由搭配，色差严格控制在四 第 页 共 25 页 个色调之间。色彩的搭配要根据主题来确定，不同的主题选用不同的色彩。用黑白灰体现奔驰汽车 这种金属感。并适当融入“留白”，给人以无限想象空间，与丰富的资讯信息相对比。字体颜色的 设置也采用了白的，更好的与网站主体搭配。网站给人的第一印象来自视觉冲击，确定网站的标准 色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色 彩“是指能体现网站形象和延伸内涵的色彩。标准色标准色彩要用于网站的标志，标题，主菜单和 主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺 主。 四、网站字体设计四、网站字体设计 本网站的字体设计主要采用 12 号的宋体，和标准色彩一样，标准字体是指用于标志，标题， 主菜单的特有字体。一般我们网页默认的字体是宋体。 五、页面布局设计五、页面布局设计 本网站采用简单版面布局，以求与色彩与内容上的搭配。 六、浏览器和分辨率的选择六、浏览器和分辨率的选择 由于网站中融入大量 Flash，为考虑其浏览效果，则选择采用 IE 浏览器作为本网站特定浏览 器。其分辨率的选择是根据对窄屏显示器的适应，则采用 1024*800 的分辨率。 七、标签的重要性七、标签的重要性 meta 标签是内嵌在你网页中的特殊 html 标签，包含着你有关于你网页的一些隐藏信息。 Tab 标签不仅感官上给人舒服易操作的印象，也完全跟我们日常生活中使用的文件夹标签一样，所 以更容易让用户接受。使用 DIV 标签，建立层。用在代码段前，配合 ALING、VALIGN 使其设定水平 方向和垂直方向的位置。 八、八、CSSCSS 样式设计样式设计 第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的 速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。 第二，只要修改保存着网站格式的 CSS 样式表文件就可以改变整个站点的风格特色，在修改页 面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。 本网站根据自身需求制定多个样式表，使得网站页面更加美观，给人统一和比较整体的效果。 4.1 网站首页设计与实现 首页页面的设计上面是 logo 和广告 GIF 动态图片，首页下方主要设有关于奔驰历史起源 经典车型 等链接。目的在于让奔驰爱好者更加了解这个产品跟企业的文化背景。 下面是网页首页的设计方案： 序 列 项目布局内容配色效果大小 1站内搜索框首页页面右 上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250x 高 第 页 共 25 页 2Logo首页页面左 上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 4banner首页页面中 间 应用 Photoshop 将四张奔 驰汽车图片结合为 GIP 图 红 灰 蓝 动态宽 1015px 高 407px 5链接首页页面左 下角 设有五个超链接。分别设 有缘起、经典车型、赛车 历史及赛德斯-奔驰 125 周年等 黑色背 景 白 色字体 静态宽 300px 高 190px 结语：本页面的设计风格为国字型布局，页面颜色为黑白灰，页面宽为 1015px。链接部分为整个 页面的文字表达区，点击后相应会进入另一个页面，阐述奔驰的历史背景，产业文化。 页面效果图： 第 页 共 25 页 图 5-3 网站首页图 4.2 车款子页设计与实现 本网站的车款页面主要用来显示网站中的车款车型，每张车款图片加以链接，是本款系的价格，参 数及其网络评价。全方位介绍车款。 下面是车款页面设计方案： 序 列 项目布局内容配色效果大小 第 页 共 25 页 1站内搜索框车款页面右 上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo车款页面左 上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 4banner车款页面中 间 应用 Photoshop 将四张奔 驰汽车图片结合为 GIP 图 红 灰 蓝 动态宽 1015px 高 407px 5车款介绍车款页面中 下 设有 13 款车型，每款经 典车型都附有图片，没张 图片都加以超链接，链接 后会详细介绍车款的价格， 性能，参数，评价等一系 列内容。 灰 白 色 动态宽 300px 高 190px 第 页 共 25 页 图 5-5 车款页面效果图 4.2.1 奔驰天下子页设计与实现 本网站的奔驰天下模块主要用来显示网站中传承历史、奔驰新闻、企业社会责任、创新科技与环保、 壁纸电视&广告等。全方位让查看着了解。 奔驰天下页面设计方案： 序 列 项目布局内容配色效果大小 1站内搜索框奔驰天下右 上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo奔驰天下页 面左上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 第 页 共 25 页 4banner奔驰天下页 面中间 应用 Photoshop 将四张奔 驰汽车图片结合为 GIP 图 红 灰 蓝 动态宽 1015px 高 407px 5链接奔驰天下页 面左下角 设有 6 个链接，奔驰天下、 传承历史，以及社会责任 等 灰 白 色 动态宽 300px 高 190px 6页面预留空 间 奔驰天下右 下角 及时更新奔驰活动的一切 信息 灰 白静态宽 675px 高 800px 图 5-6 首页页面效果图 4.2.2 车主专区模块子页设计与实现 本网站的奔驰天下模块主要用来显示网站中维修保养，充分介绍汽车专业配置及其套餐服务。 车主专区页面策划方案： 序 列 项目布局内容配色效果大小 1站内搜索框车主专区右 上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo车主专区页 面左上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 4背景图车主专区页 面中上 应用 Photoshop 将四张奔 驰汽车图片结合为 GIP 图 红 灰 蓝 动态宽 1015px 高 407px 5页面二级导 航 车主专区页 面中间 设有三个专项服务，智能 生活、2014 新款、及其 高端零部件。 灰 白动态宽 900px 高 40px 6页面预留部 分 车主专区页 面中下 用大幅高清图片为背景， 设有奔驰的马达、轮胎等 零部件介绍。还有针对车 辆的套餐服务。页面中的 图片链接 css 效果浮动。 灰白动态宽 900px 高 600px 宽 900px 高 500px 7结束语车主专区页 面下方 黑色背 景 白 宽 900px 高 40px 第 页 共 25 页 色字体 车主专区页面效果图： 图 5-7 车主专区页面效果图 4.2.3 金融服务子页设计与实现 本网站的租赁业务、保险业务、售后市场活动。为车主或即将购买的车主提供更好的专业服务。 金融服务页面策划方案： 序 列 项目布局内容配色效果大小 1站内搜索框金融服务页 面右上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo金融服务页 面左上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 黑白静态宽 758px 高 87px 第 页 共 25 页 车、联系梅赛德斯-奔驰 的导航链接 4页面二级导 航 金融服务页 面中间 设有三个专项服务，租赁、 车险、售后服务等 灰 白动态宽 900px 高 30px 5贷款服务专 区 二级导航下 方 插入 8 行 2 列表格，分别 介绍贷款购车的详细内容。 其中所需一张宽 713px 高 228px 的图片 灰白动态宽 900px 高 710px 6 租赁专区同上同上同上同上同上 7车险专区同上同上同上同上同上 6结束语车主专区页 面下方 黑色背 景 白 色字体 宽 900px 高 40px 金融服务页面效果图： 第 页 共 25 页 图 5-8 金融服务页面效果图 4.2.4 认证二手车子页设计与实现 本网站全面介绍联系梅赛德斯-奔驰认证二手车的权威，及其它的优势等。 认证二手车页面策划方案： 序 列 项目布局内容配色效果大小 1站内搜索框认证二手车 页面右上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo认证二手车 页面左上角 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 4页面二级导 航 金融服务页 面中间 设有三个专项服务，租赁、 车险、售后服务等 灰 白动态宽 900px 高 30px 5贷款服务专 区 二级导航下 方 插入 8 行 2 列表格，分别 介绍贷款购车的详细内容。 其中所需一张宽 713px 高 228px 的图片 灰白动态宽 900px 高 710px 第 页 共 25 页 6结束语车主专区页 面下方 黑色背 景 白 色字体 宽 900px 高 40px 认证二手车效果图： 图 5-9 认证二手车页面效果图 5.2.5 联系梅赛德斯-奔驰子页设计与实现 联系梅赛德斯-奔驰页面策划方案： 序 列 项目布局内容配色效果大小 1站内搜索框联系梅赛德 斯-奔驰页面 右上角 运用表单并加入文本框， 旁边配上搜索小图标一张 加以链接 黑色静态宽 250px 高 30px 2Logo联系梅赛德 斯-奔驰页面 图片左边为奔驰标志右边 为梅赛德斯英文字母构成 黑色背 景 白 色字体 静态宽 289px 高 87px 3导航LOGO 图的 右侧 车款、奔驰天下、车主专 区、金融服务、认证二手 车、联系梅赛德斯-奔驰 的导航链接 黑白静态宽 758px 高 87px 4预留区联系梅赛德 斯-奔驰页面 设有三个专项服务，申请 试驾、下载产品手册及价 黑 灰 白 动态宽 1015px 高 450px 第 页 共 25 页 中间格表等、应用 让 图片进行移动 本网站方便客户一切需求，便于客服与客户之间的联系及其交流等。 图 5-10 联系梅赛德斯-奔驰页面效果图 第 页 共 25 页 5 网站测试 功能测试：功能测试： 1、链接测试 链接是 Web 应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页 面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该 链接的页面；其次，测试所链接的页面是否存在；最后，保证 Web 应用系统上没有孤立的页面，所 谓孤立页面是指没有链接指向该页面，只有知道正确的 URL 地址才能访问。 链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成， 也就是说，在整个 Web 应用系统的所有页面开发完成之后进行链接测试。 性能测试：性能测试： 1、连接速度测试 用户连接到 Web 应用系统的速度根据上网方式的变化而变化，他们或许是电话拨号，或是宽带 上网。当下载一个程序时，用户可以等较长的时间，但如果仅仅访问一个页面就不会这样。如果 Web 系统响应时间太长(例如超过 5 秒钟)，用户就会因没有耐心等待而离开。 另外，有些页面有超时的限制，如果响应速度太慢，用户可能还没来得及浏览内容，就需要重 新登陆了。而且，连接速度太慢，还可能引起数据丢失，使用户得不到真实的页面。 可用性测试：可用性测试： 1、导航测试 导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、 列表和窗口等；或在不同的连接页面之间。通过考虑下列问题，可以决定一个 Web 应用系统是否易 第 页 共 25 页 于导航：导航是否直观？Web 系统的主要部分是否可通过主页存取？Web 系统是否需要站点地图、 搜索引擎或其他的导航帮助？ 在一个页面上放太多的信息往往起到与预期相反的效果。Web 应用系统的用户趋向于目的驱动， 很快地扫描一个 Web 应用系统，看是否有满足自己需要的信息，如果没有，就会很快地离开。很少 有用户愿意花时间去熟悉 Web 应用系统的结构，因此，Web 应用系统导航帮助要尽可能地准确。 导航的另一个重要方面是 Web 应用系统的页面结构、导航、菜单、连接的风格是否一致。确保 用户凭直觉就知道 Web 应用系统里面是否还有内容，内容在什么地方。Web 应用系统的层次一旦决 定，就要着手测试用户导航功能，让最终用户参与这种测试，效果将更加明显。 2、内容测试 内容测试用来检验 Web 应用系统提供信息的正确性、准确性和相关性。 信息的正确性是指信息是可靠的还是误传的。例如，在商品价格列表中，错误的价格可能引起 财政问题甚至导致法律纠纷；信息的准确性是指是否有语法或拼写错误。这种测试通常使用一些文 字处理软件来进行，例如使用 Microsoft Word 的“拼音与语法检查“功能；信息的相关性是指是否 在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般 Web 站点中的所谓“相关 文章列表“。 3、浏览器测试 浏览器是 Web 客户端最核心的构件，来自不同厂商的浏览器对 Java、JavaScript、ActiveX、plug-ins 或不同的 HTML 规格有不同的支持。例如，ActiveX 是 Microsoft 的产品，是为 Internet Explorer 而设计的，JavaScript 是 Netscape 的产品，Java 是 Sun 的产品等等。另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。 不同的浏览器对安全性和 Java 的设置也不一样。 测试浏览器兼容性的一个方法是创建一个兼容性矩阵。在这个矩阵中，测试不同厂商、不同版 本的浏览器对某些构件和设置的适应性。 安全测试： Web 应用系统的安全性测试区域主要有： (1)现在的 Web 应用系统基本采用先注册，后登陆的方式。因此，必须测试有效和无效的用户 名和密码，要注意到是否大小写敏感，可以试多少次的限制，是否可以不登陆而直接浏览某个页面 等。 (2)Web 应用系统是否有超时的限制，也就是说，用户登陆后在一定时间内(例如 15 分钟)没有 点击任何页面，是否需要重新登陆才能正常使用。 (3)为了保证 Web 应用系统的安全性，日志文件是至关重要的。需要测试相关信息是否写进了 日志文件、是否可追踪。 (4)当使用了安全套接字时，还要测试加密是否正确，检查信息的完整性。 (5)服务器端的脚本常常构成安全漏洞，这些漏洞又常常被黑客利用。所以，还要测试没有经 过授权，就不能在服务器端放置和编辑脚本的问题。 本网站通过了功能测试、性能测试、可用性测试、安全测试，每一项测试指标严格按照程序标 准执行。可以成功的让每一个热爱奔驰的网名进行快速浏览，获取自己所需信息。 第 页 共 25 页 总结 这是我们在这两周实训上学到的体会到的，一个网站的建设有以下几点要求： 1.设定目标 网站建站流程开始先为网站设立一个目标，这个目标不是简单的，比如：我想做个漂亮的网站， 或者我想做个强大的网站。你要先问问自己，为什么我要做这个网站？然后想吸引哪些人去访问这 个网站？ 比如大部分的网站目标可能就是吸引潜在客户，然后购买公司的产品或者是服务。我们 应该对这个目标描述的再详细一些。本次我们所做的是一个奔驰汽车网站，针对人群为 26-46 岁之 间的有所成就的人群，所