静态网页制作步骤

一、静态网页制作步骤

静态网页制作步骤：

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

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

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

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

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

扩展资料：

静态网页是标准的HTML文件，它的文件扩展名是。htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。我们就叫做静态页面。

静态页面一般都是html格式，鼠标双击这个静态页面，就可以打开这张网页，效果会跟图片设计的效果一样。那么这个静态页面就是一个网站了吗？这些静态页面其实只是做网站或者做模板的材料而已。

在网站设计中，静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含建站程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。

二、如何用PS制作网页首页的效果图？

ps、fireworks都可以用来做效果图的，用这些工具做效果图的时候只要注意一下栏目的排版以及用色的协调性，ps做网页效果图常用的效果不多，所要只要掌握几种常用的工具用法就可以了：选取、剪切、填色、渐变、蒙版、切图等。

刚开始初学的可以网上找一些好点的模版下来自己尝试着按自己的想法进行修改，等熟练掌握以后再完全自己构思、设计！

三、制作网页时，怎么用photoshop画网页整体页面效果图？

把图像尺寸设置为网页大小，然后慢慢设计（使用放大镜）就是了，设计完成后用切片工具切割，完成切割后选择文件――储存为Web和设备所用格式即可~

1、现在一般做1920px的网页，分辨率72

2、把内容放在中间的1000px-1200px以内，

3、左边和右边只是一些装饰，显得不那么空洞；

4、这只是一些基本的，具体的请慢慢学吧

你好，首先要确定好页面的大小，然后根据所需界面的板块大小建立辅助线，接着在辅助线所构置的板块大小逐个中绘制。也可以把单个的板块分开制作，单独建立文件，之后分组并入一个文件内。

网页效果还是要自己画的，具体怎么画，那好根据你的需要。

画完可以用切片工具切片，切好后。文件-》储存为WEB所用格式。

然后你在储存的位置就可以看到你所画的HTML效果。

做出了还要切片吧~

Tags：网页   效果图   photoshop

转载：感谢您对前端学堂(www.felearn.com)网站的认可以及对作品的青睐，欢迎各位朋友分享到个人网站或朋友圈。转载请说明文章出处“前端学堂”。 /QD/angular/223457.html

很赞哦！ ()