论文部分内容阅读
【摘要】从美工角度谈网页标准的制作，用最浅显易懂的语言诠释DIV+CSS的制作技巧。
【关键词】DIV+CSS；布局；网页标准；美工
三年前刚开始讲授DIV+CSS课程时，跟学生说这是未来网页制作发展的趋势，转眼间到今天，不会这个技术，学生就找不到网页美工的工作。关于这项技术网络上有大量的文章，但从公司要求出发的很少；通过这几年与从事美工工作的毕业生及所在公司的深入了解，不断修改总结教学内容与方法，使之与公司的规范向适应。我一直想用最浅显易懂的语言从美工岗位角度诠释这门技术，以下是我的一些心得。
一、何为DIV+CSS
对于美工来说，就是不要把CSS写在网页文件里，应该写在样式表文件里。
就是把网页的结构和表现分开，用DIV来制作结构，用CSS来制作表现。一定记住，凡是属于表现的都用CSS来做，不要直接写在网页文件里，而是写在样式表文件里，再调用它。
网页结构图
二、什么是标准的网页标准
对于网页美工来说，你需要满足以下几条：
预览时要能在IE6IE7IE8FOX四个浏览器同时正常浏览。
正确判断网页中的内容与表现，屏蔽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文件也拷贝到相应的站点目录，并保证链接地址正确
常用代码（图片滚动，文字滚动，广告切换，选项卡等）可以保存下来，以后制作类似的都可以重复使用。
以上是我从实际中总结出的一些心得，希望能对大家有所帮助。同时这门技术也在不断发展，不断更新，所以，我也感到只有持续的学习研究才能跟上技术的进步。
【关键词】DIV+CSS；布局；网页标准；美工
三年前刚开始讲授DIV+CSS课程时，跟学生说这是未来网页制作发展的趋势，转眼间到今天，不会这个技术，学生就找不到网页美工的工作。关于这项技术网络上有大量的文章，但从公司要求出发的很少；通过这几年与从事美工工作的毕业生及所在公司的深入了解，不断修改总结教学内容与方法，使之与公司的规范向适应。我一直想用最浅显易懂的语言从美工岗位角度诠释这门技术，以下是我的一些心得。
一、何为DIV+CSS
对于美工来说，就是不要把CSS写在网页文件里，应该写在样式表文件里。
就是把网页的结构和表现分开，用DIV来制作结构，用CSS来制作表现。一定记住，凡是属于表现的都用CSS来做，不要直接写在网页文件里，而是写在样式表文件里，再调用它。
网页结构图
二、什么是标准的网页标准
对于网页美工来说，你需要满足以下几条：
预览时要能在IE6IE7IE8FOX四个浏览器同时正常浏览。
正确判断网页中的内容与表现，屏蔽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文件也拷贝到相应的站点目录，并保证链接地址正确
常用代码（图片滚动，文字滚动，广告切换，选项卡等）可以保存下来，以后制作类似的都可以重复使用。
以上是我从实际中总结出的一些心得，希望能对大家有所帮助。同时这门技术也在不断发展，不断更新，所以，我也感到只有持续的学习研究才能跟上技术的进步。