网页设计及切片基础教程演示课件.pptVIP

1.4 网页配色 色彩搭配的原则: 特色鲜明 搭配合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳） 讲究艺术性 网页配色不宜超过三种。(三种是从色相上来说的) 1.4 网页配色 216网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，它一共有 6 * 6 * 6 = 216 种颜色（其中彩色为210种，非彩色为6种）。 网页安全色 1.4 网页配色 网页安全色 　　216网页安全色在不同硬件环境、操作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。 　　但随着显示屏质量提升，我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。 　　红色代表热情、活泼、热闹、温暖、幸福、吉祥 　　橙色代表光明、华丽、兴奋、甜蜜、快乐 　　黄色代表明朗、愉快、高贵、希望 　　绿色代表新鲜、平静、和平、柔和、安逸、青春 　　蓝色代表深远、永恒、沉静、理智、诚实、寒冷 　　紫色代表优雅、高贵、魅力、自傲 　　白色代表纯洁、纯真、朴素、神圣、明快 　　灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 　　黑色代表崇高、坚实、严肃、刚健、粗莽 1.4 网页配色 色彩的象征情感 1.4 网页配色 配色工具推荐 1.4 网页配色 浅析网页配色实例 产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。 简洁灰白色调给网站带来科技感和现代感。 1.4 网页配色 浅析网页配色实例 2) 公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。 沿用logo的深蓝色为主色调，具有统一感；此外，深蓝色带给人更强的科技感。 1.4 网页配色 浅析网页配色实例 3) 学院网站：主要以介绍学院动态、交流信息为主，首页内容较多，所以配色上需要更为简洁、清爽，否则页面会显得杂乱。 采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。 1.5 绘制设计图 1.5 绘制设计图 新建画布，拉辅助线 搭建基本框架 具体（示意）内容录入 添加细节 1.5 绘制设计图 注意：先打出整体框架再雕琢细节！ 切忌：没有出整体架构就琢磨细节， 元素缺乏对齐； 　　　元素大小与间距控制不当， 　　　配色冲突与使用某些不合适的颜色。 切片基础 2 2.1 切片简介 何为切片 顾名思义，把图像切成几部分，再重新组合在一起。 常用的切片软件 Fireworks、Photoshop 切片目的 为了为网页下载提速，节约系统资源。 实现程序代码所无法达到的美工效果。 化学多媒体软件设计 化学多媒体软件设计 化学多媒体软件设计 化学多媒体软件设计 页面设计及切片基础_入门篇 2013.11.04 PPT制作：前端设计组 尹海施 目录 CONTENTS 好好的 1 页面设计 1.1 设计流程 1.2 需求分析 磨刀不误砍柴工，科学进行需求分析，是成功的网页设计不可缺少的步骤 Step 1: 确定主题、网站整体功能和风格 主题：学院网站 功能： 展示学院风采、新闻动态 风格： 较为严谨、正式 Step 1: 确定主题、网站整体功能和风格 主题：课程介绍 功能： 介绍课程、分享课程资源 风格： 与学院网站相比，更为开放、新颖 Step 1: 确定主题、网站整体功能和风格 主题：个人网站 功能： 展示个人风采 风格： 开放、自由，无固定版式 Step 2: 确定网站栏目结构 规划好网站的层次结构。清晰网站的导航，方便用户无障碍的使用网站，了解网站提供的功能。 Step 3: 确定页面的版式布局 根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。 Step 4: 确定网页配色 网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。 根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。 1.3 常见网页布局 ① 上下结构式（经典厚朴版式） 上方为banner、导航条 中间为slide，（动态的公司企业形象、广告区域） 下方为正文、内容部分 底部为版权部分 ② 左右结构式 左侧是导航条 右侧是正文、内容或公司企业形象展示 ③ 上左右结构式 左侧为点击出现的细分栏目导航条 右侧为内容区域 上方为主要的菜单导航条