《Dreamweaver网页制作实训教程》教学课件 第9章

-----WORD格式--可编辑--专业资料-----

--完整版学习资料分享----

第9章 使用AP Div布局页面

一、填空题

1、通过设置AP Div的（ ）属性可以使多个AP Div发生堆叠，也就是多重叠加的效果。

正确答案：z轴

2、如果要选定多个AP Div，只要按住（ ）键不放，在【AP元素】面板中逐个单击AP Div的名称即可。

正确答案：Shift

3、在【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键不放，按住鼠标左键并拖曳

正确答案：D

2、关于【AP元素】面板的说法错误的有（ ）。

A、双击AP Div的名称，可以对AP Div进行重命名

B、单击AP Div后面的数字可以修改AP Div的z轴顺序

C、勾选【防止重叠】复选框可以禁止AP Div重叠

D、在AP Div的名称前面有一个眼睛图标，单击眼睛图标可锁定AP Div

正确答案：D

3、关于选定AP Div的说法错误的有（ ）。

A、单击文档中的图标来选定层

B、将光标置于AP Div内，然后在文档窗口底边标签条中选择“

C、单击AP Div的边框线

D、如果要选定两个以上的AP Div，只要按住Alt键，然后逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可

《信息技术部》实训报告

信息技术部·2017年 课程实训报告 实训名称 交换图像专题练习 实验台序号

姓 名 组 号

组 长 实训日期

团队成员：注：团队成员贡献百分比之和为1

姓 名 班 级 学 号 贡献百分比 得 分

教师评分：

一、实训目的和要求

【实训目的】

通过Dreamweaver CS5的基本操作和“Apple中国”主页的制作过程，学会以下制作项目内容

1、 会设置主页内的Flash动画

2、 设置文档页面属性（网页标题，编码，超级链接颜色等）

3、 交换图像效果的使用

4、 插入特殊字符

【实验原理】

利用DW软件制作本地网页文件（以静态网页为主），网页来源于客户需求和指定预览效果图

【实训要求和课时】

2课时

【实训设备、材料和工具】

台式计算机（预装Windows 7及以上操作系统，预装Adobe Dreamweaver CS5网页制作软件等），

给定的网站预览效果图

《信息技术部》实训报告

信息技术部

·

2017年 二、实训拓扑

三、实训项目过程（包括主要步骤和说明）

【实训步骤】

任务一：制作“Apple中国”主页

1、 在驱动盘下新建文件夹，建立index主页这里不再赘述

2、 根据跟踪图像，在index插入6X4表格，宽度980，居中

3、 合并表格第一行，并插入“16.swf”动画，居中显示

任务二：图片编辑

1、 合并表格第二行，插入“1.jpg”，并在该图片的属性检查器中进行如下设置

其中，ID是用来建立交换图像效果使用的，链接处“#”表示为空链接。

2、 合并表格第三行，并对第三行进行如下设置

3、平均分布第四行各列，并在每个单元格中插入1行1列的嵌套表格，如下图所示 《信息技术部》实训报告

信息技术部·2017年

这里第四行原本有4列，第四行总宽度980，自行进行平均分布各列，加入嵌套表格后，设置每个

嵌套表格为水平居中对齐，然后插入相应图片

4、 分别为四张插入的图片进行属性检查器ID命名，为交换图像效果做准备，设置如下

本文为网上收集整理，如需要该文档得朋友，欢迎下载使用

精品文档，word文档 CSS混沌初开I：导航菜单素材的设计

现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个局部：第一讲主要是关于如何在PS中制作导航按钮素材；第二局部主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一局部是如何整合CSS和XHTML。

有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：

玻璃质感导航图片的制作：

首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮〞，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光〞，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：

新建一个名为“网点〞的图层，用1px的铅笔工具在适当的位置绘制几个小点，例如中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序： 本文为网上收集整理，如需要该文档得朋友，欢迎下载使用

精品文档，word文档 接着我们可以通过钢笔工具绘制路径创立选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？

鼠标经过导航时的翻转图片：

创立翻转效果图片，我们只要简单的在原有素材根底上调整色调就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在例如中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这局部教程涉及到一些Photoshop的根本知识，如果你不是很了解，建议先学习一些PS的入门根底，毕竟Adobe合并了*之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计：

- 1 - 计算机技术与软件工程学院

《网站建设》实训报告

一、实训目的

1.学会建站点，在站点里面新建文件和文件夹，将所有的素材统一放在站点里面；

2.了解dw的主要功能以及学会用dw制作网页；

3.熟练掌握静态网页的设计与制造过程；

4.了解并逐步运用网页设计中的标识（logo）'视觉设计'色彩设计 版式构成等网页整体建设技术和方法；

5.练习在网站建设中使用其他的多媒体软件，例如：flash、ps

6.编制网站建设说明书与课程设计总结;

7.培养文献查询能力 实习方案设计能力自助实验能力实习报告撰写能力;

二、实训准备

全面复习DreamWeaver网页制作技术:

1、网页制作基本技术（网页创建与文字输入.文字属性设置. 文字排 方法.图片的插入与设置.文字与图片混排.动画与摄像的使用等）

2、站点的建设和管理

3、表格的使用（表格的插入与设置.表格模板 .使用表格技术制作导航条等）

4、div元素的使用

5、css样式的使用，css样式的选择与属性

三、实训要求

建立一个杨乐乐的官网的静态网页，网页的最上面是一个flash动画，接下来就是一个就是网页的一个导航条，包括的版块有首页、我是乐乐、乐乐靓影、扬言乐事、乐在其中。乐乐影音、乐迷寄语、进入论坛，要求版块的图像必须是鼠标经过的图像，这样当鼠标放在版块上就有被选中的感觉，网页中的字体必须是统一的大小和样式

四、实训内容（步骤及程序）

步骤：1、插入一个一行一列的表格，表框粗细为0，单元格边距为0，单元格间距也为0，在一行一列的表格中插入动画top1.swf的动画，将表格的宽度设置为flash的宽度1002，对齐方式采用居中。

width="1002" height="211">

- 2 -

width="1002" height="211">