第6章 页面配色与修饰
合集下载
AfterEffectsCC影视后期制作案例教程 第6章 调色效果
目录
CONTENTS
6.1
调色基础
本节主要讲解After Effects中的调色的基础知识，After Effects中的调色主 要是调整素材的色彩、亮度、对比度、明暗度等。After Effects可以根据实际需 求创造出不同的画面色彩，来满足不同的影片风格，这也是非线性后期软件的 优势。
6.1.1 三色调、色阶与曲线
Hale Waihona Puke 本课结束，谢谢聆听T E A C H I N G C O U R S E WA R E T E M P L AT E
本实例主要帮助读者了解“三色调”工具、“色阶”工具、“毛边”工具的应用，掌握影视制作中常见 的复古色调的制作方法。
6.2.4 实例：天色变换效果的制作
本实例主要帮助读者了解“亮度/对比度”工具、“色相/饱和度”工具的应用，掌握影视制作中常见的天气变换 效果的制作方法。
6.2.5 实例：去色保留视频的制作
本实例主要帮助读者了解“亮度/对比度”工具的应用，掌握影视制作中常见的去色保留视频的制作方法。
6.2.6 实例：公交车颜色变换效果的制作
本实例主要帮助读者了解“更改为颜色”工具的应用，掌握影视制作中公交车颜色变换效果的制作方法。
6.3
实战训练：水墨画效果的制作
本实战将一个普通的风景视频制作成水墨画的效果，通过本实战，读者可以提高“颜色校正” 工具的实战运用技能。
6.1.7 亮度/对比度
“亮度/对比度”工具是After Effects中一种常用的调色工具，“亮度/对比度”工具中的亮度指的是 画面的明暗程度，对比度指的是画面亮和暗的反差程度，所以“亮度/对比度”效果是对视频画面的明 暗程度进行调节。
6.1.8 保留颜色
第六章主题与母版页
4. 整个网站引用主题 在Web.config文件中,修改如下节点：
<pages styleSheetTheme=“主题名称”> 或者： <pages Theme=“主题名称”>
5. 动态加载指定主题
在页面中可以动态加载主题，通常是 在页面的PreInit()事件处理程序中，通过Page 对象的Theቤተ መጻሕፍቲ ባይዱe属性来设置。如：
Sub Page_PreInit(Sender As Object, E As EventArgs) Page.Theme = Request("selectedTheme") If Page.Theme Is Nothing Then ' 没有指定主题 Page.Theme = “FirstTheme" End If Label2.SkinId = "BlueLabel“ End Sub
6. 禁用主题
通常如果使用Theme属性，主题将重写页和控件的本地设置。当页或 控件已经有预定义的外观，而又不希望主题重写它时，禁用主题将十分有 用。 当然。使用StyleSheetTheme属性应用主题的话，主题只是设置没有 本地设置的属性，而有本地设置的属性则会优先于主题显示，可以起到禁 用的作用。 若要显式地禁用页的主题，可以将@Page指令的EnableTheming属性 设置为False即可，如下： <%@ Page EnableTheming=“false”%> 若要显式地禁用控件的主题，可以将控件的EnableTheming属性设置 为False即可，如下： <asp:Label id=“Label1”runat=“server”EnableTheming=“false”>
第6章 Div+CSS布局网页
图6-18 设置分类项方框
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
网页设计与制作教程第6章 Div+CSS布局页面
习题6
习题6Байду номын сангаас
1．制作如图6-17所示的两列固定宽度型布局。 2．制作如图6-18所示的三列固定宽度居中型布局。 3．综合使用Div+CSS布局技术创建如图6-19所示的博客页面。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
页面布局整体上分为上、中、下3个部分，即header区域、container区 域和footer区域。其中的container又包含mainBox（主要内容区域）和 sideBox（侧边栏），布局示意图如图6-4所示。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。 【演练6-3】三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.1 两列布局样式 【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.2 三列布局样式
三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的 方式处理，如图6-8所示的就是3个独立的列组合而成的三列布局。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.1 页面布局规划
通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图613所示，页面局部布局示意图如图6-14所示。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外 部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。 2．制作页面
InDesign平面设计案例教程-从设计到印刷 Chapter 06 网页设计
6.3.3 对不同的图层进行元素的置入
Step 01 ：打开“图层”面板，在面板中单击“网页主框架”图层前的 倒三角形按钮 ，如下左图所示，收缩“网页主构架”图层中的对象，效 果如下右图所示。
Step 02 ：单击“图层”面板右上角的扩展按钮 ，打开“图层”面板菜 单，在菜单中单击“新建图层”选项，如下图所示。
Step 12 ：选择工具箱中的“直线 工具”，在控制面板中设置“粗细” 为“1 点”，然后在页面顶部按下 Shift 键单击并拖曳鼠标，绘制白色 的垂直线条，绘制完成后会在“图层” 面板中显示“直线”，如左图所示。
Step 13 ：单击“选择工具”按钮 ，选中页面中绘制直线，执行“对象 > 效果 > 渐变羽化”菜单命令，打开“效果”对话框，在对话框中设置羽化 类型为“线性”，“角度”为 90°，再适当调整色标位置，控制羽化程度， 如下左图所示，设置后单击“确定”按钮，返回文档页面，查看羽化效果， 如下右图所示。
Step 05 ：在“图层”面板中选中“网页图像”图层，用“钢笔工具” 在页面中绘制一个多边形，设置填充色为 R247、G247、B247，如下 图所示。
Step 06 ：在“图层”面板中选中“网页图像”图层，执行“文件 > 置 入”菜单命令，把随书光盘 \ 素材 \10\01.psd 标志素材置入多边形上 方，如下左图所示，回到“图层”面板，在面板中的“网页图像”图层下 显示 01.psd 对象，如下右图所示。
Step 12：在“图层”面板 中选中“网页图像”图层， 用“选择工具”选中调整后 的矩形框架，执行“文件 > 置入”菜单命令，置入随书 光盘 \ 素材 \06\04.jpg 汽车图像，并调整置入图像 的大小和位置，如右图所示。
精品课件-HTML+CSS+JavaScript网页设计教程-8. 第六章 拓展知识
颜色，如红色与橙色、蓝色与绿色、蓝色与 紫色、紫色与红色。这种页面总体感觉和谐、 安详、耐看。
第六章拓展知识
（3）对比色相构成 对比色相对比，120度左右的两
色强对比. 确定网页主题色后，选择他的对
比色并调整一下其明度和纯度作为辅助 色，放置于网页中，和谐的对比色网页， 色彩对比强烈、鲜明、饱满、华丽、活
第六章拓展知识
5.纯度对比 (1)概念： 因色彩纯度的差异而形成的色彩鲜浊对比称
之为纯度对比。这种对比可以是同一种色相纯度 鲜浊对比，也可以是不同色相间的纯度对比。色 彩纯度差别的大小决定对比的强弱。
第六章拓展知识
(2)分类： 鲜调：占主体的色和其他色相均属高纯度色。色彩饱和， 艳丽。有积极、强烈、冲动、快乐、活泼的性格意味。
形成的对比。冷暖感觉本是 触觉对外界的反映，色彩的 冷暖主要来自人的生理和心 理感受。
第六章拓展知识
(2)分类 暖色，暖色易产牛紧张、激动、兴奋等情绪， 并具有积极、热情、活力、外向特征；以暖色为主课 构成暖色基调，暖色调给人的感觉希望、热情、喜庆、 浓郁、阳光感、迫近感。
第六章拓展知识
冷色，冷色具有寒冷、沉着、寂寞、深远、理智、 消极、冷静、清爽、内向的特点。以冷色为主可以构 成冷色基调，冷色基调给人的感觉寒冷、清爽、理智、 流动感、空间感等。
第六章拓展知识
绿色T 恤
穿绿色T恤的美 女和一群人
一群 人
第六章拓展知识
6.1.3网页配色的基本概念 在网页设计过程中，一般不会使用单一的一种颜色，
而是多种颜色配合使用。也即是网页的配色。 1.色相对比 （1）概念 色相对比：因色相之间的差别形成的对比。各色相 由于在色环上的距离远近不同，形成不同的色相对比。
第六章拓展知识
（3）对比色相构成 对比色相对比，120度左右的两
色强对比. 确定网页主题色后，选择他的对
比色并调整一下其明度和纯度作为辅助 色，放置于网页中，和谐的对比色网页， 色彩对比强烈、鲜明、饱满、华丽、活
第六章拓展知识
5.纯度对比 (1)概念： 因色彩纯度的差异而形成的色彩鲜浊对比称
之为纯度对比。这种对比可以是同一种色相纯度 鲜浊对比，也可以是不同色相间的纯度对比。色 彩纯度差别的大小决定对比的强弱。
第六章拓展知识
(2)分类： 鲜调：占主体的色和其他色相均属高纯度色。色彩饱和， 艳丽。有积极、强烈、冲动、快乐、活泼的性格意味。
形成的对比。冷暖感觉本是 触觉对外界的反映，色彩的 冷暖主要来自人的生理和心 理感受。
第六章拓展知识
(2)分类 暖色，暖色易产牛紧张、激动、兴奋等情绪， 并具有积极、热情、活力、外向特征；以暖色为主课 构成暖色基调，暖色调给人的感觉希望、热情、喜庆、 浓郁、阳光感、迫近感。
第六章拓展知识
冷色，冷色具有寒冷、沉着、寂寞、深远、理智、 消极、冷静、清爽、内向的特点。以冷色为主可以构 成冷色基调，冷色基调给人的感觉寒冷、清爽、理智、 流动感、空间感等。
第六章拓展知识
绿色T 恤
穿绿色T恤的美 女和一群人
一群 人
第六章拓展知识
6.1.3网页配色的基本概念 在网页设计过程中，一般不会使用单一的一种颜色，
而是多种颜色配合使用。也即是网页的配色。 1.色相对比 （1）概念 色相对比：因色相之间的差别形成的对比。各色相 由于在色环上的距离远近不同，形成不同的色相对比。
网页设计与制作-孙第2版第6章网页布局new
③设置标题：在“文档”窗口的第一行输入标题文字“巴黎之旅”，并在 属性面板设置为“隶书”、大小为“xx-large”、水平为“居中对齐”。 ④设置表格插入点。在文档窗口，将表格插入点设 置在标题文字的下方。 ⑤执行下列操作之一，打开“表格”对话框。 ·单击“常用”工具栏的“表格”按钮。 ·从“常用”工具栏将“表格”按钮拖动到表格插入点， 即标题文字的下方。 ·在“插入”菜单选择“表格”选项。
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置
1．向表格中输入文字 操作实例6-2 按图6-1所示完成表格中的文字输入与设置 操作步骤： （1）向表格中输入文字 ①在指定单元格中单击鼠标，设置插入点。 ②在插入点输入文字。在表格中输入的信息如图6-1所示。 （2）选中表格并设置表格的居中对齐 ①执行下列操作之一，选中整个表格。 ·单击表格的左上角。 ·单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。 ·在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。 ·在表格中单击一次，在文档窗口下方的标签选择器中单击<table>标签。如图63所示。
•行（水平空间） •列（垂直空间） •单元格（行和列交汇的空间）
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
操作实例6-1 在网页中按图6-1所示建立表格
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
·操作步骤： ①在本地站点html文件夹下新建网页blzl.html。 ②在文档头将网页“标题”设置为“巴黎之旅”。
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置
1．向表格中输入文字 操作实例6-2 按图6-1所示完成表格中的文字输入与设置 操作步骤： （1）向表格中输入文字 ①在指定单元格中单击鼠标，设置插入点。 ②在插入点输入文字。在表格中输入的信息如图6-1所示。 （2）选中表格并设置表格的居中对齐 ①执行下列操作之一，选中整个表格。 ·单击表格的左上角。 ·单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。 ·在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。 ·在表格中单击一次，在文档窗口下方的标签选择器中单击<table>标签。如图63所示。
•行（水平空间） •列（垂直空间） •单元格（行和列交汇的空间）
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
操作实例6-1 在网页中按图6-1所示建立表格
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
·操作步骤： ①在本地站点html文件夹下新建网页blzl.html。 ②在文档头将网页“标题”设置为“巴黎之旅”。
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置
Photoshop教材--第6章网页设计基础
效果图设计
客户需求
网站策划
绘制效果图
客户审核
切片
优化导出
6.2
网页布局
网页是网站构成的基本元素，网页的精彩与否决定了网站的成败，当我们遨 游于互联网上，一副副精彩的网页会一一呈现，丰富的色彩、简洁的文字、炫丽 的图片效果，当然是不可忽略的因素，但是另一个关键的问题是，如何将这些网 页元素进行合理排版，让他们相互配合，相互映衬，这就是网页的布局的作用。 下面，我们就有关网页布局谈论一下。
第一行来制作Logo
第二行制作导航
第三行制作内容，内容区域又拆分为左、右 两列，左侧为关键内容、标题等，右侧为具体内 容的说明。
第四行制作版权信息。
图6-8 网页效果图
图6-9 网页的布局结构
6.2.3
网页布局分P类art 1
网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三 角型、自由型。下面分别论述。
6.2.3
网页布局分P类art 1
网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三 角型、自由型。下面分别论述。
4、中轴或对称型
将页面元素沿当前窗口的中间轴心位置进行水平或垂直方向的对称排列。所谓对 称可指左右对称、上下对称、四角型对称等。左右对称是指沿中轴水平左右对称，上 下对称指沿中轴线上下对称，四角型对称是指以中轴线为基准，在页面四角安排相应 的视觉元素。
授课安排
6.1
网页设计流程
6.2
网站布局
6.3
网页的色彩设计
6.1
网页设计流程
1. 网站开发流程
网站项目开发一般要分为客户需求、效果图设计、开发、 测试、运行和维护几个阶段，各阶段循环往复，一直到客户审 核通过为止，如图所示。
Word中如何设置页面背景颜色
Word中如何设置页面背景颜色在使用Microsoft Word进行文档编辑时，我们常常希望能够对页面的背景颜色进行设置，以增加文档的美观度和阅读体验。
而Word的功能丰富，提供了多种设置页面背景颜色的方法，下面将详细介绍几种常见的设置方式。
一、使用页面布局选项设置页面背景颜色首先，打开Word文档，并点击页面布局选项卡。
在页面布局选项卡中，可以找到页边距、纸张大小等选项，也包括设置页面背景颜色的功能。
1. 选择纸张颜色在页面布局选项卡中，点击“纸张颜色”按钮，会出现一个下拉菜单。
在这个下拉菜单中，可以选择多种预设的纸张颜色。
当鼠标经过不同颜色选项时，页面背景色会实时预览。
2. 自定义填充效果除了预设的纸张颜色外，Word还提供了自定义填充效果的选项。
在“纸张颜色”下拉菜单中，点击“其他纸张颜色”选项，会弹出“颜色”对话框。
在这个对话框中，可以通过选择不同的颜色或设置具体的RGB值来自定义页面背景颜色。
同时，还可以定义填充效果，例如纯色、渐变、纹理等。
二、使用页面边框和底纹选项设置页面背景颜色另一种常见的设置页面背景颜色的方法是使用页面边框和底纹选项。
这个选项位于页面布局选项卡中的“页面背景”分组中。
1. 选择边框样式在页面布局选项卡中，点击“页面边框和底纹”按钮，会弹出“页面边框和底纹”对话框。
在这个对话框的“边框”选项卡中，可以选择不同的边框样式，例如单线、双线、阴影等。
同时，还可以设置边框的宽度、颜色等属性。
2. 设置底纹颜色在“页面边框和底纹”对话框的“底纹”选项卡中，可以设置页面的底纹颜色。
同样，可以选择预设的颜色或自定义填充效果。
此外，还可以通过调整透明度来设置底纹的显著程度。
三、使用页面背景图设置页面背景颜色如果想要在Word文档中添加图片作为页面背景，也可以通过以下方法实现。
1. 插入图片首先，在Word文档中点击插入选项卡，然后点击“图片”按钮。
选择本地磁盘上的图片文件，点击插入按钮即可将图片插入到Word文档中。
中小型网站电子课件——第6章 案例网站页面制作技巧
技 4、“汽车商情”子页面的设计
巧
5、“政府信息”子页面的设计
制 风格基本一致，为了保证各个子页面之间和子页与首页
作 面之间达到一致的风格，可以采用模板和库来进行设计，
技 巧
这种设计方法还可以减轻工作量。
6.2 案例网站子页面设计技巧
6
6.2.2 使用模板设计案例网站子页面
第
本节我们将介绍一下“新闻内容”、“汽车文化”、“新车
快报”、“汽车常识”、“汽车商情”、“政府信息”等
6.1.2.4 主内容三区的设计
技 巧
主内容三区即页面中间部分的内容，该部分内容有两个栏目，一 是“新闻速递”，二是“新车快报”，其中“新闻速递”栏目本 节只将表格设计完成，内容的添加需要数据库的支，将在第7
章讲解。
6.2 案例网站子页面设计技巧
6
子页面和首页面的关系是一种主从关系，子页面是对主页
章
子页面的设计方法，这些子页面的风格应该是一致的，其
案
他页面“维修培训”、“修车网点”子页面本节不准备讲
例
述。
网
在设计子页面时，应该各个子页面的栏目在规划目录结构时，
站
都已经设计了目录文件夹，此处不再创建子页面的文件夹。
页
1、“新车快报”子页面的设计
面 制
2、“汽车文化”子页面的设计
作
3、“汽车常识”子页面的设计
章 6.1.2.1 页眉区及导航区的设计
页眉区及导航区在模板中都已经设计完成，因此可以从模板中直接
案
产生新的页面。
例 6.1.2.2 主内容一区的设计
网 站 页 面 制 作
主内容一区即首页左侧布局中的相关栏目内容。
6.1.2.3 主内容二区的设计
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
【案例分析】动态导航按钮在如今的网页中随处可 见，这里将利用Flash中的按钮元件，制作随鼠标移动 而变换颜色的导航按钮，并添加到网页中去。
2010-8-29
14／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
【操作步骤】（演示操作） 1．启动Flash 2．新建文档，创建按钮元件 3．保存并发布Flash文档 4．在DW中打开“奔腾电脑网”页面，插入Flash影 片文件 5．保存网页
3／18
6.1 网页配色
1. 色彩三要素： 色彩三要素： 色相 亮度 饱和度 网页安全色 色彩感受 网页色彩规则 网站风格与色彩设计
2. 3. 4. 5.
课堂小练习：上网查看食品、机械、 课堂小练习：上网查看食品、机械、儿童用品和旅游主题的网 仔细观察每一个页面的颜色选择和搭配， 站，仔细观察每一个页面的颜色选择和搭配，体会网站色彩的选 择方法。 择方法。
2010-8-29 18／18
2010-8-29
2／18
6.1 网页配色
颜色的使用在网页制作中起着至关重要的作用， 合理地配置颜色，可以使自己制作的网站在众多的网 站中脱颖而出，给浏览者留下深刻的印象。但是对于 初学者来说，往往不容易驾驭好网页的颜色搭配，不 仅要学习各种色彩理论和方法，还要多学习一些大型 网站的用色方法。
2010-8-29
2010-8-29
5／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
制作电脑公司产品网站，用Photoshop对现在模版 进行修改加工，完成后的效果如图所示。
2010-8-29
6／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
第6章 页面配色与修饰 章
技能目标 6.1网页配色 网页配色 6.2Photoshop制作网页的基本操作 Photoshop制作网页的基本操作 Photoshop 6.3Flash的动画效果 Flash的动画效果 Flash
2010-8-29
1／18
技能目标
1. 2. 3. 4. 了解网页配色方案及安全色的概念 学会网站风格设计 了解Photoshop的基本知识 了解Flash的基本知识
2010-8-29
12／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
使用Flash制作动态导航，加入到上节制作的“奔 腾电脑网”页面中。
2010-8-29
13／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
2010-8-29
4／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
在Photoshop中不仅可以制作出更加精美的图片 应用到网页中去，达到美化网页的目的，而且还可以 在Photoshop中直接做出一个网页的外观，再利用切 片工具将做好的图片转换成一个网页文件。 互联网上有大量的网页图片模版资源，这些图片 模版都是一些PSD或者JPEG等格式的图片，是学习 网页布局的优秀案例。作为网页设计的初学者，可以 通过Photoshop对这些图片模版进行加工处理生成网 页文件，将模版中的布局模式和一些有用的图片等元 素引用到自己的页面中来。
2010-8-29
15／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
案例小结： 案例小结： 随着多媒体技术在网络上的普遍应用，Flash成为 网页元素中不可替代的一员。在Dreamweaver中 不仅可以插入Flash制作的导航条，而且还可以插 入各种Flash动画，使制作出的网页视觉上更加美 观，内容上更加丰富。 直接保存Flash时生成的是Flash文档，文件名后缀 是fla，导出影片时生成的是Flash影片，文件名后 缀是swf。在Dreamweaver中应该插入后缀名为swf 的Flash影片文件。 将Flash影片插入到网页中后，可以通过下方的属 性栏调整文档的大小。
2010-8-29
8／18
6.2 Photoshop制作网页的基本操作 制作网 Nhomakorabea的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
案例小结： 案例小结： Photoshop是一款非常出色的图像处理软件，在 网页制作时，可以在Photoshop中进行对现有模 版进行修改加工，然后再进入Dreamweaver中进 一步制作。 如果选用的模版不是PSD格式，而是JPEG或者 其他图片格式，那么就无法直接对模版的内容进 行修改，只能用切片工具直接将模版进行切割， 然后将生成的网页文件在DW中打开，删除掉模 版中的图片，只借用模版的布局。
2010-8-29
10／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
课堂小练习： 课堂小练习： 在Photoshop中修改本例中的企业名称 和产品内容，制作成另一主题的网页。
2010-8-29
11／18
6.3 Flash的动画效果 的动画效果
2010-8-29 16／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
课堂小练习： 自己动手制作一个导航条，对本例中 的按钮颜色和文字进行修改。
2010-8-29
17／18
总结
对于一个设计优秀的网站，合理的布局、赏心悦目的网页 配色、丰富多彩的动画元素，可以使用户过目不忘，流连忘 返。Photoshop 和 Flash的加入帮助设计者实现了这些目标。 本章内容主要学习在使用Dreamweaver进行网页设计中，网 页配色的方法和注意事项、平面设计软件Photoshop和动画制 作软件Flash的应用。 在设计网页的色彩时，要注意使用网页安全色，合理考虑 颜色感受和一些配色规则。 平面设计软件Photoshop不仅可以设计出各种精美的图片供 制作网页使用，而且可以利用它的切片工具对一些现有的网页 模版进行处理，帮助自己设计出更加美观的网页。 Flash在如今的网页中已成为不可替代的页面元素之一， 利用Flash软件可以制作出多种动态效果，加入到设计者制作 出的网页，使页面内容更加丰富多彩。 Photoshop和Flash已成为网页设计者不可或缺的有力工 具，掌握了这些工具的使用，可以帮助大家更好的完成网页设 计的工作。
2010-8-29
9／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
案例小结： 案例小结： 用户可以直接在Photoshop中创意制作网页界面， 然后使用同样的方法转换成网页文件。 图片是网页结构中必不可少的页面元素之一，但 图片的大量出现会严重影响页面的下载显示速度， 使用Photoshop中的切片工具可以将一些较大的 图片分割成几个小部分，这样可以加快网页下载 速度。
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
【案例分析】这是一个电子产品网站模版，并且图片 是PSD格式的，可以在Photoshop中打开进行编辑， 将一些不需要的内容删去，如电子产品的图片和目 录，换成电脑产品的信息，然后再利用切片工具生成 网页文件。
2010-8-29
7／18
Flash是一种交互式矢量多媒体技术，设计人员 和开发人员可使用它来创建演示文稿、应用程序和 其他允许用户交互的内容。Flash 可以包含简单的 动画、视频内容、复杂演示文稿和应用程序以及介 于它们之间的任何内容。将Flash与Dreamweaver结 Flash Dreamweaver 合可以设计出更为丰富多彩的网站作品。本节将通 过实例介绍Flash在网页制作中的一些实际应用。
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
【操作步骤】（演示操作） 1．启动Photoshop，打开模版图片 2．在Photoshop中对模版进行修改 3．使用切片工具划分切片 4．保存文件，存储为Web所用格式
2010-8-29
14／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
【操作步骤】（演示操作） 1．启动Flash 2．新建文档，创建按钮元件 3．保存并发布Flash文档 4．在DW中打开“奔腾电脑网”页面，插入Flash影 片文件 5．保存网页
3／18
6.1 网页配色
1. 色彩三要素： 色彩三要素： 色相 亮度 饱和度 网页安全色 色彩感受 网页色彩规则 网站风格与色彩设计
2. 3. 4. 5.
课堂小练习：上网查看食品、机械、 课堂小练习：上网查看食品、机械、儿童用品和旅游主题的网 仔细观察每一个页面的颜色选择和搭配， 站，仔细观察每一个页面的颜色选择和搭配，体会网站色彩的选 择方法。 择方法。
2010-8-29 18／18
2010-8-29
2／18
6.1 网页配色
颜色的使用在网页制作中起着至关重要的作用， 合理地配置颜色，可以使自己制作的网站在众多的网 站中脱颖而出，给浏览者留下深刻的印象。但是对于 初学者来说，往往不容易驾驭好网页的颜色搭配，不 仅要学习各种色彩理论和方法，还要多学习一些大型 网站的用色方法。
2010-8-29
2010-8-29
5／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
制作电脑公司产品网站，用Photoshop对现在模版 进行修改加工，完成后的效果如图所示。
2010-8-29
6／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
第6章 页面配色与修饰 章
技能目标 6.1网页配色 网页配色 6.2Photoshop制作网页的基本操作 Photoshop制作网页的基本操作 Photoshop 6.3Flash的动画效果 Flash的动画效果 Flash
2010-8-29
1／18
技能目标
1. 2. 3. 4. 了解网页配色方案及安全色的概念 学会网站风格设计 了解Photoshop的基本知识 了解Flash的基本知识
2010-8-29
12／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
使用Flash制作动态导航，加入到上节制作的“奔 腾电脑网”页面中。
2010-8-29
13／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
2010-8-29
4／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
在Photoshop中不仅可以制作出更加精美的图片 应用到网页中去，达到美化网页的目的，而且还可以 在Photoshop中直接做出一个网页的外观，再利用切 片工具将做好的图片转换成一个网页文件。 互联网上有大量的网页图片模版资源，这些图片 模版都是一些PSD或者JPEG等格式的图片，是学习 网页布局的优秀案例。作为网页设计的初学者，可以 通过Photoshop对这些图片模版进行加工处理生成网 页文件，将模版中的布局模式和一些有用的图片等元 素引用到自己的页面中来。
2010-8-29
15／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
案例小结： 案例小结： 随着多媒体技术在网络上的普遍应用，Flash成为 网页元素中不可替代的一员。在Dreamweaver中 不仅可以插入Flash制作的导航条，而且还可以插 入各种Flash动画，使制作出的网页视觉上更加美 观，内容上更加丰富。 直接保存Flash时生成的是Flash文档，文件名后缀 是fla，导出影片时生成的是Flash影片，文件名后 缀是swf。在Dreamweaver中应该插入后缀名为swf 的Flash影片文件。 将Flash影片插入到网页中后，可以通过下方的属 性栏调整文档的大小。
2010-8-29
8／18
6.2 Photoshop制作网页的基本操作 制作网 Nhomakorabea的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
案例小结： 案例小结： Photoshop是一款非常出色的图像处理软件，在 网页制作时，可以在Photoshop中进行对现有模 版进行修改加工，然后再进入Dreamweaver中进 一步制作。 如果选用的模版不是PSD格式，而是JPEG或者 其他图片格式，那么就无法直接对模版的内容进 行修改，只能用切片工具直接将模版进行切割， 然后将生成的网页文件在DW中打开，删除掉模 版中的图片，只借用模版的布局。
2010-8-29
10／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
课堂小练习： 课堂小练习： 在Photoshop中修改本例中的企业名称 和产品内容，制作成另一主题的网页。
2010-8-29
11／18
6.3 Flash的动画效果 的动画效果
2010-8-29 16／18
6.3 Flash的动画效果 的动画效果
案例6-3 使用 使用Flash制作网页动态效果 案例 制作网页动态效果
课堂小练习： 自己动手制作一个导航条，对本例中 的按钮颜色和文字进行修改。
2010-8-29
17／18
总结
对于一个设计优秀的网站，合理的布局、赏心悦目的网页 配色、丰富多彩的动画元素，可以使用户过目不忘，流连忘 返。Photoshop 和 Flash的加入帮助设计者实现了这些目标。 本章内容主要学习在使用Dreamweaver进行网页设计中，网 页配色的方法和注意事项、平面设计软件Photoshop和动画制 作软件Flash的应用。 在设计网页的色彩时，要注意使用网页安全色，合理考虑 颜色感受和一些配色规则。 平面设计软件Photoshop不仅可以设计出各种精美的图片供 制作网页使用，而且可以利用它的切片工具对一些现有的网页 模版进行处理，帮助自己设计出更加美观的网页。 Flash在如今的网页中已成为不可替代的页面元素之一， 利用Flash软件可以制作出多种动态效果，加入到设计者制作 出的网页，使页面内容更加丰富多彩。 Photoshop和Flash已成为网页设计者不可或缺的有力工 具，掌握了这些工具的使用，可以帮助大家更好的完成网页设 计的工作。
2010-8-29
9／18
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
案例小结： 案例小结： 用户可以直接在Photoshop中创意制作网页界面， 然后使用同样的方法转换成网页文件。 图片是网页结构中必不可少的页面元素之一，但 图片的大量出现会严重影响页面的下载显示速度， 使用Photoshop中的切片工具可以将一些较大的 图片分割成几个小部分，这样可以加快网页下载 速度。
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
【案例分析】这是一个电子产品网站模版，并且图片 是PSD格式的，可以在Photoshop中打开进行编辑， 将一些不需要的内容删去，如电子产品的图片和目 录，换成电脑产品的信息，然后再利用切片工具生成 网页文件。
2010-8-29
7／18
Flash是一种交互式矢量多媒体技术，设计人员 和开发人员可使用它来创建演示文稿、应用程序和 其他允许用户交互的内容。Flash 可以包含简单的 动画、视频内容、复杂演示文稿和应用程序以及介 于它们之间的任何内容。将Flash与Dreamweaver结 Flash Dreamweaver 合可以设计出更为丰富多彩的网站作品。本节将通 过实例介绍Flash在网页制作中的一些实际应用。
6.2 Photoshop制作网页的基本操作 制作网页的基本操作
案例6-2 案例 使用Photoshop制作网页 制作网页 使用
【操作步骤】（演示操作） 1．启动Photoshop，打开模版图片 2．在Photoshop中对模版进行修改 3．使用切片工具划分切片 4．保存文件，存储为Web所用格式