第2章 Dream weaver网页设计技术 学习目标 ◆面板组、插入菜单、属性面板的使用 ◆文本的格式化类型 ◆超链接的使用 ◆用表格组织网页 框架、表单及层的使用 动态网页技术
1 第2章 Dream weaver网页设计技术 学习目标 u 面板组、插入菜单、属性面板的使用 u 文本的格式化类型 u 超链接的使用 u 用表格组织网页 u 框架、表单及层的使用 u 动态网页技术
返回总目录 第2章 Dream weaver网页设计技术 教学内容 2.1 Dreamweaver基础知识 2.2创建及设计页面 23链接与导航 24用表格和表格布局模式布局页面 25用框架布局页面 2.6表单的使用 2.7层的使用 28动态网页技术 本章小结
2 第2章 Dream weaver网页设计技术 教学内容 2.1 Dreamweaver基础知识 2.2 创建及设计页面 2.3 链接与导航 2.4 用表格和表格布局模式布局页面 2.5 用框架布局页面 2.6 表单的使用 2.7 层的使用 2.8动态网页技术 本章小结 返回总目录
返回目录 21 Dreamweaver基础知识 女R能0贴 IxXDreamweaver由 第用 回愚明回,,, 设计 Micromedia公司 代码 ×)应用程序 出品,是当今最 代码回拆分国设计标题:无标题文档 上标签检查器 流行的专业网页 文件 设计、网站管理、 桌面 管理站点 旧e桌面 网页可视化编程 号网上邻居 应用软件。主要 匙FTF應RIs服务器 于桌面项目 用于制作网站的 静态网页,具有 格式()庑样式)无 BIE 跨平台、跨浏览 字体@)默认体、大小(庑 器的特点。左图 「页面属性 为 Dreamweaver MX2004工作界 Dreamweaver mX2004工作界面 面 3
3 2.1 Dreamweaver基础知识 返回目录 Dreamweaver MX 2004工作界面 Dreamweaver 由 Micromedia公司 出品，是当今最 流行的专业网页 设计、网站管理、 网页可视化编程 应用软件。主要 用于制作网站的 静态网页，具有 跨平台、跨浏览 器的特点。左图 为Dreamweaver MX 2004工作界 面
返回目录 21 Dreamweaver基础知识菜单栏 菜单栏 “文件”菜单:包含“文件”菜单的标准菜单项 “编辑”菜单:包含“编辑”菜单的标准菜单项。 “查看”菜单:可以设置文档的各种视图。 “插入”菜单:与“插入”栏功能相似,用于向文档插入对象。 “修改”菜单:可以更改选定项目的属性 “文本”菜单:用于设置文本的格式 “命令”菜单:提供对各种命令的访问 站点”菜单:提供用于管理站点、上传站点和下载文件的菜单项 窗口”菜单:提供对 Dreamweaver中的所有面板、检查器和窗口 的访问。在窗口菜单中可以设置面板的打开或关闭 “帮助”菜单:提供对 Dreamweaver文档访问的帮助信息,在 Dreamweaver中遇到的大部分问题都可以从“帮助”菜 单 中找到答案
4 2.1 Dreamweaver基础知识—菜单栏 返回目录 菜单栏 “文件”菜单：包含“文件”菜单的标准菜单项。 “编辑”菜单：包含“编辑”菜单的标准菜单项。 “查看”菜单：可以设置文档的各种视图。 “插入”菜单：与“插入”栏功能相似，用于向文档插入对象。 “修改”菜单：可以更改选定项目的属性。 “文本”菜单：用于设置文本的格式。 “命令”菜单：提供对各种命令的访问。 “站点”菜单：提供用于管理站点、上传站点和下载文件的菜单项。 “窗口”菜单：提供对 Dreamweaver 中的所有面板、检查器和窗口 的访问。在窗口菜单中可以设置面板的打开或关闭。 “帮助”菜单：提供对 Dreamweaver 文档访问的帮助信息，在 Dreamweaver中遇到的大部分问题都可以从“帮助”菜 单 中找到答 案
返回目录 21 Dreamweaver基础知识插入栏 单击“插入”栏的下拉按钮 出现菜单方式的选项卡。 常用 可以根据插入对象的不同选 布局 表单 择不同类别的选项卡,不同选项 文本 卡包含创建不同类型对象的按 HTML 应用程序 钮。单击“显示为制表符”可转 F1元素 为 收藏 常规样式的“插入”栏。图为插 示为制符 入” 栏的两种显示方式: 插入常用布局「表单」文本「HTML应用程序「Fash元素「收藏夹 插入”栏的两种显示方式 5
5 2.1 Dreamweaver基础知识—插入栏 单击“插入”栏的下拉按钮， 出现菜单方式的选项卡。 可以根据插入对象的不同选 择不同类别的选项卡，不同选项 卡包含创建不同类型对象的按 钮。单击“显示为制表符”可转 为 常规样式的“插入”栏。图为插 入” 栏的两种显示方式： 返回目录 “插入”栏的两种显示方式
返回目录 21 Dreamweaver基础知识一文档工具栏 文档工具栏如右图所示, 回惆园舒计 包含按钮和弹出式菜单, 提供各种“文档”常用视图、各种查 文档工具栏 看选项和一些普通操作。文档工 具栏内容从左到右依次为: 代码视图:以代码的形式显示页面,方便文档代码编写 拆分视图:同时显示代码和设计视图,可同时看到两种效 果 设计视图:以设计形式显示视图,可看到所见即所得的网页 效果 标题: 可在标题文本框中为文档输入或修改标题 服务器调试 显示一个调试现行浏览器的报告。 文件管理 显示“文件管理”弹出式菜单。 在浏览器中预览/调试:随时预览网页在浏览器中的效果 6
6 2.1 Dreamweaver基础知识—文档工具栏 文档工具栏如右图所示， 包含按钮和弹出式菜单， 提供各种“文档”常用视图、各种查 看选项和一些普通操作。文档工 具栏内容从左到右依次为： 代码视图：以代码的形式显示页面，方便文档代码编写。 拆分视图：同时显示代码和设计视图，可同时看到两种效 果。 设计视图：以设计形式显示视图，可看到所见即所得的网页 效果。 标题： 可在标题文本框中为文档输入或修改标题。 服务器调试： 显示一个调试现行浏览器的报告。 文件管理： 显示“文件管理”弹出式菜单。 在浏览器中预览/调试：随时预览网页在浏览器中的效果。 文档工具栏 返回目录
返回目录 21 Dreamweaver基础知识一文档窗口 文档窗口用于显示文档,有“设计视图”、“代码视 氢”、“拆分试图”三种显示方式。 设计视图:用于可视化页面布局、可视化编辑和应用 程序开发的设计环境,此视图类似在浏览器中查看页面。 代码视图:用于编写或编辑htm、 JavaScript、服务 器语言代码、其他类型代码的编码环境 拆分视图:可以在单个窗口中同时看到同一文档的 “代码”视图和“设计”视图。 7
7 2.1 Dreamweaver基础知识—文档窗口 文档窗口用于显示文档，有“设计视图” 、 “代码视 图” 、 “拆分试图”三种显示方式。 设计视图：用于可视化页面布局、可视化编辑和应用 程序开发的设计环境，此视图类似在浏览器中查看页面。 代码视图：用于编写或编辑html、JavaScript、服务 器语言代码、其他类型代码的编码环境。 拆分视图：可以在单个窗口中同时看到同一文档的 “代码”视图和“设计”视图。 返回目录
返回目录 21 Dreamweaver基础知识—属性面板 属性面板用于 显示和修改已选定 对象的属性,可以 属性 对文本、图像、表 格式 样式〕无 格、层等进行属性 字体0体大民「 设置。不同的对像 页面性 对应不同的属性面 板。 打开“窗口” 属性面板 菜单→选“属性” 可以显示或隐藏属 性面板 8
8 2.1 Dreamweaver基础知识—属性面板 属性面板 属性面板用于 显示和修改已选定 对象的属性，可以 对文本、图像、表 格、层等进行属性 设置。不同的对像 对应不同的属性面 板。 打开“窗口” 菜单→选“属性” ， 可以显示或隐藏属 性面板 返回目录
返回目录 21 Dreamweaver基础知识一面板组 用设计 代码 面板组在工作界面的 应用程序 右边,如图所示。单击面 标签检查器 板窗口左边的按钮,可展 y文件 开或折叠整个面板窗口 文件资源 单击每一个面板组左上方 桌面 管理站点 的按钮,可展开或折叠该 日桌面 面板组窗口。 出我的电脑 号网上邻居 蹑真务 面板组 9
9 2.1 Dreamweaver基础知识—面板组 面板组 面板组在工作界面的 右边，如图 所示。单击面 板窗口左边的按钮，可展 开或折叠整个面板窗口。 单击每一个面板组左上方 的按钮，可展开或折叠该 面板组窗口。 返回目录
返回目录 22创建及设计页面一创建文档 1.创建网页文件 创建空白网页可以用两种方法 方法1:在起始页“创建新项目”列表中单击“HTML",建立一个 空白 页 方法2:在工作窗口打开“文件”菜单→选“新建”→“类别”列 表中选 “基本页”→“基本页”列表中选“HTML”→单击“创建”,建立一 个空白 页 2.利用 Dreamweaver提供的示例文件创建网页 文件”菜单→“新建”→在“类别”列表中选一种实例文档(如 页面设计 10cSS)→在“页面设计CSS”列表中选一种网页样式→单击“创建” 网页
10 2.2 创建及设计页面—创建文档 1．创建网页文件 创建空白网页可以用两种方法： 方法1：在起始页“创建新项目”列表中单击“HTML” ，建立一个 空白 页。 方法2：在工作窗口打开“文件”菜单→选“新建” → “类别”列 表中选 “基本页” → “基本页”列表中选“HTML” →单击“创建” ，建立一 个空白 页。 2．利用Dreamweaver提供的示例文件创建网页 “文件”菜单→ “新建” →在“类别”列表中选一种实例文档（如 页面设计 CSS）→在“页面设计CSS”列表中选一种网页样式→单击“创建” ， 网页 中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网 页。 返回目录