网页制作与HTML语言基本结构简介.ppt
《网页制作与HTML语言基本结构简介.ppt》由会员分享,可在线阅读,更多相关《网页制作与HTML语言基本结构简介.ppt(62页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第三章 网页制作与HTML语言基本结构简介本章提要本章提要静态网页与动态网页静态网页与动态网页DreamweaverDreamweaver MX MX制作网页制作网页HTMLHTML语言的基本结构语言的基本结构3.1网页制作概述静态网页与动态网页1.静态网页由超级文本标志语言HTML的标志代码构成;用记事本、FrontPage、Dreamweaver、Fireworks可以制作。2.动态网页与asp动态网页中:服务器端可以实时处理浏览器端的请求,然后将处理结果返回给浏览器端ASP是在普通HTML中嵌入VBSCript或JavaScript代码的文件,只能在服务器端运行认识网页1.网页的基本元素
2、文字图像超链接2.网页设计原则兼容性原则简洁性原则3.网页的设计确定主题收集材料布局规划制作网页网页制作工具简介FrontpageDreamweaver3.2Dreamweaver2004概览Dreamweaver2004界面输入与编辑文本超级链接使用图像表格创建交互表单页面布局3.3使用Dreamweaver制作主页框架基本操作步骤主页框架的制作3.4HTML语言基本结构HTML简介简介HTML文件的基本结构HTML的HTML简介简介HTMLHTML的英语意思是:的英语意思是:的英语意思是:的英语意思是:HypertextMarkedLanguageHypertextMarkedLangua
3、ge,即超文本标记语言即超文本标记语言即超文本标记语言即超文本标记语言,是一种用来制作超文本文档的简单标是一种用来制作超文本文档的简单标是一种用来制作超文本文档的简单标是一种用来制作超文本文档的简单标记语言。用记语言。用记语言。用记语言。用HTMLHTML编写的超文本文档称为编写的超文本文档称为编写的超文本文档称为编写的超文本文档称为HTMLHTML文档,文档,文档,文档,它能独立于各种操作系统平台。它能独立于各种操作系统平台。它能独立于各种操作系统平台。它能独立于各种操作系统平台。所谓超文本,是因为它可以加入图片、声音、动画、影所谓超文本,是因为它可以加入图片、声音、动画、影所谓超文本,是因
4、为它可以加入图片、声音、动画、影所谓超文本,是因为它可以加入图片、声音、动画、影视等内容,事实上每一个视等内容,事实上每一个视等内容,事实上每一个视等内容,事实上每一个HTMLHTML文档都是一种静态的网文档都是一种静态的网文档都是一种静态的网文档都是一种静态的网页文件,这个文件里面包含了页文件,这个文件里面包含了页文件,这个文件里面包含了页文件,这个文件里面包含了HTMLHTML指令代码,这些指指令代码,这些指指令代码,这些指指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资令代码并不是一种程序语言,它只是一种排版网页中资令代码并不是一种程序语言,它只是一种排版网页中资令代码并
5、不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。料显示位置的标记结构语言,易学易懂,非常简单。料显示位置的标记结构语言,易学易懂,非常简单。料显示位置的标记结构语言,易学易懂,非常简单。HTML的基本结构的基本结构HTML的基本结构的基本结构一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置,HTML超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。HTML的基本结构的基本结构开始标签开始标签开始标签开始标签一个简单的一个简单的一个简
6、单的一个简单的HTMLHTML示例示例示例示例 头部标签头部标签头部标签头部标签欢迎光临我的主页欢迎光临我的主页欢迎光临我的主页欢迎光临我的主页文件主体文件主体文件主体文件主体这是我第一次做主页这是我第一次做主页这是我第一次做主页这是我第一次做主页结尾标签结尾标签结尾标签结尾标签 例1-1在文档的最外层,在文档的最外层,文档中的所有文本文档中的所有文本和和htmlhtml标签都包含在其中,它表示该文档是以超文本标识标签都包含在其中,它表示该文档是以超文本标识语言(语言(HTMLHTML)编写的。)编写的。是是HTMLHTML文档的头部标签文档的头部标签,在浏览器在浏览器窗口中,头部信息是不被显
7、示在正文中的窗口中,头部信息是不被显示在正文中的,在此标签中可以在此标签中可以插入其它标记插入其它标记,用以说明文件的标题和整个文件的一些公用以说明文件的标题和整个文件的一些公公属性。公属性。和和是嵌套在是嵌套在头部标签中的,标签头部标签中的,标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。之间的文本是文档标题,它被显示在浏览器窗口的标题栏。标记一般不省略,标签之间的文本标记一般不省略,标签之间的文本是正文,是在浏览器要显示的页面内容。是正文,是在浏览器要显示的页面内容。上面的这几对标签在文档中都是唯一的,上面的这几对标签在文档中都是唯一的,HEADHEAD标签和标签和BODYBODY
8、标签是嵌套在标签是嵌套在HTMLHTML标签中的。标签中的。三、三、HTML的标签与属性的标签与属性:HTML的标签分单标签和成对标签两种。成对标签是由首标签和尾标签组成的,成对标签的作用域只作用于这对标签中的文档。单独标签的格式,单独标签在相应的位置插入元素就可以了。换行换行三、三、HTML的标签与属性的标签与属性:作为一般的原则,大多数属性值不用加双引号。但是包括空格、号,号等特殊字符的属性值必须加入双引号。为了好的习惯,提倡全部对属性值加双引号。如:字体设置2.2主体标签及属性、颜色的设定主体标签及属性、颜色的设定一、一、html的主体标签的主体标签在和中放置的是页面中所有的内容,如图片
9、、文字、表格、表单、超链接等设置。标签有自己的属性,设置标签内的属性,可控制整个页面的显示方式一、一、html的主体标签的主体标签标签的属性标签的属性标签的属性标签的属性格式:格式:格式:格式:bodytext=#000000link=#000000alink=#000000leftmargin=3topmargin=2bgproperties=fixedbadybady的属性实例的属性实例的属性实例的属性实例bodybgcolor=#FFFFE7text=#ff0000link=#3300FFalink=#FF00FFvlink=#9900FF设定不同的连接颜色设定不同的连接颜色设定不同的连
10、接颜色设定不同的连接颜色测试测试测试测试bodybody标签标签标签标签默认的连接颜色默认的连接颜色默认的连接颜色默认的连接颜色正在按下的连接颜色正在按下的连接颜色正在按下的连接颜色正在按下的连接颜色,访问过后的连接颜色访问过后的连接颜色访问过后的连接颜色访问过后的连接颜色,返回返回返回返回 二、颜色的设定颜色值是一个关键字或一个RGB格式的数字。RGB颜色可以有四种表达形式::#rrggbb(如,#00cc00)#rgb(如,#0c0)rgb(x,x,x)x是一个介乎0到255之间的整数(如,rgb(0,204,0)rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如,rg
11、b(0%,80%,0%)例:白色=#ffffff红色=#ff0000二、颜色的设定WindowsVGA(视频图像阵列)形成了16各关键字:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellowaqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellow文字版面的编辑文字版面的编辑3.13.1换行标签换行标签换行标签换行标签 换行
12、标签是个单标签,也叫空标签,不包含任和内容,换行标签是个单标签,也叫空标签,不包含任和内容,在在htmlhtml文件中的任何位置只要使用了文件中的任何位置只要使用了标签,当文件显标签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。示在浏览器中时,该标签之后的内容将显示下一行。无换行示例无换行示例无换行标记:登鹳雀楼白日依山尽,黄河入海流。欲穷无换行标记:登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。千里目,更上一层楼。有换行标记:有换行标记:登鹳雀楼登鹳雀楼白日依山尽,白日依山尽,黄黄河入海流。河入海流。欲穷千里目,欲穷千里目,更上一层楼。更上一层楼。例:例:3-1html3
13、-1html 3-23-2换段落标签换段落标签及属性:及属性:由由标签所标识的文字,代表同一个段落的标签所标识的文字,代表同一个段落的文字。不同段落间的间距等于连续加了两个换行文字。不同段落间的间距等于连续加了两个换行符,也就是要隔一行空白行,用以区别文字的不符,也就是要隔一行空白行,用以区别文字的不同段落。它可以单独使用,也可以成对使用。单同段落。它可以单独使用,也可以成对使用。单独使用时,下一个独使用时,下一个的开始就意味着上一个的开始就意味着上一个的结束。良好的习惯是成对使用。的结束。良好的习惯是成对使用。格式:格式:PALIGN=其中其中,ALIGN,ALIGN是是标签的属性标签的属性
14、,属性有三个参数属性有三个参数left,center,right.left,center,right.这三个参数设置段落文字的左这三个参数设置段落文字的左,中中,右位置的对齐方式右位置的对齐方式.实例实例:3-2html3-2html测试分段控制标签测试分段控制标签花儿什么也没有。它们只有凋谢在风中的轻微、凄楚花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨,而又无奈的吟怨,就像那受到了致命伤害的秋雁,悲哀无助地发出一声声垂就像那受到了致命伤害的秋雁,悲哀无助地发出一声声垂死的鸣叫。死的鸣叫。或许,这便是花儿那短暂一生最凄凉、或许,这便是花儿那短暂一生最凄凉、最伤感的归宿。最伤感的
15、归宿。而美丽苦短的花期而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲。却是那最后悲伤的秋风挽歌中的瞬间插曲。3-33-3原样显示文字标签原样显示文字标签原样显示文字标签原样显示文字标签要保留原始文字排版的格式要保留原始文字排版的格式,就可以通过就可以通过标签来实标签来实现现,方法是把制作好的文字排版内容前后分别加上始标签方法是把制作好的文字排版内容前后分别加上始标签和尾标签和尾标签.实例实例:3-3html3-3html原样显示文字标签原样显示文字标签白日依山尽,白日依山尽,黄河入海流。黄河入海流。欲穷千里目,欲穷千里目,更上一层楼。更上一层楼。3-43-4居中对齐标签居中对齐标签文本在
16、页面中使用文本在页面中使用标签进行居中显示标签进行居中显示,是成对标签是成对标签,在需要居中的内容部分开头处加在需要居中的内容部分开头处加,结结尾处加尾处加 实例:实例:3-4html3-4html居中对齐标签居中对齐标签送孟浩然之廣陵送孟浩然之廣陵故人西辭黃鶴樓,故人西辭黃鶴樓,煙花三月下揚州。煙花三月下揚州。孤帆遠影碧山盡,孤帆遠影碧山盡,惟見長江天際流。惟見長江天際流。3-5水平分隔线标签水平分隔线标签标签是单独使用的标签,是水平线标签实例:实例:3-5html3-5html测试水平分隔线标签测试水平分隔线标签春春 晓晓春眠不觉晓,春眠不觉晓,处处闻啼鸟。处处闻啼鸟。夜来风雨声,夜来风雨
17、声,花落知多少?花落知多少?hrsize=6widTD=30%align=centernoshadecolor=red3-6字体属性标签3-6-1文字格式控制标签格式:fontface=值1size=值2color=值3文字实例:实例:实例:实例:3-6-1html3-6-1html控制文字的格式控制文字的格式控制文字的格式控制文字的格式fontface=size=6color=red盼望着,盼望着,东盼望着,盼望着,东盼望着,盼望着,东盼望着,盼望着,东风来了,春天脚步近了。风来了,春天脚步近了。风来了,春天脚步近了。风来了,春天脚步近了。fontface=size=+3color=gree
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 HTML 语言 基本 结构 简介
限制150内