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

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

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

3、 插入一个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 象素， “全部相同”。应用到表格。样式二：设置“浮动”为“右对齐”、 “填充”为 6 象素。应用到图片。3. 边框样式一： 设置 “样式” 为 “实线”， “宽度”为 1 象素， “颜色” 为 #6666

5、66。样式二：设置“样式”为“凸出”， “宽度”为“粗”， “颜色”分别为#339900， #336600， #333300， #339900。样式三：设置“下”为“双线”，其他设置为“无”， “宽度”为 1 象素，“颜色”为 #ff6600.4. 列表样式一：设置“类型”为“圆圈”， “位置”为“内”。样式二：设置“类型”为“方块”， “位置”为“外”。样式三：设置“类型”为空，然后点击“项目符号图像”一栏后面的“浏览” 按钮， 选择素材中本例对应的images 目录下的图片list.gif“位置”一栏设置为“外”。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果如：是否严格按照要

6、求；是否达到熟练应用CSSo以及举一反三，融会贯通等给出成绩。实训三利用 Dreamweaver 的行为功能制作动画( 4 学时)、实训条件(有音箱机房/Dreamweaver)二、实训目的掌握在Dreamweaver MX定义行为的方法和技巧。使你的网页真正“动” 起来。、实训内容1. 变色按钮的制作。2. 如何在页面中播放声音。3. 控制时间轴播放。4. 层拖拽效果。四、实训步骤1. 变色按钮的制作。1) 插入一个4 行 1 列的表格，宽为150 象素，边框为1 象素。2) 在单元格中输入文本，设置链接。3) 修改源代码，命名标签DIV。4) 设置行为属性。2如何在网页中播放声音。1)选中

7、body选项，在行为菜单中选择“播放声音”。2) 选择素材声音文件，设置触发条件onload.3) 设置播放属性。3控制时间轴播放。1) 在网页中插入一层，将图片放到层中。2) 设置“层”的“溢出”属性为 hidden ，将层拖放到时间轴面板中。3) 设置时间轴Timeline1 。4) 复制时间轴Timeline1 ，设置时间轴Timeline2 。5) 在页面中再插入两层，在层中插入文本，用来通过行为控制时间轴的播放。6) 设置行为。4层拖拽效果。1) 在网页中插入四个层，然后在层中插入对应的 “购物车”图片。2) 分别选中“物品”图片，进行行为属性的设置。五、实训考核方法过程考核：根据例

8、子，通过学生对本例做的效果 如：是否严格按照要求；是否达到完全理解行为的工作原理和过程等。以及举一反三，融会贯通等给出成绩。实训四利用 Dreamweaver 的站点功能设置站点并上传站点至INTERNET （ 4学时）、实训条件（能连 INTERNET%房/Dreamweaver,CuteFTP,WS_FTP PRO、实训目的掌握利用Dreamweaver MXffi其他应用软件设置站点并上传站点的功能三、实训内容1. Dreamweaver MX勺站点上传功能应用。2其他应用软件的站点上传功能应用。四、实训步骤1 申请“网页空间”（也可在课下申请好）2 设置Dreamweaver的站点功能

9、。3 利用其他应用软件的上传站点。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到能够独立上传站点；能否通过互联网看到上传的站点等。以及举一反三，融会贯通等给出成绩。实训五 安装设置PW调试个人站点（2学时）、实训条件（机房/Windows98系统，附带 Windows98光盘）、实训目的掌握简单的WWW件（PWS的安装、设置；理解 WWW点的概念、实训内容1安装PWS。2设置PWS。四、实训步骤1 .安装PWS1）在windows98光盘下找到add_ons目录打开。2）找到pws目录打开。3） 安装可执行文件。2 .设置PWS1） 测试PW*否安装

10、成功。2） 设置站点默认主页。3） 设置可浏览目录。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果如：是否严格按照要求；是否能够独立安装；是否能够根据要求独立设置WW服务器。以及举一反三，融会贯通等给出成绩。实训六 利用ODBC1接ACCES敬据库并设置数据源名,访问数据库等（2 学时）、实训条件（机房 /IIS 或PWS）二、实训目的掌握利用ODBC1接ACCESS库，访问数据库的方法；掌握通过 ODBC 设置数据源名并在ASP文件中访问数据库的方法。三、实训内容1 .设置 ODBC!接 ACCESSOR2 .在ASP文件中加入适当代码访问库，并输出表内容。3 .通过ODB段置数

11、据源名并在ASP文件中访问数据库。四、实训步骤1 . 设置ODBC!接ACCESS据库。1）启动“控制面板”的“ ODBC,出现ODB嗷据源管理对话框。2）选取“ ODBG区动程序”选项卡。3）选择“ACCES数据库驱动”。2 .在ASPi件中加入适当代码访问库，并输出表内容。1）建立一个Connection对象：conn （名字任意取）。2）调用 conn.open 方法打开 AdvWorks.mdb®据库。3）调用conn.Execute函数建立Recordset对象：rs （名字任意 取） 。4） 将 Recordset 对象的内容输出到浏览器。3 .通过ODBCJ置数据源名并

12、在ASP文件中访问数据库。1）启动“控制面板”的“ ODBC,出现ODB嗷据源管理对话框， 选取“ ODBG区动程序”选项卡。2） 出现建立新数据源对话框，选取其中的“Microsoft AccessDriver（*.mdb） ”。3） 出现 ODBC Microsoft Access 设置对话框，设置数据源名和 描述。4） 出现选取数据库对话框，选取要访问的数据库。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果如：是否严格按照要求；是否达到能够独立设置ODBC!接网络数据库；是否能够调试代码输出数据表内容。以及举一反三，融会贯通等给出成绩。实训七4 学时)、实训条件(机房 /II

13、S 或PWS)二、实训目的留言簿是网页中非常常见的功能，通过 ASP可以访问WEBC据库，通过本 例可以帮助学生建立数据库多表连接使用的概念以及增强访问数据库输出表内容的能力，提高学生建立WEEK用程序的多方面能力。、实训内容 调试留言簿四、实训步骤1 .“集思广益VB讨论组”的功能1) 首先浏览讨论组的主网页2) 假设你选取了某一讨论主题，接着会进入Detail.asp 网页3) 而如果选择的是 “发起讨论主题”， 则进入 TitleFrm.asp 的讨论主题输入表单，在这个表单，在这个表单所输入的讨论主题将由TitleNew.asp 进行处理。4) 如果在 Detail.asp 的“参与讨

14、论”表单中输入讨论意见，则输入的讨论意见将由DetNew.asp来处理。2 .News.mdbK据库的设计1) 数据表关系的设置。2) 关联更新相关字段。3) 关联删除相关记录。4) 其他重要的设置。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果如：是否严格按照要求；是否能够独立调试本例；是否真正理解本例 的执行情况；是否能够说出某段代码含义。以及举一反三，融会贯通等给出成绩。实训八使用 Flash 的编辑工具及辅助工具(2 学时)、实训条件(机房 /flash )、实训目的熟练掌握flash 的编辑工具及辅助工具的使用。、实训内容1编辑工具2修改图形的描绘和填充效果。四、实训步骤

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

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

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

18、片，按Ctrl+J 键，将影片宽度设为 550，高度设为200，选择背景颜色。按 Ctrl+F8 键，将其属性设为“按钮”。在Layerl中选中“弹起” 在“工具”面板，单击工具面板上的“文本工具”，在舞台适当位置输入“欢迎访问”四个字，按 Ctrl+F3 键，设置字体的颜色和大小。选中“指针经过"按 F6键，在舞台中选中“欢迎访问”后单击鼠标右键，选择“缩放”，调整图片的大小，将图片放大。单击Scenel,回到主场景中，按Ctrl+L键，选中刚才制作的按 钮，将其拖到舞台合适的位置。按 Ctrl+Enter 键进行测试。五、实训考核方法过程考核：根据例子，通过学生对本例做的效果如：

19、是否严格按照要求；是否根据提示完整达到最终效果等。以及举一反三，融会贯通等给出成绩。实训十使用 flash 测试作品（2 学时 ）一、实训条件（机房 /flash player ）二、实训目的掌握使用特定版本的Flash Player 测试影片的方法，掌握排除脚本故障的技巧。三、实训内容1优化影片。2测试影片下载性能。四、实训步骤1优化影片可采用以下措施：1） 尽量使用元件。2）最好制作过渡动画，而不要制作关键M动画。3）限制每个关键M中的可变区域。4） 避免动画位图元素，而应将位图元素作为背景或静态元素。5）对于声音文件，尽可能使用 MP骈尺度较小的格式。2影片下载性能。打开要测试的影片，选

20、择“控制”| “测试影片”命令。选择“调试”|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 中，在“