网页课程教案.docx

网页课程教案.docx

《网页课程教案.docx》由会员分享，可在线阅读，更多相关《网页课程教案.docx（12页珍藏版）》请在冰豆网上搜索。

网页课程教案

课题

包装设计

课型

新课讲授

教学目标

使学生对网页设计的知识有一个基本了解。

并了解网页制作的基本流程。

并开始对时下最常用的网页制作工具。

对flash的基本工具的使用方法完全掌握，并能实现各种视觉效果。

学习dw掌握dw的基本工具的使用方法，并对脚本语言有基本了解，并了解dw和ps结合使用，并通过ps切片完成在dw中进行链接。

教学重点

Flash和dreamweaver我们从flash的基础学习

教学难点

Flash和dreamweaver我们从flash的基础学习

教学方法

讲授、课堂讨论、

课堂练习

课时

20课时

教学

技术

多媒体

教学过程控制

教学后记

网站，是多个页面的一个集合。

网站基本的知识。

万维网的基本知识。

现在网页中常包含的各种文件格式和网站架设过程中所需要做的各种准备工作。

资料收集，网站风格定位。

网站结构划分

网页设计制作

网页设计中2大设计软件Flash和dreamweaver我们从flash的基础学起

网页中常用设计软件flash的基本工具的操作。

包括选择工具、变形工具、钢笔工具，文字，线条，矩形工具，铅笔，笔刷工具等。

对时间轴动画有基本的要求。

层

关键帧

空白帧

空白关键帧

动画的一些基本要点。

（关键帧）

Flash路径动画，遮罩动画、对影片剪辑进行操作（以及了解影片剪辑的特性）按钮效果（了解按钮特点）。

脚本的基础知识。

脚本写作基本书写。

（Stop（）,play（）,on语句,gotoplay（）,gotostop（）,）

通过脚本来达到一些动画效果.

了解时间轴控制,影片剪辑控制,浏览网络命令（geturl）

通过脚本实现的在flash网页中的例子，讲解flash网页中通过脚本实现一些效果。

用脚本控制影片剪辑中的元件。

关于脚本书写中路径的书写方法。

动画的一些基本要点。

（关键帧）

Flash路径动画，遮罩动画、对影片剪辑进行操作（以及了解影片剪辑的特性）按钮效果（了解按钮特点）。

脚本的基础知识。

脚本写作基本书写。

（Stop（）,play（）,on语句,gotoplay（）,gotostop（）,）

通过脚本来达到一些动画效果.

了解时间轴控制,影片剪辑控制,浏览网络命令（geturl）

通过脚本实现的在flash网页中的例子，讲解flash网页中通过脚本实现一些效果。

用脚本控制影片剪辑中的元件。

关于脚本书写中路径的书写方法。

通过对网页中的事例的讲解，选择有代表性的例子进行制作。

学习photoshop在网页中的运用，并了解各种格式在网页中的使用方法。

学习dreamweaver中站点建设规范，认识dw的基本工具栏。

学习创建网页，学习如何在网页中如何添加文本，设置文本格式，段落样式样式，设置列表。

学习用photoshop完成排版后，进行切片导出，学习apdiv的创建和apdiv的编辑操作。

在网页中图片的添加。

图像属性的设置。

创建鼠标经过图像

创建导航条，在网页中添加flash媒体，添加音乐元素，添加其他媒体元素。

用超级链接，链接多个页面，创建文本超级链接，图片链接，图片热区链接，锚链接。

链接电子邮件。

链接下载内容。

优化网站，了解网站的优化流程。

课题

网页设计

课型

新课讲授、练习课

教学目标

Flash和dreamweaver2004软件的操作和使用

教学重点

Flash和dreamweaver2004软件的操作和使用

教学难点

Flash和dreamweaver2004软件的操作和使用

教学方法

讲授、课堂练习

课时

20课时

教学

技术

多媒体

教学过程控制

教学后记

Flash和dreamweaver2个软件的操作和使用，网页中版式设计，网页色彩运用，flash脚本书写。

网页中常用的链接方式，网页中常用视觉效果的制作方法。

网页中各种文件格式的转换和使用。

通过先临摹，解决部分技术上的问题，通过同学之间讨论和老师集中讲解，解决网页欢迎动画中所存在的问题，并要求同学先根据制作网页公司的特点，制作主页的页面的版式效果。

然后再制作网页内页的各个版面。

第一步是对站点进行规划

第二步是创建站点的基本结构

第三步即可开始具体的网页创作过程

最后一步是站点的发布

第一节站点的规划与创建

一、规划站点

Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。

本地站点：

是本地硬盘中存放远程网站所有文档的地方（文件夹）。

建立网站的通常做法是：

在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。

待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。

1、规划站点结构

注：

规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）

2、规划站点的浏览机制

一般可采用以下的方法：

创建返回主页的链接

显示网站专题目录

显示当前位置

搜索和索引

反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）

二、创建一个站点

步骤：

1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令）

2、选择一种站点模板或向导

3、单击“确定”按钮

三、站点的基本操作

1、打开站点：

“文件”---“打开站点”

2、删除站点：

方法一：

在Windows资源管理器中删除一个站点

方法二：

在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令

3、站点的设置

“工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡

第二节利用表格进行网页布局

一、插入表格

1、单击常用工具上的“插入表格”按钮

2、单击“表格”---“插入”---“表格”命令

3、使用表格工具栏（“查看”—“工具栏”---“表格”命令）

4、由文本转换（“表格”—“转换”—“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记。

二、   单元格的基本操作

1、选择单元格（“表格”—“选定”—“单元格”）

Ctrl：

可选择不相邻的单元格

Shift：

选择多个相邻的单元格

2、插入单元格（“表格”—“插入”—“单元格”）

3、合并单元格（“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮）

4、拆分单元格（“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮）

三、  填充单元格

1、文本与图像填充（“插入”—“图片”）

2、对齐文本与图像（“表格”—“属性”—“单元格”，“水平对齐方式”、“垂直对齐方式”）

3、修改单元格背景（“表格”—“属性”—“单元格”，“背景”）

4、调整边框颜色（“表格”—“属性”—“单元格”，“边框”）

5、改变单元格尺寸（“表格”—“属性”—“单元格”，“指定宽度”、“指定高度”）

四、修改表格的行与列

1、选择行与列

2、插入行与列（“表格”—“插入”—“行或列”）

3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”）

4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令）

第三节利用框架设计网页布局

一、认识框架网页1、框架的概念框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架）

框架具有以下特性：

每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。

每个框架窗口可以赋予一个名字，以便其他URL作为目标调用。

2、框架的使用场合（如邮箱、论坛）

通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。

框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节

二、创建框架网页1、框架网页的创建

“文件”—“新建”—“网页”，选择“框架网页”选项卡2、框架网页模板（10种）“设置初始网页”

“新建网页”

三、框架网页的保存和打开

框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。

1、框架网页的保存

“文件”—“保存文件”或“框架”—“保存网页”2、框架网页的打开“框架”—“在新窗口中打开网页”

四、框架网页的属性1、框架网页的属性“文件”—“属性”

“框架间距”、“显示边框”

2、框架的属性“框架”—“框架属性”

五、调整框架布局1、调整框架窗口的大小（用鼠标拖动或在“框架属性”对话框中调整）2、框架的拆分

方法一：

“框架”—“拆分框架”（按行或按列拆分）

方法二：

用鼠标拖动拆分（按Ctrl键）

3、框架的删除“框架”—“删除框架”

课题

包装设计

课型

新课讲授

教学目标

dreamweaver2004软件的操作和使用

教学重点

dreamweaver2004软件的操作和使用

教学难点

dreamweaver2004软件的操作和使用

教学方法

讲授、课堂练习

课时

32课时

教学

技术

多媒体

教学过程控制

教学后记

六、目标框架

当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。

选择要设置超链接的文字或图像，“插入”—“超链接”，单击“目标框架”、“更改目标框架”

第四节使用导航栏

一、定义导航结构

在网页内添加导航栏之前，先建立该站点的导航结构

“视图”—“导航”按钮

二、认识导航栏属性

“插入”—“导航栏”按钮

“父层”：

创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。

三、创建导航栏（要在浏览器中才可看到实际导航栏效果）

四、创建共享边框

用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。

右击编辑窗口，单击“共享边框”命令

练习二、利用框架设计一个企业网站的布局

要求有如下内容：

关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。

第五节网页布局功能的应用

一、创建布局表格1、创建布局表格打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。

2.绘制布局表格　如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。

创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。

3、设置表格属性　插入表格后，还需对表格属性进行设置。

在“表格属性”项中设置该表格所需的属性。

　　提示：

在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。

在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。

在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。

每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。

练习三、使用布局功能设计学校网站　　

要求包括有以下内容：

学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等

第六节     网页布局设计

一、文本的美化（“格式”—“字体”）

1、输入文本

2、美化文本（设置文本字体、字号）注：

字符的大小共有6级，其中默认级别是3。

3、设置文本效果4、改变文本颜色5、设置字符间距

二、运用边框与阴影（“格式”—“边框与阴影”）1、设置边框2、设置阴影

三、使用列表（“格式”—“项目符号和编号方式”）

1、添加项目列表。

项目列表也称为无序列表，它将在项目前添加标志符号。

可以将图片作为新的项目标志。

经常使用的项目符号有3种：

实心黑点、空心圆圈和实心方块。

2、添加编号列表

在网页中的内容存在顺序关系时，可应用编号列表。

3、添加定义列表

定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。

（格式工具栏的“样式”—“定义的术语”，输入要词汇、术语，按回车键）

4、设置嵌套列表

要建立组合列表，可以先生成第1级列表，然后再生成第2级列表，依此类推。

建立组合列表的具体操作步骤如下：

（1）先生成第1级列表

（2）将光标移动到拥有第2级列表的第1级列表项目的末尾，然后按回车键。

将出现一个空的列表行。

（3）单击“格式工具栏”中的“增加缩进”图标。

该行变为一个空白行，是没有列表编号或项目符号的。

再单击一次“增加缩进”图标。

（4）此时再按照建立列表的方法构造第2级列表。

（5）输入第2级列表。

输入过程中每次接回车键就自动生成第2级列表项目。

（6）第2级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。

嵌套列表可以转变为可折叠大纲，这样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。

生成可折叠大纲的具体操作步骤如下：

（l）按生成复合列表的方法构造好这个复合列表所有的列表级次。

列

（2）选择“格式”菜单中的“项目符号和编号方式”命令，打开“项目符号和编号方式”对话框，或者在表中单击右键，从弹出的菜单中选择“列表属性”命令。

（3）在打开的对话框中，选中“启用可折叠大纲”复选框。

（4）单击“确定”按钮。

练习四、设计一个介绍阳江风景及特产的网页

要求：

设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。

第七节  网页装饰设计

一、添加图像

在浏览器中，能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。

1、GIF格式图片     GIF格式最多能支持256种颜色（8位颜色）。

可以具有透明、动画等特殊效果。

2、JPEG格式文件     JPEG格式可以处理高达1670万种颜色（24位颜色），所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。

插入本地计算机上的图像（“插入”—“图片”—“来自文件”，“从计算机选择一个文件”）

插入WEB上的图像（“插入”—“图片”—“来自文件”，“从WEB浏览器来选择网页或文件”）

二、处理图像

1、剪裁图像（“图片”工具栏—“剪裁”按钮）

2、设置透明背景（“图片”工具栏—“设置透明色”按钮）

三、添加文本（“图片”工具栏—“文本”按钮）

四、保存图像

注：

默认情况下，当前站点的图像文件保存在Images文件夹中

五、运用特殊效果

1、调整图片的亮度和对比度

2、图片的翻转与旋转

3、图片的冲蚀和黑白处理

4、凹凸效果

六、设置图片对齐方式（“图片属性”—“外观”—“布局”—“对齐方式”）

七使用水平线

水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。

添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。

如果网页使用了主题，则会使用图形来代替水平线以匹配主题。

1、插入水平线

2、设置水平线属性

八、修改网页背景（“格式”—“背景”）

1、调整背景色彩

2、调整背景图案

九、创建交换图像（DW2004）

1、插入交换图像（“插入”—“图像对象”—“鼠标经过图像”）

“原始图像”、“鼠标经过图像”、“按下时，前往的URL”

2、预览交换图像：

F12

第八节   创建超链接

一、与当前站点的链接（“插入”—“超链接”，“搜索”当前站点的文件夹位置）

二、与空白网页的链接（“插入”—“超链接”，“创建一网页并链接到该网页”）

三、与电子信箱的链接（“插入”—“超链接”，“制作发送电子邮件的超链接”）

四、与Web的链接（“插入”—“超链接”，“使用WEB浏览器来选择网页或文件”，ALT+TAB，则网页地址自动添加到URL中）