简单制作html静态网页;学完HTML和CSS怎么做静态网页?你需要注意这些细节

很多学习HTML5的小伙伴在学习的过程中都遇到过这样的问题:为什么感觉能做出来的页面简单制作html静态网页,然而做起来却总是诸多问题?千锋广州小编告诉你,其实这是正常现象,谁也不能几天就成为大师,你的实践还太少了!练习多了,经验多了,静态网页自然也就手到擒来。

简单制作html静态网页;学完HTML和CSS怎么做静态网页?你需要注意这些细节

简单制作html静态网页;学完HTML和CSS怎么做静态网页?你需要注意这些细节

静态的网页其实就是由两部分组成,一个是底层结构HTML,另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家,首先得把需要的家庭成员找齐了,即首先考虑要做一个什么样的网站,例如一个综合类网站包括简单制作html静态网页:搜索框、导航、文章类别模块、文章标题以及一部分广告板块;一个博客主页包括:导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。

简单制作html静态网页;学完HTML和CSS怎么做静态网页?你需要注意这些细节

写页面的时候是有剧本的,这个剧本指网页设计图,或者某个现有网页,建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能,把整个完整的页面截取下来,QQ浏览器,360浏览器都可以做到简单制作html静态网页。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为,并且做到了页面数据的精准度,而不是随意的给数据,或者是利用浏览器的F12功能查看原网页的数据。

按照设计好的剧本接着就可以找对应的成员了,例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字,相对来说页面的整体布局是比较简单的,当然还有很多不同类型的页面,布局要复杂一些。

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

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

接下来要把写好的结构进行美化,不然页面就会一团乱麻,没有美感,而网页当中润色部分是用CSS来做的。这个环节需要更加细心,例如百度首页导航红色框整体在绿色框的右边,需要给红色框添加float:right;红色框里面文字的字号大小,字体,字体颜色,水平间距,垂直间距都需要一点点写。如果在写的过程中遇见了问题,可以借助Chrome浏览器的调试功能,哪里错了用箭头点哪里,结构看左边,CSS看右边,看看CSS属性有没有显示,有没有划掉,有没有黄色报错等等。

在做页面时,需要大量的练习,才可以熟能生巧。一个页面写完之后,总结一下这个页面在书写过程中遇到了哪些问题,是怎么解决的,为什么这样解决,深入思考这个模块的这个效果可不可以用其他的方法来实现,以做到举一反三。

千锋广州小编建议大家在HTML5的过程中轮与实践要相结合,配合实战项目讲解网站页面布局,一定要学好HTML、CSS,基础打好了,才能更有信心面对之后的挑战。

  • 简单制作html静态网页;学完HTML和CSS怎么做静态网页?你需要注意这些细节已关闭评论
  • 11 views
    A+
发布日期:2021年02月08日  所属分类:网络推广