1、化学多媒体软件设计页面设计及切片基础_入门篇2013.11.04PPT制作：前端设计组尹海施目录 CONTENTS1.页面设计1.1 设计流程1.2 需求分析1.3 常见网页布局1.4 网页配色1.5 绘制设计图2.切片基础2.1 切片简介2.2 切片思路2.3 切片步骤2.4 切片技巧化学多媒体软件设计11 页面设计1.1 设计流程1.2 需求分析1.3 常见网页布局1.4 网页配色1.5 绘制设计图化学多媒体软件设计2 1.1 设计流程1.明确需求（网站整体结构与功能，设计风格，重构难度）2.确定布局和配色3.Ps/Fw绘制效果图（先搭建整体框架，再雕琢细节）化学多媒体软件设计3 1.2
2、需求分析 磨刀不误砍柴工，科学进行需求分析，是成功的网页设计不可缺少的步骤化学多媒体软件设计4 Step 1:确定主题、网站整体功能和风格 主题：学院网站 功能：展示学院风采、新闻动态 风格：较为严谨、正式化学多媒体软件设计5 Step 1:确定主题、网站整体功能和风格 主题：课程介绍 功能：介绍课程、分享课程资源 风格：与学院网站相比，更为开放、新颖化学多媒体软件设计6 Step 1:确定主题、网站整体功能和风格 主题：个人网站 功能：展示个人风采 风格：开放、自由，无固定版式化学多媒体软件设计7 Step 2:确定网站栏目结构 规划好网站的层次结构。清晰网站的导航，方便用户无障碍的使用网站
3、，了解网站提供的功能。化学多媒体软件设计8 Step 3:确定页面的版式布局 根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。化学多媒体软件设计9 Step 4:确定网页配色 网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。化学多媒体软件设计10 1.3 常见网页布局1 上下结构式（经典厚朴版式）2 左右结构式3 上左右结构式4 水平条纹式布局5 不规则布局化学多媒体软件设计11 上下结构式（经
4、典厚朴版式）上方为banner、导航条中间为slide，（动态的公司企业形象、广告区域）下方为正文、内容部分底部为版权部分化学多媒体软件设计 左右结构式12左侧是导航条右侧是正文、内容或公司企业形象展示化学多媒体软件设计 上左右结构式13左侧为点击出现的细分栏目导航条右侧为内容区域上方为主要的菜单导航条化学多媒体软件设计 水平条纹式布局14 使用横向条纹式的网页布局，每条纹理区分不同内容。水平方式布满屏幕，并使用不同的背景颜色或纹理，就像全屏的背景的网页设计一样，视觉效果很好。排版多样化，网站内容表达也非常清晰。化学多媒体软件设计 不规则布局15此类页面的信息量少，通常一张形象、广告照片下来，
5、重在渲染网站的气氛。类似封面类型，有点击进入下页的入口，适合于产品宣传或个人网站。化学多媒体软件设计16 1.4 网页配色色彩搭配的原则:特色鲜明 搭配合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳）讲究艺术性 网页配色不宜超过三种。(三种是从色相上来说的)化学多媒体软件设计17 1.4 网页配色216网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，它一共有 6*6*6=216 种颜色（其中彩色为210种，非彩色为6种）。网页安全色化学多媒体软件设计18 1.4 网页配色网
6、页安全色216网页安全色在不同硬件环境、操作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。但随着显示屏质量提升，我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。化学多媒体软件设计红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽1
7、9 1.4 网页配色色彩的象征情感化学多媒体软件设计 Color Scheme Designer Adobe Kuler20 1.4 网页配色配色工具推荐化学多媒体软件设计21 1.4 网页配色浅析网页配色实例1)产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。简洁灰白色调给网站带来科技感和现代感。化学多媒体软件设计22 1.4 网页配色浅析网页配色实例2)公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。沿用logo的深蓝色为主色调，具有统一感；此外，深蓝色带给人更强的科技感。化学多媒体软件设计23 1.4
8、 网页配色浅析网页配色实例3)学院网站：主要以介绍学院动态、交流信息为主，首页内容较多，所以配色上需要更为简洁、清爽，否则页面会显得杂乱。采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。化学多媒体软件设计241.5 绘制设计图1.新建画布，拉辅助线，搭建框架2.具体（示意）内容录入3.风格与细节调整化学多媒体软件设计251.5 绘制设计图新建画布，拉辅助线搭建基本框架具体（示意）内容录入添加细节化学多媒体软件设计261.5 绘制设计图注意：先打出整体框架再雕琢细节！切忌：没有出整体架构就琢磨细节，元素缺乏对齐；元素大小与
9、间距控制不当，配色冲突与使用某些不合适的颜色。化学多媒体软件设计 切片基础2722.1 切片简介2.2 切片思路2.3 切片步骤2.4 切片技巧化学多媒体软件设计28 2.1 切片简介l 何为切片 顾名思义，把图像切成几部分，再重新组合在一起。l 常用的切片软件 Fireworks、Photoshopl切片目的 为了为网页下载提速，节约系统资源。实现程序代码所无法达到的美工效果。化学多媒体软件设计29 2.1 切片简介这是在PS下的切片化学多媒体软件设计30 2.1 切片简介这是在Fw下的切片见图中浅绿色框化学多媒体软件设计31 2.2 切片思路 参考思路：l 分析网页布局，分解出基本的结构，
10、获得网页所需的主要图片。l切出所需要的图片即可。l 将效果图化整为零，精确选择页面框架必须的区域切片。l切片数量不在多，适可而止，结构较简单的网页切片数一般在20片以内。l表格、边框等细节交由css实现。化学多媒体软件设计32 2.3 切片步骤 参考步骤：l1.放大图片，观察细节部分，可利用辅助线和网格提高切片准确度。l2.切片隐藏文字内容，DW中重新插入l3.围绕布局，保持图片区域完整l4.规范命名切片l5.图片全部归入images子目录化学多媒体软件设计33切片前先分析页面结构 2.3 切片步骤切片分析：页面主要由5块组成：banner、navigation、中间大图模块、文章列表以及co
11、pyright放大图片观察页面的细节部分，看看哪些是可以直接用css控制的边框和单色背景用css定义，不必切出。重复背景也不必全部切出，切出一像素再用css的background:repeat属性控制。隐藏文字内容切出所需切片Tips:可放大源图，利用辅助线和网格提高切片准确度；边框无需切出，由css实现化学多媒体软件设计34 2.3 切片步骤导出按住Shift键可选择多个要导出的切片【文件】【图像预览】，格式选JPEG，品质80,【导出】勾选1、4项，切片放在images文件夹下，【导出】。化学多媒体软件设计35 2.4 切片技巧 切片命名语义化中文名建议命名中文名建议命名导航nav栏目co
12、lumn页头banner/header侧栏sidebar版权栏copyright/footer搜索栏search/searchbar内容content/text背景background/bg滑动图slide新闻news化学多媒体软件设计36 2.4 切片技巧 切片命名语义化化学多媒体软件设计37 2.4 切片技巧 重构对切片的要求切我所选以清洁生产首页实例，譬如我只想切好了banner和slider，只要按住shift，然后鼠标左键选中想要的切片，按刚才的方法导出即可。化学多媒体软件设计38 2.4 切片技巧 其他需要注意之处：a.输出切片页面用英文名！b.原则：尽量对齐切，避免出现跨行跨列的
13、切法。c.页面边框无需切出，由css实现即可。d.Fw导出切片前，可隐藏网页整体边框不导出，Dw中用css实现。e.纯色区域不用切，如前面的文章列表背景，可直接用css实现；渐变色区域切一像素即可，如前面提到的导航条、copyright。化学多媒体软件设计39 2.4 切片技巧 其他需要注意之处：f.若用Ps切片，选择“存储为web使用格式”，保存类型“图像和html”，文件名一般为“index.html”。g.圆角矩形可切首尾圆角部分，中间再切一像素平铺；若无需兼容旧版本浏览器，可只在中间切一像素，再用border-radius实现（中级篇将进一步介绍）。h.logo完整切、Banner切1-3刀。The EndThank you!
