校园网站设计与制做答辩PPT.pptVIP

校园网站设计与制作 2011 级 计算机网络技术 专业 学生姓名： 指导教师： 班 级： 机电工程系 2013年6月20日 一、网站设计 首页设计 （1）主题鲜明 （2）色调和谐 （3）布局合理 （4）技巧特色 （5）网站稳定 标志 校训 导 航 栏 图片展示 时间 搜索 综合新闻 Flash 通知公告 校园风景（图片滚动） 版权 6.版权声明 访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏。同时，也提供了必要的学院说明。 1.标志校训 学院标志是一个学院的象征，校训乃一校之魂。将其放在网页的最顶端，让访问者一目了然，体现我院精益求精、奋发图强的发展理念。 2.导航部分 概括了网站的主要内容，通过导航栏能让访问者快速了解内容的分类，导航栏图片下方还设置了日期栏和搜索栏，日期栏上的日期会自动更新，搜索栏内输入要搜索的内容关键字则会显示站内与搜索相关的内容。 4.综合新闻 主要展现的是学院内的新闻动态，并且加入了图片滚动特效，不断滚动新闻图片，单机图片即可进入相关新闻的详细内容部分。 3.通知公告 主要是发布学院的通知、公告，目的是能够让老师和同学们及时了解到学院的最新动态，方便了信息的交流。内容是不断滚动更新的，目的在于方便大家预览。 5.校园风景 这部分加入了滚动特效，展现校园风景图片，使访问者直观了解到我们学院的环境及教学设施，单机图片即可查看大幅。 二 级 页 面 设 计 ? 教学设施 ? 系部动态 ? 教学科研 ? 学院快讯 ? 教师风采 ? 学生活动 ? 论坛天地 ? 联系方式 ? 学院概况 1.学院概况 这部分主要包含学院的发展历史、学院规模以及取得的教学成果，是让外界了解我们学院的必要平台。 2.校园快讯 高校校园新闻媒体及其功能能够很好地发挥高校校园新闻媒体的作用，建好高校校园新闻媒体信息平台,从而更好地发挥高校校园新闻媒体在创建优质校园文化,营造良好育人环境,加强对外宣传等方面的积极功能。 3.教学科研 介绍我院所取得教学成果、科研成果。这部分主要采用列表的方式，每条列表都做了超级链接，单击即可进入详细内容。 4.系部介绍 介绍学院的教学系部，以及每个系部的具体情况以及所开设的专业课程。这部分主要以文字介绍为主，详细介绍各系部动态。 5.教学设施 介绍我院的硬件及软件的教学设施，通过这个窗口，展现学院教学设施的雄厚力量。这部分以图片展现为主，图片可粘贴复制，为大家使用提供了便利。 6.教师风采 介绍院系各优秀老师的简历、精品课程和技能大赛等。通过这一平台让同学们更加直观的了解学院教师情况，增加师生之间的亲密感。 7.学生活动 通过真实生动的画面，记录师生之间的友好感情及同学与同学之间的友情。还有我们学院各个社团组织的丰富有趣的学生活动，以及我们学院开展的素质拓展竞技比赛，都可以通过这一平台进行展示。 8.论坛天地 为同学们提供一个发表言论的平台，加强了同学们与学院的交流，同时，也更有利于学院领导、老师了解同学的意见。 9.联系方式 介绍学院的网址、地址、邮编的报告联系方式。 二、网站制作 （一）网站布局 在制作网站之前，我也曾浏览过其他高校的网站，从中也吸取了不少经验。在众多网站样式布局板块中，考虑到我们做的是校园网，所以采用了比较常见且较正规的“国”字型布局格式，使得网站内容条理清晰、明快简洁。在页面颜色的搭配上，我们选择了亮色系里面的绿色，原因在前面“网站设计”部分已经做了详细说明。 （二）导航部分的制作 导航栏下面我们采用了大图展示，而图形结构也采用了不规则的图形，原因是大多数网站都采用横条式简单导航，较为僵硬死板，而我们采用这种图片形式的导航，既展现了校园风貌，而且让访问者耳目一新。 导航图片是我在Photoshop中用钢笔工具抠图的效果，我先将所需要用的图片大小、像素调整一致，在Photosho中作出一个模型，然后将模型复制在其他图层上面，按照比例抠出一样大小的图片。 导航部分图片滚动效果也是在Photoshop中制作而成的，将每幅图片的针之间的时间设置为2.5秒。 同时，导航图片部分也做了超级链接，单击之后进入学院简介板块。 背景颜色由绿色和白色组成，整体呈现出一个渐变趋势，上半部分相对应的是标志、导航部分，为了营造整体效果，所以绿色为主，下半部分相对应的是网站的内容部分，所以采用了纯白色为背景。 背景是我在Photoshop中制作的，首先新建图层，大小为1500×3500像