《HTML+CSS网页设计与布局》教案.pdf
《《HTML+CSS网页设计与布局》教案.pdf》由会员分享,可在线阅读,更多相关《《HTML+CSS网页设计与布局》教案.pdf(17页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第 01 周第1/25页HTML+CSS 网页设计与布局课程教案授课教师:授课教师:授课班级授课班级:地点:地点:周课时:周课时:5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境网页设计基础知识Dreamweaver 软件介绍及其基础操作HTML 基础知识及常用标记1)使学生了解网页设计的相关基础知识;2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。1)了解网页设计相关概念和网页的类型;2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约
2、15 分钟备注备注一、一、引入引入1、相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用;2、提出问题:上过网吧?有谁自学过网页设计?听说过HTML 或者 CSS这两个概念吗?教教学学过过二、二、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;三、三、逐步演示讲解分析教学内容逐步演示讲解分析教学内容约 35 分钟1、网站和网页的区别:(1)网页是 Internet 基本元素;程程(2)网站由网页组成;设设2、静态网页和
3、动态网页:静态网页:纯粹 HTML 语言格式的网页通常被称为静态网页,静态网页的后缀名通常为.htm、.html、.shtml、.xml。计计动态网页:许多人认为网页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。也就是说,它是返回到了客户端上的网页。例如网页文件是以 ASP、PHP、JSP、ASPX 为结尾就是动态的网页了。静态网页的特点:(1)内容相对稳定,容易被搜索引擎检索到;学生理解第 01 周第2/25页(2)没有数据库支持,在网站
4、制作和维护方面工作量大;(3)交互性差,在功能方面有很大的限制。动态网页的特点:(1)以数据库技术为基础,可大大降低网站维护的工作量;(2)可实现更多的功能,如用户注册、新闻发布、在线留言等;(3)不利于使用搜索引擎进行网站推广。3、常见网页类型:形象页、主页、栏目页、内页、新闻详细页等;4、网页设计原则:(1)了解客户需求(2)遵循 Web 标准(3)运用形式美法则5、网页设计流程:(1)手绘效果图:确定网页主题内容和风格(2)设计效果图:搜集、整合设计所需素材(3)版面编辑:网页的制作与实现(4)网页美化:动画设计,网页测试和发布6、网页设计的主要软件:(1)Photoshop(2)Dwe
5、amveawer(3)Flash(4)Firworks7、HTML 基础知识:(1)HTML 概念:Hyper Text Markup Language 超文本标识语言;(2)HTML 文档的编写方法:用记事本手工直接编写、使用可视化HTML 编辑器 Dreamweaver、由 Web 服务器动态生成;(3)网页 文件 命名:首 页 文件 名默 认 为:index.htm 或index.html;(4)HTML 文件结构:HTML 文件的正文 (5)用编辑器手工编写第一张网页;8、学生实训及辅导;9、Dreamweaver 软件界面介绍:(1)软件面板组成及基本操作方法(2)软件首选参数设置1
6、0、Dreamweaver 站点创建:站点-新建站点-设置站点名称-设置站点默认图像文件夹。11、学生实训操作:Dreamweaver 站点创建与设置;12、Dreamweaver 创建第一个网页:(1)名称:index.html约 20 分钟约 30 分钟约 20 分钟约 20 分钟约 20 分钟学生熟记学生实践学生实践第 01 周第3/25页(2)设置标题、输入文本、输入特殊字符(3)页面属性设置(4)预览网页13、学生实训及辅导;14、HTML 常用标记:(1)标题标记:主题文字(2)段落标记:这里表示段落(3)换行与注释:、(4)粗体与斜体:粗体、斜体(5)删除线与下划线:删除线、下划
7、线(6)上标与下标:上标 下标15、学生实训及辅导;16、字体标记:(1)字体大小:字体大小(2)字体颜色:字体颜色(3)设置标题字体:主题文字(4)物理字体:,将字符设置成粗体。,将字符设置成斜体。,给字符增加下划线。,给字符增加删除线。,将字符设置成打字机字体。,将字符设置成上标字体。,将字符设置成下标字体。(5)逻辑字体:强调文字。字体加重。显示编程代码。显示示例文字。显示键盘按键文字。缩小文字。放大文字。17、字体标记实例讲解;18、学生实训及辅导;四、四、课外作业课外作业第 3 章上机实践。五、五、课堂小结课堂小结本次课主要内容:1、网页设计基础知识;2、Dreamweaver 基本
8、使用方法;3、HTML 基础知识及常用标记;约 30 分钟约 20 分钟约 30 分钟约 20 分钟约 20 分钟约 40 分钟学生实践学生实践学生实践总结后后第 01 周第4/25页记记第 01 周第5/25页HTML+CSS 网页设计与布局课程教案授课教师:授课教师:授课班级授课班级:地点:地点:周课时:周课时:5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境文字布局插入图像超级链接3)使学生熟练掌握 HTML 常用标记的基本使用方法;4)使学生掌握 HTML 常用标记各种属性的含义和设置方法。3)掌握各种 HTML 常用标记的基本使用方法;4)熟记
9、各种 HTML 常用标记的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟约 30 分钟约 30 分钟约 40 分钟约 20 分钟备注备注六、六、引入引入3、回顾上周所学内容:上周主要介绍了网页设计和 HTML 相关基础知识及 Dreamweaver 软件基础操作,重点介绍了 HTML 基础知识及常用标记;4、提出问题:网页中文字如何布局?如何在网页中插入图像?如何运用超级链接?教教学学过过七、七、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML 文字布局和插入图像、超级链接的标记应用。八、八、逐步演示讲解分析教学内容逐
10、步演示讲解分析教学内容19、换行控制:文字一、文字二程程20、不换行控制:21、文字对齐:align=#、居中设设22、设置段落:段落一、段落二23、学生实训及辅导;计计24、上周课外作业点评;25、无序列表:表项一表项26、有序列表:表项一学生理解第 01 周第6/25页表项27、欲格式化文本:文字、文本28、计算机输出格式:代码样式小型固定宽度字体显示的文本代码样式固定宽度字体渲染代码样式固定宽度字体渲染文本代码样式斜体字渲染29、学生实训及辅导;30、在网页中插入图像:31、图像无法显示时的提示信息:32、控制图像的大小:33、设置边框:34、图像的链接:35、学生实训及辅导;36、图像
11、映射图:37、文本与图像对齐:38、学生实训及辅导;39、最简单的文字超链:文字链接40、超链网页的打开方式:_blank、_parent、_self、_top41、链接的注释:163 网站42、设置图片链接:43、设置锚点:文章中的文字44、邮箱地址链接:作者的邮箱45、相对路径:相对路径是指这个文件在所在的位置与其他文件或文件夹的关系;46、绝对路径:HTML 绝对路径(absolute path)指带域名的文件的完整路径。47、学生实训及辅导;九、九、课外作业课外作业第 6 章上机实践。十、十、课堂小结课堂小结本次课主要内容:1、HTML 文字布局;2、HTML 插入图像;3、HTML
12、超级链接。约 20 分钟约 30 分钟约 30 分钟约 20 分钟约 30 分钟约 30 分钟约 30 分钟学生实践学生实践学生实践学生实践总结后后第 01 周第7/25页记记第 01 周第8/25页HTML+CSS 网页设计与布局课程教案授课教师:授课教师:授课班级授课班级:地点:地点:周课时:周课时:5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境表单的使用插入表格5)使学生熟练掌握 HTML 常用标记的基本使用方法;6)使学生掌握 HTML 常用标记各种属性的含义和设置方法。5)掌握各种 HTML 常用标记的基本使用方法;6)熟记各种 HTML 常
13、用标记的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟约 30 分钟约 40 分钟约 30 分钟约 20 分钟备注备注十一、十一、引入引入5、回顾上周所学内容:上周主要介绍了 HTML 文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用;6、提出问题:什么是表单?常见的表单有哪些?如何在网页中使用表格?教教学学十二、十二、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML 表单和表格的标记应用。十三、十三、逐步演示讲解分析教学内容逐步演示讲解分析教学内容48、表单基本语法:、属性 action 和 method过
14、过49、文本框:50、密码框:程程51、单选框:52、复选框:设设53、按钮设置:54、学生实训及辅导;计计55、上周课外作业点评;56、下拉表:选项一选项二选项三绝对路径57、文本域:学生理解学生实践第 01 周第9/25页58、表单应用实例讲解;59、学生实训及辅导;60、表格基本语法:标签对表示表行标签对表示表头标签对表示表元61、跨多行表元:Rowspan62、跨多列表元:colspan63、表格内设置文字对齐:对齐语法用 align 表示,后面接的值是 left、center 和 right,分别代表向左、居中和向右对齐复选框64、表格在网页中对齐:;65、学生实训及辅导;66、表格
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML+CSS网页设计与布局 HTML CSS 网页 设计 布局 教案
限制150内