网页设计与制作教案Word格式文档下载.docx

网页设计与制作教案Word格式文档下载.docx

《网页设计与制作教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计与制作教案Word格式文档下载.docx（44页珍藏版）》请在冰豆网上搜索。

基础知识:

规划站点

重点知识:

创建一个站点

2课时

【教学组织过程】2课时

1.上讲回顾

2.教授新知

【授课内容】

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

本地站点:

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

建立网站的通常做法就是:

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

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

1、规划站点结构

注:

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

2、规划站点的浏览机制

一般可采用以下的方法:

●创建返回主页的链接

●显示网站专题目录

●显示当前位置

●搜索与索引

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

步骤:

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

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

3、单击“确定”按钮

三、站点的基本操作

1、打开站点:

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

2、删除站点:

方法一:

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

方法二:

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

3、站点的设置

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

【课程小结】

【作业】

1.5课后练习书本课后练习作业

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

一、插入表格

二、单元格的基本操作

插入表格

单元格的基本操作

【教学组织过程】2课时2课时

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、框架网页的打开“框架”—“在新窗口中打开网页”

4、框架网页的属性

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

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

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

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

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

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

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

六、目标框架

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

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

第四节使用导航栏

一、定义导航结构

二、认识导航栏属性

三、创建导航栏

定义导航结构

认识导航栏属性

【教学组织过程】2课时2课时

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

“视图”—“导航”按钮

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

“父层”:

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

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

四、创建共享边框

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

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

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

要求有如下内容:

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

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

一、创建布局表格

二、绘制布局表格

创建布局表格

绘制布局表格

一、创建布局表格

1、创建布局表格

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

2、绘制布局表格

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

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

3、设置表格属性

插入表格后,还需对表格属性进行设置。

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

　　提示:

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

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

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

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

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

要求包括有以下内容:

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

第六节网页布局设计

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

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

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

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

1、输入文本

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

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

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

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

1、添加项目列表。

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

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

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

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

2、添加编号列表

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

3、添加定义列表

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

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

4、设置嵌套列表

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

建立组合列表的具体操作步