Dreamweaver CS6网页设计应用案例教程(第二版)-sy

7.3.1 表单的基础操作
27
3. 设置表单属性
要想利用表单网页收集用户信息，即通过单击“提交”按钮将表单内容汇总到服务器上， 就需要设置表单属性。可选择插入的表单或将插入点定位到表单区域中，再在“属性”面板中 进行设置即可。
7.3.1 表单的基础操作
28
4．使用Spry表单验证构件
Spry表单验证构件是Dreamweaver CS6中的一项基于AJAX的框架的表单功能，可以验证 用户输入的表单内容，并给出详细的提示信息。在需要插入Spry的位置定位插入点，执行【插 入】/【Spry】菜单命令，在打开的子菜单中执行相关的命令，插入Spry表单验证。
内容导航
7.1 课堂案例：制作“客户交流”网页
7.2 课堂案例：制作“产品介绍”网页 7.2.1 认识“资源”面板 7.2.2 创建库文件 7.2.3 应用库文件 7.2.4 编辑库文件 7.2.5 更新库文件 7.2.6 分离库文件
7.3 课堂案例：制作“会员注册”网页
7.4 课堂案例：制作“品牌展厅”网页
7.3.2 在表单中添加各种表单元素
32
4. 添加隐藏域
定位插入点到需插入隐藏域的位置，在“插入”面板中选择“隐藏域”选项，将直接在网 页表单区域插入一个隐藏域；选择该隐藏域，在“属性”面板中设置ID名称并赋予相应的值， 完成添加隐藏域的操作。
7.3.2 在表单中添加各种表单元素
33
5. 添加复选框
【插入】/【模板对象】/【可编辑区域】菜单命令，打开“新建可编辑区域”对话框，在“名
称”文本框中输入“嵌套表格”，单击
按钮。此时插入点所在的单元格将出现创建的
可编辑区域。
7.1.2 编辑模板
6

十二五职业
教育国家规划
图7-6
模块七—使用div+CSS布局并美化网页
步骤5 为了便于查看， 还可以设置背景色。选择 “left-div”，在“属性”面板中选择“编辑规则”， 如图7-7所示。在出现的“# left-div的CSS规则定义” 窗口中选择“背景”，在背景色（Background-color） 中选择任意颜色，这里键入#F60。
顺序。
id优先级高于class 后面的样式覆盖前面的样式 指定的样式高于继承的样式 行内样式高于内部样式或外部样式
十二五职业 教育国家规划
模块七—使用div+CSS布局并美化网页
子任务3 了解CSS盒模式
十二五职业 教育国家规划
模块七—使用div+CSS布局并美化网页
任务二 如何用CSS布局 模块介绍：
十二五职业
教育国家规划
图7-5
模块七—使用div+CSS布局并美化网页
步骤4 选择“right-main”，单击“新建CSS规则”。 在“新建CSS规则”窗口中，单击“确定”按钮后，在 出现的“# right-main的CSS规则定义”窗口中选择 “方框”，键入宽（Width）值为70%，高（Height） 值为300px，外边距（Margin）里左（Left）值为 150px，此步骤同步骤3。上述数值改变后，在设计视 图中显示如图7-6所示。
<link href="layout.CSS" rel="style sheet" type="text/CSS" />
内部样式：以<style>开头，</style>结尾，写在源 代码的head标签内。

十二五职业教育国家规划教材
模块二站点管理与网站制作
任务一创建和管理站点
子任务2 创建站点 Dreamweaver站点是网站中使用的所有文件和资源的集合。Dreamweaver 站点通常包含两个部分：可在其中存储和处理文件的计算机上的本地文件夹， 以及可在其中将相同文件发布到Web服务器上的远程文件夹。 实例2-1：在C盘根目录下新建一个名为“DM站点”的文件夹作为本地站点， 站点名称为“我的站点”。
十二五职业教育国家规划教材
书名： Dreamweaver CS6网页设 计案例教程 第2版 ISBN： 978-7-111-48487-5 作者：王春红 王瑾瑜 出版社：机械工业出版社 本书配有电子课件
网页设计案例教程-----模块二
任务一创建和管理站点 任务二了解网页制作的基本流程 任务三网站设计的基础知识 任务四使用可视化向导
6．发布
十二五职业教育国家规划教材
模块二站点管理与网站制作

任务三
网站设计的基础知识
网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示 特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像公告栏 一样，人们可以通过网站来发而自己想要公开的信息，或者利用网站来提供 相的网络服务。用户可以通过网页浏览器来访问网站，获取自己需要的资料
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三
网站设计的基础知识
子任务2 网页的布局 常见的网页布局形式有以下5种： 1．“T”型布局 2．“口”字型布局
3．POP布局
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三
网站设计的基础知识
子任务3 网站的配色 无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显 示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页 的色彩。 1．标准颜色 2．其它颜色 3．网页色彩搭配原理 4．色彩搭配的技巧 5．避免配色中的误区：

隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。

编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。

2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。

菜单项按照功能的不同进行划分，使用户使用方便。

例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。

3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。

4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。

该面板的内容会根据选择对象的不同而显示不同的属性。

6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。

单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。

单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。

拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。

向外拖动面板或面板组可使其变为浮动的状态。

浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。

7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。

结束
“立志飞翔”应用样式“title2”
2.2使用CSS规则美化文本
4、编辑正文文本样式 利用前面介绍的方法，按照表2-1的样式，编辑“青 春寄语”正文文本和“立志飞翔”正文文本，完成后 如下图所示：
应用范围 “青春寄语”正文 “立志飞翔”正文 样式名称 Normal Poem 设置内容 大小：14像素，斜体， 颜色：“#06C” 大小：14像素，斜体， 颜色：“#690”，居 中 后退
目录
前进
后退
结束 设置标题文本的大小
2.2使用CSS规则美化文本
（6）设置文本的颜色为“#09F”，如下图所示：
“#09F”是所选颜 色代码 该选项代表将颜色还 原为默认值 目录
系统颜色拾取器 前进
附加功能
后退
结束 设置文本颜色
2.2使用CSS规则美化文本
（7）将所选文本设置为粗体，并将其对齐方式调整 为“居中对齐”，完成“title1”样式CSS规则的定 义，如下图所示：
目录
前进
后退
结束
网页中所需要的图像资源
2.3添加图像
（1）使用“文件”面板插入图象：如下图所示，选 中“top.jpg”图像，将其拖拽到“自我介绍”标题 前，在弹出的对话框中单击“确定”按钮，插入 “top.jpg”图像完毕。
（2）将所选图 像文件拖拽到准 确的插入位置
目录
前进
后退
结束 使用“文件”面板插入图象
结束
2.2使用CSS规则美化文本
步骤一：需求分析 需求：将首页中的文本设置为不同的样式，编辑页面 外观。 分析：设置文本样式，可以直接通过“属性”面板为 指定内容新建CSS规则，也可以在文本的其他位置应 用该规则。CSS规划可以在“CSS样式”面板中修改 ，也可以在“属性”面板中修改。要是文档达到如图 所示的效果，还要对“自我介绍”的内容制作列表， 要在文档中添加水平线，编辑网页的外观。

第15章 综合实训 307
选择菜单【文件】|【存储为Web所用格式】，在【存储为Web所用格式】对话框中选
中切片，在右侧【预设】下拉列表中选择“JPEG高”，如图15-59所示，单击【存储】按钮，
打开【将优化结果存储为】对话框，如图15-60所示，设置【保存在】为本地站点文件夹，在
【保存类型】下拉列表中选择“仅限图像”，在【切片】下拉列表中选择“所有用户切片”。

图15-59
在Dreamweaver的【文件】面板中可以看到切出的图片已经存在images文件夹内，
如图15-61所示。

图15-60 图15-61
15.4.2 新建子页面模板
在站点【文件】面板中，复制主页文件index.html生成一个名为index - 拷贝.html文件，
如图15-62所示。

◆双击打开index - 拷贝.html文件，在【CSS样式】面板中双击#container样式，打开
【#container的CSS规则定义（在layout.css中）】对话框，如图15-63所示，选择【分类】栏
中【方框】，将【Height】下拉文本框中的值清空。

然后将页面中的banner图像和全部内容
部分删除，效果如图15-64所示。

选择菜单【插入】|【布局对象】|【Div标签】，打开【插入Div标签】对话框，在【插
入】项后选择“在标签之后”，在后面下拉列表中选择“<div id=”banner”>”，在【ID】的下
拉文本框中输入“subcontentleft”，单击【新建CSS规则】按钮，打开【新建CSS规则】对。

177 （3）将文件保存到D 盘，文件夹名为“网页设计”，文件名为“test1.html ”，文件类型为“所有文件”。

（4）使用浏览器打开Ｄ盘“网页设计”文件夹中的“test1.html ”文件，在窗口标题栏上有“HTML 网页制作”的标题，其显示效果如图5.3所示。

（5）用Windows 的记事本打开“test1.html ”文件，在<body></body>中输入文字“中医门诊部&gt;坐诊”。

（6）再次保存文件，然后在浏览器中按F5键刷新页面，其显示效果如图5.4所示。

图5.3 简单HTML 文件的欢迎文字效果图 图5.4 简单HTML 文件的中医门诊部文字效果（7）打开“查看”菜单的源代码，在文字“中医门诊部”前加上“<font size=14 color ="#ff6600"> <b>”，在文字后面加上“</b></font>”，设置文字为粗体，并设置字号为14px ，颜色为橙色，如图5.5所示。

（8）保存后在浏览器中按F5键刷新页面，效果如图5.1所示。

5.1.2 利用Dreamweaver CS6制作网页1．案例知识点及效果图本案例主要运用了以下知识点：了解Dreamweaver 的工作环境和基本操作；创建网页文件的基本方法，保存、预览网页文件的方法；设置页面属性的方法，添加文本的方法；定义和应用文档标题格式。

案例效果如图5.6所示。

2．操作步骤（1）启动Dreamweaver CS6，系统会自动打开欢迎界面。

使用该界面可以快速执行一些常用操作，包括打开最近的项目、新建文件或站点、主要功能的使用等。

单击“新建”列表框中的“HTML ”按钮，如图5.7所示。

（2）建立一个HTML 文档，初次运行该软件时，会出现“工作区设置”对话框，可在文档工具栏中单击“设计”按钮将Dreamweaver 切换为“设计”视图，在该视图下可快速进行网页的编辑。

面板中的
按钮，单击“内缩区块”按钮可增加缩进距离；单击“删除内缩区块”按钮可
减少缩进距离。
内容导航
2.1 课堂案例：制作“公司简介”页面 2.2 课堂案例：制作“企业文化”页面
2.2.1 插入特殊文本对象 2.2.2 创建列表 2.2.3 设置水平线 2.2.4 添加滚动字幕
2.3 项目实训 2.4 课后练习
类型，这里保持默认设置，单击
按钮。选择【文件】/【保存】菜单命令，在打开的“另
存为”对话框中选择“wangye”文件夹作为保存位置，在“文件名”文本框中输入“gsjj.html”，
单击
按钮。
2.1.2 设置页面属性
5
选择【修改】/【页面属性】菜单命令，打开“页面属性”对话框，在“分类”栏中选择
“外观（CSS）”选项。在“页面字体”下拉列表框中选择“编辑字体列表”选项，打开“编
2.1.3 输入文本
11
5. 输入空格
单击鼠标定位插入点，按【Ctrl+Shift+Space】 组合键即可插入一个空格。连续按多次可输入 多个空格。
2.1.4 设置文本字体格式
12
1. 设置HTML字体格式
为网页中的文本设置HTML字体格式：先选择文本，在工作界面下方的“属性”面板中单
击
按钮，然后设置面板中的参数。
2. 插入特殊符号
选择【插入】/【HTML】/【特殊字符】/【商标】菜单命令。 此时插入点处将快速插入商 标字符，该字符的格式自动应用了商标字符的专用格式。
2.2.2 创建列表
21
1. 添加项目符号和编号
选择品牌内容所在的段落，单击“属性”面板
中的
按钮，然后单击“项目列表”按钮。

隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。

编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。

2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。

菜单项按照功能的不同进行划分，使用户使用方便。

例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。

3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。

4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。

该面板的内容会根据选择对象的不同而显示不同的属性。

6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。

单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。

单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。

拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。

向外拖动面板或面板组可使其变为浮动的状态。

浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。

7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。

10.1 实训目标 10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.6 课后练习
10.3 制作思路分析
7
本例的制作涉及本书讲解的大部分知识，制作前，应该先创建站点、Div标签和CSS样式、 CSS文件等。本例的操作思路如下图所示。
内容导航
10.1 实训目标
12
下面制作网页的主体部分，分别在“left”“main” “rightnav”Div标签中添加内容。
10.4.5 制作页脚内容
13
下面将在网页底部的“foot”Div标签中添加并确定每部分的位置和内容，使其显示网页的相关 信息。
内容导航
10.1 实训目标 10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训
证图像质量，同时减小图像体积。 不断改进。数码类网站是用户了解数码产品的重要渠道，要想在诸多同类网站中脱颖而出，仅做到
以上几点是远远不够的，还需要不断地借鉴、模仿和积累，认真学习，仔细分析，不断改进。
10.5.1 制作“北极数码”网站
17
3. 操作思路
根据实训要求，本实训涉及规划和管理站点、创建并制作网页模板，以及利用模板制作网站 首页及其他网页等操作，其操作思路如下图所示。
10.4.2 布局网页结构
10
布局网页的整体结构，将布局划 分为上、中、下3栏，并划分中间部分 的网页布局。通过【插入】/【布局对 象】/【Div标签】菜单命令，新建Div 标签，并设置相关属性。
10.4.3 制作页头内容
11
下面将在“top”Div标签中布局头部页面，并添加对应的内容。
10.4.4 制作网页主体
高等教育立体化精品系列规划教材

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
教学目标
掌握工作界面的操作。

本实训主要包括添加HTML5动画、插入与编辑图像，以及美化与优化图像等内容，操作思路 如下所示。
3.3.2 制作“科技产品”网页
20
1. 实训目标
本实训需要制作“科技产品”网页， 科技类产品的功能和概念比较抽象，设 计者在制作这类网页时，通常会采用形 象的图片和科技产品的使用方法或制作 原理视频来具体展现。因此，可通过插 入HTML5动画、图像、图像占位符来直 观地展示网页中的内容，并编辑图像， 最后输入文本。完成后的效果如右图所 示。
按钮。打开“锐化”对话框，在“锐化”文本框中输入“5”，单击
按钮即可。
3.1.2 美化与优化图像
8
3. 裁剪图像
选择插入的图像，单击“属性”面板中的“裁剪”按钮，在打开的提示对话框中单击 按钮，此时图像上将出现裁剪区域，拖动该区域四周的控制点调整裁剪后保留的图像范围，调 整好裁剪范围后按【Enter】键确认裁剪即可。
3.3 项目实训 3.4 课后练习
3.2.1 添加多媒体插件
12
选择【插入】/【媒体】/【插件】菜单命令，打开“选择文件”对话框，选择“bgmusic.mp3”
音乐文件，单击
按钮，选择插入音乐文件后创建的图标，在“属性”面板中将宽度和高度分
别设置为“300”和“45”，保存网页后预览即可看到效果。
行业提示：插入网页图像的注意事项
3
好的设计者应该合理使用各种图像，并灵活运用图像处理技巧。好的网页图像在传达信息和美 化页面的同时又不会降低用户的浏览速度。一般来讲，使用图像时首先要注意位置，如网站Logo图 像、网站Banner图像，以及网站导航条图像的放置位置等；其次应注重图像的尺寸、清晰度与图像 文件大小和下载速度的平衡。掌握以上两点，就能提高设计者使用图像的能力。

Dreamweaver CS6 网页设计与制作课程设计一、课程简介本课程旨在为学生提供一些基本的网页设计和制作工具。

通过学习Dreamweaver CS6的使用，学生可以了解并掌握网页设计的基本原理，布局和制作过程，能够设计出简单且符合规范的网页。

二、教学目标1.学习和掌握Dreamweaver CS6的使用，能够熟练操作软件工具；2.了解网页设计规范，掌握网页设计的基本原理和技巧；3.掌握简单网页的布局、设计与制作；4.学会如何使用CSS加强网页设计与布局。

三、教学内容教学内容学时Dreamweaver CS6的介绍2学时开始一个新网页2学时使用Dreamweaver CS6编辑器和面板2学时创建页面布局2学时插入文本和图像2学时链接和导航2学时使用CSS进行样式设计4学时教学内容学时在网页中添加多媒体元素2学时向网页添加表单4学时网页的测试和发布2学时四、教学方法本课程采用通过讲解、演示、实践等教学内容进行讲解的方式。

除此之外，还会按照学生的实际情况安排考试、小组讨论等形式活动。

五、教学材料1.Dreamweaver CS6软件；2.学习网站和视频；3.教师PPT课件；4.参考书籍。

六、教学评估1.在学期末，将会进行期末考试；2.定期进行小组讨论和学生报告，评估学生掌握情况；3.考虑学生作业的完成状况；4.对于学生的实践项目进行评估。

七、总结本课程旨在为学生提供基本的网页设计和制作工具和技能。

在学习的过程中，学生将能够了解并掌握网站设计须知，布局，网页内容，如何添加复杂元素。

通过课程的学习，学生将充分认识到网页设计的重要性，并掌握如何使用工具来构建网页。