1、第9章 综合实例,学习目标,切片工具存储为Web所用格式网页制作基本知识 网页组成的要素网页版面设计创建 Web 照片画廊,切片是图像的一块矩形区域，可用于在产生的 Web 页中创建链接、翻转和动画。通过将图像划分成切片，可以更好地对其功能进行控制，并改善图像文件大小的优化。 1.切片类型 按照其内容类型或创建方式分类，主要有以下几种： 用户切片 使用切片工具创建的切片。 基于图层的切片 基于图层的内容创建的切片，基于图层的切片是用“图层”控制面板创建的。 自动切片 用户切片或基于图层的切片未定义的空间自动填充的切片。在创建新的用户切片或基于图层的切片时，其余区域将会自动生成切片。每次添加或编
2、辑用户切片或基于图层的切片时都重新生成自动切片。可以将自动切片转换为用户切片。,切 片,选择菜单命令“文件存储为 Web 所用格式”，弹出“存储为 Web 所用格式”对话框，使用“存储为 Web 所用格式”对话框可选择优化选项并预览经过优化的图片。设置完成后单击“存储”按钮，弹出“将优化效果存储为”对话框，在对话框中的“保存类型”选项中，有以下三个选项： HTML和图像 生成一个 HTML 文件和对应于图片中每个切片的图像文件。HTML文件包括文档中任何链接、图像映射和其他效果的代码。 所有切片的图像文件存放在自动创建的images文件夹中。 仅限图像 以指定的优化设置存储图片。如果图片包含多
3、个切片，则每个切片将存储为一个单独的文件。 仅限 HTML 生成 HTML 文件但不存储任何图像文件。,存储为Web所用格式图像调整命令,1.首页 首页是指一个网站的主索引页，是了解网站概貌并引导查阅重点内容的向导。 一般默认文件名为：index.htm或index.html等。 2.页面尺寸 页面尺寸和显示器大小及分辨率有关系，页面标准为800*600分辨率，按778*434像素制作，页面标准1024*768分辨率，按1003x600 像素制作。页面长度原则上不超过3屏，宽度不超过1屏。 3.Banner Banner叫旗帜广告或横幅广告，还有多种称呼，如全幅广告、条幅广告等。通常采用图片、
4、动画、Flash等方式来制作。一般放在网页的上方，以吸引访问者浏览和点击，也可以放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注。4.网站的标准色彩 标准色彩是指能体现网站形象和延伸内涵的色彩。一个网站的标准色彩一般不超过3种。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。,网页制作基本知识,1标题 标题用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，它的作用就是引导访问者清楚地浏览网站的各项内容。2标志（Logo） 网站的标志（Logo），就是站点的标志图案，一般会出现在站点的每一个页面上，是网站给人的第一印象。这如同一个产品的商
5、标，集中体现了该网站的特色、内容及其内在的文化内涵和理念，标志的作用最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。目前网站的标志有三种规格：88*31、120*60 、120*90。 网站标志的设计(Logo)最简单的方式可以用网站的英文名称作标志，采用不同的字体或字母的变形和字母的组合制作标志。可以是网站有代表性的人物、动物、花草等，以此作为设计的蓝本，再进行卡通化或艺术；也可以是用有代表的物品作为标志。,网页组成的要素,3页眉 页眉指的是页面上端的部分，大多数网站在页眉位置设置网站宗旨、宣传口号、广告语等。 4页脚 页脚是页面底端部分，通常用来显示站点所属公司（社团
6、）的名称、地址、版权信息、电子信箱的超连接等。 5导航 导航是网页设计中的重要部分。一般网站的导航位置在每个页面中出现的位置是固定的。导航一般有四种位置：左侧、右侧、顶部和底部。有的站点为了增加页面的可访问性，运用了多种导航。 6主体内容 主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的做上位置，次要的内容安排在右下方。,网页组成的要素,选择菜单“文件自动Web 照片画廊”命令，可以依据一组图像
7、自动生成 Web 照片画廊。Web 照片画廊是一个 Web 站点，它包含一个缩览图图像的主页和若干包含源图像的画廊页。每页都包含链接，当访问者单击主页上的缩览图图像时，就会链接到对应的源图像的画廊页。,创建 Web 照片画廊,平面设计的元素,1概念元素概念元素是那些实际不存在的，不可见的，但人们的意识又能感觉到的东西。例如，我们看到尖角的图形，感到上面有点，物体的轮廓上有边缘线。概念元素包括点、线、面。2视觉元素概念元素不在实际的设计中加以体现，它将是没有意义的。概念元素通常是通过视觉元素体现的，视觉元素包括图形的大小、形状、色彩等。3关系元素视觉元素在画面上如何组织、排列，是由关系元素决定的
8、，包括方向、位置、空间、重心等。4实用元素实用元素指设计所表达的含义、内容、设计的目的及功能。,平面构成的形式,1组形基本形状之间的组合，可以有分离、接触、复叠、透叠、结合、减却、差叠和重合8种形式。 2渐变渐变是一种视觉效果，如近大远小、近疏远密等。渐变有形状的渐变、方向的渐变、位置的渐变、大小的渐变、色彩的渐变等。 3重复重复是指在同一设计中，相同的形象出现过两次以上，造成有规律的节奏感，使画面统一。重复的类型有形状重复、大小重复、色彩重复、肌理重复、方向重复等。 4发射发射是一种常见的自然现象，如太阳光芒。发射具有方向的规律性，发射中心为最重要的视觉焦点，所有的形象均向中心集中，或由中心
9、散开，有强烈的视觉效果。发射的分类有中心点发射、螺旋式发射和同心式发射。,平面构成的形式,5近似近似指的是在形状、大小、色彩、肌理等方面有着共同特征，它表现了在统一中呈现生动变化的效果。近似的程度可大可小，如果近似的程度大就产生了重复感，近似程度小就会破坏统一。近似与渐变的区别：渐变的变化是规律性很强的，基本形排列非常严谨，而近似的变化规律性不强，基本和其他视觉要素的变化较大，也比较活泼。 6对比 自然界充满了对比，如红花与绿叶。对比可产生明朗、肯定、强烈的视觉效果，给人深刻的印象。在构成对比的关系上，包括大小、明暗、锐钝、轻重等。对比有形状的对比、大小的对比、色彩的对比、肌理的对比、位置的对比、重心的对比、空间的对比和虚实的对比。平面构成的形式还有特异构成、空间构成、密集构成、肌理构成、分割构成等。,
