部分-XHTML设计基础.ppt

,XHTML 设计基础,ASP.NET程序设计 XHTML设计基础,授课人： 代 霞 Email： Tel：82878177 QQ：75085881,主体纲要,第一部分 XHTML设计要求 第二部分 XHTML常用标签 第三部分 使用CSS 第四部分 分析页面布局和CSS的利器,第一部分 XHTML设计要求,XHTML是基于HTML的，它是更严密、代码更整洁的 HTML版本，注意以下区别，就很容易向XHTML迈进： 一、选择正确的DTD（Document Type Definition） DOCTYPE是document type（文档类型）的简写，用来 说明文件用的XHTML或HTML版本。在XHTML中必须声 明文档类型，以便于浏览器知道正浏览的文件类型并检查 文档，声明必须放在文档的html标签前 XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional):要求非常宽松的DTD，它允许你继 续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代 码如下：, 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下： 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：, 注：理想情况当然是严格的DTD，但对于我们大多数刚 接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。 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. 在新窗口中打开链接 请点击 注：XHTML 1.1不再支持target=“_blank” 5. 链接Email地址 6. 网页内部链接 内部建立一个空链接，仅有id属性，无href属性 例如有个位置 索引 要链接到这个位置 返回索引 Blank新开网页显示 Self在当前网页显示,7. 图片链接 标签和标签的结合使用 ,四、列表标签 1.无序列表 HTML代码： 效果,2.有序列表,3. 释义列表,五、段落标签 六、范围标签 应用在行内，用以定义一小块需要特别标示的内容，它只能通过设置CSS样式才能发挥作用。,七、表单标签 表单标签（）是XHTML的重要组成部分，主要用 于采集和提交用户输入的信息。表单本身是没有什么用的。 这需要编一个程序来处理表单中的数据。 标签主要有三个重要的属性 1. action属性： 用户填入表单的信息总是需要程序来进行处理，这个属 性指明表单数据要发送到的页面或程序，如果这个属性是 空的或未写，那么当前的文档URL将被使用。 2. method属性： 有两个值:,get:它是默认值，使用这种方法表单中提交的数据将会附 加在url之后，以?分开与url分开。字母数字字符原样发送, 空格转换为”+”，其它符号转换为%XX,其中XX为该符号以 16进制表示的ASCII（或ISO Latin-1）值。 例如： /1.htm?keyword=+ajax & /login.aspx?username=zhangshan&password=111 使用这种方式传输的数据量小，由于受到URL长度的限 制，最多只能传递1024字节（1KB），它在HTTP头部传递 post：这种方法传递的数据量大，可以达到2M，它把数据 作为http请求的内容，数据不会附加在url之后。,3. enctype属性 有两个值： application/x-www-form-urlencoded 窗体数据被编码为名称/值对。这是标准的编码格式，缺 省值； multipart/form-data form表单中需要上传文件时需修改成这个值,八、表单中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, no follow“ 起相同作用 index：文件将被检索；（让robot/spider登录） follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录) nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找),搜索引擎蜘蛛及Robot资料： /post/67.htm meta标签还有很多用法，例如页面被载入和调出时的一些 特效，让网页多长时间（秒）刷新自己，或在多长时间后 让网页自动链接到其它网页，具体资料，请参见： /post/Meta_tags.html,十一、label标签 对form表单中的文本给定一个label标签，并使用for属性 使其与表单组件关联起来，效果为单击文本标签，光标显 示在相对应的表单组件内了。 例如：点击下First name会自动进入第一个输入框,First name: Password: ,十二、fieldset标签,显示一个和Windows中常用的GroupBox类似的界面，可以对一些信息进行分组显示，例如注册中的必填信息和选填信息。, just a test ,十三、textarea标签,它有几个重要的属性： rows:显示的行数，超过则使用滚动条； cols:显示的列宽 readonly:内容只读的 disable:无法获得焦点,文字以灰色显示,textarea有几个重要的属性,十四、表格(table）标签（HTML中非常重要的标签) 1. 简单的表格形式,tr：表格的数据行； td：表格的数据列；,2. 为表格设计样式：,table border-collapse:collapse; table td,table th border:solid 1px black; ,table border-collapse:separate; table td,table th border:solid 1px black; ,3. table标签中的标签 如果按1中的设计，使用屏幕阅读器的人可以听到如下顺 序的词：公司，雇员，成立于，ACME Inc，1000，1947， XYZ Corp，2000，1973 如果更改设计,一个屏幕阅读器一般会这么读：公司: ACME Inc ，雇员: 1000，成立于: 1947, 以此类推比之前好多了。,4. table标签中的标签和标签 summary标签主要是用来对表格进行描述，使得那些用 “听”的浏览者了解表格的内容。 caption标签为标签加个表格标题,5. 表格中的跨行与跨列,使用colspan属性和rowspan属性，如左图“公司”这个标题跨了两行(rowspan=“2”），“雇员”这个标题跨了两列，“成立于”这个标题跨了两行,6. table标签中的thead、tbody、tfoot thead、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,一、什么叫CSS CSS（Cascading Style Sheets）：层叠样式表，一种定 义样式的语言，用于描述如何格式化和显示网页中的信 息。目前标准是CSS 2.1。 层叠：一种类似继承的关系，父特征传递给子，子有 更特殊的特征。基样式规则适用于整个样式表，但可以被 更具体的样式规则覆盖。 请参考网站 上面有“CSS在线手册”可进行查阅与学习！ 掌握CSS是作为一个网页程序员必须具备的知识！,二、CSS的神奇性,网站： 网站提供一套标准的XHTML页面及CSS文件 使用一个不同的CSS文件，就可以体现不同的设计风 格，这些风格各异的页面，若查看源文件，会发现所有风 格页面的源文件都是相同的，只是引用了不同的CSS文件。 目前的Web设计标准： 1. 网页的所有内容都在XHTML网页中设计； 2. 网页的所有样式都放置在CSS中。,三、CSS的选择器（selector） 要想使CSS样式应用到特定的XHTML元素，需要找到 这个元素，执行这一任务的样式规则叫选择器。 标签选择器 例： body color:#111111; font-size:12px; img border-width:0边框的宽度; 对应的标签对应相应的样式； id选择器（整个文档中这种样式是唯一的） 测试文本 #intro font-weight:bold;,3. class选择器 多个地方需要使用同种样式 测试1 测试2 css样式 .introfont-weight:bold; .开头 4. 伪类选择器 指定的对象在文档中并不存在，标签的某个状态 a:link color: #FF0000 /* 未被访问的链接为红色 */ a:visited color: #00FF00 /* 已被访问过的链接为绿色 */ a:hover color: #FFCC00 /* 鼠标悬浮在上的链接为橙色 */ a:active color: #0000FF /* 鼠标点中激活链接为蓝色 */ I-V-H-A，请按这样的次序，否则可能失效！,5. 选择器的灵活组合 （1） Welcome 应用CSS #mainco pcolor: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.NET 2005中可添加.css文件，使用 进行设计,六、CSS中的单位和值 16进制颜色 如#ffffff， #07dc0f 长度 （1）绝对单位：英寸(in)、厘米(cm）、毫米（mm）、磅（pt）、pica=12pt （2）相对单位： em相对于字体的font-size ex相对于小写字母x的高度 px 像素，最常用,七、CSS的盒模型（BOX Model）,margin：边距，四个方向为margin-top，margin-right，margin-bottom，margin-left border：边框，四个方向为border-top，border-right，border-bottom，border-left padding：填充，四个方向为padding-top，padding-right，padding-bottom，padding-left,content：主体内容,例如下面的样式 #MyBox margin:10px; padding:5px; border-width:0px; width:70px; /内容的宽度 这个区域的宽度=左边距+左边框+左填充+内容宽度+ 右填充+右边框+右边距 = 10px+0px+5px+70px+5px+0px+10px = 100px,1. IE的框模型问题： IE把填充宽度看作是内容宽度的一部分，按上例它的 区域宽度=10px+0px+70px+0px+10px=90px 2. css空白边叠加问题 当两个垂直边距相遇时，它们形式一个空白边，它的高 度等于两个发生叠加的边距中高度较大那个值。,八、定位（position） 1. 视觉格式化模型 （1）块级元素 例如: p、h1、div等元素常常称为块级元素（block-level element），每个块级元素都从一个新行开始，而且其后的 元素也需另起一行开始。自动换行 使用的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. 浮动的清理 使用CSS属性clear进行控制，它的值为： left：清除左边浮动对象 right:清除右边浮动对象 both：两边都不允许有浮动对象,十、CSS的一些使用技巧 1.CSS的注释 /* */ 2. 层叠的重要度，采用以下重要度次序 标为!important的用户样式 标为!important的作者样式 作者样式 用户样式 浏览器样