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

* 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 知识目标： 掌握骨骼型页面效果图的设计要点 了解公益类页面的设计要点 熟练掌握Photoshop相关技术应用 能够进行骨骼型页面的设计与制作 能够利用Photoshop设计各类网页页面 能力目标： 第16章 综合实训二： 公益类网页设计 项目描述 16.1 项目分析 16.2 项目制作 16.3 授 课 安 排 切片与优化 16.4 类似页面 16.5 实训项目 16.6 项目描述 14.1 当前，随着我国经济成份、生活方式、社会组织形式和就业形式的日益多样化，社区居民群众的物质、文化、生活需求日益呈现出多样化、多层次的趋势。加强和改进社区服务工作有利于扩大党的执政基础、体现政府的施政宗旨；有利于扩大就业、解决社会问题、化解社会矛盾、促进社会和谐；有利于不断满足居民群众需求、提高人民生活质量、促进人的全面发展。 社区服务是面向群众的便民利民服务，是面向特殊群体的社会救助、社会福利和优抚保障服务，是面向下岗失业人员的再就业服务和社会保障服务。社区服务是我国改革开放以来探索的一条贴近基层、服务居民的社会化服务新路子。 天马社区服务网成立于2009年，是旨在为该社区1000多户居民提供社区服务的公益性网站，其核心思想为：以人为本、服务居民 、资源共享、共驻共建。 项目分析 14.2 从项目描述中可以看出：天马社区服务网是以为社区居民服务为主，面向的用户是广大居民，在设计上要求结构清晰明了，操作简单方便。在设计风格上要给人温馨大方的感觉。 Part 1 16.2.1 网页类型基础 公益类网站描述 公益是指有关社会公众的福祉和利益。公益类网站则是以公众为中心，为公众提供服务的网站。其面向人群为公众，因此在设计上以简单易用、实用为主，色彩搭配上应大气、温馨。 2. 天马社区服务网需求分析 作为公益性网站，天马社区服务网把公众需求放在第一位，以公众体验效果为依据，进行网站风格、栏目及内容的设定及制作。 网站内容包括：社区简介、社区。 Part 1 16.2.2 网页布局分析 版式分析 本项目采用的是骨骼型结构，如图1所示。骨骼型的网页版式是一种规范的、理性的分割方法。 图1 本项目版式图 图2 主色 Part 1 16.2.2 网页布局分析 2. 色彩设计分析 为了实现社区建站目的，本项目在色彩上主要由蓝色和白色组成，以渐变色突出网站立体效果如图2所示。蓝色是充满梦幻的色彩，始终保持清澈、浪漫的感觉。蓝色的象征意义取决于它的明度：明度高的蓝色象征清新与宁静；明度低的蓝色象征庄重与崇高；蓝色是万鸟翱翔后的天空和千帆过尽后大海，宁静、明亮、干净、透明、深邃、遥远、温柔、梦幻,内在、智慧。 3. 网页内容设计分析（如下图） 网页内容 LOGO 导航栏 横向通栏 内容区域 页脚 1）页眉设计 网页的页眉由LOGO站标、横向通栏、导航条三种元素组成，在设计上包含背景图片、标志图片，颜色上采用以蓝色与白色搭配的渐变色为主。 Logo整体设计由“图标+社区中文名称”搭配够成。 2）内容区域设计 天马社区网内容区域中的栏目是按照社区功能的实际需求进行设定的。在布局上天马社区网采用骨骼型的页面布局。骨骼型的页面布局较规范，天马社区网在内容区域横向上大体分为左、右两部分，其中右侧部分又可细分为上、中、下三部分。在内容区域各部分功能中左侧以导航的形式对社区简介、社区建设及就业服务进行了分类展示。其中社区简介划分为“社区介绍”、“社区集体”、“辖区单位”、“社区荣誉”、“社区平面图”五个栏目，社区建设划分为“社区建设”、“机构设置”、“政务公开”、“社区环境”、“社区学校”、“人民武装”六个栏目。右侧部分按照上、中、下三部分进行划分，是具体的栏目内容。其中右侧上部分包括“社区新闻”、“公告栏”两部分内容，右侧中部分包括“办事指南”、“政策法规”、“便民服务”三部分内容，右侧下部分包括“疑难解答”、“社区服务”连部分内容。 3）页脚设计 网页页脚是页面不可缺少的组成部分，设计上力求简单实用。天马社区网列举了社区的版权、地址、联系方式等基本信息。 Part 1 16.2.3 网页效果图 项目制作(流程简介) 16.3 16.3.1 绘制页面结构图 （1）新建photoshop文件：名称为天马社区网。画布为900*900像素。 （2）打开photoshop的标尺，使用辅助线构建页面布局。 16.3.2 页眉设计 项目制作 16.3 16.3.3 内容区域设计 项目