网页网站实训指导书.docx

《网页网站实训指导书.docx》由会员分享，可在线阅读，更多相关《网页网站实训指导书.docx（28页珍藏版）》请在三一办公上搜索。

1、网页网站实训指导书网页网站实训指导书 编号 1 2 3 4 5 6 7 8 9 10 11 12 13 实训名称 HTML基本标记的应用 使用Dreamweaver建立和管理站点 使用Dreamweaver处理文字 在网页中使用图片 在网页中使用音频、视频和Flash文件 使用表格布局网页 使用CSS制作网页特效 使用交互式表单 使用框架制作网页 在网页中插入JavaScript 使用JavaScript验证表单 JavaScript综合实例 用层、行为、时间轴实现网页特效 合计 课时 4 2 2 8 8 4 8 4 4 4 4 4 4 60 目 录 实训1：HTML基本标记的应用 . 3 实

2、训2:使用Dreamweaver建立和管理站点 . 5 实训3:使用Dreamweaver处理文字 . 7 实训4:在网页中使用图片 . 9 实训5:在网页中使用音频、视频和Flash文件 . 11 实训6:使用表格布局网页 . 13 实训7:使用CSS制作网页特效 . 16 实训8:使用交互式表单 . 20 实训9:使用框架制作网页 . 22 实训10:在网页中插入JavaScript . 24 实训11:使用JavaScript验证表单 . 26 实训12:JavaScript综合实例 . 29 实训13：使用层、行为、时间轴实现网页特效 . 32 实训X:XXX . 36 实训1：HTM

3、L基本标记的应用 一、实训目的 1、使用记事本工具，利用HTML标记制作简单的网页 2、熟悉HTML标记的使用 3、掌握使用HTML标记制作表格的方法 二、实训环境 计算机、记事本 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示利用HTML写的网页的效果；讲解每一步的实现过程；让学生自己使用HTML实现网页效果；对学生的练习进行辅导。 四、实训注意事项 1、HTML标签的配对与嵌套 2、把记事本文件存为网页形式需注意后缀为“htm”或“html” 五、实训内容及步骤 1、打开记事本，新建一个文件，另存为“1.htm” ； 2、输入HTML结构，然后在Internet Explorer

4、中查看； 3、在网页中使用表格 现有商品 商品名称单价现有数量 P4处理器3.0G850.00元10台 LG17寸彩显1050.00元3台 网页效果 4、在网页中使用其它标签 (1)、换行 (2)、产生水平线 (3)、段落. (4)、设置文本属性 . (5)、设置文本样式 加粗. 倾斜. (6)、图像 (7)、超链接 网易 六、实训结果提交与成绩评定 1、提交一个用HTML标签书写的网页 七、实训小结 HTML是网页制作的基础，给学生展示代码建立网页，主要让学生理解网页的基础，使学生掌握网页制作与Office办公软件的区别。 实训2:使用Dreamweaver建立和管理站点 一、实训目的 1

5、、掌握使用Dreamweaver建立新站点的方法 2 、掌握站点的管理方法 3 、掌握站点的发布 二、实训环境 连接着Internet的计算机、Dreamweaver 8.0、LeapFTP、示例站点 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示站点的优点；讲解站点建立、管理与网站发布的过程；让学生自己站点建立、管理与网站发布；对学生的练习进行辅导。 四、实训注意事项 五、实训内容及步骤 1、展示现成的网站，并讲解实现的基本步骤，让学生对网站有一个初步的认识。 2、使用Dreamweaver创建站点。使用，顺着步骤一步一步设置，并讲解第一步的选项的意义，完成后让学生自己练习，每人建

6、立一个站点。 3、在站点目录中，拷贝一个现成的站点，讲解站点的优势。在站点的界面下修改文件名，站点自动更新链接。 4、申请网页空间。对于学生来讲，租用空间和域名需要出钱，所以可以申请免费空间，让学生学会管理网站。利用现有的提供免费空间的站点，演示站点的申请并让学生自己申请。 5、上传站点。利用免费申请获得的用户名和密码，使用FTP上传站点，首先采且传统的FTP的方法，然后使用LeapFTP工具来上传站点。 6、查看网站最终效果。 六、实训结果提交与成绩评定 1、使用Dreamweaver创建MyWeb站点。 2、申请免费空间，绑定个性域名，并用LeapFTP上传示例站点，查看最终效果。 七、实

7、训小结 建立了站点，对以后的学习会带来很大的方便，比如链接，站点内的链接，会自动变成相对路径，而且有了站点，对于引用站点里的资源会带来很大方便等等。有了免费空间后，学生可以上传自己完成的网页，对于资料的收集、整理，个人作品的展示很有意义。 实训3:使用Dreamweaver处理文字 一、实训目的 1、掌握页面的创建、保存与设置 2、掌握利用Dreamweaver编辑文件、插入对象、使用表格、使用编号与项目编号、设置超链接。 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和插入方法；让学生自己实现页面效果；对学生的练

8、习进行辅导。 四、实训注意事项 五、实训内容及步骤 1、展示使用Dreamweaver处理的文字网页，如下图所示： 2、讲解以上页面中的各个元素，并在网页中逐步插入。 3、让学生依照效果图，实现“求职简历”页面。 六、实训结果提交与成绩评定 1、提交求职简历页面，包含以下元素：日期时间、表格布局、分级项目编号、页面超链接、邮件链接、特殊字符。 七、实训小结 网页文字处理是最基本的功能，通过本实训让学生掌握常用的网页文字处理功能。 实训4:在网页中使用图片 一、实训目的 1、掌握映射图像的制作方法 2、掌握轮换图像的制作方法 3、掌握flash相册的制作方法 4、掌握常用图像滤镜的制作方法 二、

9、实训环境 Dreamweaver、图像素材 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 1、使用的图像必须放在站点下，使用相对路径调用 五、实训内容及步骤 1、映射图像的制作 下载三张图片，分别是中国地图、云南地图、昆明地图，把每张图片制作成插入到一个网页中，分别为:中国.htm，云南.htm，昆明.htm，在中国地图上，使用热点工具画出云南地图的轮廓，然后输入链接目标到“云南.htm”，同样，在“云南.htm”，使用热点工具画出昆明地图的轮廓，然后输入链接目标到“昆明.h

10、tm”。如果对本例进行扩展，可以实现全国的所有地区的地图链接。 2、使用轮换图像制作导航条 制作两组风格相似的图像，效果如下： 建立网页，插入一行四列的表格，在单元格中，使用“插入图像对象鼠标经过的图像”， 在出现的对话框中，选择原始图像和鼠标经过的图像，以此类推，制作出具有动态效果的导航条。 3、制作Flash相册 建立一个网页，使用“插入媒体图像查看器”，把flash和网页存储在同一个目录下，选中flash，设置flash元素的相关参数，实现Flash播放器。 4、使用常见的图像滤镜 建立一个网页，在网页中插入表格，再插入图像，然后在标签中使用滤镜效果。 六、实训结果提交与成绩评定 1、提

11、交映射图像网页 2、提交轮换图像网页 3、提交Flash相册网页 4、提交图像滤镜网页 七、实训小结 图像是网页设计中的很重要的元素，充分使用图像能使用网页增色不少。 实训5:在网页中使用音频、视频和Flash文件 一、实训目的 1、掌握在网页中设置网页背景音乐的方法 2、掌握在网页中嵌入音频文件的方法 3、掌握在网页中嵌入视频文件的方法 4、掌握在网页中嵌入Flash文件、Flash按钮、Flash文本、Flash Video的方法 二、实训环境 Dreamweaver、音频素材、视频素材、Flash素材 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功

12、能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 网页中使用的音频、视频和Flash素材应该存放在站点下，使用相对路径调用 五、实训内容及步骤 1、在网页中插入背景音乐 新建一个网页，并在同一层次建立一个文件夹“Media”，拷贝音乐文件“1.mid”到Media文件夹下，在网页中加入代码： 注意：这里的音频文件格式可以是mp3、mid、wav 2、在网页中嵌入音频文件 由于音乐不可以控制，所以可以嵌入音频文件。 新建一个网页，并在同一层次建立一个文件夹“Media”，拷贝音乐文件“1.mid”到Media文件夹下。在网页中使用“插入媒体插件”，然后找到“1.mi

13、d”，调整插件的大小及位置即可，也可以使用如下代码： 此时在网页浏览时，可以控制音乐的播放、音量等 3、在网页中嵌入视频文件 新建一个网页，并在同一层次建立一个文件夹“Media”，拷贝音乐文件“1.wmv”到Media文件夹下。在网页中使用“插入媒体插件”，然后找到“1.wmv”，调整插件的大小及位置即可，也可以使用如下代码： 此时在网页浏览时，可以控制视频的播放、音量等 注意：这里的视频文件格式可以是wmv、rm、mpeg等 4、在网页中插入Flash文件 新建一个网页，并在同一层次建立一个文件夹“Media”，拷贝音乐文件“1.swf”到Media文件夹下。在网页中使用“插入媒体Flas

14、h”，然后找到“1.swf”，调整插件的大小及位置即可(由于插入Flash时，产生的代码过多，不易于手写代码)。 在网页中还可以插入Flash文本、Flash按钮、Flash影片等。 六、实训结果提交与成绩评定 1、提交在带背景音乐的网页 2、提交嵌入了音频文件网页 3、提交嵌入了视频文件的网页 4、提交嵌入了Flash文件的网页 七、实训小结 多媒体可以增强网页的表现效果，合理利用多媒体可以使网页丰富多彩。 实训6:使用表格布局网页 一、实训目的 1、掌握网页设计的一般流程 2、掌握使用Photoshop制作图像切片并生成网页 3、掌握使用表格布局网页的方法 二、实训环境 Dreamweav

15、er,网页效果图 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 使用表格做网页布局时，应该把网页的表格单元格边距、单元格填充和边框参数都设置为0， 内嵌表格的宽度一般设置为百分比。 五、实训内容及步骤 1、演示网页最终效果 2、讲解网页设计步骤 设计网页效果图 把效果图做切片 使用表格把切片布局为网页 使用表格布局控制网页内容元素的位置 3、利用Photoshop制作网页效果图并做切片 4、利用表格把切片布局成网页 5、使用内嵌表格控制页面元素位置，制作完整的网页 六、实训结

16、果提交与成绩评定 1、设计或下载一个网页效果图，切片后，利用表格布局并添加页面元素，制作成网页并提交 七、实训小结 表格布局是网页设计中最常用的方法，使用表格布局网页效果图，可以制作出风格统一、精美的网页 实训7:使用CSS制作网页特效 一、实训目的 1、掌握CSS的基本写法 2、掌握使用CSS改变图片的整体效果的方法(灰度图与彩图的转换) 3、掌握使用CSS制作动感的链接效果的方法 4、掌握使用CSS制作数字水印的方法 5、掌握使用CSS改变网页浏览鼠标光标的方法 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和

17、实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 1、CSS的类名定义和使用区分大小写 2、涉及到颜色值时需要加“#” 3、CSS语句间用“;”分隔(最后一个分号可以省略) 4、CSS属性的数值和单位间不能有空隔 5、属性值尽量不加双引号 6、多个属性值共存(复选)时，用空格分开 五、实训内容及步骤 1、使用CSS改变图片的整体效果 新建一个网页，插入多张彩色图片 修改样式表 使用图片所有图片变成灰度图: 2、使用CSS制作动感的链接效果 新建一个页面，制作两个超级链接，在CSS面板中新建高级样式，分别对a:link、a:visited、a:hover、a:activ

18、e做简单的字体颜色和修饰，每个采用不同的效果，然后浏览页面。 CSS中的代码可以参考： 3、使用CSS实现数字水印效果 使用Photoshop制作水印图片，命名为“1.jpg” 把图片文件“1.jpg”拷贝到Images中，新建一个网页，输入一些文本内容，在网页代码中加入重定义body: 浏览网页时会发现水印图片一直作为背景停留在页面中间。 4、使用CSS改变网页浏览鼠标光标 新建一个网页，输入一些文本内容，在C:WindowsCursor中拷贝一个光标文件“1.ani”放在Images中，在网页代码中加入重定义body, 浏览网页时会发现鼠标光标发生了变化。 注意：鼠标光标支持的文件格式有:

19、ico、cur、ani。 cursor:url(Images/1.ani) 六、实训结果提交与成绩评定 1、提交使用CSS改变图片效果的页面 2、提交使用CSS制作的动感链接的页面 3、提交使用CSS制作的水印效果的页面 4、提交使用CSS制作的改变网页浏览鼠标光标效果的页面 七、实训小结 本次实训中，通过四个实验项目，使学生掌握CSS的常用功能。灵活的运用 CSS 样式，可以设计站点的不同风格。 实训8:使用交互式表单 一、实训目的 1、掌握网页中表单的使用 2、学会根据实际情况使用表单中各种元素 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示

20、页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 动态网站技术很多需要使用到表单，在做表单实训时，不仅需要使用鼠标操作，还需要学会使用代码实现。 在表格布局中，要把行高调小时，需要删除表格行代码中的:  五、实训内容及步骤 1、演示使用表单制作的注册页面 2、新建一个静态网页，使用“插入表单表单”或表单面板中的相应按钮，插入一个表单 3、使用表格布局，并插入表单元素，建立如下的网页： 六、实训结果提交与成绩评定 提交用户注册网页 七、实训小结 表单的开发分为两部分： 一是具体在网页上制作的表单项目，这一部分称为前端，主要在D

21、reamweaver中制作； 另一部分是编写处理表单信息的应用程序，这一部分称为后端，如：ASP、PHP、JSP等。 本实训制作的是前端的设计，后台的开发将在网络程序开发中具体介绍。 实训9:使用框架制作网页 一、实训目的 1、掌握框架的使用方法 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 使用框架时，由于涉及到框架集和框架及多个页面，所以在保存时注意观察虚线框的变化，以确定保存的文件。 五、实训内容及步骤 1、演示使用框架制作的网页

22、2、新建一个网页，使用“查看助理框架边框”显示框架边框, 使用“窗口框架”显示框架面板。 3、使用“插入HTML框架”，选择“上方及左侧嵌套” 选择并设置框架集 上方： 设置边框为“是”； 边框颜色为：#3399FF； 边框宽度为“2px”；行值设置为：120； 下方： 设置边框为“是”； 边框颜色为：#3399FF； 边框宽度为“2px”；行值设置为：160； 4、使用“文件保存全部”保存框架文件 注意：保存时虚线包围的框架就是正在保存的框架文件 5、制作上、左、右三个页面 6、制作导航文字和主框架之间的链接 7、制作其它链接 8、查看最终效果 六、实训结果提交与成绩评定 1、提交使用框架制

23、作的个人求职网站 七、实训小结 框架是Internet网页中常见的页面设计方式。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。 实训10:在网页中插入JavaScript 一、实训目的 1、掌握JavaScript的基础知识 2、掌握在网页中插入JavaScript的方法 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试，在写代码时需格外注意 2、JavaScript区分大小写

24、 五、实训内容及步骤 1、演示在网页中插入JavaScript的网页效果。 2、在HTML中嵌入JavaScript 新建一个普通网页，在中嵌入如下的JavaScript代码： document.write(Hello,JavaScript); window.alert(欢迎光临！); 网页效果如下： 3、链接脚本文件 新建一个Javascript文件，命名为text.js,输入以下内容: document.write(Hello,JavaScript); window.alert(欢迎光临！); 新建一个基本的HTML页面，在中使用： 4、在标记内添加脚本 新建一个页面，在页面中插入表单，然

25、后插入一个按钮，在按钮中添加JavaScript代码： onClick=“JavaScript:window.alert(欢迎光临)” 网页效果如下： 六、实训结果提交与成绩评定 提交三种在网页中插入JavaScript的页面 七、实训小结 JavaScript是一种能让网页更加生动活泼的描述语言,也是目前网页设计中最容易学又最方便的语言。用户可以利用JavaScript轻易地设计出亲切的欢迎信息、漂亮的数字时钟，有广告效果的跑马灯及简单的选举票单，还可以显示浏览器停留的时间。 实训11:使用JavaScript验证表单 一、实训目的 1、掌握使用JavaScript验证表单的方法 二、实训环

26、境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试，在写代码时需格外注意 2、JavaScript区分大小写 五、实训内容及步骤 1、演示使用JavaScript制作的客户端验证的网页 2、修改表单 使用实训8中建立的表单， 把注册帐号、帐号密码、确认密码对应的文本框名称分别改为：zczh、zhmm1、zhmm2。 3、编写事件驱动代码 在提交按钮的代码中加入事件驱动代码： onclick=return check 4

27、、编写check函数 在中插入客户端验证代码，主要保证 、“注册帐号”、“帐号密码”、“确认密码”非空； 、“帐号密码”和“确认密码”一致； 、“帐号密码”位数为6-20位 代码如下： if(document.form1.zhmm1.value!=document.form1.zhmm2.value) function check if(document.form1.zczh.value=) if(document.form1.zhmm1.value=) if(document.form1.zhmm2.value=) window.alert(请输入确认密码); document.form1.

28、zhmm2.value=; document.form1.zhmm2.focus; return false; window.alert(请输入帐号密码); document.form1.zhmm1.value=; document.form1.zhmm1.focus; return false; window.alert(请输入注册帐号); document.form1.zczh.value=; document.form1.zczh.focus; return false; if(document.form1.zhmm1.value.length20) 六、实训结果提交与成绩评定 1、提交

29、用客户端验证的表单页面 七、实训小结 表单客户端验证可以减轻服务器负担，使得客户端反应更快。 实训12:JavaScript综合实例 一、实训目的 1、掌握使用JavaScript的时间函数制作简单的时钟 2、掌握跑马灯效果的实现方法 3、掌握使用JavaScript实现客户端换头像的方法 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试，在写代码时需格外注意 2、JavaScript区分大小写 五、实训内

30、容及步骤 1、制作简单的时钟 (1)显示当前时间 var now=new Date document.write(现在是+now.getYear+年+(now.getMonth+1)+月+now.getDate+日+now.getHours+时+now.getMinutes+分+now.getSeconds+秒) (2)让页面每秒刷新一次 在中加入如下代码: 2、实现跑马灯效果 在中入如下代码: var message=欢迎光临我的个人主页.; 在中加入如下代码: var loc=0; function pmd pmd; len=message.length; window.status=me

31、ssage.substring(0,loc); loc+; if(loclen)loc=0; window.setTimeout(pmd;,300); 3、使用JavaScript实现头像变换 (1)、找到8个头像图片文件(gif或jpg)，命名为:1.jpg8.jpg.存放在face文件夹中。 (2)、新建一个基本页，插入一个表单，在表单中插入一个列表框，命名为“txSelect”，增加8个选项，格式如下： 头像1； (3)、在表单中插入图像“1.jpg”，并命名为“tx”。 (4)、在列表框中添加onChange事件 onchange=htx (5)、在中写htx函数 function h

32、tx document.form1.tx.src=face/+document.form1.txSelect.value+. 完整代码如下： 使用JavaScript实现头像变换 function htx jpg; 请选择你的头像： 头像1 头像2 头像3 头像4 头像5 头像6 头像7 头像8 document.form1.tx.src=face/+document.form1.txSelect.value+.jpg; 六、实训结果提交与成绩评定 1、提交有简单的时钟的网页 2、提交跑马灯效果的网页 3、提交有换头像功能的网页 七、实训小结 实训13：使用层、行为、时间轴实现网页特效 一、实

33、训目的 1、掌握使用层和行为制作拼图游戏 2、掌握使用行为制作弹出式多级菜单 3、掌握使用层和时间轴制作动画 二、实训环境 Dreamweaver 三、实训教学方法 “演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。 四、实训注意事项 五、实训内容及步骤 1、制作拼图游戏 、用PhotoShop把“埃及金字塔”图片等分为4份 切分前(400px*300px) 切分后，每个图片的尺寸是 200*150 把切分后的图放到站点文件夹中 (2)、新建一个基本页，设置页面格式，把页面的上、下、左、右边框都设置为0px。 (3)

34、、在页面左上角插入一个2*2的表格，尺寸分400*300，单元格平均分配，并为表格做细边框。 、插入四个层，并把切片的四个图片依次插入到各层中，把四个层打乱次序排放 、设置各层的“拖动层”行为如下：(注意参数的变化) layer1: layer2: Layer3: Layer4: (6)、查看网页效果 2、制作弹出式多级菜单 (1)、新建一个基本页，在网页中输入文字“经常访问的网站”，并加入链接“#”。 (2)、选中文字，添加行为“显示弹出式菜单”。 (3)、设置弹出式菜单如下： 可以对外观、高级、位置等做进一步修改后，查看网页效果。 3、利用时间轴做动画 (1)、新建一个基本页，插入一个层，

35、命名为plan，插入一张飞机的图片。 (2)、在“窗口”菜单中打开“时间轴”面板，选中plan层，在时间轴第一帧右击，选择“添加对象”，将层添加到时间轴中。 (3)、把动画的结束点从15帧拖到60帧， (4)、选中第60帧，将plan层拖动到网页的右下角位置，选中自动播放，查看网页效果 (5)、在第30帧处右击，选择“增加关键帧”，并调整图层的位置，查看网页效果 六、实训结果提交与成绩评定 1、提交拼图游戏的网页 2、提交弹出式的多级菜单的网页 3、提交利用时间轴做的动画效果 七、实训小结 实训X:XXX 一、实训目的 二、实训环境 三、实训教学方法 四、实训注意事项 五、实训内容及步骤 六、实训结果提交与成绩评定 七、实训小结