Dreamweaver网页设计案例教程 沈大林 等 第4章 框架、层与网页布局新.pptVIP

第4章 框架、层与网页布局 4.1 【案例23】“中国名胜”网页 4.2 【案例24】“中国名胜—十三陵”网页 4.3 【案例25】“不同亮度的图像”网页 4.4 【案例26】“旅游行在线”网页 4.5 【案例27】“教育发展中心”网页 4.1 【案例23】“中国名胜”网页 1．框架网页和创建框架 （1）框架网页特点：框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的HTML文件。因此，框架可以实现在一个网页内显示多个HTML文件。对于一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构也是一个HTML文件，因此该框架网页是一个HTML文件集，它有n+1个HTML文件。 （2）创建框架的常用方法：在网页中创建框架的常用方法可以有以下3种。 单击“文件”→“新建”菜单命令，调出“新建文档”对话框。单击该对话框左边 “类别”栏中的“框架集”选项，再单击选中该对话框右边“框架集”栏内的一种框架选项，然后单击【创建】按钮，即可创建有框架的网页。 单击“插入”（布局）栏内“框架”快捷菜单中的一个菜单命令，即可在页面内设置出相应的框架。 单击“修改”→“框架集”→“×××”菜单命令或单击“插入”→“HTML”→“框架”→“×××”菜单命令，也可以创建框架。 2．框架观察器 单击“窗口”→“框架”菜单命令，调出“框架”面板，也叫框架观察器，如图所示。如果光标在框架内，则框架观察器中对应框架内的文字变为黑色，如图所示。 框架观察器的作用是显示出框架网页的框架结构（也叫分栏结构）。单击某一个分栏框架（选中的框架边框呈黑色），即可选中该分栏框架，同时“属性”栏变为该分栏框架“属性”栏。如果单击框架的外框线，可以选中整个框架（即框架集），如图所示，同时“属性”栏变为框架集“属性”栏。 3．增减框架个数 在创建框架后，要增加或删除框架的个数，首先应单击框架内部，再单击“查看”→“可视化助理”→“框架边框”菜单选按钮，使该菜单选按钮左边有，然后可采用如下方法进行。 （1）增加新框架：将鼠标指针移到框架的四周边缘处，当鼠标指针为“?”或“?”形状时，向鼠标指针箭头指示的方向向内拖曳鼠标，即可在水平或垂直方向增加一个框架。 （2）在框架区域内增加新框架：单击某一个框架区域内部，使光标在此区域内出现，然后按照上述方法即可在框架区域内增加新框架。 （3）调整框架的大小：用鼠标拖曳框架线，即可调整框架的大小。 （4）删除框架：用鼠标拖曳框架线，一直拖曳到另一条框架线或边框处，即可删除框架。 4．在框架内插入HTML文件 （1）单击网页分栏框架的某一个分栏框架窗口内部，使光标在该分栏框架窗口内出现。再像在没有框架的网页页面内输入文字和导入对象那样，在选中的分栏框架窗口内输入文字和导入对象。然后将该分栏框架中的内容保存为网页文件。 （2）按住【Alt】键，单击一个框架分栏内部，使光标出现在该分栏框架窗口内，或者单击“框架”面板中的分栏框架内部，选中相应的分栏框架。然后，单击其“属性”栏中【源文件】按钮，调出“选择HTML文件”对话框。 利用该对话框，选择文件夹、要加载的文件，在“相对于”下拉列表框中选择“站点根目录”选项后，“URL”文本框中会给出选中文件相对于站点文件夹的相对路径和文件名称；选择“文档”选项后，“URL”文本框中会给出选中文件的名称。然后，单击【确定】按钮，即可完成在分栏框架内插入HTML文件的任务。 （3）也可以单击“文件”→“在框架中打开”菜单命令，调出“选择HTML文件”对话框。利用它可将外部的HTML文件加载到选定的分栏框架窗口内。 5．框架集的“属性”栏 单击框架的外边框后，可使“属性”栏变为框架集“属性”栏。改变框架集属性需要通过框架集“属性”栏来完成。 （1）“边框”列表框：用来确定是否要边框。选“是”选项是保留边框；选“否”选项是不保留边框；选“默认”选项是采用默认状态，通常是要边框。 （2）“边框颜色”栏：用来确定边框的颜色。单击按钮，可调出颜色板，利用它可确定边框的颜色，也可在文本框中直接输入颜色数据。 （3）“边框宽度”文本框：用来输入边框的宽度数值，其单位是像素。如果在 该文本框内输入0，则没有边框。如果“查看”→“框架边框”菜单选按钮被选中，则网页页面编辑窗口内会显示辅助的边框线（它不会在浏览器中显示出来）。 （4）“值”文本框：用来确定网页左边分栏的宽度或上边分栏的高度。 （5）“单位”下拉列表框：用来选择“值”文本框内数据的单位，单位有“像素”等。 6．分栏框架“属性”栏 按住【Alt】键，单击分栏框架的内部后，可使“属性”栏变为分栏框架“属性”栏，。分栏框架属性的改变需要通过分栏框架“属性”栏来完成。分栏框架的框