网页设计与制作教案 4

1、网页设计和发布流程 第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布 第一节 站点的规划与创建 【教学目的与要求】 一、规划站点 二、创建一个站点 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2 课时 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、规划站点 Web 站点是一组具有共享属性（如相关主题、类似的设计或共同目的

2、等）的链接文档。 本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹） 。 建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。 、规划站点结构 1注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图） 2、规划站点的浏览机制 一般可采用以下的方法： ? 创建返回主页的链接 ? 显示网站专题目录 ? 显示当前位置 ? 搜索和索引 ? 反馈（将网页创作者或网站管理员公布在网页上，或创建一个 E-MAIL 超级链接，以使用户能快速地将信息反馈到网站

3、中） 二、创建一个站点 步骤： 1、单击“文件”-“新建”-“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令） 2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作 1、打开站点：“文件”-“打开站点” 2、删除站点： 方法一：在 Windows 资源管理器中删除一个站点 方法二：在 FrontPage 中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令 3、站点的设置 “工具”-“站点设置” ，有“常规” 、 “参数” 、 “高级” 、 “语言” 、 “导航” 、“数据

4、库”六个选项卡 【课程小结】 【作业】 书本课后练习作业 课后练习 5 1第二节 利用表格进行网页布局 【教学目的与要求】 一、 插入表格 二、 单元格的基本操作 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识： 插入表格 重点知识：单元格的基本操作 【教学组织过程】2 课时 2 课时 1上讲回顾 2教授新知 【授课内容】 一、 插入表格 1、单击常用工具上的“插入表格”按钮 2、单击“表格”-“插入”-“表格”命令 3、使用表格工具栏

5、（“查看”“工具栏”-“表格”命令） 4、由文本转换（“表格”“转换”“文本到表格” ）一般以段落为分行标记，以逗号或句号为分列标记。 二、 单元格的基本操作 1、选择单元格（“表格”“选定”“单元格” ） Ctrl：可选择不相邻的单元格 Shift：选择多个相邻的单元格 2、插入单元格（“表格”“插入”“单元格” ） 3、合并单元格（“表格”“合并单元格”或“表格工具栏”上的“合并单元格”按钮） “表格”“拆分单元格”或“表格工具栏”上的“拆分单、拆分单元格（4元格”按钮） 三、填充单元格 1、文本与图像填充（“插入”“图片” ） 2、对齐文本与图像（“表格”“属性”“单元格” ， “水平对

6、齐方式” 、 “垂直对齐方式” ） 3、修改单元格背景（“表格”“属性”“单元格” ， “背景” ） 4、调整边框颜色（“表格”“属性”“单元格” ， “边框” ） 5、改变单元格尺寸（“表格”“属性”“单元格” ， “指定宽度” 、 “指定高度” ） 四、修改表格的行与列 1、选择行与列 2、插入行与列（“表格”“插入”“行或列” ） 3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽” ） 4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”“删除单元格”命令） 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第三节 利用框架设计网页布局利用框架设计网页

7、布局 【教学目的与要求教学目的与要求】 一、 认识框架网页 二、二、 创建框架网页 三、框架网页的保存和打开 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：认识框架网页重点知识：创建框架网页 【教学组织过程】2 课时 2 课时 1上讲回顾 2教授新知 【授课内容授课内容】 一、认识框架网页 1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架） 框架具有以下特性： 每个

8、框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。 每个框架窗口可以赋予一个名字，以便其他 URL 作为目标调用。 2、框架的使用场合（如邮箱、论坛） 通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。 框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节 二、创建框架网页 1、框架网页的创建 “文件”“新建”“网页” ，选择“框架网页”选项卡 2、框架网页模板（10 种） “设置初始网页” “新建网页” 三、框架网页的保存和打开 框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。 1、

9、框架网页的保存 “文件”“保存文件”或“框架”“保存网页” 2、框架网页的打开 “框架”“在新窗口中打开网页” 四、 框架网页的属性 1、框架网页的属性 “文件”“属性” “框架间距” 、 “显示边框” 2、框架的属性 “框架”“框架属性” 、调整框架窗口的大小（用鼠标拖动或在“框架属性” 1 五、调整框架布局对话框中调整） 2、框架的拆分 方法一：“框架”“拆分框架” （按行或按列拆分） 方法二：用鼠标拖动拆分（按 Ctrl 键） 3、框架的删除 “框架”“删除框架” 六、目标框架 当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。 选择

10、要设置超链接的文字或图像， “插入”“超链接” ，单击“目标框架” 、“更改目标框架” 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第四节第四节 使用导航栏使用导航栏 【教学目的与要求】 一、定义导航结构 二、认识导航栏属性 三、创建导航栏 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：定义导航结构 重点知识：认识导航栏属性 【教学组织过程】2 课时 2 课时 1上讲回顾 2教授新知 【授课内容授课内容】

11、一、定义导航结构在网页内添加导航栏之前，先建立该站点的导航结构 “视图”“导航”按钮 二、认识导航栏属性 “插入”“导航栏”按钮 “父层”：创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。 三、创建导航栏（要在浏览器中才可看到实际导航栏效果） 四、创建共享边框 用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。 右击编辑窗口，单击“共享边框”命令 练习二、利用框架设计一个企业网站的布局 要求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。 【课程小结】 【作

12、业】 15 课后练习 书本课后练习作业 第五节第五节 网页布局功能的应用网页布局功能的应用 【教学目的与要求】 一、 创建布局表格 二、二、 绘制布局表格 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：创建布局表格 重点知识：绘制布局表格 课时 2【教学组织过程】 1上讲回顾 2教授新知 【授课内容授课内容】 一、创建布局表格 1、创建布局表格 打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单

13、元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。 2.绘制布局表格 如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格” ，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。 3、设置表格属性 插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。 提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为 0。 在设计框架时经常需要调整某一行或

14、列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。 练习三、使用布局功能设计学校网站 要求包括有以下内容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等 【课程小结】 【作业】 书本课后练习作业 课后练习 5 1第六节 网页布局设计 【教学目的与要求】 一、文本的美化（“格式”“字体” ） 二、 运用边框与阴影（“格式”“边框与阴影” ） 1、设置边框 2、

15、设置阴影 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：文本的美化（“格式”“字体” ） 重点知识：运用边框与阴影（“格式”“边框与阴影” ） 1、设置边框 2、设置阴影 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、文本的美化（“格式”“字体” ） 1、输入文本 2、美化文本（设置文本字体、字号） 注：字符的大小共有 6 级，其中默认级别是 3。 3、设置文本效果 4、改变文本颜色 5、设置字符间距 二、 运用

16、边框与阴影（“格式”“边框与阴影” ） 1、设置边框 2、设置阴影 三、 使用列表（“格式”“项目符号和编号方式” ） 1、添加项目列表 。 项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有 3 种：实心黑点、空心圆圈和实心方块。 2、添加编号列表 在网页中的内容存在顺序关系时，可应用编号列表。 3、添加定义列表 定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。 （格式工具栏的“样式”“定义的术语” ，输入要词汇、术语，按回车键） 4、设置嵌套列表 要建立组合列表，可以先生成第 1 级列表，然后再生

17、成第 2 级列表，依此类推。 建立组合列表的具体操作步骤如下： （1）先生成第 1 级列表 （2）将光标移动到拥有第 2 级列表的第 1 级列表项目的末尾，然后按回车键。将出现一个空的列表行。 （3）单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“增加缩进”图标。 （4）此时再按照建立列表的方法构造第 2 级列表。 （5）输入第 2 级列表。输入过程中每次接回车键就自动生成第 2 级列表项目。 （6）第 2 级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第 2 级列表的设置操作。 嵌套列表可以转变为可折叠大纲，这

18、样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下： （l）按生成复合列表的方法构造好这个复合列表所有的列表级次。 （2）选择“格式”菜单中的“项目符号和编号方式”命令，打开“项目符号和编号方式”对话框，或者在列表中单击右键，从弹出的菜单中选择“列表属性”命令。 （3）在打开的对话框中，选中“启用可折叠大纲”复选框。 （4）单击“确定”按钮。 练习四、设计一个介绍阳江风景及特产的网页 要求：设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。 【课程小结】 【作业】 15 课后练习 书本课后练习作业

19、第七节第七节 网页装饰设计网页装饰设计 【教学目的与要求】 一、添加图像 二、处理图像 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：添加图像 重点知识：二、处理图像 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、添加图像 在浏览器中，能处理的图片格式只有 GIF、JPEG 格式和 PNG 格式等少数几种图片。 1、GIF 格式图片 GIF 格式最多能支持 256 种颜色（8 位颜色） 。可以具有透

20、明、动画等特殊效果。 2、JPEG 格式文件 JPEG 格式可以处理高达 1670 万种颜色（24 位颜色） ，所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。 插入本地计算机上的图像（“插入”“图片”“来自文件” ， “从计算机选择一个文件” ） 插入 WEB 上的图像（“插入”“图片”“来自文件” ， “从 WEB 浏览器来 ）选择网页或文件”二、处理图像 1、剪裁图像（“图片”工具栏“剪裁”按钮） 2、设置透明背景（“图片”工具栏“设置透明色”按钮） 三、添加文本（“图片”工具栏“文本”按钮） 四、保存图像 注：默认情况下，当前站点的图像文件保存在 Image

21、s 文件夹中 五、运用特殊效果 1、调整图片的亮度和对比度 2、图片的翻转与旋转 3、图片的冲蚀和黑白处理 4、凹凸效果 六、设置图片对齐方式（“图片属性”“外观”“布局”“对齐方式” ） 七、使用水平线 水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，则会使用图形来代替水平线以匹配主题。 1、插入水平线 2、设置水平线属性 八、 修改网页背景（“格式”“背景” ） 1、调整背景色彩 2、调整背景图案 九、创建交换图像（DW 2004） 1、插入交换图像（“插入”“图像对象”“鼠标经过图像” ） “原始图像

22、” 、 “鼠标经过图像” 、 “按下时，前往的 URL” 2、预览交换图像：F12 【课程小结】a 【作业】 书本课后练习作业 课后练习 5 1第八节 创建超链接 【教学目的与要求】 一、与当前站点的链接 二、与空白网页的链接 三、与电子信箱的链接 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：创建热点 重点知识：与电子信箱的链接 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、与当前站点的链接（“插入”“ 超链接

23、” ， “搜索”当前站点的文件夹位置） 二、与空白网页的链接（“插入”“ 超链接” ， “创建一网页并链接到该网页”） 三、与电子信箱的链接（“插入”“ 超链接” ， “制作发送电子邮件的超链接”） 四、与 Web 的链接（“插入”“超链接” ， “使用 WEB 浏览器来选择网页或文件” ，ALT+TAB，则网页地址自动添加到 URL 中） 五、修改链接颜色（“网页属性”“背景” ， “颜色”“超链接” 、 “已访问的超链接” 、 “当前超链接” ） 六、使用图像地图 1、创建热点 在图片中创建热点的具体操作步骤如下： 选中要建立热点的图片。图片被选中后，四周将出现 8 个控制方块，并且“图片

24、工具栏”被激活。 在“图片工具栏”中，选择热点的形状的图标。可以选择长方形、圆形或多边形。 将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。 用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合 热点绘制完毕，图片中将出现该热点的边框。打开“插入超链接”对话框，建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。 练习五、设计一个介绍一年四季风景的网站 要求： 用到嵌套列表、框架、超链接、图像热点等技术。 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第九节第九节 表单设计表单设计 【教学目的与要求】 一、 认识表单 二、 生

25、成表单 三、 表单内容编辑 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：认识表单 重点知识： 表单内容编辑 【教学组织过程】2 课时 上讲回顾 12教授新知 【授课内容】 一、 认识表单 表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。 二、 生成表单 1、表单的创建与表单字段的添加 “插入”“表单” 2、表单向导 “文件”“新建”“网页”-“常规”“

26、表单网页向导” 三、 表单内容编辑 1、单行文本框 2、滚动文本框 3、复选框 4、单选按钮 5、下拉菜单 6、按钮 7、图片 8、标签 9、隐藏的表单字段 四、验证性表单字段（“验证有效性按钮” ） 五、 表单处理程序 右击表单，选择“表单属性”命令，提供了保存表单数据的三种不同处理方式： 1、发送到文件（单击“选项”按钮” ，进行设置） 2、发送到数据库 3、讨论表单处理程序 4、注册表单处理程序 脚本 ASP 或 CGI、NSAPI、ISAPI、自定义 5练习六：制作表单 制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答

27、案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第十节第十节 层及应用（层及应用（DW 2004） 【教学目的与要求】 一、层概述 二、创建层 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：层概述 重点知识：创建层 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、层概述 层（Layer）是一种 HTML 页面元素，您可以将它定位

28、在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 二、创建层 方法一：“插入”“布局对象”“层” ，按住鼠标拖动描绘层” “插入”工具栏“布局”“方法二：方法三：“插入”工具栏“布局” ，拖动“ 描绘层”按钮到文档窗口（按CTRL 键，可绘制多层） 三、 通过拖动周围的黑色调整柄控制层的大小 四、 拖动层左上角的选择柄可以移动层的位置。 五、 单击层标记可以选中一个层。 （显示层标记的方法：“编辑”“首选参数”“分类”“不可见元素” 六、显示层面板（“窗口”“层” ） 1、层的隐藏与显示 2、层数 3、层

29、重叠 七、层和表格之间的转换（在转换为表格之前，请确保层没有重叠。 ） “修改”“转换”“层到表格” 若要将表格转换为层，请选择“修改”“转换”“表格到层” 【课程小结】 【作业】 15 课后练习 书本课后练习作业、 第十一节第十一节 行为行为 【教学目的与要求】 一、行为概述 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：行为概述 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、行为概述 行为是一种

30、利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。 下面给出一些常见事件的一些解释 onClick 单击 onDbclick 双击 onKeypress 按键 onMouseDown 鼠标按下 onMouseOut 鼠标移出 onMouseOver 鼠标移上 onMouseUp 鼠标抬起。 实例：dreamweaver 中网页折叠菜单的制作 第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入” ，再选取“表格” ，在“行”中输入 1，在列中输入 2，在单击“确定” 。 把宽和高分别设为 200px 和 30px 在两个

31、单元格内分别输入 内容 第二步，在单元格内插入一个层。把宽和高分别设为 100px 和 90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为 100px 和 90px,以填满这个层。在三个单元格中输入内容 在层的属性栏中将“可视”设为“隐藏” ，这样在打开网页时便看不见这个层 在“行为目标”中选择一个合适的浏览器，一般是选择“IE ” 。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层” ， 在弹出的窗口中选择 “Layer1” ，就是我们刚才添加的那个层了，再单击“显示” 接着单击“事件”下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标

32、移上” （OnMouseOver） 。 再单击“+”按钮，选取“显示或隐藏层” ，还是选取“Layer1” ，不过这次我们点击的是“隐藏” （Hide）了，再确定。然后选择“事件” ，单击“当鼠标移 。(OnMouseOut)开”【课程小结】 【作业】 15 课后练习 书本课后练习作业 第十二节第十二节 HTML 语言基础语言基础 【教学目的与要求】 一、HTML 语言概述 二、HTML 文件基本架构 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教

33、学重点与难点】： 基础知识： HTML 语言概述 重点知识：HTML 文件基本架构 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、HTML 语言概述 当我们畅游 Internet 时，我们透过浏览器所看到的网站，是由 HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。 HTML 标记是由 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 ，所构成 ) 。HTML 网页文件可由任何文本编辑器或网页专用编辑器编

34、辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将 HTML 网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。 文件基本架构 HTML 二、 文件开始 标头区开始 . 标题区 标头区结束 本文区开始 本文区内容 本文区结束 说明： 文件结束 网页文件格式。 标头区 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 本文区 : 文件资料，即在浏览器上看到的网站内容。 三、常用字体标记 . 标题，设定标题字体大小， n = 1 ( 大 ) 6 ( 小 ) 会自动跳下一行。通常

35、用在如章节、段落等标题上。 1、如 : 标题 标题 2、如 : 标题 ( 标题置中 ) 标题 3、. 粗体字。 如 : 粗体字 粗体字 4、. 斜体字。 如 : 斜体字 斜体字 5、. 加底线。 如 : 加底线 加底线 6、. 横线 ( 表示删除 )。 如 : 横线 横线 7、. 打字体 ( 固定宽度文字 )。 如 : 打字体 打字体 8、. 上标字。 如 : 字体 上标字 字体上标字 9、. 下标字。 如 : 字体 下标字 字体下标字 10、 注解 ( 不会显示在浏览器上 )，可以多行。 如 : 四、设定字体大小、颜色、字型 有关设定文字的方法共有以下几种 : : BODY 如 标记。.文件

36、主体文字颜色。HTML 设定 1.TEXT=RED. 或 . 2.设定基本字体大小、颜色、字型。.标记。 3.设定字体大小、颜色、字型。.标记。 4、. 设定基本字体，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 基本字体大小为 4 基本字体大小为 4 如 : 设定颜色 设定颜色 如 : 设定字型 设定字型 . 基本字体加大。 如 : 基本字体大小为 4， 加大为 5 基本字体大小为 4，加大为 5 . 基本字体减小。 如 : 基本字体大小为 4， 减小为 3 基本字体大小为 4，减小为 3 5、. 设定字体大小、颜色、字型，SIZE = 1 7，1 ( 最小 ) 7 (

37、 最大 )。 如 : 字体大小为 4 字体大小为 4 如 : 基本字体大小为 4 +1 字体大小为 5 -2 字体大小为 2 . 基本字体大小为 4 +1 字体大小为 5 -2 字体大小为 2 如 : 设定颜色 设定颜色 如 : 设定字型 设定字型 五、常用表格标记 . 表格指令。 相关属性 : ALIGN 调整 BGCOLOR 背景颜色 BORDER 边框 HEIGHT 高度 WIDTH 宽度 . 表格标题。 . 表格列 ( 可省略 ) 。 . 表格栏标题 ( 表头 ) 粗体字 ( 可省略 ) 。 COLSPAN 栏宽 ROWSPAN 栏高 相关属 。 ) 可省略 ) ( 储存格 ( 表格栏

38、资料. 性 : ALIGN 调整 BGCOLOR 背景颜色 HEIGHT 高度 WIDTH 宽度 COLSPAN 栏宽 ROWSPAN 栏高 六、常用区段标记 产生水平线。 如 : 跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院， 网上学电脑的好去处。 . 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院， 网上学电脑的好去处。 . 置中。 如 : 置中 置中 . 不跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院，网上学电脑的好去处。 . 以文件原始格式显示。 如 : 原始格式: 文件

39、 原始格式: 文件 七、常用链接标记 设定基本 URL 位置或路径，以後只要设定文件名称即会自动加上位置或路径。 相关属性 : HREF 链接的 URL 位址或文件 TARGET 指定链接到的URL 位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : BASE HREF=http :. 链接指令。 相关属性 : HREF 链接的 URL 位址或文件 NAME 名称 TARGET 指定链接到的 URL 位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : 外部链接 AHREF=http :.标记。 相关属性 : ALINK 按下链接部份未放开

40、时颜色 LINK 未看过的链接部份颜色 VLINK已看过的链接部份颜色 : 如八、框架窗口常用标记 . 定义分割窗口。 相关属性 : BORDER 边框 COLS 行 , 设定分割左右窗口宽度 ( 用,分隔，可设百分比 % ;*表示剩余部份 ) FRAMEBORDER 显示边框 ROWS 列 , 设定分割上下窗口高度 ( 用,分隔，可设百分比 % ;*表示剩余部份 ) FRAME 定义窗口。 相关属性 : FRAMEBORDER 显示边框 NAME 名称 NORESIZE 设定是否可以调整窗口大小 SRC 文件或 URL 位址 SCROLLING 设定是否可以卷动 NOFRAMES. 无支援分

41、割窗口浏览器显示文字。 IFRAME. 插入浮动窗口。 相关属性 : BORDER 边框 FRAMEBORDER 显示边框 NORESIZE 设定是否可以调整窗口大小 SRC 文件或 URL 位址 SCROLLING 设定是否可以卷动 举例 如 : 浮动窗口 九、设定图片的方法共有以下几种 : 设定 HTML 文件背景图片、背景颜色。.标记。 如 : . 或 . 设定图片。标记。 3、设定地图。.标记。 常用图片标记 指令 相关属性 : ALIGN 调整 ALT 提示字 BORDER 边框 HEIGHT 高度 SRC 文件或 URL 位址 USEMAP 地图名称 WIDTH 宽度 如 : 可插

42、入图片 ( GIF、JPG 格式 )、AVI 电影 . 地图 相关属性 : NAME 名称 设定地图动作区域 相关属性 : COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 ) HREF 动作区域连结点 ( 可载入 外型 SHAPE 动作区域连结点不动作 NOHREF ) 位址或文件十、常用音乐标记 背景音乐、音效。 相关属性 : LOOP 循环 , 背景音乐播放次数 SRC 文件或 URL 位址 (可为WAV、MIDI 格式 ) 如 : 内嵌音乐插件 . 内嵌插件。 相关属性 : HEIGHT 高度 WIDTH 宽度 ( 可设百分比% ) SRC

43、 设定内嵌物件的 URL 位址 LOOP 循环 , 背景音乐播放次数 AUTOSTART 自动播放 如 : 十一、 【文字卷动标记】 . 文字卷动 ( 滚动条 )。 【相关属性】 BEHAVIOR = 设定卷动方式 - ALTERNATE 交替来回卷动 - SCROLL 卷动 ( 预设 ) - SLIDE 滑动 BGCOLOR = color 背景颜色 DIRECTION = 设定卷动方向 HEIGHT = n 高度 LOOP = n 循环 , 卷动次数 ( 预设循环 ) SCROLLAMOUNT = n 设定卷动距离 SCROLLDELAY = milliseconds 设定卷动时间 TRU

44、ESPEED = milliseconds 设定卷动速度 WIDTH = n 宽度 ( 可设百分比% ) 【举例】 例一 : 太平洋网络学院 如 : 太平洋网络学院 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第十三节第十三节 使用使用 CSS 样式样式 【教学目的与要求】 一、CSS 概述 二、创建一个新的 CSS 样式 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：CSS 概述 重点知识：创建一个新的

45、CSS 样式 【教学组织过程】2 课时 1上讲回顾 2教授新知 【授课内容】 一、CSS 概述 CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用 CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。 CSS 样式有以下几个重要的作用： 1、将格式与结构分离 2、增强控制页面布局的能力 3、简化代码，提高下载速度 4、使维护和更新网页变得更加容易 5、代码兼容性更好 B 二、创建一个新的 CSS 样式 1、显示“CSS 样式”面板（“窗

46、口”“CSS 样式” ） “附加 CSS 样式”按钮、 “新建 CSS 样式” 、 “编辑 CSS 样式”按钮、 “删除 CSS样式” 2、创建自定义 CSS 样式（在“CSS 样式”面板中选择“新建 CSS 样式”按钮） 类（可应用于任何标签） 输入名称：（加“.” ） 定义在：新建样式表文件、仅对该文档 标签（重新定义特定标签的外观） 标签：（选择标签） 选择类型 定义在： 高级（ID、上下文选择器等） a:link：定义正常状态下链接文字的样式 a:visited：定义已访问过的链接文字的样式 a:hover：定义鼠标指针移到链接文字时文字的样式 a:active：定义按下鼠标左键时链接

47、文字的样式 三、设置 CSS 样式格式 1、编辑 CSS 样式文字格式 字体、大小、粗细、样式、变量、行高、大小写、修饰、颜色 2、编辑 CSS 样式背景格式 背景颜色、背景图像、重复、附件、水平位置、垂直位置 3、编辑 CSS 样式块格式 单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示 4、编辑 CSS 样式框格式 宽、高、浮动、清除、填充、边界 5、编辑 CSS 样式边框格式 样式、宽度、颜色6、编辑 CSS 样式列表格式 类型、项目符号图像、位置 7、编辑 CSS 样式定位格式 类型、显示、宽、高、Z 轴、溢出、定位、剪辑 编辑 CSS 样式扩展格式 分页、视觉效果 四、应

48、用 CSS 样式 添加层叠样式表的方法 我们为网页添加样式表的方法有四种。 1最简单的方法是直接添加在 HTML 的标识符（tag）里： 网页内容 举个例子： CSS 实例 代码说明： 用蓝色显示字体大小为 10pt 的“CSS 实例” 。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存” 。 2添加在 HTML 的头信息标识符里： type=”text/css”表示样式表采用 MIME 类型，帮助不支持 CSS 的浏览器过滤掉 CSS 代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，

49、还是有必要在样式表里加上注释标识符“” 。 3链接样式表 里：的头信息标识符 HTML 同样是添加在 *.css 是单独保存的样式表文件，其中不能包含标识符，并且只能以css 为后缀。 Media 是可选的属性，表示使用样式表的网页将用什么媒体输出 4联合使用样式表 同样是添加在 HTML 的头信息标识符里： 以import 开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。 需要注意的是： 联合法输入样式表必须以import 开头。 如果同时输入多个样式表有冲突的时候，将按

50、照第一个输入的样式表对网页排版。 如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。 层叠样式表的格式 一般来说，样式表的声明分为选择符（selector）和块（block） ，块里包含属性（properties）和属性的取值（value） ，基本格式如下： 属性：值 选择符其它格式 1： 选择符 1，选择符 2，选择符 3 属性 1：值 1；属性 2：值 2；属性 3：值 3 其它格式 2： 选择符 1 选择符 2 属性 1：值 1；属性 2：值 2；属性 3：值 3 和格式 1 非常相似，只是在选择符之间少加了“， ” ，但作用却大不相同。表示如果选择符 2 包括的内容同时包括在

51、选择符 1 里的时候，所设置的样式规则才起作用。 层叠样式表的分类 为了使网页的格式不过分的单调，必需让相同的选择符也能分类，并能按照不同的类别来进行不同的样式设计。基本格式如下： 选择符.类别名 属性：值 类别名将可以在 HTML 的标识符里引用： 网页内容 控制字体的样式 控制字体的样式包括控制字体类型、字体大小、字体风格、字体粗细四个部分。 1字体类型 基本格式如下： font-family: 字体名称 2字体大小 基本格式如下： font-size: 字号参数 3字体风格 字体风格只能控制各种斜体字的显示。 基本格式如下： font-style: 斜体字的名称 4字体粗细 基本格式如下

52、：font-weight: 字体粗细 控制文字的样式包括文字大小写、文字修饰两个部分。 1文字大小写 基本格式如下： text-transform: 参数 文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 基本格式如下： text-decoration: 参数 参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果 控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 1单词间距 单词间距指的是英文每个单词之间的距离，不包括

53、中文文字。 基本格式如下： word-spacing: 间隔距离 2、字母间距 字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 基本格式如下： letter-spacing: 字母间距 基本格式如下： line-height: 行间距离 4文本水平对齐 也包括而且并不仅仅指文字内容，文本水平对齐可以控制文本的水平对齐，设置图片、影像资料的对齐方式。 基本格式如下： text-align: 参数 参数的取值： left：左对齐 right：右对齐 center：居中对齐 justify：相对左右对齐 文本垂直对齐 基本格式如下： vertical-align: 参数

54、 参数取值： top：顶对齐 bottom：底对齐 text-top：相对文本顶对齐 text-bottom：相对文本底对齐 baseline：基准线对齐 middle：中心对齐 sub：以下标的形式显示 super：以上标的形式显示 6文本缩进 基本格式如下： text-indent: 缩进距离 7、控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 1颜色属性 基本格式如下： color: 参数 背景颜色基本格式如下： background-color: 参数 背景图片 基本格式如下： background-image: url(URL)

55、背景图片重复 背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 基本格式如下： background-repeat: 参数 参数取值范围： no-repeat：不重复平铺背景图片 repeat-x：使图片只在水平方向上平铺 repeat-y：使图片只在垂直方向上平铺 5背景图片固定 背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。 基本格式如下： background-attachment: 参数 参数取值范围： fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固

56、定不动 scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动 6背景定位 背景定位用于控制背景图片在网页中显示的位置。 基本格式如下： background-position: 参数表 参数取值范围： 带长度单位的数字参数 ：相对前景对象顶对齐 topbottom：相对前景对象底对齐 left：相对前景对象左对齐 right：相对前景对象右对齐 center：相对前景对象中心对齐 列表符号 基本格式如下： list-style-type：参数 参数取值范围： disc：圆形 circle：空心圆 square：方块 decimal：十进制数字 lower-roman：小写罗马数字

57、 upper-roman：大写罗马数字 lower-alpha：小写希腊字母 upper-alpha：大写希腊字母 none：无符号显示 CSS 提供了多达 13 种的鼠标形状，供我们选择。 基本格式如下： cursor：鼠标形状参数 CSS 鼠标形状参数表： CSS 代码 鼠标形状 style=cursor:hand 手形 style=cursor:crosshair 十字形 style=cursor:text 文本形style=cursor:wait 沙漏形 style=cursor:move 十字箭头形 style=cursor:help 问号形 style=cursor:e-resiz

58、e 右箭头形 style=cursor:n-resize 上箭头形 style=cursor:nw-resize 左上箭头形 style=cursor:w-resize 左箭头形 style=cursor:s-resize 下箭头形 style=cursor:se-resize 右下箭头形 style=cursor:sw-resize 左下箭头形 在 Front Page 中应用样式表 练习： 1、使用 CSS 选择器创建一个 CSS 样式，定义网页中超链接的各种状态：正常状态下链接文字的颜色为#FF0000，已访问过的链接文字颜色为#00FF00，鼠标指针移到链接文字时的文字颜色为#0000

59、FF，按下鼠标左键时的链接文字的颜色为#FFFF00 2、创建一个名为“myfont”的外部 CSS 样式样式表，将字体定义为粗体和斜体 样式样式表文件导入到文档中，并在文档的 CSS 题中创建的外部 2、将第 3正文部分中应用。 【课程小结】 【作业】 15 课后练习 书本课后练习作业 第十四节第十四节 插入媒体插入媒体 【教学目的与要求】 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点教学重点与难点】： 基础知识：。 重点知识： 【教学组织过程】

60、2 课时 1上讲回顾 2教授新知 【授课内容】 一、媒体概述 媒体是指信息的载体，包括文字、图形、动画、音频和视频等。 “多媒体”就是指由两种以上媒体构成共同表示、传播和存储同一信息的媒体。 二、插入 Flash 对象 1、插入 Flash 动画 “插入”“媒体”“Flash” 设置 FLASH 属性 2、插入 FLASH 按钮 “插入”“媒体”“FLASH 按钮” 3、插入 FLASH 文本 二、插入其他媒体对象 影片 Shockwave、插入 1Shockwave 是一个很普及的浏览器的插件，可以在大多数常用的浏览器中进行播放 “插入”“媒体”“Shockwave” 2、插入 Active