HTMLCSSJavaScript教学教案讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《HTML+CSS+JavaScript网页制作案例教程》课程教学Design
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案章节一：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的页面1.2 教学内容HTML简介HTML基本语法HTML基本结构常用的HTML标签1.3 教学方法讲授法：讲解HTML的基本概念和作用，演示基本语法和结构实践法：学生动手编写简单的HTML页面1.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）1.5 教学评估课堂练习：学生现场编写简单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节二：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素2.2 教学内容CSS简介CSS基本语法CSS选择器常用的CSS属性2.3 教学方法讲授法：讲解CSS的基本概念和作用，演示基本语法和选择器实践法：学生动手编写简单的CSS样式2.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）2.5 教学评估课堂练习：学生现场编写简单的CSS样式课后作业：学生完成课后练习，巩固所学知识章节三：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动布局和定位布局实现网页布局3.2 教学内容网页布局概述浮动布局定位布局布局实践3.3 教学方法讲授法：讲解网页布局的基本概念和原则，演示浮动布局和定位布局的方法实践法：学生动手实践，完成网页布局实例3.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例3.5 教学评估课堂练习：学生现场完成网页布局实例课后作业：学生完成课后练习，巩固所学知识章节四：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式布局的方法学会根据不同设备进行网页布局的调整4.2 教学内容响应式网页设计概述CSS媒体查询响应式布局实践4.3 教学方法讲授法：讲解响应式网页设计的基本概念和原则，演示CSS媒体查询的使用方法实践法：学生动手实践，完成响应式网页布局实例4.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例4.5 教学评估课堂练习：学生现场完成响应式网页布局实例课后作业：学生完成课后练习，巩固所学知识章节五：HTML5与CSS3新特性5.1 教学目标了解HTML5的基本概念和新增特性掌握CSS3的基本概念和新增特性学会使用HTML5和CSS3制作现代化的网页5.2 教学内容HTML5简介HTML5新增特性CSS3简介CSS3新增特性5.3 教学方法讲授法：讲解HTML5和CSS3的基本概念和新增特性实践法：学生动手实践，使用HTML5和CSS3制作现代化的网页5.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例5.5 教学评估课堂练习：学生现场使用HTML5和CSS3制作现代化的网页课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节六：表格与表单6.1 教学目标了解HTML中表格的基本用法掌握使用CSS样式化表格学会创建表单以及使用表单元素6.2 教学内容表格的基本结构表格的样式化表单的创建表单元素的使用6.3 教学方法讲授法：讲解表格和表单的基本概念和用法实践法：学生动手实践，编写含有表格和表单的HTML页面6.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）6.5 教学评估课堂练习：学生现场编写含有表格和表单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节七：多媒体与交互7.1 教学目标了解HTML中多媒体元素的使用掌握CSS动画和过渡效果的实现学会使用JavaScript添加网页交互7.2 教学内容多媒体元素（如img, audio, video）CSS动画和过渡效果JavaScript基础和交互实现7.3 教学方法讲授法：讲解多媒体元素的使用和CSS动画效果实践法：学生动手实践，编写包含多媒体和交互的HTML页面7.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例7.5 教学评估课堂练习：学生现场编写包含多媒体和交互的HTML页面课后作业：学生完成课后练习，巩固所学知识章节八：浏览器兼容性与优化8.1 教学目标了解浏览器兼容性的概念掌握使用CSS hacks和兼容性解决方案学会网页性能优化技巧8.2 教学内容浏览器兼容性问题CSS hacks和兼容性解决方案网页性能优化8.3 教学方法讲授法：讲解浏览器兼容性和网页性能优化的概念实践法：学生动手实践，对网页进行兼容性和性能优化8.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例8.5 教学评估课堂练习：学生现场对网页进行兼容性和性能优化课后作业：学生完成课后练习，巩固所学知识章节九：响应式图片与字体9.1 教学目标了解响应式网页设计中图片和字体的处理掌握CSS中的媒体查询和特性检测学会使用srcset和sizes属性9.2 教学内容响应式图片的处理响应式字体的处理CSS媒体查询和特性检测9.3 教学方法讲授法：讲解响应式图片和字体的处理方法实践法：学生动手实践，编写响应式图片和字体的HTML页面9.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例9.5 教学评估课堂练习：学生现场编写响应式图片和字体的HTML页面课后作业：学生完成课后练习，巩固所学知识章节十：版本控制与协作开发10.1 教学目标了解版本控制的概念和重要性掌握Git的基本命令和操作学会在团队中进行协作开发10.2 教学内容版本控制基础知识Git的安装和配置Git的基本命令（如clone, mit, push, pull等）GitHub的基本使用10.3 教学方法讲授法：讲解版本控制的概念和Git的基本命令实践法：学生动手实践，使用Git进行版本控制10.4 教学资源PowerPoint课件Git安装和配置指导文档GitHub的使用文档10.5 教学评估课堂练习：学生现场使用Git进行版本控制课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节十一：移动端网页设计11.1 教学目标了解移动端网页设计的基本原则掌握使用CSS媒体查询进行移动端布局学会优化移动端用户体验11.2 教学内容移动端网页设计原则媒体查询的使用触摸事件和手势移动端优化技巧11.3 教学方法讲授法：讲解移动端网页设计原则和媒体查询的使用实践法：学生动手实践，完成移动端网页布局实例11.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例11.5 教学评估课堂练习：学生现场完成移动端网页布局实例课后作业：学生完成课后练习，巩固所学知识章节十二：网页性能优化12.1 教学目标了解网页性能对用户体验的影响掌握网页性能优化的方法和技巧学会使用工具进行性能分析12.2 教学内容网页性能影响因素性能优化方法（如图片优化、代码压缩、缓存利用等）性能分析工具（如Chrome DevTools）12.3 教学方法讲授法：讲解网页性能影响因素和优化方法实践法：学生动手实践，对网页进行性能优化12.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例12.5 教学评估课堂练习：学生现场对网页进行性能优化课后作业：学生完成课后练习，巩固所学知识章节十三：网络标准和前端框架13.1 教学目标了解Web标准的概念和重要性掌握HTML5和CSS3的新特性学会使用前端框架（如Bootstrap）13.2 教学内容Web标准概述HTML5和CSS3新特性前端框架介绍（如Bootstrap）13.3 教学方法讲授法：讲解Web标准和HTML5/CSS3新特性实践法：学生动手实践，使用前端框架进行网页设计13.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）前端框架文档和教程13.5 教学评估课堂练习：学生现场使用前端框架进行网页设计课后作业：学生完成课后练习，巩固所学知识章节十四：项目实践14.1 教学目标综合运用所学知识进行网页设计与布局学会项目规划和管理完成一个完整的个人或团队项目14.2 教学内容项目选题和规划网页设计与布局实践项目展示与评价14.3 教学方法讲授法：讲解项目选题和规划的方法实践法：学生动手实践，完成个人或团队项目14.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）项目管理和评价指南14.5 教学评估项目完成情况评估团队协作和沟通能力评估项目展示和评价章节十五：就业指导与职业规划15.1 教学目标了解Web前端开发的职业前景掌握求职技巧和面试准备学会进行职业规划和发展15.2 教学内容Web前端开发职业前景求职技巧和面试准备职业规划和发展建议15.3 教学方法讲授法：讲解Web前端开发的职业前景和求职技巧实践法：学生进行模拟面试和职业规划练习15.4 教学资源PowerPoint课件求职和职业规划指导文档模拟面试材料15.5 教学评估模拟面试表现评估职业规划文档评估学生反馈和总结重点和难点解析本文主要介绍了《HTML+CSS网页设计与布局》的教学教案，涵盖了HTML基础、CSS基础、网页布局基础、响应式网页设计、HTML5与CSS3新特性、表格与表单、多媒体与交互、浏览器兼容性与优化、响应式图片与字体、版本控制与协作开发、移动端网页设计、网页性能优化、网络标准和前端框架、项目实践以及就业指导与职业规划等十五个章节。
html+css+javascript教程课件ppt
<meta name="generator | author | copyright" content="…..">
<body>
<body bgcolor=“#〞 --背景色 background="img_url" --背景图片
</body> 色彩值 “#rrggbb〞 Eg. <body bgcolor=“#ffffff〞 > 红绿蓝数字值 <body
版) W3C - HTML5(未来代替HTML) IETF – Internet Engineering Task Force
HTML语法标记
标记(标签或元素)的形式 <元素名>内容</元素名> Eg. <font>文字</font> <元素名/> Eg. <img src=“…〞/> <元素名> Eg. <br> 位于尖括号内，可以具有属性值 属性值必须“〞 或 ‘’，不写也可以解析， 但是不推荐〔不符合XHTML〕 有开始必须有结束(XHTML) 标签不能嵌套
URI
分隔线--<hr>
语法
<hr size=“pixels〞 align=“align〞 width=“pixels〞 color=“# 〞 noshade>
Size 高度 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色
Eg. <hr noshade color=“#ff00ff〞 width=“600〞 size=“8〞 align=“left〞>
教学课件 HTML+CSS+JavaScript网页设计
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
《HTML+CSS+JavaScript网页制作案例教程(第2版)》—教学大纲
《HTML+CSS+JavaScript网页制作案例教程》（第2版）教学大纲课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML+CSS+JavaScript网页制作案例教程》（第2版）是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形、动画、JavaScript 等内容。
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局和动态效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章网页那点事（2学时）第二章从零开始构建HTML页面（6学时）第三章使用CSS技术美化网页（6学时）第四章运用盒子模型划分网页模块（8学时）第五章为网页添加列表和超链接（6学时）第六章为网页添加表格和表单（8学时）第七章运用浮动与定位布局（6学时）第八章全新的网页视听技术（10学时）第九章简单的JavaScript（8学时）第十章实战开发—好趣艺术设计部落首页面（12学时）五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
机工社网页设计与制作教程(HTML+CSS+JavaScript)第3版教学课件第1章 网页设计与
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章使用CSS布局页面
7.1 Div+CSS布局技术概述144
7.1.1认识Div+CSS布局144
7.1.2正确理解Web标准145
7.2 Div的嵌套布局145
7.2.1将页面用Div分块145
7.2.2案例——制作爱心包装活动发布页面146
7.3常见的CSS布局样式149
1.掌握Div嵌套布局的方法；
2.掌握常见的CSS布局样式；
3.掌握使用CSS布局制作综合案例页面的技术。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.使用Div嵌套布局制作基本的页面。
2.使用CSS布局制作综合案例页面。
教学方法、手段
3.2.1 details元素和summary元素46
3.2.2 progress元素47
3.3表格48
3.3.1表格的结构48
3.3.2表格的基本语法48
3.3.3表格的属性49
3.3.4不规范表格51
3.3.5表格数据的分组52
3.3.6案例——使用表格布局爱心包装产品展示页面54
3.4表单55
7.3.1两列布局样式149
7.3.2三列布局样式149
7.4综合案例——制作爱心社区页面150
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
章节
第8章JavaScript语言基础
单元主要教学内容
数据类型、表达式、程序结构、函数、对象
网页设计与制作项目教程(HTML+CSS+JavaScript)教学大纲
《网页设计与制作项目教程（HTML+CSS+JavaScript）》课程教学大纲（课程英文名称）课程编号：学分：5 学分学时：76 学时（其中：讲课学时：50 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《网页设计与制作项目教程（HTML+CSS+JavaScript）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、JavaScript 编程基础与事件处理等内容。
通过本课程的学习，学生能够了解 HTML、CSS 及 JavaScript 语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求项目1 网页制作基础知识学习单元项目1 网页制作基础知识学时4学时✧知识目标1、了解 Web 标准及基本概念学习目标2、熟悉 HTML、CSS 及 JavaScript 语言的发展历史✧技能目标1、掌握 Dreamweaver 工具的基本操作2、能够使用 Dreamweaver 创建简单的网页知识点了解掌握重点难点认识网页√网页相关的名词√Web 标准√HTML 语言简介√学习内容CSS 语言简介√JavaScript 语言简介√常见浏览器√Dreamweaver工具简介√(界面和初始化)创建第一个网页√项目2 “说旅游”专题页制作学习单元项目 2 “说旅游”专题页制作学时8学时✧知识目标1、掌握 HTML 文档结构2、了解 HTML 文档头部相关标记学习目标3、熟悉 HTML 文本控制标记4、掌握 HTML 图像标记✧技能目标1、掌握图文混排页面的制作技巧2、学会制作图文混排页面学习内容知识点了解掌握重点难点HTML 文档基本格式√HTML 标记（单标记与双√标记）标记属性√√HTML 文档头部相关标记√标题和段落标记√文本样式标记√（<font></font>标记）文本格式化标记√特殊字符标记√div 标记√√常用图像格式√切片√【项目实现】：准备工作√与页面布局【项目实现】：制作头部√模块【项目实现】：制作“伊露√岛”介绍模块【项目实现】：制作“伊露√岛”推荐模块【项目实现】：制作“驴友√评论”模块【项目实现】：制作页脚√模块项目3 “网上花店”专题页制作学习单元项目 3 “网上花店”专题页制作学时10学时✧知识目标1、了解 CSS 样式规则2、掌握 CSS 字体样式及文本外观属性学习目标3、熟悉 CSS 复合选择器4、掌握 CSS 层叠性、继承性与优先级✧技能目标1、掌握引入 CSS 样式表的不同方式2、学会控制页面中的文本外观样式知识点了解掌握重点难点CSS 样式规则√学习内容引入 CSS 样式表（行内、内嵌、链入）√CSS 基础选择器√CSS 字体样式属性√CSS 文本外观属性√CSS 定义背景颜色√CSS 复合选择器（标签指√定、后代、并集）CSS 层叠性与继承性√√CSS 优先级√√【项目实现】：布局及定√义基础样式【项目实现】：制作标题√模块【项目实现】：制作商品√分类模块【项目实现】：制作“热卖”√模块【项目实现】：制作品质√保障及店主模块项目4 “儿童摄影网”首页面制作学习单元项目 4 “儿童摄影网”首页面制作学时12学时✧知识目标1、了解盒子模型的概念2、掌握盒子的相关属性学习目标3、熟悉元素的类型与转换4、掌握元素的浮动与定位5、掌握清除浮动的方法✧技能目标1、能够使用 DIV 标记与浮动样式对页面进行布局知识点了解掌握重点难点认识盒子模型√边框属性√内边距属性√外边距属性√背景属性√盒子的宽与高√学习内容元素的类型√<span>标记√元素的转换√块元素垂直外边距的合√并元素的浮动属性√√清除浮动√√overflow 属性√元素的定位属性√静态定位√相对定位√绝对定位√固定定位√z-index 层叠等级属性√【项目实现】：布局及定√义基础样式【项目实现】：制作导航√及 banner 模块【项目实现】：制作最新√动态模块【项目实现】：制作样片√欣赏模块【项目实现】：制作页脚√及悬浮框模块项目5 “穿搭速递”首页面制作学习单元项目 5 “穿搭速递”首页面制作学时8学时✧知识目标1、掌握无序列表、有序列表及定义列表2、熟悉列表的嵌套学习目标3、掌握超链接标记4、掌握链接伪类✧技能目标1、能够使用无序列表、有序列表及定义列表对页面进行布局2、学会使用链接伪类控制页面中超链接的样式知识点了解掌握重点难点无序列表<ul> √有序列表<ol> √定义列表<dl> √列表的嵌套应用√list-style 复合属性√背景图像定义列表项目符√√学习内容号创建超链接（超链接标记√a）锚点链接√链接伪类控制超链接√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√导航模块【项目实现】：制作√banner 和精品展示模块【项目实现】：制作潮流√前沿模块【项目实现】：制作版权√信息模块项目6 “千年之恋”注册页面制作学习单元项目 6 “千年之恋”注册页面制作学时10学时✧知识目标1、理解表格的创建2、掌握表格样式的控制学习目标3、掌握表单相关标记4、熟悉表单样式的控制✧技能目标1、能够创建具有相应功能的表单控件2、学会通过控制表单样式美化表单界面知识点了解掌握重点难点表格的创建√<table>标记的属性√<tr>标记的属性√<td>标记的属性√<th>标记及其属性√CSS 控制表格边框√CSS 控制单元格边距√CSS 控制单元格的宽高√初识表单√创建表单√学习内容input 控件√√textarea 控件√select 控件√CSS 控制表单样式√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√及导航模块【项目实现】：制作√banner 及内容模块【项目实现】：制作页脚√模块项目7 “赶快回家网”首页面制作学习单元项目 7 “赶快回家网”首页面制作学时12学时✧知识目标1、掌握 JavaScript 基本语法2、掌握运算符和表达式的使用方法学习目标3、掌握条件语句、循环语句及跳转语句4、掌握 JavaScript 中函数的调用及变量的作用域✧技能目标1、能够通过运算符和表达式进行简单计算2、学会使用流程控制语句编写 JavaScript 程序知识点了解掌握重点难点JavaScript 简介√JavaScript 引入方式√JavaScript 基本语法√一个简单的JavaScript√程序关键字和标识符√变量和数据类型√运算符和表达式√条件语句√循环语句√跳转语句√初识函数√学习内容函数的调用√函数中变量的作用域√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√√模块【项目实现】：制作导航√模块【项目实现】：制作√√banner 和时间模块【项目实现】：制作客运√信息模块【项目实现】：制作版权√信息模块项目8 “学好英语网”首页面制作学习单元项目 8 “学好英语网”首页面制作学时12学时学习目标✧知识目标1、理解什么是对象2、掌握数组的常用属性和方法3、掌握节点的访问4、掌握 JavaScript 常用事件技能目标1、能够准确访问指定元素和相关元素2、学会通过触发事件完成 JavaScript 与对象之间的交互知识点了解掌握重点难点什么是对象√对象的属性和方法√对象的创建和删除√内置对象√初识数组√数组的常见操作√数组的常用属性和方法√二维数组√BOM 对象√DOM 对象√什么是事件√鼠标事件√学习内容键盘事件√表单事件√页面事件√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√及导航模块【项目实现】：制作√√banner 模块【项目实现】：制作简介√√模块【项目实现】：制作课程√√特色模块【项目实现】：制作版权√信息模块………………………………………………………………………………………………………五、学时分配章目讲课上机合计项目 1 网页制作基础知识 3 学时 1 学时 4 学时项目 2 “说旅游”专题页制作 5 学时 3 学时8 学时项目 3 “网上花店”专题页制作7 学时 3 学时10 学时项目 4 “儿童摄影网”首页面制作8 学时 4 学时12 学时项目 5 “穿搭速递”首页面制作 5 学时 3 学时8 学时项目 6 “千年之恋”注册页面制作 6 学时 4 学时10 学时项目 7 “赶快回家网”首页面制作8 学时 4 学时12 学时项目 8 “学好英语网”首页面制作8 学时 4 学时12 学时合计50 学时26 学76 学时时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
html+javascript+css 课件第1章
第一章 网页设计概述
主要内容：
万维网的基本概念 如何进行网页的开发 网页制作的相关技术
广西经济管理干部学院计算机系
2014.1.7
万维网的概念
当今社会，人们对网络的依赖程度越来越密切， 大到政府机关、公司厂矿；小到家庭个人，网络 几乎无处不在。而网站的建设也已成为社会信息 化的主角。 WWW（World Wide Web）是一个基于超文本 （Hypertext）方式的信息检索服务工具。。
广西经济管理干部学院计算机系
2014.1.7
开发工具的选择
HTML的编辑工具是比较多的，读者既可以选择 最常用的基于文本的HTML编辑器（Windows自 带的记事本），也可以选择一套功能强大，可取 代记事本编辑器的EditPlus，还可以选择所见即 所得的Dreamweaver等。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系 2014.1.7
CSS的主要作用
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网 站开发者，你能够为每个 HTML 元素定义样式， 并将之应用于你希望的任意多的页面中。如需进 行全局的更新，只需简单地改变样式，然后网站 中的所有元素均会自动地更新。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系
2014.1.7
万维网
当进入万维网上一个网页，或者其他网络资源的时候，通 常你要首先在浏览器上键入想访问网页的统一资源定位器 （URL），或者通过超链接方式链接到那个网页或网络资 源。这之后的工作首先是URL的服务器名部分，被名为域 名系统的分布于全球的因特网数据库解析，并根据解析结 果决定进入哪一个IP地址。 接下来的步骤是为所要访问的网页，向在那个IP地址工作 的服务器发送一个HTTP请求。在通常情况下，HTML文 本、图片和构成该网页的一切其他文件很快会被逐一请求 并发送回用户。 网络浏览器接下来的工作是把HTML、CSS和其他接受到 的文件所描述的内容，加上图像、链接和其他必须的资源， 显示给用户。这些就构成了浏览器中所看到的“网页”。
《HTML CSS JavaScript前端开发基础教程》教学大纲
《HTML+CSS+JavaScript前端开发基础教程》教学大纲课程代码：课程名称：HTML+CSS+JavaScript前端开发基础教程开课学期：5学分/学时：3/32+16课程类型：必修适用专业/开课对象：先修课程：开课单位：团队负责人：责任教授：执笔人：核准院长：一、课程的性质、目的与任务《HTML+CSS+JavaScript前端开发基础教程》是软件工程专业中一门综合性很强的基础课程，主要内容包括十九个章节。
在第一章介绍了HTML/CSS/JavaScript的背景，以及相关的开发环境以及一些入门相关的知识点。
在第二章介绍什么是标记语言，以及HTML的基本特征与说明，HTML结构，HTML 示例与调试等。
在第三章介绍了基本的HTML元素、属性、样式、注释以及区块的概念。
在第四章介绍常用的HTML控件，包括表单、多媒体以及HTML表格。
在第五章介绍客户端存储方案，包括Cookie、localStorage、sessionStorage以及它们三部分的对比。
在第六章简单介绍了两个简单HTML样例的实现与代码分析。
在第七章介绍CSS基本概念，包括CSS特性、语言基础、选择器、CSS字体、颜色以及CSS3背景设置等。
在第八章介绍CSS盒子模型，包括概念、边框、轮廓、外边距以及填充等。
第九章介绍弹性盒布局，主要包括原理介绍以及案例说明。
在第十章介绍了CSS的定位，包括position定位属性值说明，Float浮动属性说明，以及align属性说明等。
在第十一章介绍了CSS3动画以及响应式，通过该功能实现丰富的页面展示效果。
在第十二章介绍了CSS的两个简单样例以及代码分析。
在第十三章介绍了JavaScript的基本概念，变量使用、保留字、数据类型以及事件等。
在第十四章介绍了JavaScript的常用功能，包括对象、数组、函数、日期、表单、类库以及jQuery详细介绍。
在第十五章介绍了JavaScript自带的常用的对象类型。
HTML5CSS3JAVASCRIPT三合一教程实战课件PPT模板
html5css3javascript三 合一教程实战
演讲人
2 0 2 x - 11 - 11
01 第1章html5和css3
第1章html5和css3
1-1开发工具简介 针对开发工具的讲
解
1-3表格详解表格 详解
1-5综合案例讲解 第一次课综合案例
讲解第一次课
A
C
E
1-2表格基础表格
1-4图像标签基础
1-6图像路径讲解
基础
图像标签基础
图像路径解
B
D
F
第1章html5和css3
1-9css基础之样式范围 css基础之样式范围
1-8简易二级菜单简易 二级菜单
1-7综合案例第二次课 综合案例第二次课
1-10css进阶之选择器的 分类css进阶之选择器的 分类
1-11css之颜色和字体的 讲解css之颜色和字体的 讲解
位
1-17iframe的讲解 iframe的讲解
1-18背景图像的讲解 背景图像的讲解
第1章html5和 css3
1-19块状元素和行内元素及布局 块状元素和行内元素及布局 1-20多彩相册案例第一次课多彩 相册案例第一次课
感谢聆听
1-12css之选择器分类进 阶精讲css之选择器分类 进阶精讲
第1章html5和css3
1-13css之选择器分类 进阶精讲二css之选择
器分类进阶精讲二
1-14display和float 的使用display和 float的使用
1-15盒子模型盒子模 型
1-16相对定位和很定 位相对定位和绝对定
《HTML+CSS+JavaScript网页制作案例教程(第2版)》教学教案—01网页那点事
《HTML+CSS+JavaScript网页制作案例教程》（第2版）教学教案课题名称第1章 HTML5+CSS3网页设计概述计划课时2课时内容分析在学习网页制作之前，首先需要了解一些与网页相关的知识，为初学者学习后面章节的内容打下坚实的基础。
本章将从网页概述、网页制作技术入门以及Dreamweaver工具的使用等几个方面详细讲解网页的基础知识。
教学目标●了解Web标准，明确HTML、CSS及JavaScript的作用。
●熟悉Dreamweaver工具的基本操作，能够使用Dreamweaver创建简单的网页。
重点及措施教学重点：Dreamweaver初始化设置、Dreamweaver基本操作、创建第一个网页。
措施：通过网页代码练习加强学习，并通过动手实践进行巩固。
难点及措施教学难点：无。
措施：无。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解网页的组成、网页名词解释、HTML、CSS、JavaScript等知识点）本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：什么是网页？你真的认识网页吗？请小组代表对以上问题发表见解。
教师对上述问题进行解释：答案：说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。
网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。
为了使初学者更好地认识网页，我们首先来看一下淘宝网站。
打开谷歌浏览器，在地址栏中输入淘宝网址“https:///”，单击“Enter”键，此时浏览器中显示的页面即为淘宝网的首页单击“F12”键，浏览器中弹出的窗口便会显示当前网页的源代码✧知识点讲解➢讲解“网页的组成”（1）教师列举生活中浏览网页的实例，并展示网页的结构。
（2）教师展示PPT，对网页的结构进行具体讲解。
（3）学生自主提问，教师对疑难问题进行解答。
➢讲解“网页名词解释”（1）教师展示PPT，讲解网页中的常见名词，并通过示例加以说明。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 12第十二章
<input type=〞submit〞 onClick=〞area()〞/> JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数 名称相同的大小写来调用函数。
21
返回结果的函数必须使用return语句。这条语句指定某个值将返回给调 用函数的位置。例如，area()函数返回矩形的面积：
〔5〕节省CGI的交互时间 随着WWW的迅速开展，有许多WWW效劳器提供的效劳要与浏览者进行交互， 以确定浏览者的身份和所需效劳的内容等，这项工作通常由CGI/PERL编 写相应的接口程序与用户进行交互来完成。这种交互增加了网络通信量， 另一方面影响了效劳器的性能。
9 支撑知识点
三、在页面中添加脚本的方式
12
13 支撑知识点
一、数据类型和变量
JavaScript提供了6种数据类型，其中4种根本数据类型用于处理数字和文 字。 ➢ string字符串类型：字符串是用单引号或双引号来说明的〔可以使用 单引号来输入包含双引号的字符串，反之亦然〕，如：“The cow jumped over the moon.〞 ➢ 数值数据类型：JavaScript支持整数和浮点数。整数可以为正数、0或 者负数；浮点数可以包含小数点，也可以包含一个“e〞〔大小写均可， 在科学记数法中表示“10的幂〞〕，或者同时包含这两项。
HTML5教案第23讲 JavaScript函数3
JavaScript 函数（教案）教学内容及教学过程说明步骤一问题引入利用JavaScript修改页面中元素及其属性，实现用户和网页交互。
问题1：如何获取页面元素？回答1：。
问题2：编辑页面元素属性？回答2：。
步骤二讲授6.1 HTML DOM6.1.1 DOM对象及其方法1.通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML，首先必须找到该元素。
如果找到该元素，则该方法将以对象的形式返回该元素。
如果未找到该元素，则返回null。
（1）通过id找到HTML元素页面存在一个元素，id="box"，查找元素的语法如下。
var obj=document.getElementById("box");（2）通过标签名找到HTML元素页面存在多个标签名为div的元素var b=document.getElementsByTagName("div"); //返回一组标签名为div的元素（3）通过类名找到HTML元素页面存在多个class="side"的元素var c=document.getElementsByClassName("side"); //返回一组类名为"side"的元素。
2.DOM对象方法修改HTML内容HTML DOM允许JavaScript根据需要改变HTML元素的内容、属性和样式。
（1）innerHTML属性修改元素内容，语法如下。
JavaScript 中DOM对象概念。
JavaScript DOM对象层次结构获取DOM对象方法举例说明闭包的作用，计数器DOM属性修改document.getElementById(id).innerHTML="内容字符串";document.getElementById("demo").innerHTML="新的内容";（2）改变HTML属性document.getElementById(id).attribute="新的属性值";document.getElementById("demo").src="smile.jpg";或者调用setAttribute()方法Document.getElementById("demo").setAttribute("src",'smile.jpg');对于文档中id名为demo的元素，首先使用HTML DOM来获得元素，然后用当前对象src属性更改此元素的属性值。
HTMLCSSJavaScript教学教案讲解3
《HTML CSS JavaScript网页制作》教学教案第1讲在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。
目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。
HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。
本章就来介绍HTML的基本概念和编写方法以与浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。
第2讲一个完整的HTML文档必须包含3个部分：一个由<html>元素定义的文档版本信息，一个由<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。
<head>作为各种声明信息的包含元素出现在文档的顶端，并且要先于<body>出现。
而<body>用来显示文档主体内容。
文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，提供了丰富的信息。
文字的控制与布局在网页设计中占了很大比例，因此掌握好文字的使用，对于网页制作来说是最基本的。
本章就来讲解这些基本标记的使用，这些都是一个完整的网页必不可少的。
第3讲超级链接是HTML文档的最基本特征之一。
超级链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。
每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。
超链接的范围很广，可以将文档中的任何文字与任意位置的图片设置为超级链接。
超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接。
第4讲第7讲第8讲第9讲第10讲第11讲第12讲第13讲第14讲第15讲第16讲第17讲41 / 41。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.5标题字
2.5.1标题字标记h
2.5.2标题字对齐属性align
2.6段落标记
2.6.1段落标记p
2.6.2换行标记br
2.6.3不换行标记nobr
2.7水平线
2.8其他标记
2.8.1插入空格
2.8.2插入特殊符号
2.9练习题
第3讲
课时内容
建立超链接
授课时间
80分钟
第5讲
课时内容
使用列表
授课时间
80分钟
课时
2
教学内容
列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML中共有3种列表，分别是无序列表、有序列表和定义列表。无序列表的所有列表项目之间没有先后顺序之分。有序列表的列表项目是有先后顺序之分的。定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。
教学重点
了解HTML的基本概念
掌握HTML文件的编写方法
掌握使用浏览器浏览HTML文件
内容大纲
1.1HTML的基础概念
1.1.1HTML简介
1.1.2HTML文件的基本结构
1.1.3认识HTML标记
1.2 HTML文件的编写方法
1.2.1使用笔记本手工编写HTML
1.2.2使用Dreamweaver编写HTML文件
6.2.3表格对齐方式align
6.3表格的边框
6.3.1表格边框宽度border
6.3.2表格边框颜色bordercolo
r6.3.3内框宽度cellspacing
6.3.4表格内文字与边框间距cellpadding
6.4表格背景
6.4.1表格背景颜色bgcolor
6.4.2表格背景图像
6.5表格的行属性
3.4.2链接到E-mail
3.4.3链接到FTP
3.4.4链接到Telnet
3.4.5下载文件
3.5练习题
第4讲
课时内容
使用图像
授课时间
80分钟
课时
2
教学内容
图像是网页中不可缺少的元素，巧妙地在网页中使用图像可以为网页增色不少。网页美化最简单、最直接的方法就是在网页上添加图像，图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。利用图像创建精美网页，能够给网页增加生机，从而吸引更多的浏览者。
1.3使用浏览器浏览HTML文件
1.3.1查看页面效果
1.3.2查看源文件
1.4练习题
第2讲
课时内容
HTML基本标记
授课时间
80分钟
课时
2
教学内容
一个完整的HTML文档必须包含3个部分：一个由<html>元素定义的文档版本信息，一个由<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。<head>作为各种声明信息的包含元素出现在文档的顶端，并且要先于<body>出现。而<body>用来显示文档主体内容。文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，提供了丰富的信息。文字的控制与布局在网页设计中占了很大比例，因此掌握好文字的使用，对于网页制作来说是最基本的。本章就来讲解这些基本标记的使用，这些都是一个完整的网页必不可少的。
教学重点
了解超级链接的基本知识
掌握内部链接
掌握锚点链接
掌握外部链接
内容大纲
3.1超链接的基本知识
3.1.1绝对路径
3.1.2相对路径
3.2内部链接
3.2.1认识内部链接
3.2.2链接的目标窗口
3.2.3建立锚点3.3锚点链接
3.3.1建立同一页面中的锚点
3.3.2建立其他页面中的锚点
3.4外部链接
3.4.1链接到外部网站
教学重点
掌握HTML头部标记
掌握标题标记
掌握元信息标记
掌握页面的主体标记
掌握页面注释标记
内容大纲
2.1 HTML头部标记head
2.2标题标记title
2.3元信息标记meta
2.3.1设置页面关键字
2.3.2设置页面说明
2.3.3定义编辑工具
2.3.4设置作者信息
2.3.5设置网页文字及语言
2.3.6设置网页的定制跳转
课时
2
教学内容
超级链接是HTML文档的最基本特征之一。超级链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超级链接。超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接。 Nhomakorabea教学重点
了解列表标记概述
掌握有序列表
掌握无序列表
掌握定义列表
掌握菜单列表
内容大纲
5.1认识列表标记
5.2有序列表
5.2.1游戏列表ol
5.2.2有序列表的序号类型type
5.2.3有序列表的起始数值start
5.4练习题
第6讲
课时内容
使用表格
授课时间
80分钟
课时
2
教学内容
表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。
教学重点
掌握创建表格
掌握设置表格基本属性
掌握设置表格的边框
掌握设置表格背景
掌握设置表格的行属性
掌握调整单元格属性
内容大纲
6.1创建表格
6.1.1表格的基本构成table、tr、td
6.1.2设置表格的标题caption
6.1.3表头th
6.2表格基本属性
6.2.1表格宽度width
6.2.2表格高度height
教学重点
了解图像的格式
掌握插入图像的方法
掌握图像的超链接
内容大纲
4.1图像的格式
4.2插入图像
4.2.1插入图像标记img
4.2.2图像的源文件src
4.2.3图像的提示文字alt
4.2.4图像的宽度和高度width、heught
4.3图像的超链接
4.3.1图像的超链接
4.3.2图像热区链接
4.4练习题
《HTML CSS JavaScript网页制作》
教学教案
第1讲
课时内容
HTML基础
授课时间
80分钟
课时
2
教学内容
在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。