HTML语言教案

格式：doc
大小：25.00 KB
文档页数：2

第一课时：简单的HTML语言的使用

①打开Frontpage，选择【HTML】标签；

——超文本标记语言

——头部信息，包含文字标注，软件名称

——网页标题 </p><p><body>——主体部分 </p><p>②输入示例文字1，换行输入示例文字2 </p><p><p>——换行 </p><p><b>——粗体 </p><p><u>——下划线 </p><p><I>——斜体 </p><p><font face=”隶书” color=”#FF0000” size=”5”>——字体格式 </p><p><aline=center>——对齐方式 </p><p>③插入2*2表格，粗细为0 </p><p><table>——表格 </p><p><border>——粗细 </p><p><width>——宽度 </p><p><tr>——行标题 </p><p><td>——列标题 </p><p>④设置背景图片 </p><p><background>——网页背景 </p><p>⑤设置表格背景 </p><p><bgcolor>——背景颜色 </p><p>⑥设置背景音乐 </p><p><bgsound src>——背景音乐 </p><p>⑦设置文字超链接到文件，设置图片超链接到网址 </p><p><a href>——超链接 </p><p>⑧设置超链接的颜色 </p><p><link>——超链接颜色 </p><p><vlink>——已访问的超链接 </p><p><alink>——当前超链接 </p><p>⑨演示几个动态HTML例子，学生上机练习，要求能更改例子中的图片或者文字，有能力的可以叠加效果。第二课时：SCRIPT和CSS的简单使用 </p><p>① 打开Frontpage，选择【HTML】标签； </p><p>在body区输入演示简单的示例后学生练习： </p><p><script language="javascript"> </p><p>alert("我的第一个java程序！") </p><p></script> </p><p>【总结】 </p><p>1、 javascript语言写在BODY区； </p><p>2、alert表示弹出对话框 </p><p>② 简单介绍CSS的定义、类型及区别，然后演示 </p><p>【嵌入式】 </p><p><table style="color:red;font-size:10pt"> </p><p>【内联式】 </p><p>head区定义： </p><p><style type="text/css"> </p><p> </p><p></style> </p><p>body区使用： </p><p><span class=样式类名称>文字</span> </p><p>【外联式】 </p><p><link href="样式表名称.css" rel="stylesheet" type="text/css"> </p><p>【总结】 </p><p>关于怎么判断是何种类型的样式表？ </p><p>1、代码中出现“{}”的，是内联式样式表； </p><p>2、代码中没“{}”，出现“**.css”字样的，是外联式样式表； </p><p>3、代码中既没有“{}”，也没有“**.css”字样的，是嵌入式样式表，或者就是普通的HTML代码 </p> </div> </div> </article> </div> </div> <div class="recommended"> <div class="theme-pd-hj"> <div class="hd-main"> <div class="hd-main-pd"> <div class="header hd-position"> <div class="title"> <h3>合集下载</h3> <i class="bg bg-4"></i> </div> </div> </div> </div> <div class="container-article"> <div class="article-ul"> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/153598c826fff705cc170a35.webp" alt="网页制作教案"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="153598c826fff705cc170a35" data-did="214609123">网页制作教案</h2> <div class="module-content-item"> <div class="item-overflow"> <p>教 </p><p>案 </p><p>课程网页制作 </p><p>2016——2017学年第一学期 </p><p>班级计算机应用二年级 </p><p>教师胡发萍 </p><p>课时进度表 </p><p>周次教学内容 </p><p>1 第一章网页制作基础 </p><p>2 第一章网页制作基础 </p><p>3 第二章 DreamWeaver MX 入门 </p><p>4 第二章 DreamWeaver MX 入门 </p><p>5 第三章网页的布局和定位 </p><p>6 网页的布局和定位 </p><p>7 第四章网页版面设计与制作 </p><p>8 第四章网页版面设计与制作 </p><p>9 复习 </p><p>10 期中考试 </p><p>11 第五章网页动画设计与制作 </p><p>12 第五章网页动画设计与制作 </p><p>13 第六章网站鉴赏与设计 </p><p>14 第六章网站鉴赏与设计 </p><p>15 第七章网页动态效果的制作 </p><p>16 第七章网页动态效果的制作 </p><p>17 第八章网页动态效果的制作 </p><p>18 第八章网页动态效果的制作 </p><p>19 复习 </p><p>20 期终考试 </p><p>网页制作全册备课 </p><p>总课时 96课时任课教师曾玉洪 </p><p>教材分析 </p><p> 本书以初学者和专业网页制作人员为教学对象，以怎样建立一个网站，怎样才能设计出一个精美出色的网站，学生制作网页应该从哪儿入手，应该学会哪些制作网站的技术入手，主要以介绍静态网页为主，采用实例教学的方式，向学生讲解如何使用DreamWeaver网页制作软件进行网页的制作与开发。 </p><p>教材重点 </p><p> 第二章 DreamWeaver MX 入门 </p><p>第三章网页的布局和定位 </p><p>第四章快速建站技术 </p><p>第五章用FLASH加工美化网页 </p><p>第六章用PS处理网页图片 </p><p>第七章网站设计 </p><p>第八章网页动态效果的制作 </p><p>教材难点 </p><p> 第二章 DreamWeaver MX 入门 </p><p>第三章网页的布局和定位 </p><p>第四章快速建站技术 </p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/e715261f5901020206409c16.webp" alt="HTML网页设计技术教案"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="e715261f5901020206409c16" data-did="320359109">HTML网页设计技术教案</h2> <div class="module-content-item"> <div class="item-overflow"> <p>《HTML网页设计技术》 </p><p>教案首页 </p><p>本次课标题：说课授课日期第6周周1 </p><p>授课班级课时 1 上课地点 </p><p>教 </p><p>学 </p><p>目 </p><p>标能力目标知识目标 </p><p>1. 本课程的任务、性质、目的 </p><p>2. 本课程的教学内容介绍与要求 </p><p>3. 本课程的能力培养及教学要求 </p><p>4. 本课程的考核要求 1. 熟悉本课程的地位与前后课程的衔接关系 </p><p>2. 了解本课程所涉及的网页设计技能 </p><p>教 </p><p>学 </p><p>任 </p><p>务 </p><p>能描述本课程在课程体系中的地位及作用 </p><p>重 </p><p>点 </p><p>难 </p><p>点重点： </p><p>1.熟悉简介本课程的教学内容 </p><p>难点： </p><p>1.本课程的性质、目的、任务 </p><p>2.本课程的能力培养要求 </p><p>作业或 </p><p>考核 </p><p>能概述本课程的课程要求及教学内容参 </p><p>考 </p><p>资 </p><p>料网页设计[M].电子工业出版社,2010 </p><p>《CSS+DIV网页设计开发技术与实例应用》，电子工业出版社，2011 </p><p>注：表格内容统一用5号宋体填写。 </p><p>教学设计 </p><p>步骤教学内容教师活动 </p><p>（方法与手段）学生活动时间分配 </p><p>告知 </p><p>（教学内容、 </p><p>目的） 1、了解课程主要内容、考核方法 </p><p>2、熟悉网站开发步骤讲授 </p><p>设问听讲 5分钟 </p><p>引入 </p><p>（任务项目）说课 </p><p>浏览经典网页演示 </p><p>启发 </p><p>提问讨论 </p><p>个别回答 5分钟 </p><p>操练 </p><p>(掌握初步或基本能力) 1、Dreamweaver开发平台， </p><p>2、指导学生配置熟悉平台环境 </p><p>3、创建网页并浏览教师讲解 </p><p>学生操作个别回答 </p><p>集体提示 15分钟 </p><p>深化 </p><p>（加深对基本能力的体会）通过案例点评、小组讨论及教材理论知识的讲解，使学生了解站点创建、网页设计的含义、特点、依据、内容教师演示 </p><p>要点提示 </p><p>重点讲解个别回答 </p><p>集体讨论 15分钟 </p><p>归纳 </p><p>（知识和能力）第一个网页的创建和浏览步骤讲授集体思考 </p><p>个别回答 10分钟 </p><p>训练 </p><p>巩固 </p><p>拓展 </p><p>检验组内自评选出一个全班展示，组间互评，认识了解Dreamweaver开发平台，简单网页并浏览。启发诱导 </p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/556cbb25854769eae009581b6bd97f192279bfb8.webp" alt="html教案"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="556cbb25854769eae009581b6bd97f192279bfb8" data-did="424126330">html教案</h2> <div class="module-content-item"> <div class="item-overflow"> <p>html教案 </p><p>兄弟连PHP视频教程 </p><p>Mysql视频 </p><p>javascript视频 </p><p>Html与CSS部分 </p><p>共10天40学时2周 </p><p>web技术教程学习资料 </p><p>授课方式 </p><p>(1) . 基础灌输 </p><p>(2) . 项目串接 </p><p>(3) . 引导自学 </p><p>(4) . 视频重复 </p><p>注：强烈建议记录讲义重点和知识点 </p><p>第一天HTML简介（涉及第一、二章） </p><p>第一节课概念介绍 </p><p>万维网是我们这个时代最重要的信息传播手段。几乎任何人都可以创建自己的网站，然后把它发布在因特网上。一些网页属于企业，提供销售服务；另一些网页属于个人，用来分享信息。你可以自己决定网页的内容和风格。 </p><p>所有网页都要用某种形式的HTML 来编写。HTML 可以对文本进行格式化，添加图形、声音和视频，并且可以将它保存为所有计算机都可以读取的文本文件。 </p><p>学习和掌握HTML 并不困难。编写HTML 并不是一个令人头昏的复杂过程，只需仔细输入并保持一致性。可以在几分钟内建立一个简单的HTML 页面并让它运行起来。另外，尽管有许多软件可以替你编写HTML 代码，但自己编写HTML 的好处是不必学习新的软件，也不会受到这些软件特性的限制。 </p><p>1.1因特网、Web和HTML </p><p>你肯定听说过因特网（Internet ），但是因特网究竟是什么？简单的说，因特网是相互连接的计算机的集合。许多人拥有不间断的高速带宽连接（通过DSL 、线缆或卫星），而另外一些人只在每天的某段时间内通过调制解调器用家庭计算机上网。无论是什么类型的连接，只要你联网了，你的计算机就成为因特网的一部分，并且与当前联网的其他所有计算机连接。 </p><p>万维网（web ）是虚拟的。它无数不断变化的、种类不同的文档的集合，这些文档驻留在因特网的某个地方，都是用某种形式的HTML 编写的。HTML （超文本标记语言）有两个基本特性——超文本和普适性。超文本意味着可以在网页中创建一个链接，从而将访问者链接到其他任何网页，实际上可以链接到因特网上的任何东西。这意味着可以通过许多不通的路径访问Web 上的信息。Web 的创建者Tim Berne rs-Lee 希望Web 能像人的大脑那样在信息之间建立广泛的联系，而不是像书籍那样只是静 </p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/4ff06387b8d528ea81c758f5f61fb7360b4c2bee.webp" alt="HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="4ff06387b8d528ea81c758f5f61fb7360b4c2bee" data-did="519401627">HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页</h2> <div class="module-content-item"> <div class="item-overflow"> <p>XXXX职业技术学院教案首页 </p><p>编号：JX/GC7.1-01-JL03 </p><p>教师姓名张老师部门软件与信息学院课程名称前端设计与开发编号 1 </p><p>适用班级 -班级编号- </p><p>课时安排 2学时教学课型：√理论课 □实验课 □体育课 □习题课 □实训课 □实践环境课 </p><p>教案介质 √纸质 √电子教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件 </p><p>题目（教学章、节或主题） </p><p>第一章网页设计理论 </p><p>第二章 HTML语言 </p><p>教学目的要求： </p><p>了解网页的来源和本质、网页的组成元素、网页的尺寸、网页的布局、网页的色彩、网站建设需求分析、网页设计流程 </p><p>了解HTML特点、HTML语法、HTML文档结构 </p><p>时间授课内容提要 </p><p>（标注重点、难点）教师活动学生活动使用资源 </p><p>15分钟 </p><p>30分钟 </p><p>30分钟 </p><p>15分钟 </p><p> 1、引言 </p><p>1）为什么要学习前端设计与开发 </p><p>2）前端设计与开发课程的内容 </p><p>2、网页设计理论 </p><p>1）网页的来源和本质 </p><p>2）网页的组成元素 </p><p>3）网页的尺寸 </p><p>4）网页的布局 </p><p>5）网页的色彩 </p><p>6）网站建设需求分析 </p><p>7）网页设计流程 </p><p>3、HTML语言 </p><p>1）HTML特点 </p><p>2）HTML语法（难点） </p><p>3）HTML文档结构（重点） </p><p>4、小结 </p><p>引入新课程 </p><p>讲授新课内容 </p><p>授课过程中穿插提问 </p><p>辅导学生上机操作实践 </p><p>认真听讲并思考 </p><p>思考并回答问题 </p><p>上机操作完成任务 </p><p> 电脑 </p><p>投影仪 </p><p>传奇软件 </p><p>网络 </p><p>讨论、思考题、作业： </p><p>课后练习题 </p><p>部门领导意见： </p><p>教研室主任签章： 2021 年 8 月 31 日 XXXX职业技术学院教案首页 </p><p>编号：JX/GC7.1-01-JL03 </p><p>教师姓名张老师部门软件与信息学院课程名称前端设计与开发编号 2 </p><p>适用班级 -班级编号- </p><p>课时安排 2学时教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="recommended" id="downtip"> <div class="tag"> <ul class="tag-header"> <li> <a href="javascript:;" title="下载提示" data-tab-target="tip" class="" id="onTagDownload"> 下载提示 <i class="iconfont icon-you bottom"></i> </a> </li> </ul> <div class="tab-items"> <div class="tab-item tip" data-tab-item="tip"> <div class="list"> <ol> <li>1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。</li> <li>2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。</li> <li>3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。</li> </ol> </div> </div> </div> </div> </div> <div class="recommended"> <div class="article-box"> </div> </div> </div> <div class="temp-rg" id="target-element"> <div class="relevant-box temp-mg"> <div class="content" id="side-list"> <div class="header hd-bm hd-scollor"> <div class="title"> <h3>文档推荐</h3> <i class="bg bg-1"></i> </div> </div> <ul class="container-ul"> <li> <div class="ul-doc flex-start"> <i class="icon-doc"></i> <div class="cont-rg flex-column"> <a href="/doc/0219928618.html" target="_blank" title="html(2)教案" class="ul-doc-a text-overflow-clamp">html(2)教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:4</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-doc"></i> <div class="cont-rg flex-column"> <a href="/doc/0722812032.html" target="_blank" title="《HTML网页设计》教案" class="ul-doc-a text-overflow-clamp">《HTML网页设计》教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:6</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/1419546804.html" target="_blank" title="html教案" class="ul-doc-a text-overflow-clamp">html教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:3</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/3219836639.html" target="_blank" title="JavaScript教案" class="ul-doc-a text-overflow-clamp">JavaScript教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:5</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-doc"></i> <div class="cont-rg flex-column"> <a href="/doc/3c19889821.html" target="_blank" title="JavaScript教案" class="ul-doc-a text-overflow-clamp">JavaScript教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:14</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-doc"></i> <div class="cont-rg flex-column"> <a href="/doc/3420359109.html" target="_blank" title="HTML网页设计技术教案" class="ul-doc-a text-overflow-clamp">HTML网页设计技术教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:75</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-doc"></i> <div class="cont-rg flex-column"> <a href="/doc/3820892967.html" target="_blank" title="HTML语言学习教程" class="ul-doc-a text-overflow-clamp">HTML语言学习教程</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:49</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/5620256300.html" target="_blank" title="网页html制作教案" class="ul-doc-a text-overflow-clamp">网页html制作教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:2</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-ppt"></i> <div class="cont-rg flex-column"> <a href="/doc/6120939134.html" target="_blank" title="世上最全的HTML教案" class="ul-doc-a text-overflow-clamp">世上最全的HTML教案</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:119</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/7e20849366.html" target="_blank" title="html教学大纲" class="ul-doc-a text-overflow-clamp">html教学大纲</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:4</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/7921233328.html" target="_blank" title="认识html网页教案初中" class="ul-doc-a text-overflow-clamp">认识html网页教案初中</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:3</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/9f20773522.html" target="_blank" title="HTML语言教程" class="ul-doc-a text-overflow-clamp">HTML语言教程</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:1</em> </div> </div> </div> </div> </li> </ul> </div> </div> <div class="relevant-box"> <div class="content"> <div class="header hd-bm"> <div class="title"> <h3>最新文档</h3> <i class="bg bg-4"></i> </div> </div> <ul class="container-ul"> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2a7663084.html" target="_blank" class="new-li-a text-overflow">通风空调分包合同</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2321297540.html" target="_blank" class="new-li-a text-overflow">HTML语言教案</a> </li> <li class="new-down-li"> <i class="icon-pdf"></i> <a href="/doc/248411167.html" target="_blank" class="new-li-a text-overflow">特级初榨橄榄油</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2911180915.html" target="_blank" class="new-li-a text-overflow">2016个人承诺书</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2b8216905.html" target="_blank" class="new-li-a text-overflow">一年级数学期中考试试题1</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2c19317848.html" target="_blank" class="new-li-a text-overflow">验证牛顿第二定律参考实验报告</a> </li> <li class="new-down-li"> <i class="icon-pdf"></i> <a href="/doc/2d21028623.html" target="_blank" class="new-li-a text-overflow">青岛版上册数学六年级上第一单元测试题</a> </li> <li class="new-down-li"> <i class="icon-docx"></i> <a href="/doc/2e21454177.html" target="_blank" class="new-li-a text-overflow">加拿大移民创业计划书范文</a> </li> <li class="new-down-li"> <i class="icon-docx"></i> <a href="/doc/256880986.html" target="_blank" class="new-li-a text-overflow">初中英语作文：杜绝浪费Never Wasting the Food</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2e6176070.html" target="_blank" class="new-li-a text-overflow">小班科学水果变色实验</a> </li> </ul> </div> </div> </div> </div> </div> </main> <div class="broadside"> <div class="user-cursor" id="toTop"> <div class="user-about" title="置顶"> <i class="iconfont icon-you bottom"></i> </div> </div> </div> <footer> <div class="container"> <div class="ft-content"> <div class="ft-logo"> <a href="/" target="_blank" title="文档之家" class="flex-column-center"> <img src="/pc/icon/icon-logo1.png" alt="文档之家"> <p>文档之家</p> </a> </div> <div class="ft-info"> <nav class="footer-nav"> <ul> <li><strong class="ft-block">关于</strong></li> <li><a href="/about/about-us.html">关于我们</a></li> <li><a href="/about/contact-us.html">联系我们</a></li> </ul> <ul> <li><strong class="ft-block">版权相关</strong></li> <li><a href="/about/copyright-statement.html">版权声明</a></li> <li><a href="/about/infringement-complaint.html">侵权投诉</a></li> <li><a href="/about/disclaimer.html">免责声明</a></li> </ul> <ul> <li><strong class="ft-block">网站声明</strong></li> <li><a href="/about/user-agreement.html">用户协议</a></li> <li><a href="/about/privacy-policy.html">隐私政策</a></li> <li><a href="/about/sitemap.html">网站地图</a></li> </ul> <ul> <li><strong class="ft-block">帮助中心</strong></li> <li><a href="/about/download-instructions.html">下载说明</a></li> <li><a href="/about/download-failure-solution.html">下载失败解决</a></li> <li><a href="/about/redownload-order.html">订单重下载</a></li> </ul> </nav> <div class="ft-side"> <h3>微信客服</h3> </div> </div> </div> </div> <div class="ft-box"> <div class="ft-text"> <p>文档之家版权所有 - ©2024</p> </div> </div> </footer> <script src="/pc/js/index.js"></script> </body> </html>