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

1、网站建设与网页制作实训指导书 计算机网络技术专业适用 孙铀编写 大连职业技术学院 信息技术系 计算机网络技术教研室 目录 实训一 利用 Dreamweaver 的表格功能布局网页 . 2 实训二 CSS 样式表（ 4 学时） 3 实训三利用 Dreamweaver 的行为功能制作动画. 4 实训四利用 Dreamweaver 的站点功能设置站点并上 6 实训五安装设置PWS调试个人站点（2学时） 7 实训六 利用ODBC连接ACCESS据库并设置数据源名.8 实训七以留言簿为例调试（ 4 学时） 9 实训八使用 Flash 的编辑工具及辅助工具（ 2学时） . 10 实训九用 flash 实现

2、基本动画、多层动画制作 11 实训十使用 flash 测试作品 （2 学时 ） 13 实训十一制作“漫天飞雪”动画 （3 学时） 14 13 实训一 利用 Dreamweaver 的表格功能布局网页 (4 学时) 、实训条件 (机房 /Dreamweaver) 二、实训目的 掌握表格在网页布局中的特点及应用；掌握如何通过表格来布局一个完整 的界面。 、实训内容 通过表格构建完整的页面 四、实训步骤 1 创建网页的“头部分” 。 1) 插入一个 1行2列，宽为 760象素，边框及边距均为 0的表格。 2) 插入一个 1行1列，宽为 760象素，边框及边距均为 0的表格。 3) 插入一个 1行2列

3、，宽为 760象素，边框及边距均为 0的表格。 4) 分别进行简单设置。 2 创建网页的“主体部分” 。 1) 插入一个 1行3列，宽为 760象素，边框及边距均为 0的表格， 这个表格将放置页面的主体内容。 2) 在左边单元格中插入一个 12 行 1 列，宽为 90%的表格。(表格 的嵌套) 3) 在中间单元格插入一个 4 行 1 列，宽为 95%的表格。 4) 在右边单元格插入一个 7 行 1 列，宽为 90%的表格。 5) 分别进行简单设置。 3 创建网页的“尾部分” 。 1) 插入一个 2行2列，宽为 760象素，边框及边距均为 0的表格。 2) 进行简单设置。 五、实训考核方法 过程

4、考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到布局美观的效果 以及举一反三，融会贯通等给出成绩。 实训二 CSS 样式表（ 4 学时） 、实训条件 （机房 /Dreamweaver） 二、实训目的 掌握在Dreamweaver MX中定义CSS的方法和技巧。使你的网页真正“美” 起来。 、实训内容 1. 区块 2. 盒子 3. 边框 4. 列表 四、实训步骤 1. 区块 样式一：设置“字母间距”为 1 象素。 设置“文字缩进”为 2 字体高。 样式二：设置“文本对齐”为“两端对齐” 。 2. 盒子 样式一：设置“填充” “上”为 6 象素，“全部相同”。应用到表格。 样

5、式二：设置“浮动”为“右对齐” 、“填充”为 6 象素。应用到图片。 3. 边框 样式一：设置“样式”为“实线”，“宽度”为 1 象素，“颜色”为#666666。 样式二：设置“样式”为“凸出” ，“宽度”为“粗” ，“颜色”分别为 #339900，#336600，#333300，#339900。 样式三：设置“下”为“双线”，其他设置为“无”，“宽度”为 1 象素， “颜色”为 #ff6600. 4. 列表 样式一：设置“类型”为“圆圈” ，“位置”为“内” 。 样式二：设置“类型”为“方块” ，“位置”为“外” 。 样式三：设置“类型”为空，然后点击“项目符号图像”一栏后面的 “浏览”按钮

6、，选择素材中本例对应的 images 目录下的图片 list.gif 。 “位置”一栏设置为“外” 。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 女口：是否严格按照要求；是否达到熟练应用 CSS等 以及举一反三，融会贯通等给出成绩。 实训三利用 Dreamweaver 的行为功能制作动画 (4 学时) 、实训条件 (有音箱机房 /Dreamweaver) 二、实训目的 掌握在Dreamweaver MX中定义行为的方法和技巧。使你的网页真正“动” 起来。 、实训内容 1. 变色按钮的制作。 2. 如何在页面中播放声音。 3. 控制时间轴播放。 4. 层拖拽效果。 四、实训步

7、骤 1. 变色按钮的制作。 1) 插入一个 4 行 1 列的表格，宽为 150 象素，边框为 1 象素。 2) 在单元格中输入文本，设置链接。 3) 修改源代码，命名标签 DIV。 4) 设置行为属性。 2如何在网页中播放声音。 1) 选中body选项，在行为菜单中选择“播放声音”。 2) 选择素材声音文件，设置触发条件 onload. 3) 设置播放属性。 3控制时间轴播放。 1) 在网页中插入一层，将图片放到层中。 2) 设置“层”的“溢出”属性为 hidden ，将层拖放到时间轴面板 中。 3) 设置时间轴 Timeline1 。 4) 复制时间轴 Timeline1 ，设置时间轴 Ti

8、meline2 。 5) 在页面中再插入两层，在层中插入文本，用来通过行为控制时 间轴的播放。 6) 设置行为。 4层拖拽效果。 1) 在网页中插入四个层， 然后在层中插入对应的 “购物车” 图片 2) 分别选中“物品”图片，进行行为属性的设置。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到完全理解行为的工作原理和过程等 以及举一反三，融会贯通等给出成绩。 实训四 利用 Dreamweaver 的站点功能设置站点并上 传站点至 INTERNET （4 学时） 、实训条件 (能连 INTERNET机房/Dreamweaver,CuteFTP,WS_

9、FTP PR) 、实训目的 掌握利用Dreamweaver MX和其他应用软件设置站点并上传站点的功能 、实训内容 1. Dreamweaver MX的站点上传功能应用。 2其他应用软件的站点上传功能应用。 四、实训步骤 1 . 申请“网页空间”（也可在课下申请好） 2. 设置Dreamweaver的站点功能。 3. 利用其他应用软件的上传站点。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到能够独立上传站点；能否通过互联 网看到上传的站点等。 以及举一反三，融会贯通等给出成绩。 实训五安装设置PWS调试个人站点（2学时） 、实训条件 （机房/Wi

10、ndows98系统，附带 Windows98光盘） 、实训目的 掌握简单的WW软件（PWS的安装、设置；理解 WW站点的概念 、实训内容 1安装 PWS。 2设置 PWS。 四、实训步骤 1安装 PWS。 1）在 windows98 光盘下找到 add_ons 目录打开。 2）找到pws目录打开。 3）安装可执行文件。 2设置 PWS。 1）测试PWS是否安装成功。 2）设置站点默认主页。 3）设置可浏览目录。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否能够独立安装；是否能够根据要求独立 设置WW服务器。 以及举一反三，融会贯通等给出成绩。 实训六

11、 利用ODBC!接ACCESS据库并设置数据源名， 访问数据库等（ 2 学时） 、实训条件 （机房 /IIS 或 PWS） 二、实训目的 掌握利用ODBC连接ACCESS数据库，访问数据库的方法；掌握通过 ODBC 设置数据源名并在ASP文件中访问数据库的方法。 三、实训内容 1 设置ODB（连接ACCES数据库。 2在ASP文件中加入适当代码访问库，并输出表内容。 3通过ODBCS置数据源名并在ASP文件中访问数据库。 四、实训步骤 1. 设置ODBC!接ACCES数据库。 1）启动“控制面板”的“ ODB”，出现ODB（数据源管理对话框。 2）选取“ ODBC区动程序”选项卡。 3）选择“

12、 ACCES数据库驱动”。 2. 在ASP文件中加入适当代码访问库，并输出表内容。 1）建立一个Conn ection对象：conn （名字任意取）。 2）调用conn.open方法打开AdvWorks.mdb数据库。 3）调用conn .Execute函数建立Recordset对象：rs （名字任意 取）。 4）将 Recordset 对象的内容输出到浏览器。 3. 通过ODB（设置数据源名并在ASP文件中访问数据库。 1）启动“控制面板”的“ ODB”，出现ODB（数据源管理对话框， 选取“ ODB（驱动程序”选项卡。 2）出现建立新数据源对话框，选取其中的“ Microsoft Acce

13、ss Driver（*.mdb） ，。 3）出现 ODBC Microsoft Access 设置对话框，设置数据源名和 描述。 4）出现选取数据库对话框，选取要访问的数据库。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 女口：是否严格按照要求；是否达到能够独立设置ODBC连接网络数据 库；是否能够调试代码输出数据表内容。 以及举一反三，融会贯通等给出成绩。 实训七 以留言簿为例调试( 4 学时) 、实训条件 (机房川S或PWS 二、实训目的 留言簿是网页中非常常见的功能，通过 ASP可以访问WE徽据库，通过本 例可以帮助学生建立数据库多表连接使用的概念以及增强访问数据库输出

14、表内 容的能力，提高学生建立WEB应用程序的多方面能力。 、实训内容 调试留言簿 四、实训步骤 1 “集思广益VB讨论组”的功能 1) 首先浏览讨论组的主网页 2) 假设你选取了某一讨论主题，接着会进入 Detail.asp 网页 3) 而如果选择的是 “发起讨论主题”，则进入 TitleFrm.asp 的讨 论主题输入表单， 在这个表单， 在这个表单所输入的讨论主题 将由 TitleNew.asp 进行处理。 4) 如果在 Detail.asp 的“参与讨论”表单中输入讨论意见，则 输入的讨论意见将由 DetNew.asp 来处理。 2. News.mdb数据库的设计 1) 数据表关系的设置

15、。 2) 关联更新相关字段。 3) 关联删除相关记录。 4) 其他重要的设置。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否能够独立调试本例；是否真正理解本例 的执行情况；是否能够说出某段代码含义。 以及举一反三，融会贯通等给出成绩。 实训八 使用 Flash 的编辑工具及辅助工具( 2 学时) 、实训条件 (机房 /flash ) 、实训目的 熟练掌握 flash 的编辑工具及辅助工具的使用 、实训内容 1编辑工具 2修改图形的描绘和填充效果 四、实训步骤 1编辑工具 1) 使用像皮擦工具。 2) 使用部分选取工具调整图形形状。 3) 使用箭头工具

16、调整图形形状。 4) 平滑和拉直线条。 5) 优化曲线。 6) 将边线转换为填充区。 7) 扩展填充区域。 8) 柔化填充边缘。 9) 使用捕捉功能。 2修改图形的描绘和填充效果。 1) 使用墨水瓶工具修改图形的描绘效果。 2) 使用颜料桶工具修改图形的填充效果。 3) 使用填充变形工具编辑渐变色填充与位图填充图形 4) 使用滴管工具复制边缘或填充样式。 flash 编辑工具及辅助工 五、实训考核方法 过程考核：根据学生对本节的掌握情况。 如：是否严格按照要求；是否能够熟练掌握 具的使用等。 以及举一反三，融会贯通等给出成绩。 实训九 用 flash 实现基本动画、多层动画制作 (8 学时)

17、一、实训条件 (机房 /flash ) 二、实训目的 掌握使用 flash 实现基本动画、多层动画制作方法。 三、实训内容 1按路径运动。 2图像的翻转。 3文字变大。 四、实训步骤 1按路径运动。 1) 按 Ctrl+N 键新建一个 Flash 影片。 2) 在“工具”面板选中“文本工具” ，按 Ctrl+F3 键，设置字体、 大小、颜色，在舞台适当位置输入 A。 3) 选中第一幀，单击鼠标右键，单击“创建补间动画”命令，选 中第30幀，按F6键，创建关键幀。 4) 选中第一层，单击鼠标右键，选择“添加引导层”命令，添加 运动引导层。 5) 选择第一幀，在“工具”面板选中“铅笔工具” ，在舞

18、台上画 出物体运动的路径。 6) 选择第一层的第 30 幀，将此幀的 A 字符移到路径的结尾处， 同样选择第一幀的 A 字符，将其移到路径的开始处。 7) 按 Ctrl+Enter 键生成测试影片。 2图像的翻转。 1) 按 Ctrl+N 键新建一个 Flash 影片。 2) 单击“文件”一一“导入”，导入一个BMP图形文件。 3) 按 Ctrl+L 键在库中将钢才的图片拖到主场景中。 4) 选择第一幀，单击鼠标右键，创建运动，选择第 30 幀，按 F6 键。 5) 选择第 30 幀的图片单击鼠标右键，选择“缩放”命令，将其 水平变形，并超过图像的中线。 6) 按 Ctrl+Enter 键生成

19、测试影片。 3文字变大。 按 Ctrl+N 键新建一个 Flash 影片，按 Ctrl+J 键，将影片宽度设 为 550，高度设为 200，选择背景颜色。 按 Ctrl+F8 键，将其属性设为“按钮” 。 在 Layer1 中选中“弹起”幀，在“工具”面板，单击工具面板 上的“文本工具”，在舞台适当位置输入“欢迎访问”四个字，按 Ctrl+F3 键， 设置字体的颜色和大小。 选中“指针经过”幀，按 F6 键，在舞台中选中“欢迎访问”后 单击鼠标右键，选择“缩放” ，调整图片的大小，将图片放大。 单击Seenel,回到主场景中，按Ctrl+L键，选中刚才制作的按 钮，将其拖到舞台合适的位置。 按

20、 Ctrl+Enter 键进行测试。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否根据提示完整达到最终效果等。 以及举一反三，融会贯通等给出成绩。 实训十 使用 flash 测试作品 (2 学时 ) 、实训条件 (机房 /flash player ) 二、实训目的 掌握使用特定版本的 Flash Player 测试影片的方法，掌握排除脚本故障 的技巧。 、实训内容 1优化影片。 2测试影片下载性能 四、实训步骤 1优化影片 可采用以下措施： 1) 尽量使用元件。 2) 最好制作过渡动画，而不要制作关键幀动画。 3) 限制每个关键幀中的可变区域。 4)

21、 避免动画位图元素，而应将位图元素作为背景或静态元素。 5) 对于声音文件，尽可能使用 MP3等尺度较小的格式。 2影片下载性能。 打开要测试的影片，选择“控制” | “测试影片”命令。 选择“调试” |56(4.7KB/s )、28.8(2.3KB/s) 或 14.4(1.2KB/s) 命 令，选择“查看” | “带宽设置”命令，来显示下载性能的图表。 五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否掌握排除脚本故障的技巧等。 以及举一反三，融会贯通等给出成绩。 实训十 制作“漫天飞雪”动画 (3 学时) 一、实训条件 (机房 /flash ) 二、实训目的 掌握通过物体的运动， Alpha 值的变化实现雨景的模拟效果。 三、实训内容 制作“漫天飞雪”动画 四、实训步骤 1) 按 Ctrl+N 键新建一个 Flash 影片，按 Ctrl+J 键，设置影片属 性。单击“确定”。 2) 按 Ctrl+F8 键，将属性设为“影片剪辑” 。 3) 在“影片剪辑” Layer1 中，在“工具”面板中，选中“线条工 具”，选择线条颜色为白色，在舞台中