电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目七.docxVIP

电子教课设计《Dreamweaver网页设计与制作第二版》A063954示例项目七 电子教课设计《Dreamweaver网页设计与制作第二版》A063954示例项目七 电子教课设计《Dreamweaver网页设计与制作第二版》A063954示例项目七 课程教课设计 讲课内容 项目七 制作美容网站——应用款式表 讲课班级 讲课学时 16 课时 教课方法 讲解法、演示法、议论法。多媒体教课 与手段 项目内容 教课目的  本项目的工作内容是为某美容企业成立企业网站，该美容企业主要有基础护理系列、美白保湿系列、控油除痘系列、面膜护理系列等几大类产品；针对 的花费者主假如中高端的时髦年青人。 网站的功能需求有： 达到品牌宣传成效、实此刻线订单功能、供给会员后台服务。 详细的制作要求是： 整体风格文雅、年青、时髦，色彩淡雅、俊逸； 能表现出企业健康、安全、有效的理念； 供给首页和 1 张二级页面； 在线订单及会员页面达到基本要求即可； 美工要求较高，网页设计重申时髦感。学生经过本项目的学习，能： 1、 理解并熟习款式的种类 2、 娴熟掌握款式的创立方法 3、 掌握外面款式的使用 4、 理解并掌握 CSS 滤镜的使用 教课要点 与难点  教课要点：创立款式 教课难点：编写和应用外面款式 项目成效 教课过程 设计 【任务一】为网站首页设置款式——款式表的基本应用 款式表是一个特别灵巧的工具，使用它能够将所有相关文档的款式保留在 一个款式文件中。当需要给大批网页定义相同的款式时，只需将款式文件链接到各个网页即可，而不用再把繁琐的款式编写在每个文档构造中。 （一）熟习“ CSS款式”面板 在 Dreamweaver CS3 中，能够借助“ CSS 款式”面板来新建、删除、编写 和应用款式，以及附带外面款式表等。选择“窗口”→“ CSS 款式”菜单，可翻开“ CSS 款式”面板。 （二） CSS款式的存在方式 CSS 款式之外面和内嵌两种方式存在于网页中： 外面 CSS 款式表： 为加强 CSS 款式的通用性， 能够创立扩展名为 “ .css ” 的款式表文件。利用“ CSS 款式”面板可将该文件链接至站点中的一个或 多个网页中，进而使用户能够直策应用此中定义的款式。 内部（或嵌入式） CSS 款式表：是一系列包含在 style 标签内的 CSS 款式。  HTML 文档  head  部分 小提示：与 HTML 文件相同， CSS 款式表文件也是一个文本文件，既能够直接使用 Dreamweaver 来创立它，也能够使用“记事本”等文本编写器来编写。 （三） CSS款式的分类 依据应用对象的不一样， CSS 款式被分为以下三类。 1. 类款式 类款式又称自定义款式， 它是独一可应用于文档中任何对象的 CSS  款式类 型，主要用于定义一些特别的款式。比如，可为网页中的列表项定义款式。 关于类款式而言， 当改正了所选文本的字体、 大小、颜色等属性后， Dreamweaver 会自动创立相应的内部款式。别的，也能够使用“ CSS 款式”面板来直接创立类款式和其余两种款式。 2. 标签款式 用来重定义 HTML 标签的款式。 比如，定义 table 标签款式后， 网页中所 有表格都将自动应用该款式。又如，一旦定义了 body 款式，则网页将自动按 照定义的 body 款式更新。 选择器款式 选择器款式又称高级款式，它主要用来定义链接文本的款式，也可用来重 定义特定标签组合的款式。比如，每当 h2 标题出此刻表格单元格内时都会生成 tdh2 标签组合。所以，假如定义了 tdh2 标签组合款式，则它将影响文档中的所有 tdh2 标签组合。选择器款式还可重定义包含特定 id 属性的所有标签的格式。 比如，＃ myStyle 款式将应用于所有包含属性 id=myStyle 的标签。 （四）创立款式的一般步骤 步骤 1 在“ CSS 款式”面板中单击“新建  CSS  规则”按钮，翻开“新建  CSS 规则”对话框。 步骤  2  在“选择器种类”区选摘要创立的  CSS  种类。 要创立可作为 class 属性应用于任何对象的款式， 应选择 “类（可应用于 任何标签）”，而后在“名称”编写框中输入款式名称。 假如要定义标签款式，应选择“标签” ，而后在“标签”下拉列表中选择一 个标签。 假如要定义链接或标签组合款式，应选择“高级” ，而后在“选择器”编写 框中输入一个或多个 HTML 标签，或在“选择器”下拉列表中选择一个标 签（包含 a:active 、a:hover 、a:link 和 a:visited ）。 步骤 3 在“定义在”选项组中指定保留款式的地点。要创立外面款式表，可 在“定义在”下拉列表中选择“新建款式表文