9.1使用不同方法创建个人网页样式 课件 -2022-2023学年高二下学期（中职）《网页设计与制作》（华南理工版）

项目九学习网页中的CSS样式 要创建一个漂亮的网页，掌握设置CSS样式是必不可少的。CSS样式可以实现网页中几乎所有的样式效果。在本项目中，通过3个工作任务向读者展示CSS样式简介、创建CSS样式、设置CSS样式、管理CSS样式、应用CSS高级样式等知识。 目录 任务一 使用不同方法创建个人网页样式 任务二 使用复制CSS样式快速制作网页 任务三 使用CSS滤镜设置网页文本 使用不同方法创建个人网页样式 准备知识 使用不同方法创建个人网页样式 CSS样式简介 创建CSS样式 任务实施 小江是某网络公司的网站设计师，接到上公司任务，需要制作个人网站。同时，要求使用不同的方法创建个人网页样式。 使用不同方法创建个人网页样式 任务一：使用不同方法创建个人网页样式 任务分析： 理解牢记！ 由于Dreamweaver创建好网页样式后，将其保存，以后用户可以直接调用该样式，省去了重新建立样式繁索性。因此，小江使用创建CSS样式功能来完成此任务。 任务一：使用不同方法创建个人网页样式 任务 实施 使用不同方法创建个人网页样式 （1）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，然后选择“文本”→“CSS样式”→“新建”命令，如下图所示。 （2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名称。 （3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置起作用的“仅对该文档”，然后单击“确定”按钮，如下左图所示。 （4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮，如下右图所示。 （5）在“CSS样式”面板中可以看到新创建好的样式表，如下图所示。 小江在Dreamweaver中使用“CSS样式”面板创建样式表的操作步骤如下。 （1）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，如下图所示，然后单击“新建CSS规则”按钮。 （2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名称。 （3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置起作用的“仅对该文档”，然后单击“确定”按钮，如上左图所示。 （4）在打开的 “.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮，如图9-3所示。 （5）在“CSS样式”面板中可以看到新创建好的样式表，如上右图所示。 $