计算机第8章课件.ppt

《计算机第8章课件.ppt》由会员分享，可在线阅读，更多相关《计算机第8章课件.ppt（37页珍藏版）》请在三一办公上搜索。

1、第 八 章 网 页 制 作,第八章 网页制作,8.1 概述8.2 HTML简介 8.3 网页制作 8.4 网页布局 8.5 创建表单页面 8.6 网页的发布,8.1 概 述,8.1.1 网站8.1.2 服务器与浏览器8.1.3 网页8.1.4 网页制作工具8.1.5 网页设计的相关计算机语言,8.1.4 网页制作工具,1. 网页制作三剑客Dreamweaver、Flash、Fireworks被称为网页制作“三剑客” 。（1）Dreamweaver是美国著名的软件开发商Macromedia公司推出的一个所见即所得的可视化网站开发工具，该软件同时适用于初学者和专业网页设计师。 （2）Firewor

2、ks也是由Macromedia公司开发的一种工具，它以处理网页图片为特长，并可以轻松创造GIF动画。 （3）Flash是当今Internet最流行的动画作品的制作工具，并成为事实上的交互式矢量动画标准。,8.1.4 网页制作工具,2. Microsoft FrontPage 2003 FrontPage 2003是微软公司推出的Microsoft Office 2003家族的成员之一，与Office的其他组件高度融合，界面友好，功能强大，易学易用。FrontPage 2003的主要功能是设计、制作、管理网页或站点。,8.1.5 网页设计的相关计算机语言,1. HTML HTML是Hyperte

3、xt Markup Language的缩写，是WWW技术的基础，它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。 把用HTML语言编写的文件称为HTML文件，把HTML文档称为网页（Web Page）。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名。,8.1.5 网页设计的相关计算机语言,2. XML XML是Extensible Markup Language的缩写，中文名为可扩展标记语言。其主要用途是在Internet上传递或处理数据。XML与HTML不是并列的概念，它可以说是HTML的补丁，以弥补HT

4、ML的不足。比如，在HTML中不允许用户自定义控制标识符，而在XML中允许用户这样做。XML文件的扩展名为.xml。,8.1.5 网页设计的相关计算机语言,3. CSS CSS是Cascading Style Sheets的缩写，中文名为层叠样式表，主要用来对网页数据进行编排、格式化、显示、特效等。传统的HTML不能对网页数据进行随心所欲的格式化，而CSS语言却满足了这种要求，它对网页的特殊显示、特殊效果提供了很大的帮助。目前，大多数网页都用了CSS。,8.1.5 网页设计的相关计算机语言,4. DHTML DHTML是动态的HTML，这种技术要求网页具备动态功能，如动态交互、动态更新等。事实

5、上，这是要求我们应该掌握Web中所包含的对象、对象集，以及对象的属性、方法、事件等，然后用程序处理这些对象相关的属性、方法，让事件去完成一定的处理程序，以达到网页的动态效果。,8.1.5 网页设计的相关计算机语言,5. 脚本语言脚本（Script）语言是嵌入到HTML代码中的程序，根据运行的位置不同把它分为客户端脚本和服务器端脚本。客户端脚本是运行在客户端的程序，服务器端脚本是运行在服务器端的程序。这里所说的客户端指的是浏览器，服务器端指的是Web服务器。目前较为流行的脚本语言有JavaScript和VBScript。,8.2 HTML简介,HTML文件是一种纯文本文件，我们可以使用任何文本处

6、理软件（如记事本）来创建或处理HTML文件。 8.2.1 HTML语言概述 8.2.2 常用的HTML标记,8.2.1 HTML语言概述,HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）制定的，通过浏览http:/www.w3.org可以了解到HTML标准的最新动态。下面介绍HTML文件的基本构成和层次结构。,1. HTML文件标记Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：文本内容标记名

7、写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。,8.2.1 HTML语言概述,某些HTML标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大小、对齐方式等。属性一般放在“起始标记”中，格式如下： 文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分隔。,8.2.1 HTML语言概述,2. HTML网页的结构 现在我们先看一个简单的HTML文件，从中体会用HTML语言编写网页时的层次结构。 【例8-1】用HTML语言编写一个简单的网页。我的第一个Web页欢迎进入H

8、TML世界！这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用HTML语言编写您的Web页面。,8.2.1 HTML语言概述,将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。,图9-1,8.2.1 HTML语言概述,从上例可以看出，一般HTML文件都是以开头，以结束。其文件结构由以下两部分组成：1）头部（Head） HTML文件的头部由和标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。,8.2.

9、1 HTML语言概述,2）正文主体（Body） 正文主体是HTML文件的核心内容，由和标记定义。标记具有一些常用的属性，格式如下：其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式如下： HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。,8.2.1 HTML语言概述,8.2.2 常用的HTML标记,1. 文本布局1）段落标记标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是left、center、righ

10、t、justify，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下： 2）换行标记 标记可以强制文本换行。该标记只有起始标记。3）水平线标记水平线标记用于在网页中插入一条水平线。,2. 文字格式 HTML语言中用于文字格式化的标记有： 1）标题标记 格式为： 标题文字内容 其中n说明大小级别，取值范围为1到6的数字。把标题分为 6级，即h1h6，其中h1文字最大，h6文字最小。,2）字体标记 字体标记用来对文字格式进行设置，主要具有以下属性： （1）size属性：控制文字的大小，格式如下： 其中n的取值范围为17的数字，默认值为3。 标记和标记都可以控制文字的大小。一般情

11、况下，文章的标题最好由标记控制，而其余的文字由标记控制。相比较而言，对字体的控制更加灵活。 （2）color属性：控制文字的颜色，格式如下： 其中n是一个十六进制的六位数。（3）face属性：指明文字使用的字体，格式如下： 其中字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、Times New Roman、Arial等。,3）字形标记 字形标记用于设置文字的粗体、斜体、下划线、上标、下标等，如表所示：,3. 图片 标记将图片插入网页中，用于设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式如下： 其中URL

12、指图片文件存放的位置。（2）alt属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式如下： （3）width和height属性：设置图片显示区域的宽度和高度。格式如下： 其中width和height属性的取值n1和n2，可以是像素数或百分比。,（4）border属性：设置图片文件的边框。格式如下： 其中n为像素数。（5）align属性：设置图片相对于文本的位置关系。格式为： 对齐方式可以是：top（顶端对齐）、middle（相对垂直居中）、bottom（相对底边对齐）、left（左对齐）、right（右对齐）、texttop（文本上方）等。,4. 超链接 在HTML语言中

13、，和标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式如下： 超链接文本 用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。 若使用图片做超链接，可使用如下格式完成： ,5. 表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下： 定义表格区域。 定义表格标题。 定义表格头。 定义表格行。 定义表格单元格。,8.3 网 页 制 作,8.3.1 FrontPage 2003概述8.3.2 创建站点8.3.3 网页编辑8.3.4 插入对象8.3.5 创建超链接,8.3.

14、1 FrontPage 2003概述,FrontPage 2003可以按下列方法启动：单击“开始”按钮，在“开始”菜单中指向“程序”“Microsoft Office”“Microsoft Office FrontPage 2003”；通过创建FrontPage 2003的快捷方式启动。 FrontPage 2003的退出可以使用以下几种方式：选取“文件”菜单中的“退出”；单击窗口右上角的“关闭”按钮；按快捷键Alt+F4等。,8.3.1 FrontPage 2003概述,启动FrontPage 2003后，可以看到以下几种视图，用户可以在不同的视图中进行相应的操作。1. 网页视图网页视图是F

15、rontPage 2003中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的。FrontPage 2003提供了四种网页视图模式，即设计、拆分、代码、预览。 2. 文件夹视图文件夹视图用于管理文件和文件夹，使用它可以直接处理文件和文件夹以及组织网站内容。在此视图中，可以创建、删除、复制和移动文件夹，具体操作与在Windows资源管理器中类似。3. 远程网站视图远程网站视图用于站点和站点内文件的发布。在远程网站视图中查看文件时，文件将用图标和描述性文字进行标记以表示发布状态 。,8.3.1 FrontPage 2003概述,4. 报表视图报表视图用于查看站点的各种情况，如文

16、件内容、更新链接、文件列表及变化情况等。 5. 导航视图 利用导航视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可以设置站点的导航结构或添加、删除网页。6. 超链接视图超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。利用超链接视图可以管理站点中各个网页的超链接。7. 任务视图任务视图主要用于创建和管理任务。任务视图以列格式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。,8.3.4 插入对象,1.插入水平线 在网页中输入文本内容后，还可在不同的段落、行之间添加水平线，水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤

17、如下：（1）在准备插入水平线的位置设置插入点；（2）单击“插入”菜单的“水平线”命令，插入水平线。 要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。“宽度”框用于设置水平线的宽度，“高度”框用于设置水平线的高度，“对齐方式”用于设置水平线在网页内水平对齐的方式，“颜色”列表框用于设置水平线的颜色，选中“实线（无阴影）”复选框时，水平线将被设成实心线。要为线条指定自定义样式或其他格式，可以使用“样式”按钮进行设置。,返 回,8.3.4 插入对象,2. 插入图片 图片可以使网页变得生动活泼，并能吸引用户的注意。1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都

18、是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的设计中。GIF（Graphical Interchange Format，图形交换格式）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图像包含的颜色不能超过256种。JPEG（Joint Photograph Expert Group，联合图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2. 插入图片,2）插入图片和设置图片属性（方法同Word）3）编辑图片 利

19、用“图片”工具栏能够完成一些常用的图像编辑功能。4）保存图片 插入图片后保存网页，如果图片不在网站文件夹中，将出现“保存嵌入式文件”对话框。如果图片在网站文件夹中，就不会出现此对话框。,8.3.4 插入对象,3. 插入字幕 在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下： （1）将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮， 打开“字幕属性”对话框

20、。,（2）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。（3）“方向”区域用于指定文本的移动方向。“速度”区域用于指定文字的滚动速度，“延迟”框中的数值表示字幕滚动一步的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步的距离是多少像素。“表现方式”区域用于指定文字的表现方式。选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若要设置字幕滚动有限次，可以取消选中“连续”复选框并输入字幕重复的次数。“背景色”列表框用于设置移动字幕的背景颜色。“大小”区域用于设置字幕的宽度与高度。（4）单击“确定”按钮，即可插入字

21、幕。,3. 插入字幕,8.3.4 插入对象,4. 插入交互式按钮 交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。（1）将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完成”按钮，打开“交互式按钮”属性对话框。（2）设置按钮字体图像（3）单击“确定”按钮，即可插入交互式按钮。,8.3.4 插入对象,5. 插入站点计数器 （1）单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“计数器”，在“选择计数器样式”列表中选择一种样式，单击“完成”按钮，打开“计数器属性”对话框； （2）设置计数器属性； （3）单击“确定”按钮，插入站点计数器。,返 回,