网站实验报告模板.doc

本 科 实 验 报 告课程名称： 网站设计 实验项目： 令我魂牵梦绕的三号院 学 员： 唐 嘉 学 号： 2011060200 学 员： 李思瑾 学 号： 201106021006 学 员： 陈润泽 学 号： 201106020003 培养类型： 工程技术类 年 级： 大三 专 业： 计算机科学与技术、网络工程 所属学院： 计算机学院 授课教员： 夏竟 国防科学技术大学计算机学院制一 网站简介及需求分析“再也不会有这样一个地方，曾日夜期盼着离开，临别却又怀伤。再也不会有这样一条走廊，每个哨音响亮的清晨，你我脚步轻快。再也不会有这样一群人， 你向他招手，他就会微笑着向你走来。”对，这就是三号院，令我魂牵梦绕的三号院。设计这个网站的初衷也正如此。大三的我们，即将面临的新的改变。时间飞逝，也许明天，我们就将离开这个带给我们无数回忆的地方，奔向新的征程。我们想留下对三号院的记忆，把我们最珍惜的刻在这个网站上。相信很多人和我们一样，也想珍藏这份记忆。于是，我们网站将对我们这群生活在三号院、即将离开三号院或是已经离开三号院的人引起强烈的共鸣。这也是这个网站主要的使用人群。我们的网站分7个模块，包括2个标志模块和5个功能模块。2个标志模块分别是开头的主页图标和小组成员介绍。5个功能模块分别是：三号院简介、三号院攻略、三号院美景、三号院美食、一点儿感想。在网站的左侧有导航栏，同时，每个模块以不同的纯色底板做背景，简约大方，不失格调。可以通过往下翻浏览网站，也可以通过导航栏快速到达指定模板。二 网站基础技术路线我们设计的网站功能较为简单，所实现起来不是很复杂。由于只是一个偏介绍性的门户网站，没有大量数据的调用，所以没有使用数据库。网站开发主要使用JS语言和HTML语言。采用JavaScript语言主要是看中JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。我们的网站设计中JavaScript实现网站中动态模块，例如点击按钮滑到具体位置的效果，点击图片自动弹出的效果。HTML语言是目前网站设计使用最为广泛的语言，选用HTML语言的主要原因是它比较简单，容易上手，适合我们网站设计初学者开发网站。网站开发工具选择的是DreamWeaver。使用DreamWeaver设计网站，首先是做成的网站效果很好；其次是DreamWeaver是一款特别专业的“傻瓜”软件。对于初学者来说操作简单，可视化性较好，能在较短的时间掌握，适合“菜鸟”制作较好的网站。综合知识运用情况：1、层的使用在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便，而框架虽然也能达到这个效果，但是，它不够灵活，不利于我所需要表达的效果的呈现，也许是不习惯的原因吧，觉得太死板了，当然一些地方仍然要用到它，体现清晰的结构。2、运用Photoshop工具图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时最好借助Photoshop工具来编辑图片。文本的插入在层内或框架内完成较好，但不能设置为艺术字体，因此需要运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。3、插入跳转菜单为了使读者能快捷的回到自己感兴趣的页面及其定位，于是在各个页面都插入了跳转菜单。4、制作在整个页面浮动的图片5、使用弹出信息行为6、框架的使用7、背景图像的固定，让文本在图像上滚动三 网站概要设计组员分工网站的概要模块设计，包括网站简单逻辑结构拓扑图等，主要前述网站简介及需求分析相结合。并在此节详细介绍组员分工。标题栏通过photoshop软件进行处理，文字的制作以及面板的处理与排版；导航栏、其他各模块同样运用PS工具进行图文的切割；对组员提供的图片进行整理；通过CSS样式进行排版，用DREAMWEAVER软件制作网站。组员分工：组员任务分工唐嘉收集、整理素材，使用PS对图片进行处理陈润泽使用JavaScript开发网站动态模块李思瑾使用DreamWeaver制作网站（HTML语言开发）网站的元素的结构框图如下图所示：整个网站结构的逻辑图如下图所示：标题导航栏小组成员介绍一点儿感想三号院美食三号院攻略三号院美景三号院简介网站的文件目录结构如下所示：令我魂牵梦绕的三号院 -网站根目录css -存放外置CSS文件js -存放js源代码images -存放图片文件四 网站详细功能模块实现基于上述的网站各功能模块，我们采用多种工具分别处理的方法。标题栏通过photoshop软件进行处理，文字的制作以及面板的处理与排版；三号院简介，三号院攻略，三号院美景，三号院美食，感想及小组成员模块同样运用PS工具进行图文的切割，总体设计通过CSS样式进行排版，用DREAMWEAVER软件制作图文并进行整个网站的制作。大部分图片都是由小组成员唐嘉进行摄影所得，网页里的图标多为懒人图库中下载并使用的。 整体排版用及字体设计：使用photoshop软件进行图片美化和字体加工，使用css技术进行网页风格设计，最后使用DW进行整站的设计。我们整体使用平面化设计，不采取链接跳转技术，比较接地气，和大流。（结合win8风格）整个上下框架结构有两级结构，外层和内层结构均由CSS设计而成。点击标签页面跳转是由js设置点击按钮事件监听实现的，具体是当点击导航标签时，响应对应的点击事件，页面跳转到对应位置，是用特定的小图片定位实现的。 var autoSlide = function() if(!data.isLocked) if(data.isPaused) if(Date.parse(new Date() - data.pausedOn data.pauseInterval) return true; else data.isPaused = false; data.isLocked = true; var _current = getCurrentSlide(); var _next = getNextSlide(_current); updateNavigation(_next); slideFromTo(_current, _next); return true; ;三号院美景部分点击图片放大显示也是由js实现的响应功能。五 开发维护心得及总结设计“令我魂牵梦绕的三号院”是简单而幸福的。留下这些珍贵的记忆是非常有意义的事情，哪怕在我们的努力下，呈现给大家的网站并不是每个人都那么喜欢，但这绝对是我们最喜欢的网站。在设计的过程中，我们深深感到，实践是网站设计教学过程中最重要的，通过让我们自己设计，培养我们综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对综合分析能力与独立工作能力的培养过程。实践让我们走向科技应用，走出课堂。我们所缺的不是知识，而是缺少将知识与实际相结合的能力。我们在课堂上所学的，与在实际当中遇到的是不尽相同的，其往往具有不具有明显的特征，这需要我们进行抽象概括才能解决各种问题。作为当代大学生,应该不再只是被动的等待别人告诉你应该做什么，而是应该主动的去了解自己要做什么，然后全力以赴的去完成。从最初的“小菜鸟”到“菜鸟”需要有耐心，如果没有耐心，就肯定学不好。同时也要学会坚持，坚持不断的学习。生活苍黄反复，大众的需求也是日新月异，网页的设计在不断的更新，因此我们要不断的学习、更新。网站设计中的酸甜苦辣我们会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网站过程中，我们学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我们学到了更多的知识，并且为我们自己在制作网页这方面积累了一些经验。这些将是我们人生中的一次重要的经历，将是我们今后走上社会后的一笔巨大的财富。我们也感受到，设计网站不仅是为了完成任务，更是对过去学