实训3 简单的页面操作.doc

实训三 简单的页面操作 实训目的和要求 一、实训目的 进一步熟悉Dreamweaver MX 2004工作环境。 掌握简单的页面操作。 二、实训要求 1．掌握网页的新建、打开、保存等操作方法。 2．了解操作HTML源文件的三种方法。 学会导入Word文件。 三、时间分配 2课时 四、环境要求 Dreamweaver MX 2004 五、内容提要 1．建立一个本地站点。 2．建立并导入一个Word文档。 3．分别用三种方法编辑简单的HTML源代码。 4．预览网页。 六、教学重点与难点: 1．建立并导入一个Word文档。 2．分别用三种方法编辑简单的HTML源代码。 实训内容与步骤 一、准备工作 在C盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb3。在此文件夹中新建一个Word文档，文件名为“wj1.doc”，内容如图3.1。 图3.1 Word文件内容 二、建立本地站点 用已学方法建立本地站点。 三、导入Word文件 1．在默认打开的新网页中，选择【文件】|【导入】中的“Word文档”命令，将开始建立的Word文档“wj1.doc”导入到网页中。 2．选择【命令】|【清理Word生成的HTML】命令，对导入的内容进行特殊处理，清除其中的冗余代码。 修改HTML源代码的预览效果 用方法一修改第一行文字效果。将光标定位在第一行文字的开始部分，然后单击文档工具栏中【代码】按钮或【拆分】按钮，以显示出网页源代码部分。在P后面添加定义文字大小的标签“font size=”+6” /font”并将被定义内容“天津电子信息职业技术学院”环绕住。如图3.3所示。 图3.3 定义第一行文字大小的代码及位置 用方法二修改第二行文字效果。单击，然后 【代码检查器】窗口中定义第二行文字为斜体的代码及位置 用方法三修改第三行文字效果。先选中第三行文本，然后选择【修改】|【快速标签编辑器】命令（或Ctrl+T快捷键），打开HTML快速标编辑器，Ctrl+T将快速标编辑器 【快速标编辑器hr ”； 第六行的标签代码为“h3 align=center天津电子信息职业技术学院/h3”。 四、保存网页 选择【文件】|【保存】命令，将此网页保存在站点中。 五、站点测试 按F12键在浏览器中预览，观察效果与样图是否一致。 ·4· 网页设计与制作实训 ·3· 实训三 简单的页面操作 代码区 对象列表框 过程列表框 代码区 对象列表框 过程列表框 代码区 对象列表框 过程列表框 代码区 对象列表框 过程列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 代码区 对代码区 对象列表框 过程列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 代码区 对代码区 对象列表框 过程列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 代码区 对代码区 对象列表框 过程列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 代码区 对代码区 对象列表框 过程列表框 工程/库选择框 搜索文字框 类列表框 成员列表框 过程列表框 过程列表 框 过程列表框 过程列表 框 过程列表框 过程列表 框 过程列表框 过程列表 框 工程 类列表框 成员列表框 工程/库选择框 搜索文字框 表框 工程 类列表框 成员列表框 工程/库选择框 搜索文字框 表框 工程 类列表框 成员列表框 工程/库选择框 搜索文字框 表框 工程 类列表框 成员列表框 工程/库选择框 搜索文字框 表框