主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 第4章 Dreamweaver网页制作 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 本章学习内容 Dreamweaver CS3的操作界面 本地站点的创建与管理方法 文本、图像以及媒体对象插入HTML文档的方法及属性设置 创建文本、图像、热点、锚点及邮件超链接 CSS内部样式和外部样式表的创建与应用 用表格、层和框架来进行布局设计 Dreamweaver的内置行为 3 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 具体要求 掌握网页中各种超链接的创建方法 熟练使用CSS样式表来美化和布局页面 熟练使用表格、层和框架技术来布局页面 能在网页中创建所需的表单 会在网页中添加简单行为增加页面效果 4 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
4.1 Dreamweaver CS3网页制作基础 4.1.1 网页的元素 表格 多媒体动画 表单 文字 超链接 图像
4.1.2 Dreamweaver CS3的工作界面
菜单栏 插入工具栏 文档工具栏 浮动组合面板 文档编辑窗口 文档状态栏 属性面板
4.1.3 创建和管理站点 1.创建新站点 第2步 第3步 第4步 第5步 1.在菜单栏中选择【站点】→【新建站点】命令，弹出【站点定义】的【编辑文件】对话框。 第1步 第2步 第3步 第4步 2.单击【下一步】按钮，弹出【站点定义】的【编辑文件，第2部分】对话框。 第5步 3.选择本地编辑再上传文件的方式，以及本地网站文件目录。 4.连接远程服务器的方式，选择【无】。 5.配置完成后的站点信息。
2.站点管理 1）站点的重新配置。 【站点】→【管理站点】 【高级】选项 2）站点目录和文件管理。 新建目录 新建网页文件 移动或删除目录、文件
4.2 利用Dreamweaver CS3制作基本页面 4.2.1 文本的输入和编辑 1.在网页中添加文本的方法： 在编辑窗口直接输入 复制、粘贴文本 导入外部文本、数据 2.在网页中添加特殊字符： 3.设置文本属性：
4.2.2 插入和编辑图像 1.在网页中添加图像： 2.编辑图像： 1 2
4.2 利用Dreamweaver CS3制作基本页面 4.2.3 创建网页链接 1.文本与图像链接 文本链接的对象是文本，图像链接的对象是图像，不论是文本还是图像，建立链接的方法都是相同的。 2.锚记链接 锚记是文档中用于定位的一种特殊标记。利用锚记创建的超链接，可以快速而准确地跳转到目标位置。 3.电子邮件链接 在制作网页时，常写出E-mail信息并添加超链接，让访问者通过单击该超链接，即可书写并发送邮件。 4.热点链接 热点链接是为图像中的某区域创建超链接。 参见示例
4.3 使用表格和层来布局页面 4.3.1 基本的表格布局方法 1.插入表格 使用HTML表格对元素进行定位是创建网页布局的一种常用方法。 在菜单栏中选择【插入记录】→【表格】命令。 在【插入】工具栏的【常用】选项卡中，选择【表格】按钮。
2. 表格操作 3.设置表格属性 1）表格选择 选择整个表格 选择单个或多个行或列 选择单个或多个单元格 2）拆分、合并表格 3）表格嵌套 在原表格单元格内再插入表格，称为嵌套表格。 注意：一个网页中嵌套表格的层数不能超过3层，层数越多文件越大，因此在布局时应尽量采用较少的嵌套表格进行布局。 3.设置表格属性 设置表格属性（选择整个表格时） 设置单元格属性（选择单元格时）
4.3.2 使用层布局页面 1.创建AP Div 2.设置AP Div的属性
4.3.2 使用层布局页面 1.创建AP Div 2.设置AP Div的属性
4.4 Dreamweaver 中CSS的应用 4.4.1内部CSS样式的创建和应用 1.创建CSS样式表 2.CSS样式表应用 “类”下拉列表中选择需要的样式名称即可。
4.4.2 外部CSS样式的创建和应用 1.直接新建外部CSS样式表 创建外部样式表 创建本网页的内部样式表 <head> <title>无标题文档</title> <link href=“mycss.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .mystyle2 { font-family: "Times New Roman", Times, serif; font-size: 16px; } --> </style> </head> 创建外部样式表
2. 将当前文件中的样式导出为外部样式表文件 3. 附加并应用外部样式表文件 导出到已有外部CSS文件 导出到新外部CSS文件 链接格式： <link href=“/mycss.css" rel="stylesheet" type="text/css" /> 导入格式： @import url(“/mycss.css");
4.5 表单的应用 4.5.1 创建表单 1.创建表单 2.添加表单元素 表单元素 表单
4.6 网页模板、框架和库 4.6.2 框架的使用 1.创建框架网页 2.编辑框架 3. 设置框架属性 框架可以将浏览器窗口划分为多个独立的区域，每个区域显示不同的HTML文档， 常用于固定网页中的某些部分。 1.创建框架网页 新建文档时从框架集创建； 也可以把当前文档转换为框架文档： （参见操作实例） 2.编辑框架 选取框架 选取框架集： 拆分框架 3. 设置框架属性
4.7 行为的应用 4.7.1 行为面板 Dreamweaver提供了许多的行为动作，使用行为可以使网页具有动感效果。行为 都是基于JavaScript代码来实现的。 4.7.2 行为的添加 事件 动作 行为由事件和该事件触发的动作两部分组成。 动作是由预先写好的能够执行某种任务的JavaScript代码组成。 事件一般与用户的操作相关，如单击鼠标、按下键盘、鼠标移动等。 演示行为示例： 弹出信息 调用JavaScript 交换图像
CSS示例 CSS+Div进行页面布局 菜单效果 表格效果 图文布局
本章内容结束 谢谢！