制作框架网页教学设计_如何制作框架网页

1. 如何制作一个左右框架的网页

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

2. 框架的网页设计

框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
一个框架结构有两部分网页文件构成：
框架Frame：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
框架集Frameset：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
所谓框架就是把网页分成几个框窗，同时取得多个 URL。<frameset>用来划分框窗，每一框窗有一个<frame>，<frame>必须在<frameset>范围中使用。如：<frameset cols=50%,*><frame name=hello src=1.html> <frame name=hi src=2.html></frameset>此例中 <frameset> 把画面分成左右两相等部分，左面显示 1.html，右面显示 2.html

3. 做一个简单框架集网页

我学过dreamwaver。你需要先建个站点。然后打开软件，在打开后，你需要自己打开个框架内，一般的我们选择3 个起名为容TOP。left.mian,然后分别制作你的这些框架。选中某个字或者几个字然后在找超链接的那个图片或者制作好了的比如，你在top哪个框架里选中几个字然后链接在制作好的left。当你点击top上选中的超链接的几个字时她们会在left上变动。

4. 怎样制作框架网页（急！！！！！！！！）

先建立框架页，主要代码如下：
<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">

</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>

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

5. 如何制作框架网页

框架就是这个好说,以下是框架:
<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>

6. html网页框架设计。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>四行，第三行三版列权</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
border:10px solid #ccc;
height:250px;
text-align:center;
font-size:50px;
}
.f3 div{
width:31%;
float:left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>

<div class="f3">
<div>31</div>
<div>32</div>
<div>33</div>
</div>

<div>4</div>
</body>
</html>

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文件，在浏览器中浏览效果了，如图：

导航:首页 > 视频设计 > 制作框架网页教学设计

制作框架网页教学设计

与制作框架网页教学设计相关的资料