Dreamweaver高级操作jian

《Dreamweaver高级操作jian》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第四章Dreamweaver高级操作本章内容4.1框架4.2层4.3模板与库4.4行为与时间轴4.1框架框架技术可以将浏览器显示空间分割成几个部分，每个部分可以独立显示不同的网页，对于整个网页设计的整体性的保持也是有利的；但它的缺陷又同样明显，对于不支持框架结构的浏览器，页面信息不能显示。4.1.1框架的基本操作1．创建框架和框架集2．选择框架和框架集3．设置框架和框架集的属性4．保存框架和框架集5．框架中的链接4.1.2框架的应用1．设计目标制作一个使用框架排版的网页，页面一共由三个部分组成：上方的网站标志区、左边的导航区及右边的内容区。在浏览网页时，单击

2、左边区域的某个文本链接，则对应的链接内容就显示在右边区域。自始至终，上方的网站标志和左边的导航栏仍然保留在屏幕上2．页面分析及准备工作网页本身是一个框架结构，所以应用“上方及左侧嵌套”结构。准备一个网页3．制作步骤（1）新建一个网页启动DreamweaverCS3，选择“文件”

3、“新建”命令，在本地站点下建一个空白网页文档，命名为frameset.htm。（2）插入框架集在插入框架集以前，首先选择“窗口”

4、“框架”命令或按【Shift+F2】组合键，打开“框架”面板。选择“插入”

5、“HTML”

6、“框架”命令，在弹出的菜单中选择“上方及左侧嵌套”命令。在文档中

7、出现三个区域的框架集，顶部框架的名称为ftop，左侧框架的名称为fleft，主框架的名称为fmain。（3）选择并设置框架集首先，选择该面板中的最外层边框，选择整个框架集。然后，在其“属性”面板中进行设置。边框设置为“是”，边框颜色设置为#3399FF，边框宽度设置为2，单位设置为像素，行值设置为120。然后，选择该面板包含左右结构的框架集。然后在其属性面板中设置。其中，边框设置为“是”，边框颜色设置为#3399FF，边框宽度设置为2，单位设置为像素，列值设为160，如图4-18所示。（4）保存框架文件选择“文件”

8、“全部”命令，保存框架和框架集。保存时被虚

9、线框包围的框架就是正在保存的框架文件。保存上方框架文件，命名为ftop.htm，接着保存主框架fmain.htm、左侧框架fleft.htm。（5）制作上方框架页面将光标定位到上方框架，设置其属性。设置文字字体为“楷体”，文字大小为64像素，颜色为#FFCC00，输入信息“网页设计与制作”，页面对齐方式为居中对齐。如果没有重新保存全部页面，就会弹出警告。单击“确定”按钮，然后保存所有的框架文件，再打开浏览器浏览即可。（6）制作左边框架页面将光标定位在左边框架，设置页面对齐方式为居中对齐，插入一个8行1列，宽度为130像素，边框宽度为0的表格。该表格用于布局左

10、边的导航文本。选中所有的表格单元格，设置单元格水平方向和垂直方向的对齐方式均为居中对齐，字体为“楷体”，大小为28像素，颜色为#CCFF66，然后输入导航文本。（7）制作主框架页面将光标定位在主框架，设置页面对齐方式为居中对齐。可以展现制作好主框架网页fmain.htm的内容，也可以将其他页面中制作好的内容粘贴过来，（8）制作导航文字和主框架之间的链接在建立导航文字和主框架之间的链接之前，首先应该明确链接目标的位置。选择左边框架中的“简介”文字，在“属性”面板中设置链接页面的地址为fmain.htm，目标为主框架mainFrame。其他导航文字链接的设置方法

11、与上面的方法稍有不同，链接的页面是已经做好的页面。先将以前已经设计好的页面文件复制到当前站点根文件夹下，再将每个站点涉及到的图片文件复制到当前站点的image文件夹下，仍然保持链接的相对路径。这里以“设计基础”为例，选择左边框架中的“基本元素”导航文字，在“属性”面板中设置链接页面的地址为已经制作好的一个网页——页设计基础.htm，目标为主框架mainFrame（9）保存并预览网页选择“文件”

12、“保存全部”命令，将站点内所有的页面全部保存。按【F2】键预览验证网页。4.2层层（Layer）是一种HTML页面元素，用户可以将其定位在页面上的任意位置。层可以包含

13、文本、图像或其他HTML文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。4.2.1层的基本操作1．创建层2．激活和选中层3．调整、移动和对齐层4．设置层的属性5．层面板的使用（1）选择层及更改层名称（2）显示/隐藏层（3）层重叠4.2.2层的应用1．设计目标页面的中间是一组精美的图片，互相叠放。左右两边有四个字：环球旅行。2．页面分析和准备工作本例中的相互重叠的效果，使用层可以轻松完成。页面由中间的四个图片层和两边的四个文字层组成，中间的四个图片层可以改变层的叠放次序；两边的四个文字层可以为层添加背景、插入文字。准备的素材，包

14、括四张图片：比利时王宫.jpg，意大利佛罗伦萨.jp