发布时间 : 星期六 文章使用div+css开发个人网站毕业设计更新完毕开始阅读d427fbb0dbef5ef7ba0d4a7302768e9951e76ea6
盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。盒模型3D效果图如下图2.2所示：
图2.2 css2.0盒模型
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。
二、转变思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。
10
三、实现结构与表现分离
这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。
第六节 div+css的兼容性问题
一、div的垂直居中问题
vertical-align:middle; 将行距增加到和整个
DIV
一样高
line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 。
二、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
三、浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table。
四、IE与宽度和高度的问题
11
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度，比如要设置背景图片，这个宽度是比较重要的。
五、页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
六、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。
七、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
八、IE6下为什么图片下有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.等各种解决兼容性问题。
12
第二章 开发工具的介绍
第一节 梦幻网页的编织者——Dreamweaver
Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。
Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。
Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。
至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：
① 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 ② 装载器中包含一些打开和关闭常用检查器和模板的按钮。
③ 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 ④ 属性检查器显示选定对象的属性。
⑤ 快捷菜单可以使用户对当前选择或区域快速执行某些命令。
⑥ 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
第二节 图形、图像编辑设计软件制作软件——Adobe
Photoshop cs2
Photoshop cs2是目前最流行的图形、图像编辑设计软件，在数码影像处理、
13