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

  • 时间:
  • 浏览:3
  • 来源:SSYCMS

第 01 周—第 1/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: 网页设计基础知识 Dreamweaver 软件介绍及其基础操作 HTML 基础知识及常用标记 1) 2) 1) 2) 使学生了解网页设计的相关基础知识; 使学生熟悉 Dreamweaver 软件界面的基本操作方法。 了解网页设计相关概念和网页的类型; 熟练掌握 Dreamweaver 软件创建和管理站点的方法。 地点: 周课时: 5 课时 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 一、 引入 1、 相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内 容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种 学习氛围,尊重同学,互帮互学,真正达到学以致用; 2、 提出问题: 上过网吧?有谁自学过网页设计?听说过 HTML 或者 CSS 这两个概念吗? 二、 告知学生课堂任务 本次课所学习的主要内容是 HTML 相关基础知识和 Dreamweaver 软 件基础操作; 时间 分配 备注 约 15 分钟 教 学 过 程 设 计 三、 逐步演示讲解分析教学内容 约 35 分钟 1、 网站和网页的区别: (1)网页是 Internet 基本元素; (2)网站由网页组成; 2、 静态网页和动态网页: 静态网页:纯粹 HTML 语言格式的网页通常被称为静态网页,静态 网页的后缀名通常为.htm、.html、.shtml、.xml。 动态网页: 许多人认为网页会动就是动态网页, 这是个错误的观点, 在静态的网页中也可以含有动态的图片, 这仅仅是视觉上的动态罢 了。 真正的动态网页是指实际上并不是独立存在于服务器上的网页 文件, 只有当用户请求时服务器才返回一个完整的网页。 也就是说, 它是返回到了客户端上的网页。 例如网页文件是以 ASP、 PHP、 JSP、 ASPX 为结尾就是动态的网页了。 静态网页的特点: (1)内容相对稳定,容易被搜索引擎检索到; (2)没有数据库支持,在网站制作和维护方面工作量大; 学生理解 第 01 周—第 2/17 页 (3)交互性差,在功能方面有很大的限制。 动态网页的特点: (1)以数据库技术为基础,可大大降低网站维护的工作量; (2)可实现更多的功能,如用户注册、新闻发布、在线留言等; (3)不利于使用搜索引擎进行网站推广。 3、 常见网页类型:形象页、主页、栏目页、内页、新闻详细页等; 4、 网页设计原则: (1)了解客户需求 (2)遵循 Web 标准 (3)运用形式美法则 5、 网页设计流程: (1)手绘效果图:确定网页主题内容和风格 (2)设计效果图:搜集、整合设计所需素材 (3)版面编辑:网页的制作与实现 (4)网页美化:动画设计,网页测试和发布 6、 网页设计的主要软件: (1)Photoshop (2)Dweamveawer (3)Flash (4)Firworks 7、 HTML 基础知识: (1)HTML 概念:Hyper Text Markup Language 超文本标识语言; (2)HTML 文档的编写方法:用记事本手工直接编写、使用可视化 HTML 编辑器 Dreamweaver、由 Web 服务器动态生成; ( 3 ) 网 页 文 件 命 名 : 首 页 文 件 名 默 认 为 : index.htm 或 index.html; (4)HTML 文件结构: <HTML> <HEAD> <title></title> </HEAD> <BODY> HTML 文件的正文 </BODY> </HTML> (5)用编辑器手工编写第一张网页; 8、 学生实训及辅导; 9、 Dreamweaver 软件界面介绍: (1)软件面板组成及基本操作方法 (2)软件首选参数设置 10、 Dreamweaver 站点创建: 站点->新建站点->设置站点名称->设置站点默认图像文件夹。 11、 学生实训操作:Dreamweaver 站点创建与设置; 12、 Dreamweaver 创建第一个网页: (1) 名称:index.html (2) 设置标题、输入文本、输入特殊字符 约 20 分钟 学生熟记 约 30 分钟 约 20 分钟 学生实践 约 20 分钟 约 20 分钟 学生实践 第 01 周—第 3/17 页 (3)页面属性设置 (4)预览网页 13、 学生实训及辅导; 14、 HTML 常用标记: (1)标题标记:<h#>主题文字</h#> (2)段落标记:<p>这里表示段落</p> (3)换行与注释:<br>、<!--这里放注释--> (4)粗体与斜体:<b>粗体</b>、<i>斜体</i> (5)删除线与下划线:<s>删除线</s>、<u>下划线</u> (6)上标与下标:<sup>上标</sup> <sub>下标</sub> 15、 学生实训及辅导; 16、 字体标记: (1)字体大小:<font size="1">字体大小</font> (2)字体颜色:<font color="">字体颜色</font> (3)设置标题字体:<h#>主题文字</h#> (4)物理字体: <B>…</B>,将字符设置成粗体。 <I>…</I>,将字符设置成斜体。 <U>…</U>,给字符增加下划线。 <S>…</S>,给字符增加删除线。 <TT>…</TT>,将字符设置成打字机字体。 <SUP>…</SUP>,将字符设置成上标字体。 <SUB>…</SUB>,将字符设置成下标字体。 (5)逻辑字体: <EM>…</EM>强调文字。 <STRONG>…</STRONG>字体加重。 <CODE>…</CODE>显示编程代码。 <SAMP>…</SAMP>显示示例文字。 <KBD>…</KBD>显示键盘按键文字。 <SMALL>…</SMALL>缩小文字。 <BIG>…</BIG>放大文字。 17、 字体标记实例讲解; 18、 学生实训及辅导; 四、 课外作业 第 3 章上机实践。 五、 课堂小结 本次课主要内容: 1、网页设计基础知识; 2、Dreamweaver 基本使用方法; 3、HTML 基础知识及常用标记; 约 30 分钟 约 20 分钟 学生实践 约 30 分钟 约 20 分钟 学生实践 约 20 分钟 约 40 分钟 学生实践 总结 后 记 第 01 周—第 4/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 文字布局 插入图像 超级链接 3) 4) 3) 4) 使学生熟练掌握 HTML 常用标记的基本使用方法; 使学生掌握 HTML 常用标记各种属性的含义和设置方法。 掌握各种 HTML 常用标记的基本使用方法; 熟记各种 HTML 常用标记的含义。 授课班级: 地点: 周课时: 5 课时 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 六、 引入 3、 回顾上周所学内容:上周主要介绍了网页设计和 HTML 相关基础知 识及 Dreamweaver 软件基础操作,重点介绍了 HTML 基础知识及 常用标记; 4、 提出问题: 网页中文字如何布局?如何在网页中插入图像?如何运 用超级链接? 七、 告知学生课堂任务 本次课所学习的主要内容是 HTML 文字布局和插入图像、超级链接 的标记应用。 时间 分配 备注 约 10 分钟 教 学 过 程 设 计 八、 逐步演示讲解分析教学内容 19、 换行控制:文字一<p>、文字二<br /> 20、 不换行控制:<nobr></nobr> 21、 文字对齐:align="#"、<center>居中</center> 22、 设置段落:<p>段落一</p>、<p>段落二</p> 23、 学生实训及辅导; 24、 上周课外作业点评; 25、 无序列表: <ul> <li>表项一</li> <li>表项…</li> </ul> 26、 有序列表: <ol> <li>表项一</li> <li>表项…</li> 约 30 分钟 学生理解 约 30 分钟 约 40 分钟 约 20 分钟 第 01 周—第 5/17 页 </ol> 27、 欲格式化文本:<pre>文字</pre>、<xmp>文本</xmp> 28、 计算机输出格式: <code>代码样式小型固定宽度字体显示的文本</code> <kbd>代码样式固定宽度字体渲染</kbd> <tt>代码样式固定宽度字体渲染文本</tt> <var>代码样式斜体字渲染</var> 29、 学生实训及辅导; 30、 在网页中插入图像:<img src="cn.jpg"> 31、 图像无法显示时的提示信息:<img src="cn.jpg" alt="风景"> 32、 控制图像的大小: <img src="cn.jpg" alt="风景" width="400px" height="300px"> 33、 设置边框: <img src="cn.jpg" alt="风景" border="0px"> 34、 图像的链接: <a href="http://www.baidu.com"><img src="cn.jpg"></a> 35、 学生实训及辅导; 36、 图像映射图:<map></map> 37、 文本与图像对齐:<img src="cn.jpg" align="middle"> 38、 学生实训及辅导; 39、 最简单的文字超链:<a href="">文字链接</a> 40、 超链网页的打开方式:_blank、_parent、_self、_top 41、 链接的注释: <a href="http://www.163.com" title="网易网站" >163 网站</a> 42、 设置图片链接:<a href=""><img src=""></a> 43、 设置锚点:<a name="锚点名">文章中的文字</a> 44、 邮箱地址链接: <a href="mailto:leiningcn@163.com">作者的邮箱</a> 45、 相对路径: 相对路径是指这个文件在所在的位置与其他文件或文件夹的关系; 46、 绝对路径: HTML 绝对路径(absolute path)指带域名的文件的完整路径。 47、 学生实训及辅导; 九、 课外作业 第 6 章上机实践。 十、 课堂小结 本次课主要内容: 1、HTML 文字布局; 2、HTML 插入图像; 3、HTML 超级链接。 约 20 分钟 约 30 分钟 学生实践 约 30 分钟 约 20 分钟 约 30 分钟 约 30 分钟 学生实践 学生实践 约 30 分钟 学生实践 总结 后 记 第 01 周—第 6/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 表单的使用 插入表格 5) 6) 5) 6) 使学生熟练掌握 HTML 常用标记的基本使用方法; 使学生掌握 HTML 常用标记各种属性的含义和设置方法。 掌握各种 HTML 常用标记的基本使用方法; 熟记各种 HTML 常用标记的含义。 授课班级: 地点: 周课时: 5 课时 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十一、 引入 5、 回顾上周所学内容:上周主要介绍了 HTML 文字布局和插入图像的 基本方法,重点介绍了超级链接的标记应用; 6、 提出问题: 什么是表单?常见的表单有哪些?如何在网页中使用表 格? 十二、 告知学生课堂任务 本次课所学习的主要内容是 HTML 表单和表格的标记应用。 十三、 逐步演示讲解分析教学内容 48、 表单基本语法:<form></form>、属性 action 和 method 49、 文本框:<input type="text"> 50、 密码框:<input type="password"> 51、 单选框:<input type="radio"> 52、 复选框:<input type="checkbox" > 53、 按钮设置:<input type="submit" value="按钮提交"> 54、 学生实训及辅导; 55、 上周课外作业点评; 56、 下拉表: <select> <!—设置下拉表选项--> <option>选项一</option> <option>选项二</option> <option selected>选项三</option> </select>绝对路径 57、 文本域:<textarea><!—文本域内容--></textarea> 58、 表单应用实例讲解; 时间 分配 备注 约 10 分钟 教 学 过 程 设 计 约 30 分钟 学生理解 约 40 分钟 约 30 分钟 约 20 分钟 学生实践 约 20 分钟 第 01 周—第 7/17 页 59、 学生实训及辅导; 60、 表格基本语法: <table></table> <tr>标签对表示表行 <th>标签对表示表头 <td>标签对表示表元 61、 跨多行表元:Rowspan 62、 跨多列表元:colspan 63、 表格内设置文字对齐: 对齐语法用 align 表示,后面接的值是 left、center 和 right, 分别代表向左、居中和向右对齐复选框 64、 表格在网页中对齐:<table align=#></table>; 65、 学生实训及辅导; 66、 表格应用实例讲解; 67、 学生实训及辅导; 十四、 课外作业 第 8 章上机实践。 十五、 课堂小结 本次课主要内容: 1、表单的使用; 2、插入表格; 3、表格应用实例; 约 40 分钟 约 30 分钟 学生实践 约 40 分钟 约 20 分钟 约 40 分钟 学生实践 学生实践 总结 后 记 第 01 周—第 8/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: 网页框架 对象移动属性 多媒体对象应用 7) 8) 7) 8) 使学生熟练掌握 HTML 常用标记的基本使用方法; 使学生掌握 HTML 常用标记各种属性的含义和设置方法。 掌握各种 HTML 常用标记的基本使用方法; 熟记各种 HTML 常用标记的含义。 地点: 周课时: 5 课时 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十六、 引入 7、 回顾上周所学内容:上周主要介绍了 HTML 表单和表格的标记应用 方法,重点介绍了表单的应用实例; 8、 提出问题: 框架网页如何创建?如何使网页中的对象移动?如何在 网页中插入 Flash、影片、声音? 十七、 告知学生课堂任务 本次课所学习的主要内容是 HTML 网页框架和对象移动属性、多媒 体对象的标记应用。 时间 分配 备注 约 10 分钟 教 学 过 程 设 计 十八、 逐步演示讲解分析教学内容 68、 框架的基本语法: <frameset></frameset> <frame></frame> <frameset cols="25%,50%,25%"> <frame src="http://www.hao123.com/"> <frame src="http://www.sina.com.cn/"> <frame src="http://www.163.com/"> </frameset> 69、 框架垂直分栏: 垂直分栏是在<frameset>中用 cols 表示跨多列表元,colspan 70、 框架水平分栏: 水平分栏的语法用 rows 表示 71、 设置不可调节框架大小:noresize 72、 学生实训及辅导; 73、 上周课外作业点评; 74、 浏览器不支持框架:<noframes></noframes> 约 20 分钟 学生理解 约 30 分钟 约 30 分钟 约 10 分钟 学生实践 第 01 周—第 9/17 页 75、 设置框架边框:<frameset frameborder=#> 76、 设置滚动条: 设置滚动条在是<frame>里面,用 scrolling 属性 77、 导航框架: 导 航框 架是在 网页框 架的 <frame> 中加入 name 属 性, 表示该 <frame>的名称,然后通过用<a>标记的链接,并用 target 的属性 值等于<frame>的名称; 78、 内联框架: 内联框架存在<body></body>的单个 HTML 文件中, 可以链接其他网 页并显示它, 即在一个页面中嵌入一个框架窗口来显示另一个页面 的内容,叫做浮动框架也称内联框架; 79、 学生实训及辅导; 80、 框架应用实例讲解; 81、 学生实训及辅导; 82、 移动属性基本语法:<marquee>要移动的对象</marquee> 83、 文字的移动设置:<marquee direction=#>文字</marquee> 84、 图片移动的设置:<marquee><img src="仙境.gif"></marquee> 85、 文本移动的方向:<marquee direction=up>向上移动</marquee> 86、 文本的滚动循环; 87、 文本的移动速度:scrollamount 设置移动的速度 88、 学生实训及辅导; 89、 网页多媒体的基本语法:<embed src=url loop="true|false"> 90、 隐藏面板的设置; 91、 对齐方式: align=top、bottom、center、baseline、 left、right、texttop、 middle、 absmiddle、absbottom 92、 学生实训及辅导; 93、 移动对象应用实例讲解; 94、 多媒体对象应用实例讲解; 95、 学生实训及辅导; 十九、 课外作业 第 11 章上机实践。 二十、 课堂小结 本次课主要内容: 1、网页框架; 2、对象移动属性; 3、多媒体对象应用。 约 20 分钟 约 20 分钟 约 40 分钟 约 20 分钟 学生实践 学生实践 约 20 分钟 约 10 分钟 学生实践 约 20 分钟 约 30 分钟 约 40 分钟 学生实践 学生实践 总结 后 记 第 01 周—第 10/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: CSS 基础知识 CSS 字体设置 9) 使学生熟练掌握 CSS 常用样式的创建方法; 10) 使学生掌握 CSS 常用样式各种属性的含义和设置方法。 9) 掌握各种 CSS 常用样式的基本使用方法; 10) 熟记各种 CSS 常用样式的含义。 课堂讲授、案例讲解与指导 计算机机房 地点: 周课时: 5 课时 教学过程及内容提要 二十一、 引入 时间 分配 备注 9、 回顾上周所学内容:上周主要介绍了 HTML 网页框架和多媒体对象标记, 约 10 分钟 重点介绍了 HTML 对象移动属性设置方法; 10、 提出问题:什么是 CSS?CSS 有什么用?如何创建和使用 CSS? 二十二、 告知学生课堂任务 本次课所学习的主要内容是 CSS 基础知识和 CSS 字体样式设置方法和 技巧。 二十三、 逐步演示讲解分析教学内容 96、 CSS 相关基础知识; 97、 CSS 文件链接方式: (1)内联定义:内联定义即是在对象的标记内,使用对象的 style 属性 定义适用其的样式表属性。 链入内部 CSS: <style type="text/css">/*这里写 CSS 内容*/</style> (2)链接外部 CSS: <link type="text/css" rel="stylesheet" src="style.css"> 98、 CSS 在浏览器兼容性: 现在浏览器市场的主流浏览器主要是 Internet Explorer(简称 IE)和 Mozilla Firefox(简称 FF) ,网页中的 CSS 因两个浏览器支持不同,所 以对同一代码会显示不同的效果,那么为了达到网页的风格,有时要注 意哪个浏览器要写的 CSS 属性支持如何。如果某一属性只有一个浏览器 支持,那么另一浏览器对这属性代码就不起作用。 99、 CSS 选择符: CSS 选择符就是 CSS 样式的名字,选择符的命名规则可以使用英文字母 的大写与小写、数字、连字号、下划线、冒号、句号,CSS 选择符只能 以字母开头, 选择符在 CSS 中可分成多种, 在本小节中只介绍常用的 CSS 教 学 过 程 设 计 约 40 分钟 学生理解 第 01 周—第 11/17 页 选择符: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-family 105、 字体大小:Font-size,后面可接的参数值有: xx-small|x-small|small|medium|large|x-large|xx-large|larger|sm aller|length 106、 字体重量: Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600 |700|800|900 107、 行距:line-height:#; 108、 字体类型:Font-family:fontname; 109、 行距:line-height:#; 110、 间距与间隔: word-spacing:normal|长度单位、letter-spacing:normal|length 111、 字体应用实例讲解; 112、 学生实训及辅导; 二十四、 课外作业 第 16 章上机实践。 二十五、 课堂小结 本次课主要内容: 1、CSS 基础知识; 2、CSS 文件链接方式; 3、CSS 字体设置。 约 40 分钟 约 60 分钟 约 50 分钟 学生实践 约 40 分钟 约 80 分钟 学生实践 总结 后 记 第 01 周—第 12/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: CSS 文本设置 CSS 背景设置 对象尺寸设置 11) 使学生熟练掌握 CSS 常用样式的创建方法; 12) 使学生掌握 CSS 常用样式各种属性的含义和设置方法。 11) 掌握各种 CSS 常用样式的基本使用方法; 12) 熟记各种 CSS 常用样式的含义。 课堂讲授、案例讲解与指导 计算机机房 地点: 周课时: 5 课时 教学过程及内容提要 二十六、 引入 时间 分配 备注 11、 回顾上周所学内容:上周主要介绍了 CSS 基础知识和 CSS 文 件链接方式,重点介绍了 CSS 字体样式设置方法; 12、 提出问题:如何用 CSS 进行文本和背景设置?如何控制网页 中的对象尺寸? 二十七、 告知学生课堂任务 本次课所学习的主要内容是 CSS 文本设置和背景设置、对象尺寸 设置的方法和技巧。 约 10 分钟 教 学 过 程 设 计 二十八、 逐步演示讲解分析教学内容 113、 字母大小写转换: text-transform:capitalize | uppercase | lowercase | none capitalize:使每个词的首字母大写 uppercase:使每个字的所有字母大写 lowercase:使每个字的所有字母小写 none:字母以正常形式显示 114、 文字修饰: text-decoration: underline | overline | line-throungh | blink | none underline:给文字加下划线 overline:给文字加上划线 line-through:给文字加删除线 blink:文字在闪烁 none:缺省使用无 115、 文本空格处理方式:white-space : normal | pre | nowrap 116、 文本水平和垂直对齐: 约 30 分钟 学生理解 约 30 分钟 第 01 周—第 13/17 页 (1)垂直对齐: baseline:使元素和上级元素的基线对齐 sub:使对象以下标的形式显示 Super:使对象以上标的形式显示 top:使元素和行中最高的元素向上对齐 text-top:使元素和上级元素的字体向上对齐 middle:纵向对齐元素基线加上上级元素的 x-高度——字母”x” 的高度的——的一半的中点 bottom:使元素和行中最高的元素向下对齐 text-bottom:使元素和上级元素的字体向下对齐 (2)水平对齐: left:浏览器默认的对齐方式,左对齐 Right:右对齐 center:居中 justify:左右对齐 117、 文本缩进:text-indent:<长度> | <百分比> 118、 学生实训及辅导; 119、 上周课外作业点评; 120、 设置背景颜色:background-color : transparent | color 121、 设置图像的滚动:background-attachment : scroll | fixed 122、 设 置 背 景 图 像 的 位 置 : background-position : length | length background-position : position | position 123、 铺排背景图像:background-repeat : repeat | no-repeat | repeat-x | repeat-y 124、 学生实训及辅导; 125、 设置对象宽度:width : auto | length 126、 设置对象高度:height : auto | length 127、 宽度和高度实例: (1)在网页中布局多个层,并在每个层中写上文字; (2)设置层的宽度,使每个层按 50 像素增加; (3)给每个层添加一个 ID,然后在 CSS 中对 ID 名称进行控制; (4)设置层居中。 128、 学生实训及辅导; 二十九、 课外作业 第 19 章上机实践。 三十、 课堂小结 本次课主要内容: 1、CSS 文本设置; 2、CSS 背景设置; 3、对象尺寸设置。 约 60 分钟 约 40 分钟 约 30 分钟 学生实践 约 40 分钟 学生实践 约 30 分钟 约 50 分钟 学生实践 总结 后 记 第 01 周—第 14/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: 设置外补丁和内补丁 对象边框和定位设置 13) 使学生熟练掌握 CSS 常用样式的创建方法; 14) 使学生掌握 CSS 常用样式各种属性的含义和设置方法。 13) 掌握各种 CSS 常用样式的基本使用方法; 14) 熟记各种 CSS 常用样式的含义。 课堂讲授、案例讲解与指导 计算机机房 地点: 周课时: 5 课时 教学过程及内容提要 三十一、 引入 时间 分配 备注 13、 回顾上周所学内容:上周主要介绍了 CSS 文本设置和背景设 置,重点介绍了对象尺寸设置的方法和技巧; 14、 提出问题:什么是外补丁和内补丁?外补丁和内补丁如何创 建?如何给网页中的对象进行定位? 三十二、 告知学生课堂任务 本次课所学习的主要内容是 CSS 外补丁和内补丁、对象边框和定 位设置的方法和技巧。 约 10 分钟 教 学 过 程 设 计 三十三、 逐步演示讲解分析教学内容 129、 外补丁:表示具体的精确宽度。 margin : auto | length 130、 外补丁的外延设置: 顶端外补丁用法:margin-top:auto|length 右端外补丁用法:margin-right:auto|length 底端外补丁用法:margin-bottom:auto|length 左端外补丁用法:margin-left:auto|length 131、 外补丁实例; 132、 上周课外作业点评; 133、 学生实训及辅导; 134、 层与层的距离效果; 135、 对层布局; 136、 设置层的尺寸; 137、 设置层漂移; 138、 设置层与层之间的间隔; : : 139、 学生实训及辅导; 约 20 分钟 学生理解 约 10 分钟 约 30 分钟 约 30 分钟 约 30 分钟 学生实践 约 30 分钟 学生实践 第 01 周—第 15/17 页 140、 内补丁:表示对象中的内部填充距离。 padding : length 141、 顶端内补丁用法:padding-top:length; 142、 右端内补丁用法:padding-right : length 143、 底端内补丁用法:padding-bottom : length 144、 左端内补丁用法:padding-left : length 145、 内补丁综合实例; 146、 学生实训及辅导; 147、 边框的基本语法: border : border-width | border-style | border-color 148、 边框颜色:border-color : color 149、 边框样式表示: border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset 参数 none:表示无边框,默认值。 参数 dotted:表示点线,由一点点组成的边框。 参数 dashed:表示虚线,边框由虚线表示。 参数 solid:表示实线,边框由实线表示,常用的参数。 参数 double:双线边框。 参数 groove:立体形式的凹槽。 参数 ridge:立体形式的凸槽。 参数 insert:立体形式的凹边。 参数 outset:立体形式的凸边。 150、 边框宽度表示: border-width : medium | thin | thick | length 参数 medium:默认值,表示默认宽度。 参数 thin:表示小于默认宽度。 参数 thick:表示大于默认宽度。 参数 length:直接表示边框宽度的值。 151、 学生实训及辅导; 152、 定位的基本语法:position : static | absolute | relative 153、 对象层叠顺序:z-index : auto | number 154、 相对定位实例; 155、 学生实训及辅导; 三十四、 课外作业 第 22 章上机实践。 约 30 分钟 约 15 分钟 约 30 分钟 约 10 分钟 学生实践 约 40 分钟 学生实践 约 15 分钟 约 30 分钟 学生实践 总结 三十五、 课堂小结 本次课主要内容: 1、CSS 设置外补丁和内补丁; 2、CSS 对象边框设置; 3、CSS 定位设置。 后 记 第 01 周—第 16/17 页 《HTML+CSS 网页设计与布局》课程教案 授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级: CSS 使用列表的方法 CSS 表格控制方法 15) 使学生熟练掌握 CSS 常用样式的创建方法; 16) 使学生掌握 CSS 常用样式各种属性的含义和设置方法。 15) 掌握各种 CSS 常用样式的基本使用方法; 16) 熟记各种 CSS 常用样式的含义。 课堂讲授、案例讲解与指导 计算机机房 地点: 周课时: 5 课时 教学过程及内容提要 三十六、 引入 时间 分配 备注 15、 回顾上周所学内容:上周主要介绍了 CSS 外补丁和内补丁, 重点介绍了对象边框和定位设置的方法和技巧; 16、 提出问题: 如何使用 CSS 创建 CSS 列表?如何使用 CSS 控制表 格? 三十七、 告知学生课堂任务 本次课所学习的主要内容是 CSS 列表和表格设置的方法和技巧。 三十八、 逐步演示讲解分析教学内容 156、 列表的基本语法: list-style : list-style-image || list-style-position || list-style-type 参数 list-style-image:用来设置列表的图像。 参数 list-style-position:用来设置列表项标记如何根据文本排 列。 参数 list-style-type:用来设置列表项所使用的预设标记。 157、 设置列表中的图像: list-style-image : none | url (url) 参数 none:表示属性不设置列表图像,是默认值。 参数 url:使用绝对或相对地址指定背景图像,这样就可以显示自 定义的图像了,要注意图像大小,如太大会影响列表的美观(图像 是按图像原始大小显示的) 。图像链接地址要用括号括起来,然后 用引号引起(也可以不用引号) ,注意括号前面有关键字 url。 158、 学生实训及辅导; 159、 上周课外作业点评; 160、 列表中的文本排列: 约 10 分钟 约 30 分钟 学生理解 教 学 过 程 设 计 约 40 分钟 约 30 分钟 约 30 分钟 学生实践 第 01 周—第 17/17 页 list-style-position : outside | inside 参数 outside:默认值。列表项目标记放置在文本以外,且环绕文 本不根据标记对齐。 参数 inside:列表项目标记放置在文本以内,且环绕文本根据标 记对齐。 161、 列表的预设标记: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 参数 disc:默认值。表示实心圆。 参数 circle:表示空心圆。 参数 square:表示实心方块。 参数 decimal:表示阿拉伯数字。 参数 lower-roman:表示小写罗马数字。 参数 upper-roman:表示大写罗马数字。 参数 lower-alpha:表示小写英文字母。 参数 upper-alpha:表示大写英文字母。 参数 none:表示不使用项目符号。 162、 学生实训及辅导; 163、 控制表格的基本语法: border-collapse : separate | collapse 属性 border-collapse 的第一个值 separate,是本属性的默认值, 表示边框独立。而后面的值为 collapse,表示相邻边被合并,前 者表示有边框,后者表示合并了边框,很容易区分其功能。 164、 设置表格边框独立或合并:本属性应用在表格是否显示边框, 如果要显示其边框,就设置 separate;否则,设置 collapse border-collapse : separate | collapse 165、 学生实训及辅导; 166、 设置表格布局的算法: 要设置好表格的布局算法,得用到布局算法的属性,表格布局算法 用 table-layout 表示,其后接 auto 值,表示默认,或者可以接 fixed,完整语法如下表示: table-layout : auto | fixed 167、 用 CSS 控制表格实例; 168、 学生实训及辅导; 三十九、 课外作业 第 25 章上机实践。 四十、 课堂小结 本次课主要内容: 1、CSS 使用列表的方法; 2、CSS 表格控制方法; 3、设置表格布局的算法。 约 40 分钟 约 30 分钟 学生实践 约 30 分钟 约 40 分钟 学生实践 约 40 分钟 学生实践 总结 后 记