版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
DIV＋CSS实现整体布局第七章回顾与作业点评常用的HTML标签有哪些？表格布局适用于什么场合？预习检查简述XHTML使用的基本规范什么是盒子模型？盒子属性包括哪些？如何设置浮动？如何清除浮动？本章任务
制作一个符合W3C相关标准的页面完成贵美首页的整体布局本章目标掌握如何开发符合W3C标准的Web页使用盒子模型实现DIV+CSS整体布局什么是W3C标准W3C：WorldWideWebConsortium，万维网联盟W3C的职能：负责制定和维护Web行业标准W3C标准包括一系列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：DOM页面交互方面：ECMAScript……制定统一的Web标准W3CXHTML负责内容组织divspanph1，h2，h3，h4，h5，h6ol，uldl-dt-ddW3C提倡的Web结构4-1CSS负责页面样式字体大小字体颜色背景显示位置...W3C提倡的Web结构4-2优点：方便网站的修改和维护W3C提倡的Web结构4-3符合W3C规范页面的结构<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title></head><body>......</body></html>DOCTYPE声明网页内容网页头部网页主体W3C提倡的Web结构4-4规范的示例<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>贵美商城</title><linkhref="style.css"rel="stylesheet"type="text/css"/></head><body><h2>皮尔卡丹服装入住贵美商城</h2><divid="coat"><imgsrc="images/coat.jpg"alt="上衣"/></div><div>皮尔卡丹服装即日起正式入住贵美商城，服装主要包括上衣、牛仔裤、以及一些皮尔卡丹钱包、拉杆箱、挎包等用品......</div></body></html>W3C提倡的Web结构：1、内容（结构）和表现（样式）分离2、HTML内容结构要求语义化演示示例1：W3C标准页面<divclass="view"><p><imgsrc="photo.jpg"alt="Photo"/></p><p><inputtype="text"name="title"value="我的照片"
readonly="readonly"/></p></div>XHTML使用的基本规范标签名和属性名称必须小写
HTML标签必须关闭属性值必须用引号括起来标签必须正确嵌套文档必须拥有一个根元素属性不能简写<html>...</html>淘汰的标签<img/>标签的alt属性样式和内容分离表单的name和id使用DIV+CSS布局页面的兼容性Web页面开发注意问题<b>、<font>、<marquee>等为每一个有意义的图片增加alt属性例如：<imgsrc="photo.jpg"alt="我的照片"/>将样式和标签分开。不推荐直接写在标签里面：<pstyle="color:#f00">...</p>表单及表单元素要设置name和id属性例如：<formname="regform"id="regform"><inputname="userName"id="userName"/>...</form>小结什么是符合W3C标准的页面？XHTML使用的基本规范是什么？WEB页面开发需要注意哪些问题？为什么需要盒子模型贵美首页的盒子模型结构网页实际上是由一个个盒子模型组成的盒子属性：margin（外边距/边界）border（边框）padding（内边距/填充）盒子模型的相关属性各属性又分为四个方向上、右、下、左用户登录页面#main{
width:260px;
margin:0pxauto;
padding:60px10px10px10px;
border:2px#f2bb6fsolid;
background-color:#fdf7e7;
background-image:url(images/bg.jpg);
background-repeat:no-repeat;}<divid="main"><form>...</form></div>演示示例2：盒子模型外边距内填充边框可统一设置或四边分开设置margin属性marginmargin-topmargin-rightmargin-bottommargin-leftmargin外边距margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界margin:1px2px3px4px;margin:1px2px;margin:0pxauto;margin-left:1px;以下属性各代表什么含义？border属性border-colorborder-widthborder-styleborder边框border-topborder-rightborder-bottomborder-leftborderborder-left…修饰属性四个方向缩写形式border属性每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置border-style:none;border:1pxsolidred;border-right:5pxdottedblue;以下属性各代表什么含义？padding属性paddingpadding-toppadding-rightpadding-bottompadding-leftpadding内边距
padding-left:5px;padding:5px10px20px40px;padding:5px10px;四个边可以一次设置，也可以分别设置padding以下属性各代表什么含义？如何利用盒子模型实现如下贵美首页的布局？贵美首页布局2-1顶部主体底部#container{width:980px;margin:0pxauto;}#header{width:100%;height:150px;border:1px#F00solid;}#main{width:100%;height:400px;border:1px#F00solid;}#footer{width:100%;height:100px;border:1px#F00solid;}贵美首页布局2-2<divid="container"><divid="header">顶部（header）</div><divid="main">主体部分（main）</div><divid="footer">底部（footer）</div></div>页面HTML结构整体内容居中显示演示示例3：贵美首页布局练习——贵美首页布局需求说明：在Dreamweaver环境中，使用DIV+CSS实现贵美首页布局使用盒子属性设计页面内容居中显示，即最外层容器居中显示。完成时间：25分钟#header宽度：150px#main宽度：400px#footer宽度：100px#container宽度：980px在页面中居中共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解<divid="container"><divid="header">顶部（header）</div><divid="main"><divclass="cat">商品分类(cat)</div><divclass="content">内容(content)</div><divclass="sidebar">右侧(sidebar)</div></div><divid="footer">底部（footer）</div></div>为什么需要float浮动属性2-1如何解决中间两块布局无法同行显示的问题？?.cat,.sidebar{width:20%;height:100%;}.content{width:60%;height:100%;}能够实现所要的效果吗？为什么需要float浮动属性2-2如何解决中间两块布局无法同行显示的问题？?如何实现为希望的布局？浮动属性5-1float属性脱离常规文档流而表现为向右或向左浮动float属性的取值rightleftnoneleft向左浮动right向右浮动none不浮动<styletype="text/css">#first,#second,#third{width:100px;height:50px;border:1px#333solid;margin:5px;}</style>......<divid="first">第1块div</div><divid="second">第2块div</div><divid="third">第3块div</div>浮动属性5-2没有浮动的div<styletype="text/css">#first,#second,#third{
float:left;width:100px;height:50px;border:1px#333solid;margin:5px;}</style>......<divid="first">第1块div</div><divid="second">第2块div</div><divid="third">第3块div</div>浮动属性5-3向左浮动，脱离常规文档流<styletype="text/css">#first,#second,#third{
float:right;width:100px;height:50px;border:1px#333solid;margin:5px;}</style>......<divid="first">第1块div</div><divid="second">第2块div</div><divid="third">第3块div</div>浮动属性5-4向右浮动，脱离常规文档流演示示例4：浮动属性<styletype="text/css">#first,#second,#third{
float:right;width:100px;height:50px;border:1px#333solid;margin:5px;}#first{height:80px;}</style>......<divid="first">第1块div</div><divid="second">第2块div</div><divid="third">第3块div</div>浮动属性5-5均向右浮动，但third被卡住.cat,.sidebar{float:left;width:20%;height:100%;}.content{float:left;width:60%;height:100%;}贵美首页布局演示示例5：贵美首页布局clear清除属性4-1clear作用如果前一个元素存在左浮动或右浮动，则换行以区隔只对块级元素有效clear属性的取值rightleftbothnone<imgsrc="images/fruit.jpg"alt="水果"id="fruit"/><imgsrc="images/coat.jpg"alt="服装"id="coat"/><divid="example">这是一个例子<br/>一个服装图片<br/>一个水果图片<br/>这是一个例子<br/>一个服装图片<br/>一个水果图片</div>clear清除属性4-2#fruit{float:left;}#coat{float:right;}默认不清除浮动的效果<imgsrc="images/fruit.jpg"alt="水果"id="fruit"/><imgsrc="images/coat.jpg"alt="服装"id="coat"/><divid="example">这是一个例子<br/>一个服装图片<br/>一个水果图片<br/>这是一个例子<br/>一个服装图片<br/>一个水果图片</div>clear清除属性4-3#fruit{float:left;}#coat{flo
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 油茶订单种植合同范本
- 河道清包合同范本
- 《宁为战死鬼不做亡国奴》中华民族的抗日战争课件
- 产品研发合同范本
- 钻井工合同范本
- 车辆销售代购合同范本
- 2025年上海市16区高三语文二模试题汇编之积累运用（学生版）
- 《史沫特莱的“中国儿子”》课件-1
- 购买面粉的合同范本
- 2025成套设备采购合同范本
- 《数据的收集与整理》说课稿课件
- 人工智能产业学院建设方案
- 脚手架或模板支架立杆底地基承载力计算
- 超导材料应用举例PPT课件
- 2020年超星尔雅重说中国近代史通识课期末考试答案
- 急性肺动脉栓塞诊断及介入治疗经验分享PPT课件
- 初中数学知识框架
- 轮胎式装载机检测报告(共5页)
- 电动机可逆运行控制电路
- 抗菌药物分级管理目录(完整资料).doc
- 商业发票Commercial Invoice模板2
评论
0/150
提交评论