Web应用程序客户端界面设计第2章.ppt

上传人:max****ui 文档编号:11800604 上传时间:2020-05-03 格式:PPT 页数:52 大小:3.08MB
返回 下载 相关 举报
Web应用程序客户端界面设计第2章.ppt_第1页
第1页 / 共52页
Web应用程序客户端界面设计第2章.ppt_第2页
第2页 / 共52页
Web应用程序客户端界面设计第2章.ppt_第3页
第3页 / 共52页
点击查看更多>>
资源描述
,第二章XHTML基础,回顾,HTML标签区分大小写吗?HTML的基本结构并说明各部分的含义。网络经过那几个阶段。http协议包含几个部分,分别是什么。,预习检查,分隔线标签是那个。图片标签是什么。有什么属性。创建一个表格必须需要哪些标签?,目标,XHTML语法基础,扩展名.htm或.html元素开始标记结束标记元素内容空标记属性元素和属性的名字必须小写,本文本是一个示例段落,定义HTML文档总体结构,标题部分.文档正文部分.,所有的XHTML文档都有三个文档级的元素:html、head和body,XHTML元素,注释文档正文标题段落引用文本列表预编排文本分区块跨字符实体超级链接图形多媒体信息表格插入其他网页,注释,注释不会出现在浏览器中标识了注释的结束。注释内容中间不能出现-。,定义正文标题,六个级别的正文标题,标题重要性随标签的数字递减标题以较大的粗体显示,Heading1Heading2Heading3Heading4Heading5Heading6,定义一个段落,段落元素p用于将文本界定为整个段落,段落示例1段落示例2段落示例3,定义引用文本,blockquote元素用于界定一个引用文本块blockquote将段落缩进,使其与周围的文字偏离,独立宣言的一段:HTML文档是由HTML元素构成的文本文件。HTML元素是通过使用HTML标签进行定义的。HTML标签HTML标签是用来标记HTML元素的。HTML标签被和符号包围。这些包围的符号叫作。HTML标签是成对出现的。例如b和/b。位于起始标签和终止标签之,定义列表,三种不同类型的列表有序列表:用元素ol定义无序列表:用元素ul定义定义列表:用元素dl定义用于表示多行单列或者单行多列的数据:,无序列表示例编写XHTML文件编写XML文件编写JSP文件有序列表示例编写XHTML文件编写XML文件编写JSP文件定义列表示例猫一个奴役自己的动物手电筒使用电池的设备白痴不知道如何做事,却假装很重要的人,有序列表序号类型,Type=“1”数字序列Type=“a”字母序列Type=“i”罗马数字序列,定义预编排文本,预编排元素pre可以使文本完全按照源文件中的编排格式,一模一样地在浏览器中显示。,2.9+1.2-4.1,定义分区块文本,div通常和CSS一起用于页面布局,.borderedborder-style:solid;这是一个常规段落这是一个用div样式界定的段落,跨越多个字符,跨字符元素span用于将内嵌样式跨越多个字符或词span是内嵌元素,.emphasiscolor:red;text-decoration:underline;font-weight:bold;这段文本被重要强调,而这段文本没有。,特殊字符(实体),这是一个XHTML标记1983-2003MicrosoftCorporation.保留所有权力,创建超链接,描述文本,Microsoft公司网站,绝对链接和相对链接,创建锚点,第一章,转到第一章,链接标题、快捷键与Tab次序,更多的信息可以在这里找到TableofContents这是第一个链接这是第二个链接,在网页中显示图形,使用object插入flash,使用object插入多媒体信息,为什么使用表格,表格应用场合论坛门户网站购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,表格的基本结构,行,列,单元格,在HTML文档中,广泛使用表格来存放网页上的文本和图像,表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,如何创建表格,移动联通铁通IBM惠普华硕,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行?哪里用了跨列?跨了几行几列?,跨多列的表格,学生成绩表英语数学语文959889,COLSPAN=“n”属性表示跨多少列?,跨多行的表格,早上菜谱食物鸡蛋饮料牛奶甜点开心粉,rowspan=“n”属性表示跨多少行?,手机充值、IP卡办公设备、文具各种卡的总汇铅笔彩笔打印刻录,如何创建跨行跨列的表格,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰?,如何设置表格的尺寸和边框,品牌商城笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,width用来设置表格的宽度height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,如何设置背景,笔记本电脑办公设备、文具、耗材,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值,RGB指的是红绿蓝,下图就是RGB颜色对照表。,如何设置对其方式,笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,align属性用来设置表格、行、列的对齐方式,为什么要使用填充属性,单元格里的内容太靠近边线,怎么办?,未填充的效果,字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),如何设置表格的填充属性,笔记本电脑办公设备、文具、耗材.,cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局,达到如左图所示页面的效果?分析上图所示页面,应该用什么进行布局?,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图,需要几行几列?,需要7行2列,如何使用表格进行布局,超值变形金钢2.5折!人们为啥对电视吼叫,编写如下图所示效果对应的html代码,小结3,跨2行,并放了一副图片,此单元格放了一副图片,此单元格跨了3列,用iframe实现框架结构,用超链接在iframe中打开网页,块级元素与内嵌元素,XHTML元素分为块级元素和内嵌元素两种类型,二者的不同之处在于块级元素定义的文本是换行的,而内嵌元素定义的文本是不换行的。常见的块级元素包括:div、blockquote、列表元素(dl、ol、ul)、fieldset、form、h1-h6、hr、p、pre、table等。内嵌元素包括:span、a、img、label、所有的表单输入元素、iframe、object等。在没有后面我们要学到的CSS指定元素的位置、高度、宽度情况下,浏览器按照默认的文本流的输出规则,在浏览器窗口中输入HTML元素,即:如果是内嵌元素,下一个元素就显示在该元素同一行上的后续位置。如果是块级元素,下一个元素就在浏览器下一行显示。元素中的文本按照元素的级别,浏览器使用不同大小的默认字体表示。例如,H1一直到H6采用不同大小的字体在浏览器中显示。,总结,XHTML文档由元素组成,元素定义了文本和图形在浏览器中显示的方式,告诉Web浏览器如何显示页面。XHTML元素使用XHTML标记定义,每个标记都出现在一对尖括号()中。标记通常成对出现,第一个标记定义了标记的起点,称为“开始标记”;第二个标记定义了标记的结尾,称为“结束标记”。在开始标记和结束标记之间的文本称为元素内容。标记具有属性,属性提供了关于页面上XHTML元素的附加信息。XHTML文档的总体结构由、这三个文档级的标记构成。XHTML包含了几个块级的标记来限定和格式化段落文本。这些标记包括:、到、。创建超链接的XHTML标记为。创建图形信息的XHTML标记为。创建多媒体信息的XHTML标记为。在网页中创建表格信息的XHTML标记为。XHTML元素分为块级元素和内嵌元素两种类型,二者的不同之处在于块级元素定义的文本是换行的,而内嵌元素定义的文本是不换行的,参考资料,http:/www.w3cn.orgHTML和CSS网页标准指南,作业,利用所学的标记做一个博客首页,
展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 图纸专区 > 课件教案


copyright@ 2023-2025  zhuangpeitu.com 装配图网版权所有   联系电话:18123376007

备案号:ICP2024067431-1 川公网安备51140202000466号


本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!