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

网站建设与网页制作实训指导书计算机网络技术专业适用孙铀编写大连职业技术学院信息技术系计算机网络技术教研室目录实训一 利用Dreamweaver的表格功能布局网页2实训二 CSS样式表（4学时）3实训三 利用Dreamweaver的行为功能制作动画4实训四 利用Dreamweaver的站点功能设置站点并上6实训五 安装设置PWS调试个人站点 (2学时)7实训六 利用ODBC连接ACCESS数据库并设置数据源名8实训七 以留言簿为例调试（4学时）9实训八 使用Flash的编辑工具及辅助工具（2学时）10实训九 用flash实现基本动画、多层动画制作11实训十 使用flash测试作品 (2学时)13实训十一 制作“漫天飞雪”动画 （3学时）14实训一 利用Dreamweaver的表格功能布局网页（4学时）一、实训条件 （机房/Dreamweaver）二、实训目的掌握表格在网页布局中的特点及应用；掌握如何通过表格来布局一个完整的界面。三、实训内容通过表格构建完整的页面四、实训步骤1 创建网页的“头部分”。1) 插入一个1行2列，宽为760象素，边框及边距均为0的表格。2) 插入一个1行1列，宽为760象素，边框及边距均为0的表格。3) 插入一个1行2列，宽为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) 进行简单设置。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到布局美观的效果。以及举一反三，融会贯通等给出成绩。实训二 CSS样式表（4学时）一、实训条件 （机房/Dreamweaver）二、实训目的掌握在Dreamweaver MX中定义CSS的方法和技巧。使你的网页真正“美”起来。三、实训内容1. 区块2. 盒子3. 边框4. 列表四、实训步骤1. 区块样式一：设置“字母间距”为1象素。设置“文字缩进”为2字体高。 样式二：设置“文本对齐”为“两端对齐”。2. 盒子样式一：设置“填充”“上”为6象素，“全部相同”。应用到表格。样式二：设置“浮动”为“右对齐”、“填充”为6象素。应用到图片。3. 边框样式一：设置“样式”为“实线”，“宽度”为1象素，“颜色”为#666666。样式二：设置“样式”为“凸出”，“宽度”为“粗”，“颜色”分别为#339900，#336600，#333300，#339900。样式三：设置“下”为“双线”，其他设置为“无”，“宽度”为1象素，“颜色”为#ff6600.4. 列表样式一：设置“类型”为“圆圈”，“位置”为“内”。样式二：设置“类型”为“方块”，“位置”为“外”。样式三：设置“类型”为空，然后点击“项目符号图像”一栏后面的“浏览”按钮，选择素材中本例对应的images目录下的图片list.gif。“位置”一栏设置为“外”。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到熟练应用CSS等。以及举一反三，融会贯通等给出成绩。实训三 利用Dreamweaver的行为功能制作动画（4学时）一、实训条件 （有音箱机房/Dreamweaver）二、实训目的掌握在Dreamweaver MX中定义行为的方法和技巧。使你的网页真正“动”起来。三、实训内容1. 变色按钮的制作。2. 如何在页面中播放声音。3. 控制时间轴播放。4. 层拖拽效果。四、实训步骤1. 变色按钮的制作。1) 插入一个4行1列的表格，宽为150象素，边框为1象素。2) 在单元格中输入文本，设置链接。3) 修改源代码，命名标签DIV。4) 设置行为属性。2如何在网页中播放声音。1) 选中选项，在行为菜单中选择“播放声音”。2) 选择素材声音文件，设置触发条件onload.3) 设置播放属性。3控制时间轴播放。1) 在网页中插入一层，将图片放到层中。2) 设置“层”的“溢出”属性为hidden，将层拖放到时间轴面板中。3) 设置时间轴Timeline1。4) 复制时间轴Timeline1，设置时间轴Timeline2。5) 在页面中再插入两层，在层中插入文本，用来通过行为控制时间轴的播放。6) 设置行为。4层拖拽效果。1) 在网页中插入四个层，然后在层中插入对应的“购物车”图片。2) 分别选中“物品”图片，进行行为属性的设置。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到完全理解行为的工作原理和过程等。以及举一反三，融会贯通等给出成绩。实训四 利用Dreamweaver的站点功能设置站点并上传站点至INTERNET（4学时）一、实训条件 （能连INTERNET机房/Dreamweaver,CuteFTP,WS_FTP PRO）二、实训目的掌握利用Dreamweaver MX和其他应用软件设置站点并上传站点的功能。三、实训内容1Dreamweaver MX的站点上传功能应用。2其他应用软件的站点上传功能应用。四、实训步骤1 申请“网页空间”（也可在课下申请好）。2 设置Dreamweaver的站点功能。3 利用其他应用软件的上传站点。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到能够独立上传站点；能否通过互联网看到上传的站点等。以及举一反三，融会贯通等给出成绩。实训五 安装设置PWS调试个人站点 (2学时)一、实训条件 （机房/Windows98系统，附带Windows98光盘）二、实训目的掌握简单的WWW软件（PWS）的安装、设置；理解WWW站点的概念。三、实训内容1安装PWS。2设置PWS。四、实训步骤1安装PWS。1) 在windows98光盘下找到add_ons目录打开。2) 找到pws目录打开。3) 安装可执行文件。2设置PWS。1) 测试PWS是否安装成功。2) 设置站点默认主页。3) 设置可浏览目录。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否能够独立安装；是否能够根据要求独立设置WWW服务器。以及举一反三，融会贯通等给出成绩。实训六 利用ODBC连接ACCESS数据库并设置数据源名，访问数据库等（2学时）一、实训条件 （机房/IIS或PWS）二、实训目的掌握利用ODBC连接ACCESS数据库, 访问数据库的方法；掌握通过ODBC设置数据源名并在ASP文件中访问数据库的方法。三、实训内容1设置ODBC连接ACCESS数据库。2在ASP文件中加入适当代码访问库，并输出表内容。3通过ODBC设置数据源名并在ASP文件中访问数据库。四、实训步骤1 设置ODBC连接ACCESS数据库。1) 启动“控制面板”的“ODBC”，出现ODBC数据源管理对话框。2) 选取“ODBC驱动程序”选项卡。3) 选择“ACCESS数据库驱动”。2 在ASP文件中加入适当代码访问库，并输出表内容。1) 建立一个Connection对象：conn（名字任意取）。2) 调用conn.open方法打开AdvWorks.mdb数据库。3) 调用conn.Execute函数建立Recordset对象：rs（名字任意取）。4) 将Recordset对象的内容输出到浏览器。3 通过ODBC设置数据源名并在ASP文件中访问数据库。1) 启动“控制面板”的“ODBC”，出现ODBC数据源管理对话框，选取“ODBC驱动程序”选项卡。2) 出现建立新数据源对话框，选取其中的“Microsoft Access Driver(*.mdb)”。3) 出现ODBC Microsoft Access设置对话框，设置数据源名和描述。4) 出现选取数据库对话框，选取要访问的数据库。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否达到能够独立设置ODBC连接网络数据库；是否能够调试代码输出数据表内容。以及举一反三，融会贯通等给出成绩。实训七 以留言簿为例调试（4学时）一、实训条件 （机房/IIS或PWS）二、实训目的留言簿是网页中非常常见的功能，通过ASP可以访问WEB数据库，通过本例可以帮助学生建立数据库多表连接使用的概念以及增强访问数据库输出表内容的能力，提高学生建立WEB应用程序的多方面能力。三、实训内容调试留言簿四、实训步骤1“集思广益VB讨论组”的功能1) 首先浏览讨论组的主网页2) 假设你选取了某一讨论主题，接着会进入Detail.asp网页3) 而如果选择的是“发起讨论主题”，则进入TitleFrm.asp的讨论主题输入表单，在这个表单，在这个表单所输入的讨论主题将由TitleNew.asp进行处理。4) 如果在Detail.asp的“参与讨论”表单中输入讨论意见，则输入的讨论意见将由DetNew.asp来处理。2 News.mdb数据库的设计1) 数据表关系的设置。2) 关联更新相关字段。3) 关联删除相关记录。4) 其他重要的设置。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否能够独立调试本例；是否真正理解本例的执行情况；是否能够说出某段代码含义。以及举一反三，融会贯通等给出成绩。实训八 使用Flash的编辑工具及辅助工具（2学时）一、实训条件 （机房/flash）二、实训目的熟练掌握flash的编辑工具及辅助工具的使用。三、实训内容1编辑工具2修改图形的描绘和填充效果。 四、实训步骤1编辑工具1) 使用像皮擦工具。2) 使用部分选取工具调整图形形状。3) 使用箭头工具调整图形形状。4) 平滑和拉直线条。5) 优化曲线。6) 将边线转换为填充区。7) 扩展填充区域。8) 柔化填充边缘。9) 使用捕捉功能。2修改图形的描绘和填充效果。1) 使用墨水瓶工具修改图形的描绘效果。2) 使用颜料桶工具修改图形的填充效果。3) 使用填充变形工具编辑渐变色填充与位图填充图形。4) 使用滴管工具复制边缘或填充样式。五、实训考核方法 过程考核：根据学生对本节的掌握情况。 如：是否严格按照要求；是否能够熟练掌握flash编辑工具及辅助工具的使用等。以及举一反三，融会贯通等给出成绩。实训九 用flash实现基本动画、多层动画制作（8学时）一、实训条件 （机房/flash）二、实训目的掌握使用flash实现基本动画、多层动画制作方法。三、实训内容1按路径运动。 2图像的翻转。3文字变大。四、实训步骤1按路径运动。1) 按Ctrl+N键新建一个Flash影片。2) 在“工具”面板选中“文本工具”，按Ctrl+F3键，设置字体、大小、颜色，在舞台适当位置输入A。3) 选中第一幀，单击鼠标右键，单击“创建补间动画”命令，选中第30幀，按F6键，创建关键幀。4) 选中第一层，单击鼠标右键，选择“添加引导层”命令，添加运动引导层。5) 选择第一幀，在“工具”面板选中“铅笔工具”，在舞台上画出物体运动的路径。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键生成测试影片。3文字变大。按Ctrl+N键新建一个Flash影片，按Ctrl+J键，将影片宽度设为550，高度设为200，选择背景颜色。按Ctrl+F8键，将其属性设为“按钮”。在Layer1中选中“弹起”幀，在“工具”面板，单击工具面板上的“文本工具”，在舞台适当位置输入“欢迎访问”四个字，按Ctrl+F3键，设置字体的颜色和大小。选中“指针经过”幀，按F6键，在舞台中选中“欢迎访问”后单击鼠标右键，选择“缩放”，调整图片的大小，将图片放大。单击Scene1，回到主场景中，按Ctrl+L键，选中刚才制作的按钮，将其拖到舞台合适的位置。按Ctrl+Enter键进行测试。五、实训考核方法 过程考核：根据例子，通过学生对本例做的效果 如：是否严格按照要求；是否根据提示完整达到最终效果等。以及举一反三，融会贯通等给出成绩。实训十 使用flash测试作品 (2学时)一、实训条件 （机房/flash player）二、实训目的掌握使用特定版本的Flash Player测试影片的方法，掌握排除脚本故障的技巧。三、实训内容1优化影片。2测试影片下载性能。四、实训步骤1优化影片可采用以下措施：1) 尽量使用元件。2) 最好制作过渡动画，而不要制作关键幀动画。3) 限制每个关键幀中的可变区域。4) 避免动画位图元素，而应将位图元素作为背景或静态元素。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中，在“工具”面板中，选中“线条工具”，选择线条颜色为白色，在舞台中画一条