南大软院大神养成计划——第四天

时间飞逝了，转眼间就离南大软院大神养成计划实施有4天，这4天说长也不长，说短也不短，对于南大软院大神养成计划来说，算蛮长的了，比较已经过了1/7，对于大学生涯，这四天根本不算什么，但是假如我们珍惜每一天的时间去学习，那么大学四年下来，你学习到的东西绝对要比别人多的多。

今天由于要赶网页大作业，再加上课多，所以只能晚上学习和写博客了，这是我第四次写博客了，开始觉得没什么意思，但是写到后面渐渐地发现了其中的乐趣，当你看着点击量慢慢上升时，就会有一种自豪感，我写的文章终于有人看了，哈哈，闲话就说到这里。

今天学习的是“网页简单布局之结构与表现原则”，这个部分，讲师并没有教我们新的内容，教的是分析效果图的方法。制作一个商用网站，首先是由美工人员制作一张效果图，然后有前端人员通过分析效果图制作网页，是网页效果跟效果图上面的一样，而分析效果图也是需要方法的，所以现在公司招网页前端人员，只要会ps就会优先录取，果然技多不压身了。讲师将这部分内容时，主要讲的是结构与表现的分离，那什么是结构和表现呢？结构就是那些html的标签，比如div，p，table，这些都是结构，表现就是css样式了。讲师教我们分析效果图的方法是：先别过多的被样子打扰，先放在结构上，其实这也高手分析效果图的方法。想想现在的我，就是初学者的样子，看到一张效果图，先是分析css样子，然后再考虑结构，而高手和我是反的，我在听讲师讲课的过程中，我也不是特别明白，为什么要先分析结构呢？分析css样式不是更加方便吗，到后面才慢慢理解了，制作一个网页就像建房子，建房子肯定要先搭建好建构，然后装修，假如一个网站先考虑css样式，弱化结构，然后假如我们改动一点样式也许就会让网页的主体结构发生改变，这在我以前编写网页的时候，深有体会。我以前编写网页的时候，因为初学，当然现在也是初学者的样子，常常脑海里想到什么效果就写什么效果，然后就大量用css样式，结构并没有固定，导致有时候改动一点css样式就导致了网页效果的变形，这样我必须修改所有的css样式，增加了我的工作量，导致了我的效率低下。所以今天学习到了高效编写网页的方法。如何像高手一样分析效果图呢？就是先考虑设计图中的文字内容和其他模块之间的关系，重点放在编写html结构和语义化上，然后再考虑布局和表现样式。

由于觉得学习有点少了，所以有学习到一点知识了，就是css 雪碧图应用。什么是雪碧图呢？雪碧图就是很多张小图片拼在一起的图片，淘宝等大型网站都用这类雪碧图。这是我学习到的一个知识。比如一个网页要用很多个icon，假如我们用img标签一个一个去加载，这是要浪费很多时间的，假如能够直接将这些标签放在一起，然后加载一张雪碧图就将这些图标全部加载出来，这样网页可以减少很多负担，节约用户时间。那么肯定有人会觉得奇怪，icon全部放在一张图上，那我们怎么去调用呢？这就需要用到background-position了，这个熟悉有两个参数，分别对应x轴和y轴，通过设置这两个参数就可以设置，这就相当于我们在ps上用矩形选框，矩形选框可以任意移动，矩形选框里就是显示的内容。所以正是因为有了这个属性，我们才能用雪碧图。淘宝上的icon就是雪碧图加载出来的，所以我们浏览淘宝页面的时候常常可以看到一张图片里有很多小图片，那就是雪碧图。

今天的学习内容就是这么多了，虽然学习的内容不多，但是确实非常重要的内容，是我能否成为网页大神的基石之一，期待明天的学习。