执笔人:魏传佳 编撰日期:2014-2-10
课程名称:多媒体网页设计
适用专业:软件高职各专业和其它信息类高职高专
课程类别:专业基础课
课程性质:必修课
一、 课程的性质和任务
(一)本课程的教学目的
全面介绍与网页设计制作有关的知识,向学生阐明Web基本工作机制,并使学生具有解决一般网页制作问题的能力。与此同时,通过对网页制作技术和制作工具Dreamweaver MX 2004的学习,使学生对于网页设计中所涉及的相关知识有一个全面的了解。
(二)本课程在教学过程中的地位
在网络技术迅速发展的今天,网页制作已成为当今社会上一种比较热门的技术,也是计算机专业学生的一门必修课,同时又可作为相关专业学生的选修课。而目前比较流行的Dreamweaver MX 2004是可视化网页编辑软件的“头把交椅”。由于网页制作课程不涉及太多的计算机基础知识,本课程可以激发学生学习本专业的兴趣和热情。
(三)本课程与其他有关课程的分工与联系
此课程与计算机文化、界面制作艺术、多媒体技术应用等课程互相联系,互相补充,分别给学生提供计算机基础知识、网页制作技术的技能,图形和动画的设计与制作,美观的页面设计技巧等知识的学习。此课程可以使学生深入理解和应用计算机中所学的基础知识,使学生能够得到全面的培养,成为社会所需专用人才。
二、 教学目的和要求
(一)知识要求:
1.了解Internet的过去、现在和将来;
2.了解WWW、HTTP、HTML、CSS的定义,概念和作用;
3.理解服务器、客户端、浏览器的概念和作用;
4.深入理解表格、框架、表单的作用;
5.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用;
6.深入理解HTML语言的各种功能和应用;
7.理解CSS样式表中属性的作用和意义;
8.理解对象的定义,及含义;
(二)能力要求:
1.会用HTML语言中的标记设置颜色、文本格式和列表;
2.熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法;
3.熟练掌握网页设计中字符格式的设置方法,掌握段落分段与换行的方法;
4.掌握HTML的语法结构,熟练掌握 HTML语言中标记的使用方法;
5.掌握在网页中添加CSS的方法。掌握添加样式信息的方法,会使用CSS设置网页格式和列表的格式,并会使用CSS中的滤镜功能;
6.掌握在网页中嵌入图像的方法,掌握与嵌入图像相关标记的用法;
7.熟练掌握使用绝对和相对URL,创建超链接,图像链接,图像映射的建立方法;
8.熟练掌握表格、框架的使用方法,会用表格设计网页;
9.掌握制作表单的方法,会利用表单建立交互式页面;
10.会利用Dreamweaver调用外部数据库;
11.掌握使用所学知识制作出完整的个人网页。
三、 教学内容
本课程的总体思路:先介绍Dreamweaver软件的基本操作,操作熟悉之后掌握HTML基本语言,能制作和修改静态网页,最后运用动态的技术,与数据库相连接,制作动态效果的例子。
第一章 Dreamweaver MX 2004介绍
1.1 Dreamweaver MX 2004简介
1.2 Dreamweaver MX 2004的功能简介
1.3 Dreamweaver MX 2004安装和卸载
1.4 Dreamweaver MX 2004的编辑环境
介绍文档窗口、主要的面板的功能以及各个基本面板的操作。
1.5 参数设置
1.5.1 通用参数设置
1.5.2 字体参数设置
本章节主要介绍一下Dreamweaver MX 2004软件的使用。
作业:熟悉Dreamweaver MX 2004的软件环境。
第二章 站点管理
2.1 安装和配置服务器
2.2 创建一个本地站点
2.3 设置一个远程站点
2.3.1 连接本地站点与远程站点
2.3.2 指定远程站点的根目录
2.4 使用存回和取出系统
2.4.1 存回和取出远程服务器上的文件
2.4.2 获取与上传文件
2.4.3 同步本地站点与远程站点的文件
2.5 站点的测试
本章主要介绍建立本地站点的一些设置。
作业:自己动手创建一个本地站点。
备注:打算将2.3和2.5节放到网络机房实训,让学生通过Internet直接实现,看到效果。
第三章 文本编辑与基本操作
3.1 网页的组成元素
掌握网页的组成元素,并了解网页的相关术语,如“超级链接”等等。
3.2 网页的设计要素
3.3 网页基本操作
3.3.1 创建网页
3.3.2 打开和关闭网页
3.3.3 保存网页
3.4 输入文本
3.5 插入水平线
插入水平线并修改水平线的颜色。
3.6 插入特殊字符和符号
3.7 基本编辑命令
3.7.1 撤销和重做
3.7.2 查找和替换文本或源文件
本章主要在建立的站点的基础上,创建页面并掌握对网页的一些基本设置。
作业:建立个人站点,并建立首页index.htm,实现页面的保存等基本操作。
第四章 网页中的图像和链接
4.1 在网页中插入图像并控制图像属性
4.2 插入鼠标经过图像和导航条并设置属性
4.3 创建链接
4.3.1 与网站内部的链接
4.3.2 与网站外部的链接
4.3.3 与Internet上的其他服务链接
4.4插入命名锚记
本章主要介绍插入图像以及设置图像属性的方法,并介绍了锚记链接、文字链接、图片链接、电子邮件链接的方法。
作业:掌握插入面板中一些命令的使用,尤其是几种链接的应用。
第五章 表格操作
5.1 创建表格
5.1.1 表格嵌套
5.1.2 在表格中添加内容
5.1.3 选定表格元素
5.2 格式化表格
5.2.1 设置表格属性
5.2.2 设置行、列与单元格属性
5.3 改变表格和单元格的大小
5.4 增加、删除行或列以及拆分、合并单元格
5.5 利用表格构造网页的整体框架
作业:熟悉表格的属性设置,并利用表格构造网页框架。
第六章 布局模式
6.1创建布局表格和布局单元格
6.2在布局单元格中添加内容
6.3 设置布局单元格和布局表格
第七章 框架
7.1 创建框架集
7.1.1 创建框架集
7.1.2 插入预定义的框架集
7.1.3 创建嵌套的框架集
7.2 选定并保存框架和框架集
7.3框架与框架集的属性
7.4使用链接控制框架的内容
重点掌握框架的保存、属性的设置和使用链接控制框架的内容。
第八章 层的运用
8.1 创建层
8.2 层的参数选择和属性设置
8.2.1 层的参数选择
8.2.2 层的属性设置
8.3 层的操作
8.4 改变层的堆栈顺序
8.5 改变层的可见性
8.6 层与表格
8.6.1 层和表格的相互转换
8.6.2 防止层的重叠
第九章 HTML基本样式和CSS层阶样式
9.1 HTML基本样式
9.2 文本格式化
改变文本属性
9.3 段落的格式
9.3.1 创建新段落
9.3.2 对齐段落
9.3.3 缩进段落
9.4 CSS样式表的介绍
创建一个CSS样式表。
9.5 CSS属性设置
设置CSS样式中字体、背景、区块、方框、边框、列表、定位和扩展八大属性。
并补充CSS中滤镜的功能。
作业:1、熟悉HTML和CSS样式的创建;
, 2、设置CSS样式中八大属性;
3、制作16种滤镜的例子。
第十章 行为和时间轴
10.1 行为的概述
10.1.1 行为面板
10.1.2 创建新动作和事件
10.2 使用Dreamweaver自带的动作
掌握创建调用JavaScript、改变属性、检查浏览器和插件、控制Shockwave或Flash、拖动层、转到URL、跳转菜单、打开浏览器窗口、播放声音、弹出信息、预先载入图像、设置导航栏图像、设置文本、显示隐藏层、交换图像、恢复交换图像、转到时间轴帧、播放和停止时间轴、检查表单行为。
10.3 时间轴面板
10.4 创建一个时间轴动画
10.5 通过拖动路径创建时间轴
10.6 管理多条时间轴
10.7 在时间轴中添加行为
作业:1、练习Dreamweaver中自带的几种行为;
2、利用时间轴制作动画;
3、给时间轴添加动画来制作下拉菜单、翻转图片等几个实例。
第十一章 插入多媒体对象
11.1 插入Flash按钮、Flash文本、Flash动画、Shockwave对象、ActiveX控件
11.2 制作滚动字幕和滚动图片
第十二章 模板与库
12.1 生成模板和模板的页面属性设置
12.1.1 生成一个模板
12.1.2 设置模板的页面属性
12.1.3 定义模板的可编辑区、重复区域、可选区域
12.2 管理模板
12.3 库项目
12.3.1 生成库项目
12.3.2 设置库的参数和属性
利用一些模板来设计网页布局。
第十三章 表单操作
13.1 创建表单
13.2 各种表单域的使用
掌握文本字段和文本域、按钮、图像域、复选框、单选按钮、列表/菜单、文件域和隐藏域的属性设置
13.3 表单的处理
作业:创建一个注册信息的表单,并检测表单的提交,将提交的内容发送到电子邮件中。
第十四章 定义数据库数据源
14.1 创建Access数据库
14.1.1 创建数据表
14.1.2 设置数据库的字段
14.2 通过ODBC链接数据库
14.2.1 选择数据源
14.2.2 设置
第十五章 制作留言板
四、 本教程和其它课程的关系
本课程介绍的是应用软件,前大半学期的内容不需要任何的课程基础,直到介绍到定义数据库数据源的时候才用到Access数据库方面的知识,这跟先修课程《Office》中的Access有关联。此课程学完之后,紧接着学习《ASP编程基础》的网页后台技术,因此也要有Dreamweaver软件的前台基础。