《计算机常用工具软.ppt》由会员分享,可在线阅读,更多相关《计算机常用工具软.ppt(90页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页制作工具网页制作工具Dreamweaver8pDreamweaver与与Flash、Fireworks这这3者被用户称为者被用户称为“网页设计三网页设计三剑客剑客”。Dreamweaver的优势在于它不仅是优秀的所见即所得的编辑的优势在于它不仅是优秀的所见即所得的编辑软件,同时也兼顾了软件,同时也兼顾了HTML源代码,可以让用户很方便地在两种模式之源代码,可以让用户很方便地在两种模式之间切换。间切换。pDreamweaver8提供众多的可视化设计工具、应用开发环境以及提供众多的可视化设计工具、应用开发环境以及代码编辑支持。如利用鼠标拖曳来添加表格、图像等元素,在文档中代码编辑支持。如利用鼠
2、标拖曳来添加表格、图像等元素,在文档中直接输入文本,直接插入一些常用的特殊符号对象等。用户在没有输直接输入文本,直接插入一些常用的特殊符号对象等。用户在没有输入代码的情况下完成了上述工作,入代码的情况下完成了上述工作,Dreamweaver自动将结果转换为自动将结果转换为HTML源代码。用户也可以随时查看文档的源代码。用户也可以随时查看文档的HTML源代码,在代码视图源代码,在代码视图中进行修改。中进行修改。2一、一、Dreamweaver 8Dreamweaver 8介绍介绍Dreamweaver8的操作界面主要由标题栏、菜单栏、文档窗口、的操作界面主要由标题栏、菜单栏、文档窗口、属性面板、
3、插入栏以及浮动面板组组成。属性面板、插入栏以及浮动面板组组成。二、二、Dreamweaver 8Dreamweaver 8的操作界面的操作界面 2-1操作界面操作界面1、新建文件、新建文件三、三、文件基本操作文件基本操作2-2为新建文件对话框为新建文件对话框2、保存文件、保存文件三、三、文件基本操作文件基本操作2-3为保存文件为保存文件2、使用高级设置建立站点、使用高级设置建立站点四、四、创建站点创建站点 对于对于【高级高级】设置,主要是设置设置,主要是设置【本地信息本地信息】、【远程信息远程信息】和和【测试服务器测试服务器】中的参数。使用高级设置建立站点的具体操作步骤如下。中的参数。使用高级
4、设置建立站点的具体操作步骤如下。1选择菜单中选择菜单中【站点站点】|【管理站点管理站点】命令,打开命令,打开【管理站点管理站点】对话框,对话框,在对话框中单击在对话框中单击【编辑编辑】按钮,如图按钮,如图2-17:四、四、创建站点创建站点 打开打开【站点定义为站点定义为】对话框,在对话框中切换到对话框,在对话框中切换到【高级高级】选项选项卡,在卡,在【分类分类】列表框中选择列表框中选择【本地信息本地信息】选项,在选项,在【站点名称站点名称】文本文本框中输入站点的名称,单击框中输入站点的名称,单击【本地根文件夹本地根文件夹】右边的按钮,选择文件夹右边的按钮,选择文件夹目录,如图目录,如图2-18
5、:四、四、创建站点创建站点 在在【分类分类】列表框中选择列表框中选择【远程信息远程信息】选项,右侧出现相应的参选项,右侧出现相应的参数,如图数,如图2-20:四、四、创建站点创建站点 设置完毕后,单击设置完毕后,单击【确定确定】按钮,即可创建站点。按钮,即可创建站点。2.3添加文本添加文本在在Dreamweaver8中输入文本的方法有很中输入文本的方法有很多。可以直接在文档窗口中输入文本,也多。可以直接在文档窗口中输入文本,也可以从其他文档中剪切并粘贴或导入文本。可以从其他文档中剪切并粘贴或导入文本。2.3.1添加文本的一般方法添加文本的一般方法1输入普通文本:输入普通文本:在在Dreamwe
6、aver8中输入文本的方法有很多。可以直接中输入文本的方法有很多。可以直接在文档窗口中输入文本,也可以从其他文档中剪切并粘贴或在文档窗口中输入文本,也可以从其他文档中剪切并粘贴或导入文本。导入文本。2输入特殊字符输入特殊字符单击单击“插入栏插入栏”左侧的下拉按钮,在打开的下拉列表中左侧的下拉按钮,在打开的下拉列表中选择选择“文本文本”选项,然后单击最右边的选项,然后单击最右边的“字符字符”下拉按钮。下拉按钮。在弹出的下拉菜单中选择合适的特殊字符,如在弹出的下拉菜单中选择合适的特殊字符,如、等。如果没有合适的字符,可以选择等。如果没有合适的字符,可以选择“其他字符其他字符”选选项项3输入空格输入
7、空格因为因为HTML有规定,连续多个空格将被忽视,只显示一个空格,所有规定,连续多个空格将被忽视,只显示一个空格,所以以Dreamweaver中不能直接输入多个空格,要想输入多个空格中不能直接输入多个空格,要想输入多个空格:(1)切换中文输入法为)切换中文输入法为全角模式全角模式,输入全角的空格。,输入全角的空格。(2)单击)单击“文本文本”插入栏中的插入栏中的“字符字符”下拉菜单按钮,在下拉列下拉菜单按钮,在下拉列表中选择表中选择“不换行空格不换行空格”命令。命令。(3)选择)选择“插入插入”|“HTML”|“特殊字符特殊字符”|”不换行空格不换行空格“(4)按)按”Ctrl+Shift+S
8、pace“组合键组合键(5)在)在HTML代码中要插入空格的位置输入多个代码中要插入空格的位置输入多个“ ”,在,在设计视图显示的就是输入了多个空格。设计视图显示的就是输入了多个空格。4输入日期输入日期(1)在设计视图中直接输入日期的文本。)在设计视图中直接输入日期的文本。(2)单击)单击“常用常用”插入栏中的插入栏中的“日期日期”按钮,在弹出的按钮,在弹出的“插入日期插入日期”对话框中选择需要的日期格式并单击确定。对话框中选择需要的日期格式并单击确定。选择选择“存储时自动更新存储时自动更新”复选框,则在日期格式插入复选框,则在日期格式插入到文档中后可以对其进行编辑,如果没有选这项,
9、插到文档中后可以对其进行编辑,如果没有选这项,插入后变成纯文本,不好修改。如果希望在每次保存文入后变成纯文本,不好修改。如果希望在每次保存文档时都更新插入的日期,则选择档时都更新插入的日期,则选择“储存时自动更新储存时自动更新”。如果要更改日期,可以先用鼠标选中该对象,然后单如果要更改日期,可以先用鼠标选中该对象,然后单击击“属性属性”面板中的面板中的“编辑日期格式编辑日期格式”按钮,按钮,1标题标题在在HTML中,一共定义了中,一共定义了6级标题,从级标题,从1级到级到6级,字体大小级,字体大小依次递减。依次递减。(1)选择相应的文本,选择)选择相应的文本,选择“文本文本”“段落格式段落格式
10、”命命令,然后在子菜单中选择相应的标题。令,然后在子菜单中选择相应的标题。(2)选择相应的文字,在)选择相应的文字,在“属性属性”面板上的面板上的“格式格式”下下拉列表中选择相应的标题。拉列表中选择相应的标题。2.3.2设置文本格式设置文本格式2段落段落段落就是在格式上统一的文本。在段落就是在格式上统一的文本。在Dreamweaver中每中每输入一段文字后,按下回车键(输入一段文字后,按下回车键(Enter),这段文本就),这段文本就会自动成为一个段落,这个操作被称为会自动成为一个段落,这个操作被称为硬回车硬回车。在。在Dreamweaver中,段落就是带有硬回车的文本,而且中,段落就是带有硬
11、回车的文本,而且段落和段落之间会自动空一行来区分。段落和段落之间会自动空一行来区分。定义段落的方法有三种:定义段落的方法有三种:p(1)输入文本后直接按下回车键,将自动生成段落。)输入文本后直接按下回车键,将自动生成段落。p(2)将光标移动到需要定义为段落的文字中,选择)将光标移动到需要定义为段落的文字中,选择“文本文本”“段落格式段落格式”“段落段落”命令,此时文本就被定义为段落。命令,此时文本就被定义为段落。p(3)将光标移动到需要定义为段落的文字中,在)将光标移动到需要定义为段落的文字中,在“属性属性”面面板上的板上的“格式格式”下拉列表中选择下拉列表中选择“段落段落”选项。选项。3字体
12、字体对文本进行字体设置的方法有以下:对文本进行字体设置的方法有以下:(1)选择要设置字体的文本,然后选择)选择要设置字体的文本,然后选择“文本文本”“字字体体”命令,在弹出的子菜单中选择合适的字体类型。命令,在弹出的子菜单中选择合适的字体类型。(2)选择要设置字体的文本,单击)选择要设置字体的文本,单击“属性属性”面板上的面板上的“字体字体”下拉按钮,在下拉列表中选择合适的字体类型。如下拉按钮,在下拉列表中选择合适的字体类型。如果没有找到合适的字体,单击果没有找到合适的字体,单击“编辑字体列表编辑字体列表”命令,将命令,将弹出弹出“编辑字体列表编辑字体列表”对话框对话框4颜色颜色(1)选择要设
13、置颜色的文本,然后选择)选择要设置颜色的文本,然后选择“文本文本”“颜色颜色”命令,将弹出命令,将弹出“颜色颜色”对话框(对话框(windows标准颜色对话标准颜色对话框)。框)。(2)选择要设置颜色的文本,单击)选择要设置颜色的文本,单击“属性属性”面板上的面板上的“文文本颜色本颜色”按钮,打开颜色选择器。按钮,打开颜色选择器。(3)在)在“属性属性”面板上点击面板上点击“页面属性页面属性”,或者选择菜,或者选择菜单单“修改修改”“页面属性页面属性”命令,打开命令,打开“页面属性页面属性”对话对话框,可以设置文本的字体颜色框,可以设置文本的字体颜色5文本大小文本大小选择要设置的文本,在选择要
14、设置的文本,在“属性属性”面板上的面板上的“大小大小”下拉列表中选择合适的文本大小,也可以在文本框下拉列表中选择合适的文本大小,也可以在文本框中直接输入数值来改变文本大小,如果不想设置,中直接输入数值来改变文本大小,如果不想设置,则选择则选择“无无”选项,此时,文本就恢复为默认的文选项,此时,文本就恢复为默认的文本大小。本大小。6文本的样式:文本的样式:文本的样式,即文本的显文本的样式,即文本的显示方式,如加粗、倾斜、下示方式,如加粗、倾斜、下划线和删除线等。划线和删除线等。设置文本样式的方法是选设置文本样式的方法是选择要设置的文本,然后选择择要设置的文本,然后选择菜单菜单“文本文本”“样式样
15、式”命命令令对齐可以将几个段落相对于文档窗口进行对齐,有对齐可以将几个段落相对于文档窗口进行对齐,有4种对齐方种对齐方式:左对齐、居中对齐、右对齐、两端对齐。式:左对齐、居中对齐、右对齐、两端对齐。设置方法同上所述,可以选择菜单设置方法同上所述,可以选择菜单“文本文本”“对齐对齐”命令命令来实现,也可以在来实现,也可以在“属性属性”面板上单击对齐方式的按钮来实面板上单击对齐方式的按钮来实现现。7对齐对齐8缩进和凸出缩进和凸出缩进和凸出有两种设置方法:缩进和凸出有两种设置方法:(1)将光标至于要设置缩进的文本中,选择菜单)将光标至于要设置缩进的文本中,选择菜单“文本文本”“缩进缩进”命令,命令,
16、就可以将文本向右移两个字符的位置。选择就可以将文本向右移两个字符的位置。选择“文本文本”“凸出凸出”命令,命令,则可以将文本向左移两个字符的位置。则可以将文本向左移两个字符的位置。(2)在)在“属性属性”面板中点击缩进和凸出的图标面板中点击缩进和凸出的图标,也可以进行设置。,也可以进行设置。9文本列表文本列表(1)项目列表的类型)项目列表的类型项目列表根据各个项目之间是否有先后次序,可以项目列表根据各个项目之间是否有先后次序,可以分为分为有序列表和无序列表有序列表和无序列表。无序列表无序列表表示各个项目之间没有先后次序,通常用表示各个项目之间没有先后次序,通常用正方形、菱形等符号作为列表项的前
17、缀。而正方形、菱形等符号作为列表项的前缀。而有序列表有序列表正好相反,各项目之间具有明确的先后关系,前缀符正好相反,各项目之间具有明确的先后关系,前缀符号常常是阿拉伯数字、罗马数字和英文字母等。号常常是阿拉伯数字、罗马数字和英文字母等。(2)对现有文档进行项目列表)对现有文档进行项目列表创建无序列表创建无序列表选择所输入的文本,然后选择菜单选择所输入的文本,然后选择菜单“文本文本”“列列表表”“项目列表项目列表”命令,或者单击命令,或者单击“属性属性”面板下面板下方的方的“项目列表项目列表”按钮。按钮。创建有序列表创建有序列表选择所输入的文本,然后选择选择所输入的文本,然后选择“文本文本”“列
18、表列表”“编号列表编号列表”命令,或者单击命令,或者单击“属性属性”面板下方的面板下方的“编号列表编号列表”按钮。按钮。(3)设置列表属性)设置列表属性在介绍建立有序列表和无序列表时,默认只有一种前在介绍建立有序列表和无序列表时,默认只有一种前缀,其实还可以通过修改列表属性来改变前缀。缀,其实还可以通过修改列表属性来改变前缀。选择选择“文本文本”“列表列表”“属性属性”命令,打开命令,打开“列列表属性表属性”对话框对话框列表类型列表类型指定列表属性,而指定列表属性,而列表项目列表项目指定列表中的指定列表中的个别项目。使用弹出式菜单选择项目、编号、目录个别项目。使用弹出式菜单选择项目、编号、目录
19、或菜单列表。根据所选的或菜单列表。根据所选的“列表类型列表类型”,对话框中,对话框中将出现不同的选项。将出现不同的选项。样式样式确定用于编号列表或项目列表的编号或项目符确定用于编号列表或项目列表的编号或项目符号的样式。号的样式。所有列表项目都将具有该样式,除非为所有列表项目都将具有该样式,除非为列表项目指定新样式。列表项目指定新样式。开始计数设置第一个编号列表项的值。开始计数设置第一个编号列表项的值。2.4超链接超链接2.4.1超链接概述超链接概述网页中的超链接就是以文字或图像作为链网页中的超链接就是以文字或图像作为链接对象,然后指定一个要跳转的网页地址。接对象,然后指定一个要跳转的网页地址。
20、当浏览者点击文字或图像时,浏览器将会当浏览者点击文字或图像时,浏览器将会跳转到指定的目标网页。跳转到指定的目标网页。1超链接的分类超链接的分类根据超链接目标文件的不同,可以分为页根据超链接目标文件的不同,可以分为页面超链接、锚点超链接、电子邮件超链接;面超链接、锚点超链接、电子邮件超链接;根据超链接单击对象的不同,可以分为文根据超链接单击对象的不同,可以分为文字超链接、图像超链接、图像映像等。字超链接、图像超链接、图像映像等。2路径路径创建超链接时必须了解链接和被链接文本创建超链接时必须了解链接和被链接文本的路径,路径通常有以下几种表示方式:的路径,路径通常有以下几种表示方式:p绝对路径绝对路
21、径p相对路径相对路径p根相对路径根相对路径(1)绝对路径)绝对路径绝对路径就是被链接文件的完整的绝对路径就是被链接文件的完整的URL,路径和,路径和链接的源端无关,只要链接的网站地址不变,无链接的源端无关,只要链接的网站地址不变,无论文件在网站中如何移动,都可以实现正常跳转。论文件在网站中如何移动,都可以实现正常跳转。一般情况下,创建到其他网站的链接时使用绝对一般情况下,创建到其他网站的链接时使用绝对路径路径。表示方法如下:表示方法如下:协议协议:/URL地址地址/端口端口/目录目录/文件名文件名,如:。如:。(2)相对路径)相对路径相对路径是以文件所在位置为起点,到被链接文相对路径是以文件所
22、在位置为起点,到被链接文件通过的路径。指定相对路径时,省去了当前文件通过的路径。指定相对路径时,省去了当前文件和被链接文件件和被链接文件URL中的相同部分,只留下不同中的相同部分,只留下不同的部分,的部分,适合使用在本地链接里。适合使用在本地链接里。表示方法如下:表示方法如下:./相对目录相对目录/文件名文件名其中,其中,.表示上一级文件夹。表示上一级文件夹。(3)根相对路径)根相对路径根相对路径是指从站点的根文件夹到被链接文件根相对路径是指从站点的根文件夹到被链接文件的路径。根相对路径是绝对路径和相对路径的折的路径。根相对路径是绝对路径和相对路径的折衷,是指定网站内文件链接的最好方法,因为在
23、衷,是指定网站内文件链接的最好方法,因为在移动一个包含相对链接的文件时,无需对原有的移动一个包含相对链接的文件时,无需对原有的链接进行修改。链接进行修改。其表示方法如下:其表示方法如下:/目录目录/./文件名文件名其中,斜线其中,斜线/表示站点的根文件夹。所有基于根目表示站点的根文件夹。所有基于根目录的路径都是从斜线开始的。录的路径都是从斜线开始的。2.4.2创建超链接创建超链接创建链接的方法有以下几种:创建链接的方法有以下几种:p1使用属性面板创建链接使用属性面板创建链接p2使用指向文件图标创建链接使用指向文件图标创建链接p3使用使用“超级链接超级链接”对话框创建链接对话框创建链接p4使用快
24、捷菜单创建链接使用快捷菜单创建链接p5直接拖动创建链接直接拖动创建链接1使用属性面板创建链接使用属性面板创建链接步骤如下:步骤如下:p(1)选择编辑窗口中的文字或图像。)选择编辑窗口中的文字或图像。p(2)选择)选择“窗口窗口”“属性属性”命令,打开命令,打开“属性属性面板面板”,单击,单击“链接链接”文本框右边的文本框右边的“选择文件选择文件”图标按钮,在打开的图标按钮,在打开的“选择文件选择文件”对话框中浏览并对话框中浏览并选择一个文件,选择一个文件,或者在或者在“链接链接”文本框中直接输入要链接的文件的路径和文本框中直接输入要链接的文件的路径和文件名。文件名。p(3)选择被链接文件的载入
25、目标。默认情况下,)选择被链接文件的载入目标。默认情况下,被链接文件在当前窗口或框架中打开。要是被链接被链接文件在当前窗口或框架中打开。要是被链接文件显示在其他地方,需要从属性面板的文件显示在其他地方,需要从属性面板的“目标目标”下列列表中选择一个选项。下列列表中选择一个选项。“目标目标”的各选项设置如下:的各选项设置如下:_blank。将链接的文档在一个新的、未命名的浏览器将链接的文档在一个新的、未命名的浏览器窗口中打开。窗口中打开。_parent。将链接的文档在该链接所在框架的父框架或将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架,则父窗口中打开。如果包
26、含链接的框架不是嵌套框架,则所链接的文档在整个浏览器窗口中打开。所链接的文档在整个浏览器窗口中打开。_self。将链接的文档在链接所在的同一框架或窗口中将链接的文档在链接所在的同一框架或窗口中打开,此目标为默认值,即不指定目标,则在同一框架打开,此目标为默认值,即不指定目标,则在同一框架或窗口打开文档。或窗口打开文档。_top。将链接的文档在整个浏览器窗口中打开,从而将链接的文档在整个浏览器窗口中打开,从而取代当前窗口的所有框架。取代当前窗口的所有框架。2使用指向文件图标创建链接使用指向文件图标创建链接在在“属性面板属性面板”中拖动中拖动“链接链接”文本框右边的文本框右边的“指向文件指向文件”
27、图标可以快速创建链接。拖动鼠标时图标可以快速创建链接。拖动鼠标时会出现一条带箭头的细线,指示要拖动的位置,会出现一条带箭头的细线,指示要拖动的位置,指向文件后只需释放鼠标,即会自动生成链接。指向文件后只需释放鼠标,即会自动生成链接。使用使用“指向文件指向文件”图标可以方便快捷地创建指向图标可以方便快捷地创建指向站点文件面板中的一个文件或者图像文件。站点文件面板中的一个文件或者图像文件。3使用使用“超级链接超级链接”对话框创建链接对话框创建链接选择要创建链接的文本或图像,然后选选择要创建链接的文本或图像,然后选择择“插入插入”“超级链接超级链接”命令,打开命令,打开“超级链接超级链接”对话框,对
28、话框,或者单击或者单击“常用常用”插入栏中插入栏中“超级链接超级链接”按钮按钮也会打开也会打开“超级链接超级链接”对话框。对话框。4使用快捷菜单创建链接使用快捷菜单创建链接在编辑窗口中,选择要创建链接的文本或图像,然后在编辑窗口中,选择要创建链接的文本或图像,然后单击右键,在打开的快捷菜单中选择单击右键,在打开的快捷菜单中选择“创建链接创建链接”命命令,也会打开令,也会打开“选择文件选择文件”对话框,选择相应文件,对话框,选择相应文件,即可创建链接。即可创建链接。5直接拖动创建链接直接拖动创建链接在编辑窗口中,选择要创建链接的文本或图像,按住在编辑窗口中,选择要创建链接的文本或图像,按住Shi
29、ft键,在选定的文本上拖动鼠标指针,在拖动时会键,在选定的文本上拖动鼠标指针,在拖动时会出现指向文件图标,拖动鼠标到站点文件中的另一个出现指向文件图标,拖动鼠标到站点文件中的另一个文件,最后释放鼠标,即可形成对这个文件的链接。文件,最后释放鼠标,即可形成对这个文件的链接。3E-mail链接链接E-mail链接链接也是众多网站上网页的重要内容之一,浏览者也是众多网站上网页的重要内容之一,浏览者只需要在其上单击鼠标,就可以打开邮件发送程序,与企只需要在其上单击鼠标,就可以打开邮件发送程序,与企业或个人进行交流。业或个人进行交流。电子邮件链接与其他超级链接稍微有不同,电子邮件链接与其他超级链接稍微有
30、不同,链接地址不再链接地址不再以以http开头,而是开头,而是mailto,设置链接的方式与其他链接一,设置链接的方式与其他链接一样。样。在设计视图中,选择要作为电子邮件链接的文字或在设计视图中,选择要作为电子邮件链接的文字或将光标置于需要设置电子邮件链接的地方。将光标置于需要设置电子邮件链接的地方。选择菜单选择菜单“插入插入”“电子邮件链接电子邮件链接”命令,或单命令,或单击击“常用常用”插入栏中的插入栏中的“电子邮件链接电子邮件链接”按钮,将按钮,将打开打开“电子邮件链接电子邮件链接”对话框对话框“属性属性”面板窗口如图所示,也可以在文档窗口输入文字,面板窗口如图所示,也可以在文档窗口输入
31、文字,在属性窗口中修改链接的在属性窗口中修改链接的E-mail地址。地址。2.5插入图像插入图像图像格式的很多,但是能在网上使用的图像格式的很多,但是能在网上使用的只有只有3种:种:GIF、JPEG、PNG文件。文件。其中其中GIF和和JPEG图像格式在网上使用最图像格式在网上使用最广,能支持大多数浏览器。广,能支持大多数浏览器。2.5.1插入图像对象插入图像对象在在Dreamweaver中向网页文件插入图像,中向网页文件插入图像,Dreamweaver会自动生成该图像的路径引用,会自动生成该图像的路径引用,如果要是图像能够正确地在网页中显示,必须如果要是图像能够正确地在网页中显示,必须保证此
32、图像文件在当前的站点内。如果不在站保证此图像文件在当前的站点内。如果不在站点内,点内,Dreamweaver会提示是否将此图像复会提示是否将此图像复制到当前站点的文件夹中。制到当前站点的文件夹中。1插入单个图像对象插入单个图像对象选择要插入图像的位置,然后选择选择要插入图像的位置,然后选择“插入插入”“图像图像”命令,或者命令,或者单击单击“常用常用”插入栏中的插入栏中的“图像图像”“图像图像”按钮,按钮,在弹出的在弹出的“选择图像源文件选择图像源文件”对话框中,选择本地的图像文件对话框中,选择本地的图像文件。确定确定48示例示例1图像查看器图像查看器2.5.2设置图像属性设置图像属性在网页中
33、插入原始图像后,往往达不到想要的效果,这是在网页中插入原始图像后,往往达不到想要的效果,这是就需要对图像进行相关的设置。打开文档,选中要修改的就需要对图像进行相关的设置。打开文档,选中要修改的图像,然后在属性面板中改变图像属性图像,然后在属性面板中改变图像属性2.6插入多媒体对象插入多媒体对象随着家庭多媒体设备的迅速普及以及网络随着家庭多媒体设备的迅速普及以及网络带宽的逐步加大,多媒体在网络中迅速传带宽的逐步加大,多媒体在网络中迅速传播开来。播开来。现在可以加载到网页的多媒体格式主要有现在可以加载到网页的多媒体格式主要有声音文件(声音文件(mp3、wav、mid、au、wma)和视频文件()和
34、视频文件(avi、asf、mpeg、wmv)等。)等。2.6.1插入插入Flash文本文本Flash文本就是包含文本的动画,在其中可以设置文本就是包含文本的动画,在其中可以设置字体、字号、颜色和链接等,并能响应鼠标事件。字体、字号、颜色和链接等,并能响应鼠标事件。插入插入Flash文本的步骤如下:文本的步骤如下:p(1)将光标定位在要插入)将光标定位在要插入Flash文本的位置。文本的位置。p(2)选择)选择“插入插入”“媒体媒体”“Flash文本文本”命令,命令,或者单击或者单击“常用常用”插入栏中的插入栏中的“媒体媒体”“APPLET”按钮旁的下拉列表中选择按钮旁的下拉列表中选择“Flas
35、h文本文本”命令。打开命令。打开“插入插入Flash文本文本”对话框。对话框。p(3)输入文字及进行设置输入文字及进行设置2.6.2插入插入Flash按钮按钮选选择择“插插入入”“媒媒体体”“Flash按按钮钮”命命令令,或或者者单单击击“常常用用”插插入入栏栏中中的的“媒媒体体:APPLET”按按钮钮旁旁的的下下拉拉按按钮钮,选选择择下下拉拉列列表表中中的的“Flash按按钮钮”选选项项,将将打打开开“插入插入Flash按钮按钮”对话框,对话框,2.6.3插入插入Flash动画动画选选择择“插插入入”“媒媒体体”“Flash”命命令令,或或者者单单击击“常常用用”插插入入栏栏中中的的“媒媒体
36、体”“APPLET”按按钮钮旁旁的的下下拉拉按按钮钮,选选择择下下拉拉列列表表中中的的“Flash”选选项项,将将打打开开“选选择择文文件件”对话框。对话框。2.6.4插入声音插入声音声音是多媒体网页的重要组成部分。当前存在着声音是多媒体网页的重要组成部分。当前存在着一些不同类型的声音文件和格式,也有不同的方一些不同类型的声音文件和格式,也有不同的方法将这些声音添加到法将这些声音添加到Web页中。页中。由于网络的声音文件的格式非常多,常用的有由于网络的声音文件的格式非常多,常用的有MIDI、WAV、AIF、MP3和和RA等。用户在使用这等。用户在使用这些格式的文件时,需要加以区别。些格式的文件
37、时,需要加以区别。很多浏览器不用插件也可以支持很多浏览器不用插件也可以支持MIDI、WAV和和AIF格式的文件,而格式的文件,而MP3和和RM格式的声音文件则格式的声音文件则需要专门的插件支持浏览器才能播放。需要专门的插件支持浏览器才能播放。1常用声音格式常用声音格式各种格式的声音文件介绍如下:各种格式的声音文件介绍如下:(1)MID(或(或MIDI,MusicalInstrumentDigitalInterface的简的简称)是一种乐器声音格式,它能够被大多数浏览器支持,并不需称)是一种乐器声音格式,它能够被大多数浏览器支持,并不需要插件。要插件。(2)WAV(WaveformExtensi
38、on)格式的文件具有较高的声)格式的文件具有较高的声音质量,能够被大多数浏览器支持,并不需要插件。音质量,能够被大多数浏览器支持,并不需要插件。(3)AIF(或(或AIFF,AudioInterchangeFileFormat的简称),的简称),也具有较高的质量,和也具有较高的质量,和WAV声音很相似。声音很相似。(4)MP3(MotionPictureExpertsGroupAudio或或MPEG.AudioLayer3的简写)是一种压缩格式的声音,文件大小的简写)是一种压缩格式的声音,文件大小比比WAV格式明显缩小。其声音品质非常好,格式明显缩小。其声音品质非常好,(5)RA(或(或RAM
39、)、)、RPM和和RealAudio,这种格式具有非常,这种格式具有非常高的压缩程度,文件大小小于高的压缩程度,文件大小小于MP3。能够快速下载和传播,同时。能够快速下载和传播,同时支持流媒体技术,不过在听之前要先下载支持流媒体技术,不过在听之前要先下载RealPlayer程序。程序。2插入声音插入声音(1)链接到音频文件)链接到音频文件首先选择要用来指向声音文件链接的文本或图像,然后在首先选择要用来指向声音文件链接的文本或图像,然后在属性面板的属性面板的“链接链接”文本框中输入声音文件地址,或者用文本框中输入声音文件地址,或者用指向箭头指向所选文件,也可以单击后面的指向箭头指向所选文件,也可
40、以单击后面的“选择文件选择文件”图标直接选择文件。图标直接选择文件。(2)嵌入声音文件)嵌入声音文件如果想要将声音作背景音乐,或者想要对声音演示本书进如果想要将声音作背景音乐,或者想要对声音演示本书进行更多的控制,则可以嵌入文件。行更多的控制,则可以嵌入文件。选择选择“插入插入”“媒体媒体”“插件插件”命令或选择命令或选择“常用常用”插入栏中插入栏中“媒体媒体”,再单击插件图标,打开,再单击插件图标,打开“选择文件选择文件”对话框,进行选择。对话框,进行选择。2.7用表格布局页面用表格布局页面布局布局:就是在页面上划分出不同的区域,按照设计的就是在页面上划分出不同的区域,按照设计的原则和方法,
41、把不同的内容放置到不同的位置上,并原则和方法,把不同的内容放置到不同的位置上,并通过色彩调和出不同的网站基调,使网页内容形成一通过色彩调和出不同的网站基调,使网页内容形成一个有机的整体,充分表达网站主题的过程。个有机的整体,充分表达网站主题的过程。布局的方法布局的方法:表格表格、层、框架、层、框架利用表格布局:利用表格布局:在插入面板中选择在插入面板中选择“常用常用”标签,标签,点击按钮,弹出点击按钮,弹出“插入表格插入表格”对话框,设置相应的对话框,设置相应的参数来插入表格。也可以通过选择参数来插入表格。也可以通过选择“【插入】【插入】【表【表格】格】”菜单命令打开菜单命令打开“插入表格插入
42、表格”对话框。对话框。2.7.1插入表格插入表格“插入表格插入表格”对话框对话框l行数:新插入的表格的行数,行数:新插入的表格的行数,可以更改数值来确定行数。可以更改数值来确定行数。l列数:新插入的表格的列数,列数:新插入的表格的列数,可以更改数值来确定列数,行、可以更改数值来确定列数,行、列数控制表格划分的区域个数列数控制表格划分的区域个数(行(行列)。列)。l表格宽度:表格的宽度可以选表格宽度:表格的宽度可以选择是占页面宽度的百分比(单择是占页面宽度的百分比(单位为百分比)或者固定尺寸位为百分比)或者固定尺寸(单位为像素)。(单位为像素)。l边框粗细:表格的边界宽度,单位为像素,表格的属性
43、设边框粗细:表格的边界宽度,单位为像素,表格的属性设置中将详细讲解边框、填充值和间距值的区别。置中将详细讲解边框、填充值和间距值的区别。l单元格边距:单元格边框和单元格内容的间隔距离。单元格边距:单元格边框和单元格内容的间隔距离。l单元格间距:单元格和单元格之间的间隔距离。单元格间距:单元格和单元格之间的间隔距离。l页眉:把表格的第一行或第一列作为标题行或标题列。页眉:把表格的第一行或第一列作为标题行或标题列。作为标题行或标题列的行或列的内容将以粗体的形式显示。作为标题行或标题列的行或列的内容将以粗体的形式显示。l标题:提供一个显示在表格外的表格标题。标题:提供一个显示在表格外的表格标题。l对
44、齐标题:指定表格标题相对于表格的显示位置。对齐标题:指定表格标题相对于表格的显示位置。l摘要:给出表格的说明。该文本不会显示在用户的浏览器摘要:给出表格的说明。该文本不会显示在用户的浏览器中。中。2.7.2设置表格属性设置表格属性(1)“表格表格Id”是表格的是表格的ID,有,有时动态时动态更改表格属性更改表格属性时时要用到它。要用到它。(2)“行行”和和“列列”是表格中行和列的数目。是表格中行和列的数目。(3)“宽宽”和和“高高”是表格的是表格的宽宽度和高度,以像素度和高度,以像素为单为单位或者是按位或者是按占占浏览浏览器窗口器窗口宽宽度的百分比度的百分比计计算的。算的。(4)“填充填充”是
45、是单单元格内容和元格内容和单单元格元格边边界之界之间间的像素数。的像素数。(5)“间间距距”是相是相邻邻的的单单元格之元格之间间的像素数。的像素数。(6)“对齐对齐”指表格相指表格相对对于同一段落中其他元素(如文本或于同一段落中其他元素(如文本或图图像)像)的的显显示位置。居左、居中示位置。居左、居中还还是居右。是居右。(7)“边框边框”指表格边框的宽度(以像素为单位)指表格边框的宽度(以像素为单位)(8)“清除列宽清除列宽”按钮按钮 和和“清除行高清除行高”按钮按钮 是清除表格中是清除表格中所有显示指定的行高和列宽值。所有显示指定的行高和列宽值。(9)“将表格宽度转换成像素将表格宽度转换成像
46、素”和和“将表格高度转换成像素将表格高度转换成像素”按按钮钮是将表格中列的宽度或高度设置为以像素为单位的当前数值。是将表格中列的宽度或高度设置为以像素为单位的当前数值。(10)“将表格宽度转换成百分比将表格宽度转换成百分比”和和“将表格高度转换成百分将表格高度转换成百分比比”按钮按钮是将表格中列的宽度或高度设置为按占文档窗口宽度百分是将表格中列的宽度或高度设置为按占文档窗口宽度百分比表示的当前宽度。比表示的当前宽度。(11)“背景颜色背景颜色”指定表格的背景颜色。指定表格的背景颜色。(12)“边框颜色边框颜色”指定表格的边框颜色。指定表格的边框颜色。(13)“背景图像背景图像”指定表格的背景图
47、像。指定表格的背景图像。2.7.3设置单元格属性设置单元格属性选中一个单元格选中一个单元格选中一行选中一行选中一列选中一列选中不相邻的单元格选中不相邻的单元格(Ctrl)插入删除行和列(鼠标右键插入删除行和列(鼠标右键“表格表格”选项)选项)(1)“合并单元格合并单元格”按钮按钮 可将所选的多个连续单元格、行或可将所选的多个连续单元格、行或列合并为一个单元格。列合并为一个单元格。(2)“拆分单元格拆分单元格”按钮按钮 可将一个单元格分成两个或是更多可将一个单元格分成两个或是更多的单元格。单击该按钮,会打开的单元格。单击该按钮,会打开“拆分单元格拆分单元格”对话框,如图对话框,如图 所示。在该对
48、话框中可以选择将选中的单元格拆分成所示。在该对话框中可以选择将选中的单元格拆分成“行行”或或“列列”(3)“水平水平”文本框:文本框:设置单元格设置单元格内对象内对象的水平对齐方式。的水平对齐方式。(4)“垂直垂直”文本框:文本框:设置单元格设置单元格内对象内对象的垂直对齐方式。的垂直对齐方式。(5)“宽宽”和和“高高”文本框:文本框:设置单元格的宽度和高度,可以用设置单元格的宽度和高度,可以用像素或百分比来表示。像素或百分比来表示。(6)“不换行不换行”复选框:复选框:设置单元格文本是否换行。如果选择该设置单元格文本是否换行。如果选择该复选框,则当输入的数据超出单元格宽度时,单元格会自动调整
49、宽复选框,则当输入的数据超出单元格宽度时,单元格会自动调整宽度来容纳数据。度来容纳数据。(7)“标题标题”复选框:复选框:如果选择该复选框,可以将所选单元格的如果选择该复选框,可以将所选单元格的格式设置为表格标题单元格。默认情况下,表格标题单元格的内容格式设置为表格标题单元格。默认情况下,表格标题单元格的内容为为粗体并且居中对齐。粗体并且居中对齐。(8)“背景背景”文本框:文本框:设置单元格的背景图像。设置单元格的背景图像。(9)“背景颜色背景颜色”文本框:文本框:设置单元格的背景颜色。设置单元格的背景颜色。(10)“边框边框”文本框:文本框:设置单元格边框的颜色设置单元格边框的颜色。65插入
50、音频对象与插入插入音频对象与插入JavaApplet插入插件(音频、视频、插入插件(音频、视频、Flash)插入插入JavaApplet示例示例JavaApplet.htm2.9用框架布局网页用框架布局网页框架的作用就是把浏览器窗口划分为几框架的作用就是把浏览器窗口划分为几个不同的区域,每个区域显示不同的网个不同的区域,每个区域显示不同的网页。页。2.9.1框架和框架集框架和框架集常见的框架方式是将左方区域或上方区域设置为常见的框架方式是将左方区域或上方区域设置为目录区域目录区域,其中包含,其中包含显示文件各个页面的目录索引或导航条。右方区域或下方区域为显示文件各个页面的目录索引或导航条。右方