动画制作第三章 网页中的基本元素
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
1.1.3 网页的基本组成元素[共2页]
![1.1.3 网页的基本组成元素[共2页]](https://img.taocdn.com/s3/m/d35d2ca402768e9950e73822.png)
4 域名是。
1.1.3 网页的基本组成元素网页是由多种元素组成的。
文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。
而其他的很多元素（如超链接等）都是基于这两种基本元素而创建的。
从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。
然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。
网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。
以内容来划分，一般的网页界面包括网站Logo、Banner、导航栏、内容栏和版尾等部分。
1．LogoLogo（意译为标识、标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现，其制作要点如下。
● Logo的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo醒目，让浏览者能很快看到。
● Logo的内容通常包括特定的图形和文本，其具体内容应与开发网站的企业文化紧密结合，以体现网站的特色，图1-4所示为新浪网的Logo。
2．BannerBanner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。
Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。
其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素及120像素×240像素等。
其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小应在15KB左右，而88像素×31像素的Banner文件大小最好在5KB左右。
除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网首页特卖活动横幅广告。
网页制作三剑客
《网页制作》课程教学大纲∙第一部分大纲说明∙第二部分教程总体设计方案∙第三部分教学内容和教学要求第一部分大纲说明一．课程性质、目的与任务随着计算机网络与通讯技术的发展， Internet 在人们的生活、学习和工作中的位置越来越重要，通过发布 Web 站点来开展各项政治与经济活动已成为当今时代的流行趋势。
因此，掌握 Web 网页的制作和 Web 站点的管理等知识已经成为现代人必备的一种技能。
本课程的将全面介绍网站建立与网页制作的有关知识以及 Macromedia 公司最新发布的网页制作顶级软件Dreamweaver MX 2004 与 Fireworks MX 2004 的操作使用方法，目的是使学生全面掌握网站设计与建立的全过程以及 Web 页制作的常用技术和方法，使学生能够开发与制作出具有专业水准的网站，以适应现代网络社会对人才的需要。
二．与相关课程的衔接学习者已经学习并掌握微机基础知识包括 Windows的操作、网络的基本概念、Internet的使用。
三．课程教学目标1.掌握网页图形图像处理方法。
通过学习Fireworks的图形图像处理的基本操作，能够利用该软件进行网页图形图象制作、文字制作、图像编辑与处理、按钮、导航条、Gif动画等网页元素的制作。
2．掌握多媒体动画制作方法。
使用Flash设计制作各种动画、在动画作品中加入图片、声音、视频等多种媒体、能够运用ActionScript实现动画控制和用户交互。
3．掌握网站建立与网页设计方法。
使用网页设计常用软件Dreamweaver创建与设置网站、管理与维护网站、测试与发布网站的技术与方法。
网页与网站的基本概念、网站策划与创建原则、网站的开发与发布工作流程、网页制作的各种方法和技巧，如文本处理、图象处理、超级链接、网页布局、CSS样式、层的应用、动态特效、多媒体网页制作、交互式网页制作等。
在较短的时间内，通过学习《网页制作》网络教程，能够设计制作出布局美观、链接合理、包含文字、图形、图象、动画、声音、视频等多种媒体信息并具有交互功能的网页；能够建立、管理与发布小型网站；应用网站与网页技术传授知识、传播信息。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
学会使用AdobeDreamweaver进行网页动画制作
学会使用AdobeDreamweaver进行网页动画制作第一章：Adobe Dreamweaver简介Adobe Dreamweaver是一款功能强大的网页设计和开发工具，由Adobe公司开发。
它集成了网页制作所需的各种工具和功能，能够帮助用户创建出精美、功能丰富的网页。
Dreamweaver具有直观的界面和强大的编辑器，使得用户可以轻松地编辑和调整页面布局、添加多媒体元素等。
同时，它还支持网页动画制作，提供了丰富的动画特效和工具，方便用户创建出生动有趣的网页。
第二章：了解网页动画网页动画是指在网页中使用图像、文字或其他元素进行动态效果展示的技术。
通过使用网页动画，可以使网页更加吸引人，增强用户的视觉体验，提高网页的互动性和吸引力。
常见的网页动画效果包括渐变、旋转、缩放、动态图像切换等。
在使用Dreamweaver制作网页动画之前，我们需要了解不同的网页动画效果以及如何选择合适的效果来展示我们的内容。
第三章：使用Dreamweaver制作基础网页动画在Dreamweaver中制作网页动画非常简单。
首先，我们可以使用内置的动画特效库来选择我们所需的动画效果，如文本闪烁、图像飞入等。
只需要简单的拖拽和设置一些参数，就能够在网页中实现这些动画效果。
另外，Dreamweaver还提供了可视化的时间轴编辑器，方便用户调整动画的持续时间、延迟时间和循环次数等。
第四章：自定义网页动画效果除了使用Dreamweaver内置的动画特效库，我们还可以通过自定义代码来创造独特的网页动画效果。
Dreamweaver支持HTML、CSS和JavaScript的编辑和预览，我们可以使用这些语言来编写我们所需的动画效果代码。
通过控制元素的位置、大小、颜色和透明度等属性，以及使用CSS3的过渡和动画效果，我们可以实现更加丰富多样的网页动画效果。
此外，还可以结合JavaScript的能力，实现更高级的动画效果，如拖拽、碰撞效果等。
山东省春季高考学习指导与练习 (数字媒体类和网络技术类)答案2
第一节 网页基础知识
【同步练习】
一、选择题
1. C 2. B 3. A 4. B 5.A 6.B 7.A 8.B 9. C 10.C
二、填空题
1.首页 2.html htm 3.URL 4.HTML 文档 5.色相 明度 纯度 6.蓝色 绿色 7.客户机/服务器
三、简答题
1. WWW 服务采用客户机/服务器工作模式，用户创建的网站及网页存放到 Web 服务器中， 当用户使用浏览器请求访问 Web 服务器上的信息时，Web 服务器接受并处理用户请求，然后 向浏览器发送对应的文件内容供浏览者浏览。
-1-
2. <form id="form1" name="form1" method="post" action=""> </form>
第二章 站点的创建与管理
第一节 DreamweaverCS6 工作界面及站点的创建与管理
【同步练习】
一、选择题
1. B 2.A 3. A 4. D 5.C 6.D 7.D 8.C 9.B 10.B 11.C
网页制作教程第3章
3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮， 件系统】单选钮，在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件，单击【确定】 文件，单击【确定】按 如图3 所示。 钮，如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。
3.1.1 添加文本
2. 插入空格 若要在文本中插入空格，可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中，选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式
3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中，可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设 计】视图中，然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令，弹出【选择性粘贴】对话框，然后选择需要的 选项。
3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件
3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称， MID。 Interface)的简称，其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字， 身，而是将每个音符记录为一个数字，从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差， 式。MIDI格式文件声音效果的好与差，与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式， MP3格式，是运动图像专家组音频第3层(Motion Picture Layer-3)，或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3)，或称为MPEG音频第3层的一 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD mp3文件 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”，以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。
网页的组成元素有哪些-有什么组成元素-具体介绍
网页的组成元素有哪些-有什么组成元素-具体介绍在〔制定〕网页时要组织好页面的基本元素，其常见的元素包括文字、图片、动画、音频、视频、超链接等，这些元素在网页中都占据着相对重要的位置。
以下是关于网页的组成元素有哪些的具体介绍。
(1)文本。
文本是网页中最常见的元素之一，也是网页内容的核心部分。
在制定网页时，应合计到文字的字体、字号、颜色、段落、层次等属性。
(2)图像。
图像是用来美化网页的主要元素，具有生动、直观等特点，在网页中合理使用图像，不仅可以产生一定的视觉冲击力，而且可以简化页面内容，从而传达出用文字难以表达的信息。
(3)动画。
动画是网页上最活跃的元素，通常状况下，吸引访问者最有效的方法是制作优秀的、有创意的动画。
网页中使用的动画文件一般采纳GIF动画格式或Flash动画格式。
(4)视频、音频。
随着网络带宽的增加，在网页中嵌入视频和音频元素，可以提升网页的多媒体效果，更加直观、生动、准确、特别地表达网页内容，受到浏览者的欢迎。
(5)Logo。
网站Logo相当于网站的图形标识，它可以显示网站名称、英文网址、网站理念等信息。
(6)Banner 。
Banner多用于展示网络广告的内容，又称网络图片广告，常位于Logo的右侧，多采纳GIF或Flash动画建立的动画元素，其形状、颜色应与整个页面的布局和色调一致。
(7)超链接。
超级链接(简称超链接或链接)是网页中最重要和最基本的元素之一。
超链接可以使一些孤立的网页产生一定的互相联系，从而使各个网页形成一个有机的整体。
当鼠标指针移动到设置有超链接的对象(如文字、图片、标题、动画等)时，鼠标指针会变成一个手指形，只要单击鼠标就可以打开超链接的网页。
(8)按钮。
按钮实质上也是一种超链接，通过按钮的形式可以直观地提示浏览者进行操作。
(9)导航栏。
导航栏实际上是一组采纳超链接技术的网页对象，包括文字、图像、按钮等。
它们有效地连接了网站或其他网站的内容，使你可以在各部分或各网站之间快速切换。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
编辑：对图像进行编辑操作类，将CSS中所建立的样 式应用到图像中。
图像占位符：在网页中给图片预留位置。
文本说明
在选取图像后的属性面板的“替换”下拉列 表框中可以输入图像的文本说明。
图像与文本的对齐
选取图像后，在属性面板的“对齐”下拉列表 框中可设置处于同一行上的图像与文本的对齐方 式。
2、文本属性(文本属性即文字的大小、字形、颜色等格式)
(1)基本样式设置 [属性面板]
格式： 段落 标题1—标题6（从大到小） 预先格式化
字体： 字体的编辑 字符的颜色、大小、加粗倾斜等
(2)段落属性设置 对齐方式 缩进与凸出
二、列表的使用
列表：将具有先后顺序或相似特性的几行文 字进行对齐排列，而且在左侧添加编号或符号。
图像大小处理
当用户在网页中添加一幅大尺寸的图像时，即使用 【宽】和【高】文本框或拖动方式将图像调小，因 图像的容量并未改变，仍然会影响下载时间。因此， 在加入图像之前，最好用Fireworks或Photoshop之 类图像处理软件将图像尺寸设置好。
地图名称和热点工具：一般在指向图像某一点时设 置超级链接时用。
JPEG格式
JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效 地压缩图片，丢失人眼不易察觉的部分图像， 使文件容量在变小的同时基本不失真，通常用 来显示颜色丰富的精美图像。
PNG格式
PNG全称为“Portable Network Graphics”， 意为便携网络图像，它是逐渐流行的网络图像格 式。PNG格式既融合了GIF能透明显示的特点，又 具有JPEG处理精美图像的优势，且可以包含图层 等信息，常常用于制作网页效果图。
将图像确定后双击占位符，在打开的对话框 中设置后插入即可。
GIF格式
GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个支 持网页的图像格式，在PC机和苹果机上都能被正 确识别。它最多支持256种颜色，可以使图像变 得容量相当小。GIF图像可以在网页中以透明方 式显示，还可以包含动态信息，即GIF动画。
3、列表嵌套
选中要缩进的项目或光标移动到要缩进的某一
项列表中，单击“文本缩进”按钮。 4、更改列表的属性(属性面板中的“列表项目”)
光标移到要修改列表属性的任一项中，点击 “列表属性”按钮，修改。
标尺
标尺分为水平标尺和垂直标尺，分别显示 在Dreamweaver 文档编辑区的上方和左侧。
标尺的单位包括像素、厘米和英寸，在 默认状态下使用像素为单位。
网格
网格与标尺都是定位工具，但在网页布局中 使用网格更方便。文档编辑区中显示了网格 后，就可以对网页元素进行准确定位。
第二节 图像
一、图像文件的类型
二、插入图片对象 三、设置对象属性
1、选中图像 2、在属性面板中设置各属性
名称：脚本引用中所使用的名称。 宽与高：图像的大小。 源文件：图a.拖像动文图件像的上路的径控制。点。
图像边距
选取图像在属性面板的“垂直边距”和“水 平边距”文本框中可以设置图像与页面上方和 左侧之间的距离，也可以设置图像与其它网页 元素之间的距离。
图像边框
选取图像后，在属性面板的“边框”文本框 中可以设置图像边框的宽度，定需插入的图像，但确定 了图像大小的时候，可以使用图像占位符来代 替图像的方式插入到文档中。
动画制作第三章 网页中的基本元素
本章提纲
本章内容:
第一节 插入文本与列表 第二节 插入图像 第三节 插入其它基本元素 第四节 超级链接 第五节 综合实例
本章难点、重点:
文本、图像和其它基本元素的插入 超级链接的建立
第一节 文本与列表
一、文本 1、页面中文本编辑
在页面中插入文本的方法：输入、复制、导入 文本的分段: 按E小1n、t技e空r巧（格：H的TM输L标入记<P>……</P） 文本的换行: Shi2f、t+换En行t和er段（落HT的ML输标入记<br>）
图像插入
新建空白HTML文档。 打开“选择图像源”对话框：
菜单命令 单击按钮 拖动图像按钮 选择图像的路径名，单击“确定”按钮。 在询问“是否”将图片复制到当前站点文件 夹中时单击“是”按钮。 设置图片文件保存路径。 注意：
1、如果网页中插入的对象不在当前站点中，在
3、使用插入特殊字符面板
插入特殊字符
在Dreamweaver中编辑文本时，往往会遇到一 些无法通过键盘直接输入的特殊字符，如版权 符号©、注册商标符号®等，可以通过插入特殊 字符的功能进行插入。
在字符之间添加空格
Dreamweaver中文档格式都是以HTML编码形 式存在的，而HTML编码中只允许字符之间包含 一个空格，所以在Dreamweaver中无论按多少 次空格键都只会输入一个空格。
b.或在属性面板上输入图像的尺寸。 c.恢复图像的原始尺寸。
链接：单击图像打开的网页。 对齐：图像在当前行的对齐方式。 替代：制在作浏图像览热器点中区当链鼠接标：指向图片时，打开
说明框a.的使内用热容点。工具在图像上画热点区。 垂直边b.距选与中热水点平区边，距在：属图性面像板四中周设空置白链宽接。度。 低品质源：主图像下载前显示的图像。 边框
无序列表
无序列表又称为项目列表，是一系列无顺序级 别关系的项目文本组成的列表，一般前面是用项 目符号作为前导字符。
有序列表
有序列表又称为编号列表，是有一定排列顺 序的列表，一般前面有数字前导字符，其中前 导字符可以是阿拉伯数字、英文字母或罗马数 字等。
创建嵌套列表
嵌套列表是包含在其它列表中的列表。
为现有文本创建列表
除了先创建列表项再输入文本外，还可以先 输入文本，然后再设置列表项。 1、创建列表
（1）将光标停在要插入列表的地方，单击属 性面板 “编号列表”或“项目列表”。
（2）选中要成为列表的所有段落，单击按钮 即可；取消方法相同。
2、在结束列表的位置，连续输入两次回车或再次
单击该按钮。