Dreamweaver相关知识

1、主讲人XXXDreamweaverDreamweaver相关知识相关知识 教学目标教学目标认识Dreamweaver 的工作区掌握创建和编辑网页的方法熟悉掌握使用Dreamweaver添加网页元素初识CSS 重点和难点重点和难点重点（1）使用Dreamweaver添加HTML元素（2）在Dreamweaver中加入CSS难点（1）CSS控制HTML元素样式（2）使用HTML控制文字、图片等网页元素 建议学时建议学时 建议学时：4学时建议学时建议学时1 1 认识认识DreamweaverDreamweaver的工作区：的工作区：（1 1）选择工作区）选择工作区 Dreamweaver的工作区布局

2、包括设计器和编码器两种，在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区；Dreamweaver 相关知识相关知识(2) (2) 设计器工作区布局设计器工作区布局 （1） 文档窗口用于显示当前创建或编辑的文档，有【代码】、【设计】和【拆分】3种视图模式。 （2）状态栏用于显示当前编辑的文档的状态。 （3）属性检查器用于查看和更改当前选定文本或其他对象的属性。 （4）控制面板主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。Dreamweaver 相关知识相关知识Dreamweaver 相关知识相关知识菜单栏文档窗口状态

3、栏属性检查器标题栏控制面板（3 3）自定义工作区布局）自定义工作区布局 1）显示/隐藏面板和工具栏。 2）自定义工具栏。 3）自由组合面板。Dreamweaver 相关知识相关知识（4 4）创建本地站点：）创建本地站点： 1）创建新站点 a）基本方式 在【管理站点】对话框中单击【新建】按钮，从弹出菜单中选择【站点】命令，弹出【站点定义为】对话框，在【基本】选项卡中进行设置。【站点定义为】对话框的【基本】选项卡Dreamweaver 相关知识相关知识b） 高级方式 在【站点定义为】对话框中单击【高级】标签，切换到【高级】选项卡，可进行自定义的站点设置。Dreamweaver 相关知识相关知识2

4、2 网页相关操作网页相关操作（1 1）网页的创建：）网页的创建： 应用空白文档创建页面使用命令创建选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中选择网页类别，在右侧的列表框中选择具体的页面类型，然后单击【创建】按钮。Dreamweaver 相关知识相关知识Dreamweaver 相关知识相关知识第3章 创建和编辑网页（2 2） 网页的命名原则：网页的命名原则： 1）文件名中只能包含小写的英文字母、数字和下划线。 2）文件名不能以数字开头。 3）不能在文件名中使用空格、标点符号或特殊字符。 4）主页的文件名称通常设定为“index”。 5）用尽量少的字符概括文件主旨，不要

5、过于冗长。Dreamweaver 相关知识相关知识（3 3）网页的保存：）网页的保存： 1）保存当前网页：选择【文件】|【保存】命令，弹出【另存为】对话框，打开所需站点文件夹，在【文件夹】文本框中输入网页名称，然后单击【保存】按钮。 2）保存已创建的所有页面：选择【文件】|【保存全部】命令。Dreamweaver 相关知识相关知识（4 4）打开已有文档：）打开已有文档：1）通过【打开】对话框打开文档 选择【文件】|【打开】命令，弹出【打开】对话框，选择所需的网页文档，单击【打开】按钮。Dreamweaver 相关知识相关知识 2）通过【文件】面板打开文档 显示【文件】面板，在面板左上方的【站点

6、】下拉列表框中选择保存网页的站点、服务器或驱动器，然后在文件和文件夹列表中双击所需网页文档的图标。Dreamweaver 相关知识相关知识（5 5）修改网页属性：）修改网页属性：1）外观属性指页面中文本的字体、字样、大小、颜色、 背景颜色和背景图像，以及页面边距的设置。2）链接属性指链接文本的字体、大小，链接文本的颜色，鼠标指针指向链接文本时的颜色，已访问过的链接文本的颜色，单击链接文本时的颜色，以及下画线的样式。3）标题属性指在网页中使用的默认字体库及最多6种标题 标签使用的字体大小和颜色。4）标题/编码属性指在文档窗口和大多数浏览器窗口的标题栏中出现的页面标题，以及文档中字符所用的编码。D

7、reamweaver 相关知识相关知识5）跟踪图像属性指在复制设计时作为参考的图像和跟踪图像的 透明度。【页面属性】对话框（a）链接Dreamweaver 相关知识相关知识(b) 标题Dreamweaver 相关知识相关知识(c) 标题/编码Dreamweaver 相关知识相关知识(d) 跟踪图像Dreamweaver 相关知识相关知识3 3 网页文本网页文本 （1）文本对象的添加（2）文本格式的设置（3）项目列表的应用（4）层叠样式表（CSS）的应用（5）查找与替换（6）拼写检查 Dreamweaver 相关知识相关知识（1 1）文本对象的添加：）文本对象的添加： 1 1）输入普通文本，换行

8、方式：）输入普通文本，换行方式： （a） 自动换行 （b） 硬换行 enter p （c） 软换行 shift+enter br2 2） 导入导入WordWord文档文档选择【文件】|【导入】|【Word文档】命令，弹出【导入Word文档】对话框，选择要导入的Word文档，单击【打开】按钮。Dreamweaver 相关知识相关知识3 3） 插入特殊字符插入特殊字符【文本】工具栏在【文本】工具栏中单击其右端的【字符】按钮 ，从弹出的下拉菜单中选择与所需字符相对应的命令。4 4）插入）插入HTMLHTML源代码源代码按Ctrl+T组合键，弹出快速标签编辑器，在编辑框中输入HTML标签后按Enter

9、键结束。Dreamweaver 相关知识相关知识（2 2）文本格式的设置）文本格式的设置1）设置字符格式（a）设置字体使用属性检查器中的【字体】下拉列表框。（b）设置字形使用属性检查器中的【粗体】和【斜体】按钮。（c）设置字号使用属性检查器中的【大小】下拉列表框。Dreamweaver 相关知识相关知识2）凸出与缩进使用属性检查器中的【文本凸出】和【文本缩进】按钮。3）改变文本颜色在属性检查器的【文本颜色】文本框中输入颜色代码或者单击拾色器按钮，在弹出的颜色调板中单击所需的颜色块。Dreamweaver 相关知识相关知识颜色调板Dreamweaver 相关知识相关知识（3 3）项目列表的应用：

10、）项目列表的应用：1）编号列表单击属性检查器中的【编号列表】按钮或选择【文本】|【列表】|【编号列表】命令，然后输入列表项目文本。按Enter键可创建其他列表项目，按两次Enter键可完成列表。创建中的编号列表Dreamweaver 相关知识相关知识2）项目符号列表单击属性检查器中的【项目列表】按钮或选择【文本】|【列表】|【项目列表】命令。项目符号列表Dreamweaver 相关知识相关知识4 CSS4 CSS样式的应用：样式的应用： 1 1）简介）简介a）可定义的规则类型1/自定义CSS规则（也称为“类样式”class）；2/HTML标签规则 p；3/CSS选择器规则（高级样式）id/ 伪类ab）所处位置外部外部CSSCSS样式表样式表；内部（或嵌入式）内部（或嵌入式）CSSCSS样式表样式表；内联样式内联样式( (行内行内样式样式) )。Dreamweaver 相关知识相关知识2）基本语法 单击【文档】工具栏中的【代码】按钮，切换到代码视图模式，从head中寻找style标识符凡在和标记之间包含的部分，就是定义的CSS样式。Dreamweaver 相关知识相关知识Dreamweaver 相关知识相关知识2 2）创建）创建自动生成CSS样式Dreamweaver可以根据用户的一系列操作自动生成CSS样式，并将该样式列在属性检查器