Adobe Dreamweaver CS6 如何建立框架页面

合集下载

Dreamweaver怎么创建框架结构?dw设置框架结构的教程

Dreamweaver怎么创建框架结构?dw设置框架结构的教程

Dreamweaver怎么创建框架结构?dw设置框架结构的教程
2、如何进⼊框架的编辑呢,如果你的⼯作区不是“经典”,那就切换过来,在右上⾓的位置。

这样⽅便找到布局,当然你还可以在“修改”选项中找到框架。

我们就以“经典”⼯作区进⾏编辑。

3、单击框架右下⾓的⿊⾊三⾓形,就出现许多种框架格式,我们选择“顶部和嵌套的左侧框架”,当然你可以根据实际需要选择。

这种框架也是⽐较常⽤的。

4、选择“顶部和嵌套的左侧框架”后会出现⼀个对话框,如果没有修改的必要,那就选择默认的就⾏,单击“确定”,对框架进⾏编辑。

5、如果在右侧没有显⽰框架的窗⼝,那么可以在“窗⼝”选项中打开框架窗⼝,这对于我们后来的编辑很有好处,你也可以直接按"shift+f2"快捷键打开。

6、我们可以对框架进⾏各种编辑,如修改边框颜⾊和宽度。

在刚刚打开的框架窗⼝⾥单击需要编辑的那⼀层的边框,或者直接单击编辑窗⼝⾥的框架边框,不过通常前者更加⽅便和直观。

这样做之后,会出现下⾯的属性。

我们就可以进⾏各种编辑了。

7、因为框架每⼀个框都是⼀个独⽴的⽹页,所以保存的时候要特别注意,不仅需要保存每个⽹页⽂件,还得保存边框的结构。

⽐如说刚刚我建⽴的哪个框架,需要保存四个⽂件。

以上就是dw设置框架结构的教程,希望⼤家喜欢,请继续关注。

上⼀页1 2下⼀页阅读全⽂。

Dreamweaver CS6网页设计与应用 (6)

Dreamweaver CS6网页设计与应用 (6)

“属性”面板和“框架”控制面板。然后,在“框架”控制面
板中选择一个框架,在“属性”面板的“源文件”选项中查看 此框架的文件名。用户查看框架的名称后,在保存文件时就可 以根据“保存”对话框中的文件名信息知道保存的是框架集还 是某框架了。
6.1.4 框架的选择
在对框架或框架集进行操作之前,必须先选择框架或框架 集。 1.选择框架 选择框架有以下几种方法。
课堂学习目标
掌握创建框架集的方法
掌握为框架添加内容的方法
掌握设置框架和框架集属性的方法
6.1 创建框架和框架集
建立框架集
为框架添加内容
保存框架
框架的选择 修改框架的大小 拆分框架 删除框架 课堂案例—牛奶饮料网页
6.1.1 建立框架集
在Dreamweaver CS6中,可以利用可视化工具方便地创建框架集。 用户可以通过菜单命令实现该操作。
在文档窗口中,按Alt+Shift组合键的同时,用鼠标左键 单击欲选择的框架。
先选择“窗口 > 框架”命令,弹出“框架”面板。然后, 在面板中用鼠标左键单击欲选择的框架。此时,文档窗口中框 架的边框会出现虚线轮廓。
2.选择框架集
选择框架集有以下几种方法。 在“框架”控制面板中单击框架集的边框。
在文档窗口中用鼠标左键单击框架的边框。
1.通过“插入”命令建立框架集
2.通过拖曳自定义框架
6.1.2 为框架添加内容
因为每一个框架都是一个HTML文档,所以可以在创建框架
后,直接编辑某个框架中的内容,也可在框架中打开已有的
HTML文档,具体操作步骤如下。 (1)在文档窗口中,将光标放置在某一框架内。
(2)选择“文件 > 在框架中打开”命令,打开一个已有

如何利用Dreamweaver创建网页布局

如何利用Dreamweaver创建网页布局

如何利用Dreamweaver创建网页布局第一章:了解DreamweaverDreamweaver是一种流行的网页编辑软件,由Adobe公司开发。

它具有强大的设计和布局工具,为用户提供了一个简单而直观的界面来创建网页布局。

在开始使用Dreamweaver创建网页布局之前,我们需要先了解一些基础知识。

第二章:准备工作在使用Dreamweaver之前,我们需要做一些准备工作。

首先,安装Dreamweaver软件并确保已经获得了有效的许可证。

然后,我们需要确定网页布局的整体风格和设计理念,并准备好所需的素材,如图片、视频和文本等。

最后,创建一个新的项目文件夹来保存我们的网页布局文件。

第三章:创建网页布局在Dreamweaver中,我们可以使用所见即所得(WYSIWYG)编辑器来创建网页布局。

首先,我们需要选择一个适合的网页模板或布局。

然后,我们可以使用拖放功能来添加不同的元素,如文本框、按钮和图像等。

同时,我们可以使用CSS样式来调整布局的外观和风格。

第四章:使用网格布局网格布局是一种常用的网页布局技术,它可以帮助我们创建具有平衡和一致性的网页布局。

在Dreamweaver中,我们可以使用网格布局工具来快速创建网格布局。

我们可以选择网格的列数和行高,并将元素拖放到相应的网格单元格中。

通过调整网格的属性,我们可以实现不同风格的网页布局。

第五章:响应式布局设计随着移动设备的普及,响应式布局设计变得越来越重要。

Dreamweaver提供了强大的响应式布局工具,可以帮助我们实现在不同设备上都能良好显示的网页布局。

我们可以使用媒体查询和CSS媒体规则来调整布局的响应性,并通过设置不同的CSS样式来适应不同的屏幕大小。

第六章:优化网页布局创建一个有效的网页布局不仅仅是设计一个漂亮的页面,还需要考虑网页性能和用户体验。

在Dreamweaver中,我们可以使用一些优化技巧来提高网页布局的加载速度和交互性。

例如,使用CSS Sprite来合并多个图像文件,减少HTTP请求。

《网设计课件:AdobeDreamweaverCS6基础教程》

《网设计课件:AdobeDreamweaverCS6基础教程》
《网设计课件:Adobe Dreamweaver CS6基础教 程》
想要成为一名出色的网页设计师吗?这份课件将带领你了解Dreamweaver CS6 的基本知识和技能,让你轻松入门网页设计。
了解Dreamweaver CS6
掌握Dreamweaver CS6的基本概念和功能。学习如何创建和管理网页项目,以 及如何使用Dreamweaver的多种工具。
图像和媒体
学习如何在网页中插入图像和媒体文件,并掌握调整图像大小、添加图像属性和优化网页加载速度的技巧。
表格和表单
掌握使用Dreamweaver创建和编辑表格,以及制作表单并进行表单验证的方法。
CSS样式和布局
学习如何使用CSS样式和布局来设计漂亮和响应式的网页,以吸引用户并提升 用户体验。
Байду номын сангаас
界面和工具导览
熟悉Dreamweaver CS6的用户界面和各种工具,并理解它们的作用和用法,提 高你的工作效率。
基本网页结构
学习创建基本网页结构的步骤,包括HTML标签和属性的使用,以及如何组织 和布局网页内容。
文本和超链接
了解如何在网页中添加文本内容和超链接,并学习使用CSS样式来美化文本和 超链接的外观。

Dreamweaver CS6-第6章使用框架课件

Dreamweaver CS6-第6章使用框架课件
(1)在文档窗口中,将光标放置在某一框架内。 (2)选择“文件 > 在框架中打开”命令,打开一个已有文档。
6.1.4 保存框架
保存框架时,分两步进行,先保存框架集,再保存框架。 1.保存框架集和全部框架 2.保存框架集文件 3.保存框架文件
6.1.5 框架的选择
在对框架或框架集进行操作之前,必须先选择框架或框架集。 1.选择框架 2.选择框架集
6.1.7 拆分框架
通过拆分框架,可以增加框架集中框架的数量,但实际上是在 不断地增加框架集,即框架集嵌套。拆分框架有以下几种方法。
(1)先将光标置于要拆分的框架窗口中,然后选择“修改 > 框架集”命令,弹出其子菜单,其中有4种拆分方式。
(2)选定要拆分的框架集,按Alt+Shift组合键的同时,将鼠 标指针放到框架的边框上,当鼠标指针呈双向箭头时,拖曳鼠标指针 拆分框架。
在Dreamweaver CS6中,可以利用可视化工具方便地创建框架集。用户 可以通过菜单命令,实现该操作。
1.通过“插入”命令建立框架集 2.通过拖曳自定义框架
6.1.3 为框架添加内容
因为每一个框架都是一个HTML文档,所以可以在创建框架后,直接编 辑某个框架中的内容,也可在框架中打开已有的HTML文档,具体操作步骤 如下。
1.给每一个框架定义标题 2.创建框架中的链接
6.2.5 改变框架的背景颜色
通过“页面属性”对话框设置背景颜色的具体操作步骤如下。 (1)将插入点放置在框架中。 (2)选择“修改 > 页面属性”命令,弹出“页面属性”对话框,单击 “背景颜色”按钮 ,在弹出式颜色选择器中选择一种颜色,单击“确定” 按钮完成设置
6.1.8 删除框架
将鼠标指针放在要删除的边框上,当鼠标指针变为双向箭头时,拖曳 鼠标指针到框架相对应的外边框上即可进行删除。

第3章 Dreamweaver CS6创建基本文本网页

第3章 Dreamweaver CS6创建基本文本网页

3.5.3 插入说明

插入说明的具体操作步骤如下。
3.5.4 插入刷新

设置网页的自动刷新特性,使其在浏览器中显示 时,每隔一段指定的时间,就跳转到某个页面或 是刷新自身。
3.6 实战演练——创建基本文本网页

本章主要讲述了Dreamweaver CS6的操作界面、 在网页中插入文本和设置文本属性等,下面通过 以上所学的知识讲述如何创建基本文本网页,效 果如图3.47所示。


3.2.1 使用向导建立站点
Dreamweaver是最佳的站点创建和管理工 具,使用它可以创建完整的站点。创建本 地站点的具体操作步骤如下。


3.2.2 使用高级设置建立站点
要对已经建立的站点进行进一步设置,可完善站 点设置。选择菜单中【站点】|【管理站点】命令, 弹出【管理站点】对话框,在对话框中选择站点。
3.1.5 插入栏

插入栏中放置的是编 写网页的过程中经常 用到的对象和工具, 通过该面板可以很方 便地使用网页中所需 的对象以及对对象进 行编辑所要用到的工 具,如图3.6所示。
3.2

创建站点
在使用Dreamweaver制作网页前,最好先定义一 个站点,这是为了更好地利用站点对文件进行管 理,尽可能地减少错误,如路径出错、链接出错 等。


3.4.2 设置文本大小
选择一种合适的字体,是决定网页美观、布局合 理的关键,在设置网页时,应对文本设置相应的 字号。


3.4.3 设置文本颜色
还可以改变网页文本的颜色,设置文本颜色的具 体操作步骤如下。


3.5 设置头信息
文件头标签也就是通常说的<meta>标签,文件头 标签在网页中是看不到的,它包含在网页中的 <head>...</head>标签之间。所有包含在该标签 之间的内容在网页中都是不可见的。

Dreamweaver-CS6网页制作第1章

Dreamweaver-CS6网页制作第1章
目录
前进
后退
结束
知识细目
1.1 网页基础知识 1.2 Dreamweaver CS6的工作界面 1.3 利用Dreamweaver CS6创建站点
前进 目录
1.4 利用Dreamweaver CS6进行站点管理
1.6 HTML语言的基础知识
后退
1.5 利用Dreamweaver CS6创建网站目录结构
结束
选取工具:用于选取“文档”窗口内的对象。
手形工具:用来移动对象的位置。 缩放工具:增大或减小窗口的显示比例。 窗口大小:显示当前文档窗口的大小,以像素为单位。 文件大小和估计的下载时间:显示页面的预计文档大小和预计下 载时间。
目录
属性面板
前进
后退
“属性”面板用于查看和编辑当前选定对象(如文本、图像等) 的各种属性。不同页面元素工具栏
目录
“文档标题”:显示当前网页的标题。新建文档时,默认的网
页标题是“无标题文档”。
“文件管理”:显示“文件管理”菜单,包括上传、下载等命 令。 “在浏览器中预览/调试”:选择一种浏览器预览或调试文档。 “可视化助理”:用户可以使用各种可视化助理来设计页面。 “检查浏览器兼容性”:用于检查CSS是否对各种浏览器均兼 容。
(4)单击“完成”按钮,回到“管理站点”对话框, 导入的站点已经出现在列表中,因为有重命名的站点 ,所以导入的站点名称后面自动加上了数字2,如下图 所示:
目录
前进
后退
导入后的站点显示
结束
1.4 利用Dreamweaver CS6进行站点管理
(5)单击“确认”按钮,完成站点的导入工作。 (6) Dreamweaver CS6主界面右侧“文件”面板的 下拉列表框中出现了导入“悠悠我心的个人网站2”站 点和原来的站点“悠悠我心的个人网站”,如下图所 示。在“站点管理”对话框中分别选择这两个站点, 单击“编辑”按钮 ,可以看到这两个站点的定义也 完全一样。

边做边学-Dream weaver CS6网页设计案例教程

边做边学-Dream weaver CS6网页设计案例教程
“属性”面板提供了CSS功能。用户可以通过“属性”面板中“类”选项 的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定 义样式,当用户调整这些文字的属性时,会自动生成新的CSS样式。
1.2 创建网站框架
操作目的 操作步骤 相关工复制效果,熟练掌握新 建命令。通过关闭新建文件,熟练掌握保存和关闭命令。
编辑站点 复制站点 删除站点 导出站点 导入站点
2.创建文件夹
建立站点前,要先在站点管理器中创建站点文件夹。
(1)在本地磁盘中选择要建立站点的位置。 (2)通过以下两种方法新建文件夹。
①选择“文件 > 新建文件夹”命令。 ②用鼠标右键单击站点,在弹出的快捷菜单中选择“新建文件 夹”命令。 (3)输入新文件夹的名称。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中, 站点通常包含两部分,即本地站点和远程站点。本地站点是本地计算机上的一 组文件,远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文 件发布到网络上的远程站点,使公众可以访问它们。在Dreamweaver CS5中 创建 Web 站点,通常先在本地磁盘上创建本地站点,然后创建远程站点,再 将这些网页的副本上传到一个远程 Web 服务器上,使公众可以访问它们。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令,熟练掌握创建站点的方法。通过新建站点,熟练 掌握创建站点根目录的过程。
1.3.2 操作步骤
1
2
3
4
1.3.3 相关工具
1.站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站 点以及导入或导出站点。若要管理站点,必须打开“管理站点”对话框。

第11章框架式网页布局 中文版Dreamweaver CS6网页制作课件

第11章框架式网页布局 中文版Dreamweaver CS6网页制作课件

从入门到精通
清华大学出版社
23
Dreamweaver CS6 从入门到精通
11.5 提高实例——制作后台管理网页
从入门到精通
清华大学出版社
16
中文版Dreamweaver CS6网页制作从入门到精通
11.3.4 删除ຫໍສະໝຸດ 架若需删除框架,可用鼠标将要删除框架的边 框拖至页面外即可;如果要删除嵌套框架集, 需将其边框拖到父框架边框上或拖离页面。
从入门到精通
清华大学出版社
17
Dreamweaver CS6 从入门到精通
从入门到精通
清华大学出版社
15
中文版Dreamweaver CS6网页制作从入门到精通
11.3.3 调整框架的大小
当用户在网页文档中插入框架后,常常需要调整 框架的大小,此时,可将鼠标光标移至需调整的 框架边框上,当鼠标光标将变为双向箭头时,按 住鼠标左键不放并拖动至所需位置,然后释放鼠 标,即可改变框架的大小。
从入门到精通
清华大学出版社
13
中文版Dreamweaver CS6网页制作从入门到精通
2.保存框架集网页文档
保存框架集网页文档的方法与保存框架网页 文档的方法类似,但需先在选择整个框架集。
从入门到精通
清华大学出版社
14
中文版Dreamweaver CS6网页制作从入门到精通
3.保存全部
使用“保存全部”命令可以同时将框架集网 页文档及所有的框架网页文档进行保存,这 种保存方法常用于首次对框架及框架集网页 文档进行保存。只需选择【文件】/【保存全 部】命令,在打开的对话框中设置保存的路 径及文件名称,再单击“保存”按钮即可。
Dreamweaver CS6 从入门到精通

dreamweaver怎么设置边框 dreamweaver怎么新建框架集文件

dreamweaver怎么设置边框 dreamweaver怎么新建框架集文件

Dreamweaver怎么设置边框在Dreamweaver中,您可以使用CSS样式或HTML属性来设置元素的边框。

边框可以为页面增添装饰性,也可以用于区分不同的元素。

下面将介绍一些方法来在Dreamweaver中设置边框。

1. 使用CSS样式设置边框步骤 1:打开Dreamweaver首先,打开Dreamweaver并加载您要编辑的HTML文件。

步骤 2:选择要设置边框的元素使用鼠标点击或选择器选中您想要设置边框的元素。

您可以选择一个div、一个图片或者任何其他标签。

步骤 3:添加CSS样式在Dreamweaver的右侧面板中,点击“CSS样式”来显示CSS样式面板。

确保您已经链接了CSS样式表。

步骤 4:创建一个新的样式表如果您没有创建过样式表,请点击样式面板上的“新建样式表”按钮。

如果您已经有样式表了,请跳过此步骤。

在样式表面板中,点击“新样式”按钮来创建新的样式。

在“名称”字段中输入一个名称以识别样式。

添加以下代码来设置边框样式:.element {border-style: solid; /* 设置边框样式为实线 */border-width: 1px; /* 设置边框宽度为1像素 */border-color: black; /* 设置边框颜色为黑色 */}可以根据需要自定义边框的样式、宽度和颜色。

步骤 6:应用样式选中您要应用样式的元素,然后在样式表面板中找到您刚刚创建的样式并选择应用。

2. 使用HTML属性设置边框在Dreamweaver中,您也可以使用HTML属性来直接设置元素的边框。

步骤 1:选择要设置边框的元素使用鼠标点击或选择器选中您想要设置边框的元素。

在元素标签中添加以下属性来设置边框样式、宽度和颜色:```html <div style=。

DREAMWEAVERcs6模块6使用AP元素与框架

DREAMWEAVERcs6模块6使用AP元素与框架

模块六---使用AP元素和框架
任务二 框架使用
子任务1 框架和框架集的工作方式 框架的作用就是把浏览器窗口分割成若干个区域,每个区域可以分别显示不 同的网页内容。框架最常见用途就是导航,应用框架在制作一些功能性比较 强的网页时有很大的优势,例如现在的一些网站的管理后台,都是用框架来 制作的,这样操作方便,不用每次单击链接都刷新整个网页。 Dreamweaver可以在一个“文档”窗口中查看和编辑与一组框架关联的所 有文档。每一框架会显示一个单独的 HTML 文档。 框架创建和框架集创建的过程是同步的,只要创建了框架就创建了框架集, 有了框架集就必然存在框架。如果某个页面被分成两个框架,那么它实际是 由一个框架集和两个框架而组成的。使用框架的最常见情况就是:一个框架 显示包含导航控件的文档,而另一个框架显示包含内容的文档。如果一个站 点在浏览器中显示为包含三个框架的单个页面,则它实际上至少由四个 HTML 文档组成:框架集文件以及三个文档,这三个文档包含最初在这些框 架内显示的内容。在 Dreamweaver 中设计使用框架集的页面时,必须保存 所有这四个文件,该页面才能在浏览器中正常显示。
模块六---使用AP元素和框架
子任务2 框架和框架集的使用
1 .创建框架和框架集可以使用以下操作方法。 步骤 1 启动Dreamweaver,将插入点放在文档中并执行下列操作之 一:
选择【插入】→【HTML】→【框架】,并选择预定义的框架 集;
在“插入”面板的“布局”类别中,单击【框架】按钮上的下 拉箭头,然后选择预定义的框架集。框架集图标提供应用于 当前文档的每个框架集的可视化表示形式。框架集图标的蓝 色区域表示当前文档,而白色区域表示将显示其它文档的框 架。
模块六---使用AP元素和框架

用Dreamweaver建立框架页面

用Dreamweaver建立框架页面

实验8 用Dreamweaver建立框架页面实验目的:通过实验,掌握如何如何创建和应用框架页面,了解框架的基本分布结构和各个框架页面之间的相互联系。

实验步骤:1. 启动Dreamweaver程序,选择菜单“文件”“新建”命令,打开“新建文档”对话框。

在对话框中“常规”标签下选择“类别”列表中的“框架集”选项,然后再右边的“框架集”列表中选择“上方固定”选项,如图8-1所示。

单击“创建”按钮创建框架网页。

2. 选择菜单“窗口”“框架”命令,打开框架控制面板。

3. 用鼠标单击框架控制面板中的下部分,选中mainFrame框架。

如图8-2所示:图8-1 套用框架图11-2 选择框架集的子框架4. 将鼠标放在选中的边框上,使鼠标变成双向箭头,然后拖动鼠标将该框架分成左右两个子框架。

如图8-3所示。

图8-3 把主框架切分为子框架5. 在框架编辑窗口中,单击顶部框架,选择菜单“文件”→“保存框架”命令,保存框架为top.htm页面。

6. 将光标停放到下部分框架的左边框家中,选择菜单“文件”→“保存框架”命令,保存框架为left.htm页面。

7. 按同样的方法,将右边的框架保存为right.htm页面。

8. 单击框架面板上最外层的边框,或单击页面编辑窗口中的最外层边框,使外框出现虚线。

如图8-4所示:图8-4选中整个框架说明鼠标单击所选中的框架,所选中的框架就是当前正在编辑的页面.9. 选择菜单“文件”—>“保存全部”命令,保存所有框架和框架集,框架集文件名称为index.htm.如图8-5所示.10. 单击框架面板上的topFrame框架,选中top.htm网页.11. 打开属性面板,在属性面板上的“滚动”下拉菜单中选择“否”,图8-5 保存框架集然后勾选旁边的“不能调整大小”复选框;在“边界宽度”和“边界高度”的文本框中都输入0,参数设置如图8-6所示.图8-6 top框架的属性设置说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项,其中选择“是”表示允许页面左右.上下出现滚动条;选择“自动”.“默认”表示根据网页内容,需要时自动显示滚动条;选择“否”表示不允许出现滚动条.12. 单击top框架页面,在属性面板中单击“页面属性”按钮。

中文版_Dreamweaver_CS6网页设计教程_第6章

中文版_Dreamweaver_CS6网页设计教程_第6章
6
6.1.3 选择表格
1. 选择整个表格 2. 选择行或列
(1) 选择单行。 (2) 选择单列。
(3) 选择行/列。 3. 选择单元格
(1) 选择单个单元格 (2) 选择多个单元格
7
6.1.4 编辑表格
1. 调整表格大小
2. 设置表格属性
1)
设置表格属性
2)
设置单元格属性
3. 增加/删除行或列
件。图6-23所示为以制表符相隔的文本文件。 (3) 在Dreamweaver CS6中,选择“文件”|“导入
表格式数据”命令,打开“导入表格式数据”对话框, 如图6-24所示。
11
6.1.6 导入/导出数据
(4)设置完成后,单击“确定” 按钮,将外部数据导入,如图 6-25所示。
12
6.1.6 导入/导出数据
表格包含以下 3 个基本元素。
行。 列。 单元格。
3
6.1.1 插入表格
插入表格的基本步骤如下。
(1) 将插入点置于页面中要插入表格的位置。 (2) 在插入栏的“常用”选项卡中单击按钮。也可
以选择“插入”|“表格”命令;或使用快捷键 Ctrl+Alt+T 快速插入表格。 (3) 在弹出的“表格”对话框中设置表格的参数值, 如图6-1所示。单击“确定”按钮。
1)
增加行或列
2)
删除行或列
3) 设置“属性”面板
4. 复制/粘贴单元格
5. 拆分/合并单元格
1)
拆分单元格
2)
合并单元格
8
6.1.5 数据排序
和其他数据处理软件一样,Dreamweaver CS6 也可以将表格中的数据按照一定的规则排列, 其操作方法如下。

中文版DreamweaverCS6网页制作实用教程第七章使用框架布局网页

中文版DreamweaverCS6网页制作实用教程第七章使用框架布局网页
【例 7-2】使用 Dreamweaver CS6 创建一个嵌套框架集网页。 (1) 完成【例 7-1】的操作,创建一个框架网页后,将鼠标指针放置在文档右侧的框架中, 如图 7-4 所示。 (2) 选择【插入】| HTML |【框架】|【对齐上缘】命令,即可在网页右侧的框架中创建一 个如图 7-5 所示的顶部框架集,该框架集为嵌套框架集。
(2) 单击选中框架集
3. 选中页面中的不同框架
对于单个框架而言,用户可以很容易地选择不同部分的内容。但在框架集中,想要选择不 同的框架就比较困难。下面介绍 3 种选择多个嵌套框架集的方法。
若要在当前选定的同一层次级别上选择下一个框架(框架集)或前一框架(框架集),可 以在按住 Alt 键的同时按下左箭头键或右箭头键,按照框架和框架集在框架集文件中 定义的顺序依次选中不同的框架和框架集。 若要选择框架网页中的父框架集(指包含当前选中内容的框架集),可以在按住 Alt 键 的同时按向上箭头键。 若要选择当前选定框架集的第一个子框架或框架集(即按在框架集文件中定义顺序中 的第一个),在按住 Alt 键的同时按下箭头键即可。
使用框架布局网页
框架网页是一种非常常见的网页类型,在网页设计中使用框架,可以把页面分成多个部分, 不仅可以使每个部分都是一个独立的 HTML 页,显示不同的内容,而且还能够通过超链接实现 框架内容的相互切换。本章将详细介绍在 Dreamweaver CS6 中制作框架网页的具体操作方法。
创建框架网页 保存框架网页 创建嵌套框架 设置框架属性
7 .1 在网页中使用框架
在网络带宽十分有限的情况下,如何提高网页的下载速度,是网页设计者必须要考虑的问 题。如果多个网页拥有相同的导航区,知识内容有所不同,则可以考虑使用框架来设计网页布 局。如此,浏览者在查看不同的内容时,便无需每次都下载整个页面,而只是在保持导航部分 不变的情况下,下载网页中需要更新的内容即可。框架网页可以极大地提高网页的下载速度。

保存框架集与框架_Dreamweaver CS6网页设计立体化教程(双色微课版)_[共2页]

保存框架集与框架_Dreamweaver CS6网页设计立体化教程(双色微课版)_[共2页]

其变为
创建自定义框架
图5-66 选择框架 图5-67 定位鼠标指针
住鼠标左键不放并向右侧拖动,如图5-68所示。

放鼠标即可将下方的框架拆分为两个框架,同时“框架”面板中也将同步更新框架集的结构,效果如图5-69所示。

图5-68 拆分框架 图5-69 完成框架的创建
自定义框架名称
创建的自定义框架默认是没有名称的,若想为其设置名称,可在“框架”面板中将其选择,然后在“属性”面板的“框架名称”文本框
中输入需要的名称即可。

保存框架集
开“另存为”对话框,在“保存在”下拉列表框中设置保存位置,在“文件名”下拉列表框中输入“gsgg.html”,单击按钮即可完成保存框架集的操作,如图5-71所示。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
相关文档
最新文档