网页框架

网页框架（精选3篇）

网页框架 篇1

1 页面布局的一般设计原则和方法

用户在浏览网页的时候问题容易被那些美观大方的网页所吸引。页面的布局是网页制作成败的一个很重要的因素, 因此用户在制作网页时要重视。而页面布局的一般设计原则和方法如下。

(1) 布局简洁大方清晰:这是W eb网页设计的最重要的原则。一般一个页面应有一个主体, 可以是文字块或图像。浏览者总是先看网页中大的和色彩鲜明的部分, 然后才是通常的从左到右和从上到下的模式, 不能给人的感觉是杂乱无章, 眼花缭乱的感觉。另外尽可能使任何信息都能在3次内点击找到。每个页面显示一层信息, 只显示用户当前选择的内容, 其它内容可用链接提示。

(2) 布局类型选择:布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、F lash型、变化型。

(3) 布局平衡:所谓布局平衡是指以页面为中心, 页面的上下左右在分量上应给人以匀称的感觉, 不会让人感到页面的某些地方特别拥挤, 而有些地方又特别空旷。为了让页面达到左右平衡, 应尽可能利用文本和图像的H T M L对齐方式标识。页面的上部应多留些空间, 不要太拥挤, 使用给每个页面加上页眉和页脚的方法来达到上下的平衡。

(4) 布局风格一致:依据网页设计界面设计的风格原则, 同一网页应用的每个页面应该拥有大体一致的页面布局, 这样可以有效地使用户感受到页面谐调一致。

(5) 布局文本、图片和多媒体方式:文本和图片是构成网页的两大元素, 目前的技术可以让文本和图片摆放在页面的任何位置。声音、动画、视频等可使更加页面丰富。

2 页面布局中的表格方法

在网页设计中表格具有非常重要的作用——定位, 也就是在网页中表格不只是数据统计和展示数据, 更重要的用途是利用表格来进行页面布局, 使用表格能够使网页看起来更加直观和有条理。页面布局中表格的内容主要有以下几点。

(1) 布局视图:在Dreamweaver中提供了3种布局视图:即标准视图、扩展视图和布局视图。绘制布局表格通常在布局视图下进行。

(2) 绘制布局表格和布局单元格:绘制布局表格需要切换到布局模式视图进行绘制, 而绘制布局单元格需要切换到布局视图模式进行绘制。

(3) 编辑布局表格和布局单元格:布局表格和布局单元格的编辑操作只有在“布局”视图中才可以进行, 基本操作有移动、删除、添加内容和调整大小、设置布局表格属性、利用表格制作垂直线或水平等操作。

如图1所示, 整个页面分成了四个不同的区域:页面顶部的单元格内放置标题图形;顶部下方的单元格内放置局部导航条;页面左侧的单元格内放置图片;页面右侧的单元格内放置文字内容。利用Dreamweaver提供的“表格”可以很轻松地制作出这样的页面布局。

3 页面布局中的框架方法

框架是目前见面设计中最为常用的技术之一, 很多网站都有框架设计的身影。许多网站的论坛或邮件系统都是用框架都是用框架来完成的。用户可以根据网页设计的需要, 在某些区域中放置不需要改变的元素, 在另外一些区域中放置需要改变的内容。使用框架的最常见的情况是, 一个框架显示包含导航控件的文档, 而另一个框架显示含有内容的文档。页面布局中框架的主要内容有以下几点。

3.1 建立框架

在Dreamweaver 8中, 预定义了13种框架集结构供用户使用, 定位光标在要插入框架集的窗口中, 选择一种框架样式创建框架。

3.2 框架面板

建立完框架后, 要对框架和框架集进行编辑。在Dreamweaver 8中提供了“框架”面板, 在“框架”面板中可以直接选中框架或框架集并对其进行控制[3]。

3.3 设置框架的属性

通过框架集属性面板, 可以对框架集进行边框选项设置, 框架集中框架大小设置;通过框架属性面板, 可以对框架各项属性进行设置。

3.4 保存框架

框架页也是网页, 设计者在建立框架页后, 可以像在普通网页中一样, 添加文本、图像、背景图像和动画等各种网页元素以及各种编辑操作。框架集网页制作完毕后, 在预览和关闭前要对框架集和所有的框架文件进行保存。

3.5 框架中的超链接

在框架中设置超链接以打开另一个框架中的文档时, 必须设置链接的目标窗口。

如图2所示, 整个页面分成了三个不同的区域:可以采用顶部和嵌套左侧框架设计该页面, 顶部的框架内放置标题图形;顶部下方的左侧框架内放置局部导航条;顶部下方的右侧框架内放置图片文字内容。利用Dreamweaver提供的“框架”可以很轻松地制作出这样的页面布局。

4 结语

本文通过介绍了网页布局中的一般原则和方法, 并主要介绍了表格的几种布局视图、绘制布局表格和布局单元格、编辑布局表格和布局单元格, 并通过使用表格实现的一个具体实例网站 (如图1所示) 进行阐述说明;另外介绍了框架的创建方法、框架面板、设置框架属性、保存框架及框架的超链接, 并通过使用框架实现的一个具体实例网站 (如图2所示) 进行阐述说明。

摘要：本文简要介绍了页面布局的一般设计原则、设计方法, 并主要论述了表格及框架定位页面元素, 进行网页布局的方法。

关键词：Dreamweaver,表格,框架,布局

参考文献

[1]曾鸿.网页设计与制作[M].北京:高等教育出版社, 2009, 2:84-99.

[2]李显萍.网页设计与制作[M].北京:高等教育出版社, 2007, 7:86-99.

[3]左振辉.网页设计与制作[M].廊坊:国防科技大学出版社, 2001, 7:41-48.

网页框架 篇2

上面表格大家已经初步理解了，下面就要说说框架了，也即所说的Frame。其实用框架来规划网页本身有很大的缺点，首先不利于网友更好的利用网页资源，因为大家总不能在线把所有的东西看一遍了，而保存起来框架的缺点就出来了，你将不得不每次多余的保存同样的两个页。

我们花一些时间来说说这个问题或许对大家更好的使用框架有好处。

在用框架布局时：以一个最简单的上下框架为例，整个网页包含两个独立的网页，将被分别保存或是调入使用，另外整个框架网页也将被作为一个也保存一次，而我们用框架时，无非是想利用他的很好的内容的切换性，这时如果保存起来本来一个网页的内容就要同时保存3个，是不是很不划算的。

好的，既然大家了解。

下面笨笨熊就开始说一下如何作含有框架的网页。

1〉在编辑器里：

File/new(或是直接按CTRL+N)，在弹出的窗口中选Frame标签，然后在下面的列表里。选择相应的框架类型。

2〉OK以后，这时网页已经变成了框架的结构，通过各自框架Frames你可以选择新建网页或是导入已经存在的网页，

setinitalpages(导入一个存在页)

newpage(点击后新建一个页面)

3〉基本的框架结构已经建立了：

这时应该看看如何实现框架中的切换连接了，因为在使用框架时最具代表性的就是三分框架，而这三部分都有各自的名称。

最上面为banners：网页的头部分。

左边为contents部分。

右边是主体显示部分。main

4〉那么如何实现点击连接时在main窗口中打开那，在左边的contents窗口中作连接CTRL+K或是用Edit/hyperlink来完成，这时你可以在窗口中的图示中选择连接打开的目标位置。

如：main。当然你同时还可以设定目标Target属性。

不过这时多少显得就没必要了，当各自Frame内容超出一屏幕时，滚动条会自动添加进来。你也可以设定从不显示滚动条。

大部分的属性可以右击：

在Frameproperties中找到了。

好了，我想框架就说到这毕竟用的比较少。

如果你注意的话除了一些个人网站，商业性的正规网站很少用框架的。

网页框架 篇3

Jeff Wilcox，Silverlight单元测试框架的主要开发人员，发表了多篇文章谈到Silverlight 2的单元测试问题，除了Step-by-Step的介绍外，Jeff还提供了更新后的测试项目模板和重新打包的Silverlight.Testing 程序集。更新后的测试框架允许针对微软最新发布的Beta 2进行测试。当前的Silverlight测试框架还没有集成到Visual Studio的测试运行器中，但这个框架使用了和MS Test一样的类型和特性标记，这对于在Visual Studio中编写传统单元测试的开发人员来说是熟悉的。即使一个开发团队没有在使用测试驱动开发方式，拥有一个可编程的能测试实际UI代码的框架，对于回归和集成测试也是很有价值的，

Jeff在他的指导练习中总结到：

拥有单元测试是非常有用的，因为你创建的测试场景愈多，你在添加特性和修复Bug的时的愈有信心；特别地，如果你是和一个开发团队一起工作的时候，更有用。由于测试项目是用和其他Silverlight应用程序一样的方式来打包，所以为了运行测试也无需进行特别的安装过程。在Silverlight控件团队里，我们创建了大量的单元测试。查看英文原文：Silverlight 2 Unit Test Framework

来自：www.infoq.com/cn/news//06/Silverlight-Testing