《网页设计与制作教（学）案学技术改变生活》由会员分享，可在线阅读，更多相关《网页设计与制作教（学）案学技术改变生活（56页珍藏版）》请在金锄头文库上搜索。
1、 . . . 网页设计和发布流程第一步是对站点进行规划第二步是创建站点的基本结构第三步即可开始具体的网页创作过程最后一步是站点的发布第一节 站点的规划与创建教学目的与要求一、规划站点二、创建一个站点教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性；教学重点与难点：基础知识：规划站点重点知识：创建一个站点2课时教学组织过程2课时1上讲回顾2教授新知授课容一、规划站点Web站点是一组具有共享属性如相关主题、类似的设计或共同目的等的文档。本地站点：是本地硬盘中存放远程所有文档的地方文件夹
2、。建立的通常做法是：在要地硬盘中建立一个文件夹用来存放的所有文件,往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后,再把它们拷贝到上供浏览者浏览。1、规划站点结构注：规划站点的结构之前应先用笔绘出站点的结构图如下图所示是一个典型的学校站点的结构图2、规划站点的浏览机制一般可采用以下的方法：l 创建返回主页的l 显示专题目录l 显示当前位置l 搜索和索引l 反馈将网页创作者或管理员公布在网页上,或创建一个XX超级,以使用户能快速地将信息反馈到中二、创建一个站点步骤：1、单击文件-新建-站点命令或单击常用工具栏中新建网页按钮的下拉箭头,从打开的下拉菜单中选择站点命令2、选择一种站点模板或向
3、导3、单击确定按钮三、站点的基本操作1、打开站点：文件-打开站点2、删除站点：方法一：在Windows资源管理器中删除一个站点方法二：在FrontPage中删除站点,在文件夹视图或网页视图的文件夹列表中,右击站点所对应的目录,在快捷菜单中单击删除命令3、站点的设置工具-站点设置,有常规、参数、高级、语言、导航、数据库六个选项卡课程小结作业15 课后练习书本课后练习作业第二节 利用表格进行网页布局教学目的与要求一、 插入表格二、 单元格的基本操作教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极
4、性和创造性；教学重点与难点：基础知识： 插入表格重点知识：单元格的基本操作教学组织过程2课时 2课时1上讲回顾2教授新知授课容一、 插入表格1、单击常用工具上的插入表格按钮2、单击表格-插入-表格命令3、使用表格工具栏查看工具栏-表格命令4、由文本转换表格转换文本到表格一般以段落为分行标记,以逗号或句号为分列标记。二、 单元格的基本操作1、选择单元格表格选定单元格Ctrl：可选择不相邻的单元格Shift：选择多个相邻的单元格2、插入单元格表格插入单元格3、合并单元格表格合并单元格或表格工具栏上的合并单元格按钮4、拆分单元格表格拆分单元格或表格工具栏上的拆分单元格按钮三、填充单元格1、文本与图像
5、填充插入图片2、对齐文本与图像表格属性单元格,水平对齐方式、垂直对齐方式3、修改单元格背景表格属性单元格,背景4、调整边框颜色表格属性单元格,边框5、改变单元格尺寸表格属性单元格,指定宽度、指定高度四、修改表格的行与列1、选择行与列2、插入行与列表格插入行或列3、均分行与列表格工具栏中的平均分配行高或平均分配列宽4、删除行与列表格工具栏中的删除单元格按钮或表格删除单元格命令课程小结作业15 课后练习书本课后练习作业第三节 利用框架设计网页布局教学目的与要求一、 认识框架网页二、 创建框架网页三、框架网页的保存和打开教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动
6、关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性；教学重点与难点：基础知识：认识框架网页重点知识：创建框架网页教学组织过程2课时 2课时1上讲回顾2教授新知授课容一、认识框架网页 1、框架的概念 框架网页是一种特殊的网页,它将自身分成几个区域,每个区域称作一个框架窗口通常简称为框架框架具有以下特性：每个框架都可以独立地显示一个网页,各个框架窗口之间可以设立超。每个框架窗口可以赋予一个名字,以便其他URL作为目标调用。2、框架的使用场合如、论坛通常用框架来显示在同一个站点中的多个超,这样可以不用浏览器中的后退按钮而方便的进行浏览。框架也适用于类似在线书籍的应用,
7、将目录显示在左边的框架中,单击目录,右边框架中显示相关的章节二、创建框架网页 1、框架网页的创建文件新建网页,选择框架网页选项卡 2、框架网页模板10种 设置初始网页新建网页三、框架网页的保存和打开框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。 1、框架网页的保存文件保存文件或框架保存网页 2、框架网页的打开 框架在新窗口中打开网页四、 框架网页的属性 1、框架网页的属性 文件属性框架间距、显示边框2、框架的属性 框架框架属性五、调整框架布局 1、调整框架窗口的大小用鼠标拖动或在框架属性对话框中调整 2、框架的拆分方法一：框架拆分框架按行或按列拆分方法二：用鼠标拖动拆分按Ctrl
8、键3、框架的删除 框架删除框架六、目标框架当在框架网页的某一个框架中定义超时,需要指定被的网页显示在哪一个框架中,即指定超的目标框架。选择要设置超的文字或图像,插入超,单击目标框架、更改目标框架课程小结作业15 课后练习书本课后练习作业第四节 使用导航栏教学目的与要求一、定义导航结构二、认识导航栏属性三、创建导航栏教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性；教学重点与难点：基础知识：定义导航结构重点知识：认识导航栏属性教学组织过程2课时2课时1上讲回顾2教授新知授课容一、定义
9、导航结构在网页添加导航栏之前,先建立该站点的导航结构视图导航按钮二、认识导航栏属性插入导航栏按钮父层：创建指向当前网页上一级网页的超,并将上一级网页的标题名称显示在导航栏。三、创建导航栏要在浏览器中才可看到实际导航栏效果四、创建共享边框用创建导航栏的方法只能在一个网页中创建导航栏,若需要导航栏出现在站点多个网页的相同位置,则可将导航栏插入网页的共享边框。右击编辑窗口,单击共享边框命令练习二、利用框架设计一个企业的布局要求有如下容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情等。课程小结作业15 课后练习书本课后练习作业第五节 网页布局功能的应用教学目的与要求一、 创建布局表
10、格二、 绘制布局表格教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性；教学重点与难点：基础知识：创建布局表格重点知识：绘制布局表格教学组织过程2课时1上讲回顾2教授新知授课容一、创建布局表格 1、创建布局表格 打开一个空白网页,并切换到设计视图下,单击表格菜单中的布局表格和单元格命令,随后在右侧弹出一个任务窗口,在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。 2.绘制布局表格 如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法
11、创建一个布局表格。创建时首先在新建表格和单元格项中单击绘制布局表格,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。 3、设置表格属性插入表格后,还需对表格属性进行设置。在表格属性项中设置该表格所需的属性。 提示：在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头,如更改行高度时,单击此下拉箭头弹出一个下拉菜单,选择更改行高命令,在弹出的行
12、属性对话框中重新输入该行高度值即可。练习三、使用布局功能设计学校要求包括有以下容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等课程小结作业15 课后练习书本课后练习作业第六节 网页布局设计 教学目的与要求一、文本的美化格式字体二、 运用边框与阴影格式边框与阴影 1、设置边框 2、设置阴影 教学方法与手段多媒体教学：借助多媒体手段,进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性；教学重点与难点：基础知识：文本的美化格式字体重点知识：运用边框与阴影格式边框与阴影 1、设置边框 2、设置阴影 教学组织过程2课时
13、1上讲回顾2教授新知授课容一、文本的美化格式字体1、输入文本2、美化文本设置文本字体、字号 注：字符的大小共有6级,其中默认级别是3。 3、设置文本效果 4、改变文本颜色 5、设置字符间距 二、 运用边框与阴影格式边框与阴影 1、设置边框 2、设置阴影 三、 使用列表格式项目符号和编号方式 1、添加项目列表 。 项目列表也称为无序列表,它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种：实心黑点、空心圆圈和实心方块。 2、添加编号列表在网页中的容存在顺序关系时,可应用编号列表。3、添加定义列表定义列表就是在网页定义词汇、术语的列表,具体的定义容将以首行缩进的方式出现在列
