| 网站首页 | 站内资讯 | 原创图书 | 图文教程 | 视频教程 | 课件下载 | 远程网校 | 留言建议 | 视频教程吧 | 官方微博 | 
>>  您现在的位置: Flash课件吧 >> 图文教程 >> 网页教程 >> 正文
专题栏目
畅销教材
征稿与合作
如果您是计算机方面的专家或对计算机在某方面的应用有一定心得,我们真诚地希望与您合作。请下载作者信息表并认真填写。在邮件主题中注明寻求合作字样,我们将尽快给您答复。
  • 下载作者信息表
  • 邮件联系我们
  • 相关文章
    推荐图书
    第9课 DIV+CSS网页布局
            ★★★   
    第9课 DIV+CSS网页布局
    >>  教程简介: 
    作者:课件吧 教程来源:本站原创 点击数: 更新时间:2008/5/20 9:15:57

    特别致谢

      本教程由课件吧(http://www.cai8.net)开发,并由本书作者寒蓝老师提供在“闪客起航”开设专栏进行在线学习,以帮助大家快速掌握CSS的知识。
      本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用,深受广大读者的欢迎,目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。
      朋友们可以在全国各新华书店购买此书,或者在当当网互动出版网邮购此书。


    第九课 DIVCSS布局

    上一节用表格+CSS进行网页布局,虽然在某种程度上提高了网站开发和维护的效率,但是这种方法毕竟还是传统的网页布局技术,没有跳出表格布局的模式。如果网页布局比较复杂,那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时<table> 标签、<tr>标签、<td>标签交织在一起,它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。

    利用DIVCSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以越来越受到网页开发者的欢迎。

    9.1 理解CSS盒子模型

    网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性,一个CSS盒子也都具备这些属性。如图9-1所示是一个CSS盒子的示意图。

    9-1 一个CSS盒子

    在利用DIVCSS布局网页时,需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图9-2所示是一个网站首页的CSS盒子布局示意图。

    9-2 CSS布局示意图

    从图9-2可以看出,这个网页一共设计了7个盒子。最大的盒子是body{},这是一个HTML元素,是HTML网页的主体标签。在body{}盒子中嵌套一个#container{}盒子(这里的#container是一个CSS样式定义,是一个标识选择符),可以称这个盒子为页面容器。在#container{}盒子中有嵌套3个盒子#header{}#main{}#bottom{},这3个盒子分别是网页的头部(BannerLogo、导航条等)、中部(网页的主体内容)、底部(版权信息等)。#main{}盒子中嵌套两个盒子#left{}#right{},这是一个两栏的页面布局,这两个盒子分别用来容纳左栏和右栏的内容。

    9.2 DIV标签的应用

    XHTML是一种在HTML4.0基础上优化和改进的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。

    在网页文档中,利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏,可以看到一个“插入Div标签”按钮,如图9-3所示。

    9-3 “插入Div标签”按钮

    下面利用DIVCSS具体创建一个盒子。

    1)新建一个网页文档,切换到“代码”视图下。可以看到<head>标签前的几行代码是用来定义网页文档XHTML类型的。当我们使用DIVCSS布局页面时,这几行代码是不能缺少的。如图9-4所示。

    9-4 新建网页文档的代码视图

    2)将光标定位在<body>标签下面一行,单击“布局”工具栏上的“插入Div标签”按钮,弹出“插入Div标签”对话框,如图9-5所示。

    9-5 “插入Div标签”对话框

    [1] [2] [3] [4] 下一页

      >> 教程录入:admin    责任编辑:admin 
    网友评论:(只显示最新8条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 管理登录 | 
    版权所有 课件吧 Copyright ◎2006 - 2013
    如涉及侵权行为请书面告之,本站将立即处理
    站长:cai8net  备案序号:豫ICP备13010258号