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

《网页设计及切片基础教程ppt课件.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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绘制设计图21.1设计流程1.明确需求（网站整体结构与功能，设计风格，重构难度）2.确定布局和配色3.Ps/Fw绘制效果图（先搭建整体框架，再雕琢细节）31.2需求分析磨刀不

2、误砍柴工，科学进行需求分析，是成功的网页设计不可缺少的步骤如何分析？4Step1:确定主题、网站整体功能和风格主题：学院网站功能：展示学院风采、新闻动态风格：较为严谨、正式5Step1:确定主题、网站整体功能和风格主题：课程介绍功能：介绍课程、分享课程资源风格：与学院网站相比，更为开放、新颖6Step1:确定主题、网站整体功能和风格主题：个人网站功能：展示个人风采风格：开放、自由，无固定版式7Step2:确定网站栏目结构规划好网站的层次结构。清晰网站的导航，方便用户无障碍的使用网站，了解网站提供的功能。8Step3

3、:确定页面的版式布局根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。9Step4:确定网页配色网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。101.3常见网页布局1上下结构式（经典厚朴版式）2左右结构式3上左右结构式4水平条纹式布局5不规则布局11①上下结构式（经典厚朴版式）上方为banner、导航条中间为slid

4、e，（动态的公司企业形象、广告区域）下方为正文、内容部分底部为版权部分②左右结构式12左侧是导航条右侧是正文、内容或公司企业形象展示③上左右结构式13左侧为点击出现的细分栏目导航条右侧为内容区域上方为主要的菜单导航条④水平条纹式布局14使用横向条纹式的网页布局，每条纹理区分不同内容。水平方式布满屏幕，并使用不同的背景颜色或纹理，就像全屏的背景的网页设计一样，视觉效果很好。排版多样化，网站内容表达也非常清晰。⑤不规则布局15此类页面的信息量少，通常一张形象、广告照片下来，重在渲染网站的气氛。类似封面类型，有点击进入下

5、页的入口，适合于产品宣传或个人网站。161.4网页配色色彩搭配的原则:特色鲜明搭配合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳）讲究艺术性网页配色不宜超过三种。(三种是从色相上来说的)171.4网页配色216网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DACCount）为0、51、102、153、204、255时构成的颜色组合，它一共有6*6*6=216种颜色（其中彩色为210种，非彩色为6种）。网页安全色181.4网页配色网页安全色216网页安全色在不同硬件环境、操

6、作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。但随着显示屏质量提升，我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。红色代表热情、活泼、热闹、温暖、幸福、吉祥橙色代表光明、华丽、兴奋、甜蜜、快乐黄色代表明朗、愉快、高贵、希望绿色代表新鲜、平静、和平、柔和、安逸、青春蓝色代表深远、永恒、沉静、理智、诚实、寒冷紫色代表优雅、高贵、魅力、自傲白色代表纯洁、纯真、朴素、神圣、明快灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞黑色代表崇高、坚实、严肃、刚健、粗

7、莽191.4网页配色色彩的象征情感ColorSchemeDesignerAdobeKuler201.4网页配色配色工具推荐211.4网页配色浅析网页配色实例产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。简洁灰白色调给网站带来科技感和现代感。221.4网页配色浅析网页配色实例2)公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。沿用logo的深蓝色为主色调，具有统一感；此外，深蓝色带给人更强的科技感。231.4网页配色浅析网页配色

8、实例3)学院网站：主要以介绍学院动态、交流信息为主，首页内容较多，所以配色上需要更为简洁、清爽，否则页面会显得杂乱。采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。241.5绘制设计图1.新建画布，拉辅助线，搭建框架2.具体（示意）内容录入3.风格与细节调整251.5绘制设计图新建画布