网页设计与制作实践教学大纲讲解

第一篇：网页设计与制作实践教学大纲讲解

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

本实践教学大纲是电子商务专业“网页设计与制作”等相关基础课程的实践教学大纲，是完成“网页设计与制作”课程和培养网页设计与制作的基本操作技能的重要实习实践环节。总学时为48学时，共包括14个实践项目。实践地点为校内计算机基础实验室。实践结果将使学生全面掌握网页设计与制作的技术及网页制作软件的使用。

一、适用专业范围

本实践教学大纲适用于高职广告设计与制作专业、电子商务等计算机应用类专业。

二、实践前期准备知识

1．计算机基础及网络基础理论知识； 2．电脑图形制作软件的使用技巧。

三、学时分配

本实践教学为48学时。

四、实践条件及要求 1．硬件要求：

使用计算机，512M 内存、40G 硬盘 2．软件要求：

（1）Windows98以上版本（2）Dream weaver8 中文版；

（3）Flash8 中文版

五、实践内容

实验一 HTML基础实验 7学时

（一）实验目的

1．掌握HTML 语法基本的基本结构。2．熟悉HTML 编写网页的方法。

（二）实验要求

完成实验报告，在实验报告中要求记录如下内容： ⑴．HTML 语法基本结构 ⑵．HTML 各标记的使用

（三）学时分配 本实践项目为7学时

（四）实验内容

1．写出HTML 语法的基本结构

2．编写包括文本和图像的两至三个简单网页 3．在网页之间建立文本、图像和书签超链接 4．编写一个带有表格的网页 5．编写一个带框架结构的网页 实验二 Dreamweaver基础 2学时

（一）实验目的

(1熟悉DreamWeaver 的界面及其操作

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

（二）实验要求

实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配 本实践项目为2学时。

（四）实验内容

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

实验三 创建简单网页实例 2学时

（一）实验目的

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

(2能够运用页面属性设置网页的背景等内容

（二）实验要求

实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配 本实践项目为2学时。

（四）实验内容

本实验的内容主要是制作一个“长春悠游网”的主页文件及其它2-3个相关网页，每个它包括文本、图像、水平线以及日期和时间等元素。

实验四 创建网页超链接 3学时

（一）实验目的

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

（二）实验要求

实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配 本实践项目为3学时。

（四）实验内容

本实验的内容主要是利用上次实验的内容制作超级链接，包括文本、图像、热区以及锚点链接。

实验五 利用表格布局页 4学时

（一）实验目的

(1利用表格进行文本的整齐排列和自由的图文混排(2在整个表格内使用背景图像和色彩。

（二）实验要求

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

生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配 本实践项目为4学时。

（四）实验内容

本实验的内容主要是利用表格进行网页的定位练习1.建立一个本地站点, 包括2-3个网页

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

3.设置超链接将站点中的网页链接起来。实验六 框架网页的创建 4学时

（一）实验目的

掌握和了解框架网页的创建和编辑操作，熟悉目标框架的设定。

（二）实验要求

实验前认真预习，熟练掌握有关框架网页的基础概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配

本实践项目为4学时。

（四）实验内容

本实验的内容主要是利用框架结构来建立网页，并设置目标框架。1.建立一个本地站点, 包括2-3个网页

2.制作两个框架网页其中一个为教师指定样式，另一个可以自由发挥。3.设置网页间的超链接, 并设置目标框架.实验七 时间轴动画制作 3学时

（一）实验目的

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

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

（二）实验要求

实验前认真预习，熟练掌握有关时间轴和层概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为3学时。

（四）实验内容

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

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

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

(1层的曲线运动(2录制层路径

3.设置超链接将站点中的网页链接起来。实验八 表单网页的创建 3学时

（一）实验目的

(1熟悉和掌握表单的各元素的基本操作(2能够独立创建表单网页实例

（二）实验要求

实验前认真预习，熟练掌握有关表单网页的基础概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

（三）学时分配 本实践项目为3学时。

（四）实验内容

本实验的内容主要是熟练表单的基本操作，并制作表单网页。1.建立一个本地站点, 包括2-3个网页

2.其中一个网页为表单网为老师指定, 其他含表单项目网页自由发挥制作。3.设置超链接将站点中的网页链接起来。

实验九 实验九 简单的行为的应用 简单的行为的应用 行为的应 2 学时

（一）实验目的(1添加内置的行为。(2设置触发行为的事件。

（二）实验要求 实验前

认真预习，熟练掌握有关行为和事件的概念和知识。实验过程中记录发生 的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为 2 学时。

（四）实验内容 利用 Dreamweaver 添加内置行为和设置触发事件，为网页增加页面效果。1.建立一个本地站点,包括 2-3 个网页 2.为每网页添加一种行为.3.设置超链接将站点中的网页链接起来。实验十 实验十 样式在网页中的应用 CSS 样式在网页中的应用 3 学时

（一）实验目的(1利用 CSS 定义鼠标的形状。(2利用 CSS 滤镜增加页面效果。

（二）实验要求 实验前认真预习，熟练掌握有关 CSS 概念和知识。实验过程中记录发生的现象并 分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为 3 学时。

（四）实验内容 利用 CSS 定义鼠标的形状，利用 CSS 滤镜增加页面效果。1.建立一个本地站点,包括 2-3 个网页

2、鼠标样式的设置

3、ＣＳＳ滤镜的使用 6 4.设置超链接将站点中的网页链接起来。实验十 实验十一：网页中多媒体的应用 2 学时 网页中多媒体的

（一）实验目的（1）掌握在网页中插入各种音频文件的操作（2）掌握在网页中插入 Flash 文件的操作（3）掌握在网页插入视频文件的操作

（二）实验要求 实验前认真预习，熟练掌握有关多媒体的基本概念和知识。实验过程中记录发生 的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为 2 学时。

（四）实验内容 1.建立一个本地站点,包括 2-3 个网页 2.分别在网页添加如下的多媒体效果:（1）插入各种音频文件（2）插入 Flash 文件（3）插入视频文件 3.设置超链接将站点中的网页链接起来。实验十 实验十二：模板和库在网页中的应用 2 学时 模板和库在网页中的应用

（一）实验目的(1掌握模板和库项目的创建操作(2能够应用模板和库设计网页(3掌握利用模板和库更新页面的方法

（二）实验要求 实验前认真预习，熟练掌握有关模板和库的基本概念和知识。实验过程中记录发 生的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为 2 学时。

（四）实验内容 7 1.建立一个本地站点,包括 2-3 个网页 2.在网站中创建模板和库项目 3.在网站利用模板创建网页.4.在网页添加库项目并修改后进行更新.5.设置超链接将站点中的

网页链接起来。实验十 实验十三：站点测试和发布 2 学时

（一）实验目的(1站点测试的内容与操作(2定义远程站点的方法(3使用 Dreamweaver8 发布站点

（二）实验要求 实验前认真预习，熟练掌握有关站点测试和发布的基本概念和知识。实验过程中 记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 本实践项目为 2 学时。

（四）实验内容 利用在实验项目十一中的站点,完成以下操作(1进行站点的测试(2利用 Dreamweaver 的内置 FTP 将本地点连接到远端站点,并将网站上传到远端 站点.实验十四 实验十四：FLSH 基础实验 9 学时

（一）实验目的（1）熟悉 Flash 的界面和文件操作。（2）基本掌握各种文字特效的制作方法。（3）基本掌握各种基本动画的制作方法。

（二）实验要求 实验前认真预习，熟练掌握有关 Flash 的基本概念和知识。实验过程中记录发生 的现象并分析原因。实验完毕将所有文件打包交给老师。

（三）学时分配 8 本实践项目为 9 学时。

（四）实验内容

1、绘制各种失量图形

2、文字效果制作 3．基本动画类型制作

六、学生实践效果的评定 任课教师根据本大纲要求，拟定出具体考核题目，由学生动手操作完成相关实训 实践项目，按统一标准评定成绩，专门计入学生实践课程成绩档案。编写人：（签字）李显萍 教研室主任：（签字）系（部）主任：（签字）编写日期：2007 年 8 月 22 日 执行日期：2007 年 8 月 27 日 9

第二篇：《网页设计与制作》教学大纲

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

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业

开课学期：2011-2012第2学期 总学时：24学时 总学分：1 课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴 闵联营，科学出版社;

2、网站与网页设计，张贵明，清华大学出版社;

3、网页美术设计原理及实战策略，王晓峰 焦燕，清华大学出版社;

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）（1）HTML文件的基本结构（2）文字和段落标记

（3）列表标记

（4）图片标记（5）表格标记（6）超链接标记（7）表单标记（8）框架标记

第三章、JavaScript语言（4学时）（1）JavaScript语言简介（2）JavaScript编程基础（3）基于对象的JavaScript语言（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）（1）CSS概述（2）CSS属性

第五章、可视化网页设计工具Dreamvawer8.0（1）网页的基本操作（2）图像、表格与超链接（3）表单与框架（4）添加网页元素（5）发布站点

第六章、动态网页设计语言ASP（4学时）（1）ASP简介（2）VBScript脚本基础（3）ASP的内置对象（4）实用Global.asa文件

4学时）（第七章、利用AD0访问数据库（1学时）（1）数据库的连接（2）数据库的检索（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1.自制网站（80%）2.平时考勤、作业(20%)平时成绩分配：

平时考勤5次，每次2分，共占10% 作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

执笔人：邢雁平

第三篇：网页制作与设计教学大纲

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

课程编号：

总学时数：36学时（其中讲授：20学时，实验：16学时）

一、课程性质、目的和要求

本课程是我系各专业必修专业课程之一。该课程以Dreamweaver和CSS为蓝本，全面介绍与网页设计制作有关的知识，向学生阐明Web基本工作机制，并使学生具有解决静态网页制作和设计等方面问题的能力。通过对WWW的基本概念、网页设计的基本原则、网页设计编程的基本技术与技巧的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。

在网络技术迅速发展的今天，网页制作已成为当今社会上一种比较热门的技术，也是计算机专业学生的一门必修课，通过课程学习要求学生能够掌握静态网页的制作工具的使用以及HTML标记语言的运用，并基本掌握JavaScript脚本语言编程的常用方法与技巧。通过与前期课程的融会，运用掌握的Flash等其他制作工具软件，在具体的网页设计过程中要很好的将几者结合起来使用，从而能够生成功能强大、丰富多彩、生动活泼的高质量的网页。通过本门课程的学习，学生能够具备以下能力：网站建设、网络广告、多媒体课件、网络游戏、汇报材料，MTV等。同时培养学生以下素质：服务意识：能够为他人提供优质的服务；文明法制意识：网站内容应积极健康向上，不做违法的事；合作精神：能够与他人进行合作，具有协调工作能力和组织管理能力；较强的自我知识及技术更新能力：快速跟踪网页制作的新技术及市场应用动态。

二、教学内容、要点和课时安排

第一章 Dreamweaver MX概述 1．Dreamweaver MX简介

2．Dreamweaver MX的工作界面介绍

3．窗口和面板

4．Dreamweaver MX的新特性

要求：熟悉Dreamweaver MX的操作界面，DreamweaverMX版本的最新特性，掌握如何自行设置具有独特的工作环境，对Dreamweaver MX的主界面认识透彻，便于以下课程的深度学习。

第二章 创建站点 1．站点的规划

2．创建本地站点 3．创建ASP站点 4．连接数据库

2学时

2学时 5．站点的管理与维护 6．发布站点 要求：了解站点的基本概念，熟悉掌握使用DreamweaverMX定义站点的方法，能根据自己的实际情况定义站点，定义ASP站点，掌握通过DreamweaverMX软件连接简单数据库的方法。

第三章 文本及其格式化 1．文本及其格式化概述 2．文本的输入 3．创建文本列表 4．CSS样式文件的创建

5．将文档中的样式导出为CSS样式文件 6．文本格式化综合实例

要求：学习如何插入文本、设置字体类型、大小、颜色和对齐属性，使用层叠样式表创建和应用自定义样式。通过学习掌握利用CSS样式格式文本，掌握导出和使用CSS样式文件的基本方法。

第四章 图像

2学时

2学时

1．常用图像文件格式 2．插入图像 3．设置图像的属性

要求：通过学习，学生必须完全掌握如何在DreamweaverMX软件中插入图像、修改图像的属性，利用外部图象处理软件编辑图像以及创建图像地图等方法。实现图像与文本的完美结合。

第五章 表格 1．概述

2．表格的基本操作 3．表格及其属性设置 4．表格排序

要求：掌握使用DreamweaverMX建立表格、设置表格以及使用表格对网页进行布局和美化。通过表格定位文本和图像在页面出现的位置。对表格的修改主要是添加内容、修改表格或单元格行/列属性，复制或者粘贴多个单元格等操作。

第六章 框架 1．创建框架

2．框架和框架页的基本操作

3．设置框架和框架页的属性、大小及背景色

2学时

2学时 4．框架及框架页综合实例

要求：掌握框架的创建、保存以及框架属性的设置，难点在于框架的链接设置，掌握框架结构的主要功能在于导航。注意框架和框架集的区别。

第七章 页面布局视图的使用

1．布局单元格和布局表格 2．绘制布局表格和布局单元格 3．布局表格和布局单元格的基本操作

4．设置布局宽度

要求：重点掌握如何创建布局表格和布局单元格，掌握布局视图的切换方法，掌握布局表格和布局单元格属性的设置和意义。

第八章 链接

3学时

3学时

1．链接、路径与锚

2．建立链接 3．建立特殊链接

要求：了解链接、路径与锚的使用条件、掌握链接的几种设置方法和他们的区别，学会使用特殊链接（书签、电子邮箱、网站URL）,理解掌握链接目标的指定。

第九章 表单 1．表单概述 2．创建表单 3．表单对象 4．客户注册表单 5．网上调查表单

要求：掌握如何创建表单，以及如何在表单中添加表单对象，掌握常见的表单对象的功能和使用方法，理解表单处理的原理，能够完成基本的表单设计。

第十章 层

1．关于层

2．创建层

3．显示隐藏层实例

4．下列菜单实例 5．层综合应用实例

要求：让学生掌握层的概念和层的分类，掌握关于层的属性，掌握建立层的基本方法，掌握层的各种属

2学时

2学时 性的设置。

第十一章 行为

1．什么是行为

2．行为面板的用法

3．行为的基本操作

4．使用Dreamweaver自带的行为

5．行为应用实例

要求：重点掌握DreamweaverMX自带的行为的使用方法，掌握这些常用行为事件的设置，了解行为的意义以及行为面板的使用方法，能根据具体的行为设置对应的行为事件，能对所使用的行为事件进行修改。

第十二章 时间轴与动画

1．时间轴面板

2．使用时间轴创建动画

3．修改时间轴

4．创建录制路径动画 5．在时间轴中改变对象属性

6．在时间轴中使用行为

7．时间轴动画实例

要求：掌握如何使用时间轴创建时间线动画，重点掌握如何修改时间线及其对象的属性，添加和删除祯、修改动画的起始时间、修改动画路径的位置等。

第十三章 Dreamweaver MX程序设计

1．Dreamweaver MX程序设计基础 2．建立数据库连接 3．定义记录集

4．动态数据绑定 5．应用服务器行为

要求：掌握基本的术语和如何建立数据库连接，掌握如何建立记录集，以及记录集中数据的绑定，了解各类服务器行为的功能，重点掌握如何定义记录集和应用服务器行为，掌握WEB应用程序的构建。

第十四章 模板与库

1．什么是模板和库

2．创建模板

3．定义可编辑区域

2学时

2学时

2学时

2学时 4．应用模板建立网页 5．应用模板更新站点 6．库的使用

7．模板的创建与设置实例

要求：掌握模版和库的原理和优势，掌握掌握如何建立和使用模版，掌握库的使用和添加到库文件。第十五章 代码片断

1．使用代码片断 2．代码片断的创建

3．代码片断的使用

4．代码片断的创建与使用综合实例

要求：理解代码片断的概念，掌握创建代码片断的方法，掌握如何使用代码片断。第十六章 经典实例

1．个人网站 2．网站论坛

要求：了解页面的整体设计，掌握表格的高级应用技巧，了解交互网站的运行机制，掌握服务器行为的应用，学生通过锻炼，掌握创建网站的全部过程和机制，能够独立网站一个小型的全面的个人网站。

4学时

2学时

三、教学方法

要求：

1、结合DreamweaverMX软件使用的特点，以上机演示教学方法为主，辅之教学课件等方法进行教学。

2、结合本学科特点在教学过程中，使学生形成多动手、积极探究、勤于思考、学会学习等良好的学习习惯，培养学生搜集和整理素材的能力、理解实验能力、分析和解决程序设计中的问题的能力等。

四、成绩考核方法：

要求：

1、课后试验作业每周一次。

2、期末考试采取理论考试为主、大作业（完整的个人网站）为辅的形式。

3、平时成绩30%、期末成绩70%，期末考试（笔试70%，大作业30%）。

五、教材与主要参考书目

教材：

路甬祥：《DreamweaverMX职业技能培训教程》，电子科技大学出版社，2004年3月。参考书： 位元文化：《CSS/HTML网页设计》，中国铁道铁道出版社，2002年2月。

刘洪武：《网页设计与制作（高职教材）》，大连理工大学出版社，2003年7月。李卓玲：《java程序设计语言》，大连理工大学出版社，2003年8月。

执笔人： 审订人：

第四篇：网页设计与制作教学大纲

网页设计与制作教学大纲

(供医学影像学、护理学本科各专业用)

前 言

《网页设计与制作》是一门应用性和理论性都很强的课程，是医学影像和护理学专业的选修课程。通过学习本课程使学生初步了解网页制作及建立网站的基础知识，掌握制作网页和建立网站的技术。

总学时：18学时，实际教学中采用理论教学中穿插上机实践。

第一章 网页设计基础知识

一、目的和要求

(一)了解Internet的功能

(二)理解WWW和网页、网站的相关概念(三)了解常用的网页制作工具(四)理解建设网站的基本方法和思路

二、教学内容

(一)网页基本概念:了解网页、网站、万维网（www）、浏览器、统一资源定位符（URL）、IP地址、域名、超级链接、静态网页和动态网页的基本概念。

(二)网页设计的相关知识

1、设计网页的原则: 了解网页设计的基本原则。

2、网页设计的一般步骤:了解网页设计的一般步骤。

3、Web服务器架构:了解Web服务器的概念、会建立IIS，会进行Web站点的设置与管理。

4、网页制作的常用工具:了解Frontpage、Macromedia Dreamweaver、记事本；了解图像处理工具Photoshop,Firework，了解动画制作工具：Macromedia Flash等。

5、客户端技术：了解HTML、DHTML、XML的概念。

6、服务器端技术：了解ASP、PHP、Java的概念。

第二章 HTML语言

一、目的和要求

(一)熟悉HTML标记语言的基础知识；(二)熟悉HTML语法基础；

(三)掌握文本格式标记、列表标记、表格标记、表单及表单控件标记，熟练利用标记编写页面代码；(四)掌握超链接、图像、音乐及流动字幕的设置方法。

二、教学内容

(一)HTML语言基本概念：了解HTML、超文本、Web页的概念。(二)HTML文档架构:掌握HTML文档基本架构。(三)

HTML常用标记

1、掌握文本格式标记：,,,。

2、掌握段落格式标记：,,

5、掌握多媒体标记：,,。

7、掌握超链接标记：。

8、掌握表格标记：

9、掌握框架标记：。

10、掌握表单及表单域标记：

第三章 Dreamweaver 8网页设计

一、目的和要求

(一)熟悉Dreamweaver 8操作界面；(二)掌握Dreamweaver 8建立与管理站点；

(三)掌握如何使用Dreamweaver 8对文本、图像、表格进行插入与编辑；(四)掌握如何使用Dreamweaver 8创建超链接、表单、样式表；(五)掌握如何在Dreamweaver 8中使用层与框架。

二、教学内容

(一)Dreamweaver 8基础知识:会启动、关闭中文Dreamweaver 8，了解Dreamweaver 8的功能、主窗口，标题栏、菜单栏、工具栏、网页编辑窗口、状态栏、属性面板、浮动控制面板组。

(二)站点的建立：熟练掌握利用Dreamweaver 8建立站点、管理站点。

(三)Dreamweaver 8页面设计: 熟练掌握利用Dreamweaver 8插入文字、插入图像、插入表格、插入超链接、插入媒体元素、插入表单，会使用样式表控制页面格式。

(四)页面布局:熟练掌握利用表格控制页面布局，会使用框架进行特殊的页面布局，了解利用层实现页面布局。

第四章 VBScript脚本语言

一、目的和要求

(一)了解VBScript的基本概念；(二)熟练掌握VBScript语法；

(三)熟练掌握VBScript的sub过程与function函数；(四)会使用VBScript进行简单编程。

二、教学内容

(一)VBScript的基本概念

1、了解在网页中如何嵌入VBScript。、了解VBScript语句书写规则、数据类型、变量、常量、运算符和内置函数的概念。(二)

VBScript的过程与函数

1、熟练掌握VBScript中SUB过程的建立。

2、熟练掌握VBScript中FUNCTION（）函数的使用。

（三）程序设计流程:了解条件语句和循环控制语句

（四）VBScript对象的使用：掌握Window对象、History对象、Form对象的语法格式及使用方法。

并利用案例熟悉对象。

第五章 ASP动态网页制作

一、目的和要求

(一)深刻理解动态网页技术和静态网页技术的区别和联系。(二)掌握ASP运行环境的搭建方法及建立ASP动态网站的一般方法。(三)理解Request和Response对象的作用，熟练掌握其使用方法。(四)

能够综合运用网页设计方法创建动态网站。

二、教学内容

(一)ASP概述：了解ASP的概念，ASP的工作过程，ASP与HTML的区别。(二)

ASP动行环境：IIS的安装，IIS下站点的建立与管理。

(三)ASP的内建对象：掌握Request对象，Request对象可访问的变量Querystring、form、cookies和server variable；掌握Response对象，Response对象提供的方法write,redirect,end的使用。

(四)ASP动态网站的创建：利用ASP技术验证表单中用户填写的信息。

第六章 网站制作实例

一、目的和要求

(一)巩固Dreamweaver 8中网站设计的基本方法；(二)巩固编制HTML和ASP代码的方法；(三)综合运用所学知识设计制作小型网站。

二、教学内容

(一)网站的规划设计：确定网站的主题和名称，确定网站的形象，确定网站的栏目，确定网站的目录结构，确定网站的链接结构，网站的整体风格，首页的设计，站点的创建。(二)

静态网页设计(三)

动态网页设计

教材：李京文主编，网页设计与制作，高等教育出版社，2012。

李京文主编，网页设计与制作实训与考试指导，高等教育出版社，2012。

参考书：曾鸿主编，网页设计与制作高等教育出版社，2009。

第五篇：《网页设计与制作》教学大纲

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

课程编号：14411400 课程总学时：48 周学时数：3 学分：3 课程类型：专业必修课 开课（系）院：教育学院 执笔人：朱 玲 审核人：刘 梅

一、课程简介

《网页设计与制作》是一门综合性、应用性很强的课程，是教育技术学专业的一门专业必修课程。通过学习本课程，能利用Dreamweaver 8来开发出有实用价值的网站来。熟练掌握Dreamweaver 8的基本界面环境和HTML语法，了解当前常用数据库的基础知识，能利用数据库来为网站服务。

本课程以《Dreamweaver 8中文版网页制作基础》作为教材，该教材采用项目教学法。项目教学法”是通过实施一个完整的项目而进行的教学活动，其目的是在课堂教学中把理论与实践教学有机地结合起来，充分发掘学生的创造潜能，提高学生解决实际问题的综合能力。这也充分体现了我校的培养应用型人才的路线。

二、教学目的与要求

1、教学目的

本课程开设的主要目的，是为了适应web技术的飞速发展，为学生今后在学习、工作中建立网站及网页制作打下基础。通过本课程的学习，使学生了解如何规划并建立站点，掌握制作网页的基础知识，能熟练利用Dreamweaver 8提供的强大的功能制作出精美的网站。

2、教学要求

在本课程的学习中，要求学生能够熟练使用Dreamweaver 8操作环境，掌握HTML的语法规则，并能够利用Dreamweaver 8的强大功能制做出精美的网页，同时能独立创建并管理网站。

三、教学内容及学时安排

第一章Dreamweaver 8概论

[教学目的与要求]

1.认识Dreamweaver 8 2.了解Dreamweaver 8的用途及新增功能 3.熟悉Dreamweaver 8的工作界面 4.熟悉Dreamweaver 8的一些简单的设置 [重点与难点]

1.Dreamweaver 8的工作界面 2.自定义工作环境 3.选择视图方式 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是Dreamweaver

二、新增功能

三、Dreamweaver 8的工作界面

（一）选择工作界面

（二）界面组成

四、自定义工作环境

（一）显示/隐藏面板和工具栏

（二）更改“插入”工具栏的外观

（三）自由组合面板

（四）调整文档窗口大小

五、选择视图方式

（一）代码视图

（二）设计视图

（三）代码和设计视图 [实验实践教学环节]

实验项目：熟悉Dreamweaver8操作环境 实验课时：2学时 [课堂训练、作业思考题]

1.如何使一个控制面板成为一个独立的面板？ 2.如何将文档窗口调整为640×480像素大小？

[教学目的与要求]

1.了解网页的设计与布局原则 2.明确网站的策划与创建原则 3.知道网站的开发流程 [重点与难点]

1.网页的设计与布局原则 2.网站的策划与创建原则 3.网站的开发流程

第二章 网页与网站的基本知识

[教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、网页设计和布局原则

（一）网页主题网页主题时应该遵循以下原则：

（二）网页命名和标志

（三）网页的色彩

（四）网页的文字

（五）网页中的表格

（六）网页版面和布局

二、策划与创建原则

(一)什么是网站(二)网站的目标定位(三)网站的风格(四)网站的CI形象(五)网站的栏目和板块(六)网站的目录结构

三、网站的开发流程： [实验实践教学环节]

无

[课堂训练、作业思考题]

1．简述网站开发需要经过的几个主要阶段。2．简述制作网页需要注意的问题。

[教学目的与要求]

1.掌握HTML语言及其基本语法 2.如何制定及清理多余的HTML代码 3.掌握在各种环境中编辑HTML代码的方法 [重点与难点] 1．HTML的基本语法 2．使用代码检查器 3．设置HTML代码参数

第三章 HTML语言控制

4．清理多余的HTML代码 5．编辑HTML代码 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是HTML

二、HTML的基本语法

三、认识“代码检查器”面板

（一）“代码检查器”面板的功能

（二）3.3.2 设置“代码检查器”面板

四、设置HTML代码参数

（一）设置代码颜色

（二）设置代码格式

（三）设置代码改写参数

五、清理HTML代码

六、编辑HTML代码

（一）在代码视图中编辑HTML

（二）在设计视图中编辑HTML

（三）在外部代码编辑器中编辑HTML [实验实践教学环节] 无

[课堂训练、作业思考题]

1．如何清除多余的HTML代码和多余的word代码？

第四章 设置文本和网页属性

[教学目的与要求]

1.了解文档的新建、保存和打开

2.掌握怎样输入文本、查找和替换、检查拼写、设置文本和段落 3.掌握使用水平分隔线和设置网页属性等 [重点与难点] 1.文档的基本操作 2.输入文本 3.查找与替换 4.拼写检查 5.格式化文本 6.使用水平分隔线 7.设置网页属性 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、文档的基本操作

（一）启动Dreamweaver 8主工作界面

（二）新建文档 “新建文档”对话框

（三）保存新文档

（四）打开文档

二、输入文本

(一)文本换行(二)插入特殊字符(三)导入Word文档(四)添加注释

三、查找与替换 “查找和替换”对话框

四、拼写检查 “检查拼写”对话框

五、格式化文本

(一)文本属性栏(二)设置文本格式(三)设置段落格式

六、使用水平分隔线

(一)4.6.1 添加水平分隔线(二)4.6.2 修改属性(三)4.6.3 设置颜色

七、设置网页属性

(一)4.7.1 使用“页面属性”对话框(二)4.7.2 使用网页配色方案 [实验实践教学环节]

实验项目：插入网页对象（第4、5、9、12章）实验课时：3学时 [课堂训练、作业思考题]

1．如何使启动程序不显示起始页？ 2．简述创建一个空白文档的过程。

第五章 使用网页图像

[教学目的与要求]

1.了解网页图像的基本概念

2.掌握如何插入图像、如何编辑图像 3.掌握如何创建图像映射即热点 [重点与难点]

1．网页图像的格式 2．插入图像 3．编辑图像 4．创建图像映射 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、网页图像简述

(一)位图图像(二)矢量图像(三)常见网页图像格式

二、插入图像

(一)插入普通图像

(二)插入鼠标经过时变化的图像(三)插入网页背景图像

三、编辑图像

(一)5.3.1 调整图像大小(二)5.3.2 剪掉图像的多余部分(三)5.3.3 调整图像的亮度和对比度(四)5.3.4 锐化图像(五)5.3.5 图像的排列方式(六)5.3.6 设置图像间距(七)5.3.7 用文字代替图像(八)5.3.8 使用图像编辑器

四、创建图像映射

(一)5.4.1 什么是图像映射图(二)5.4.2 图像映射面板(三)5.4.3 定义和编辑热点(四)5.4.4 为热点建立链接 [实验实践教学环节]

实验项目：插入网页对象（第4、5、9、12章）实验课时：2学时 [课堂训练、作业思考题]

1．如何在网页中用文字代替图像？ 2．如何为热点建立链接？

[教学目的与要求]

1.掌握表格的创建和使用、表格的编辑和修改2.掌握表格的套用样式和嵌套 3.掌握如何使用表格进行页面布局 [重点与难点]

1．创建表格 2．编辑表格

第六章 创建和使用表格

3．套用表格 4．表格的嵌套

5．使用表格进行页面布局 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、创建表格

(一)插入表格并添加内容(二)导入表格数据文件

二、编辑表格

(一)添加/删除行列(二)调整表格大小(三)调整行高和列宽(四)合并/拆分单元格(五)设置单元格的宽度和高度(六)设置表格的边框颜色(七)设置表格的背景

三、套用表格样式

四、表格的嵌套

五、使用表格进行页面布局

(一)布局模式

(二)绘制布局单元格和布局表格(三)将内容添加到布局单元格中(四)使用间隔图像

(五)更改布局表格和布局单元格的属性[实验实践教学环节]

实验项目：网页布局（第6、7、8章）实验课时：2课时 [课堂训练、作业思考题]

1．简述合并和拆分单元格的几种方法。2．怎样在布局表格中使用间隔图像？

第七章 创建和使用框架

[教学目的与要求]

1.理解框架和框架集的概念

2.掌握如何创建、选择框架和框架集

3.掌握如何设置框架和框架集的属性及编辑框架页面 [重点与难点]

1.创建框架与框架集 2.选择框架与框架集的方法 3.设置框架与框架集的属性 4.编辑框架页面 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是框架与框架集

二、创建框架与框架集

(一)使用预定义创建框架集(二)自己设计框架集(三)删除框架(四)创建嵌套框架集

三、选择框架与框架集

(一)在文档窗口中选择(二)在“框架”面板中选择

四、设置框架与框架集属性

（一）设置框架属性

（二）设置框架集属性

五、编辑框架页面

(一)7.5.1 设置框架中文档的背景颜色(二)7.5.2 使用链接控制框架内容(三)7.5.3 替换框架文件

(四)7.5.4 保存框架和框架集文件(五)7.5.5 解决浏览器无法显示框架的问题 [实验实践教学环节]

实验项目：网页布局（第6、7、8章）实验课时：2课时 [课堂训练、作业思考题]

1．如何删除框架和框架集？ 2．怎样替换框架文件？

[教学目的与要求]

1.了解创建层

2.掌握设计层属性、编辑层 3.掌握层和表格的转换 [重点与难点]

1．创建层 2．设置层属性 3．编辑层 4．层和表格的转换 [教学时数] 3学时

[教学方法与手段]

第八章 创建和使用层 讲授法与多媒体教学相结合 [主要内容]

一、创建层

(一)创建平铺式层(二)创建重叠式层(三)创建嵌入式层

二、设置层的属性

(一)设置层参数(二)设置单个层属性(三)同时设置多个层的属性

三、编辑层

(一)使用“层”面板 通过“层”面板可以管理文档中的层。

(二)使用“层”面板可以防止层重叠、更改层的可见性、将层嵌套或层叠，以及选择一个或多个层。(三)在层中添加内容(四)选择和移动层(五)防止层重叠(六)改变层的堆叠次序

(七)显示/隐藏层(八)创建预先载入层(九)调整层的大小

层和表格的转换层

(一)将层转换成表格(二)将表格转换成层 [实验实践教学环节]

实验项目：网页布局（第6、7、8章）实验课时：2课时 [课堂训练、作业思考题]

1．如何创建预先载入层？ 2．简述表格与层的转换方法。

[教学目的与要求]

1.了解表单与表单元素的基本概念

第九章 表 单

四、2.掌握表单的创建及表单元素的插入和设置方法 3.掌握检查表单以验证表单元素正确性 [重点与难点]

1.表单的创建

2.插入与设置文本域和文本区域

3.插入与设置复选框、单选按钮和单选按钮组 4.插入与设置列表框和弹出菜单 5.插入与设置跳转菜单 6.插入与设置文件域 7.插入与设置表单按钮 8.检查表单 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、表单与表单元素(一)表单(二)表单元素

二、表单

(一)创建表单(二)设置表单属性

三、文本域和文本区域

(一)插入文本域(二)设置文本域的属性(三)插入文本区域

四、复选框、单选按钮和单选按钮组

(一)插入单选按钮与复选框(二)设置单选按钮与复选框的属性

五、列表框和弹出菜单

(一)插入列表框与弹出菜单(二)设置列表/菜单属性(三)跳转菜单(四)文件域(五)表单按钮(六)标准表单按钮(七)图片式按钮(八)检查表单 [实验实践教学环节]

实验项目1：插入网页对象（第4、5、9、12章）实验课时：3学时 实验项目2：表单对象 实验课时：2课时 [课堂训练、作业思考题]

1．文本域与文本区域有何区别？ 2．如何插入跳转菜单？

第十章 添加超级链接和导航工具条

[教学目的与要求]

1.掌握在Dreamweaver 8中创建超级链接的基本方法；

2.了解超级链接的种类：包括内部、外部超级链接、为E-mail和下载文件添加超级链接、使用锚点和导航条工具等内容。[重点与难点]

1、内部超级链接的使用方法；

2、外部超级链接的使用方法；

3、为图片添加超级链接；

4、为E-mail创建超级链接；

5、设置下载文件链接；

6、锚点的创建方法；

7、导航条的创建方法； [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是超级链接

(一)超级链接的概念(二)链接路径

二、使用内部超级链接

(一)10.2.1 为文字添加超级链接(二)10.2.2 设置文字超级链接的属性(三)10.2.3 为图片添加超级链接

三、外部超级链接

四、为E-mail和下载文件添加超级链接

（一）为E-mail添加超级链.（二）为下载文件添加超级链接

五、使用锚点

（一）创建锚点

（二）链接锚点

六、使用导航工具条

（一）插入导航条

（二）修改导航条 [实验实践教学环节]

无

[课堂训练、作业思考题]

1．简述超级链接的分类。2．如何创建锚点？

第十一章 层叠样式表

[教学目的与要求]

1.掌握CSS的基本语法与功能、“CSS样式”面板与“相关CSS”面板的使用、应用类样式的方法、插入样式表的方式、CSS样式的属性设置；

2.了解样式表的优先顺序等内容。[重点与难点]

1.CSS样式的创建、编辑与导出 2.应用类样式 3.设置CSS样式属性 4.CSS样式的优先顺序 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、层叠样式表概述

(一)什么是CSS(二)CSS的基本语法

二、CSS样式的创建、编辑与导出

(一)认识“CSS样式”面板(二)认识“相关CSS”面板(三)创建CSS样式

(四)导出样式以创建CSS样式表(五)管理CSS样式(六)链接和导出外部样式表(七)编辑CSS样式(八)编辑外部样式表

三、应用类样式

(一)应用自定义的CSS样式(二)删除自定义的CSS样式

四、设置CSS样式属性(一)“类型”选项(二)“背景”选项(三)“区块”选项(四)“方框”选项(五)“边框”选项(六)“列表”选项(七)“定位”选项(八)“扩展”选项

五、CSS样式的优先顺序

[实验实践教学环节] 无

[课堂训练、作业思考题]

1．简述CSS样式的作用。2．简述创建CSS样式的方法。

[教学目的与要求]

1.掌握插入Flash动画、Shockwave电影第十二章 插入多媒体组件

2.掌握插入Applet程序、ActiveX控件和插件等内容 [重点与难点]

1.添加Flash动画。2.添加Shockwave电影。3.添加Java Applet程序。4.使用ActiveX控件。5.使用插件。

6.添加声音背景和声音文件。7.插入日期和时间。[教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、插入多媒体文件简介

二、添加Flash动画

(一)插入Flash动画(二)设置Flash动画属性(三)参数简介

三、插入Shockwave电影

(一)插入Shockwave电影(二)设置Shockwave电影属性

四、插入Java Applet程序

（一）插入Java Applet程序

（二）设置Java Applet属性

五、设置ActiveX控件

六、设置Netscape Navigator插件

(一)插入插件(二)设置插件属性

七、在网页中添加声音

(一)声音文件格式(二)为网页加入背景音乐(三)嵌入声音文件

八、插入日期和时间

九、使用计数器 [实验实践教学环节]

实验项目：插入网页对象（第4、5、9、12章）实验课时：3学时 [课堂训练、作业思考题]

1．简述可以插入的多媒体组件的种类。2．如何在网页中嵌入声音文件？

第十三章 生成动态特效

[教学目的与要求]

1.了解行为的含义

2.掌握应用Dreamweaver 8中内置的各种行为、为对象附加行为及获取更多的行为 [重点与难点]

1.了解行为

2.了解Dreamweaver 8的内置行为 3.应用行为 [教学时数] 3学时 [教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是行为

二、Dreamweaver 8中的行为(一)认识行为面板(二)内置行为

三、应用行为(一)为对象附加行为(二)获得更多的行为

四、动态特效实例(一)改变对象属性(二)检查浏览器(三)检查插件(四)制作弹出窗口(五)制作动态图片说明(六)设置状态栏信息(七)设置播放声音 [实验实践教学环节]

实验项目：制作动态网页 实验课时：3课时 [课堂训练、作业思考题]

1．简述改变层属性的方法。

2．简述单击某按钮时发出声音特效的制作方法。

第十四章 库与模版

[教学目的与要求]

1.掌握如何创建和设置库项目，为网页添加库项目和编辑库项目 2.掌握如何创建、设置模板的网页属性 3.掌握如何导入导出XML内容 [重点与难点]

1.设置库项目参数 2.编辑库项目 3.利用库项目更新网站 4.使用模板创建网页 5.修改模板属性 6.导入导出XML内容 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、库与模版概述

二、使用库项目(一)创建库项目(二)将库项目添加到网页

三、编辑库项目

（一）认识库项目属性面板

（二）删除与重命名库项目

（三）修改库项目

四、利用库项目更新网站

五、创建模版

（一）将文档另存为模版

（二）创建可编辑区域

（三）创建重复区域

（四）定义可编辑标签属性

六、创建基于模版的文档

七、修改模版属性

八、导入导出XML内容 实验实践教学环节] 无

课堂训练、作业思考题]

1．如何设置可编辑区域及可重复区域？ 2．更改了库项目或模版后，如何更新网站？教学目的与要求]

1.掌握站点的规划和设计知识 2.掌握本地和远程的概念

第十五章 规划和设计站点

[ [

[3.掌握创建本地站点的方法

4.掌握设置本地和远程文件夹，管理站点 [重点与难点]

1．创建本地站点 2．设置本地和远程文件夹 3．管理Web站点 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、关于站点规划和设计

二、关于本地与远程的几个概念(一)本地计算机和Internet服务器(二)本地站点和远程站点

三、创建本地站点

四、设置本地和远程文件夹(一)设置本地文件夹(二)设置远程文件夹

(三)为FTP访问选择主机目录(四)设置远程文件夹时应注意的事项

五、管理Web站点(一)导入与导出站点(二)从站点列表中删除站点(三)获取和上传文件

(四)同步本地和远程站点上的文件(五)遮盖站点中的文件夹和文件(六)使用设计备注 [实验实践教学环节]

无

[课堂训练、作业思考题]

1．简述应用定义站点高级选项卡定义站点的过程。

第十六章 上传站点

[教学目的与要求] 1.了解如何申请个人网站空间 2.知道到哪里去下载免费网站空间

3.了解如何将网站上传到WWW服务器以及如何推广网站等 [重点与难点]

1.申请网站空间 2.上传站点 3.网站的宣传和推广 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、申请网站空间

(一)选择网站空间(二)申请方法

二、上传站点

（一）设置本地服务器地址

（二）传送站点

三、宣传和推广

（一）用E-mail形式来宣传

（二）在BBS或新闻组中宣传(三)在搜索引擎网站中宣传(四)广告与友情链接

(五)在Dreamweaver 8中插入关键词与描述 [实验实践教学环节]

无

[课堂训练、作业思考题]

1．简述申请个人免费网络空间的方法。

三、教学方法与手段

本课程采用讲授法、演示法、实验法、讨论法、探究式等多种教学方法进行教学，教学手段采用了传统教具、多媒体投影以及计算机网络等。

四、教材与教学参考书

[1] 孙印杰，薛书琴，俞露等编著.新世界Dreamweaver 8中文版应用教.电子工业出版社，2008.[2] 希望图书创作室编著.Dreamweaver（中文版)8标准教程.兵器工业出版社，2007.[3] 杨聪，韩小祥，周国辉主编.Dreamweaver 8网页设计案例实训教程.中国人民大学出版社，2009.[4] 葛艳玲主编.网页制作基础教程（Dreamweaver 8.0）（第2版）.电子工业出版社，2009.[5] 导向科技编著.中文版Dreamweaver 8网页设计培训教程.人民邮电出版社，2006.五、实验实践教学

实验教学是网页设计与制作的重要实践环节。通过实验，使学生加深理解、验证、巩固课堂教学内容，对Dreamweaver 8有一较全面的认识。培养学生分析问题和解决问题的能力，为以后深入学习教育技术专业的其它课程打下坚实的基础。

实验教学的主要目的是培养学生的动手能力，要求学生熟练掌握Dreamweaver 8的基本操作，网页的设计制作，网站的建立与管理等技能。

为使学生巩固课堂所学知识，根据教学内容本课程共设5项实验，分别是熟悉Dreamweaver 8的操作环境、插入网页对象、网页布局、表单对象和制作动态网页，最终学生上机实验完成最终作品。

六、课外训练及自学指导

（一）课外训练体系 1．训练目的与要求

网页设计与制作是一门实践性很强的课程，要想熟练的掌握Dreamweaver 8有关操作，网页制作和网站开发与管理的技能，就必须大力加强课外训练。

课外训练的主要目的：充分掌握网页制作的有关技能操作，学会设计单个网页，能够开发一个小型网站。2．训练内容与方法 训练的内容主要是每一章的重点难点知识，训练的方法主要有观摩法和实践法。

（二）自学指导体系 1．自学目的与要求

这门课程要求学生不仅仅是掌握课本上的知识，课本上的知识是远远不够的，这就要求学生必须自学。自学的主要目的是扩展知识面，加深对该课程知识的认识。要求知道与网页制作有关的知识。

2．自学内容与方法

自学的内容主要是网页制作的有关知识，除了Dreamweaver 8软件的有关操作以外，还要学习Flash、Fireworks等软件的有关网页制作知识。

自学的方法主要有资料查阅法、讨论法、网上学习法、实验练习法等。

七、考试考核

本课程的考试形式为技能考核，学生的学业成绩实行结构化成绩，由考试主卷成绩、副卷(实验)成绩和平时成绩构成，其中考试主卷成绩占60％，副卷成绩占20％，平时成绩占20％。