模块七使用CSS样式和行为PPT

《模块七使用CSS样式和行为PPT》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、模块七使用CSS样式和插入行为任务四常用Dreamweaver内置行为任务一认识CSS样式表任务二管理CSS样式任务三认识行为学材小结任务五插入JavaScript特效任务一认识CSS样式表要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。执行【窗口】→【CSS样式】菜单命令，打开“CSS样式”面板。CSS样式是CascadingStyleSheets(层叠样式单)的简称，也可以称为“级联

2、样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。任务一认识CSS样式表打开DreamweaverCS3，新建in

3、dex7-1.html文件，如图所示。新建CSS样式表任务一认识CSS样式表文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【CSS样式】→【新建】，如图所示。弹出“新建CSS规则”对话框。新建CSS样式表任务一认识CSS样式表在“新建CSS规则”对话框中“选择器类型”中勾选“类（可用于任何标签）”单选按钮，在“名称”文本框输入“geci”，在“定义在”中勾选“对该文档”单选按钮后单击“确定”按钮。弹出“CSS规则定义”对话框如图所示。新建CSS样式表任务一认识CSS样式表在“CSS规则定义”对话

4、框中单击“确定”按钮，现在“geci”CSS样式表设计好了，对应的属性如图所示。新建CSS样式表任务一认识CSS样式表在建“h2”标签CSS样式表如图所示。新建CSS样式表在“类型”中需要设置的值后如图所示，单击“确定”按钮。任务一认识CSS样式表在建“#zuozhe”高级CSS样式表如图所示。新建CSS样式表在“类型”中需要设置的值后如图所示，单击“确定”按钮。任务一认识CSS样式表在“index7-1.html”文件中歌词上鼠标单击后【属性】面板中“样式”下拉列表框中选择“geci”。新建CSS

5、样式表在作曲前面的

中添加“id=”zuozhe””如图所示。任务一认识CSS样式表浏览index7-1.html文件如图所示。新建CSS样式表任务二管理CSS样式链接到外部CSS样式:在“CSS样式”面板中，单击“附加样式”按钮。编辑外部CSS样式时，链接到该CSS样式的所有文档全部更新以反映所做的编辑。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。任务二管理CSS样式新建跟index7-1.html一样内容的index7-2-1.ht

6、ml文件。子任务1修改CSS样式执行【窗口】→【CSS样式】菜单命令，打开“CSS样式”面板如图所示。任务二管理CSS样式在“CSS样式”面板选择“h2”CSS样式后单击“编辑CSS样式”按钮弹出“CSS规格定义”对话框。子任务1修改CSS样式在“CSS规则定义”对话框中“类型”选择背景后“背景图像”导入“bg01.jpg”。单击“确定”按钮。任务二管理CSS样式在“CSS样式”面板选择“#zuozhe”CSS样式后单击“删除CSS样式”按钮。子任务1修改CSS样式在“index7-2-1.html

7、”文件中作曲上鼠标单击后【属性】面板中“样式”下拉列表框中选择“geci”如图所示。任务二管理CSS样式浏览index7-2-1.html文件如图所示。子任务1修改CSS样式任务二管理CSS样式新建跟index7-1.html一样内容的index7-2-2.html文件如图所示。子任务2设置外部CSS样式在index7-2-2.html中所有CSS样式删除。任务二管理CSS样式单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。子任务2设置外部CSS样式在“选择器类型”中勾选“标签”单选按钮，在

8、“标签”下拉列表框中选择“h2”，在“定义在”中勾选“新建样式表文件”单选按钮后单击“确定”按钮。弹出“保存样式表文件为”对话框如图所示。在“文件”文本框中输入“yangshi”后单击“保存”按钮弹出“CSS规则定义”对话框。任务二管理CSS样式单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。子任务2设置外部CSS样式在“选择器类型”中勾选“标签”单选按钮，在“标签”下拉列表框中选择“p”，在“定义在”中勾选“新建样式表文件”单选按钮后选择“yangshi.c