HTML网页设计 作者 翁高飞、王鹏 chapter4.pptVIP

Company Logo DIV标签定义（定义和用法） DIV可定义文档中分区和节（division/section） DIV标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不适用如何格式与其关联。 如果用ID或者Class来标记DIV,那么该标签的作用会变得更加有效。 注意：SPAN在CSS定义中属于一个行内元素，而DIV是块级元素，我 们可能通俗地理解为DIV为大容器。 DIV是以个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是DIV固有的唯一格式表现。可以通过DIV的Class或ID应用额外的样式。 不必为每一个DIV都加上类或ID，虽然这样做也有一定的好处。 可以对同一个DIV元素应用Class或ID属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，Class用于元素组（类似的元素，或者可以理解为某一类元素），而ID用于标识单独的唯一的元素 Company Logo 深入理解盒子模型（1-1） 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。 在CSS中，一个独立的盒子（DIV）模型margin（外边距）、border（边框）、padding（内边距）、content（内容）4个部分组成。如图： Company Logo 深入理解盒子模型（1-2） Company Logo 盒子模型（1-3）示例 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css .box1{ border:1px solid #666666; height:50px; background:#CCCC00; margin:30px} .box2{ border:1px dashed #FF0000; padding:10px 10px 10px 50px; color:#ffffff; background-color:#000066; margin:20px 10px 20px -30px;} /style /head body div id=box1 class=box1 盒子1 div id=box2 class=box2 盒子2 /div /div Company Logo CSS+DIV网站设计的优势 首先，CSS的极大优势表现的简洁的代码，对于一个大型网站来说，可以节省大量带宽（速度加快）；而且从所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页代码的比重），因此使用CSS+DIV的web标准制作的网站具有搜索引擎好的一定优势。 其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改变程序，从而降低了网站改版的成本。 Company Logo CSS+DIV网站设计的劣势 第一，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 第二，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTNL4.0的页面设计在IE4.0之后的版本中几乎不存在兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox）中却可能面目全非（这也是为什么建设网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器广商的进一步的支持。 Company Logo 网页布局 制作网页前我们需要对网页整体结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。如： 分析：整个图片分为以下几个部分 顶部：包括Logo和一个背景图片 导航栏 内容部分分为侧边栏和主体内容 底部页脚包括一些版权信息 header menu content sidebar Footer Company Logo 实际布局图如下： Company Logo 块级元素与内联元素（1-1） Company Logo 块级元素与内联元素（1-2） Company Logo Float浮动布局 在前面我们利用flo