Dreamweaver_CS4_课件与自学教程 6共7.ppt

1、图5-60 【属性】面板(2),【框架名称】：用于定义所选框架的名称，该名称用于创建超链接。 【源文件】：用于输入或显示将在该框架中显示的网页的URL地址，也可以利用和图标选择网页。 【滚动】：用于设置是否在框架中显示滚动条。选择“是”选项时将在框架中显示滚动条；选择“否”选项时，则不显示滚动条；选择“自动”选项时将根据需要决定是否显示滚动条，当网页内容超出框架范围时将显示滚动条，不超出范围时将不显示滚动条；选择“默认”选项时，将使用浏览器的默认设置，多数浏览器的默认设置为“自动”。,选择【不能调整大小】复选框时，浏览者在浏览页面时不能通过拖曳框架边框改变框架大小。 【边框】：用于设置是否显示

2、框架的边框。选择“是”选项时，将显示框架的边框；选择“否”选项时，将隐藏框架的边框；选择“默认”选项时，将显示默认的框架边框。 【边框颜色】：用于设置框架边框的颜色。该颜色将覆盖框架集的边框颜色。 【边界宽度】：用于设置框架中的内容距框架左右边界之间的空白宽度。 【边界高度】：用于设置框架中的内容距框架上下边界之间的空白宽度。,4保存框架 在预览网页之前，需要先保存框架和框架集文件。如果一个网页中有四个框架，则保存框架时将产生五个HTML文件，其中每个框架都会产生一个HTML 文件，框架集将单独产生另一个HTML文件。保存框架的操作步骤如下：1) 单击菜单栏中的【文件】【保存全部】命令，将弹出

3、【另存为】对话框，如图5-61所示。,图5-61 【另存为】对话框,2) 在对话框中选择保存HTML文件的位置和文件的保存类型。3) 为HTML文件命名。该对话框中默认的名称为“Untitled Frameset-5.html”，提示用户现在保存的是框架集文件。4) 单击按钮，将弹出另一个【另存为】对话框。该对话框中默认的名称为“Untitled-5”，提示用户现在保存的是所选框架文件。5) 继续单击按钮，在弹出的【另存为】对话框中分别为框架文件命名，可以保存其它的框架文件。,5使用超链接在Dreamweaver CS4中可以使用超链接控制框架内容的显示，而这一操作的关键在于正确指定显示网页的

4、目标窗口或框架。例如，如果将导航条放在左侧框架中，要使与其链接的网页内容显示在主框架中，就必须为导航条中的链接指定目标框架为主框架，这样，当用户单击左侧框架中的导航条时，与其链接的网页内容将在主框架中显示。,使用超链接的操作步骤如下：1) 选择框架中要建立超链接的文本或其它对象。2) 在【属性】面板的【链接】文本框中输入要链接的网页的URL地址，也可以利用和图标选择网页文件。3) 在【属性】面板的【目标】选项中选择用于显示链接网页的目标窗口或框架。,3) 在【属性】面板的【目标】选项中选择用于显示链接网页的目标窗口或框架。选择“_blank”选项，表示在新的浏览器窗口中打开链接的网页。 选择“

5、_parent”选项，表示在当前框架的父级框架中打开链接网页。 选择“_self”选项，表示在当前框架中打开链接的网页。,选择“_top”选项，表示在当前网页的最顶层框架集中打开链接的网页。 选择“mainFrame”选项，表示在主框架中打开链接的网页。 选择“leftFrame”选项，表示在左框架中打开链接的网页。 选择“topFrame”选项，表示在上面的框架中打开链接的网页。,5.5.3 使用CSS+DIVCSS是层叠样式表的简称，它是一组格式设置规则，用于控制网页内容的外观。使用CSS可以非常灵活地控制页面的外观，可以控制许多文本属性，如字体、大小、粗体、下划线、文本阴影等，还可以确保

6、在多个浏览器中以更加一致的方式处理页面外观。除此之外，CSS还可以控制网页中块级别元素的格式与定位，这将涉及到DIV标签。DIV标签是用来定义网页内容中的逻辑区域的标签，使用DIV标签可以将内容居中、创建列效果、创建不同的颜色区域等，另外还可以绝对定位，这时的DIV标签视为AP元素。AP Div元素与以前版本中的图层有一定的相似性，可以用于绝对定位网页元素。,1插入AP DivAP元素通常是绝对定位的Div标签，它是分配有绝对位置的HTML网页元素，在Dreamweaver CS4中可以轻松地创建AP Div。在网页中插入AP Div的操作比较简单，只需在【插入】工具栏的【布局】标签中单击按钮

7、，然后按住鼠标左键(此时光标变为“+”形状)在编辑窗口中拖曳即可。另外，如果按住按钮将其拖曳到编辑窗口中，或者单击菜单栏中的【插入】【布局对象】【AP Div】命令，则可以在编辑窗口中插入固定大小的AP元素。,在创建的AP Div中定位光标，即可向其中添加网页元素，如图片、动画、文本、表格等内容。默认情况下，Dreamweaver 中不显示AP Div锚点。如果读者希望创建AP Div后能够看到其锚点，可以单击菜单栏中的【编辑】【首选参数】命令，在弹出的【首选参数】对话框的【分类】列表中单击“不可见元素”选项，选择其中的【AP元素的锚点】复选框即可，如图5-62所示。,图5-62 【首选参数】

8、对话框,2操作AP Div在编辑窗口中创建了多个AP Div后，只有新创建的AP Div处于激活状态：其左上角有一个控制柄，同时边框呈蓝色高亮显示，如图5-63所示，而未被激活的AP Div边框为灰色。 如果要对其它的AP Div进行操作，必须先激活它或使其处于选择状态：单击AP Div内的任何位置，可以激活它；单击AP Div的边框或锚点，可以选择AP Div元素，被选择的AP Div边框上含有八个控制点，如图5-64所示。,图5-63 激活状态的AP Div,图5-64 被选择的AP Div,激活或选择AP Div后，可以对其进行如下操作： 激活AP Div后，可以对其中的内容进行编辑操作

9、。 选择AP Div后，按住控制柄拖曳鼠标，可以移动AP Div的位置。另外，利用键盘上的方向键也可以移动它：每按一次方向键，可以使其向相应的方向移动一个像素；如果按住Shift键的同时按方向键，每次可以移动一个网格单位。,选择AP Div后，按住边框上的控制点拖曳鼠标，可以调整其大小。按住Ctrl键的同时每按一次方向键，可以向相应的方向调整一个像素；如果按住Ctrl+Shift键的同时按方向键，则每次可以调整一个网格单位。在Dreamweaver CS4中，如果要对AP Div实现精确定位，需要先在编辑窗口中显示网格，然后移动AP Div中的对象，使其对齐网格。单击菜单栏中的【查看】【网格设

10、置】命令，可以显示或编辑网格，如图5-65所示。,图5-65 【网格设置】子菜单,选择【显示网格】命令，可以在编辑窗口中显示网格。 选择【靠齐到网格】命令，可以使要移动的AP Div自动吸附到网格线上。 选择【网格设置】命令，可以打开【网格设置】对话框，如图5-66所示。在该对话框中可以设置网格线的颜色、网格线的间隔大小以及网格线的显示方式等选项。,图5-66 【网格设置】对话框,3设置AP Div的属性在编辑窗口中选择了AP Div以后，可以在【属性】面板中设置其相关属性，如图5-67所示。,图5-67 【属性】面板,【CSS-P元素】：用于为选定的AP元素指定一个ID，便于程序调用。 【左

11、】：用于定义AP元素左边框距窗口左边的距离。如果嵌套，则指距父AP元素左边框的距离。 【上】：用于定义AP元素上边框距编辑窗口顶边的距离。如果嵌套，则指距父AP元素上边框的距离。 【宽】和【高】：用于设置AP元素的宽度和高度。 【Z轴】：用于设置AP元素在Z轴上的叠放顺序。,【可见性】：用于设置AP元素的显示或隐藏状态。选择“inherit(继承)”选项，当前AP元素使用父AP元素的可见性属性；选择“visible(可见)”选项，则无论父AP元素是否可见，当前AP元素都可见；选择“hidden(隐藏)”选项，则无论父AP元素是否可见，该AP元素都隐藏；选择“default(默认)”选项，则使用

12、浏览器的默认设置。 【背景图像】：用于为AP元素选择一个背景图像。 【背景颜色】：用于为AP元素选择一种背景颜色。,【溢出】：用于设置AP 元素的内容溢出时的处理方式。选择“visible(可见溢出)”选项时，当AP元素中的内容超出了范围，将自动向右下方扩展，使溢出的部分也可以在页面中显示；选择“hidden(隐藏溢出)”选项时，则不改变AP元素的大小，并隐藏溢出部分；选择“scroll(滚动溢出)”选项时，将保持AP元素的大小不变，但出现水平和垂直滚动条；选择“auto(自动溢出)”选项时，可以根据AP元素的内容是否溢出自动显示滚动条。当内容溢出时，将显示滚动条，反之则不显示。 【剪辑】：用于设置AP元素的可见区域。,4【AP元素】面板利用系统提供的【AP元素】面板，可以对AP元素进行管理，例如显示或隐藏、改变叠放顺序、删除等。单击菜单栏中的【窗口】【AP元素】命令，可以打开【AP元素】面板，如图5-68所示。【AP元素】面板中显示了网页中的所有A