参考Web页面制作基础.ppt
《参考Web页面制作基础.ppt》由会员分享,可在线阅读,更多相关《参考Web页面制作基础.ppt(36页珍藏版)》请在三一办公上搜索。
1、第2章 Web页面制作基础,本章要点:HTML网页格式 文字及段落标记 超级链接 加入多媒体 制作表格 制作表单 CSS,2.1 一个简单的HTML程序页面,例2-1(CH1-1.htm):ASP动态网页设计一个简单HTML程序页面这个程序页面包含了基本的HTML程序结构。,图2-1 一个简单的HTML页面,2.2 HTML网页格式,HTML语言是一种页面描述性的语言,它使用一些约定的符号对各种文件进行标注,标注过的文件就是一个个的HTML网页。每个网页一般都包括标题、段落、列表、表格、图像等基本成分。2.2.1 HTML标记的语法 HTML的标记字符均取自ISO 646:1983字符集IRV
2、,数字字符则取自SGML中规定的文档字符集Lation-1(ISO-8859-1)。1字符实体 除了通常的ASCII字符外,引入字符实体就可以在HTML文档中使用拉丁字母、希腊字母和某些特殊符号等非ASCII字符。字符实体的引用格式为“”都可以代表字符“”。,2标记 在HTML语言中,所有的标记都必须用尖括号括起来。大部分标记都是成对出现的,包括开始标记和结束标记,开始标记和相应的结束标记定义了该标记所影响的范围;结束标记与开始标记名称相同,但结束标记总是以一个斜线符号开头的。也有一些标记只要求单一开始标记就可以了。HTML标记不区分大小写,但通常约定使用大写字母来表示,以利于HTML文档的维
3、护。字符实体名是区分大小写的。3标记属性 标记一般都有自己的属性,通过属性可以对其作用的内容进行更多的控制,属性紧跟在开始标记的后面,并且都放置在开始标记的尖括号内。一般由属性名、等号和属性值三部分组成。例如,中的background是标记的背景属性,属性值back1.gif是一幅背景动画,需要注意的是,属性值必须用双引号或者单引号标注。4注释HTML中的注释以“”结束,需要注释的内容放置于其中。对某部分文档进行必要的解释,便于阅读源代码,注释部分的内容并不会被Web浏览器显示出来。,2.2.2 HTML文件基本架构,HTML文档的基本结构可以表示如下:标题文字文本、图像、动画、HTML指令等
4、 与标记是用来说明该文档是由HTML标记语言描述的,文档中的所有其他标记和内容都包括在这对标记之中。,2.2.3 文件主体标记,1标记标记是全部文档内容的容器,是处在最外层的标记,说明这个文件的内容是用HTML语言实现的。是开始标记,是结束标记,它们分别是网页的第一个标记和最后一个标记,其他所有HTML代码都位于这两个标记之间。标记告诉浏览器或其他程序,这是一个Web文档,应该按照HTML语言规则对文内的标记进行解释。.标记是可选的,但最好不要省略这两个标记,以保持Web文档结构的完整性。2标记首部标记用于提供与Web页有关的各种信息。在首部标记中,可以使用和标记来指定网页的标题,网页的标题显
5、示在浏览器窗口的标题栏中,一个网页仅能有一个标题。还可以在首部标记中使用和标记来定义CSS样式表,使用和标记来插入脚本等。,3标记 该标记用来标注HTML文档的正文部分,正文标记内包含了文档的内容、文字、图像、动画、超链接以及其他HTML元素,标记属性及功能见表2-1。在上述属性中,各个颜色属性的值有两种表示方法:使用颜色名称来指定,例如红色、绿色和蓝色分别用red、green和blue表示;使用十六进制格式数值#RRGGBB来表示,其中的RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据,数值越大亮度越高,例如,#000000表示黑色,#FFFFFF表示白色,#FF0000表
6、示红色。例如,就是一个浅黑色背景、浅灰色文本、白色超链接效果的页面。,表2-1 标记的属性及说明,2.3 文字及段落标记,2.3.1 文字标记1标题标记标题标记用于设置文档正文的标题和副标题,其中n的取值是16,定义了6个级别的子标题,.标记表示字体最大的标题,.标记表示字体最小的标题。2标记标记,设置缺省字体的大小,也作为字体标记设置相对字体大小的基准值。其一般格式为:,标记属性及功能见表2-2。,表2-2 标记属性及说明,3字体标记用来设置文本的字符格式,为此可以将文本置于和标记之间,并通过其face、size和color属性来设置文本的字体、字号和颜色。face属性指定一种字体,或者给出
7、一个字体列表,各种字体名称用逗号来分隔,可以按照作者的喜好程度来排列。size属性指定字体的大小(即字号),其取值可以从1到7,默认值为3。size属性值越大,显示的字号就越大。相对于基本字体(BASEFONT)的大小,也可使用“”或“”符号来指定相对字号。例如:超文本标记语言ASP动态网页设计color属性指定文本的颜色,可以用颜色名称表示,也可以用十六进制RGB格式表示。例如:超文本标记语言ASP动态网页设计,4字符样式标记字符样式标记均无属性,可以为某些字符设置特殊格式,例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记及说明见表2-3。,表2-3 字符样式的标记,2
8、.3.2 段落标记,分段标记定义了一个段落,可将文本内容分为几个小的段落。浏览器遇到该标记时,将先插入一个空行,然后在下一行显示其后的文本,也就是说段落与段落之间有一个空行。若同时使用和,则将段落包围起来,表示一个分段的块;若省略结束标记,可以将开始标记放在段尾。在HTML文档中无须在意每一行的长度,浏览器会根据显示窗口的宽度自动换行的。分段标记的常用属性是align=left或center或right,用于设置段落的水平对齐方式。其中,left为默认值,表示段落文本在Web页面中按左边界对齐;center表示居中对齐;right表示按右边界对齐。需要注意的是,有的浏览器不支持右对齐。,2.3
9、.3 换行标记,换行标记强行加入一个换行动作,使后续内容在下一行显示。它与标记不同,仅仅是换行,并不插入新空行。换行标记的属性clear=left或all或right或none,为可选属性,该属性通常与文本中所嵌入的内联图像标记一起使用。其中,left表示换行标记后的文本换行至浏览器窗口左边界不被图像占用的地方显示;all表示换行标记后的文本在浏览器窗口的左右边界均不被图像占用的地方显示;right表示换行标记后的文本换行至浏览器窗口的右边界不被图像占用的地方显示;none为默认值,表示仅仅换行而已。,2.3.4 格式化列表,1创建有序列表 有序列表是在各列表项前面显示数字或字母的缩排列表,可
10、以使用有序列表标记和列表项标记来创建,语法格式如下:列表项1列表项2列表项n标记有两个常用属性:start和type。start属性用于设置各列表项的起始值,取正整数值,默认值为1;type属性用于设置各列表项的序号样式,其取值有5类。(1)1:用阿拉伯数字1、2、3等表示各列表项序号,此为默认值。(2)A:用大写字母A、B、C等表示各列表项序号。(3)a:用小写字母a、b、c等表示各列表项序号。(4)I:用大写罗马数字I、II、III、IV等表示各列表项序号。(5)i:用小写罗马数字i、ii、iii、iv等表示各列表项序号。当位于和标记之间时,标记也有两个常用属性:type和value。ty
11、pe属性指定各列表项的序号样式,其取值与的type属性相同;value属性指定一个列表项序号的新的起始值,以获得非连续性的数字序列。,2创建无序列表序列表是一种在各列表项前面显示特殊项目符号的缩排列表,可以使用无序列表标记和列表项标记来创建,其语法格式如下:列表项1列表项2列表项n标记的value属性用于指定列表项前面显示的项目符号,其取值可以是disc、circle或square。其中,disc为默认值,用实心圆作为项目符号;circle用空心圆作为项目符号;square用方块作为项目符号。需要注意的是,在IE浏览器中,type属性的值是区分大小写的。,2.4 加入超级链接,超链接一般可分为
12、外部链接(External Link)与内部链接(Internal Link)。单击外部链接时,浏览器窗口将显示其他文档的内容。单击内部链接时,访问者将看到本网页的其他部分内容。另外,HTML还可以创建指向邮件地址的链接,单击该链接之后便可通过电子邮件软件给指定的地址发送邮件。,2.4.1 超级链接的概念,超级链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源,例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。,2.4.2 绝对地址与相对地址,如果要链接的文件位于不同的目录,在链接时就必须指明文件的地址,文件地址分为相对地
13、址和绝对地址。相对地址是以当前文件所在的地址和目录为起点的进行文件查找的。绝对地址是从根目录开始的地址进行文件查找的,绝对路径中的盘符后用“|”替代“:”。表2-4列出了相对地址和绝对地址的写法与含义。,表2-4 相对地址和绝对地址的写法及含义,2.4.3 内部链接与外部链接,1内部链接 所谓内部链接,就是网页内部不同位置之间的链接。在内容较多的网页内建立内部链接时,它的链接目标不是其他文档,而是本网页内的其他位置。在使用内部链接之前,须要在网页内确定目标地点的位置,并使用标记的Name属性来确定目标地点位置名称。定义目标地点的一般格式为:希望看到的目的内容目标地点位置名称使用简短、有意义的字
14、符串代替。为了使Web浏览器易于区分“目标地点位置名称”与文档内容,在引用时,“目标地点位置名称”前面需要添加符号“#”。一般格式为:希望跳转到的目标起始位置内容相关的提示信息2外部链接外部链接就是本网页和其他类型的网络资源之间的链接。一个超链接通常由以下三部分构成:首先是超链接标记,表示这是一个链接;然后是其属性href及其值,这就定义了超链接所指的目标;最后是在超链接中显示在网页上作为链接的提示文字。超链接的一般格式为:提示文字单击外部链接时,需要链接的目标文档可能保存在其他站点内,也可能保存在本机站点内,为了便于区分这两种情况,可将指向其他站点文档的链接称为URL链接,而将指向同一站点内
15、文档的链接称为本地链接。,3邮件链接邮件链接可使访问者在浏览页面时,只须单击电子邮件链接就能够打开默认的邮件编辑软件,向指定的地址发送邮件。电子邮件链接的应用格式为:提示文本其中,“E-mail 地址”是用户在Internet上的电子邮件地址,而“提示文本”是访问者单击的文本。访问者单击电子邮件链接时,将打开默认的电子邮件编辑软件。例如,使用Office系列的Outlook Express作为默认的邮件编辑器时,单击电子邮件链接时将打开Outlook Express窗口,“收件人”一栏将出现链接设定的“E-mail 地址”。,2.5 加入多媒体,2.5.1 插入图片1src连接源 src连接源
16、,用于指出一个图像文件名,或给出一个图像的文件的URL地址,图像可以是JPEG文件、GIF文件或PNG文件。(1)“alt=text”用于设置图像的替换文本。只需给出图像的简单文本说明,这段文本在浏览器不能显示图像时显示出来,或图像加载时间过长时先显示出来。当浏览器正常显示出图像后,把鼠标移到图像上,稍作停留,也会紧跟着鼠标显示出这段替换文本。(2)height属性用来设置图像在网页中的高度,单位是像素或百分数。(3)width属性用来设置图像在网页中的宽度,单位是像素或百分数。2border属性标记的border属性可以给图像添加边框效果,该属性的取值为正整数,单位为像素,用来定义图像边框的
17、宽度。若不设置border属性或取值为0时,图像没有边框。3标记的使用如果希望将插入的图像在页面上与文本同占一行,则可以将IMG标记置于和标记之间。,4align属性当在页面中进行图文混排时,有时一个图像会占据一行以上的空间,此时,可以使用标记的align属性来设置图像与文本在垂直方向的对齐方式,此时align属性的取值与含义见表2-5。5hspace和vspace属性标记的hspace和vspace属性可以设置图像与文本之间的空白距离,前者指定图像的左、右边距,后者指定图像的上、下边距,两者的单位均为像素。,表2-5 align属性的取值与含义,2.5.2 加入音乐,在HTML语言中,可以使
18、用标记在网页中添加背景音乐,该标记只允许放置在部分。通过标记的下列属性可以对音乐的播放进行控制。(1)balance:整数,指定如何将声音分成左声道和右声道,取值为-10 000+10 000,默认值为0。(2)loop:整数,指定声音播放的次数。如果设置为0,则播放一次;如果设置为大于0的整数,则播放指定的次数;如果设置为-1,则声音反复播放,直到页面关闭。(3)src:指定要播放的声音文件的URL。常用的声音文件类型是波形文件(.wav)、MIDI文件(.mid)、AIFF文件(.aif)、AU文件(.au)以及MP3文件(*.mp3)等。(4)volume:整数,指定音量高低,其取值为-
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 参考 Web 页面 制作 基础
链接地址:https://www.31ppt.com/p-6250397.html