网页制作教程第12章
网页设计与制作基础教程ch12简明教程PPT课件
网页设计与制作基础教程
12.1.1
测试站点步骤
将站点上传到服务器并声明可供浏览之前，建议先在本地进行测试 。确保页面在目标浏览器中如预期的那样显示和工作，而且没有断开 的链接，页面下载也不会占用太长时间。还可以通过运行站点报告来 测试整个站点并解决出现的问题。站点的测试主要包括以下几个步骤 。 确保页面在目标浏览器中正常浏览 测试浏览器兼容性 测试页面的文件大小以及下载这些页面所占用的时间： 使用站点报告来测试站点 验证代码 对发布后的站点进行更新和维护
网页设计与制作基础教程
12.1.2
检查和修复超链接
在Dreamweaver CS4的编辑平台下，可以查看整个网站页面间 的链接关系，根据需要添加、修改或删除链接，然后通过链接检查、 修复工具对网站中某个文档或整个站点进行测试，修复错误链接，并 在站点地图中观察网站结构变化。 选择【窗口】|【结果】|【链接检查器】命令，打开【链接检 查器】选项卡面板，如图所示。可通过该选项卡检查并修复站点的链 接。
网页设计与制作基础教程
12.1.4 站点其他测试
除了链接测试和浏览器测试以外，还可以进行负载测试和压力测试。
网页设计与制作基础教程
12.1.5
使用报告测试站点
在Dreamweaver CS4中，可以对当前文档、选定的文件或整个 站点的工作流程或HTML属性运行站点报告，还可以使用报告来检查 站点中的链接。 选择【窗口】|【文件】命令，打开【文件】面板，如图所示 。在该面板中可以选择要打开的站点文件。选择【站点】|【报告】命 令，打开【报告】对话框，如图所示。
网页设计与制作基础教程
第12章 测试和发布站点
本章介绍网站的测试、调试和上传方法，如何利用站点地图、 设计备注等工具来管理站点，以及站点的维护方法和技巧。 Dreamweaver CS3包含大量管理站点的功能，还具有与远程服务器进行 文件传输的功能。可以使用站点窗口来组织本地站点和远程站点上的 文件，将本地站点结构复制到远程站点上，也可以将远程站点结构复 制到本地系统中。。
网页制作第12单元 网页制作应用技巧
第12单元网页制作应用技巧课程目标：●初步掌握各种网页特效技巧的应用效果。
●掌握直接在代码视图粘贴实现网页特效的方法●建议学时：理论2学时，实践2学时。
在网页制作中常要使用一些技巧，以实现特殊效果或特殊功能。
这些技巧较常用的有两种，一种是使用CSS滤镜，如图像翻转、透明度等等，另一种是使用脚本语言，如显示日期时间等，使用脚本语言可设计出更丰富的特效。
脚本语言是一种可解释语言，由一行行接近于自然语言的代码组成，具有简单易懂的特点，在网页设计中常用的脚本语言有VBScript和JavaScript等，在特效制作中又最常用JavaScript脚本语言。
本单元介绍的特效所涉及的脚本语言均为JavaScript。
JavaScript是Netscape公司开发的面向WWW客户/服务器应用的一个跨平台的基于对象和事件驱动的脚本语言，可以直接嵌入到HTML中。
浏览器可以直接解释JavaScript语言，通过JavaScript语言与HTML代码完美结合，可以实现对HTML页面的控制并对页面某些事件作出反应，实现一些特殊的功能。
限于篇幅的关系，本单元仅给出实现这些特殊效果的脚本语言，并简单说明这些脚本的使用方法，对于一般的网页设计者或初学者最需要的是学会将脚本代码插入到网页HTML中以实现特殊效果。
对脚本语言的详细解释，请参考其它专门的书籍。
12.1 文字类技巧12.1.1 在状态栏显示文字方法一：切换到代码视图，在<body>…</body>之间插入以下代码<base onmouseover="window.status='欢迎光临我的网站!!!!'；return true">方法二：切换到代码视图，直接修改HTML代码中的<body>为<body onLoad="window.status='欢迎光临我的网站!!!!'">均要在状态栏显示文字“欢迎光临我的网站!!!”。
网页第12章
在几年前，网页一直都是静态的，缺乏变化、动态，
导入媒体 动画发布 预 备 知 识 Flash 基 础 知 识 创建动画效 果 帧的概念 帧的应用 创建动画
第 十 二 章
创 建 动 画 效 果
本章学习目标： 理解动画原理 掌握帧的作用及其使用 理解创建动画的方法 了解如何导入媒体
12.3 课堂练习12-1：字母渐变
图12-35 制作完成
专家指南
第 十 二 章 创 建 动 画 效 果
————
Flash的交互性
具有交互性的电影能使读者通过使用键盘、鼠标等工具参与其中， 读者可以使电影在各个部分跳转，移动电影中的对象，在表单中输入信 息，或者执行其他很多操作。创建交互性电影的关键是设置在指定的事 件发生时要执行的动作，事件就是触发动作执行的信号。在Flash中，当 播放头到达某个特定的帧，或读者单击了鼠标，或按下了键盘，都会产 生特定的事件，也就发出了执行某个动作的信号。在编辑电影时，就要 指定好在什么情况下执行什么动作。动作在按钮或帧的属性对话框的动 作页里设置。有时仅用一个语句告诉电影停止播放就可以了，有时需要 一系列的语句。在执行动作前需先判断某些条件是否满足。很多动作需 要一定的编辑经验，也有一些动作非常复杂，需要编程高手才能完成。 动作是组成交互作用的最后一个部分。它们引导电影执行任务。一个事 件可以触发多个动作，且这多个动作可以在不同的目标上同时执行。由 于本书篇幅有限，动画的交互就不再详细讲解，有兴趣的读者可以参看 与之相关的书籍。
图12-34 创建补间动画
第 十 二 章 创 建 动 画 效 果
（11）然后再将图层2锁定，进行和第10步一样的操作。插入关键帧 时，再分别往后错5格。以此类推，按照这种方法把其它元件制作完成， 最后时间轴如图12-35所示。 （12）单击【插入图层】按钮，插入一个新图层，双击新图层的名 称，为其命名为声音。并将库中的声音文件，拖到到当前场景中。Flash 将自动在声音图层中的第1帧开始加载声音效果。并在属性面板中将同步 模式设置为事件模式。
网页设计与开发第12章试卷及答案
《网页设计与开发第12章》试卷一、选择题1.下列对于表格的说法正确的是( )A.表格的大小，边框宽度，表格间距是不可以自己定义的B. rowspan属性用于定义有横向通栏的表格C. colspan 属性用于定义有纵向通栏的表格D.在页面布局时为了页面的美观也经常用到表格，但我们却看不见这些表格，是由于Border 属性的值被设定为“0”了。
答案: D2.表格的开始标记为( )A.<table>B.</table>C.<tr>的.<td>答案: A3.以下属性可以添加在<table>标记后面的是( )A． bordeB． widthC． heightD．以上都可以答案: D4.下列对于<th>标记和<td>标记说法不正确的是( )A． <th>和<td>都可以标记一个单元格B．有多少个单元格就有多少个<th>或<td>C． <th>标记所标记的单元格的文字以粗体出现D． <th>和<td>标记作用完全一样答案: D5.下面对于BgColor 属性说法正确的是( )A．可以用来定义表格的颜色B． <table>标记中必须出现BgColor 属性C． BgColor 属性的值必须是16 进制的6 位数D． BgColor 属性的值必须是已经定义好的颜色答案: A6.下面对于样式表的说法中错误的是( )A．CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表B．将CSS指定的格式加入到HTML中的方法有2种C．外部连结CSS时需要在HTML文件里加一个超级连结，连接到外部的CSS文档D．如果内在添加的CSS 描述与外部连接的CSS 描述相冲突的话，网页的表现将以内在添加的CSS描述为主答案: B7.下面对于样式表的说法中错误的是( )A．CSS 的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）B．选择符是可以是多种形式，一般是你要定义样式的HTML标记，你可以通过此方法定义它的属性和值，属性和值要用逗号隔开C．CSS可以定义字体属性D．CSS可以定义颜色和背景属性答案: B8.下列说法中错误的是（）A．p {font-family: "sans serif"}定义段落字体为sans serifB．p {text-align: center; color: red}定义段落居中排列；并且段落中的文字为红色C．background-image属性用来设置背景图D．a:visited{color:red;text-decoration:none}定义未访问的超链接颜色为红色答案: D9.下列选项中关于标签div与span的说法正确的是（）。
DreamweaverCS3网页制作基础教程第12章习题答案
DreamweaverCS3⽹页制作基础教程第12章习题答案第12章使⽤⾏为和Spry构件⼀、填空题1、⾏为的基本元素有两个：事件和（）。
正确答案：动作2、当⿏标在特定元素上按下时产⽣（）事件。
正确答案：onMouseDown3、使⽤（）⾏为将打开⼀个新的浏览器窗⼝，在其中显⽰所指定的⽹页⽂档。
正确答案：打开浏览器窗⼝4、交换图像⾏为是通过改变图像的（）属性实现的。
正确答案：src5、可以在菜单栏中选择【插⼊记录】/【（）】中的相应命令向页⾯中插⼊各种Spry构件。
正确答案：Spry⼆、选择题1、打开【⾏为】⾯板的快捷键是（）。
A、Shift+F1B、Shift+F4C、Shift+F5D、Shift+F9正确答案：B2、当指针从特定的元素上移⾛时将发⽣（）事件。
A、onMouseOverB、onClickC、onMouseOutD、onBlur正确答案：C3、（）⾏为将显⽰⼀个提⽰信息框，给⽤户提供提⽰信息。
A、弹出信息B、跳转菜单C、交换图像D、转到URL正确答案：A4、使⽤（）⾏为，在浏览⽹页时可以拖动AP Div到页⾯的任意位置。
A、弹出信息B、跳转菜单C、交换图像D、拖动AP元素正确答案：D5、Spry布局构件不包括（）。
A、Spry菜单栏B、Spry效果C、Spry选项卡式⾯板D、Spry可折叠式⾯板正确答案：B三、问答题1、构成⾏为的两个基本元素是什么，它们之间是什么关系？答：⾏为是由事件（Event）所触发的动作（Action），因此⾏为的基本元素有两个：事件和动作。
事件是浏览器产⽣的有效信息，也就是访问者对⽹页所做的事情。
例如，当访问者将⿏标光标移到⼀个链接上，浏览器就会为这个链接产⽣⼀个“onMouseOver”（⿏标经过）事件。
然后，浏览器会检查当事件为这个链接产⽣时，是否有⼀些代码需要执⾏，如果有就执⾏这段代码，这就是动作。
动作是由JavaScript代码组成的，这些代码执⾏特定的任务。
网页制作案例教程 清华大学出版社习题答案
5、页面管理、功能管理、信息管理、会员管理、广告和连接的管理
二、选择题
1、A 2、A 3、A
三、简答题
略
四、完成下面的实训题目
略
4、确定栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计
5、更好的宣传推广网站
二、选择题
1、A 2、A 3、A 4、A
三、简答题
略
四、完成下面的实训题目
略
第3章HTML基础
一、填空题
1、<hi>
2、标题标签、段落标签、格式化标签
3、有序列表(Ordered List)，无序列表(Unordered List)
2、简述CSS盒模型。
盒子模型是CSS控制页面时一个很重要的概念，所有页面中的元素都可以看成是一个盒子，传统的表格排版是通过大小不一的表格和表格嵌套来排版网页内容的，改用css后，就是通过css定义的大小不一的盒子和盒子嵌套来编排网页。这种方式代码简洁，更新方便，能兼容更多的浏览器。假设将每个HTML元素看作是一个装了东西的盒子，盒子里的东西到盒子边框的距离我们称为填充（padding），盒子本身的边框（border），盒子外边框外和其他盒子之间的边界（margin）。如图9-1-1所示：
4、Link、visited、hover和active分别是指超链接的什么状态。
a:link指正常的未被访问过的链接；a:hover指鼠标在链接上；a:active指正在点的链接；a:visited指已经访问过的链接。
四、完成下面的实训题目
略
第9章使用CSS布局规划网页
一、填空题
1、直接添加在HTML的标识符里、添加在HTML的头信息标识符< head>里、链接样式表、联合使用样式表
网页设计与制作第12章
第12章 CSS的基本语法一、CSS与HTML的区别是什么？为什么要使用CSS呢？原因主要有如下4点：1、弥补HTML对网页格式化功能的不足，比如段落间距、行距等。
2、字体变化和大小。
3、页面格式的动态更新。
4、排版定位等。
注意：HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面。
换句话说，CSS是一种来装饰HTML的一种标记集合。
下面我们就开始学习CSS的格式。
CSS样式表的特别之处：1、可以将格式和结构分离。
2、可以以前所未有的能力控制页面布局。
3、可以制作体积更小、下载更快的网页。
4、可以将许多网页同时更新，比以前更快、更容易。
5、浏览器将成为更友好的界面。
二、CSS的格式案例名称：CSS初次 l1-1.htm<html><head><title>CSS初次</title><style type="text/css" >h1 { color:red }h2 { color:blue;font-style:oblique }</style></head><body><h1>I love you China! I am H1</h1><h2>I love you China! I am H2</h2></body></html>(使用链接的样式表时，可无须使用注释标签。
)三、CSS的结构和规则1、选择符所谓的选择符号就是如何才能让HTML认识CSS格式的一种标记。
任何HTML元素都可以是一个CSS的选择符。
选择符仅仅是指向特别样式的元素。
例如语句P{text-indent:3em}中的选择符是P。
案例名称：利用选择符 l1-2.htm<html><head><title>利用选择符</title><style>p{ text-indent:1em }</style></head><body><p>利用选择符</p>上面段落的效果是P标记的首行自动缩进</body></html>在上面的案例中，<style type="css/text">可以简化为<style>，显示的结果是P标记的首行自动缩进。
网页制作教程第12课flash
补间动画常用于需要平滑过渡效果的场合，如移动、旋转、缩放等。
引导层动画
引导层动画的概念
引导层动画是一种通过使用引导层来控制对象运动路径的 动画方法。
引导层动画的制作过程
首先，需要创建一个引导层并在其上绘制运动路径，然后将需要运动的对象放 置在一个普通层上，并将其与引导层关联起来，最后通过播动画帧或场景导出为静态图像。 选择“文件”>“导出”>“导出图像”，选择合 适的图像格式和分辨率进行导出。
03 批量导出
如果需要导出多个影片或图像，可以使用Flash的 批量导出功能，提高效率。
06
Flash在网页中的应用
插入Flash到网页中
01
使用`<object>`标签
02
Flash动画制作
动画制作原理
视觉暂留原理
Flash动画的制作基于视觉暂留原理，通过快速播放一系列静态图像，在人脑中形成连续动态的 视觉效果。
关键帧技术
动画制作中采用关键帧技术，即在时间轴上设置关键帧来控制动画的变化，Flash会自动计算并 生成中间帧。
符号与实例
Flash中的元件（Symbol）可以创建可重用的动画元素，实例（Instance）则是元件在场景中的具 体应用，通过修改实例属性可以实现丰富的动画效果。
在HTML中使用`<object>`标签可以 插入Flash文件，需要指定Flash文件 的路径、宽度、高度等属性。
02
使用`<embed>`标 签
<embed>标签也可以用来插入Flash 文件，它提供了更多的参数设置选项 ，如自动播放、循环播放等。
03
使用JavaScript
第12章-表单和jQuery-UI
jQuery UI 是建立在 jQuery JavaScript 库上的一 组用户界面交互、特效、小部件及主题。
12.2.1 课堂案例-创意家居 12.2.2 折叠面板Accordion 12.2.3 选项卡Tabs 12.2.4 日期选择器Datepicker 12.2.5 对话框Dialog
日期选择器Datepicker用于从弹出框或内联日
历选择一个日期。该控件能非常方便的展现日 历中的日期，灵活配置相关选项，包括日期格 式、范围等。我们经常在WEB应用中用到 Datepicker，比如要求用户输入日期进行相关 查询。
在网页中插入日期选择器Datepicker的操作步骤 如下。
13.1.1 课堂案例-网页设计 13.1.2 表单及属性 13.1.3 文本元素 13.1.4 单选按钮和单选按钮组 13.1.5 复选框和复选框组 13.1.6 选择 13.1.7 文件元素 13.1.8 按钮 13.1.9 HTML5表单元素
案例学习目标：学习表单的基本操作。
将光标置于要插入文件元素的位置。
选择菜单【插入】|【表单】|【文件】或 单击【插入】面板【表单】选项卡中的【文件】 按钮 插入一个文件域，如图12-31所示。
选中文件元素，在【属性】面板中进行相 应设置，如图12-32所示。
对表单而言，按钮是非常重要的，它能够控制对 表单内容的操作，如提交或重置。要将表单的内 容发送到远程服务器上，需要使用提交按钮；要 清除现有表单内容，需使用重置按钮。用户也可 以自定义按钮的名称。
选择菜单【窗口】|【属性】，打开【属性】 面板设置选项，如图12-62所示。
12.3.1练习案例-咖啡餐厅 12.3.2练习案例-网上生活超市
案例练习目标：练习表单的基本操作。 案例操作要点：
网页制作基础教程 (12)
12.1.4 使用模板 1．创建基于模板的新页面 选择“文件”→“新建”命令，打开“新建文档”对话框，选择 “模板中的页”标签，在“站点”列表中选择需要的站点，在“站 点‘…’的模板”列表中选择需要的模板，此时对话框的右边显示 该模板的效果图，单击“创建”按钮。 在创建的新页面中，前面定义的不可编辑区域中鼠标选择不可用， 呈现 状态。而在可编辑区鼠标选择功能可用，可以直接在其中输 入特定的内容。
（3）如果文档中有不能自动指定到模板区域的内容，则会出现 “不一致的区域名称”对话框，如图所示。对话框中列出了可以应 用到模板中的所有可编辑区域，可以通过这些可编辑区域来为内容 选择目标。
（4）单击“取消”按钮，可以取消将模板应用到文档的操作，然 后再添加与新模板文件中的区域同名的新区域。
在“不一致的区域”对话框中选择未解析的区域。在“将内容移到 新区域”弹出式菜单中，选择新模板中的区域，或者选择“不在任 何地方”，将该内容从文档中删除。
2．将模板应用到现有文档
（1）选择“文件பைடு நூலகம்→“打开”命令，打开想要应用模板的文档。 （2）执行下列操作之一。 ● 在“文档”窗口中单击，然后选择“修改”→“模板”→“应 用模板到页”菜单命令，“选择模板”对话框。选择所需站点， 并从“模板”列表中选择一个模板并单击“选择”按钮。
● 在“资源”面板的“模板”类别中选择模板，然后单击面板底 部的“应用”按钮。 ● 将模板从“资源”面板的“模板”类别中拖曳到“文档”窗口 的设计视图。
（4）单击“保存”按钮，就把当前页面保存为模板。系统将自动在 站点根目录下创建“Templates”文件夹，并将创建的模板文件保存 在该文件夹中。
2．通过“资源”面板创建新模板 （1）选择“窗口”→“资源”命令或按F11键，打开“资源”模板。 （2）单击左边的“模板”按钮 ，打开“资源”面板的模板类别。面 板的上方是模板的预览效果，下方是模板文件列表。
第12章信息技术应用
12.3.3 浏览自己制作的网页
三种浏览自己制作的网页的方法： 三种浏览自己制作的网页的方法：
单击【预览】按钮可以预览实际效果； 选择【文件】→【用浏览器预览】命令， 在资源管理器或我的电脑中找到该网页文件， 双击该文件即可用浏览器打开网页。
12.4 建立一个完整的网站
12.4.1 新建一个站点 12.4.2 站点的管理
编辑方法同Word中图片的编辑方法是类似 编辑方法同Word中图片的编辑方法是类似 Word 的 。
12.5.3 在网页中添加超链接
网页的一个迷人之处就在于其超链接的使用， 网页的一个迷人之处就在于其超链接的使用，浏 览者可以利用超链接从一个网页跳到其他网页， 览者可以利用超链接从一个网页跳到其他网页， 从而自由地漫游在网络的海洋中 链接到另一个网页 链接到一个网址 链接到电子邮箱
利用HTML HTML源代码制作网页 12.9 利用HTML源代码制作网页
12.9.1 12.9.2 12.9.3 11.9.4 12.9.5 HTML简介 HTML简介 HTML的开发工具 HTML的开发工具 一张简单的HTML HTML网页 一张简单的HTML网页 HTML中的基本语法 HTML中的基本语法 HTML中的基本标记 HTML中的基本标记
12.1 网页与网站
上网时，大家看到的每一个页面都称为一张“ 上网时，大家看到的每一个页面都称为一张“网 一张网页其实就是一个文本文件， 页”。一张网页其实就是一个文本文件，一般采 HTML语言来编写 后缀名通常为“ 语言来编写， 用HTML语言来编写，后缀名通常为“.htm” .html”等 或“.html”等。 网站就是一系列网页文件和其它相关文件的集合， 网站就是一系列网页文件和其它相关文件的集合， 这些网页和文件通常存储在一个总文件夹内， 这些网页和文件通常存储在一个总文件夹内，在 文件夹内部再把网页和其它文件按照网页之间的 逻辑关系分门别类的存储在各个子文件夹内， 逻辑关系分门别类的存储在各个子文件夹内，以 便于整个网站的组织和管理。 便于整个网站的组织和管理。
网页制作案例教程 清华大学出版社 第12章 网页中常见Flash制作PPT课件
9
时间轴控制器
10
显示/隐藏时间轴的窗口：选择“窗口”菜单中 的“时左上角的三角形 播放头：指示在舞台中当前显示的帧 滚动播放头：把当前的帧移动到时间轴窗口的播
放头，以方便操作 绘图纸外观：可以查看当前帧与前后相邻数帧里
HTML基础
基础篇
网页设计与开发流程 （AscentSys医药商务系统）
网页制作基础
6
Flash是Adobe公司推出的一款矢量图形编辑和 动画制作软件，使用其内置的时间轴特效，可 以制作应用于文本、图形、按钮和位图等对象 的复杂动画。
Flash工作界面共分7部分，分别是标题栏、菜 单栏、工具面板、时间轴、舞台、属性面板、 面板组，如下图所示
2、选择“文件”—>“导入”—>“导入到舞台”，把后缀 为.gif的图插入到舞台中
3、选择“视图”—>“标尺”，显示标尺刻度，然后从标 尺中，拖出一条辅助线
4、选择工具面板中的“文本”工具，然后在“属性面板 ”中设置文本的相关属性
19
5、选中第1帧，在文本中输入文字“亚” 6、选择第2帧，点右键选择“插入关键帧”，在
本章内容在全书知识结构中所处位置如图所示
5
网站发布、测试和维护
提高篇
Web服务器创建
网页中常见Flash制作
JavaScript篇
JavaScript网页应用 Javascript概述
使用CSS布局规划网页
CSS篇
CSS样式表
利用模板和库创建网页
交互式网页表单的设计与使用
HTML篇
网页布局规划设计 网页基本元素设计
文档中输入“思”，并按辅助线调整其位置 7、按照上述步骤方法，继续插入其他关键帧，
网页制作案例教程第12章已完成
四、划分切片 利用【切片选择】工具先选择需要划分的切片， 如图12-69所示，单击属性栏中的按钮，在弹出的 【划分切片】面板中设置好划分切片的方式及个数， 如图12-70所示。单击按钮即可得到如图12-71所示 的划分切片。
图12-69
选择切片
图12-70
【划分切片】面板
图12-71
划分的切片
五、转换切片
由于自动切片和基于图层的切片会跟随 着内容的变换而发生变换或自动更新，所 以有时需要将自动切片和基于图层的切片 转换为用户切片。转换方法为：选择【切 片选择】工具 ，在切片区域内单击鼠标 右键，在弹出的菜单中执行【提升到用户 切片】命令，即可将自动切片和基于图层 的切片转换成用户切片。
六、查看编辑切片 【切片选项】对话框选择【切片选择】工具， 直接在切片内双击鼠标左键即可弹出如图12-72 所示的【切片选项】对话框。 在【切片类型】右侧一般设置“图像”选项， 如果切片中包含有纯色活HTML文本，则应该 设置“无图像”选项，这样优化输出后的切片 则不包含图像数据，因此可以提供更快的下载 速度。在【尺寸】下面的各参数设置区中还可 以按照精确的数值来设置切片的大小。
图12-72
【切片选项】对话框
七、隐藏、显示和清除切片 当图像文件中创建了切片后，执行【视 图】/【显示】/【切片】命令，则可以把切 片隐藏，再次执行该命令可以把切片显示。 执行【视图】/【清除切片】命令，则可以 把切片在图像文件中清除。
12.3 存储网页图片
在Photoshop中用于存储为网页图片 的方法有两种，一种是不保留添加到文件 中的任何有关Web特性图片的普通存储， 另一种是存储有关Web特性图片的优化存 储。
图12-65
创建的切片
图12-66
网页设计与制作教程第12章 光影世界后台管理页面
最后还要说明的是，当这些栏目整合完成之后，记得正确地设置各级页面 之间的链接，使之有效地完成各个页面的跳转。
习题12
习题12
12.3 制作添加新闻页面
制作添加新闻页面
添加新闻页面是管理员通过表单输入新的新闻数据，然后提交到网站数据 库中的页面。添加新闻页面的效果如图12-10所示，布局示意图如图12-11所 示。
12.3 制作添加新闻页面
制作添加新闻页面
1．前期准备 在建立网站首页的准备工作中，用户曾经在网站根目录中建立了一个专门 存放JavaScript脚本的目录js，这里提前将添加新闻页面中需要用到的脚本文 件calender.js复制到目录js中。 2．制作页面 （1）页面结构代码 （2）添加JavaScript脚本实现网页特效
网页设计与制作教程 （HTML+CSS章 光影世界后台管理页面
机械工业出版社
12.1 制作后台管理登录页面
制作后台管理登录页面
光影世界后台管理登录页面是管理员在登录表单中输入用户名、密码和验 证码进而登录系统的页面，该页面的效果如图12-1所示，布局示意图如图12-2 所示。
12.4 制作修改新闻页面
制作修改新闻页面
在修改新闻页面中，管理员可以选择要修改的新闻，然后在修改新闻表单 中重新定义新闻的各项内容。修改新闻页面的效果如图12-14所示，布局示意 图如图12-15所示。
12.5 网站的整合
网站的整合
在前面讲解的光影世界的相关示例中，都是按照某个栏目进行页面制作的， 并未将所有的页面整合在一个统一的站点之下。读者完成光影世界所有栏目的 页面之后，需要将这些栏目页面整合在一起形成一个完整的站点。
网页设计第12章
Web工具 工具
“多边形切片”工具 ：可以实现图像的多边形形 多边形切片” 多边形切片 状的切片切割。 状的切片切割。 隐藏切片和热点” “隐藏切片和热点”工具 ：实现切片热点视图 的隐藏。 的隐藏。 显示切片和热点” “显示切片和热点”工具 ：实现切片热点视图 的显示。 的显示。
颜色工具
颜色工具主要用于设置填充颜色和描边颜色。 颜色工具主要用于设置填充颜色和描边颜色。 笔触颜色” 用于设置描边的颜色。 “笔触颜色” ：用于设置描边的颜色。 填充颜色” 用于设置填充的颜色。 “填充颜色” ：用于设置填充的颜色。 设置默认笔触/填充色 填充色” “设置默认笔触 填充色” ：将笔触颜色和 填充颜色设置为默认值，即笔触颜色为黑色， 填充颜色设置为默认值，即笔触颜色为黑色， 填充颜色为白色。 填充颜色为白色。 没有描边或填充” “没有描边或填充” ：设置没有描边或填 充。 交换笔触/填充色 填充色” “交换笔触 填充色” ：将笔触颜色和填充 颜色进行交换。 颜色进行交换。
位图工具
“铅笔”工具 ：通过拖动鼠标的方式创建任意 铅笔” 铅笔 形状的线条。 形状的线条。 橡皮擦” “橡皮擦”工具 ：用于擦除不需要的区域或者 对象。 对象。 模糊” “模糊”工具 ：用于使编辑的区域或者图像具 有模糊的效果。 有模糊的效果。 锐化” “锐化”工具 ：用于使编辑的区域或者图像具 有锐化的效果。 有锐化的效果。 “减淡”工具 减淡” ：用于使编辑的区域或者图像颜 色减淡。 色减淡。
位图工具
位图工具主要用于绘制位图和对位图进行处 理。
用于创建矩形选区。 “选取框”工具 ：用于创建矩形选区。 选取框” 椭圆选取框” “椭圆选取框”工具 ：用于创建椭圆或圆形选 区。 套索” “套索”工具 ：通过拖动鼠标的方式建立任意 形状的选区。 形状的选区。 多边形套索” 用于创建多边形选区。 “多边形套索”工具 ：用于创建多边形选区。 魔术棒” “魔术棒”工具 ：将颜色相近的区域创建为选 区。 刷子” “刷子”工具 ：用于创建具有填充效果的粗线 条。
第12章网页制作案例教程
12.1 Fireworks MX 2004工作区简介
图12-1-2 “Macromedia Fireworks MX 2004”欢迎窗口
12.1 Fireworks MX 2004工作区简介
12.1.2 主要工具栏和修改工具栏 1．主要工具栏 主要工具栏由一些常用的操作按钮组成，包括打开和保存文件、导入和导 出文件、撤消与重做和复制与粘贴等。这些都是Fireworks的基本操作，和 其他软件的操作方法也基本相同。 2．修改工具栏 修改工具栏由4组工具组成，如图12-1-3所示。它们主要用于对图形、图像 的基本编辑。将鼠标指针移到工具栏中的工具按钮上时，会显示它的中文 名称，从中文名称可以了解到它的作用（注意：这些工具都是针对选中的 对象进行操作）。
12.1 Fireworks MX 2004工作区简介
（3）“插值法”列表框：它允许设置对图像进行缩放时插入像素的方式。 其中各选项的含义如下所述。 “双立方”选项：表示缩放图像时最大程度地保证图像质量。 “柔化”选项：它利用软平滑来消除缩放后产生的锯齿。采用这种方法 缩放，有时可以产生意想不到的艺术效果。 “双线性”选项：比柔化方式效果好，但不如双立方体方式效果好。 “最近的临近区域”选项：缩放可能导致图形有锯齿状的边缘，图像灰 度跳跃，不平滑，失真大。它与利用放大镜工具放大或缩小图像的效果差 不多。 （4）“显示开始页”复选框：取消该复选框前面的对勾后，再启动 Fireworks MX2004时将不再显示“Macromedia Fireworks MX 2004”欢迎窗 口。选中该复选框后将再次显示该窗口。 2．“编辑”选项卡 “编辑”选项卡如图12-1-13所示，可用来设置一些与Fireworks系统编辑操 作有关的参数，如：定义是否使用精确光标形式、编辑图像时系统的默认 状态等。
第12章 (25)教材配套课件
14
● “超链接” ：插入超级链接。 ● “E-mail 链接” ：插入电子邮件链接。 ● “锚点” ：在插入锚记名称，用于网页中的定 位，如网页上、中、下的定位。 ● “表格” ：插入表格。 ● “图像” ：单击图像图标，可打开一组与图像 有关的快捷图标(如图 12-5 所示)，分别用于在插入点插入 图像、图像占位符、翻转图像、Fireworks HTML、导航 条和不同的热点。
图12-13 标准工具栏
27
28
6．文档窗口
文档窗口用来显示当前创建或者编辑的Web文档。在
该窗口中显示的内容和显示形式与当前的视图方式有很大
关系。
(1) 设计视图。单击“视图\设计”命令或单击文档工
具栏上的“设计”按钮
，可进入如图12-14所示的设
计视图。在设计视图方式下，文档窗口显示的内容与浏览
31
图12-15 代码和设计视图
32
(3) 代码视图。单击“视图\代码”命令或单击文档工 具栏上的代码按钮 ，可进入如图12-16所示的代码视图。 在代码视图方式下，文档窗口中仅显示当前文档对应的 HTML代码。尽管在设计视图中可以完成绝大部分网页制 作工作，但是有些高级的网页效果还是必须运用代码来进 行编辑的。在代码视图中，用户还可以通过“视图\代码视 图选项”菜单进行设置文本换行、显示代码行号、高亮显 示无效HTML代码、设置代码元素的语法颜色及设置缩进 方式等操作。
23
图12-11 “HTML”标签
24 4. 文档工具栏 文档工具栏位于文档窗口的上方，单击“查看\工具栏\ 文档”可以显示或隐藏该栏。文档栏中的图标和选项用于 调整页面的视图方式，如图12-12所示。
图12-12 文档工具栏
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
12.1 Flash 5的基本组成 的基本组成
1、菜单栏 Flash自左到右共有File（文件）、Edit（编辑）、View （查看）、Windows（窗口）、Help（帮助）等9个菜单。 2、工具栏
3、绘图工具栏 绘图工具栏，它由Tools（工具）、 View（视图）、Colors （颜色）、Option（工具选项）四个区域组成。
4、 预览和测试 选择Control | Test Movie或Test Scene命令，对动画影片 进行测试。这时Flash会打开一个独立的窗口来播放动画。
控制动画播放栏
5、导出Flash动画 Flash电影制作完成后，需要将其导出为浏览器可以识别和 运行的格式或者制作为可以独立播放exe文件。
ห้องสมุดไป่ตู้
导出动画对话框
动画导出设置对话框
本章小结和重点回顾
本章介绍了Flash界面的基本组成和Flash的基本工作 流程。融会贯通这些知识对今后的学习是非常有益的，因为 Flash就是利用界面上的各种命令、工具以及按照基本工作 流程来创作动画的。 本章的重点知识有：Flash界面的基本组成、基本绘图 工具、工作区、时间线、Flash文件的创建和属性设置、对 象的导入、测试、导出Flash动画。
6、时间线
时间线是Flash中最重要的工具之一，包括帧显示栏和 层。 在讲述这个重要工具前，首先再应该熟悉一下动画产生 的基本过程。所谓的动画，实际上将一些连续的静止画面 以非常快的速度播放（一般为每秒24个画面以上），由于 人眼有视觉暂留性的特性，就产生画面中的内容在运动的 感觉。 在Flash中，静止画面被称为帧。
导入文件对话框
3、制作Flash动画 Flash主要支持以下几种动画类型： ⑴逐帧动画。即每一幅静止图画均由制作者完成。这类动画的 优点是如果将步骤分解得很细腻，那么动画效果将非常流畅，缺点 是计算机不参与自动制作动画，制作者必须手动完成每帧动画画面， 这也导致最终输出的动画文件相对比较大； ⑵渐变动画。这类动画只需创建每一帧和最后一帧，中间帧由 Flash自动完成，因此动画变化的快慢取决于中间帧的数量。 ⑶交互式动画。所谓交互式动画，就是可以让浏览者参与到执 行过程中的动画。用Flash制作的游戏就是典型的交互式动画。
12.2 Flash 5的工作流程 的工作流程
1、Flash文件的创建和属性设置
动画属性对话框
2、创建符号或导入对象
符号的主要作用是缩小Flash文件的大小以便于网络上 的传输，而且有些动画必须基于符号才能创建，因此应养 成在正式创建动画前按需将基本对象制作成符号的习惯。
各种多媒体文件导入到Flash中。Flash支持许多格式 图像、影像、声音文件的导入，如常见gif、jpg、eps、 swf、wav、mp3、mov等
4、浮动面板 Flash中的面板的功能与Dreamweaver和Firework是基本一 致的，并同Dreamweaver 4一样，在窗口右下方提供了打开和 关闭7个常用面板的快捷方式
5、场景与工作区
窗口中间的大片空白是工作区 工作区，其中白色区域是能够 工作区 最终显示的，灰色区域是编辑区 编辑区 编辑区，编辑区 编辑区 编辑区则不能被显示也 不影响输出文件的大小。 因此一般情况下，临时对象可放置在编辑区中 编辑区中，一旦 编辑区中 需要可将其拖曳到工作区中 工作区中。 工作区中 另外，充分利用这2个区域的功能，也可以制作一些特 殊效果，如文字从屏幕的一端进入，从另一端离开的跑马 灯效果。由于工作区 工作区是能被最终显示的，所以它又被称为 工作区 Stage（场景）。
7、符号库 符号库的作用是存放可以重复使用的对象，这些存在于 符号库的对象被称为符号（Symbol）。为了便于理解，可 以将符号库想象成剧团，符号想象成演员。通过使用演员 扮演许多不同的角色的方法可以降低演出成本。 使用符号除了可以缩小文件大小外，还有以下2个优点： ⑴使对象编辑更为简单。当符号被修改后，Flash会自 动将更新动画中的所有该符号的实例； ⑵加快Flash动画播放速度。因为符号只需下载一次即 可被浏览器使用。