网页设计课程设计报告网站设计报告.docx
《网页设计课程设计报告网站设计报告.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计报告网站设计报告.docx（9页珍藏版）》请在冰豆网上搜索。
网页设计课程设计报告网站设计报告
ZHEJIANGWATERCONSERVANCYANDHYDROPOWERCOLLEGE
网页设计课程设计报告
题 目：
计信系网站设计报告
系（部）：
运算机与信息工程系
专业班级：
信管11-1
姓名：
沈慧婷
学号：
7
指导教师：
张铁英
迄止时刻：
2012年7月2日～2012年7月6日
1．引言
学校网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的进展，加大学校对外交流与宣传力度，提高教学、科研、治理效率的重要途径；学校网站是学校对外宣传的窗口，也是展现全校师生才能，增强对校外联系，相互学习，一起进展的阵地，学校网站建设的目的是增进师生与学校一起进展，需要全校师生一起参与，同心并力把学校网站建设好.
那么，系部网站建设也是一块重要的内容，系部网站建设要突显系部的特色与风格，展现系部方方面面的实力与优势，树立一个良好形象，增加一个公众了解学校的窗口，也能提高学校知名度、及学校内各部门效率，因此，身为计信系的学生，有责任有义务为系部网站的建设出一份微薄之力。
通过几天的设计与修改，咱们设计的网页已初见成效，
2．设计目的
●培育了咱们网页设计的整体思想
●培育了咱们编写技术文档的能力
●培育了咱们独立学习、吸取他人的体会、探讨技术的适应
●培育咱们团队协作的能力
●增强咱们课余学习交流、沟通情感、增进学生各方面知识全面进展
3．设计思想
整体设计：
●网站计划：
把“计信系”放在突出位置，并突出系部特色，把系部相关内容放在页面上，吸引注意力，展现计信系风度。
为师生互动、学生之间交流提供一个平台、方便“教”与“学”，在对外宣传上发布更新信息、对内治理上增强各部门和谐沟通。
●首页结构如图
图1首页
●首页风格：
1、首页以表格组成。
2、首页背景为用Photoshop处置制作的淡蓝色壁纸，导航栏链接实现的背景为用Photoshop处置制作的淡黄色壁纸，首页上三块绿色内容链接实现的背景都别离用Photoshop处置制作的壁纸。
3、首页顶部是Flash制作的动画，其中欢迎入住的字眼转动显现，右下角的“浙江水利水电专科学校”字样别离从左至右逐个出场，导航栏背景为Photoshop制作的图片，然后在该表格上加了一个层，以便加上导航栏，导航栏各个菜单项均是通过Firework处置制作的下拉菜单，也都实现了链接功能，而且运用模板，采纳一起的样式。
4、首页中间分为三个部份，把表格拆分为三个部份，插入背景的图片均是采纳Photoshop制作的，插入表格、内容，而且有一个实现了从下至上的转动成效，还有鼠标事件，即鼠标划到转动字幕上时字幕停止转动，当鼠标划出字幕时，字幕从头开始转动。
图2首页中间部份
5、接下来的部份确实是用Flash制作的动画，五张系部的奖牌依次时隐时现地显现
图3FLASH
6、页脚和页头相呼应。
页头是放置站点主题的地址，而页脚是放置制作者或公司信息的地址。
咱们设计的页角如下：
设为主页-加入收藏-系部介绍-友谊链接-版权申明-联系方式-我要留言
CopyRight@2004-2006>COMALLRightReserved
地址：
浙江杭州下沙学林街583号：
310018系办：
6
运算机与信息工程系
毛辉吕彩虹
●链接页面风格：
1、导航栏链接：
以表格组成，顶部为FLASH制作的动画，背景是绿叶，右下角是“浙江水利水电专科学校”字样，最上面是“字样从右到左从淡到明、从明到淡划过屏幕；还有“计信系”红色字样的动画。
接下来确实是导航栏，实现了链接。
还有，时刻的显示，那个是在代码中假设了Javascript实现的。
图4导航栏
2、中间内容的链接：
点击题目文字，显现新的页面，顶部和页角和首页一样，中间部份有有一个实现了从下至上的转动成效，还有鼠标事件，即鼠标划到转动字幕上时字幕停止转动，当鼠标划出字幕时，字幕从头开始转动。
点击转动的任意内容，均显现相应的文章内容。
链接后又是另一种颜色。
3、利用了模板。
中导航栏上的“新闻中心”和“行政科研”均利用了模板。
图5模板
4．网站形象设计
标准字体：
正文字体为“宋体”9pt。
主色调与色彩:
本网站以绿色为主色调，颜色明了清新，正文部份为黑色，链接颜色为橘黄色。
5．网站布局技术
本站要紧利用表格布局布局。
优势在于它能够对不同对象进行处置，而没必要担忧不同对象之间的相互阻碍，且在定位图片和文本上比用CSS更方便，比框架布局更美观。
●CSS
它能够使你维持整个HTML的统一外观。
过去当你在设置文本时,为了维持整个段落都利用相同的外观,不能不为每一段设置属性,很麻烦。
若是利用了CSS,那么能够在设置文本之前,就指定整个文本的属性,比如颜色、字体大小等等,如此,咱们就能够取得统一的文本外观了。
本网站就对颜色、字体大小进行了设置。
6．网站特效说明
●页面转换成效应用
要紧应用于整个页面，代码如下：
第一个标签是进入页面成效操纵,告知阅读器进入时创建一个随机的页面转换成效.
第一个标签是离开页面成效操纵,告知阅读器进入时创建一个随机的页面转换成效.
（其中：
“Duration=3”表示网页动态过滤的时刻为6秒，“Transition=19”表示网页过渡的方式值为23，即为从左上角向右下角展开。
）
图6页面转换成效
●插入多个FLASH动画，使整个网页看起来更有立体感，成效十分不错，也突显了系部的特色。
图7FLASH
●利用了JavaScript的对象事件处置程序，例如鼠标事件。
7.网页设计分工
毛辉4
1.主页FLASH制作
2.主页三个绿色框的制作
3.全部按纽的制作
4.留言页面的制作
5.制作人资料栏的制作
6.部分文章的链接
7.网页特效的制作
吕彩虹6
1.分页FLASH的制作
2.部分文章的链接
3.分页的制作
4.页脚的制作
5.流动栏的制作
6.图片的搜索
7.分页文章主题部分的制作
表1小组人员分工表
8．个人体会
以前我一直在做网页，只是是在博客上，那里提供了摸板，只需要自己在里面添舔改改就好了，对一些代码我更本就看不懂，此刻好了，尽管我不是很会，可是能够看懂一些了，也能改一些代码了。
通过这几天的学习和制作，在教师的精心教诲下和同伴的帮忙下，和通过自己在平常的学习和实践，网页知识有了初步熟悉。
通过学习，不但增加了我的知识面，还使我学会了很多以前可不能利用的工具，例如FLASH固然如此还不够，因为我还有很多需要学习的地址，，可是在以后的时刻里我必然会继续尽力，争取做更多的精美的网页出来。
通过这次制作还让我明白了做网页时页面不必然要很复杂，但留白的地址不能很多，如此看起来就可不能感觉呆板，反面显得有层次，比较高级，而且百看不厌。
网页的特点确实是要有一副漂亮的背景图，整个页面看起来就比较舒畅。
网页的文字要排得整齐紧凑，如此才能给人一种舒畅的感觉。
在网页适当的地址能够加一些图片，每张画面再加一些不同的文字说明和加一些不同的文字成效，再加一些小动画，如此网页会显得加倍的精美。
这次做的网页虽不是专门好看，可是我花了很多时刻来按成它，因此呢它对我以后做网页有专门大的帮忙。
在这次做网页的进程中也让我学到了很多东西，因此呢从我内心来讲我是很中意我的这次经历，同时也要谢谢教师安排如此的课程设计，因为在制作进程中我不仅学到了书上没有的东西，也培育了我独立试探问题的能力，同时还增强了同窗之间的团结合作的友谊。
升级会员 