第3章 用Dreamweaver CS4创建基本网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作教程
(第4版）
机械工业出版社同名教材 配套电子教案
第3章 用Dreamweaver CS4创建基本网页
一 Dreamweaver CS4入门 二 制作简单网页 三 制作图文并茂网页 四 网页结构语言XHTML 五 实训
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动
插入面板
文档工具栏
文档窗口 组合面板
属性面板
图3-3 Dreamweaver CS4的主工作区
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速 切换：代码视图、设计视图、和拆分视图。文档工具栏中还包 含一些与查看文档、在本地和远程站点间传输文档有关的常用 命令和选项，如图3-4所示。
显示代码视图 显示代码视图和设计视图 显示设计视图 文件管理 可视化助理 验证标记
显示实时视图
文档标题 刷新设计视图 在浏览器中预览/调试
检查浏览器兼容性
图3-4 文档工具栏的常用命令和选项
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应 用程序开发，相应的面板也是这样分类的。 ① 设计类面板组
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．使用网页的基本元素设计一个简单的以健康为主题的网 页。
4．制作如图3-66所示的图文混排的网页。
② 文件类面板组
③ 应用程序类面板组
3.1 Dreamweaver CS4入门
3.1.2 Dreamweaver CS4 的参数设置 一般设置的参数有常规 参数、新建文档参数和 站点参数，这些都是开 始创建站点、设计网页 前需要考虑的因素。 1．常规参数设置 2．新建文档参数设置
3.1 Dreamweaver CS4入门
3.3 制作图文并茂网页
3.3.2 案例二：设计曙光大学校园风采网页 【案例综述】制作曙光大学校园风采页面，通过图文混排技术 展示学校的文化。 【案例展示】本例中的素材包括3幅校园文化图片，实例效果 如图3-55所示。
3.4 网页结构语言XHTML
3.4.1 XHTML简介 HTML是Hypertext Markup Language（超文本标记 语言）的缩写，是一种为普通文件中某些字句加上标识的语言， 其目的在于运用标记（tag）对文件达到预期的效果。它是构 成Web页面（Page），用来表示Web页面的符号标记语言。 HTML语言是建立网页的规范或标准，从它出现发展到现 在，规范不断完善，功能越来越强。但是依然有缺陷和不足， 人们仍在不断的改进它，使它更加便于控制和有弹性，以适应 网络上的应用需求。2000年，W3C组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进 的新语言，目的是基于XML应用。XHTML是一种增强了的 HTML，它的可扩展性和灵活性将适应未来网络应用更多的需 求。
3.2 制作简单网页
3.2.6 案例一：创建曙光大学学校概况页面 【案例综述】制作曙光大学学校概况页面，通过简单的页面制 作展示学校的基本情况。 【案例展示】本例中的素材包括4幅校园图片，实例效果如图 3-42所示。
3.3 制作图文并茂网页
3.3.1 图文混排 图文混排技术是指设置图像与同一行中的文本、图像、 插件或其它元素的对齐方式，方法是： 在设计视图中选择图像，在属性面板中使用“对齐”弹出 菜单设置该图像的对齐属性。
图3-1 “工作区设置”对话框
图3-2 起始页
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 2．Dreamweaver CS4的主工作区 Dreamweaver CS4的主工作区由文档工具栏、文档窗口、 属性面板、插入面板和组合面板等部分组成，如图3-3所示。
1．本地站点和远端站点
2．建立本地站点 3．指定站点首页
3.2 制作简单网页
3.2.1 创建网站站点
【案例综述】建立一个本地站点，定义站点名称和站点使用的本地 根文件夹及默认的图像文件夹。 【案例展示】本实例定义站点的名称为Sample，使用的本地文件夹为 D:\web\dawn，默认的图像文件夹为D:\web\dawn\images。站点 的设置如图3-16所示，站点结构如图3-17所示。
安装好Dreamweaver CS4后，单击“开始”→“程 序”→“Adobe Dreamweaver CS4”命令。首先显示“工作区设置”对 话框，如图3-1所示。由于要采用可视化方式设计网页，选中“设计者”单 选钮，单击“确定”按钮。接下来显示起始页对话框，如图3-2所示。在起 始页对话框中可以选择“打开最近的项目”、“新建”或“主要功能”。
3.4 网页结构语言XHTML
3.4.2 XHTML文档的基本结构 一个网页都有其基本的结构，包括XHTML的结构、标记的 格式等。 1．标记及其属性 2．XHTML文档的基本结构 XHTML文档是一种纯文本格式的文件，XHTML文档的基本结 构为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html>
3.4 网页结构语言XHTML
3.4.3 使用Dreamweaver CS4的代码视图查看XHTML文档 在当今的网页制作技术中，创建一个网站会使用CSS、 JavaScript和许多其它相关的文件。为了简化用户修改与网页 相关的所有文件，Dreamweaver提供了文件相关工具栏。例如， 打开曙光大学网站首页index.html文件，在文件相关工具栏中 包含了文件的源代码以及和文件相关的样式表文件style.css、 JavaScript脚本文件adpic.js。 当在代码视图下工作时，点击源代码按钮 会从文件相关 工具栏返回到源代码中。如果看不到文件相关工具栏，执行 “编辑”→“首选参数”命令，打开“首选参数”对话框，在 常规分类中，选择启用相关文件。
3.5 实训
3.5.2 实训二：制作 爱家美食网站“美食 推荐”页面
【实训综述】本实训 通过制作一个图文并 茂的网页，进一步加 强读者对图文混排技 术的理解与实战练习。 【实训展示】本实训 中的素材包括2幅图 片，制作如图3-65所 示的爱家美食网站 “美食推荐”页面。
3.6 习题
1．简答Dreamweaver文档编辑所包括的4种视图及特点。 2．本地站点和远端站点的区别是什么？举例建立一个本地 站点。
3.4 网页结构语言XHTML
3.4.4 案例三：了解曙光大学网站校园风采网页代码 在当今的打开案例二中制作的曙光大学网站校园风采网 页xxfc.html，切换到代码视图，如图3-63所示。
3.5 实训
3.5.1 实训一：制作 爱家美食网站“白云 豆烧牛肉”页面 【实训综述】读者在 学习了网页制作的一 般流程和图文混排的 基础上，制作简单的 页面。 【实训展示】本实训 中的素材包括2幅图 片，制作如图3-64所 示的“白云豆烧牛肉” 菜谱页面。
3.2.4 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特பைடு நூலகம்符 号及水平线等基本元素。 1．网页基本元素 2．页面的简单排版
（1）设置文本的大小
（2）设置文本的字体 （3）设置文本的颜色 （4）设置文本对齐方式
3.2 制作简单网页
3.2.5 插入图像 Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览 任何图像。使用Dreamweaver将一个图像插入到网页中有 3种方法： 在插入面板的“常用”分类中选择“图像”按钮； 执行“插入”→“图像”命令； 使用〈Ctrl〉+〈Alt〉+〈I〉组合键。
3.1.2 Dreamweaver CS4 的参数设置 一般设置的参数有常规 参数、新建文档参数和 站点参数，这些都是开 始创建站点、设计网页 前需要考虑的因素。 3．站点参数设置
3.2 制作简单网页
3.2.1 创建网站站点 所谓站点，可以看做是一系列文档的组合，这些文档之 间通过各种链接关联起来，可能拥有相似的属性，例如，描 述相关的主体，采用相似的设计，或者实现相同的目的等， 也可能只是毫无意义的链接。利用浏览器，就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。
3.2 制作简单网页
3.2.2 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可 以创建以下任意文档。 • 新的空白文档或模板； • 基于Dreamweaver附带的预设计页面布局文档；
• 基于现有模板的文档。
1．创建新文档 2．保存新文档
3.2 制作简单网页
(第4版）
机械工业出版社同名教材 配套电子教案
第3章 用Dreamweaver CS4创建基本网页
一 Dreamweaver CS4入门 二 制作简单网页 三 制作图文并茂网页 四 网页结构语言XHTML 五 实训
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动
插入面板
文档工具栏
文档窗口 组合面板
属性面板
图3-3 Dreamweaver CS4的主工作区
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速 切换：代码视图、设计视图、和拆分视图。文档工具栏中还包 含一些与查看文档、在本地和远程站点间传输文档有关的常用 命令和选项，如图3-4所示。
显示代码视图 显示代码视图和设计视图 显示设计视图 文件管理 可视化助理 验证标记
显示实时视图
文档标题 刷新设计视图 在浏览器中预览/调试
检查浏览器兼容性
图3-4 文档工具栏的常用命令和选项
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应 用程序开发，相应的面板也是这样分类的。 ① 设计类面板组
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．使用网页的基本元素设计一个简单的以健康为主题的网 页。
4．制作如图3-66所示的图文混排的网页。
② 文件类面板组
③ 应用程序类面板组
3.1 Dreamweaver CS4入门
3.1.2 Dreamweaver CS4 的参数设置 一般设置的参数有常规 参数、新建文档参数和 站点参数，这些都是开 始创建站点、设计网页 前需要考虑的因素。 1．常规参数设置 2．新建文档参数设置
3.1 Dreamweaver CS4入门
3.3 制作图文并茂网页
3.3.2 案例二：设计曙光大学校园风采网页 【案例综述】制作曙光大学校园风采页面，通过图文混排技术 展示学校的文化。 【案例展示】本例中的素材包括3幅校园文化图片，实例效果 如图3-55所示。
3.4 网页结构语言XHTML
3.4.1 XHTML简介 HTML是Hypertext Markup Language（超文本标记 语言）的缩写，是一种为普通文件中某些字句加上标识的语言， 其目的在于运用标记（tag）对文件达到预期的效果。它是构 成Web页面（Page），用来表示Web页面的符号标记语言。 HTML语言是建立网页的规范或标准，从它出现发展到现 在，规范不断完善，功能越来越强。但是依然有缺陷和不足， 人们仍在不断的改进它，使它更加便于控制和有弹性，以适应 网络上的应用需求。2000年，W3C组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进 的新语言，目的是基于XML应用。XHTML是一种增强了的 HTML，它的可扩展性和灵活性将适应未来网络应用更多的需 求。
3.2 制作简单网页
3.2.6 案例一：创建曙光大学学校概况页面 【案例综述】制作曙光大学学校概况页面，通过简单的页面制 作展示学校的基本情况。 【案例展示】本例中的素材包括4幅校园图片，实例效果如图 3-42所示。
3.3 制作图文并茂网页
3.3.1 图文混排 图文混排技术是指设置图像与同一行中的文本、图像、 插件或其它元素的对齐方式，方法是： 在设计视图中选择图像，在属性面板中使用“对齐”弹出 菜单设置该图像的对齐属性。
图3-1 “工作区设置”对话框
图3-2 起始页
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 2．Dreamweaver CS4的主工作区 Dreamweaver CS4的主工作区由文档工具栏、文档窗口、 属性面板、插入面板和组合面板等部分组成，如图3-3所示。
1．本地站点和远端站点
2．建立本地站点 3．指定站点首页
3.2 制作简单网页
3.2.1 创建网站站点
【案例综述】建立一个本地站点，定义站点名称和站点使用的本地 根文件夹及默认的图像文件夹。 【案例展示】本实例定义站点的名称为Sample，使用的本地文件夹为 D:\web\dawn，默认的图像文件夹为D:\web\dawn\images。站点 的设置如图3-16所示，站点结构如图3-17所示。
安装好Dreamweaver CS4后，单击“开始”→“程 序”→“Adobe Dreamweaver CS4”命令。首先显示“工作区设置”对 话框，如图3-1所示。由于要采用可视化方式设计网页，选中“设计者”单 选钮，单击“确定”按钮。接下来显示起始页对话框，如图3-2所示。在起 始页对话框中可以选择“打开最近的项目”、“新建”或“主要功能”。
3.4 网页结构语言XHTML
3.4.2 XHTML文档的基本结构 一个网页都有其基本的结构，包括XHTML的结构、标记的 格式等。 1．标记及其属性 2．XHTML文档的基本结构 XHTML文档是一种纯文本格式的文件，XHTML文档的基本结 构为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html>
3.4 网页结构语言XHTML
3.4.3 使用Dreamweaver CS4的代码视图查看XHTML文档 在当今的网页制作技术中，创建一个网站会使用CSS、 JavaScript和许多其它相关的文件。为了简化用户修改与网页 相关的所有文件，Dreamweaver提供了文件相关工具栏。例如， 打开曙光大学网站首页index.html文件，在文件相关工具栏中 包含了文件的源代码以及和文件相关的样式表文件style.css、 JavaScript脚本文件adpic.js。 当在代码视图下工作时，点击源代码按钮 会从文件相关 工具栏返回到源代码中。如果看不到文件相关工具栏，执行 “编辑”→“首选参数”命令，打开“首选参数”对话框，在 常规分类中，选择启用相关文件。
3.5 实训
3.5.2 实训二：制作 爱家美食网站“美食 推荐”页面
【实训综述】本实训 通过制作一个图文并 茂的网页，进一步加 强读者对图文混排技 术的理解与实战练习。 【实训展示】本实训 中的素材包括2幅图 片，制作如图3-65所 示的爱家美食网站 “美食推荐”页面。
3.6 习题
1．简答Dreamweaver文档编辑所包括的4种视图及特点。 2．本地站点和远端站点的区别是什么？举例建立一个本地 站点。
3.4 网页结构语言XHTML
3.4.4 案例三：了解曙光大学网站校园风采网页代码 在当今的打开案例二中制作的曙光大学网站校园风采网 页xxfc.html，切换到代码视图，如图3-63所示。
3.5 实训
3.5.1 实训一：制作 爱家美食网站“白云 豆烧牛肉”页面 【实训综述】读者在 学习了网页制作的一 般流程和图文混排的 基础上，制作简单的 页面。 【实训展示】本实训 中的素材包括2幅图 片，制作如图3-64所 示的“白云豆烧牛肉” 菜谱页面。
3.2.4 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特பைடு நூலகம்符 号及水平线等基本元素。 1．网页基本元素 2．页面的简单排版
（1）设置文本的大小
（2）设置文本的字体 （3）设置文本的颜色 （4）设置文本对齐方式
3.2 制作简单网页
3.2.5 插入图像 Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览 任何图像。使用Dreamweaver将一个图像插入到网页中有 3种方法： 在插入面板的“常用”分类中选择“图像”按钮； 执行“插入”→“图像”命令； 使用〈Ctrl〉+〈Alt〉+〈I〉组合键。
3.1.2 Dreamweaver CS4 的参数设置 一般设置的参数有常规 参数、新建文档参数和 站点参数，这些都是开 始创建站点、设计网页 前需要考虑的因素。 3．站点参数设置
3.2 制作简单网页
3.2.1 创建网站站点 所谓站点，可以看做是一系列文档的组合，这些文档之 间通过各种链接关联起来，可能拥有相似的属性，例如，描 述相关的主体，采用相似的设计，或者实现相同的目的等， 也可能只是毫无意义的链接。利用浏览器，就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。
3.2 制作简单网页
3.2.2 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可 以创建以下任意文档。 • 新的空白文档或模板； • 基于Dreamweaver附带的预设计页面布局文档；
• 基于现有模板的文档。
1．创建新文档 2．保存新文档
3.2 制作简单网页