Dreamweaver CS6网页设计立体化教程第9章
合集下载
Dreamweaver-CS3网页制作基础教程第9章习题答案
第9章使用AP Div布局页面一、填空题1、通过设置AP Div的（）属性可以使多个AP Div发生堆叠，也就是多重叠加的效果。
正确答案：z轴2、如果要选定多个AP Div，只要按住（）键不放，在【AP元素】面板中逐个单击AP Div的名称即可。
正确答案：Shift3、在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“（）”，即表示AP Div，否则即为Div标签，这是AP Div与Div标签转换的关键因素。
正确答案：绝对4、可以按住（）键，在【AP元素】面板中将某一个AP Div拖曳到另一个AP Div上面，形成嵌套AP Div。
正确答案：Ctrl二、选择题1、下面关于创建AP Div的说法错误的有（）。
A、选择菜单栏中的【插入记录】／【布局对象】／【AP Div】命令B、将【插入】／【布局】面板上的（绘制AP Div）按钮拖曳到文档窗口C、在【插入】／【布局】面板中单击（绘制AP Div）按钮，然后在文档窗口中按住鼠标左键并拖曳D、在【插入】／【布局】面板中单击（绘制AP Div）按钮，然后按住Shift键不放，按住鼠标左键并拖曳正确答案：D2、关于【AP元素】面板的说法错误的有（）。
A、双击AP Div的名称，可以对AP Div进行重命名B、单击AP Div后面的数字可以修改AP Div的z轴顺序C、勾选【防止重叠】复选框可以禁止AP Div重叠D、在AP Div的名称前面有一个眼睛图标，单击眼睛图标可锁定AP Div正确答案：D3、关于选定AP Div的说法错误的有（）。
A、单击文档中的图标来选定层B、将光标置于AP Div内，然后在文档窗口底边标签条中选择“<div>”标签C、单击AP Div的边框线D、如果要选定两个以上的AP Div，只要按住Alt键，然后逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可正确答案：D4、关于移动AP Div的说法错误的有（）。
Dreamweave网页制作第九周.ppt
奥运奖牌 （c.htm）
奥运吉祥物 （d.htm）
1936 3
2 1
1976 1952
第
第
届
届
第
雅 典 天 神 竞 技 重 回 人
巴 黎 女 性 登 上 奥 运 舞
届 圣 路 易 斯 博 览 会
年 柏 林 （ 德 国 ）
1980
1976
年
年
3 c3.htm 2 c2.htm
1 c1.htm
赫
蒙
尔
特
辛
利
基
尔
第 届 （
第
第
届
届
（
（
年 海 狸
年 熊 的
（
（
形
形
芬
加
象
象
兰
拿
）
大
）
）
）
1976
年 鹰 的 形 象
间
台
(d3.htm)
(d2.htm)
(d1.htm)
)b3.htm b2.htm
b1.htm a3.htm
a2.htm a1.htm
提示
• 网页： 学名是HTML，Hyper Text Marked Language 超级文本链接语言
网页制作
发展趋势
• 从文字和少量图片 ------多媒体网页（电 影、音乐、实时视频和音频）
网站开发流程
确定 主题
规划 结构
整理 素材
制作 网页
上传 发布
规划结构
（网站主题、页面主题、网页文件名、各页面之间的隶属关系）
奥运之旅 （index.htm）
奥运会徽 （a.htm）
奥运火炬 （b.htm）
09时间轴
9.3 对时间轴动画的编辑
（2）改变关键帧位置 ） 如果想使层能够更快些或更慢些到达关键帧 位置，可在动画条中向左或向右移动该关键帧。 位置，可在动画条中向左或向右移动该关键帧。
9.3 对时间轴动画的编辑
（3）改变动画的起始时间 ） 如果想改变动画的开始时间， 如果想改变动画的开始时间 ， 可选择和该动 画相关联的一个或所有动画条（ 画相关联的一个或所有动画条 （ 选择的同时按住 shift键即可选中多个动画条 ） ， 然后将选择的动 键即可选中多个动画条） 键即可选中多个动画条 画向左或向右拖动。 画向左或向右拖动。
例2 制作曲线运动的动画
（1）先插入层，打开“时间轴”面板 ）先插入层，打开“时间轴” 插入 布局对象 层；窗口 时间轴 时间轴” （ 2） 选中层 ， 单击 “ 修改 ” “ 时间轴 ” “ 录制 ） 选中层， 单击“ 修改” 层路径” 层路径” （ 3）拖动该层绘制运动路径 ， 完成后会自动出现动 ） 拖动该层绘制运动路径， 画条。 画条。 （4）保存预览 ）
9.3 对时间轴动画的编辑
（1）改变动画条长度 ） 如果想使动画延长， 可拖动最后的帧标识。 如果想使动画延长 ， 可拖动最后的帧标识 。 此时该动画的所有关键帧也会相应地调整， 此时该动画的所有关键帧也会相应地调整 ， 以保 持各关键帧之间的相对位置不变。改变动画条长 持各关键帧之间的相对位置不变 。 度只是改变动画的播放时间长度， 度只是改变动画的播放时间长度 ， 不会改变动画 运动轨迹的长度。 运动轨迹的长度。
9.2 利用Dreamweaver制作时间轴动画 利用 制作时间轴动画
例1 制作直线运动的文字
（1）先插入层 ） 插入 布局对象 层 2）打开“时间轴” （2）打开“时间轴”面板 窗口 时间轴 （3）确定层的起始位置后，把层拖入到时间轴中 ）确定层的起始位置后， （4）拉长该层所占时间长度 ） （ 5） 点击时间轴上的最后一帧 ， 在编辑窗口中把层 ） 点击时间轴上的最后一帧， 拖动到停止位置。 这时候会出现一根斜线的路径） 拖动到停止位置。（这时候会出现一根斜线的路径） （6）保存预览 ）
《网页设计与制作立体化教程(Photoshop+Dreamweaver+Flash CS6)》—教案教学
《网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6）》教学教案第1章赏析特色网站个人网站规划的操作思路小结1、掌握网站类型、网站结构、网页组成元素和色彩搭配等基础知识。
2、掌握站点创建、编辑与管理的操作。
第2章直通车图片效果帮助中心效果小结1、掌握旋转、裁剪图片的操作。
2、掌握修复图片常用工具的使用。
3、掌握设置图层样式的方法。
思考及作想一想：1．制作直通车图片本练习要求制作一个淘宝直通车图片，要求通过文本来说明网站的保修服务内容。
制作时可打开本书提供的素材文件进行操作。
要求操作如下。
（1）填充背景，添加素材。
第3章婚纱售卖网站首页个人网页效果小结1、掌握网页效果图的设计思路。
2、熟练掌握绘图工具的使用。
3、掌握切片的使用方法思考及作想一想：1．设计婚纱售卖网站首页本练习要求为婚纱售卖网站的首页设计一个界面效果图，要求页面中能够显示部分产品、有购买功能。
要求操作如下。
（1）新建图像文件，创建参考线布局页面。
（2）添加素材文件，对素材文件进行编辑。
（3）为图像添加相关的文本装饰，并设置其格式。
本练习要求完成“七月”个人网页效果图的设计，然后对其进行切片，完成后将第4章保修服务网页效果代金券说明网页效果小结1、掌握网页文档的创建、设置与保存。
2、掌握文本网页的制作方法。
想一想：1．制作“保修服务”网页本练习要求制作一个“保修服务”页面，要求通过文本来说明网站的保修服务内容。
第5章“服装”网页效果“产品介绍”网页效果1、掌握插入与编辑图片和多媒体对象的方法2、掌握超链接的创建和应用想一想：1. 制作“服装”网页本练习要求打开服装网页“index.html”，先在其中插入背景音乐，然后插入图像，第6章“花卉推荐”网页效果摄影首页效果、掌握框架和表格的使用、掌握使用CSS+DIV布局网页的方法、掌握网页布局的设计思路想一想：1．制作“花卉推荐”网页本练习要求使用表格来制作“花卉推荐”页面，在制作时先在空白网页中插入表格，并根据需求在表格中添加相关内容，再对添加内容的表格进行编辑，最后设置表格的属性。
1.1.4 HTML标记语言[共2页]
![1.1.4 HTML标记语言[共2页]](https://img.taocdn.com/s3/m/f3175ce267ec102de3bd8927.png)
HTML是网页设置的语法基础，常称它为超文本标记语言（Hypertext Markup Language）， 是一种用于描述网页文档的标记语言。
1．HTML概念 HTML是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来 标记要显示在网页中的各个部分。网页文件本身是一种文ቤተ መጻሕፍቲ ባይዱ文件，通过在其中添加标记符，可 告诉浏览器如何显示其中的内容，如文字如何处理，画面如何安排，图片如何显示等。 HTML语言文档制作不复杂，但功能却很强大，支持不同数据格式的文件镶入，包括图 片、声音、视频、动画、表单和超链接等内容，这也是它在互联网中盛行的原因之一，其主 要特点如下。
程 （
种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式，由青、洋红（品
双
红）、黄和黑4种色彩组合成各种颜色。
色 微
3．网页中常用的色彩搭配方式
课
下面介绍两种网页设计中常用的色彩搭配方式。
版
）
采用相近色配色：相近色是指相同色系的颜色。使用相近色进行网页色彩的搭配，
可以使网页的效果更加统一和谐。如暖色调和冷色调就是相近色的两种运用。
一种表示方法，由数字0~9，字母A~F组成（字母不区分大小写）。颜色值可以采用6位的
十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。
网
除此之外，还可通过RGB、HSB、Lab、CMYK来进行表示。RGB色彩模式是通过对红
页
（R）、绿（G）、蓝（B）3个颜色通道的变化以及它们相互之间的叠加来得到各式各样的
采用对比色配色：在色相环中每一个颜色与其对面（180°）的颜色，称为互补色，
也是对比最强的色组。也可以是指两种可以明显区分的色彩，包括色相对比、明度
网页设计与制作DreamWeaver教案：第九讲 使用布局网页布局网页
第九讲 使用布局网页布局网页
授课日 期
班级名 称
授课地 点
教学课 题 第八讲使用布局表格布局网页 2 学时 课时
（1）掌握切换视图的操作方法。 （2）掌握绘制布局表格的操作方法 教学目 （3）掌握绘制布局单元格、移动布局单元格的操作方法 的 （4）掌握调整布局表格大小和布局单元格大小的操作方法 （5）掌握布局表格和布局单元格的属性设置方法
3）第二行用于间隔。
主站首 站长简 音乐古
|页
|介
|堡
| BEYOND |
星爷专
辑
|
默认
友情链
接
|
给我留 言
3、设计信息区 1） T3：1×3 表，宽 778，其它为 0，各单元格的宽度分别设为 181、411、156 2） 设置左右内容区 a) T31：2×1 表，宽 100%，表格边框为 1，白色，垂直对齐： 顶端。 b) 第 1 格高 15，第 2 格高 163，单元格边框为 1，绿色（细边 框色）。 c) 第 1 格：背景图像，输入栏目名“你的栏目”。 d) 第 2 格：输入栏目的具体内容 e) 复制 T31 表至右内容区即第 3 列。
课外 拓
展实 践
课后评 析
操作要求 （1）打开“课堂实践”网站文件夹“05 布局表格”中的网页文档
“05.html”。 （2）利用布局表格布局网页 05.html 的页面元素。 （3）绘制一个较大的布局表格 A，然后在布局表格 A 中再绘制两
课堂实 个布局表格 B、C，B 和 C 布局表格上下排列。 践 （4）在布局表格 B 中绘制 1 个布局单元格，在布局表格 C 中绘制 6 个布局单元格。 （5）分别在各个布局单元格中输入文字和插入图像。
5、设计版权区 1）T4：2×1 表，宽 778，边框为 0，边距为 0，间距为 0 a) 第一行：切换到“代码”视图，删除代码 ，插入水平线： 1 像素的细线。 b) 第二行：输入相关版本信息：版权所有： Copyright ? 2003-2005 All rights reserved
授课日 期
班级名 称
授课地 点
教学课 题 第八讲使用布局表格布局网页 2 学时 课时
（1）掌握切换视图的操作方法。 （2）掌握绘制布局表格的操作方法 教学目 （3）掌握绘制布局单元格、移动布局单元格的操作方法 的 （4）掌握调整布局表格大小和布局单元格大小的操作方法 （5）掌握布局表格和布局单元格的属性设置方法
3）第二行用于间隔。
主站首 站长简 音乐古
|页
|介
|堡
| BEYOND |
星爷专
辑
|
默认
友情链
接
|
给我留 言
3、设计信息区 1） T3：1×3 表，宽 778，其它为 0，各单元格的宽度分别设为 181、411、156 2） 设置左右内容区 a) T31：2×1 表，宽 100%，表格边框为 1，白色，垂直对齐： 顶端。 b) 第 1 格高 15，第 2 格高 163，单元格边框为 1，绿色（细边 框色）。 c) 第 1 格：背景图像，输入栏目名“你的栏目”。 d) 第 2 格：输入栏目的具体内容 e) 复制 T31 表至右内容区即第 3 列。
课外 拓
展实 践
课后评 析
操作要求 （1）打开“课堂实践”网站文件夹“05 布局表格”中的网页文档
“05.html”。 （2）利用布局表格布局网页 05.html 的页面元素。 （3）绘制一个较大的布局表格 A，然后在布局表格 A 中再绘制两
课堂实 个布局表格 B、C，B 和 C 布局表格上下排列。 践 （4）在布局表格 B 中绘制 1 个布局单元格，在布局表格 C 中绘制 6 个布局单元格。 （5）分别在各个布局单元格中输入文字和插入图像。
5、设计版权区 1）T4：2×1 表，宽 778，边框为 0，边距为 0，间距为 0 a) 第一行：切换到“代码”视图，删除代码 ，插入水平线： 1 像素的细线。 b) 第二行：输入相关版本信息：版权所有： Copyright ? 2003-2005 All rights reserved
第9章 使用CSS+DIV布局网页
1. 把表格布局转换为AP Div布局
2. 把AP Div布局转换为表格布局
9.3 设置AP Div属性
方法1，单击边框选中AP Div元素。 方法2，快捷键选中AP Div元素。按住Shift键，然后用鼠标单击AP Div元 素内任意区域，可以快速将该AP Div元素选中。 方法3，用【AP 元素】面板选中AP Div元素。在【AP 元素】面板直接单 击AP Div元素的名称，可以准确快速的选择AP Div元素。 方法4，单击AP Div元素标记选中AP Div元素。 方法5，选择多AP Div元素。按住Shift键在多AP Div元素内或边框上单击 ，或者在【AP 元素】面板上按住Shift键单击多AP Div元素的名称。
9.4 操作练习： 使用AP Div面板
在Dreamweaver中使用【AP 元素】面板可以轻松选择AP Div元素，调整 AP Div元素顺序，设置AP Div元素可见性，设置AP Div元素关系，命名AP Div元素等。
9.4 实战演练： 操作AP Div
调整单个AP Div元素的大小，可执行下面任一操作： •用拖动的方法调整大小：选择AP Div元素，拖曳控制点以改变它的大小 。 •每次调整1个像素：选择AP Div元素，然后按住Ctrl键，同时按方向键。 •按网格吸附增量来调整大小：按住Ctrl+Shift快捷键，同时按方向键。 •用属性面板：在属性面板的【宽】和【高】文本框中输入宽度和高度 值。 •在AP Div元素属性面板的【宽】和【高】文本框选项中分别输入宽度和 高度。输入的值被应用于所有选定的AP Div元素。
•了解AP Div布局。 •定义AP Div元素。 •操作AP Div对象。 •使用AP Div实现网页布局。
网页设计与制作课件第9章
上一页 返回
9.1.2 创建重复区域和重复表格
目标案例
9.1.2．创建重复区域和重复表格
在模板网页中创建重复区域和重复表格，最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：打开站点中名为index.html的网页文件，在文档窗口中选中要设置为 重复区域的内容 。
上一页 返回
上一页 下一页 返回
知识点评
（1）在对库进行修改后，若只更新应用该库的当前文档，则只需要执行 【修改】→【库】→【当前页面】菜单命令；若要更新整个网站上使用该库的文 档，则执行【修改】→【库】→【更新页面】菜单命令。
（2）结合模板和库的结合使用，能为以后的网页修改和更新节约大量的时 间。
本中重 点介绍了创建可编辑区域、重复区域及重复表格的方法，望大家多加练习，更好 的理解和应用。
第9章 模板和库
知识要点 创建模板、创建可编辑区域 创建重复区域、创建重复表格 利用模板创建网页 创建库项目 技能目标 掌握如何利用模板制作网页 掌握如何创建库并应用库项目
本章任务 熟练掌握模板及其组成部分的使用方法 熟练掌握库的使用方法
关闭
本章内容
• 9.1 模板的创建和使用 • 9.1.1 创建模板和创建可编辑区域 • 9.1.2 创建重复区域和重复表格 • 9.1.3 利用模板创建网页 • 9.2 使用库项目 • 9.2.1使用库项目
步骤2：执行【插入】→【模板对象】→【重复区域】菜单命令，弹出“新 建重复区域”对话框，在“名称”文本框中输入重复区域的名称。
步骤3：单击“确定”按钮，即可创建重复区域。 步骤4：将光标放置在文档中要插入重复表格的位置，执行【插入】→【模 板对象】→【重复表格】菜单命令，弹出“插入重复表格”对话框，设置行为2、 列为2、单元格边距为0、单元格间距为0、宽度为200像素、边框为1、起始行为 1、结束行为1，然后输入名称。 步骤5：最后单击“确定”按钮，即可插入重复表格。
9.1.2 创建重复区域和重复表格
目标案例
9.1.2．创建重复区域和重复表格
在模板网页中创建重复区域和重复表格，最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：打开站点中名为index.html的网页文件，在文档窗口中选中要设置为 重复区域的内容 。
上一页 返回
上一页 下一页 返回
知识点评
（1）在对库进行修改后，若只更新应用该库的当前文档，则只需要执行 【修改】→【库】→【当前页面】菜单命令；若要更新整个网站上使用该库的文 档，则执行【修改】→【库】→【更新页面】菜单命令。
（2）结合模板和库的结合使用，能为以后的网页修改和更新节约大量的时 间。
本中重 点介绍了创建可编辑区域、重复区域及重复表格的方法，望大家多加练习，更好 的理解和应用。
第9章 模板和库
知识要点 创建模板、创建可编辑区域 创建重复区域、创建重复表格 利用模板创建网页 创建库项目 技能目标 掌握如何利用模板制作网页 掌握如何创建库并应用库项目
本章任务 熟练掌握模板及其组成部分的使用方法 熟练掌握库的使用方法
关闭
本章内容
• 9.1 模板的创建和使用 • 9.1.1 创建模板和创建可编辑区域 • 9.1.2 创建重复区域和重复表格 • 9.1.3 利用模板创建网页 • 9.2 使用库项目 • 9.2.1使用库项目
步骤2：执行【插入】→【模板对象】→【重复区域】菜单命令，弹出“新 建重复区域”对话框，在“名称”文本框中输入重复区域的名称。
步骤3：单击“确定”按钮，即可创建重复区域。 步骤4：将光标放置在文档中要插入重复表格的位置，执行【插入】→【模 板对象】→【重复表格】菜单命令，弹出“插入重复表格”对话框，设置行为2、 列为2、单元格边距为0、单元格间距为0、宽度为200像素、边框为1、起始行为 1、结束行为1，然后输入名称。 步骤5：最后单击“确定”按钮，即可插入重复表格。
保存框架集与框架_Dreamweaver CS6网页设计立体化教程（双色微课版）_[共2页]
其变为
创建自定义框架
图5-66 选择框架 图5-67 定位鼠标指针
住鼠标左键不放并向右侧拖动，如图5-68所示。
放鼠标即可将下方的框架拆分为两个框架，同时“框架”面板中也将同步更新框架集的结构，效果如图5-69所示。
图5-68 拆分框架 图5-69 完成框架的创建
自定义框架名称
创建的自定义框架默认是没有名称的，若想为其设置名称，可在“框架”面板中将其选择，然后在“属性”面板的“框架名称”文本框
中输入需要的名称即可。
保存框架集
开“另存为”对话框，在“保存在”下拉列表框中设置保存位置，在“文件名”下拉列表框中输入“gsgg.html”，单击按钮即可完成保存框架集的操作，如图5-71所示。
dreamweaver cs6网页设计资料 项目九 使用表单
（6）绑定记录集。在“应用程序”面板中单击“绑定”标签，选择“记 录集(查询)”，打开如图所示的对话框。
在“名称”文本框中输入 Recordset1，在“连接”下拉列表中选择刚定 义好的“date”数据库，在“表格”下拉列表中选择此页面中要用到的 表“main”，单击“确定”按钮。 单击记录集 Recordset1 前的“+”按钮，将表中所有的字段全部显示出 来，然后将所要的字段拖到所要的位置，这样完成之后的页面效果如图所 示。
dreamweaver cs6网页设计资料 项目九 使用表单
本项目中，通过3个工作任务向大家介 绍数据库。交互式动态 HTML 页面的 实现需要以大量数据资源为基础，为 了对数据资源进行高效的存取，自然 会引入数据库系统。在一个服务器动 态网页上，用户需要把数据提交给服 务器并存入数据库，同时用户也需要 从服务器数据库中查询、浏览数据， 并不断地更新维护数据。利用 Dreamweaver 强大的动态开发环境， 可以很方便地实现这些功能。希望通 过这些任务，使读者掌握IIS的安装、 创建数据库、源并与ODBC连接等操 作。
（5）单击“测试”按钮，Dreamweaver 尝试连接到数据库。如果连接 失败，应复查该DSN。如果连接仍失败，应检查 Dreamweaver 用来处 理动态页的文件夹的设置。如果连接成功，会出现如图所示的对话框。
（5）单击“确定”按钮，回到“数据源名称(DSN)”对话框，再单击 “确定”按钮，完成数据源的连接。此时新连接出现在“数据库”面板上， 如图所示。
（9）要绑定 ICON字段的数据到图片地址，首先选中头像图片，单击属 性面板中源文件框后的“浏览文件”按钮，弹出对话框，并做如图 所示 的选择设置，单击“确定”按钮。
这样完成后主页面就如图 所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9.3 项目实训 9.3.1 测试与发布“快乐旅游”网站 9.3.2 测试与发布“多肉植物”网站 9.4 课后练习 9.5 技巧提升
9.3.1
测试与发布“快乐旅游”网站
13
1. 实训目标 本实训的目标是本实训将对“快乐旅游”网站进行测试与发布，通过测试修复浏览器兼容性 和各种链接，然后对站点配置正确的远程信息，并将其上传至申请的主页空间。本实训的最终效 果如右图所示。
口，其中将显示文件的上传进度。文
件上传成功后将自动关闭该对话框。
行业提示：认识站点访问量
11
站点的访问量是衡量网站成功与否的重要指标之一，要想增加网站访问量，则需对网站进行宣 传。下面介绍几种在网站制作行业最常用的站点宣传技巧。 ①导航网站登录。对于流量不大，知名度不高的网站来说，进入导航网站是最有效的提高访问 量的方法之一。 ②友情链接。友情链接可以给一个网站带来稳定的访问量，同时也有助于提升网站在GOOGLE 等搜索引擎中的排名。进行友情链接时，最好能链接一些流量较高的知名网站，或是和网站内容互
9.3.1
测试与发布“快乐旅游”网站
14
2. 专业背景
网站发布标志着网页制作正式告一段落，在正式发布网站之前，必须对网页进行测试。本章只简 要地对网页进行了一些基本设置，在专业领域，网站测试包括了许多方面，如配置测试、兼容性测试、 易用性测试、文档测试以及安全性测试等。假如网站面向全球范围的浏览者，则还应包括本地化测试。 另外，使用不同技术制作的网站程序应该在不同的环境中进行测试。目前主流的一些网站程序，
9.1.3 检测下载速度
在“属性”面板上方的状态栏右侧可看到当前网页的下载速度为3秒。 按【Ctrl+U】组合 键打开“首选参数”对话框，在“分类”列表框中选择“窗口大小”选项，在右侧的“窗口大 小”列表框中可更改网页窗口的宽度和高度，在“连接速度”下拉列表框中可更改下载速度， 完成后单击 按钮即可。
9.2.2
发布站点
9
1. 配置远程信息 打开“管理站点”对话框，在列表框中选择“qlqxsite”选项，单击“编辑当前选定的站点” 按钮，在打开的对话框左侧选择“服务器”选项，单击界面右侧的“添加”按钮，在打开的对 话框中进行相关设置即可。
9.2.2
发布站点
10
2. 发布站点 打开“文件”面板，选择需上传 的网页文件，然后单击“上传文件” 按钮。当Dreamweaver连接到Web服 务器后，将打开“后台文件活动”窗
如ASP、ASP .NET和PHP等都需在不同的环境中进行测试得到测试结果。因此测试网站前了解其运行
环境，不仅利于测试，也对以后选购什么样的网站空间奠定了基础。
9.3.1
测试与发布“快乐旅游”网站
15
3. 操作思路 完成本实训主要涉及网页兼容性测试、链接测试、下载速度测试、远程信息配置以及站点的 发布等操作。
5
内容导航
9.1 课堂案例：测试“千履千寻公司” 9.2 课堂案例：发布“千履千寻公司”网站 9.2.1 申请主页空间 9.2.2 发布站点 行业提示：认识站点访问量 9.3 项目实训 9.4 课后练习
9.5 技巧提升
9.2.1 申请主页空间
1. 注册并申请主页空间 访问虎翼网，单击网页右上方的“免费试用，立即注册”图像超链接，打开“快速注册”
9.1.2 检查并修复链接
选择【文件】/【检查页】/【链接】菜单命令， 打开“链接检查器”对话框，在“显示”
4
下拉列表框中选择“断掉的链接”选项，此时将显示当前网页中断开的链接，在“断掉的链接” 栏中的路径处单击鼠标使路径呈可编辑状态，单击右侧的“浏览文件夹”按钮重新设置。在 “显示”下拉列表框中选择“外部链接”选项，此时将检查当前网页中的所有外部链接， 在 “外部链接”栏下的路径处单击鼠标使其呈可编辑状态，重新输入正确的外部链接地址即可
9.3.2
测试与发布“多肉植物”网站
16
1. 实训目标 本实训的目标是将制作的“多肉植 物”网站进行站点配置，并将其上传至 申请的主页空间。本实训的最终效果如 右图所示。
9.3.2
测试与发布“多肉植物”网站
17
2. 专业背景
网站的登录页面通常是一个动态网页，用户通过账号登录网站，网站后台利用这种动态交互功能 记录用户的登录信息，便于网站的查找和管理，这是常见的登录网页的设计方法。其次，一些注册网 页等需要向网站提交数据的页面也基本是动态网页，这种设计方法的优点在于加强了网页交互性，提 高了网站管理，信息收集等。
9.1.1 兼容性测试
单击工具栏上的“检查浏览器兼容性”按钮，在打开的下拉列表中选择“设置”选项，打 开“目标浏览器”对话框，在“浏览器最低版本”列表框中设置各种目标浏览器允许显示此网
3
页的最低版本，完成后单击
按钮。再次单击工具栏上的“检查浏览器兼容性”按钮，在
打开的下拉列表中选择“检查浏览器兼容性”选项，打开“浏览器兼容性”面板，在列表框中 将显示检查到的兼容性错误，若未检测到错误，将提示未检测到任何问题。
高等教育立体化精品系列规划教材
第9章 网站的测试与发布
Dreamweaver CS6网页设计立体化教程（微课版）
内容导航
9.1 课堂案例：测试“千履千寻公司” 9.1.1 兼容性测试 9.1.2 检查并修复链接 9.1.3 检测下载速度 9.2 课堂案例：发布“千履千寻公司”网站 9.3 项目实训 9.4 课后练习 9.5 技巧提升
7
界面，在其中输入并设置注册信息，单击
按钮。成功后将打开“注册成功”的提示对话
框。 稍后网页将自动跳转到对应页面，在其中可选择试用的类型。
9.2.1 申请主页空间
2. 开通主页空间 单击需开通机型右下方的“试用该服务”超链接。 打开提示对话框，单击
8Байду номын сангаас
按钮。根据
提示单击网页右侧的“售前咨询”超链接，在其中进行相关设置。
补的网站，然后再是同类网站。
③搜索引擎登录。搜索引擎给网站带来的流量非常大，登录搜索引擎可以使用专门的登录软件 （如“登录骑兵”等），也可以采用手工登录的方式。
④网络广告投放。网络广告的投放虽然花钱，但给网站带来的流量却很可观。。
内容导航
9.1 课堂案例：测试“千履千寻公司”
9.2 课堂案例：发布“千履千寻公司”网站
9.3.1
测试与发布“快乐旅游”网站
13
1. 实训目标 本实训的目标是本实训将对“快乐旅游”网站进行测试与发布，通过测试修复浏览器兼容性 和各种链接，然后对站点配置正确的远程信息，并将其上传至申请的主页空间。本实训的最终效 果如右图所示。
口，其中将显示文件的上传进度。文
件上传成功后将自动关闭该对话框。
行业提示：认识站点访问量
11
站点的访问量是衡量网站成功与否的重要指标之一，要想增加网站访问量，则需对网站进行宣 传。下面介绍几种在网站制作行业最常用的站点宣传技巧。 ①导航网站登录。对于流量不大，知名度不高的网站来说，进入导航网站是最有效的提高访问 量的方法之一。 ②友情链接。友情链接可以给一个网站带来稳定的访问量，同时也有助于提升网站在GOOGLE 等搜索引擎中的排名。进行友情链接时，最好能链接一些流量较高的知名网站，或是和网站内容互
9.3.1
测试与发布“快乐旅游”网站
14
2. 专业背景
网站发布标志着网页制作正式告一段落，在正式发布网站之前，必须对网页进行测试。本章只简 要地对网页进行了一些基本设置，在专业领域，网站测试包括了许多方面，如配置测试、兼容性测试、 易用性测试、文档测试以及安全性测试等。假如网站面向全球范围的浏览者，则还应包括本地化测试。 另外，使用不同技术制作的网站程序应该在不同的环境中进行测试。目前主流的一些网站程序，
9.1.3 检测下载速度
在“属性”面板上方的状态栏右侧可看到当前网页的下载速度为3秒。 按【Ctrl+U】组合 键打开“首选参数”对话框，在“分类”列表框中选择“窗口大小”选项，在右侧的“窗口大 小”列表框中可更改网页窗口的宽度和高度，在“连接速度”下拉列表框中可更改下载速度， 完成后单击 按钮即可。
9.2.2
发布站点
9
1. 配置远程信息 打开“管理站点”对话框，在列表框中选择“qlqxsite”选项，单击“编辑当前选定的站点” 按钮，在打开的对话框左侧选择“服务器”选项，单击界面右侧的“添加”按钮，在打开的对 话框中进行相关设置即可。
9.2.2
发布站点
10
2. 发布站点 打开“文件”面板，选择需上传 的网页文件，然后单击“上传文件” 按钮。当Dreamweaver连接到Web服 务器后，将打开“后台文件活动”窗
如ASP、ASP .NET和PHP等都需在不同的环境中进行测试得到测试结果。因此测试网站前了解其运行
环境，不仅利于测试，也对以后选购什么样的网站空间奠定了基础。
9.3.1
测试与发布“快乐旅游”网站
15
3. 操作思路 完成本实训主要涉及网页兼容性测试、链接测试、下载速度测试、远程信息配置以及站点的 发布等操作。
5
内容导航
9.1 课堂案例：测试“千履千寻公司” 9.2 课堂案例：发布“千履千寻公司”网站 9.2.1 申请主页空间 9.2.2 发布站点 行业提示：认识站点访问量 9.3 项目实训 9.4 课后练习
9.5 技巧提升
9.2.1 申请主页空间
1. 注册并申请主页空间 访问虎翼网，单击网页右上方的“免费试用，立即注册”图像超链接，打开“快速注册”
9.1.2 检查并修复链接
选择【文件】/【检查页】/【链接】菜单命令， 打开“链接检查器”对话框，在“显示”
4
下拉列表框中选择“断掉的链接”选项，此时将显示当前网页中断开的链接，在“断掉的链接” 栏中的路径处单击鼠标使路径呈可编辑状态，单击右侧的“浏览文件夹”按钮重新设置。在 “显示”下拉列表框中选择“外部链接”选项，此时将检查当前网页中的所有外部链接， 在 “外部链接”栏下的路径处单击鼠标使其呈可编辑状态，重新输入正确的外部链接地址即可
9.3.2
测试与发布“多肉植物”网站
16
1. 实训目标 本实训的目标是将制作的“多肉植 物”网站进行站点配置，并将其上传至 申请的主页空间。本实训的最终效果如 右图所示。
9.3.2
测试与发布“多肉植物”网站
17
2. 专业背景
网站的登录页面通常是一个动态网页，用户通过账号登录网站，网站后台利用这种动态交互功能 记录用户的登录信息，便于网站的查找和管理，这是常见的登录网页的设计方法。其次，一些注册网 页等需要向网站提交数据的页面也基本是动态网页，这种设计方法的优点在于加强了网页交互性，提 高了网站管理，信息收集等。
9.1.1 兼容性测试
单击工具栏上的“检查浏览器兼容性”按钮，在打开的下拉列表中选择“设置”选项，打 开“目标浏览器”对话框，在“浏览器最低版本”列表框中设置各种目标浏览器允许显示此网
3
页的最低版本，完成后单击
按钮。再次单击工具栏上的“检查浏览器兼容性”按钮，在
打开的下拉列表中选择“检查浏览器兼容性”选项，打开“浏览器兼容性”面板，在列表框中 将显示检查到的兼容性错误，若未检测到错误，将提示未检测到任何问题。
高等教育立体化精品系列规划教材
第9章 网站的测试与发布
Dreamweaver CS6网页设计立体化教程（微课版）
内容导航
9.1 课堂案例：测试“千履千寻公司” 9.1.1 兼容性测试 9.1.2 检查并修复链接 9.1.3 检测下载速度 9.2 课堂案例：发布“千履千寻公司”网站 9.3 项目实训 9.4 课后练习 9.5 技巧提升
7
界面，在其中输入并设置注册信息，单击
按钮。成功后将打开“注册成功”的提示对话
框。 稍后网页将自动跳转到对应页面，在其中可选择试用的类型。
9.2.1 申请主页空间
2. 开通主页空间 单击需开通机型右下方的“试用该服务”超链接。 打开提示对话框，单击
8Байду номын сангаас
按钮。根据
提示单击网页右侧的“售前咨询”超链接，在其中进行相关设置。
补的网站，然后再是同类网站。
③搜索引擎登录。搜索引擎给网站带来的流量非常大，登录搜索引擎可以使用专门的登录软件 （如“登录骑兵”等），也可以采用手工登录的方式。
④网络广告投放。网络广告的投放虽然花钱，但给网站带来的流量却很可观。。
内容导航
9.1 课堂案例：测试“千履千寻公司”
9.2 课堂案例：发布“千履千寻公司”网站