网站效果图设计 教学课件 作者 刘心美第16章综合实训二： 公益类网页设计.ppt

《网站效果图设计 教学课件 作者 刘心美第16章综合实训二： 公益类网页设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第16章综合实训二：公益类网页设计知识目标：掌握骨骼型页面效果图的设计要点了解公益类页面的设计要点熟练掌握Photoshop相关技术应用能够进行骨骼型页面的设计与制作能够利用Photoshop设计各类网页页面能力目标：第16章综合实训二：公益类网页设计项目描述16.1项目分析16.2项目制作16.3授课安排切片与优化16.4类似页面16.5实训项目16.6项目描述14.1当前，随着我国经济成份、生活方式、社会组织形式和就业形式的日益多样化，社区居民群众的物质、文化、生活需求日益呈现出多样化、多层次的趋势。加强和

2、改进社区服务工作有利于扩大党的执政基础、体现政府的施政宗旨；有利于扩大就业、解决社会问题、化解社会矛盾、促进社会和谐；有利于不断满足居民群众需求、提高人民生活质量、促进人的全面发展。社区服务是面向群众的便民利民服务，是面向特殊群体的社会救助、社会福利和优抚保障服务，是面向下岗失业人员的再就业服务和社会保障服务。社区服务是我国改革开放以来探索的一条贴近基层、服务居民的社会化服务新路子。天马社区服务网成立于2009年，是旨在为该社区1000多户居民提供社区服务的公益性网站，其核心思想为：以人为本、服务居民、资源共享

3、、共驻共建。项目分析14.2从项目描述中可以看出：天马社区服务网是以为社区居民服务为主，面向的用户是广大居民，在设计上要求结构清晰明了，操作简单方便。在设计风格上要给人温馨大方的感觉。Part116.2.1网页类型基础公益类网站描述公益是指有关社会公众的福祉和利益。公益类网站则是以公众为中心，为公众提供服务的网站。其面向人群为公众，因此在设计上以简单易用、实用为主，色彩搭配上应大气、温馨。2.天马社区服务网需求分析作为公益性网站，天马社区服务网把公众需求放在第一位，以公众体验效果为依据，进行网站风格、栏目及内容

4、的设定及制作。网站内容包括：社区简介、社区。Part116.2.2网页布局分析版式分析本项目采用的是骨骼型结构，如图1所示。骨骼型的网页版式是一种规范的、理性的分割方法。图1本项目版式图图2主色Part116.2.2网页布局分析2.色彩设计分析为了实现社区建站目的，本项目在色彩上主要由蓝色和白色组成，以渐变色突出网站立体效果如图2所示。蓝色是充满梦幻的色彩，始终保持清澈、浪漫的感觉。蓝色的象征意义取决于它的明度：明度高的蓝色象征清新与宁静；明度低的蓝色象征庄重与崇高；蓝色是万鸟翱翔后的天空和千帆过尽后大海，宁静

5、、明亮、干净、透明、深邃、遥远、温柔、梦幻,内在、智慧。3.网页内容设计分析（如下图）1）页眉设计网页的页眉由LOGO站标、横向通栏、导航条三种元素组成，在设计上包含背景图片、标志图片，颜色上采用以蓝色与白色搭配的渐变色为主。Logo整体设计由“图标+社区中文名称”搭配够成。2）内容区域设计天马社区网内容区域中的栏目是按照社区功能的实际需求进行设定的。在布局上天马社区网采用骨骼型的页面布局。骨骼型的页面布局较规范，天马社区网在内容区域横向上大体分为左、右两部分，其中右侧部分又可细分为上、中、下三部分。在内容区域

6、各部分功能中左侧以导航的形式对社区简介、社区建设及就业服务进行了分类展示。其中社区简介划分为“社区介绍”、“社区集体”、“辖区单位”、“社区荣誉”、“社区平面图”五个栏目，社区建设划分为“社区建设”、“机构设置”、“政务公开”、“社区环境”、“社区学校”、“人民武装”六个栏目。右侧部分按照上、中、下三部分进行划分，是具体的栏目内容。其中右侧上部分包括“社区新闻”、“公告栏”两部分内容，右侧中部分包括“办事指南”、“政策法规”、“便民服务”三部分内容，右侧下部分包括“疑难解答”、“社区服务”连部分内容。3）页脚设

7、计网页页脚是页面不可缺少的组成部分，设计上力求简单实用。天马社区网列举了社区的版权、地址、联系方式等基本信息。Part116.2.3网页效果图项目制作(流程简介)16.316.3.1绘制页面结构图（1）新建photoshop文件：名称为天马社区网。画布为900*900像素。（2）打开photoshop的标尺，使用辅助线构建页面布局。16.3.2页眉设计项目制作16.316.3.3内容区域设计项目制作16.316.3.4页脚设计切片与优化16.4此骨骼型页面效果图的背景主要是页眉中的图片背景，为了提高加载速度，可

8、将大图片分割成几块，以大图片为基准，对其它内容进行定位，切片时顺序是由背景到前景，页面由上而下。可以通过DIV+CSS样式设置得到的效果，则不需要切片。16.4.1页眉切片（1）将天马社区网.psd效果图中页眉中的导航文字隐藏。（2）选择工具箱中的【切片】工具背景切片，在效果图中拖动出一个矩形区域，在本项目中将整个页眉切片3块区域，蓝色文字为切片编号。（3）选择【文件】【存储为Web