初中八年级信息技术课件-最佳搭档-应用CSS样式与层美化网页_第1页
初中八年级信息技术课件-最佳搭档-应用CSS样式与层美化网页_第2页
初中八年级信息技术课件-最佳搭档-应用CSS样式与层美化网页_第3页
初中八年级信息技术课件-最佳搭档-应用CSS样式与层美化网页_第4页
初中八年级信息技术课件-最佳搭档-应用CSS样式与层美化网页_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

最佳搭档——应用CSS样式与层美化网页任务导航目前，在Web设计和开发技术领域，CSS和DIV是非常流行的新技术，堪称最佳搭档，快捷控制网页样式和精确布局离不开它们的完美配合。Dreamweaver提供了功能强大的CSS样式表编辑工具，对于设计者来说，它是个非常灵活的工具，可以用来一次对若干个文档所有的样式进行处理，成倍地提高工作效率。本课，我们将学习CSS的基本知识，并且初步运用CSS样式表和APDiv层加工处理“校园内外”栏目的页面，完成效果如图所示。1.通过“属性检查器”快速创建CSS样式步骤1：选中“校园内外”页面的文本。步骤2：在“属性检查器”中单击“大小”选项中的16，弹出“新建CSS规则”对话框，将此对话框设置如图所示。这表示我们要对本页面中所有段落标签进行CSS规则的定义。此时，单击“拆分”视图按钮，可以看到在<head>标签中增加了一段代码，如图所示，这就是这个CSS规则设置后生成的代码。步骤3：取消对文本的选择，单击文本，使插入点在文本中闪烁，然后继续在“属性检查器”中更改文本的颜色、字体、加粗、对齐方式等属性如图所示。此时对应的CSS代码如左图所示，页面在IE中浏览效果如右图所示。2.通过“CSS样式”面板创建和编辑样式表步骤1：选择“窗口”菜单，确保“CSS样式”命令被勾选上，展开“CSS样式”面板。步骤2：单击如图所示的P标签，它的规则包含的属性将会显示在面板中，可以看出，这些属性和代码是完全对应的。步骤3：单击“CSS样式”面板底部的图标，弹出“p的CSS规则定义”对话框，我们要在这里继续样式表的修改，将Line-height参数设置为30px，表示设置行高为30px，如图所示。步骤4：单击“CSS样式”面板底部的图标，新建样式表。在弹出的“新建CSS规则”对话框中如图设置，在“为CSS规则选择上下文选择器类型”中选择“类（可应用于任何HTML元素）”选项，在“选择或输入选择器名称”文本框中输入自定义样式表名称ys0l，在“选择定义规则的位置”中选择“仅限该文档”选项。步骤5：单击“确定”按钮，弹出“.ys0l的CSS规则定义”对话框，在“分类”列表中选择“区块”选项，设置“首行文本缩进”为30像素，如图所示，然后单击“确定”按钮。步骤6：选中“校园内外”页面的3段正文文本，直接在“CSS样式”面板中右击选择的样式，在弹出的快捷菜单中执行“套用”命令。保存后，在IE中预览效果如图所示。3.导出CSS样式表步骤1：在“CSS样式”面板中右击样式p，在弹出的快捷菜单中执行“移动CSS规则”命令，在弹出的“移至外部样式表”对话框中选择“新样式表”，单击“确定”按钮，在弹出的“将样式表文件另存为”对话框中设置文件名为xynw.css，保存在xynw文件夹下，然后单击“保存”按钮，CSS样式导出完成，如图所示。步骤2：在“CSS样式”面板中右击样式.ys01，在弹出的快捷菜单中执行“移动CSS规则”命令，在弹出的“移至外部样式表”对话框中进行如图所示的设置，单击“确定”按钮。用同样的方法导出样式.ys02，此时的“CSS样式”面板如图所示，在网页效果没有丝毫变化的同时将在<style>中的样式移动到了新建的样式表文件xynw.css中。4.应用样式表文件步骤1：在“CSS样式”面板中单击底部的“附加样式表”按钮。步骤2：在弹出的“链接外部样式表”对话框中设置外部样式表的路径和添加方式，如图所示，单击“确定”按钮。这时就能够在这个网页中以“链接”的方式使用这个样式表文件中定义好的样式了，我们可以像使用在本页创建的样式一样去加以应用。5.层与样式表的配合使用步骤1：打开“野外拓展”页面，链接需要的外部样式表，对文本进行美化。步骤2：在页面靠下的位置，创建APDiv元素，将图片ywtz2.gif放置其中，并调整层的大小。步骤3：将本APDiv层中的图片用<marquee>制作滚动字幕。步骤4：保存并测试网页，观察效果，体会层与CSS样式表的配合的高效便捷，制作完成的页面如图所示。知识着陆1.CSS——层叠样式表，是目前网页制作过程中比较先进的技术，它能轻松、有效地对页面的整体布局、颜色、字体、链接、背景等效果实现精确的控制。2.创建样式表有两种常用的方法，一是使用“属性检查器”；二是使用“CSS样式”面板。“CSS样式”面板提供较多的功能，应用起来也更加灵活。3.在页面中，不仅可以使用从模板继承的样式，还可以使用自定义样式甚至将样式导出为样式表文件，并链接或者导入其他页面中继续使用。4.通过APDiv层与样式表的完美配合，网页布局元素的精确控制

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论