web前端静态网页的制作流程

发布时间:2022-04-25 13:44:30来源：魔方格

web前端静态网页的制作流程：制作静态网页效果图——将制作好的静态网页效果图进行PS切片——使用HTML5和CSS3进行网页布局——使用JS代码制作特效——优化网页代码，删除冗余的文件。

第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4中文版制作。

第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。

第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。(这个部分需要有代码基础，可先学习HTML入门教程)

第四步：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。

第五步：优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。

静态网页与动态网页的区别

1、网页制作语言上的区别

静态网页使用超文本标记语言(标准通用标记语言的一个应用)，也就是顶部会标记一个html。

动态网页使用语言：超文本标记语言+ASP或超文本标记语言+PHP或超文本标记语言+JSP等。

2、程序运行端口的差异

静态页面则在客户端就能直接运行，网页数据和信息，除非人为去更改，否则不会有变化。

动态网页需要在服务器端运行，直接调用服务器数据，根据不同用户，不同的行为返回不同的网页和数据。

3、关于两者区别简单的直接描述

(1)、静态页面是设计者把页面上所有内容都设定好、做死了，然后放在空间里，不管是谁在任何时候看到的页面内容都是一样的，一成不变(除非手动修改页面内容)。静态html页面文件，可以直接用本地的浏览器打开。

(2)、动态页面的内容一般都是依靠服务器端的程序来生成的，不同人、不同时候访问页面，显示的内容都可能不同。网页设计者在写好服务器端的页面程序后，不需要手工控制，页面内容会按照页面程序的安排自动更改变换。

机构简介