第1章 走进页面布局设计(理论)

第一章走进页面布局设计课程地位课程目标学习内容XHTML基本语法网页布局模型页面背景特效及元素定位导航栏学习目标使用布局模型设计商业站点页面布局使用页面背景特效及元素定位实现复杂的布局设计熟练掌握常用导航栏的制作过程实战项目综合项目：51Job招聘专版本章内容XHTML的作用及发展XHTML与HTML的区别XHTML的DOCTYPE和基本标签CSS常用属性本章目标熟练区别XHTML与HTML理解XHTML的DOCTYPE创建简单的XHTML页面布局内容回顾HTML文档结构HTML基本标签文本标签、文字布局、超链接表单及表单元素form、inputCSS（层叠样式表）布局知识表格布局、DIV布局css复习样式表分类：内联样式表、内部样式表、外部样式表选择器分类：标签选择器类选择器：根据元素Class属性来选择元素ID选择器：根据元素ID来选择元素其他选择器伪类选择器例如：a:hover{color:red}a:visited{color:blue}子选择器例如：#linksa{color:blue;}后代选择器例如：p.p1{color:#0000CC;}通用选择器例如：*{font-size:12px}p*{font-size:12px}群组选择器例如：p,td,a{color:red}1.XHTML简介1.1为什么使用XHTML运行在用户机器上的浏览器种类繁多，在技术实现细节上存在差异HTML缺陷不能适应现在越多的网络设备和应用需要代码不规范，浏览效果不一致内容与表现混杂1.2什么是XHTMLXHTML指可扩展超文本标签语言（ExtensibleHyperTextMarkupLanguage）W3C组织在HTML4的基础上，用XML的规则对其进行重构是HTML向XML过渡的一种新标准HTMLXHTML&XML2.XHTML特点及发展优势XML是Web发展的趋势XHTML适合HTML浏览器，同时也适应XML系统统一浏览器的页面解析规则XHTML可以与其他基于XML的标记语言、应用程序及协议进行良好的交互工作，如无线应用通讯协议（WAP）3.如何过渡到XHTMLXHTML1.0在HTML4基础上发展的新标准使用XHTML1.0的步骤添加DOCTYPE(文档类型)编写HTML基本标签（遵守一些XHTML标签规则）!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN如何过渡到XHTMLXHTML文档有三个主要的部分DOCTYPEHeadBodyDOCTYPEheadbody3.如何过渡到XHTML什么是DOCTYPE-1DOCTYPE是documenttype(文档类型)声明页面文档采用的XHTML版本浏览器按照DOCTYPE中的DTD解析文档内容3.如何过渡到XHTML过渡的(Transitional)严格的(Strict)框架的(Frameset)!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN=!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN=什么是DOCTYPE-2小结XHTML是以XML规则重构HTML4的一种新规范XHTML适应多种网络设备和应用的需要XHTML语义更严谨、更规范XHTML是一门新的网络语言吗？需要记忆新的标签？4.XHTML与HTML区别XHTML在标签的使用规则上比HTML更严格、更规范主要体现在以下几方面：XHTML元素必须被正确地嵌套XHTML元素必须被关闭标签名必须使用小写字母XHTML文档必须拥有根元素属性名称必须小写属性值必须加引号属性不能简写用Id属性代替name属性XHTMLDTD定义了强制使用的HTML元素htmlheadtitleXHTML基础/title/headbodyP这是一个段落/PimgSRC=“images/logo.gif”//body/htmlXHTML与HTML区别p这是一个段落/p标签名称需小写imgsrc=images/logo.gif/属性名称小写htmlheadtitleXHTML基础/title/headbodybli这是一条文本信息/b/libr/body/htmlXHTML与HTML区别bli这是一条文本信息/li/b标签不能交叉使用br/空标签也需要关闭htmlheadtitleXHTML基础/title/headbodypclass=mystyle这是一个文本段落/pinputtype=”text”name=”id”disabled//body/htmlXHTML与HTML区别pclass=“mystyle”这是一个文本段落/p属性值需要用双引号inputtype=”text”name=”name”disabled=“disabled”/属性值必须用完整形式htmlheadtitleXHTML基础/title/headbodyinputtype=textname=namedisabled//body/htmlXHTML与HTML区别inputtype=textname=nameid=iddisabled=disabled/采用id代替name属性!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN添加DOCTYPE5.XHTML基本标签5.1块状标签（block）在默认状态下，块状元素的宽度为100％，会占据一整行典型标签：div：层h1-h6：文章标题hr：插入一条水平线ul/ol：项目符号和项目列表table：插入一个表格p：插入一个段落块状标签应用-1示例:block-1.htmlbodyh1XHTML页面设计/h1hr/pWEB标准不是某一个标准，而是一系列标准的集合。/ppXHTML是HTML向XML过渡的一种新标准。/pbody块状标签应用-2示例:block-2.html…bodydivid=menu导航栏/divdivid=content正文部分/divdivid=bottom版权信息/div/body5.2行内标签(inline)行内元素在默认情况下没有宽度和高度，宽度和高度由行内元素中的内容决定典型标签a：超链接span：行级文本容器img：图像标签input：输入元素行内标签应用-1…h1W3C释义/h1hr/pspanclass=firstLetterW3C/Span是英文WorldWideWebConsortium的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者TimBerners-Lee。/pCSS样式属性常用样式属性常用属性样式color:设置字体颜色例如：color:#FFCC33Background-color:设置背景颜色Background-image:设置背景图片background-repeat:设置背平铺方式background-repeat:no-repeattext-align:设置对齐方式text-decoration:设置文本的修饰例如text-decoration:nonefont-size:设置字体大小border：设置边框样式CSS样式属性常用样式属性6.1常用属性样式——display设置元素在页面上的显示方式display:value;value：block：块状显示inline：同前一元素在一行显示none：隐藏元素display属性应用示例:display.html#first{width:300px;height:50px;background:#99cccc;display:block;text-align:center;line-height:50px;font-size:12px;border:#ccc1pxdashed;margin:}6.2常用样式属性——float浮动属性用于设置元素在父级包含容器中的停靠方向float:value;value：left：停靠在父容器的左侧right：停靠在父容器的左侧none：不停靠，按默认方式排列6.3常用样式属性——补丁margin:value;padding:value;补丁属性应用示例:css-margin-padding.html#content#menu{background-image:url(images/bg.jpg);padding-top:5px;padding-left:5px;width:395px;height:31px;}7.创建XHTML页面步骤第一步：选择合适的DOCTYPE第二步：编写HTML文档结构第三步：添加内容!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/titleXHTML基础/title/headbody/body/html欢迎进入spanXHTML/span编程世界br/br/欢迎进入pXHTML/p编程世界布局演练-1布局演练-2布局演练-3完成P23面作业总结XHTML指可扩展超文本标签语言（ExtensibleHyperTextMarkupLanguage），是使用XML重构HTML4.01而来的新标准XHTML与HTML的区别在于XHTML语法规则上更严谨、更规范块状标独占一行，宽度为100%，行内元素宽度和高度由其中的内容决定，所以设置宽度和高度无效。可以采用display属性改元素的默认显示方式。常用的样式属性有：border(边框)、margin(外补丁)、padding(内补丁)、d