HTML CSS DIV网页设计与布局教学教案
HTMLCSS网页设计与布局教案
HTML/CSS网页设计与布局教案一、教学目标1. 理解HTML和CSS的基本概念及其在网页设计中的重要性。
2. 掌握HTML的基本结构、标签及其功能。
3. 学会使用CSS进行网页样式设计和布局。
4. 能够独立设计并制作一个简单的网页。
二、教学内容1. HTML基本结构与标签网页结构：head、body、等标签文本格式：p、h1-h6、b、i等标签：a标签及其属性图片：img标签及其属性列表：ul、ol、li、dl、dt、dd等标签2. CSS基本语法与选择器CSS语法：选择器、属性、值、注释选择器类型：标签选择器、类选择器、ID选择器、属性选择器、伪类选择器等常用属性：color、font-size、margin、padding、background等3. CSS布局方法盒模型：margin、padding、border、width、height等定位：static、relative、absolute、fixed等浮动：float、clear等弹性布局：display、flex、justify-content、align-items等网格布局：display、grid、grid-template-columns、grid-template-rows等4. 响应式设计媒体查询：media screen and (max-width: 600px)移动端与桌面端布局差异弹性图片：max-width: 100%，height: auto5. 代码规范与调试技巧HTML/CSS代码规范：缩进、注释、命名等浏览器开发者工具：Elements、Console、Network等常用的调试技巧与问题排查方法三、教学方法1. 讲授法：讲解HTML/CSS基本概念、语法和布局方法。
2. 演示法：通过示例演示如何使用HTML/CSS制作网页。
3. 练习法：学生跟随老师一起动手制作网页，巩固所学知识。
4. 互助法：学生之间相互讨论、解答疑问，提高学习效果。
《HTML+CSS网页设计与布局》教案
《HTML+ＣSS网页设计与布局》课程教案
授课教师：ﻩ授课班级: 地点：周课时：５课时
《HＴML+ＣSS网页设计与布局》课程教案
授课教师:ﻩ授课班级：地点：周课时：5 课时
ﻬ课程教案
授课教师：ﻩ授课班级: 地点：周课时：
5 课时
ﻬ课程教案
授课教师：授课班级: 地点：周课时: 5 课时
ﻬ课程教案
授课教师：ﻩ授课班级：地点: 周课时: 5 课时
《HTMＬ+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：５课时
《HＴML+CSＳ网页设计与布局》课程教案
授课教师：ﻩ授课班级：地点：周课时：５课时
《ＨTML＋ＣＳＳ网页设计与布局》课程教案
授课教师:ﻩ授课班级：地点: 周课时: 5 课时。
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.平时表现：通过课堂参与、提问和小组讨论等，评估学生的学习态度和积极性。
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>
美化我的网页-css+div布局页面教案
1 美化我的网页----------css+div 布局页面（教案）布局页面（教案）实训目的：实训目的：1、学会css 样式的创建、编辑和应用样式的创建、编辑和应用2、学会AP div 的创建和参数的设置的创建和参数的设置3、学会使用css+div 布局和美化网页。
布局和美化网页。
实训步骤：实训步骤：1、将素材库chaprter3 中的SX7文件夹复制到D ：\根目录下。
运行dreamweaver cs5 ,新建站点“网页特效制作”，站点文件夹为D:\SX7。
打开站点根目录新建空白文档index.html,修改标题为“CSS+DIV 布局网页”。
2、制作基本结构、制作基本结构（1）选择文档工具栏中的“拆分”视图下的<body>标签，将所有页面用一个大的<div>,既#container 包裹起来，代码如图3---1所示。
所示。
<div id=<div id=””container container””>页面层容器页面层容器</div>（2）在#container 块中写入div 的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：所示：<div id=<div id=””banner banner””>横幅图片</div> <div id=<div id=””leftbar leftbar””>侧边栏</div><div id=<div id=””content content””>页面主体</div><div id=<div id=””footer footer””>页面的底部</div>（3）选择“窗口→CSS 样式”命令或按【shift+f11】组合键打开“CSS 样式”面板，如图3—3所示，所示，◆ 图3—3“CSS 样式”面板样式”面板单击“单击“CSS CSS 样式面板右下方”的“新建CSS 规则”按钮，打开新建CSS 规则对话框。
《HTML、CSS、DIV网页设计》课程教学大纲(移动互联网-黄海平)
《HTML、CSS、DIV网页设计》课程教学大纲课程代码：21134030课程名称：HTML、CSS、DIV网页设计课程性质：专业必修课学分：3 学时：72讲课学时：36 实践/实验学时：36适用专业：软件工程先修课程：大学计算机基础一、课程目标本课程主要介绍Internet互联网基本知识，掌握网页设计基本方法。
掌握HTML和CSS的基本规范和应用。
掌握HTML语言基础及最新标准，网页基本的文字和段落的格式化，列表、图表、超链接、图像等HTML元素的使用，CSS的设计理念和高级应用，CSS常用概念如盒模型、选择器、常见属性及最新标准，表格、框架和表单。
使学生能够正确而熟练地使用HTML进行网页的设计，能够结合开发案例进行实际网页开发的设计和实现。
培养学生认识网页设计在Web应用开发中的地位及作用，加深学生对用户体验的重要性的理解，为学生今后从事Web 应用软件开发工作打下坚实的基础。
二、教学内容1.Web开发技术综述教学要求：了解Web的起源；Web前端开发的由来；Web前端开发所涉及的内容；Web 前端开发工具介绍；常见浏览器及Web前端开发涉及的标准。
教学内容：Z1. Web的起源Z2.网页设计的相关国际标准ZN3.网页设计开发环境的配置Z4.网页浏览器的兼容性问题实验内容：实验一网页设计开发环境和运行环境的配置方法，插件的下载和安装。
（1）开发工具安装：下载和安装开源代码编辑器Notepad++，标准浏览器（2）使用Notepad++编写个人简历网页2. HTML入门教学要求：掌握HTML文档的结构及其各个组成部分，熟悉和掌握头部、主体、常用标记、常见属性、语法及规范；HTML的兼容性及其测试方法。
教学内容：HTML文档的结构及其各个组成部分；常用标记、常见属性、语法及规范；Chrome程序员开发工具的使用；Z1. HTML文档的结构Z2. 常用标记、常见属性、语法及规范实验内容：实验二 HTML文档的结构的练习（1）创建一个包含html结构的简单网页（2）Chrome程序员开发工具3.CSS入门教学要求：掌握CSS的特点及3种设置方法；CSS属性中的单位；CSS文字样式； CSS 背景与颜色；CSS的继承和重叠；教学内容：CSS的特点及3种设置方法；CSS属性中的单位；文字样式；背景与颜色；Z1. CSS样式规则Z2. CSS基础选择器N3. 复合选择器Z4. 字体样式属性Z5. 样式外观属性实验内容：实验三使用CSS文本样式属性控制网页中的文本，制作网页中常见的新闻页面，效果。
HTMLCSS网页设计与布局教案
HTMLCSS网页设计与布局教案第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML标签编写简单的页面1.2 教学内容HTML简介HTML基本语法常用的HTML标签页面布局与结构1.3 教学方法讲授与示范相结合学生跟随老师一起编写简单的HTML页面1.4 教学步骤1. 介绍HTML的基本概念和作用2. 讲解HTML的基本语法和结构3. 示范使用常用的HTML标签编写简单的页面4. 学生跟随老师一起编写简单的HTML页面第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和使用方法学会使用CSS样式美化网页2.2 教学内容CSS简介CSS基本语法选择器和属性常用的CSS样式2.3 教学方法讲授与示范相结合学生跟随老师一起编写简单的CSS样式2.4 教学步骤1. 介绍CSS的基本概念和作用2. 讲解CSS的基本语法和使用方法3. 示范使用选择器和属性编写简单的CSS样式4. 学生跟随老师一起编写简单的CSS样式第三章：网页布局与设计3.1 教学目标了解网页布局的基本概念和作用掌握常用的网页布局方法学会使用CSS实现网页布局和设计3.2 教学内容网页布局概述盒模型和浮动定位和层叠响应式布局3.3 教学方法讲授与示范相结合学生跟随老师一起实现网页布局和设计3.4 教学步骤1. 介绍网页布局的基本概念和作用2. 讲解盒模型和浮动布局方法3. 示范使用定位和层叠实现网页布局4. 介绍响应式布局的概念和方法5. 学生跟随老师一起实现网页布局和设计第四章：HTML和CSS进阶4.1 教学目标掌握HTML和CSS的高级用法学会使用HTML5和CSS3的新特性了解前端框架和库的使用4.2 教学内容HTML5和CSS3新特性前端框架和库的使用HTML和CSS的优化和调试4.3 教学方法讲授与示范相结合学生跟随老师一起探索和实践4.4 教学步骤1. 讲解HTML5和CSS3的新特性2. 介绍前端框架和库的使用方法3. 探讨HTML和CSS的优化和调试技巧4. 学生跟随老师一起探索和实践第五章：项目实践5.1 教学目标学会独立完成一个简单的网页设计与布局项目巩固和运用所学的HTML、CSS知识和技能培养实际操作能力和团队协作能力5.2 教学内容项目需求分析和设计HTML和CSS代码编写项目调试和优化5.3 教学方法学生分组合作完成项目老师指导和解惑5.4 教学步骤1. 进行项目需求分析和设计2. 学生分组编写HTML和CSS代码3. 项目调试和优化4. 学生展示和讲解项目成果5. 老师点评和总结第六章：响应式网页设计6.1 教学目标理解响应式网页设计的重要性学习媒体查询的使用掌握弹性布局和网格系统实现不同设备上的适配和优化6.2 教学内容响应式设计原则媒体查询语法和用法弹性布局与固定布局网格系统的设计与应用6.3 教学方法讲授与示范相结合学生跟随老师一起完成一个响应式网页案例6.4 教学步骤1. 介绍响应式网页设计的基本原则和概念2. 讲解媒体查询的语法和使用方法3. 示范如何使用弹性布局和固定布局创建响应式设计4. 介绍网格系统的设计与应用5. 学生跟随老师一起完成一个响应式网页案例第七章：前端框架与库7.1 教学目标了解常见的前端框架与库学会使用Bootstrap、Foundation等框架掌握jQuery、React、Vue等库的基本使用7.2 教学内容前端框架与库的介绍Bootstrap和Foundation的使用方法jQuery、React和Vue的基本概念和用法7.3 教学方法讲授与示范相结合学生跟随老师一起完成一个框架或库的使用案例7.4 教学步骤1. 介绍常见的前端框架与库及其特点2. 讲解Bootstrap和Foundation的使用方法3. 示范如何使用jQuery、React和Vue实现网页特效和交互4. 学生跟随老师一起完成一个框架或库的使用案例第八章：网页性能优化8.1 教学目标理解网页性能优化的意义学习前端性能优化的方法和技巧掌握后端性能优化的基本原则8.2 教学内容网页性能优化的重要性前端性能优化的方法和技巧后端性能优化的基本原则和策略8.3 教学方法讲授与示范相结合学生跟随老师一起分析并优化网页性能8.4 教学步骤1. 介绍网页性能优化的重要性和目标2. 讲解前端性能优化的方法和技巧3. 示范如何进行后端性能优化4. 学生跟随老师一起分析并优化网页性能第九章：网页安全性9.1 教学目标了解网页安全性的重要性和挑战学习基本的网络安全知识掌握防范常见网络攻击的方法9.2 教学内容网页安全性的概念和挑战网络安全知识XSS、CSRF等常见网络攻击的防范9.3 教学方法讲授与示范相结合学生跟随老师一起了解和防范网络攻击9.4 教学步骤1. 介绍网页安全性的概念和挑战2. 讲解网络安全知识3. 示范如何防范XSS、CSRF等常见网络攻击4. 学生跟随老师一起了解和防范网络攻击第十章：项目评估与展示10.1 教学目标培养学生项目评估的能力学会如何展示和解释项目成果增强学生的表达和沟通能力10.2 教学内容项目评估的原则和方法项目展示的技巧和要点反馈和改进的机制10.3 教学方法学生自主评估和展示老师点评和指导10.4 教学步骤1. 介绍项目评估的原则和方法2. 学生准备项目展示并展示成果3. 老师点评并提供改进意见4. 学生根据反馈进行项目的最终优化和调整重点和难点解析重点环节1：HTML基本语法和结构需要重点关注的内容：HTML标签的使用、属性、嵌套和语义化。
《HTML CSS网页设计与布局》教案
《HTML CSS网页设计与布局》教案第一章：HTML基础1.1 教学目标让学生了解HTML的基本概念和作用让学生掌握HTML的基本语法和结构让学生了解常用的HTML标签及其功能1.2 教学内容HTML的基本概念和作用HTML的基本语法和结构常用的HTML标签及其功能1.3 教学步骤引入HTML的概念和作用讲解HTML的基本语法和结构通过实例演示常用的HTML标签及其功能1.4 课后作业练习使用HTML编写简单的页面学习更多的HTML标签和属性第二章：CSS基础2.1 教学目标让学生了解CSS的基本概念和作用让学生掌握CSS的基本语法和选择器让学生了解常用的CSS属性及其功能2.2 教学内容CSS的基本概念和作用CSS的基本语法和选择器常用的CSS属性及其功能2.3 教学步骤引入CSS的概念和作用讲解CSS的基本语法和选择器通过实例演示常用的CSS属性及其功能2.4 课后作业练习使用CSS样式化页面元素学习更多的CSS属性和选择器第三章：网页布局基础3.1 教学目标让学生了解网页布局的基本概念和原则让学生掌握使用CSS进行布局的方法让学生了解常用的布局方式及其优缺点3.2 教学内容网页布局的基本概念和原则使用CSS进行布局的方法常用的布局方式及其优缺点3.3 教学步骤引入网页布局的概念和原则讲解使用CSS进行布局的方法通过实例演示常用的布局方式及其应用3.4 课后作业练习使用CSS进行简单的网页布局学习更多的布局方式和技巧第四章：响应式网页设计4.1 教学目标让学生了解响应式网页设计的基本概念和原则让学生掌握使用CSS媒体查询进行响应式设计的方法让学生了解常用的响应式设计框架及其应用4.2 教学内容响应式网页设计的基本概念和原则使用CSS媒体查询进行响应式设计的方法常用的响应式设计框架及其应用4.3 教学步骤引入响应式网页设计的概念和原则讲解使用CSS媒体查询进行响应式设计的方法通过实例演示常用的响应式设计框架及其应用4.4 课后作业练习使用CSS媒体查询进行简单的响应式设计学习更多的响应式设计框架和技巧第五章：HTML和CSS综合应用5.1 教学目标让学生了解HTML和CSS综合应用的基本方法让学生掌握使用HTML和CSS制作完整的网页让学生了解常用的网页设计和布局原则5.2 教学内容HTML和CSS综合应用的基本方法使用HTML和CSS制作完整的网页常用的网页设计和布局原则5.3 教学步骤讲解HTML和CSS综合应用的基本方法通过实例演示使用HTML和CSS制作完整的网页介绍常用的网页设计和布局原则5.4 课后作业练习使用HTML和CSS制作完整的网页学习更多的网页设计和布局原则第六章：HTML高级应用6.1 教学目标让学生了解HTML高级应用的概念和作用让学生掌握使用HTML5新特性进行网页开发的方法让学生了解HTML与JavaScript的交互方式6.2 教学内容HTML高级应用的概念和作用HTML5新特性及其使用方法HTML与JavaScript的交互方式6.3 教学步骤引入HTML高级应用的概念和作用讲解HTML5新特性及其使用方法通过实例演示HTML与JavaScript的交互方式6.4 课后作业练习使用HTML5新特性进行网页开发学习更多的HTML与JavaScript交互技巧第七章：CSS高级应用7.1 教学目标让学生了解CSS高级应用的概念和作用让学生掌握使用CSS预处理器如Sass和Less的方法让学生了解CSS优化和重构的方法7.2 教学内容CSS高级应用的概念和作用CSS预处理器如Sass和Less的使用方法CSS优化和重构的方法7.3 教学步骤引入CSS高级应用的概念和作用讲解CSS预处理器如Sass和Less的使用方法通过实例演示CSS优化和重构的方法7.4 课后作业练习使用CSS预处理器进行网页开发学习更多的CSS优化和重构技巧第八章：网页设计与布局原则8.1 教学目标让学生了解网页设计的基本原则和方法让学生掌握使用HTML和CSS进行布局的技巧让学生了解响应式网页设计的原则和技巧8.2 教学内容网页设计的基本原则和方法使用HTML和CSS进行布局的技巧响应式网页设计的原则和技巧8.3 教学步骤引入网页设计的基本原则和方法讲解使用HTML和CSS进行布局的技巧通过实例演示响应式网页设计的原则和技巧8.4 课后作业练习使用HTML和CSS进行网页设计和布局学习更多的响应式网页设计原则和技巧第九章：网页设计与布局实战9.1 教学目标让学生了解网页设计与布局实战的基本流程让学生掌握使用HTML和CSS进行实战的方法和技巧让学生了解常用的网页设计与布局工具和框架9.2 教学内容网页设计与布局实战的基本流程使用HTML和CSS进行实战的方法和技巧常用的网页设计与布局工具和框架9.3 教学步骤引入网页设计与布局实战的基本流程讲解使用HTML和CSS进行实战的方法和技巧通过实例演示常用的网页设计与布局工具和框架的应用9.4 课后作业练习使用HTML和CSS进行网页设计与布局实战学习更多的网页设计与布局工具和框架的使用方法第十章：项目实训与课程总结10.1 教学目标让学生了解项目实训的基本流程和方法让学生掌握HTML和CSS网页设计与布局的综合应用能力让学生总结本课程所学知识和技巧10.2 教学内容项目实训的基本流程和方法HTML和CSS网页设计与布局的综合应用能力课程总结10.3 教学步骤引入项目实训的基本流程和方法讲解HTML和CSS网页设计与布局的综合应用能力通过实例演示项目实训的应用引导学生总结本课程所学知识和技巧10.4 课后作业完成项目实训并提交项目报告复习本课程所学知识和技巧第十一章：前端构建工具11.1 教学目标让学生了解前端构建工具的概念和作用让学生掌握使用Gulp和Webpack等工具的方法让学生了解前端自动化构建的工作流程11.2 教学内容前端构建工具的概念和作用使用Gulp和Webpack等工具的方法前端自动化构建的工作流程11.3 教学步骤引入前端构建工具的概念和作用讲解使用Gulp和Webpack等工具的方法通过实例演示前端自动化构建的工作流程11.4 课后作业练习使用Gulp和Webpack等工具进行前端构建学习更多前端自动化构建的工具和技巧第十二章：前端框架与库12.1 教学目标让学生了解前端框架和库的概念和作用让学生掌握使用React和Vue等框架的方法让学生了解前端框架和库的优势和限制12.2 教学内容前端框架和库的概念和作用使用React和Vue等框架的方法前端框架和库的优势和限制12.3 教学步骤引入前端框架和库的概念和作用讲解使用React和Vue等框架的方法通过实例演示前端框架和库的应用12.4 课后作业练习使用React和Vue等框架进行前端开发学习更多前端框架和库的使用方法第十三章：版本控制13.1 教学目标让学生了解版本控制的概念和作用让学生掌握使用Git进行版本控制的方法让学生了解版本控制的最佳实践13.2 教学内容版本控制的概念和作用使用Git进行版本控制的方法版本控制的最佳实践13.3 教学步骤引入版本控制的概念和作用讲解使用Git进行版本控制的方法通过实例演示版本控制的最佳实践13.4 课后作业练习使用Git进行版本控制学习更多关于版本控制的知识和技巧第十四章：Web性能优化14.1 教学目标让学生了解Web性能优化的概念和作用让学生掌握Web性能优化的方法和技巧让学生了解Web性能优化的工具和指标14.2 教学内容Web性能优化的概念和作用Web性能优化的方法和技巧Web性能优化的工具和指标14.3 教学步骤引入Web性能优化的概念和作用讲解Web性能优化的方法和技巧通过实例演示Web性能优化的应用14.4 课后作业练习使用Web性能优化的方法和技巧学习更多关于Web性能优化的工具和指标的知识第十五章：项目管理与团队协作15.1 教学目标让学生了解项目管理的概念和作用让学生掌握项目管理和团队协作的方法和技巧让学生了解项目管理和团队协作的工具和平台15.2 教学内容项目管理的概念和作用项目管理和团队协作的方法和技巧项目管理和团队协作的工具和平台15.3 教学步骤引入项目管理的概念和作用讲解项目管理和团队协作的方法和技巧通过实例演示项目管理和团队协作的应用15.4 课后作业练习使用项目管理和团队协作的方法和技巧学习更多关于项目管理和团队协作的工具和平台的知识重点和难点解析本文主要介绍了《HTML CSS网页设计与布局》的教学教案，内容涵盖了HTML 基础、CSS基础、网页布局基础、响应式网页设计、HTML高级应用、CSS高级应用、网页设计与布局原则、网页设计与布局实战、前端构建工具、前端框架与库、版本控制、Web性能优化以及项目管理与团队协作等十五个章节。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3 文字闪烁
4 设置网页背景颜色
5 在网页中插入图像
6 设置背景图片
教学重点难点
重点：网页中的文字和图片
难点：背景图片的设置，网页中图像的使用
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
课后小结
课次
第5课次，总 14课次
章节名称
第五章 多媒体、滚动字幕和列表
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。
教学目标
掌握各种多媒体的插入方式
学会滚动字幕的设置
学会在网页中添加各种列表
掌握菜单列表的使用
教学基本内容
1 添加表单，链接跳转、链接跳转方式、表单名称
2 输入标签，文本框、密码框、单选框、复选框、提交按钮、重置按钮、图像按钮、文件域、隐藏域
3 下拉列表
4 文本域
教学重点难点
重点：表单和输入框的基本概念和使用方法
难点：文本域的使用
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
7 表格标题
8 表格嵌套
教学重点难点
重点：表格的嵌套、单元格的对齐
难点：表格的各种对齐方式
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
课后作业
书后选择题，填空题，简答题。
参考资料
阅读教材本章书后选择题，填空题，简答题。
参考资料
阅读教材本章次
第7课次，总 14课次
章节名称
第七章 框架
章节名称
第二章网页文字和图片
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。
教学目标
学习文字格式
掌握与文字排版相关的元素
学习文字闪烁
设置网页背景颜色
在网页中插入图像
设置背景图片
教学基本内容
1 文字格式，设置文字大小、设置字体、设置字体颜、加粗与斜体、下划线与删除线、上标与下标、等宽字。
教学目标
认识网站开发
了解HTML基本概念
练习一个简单的HTML实例
掌握HTML基本标记
教学基本内容
1 认识网站开发，网页设计概述、网页构成元素、网站建设流程、网站开发软件。
2 HTML基本概念，HTML简介、HTML基本结构。
3 一个简单的HTML实例，编写HTML代码、运行HTML文件查看效果
4 HTML基本标记，HTML头标结
课次
第6课次，总 14课次
章节名称
第六章 表单
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。
教学目标
了解表单的基本概念掌握表单的各种元素掌握各 Nhomakorabea输入标签
掌握文本框的应用方法
教学基本内容
行和列的合并
掌握表格的嵌套
教学基本内容
1 创建表格
2 表格属性，表格宽度、表格高度、表格背景图片、单元格间距、表格内单元格与文字的距离
3 表格边框，边框宽度、颜色、亮边框颜色、暗边框颜色
4 设置表格行的对齐方式，垂直对齐方式、水平对齐方式
5 行和列的合并，列的合并、行的合并
6. 表格结构，表头、主体、表尾
课后作业
书后选择题，填空题，简答题。
参考资料
阅读教材本章内容网络上查阅网页的构成百科：网页中的图像。课后小结
课次
第3课次，总 14课次
章节名称
第三章网页基本编辑
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。
教学目标
1 多媒体元素，插入多媒体元素、循环播放、自动播放、隐藏多媒体元素
2 插入背景音乐
3 滚动字幕，添加滚动字幕、滚动方向、滚动方式、滚动字幕背景颜色、滚动速度、 滚动延迟、 滚动次数、 滚动字幕空白空间、 设置鼠标经过效果
4 无序列表，无序列表结构、无序列表的列表项样式
5 有序列表，有序列表结构、有序列表的列表项样式
教学重点难点
重点：网站与网页基础知识、基本概念
难点：网站建立及管理
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
课后作业
书后选择题，填空题，简答题。
参考资料
阅读教材本章
第 2 课次，总 14课次
创建超链接
学习锚点
掌握图像的超链接
教学基本内容
1 创建超链接，超链接标记、链接地址、打开链接的方式
2 锚点，创建锚点、链接到本页锚点、链接到其他网页的锚点
3 图像的超链接，将整个图像设为链接、设置图像热点区域
教学重点难点
重点：图像热点、图像链接
难点：网页中的各种图像锚点
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
课后作业
书后选择题，填空题，简答题。
参考资料
阅读教次
第4课次，总 14课次
章节名称
第四章表格
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。
教学目标
掌握表格的所有属性
设置表格行的对齐方式
6 嵌套列表
7 定义列表
8 目录列表
9 菜单列表
教学重点难点
重点：各种形式的列表、滚动字幕的设计
难点：各种列表的互相嵌套
教学过程设计
教师使用PPT结合板书，讲述本章各个知识点，结合案例加强学生的理解，并引导学生参与部分问题的讨论。
课后作业
书后选择题，填空题，简答题。
参考资料
阅读教材本章内容
网络上查阅列表的构成
课程名称
HTML+CSS+DIV网页设计与布局
课程性质
网页搭建
开课学院（部）
软件学院
系/教研室
主讲教师
课程号
课程学时
课程学分
课次
第 1 课次，总14课次
章节名称
第一章认识网站开发
授课方式
课堂讲授（ √ ）；实验（ ）；
研讨（ ）； 上机（ ）
教学 时数
2
授课方法手段
使用PPT结合板书讲授，师生互动，研讨。