文档操作

《网页设计与制作实验》实验教学大纲

一、教学目的和要求

本课程为网络传播专业的专业必修课。

本实验课程在学生掌握计算机基础知识和网络应用基本知识的基础上进行。学生通过本课程，让学生掌握基本的网页设计与制作知识，包括B/S结构、HTML语言、CSS、动态网页以及网页制作软件的操作与使用。熟悉各种语言的语法以及相关软件的使用方法。

通过各个实验掌握各个环节知识，学生可以相互配合完成简单网站的制作，并掌握上传到服务器的操作方法、简单网站内容的更新与维护，以实现简单网站的运行。

通过本课程的学习要求学生掌握网页设计与制作的基本方法与程序，掌握基本的语言和相关软件以及设计基本技巧。不但能独立完成简单的网页制作方法，还要增强合作精神，实现多人合作完成较大网站的制作。

本课程教学由简入深，主要采用以下教学方法：

（1）指定教材中的精典实例，让学生操作实现。

（2）参观与模仿精彩优秀的网站，了解其效果实现方法，并将其应用到实验中。

（3）综合运用基本知识点，实现复杂综合功能。

课程成绩评定主要根据学生每次实验成果判定。

二、教学学时分配和安排

本课共36学时，每周2学时，其具体安排见下表。

周次	实验内容	学时
第1~3周	实验一 HTML文件基础	6
第4~6周	实验二图像与超链接	6
第7~9周	实验三使用 CSS 样式表	6
第10~12周	实验四动态网页	6
第13~15周	实验五使用 Dreamweaver	6
第16~18周	实验六相关软件使用	6

实验一、 HTML文件基础

1、目的

l 掌握使用“记事本”编辑HTML的基本操作、并使用Internet Explorer测试HTML文件的操作。

l 掌握HEAD、TITLE、BODY等基本标记符的使用。

l 掌握参考、转意字符的使用方法。

l 掌握P、BR、HR、Hn等标记符的基本用法。

l 掌握align属性的用法。

l 掌握FONT标记符的用法。

l 了解常用物理字符样式和逻辑字符样式。

l 掌握有序列表、无序列表以及嵌套列表的创建方法。

l 能将实习得到的成果，上传到服务器，并浏览服务器，查看效果。

2、软件环境

Windows95/98/Me/2000/XP；

3、硬件环境

一台具有Web服务、ftp服务的服务器，能保存学生实习成果，并便于以后进一步实习。

学生实习的计算机与服务器联网。

4、内容

A. 利用文本编辑器，输入编辑下面的HTML代码，存盘，然后用浏览器打开浏览效果。

<HTML>

<HEAD>

<TITLE>这是我的第一个网页文件</TITLE>

</HEAD>

<BODY>这是正文内容。</BODY>

</HTML>

并试着更改其中内容，看有什么变化。

B. 在A中BODY标记内的内容中，加入 © 几个字符，观察效果，有什么变化。

C. 制作一个HTML文件，要求包含有常用的文本格式标记，如字体字号、段落、对齐等。

D. 将在C中得到的HTML文件，利用ftp工具（或者利用Internet Explorer）上传到服务器，并用Internet Explorer浏览服务器。

实验二、图像与超链接

1、目的

l 掌握IMG标记符的用法。

l 理解站点文件夹的概念，掌握正确指定文件路径的方法(包括正确设置超链接的目标文件、图像的源文件等)。

l 掌握用A标记符创建各种超链接的方法。

l 理解图像映射的概念。

l 掌握创建表格和表格属性设置的方法。

l 掌握用表格控制页面布局的方法。

l 理解框架的概念。

l 掌握框架的构造和属性设置方法。

l 掌握用框架实现页面导航的方法。

l 理解表单的概念。

l 掌握创建表单的方法，理解各类型表单控件在表单中的作用。

l 掌握设置表单控件属性的方法，掌握为表单控件添加文本标签的方法。

l 了解各种特殊对象在网页中的应用。

l 了解用Director制作Shockwave对象的方法，并掌握在网页中插入Shockwave对象的方法

l 理解Java小应用程序在网页中的应用。

l 掌握使用Anfy创建Java特效并将特效插入网页的方法。

l 掌握用MARQUEE标识符创建滚动字幕的方法。

2、软件环境

Windows95/98/Me/2000/XP(需要能够上网)

3、内容

A. 制作出一个图文并茂的网页，注意合理使用各标记符的属性控制显示效果。

B. 上网测览各大网站 (例如，新浪:http://www.sina.com.cn、http://www.sohu.com>网易:http: //www.l63.com、263:http://www.263上的网页，注意观察它们的站点结构组织 (主要是超链接的合理使用像和文字的使用；上网浏览各大网站 (例如，网易、263等)上的个人主页，分析借鉴它门的站点结构组织和超链接的使用

C. 结合前面的实习内容，制作出一个至少包含5个网页的网站，要求满足以下条件:（1）每个页面都有正确的导航结构，也就是说，从任何一个网页都能够访问到站点中的其他网页;(2)所有用到的多媒体文件 (包括图像文件和声音文件等)都应放在站点目录的assets子目录中;(3)合理使用图像和文字。

D. 将C中全部网页文件夹上传到服务器，并浏览测试链接效果。

E. 制作一个下图所示的表格：

学生情况表

学号	个人信息			入学信息
学号	姓名	性别	年龄	班级	入学年月
200121303124	张三	男	22	200131	2001年9月
200121303125	李四	男	24	200131	2001年9月

F. 上网测览各大网站上的网页，查看源代码，理解表格在页面布局方面的应用。

G. 设计一个复杂版面，利用表格进行定位制作。

H. 上网浏览各大网站上的网页以及个人主页（也可以上bbs.whu.edu.cn），至少找到两处使用框架结构(也可以是页内框架)的情况，分析它们在框架使用方面的特点。

I. 设计一个框架版面，并用HTML语言写出代码，查看效果。

J. 上网测览网页，找到至少3处使用表单的情况，分析它们的构造方法和表单处理方法，尤其注意它们是如何与整个网站融为一体的(包括风格、内容等方面)。

K. 设计一个用户登录的窗口，并用HTML的表单标记写出其代码。

L. 制作一个含MARQUEE标记的网页，并更改其属性值，观看其效果。

M. 上网查找其制作Java特效（Java Applet对象）的工具，查找提供Java特效下载的站点，并将其下载的特效插入到网页中。

N. 将实习成果上传到服务器。

实验三、使用 CSS 样式表

1、目的

l 理解CSS的概念。

l 掌握使用CSS修饰网页元素的方法。

l 掌握一些常用的CSS元素。

2、软件环境

Windows95/98/Me/2000/XP (需要能够上网)

3、内容

A. 上网测览采用了CSS的网页（一般页面文字看起来比较优美的，往往采用了CSS样式表来控制的），查看其源代码，分析借鉴优秀网站中是如何使用CSS技术，便整个网站风格一致，并获得用HTML无法实现的效果的。

B. 采用3种定义CSS的方式来控制正文文字内容的字体大小。

C. 练习CSS过滤器效果。

D. 更改前面几次实习内容网页的样式，并体会用什么方式更方便，可以全部同时更改风格样式。

实验四、动态网页

1、目的

l 理解JavaScript语言在网页制作中的应用。

l 理解DHTML技术的基本原理。

l 掌握在网页中插入脚本程序的方法。

l 掌握分析脚本程序实现效果的方法，能够在网页中合理使用现成的JavaScript效果(包括程序调试和修改)

2、软件环境

Windows95/98/Me/2000/XP(需要能够上网)

3、内容

A. 上网测览网页，查看源代码，分析网页中的JavaScript源代码。

B. 上网查找提供JavaScript特效下载的站点，下载一些JavaScript特效，并将它们插入到网页中。

C. 利用动态网页技术，制作一个效果：打开你制作的某一个网页页面时，弹出一个小网页，并在里面写入提示信息。

实验五、使用 Dreamweaver

1、目的

l 掌握使用Dreamweaver创建网站的方法。

l 掌握使用Dreamweaver进行图片、文字编排的方法。

l 掌握使用Dreamweaver中表格、表单、框架、对象的使用方法。

l 掌握使用Dreamweaver中加入CSS样式表的方法，以及Dreamweaver对动态网页制作的便利方法。

l 掌握Dreamweaver中，网站的上传发布方法。

2、软件环境

Windows95/98/Me/2000/XP

Dreamweaver3.0/4.0

3、内容

A. 练习在Dreamweaver中创建一个个人网站，学会其站点中，多个页面的管理方法。

B. 在网站中加入多个页面，做到图文并茂，并相互超链接，在设计时，学会用可视化设计界面与HTML代码编写相结合的方法。

C. 练习使用Dreamweaver中加入CSS样式表的方法。

D. 练习使用Dreamweaver插入各种Dreamweaver支持对象的方法。

E. 练习使用Dreamweaver制作动态网页的方法。

F. 将设计好的站点发布到服务器上，并在浏览、测试，看是否有问题。若有，请在本地更改后，在远端更新，查看效果。

实验六、相关软件使用

1、目的

l 掌握使用Flash动画制作,并与网页结合。

l 掌握利用ImageReady进行网页图像处理。

2、软件环境

Windows95/98/Me/2000/XP

Flash 5.0/6.0

ImageReady 3.0

3、内容

A. 练习在Flash中制作常见动画的方法。

练习在ImageReady中进行图像格式转换、图像分割动画制作的方法。

考核方式：实习情况及实习成果。

关闭本页

Personal tools

文档操作

《网页设计与制作实验》实验教学大纲

一、教学目的和要求

二、教学学时分配和安排