网页设计及切片基础教程课件

1、化学多媒体软件设计页面设计及切片基础_入门篇2013.11.04PPT制作：前端设计组尹海施目录 CONTENTS1. 页面设计1.1 设计流程1.2 需求分析1.3 常见网页布局1.4 网页配色1.5 绘制设计图2. 切片基础2.1 切片简介2.2 切片思路2.3 切片步骤2.4 切片技巧化学多媒体软件设计PPT制作：前端设计组目录 CONTENT11 页面设计1.1 设计流程1.2 需求分析1.3 常见网页布局1.4 网页配色1.5 绘制设计图11 页面设计1.1 设计流程1.2 需求分析1.3 常见网2 1.1 设计流程1. 明确需求（网站整体结构与功能，设计风格，重构难度）2. 确定布

2、局和配色3. Ps/Fw绘制效果图（先搭建整体框架，再雕琢细节）2 1.1 设计流程1. 明确需求（网站整体结构与功能，设3 1.2 需求分析磨刀不误砍柴工，科学进行需求分析，是成功的网页设计不可缺少的步骤如何分析？3 1.2 需求分析磨刀不误砍柴工，科学进行需求分析，是成功4 Step 1: 确定主题、网站整体功能和风格主题：学院网站功能：展示学院风采、新闻动态风格：较为严谨、正式4 Step 1: 确定主题、网站整体功能和风格主题：学院网5 Step 1: 确定主题、网站整体功能和风格主题：课程介绍功能：介绍课程、分享课程资源风格：与学院网站相比，更为开放、新颖5 Step 1: 确定主题

3、、网站整体功能和风格主题：课程介6 Step 1: 确定主题、网站整体功能和风格主题：个人网站功能：展示个人风采风格：开放、自由，无固定版式6 Step 1: 确定主题、网站整体功能和风格主题：个人网7 Step 2: 确定网站栏目结构规划好网站的层次结构。清晰网站的导航，方便用户无障碍的使用网站，了解网站提供的功能。7 Step 2: 确定网站栏目结构规划好网站的层次结构。清8 Step 3: 确定页面的版式布局根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。8 Step 3: 确定页面的版式布局根据网站类型、展示内容9 Ste

4、p 4: 确定网页配色网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。9 Step 4: 确定网页配色网页的色彩，是访问者登录页面10 1.3 常见网页布局1上下结构式（经典厚朴版式）2左右结构式3上左右结构式4水平条纹式布局5不规则布局10 1.3 常见网页布局1上下结构式（经典厚朴版式）2左右11 上下结构式（经典厚朴版式）上方为banner、导航条中间为slide，（动态的公司企业形象、广告区域）下方为正文、内容部分底部为版权部分11 上下结构式（经典

5、厚朴版式）上方为banner、导航 左右结构式12左侧是导航条右侧是正文、内容或公司企业形象展示 左右结构式12左侧是导航条右侧是正文、内容或公司企业形 上左右结构式13左侧为点击出现的细分栏目导航条右侧为内容区域上方为主要的菜单导航条 上左右结构式13左侧为点击出现的细分栏目导航条右侧为内 水平条纹式布局14使用横向条纹式的网页布局，每条纹理区分不同内容。水平方式布满屏幕，并使用不同的背景颜色或纹理，就像全屏的背景的网页设计一样，视觉效果很好。排版多样化，网站内容表达也非常清晰。 水平条纹式布局14使用横向条纹式的网页布局，每条纹理 不规则布局15此类页面的信息量少，通常一张形象、广告照片下

6、来，重在渲染网站的气氛。类似封面类型，有点击进入下页的入口，适合于产品宣传或个人网站。 不规则布局15此类页面的信息量少，通常一张形象、广16 1.4 网页配色色彩搭配的原则: 特色鲜明搭配合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳）讲究艺术性网页配色不宜超过三种。(三种是从色相上来说的)16 1.4 网页配色色彩搭配的原则: 17 1.4 网页配色216网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，它一共有 6 * 6 * 6 = 216 种颜色（其中彩色为210种

7、，非彩色为6种）。网页安全色17 1.4 网页配色216网页安全色是当红色（Red）、绿18 1.4 网页配色网页安全色216网页安全色在不同硬件环境、操作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。但随着显示屏质量提升，我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。18 1.4 网页配色网页安全色216网页安全色在不同硬红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表

8、优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽19 1.4 网页配色色彩的象征情感红色代表热情、活泼、热闹、温暖、幸福、吉祥 19 1.4 Color Scheme Designer Adobe Kuler20 1.4 网页配色配色工具推荐 Color Scheme Designer 21 1.4 网页配色浅析网页配色实例产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。简洁灰白色调给网站带来科技感和现代感。21 1.4 网页配色浅析网页配色实例产

9、品类：主要目的需求展22 1.4 网页配色浅析网页配色实例2) 公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。沿用logo的深蓝色为主色调，具有统一感；此外，深蓝色带给人更强的科技感。22 1.4 网页配色浅析网页配色实例2) 公司、企业类：展23 1.4 网页配色浅析网页配色实例3) 学院网站：主要以介绍学院动态、交流信息为主，首页内容较多，所以配色上需要更为简洁、清爽，否则页面会显得杂乱。采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。23 1.4 网页配色浅析网页配色实例3

10、) 学院网站：主要以241.5 绘制设计图1. 新建画布，拉辅助线，搭建框架2. 具体（示意）内容录入3. 风格与细节调整241.5 绘制设计图1. 新建画布，拉辅助线，搭建框架2.251.5 绘制设计图新建画布，拉辅助线搭建基本框架具体（示意）内容录入添加细节251.5 绘制设计图新建画布，拉辅助线搭建基本框架具体（示261.5 绘制设计图注意：先打出整体框架再雕琢细节！切忌：没有出整体架构就琢磨细节， 元素缺乏对齐；元素大小与间距控制不当，配色冲突与使用某些不合适的颜色。261.5 绘制设计图注意：先打出整体框架再雕琢细节！ 切片基础2722.1 切片简介2.2 切片思路2.3 切片步骤2

11、.4 切片技巧 切片基础2722.1 切片简介2.2 切片思路2.3 切片28 2.1 切片简介何为切片 顾名思义，把图像切成几部分，再重新组合在一起。常用的切片软件 Fireworks、Photoshop切片目的 为了为网页下载提速，节约系统资源。 实现程序代码所无法达到的美工效果。28 2.1 切片简介29 2.1 切片简介这是在PS下的切片29 2.1 切片简介30 2.1 切片简介这是在Fw下的切片见图中浅绿色框30 2.1 切片简介31 2.2 切片思路参考思路：分析网页布局，分解出基本的结构，获得网页所需的主要图片。切出所需要的图片即可。 将效果图化整为零，精确选择页面框架必须的区

12、域切片。切片数量不在多，适可而止，结构较简单的网页切片数一般在20片以内。表格、边框等细节交由css实现。31 2.2 切片思路参考思路：32 2.3 切片步骤参考步骤：1.放大图片，观察细节部分，可利用辅助线和网格提高切片准确度。2.切片隐藏文字内容，DW中重新插入3.围绕布局，保持图片区域完整4.规范命名切片5.图片全部归入images子目录32 2.3 切片步骤参考步骤：33切片前先分析页面结构 2.3 切片步骤切片分析：页面主要由5块组成：banner、navigation、中间大图模块、文章列表以及copyright放大图片观察页面的细节部分，看看哪些是可以直接用css控制的边框和单

13、色背景用css定义，不必切出。重复背景也不必全部切出，切出一像素再用css的background:repeat属性控制。隐藏文字内容切出所需切片Tips:可放大源图，利用辅助线和网格提高切片准确度；边框无需切出，由css实现33切片前先分析页面结构 2.3 切片步骤切片分析：页面34 2.3 切片步骤导出按住Shift键可选择多个要导出的切片【文件】【图像预览】 ，格式选JPEG，品质80, 【导出】勾选1、4项，切片放在images文件夹下， 【导出】。34 2.3 切片步骤导出按住Shift键可选择多个要导35 2.4 切片技巧 切片命名语义化中文名建议命名中文名建议命名导航nav栏目co

14、lumn页头banner/header侧栏sidebar版权栏copyright/footer搜索栏search/searchbar内容content/text背景background/bg滑动图slide新闻news35 2.4 切片技巧 切片命名语义化中文名建议命名中文名36 2.4 切片技巧 切片命名语义化36 2.4 切片技巧 切片命名语义化37 2.4 切片技巧 重构对切片的要求切我所选以清洁生产首页实例，譬如我只想切好了banner和slider，只要按住shift，然后鼠标左键选中想要的切片，按刚才的方法导出即可。37 2.4 切片技巧 重构对切片的要求切我所选以清洁38 2.4 切片技巧 其他需要注意之处： 输出切片页面用英文名！原则：尽量对齐切，避免出现跨行跨列的切法。页面边框无需切出，由css实现即可。Fw导出切片前，可隐藏网页整体边框不导出，Dw中用css实现。纯色区域不用切，如前面的文章列表背景，可直接用css实现；渐变色区域切一像素即可 ，如前面提到的导航条、copyright。38 2.4 切片技巧 其他需要注意之处： 输出切