请用微信扫码

扫二维码

关闭

网页制作项目实训教程项目6使用CSS美化网页效果电子教案（表格式）高教版

资源下载
资源下载
  1. 二一教育资源

网页制作项目实训教程项目6使用CSS美化网页效果电子教案（表格式）高教版

2023-12-24 06:14 公共课程 2.55M [教案]

资源简介

《网页制作项目实训教程》目录
教学 课题 任务1 活动1 使用行内样式美化网页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解CSS样式的分类 2.掌握CSS样式规则设置
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.框架网页的创建与保存。 2.框架网页的链接。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 对网页文件“task6-1.html”的主标题进行CSS样式的设置及应用，文件另存为task6-1-1.html，效果如下图所示。 二、师生讨论学习新知识 1、CSS的设置 启动Dreamweaver CS6，按【Shift+F11】组合键或【窗口】菜单的【CSS样式】可打“CSS样式”面板设置CSS样式表。 2、CSS的分类 CSS层叠样式表按可以分为三种：内联样式表（行内样式表）、嵌入样式表和外部样式表。 内联式样式表：是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中。 嵌入式样式表：通常包含在HTML，文档的头部，即head元素中，并且有一个专门的元素style来标记这种样式表。 外部式样式表：是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。 在Dreamweaver CS6中，内联样式表（行内样式表）可以直接通过属性面板的CSS样式属性中的“目标规则” “新内联样式”进行创建。内嵌样式表和外部样式表一般都通过点击“CSS样式”面板的新建按钮来创建。 三、教师演示活动实施过程并让学生完成活动任务 1、新建站点 （1）把教程附送的素材文件夹“Chapter06”放在计算机D盘根目录下。 （2）依次单击“站点”->“新建站点”菜单命令，打开“站点设置对象”对话框。在打开的“站点设置对象”对话框中设置站点名称为“项目6”，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择 “D:\Chapter06\素材文件”。 （3）单击“保存”按钮，完成站点的创建操作。 2、编辑主标题 （1）在“文件”面板中双击打开网页文件 “任务1\ task6-1.html”，然后在主标题“Amazon亚马逊案例分析”后单击插入光标。 （2）在属性面板中选择CSS样式 ，下拉目标规则对话框（红色字部分改为：“目标规则”下拉框），选择“<新内联样式>” 单击 打开CSS规则定义对话框进行属性设置。 3、另存网页文件为“task6-1-1.html”并在浏览器中浏览网页效果。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：CSS的设置；CSS的分类 演示：教师演示活动实施过程 实训活动：学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容
教学 后记
教学 课题 任务1 活动2 使用内嵌样式表美化网页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.掌握CSS规则的类型 2.掌握如何应用CSS样式
教学 重点 1、2 教学 难点 1
辅助 资源 课件、多媒体、网络
复习引入 1.CSS的分类。 2.CSS的设置。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 对网页文件“task6-1-1.html”进行CSS样式的设置及应用，文件另存为task6-1-2.html，效果如下图所示。 二、师生讨论学习新知识 1、CSS规则类型 类（可应用于任何HTML元素）：CSS类选择器名称以英文句点（.）开头。 ID（仅应用于一个HTML元素）：ID选择器又可以称为标识选择器，它的名字以英文井号（#）开头，这种选择器样式一般在页面中只用在一个元素上。 标签（重新定义HTML元素）： “标签（重新定义HTML元素）”，可以实现用CSS重新定义HTML标签的外观的功能。 复合内容（基于选择的内容）：例如，针对

标签、

标签、

标签同时进行了CSS规则定义。 2、CSS样式的应用 套用CSS样式表的方法主要有三种： （1）在“属性”面板中选择应用特定的样式 打开“属性”面板，在“类”下拉列表框中列出了已经定义的一些类规则。在ID下拉列表框中列出了已经定义的一些ID规则。 （2）利用“标签选择器”选择样式 首先需要在“标签选择器”上选定一个标签，在

标签上右击，在弹出的快捷菜单中选择“设置类”“mycss1”命令，则可以快速把已经定义的mycss1样式指定给

标签。 （3）使用快捷菜单 可以从快捷菜单中直接给对象指定一个样式。首先选中对象，右击，在快捷菜单中指定样式。 三、教师演示活动实施过程并让学生完成活动任务 1、打开“活动1”完成的网页文件“task6-1-1.html” 2、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称通过下拉列表选择为“h4”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置，完成后观看网页小标题自动套用样式后的变化。 3、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称通过下拉列表选择为“body”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置，完成后观看自动套用样式后网页背景、页边距等的变化。 4、继续在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称为“aa”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。 5、选中网页文档一个段落的内容，单击鼠标右键，选择快捷菜单的“CSS样式”->“.aa”实现类样式的应用。 6、再次选中网页文档另个段落的内容，打开“属性”面板，在“类”下拉列表框中选中已经定义的类规则“aa” 实现类样式的应用。 9、网页文件另存为“task6-1-2.html”并在浏览器中浏览网页效果。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：CSS规则类型；CSS样式的应用 演示：教师演示活动实施过程 实训活动：学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容
教学 后记
教学 课题 任务2 活动1 认识文本相关CSS属性
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解CSS规则定义中的属性 2.掌握文本相关的CSS属性
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.CSS规则的类型。 2.CSS样式的应用。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 对网页文件“task6-2.html”的文本进行CSS样式的设置及应用，文件另存为task6-2-1.html，效果如下图所示。 二、师生讨论学习新知识 1、CSS规则定义中的属性概述 2、CSS规则定义中与文本相关属性详解 （1）类型：类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置。可只对要改变的属性进行设置，不改变的属性就使之为空。这些属性包括：Font-family（字体）、Font-size（字体大小）、Font-style（字体样式）、Line-height（行高）、Text-decoration（修饰）、Font-weight（字体粗细）、Font-variant（变体）、Text-transform（大小写）、Color（颜色）。 （2）区块：区块选项是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。属性包括：Word-spacing（单词间距）、Letter-spacing（字母间距）、Vertical-align（垂直对齐）、Text-align（文本对齐）、Text-indent（文字缩进）、White-space（空格）、Display（显示）。 三、教师演示活动实施过程并让学生完成活动任务 1、导入“项目六”站点，在 “文件”面板中双击打开网页文件 “任务2\ task6-2.html”， 2、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称设为“style1”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。 3、选中网页文档的标题“独处的美丽”，然后单击鼠标右键，选择快捷菜单的“CSS样式”->“style1”实现类样式的应用。 4、在“CSS样式”面板中单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称设为“style2”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。 5、鼠标单击网页正文部分，在“标签选择器”上选定标签

，在

标签上右击，在弹出的快捷菜单中选择“设置类”->“style2”命令，把已经定义的style2样式指定给

标签。 6、在“CSS样式”面板中单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称设为“body”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置. 7、观看body样式自动套用效果，网页文件另存为“task6-2-1.html”并在浏览器中浏览网页效果。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：CSS规则定义中的属性概述；文本相关CSS属性 演示：教师演示活动实施过程 实训活动：学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容
教学 后记
教学 课题 任务2 活动2 使用CSS样式设置网页背景
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解CSS背景样式 2.掌握使用CSS背景样式控制图像
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.CSS属性概述。 2.文本相关CSS属性。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 打开“task6-2-1.html”文件，使用CSS样式设置网页文档的背景图像，效果如下图所示。 二、师生讨论学习新知识 CSS规则定义中与背景相关属性详解： 背景：背景选项主要是对元素背景进行设置，包括背景颜色、背景图像、背景图像控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。背景属性包括：Background-color（背景颜色）、Background-image（背景图像）、Background-repeat（重复）、Background-attachment（附件）、Background-position（水本位置）、Background-position（垂直位置）。 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6打开“项目六”站点下的网页文件“task6-2-1.html”。 2、在“CSS样式”面板中双击样式“style1”，进入“style1的CSS规则定义”对话框。 3、选择“背景”进行属性设置，观看网页更新后的变化效果。 4、在“CSS样式”面板单击选中样式“style2”，点击“编辑”按钮，进入“style2的CSS规则定义”对话框。 5、选择“背景”进行属性设置。 6、网页文件另存为“task6-2-2.html”并在浏览器中浏览网页效果。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：CSS背景相关属性 演示：教师演示活动实施过程 实训活动：学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容
教学 后记
教学 课题 任务3 活动1 使用Div+CSS布局网页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解盒子模型的概念 2.掌握盒子模型的相关属性
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.CSS背景样式。 2.使用CSS控制图像显示效果。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 使用Div+CSS完成微信首页的布局与制作，如下图所示，完成后以“task6-3-1.html”为文件名保存到“task6-3”文件夹。 二、师生讨论学习新知识 1、盒子模型（Box Model） 盒子模型，又叫盒模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子，比如说，一张图片里并不能放东西，它自己就是自己的内容。 2、盒子模型的属性 一个盒子中主要的属性就5个：width、height、padding、border、margin。 3、外边距（margin） 用于控制元素与元素之间的距离，可设置盒子模型上、右、下、左4个方向的外边距值。 4、内边距（padding） 用于控制内容与边框之间的距离，可设置盒子模型上、右、下、左4个方向的内边距值，设置方式与margin属性相同。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6并新建一个HTML文档，切换至“设计”视图，更改文档标题为“微信，是一个生活方式”，以“task6-3-1.html”为文件名保存到“task6-3”文件夹。 2、在“属性”面板中单击“页面属性”按钮，打开“页面属性”对话框，在“外观”选项卡中设置相应属性。 3、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“nav”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“仅限该文档”，然后单击“确定”按钮，打开“#nav 的CSS规则定义”对话框。 5、在“#nav 的CSS规则定义”对话框中，按要求设置CSS样式，然后单击“确定”按钮，并将“此处显示 id "nav" 的内容”文字删除，插入“top.jpg”图片，完成顶部导航栏的布局制作。 6、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“

”，在“ID”名框中输入“banner”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#banner 的CSS规则定义”对话框，按要求设置CSS样式，然后单击“确定”按钮，并将“此处显示 id "banner" 的内容”文字删除，插入“banner.jpg”图片，完成banner部分的布局制作。 7、参照第6步，完成“#main”与“#bottom”两个区域的布局操作，按要求完成相应CSS样式设置，并在“#bottom”中插入“bottom.jpg”图片。 8、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“
”，在“ID”名框中输入“left”，然后单击“确定”按钮。 9、选择“此处显示 id "left" 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#main #left 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id "left" 的内容”文字删除，并在其中插入图片“con-left.jpg”。 10、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在结束标签之前”，在第2个下拉列表框中选择“
”，在“ID”名框中输入“right”，然后单击“确定”按钮。 11、选择“此处显示 id "right" 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#main #right 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id "right" 的内容”文字删除，并在其中插入图片“con-right.jpg”。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：盒子模型的属性；外边距；内边距 演示：教师演示活动实施过程 实训活动：学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容
教学 后记
教学 课题 任务3 活动2 使用Div+CSS制作图片展示页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解什么是块级元素，什么是行内元素 2.掌握与Div+CSS布局网页相关CSS属性：display、float、clear、overflow。
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.盒子模型的相关属性。 2.外边距（margin）与内边距（padding）。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 使用Div+CSS完成图片展示页的制作，如下图所示，完成后以“task6-3-2.html”为文件名保存到“task6-3”文件夹。 二、师生讨论学习新知识 1、标准文档流 标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。标准文档流分两类： 块级元素（block level）：以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满，占有独立空间，如div标签就是一个通用的块级元素。 行内元素（inline）：各个元素之间横向排列，到最右端自动折行，标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围，如span标签就是一个通用的行内元素。 2、display属性 用于指定HTML标签的显示方式，常用的属性值有3个：block、inline、none。 3、float属性 用于定义元素的浮动方向，其属性值有3个：left 、right、none。 4、clear属性 用于规定元素的哪一侧不允许其他浮动元素，常用于清除浮动带来的影响和扩展盒子高度，其属性值有4个：left、right、both 、none。 5、overflow属性 用于处理盒子中的内容溢出，overflow需要必须配合width属性使用，其属性值有4个：visible、hidden、scroll、auto。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6并新建一个HTML文档，切换至“设计”视图，更改文档标题为“2019最新主题样片”，以“task6-3-2.html”为文件名保存到“task6-3”文件夹。 2、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“content”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“仅限该文档”，然后单击“确定”按钮，打开“# content 的CSS规则定义”对话框，按要求设置CSS样式。 3、删除“此处显示 id "content" 的内容”文字，输入“最新主题样片”，并将其设置为“标题3”格式。 4、将光标定位到“最新主题样片”文字中，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3 的CSS规则定义”对话框，按要求设置CSS样式。 5、切换到“代码”视图，在“最新主题样片”文字两端添加标签。再切换到“设计”视图，将光标定位到“最新主题样片”文字中，单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3 span 的CSS规则定义”对话框，按要求设置CSS样式。 6、在“最新主题样片”文字后面单击，然后按回车键另起一行，插入“pic-1.jpg”图片，并为图片添加空链接，按回车键另起一行，插入“pic-2.jpg”图片，并为图片添加空链接，重复上述操作，将其余10张图片插入到页面中。选择刚刚插入的所有图片，在“属性”面板单击“项目列表”按钮将其转换为项目列表。 7、选择任意一张图片，在“标签选择器”中单击“

资源预览

缩略图、资源来源于二一教育资源库