网页设计PPT课件-第1章.ppt
《网页设计PPT课件-第1章.ppt》由会员分享,可在线阅读,更多相关《网页设计PPT课件-第1章.ppt(29页珍藏版)》请在三一办公上搜索。
1、网页设计,目 录,第1章 HTML基础第2章 列表、图像及超链接 第3章 表格、表单及框架 第4章 CSS 第5章 网页制作技术进阶,课件下载,第1章 HTML基础,1.1 HTML 概述 1.2 页面颜色控制1.3 文本段落控制1.4 文字格式控制,如今,公司、企业和个人都在建设自己的Web站点,编写自己的Web网页,HTML正是创建网页的基础语言。HTML是英文Hyper Text Markup Language的缩写,意为超文本标记语言,是一种用来编写超文本文档的简单标记语言。用HTML编写超文本文档称为HTML文档,它用于描述网页内容的排版、显示方式,最后要通过WWW浏览器显示出来,就
2、是我们看到的网页。所谓超文本是指文档中还可以有图片、声音、动画、影视等内容。HTML带来了超链接的技术,即浏览网页时通过单击鼠标可以从一个主题跳转到另一个主题,从一个页面跳转到另一个页面,从而可以与世界各地主机文件链接,直接获取相关主题。,HTML的具体功能:1格式化文本。如设置文本的对齐方式、字体、颜色等。2建立超链接。鼠标点击获得指定的目标;设置超链接样式等。3建立列表。以列表方式显示信息,方便阅读。4插入图形。如设置图像的样式(如大小、边框、布局等)。5建立表格。6加入表单、控键等。这是客户与网页交互的主要渠道。7加入多媒体。如声音、视频、动画。,1.1.1 HTML的功能,1.1 HT
3、ML概述,1.1.2 创建一个简单的HTML页面,创建HTML文档可以使用熟悉的文本编辑器(如记事本或写字板),浏览HTML页面需要使用Web浏览器,如IE(Internet Explorer)、Firefox等。,【例1-1】创建一个简单网页,网页文件名为Cha1-1.htm。(1)用记事本编辑HTML文档 单击“开始”“所有程序”“附件”“记事本”,在其中输入HTML文档内容,如右图所示。,保存HTML页面文件:在记事本菜单栏中单击“文件”“保存”,在弹出的“另存为”对话框中选择存放的文件夹“第1章”,文件名栏中输入“Cha1-1.htm”,选择保存类型为“所有文件”,如下图所示。,最后单
4、击【保存】,则一个文件名为“Cha1-1.htm”的HTML网页文件创建完毕。下图所示就是保存在第1章文件夹下的HTML网页文件“Cha1-1.htm”。HTML文件的后缀名为.htm或.html。,(2)浏览HTML页面 找到“Cha3-1.htm”文件,双击它,或右键单击后再单击“打开”,显示结果如图所示。,Cha1-1.htm文档说明,到称为头部“简单网页示例”定义页面标题;“”之间的内容构成注释部分。注释可以有多行,注释的内容不会在浏览器上显示。到是内容部分“进入”是定义一段文字“进入”;“”是设置一条水平线;“Web世界!”是以“h1”字号(最大号)定义一个标题“Web世界!”。,1
5、.1.3 HTML文档中的标签,HTML文档是纯文本文件,由如、这样一些标签组成。标签用来标记文档中的元素,以设置文档的布局、文字的格式、图象的位置等等。标签结构:说明:标签中的标签名字不可少,但属性可选,如就是没包含属性。标签中的字母不区分大小写,如可写成。“”与标签名字之间不能有空格,标签名字中也不能加入空格(尾标签中也,同样)。,标签有双标签和单标签之分。双标签是由和组成的成对标签。如 和 是一对双标签。单标签就是只有始标签而没有尾标签的,控制的内容跟随其后。如就是个单标签。,1.1.4 HTML文档的基本结构,1.HTML文档的基本结构,2.HTML文档的头部 HTML文档的头部在、双
6、标签中,但头标签对、可以省略。头部用于放置网页标题、网页基地址、元信息、关联链接等信息,这些信息在网页中是不显示的。一个HTML文档可以没有头部。,头部信息,在头部中可以放置下列标签:、设置HTML网页的基地址,基地址定义其后所有链接的相对地址起点。说明一些与网页有关的信息,如网页语言的编码方式。设置网页语言的编码方式时使用 标签中charset属性,纯英文网页可以不设编码,简体中文网页使用 charset=gb2312,繁体中文使用charset=big5。如简体中文可如下设置:,3.HTML文档的主体 主体中放置要在网页中显示的内容,如文本、图像、表单、超链接等等。主体中可以包含标题、段落
7、、表格、水平线、层等标签。和必须成对使用。,文档主体(正文),1.1.5 习题,1.HTML文档的基本结构由哪几部分组成?2.使用记事本创建网页有哪几个主要步骤?3.按照例1-1的步骤,将该例在计算机上做一遍。4.编写一个HTML文档,显示结果如右图。,1.2 页面颜色控制,1.2.1 标签的属性,每个标签都有自己的一些属性,它们用于进一步设置该标签相关的显示方式,其格式如下:双标签中,属性只能放在始标签中。属性是可选的,可以按任何顺序设置。如未设置某个属性,就使其默认值。标签名、属性名、等号、属性值之间允许有空格和换行符,很多属性值的双引号也可以省略,但建议不要省略,更规范一些。,主体标签有
8、多个属性,它们是控制整个页面显示方式的。控制颜色的属性如右(表1-1)。,1.2.2 设置页面的背景色和前景色,默认情况下,网页的背景色为白色,前景色为黑色。利用 标签中的 bgclcor 属性和 text 属性可分别设置网页的背景颜色和文字颜色。【例1-2】创建一个简单网页,设置其背景色为黄色,文字为红色。网页文件名为Cha2-1.htm。步骤:(1)利用修改Cha1-1.htm建立文档,以减少编辑工作量。在打开Cha1-1.htm文档后,将文档内容修改为如右图所示。,(2)保存。利用“另存为”命令文件将保存为:“Cha1-2.htm”。显示效果:,1.2.3 颜色值,HTML文档中的颜色是
9、由三原色“red”、“green”和“blue”组合而成的RGB格式数字,每个原色都有256个色度,即可取值0255,具体是用十六进制数来代表,所以只需要2位即可表示。由于每个原色有256种,故三种原色一共可组合成1677721种颜色。颜色值表示:“#RRGGBB”格式 其中的每个字母代表一个十六进制数,RR、GG、BB分别设置红、绿、蓝三色的彩度。例.bgcolor=“#00ff00”,表示将背景颜色设置为绿色。,“RGB(r,g,b)”格式 其中的r、g、b是个0255之间的整数。例.bgcolor=“RGB(0,255,0)”,表示将背景色设为绿色。“RGB(r%,g%,b%)”格式 其
10、中的r、g、b是个0100之间的实数,也就是将格式中的0255数字转换为百分比表示。例.bgcolor=“RGB(100%,0%,0%)”,表示将背景颜色设置为红色。,对于一些常用的基本颜色,还有相应的英文词对应,以方便使用,如cha1-2.htm文档中的用法:bgcolor=“yellow”。,1.2.4 设置页面的背景图案,利用标签中的background属性可将网页的背景设置为一个图片。,【例1-3】创建一个简单网页,将其背景设置为一个图片。,(1)编写文档 打开Cha1-2.htm文档,做如下修改:修改为:“现在网页的背景是黄色”修改为:“现在网页的背景是图片”注意:“BaiYun.j
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 PPT 课件

链接地址:https://www.31ppt.com/p-4993870.html