网页设计课程设计报告网站设计报告

《网页设计课程设计报告网站设计报告》由会员分享，可在线阅读，更多相关《网页设计课程设计报告网站设计报告（10页珍藏版）》请在金锄头文库上搜索。

1、ZHEJIANG WATER CONSERVANCY AND HYDROPOWER COLLEGE网页设计课程设计报告题目： 计信系网站设计报告 系 （部）： 计算机与信息工程系 专业班级： 信管11-1 姓 名： 沈慧婷 学 号： 101190107 指导教师： 张铁英 迄止时间：2012 年 7月 2日 2012 年 7月 6 日1引言学校网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的发展，加大学校对外交流与宣传力度，提高教学、科研、管理效率的重要途径；学校网站是学校对外宣传的窗口，也是展示全校师生才能，加强对校外联系，互相学习，共同发展的阵地，学校网站建设的目的是

2、促进师生与学校共同发展，需要全校师生共同参与，同心合力把学校网站建设好.那么，系部网站建设也是一块重要的内容，系部网站建设要突显系部的特色与风格，展现系部各个方面的实力与优势，树立一个良好形象，增加一个公众了解学校的窗口，也能提高学校知名度、及学校内各部门效率，因此，身为计信系的学生，有责任有义务为系部网站的建设出一份绵薄之力。经过几天的设计与修改，我们设计的网页已初见成效，2设计目的l 培养了我们网页设计的整体思想l 培养了我们编写技术文档的能力l 培养了我们独立学习、吸取他人的经验、探讨技术的习惯l 培养我们团队协作的能力l 加强我们课余学习交流、沟通感情、促进学生各方面知识全面发展3设计

3、思想 总体设计：l 网站规划：把“计信系”放在突出位置，并突出系部特色，把系部相关内容放在页面上，吸引注意力，展现计信系风采。为师生互动、学生之间交流提供一个平台、方便“教”与“学”，在对外宣传上发布更新信息、对内管理上加强各部门协调沟通。l 首页结构如图 图1 首页 l 首页风格：1、 首页以表格构成。2、 首页背景为用Photoshop处理制作的淡蓝色壁纸，导航栏链接实现的背景为用Photoshop处理制作的淡黄色壁纸，首页上三块绿色内容链接实现的背景都分别用Photoshop处理制作的壁纸。3、 首页顶部是Flash制作的动画，其中欢迎入住的字眼滚动出现，右下角的“浙江水利水电专科学校”

4、字样分别从左至右逐个出场，导航栏背景为Photoshop制作的图片，然后在该表格上加了一个层，以便加上导航栏，导航栏各个菜单项均是经过Firework处理制作的下拉菜单，也都实现了链接功能，并且运用模板，采用共同的样式。4、 首页中间分为三个部分，把表格拆分为三个部分，插入背景的图片均是采用Photoshop制作的，插入表格、内容，并且有一个实现了从下至上的滚动效果，还有鼠标事件，即鼠标划到滚动字幕上时字幕停止滚动，当鼠标划出字幕时，字幕重新开始滚动。 图2 首页中间部分 5、 接下来的部分就是用Flash制作的动画，五张系部的奖牌依次时隐时现地出现 图3 FLASH6、 页脚和页头相呼应。页

5、头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。我们设计的页角如下：设为主页-加入收藏-系部介绍-友情链接-版权申明-联系方式-我要留言CopyRight 2004-2006 JSJ.ZJWCHCCOM ALL Right Reserved地址：浙江杭州下沙学林街583号 邮编：310018 系办电话：0571-86929086计算机与信息工程系毛辉 吕彩虹l 链接页面风格：1、 导航栏链接：以表格构成，顶部为FLASH制作的动画，背景是绿叶，右下角是“浙江水利水电专科学校”字样，最上面是“”字样从右到左从淡到明、从明到淡划过屏幕；还有“计信系”红色字样的动画。接下来就是导航栏，

6、实现了链接。还有，时间的显示，这个是在代码中假如了Javascript实现的。 图4 导航栏2、 中间内容的链接：点击标题文字，出现新的页面，顶部和页角和首页一样，中间部分有有一个实现了从下至上的滚动效果，还有鼠标事件，即鼠标划到滚动字幕上时字幕停止滚动，当鼠标划出字幕时，字幕重新开始滚动。点击滚动的任意内容，均出现相应的文章内容。链接后又是另一种颜色。3、 使用了模板。中导航栏上的“新闻中心”和“行政科研”均使用了模板。 图5模板4网站形象设计标准字体：正文字体为“宋体”9pt。主色调与色彩:本网站以绿色为主色调，颜色明了清新，正文部分为黑色，链接颜色为橘黄色。5网站布局技术 本站主要使用表

7、格布局布局。优势在于它可以对不同对象进行处理，而不必担心不同对象之间的互相影响，且在定位图片和文本上比用CSS更方便，比框架布局更美观。l CSS 它能够使你保持整个HTML的统一外观。过去当你在设置文本时,为了保持整个段落都使用相同的外观,不得不为每一段设置属性,很麻烦。如果使用了CSS,那么可以在设置文本之前,就指定整个文本的属性,比如颜色、字体大小等等,这样,我们就能获得统一的文本外观了。本网站就对颜色、字体大小进行了设置。6 网站特效说明 l 页面转换效果应用 主要应用于整个页面，代码如下：第一个标签是进入页面效果控制,告诉浏览器进入时创建一个随机的页面转换效果.第一个标签是离开页面效

8、果控制,告诉浏览器进入时创建一个随机的页面转换效果.（其中：“Duration=3”表示网页动态过滤的时间为6秒，“Transition=19”表示网页过渡的方式值为23，即为从左上角向右下角展开。） 图6 页面转换效果l 插入多个FLASH动画，使整个网页看起来更有立体感，效果十分不错，也突显了系部的特色。 图7 FLASHl 使用了JavaScript的对象事件处理程序，例如鼠标事件。 7. 网页设计分工毛辉 2006940041. 主页FLASH制作2. 主页三个绿色框的制作3. 全部按纽的制作4. 留言页面的制作5. 制作人资料栏的制作6. 部分文章的链接7. 网页特效的制作吕彩虹 2

9、006940061. 分页FLASH的制作2. 部分文章的链接3. 分页的制作4. 页脚的制作5. 流动栏的制作6. 图片的搜索7. 分页文章主题部分的制作 表1 小组人员分工表8个人体会以前我一直在做网页，不过是在博客上，那里提供了摸板，只需要自己在里面添舔改改就行了，对一些代码我更本就看不懂，现在好了，虽然我不是很会，但是可以看懂一些了，也能改一些代码了。通过这几天的学习和制作，在老师的精心教导下和搭档的帮助下，以及通过自己在平时的学习和实践，网页知识有了初步认识。通过学习，不但增加了我的知识面，还使我学会了很多以前不会使用的工具，例如FLASH当然这样还不够，因为我还有很多需要学习的地方

10、，但是在以后的时间里我一定会继续努力，争取做更多的精美的网页出来。 通过此次制作还让我明白了做网页时页面不一定要很复杂，但留白的地方不能很多，这样看起来就不会觉得呆板，反面显得有层次，比较高档，而且百看不厌。网页的特点就是要有一副漂亮的背景图，整个页面看起来就比较舒服。网页的文字要排得整齐紧凑，这样才能给人一种舒服的感觉。在网页适当的地方可以加一些图片，每张画面再加一些不同的文字说明和加一些不同的文字效果，再加一些小动画，这样网页会显得更加的精美。 这次做的网页虽不是很好看，可是我花了很多时间来按成它，所以呢它对我以后做网页有很大的帮助。在此次做网页的过程中也让我学到了很多东西，所以呢从我内心来说我是很满意我的这次经历，同时也要谢谢老师安排这样的课程设计，因为在制作过程中我不仅学到了书上没有的东西，也培养了我独立思考问题的能力，同时还增强了同学之间的团结互助的友谊。