静态网页设计（初学网站制作须知道什么是静态网页）

本文目录

• 初学网站制作须知道什么是静态网页
• 静态网页制作步骤
• 怎么做一个静态网站
• 如何制作电子商务的静态网页
• 静态网页制作特点与方法
• 静态网站的简述
• Dreamweaver静态网页制作步骤有哪些

初学网站制作须知道什么是静态网页

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:www.example.com/eg/eg.htm，也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。

　　静态网页的特点简要归纳如下：

　　(1)静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;

　　(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;

　　(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;

　　(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;

　　(5)静态网页的交互性交叉，在功能方面有较大的限制。

静态网页制作步骤

静态网页制作步骤：

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

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

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

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

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

扩展资料：

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

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

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

怎么做一个静态网站

下载Dreamweaver.exe并打开，选择你使用的语言，本案例用html

一、打开页面后，选着设计窗口，如图所示。设计窗口可以快速布局网页，不需要自己代码。

二、打开你要设计的网页的设计图，本经验是百度经验首页为例，首先我们制作顶上的搜索条，点击插入—表格（如图所示）。打开表格属性表格属性。插入1行和5列，表格宽度为1130,（即为网页的宽度），边距，间距分别为0，此表格只是为了定位，因此不设边框。

三、设置好表格后，可在表格里面插入你的内容，首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整，鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示

接下来我们来做搜索框，点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图，文本框上班还要添加内容，因此，可选择单元格右击选择表格—拆分单元格，此处是需要添加一行的内容，因此拆分为两行，如图所示。

四、用同样的办法拆分上面的行，因为要添加10个选择项，因此拆分为10列（右击选中的行—拆分单元格—10列—确定）。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。

五、接下来我们做搜索按钮，同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。

六、接下来给按钮添加链接，本次经验分享的是静态网页，因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接，或者其他网站链接。

七、剩下的内容都可根据方法步奏逐渐添加，调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面，把所有做好的网页用超级链接链接起来即可做成一个简单的网站。

如何制作电子商务的静态网页

电子商务网站建设如何做，需要哪些步骤呢?下面简单说一下以下四步。

电子商务网站建设第一步，网站的规划与设计

电子商务网站算是一个比较复杂的系统，电商网站建设前就要想好需要有的功能。电子商务网站的规划也是建所有网站都需要做的事情，在规划设计中需要对网站进行整体的分析，明确网站的建设目标、确定网站的访问对象、网站提供的内容与服务、网站的域名、logo、网站风格和网站目录分类等内容，这一步也是电子商务网站网站建设成功的前提，因为所有的建设步骤都是按规划设计进行实施的。

电子商务网站建设第二步，站点的建设

电子商务网站规划设计以后，就开始进入网站的建设阶段，这一阶段主要有域名注册，网站配置，网页制作和网站测试的四个部分。除了电商网站测试，需要在其他三项完成之后才能进行之外，域名注册，网站配置和网页制作相对独立，可以同时进行。

电子商务网站建设第三步，网站发布

等电子商务网站建设完成之后，电子商务网站就可以在因特网中发布，正式上线之后，也就是用户可以通过域名直接对我的网站进行访问了。

电子商务网站建设第四步，管理与维护

网站的管理维护虽然是最好一个步骤，但是实际上从头至尾，只要网站没有停止运行，就一直在对电子商务网站进行管理维护，所以这一步，也是最为复杂的一步，网站管理主要是对网站进行安全，性能和内容上三个方面的管理。

静态网页制作特点与方法

网页都有静态和动态之分。从技术角度来说静态页面就是html网页，主机存储的页面内容，和并未有经过和数据库读写。而动态页面望文生义，页面内容是能够动态从数据库交互，运行需要环境，并且客户在浏览器端看到的内容，与主机存储的网页内容不一样。静态页面通常在浏览器上看到的以html为后缀，可以通过路径转发可以实现伪静态页面。即使不是以这些扩展名结尾的网页，可能也是一个动态页面，看似静态，而本质是伪静态页面的动态页面。静态网页有很多特点，这里就来谈一谈！

网页静态化的问题要提交完成，由于一般情况下在制作网站中，静态化的页面能与搜索引擎建立友好关系，然而这并不意味着动态化的网页就不能使用了。静态页面有优势，不过动态网页有时候也是要有的，因此需要根据网站的具体情况做出正确的选择。路径对于每个网站来说都相当重要的，相信都了解首页权重栏目页文章页。至于使用树形框架还是扁平框架都处决与自己的决定，那么在布局的时候不仅需要做好伪静态路径框架处理，还需要结合长尾关键词布局并运用到相对于路径，在很多情况下利用栏目页路径进行长尾词布局要比用文章落地页的更有优势。

现在一些搜索引擎使用人数比较多，页面是不是动态化对于搜索引擎的的影响并不是很大，然而在另外一个方面，动态网站中过多的路径参数会受到蜘蛛陷阱的影响，网时对于网页的收录效果也会影响。相比较于动态页面，静态网页的特点在页面的减负方面，提升网页的访问运行速度方面以及安全稳定方面都有优势。对于那些已经建成的动态网站，要想进行相应的改变，使之成为静态网页，在操作方面会比较困难，然而在技术上可以采用静态的路径来重写。

对于小网站来说，网站是动态的还是静态的并不是什么多大问题。由于小网站数据量不大，即使是选用很标准的技术，根据方法实现静态后速度优势也不见得就可以彰显出来。站在客户的角度而言，网速哪怕是快一秒都是有必要的。对于浏览量比较大的网站倘若打开速度慢，将会失去相应的体验。静态网页制作以提高排名与浏览体验为特点，进行分析策划与产品定位分析，实现搜索引擎核心关键词排名更靠前，提高公司业绩，实现盈利。

静态网站的简述

·每个静态网页都有一个固定的网址，文件名均以htm、html、shtml等为后缀；

·静态网页一经发布到服务器上，无论是否被访问，都是一个独立存在的文件；

·静态网页的内容相对稳定，不含特殊代码，因此容易被搜索引擎检索；html更加适合SEO搜索引擎优化。

·静态网站没有数据库的支持，在网站制作和维护方面工作量较大；

·由于不需通过数据库工作，所以静态网页的访问速度比较快；

现在流行的cms都支持静态化网页，这有利于被搜索引擎收录和提高访问速度，但需要占用较大的服务器空间，程序在生成html的时候非常消耗服务器资源，建议在服务器空闲的时候进行此类操作。什么是静态网页和动态网页？静态网页，动态网页主要根据网页制作的语言来区分：

静态网页使用语言：HTML（超文本标记语言）

动态网页使用语言：HTML+ASP或HTML+PHP或HTML+JSP等

还可以从url上区分：

静态网页使用url：都以html为结尾

动态网页使用url：动态的url中基本带有“？”号

程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。

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

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

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

（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；

（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

（4）动态网页中的“？”搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

另外，如果扩展名为.asp但却没有连数据库，完全是静态的页面，那也是静态网站.asp只是扩展名。

（5）静态网站因为没有和数据库连接，所以要有动态网站的效果就必须制作大量的网页，其中许多网页只能是虚假网页，根本实现不了动态网站的功能。在网站设计中，纯粹HTML（标准通用标记语言的子集）格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。

静态网页的网址形式通常为：

也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。我们将静态网页的特点简要归纳如下：

（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含“？”；

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页都是保存在网站服务器上的，每个网页都是一个独立的文件；

（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；

（4）静态网页没有数据库的支持，网站信息量很大时，完全依靠静态网页制作方式在网站制作和维护方面工作量较大，比较困难；

（5）静态网页的交互性较差，在功能方面有较大的限制。

由于动态网页静态化的技术，一般网页前台的文件都是以htm、htm、shtml结尾。此类网站有后台，有数据库，前台页面与数据库没有任何交互的行为，此类网站与静态网站无异。可以视为静态网站。

Dreamweaver静态网页制作步骤有哪些

1、在Dreamveaver中“文件—新建—常规—基本页—HTML”，这就建好了一个页面，英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。

2、在标题空格那里输入网页的名称，点击—页面属性，打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像，超级链接颜色，其他都保持默认值就可以了。

3．这个时候光标在左上角，你可以输入一句话，如“欢迎大家来到我的主页”，用文字，用菜单“窗口/属性”打开属性面板，取文字的大小，再把文字设置为居中，然后在文字的前面敲几下回车就位于页面中间了。

4．要选取字体，即选择字体中的最后一项：即字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体，点击中间的按钮就可以加入了。