网页设计与制作_网页设计与制作免费

网页设计与制作由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页设计与制作免费”。

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

第一部分 大纲说明

一、课程的性质和任务

《网页设计与制作》是高等职业学校计算机专业的一门必修的专业基础课。本课程讲述了网站创建、网页制作基本知识、Dreamweaver网页制作集成工具使用的方法等内容。通过本课程的学习，使学生掌握构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。

二、课程教学要求

1、理论和实践相结合本课程是计算机专业的一门必修的专业课程，是理论和实践相结合的课程。该课程重点是构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。在教学过程中 要与Dreamweaver MX、Flash MX和Firework MX结合起来，同时，应该使课堂理论教学与学生参与专业实践相结合，在课外安排一定的时间进行专业实践，这样学生在学习中，通过理论学习和上机操作实验熟悉构建网站的流程，能够进行简单图像和动画的制作、加工和处理，能够独立的创建个人网站。

2、加强课堂练习与课后练习

为了训练和培养学生的实际操作能力，必须要求学生进行课堂练习与课后作业练习，加强学生的专业技能和基础理论的学习。

三、教学时数与教材

网页设计与制作课程教学总学时数为54学时，其中授课时间为32学时，实验课时为22学时；《网页设计与制作》，田博文编著，人民邮电出版社，2004年。

四、课程教学方法

在网页设计与制作的教学中应当注意：

1、教学方法

本课程应采用理论与实践结合，讲授与自学结合，实践操作与课堂讨论结合的“三结合”教学方法。

2、教学形式本课程的教学形式可以采用班组教学、课堂讲授、利用业余时间自学等形式。

3、实践性环节教学要求

本课程具有较强的实践性和应用性，教学过程中应该贯彻理论与实践相结合的原则，有重点的组织一些课堂讨论和实践操作以及单元测试，督促并检查学生按时完成课外作业，有条件的情况下，可以组织学生到有关部门及单位参观、座谈、以增强学生的感性认识。

第二部分 教学内容和教学要求

第一章 基础知识（2学时）教学目的与要求：

通过本章学习，学生应了解网页被执行的详细过程，以及与网络相关的基本定义和概念，并掌握在网络中建立网站的方法。

重点难点：在网络中建立网站的方法教学内容： 教学内容：

（一）网络基础知识

（二）初识网页

（三）网上安家

第二章 创建本地虚拟站点（4学时）教学目的与要求：

通过本章学习，让学生熟练掌握在本地创建虚拟站点与创建文件和文件夹的方法，以及站点管理器的使用，了解制作网站的准备工作。重点难点：创建虚拟站点与创建文件和文件夹的方法 教学内容：

（一）准备工作

1、了解网站的服务群体

2、确定网站的主题

3、画出结构图

4、确定网站命名规则

（二）创建虚拟网站

（三）其他功能

1、站点地图布局

2、保存站点地图

3、设计备注

第三章 文档、文本和链接（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握创建、保存文档的方法，以及文本的各项参数设置和文本超级链接、图像超级链接、下载链接的使用方法，了解文本各项参数的源代码表示方法。

重点难点：创建、保存文档的方法，以及文本的各项参数设置和文本超级链接、图像超级链接、下载链接的使用方法 教学内容：

（一）新建文档

（二）建立超级链接

1、添加文本链接

2、图像超级链接

3、电子邮件链接

4、下载链接

5、命名锚记 第四章 Web图像（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握在Dreamweaver MX中使用图像的一些基本方法和技巧、设置网页背景色和背景图像的方法、图像映射和跟踪图像的方法，了解GIF和JPEG两种图像格式的异同点和使用环境。

重点难点：设置网页背景色和背景图像的方法、图像映射和跟踪图像的方法 教学内容：

（一）网页中的色彩

（二）图像格式

1、GIF格式

2、JPEG格式

3、如何正确地使用GIF

（三）Dreamweaver MX中的图像技术

（四）设置网页背景

1、改变网页背景色

2、设置背景图像

（五）在Dreamweaver 中巧妙地处理图像

1、给图像添加文字说明

2、图像映射

3、跟踪图像

第五章 Fireworks MX中的图像技术（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握文本工具、绘图工具和握样式的使用，以及GIF、JPEG格式图像的输出，图像处理技术和在Fireworks MX中制作HTML网页的过程。

重点难点： 文本工具、绘图工具和握样式的使用，以及GIF、JPEG格式图像的输出，图像处理技术和在Fireworks MX中制作HTML网页的过程。教学内容：

（一）制作漂亮的文字

（二）制作个性化的网站标志

（三）制作网页背景图像

（四）对图像进行美化

（五）制作HTML网页

（六）Dreamweaver MX与Fireworks MX的配合使用第六章 表格（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握表格的创建、编辑过程、表格的嵌套、表格的宽度、边框、背景色和背景图像的位置和表格的各种标签的源代码，了解表格的组成及各项参数的含义。

重点难点： 表格的创建、编辑过程、表格的嵌套、表格的宽度、边框、背景色和背景图像的位置和表格的各种标签的源代码 教学内容：

（一）表格的组成（二）建立表格

（三）表格属性

（四）在表格内添加元素

（五）选择表格

（六）编辑表格

（七）增加、删除行和列及拆分、合并单元格

（八）表格的缩放

1、用拖放方法缩放表格的大小

2、用表格的[属性]面板改变表格尺寸

（九）一个完整的页面制作过程

1、页眉的制作

2、左侧导航区的制作

3、制作中间主要区域

4、制作右侧新闻摘要区 第七章 框架（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握创建、保存框架的过程、框架组、框架的属性设置和框架中链接的目标显示窗口、了解框架的含义。重点难点： 创建、保存框架的过程、框架组、框架的属性设置和框架中链接的目标显示窗口 教学内容：

（一）建立框架

1、建立框架

2、插入框架

3、添加内容

4、保存框架

（二）选取框架

1、选择一个框架

2、选择框架组

（三）框架和框架组的属性

1、框架属性

2、框架组属性

（四）编辑框架

（五）框架中链接的目标显示窗口 第八章 表单（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握各表单的属性，了解表单的含义。重点难点：各表单的属性 教学内容：

（一）创建一个反馈表单

（二）测试表单页

（三）表单及表单域的各项属性

第九章 插入其他对象（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握水平线、6种文件头标签、插入字符的使用，熟练在网页中插入多种格式的视频。

重点难点：水平线、6种文件头标签、插入字符的使用，熟练在网页中插入多种格式的视频 教学内容：

（一）插入水平线

（二）插入文件头标签

（三）插入字符

（四）插入多媒体

1、插入Flash动画

2、插入插件

3、播放“*.rm”格式影片 第十章 HTML样式和CSS样式（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握HTML样式的用法、CSS样式的创建、3种放置CSS代码的方式，了解CSS样式的定义。

重点难点：HTML样式的用法、CSS样式的创建、3种放置CSS代码的方式 教学内容：

（一）HTML样式

1、新建样式

2、应用HTML样式

3、清除HTML样式

4、在面板中处理样式

（二）什么是CSS样式

（三）[CSS样式]面板

（四）CSS的属性

（五）使用Dreamweaver MX中的CSS样式编辑器

1、创建自定义样式

2、重定义HTML标签

3、使用CSS选择器

4、附加样式表 第十一章 Flash MX（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握用工具箱中的工具创建和编辑图形、视频、音频的导入、运动动画、变形动画的创建、运动引导动画、遮罩动画的创建，了解矢量动画、位图图像的定义。

重点难点： 用工具箱中的工具创建和编辑图形、视频、音频的导入、运动动画、变形动画的创建、运动引导动画、遮罩动画的创建 教学内容:

（一）基础知识

1、电脑动画

2、矢量图形

3、位图图像

4、Flash动画的特点

（二）Flash MX

（三）创建图形

（四）编辑图形

（五）素材和元件

1、视频的导入

2、音频的导入

3、元件

（六）创建基本动画

1、运动动画和变色动画

2、变形动画

3、逐帧动画

（七）创建多层动画

1、制作运动引导动画

2、制作遮罩动画

（八）作品的测试和发布

1、作品的测试

2、作品的优化

3、作品的导出和发布 第十二章 模板和库（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握模板、库的创建方法，了解[资源]面板的一般用法。

重点难点： 模板、库的创建方法 教学内容:

（一）[资源]面板

（二）Dreamweaver MX中的模板

1、创建模板

2、创建可编辑区域

3、创建重复区域

4、创建重复表格

5、编辑模板

6、使用模板

（三）Dreamweaver MX中的库

1、什么是库

2、怎样使用库

第十三章 源代码相关功能及行为（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握13种行为的创建过程、代码提示、标签选择器、标签编辑器、标签检查器的使用，了解标签管理器的一般用法。重点难点：13种行为的创建过程、代码提示、标签选择器、标签编辑器、标签检查器的使用教学内容:

（一）查看源代码

（二）管理标签库

（三）Dreamweaver中的编码

1、使用代码提示加入背景音乐

2、使用代码片断快速创建网页

3、使用标签选择器插入浮动框架

4、使用标签编辑器编辑标签

5、用标签检查器编辑标签

6、使用快速标签编辑器插入标签

（四）插入HTML注释

（五）[行为]面板

（六）事件

（七）动作

1、播放声音

2、打开浏览器窗口

3、弹出信息

4、调用JavaScript

5、改变属性

6、交换图像

7、检查浏览器

8、检查表单

9、控制Shockwave或Flash

10、转到URL

11、设置导航条图像

12、跳转菜单

13、弹出式菜单 第十四章 网页发布（4学时）教学目的与要求：

通过本章的学习，让学生熟练掌握设置FTP上传的步骤、发布网页的过程、检查、改变站点范围的链接的方法、检查、改变站点范围的链接的方法、清理文档的过程、同步的使用方法，了解报告的作用。重点难点：设置FTP上传的步骤、发布网页的过程、检查、改变站点范围的链接的方法、检查、改变站点范围的链接的方法、清理文档的过程、同步的使用方法 教学内容:

（一）设置FTP上传

（二）发布网页

（三）报告

（四）检查站点范围的链接

（五）改变站点范围的链接

（六）查找和替换

（七）清理文档

（八）同步