关于心得上的体会:
经过前段时间对基础知识反复练习、记忆。如今终于能独立开发出一个静态网站,并没有想象中那么困难,似乎一切都是水到渠成,这或许是学习过程中不断总结的结果,我越来越能体会到在学习的过程中逐个属性去尝试,逐个效果去实现,整理笔记和发表技术博文是非常有必要的!在开发的过程中,免不了难以解决的问题,开始会认为自己无法完成,但是通过和他人讨论,理清思路后会渐渐清晰该如何去实现,还有一些需要在网上查阅别人的代码,学习别人的思路,我喜欢把这些素材收集起来,反复研读。开发过程中,还需要在问题难以解决时保持良好的心态,发生难以调试的结果,善用控制台来,学会发现它想要告诉你的“秘密”。先看控制台是否报错,若无,结合控制台仔细观察代码是否正确,有没有漏写的标点符号、字母,属性和属性值是否写错,选择符是否选中了指定元素,元素是否被覆盖了才不生效?然后通过控制台观察元素的盒模型,最后仔细回忆元素、属性特性,继承性等等等等....多次重复,养成良好的思维习惯,才能提高开发效率。
关于技术上的总结:
《小巨蛋》项目共由9大网页,和其中description、unit-introduce共计10+子网页构成的静态网站,页面构架相对简单。其中header、footer、banner有大量重复样式,编程时,应注重css代码的可复用性,并将其打包成一个公共样式base.css。建设网站时,不应急于求成,上手就开始编写。
因注重培养大局思维,首先观察所有页面的构架,确定好大方针:如应将首页分成哪些部分,每个部分的id名,子网页的划分是否可以套用,样式是否有相同的地方,网页中的字体大量重复的样式是否可以打包成一个公共样式等等。确定好大方针后,接下来该做的不是编程,而是应该划分好目录!!在开发的过程中,我是写到某一部分才开始在目录中创建文件夹,用到什么就创建什么,这样的弊端就是在需要的CSS文件或者image文件需要用到时,索引不方便,面对重复的样式需要不断修改代码,严重影响效率。以上两步准备工作完成后,才能进入开发,首先应在CSS文件中写入“测试样式”,为页面中的每一部分确定宽高、背景色和边框线,这样的好处是在开发过程中有参照物,宽高由PSD设计稿决定,背景色应选取灰色等浅色系的,注意标明备注,开发结束后删除。然后进行切图,将需要用到的图片都放入images文件夹中。在开发过程中,参照PSD文件进行布局,元素的位置应精确到每一像素。
在每一个项目开发,都有一些必要的或者常用的效果,如导航、二级导航、侧边栏式二级导航、轮播图、弹幕效果、banner中的圆形按钮、过渡样式;
鼠标经过样式:透明罩、背景图片放大、颜色变黄等交互效果。
鼠标点击样式:晃动、漂浮等动画效果。
应将一些常用的样式和效果打包成一个属于自己的CSS类库,它是提高自己开发效率的,行之有效的。
1.确定网站的大方针,观察和确定页面构架
2.确定目录,方便索引
3.切图,熟练掌握PS切图,将图像按规范命名
4.引入CSS重置样式和公共样式,在页面中写入测试样式
5.注意代码的复用,把它们写入公共样式
6.汇总常用的效果,打包进自己的类库