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

    特别致谢

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


    第八课 表格+CSS布局

    表格+CSS布局可以使设计的网页结构更加合理,更便于维护和更改网页的样式,但是从本质上讲,这种布局网页的方式只是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。

    8.1 实例效果

    本节通过一个实例来讲解一下用表格+CSS布局的方法。如图8-1所示是本实例的最终效果。这是在网站首页布局中经常会看到的局部布局效果,位置一般在网页的两侧。

    8-1表格+CSS布局实例效果

    针对这个布局效果,传统的表格布局方法是创建一个31列的表格,然后直接设置表格和每个单元格的属性。表格+CSS的布局方法不是这样。具体方法是,先创建一个31列的表格,表格和每个单元格的样式用CSS来控制,示意图如图8-2所示。

    图8-2 CSS样式控制表格示意图

    这里定义了4CSS类选择符:.left_tdbgall.left_top.left_mid.left_end,它们分别用来控制表格的样式和3个单元格的样式。

    8.2 制作步骤

    1.创建CSS文件

    1)新建一个CSS文档,保存为“8.1.css”。单击“CSS样式”面板中的“新建CSS规则”按钮,弹出“新建CSS规则”对话框,在其中设置如图8-3所示。

    图8-3 新建.left_tdbgall样式

    单击“确定”按钮进入“.left_tdbgallCSS规则定义”对话框,在其中选择“分类”列表框中的“背景”,设置“背景颜色”为#666666(灰色);然后选择“分类”列表框中的“方框”,设置宽和高分别为170像素和237像素,如图8-4所示。

    图8-4设置方框属性

    选择“分类”列表框中的“边框”,设置如图8-5所示。这样定义整个表格的边框为蓝色1个像素的蓝色细实线。

    图8-5设置边框属性

    完成CSS规则定义以后,单击“确定”按钮。这时文档窗口增加如下代码:

    /* 表格样式定义 */

    .left_tdbgall

    {

           width: 170px; /*定义表格宽度*/

           height: 237px; /*定义单元格高度*/

           background-color: #666666; /*定义背景颜色为灰色*/

           border: 1px solid #0099FF; /*定义表格边框为1像素蓝色细线*/

    }

    2)按照同样的方法定义一个.left_top类选择符,这个CSS样式用来控制第一个单元格(顶部单元格)。代码如下所示。

    /* 顶部单元格背景、文字、段落格式等定义 */

    .left_top

    {

           color: #FFFFFF; /*定义文字颜色*/

           height: 27px; /*定义单元格高度*/

           width: 170px; /*定义单元格宽度*/

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

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