html简介框架模板,html框架布局后台模板.doc

html框架布局后台模板

篇一：使用框架布局页面

单元4——使用框架布局页面

学习目标：

? 理解框架布局的原理

? 掌握使用框架进行页面布局的方法 ? 学习利用浮动框架嵌入插件

Dreamweaver CS3提供了一种很方便的可以进行网页布局的工具——框架。框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的Web页面上。

任务4.1 框架基本操作

在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置Banner(也就是标题)；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。

4.1.1创建一个新的框架集网页

(1)运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页” →“框架集” →“上方固定，左侧嵌套”选项，如下图所示。

(2)单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示，在此可为每一个框架指定一个标题。

(3)单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。

4.1.2保存框架

每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。操作步骤如下：

(1) 选择“文件” →“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出

“另存为”对话框，命名为“index.html”，表示整个框架集的名称。

(2) 单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名

为“main.htlm”，表示右边框架即主框架的文件名。

(3) 单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html”

和“top.html”，表示左边框架和上方框架的文件名。如下图所示：

4.1.3选择框架和框架集

在Dreamweaver中，打开“窗口”菜单，选择“框架”命令，可以打开“框架”面板，如下图所示

在面板中单击要选择的框架，被选中的框架边框内侧会出现，如下图所示。或者按

如果要选中框架集，可以在框架面板中单击框架集的边框，此时框架集的边框变成虚线，

如下图所示。

在文档窗口中，单击文档窗口中要选择的框架，即可选中该框架，如下图所示。

在文档窗口中，当鼠标指针靠近框架集的边框并且出现上下箭头时，单击整个框架集的

边框，可以选择整个框架集，如下图所示。

4.1.4编辑框架

(1)拆分框架

制作框架网页可以根据Dreamweaver自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符合设计要求。自行设计框架集结构，其实就是拆分框架，也可以使用鼠标拖动框架集的外边框直接进行拆分。操作步骤如下：

篇二：2015 年最棒的 5 个 HTML5 框架

2015 年最棒的 5 个 HTML5 框架

大多数的 web 开发者一直在用关键点来寻找动态的框架，这样能简化他们的设计和开发工作。

HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS 开发的沉重负担，还提高了网站的可见性。主要的原因是 HTML5 提供了独有的特征，例如特殊的架构标签，动画，浏览器支持等。

最近，大量的 HTML5 框架在行业内可免费获得，这使得 HTML5 开发者们不知道到底哪一个框架才是最好的。为了避免上述问题，本文在下面会列出 2015 年最流行的 5 个框架，让我们一起以一个简单的方式来开始讨论吧。

如果你是 web 设计者并准备用 HTML5 进行设计工作，现在是时候开始阅读了。 Ionic

Ionic 是一个神奇的框架和强大前端开源系统，使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作，并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外，该框架为它自己的组件提供了一套 Angular 指令(自定义的 HTML 元素)，从而使它可以简单的编写一行 HTML 代码。类似指令，它使用视图动画逻辑，异步通信，A