网页制作

专注点在于:把设计变成真实可用的网站


在设计师设计好了网站效果图之后,就需要前端工程师根据效果图来制作网页了,网页制作考验的就是编程能力了,至少需要撑握html、css、javascript等语言。 本文来聊聊前端工程师的那些事。

1、效果图和网页倒底有什么区别?

首先我们来看一个网站的效果图和网页,大家就明白了。如下图即为网站的效果图,网站效果图一般可用图片查看软件就能打开


网页设计效果图


如下图,这就是通过html5、css、javascript代码编写的一个网页,大家可以看到这是用浏览器打开的,是不是和效果图很像,这个网页使用了响应试技术,所以没有达到和效果图完全一致, 我们通过这两张图,可以简单的总结一下网站效果图和页面的区别:

一、文件格式不一样,效果图一般文件后缀是jpg或者png,他们使用PS软件时行编辑;而网页呢是由html、css、javascript代码组成。
二、打开方式不一样,效果图可以用一些图片查看软件就能打开,而网页只能用浏览器打开才能看到最终的效果。
三、分工不同,效果图需要的是美感,设计师。网页需要的是逻辑,编程开发,前者属于艺术范围,后者属于科技范围。


网页设计效果图
2、揭开网页制作的代码奥秘

我们来看一段简单的html代码,这段代码就是上图浏览器呈现出的那个网页中的,我们可以用记录本等文本工具打开, 来看一看里面到底有啥东西。


网页设计效果图


这一段代码,在浏览器上呈现如下图所示,我们可以看到,一个html文件里由很多标签组成:如 title标签,div标签等,img图片标签等等,不同的标签有不同的作用, 比如title标题,是就指浏览器上的标题,div、p、span、ul、li、等等标签是用来呈现文字的,button标签是用来呈现按纽的,img标签是用来呈现图片的。 当还有一个a标签,这个就是链接,通过a标签我们就可以从一个网页链接到另一个网页了。

html可以通过这些标签来制作丰富的界面,通过引入css文件来控制元素的布局和样式,通过引入javascrip脚本来实现炫酷的人机交互等


网页设计效果图
3、网页制作一般用什么工具?

我们搞懂了html标签的使用,其实就可以直接用记事来进行网页制作的工作,往往我们为了提升效率,会使用dreamweaver来制作网页,这个工具可以自动生成很多代码,人性化的提示,以及所见即所得的模式, 能大大的提高网页制作的工作效率。