Adobe Dreamweaver CS6 如何建立框架页面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第三章：创建网页布局在Dreamweaver中，我们可以使用所见即所得（WYSIWYG）编辑器来创建网页布局。

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

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

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

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

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

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

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

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

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

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

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

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

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

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=。

实验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框架页面，在属性面板中单击“页面属性”按钮。

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

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

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

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