网页设计与制作项目十一 用CSS美化网页.pptVIP

切换至【背景】分类，作如图所示的设置。 切换至【边框】分类，在该分类上设置边框样式，如图所示。 （二）将CSS样式添加到页面 单击“确定”按钮之后，tf创建成功。选中要应用样式的表单元素，例如文本域，激活其“属性”面板，在面板上的“类”下拉列表中选择样式“tf”。在“类”下拉列表中你可以预览样式的效果，如图 修改边框效果 再新建一个样式“tf1”，在“背景”分类中的设置和前面一样，现在切换至“边框”分类，在该分类上重新设置边框样式，如图所示。 项目活动十一 用CSS美化网页 复习回顾: 如何创建如下表单？ 主要教学环节 项目活动十一 用CSS美化网页 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景） 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景） 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动十一 用CSS美化网页 （一）项目背景 返回 CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。在如今的网页制作中，几乎所有精美的网页都用到了CSS。 有了CSS控制，网页便会给人一种赏新悦目的感觉，CSS虽然只是一些代码，得到的效果却不同凡响。 （二）项目分析 项目活动目标：在网页中学会创建CSS样式，并应用CSS样式。 返回 重点：1.CSS样式的概念 2.CSS样式的创建 3.CSS样式的应用 难点：CSS样式的类型 （三）任务实施 一、使用CSS对用户注册网页进行美化 2.建立css样式 选择“格式”→“CSS样式”→“新建”菜单命令，打开“新建CSS规则”对话框，如图 1.新建页面 启用Dreamweaver ，新建一个空白文档。新建页面的初始名称是“Untitled_1.html”，选择“文件”中的“保存”命令。弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点目录保存路径，在“文件名”选项的文本框中输入“index”，单击“保存”按钮，返回到到编辑窗口。 【操作步骤】 在“选择器类型”下拉列表中选择“类（可应用于任何HTML元素）” “选择器名称”文本框中输入“.top”。 在“规则定义：”下拉列表中选择“（仅限该文档）”，单击“确定”按钮，将打开“.top的CSS规则定义”对话框。 在“类型”分类中，将字体设置为宋体、大小设置为14像素。如图 单击“确定”按钮，则“.top”的CSS规则定义完成。 3.运用css样式 将光标置于第一行文本中的任意位置。 在属性检查器中单击“CSS”按钮，然后在“目标样式”列表中选择“.top”，此时会发现文本用了“.top”的CSS样式。 其它美化设置： 打开属性检查器，进行如下设置：目标规则设为“内联样式”，字体设为黑体，大小设为24PX、加粗、居中，颜色设为#900，将正文进行分段，并在每个段落前加两个全角空格，然后将光标至于正文第一行。单击属性检查器上的“编辑规则”按钮，在“新建CSS规则”对话框中设置选择器类型为“类”，选择器称为.contentl，规则定为“仅限该文档”。 “.contentl”的CSS规则定义如下：font-family设为宋体font=size设为14px、li