div+css教案
CSS+DIV授课计划
2
讲授
练习
是
有
4
4
四、CSS设置图片效果
4.1图片样式
4.2图片的对齐
2
讲授
练习
是
无
四、CSS设置图片效果
4.3图文混排
4.4图文实例：八仙过海
2
讲授
练习
是
有
5
5
五、CSS设置网页中的背景
5.1背景颜色
5.2背景图片
2
讲授
练习
是
无
六、用CSS设置表格与表单的样式
6.1控制表格
2
讲授
练习
本课程以实际动手为主，所以，本课程所教学内容安排在机房中讲授，授课分工及指导采用直接在学生机房完成教学任务，并辅以网上交互、电子邮件等方式进行课后交流。
授课计划表
顺序
周次
授课章节与内容摘要
授课时数
授课方式
是否使用多媒体
作业
安排
备注
1
1
一、CSS的初步体验
1.1 CSS的概念
2
讲授
练习
是
无
一、CSS的初步体验
是
无
6
6
六、用CSS设置表格与表单的样式
6.2 CSS与表单
2
讲授
练习
是
无
六、用CSS设置表格与表单的样式
综合实例
2
讲授
练习
是
有
7
7
七、用CSS设置页面和浏览器元素
7.1丰富的超链接特效
2
讲授
练习
是
无
七、用CSS设置页面和浏览器元素
7.2鼠标特效
7.3页面滚动条
cssdiv网页课程设计附件
cssdiv网页课程设计附件一、教学目标本课程旨在通过学习CSS Div网页设计，使学生掌握HTML和CSS的基本知识，能够使用Div标签进行网页布局，掌握CSS样式表的基本语法和使用方法，能够编写简单的静态网页。
具体的教学目标如下：1.理解HTML的基本结构和常用标签；2.理解CSS的基本语法和使用方法；3.掌握Div标签的使用和布局方法。
4.能够使用HTML编写简单的网页结构；5.能够使用CSS编写简单的样式表，实现网页的美化；6.能够使用Div标签进行网页布局。
情感态度价值观目标：1.培养学生对计算机科学的兴趣和热情；2.培养学生良好的编码习惯和团队协作精神；3.培养学生对网络文化的认识和责任感。
二、教学内容本课程的教学内容主要包括HTML和CSS的基本知识，Div标签的使用和布局方法。
具体的教学大纲如下：1.HTML基本结构和相关标签；2.CSS基本语法和使用方法；3.Div标签的使用和布局方法；4.CSS样式表的继承和优先级；5.常用的网页布局技巧。
三、教学方法为了提高学生的学习兴趣和主动性，本课程将采用多种教学方法，包括讲授法、讨论法、案例分析法和实验法等。
1.讲授法：通过讲解和演示，使学生理解HTML和CSS的基本知识，掌握Div标签的使用和布局方法；2.讨论法：通过分组讨论，让学生分享学习心得和经验，提高团队协作能力；3.案例分析法：通过分析典型案例，使学生掌握网页布局的技巧和方法；4.实验法：通过上机实验，让学生亲自动手编写代码，提高实际操作能力。
四、教学资源为了支持教学内容和教学方法的实施，丰富学生的学习体验，我们将选择和准备以下教学资源：1.教材：《HTML与CSS入门教程》；2.参考书：《精通CSS样式表》；3.多媒体资料：教学PPT、视频教程；4.实验设备：计算机、网络环境。
五、教学评估本课程的评估方式包括平时表现、作业和考试等，以全面客观地评价学生的学习成果。
1.平时表现：通过课堂参与、提问和小组讨论等，评估学生的学习态度和积极性。
使用DIV+CSS布局网页说课稿
《使用Div + CSS结构布局“诗歌”页面》说课稿各位老师：你们好，我说课的题目是《使用Div+CSS结构布局“诗歌”页面》，下面我从教材、学情、教学目标、教学方法、教学过程、教学亮点与教学反思六个方面对我的教学设计进行说明。
一、教材分析地位：《使用Div+CSS结构布局“诗歌”页面》取材于教学参考书《Dreamweaver CS4从入门到精通》第12章内容。
它与我们使用教材《Dreamweaver 网页设计与制作案例教程》第7章相对应。
作用：Div + CSS是一种最新、最科学的网页布局方式，符合Web2.0的技术标准，目前也比较流行的网页布局方式。
使用Div + CSS布局可将结构与表现分离，减少了HTML文档内大量代码，只留下了页面结构的代码，方便对其进行阅读，还可以提高网页的下载速度。
所以这部分内容是我们学习网页设计非常重要的一部分，学生要重点掌握。
二、学情分析学生特点：我授课的对象为高职三年级学生，我们都知道职业学校学生的学习习惯不太好，学习自觉性相对低一些。
知识准备与兴趣：针对我们本节课内容，学生在前面已经学习了Div标签的插入方法以及CSS 样式表创建方法，了解了其功能，对其有了一定的感性认识，我们重要的是加强学生的实践操作能力的训练。
三、教学目标分析根据上述教材与学情分析，我设定如下教学目标与重难点：1．知识与技能目标：在知识与技能方面要求做到以下几点1）学会分析页面的结构的方法。
2）能使用div标签定义合理的页面结构。
3）巩固用代码与视图两种方法插入div标签以及向标签内部添加内容。
4）学会利用CSS规则布局美化页面。
2．情感目标：1）培养学生的审美能力。
2）培养学生的合作精神与协作能力。
3.教学重、难点：重点：分析页面结构、用div标签定义页面结构难点：利用CSS规则布局美化页面四、教学方法基于以上的教材目标分析和重难点的确定，我根据自己对任务驱动教学法和新课程改革的理论认识，结合授课学生实际，主要采用任务驱动、视频指导教学法。
css+div布局代码(一)教案
margin:0 auto;可以让盒子或有特定宽度的块元素居中
增加内边距会增加元素本身的宽度和高度，如果想保持原来元素的宽和高，在原来元素宽高的基础上减去这个padding值
padding如果是一个值，代表上下左右内边距相等如：padding:30px;
课题：css+div布局代码（一）
教学目标：让学生初步了解div+css，并学会用代码写出css+div布局
教学重点，难点：学生新接触的知识比较复杂，学生在学习和运用的时候会比较难。
德育渗透：
教学内容、过程：
导入
之前我们学过用菜单的方式来写css样式，今天，我们用代码来写css样式。-top:200px;}
</style>
<body>
备注：
第4页
课题：
<div class="box">这是里边的内容这是里边的内容这是里边的内容这是里边的内容这是里边的这是里边的内容这是里边的内容</div>
<h2>标题二</h2>
<p>这是一段文字</p>
<em>fewqf3wtgf34wtg43</em>
案例知识：
<style>
*{color:#F00; font-size:45px; margin:0; padding:0;}
</style>
<body>
<h2>fewfewfwe</h2>
<em>ffewfew</em>
div+css教案
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
5.1列表样式设置基础164
5。1.1设置列表项符号164
5.1。2定义项目的图片符号166
5.1.3列表的横竖转换167
5。2案例实战169
5.2.1设计新闻栏目169
5。2。2设计导航菜单173
5.2.3设计多级菜单177
5。2.4列表排版的应用182
设计高效的表格
教学课题
第7章使用CSS设计表单样式
□标准班
□合班
教学目的
认识表单样式
重点难点
掌握定义字体样式、边框样式、背景样式
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时)
7。1表单样式设置基础212
7.1.1表单基本结构212
7。1。2设置基本样式216
教学手段
教学过程
设计
（4学时）
6。1表格样式设置基础193
6.1。1设置表格颜色193
6.1.2设置表格边框194
6。2案例实战196
6。2.1美化表格197
6.2。2设计高效的表格200
6.2。3让表格更易用204
6.2。4表格布局207
机
房
操
作
课堂小结
（3分钟）
小结表格在CSS中如何运用
思考题、作业及其预习要求（2分钟）
10。3。2嵌套层叠顺序349
10。3.3CSS层叠框351
10.3。4CSS层叠常见问题354
10.4案例实战357
10。4。1画册式网页布局357
实训4 div+css综合运用
实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。
div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。
实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。
二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。
这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。
在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。
2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。
3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。
4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。
三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。
通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。
在整个过程中，我对div和css的重要性有了更深的理解。
div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。
通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。
css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。
通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。
在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)
第10讲布局技术之二—Div+CSS（二）1.1教学目标：◆知识目标1.理解CSS盒子模式。
2.掌握CSS规则设置方法。
◆技能目标能够理解Div+CSS所体现的表现和内容相分离特性。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS规则设置方法1.3 教学难点理解CSS规则的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、CSS样式基本操作1．样式表的操作途径我们可以通过三种途径来创建、编辑CSS样式。
从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。
图3-35 CSS样式面板在CSS样式面板的右下角有四个功能按钮，分别为：●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。
●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。
●编辑样式表：打开“CSS 样式定义”对话框。
编辑当前文档或外部样式表中的任何样式。
删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。
单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。
通过该菜单，可以完成对CSS样式面板的大部分控制。
在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。
图3-36 面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。
在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。
不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。
网页基础项目九 运用Div+css样式 任务一 了解Div+css 电子教案
项目九运用Div+css样式
任务一了解Div+css
课程：网页设计与制作
课题：了解div+css
教材分析与处理：本项目是学习网页设计与制作的进阶，主要用于在成品网页进行后期修饰，是网页制作必备的技能。
本次任务以实践操作为主，理论讲解为辅，目的在于让学生熟练掌握网页制作的布局和美化。
教学目标
识与技能目标：
1、了解css+Div的布局方式；
2、掌握插入DIV标签的方法；
3、掌握创建css样式方法。
过程与方法目标：
通过任务驱动，结合教师讲授，让学生在做中学。
情感态度与价值观：
1、培养学生善于发现、勤于动脑、乐于动手的学习习惯；
2、激发学生学习网页设计与制作的兴趣；
3、培养学生的归纳总结能力。
课时：2课时
教学重点：使用Div进行布局。
教学难点：css样式的创建。
教学过程：
教学反思：。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
□合班
教学目的
了解定义字体类型、大小、颜色、粗细、字体
重点难点
掌握定义文本对齐、定义垂直对齐、定义字间距和行间距、定义行间距、定义缩进
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
2.1.1定义字体类型 49
2.1.2 定义字体大小 51
4.2.7设计灯箱广告154
4.2.8设计博客首页效果157
机
房
操
作
课堂小结
（3分钟）
小结通过css样式设置不同类型的背景图像
思考题、作业及其预习要求（2分钟）
设置带花纹边框
教学课题
设置网页背景页面
□标准班
□合班
教学目的
了解背景图形的几种定义方法
重点难点
掌握背景样式的各种设置
教学方法
上机实践操作
主要教学过程
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
1.1.1选用符合语义的标签 2
1.1.2 文档类型和浏览器模式 7
1.2 初识CSS 8
1.2.1 为什么学习CSS 9
1.2.2 CSS基本语法 9
1.2.3 设计第一个实例 10
1.3 CSS选择器 12
4.1.3定义背景图片128
4.1.4背景图片的重复130
4.1.5定义背景图片的位置131
4.1.6固定背景图片133
4.2案例实战134
4.2.1设置网页背景颜色135
4.2.2设置带花纹边框136
4.2.3设置永远固定的背景143
4.2.4设置圆润的栏目模块144
4.2.5设计分栏版式149
4.2.6设计滑动门菜单151
8.1.3设置类型指示样式249
8.1.4定义按钮样式251
8.1.5定义已访问样式254
8.1.6链接提示样式254
8.2案例实战256
8.2.1鼠标样式256
8.2.2设计菜单样式259
8.2.3设计苹果导航菜单261
8.2.4块状选项卡266
8.2.5图片浏览271
机
房
操
作
课堂小结
（3分钟）
小结链接样式的设置方法以及定义按钮
1.3.12 指定选择器 26
1.4 CSS基本特性 26
1.4.1 层叠和特殊性 26
1.4.2 继承 31
1.5 样式表规划、组织和维护32
机
房
操
作
课堂小结
（3分钟）
通过本章学习什么是标签选择器
思考题、作业及其预习要求（2分钟）
伪类和伪对象选择器有哪些？
教学课题
第2章 使用CSS设置字体和文本样式
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
5.1列表样式设置基础164
5.1.1设置列表项符号164
5.1.2定义项目的图片符号166
列表的横竖转换167
5.2案例实战169
5.2.1设计新闻栏目169
5.2.2设计导航菜单173
5.2.3设计多级菜单177
5.2.4列表排版的应用182
教学课题
第4章使用CSS控制背景图像
□标准班
□合班
教学目的
了解背景图形的几种定义方法
重点难点
掌握背景样式的各种设置
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（2学时）
4.1背景样式设置基础125
4.1.1设置页面背景颜色125
4.1.2设置背景颜色给页面分块126
4
8
第8章 使用CSS定义链接样式
4
9
第9章 网页排版和DIV+CSS布局
4
10
第10章 用CSS定位控制网页布局
4
11
第11章 解决CSS设计中的常见问题
4
12
第12章 旅游酒店网站
4
4
教学课题
第1章 CSS样式设计基础
□标准班
□合班
教学目的
认识选用符合语义的标签
重点难点
熟悉并掌握CSS选择器概述
思考题、作业及其预习要求（2分钟）
如何设置类型指示样式
教学课题
第9章网页排版和DIV+CSS布局
□标准班
□合班
教学目的
了解CSS盒模型
重点难点
掌握外边距、内边距、边框、宽和高的用法
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
9.1 CSS盒模型276
7.1.3定义字体样式221
7.1.4定义边框样式222
7.1.5定义背景样式224
7.2案例实战228
7.2.1设计多彩下拉菜单样式228
7.2.2设计注册表单230
7.2.3设计调查表235
7.2.4设计反馈表240
机
房
操
作
课堂小结
（3分钟）
小结表单的运用方式
思考题、作业及其预习要求（2分钟）
设计注册表单
教学手段
教学过程
设计
（4学时）
6.1表格样式设置基础193
6.1.1设置表格颜色193
6.1.2设置表格边框194
6.2案例实战196
6.2.1美化表格197
6.2.2设计高效的表格200
6.2.3让表格更易用204
6.2.4表格布局207
机
房
操
作
课堂小结
（3分钟）
小结表格在CSS中如何运用
思考题、作业及其预习要求（2分钟）
9.3.3网页排版基本方法300
9.4 DIV+CSS布局305
9.4.1布局空间305
9.4.2布局位置307
9.4.3布局环绕309
9.4.4清除浮动311
9.4.5布局嵌套313
9.4.6调整布局间距316
9.5案例实战321
9.5.1两列布局322
9.5.2三列布局327
机
房
操
作
课堂小结
（3分钟）
备注
周
次
讲课内容（附章节）
学
时
实验实习
（讨论大作业）内容
学时
1
第1章 CSS样式设计基础
4
2
第2章 使用CSS设置字体和文本样式
4
3
第3章 使用CSS设置图片样式
4
图文混排
2
4
第4章 使用CSS控制背景图像
4
设置网页背景页面
2
5
第5章 使用CSS控制列表样式
4
6
第6章 使用CSS设计表格样式
4
7
第7章 使用CSS设计表单样式
教学过程
设计
（2学时）
3.2 案例实战 103
3.2.1图文混排 103
3.2.2 图片布局 107
3.2.3 多图排列 111
3.2.4 阴影图片 114
3.2.5 圆角图片 116
3.2.6 设计圆角栏目 118
机
房
操
作
课堂小结
（3分钟）
小结图片样式设置
思考题、作业及其预习要求（2分钟）
了解图片的横向对齐
小结学习网页排版基本方法
思考题、作业及其预习要求（2分钟）
如何调整布局间距
教学课题
第10章用CSS定位控制网页布局
□标准班
□合班
教学目的
了解什么是CSS定位
重点难点
掌握静态定位、绝对定位、相对定位、固定定位
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
课程名称
CSS+DIV网页样式与布局从入门到精通
课程编号
英文课程名称
CSS+DIV Webpage style and layout from entry to the master
先修课程
编排设计、网页设计欣赏、网页三剑客
授课班级
14电艺
课程类别
职业技能课
开课学期
2015—2016第二期
学分
3
考试类型
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（2学时）
3.1图片样式设置基础93
3.1.1定义图片边框93
3.1.2定义图片大小97
3.1.3定义图片的横向对齐98
3.1.4定义图片的纵向对齐99
3.1.5设置文字环绕效果101
机
房
操
作
课堂小结
（3分钟）
机
房
操
作
课堂小结
（3分钟）
小结定义垂直对齐、定义字间距和行间距
思考题、作业及其预习要求（2分钟）
Dreamweaver中CSS设置字体和文本样式类型
教学课题
第3章 使用CSS设置图片样式
□标准班
□合班
教学目的
理解图片样式设置基础
重点难点
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果