WEB技术开发实训指导书基础篇(上).doc

《WEB技术开发》基础篇

实训指导书

编著：曾晓亮吴琼

2010年12月

《WEB技术开发基础篇》实训指导书

本实训主要面向计算机网络、电子商务专业、信息系统专业的学生。时间为一周。

实训目的与性质

实训的主要目的是让学生对网页开发进行实践，理解网页开发的基本技术。

本实训为必做应用性课程实训，可安排在第3、4学期，每个实训建议为2学分。

实训环境的准备

本实训的环境要求安装Windows2000以上版本操作系统，Web服务器采用IIS5以上版本，网页开发软件安装Dreamweaver。

实训程序及进度安排

本实训以学生的网页设计活动为主线，在此过程中，教师给予适当的指导并重点控制实训进度安排。教学程序建议如下：

1）布置任务和要求

指导教师说明网页设计实训的基本要求和实训的要点。

2）网页设计

根据要求，完成网页的设计。

实训评测及考核方法

本实训的成绩将以个人为单位给出，进行上机实训检查，按开发出的网页运行效果、正确性及先进性等因素进行评分，同时学生要提交实训报告，平时上机检查成绩占15%，整体作品检查60%，实训报告成绩占25%。

实训内容

一共安排十一个实训，分别对网页设计的每一章节进行实践。

实训一网页设计基础

1.用Dreamweaver制作一个简单的网页，可以在网页中加入文字、图片等，并设置

网页的背景色以及网页标题。

2.设计一个网站。要求创建一个支持ASP VBScript的站点。

实训二表格的应用

1.利用表格布局制作一个效果如下图的个人主页。（图片材料可以自己准备）

实训三超级链接

1.利用超级链接创建几个唐诗的链接，使得网页能够在点击唐诗的题目时进行页面

的转换。

2.做一个友情链接页面，提供例如搜狐、网易、雅虎中国等网站的图片链接，要求

新窗口中打开链接。

3.做一个软件下载页面，提供一些小软件的下载功能。

4.在一个图片上分别创建矩形热点、圆形热点和一个不规则形状的热点，并分别设

置不同的链接。

5.创建一个电子邮件链接，链接目标为自己的电子邮件。

实训四图像和多媒体

在网页上插入背景音乐循环播放和flash图片。

实训五CSS样式表

创建几个外部CSS样式表文件，用来统一某个网站中不同网页的格式。（如：正文、标题等）

实训六网页布局设计

1.用表格布局的方法布局下图

2.灵活运用布局方法仿照新浪网的网页进行布局。

实训七灵活应用图层和行为

1.熟悉并应用软件中内置的其他行为动作，尝试使用“拖动层”的行为动作命令来

制作网页中元素的拖拽效果。

2.尝试把“可控制滚动方向的图片”实例进行完善，实现鼠标移动到图片上时能使

得图片停止运动，鼠标离开时继续移动。

实训八扩展Dreamweaver的应用

1.自己搜集一张图片，在Fireworks或Photoshop中进行切片处理，并给切片增加交

换图像行为，并导出HTML文件。尝试切片的鼠标右键菜单中其他功能。

2.根据自己的爱好去搜集经典的插件，并安装运行。

实训九模版、库和站点管理

1.创建一个简单的个人网站模版，新建两个基于该模版的网页，并填上简单的内容。

2.将上题完成的网页中的某个元素（如图象、表格、声音和Flash文件等）转化为

库项目。然后更改这个库项目，并更新使用这个库项目的所有网页。

3.运用站点管理功能进行上传，并能对本地文件和远程站点的文件进行同步更新。

实训十打造一个互动留言板

1.打造一个互动留言板程序。(asp程序，)

实训十一精彩网站制作实战

本部分要求整合之前完成的全部内容，形成完整的网站，巩固网页设计的操作技能。要求按照以下顺序进行。

1.网站总体策划

2.网站的建立

3.制作主页面

4.制作其他页面

5.链接主页面和其他页面

6.将网页上传到因特网上（下载FTP软件或用Dreamweaver自带软件上传）