大学计算机基础 第9章.ppt

1、第9章web制作，2020/7/27，1，电脑文化基础，第9章web制作，9.1 HTML介绍9.2 FrontPage 2003概述9.3 web制作9.4 web布局9.5西餐页面9.6网页制作，2020/7/220几个茄子常见标签(我们将使用HTML语言编写的文件称为HTML文件。通常存储在web服务器上。客户端通过浏览器向web服务器发送请求，服务器响应请求，并将HTML文件发送到浏览器。浏览器然后正确解释文件中的标记，并在用户屏幕上将其显示为页面。所以我们把HTML文档称为网页(网页)。2020/7/27，3，电脑文化基础，9.1 HTML介绍，HTML语言是容易学习的标记语言。以H

2、tmL语言编写的网页实际上是。HTM或.使用html扩展名的文本文件，可以使用任何文本处理软件(如记事本)创建。9.1.1 HTML语言概述9.1.2 HTML语言的基本语法、返回、2020/7/27，4、电脑文化基础、9.1.1 HTML语言概述、HTML语言是全球标准化组织W3C。以下是HTML文件的基本编写和HTML文件层次结构的说明：2020/7/27，5，电脑文化基础，1。HTML文件的默认配置internet上的每个HTML文件都包含文本内容和HTML标记部分。其中HTML标签控制文本显示的外观和布局，并指定链接到浏览器的各种图像、声音和其它对象的位置。大多数HTML标签都是以下列

3、格式编写的：文本内容标记名称记录在“”中。大多数HTML标签都有开始和结束标签，并且成对出现，但是有些HTML标签没有结束标签。此外，HTML标签不区分大小写。HTML文件的基本配置、2020/7/27，6、电脑文化的基础、某些HTML标记还具有用于指定对象特征(如背景颜色、文本字体和大小、对齐等)的属性。属性通常以标签名称和属性以空格分隔的文本内容的格式放置在开始标签中。如果标记具有多个属性，则属性也必须用空格分隔。HTML文件的基本配置，2020/7/27，7，电脑文化基础，2。HTML页面的结构现在让我们看一下简单的HTML文件。让我们体验用HTML语言构建网页时的层次结构。示例9-1使

4、用HTML语言创建简单的网页。我的第一个网页欢迎来到HTML世界！首先，我将介绍HTML语言的基本知识和语法。然后说明如何使用HTML语言创建网页。2020/7/27，8，电脑文化基础，htmL语言概述，使用文本编辑器编辑以上代码，扩展名为.保存为HTM文件，然后双击档案图标，浏览器将显示如下图所示的结果。图9-1，2020/7/27，9，基于电脑文化，如上例所示，常规HTML文件以开始和结束。档案结构由1)头(头)HTML文件的头和标记定义。文件的标题、语言字符集信息等通常放在标题信息中。最常用的标签用于定义web文件的标题；打开web文件时，web文件的标题显示在浏览器的标题栏中。2020

5、/7/27，10，电脑文化基础，档案结构，2)正文主体(Body)正文主体是HTML文件的核心内容，由和标记定义。标签具有数个茄子一般属性，格式如下：其中bgcolor是背景色，color是文本颜色。n是6位数的十六进制数。如果网页使用背景图像，则格式如下：HTML的格式要求不严格，当在浏览器中扫描HTML文件时，文件中包含的所有空格、回车符等都将被忽略。因此，可以将一行写为两行或更多行。浏览器中的结果相同。，返回，2020/7/27，11，电脑文化基础，9.1.2 HTML语言的基本语法，1。文本布局1)段落标记指定文档中的各个段落。设定Align属性以控制段落的对齐方式。left、cent

6、er、right和justify值分别表示左对齐、居中对齐、右对齐和对齐，默认值为左对齐。使用以下格式：2)可以使用换行符强制文本换行。牙齿标记只有开始标记。3)水平线标记水平线标记用于在网页上插入水平线。2020/7/27，12，电脑文化基础，2。字符格式HTML语言的字符格式标记如下：1)标题标记格式如下：标题文字内容，其中N表示大小级别，值的范围是1到6之间的数字。将标题分为6级，即h1h6。其中h1字符最大，h6字符最小。2020/7/27，13，基于电脑文化，2)字体标记字体标记用于格式化字符，主要是(1)大小属性：用于控制字符大小的格式为：其中n是值范围为17的数字，默认值为3。标

7、记和标记都调整文字大小。一般来说，文章的标题最好由标签控制。其馀字符由标记控制。比较起来，对字体的控制更灵活。(2)color属性：用于按以下格式控制文字的颜色：其中n是十六进制的六位数字。(3)face属性：用于表示文本中使用的字体，格式如下：此处的字体名称选择由Windows操作系统上安装的字体决定。例如，宋体、楷体_GB2312、Times New Roman、Arial等。字符格式，2020/7/27，14，基于电脑文化，3)字形标记字形标记用于设置字符的粗体、斜体、下划线、上标、下标等。文字格式，2020/7/27，15，电脑文化基础，3。插入图片显示以在网页上插入图片，设置图片大小

8、和相邻字符的数组。标记具有以下属性：(1)src属性：指示图片文件所在的位置。格式如下：其中URL是图片文件的存储位置。(2)alt属性：插图的文本说明。当鼠标指针指向图片时，会弹出图片的说明文本。格式如下：(3)width和height属性：设置图片显示区域的宽度和高度。格式如下：其中width和height属性的值n1和N2可以是像素数或百分比。2020/7/27，16，电脑文化基础，(4)border属性：设置图片文件的边框。格式如下：其中n是像素数。(5)align属性：相对于文本设置图片的位置关系。格式包括顶部(顶部对齐)、middle(相对垂直居中)、bottom(相对底部对齐)、

9、left(左对齐)、right(右对齐)、texttop、插入图片、2022000000在HTML语言中插入超连结，在网页中设置超链接的标签，href属性指示超链接的档案地址。格式如下：超连结文本用于表示超链接的文本通常显示为蓝色，并带有下划线。在浏览器中，当鼠标指针指向文本时，箭头变为手形，浏览器的状态栏中显示超连结地址。如果将图片用作超链接，则为2020/7/27，18，电脑文化基础，5。使用表格在网页中插入表格需要一组HTML标签。表格定义的标签如下：定义表格空间。定义表格标题。定义标题。定义表格列。定义表格储存格。返回，2020/7/27，19，基于电脑文化，常用标记属性中的borde

10、r属性用于设置表边框的宽度。Width、height属性设置表格或单元格的宽度和高度。Cellspacing和cellpadding属性分别用于设置单元格之间的间距和单元格内的空格。Align属性设置表或单元格的对齐方式。Bgcolor和background属性分别设置表格的背景颜色和背景图像。，表格属性，2020/7/27，20，基于电脑文化，9.2 FrontPage 2003概述，使用纯文本编辑器编写HTML文档，但是使用特殊的HTML编辑器或web创作工具会更方便。具有Wysiwyg what-is-you-get功能的网页创作工具使web创作者可以直接编辑和修改web页，并且可以立即

11、看到web页的外观。FrontPage 2003是Microsoft Office 2003牙齿开发的web创作和web网站管理工具，它是Microsoft Office 2003的组件之一，与Office的其他组件高度融合，界面友好、强大、易于学习，并且是当前流行的web创作和web网站管理，2020/7/27，21，电脑文化基础，9.2 FrontPage 2003概述，9.2.1 FrontPage 2003的主要功能9.2.2 FrontPage 2003的开始和结束9.2.3页和网站9.2.4 FrontPage 2003FrontPage 2003不仅可以直接修改HTML，还可以“

12、如所见”编辑网页，还提供了多种方法，用于使用菜单命令插入各种网页元素，以及使用对话框修改属性。返回，2020/7/27，23，基于电脑文化，FrontPage 2003允许轻松插入文本、图片、表格、组件等。您可以使用主题和样式表、孔刘边框、框架等管理网页的外观。您也可以使用元素(如表单)设计交互式网页。FrontPage 2003提供强大的网站管理功能。相关网页和相关档案组构成了站点，站点是管理FrontPage 2003中网站的基本单位。FrontPage 2003使您可以轻松地设计、管理、分析、发布和维护网站。FrontPage 2003的主要功能，2020/7/27，24，基于电脑文化，

13、9.2.3网页和web网站，网页是全球广域网的基本文档，通常用HTML编写。htm或.用html编写的主页可以独立存在，但往往是网站的一部分。网站是相关网页和相关文件的组合，通常有一个称为“主页”(Homepage)的特殊网页，它引导用户访问其他网页。网站通常位于web服务器上，客户端通过网络向web服务器发送请求，web服务器响应客户端的请求，然后使用HTTP协议将web页和相关文件通过网络发回客户端。客户端可以使用web浏览器查看网页的内容。2020/7/27，25，基于电脑文化、web和web网站，FrontPage 2003允许您创建和编辑独立的网页，还允许您设计和管理站点。站点可以包

14、含大量的网页和各种档案，甚至是子站点，FrontPage 2003中的许多功能只有在使用站点时才有效。通常，在FrontPage 2003中设置的站点发布到internet的web服务器上，成为真正的web站点后，网络用户才能访问。在某些情况下，可以在同一台计算机上安装web服务器端软件，以便在本地发布站点进行测试。使用FrontPage 2003，还可以构建作为默认文件夹存在的基于本地硬盘驱动器的站点，而无需发布到服务器。如果是牙齿，则需要服务器支持的功能不可用。返回，2020/7/27，26，基于电脑文化，9.2.4 FrontPage 2003的web查看模式，FrontPage 200

15、3提供了四种茄子web查看模式。设计视图是打开web页的第一个输入视图，您可以在其中输入文本，在代码视图中，用户可以查看、创建和编辑HTML标签。在预览视图中，可以大致查看网页在web浏览器中的显示方式。FrontPage 2003中新的拆分视图将窗口工作区拆分为两个部分：顶部和底部。上半部分是代码区域，下半部分是设计区域。变更任何区域都会相应地变更其他区域。返回，2020/7/27，27，基于电脑文化，9.2.5 FrontPage 2003中的视图，FrontPage 2003提供了以下视图，以便用户可以轻松管理站点，用户可以在各种视图中执行相应的任务。1.查看网页2。查看文件夹3。查看远

16、程网站4。查看报告5。导航视图6。查看超连结7。查看工作，2020/7/27，28，电脑文化基础，9.3 web制作，web网站开发，首先要相应地做，那么什么是“网站”？实际上，站点是相关网页和其他文件的集合，它们在internet上以称为“网站”的完整结构出现。在FrontPage 2003中，站点存储在特殊文件夹中。2020/7/27，29，基于电脑文化，9.3 web创作，创建9.3.1网站9.3.2网页剪辑9.3.3插入对象9.3.4超连结创建，返回，200创建新站点时，您可以根据需要选择其他模板和向导。根据模板和向导的不同，创建新站点的步骤略有不同。下面以“由一个网页组成的网站”模板为例，