南京信息职业技术学院教案授课班级授课形式讲授页码1授课日期年月日第周教学时数2授课章节名称第1章HTML基础知识1.1HTML简介1.2HTML基本术语1.3Dreamweaver介绍教学目标1对HTML语言有初步的认识2掌握Dreamweaver工具的使用教学重点HTML基础知识和Dreamweaver工具的使用教学难点Dreamweaver工具的使用更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第1章HTML基础知识一、新授课1.1HTML(HyperTextMarkupLanguage)简介–超文本标记语言–用于指定在Web浏览器中显示的文本的格式,指定文档内容,结构和格式–编辑器(记事本、写字板、Dreamweaver等)–文件扩展名:.html或.htm–Web浏览器(IE、Netscape、Firefox等)1.2HTML基本术语1.HTML标记(Tag)——标记都括在一对尖括号“”和“”中,标记一般成对出现,中间加入受标记控制的信息内容,例如:b和/b2.HTML元素(Element)——用于指示浏览器如何组织和显示文档。元素一般由一个起始标记和其对应的结束标记、标记之间的内容构成。例如:title这是一个HTML文件/title3.HTML属性(Attribute)——属性是元素具有的,用来告诉浏览器如何控制或显示元素内容的。例如:ahref==_blanksohu网站/a1.3Dreamweaver介绍-一款用于设计、开发网站和Web应用程序的专业HTML编辑器-用户可以选择使用布局单元格或框架来设计页面的布局-可用于创建文本、插入动态图像、提供网页超链接、创建Flash文本和Flash按钮等-可用于组合由某些软件(如Photoshop、ImageReady和Flash等)制作的图形、动画和按钮二、总结南京信息职业技术学院教案授课班级授课形式讲授页码2授课日期年月日第周教学时数2授课章节名称第2章创建HTML文件2.1创建HTML文件2.2HTML的组织规范2.3HTML基本标记第3章文档格式化3.1文字格式化3.2超链接和锚站教学目标1理解HTML文件的基本结构2掌握文字格式化和超链接教学重点1html、head、body2a教学难点如何控制文字格式和建立超链接更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第2章创建HTML文件一、复习Dreamweaver工具的使用二、新授课2.1创建HTML文件-注释以!--开始,以--结束-html元素head元素文档标题样式和脚本body元素浏览器显示的页面内容-开始标记:元素名-结束标记:/元素名2.2HTML的组织规范所有的HTML文档都遵循由W3C规定的HTML规范。2.3HTML基本标记-结构标记html-头标记head-文档标题标记title-内容标记body第3章文档格式化3.1文字格式化-字体标记font-使用属性检查器中的字体类型、字体大小、字体颜色等设置格式化文本:3.2超链接和锚站-链接到其他资源(如XHTML文档和图像)三、学生随堂练习四、总结南京信息职业技术学院教案授课班级授课形式讲授页码3授课日期年月日第周教学时数2授课章节名称第3章文档格式化3.2超链接和锚站3.3段落格式化3.4使用列表教学目标1掌握内部链接的使用2掌握段落格式化和使用列表教学重点内部链接和列表教学难点列表更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第3章文档格式化一、引入HTML的基本标记,组织规范。二、新授课3.2超链接和锚站-内部链接:在同一个文档的不同位置之间进行跳转-命名锚站的一般语法格式为:aname=书签名锚站A/a“书签名”用来标示“锚站A”在HTML文档中的位置-要找到上述锚站,需要编写如下代码:ahref=#书签名点击此处将使浏览器跳到锚站A处/a注意:href属性赋的值若是锚站的name属性值,则必须在书签名前边加一个“#”号。-email链接:mail:URL3.3段落格式化-p标记:最常用段落标记-其他段落标记:div、span、address、blockquote-预格式化段落标记:pre-标题:h1~~h6-换行与空行:br-水平线:hrhrwidth=”宽度”align=”对齐方式”size=”粗细”noshade3.4使用列表-有序列表-无序列表-定义列表三、学生随堂练习四、总结南京信息职业技术学院教案授课班级授课形式实验页码4授课日期年月日第周教学时数2授课章节名称实验一:超链接与列表教学目标1会使用HTML创建Web页面2学会标记信息列表和超链接教学重点超链接的建立、列表的使用教学难点嵌套列表更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教学过程设计实验一:超链接与列表一、复习理论超链接与列表二、布置实验任务1实验目的会使用HTML创建Web页面学会标记信息列表和超链接掌握列表在实际问题中的应用2实验任务创建有序列表“有序列表.html”创建嵌套列表“嵌套列表.html”创建有序列表和无序列表之间的超链接三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业:实验报告南京信息职业技术学院教案授课班级授课形式讲授页码5授课日期年月日第周教学时数2授课章节名称第4章使用图像和背景4.1常用网络图像格式4.2使用图像4.3创建图像地图教学目标1、掌握img标签各种属性的使用2、会创建图像地图教学重点img标签各种属性的使用教学难点灵活使用img标签的各种属性更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第4章使用图像和背景一、复习引入图像和背景可以大大增强网页的吸引力和易用性,一个优秀的网页设计者必须善于合理运用图像和背景以突出网页所要表现的内容。二、新授课4.1常见网络图像格式-GIF(GraphicsInterchangeFormat)图像-JPEG(JointPhotographicExpertsGroup)图像-PNG(PortableNetworkGraphics)图像4.2使用图像img--src属性设置为要插入图像文件的URI-height和width属性-align属性-hspace和vspace属性-border属性、background属性-创建图片链接-使用缩略图4.3创建图像地图:一个图像地图中设置多个链接热点:整张图片被分成的多块活动的区域。用户自己定义这些热点,把它们分别链接到各自独立的URI地址。图像地图的基本类型包括两种:1.客户端图像地图:该地图直接被浏览器处理2.服务器端图像地图:该地图将被Web服务器上的一段程序负责解析处理三、学生随堂练习img标签属性的使用创建图像地图四、总结南京信息职业技术学院教案授课班级授课形式讲授页码6授课日期年月日第周教学时数2授课章节名称第5章表格布局5.1创建表格5.2设置表格格式5.3高级表格标记教学目标1学会创建带有数据行和数据列的表格2学会控制表格格式教学重点表格的定义;表格行的控制;单元格的控制;表格的分组教学难点控制表格格式更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第5章表格布局一、复习引入HTML网页可以看做是一个二维空间,可以使用表格对这个二维空间进行划分,然后对要表现的内容进行合理的布局,表格是一种重要的布局方式。二、新授课5.1创建表格-基本表格标记:table和/table-设置表格行:tr和/tr-设置表格列:th和/thtd和/tdth是tablehead的简称,用来设置表头td是tabledata的简称,用来标记表头以外的其他单元格-添加标题:caption标记“align”属性:指定表格的标题位置-调整表格尺寸:width(宽度)和height(高度)属性-对齐方式align:属性值有left、right、和center三种,默认为left5.2设置表格格式-设置表格背景颜色:bgcolor属性table、tr、td(或th)标记中使用-在表格中插入图片:可放入某一个单元格内,也可作为表格背景加背景图片:table标记中加入background属性在一个单元格中加入图片:在(td或th)之间加入img标记-调整单元格大小:width属性-单元格内容的对齐方式:align和valign属性-设置单元格间距和边距:cellspacing属性和cellpadding属性:-扩展行和列:rowsapn属性和colspan属性5.3高级表格标记-行编组:赋予表格行特殊的含义包括thead,tbody和tfoot三种标记thead:表示该行定义为当前表格的题注tfoot:表示该行定义为当前表格的尾注tbody:表示表格的主体部分tfoot标记必须出现在tbody标记之前和thead标记之后举例讲解-列编组:colgroup标记三、学生练习四、总结南京信息职业技术学院教案授课班级授课形式实验页码7授课日期年月日第周教学时数2授课章节名称实验二:链接、图像与表格教学目标1学会创建跨行、跨列的表格2会控制表格格式,使用表格进行合理布局3学会使用img标签教学重点会创建表格,使用图像教学难点使用表格进行合理的布局更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教学过程设计实验二:链接、图像与表格一、复习理论超链接、图像、表格二、布置实验任务1实验目的:●学会创建跨行、跨列的表格●学会使用img标签●会控制表格格式,使用表格进行合理布局2实验任务:●习题一:创建跨行和跨列的表格●习题二:创建嵌套表格如下图所示,并在此基础上加入图像和超链接,网页围绕一个主题合理布局三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业:实验报告南京信息职业技术学院教案授课班级授课形式实验页码8授课日期年月日第周教学时数2授课章节名称实验二:链接、图像与表格(续)教学目标1学会创建跨行、跨列的表格2会控制表格格式,使用表格进行合理布局3学会使用img标签教学重点会创建表格,使用图像教学难点使用表格进行合理的布局更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教学过程设计实验二:链接、图像与表格(续)一、复习理论超链接、图像、表格二、布置实验任务1实验目的:●学会创建跨行、跨列的表格●学会使用img标签●会控制表格格式,使用表格进行合理布局2实验任务:●在上次习题二的基础上发挥主观能动性加入图像和超链接,网页围绕一个主题合理布局三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业:实验报告南京信息职业技术学院教案授课班级授课形式讲授页码9授课日期年月日第周教学时数2授课章节名称第6章框架布局6.1框架的概念6.2创建含有框架的HTML文档教学目标1学会使用frameset元素在单一浏览窗口显示多个Web页面2使用框架进行布局教学重点框架的创建和使用教学难点使用框架创建符合需求的页面更新、补充、删除内容无教学手段多媒体课外作业无课后体会教学过程设计第6章框架布局一、复习引入窗口框架可用于将窗口画面分割成多个小窗口,且每个小窗口中,可以显示不同的网页,达到在浏览器中同时浏览不同网页的效果。二、新授课6.1框架框架能够同时显示多个HTML文档,框架之间可以互相联系,触发一个框架中的事件可以改变另一个框架中的内容和行为。6.2创建含有框架的HTML文档1.基本框架标记:frameset-不使用body标记-cols属性:垂直框架,指定框架的宽度-rows属性:水平框架,指定框架的高度-frame标记: