网页设计 第15周 星期二 第5、6节课 题
综合实例（一）
教学目标
1、表格的应用；2、深圳先进技术研究院主页
教学重点
表格的应用
教学难点
表格的应用
教
学
过
程
一、实例分析效果图如下：
菜单有：
首页研究院概况新闻资讯科技研发人才教育成果转化文化领地广纳人才内部信息联系我们
English
2、分析
使用嵌套表格来完成本实例，其中大表格为4行5列，表格宽度为760像素，第一行嵌套插入1行11列的表格用于放置11个菜单，高度为25像素；第二行用于放置网标和功能菜单栏，可嵌套插入一个3行3列表格完成；第三行第一列宽150像素，用于放功能菜单或图片，第二列和第四列宽
10像素，用来作为分界线，第五列宽150像素，用于放置临时内容，中间第3列用于放主要内容，可嵌套插入表格；第四行用于放置网站信息，嵌套2行1列表格。
二、上机练习 三、小结、作业
网页设计教案 第15周 星期四 第5、6节课 题
综合实例二
教学目标
1、层制作下拉菜单；2、深圳先进技术研究院首页
教学重点
层的应用
教学难点
层属性设置
教
学
过
程
复习：完成深圳先进技术研究院首页表格操作讲授新课：
层的操作层的创建层基本属性设置层高级属性设置（行为面板，层显示、隐藏等操作）
层的嵌套操作
5、具体应用二、实例（接上次课）
1、将光标定位在“研究院概况”所在单元格，单击“插入”菜单，选择“层”命令，在该单元格里插入一个层，调整层的位置（注意，层的上边框一定要和单元格一下边框重合，否则制作出的下拉菜单功能是不能实现的）。
2、在层中插入一个6行1列的表格，表格宽度为100像素，单元格高度均为20像素，在每一个单元格中分别输入内容：院长致词、先进院简介、先进院领导、组织机构、创新管理和园区参观。
3、在行为面板中为层添加高级属性，当鼠标移动到单元格上时，下拉菜单（层）显示出来，当鼠标移开单元格时，下拉菜单（层）隐藏。
4、用同样的方法完成其他几个下拉菜单的制作：
5、浏览保存。
三、上机练习：完成本主页（主要下拉菜单制作）
四、小结、作业
网页设计 第15周 星期五 第5、6节课 题
动态图片效果
教学目标
1、掌握JavaScript脚本的应用；2、网页中图片的动态效果
教学重点
JavaScript脚本的应用
教学难点
JavaScript脚本的应用
教
学
过
程
复习：1、利用层制作下拉菜单；
2、回忆“深圳先进技术研究院”首页制作过程讲授新课：
一、动态图片效果
1、制作前准备站点及站点文件夹创建；
拷贝4幅JPG/JPEG图片到站点文件夹下的IMAGES子文件夹下面；
在DW2004编辑状态下新建一文档，然后切换到“代码视图下”。
2、代码：4）在<body></body>标签内输入如下代码
在代码中将tp[0-3]中的图片路径进行更改，换成在第三步中拷入的四幅图片；
保存浏览，完成动态效果的操作。
上机练习小结、练习
网页设计 第16周 星期二 第5、6节课 题
T型网站实例
教学目标
表格的应用
教学重点
表格的应用
教学难点
表格的应用
教
学
过
程
复习：动态图片切换效果制作过程讲授新课：
一、T型网站网站效果图：
2、分析方法之一：整个页面可以利用三个大表格加嵌套表格来完成方法之二：整个页面可以利用一个大表格加嵌套表格来完成方法之三：可以利用布局表格和单元格来完成。
利用方法一来完成本页面其中一制作可这样考虑：三个表格，第一个表格也就是最上面图片加菜单栏部分，可用2行2列表格来完成，第1行第一个单元格用于放置网标，第二个单元格分别放置“关于我们”、“站点导航”和“联系我们”。第二行可以嵌套插入一个1行7列的表格用于放置功能菜单，分别是：业内动态、佳作欣赏、设计竞赛、理论文献、人物访谈和软件精选。
内容区域，可以用一个1行2列表格完成，左边一列嵌套表格用于放置功能菜单，右边一列为主要区域，也可用嵌套表格完成。
最下面一个表格用来放置基本信息。
二、上机练习三、小结、作业
网页设计教案 第16周 星期四 第5、6节课 题
网页中透明Flash效果
教学目标
1、表格的应用；2、Flash的应用
教学重点
Flash属性设置
教学难点
Flash属性设置
教
学
过
程
复习：T型网站制造过程讲授新课：
一、网页中透明FLASH效果
1、创作思想打开 Dreamweaver MX 2004 软件新建页面，然后在页面中插入表格，并在表格里插入 Flash 文件，设置 Flash 文件的参数，制作透明背景的 Flash 。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（ 2 ）插入表格和设置背景。为使 Flash 的效果更加明显，先插入表格并设置背景图。
（ 3 ）设置完背景后，可以插入 Flash 文件。
（ 4 ）接着设置 Flash 文件的参数，如下图所示。
（ 5 ）保存文件，完成操作。在网络上看到自己喜欢的 Flash 作品，想把它引用到自己的网站，但又不喜欢底色，就可以用本例介绍的这种方法，使它透明后再使用。
二、上机练习三、小结网页中表格操作网页中FLASH应用及参数设置四、作业
网页设计 第16周 星期五 第5、6节课 题
Dreamweaver中插入Flash文本
教学目标
DW中插入Flash文本
教学重点
媒体菜单的应用
教学难点
Flash文本插入
教
学
过
程
复习：网页中透明FLASH效果制作过程讲授新课：
一、Dreamweaver中插入Flash文本
1、创作思想
打开 Dreamweaver MX 2004 软件并新建页面，然后单击【插入】 | 【媒体】 | 【 Flash 文本】命令，打开【插入 Flash 文本】对话框，在该对话框中输入相应的参数，就可以制作出动感的 Flash 文本了。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件，新建文件并保存页面。
（ 2 ）插入 Flash 文本并输入参数，如图所示。
（3 ）保存文件，完成操作。
注意：Dreamweaver MX 2004 可以快速制作简单的 Flash 文件，如果要制作的 Flash 效果要求不高，不妨考虑这种方法。但是，如果想制作比较复杂，水平较高的动画就只能使用专业的动画制作软件，如三剑客之一的Flash MX2004。
二、上机练习三、小结、作业
网页设计 第17周 星期二 第5、6节课 题
随机播放背景音乐网页效果
教学目标
行为及行为面板的应用
教学重点
行为中播放声音的应用
教学难点
行为中播放声音的应用
教
学
过
程
复习：在DW2004中插入Flash文本制作过程讲授新课：
一、随机播放背景音乐网页
1、创作思想
打开 Dreamweaver MX 2004 软件新建页面，再选择【行为】面板下的【 + 】选项插播音乐，设置参数。然后重复此操作 4 次，就可以随机播放背景音乐。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（ 2 ）选择好“标签”页，在“行为”面板中插入要播放的音乐文件，如图所示。
（ 3 ）接着选择插入的声音文件，打开参数窗口，设置其参数，如图所示。
（ 4 ）重复执行第二步和第三步操作4 次，这样就添加了 4 种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放。 （ 5 ）保存文件，完成操作。适当放置轻松的音乐背景，可以让用户感觉更轻松、愉快。
二、上机练习三、小结四、作业
网页设计教案 第17周 星期四 第5、6节课 题
制作1px边框表格
教学目标
1、网页中代码的应用；2、网页中CSS的应用
教学重点
代码的含义
教学难点
代码的含义
教
学
过
程
复习：网页中实现背景音乐随机播放效果制作过程讲授新课：
一、细表格边框制作方法一：用嵌套表格用两个表格嵌套，外层的表格的长与宽比里层的多出2px，并设置对齐属性为水平居中、垂直居中，然后把外层表格的背景设为你需要的边框颜色，里层表格背景设为与网页背景相同，这样就实现我们的愿望了，实例如下：
方法二：设置亮、暗边框颜色
表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性，把表格边框(border)设为1px，亮边框(bordercolorlight)设为背景色，暗边框(bordercolordark)设为你需要的实际边框颜色就可以了，实列如下：
方法三：用CSS定义（一）
方法四：用CSS定义（二）
注意：这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性，否则不会出现预想的结果。
二、上机练习三、小结、作业
网页设计 第17周 星期五 第5、6节课 题
网页表格特效
教学目标
Table标签的应用
教学重点
Table标签
教学难点
Table标签
教
学
过
程
复习：细表格边框制作方法讲授新课：
一、网页表格特效
1、彩色虚线表格
2、鼠标指向单元格变色
3、立体表格
4、表格嵌套
5、半透明表格
6、阴影表格二、上机练习三、小结四、作业
网页设计 第18周 星期二 第5、6节课 题
论坛设计
教学目标
数据库应用
教学重点
数据库
教学难点
数据库
教
学
过
程
复习：表格几种特效制作方法讲授新课：
一、论坛结构分析
（1） 网友注册和管理模块
（2） 文章显示模块
（3） 发表文章模块
（4） 文章审阅模块表的结构：
（1）作者表（用来存放作者讯息）：
ID：文本类型，必填。是网友代号。
密码： 文本类型，必填。
昵称： 文本类型，必填。
EMAIL,文本类型，必填。
职务： 数字类型，必填。-1代表普通网友，0代表站长。大于0的数字代表版主。
文章数：数字类型，必填。网友发表的文章总数。
姓名： 文本类型，可选。
性别： 文本类型，可选。
电话： 文本类型，可选。
（2）内容表（用来存放具体文章内容和相关讯息）：
ID：自动编号，并为其设置索引，以加快搜寻的速度。
看板ID：数字类型，来自看板列表，表示文章所属看板。
主题ID：数字类型，来自主题表，表示文章所属主题。
作者ID：文本类型，来自作者表，表示文章的作者。
日期：日期/时间类型，预置初值为函数NOW()，自动取系统当前时间为其值。
标题：文本类型。文章的标题。
发表：是/否类型，为"真"时表示文章已经通过审阅，可以发表；为"否"表示文章尚待审阅。
推荐度：数字类型，文章的推荐程度。
内容：备注类型，文章的具体内容。
点击次数：数字类型，文章的点击次数。
（3）看板列表（用来存放有关看板的讯息）
（4）主题表（用来存放有关主题的讯息）
二、构建构建主窗体构建文章显示模块三、小结作业
网页设计教案 第18周 星期四 第5、6节课 题
状态栏动态文本
教学目标
JavaScript语言应用
教学重点
statusMessageObject函数应用
教学难点
程序代码
教
学
过
程
<script language="JavaScript">
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage }
function clearMessage() { this.pos = POSITION }
var POSITION = 100
var DELAY = 5
var MESSAGE = "欢迎光临! Welcome to www.dczz210.net "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " " }
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset() }
setTimeout ('scroller()',scroll.delay) }
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *=,75}
else {jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
} else { window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay); return false }
return true }
snapIn(100,0); </script>
网页设计 第19周 星期二 第5、6节课 题
行为详解(一)
教学目标
行为的应用
教学重点
行为的应用
教学难点
行为的应用
教
学
过
程
复习：
讲授新课：
一、行为操作
1）调用 JavaScript
1、选取物件，并打开 Behaviors inspector
2、在行为面板中点击,+,号，打开下拉选单。在其中选择,Call JavaScript,动作
3、在打开的窗口中录入 JavaScript 语句或变量。我们可以录入,window.close()
4、点击确定退出对话框。并确认其缺省事件值为“OnClick”
5、F12预览一下，当我们点击按钮时，浏览器会自动关闭。
2）改变属性
1、选择在网页中己存在的一个层，假定它的名称为,LyrRed 。
2、在行为面板中点击,+,号，打开下拉选单。在其中选择,Change Property,动作。
3、这时将弹出一个对话框，修改其属。注意，只有当你选择了正确的目标浏览器时，这个效果才能正确显示出来。
4、本例子是当用户用鼠标点击层时，层的背景色变为我们定义的,#f1fafa 颜色。
3）检查目标浏览器
4）拖动层
1、在网页中加入一个层，使用加入图片或者改变背颜色的方法使得此层清楚可见。
2、直接打开行为面板，并选点,”按键，在下拉菜单中选择 Drag Layer。
3、在弹出的对话框中按要求定制。
4、如果你不愿意使用 Onload 事件，也可以使用 OnMouseOver 事件，但之前你必须在层中设置一个空链接并以 OnMouseOver 事件来触发 Drag Layer。
5）在窗口中打开链接使用本功能可以轻松实现在窗口中打开链接的功能。
6）弹出式窗口
7）弹出信息对话框选取按钮物件，并打开行为面板。在行为面板中点击“+”号，打开下拉选单。在其中选择“Popup Message”动作。在弹出的对话框中录入需要显示的文字即可。
8）显示隐藏层
1、打开行为面板。在行为面板中点击“+”号，打开下拉选单。在其中选择“Show-Hide Layers”动作。选中其中的一个层，再点击下面的“显示”或“隐藏”按钮来定制层的显隐。
二、上机练习三、小结四、作业
网页设计教案 第19周 星期四 第5、6节课 题
行为详解(二)
教学目标
行为的应用
教学重点
行为的应用
教学难点
行为的应用
教
学
过
程
复习：
调用 JavaScript、改变属性、检查目标浏览器、拖动层、在窗口中打开链接、弹出式窗口、弹出信息对话框、显示隐藏层等行为的应用。
讲授新课：
一、行为应用
9）交换图片
1、首先我们要准备两个图片备用，注意这两个图片的尺寸需要一致，否则会因尺寸的不同而导至后一组图片拉伸或变形。
2、使用菜单命令插入图片序列中的第一幅图片（PIC1）。
3、打开行为面板。点击“+”号，打开下拉选单。在其中选择,Swap Image”动作。
4、在弹出的对话框中，选取图片序列中的第二幅图片（PIC2），有必要同时选中“预下载图像”与“鼠标移出时恢复图像”选项。
注意：事实上接受用户鼠标的动作而转换图像可以最多达到四幅：原始图、鼠标悬浮时显示图、鼠标点击时显示图、鼠标点击后显示图。
10）时间轴跳转
1、打开一个含有Timeline的页面，打开时间轴。
2、选择物件，并打开行为面板，点击“+”号，打开下拉选单。其中选择“Go To Timeline”动作，并适当选择命令。
3、在下拉菜单中选择要控制的时线，并键入跳至的帧数。
4、点击确定，回到Behaviors inspector中，确认一种动作。
11）检测表单合法性
1、先在页面中插入一个表单，为其命名。选取表单，打开行为面板，点击“+”号，打开下拉选单。在其中选择“Validate Form”命令。
2、在弹出的对话框和上半部选择需要控制的表单项，并在Value项中选中Required。
3、点击确定回到行为面板，确定动作为：OnBlur，预览即可。
二、上机练习三、小结调用 JavaScript、改变属性、检查目标浏览器、拖动层、在窗口中打开链接、弹出式窗口、弹出信息对话框、显示隐藏层、交换图片、时间轴跳转、检测表单合法性等行为的应用。
四、作业
网页设计 第19周 星期五 第5、6节课 题
用户登录实例
教学目标
1、ACCESS数据库的应用；2、ASP动态网页制作
教学重点
ASP动态网页制作
教学难点
ASP动态网页制作
教
学
过
程
一、数据库创建
1、ACCESS创建如下所示的数据表：
2、在表中输入适当的测度数据，如
Administrator/管理员/111111/Admi/1995年8月6日
Snow/飞雪/222222/guest/1993年10月1日
Winter/小猪/333333/user/2002年5月5日二、创建站点高级选项卡中本地信息设置为与一般静态网页设置相同；
测试服务器类型与静态网页设置不同，这里需要设置为“ASP JAVASCRIPT”，访问设置为“本地/网络”，并设置“测试服务器文件夹”。
数据库链接。
三、用户注册页面设计用表格完成如下界面设计：
对文本框进行数据和记录绑定及其它操作四、上机练习五、小结、作业
网页设计 第20周 星期二 第5、6节课 题
技能考核试卷评讲
教学目标
1、表格的定位；2、框架操作及应用
教学重点
表格和框架操作
教学难点
表格和框架操作
教
学
过
程
一、基础知识部分（20分）
站点创建：姓名（D：\班级号+学号）
二、主页面（50分）
说明：图片自己在PC上查找，FLASH动画自行制作，菜单栏一链接到框架页面KJ.htm；页面具有一定的主题思想，有动的动画。
三、框架部分（30分）
要求：1、框架页kj.htm为上方固定，左侧嵌套及页面一（YM01）
页面一：制作简单的文字页面即可
2、链接正常；
网页设计教案 第20周 星期四 第5、6节课 题
综合实例
教学目标
1、掌握表格定位操作；2、联想集团主页制作
教学重点
表格操作
教学难点
表格操作
教
学
过
程
一、实例分析效果预览：
分析如下：
二、上机练习三、小结、作业
网页设计 第20周 星期五 第5、6节课 题
常见网页版面
教学目标
常见网页版面及其功能
教学重点
了解常用网页版面
教学难点
不同网页版面的功能
教
学
过
程
一、常用网页版面
1、版面一
这是一种常见版面配置，多数企业网站都采用这种形式制作，好处在于多数使用者均已习惯这种浏览方式，有助于增进使用者对于网站了解，在功能菜单部分，可以用主选单搭配次菜单方式，对于内容或功能分类项目较多的网站非常适用。
2、版面2
这是一种入口网站或新闻类内容网站较常用的配置，将主题内容区集中在画面中央，配合左方的功能菜单做内容转换，视觉上很流畅
，右方的临时内容多作为广告宣传使用，也有部分网站将此作业其他单元的讯息提示之用。
3、版面3
这种配置多见于内容信息比较少的页面，许多网站也利用这种结构作业首页的欢迎使用，主题内容区多以大面积的图像制作并与标题结合，教育单位网站常见于这种版式，但此版式不利用子页，此版式较单纯，功能不复杂的网站较适用。
4,5、
二、上机练习5种版面三、小结、作业
网页设计 第21周
课 题
期末复习
教学目标
教学重点
教学难点
教
学
过
程
综合实例（一）
教学目标
1、表格的应用；2、深圳先进技术研究院主页
教学重点
表格的应用
教学难点
表格的应用
教
学
过
程
一、实例分析效果图如下：
菜单有：
首页研究院概况新闻资讯科技研发人才教育成果转化文化领地广纳人才内部信息联系我们
English
2、分析
使用嵌套表格来完成本实例，其中大表格为4行5列，表格宽度为760像素，第一行嵌套插入1行11列的表格用于放置11个菜单，高度为25像素；第二行用于放置网标和功能菜单栏，可嵌套插入一个3行3列表格完成；第三行第一列宽150像素，用于放功能菜单或图片，第二列和第四列宽
10像素，用来作为分界线，第五列宽150像素，用于放置临时内容，中间第3列用于放主要内容，可嵌套插入表格；第四行用于放置网站信息，嵌套2行1列表格。
二、上机练习 三、小结、作业
网页设计教案 第15周 星期四 第5、6节课 题
综合实例二
教学目标
1、层制作下拉菜单；2、深圳先进技术研究院首页
教学重点
层的应用
教学难点
层属性设置
教
学
过
程
复习：完成深圳先进技术研究院首页表格操作讲授新课：
层的操作层的创建层基本属性设置层高级属性设置（行为面板，层显示、隐藏等操作）
层的嵌套操作
5、具体应用二、实例（接上次课）
1、将光标定位在“研究院概况”所在单元格，单击“插入”菜单，选择“层”命令，在该单元格里插入一个层，调整层的位置（注意，层的上边框一定要和单元格一下边框重合，否则制作出的下拉菜单功能是不能实现的）。
2、在层中插入一个6行1列的表格，表格宽度为100像素，单元格高度均为20像素，在每一个单元格中分别输入内容：院长致词、先进院简介、先进院领导、组织机构、创新管理和园区参观。
3、在行为面板中为层添加高级属性，当鼠标移动到单元格上时，下拉菜单（层）显示出来，当鼠标移开单元格时，下拉菜单（层）隐藏。
4、用同样的方法完成其他几个下拉菜单的制作：
5、浏览保存。
三、上机练习：完成本主页（主要下拉菜单制作）
四、小结、作业
网页设计 第15周 星期五 第5、6节课 题
动态图片效果
教学目标
1、掌握JavaScript脚本的应用；2、网页中图片的动态效果
教学重点
JavaScript脚本的应用
教学难点
JavaScript脚本的应用
教
学
过
程
复习：1、利用层制作下拉菜单；
2、回忆“深圳先进技术研究院”首页制作过程讲授新课：
一、动态图片效果
1、制作前准备站点及站点文件夹创建；
拷贝4幅JPG/JPEG图片到站点文件夹下的IMAGES子文件夹下面；
在DW2004编辑状态下新建一文档，然后切换到“代码视图下”。
2、代码：4）在<body></body>标签内输入如下代码
在代码中将tp[0-3]中的图片路径进行更改，换成在第三步中拷入的四幅图片；
保存浏览，完成动态效果的操作。
上机练习小结、练习
网页设计 第16周 星期二 第5、6节课 题
T型网站实例
教学目标
表格的应用
教学重点
表格的应用
教学难点
表格的应用
教
学
过
程
复习：动态图片切换效果制作过程讲授新课：
一、T型网站网站效果图：
2、分析方法之一：整个页面可以利用三个大表格加嵌套表格来完成方法之二：整个页面可以利用一个大表格加嵌套表格来完成方法之三：可以利用布局表格和单元格来完成。
利用方法一来完成本页面其中一制作可这样考虑：三个表格，第一个表格也就是最上面图片加菜单栏部分，可用2行2列表格来完成，第1行第一个单元格用于放置网标，第二个单元格分别放置“关于我们”、“站点导航”和“联系我们”。第二行可以嵌套插入一个1行7列的表格用于放置功能菜单，分别是：业内动态、佳作欣赏、设计竞赛、理论文献、人物访谈和软件精选。
内容区域，可以用一个1行2列表格完成，左边一列嵌套表格用于放置功能菜单，右边一列为主要区域，也可用嵌套表格完成。
最下面一个表格用来放置基本信息。
二、上机练习三、小结、作业
网页设计教案 第16周 星期四 第5、6节课 题
网页中透明Flash效果
教学目标
1、表格的应用；2、Flash的应用
教学重点
Flash属性设置
教学难点
Flash属性设置
教
学
过
程
复习：T型网站制造过程讲授新课：
一、网页中透明FLASH效果
1、创作思想打开 Dreamweaver MX 2004 软件新建页面，然后在页面中插入表格，并在表格里插入 Flash 文件，设置 Flash 文件的参数，制作透明背景的 Flash 。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（ 2 ）插入表格和设置背景。为使 Flash 的效果更加明显，先插入表格并设置背景图。
（ 3 ）设置完背景后，可以插入 Flash 文件。
（ 4 ）接着设置 Flash 文件的参数，如下图所示。
（ 5 ）保存文件，完成操作。在网络上看到自己喜欢的 Flash 作品，想把它引用到自己的网站，但又不喜欢底色，就可以用本例介绍的这种方法，使它透明后再使用。
二、上机练习三、小结网页中表格操作网页中FLASH应用及参数设置四、作业
网页设计 第16周 星期五 第5、6节课 题
Dreamweaver中插入Flash文本
教学目标
DW中插入Flash文本
教学重点
媒体菜单的应用
教学难点
Flash文本插入
教
学
过
程
复习：网页中透明FLASH效果制作过程讲授新课：
一、Dreamweaver中插入Flash文本
1、创作思想
打开 Dreamweaver MX 2004 软件并新建页面，然后单击【插入】 | 【媒体】 | 【 Flash 文本】命令，打开【插入 Flash 文本】对话框，在该对话框中输入相应的参数，就可以制作出动感的 Flash 文本了。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件，新建文件并保存页面。
（ 2 ）插入 Flash 文本并输入参数，如图所示。
（3 ）保存文件，完成操作。
注意：Dreamweaver MX 2004 可以快速制作简单的 Flash 文件，如果要制作的 Flash 效果要求不高，不妨考虑这种方法。但是，如果想制作比较复杂，水平较高的动画就只能使用专业的动画制作软件，如三剑客之一的Flash MX2004。
二、上机练习三、小结、作业
网页设计 第17周 星期二 第5、6节课 题
随机播放背景音乐网页效果
教学目标
行为及行为面板的应用
教学重点
行为中播放声音的应用
教学难点
行为中播放声音的应用
教
学
过
程
复习：在DW2004中插入Flash文本制作过程讲授新课：
一、随机播放背景音乐网页
1、创作思想
打开 Dreamweaver MX 2004 软件新建页面，再选择【行为】面板下的【 + 】选项插播音乐，设置参数。然后重复此操作 4 次，就可以随机播放背景音乐。
2、操作步骤
（ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（ 2 ）选择好“标签”页，在“行为”面板中插入要播放的音乐文件，如图所示。
（ 3 ）接着选择插入的声音文件，打开参数窗口，设置其参数，如图所示。
（ 4 ）重复执行第二步和第三步操作4 次，这样就添加了 4 种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放。 （ 5 ）保存文件，完成操作。适当放置轻松的音乐背景，可以让用户感觉更轻松、愉快。
二、上机练习三、小结四、作业
网页设计教案 第17周 星期四 第5、6节课 题
制作1px边框表格
教学目标
1、网页中代码的应用；2、网页中CSS的应用
教学重点
代码的含义
教学难点
代码的含义
教
学
过
程
复习：网页中实现背景音乐随机播放效果制作过程讲授新课：
一、细表格边框制作方法一：用嵌套表格用两个表格嵌套，外层的表格的长与宽比里层的多出2px，并设置对齐属性为水平居中、垂直居中，然后把外层表格的背景设为你需要的边框颜色，里层表格背景设为与网页背景相同，这样就实现我们的愿望了，实例如下：
方法二：设置亮、暗边框颜色
表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性，把表格边框(border)设为1px，亮边框(bordercolorlight)设为背景色，暗边框(bordercolordark)设为你需要的实际边框颜色就可以了，实列如下：
方法三：用CSS定义（一）
方法四：用CSS定义（二）
注意：这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性，否则不会出现预想的结果。
二、上机练习三、小结、作业
网页设计 第17周 星期五 第5、6节课 题
网页表格特效
教学目标
Table标签的应用
教学重点
Table标签
教学难点
Table标签
教
学
过
程
复习：细表格边框制作方法讲授新课：
一、网页表格特效
1、彩色虚线表格
2、鼠标指向单元格变色
3、立体表格
4、表格嵌套
5、半透明表格
6、阴影表格二、上机练习三、小结四、作业
网页设计 第18周 星期二 第5、6节课 题
论坛设计
教学目标
数据库应用
教学重点
数据库
教学难点
数据库
教
学
过
程
复习：表格几种特效制作方法讲授新课：
一、论坛结构分析
（1） 网友注册和管理模块
（2） 文章显示模块
（3） 发表文章模块
（4） 文章审阅模块表的结构：
（1）作者表（用来存放作者讯息）：
ID：文本类型，必填。是网友代号。
密码： 文本类型，必填。
昵称： 文本类型，必填。
EMAIL,文本类型，必填。
职务： 数字类型，必填。-1代表普通网友，0代表站长。大于0的数字代表版主。
文章数：数字类型，必填。网友发表的文章总数。
姓名： 文本类型，可选。
性别： 文本类型，可选。
电话： 文本类型，可选。
（2）内容表（用来存放具体文章内容和相关讯息）：
ID：自动编号，并为其设置索引，以加快搜寻的速度。
看板ID：数字类型，来自看板列表，表示文章所属看板。
主题ID：数字类型，来自主题表，表示文章所属主题。
作者ID：文本类型，来自作者表，表示文章的作者。
日期：日期/时间类型，预置初值为函数NOW()，自动取系统当前时间为其值。
标题：文本类型。文章的标题。
发表：是/否类型，为"真"时表示文章已经通过审阅，可以发表；为"否"表示文章尚待审阅。
推荐度：数字类型，文章的推荐程度。
内容：备注类型，文章的具体内容。
点击次数：数字类型，文章的点击次数。
（3）看板列表（用来存放有关看板的讯息）
（4）主题表（用来存放有关主题的讯息）
二、构建构建主窗体构建文章显示模块三、小结作业
网页设计教案 第18周 星期四 第5、6节课 题
状态栏动态文本
教学目标
JavaScript语言应用
教学重点
statusMessageObject函数应用
教学难点
程序代码
教
学
过
程
<script language="JavaScript">
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage }
function clearMessage() { this.pos = POSITION }
var POSITION = 100
var DELAY = 5
var MESSAGE = "欢迎光临! Welcome to www.dczz210.net "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " " }
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset() }
setTimeout ('scroller()',scroll.delay) }
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *=,75}
else {jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
} else { window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay); return false }
return true }
snapIn(100,0); </script>
网页设计 第19周 星期二 第5、6节课 题
行为详解(一)
教学目标
行为的应用
教学重点
行为的应用
教学难点
行为的应用
教
学
过
程
复习：
讲授新课：
一、行为操作
1）调用 JavaScript
1、选取物件，并打开 Behaviors inspector
2、在行为面板中点击,+,号，打开下拉选单。在其中选择,Call JavaScript,动作
3、在打开的窗口中录入 JavaScript 语句或变量。我们可以录入,window.close()
4、点击确定退出对话框。并确认其缺省事件值为“OnClick”
5、F12预览一下，当我们点击按钮时，浏览器会自动关闭。
2）改变属性
1、选择在网页中己存在的一个层，假定它的名称为,LyrRed 。
2、在行为面板中点击,+,号，打开下拉选单。在其中选择,Change Property,动作。
3、这时将弹出一个对话框，修改其属。注意，只有当你选择了正确的目标浏览器时，这个效果才能正确显示出来。
4、本例子是当用户用鼠标点击层时，层的背景色变为我们定义的,#f1fafa 颜色。
3）检查目标浏览器
4）拖动层
1、在网页中加入一个层，使用加入图片或者改变背颜色的方法使得此层清楚可见。
2、直接打开行为面板，并选点,”按键，在下拉菜单中选择 Drag Layer。
3、在弹出的对话框中按要求定制。
4、如果你不愿意使用 Onload 事件，也可以使用 OnMouseOver 事件，但之前你必须在层中设置一个空链接并以 OnMouseOver 事件来触发 Drag Layer。
5）在窗口中打开链接使用本功能可以轻松实现在窗口中打开链接的功能。
6）弹出式窗口
7）弹出信息对话框选取按钮物件，并打开行为面板。在行为面板中点击“+”号，打开下拉选单。在其中选择“Popup Message”动作。在弹出的对话框中录入需要显示的文字即可。
8）显示隐藏层
1、打开行为面板。在行为面板中点击“+”号，打开下拉选单。在其中选择“Show-Hide Layers”动作。选中其中的一个层，再点击下面的“显示”或“隐藏”按钮来定制层的显隐。
二、上机练习三、小结四、作业
网页设计教案 第19周 星期四 第5、6节课 题
行为详解(二)
教学目标
行为的应用
教学重点
行为的应用
教学难点
行为的应用
教
学
过
程
复习：
调用 JavaScript、改变属性、检查目标浏览器、拖动层、在窗口中打开链接、弹出式窗口、弹出信息对话框、显示隐藏层等行为的应用。
讲授新课：
一、行为应用
9）交换图片
1、首先我们要准备两个图片备用，注意这两个图片的尺寸需要一致，否则会因尺寸的不同而导至后一组图片拉伸或变形。
2、使用菜单命令插入图片序列中的第一幅图片（PIC1）。
3、打开行为面板。点击“+”号，打开下拉选单。在其中选择,Swap Image”动作。
4、在弹出的对话框中，选取图片序列中的第二幅图片（PIC2），有必要同时选中“预下载图像”与“鼠标移出时恢复图像”选项。
注意：事实上接受用户鼠标的动作而转换图像可以最多达到四幅：原始图、鼠标悬浮时显示图、鼠标点击时显示图、鼠标点击后显示图。
10）时间轴跳转
1、打开一个含有Timeline的页面，打开时间轴。
2、选择物件，并打开行为面板，点击“+”号，打开下拉选单。其中选择“Go To Timeline”动作，并适当选择命令。
3、在下拉菜单中选择要控制的时线，并键入跳至的帧数。
4、点击确定，回到Behaviors inspector中，确认一种动作。
11）检测表单合法性
1、先在页面中插入一个表单，为其命名。选取表单，打开行为面板，点击“+”号，打开下拉选单。在其中选择“Validate Form”命令。
2、在弹出的对话框和上半部选择需要控制的表单项，并在Value项中选中Required。
3、点击确定回到行为面板，确定动作为：OnBlur，预览即可。
二、上机练习三、小结调用 JavaScript、改变属性、检查目标浏览器、拖动层、在窗口中打开链接、弹出式窗口、弹出信息对话框、显示隐藏层、交换图片、时间轴跳转、检测表单合法性等行为的应用。
四、作业
网页设计 第19周 星期五 第5、6节课 题
用户登录实例
教学目标
1、ACCESS数据库的应用；2、ASP动态网页制作
教学重点
ASP动态网页制作
教学难点
ASP动态网页制作
教
学
过
程
一、数据库创建
1、ACCESS创建如下所示的数据表：
2、在表中输入适当的测度数据，如
Administrator/管理员/111111/Admi/1995年8月6日
Snow/飞雪/222222/guest/1993年10月1日
Winter/小猪/333333/user/2002年5月5日二、创建站点高级选项卡中本地信息设置为与一般静态网页设置相同；
测试服务器类型与静态网页设置不同，这里需要设置为“ASP JAVASCRIPT”，访问设置为“本地/网络”，并设置“测试服务器文件夹”。
数据库链接。
三、用户注册页面设计用表格完成如下界面设计：
对文本框进行数据和记录绑定及其它操作四、上机练习五、小结、作业
网页设计 第20周 星期二 第5、6节课 题
技能考核试卷评讲
教学目标
1、表格的定位；2、框架操作及应用
教学重点
表格和框架操作
教学难点
表格和框架操作
教
学
过
程
一、基础知识部分（20分）
站点创建：姓名（D：\班级号+学号）
二、主页面（50分）
说明：图片自己在PC上查找，FLASH动画自行制作，菜单栏一链接到框架页面KJ.htm；页面具有一定的主题思想，有动的动画。
三、框架部分（30分）
要求：1、框架页kj.htm为上方固定，左侧嵌套及页面一（YM01）
页面一：制作简单的文字页面即可
2、链接正常；
网页设计教案 第20周 星期四 第5、6节课 题
综合实例
教学目标
1、掌握表格定位操作；2、联想集团主页制作
教学重点
表格操作
教学难点
表格操作
教
学
过
程
一、实例分析效果预览：
分析如下：
二、上机练习三、小结、作业
网页设计 第20周 星期五 第5、6节课 题
常见网页版面
教学目标
常见网页版面及其功能
教学重点
了解常用网页版面
教学难点
不同网页版面的功能
教
学
过
程
一、常用网页版面
1、版面一
这是一种常见版面配置，多数企业网站都采用这种形式制作，好处在于多数使用者均已习惯这种浏览方式，有助于增进使用者对于网站了解，在功能菜单部分，可以用主选单搭配次菜单方式，对于内容或功能分类项目较多的网站非常适用。
2、版面2
这是一种入口网站或新闻类内容网站较常用的配置，将主题内容区集中在画面中央，配合左方的功能菜单做内容转换，视觉上很流畅
，右方的临时内容多作为广告宣传使用，也有部分网站将此作业其他单元的讯息提示之用。
3、版面3
这种配置多见于内容信息比较少的页面，许多网站也利用这种结构作业首页的欢迎使用，主题内容区多以大面积的图像制作并与标题结合，教育单位网站常见于这种版式，但此版式不利用子页，此版式较单纯，功能不复杂的网站较适用。
4,5、
二、上机练习5种版面三、小结、作业
网页设计 第21周
课 题
期末复习
教学目标
教学重点
教学难点
教
学
过
程
