静态网站建设（静态网站开发）

本文目录一览：

• 1、静态网页制作步骤
• 2、使用Nginx搭建静态网站
• 3、企业网站建设为什么要做静态

静态网页制作步骤

静态网页制作步骤：

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

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

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

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

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

扩展资料：

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

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

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

使用Nginx搭建静态网站

开始建站了，暂时还没想要做些什么东西。

Anyway，先搞个云服务器吧，那要怎么搭建呢？先来个最简单的。

Nginx 配置文件目录一般在 /etc/nginx/ 下，打开 nginx.conf 文件可以看到配置：

当外网用户访问服务器 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。

当我们在服务器上安装并启动 Nginx 之后，就可以通过 ;域名或IP 访问我们的网页了。所以，在浏览器中输入 即可。

我们观察到浏览器的地址变成了 ，这页面是安装 Nginx 的默认站点，可以在 /usr/share/nginx/html 目录下找到。在 nginx.conf 配置文件中，有一项 root /usr/share/nginx/html 的配置，意思是当外网访问服务器 跟目录 时，Nginx 会将资源指向 /usr/share/nginx/html 的站点。

但如果输入地址，无法打开（如下截图）。

以阿里云为例，需要在云服务器添加 “安全组规则” ，添加并保存，重新刷新页面就能打开了。

我习惯将前端静态资源放置到服务器的 /data/www 下，因此将配置修改为 root /data/www 。此时访问 会指向 /data/www/index.html （在不配置 location 的 index 情况下，Nginx 默认配置是 index.html ）。

由于我使用的是 Mac 机器，因此可以直接在系统终端使用 scp 命令将本地文件上传到云服务器。

scp （secure copy）用于在 Linux 下进行远程拷贝文件的命令。类似于 cp ，只不过 cp 只能在本机进行拷贝，不能跨服务器。 -r 表示递归复制整个目录。

需要注意一下，下面两种的区别：

其中 1️⃣ 得到的是 /data/www/dist ，而 2️⃣ 得到的是 /data/www 。前者表示将 dist 整个目录拷贝至 /data/www 下。后者是把 dist 目录下的所有子文件和子目录都拷贝至 /data/www 。

换句话说就是，前者配置 root 的路径应该是 /data/www/dist ，后者则为 /data/www 。

效果如下：

在浏览器中访问 即可看到我们配置的网页了。

最简单的 Nginx 部署静态网页就完了，其他的下次再讲...

The end.

企业网站建设为什么要做静态

一、静态网站的优势劣势

做静态网站设计所采用的技术原理是一对一的形式，也就是说这样的网站上面，一个内容对应的就是一个页面，无论网站访问者如何操作都只是让服务器把固有的数据传送给请求者，没有脚本计算和后台数据库读取过程，大大降低了部分安全隐患。静态网站设计除了拥有上述的速度快，安全性高这两个特点之外还具有跨平台，跨服务器功能。

了解网站优化(搜索引擎优化，简称seo，例如百度seo、谷歌seo)，它所提供给广大用户的信息是本身就存在于数据库当中的信息而不是实时的信息，固定的信息内容更容易接受和保存。我们可能常常会遇到这样的问题，当我们搜索自己所需要的信息时得出来的结果可能已经失效，这就是静态页面网站设计的不足之处，但又因为它的稳定，所以久久不会被删除。

二、动态网站的优势劣势

与静态页面网站设计不同，asp生成的动态页面信息不但不易被搜索引擎所检索，而且打开速度慢，再者也不稳定，这就是为什么这么多专业网站建设公司都一再建议客户使用静态形式的网站设计的原因，有些网站建设公司会考虑把页面进行伪静态处理，但不知道大家有没有注意过，伪静态处理的url通常是不规则的。

如今随着互联网技术的发展，越来越多的建站技术被应用到网站建设中来，一些开发语言也慢慢的被替换，之前，旭网科技给客户做的的网站很多是采用静态页面网站设计技术，但这样的页面也因为没有数据库作为支持而缺乏互动功能，因此动态网站制作技术也就慢慢的成为网站建设行业的主流。只是，如何把握好动态结合的最佳系数，不同的专业企业网站建设公司有不同的做法。

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

程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如asp、 php、jsp、asp.net、cgi等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、flash、javascript、 vbscript等等，它们是永远不变的。

静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。

静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。

动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。

静态网站建设的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于静态网站开发、静态网站建设的信息别忘了在云尚网络www.ysfad.net进行查找喔。