第十二章 综合实例1(创建网页的基本过程)

执行“窗口”->“框架”命令，弹出“框架” 面板如图。从框架面板可知，系统对左右框架 生成命名。
左框架名为：leftFrame，右框架名为：mainF rame，也可以通过框架属性面板对框架重新命 名。创建超级链接时，要依据它正确控制指向 的页面。
七、框架技术
左边固定的框架
七、框架技术
3．保存框架
修改文字属性。选中文字，在文字属性面板设
置即可。修改文字颜色时，在属性面板中，单 击颜色选择图标，在弹出的颜色选择器中用滴 管选取相应的颜色即可。
文字属性设置面板
四、用表格定位网页元素
使用表格不仅可以清晰地显示列表的数据，而 且可用于网页的定位上，尤其是对于使用非IE 浏览器来说，使用表格定位的网页比使用图层
后面“#FFFFFF”是以16进制形式显示的RG B色值。
二、设置页面属性
4．文字的颜色 假如不对背景及文字的颜色进行设置（此时R GB色值显示为空），那么浏览器在显示页面 的时候，就会采用系统的默认设置。 但因为不同的系统的设置都可能会有所区别， 这样就会导致页面的显示效果也是千差万别。 因此，为了更好地让页面体现出你的设计思想， 别忘记设定页面的背景颜色及文字颜色。
在标准视图下，可以像常规一样，插入表格、
图层；切换到布局视图时，如图。
八、用层定位网页元素
标准视图
布局视图
八、用层定位网页元素
利用布局视图工具排版一个新页面。 新建一个页面，单击按钮在页面上画出表格， 再单击按钮在表格中画出单元格。其中表格
以绿色框表示，单元格以蓝色表示，未确定
四、用表格定位网页元素
（二）表格的基本使用
1．表格的属性设置
选中表格，在Dreamweaver下方的表格属性面 板中对整个表格的属性进行设置。通常选取整 个表格常用的方法有四种：
四、用表格定位网页元素
（1）把鼠标移动到表格右边界外侧，按下鼠标 左键向左拖拽，可快速选取整个表格。 （2）执行菜单“修改”->“表格”->“选择表 格”命令，选择整个表格。 （3）在单元格中右击鼠标，从弹出右键快捷菜 单中选择“表格”->“选择表格”命令， 选取整个表格。 （4）用鼠标单击任一个单元格，接着按两下 “Ctrl＋A”组合按钮选取整个表格。
⑤背景图像（I）。层的背景图；
⑥显示（V）。层的显示状态，其中的隐藏是将 层隐藏，处于不可见状态； ⑦背景颜色（C）。层的背景颜色；
⑧标签（A）。层使用的代码方式，一般使用默 认的DIV即可； ⑨溢出。
八、用层定位网页元素
（二）用布局表格排版 利用布局按钮能够更加直接方便地对页面布 局进行编排。在布局工具栏中选中布局按钮，
（五）文件下载功能的实现 当链接到浏览器无法打开的文件，如
exe、zip等文件，那么浏览者在点击这个链接 时，就会弹出对话框，询问将文件保存到硬盘 的什么地方，这就实现了文件下载的功能。
七、框架技术
在浏览网页时，常常会遇到这样的一种框架导 航结构。即左边是超级链接，单击链接后，其 指向的目标页面出现在右面。或者单击上边的
1．新建框架
执行“文件”->“新建”命令，在弹出的 “新建文档”对话框中，选框架集：左侧固 定。或在“插入栏”->“布局”->选“框架： 左框架” 。
Dreamweaver生成一个空白的框架页面。
七、框架技术
新建文档对话框
七、框架技术
插入框架：左侧框架
七、框架技术
空白的框架页面
七、框架技术
2．生成框架
其进行诸如表格线条的颜色、表格的背景色、
单元格的对齐方式等参数进行调整。 也可以打开表格的属性面板，对表格的属性进 行设置。
四、用表格定位网页元素
表格的宽度和高度可以通过浏览器窗口百分比
或者使用绝对像素值来定义，比如设置宽度为
窗口宽度的60％，那么当浏览器窗口大小变化
的时候表格的宽度也随之变化；如果设置宽度 为400像素，那么无论浏览器窗口大小为多少， 表格的宽度都不会变化。
四、用表格定位网页元素
表格属性设置窗口
单元格属性面板
五、图片的使用
只有文字的网页太单调，通常为了使页面更加 生动，图文并茂，常常用图片来美化页面，最 简单直接的方法是在网页上添加图片。
Dreamweaver支持JPG、Gif和DNG格式的图
像文件。
五、图片的使用
（一）插入图片
在网页中插入图片常用的方法有三种：
八、用层定位网页元素
用层定位网页元素
八、用层定位网页元素
层属性面板
八、用层定位网页元素
在属性面板中各选项的含义是： ①层编号。层的名称，用于识别不同的层；
②左（L）上（T）。层的位置，左是距页面左
边界的距离，上是距页面上边界的距离；
③宽（W），高（H）。层的宽和高；
④轴（Z）。层的Z轴顺序；
八、用层定位网页元素
前面介绍的图片链接，一张图只能对应一个链 接，如果一张图要对应多个链接就要用到属性 面板的“地图”选项。
六、超级链接
选择相应的图形按钮，在图片上画出不同的区
域即可创建矩形热区、圆形热区或多边形热区。
通过热区，我们可以在一个图片上做多个链接， 分别链接到不同的页面。
六、超级链接
图片属性面板中的地图选项
表格属性设置窗口
三、在网页中使用文本
打开一个网页文件，进入Dreamweaver页面编 辑设计视图状态。我们可以像在其他的文字编 辑程序中一样，直接输入文字。 在一般情况下，编辑器默认左对齐，光标在左 上角闪烁，光标位置就是插入点的位置。
三、在网页中使用文本
表格属性设置窗口
三、在网页中使用文本
始计算，而“站点根目录”是从根目录开始计
算，使用“站点根目录”模式的链接，在本地
硬盘直接打开页面浏览通常会出错，但在Drea mweaver的预览模式和上传服务器后，都不会 有问题。
六、超级链接
超级链接的选择文件对话框
六、超级链接
选择文件对话框中的路径
六、超级链接
（二）图片链接
某些图片，在加上链接后，会出现一个蓝色的 边框，要将边框去掉，将边框设为0即可。 （三）热区链接
链接，指向的目标页面出现在下面。这就利用
了Dreamweaver的框架技术。
七、框架技术
创建左右结构的框架。这种结构是由三个网页 文件组成的。 外部的框架是一个文件，用index.htm命名。框 架中左边命名为A，指向的是一个网页A.htm； 右边命名为B，指向的是一个网页B.htm。
七、框架技术
标题不是网页必要的元素，但最好为每一页都 设定一个标题，这既便于访问者的浏览，也有 助于在网页编辑的过程中区分不同的页面。
二、设置页面属性
2．背景图像
在背景图像的文本输入栏，点击“浏览”按
钮，可以为网页添加背景图像。
3．背景颜色
利用背景颜色可为背景添加颜色。默认为白
色，点击颜色选择图标可以选择其他的颜色。
至此三个页面保存完毕。
七、框架技术
保存右边框架结构
七、框架技术
4．制作框架的链接 实现单击左边的超级链接，对应的页面出现在 右边。在左边的页面中创建超级链接，指向一
个已经存在的页面。注意做好链接以后，要在
目标栏中设置为mainFrame。
七、框架技术
框架设置
片文件夹，选定需要插入的图像文件，用鼠
标拖动至工作区合适位置即可。
五、图片的使用
插入栏下拉列表
五、图片的使用
根 目 录 下 的 图 片 文 件 夹
五、图片的使用
（二）图片的处理 选中要处理的图片，打开属性面板（Ctrl+F3 如图。其各项属性如下：①图片的缩略图及图 片的大小；②源文件是指图片所在的位置；③ 链接是指该图片对应的超链接；④对齐是指图 片的对齐方式；⑤替代是指是图片的说明；⑥ 边框是指图片的边框宽度；⑦地图是指用于在 一个图片上的不同区域制作多个不同链接。
五、图片的使用
图片属性面板
六、超级链接
超级链接（Hyperlink），简称超链接，是页 面与页面之间一个单向的关联关系。通过点击 链接，可以从一个页面跳到另一个页面。可以 利用文字、图片等来建立链接关系。 超链接一般有下面几类：内部链接即在同一网 站内的链接；外部链接即不同网站之间的链接； 锚点链接即同一网页或不同网页的指定位置的 链接；E-mail链接即电子邮件链接；映像图链 接。
选择“文件”->“保存全部”命令，系统弹出 对话框。这时，保存的是一个框架结构文件。 我们按照惯例都命名为index.htm。
保存的时候如果虚线框笼罩的是周围一圈就是 保存框架结构。
七、框架技术
保存整个框架结构
七、框架技术
虚线笼罩在右边就是保存框架中右边网页。虚 线笼罩在左边就是保存框架中左边的网页。
设置完毕后，保存全部，按F12预览网页。链 接指向的页面出现在右边框架中。 重复以上步骤，把左框架所有的链接做完，一 个简单的网站导航结构创建完成。
八、用层定位网页元素
（—）层的插入
利用层也可以对网页元素进行定位。
单击“插入”->“布局对象”->“层”选项， 光标会成为一个十字，在编辑窗口上拖动，就 可以创建出一个层。 在层上可以输入绝大部分的网页元素，如图片、 文字和表格等。选择一个层后，对应的属性面 板如图。
目标选项中的下拉列表
六、超级链接
如果要链接到网站内的文件，可以点击右边的 图标，出现如图所示的对话框。 若将文字链接到“xuexi.htm”文件。特别注意 的是最底面的“相对于”的选项，意思是选择 相对路径的形式，默认是“文档”，也可以选 择“站点根目录”。
六、超级链接
区别在于，“文档”是指相对路径是从本页开
六、超级链接
（四）E-mail地址链接 链接到一个E-mail地址，则在“链接”处填