网页设计创建和编辑网页文档教案.ppt

《网页设计创建和编辑网页文档教案.ppt》由会员分享，可在线阅读，更多相关《网页设计创建和编辑网页文档教案.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、江西师范大学网页设计课程组网页设计创建和编辑网页文档 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望江西师范大学网页设计课程组3.13.1 创建一个新文档创建一个新文档创建一个新文档创建一个新文档3.23.2 文字处理文字处理文字处理文字处理3.3 3.3 图像处理图像处理图像处理图像处理3.4 3.4 超级链接超级链接超级链接超级链接3.5 3.5 使用多媒体对象使用多媒体对象使用多媒体对象使用多媒体对象第第3章章 创建和编辑网页文档创建和编辑网页文档 江西师范

2、大学网页设计课程组3.1.1 3.1.1 创建新的空白文档创建新的空白文档创建新的空白文档创建新的空白文档 在在在在Dreamweaver 8.0Dreamweaver 8.0中可以创建新的空白文档、创建以中可以创建新的空白文档、创建以中可以创建新的空白文档、创建以中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档。模板为基础的文档以及打开并编辑已经存在的文档。模板为基础的文档以及打开并编辑已经存在的文档。模板为基础的文档以及打开并编辑已经存在的文档。三种方法：三种方法：三种方法：三种方法：1 1、从启动界面中的从启动界面中的从启动界面中的从启动界面中的“创建新项目创建

3、新项目创建新项目创建新项目”组合框中选择合组合框中选择合组合框中选择合组合框中选择合适的文件类型，即可直接进入文档窗口进行编辑。适的文件类型，即可直接进入文档窗口进行编辑。适的文件类型，即可直接进入文档窗口进行编辑。适的文件类型，即可直接进入文档窗口进行编辑。2 2、也可选择主菜单中的、也可选择主菜单中的、也可选择主菜单中的、也可选择主菜单中的“文件文件文件文件”“新建新建新建新建”命令，系命令，系命令，系命令，系统弹出新建文档对话框。统弹出新建文档对话框。统弹出新建文档对话框。统弹出新建文档对话框。3 3、按下、按下、按下、按下Ctrl+NCtrl+N快捷键，系统弹出新建文档对话框。快捷键，

4、系统弹出新建文档对话框。快捷键，系统弹出新建文档对话框。快捷键，系统弹出新建文档对话框。3.1 3.1 创建一个新文档创建一个新文档创建一个新文档创建一个新文档江西师范大学网页设计课程组3.1.2 3.1.2 打开现有文档打开现有文档打开现有文档打开现有文档 在在在在DreamweaverDreamweaver8.08.0中可以打开现有的中可以打开现有的中可以打开现有的中可以打开现有的WebWeb页或基页或基页或基页或基于文本的文档，即使这些文档不是用于文本的文档，即使这些文档不是用于文本的文档，即使这些文档不是用于文本的文档，即使这些文档不是用DreamweaverDreamweaver8.

5、08.0创创创创建的也可以将其打开，然后利用建的也可以将其打开，然后利用建的也可以将其打开，然后利用建的也可以将其打开，然后利用DreamweaverDreamweaver8.08.0在在在在“设设设设计计计计”视图或视图或视图或视图或“代码代码代码代码”视图中编辑该文档。视图中编辑该文档。视图中编辑该文档。视图中编辑该文档。打开现有的文档有以下几种方法：打开现有的文档有以下几种方法：打开现有的文档有以下几种方法：打开现有的文档有以下几种方法：1.1.在在在在“文档文档文档文档”窗口中打开选择的文档窗口中打开选择的文档窗口中打开选择的文档窗口中打开选择的文档 2.2.导入导入导入导入WordW

6、ord文档文档文档文档 3.3.在资源管理器中打开文档在资源管理器中打开文档在资源管理器中打开文档在资源管理器中打开文档3.1 3.1 创建一个新文档创建一个新文档创建一个新文档创建一个新文档江西师范大学网页设计课程组3.1.3 3.1.3 设置页面属性设置页面属性设置页面属性设置页面属性 页面属性是指网页的一般属性信息，例如，网页标题、页面属性是指网页的一般属性信息，例如，网页标题、页面属性是指网页的一般属性信息，例如，网页标题、页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。网页背景颜色、背景图像、超链接颜色、跟踪图像等。网页背景颜色、背景图

7、像、超链接颜色、跟踪图像等。网页背景颜色、背景图像、超链接颜色、跟踪图像等。1.1.设置网页标题及编码设置网页标题及编码设置网页标题及编码设置网页标题及编码2.2.设置网页其他属性设置网页其他属性设置网页其他属性设置网页其他属性 (1)(1)外观外观外观外观 (2)(2)链接链接链接链接 (3)(3)跟踪图像跟踪图像跟踪图像跟踪图像3.1 3.1 创建一个新文档创建一个新文档创建一个新文档创建一个新文档江西师范大学网页设计课程组 文字处理主要包括：输入文字、设置文字大小、设置字体、文字处理主要包括：输入文字、设置文字大小、设置字体、文字处理主要包括：输入文字、设置文字大小、设置字体、文字处理主

8、要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。设置文本颜色、设置文本对齐方式等。设置文本颜色、设置文本对齐方式等。设置文本颜色、设置文本对齐方式等。3.2.1 3.2.1 输入文字输入文字输入文字输入文字 1 1输入文字：输入文字：输入文字：输入文字：打开打开打开打开Dreamweaver 8.0Dreamweaver 8.0之后，然后在需要插入文本的位之后，然后在需要插入文本的位之后，然后在需要插入文本的位之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。如果需要开始置单击鼠标左键定位插入点，然后输入文字。如果需要开始置单击鼠标左键定位插入点，

9、然后输入文字。如果需要开始置单击鼠标左键定位插入点，然后输入文字。如果需要开始新的一段，按新的一段，按新的一段，按新的一段，按键即可，对应的键即可，对应的键即可，对应的键即可，对应的HTMLHTML标签是标签是标签是标签是；如果想换行显示一段内容，可以按如果想换行显示一段内容，可以按如果想换行显示一段内容，可以按如果想换行显示一段内容，可以按组合键，组合键，组合键，组合键，对应的对应的对应的对应的HTMLHTML标签是标签是标签是标签是；如果输入的文字超出一行的范围，；如果输入的文字超出一行的范围，；如果输入的文字超出一行的范围，；如果输入的文字超出一行的范围，输入的文本将自动换行。输入的文本

10、将自动换行。输入的文本将自动换行。输入的文本将自动换行。3.2 3.2 文字处理文字处理文字处理文字处理江西师范大学网页设计课程组2 2输入连续空格输入连续空格输入连续空格输入连续空格 在在在在Dreamweaver 8.0Dreamweaver 8.0中一般只能输入一个空格，若要中一般只能输入一个空格，若要中一般只能输入一个空格，若要中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：输入连续的空格时，可以采用下面几种方法中的一种：输入连续的空格时，可以采用下面几种方法中的一种：输入连续的空格时，可以采用下面几种方法中的一种：执行菜单命令执行菜单命令执行菜单命令执行菜

11、单命令“编辑编辑编辑编辑/首选参数首选参数首选参数首选参数”，打开，打开，打开，打开“首选参数首选参数首选参数首选参数”对话框后，选定对话框后，选定对话框后，选定对话框后，选定“分类分类分类分类”栏中的栏中的栏中的栏中的“常规常规常规常规”选项，然后在右边选项，然后在右边选项，然后在右边选项，然后在右边编辑选项中勾选编辑选项中勾选编辑选项中勾选编辑选项中勾选“允许多个连续的空格允许多个连续的空格允许多个连续的空格允许多个连续的空格”复选框即可复选框即可复选框即可复选框即可。将光标定位到需要输入多个空格的位置，切换到代码视将光标定位到需要输入多个空格的位置，切换到代码视将光标定位到需要输入多个空

12、格的位置，切换到代码视将光标定位到需要输入多个空格的位置，切换到代码视图即图即图即图即HTMLHTML源文档中连续输入多个源文档中连续输入多个源文档中连续输入多个源文档中连续输入多个“ ”“ ”，或者单击插，或者单击插，或者单击插，或者单击插入工具栏文本分类中的入工具栏文本分类中的入工具栏文本分类中的入工具栏文本分类中的“字符字符字符字符”对象，弹出下拉菜单，选择对象，弹出下拉菜单，选择对象，弹出下拉菜单，选择对象，弹出下拉菜单，选择“不换行空格不换行空格不换行空格不换行空格”选项即可。选项即可。选项即可。选项即可。切换到中文输入法，设置为全角输入状态，然后在欲连切换到中文

13、输入法，设置为全角输入状态，然后在欲连切换到中文输入法，设置为全角输入状态，然后在欲连切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。续输入空格的位置按空格键。续输入空格的位置按空格键。续输入空格的位置按空格键。3 3输入特殊字符输入特殊字符输入特殊字符输入特殊字符3.2 3.2 文字处理文字处理文字处理文字处理-输入文字输入文字输入文字输入文字江西师范大学网页设计课程组3.2.2 3.2.2 编辑文字编辑文字编辑文字编辑文字1 1设置文字标题与段落设置文字标题与段落设置文字标题与段落设置文字标题与段落 设置文字段落与标题的方法基本相同，方法如下：设置文字段落与标题的

14、方法基本相同，方法如下：设置文字段落与标题的方法基本相同，方法如下：设置文字段落与标题的方法基本相同，方法如下：(1)(1)将光标定位到应用段落样式或文本样式的文本中，或将光标定位到应用段落样式或文本样式的文本中，或将光标定位到应用段落样式或文本样式的文本中，或将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。直接选取文本。直接选取文本。直接选取文本。(2)(2)单击属性面板中的格式选择框，在弹出的下拉列表中单击属性面板中的格式选择框，在弹出的下拉列表中单击属性面板中的格式选择框，在弹出的下拉列表中单击属性面板中的格式选择框，在弹出的下拉列表中选择选择选择选择“段落段落段落段落”或或

15、或或“标题标题标题标题”。切换到代码视图，我们就会发现，字符属性面板的切换到代码视图，我们就会发现，字符属性面板的切换到代码视图，我们就会发现，字符属性面板的切换到代码视图，我们就会发现，字符属性面板的“格格格格式式式式”列表框中的列表框中的列表框中的列表框中的“段落段落段落段落”、“标题标题标题标题1”1”、“标题标题标题标题2”2”、“标题标题标题标题3”3”、“标题标题标题标题4”4”、“标题标题标题标题5”5”、“标题标题标题标题6”6”和和和和“预先格式化的预先格式化的预先格式化的预先格式化的”等选项，等选项，等选项，等选项，分别对应分别对应分别对应分别对应HTMLHTML语言中的语

16、言中的语言中的语言中的、和和和和标记。标记。标记。标记。3.2 3.2 文字处理文字处理文字处理文字处理江西师范大学网页设计课程组2 2设置文字字体及大小设置文字字体及大小设置文字字体及大小设置文字字体及大小 (1)(1)设置字体设置字体设置字体设置字体 (2)(2)设置字号设置字号设置字号设置字号3 3设置文本颜色设置文本颜色设置文本颜色设置文本颜色4 4设置方本对齐方式设置方本对齐方式设置方本对齐方式设置方本对齐方式 3.2 3.2 文字处理文字处理文字处理文字处理-编辑文字编辑文字编辑文字编辑文字江西师范大学网页设计课程组3.2.3 3.2.3 插入水平线插入水平线插入水平线插入水平线

17、水平线对于组织信息很有用。在页面上，可以使用一条水平线对于组织信息很有用。在页面上，可以使用一条水平线对于组织信息很有用。在页面上，可以使用一条水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。或多条水平线以可视方式分隔文本和对象。或多条水平线以可视方式分隔文本和对象。或多条水平线以可视方式分隔文本和对象。1 1、插入水平线、插入水平线、插入水平线、插入水平线 将光标移到要插入水平线的位置，执行菜单将光标移到要插入水平线的位置，执行菜单将光标移到要插入水平线的位置，执行菜单将光标移到要插入水平线的位置，执行菜单“插入插入插入插入”“HTML”“HTML”“水

18、平线水平线水平线水平线”命令或者在命令或者在命令或者在命令或者在“插入插入插入插入”栏中，选择栏中，选择栏中，选择栏中，选择“HTML”“HTML”，然后单击，然后单击，然后单击，然后单击“水平线水平线水平线水平线”按钮，插入一条默认宽度和按钮，插入一条默认宽度和按钮，插入一条默认宽度和按钮，插入一条默认宽度和粗细的水平线。粗细的水平线。粗细的水平线。粗细的水平线。2 2、修改水平线、修改水平线、修改水平线、修改水平线 选定插入的水平线，打开属性面板，设置水平线的高度、选定插入的水平线，打开属性面板，设置水平线的高度、选定插入的水平线，打开属性面板，设置水平线的高度、选定插入的水平线，打开属性

19、面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性宽度、对齐方式以及是否有阴影等属性宽度、对齐方式以及是否有阴影等属性宽度、对齐方式以及是否有阴影等属性 3 3、设置水平线的颜色、设置水平线的颜色、设置水平线的颜色、设置水平线的颜色 选中水平线，然后单击属性面板中的快速标签编辑器按选中水平线，然后单击属性面板中的快速标签编辑器按选中水平线，然后单击属性面板中的快速标签编辑器按选中水平线，然后单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，键入代码，如将水平线设为红色，钮，打开编辑标签窗口，键入代码，如将水平线设为红色，钮，打开编辑标签窗口，键入代码，如将水平线设为红色，钮，打开编

20、辑标签窗口，键入代码，如将水平线设为红色，键入代码：键入代码：键入代码：键入代码：color=“red”color=“red”。3.2 3.2 文字处理文字处理文字处理文字处理江西师范大学网页设计课程组3.2.4 3.2.4 插入更新日期插入更新日期插入更新日期插入更新日期 DreamweaverDreamweaver提供了一个方便的日期对象，该对象使提供了一个方便的日期对象，该对象使提供了一个方便的日期对象，该对象使提供了一个方便的日期对象，该对象使用户可以以喜欢的格式插入当前日期，还可以选择在每次保用户可以以喜欢的格式插入当前日期，还可以选择在每次保用户可以以喜欢的格式插入当前日期，还可以

21、选择在每次保用户可以以喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。存文件时都自动更新该日期。存文件时都自动更新该日期。存文件时都自动更新该日期。1.1.插入日期、星期和时间插入日期、星期和时间插入日期、星期和时间插入日期、星期和时间 2.2.插入更新日期插入更新日期插入更新日期插入更新日期 3.3.修改日期修改日期修改日期修改日期 要修改网页中已插入的日期，有两种方法：要修改网页中已插入的日期，有两种方法：要修改网页中已插入的日期，有两种方法：要修改网页中已插入的日期，有两种方法：(1)(1)若没有勾选若没有勾选若没有勾选若没有勾选“储存时自动更新储存时自动更新储存时自

22、动更新储存时自动更新”，则直接手动修，则直接手动修，则直接手动修，则直接手动修改日期。改日期。改日期。改日期。(2)(2)若勾选了若勾选了若勾选了若勾选了“储存时自动更新储存时自动更新储存时自动更新储存时自动更新”，则选中日期后在，则选中日期后在，则选中日期后在，则选中日期后在属性面板中单击属性面板中单击属性面板中单击属性面板中单击 按钮，同样弹出按钮，同样弹出按钮，同样弹出按钮，同样弹出“插入日期插入日期插入日期插入日期”对话框，在其对话框，在其对话框，在其对话框，在其中编辑修改日期格式。中编辑修改日期格式。中编辑修改日期格式。中编辑修改日期格式。3.2 3.2 文字处理文字处理文字处理文字

23、处理江西师范大学网页设计课程组3.3.1 3.3.1 插入图像插入图像插入图像插入图像在在在在DreamweaverDreamweaver中插入图像的基本方法是：中插入图像的基本方法是：中插入图像的基本方法是：中插入图像的基本方法是：1 1将光标置于要插入图像的位置，在插入工具栏的将光标置于要插入图像的位置，在插入工具栏的将光标置于要插入图像的位置，在插入工具栏的将光标置于要插入图像的位置，在插入工具栏的“常用常用常用常用”类中单击类中单击类中单击类中单击“图像图像图像图像”按钮或选择按钮或选择按钮或选择按钮或选择“插入插入插入插入”菜单中的菜单中的菜单中的菜单中的“图像图像图像图像”命令，打

24、命令，打命令，打命令，打开开开开“选择图像源文件选择图像源文件选择图像源文件选择图像源文件”对话框。对话框。对话框。对话框。2 2在对话框中显示有图像文件名、文件类型和图像源的路径在对话框中显示有图像文件名、文件类型和图像源的路径在对话框中显示有图像文件名、文件类型和图像源的路径在对话框中显示有图像文件名、文件类型和图像源的路径URL(URL(每个网页都有一个唯一的地址，称作统一资源定位器即每个网页都有一个唯一的地址，称作统一资源定位器即每个网页都有一个唯一的地址，称作统一资源定位器即每个网页都有一个唯一的地址，称作统一资源定位器即URL)URL)。我们选取存放在站点中的图像文件，然后单击我们

25、选取存放在站点中的图像文件，然后单击我们选取存放在站点中的图像文件，然后单击我们选取存放在站点中的图像文件，然后单击【确定确定确定确定】按钮将显示按钮将显示按钮将显示按钮将显示“图像标签辅助功能属性图像标签辅助功能属性图像标签辅助功能属性图像标签辅助功能属性”对话框，在对话框，在对话框，在对话框，在“替代文本替代文本替代文本替代文本”和和和和“详细描述详细描述详细描述详细描述”文本框中输入内容，单击文本框中输入内容，单击文本框中输入内容，单击文本框中输入内容，单击“确定确定确定确定”按钮，即可将图片插入到指定按钮，即可将图片插入到指定按钮，即可将图片插入到指定按钮，即可将图片插入到指定区域。区

26、域。区域。区域。3 3如果所选择的图像文件不在用户设定的当前站点，则将打如果所选择的图像文件不在用户设定的当前站点，则将打如果所选择的图像文件不在用户设定的当前站点，则将打如果所选择的图像文件不在用户设定的当前站点，则将打开开开开“Macromedia Dreamweaver”“Macromedia Dreamweaver”对话框。提示是否将图像文件复对话框。提示是否将图像文件复对话框。提示是否将图像文件复对话框。提示是否将图像文件复制到根文件夹，单击【是】按钮，然后打开制到根文件夹，单击【是】按钮，然后打开制到根文件夹，单击【是】按钮，然后打开制到根文件夹，单击【是】按钮，然后打开“复制文件

27、为复制文件为复制文件为复制文件为”对话框，对话框，对话框，对话框，定位到站点中用于存放图像文件的文件夹定位到站点中用于存放图像文件的文件夹定位到站点中用于存放图像文件的文件夹定位到站点中用于存放图像文件的文件夹imagesimages，最后单击【保，最后单击【保，最后单击【保，最后单击【保存】按钮即可。存】按钮即可。存】按钮即可。存】按钮即可。3.33.3图像处理图像处理图像处理图像处理江西师范大学网页设计课程组3.3.2 3.3.2 设置图像属性设置图像属性设置图像属性设置图像属性 在网页中插入图像后可以对图像的各种相关属性进行设置，在网页中插入图像后可以对图像的各种相关属性进行设置，在网页

28、中插入图像后可以对图像的各种相关属性进行设置，在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：若要设置图像属性，请执行以下操作：若要设置图像属性，请执行以下操作：若要设置图像属性，请执行以下操作：1.1.图像名称及大小：使用缩略图下面的文本框设置名称，以图像名称及大小：使用缩略图下面的文本框设置名称，以图像名称及大小：使用缩略图下面的文本框设置名称，以图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用便在使用便在使用便在使用 Dreamweaver Dreamweaver 行为行为行为行为(如如如如“交换图像交换图像交换图像交换图像”)”)或脚本语

29、言或脚本语言或脚本语言或脚本语言(如如如如 JavaScript JavaScript 或或或或 VBScript)VBScript)时可以引用该图像。而缩略图右侧时可以引用该图像。而缩略图右侧时可以引用该图像。而缩略图右侧时可以引用该图像。而缩略图右侧标明了所插入图像的大小。标明了所插入图像的大小。标明了所插入图像的大小。标明了所插入图像的大小。2.2.宽和高宽和高宽和高宽和高:以像素为单位指定图像的宽度和高度。当您在页以像素为单位指定图像的宽度和高度。当您在页以像素为单位指定图像的宽度和高度。当您在页以像素为单位指定图像的宽度和高度。当您在页中插入图像时，中插入图像时，中插入图像时，中插入

30、图像时，Dreamweaver Dreamweaver 自动用图像的原始尺寸更新这自动用图像的原始尺寸更新这自动用图像的原始尺寸更新这自动用图像的原始尺寸更新这些文本框。在些文本框。在些文本框。在些文本框。在“宽宽宽宽”和和和和“高高高高”文本框中输入新值，实现图像大文本框中输入新值，实现图像大文本框中输入新值，实现图像大文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像小改变，但却与图像的实际宽度和高度不相符，若要恢复图像小改变，但却与图像的实际宽度和高度不相符，若要恢复图像小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击原始值，可单击原始

31、值，可单击原始值，可单击“宽宽宽宽”和和和和“高高高高”文本框右侧的文本框右侧的文本框右侧的文本框右侧的“恢复图像到原恢复图像到原恢复图像到原恢复图像到原始大小始大小始大小始大小”按钮重设大小。按钮重设大小。按钮重设大小。按钮重设大小。3.33.3图像处理图像处理图像处理图像处理江西师范大学网页设计课程组 3.3.源文件：指定图像的源文件。单击文件夹图标以浏览到源文件：指定图像的源文件。单击文件夹图标以浏览到源文件：指定图像的源文件。单击文件夹图标以浏览到源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者直接键入路径。源文件，或者直接键入路径。源文件，或者直接键入路径。源文件，或者直

32、接键入路径。4.4.链接：指定图像的超级链接。将链接：指定图像的超级链接。将链接：指定图像的超级链接。将链接：指定图像的超级链接。将“指向文件指向文件指向文件指向文件”图标拖图标拖图标拖图标拖到到到到“站点站点站点站点”面板中的某个文件，或单击文件夹图标浏览到站面板中的某个文件，或单击文件夹图标浏览到站面板中的某个文件，或单击文件夹图标浏览到站面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入点上的某个文档，或手动键入点上的某个文档，或手动键入点上的某个文档，或手动键入URLURL。5.5.对齐对齐对齐对齐:可以将图像与同一行中的文本、另一个图像、插可以将图像与同一行中的文本

33、、另一个图像、插可以将图像与同一行中的文本、另一个图像、插可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时，可由属件或其它元素对齐。当图像与图像在网页中对齐时，可由属件或其它元素对齐。当图像与图像在网页中对齐时，可由属件或其它元素对齐。当图像与图像在网页中对齐时，可由属性面板中的按钮、来确定，当图像与文本、插件或其它元性面板中的按钮、来确定，当图像与文本、插件或其它元性面板中的按钮、来确定，当图像与文本、插件或其它元性面板中的按钮、来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表素对齐时，可将图像视为一般字符，运用属性

34、面板中的列表素对齐时，可将图像视为一般字符，运用属性面板中的列表素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。来确定。来确定。来确定。3.33.3图像处理图像处理图像处理图像处理-设置图像属性设置图像属性设置图像属性设置图像属性江西师范大学网页设计课程组 6.6.替代：指定只显示文本的浏览器或已设置为手动下载替代：指定只显示文本的浏览器或已设置为手动下载替代：指定只显示文本的浏览器或已设置为手动下载替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中，图像的浏览器中代替图像显示的替代文本。在某些浏览器中，图像的浏览器中代替图像显示的替

35、代文本。在某些浏览器中，图像的浏览器中代替图像显示的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。当鼠标指针滑过图像时也会显示该文本。当鼠标指针滑过图像时也会显示该文本。当鼠标指针滑过图像时也会显示该文本。7.7.地图名称和热点工具：允许您标注和创建图像映射。地图名称和热点工具：允许您标注和创建图像映射。地图名称和热点工具：允许您标注和创建图像映射。地图名称和热点工具：允许您标注和创建图像映射。8.8.垂直边距和水平边距：沿图像的边缘添加边距垂直边距和水平边距：沿图像的边缘添加边距垂直边距和水平边距：沿图像的边缘添加边距垂直边距和水平边距：沿图像的边缘添加边距(以像以像以像以像

36、素为单位素为单位素为单位素为单位)。“垂直边距垂直边距垂直边距垂直边距”沿图像的顶部和底部添加边距。沿图像的顶部和底部添加边距。沿图像的顶部和底部添加边距。沿图像的顶部和底部添加边距。“水平边距水平边距水平边距水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得沿图像左侧和右侧添加边距。若图像和文字贴得沿图像左侧和右侧添加边距。若图像和文字贴得沿图像左侧和右侧添加边距。若图像和文字贴得太近，容易使人产生压迫感。因此，适当调整图像间边距可太近，容易使人产生压迫感。因此，适当调整图像间边距可太近，容易使人产生压迫感。因此，适当调整图像间边距可太近，容易使人产生压迫感。因此，适当调整图像间边距可以使

37、浏览者在浏览网页时更加舒适。以使浏览者在浏览网页时更加舒适。以使浏览者在浏览网页时更加舒适。以使浏览者在浏览网页时更加舒适。3.33.3图像处理图像处理图像处理图像处理-设置图像属性设置图像属性设置图像属性设置图像属性江西师范大学网页设计课程组 9.9.目标：指定链接的页应当在其中载入的框架或窗口。目标：指定链接的页应当在其中载入的框架或窗口。目标：指定链接的页应当在其中载入的框架或窗口。目标：指定链接的页应当在其中载入的框架或窗口。(当图像没有链接到其它文件时，此选项不可用。当图像没有链接到其它文件时，此选项不可用。当图像没有链接到其它文件时，此选项不可用。当图像没有链接到其它文件时，此选项

38、不可用。)当前框架当前框架当前框架当前框架集中所有框架的名称都显示在集中所有框架的名称都显示在集中所有框架的名称都显示在集中所有框架的名称都显示在“目标目标目标目标”列表中。列表中。列表中。列表中。也可选用下列保留目标名：也可选用下列保留目标名：也可选用下列保留目标名：也可选用下列保留目标名：_blank:_blank:将链接的文件载入一个未命名的新浏览器窗口中。将链接的文件载入一个未命名的新浏览器窗口中。将链接的文件载入一个未命名的新浏览器窗口中。将链接的文件载入一个未命名的新浏览器窗口中。_parent:_parent:将链接的文件载入含有该链接的框架的父框架集将链接的文件载入含有该链接的

39、框架的父框架集将链接的文件载入含有该链接的框架的父框架集将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件或父窗口中。如果包含链接的框架不是嵌套的，则链接文件或父窗口中。如果包含链接的框架不是嵌套的，则链接文件或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。加载到整个浏览器窗口中。加载到整个浏览器窗口中。加载到整个浏览器窗口中。_self:_self:将链接的文件载入该链接所在的同一框架或窗口中。将链接的文件载入该链接所在的同一框架或窗口中。将链接的文件载入该链接所在的同一框架或窗口中。将链接的文件载入该链接所在的同一框架

40、或窗口中。此为默认值。此为默认值。此为默认值。此为默认值。_top:_top:将链接的文件载入整个浏览器窗口中，因而会删除将链接的文件载入整个浏览器窗口中，因而会删除将链接的文件载入整个浏览器窗口中，因而会删除将链接的文件载入整个浏览器窗口中，因而会删除所有框架。所有框架。所有框架。所有框架。3.33.3图像处理图像处理图像处理图像处理-设置图像属性设置图像属性设置图像属性设置图像属性江西师范大学网页设计课程组 10.10.低解析度源：指定在载入主图像之前应该载入的图像。低解析度源：指定在载入主图像之前应该载入的图像。低解析度源：指定在载入主图像之前应该载入的图像。低解析度源：指定在载入主图像

41、之前应该载入的图像。11.11.边框边框边框边框:以像素为单位的图像边框的宽度。默认无边框。以像素为单位的图像边框的宽度。默认无边框。以像素为单位的图像边框的宽度。默认无边框。以像素为单位的图像边框的宽度。默认无边框。12.12.编辑：启动在编辑：启动在编辑：启动在编辑：启动在“外部编辑器外部编辑器外部编辑器外部编辑器”首选参数中指定的图像首选参数中指定的图像首选参数中指定的图像首选参数中指定的图像编辑器并打开选定的图像。编辑器并打开选定的图像。编辑器并打开选定的图像。编辑器并打开选定的图像。13.13.优化：打开优化：打开优化：打开优化：打开“优化优化优化优化”对话框对话框对话框对话框,使用

42、使用使用使用 Fireworks Fireworks优化图优化图优化图优化图像像像像。14.14.裁剪：修剪图像大小，删除不需要的区域。裁剪：修剪图像大小，删除不需要的区域。裁剪：修剪图像大小，删除不需要的区域。裁剪：修剪图像大小，删除不需要的区域。15.15.重新取样：对已调整大小的图像重新取样，提高图片重新取样：对已调整大小的图像重新取样，提高图片重新取样：对已调整大小的图像重新取样，提高图片重新取样：对已调整大小的图像重新取样，提高图片在新的大小和形状下的品质。在新的大小和形状下的品质。在新的大小和形状下的品质。在新的大小和形状下的品质。16.16.亮度和对比度：调整图像的亮度和对比度设

43、置。亮度和对比度：调整图像的亮度和对比度设置。亮度和对比度：调整图像的亮度和对比度设置。亮度和对比度：调整图像的亮度和对比度设置。17.17.锐化：调整图像的清晰度锐化：调整图像的清晰度锐化：调整图像的清晰度锐化：调整图像的清晰度。3.33.3图像处理图像处理图像处理图像处理-设置图像属性设置图像属性设置图像属性设置图像属性江西师范大学网页设计课程组3.3.3 3.3.3 插入图像占位符插入图像占位符插入图像占位符插入图像占位符 在在在在DreamweaverDreamweaver中插入图像占位符的基本操作：中插入图像占位符的基本操作：中插入图像占位符的基本操作：中插入图像占位符的基本操作：1

44、.1.将光标置于要插入图像占位符的位置，在插入工具栏的将光标置于要插入图像占位符的位置，在插入工具栏的将光标置于要插入图像占位符的位置，在插入工具栏的将光标置于要插入图像占位符的位置，在插入工具栏的“常用常用常用常用”分类中选择分类中选择分类中选择分类中选择“图像占位符图像占位符图像占位符图像占位符”按钮或选择按钮或选择按钮或选择按钮或选择“插入插入插入插入”菜单中的菜单中的菜单中的菜单中的“图像对图像对图像对图像对象象象象”中的中的中的中的“图像占位符图像占位符图像占位符图像占位符”命令，打开命令，打开命令，打开命令，打开“图像占位符图像占位符图像占位符图像占位符”对话框。对话框。对话框。对

45、话框。2.2.在对话框中进行设置：在对话框中进行设置：在对话框中进行设置：在对话框中进行设置：(1)(1)在在在在“名称名称名称名称”文本框中，输入要作为图像占位符的标签文字显文本框中，输入要作为图像占位符的标签文字显文本框中，输入要作为图像占位符的标签文字显文本框中，输入要作为图像占位符的标签文字显示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空格和高位不允许使用空格和高位不允许使用

46、空格和高位不允许使用空格和高位 ASCII ASCII 字符。字符。字符。字符。(2)(2)在在在在“宽度宽度宽度宽度”和和和和“高度高度高度高度”文本框中，以像素为单位键入数字以文本框中，以像素为单位键入数字以文本框中，以像素为单位键入数字以文本框中，以像素为单位键入数字以设置图像大小。设置图像大小。设置图像大小。设置图像大小。(3)(3)为图像占位符选择一种颜色，可以使用颜色选择器或直接输为图像占位符选择一种颜色，可以使用颜色选择器或直接输为图像占位符选择一种颜色，可以使用颜色选择器或直接输为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的十六进制值入颜色的十六进制值入颜色的十六

47、进制值入颜色的十六进制值(如如如如#FF0000)#FF0000)或输入网页安全色名称或输入网页安全色名称或输入网页安全色名称或输入网页安全色名称(如如如如 red)red)。(4)(4)在在在在“替代文本替代文本替代文本替代文本”中，为使用只显示文本的浏览器的访问者输中，为使用只显示文本的浏览器的访问者输中，为使用只显示文本的浏览器的访问者输中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。入描述该图像的文本。入描述该图像的文本。入描述该图像的文本。3 3单击单击单击单击“确定确定确定确定”。网页文档中即会出现图像占位符。网页文档中即会出现图像占位符。网页文档中即会出现图像占位符。网

48、页文档中即会出现图像占位符。3.33.3图像处理图像处理图像处理图像处理江西师范大学网页设计课程组 3.3.4 3.3.4 插入插入插入插入“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又图像时，图像变为另一幅图像；而鼠标指针离开时，图像又图像时，图像变为另一幅图像；而鼠标指针离开时，图像又图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原

49、始图像。这种效果通常用于导航条、图像互动等。恢复为原始图像。这种效果通常用于导航条、图像互动等。恢复为原始图像。这种效果通常用于导航条、图像互动等。恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，它由两幅图像组成，一是首次载入时显示的图像即原始图像，它由两幅图像组成，一是首次载入时显示的图像即原始图像，它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经二是鼠标经过后翻转的图像即鼠

50、标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小过图像时应使用相同大小的两幅图像；如果这两个图像大小过图像时应使用相同大小的两幅图像；如果这两个图像大小过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，不同，不同，不同，Dreamweaver Dreamweaver 将自动调整第二个图像的大小以匹配将自动调整第二个图像的大小以匹配将自动调整第二个图像的大小以匹配将自动调整第二个图像的大小以匹配第一个图像的属性。第一个图像的属性。第一个图像的属性。第一个图像的属性。3.33.3图像处理图像处理图像处理图像处理江西师范大学网页设计课程组 3.4.1 3.4.1