网页制作技术精讲课件

第 1 章 网页设计基础,1.1 网页中的常见元素1.2 常用网页制作工具 1.3 常用的网页美化工具 1.4 建立网站的基本流程 1.5 网 页 艺 术 设 计,1.1 网页中的常见元素,1.1.1 文本文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式。1标题2字号3字型,1.1.2 图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。 1菜单按钮2背景图形3动画,1.1.3 超链接超链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。 超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。,1.1.4 表格表格用来控制网页中信息的布局方式。 1.1.5 表单网页区别于其他媒体的一个重要标志就是它的交互功能。 通常网页的交互功能都是利用表单来实现的。,1.1.6 声音和视频声音是多媒体网页的一个重要组成部分。 网页的声音文件格式很多，常用的有MIDI、WAV、MP3和AIF等。,1.2 常用网页制作工具,1.2.1 超文本标识语言超文本标识语言（Hypertext Markup Language，HTML）是一种专门用于Web页制作的编程语言，它能够对网页内容、页面的格式以及超链接进行描述，形成HTML文档。,1.2.2 DreamweaverDreamweaver是Macromedia公司推出的一款大众化的网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网页制作人员所掌握。 Dreamweaver支持动态HTML技术，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。,1.2.3 FrontPageFrontPage是Microsoft公司推出的网页制作工具。,1.3 常用的网页美化工具,1.3.1 FireworksFireworks是由Macromedia公司开发的基于RGB颜色模式的图形处理工具，它的出现使Web作图发生了革命性的变化。 Fireworks具有如下的优点。,（1）Fireworks可以用较少的步骤生成占用空间很小、质量很高的JPEG和GIF图像 。（2）利用Fireworks修改图像非常方便。 （3）Fireworks无需借助其他工具就可以完成将一个图像转化为网页元素的全过程。 （4）Fireworks具有文件导出功能。,1.3.2 FlashFlash是Macromedia公司开发的用于矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。,Flash的优点可以归纳为以下几点。（1）Flash创建的图像体积小、质量高。（2）Flash采用的是插件工作方式。（3）Flash采用“流式”动画播放技术。（4）Flash支持多种不同格式文件的导入。,1.3.3 PhotoshopPhotoshop是Adobe公司开发的图形处理软件，它是目前公认的PC上最好的通用平面美术设计软件，它功能完善、性能稳定和使用方便，所以在几乎所有的广告、出版和软件公司，Photoshop都是首选的平面制作工具。,1.4 建立网站的基本流程,图1-2所示的是一个网站的完整制作流程。,图1-2 网站的制作流程,1.4.1 确定主题网站的主题也就是网站的题材，是网站设计首先遇到的问题。 网站的定位要小，内容要精。 网站的题材最好选自己擅长或者喜爱的内容。 网站名称，是网站设计的一部分，而且是一个关键的要素，和现实生活中一样，网站名称是否正气、响亮、易记，这对网站的形象和宣传推广也有很大影响。,1.4.2 搜集资料1.4.3 网站的整体规划进行网站的整体规划也就是组织网站的内容并设计其结构。 1.4.4 网页设计与制作1静态网页的设计与制作2为网页添加动态效果,1.4.5 测试与发布网页当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。,所谓功能性测试就是要保证网页的可用性，达到最初的组织设计目标，实现所规定的功能，读者可以方便快速地寻找到所需的内容。网页的完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。,1.4.6 网站的宣传与推广1.4.7 网站的反馈与评价1.4.8 网站的更新与维护网站要注意经常维护更新内容，保持内容的新鲜 。,1.5 网 页 艺 术 设 计,1.5.1 网页版式设计1版式设计原则（1）统一（2）平衡（3）连贯和呼应（4）分割（5）对比（6）和谐,2版式设计技巧3常见的网页布局（1）表格布局（2）框架布局（3）层布局（4）自由式布局,1.5.2 网页色彩设计1网页色彩定义在网页中是以RGB方式来表示颜色的 。2在网页中合理运用色彩,第 2 章 创建和管理站点,2.1 规划站点结构 2.2 利用Dreamweaver MX创建站点2.3 利用FrontPage 2003创建站点,在制作网页之前首先要创建站点。建立一个本地站点就是在本地计算机上建立一个文件夹，将所有与网站相关的文件都放在该文件夹中，以便进行网页的制作与管理。,2.1 规 划 站 点 结 构,1按照文件的类型进行规划2按照网页主题进行规划,2.2 利用Dreamweaver MX创建站点,2.2.1 Dreamweaver MX简介1Dreamweaver MX的界面（1）菜单栏（2）工具栏（3）插入面板（4）浮动面板（5）文档窗口（6）属性面板,图2-2 Dreamweaver MX的操作界面,2Dreamweaver的视图（1）代码视图与设计视图（2）文档窗口（3）插入面板,2.2.2 定义站点1站点管理器2创建站点（1）通过站点定义向导创建站点（2）直接定义站点,2.2.3 站点的基本操作1打开站点2复制站点3编辑站点4删除站点,2.2.4 网页文件的基本操作1新建网页2文件的打开（1）直接打开文件（2）在框架中打开文件3保存网页文件4预览网页,2.3 利用FrontPage 2003创建站点,2.3.1 FrontPage 2003简介1FrontPage 2003的特色2FrontPage 2003的新增功能3FrontPage 2003工作界面,图2-25 FrontPage 2003主窗口,（1）标题栏（2）菜单栏（3）常用工具栏（4）格式工具栏（5）窗口栏,2.3.2 创建站点1创建新站点2导入一个已存在的站点3将文件夹转换为站点,2.3.3 管理站点1打开站点2重命名站点,第 3 章 网页文本的编辑与控制,3.1 利用Dreamweaver MX编辑网页文本3.2 HTML 概 述3.3 利用HTML处理网页文本,3.1 利用Dreamweaver MX编辑网页文本,3.1.1 在网页中添加和处理文本1输入文字（1）换行（2）输入空格（3）插入特殊的字符,（4）加入注释文字（5）插入水平线（6）插入日期和时间,2编辑文本（1）设置标题文字（2）添加和删除中文字体（3）设置字体的颜色（4）添加项目符号和项目编号,3.1.2 在网页中添加图像,3.2 HTML 概 述,3.2.1 什么是HTMLHTML（Hypertext Markup Language，超文本标识语言）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。,3.2.2 标记符及其属性1标记符2属性,3.2.3 HTML文件的基本结构 文本标题 文本内容 ,（1）HTML标记符（2）HEAD标记符（3）TITLE标记符（4）BODY标记符,3.2.4 创建和测试Web页1创建Web页2测试Web页3发布Web页,3.3 利用HTML处理网页文本,3.3.1 标题处理标题文字标记符的格式为： 标题文字 ,3.3.2 段落处理1注释标记符HTML的注释标记符的格式为：注释并不局限于一行，长度不受限制。结束标记符不必与开始标记符在同一行。注释的内容不在浏览器中显示。,2强制换行标记符强制换行标记符的格式为：文字,3换段标记符（1）强制换段标记符强制换段标记符的格式为：文字（2）设置段落标记符设置段落标记符的格式为： 文字 ,4显示预排格式标记符显示预排格式标记符的格式为：预先排好的格式5分区显示标记符分区显示标记符的格式为： 文本或图像 ,6水平线水平线标记符的格式为：,3.3.3 文本格式处理1文字设置（1）size属性size属性是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。（2）face属性face属性是字体标记符，用来指定字体样式。,（3）color属性FONT标记符的color属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。,2文本格式处理（1）（2）,3设置页面属性（1）设置页面背景颜色在标记符中使用bgcolor属性可以为网页设置背景颜色。,（2）设置页面背景图像选择特定图案作为页面的背景，使用BODY标记符的background属性即可。HTML语句为： （3）设置文字和超链接的颜色设置正文和超链接颜色时，可以使用BODY标记符的text、link、vlink和alink属性。,第 4 章 才利用表格设计和制作网页,4.1 表格网页实例4.2 利用Dreamweaver MX编辑网页表格4.3 利用HTML编辑网页表格4.4 表格的应用技巧,在网页的设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。,4.1 表格网页实例,表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。,图4-1 “天使部落”主页,4.2 利用Dreamweaver MX编辑网页表格,4.2.1 创建表格表格主要由以下3个基本元素组成。 行（Row）：表格在水平方向上的组成元素。, 列（Column）：表格在竖直方向上的组成元素。 单元格（Cell）：表格中的最小的独立存放数据的区域。,另外，还有以下几个概念需要掌握。边框（Border）：单元格四周的界线标志。表格间距（Cellspace）：定义内部表格线的宽度。表格间隙（Cellpad）：相邻的单元格之间的间隙。,在Dreamweaver MX中，创建表格有以下4种方式。 执行主菜单中的“插入”“表格”命令。 按组合键Ctrl+Alt+T。 单击插入面板上“常用”选项卡中的“插入表格”按钮。 单击插入面板上“表格”选项卡中的“插入表格”按钮。,使用上述4种方式中任意一种方法都将打开如图4-2所示的“插入表格”对话框。,图4-2 “插入表格”对话框,对话框中各选项含义如下。行数：初次指定表格的总行数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。,宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。,4.2.2 表格的编辑1修改表格（1）调整表格的大小,图4-4 利用“属性”面板调整表格的大小,（2）调整行高、列宽（3）合并单元格（4）拆分单元格（5）表格的嵌套（6）表格的复制（7）删除表格（8）增加或减少行、列跨度,2在表格中输入文字和图像向表格中输入的内容主要是文字和图片两种形式。（1）在表格中输入文字（2）在表格中插入图像,4.2.3 设置表格属性1表格整体属性设置,图4-11 表格“属性”面板,2行、列和单元格属性设置,图4-12 表格的行、列和单元格“属性”面板,4.2.4 表格的排序在表格的应用中，常要对表格中的一组数据进行排序。在Dreamweaver MX中可以实现按数字的排序和按字母的排序 。,4.2.5 表格的格式化Dreamweaver MX为表格提供了17种表格格式模板，可以从中选择一种方案快速应用到用户设计的表格中。,图4-14 “格式化表格”对话框,4.3 利用HTML编辑网页表格,4.3.1 利用HTML制作示例网页表格利用HTML同样可以制作网页表格。对于初学者直接使用HTML代码编制网页表格是件很困难的事情，但是，可以通过Dreamweaver MX提供的“文档”面板来查看已经设计好的网页表格的HTML代码，以帮助用户学习和掌握HTML代码的编写规则及方法。,4.3.2 表格的基本构成通常在HTML中创建一个普通的表格应包括以下标记符。（1）TABLE（2）TITLE（3）CAPTION（4）TR（5）TD和TH（6）META,4.3.3 表格的编辑及属性设置1合并单元格2边框与分隔线3表格的对齐4控制表格和单元格的大小5设置表格和单元格的背景6控制单元格空白,4.4 表格的应用技巧,4.4.1 利用表格制作水平线与垂直线在对网页布局排版时，有时候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小问题用表格就能很好的实现，只需对表格属性、单元格属性及其源代码稍作修改即可。,4.4.2 利用表格进行页面布局Dreamweaver MX为此提供了一种新的网页排版视图布局视图（Layout View），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。,1切换视图2绘制布局表格3编辑和设置布局表格,第 5 章 网 页 图 像 处 理,5.1 利用Dreamweaver MX处理网页图像5.2 利用HTML编辑图像,在网页设计中插入丰富多彩的图像画面，可以起到点缀美化页面的效果，增加网站的吸引力。但如果使用得不恰当，过多、过大的图像不仅影响页面的主题思想，而且会影响网页的浏览及下载速度。因此，如何在网页中灵活、恰当地利用好图像，尤其是对插入图像的有效处理是十分重要的。,5.1 利用Dreamweaver MX处理网页图像,一幅图像和一个个漂亮的按钮、标记，不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见图像在网页中的作用是非常明显的。作为一名网页设计者，掌握好网页图像的运用是非常重要的。,5.1.1 网页中的图像格式我们在浏览网页时经常看到的是位图和矢量图。所谓的位图和矢量图是计算机描述/显示图像和图形的两种不同方式。位图是排列成网格的一个个点构成的，这些点称为像素点，当以恰当的分辨率显示时，它们便拼合在一起显现为一幅完整的图像；而矢量图则是用线条和填充色等数学信息来描述图像的。,在网页中常用的位图格式有GIF、JPEG、PNG，矢量图格式主要为SWF。由于受到网络带宽的制约，在网页上使用的图像都是经压缩处理过的图像格式，它们都有各自的特点。,5.1.2 选择图像处理软件前面所介绍的几种图形图像格式的原始文件并不是都可以直接用在网页中，大多数情况下，需要对原始的图像素材进行必要的处理，例如，图像优化、添加特效等，然后再在网页中使用。这就需要一些图形图像处理软件的协助。,1Photoshop2Fireworks3Flash,5.1.3 在网页中使用图像时应该注意的几个问题1网页的图像文件要小2控制网页中图像的数量和质量3在网页中恰到好处地添加动画,5.1.4 在网页中插入图像制作网页的时候，第一手得到的图像并不十分美观，有的是死板的矩形，有的与网页缺乏统一性，如果不做出判断，直接使用这些图像，有可能会给版面带来负面影响。因此，在使用图像之前，一定要有目的地选择图像，最好的方法是运用图像处理软件美化一下图像，有关图像美化的内容请参见本书第13章。,1插入图像,图5-1 “选择图像源”对话框,2图像属性参数,图5-5 图像属性面板,3改变图像的尺寸注意：在网页文档中除非必要，否则不要大幅度地改变图像的尺寸，因为这样做容易使图像失真。4调整图像在网页中的相对位置5编辑图像6更换图像7实现“魔法图像”,5.1 5 设置网页背景设置及改变网页背景的状态可以通过两种方法来实现：一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，然而，不是所有的图像都可以用作背景的。1设置网页背景颜色,图5-9 “页面属性”对话框,2设置背景图像注意：选择背景图像的原则，一定不要选择颜色深重的图像，否则网页文档的内容不易被衬托出来。,5.1.6 在Dreamweaver MX中巧妙地处理图像1给图像添加文字说明,图5-13 为图像添加文字说明,2制作低分辨率图像,图5-15 添加低分辨率图像路径,3使用图像映射,图5-17 图像热点属性面板,4设置跟踪图像,图5-18 跟踪图像设置面板,5.2 利用HTML编辑图像,使用各种 Dreamweaver MX可视工具及其选项对图像实施插入和编辑。同样，还可以利用HTML设计代码来插入和编辑网页中的图像 。,5.2.1 插入图像在HTML中，使用IMG标记符可以在网页中加入图像。它具有两个基本属性：src和alt，分别用于设置图像文件的位置的替换文本。,5.2.2 编辑图像属性1指定图像的宽和高2图像边框3设置图像周围的空白4图像的对齐,第 6 章 在网页中使用超链接,6.1 超 链 接 基 础6.2 利用Dreamweaver MX创建超链接6.3 利用Dreamweaver MX编辑超链接6.4 创 建 导 航 条6.5 管 理 超 链 接,超链接是WWW的魅力所在。为了把Internet上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，才能真正实现网络无国界，我们才可以在信息海洋中尽情遨游。,6.1 超 链 接 基 础,6.1.1 超链接的种类超链接按源端点的链接划分，可分为超文本链接和非超文本链接两类。超链接按目标端点的链接划分，可分为外部链接、内部链接、电子邮件链接、局部链接、脚本链接等。,6.1.2 文档路径类型文档路径类型有绝对路径和相对路径两种。1绝对路径绝对路径是包括服务器协议（在本例中为HTTP）的完全路径。,2相对路径相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。（1）根相对路径根相对路径（也称相对根目录）以“/”开头，路径是从当前站点的根目录开始计算。 （2）文档相对路径文档相对路径的基本思想是省略当前文档和链接的文档都相同的绝对URL部分，而只提供不同的那部分路径。,6.2 利用Dreamweaver MX创建超链接,6.2.1 创建文字超链接1使用“浏览文件”图标2使用“指向文件”图标3使用“超级链接”对象,6.2.2 创建锚点超链接1命名锚记2链接到命名锚记,6.2.3 创建电子邮件链接1插入电子邮件链接2使用属性面板创建电子邮件链接,6.2.4 创建空链接和脚本链接1创建空链接2创建脚本链接6.2.5 创建下载文件超链接6.2.6 图像地图1创建图像地图2修改图像地图,6.3 利用Dreamweaver MX编辑超链接,6.3.1 设置链接颜色6.3.2 设置链接字体6.3.3 删除超链接,6.4 创 建 导 航 条,6.4.1 认识导航条1导航条的作用2导航条的4种状态（1）一般,图6-23 导航条的一般状态,（2）滑过 （3）按下（4）按下时鼠标经过,图6-24 导航条的滑过状态,6.4.2 插入导航条6.4.3 修改导航条,6.5 管 理 超 链 接,6.5.1 设计一个清晰的超链接1设计一个清晰的超链接2首页上的超链接要“有去有回”3给图像超链接做文字说明,6.5.2 利用站点地图管理超链接1建立网页间的超链接2移除网页间的超链接3更新超链接4检查超链接,6.6 利用HTML创建超链接,6.6.1 页面链接6.6.2 锚点链接6.6.3 电子邮件链接,第 7 章 网页表单的编辑,表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛地应用于各种信息的搜集和反馈。 7.1 认 识 表 单7.2 利用Dreamweaver MX编辑表单7.3 利用HTML编辑表单,7.1 认 识 表 单,网页是一种平面传播工具，没有表单，面对华丽、生动的画面，浏览者只能照单全收而不能参与其中。使用表单可以收集来自用户的信息，它是网站管理者与浏览者之间沟通的桥梁。平时用户上网登录E-mail信箱，填写、提交各种个人资料等都应用了表单的各种功能。,表单有两个重要的组成部分：一是描述表单的HTML源代码；一是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如CGI、ASP等。,7.1.1 表单网页实例,图7-2 “表单”样例,7.1.2 表单对象表单文本字段隐藏域复选框单选按钮,单选按钮组列表/菜单跳转菜单图像域文件字段按钮,7.2 利用Dreamweaver MX编辑表单,7.2.1 创建表单7.2.2 设置表单属性,7.2.3 插入表单对象1文本框2按钮3复选框4单选按钮5列表/菜单属性6文件域7图像域8隐藏域,7.2.4 验证表单的正确性,7.3 利用HTML编辑表单,7.3.1 表单标记符7.3.2 表单输入标记符,7.3.3 表单控件的定义1文本框和口令框2复选框与单选按钮3按钮4多行文本框5选项菜单,第 8 章 制 作 框 架 网 页,8.1 认 识 框 架 网 页8.2 创 建 框 架8.3 编 辑 框 架 8.4 设置框架和框架集属性8.5 链 接 框 架 的 内 容,框架是在同一个浏览窗口中显示多个网页的技术，框架网页是一种特殊的网页。框架将窗口划分为不同的部分，各部分中都有各自的网页，总体构架出一个框架集。此外，通过为超链接指定目标框架，可以在框架之间建立起以内容为媒介的联系，因而实现页面导航的功能。,8.1 认 识 框 架 网 页,框架（Frames）技术由框架集（Frameset）和框架（Frame）两部分组成。 框架网页是一种特殊的HTML网页，它可以将浏览器窗口分成不同的区域，称为框架区域，每个区域都可以保存并显示一个不同的网页。,8.2 创 建 框 架,Dreamweaver MX创建框架集的方法有两种：一是可以自己设计，二是可以从几个预设的框架集中选择。,8.2.1插入预设的框架集提示：在“框架”面板中，预设的框架集是由两种颜色组成的，其中浅蓝色的区域表示在创建框架后，原文档内容所在的位置。白色区域则表示新创建的框架文档所在的位置。,图8-2 “框架”面板,8.2.2设计和插入框架集“框架”面板上的预设框架集几乎包含了一般的框架格式，当然也可以自己设计框架格式，灵活运用框架集。,8.3 编 辑 框 架,8.3.1选定框架和框架集在对框架进行编辑操作之前必须先选择所需的框架，可以直接在网页文档视窗中选择框架，当然利用“框架”控制面板对框架进行操作比较方便。,1利用框架控制面板选定框架和框架集2在文档视窗中选定框架和框架集3切换所选定框架和框架集,8.3.2删除框架8.3.3在框架中打开网页文档创建框架的目的是在框架中建立新的网页或打开已有的网页文档。,8.3.4保存框架和框架集框架集文件和与之相关的框架文件必须先保存，才能在浏览器中预览整个框架网页内容。可以分别保存框架集页面或框架页面，也可以同时保存所有打开的框架文件和框架集页面。,1保存框架,图8-9 “保存为”对话框,2保存框架集,8.4 设置框架和框架集属性,框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。框架集属性确定框架的大小和框架之间的边框宽度和颜色等。在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。,8.4.1框架的属性1启动框架属性面板2设置框架的属性,图8-10“框架”控制面板和框架属性面板,8.4.2框架集的属性1启动框架集属性面板2设置框架集的属性,图8-11“框架”控制面板和框架集属性面板,8.4.3设置或更改框架的属性1设置框架的大小2设置框架和框架集的边框3设置框架或框架集的边框颜色4改变框架的背景色,8.5 链 接 框 架 的 内 容,利用框架结构，可以把导航条内容固定在页面的顶部、左边或右边。在浏览网页时，用户可以直接选择导航条上相应的内容，切换到所对应的页面，这都需要事先对各个框架建立超链接。,要想在框架内使用链接，必须为链接设置一个目标，该目标是指框架内链接要打开的网页内容。根据链接目标的不同，框架中的链接主要有两种：框架内的链接和关键字的链接。8.5.1框架内的链接框架内的链接就是建立一个框架内不同HTML页面间内容的链接和跳转。,8.5.2关键字的链接关键字的链接是指在属性面板中的“目标”下拉列表框中列出的原有参数，用来确定所链接文件的显示位置，它不同于框架名称的参数（如mainFrame），这些参数有4种，其含义如下。 _blank _parent _self _top,第 9 章 利用图层技术制作网页,9.1 认 识 图 层 9.2 图层的基本操作9.3 层 面 板 的 应 用9.4 图 层 与 表 格 9.5 图 层 与 时 间 轴,层是一种HTML页面元素，可以将它放置在页面的任意位置。层可以包含文本、图像或其他可放在HTML文档正文中的任何内容。,9.1 认 识 图 层,层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。没有层的网页像一个平面，即由x轴和y轴组合成的二维空间，而层所确定的区域是在z轴上，它摆脱了二维平面的束缚，形成了一个三维空间结构，如图9-1所示。同时，层与层之间的关系也由z轴的坐标来决定。一般来说，默认后建立的层的z值大，先建立的层z值小，z值大的层可以覆盖z值小的层 。,图9-1 层在网页中的相对位置,9.2 图层的基本操作,9.2.1 创建图层1利用工具创建图层2通过菜单创建图层3拖动法创建图层,9.2.2 激活图层9.2.3 选中图层1选中一个图层2选择多个图层,9.2.4 调节图层大小1调整单个图层的大小2调整多个图层的大小,9.2.5 移动图层1拖动层2利用属性面板3利用键盘9.2.6 对齐图层9.2.7 图层与网格的对齐,9.3 层 面 板 的 应 用,9.3.1 层属性面板的应用9.3.2 层控制面板的应用1改变图层的可见性2图层的叠放次序3创建嵌套图层,9.4 图 层 与 表 格,9.4.1 防止图层重叠方法一：在“层”控制面板中，请选择“防止重叠”选项。方法二：在“文档”窗口中，选择“修改”“排列顺序”“防止重叠”命令。,9.4.2 把图层转换为表格9.4.3 把表格转换为图层,9.5 图 层 与 时 间 轴,DHTML，也就是动态HTML，是一种能够具有使用脚本语言来改变样式或位置能力的语言。时间轴在网页中所获得的效果就是利用动态HTML语言来实现的。通过DHTML来改变层的属性，或是通过时间轴各帧上的一系列图像来实现动态的效果。,时间轴也叫时间线，顾名思义，它是一条贯穿时间的轴。通过在这条时间轴上不同的时间部位放置不同的内容，就可以实现网页元素的动态效果。,9.5.1 时间轴介绍1时间轴面板,图9-29 时间轴面板,“时间轴”弹出式菜单“行为”通道动画条 关键帧“动画”通道,2播放选项,图9-30 播放选项,倒带后退播放播放速度自动播放循环,3修改时间轴4重命名时间轴5用时间轴更改图像和层的属性6使用多个时间轴,9.5.2 时间轴的应用1拷贝和粘贴动画2将动画序列应用于另一对象3时间轴动画小技巧,9.5.3 创建时间轴动画1创建动画的基本方法2录制图层路径,第 10 章 在网页中使用CSS样式,10.1 CSS样式的分类及应用方式10.2 使用CSS样式表面板10.3 新 建 CSS样式 10.4 设置“CSS样式定义”对话框参数10.5 自定义CSS样式10.6 链接外部CSS样式10.7 编 辑 CSS 样 式10.8 复 制 CSS 样 式10.9 导 出 CSS 样 式10.10 CSS样式转化为HTML标签,CSS即Cascading Style Sheets，称为层叠样式表，又称级联样式表。CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同的效果。它扩展了HTML的功能，使网页设计者能够以更有效的方式设计网页属性。,10.1 CSS样式的分类及应用方式,10.1.1 CSS样式表概述使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。,CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。 使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。,10.1.2 CSS样式的分类Dreamweaver MX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。,（1）创建自定义样式（Custom CSS styles）（2）重定义HTML标签（HTML tag styles）（3）使用CSS选择器（CSS selector styles）,10.1.3 CSS样式的应用方式使用CSS的样式有以下几种方式。（1）局部套用（2）内联式（3）外联式,10.1.4 CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。,10.2 使用CSS样式表面板,使用CSS样式设置面板可以创建和管理CSS样式。,图10-1 CSS样式表面板,10.3 新 建 CSS样式,在“新建CSS样式”对话框中可以进行下列各项的设置。,图10-5 “使用CSS选择器”选项对话框,10.4 设置“CSS样式定义”对话框参数,通过设置“CSS样式定义”对话框，可以定义CSS样式表的格式化参数。,图10-7 “CSS样式定义”对话框,10.4.1 定义CSS样式的“类型”（Type）属性选择“CSS样式定义”对话框中“分类”列表中的“类型”选项，可以对CSS样式的“类型”属性进行设置 。,10.4.2 定义CSS样式的“背景”（Background）属性选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式的“背景”属性进行设置 。,10.4.3 定义CSS样式的“区块”（Block）属性选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置 。,10.4.4 定义CSS样式的“盒子”（Box）属性选择“CSS样式定义”对话框中“分类”列表中的“盒子”选项，可以对CSS样式的“盒子”属性进行设置 。,10.4.5 定义CSS样式的“边框”（Border）属性选择“CSS样式定义”对话框中“分类”列表中的“边框”选项，可以对CSS样式的“边框”属性进行设置 。,10.4.6 定义CSS样式的“列表”（List）属性选择“CSS样式定义”对话框中“分类”列表中的“列表”选项，可以对CSS样式的“列表”属性进行设置 。,10.4.7 定义CSS样式的“定位”（Positioning）属性选择“CSS样式定义”对话框中“分类”列表中的“定位”选项，可以对CSS样式的“定位”属性进行设置 。,10.4.8 定义CSS样式的“扩展”（Extensions）属性选择“CSS样式定义”对话框中“分类”列表中的“扩展”选项，可以对CSS样式的“扩展”属性进行设置 。,10.5 自定义CSS样式,自定义CSS样式是惟一可以应用在网页文档中所有文本上的CSS样式，在CSS样式面板中的“应用样式”视图下显示所有与网页文档关联的自定义样式。当然，如果文本中应用多个CSS样式，就会引起样式冲突，产生意想不到的后果。,10.5.1 应用自定义CSS样式（1）先要选中网页文档中需应用CSS样式的文本。（2）将CSS样式应用在选中的文本中。,图10-16文本“属性”面板的CSS模式,10.5.2 删除已应用的自定义CSS样式对于不需要的自定义CSS样式，可以将应用在文本中的自定义CSS样式移除。具体操作方法如下。（1）选中应用了自定义CSS样式的文本。（2）将自定义的CSS样式删除。,10.6 链接外部CSS样式,链接外部CSS样式是应用CSS样式的主要方法之一，链接外部CSS样式后，在页面中并不出现CSS语法。,10.7 编 辑 CSS 样 式,如果需要对已经创建的CSS样式进行编辑，应该先在CSS样式控制面板中选择需编辑的CSS样式，再执行下面的操作之一，都可以打开“CSS样式定义”对话框，对CSS样式中的相关属性进行编辑。,10.8 复 制 CSS 样 式,可以对原有的CSS样式进行复制操作，然后在复制的CSS样式基础上创建另一种新的CSS样式。,10.9 导 出 CSS 样 式,可以将自己认为满意的CSS样式导出为.css文件，应用在其他的页面中。,10.10 CSS样式转化为HTML标签,尽管CSS样式表有很强大的功能和优点，但是IE 3.0以前版本的浏览器不支持CSS样式，IE 3.0版本的浏览器也仅仅支持部分属性，只有将CSS样式转换为HTML标签，才可以在这些浏览器中正确显示页面。,第 11 章 在网页中加入多媒体,11.1 网页多媒体应用实例11.2 制作交互对象 11.3 在网页中插入媒体对象11.4 在网页中插入声音,Dreamweaver MX可以很方便、快捷地在网页中加入声音、动画等文件，可以合成、编辑这些多媒体文件和对象，例如Java小程序、QuickTime、Flash动画、Shockwave动画和MP3文件等，还可以在这些对象里附加一些设计记录，也可以插入Flash按钮和文本对象等。,11.1 网页多媒体应用实例11.2 制作交互对象,11.2.1 插入Flash按钮对象1使用Flash按钮对象2插入一个Flash按钮对象3修改Flash按钮对象,11.2.2 插入Flash文本对象11.2.3 鼠标经过图像,11.3 在网页中插入媒体对象,11.3.1 插入Flash电影1插入Flash电影2在文档窗口中预览 Flash 影片3设置 Flash影片属性,11.3.2 插入Shockwave电影1关于Shockwave电影2插入Shockwave电影3设置Shockwave属性,11.3.3 插入ActiveX控件1插入ActiveX控件2设置 ActiveX 属性,11.3.4 插入Java程序（Java Applet）1插入Java小程序2设置Java小程序属性,11.4 在网页中插入声音,11.4.1 声音文件几种常见的音频文件格式。（1）.midi 或 .mid （2）.wav （3）.aif （4）.mp3 （5）.ra， .ram， .rpm， 或 Real Audio,11.4.2 链接声音文件1链接到音频文件2嵌入声音文件,第 12 章 利用模板和库设计网页,12.1 利用模板创建网页 12.2 利用模板更新网页 12.3 利用库项目维护网页,12.1 利用模板创建网页,12.1.1 模板原理Dreamweaver 模板是一种用来制作具有相同风格页面的“模子”，用户利用模板可以在短时间内设计大量风格相同或相近的页面。,12.1.2 创建模板在Dreamweaver MX中，创建模板的方法有3种。1将现有的文档保存为模板2通过“资源”面板创建新模板3创建嵌套模板,12.1.3 定义可编辑区域1定义可编辑区域定义可编辑区域有两种方法。一种是选择已有的一部分页面内容将它指定为可编辑区域，另一种是在当前光标处插入一个空的可编辑区域。,2删除可编辑区域 如果已经将模板文件的一个区域定义为可编辑区域，而现在想要再次锁定它，使其为不可编辑区域，可执行“删除模板标记”操作。,12.1.4 使用模板1创建基于模板新页面2将模板应用到现有文档,12.1.5 管理模板1重命名模板2删除模板3将文档与模板分离,12.2 利用模板更新网页,12.2.1 修改页面附着的模板12.2.2 更新附着模板的页面,12.3 利用库项目维护网页,12.3.1 创建库项目1什么是库项目库是一种特殊的Dreamweaver文件，其中包含已创建的单独的网页“资源”或资源拷贝的集合。,2创建库项目可以将文档body部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Java applets、插件、ActiveX元素、导航条和图像。,12.3.2 在文档中插入库项目12.3.3 库项目的管理 1编辑库项目2重命名库项目3删除库项目4重新创建库项目5将项目从源文件中分离,12.3.4 更新网页1更新当前网页2更新整个站点或所有使用特定库项目的文档,第 13 章 美 化 网 页,13.1 利用Fireworks MX美化网页13.2 利用Flash MX制作网页动画,设计并制作出赏心悦目的网页并非容易的事情，单独使用Dreamweaver MX来设计是得不到满意效果的，还需要利用网页三剑客的另两位成员：Fireworks MX和Flash MX来对Dreamweaver MX设计的网页作进一步的美化工作。,13.1 利用Fireworks MX美化网页,Fireworks MX最主要的功能就是进行网页图像的制作和处理，如制作交互图像、图像映像等。,13.1.1 Fireworks MX的基本操作1认识Fireworks MX的操作界面（1）启动Fireworks MX（2）Fireworks MX窗口组成,图13-1 Fireworks MX窗口,2Fireworks MX的常用菜单及工具（1）画面显示与调整（2）对象选择方法,13.1.2 利用Fireworks MX制作网页按钮1制作网页导航条导航条实际上是一组互斥按钮，亦称导航按钮。制作的方法比较简单，只要创建一个按钮，对其进行必要的修饰完善操作，再将其进行复制得到多个按钮，最后分别修改其文字提示