divcss网页标准布局经典布局.ppt

div css网页标准布局实例 div css网页标准布局实例教程 建立站点 结构分析 搭建框架 切割效果图 布局页面 头部和导航 布局页面 侧边栏 布局页面 主体部分 底部和细节调整 相对路径和相对于根目录路径 一 建立站点 Dw中建立站点 见课件环境搭建不再详述 二 结构分析 创建完站点后 就需要对页面结构进行分析了 根据效果图 分析页面分为几大块 该怎么布局更合理 可看出整个页面分为头部区域 导航区域 主体部分和底部 其中主体部分又分为左右两列 整个页面居中显示 保存为index html并把无标题文档改为 主页 主页 三 搭建框架首先在dw里新建一个html文件 接下来需要插入以上各个块的标签了 以插入header的标签为例 其它的插入方法类同 此处显示id header 的内容此处显示id nav 的内容此处显示id main 的内容此处显示id side 的内容此处显示id footer 的内容 从上边的效果图分析得知 整个网页是居中浏览器显示的 按照这样的写法需要把以上的header nav maincontent footer都设置宽度并居中 这样做起来很麻烦 所以再在这些标签外增加一下父标签 设置这个父标签宽度并居中后 是不是所有的标签都居中了呢 增加后的代码如下 此处显示id header 的内容此处显示id nav 的内容此处显示id main 的内容此处显示id side 的内容此处显示id footer 的内容 html框架代码写完后 下边就需要设置css样式表了 先测量下效果图的整体宽度 然后设置container也是这个宽度并居中 说起测量效果图宽度 方法有多种 可以直接查看图片尺寸 如果测量其中某一块的宽度 可以使用测量软件 也可以在ps下测量 因为效果图多是在ps下制作的 所以用ps测量也比较方便 方法是首选项里把ps的单位改为像素 然后用选区选中要测量的部分 在信息面板中就显示出当前选区的宽高了 测量后得知 整体宽度为900px main部的宽度为664px side宽度为228px 把这三个基本的宽度测量后 下面就可以写css代码了 由于本实例是按照实际当中应用来做的 所以css样式表就最好写在单独文件里了 不要再写在文件内部了 这样可以利用代码的重用性 减少很多劳动强度 下面就新建一个css样式表文件 在DW文件菜单选择新建 然后在打开的窗口页面类型中选择css 创建后保存在css文件夹中并命名为layout css 保存后先设置全局的样式 而后写每一块单独的样式 全局样式如下 body margin 0auto font size 12px font family Verdana line height 1 5 ul dl dd h1 h2 h3 h4 h5 h6 form p padding 0 margin 0 ul list style none img border 0px a color 05a text decoration none a hover color f00 全局的样式定义完后 下面定义以上几大块的样式 先设置下 containerr的样式如下 container width 900px margin 0auto 预览下index htm 发现并没有改变 因为刚定义的样式表没有和html文件关联 所以设置的样式不能对它生效 在css面板中点击附加样式表按钮 然后在弹出的窗口中选择刚才创建的样式表文件 确定 ok了 预览一下 是不是整体已经居中了呢 如果已经是宽度为900px并居中 说明样式和文件关联好了 因为许多文件要关联在一起才能构成一个完整的网页 所以要把它们放在一起 才能让这个页面找到和它相关的文件在哪里 下面设置内部几大块的样式 为便于观察 部分块设置了背景色 代码如下 body container width 900px margin 0auto header header height 70px background CCFFCC margin bottom 8px nav height 30px background CCFFCC margin bottom 8px main maincontent margin bottom 8px main float left width 664px height 500px background FFFF99 side float right width 228px height 500px background FFCC99 footer footer height 70px background CCFFCC 预览一下 在IE6下 maincontent的底部外边距并没有生效 而在IE8下 footer干脆跑到 maincontent的下边了 这又是怎么回事呢 这就是之前我们讲的 如果一个容器内的元素都浮动的话 那么它的高度将不会去适应内部元素的高度 解决办法是在 maincontent增加overflow auto zoom 1 这样就可以让它自动适应内部元素的高度了 现在再预览一下 是不是都正常了 为了更加保险 建议在header nav maincontent footer之间增加如下一句代码并设置css样式如下 它的作用是清除浮动 clearfloat clear both height 0 font size 1px line height 0px 主页此处显示id header 的内容此处显示id nav 的内容此处显示id main 的内容此处显示id side 的内容此处显示id footer 的内容 四 切割效果图基本框架搭建完毕后 下一步就是要分析每一块该怎么切图了 切图方法有多种 可以使用ps或fireworks自带的切片工具 也可以用QQ的截屏或者创建新文件 把需要的部分复制过来保存都可以 关键看个人喜好 用ps的切片工具的话 把需要切割的区域用切片工具切分 如果要设置图片的名称 请使用切片选择工具 然后在切片上双击 会弹出如下窗口 填写名字后确定即可 切割完后 需要保存图片了 选择文件 存储为web和设备所用格式 在弹出的窗口中点击选中切片 然后在右侧可以设置当前切片的图片格式 这里有个技巧 一般小型色彩单一的图片 采用gif格式 照片类大型图片采用jpg 这样生成的图片既能保证质量 图片体积又小 设置完图片的格式后 就可以存储了 这里选择到images的上一级目录就行了 ps会自动创建images目录并把图片文件放入 如果已存在 直接放入 在格式处选择仅限图像 如果选择html和图像 ps会自动生成一个表格式的网页 这个页面不是我们需要的 就不让它生成了 还有一个需要注意的地方就是选择所有用户切片 这样只把我们手动切割的图片保存下来 其它的就不保存了 保存后的图片如下所示 其中hot bg gif这张图片切割时没有隐藏上边的文字 一会儿在ps里再处理一下把文字抹掉 目前所切的图片只是一部分 并没有把整个页面所需的图片全都切割下来 比如导航部分所用背景图片可以放到一张图片上 下面就用新建文件 然后用QQ截屏 粘贴过去的方法来创建 分析一下上图的导航部分 1 两端的圆角 2 鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变 3 二级导航有鼠标划过时的状态 分析完之后 就需要把需要的图片整合到一张图片上了 整合的结果如下图 这个根据自己的需要进行整合 其实完全可以把其它一些小图标都整合在一张 但那样操作起来比较麻烦 所以我们还是归一下类 把相关的图标整合到一起 接下来整合侧边栏的背景图片 分析发现侧边栏应用同样的样式 只不过高度有所不同 而且是四角都是圆角 所以只用一个通用的就可以满足所有侧边栏块的需求了 那么怎么制作这个通用的背景呢 从下图我们发现 标题的高度都是一样的 只不过是下边的内容高度不同而已 那么我们把下边内容的背景制作的足够长 超过可能出现的最大高度就可以满足需求了 把三个图标也给切出来 如下图 联系我们的图片和修饰小图标 联系我们的图片如下 这些图片和小图标要背景透明 这样才不会遮盖下面的背景 五 布局页面 头部和导航有了上边的基础 下面的任务就是要利用html和css制作完成一个完整的网页了 先从头部开始 第三小节时我们已经把整体框架给搭建好了 就像盖房子一样 整体结构已经出来了 下面就需要填砖分割空间了 先分析下头部 分为两部分 一个是logo靠左侧显示 一个是搜索靠右侧显示 那么布局时插入两个div 一个向左浮动 一个向右浮动的方式来完成 另外还有很多种实现方法 比如logo用h1标签 搜索用span 或者把logo做为背景图片也是可以的 不管采用哪种方法 要根据页面的需求选用一种最合理的方法 如果要在logo加上链接的话 那么就不能用背景图片的方法了 此处显示id logo 的内容此处显示id search 的内容 先在header里插入以上两块元素 然后分别插入相应的内容 在logo里插入我们事先切割好的logo图片 在search里插入一个表单 一个文本框和一个按钮 插入后如下 搜索产品接下来定义css吧 在ps里测量 头部的高度是71px logo距顶部18px 搜索产品距顶部30px 下面在css里把这些参数都给定义上 看显示的效果和效果图中的效果是不是一样呢 logo float left margin top 18px search float right margin top 30px 这两项的位置已经差不多了 预览会发现 搜索框和按钮跟效果图中的不一样 这是因为还没对它设置样式 接下来把文本框增加一个class为inp srh样式 按钮增加btn srh的样式 search float right height 24px margin top 30px color 444 inp srh width 140px height 17px padding left 20px background url images srh bg gif 00no repeat border 1pxsolid cbcbcb btn srh width 58px height 23px background url images btn srh gif 00no repeat border none cursor pointer text indent 999em search vertical align middle 给search增加了高度和文字颜色 其中高度设置为24px 是为了照顾IE6 可以去掉测试下 inp srh的宽度和高度并不是实际效果图中的宽高 是因为默认情况下文本框带有内边距造成的 另外就是padding的值也会算到总宽度上的 btn srh是应用背景图像来实现的 说明一点这里的border的值为none指的是无边框 cursor定义鼠标样式为手形 之前也有用hand 但这个通不过w3c认证 text indent 999em这个属性作用相当于word中的首行缩进 这里设置成 999 意思是向左侧缩进 999em 这样就看不到文字了 它的作用是将按钮上的文字隐藏 当然也可以在html代码中插入空格代替文字 但这样做在不支持css的设备上查看时 用户不知道这个按钮是干什么的了 所以建议采用这种形式 有必要解释下最后一行 它的特殊之处在样式名和大括号之间加了一个 号 这里兼容所用的 知道当需要垂直居中对齐时就采用这种写法就行了 但是一定不要滥用 这个属性也是有缺陷的 当有英文和中文同时出现时 英文会靠上显示的 这些设置完后 把最初搭建框架时设置的header的背景色和底部外边距给去掉吧 header height 71px 至此 头部的样式就完成了 下边该制作导航了 分析一下 导航分为一级导航和二级导航 所以我需要在nav下再插入nav main和nav son两个块元素 首页企业新闻企业简介产品展厅企业历史招商加盟网上下单联系我们企业动态领导活动产品资讯通知公告 先设置nav的高度及背景图片样式 nav height 66px background url images nav bg gif 00repeat x margin bottom 8px 完了之后该一级菜单和二级菜单的样式了 nav main height 36px overflow hidden nav mainulli float left font size 14px font weight bold margin 5px5px05px nav mainullia float left display block height 26px line height 26px color fff padding left 20px nav mainulliaspan display block padding right 20px nav mainullia hover background url images nav bg gif 0 163pxno repeat nav mainullia hoverspan background url images nav bg gif right 163pxno repeat nav mainullia nav current height 31px line height 31px background url images nav bg gif 0 132pxno repeat color 646464 nav mainullia nav currentspan height 31px background url images nav bg gif right 132pxno repeat nav son height 30px nav sonulli float left margin top 4px nav sonullia display block width 78px height 22px line height 22px text align center color 6e6e6e nav sonullia hover background url images nav bg gif 0 198pxno repeat 这些样式的作用就不多讲了 以前的课程当中已详细讲解过了 只不过本例使用了双导航菜单而已 现在在浏览器下预览一下吧 看看效果怎么样 是不是和效果图差不多了 但还有最后一步就是两端的圆角没实现 实现圆角的方法也不复杂 只需再增加两行代码和两个样式即可 在nav下nav main之前增加如下两行代码 然后用样式表定义一个左侧的圆角 一个右侧的圆角 css样式如下 nav l float left height 66px width 5px overflow hidden background url images nav bg gif 0 66pxno repeat margin right 10px nav r float right height 66px width 5px overflow hidden background url images nav bg gif 5px 66pxno repeat 预览一下吧 看看头部和导航是不是和效果图中的一样 主页搜索产品 首页企业新闻企业简介产品展厅企业历史招商加盟网上下单联系我们企业动态领导活动产品资讯通知公告 此处显示id main 的内容此处显示id side 的内容此处显示id footer 的内容 六 布局页面 侧边栏主体部分涉及side和main两部分 内容较多 但都不难 没有增加什么新的知识点 主体部分先从侧边栏说起 侧边栏可以共用一个样式 下面就先做一个通用的 插入如下html代码产品导购此处显示class side con 的内容这里的标题采用h2标签 没必要再用个div 还有 产品导购 中 产品 二字是红色字体 这里用strong标签 这样可以省去很多没必要的定义 所以在页面布局当中一定要合理利用每一个标签 讲到这里 有必要说一下第一节教程中讲的为什么不能叫div css而应该叫xhtml css了 因为div只是xhtml中的一个标签 叫div css会让许多朋友误认为遇到块级元素就得用div 造成了div的滥用 而合理利用每个标签 才是web标准设计的一个准则 回过头来定义侧边栏的样式如下 side float right width 228px side box margin bottom 8px side boxh2 height 25px padding 6px10px010px background url images side bg gif 00no repeat font size 14px color 444 side boxh2strong color f30 side con padding 10px background url images side bg gif 0bottomno repeat 预览一下效果吧 是不是整体效果出来了 下边就需要定义里边各个部分了 先看下产品导购部分 内容分为三部分 可以用ul li列表的形式实现 前边的图标用背景图片来实现 可以在li上设置背景图片 但这样麻烦一点 每个都需要设置 而且还得定位 有个更简便的方法是定义ul的背景图片 因为在切图标时 每个图标之间的间距是按照效果图的间距来切的 产品导购语音业务 普通电话 语音数字中继语音业务 普通电话 语音数字中继语音业务 普通电话 语音数字中继 细心的用户已发现 这里的class后跟了两个样式名称 说明一个元素是可以定义多个样式的 中间用空格分开 也可以把product样式定义在ul上 说到可以定义多个样式 强调一点 许多人常常大量使用 如一个块元素需要设置边框 绿色文字和灰色背景所以就在css里定义 border border 1pxsolid f60 color color 080 bg background ccc 然后在块元素上增加 此处显示新Div标签的内容其实这是一个非常不好的写法 表面看似达到了代码重用性 但实际当中 当需要把其中一个元素的的边框改为2px 怎么改 如果把 border的边框改了 那么所有应用这一样式的元素都改了 如果再在代码中增加一个样式 那么又得去改html代码 和代码和结构分离的理念相违背了 一个好的代码布局 不管以后怎么改风格 只用改样式表 而不用去改html代码 这才真正做到两者分离了 回到刚才的问题上 给第三个li定义了一个product3样式 然后在样式表中定义它的底部边框为无 因为前边定义li的底边框为1px的虚线 而最后一个不需要 所以单独定义个样式把它取消掉 这里的product根据需要自己定义的名称 一般用能表达这块内容意思的简洁英文来表示 或者用拼音 产品导购 的样式定义如下 product padding 0px10px productul background url images icon2 gif 5px12pxno repeat productulli height 58px padding 14px0064px border bottom 1pxdashed dcdcdc color 777 productullistrong display block height 24px color 333 productullia color 777 productullia hover text decoration underline productulli product3 border bottom none 产品导购 完成后 下边该 使用问答 了 使用问答 部分都是一问一答的形式 问答各采用不同的图标 而且问的文字加粗了 所以这部分采用dl dt dd的形式来完成 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了许多 使用方法更加简便 最新出的这个产品如何使用 该产品采用全新的技术 较上一 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了许多 使用方法更加简便 askdl padding 10px0 border bottom 1pxdashed dcdcdc askdldt height 22px overflow hidden font weight bold background url images icon gif 0 149pxno repeat padding left 20px askdldta color 666 askdldd color 666 background url images icon gif 0 198pxno repeat padding left 20px 使用问答 完成后 侧边栏就剩下 联系我们 了 这个更简单 直接插入图片就行了 然后调整一下位置就可以了 联系我们 contact padding 2px 七 布局页面 主体部分主体部分可以分三大部分 顶部是幻灯和热点新闻 中间是图片列表 下边是左右两块 先来布局主体部分的顶部 顶部实际上还是个左右两列布局 没什么复杂之处 就不再贴代码了 本节结尾会提供实例的源代码 讲解一点 热点新闻列表中的日期 是用一个span标签写在了内容的前边 然后把span向右浮动就实现了 个人登录 和 商户登录 的实现方法也是如此 主页的幻灯是怎么实现的 其实实很简单 只要多动动手 就知道怎么做的了 方法是查看该幻灯片所在网页源代码 找到幻灯部分 你会发现有如下一段js代码 而且代码中有几个设置参数的地方 那么要想在自己网站实现这样的功能 直接把这部分代码插入到自己网站相应位置 修改参数中的大小为自己的大小 图片地址为自己的图片地址 还有就是下载swf文件 并改为相应正确的地址 即可实现相应的效果 幻灯实现后 接下来该中间部分图片列表了 和第六天学习的横向图文列表是一样的 唯一区别就是多了一个标题 在index top下插入如下代码 产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称 index pic border 1pxsolid dbdbdb margin bottom 8px index pich2 height 28px background url images box tit bg gif 00 border bottom 1pxsolid dbdbdb index pich2span display block height 25px background url images rmcp gif 12px6pxno repeat index picul padding 0015px0 overflow auto zoom 1 index piculli width 107px float left margin 15px00px21px display inline text align center index picullia display block index piculliimg margin bottom 3px 这次没做鼠标划过时边框效果 相对之前的简单一点 本例中 热门产品 的图标采用了背景图片 也可以采用一个图片直接插入 但从用户体验的角度来讲 这些图片还是以背景图片插入为好 因为背景图片在整个页面加载过程中后来加载的 图片列表完了之后 主体部分就剩下 企业历史 和 招商加盟 两块了 这两块也是应用左右浮动的方式实现 这两块的代码就不贴出来了 一会儿看实例 强调一点是这里的more hover的写法 因为more直接加在a上 所以鼠标经过的样式就不用再写a了 或者写成a more hover 八 底部和细节调整底部比较简单 灰色背景部分可以用h类标签完成 也可以用dl dt dd来完成 再或者其它标签也可以 其它的就不再赘述 底部完成后 最后的步骤是要做一些细节调整 比如该对齐的地方是否对齐 图片的alt属性是否都加上了 在各种浏览器下是否显示一样等等 至此整个前台页面算制作完成了下面的任务就是该用程序来读取数据库里的内容了 来完成整个站点的制作 浏览器兼容问题一直是让新手朋友头疼的地方 其实只要掌握几个常用浏览器的特性后 不需要过多的csshack就可以解决问题的 本例中使用的csshack大致有 zoom 1 用来解决自适应高度时IE6的兼容问题 这个属性通不过w3c认证 display inline 解决IE6双倍边距bug问题 在样式名和属性中间加 这个常用在需要垂直居中时使用 IE63像素bug 在布局时采用左右都浮动的办法避免了这个问题 另外还有一些做法也是为了解决兼容问题而写的 比如固定高度 就是因为各浏览器之间解释差异 为了使显示效果尽可能一样而采用的折中办法 总之遵循一点 csshack能少用尽量少用 这样便于以后维护 完成这样一个布局方法有多种 本例中所讲解的方法 只是其中的一种 不一定是最好的方法 希望通过对本例的学习能做到举一反三 掌握更多的方法 本侧是左宽右窄型的布局 如果想把两个调换个位置 只需把 main和 side的向左向右浮动调换一下就实现 这是表格布局所不及的 所以不管 main和 side在html代码中是谁先谁后 而让它们显示在哪里完全是css来完成的 这里建议 main的代码写在 side前边 因为这要在页面加载的过程中会先加载main部分 用户首先看到的是主要内容 搜索引擎收录时也会先找到main部分的内容 主页搜索产品首页企业新闻企业简介产品展厅企业历史招商加盟 网上下单联系我们企业动态领导活动产品资讯通知公告linkarr newArray picarr newArray textarr newArray varswf width 269 varswf height 210 varfiles images pic jpg images pic1 jpg images pic2 jpg images pic3 jpg varlinks vartexts for i 1 i picarr length i if files files picarr i elsefiles picarr i for i 1 i document write document write document write document write document write iphone4手机将于12月25日在中国上市日前中国联通正式宣布将于12月25日9时在中国大陆市场全面推出iPhone4 并为iPhone4用户量身定制了合约计划 11 22诺基亚 Symbian明年将搭载1GHz处理器11 22立足香港主攻女性多彩翻盖三星NORi发布11 22支持WCDMA制式全球版首曝光11 22纤薄机身4寸大屏Android旗舰LGB曝光11 22时下热卖手机价格预测11 22iPhone4夺回头名上周手机销量榜T产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称更多 企业历史 多角度对比苹果iPod系列真机导言 北京时间9月2日凌晨1点苹果在旧金山举行新品发布会 数码特派记者在美国现场直播 诺基亚 Symbian明年将搭载1GHz处理器立足香港主攻女性多彩翻盖三星NORi发布4 1寸Android旗舰DellThunder将上市支持WCDMA制式全球版首曝光纤薄机身4寸大屏Android旗舰LGB曝光时下热卖手机价格预测iPhone4夺回头名上周手机销量榜T产品导购语音业务 普通电话 语音数字中继语音业务 普通电话 语音数字中继语音业务 普通电话 语音数字中继使用问答最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了许多 使用方法更加简便 最新出的这个产品如何使用 该产品采用全新的技术 较上一 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强 最新出的这个产品如何使用 该产品采用全新的技术 较上一产品有质的飞跃 功能上增强了许多 使用方法更加简便 联系我们关于我们 产品目录 联系我们 友情链接 反馈问题 广告合作Copyright2007 AllRightsReserved手机之家版权所有京ICP备1000709号 九 相对路径和相对于根目录路径上边的例子学完后 你会发现在html中插入的图片路径是images pic4 gif 而在css中插入的图片路径是这样的 images nav bg gif 后者比前者多出了 这是什么意思呢 这就是相对路径和绝对路径 表示返回上一级 因为css文件在css文件夹里 图片在images文件夹下 那么layout css就需要返回上一级找到images文件夹才能找到相应的图片 直接文件夹名或是 开头表示和当前平级 因为index html和images文件夹平级 不管是带 还是不带 这种写法都叫相对路径 另一种叫相对于根目录路径 它的写法必须以 开始 意思是从根目录开始一级一级向下查找 不管在哪里 要使用pic4 gif这个图片 路径都必须是 images pic4 gif 还有一种写法叫绝对路径 是以http 加域名开始的 这个不多说了 使用相对路径时 当根目录放到一个二级目录下时 文件仍然可以正常访问 而使用相对于根目录路径时 其中一个页面放到其它位置时 照样能关联其相关的图片和其它文件 比如 本例如果用相对于根目录路径的话 把index html放到一个文件夹下后 还是可以正常访问的 两种方法各有优劣 根据需要采用合适的方法 相对路径和相对于根目录路径是可以相互更改的 在站点管理 编辑 高级设置的本地信息里有链接相对于 如下图 默认为文档 就是所说的相对路径 也可以改为站点根目录 相对路径一般为直接目录名 需要返回上级时用 向上返回两级时用 相对于根目录路径始终以 开头 不管该文件现在在哪一级 它都是以根目录开始向下找 网页图片如何选择使用GIF格式或JPG格式 网页设计中 保证图片清晰的前提下 图片越小越好 因为这样可以减少带宽占用 加快网页打开速度 尤其对于门户网站和访问量很高的网站 如果图片都能比原来小10K的话 那么节省的带宽相当明显 那么就要求设计师在制作或生成图像时 选择合适的格式和质量 尽量把图片体积压缩的更小 下面就网上常用的两种格式gif和jpg该如何选择阐述下本人的看法 何时选择gif格式 何时选择jpg格式 对于gif和jpg格式的选择 没有固定的限制 但要把握好一点 图片色彩单一 由色块或文字组成 较少渐变色的尽量采用gif格式 这样可以减少很大体积 当图片色彩丰富 过渡色较多时建议采用jpg 下面看看两个例子 以百度logo为例 同样尺寸的图片 保存成gif格式要比jpg格式小多了 把图片放大时会发现jpg格式会产生噪点 质量还不如gif 那当然要选择gif了 因为这个logo色彩非常单一 上边这两张图片 从百度上搜索后截取了一部分 同时保存成两种格式 左边的是gif格式 右边的是jpg格式 从图片的属性看 gif格式大小为63 1KB jpg格式大小为46 4KB 如果质量要求不高的话还可以再压缩 但从目前就可以明显看出 jpg格式要比gif清晰多了 gif格式自动把相似色彩改变成一种色彩 这也是上个例子中gif格式不产生噪点的原因 通过这两个例子 相信你对网页设计中选择gif格式和jpg格式有所了解了吧 不过在实际应用当中 建议保存成两种格式 多对比 慢慢就会发现什么时候该用gif 什么时候该用jpg了 CSS中zoom 1的作用兼容IE6 IE7 IE8浏览器 经常会遇到一些问题 可以使用zoom 1来解决 有如下作用 触发IE浏览器的haslayout解决ie下的浮动 margin重叠等一些问题 比如 本站使用DIV做一行两列显示 HTML代码 推荐文章原创 ASP NET使用log4Net日志组件教程 每天产生一个日志及日志按大小切割 原创 NET版分布式缓存Memcached测试实例 Memcached缓存读取添加与清空等 zoom CSS代码 h mainbox border 1pxsolid dadada padding 4px15px background url mainbox bg gif 01pxrepeat x margin bottom 6px overflow hidden h mainboxh2 font size 12px height 30px line height 30px border bottom 1pxsolid ccc color 555 h mainboxh2span float right font weight normal h mainboxul padding 6px0px background fff mainlist overflow auto zoom 1 h mainboxli width 268px float left height 24px overflow hidden background url icon3 gif 06pxno repeat padding 0px5px0px18px line height 200 加红色的那里就可以在IE6 IE7 IE8正常显示效果了 DIV CSS布局基础经典 讲师 赵海海 课程大纲 传统布局与CSS布局 XHTML与CSS基础 CSS网页布局与定位 实例 三栏居中式布局 1 1 1传统Table布局 传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此 Table布局的核心是 设计一个能满足版式要求的表格结构 将内容装入每个单元格中 间距及空格使用透明gif图片实现 最终的结构是一个复杂的表格 有时候会出现多次嵌套 显然 这样不利于设计和修改 1 1 2传统Table布局示意图 1 1 3Table布局的缺点 设计复杂 改版时工作量巨大表现代码与内容混合 可读性差不利于数据调用分析网页文件量大 浏览器解析速度慢如蜗牛 2 2 0Web标准的构成 选 表现 用于对已经被结构化的信息进行显示上的修饰 包括版式颜色大小等 主要技术就是CSS 目前版本2 0 行为 是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有 DOM 文档对象模型 ECMAScript JavaScript脚本语言 结构 用来对网页中的信息进行整理与分类 常用的技术有 HTML XHTML XML 1 2 1Web标准布局 基于Web标准的网站设计的核心目的 如何使网页的表现与内容分离 这样做的好处 高效率的开发与简单维护信息跨平台的可用性降低服务器成本 加快网页解析速度更良好的用户体验那么 CSS2 0从真正意义实现了设计代码与内容分离 1 2 2DIV CSS布局示意图 真正的表现与内容完全分离 代码可读性强 样式可重复应用 1 2 3CSS布局代码示例 测试页头部主体尾部 Xhtml文档 font family Arial Helvetica sans serif 宋体 font size 12px margin 0px text align center container width 810px margin auto background CCCCCC header height 100px width 800px padding 5px background color 6699FF content height 400px width 800px padding 5px background color FF9900 footer width 800px height 50px padding 5px background color 6699FF Style1 css 最终布局效果 2 1 1向Web标准过度 XHTML基础 为什么要使用XHTML XHTML是在HTML4 0基础上 用XML规则扩展得到的 建立XHTML的目的就是为了实现HTML向XML的过度 HTML 更多的被用于网页设计和表现XHTML 它的初衷就不是为了表现 而是对网页内容进行结构设计 严格的说它是面向文档结构的语言 更符合未来的发展要求 2 1 2选择合适的DTD 一个标准的XHTML文档 必须以Doctype标签作为开始 doctype用于定义文档类型 对于XHTML而言 可以选择三种不同的XHTML文档类型 请看下面代码 无标题文档 Transitional类型 过度类型 浏览器对XHTML的解析将为宽松 建议使用 Strict类型 严格类型 文档中不允许使用任何表现样式的标识和属性Frameset类型 框架页类型 网页使用框架结构时 声明此类型 2 1 3DreamweaverCS3中DTD DTD文档类型 选择画面 2 1 4XHTML语法规范 属性名称必须小写属性值必须使用双引号不允许使用标签简写使用id替代name必须使用结束标签注意 选择合适的标签 区别与table布局的习惯 布局用 文本用 图片用 列表用 数据用 其他的 form input select 各司其职 2 2 1CSS语法基础 何为CSS CascadingStyleSheet CSS中文译为层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 即 告诉浏览器 这段样式将应用到哪个对象 CSS语法结构 选择符 属性1 值1 属性2 值2 举例 body font size 12px text align center 参数说明 属性和属性值之间用冒号 隔开 定义多个属性时 属性之间用分号 隔开 CSS选择器 2 2 2CSS选择器 符 标签选择器 指以网页中已有的标签名作为名称的选择器 几乎所有的html标签均可用作该类选择器 如 body p h1 等等 类别选择器 属用户自定义名称的选择器 可以在XHTML标签中用class 为相应标签指派样式 可理解为一类 特点 在文档中允许被重复使用 Id选择器 属用户自定义名称选择器 基于DOM文档对象模型原理出现的选择器 可以在XHTML标签中用id 为相应标签指派样式 可理解为一个标识特点 在网页中 每个id名称只能使用一次 2 2 3选择器的声明 body td th header one color blue font size 12px 集体声明 并列关系 Ph1 color blue font size 14px 嵌套声明 从属关系 PH1 headerul color blue font size 12px 混合声明 并列及从属关系 2 2 4如何应用CSS到网页中 行内样式表内部 内嵌 样式表外部 链接 样式表导入式样式表 CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中 选择方式可根据我们对设计的不同表现手段来制定 一般按CSS代码位置分为 2 2 5实例代码 CSS按位置的分类 测试页头部主体尾部 在之间加入 importurl css style2 css 称为 导入式样式表 2 2 5样式优先权问题 2 6CSS开发环境与调试环境 3 1被遗忘的主角DIV 3 2CSS盒子模型 3 3文档流及浮动概念 3 4浮动定位与绝对定位 4 0一个简单的CSS布局实例 网页制作流程 效果图 切图 布局 DIV CSS table 嵌入动态程序或模板标签 测试 发布 学习要点及 传统布局于CSS布局的区别 CSS CascadingStyleSheet 中文译为层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 本章学习目的 本章通过多个CSS样式的应用实例 重点介绍了CSS样式表功能 定义CSS规则的方法 应用内嵌式样式表和链接外部样式表的方法等 通过本章的学习 读者应了解CSS样式表的用途 掌握创建和应用CSS样式表的方法 学会用CSS样式表进行网页的美化和网页布局 5 1利用CSS样式表的网页实例 CSS样式表是由一系列样式选择器和CSS属性组成 它支持字体属性 颜色和背景属性 文本属性 边框属性 列表属性以及精确定位网页元素属性等 增强了网页的格式化功能 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰 当需要更改样式设置时 只要在这个样式表中修改 而不用对每个页面逐个进行修改 简化了格式化网页的工作 5 1利用CSS样式表的网页实例 例5 5 利用CSS样式还可以代替表格进行网页布局 这是目前较为流行页面排版方式 如图所示 该实例主要采用了div标签 css样式 涉及到的知识点有以下几点 分析构架 画出构架图 模块拆分 分别定义Div的CSS样式 在网页中插入Div标签 在Div中填充网页内容 总体调整 色彩及内容调整 适当修改CSS样式 5 2使用CSS样式表 5 2 1CSS样式表概述1 样式表的使用CSS样式表的使用常用的方法有以下两种 页面内嵌法 将样式表代码直接写在HTML标签的head区 外部链接法 将样式表写在一个独立的后缀名为CSS文件中 在需要应用CSS样式的网页中链接该文件 在页面和之间用以下代码调用 5 2使用CSS样式表 2 CSS样式表语法选择符 属性1 值1 属性2 值2 参数说明 属性和属性值之间用冒号 隔开 定义多个属性时 属性之间用分号 隔开 1 创建CSS样式选择 窗口 菜单 CSS样式 命令 打开 CSS样式 面板 单击右下角的 新建CSS规则 按钮 或选择 文本 菜单 CSS样式 新建 命令 弹出 新建CSS规则 对话框 5 2 2在Dreamweaver中定义CSS 5 2 2在Dreamweaver中定义CSS 选择器类型有以下三种 1 类自定义CSS规则 它的特点是灵活多变 可以重复将样式应用于网页元素 在应用时 它会在HTML标签内加入一个类 class 的定久来规定标签中的格式 比如将类的样式mystyle定义于某个标题 那么代码为 标题1应用自定义的样式 2 标签重新定义指定标签的外观 例如 创建或更改h1标签的CSS样式时 所有用h1标签设置了格式的文本都会立即更新 实现了批量快速更改格式的特点 5 2 2在Dreamweaver中定义CSS 3 高级在CSS选择器中 它的功能最为强大 可以定义超链接的特效 定义特定元素组合的格式设置 例如 body table td 用逗号隔开 定义嵌套的样式 tdimg空格隔开 定义包含特定id属性的标签的格式设置 定义的位置有以下三种情况 选择 仅为该文档 此时CSS样式的代码会嵌套在网页和标签中 选择 新建样式表文件 则弹出 保存样式表文件为 对话框