CSS布局教程

    Dreamweaver在以前的版本中就提供了浏览器检查及标记验证工具，在新版本中，增加了对新型浏览器如Firefox的支持。在使用CSS布局的符合标准的网页设计中，显得尤为重要。测览器检查：使用浏览器检查工具，可以通过工具栏中冈页标题右侧的第一个按钮。在进行检查之前，可以进行一些目标浏览器的设置，点击按钮之后选择设置命令，便以打开浏览器设置窗口。
    在目标浏览器对话框中，已经列出了当前Dreamweaver版所支持的几种浏览器类型，以通过复选框选择文档所需要支持的浏览器名称，并从右侧的下拉框中选择最低版本，选择结束确定之后，可以再次点击浏览器检查按钮，并选择第一个命令“检查浏览器支持”，Dreamweaver 8就会按照我们的选择对文档进行检查，如果发现了错误，浏览器检查按钮将会出现一个黄色的感叹号标签，并显示发现了多少错误，并可以通过上一个错误，下一个错误进行错误。天津网站建设，天津网站制作
...

在实际应用中，也可能需要一种很特殊的文字环绕方式希望文字能沿着图片中主体的—不规则边缘进行环绕，就像在矢量软件中做到的那样。但是div和img却都是以方块形式插入在页面中，而且浏览器也没有办法识别图片中的边缘（如下图），这时，就需要我们使用一些技巧性的手段来达到目的了。
如果我们希望能够有不规则的文字环绕效果，单独插入图片在段落中是不可行的，因为图片本身是方块状的矩型，无法改变其状态。因此只有将图片以背景形式放置在文本之中，背景乓与文本是二层关系，互相之间不会影响，而接下来就是本例中的核心内容—使用多个Div对象来创建接近不规则的形状，所要做的是插入一些div在段落。
...

高度不适应指的是当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层对象使用margin或paddign时。高度不适应问题不是IE的专利，就连Mozilla/Firefox也出现了这种问题。不适应主要发生在两个嵌套的对象中，这里div作为外层对象，而p作为内层对然后编写以下的CSS代码，看看代码做了了什么， 除了了背景之芝外，#box jx是一个几乎没有任何样式的div，而pQ象翌了两个非常关键的属性：margin-top：20px;margin-bottom:20px;上下外边距都是20px，这时照前面的盒模型原理，p对象的高度应当是20+20+文字的高度，应当在30px以上。理论上，由于p的高度在30px，#box这个div的高度也应当是由p的高度挤开，至少达到30px，我们看看预览后的效果。天津网站优化
...

结合对于背景控制的探讨，可以尝试继续完成我们前面所制作的导航系统，并在此基础上对于导航进行改进。基于背景的基本控制并结合我们上一章上的布局方法。首先可以简单实现导航后的黑色图案背景。根据布局设计方法，将导航ul标签放入了id为header的div中。实现其包含式结构”css代码.
对于项部区区域定义了了div id为header，基础背景设定。对于包含在header中的#Dav，我们根据CSS布局方法将其放置在header的右下角。实现了项部区域的布局，在最初我们实现的使用图片背景制作的交互式导航中，对于每一个导航项中的标准状态当前状态鼠标交互状态3个状态中，均使用了三张图片，通过CSS中的a:hover进行切，换来实现实际效果。大家应该还记得，在背景定位一节中，我们讨论了实现一张背景在一个标签中采用top及left的距离来实现绝对定位，而我们的标签式导航三张图片是不是也可在通栏用一张图片，而使用绝对定位来实现呢？不妨尝试一下实际编码，先把三张图片合为一张。天津网站建设，天津网站制作，天津做网站，天津网站优化
...

        对于CSS布局学习者而言，除了对id与class选择符的使用中会存在一定的问题之外，还有一个经常使大家感到混淆的概念就是XHTML标签中的iv与span对象。对于XTML二段落，strong表示加粗等，而span与div似乎从语义上无法理解其真正用途，而且在使用上span及div几乎所有相同的属性，div与span到底在xTML中该如何使用呢?、在w3c对diV及span的简要描述中，我们看到了同样的说明—用于定义样式的容器虽然w3c在对div及span的描述中都说明了相同的用法，而且非常准确，用于定义样式的器，但实际上div在使用方式上有很大的差别，在这一点上我们通过实际显主示的div与span的效果上就能看出，我们看一段XHTML及CSS代码：从预览效果我们可以看到，在相同CSS样式的情况下，两个div对象之间出现了换系，而两个对象则是同行左右关系。对于都是用于样式容器的div与span对手象而言，是由于这样的关系，—使它们之间存在着使用上的差别，div与span元素在显示上的不同，源于其默认显示模式(display)的不同。在前面我曾了解过display属性的用法，用于改变元素的显示模式。对于XHTML中的每一个对象而言，都拥有自己默认的显示模式，div对象的默认显盖示模式是display:block；因为这样的默认模式，从而使div成为一个块状容器，其默矢认状态就占据一整行的空间，而span对象的默认显示模式为display:inline;因此span将作为一个行内联对象显示时以行内连接的方式进行显示。正是由于两个对象不同的显示模式，因此在实际使用过程定了两个对象的不同用途。div：又：对象的任务是呈现一个块状内容，如一大段文本，一个导航区域，一个页脚区域等显示为块状的内容进行结构编码并进行样式设计。天津做网站，天津网站优化而拓为肉联对象时；span，用途是对行内元素进行结构编码以方方便样式设计，span默认状态下就不会破坏行中元素的显示顺序，例如在一大段文本中，我们需要变其中一段文本的颜色，可以将这一小部分文本使用span对象，并进行样式设计，这将不会改变这一整段文本的显示方式。span对象只是众多inline内联对象中的一种，而且是专门用于设计样式的一种内联对象像strong对象也是一种内联对象，使用之后将对某段文本进行加粗显示，是一种自带属性的内联对象，而span对象在默认使用情况下均不改变任何其中文本的属性，这是XHTML留给设计者昔的个空属性的内联对象，专门用于行内内容样式的自定义。div所赋于的使命要比span重要许多，默认为块状显示模式的div对象在实际应用中担负页面大块布局及版式的所有工作，需要大量使用div进行组合或嵌套来实现我们版式布局。天津网站建设，天津网站制作

    对于表单设计而言，除了XHTML及CSS能够帮助我们做到视觉设计及交互上的简单提升，更多表单可用性的设计有待于我们对用户的完整思考。在这里根据以往的经验就表单设计提出一些设计建议与方法，希望能有助于我们的网站设计。
    明确的输入域标识，作为表单上的每一个可输入区域，视觉设计上一定要合理方便用户使用，不能够一味追求美观而使可输入区域变得模糊不清，如果没有好想法，不妨使用默认样式，可是用户理解得最简单。而对于表单中必选和可选区域，无论是通过改变边框或背景颜色也好，增加记号标记也好，也一定要明确，使得访问者在使用表单的同时能够迅速理解表单元素规则。
...

    CSS的id与class选择符为设计提供了便利，但也会使得CSS样式变得多和复杂，如理这些CSS样式便是摆在我们面前的一个问题，然而软件开发的经验为我们提供了一个可学习模仿的例子，软件开发中对于过程／函数／变量的命命名经过多年的实践与研究已经有了一套自己的方法，借助于这些方法，我们可以根据CSS的特设计自己的样式命名规则，帮助我们更好的编写样式，在了解CSS选择符命名之前，我们先简要了解一下CSS对于命名的基础使用规则。
    值得注意的是，xhTML不区分大小写，允许使用大写或小写或任意组合进行编码，CSS的样式属性也是如此，我们可以使用大小写的CSS样式属性，CSS对于对象选择符如body、td、div也是不分区大小写。但是CSS对于id及class选择符名称是区分大小写的。对于id及class选择符来说class=”CONTENT”不等于同CSS中的.content或.Content。因此在设及class以及编写CSS样式的时候使用统一的规范来编写自己的样式。天津网站建设，天津网站制作
...

问题起因
    断头台问题(IE/Win Guillotine Bug)是国外的CSS设计者给这个问题起的一个非常的名称，就如同断头台一样，对象被无情的切断了一部分，不过与此相反的是，断头台问题中的对象切断的不是对象的头部，而是对象的底部。
    这段XHTML代码结构由三部分组成，一个是主对象#layout，主框架中有#1eft为左浮动对象，孑右侧为普通的链接文字，类似于左右分栏的二栏式的布局。CSS代码部分，我们主要设置了链接的背景色，#left的左浮动，及用于我们观察的粗边框效果，我们还是通过浏览器来查看问题是如何发生的，这里列出了网页效果的两个状态，当网页被打开时，页面显示正常，与CSS编码中所指定的样式完全一致，而当鼠标指向对象右侧的“链接3”及“链接4”时，问题出现了，主#layout下面被切掉了，而剩下的高度刚好正是4个链接的高度。与此同时，当鼠标再次回到链接1时候，#layout对象的高度又恢复了正常。这便是本节中的断头台问题。天津网站建设，天津网站制作，天津做网站，天津网站优化
...

     早期在使用表格式布局的网站设计时期，设计师或多或少都使用了CSS技术对网站中的内容样式进行优化；在那个时期CSS也有部分应用，而且设计师也习惯对页面中的元素class的定义，早期的样式表中几乎全都是是class选择符。大多数设计师从转到Web标准布局之后，都会发现一个现象，就是在使用Web标准的CSS布局之后，CSS中所用到的id似乎有增无减在不断增加。
     如下提供的二张图片所示，目前国内知名门户sina的首页CSS，sina目前依然延用着传统表格式布局及代码设计方法，几乎都是class选择符，而另一个msn.com首页的CSS之中，id选择符占的比例要多一些。
...

    通过上文的介绍，我们已经初步了解为什么W3C要建-XML。标准，为什么各大厂商都意支持xml。也了解到为了向xml标准过渡，我们目前阶段需要学习和掌握的Web标准有那些，接下来就是具体应用了。但我们发现应用也并不如想像中那样顺利，依然有一堆的困难摆在我们面前：
有99%采用HTML 4.0或更老规范建立的网页需要转换到xhtml,每天依然有大量的新的页面采用不符合Web标准的技术在发布；缺乏易用的、强大的支持Web标准的页面开发软件；主流浏览器IE对Web标准的支持不完善；大批设计师需要了解Web标准，转变观念；
...