实训网站建设与网页制作实训指导书讲解

网站建设与网页制作实训指导书计算机网络技术专业适用

孙铀编写

大连职业技术学院

信息技术系

计算机网络技术教研室

目录

实训一 利用 reamweave 的表格功能布局网页. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

实训二 C样式表(4学时)3

实训三 利用Dreawe  v  r的行为功能制作动画

4

实训四 利用reamweav  r的站点功能设置站点并上6

实训五 安装设置PWS调试个人站点2学时)7实训六 利用OB连接CCSS数据库并设置数 据 源 名. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

实训七 以留言簿为例调试4学时 9

实训八 使用Flash的编辑工具及辅助工具 2学时). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

 0

实训九 用fl a  实现基本动画、多层动画制作11实训十 使用 la  测试作品 2学时 1 

实训十一 制作“漫天飞雪”动画 (3学时 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

 4

实训一 利用Dreawe  ve 的表格功能布局

网页

 学时

一、实训条件

(机房/D  eamwe    r)

二、实训目的

掌握表格在网页布局中的特点及应用;掌握如何通过表格来布局一个完整的界面。

三、实训内容

通过表格构建完整的页面

四、实训步骤

1  创建网页的“头部分”。

1)插入一个1行列宽为 60象素,边框及边距均为0的表格。

2)插入一个1行列,宽为7  0象素,边框及边距均为0的表格。

3)插入一个1行2列,宽为760象素,边框及边距均为0的表格。

4)分别进行简单设置。

2  创建网页的“主体部分”。

1)插入一个1行列宽为760象素,边框及边距均为的表格,

这个表格将放置页面的主体内容。

2)在左边单元格中插入一个 2行1列,宽为90%的表格。 (表格

的嵌套)

3)在中间单元格插入一个4行1列,宽为95的表格。

4)在右边单元格插入一个行1列宽为90的表格。

5)分别进行简单设置。

3  创建网页的“尾部分”。

1)插入一个2行2列,宽为7  0象素,边框及边距均为0的表格。

2)进行简单设置。

五、实训考核方法

过程考核根据例子,通过学生对本例做的效果

如:是否严格按照要求;是否达到布局美观的效果。

以及举一反三,融会贯通等给出成绩。

实训二 C样式表(学时

一、实训条件

机房/Dr weav r 

二、实训目的

掌握在Dr awe v  r MX中定义CS的方法和技巧。使你的网

页真正“美”起来。

三、实训内容

1 . 区块

2. 盒子

3. 边框

4. 列表

四、实训步骤

1 . 区块

样式一:设置“字母间距”为象素。

设置“文字缩进”为2字体高。

样式二:设置“文本对齐”为“两端对齐”。

2.盒子

样式一:设置“填充”“上”为6象素,“全部相同”。应用到表格。

样式二设置“浮动”为“右对齐”、 “填充”为6象素。应用到图片。

3.边框

样式一:设置“样式”为“实线”  “宽度”为象素,“颜色”为6666  6。样式二:设置“样式”为“凸出”,“宽度”为“粗”,“颜色”分别为#33  90 ,

3   6  0 # 33  00,#339900。

样式三设置“下”为“双线”,其他设置为“无”,“宽度”为象素,“颜色”为  f660 .

4. 列表

样式一:设置“类型”为“圆圈”  “位置”为“内”。

样式二:设置“类型”为“方块”,“位置”为“外”。

样式三:设置“类型”为空,然后点击“项目符号图像”一栏后面的“浏览”按钮,选择素材中本例对应的 mag  目录下的图片l i  t.gif。 “位置”一栏设置为“外”。

五、实训考核方法

过程考核:根据例子,通过学生对本例做的效果

如是否严格按照要求是否达到熟练应用SS等。以及举一反三,融会贯通等给出成绩。

实训三 利用D   mw aver的行为功

能制作动画

 学时

一、实训条件

(有音箱机房/r mwe v r)

二、实训目的

掌握在 eamw  ve  MX中定义行为的方法和技巧。使你的网页真正“动”起来。

三、实训内容

1 . 变色按钮的制作。

2. 如何在页面中播放声音。

3. 控制时间轴播放。

4. 层拖拽效果。

四、实训步骤

1 .变色按钮的制作。

1)插入一个4行1列的表格,宽为  0象素边框为1象素。

2)在单元格中输入文本,设置链接。

3)修改源代码命名标签IV。

4)设置行为属性。

2.如何在网页中播放声音。

1)选中bo  y>选项,在行为菜单中选择“播放声音”。

2)选择素材声音文件,设置触发条件  load.

3)设置播放属性。

3 控制时间轴播放。

1)在网页中插入一层将图片放到层中。

2)设置“层”的“溢出”属性为 i   e ,将层拖放到时间轴面板中。

3)设置时间轴  l  n  1。

4)复制时间轴Tiel  ne  设置时间轴Tiel  ne2。

5)在页面中再插入两层在层中插入文本,用来通过行为控制时间轴的播放。

6)设置行为。

 层拖拽效果。

1)在网页中插入四个层,然后在层中插入对应的“购物车”图片。

2)分别选中“物品”图片,进行行为属性的设置。

五、实训考核方法

过程考核:根据例子,通过学生对本例做的效果

如是否严格按照要求;是否达到完全理解行为的工作原理和过程等。以及举一反三,融会贯通等给出成绩。