电子教案与课件：网页设计与制作CS6素材-第1章.ppt

1、1234 56 78910网页设计的艺术设计前的考虑1、2、3、1、用户 网页设计者要站在经营者的角度,同时也要站在访问者的角度开展设计工作,将最有用、最实际的内容放在网页的首要位置，并尽可能迎合多数用户的浏览习惯。2、内容 “内容是第一的，”在制作网页之前，要先行想好页面中要放置的内容，也就是网站所有者要告诉访问者，且访问者最想知道的信息。网站的内容可以包括文字、图片、影像、声音等。3、浏览器 在页面中设置几种不同的观赏模式选项（例如纯文字模式，框架模式、FLASH模式等），供访问者自行选择，就可以避免许多潜在的用户流失。设计步骤设计步骤一、确定主题 同书籍一样，网站有不同的门类。比较常见的

2、有电子商务、旅游、音乐等网站。不同门类网站的版式不尽相同，因此设计之前需要首先明确网站表达的主题。1、门户类网站、门户类网站 所谓门户类网站，就是能将各种数据资源和互联网资源集成于一个信息管理平台之上，并以统一的用户接口提供给用户及企业，在企业和企业、企业和客户及内部员工之间建立信息通道，且能够释放存储在企业内部和外部的各种信息的整合式站点。包罗万象型包罗万象型包罗万象型这一类的门户网站给人的整体感觉通常是内容多、文字多，没有很多的空隙。所以多以白色作为背景，这样可以衬托出琳琅满目的内容，也可以使整个版面显得干净利落，不会让访问者感觉拥挤和眼晕。这一类网页通常使用三种颜色的文本。内容专一型内容

3、专一型 这一类的门户网站会分为很多的类型，在设计的时候可以根据所要面对的用户群,进行“量体裁衣”，根据用户不同的要求制作出不同的门户网站。网站结构简单，内容有限，主要以共享企业信息、宣传企业形象为主，设计时不仅可以采用庄重、严谨的风格，也可以像设计个人网站一样体现强烈的个性。2、企业类网站、企业类网站 这一类网站的设计时要注意让访问者保持愉快的心情以及对新鲜事物的关注。清新亮丽的颜色和便于访问的页面布局将会大提高网页在用户心目中的“生命值”。这一类企业网站，主要功能是充分宣传企业文化和企业形象。页面上除了突出的企业LOGO和企业名称外，还会有相应的口号等与企业形象有关的构成要素。下图例为索尼爱

4、立信在意大利和美国的网站页面：295、个人网站、个人网站 个人网页的重点在于内容要有自己的见地,让访问者过目不忘,这样才能在平凡中彰显网站主人的个性.30二、收集素材二、收集素材文字图片确定布局元素多媒体图形图像软件的辅助31企业理念(动画形式)导航栏项目标题版权说明32企业相关图片客户提供设计者自己搜集或绘制图标及广告图片分析在该网页中分析在该网页中,哪些图片是需要在设计之初就准备好的哪些图片是需要在设计之初就准备好的?3334三、确定布局元素三、确定布局元素 这里所指的布局不是网页的框架,而是在页面中放置哪些元素、采用哪些形式放置能够最大程度地贴合网站主题并迎合用户的心理。35页面的整体尺

5、寸页面的整体尺寸1024*76836800*60037多屏38页头和页脚页头和页脚 页头就是页眉，作用是定义页面的主题，其中包括LOGO、网站标题、旗帜广告（banner)，主导航栏，这些都是页面的重要组成部分。页脚包括：副导航栏、制作者或制作公司信息、版权说明等。页头页头页脚页脚39多媒体多媒体图形图像软件的辅助图形图像软件的辅助多媒体元素不仅包括视频，还有声音、动画等。几乎所有素材图片在应用在网页中之前，都要经过图形图像软件的辅助处理。无论是图片的颜色、大小还是形状，都需要使用软件进行调节。40版式设计的原则 让用户在获得美感的同时，接受作者想要传达的信息。首先是主题先明突出。其次是形式与

6、内容的统一，第三，要强化整体布局。将版面的各种编排要素在编排结构及色彩上作整体设计。最佳的诉求效果基本的视觉元素鲜明的风格和特色41最佳的诉求效果点构图：点具有可以使视觉集中的特性，具有强烈的视觉吸引力。4243线构图：线在空间中具有方向性和运动性。给人以工整、坚定、直爽的感觉。曲线给人韵律、流畅、温婉的感觉。4445面构图：面是点的放大、集合，或是由线的运动产生。面有更强的视觉效果。46点线面的有机结合点线面的有机结合47基本的视觉元素基本的视觉元素LOGO：网站标识，一般由图案和文字组合而成，用于宣传和名站点间交换链接。它是整个网站的商标。48导航栏：从本质上讲是一组超链接，目的是帮助访问

7、者快速准确地浏览网站。放置位置：顶部、左侧。495051图片与FLASHF动画：可以起到装饰作用，它们比文字更具有直实性、生动性，易于被访问者理解和接受。5253广告：banner的文字应该是简洁明了的，用来搭配文字的图片不能太复杂，这样才能够突出主题。要将静态图片都存为JPG格式的。全尺寸带导航栏banner54全尺寸banner55半尺寸banner56页面背景：可以衬托出整个页面的气氛。网页中的背景通常出现在形象页和个人网页中。57鲜明的风格和特色鲜明的风格和特色大胆留白5859版式设计的类型上下分割型上下分割型60版式设计的类型左右分割型左右分割型61版式设计的类型半包围型半包围型62版式设计的类型全包围型全包围型63版式设计的类型自由型自由型64色彩小知识 暧色调：包括红紫、红、红橙、橙、黄橙，这类色彩给人的视觉冲击感强，有产生温暖的感觉。65色彩小知识 冷色调：包括青、青绿、蓝、蓝紫等以青色为中心和与其接近的颜色给人的感觉弱，退远，寒冷的印象。66色彩小知识 中性色调：包括紫、黄绿。676869707172737475767778798081828384858687888990919293949596979899100101102103网格线104105106107108