《中文版Dreamweaver CS3网页制作实用教程》课件第7章(精品·公开课件).pptVIP

教学重点与难点 中文版Dreamweaver CS3实用教程 第7章 使用CSS样式和插入行为 精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。行为是以系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaer中内置的程序库。利用行为，可以制作处各式各样的特素效果，例如播放声音、弹出菜单等。 绘制与编辑多线 认识CSS样式 创建CSS样式 设置CSS样式 认识行为 插入行为 7.1认识CSS样式 CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。 在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。 要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。 CSS的基本概念 CSS样式面板和常用类型 创建CSS样式 应用CSS样式 7.1.1 CSS的基本概念 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。 7.1.2 CSS样式面板和常用类型 CSS常用的类型有外部样式表和内部样式表两种，要创建样式表，可以在“CSS样式”面板中创建。 7.1.3 创建CSS样式 在Dreamweaver CS3中，可以创建一个CSS样式，然后应用于文档的某个部分，完成文本的格式化。要创建CSS样式，可在文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”|“新建”命令，如图所示，打开“新建CSS规则”对话框，如图所示。 选择“CSS样式”|“新建”命令 “CSS规则定义”对话框 7.1.4 应用CSS样式 创建了CSS样式表后，就可以利用该样式表快速设置页面上的样式，使网站具有统一的风格了。在Dreamweaver CS3环境下，对文档指定元素应用CSS样式可以在“属性”面板中设定、在标签处设定、在“标签检查器”面板组的“属性”面板中和右击文档选择快捷菜单设定。 7.2 管理CSS样式 如果要对CSS样式进行编辑、删除、链接或者新建等操作，可以在“CSS样式”面板中找到相应的操作按钮。 链接和导入CSS样式 编辑和删除CSS样式 设置其他CSS样式 CSS样式冲突 7.2.1 链接和导入CSS样式 单击“CSS样式”面板中的“附加样式表”按钮，打开“链接外部样式表”对话框。单击对话框中的“浏览”按钮，打开“选择样式表文件”对话框，如图所示，在对话框中选择需要链接的外部CSS样式文件，然后单击“确定”按钮，将CSS样式文件倒入到“链接外部样式表”对话框种，选中“添加为”选项区域中的“链接”单选按钮，单击“确定”按钮，在“CSS样式”面板的列表中将显示链接的CSS文件。 7.2.2 编辑和删除CSS样式 打开“CSS样式”面板，选中要编辑的CSS样式，单击“编辑样式表”按钮，打开“CSS规则定义”对话框，可对在CSS面板中选中的CSS样式进行编辑，如图所示。 7.2.3 设置其他CSS样式 除了设置CSS文本样式外，还可以设置“背景”、“区块”、“方框”、“边框”、“列表”、“定位”和“扩展”样式。 7.2.4 CSS样式冲突 当相同的文本上应用两种或多种CSS样式时，可能会产生冲突，并导致不可预料的结果。浏览器显示样式格式依照以下