综合实验设计说明书.doc

网页设计与制作设计说明书姓 名： 郝宗义 学 号： 20090450113 班 级： 09计算机本科 指导教师： 刘晶 完成日期： 2011/6/21 设 计 要 求考核目的网页设计与制作课程设计是该门课程的综合实训环节，通过该环节使同学们了解和掌握网站开发要求及规范，掌握一个网站的完整制作步骤和操作方法，具备独立完成网页设计与制作的综合能力。考核项目要求设计标准及要求：1、网页内容积极向上、思想健康、有时代气息，网页内容充实，符合网站主题。1）主页上必须有Logo、Banner、网站导航、网站版权等信息。 2）各网页的文字通顺，无文字语法错误。 3）栏目至少有5个，每个栏目不少于3个子页，保存各文件夹设置合理，无无用链接以及图片。 2、设计要求：网页布局设计合理，文字、图片、动画在网页中的运用适当。各网页之间的设计风格统一，符合设计原理。 3、技术要求：网页中各种技术运用恰到好处。 1）网页利用DIV+CSS进行页面的设计，符合WEB标准。2）网页中含有Javascript技术（图像轮转，页面登录计时等）。3）适当运用各种多媒体技术。 4、美工要求：网页界面美观大方、引人入胜，色颜搭配合理，所有图片、动画与网站主题相符。 5、创意要求： 网站与同类主题网站相比富有新意，有自己的特色。备注：必须自己亲自制作，抄袭者，成绩一律作废！网页设计与制作实践环节考核报告单2010-2011学年度第二学期期末排课编号： 批阅日期： 年 月 日姓名郝宗义班级09计本学号20090450113评分标准及得分评分标准满分得分主题表达合乎逻辑，富有时代气息；界面亲切友好，方便用户使用；网站结构清晰、导航明确，内容易于检索；没有无效链接、错误链接和非法链接10内容健康、科学、文明；丰富、完整，主题突出、鲜明；分类清楚，一目了然；颜色搭配合理，布局精确；图片经过处理处理，无网上下载痕迹30站点内文件、文件夹的命名和存放规范合理；网页制作技巧的合理运用；表格、DIV、CSS、Javascript、框架、模板的合理运用；动画、按钮等网页元素运用合理；图形图片经过最优化处理，视频和音频材料载入迅速30整个站点风格一致界面美观，页面风格简洁、明快、排版布局合理线条流畅，色彩鲜明、适当；图片、动画、视频清晰、生动；音乐与主题风格一致，具有较强的表现能力20课程设计报告书写规范、文字通顺、图表清晰、数据完整10考核成绩任课教师签名目录第1章 昌邑市气象局网页设计的规划41.1需求分析41.1.1网站的定位41.2网站功能设计41.2.1首页功能41.2.2子网页功能5第2章 昌邑市气象局网页的设计与制作52.1首页设计52.1.1栏目设计62.1.2 logo及banner设计62.1.3导航设计72.1.4主页中的一些特殊设计72.1.5友情链接和合作伙伴72.1.6音乐72.1.7专题区域72.2子网页设计72.2.1栏目设计82.2.2导航设计82.2.3风格与色彩搭配82.2.4首页与子网页之间的链接82.2.5子网页与子网页之间的链接8第3章 昌邑市气象局网页设计的重难点分析93.1网页设计的重点分析93.2网页设计的难点分析9设计总结9参考文献9昌邑市气象局网站设计说明书第一章 绪论 昌邑市是国务院确定的沿海开放城市，是著名的“丝绸之乡”、“华侨之乡”、“中国印染名城”、“中国北方绿化苗木基地”、“中国超纤产业基地”。2008年又被国家林业局评定为“山东昌邑国家级苗木交易市场。”昌邑市地理位置优越，位于胶东半岛西北部，渤海之滨，莱州湾畔，东与烟台、青岛毗邻，西与潍坊相接，属“青岛一小时经济圈”，“潍坊半小时经济圈”。市域总面积1578.7平方公里，辖7镇2街道，691个行政村（居委会），总人口：683182人（截止到第五次人口普查）。市人民政府驻地邮编：261300。代码：370786。区号：0536。拼音：Changyi Shi。昌邑市气象局是科技型、基础性社会公益事业单位，在山东省气象局、潍坊市气象局和昌邑市人民政府的领导下，承担全市气象工作的政府行政管理职能，负责全市气象工作的组织管理。已初步建成了气象卫星地面接收、天气雷达和地面气象站相结合、布局基本合理的现代化大气综合观测系统。基本组成了由天气预报、农业气象、气候预测、人工影响天气、雷电防御、气候资源开发利用等构成的气象服务体系。卫星通信、地面公共通信相结合的气象信息网络系统，快捷有效的传递气象信息。气象服务基本覆盖了昌邑经济建设和社会发展与公共安全各个领域，气象工作的作用日益突出。内设机构设办公室、业务科技科、人事教育科、政策法规科。事业单位有气象台、气象科技服务中心、雷电防护技术中心、财务核算中心。昌邑市人民政府人工影响天气办公室设在市气象局。全市设北部沿海经济开发区、中部城区、南部丘陵区三个气象分站。全市气象部门现有正式职工76人，高级工程师9人，工程师25人。主要职责：贯彻执行国家气象法律法规，负责全市气象发展规划和计划的制订、气象业务建设的组织实施及气象活动的指导、监督和行业管理，依法保护气象探测环境。 为各级政府指挥生产、抗旱防汛、防灾减灾和社会公众提供准确及时的气象服务。 组织实施气象探测及气象应用科学研究、气候资源开发利用 组织所属气象台站开展气象科技服务； 受政府委托负责人工影响天气的组织管理和技术指导； 负责本行政区内的防雷检测、防雷工程设计、施工、资质管理及认证、防雷工程验收工作，并积极承办市人民政府和省气象局交办的其他气象服务工作。 作为一个全国百强市，昌邑市气象局的官方网站却制作的十分粗糙简单，那我就利用自己所学的浅薄知识，来为家乡做点力所能及的贡献吧。第一章 昌邑市气象局网页的规划1.1需求分析 随着Internet技术的发展和普及，越来越多的机关、企事业单位纷纷建立自己的网站，以此来增加宣传和服务。气象部门作为一个公众服务机构，为了更好地服务于大众，提高人们的气象意识，也应该建立自己的网站。同传统的服务方式相比，气象网站服务的对象更广，获得的气象信息更为迅速、准确。 1.1.1 网站的定位 1. 宣传气象局 2、及时准确的发布气象信息 3. 服务人民大众4. 提醒人们注意天气变化，关爱身体健康1.2 网站功能设计 对外宣传企业形象，为人民群众提供实时气象服务1.2.1 首页功能： 通过首页，了解昌邑市气象局的基本情况和实时气象动态1.2.2 子网页功能 1.通过子网页将网站内容更加条理化、更加详细、更加方便的展现给浏览者。 2.子网页中将每个板块的内容具体化、深入化、详细化。让感兴趣的浏览者详细了解气象站的建设情况。 3.子网页在展现具体内容的同时，能让浏览者更加深入了解气象有关信息 4.可以方便浏览者及时快捷了解本市气象局和天气的最新动态。第2章 昌邑气象局网站的设计与制作2.1 首页设计作为政府职能部门的官方网站，要求对外表现出一种庄重的风格，因此采用蓝色为基调，突出气象主题2.1.1 栏目设计：我们公司网站栏目主要包括七大部分，就是网站首页、旅游动态、景区景点、旅游指南、地域风情、虚拟景区、联系我们。还有其他一些小栏目，诸如友情链接、我要点评等。2.1.2 logo及banner设计本网址logo及banner设计简单，以蓝色为基调，用冰封的背景，使logo更贴近本网页的内容。Logo与banner结合在一块，然后添加提醒说明，贴合网站主题。2.1.3 导航设计：导航设计上采用蓝色条状banner为背景，两朵彩云合成的logo居右，其中字体、分隔符都为黑色，设计简单，并带有下拉菜单的特效。2.1.4 主页中的一些特殊设计1、时间显示：字体为黑色，居于左上角，随着日期的变化而变化。2、字体滚动效果：（1）右上角字体从右向左滚动，对进入网页的人群表示问候（2）气象局简介专栏 字体从下向上滚动，对气象局基本情况做出介绍3、导航栏下拉子菜单效果：让浏览者具有更多的选择空间4、左侧边栏的网上调查：表单的应用5、图片的轮转效果、跑马灯效果6、页脚的浏览人数统计7、来自天气网的两个气象插件，更加体现气象网站的专业特色（1）本市天气实况，包括温度、风力、紫外线和未来七天的天气（2）中国大陆区域彩色云图2.1.5 友情链接和合作伙伴 在此栏目中，为友情链接网址，通过链接可以直接访问别的网址，并有下拉菜单的特殊效果以节省空间 合作伙伴采用了各个网站logo图片的超链接2.1.6 音乐 主页插入受广大网友喜爱的央视早间新闻天气预报的主题曲，来替换晚间新闻联播之后的那首老套的渔舟唱晚，并选择循环播放，轻音乐放松心情、百听不厌。2.1.7 专题区域 三个专题链接（1）2011高考气象服务专题（2）视频专题（3）图片专题2.2 子网页设计 副页设计采用简单明了的布局，将所在的版块内容突出的表现出来，方便浏览者浏览更多信息。2.2.1栏目设计在子网页中，因子网页数量较多栏目设计分为多种，在首页的基础上，建立多个子网页，以便于游客的浏览。每个子页使用相互独立的文件夹放置各子页包括：政务公开、气象新闻、气象视频、昌邑风采、基本情况、气象服务等多达16个子页。2.2.2 导航设计与首页使用相同色调却不同风格的另一种新的导航 2.2.3 风格与色彩搭配考虑到政府网站的特点，还是将风格变得比较庄重2.2.4 首页与子网页之间的链接 在导航栏、图片区、新闻栏等等都能完成首页与子网页之间的链接。点击链接文字时将会由黑色变红色。在导航栏中，由于时间关系，并不是每一个链接都能与子网页进行链接，这点需要继续完善。 2.2.5 子网页与子网页之间的链接在子网页中，往往都能看到如上图上的文字，在点击上一页或下一页时，将会进入下一个子网页。侧边栏也存在链接区。第三章 昌邑气象局网站设计的重难点分析3.1 网页设计的重点分析（1）网页主页的设计至关重要。主页的设计关系着整个网站的布局设计与内容介绍。（2）网页主页中布局的设计与风格、色彩搭配上至关重要。（3）网页副页模板的设计也是非常重要的，怎么样让它方便快捷的展现各个版块的内容！ (4) 网页中也要注意一些代码的引用，要妥善运用这些代码！3.2 网页设计的难点分析(1) .网页设计中最难设计的就是主页的版面设计是如何的设计、还有就是色彩搭配是否合理是否符合公司企业的性质。(2) .网页设计中副页设计模板要谨慎小心的设计，做到最完美的状态。(3).网页设计中各种元素的搭配是一个比较难的问题！既要美观好看、又要合理。（4）最重要的一点，IE6IE8IE9各浏览器之间的兼容问题，这是个困扰我的最大问题，经过数天的努力做出的网页在