frame如何使用—网页设计框架_安全

在我们浏览中的很多网站中都会出现导航栏，当我们点击导航栏的各项时，我们发现刷新的不是整个网页或者跳转，而是局部刷新部分页面，导航不变。例如下图，点击红色区域导航，只有蓝色区域发生改变，其他没有变化。

创建一个文件夹，并创建先随便创建几个txt文件（用txt文件编写html是一种良好的习惯对于初学者而言）。

在每个txt文件下，加入标准规范代码。可以参考下图实例。

可以按行分割页面，也可以按列进行分割。很多网站都不是单一一种分割而是嵌套使用。例如如下代码的图示如下：

在对页面进行分割时可以采用像素，也可以采用百分百，每个分割区域就得使用"，"隔开，如<framesetrows="75xp,">，<frameset rows="50%,">这两种方式都是将网页分割成两行。具体代码如下：

</frameset>

通过上面代码你也应该注意到没有body元素，frame不能脱离frameSet单独使用,frame不能放在body中，而是用于对整个页面布局的效果。在属性讲解，scrolling（是否滚动窗体），noresize（分割框架大小是否可变）name（作为调用的重要依据，target=“name”），本例我导航页网站和主站实现局部刷新的功能。代码如下：

导航页：

主网页：

主页中name的值和target的值对应时，链接网站就显示在对应框体内，从而实现了局部刷新，就是导航。

然后将创建的所以txt另存为后缀为html的文件，并运行双击主网页，对应导航。看到变化。然后点击导航相应的导航栏目，会发现下面刷新网页。

主页
<div>
导航部分:<br
/>
<a
href="content1htm"
target="cc">内容1</a>
<a
href="content2htm"
target="cc">内容2</a>
</div>
<iframe
name="cc"
src="content1htm"
frameborder="0"></iframe>
这个iframe就是框架,位置和样式就要你自己调整,frameborder是框架的边框
框架最关键的就是target和name两属性了,超链接中的target是放要在哪打开的框架的name
上面就是例子

网页模板就是已经做好的网页框架，使用网页编辑软件输入自己需要的内容，再发布到自己的网站。每个网页模板压缩包内包含：PSD文件(可用Photoshop、ImageReady或Fireworks修改)，按钮PSD文件、Flash源文件和字体文件，推荐使用Dreamweaver软件向网页模板添加内容。\x0d\\x0d\创建和设置\x0d\\x0d\1)模板的概念：作为创建其它文档的样板的文档。创建模板时，可以说明哪些网页元素不可编辑，哪些元素可以编辑。其扩展名为dwt。\x0d\\x0d\2)模板的作用：有利于保持网页风格的一致;提高工作效率。\x0d\\x0d\1创建模板\x0d\\x0d\1)创建一个全新的模板：在模板面板中，使用快捷菜单按钮或单击面板上的新建按钮\x0d\\x0d\模板面板的打开：Window菜单--Templates\x0d\\x0d\2)创建基于文档的模板：File菜单-Save As Template\x0d\\x0d\2设置模板页面属性\x0d\\x0d\1)用模板创建的文档继承模板的页面属性，页标题除外。\x0d\\x0d\2)设置：Modify菜单-Page Properties\x0d\\x0d\3定义模板的可编辑区\x0d\\x0d\1)定义模板的可编辑区\x0d\\x0d\在模板文档中选定对象、Modify菜单、Templates、New Editable Region\x0d\\x0d\2)取消可编辑区标记\x0d\\x0d\Modify菜单-Templates-Remove Editable Region\x0d\\x0d\应用和更新\x0d\\x0d\1应用模板创建文档\x0d\\x0d\1)应用模板创建文档\x0d\\x0d\使用模板创建新文档：File菜单-New From Template\x0d\\x0d\或：File菜单-New-从模板面板中拖一个模板到文档\x0d\\x0d\对现有文档应用模板：Modify菜单-Templates-Apply Template to Page-模板面板中选定模板-单击Select\x0d\\x0d\或：从模板面板中拖一个模板到文档中\x0d\\x0d\或：从模板面板中选定一个模板，单击Apply\x0d\\x0d\2)可编辑区和锁定区\x0d\\x0d\在应用了模板的文档中，只有可编辑区的内容才可以修改。\x0d\\x0d\3)把页面从模板中分离出来\x0d\\x0d\如果要对应用了模板的页面的锁定区进行修改，必须先把页面从模板中分离出来。\x0d\\x0d\具体 *** 作：Modify菜单-Templates-Detach From Template\x0d\\x0d\2修改模板\x0d\\x0d\在模板面板中选定模板、单击编辑按钮或双击模板名称或使用快捷菜单的Edit、编辑完成后保存\x0d\\x0d\3更新站点中使用模板的所有文件\x0d\\x0d\Modify菜单-Templates-Update Pages

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

网站建设中网页设计布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型这九种。

2、拐角型：这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文类型：上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面。

4、左右框架类型：这是一种左右分别为两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标志，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的；这种类型的布局的特点是结构清晰明了。

5、上下框架类型：与左右框架类型类似，只是这种类型是上下两页的框架。

6、综合框架类型：其实就是左右框架类型和上下框架类型的结合体。

7、封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示。

8、Flash型：其实这与封面型结构是类似的，采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9、变化型：即上面几种类型的结合与变化，但所实现的功能的实质是那种上、左、右结构的综合框架型。

框架设计可以使用bootstrap框架精选架构使用。bootstrap对自适应网址制作这一块有比较方便使用的功能。还有各种ICON图标，字体等。国内也有许多的中文教程相关的，学习更容易，上手更轻松。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13092624.html

frame如何使用—网页设计框架

发表评论

评论列表（0条）