1、HTML 语言简介HTML 语言是一种页面描述语言，不是一种程序设计语言，它类似于排版语言。在 WEB 页中主要是以 HTML 语言作为描述语言一、 语法特征HTML 语言的构成是通过各种标记来表示的，这些标记由标记符号“”以及其中的标记元素组成。三种表达式是：1、对象 例：文字加粗2、对象例：网易在网页创建中是超级链接3、例：这是在同一个段落中，使一行文字换行，可以在换行的地方添加标记4、标记嵌套例：文字既加粗又是斜体 二、 基本结构html 文件是标准的 ASCII 文件。文件的头部（不显示在编辑区）这里写网页标题 这标志着文件为 HTML 文件文件的正文及主体部分（其内容全部显示在编辑区
2、）三、常用标识 表示文件的标题 表示其内的内容的以最大的字体表现出来的，可以将其称为标题标记。在 HTML 文档的正文部分，也可以包含其他的标题标记，总共有六个级别的标题标记到 表示文字加粗 表示文字斜体 表示文字加下划线 表示用来定义超级链接 用于设置文本的等宽体的效果，类似于打字机字体的效果在网页内插入水平线创建表单 表示用来改变文本的字体大小、字体颜色。FRONTPAGE 简介一、工作界面1、标题栏：在左边有一个简易的图标，文件名及程序名，在右边有三个按钮，不仅可以改变窗口的属性，对网页工作区的大小、位置和状态也产生影响。2、菜单栏：有“文件、编辑、查看、插入、格式、工具、表格、框架、窗
3、口、帮助”3、工具栏：有“常用工具栏、格式工具栏、表格工具栏、DHTML 效果工具栏、报表工具栏、导航工具栏、定位工具栏、图片工具栏、样式工具栏、自定义工具栏”工具栏的调用是：“查看”菜单“工具栏”4、视图栏：有六种视图模式，查看 WEB 站点时，通过选择不同的视图类型，将会看到不同表现形式的视图。、 “网页”视图 1这个视图实际上是进入了编辑器页面，主要是用来创建、编辑和预览 WEB页。、 “文件夹”视图 2与 WIN98 的资源管理器十分相似，它主要用于管理站点内的文件和文件夹。、 “报表”视图 3、 “导航”视图 4用来帮助网站导航到设计网站的结构图，采用了比较形象的树形结构。、 “超链
4、接”视图 5清楚的显示了所有超链接的状况，便于查找超级链接中的断点。分为两个窗格：左边的“文件夹列表”窗格显示了站点的大纲，右边的窗格用大图标来显示站点中的文件，并且用一系列的直线把它们连接在一起。、 “任务”视图 6通过“任务”视图的功能自动为每一个 WEB 站点建立一个“任务”视图，并且与设计者共享任务列表，从而结束了以前设计者经常面临的尴尬。5、文件夹列表：查看在 FRONTPAGE 中建立的文件。6、工作区：在左下角有三种视图方式：普通视图、HTML 视图、预览视图。、普通视图 1在这里可以随心所欲地发挥想象力，不用输入任何 HTML 语言就可以进行WEB 页编辑工作。在这里可以真正体
5、会到“所见即所得”的含义。、HTML 视图 2用户在普通视图中输入了自己想得到的主页的内容，会在 HTML 视图中自动生成 HTML 编码。、预览视图 3在设计网页而又不能随时上网查看自己的网页效果时，或者用户的 WEB站点的设计就是在离线的方式下进行，准备编制完网页再申请服务器；此时就要用到这个视图了。7、状态栏：创建新网页和新站点一、 站点设置1、创建新站点“文件”“新建”“站点” ，弹出“新建站点”对话框，在对话框中有八种模板，可选择其中一种。在“指定新站点的位置”文本框中可删除原有的路径自定义“确定”2、关闭站点“文件”“关闭站点”3、打开站点“文件”“打开站点”4、删除站点法一：在“
6、我的电脑”中找到站点所在的位置，用删除文件夹的方法删除。法二：在打开 frontpage 后，打开站点，在“文件夹列表”中指向“站点名” ，右击鼠标，选择“删除” 。二、 网页设置A、创建新网页（三种方法）1、 “文件”“新建”“网页”“新建网页”对话框选择其中的一种模式。2、在常用工具栏中单击“新建网页”按钮，直接建立一个空白的网页页面。3、CTRL+N 直接新建一个空白的网页页面。B、打开网页文件法一：启动 frontpage 程序，打开已有文件，方法有两种：1、 “文件”“打开”“打开”对话框中选择文件所在位置及文件名“确定”2、打开网页所在的站点后，在“文件夹列表”中双击网页文件名即可
7、打开相应网页。法二：用路径打开：在“我的电脑”中找到网页所在的位置，双击打开网页，此时网页是在“Internet Explorer 浏览器”中打开，需单击浏览器中的“文件”“使用 Microsoft Frontpage 编辑”命令。C、保存文件第一次存盘：“文件”“保存文件”出现“另存为”对话框，设置文件的“保存位置” 、 “文件名”“确定”第二次存盘：直接单击“常用工具栏”中的“保存文件”按钮即可。三、 设置网页属性创建新网页后，要设置网页的属性，因为网页的属性包含了网页的基本特征。 （只要求设置网页标题、背景音乐、背景）“文件”“属性”出现“网页属性”对话框或 在工作区单击鼠标右键，单击“
8、网页属性”上机任务：1、 创建一个站点：要求保存在 D：，文件名为“学员姓名”2、 新建一网页，设置背景音乐及背景颜色为银白色，设网页标题为“网页” 。保存在当前站点内，网页文件名为“我的网页” 。插入设置一、插入图片 1、方法：“插入”“图片”“来自文件”或“剪辑画”2、改变其属性：右击鼠标，选择“图片属性”A、 调整图片大小法一：直接利用鼠标拖曳。选定要调整尺寸的图片，将鼠标指针移到控点上，当光标变成双向箭头时，按住鼠标左键，拖动，调整到合适大小后，松开。法二：利用“图片属性”对话框设置选定好图片，右击打开“图片属性”对话框，选择“外观”选项卡中的“指定大小”复选框，在“高度”和“宽度”中
9、设置好数值， “确定”B、 图片定位相对于段落定位图片：“图片属性”“外观”“对齐方式”中选择一种对齐方式。相对于精确定位： 选择图片，在“图片”工具栏中单击“绝对定位”按钮，可将其拖到任意处。C、 转换图片格式：“图片属性”对话框“常规”选项卡，可将所选图片转换成GIF、JPEG 、 PNG 三种格式。二、插入表格在网页中常需加入各种文字、图片、动画来增加网页的观赏性，为了控制文字、图片等在网页中的位置，常需插入表格来控制网页的布局。A、制作表格步骤：1、选择“表格”“插入”“表格”命令，在弹出窗口中， “行数” “列数”框中键入需要的行数、列数。2、在“边框粗细”框中，以像素为单位，键入需
10、要的表格边框宽度，如果不要表格边框，请键入“0” 。3、单击“确定”方法还有两种：法一：在常用工具栏中，按“插入表格”按钮，在 4*5 表格中用鼠标拖曳的方法，沿对角拖一个所需行数、列数的表格，然后松开。法二；在“表格”工具栏中，按“手工绘表”按钮，当鼠标指针变为铅笔形状，手工绘表。B、表格调整1、插入行或列步骤： 、将插入点定位在表格的某单元格内 1、单击“表格”菜单“插入”命令“行或列” ，在对话框中输 2入要插入的行数或列数。、单击“确定” 32、删除行或列步骤： 、选定要删除的行或列 1、删除： 法一：单击“表格”菜单“删除单元格” 2法二：单击“表格”工具栏上的“删除单元格”按钮法三
11、：在选定的单元格内右击，选择“删除单元格”选项。3、合并单元格，分解单元格将需要合并/分解的单元格选定，单击“表格”菜单 “合并单元格”/“拆分单元格”C、美化表格（属性设置）1、设置有立体感的表格在“表格”属性中，将“边框粗细”设置值越大，边框越粗，将“亮边框”设置为浅色，将“暗边框”设置为较深颜色，即可。2、增加表格背景色在表格任意处单击右键，弹出快捷方式列表框，选择“表格属性” ，在属性窗口中的“背景”区域中，选择背景色。四、 插入水平线“插入”“水平线”在 Frontpage 中设置超级链接教学目标：通过学习掌握在 frontpage 中超级链接的四种常用方法；上机操作巩固所学知识。教
12、学难点：了解什么是超级链接；四种常用方法的操作教学过程：利用超级链接技术，对一些文字、图像做好一些链接，应用时，只要点击不同的文字、图片，就会出现相应的页面内容，通过 IE 浏览器工具栏上的“前进”和“后退”按钮还可以实现网页的前后切换。超级链接分为为两个部分：链接载体和链接的目标地址。链接载体是指文字或图片等对象；链接的目标地址是通过单击链接载体后所看到的网页。一、创建指向现有网页或文件的链接步骤：1、打开已设计好的页面。2、选定要定义超级链接的文字或图像。3、单击“插入”菜单“超链接”命令。4、弹出“创建超链接”对话框，网站中的所有网页出现在列表中，选择链接的目标网页。5、 “确定” ，一
13、般情况下，文字建立了链接后色彩与原来不同，在文字下面产生了下划线6、单击“预览”视图，将鼠标移到链接文字上时，光标会变成小手型，此时单击它即会跳转到目标网页中。二、创建指向 WWW 上其它站点的超链接操作：1、选项要定义链接的图像或文字；2、在常用工具栏中单击“超链接”按钮，出现“创建超链接”对话框3、在“URL”区域里，在“HTTP：”后面直接输入目标站点地址（如：）4、 “确定”三、创建发送电子邮件的超链接无论个人主页还是专业主页，一般在主页的末尾，总要加上一行电子邮件地址，这样可以及时知道网友对站点的的评价，可以从电子邮件中收到来自世界各地的反馈信息。操作：1、选定定义超链接的文字或图像
14、2、右击鼠标，选择“超链接” ，弹出“创建超链接”对话框3、在对话框中的“URL”区域中，直接输入电子邮件地址，地址前应该以“Mailto ：”开始4、单击“确定”5、在“预览”模式下，进行演示，单击此链接会自动启动邮件编辑器窗口，让您编辑并发送新邮件四、创建指向文档中书签的超链接如果一个网页中的文字内容比较多，访问者必须用较多的时间去搜索相关的段落。这时有一个简单的办法，就是为这个较长网页的每段标题添加书签，创建超链接，当访问者单击一个引向书签的链接后，就直接跳转到这个书签所在的位置。A、创建书签操作：1、将光标移到要插入入书签的位置2、单击“插入”菜单中的“书签”命令3、出现“书签”对话框
15、，在“书签名称”框中输入书签名称4、 “确定” ，插入书签的位置前出现书签标识B、创建书签链接操作：1、选定要定义超链接的引向文字或图像2、单击“插入”“超链接”出现“创建超链接”对话框3、在对话框的“可选”区域中，单击“书签”下拉按钮，在列表中选择链接的书签名4、 “确定”利用导航器设置站点一、利用导航器设置站点操作：1、新建一个空白站点2、在“视图栏”中，选择“导航” ，将视图切换到“导航”视图3、在工具栏中单击“新建网页”按钮，创建主页4、连续三次单击“新建网页”按钮，创建三个子页5、选择“格式”“主题”弹出“主题”对话框，在对话框中选择主题应用范围为“所有网页” ，将主题应用到站点的每
16、一页中，再任选一主题，确定6、 “格式”“共享边框” ，在对话框中应用范围为“所有网页” ，设置共享边框的位置及是否“包含导航”确定7、设置导航栏属性，可单击右键，也可单击“插入”“导航栏”框架网页的制作框架网页是一种独特的页面组织方式，它是在一个窗口中包括了几个单独的 WEB 页，通过超链接的方式，可以在指定框架窗口中改变网页内容，利用这一特点，可以用来创建界面清晰，交互性强的 CAI 课件。WEB 页面是利用框架进行网页制作的基本元素，因此，在建立框架之前首要任务是把所需 WEB 页面制作完成。一、创建框架网页操作：1、 “文件”“新建”“网页”弹出“新建”对话框2、选择“框架网页”选项卡
17、3、选择其中一种模式（以“横幅和条目”模式为例）4、整个 WEB 页面被分割为 3 个小窗口：横幅框架、目录框架、主要框架5、单击横幅框架窗口中的“创建初始网页”按钮，在弹出的“创建超链接”对话框中选择已有的“.htm”文件，作为该窗口的初始页面；或单击“新建网页”按钮则创建出一个空白的网页。二、框架的保存由于在一个框架中还包括其他的 WEB 页面，框架网页只是作为组织页面的一种结构，因此需要分别保存整个框架网页和其中的每一个框架网页的页面。操作：1、 “文件”“保存”2、弹出“另存为”对话框，根据提示进行页面保存现在我们保存整个框架网页为“框架.HTM” ，横幅窗口为 “课题.HTM ”在框
18、架网页中，要进行多次保存，首先保存的是整个框架页面，它只是保存了一个结构，其中新建的框架窗口网页需要另外保存，而目录框架窗口是链接了原有的 WEB 网页，就不必保存了。三、拆分框架1、将鼠标移到框架边缘2、按住 CTRL 键，向右拖动鼠标，经过拖动后框架窗口从两份拆分为 3 份四、删除框架1、选择一个框架窗口2、单击“框架”菜单中的“删除”命令五、修改框架属性1、右键单击任意框架窗口，选择“框架属性”命令在“框架属性”对话框中，可以在这里对框架进行具体设置，如设置框架是否需要显示滚动条，只要在下拉列表框中选择即可FLASH 制作一、用 FLASH 进行文字处理要使文字具有多样化的效果，首先必须
19、将文字转换成矢量图形实例 1: 渐变文字效果步骤:1、输入文本，单个字进行输入，并将其分解。2、选择“颜料桶” 工具按钮3、在颜色样本中选择一种渐变色进行填充即可实例 2： 变形文字效果步骤：1、在工作区输入文字，并将其打散2、将鼠标指针移到文字进行选择3、拖动鼠标将文字变形实例 3：空心字效果步骤：1、在工作区输入文字，并将其打散2、选择文字边框，设置工具箱中的颜色描边工具,选择“墨水瓶”工具按钮，选择线条颜色，对文字边缘描到颜色3、敲击 DEL 键，删除中间部分，即成为空心字二、简单的位移及形变动画的简介1、 位移动画实例：1、在第一帧处绘制一个矩形2、在第二十帧插入一个关键帧3、将矩形移
20、到另一位置4、回到第一帧，在属性面板的中间选项中选择“移动” ，即在时间轴上显示篮色底纹箭头，即创建了一个位移动画2、 渐变动画实例：1、在第一帧处绘制一个矩形2、在第二十帧处插入一个空白关键帧，并在第二十帧处绘制一个圆形3、选择第一帧，在属性面板中的中间选项中选择“形状” ，即在时间轴显示为绿底箭头，即创建了一个形变动画三、角的展开:步骤:1、在图层 1，绘制一条直线，用箭头工具选定直线，打开 “属性”面板，在“描绘高度”中选择“4” ，隐藏“属性”面板单击“编辑”菜单中的“拷贝”按钮。2、新建一个图层，单击“编辑”菜单中的“粘贴到当前位置”命令（在工作区即出一条和图层一中一样的直线，并完全
21、重合） ，单击“修改”菜单中的“群组” ，选择工具箱中的“自由转换工具” ，将中心点调整到直线右端点上。3、在图层二的第三十帧处插入关键帧，单击“窗口”菜单中的“转换”命令，在“旋转”项中设置为 160 度，回车确定。4、单击图层 2 的第一帧，打开“属性”面板，在中间列表框中选择“移动” 。5、在图层 1 的第三十帧处插入帧。6、测试影片（ctrl+enter ）题目：1、在图层 1 创建文字“IT-信息技术” ，黑体，字号 28，颜色RGB（20、58 、250） ；创建关键帧 1、20，位置分别为（ 40、280） 、（300、20） ，位移动画。2、导入图片，创建关键帧 1 和 30，
22、图片在帧 1 和帧 30 的位置分别是（10、20） ， （300，280） ，创建移动动画，结果帧缩放比例为 30%，旋转 160 度。制作要点：A、位置设置在属性对话框的左下角，在选定对象的情况下可以进行设置。B、导入图片：“文件”菜单“导入”C、缩放比例及旋转度数：“窗口”菜单“转换”面板中设置四、添加引导层动画实例 1： 引导小球运动1、新建一个名为“球”图形元件(插入- 新建元件)2、在“窗口”菜单中打开“库”面板将“球“ 拖到场景中3、新建一引导层，用“直线 “工具画一引导线，用鼠标拖成弧形。4、在第二十帧处“插入帧 “5、选择图层 1 的第一帧，将“球“ 的中心点与引导线的端点重
23、合6、在图层 1 的第二十帧处，添加一关键帧，将“球“ 的中心点与引导线另一端点重合7、测试影片实例 2：地球绕太阳转1、将“地球”图片导入到场景，在场景中将“地球”图片转变成“图片元件” ，中心点为对象中心注册点。2、回到场景 1，画一个没有填充色的椭圆（作为轨迹线） ，在椭圆中间画一个圆。3、新建一个图层 2，将“库”面板中的“地球”元件拖到场景中。4、在图层 2 上新建一个引导线图层，将图层 1 中的轨迹线拷贝到引导线图层（作为地球运动的路径） ，用“橡皮”工具把路径线擦出一个缺口，在第30 帧处插入“帧” 。5、将图层 2 中的“地球”吸附在路径线上，将第一帧中的“地球”中心点放在缺口
24、的一个端点上；在第 30 帧处插入关键帧，将“地球”中心点放在缺口的另一个端点上。回到第 1 帧，设置“属性”中间区为“移动” 。6、将图层 1 的第三十帧处插入帧。7、测试影片。Ctrl+Enter五、实例：小球下落变成文字，文字滚动到一边步骤：A、背景图层的操作导入一幅背景图片，将大小调整到与舞台大小一样（“参照文档属性面板中的尺寸后，在图片属性中设置 W、H 的值）B、背景音乐的创建1、“ 文件 “-“导入“2、“ 导入 “对话框中，从 “查找范围“下拉列表框中选择一个声音，单击 “打开“按钮3、选择要插入声音的帧,在属性面板的“声音“ 位置选择插入的声音文件名 ,即可. C、图层 1
25、中操作：1、在“插入“-“新建元件“-对话框中选择“图形“-“ 确定“2、在“元件 1“中绘制一个圆形，没有边框线3、将元件 1 拖到工作区中，在图层 1 的第一帧将小圆球拖到右上方4、在第 10 帧处插入关键帧，在工作区将小球拖到下面，并用“自由转换“ 工具将小球放大5、选择第 1 帧，在属性面板中间选项选择“移动“6、在第 11 帧处插入关键帧，将小圆球进行分解，在第 20 帧处插入白色关键帧，输入文字，并调整文字的字体、字号、并打散（ctrl+b)7、选择第 11 帧处，在属性面板的中间选项选择“形状“8、在第 21 帧处插入关键帧，将打散的文字重新组合成群组（ctrl+g)9、在第 3
26、0 帧处插入关键帧，将文字移动到合适位置10、在第 21 帧处的属性面板中“中间“ 选项选择“移动“，在“ 旋转“选项中选择“顺时针“D、图层 2 中操作：11、新建一个图层，打开“窗口”-“库”面板，将元件 1 拖到工作区中，在图层 2 的第 1 帧将小圆球拖到右上方，与已经存在的图层 1 中的小圆球重合。12、第 30 帧处插入关键帧13、第 40 帧处插入关键帧，在工作区将小球拖到下面，并用“自由转换“ 工具将小球放大14、选择第 30 帧，在属性面板中间选项选择“移动“15、在第 41 帧处插入关键帧，将小圆球进行分解，在第 50 帧处插入白色关键帧，输入文字，并调整文字的字体、字号、
27、并打散16、选择第 41 帧处，在属性面板的中间选项选择“形状“17、在第 51 帧处插入关键帧，将打散的文字重新组合成群组（ctrl+g)18、在第 60 帧处插入关键帧，将文字移动到合适位置19、在图层 1 的第 60 帧处插入帧。20、按 CTRL+ENTER，进行测试E、按钮的制作 1、添加一个图层 3，画一个圆，将圆转换成按钮元件（用箭头工具选定所画的圆， “插入”“转换成元件” ） 。2、单击已转换成按钮的圆，使动作面板名称变为“动作按钮” ，打开动作面板，在 ActionsMoive control 中双击“stop ”命令，在模式区单击“on (release) ”这行语句，改
28、事件为 “点击” ，语句变为：（表示鼠标单击时，停止动作。 ）on (press) stop();2、添加一个图层 4，画一个圆，将圆转换成按钮元件（用箭头工具选定所画的圆， “插入”“转换成元件” ） 。2、单击已转换成按钮的圆，使动作面板名称变为“动作按钮” ，打开动作面板，在 ActionsMoive control 中双击“go and”命令，在模式区单击“转到并播放” ，设帧数为“10” ，单击“on (release) ”这行语句，改事件为“点击， ”，语句变为：（表示鼠标单击时，从第 10 帧开始运动。 ）on (press) gotoandplay(10);六、完成以下操作后存
29、盘并将作品发布为 Flash.swf 文件练习一：1、将图层 1 改成“引导线图层” ，在工作区画一条弧线。2、新建一层，在第一帧绘制矩形：宽 200，高 100，填充色RGBA（0，102，0，100%） ，边框线宽 4，边框色RGBA（0，0，0，100%） ，将其转换为图形元件 mm（以左上角为对象中心注册点） ；3、在第 36 插入关键帧；在第一帧设置动作渐变动画，按第一层给定的引导线设置运动路径（不能修改引导线） ，设置吸附作用，并且在第一帧拖动 mm使 mm 的中心点吸附到引导线的左端点，在第 36 帧拖动 mm 使 mm 的中心点吸附到引导线的右端点上。练习二：1、新建一层，在第
30、一帧输入一行静态文字：“湖南省教育厅” ，字体：宋体，字号：28，斜体加粗，颜色 RGBA（140，160，0，100%） 。将文字转换为图形元件 mm（以中心点为对象中心注册点） ，位置设为（左上角X：50，Y：50） ；在第 36 帧插入关键帧，设置第一帧渐变方式为：动作渐变。2、新建一层，在第一帧绘制矩形：宽 200，高 150，填充色RGBA（20，150，200，100%） ，边框色 RGBA（0，60，125，100%） ，框选矩形（包括填充及边框） ，将其位置设为（左上角 X：60，Y：150） ；删除矩形边框；在第 38 帧建立一空白关键帧，绘制一椭圆：宽 150，高100，填
31、充色 RGBA（0，0，200，100%） ，边框无，位置设为（左上角X：50，Y：50） ；设置第一帧为形状渐变动画3、设置第 38 帧帧动作：gotoAndStop(10);练习 3：1、新建一层，导入 test.wav 声音文件。2、新建一层，在第一帧导入一幅图片，将图片转换为图形（Graphics）元件mm（以左上角为对象中心注册点） ，设置 mm 第一帧置（左上角X：100，Y：20） ，无缩放、无旋转；在第 25 帧插入关键帧，将 mm 移到位置（左上角 X：320，Y：280） ，宽高均缩放为 30%，旋转 130 度；设置第 1 帧动作渐变动画，旋转方式：顺时针，1 次。4、新建一层,画一图形（大小，形状不限） ，将所画图形转换成按钮元件 mn，设置按钮动作为： getURL(“http:/“);
