网页制作与网络媒体策划教案.docx

网页制作与网络媒体策划教案.docx

《网页制作与网络媒体策划教案.docx》由会员分享，可在线阅读，更多相关《网页制作与网络媒体策划教案.docx（25页珍藏版）》请在冰豆网上搜索。

网页制作与网络媒体策划教案

网页制作与网络媒体策划课程

教案

课程编号：

012704

总学时：

34周学时：

2

适用年级专业（学科类）：

08广电

开课时间：

2010-2011学年第一学期

使用教材：

巧学巧用DW8、FW8、FL8制作网页

（前沿电脑图像工作室，人民邮电出版社，2007）

授课教师姓名：

熊瑜

课题一Dreamweaver

（一）站点与网页的创建

1、教学目的:

1．了解网站的构成,及如何保存别人的网页,及网页中的元素

2．熟悉Dreamweaver界面

3．掌握站点的创建和网页的创建

2、教学重难点：

站点的创建和网页的创建

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

网站的构成，网页的构成，网页制作工具，网页三剑客各个软件在制作网站中的作用。

6.2教学内容

（一）网站的构成,如何保存别人的网页及网页中的元素

（二）熟悉Dreamweaver界面

（三）站点的创建

（四）网页的创建

6.3小结：

本次课主要介绍了：

网站的构成；如何保存别人的网页及网页中的元素；创建网站和网页，输入文本和插入图片。

6.4作业：

制作一个简单的网页

7、后记：

8、讲义：

1.网页三剑客各个软件在制作网站中的作用

2.静态网站的制作流程

站点策划

准备所需的素材

确定整站风格和首页

建立站点——Dreamweaver

制作整站——Dreamweaver

整站测试及改进

上传发布

3.网站的构成,及如何保存别人的网页,及网页中的元素（flash的保存）

网页的构成

文字

图片（jpg、gif、png）

动画（Flash[swf]、）

声音（midi、wav、mp3）

视频（mpg、rm、wmv）

链接

保存网页、或元素

文字保存

保存网页文件－－另存为

保存图片右键－－图片另存为

保存gif动画图片右键－－图片另存为

保存Flash动画

IE临时文件夹

FLASH下载工具

4.熟悉一下DREAMWEAVER界面

F4隐藏所有面板

5.创建一个站点,及建立站点文件夹和文件

站点内文件及文件夹的命名注意事项及重命名

首页的命名规则（index.htm）

标题，页面设置

设置背景色

四边归零

6.内容输入

.字体的导入

.硬回车（Enter）和软回车（Shift+Enter）的区别，空格的输入

.图片的插入

课题二Dreamweaver

（二）表格的使用

1、教学目的:

1．掌握应用表格进行网页定位。

2．掌握在表格中插入图片。

3．制作运用到表格及图片的网页

2、教学重难点：

站点的创建和网页的创建

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

上次课程我们介绍了简单网页的制作，这次课程我们将详细介绍应用表格来进行网页的定位。

6.2教学内容

（一）表格的使用

（二）表格中对象的设置

6.3小结：

本次课主要介绍了应用表格来定位网页，以及单元格内容的相应设置。

6.4作业：

制作运用到表格及图片的网页

7、后记：

8、讲义：

一、表格的插入，及相关属性设置

表格的作用，定位，排版

表格的插入，及相关属性设置

百分比和象素的区别

规格：

最外层表格象素的大小（1024x768小于10000，800x600小于780）

填充，间距，边框

其它属性设置

添加删除行，列

二、单元格属性设置

合并：

将选中的连续单元格合并成为一个单元格。

分割：

将一个单元格分割成若干单元格。

水平对齐方式：

分为（左）（中）（右）三种。

垂直对齐方式：

分为（顶）（居中）（居底）（基线对齐）

三、细表格边框的制作

利用表格背景色和所有单元格背景色之间的不同来制作。

1、插入表格，设置表格间距为”1”。

2、选中表格，在属性面板中设置表格的背景颜色。

3、光标定位到第一个单元格里，按住Shift键单击最后一个单元格全选所有单元格，然后在属性面板中设置所有单元格的颜色。

4、保存，预览。

课题三Dreamweaver（三）超链接的使用

1、教学目的:

1．掌握基本超链接

2．掌握图片热区超链接

3．掌握锚点超链接

4．了解其他类型超链接

2、教学重难点：

图片热区超链接

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

上次课我们介绍了应用表格来制作网页，这次课我们将介绍超链接的设置。

6.2教学内容

（一）基本超链接

（二）图片链接

（三）描点链接

（四）其他类型超链接

6.3小结：

本次课主要介绍了各种类型的链接的设置方法。

6.4作业：

制作一个站点（最少二至三个页面,加上链接）

7、后记：

8、讲义：

一、页面之间的超级连接

在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

1、在网页中选中要做超级链接的文字或者图片。

2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了..做好超级链接属性面板出现链接文件显示.。

3、按F12预览网页，在浏览器里光标移到超级链接的地方就会变成手型。

二、制作图片上的超级链接

我们这里所说的图片上的级链接是指在一张图片上实现多个局部区域指向不同的网页链接。

比如一张中国地图的图片，单击了不同省跳转到不同网页，点的区域就是热区。

..

1、首先插入图片，单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。

2、属性面板改换为热点面板如图：

链接输入框：

填入相应的链接替代框：

填入提示文字说明。

.

3、保存页面，按F12预览，用鼠标在设置的热区检验效果。

三、邮件地址的超级连接

在网页制作中,,还经常看到这样的一些超级链接，单击了以后，会弹出邮件发送程序，,联系人的地址也已经填写好了，这也是一种超级链接。

制作方法是：

在编辑状态下，先选定要链接的图片或文字（比如：

欢迎您来信赐教！

），点插入菜单选“电子邮件链接”弹出对话框，填入E-Mail地址即可。

四、超级链接属性面板中的目标选项

“目标”我们称它们为目标区，也就是超级链接指向的页面出现在什么目标区域，默认的情况下域中总有四个选项。

1、blank：

单击链接以后，指向页面出现在新窗口中。

2、parent：

用指向页面替换他们外面所在的框架结构。

3、self：

将连接页面显示在当前框架中。

4、top：

跳出所有框架,,页面直接出现在浏览器中。

课题四Dreamweaver（四）表格嵌套

1、教学目的:

1．掌握表格中图片的两种插入方法

2．掌握表格的嵌套使用

2、教学重难点：

表格的嵌套使用

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

之前我们介绍了应用表格来制作网页，这次课我们将介绍表格的嵌套使用。

6.2教学内容

（一）表格中图片的两种插入方法

（二）表格的嵌套

6.3小结：

本次课主要介绍了表格的嵌套使用。

6.4作业：

制作一个站点（运用表格嵌套）

7、后记：

8、讲义：

一、表格中图片的两种插入方法

1．正常方式插入

如图片大于容纳图片单元格则把单元格撑开，该单元格的属性值不变。

如果小于，则原样显示。

2．背景方式插入

如图片大于容纳图片的对象（单元格）则该图片不能完整显示出来，只显示该对象大小的图片。

如图片小于容纳图片的对象（单元格/表格）则以该图片填充该对象。

3．何时用以背景方式插入

当要在图片上能输入文字时，以背景方式插入（如想使该图片完整显示，一定要把容纳该图片的对象的长宽设置和图片的长宽一样）。

当要把图片用来填充单元格或是表格时，采用背景方式插入。

二、表格的嵌套

1．为什么要使用表格嵌套

因为当一行里的单元格操作高度时会影响到同一行的另一些单元格的高度，为了不互相影响，故采用表格嵌套。

2．什么时候用到表格的嵌套

当发现页面被分成N栏，一般就必须用到嵌套表格。

分成N栏，就插入一个一行N列的表格。

然后设置这个表格里面单元格的垂直对齐方式为：

”顶端对齐”，及设置每个单元格的宽度,确定好布局。

然后在每一列中插入表格，表格的单位一般是“百分比”，把每一列中的内容当成一个独立页面来做即可。

3．标签选择器

Table表格

TR行

TD单元格

注意嵌套的层次关系

课题五Dreamweaver（五）表单的使用

1、教学目的:

1．掌握表单的创建及使用

2．运用表单制作一个简单的留言本前台页面（或类似页面）

2、教学重难点：

表单的创建及使用

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

这次课我们将介绍表单的使用。

6.2教学内容

（一）什么是表单

（二）表单对象

（三）运用表单制作一个简单的留言本前台页面（或类似页面）

6.3小结：

本次课主要介绍了表单的使用。

6.4作业：

运用表单制作一个简单的留言本前台页面（或类似页面）

7、后记：

8、讲义：

一、关于表单

使用表单，可以帮助Internet服务器从用户那里收集信息，例如收集用户资料、获取用户订单，在Internet上统也同样存在大量的表单，让用户输入文字进行选择。

1、通常表单的工作过程如下：

（1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。

（2）这些信息通过Internet传送到服务器上。

（3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。

（4）当数据完整无误后，服务器反馈一个输入完成信息。

2、一个完整的表单包含两个部分：

（1）一个是在网页中进行描述的表单对象。

（2）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。

二、认识表单对象

在Dreamweaver中，表单输入类型称为表单对象。

可以通过选择“插入”>“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。

1、表单

“表单”在文档中插入表单。

任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。

2、文本域

“文本域”在表单中插入文本域。

文本域可接受任何类型的字母数字项。

输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。

3、复选框

“复选框”在表单中插入复选框。

复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。

4、单选按钮

“单选按钮”在表单中插入单选按钮。

单选按钮代表互相排斥的选择。

选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。

例如，用户可以选择“是”或“否”。

5、单选按钮组

“单选按钮组”插入共享同一名称的单选按钮的集合。

6、列表/菜单

“列表/菜单”使您可以在列表中创建用户选项。

“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。

“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。

7、跳转菜单

“跳转菜单”插入可导航的列表或弹出式菜单。

跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。

请参见创建跳转菜单。

8、图像域

“图像域”使您可以在表单中插入图像。

可以使用图像域替换“提交”按钮，以生成图形化按钮。

9、文件域

“文件域”在文档中插入空白文本域和“浏览”按钮。

文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。

10、按钮

“按钮”在表单中插入文本按钮。

按钮在单击时执行任务，如提交或重置表单。

可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。

11、标签

“标签”在文档中给表单加上标签，以形式开头和结尾。

12、字段集

“字段集”在文本中设置文本标签。

课题六Dreamweaver（六）样式的应用

1、教学目的:

1．掌握样式的创建及使用

2．运用样式制作一个包含文字图片的简单网页

2、教学重难点：

样式的创建及使用

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

这次课我们将介绍样式的应用。

6.2教学内容

（一）什么是样式

（二）样式的创建及使用

（三）运用样式制作一个包含文字图片的简单网页

6.3小结：

本次课主要介绍了样式的应用。

6.4作业：

运用样式制作一个包含文字图片的简单网页

7、后记：

8、讲义：

Css，层叠样式表的缩写。

是格式的集合。

它能够对网页的字体、背景、颜色和特殊效果以更精确的控制，便于你更轻松的设计页面的布局。

它具有对浏览器良好的兼容性，能够替代一些之前只有图像才能实现的效果。

修改css代码，可以快速更新同一网页的不同区域，甚至应用该css的众多网页外观和格式。

在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个CSS样式的时候，不需要对每一个项都进行设置，需要什么效果，选择相应的项进行设置就可以了。

1、文本样式的设置。

新建CSS样式,“选择器类型”为类，名称为“style1”定义在“仅对该文档”。

保存至站点根目录下的CSS文件夹内，弹出“CSS规则定义”对话框，默认显示的就是对文本进行设置的“类型”项。

字体：

可以在下拉菜单种选择相应的字体。

大小：

大小就是字号，可以直接填入数字，然后选择单位。

样式：

设置文字的外观，包括正常、斜体、偏斜体。

行高：

这项设置在网页制作种很常用。

设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。

需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。

例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。

变量：

在英文种，大写字母的字号一般比较大，采用“变量”中的“小型大写字母”设置，可以缩小大写字母。

颜色：

设置文字的色彩。

2、背景样式的设置。

在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。

使用CSS之后，有了更加灵活的设置。

在CSS规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS样式的背景格式。

背景颜色：

选择固定色作为背景。

背景图像：

直接填写背景图像的路径，或单击“浏览”按钮找到背景图像的位置。

重复：

在使用图像作为背景的时，可以使用此项设置背景图像的重复方式，包括“不重复”、“重复”、“横向重复”、和“纵向重复“。

附件：

选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。

水平位置：

设置水平方向的位置，可以“左对齐“右对齐”、“居中”。

还可以设置数值与单位结合表示位置的方式，比较常用的是像素单位。

垂直位置：

可以选择“顶部”、“底部”、“居中”。

还可以设置数值和单位结合表示位置的方式。

3、区块样式设置

在CSS规则定义”对话框左侧选择“区块”项，可以在右边区域设置CSS样式的区块格式。

单词间距“英文单词之间的距离，一般选择默认设置。

字母间距：

设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。

垂直对齐：

设置对象的垂直对齐方式。

文本对齐：

设置文本的水平对齐方式。

文字缩进：

这是最重要的项目。

中文文字的首行缩进就是由它来实现的。

首先填入具体的数值，然后选择单位。

文字的缩进和字号要保持统一。

如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。

空格：

对源代码文字空格的控制。

选择“正常”，忽略源代码文字之间的所有空格。

选择“保留”，将保留源代码中所有的空格形式，包括由空格键、Tab键、Enter键创建的空格。

显示：

制定是否以及如何显示元素。

选择“无”则关闭它被制定给的元素的显示。

在实际控制中很少使用。

4、方框样式的设置。

在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。

方框设置进一步完善、丰富了这些设置。

在CSS规则定义”对话框左侧选择“方框”项，可以在右边区域设置CSS样式的方框格式。

宽：

通过数值和单位设置对象的宽度。

高：

通过设置和单位设置对象的高度。

浮动：

实际就是文字等对象的环绕效果。

选择“右对齐”、对象居右。

文字等内容从另外一侧环绕对象。

选择“左对齐”。

对象居左，文字等内容从另一侧环绕。

“无”取消环绕效果。

清除：

规定对象的一侧不许有层。

可以通过选择“左对齐”、“右对齐”，选择不允许出现层的一侧。

如果在清除层的一侧有层，对象将自动移到层的下面。

“两者”是指左右都不允许出现层。

“无”是不限制层的出现。

“填充”和“边界”：

如果对象设置了边框，“填充”是指边框和其中内容之间的空白区域；“边界”是指边框外侧的空白区域。

5、边框样式设置。

边框样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。

在CSS规则定义”对话框左侧选择“边框”项，可以在右边区域设置CSS样式的边框格式。

样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其它方向的样式与“上”相同。

宽度：

设置4个方向边框的宽度。

可以选择相对值：

细、中、粗。

也可以设置边框的宽度值和单位。

颜色：

设置边框对应的颜色，如果选中“全部相同”复选框，则其他方向的设置都与“上”相同。

6、列表样式设置。

CSS中有关列表的设置丰富了列表的外观。

在CSS规则定义”对话框左侧选择“列表”项，可以在右边区域设置CSS样式的列表格式。

类型：

设置引导列表项目的符号类型。

可以选择圆点、圆圈、方块、数字、小写罗马数字、大写罗马数字、小写字母、大写字母、无列表符号等。

项目符号图像：

可以选择图像作为项目的引导符号，单击右侧的“浏览”按钮，找到图像文件即可。

选择ul标签可以对整个列表应用设置，选中li标签可对单独的项目应用。

位置：

决定列表项目缩进的程度。

选择“外”，列表贴近左侧边框，选择“内”，列表缩进。

这项设置效果不明显。

7、定位样式设置。

“定位”项实际上是对层的设置，但是因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。

8、扩展样式的设置。

CSS样式还可以实现一些扩展功能，这些功能集中在扩展面板上。

这个面板主要包括3种效果：

分页、光标和过滤器。

在CSS规则定义”对话框左侧选择“扩展”项，可以在右边区域设置CSS样式的扩展格式。

分页：

通过样式来为网页添加分页符号。

允许用户指定在某元素前或后进行分页。

分页的概念是打印网页种的内容时在某指定的位置停止，然后将接下来的内容继续打印在下一页纸上。

光标：

通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上的时，形状会发生改变。

具体的形状包括：

Hand（手）、crosshair（交叉十字）、text（文本选择符号）、wait（Windows的沙漏形状）、default（默认的鼠标形状）、help（带问号的鼠标）、e-resize（向东的箭头）、ne-resize（指向东北方的箭头）、n-resize（向北的箭头）、nw-resize（指向西北的箭头）、w-resize（向西的箭头）、sw-resize（向西南的箭头）、s-resize（向南的箭头）、se-resize（向东南的箭头）、auto（正常鼠标）。

）过滤器：

使用CSS语言实现过滤器（滤镜）效果。

单击“过滤器”下拉列表框旁的按钮，可以看见有多种滤镜效果可供选择。

课题七Dreamweaver（七）框架的应用

1、教学目的:

1．掌握框架的创建与应用

2．运用框架技巧制作一个简单网页

2、教学重难点：

框架的创建与应用

3、教学方法：

讲授、演示

4、教学工具：

计算机，Dreamweaver8

5、教学学时：

2

6、教学过程：

6.1引入

这次课我们将介绍框架的应用。

6.2教学内容

（一）什么是框架

（二）框架的创建与应用

（三）运用框架技巧制作一个简单网页

6.3小结：

本次课主要介绍了框架的应用。

6.4作业：

运用框架技巧制作一个简单网页

7、后记：

8、讲义：

一．什么是框架

框架是在浏览器窗口中显示多个文件的网页技术。

框架结构指用框架将浏览器窗口分割

成若干区域，各区域分别指定一个网页文件。

框架常见用途就是导航。

一组框架通常包括一个含有导航条的框架和另一个要显示主要

内容页面的框架，利用超链接的“目标框架”属性可以构造处多种导航方式。

二．框架的基本操作

1.创建框架结构

使用“插入栏”中的框架按钮

单击“插入栏”的“框架”>单击相应的框架结构按钮；若要嵌套框架，先定位光标到框

架中，然后单击“框架”选项卡中所需的框架结构。

2.选取框架集与框架

框架结构：

定义处整个窗口如何划分的框架集；用于放置网页的每个具体框架。

选取框架集：

选择“窗口”菜单>“其他”选项中的“框架”>“框架”面板>单击外围的边框，即可选取整个框架集，边框上出现虚线；另当鼠标移动到任意边框上出现双向箭头时，单击此边框，即可选中。

选取框架：

“框架”面板>单击框架的内部（不要单击框架的边框）

3.设置框架集的属性

4.设置框架的属性

“框架名称”：

为框架命名

“源文件”：

指定框架中显示的网页文件路径

“滚动”：

指定框架是否滚动，通常采用“默认”

“不能调整大小”：

不能任意调整框架尺寸，默认可调整大小

5.保存框架

（1）选择“文件”菜单>“保存全部”>“保存为”对话框，文档窗口最外层的边框显示为有阴影。

（2）选择保存位置>输入文件名>单击“保存”按钮>弹出另外的“保存为”对话框。

（3）继续按照2的步骤保存下去，一直保存完所有的框架。

6.设置超链接目标框架

超链接目标框架：

指当单击超链接时，超链接的目标网页文件在哪个框架中显示。

步骤：

按住【Alt】键单击某框架内部>选择文本或其他对象>“属性检查器”的“链接”文本框输入文件地址或单击“浏览文件”按钮选择要链接的文件>“属性检查器”中的“目标”列表>选择目标框架名。

“_blank”：

打开一个新窗口显示超链接的目标文件

“_parent”：

打开一个新窗口显示超链接的目标文件

“_self”：

在框架自身内打开目标网页

“_top”：

删除所有框架，回到最顶层打开链接目标文件。

若想从框架结构中跳出应使用此选项。

三．运用框架技巧制作一个简单网页

课题八Fireworks

（一）基础操作

1、教学目的:

1．掌握Fireworks画布、工具栏、层等的基础操作

2．掌握图章工具

3.应用所学完成简单的头像换取

2、教学重难点：

简单的头像换取

3、教学方法：

讲授、演示

4、教学工具：

计算机，Fireworks8

5、教学学时：

2

6、教学过程：

6.1引入

这次课我们将介绍Fireworks8的基础操作。

6.2教学内容

（一）Fireworks界面介绍

（二）Fireworks画布、工具栏、层等的基础操作

（三）简单的头像