ASP程序设计PPT教学课件-第2章_HTML基础.ppt

asp程序设计,1,第2章 html基础,2.1 html语言 2.2 html文档格式处理 2.3 文本风格处理 2.4 列表处理 2.5 加入多媒体与超级链接 2.6 制作表格 2.7 制作表单 2.8 框架结构 2.9 css基础,asp程序设计,2,2.1 html语言,2.1.1 html概述 2.1.2 html文档的结构 2.1.3 制作html文件的步骤,asp程序设计,3,2.1.1 html概述,html是hyper text markup language的缩写，直译为超文本标记语言，用来编辑万维网页面。html语言有2.0、3.0、3.2、4.0等几种版本，目前被广泛使用的是4.0版本。 html是一种纯文本语言，也就是说，html代码在运行时不用事先编译成为二进制代码，而是直接通过网页浏览器逐行解释执行。所以，html代码用一般的文本编辑器就可以编写，保存时只要把代码文件存为.htm或.html即可。,asp程序设计,4,2.1.2 html文档的结构,1html文档标记 格式： 标志文件开始和结尾的标记。,2html文件头标记 格式： 用于包含文件的基本信息。,3html文件主体标记 格式： 文件主体标记。,asp程序设计,5,2.1.2 html文档的结构, 标题部分 正文部分 ,每一个用尖括号“”括起来的部分称为一个标记，每一个标记都必须有一个标记名称来作为该标记的唯一标识。绝大部分的标记都有其相关属性及属性值，取值可以用双引号括起来(也可以不用) 大部分的标记都是成对出现的，这类标记称为包容标记。个别标记是单独出现的，这类标记称为空标记。需要说明的是，html语言是不区分大小写的,asp程序设计,6,2.1.2 html文档的结构, 这里显示标题信息 这里是正文部分。 ,asp程序设计,7,2.1.3 制作html文件的步骤,页面设计,编写代码,预览测试,上传发布,不满意,asp程序设计,8,2.2 html文档格式处理,2.2.1 属性 2.2.2 文档编辑风格,asp程序设计,9,2.2.1 属性,background属性:设置网页背景图片。 bgcolor 属性:设置网页背景。 bgproperties属性:设置背景是否随滚动。 link ，vlink， alink属性:设置超级链接。 leftmargin，topmargin属性 margingwidth，marginheight属性,asp程序设计,10,2.2.2 文档编辑风格,注意网页色彩的搭配风格统一。 注意网页内容的多少 文字颜色同背景色或背景图片对比强烈。 具有良好的链接性 注意程序的层次性，并添加适当的注释。,asp程序设计,11,2.3 文本风格处理,2.3.1 段落格式化 2.3.2 字符的格式化,asp程序设计,12,2.3.1 段落格式化,1强制换行标记符,2段落标记符,3预定义格式标记符,4标题标记符,asp程序设计,13,2.3.1 段落格式化,5水平线标记符,6分区显示标记符,7居中标记符,8注释标记符,asp程序设计,14,2.3.2 字符的格式化,size=size：设置文字的大小。 face=fontstyle：设置字体，如宋体、黑体、隶书等。 color=colorvalue：设置文字的颜色。,1字体设置标记符,asp程序设计,15,2.3.2 字符的格式化,，将字符设置成粗体。 ，将字符设置成斜体。 ，给字符增加下划线。 ，给字符增加删除线。 ，将字符设置成打字机字体。 ，将字符设置成上标字体。 ，将字符设置成下标字体。,2物理字体,asp程序设计,16,2.3.2 字符的格式化,强调文字。 字体加重。 显示编程代码。 显示示例文字。 显示键盘按键文字。 缩小文字。 放大文字。,3逻辑字体,asp程序设计,17,2.4 列表处理,2.4.1 定义列表 2.4.2 有序列表 2.4.3 无序列表,asp程序设计,18,2.4.1 定义列表,定义列表格式为： ,用于指定一个定义列表 用于指定一个需要解释的名词或术语 用于指定名词或术语的解释,asp程序设计,19,2.4.2 有序列表,所有列表项都用有序数字或有序字母在列表项的前面加上着重符号进行编号。, ,用于定义一个有序列表 用于定义一个列表项 和都具有“type”属性，用于指定列表项着重符号的类型。,asp程序设计,20,2.4.3 无序列表,列表项前面的着重符号没有进行编号。 其格式为： ,用于定义一个无序列表 用于定义一个列表项 和都具有“type”属性，用于指定列表项着重符号的类型。,asp程序设计,21,2.5 加入多媒体与超级链接,2.5.1 加入多媒体 2.5.2 加入超级链接,asp程序设计,22,2.5.1 加入多媒体,图像一般以*.gif（包括gif动画）、*.jpeg、*.png格式的文件最为常见 插入图像标记符。 src=url alt=text align=alignstyle,1加入图像,asp程序设计,23,2.5.1 加入多媒体,是在html代码中的之间加入背景音乐标记符。,2加入背景音乐,在html代码中的之间加入嵌入标记符。,asp程序设计,24,2.5.1 加入多媒体,通过标记符来加入视频。属性src的值与插入图像的不同。,3加入视频,在html代码中的之间加入嵌入标记符。属性src的值与插入背景音乐的不同。,asp程序设计,25,2.5.1 加入多媒体,在html代码中的之间加入嵌入标记符，但是属性有所不同。,4加入动画,在html代码中的之间加入对象标记符。,asp程序设计,26,2.5.2 加入超级链接,在html中，通过标记符来加入超级链接。文字或图片作为超链接源。,属性： href=url target=targetmode name=anchorname,asp程序设计,27,2.6 制作表格,表格是在设计网页时经常用到的一个重要元素，它不仅可以把文字和图片等内容按照行和列排列起来，使内容更加清晰、工整，而且还可以用来建立网页的框架和模板。,asp程序设计,28,2.6 制作表格,2.6.1 表格的结构 2.6.2 创建表格 2.6.3 定义表格标题 2.6.4 定制表格,asp程序设计,29,2.6.1 表格结构,表格的结构层次分明。 单元格（tabledata）组成表格的最小单位。 多个单元格构成一行（tablerow）。 多行构成一个表格（table）。 表格的表头一般会加上一个标题（caption），以概括表格的主要内容。,asp程序设计,30,2.6.1 表格结构, ,表头标题,单元格,行,asp程序设计,31,2.6.2 创建表格,border边框属性的取值为非负整数，取值为“0”表示表格边框不可见。 cellspacing是指相邻单元格之间的距离。 cellpadding是指单元格所含内容和单元格边沿之间的距离。,用于创建一个表格,asp程序设计,32,2.6.3 定义表格标题,表格标题标记符 用于定义表格的标题，位于和之间。 表格的标题显示在表格的表头中部，起概括表格内容的作用。,asp程序设计,33,2.6.4 定制表格,bgcolor：设置一行的背景颜色。 background：设置一行的背景图片。 bordercolor：设置一行的边框颜色。 align：设置一行的水平对齐方式 valign：设置一行的垂直对齐方式。,1行标记符,asp程序设计,34,2.6.4 定制表格,rowspan=num 设置单元格所跨越的行数，默认为1 colspan=num 设置单元格所跨越的列数，默认为1 width=size 设置单元格的宽度，默认为自适应大小 height=size 设置单元格的高度，默认为自适应大小,2单元格标记符,asp程序设计,35,2.7 制作表单,表单是用户与web服务器进行信息交互的主要手段。 在web上，通过填写表单并提交的方式完成用户信息的收集并将其传递给web服务器。,asp程序设计,36,2.7 制作表单,2.7.1 表单的结构 2.7.2 表单中常用的表单元素,asp程序设计,37,2.7.1 表单的结构,表单的格式如下： 表单元素1 表单元素2 提交按钮 ,（1）action属性指定的处理数据的程序。 （2）method属性指定了发送表单数据的方法。,asp程序设计,38,2.7.2 表单中常用的表单元素,1文本输入标记符 标记符因其“type”属性的取值不同而有多种显示形式。,（1）单行文本框： （2）输入密码框： （3）隐藏域： （4）复选框： （5）单选框：,39,2.7.2 表单中常用的表单元素,（6）图像域： （7）文件字段域： （8）提交按钮： （9）重置按钮： （10）普通按钮：,asp程序设计,40,2.7.2 表单中常用的表单元素,2多行文本框标记符 用于输入诸如个人简历、文章资料等信息量相对较多的文本信息。,name=areaname：设置多行文本框的名称。 rows=num：设置多行文本框的行数。 cols=num：设置多行文本框的列数。,asp程序设计,41,2.7.2 表单中常用的表单元素,3选择列表 提供一张事先设计好的可供选择的列表，用户只能选择而不能手工输入信息。, 选项一 选项二 ,asp程序设计,42,2.8 框架结构,在设计网页布局时，除了使用无边框表格外，还可以使用专门用于布局的框架。框架可以物理上将一个页面分成若干区域，每个区域可以载入一个网页。,asp程序设计,43,2.8 框架结构,2.8.1 框架结构的文件格式 2.8.2 框架结构标记的使用 2.8.3 frame标记 2.8.4 与框架相关的target属性,asp程序设计,44,2.8.1 框架结构的文件格式,具体格式如下： ,注意： 在文档中，若使用了，就不应该有标记。 老版本的浏览器可能不支持框架结构。,asp程序设计,45,2.8.2 框架结构标记的使用,rows=size：设置多重框架的高度。 cols=size：设置多重框架的宽度。 frameborder=isdisplayborder 设置是否显示框架边框。 border=num：设置框架的边框大小。,asp程序设计,46,2.8.3 frame标记,src=url：设置要载入的文件的路径和名称。 name=framename：设置子窗口的名称 marginwidth=size： 设置显示内容和窗口左右边界的距离。 marginheight=size： 设置显示内容和窗口上下边界的距离。 scrolling=scrollingstyle： 设置子窗口是否使用滚动条 noresize：设置是否能调整窗口大小。,asp程序设计,47,2.8.4 与框架相关的target,当用户单击该链接时，链接的网页默认会在原来的子窗口打开。 如果要指定在某个子窗口打开，就要使用target属性，将其取值设置为指定子窗口的名称，可以实现链接的html文件在指定子窗口中打开。,asp程序设计,48,2.9.1 css样式简介,css（cascading style sheets，层叠样式表），是用来管理网页样式并将样式信息与网页内容分离的一种标记性语言。 它提供了很多的样式定义方式来辅助html，可以对页面元素的字体、大小、颜色、背景、排列方式、区域尺寸等做到精确地控制。,asp程序设计,49,2.9 css基础,2