网页设计教案首页.docx
- 文档编号:8959032
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:43
- 大小:183.77KB
网页设计教案首页.docx
《网页设计教案首页.docx》由会员分享,可在线阅读,更多相关《网页设计教案首页.docx(43页珍藏版)》请在冰豆网上搜索。
网页设计教案首页
南京信息职业技术学院
教案
授课班级
授课形式
讲授
页码
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)
——标记都括在一对尖括号“<”和“>”中,标记一般成对出现,中间加入受标记控制的信息内容,例如:
和
2.HTML元素(Element)
——用于指示浏览器如何组织和显示文档。
元素一般由一个起始标记和其对应的结束标记、标记之间的内容构成。
例如:
3.HTML属性(Attribute)
——属性是元素具有的,用来告诉浏览器如何控制或显示元素内容的。
例如:
1.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掌握文字格式化和超链接
教学重点
1、
、教学难点
如何控制文字格式和建立超链接
更新、补充、删除内容
无
教学手段
多媒体
课外作业
无
课后体会
教学过程设计
第2章创建HTML文件
一、复习
Dreamweaver工具的使用
二、新授课
2.1创建HTML文件
-注释以
--开始,以-->结束
-html元素
head元素
文档标题
样式和脚本
body元素
浏览器显示的页面内容
-开始标记:
<元素名>
-结束标记:
元素名>
2.2HTML的组织规范
所有的HTML文档都遵循由W3C规定的HTML规范。
2.3HTML基本标记
-结构标记
-头标记
-文档标题标记
-内容标记
第3章文档格式化
3.1文字格式化
-字体标记
-使用属性检查器中的字体类型、字体大小、字体颜色等设置格式化文本:
3.2超链接和锚站
-链接到其他资源(如XHTML文档和图像)
三、学生随堂练习
四、总结
南京信息职业技术学院
教案
授课班级
授课形式
讲授
页码
3
授课日期
年月日第周
教学时数
2
授课章节名称
第3章文档格式化
3.2超链接和锚站
3.3段落格式化
3.4使用列表
教学目标
1掌握内部链接的使用
2掌握段落格式化和使用列表
教学重点
内部链接和列表
教学难点
列表
更新、补充、删除内容
无
教学手段
多媒体
课外作业
无
课后体会
教学过程设计
第3章文档格式化
一、引入
HTML的基本标记,组织规范。
二、新授课
3.2超链接和锚站
-内部链接:
在同一个文档的不同位置之间进行跳转
-命名锚站的一般语法格式为:
“书签名”用来标示“锚站A”在HTML文档中的位置
-要找到上述锚站,需要编写如下代码:
注意:
href属性赋的值若是锚站的name属性值,则必须在书签名前边加一个“#”号。
-email链接:
mail:
URL
3.3段落格式化
-
标记:
最常用段落标记
-其他段落标记:
-预格式化段落标记:
-标题:
~~
-换行与空行:
-水平线:
3.4使用列表
-有序列表
-无序列表
-定义列表
三、学生随堂练习
四、总结
南京信息职业技术学院
教案
授课班级
授课形式
实验
页码
4
授课日期
年月日第周
教学时数
2
授课章节名称
实验一:
超链接与列表
教学目标
1会使用HTML创建Web页面
2学会标记信息列表和超链接
教学重点
超链接的建立、列表的使用
教学难点
嵌套列表
更新、补充、删除内容
无
教学手段
上机实验
课外作业
实验报告
课后体会
教学过程设计
实验一:
超链接与列表
一、复习理论
超链接与列表
二、布置实验任务
1实验目的
会使用HTML创建Web页面
学会标记信息列表和超链接
掌握列表在实际问题中的应用
2实验任务
创建有序列表“有序列表.html”
创建嵌套列表“嵌套列表.html”
创建有序列表和无序列表之间的超链接
三、指导学生上机实验
针对学生普遍存在的问题进行集体讲解和指导。
四、总结这次实验存在的问题
五、布置作业:
实验报告
南京信息职业技术学院
教案
授课班级
授课形式
讲授
页码
5
授课日期
年月日第周
教学时数
2
授课章节名称
第4章使用图像和背景
4.1常用网络图像格式
4.2使用图像
4.3创建图像地图
教学目标
1、掌握标签各种属性的使用
2、会创建图像地图
教学重点
标签各种属性的使用
教学难点
灵活使用标签的各种属性
更新、补充、删除内容
无
教学手段
多媒体
课外作业
无
课后体会
教学过程设计
第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创建表格
-基本表格标记:
和
-设置表格行:
和 -设置表格列:
和 和 是tablehead的简称,用来设置表头 是tabledata的简称,用来标记表头以外的其他单元格 -添加标题:
caption标记
“align”属性:
指定表格的标题位置
-调整表格尺寸:
width(宽度)和height(高度)属性
-对齐方式align:
属性值有left、right、和center三种,默认为left
5.2设置表格格式
-设置表格背景颜色:
bgcolor属性
、
、 (或 )标记中使用 -在表格中插入图片:
可放入某一个单元格内,也可作为表格背景
加背景图片:
标记中加入background属性
在一个单元格中加入图片:
在(
或 )之间加入标记 和三种标记-调整单元格大小:
width属性
-单元格内容的对齐方式:
align和valign属性
-设置单元格间距和边距:
cellspacing属性和cellpadding属性:
-扩展行和列:
rowsapn属性和colspan属性
5.3高级表格标记
-行编组:
赋予表格行特殊的含义
包括,
:
:表示该行定义为当前表格的题注
表示该行定义为当前表格的尾注
:表示表格的主体部分
标记必须出现在标记之前和标记之后举例讲解-列编组:
标记 三、学生练习
四、总结
南京信息职业技术学院
教案
授课班级
授课形式
实验
页码
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标记:
没有结束标记
>>>定义单个框架中的显示内容及其外观样式
>>>src属性:
指定要显示的页面的URL
>>>单个标记,无需结尾
-noframes标记:
浏览器无法显示框架时,显示此标记中的内容
举例演示多框架和弹性框架
2.框架集嵌套: