《网站前台设计综合实训》课件-项目五 政府机关类网站的设计与制作

教学内容客户需求分析网站风格定位网站建设方案网站设计方案报价明细任务一制作江宁市人民政府网站效果图任务二制作江宁市人民政府网站的横幅广告动画任务三江宁市人民政府网站的搭建征求客户意见，修改完善项目实训项目小结项目五政府机关类网站的设计与制作一、客户需求分析项目五政府机关类网站的设计与制作

根据对政府门户网站的主要功能的分析，以用户为中心的政府门户网站主体应该主要由信息服务、互动服务和在线服务三大核心部分组成。（1）信息服务要实现政务信息透明化公开化；（2）互动服务要建立起政府与市民沟通的有效渠道；（3）在线服务要始终贯彻以用户为中心的思想。二、网站风格定位项目五政府机关类网站的设计与制作政府门户网站作为政府面向社会的窗口，代表着政府形象，所以，页面风格应当庄重大方、简洁美观。政府网站的设计必须要突出政府网站功能定位，栏目框架脉络清晰，页面设计要尽可能照顾不同用户的使用习惯。同时，政府网站应当提供完善的辅助功能，帮助用户便捷地获取信息和服务。对于本项目江宁市人民政府网站，主要从以下三个方面来学习网站的风格定位。二、网站风格定位项目五政府机关类网站的设计与制作1．色彩：红色是中国文化中的基本崇尚色，它体现了中国人在精神和物质上的追求，象征着吉祥、喜庆。橙色是愉悦的颜色，被称之为“愉悦之橙”，它是充满力量，是生机勃勃的颜色，它表现出喜悦和温暖等积极的情感的同时，也是舒适的颜色。而红橙色是一种浓厚而不透明的色彩，好像充满内在温暖而闪闪发光，它象征着富有生气的大地。本项目选定红、橙两色为主色调，通过使用红色与橙色的渐变，使整个页面色彩统一，富有层次感。不同深浅的红色、橙色的配合，也使页面色彩产生对比与平衡，避免产生单调感。二、网站风格定位项目五政府机关类网站的设计与制作2．排版根据政府网站要承载大信息量的特点，以主页为例本项目采用了左中右结构的门户类网站的排版布局。左边与右边设置的是便民栏目，体现了用户为中心的建站思想；中间大面积为内容主区域，为使网站整体脉络清晰，中间部分使用一个Flash动画进行分隔，将热点关注的内容显示其中；同类栏目采用选项卡式打开方式，大大增加了网站的信息量。这样总体设计感觉简洁、清新、大气而富于时代感，既能展现江宁市的崭新形象，表现其现代化发展，又能体现江宁市政府是踏踏实实为人民办事的政府，充分体现出政府门户网站应有的特色。二、网站风格定位项目五政府机关类网站的设计与制作3．特效本项目运用Flash软件，在广告条部分添加了简单的动画；在城市新貌栏目，选择了几张城市特色图片制作了图片切换效果，动画在整个网站中起到了更好地宣传政府形象，突出关注热点的作用。三、网站建设方案项目五政府机关类网站的设计与制作1．页面风格创意设计项目网站页面风格颜色初步拟定采用红、橙两色为基础色，在此色调的基础上进行颜色渐变的展开，通过颜色的对比、过渡、平衡的巧妙运用，达到将江宁市政府网站建设得富有生机、简洁美观的目的。三、网站建设方案项目五政府机关类网站的设计与制作2．网站栏目划分根据我们对用户的了解，特建立以下栏目。

江宁概况

公告公示

互动交流

政策解读

政府公文

文化执法

统计分析

热点专题

动态信息

今日江宁

社会公益

政务公开

规范性文件

质量报告

公共财政

民意调查

政府工作

动态信息

江宁旅游

办事向导

干部任免

警情提示

工商执法

一周访问排行

办事服务

权威发布

江宁风貌

便民服务

新闻发布

曝光台

药监稽查

相关链接三、网站建设方案项目五政府机关类网站的设计与制作3．网站栏目内容简介4．网站建设拓扑图四、网站设计方案报价明细五、任务一制作江宁市人民政府网站效果图“江宁政府”网站，它包含了江宁概况、动态信息、政府工作、办事服务、互动交流、社会公益等诸多栏目，体现了政府网站的信息容量大，服务于民的主导思想。五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作依据网站风格定位及客户栏目设置要求，首页效果图图像文件规格设置为，宽度1010像素，高度1360像素，分辨率72像素/英寸。1．网站Logo、Banner和导航栏的制作2．江宁风貌栏目的制作3．公告公示栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作4．今日江宁栏目的制作5．动态信息栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作4．权威发布栏目的制作5．政策解读栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作6．网站中上部广告条的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作7．办事向导与便民服务栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作8．政府公文→公共财政栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作9．工商执法→曝光台栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作10．相关链接栏目的制作

五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作11．右侧顶部栏目的制作12

．政务公开栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作13．热点专题栏目的制作14

．一周访问排行栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作15．民意调查栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤一网站首页效果图的制作16．底部导航及版权栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤二网站子页“互动交流”效果图的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤二网站子页“互动交流”效果图的制作依据网站风格定位及客户栏目设置要求，子页“互动交流”效果图图像文件规格设置为，宽度1010像素，高度1360像素，分辨率72像素/英寸。说明：子页“互动交流”的部分框架与首页是相同的，这里与首页框架相同的部分不再赘述，下面我们一起来学习子页与首页不同部分的制作方法。五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤二网站子页“互动交流”效果图的制作1．法规征求意见栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤二网站子页“互动交流”效果图的制作2．公务邮箱入口栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤二网站子页“互动交流”效果图的制作3．市长信箱回音与部门区县信箱回音栏目的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤三网站子页“社会公益”效果图的制作五、任务一制作江宁市人民政府网站效果图项目五政府机关类网站的设计与制作步骤三网站子页“社会公益”效果图的制作依据网站风格定位及客户栏目设置要求，子页“社会公益”效果图图像文件规格设置为，宽度1010像素，高度1030像素，分辨率72像素/英寸。说明：子页“社会公益”的框架与子页“互动交流”基本相同，这里不再赘述。六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作本网站的Flash横幅广告主要包括两个部分。一是网站的logo和banner部分，主要以展示城市建设成果，城市良好的投资条件，城市良好的人文、居住环境等为主。二是网站中间部分的横幅广告，主要突出展示政府当前重点工作及需要民众关注的热点问题为主。六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

1.素材准备依据网站风格定位及客户要求，Flash影片文件的大小设置为，宽度1010像素，高度163像素，频率12帧/秒。六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

1.素材准备场景背景素材站标素材六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

1.素材准备站标图片素材六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

1.素材准备图片素材图片素材六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

2.动画制作（部分效果）六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站中间部分Flash横幅广告的制作

1.素材准备六、任务二Flash横幅广告的制作项目五政府机关类网站的设计与制作·网站中间部分Flash横幅广告的制作

2.动画制作（部分效果）七、任务三网站搭建过程项目五政府机关类网站的设计与制作网站搭建是项目建设的最后一个环节，是依据网站效果图，把网站用网页编辑工具搭建成形，以便于网上浏览。

进行网站搭建时，首先要利用Photoshop切片工具，将效果图进行切片输出。切出的图片作为网站的图片素材。七、任务三网站搭建过程项目五政府机关类网站的设计与制作步骤一网站首页的制作1.创建站点2.创建主页文件3.制作顶部的Banner部分4.制作导航栏及搜索栏5.制作江宁风貌栏目6.制作今日江宁栏目7.制作公告公示栏目8.制作权威发布栏目9.添加中上部Flash广告条七、任务三网站搭建过程项目五政府机关类网站的设计与制作步骤一网站首页的制作10.制作办事向导与便民服务栏目11.制作政府公文和公共财政栏目12.制作相关链接栏目13.制作底部导航及版权栏目14.制作右侧顶部栏目15.制作政务公开栏目16.分导航及各栏目文字添加链接七、任务三网站搭建过程项目五政府机关类网站的设计与制作步骤二

网站子页的制作本网站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；（2）表单的制作；（3）栏目背景图片的制作。步骤三链接主页与子页对主页与各子页之间进行链接，并使链接畅通。八、征求客户意见，修改完善项目五政府机关类网站的设计与制作对制作完成的江市人民政府门户网站进行调试发布，在广泛征集客户意见的基础上，尽可能