简单网站框架模板（网站框架设计图）
本篇文章给大家谈谈简单网站框架模板，以及网站框架设计图对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
用PHP制作静态网站的模板框架(二)
PHP代码全部保存到单独的文件中，这个文件也就是由页面URL实际调用的文件。Web服务器通过PHP引擎解析该文件，然后把结果返回给浏览器。一般地，PHP代码总是动态地生成页面内容，比如查询数据库或者执行某种计算等。下面是一个例子：
?php
//
example.php
require('class.FastTemplate.php');
$tpl
=
new
FastTemplate('.');
$tpl-define(
array(
'main'
=
'main.htm',
'header'
=
'header.htm',
'leftnav'
=
'leftnav.htm'
)
);
//
此处的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去正确地格式化最终页面而担心。
你可以使用这种方法和上面的文件构造出一个完整的网站。如果PHP代码是以URL中的查询字符串为基础生成页面内容，例如，你可以据此构造出一个完整的杂志网站。
很容易看出采用模板还有第二个好处。如上例所示，页面左边的导航条单独保存为一个文件，我们只需编辑这一个模板文件就可以改变网站所有页面左边的导航条。
请给我一个网站的框架模板
是不是类似马克斯后台那种？
点顶部的导航，可以换下面左边的内容，
点下面左边的内容，可以换下面右边的显示页面？
下个马克斯CMS看看吧
如何用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函数取出缓存中的内容，然后在模板对象中指定这些内容，最后解析模板并输出完成后的页面。 这就是整个模板框架全部的工作过程了。
网页框架制作模板的问题
■ 什么是框架型网页?
如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。此外，一些框架型站点的模板在其页面上方放置了公司的LOGO或图片。不过这一块也是位置固定的。而页面的其它部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中放入链接或导航按钮。
在一些关于搜索引擎优化方面的文章中，基本上都认为网站用框架来设计是极不可取的。这是由于大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。
■ 为什么使用框架的网页无法被正确索引?
我们将向大家解释为何使用框架的网页无法被使用网络蜘蛛(spiders)或网络爬虫(crawlers) 的搜索引擎(如Google)正确索引的主要原因。在一个框架网页的后台代码中，我们一般能够看到的是网页的标题标记(Meta Title)、描述标记(Meta Description)、关键字标记(Meta Keywords)及其它原标记(Meta Tags)，同时你还会看到一个框架集标记(Frameset Tag)。框架中的内容在后台代码中是无法被体现的，而对于那些主要搜索引擎的搜索程序来说，如Google的GoogleBot和Freshbot，其设计思路都是完全忽略某些HTML代码，转而直接锁定网页上的实际内容进行索引。这样一来，网络蜘蛛在那些一般性的框架网页上根本找不到要搜索的内容。这是由于那些具体内容都被放到我们称之为“内部网页”中去了。
使用“Noframes”标记进行优化
使用了框架型网页并不意味着就完全无法对其网页进行优化。实际上在HTML标记中，有一个叫做NOFRAME的标记，如果使用得当的话我们就可以有效地对页面进行优化了，从而使得搜索引擎能够正确索引你框架网页上的内容信息。也有网站这样使用NOFRAMES标记：他们在NOFRAMES标记里放上这么一段话：“本网页使用了框架，但您的浏览器不支持框架。请下载新的浏览器观看。”
让我们看看那些专业的搜索引擎优化公司是怎么做的吧。他们在使用了框架的网页中，有效的提供含有丰富关键字和关键短语的重要文字和内容，从而有效帮助网站在SERP(搜索引擎搜索结果页)中取得较高的排名(页面等级)。
这样优化的结果，其实就是让主要搜索引擎不但读取了你的网页后台代码中的标题和其它原标记，而且对那些不支持框架的浏览器所无法显示的页面内容信息，也进行了索引。如果你出于某种原因非要使用框架结构，那么请紧记：在你的后台代码中一定要正确的使用NOFRAMES标记，这一点非常重要。
很显然，我们所说的这些优化措施，只有对那些网页内容经过精心撰写，并且在内容中充分使用了重要关键字和关键短语的网站才起作用。
综上所述，不管是使用框架技术的网站还是非框架技术的网站，只要你采用的是恰当的技术和正确的技巧，都可以进行完美的优化从而取得理想的页面等级。
什么是框架
前面我们介绍了很多网站的页面是用表格制作的，还有一种更方便的工具，就是使用框架。
框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。
iframe/iframe
将文档分割为几个框架后，Dreamweaver会自动产生一个没名字的框架体文件，比如我们看到的一个简单的左右框架页面，实际上包含3个不同的文件，一个是框架体文件，还有两个在框架中显示内容的文件。
框架体文件中保存页面中框架的数量，框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性
网页设计框架怎么做
网页设计框架做法如下：学习网页设计框架推荐咨询【达内教育】。
1、第一步：新建网页
首先；打开软件，选择菜单栏下“修改”——“框架集”——“拆分为左右框架”。进行三个网页的保存。
2、第二步：制作左边的框架网页
首先插入表格并设置基本属性：选择主菜单下的“插入”——“表格”。接着设置表格的属性：（4行1列的表格“高300像素、宽100像素”，表格边框为黄色、背景为绿色。）其中的高，边框颜色都是使用代码输入。
3、第三步：设置css样式
首先打开css面板，选择该面板的下面的“+”号，出现下图所示的效果。设置样式。选择“id”类型，取名为“stlye1”，保存了“仅存为该文档”。设置样式属性。“华文楷体、14磅、加粗、黑色”。
4、第四步：使用css样式
在表格中书写相应的文字。选中所有的文字，然后来到属性面板。选择“类”——“stlye1”，；就设置好css样式。
5、第五步：设置文字的位置。
选中文字，来到属性面板，设置“水平”，“垂直”的属性等。感兴趣的话点击此处，免费学习一下
想了解更多有关框架的相关信息，推荐咨询【达内教育】。达内与阿里、Adobe、红帽、ORACLE、微软、美国计算机行业协会（CompTIA）、百度等国际知名厂商建立了项目合作关系。共同制定行业培训标准，为达内学员提供高端技术、所学课程受国际厂商认可，让达内学员更具国际化就业竞争力。达内IT培训机构,试听名额限时抢购。
网站搭建首页时常用的框架有哪些
如何搭建完整的网站架构并设计出一个出色的网站?关于这个问题，我们很难提出一个绝对权威和正确的设计思路，但任何网站的设计都需要遵循一个循序渐进的步骤。此次IT设计栏目特别邀请网站设计专业人士，自本期起进行为期5期的连载，分别从网站模型构建、审美与交互设计、风格设计、代码设计、可用性测试及对设计的折回补充等五方面，详细阐述如何设计一个优秀的网站，敬请读者关注。
网站设计是一门新兴的边缘性职业，既要从外观上进行创意，又要结合图形和版面设计，交互设计等诸多相关原理，这使得网站设计变成了一门独特的艺术。
良好的网站设计能使网站在同类站点中独具特色，优秀的创意和表现方式能给浏览者留下深刻的印象，使网站访问流量增加甚至直接增加网站收入。 因此，在设计的初始阶段就规划好网站的设计步骤是非常重要的，通常情况下网站设计步骤分为模型构建、审美及交互设计、风格设计、代码设计、可用性测试等几大方面。首先我们由以下四个步骤来了解一下网站模型设计中的内涵与重点。
一、网站设计，不仅仅是美术设计
你的工作究竟属于设计师还是美工?那得看你做的活是真正的设计，还是点缀页面使之更好看的操作。设计师的工作是高屋建瓴的，而美工只是软件工具的使用者。
很多人把在网站中的设计定义为美术设计，认为设计师的工作任务就是使用Photoshop一类的绘图软件把需要展示的页面画出来，其实这是很狭义的理解。合格的设计师应该立足于整个网站的全局，在规划上对整个网站进行完整的设计，在宏观上把握设计风格导向，微观上再针对该网站的具体定位来决定如何对设计进行元素上的细化。当然，网站设计还包括了数据库设计及程序设计，在这里，我仅以我的从业经验，举例谈谈网站前端设计。
北京奥运会即将开幕，我们先来举两个奥运类型网站的例子：
奥运会官网：如图，这是一个设计得非常成功的例子，设计师并没有像一般涉及奥运主题的设计一样使用大量红色，而是把页面风格完全国际化，其中把各种资讯和功能模块都恰到好处地融合在一起，粗毛笔一般的元素设计使网站得到了丰富的整体效果。
新浪奥运频道：如图，我们可以看到设计师的创意仅仅被压缩在页面滚屏几次后看到的内容区块上，使用了奥运五环色彩来进行设计。页面头部基本是套在任何一个专题网站都能使用的结构素材，而新浪的资讯系统一定是能支持实现一个更脱离内容专题模板的好设计的，可见其并没有从网站设计的角度出发去处理这个项目。
二、设计人员在需求阶段介入，影响需求，而不干预需求
我们常听到有设计师抱怨：“这个设计让我改了十多遍怎么还不能定稿?”，也常听到产品经理说：“这个设计师怎么就是把握不住要点?”
不论设计在网站的实现过程中有多么重要，网站该是什么模样，还是必须由需求决定。所以网站项目的前期需求是至关重要的环节，也可以理解成房屋建筑的地基。需求也许是经过若干调查，将结果汇总后产生的报告，也可能是领导或老板的一时冲动而引发的大讨论。
在需求的确立过程中，遗憾的是，网站设计人员的分量是极其有限的，产品经理、频道主管、某级领导的想法往往直接决定着需求的最终形态。但是设计人员在需求阶段的介入还是很有必要的，设计师能以自己专业独到的眼光，提出科学合理的建议，影响需求的细节。这样做的结果是能在最大限度上取得需求方和设计方的思想一致，而不至于在设计过程中面对着有意见却不让更改的需求问题而大发牢骚。
三、学会掌控用户路径
用户从哪个页面来?他最有可能点哪个链接或者按钮?他使用了搜索框吗?他下一页去哪里?最后哪个页面会被他打印输出?
站在整个网站的角度出发，这些流程也许只是产品经理需要把握的，设计师拿到UE图只管一个接一个绘制页面就行。其实不然，好的设计师往往能承担一部分产品经理的职责，设计出一个典型的用户路径，这对网站页面流程有着很大的影响。
页面和页面之间有很多关联，成片的超链接把流程页面和外部页面混乱地串在一起，区域A的文字链接要链到页面2，区域B的图片链接是指向页面3，侧边的一个位置显著的大按钮其实是链接到网站X……页面和页面之间也是有继承关系的，继承的过程要让用户觉得理所当然，在视觉上实现平滑过渡，这就是设计师要考虑的具体问题。从一个页面到另一个页面的路径组成里，哪些模块要原样保留，哪些控件要发生变化?页面结构是否可以变动，页面色彩是否可以更换?这些都是需要参照用户路径进行设计的地方。把自己想象成为一个普通用户，一页一页地点进来，你就能明白用户需要的是什么样的合理设计。在此我们可以参考如图所示的网站设计流程图。
四、初步实现UE产品模型，并审核
设计师需要以什么作为参考来进行页面设计?所有的元素和流程都在脑子里，这个时候设计师需要稍加整理把它们简要地画出来，画出线框和注释就可以了。
我们可以把UE模型理解为设计草图，在UE阶段，设计师主要根据用户路径得来的线索，加上对用户交互习惯的探索，进而整理出一个大概的模型框架。这个框架里，要明确画出有几个关键页面，每个关键页面的关键元素和模块有哪些，这些关键元素和模块哪些是必须以某种特定位置排列或者是务必要强调突出的。
其中，网站的首页、最终页面是最重要的两级页面，首页会是用户使用网站的第一站，在首页的体验好坏，直接决定着他的去留;而最终页面是用户想要获得信息的具体页面，他会在这个页面停留最久，可能会进行仔细的阅读，或是打印出这一页备用。通常在绘制完UE模型之后，会有一个开发小组来讨论并且审核这个模型，这时候就需要着重确定首页和最终页的大概模样，每个讨论参与者对此都很关心。UE模型的绘制我们可以参考如图的某商城的UE图。UE模型通过之后，传统意义的设计终于派上用场，要进行具体的页面设计了。
关于简单网站框架模板和网站框架设计图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
