课程设计报告网页设计与网站规划Word文件下载.docx

1、现在我们建立的这个网站，就是有关于恋爱的，名为“恋爱主义” ，主要是想通过这个网站，让更多的人了解正确的恋爱观，同时也可以分享一些恋爱感悟，让人知道一些恋爱技巧，为自己的恋爱过程增添一些趣味。而且我们的网站多以文章为主，所以在最终成型的网站中，文章会占很大一部分内容。2. 建设计划2.1 技术路线该课程设计中网页代码编辑和动画制作使用的技术为XHTML、CSS、和JavaScript、Flash，代码编辑涉及的软件为Adobe Dreamweaver CS4、图片制作及修改涉及的软件为Adobe Fireworks CS4、动画制作涉及的软件为Adobe Flash。而开发环境为Windows

2、 7.。2.2 开发计划 首先需要在小组内讨论，共同制定网页的框架结构，得出要做什么网页，由此而开始设计各网页的页面，画出草稿，然后再根据已设计出的网页页面，搜集资料（包括文字和图片），并对资料进行整理及再次编辑，还要开始绘制banner以及logo，接着就要开始分工（下部分会有详细的分工内容），代码编辑和文字编辑要同时开始，在这个过程中会多次进行沟通，以避免代码和文字、图片的不相符，同时还要根据做的网页，不时地添加或删减原设计，尽量达到完美。还要将全部的网页进行链接，然后要对网页进行测试，使其能通过web标准测试，并尽可能在多个操作系统下能够正常访问，在多个手机系统下实现基本访问，并能在多个

3、浏览器下能够正常表现。最后就是写出课程设计报告。2.3 人员分工2.3.1 网站结构：*2.3.2 页面设计：2.3.4 资料搜寻：2.3.5 代码编辑：2.3.6 文字编辑：2.3.7 图片及动画制作：2.3.8 课程设计报告：3. 网站结构与文件目录3.1 网站逻辑结构3.1.1 网站栏目结构3.1.2 网站文件层次图3.2 网站文件目录首页：文件均存在shouye中；恋爱通告：文件均存在lianaitonggao中；恋爱物语：文件均存在lianaiwuyu中；心灵脉搏：文件均存在xinlingmaibo中；樱空断点：文件均存在yingkongduandian中；爱与成长：文件均存在aiy

4、uchengzhang中；心理测试：文件均存在xinliceshi中；其他页面的文件也会存于相应的文件夹中4. 网页与关键元素设计理念4.1 网站设计理念4.1.1 设计风格本次的课程设计以“恋爱”为主题，整体风格走“清新”、“甜蜜”路线，不管是文字、图片，还是动画，都会以其为主，比如文字内容，会有恋爱短信、恋爱情书、恋爱故事、恋爱诗词，同时也会有一些有关恋爱的感悟、技巧等，还会有恋爱的小测试；图片方面，景和物会以“心”形和代表爱情（比如：玫瑰）东西或是两两相关的东西（比如：对戒）为主，人物则多用恋人牵手、拥抱，或是一眼就能看出两人是恋人关系的图片；动画也会与其有关，这个会在下面详细介绍。4.

5、1.2 色彩 恋爱，给人的感觉是甜蜜、幸福、多姿多彩，所以我们的网站的色彩会以粉色为主，但同时也会辅以其他的浅色系的颜色，使网页更加的缤纷多彩，虽然颜色多，但不会杂乱。每种颜色都有它独特的意义，同时，不同的搭配也会有不同的效果，而我们就是要让网页看起来很舒服，不会有什么突兀的感觉。4.2 关键元素设计理念4.2.1 Logo 我们的主题是“恋爱” ，而logo也就与其有关，它是用“心”拼成的一个大的“心” 。先打开Fireworks应用软件，在画布上划出一个心，在色彩处理上，用彩色充满，表示恋爱中的多姿多彩，然后，将这个心再粘贴、复制多次，再用它们重新拼成一个大的心，而这么多的心围在一起，就是

6、说恋爱时的男女双方，要多用心呵护他们之间的爱情。4.2.2 导航 导航共分为七项，分别是：首页、恋爱通告、恋爱物语、心灵脉搏、樱空断点、爱与成长和心理测试。其中，恋爱通告是要“大胆说出爱” ，“通告”的意义就在于此，所以这个栏目分为“恋爱短信”和“恋爱情书”；“恋爱物语”是说一些恋爱时的私语，包括“恋爱文章”、“恋爱诗词”和“恋爱名句” ；然后是“心灵脉搏” ，“脉搏”会让人想到跳动，从而联想到活力、激情、阳光，所以这个栏目分为：“火花四溅”和“幸福花海” ；恋爱中难免会有一些不愉快或者是不幸的结局，所以在“恋爱”的网站中也一定要有此类内容，“樱空断点”就是为此而设。樱花会让人看到一种凄美的爱

7、情，“断”又会让人联想到不美好的事，这就是这个栏目名称的由来，它又包含了两个子栏目“断桥残雪”和“空释恋空” ；还有“爱与成长” ，在恋爱过程中，恋人携手，一步步走来，总会有一些美好的回忆，同时也会有对未来的美好愿望，这个栏目就体现了这个含义，它包括：“回味过去”、“品味现在”和“展望未来三个子栏目；最后是“心理测试” ，这个栏目的主要目的是为了放松，它比较有趣味，会通过一个小的测试测测你“与众不同”的方面，当然，它并不一定真实，只是会用测试来达到让人放松的目的，4.2.3首页 首页共有六个模块：简短动画、推荐文章、推荐电影、青春校园、爱情语录、爱情散文。这六个模块，每个都被分别框起来，框的样

8、式也不同，其中的色彩也不同，而首页的背景又是白色，整体看起来，清新、简单，又不失可爱。4.2.4 动画Flash动画的名称是一千零一个愿望，它讲述了一对恋人相识、相知、相恋的故事：动画的开头是一个女孩独自走在车站内，接着，女孩想起了她和男孩相连的事-在一个冬天，男孩和女孩在网上相遇，他们开始相互倾诉，两人慢慢熟悉起来，然后，两人恋爱了，因为彼此，那个冬天不再寒冷。后来男孩因为一些事情，外出了，两人的联系少了，女孩渐渐感觉到了无比的寂寞，在经过内心斗争后，她踏上了寻找男孩的路。这个动画看起来很简单，但也精致，再加上音乐，整体看上去，很不错。当打开首页时，动画就会开始播放，而在打开别的网页时，它就

9、会自动停止，直到再次回到首页，一千零一个愿望的音乐就会再响起。4.2.5 电影 在首页中共推荐了五部电影，每部电影结局不同，有的痛失恋人，有的却又事业、爱情双丰收，无论如何，每一部都值得一看，下面选取了两部做出介绍：泰坦尼克号-为了寻找1912年在大西洋沉没的泰坦尼克号和船上的珍贵财宝价值连城的“海洋之心”宝石，寻宝探险家布洛克从沉船上打捞起一个锈迹斑斑的保险柜，不料其中只有一幅保存完好的素描一位佩戴着钻石项链的年轻女子。这则电视新闻引起了一位百岁老妇人的注意,老人激动不已，随即乘直升飞机赶到布洛克的打捞船上。原来她名叫罗丝道森，正是画像上的女子。她讲述了一段动人的爱情故事：萝丝在泰坦尼克号上

10、，因不想嫁给未婚夫卡尔，于是准备跳海自杀，被刚好得船票，登上这座豪华巨轮的杰克所救。杰克带她参加下等舱的舞会，给她画像.他们两人很快坠入情网，但是这份甜美的爱情还没过多久，历史上最重大的灾难之一，泰坦尼克号的沉没便发生了。他们刚刚萌生的爱情幼苗也历经生死的考验。最后，杰克为了救罗丝，为她取暖，鼓励她活下来，而自己却冻死在寒冷的海水里。罗丝得救了，她从没有忘记杰克，不仅仅是因为他们有一段凄美的爱情，还因为杰克给了她很多快乐，也给了她新的希望和未来律政俏佳人：艾莉-伍兹过着无忧无虑的生活，可以说她是应有尽有。她是一个来自热带夏威夷的女孩，女大学生联谊会会长，在她大学的日历上她是“六月小姐”，但首先

11、她是一个天生丽质的金发碧眼美女。艾莉正在与学校中最酷的男孩华纳恋爱，并一心一意想做他的新娘-华纳-亨廷顿三世夫人。但是，有一个问题使华纳对艾莉的求婚欲说还休，那就是：艾莉除了金发碧眼的美貌外实在没有什么可吸引人的。在洛杉矶艾伦-斯班林街对面长大对于某些人来说可能意谓着什么，但对东海岸贵族出身的华纳一家人来说什么也算不上。因此，当华纳打点行装前往哈佛法学院与一个预备班的旧情人团聚时，艾莉明白了自身的不足。她也竭尽全力考进了哈佛大学，决定要赢回华纳的心。但是法学院与她以前的舒适环境池边的草地、林荫道实在是天壤之别。艾莉有生以来第一次必须进行一场战斗-为了她心爱的人、为了她自己、也为了那些每天都无休

12、止地承受着羞辱的金发碧眼美女。自从选择律师的职业以后，艾莉积极刻苦进取，并用正义与社会中的种种丑恶现象作斗争，最终在一次法庭上的精彩审问不仅使案件水落石出，也一举成名，华纳-亨廷顿三世再次向她说爱，但被她宛然拒绝，她要开始属于她自己的新的生活。5. 各网页的功能描述5.1 首页功能：通过首页，可以大致了解网站的结构及内容。首页分为了banner、导航和主页部分。其中主页又分为六个板块：推荐文章-共有六篇，每一篇都会有一幅图片和一段简洁的文章的介绍；简短动漫-讲述的一对在网上相识的恋人的故事；推荐电影-共有五部，分别是泰坦尼克号、秋天的童话、罗马假日、爱情故事和律政俏佳人，这五部电影都有关于恋爱

13、，而泰坦尼克号则又是一部人们不得不看的爱情大片，当点击某一部电影时，就会出现该电影的介绍；青春校园-主要是一些青涩的校园恋爱故事；爱情语录-多是名人对待恋爱或是爱情的观点和经典语录；爱情散文-只看名字，也知道这是关于爱情的一些散文。而不论你想访问那个网页，或者是哪部分内容，这里基本上都有，可以任意访问。5.2 恋爱通告网页 “也许，你已有了男朋友（或女朋友），也许，你只有暗恋的对象，那么，请来这里，大声说出你的爱！”这就是这个网页最主要的功能，我们拽录了一些表白短信和热恋时的短信，还有情书，通过它们，可以感受到炙热的爱意。在这里，你也许会回想起自己的告白，或者是被告白的欣喜、惊讶、害羞，那应该

14、是一种很美好的回忆，哪能放在放在记忆的最深处呢？你也许还在暗恋某个人，那么看到这些，你还不行动起来，赶快去表白吗？5.3 恋爱物语网页 这个网页的主要功能在于“分享” ，分享别人的恋爱故事，分享古人的恋爱观，分享千古以来的唯美名句。从这些故事和诗句中，我们可以看到一个虽没有结局，但又美好回忆的唯美故事，可以知晓恋爱的四个阶段，可以倾听从古到今美好的声音，“衣带渐宽终不悔，为伊消得人憔悴” ，可以看到为爱的付出，“你念或者不念我，情就在那里不来不去” ，又让人看到情的坚定当然，如果你要写情书，也可以参考一些这里的句子哦。5.4 心灵脉搏网页 该网页的功能是图片欣赏。脉搏，这是一种跳动的感受，充满

15、活力，拥有激情，当然，最重要的就是，“心灵”中的浓浓爱意。看着这些图片，想象着，途中的主人公就是你和你的恋人，你们手牵着手，走在漫漫小路上，亲亲密密，偶尔，两人慢慢靠近，甜言蜜语，想必，那是一种享受吧。或者，你们来到汹涌澎湃的大海前，让他为你画幅画（让她为你照张照片），一起制造回忆，当你们老的时候，再看到这幅画（照片），那又是一种怎样的感受呢?现在的你，在看到页面上的这些图片时，想到要进行一次爱的旅行了吗？5.5 樱空断点网页 恋爱都是美好、甜蜜的，但同时也会有一些不愉快或者悲伤的事发生，有的恋人会分手，那他们还会在一起吗，还是会彻底放手呢？也有的人不珍惜眼前人，却要追求一些不属于他的东西，当

16、他发现自己已经错过了真爱时，他又会怎样做呢，是追回她，还是会选择消失？当面对恋爱中的悲伤和痛苦时，你又会怎样做呢？在这个网页中，有触动人心的文章，希望你可以在这里找到与你相似的情况，从他们的事情中得到借鉴。5.6 爱与成长网页 每对恋人之间都会有一些美好的回忆吧，告白时的青涩、害羞，成为恋人时的开心、兴奋，相恋时的甜蜜、依恋，这些都是美好的过去吧，而在正处于热恋期的朋友们，又是否再回过去的同时，还对未来有一个清晰的计划了呢？当你蓦然回首时，当你仔细品味爱情时，当你思考两人的未来时，就可以参考这个网站，它会带给你一丝明悟的。5.7 心理测试网页 浏览完前面全部的网页后，你或许还停留在唯美名句中，

17、或许还正在分享别人的喜悦，或许正在感伤，或许正在期望着未来。无论如何，到了这里，不要再想那些东西，这里是为了让你放松的，通过一个小测试，你也许就能知道你将会爱上几个人，当然，这只是小测试，并不需要当真，只希望测试完之后，你已不在纠结在前面的内容上了。6. 网站测试报告WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部

18、分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。符合WEB标准的网站应该主要由三部分组成：对应的网站标准也分三方面：结构化标准语言，主要包括XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C组织（什么是W3C组织）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMA

19、Script标准。6.1web标准测试 1.连接测试 2.数据库测试 3.浏览器测试 4.平台测试 5.负载测试 6.压力测试 7.整体界面测试 6.1.1测试环境 Web测试环境所需要的软硬件包括：电脑一台，JDK1.6，IE浏览器，Firefox浏览器等。 6.2浏览器兼容性测试网页设计浏览器兼容请测试软件6.2.1测试环境 IE7.浏览器 IE8浏览器 IE9浏览器 Firefox浏览器 Chrome.浏览器 Opera.浏览器 360浏览器. QQ浏览器6.2.2测试结果 均可以在以上浏览器中打开。 6.3操作系统兼容性测试 对于每款被测软件，我们都从软件安装、程序启动、主要功能的使用

20、以及软件卸载等四个方面进行了详细的测试和评估。 在运行软件安装时，我们考察了被测软件是否达到了如下要求：遵循用户帐户控制指南。为了满足此要求，应用程序中包括的每个可执行文件（带，EXE扩展名）都必须有一个可定义其执行级别的嵌入式清单，如果应用程序中只有少量功能需要管理权限（如应用程序需要配置防火墙时），则应用程序的主进程必须仍然以标准用户身份运行。必须将管理功能移到使用管理权限运行的独立进程中。正确执行版本检查。除非最终用户许可协议禁止在将来的操作系统上使用，否则应用程序不应在操作系统版本号增加的情况下无法运行。如果应用程序无法运行，则必须向用户发送消息，并向日志写入一条消息，然后正常退出。是

21、否被提示存在已知兼容性错误。避免在安全模式下加载服务和驱动程序。驱动程序和服务不应在安全模式下运行，除非需要使用其进行系统的基本操作（如文件系统驱动程序）或用于诊断和恢复目的（如防病毒扫描程序）。 所有应用程序必须符合反间谍软件联合会提出的隐私准则。被视为恶意软件或间谍软件的应用程序将失去其徽标认证。应用程序必须使用Windows安装程序（MSl）或ClickOnce进行安装。应用程序应默认安装到ProgramFiles或用户的AppData文件夹中。对于每台计算机安装，用户数据必须在首次运行时写入，而不是在安装期间写入。由于在每台计算机安装期间安装可能会提升到不同用户帐户权限，因此在安装期间

22、没有正确的用户位置来存储数据。正确配置程序包标识。应用程序不能尝试安装受保护的系统文件或注册表项。如果应用程序要求采用更新版本的系统组件，则必须使用MicrosoftServicePack或包含该系统组件的Microsoft认可安装程序包对这些组件进行更新。是否在安装结束后提示重新安装提示。安装完毕后是否能够正确运行。应用程序必须仅处理已知的预期异常，不能禁用Windows错误报告。如果在应用程序中出现了错误，则应用程序必须允许报告此问题。安装完毕后UAC是否进行提示。无并不必要的系统重启要求。对于软件卸载，我们会使用软件自带的卸载程序或者从控制面板的程序管理工具来卸载已经安装的被测软件，并考

23、察它们：已安装程序列表中是否删除安装目录是否被删除开始菜单、桌面、工作栏快速启动部分是否已经删除掉相关快捷方式注册表中是否依然保留相关软件的数据项 6.3.1测试环境 所有软件的测试，均在如下配置的测试样机上完成，其具体配置情况为：处理器：Intel Core 2 Duo E7400芯片组：Intel G45 Express显示卡：Intel GMA X4500HD硬盘：7200rpm，S-ATA显示屏：22寸宽屏，1680 x 1050内存：4GB DDR3-1333所有软件的测试，均在Windows 7 RTM （build 7600）（以下简称Windows 7）下完成。所有硬件驱动程序

24、均使用Windows 7自动识别并安装的版本，以避免硬件官方驱动版本可能产生的潜在的兼容性问题。 6.3.2测试结果 操作系统兼容性完好 6.4移动终端可用性测试 1、狭窄布局 在小屏幕上显示大的web页面仍旧需要一些信息视觉处理方法。目前一些浏览器采用狭窄布局作为默认查看模式，Opera将其称为小屏幕渲染，NetFront将其称为SmartFit，我们称之为狭窄布局，因为整个内容的显示窄且长，并且所有内容都做了简化以符合屏幕宽度。 我们对这一布局做过很多用户研究，狭窄布局的主要好处就是文本容易阅读，如果文本的宽度超过屏幕的宽度，用户的阅读就会很困难，虽然可以采取滚动的方法处理这一问题。 不过

25、根据我们的调查，狭窄布局仍有很多问题。最糟糕的就是为了符合屏幕宽度，一些大图片被删减，结果导致图像细节丢失。第二个问题就是表格。如果有一行表格不与屏幕吻合，就会自动调至下一行。还有一点就是内容排序。如上图，所有内容的显示变得很长，所以用户很难找到一些想要的内容，经常需要在屏幕滚动时去寻找关键词，这也就意味着滚动速度不能太快，结果看完所有内容会是一个非常漫长的过程。如果加快滚动速度，用户又可能丢失一些重要信息。一个典型的Web页面中，最左边往往有很多链接，主要内容显示在页面中部。在狭窄布局中，用户必须滚过这些链接，才能看到主体内容。不过在浏览一个网站时，这些链接多数情况下是不相关，用户会变得很生

26、气。还有一个相关的问题就是，一个网站的任何页面的上端往往很类似，用户会弄不清楚自己在哪个页面，所以如果这些链接中包含用户已经点击过的，那么用户很有可能再点击这些链接。我们遇见过很多用户由于这个问题而放弃阅读，他们会说浏览器坏掉了。2、原始布局由于狭窄布局存在很多可用性方面的问题，所以很多浏览器还提供原始布局页面模式，这很类似在PC上，让用户根据内容来选择不同的视图模式，原始布局中，大图片细节和表格的效果会更好，同时如果用户知道PC上的网站的结构，那么就很容易找到自己所需要的内容。 当然原始布局并非什么问题都没有。最糟糕的就是阅读宽文本内容，会很费力。用户每次都得向前向后拉动滚动条。另外由于页面

27、很大，所以需要滚动的地方也越多。3、理想布局很明显，小屏幕移动终端上的页面浏览仍需要很多改进和革新。如果想让自己的网站在小屏幕上具有可读性，可以遵守以下3个指导建议：避免那些一眼就能看出来的大物体； 避免在图片上使用小文本；页面要轻化。 6.4.1测试环境浏览器入口UI风格浏览器可用性交互页面渲染缓存 站点可用性结构 内容布局 6.4.2测试结果 结构 均可以布局7. 核心网页截图7.1 网页截图方法：打开所要截图的网页键盘上prtscsysrg-开始-附件-画图-粘贴-保存到文件夹-打开fireworks软件-打开文件夹-截图-保存图片。 7.2 网页截图及其说明： 此为网页的中部，包括文字

28、连接，图片链接，以及视频简介的连接，以粉色为底，配以浅蓝色的文字，多彩的图片，从而显现恋爱网页的单纯格调此为网页的上半部分，导航，Logo，唯美的图片，右上部分的心形图案为Logo,超炫的“恋爱主义”艺术字效果，和导航的名字都让人耳濡目染。从而体会到恋爱的那种唯美的画面。大方而不失色调。此为网页的一小部分，文字的链接与青春恋爱相关的主体文字，以及青春向上的积极的态度来面对生活，达到理性中的网站的积极乐观的精神面貌爱情语录 重叠的文字放在首页，让浏览者一遍又一遍的去触摸文字，从而在心灵之窗留下多彩而又不可忘却的记忆爱情散文 同“爱情语录”相同，不同的文字下却又偏重于同一理念，有用不同的文字表达，

29、这样，相得益彰，恰到好处，照应题目，又显得整体布局大方，清晰此为Logo以及其背景图片，首页底色为粉色，配以紫色，从色彩角度来讲，清丽却又不失高贵典雅，显得庄重，而心形的Logo多彩的色调，富有灵气，与恋爱时刻的美妙心有灵犀格外地清丽图片文字链接 唯美的爱情宣言，沧海桑田的变迁，海枯石烂的誓言，都似乎悄悄在恋爱的季节里生根发芽，与青春打马走过的年华格格相应导航链接 六个不同的词汇包含了恋爱中的酸甜苦辣，简单又不失华丽，又有着与爱恋中的感受息息相关的体味和那种对青春，生活的态度首页的文字 无连接 在导航下面，你，我，他，象征着青春里的爱情，亲情，友情三者风一般的掠过，有着怎样的的意义，又有着怎样的印痕，都成为我们每个人青春里的不能说的秘密子网页 首页导航中的下拉菜单的连接 一点点文字拼凑而来的却又整齐地坐落在读者的眼眶中，是一种享受子网页 首页导航中下拉菜单的连接 纯纯的文字，勾勒出来的画面，让人马上回想起那些自己青春里走过的人，掠过的故事，更多的不是在读而是在