Dreamweaver+FlashCS6第6章 布局网页版面
Dreamweaver CS6网页设计与制作教学教案
《Dreamweaver CS6网页设计与制作标准教程》教学教案掌握互联网基础和网站建设基本流程。
掌握网站建设基础和网页设计基础。
掌握网页的制作常用软件和标准技术。
熟练掌握网站建设的基本流程。
熟练掌握网页设计基础知识。
软件的应用和标准技术。
掌握软件的工作界面和创建网站框架。
掌握管理站点文件和文件夹的方法。
掌握管理站点和网页文件头设置。
熟练掌握Dreamweaver CS6工作界面的基本操作。
熟练掌握Dreamweaver CS6的站点。
在Dreamweaver CS6中站点的建立及编辑。
第3讲掌握输入文本和设置文本属性的方法。
掌握项目符号和编号列表的创建方法。
掌握水平线、网格与标尺的使用方法。
熟练掌握文本的多种创建方法和编辑技巧。
熟练掌握项目符号、编号列表和水平线的使用方法。
能够正确输入文本并编辑相关属性。
3.1.14 设置文本样式3.1.15 段落文本3.2 项目符号和编号列表3.2.1 课堂案例——电器城网店3.2.2 设置项目符号或编号3.2.3 修改项目符号或编号3.2.4 设置文本缩进格式3.2.5 插入日期3.2.6 特殊字符3.2.7 插入换行符3.3 水平线、网格与标尺3.3.1 课堂案例——摄影艺术网页3.3.2 水平线3.3.3 显示和隐藏网格3.3.4 标尺3.4 课堂练习——有机果蔬网页3.5 课后习题——休闲旅游网页小结1、熟练掌握文本的使用方法和技巧。
2、了解并掌握项目符号和编辑列表的使用方法和技巧。
作业第4讲熟练掌握图像的插入方法。
掌握多媒体在网页中的应用。
熟练掌握图像的格式与模式。
熟练掌握Flash文件的插入与设置。
能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。
4.4 课后习题——房源网页小结1、熟练掌握图像的格式与插入方法和使用技巧。
2、掌握Flash动画的插入和属性的设置。
作业第5讲了解超链接的概念与路径知识。
掌握文本、图像超链接的创建方法。
浅谈DreamweaverCS6中网页布局的三种方式
浅谈Dreamweaver CS6中网页布局的三种方式作者：李爱红来源：《电脑知识与技术》2018年第22期摘要：网页设计的关键之一在于网页的布局，好的布局不仅能体现设计者的奇思妙想，更能让浏览者眼前一亮，从而提高网页的访问量。
Dreamweaver CS6中提供了多种网页布局的方法，其中以表格、框架及AP Div为最常用的三种方式。
该文分析说明了目前常用的三种布局方式：表格、框架和AP Div方式，并对三种方式进行了详细的比较。
关键词：Dreamweaver CS6；表格；框架；AP Div中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）22-0288-021 网页布局的基础知识在工作、学习和娱乐中，我们上网时会发现网页具有感染力，有的网页给人干净整洁的感觉，有的网页优雅高贵，有的网页给人以爽朗、清凉的感觉，还有的网页使用植物的色彩，使人想到健康、和谐。
这些是由网站的风格决定的。
1.1 网站的风格在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。
也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。
1.2 网页的布局在确定网站的风格后，要对网站的总体布局进行规划调整，也就是网页上的网站标志、导航栏、菜单栏等元素的位置确定，不同风格网页的網页元素所处的位置也不同。
1.3 配色方案网页的布局没有优劣之分，要与网站的风格相适应，就必须注意整个站点的平衡性、对称性、对比性、疏密度、反复性、韵律感和颜色搭配等。
根据色彩要素，结合色彩的感觉，应用色彩的搭配原则，展现不同网站类型的配色。
2 常用的网页布局方式在网页布局中有三种方法，一种是利用表格进行网页布局排版，一种是利用框架进行网页布局排版，还有一种是使用AP Div排版布局页面。
下面就对常用的三种方法进行分析和说明。
2.1 表格排版网页布局表格是网页设计中常用的方法，在表格中可以定位文字、图像、动画等网页元素，还可以对数据进行排列，在内容和形式上使网页整体条理清晰。
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创建网页布局第一章：了解DreamweaverDreamweaver是一种流行的网页编辑软件，由Adobe公司开发。
它具有强大的设计和布局工具，为用户提供了一个简单而直观的界面来创建网页布局。
在开始使用Dreamweaver创建网页布局之前，我们需要先了解一些基础知识。
第二章：准备工作在使用Dreamweaver之前，我们需要做一些准备工作。
首先，安装Dreamweaver软件并确保已经获得了有效的许可证。
然后，我们需要确定网页布局的整体风格和设计理念，并准备好所需的素材，如图片、视频和文本等。
最后，创建一个新的项目文件夹来保存我们的网页布局文件。
第三章：创建网页布局在Dreamweaver中，我们可以使用所见即所得（WYSIWYG）编辑器来创建网页布局。
首先，我们需要选择一个适合的网页模板或布局。
然后，我们可以使用拖放功能来添加不同的元素，如文本框、按钮和图像等。
同时，我们可以使用CSS样式来调整布局的外观和风格。
第四章：使用网格布局网格布局是一种常用的网页布局技术，它可以帮助我们创建具有平衡和一致性的网页布局。
在Dreamweaver中，我们可以使用网格布局工具来快速创建网格布局。
我们可以选择网格的列数和行高，并将元素拖放到相应的网格单元格中。
通过调整网格的属性，我们可以实现不同风格的网页布局。
第五章：响应式布局设计随着移动设备的普及，响应式布局设计变得越来越重要。
Dreamweaver提供了强大的响应式布局工具，可以帮助我们实现在不同设备上都能良好显示的网页布局。
我们可以使用媒体查询和CSS媒体规则来调整布局的响应性，并通过设置不同的CSS样式来适应不同的屏幕大小。
第六章：优化网页布局创建一个有效的网页布局不仅仅是设计一个漂亮的页面，还需要考虑网页性能和用户体验。
在Dreamweaver中，我们可以使用一些优化技巧来提高网页布局的加载速度和交互性。
例如，使用CSS Sprite来合并多个图像文件，减少HTTP请求。
【课件-计算机基础教学】_第6章 Dreamweaver CS6 网页制作_
代码，下半部分显示网页设计外观，这样可以在编辑代码 的同时观看设计效果 ● 设计视图：为可视化编辑窗口，窗口中看到的网页外观和 浏览器中看到的基本是一样的，即“所见即所得”模式 ● 实时视图：显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外，其他面板都在Dreamweaver窗口右 侧显示，统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩，具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”，进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类，提供了全部 的Dreamweaver命令，包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
网页设计与制作Dreamweaver CS6标准教-ppt课件-05
创建锚点链接的步骤如下。 1．创建锚点 2．链接到锚点
网站链接设置好后，Dreamweaver还提供 了自动更新链接和链接检查功能，以便对网 站内的链接进行管理。
5.6.1练习案例-百适易得商城 5.6.2自动更新链接 5.6.3链接检查 5.6.4修复链接
案例学习目标：学习网站的链接管理。 案例知识要点：使用菜单【窗口】|【结果】| 【链接检查器】，打开【链接检查器】面板管 理网站链接。 素材所在位置：光盘/案例素材/ch05/课堂案 例-百事易得商城。 案例效果如图5-58所示。
案例练习目标：练习创建锚点链接。 案例操作要点： 1．在网页scie.html中的文字“鸟类”、“昆虫类” 和“植物类”前面，分别插入锚点bird、insect、 plant；在页面底部“快速导航”区域内，分别为“鸟 类”、“昆虫类”和“植物类”建立锚点链接指向锚 点bird、insect、plant。 2．在网页contact.html中的文字“联系我们”前插入 锚点us，在网页scie.html底部“快速导航”区域内， 为文字“联系我们”建立指向us的锚点链接。 3．在网页contact.html底部“快速导航”区域内，分 别为“鸟类”、“昆虫类”和“植物类”建立指向锚 点bird、insect、plant的锚点链接。 素材所在位置：光盘/案例素材/ch05/练习案例-生物 科普网，效果如图5-78所示。
源端点可以是文本按钮图像等对象目标端点可以是同一页面的不同位置也可以是一个其他页面一幅图像一个文件或一段程序511按超链接端点分类512按超链接路径分类按照源端点来划分超级链接可以分为文本超链接和非文本超链接两种
中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页
(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。
Dreamweaver怎么怎么利用层布局网页
Dreamweaver怎么怎么利用层布局网页
Dreamweaver怎么怎么利用层布局网页
在以前的网页制作中，一般采用表格来布局网页页面，但利用层有其更加快捷和精准的.优势，目前利用DIV+CSS制作网页已经成为一种常态，下面就跟随店铺一起来看看吧!
1、显示网格。
在DIV布局中首页要显示网格，能更加直观的通过网格来绘制层。
点击查看网格\显示网格。
2、网格设置。
点击查看网格\网格设置，对网格进行设置。
3、显示标尺。
点击查看标尺\显示，可以显示标尺。
4、点击绘制层，在网格上直接绘制一个网页头，并插入图片。
5、在图像下面绘制一个层，设置属性用来放置导航条。
并绘制其他的层来放置内容。
6、这样一个简单的网页页面就做好了，点击F12预览。
下载全文。
中文版 Dreamweaver CS6网页设计教程 第6章
2. 选择框架集
使用下列方法之一选择框架集：在 文档窗口中，单击框架集中任意两 个框架的边界，或者在“框架”面 板中，单击框架集的外围，如图648所示。
18
6.3.3 设置框架和框架集属性
1. 设置框架属性
选择框架后，打开框架“属性”面板，如图6-49所示。
2. 设置框架集属性
选择框架集后，打开框架集“属性”面板，如图6-50 所示。
16
6.3.1 创建框架集
1. 插入预定义框架集
Dreamweaver CS6提 供了多种预定义的框架 结构，选择“插 入”| HTML |“框架” 命令，就可以看到这些 预定义的框架结构了， 如图6-42所示。
2. 自行创建框架集
17
6.3.2 选择框架和框架集
1. 选择框架
使用下列方法之一选择框架：按住 Alt键的同时，在文档窗口中单击框 架，可选定框架：或者在框架“属 性”面板中单击框架，则选中相应 的框架，如图6-47所示。
22
6.3.7 框架应用
该实例制作一本电子书，主体是“上方及左侧嵌套”框架集， 在顶部放置标题栏，左侧框架放置导航栏(即目录)，单击链接， 在右侧框架中打开链接内容。其具体操作步骤如下。
(1) 新建HTML页面。 (2) 依次选择“插入”| HTML |“框架”|“上方及左侧嵌套”命令。 (3) 选择框架集，选择“文件”|“保存框架页”命令，保存框架集。 (4) 在顶部框架内单击鼠标，选择“文件”|“保存框架”命令，将 其保存为Frame-top.htm。 (5) 使用同样的方法，将左侧框架保存为Frame-left.htm，将右侧框 架保存为Frame-main.htm。 (6) 按住Alt键的同时，单击框架，打开其“属性”面板，在“属性” 面板上设置框架名称。Dreamweaver CS6已经为预定义框架设置了名称， 例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时 要用到，其他属性默认，如图6-54所示。
Dreamweaver CS6网页设计与制作标准教程 (6)
6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表 格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图 标 ，单击鼠标左键即可选中整个表格。 将插入点放到表格中的任意单元格中，然后在文档窗口左下角 的标签栏中选择<table>标签 令。 在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。 。 将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
粘贴单元格
将光标放到网页的适当位置，选择“编辑 > 粘贴”命令，或 按 Ctrl+V 组合键，将当前剪贴板中包含格式的表格内容粘贴到光
标所在位置。
粘贴操作的几点说明 （1）只要剪贴板的内容和选定单元格的内容兼容，选定单元 格的内容就将被替换。
（2）如果在表格外粘贴，则剪贴板中的内容将作为一个新表
表格的属性 表格的“属性”面板。
“属性”面板
单元格和行或列的属性 单元格和行或列的“属性”面板。
“属性”面板
6.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图 像和表格等。在表格中添加元素的操作非常简单，只需根据设计要
求选定单元格，然后插入网页元素即可。一般当表格中插入内容后，
效果图
6.1.2 表格的组成
表格中包含行、列、单元格、表格标题等元素。
表格的组成
6.1.3 插入表格
要将相关数据有序地组织在一起，必须先插入表格，然后才
能有效地组织数据。
插入表格的具体操作步骤如下。 （1）在“文档”窗口中，将插入点放到合适的位置。
中文版_Dreamweaver_CS6网页设计教程_第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 也可以将表格中的数据按照一定的规则排列， 其操作方法如下。
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
第6章CSS样式与盒子模型
6.1.3 创建与应用CSS样式
18
2. 创建并应用类CSS样式
（1）在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建 CSS 规则”对话框，在上
方的下拉列表框中选择“类（可应用于任何 HTML 元素）”选项，在“选择器名称”下拉列表框
中输入“.title”选项，在下方的下拉列表框中选择“（新建样式表文件）”选项，单击
按钮，打开“新建 CSS 规则”
对话框，直接单击 按钮，打开CSS规则定义对话框，在其中进行设置，单击
按钮，
返回“插入 Div 标签”对话框，单击 按钮即可在网页中创建Div标签。
6.2.3 利用CSS+Div布局网页
34
2. 设置CSS样式
在above Div标签中输入文本内容，在“CSS样式”面板的“所有规则”列表框中选择 “#above”选项，单击下方的“编辑样式”按钮，打开CSS规则定义对话框，其中设置相关 的CSS样式，完成后单击 按钮。
标题 文字
3
精确控制网页中各种元素的位置 可以为网页中的元素设置各种 过滤器，产生如阴影、模糊、 透明等效果 可以与脚本语言结合，使网页 中的元素产生多种动态效果
6.1.1 认识CSS样式
4
2．CSS样式的特点
分类使用样式
集中管理样式信息
共享样式设定
使用文件
1
优先级
CSS的特点主要包括以上几点
6.1.1 认识CSS样式
31
7．content（内容）
content 是 盒子 包含的 内 容，是网页展示给用户浏 览的内容。content 可 以 是网页中包含块元素、行 内元素、HTML的任一元 素，如文本、图像等。
6.2.2 盒子模型的布局优势
Dreamweaver CS6教程
第一节Dreamweaver CS6 软件简介和安装1、Dreamweaver CS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件2、为了保护能够正常安装，安装时，请断开网络。
第二节Dreamweaver CS6软件界面和简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同开发人员的需求三、界面的恢复：窗口——工作区——重置设计器四、插入面板的调用第三节网页相关知识1、什么是网页（网页概念）在互联网上基于HTTP协议传播信息的页面2、什么是网站反应同一个主题的多个网页集合3、网页内容的组成（网页元素）（1）文字（2）图片（jpg,gif,png）（3）动画（swf,gif）（4）多媒体（5）超链接（6）表单（7）网页特效（8）其他元素第四节网页制作方法与站点建立1、网页的制作方法（1）代码发：html（2）软件制作：Dreamweaver、frontpage2、制作网站前准备工作，建立站点。
3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相关连接。
4、站点的建立（连接）（1）站点——建立（2）文件面板（3）应用程序栏（窗口——应用程序栏）5、站点的分类（按照网站的位置）（1）本地站点（2）远程站点第五节规划本地站点目录结构1、规划本地站点目录结构（1）images(图片)（2）swf（动画）（3）css(CSS样式)（4）script(存放网页特效)（5）other(其他)2、网站主页名称（1）index.htm（2）index.html（3）default.htm（4）default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求第六节网页中文字的输入1、网页的四个视图（1）设计视图（2）代码视图（3）拆分视图（4）实时视图3、网页中的文字（1）文字直接输入（2）回车表示换段（3）Shift+回车：表示换行（4）输入空格时要在全角输入法状态下输入（5）特使字符插入：“插入——html——特殊字符”（6）文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本，然后从记事本中在复制文字就可以了）4、预览网页：文件——在浏览器中预览——Iexplore(快捷键：F12)第七节页面属性1、页面属性（1）修改——页面属性（2）或通过属性栏2、属性（1）左边距、右边距、上边距、下边距（2）文字字体、大小、颜色。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.2.4 插入并编辑DIV
要使用CSS+DIV布局需要先在页面中插入DIV，然后通过编辑DIV标签的CSS属性来实现布局。
2. 保存单个框架文档 在网页中需保存的框架区域单击鼠标定位插入点，选择【文件】/【保存框架】菜单命令，
在打开的“另存为”对话框中设置框架的保存位置和名称后，单击确定即可。
保存单个框架文档
6.1.6 保存框架和框架集
3. 保存所有框架文档 选择【文件】/【保存全部】菜单命令，可在打开的“另存为”对话框中完成框架集及所有
框架网页文档的保存工作。
保存所有框架文档
6.1.7 设置框架集与框架属性
1. 设置框架集属性
2. 设置框架属性
框架集的属性设置面板
框架的属性设置面板
6.1.8 在框架中添加网页
框架创建好后，就可以为框架集中的各个框架指定显示的网页文件，其具体操作如下。
（1）选择框架
（2）指定网页文件
6.1.8 在框架中添加网页
6.2.3 CSS+DIV布局模式的优势
掌握使用CSS样式布局是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页 面布局、字体、颜色、背景、其他效果实现更加精确地控制。采用CSS+DIV布局主要有以下优点。
页面加载更快 修改效率更高
站点更容易被访问 页面简洁
搜索引擎更容易检索
提高设计者速度
可以与脚本语言结合，使网页 中的元素产生各种动态效果。
6.2.1 认识CSS样式
2．CSS特点
使用文件
将样式分类使用
冲突处理
集中管理样式信息
共享样式设定
6.2.2 认识CSS+DIV布局模式
CSS+DIV布局模式是根据CSS规则中涉及的margin（边界）、border（边框）、padding（填 充）、content（内容）来建立的一种网页布局方法，如图所示即为一个标准的CSS+DIV布局结构， 左侧为代码，右侧为效果图。
（3）确认保存
（4）调整框架大小
6.1.8 在框架中添加网页
（5）为其他框架指定网页
内容导航
6.1 课堂案例：布局“酒店预订”网页 6.2 课堂案例：布局“婚纱礼服”网首页 6.3 项目实训 6.4 课后练习
23
课堂案例：布局“婚纱礼服”网首页
通过前面的学习，米拉对网页布 局有了一定的认识，老洪说，要想提 高网页布局设计水平，还需要学会 CSS+DIV布局。老洪接着就让米拉尝 试使用CSS+DIV布局来设计一个婚纱 礼服旗舰店首页，完成后的参考效果 如图所示。
1. CSS功能
灵活控制页面文字的字体、字号、 颜色、间距、风格、位置等。
随意设置一个文本块的行高 和缩进，并能为其添加三维 效果的边框。
方便定位网的位置。
可以为网页中的元素设置各种 过滤器，从而产生诸如阴影、 模糊、透明等效果。
选择整行
选择多个单元格 选择整列
6.1.2 调整表格结构
2. 插入与删除行或列 ① 插入行或列：利用快捷菜单插入行或列
② 删除行或列：选择需删除的行或列，单击鼠标右键，选择【表格】/【删除行】命令可删除行， 选择【表格】/【删除列】命令则可删除列。
6.1.3 设置表格和单元格
创建的表格还可对其进行相关设置，使其满足设计中的需要，如调整行高列宽，设置单元 格属性等，其具体操作如下。
普通高等学校计算机教育“十二五”规划教材
第6章 布局网页版面
网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）
内容导航
6.1 课堂案例：布局“酒店预订”网页 6.2 课堂案例：布局“婚纱礼服”网首页 6.3 项目实训 6.4 课后练习
2
课堂案例：布局“酒店预订”网页
“婚纱礼服”首页参考效果
6.2.1 认识CSS样式
CSS是“Cascading Style Sheet（层叠样式表）”的缩写，将多重样式定义可以层叠为一 种。CSS是标准的布局语言，用于为HTML文档定义布局，如控制元素的尺寸、颜色、排版等， 解决了内容与表现分离的问题。
6.2.1 认识CSS样式
（1）选择框架
（2）显示效果
6.1.5 创建框架和框架集
3. 创建自定义框架 选择框架
定位鼠标指针
完成自定义框架的创建
拆分框架
6.1.6 保存框架和框架集
1. 保存框架集 保存框架集是指将框架网页中的所有框架内容以及框架集本身都进行保存。
保存框架页
设置保存位置和名称
6.1.6 保存框架和框架集
缘”的框架集，其具体操作如下。
创建框架
6.1.5 创建框架和框架集
2. 选择框架集与框架
① 选择框架集：在“框架”面板中框架集的边框上单击即可选择整个框架集，当框架集被选择 后，其边框将呈虚线显示。
（1）选择框架集
（2）显示效果
6.1.5 创建框架和框架集
② 选择框架：在“框架”面板中的某个框架区域内单击鼠标即可选择该框架，被选择的框架在 “框架”面板中以粗黑实线显示，在网页窗口中该框架的边框将呈虚线显示。
（1）调整表格
（2）设置单元格背景
6.1.4 在表格中插入内容
完成表格插入与结构调整后，就可以在表格中添加需要的内容。
（1）选择图片
（2）确认属性
（3）调整图片大小
6.1.4 在表格中插入内容
（4）添加并设置文本
（5）添加并设置导航文本
6.1.5 创建框架和框架集
1. 创建框架集 利用Dreamweaver提供的“新建”功能可以很方便地创建框架集。下面创建一个“对齐上
（1）“表格”对话框
（2）创建的表格
6.1.1 创建表格
（3）设置嵌套表格
（4）设置第二个嵌套表格
6.1.2 调整表格结构
1. 选择表格和单元格 选择表格和单元格是调整表格结构的前提，Dreamweaver中主要有以下几种选择表格和单
元格的方法。 选择整个表格
选择单元格
6.1.2 调整表格结构
为了使网页更加美观，可通过使用表格或单元格美化网页布局，同时也可创建框架和框架集制 作网页整体架构。本例将制作一个酒店预订网页，完成后的参考效果如图所示。
“酒店预订”网页效果
6.1.1 创建表格
表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。 Dreamweaver CS6的表格功能强大，用户可以快速、方便地创建出各种规格的表格，其具体 操作如下。