计算机基础知识第八版教材课件第8章.ppt
《计算机基础知识第八版教材课件第8章.ppt》由会员分享,可在线阅读,更多相关《计算机基础知识第八版教材课件第8章.ppt(98页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第 八八 章章 网网 页页 制制 作作 大学IT 目 录上一页下一页 结 束第八章 网页制作8.1 概述概述8.2 HTML简介简介 8.3 网页制作网页制作 8.4 网页布局网页布局 8.5 创建表单页面创建表单页面 8.6 网页的发布网页的发布 5/26/20231大学IT 目 录上一页下一页 结 束8.1 8.1 概概 述述8.1.1 网站网站8.1.2 服务器与浏览器服务器与浏览器8.1.3 网页网页8.1.4 网页制作工具网页制作工具8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言5/26/20232大学IT 目 录上一页下一页 结 束8.1.1 网站网站 网网站站是是
2、一一组组相相关关网网页页和和有有关关文文件件的的集集合合,一一般般有有一一个个特特殊殊的的网网页页作作为为浏浏览览的的起起始始点点,称称为为主主页页(Homepage),用用来来引引导导用用户户访访问问其其他网页。他网页。网网站站中中的的内内容容通通常常包包括括网网页页和和相相关关的的文文件件,一一般般被被存存储储在在同同一一个个目目录录中中,并并根根据据网网站站栏栏目目或或资资源源类类型型进进行行分分类类,分分别别存存放放在在不不同同的的子子目目录录中中。本本地地网网站站在在制制作作完完成成后后,不不经经过过发发布布是是不不能能被被其其他他浏浏览览者者访访问问的的。发发布布就就是是将将本本地
3、地网网站站的的内内容容传传输输到到连连接接Internet的的Web服服务务器上。网站发布后,即获得一个网站地址。器上。网站发布后,即获得一个网站地址。5/26/20233大学IT 目 录上一页下一页 结 束8.1.2 服务器与浏览器服务器与浏览器 网网站站通通常常位位于于Web服服务务器器上上,Web服服务务器器又又称称WWW服服务务器器、网网站站服服务务器器或或站站点点服服务务器器。从从本本质质上上讲讲,Web服服务务器器就就是是一一个个软软件件系系统统,它它通通过过网网络络接接收收HTTP请请求求,然然后后提提供供HTTP响响应应给给请请求求者者。HTTP响响应应一一般般包包含含一一个个
4、HTML文文件件,但但也也可可以以包包含含文文本本文文件件、图图像像或或其其他他类类型型的的文文件件。要要使使一一台台计计算算机机成成为为一一台台Web服务器,就需要安装专门的服务程序服务器,就需要安装专门的服务程序。要要浏浏览览Web页页面面,必必须须在在本本地地计计算算机机上上安安装装浏浏览览器器软软件件。浏浏览览器器就就是是Web客客户户端端,它它是是一一个个应应用用程程序序,用用于于与与Web服服务务器器建建立连接,并与之进行通信。立连接,并与之进行通信。浏浏览览器器和和服服务务器器之之间间通通过过超超文文本本传传送送协协议议(HyperText Transfer Protocol,H
5、TTP)进行通信。)进行通信。5/26/20234大学IT 目 录上一页下一页 结 束8.1.3 网页网页 网网页页一一般般又又称称为为HTML文文件件,是是一一种种可可以以在在WWW上上传传输输,能能被被浏浏览览器器认认识识和和翻翻译译成成页页面面并并显显示示出出来来的的文文件件。通通常常用用户户看看到到的的网网页页大大多多是是以以.htm和和.html为为扩扩展展名名的的文件。文件。5/26/20235大学IT 目 录上一页下一页 结 束8.1.3 网页网页1.网页内容网页内容 一一般般来来说说,网网页页主主要要由由文文字字、图图片片、动动画画、超超链接和特殊组件等元素构成。链接和特殊组件
6、等元素构成。2.静态网页和动态网页静态网页和动态网页 根根据据网网页页的的生生成成方方式式,大大致致可可以以分分为为静静态态网网页页和动态网页两种。和动态网页两种。5/26/20236大学IT 目 录上一页下一页 结 束8.1.4 网页制作工具网页制作工具1.网页制作三剑客网页制作三剑客Dreamweaver、Flash、Fireworks被被称称为为网网页页制制作作“三三剑剑客客”。(1)Dreamweaver是是美美国国著著名名的的软软件件开开发发商商Macromedia公公司司推推出出的的一一个个所所见见即即所所得得的的可可视视化化网网站站开开发发工工具具,该该软软件件同同时时适用于初学
7、者和专业网页设计师。适用于初学者和专业网页设计师。(2)Fireworks也也是是由由Macromedia公公司司开开发发的的一一种种工工具具,它它以以处理网页图片为特长,并可以轻松创造处理网页图片为特长,并可以轻松创造GIF动画。动画。(3)Flash是是当当今今Internet最最流流行行的的动动画画作作品品的的制制作作工工具具,并并成成为事实上的交互式矢量动画标准。为事实上的交互式矢量动画标准。5/26/20237大学IT 目 录上一页下一页 结 束8.1.4 网页制作工具网页制作工具2.Microsoft FrontPage 2003 FrontPage 2003是是微微软软公公司司推
8、推出出的的Microsoft Office 2003家家族族的的成成员员之之一一,与与Office的的其其他他组组件件高高度度融融合合,界界面面友友好好,功功能能强强大大,易易学学易易用用。FrontPage 2003的的主主要要功功能能是是设设计计、制制作作、管管理理网网页或站点。页或站点。5/26/20238大学IT 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言1.HTML HTML是是Hypertext Markup Language的的缩缩写写,是是WWW技技术术的的基基础础,它它使使用用一一些些约约定定的的标标记记(Tag)对对文文本本进进行
9、行标标注注,定定义义网网页页的的数数据据格格式式,描述描述Web页中的信息,控制文本的显示。页中的信息,控制文本的显示。我我们们把把用用HTML语语言言编编写写的的文文件件称称为为HTML文文件件,把把HTML文文档档称称为为网网页页(Web Page)。用用HTML语语言言编编写写的的网网页页实实际际上上是是一一种种文文本本文文件件,它它以以.htm或或.html为扩展名。为扩展名。5/26/20239大学IT 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言2.XML XML是是Extensible Markup Language的缩写,的缩写,中文名
10、为可扩展标记语言。其主要用途是在中文名为可扩展标记语言。其主要用途是在Internet上传递或处理数据。上传递或处理数据。XML与与HTML不是并不是并列的概念,它可以说是列的概念,它可以说是HTML的补丁,以弥补的补丁,以弥补HTML的不足。比如,在的不足。比如,在HTML中不允许用户自中不允许用户自定义控制标识符,而在定义控制标识符,而在XML中允许用户这样做。中允许用户这样做。XML文件的扩展名为文件的扩展名为.xml。5/26/202310大学IT 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言3.CSS CSS是是Cascading Style
11、 Sheets的的缩缩写写,中中文文名名为为层层叠叠样样式式表表,主主要要用用来来对对网网页页数数据据进进行行编编排排、格格式式化化、显显示示、特特效效等等。传传统统的的HTML不不能能对对网网页页数数据据进进行行随随心心所所欲欲的的格格式式化化,而而CSS语语言言却却满满足足了了这这种种要要求求,它它对对网网页页的的特特殊殊显显示示、特特殊殊效效果果提提供了很大的帮助。目前,大多数网页都用了供了很大的帮助。目前,大多数网页都用了CSS。5/26/202311大学IT 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言4.DHTML DHTML是是动动态态的
12、的HTML,这这种种技技术术要要求求网网页页具具备备动动态态功功能能,如如动动态态交交互互、动动态态更更新新等等。事事实实上上,这这是是要要求求我我们们应应该该掌掌握握Web中中所所包包含含的的对对象象、对对象象集集,以以及及对对象象的的属属性性、方方法法、事事件件等等,然然后后用用程程序序处处理理这这些些对对象象相相关关的的属属性性、方方法法,让让事事件件去去完完成成一一定定的的处处理理程程序序,以以达达到到网网页页的的动动态态效果。效果。5/26/202312大学IT 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言5.脚本语言脚本语言 脚脚本本(Sc
13、ript)语语言言是是嵌嵌入入到到HTML代代码码中中的的程程序序,根根据据运运行行的的位位置置不不同同把把它它分分为为客客户户端端脚脚本本和和服服务务器器端端脚脚本本。客客户户端端脚脚本本是是运运行行在在客客户户端端的的程程序序,服服务务器器端端脚脚本本是是运运行行在在服服务务器器端端的的程程序序。这这里里所所说说的的客客户户端端指指的的是是浏浏览览器器,服服务务器器端端指指的的是是Web服服务务器。器。目目前前较较为为流流行行的的脚脚本本语语言言有有JavaScript和和VBScript。5/26/202313大学IT 目 录上一页下一页 结 束8.2 HTML简介简介 HTML文文件件
14、是是一一种种纯纯文文本本文文件件,我我们们可可以以使使用用任任何何文文本本处处理理软软件件(如如记记事事本本)来来创创建建或或处处理理HTML文件。文件。8.2.1 HTML语言概述语言概述 8.2.2 常用的常用的HTML标记标记5/26/202314大学IT 目 录上一页下一页 结 束8.2.1 HTML语言概述HTML语语 言言 是是 由由 世世 界界 性性 的的 标标 准准 化化 组组 织织W3C(World Wide Web Consortium)制制定定的的,通过浏览可以了解到通过浏览可以了解到HTML标准的最新动态。标准的最新动态。下面介绍下面介绍HTML文件的基本构成和层次结构
15、。文件的基本构成和层次结构。5/26/202315大学IT 目 录上一页下一页 结 束1.HTML文件标记文件标记Internet中中的的每每一一个个HTML文文件件都都包包括括文文本本内内容容和和HTML标标记记两两部部分分。其其中中,HTML标标记记负负责责控控制制文文本本显显示示的的外外观观和和版版式式,并并为为浏浏览览器器指指定定各各种种链链接接的的图图像像、声声音音和和其其他他对对象象的的位位置置。多多数数HTML标记的书写格式如下:标记的书写格式如下:文本内容文本内容标标记记名名写写在在“”内内。多多数数HTML标标记记同同时时具具有有起起始始和和结结束束标标记记,并并且且成成对对
16、出出现现,但但也也有有些些HTML标标记记没没有有结结束束标标记记。另另外外,HTML标标记记不不区分大小写。区分大小写。8.2.1 HTML语言概述语言概述5/26/202316大学IT 目 录上一页下一页 结 束 某某些些HTML标标记记还还具具有有一一些些属属性性,这这些些属属性性指指定定对对象象的的特特性性,如如背背景景颜颜色色、文文本本字字体体及及大大小小、对对齐齐方方式等。属性一般放在式等。属性一般放在“起始标记起始标记”中,格式如下:中,格式如下:文文本本内内容容 其其中中标标记记名名和和属属性性之之间间用用空空格格分分隔隔。如如果果标标记记有有多种属性,属性之间也要用空格分隔。
17、多种属性,属性之间也要用空格分隔。8.2.1 HTML语言概述语言概述5/26/202317大学IT 目 录上一页下一页 结 束2.HTML网页的结构网页的结构 现现在在我我们们先先看看一一个个简简单单的的HTML文文件件,从从中中体体会会用用HTML语言编写网页时的层次结构。语言编写网页时的层次结构。【例【例8-1】用】用HTML语言编写一个简单的网页。语言编写一个简单的网页。我的第一个我的第一个Web页页欢迎进入欢迎进入HTML世界!世界!这这里里我我们们首首先先介介绍绍HTML语语言言的的基基本本知知识识和和语语法法。然然后后,讲讲授授如如何何使使用用HTML语语言言编编写写您您的的We
18、b页页面面。8.2.1 HTML语言概述语言概述5/26/202318大学IT 目 录上一页下一页 结 束 将将上上述述代代码码用用文文本本编编辑辑器器编编辑辑并并保保存存为为一一个个扩扩展展名名为为.htm的的文文件件,双双击击该该文文件件图图标标,在在浏浏览览器器中看到如下图所示的结果。中看到如下图所示的结果。图9-18.2.1 HTML语言概述语言概述5/26/202319大学IT 目 录上一页下一页 结 束 从从上上例例可可以以看看出出,一一般般HTML文文件件都都是是以以开开头头,以以结结束束。其其文文件件结结构构由由以以下下两部分组成:两部分组成:1)头部()头部(Head)HTM
19、L文文件件的的头头部部由由和和标标记记定定义义。通通常常情情况况下下,文文件件的的标标题题、语语言言字字符符集集信信息息等等 都都 放放 在在 头头 部部 信信 息息 中中。最最 常常 用用 到到 的的 标标 记记 是是,它它用用于于定定义义网网页页文文件件的的标标题题,当当该该网网页页文文件件被被打打开开后后,网网页页文文件件的的标标题题将将出出现现在浏览器的标题栏中。在浏览器的标题栏中。8.2.1 HTML语言概述语言概述5/26/202320大学IT 目 录上一页下一页 结 束2)正文主体()正文主体(Body)正正文文主主体体是是HTML文文件件的的核核心心内内容容,由由和和标标记记定
20、定义义。标标记记具具有有一一些些常常用用的的属属性性,格式如下:格式如下:其其中中,bgcolor为为背背景景颜颜色色,color为为文文本本颜颜色色。n为为六六位十六进制数。位十六进制数。如果网页使用背景图像,格式如下:如果网页使用背景图像,格式如下:HTML对对格格式式的的要要求求并并不不严严格格,当当HTML文文件件被被浏浏览览器器扫扫描描时时,所所有有包包含含在在文文件件中中的的空空格格、回回车车等等均均被被忽忽略略。因因此此你你可可以以将将一一行行写写成成两两行行或或多多行行,在在浏浏览览器中结果是相同的。器中结果是相同的。返 回8.2.1 HTML语言概述语言概述5/26/2023
21、21大学IT 目 录上一页下一页 结 束8.2.2 常用的常用的HTML标记标记1.文本布局文本布局1)段落标记)段落标记标标记记指指定定文文档档中中一一个个独独立立的的段段落落。通通过过设设置置align属属性性,控控制制段段落落的的对对齐齐方方式式,其其值值可可以以是是left、center、right、justify,分分别别表表示示左左对对齐齐、居居中中、右右对对齐和两端对齐,默认值为左对齐。齐和两端对齐,默认值为左对齐。使用格式如下:使用格式如下:2)换行标记)换行标记 标记可以强制文本换行。该标记只有起始标记。标记可以强制文本换行。该标记只有起始标记。3)水平线标记)水平线标记水平
22、线标记水平线标记用于在网页中插入一条水平线。用于在网页中插入一条水平线。5/26/202322大学IT 目 录上一页下一页 结 束2.文字格式文字格式 HTML语言中用于文字格式化的标记有:语言中用于文字格式化的标记有:1)标题标记)标题标记 格式为:格式为:标题文字内容标题文字内容 其其中中n说说明明大大小小级级别别,取取值值范范围围为为1到到6的的数数字字。把把标标题题分分为为 6级级,即即h1h6,其其中中h1文文字字最最大大,h6文文字最小。字最小。5/26/202323大学IT 目 录上一页下一页 结 束2)字体标记)字体标记 字体标记用来对文字格式进行设置,主要具有以下属性:字体标
23、记用来对文字格式进行设置,主要具有以下属性:(1)size属性:控制文字的大小,格式如下:属性:控制文字的大小,格式如下:其中其中n的取值范围为的取值范围为17的数字,默认值为的数字,默认值为3。标标记记和和标标记记都都可可以以控控制制文文字字的的大大小小。一一般般情情况况下下,文文章章的的标标题题最最好好由由标标记记控控制制,而而其其余余的的文文字字由由标标记控制。相比较而言,记控制。相比较而言,对字体的控制更加灵活。对字体的控制更加灵活。(2)color属性:控制文字的颜色,格式如下:属性:控制文字的颜色,格式如下:其中其中n是一个十六进制的六位数。是一个十六进制的六位数。(3)face属
24、性:指明文字使用的字体,格式如下:属性:指明文字使用的字体,格式如下:其中字体名的选择由其中字体名的选择由Windows操作系统安装的字体决定。如:操作系统安装的字体决定。如:宋体、楷体宋体、楷体_GB2312、Times New Roman、Arial等。等。5/26/202324大学IT 目 录上一页下一页 结 束3)字形标记)字形标记 字字形形标标记记用用于于设设置置文文字字的的粗粗体体、斜斜体体、下划线、上标、下标等,如表所示:下划线、上标、下标等,如表所示:标记格式标记格式字形字形粗体粗体斜体斜体下划线下划线上标上标下标下标5/26/202325大学IT 目 录上一页下一页 结 束3
25、.图片图片 标标记记将将图图片片插插入入网网页页中中,用用于于设设置置图图片片的的大大小小以以及及相邻文字的排列方式。该标记具有以下属性:相邻文字的排列方式。该标记具有以下属性:(1)src属性:指明图片文件所在的位置。格式如下:属性:指明图片文件所在的位置。格式如下:其中其中URL指图片文件存放的位置。指图片文件存放的位置。(2)alt属属性性:图图片片的的文文字字说说明明,当当鼠鼠标标指指针针指指向向图图片片时时,该图片的说明性文字弹出。格式如下:该图片的说明性文字弹出。格式如下:(3)width和和height属属性性:设设置置图图片片显显示示区区域域的的宽宽度度和和高高度度。格式如下:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 计算机基础知识 第八 教材 课件
限制150内