WDF(9)

 

教学内容

       

PPT1——

 

首先，需要说明一点的是：Dreamweaver和Expression Web都是专业的网页设计工具，使用它们之前应该掌握基本的像HTML、CSS等相关知识，这样才能充分挖掘这些软件的潜力，最大程度地提高工作效率。

 

如果你对我们前面8次课所讲的元素名与属性对不熟悉的话，请务必好好回头复习，那些内容其实非常简单，只是需要记忆的东西比较多而已。

 

 

PPT2——

 

这个专题包括三个部分：首先，我们会简要介绍一下DW这个专业的网页设计工具；然后我们会把前面讲过的元素都使用Dreamweaver做一遍，一方面加深大家的印象，另一方面熟悉如何使用可视化的手段制作网页；最后，会给出一些关于使用Dreamweaver做简单网页的实例。

 

 

PPT3——

 

这些文字摘自Dreamweaver的培训说明，我们来看一下原来的Macromedia公司是如何介绍自己的这个产品的。

 

注意：是专业的。代码环境的驾驭感。

 

三剑客：Dreamweaver、Fireworks和Flash。

 

 

PPT4——

 

强调资源与工具的易用性。

 

支持动态网页编程。

 

 

PPT5——

 

这个专题会涉及到两个Dreamweaver的版本：DW4和DW8。因为我们前面学习的一些元素在DW8中已经不推荐使用了，在DW4中才能演示出相应的效果。

 

 

PPT6——

 

这是DW8的工作区，它的工作区和我们平常使用的微软系列软件稍微有所不同：

 

“插入”栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码（由一个或多个HTML元素组成），允许你在插入它时设置不同的属性。例如，你可以在“插入”栏中，单击“表格”按钮，插入一个表格。如果你愿意，可以不使用“插入”栏而使用“插入”菜单插入对象。

 

“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。

 

“文档”窗口显示你当前创建和编辑的文档。

 

属性检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。在“编码器”工作区布局中，属性检查器默认是不展开的。

 

标签选择器位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。

 

面板组是组合在一个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题栏左边缘的手柄。

 

其中，我们现在会讲到的最重要的部分是“插入”栏和属性检查器，大家现在就要记住这两个部分指的是什么，等一会我们在网页中插入元素、设置属性的时候会频繁使用到这两个部分里面的一些命令、选项或按钮。

 

 

PPT7——

 

为了保证Dreamweaver对网页中包括超级链接、图片路径等的快捷处理，建议：在“新建网页”操作后立即进行“保存网页”操作，这两个操作都是由“文件”菜单的子菜单来完成的。

 

“文件”→“新建”菜单会弹出一个对话框，暂时我们选择的类别是“基本页”、“基本页”的下级类别是HTML，文档类型为“无”。

 

注意这几个菜单“文件”→“保存”、“文件”→“另存为”、“文件”→“打开”。

 

 

PPT8——

 

我们知道一个最简合法HTML文档要包含的元素有html, head, title和body，DW会自动为一个新建的网页生成这些元素。

 

有这样三种方法在DW4（注意是DW4）中插入元素b和i，也就是说有三种方法在DW4中增加黑体字和斜体字。DW8中也有这些操作，但是不会在网页中插入元素b和i，等一会我们马上会讲到。

 

我们在DW4中和DW8中直接设置字体颜色带来的代码结果是不同的，DW4会插入一个font元素，而DW8默认会为字体生成一个样式。注意font元素的三个重要属性face, size和color在DW中的体现。

 

 

PPT9——

 

tt, code, kbd, u, s的设置方法都一样。

 

在DW8中，没有b和i这两个元素，只有strong和em；DW4中这4个元素都有。那我们以后就要记住，尽量使用strong和em，而不是b和i。

 

我们讲到DW4只是在这几个地方用到，下面对DW的讲解还是用DW8。

 

 

PPT10——

 

上标、下标的设置比较麻烦，在DW4中甚至无法进行设置，这个时候我们不如直接切换到代码视图手写代码。

 

插入软换行的方式有三种，通常情况下我们使用最快捷的Shift + Enter方式。

 

 

PPT11——

 

简单内联元素已经全部使用DW演示完了，我们使用DW4来做一个实例。

 

 

PPT12——

 

对于特殊字符（也就是我们讲过的字符实体）的插入，我们可以使用菜单“插入”→“HTML”→“特殊字符”里面的一系列子菜单进行插入。

 

在DW的设计视图中，连击space键只能输入一个空格，要想输入多个空格的话只能插入字符实体 。

 

对于超级链接的设置，注意“链接”文本框后面的两个按钮。

 

命名锚链直接使用菜单“插入”→“命名锚记”插入。

 

 

PPT13——

 

图片插入后，注意相关属性的设置。

 

对于简单区块元素而言，基本上都和最典型的区块元素p的设置类似，而且一般情况下我们不需要为其设置属性。

 

注意：DW中元素的名称和我们讲过的元素中文名称可能有差别，这只是翻译的不同而已，需要知道这些不同的名称对应的到底是哪种元素。

 

 

PPT14——

 

hr使用菜单“插入”→“HTML”→“水平线”插入，在其属性检查器中不能为其设置颜色。

 

 

PPT15——

 

无序列表在DW中叫做“项目列表”，有序列表叫做“编号列表”，描述列表叫做“定义列表”。

 

默认情况下，单击列表按钮后，DW会自动生成第一个列表项目，而无需再次单击列表项目按钮。

 

对于列表type属性的设置是在属性检查器的扩展属性中进行的（单击属性检查器的倒三角按钮打开），选中一个列表项目后，单击“列表”项目按钮进行相关设定。

 

无序列表和有序列表的嵌套可以使用属性检查器上的“文本缩进”按钮进行。

 

 

PPT16——

 

注意图中选项和table属性的对应关系。

 

注意对于单元格属性的设置，需要使用“标签选择”选定<td>标签后进行。DW的一个缺陷在于无法设置caption元素显示在表格的下方，还是需要手工修改HTML代码。

 

 

PPT17——

 

插入表单元素前，尽量要先插入一个表单元素作为容器，否则DW也会提示你插入一个表单元素。

 

新建后的框架网页包含多个页面：框架集是一个单独的页面，每个框架中也分别包含一个页面，需要为它们指定相应的名称后全部保存。

 

教学重点

Dreamweaver与HTML元素

 



对应PPT下载