《网页设计教案首页》由会员分享，可在线阅读，更多相关《网页设计教案首页（44页珍藏版）》请在金锄头文库上搜索。
1、南京信息职业技术学院教 案授课班级授课形式讲授页 码1授课日期 年 月 日 第 周 教学时数2授课章节名称第1章HTML基础知识1.1HTML简介1.2HTML基本术语1.3Dreamweaver介绍教学目标1 对HTML语言有初步的认识2 掌握Dreamweaver工具的使用教学重点HTML基础知识和Dreamweaver工具的使用教学难点Dreamweaver工具的使用 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第1章 HTML基础知识一、新授课1.1 HTML（HyperText Markup Language）简介超文本标记语言用于指定在Web浏览器中
2、显示的文本的格式，指定文档内容，结构和格式编辑器 (记事本、写字板、Dreamweaver等)文件扩展名：.html 或 .htmWeb 浏览器（IE、Netscape、Firefox等）1.2 HTML基本术语1.HTML标记（Tag）标记都括在一对尖括号“”中，标记一般成对出现，中间加入受标记控制的信息内容，例如：和2.HTML元素（Element）用于指示浏览器如何组织和显示文档。元素一般由一个起始标记和其对应的结束标记、标记之间的内容构成。例如：这是一个HTML文件3.HTML属性（Attribute）属性是元素具有的，用来告诉浏览器如何控制或显示元素内容的。例如：sohu网站1.3
3、Dreamweaver介绍- 一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 - 用户可以选择使用布局单元格或框架来设计页面的布局- 可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等- 可用于组合由某些软件（如 Photoshop、ImageReady 和 Flash 等）制作的图形、动画和按钮二、总结南京信息职业技术学院教 案授课班级 授课形式讲授页 码2授课日期 年 月 日 第 周 教学时数2授课章节名称第2章 创建HTML文件2.1 创建HTML文件2.2 HTML的组织规范2.3 HTML基本标记第3章 文档格式化3.1 文字
4、格式化3.2 超链接和锚站教学目标1 理解HTML文件的基本结构2 掌握文字格式化和超链接教学重点 1 、2 教学难点如何控制文字格式和建立超链接 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第2章 创建HTML文件一、 复习Dreamweaver工具的使用二、新授课2.1 创建HTML文件- 注释以结束- html 元素head 元素文档标题样式和脚本body 元素浏览器显示的页面内容- 开始标记：- 结束标记：2.2 HTML的组织规范 所有的HTML文档都遵循由W3C规定的HTML规范。2.3 HTML基本标记- 结构标记- 头标记- 文档标题标记- 内容
5、标记第3章 文档格式化3.1 文字格式化- 字体标记- 使用属性检查器中的字体类型、字体大小、字体颜色等设置格式化文本：3.2 超链接和锚站 - 链接到其他资源（如XHTML文档和图像）三、学生随堂练习四、总结阳气决定着脏腑的工作能力，而脏腑的工作能力又决定着身体的健康状况和寿命，所以说，想要身体好一点，寿命长一点，就要学会保护好我们的阳气，增加阳气。健康人晒晒太阳，就能吸收到充足的阳气了，但对于老年人和体质特别虚弱的人来说，恐怕吸收来的阳气也不够解燃眉之急的南京信息职业技术学院教 案授课班级授课形式讲授页 码3授课日期 年 月 日 第 周 教学时数2授课章节名称第3章 文档格式化3.2 超链
6、接和锚站 3.3 段落格式化3.4 使用列表教学目标1 掌握内部链接的使用2 掌握段落格式化和使用列表教学重点内部链接和列表教学难点列表 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第3章 文档格式化一、引入 HTML的基本标记，组织规范。二、新授课3.2 超链接和锚站 - 内部链接 ：在同一个文档的不同位置之间进行跳转- 命名锚站的一般语法格式为：锚站A“书签名”用来标示“锚站A”在HTML文档中的位置- 要找到上述锚站，需要编写如下代码：点击此处将使浏览器跳到锚站A处注意：href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。- em
7、ail链接：mail:URL3.3 段落格式化 - 标记：最常用段落标记 - 其他段落标记：、 - 预格式化段落标记: - 标题： - 换行与空行：- 水平线： 3.4 使用列表- 有序列表 - 无序列表 - 定义列表三、学生随堂练习四、总结南京信息职业技术学院教 案授课班级授课形式实验页 码4授课日期 年 月 日 第 周 教学时数2授课章节名称实验一：超链接与列表教学目标1 会使用HTML创建Web页面2 学会标记信息列表和超链接教学重点超链接的建立、列表的使用教学难点嵌套列表 更新、补充、删除内容无教学手段上机实验课外作业实验报告课后体会教 学 过 程 设 计实验一：超链接与列表一、复习理
8、论超链接与列表二、布置实验任务1 实验目的会使用HTML创建Web页面学会标记信息列表和超链接掌握列表在实际问题中的应用 2 实验任务创建有序列表“有序列表.html”创建嵌套列表“嵌套列表.html”创建有序列表和无序列表之间的超链接 三、指导学生上机实验针对学生普遍存在的问题进行集体讲解和指导。四、总结这次实验存在的问题五、布置作业：实验报告南京信息职业技术学院教 案授课班级授课形式讲授页 码5授课日期 年 月 日 第 周 教学时数2授课章节名称第4章 使用图像和背景4.1 常用网络图像格式4.2 使用图像4.3 创建图像地图教学目标1、掌握标签各种属性的使用2、会创建图像地图教学重点标签
9、各种属性的使用教学难点灵活使用标签的各种属性 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第4章 使用图像和背景一、 复习引入图像和背景可以大大增强网页的吸引力和易用性，一个优秀的网页设计者必须善于合理运用图像和背景以突出网页所要表现的内容。二、新授课 4.1 常见网络图像格式- GIF（Graphics Interchange Format）图像- JPEG（Joint Photographic Experts Group）图像- PNG（Portable Network Graphics）图像 4.2 使用图像 img - - src属性设置为要插入图像文件
10、的URI - height和width属性 - align属性 - hspace和vspace属性 - border属性、background属性- 创建图片链接- 使用缩略图 4.3 创建图像地图：一个图像地图中设置多个链接热点：整张图片被分成的多块活动的区域。用户自己定义这些热点，把它们分别链接到各自独立的URI地址。图像地图的基本类型包括两种： 1. 客户端图像地图：该地图直接被浏览器处理2. 服务器端图像地图：该地图将被Web服务器上的一段程序负责解析处理三、学生随堂练习 img标签属性的使用 创建图像地图四、总结 南京信息职业技术学院教 案授课班级授课形式讲授页 码6授课日期 年 月
11、 日 第 周 教学时数2授课章节名称第5章 表格布局5.1 创建表格5.2 设置表格格式5.3 高级表格标记教学目标1 学会创建带有数据行和数据列的表格2 学会控制表格格式教学重点表格的定义；表格行的控制；单元格的控制；表格的分组教学难点控制表格格式 更新、补充、删除内容无教学手段多媒体课外作业无课后体会教 学 过 程 设 计第5章 表格布局一、 复习引入HTML网页可以看做是一个二维空间，可以使用表格对这个二维空间进行划分，然后对要表现的内容进行合理的布局，表格是一种重要的布局方式。二、新授课5.1 创建表格 - 基本表格标记：和 - 设置表格行：和 - 设置表格列：和 和 是 table head的简称，用来设置表头 是 table data的简称，用来标记表头以外的其他单元格- 添加标题：caption标记 “align”属性：指定表格的标题位置- 调整表格尺寸：width（宽度）和height（高度）属性- 对齐方式align：属性值有left、right、和center三种，默认为left5.2 设置表格格式 - 设置表格背景颜色：bgcolor属性 、 、 （或）标记中使用 - 在表格中插入图片：可放入某一个单元格内，也可作为表格背景 加背景图片：
