第一篇：HTML教案第五章
课程名称：使用HTML语言开发商业站点
教案
《HTML》理论课教案
第5章 使用Dreamweaver制作网页
一、整章授课思路 [100分钟].................................................................................................................2 1.2.3.4.5.6.7.8.9.10.回顾、预习检查、任务、目标部分 [10分钟].......................................................2 基本标签的使用[10分钟]........................................................................................2 表格的使用，创建表格布局页面[10分钟].............................................................3 课堂练习1[10分钟]................................................................................................3 表单的使用，结合表格布局进行使用 [10分钟]...................................................4 课堂练习2 [10分钟]................................................................................................4 制作框架网页[10分钟]............................................................................................4 制作样式表 [15分钟]..............................................................................................5 课堂练习3 [10分钟]................................................................................................5 总结[5分钟].............................................................................................................5
二、学员问题汇总.....................................................................................................................................5
三、作业布置.............................................................................................................................................6
-课程名称：使用HTML语言开发商业站点
教案
结合如何制作一个图文并茂的页面示例，仿效演示并穿插讲解：
1)2)3)4)5)6)如何设置页面背景、标题。如何插入图片。
如何插入段落、换行。如何设置超链接。
如何格式化文本：文字颜色、字号等 如何插入项目列表
3.表格的使用，创建表格布局页面[10分钟]
讲解重点：
结合如何制作一个新产品展示表格页面，依次演示并穿插讲解：
1.创建跨行或跨列的表格。2.设置表格背景
3.设置单元格背景色，对齐方式。
4.课堂练习1[10分钟]
练习使用表格布局多张图片，关键是设置表格的边框、填充、边界均为0。
教案
课程名称：使用HTML语言开发商业站点
教案
1）2）如何制作框架窗口。
如何设置超链接打开目标窗口。
8.制作样式表 [15分钟]
结合如何美化表格页面、制作图片按钮、依次演示并穿插讲解：（1）如何使用Dreamweaver制作各类样式。（2）如何应用样式
如何使用Dreamweaver制作样式，参考文件夹“补充案例使用Dreamweaver制作样式实例.htm”
9.课堂练习3 [10分钟] 练习上述讲解的各种样式
10.总结[5分钟] 7)8)9)10)创建表格最少需要那三个标签？ 简述表格的基本结构。
跨行跨列的表格，主要在什么情况下使用？ 给你一个表格，你会从哪些方面进行美化？
二、学员问题汇总
问题1：
答：。。。 问题2：
--6 课程名称：使用HTML语言开发商业站点
<![CDATA[<BODY></p><h2>第二篇：html教案</h2><p>《HTML基础》教案</p><p>教材：《dreamweaver cs3网页制作与实训》</p><p>执教：罗执清</p><p>一、教学目标：</p><p>1、了解HTML的概念、作用及特点</p><p>2、理解HTML文档结构</p><p>3、掌握标签的使用规范</p><p>4、了解常用标签的用法</p><p>二、教学重点：</p><p>1、HTML文件结构</p><p>2、标签使用规范</p><p>3、常用标签的使用</p><p>三、教学难点： HTML概念的理解</p><p>四、教学方法：</p><p>直观演示和任务驱动相结合</p><p>五、教学过程：</p><p>1、回顾站点管理相关操作</p><p>2、HTML概念及作用</p><p>3、HTML文件结构</p><p><html>：HTML文档开始。</p><p><head>：文档头部开始。</p><p><title>：文档标题开始。</p><p>HTML基础：文档标题。</p><p></title>：文档标题结束。</p><p></head>：文档头部结束。</p><p><body>：文档主体开始。</p><p>一个简单的网页：文档主体内容，它是网页的最主要部分。</p><h2>第三篇：HTML 教案</h2><p>HTML语言</p><p>一、基本元素</p><p>1.html元素：<html>…</html> 2.head元素：<head>…</head> 3.title元素：在浏览器标题栏和windows任务栏上显示<title>…<title> 4.body元素：<body>…</p><h2>第四篇：HTML教案第三章</h2><p>课程名称：使用HTML语言开发商业站点</p><p>教案</p><p>《HTML》理论课教案</p><p>第3章 表单和框架</p><p>一、整章授课思路 [100分钟].................................................................................................................2 1.2.2.1 2.2 2.3 3.3.1 3.2 4.5.5.1 5.2 5.3 5.4 5.5 6.回顾、预习检查、任务、目标部分 [10分钟].....................................................3 [表单页面的基本结枸[10分钟].............................................................................3 为什么需要表单？.......................................................................3 表单包含的控件：.......................................................................3 表单页面的基本结构。...............................................................3 各种表单控件的逐一介绍[20分钟].......................................................................4 表单元素的统一格式。...............................................................4 各种表单元素逐一介绍，先讲解语法，然后举例...................4 课堂练习[15分钟]...................................................................................................5 框架[25分钟]...........................................................................................................6 框架窗口的组成...........................................................................6 框架的使用场合。.......................................................................6 框架的基本结构。.......................................................................6 如何创建多个复杂的窗口。.......................................................6 如何设置窗口链接的显示位置。...............................................6 课堂练习2[15分钟]................................................................................................7 编写如下图所示效果对应的html代码..............................................................................7 7.总结[5分钟].............................................................................................................7</p><p>二、学员问题汇总.....................................................................................................................................7</p><p>三、作业布置.............................................................................................................................................7</p><p>-单行文本输入框(TEXT)密码框(PASSWORD)单选按钮(RADIO)复选框(CHECKBOX)下拉列表框(SELECT)按钮：重置按钮(RESET)、提交按钮(SUBMIT)、普通按钮(BUTTON)多行文本框(TEXTAREA)课程名称：使用HTML语言开发商业站点</p><p>教案</p><p>送到脚本，而不使用请求字符串。语法：method=(get|post) 课堂案例：表单的基本结构 补充案例：详细介绍post和get提交方式的区别。</p><p>get传送的数据量较小，不能大于2KB。post传送的数据量较大。POST一般用于提交的信息比较大的情况，它比GET要安全，因为由它提交的信息不会显示在浏览器地址栏上，而GET则用于提交信息比较小的情况，它的速度比POST要快，但是安全性低，因原因是提交的信息会在浏览器地址栏中显示出来，例如提交密码就不能用GET，必须用POST。当我们提交的信息较少且对安全要求不高的时候就可以使用GET，比如百度搜索（演示）。</p><p>3.各种表单控件的逐一介绍[20分钟]</p><p>3.1 表单元素的统一格式。</p><p>常用属性有：</p><p> type：指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认值为TEXT。</p><p> NAME：指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们教案 课程名称：使用HTML语言开发商业站点</p><p>教案</p><p>5.框架[25分钟]</p><p>5.1 框架窗口的组成 框架集页面(FrameSet.htm)广告栏顶部框架(top.htm)框架的边框</p><p>导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)5.2 框架的使用场合。</p><p> 在页面的一个固定部分显示Logo或静态信息</p><p> 左侧框架显示目录，右侧框架显示内容，用户只需单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。</p><p> 框架能有机地把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。</p><p>5.3 框架的基本结构。</p><p> <FRAME>（框架）</p><p> <FRAMESET></FRAMESET>（框架集）页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口、左右分割窗口、嵌套分割窗口。</p><p> 演示将<FRAMESET>放在<BODY>中是否可以显示，引出：HTML 文档可包含 FRAMESET元素或BODY元素之一，而不能同时包含两者。但是可以在<noframe></noframe>标签对中使用<body></p><h2>第五篇：HTML教案第四章</h2><p>第9次课 CSS基础 课时：4课时</p><p>一、教学目标</p><p>1.2.3.4.会创建无下划线的超链接样式 会创建统一外观的字体文本 会创建个性化的表单 会创建个性化的表格</p><p>二、教学重点</p><p>1.样式的基本语法</p><p>2.会创建常见的样式：统一的文字、颜色等外观、无下划线的超链接、细边框输入框</p><p>三、教学难点</p><p>内嵌样式、行内样式、样式表文件的使用场合</p><p>四、教学过程</p><p>【回顾】[10分钟] 回顾之前所学基本标签，引导学生在网页美化以及格式修改中遇到的问难。从而引入样式表。</p><p>前几次课所学的标签，在网页中呈现出的效果，比较简单，样式比较单一。CSS主要用于改变网页中标签的样式，使网页变得更华丽。可以从外观上更能吸引读者。CSS相当于华丽的衣服样式表能实现内容与样式的分离，方便团队开发。</p><p>1.样式表的基本语法[10分钟]</p><p>1)样式表的基本结构。2)样式规则并举例说明。3)引入类样式。</p><p> 课堂案例：样式表的基本语法</p><p>2.文本属性[10分钟] 引入：</p><p>首先从文本的大小，颜色，字体等来描述文本属性。强调用样式来实现文本的大小颜色字体的显示的好处</p><p>5.方框属性[15分钟]</p><p> 引入：</p><p>首先从文本的大小，颜色，字体等来描述文本属性。 讲解要点：</p><p>1)盒子模式：以网页中放入的一副图片，说明盒子模式设计的各种边界、填充、边框的含义。</p><p>2)应用边框属性、填充属性，制作常见的表格多列中分界线样式。3)应用边框属性，制作细边框输入框样式。</p><p> 课堂案例：</p><p>6.特殊样式[5分钟]</p><p> 讲解要点：</p><p>无下划线的超俩链接的制作方法。 课堂案例：</p><p>7.课堂练习2[10分钟]</p><p>编写如下图所示效果对应的HTML代码</p><p>一、作业布置</p><p>参考答案： <HTML> <HEAD> <META http-equiv=“Content-Type” content=“text/html;charset=gb2312”> <TITLE>外部样式表练习</TITLE> <LINK rel=“stylesheet” type=“text/css” href=“css.css”> </HEAD></p><p><BODY> <FORM> <TR> <TD colspan=“2”></TD> </TR> <TR> <TD width=“498” > <TR> <TD colspan=“2” height=“27” class=“loginHead”>拍拍用户登陆</TD> </TR> <TR>5</p><p><TD width=“120” class=“lefttd”>QQ号码</TD> <TD width=“265”><INPUT type=“text” class=“inputMain”> 忘记QQ号码>></TD> </TR> <TR><TD class=“lefttd”>QQ密码</TD><TD><INPUT type=“text” class=“inputMain”> 忘记密码>></TD></TR> <TR><TD colspan=“2” align=“center”><INPUT type=“submit” value=“" class=”picButton“></TD></TR> </TD> <TD width=”451“></TD> </TR> <TR><TD colspan=”2“></TD></TR> </FORM></p></div>
<div class="morebg"></div>
<div class="read"><span class="progress" style="display:none;"></span><span class="read-more" onclick="showMore()" id="show-more-btn" style="display: none;">展开阅读全文 ∨</span></div>
<script>
function showMore() {
var content = document.querySelector('.content');
var showMoreBtn = document.querySelector('#show-more-btn');
var progress = document.querySelector('.progress');
content.style.maxHeight = 'none';
showMoreBtn.style.display = 'none';
progress.style.display = 'none';
}
var content = document.querySelector('.content');
var showMoreBtn = document.querySelector('#show-more-btn');
var moreBg = document.querySelector('.morebg');
var progress = document.querySelector('.progress');
if (content.scrollHeight > 1800) {
showMoreBtn.style.display = 'inline-block';
moreBg.style.display = 'block';
progress.style.display = 'inline-block';
var totalHeight = content.scrollHeight;
var visibleHeight = content.clientHeight;
var remainingHeight = totalHeight - visibleHeight;
var percentage = Math.round((remainingHeight / totalHeight) * 100);
progress.innerHTML = '剩余 ' + percentage + '% 未读';
}
</script>
<div id="ad6"></div>
</div>
</div>
<ul class="btn w4">
<div class="tzt-panel bg">
<div class="tzt-panel_bd">
<p><strong>版权声明：</strong>此文自动收集于网络，若有来源错误或者侵犯您的合法权益，您可通过邮箱与我们取得联系，我们将及时进行处理。</p>
<p><strong>本文地址：</strong>https://www.feisuxs.com/wenku/jingpin/15/2183130.html</p>
</div>
</div>
<div class="nextlog">
<div class="prev"><span>上一篇：</span><a href='https://www.feisuxs.com/wenku/jingpin/15/2183129.html'>第11单元一个人的流派--德彪西</a></div>
<div class="next"><span>下一篇：</span><a href='https://www.feisuxs.com/wenku/jingpin/15/2183131.html'>《多彩的纸巾》教案</a></div>
</div>
</ul>
</div>
<div class="m-tit2">
<h3><span>相关内容</span></h3>
</div>
<div class="logbox">
<div class="link-box">
<ul class="rexlist">
</ul>
</div>
</div>
</div>
<!--content end-->
<div class="zd-sidebar" id="zd-sidr">
<div class="zd-box">
<div class="zd-sdc">
<ul class="zd-btn w3">
<li><a class="" href="/wenku">全部</a>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/1/">1号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/2/">2号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/3/">3号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/4/">4号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/5/">5号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/6/">6号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/7/">7号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/8/">8号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/9/">9号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/10/">10号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/11/">11号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/12/">12号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/13/">13号文库</a></li>
<li><a class="" href="https://www.feisuxs.com/wenku/jingpin/14/">14号文库</a></li>
<li><a class="cur" href="https://www.feisuxs.com/wenku/jingpin/15/">15号文库</a></li>
</ul>
</div>
</div>
<dl class="function" id="cead">
<dd class="function_c">
<div id="ad1"></div>
</dd>
</dl>
<dl class="function" id="divPrevious">
<dt class="function_t">热门阅读</dt>
<dd class="function_c">
<ul>
</ul>
</dd>
</dl>
<dl class="function" id="cead">
<dd class="function_c">
<div id="ad2">
</div>
</dd>
</dl>
<div class="zd-box">
<div class="zd-sdc">
<h3>最新更新</h3>
<ul class="zd-btn w3">
</ul>
</div>
</div>
<dl class="function" id="cead">
<dd class="function_c">
<div id="ad3">
</div>
</dd>
</dl>
<dl class="function" id="divPrevious">
<dt class="function_t">随机推荐</dt>
<dd class="function_c">
<ul>
</ul>
</dd>
</dl>
<dl class="function" id="cead">
<dd class="function_c">
<div id="ad4">
</div>
</dd>
</dl>
</div> <!--sidebar end-->
</div><!--main end-->
<div class="zd-footer">
<p>世界看中国，中国有成语！学成语，传文化！</p>
<p>Copyright © 2018-2023 <a href="/" target="_blank">成语大全</a> | <a href="http://beian.miit.gov.cn/" target="_blank">鲁ICP备2020040657号-2</a> | <span class="gaba"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=37028302000876" rel="noreferrer" target="_blank"><img src="/images/foot-ga.png">鲁公网安备37028302000876号</a></span></p>
</div>
<!--mseach start-->
<div class="zd-m-search-wrap none" id="zd-m-nav-search">
<div class="zd-m-search-input">
<a href="javascript:void(0)" onclick="switchSearch();return false;"><span class="zd-m-back-btn">返回</span></a>
<div class="zd-m-input-box">
<form method="post" name="searchform" class="zd-m-search-form" action="https://www.feisuxs.com/e/search/index.php">
<input type="hidden" name="tbname" value="cy">
<input type="hidden" name="show" value="title">
<input type="hidden" name="tempid" value="1">
<input name="keyboard" autocomplete="off" autocorrect="off" id="kw" type="text" placeholder="输入要查询的成语" autocomplete="off">
<div class="zd-m-searchbtn"><input type="submit" value="搜索" class="zd-m-s-btn"></div>
</form>
</div>
</div>
<div class="zd-index-hint">
<h4><span>历史搜索</span></h4>
<div class="zd-hint-box zd-index-history">
<a href='https://www.feisuxs.com/e/search/result/?searchid=3065' target=_blank>耐人寻味</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3064' target=_blank>冰心</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3063' target=_blank>蛇</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3062' target=_blank>风 浪</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3061' target=_blank>花花</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3060' target=_blank>润</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3059' target=_blank>野</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3058' target=_blank>小可</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3057' target=_blank>绿油油</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=3056' target=_blank>战场</a><br></div>
</div>
<div class="zd-index-hint">
<h4><span>大家都在搜</span></h4>
<div class="zd-hint-box">
<a href='https://www.feisuxs.com/e/search/result/?searchid=12' target=_blank>小说</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=588' target=_blank>随笔</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=922' target=_blank>余</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=803' target=_blank>主题教育</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=27' target=_blank>飘飘欲仙</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=127' target=_blank>小说</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=16' target=_blank>妈妈</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=868' target=_blank>花</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=790' target=_blank>瀑布</a> <a href='https://www.feisuxs.com/e/search/result/?searchid=31' target=_blank>爱</a><br></div>
</div>
</div>
<a id="zd-gotop" href="javascript:void(0)"></a>
<script type="text/javascript" src="https://www.feisuxs.com/js/jquery.min.js"></script>
<script type="text/javascript" src="https://www.feisuxs.com/js/jquery.sidr.min.js"></script>
<script type="text/javascript" src="https://www.feisuxs.com/js/common.js?v=20220310"></script>
<script type="text/javascript" src="https://www.feisuxs.com/js/mnjc-pay.1.5.3.min.js?dsd253344555"></script>
</body>
</html>]]>
