网页网站实训指导书.doc_第1页
网页网站实训指导书.doc_第2页
网页网站实训指导书.doc_第3页
网页网站实训指导书.doc_第4页
网页网站实训指导书.doc_第5页
已阅读5页,还剩16页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页网站实训指导书 一、实训目的 1、使用记事本工具,利用HTML标记制作简单的网页 2、熟悉HTML标记的使用 3、掌握使用HTML标记制作表格的方法 二、实训环境计算机、记事本 三、实训教学方法“演示、讲解、练习、辅导”相结合演示利用HTML写的网页的效果;讲解每一步的实现过程;让学生自己使用HTML实现网页效果;对学生的练习进行辅导。 四、实训注意事项 1、HTML标签的配对与嵌套 2、把记事本文件存为网页形式需注意后缀为“htm”或“html” 五、实训内容及步骤 1、打开记事本,新建一个文件,另存为“1.htm”; 2、输入HTML结构,然后在Inter Explorer中查看; 3、在网页中使用表格(在body中使用标签生成表格) 4、在网页中使用其它标签 (1)、换行 (2)、产生水平线 (3)、段落 . (4)、设置文本属性. (5)、设置文本样式加粗.倾斜. 六、实训结果提交与成绩评定 1、提交一个用HTML标签书写的网页 七、实训小结HTML是网页制作的基础,给学生展示代码建立网页,主要让学生理解网页的基础,使学生掌握网页制作与Office办公软件的区别。 实训2:使用Dreamweaver建立和管理站点 一、实训目的 1、掌握使用Dreamweaver建立新站点的方法 2、掌握站点的管理方法 3、掌握站点的发布 二、实训环境连接着Inter的计算机、Dreamweaver8. 0、LeapFTP、示例站点 三、实训教学方法“演示、讲解、练习、辅导”相结合演示站点的优点;讲解站点建立、管理与网站发布的过程;让学生自己站点建立、管理与网站发布;对学生的练习进行辅导。 四、实训注意事项 五、实训内容及步骤 1、展示现成的网站(csd.bsnc.),并讲解实现的基本步骤,让学生对网站有一个初步的认识。 2、使用Dreamweaver创建站点。 使用(站点?新建站点),顺着步骤一步一步设置,并讲解第一步的选项的意义,完成后让学生自己练习,每人建立一个站点。 3、在站点目录中,拷贝一个现成的站点,讲解站点的优势。 在站点的界面下修改文件名,站点自动更新链接。 4、申请网页空间。 对于学生来讲,租用空间和域名需要出钱,所以可以申请空间,让学生学会管理网站。 利用现有的提供空间的站点,演示站点的申请并让学生自己申请(.5944.)。 5、上传站点。 利用申请获得的用户名和密码,使用FTP上传站点,首先采且传统的FTP的方法(说明该方法的缺点伟输速度慢、不支技断点续传),然后使用LeapFTP工具来上传站点。 6、查看网站最终效果。 六、实训结果提交与成绩评定 1、使用Dreamweaver创建MyWeb站点。 2、申请空间,绑定个性域名,并用LeapFTP上传示例站点,查看最终效果。 七、实训小结建立了站点,对以后的学习会带来很大的方便,比如链接,站点内的链接,会自动变成相对路径,而且有了站点,对于引用站点里的资源会带来很大方便等等。 有了空间后,学生可以上传自己完成的网页,对于资料的收集、,个人作品的展示很有意义。 实训3:使用Dreamweaver处理文字 一、实训目的 1、掌握页面的创建、保存与设置 2、掌握利用Dreamweaver文件、插入对象、使用表格、使用编号与项目编号、设置超链接。 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和插入方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 五、实训内容及步骤 1、展示使用Dreamweaver处理的文字网页,如下图所示 2、讲解以上页面中的各个元素,并在网页中逐步插入。 3、让学生依照效果图,实现“求职简历”页面。 六、实训结果提交与成绩评定 1、提交求职简历页面,包含以下元素日期时间、表格布局、分级项目编号、页面超链接、邮件链接、特殊字符。 七、实训小结网页文字处理是最基本的功能,通过本实训让学生掌握常用的网页文字处理功能。 实训4:在网页中使用图片 一、实训目的 1、掌握映射图像的制作方法 2、掌握轮换图像的制作方法 3、掌握flash相册的制作方法 4、掌握常用图像滤镜的制作方法 二、实训环境Dreamweaver、图像素材 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 1、使用的图像必须放在站点下,使用相对路径调用 五、实训内容及步骤(详情参看代码) 1、映射图像的制作下载三张图片,分别是中国地图、云南地图、昆明地图,把每张图片制作成插入到一个网页中,分别为:中国.htm,云南.htm,昆明.htm,在中国地图上,使用热点工具画出云南地图的轮廓,然后输入链接目标到“云南.htm”,同样,在“云南.htm”,使用热点工具画出昆明地图的轮廓,然后输入链接目标到“昆明.htm”。 如果对本例进行扩展,可以实现全国的所有地区的地图链接。 2、使用轮换图像制作导航条制作两组风格相似的图像,效果如下建立网页,插入一行四列的表格,在单元格中,使用“插入?图像对象?鼠标经过的图像”,在出现的对话框中,选择原始图像和鼠标经过的图像,以此类推,制作出具有动态效果的导航条。 3、制作Flash相册建立一个网页,使用“插入?媒体?图像查看器”,把flash和网页存储在同一个目录下,选中flash,设置flash元素的相关参数,实现Flash播放器。 六、实训结果提交与成绩评定 1、提交映射图像网页 2、提交轮换图像网页 3、提交Flash相册网页 4、提交图像滤镜网页 七、实训小结图像是网页设计中的很重要的元素,充分使用图像能使用网页增色不少。 实训5:在网页中使用音频、视频和Flash文件 一、实训目的 1、掌握在网页中设置网页背景音乐的方法 2、掌握在网页中嵌入音频文件的方法 3、掌握在网页中嵌入视频文件的方法 4、掌握在网页中嵌入Flash文件、Flash按钮、Flash文本、Flash Video的方法 二、实训环境Dreamweaver、音频素材、视频素材、Flash素材 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项网页中使用的音频、视频和Flash素材应该存放在站点下,使用相对路径调用 五、实训内容及步骤 1、在网页中插入背景音乐新建一个网页,并在同一层次建立一个文件夹“Media”,拷贝音乐文件“1.mid”到Media文件夹下,在网页中加入代码注意这里的音频文件格式可以是mp 3、mid、wav 2、在网页中嵌入音频文件由于音乐不可以控制,所以可以嵌入音频文件。 新建一个网页,并在同一层次建立一个文件夹“Media”,拷贝音乐文件“1.mid”到Media文件夹下。 在网页中使用“插入?媒体?插件”,然后找到“1.mid”,调整插件的大小及位置即可,也可以使用如下代码此时在网页浏览时,可以控制音乐的播放、音量等 3、在网页中嵌入视频文件新建一个网页,并在同一层次建立一个文件夹“Media”,拷贝音乐文件“1.wmv”到Media文件夹下。 在网页中使用“插入?媒体?插件”,然后找到“1.wmv”,调整插件的大小及位置即可,也可以使用如下代码此时在网页浏览时,可以控制视频的播放、音量等注意这里的视频文件格式可以是wmv、rm、mpeg等 4、在网页中插入Flash文件新建一个网页,并在同一层次建立一个文件夹“Media”,拷贝音乐文件“1.swf”到Media文件夹下。 在网页中使用“插入?媒体?Flash”,然后找到“1.swf”,调整插件的大小及位置即可(由于插入Flash时,产生的代码过多,不易于手写代码)。 在网页中还可以插入Flash文本、Flash按钮、Flash影片等。 六、实训结果提交与成绩评定 1、提交在带背景音乐的网页 2、提交嵌入了音频文件网页 3、提交嵌入了视频文件的网页 4、提交嵌入了Flash文件的网页 七、实训小结多媒体可以增强网页的表现效果,合理利用多媒体可以使网页丰富多彩。 实训6:使用表格布局网页 一、实训目的 1、掌握网页设计的一般流程 2、掌握使用Photoshop制作图像切片并生成网页 3、掌握使用表格布局网页的方法 二、实训环境Dreamweaver,网页效果图 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项使用表格做网页布局时,应该把网页的表格单元格边距、单元格填充和边框参数都设置为0,内嵌表格的宽度一般设置为百分比。 五、实训内容及步骤 1、演示网页最终效果 2、讲解网页设计步骤?设计网页效果图?把效果图做切片?使用表格把切片布局为网页(一般把图片做成表格背景)?使用表格布局控制网页内容元素的位置 3、利用Photoshop制作网页效果图并做切片 4、利用表格把切片布局成网页 5、使用内嵌表格控制页面元素位置,制作完整的网页 六、实训结果提交与成绩评定 1、设计或下载一个网页效果图,切片后,利用表格布局并添加页面元素,制作成网页并提交 七、实训小结表格布局是网页设计中最常用的方法,使用表格布局网页效果图,可以制作出风格统 一、精美的网页实训7:使用CSS制作网页特效 一、实训目的 1、掌握CSS的基本写法 2、掌握使用CSS改变图片的整体效果的方法(灰度图与彩图的转换) 3、掌握使用CSS制作动感的链接效果的方法 4、掌握使用CSS制作数字水印的方法 5、掌握使用CSS改变网页浏览鼠标光标的方法 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 1、CSS的类名定义和使用区分大小写(但CSS的属性和值不分大小写) 2、涉及到颜色值时需要加“#” 3、CSS语句间用“;”分隔(最后一个分号可以省略) 4、CSS属性的数值和单位间不能有空隔 5、属性值尽量不加双引号 6、多个属性值共存(复选)时,用空格分开 五、实训内容及步骤 2、使用CSS制作动感的链接效果新建一个页面,制作两个超级链接,在CSS面板中新建高级样式,分别对a:link、a:visited、a:hover、a:active做简单的字体颜色和修饰,每个采用不同的效果,然后浏览页面。 CSS中的代码可以参考 3、使用CSS实现数字水印效果使用Photoshop制作水印图片,命名为“1.jpg”把图片文件“1.jpg”拷贝到Images中,新建一个网页,输入一些文本内容,在网页代码中加入重定义body: 浏览网页时会发现水印图片一直作为背景停留在页面中间。 4、使用CSS改变网页浏览鼠标光标新建一个网页,输入一些文本内容,在C:WindowsCursor中拷贝一个光标文件“1.ani”放在Images中,在网页代码中加入重定义body, 浏览网页时会发现鼠标光标发生了变化。 注意鼠标光标支持的文件格式有:ico、cur、ani。 六、实训结果提交与成绩评定 1、提交使用CSS改变图片效果的页面 2、提交使用CSS制作的动感链接的页面 3、提交使用CSS制作的水印效果的页面 4、提交使用CSS制作的改变网页浏览鼠标光标效果的页面 七、实训小结本次实训中,通过四个实验项目,使学生掌握CSS的常用功能。 灵活的运用CSS样式,可以设计站点的不同风格。 实训8:使用交互式表单 一、实训目的 1、掌握网页中表单的使用 2、学会根据实际情况使用表单中各种元素 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项动态网站技术很多需要使用到表单,在做表单实训时,不仅需要使用鼠标操作,还需要学会使用代码实现。 在表格布局中,要把行高调小时,需要删除表格行代码中的: 五、实训内容及步骤 1、演示使用表单制作的注册页面 2、新建一个静态网页,使用“插入?表单?表单”或表单面板中的相应按钮,插入一个表单 3、使用表格布局,并插入表单元素,建立如下的网页 六、实训结果提交与成绩评定提交用户注册网页 七、实训小结表单的开发分为两部分一是具体在网页上制作的表单项目,这一部分称为前端,主要在Dreamweaver中制作;另一部分是编写处理表单信息的应用程序,这一部分称为后端,如ASP、PHP、JSP等。 本实训制作的是前端的设计,后台的开发将在网络程序开发中具体介绍。 实训9:使用框架制作网页 一、实训目的 1、掌握框架的使用方法 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项使用框架时,由于涉及到框架集和框架及多个页面,所以在保存时注意观察虚线框的变化,以确定保存的文件。 五、实训内容及步骤 1、演示使用框架制作的网页 2、新建一个网页,使用“查看?助理?框架边框”显示框架边框,使用“窗口?框架”显示框架面板。 3、使用“插入?HTML?框架”,选择“上方及左侧嵌套”选择并设置框架集上方设置边框为“是”;边框颜色为#3399FF;边框宽度为“2px”;行值设置为120;下方设置边框为“是”;边框颜色为#3399FF;边框宽度为“2px”;行值设置为160; 4、使用“文件?保存全部”保存框架文件注意保存时虚线包围的框架就是正在保存的框架文件 5、制作上、左、右三个页面 6、制作导航文字和主框架之间的链接 7、制作其它链接 8、查看最终效果 六、实训结果提交与成绩评定 1、提交使用框架制作的个人站 七、实训小结框架是Inter网页中常见的页面设计方式。 框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。 实训10:在网页中插入JavaScript 一、实训目的 1、掌握JavaScript的基础知识 2、掌握在网页中插入JavaScript的方法 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试,在写代码时需格外注意 2、JavaScript区分大小写 五、实训内容及步骤 1、演示在网页中插入JavaScript的网页效果。 2、在HTML中嵌入JavaScript新建一个普通网页,在中嵌入如下的JavaScript代码 网页效果如下 3、链接脚本文件新建一个Javascript文件,命名为text.js,输入以下内容:document.write(Hello,JavaScript);window.alert(欢迎光临!);新建一个基本的HTML页面,在中使用 4、在标记内添加脚本新建一个页面,在页面中插入表单,然后插入一个按钮,在按钮中添加JavaScript代码onClick=“JavaScript:window.alert(欢迎光临)”网页效果如下 六、实训结果提交与成绩评定提交三种在网页中插入JavaScript的页面 七、实训小结JavaScript是一种能让网页更加生动活泼的描述语言,也是目前网页设计中最容易学又最方便的语言。 用户可以利用JavaScript轻易地设计出亲切的欢迎信息、漂亮的数字时钟,有广告效果的跑马灯及简单的选举票单,还可以显示浏览器停留的时间。 实训11:使用JavaScript验证表单 一、实训目的 1、掌握使用JavaScript验证表单的方法 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试,在写代码时需格外注意 2、JavaScript区分大小写 五、实训内容及步骤 1、演示使用JavaScript制作的客户端验证的网页 2、修改表单使用实训8中建立的表单,把注册帐号、帐号密码、确认密码对应的文本框名称分别改为zczh、zhmm 1、zhmm2。 3、编写事件驱动代码在提交按钮的代码中加入事件驱动代码onclick=return check() 4、编写check函数在中插入客户端验证代码,主要保证 (1)、“注册帐号”、“帐号密码”、“确认密码”非空; (2)、“帐号密码”和“确认密码”一致; (3)、“帐号密码”位数为6-20位代码如下 六、实训结果提交与成绩评定 1、提交用客户端验证的表单页面 七、实训小结表单客户端验证可以减轻服务器负担,使得客户端反应更快。 实训12:JavaScript综合实例 一、实训目的 1、掌握使用JavaScript的时间函数制作简单的时钟 2、掌握跑马灯效果的实现方法 3、掌握使用JavaScript实现客户端换头像的方法 二、实训环境Dreamweaver 三、实训教学方法“演示、讲解、练习、辅导”相结合演示页面最终效果;讲解页面元素的功能和实现方法;让学生自己实现页面效果;对学生的练习进行辅导。 四、实训注意事项 1、JavaScript不容易调试,在写代码时需格外注意 2、JavaScript区分大小写 五、实训内容及步骤 1、制作简单的时钟 (1)显示当前时间在中加入如下代码: (2)让页面每秒刷新一次在中加入如下代码: 2、实现跑马灯效果在中入如下代码: 3、使用JavaScript实现头像变换 (1)、找到8个头像图片文件(gif或jpg),命名为:1.jpg8.jpg.存放在face文件夹中。 (2)、新建一个基本页,插入一个表单,在表单中插入一个列表框,命名为“txSelect”,增加8个选项,格式如下头像1; (3)、在表单中插入图像“1.jpg”,并命名为“tx”。 (4)、在列表框中添加onChange事件onchange=htx() (5)、在中写htx()函数 完整代码如下 使用JavaScript实现头像变换 六、实训结果提交与成绩评定 1、提交有简单的时钟的网页 2、提交跑马灯效果的网页 3、提交有换头像功能的网页 七、实训小结实训13使用层、行为、时间轴实现网页特效 一、实训目的 1、掌握使用层和行为制作拼图游戏 2、掌握使用行为制作弹出式多级菜单 3、掌握使用层和时间轴制作动画 二、实训环境Dreamwe

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论