网页设计与制作.doc

第1章 网站规划
在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。一般流程如下：
1. 建设网站前进行必要的市场分析。
2. 明确建设网站的目的及功能定位。
3. 制定网站技术解决方案。
4. 根据网站的目的确定网站内容、网站结构和网站功能。
5. 进行网页设计，并根据技术方案实施网站建设。
6. 做出经费预算。
7. 网站测试。
8. 网站发布及推广。
9. 网站维护。

第2章 网站基础知识
网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站的组成
l 域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。
l 空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。
l 程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。
l 网页

网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。
l 基本构成元素：文字、图像、超级链接。
l 阅读方式：浏览器。
l 类型：以不同的后缀代表不同类型的网页文件。通常分为静态页面、动态页面。
动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。 也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。一般文件名均以htm、html、shtml等为后缀。
术语
WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URL）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。
URL（Uniform Resource Locator），统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
l 动态网页的URL是不固定的；而静态网页的URL是固定的。
HTTP (Hypertext transfer protocol) ，超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。
第3章 网站配色
216网页安全色
216网页安全色：指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），这些颜色在任何显示设备上的显示效果都是相同的。
网页安全色是当红色（R）、绿色（G）、蓝色（B）颜色数字信号值为（DAC Count）：0,51,102,153,204和255。
网页文字及配色
文字是网页的主体。文字的优势主要体现在信息量大、所用存储空间非常小，利于网页的快速打开，信息的直观呈现。

要求：字体不超过三种（标题、正文、导航），文本字号形成对比——突出（网页标题）、层次（栏目标题）、分明（正文，字体偏小，适于文字信息量大的内容）
规定：字号影响文字的清晰度，分辨率1024*768，正文：12号、宋体字；分辨率高于1024，正文：13-14号、宋体字；文章标题字号偏大，一般要使用平滑（消除锯齿）的字体。
文字与背景色彩搭配：
1) 文字能见度：
高明度色彩背景+低明度文字
2) 错误色彩搭配：
黄+白；绿+灰、绿+红；紫+红、紫+黑；青+黑
3) 前进色：红、黄、橙、白
l 背景色柔和、淡雅——深色文字
l 深色背景——浅色文字
l 不深不浅——根据色彩选择适合的颜色（色相、明度、饱和度）
文字色彩可以与网站主题相呼应，协调主色调、副主色调等。文字色彩有划分层次的作用，网页上相同色彩的文字都属于同一层次。
文字与图片的配色
遵循三个原则：
1. 文字周围的背景尽量单纯化。
2. 图片与文字对比尽量明显，易于识别。（通常浅色图片配深色文字，深色图片配浅色和高亮度的文字）
3. 文字与背景图片对比较弱不易识别时，可用其他色彩衬托文字的方式强化文字与图片间的对比。
网页中的图像
图像给人的视觉效果要比文字强烈得多。灵活应用图像，在网页中可以起到点缀的效果。但是应用不当，会使网页变得凌乱不堪。Web页上的图像文件大部分都是使用JPG和GIF格式。因为他们除了具有压缩比例高外，还具有跨平台特性。
图像在网页中的应用主要有以下几种形式。
1. 图像标题
一般在网页中都要有标题，用以提示浏览者这个网站是做什么的，起到了导航的作用，应用图像标题可以使网页更加美观，
2. 背景
图像的另一个重要应用是作为网页的背景。网页背景千变万化，特别是一些个人网站，应用图片背景比较多。
3. 网页主图
网页上除了用小图像美化网页外，通常还会在网页上用一些较大的图片来突出网页主题，占满网页的整个空间。特别是主页中用主图的比较多，或者直接用图片取代文字作为超级链接按钮，可以使网页更加美观。
网页图像分类
网页图像分为静态图像和动态图像。
l 动态图像：
1. gif动画：适于短小动画，画面数少，图像简单。【89a】
2. flash动画（.swf）：
3. flv视频（.flv）：体积小，压缩率高，适于传播但画面不够清晰。
l 静态图像：
1. JPG：优秀的图画品质，较为合理的文件大小，不支持透明格式。
2. GIF：256色，压缩后损失图像色彩但不影响图像失真；支持透明格式。【87a】
3. PNG：支持透明背景，支持48位色彩的图像模式；平滑的透明边缘；品质好，体积小。
网页上图片注意事项
1. 良好的视觉吸引力，“阅读最省力原则”
2. 图片要清晰，不能模糊、变形，太大的图片要进行分割。
3. 图片的主体含义要简单明了，图片上的文字要清晰容易识别。
4. 采用的图片颜色要符合网页整体色彩。

关于色彩
由光谱可以得出6个基础色相，增加过渡色可形成12色相环和24色相环。
l 同类色：指在同一色相中不同的颜色变化。
l 邻近色：在色环上任一颜色同其毗邻之色。
l 补色：在色环上彼此相距180°的两个色相互为补色。

色彩对比
网页色彩搭配主要从色彩冷暖、面积、色相、明度、纯度。
1. 色相对比
l 色相对比：两种以上色彩组合时，由于色相差别而形成的色彩对比效果。
l 对比强弱关系可以从色相环上的距离（角度）入手，距离越小对比越弱；反之亦然。
l 有彩色间的对比，按弱→强关系分为：
n 同类色相对比（无色相差、色相距离在45°，基于明度和纯度的对比）——单调

n 邻近色相对比（色相距离在90°左右）——较为丰富、耐看

n 对比色相对比（色相距离在130°左右）——鲜明、强烈（配色时需要考虑主色与次色间的关系、色彩面积，降低视觉疲劳）

n 互补色对比（色相距离在180°左右）——色彩对比很强（易产生不安定感，配色时需考虑色彩面积、色彩的分散度）
2. 明度对比
明度对比：指色彩明暗度的对比，也称作黑白度对比，即黑、白、灰效果。
3. 纯度对比
纯度对比分为高、中、低纯度。纯度对比表现出色彩艳丽效果，也是决定色调感觉的关键。
特点：增强用色的鲜艳感，即通常说的明确感。
表现：艳丽、生动、活泼
无彩色对比，如黑与白、深灰与浅灰。
表现：大方、稳重、高雅、朴素
4. 冷暖对比
l 暖色系：颜色接近红、橙、黄。
l 冷色系：颜色偏向蓝、青。
l 中色系：绿色和紫色
5. 面积对比
同一视觉范围内色彩的面积不同会产生不同的对比效果。
网页色彩的搭配
网页的色调：网页中的色彩，总存在某种内容联系组成一个统一的整体，从而形成画面色彩的趋势。
l 主色调——页面色彩的主要色调。显示站点整体内容和风格；其他配色面积一般不大于该视觉面积。
l 辅色调——烘托主色调，支持主色调，协助主色调营造整体视觉氛围（面积次之）。
l 突出颜色——强调色，用于突出主题效果，一般多用于按钮、标签之类。
l 背景色——协调、衬托整体

第4章 软件介绍
软件界面

常见问题
1. 窗口不显示插入工具栏。
[方法]Ctrl+F2；或者菜单命令[窗口-插入]，勾选。
2. 找不到属性窗口。
[方法]Ctrl+F3；或者菜单命令[窗口-属性]，勾选。
3. 文件面板显示根节点不是命名的站点名称。
[方法]文件面板-管理站点；或者菜单命令[站点-管理站点]。
4. 窗口显示的信息不完整，感觉窗口小了。
[方法]检查计算机的屏幕分辨率，分辨率不低于1024*768。
第5章 站点建立
制作网站之前除了准备网站资料、规划网站结构、设计网站布局以外，最好创建一个本地站点，易于管理和上传。特别是制作动态网站，本地站点的创建必不可少。站点的建立应注意以下情况：
1. 站点的路径结构中不能含有中文，即文件夹、文件的命名都不含有中文，且命名有规律易查找。
2. 习惯上在站点根文件夹下建立用于存放图片的子文件夹，如果网站中用到其他较多媒体类文件也可以建立相应的文件夹存放，但目录层次不易过深。
3. 创建网站的素材不能放在站点根文件夹中，站点文件夹中存入的图片、音频、视频或者动画只能是真正在网页中应用到的元素，一般在制作页面的过程中都会提示保存到站点文件夹下。
创建站点的视频演示

创建站点的命令
菜单命令：[站点-新建站点]
文件面板：[管理站点-新建]
创建站点的关键步骤说明
1. 新建站点对话框中，[基本]选项卡相当于一个建立站点的向导，引导设计者一步步地完成基本的站点设置，[高级]选项卡用于站点属性的详细设置。
2. 初学者可先在[基本]选项卡中完成站点的基本设置，再进入[高级]选项卡做进一步设置，如“默认图像文件夹”，应注意：1）设置了默认图像文件夹后，制作页面时每次插入图像都会自动将应用到的图片自动存放到该文件夹中；2）不能将所有下载或处理过的图像素材都拷贝到该文件夹中，造成不必要的存储负担。
3. 新建站点的名称可以包含中文、符号或字母，但站点路径不能包含中文和符号。
创建站点的关联操作
站点编辑：进行站点定义的补充设置或者重新设置。
站点删除：删除无关站点或者冗余站点。
站点导出：导出站点信息，并以.ste为扩展名的存储一个站点定义文件，该文件一般存储在站点根文件夹内。
站点导入：将站点根文件夹内的站点定义文件导入（扩展名.ste），导入中注意站点根文件夹和站点图像文件夹的指向，便于快速、正确的重构站点。

第6章 常用布局方法简介
版面布局基础
1. 网页默认习惯
l 网站标志放在页面上部
l 竖排导航时，导航放在页面左侧；横排导航时，放在网站标志或顶部广告之下
l 版权信息放在页面底部

2. 第一屏：是指打开一个网站页面不拖动滚动条的情况下能看到的页面部分。
分辨率
800*600
1024*768
第一屏
760* 420
1002*600
页面宽度：<=1002
页面高度：<=3*600
表格
表格是Dreamweaver中最常用的布局工具，不但可以精确定位网页在浏览器中的显示位置，还可以控制网页元素在网页中的精确布局。
创建表格及表格属性设置的视频演示

创建表格的命令
菜单命令：[插入记录-表格]
插入工具栏：[常用-表格]
表格的重要属性说明
1. 表格的宽度可以用两种方式表示：像素、百分比。
2. 在布局时，最外围的表格属性（宽度）单位必须用像素，而内部的嵌套表格宽度单位可以使用像素，也可以用百分比，使用百分较为灵活。
3. 嵌套的表格之间需要紧密相贴，则表格属性中应将“边距”、“间距”和“边框”值设置为0。
4. 表格可以嵌套表格，但无法交叉；表格交叉的错误容易出现在代码部分。
基本的表格标签
1. <table>：定义表格
2. <th>：定义表头
3. <tr>：定义表格行
4. <td>：定义表格单元（table data），即数据单元格的内容。
表格标签的可选属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性
值
描述
DTD
align
· left
· center
· right
不赞成使用。请使用样式代替。
规定表格相对周围元素的对齐方式。
TF
bgcolor
· rgb(x,x,x)
· #xxxxxx
· colorname
不赞成使用。请使用样式代替。
规定表格的背景颜色。
TF
border
pixels
规定表格边框的宽度。
STF
cellpadding
· pixels
· %
规定单元边沿与其内容之间的空白。
STF
cellspacing
· pixels
· %
规定单元格之间的空白。
STF
frame
（表格外框线）
· above
只外部的顶部边线
STF
· below
只外部的底部边线
· border
显示表格的边框线
· box
显示表格的整体
· hsides
显示外部的顶部和底部边线
· rhs
只显示外部的右侧边线
· lhs
只显示外部的左侧边线
· void
外部的所有边线全部不显示
· vsides
只显示外部的左侧和右侧边线
rules
（表格内部分割线）
· none
内部所有线框不显示
STF
· groups
内部横向和纵向线框不显示
· rows
只显示内部的横向线框
· cols
只显示内部的纵向线框
· all
显示所有内部线框
summary
text
规定表格的摘要。
STF
width
· %
· pixels
规定表格的宽度。
STF
表格标签的标准属性
id, class, title, style, dir, lang, xml:lang

表格的其他操作
1. 导入或导出表格数据
1) 菜单命令：[插入记录-表格对象-导入表格式数据]，其中导入的数据要具有制表符、逗号、分号、引号或者其他定界符。
2) 或者菜单命令：[文件-导入]，可选择“表格式数据”或者Excel文档。
3) 菜单命令：[文件-导出] 。
2. 表格的排序
1) 菜单命令：[命令-排序表格]
典型案例

表格布局
由于最初表格并不是用于布局设计，而是由于显示数据的，所以对于初学者来说，要想使用表格设计出布局合理的页面，往往会适得其反。为了简化利用表格布局页面，Dreamweaver中就特意提供了一种布局模式，在该模式下使用布局工具，设计者可以轻松地在页面中画出布局表格以及单元格，然后对其进行修改、移动等，并且可以方便地设置布局表格和单元格的属性，布局表格可以有一定的固定宽度，也可以占据整个浏览器窗口。
设置布局模式的参数及命令
菜单命令：[编辑—首选参数]，在左侧的[分类]栏中选中[布局模式]选项，即可为布局模式中的表格和单元格边框设置不同的颜色。
插入工具栏：[布局-扩展]
或者菜单命令：[查看-表格模式-布局模式]
或者ALlt+F6组合键
在布局模式中创建表格和单元格
在布局模式中可以在文档中随意地绘制表格，在布局模式下点击插入工具栏中的图标，鼠标在文档窗口即可拖动绘制布局表格；点击图标，拖动鼠标即可绘制布局单元格。
需要注意以下几个问题：
1. 不能在布局单元格中绘制表格。
2. 布局表格可以嵌套，布局单元格不可以嵌套，布局表格和布局单元格均不可以交叠，即在绘制布局表格和布局单元格时，不能直接在布局表格的旁边插入其他布局表格和布局单元格，只能在布局表格内或表格的下方添加其他布局表格和布局单元格。布局表格和布局表格之间不能相互重叠，创建相邻的布局表格时（小于8像素），Dreamweaver会自动将它们对齐，如果在绘制布局表格是按下Atl键，可以取消Dreamweaver的自动对齐功能。
3. 移动布局表格和单元格：可使用Dreamweaver提供的网格线作为辅助向导，[查看-网格-显示网格]命令显示网格线，或者按下Ctrl+shift+G快捷键。
移动表格的方法是：单击布局表格标签，然后拖动表格到合适的位置即可；如果同时按住Shift键，每次可以移动10个像素的距离，注意只有嵌套表格才可以移动。
调整布局表格尺寸的方法是:单击布局表格标签，表格将出现8个控制柄，然后拖动控制柄到合适的位置即可。
调整和移动单元格的方法：单击布局单元格的边框进行拖动，或者按下Ctrl键的同时单击布局单元格进行拖动，当到达合适的位置时，释放鼠标即可。如果要改变单元格的大小，可以先选中该单元格，然后拖动控制柄到满意的尺寸即可。
布局表格需注意的属性设置：
选项
作用
删除所有间隔图像
按钮：清除表格中的所有间隔
删除嵌套
按钮：清除嵌套表格，只有当存在嵌套表格时，该选项才显示

模板
在制作具有几十个甚至几百个风格基本相似的网站时，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就会显得非常麻烦，如果借助Dreamweaver中的模版功能就可以简化操作。
创建模板及模板设置的视频演示

创建模板的命令
1. 将现有的网页文档创建为模板（方法一）：
a) 菜单命令：[文件-另存为]，选择相应的站点名称。
b) 在该站点根文件夹下新建子文件夹Templates，将保存路径切换到该文件夹下。
c) 保存类型：模板文件（*.dwt），输入模板名称并保存。
2. 新建空模板（方法二）：
a) [文件-新建-空模板-HTML模板]
模板的重要说明
1. 模版实际是扩展名为.dwt的文档，必须存放在站点根目录的Templates文件夹中，才能被站点识别。
2. 模板中应该至少包含一个可编辑区域，否则模板无效，无法编辑该模板的页面。
两种创建方法的区别
1. 模版文件夹不是原本就有的，如果是使用方法二的方式创建，则Templates文件夹会自动生成；而如果使用方法一的方式创建，则需要手动创建Templates文件夹。
2. 其中一个重要区别在代码部分，方法二将在head标签内把title标签包含在一个可编辑区域内，那么之后由模板创建的各个页面都可以设置不同的页面标题；而方法一则需要在代码视图手动输入可编辑区域的代码，将title标签至于可编辑区域中，否则以后创建的各个页面都只能是统一的一个页面标题，无法灵活设置。
3. 另一个重要区别体现在CSS的使用上。根据之上的区别，如果将模板中的CSS定义也置于可编辑区域，则由模板创建的页面的CSS定义也将带来多样的变化。
模板的其他操作
1. 从模板创建文件
菜单命令：[新建-模板中的页]，选择站点及其模板文件
2. 从当前模板中分离
菜单命令：[修改-模板-从模板中分离]
3. 将一般页面套用到模板
菜单命令：[修改-模板-应用模板到页]
4. 修改模板并更新站点
当已经利用模板创建了多个网页时，又想更改模板中的某些网页元素，可以直接在模板中更改，按Ctrl+S键保存，弹出[更新模板文件]对话框，单击[更新]按钮打开[更新页面]对话框自动更新，当保存模板的同时也更新了基于模板建立的所有网页。
模板中的区域类型
模板中有些区域是不能编辑的，称为锁定区；有些区域则是可以编辑的，称为可编辑区域。Dreamweaver提供了4种模板区域类型，即：可编辑区域、重复区域、可选区域和可编辑标签属性。
l 可编辑区域是基于模板的文档中的未锁定区域。
n 操作：插入工具栏[常用-可编辑区域]
n 或者菜单命令[插入记录-模板对象-可编辑区域]
n 或者组合键Ctrl+Alt+V。
l 重复区域（Repeating Region）是文档中重复显示的部分，属于不可编辑区域。在模板中定义重复区域，可以让用户在网页中创建可扩展的列表，并可保持模板中表格的设计不变。重复区域分为重复区和重复表（Repeating Table），可以将整个表格或者一个单元格定义为重复区域，但是不可以一次将多个单元格定义为重复区域；如果要在重复区域中编辑不同的内容，必须在重复区域中插入可编辑区域。
n 操作：首先在文档窗口中选择想要设置为重复区域的文本或内容，执行菜单命令[插入记录-模板对象-重复区域]
n 或者插入工具栏：[常用-重复区域]按钮
l 可选区域是在创建模板时定义的用于显示和隐藏特别标签的区域。在使用模板创建网页时，对于可选区域的内容（如文本、图片等），可以选择显示或者不显示。使用可选区域可以控制不一定在基于模板的文档中显示的内容。使用可选区域，在这些区域中用户无法编辑内容。可选区域的模板选项卡在单词if之后。根据模板中设置的条件，可以定义该区域在它们所创建的页面中是否可见。
n 操作：先在模板文档中选择需要将其设置为可编辑区域的文本或内容，然后单击插入工具栏[常用-模板下拉箭头按钮，从弹出的下拉菜单中选择[可选区域]命令]
n 设置：选中可选区域，在属性面板上点击“编辑”命令，在“高级”选项卡中为区域设置现有参数或者表达式，指定区域是否可见。
l 可编辑标签属性，是指允许基于模板的文档中可进行修改的属性的标签定义。可编辑标签属性提供4种类型：文本、布尔值、颜色和URL。利用可编辑标签属性这一功能，在设计模板的时候，就可以根据网站的总体规划，解除模板中某些页面元素的某个或某些属性的锁定，使之可以编辑，从而设计出风格大体一致但又有适当变化的一组网页来。
n 操作：首先在文档窗口中选择想要设置为可编辑标签属性的项目或内容，菜单命令[修改-模板-令属性可编辑]。
典型案例

框架及浮动框架
我们都知道一个网站是由几个甚至几十个网页组成的，如果网站中的所有网页是同一个布局，并且其中在相同的位置有相同的网页元素时，这时就可以使用另外一种方式来制作网站，那就是框架。
框架网页与表格网页不同，框架网页包括表格网页，正确地说框架网页是由多个表格网页组成而成。
框架网页由框架集和框架两个部分组成。框架集是在一个文档内定义一组框架结构的HTML网页，即框架集定义了页面显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性等。
单个框架是指在网页上定义的一个区域，主要指向将载入的网页源。
创建框架及框架属性设置的视频演示

创建框架及框架集的准备工作
1. 菜单命令：[查看-可视化助理-框架边框]，勾选“框架边框”，将框架的边框属性设置为可见。
2. 菜单命令：[窗口-框架]，或者组合键Shift+F2。
创建框架的命令
插入工具栏：[布局-框架]，选择框架样式。如果选择多个框架结构，将逐个按说选拆分框架。
或者菜单命令：[文件-新建-示例中的页-框架集]，选择框架集的样式。
或者菜单命令：[插入-HTML-框架]，从弹出的子菜单中选择框架样式。
框架的重要说明
1. 依据框架的拆分方式，可看出框架的层次是嵌套形式的，当有行列组合搭配的框架结构时，除总框架集外一定还内嵌着其他的框架集，故而在设置框架的行高或者列宽时总是相对于其所在的框架集内而进行设置。框窗总是按由上而下、由左至右的次序。
2. 框架集的特点使得在使用框架方式创建的网站在保存时最好使用菜单命令[文件-保存全部]，更为快捷和完整。
3. 由于框架的窗口结构，在为网页元素设置超级链接时增加了结构中的多个框架，所以当设置超级链接时必须指明链接目标，使之能在指定的窗口中打开。
4. 框架的属性设置中包含框架集和单个框架的属性设置，可借助框架工具面板，选择框架集或者框架进行属性设置；其中单个框架的属性设置除框架自身属性设置（文件源、滚动、是否调整大小、边界高度、边界宽度、边框、边框颜色）外，也和一般的基本的网页页面一般设置。
框架的操作
l 添加框架
菜单命令：[修改-框架集]，选择拆分框架的方法。
或者操作：将光标放置于网页编辑窗口的边缘或者父框架的边框上，拖动鼠标到拟增加的位置释放，即可增加框架结构。
l 删除框架
将光标放置于要删除的框架的边框之上，并且拖拽框架边框到父框架边框或者是网页编辑窗口边缘，即可删除框架结构。

框架标签及说明
标记
类型
译名或意义
作用
备注
<FRAMESET>
●
定义框架集
定义如何将窗口分割为框架，即定义了一系列的行或者列

<FRAME>
○
定义框架
定义单个框架，即定义了放置在框架中的HTML文档

<IFRAME>
○
浮动框架
在页面内插入浮动框架
IE
<NOFRAMES>
●
不支持框架
设定当浏览器不支持框架时的提示

<NOFRAMES>
当使用的浏览器版本太低不支持框架功能时，为了避免浏览时一片空白可使用<NOFRAMES>标签，<NOFRAMES>与</NOFRAMES>之间的内容就能出现在使用者的浏览器窗口。这些内容可以是提醒浏览者采用新的浏览器的字句，也可以是一个没有框架的网页或切换到没有框架的版本的链接均可。
FRAME标签的标准属性与可选属性
可选属性
值
描述
frameborder
· 0
· 1
规定是否显示框架周围的边框。
longdesc
URL
规定一个包含有关框架内容的长描述的页面。
marginheight
pixels
定义框架的上方和下方的边距。
marginwidth
pixels
定义框架的左侧和右侧的边距。
name
name
规定框架的名称。
noresize
noresize
规定无法调整框架的大小。
scrolling
· yes
· no
· auto
规定是否在框架中显示滚动条。
src
URL
规定在框架中显示的文档的 URL。

标准属性：id, class, title, style

FRAMESET标签的可选属性与标准属性
可选属性
值
描述
cols
· pixels
· %
· *
定义框架集中列的数目和尺寸。
rows
· pixels
· %
· *
定义框架集中行的数目和尺寸。
标准属性：id, class, title, style

浮动框架
浮动框架也叫内联框架、行内框架，标签<iframe>，是将一个HTML文件嵌入在另一个HTML中显示，即将HTML文件直接内嵌于一个HMTL中，与之文件内容相互融合，成为一个整体。
操作方法：
l 插入工具栏：[布局-浮动框架]
l 代码视图：在代码视图中输入<iframe></iframe>，并为<iframe>添加必要的属性，如src、width、height、target等。

浮动框架标签属性
值
描述
描述
align
· left
· right
· top
· middle
· bottom
不赞成使用。请使用样式代替。
规定如何根据周围的元素来对齐此框架。
frameborder
· 1
· 0
规定是否显示框架周围的边框。
height
· pixels
· %
规定 iframe 的高度。
longdesc
URL
规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight
pixels
定义 iframe 的顶部和底部的边距。
marginwidth
pixels
定义 iframe 的左侧和右侧的边距。
name
frame_name
规定 iframe 的名称。
sandbox
· ""
· allow-forms
· allow-same-origin
· allow-scripts
· allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。（HTML 5）
scrolling
· yes
· no
· auto
规定是否在 iframe 中显示滚动条。
seamless
seamless
规定 <iframe> 看上去像是包含文档的一部分。
（HTML 5）
src
URL
规定在 iframe 中显示的文档的 URL。
srcdoc
HTML_code
规定在 <iframe> 中显示的页面的 HTML 内容。（HTML 5）
width
· pixels
· %
定义 iframe 的宽度。
典型案例

层（AP DIV）
层与表格相同，都是在网页设计过程中用来放置页面元素的容器，在一个网页中可以由多个层存在，与表格之间最大的区别在于层可以重叠，可以决定其是否可见，可自定义各层之间的层次关系。在高版本中将层的名称用AP Div来描述。
层是一种新的网页元素定位技术，使用层可以自由控制网页元素的位置。层可以放置在页面中的任意位置，还可以控制某个层是显示在前面还是后面，是显示还是隐藏。
层是指存放用DIV和SPAN标签描述的HTML内容的容器。层可以包含文本、图像、表单、插件，甚至层内还可以包含其他层。
在Dreamweaver中，可以使用两种处理页面内容格式的层：CSS层和Netscape层。CSS层使用DIV和SPAN标签来定义，由W3C组织给出，是一种非常实用的网页元素定义规则，能够使网页制作者有效地定制、改善网页。Netscape层使用LAYER和ILAYER标签来确定层在页面中的位置，由Netscape公司定义。
创建层（AP DIV）及其属性设置的视频演示

创建层（AP DIV）的准备工作
1. 菜单命令：[编辑-首选参数-不可见元素]，勾选“AP元素的锚点”，使得层锚记可以在编辑窗口显示。
2. 菜单命令：[窗口-AP元素]，或者快捷键F2。

创建层（AP DIV）的命令
插入工具栏：[布局-绘制AP Div]，在编辑窗口拖动鼠标绘制层；或者按住按钮，从插入面板中拖到文档窗口中即可；当按下Ctrl键不放，在文档窗口中就可以连续画出不同的层。
菜单命令：[插入记录-布局对象-AP Div]
层的重要属性说明
1. 创建层的方法中，使用插入工具栏绘制的层使用的是绝对定位，即相对于浏览器的位置信息；而使用菜单命令插入的层使用的是相对定位，位置相对于包含层的容器中，容器可以是表格、Div等。
2. 一个AP Div瞄记代表一个层，可以通过剪切、复制、粘贴层瞄记来完成对层的剪切、复制和粘贴层。
3. 使用[AP元素]面板可以管理文档中的层，可以防止重叠，更改其可见性，允许嵌套，以及选择一个或多个层。
4. [AP元素]面板中的“Z”用数字描述，表明层的顺序，值得增大表明其越位于页面顶层，是后建立的层；故可以修改层的“Z”值，使多个层位于同一层次；在面板中，选中一个层并且按下Ctrl键，然后将其拖动到要嵌入的层的位置，可以将其变为该层的嵌套层。
5. 层会随着窗口大小、分辨率等原因发生错位的现象，可以借助修改成的相关属性来保证其位置的稳定。
l 尽量使用容器放置层，如表格；并使用菜单命令插入层，根据需要在属性面板中调整层的大小、颜色等。
l 如果使用的是插入工具栏绘制的层，则在代码视图修改成的属性：1）删除层的left、top属性；2）增加margin-top、margin-left属性，需要说明的是除了在Dreamweaver8 版本外，高版本的Dreamweaver中的这两个属性的设置将在对应层的CSS描述部分修改，而不再在行内style中修改；3）position属性默认就是absolute。
6. 层的嵌套并不是单指外观上的一层位于另一层内，其本质是一层的HTML代码嵌套在另一层的HTML代码之内；故在视觉上嵌套的层会出现跟随移动效果一致但却不在同一位置。
7. 几个需要单独说明的属性：
名称
功能描述
层编号
为层指定一个名称来标识层。层的名称只能包含英文字母和数字，不能使用特殊字符，并且不能以数字开头
Z轴
指定层的叠放顺序，值较大的层位于较小的层之上，Z轴值可正可负，也可以为零
可见性
Default
默认，不指定可见性属性。当未指定可见性时，大多数浏览器都会默认为继承
Inherit
继承，使用该层父级的可见性属性
Visible
可见，显示该层的内容，而不管父级的值是什么
Hidden
隐藏，隐藏层的内容，而不管父级的值是什么
类
可将CSS规则定义应用于对象
溢出
可见
扩展层的大小，时溢出的部分也可以显示，层将向右下方扩展
隐藏
保持层的大小，并剪切去与层大小不符的内容，不显示滚动条
滚动条
给层添加滚动条，不管内容是否超出层的大小。特别是通过提供滚动条来避免在动态环境中显示和不显示滚动条导致的混乱
自动
在层的内容超过边界时自动显示滚动条
剪辑
定义层的可视区域，在左、右、上、下文本框中分别输入一个值来指定距层边界的距离
层（AP DIV）的其他操作技巧
技巧1：同时修改多个层的属性。按下Shift键，然后在页面中单击要选择的层，或者在层面板中单击要选择的层，即可选中多个层。同时属性面板将显示这几个层的属性交集，在属性面板中所作的任何修改，都会作用于所选中的层。
技巧2：对齐多个层。使用层对齐命令即菜单命令：[修改-排列顺序]，选择一种对齐方式即可。该操作可以将一个或多个层与最后选定的层边界对齐。在对齐层时，没有选中的子层因为要保持与父层的相对位置而随着移动。
技巧3：巧用网格线。菜单命令：[查看-网格-显示网格]，使用对齐功能，则在移动层或者调整层的大小时，层会自动定位在最近的网格位置。菜单命令：[查看-网格-靠齐到网格]命令，勾选，此时选定并拖动一个层，释放鼠标后，如果层与网格靠得很近，则会自动跳至最近的网格位置与之对齐，
“网格设置”对话框中的选项及选项作用
选项
作用
颜色
指定网格格线的颜色
显示网格
设置网格的可见性，其功能与执行：查看——网格——显示网格
靠齐到网格
用于打开或关闭对齐功能。其功能与执行：查看——网格——靠齐到网格命令相同
间隔
设置网格线之间的距离。输入一个数字，然后在其后的下拉列表中选择像素、英寸或厘米作为单位
显示
指定网格的显示形式是实线还是虚线

技巧4:层与表格之间的转换。可以用层快速设计一个页面，在将层转换为表格，以适合不支持层的浏览器；还可以通过对层与表格的相互转换优化页面设计。菜单命令：[修改-转换-将AP Div到表格/或者将表格转到AP Div]
“转换层为表格”对话框中的选项及作用
选项
作用
表格布局
最精确
为每个层创建一个单元格，并附加保留层之间的空间所需的任何单元格
最小：合并空白单元
指定如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择此选项，表中将包含较少的空行和空列，但可能不与布局精确匹配
使用透明GIF
用透明的GIF填充表