网页编辑ppt课件.ppt

第九章网页制作,1,本章内容,9.1HTML概述,9.2FrontPage2003及应用,2,9.1HTML概述,HTML简介HTML即超文本标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本、写字板）编写。,3,9.1HTML概述,HTML文件结构,4,9.1HTML概述,1、HTML文件的三个基本特征文件扩展名为htm或htmlHTML文件由标记命令和文本组成文本内容标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。文件中含有热点文本,5,FrontPage基础,自定义浏览器分辨率预览检查描摹图像层功能行为的应用使用网页重定向检查页面错误插入交互式按钮优化HTML代码,6,FrontPage2003中的视图,FrontPage2003提供了以下几种视图以方便用户对站点的管理，用户可以在不同的视图中进行相应的操作。,FrontPage提供了7种视图模式,7,FrontPage2003中的视图,网页视图：创建、编辑、预览网页文件夹视图：创建、移动和删除文件和文件夹报表视图：了解站点的文件内容、更新链接情况、组建错误、所有文件列表及变化情况等信息导航视图：以层次结构图形式显示了站点的链接结构超链接视图：表示了各个网页间的链接关系任务视图：创建和管理任务远程网站视图（2003特有）：发布网站,8,网页制作,创建站点网页编辑插入对象创建超链接,9,创建站点,使用FrontPage2003的模板和向导，用户可以轻松地创建出各种用途和风格的站点。新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。,10,创建站点,该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹images，你可以打开index.htm进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。,放置不能被站点访问者查看的用户文件,放置站点中使用的图片文件,站点主页,11,新建网页,要根据“网页模板”创建一个新的网页，可以按下面的步骤：（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中选择所需的网页模板，可以在“说明”及“预览”区域查看该模板的说明及预览图。（3）单击“确定”按钮，系统新建一个基于所选模板的网页。（4）单击“文件”菜单，选择“保存”命令，弹出“另存为”对话框。在此对话框中，输入文件名进行保存。,12,打开网页,在FrontPage2003中，编辑某个网页之前，需要先打开该网页。打开网页的方法有多种，常用的有以下几种：（1）使用“文件”菜单的“打开”命令，或“常用”工具栏的“打开”按钮，在弹出的“打开文件”对话框中选择相应的网页；（2）如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际上，在其他视图中双击网页图标，同样会打开指定网页。,13,设置文字格式,设置文字格式的一般操作步骤是：选中文字，单击“格式”菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各种属性，也可以使用“格式”工具栏中相应的命令按钮。,格式,字体,14,设置段落格式,文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage2003通过按Enter键划分段落。如果只是需要换行，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是标记，而按Shift+Enter键则插入的是标记。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。,15,设置网页属性,网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用“文件”菜单的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令，FrontPage2003将显示“网页属性”对话框。,16,预览网页,方法1：使用预览视图方法2：文件菜单在浏览器中预览,17,插入对象,插入水平线插入图片插入字幕插入交互式按钮,18,插入水平线,水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；（2）单击“插入”菜单的“水平线”命令，插入水平线。要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。,19,插入图片,在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的设计中。GIF（GraphicalInterchangeFormat，图形交换格式）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图像包含的颜色不能超过256种。JPEG（JointPhotographExpertGroup，联合图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,20,插入图片,插入图片的步骤：移动光标至插入图像的位置；单击“插入”菜单的“图片”命令，在子菜单中选择“来自文件”，弹出“图片”对话框；利用“图片”对话框选取需要插入的图片文件，单击“插入”按钮，即可将图片插入网页中。设置图片属性在“图片属性”对话框的“外观”选项卡中，可以设置图片的环绕方式、布局、大小等。,21,插入字幕,在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下：将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮，“字幕属性”对话框。,插入,Web组件,22,插入交互式按钮,交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完成”按钮，打开对话框。,23,创建超链接,将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来。选定要定义超链接的文本或图片，从“插入”菜单中选择“超链接”命令，打开“插入超链接”对话框，在“插入超链接”对话框中选择要链接的目标网页，单击“确定”按钮。插入超链接后，文本为蓝色且带下划线。,24,使用书签,对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书签能够更严格地控制用户到达网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。单击书签超链接，将直接跳转到该书签所在的位置。,25,网页布局,网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般使用表格或框架来实现。,26,创建和使用表格,表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象。利用表格可以有条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。FrontPage2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和编辑表格。,27,创建和使用框架,框架的使用是进行网页布局设计的一种重要手段。框架将浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。,28,保存框架网页,保存框架网页需要保存框架和各个框架中的网页。框架网页并不包含内容，只记录了该框架网页包含几个框架、拆分方式以及每个框架中显示哪个网页。,29,删除框架,可以从框架结构中删除指定的框架。此时系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。删除了一个框架后，其余框架会加宽以填充删除框架留下的空间。若框架网页只有一个框架，则不能删除该框架。删除框架的具体操作方法是：选择要删除的框架，在“框架”菜单中选择“删除框架”命令。,30,创建表单页面,表单是Web服务器与客户交互的手段。表单的作用就是收集用户的输入信息，从而实现网站与用户的交互。表单作用：使Web服务器与客户进行交互。收集浏览者的输入信息，从而实现网站与浏览者的交互。表单组成表单由表单域组成，表单域是客户输入信息的区域。常用的表单域有；单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。,31,提交表单,用户结束表单操作后，单击“提交”按钮，当“提交”按钮设置了表单结果送至何处后可以正常处理。表单处理程序对表单的处理可以是将表单结果保存为文件，或将表单结果发送至一个电子邮件地址。在表单上单击鼠标右键，在弹出的右键菜单中选择“表单属性”命令，打开“表单属性”对话框。要使用FrontPage默认的表单处理程序，Web服务器必须安装FrontPage服务器扩展（FrontPageServerExtension），否则表单功能将不会产生任何效用。要将表单结果发送至电子邮件，还需