网页设计与制作全套教学课件

第

1

章网页制作与html5基础知识网页设计与制作（第2版）2026/10/30第1章概述1第

1

章概述1.1网页制作基础知识1.2DreamweaverCS6概述1.3网页标准技术与HTML51.4综合案例2026/10/30第1章概述21.1网页制作基础知识2026/10/30第1章概述31.1.1网页的定义和分类1.1.2网页设计的相关概念1.1.3网页的基本组成元素1.1.4网页制作开发工具1.1.1网页的定义和分类1.按位置分类主页内页2.按表现形式分类

静态网页动态网页网页(Webpages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。新浪网首页1.1.2网页设计的相关概念站点发布浏览器导航条超链接导航条表单URLIP地址域名新浪网邮箱注册表单1.1.3网页的基本组成元素1.Logo2.Banner3.导航条4.内容栏5.文本6.图像7.按钮8.Flash动画9.版尾新浪网LOGO当当网的Banner新华网首页导航栏网页版尾1.1.4网页制作开发工具记事本程序EditPlus编辑器Dreamweaver网页编辑器图像处理软件动画制作软件网页配色软件1.1.5如何学好网页制作学习网页制作是一个循序渐进的过程，除勤学多练外，还需要有一定的悟性，学习方法建议：先从最简单的网页入手，由易到难；不能闭门造车，应多分析和借鉴优秀的网页；初期不必学编程语言，有一定基础后再学习一些编程语言，如HTML和JavaScript等。1.2DreamweaverCS6概述2026/10/30第1章概述91.2.1启动与退出DreamweaverCS61.2.2DreamweaverCS6

的主界面1.2.1启动与退出DreamweaverCS6

DreamweaverCS6界面1.2.2DreamweaverCS6的主界面网页编辑窗口文档工具栏1.文档工具栏2.“属性”面板3.浮动面板组（1）插入面板（2）CSS样式面板（3）文件面板1.3网页标准技术与HTML52026/10/30第1章概述121.3.1网页结构语言1.3.2在DreamweaverCS6中创建HTML5文档1.3.3HTML5常用标签1.3.4HTML5新增标签1.3.1网页设计语言XHTML1.0结构语言HTML5结构语言网页表现语言网页行为语言1.XHTML1.0XHTML（ExtensibleHyperTextMarkupLanguage），即可扩展的超文本标记语言，是由HTML（HyperTextMarkupLanguage，超文本置标语言）发展而来的一种网页编写语言，也是目前最常见的网页编写语言之一。在2000年1月26日，XHTML语言正式被W3C批准为网页设计的国际标准语言，替代了早期的HTML3.2和HTML4.0，XHTML与HTML4.01几乎是相同的。2.HTML5结构语言由W3C（WorldWideWebConsortium，万维网联盟）牵头，苹果等公司通力协作开发出了最新的Web结构语言标准，即HTML5标准。2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本。目前，HTML5标记语言仍处于完善中，HTML5将会取代HTML4.01、XHTML1.0标准，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

3.网页表现语言网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景，以及文本的各种效果。目前网页表现的国际标准语言为CSS样式表技术。CSS（CascadingStyleSheets，层叠样式表）是一种由W3C定义的数据表格式，其作用是为XML、HTML以及XHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。4.网页行为语言包括JavaScript、JScript以及VBScript等。由于这些语言之间语法各有特点，且支持的Web浏览器各不相同，使得网页设计者往往需要花费大量的精力进行调试，因此，ECMA国际（EuropeanComputerManufacturersAssociation，欧洲计算机制造商协会，一个国际性信息和电信标准化组织）以NetScape（网景）公司开发的JavaScript脚本语言为基础，定义了ECMAScript脚本语言标准。1.3.2在DreamweaverCS6中创建HTML5文档1.在DreamweaverCS6中创建HTML5文档的操作步骤2.HTML5空白文档对应的代码HTML5文档代码视图

DreamweaverCS6新建文档1.3.3HTML5常用标签在HTML5中根据功能来分主要有3种标签，即布局标签、内容标签和复合标签。项目列表设计结果<ul><li>咖啡</li><li>茶

<ul><li>红茶</li><li>绿茶

<ol><li>中国茶</li><li>非洲茶</li></ol></li></ul></li><li>牛奶</li></ul>项目列表代码

1.3.4HTML5新增标签标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框<summary>标签包含details元素的标题<figure>规定独立的流内容（图像、图表、照片、代码等等）。<figcaption>定义<figure>元素的标题<footer>定义section或document的页脚。<header>定义了文档的头部区域<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。<nav>定义导航链接的部分。<progress>定义任何类型的任务的进度。<ruby>定义ruby注释（中文注音或字符）。<rt>定义字符（中文注音或字符）的解释或发音。<rp>在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。<section>定义文档中的节（section、区段）。<time>定义日期或时间。<wbr>规定在文本中的何处适合添加换行符。表HTML5新增标签1.4综合案例2026/10/30第1章概述211.4.1用记事本编写一个网页文档1.4.2用DreamweaverCS6制作网页文档1.4.3编写代码实现简单网页1.4.1用记事本编写一个网页文档用记事本编写网页文档1.4.2用DreamweaverCS6制作网页文档用DreamweaverCS6制作网页1.4.3编写代码实现简单网页用DreamweaverCS6制作网页第2章网页设计基础网页设计与制作（第2版）2026/10/3025第二章网页设计基础2.1网页设计基础2.2确定网站主题2.3前期规划与内容组织2.4色彩基础知识2.5配色方案2.6网站中的色彩应用2.7上机练习：饰品销售网站主页整体设计2026/10/30262.1网页设计基础网页设计基础知识包括网页布局的类型、网页整体造型和网页设计元素。在制作网页之前，需要对制作的网页有一个整体的设计，明确该网页表达什么样的内容，怎样布局网页的结构更适合用户浏览。2026/10/30272.1网页设计基础2.1.1网页布局类型网页布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置，网页布局有很多，大致可分为一字型结构、左右型结构、川字型结构、二字型结构、三字型结构、厂字型结构、匡字型结构、同字型结构、回字型结构等，下面介绍几种常见的类型。2026/10/3028第2章网页设计基础2.1网页设计基础2.1.1网页布局类型1．一字型结构一字型结构是最简单的网页布局类型，即无论是从纵向上看还是从横向上看都只有一栏，常常居中显示，它是其他布局类型的基础。2026/10/3029第2章网页设计基础2.1网页设计基础2.1.1网页布局类型2．左右型结构左右型结构将网页分割为左右两栏，两栏的宽度不同，靠左或靠右。这是一种左右为分别两页的框架结构，一边是导航链接，一边是正文。这种类型结构非常清晰，一目了然。2026/10/3030第2章网页设计基础2.1网页设计基础2.1.1网页布局类型3．川字型结构川字型结构将网页分割为左、中、右三栏，左右两栏小，中栏大。整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度的突出主页的搜索功能。2026/10/3031第2章网页设计基础2.1网页设计基础2.1.1网页布局类型4．二字型结构二字型结构将网页分割为上、下两栏，上栏小，下栏大，或上栏大，下栏小。这种类型页面最上面往往是标题，下面是正文，比如一些文章页面或注册页面等就是这一类。2026/10/3032第2章网页设计基础2.1网页设计基础2.1.1网页布局类型5．三字型结构三字型结构将网页分割为上、中、下三栏，上下两栏小，中栏大。这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为三部分，色块中大多数放置广告条与更新和版权提示。2026/10/3033第2章网页设计基础2.1网页设计基础2.1.1网页布局类型6．厂字型结构厂字型结构将网页分割为上、下两栏，下栏又分为左、右两栏。厂字型结构布局，页面顶部常常为“标志+广告条”，下方左面为主菜单，右面显示正文信息。这是网页设计中使用非常广泛的一种布局方式，一般应用于企事业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。2026/10/3034第2章网页设计基础2.1网页设计基础2.1.1网页布局类型7．匡字型结构匡字型结构将网页分割为上、中、下三栏，中栏又分为左、右两栏。这种布局上面是标题及广告，中间一侧是链接，另一侧是很宽的正文，底部是网站的辅助信息。2026/10/3035第2章网页设计基础2.1网页设计基础2.1.1网页布局类型8．同字型结构同字型结构将网页分割为上、下两栏，下栏又分为左、中、右三栏2026/10/3036第2章网页设计基础2.1网页设计基础2.1.1网页布局类型9．回字型结构回字型结构将网页分割为上、中、下三栏，中栏又分为左、中、右三栏。回字型网站的布局最上面常常的是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。2026/10/3037第2章网页设计基础2.1网页设计基础2.1.2网页整体造型网页整体造型是指页面的整体形象，这种形象是图形与文本的组合。页面元素的基本形状有矩形、圆形、三角形、菱形等。这些形状的组合可以表达丰富的页面形象。2026/10/3038第2章网页设计基础2.1网页设计基础2.1.3网页设计要素1．内容2．美观3．简单4．高效2026/10/3039第2章网页设计基础2.2确定网站主题2.2.1网站的设计流程1．网站的前期策划和收集资料2．根据网站的模式和特点以及网站制作规范定制出最适当的标准样式3．设计人员进行二级页面设计工作4．制作人员开始制作工作5.测试与维护2026/10/3040第2章网页设计基础2.2确定网站主题2.2.2网站主题的确定

互联网上具有相似性质、共同内容的一组信息资源就是一个网站，构成网站的基本元素是文件及存放文件的文件夹。网站的主题是一个网站的核心，创建网站前要先确定站点的主题，只有主题确定之后才会有目的地去寻找相关的资料，因此确定网站主题非常重要。2026/10/3041第2章网页设计基础2.3前期规划与内容组织2.3.1网站的需求分析网站需求分析的主要目的是要搞清楚要做什么，从而来确定网站的主题以及实现细节。2026/10/3042第2章网页设计基础2.3前期规划与内容组织2.3.2网站的内容组织在明确网站的需求之后，接下来的工作就是网站制作了。首先需要确定网站的总体设计情况，如主要的栏目排版等。1．规划草图2．规划页面结构3．规划站点结构4．网站内容的组织2026/10/3043第2章网页设计基础2.4色彩基础知识2.4.1色彩理论1．色彩基本概念自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，除此之外，其他所有颜色均属于彩色。任何一种彩色都具有以下3种属性。（1）色相（2）饱和度（3）明度2026/10/3044第2章网页设计基础2.4色彩基础知识2026/10/3045第2章网页设计基础色轮的主要组成2.4色彩基础知识2026/10/3046第2章网页设计基础基本颜色的搭配如图暖色冷色2.4色彩基础知识2026/10/3047第2章网页设计基础2.4.2216网页安全颜色216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说，这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以使用216网页安全色进行网页配色可以避免原有的颜色失真问题。2.5配色方案配色方案是根据网站的主题和目的以及该网站希望给人怎样的感受来决定使用什么颜色，不同的色彩传达的感情色彩是不一样的。首先要从色彩的心理入手，使之符合主题，接着再去选择其他的颜色，选择其他颜色也要根据网站的设计主题来定，例如网站要设计的内容是关于科技的，那么很可能会选择蓝色系，此时就可能用蓝色为主色调来参考配色方案。2026/10/3048第2章网页设计基础2.5配色方案2.5.1色彩分析在搭配网页的颜色时，要特别注意色彩的鲜明性、独特性、合适性和联想性。鲜明亮丽的色彩容易引人注目；独特的色彩能给人深刻的印象；合适的色彩能够与表达的内容气氛相适合；联想的色彩会使人产生不同的联想。所以在选择色彩时，还应该注意要使所选色彩与网页的内涵相关联。2026/10/3049第2章网页设计基础2.5配色方案2.5.2色彩对比1．色相对比2．纯度对比3．明度对比4．冷暖对比5．补色对比6．面积对比2026/10/3050第2章网页设计基础2.5配色方案2.5.3色彩调和网页页面中一般由具有某种内在联系的不同颜色组成一个完整统一的整体，最后形成页面色彩总的趋向，称之为色调。色彩独有的感情与氛围是影响配色视觉效果的决定因素。两种或两种以上的色彩通过配色方案合理搭配，产生和谐统一的效果，称为色彩调和。色彩调和是为了达到视觉统一，使人们心理平衡。2026/10/3051第2章网页设计基础2.6网站中的色彩应用2.6.1网页色彩规则网页的配色规则是根据网页不同位置、不同功能而设定的。以下是按照网页标题、网页链接、网页文字及网页标志的层次依次进行介绍。2026/10/3052第2章网页设计基础2.6网站中的色彩应用2.6.2网页元素之间色彩搭配1．网页色彩搭配的基本原理● 色彩的鲜明性●

色彩的独特性●

色彩的合适性●

色彩的联想性53第2章网页设计基础2.7上机练习：饰品销售网站主页整体设计1．网站主题饰品销售网站的特点是商业性质的，同时考虑到销售的内容是精美的饰品，因此网站风格又带有艺术特性，这样能更好地展示产品，同时给浏览者以美的感受。2026/10/3054第2章网页设计基础2.7上机练习：饰品销售网站主页整体设计2．主页布局主页布局是从网站的主题和网页的功能角度来考虑的。首先，要考虑到商品销售，因此要有便捷的导航和检索模块，其次，要考虑商品检索结果的呈现模块，同时要考虑到基本信息的呈现。因此主页布局采用拐角型布局。2026/10/3055第2章网页设计基础2.7上机练习：饰品销售网站主页整体设计3．色彩搭配为了能优美地展现饰品，同时体现网站的个性特点，主页采用淡蓝色为基准，给人一种宁静的感觉，饰品背景采用白色，突出饰品，同时使整个界面简洁干净。2026/10/3056第2章网页设计基础2.7上机练习：饰品销售网站主页整体设计4．效果图2026/10/3057第2章网页设计基础小结本章主要讲述了网页设计的基础，网页的布局类型，网页设计的要素，网站的设计与规划，色彩的基础知识，配色方案以及网页中色彩的应用，很多网站用其成功的色彩搭配令人过目不忘，对于刚刚开始制作网页的人来说，往往不容易驾驭好网页的颜色搭配，这就需要经验的积累。本章最主要的目的就是让大家熟悉网页整体设计所要考虑的元素，以及网站设计时应该注意的问题。2026/10/3058第2章网页设计基础习题一、选择题1．在网页布局和外观设计中，常用（）技术。A．表格和CSS B．Div和CSS C．HTML和CSS D．HTML和表格2．代表柔和、团结、温暖、安全的基本形状是（）。A．圆形 B．三角形 C．菱形 D．正方形2026/10/3059第2章网页设计基础习题3．划分网站必须完成的所有功能属于（）。A．性能需求 B．功能需求 C．接口需求 D．安全需求4．下面选项中不属于色彩基本属性的是（）。A．色相 B．饱和度 C．明度 D．灰度2026/10/3060第2章网页设计基础习题5．下面选项中不属于RGB色彩系统的3个基本色的是（）。A．红 B．绿 C．蓝 D．紫6．下面选项中不属于暖色调的是（）。A．红色 B．橙色 C．黄色 D．绿色7．下面色彩中波长最长的是（）。A．蓝 B．紫 C．红 D．绿

2026/10/3061第2章网页设计基础习题二、简答题1．建设网站的流程可分为哪几个阶段？2．网页设计需遵守的原则有哪些？3.简述网站的设计流程？4.常见的网页布局类型有哪些？2026/10/3062第2章网页设计基础2026/10/30第1章概述63ThankYou！！！本章结束！第

3

章建立本地站点网页设计与制作（第2版）2026/10/30第3章建立本地站点64第3章建立本地站点3.1创建本地站点3.2管理本地站点3.3综合案例：创建“我的第一个网站”2026/10/30第3章建立本地站点653.1创建本地站点什么是站点在Dreamweaver中，站点是指属于某个Web站点的文档的本地或远程存储位置。简单地说，一个站点通常对应一个本地或远程的文件夹。

2026/10/30第3章建立本地站点663.1创建本地站点站点的分类在Dreamweaver中，常用的站点类型包括本地站点和远程站点。

本地站点，即本地文件夹，存储正在处理的文件，此文件夹通常位于本地计算机上，但也可能位于网络服务器上。

远程站点，即远程文件夹，存储用于测试、生产和协作等用途的文件，远程文件夹通常位于运行Web服务器的计算机上。远程文件夹包含用户从互联网访问的文件。

2026/10/30第3章建立本地站点673.1创建本地站点下图左侧为一个本地计算机上的本地站点文件夹，右侧为一个Web服务器上的远程站点文件夹。使用Dreamweaver或FTP工具将本地站点对应的文件夹上传到Web服务器上，也就是说，本地站点文件夹中的文件夹和文件应与远程文件夹中的文件夹和文件一一对应。

2026/10/30第3章建立本地站点683.1创建本地站点

创建本地站点的步骤：1.创建站点文件夹2.使用向导建立站点

2026/10/30第3章建立本地站点693.1创建本地站点1.创建站点文件夹

建立本地站点就是在某台电脑硬盘上建立一个文件夹，然后将所有与制作网页相关的文件（图片、视频等）都存放在里面，以便进行网页的制作和管理。

2026/10/30第3章建立本地站点703.1创建本地站点

应注意以下几点：不要将所有的文件都存放在根文件夹下，否则容易混淆，不利于管理和上传。按照文件的类型建立不同的子文件夹。根文件夹、子文件夹、文件的命名最好使用简短而又有一定含义的小写英文或拼音。

2026/10/30第3章建立本地站点713.1创建本地站点2.使用向导建立站点(1)打开DreamweaverCS6，在菜单栏中选择“站点”→“新建站点”菜单命令，弹出“站点设置对象”对话框，如下图所示。

2026/10/30第3章建立本地站点723.1创建本地站点2026/10/30第3章建立本地站点733.1创建本地站点2.使用向导建立站点(2)单击上图中的“保存”按钮。在DreamweaverCS6界面右下角会出现“文件”面板，如下图所示，表示“mysite”站点已经建立成功。

2026/10/30第3章建立本地站点743.1创建本地站点2026/10/30第3章建立本地站点753.2管理本地站点切换站点单击“文件”面板左边的下拉列表框，选中某个已创建的站点，就可以切换到对该站点。

2026/10/30第3章建立本地站点763.2管理本地站点管理站点对话框

“管理站点”对话框是进入Dreamweaver站点功能的通路。通过这个对话框可以进行新建站点、编辑站点、复制站点、删除站点、导入或导出站点等操作。

2026/10/30第3章建立本地站点773.2管理本地站点在“文件”面板中管理文件夹和文件可以在已建立站点的“文件”面板中对文件夹及文件进行常规管理，这些管理主要包括新建、复制、移动、重命名、删除等操作

。

2026/10/30第3章建立本地站点783.2管理本地站点2026/10/30第3章建立本地站点793.3综合案例：创建“我的第一个网站”【内容】建一个站点，名称为：我的第一个网站，对应的本地路径是：D:\MyFirstSite。在站点根目录下新建网页文件index.html。并新建三个文件夹，名称分别是：images、videos和styles。最后，导出“我的站点”到D:\MyFirstSite中，导出文件名为myfirstsite.ste。

2026/10/30第3章建立本地站点803.3综合案例：创建“我的第一个网站”【目标】通过本案例练习，熟悉并掌握DreamWeaverCS6中本地站点的创建和管理。

2026/10/30第3章建立本地站点813.3综合案例：创建“我的第一个网站”【思路】

创建一个网站站点，首先要在本地电脑硬盘上建立一个文件夹，用来存放站点的内

容，然后使用DreamWeaver菜单中“站点”|“新建站点”命令进行创建，通过“站点”|“管理站点”命令对网站进行管理。

2026/10/30第3章建立本地站点823.3综合案例：创建“我的第一个网站”【步骤】步骤1：在D盘创建一个文件夹，名称为“MyFirstSite”。

步骤2：启动DreamweaverCS6，单击“站点”菜单，选择“新建站点”命令，打开“新建

站点”对话框。

步骤3：在“站点设置对象”对话框左侧选择“站点”，在右侧的“站点名称”处输入“我的

第一个网站”，在本地站点文件夹处D:\MyFirstSite。

。

2026/10/30第3章建立本地站点833.3综合案例：创建“我的第一个网站”2026/10/30第3章建立本地站点843.3综合案例：创建“我的第一个网站”步骤4：在“文件”面板中选择“本地视图”，在站点的根目录“站点-我的第一个站点”上

右击，在弹出的快捷菜单中选择“新建文件夹”，文件夹名称为images，然后用同样的方式，再

创建两个文件夹，名称分别是videos和styles。

步骤5：在“文件”面板中选择“本地视图”，在站点的根目录“我的第一个站点”上右击，

在弹出的快捷菜单中选择“新建文件”，文件夹名称为index.html。

。

。

2026/10/30第3章建立本地站点853.3综合案例：创建“我的第一个网站”2026/10/30第3章建立本地站点863.3综合案例：创建“我的第一个网站”步骤6：单击Dreamweaver菜单“站点”中的“管理站点”命令，在弹出的“管理站点”对

话框中，单击弹出“导出站点”对话框，选择路径D:\MyFirstSite，在文件名处，输入“myfirstsite”，

文件类型默认为“*.ste”，单击即可导出站点设置信息（注：导入和导出功能仅仅导入或导出站点

设置信息，不会导入或导出站点文件）。

。

2026/10/30第3章建立本地站点873.3综合案例：创建“我的第一个网站”2026/10/30第3章建立本地站点88第4章制作文本网页设计与制作（第2版）2026/10/30第4章制作文本89第4章制作文本4.1创建文档4.2文本编辑4.3在文本中添加项目符号和编号4.4水平线、网格与标尺4.5本章综合案例2026/10/30第4章制作文本904.1创建文档网站是由一个个的网页文档构成的，文档是网站的基本表现形式，在制作网站时必须首先了解网页文档的基本组成和基本操作。2026/10/30第4章制作文本914.1创建文档本章详细介绍了网页文档的创建、保存、打开，网页中文本的输入、文本格式的设置，段落格式以及项目符号和编号的设置，特殊符号、水平线的插入，页面属性设置等基本操作。2026/10/30第4章制作文本924.1创建文档新建文档在DreamweaverCS6主窗口中选择“文件”→“新建”的菜单命令，在弹出的“新建文档”的对话框中，选择“空白页”选项卡，接着选择“页面类型”和“布局”，再单击“创建”按钮，就能创建相应类型的网页文档。2026/10/30第4章制作文本934.1创建文档新建文档2026/10/30第4章制作文本944.1创建文档新建文档文档创建成功之后，可以单击当前窗口最下方属性面板里的“页面属性“按钮，打开“页面属性”对话框，然后设置“分类”选项下的“外观”选项，可以设置当前页面的字体、大小、文本颜色、背景颜色、背景图像等。2026/10/30第4章制作文本954.1创建文档新建文档2026/10/30第4章制作文本964.1创建文档保存文档文档创建、设置属性完成之后，选择主菜单的“文件”→“保存”命令，就可以打开“另存为”对话框。此时选择保存路径，将文件命名为适合页面内容的名称。2026/10/30第4章制作文本974.1创建文档保存文档2026/10/30第4章制作文本984.1创建文档打开文档方法1:启动DreamweaverCS6应用程序，在主菜单中选择“文件”→“打开”命令，在弹出的对话框里选择需要打开的文件，执行“打开”命令，网页在文档窗口中打开。方法2：在站点窗口的列表文件中选择要打开的网页文档，双击就可以打开。2026/10/30第4章制作文本994.2文本编辑输入文本可以在编辑文本框中直接输入文本，还可以对输入的文本进行剪切、复制、粘贴等基本操作。2026/10/30第4章制作文本1004.2文本编辑插入文本将光标移至页面中需要输入文本的位置单击，此时窗口中就会出现闪动的光标，光标停留的位置表示输入文字的起始位置，然后选择合适的输入法，即可在网页中输入文字。2026/10/30第4章制作文本1014.2文本编辑插入文本在DreamweaverCS6中也可以从其他应用程序中复制文本，将插入点定位在“文档”窗口的“设计”视图中，然后执行主菜单中“编辑”→“粘贴”的命令；还可以通过主菜单的“文件”→“导入”的命令导入已有的WORD文档。2026/10/30第4章制作文本1024.2文本编辑插入日期通过主菜单→“插入”→“日期”，在弹出的对话框中选择需要的格式，这里的日期和时间只是说明此信息的显示方式而已。如果希望在每次保存文档时都更新插入的日期，就选择“存储时自动更新“选项，当保存文件时，日期也随着更新。2026/10/30第4章制作文本1034.2文本编辑文本格式的分类网页文档中的文本分为标题和段落两种格式。在设置文本的具体格式时，需要启动“属性“面板。2026/10/30第4章制作文本1044.2文本编辑文本格式的分类在DreamweaverCS6中，“属性“面板主要是用来设置选择对象的属性，并且会根据选择对象的不同而改变所需要设置的内容。”“属性”面板可以通过主菜单→“窗口”→“属性”打开，打开后的属性面板一般会显示在当前文档的底部，当在文档中选择不同的对象时，属性面板会做出相应的改变。2026/10/30第4章制作文本1054.2文本编辑添加新的字体在设置字体时注意，DreamweaverCS6默认的字体设置是“默认字体”，如果选择“默认字体”，那么网页被浏览时，文字字体显示的就是浏览器默认的字体。在DreamweaverCS6中预设的可供选择的字体组合一共有13种。2026/10/30第4章制作文本1064.2文本编辑添加新的字体如果想使用这13种字体组合外的字体，则必须要编辑新的字体组合。点击“属性”面板的“页面属性”按钮，打开页面属性对话框，在“外观“的”“页面字体”中打开下拉列表，选择“编辑字体列表…”菜单命令，就会弹出“编辑字体列表”对话框，在其中进行编辑即可。2026/10/30第4章制作文本1074.2文本编辑添加新的字体2026/10/30第4章制作文本1084.2文本编辑添加新的字体如果需要编辑现有文字列表中的字体组合，此时就可以从“字体列表”列表框中选择要编辑的字体组合项。2026/10/30第4章制作文本1094.2文本编辑添加新的字体如果需要创建新的字体列表，那么就可以从列表框中选择“在以下列表中添加字体”项来创建字体列表。如果没有出现该项，单击对话框左上角的“+”按钮也可以实现。2026/10/30第4章制作文本1104.2文本编辑添加新的字体如果需要往字体组合项中添加新字体，可以从“可用字体”列表中选择需要的字体名称，然后单击“<<”按钮，此时被添加的字体就会出现在左方“选择的字体”列表中。2026/10/30第4章制作文本1114.2文本编辑添加新的字体如果需要从字体组合项中删除字体，可以从左方“选择的字体”列表中选择要删除的字体名称，然后单击“>>”按钮，此时被删除的字体就会从左方“选择的字体”列表中移除。2026/10/30第4章制作文本1124.2文本编辑设置更多的文本属性如果当前页面中不同的文本需要设置不同的字体格式、颜色、大小等属性，则需要单击“属性”面板中“CSS”按钮，通过建立CSS样式表的方式，为当前页面的指定文字设置具体的字号、颜色、对齐方式等样式，具体内容请参考本章中CSS设置的相关章节。2026/10/30第4章制作文本1134.2文本编辑设置文本格式文本格式的设定可以直接从HTML语言入手，也可以通过DreamweaverCS6功能来实现，还可以通过CSS来设置。2026/10/30第4章制作文本1144.2文本编辑通过HTML语言来设置2026/10/30第4章制作文本1154.2文本编辑通过DreamweaverCS6来设置可以通过DreamweaverCS6的属性面板来设置格式。2026/10/30第4章制作文本1164.2文本编辑设置文本样式网页字体样式包括文字的类型、字体的显示大小、字体的显示颜色以及各种字体样式。同时字体样式又包括粗体、斜体、下画线等。同样，文字格式的设定可以直接从HTML语言入手，也可以通过DreamweaverCS6功能来实现。2026/10/30第4章制作文本1174.2文本编辑通过HTML语言设置HTML语言对文本样式的设置主要是通过HTML的font元素来实现的，基本表达方式如下：<font>如何表达文字</font>（1）face属性，文本的字体属性face是用来设定文本的字体——（属性值有“宋体”，“黑体”，“楷体”，“仿宋”，等等）。基本格式为：<fontface="属性值">2026/10/30第4章制作文本1184.2文本编辑例如：<fontface="宋体">这里显示的字体格式是宋体</font><br/><fontface="华文彩云">这里显示的字体格式是华文彩云</font><br/>效果如下：2026/10/30第4章制作文本1194.2文本编辑通过HTML语言设置（2）size属性，文本的大小属性size用来设定文本的字号——（属性值是从1到7或是从+1到+7，或是从-1到-7），文本的字号没有绝对意义上的大小，只是相对于默认字体而言的大或小。基本格式为：<fontsize="属性值">2026/10/30第4章制作文本1204.2文本编辑例如：<fontsize="7">此处显示7号字</font><br/><fontsize="6">此处显示6号字</font><br/><fontsize="5">此处显示5号字</font><br/>效果如下：2026/10/30第4章制作文本1214.2文本编辑通过HTML语言设置（3）color属性，文本的颜色属性color是用来设定文本的色彩——（颜色值由十六进制数来表示红、绿、蓝（RGB），每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制数符。三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。属性值不仅可以是十六进制代码，而且也可以是英文单词中颜色的表达）。基本格式为：<fontcolor="属性值">2026/10/30第4章制作文本1224.2文本编辑例如：<fontcolor="#000000">000000表示黑色</font><br/><fontcolor="black">black表示黑色</font><br/><fontcolor="red">red表示红色</font><br/>效果如下：2026/10/30第4章制作文本1234.2文本编辑综合练习2026/10/30第4章制作文本1244.2文本编辑通过DreamweaverCS6设置字体的样式。可以选中文本后单击鼠标右键，在弹出的菜单中选择“样式”进行设置，也可以通过属性面板来设置。2026/10/30第4章制作文本1254.2文本编辑段落编辑段落是一段文本的布局，网页段落的编辑可以通过HTML语言来实现，也可以通过DreamweaverCS6来编辑。2026/10/30第4章制作文本1264.2文本编辑HTML语言中可以用<P>标签来表示段落，<p>与</p>标签的功能就是用来定义段落，这就相当于在文本中添加了一个回车符，当两个段落之间间距较大时，就相当于插入一个空白行。<br/>用来定义换行。换行，也就是另起一行，但是上、下行之间的间隔距离不变，并且仍然属于同一个段落。2026/10/30第4章制作文本1274.2文本编辑在页面中添加其他元素内容注释“<!--”和“--!>”标签是用来添加内容注释的，它中间就是注释内容。注释通常可以插入文本的任何地方，但是在浏览网页时，注释内容不显示。2026/10/30第4章制作文本1284.2文本编辑在页面中添加其他元素插入图像要在页面上显示图像，需要使用源属性“src”。“src”指“source”，源属性的值是图像的URL地址。定义图像的语法是：<imgsrc="url">URL指存储图像的位置。如果名为"1.jpg"的图像位于站点文件夹下的images目录中，那么其URL为“images/1.jpg”。2026/10/30第4章制作文本1294.2文本编辑在页面中添加其他元素插入图像<img>的主要属性如下。①src——用来指定图像文件的URL。②height和width——分别用来设定显示图像的高度和宽度。③align——用来设定图像对齐方式。④border——用来设定图像边框宽度。2026/10/30第4章制作文本1304.2文本编辑在页面中添加其他元素网页背景：在设定<body>标签属性项的值时，还可以定义网页的背景一般定义网页背景有两种形式：一种是设定背景颜色；一种是设定背景图像（用一幅图像作为网页的背景）。例如：①设定背景颜色<bodybgcolor="#FFFF99">②设定背景图像<bodybackground="images/bg.jpg">2026/10/30第4章制作文本1314.2文本编辑在页面中添加其他元素文字的修饰标签①粗体标签b或者strong<b>加粗字体--b</b><strong>加粗字体--strong</strong>②斜体标签i或em或cite<i>倾斜字体--i</i><em>倾斜字体--em</em><cite>也是倾斜字体--cite</cite>2026/10/30第4章制作文本1324.2文本编辑在页面中添加其他元素文字的修饰标签③下划线标签u<u>下划线u</u>④删除线标签s或strike<s>删除线s</s><strike>删除线strike</strike>2026/10/30第4章制作文本1334.2文本编辑在页面中添加其他元素文字的修饰标签⑤换行标签<br/>(换行标签<br/>是一个比较特殊的标签，它只是用于文字的换行，添加多少个<br/>就换多少行，它可以叠加使用，但是它只是单一的，并没有结束方式）⑥水平线的标签<hr/>（水平线标签<hr/>也是一个比较特殊的标签，它也没有结束方式，但是水平线标签却可以添加附属属性）2026/10/30第4章制作文本1344.2文本编辑在页面中添加其他元素插入空格：要插入连续空格，首先要确定插入空格的位置，然后使用以下方法的任意一种插入不换行空格。方法1：点击主菜单→“插入”→HTML→特殊字符→不换行空格。方法2：切换到“代码”视图下，在需要插入空格的位置输入代码“

”即可。2026/10/30第4章制作文本1354.2文本编辑在页面中添加其他元素插入特殊字符在文档中将插入点放在要插入特殊字符的位置，选择主菜单→“插入”“→“HTML”→“特殊字符”，选择要插入的字符名称即可，在当前菜单的最后一行还有“其他字符”以供用户更多的需求。2026/10/30第4章制作文本1364.2文本编辑在页面中添加其他元素插入特殊字符2026/10/30第4章制作文本1374.3在文本中添加项目符号和编号项目列表是一种很清晰的文字内容排列方式，如列举一些具有相同属性的事物时，可以使用项目列表。项目符号是指放在列表项之前用来强调效果的圆点或其他特殊符号，也就是在各项目前所标注的符号。在内容比较多的文档中可以建立或取消项目符号，用来使文档更加有条理。在DreamweaverCS6中，用户可以创建有序列表、无序列表或者将现有文本或段落转化成项目列表，还可以实现列表嵌套。2026/10/30第4章制作文本1384.3在文本中添加项目符号和编号添加项目符号和编号通过HTML语言来添加项目符号或编号在编号列表中需要使用到两个标签，即<ol>和<li>。<ol（li）>和</ol（li）>配对使用，它们用来表示整个编号列表的开始和结束。2026/10/30第4章制作文本1394.3在文本中添加项目符号和编号添加项目符号和编号通过DreamweaverCS6向现有的文本中添加项目符号或编号打开需要添加项目符号的文档，选择需要向其添加项目符号或编号的列表项，然后在“属性”面板上执行以下任一操作：如果想要向文档中添加项目符号，那么可单击“项目符号”按钮；如果想要添加编号，那么可单击“编号”按钮，此时项目符号或编号格式的默认值（或当前所选）将会添加到列表项中。2026/10/30第4章制作文本1404.3在文本中添加项目符号和编号修改项目符号和编号编辑项目符号或编号的格式在列表的属性对话框中进行，选择要设置的文本，然后单击鼠标右键，选择“列表”菜单下“属性”进行设置。2026/10/30第4章制作文本1414.4水平线、网格与标尺水平线通过HTML语言设置水平线，水平线用的标签为＜hr＞，这个标签可以在屏幕上显示一条水平线，它是用以分割页面中的不同部分。通过DreamweaverCS6设置水平线，将鼠标光标定位到要插入水平线的位置，然后选择主菜单中的“插入”→“html”→“水平线”命令，或者可以单击“插入”工具栏中的“常用”标签，直接单击“水平线”按钮，这样也可以插入一条水平线。2026/10/30第4章制作文本1424.4水平线、网格与标尺网格和标尺在DreamweaverCS6中，可以在“设计”视图中将标尺和网格作为网页布局的准绳。标尺一般自上至下显示在编辑窗口的左边，而网格显示在网页内容后面。如果选择对齐网格，那么在将内容放到网页上时，该内容会自动与网格线对齐，在此也可以配置网格的间距和样式。2026/10/30第4章制作文本1434.5本章综合案例建立课本所示的网页,设置页面背景颜色、标题、段落的字体格式、颜色、大小等，建立多级项目列表，并插入水平线。2026/10/30第4章制作文本144第

五

章图像与多媒体网页设计与制作（第2版）2026/10/30第5章图像与多媒体145第

5

章图像与多媒体5.1网页中常用的图像格式6.2关于链接路径6.3创建超链接的方法6.4各种类型超链接的创建6.5管理超链接6.6综合案例：创建“我爱摄影网”2026/10/30第5章图像与多媒体1465.1网页中常用的图像格式5.1.1GIF格式图像GIF（GraphicsInterchangeFormat）格式图像，可译为“图像交换格式”，文件扩展名为“.gif”。是一种无损压缩格式的图像。只要图像不多于256色，GIF格式既可减少文件的大小，GIF格式具有图像文件体积小、成像相对清晰、下载速度快，又能保持成像的质量。它可支持图像文件大小的最小化，支持动画模式GIF，又分为静态GIF和动画GIF两种，能在一个图像文件中包含多帧图像页，在浏览器浏览时可看到动感图像效果。网上小一点的动画一般都是GIF格式的图像。大一些的图像多为JPEG格式的。

2026/10/30第5章图像与多媒体1475.1.2JPEG格式图像JPG/JPEG（JointPhotographicExpertsGroup）可译为“联合图像专家组”，是24位的图像文件格式，也是一种与平台无关压缩格式的图像。而这种压缩方式的最大特点是，通过压缩可使其在图像品质和文件大小两者之间达到较好的平衡，在压缩中损失掉的是图像中不易被人察觉到的内容，JPEG获得较小的文件尺寸，使得图像在浏览和下载时的速度加快。

2026/10/30第5章图像与多媒体1485.1.3PNG格式图像PNG（PortableNetworkGraphic）可译为“便携网络图像”，是一种格式极为灵活的图像，用网页上无损压缩和显示图像。在使用网页制作“三剑客”之一的Fireworks制作的图像的默认格式就是PNG，这种文件格式比较小，现在网页上用得非常普遍。PNG图像还支持多种颜色数目，可从8位、16位、24位到32位。具有对引色、灰度、真色彩图像及透明背景的支持效果。

2026/10/30第5章图像与多媒体1495.2插入与设置图像5.2.1网页中插入图像（1）在站点中打开一个已经创建的网页或创建一个新的网页。

2026/10/30第5章图像与多媒体150（2）将光标置于网页中要插入图像的位置，光标闪动。在菜单栏中选择“插入”→“图像”命令，出现如图5-2所示的对话框。

2026/10/30第5章图像与多媒体151在插入图像前，最好将准备好的图像素材放在站点相应的文件夹（如images）中，这将有利于网站的整体管理。对于动画、视频等素材也放在网站中对应所建立的文件夹中。

2026/10/30第5章图像与多媒体152（3）单击图

“图像标签辅助功能属性”对话框的“替换文本”文本框中输入“华山”文字，然后按“确定”按钮后，将出现图所示的结果。

2026/10/30第5章图像与多媒体153（4）对所建立的网页进行浏览。如果已经关闭网站，可在网站文件夹中找到该网页，双击就可打开浏览。也可在网页编辑页面工具栏中单击“在浏览器中预览”按钮，并在其下选择相应的浏览器，可看到图5-6所示的浏览效果。

2026/10/30第5章图像与多媒体1545.2.2设置图像属性“属性”面板转化为设置图像的属性的内容。

●“图像”：在该文本框中可以输入图像的名称，以便在以后可以调用该图像文件。●“宽”和“高”：在“宽”和“高”文本框中可以输入数值，以设置文件的宽度和高度。●“源文件”：显示当前图像文件的地址，单击文本框后面的文件夹按钮，可以重新设置当前图像文件的地址。

2026/10/30第5章图像与多媒体1555.2.2设置图像属性

●“链接”：在该文本框中可以设置当前图像的链接地址。●“替换”：在该文本框中可以输入文本，用于设置当前图像文件的描述。在浏览网页文件时，将鼠标指针移动到当前图像上时，就可显示图像的描述信息。●“编辑”区域：在该区域中列出了编辑当前图像文件可以使用的工具。●“边框”：在该文本框中可以设置图像的边框宽度，相当于给图像加一个边框，其宽度以像素为单位。●“对齐”：在下拉列表框中选择图像对齐的方式。当网页中包括图像和文本时，需要对图像进行对齐设置。●“地图”区域：在该文本框中可以设定图像地图的名称；使用热点工具“矩形、圆形、多边形”在图像中插入热点区域。●边距区域：有“垂直边距”和“水平边距”，其文本框用于设置图像周围的边距，调整它与周围元素间的距离，其单位为像素。

2026/10/30第5章图像与多媒体1565.3插入其他图像元素5.3.1插入图像占位符（1）启动DreamweaverCS6，打开或新建一个网页，并将光标定位于网页的文档中。（2）插入占位符可用菜单方式和“插入”面板组两种方式操作实现。●菜单操作法：选择菜单“插入”→“图像对象”→“图像占位符”命令，如图5-8所示。●“插入”面板组操作法：在菜单“窗口”下选择“插入”命令，在页面窗口左侧出现“插入”面板组。由此可以看出，面板组可通过在“窗口”下级菜单中根据需要进行相应的选择，从而实现面板组的显示或隐藏。具体如图5-9所示。

2026/10/30第5章图像与多媒体1575.3插入其他图像元素2026/10/30第5章图像与多媒体1585.3插入其他图像元素2026/10/30第5章图像与多媒体1595.3插入其他图像元素2026/10/30第5章图像与多媒体160在网页中插入图像占位符后，在网页中选中占位符，可在其属性面板中对占位符进行一些设置。属性中设置项含义与操作和对网页中图像属性的设置基本相似，这里不再作过多陈述。

2026/10/30第5章图像与多媒体1615.3.2插入鼠标经过图像（1）打开或新建一个网页，用插入占位符的操作方式打开图5-8或图5-9，并在菜单中选择“鼠标经过图像”命令，出现图5-12所示的对话框。

2026/10/30第5章图像与多媒体162（2）在“图像名称”文本框中可以输入名称。单击“原始图像”右边的“浏览”按钮，打开“原始图像”对话框，向其中添加图像。单击“鼠标经过图像”右侧的“浏览”按钮，以如上方式添加另一幅图像。单击“确定”按钮，将出现图5-13所示的设置效果。（3）保存文档。也可按F12键，在浏览图5-13所示的网页时，当鼠标移入图（a）所示的原始图像时，就会出现图（b）所示的图像效果。

2026/10/30第5章图像与多媒体1632026/10/30第5章图像与多媒体1642026/10/30第5章图像与多媒体1655.4多媒体在网页中的应用5.4.1添加Flash动画对象（1）在把Flash动画（.swf）插入网页之前，需要把准备好的Flash动画素材保存到站点相应的文件夹下，如本站点中的“flash”文件夹，以便管理和操作使用。（2）打开或新建一个网页，并将光标定位在页面中要插入的位置。（3）在菜单栏中选择“插入”→“媒体”→“SWF”命令，如图5-14所示。2026/10/30第5章图像与多媒体1665.4多媒体在网页中的应用5.4.1添加Flash动画对象2026/10/30第5章图像与多媒体1675.4多媒体在网页中的应用在弹出的图5-15所示的“选择SWF”对话框中选择Flash文件，如行“驶的小车.swf”文件。单击“确定”按钮后，将出现图5-16所示的“对象标签辅助功能属性”对话框，并在“标题”文本框中输入“生长的树木动画演示”，然后单击“确定”按钮2026/10/30第5章图像与多媒体1685.4多媒体在网页中的应用2026/10/30第5章图像与多媒体1695.4多媒体在网页中的应用●“循环”与“自动播放”：当选中这两项时，在浏览窗口中就会自动循环播放。●“背景颜色”：选择一种背景颜色，则可改变Flash在浏览窗口播放时的背景颜色。●“播放”按钮：可以在当前的编辑页面中看到Flash动画的播放效果，在播放状态时，“播放”按钮变成“停止”按钮形式，此时按“停止”按钮可中断播放。●“Wmode”：为SWF文件设置Wmode参数，以避免与DHTML元素（如Spry构件）相冲突。●“编辑”：启动Flash以更新.fla文件（即使用Flash创作工具创建的文件）。2026/10/30第5章图像与多媒体1705.4.2插入FLV视频Dreamweaver提供以下两种类型的FLV视频。● Flash视频文件（扩展名为.flv）：是一种视频文件，通过FlashPlayer传送。● 累进式下载视频：将FLV文件下载到站点访问者的硬盘上，然后进行播放。但与传统的“下载并播放”视频传送方式不同，其允许在下载完成之前就开始播放视频文件。● 流视频：对视频内容进行流式处理，缓冲很短的一段时间，而这段时间可确保视频在网页上流畅播放。下面介绍插入FLV视频在网页中的具体实现方法：（1）打开已有或创建一个新的网页。并将光标定位在要插入FLV文件的网页位置。（2）选择“插入”→“媒体”→“FLV”命令，如图5-19所示。

2026/10/30第5章图像与多媒体1715.4.2插入FLV视频

2026/10/30第5章图像与多媒体172（3）在弹出的如图5-20所示的“插入FLV”对话框中，在“视频类型”选项下可选择“累进式下载视频”或“流视频”方式。

2026/10/30第5章图像与多媒体173（4）单击“确定”按钮，在页面中出现如图5-21所示的FLV占位符，说明所选择的FLV文件已经添加到页面中了。如果要删除FLV组件，可选择占位符按“Delete”键。占位符的大小不能用鼠标进行调整。可通过在“属性”面板中的“高”和“宽”文本框中输入相应值进行大小调整。

2026/10/30第5章图像与多媒体1745.4.3网络中的音频文件类型● .mid（MusicalInstrumentDigitalInterface，数字音乐）格式：是网页设计中最常用的文件格式。不需要特定的插件支持播放，一般的浏览器都可以支持。● .wav（Wave）格式：这种格式声音品质也比较好，不需要提供额外插件作为运行条件。缺点是这种格式的文件比较大，占用空间大，可能会影响网页的运行速度。● .mp3（MotionPictureExpertsGroupAudioLayer-3）格式：在3种音频类型中，它的声音品质最好。缺点是文件容量比较大，再就是.mp3需要插件的支持，例如WindowsMediaPlayer以及RealPlayer等播放软件的支持。● .wma（WindowsMediaAudio）是微软公司推出的与MP3格式齐名的一种新的音频格式（文件扩展名为“.wma”）。● .ra（RealAudio）是RealNetworks公司所开发的一种流式音频文件格式（文件扩展名为“.ra”）。

2026/10/30第5章图像与多媒体1755.4.4网络中的视频文件类型● .wmv（WindowsMediaVideo）是微软推出的一种流媒体格式（文件扩展名为“.wmv”），它是由ASF（AdvancedStreamFormat）格式升级延伸而来。● .MP4（MPEG-4Part14）是一种使用MPEG-4对音频、视频信息进行压缩的编码格式（文件扩展名为“.mp4”），以储存数码音讯及数码视讯为主。● .RM格式是RealNetworks公司开发的一种流媒体视频文件格式（文件扩展名为“.rm”）。RM可以根据网络数据传输的不同速率制定不同的压缩比率，从而实现低速率的网络进行视频文件的实时传送和播放。● .RMVB是在流媒体的RM影片格式上升级延伸而来的一种视频文件格式，RMVB中的VB指VBR（VariableBitRate），可改变之比特率。● Shockwave是Macromedia公司（后被Adobe公司收购）制定的用于在Web中插放丰富的交互式多媒体内容的业界标准（文件扩展名为“.dcr”、“.dir”、“.dxr”）。可以通过Director来创建Shockwave影片，它生成的压缩格式可以被浏览器快速下载，并且可被目前的主流浏览器所支持。

2026/10/30第5章图像与多媒体1765.4.5在网页中插入Shockwave影片（1）打开或新建一个网页，并将光标定位到网页中的某一个位置。（2）选择“插入”→“媒体”→“Shockwave”菜单命令，如图5-19所示。打开如图5-23对话框。选择wave.dcr文件，按“确定”。

2026/10/30第5章图像与多媒体1775.4.5在网页中插入Shockwave影片（3）选择wave.dcr文件，按“确定”。如图5-24所示。

2026/10/30第5章图像与多媒体1785.4.6在网页中插入ActiveX控件（1）打开或新建一个网页，并将光标定位到网页中的某一个位置。（2）选择“插入”→“媒体”→“ActiveX”菜单命令，如图5-19所示。得到如图5-26的ActiveX占位图。