部分-XHTML设计基础.ppt

,XHTML设计基础,ASP.NET程序设计XHTML设计基础,授课人：代霞Email：daixTel：82878177QQ：75085881,主体纲要,第一部分XHTML设计要求第二部分XHTML常用标签第三部分使用CSS第四部分分析页面布局和CSS的利器,第一部分XHTML设计要求,XHTML是基于HTML的，它是更严密、代码更整洁的HTML版本，注意以下区别，就很容易向XHTML迈进：一、选择正确的DTD（DocumentTypeDefinition）DOCTYPE是documenttype（文档类型）的简写，用来说明文件用的XHTML或HTML版本。在XHTML中必须声明文档类型，以便于浏览器知道正浏览的文件类型并检查文档，声明必须放在文档的html标签前XHTML1.0提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：,严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下：框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：,注：理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择。DocType声明不是XHMTL文档的一部分，也不是文档的一个元素，没必要加上结束标签！二、设定一个名字空间（NameSpace）允许通过一个在线地址指向来识别名字空间，名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个谁用了一个网址来代替。,的校验器不会由于这个属性没有出现而报告错误，这是一个固定的值，即使文档里没有包含，它也会自动加上。三、定义语言编码为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它使用的编码语言。四、标签被正确嵌套五、所有标签一定要小写,六、所有标签一定要关闭七、标签的属性一定要小写，值必须加双引号八、img标签必须加上alt属性,第二部分XHMTL常用的标签,一、层标签div标签，称为定义标记，它不具有实际的意义，其作用就是设定内容的摆放位置，实际就是一个“容器”，用来放置其他元素。二、图片标签src属性是图像的URL，alt属性是鼠标指示图片时显示的方案或当用户看不到图片时显示的文字时，显示的文本,三、链接标签1.链接到其他网站的网页请点击注：这里的http不能省略href属性代表链接URL，和标签中的内容表示链接的文字2.链接到自己网站的网页请点击链接到当前目录下的2.htm文件3.链接目录的问题（相对路径）请点击test文件夹下的2.htm请点击父目录下的2.htm,4.在新窗口中打开链接请点击注：XHTML1.1不再支持target=“_blank”5.链接Email地址a6.网页内部链接内部建立一个空链接，仅有id属性，无href属性例如有个位置索引要链接到这个位置返回索引Blank新开网页显示Self在当前网页显示,7.图片链接标签和标签的结合使用,四、列表标签1.无序列表HTML代码：效果,2.有序列表,3.释义列表,五、段落标签六、范围标签应用在行内，用以定义一小块需要特别标示的内容，它只能通过设置CSS样式才能发挥作用。,七、表单标签表单标签（）是XHTML的重要组成部分，主要用于采集和提交用户输入的信息。表单本身是没有什么用的。这需要编一个程序来处理表单中的数据。标签主要有三个重要的属性1.action属性：用户填入表单的信息总是需要程序来进行处理，这个属性指明表单数据要发送到的页面或程序，如果这个属性是空的或未写，那么当前的文档URL将被使用。2.method属性：有两个值:,get:它是默认值，使用这种方法表单中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送,空格转换为”+”，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISOLatin-1）值。例如：,3.enctype属性有两个值：application/x-www-form-urlencoded窗体数据被编码为名称/值对。这是标准的编码格式，缺省值；multipart/form-dataform表单中需要上传文件时需修改成这个值,八、表单中input标签类它们都是自关闭标签，若该标签需要提交数据，为了能正确区别各自提交的数据，请使用name属性文本框id是在后台操作的。其中type属性为text，提定其为标准文本框，value属性用来指定文本框里的默认文本。密码输入框和文本框基本类似，只是会以星号代替用户输入；,3.点击后提交表单数据的按钮单独使用没有任何意义，必须和标签结合使用4.重置按钮清空内容从新输入5.普通按钮alert弹出一个提示框简单的逻辑判断6.图片按钮注：它也可以用来提交表单数据,7.复选框刘成李阳复选框后面的文字选项采用直接输入，不需要属性而每个选项所代表的值用value属性控制另外它还可以有个checked属性，可以控制复选框是否被选中刘成,8.单选框刘成李阳与复选框使用类似，但这里要注意的一个问题是如果有多个单选框，但如果只能选中其中一个，则这几个单选框的name属性值必须完全相同，否则,9.选择文件框10.隐藏域虽然元素不会显示在文档里，所以用户也无法操作该元素。该元素通常用来传输一些客户端到服务器的状态信息。虽然此元素不会显示出来，但是用户可以通过查看HTML的源代码看到该元素属性的值，所以请注意，不要用该元素传递敏感信息，比如密码。,九、下拉框标签标签，它的每个选项使用标签进行嵌套，显示的文字在和之间，每个选项对应的值在的value属性中设定，若想其中某个选项被选中，请设定该项的selected属性为”selected”,搜索宝贝搜索店铺搜索掌柜搜索资讯搜索网页,十、meta标签它是一个常用的标签，放在标签中，主要用法如下：1.指明语言编码形式：2.网站描述3.为搜索引擎提供的关键字列表,4.告诉搜索引擎机器人（Robot）哪些页面需要索引，哪些页面不需要索引all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询，它和noindex,nofollow起相同作用index：文件将被检索；（让robot/spider登录）follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找),搜索引擎蜘蛛及Robot资料：,十一、label标签对form表单中的文本给定一个label标签，并使用for属性使其与表单组件关联起来，效果为单击文本标签，光标显示在相对应的表单组件内了。例如：点击下Firstname会自动进入第一个输入框,Firstname:Password:,十二、fieldset标签,显示一个和Windows中常用的GroupBox类似的界面，可以对一些信息进行分组显示，例如注册中的必填信息和选填信息。,justatest,十三、textarea标签,它有几个重要的属性：rows:显示的行数，超过则使用滚动条；cols:显示的列宽readonly:内容只读的disable:无法获得焦点,文字以灰色显示,textarea有几个重要的属性,十四、表格(table）标签（HTML中非常重要的标签)1.简单的表格形式,tr：表格的数据行；td：表格的数据列；,2.为表格设计样式：,tableborder-collapse:collapse;tabletd,tablethborder:solid1pxblack;,tableborder-collapse:separate;tabletd,tablethborder:solid1pxblack;,3.table标签中的标签如果按1中的设计，使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACMEInc，1000，1947，XYZCorp，2000，1973如果更改设计,一个屏幕阅读器一般会这么读：公司:ACMEInc，雇员:1000，成立于:1947,以此类推比之前好多了。,4.table标签中的标签和标签summary标签主要是用来对表格进行描述，使得那些用“听”的浏览者了解表格的内容。caption标签为标签加个表格标题,5.表格中的跨行与跨列,使用colspan属性和rowspan属性，如左图“公司”这个标题跨了两行(rowspan=“2”），“雇员”这个标题跨了两列，“成立于”这个标题跨了两行,6.table标签中的thead、tbody、tfootthead、tbody和tfoot使开发人员能够按逻辑将一个表格进行划分,使用thead、tbody、tfoot的优势样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。,7.表格布局的应用（1）表格宽度，使用CSS属性：width：值控制，例如width:400px;或width:40%宽度为容器总宽度的40%（2）表格内部元素对齐vertical-align属性控制内容垂直方向对齐方式；text-align属性控制内容水平方向对齐方式；（3）传统的table布局用table来做页面，就好像在excel里面填数据，是结构化位置后放置内容；用div来做页面，就好像在剪报排版，先结构化信息再排位置。,从table到div，不是简单地将变成，而是要换一种眼光去看这个世界！div代表的是网络世界发展的方向。它们一个简单，一个先进，萝卜白菜，你又会怎么选呢？自从用了div布局啊,代码结构倍儿清晰,浏览速度还倍儿快,您瞧准喽,布局啊-还是div!让table回到当时设计的目的，需要显示一个表格数据时再使用它，而不再用到布局上！,第三部分使用CSS,一、什么叫CSSCSS（CascadingStyleSheets）：层叠样式表，一种定义样式的语言，用于描述如何格式化和显示网页中的信息。目前标准是CSS2.1。层叠：一种类似继承的关系，父特征传递给子，子有更特殊的特征。基样式规则适用于整个样式表，但可以被更具体的样式规则覆盖。请参考网站上面有“CSS在线手册”可进行查阅与学习！掌握CSS是作为一个网页程序员必须具备的知识！,二、CSS的神奇性,网站：网站提供一套标准的XHTML页面及CSS文件使用一个不同的CSS文件，就可以体现不同的设计风格，这些风格各异的页面，若查看源文件，会发现所有风格页面的源文件都是相同的，只是引用了不同的CSS文件。目前的Web设计标准：1.网页的所有内容都在XHTML网页中设计；2.网页的所有样式都放置在CSS中。,三、CSS的选择器（selector）要想使CSS样式应用到特定的XHTML元素，需要找到这个元素，执行这一任务的样式规则叫选择器。标签选择器例：bodycolor:#111111;font-size:12px;imgborder-width:0边框的宽度;对应的标签对应相应的样式；id选择器（整个文档中这种样式是唯一的）测试文本#introfont-weight:bold;,3.class选择器多个地方需要使用同种样式测试1测试2css样式.introfont-weight:bold;.开头4.伪类选择器指定的对象在文档中并不存在，标签的某个状态a:linkcolor:#FF0000/*未被访问的链接为红色*/a:visitedcolor:#00FF00/*已被访问过的链接为绿色*/a:hovercolor:#FFCC00/*鼠标悬浮在上的链接为橙色*/a:activecolor:#0000FF/*鼠标点中激活链接为蓝色*/I-V-H-A，请按这样的次序，否则可能失效！,5.选择器的灵活组合（1）Welcome应用CSS#maincopcolor:red;（2）.样式定义#HeadTop#Logo,四、对XHTML网页应用样式1.直接在标签的style属性进行设置格式是-某个属性：值在XHTML页面中直接使用在标签中加入,3.链接外部样式表（.css文件）这是作为Web标准推荐使用的方式在head标签中使用href：表示引用哪个.css文件；rel：是指在页面中使用这个外部的样式表type：指文件的类型是样式表文本4.导入外部样式表在head标签中使用（这种方式不要忘了分号；),5.链接与导入的区别（1）link属于XHTML标签，而import完全是CSS提供的一种方式，link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，import就只能加载CSS（2）当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载（3）import是CSS2.1提出的所以老的浏览器不支持，link不存在这个问题；所以，目前使用link链接.CSS是个不错的选择！,五、CSS文件的设计在VS.NET2005中可添加.css文件，使用进行设计,六、CSS中的单位和值16进制颜色如#ffffff，#07dc0f长度（1）绝对单位：英寸(in)、厘米(cm）、毫米（mm）、磅（pt）、pica=12pt（2）相对单位：em相对于字体的font-sizeex相对于小写字母x的高度px像素，最常用,七、CSS的盒模型（BOXModel）,margin：边距，四个方向为margin-top，margin-right，margin-bottom，margin-leftborder：边框，四个方向为border-top，border-right，border-bottom，border-leftpadding：填充，四个方向为padding-top，padding-right，padding-bottom，padding-left,content：主体内容,例如下面的样式#MyBoxmargin:10px;padding:5px;border-width:0px;width:70px;/内容的宽度这个区域的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距=10px+0px+5px+70px+5px+0px+10px=100px,1.IE的框模型问题：IE把填充宽度看作是内容宽度的一部分，按上例它的区域宽度=10px+0px+70px+0px+10px=90px2.css空白边叠加问题当两个垂直边距相遇时，它们形式一个空白边，它的高度等于两个发生叠加的边距中高度较大那个值。,八、定位（position）1.视觉格式化模型（1）块级元素例如:p、h1、div等元素常常称为块级元素（block-levelelement），每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始。自动换行使用的CSS属性：display:block;div（2）行内元素例如：和，不需要在新行内显示，而且也不强迫其后的元素换行img使用的CSS属性：display：inline;,注：块级元素（block）的高度，行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度,和是块元素的例子。而行内元素（inline）的特点是：高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子。要想为行内元素设定高度等值，必须将其转为块级元素，即设其display属性为block，或直接使用浮动（float）,（3）隐藏元素当某个元素的CSS属性被设置为display:none时，浏览器会完全忽略这个元素，此元素将不会被显示。2.CSS中的定位CSS中有三种基本的定位机制：普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。（1）普通流学完框模型之后我们知道网页是由一个个的框组成的，那么在最简单的不包含CSS的页面里，浏览器怎样定位各种框呢？在这种情况下，浏览器会根据各个框在html中出现的顺序，由上而下一个接一个的排列，形象一点我们把这样方式称作“流”，区别于浮动和绝对定位这两种较特殊的,定位方式，这种流我们称之为“普通流”。它们之间的垂直距离由框的垂直空白边计算出来。这种方式可用CSS属性position：static控制。（2）相对定位使用CSS属性position：relative，在相对定位下，元素的位置相对于它本来该出现的位置的偏移。（3）绝对定位使用CSS属性position:absolute，在绝对定位下，元素的位置相对于最近的已定位的祖先元素。（4）元素的堆叠顺序使用CSS属性z-index:值，值越大，元素越在上面。,九、浮动（float）浮动模型是在布局中用到的最重要的概念之一，使用float属性进行控制。浮动的框可以左右移动，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。对一个元素应用float属性会自动将它转变成一个块级元素，其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围，形成Word中文字环绕的效果。float可以取三个可能的值left：向左浮动；right：向右浮动；none：消除浮动,1.浮动的一些规则：（1）多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。,（2）若包含的容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住。,2.浮动的清