网页设计与制作教案48111.doc

_网页设计和发布流程第一步是对站点进行规划第二步是创建站点的基本结构第三步即可开始具体的网页创作过程最后一步是站点的发布第一节 站点的规划与创建【教学目的与要求】一、规划站点二、创建一个站点【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：规划站点重点知识：创建一个站点2课时【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、规划站点Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。1、规划站点结构注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）2、规划站点的浏览机制一般可采用以下的方法：l 创建返回主页的链接l 显示网站专题目录l 显示当前位置l 搜索和索引l 反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）二、创建一个站点步骤：1、单击“文件”-“新建”-“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令）2、选择一种站点模板或向导3、单击“确定”按钮三、站点的基本操作1、打开站点：“文件”-“打开站点”2、删除站点：方法一：在Windows资源管理器中删除一个站点方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令3、站点的设置“工具”-“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡【课程小结】【作业】15 课后练习书本课后练习作业第二节 利用表格进行网页布局【教学目的与要求】一、 插入表格二、 单元格的基本操作【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识： 插入表格重点知识：单元格的基本操作【教学组织过程】2课时 2课时1上讲回顾2教授新知【授课内容】一、 插入表格1、单击常用工具上的“插入表格”按钮2、单击“表格”-“插入”-“表格”命令3、使用表格工具栏（“查看”“工具栏”-“表格”命令）4、由文本转换（“表格”“转换”“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记。二、 单元格的基本操作1、选择单元格（“表格”“选定”“单元格”）Ctrl：可选择不相邻的单元格Shift：选择多个相邻的单元格2、插入单元格（“表格”“插入”“单元格”）3、合并单元格（“表格”“合并单元格”或“表格工具栏”上的“合并单元格”按钮）4、拆分单元格（“表格”“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮）三、填充单元格1、文本与图像填充（“插入”“图片”）2、对齐文本与图像（“表格”“属性”“单元格”，“水平对齐方式”、“垂直对齐方式”）3、修改单元格背景（“表格”“属性”“单元格”，“背景”）4、调整边框颜色（“表格”“属性”“单元格”，“边框”）5、改变单元格尺寸（“表格”“属性”“单元格”，“指定宽度”、“指定高度”）四、修改表格的行与列1、选择行与列2、插入行与列（“表格”“插入”“行或列”）3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”）4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”“删除单元格”命令）【课程小结】【作业】15 课后练习书本课后练习作业 第三节 利用框架设计网页布局【教学目的与要求】一、 认识框架网页二、 创建框架网页三、框架网页的保存和打开【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：认识框架网页重点知识：创建框架网页【教学组织过程】2课时 2课时1上讲回顾2教授新知【授课内容】一、认识框架网页 1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架）框架具有以下特性：每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。每个框架窗口可以赋予一个名字，以便其他URL作为目标调用。2、框架的使用场合（如邮箱、论坛）通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节二、创建框架网页 1、框架网页的创建“文件”“新建”“网页”，选择“框架网页”选项卡 2、框架网页模板（10种） “设置初始网页”“新建网页”三、框架网页的保存和打开框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。 1、框架网页的保存“文件”“保存文件”或“框架”“保存网页” 2、框架网页的打开 “框架”“在新窗口中打开网页”4、 框架网页的属性 1、框架网页的属性 “文件”“属性”“框架间距”、“显示边框”2、框架的属性 “框架”“框架属性”五、调整框架布局 1、调整框架窗口的大小（用鼠标拖动或在“框架属性”对话框中调整） 2、框架的拆分方法一：“框架”“拆分框架”（按行或按列拆分）方法二：用鼠标拖动拆分（按Ctrl键）3、框架的删除 “框架”“删除框架”六、目标框架当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。选择要设置超链接的文字或图像，“插入”“超链接”，单击“目标框架”、“更改目标框架”【课程小结】【作业】15 课后练习书本课后练习作业第四节 使用导航栏【教学目的与要求】一、定义导航结构二、认识导航栏属性三、创建导航栏【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：定义导航结构重点知识：认识导航栏属性【教学组织过程】2课时2课时1上讲回顾2教授新知【授课内容】一、定义导航结构在网页内添加导航栏之前，先建立该站点的导航结构“视图”“导航”按钮二、认识导航栏属性“插入”“导航栏”按钮“父层”：创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。三、创建导航栏（要在浏览器中才可看到实际导航栏效果）四、创建共享边框用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。右击编辑窗口，单击“共享边框”命令练习二、利用框架设计一个企业网站的布局要求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。【课程小结】【作业】15 课后练习书本课后练习作业第五节 网页布局功能的应用【教学目的与要求】一、 创建布局表格二、 绘制布局表格【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：创建布局表格重点知识：绘制布局表格【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、创建布局表格 1、创建布局表格 打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。 2.绘制布局表格 如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。 3、设置表格属性插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。 提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。练习三、使用布局功能设计学校网站要求包括有以下内容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等【课程小结】【作业】15 课后练习书本课后练习作业第六节 网页布局设计 【教学目的与要求】一、文本的美化（“格式”“字体”）二、 运用边框与阴影（“格式”“边框与阴影”） 1、设置边框 2、设置阴影 【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：文本的美化（“格式”“字体”）重点知识：运用边框与阴影（“格式”“边框与阴影”） 1、设置边框 2、设置阴影 【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、文本的美化（“格式”“字体”）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）单击“确定”按钮。练习四、设计一个介绍阳江风景及特产的网页要求：设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。【课程小结】【作业】15 课后练习书本课后练习作业第七节 网页装饰设计【教学目的与要求】一、添加图像二、处理图像【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：添加图像重点知识：二、处理图像【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、添加图像在浏览器中，能处理的图片格式只有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、调整背景图案九、创建交换图像（DW 2004）1、插入交换图像（“插入”“图像对象”“鼠标经过图像”）“原始图像”、“鼠标经过图像”、“按下时，前往的URL”2、 预览交换图像：F12【课程小结】a【作业】15 课后练习书本课后练习作业第八节 创建超链接 【教学目的与要求】一、与当前站点的链接二、与空白网页的链接三、与电子信箱的链接【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：创建热点重点知识：与电子信箱的链接【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、与当前站点的链接（“插入”“ 超链接”，“搜索”当前站点的文件夹位置）二、与空白网页的链接（“插入”“ 超链接”，“创建一网页并链接到该网页”）三、与电子信箱的链接（“插入”“ 超链接”，“制作发送电子邮件的超链接”）四、与Web的链接（“插入”“超链接”，“使用WEB浏览器来选择网页或文件”，ALT+TAB，则网页地址自动添加到URL中）五、修改链接颜色（“网页属性”“背景”，“颜色”“超链接”、“已访问的超链接”、“当前超链接”） 六、使用图像地图1、创建热点 在图片中创建热点的具体操作步骤如下： 选中要建立热点的图片。图片被选中后，四周将出现8个控制方块，并且“图片工具栏”被激活。 在“图片工具栏”中，选择热点的形状的图标。可以选择长方形、圆形或多边形。将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合热点绘制完毕，图片中将出现该热点的边框。打开“插入超链接”对话框，建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。 练习五、设计一个介绍一年四季风景的网站要求：用到嵌套列表、框架、超链接、图像热点等技术。【课程小结】【作业】15 课后练习书本课后练习作业第九节 表单设计【教学目的与要求】一、 认识表单二、 生成表单三、 表单内容编辑【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：认识表单重点知识： 表单内容编辑【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、 认识表单表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。二、 生成表单1、表单的创建与表单字段的添加“插入”“表单”2、表单向导“文件”“新建”“网页”-“常规”“表单网页向导”三、 表单内容编辑1、单行文本框2、滚动文本框3、复选框4、单选按钮5、下拉菜单6、按钮7、图片8、标签9、隐藏的表单字段四、验证性表单字段（“验证有效性按钮”）五、 表单处理程序右击表单，选择“表单属性”命令，提供了保存表单数据的三种不同处理方式：1、发送到文件（单击“选项”按钮”，进行设置）2、发送到数据库3、讨论表单处理程序4、注册表单处理程序5、自定义ISAPI、NSAPI、CGI或ASP脚本练习六：制作表单制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮【课程小结】【作业】15 课后练习书本课后练习作业第十节 层及应用（DW 2004）【教学目的与要求】一、层概述二、创建层【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：层概述重点知识：创建层【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、层概述层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 二、创建层方法一：“插入”“布局对象”“层”方法二：“插入”工具栏“布局”“ 描绘层”，按住鼠标拖动方法三：“插入”工具栏“布局”，拖动“ 描绘层”按钮到文档窗口（按CTRL键，可绘制多层）三、 通过拖动周围的黑色调整柄控制层的大小四、 拖动层左上角的选择柄可以移动层的位置。五、 单击层标记可以选中一个层。（显示层标记的方法：“编辑”“首选参数”“分类”“不可见元素”六、显示层面板（“窗口”“层”）1、层的隐藏与显示2、层数3、层重叠 七、层和表格之间的转换（在转换为表格之前，请确保层没有重叠。 ）“修改”“转换”“层到表格”若要将表格转换为层，请选择“修改”“转换”“表格到层” 【课程小结】【作业】15 课后练习书本课后练习作业、第十一节 行为 【教学目的与要求】一、行为概述【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：行为概述【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、行为概述行为是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。 下面给出一些常见事件的一些解释onClick 单击onDbclick 双击onKeypress按键onMouseDown鼠标按下onMouseOut鼠标移出onMouseOver鼠标移上onMouseUp鼠标抬起。 实例：dreamweaver中网页折叠菜单的制作第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入” ，再选取“表格” ，在“行”中输入1，在列中输入2，在单击“确定”。把宽和高分别设为200px和30px 在两个单元格内分别输入 内容第二步，在单元格内插入一个层。把宽和高分别设为100px和90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个单元格中输入内容 在层的属性栏中将“可视”设为“隐藏”，这样在打开网页时便看不见这个层 在“行为目标”中选择一个合适的浏览器，一般是选择“IE 4.0”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层” ， 在弹出的窗口中选择 “Layer1” ，就是我们刚才添加的那个层了，再单击“显示”接着单击“事件”下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”（OnMouseOver）。再单击“+”按钮，选取“显示或隐藏层”，还是选取“Layer1”，不过这次我们点击的是“隐藏”（Hide）了，再确定。然后选择“事件”，单击“当鼠标移开”(OnMouseOut)。【课程小结】【作业】15 课后练习书本课后练习作业第十二节 HTML语言基础【教学目的与要求】一、HTML语言概述二、HTML文件基本架构【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识： HTML语言概述重点知识：HTML文件基本架构【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、HTML语言概述当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。 HTML标记是由 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 ，所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。二、HTML文件基本架构 文件开始 标头区开始 . 标题区 标头区结束 本文区开始 本文区内容 本文区结束 说明： 文件结束 网页文件格式。 标头区 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 本文区 : 文件资料，即在浏览器上看到的网站内容。三、常用字体标记 . 标题，设定标题字体大小， n = 1 ( 大 ) 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。 1、如 : 标题 标题2、如 : 标题 ( 标题置中 ) 标题3、. 粗体字。 如 : 粗体字 粗体字 4、. 斜体字。 如 : 斜体字 斜体字 5、. 加底线。 如 : 加底线 加底线 6、. 横线 ( 表示删除 )。 如 : 横线 横线 7、. 打字体 ( 固定宽度文字 )。 如 : 打字体 打字体 8、. 上标字。 如 : 字体 上标字 字体上标字 9、. 下标字。 如 : 字体 下标字 字体下标字 10、 注解 ( 不会显示在浏览器上 )，可以多行。 如 : 四、设定字体大小、颜色、字型有关设定文字的方法共有以下几种 : 1.设定HTML文件主体文字颜色。.标记。 如 : . 或 . 2.设定基本字体大小、颜色、字型。.标记。 3.设定字体大小、颜色、字型。.标记。 4、. 设定基本字体，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 基本字体大小为 4 基本字体大小为 4 如 : 设定颜色 设定颜色 如 : 设定字型 设定字型 . 基本字体加大。 如 : 基本字体大小为 4， 加大为 5 基本字体大小为 4，加大为 5 . 基本字体减小。 如 : 基本字体大小为 4， 减小为 3 基本字体大小为 4，减小为 3 5、. 设定字体大小、颜色、字型，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 字体大小为 4 字体大小为 4 如 : 基本字体大小为 4 +1字体大小为 5 -2字体大小为 2 . 基本字体大小为 4 +1字体大小为 5 -2字体大小为 2 如 : 设定颜色 设定颜色 如 : 设定字型 设定字型五、常用表格标记 . 表格指令。 相关属性 : ALIGN 调整 BGCOLOR 背景颜色 BORDER 边框 HEIGHT 高度 WIDTH 宽度 . 表格标题。 . 表格列 ( 可省略 ) 。 . 表格栏标题 ( 表头 ) 粗体字 ( 可省略 ) 。 COLSPAN 栏宽 ROWSPAN 栏高 . 表格栏资料 ( 储存格 ) ( 可省略 ) 。 相关属性 : ALIGN 调整 BGCOLOR 背景颜色 HEIGHT 高度 WIDTH 宽度 COLSPAN 栏宽 ROWSPAN 栏高 六、常用区段标记 产生水平线。 如 : 跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院， 网上学电脑的好去处。 . 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院，网上学电脑的好去处。 . 置中。 如 : 置中 置中 . 不跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。 太平洋网络学院，网上学电脑的好去处。 . 以文件原始格式显示。 如 : 原始格式: 文件 原始格式: 文件 七、常用链接标记 设定基本URL位置或路径，以後只要设定文件名称即会自动加上位置或路径。 相关属性 : HREF 链接的URL位址或文件 TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : . 链接指令。 相关属性 : HREF 链接的URL位址或文件 NAME 名称 TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : 外部链接 设定十秒回到首页。 ( 若不设定HTML文件位置则再载入原HTML文件 ) 设定链接、未链接部份颜色 设定链接、未链接部份颜色，用.标记。 相关属性 : ALINK按下链接部份未放开时颜色 LINK未看过的链接部份颜色 VLINK已看过的链接部份颜色 如 : 八、框架窗口常用标记 . 定义分割窗口。 相关属性 : BORDER 边框 COLS 行 , 设定分割左右窗口宽度 ( 用,分隔，可设百分比 % ;*表示剩余部份 ) FRAMEBORDER 显示边框 ROWS 列 , 设定分割上下窗口高度 ( 用,分隔，可设百分比 % ;*表示剩余部份 ) FRAME 定义窗口。 相关属性 : FRAMEBORDER 显示边框 NAME 名称 NORESIZE 设定是否可以调整窗口大小 SRC 文件或URL位址 SCROLLING 设定是否可以卷动 NOFRAMES. 无支援分割窗口浏览器显示文字。 IFRAME. 插入浮动窗口。 相关属性 : BORDER 边框 FRAMEBORDER 显示边框 NORESIZE 设定是否可以调整窗口大小 SRC 文件或URL位址 SCROLLING 设定是否可以卷动 举例 如 : 浮动窗口 九、设定图片的方法共有以下几种 : 设定HTML文件背景图片、背景颜色。.标记。 如 : . 或 . 设定图片。标记。 3、设定地图。.标记。 常用图片标记 指令 相关属性 : ALIGN 调整 ALT 提示字 BORDER 边框 HEIGHT 高度 SRC 文件或URL位址 USEMAP 地图名称 WIDTH 宽度 如 : 可插入图片 ( GIF、JPG格式 )、AVI电影 . 地图 相关属性 : NAME 名称 设定地图动作区域 相关属性 : COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 ) HREF 动作区域连结点 ( 可载入位址或文件 ) NOHREF 动作区域连结点不动作 SHAPE 外型 十、常用音乐标记 背景音乐、音效。 相关属性 : LOOP 循环 , 背景音乐播放次数 SRC 文件或URL位址 (可为WAV、MIDI格式 ) 如 : 内嵌音乐插件 . 内嵌插件。 相关属性 : HEIGHT 高度 WIDTH 宽度 ( 可设百分比% ) SRC 设定内嵌物件的 URL 位址 LOOP 循环 , 背景音乐播放次数 AUTOSTART 自动播放 如 : 十一、【文字卷动标记】 . 文字卷动 ( 滚动条 )。【相关属性】 BEHAVIOR = 设定卷动方式 - ALTERNATE 交替来回卷动 - SCROLL 卷动 ( 预设 ) - SLIDE 滑动 BGCOLOR = color 背景颜色 DIRECTION = 设定卷动方向 HEIGHT = n 高度 LOOP = n 循环 , 卷动次数 ( 预设循环 ) SCROLLAMOUNT = n 设定卷动距离 SCROLLDELAY = milliseconds 设定卷动时间 TRUESPEED = milliseconds 设定卷动速度 WIDTH = n 宽度 ( 可设百分比% ) 【举例】 例一 : 太平洋网络学院 如 : 太平洋网络学院【课程小结】【作业】15 课后练习书本课后练习作业第十三节 使用CSS样式【教学目的与要求】一、CSS概述二、创建一个新的CSS样式【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：CSS概述重点知识：创建一个新的CSS样式【教学组织过程】2课时1上讲回顾2教授新知【授课内容】一、CSS概述CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。CSS样式有以下几个重要的作用：1、将格式与结构分离2、增强控制页面布局的能力3、简化代码，提高下载速度4、使维护和更新网页变得更加容易5、代码兼容性更好B二、创建一个新的CSS样式1、显示“CSS样式”面板（“窗口”“CSS样式”）“附加CSS样式”按钮、“新建CSS样式”、“编辑CSS样式”按钮、“删除CSS样式”2、创建自定义CSS样式（在“CSS样式”面板中选择“新建CSS样式”按钮）类（可应用于任何标签）输入名称：（加“.”）定义在：新建样式表文件、仅对该文档标签（重新定义特定标签的外观）标签：（选择标签）选择类型定义在：高级（ID、上下文选择器等）a:link：定义正常状态下链接文字的样式a:visited：定义已访问过的链接文字的样式a:hover：定义鼠标指针移到链接文字时文字的样式a:active：定义按下鼠标左键时链接文字的样式三、设置CSS样式格式1、编辑CSS样式文字格式字体、大小、粗细、样式、变量、行高、大小写、修饰、颜色2、编辑CSS样式背景格式背景颜色、背景图像、重复、附件、水平位置、垂直位置3、编辑CSS样式块格式单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示4、编辑CSS样式框格式宽、高、浮动、清除、填充、边界5、编辑CSS样式边框格式样式、宽度、颜色6、编辑CSS样式列表格式类型、项目符号图像、位置7、编辑CSS样式定位格式类型、显示、宽、高、Z轴、溢出、定位、剪辑编辑CSS样式扩展格式分页、视觉效果四、应用CSS样式 添加层叠样式表的方法我们为网页添加样式表的方法有四种。1最简单的方法是直接添加在HTML的标识符（tag）里：网页内容举个例子：CSS实例代码说明：用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。2添加在HTML的头信息标识符里：type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“”。3链接样式表同样是添加在HTML的头信息标识符里：*.css是单独保存的样式表文件，其中不能包含标识符，并且只能以css为后缀。Media是可选的属性，表示使用样式表的网页将用什么媒体输出4联合使用样式表同样是添加在HTML的头信息标识符里：以import开头的联合样式表输入方法和链接