1、网页设计课程设计报告网页设计课程设计报告 1 1引言引言 学校网站建设是学校教育信息化建设的重要方面， 是适应现代教育 技术和信息技术的发展，加大学校对外交流与宣传力度，提高教学、科 研、管理效率的重要途径；学校网站是学校对外宣传的窗口，也是展示 全校师生才能，加强对校外联系，互相学习，共同发展的阵地，学校网 站建设的目的是促进师生与学校共同发展， 需要全校师生共同参与， 同 心合力把学校网站建设好. 那么， 系部网站建设也是一块重要的内容， 系部网站建设要突显系 部的特色与风格， 展现系部各个方面的实力与优势， 树立一个良好形象， 增加一个公众了解学校的窗口， 也能提高学校知名度、 及学校内
2、各部门 效率，因此，身为计信系的学生，有责任有义务为系部网站的建设出一 份绵薄之力。 经过几天的设计与修改，我们设计的网页已初见成效， 2 2设计目的设计目的 培养了我们网页设计的整体思想 培养了我们编写技术文档的能力 培养了我们独立学习、吸取他人的经验、探讨技术的习惯 培养我们团队协作的能力 加强我们课余学习交流、 沟通感情、 促进学生各方面知识全面 发展 3 3设计思想设计思想 总体设计： 网站规划网站规划：把“计信系”放在突出位置，并突出系部特色，把系部 相关内容放在页面上，吸引注意力，展现计信系风采。为师生互动、学生 之间交流提供一个平台、方便“教”与“学” ，在对外宣传上发布更新信
3、息、对内管理上加强各部门协调沟通。 首页结构首页结构如图 图 1 首页 首页风格首页风格： 1、 首页以表格构成。 2、 首页背景为用 Photoshop 处理制作的淡蓝色壁纸， 导航栏链接实现 的背景为用 Photoshop 处理制作的淡黄色壁纸， 首页上三块绿色内容链接实 现的背景都分别用 Photoshop 处理制作的壁纸。 3、 首页顶部是 Flash 制作的动画， 其中欢迎入住的字眼滚动出现， 右 下角的“浙江水利水电专科学校”字样分别从左至右逐个出场，导航栏背景 为 Photoshop 制作的图片，然后在该表格上加了一个层，以便加上导航栏， 导航栏各个菜单项均是经过 Firewor
4、k 处理制作的下拉菜单，也都实现了链 接功能，并且运用模板，采用共同的样式。 4、 首页中间分为三个部分， 把表格拆分为三个部分， 插入背景的图片 均是采用 Photoshop 制作的，插入表格、内容，并且有一个实现了从下至上 的滚动效果，还有鼠标事件，即鼠标划到滚动字幕上时字幕停止滚动，当鼠 标划出字幕时，字幕重新开始滚动。 图 2 首页中间部分 5、 接下来的部分就是用 Flash 制作的动画， 五张系部的奖牌依次时隐 时现地出现 图 3 FLASH 6、 页脚和页头相呼应。 页头是放置站点主题的地方， 而页脚是放置制 作者或者公司信息的地方。我们设计的页角如下： 设为主页-加入收藏-系部
5、介绍-友情链接-版权申明-联系方式-我要留言 CopyRight 2004-2006 JSJ.ZJWCHCCOM ALL Right Reserved 地址：浙江杭州下沙学林街 583 号 邮编：310018 系办电话：0571-86929086 计算机与信息工程系 毛辉 吕彩虹 链接页面风格： 1、 导航栏链接：以表格构成，顶部为 FLASH 制作的动画，背景是绿 叶， 右下角是 “浙江水利水电专科学校” 字样， 最上面是 “” 字样从右到左从淡到明、从明到淡划过屏幕；还有“计信系”红色字样的动 画。接下来就是导航栏，实现了链接。还有，时间的显示，这个是在代码中 假如了 Javascript
6、 实现的。 图 4 导航栏 2、 中间内容的链接：点击标题文字，出现新的页面，顶部和页角和 首页一样，中间部分有有一个实现了从下至上的滚动效果，还有鼠标事件， 即鼠标划到滚动字幕上时字幕停止滚动， 当鼠标划出字幕时， 字幕重新开始 滚动。点击滚动的任意内容，均出现相应的文章内容。链接后又是另一种颜 色。 3、 使用了模板。中导航栏上的“新闻中心”和“行政科研”均使用 了模板。 图 5 模板 4 4网站形象设计网站形象设计 标准字体：正文字体为“宋体”9pt。 主色调与色彩: :本网站以绿色为主色调， 颜色明了清新， 正文部分为黑 色，链接颜色为橘黄色。 5 5网站布局技术网站布局技术 本站主要使用表格布局布局。优势在于它可以对不同对象进行处理， 而不必担心不同对象之间的互相影响，且在定位图片和文本上比用 CSS 更方便，比框架布局更美观。 CSS 它能够使你保持整个 HTML 的统一外观。过去当你 在设置文本时,为了保持整个段落都使用相同的外观,不得 不为每一段设置属性,很麻烦。如果
