Dreamweaver教程教案.ppt

重点知识 框架的定义 框架集的定义 创建框架集 设置框架集的的属性 用框架集创建页面 四、框架和框架集 4.1 认识框架和框架集 行和列：框架集与表格很像，也是由列和行组成的。列和行的属性是用逗号隔开的数值列表。数值的数目表示列或行的数目，但数值本身确定了列或行的大小。 设置框架大小：列宽度和行高度可以设置为以像素为单位的绝对尺寸，或者用整个屏幕的百分比来表示。HTML框架也支持一个指定与其它列或行相对大小的属性。 4.2 框架的基本操作 创建框架和框架集：在Dreamweaver 中，执行下列操作之一就可以创建框架集： 使用【文件】/【新建】命令创建一个新的空框架集，然后为框架添加内容。 从一个现有文档开始并使用拖放方式围绕该文档拖拽框架。 从一个现有文档开始并使用菜单命令或者【插入】栏，为该文档应用几种常用框架集布局之一。 创建预定义框架集：Dreamweaver CS3包含了用于最常用框架集配置的框架对象。在【插入】栏中的【布局】类别中可以找到框架菜单，通过该菜单能够使用框架对象。 选择框架和框架集 拆分框架：使用菜单拆分现有框架；使用鼠标拆分框架。 删除一个框架：击框架边框并拖动它到封装框架（或父框架）的边框中即可。 调整框架大小： 设置框架集和框架属性：Dreamweaver 中建立的框架集都具有边框，并且在浏览器中查看时这些边框都是不可见的。很多情况下需要将其边框显示出来，并且需要改变其颜色和宽度。此时，需要在框架【属性】面板中进行处理。 5.1 创建层 创建层有以下几种方法。 插入层：把光标置于想插入层的位置，然后从菜单栏中选择【插入记录】/【层】命令。 拖放层：将层图标从【插入】面板中拖放到【文档】窗口 。 在【插入】面板中的【布局】栏中单击按钮，在【文档】窗口中拖动鼠标即可绘制出一个图层 。 五、层 5.2 层的基本操作 当处理页面布局时，可以对层进行选择、移动、大小调整和对齐等操作。这些操作都是在【AP 元素】面板中完成的。 选定层：如果同时选择了多层，可以进行对齐层的操作，使它们的宽度和高度相同 调整层大小：可以同时调整多个层的代销以使它们具有相同的宽度和高度。 调整一个层的大小 同时调整多个层的大小 对齐层：对齐层的边缘；将层靠齐到网格 5.3 层与表格 层和表格都可以用来在页面中定位其他对象，Dreamweaver 为用户提供了转换层为表格和转换表格为层的功能，同时还支持层的溢出排版。 将层转换为表格：在浏览器大小有所变化或显示器的分辨率变化时，层的位置都有所变动。这些都不是预期的效果，此时就需要将层与表格进行必要的转换。 将层转换为表格：表格与层的相互转换只适合于布局排版比较简单的页面。 移动层：图层的移动有以下几种操作方法： 如果是通过拖定控制柄来移动层，那么可以拖动最后一个选定的层（黑色突出显示）的控制柄。 如果希望一次移动一个像素，可以使用方向键进行移动。按住Shift键的同时按方向键可以更快地移动层。 可以在【属性】面板中直接定位到想要的位置上，在【属性】面板中的【左】和【上】连个文本框中输入自己想要的值。 六、认识CSS CSS层叠样式表的基本概念 选择符：任何HTML的元素都可以成为CSS层叠样式表的选择符，选择符是指向特别样式的元素。 类选择符 属性：一个属性被指定到选择符是为了使用它的样式，属性可以包括颜色、边界和字体等 值：声明的值是一个属性接受的指定。 注解：样式表里的注解是用C语言编程中一样的约定方法去指定。 组合：网页设计者经常需要一次修改好几个样式属性。CSS允许使用分好来组合声明。 继承：CSS规则通过继承属性可以应用于多个标签。 CSS的应用 CSS样式面板是Dreamweaver 中用来建立、修改和学习层叠样式表的组件。有两种不同的方法可以查看【CSS样式面板】：【全部】模式和【正在】模式。 【全部】模式：【全部】模式可以自动判定是外部样式表还是嵌入的样式表。 【全部】模式下面有3种视图模式 ： 【显示类别】视图：将CSS属性和值分成与CSS的规则定义对话框相同的9个类别 。 【显示视图列表】视图 ：将属性按字母顺序列出，首先列出的是应用的属性 。 【只显示设置属性】视图 ：只显示当前设置的属性以及一个添加新属性的选项。 CSS的应用 【当前】模式：【当前】模式只关注当前的选择，它分为三个窗格，分别是【所选内容的摘要】、【规则】和【属性】窗格在【CSS样式】面板里从上到下拖拽分割边框可以调整任何窗格的大小。 创建CSS样式：Dreamweaver CS3使用三种基本的工具来实现层叠样式表：【CSS样式】面板、【编辑样式表】对话框和【样式定义】对话框。在Dreamweaver CS3中，不仅可以自动创建样式，还可以用一种智能的方式自动组织