千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  静态网页制作,合理应用HTML和CSS

静态网页制作,合理应用HTML和CSS

时间:2018-01-22 15:46:03     来源:千锋视频教程 作者:李老师

  静态的网页其实就是2部分组成,一个我们的底层结构html,另外一个就是负责修饰结构的css,其实书写静态网页就像是我们小时候在过家家一个样子的,你首先得把你需要的过家家的家庭成员找齐了,而我们这个找家庭成员就像是我们书写页面网页的时候,那个最底层的结构html,你在玩过家家的时候脑海里肯定已经有了一个简单的家庭成员和故事情节了,而我们在写页面的时候是有剧本的,这个剧本就是你看到的设计图,或者是你看到的某个网页,个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能,把整个页面完整的截取下来,QQ浏览器,360浏览器都可以做到的,这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为,并且做到了页面数据的精准度,而不是随意的给数据,或者是利用浏览器的F12功能查看原网页的数据。

  首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看,其次利用浏览器的F12查看功能,这样子做你就会不小心的看到了原代码,你的思维跟原来的编程人员思路有些时候是不一样的,这样就限制了你的思路,最后你翻找的过程真的是很需要时间的,同时还会影响你的思路。按照设计好的剧本然后我就可以对应这找人员了,比如说爸爸、妈妈、孩子、锅、饭碗、筷子,菜等等,我们写页面也是的。

  比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字,相对来说页面的整体布局是比较简单的,当然还有很多不同的类型的页面,布局上比这边要复杂一些,具体的可以看下面的图。

静态网页分析-1

静态网页分析-2

静态网页分析-3

  这个是我们看到一个图的时候,大致在脑海当中对页面进行一个简单的扫描,进行初步认识看看页面当中都有哪些,如果把页面当成一张纸,那么在一点点撕碎的过程中要怎么样从大到小一点点的分割,当我们有了初步的认识之后,就可以把这些东西转化成我们的html结构,所有画的这些不同颜色的框框我们在写的时候用的都是div。

  从上往下,从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后,在往里面放一些小的东西,比如图片img、表单form input,文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积,不是把整个页面都堆积出来,而是一个模块一个模块的来,比如头部的、中间左边的、尾部的。

  接下来我们需要做的就是把写好的结构进行美化,不然你就会看到如下图一样的场面。

静态网页分析-4

  难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮,妈妈要穿上高跟鞋呀,需要涂抹口红呀,爷爷是需要有胡子的而且还是要白色的才会更像一些,最好是要弯腰驼背的。

  而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心,涉及到的东西很多,同时也会伴随着很多的问题,毕竟想要某个人形态外貌上和剧本人物一致,不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄,比如:

静态网页分析-5

百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float:right;红色盒子里面的文字的字号大小,字体,字体颜色,水平间距,垂直间距这些都需要一点点的写,如果在写的过程中遇见了问题,我们可以借助Chrome浏览器的调试功能,哪里错了用箭头点哪里,结构看左边,css看右边,看看css属性有没有显示,有没有划掉,有没有黄色报错等等。

  这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么,就好像你穿衣服的时候肯定是拿上衣,而不是拿裤子穿在上面,如果有人这么做你会告诉他这样是错的,这个裤子要穿在下面一样。

静态网页分析-6

  最后就是总结和举一反三了,一个页面写完之后,不是就是完了,更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题,是怎么解决的,为什么这样子解决,更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现,做到举一反三。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱