静态网站制作模板（静态网站制作模板图片）

本文目录一览：

1、静态网页制作步骤
2、怎样制作简单的静态的网页设计
3、静态网页设计
4、静态网页制作
5、如何用PHP制作静态网站的模板框架
6、制作一个静态版的网页，不需要自己编程？

静态网页制作步骤

静态网页制作步骤：

第一步：制作一个静态网页之前，我们需要先制作一个网页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列—确定）。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。

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

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

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

另外我们还可以采用front page。也可以很容易的实现。

望采纳。

静态网页设计

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

其中第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、新建一个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中，保存后打开看看效果！

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

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

静态网站制作模板（静态网站制作模板图片）

如何用PHP制作静态网站的模板框架

分离功能和布局的基本思想就是使得这两组人能够各自编写和使用独立的一组文件：程序员只需关心那些只包含PHP代码的文件，无需关心页面的外观；而页面设计人员可以用自己最熟悉的可视化编辑器设计页面布局，无需担心破坏任何嵌入到页面的PHP代码。如果你曾经看过几个关于PHP模板的教程，那么你应该已经明白模板的工作机制。考虑一个简单的页面局部：页面的上方是页头，左边是导航条，其余部分是内容区域。可以看出页面如何由这些模板构造而成：main模板控制着整个页面的布局；header模板和leftnav模板控制着页面的公共元素。花括号“{}”里面的标识符是内容占位符。使用模板最主要的好处在于界面设计者能够按照自己的意愿编辑这些文件，比如设置字体、修改颜色和图形，或者完全地改变页面的布局。界面设计者可以用任何普通HTML编辑器或者可视化工具编辑这些页面，因为这些文件都只包含HTML代码，没有任何PHP代码。 PHP代码全部保存到单独的文件中，这个文件也就是由页面URL实际调用的文件。Web服务器通过PHP引擎解析该文件，然后把结果返回给浏览器。一般地，PHP代码总是动态地生成页面内容，比如查询数据库或者执行某种计算等。下面是一个例子： // 此处的PHP代码设置 $content使其包含合适的页面内容 $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?这里我们使用的是流行的FastTemplate模板类，但其基本思路对于其他许多模板类来说都一样。首先你实例化一个类，告诉它到哪里去寻找模板文件以及哪一个模板文件与页面的哪部分对应；接下来是生成页面内容，把结果赋予内容的标识符；然后，依次解析各个模板文件，模板类将执行必要的替换操作；最后把解析结果输出到浏览器。这个文件完全由PHP代码构成，不包含任何HTML代码，这是它最大的优点。现在，PHP程序员可以集中精力编写生成页面内容的代码，而不必为了如何生成HTML去正确地格式化最终页面而担心。很容易看出采用模板还有第二个好处。如上例所示，页面左边的导航条单独保存为一个文件，我们只需编辑这一个模板文件就可以改变网站所有页面左边的导航条。避免页面元素重复 “这确实不错”，你也许会想，“我的网站主要就是由大量的静态页面构成。现在我可以从所有页面中删除它们的公共部分，要更新这些公共部分实在太麻烦了。以后我就可以用模板制作出很容易维护的统一页面布局。”但事情并非这么简单，“大量的静态页面”道出了问题的所在。请考虑上面的例子。这个例子实际上只有一个example.php页面，它之所以能够生成整个网站的所有页面，是因为它利用了URL中的查询字符串从数据库之类的信息源动态地构造出页面。我们之中的大多数人所运行的网站并不一定都有数据库支持。我们的网站大多数由静态页面构成，然后用PHP在这里、那里加上一些动态功能，比如搜索引擎、反馈表单等。那么，如何在这种网站上应用模板呢？最简单的方法是为每一个页面复制一份PHP文件，然后在每一个页面中把PHP代码里代表内容的变量设置成合适的页面内容。例如，假设有三个页面，它们分别是主页（home）、关于（about）和产品（product），我们可以用三个文件分别生成它们。这三个文件的内容都类如：希望你能够喜欢本网站"; $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?显然，这种方法有三个问题：我们必须为每一个页面复制这些复杂的、牵涉到模板的PHP代码，这与重复公共页面元素一样使得页面难以维护；现在文件又混合了HTML和PHP代码；为内容变量赋值将变得非常困难，因为我们必须处理好大量的特殊字符。解决这个问题的关键就在于分离PHP代码和HTML内容，虽然我们不能从文件中删除所有的HTML内容，但可以移出绝大多数PHP代码。静态网站的模板框架： ob_end_clean(); $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); } ?ageStart函数首先创建并设置了一个模板实例，然后启用输出缓存。此后，所有来自页面本身的HTML内容都将进入缓存。pageFinish函数取出缓存中的内容，然后在模板对象中指定这些内容，最后解析模板并输出完成后的页面。这就是整个模板框架全部的工作过程了。