用DIVCSS做网站设计布局参考. 下载本文

内容发布更新时间 : 2024/9/29 7:45:15星期一 下面是文章的全部内容请认真阅读。

用DIV+CSS 做网站设计布局参考 第一节

怎么改善现有网站一,用 CSS 定义元素外观 如定义了 h1 h2

  • 等, 还可以继续设置里面的值, h1 为红色 14px , 前面不要圆点等. 如 li 二,用结构化元素代替无意义的垃圾. 例:第一节
    第二节
    第三节
    上例如下表现可能会更好
    • 第一节
    • 第二节

    • 第三节
    三,给每个表格和表单加上 ID 给表格或表单赋予一个惟一的,结构的标记,例如: 例如何处使用

    都要合 理,这样不仅便于理解文档内容,同时对于 CSS 编写也很重要. 3,关于理解 CSS 灵活的运用 CSS 选择器来进行 CSS 定义,将通用的样式写在外部 CSS 文件中,然后在页面 内调用,同时还可以将不同的 CSS 定义在几个文件中. 对于多次引用的样式可以用 CLASS 来定义,不需要每个元素都定义 ID;也不是一定要用 DIV, 有的内容完全可以用

    来代替, 同样都是块级元素, 一样有盒模型的七个参数,

    仅仅方便浮动. 4, \通过验证\并不是最终目的 W3C 校验仅仅是帮助制作者检查 XHTML 代码的书写是否规范, CSS 的属性是否都在 CSS2 的规范内.代码的标准化仅仅是第一步,不是说通过校验,网页就标准化了. 让网页具有良好的结构, 更快的浏览速度, 更友好的界面以及对更多设备的支持才是最终目的.

    第二节 DIV+CSS 做网站设计布局的优势分析

    市场的需求往往引起这个行业得很大改革, 文件下载与页面显示速度更快,使得很多网站已经开始重构 Web,采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面的外观. 一,Web 标准:是一系列标准的集合.

    二,网页主要由三部分组成:结构(Structure),表现(Presentation)和行为(Behavior). 三,对应的标准也分三方面: a) 结构化标准语言主要包括:XHTML 和 XML b) 表现标准语言主要包括:CSS c) 行为标准主要包括对象模型:(如 W3C

    DOM),ECMAScript 等. d) 根据 W3C DOM 规范是一种 W3C 颁布的标准,用于对结构化文档建立对象模型, 从而使用户可以通过程序语言 (包括脚本) 来控制其内部结构.简单的理解,DOM 解决了 Netscaped 的 Javascript Microsoft Jscript 之间的冲突, 给予 WEB 设计师和开 发者一个标准的方法,让他们来访问他们站点中的数据,脚本和表现层对象.

    四,采用标准的好处: a) 文件下载与页面显示速度更快. b) 内容能被更广泛的设备所访问 (包括屏幕阅读机, 手持设备, 搜索机器人, 打印机, 电冰箱等) . c) 用户能够通过样式选择定制自己的表现界面. d) 所有页面都能提供适于打印的版面.

    五,采用标准对网民有者的好处如下: a) 更少的代码和组件,容易维护. b) 带宽要求降低(代码更简洁) ,成本降低. c) 更容易被搜索引擎搜索到. d) 改版方便,不需要改变页面内容.

    六,什么是内容,表现,结构和行为 a) 内容就是制作者放在页面内真正想要访问者浏览的信息, 可以包含数据, 文档或者 图片等. b) 结构用结构将它格式化.分成标题,正文和列表等.易于阅读和理解. c) 表现:虽然定义了结构但是内容还是原来的样式没有改变.例如,标题字体没有变 大, 正文的颜色也没有变化, 没有背景, 没有修饰. 所有用来改变内容外观的东西, 称之为\表现\行为就是对内容的交互及操作效果,例如,使用 Javascript 判断一些表单提交,或 者实现菜单的显示和隐藏等. HTML 和 XHTML 页面都是由\结构,表现和行为\这三方面组成的.内容是基础, 然后是附加上去结构和表现,最后再对它们加点\行为\七,DIV 与 CSS 结合的优势

    八,传统的 HTML 3.2/4.0 标签里既有控制结构的标签,如


    等,也有控制表现的 标签如;

    等,还有本意是用来控制结构却被用来控制表现的 标签

    ,结构与表现标签混杂在一起. 九,网站制作者往往会遇到如下问题:

    1,,改版:例如需要把标题文字替换成红色,下边结变成一像素灰色的虚线,那么就要一页 一页的修改.CSS 的出现,解决了\批量修改表现\的问题,最广泛的被制作者接受 的 CSS 属性,例如,控制字体的大小颜色,超链接,表格的背景色等.

    2, 数据的利用:本质上讲,所有页面信息都是数据,例如,CSS 所有属性的解释,就 可以建立一个数据库,数据就存在数据查询,处理和交换的问题.由于结构表现混杂在 一起, 装饰图片, 文字被层层的表格嵌套拆分. 从哪里开始是标题, 从哪里开始是说明, 哪些是附加信息不需要打印?如果靠软件是无法判断的, 唯一的方法是人工处理. 这要 如何解决呢,就是要内容,结构与表现分离. 例如

    说明资料

    h1{ font:\宋体\如果把上例改为红色,粗体,下边线为红色虚线可以直接修改 h1 的样式 h1{ font:\宋体\color:#F00; border-bottom:1px dashed #F00; } 第三节

    一,HTML 与 XHTML 打开一个网页,查看它的源代码,就会看到一些有规律的英文代码,这些组成网页的代码就 是——超文本链接标示语言(Hypertext Markup

    Language,html)\超文本\就是指网页内包含 图片,链接甚至音乐,程序等非文字元素, \标示\就是说它不是程序,只是于文字及标记 组合而成. 浏览器或其它可以浏览网页的设备将这些\语言翻译过来,并照定义的格式显示出 来,转化成最终看到的网页. 二,常用的 HTML 标签 1, 标题

    2,段落 段落内也可以包含其他的标签,如图片标签,换行标签
    ,链接标签等 3,换行标签
    强制换行 为了向 XHTML 过度,最好养成关闭标签的好习惯,为空标签加上\如
    4,链接 链接可以分为超链接和锚点,这两种标签都是使用锚标签
    来建立. 5,列表 有三种 无序列表,列表项目前面有黑色的圆点
    有序列表,列表项目前面有数字序号.
    释义列表是一列事物以及与其相关的解释.
    6,图片 图像(images)是由标签定义的,也是一个空标签.
    等标签都可以设置宽度,高度,背景色等多种属性.可是一般不 推荐在 HTML 内定义这些属性,而应将其统一定义到 CSS 样式表内,以方便

    修改. 8,层 层(div)称为定位标记,其作用是设置文字表格图片等的摆放位置.

    若想灵活地使用层来布局页面,就要深刻理解层的含义,它和表格,标题等标签不同,它没 有实际的意义,只是一个\容器\用来放置其它元素,然后利用 CSS 样式从而布置这个容 器的摆放位置. 9,范围 范围(span)和层的作用类似,只是标签一般应用在行内,用以定义一个小块需要特别标示的内容,标签需要通过 CSS 样式表才能发挥作用. 10,框架 使用框架(Frames),可以在一个浏览器窗口中显示多个页面. 所有的框架都放在一个总的 HTML 文件中,这个档案只记录了该框架如何分割,不会显示 任何资料,所以没有标记,浏览器通过解释这个