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预览。
下载全文。
- 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的表格功能强大，用户可以快速、方便地创建出各种规格的表格，其具体 操作如下。