第3章 用Dreamweaver CS4创建基本网页.ppt

机械工业出版社同名教材 配套电子教案 一 Dreamweaver CS4入门 二 制作简单网页 制作图文并茂网页 四 网页结构语言XHTML 五 实训 第3章 用Dreamweaver CS4创建基本网页 3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动 安装好Dreamweaver CS4后，单击“开始”→“程序”→“Adobe Dreamweaver CS4”命令。首先显示“工作区设置”对话框，如图3-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图3-2所示。在起始页对话框中可以选择“打开最近的项目”、“新建”或“主要功能”。 3.1 Dreamweaver CS4入门 图3-1 “工作区设置”对话框 图3-2 起始页 3.1.1 Dreamweaver CS4工作环境 2．Dreamweaver CS4的主工作区 Dreamweaver CS4的主工作区由文档工具栏、文档窗口、属性面板、插入面板和组合面板等部分组成，如图3-3所示。 3.1 Dreamweaver CS4入门 文档工具栏 文档窗口 属性面板 插入面板 组合面板 图3-3 Dreamweaver CS4的主工作区 3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图3-4所示。 3.1 Dreamweaver CS4入门 文件管理 可视化助理 验证标记 在浏览器中预览/调试 刷新设计视图 检查浏览器兼容性 显示代码视图 显示代码视图和设计视图 显示设计视图 显示实时视图 文档标题 图3-4 文档工具栏的常用命令和选项 3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应用程序开发，相应的面板也是这样分类的。 ① 设计类面板组 ② 文件类面板组 ③ 应用程序类面板组 3.1 Dreamweaver CS4入门 3.1.2 Dreamweaver CS4的参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 1．常规参数设置 2．新建文档参数设置 3.1 Dreamweaver CS4入门 3.1.2 Dreamweaver CS4的参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 3．站点参数设置 3.1 Dreamweaver CS4入门 3.2.1 创建网站站点 所谓站点，可以看做是一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 1．本地站点和远端站点 2．建立本地站点 3．指定站点首页 3.2 制作简单网页 3.2.1 创建网站站点 【案例综述】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。 【案例展示】本实例定义站点的名称为Sample，使用的本地文件夹为D:\web\dawn，默认的图像文件夹为D:\web\dawn\images。站点的设置如图3-16所示，站点结构如图3-17所示。 3.2 制作简单网页 3.2.2 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可以创建以下任意文档。 ? 新的空白文档或模板； ? 基于Dreamweaver附带的预设计页面布局文档； ? 基于现有模板的文档。 1．创建新文档 2．保存新文档 3.2 制作简单网页 3.2.3 页面属性设置 页面属性的设置包括页面的布局和格式设置。 1．设置网页标题 3.2 制作简单网页 3.2.3 页面属性设置 2．设置网页外观 3.2 制作简单网页 3.2.3 页面属性设置 3．设置网页链接 3.2 制作简单网页 3.2.3 页面属性设置 4．设置网页跟踪图像 3.2 制作简单网页 3.2.4 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1．网页基本元素 2．页面的简单