Dreamweaver CS6网页设计案例教程 (7)
合集下载
DreamweaverCS6 HTML CSS DIV JavaScript网站开发框架与浮动框架
第七章框架与浮动框架课堂案例:企业邮箱网页地制作7.1网站地后台管理页一般是由框架结构组成,本章通过学习框架地网页组织形式,制作企业邮箱地页面。
准备知识:框架与框架集7.2•创建框架7.2.2•删除框架与增加框架7.2.4•框架与框架集介绍7.2.1•保存框架7.2.3•在框架使用超链接7.2.5框架与框架集介绍7.2.1框架是网页常用地布局方式与网页间地组织形式,经常使用在网站地后台,邮箱,论坛等结构为一个浏览器窗口划分为若干区域并且每个区域显示不同地网页文件地网页组成。
框架是网页经常使用地页面设计方式,其作用就是把网页在一个浏览器窗口下分割成几个不同地区域,实现在一个浏览器窗口显示多个HTML页面。
使用框架可以非常方便地完成导航工作,让网站地结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大地特点就是使网站地风格一致。
一个框架是由框架与框架集构成,框架是浏览器窗口地一个区域,它可以显示与浏览器窗口地其余部分所显示内容无关地网页文件;框架集也是一个网页文件,它将一个窗口通过行与列地方式分割成多个框架,框架地多少根据具体有多少网页来决定,每个框架要显示地就是不同地网页文件。
框架地HTML标签为<frame></frame>,框架集地HTML标签为<frameset></frameset>。
1创建框架打开Dreamweaver工具,创建一个新地站点名称为frame）,新建一个网页文件,暂时不保存。
在Dreamweaver地CS6版本,单击菜单栏地插入 HTML 框架然后选择菜单地具体框架结构。
2修改框架显示大小与框架属性方法一:修改框架在浏览器显示大小,将鼠标放到框架边框上,当出现双箭头光标时拖拽框架边框,可以改变框架地显示大小。
方法二:单击代码视图,在代码修改rows="80,*"或cols="80,*"地值,如修改为rows="169,*"或cols="257,*"。
利用Dreamweaver CS6设计网页
第五章 利用Dreamweaver CS6设计网页
引导案例
图5-2 网页组成示例
第五章 利用Dreamweaver CS6设计网页
了解网页制作的基础知识 熟悉Dreamweaver 8的工作环境 掌握创建和管理站点的方法 掌握在网页中创建文本的方法 了解网页中常见的图像格式 掌握使用局页面的方法 了解使用框架布局网页的方法
引导案例
分析网页组成部分
一般而言，比较规范的商业网站的网页由以下几个重要部分组成： 1）网站或企业的标志（Logo），宣传口号（slogan）。 2）主栏目导航。 3）形象图片或动画。 4）新闻或介绍。 5）版权信息（如果觉得有必要，还可以包括一些辅助的内容）。 6）辅助快捷导航。 7）显示当前所处在网站位置的文字。 8）推荐产品展示，或希望观众第一眼看到的比较重要的内容。 9）辅助的企业形象图片或动画。 10）计数器。 11）音乐控制（一般以商业为目的的公司很少使用）。 包括以上内容的网页如图5-2所示。
第五章 利用Dreamweaver CS6设计网页
一、网页基础知识
GIF为Graphic Interchange Format的缩写，被称为图像交换格式，采用LZW 无损压缩算法。
JPEG为Joint Photograhic Experts Group 的缩写，是由联合图像专家组开 发的图形标准，采用有损的压缩算法。
3）超链接 超链接（也称超级链接）是网页中最常用的一种元素。所谓超链接，是指从 一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是 一个应用程序。它表明网页文件之间所存在的相互链接关系。 4）动画
第五章 利用Dreamweaver CS6设计网页
Dreamweaver CS6网页设计与制作标准教程 (7)
网页内容，这时需要使用框架中的链接。
给每一个框架定义标题
创建框架中的链接
7.2.5 改变框架的背景颜色
通过“页面属性”对话框设置背景颜色的具体操作步骤如下。 将插入点放置在框架中。 选择“修改 > 页面属性”命令，弹出“页面属性”对话框， 单击“背景颜色”按钮 ，在弹出式颜色选择器中选择一种颜色， 单击“确定”按钮完成设置。
插入框架流程图
通过拖曳自定义框架 1、新建一个HTML文档。
2、 选择“查看 > 可视化助理 > 框架边框”命令，显示框架 线。 3、将光标放置到框架边框上。 4、单击鼠标并向下拖曳到适当的位置，松开鼠标，完成框架 的创建。
拖曳框架流程图
7.1.3 为框架添加内容
因为每一个框架都是一个HTML文档，所以可以在创建框架后，
保存框架集和全部框架 使用“保存全部”命令可以保存所有的文件，包括框架集和
每个框架。选择“文件 > 保存全部”命令，先弹出的“另存为” 对话框是用于保存框架集的，此时框架集边框显示选择线，再弹出 的“另存为”对话框是用于保存每个框架的，此时文档窗口中的选 择线也会自动转移到对应的框架上，据此可以知道正在保存的框架。
架集”命令，弹出其子菜单，其中有4种拆分方式。
2 、选定要拆分的框架集，按 Alt+Shift 组合键的同时，将鼠标 指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标指针
拆分框架。
修改框架大小
7.1.8 删除框架
将鼠标指针放在要删除的边框上，当鼠标指针变为双向箭头时，
拖曳鼠标指针到框架相对应的外边框上即可进行删除。
直接编辑某个框架中的内容，也可在框架中打开已有的HTML文档。
1、在文档窗口中，将光标放置在某一框架内。 2、选择“文件 > 在框架中打开”命令，打开一个已有文档。
《网页设计与制作Dreamweaver-CS6》电子教案
教学过程
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
<
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～四
主 要
参考资料
《网页设计与制作——Dreamweaver cs6》，王君学、田明编著，人民邮电出版社
￥
备注
]
第38--41课时讲授2学时 实践2学时
章 节
项目十一库和模板──制作馨华学校主页
讲授主
：
要内容
1.库和模板的概念
2.【资源】面板的使用
3.创建和应用库的方法
4.创建和应用模板的方法
5.在模板中插入模板对象的方法
重 点
难 点
！
创建和应用库的方法
创建和应用模板的方法
在模板中插入模板对象的方法
要求掌握
的知识点
库的概念、【资源】面板、创建库项目、删除库项目、模板的概念、创建模板文件、删除模板文件、插入库项目、修改库项目、分离库项目、可编辑区域、重复表格、重复区域、从模板新建网页、在已存在页面应用模板、分离模板
~
第11-16课时讲授2学时 实践4学时
章 节
项目三文本──编排奥斯卡网页
讲授主
】
要内容
1.设置页面属性的方法
2.设置文本字体、大小和颜色的方法
3.设置段落、换行和列表的方法
4.设置文本样式和对齐方式的方法
5.设置文本缩进和凸出的方法
6.插入水平线和日期的方法
重 点
…
难 点
设置文本字体、大小和颜色的方法
教学过程
：
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
<
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～四
主 要
参考资料
《网页设计与制作——Dreamweaver cs6》，王君学、田明编著，人民邮电出版社
￥
备注
]
第38--41课时讲授2学时 实践2学时
章 节
项目十一库和模板──制作馨华学校主页
讲授主
：
要内容
1.库和模板的概念
2.【资源】面板的使用
3.创建和应用库的方法
4.创建和应用模板的方法
5.在模板中插入模板对象的方法
重 点
难 点
！
创建和应用库的方法
创建和应用模板的方法
在模板中插入模板对象的方法
要求掌握
的知识点
库的概念、【资源】面板、创建库项目、删除库项目、模板的概念、创建模板文件、删除模板文件、插入库项目、修改库项目、分离库项目、可编辑区域、重复表格、重复区域、从模板新建网页、在已存在页面应用模板、分离模板
~
第11-16课时讲授2学时 实践4学时
章 节
项目三文本──编排奥斯卡网页
讲授主
】
要内容
1.设置页面属性的方法
2.设置文本字体、大小和颜色的方法
3.设置段落、换行和列表的方法
4.设置文本样式和对齐方式的方法
5.设置文本缩进和凸出的方法
6.插入水平线和日期的方法
重 点
…
难 点
设置文本字体、大小和颜色的方法
教学过程
：
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
中文版 Dreamweaver CS6网页设计教程 第7章
22
7.3.10 “恢复交换图像”行为
“交换图像”和“恢复交换图像”经常是成对 出现的，这样就省去了使用人工恢复交换图像 的工作。 单击“行为”面板上的按钮，并从其下拉列表 中选择“恢复交换图像”选项，打开如图7-20 所示的对话框。单击对话框中的“确定”按钮， 即可恢复交换图像。
23
7.3.11 “显示-隐藏元素”行为
使用“打开浏览器窗口”行为的具体操作步骤 如下。
(1) 选择对象并打开“行为”面板。 (2) 单击按钮并在其下拉列表中选择“打开浏览器 窗口”选项，打开如图7-12所示的对话框。 (3) 单击“浏览”按钮选取要打开的文件，或者在 “要显示的URL”文本框中输入需要显示的URL。
7.3.2 “打开浏览器窗口”行为
单击对话框顶部的按钮向“预先载入图像”列表中添加图像。 单击“浏览”按钮，选取要预先加载的图像文件，或者在“图像 源文件”文本框中输入图像的路径和名称。
(4) (5)
设置完成后，单击“确定”按钮。 在“行为”面板中选择适当的事件。
21
7.3.9 “交换图像”行为
“交换图像”行为通过改变img标签的src属性来将一 幅图像替换为另外一幅，使用该行为可以创建交换图 像和其他图像效果。 使用“交换图像”行为的具体操作步骤如下。
4
7.1.2 事件
事件是由浏览器生成的消息，指示该页的浏览 者执行了某种操作。例如，当浏览者将鼠标指 针移动到某一个链接时，浏览器为该链接生成 一个onMouseOver 事件(鼠标滑过)，然后浏览 器查看是否存在当为该链接生成该事件时浏览 器应该调用的 JavaScript 代码(这些代码是在被 查看的页面中指定的)。不同的网页元素定义了 不同的事件，例如，在大多数浏览器中， onMouseOver(鼠标滑过)和onClick(鼠标单击) 是与链接关联的事件，而 onLoad(页面载入)是 与图像和文档的主体部分关联的事件。
Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件第7章 使用模板和库和插件
7.4.1
创建库项目
库是一种特殊的Dreamweaver文件，其中包含 已创建以便放在网页上的单独的资源或资源复制 的集合。
7.4.2
应用库项目
当向页面添加库项目时， 将把实际内容以及对该 库项目的引用一起插入 到文档中。
7.5
安装和应用第三方插件
利用Dreamweaver附加功能的第三方插件，可以 把网页制作得更加美观，而且还可以制作动态的 页面。
教学内容：借助Dreamweaver CS6的模板功能 可以批量地制作几十种甚至几百种风格基本相 似的页面，极大地提高工作效率。
• • • •
教学重点 掌握模板的使用 掌握可编辑区的创建 掌握与应用库项目 掌握安装和应用第三方插件
模板实际上就是具有固定格式和内容的文件，文件 扩展名为.dwt。模板的功能很强大，通过定义和锁 定可编辑区域可以保护模板的格式和内容不会被修 改，只有在可编辑区域中才能输入新的内容。
在Dreamweaver中，模板是一种特殊的文档，可 以按照模板创建新的网页，从而得到与模板相似但 又有所不同的新的网页。
7.1.2
从现有文档创建模板
从现有文档创建模板的具体操作步骤如下。
7.2
创建可编辑区域
在模板中，可编辑区域是页面的一部分，对于基 于模板的页面，能够改变可编辑区域中的内容。
7.3
使用模板创建新网页
模板最强大的用途之一在于一次更新多个页面。从 模板创建的文档与该模板保持连接状态，可以修改 模板并立即更新基于该模板的所有文档中的设计。
7.4
创建与应用库项目
库用于存放页面元素，如图像、文本或其他对象 等。这些元素通常被广泛应用于整个站点，并且 能够重复使用，被称为库项目。
《中文版Dreamweaver CS6网页制作案例教程》教学课件 项目七
中文版Dreamweaver CS6
网页制作案例教 程
江苏大学出版社
项目七 综合实训 ——学院精品课网站设计与制
作
任务一 网站策划 任务二 制作首页及二级页面效果图 任务三 网站制作 任务四 网站测试 任务五 网站发布
项目分析
制作精品课网站首先要了解需求，确定创建 网站的目的及意义，满足其实用性和易用性 的要求；确立网站的结构和导航，网站的主 色调和配色。
二、学习相关资料
在接到网站任务后要从客户方获取相关资料， 对资料进行分析研究，学习网站建设文件， 这样设计才有依据，作品才能符合用户要求， 也才能通过网站准确地传播信息。
三、写出网站策划书
“Photoshop平面设计精品课”网站策划书 包括下面几部分。 1．市场分析 2．网站建设的目的及功能定位 3．网站所使用的技术 4．网站内容及实现方式 5．整体设计 6．费用预算 7．网站测试和发布 8．网站建设日程表
任务一 网站策划
任务描述
本任务主要是根据高职教育的发展需要，进行 精品课网站策划，主要工作包括对网站进行分 析，和相关技术人员讨论，确定网站的目的和 功能，然后据此对网站建设中的技术、内容、 测试、维护、人员等做出规划。
任务实施
一、了解需求
1．建设网站的目的 2．网站的用户群 3．网站需要哪些栏目 4．用什么技术来实现 5．网站设计上的要求 6．后期的维护和更新要求
三、制作二级页面
在制作二级页面时，可参考以下制作要点。 （1）首先制作二级页面模板。 （2）利用模板制作二级栏目对应的页面， 在可编辑区域添加对应的内容。
任务四 网站测试
任务描述
本任务是在完成网站制作后进行必要的检测， 主要对浏览器的兼容性和网页的链接进行测 试，这样可以保证网站在不同浏览器上正常 显示，同时还可对存在的错误链接进行纠错。
网页制作案例教 程
江苏大学出版社
项目七 综合实训 ——学院精品课网站设计与制
作
任务一 网站策划 任务二 制作首页及二级页面效果图 任务三 网站制作 任务四 网站测试 任务五 网站发布
项目分析
制作精品课网站首先要了解需求，确定创建 网站的目的及意义，满足其实用性和易用性 的要求；确立网站的结构和导航，网站的主 色调和配色。
二、学习相关资料
在接到网站任务后要从客户方获取相关资料， 对资料进行分析研究，学习网站建设文件， 这样设计才有依据，作品才能符合用户要求， 也才能通过网站准确地传播信息。
三、写出网站策划书
“Photoshop平面设计精品课”网站策划书 包括下面几部分。 1．市场分析 2．网站建设的目的及功能定位 3．网站所使用的技术 4．网站内容及实现方式 5．整体设计 6．费用预算 7．网站测试和发布 8．网站建设日程表
任务一 网站策划
任务描述
本任务主要是根据高职教育的发展需要，进行 精品课网站策划，主要工作包括对网站进行分 析，和相关技术人员讨论，确定网站的目的和 功能，然后据此对网站建设中的技术、内容、 测试、维护、人员等做出规划。
任务实施
一、了解需求
1．建设网站的目的 2．网站的用户群 3．网站需要哪些栏目 4．用什么技术来实现 5．网站设计上的要求 6．后期的维护和更新要求
三、制作二级页面
在制作二级页面时，可参考以下制作要点。 （1）首先制作二级页面模板。 （2）利用模板制作二级栏目对应的页面， 在可编辑区域添加对应的内容。
任务四 网站测试
任务描述
本任务是在完成网站制作后进行必要的检测， 主要对浏览器的兼容性和网页的链接进行测 试，这样可以保证网站在不同浏览器上正常 显示，同时还可对存在的错误链接进行纠错。
边做边学-Dream weaver CS6网页设计案例教程
“属性”面板提供了CSS功能。用户可以通过“属性”面板中“类”选项 的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定 义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。
1.2 创建网站框架
操作目的 操作步骤 相关工复制效果，熟练掌握新 建命令。通过关闭新建文件，熟练掌握保存和关闭命令。
编辑站点 复制站点 删除站点 导出站点 导入站点
2.创建文件夹
建立站点前，要先在站点管理器中创建站点文件夹。
（1）在本地磁盘中选择要建立站点的位置。 （2）通过以下两种方法新建文件夹。
①选择“文件 > 新建文件夹”命令。 ②用鼠标右键单击站点，在弹出的快捷菜单中选择“新建文件 夹”命令。 （3）输入新文件夹的名称。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一 组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文 件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中 创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再 将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练 掌握创建站点根目录的过程。
1.3.2 操作步骤
1
2
3
4
1.3.3 相关工具
1.站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站 点以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。
1.2 创建网站框架
操作目的 操作步骤 相关工复制效果，熟练掌握新 建命令。通过关闭新建文件，熟练掌握保存和关闭命令。
编辑站点 复制站点 删除站点 导出站点 导入站点
2.创建文件夹
建立站点前，要先在站点管理器中创建站点文件夹。
（1）在本地磁盘中选择要建立站点的位置。 （2）通过以下两种方法新建文件夹。
①选择“文件 > 新建文件夹”命令。 ②用鼠标右键单击站点，在弹出的快捷菜单中选择“新建文件 夹”命令。 （3）输入新文件夹的名称。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一 组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文 件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中 创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再 将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练 掌握创建站点根目录的过程。
1.3.2 操作步骤
1
2
3
4
1.3.3 相关工具
1.站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站 点以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。
网页设计与制作Dreamweaver CS6标准教-ppt课件-07
案例练习目标：练习设置CSS文字导航条。 案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。
根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。 当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。
一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。
7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店
案例练习目标：练习使用各种CSS样式。 案例操作要点： 1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。
1. 2. 3. 4.
ቤተ መጻሕፍቲ ባይዱ
Dreamweaver CS6网页设计立体化教程第7章
选择可编辑区域内的标签，然后选择【修改】/【模板】/【删除模板标记】菜单命令即可。
7.1.2
编辑模板
8
4. 创建重复区域
重复区域可以通过重复特定的项目来控制网页布局效果。在模板中创建重复区域的方法为：
选择模板中需设置为重复区域的对象，或将插入点定位到要创建重复区域的位置，然后选择 【插入】/【模板对象】/【重复区域】菜单命令，打开“新建重复区域”对话框。在“名称”文
7.1.2
编辑模板
5
1. 创建可编辑区域
将插入点定位到需要的位置，选择【插入】/【模板对象】/【可编辑区域】菜单命令，或
在“插入”面板中选择“常用”工具栏，单击“模板”下拉按钮，在打开的下拉列表中选择 “可编辑区域”选项。打开“新建可编辑区域”对话框，在“名称”文本框中输入“嵌套表
格”，单击
按钮。此时插入点所在的单元格将出现创建的可编辑区域。
变为禁用状态，表示不能对该内容进行编辑。
7.1.3 应用与管理模板
2. 更新模板内容
13
选择【修改】/【模板】/【更新页面】菜单命令。打开“更新页面”对话框，在“查看”
下拉列表框中选择“整个站点”选项，在右侧的下拉列表框中选择“qlqxsite”选项，单击选 中复选框，然后依次单击 按钮和 按钮，此时“khjl.html”网页底部的标签信息
本框中输入重复区域的名称后，单击
按钮即可。
7.1.2
编辑模板
9
5. 创建重复表格
将插入点定位到需创建重复表格的位置，选择【插入】/【模板对象】/【重复表格】菜单
命令，打开“插入重复表格”对话框。在上方设置表格属性，包括表格行列数、边距、间距、 宽度和边框等，在下方的“起始行”和“结束行”文本框中指定表格中的哪些行包含在重复区
7.1.2
编辑模板
8
4. 创建重复区域
重复区域可以通过重复特定的项目来控制网页布局效果。在模板中创建重复区域的方法为：
选择模板中需设置为重复区域的对象，或将插入点定位到要创建重复区域的位置，然后选择 【插入】/【模板对象】/【重复区域】菜单命令，打开“新建重复区域”对话框。在“名称”文
7.1.2
编辑模板
5
1. 创建可编辑区域
将插入点定位到需要的位置，选择【插入】/【模板对象】/【可编辑区域】菜单命令，或
在“插入”面板中选择“常用”工具栏，单击“模板”下拉按钮，在打开的下拉列表中选择 “可编辑区域”选项。打开“新建可编辑区域”对话框，在“名称”文本框中输入“嵌套表
格”，单击
按钮。此时插入点所在的单元格将出现创建的可编辑区域。
变为禁用状态，表示不能对该内容进行编辑。
7.1.3 应用与管理模板
2. 更新模板内容
13
选择【修改】/【模板】/【更新页面】菜单命令。打开“更新页面”对话框，在“查看”
下拉列表框中选择“整个站点”选项，在右侧的下拉列表框中选择“qlqxsite”选项，单击选 中复选框，然后依次单击 按钮和 按钮，此时“khjl.html”网页底部的标签信息
本框中输入重复区域的名称后，单击
按钮即可。
7.1.2
编辑模板
9
5. 创建重复表格
将插入点定位到需创建重复表格的位置，选择【插入】/【模板对象】/【重复表格】菜单
命令，打开“插入重复表格”对话框。在上方设置表格属性，包括表格行列数、边距、间距、 宽度和边框等，在下方的“起始行”和“结束行”文本框中指定表格中的哪些行包含在重复区
《中文版Dreamweaver CS6网页制作案例教程》全册精讲PPT教学课件
4．域名
由于IP地址在使用过程中难于记忆和书写，一 种与IP地址对应的字符应运而生，这就是域名 （Domain Name）。每一个网站都有自己 的域名，并且域名是独一无二的。
5．网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。 它是网络上通用的一种地址格式，用于标识 网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP 地址、网页在服务器中的路径和文件名4部 分组成。
（3）广告条
广告条又称Banner，其功能是宣传网站或 为其他商品做广告。 在制作Banner时，有以下几点需要注意。
• Banner可以是静态的，也可以是动态的。 • Banner的体积不宜过大，尽量使用GIF格式图 片与动画或Flash动画。 • Banner中的文字不要太多，只要达到一定的 提醒效果就可以。 • Banner中图片的颜色不要太多，尤其是GIF格 式的图片或动画。
2．网站
互联网起源于美国国防部高级研究计划管理 局建立的阿帕网。网站（Website）最初是 指在因特网上，根据一定规则，使用HTML 等语言制作的用于展示特定内容的相关网页 的集合。
3．网页的构成元素
我们可以将网页中的元素按功能分为站标、 导航条、广告条、标题栏和按钮等。
站标
导航条
广告条
标题栏
中文版Dreamweaver CS6
网页制作案例教程
项目一 网页制作基础知识
任务一 了解网页制作基础知识 任务二 创建“石市科干院”站点及欢迎首页
任务一 了解网页制作基础知识
任务描述
随着网络的飞速发展，各类公司、企事业单 位都相继建立了自己的网站。本任务主要了 解网页制作基础知识并欣赏优秀网站，从而 为制作优秀网页打下坚实的基础。
边做边学——Dreamweaver CS6网页设计案例教程教学教案
1．输入文本
2．设置文本属性
3．输入连续的空格
4．设置是否显示不可见元素
5．设置页边距
6．设置网页的标题
7．设置网页的默认格式
2.1.5【实战演练】——佳人SPA养生馆网页
2.2休闲旅游网页
2.2.1【案例分析】
2.2.2【设计理念】
2.2.3【操作步骤】
1．添加字体
2．改变文字外观
2.2.4【相关工具】
5.3综合演练——茶文化网页
5.3.1【案例分析】
5.3.2【设计理念】
5.3.3【知识要点】
5.4综合演练——火锅餐厅网页
5.4.1【案例分析】
5.4.2【设计理念】
5.4.3【知识要点】
小结
1.熟练掌握表格的插入及表格属性的设置方法和技巧。
2.熟练掌握表格嵌套布局。
作业
第6讲
课时内容
使用框架
授课时间
3.3.3【知识要点】
3.4综合演练——房源网页
3.4.1【案例分析】
3.4.2【设计理念】
3.4.3【知识要点】
小结
1.熟练掌握图像的格式与插入方法和使用技巧。
2.掌握Flash动画的插入和属性的设置。
作业
第4讲
课时内容
超链接
授课时间
180分钟
课时
4
教学目标
了解超链接的概念与路径知识
掌握文本超链接的创建方法和技巧。
《边做边学——Dreamweaver CS6网页设计案例教程》
教学教案
第1讲
课时内容
初识Dreamweaver CS6
授课时间
90分钟
课时
2
教学目标
掌握工作界面的操作。
2．设置文本属性
3．输入连续的空格
4．设置是否显示不可见元素
5．设置页边距
6．设置网页的标题
7．设置网页的默认格式
2.1.5【实战演练】——佳人SPA养生馆网页
2.2休闲旅游网页
2.2.1【案例分析】
2.2.2【设计理念】
2.2.3【操作步骤】
1．添加字体
2．改变文字外观
2.2.4【相关工具】
5.3综合演练——茶文化网页
5.3.1【案例分析】
5.3.2【设计理念】
5.3.3【知识要点】
5.4综合演练——火锅餐厅网页
5.4.1【案例分析】
5.4.2【设计理念】
5.4.3【知识要点】
小结
1.熟练掌握表格的插入及表格属性的设置方法和技巧。
2.熟练掌握表格嵌套布局。
作业
第6讲
课时内容
使用框架
授课时间
3.3.3【知识要点】
3.4综合演练——房源网页
3.4.1【案例分析】
3.4.2【设计理念】
3.4.3【知识要点】
小结
1.熟练掌握图像的格式与插入方法和使用技巧。
2.掌握Flash动画的插入和属性的设置。
作业
第4讲
课时内容
超链接
授课时间
180分钟
课时
4
教学目标
了解超链接的概念与路径知识
掌握文本超链接的创建方法和技巧。
《边做边学——Dreamweaver CS6网页设计案例教程》
教学教案
第1讲
课时内容
初识Dreamweaver CS6
授课时间
90分钟
课时
2
教学目标
掌握工作界面的操作。
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第7章
具体操作步骤： 1．打开素材文件“example\chapter07\playmusic.html” 。 2．链接音乐文件。将鼠标光标置于网页第一幅图片下方
名为“text”的DIV中，选中“Yesterday Once More” 文本，在其【属性】检查器【链接】文本中输入 “music/Yesterday Once More.mp3”。
7.1.1 网页图像格式
虽然图像的文件格式很多，但并不是所有图像都适 用于网页，通常用于网页的格式有3种，即JPG格式、 GIF格式和PNG格式。 ➢JPG：联合图像专家组,也被称为JPEG。 ➢GIF：图像交换格式 。 ➢PNG：便携网络图像 。
7.1.2 插入图像
1．插入图像 选择【插入】/【图像】命令，弹出【选择图像源文
7.2.2 插入FLASH动画
在该对话框中设置FLASH标题、快速访问键和Tab 键索引，单击【确定】按钮完成FLASH动画的插入， 如图所示。
7.2.2 插入FLASH动画
2．设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器
中可以对宽、高等属性进行设置，如图所示。
7.2.3 插入FLASH 视频
7.1.5 课堂案例—插入鼠标经过图像
4．插入图像占位符。将鼠标光标置于“apDiv2”右 侧的名为“apDiv3”的第三个单元格中，选择【插 入】/【图像】/【图像占位符】命令，弹出【图像 占位符】对话框，设置图像占位符属性如图所示。
7.1.5 课堂案例—插入鼠标经过图像
单击【确定】按钮完 成图像的插入，如图所示。
7.4.4 课堂案例—制作默默音乐盒
3．嵌入音乐。将鼠标光标置于第二幅图片下方名为 “text1”的DIV中，选择【插入】/【媒体】/【插件】 命令，在弹出的【选择文件】对话框中打开站点的 “music”文件夹，选择“Go home.mp3”，单击 【确定】按钮。
名为“text”的DIV中，选中“Yesterday Once More” 文本，在其【属性】检查器【链接】文本中输入 “music/Yesterday Once More.mp3”。
7.1.1 网页图像格式
虽然图像的文件格式很多，但并不是所有图像都适 用于网页，通常用于网页的格式有3种，即JPG格式、 GIF格式和PNG格式。 ➢JPG：联合图像专家组,也被称为JPEG。 ➢GIF：图像交换格式 。 ➢PNG：便携网络图像 。
7.1.2 插入图像
1．插入图像 选择【插入】/【图像】命令，弹出【选择图像源文
7.2.2 插入FLASH动画
在该对话框中设置FLASH标题、快速访问键和Tab 键索引，单击【确定】按钮完成FLASH动画的插入， 如图所示。
7.2.2 插入FLASH动画
2．设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器
中可以对宽、高等属性进行设置，如图所示。
7.2.3 插入FLASH 视频
7.1.5 课堂案例—插入鼠标经过图像
4．插入图像占位符。将鼠标光标置于“apDiv2”右 侧的名为“apDiv3”的第三个单元格中，选择【插 入】/【图像】/【图像占位符】命令，弹出【图像 占位符】对话框，设置图像占位符属性如图所示。
7.1.5 课堂案例—插入鼠标经过图像
单击【确定】按钮完 成图像的插入，如图所示。
7.4.4 课堂案例—制作默默音乐盒
3．嵌入音乐。将鼠标光标置于第二幅图片下方名为 “text1”的DIV中，选择【插入】/【媒体】/【插件】 命令，在弹出的【选择文件】对话框中打开站点的 “music”文件夹，选择“Go home.mp3”，单击 【确定】按钮。
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
利用Dreamweaver CS6制作网页_信息技术基础及应用教程_[共3页]
![利用Dreamweaver CS6制作网页_信息技术基础及应用教程_[共3页]](https://img.taocdn.com/s3/m/5f8f5ec9c5da50e2534d7fb5.png)
第5章 网页制作
175
图5.1 一个简单的HTML 文件案例效果图 图5.2 用记事本编写HTML 代码 （3）将文件保存到D 盘，文件夹名为“网页设计”，文件名为“test1.html ”，文件类型为“所有文件”。
（4）使用浏览器打开Ｄ盘“网页设计”文件夹中的“test1.html ”文件，在窗口标题栏上有“HTML 网页制作”的标题，其显示效果如图5.3所示。
（5）用Windows 的记事本打开“test1.html ”文件，在<body></body>中输入文字“中医门诊部>坐诊”；
（6）再次保存文件，然后在浏览器中按“F5”键刷新页面，其显示效果如图5.4所示。
图5.3 简单HTML 文件的欢迎文字效果图 图5.4 简单HTML 文件的中医门诊部文字效果 （7）打开“查看”菜单的源代码，在文字“中
医门诊部”前加上“<font size=14 color =”#ff6600”>
<b>”，在文字后面加上“</b></font>”，设置文
字为粗体，并设置字号为14px ，颜色为橙色。
（8）保存后在浏览器中按“F5”键刷新页面，
效果如图5.1所示。
5.1.2 利用Dreamweaver CS6制作网页
1．案例知识点及效果图
本案例主要运用了以下知识点：了解Dreamweaver 的工作环境和基本操作；创建网页文件的基本方法、保存、预览网页文件的方法；设置页面属性的方法，添加文本的方法；定义和应用文档标题格式。
案例效果如图5.6所示。
图5.5 在记事本中修改HTML 代码。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.将表格转换为AP Div
当不满意页面布局时，就需要对其进行调整，但层布局要比表格布局
调整起来方便，所以需要将表格转换为AP Div。若将表格 将表格转换为AP Div”命令，弹出“将表格转换
为AP Div”对话框。根据需要完成设置后，单击“确定”按钮。
3.设置层的默认属性
当层插入后，其属性为默认值，如果想查看或修改层的属性，选择
“编辑 > 首选参数”命令，弹出“首选参数”对话框。在“分类”列表 框中选择“AP元素”选项，此时可查看或修改层的默认属性。
4.AP元素面板
通过“AP元素”面板可以管理网页文档中的层。选择“窗口 > AP元 素”命令，调出“AP元素”面板。 使用“AP元素”面板可以防止层重叠，更改层的可见性，将层嵌套或 层叠，以及选择一个或多个层。
“将表格转换为AP Div”对话框
7.2.5 实战演练-精品家居网页
使用“将表格转换为AP Div”命令，将表格转换为层。
效果图
7.3 综合演练-充气浮床网页
层靠齐到网格
更改网格设置
7.1.5 实战演练-鲜花速递网页
使用“层”和“属性”面板，制作阴影文字效果。
效果图
7.2 信业融资网页
案例分析 设计理念 操作步骤
相关工具
7.2.1 案例分析
信业融资是为企业提供贷款、融资租赁及其他经济合同担保， 并适时提供具有核心价值的增值服务，助推伙伴企业资本尽快融 通，使企业得到更快发展。设计网页时要注意行业特色，达到宣 传的目的。
7.1 联创网络技术网页
案例分析 设计理念
操作步骤
相关工具
7.1.1 案例分析
网络技术是把互联网上分散的资源融为有机整体，实现资源的 全面共享和有机协作，使人们能够透明地使用资源的整体能力并按 需获取信息。本例是网络技术的网页，希望在设计上表现出网络的 科技与创新。
7.1.2 设计理念
在网页设计过程中，采用灰色作为背景，使页面体现出时尚大 气的感觉，内容灰色和蓝色的方形呈现，与后面的人物相呼应，使 画面具有空间感，科技感强烈。整个页面设计直观大方，具有设计
10.对齐层
使用层对齐命令，以当前层的边框为基准对齐一个或多个层。当对选 定层进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移 动。为了避免这种情况，不要使用嵌套层。对齐两个或更多个层有以下两 种方法。
应用菜单命令对齐层 应用“属性”面板对齐层
11.层靠齐到网格
在移动网页元素时可以让其自动靠齐到网格，还可以通过指定网格设 置来更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。 应用Dreamweaver CS6中的靠齐功能，层与网格之间的关系如铁块与 磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。
调整单个层的大小
同时调整多个层的大小
8.嵌套层
嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织在一起。 创建嵌套层 层嵌套的注意事项
9.移动层
移动层的操作非常简单，可以按照在大多数图形应用程序中移动对象 的相同方法在“设计”视图中移动层。移动一个或多个选定层有以下两种 方法。
拖曳选择柄来移动层 移动一个像素来移动层
当处理文档时，可以使用“AP元素”控制面板手动设置显示或隐藏层， 来查看层在不同条件下的显示方式。更改层的可见性有以下两种方法。 （1）使用“AP元素”控制面板更改层的可见性 （2）使用“属性”面板更改层的可见性
7.调整层的大小
用户可以调整单个层的大小，也可以同时调整多个层的大小以使它们
具有相同的宽度和高度。
令，或按Ctrl+Shift+I组合键。
2.选择层
选择一个层 （1）利用层面板选择一个层。 （2）利用文档窗口选择一个层。 选定多个层 选择“窗口 > AP元素”命令，弹出“AP元素” 面板。在“AP元素” 面 板中，按住Shift键并单击两个或更多的层名称。 在文档窗口中按住Shift键并单击两个或更多个层的边框内（或边框上）。 当选定多个层时，当前层的大小调整柄将以蓝色突出显示，其他层的大 小调整柄则以白色显示
“AP元素”面板
5.更改层的叠加顺序
排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特 殊的效果，这可通过修改选定层的Z轴属性值实现。 层的显示顺序与Z轴值的顺序一致。Z值越大，层的位置越靠上前。
在“AP元素” 面板中更改层的堆叠顺序 在“属性”面板中更改层的堆叠顺序
6.更改层的可见性
7.2.2 设计理念
在网页设计和制作过程中，标志和导航栏的设计简洁明快，方 便用户浏览信息。在背景处理上挑选一位男士背影，营造出踏实信赖 的氛围，从而有效地提高企业品质。网页设计简洁直观，具有特色。
信业融资网页效果图
7.2.3 操作步骤
1
2
3
4
7.2.4 相关工具
1.将AP Div转换为表格
将AP Div转换为表格 如果使用层创建布局的网页要在较早的浏览器中进行查看，需要将AP Div转换为表格。选择“修改 > 转换 > 将AP Div转换为表格”命令，弹出 “将AP Div转换为表格”对话框。根据需要完成设置后，单击“确定”按钮。 防止层重叠 因为表单元格不能重叠，所以Dreamweaver CS5无法从重叠层创建表格。 如果要将一个文档中的层转换为表格以兼容IE 3.0浏览器，则选择“防止重 叠”选项来约束层的移动和定位，使层不会重叠。
感，黑白灰的色彩运用展现出科技创新感。
联创网络技术网页效果图
7.1.3 操作步骤
1
2
3
4
7.1.4 相关工具
1.
创建层
创建层
若想利用层来定位网页元素，先要创建层，再根据需要在层内插入其他
表单元素。有时为了布局，还可以显示或隐藏层边框。 显示或隐藏层边框
若要显示或隐藏层边框，可选择“查看 > 可视化助理 > 隐藏所有”命
第7章
使用层
本章简介：
如果用户想在网页上实现多个元 素重叠的效果，可以使用层。层是网 页中的一个区域，并且游离在文档之 上。利用层可精确定位和重叠网页元 素。通过设置不同层的显示或隐藏， 实现特殊的效果。因此，在掌握层技 术之后，就可以在网页制作中具有强 大的页面控制能力。
课堂学习目标
层的基本操作 应用层设计表格