1、第 2章 Dream weaver网页设计技术 学习目标 u 面板组、插入菜单、属性面板的使用u 文本的格式化类型u 超链接的使用 u 用表格组织网页 u 框架、表单及层的使用 u 动态网页技术 1第 2章 Dream weaver网页设计技术教学内容 2.1 Dreamweaver基础知识2.2 创建及设计页面2.3 链接与导航2.4 用表格和表格布局模式布局页面2.5 用框架布局页面2.6 表单的使用2.7 层的使用2.8动态网页技术本章小结 返回总目录22.1 Dreamweaver基础知识返回目录Dreamweaver MX 2004工作界面 Dreamweaver 由Micromed
2、ia公司出品，是当今最流行的专业网页设计、网站管理、网页可视化编程应用软件。主要用于制作网站的静态网页，具有跨平台、跨浏览器的特点。左图为Dreamweaver MX 2004工作界面 。32.1 Dreamweaver基础知识 菜单栏返回 目录菜单栏“文件 ”菜单： 包含 “文件 ”菜单的标准菜单项。“编辑 ”菜单 ：包含 “编辑 ”菜单的标准菜单项。“查看 ”菜单 ：可以设置文档的各种视图。“插入 ”菜单 ：与 “插入 ”栏功能相似，用于向文档插入对象。“修改 ”菜单 ：可以更改选定项目的属性。“文本 ”菜单 ：用于设置文本的格式。“命令 ”菜单 ：提供对各种命令的访问。“站点 ”菜单 ：
3、提供用于管理站点、上传站点和下载文件的菜单项。“窗口 ”菜单 ：提供对 Dreamweaver 中的所有面板、检查器和窗口 的访问。在窗口菜单中可以设置面板的打开或关闭。“帮助 ”菜单 ：提供对 Dreamweaver 文档访问的帮助信息，在Dreamweaver中遇到的大部分问题都可以从 “帮助 ”菜单中找到答 案。42.1 Dreamweaver基础知识 插入栏单击 “插入 ”栏的下拉按钮，出现菜单方式的选项卡。可以根据 插入对象的不同选择不同类别的选项卡，不同选项卡 包含创建不同类型对象的按钮 。单击 “显示为制表符 ”可转为常规样式的 “插入 ”栏。图为插入 ”栏的两种显示方式：返回目
4、录“插入 ”栏的两种显示方式52.1 Dreamweaver基础知识 文档工具栏 文档工具栏如右图所示，包含按钮和弹出式菜单，提供各种 “文档 ”常用视图、各种查看选项和一些普通操作。文档工具栏内容从左到右依次为：代码视图 ：以代码的形式显示页面，方便文档代码编写。拆分视图 ：同时显示代码和设计视图，可同时看到两种效 果。设计视图 ：以设计形式显示视图，可看到所见即所得的网页效果。标题： 可在标题文本框中为文档输入或修改标题。服务器调试 ： 显示一个调试现行浏览器的报告。文件管理： 显示 “文件管理 ”弹出式菜单。在浏览器中预览 /调试 ：随时预览网页在浏览器中的效果。文档工具栏返回目录62.
5、1 Dreamweaver基础知识 文档窗口 文档窗口用于显示文档，有 “设计视图 ”、 “代码视图 ”、 “拆分试图 ”三种显示方式。设计视图： 用于可视化页面布局、可视化编辑和应用程序开发的设计环境，此视图类似在浏览器中查看页面。代码视图 ：用于编写或编辑 html、 JavaScript、服务器语言代码、其他类型代码的编码环境。拆分视图 ：可以在单个窗口中同时看到同一文档的 “代码 ”视图和 “设计 ”视图。返回目录72.1 Dreamweaver基础知识 属性面板属性面板属性面板用于显示和修改已选定对象的属性，可以对文本、图像、表格、层等进行属性设置。不同的对像对应不同的属性面板。打开
6、 “窗口 ”菜单 选 “属性 ”，可以显示或隐藏属性面板 返回目录82.1 Dreamweaver基础知识 面板组面板组 面板组在工作界面的右边，如图 所示。单击面板窗口左边的按钮，可展开或折叠整个面板窗口。单击每一个面板组左上方的按钮，可展开或折叠该面板组窗口。返回目录92.2 创建及设计页面 创建文档 1创建网页文件创建空白网页可以用两种方法：方法 1：在起始页 “创建新项目 ”列表中单击 “HTML”，建立一个空白 页。方法 2：在工作窗口打开 “文件 ”菜单 选 “新建 ”“ 类别 ”列表中选“基本页 ”“ 基本页 ”列表中选 “HTML” 单击 “创建 ”，建立一个空白页。2利用 D
7、reamweaver提供的示例文件创建网页“文件 ”菜单 “ 新建 ” 在 “类别 ”列表中选一种实例文档（如页面设计CSS） 在 “页面设计 CSS”列表中选一种网页样式 单击 “创建 ”，网页中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网页。 返回目录102.2 创建及设计页面 创建文档3保存新建立的网页“文件 ”菜单 “ 保存 ”指定保存位置、文件名及保存类型 单击 “保存 ”。4设置文档属性“修改 ”菜单 “ 页面属性 ”，打开 “页面属性 ”对话框，如图所示。通过 “页面属性 ”对话框可以对页面基本属性进行设置 。页面属性对话框返回目录112.2 创建及设计页面 设置文
8、本文本是网页元素中主要部分。1输入文本 在文档窗口单击，将插入点置于文档中所需位置，输入文本或插入其他网页元素。2设置文本格式文本格式的设置利用属性面板完成，属性面板可以对文字标题、字体字号、颜色、对齐方式、列表等作设置。 返回目录122.2 创建及设计页面 插入水平线水平线能将网页中不同功能的区域分割开来。插入水平线练习1.在页面单击鼠标确定水平线位置 “ 插入 ”菜单 “ 水平线 ”。2.选中水平线 在属性面板为水平线起名 “line-1”。3.宽度设为 200像素，高度为 10像素，若用 “百分比 ”作宽度单位，表示宽度占浏览器窗口的百分比。设置水平线在页面中的对齐方式为 “居中对齐 ”
9、。如图所示。插入水平线 返回目录132.2 创建及设计页面 使用 CSS样式样式是一系列预制的排版命令。 CSS（ Cascading Style Sheet 层叠式样式表）是一系列格式规则，包括对文字及段落的修饰，用于控制网页的外观，使整个站点中的网页格式保持统一，快速实现网页格式化。同一网页中样式按不同等级应用，手动 html格式覆盖css样式所应用的格式。样式表文件扩展名为 .CSS，是纯文本格式，可使用任何纯文本编辑器创建或打开样式表文件。建立样式表文件要依据 CSS规则，它由两部分组成： 选择器和声明 。选择器为样式名称，声明用于定义样式元素。 Dreamweaver提供创建样式表的
10、模板，可轻松创建出用户所需的样式表。返回目录142.2 创建及设计页面 使用 CSS样式1 创建 CSS样式表（ 1） “文件 ”菜单 “ 新建 ”（打开 “新建文档 ”对话框） 在 “类别 ”列表框中选择 “CSS样式表 ” 在右侧的列表框中选择一种样式表，通过预览框查看其效果。（ 2）单击 “创建 ”按钮打开样式表编辑页面，扩展名为 “.css”。（ 3） “文件 ”菜单 “ 保存 ” 下拉框中选择 “样式表（ *.css） ” 输入样式表名称 单击 “保存 ”按钮。2新建 CSS样式若对创建的模板样式不满意，还可以新建样式，步骤如下：（ 1）确定插入点，执行下面操作之一打开 “新建 CS
11、S样式 ”对话框。在 “CSS样式 ”面板中单击 “新建 CSS样式 ”按钮；在文本属性面板中选择 “样式 ” “ 管理样式 ” 新建；“文本 ”菜单 “CSS 样式 ”“ 新建 CSS样式 ”,对话框如图（新建 CSS样式）所示；返回目录152.2 创建及设计页面 使用 CSS样式（ 2）在 “名称 ”文本框中输入 新样式名。（ 3） “类型 ”区中提供 3种类型选择其中一项。（ 4）单击 “确定 ”按钮，出现 “新样式的 CSS样式定义 ” 对话框，在其中定义样 式的属性。（ 5）创建样式后，单击 “确定 ”按钮，该样式会出现 在样式表文本中。（ 6）单击 “文件 ”“ 保存 ”命令，保存
12、当前样式表文 件。 “新样式的 CSS样式定义 ”对话框如图 （ CSS样式定义）所示。 新建 CSS样式 CSS样式定义返回目录162.2 创建及设计页面 使用 CSS样式3样式表在网页中的应用（ 1）打开需要应用样式表的网页 “ 文本 ”菜单 CSS 样式 编辑样式表 在弹出的对话框中单击 “链接 ” 单击 “浏览 ” 选择刚创建的样式表 单击 “确定 ”回到 “编辑样式表 ”对话框 在列表中显示刚添加的样式表文件 单击 “完成 ”。（ 2）如果给标题套用刚创建的样式，方法为：将插入点置于 “ 类 ”所在的段落 “ 窗口 ”菜单 CSS 样式 在显示的 “CSS样式 ”面板中单击 “应用样
13、式 ”按钮 单击 “样式 ”。此样式将应用于当前段落。返回目录172.2 创建及设计页面 使用 CSS样式4修改样式若对已设置的样式中某些属性设置不满意，可以修改该样式。单击 “CSS样式 ”面板中的 “编辑样式 ”按钮 在列表中右击需要修改的样式名 快捷菜单中选择 “编辑 ”命令 在弹出的属性对话框中改动“样式 ”及 “大小 ”。5删除样式表“文本 ”菜单 CSS 样式表 弹出 “编辑样式表 ”对话框 在列表框中选中要删除的样式名 单击 “删除 ”按钮。6更改样式表单击 “编辑 ”按钮 完成用户对样式表更改 单击 “完成 ”按钮。返回目录182.2 创建及设计页面 插入图像Web页图像的格式
14、通常有三种： GIF 、 JPEG、 PNG。1插入图像在网页中插入图像可按以下操作进行：在文档窗口中单击以确定图像要插入的位置 “ 插入 ”菜单 “ 常用 ”类别中单击 “图像 ”图标旁的向下箭头 在弹出的菜单中选择 “图像 ” 弹出 “选择图像源文件 ”对话框（ “文件系统 ”用来选择图形文件， “数据源 ”用来选择动态图像源文件） 指定图像文件所在位置 从列表框选取所需的图像文件 单击 “确定 ” 。返回目录192.2 创建及设计页面 插入图像2编辑页面图像在 Dreamweaver 中可以直接编辑页面图像，包括改变大小、对齐方式、调整亮度和对比度、锐化图像等。 1）调整大小 单击页面中
15、的图像 鼠标移至调节柄处拖动（按 shift键保持图像比例不变），也可通过 “属性 ”面板输入 “高 ”和“宽 ”的具体数值来调整图像大小。2）设置图像的对齐方式选定图像 单击 “属性 ”面板中对齐按钮组中的一个使图像移至页面的左侧、右侧或居中。若既有文字又有图像，返回目录202.2 创建及设计页面 插入图像用 “属性 ”面板中 “对齐 ”下拉列表框来改变图像与文字的相互对齐方式。3）调整亮度 /对比度或锐化图像选择图像 单击图像属性面板中的 “亮度 /对比度 ” 拖动滑块进行调节 单击 “锐化 ” 改变图像锐度。返回目录212.3 链接与导航 文档位置和路径 每个网页都有一个惟一的地址，称为
16、统一资源定位器（ URL）。当创建本地链接时，通常指定一个起自当前文档或站点根文件夹的相对路径。连接路径有三种类型：1绝对路径： 提供所链接文档的完整 URL。2文档相对路径： 省略当前文档和所链接文档都相同的绝对 URL部分，只提供不同的路径部分。3站点根目录相对路径： 提供从站点文件夹到文档的 路径。返回目录222.3 链接与导航 链接到文档的常用方法超链接源通常采用文本和图像，链接目标通常为网页或文件，一般用 URL定义。一个文本超级链接只分配一个目标 URL地址。图像上的超级链接不能直接在浏览器中显示，访问时可利用鼠标指针判断包含超级链接的图像。图像超级链接可以用两种方式分配目标 RU
17、L：1整个图像作为一个超级链接。2图像分为多个热点，用热点作为图像上的超级链接区域。返回目录232.3 链接与导航 创建文本超链接使用属性面板的文件夹图标、链接文本框或 “点到文件 ”图标链接文档。方法如下：1文档窗口的 “设计视图 ”中选择文本或图像 。2属性面板的 “链接 ”框中填入要链接到的页面地址，最好用相对路径地址，也可以单击 “点到文件 ”图标，选取要链接到的文件，或用鼠标把本地站点文件列表中的文件直接拖到属性面板的 “链接 ”框中。3对 “目标 ”进行设置。 “目标 ”用来定义超链接被点击时链接到的页面视窗打开方式。目标后的下拉选框可不选，这时页面在原窗口中打开。返回目录242.
18、3 链接与导航 命名锚记链接命名锚记 用于在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些命名锚记的链接。 创建到命名锚记的连接过程分两步： 创建命名锚记 和创建到命名锚记的链接 。1创建命名锚记：将插入点置于要放置锚记的位置“ 插入 ”菜单 “ 命名锚记 ” 在 “锚记名称 ”框中输入锚记名字 单击 “确定 ”。在插入点即出现一个锚记。2创建锚记链接：选定要添加链接的文字 属性面板的 “链接 ”框中输入 “#”和锚记名字 回车确认。返回目录252.3 链接与导航 图像地图用一个图形的不同部位制作热点分别链接到不同页面，称为图像地图。分两步如下：1创建图像地图热点 图形
19、属性面板左下方有一项为地图，用它完成制作图像地图。在其后可填入映象名称，若不填，Dreamweaver会 自动加上一个名字。 “地图 ”下面有三个图标，从左到右依次为：截取矩形、截取圆形和截取不规则图形。用鼠标选中图形的某个区域，当鼠标拖出的选框与目标不重合时，可使用键盘上的方向箭头来调节。 2为热点指定链接选定要添加链接的热点，在热点属性面板中输入链接目标，在 “替代 ”框中输入提示性文字。返回目录262.4 用表格和表格布局模式布局页面 创建表格1. 将插入点置于网页中要插入表格的位置 “ 插入 ”菜单 “ 表格 ”，出现如图所示的 “插入表格 ”对话框。“行数 ”框 指定表格行数。“列数
20、 ”框 指定表格列数，“宽度 ”框 指定表格宽度。 “边框 ”框 指定表格边框线宽度。“单元格填充 ”框 指定表格中各单元格的内容与其边框之间的距离。“单元格间距 ”框 中指定表格的各单元格之间的距离。2. 设置完成后单击 “确定 ”按钮，便在当前网页中插入了表格。 插入表格对话框 返回目录272.4 用表格和表格布局模式布局页面 编辑表格1添加行或列：单击某单元格 “ 修改 ”菜单 “ 表格 ”“ 插入行 ”（或 “插入列 ”）。2删除行或列选定完整的行或列 “ 编辑 ”菜单 “ 清除 ”（或按 delete键）。3合并单元格或拆分单元格选取连续单元格 “ 修改 ”菜单 “ 表格 ”“ 合并
21、单元格 ”（或拆分单元格）。也可单击属性面板中 “合并单元格 ” 或 “拆分单元格 ”按钮。4改变单元格所跨的行或列的数目选定单元格 “ 修改 ”菜单 “ 表格 ”“ 增加行宽 ”（或 “增加列宽 ”）。选定单元格 “ 修改 ”菜单 “ 表格 ”“ 减少行宽 ”（或 “减少列宽 ”）。5使用剪切、复制、粘贴命令 对单个单元格或多个单元格进行操作，能保留单元格的格式设置。 返回目录282.4 用表格和表格布局模式布局页面 表格属性面板选定表格后，表格属性面板如图所示。可对表格属性面板中各选项进行设置。表格属性面板返回目录292.4 用表格和表格布局模式布局页面 用布局模式布局页面1绘制布局单元格绘制布局单元格步骤 : 1） “插入 ”栏中 “布局 ”选项卡当前 选 “布局视图 ”。2）单击 “绘制布局单元格 ”按钮。3）将鼠标指针移到页面上拖动创建布局单元格。如图绘制的单元格为蓝色的轮廓、白色的背景。布局单元格 返回目录30
