导航:首页 > 万维百科 > 网页设计制作框架

网页设计制作框架

发布时间:2020-12-25 03:31:37

1、网页制作中框架的作用

框架可以把浏览器窗口分成几个独立的部分,每部分显示单独的页面,页面的内容是互相联系的。如3框架网页,顶端框架显示网页标题,下面左右两个框架,左边显示导航栏,右边显示链接目标网页。单击左边框架导航栏中的超级链接,在右边框架里显示超级链接的对象。内容非常多的网页不宜采用框架式结构,所以大网站中几乎所有的网页都不是框架式网页。

2、网页框架制作模板的问题

■ 什么是框架型网页?
如果一个网页的左边导航菜单是固定的,而页面中间的信息可以上下移动,这一般就可以认为是一个框架型网页。此外,一些框架型站点的模板在其页面上方放置了公司的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个不同的文件,一个是框架体文件,还有两个在框架中显示内容的文件。

框架体文件中保存页面中框架的数量,框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性

3、如何制作一个左右框架的网页

若要制作一个站点,这个站点是左右的框架结构,左侧框架显示导航页面,右侧框架显示主内容,需要做的是将这两个页面合成一个左右框架结构的页面。步骤一:使用前面介绍的方法,首先将一个新建的空白页面分割成左右结构的框架。步骤二:选中“框架”面板中的左框架,单击属性面板中“源文件”文本框右侧的“浏览文件”按钮,在弹出的对话框中选择左页面。步骤三:同理,选中“框架”面板中的右框架,单击属性面板中个“源文件”文本框右侧的“浏览文件”按钮,在弹出的对话框中选择右页面。步骤四:这时,框架的左右两侧就将已经制作好的页面显示出来了。步骤五:选中“框架”面板中的总框架集,然后执行“文件--保存框架页”命令,将其保存。步骤六:选择“框架”面板中的总框架集,在属性面板中设置“边框”为“否”,边框宽度为“0”,选择缩略图中的左框架,设置其宽度为“130像素”,然后选择右框架,设置其宽度为“相对”。步骤七:选择“框架”面板中的左框架,在属性面板中,设置“滚动”为“否”,即指定在左侧框架中不显示滚动条。选中“不能调整大小”复选框,令访问者无法通过拖动框架边框调整框架大小。将“边框”设置为“否”,在浏览器中将隐藏当前框架的边框。步骤八:选择“框架”面板的右框架,在属性面板中设置:“滚动”为“自动”,当浏览器窗口中没有足够的空间来显示当前框架的完整内容时才显示滚动条。选中“不能调整大小”复选框,将边框设置为“否”。

4、html网页框架制作软件有哪些

以下是主流网页制作软件:DREAMWEAVER、FLASH、PHOTOSHOP:
安全下载(中文)
http://.网络.com/question/372608786.html
安全无毒,安装完成即可永久使用专
支持所有WINDOWS,包括属XP、WIN7、WIN8 32位和64位

5、网页制作 怎样写框架?

那个也可以使用标签做的,不过是使用js脚本做的

6、用 DW 做框架 网页的制作 怎么弄

所谓框架,就是一个规定位置的文件,和几个分文件(这几个文件都是普通的文件,只不过被规定位置的文件调用在同一界面显示的不同位置罢了)。那上下结构的来说主文件就是通过规定上下两个Iframe的位置来吧页面划成两块的,两个iframe的目标文件分别是两个分文件。

建立框架的时候DW会要求你命名各个文件的名称,拿上下结构来说,首先会要你命名主文件,然后会通过虚框在视图窗口显示代命名的另外两个文件
DW默认框架结构各文件是.htm的,你点击每块,他会在新窗口打开该文件让你编辑,保存的时候,要是只想保存各个块的话就在新窗k口保存,
也可以在主文件上选择保存全部,把所有的修改都保存

7、如何制作框架网页

小编以前也不会框架网页的,但是前段时间小编需要考试。遇到了有关框架网页的问题,也就去学习了。接下来小编就用接下来的实例来教大家如何制作框架网页。希望能够帮助到你们。
我们今天就以下面的例题来学习一下。
请建立一个目录框架网页,并按照要求将此文件保存名为page2.html。
要求:在目录框架网页建立一个4行1列的表格(高300像素、宽100像素),表格居中,边框为黄色、背景为绿色;表格中的文字为华文楷体、14磅、加粗、黑色;单元格内容水平方向居右对齐,垂直方向相对底边对齐;在主框架网页中新建网页并插入素材包内的图片8139.jpg;设置"美食介绍"与素材包内sc7.htm 文件的链接,设置"相关新闻"与网站www.sina.com.cn链接,设置"相关图片"与素材包内bg7.jpg文件的链接,设置"网络高手"与邮箱[email protected]链接
第一步:新建网页
首先我们打开软件,选择菜单栏下“修改”——“框架集”——“拆分为左右框架”。进行三个网页的保存。
1.整个框架网页。
选中框架最中间的竖线,当我们看到代码栏中有“<frameset cols="597,598">”代表我们选取成功。
2.框架网页的左侧
选中左侧空白区域即可
3.是框架网页的右侧。
选中右侧空白区域即可
如图:
第二步:制作左边的框架网页
首先插入表格并设置基本属性
1.选择主菜单下的“插入”——“表格”如图。
2.接着设置表格的属性
(4行1列的表格“高300像素、宽100像素”,表格边框为黄色、背景为绿色。)其中的高,边框颜色都是使用代码输入的。如图:
3.至于背景和居中我们可以到属性面板的页面布局进行设计就可以了。如图:
第三步:设置css样式
1.首先打开css面板,选择该面板的下面的“+”号,出现下图所示的效果。
2.设置样式。选择“id”类型,取名为“stlye1”,保存了“仅存为该文档”。如图:
3.设置样式属性。“华文楷体、14磅、加粗、黑色”。如图:
第四步:使用css样式
1.在表格中书写相应的文字。如图:
2.使用样式。选中所有的文字,然后来到属性面板。选择“类”——“stlye1”,我们就设置好css样式了。如图:
第五步:设置文字的位置。
选中文字,来到属性面板,设置“水平”,“垂直”的属性。如图:
第六步:设置文字链接。
选中“美食介绍”,来到属性面板,选择“链接”,将我们要链接的地址输入进去就可以了。接下来依次选中其他文字就可以了。效果如下:
(注意:我们先前选中的网页文件,图片文件是可以直接填写的。而网址我们要在前面加上“http://”,邮箱地址要加上"mail to:")
第七步:设置右侧网页
选中右侧网页,选择“插入”——“图片”,选择我们想要插入的图片我们就完成了。如图:
此时我们就可以打开htm文件,在浏览器中浏览效果了,如图:

8、网页制作中框架是什么意思?

框架可以把浏览器窗口分成几个独立的部分,每部分显示单独的页面,页面的内容是互相联系的。框架网页,顶端框架显示网页标题,下面左右两个框架,左边显示导航栏,右边显示链接目标网页。单击左边框架导航栏中的超级链接,在右边框架里显示超级链接的对象。内容非常多的网页不宜采用框架式结构,所以大网站中几乎所有的网页都不是框架式网页。

9、如何制作框架网页?

框架就是 这个好说,以下是框架:
<html>
<head>
<title>框架示范</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<frameset framespacing="0" rows="80,*" border="0" frameborder="0" >
<frame name="top" scrolling="no" noresize target="contents" src="top.aspx">
<frameset id="mainframe" cols="178,1,*">
<frame name="menu" target="main" scrolling="auto" src="menu.aspx">
<frame name="blank" scrolling="auto" src="blank.aspx">
<frame name="main" scrolling="auto" src="main.aspx">
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents" src="bottom.aspx">
<noframes>
<body topmargin="0" leftmargin="0" >
<p>此网页使用了框架,但您的浏览器不支持框架。</p>
</body>
</noframes>
</frameset>
<body>
</body>
</html>

10、怎样制作框架网页(急!!!!!!!!)

先建立框架页,主要代码如下:
<frameset cols="131,16,*" framespacing="0" frameborder="NO" border="0" id="mainFrameset">
<frame src="左边的页面" name="leftFrame" scrolling="yes" >
<frame scrolling=no noresize="true" name=toogle marginwidth=0 marginheight=0 src="bar.html">
<frame src="右边的页面" name="mainFrame" scrolling="yes">
</frameset>
</frameset>
**********************
bar.html 页面的代码如下:
<html>
<head>
<style type="text/css">
.o1 {background-color:#718BD6; font-size:10px; color:#ffffff; text-decoration:none;}
body {margin: 0px; background-color: #ffffff; }
</style>
<script language="javascript">
<!--
var iniCols, noCols, o_mf, o_ms, s, o_bt, ImageSrc;
function ini() {

o_mf = parent.document.getElementById("mainFrameset");
o_ms = document.getElementById("menuSwitch");
noCols = iniCols = o_mf.cols;
nn = document.getElementById('img1');
nnSrc = iniSrc = nn.src;
if ((pos = noCols.indexOf(",")) != -1) {
noCols = "0" + noCols.substring(pos);
}
if ((pos = nnSrc.indexOf("bbbb")) != -1) {
nnSrc = "asnew/u" + nnSrc.substring(pos);
}
s = false;

}
function changeLeft(){

s = !s;
o_mf.cols = s ? noCols : iniCols;
nn.src = s? nnSrc : iniSrc;
}

//-->
</script>
</head>
<body onload="ini()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="10" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="18" background="asnew/bar.gif"><a href="#"><img id="img1" src="asnew/bbbb.gif" width="18" height="8" alt="" onclick="javascript:changeLeft();" border="0"></a></td>
</tr>
</table>
</body></html>

***********
就可以实现了

与网页设计制作框架相关的知识