再谈DIV+CSS之一切从实际中来.docVIP

再谈DIV+CSS之一切从实际中来【摘要】从美工角度谈网页标准的制作，用最浅显易懂的语言诠释DIV+CSS的制作技巧。 【关键词】DIV+CSS；布局；网页标准；美工 三年前刚开始讲授DIV+CSS课程时，跟学生说这是未来网页制作发展的趋势，转眼间到今天，不会这个技术，学生就找不到网页美工的工作。关于这项技术网络上有大量的文章，但从公司要求出发的很少；通过这几年与从事美工工作的毕业生及所在公司的深入了解，不断修改总结教学内容与方法，使之与公司的规范向适应。我一直想用最浅显易懂的语言从美工岗位角度诠释这门技术，以下是我的一些心得。 一、何为DIV+CSS 对于美工来说，就是不要把CSS写在网页文件里，应该写在样式表文件里。 就是把网页的结构和表现分开，用DIV来制作结构，用CSS来制作表现。一定记住，凡是属于表现的都用CSS来做，不要直接写在网页文件里，而是写在样式表文件里，再调用它。 网页结构图 二、什么是标准的网页标准 对于网页美工来说，你需要满足以下几条： 预览时要能在IE6\IE7\IE8\FOX四个浏览器同时正常浏览。 正确判断网页中的内容与表现，屏蔽CSS后，还原相应内容。 常用标签使用正确。 三、怎样的制作环境方便 对于这个问题需要分成两部分，一部分是制作网页部分，一部分是检查网页部分。 制作时推荐使用Dreamweaver CS5 软件，该软件比之前的版本在代码编写更方便； 建议把浏览器升级到IE8，然后再安装IETester软件实现IE6/IE7的浏览，然后再安装FOX浏览器。 查看网页的结构与CSS时，用IEDevToolBar软件，IE8自带有。 五、应该掌握的要点 先在效果图确定哪些是内容哪些是表现（外观修饰）。凡是网站所必须呈现的信息都是内容，除此都是表现。 一般情况下能用填充（padding）就尽量用，减少使用边界（margin）不容易产生不同浏览器的错误。 推荐使用class定义css，尽量少使用id。 想要内容横着排列，必须设置浮动（float），要想不跟着之前元素并列，必须清除浮动（clear） 填充（padding）没有负值，边界(margin)有负值。 凡是做了浮动（float）的，但是又不能并排，一般都是两个浮动的对象的所有的宽度相加超过了原先设定的总宽，所以先试着检查宽度，填充，边界等值，可以把值改小，看有没有变化，如果有变化，那就是你改的那个值出了问题。 检查一个对象出问题，最简单的方法是用背景颜色法，即加一个背景，看看背景颜色的区域去判断问题。一般问题都是出在填充（padding）、边界（margin）、宽度、高度上，比如宽高不全，应该补全，边界有问题换成填充，填充有问题换成边界。 六、网页特效的实现（网页行为） 网页特效基本由代码构成，有直接写在网页内的，也有调用JS文件的。不需要自己写，通常的做法都是通过网络搜索现成的代码，把它插入自己的网页，再进行一定的修改。 要仔细看代码的说明，一般都会说明哪段代码放置在哪个位置上，且有注释说明修改相应的参数。 要时时预览，如果此代码不成功，可以另找。 如果特效包含JS文件，必须把JS文件也拷贝到相应的站点目录，并保证链接地址正确 常用代码（图片滚动，文字滚动，广告切换，选项卡等）可以保存下来，以后制作类似的都可以重复使用。 以上是我从实际中总结出的一些心得，希望能对大家有所帮助。同时这门技术也在不断发展，不断更新，所以，我也感到只有持续的学习研究才能跟上技术的进步。 1