《网页设计与制作》实践教学大纲.docx

《网页设计与制作》实践教学大纲.docx

《《网页设计与制作》实践教学大纲.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》实践教学大纲.docx（15页珍藏版）》请在冰豆网上搜索。

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

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

（信息网络安全监察专业适用）

一、课程类别

专业能力课

二、地位和作用

本实践教学大纲是信息网络安全监察专业“网页设计与制作”课程的实践教学大纲，是完成“网页设计与制作”课程和培养网页设计与制作的基本操作技能的重要实习实践环节。

总学时为30学时，共包括9个实践项目。

实践地点为校内计算机基础实验室。

实践结果将使学生全面掌握网页设计与制作的技术及网页制作软件的使用。

三、实验目的和要求

通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件Dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。

四、实验设施

1.硬件要求：

使用计算机基础实验室。

硬件条件包括50台计算机：

1G以上内存、40G以上硬盘。

2.软件要求：

（1）WindowsXP以上版本

（2）Dreamweaver8中文版；

（3）Flash8中文版

五、组织方式

所有实验环节均由每位学生独立完成。

实训内容、课时分配情况

实训内容

实训课时

实训方式

1

HTML基础实验

4

操作

2

Dreamweaver基础

2

操作

3

创建简单网页实例

4

操作

4

利用表格布局页

4

操作

5

时间轴动画制作

4

操作

6

表单网页的创建

4

操作

7

CSS样式在网页中的应用

4

操作

8

简单的行为的应用

2

操作

9

网页中多媒体的应用

2

操作

合　　计

30

实验项目

（一）

项目名称

HTML基础实验

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

1．掌握HTML语法基本的基本结构。

2．熟悉HTML编写网页的方法。

（二）实验要求

完成实验报告，在实验报告中要求记录如下内容：

⑴．HTML语法基本结构

⑵．HTML各标记的使用

实验内容

1.编写包括文本和图像的两至三个简单网页

2.在网页之间建立文本、图像和书签超链接

3.编写一个带有表格的网页

4.编写一个带框架结构的网页

实验步骤

按“实验内容”中1～4完成操作，完成实验报告，在实验报告中要求记录如下内容：

1.所访问各商务网站的风格及特点；

2.各种版面布局网站的域名和所采用的版面布局形式；

3.使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；

4.10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。

注意事项

所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

实验项目

（二）

项目名称

Dreamweaver基础

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

2

目的要求

（一）实验目的

（1）熟悉DreamWeaver的界面及其操作

（2）熟悉使用DreamWeaver建立站点，理解本地站点和远程站点的概念

（二）实验要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

实验内容

本实验的内容主要是制作一个“长春悠游网”的站点，分类建立文件夹和2-3个网页。

实验步骤

1.打开DreamWeaverMX，熟悉整个界面，尝试打开、关闭各种面板、视图、工具栏。

使用参数设置把常用的快捷图标添加到状态栏。

2.规划站点（导航结构请遵循本实验的要求），然后新建站点，将站点所在文件夹命名为自己名字的汉语拼音，设计站点的结构。

3.在站点中添加若干个网页，将其中的一个命名为index.htm并设置为主页。

4.打开站点管理器，熟悉站点管理的界面，了解网站地图。

5.将各个网页依次打开，进行编辑，页面中要有文字、图片、背景等网页元素。

6.浏览各个网页的实际效果。

注意事项

所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

实验项目（三）

项目名称

创建简单网页实例

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

（1）熟悉基本网元素及其操作

（2）熟悉使用页面属性

（3）超链接的基本定义及基各种超链接的创建和编辑操作

（二）实验要求

实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

实验内容

本实验的内容主要是制作一个“长春悠游网”的主页文件及其它4-5个相关网页，每个它包括文本、图像、水平线以及日期和时间等元素,利用超链接将网页之间链接起来。

实验步骤

1.建立一个本地站点

2.在站点中建立一个网页文件index.htm并打开进行编辑。

3.输入书中全部的文字内容。

4.将“长春欢迎你”设置滚动效果的文字。

5.对文字进行排版。

6.插入水平线，并设置水平线的颜色。

7.插入导航条

8.设置网页的背景图像。

9.浏览各个网页的实际效果。

注意事项

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用。

实验项目（四）

项目名称

利用表格布局页

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

（1）利用表格进行文本的整齐排列和自由的图文混排

（2）在整个表格内使用背景图像和色彩。

（二）实验要求

实验前认真预习，熟练掌握有关表格布局的基础概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

实验内容

本实验的内容主要是利用表格进行网页的定位练习

1.建立一个本地站点,包括2-3个网页。

2.制作两个利用表格定位的网页其中一个为教师指定样式，另一个可以自由发挥

3.设置超链接将站点中的网页链接起来。

实验步骤

1.建立一个本地站点

2.最外层的表格宽度为700像素，嵌套的表格宽度为100%，整体上分为上下两个表格。

3.上表格为2行1列的表格

4.下表格为4行3列的表格。

5.将下表格的单元格进行合并，调整。

6.在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并。

7.上表格的第二行和下表格右侧第二行制作水平线，将单元格的高度设为“2”；下表第二列制作垂直线，宽度值勤为“2。

”

8.向表格内添加图像和文字，将所有表格的边框值设置为“0”。

9.浏览网页的实际效果。

注意事项

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

实验项目（五）

项目名称

时间轴动画制作

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

（1）掌握时间轴和层的基本理论

（2）熟悉层面板，利用时间轴制作层动画。

（二）实验要求

实验前认真预习，熟练掌握有关时间轴和层概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

实验内容

使用层和时间轴制作动画：

1.建立一个本地站点,包括2-3个网页

2、在网页上添加如下的时间轴动画

（1）层的曲线运动

（2）录制层路径

3.设置超链接将站点中的网页链接起来。

实验步骤

1．层的曲线运动

（1）新建一个文档并保存。

（2）在文档中插入一个层，在“属性检查器”中命名层编号为fish，并在层中插入一幅图像。

并将层拖到时间轴面板中。

（3）选择动画条右侧端点，即右侧关键帧。

（4）在文档中将层向右侧拖拽，这时会在文档中出现一条灰色的直线，表示动画运动的路线。

（5）保存并在浏览器中预览，或按住播放

键，可以看到鱼向右移动，是一个直线运动的动画。

（6）若要使层的运动路线形成曲线，则需要在动画条的中间增加的关键帧，并选择此关键帧，在文档中将层向下拖拽，这样就形成了一条向下的曲线。

2．录制层路径

（1）新建一个文档，并保存。

（2）在文档中绘制一个层，在“属性检查器”中命名该层编号为“butterfly”，并在层中插入一张蝴蝶的图像。

（3）将层移到起始位置，在层边框上单击鼠标右键，在快捷菜单中选择“录制层路径”的命令。

（4）在文档窗口中拖拽层，在停止位置松开鼠标，Dreamweaver8会在后台记录下层移动的路径，并在动画条上产生相应的关键帧。

（5）保存并在浏览器中预览，或按住播放

键，观看动画播放效果。

（6）若要修改层的运动路线，在动画条选择关键帧，拖动层即可。

注意事项

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用

实验项目（六）

项目名称

表单网页的创建

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

（1）熟悉表单的各元素

（2）创建表单网页实例

（二）实验要求

实验前认真预习，熟练掌握有关表单网页的基础概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

实验内容

（四）实验内容

本实验的内容主要是熟练表单的基本操作，并制作表单网页。

1.建立一个本地站点,包括2-3个网页

2.制作两个表单网页其中一个教师指定样式，另一个可以自由发挥

3.设置超链接将站点中的网页链接起来。

实验步骤

1.建立一个本地站点

2.在站点中建立一个网页文件index.htm并打开进行编辑。

3.绘制布局表格

4.在表格中插入相应的表单元素。

5.对网页内容进行排版。

6.浏览网页的实际效果。

7.在站点中建立一个网页文件liuyan.htm并打开进行编辑。

8.绘制布局表格

9.在表格中插入相应的表单元素。

10.浏览网页的实际效果。

注意事项

所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

实验项目（七）

项目名称

CSS样式在网页中的应用

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

4

目的要求

（一）实验目的

（1）利用CSS定义鼠标的形状。

（2）利用CSS滤镜增加页面效果。

（二）实验要求

实验前认真预习，熟练掌握有关CSS概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

实验内容

利用CSS定义鼠标的形状，利用CSS滤镜增加页面效果。

1.建立一个本地站点,包括2-3个网页

2、鼠标样式的设置

3、ＣＳＳ滤镜的使用

4.设置超链接将站点中的网页链接起来。

实验步骤

（一）鼠标样式的设置

1.建立一个本地站点

2.在站点中建立一个网页文件index.htm并打开进行编辑。

3.新建一个网页并在网页中插入一幅图像，如图8.1所示，保存文档。

4.在CSS样式面板中，单击

按钮，打开“新建CSS规则”对话框

5.输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。

6.点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类

7.在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。

8.选中图像，执行以下操作之一：

9.在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。

10.在“属性检查器”的“类”的下拉列表中选择“shubiao”。

11.保存网页，在浏览器中鼠标指向图像测试效果。

（二）ＣＳＳ滤镜的使用

1.新建一个网页并在网页中插入两幅相同的图像，如图8.5所示，保存文档。

2.在CSS样式面板中，单击

按钮，打开“新建CSS规则”对话框。

如图8.6所示。

3.名称中输入“.blur”，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。

4.设置完成后，单击“确定”按钮，打开“.blur的CSS规则定义”对话框，切换到“扩展”分类。

5.在“滤镜”中选择Blur滤镜，参数设置如下：

Blur（Add=true,Direction=135,Strength=20）。

Add：

设置图片是否被改变成印象派的模糊效果。

有两个值：

true（默认）和false。

Direction：

指定模糊方向。

0——垂直向下；45——垂直向右；90——向右；135——向下偏右；180、225、270、315分别是垂直向下、向下偏左、向左、向上偏左。

Strength：

指定有多少像素的宽度将受到模糊影响。

值只能使用整数来指定，默认是5像素。

6.设置完成后，单击“确定”，创建的CSS样式出现在CSS面板。

7.选中文档中的右侧图像，在CSS面板中，右击.blur样式，在弹出的快捷菜单中选择“套用”命令。

8.保存并在浏览器中预览网页效果。

注意事项

所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

实验项目（八）

项目名称

简单的行为的应用

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

2

目的要求

（一）实验目的

（1）添加内置的行为。

（2）设置触发行为的事件。

（二）实验要求

实验前认真预习，熟练掌握有关行为和事件的概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

实验内容

利用Dreamweaver添加内置行为和设置触发事件，为网页增加页面效果。

1.建立一个本地站点,包括2-3个网页

2.为每网页添加一种行为.

3.设置超链接将站点中的网页链接起来。

实验步骤

（一）播放声音

1.打开一个网页，选择行为的对象如某一图像，也可单击窗口下方的标签，为整个页面增加行为。

2.在行为面板上，单击“+”按钮，从下拉菜单中选择“播放声音”。

3.打开“播放声音”对话框。

4.在文本框中输入声音文件的路径和名称，也可单击“浏览”按钮，选择要播放的声音文件。

5.单击“确定”按钮。

在网页中出现如图10.2所示的占位符，此图标在浏览器将不会出现，不影响页面的美观。

6.在行为面板设置事件，如设为“OnLoad”。

7.保存并在浏览器中预览网页，观看效果。

（二）设置状态栏文本

设置状态栏文本，可以设置浏览器状态栏中显示的信息。

增加“状态栏文本”行为的操作为：

1.打开一个网页，选择窗口下方的标签。

2.在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“设置文本”子菜单中的“设置状态栏文本”。

3.打开“设置状态栏文本”对话框。

4.输入要显示的信息，单击“确定”按钮。

5.在行为面板设置事件，如设为“OnLoad”。

6.保存并在浏览器中测试行为。

注意事项

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用。

实验项目（九）

项目名称

网页中多媒体的应用

实训地点

计算机基础教学实验室

实验类型

实践型

实验课时

2

目的要求

（一）实验目的

（1）掌握在网页中插入各种音频文件的操作

（2）掌握在网页中插入Flash文件的操作

（3）掌握在网页插入视频文件的操作

（二）实验要求

实验前认真预习，熟练掌握有关多媒体的基本概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

实验内容

（一）实验目的

（1）掌握在网页中插入各种音频文件的操作

（2）掌握在网页中插入Flash文件的操作

（二）实验要求

实验前认真预习，熟练掌握有关多媒体的基本概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师。

实验步骤

（一）插入音频文件

1.打开要嵌入音频文件的网页，定位光标在要插入音频的位置。

2.单击菜单栏中“插入”|“媒体”|“插件”命令，打开选择文件对话框，选择要插入的音频文件，在网页插入相应的音频文件。

3.保存并在浏览器中预览网页，播放器没有完全显示出来。

4.返回Dreamweaver8，选择插件，在属性面板中设置高度和宽度值，调整音频插件占位符的大小，并在浏览器中测试，到播放器完全显示，浏览者可以对音频文件的播放进行控制。

（二）插入Flash动画

1.新建并保存网页，定位光标在要插入Flash动画的位置。

2.单击菜单栏中“插入”|“媒体”|“Flash”命令。

在“插入”栏的“常用”类别中，选择“媒体”，单击“Flash”。

3.打开选择文件对话框。

4.选择要插入的Flash文件，如选择“huanyin.swf”。

5.单击“确定”按钮，则Flash动画插入了网页中。

6.选中插入的Flash动画，单击属性检查器上的“播放”按钮，播放动画观看效果，也可以在浏览器中观看效果。

注意事项

1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、将站点进行备份留下节课使用