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

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 切片目的 为了为网页下载提速，节约系统资源。 实现程序代码所无法达到的美工效果。 * 2.1 切片简介 这是在PS下的切片 * 2.1 切片简介 这是在Fw下的切片 见图中浅绿色框 * 2.2 切片思路 参考思路： 分析网页布局，分解出基本的结构，获得网页所需的主要图片。 切出所需要的图片即可。 将效果图化整为零，精确选择页面框架必须的区域切片。 切片数量不在多，适可而止，结构较简单的网页切片数一般在20片以内。 表格、边框等细节交由css实现。 * 2.3 切片步骤 参考步骤： 1.放大图片，观察细节部分，可利用辅助线和网格提高切片准确度。 2.切片隐藏文字内容，DW中重新插入 3.围绕布局，保持图片区域完整 4.规范命名切片 5.图片全部归入images子目录 * 切片前先分析页面结构 2.3 切片步骤切片 分析：页面主要由5块组成：banner、navigation、中间大图模块、文章列表以及copyright 放大图片观察页面的细节部分，看看哪些是可以直接用css控制的 边框和单色背景用css定义，不必切出。重复背景也不必全部切出，切出一像素再用css的background:repeat属性控制。 隐藏文字内容 切出所需切片 Tips:①可放大源图，利用辅助线和网格提高切片准确度；②边框无需切出，由css实现 * 2.3 切片步骤导出 按住Shift键可选择多个要导出的切片 【文件】【图像预览】 ，格式选JPEG，品质80, 【导出】 勾选1、4项，切片放在images文件夹下， 【导出】。 * 2.4 切片技巧 ① 切片命名语义化 中文名 建议命名 中文名 建议命名 导航 nav 栏目 column 页头 banner/header 侧栏 sidebar 版权栏 copyright/footer 搜索栏 search/searchbar 内容 content/text 背景 background/bg 滑动图 slide 新闻 news * 2.4 切片技巧 ② 切片命名语义化 * 2.4 切片技巧 ③ 重构对切片的要求——切我所选 以清洁生产首页实例，譬如我只想切好了banner和slider，只要按住shift，然后鼠标左键选中想要的切片，按刚才的方法导出即可。 * 2.4 切片技巧 ④ 其他需要注意之处： 输出切片页面用英文名！ 原则：尽量对齐切，避免出现跨行跨列的切法。 页面边框无需