《HTML+CSS网页设计与布局》教案.pdf

第 01 周第1/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境网页设计基础知识Dreamweaver 软件介绍及其基础操作HTML 基础知识及常用标记1)使学生了解网页设计的相关基础知识；2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。1)了解网页设计相关概念和网页的类型；2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 15 分钟备注备注一、一、引入引入1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML 或者 CSS这两个概念吗？教教学学过过二、二、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、三、逐步演示讲解分析教学内容逐步演示讲解分析教学内容约 35 分钟1、网站和网页的区别：（1）网页是 Internet 基本元素；程程（2）网站由网页组成；设设2、静态网页和动态网页：静态网页：纯粹 HTML 语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。计计动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以 ASP、PHP、JSP、ASPX 为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；学生理解第 01 周第2/25页（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；4、网页设计原则：（1）了解客户需求（2）遵循 Web 标准（3）运用形式美法则5、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布6、网页设计的主要软件：（1）Photoshop（2）Dweamveawer（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）软件首选参数设置10、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）删除线与下划线：删除线、下划线（6）上标与下标：上标 下标15、学生实训及辅导；16、字体标记：（1）字体大小：字体大小（2）字体颜色：字体颜色（3）设置标题字体：主题文字（4）物理字体：，将字符设置成粗体。，将字符设置成斜体。，给字符增加下划线。，给字符增加删除线。，将字符设置成打字机字体。，将字符设置成上标字体。，将字符设置成下标字体。（5）逻辑字体：强调文字。字体加重。显示编程代码。显示示例文字。显示键盘按键文字。缩小文字。放大文字。17、字体标记实例讲解；18、学生实训及辅导；四、四、课外作业课外作业第 3 章上机实践。五、五、课堂小结课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver 基本使用方法；3、HTML 基础知识及常用标记；约 30 分钟约 20 分钟约 30 分钟约 20 分钟约 20 分钟约 40 分钟学生实践学生实践学生实践总结后后第 01 周第4/25页记记第 01 周第5/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境文字布局插入图像超级链接3)使学生熟练掌握 HTML 常用标记的基本使用方法；4)使学生掌握 HTML 常用标记各种属性的含义和设置方法。3)掌握各种 HTML 常用标记的基本使用方法；4)熟记各种 HTML 常用标记的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟约 30 分钟约 30 分钟约 40 分钟约 20 分钟备注备注六、六、引入引入3、回顾上周所学内容：上周主要介绍了网页设计和 HTML 相关基础知识及 Dreamweaver 软件基础操作，重点介绍了 HTML 基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？教教学学过过七、七、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML 文字布局和插入图像、超级链接的标记应用。八、八、逐步演示讲解分析教学内容逐步演示讲解分析教学内容19、换行控制：文字一、文字二程程20、不换行控制：21、文字对齐：align=#、居中设设22、设置段落：段落一、段落二23、学生实训及辅导；计计24、上周课外作业点评；25、无序列表：表项一表项26、有序列表：表项一学生理解第 01 周第6/25页表项27、欲格式化文本：文字、文本28、计算机输出格式：代码样式小型固定宽度字体显示的文本代码样式固定宽度字体渲染代码样式固定宽度字体渲染文本代码样式斜体字渲染29、学生实训及辅导；30、在网页中插入图像：31、图像无法显示时的提示信息：32、控制图像的大小：33、设置边框：34、图像的链接：35、学生实训及辅导；36、图像映射图：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 超级链接。约 20 分钟约 30 分钟约 30 分钟约 20 分钟约 30 分钟约 30 分钟约 30 分钟学生实践学生实践学生实践学生实践总结后后第 01 周第7/25页记记第 01 周第8/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境表单的使用插入表格5)使学生熟练掌握 HTML 常用标记的基本使用方法；6)使学生掌握 HTML 常用标记各种属性的含义和设置方法。5)掌握各种 HTML 常用标记的基本使用方法；6)熟记各种 HTML 常用标记的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟约 30 分钟约 40 分钟约 30 分钟约 20 分钟备注备注十一、十一、引入引入5、回顾上周所学内容：上周主要介绍了 HTML 文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用；6、提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表格？教教学学十二、十二、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML 表单和表格的标记应用。十三、十三、逐步演示讲解分析教学内容逐步演示讲解分析教学内容48、表单基本语法：、属性 action 和 method过过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、表格应用实例讲解；67、学生实训及辅导；十四、十四、课外作业课外作业第 8 章上机实践。十五、十五、课堂小结课堂小结本次课主要内容：1、表单的使用；2、插入表格；3、表格应用实例；约 20 分钟约 40 分钟约 30 分钟约 40 分钟约 20 分钟约 40 分钟学生实践学生实践学生实践总结后后第 01 周第10/25页记记第 01 周第11/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境网页框架对象移动属性多媒体对象应用7)使学生熟练掌握 HTML 常用标记的基本使用方法；8)使学生掌握 HTML 常用标记各种属性的含义和设置方法。7)掌握各种 HTML 常用标记的基本使用方法；8)熟记各种 HTML 常用标记的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟约 20 分钟约 30 分钟约 30 分钟备注备注十六、十六、引入引入7、回顾上周所学内容：上周主要介绍了 HTML 表单和表格的标记应用方法，重点介绍了表单的应用实例；8、提出问题：框架网页如何创建？如何使网页中的对象移动？如何在网页中插入 Flash、影片、声音？教教学学十七、十七、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是HTML 网页框架和对象移动属性、多媒体对象的标记应用。十八、十八、逐步演示讲解分析教学内容逐步演示讲解分析教学内容过过68、框架的基本语法：程程 设设 计计69、框架垂直分栏：垂直分栏是在中用 cols 表示跨多列表元，colspan70、框架水平分栏：水平分栏的语法用 rows 表示71、设置不可调节框架大小：noresize72、学生实训及辅导；73、上周课外作业点评；学生理解学生实践第 01 周第12/25页74、浏览器不支持框架：75、设置框架边框：76、设置滚动条：设置滚动条在是里面，用 scrolling 属性77、导航框架：导航框架是在网页框架的中加入 name 属性，表示该的名称，然后通过用标记的链接，并用 target 的属性值等于的名称；78、内联框架：内联框架存在的单个 HTML 文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；79、学生实训及辅导；80、框架应用实例讲解；81、学生实训及辅导；82、移动属性基本语法：要移动的对象83、文字的移动设置：文字84、图片移动的设置：85、文本移动的方向：向上移动86、文本的滚动循环；87、文本的移动速度：scrollamount 设置移动的速度88、学生实训及辅导；89、网页多媒体的基本语法：90、隐藏面板的设置；91、对齐方式：align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom92、学生实训及辅导；93、移动对象应用实例讲解；94、多媒体对象应用实例讲解；95、学生实训及辅导；十九、十九、课外作业课外作业第 11 章上机实践。二十、二十、课堂小结课堂小结本次课主要内容：1、网页框架；2、对象移动属性；3、多媒体对象应用。约 10 分钟约 20 分钟约 20 分钟约 40 分钟约 20 分钟约 20 分钟约 10 分钟约 20 分钟约 30 分钟约 40 分钟学生实践学生实践学生实践学生实践学生实践总结后后第 01 周第13/25页记记第 01 周第14/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境CSS 基础知识CSS 字体设置9)使学生熟练掌握 CSS 常用样式的创建方法；10)使学生掌握 CSS 常用样式各种属性的含义和设置方法。9)掌握各种 CSS 常用样式的基本使用方法；10)熟记各种 CSS 常用样式的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配备注备注二十一、二十一、引入引入9、回顾上周所学内容：上周主要介绍了HTML 网页框架和多媒体对象标记，约 10 分钟重点介绍了 HTML 对象移动属性设置方法；10、提出问题：什么是 CSS？CSS 有什么用？如何创建和使用CSS？二十二、二十二、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是 CSS 基础知识和 CSS 字体样式设置方法和技巧。教教学学二十三、二十三、逐步演示讲解分析教学内容逐步演示讲解分析教学内容约 40 分钟96、CSS 相关基础知识；过过97、CSS 文件链接方式：（1）内联定义：内联定义即是在对象的标记内，使用对象的style 属性定义适用其的样式表属性。程程链入内部 CSS：/*这里写 CSS 内容*/（2）链接外部 CSS：设设计计98、CSS 在浏览器兼容性：现在浏览器市场的主流浏览器主要是 Internet Explorer（简称 IE）和Mozilla Firefox（简称 FF），网页中的 CSS 因两个浏览器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的 CSS 属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。99、CSS 选择符：CSS 选择符就是 CSS 样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS 选择符只能学生理解第 01 周第15/25页以字母开头，选择符在 CSS 中可分成多种，在本小节中只介绍常用的CSS选择符：HTML 标签选择符、ID 选择符和 CLASS（类选择符）选择符。100、CSS 伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符，HTML 元素可以占有这些预定义性质。实际上这些性质与class 属性的功能是相同的，因此在 CSS 术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的 class 属性，相反，它们代表应用到这些元素的某些方面，或者是相对于该元素的浏览器用户界面的状态。101、CSS 常用单位：em：（em，元素的字体的高度）。ex：（x-height，字母 x 的高度）。px：（像素，相对于屏幕的分辨率）。绝对长度单位：in：（英寸，1 英寸=2.54 厘米）。cm：（厘米，1 厘米=10 毫米）。mm：（毫米，1 米=1000 毫米）。pt：（点，1 点=1/72 英寸）。pc：（帕，1 帕=12 点）。102、上周课外作业点评；103、学生实训及辅导；104、字 体 和 字 体 颜 色：font:font-style|font-variant|font-weight|font-size|line-height|font-family105、字体大小：Font-size，后面可接的参数值有：xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length106、字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900107、行距：line-height:#；108、字体类型：Font-family:fontname；109、行距：line-height:#；110、间距与间隔：word-spacing：normal|长度单位、letter-spacing:normal|length111、字体应用实例讲解；112、学生实训及辅导；二十四、二十四、课外作业课外作业第 16 章上机实践。二十五、二十五、课堂小结课堂小结本次课主要内容：1、CSS 基础知识；2、CSS 文件链接方式；3、CSS 字体设置。约 40 分钟约 60 分钟约 50 分钟约 40 分钟约 80 分钟学生实践学生实践总结后后第 01 周第16/25页记记第 01 周第17/25页HTML+CSS 网页设计与布局课程教案授课教师：授课教师：授课班级授课班级：地点：地点：周课时：周课时：5 课时章节章节内容内容教学教学目标目标重点重点难点难点教学教学方法方法教学教学环境环境CSS 文本设置CSS 背景设置对象尺寸设置11)使学生熟练掌握 CSS 常用样式的创建方法；12)使学生掌握 CSS 常用样式各种属性的含义和设置方法。11)掌握各种 CSS 常用样式的基本使用方法；12)熟记各种 CSS 常用样式的含义。课堂讲授、案例讲解与指导计算机机房教学过程及内容提要教学过程及内容提要时间时间分配分配约 10 分钟备注备注二十六、二十六、引入引入11、回顾上周所学内容：上周主要介绍了 CSS 基础知识和 CSS 文件链接方式，重点介绍了CSS 字体样式设置方法；12、提出问题：如何用 CSS 进行文本和背景设置？如何控制网页中的对象尺寸？教教学学二十七、二十七、告知学生课堂任务告知学生课堂任务本次课所学习的主要内容是 CSS 文本设置和背景设置、对象尺寸设置的方法和技巧。二十八、二十八、逐步演示讲解分析教学内容逐步演示讲解分析教学内容约 30 分钟过过113、字母大小写转换：text-transform：capitalize|uppercase|lowercase|nonecapitalize：使每个词的首字母大写程程uppercase：使每个字的所有字母大写lowercase：使每个字的所有字母小写设设none：字母以正常形式显示计计114、文字修饰：text-decoration：underline|overline|line-throungh|blink|noneunderline：给文字加下划线overline：给文字加上划线line-through：给文字加删除线blink：文字在闪烁none：缺省使用无115、文本空格处理方式：white-space:normal|pre|nowrap学生理解