本篇文章给大家谈谈静态网站制作模板，以及静态网站怎么制作对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、静态网页制作
• 2、如何用Frontpage制作静态网站
• 3、静态网页设计
• 4、静态网页制作步骤

静态网页制作

方法/步骤

1、新建一个txt文本文档，先不要急着修改文件后缀名，有基础的朋友手动输入HTML代码，不会也没有关系，百度搜索“网页HTML代码”。

代码：

!Doctype html

html

head

title静态网页制作教程/title

meta charset="gbk" /

link href="css.css" rel="stylesheet" type="text/css" media="all" /

/head

body

/body

/html

2、基础的静态网页代码写出来了，下面在body/body中间添加网页需要的数据内容（文字、图片、表格、视频等），然后将txt文本文档的后缀名.txt修改为.html。现在点击打开看看效果！小编在body中间加入的文字：静态网页制作教程。

3、这样的文字太单调了，需要用CSS样式定义，小编在桌面上新建一个文件夹“web”，把index.html文件放进去，然后在web文件件里面新建一个txt文本文档，修改为“css.css”。

4、使用鼠标右键“打开方式”，选择txt文本文档编辑css.css文件。用CSS定义网页字体大小12像素，网页背景色为红色，字体颜色为白色。

代码：

body{font-size:12px;background:red;color:white}

保存，然后打开web文件夹中的index.html文件，查看效果。

5、下面在web文件下面新建一个images文件夹，然后打开软件Fireworks，设计自己需要的图片（没有就去百度搜索自己需要的图片，使用QQ截图功能，截取自己需要的图片），把设计好的图片存入web文件夹下面的images文件夹里面。现在我们在body中放入图片，让图片在网页里面居中。

代码：

div align="center"

img src="images/pic.png" alt="logo" title="静态网页制作教程" /

/div

把上面的代码放入index.html的body中，保存后打开看看效果！

小编在这里省略了表格和视频的制作，小伙伴不知道的话，可以百度搜索一下。

整个简单的静态网页制作完毕。

如何用Frontpage制作静态网站

一、基本前提。

我不了解您对Frontpage的运用达到了什么程度，所以需要统一认识几个概念，或者说我所理解您的问题所说的有关概念，以便介绍这个网站的制作。

1、静态网站是指该网站不涉及后台“自动”更换网页或有关数据的设置。

2、您说的“网站至少有五页”，就是说在您网站的主页上至少有5个点击展开网页的“按钮”。

3、“不超过三层”，那么，网站的首页应该算是第一层，点开网站首页按钮展开的网页是第二层，在点开的网页中能链接或超链接到的基本页面是第三层。

如果是以上的概念符合您的意思，那么，下面开始制作网站。

二、制作网站。

1、新建网站。打开Frontpage界面，点击“文件”→“新建”→“网站”。

2、首页模板。选择网站模板或者在Frontpage工作区通过插入表格自己设计网站首页。

3、制作首页（算是第一层）。

首先，用插入表格的方法，插入首页“页首”的背景图案和标题。

其次，同样用插入表格的方法在背景图案和标题的下方，为设置按钮用的横向、大小根据您需要的五个单元格，分别在每个单元格中定位光标之后，“插入”→“表单”→“按钮”，然后再在五个“按钮”中输入五个网页名称，比如“网站首页”、“公司简介”、“产品介绍”、“服务项目”、“信息反馈”（5个）等等。

第三，用插入表格的方法，在首页的左边插入本页要显示的纵向栏目，设置方法近似前面设置按钮的方法，可以设有“公司新闻”、“业务往来”、“有关图片”（根据需要）等等。

还是用插入表格的方法制作页脚。首页留下最大面积插入和显示本页主要内容。

这个尚未插入大面积内容的首页，我们把它叫做“模板”，我们要根据需要把这个模板复制若干，在这里我们先复制9个，先把它们分别编号为01至09。

4、制作分页（算是第二层）。

首先，在01这个模板的那块最大面积上插入首页想显示的内容，包括文字、图片、动画和视频等等，这就是对应“网站首页”按钮的分页。

其次，分别在02至05这4个模板的那块最大面积上，插入要显示的相关内容，分别对应的就是“公司简介”、“产品介绍”、“服务项目”、“信息反馈”按钮的分页。

第三，分别在06至08这3个模板的那块最大面积上，插入要显示的相关内容，分别对应的就是“公司新闻”、“业务往来”、“有关图片”需要连接的分页。

5、页外内容。所谓页外内容，就是一些不直接摆放在首页和分页中的内容，比如一些需要在页面里点击文字就能放大原有尺寸进行观赏的图片、站外网页地址或E-mail等等，当这些页外内容在各个分页被点开之后，展现出来的就是您的“第三层”页面了。

6、做超链接。用Frontpage制作网页，除了插入表格所有内容的方法和Word的方法一样之外，作超链接业一样，不需要多说。但是这里要强调两点：

第一，分页中的“缩略”图片以及文字（我们称之为“标签”或“关键词”）必须与“页外内容”即原尺寸图片或站外网页地址或E-mail等进行超链接。

第二，所有的分页必须进行“双向超链接”处理，才能实现“互相打开”，比如说您在“网站首页”这个分页上完成了与“业务往来”分页的超链接之后，您还要打开“业务往来”分页，从这个分页再进行一次与“网站首页”的超链接，只有这样，才能实现既可以从“网站首页”打开“业务往来”这个分页，也可以从“业务往来”这个分页打开“网站首页”。这是很多网友在制作网页时出现不能互相打开的致命原因。

顺便说一下，您可以根据您的需要，也可以不设置左边的“栏目”，只做那五个按钮。

希望对您有帮助。

静态网页设计

我把网上最主流的网页/网站制作工具都列出来了

其中第1、2是主要制作工具，后面的多是辅助工具

3、6是比较容易上手的

另外最简单的静态页面其实可以用word制作，保存成html就可以

你可以试试

1、FrontPage

FrontPage是一款优秀的网页制作与开发工具之一，它本身也是Office2000中的一个重要组件，采用了与Office2000其他组件一致的界面和操作方式，只要您使用过Office软件，就可以轻松掌握FrontPage的用法。

2、网页制作三剑客

Flash、Dreamweaver、Fireworks合在一起被称为网页制作三剑客。这三个软件相辅相承，是制作网页的首选工具，其中Dreamweaver主要用来制作网页文件，制作出来的网页兼容性好、制作效率也很高，Flash用来制作精美的网页动画，Fireworks用来处理网页中的图形。

3、Photoshop

Photoshop是Adobe公司的王牌产品，无论是在平面广告设计、室内装潢，还是处理个人数码照片方面，Photoshop都已经成为不可或缺的工具。在网页制作方面，它多姿多彩的滤镜和功能强大的选择工具可以做出各种各样的文字效果来。

4、Swishmax

Swish是一款非常方便的Flash文字特效制作工具，你只要点几下鼠标，就可以创造出形状、文字、按钮动画，你也可以选择内建的超过230种诸如爆炸、漩涡、3D旋转以及波浪等预设的动画效果。

5、PhotoImpact

PhotoImpact提供了多媒体时代专业影像设计者最直觉的创意空间、最方便的制作工具、及最宽广的表达形式，整合了新时代的3D物件及文字特效与粒子效果、压力笔支援、不同的自然笔触、各式直觉操作的特效图库、以及网页影像与办公室文件的相容性，将构思到表达的过程完整组合，是专业网页影像设计者不可或缺的利器。

6、Sound Forge

Sound Forge软件是一款非常棒的音效编辑软件,它除了音效编辑软件的功能外,还可以让你处理大量的音效转换的工作,使你能够轻松的完成各种看似复杂的音效编辑工作。如果下载的是英文版，可以用金山快译永久汉化，但效果不是很尽人意。

7、硕思闪客精灵

硕思闪客精灵是一款用于浏览和解析Flash动画的工具。它可以将.swf文件导出成.fla文件，还能将flash动画中的图片、矢量图、声音、视频（*.flv）、文字、按钮、影片片段、帧等基本元素完全分解，以及对动作脚本(ActionScript)进行解析，清楚的显示其动作代码，让你对Flash动画的构造一目了然。建议你赶快去下载吧！｝

8、Clipyard

你只要导入不同的Flash动画文件，将其放在不同的层上，经调试效果，导出后就成了一个单独的flash了，操作简单，特别适合于将自己喜欢的Flash动画加入祝福、签名后赠送友人。

9、FlashFXP

是一款优秀的FTP工具，特别适合Web站点管理员使用。支持文件夹(带子文件夹)的文件传送、删除；支持上传、下载及第三方文件续传；可以跳过指定的文件类型，只传送需要的文件；可以自定义不同文件类型的显示颜色；可以缓存远端文件夹列表，支持FTP代理；具有避免空闲功能，防止被站点踢出；可以显示或隐藏“隐藏”属性的文件、文件夹；支持每个站点使用被动模式等。

10、FlaX

FlaX是一款制作Flash文字特效的小巧软件。在以前若要制作文字绕圆圈的动画，在Flash里一个一个字的慢慢调整位置，颇费时间，如果使用FlaX很快就可以就搞定。 FlaX有四个窗口面板：预览窗口、影片属性面板、文字属性面板、特效属性面板。

11、Web Animator

Web Animator(网页动画设计)是HomePage Builder附带的创建动画GIF的程序。所谓动画GIF是GIF格式图像文件的一种，组合几个图像象漫画一样连续运动。动画GIF与普通的GIF图像一样可以粘贴到页面。使用Web Animator可以完成如下工作：组合现有的图像，创建类似于漫画的动画；给一个图像添加动画效果，创建具有效果的动画；给指定的字符串添加动画效果，创建字符动画。

12.golive

Adobe收购mm之后推出的网页制作工具,将代替Dreamweaver成为主流.

满意请采纳。

静态网页制作步骤

静态网页制作步骤：

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

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

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

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

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

扩展资料：

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

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

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

静态网站制作模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于静态网站怎么制作、静态网站制作模板的信息别忘了在本站进行查找喔。