《HTML+CSS网页设计与布局》教案设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
静态网页的特点：
（1）容相对稳定，容易被搜索引擎检索到；
（2）没有数据库支持，在制作和维护方面工作量大；
（3）交互性差，在功能方面有很大的限制。
动态网页的特点：
（1）以数据库技术为基础，可大大降低维护的工作量；
（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；
（3）不利于使用搜索引擎进行推广。
2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？
二、告知学生课堂任务
本次课所学习的主要容是HTML相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学容
1、和网页的区别：
（1）网页是Internet基本元素；
（2）由网页组成；
2、静态网页和动态网页：
（3）网页文件命名：首页文件名默认为：index.htm 或 index.html；
（4）HTML 文件结构：
<HTML>
<HEAD>
<title></title>
</HEAD>
<BODY>
HTML 文件的正文
</BODY>
</HTML>
（5）用编辑器手工编写第一网页；
8、学生实训及辅导；
9、Dreamweaver软件界面介绍：
18、学生实训及辅导；
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、HTML基础知识及常用标记；
约15分钟
约35分钟
约20分钟
约30分钟
约20分钟
约20分钟
约20分钟
约30分钟
约20分钟
约30分钟
约20分钟
约20分钟
约40分钟
（6）上标与下标：<sup>上标</sup> <sub>下标</sub>
15、学生实训及辅导；
16、字体标记：
（1）字体大小：<font size="1">字体大小</font>
（2）字体颜色：<font color="">字体颜色</font>
（3）设置标题字体：<h#>主题文字</h#>
（4）物理字体：
<EM>…</EM>强调文字。
<STRONG>…</STRONG>字体加重。
<CODE>…</CODE>显示编程代码。
<SAMP>…</SAMP>显示示例文字。
<KBD>…</KBD>显示键盘按键文字。
<SMALL>…</SMALL>缩小文字。
<BIG>…</BIG>放大文字。
17、字体标记实例讲解；
（3）页面属性设置
（4）预览网页
13、学生实训及辅导；
14、HTML常用标记：
（1）标题标记：<h#>主题文字</h#>
（2）段落标记：<p>这里表示段落</p>
（3）换行与注释：<br>、<!--这里放注释-->
（4）粗体与斜体：<b>粗体</b>、<i>斜体</i>
（5）删除线与下划线：<s>删除线</s>、<u>下划线</u>
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1)使学生了解网页设计的相关基础知识；
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1)了解网页设计相关概念和网页的类型；
3、常见网页类型：形象页、主页、栏目页、页、新闻详细页等；
4、网页设计原则：
（1）了解客户需求
（2）遵循Web标准
（3）运用形式美法则
5、网页设计流程：
（1）手绘效果图：确定网页主题容和风格
（2）设计效果图：搜集、整合设计所需素材
（3）版面编辑：网页的制作与实现
（4）网页美化：动画设计，网页测试和发布
静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
6、网页设计的主要软件：
（1）Photoshop
（2）Dweamveawer
（3）Flash
（4）Firworks
7、HTML基础知识：
（1）HTML概念：Hyper Text Markup Language 超文本标识语言；
（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；
4)熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
置
10、Dreamweaver站点创建：
站点->新建站点->设置站点名称->设置站点默认图像文件夹。
11、学生实训操作：Dreamweaver站点创建与设置；
12、Dreamweaver创建第一个网页：
（1) 名称：index.html
（2) 设置标题、输入文本、输入特殊字符
<B>…</B>，将字符设置成粗体。
<I>…</I>，将字符设置成斜体。
<U>…</U>，给字符增加下划线。
<S>…</S>，给字符增加删除线。
<TT>…</TT>，将字符设置成打字机字体。
<SUP>…</SUP>，将字符设置成上标字体。
<SUB>…</SUB>，将字符设置成下标字体。
（5）逻辑字体：
学生理解
学生熟记
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
容
文字布局
插入图像
超级
教学
目标
3)使学生熟练掌握HTML常用标记的基本使用方法；
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
重点
难点
3)掌握各种HTML常用标记的基本使用方法；
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及容提要
时间
分配
备注
教学过程设计
一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；
（1）容相对稳定，容易被搜索引擎检索到；
（2）没有数据库支持，在制作和维护方面工作量大；
（3）交互性差，在功能方面有很大的限制。
动态网页的特点：
（1）以数据库技术为基础，可大大降低维护的工作量；
（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；
（3）不利于使用搜索引擎进行推广。
2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？
二、告知学生课堂任务
本次课所学习的主要容是HTML相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学容
1、和网页的区别：
（1）网页是Internet基本元素；
（2）由网页组成；
2、静态网页和动态网页：
（3）网页文件命名：首页文件名默认为：index.htm 或 index.html；
（4）HTML 文件结构：
<HTML>
<HEAD>
<title></title>
</HEAD>
<BODY>
HTML 文件的正文
</BODY>
</HTML>
（5）用编辑器手工编写第一网页；
8、学生实训及辅导；
9、Dreamweaver软件界面介绍：
18、学生实训及辅导；
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、HTML基础知识及常用标记；
约15分钟
约35分钟
约20分钟
约30分钟
约20分钟
约20分钟
约20分钟
约30分钟
约20分钟
约30分钟
约20分钟
约20分钟
约40分钟
（6）上标与下标：<sup>上标</sup> <sub>下标</sub>
15、学生实训及辅导；
16、字体标记：
（1）字体大小：<font size="1">字体大小</font>
（2）字体颜色：<font color="">字体颜色</font>
（3）设置标题字体：<h#>主题文字</h#>
（4）物理字体：
<EM>…</EM>强调文字。
<STRONG>…</STRONG>字体加重。
<CODE>…</CODE>显示编程代码。
<SAMP>…</SAMP>显示示例文字。
<KBD>…</KBD>显示键盘按键文字。
<SMALL>…</SMALL>缩小文字。
<BIG>…</BIG>放大文字。
17、字体标记实例讲解；
（3）页面属性设置
（4）预览网页
13、学生实训及辅导；
14、HTML常用标记：
（1）标题标记：<h#>主题文字</h#>
（2）段落标记：<p>这里表示段落</p>
（3）换行与注释：<br>、<!--这里放注释-->
（4）粗体与斜体：<b>粗体</b>、<i>斜体</i>
（5）删除线与下划线：<s>删除线</s>、<u>下划线</u>
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1)使学生了解网页设计的相关基础知识；
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1)了解网页设计相关概念和网页的类型；
3、常见网页类型：形象页、主页、栏目页、页、新闻详细页等；
4、网页设计原则：
（1）了解客户需求
（2）遵循Web标准
（3）运用形式美法则
5、网页设计流程：
（1）手绘效果图：确定网页主题容和风格
（2）设计效果图：搜集、整合设计所需素材
（3）版面编辑：网页的制作与实现
（4）网页美化：动画设计，网页测试和发布
静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
6、网页设计的主要软件：
（1）Photoshop
（2）Dweamveawer
（3）Flash
（4）Firworks
7、HTML基础知识：
（1）HTML概念：Hyper Text Markup Language 超文本标识语言；
（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；
4)熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
置
10、Dreamweaver站点创建：
站点->新建站点->设置站点名称->设置站点默认图像文件夹。
11、学生实训操作：Dreamweaver站点创建与设置；
12、Dreamweaver创建第一个网页：
（1) 名称：index.html
（2) 设置标题、输入文本、输入特殊字符
<B>…</B>，将字符设置成粗体。
<I>…</I>，将字符设置成斜体。
<U>…</U>，给字符增加下划线。
<S>…</S>，给字符增加删除线。
<TT>…</TT>，将字符设置成打字机字体。
<SUP>…</SUP>，将字符设置成上标字体。
<SUB>…</SUB>，将字符设置成下标字体。
（5）逻辑字体：
学生理解
学生熟记
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
容
文字布局
插入图像
超级
教学
目标
3)使学生熟练掌握HTML常用标记的基本使用方法；
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
重点
难点
3)掌握各种HTML常用标记的基本使用方法；
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及容提要
时间
分配
备注
教学过程设计
一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；