DIV的基础知识.pptVIP

目标:DIV布局优点、常用HTML标签 内容： 掌握网站的制作流程 理解DIV与Table布局的区别 理解结构与表现分离 了解XHTML代码规范和XHTML校验 掌握head标签区的相关设置 牢记DIV+CSS排版常用的标签 1、网站的制作流程 制作流程图 方案策划 资料整合 设计页面 切割页面 拼合页面 发布推广 系统开发 　其他元素（FLASH/视频/音乐） 2、DIV布局与Table的区别 两者布局比较 优点 缺点 表格 使用简单、容易掌握 代码雍长，浏览速度慢，不便于修改 DIV 实现结构与表现分离，浏览速度快，便于修改 运用DIV来进行排版，不是将原来使用表格的地方替换成DIV，而是使用合适的标签来表达文档的结构。 3 、DIV－结构与表现分离 内容 网页中供浏览者访问的信息，包括文字、图片，不包含任何“装饰”。 结构 将混乱的内容进行排版（标题、正文）以便于浏览者阅读。 表现 将页面中混乱的信息进行“装饰”（用来改变页面的外观。） DIV用来显示内容，而CSS则用来表现内容 注意：不要用结构标签来表现效果 ４、有关DOCTYPE DOCTYPE是document type(文档类型)的简写，用来说明XHTML或者HTML是什么版本. 过渡型（Transitional ）严格型（Strict ） 框架型（Frameset ） 设定名字空间（Namespace）,用来收集元素类型和属性名字。 声明编码语言 为了被浏览器正确解释和通过验证 目前仍然使用过渡型。XHTML的目的是使HTML最终向XML过渡。 4、有关XHTML的基本要求 用小写字母书写所有标签，否则文档将被W3C校验无效。 需为所有图片添加alt属性，要满足纯文字浏览器和屏幕阅读机的用户。 关闭所有标签，单标签和空标签是用一个正斜杠（/）来关闭。 如：p每一个打开的标签都须关闭/p img src=“title.gif”/ Xhtml的校验 通过网址 5 、head标签区设置 站点的简要介绍 meta name=description content=新网页设计师。web标准的教程站点，推动web标准在中国的应用 / 站点的关键词 meta content=designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, name=keywords / 收藏夹小图标 link rel=icon href=/favicon.ico type=image/x-icon /link rel=shortcut icon“ href=/favicon.ico type=image/x-icon / 提示：小图标可以在FF实时预览，IE须有网络环境预览。 6、DIV排版常用标签 p标签、br标签、img标签、h1~6标签、div标签、span标签、form标签、 ul标签、ol标签、li标签、dl标签、dt标签、dd等 dl是释义列表的开始标签，每个被解释的事物的开始标签为dt，每个解释的内容的开始标签是dd. 根据所要表现的内容来选择对应的标签。 * 图层的基本操作 1、创建新图层 2、图层编辑 3、图层的锁定功能 4、图层与图层之间的对齐和分布 5、改变图层的排列顺序 6、图层的合并 7、图层组 1.所有的xhtml代码小写 2.属性的值一定要用双引号()括起来，且一定要有值 3.每个标签都要有开始和结束，且要有正确的层次 4.空元素要有结束的tag或于开始的tag后加上/ 5.表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 6.h1到h6的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 7.给每一个表格和表单加上一个唯一的、结构标记id 8.给重要的区块加上注释 9.给图片加上alt属性 10.所有的标签必须进行合理的嵌套 11.根元素前必须有元素，宣告使用那一种DTD 12.根元素必须有xmlns属性来指定使用/1999/xhtml的namespace * 图层的基本操作 1、创建新图层 2、图层编辑 3、图层的锁定功能 4、图层与图层之间的对齐和分布 5、改变图层的排列顺序 6、图层的合并 7、图层组 1.所有的xhtml代码小写 2.属性的值一定要用双引号()括起来，且一定要有值 3.每个标签都要有开始和结束，且要有正确的层次 4.空元素要有结束的tag或于开始的tag后加上/ 5