学做网站培训课程介绍

当前位置:

怎么做静态页面,静态网页制作方法

所谓静态页面(又称静态网页)是指通过HTML和CSS等纯静态建站语言编写的网页。相对而言,我们制作的网站叫做动态网站。静态网页与动态网站的区别在于静态网页没有后台,不需要编程语言,也不能实现用户交互(如:注册、登录、搜索、查询等)。(更多区别可参考:网站制作与网页设计的区别

制作静态网页的作用是为了制作动态网站打下基础,制作网站前先制作静态网页,然后再将静态网页转化成动态网站。

静态网页静态网页

下面学做网站论坛介绍一下怎么做一个静态网页,静态网页制作方法。

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

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

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

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

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

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Wordpress 如何开启伪静态 视频教程 (1120060 次浏览)
    做网站制作好之后,如果网站做SEO优化时,需要进行伪静态的设置,同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpr
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • 针对于网站中的一些特殊页面,WordPress提供专题页面功能。通过新建WordPress 专题页面,可以让我们在做网站中,制作一些特殊的网页版面。例如,
  • 在学做网站论坛的论坛制作课程中,我们讲到如何使用Discuz程序进行论坛网站建设,论坛网站可以任意去发贴。作为管理员的我们可能会发现一些别人发了一
  • 网页如何添加背景音乐 视频教程附件下载 (1116934 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 网页如何添加视频动画 视频教程 (1107312 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就