《网站前台设计综合实训》课件-项目六 企业类网站的设计与制作

教学内容客户需求分析网站风格定位网站建设方案网站设计方案报价明细任务一制作平安药业集团网站效果图任务二制作平安药业集团网站的横幅广告动画任务三平安药业集团网站的搭建征求客户意见，修改完善项目实训项目小结项目六企业类网站的设计与制作一、客户需求分析项目六企业类网站的设计与制作通过对平安药业集团有限公司建站目的及公司情况的深入了解，拟定本网站具有如下功能：（1）树立企业形象，展示并提高企业的竞争力；（2）展示产品及技术优势；（3）发布信息；（4）推销新产品；（5）提高工作效率；（6）加强客户服务；（7）增进与客户的沟通；（8）为消费者服务；（9）刺激需求。二、网站风格定位项目六企业类网站的设计与制作1．色彩：本项目选定蓝色为主色调，通过使用蓝色、灰色及其渐变色，使整个页面色彩统一，富有层次感。除了整体的蓝色以外，页面不同栏目配以不同深浅的橙色、绿色等图片，以达到色彩的对比、平衡，避免产生单调感。二、网站风格定位项目六企业类网站的设计与制作2．排版根据本网站承载信息量大的特点，以主页为例，采用了左中右结构的排版布局。左边设置的是一些栏目的快速通道，体现了操作便捷的特点；右边设置的是一些实时及常识类的栏目，增强了主页的功能，将浏览者最为关注的内容呈现到了主页上；中间大面积为内容主区域，为使网站整体脉络清晰，增强页面的灵动性，在页面中间部分使用一个Flash广告条进行分隔。这样总体设计感觉简洁、清新、大气而富于时代感。二、网站风格定位项目六企业类网站的设计与制作3．特效本项目在网站站标、广告条部分及中间广告条部分制作了Flash动画；在公告板栏目中设置了滚动字幕效果，使整个页面动静结合，视觉清晰。三、网站建设方案项目六企业类网站的设计与制作1．页面风格创意设计网站页面风格颜色初步拟定采用蓝色为基础色，采用蓝色、灰色及其渐变色的配合，着重体现平安药业集团的企业理念，给人以冷静、理智、安详、广阔的视觉感受。页面顶部以大幅Flash动画来表现网站站标和广告条部分，给人清新的视觉冲击力，同时，通过动画中的广告语也能让浏览者更快地了解企业。页面设计中注重了图文并茂、动静结合、清新大气，使浏览者有愉快的心情来了解企业、了解企业产品。三、网站建设方案项目六企业类网站的设计与制作2．网站栏目划分根据我们对平安药业集团的了解，建立了以下栏目。

走进平安

新闻中心

产业基地

科技研发

市场营销

品牌展示

企业文化

新品推介

旗下企业

公告板

快速通道

企业荣誉

健康专栏

版权说明三、网站建设方案项目六企业类网站的设计与制作3．网站栏目内容简介4．网站建设拓扑图四、网站设计方案报价明细五、任务一制作平安药业集团网站效果图平安药业集团网站包含了旗下企业、企业动态、公告板、企业荣誉、快速通道、政策法规、行业资讯、健康专栏、特色栏目等内容，页面风格清晰，信息容量大，同时体现了操作便捷的特点。五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作依据网站风格定位及客户栏目设置要求，首页效果图图像文件规格设置为，宽度1004像素，高度1460像素，分辨率72像素/英寸。1．网站Logo、Banner和导航栏的制作2．导航与内容区过渡部分的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作3．平安药业集4.快速通道栏目的制作团旗下企业栏目的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作5．上市公司、心系社会、视频中心、平安送药万里行四个栏目的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作6．企业动态栏目的制作7.政策法规栏目的制作

五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作8．行业资讯栏目的制作

五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作9．公告板、企业荣誉、健康专栏三个栏目的制作

五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤一网站首页效果图的制作10．产品查询栏目的制作11.版权栏目的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤二网站子页“走进平安”效果图的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤二网站子页“走进平安”效果图的制作依据网站风格定位及客户栏目设置要求，子页“走进平安”效果图图像文件规格设置为，宽度1004像素，高度1340像素，分辨率72像素/英寸。该子页的框架与首页基本相同，子页各个栏目制作用到的知识首页中均已介绍过，故这里不再进行详细阐述。五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤三网站子页“新闻中心”效果图的制作五、任务一制作平安药业集团网站效果图项目六企业类网站的设计与制作步骤三网站子页“新闻中心”效果图的制作依据网站风格定位及客户栏目设置要求，子页“新闻中心”效果图图像文件规格设置为，宽度为1004像素，高度为1413像素，分辨率为72像素/英寸。该子页的框架与首页基本相同，子页各个栏目制作用到的知识首页中均已介绍过，故这里不再进行详细阐述。六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作本网站的横幅广告由两部分组成。一是网站的Logo和Banner部分。这部分Flash动画在色彩设计方面，为了与页面整体色彩相一致，主要采用以蓝色为基础色，配以绿色、灰色，增加画面的层次感；在内容上，主要表达两层含义，质量保证“做良心药、做放心药”；企业精神“开拓创新、超越自我”，增加百姓对企业的信心。二是网站中间的横幅广告条。其主要作用是宣传企业品牌形象，即世界制药50强企业、中国百姓放心的品牌。六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站的logo和banner部分Flash动画制作

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

1.素材准备制作场景背景图片六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站的logo和banner部分Flash横幅广告的制作

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

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

1.素材准备六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站中间横幅广告条的制作

1.素材准备合成图片六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站中间横幅广告条的制作

1.素材准备六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站中间横幅广告条的制作

1.素材准备六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站中间横幅广告条的制作

1.素材准备六、任务二Flash横幅广告的制作项目六企业类网站的设计与制作·网站中间横幅广告条的制作

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

进行网站搭建时，首先要利用Photoshop切片工具，将效果图进行切片输出。切出的图片作为网站的图片素材。七、任务三网站搭建过程项目六企业类网站的设计与制作步骤一网站首页的制作1.创建站点2.创建主页文件3.制作顶部的Banner部分4.制作导航栏5.制作平安药业集团旗下企业栏目6.制作快速通道栏目7.制作上市公司、心系社会、视频中心、平安送药万里行四个栏目8.制作企业动态栏目七、任务三网站搭建过程项目六企业类网站的设计与制作步骤一网站首页的制作9.制作公告板栏目10.制作企业荣誉栏目11.添加中间Flash广告条12.制作政策法规栏目13.制作行业资讯栏目14.制作健康专栏栏目15.制作产品查询栏目16.制作版权说明栏目17.为栏目文字添加链接七、任务三网站搭建过程项目六企业类网站的设计与制作步骤二

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