2023年6月20日发(作者：)HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 网页设计基础知识 Dreamweaver软件介绍及其基础操作 HTML基础知识及常用标记 1) 使学生了解网页设计的相关基础知识； 2) 使学生熟悉Dreamweaver软件界面的基本操作方法; 1) 了解网页设计相关概念和网页的类型； 2) 熟练掌握Dreamweaver软件创建和管理站点的方法; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 一、 引入 1、 相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用； 2、 提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS这两个概念吗 3、 4、 二、 告知学生课堂任务 本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作； 三、 逐步演示讲解分析教学内容 1、 网站和网页的区别： 2、 1网页是Internet基本元素； 3、 2网站由网页组成； 4、 静态网页和动态网页： 5、 静态网页：纯粹HTML语言格式的网页通常被称为静态网页,静态网页的后缀名通常为.htm、.html、.shtml、.xml; 6、 动态网页：许多人认为网页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了;真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;也就是说,它是返回到了客户端上的网页;例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了; 时间 分配 约15分钟 约35分钟 约20分钟 约30分钟 约20分钟 约20分钟 约20分钟 约30分钟 约20分钟 约30分钟 约20分钟 约20分钟 约40分钟 备注 学生理解 学生熟记 学生实践 学生实践 学生实践 学生实践 学生实践 总结 教学过程设计 7、 静态网页的特点： 8、 1内容相对稳定,容易被搜索引擎检索到； 9、 2没有数据库支持,在网站制作和维护方面工作量大； 10、 3交互性差,在功能方面有很大的限制; 11、 动态网页的特点： 12、 1以数据库技术为基础,可大大降低网站维护的工作量； 13、 2可实现更多的功能,如用户注册、新闻发布、在线留言等； 14、 3不利于使用搜索引擎进行网站推广; 15、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等； 16、 网页设计原则： 17、 1了解客户需求 18、 2遵循Web标准 19、 3运用形式美法则 20、 网页设计流程： 21、 1手绘效果图：确定网页主题内容和风格 22、 2设计效果图：搜集、整合设计所需素材 23、 3版面编辑：网页的制作与实现 24、 4网页美化：动画设计,网页测试和发布 25、 网页设计的主要软件： 26、 1Photoshop 27、 2Dweamveawer 28、 3Flash 29、 4Firworks 30、 HTML基础知识： 31、 1HTML概念：Hyper Text Markup Language 超文本标识语言； 32、 2HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成； 33、 3网页文件命名：首页文件名默认为： 或 ； 34、 4HTML 文件结构： 35、 36、 37、 38、 39、 40、 HTML 文件的正文 41、 42、 43、 5用编辑器手工编写第一张网页； 44、 学生实训及辅导； 45、 Dreamweaver软件界面介绍： 46、 1软件面板组成及基本操作方法 47、 2软件首选参数设置 48、 Dreamweaver站点创建： 49、 站点->新建站点->设置站点名称->设置站点默认图像文件夹; 50、 学生实训操作：Dreamweaver站点创建与设置； 51、 Dreamweaver创建第一个网页： 52、 1 名称： 53、 2 设置标题、输入文本、输入特殊字符 54、 3页面属性设置 55、 4预览网页 56、 学生实训及辅导； 57、 HTML常用标记： 58、 1标题标记：主题文字 59、 2段落标记：这里表示段落 60、 3换行与注释：、<--这里放注释--> 61、 4粗体与斜体：粗体、斜体 62、 5删除线与下划线：删除线、下划线 63、 6上标与下标：上标 下标 64、 学生实训及辅导； 65、 字体标记： 66、 1字体大小：字体大小 67、 2字体颜色：字体颜色 68、 3设置标题字体：主题文字 69、 4物理字体： 70、 …,将字符设置成粗体; 71、 …,将字符设置成斜体; 72、 …,给字符增加下划线; 73、 …,给字符增加删除线; 74、 …,将字符设置成打字机字体; 75、 …,将字符设置成上标字体; 76、 …,将字符设置成下标字体; 77、 5逻辑字体： 78、 …强调文字; 79、 …字体加重; 80、 …显示编程代码; 81、 …显示示例文字; 82、 …显示键盘按键文字; 83、 …缩小文字; 84、 …放大文字; 85、 字体标记实例讲解； 86、 学生实训及辅导； 四、 课外作业 五、 第3章上机实践; 六、 课堂小结 本次课主要内容： 1、网页设计基础知识； 2、Dreamweaver基本使用方法； 3、HTML基础知识及常用标记； 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 文字布局 插入图像 超级链接 3) 使学生熟练掌握HTML常用标记的基本使用方法； 4) 使学生掌握HTML常用标记各种属性的含义和设置方法; 3) 掌握各种HTML常用标记的基本使用方法； 4) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 七、 引入 5、 回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记； 6、 提出问题：网页中文字如何布局如何在网页中插入图像如何运用超级链接 7、 8、 八、 告知学生课堂任务 本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用; 九、 逐步演示讲解分析教学内容 87、 换行控制：文字一、文字二 88、 不换行控制： 89、 文字对齐：align=""、居中 90、 设置段落：段落一、段落二 91、 学生实训及辅导； 92、 上周课外作业点评； 93、 无序列表： 94、 95、 表项一 96、 表项… 97、 有序列表： 98、 99、 表项一 100、 101、 102、 表项… 欲格式化文本：文字、文本 计算机输出格式： 时间 分配 约10分钟 约30分钟 约30分钟 约40分钟 约20分钟 约20分钟 约30分钟 约30分钟 约20分钟 约30分钟 约30分钟 约30分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 总结 教学过程设计 103、 104、 105、 106、 107、 108、 109、 110、 111、 112、 113、 114、 115、 116、 117、 118、 119、 120、 121、 122、 123、 124、 125、 126、 127、 128、 代码样式小型固定宽度字体显示的文本 代码样式固定宽度字体渲染 代码样式固定宽度字体渲染文本 代码样式斜体字渲染 学生实训及辅导； 在网页中插入图像： 图像无法显示时的提示信息： 控制图像的大小： 设置边框： 图像的链接： 学生实训及辅导； 图像映射图： 文本与图像对齐： 学生实训及辅导； 最简单的文字超链：文字链接 超链网页的打开方式：_blank、_parent、_self、_top 链接的注释： 设置图片链接： 设置锚点：文章中的文字 邮箱地址链接： 相对路径：相对路径是指这个文件在所在的位置与其他文件或文绝对路径： HTML绝对路径absolute path指带域名的文件的完整路径; 学生实训及辅导； 件夹的关系； 十、 课外作业 十一、 第6章上机实践; 十二、 课堂小结 本次课主要内容： 1、HTML文字布局； 2、HTML插入图像； 3、HTML超级链接; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 表单的使用 插入表格 5) 使学生熟练掌握HTML常用标记的基本使用方法； 6) 使学生掌握HTML常用标记各种属性的含义和设置方法; 5) 掌握各种HTML常用标记的基本使用方法； 6) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十三、 引入 9、 回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用； 10、 11、 12、 时间 分配 约10分钟 约30分钟 约40分钟 约20分钟 约20分钟 约40分钟 约30分钟 约40分钟 约20分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 总结 提出问题：什么是表单常见的表单有哪些如何在网页中使用表格 约30分钟 学生实践 十四、 告知学生课堂任务 本次课所学习的主要内容是HTML表单和表格的标记应用; 十五、 逐步演示讲解分析教学内容 129、 表单基本语法：、属性action和method 教学过程设计 130、 131、 132、 133、 134、 135、 136、 137、 138、 139、 140、 141、 142、 143、 144、 145、 146、 文本框： 密码框： 单选框： 复选框： 按钮设置： 学生实训及辅导； 上周课外作业点评； 下拉表： <—设置下拉表选项--> 选项一 选项二 选项三 绝对路径 文本域：<—文本域内容--> 表单应用实例讲解； 学生实训及辅导； 147、 148、 149、 150、 151、 152、 153、 154、 155、 156、 157、 158、 159、 表格基本语法： 标签对表示表行 标签对表示表头 标签对表示表元 跨多行表元：Rowspan 跨多列表元：colspan 表格内设置文字对齐： 对齐语法用align表示,后面接的值是left、center和right,分表格在网页中对齐：； 学生实训及辅导； 表格应用实例讲解； 学生实训及辅导； 别代表向左、居中和向右对齐复选框 十六、 课外作业 十七、 第8章上机实践; 十八、 课堂小结 本次课主要内容： 1、表单的使用； 2、插入表格； 3、表格应用实例； 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 网页框架 对象移动属性 多媒体对象应用 7) 使学生熟练掌握HTML常用标记的基本使用方法； 8) 使学生掌握HTML常用标记各种属性的含义和设置方法; 7) 掌握各种HTML常用标记的基本使用方法； 8) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十九、 引入 13、 14、 15、 16、 回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用提出问题：框架网页如何创建如何使网页中的对象移动如何在网 方法,重点介绍了表单的应用实例； 页中插入Flash、影片、声音 时间 分配 约10分钟 约20分钟 约30分钟 约30分钟 约10分钟 约20分钟 约20分钟 约40分钟 约20分钟 约20分钟 约10分钟 约20分钟 约30分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 学生实践 学生实践 总结 二十、 告知学生课堂任务 本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用; 二十一、 逐步演示讲解分析教学内容 160、 框架的基本语法： 161、 162、 163、 164、 165、 166、 167、 168、 169、 170、 171、 172、 173、 174、 175、 框架垂直分栏： 垂直分栏是在中用cols表示跨多列表元,colspan 框架水平分栏： 水平分栏的语法用rows表示 设置不可调节框架大小：noresize 学生实训及辅导； 上周课外作业点评； 浏览器不支持框架： 教学过程设计 176、 177、 178、 179、 180、 设置框架边框： 设置滚动条： 设置滚动条在是里面,用scrolling属性 导航框架： 导航框架是在网页框架的中加入name属性,表示该的名称,然后通过用标记的链接,并用target的属性值等于的名称； 181、 182、 内联框架： 内联框架存在的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架； 183、 184、 185、 186、 187、 188、 189、 190、 191、 192、 193、 194、 195、 196、 197、 198、 199、 200、 学生实训及辅导； 框架应用实例讲解； 学生实训及辅导； 移动属性基本语法：要移动的对象 文字的移动设置：文字 图片移动的设置： 文本移动的方向：向上移动 文本的滚动循环； 文本的移动速度：scrollamount设置移动的速度 学生实训及辅导； 网页多媒体的基本语法： 隐藏面板的设置； 对齐方式： align=top、bottom、center、baseline、 left、right、texttop、学生实训及辅导； 移动对象应用实例讲解； 多媒体对象应用实例讲解； 学生实训及辅导； middle、 absmiddle、absbottom 二十二、 课外作业 二十三、 第11章上机实践; 二十四、 课堂小结 本次课主要内容： 1、网页框架； 2、对象移动属性； 3、多媒体对象应用; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS基础知识 CSS字体设置 9) 使学生熟练掌握CSS常用样式的创建方法； 10) 使学生掌握CSS常用样式各种属性的含义和设置方法; 9) 掌握各种CSS常用样式的基本使用方法； 10) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 二十五、 引入 17、 18、 19、 20、 回顾上周所学内容：上周主要介绍了HTML网页框架和多媒体对象标记,提出问题：什么是CSSCSS有什么用如何创建和使用CSS 重点介绍了HTML对象移动属性设置方法； 时间 分配 约10分钟 约40分钟 约40分钟 约60分钟 约50分钟 约40分钟 备注 学生理解 学生实践 学生实践 总结 约80分钟 二十六、 告知学生课堂任务 本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧; 二十七、 逐步演示讲解分析教学内容 201、 CSS相关基础知识； 教学过程设计 202、 203、 204、 205、 206、 207、 CSS文件链接方式： 1内联定义：内联定义即是在对象的标记内,使用对象的style属性定链入内部CSS： 2链接外部CSS： CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是Internet 义适用其的样式表属性; Explorer简称IE和 Mozilla Firefox简称FF,网页中的CSS因两个浏览器支持不同,所以对同一代码会显示不同的效果,那么为了达到网页的风格,有时要注意哪个浏览器要写的CSS属性支持如何;如果某一属性只有一个浏览器支持,那么另一浏览器对这属性代码就不起作用; 208、 CSS选择符：CSS选择符就是CSS样式的名字,选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头,选择符在CSS中可分成多种,在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS类选择符选择符; 209、 CSS伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符,HTML元素可以占有这些预定义性质;实际上这些性质与class属性的功能是相同的,因此在CSS术语中,它们被称作伪类;在对应这些伪类的标记中,不存在真正的class属性,相反,它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态; 210、 211、 212、 213、 214、 215、 216、 217、 218、 219、 220、 221、 CSS常用单位： em：em,元素的字体的高度; ex：x-height,字母 "x" 的高度; px：像素,相对于屏幕的分辨率; 绝对长度单位： in：英寸,1英寸=厘米; cm：厘米,1厘米=10毫米; mm：毫米,1米=1000毫米;pt：点,1点=1/72英寸;pc：帕,1帕=12点; 上周课外作业点评； 学生实训及辅导； 字体和字体颜色：font : font-style || font-variant || font-weight 字体大小：Font-size,后面可接的参数值有：|| font-size || line-height || font-family xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length 222、 字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 223、 224、 225、 226、 227、 228、 229、 行距：line-height:； 字体类型：Font-family:fontname； 行距：line-height:； 间距与间隔： word-spacing：normal|长度单位、letter-spacing:normal|length 字体应用实例讲解； 学生实训及辅导； 二十八、 课外作业 二十九、 第16章上机实践; 三十、 课堂小结 本次课主要内容： 1、CSS基础知识； 2、CSS文件链接方式； 3、CSS字体设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS文本设置 CSS背景设置 对象尺寸设置 11) 使学生熟练掌握CSS常用样式的创建方法； 12) 使学生掌握CSS常用样式各种属性的含义和设置方法; 11) 掌握各种CSS常用样式的基本使用方法； 12) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 三十一、 引入 21、 22、 23、 24、 回顾上周所学内容：上周主要介绍了CSS基础知识和CSS文件链提出问题：如何用CSS进行文本和背景设置如何控制网页中的对 接方式,重点介绍了CSS字体样式设置方法； 象尺寸 时间 分配 约10分钟 约30分钟 约30分钟 约60分钟 约40分钟 约30分钟 约40分钟 约30分钟 约50分钟 备注 学生理解 学生实践 学生实践 学生实践 总结 三十二、 告知学生课堂任务 本次课所学习的主要内容是CSS文本设置和背景设置、对象尺寸设置的方法和技巧; 三十三、 逐步演示讲解分析教学内容 230、 字母大小写转换： 231、 232、 233、 234、 235、 236、 237、 238、 239、 240、 241、 242、 243、 244、 text-transform：capitalize | uppercase | lowercase | none capitalize：使每个词的首字母大写 uppercase：使每个字的所有字母大写 lowercase：使每个字的所有字母小写 none：字母以正常形式显示 文字修饰： text-decoration：underline | overline | line-throungh | underline：给文字加下划线 overline：给文字加上划线 line-through：给文字加删除线 blink：文字在闪烁 none：缺省使用无 文本空格处理方式：white-space : normal | pre | nowrap 文本水平和垂直对齐： 教学过程设计 blink | none 245、 246、 247、 248、 249、 250、 251、 252、 253、 254、 255、 256、 257、 258、 259、 260、 261、 262、 263、 264、 265、 266、 267、 268、 269、 270、 271、 272、 273、 274、 275、 1垂直对齐： baseline：使元素和上级元素的基线对齐 sub：使对象以下标的形式显示 Super：使对象以上标的形式显示 top：使元素和行中最高的元素向上对齐 text-top：使元素和上级元素的字体向上对齐 middle：纵向对齐元素基线加上上级元素的x-高度——字bottom：使元素和行中最高的元素向下对齐 text-bottom：使元素和上级元素的字体向下对齐 2水平对齐： left：浏览器默认的对齐方式,左对齐 Right：右对齐 center：居中 justify：左右对齐 文本缩进：text-indent：<长度> | <百分比> 学生实训及辅导； 上周课外作业点评； 设置背景颜色：background-color : transparent | color 设置图像的滚动：background-attachment : scroll | fixed 设置背景图像的位置：background-position : length | length background-position : position | position 铺排背景图像：background-repeat : repeat | no-repeat | 学生实训及辅导； 设置对象宽度：width : auto | length 设置对象高度：height : auto | length 宽度和高度实例： 1在网页中布局多个层,并在每个层中写上文字； 2设置层的宽度,使每个层按50像素增加； 3给每个层添加一个ID,然后在CSS中对ID名称进行控制； 4设置层居中; 学生实训及辅导； 母”x”的高度的——的一半的中点 repeat-x | repeat-y 三十四、 课外作业 三十五、 第19章上机实践; 三十六、 课堂小结 本次课主要内容： 1、CSS文本设置； 2、CSS背景设置； 3、对象尺寸设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 设置外补丁和内补丁 对象边框和定位设置 13) 使学生熟练掌握CSS常用样式的创建方法； 14) 使学生掌握CSS常用样式各种属性的含义和设置方法; 13) 掌握各种CSS常用样式的基本使用方法； 14) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 三十七、 引入 25、 26、 27、 28、 回顾上周所学内容：上周主要介绍了CSS文本设置和背景设置,提出问题：什么是外补丁和内补丁外补丁和内补丁如何创建如何 重点介绍了对象尺寸设置的方法和技巧； 给网页中的对象进行定位 时间 分配 约10分钟 约20分钟 约10分钟 约30分钟 约30分钟 约30分钟 约30分钟 约30分钟 约15分钟 约30分钟 约10分钟 约40分钟 约15分钟 约30分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 学生实践 总结 三十八、 告知学生课堂任务 本次课所学习的主要内容是CSS外补丁和内补丁、对象边框和定位设置的方法和技巧; 三十九、 逐步演示讲解分析教学内容 276、 外补丁：表示具体的精确宽度; 277、 278、 279、 280、 281、 282、 283、 284、 285、 286、 287、 288、 289、 290、 291、 margin : auto | length 外补丁的外延设置： 顶端外补丁用法：margin-top:auto|length 右端外补丁用法：margin-right:auto|length 底端外补丁用法：margin-bottom:auto|length 左端外补丁用法：margin-left:auto|length 外补丁实例； 上周课外作业点评； 学生实训及辅导； 层与层的距离效果； 对层布局； 设置层的尺寸； 设置层漂移； 设置层与层之间的间隔；：： 学生实训及辅导； 教学过程设计 292、 293、 294、 295、 296、 297、 298、 299、 300、 301、 302、 303、 304、 305、 306、 307、 308、 309、 310、 311、 312、 313、 314、 315、 316、 317、 318、 319、 320、 321、 322、 323、 内补丁：表示对象中的内部填充距离; padding : length 顶端内补丁用法：padding-top:length; 右端内补丁用法：padding-right : length 底端内补丁用法：padding-bottom : length 左端内补丁用法：padding-left : length 内补丁综合实例； 学生实训及辅导； 边框的基本语法： border : border-width | border-style | border-color 边框颜色：border-color : color 边框样式表示： border-style : none | dotted | dashed | solid | double | 参数none：表示无边框,默认值; 参数dotted：表示点线,由一点点组成的边框; 参数dashed：表示虚线,边框由虚线表示; 参数solid：表示实线,边框由实线表示,常用的参数; 参数double：双线边框; 参数groove：立体形式的凹槽; 参数ridge：立体形式的凸槽; 参数insert：立体形式的凹边; 参数outset：立体形式的凸边; 边框宽度表示：border-width : medium | thin | thick | length 参数medium：默认值,表示默认宽度; 参数thin：表示小于默认宽度; 参数thick：表示大于默认宽度; 参数length：直接表示边框宽度的值; 学生实训及辅导； 定位的基本语法：position : static | absolute | relative 对象层叠顺序：z-index : auto | number 相对定位实例； 学生实训及辅导； groove | ridge | inset | outset 四十、 课外作业 四十一、 第22章上机实践; 四十二、 课堂小结 本次课主要内容： 1、CSS设置外补丁和内补丁； 2、CSS对象边框设置； 3、CSS定位设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS使用列表的方法 CSS表格控制方法 15) 使学生熟练掌握CSS常用样式的创建方法； 16) 使学生掌握CSS常用样式各种属性的含义和设置方法; 15) 掌握各种CSS常用样式的基本使用方法； 16) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 四十三、 引入 29、 30、 31、 32、 回顾上周所学内容：上周主要介绍了CSS外补丁和内补丁,重点介提出问题：如何使用CSS创建CSS列表如何使用CSS控制表格 绍了对象边框和定位设置的方法和技巧； 时间 分配 约10分钟 约30分钟 约40分钟 约30分钟 约30分钟 约40分钟 约30分钟 约30分钟 约40分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 总结 四十四、 告知学生课堂任务 本次课所学习的主要内容是CSS列表和表格设置的方法和技巧; 四十五、 逐步演示讲解分析教学内容 324、 列表的基本语法： 教list-style-type 学326、 参数list-style-image：用来设置列表的图像; 过327、 参数list-style-position：用来设置列表项标记如何根据文本程排列; 设328、 参数list-style-type：用来设置列表项所使用的预设标记; 计 329、 330、 331、 332、 设置列表中的图像： list-style-image : none | url url 参数none：表示属性不设置列表图像,是默认值; 325、 list-style : list-style-image || list-style-position || 参数url：使用绝对或相对地址指定背景图像,这样就可以显示自定义的图像了,要注意图像大小,如太大会影响列表的美观图像是按图像原始大小显示的;图像链接地址要用括号括起来,然后用引号引起也可以不用引号,注意括号前面有关键字url; 333、 334、 335、 336、 学生实训及辅导； 上周课外作业点评； 列表中的文本排列： list-style-position : outside | inside 337、 338、 339、 340、 341、 342、 343、 344、 345、 346、 347、 348、 349、 350、 351、 352、 353、 参数outside：默认值;列表项目标记放置在文本以外,且环绕文参数inside：列表项目标记放置在文本以内,且环绕文本根据标列表的预设标记： list-style-type : disc | circle | square | decimal | 参数disc：默认值;表示实心圆; 参数circle：表示空心圆; 参数square：表示实心方块; 参数decimal：表示阿拉伯数字; 参数lower-roman：表示小写罗马数字; 参数upper-roman：表示大写罗马数字; 参数lower-alpha：表示小写英文字母; 参数upper-alpha：表示大写英文字母; 参数none：表示不使用项目符号; 学生实训及辅导； 控制表格的基本语法： border-collapse : separate | collapse 属性border-collapse的第一个值separate,是本属性的默认值,本不根据标记对齐; 记对齐; lower-roman | upper-roman | lower-alpha | upper-alpha | none 表示边框独立;而后面的值为collapse,表示相邻边被合并,前者表示有边框,后者表示合并了边框,很容易区分其功能; 354、 355、 356、 357、 358、 设置表格边框独立或合并：本属性应用在表格是否显示边框,如果border-collapse : separate | collapse 学生实训及辅导； 设置表格布局的算法： 要设置好表格的布局算法,得用到布局算法的属性,表格布局算法要显示其边框,就设置separate；否则,设置collapse 用table-layout表示,其后接auto值,表示默认,或者可以接fixed,完整语法如下表示： 359、 360、 361、 table-layout : auto | fixed 用CSS控制表格实例； 学生实训及辅导； 四十六、 课外作业 四十七、 第25章上机实践; 四十八、 课堂小结 本次课主要内容： 1、CSS使用列表的方法； 2、CSS表格控制方法； 3、设置表格布局的算法; 后 记 2023年6月20日发(作者：)HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 网页设计基础知识 Dreamweaver软件介绍及其基础操作 HTML基础知识及常用标记 1) 使学生了解网页设计的相关基础知识； 2) 使学生熟悉Dreamweaver软件界面的基本操作方法; 1) 了解网页设计相关概念和网页的类型； 2) 熟练掌握Dreamweaver软件创建和管理站点的方法; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 一、 引入 1、 相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用； 2、 提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS这两个概念吗 3、 4、 二、 告知学生课堂任务 本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作； 三、 逐步演示讲解分析教学内容 1、 网站和网页的区别： 2、 1网页是Internet基本元素； 3、 2网站由网页组成； 4、 静态网页和动态网页： 5、 静态网页：纯粹HTML语言格式的网页通常被称为静态网页,静态网页的后缀名通常为.htm、.html、.shtml、.xml; 6、 动态网页：许多人认为网页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了;真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;也就是说,它是返回到了客户端上的网页;例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了; 时间 分配 约15分钟 约35分钟 约20分钟 约30分钟 约20分钟 约20分钟 约20分钟 约30分钟 约20分钟 约30分钟 约20分钟 约20分钟 约40分钟 备注 学生理解 学生熟记 学生实践 学生实践 学生实践 学生实践 学生实践 总结 教学过程设计 7、 静态网页的特点： 8、 1内容相对稳定,容易被搜索引擎检索到； 9、 2没有数据库支持,在网站制作和维护方面工作量大； 10、 3交互性差,在功能方面有很大的限制; 11、 动态网页的特点： 12、 1以数据库技术为基础,可大大降低网站维护的工作量； 13、 2可实现更多的功能,如用户注册、新闻发布、在线留言等； 14、 3不利于使用搜索引擎进行网站推广; 15、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等； 16、 网页设计原则： 17、 1了解客户需求 18、 2遵循Web标准 19、 3运用形式美法则 20、 网页设计流程： 21、 1手绘效果图：确定网页主题内容和风格 22、 2设计效果图：搜集、整合设计所需素材 23、 3版面编辑：网页的制作与实现 24、 4网页美化：动画设计,网页测试和发布 25、 网页设计的主要软件： 26、 1Photoshop 27、 2Dweamveawer 28、 3Flash 29、 4Firworks 30、 HTML基础知识： 31、 1HTML概念：Hyper Text Markup Language 超文本标识语言； 32、 2HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成； 33、 3网页文件命名：首页文件名默认为： 或 ； 34、 4HTML 文件结构： 35、 36、 37、 38、 39、 40、 HTML 文件的正文 41、 42、 43、 5用编辑器手工编写第一张网页； 44、 学生实训及辅导； 45、 Dreamweaver软件界面介绍： 46、 1软件面板组成及基本操作方法 47、 2软件首选参数设置 48、 Dreamweaver站点创建： 49、 站点->新建站点->设置站点名称->设置站点默认图像文件夹; 50、 学生实训操作：Dreamweaver站点创建与设置； 51、 Dreamweaver创建第一个网页： 52、 1 名称： 53、 2 设置标题、输入文本、输入特殊字符 54、 3页面属性设置 55、 4预览网页 56、 学生实训及辅导； 57、 HTML常用标记： 58、 1标题标记：主题文字 59、 2段落标记：这里表示段落 60、 3换行与注释：、<--这里放注释--> 61、 4粗体与斜体：粗体、斜体 62、 5删除线与下划线：删除线、下划线 63、 6上标与下标：上标 下标 64、 学生实训及辅导； 65、 字体标记： 66、 1字体大小：字体大小 67、 2字体颜色：字体颜色 68、 3设置标题字体：主题文字 69、 4物理字体： 70、 …,将字符设置成粗体; 71、 …,将字符设置成斜体; 72、 …,给字符增加下划线; 73、 …,给字符增加删除线; 74、 …,将字符设置成打字机字体; 75、 …,将字符设置成上标字体; 76、 …,将字符设置成下标字体; 77、 5逻辑字体： 78、 …强调文字; 79、 …字体加重; 80、 …显示编程代码; 81、 …显示示例文字; 82、 …显示键盘按键文字; 83、 …缩小文字; 84、 …放大文字; 85、 字体标记实例讲解； 86、 学生实训及辅导； 四、 课外作业 五、 第3章上机实践; 六、 课堂小结 本次课主要内容： 1、网页设计基础知识； 2、Dreamweaver基本使用方法； 3、HTML基础知识及常用标记； 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 文字布局 插入图像 超级链接 3) 使学生熟练掌握HTML常用标记的基本使用方法； 4) 使学生掌握HTML常用标记各种属性的含义和设置方法; 3) 掌握各种HTML常用标记的基本使用方法； 4) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 七、 引入 5、 回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记； 6、 提出问题：网页中文字如何布局如何在网页中插入图像如何运用超级链接 7、 8、 八、 告知学生课堂任务 本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用; 九、 逐步演示讲解分析教学内容 87、 换行控制：文字一、文字二 88、 不换行控制： 89、 文字对齐：align=""、居中 90、 设置段落：段落一、段落二 91、 学生实训及辅导； 92、 上周课外作业点评； 93、 无序列表： 94、 95、 表项一 96、 表项… 97、 有序列表： 98、 99、 表项一 100、 101、 102、 表项… 欲格式化文本：文字、文本 计算机输出格式： 时间 分配 约10分钟 约30分钟 约30分钟 约40分钟 约20分钟 约20分钟 约30分钟 约30分钟 约20分钟 约30分钟 约30分钟 约30分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 总结 教学过程设计 103、 104、 105、 106、 107、 108、 109、 110、 111、 112、 113、 114、 115、 116、 117、 118、 119、 120、 121、 122、 123、 124、 125、 126、 127、 128、 代码样式小型固定宽度字体显示的文本 代码样式固定宽度字体渲染 代码样式固定宽度字体渲染文本 代码样式斜体字渲染 学生实训及辅导； 在网页中插入图像： 图像无法显示时的提示信息： 控制图像的大小： 设置边框： 图像的链接： 学生实训及辅导； 图像映射图： 文本与图像对齐： 学生实训及辅导； 最简单的文字超链：文字链接 超链网页的打开方式：_blank、_parent、_self、_top 链接的注释： 设置图片链接： 设置锚点：文章中的文字 邮箱地址链接： 相对路径：相对路径是指这个文件在所在的位置与其他文件或文绝对路径： HTML绝对路径absolute path指带域名的文件的完整路径; 学生实训及辅导； 件夹的关系； 十、 课外作业 十一、 第6章上机实践; 十二、 课堂小结 本次课主要内容： 1、HTML文字布局； 2、HTML插入图像； 3、HTML超级链接; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 表单的使用 插入表格 5) 使学生熟练掌握HTML常用标记的基本使用方法； 6) 使学生掌握HTML常用标记各种属性的含义和设置方法; 5) 掌握各种HTML常用标记的基本使用方法； 6) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十三、 引入 9、 回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用； 10、 11、 12、 时间 分配 约10分钟 约30分钟 约40分钟 约20分钟 约20分钟 约40分钟 约30分钟 约40分钟 约20分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 总结 提出问题：什么是表单常见的表单有哪些如何在网页中使用表格 约30分钟 学生实践 十四、 告知学生课堂任务 本次课所学习的主要内容是HTML表单和表格的标记应用; 十五、 逐步演示讲解分析教学内容 129、 表单基本语法：、属性action和method 教学过程设计 130、 131、 132、 133、 134、 135、 136、 137、 138、 139、 140、 141、 142、 143、 144、 145、 146、 文本框： 密码框： 单选框： 复选框： 按钮设置： 学生实训及辅导； 上周课外作业点评； 下拉表： <—设置下拉表选项--> 选项一 选项二 选项三 绝对路径 文本域：<—文本域内容--> 表单应用实例讲解； 学生实训及辅导； 147、 148、 149、 150、 151、 152、 153、 154、 155、 156、 157、 158、 159、 表格基本语法： 标签对表示表行 标签对表示表头 标签对表示表元 跨多行表元：Rowspan 跨多列表元：colspan 表格内设置文字对齐： 对齐语法用align表示,后面接的值是left、center和right,分表格在网页中对齐：； 学生实训及辅导； 表格应用实例讲解； 学生实训及辅导； 别代表向左、居中和向右对齐复选框 十六、 课外作业 十七、 第8章上机实践; 十八、 课堂小结 本次课主要内容： 1、表单的使用； 2、插入表格； 3、表格应用实例； 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 网页框架 对象移动属性 多媒体对象应用 7) 使学生熟练掌握HTML常用标记的基本使用方法； 8) 使学生掌握HTML常用标记各种属性的含义和设置方法; 7) 掌握各种HTML常用标记的基本使用方法； 8) 熟记各种HTML常用标记的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 十九、 引入 13、 14、 15、 16、 回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用提出问题：框架网页如何创建如何使网页中的对象移动如何在网 方法,重点介绍了表单的应用实例； 页中插入Flash、影片、声音 时间 分配 约10分钟 约20分钟 约30分钟 约30分钟 约10分钟 约20分钟 约20分钟 约40分钟 约20分钟 约20分钟 约10分钟 约20分钟 约30分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 学生实践 学生实践 总结 二十、 告知学生课堂任务 本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用; 二十一、 逐步演示讲解分析教学内容 160、 框架的基本语法： 161、 162、 163、 164、 165、 166、 167、 168、 169、 170、 171、 172、 173、 174、 175、 框架垂直分栏： 垂直分栏是在中用cols表示跨多列表元,colspan 框架水平分栏： 水平分栏的语法用rows表示 设置不可调节框架大小：noresize 学生实训及辅导； 上周课外作业点评； 浏览器不支持框架： 教学过程设计 176、 177、 178、 179、 180、 设置框架边框： 设置滚动条： 设置滚动条在是里面,用scrolling属性 导航框架： 导航框架是在网页框架的中加入name属性,表示该的名称,然后通过用标记的链接,并用target的属性值等于的名称； 181、 182、 内联框架： 内联框架存在的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架； 183、 184、 185、 186、 187、 188、 189、 190、 191、 192、 193、 194、 195、 196、 197、 198、 199、 200、 学生实训及辅导； 框架应用实例讲解； 学生实训及辅导； 移动属性基本语法：要移动的对象 文字的移动设置：文字 图片移动的设置： 文本移动的方向：向上移动 文本的滚动循环； 文本的移动速度：scrollamount设置移动的速度 学生实训及辅导； 网页多媒体的基本语法： 隐藏面板的设置； 对齐方式： align=top、bottom、center、baseline、 left、right、texttop、学生实训及辅导； 移动对象应用实例讲解； 多媒体对象应用实例讲解； 学生实训及辅导； middle、 absmiddle、absbottom 二十二、 课外作业 二十三、 第11章上机实践; 二十四、 课堂小结 本次课主要内容： 1、网页框架； 2、对象移动属性； 3、多媒体对象应用; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS基础知识 CSS字体设置 9) 使学生熟练掌握CSS常用样式的创建方法； 10) 使学生掌握CSS常用样式各种属性的含义和设置方法; 9) 掌握各种CSS常用样式的基本使用方法； 10) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 二十五、 引入 17、 18、 19、 20、 回顾上周所学内容：上周主要介绍了HTML网页框架和多媒体对象标记,提出问题：什么是CSSCSS有什么用如何创建和使用CSS 重点介绍了HTML对象移动属性设置方法； 时间 分配 约10分钟 约40分钟 约40分钟 约60分钟 约50分钟 约40分钟 备注 学生理解 学生实践 学生实践 总结 约80分钟 二十六、 告知学生课堂任务 本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧; 二十七、 逐步演示讲解分析教学内容 201、 CSS相关基础知识； 教学过程设计 202、 203、 204、 205、 206、 207、 CSS文件链接方式： 1内联定义：内联定义即是在对象的标记内,使用对象的style属性定链入内部CSS： 2链接外部CSS： CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是Internet 义适用其的样式表属性; Explorer简称IE和 Mozilla Firefox简称FF,网页中的CSS因两个浏览器支持不同,所以对同一代码会显示不同的效果,那么为了达到网页的风格,有时要注意哪个浏览器要写的CSS属性支持如何;如果某一属性只有一个浏览器支持,那么另一浏览器对这属性代码就不起作用; 208、 CSS选择符：CSS选择符就是CSS样式的名字,选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头,选择符在CSS中可分成多种,在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS类选择符选择符; 209、 CSS伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符,HTML元素可以占有这些预定义性质;实际上这些性质与class属性的功能是相同的,因此在CSS术语中,它们被称作伪类;在对应这些伪类的标记中,不存在真正的class属性,相反,它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态; 210、 211、 212、 213、 214、 215、 216、 217、 218、 219、 220、 221、 CSS常用单位： em：em,元素的字体的高度; ex：x-height,字母 "x" 的高度; px：像素,相对于屏幕的分辨率; 绝对长度单位： in：英寸,1英寸=厘米; cm：厘米,1厘米=10毫米; mm：毫米,1米=1000毫米;pt：点,1点=1/72英寸;pc：帕,1帕=12点; 上周课外作业点评； 学生实训及辅导； 字体和字体颜色：font : font-style || font-variant || font-weight 字体大小：Font-size,后面可接的参数值有：|| font-size || line-height || font-family xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length 222、 字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 223、 224、 225、 226、 227、 228、 229、 行距：line-height:； 字体类型：Font-family:fontname； 行距：line-height:； 间距与间隔： word-spacing：normal|长度单位、letter-spacing:normal|length 字体应用实例讲解； 学生实训及辅导； 二十八、 课外作业 二十九、 第16章上机实践; 三十、 课堂小结 本次课主要内容： 1、CSS基础知识； 2、CSS文件链接方式； 3、CSS字体设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS文本设置 CSS背景设置 对象尺寸设置 11) 使学生熟练掌握CSS常用样式的创建方法； 12) 使学生掌握CSS常用样式各种属性的含义和设置方法; 11) 掌握各种CSS常用样式的基本使用方法； 12) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 三十一、 引入 21、 22、 23、 24、 回顾上周所学内容：上周主要介绍了CSS基础知识和CSS文件链提出问题：如何用CSS进行文本和背景设置如何控制网页中的对 接方式,重点介绍了CSS字体样式设置方法； 象尺寸 时间 分配 约10分钟 约30分钟 约30分钟 约60分钟 约40分钟 约30分钟 约40分钟 约30分钟 约50分钟 备注 学生理解 学生实践 学生实践 学生实践 总结 三十二、 告知学生课堂任务 本次课所学习的主要内容是CSS文本设置和背景设置、对象尺寸设置的方法和技巧; 三十三、 逐步演示讲解分析教学内容 230、 字母大小写转换： 231、 232、 233、 234、 235、 236、 237、 238、 239、 240、 241、 242、 243、 244、 text-transform：capitalize | uppercase | lowercase | none capitalize：使每个词的首字母大写 uppercase：使每个字的所有字母大写 lowercase：使每个字的所有字母小写 none：字母以正常形式显示 文字修饰： text-decoration：underline | overline | line-throungh | underline：给文字加下划线 overline：给文字加上划线 line-through：给文字加删除线 blink：文字在闪烁 none：缺省使用无 文本空格处理方式：white-space : normal | pre | nowrap 文本水平和垂直对齐： 教学过程设计 blink | none 245、 246、 247、 248、 249、 250、 251、 252、 253、 254、 255、 256、 257、 258、 259、 260、 261、 262、 263、 264、 265、 266、 267、 268、 269、 270、 271、 272、 273、 274、 275、 1垂直对齐： baseline：使元素和上级元素的基线对齐 sub：使对象以下标的形式显示 Super：使对象以上标的形式显示 top：使元素和行中最高的元素向上对齐 text-top：使元素和上级元素的字体向上对齐 middle：纵向对齐元素基线加上上级元素的x-高度——字bottom：使元素和行中最高的元素向下对齐 text-bottom：使元素和上级元素的字体向下对齐 2水平对齐： left：浏览器默认的对齐方式,左对齐 Right：右对齐 center：居中 justify：左右对齐 文本缩进：text-indent：<长度> | <百分比> 学生实训及辅导； 上周课外作业点评； 设置背景颜色：background-color : transparent | color 设置图像的滚动：background-attachment : scroll | fixed 设置背景图像的位置：background-position : length | length background-position : position | position 铺排背景图像：background-repeat : repeat | no-repeat | 学生实训及辅导； 设置对象宽度：width : auto | length 设置对象高度：height : auto | length 宽度和高度实例： 1在网页中布局多个层,并在每个层中写上文字； 2设置层的宽度,使每个层按50像素增加； 3给每个层添加一个ID,然后在CSS中对ID名称进行控制； 4设置层居中; 学生实训及辅导； 母”x”的高度的——的一半的中点 repeat-x | repeat-y 三十四、 课外作业 三十五、 第19章上机实践; 三十六、 课堂小结 本次课主要内容： 1、CSS文本设置； 2、CSS背景设置； 3、对象尺寸设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 设置外补丁和内补丁 对象边框和定位设置 13) 使学生熟练掌握CSS常用样式的创建方法； 14) 使学生掌握CSS常用样式各种属性的含义和设置方法; 13) 掌握各种CSS常用样式的基本使用方法； 14) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 三十七、 引入 25、 26、 27、 28、 回顾上周所学内容：上周主要介绍了CSS文本设置和背景设置,提出问题：什么是外补丁和内补丁外补丁和内补丁如何创建如何 重点介绍了对象尺寸设置的方法和技巧； 给网页中的对象进行定位 时间 分配 约10分钟 约20分钟 约10分钟 约30分钟 约30分钟 约30分钟 约30分钟 约30分钟 约15分钟 约30分钟 约10分钟 约40分钟 约15分钟 约30分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 学生实践 总结 三十八、 告知学生课堂任务 本次课所学习的主要内容是CSS外补丁和内补丁、对象边框和定位设置的方法和技巧; 三十九、 逐步演示讲解分析教学内容 276、 外补丁：表示具体的精确宽度; 277、 278、 279、 280、 281、 282、 283、 284、 285、 286、 287、 288、 289、 290、 291、 margin : auto | length 外补丁的外延设置： 顶端外补丁用法：margin-top:auto|length 右端外补丁用法：margin-right:auto|length 底端外补丁用法：margin-bottom:auto|length 左端外补丁用法：margin-left:auto|length 外补丁实例； 上周课外作业点评； 学生实训及辅导； 层与层的距离效果； 对层布局； 设置层的尺寸； 设置层漂移； 设置层与层之间的间隔；：： 学生实训及辅导； 教学过程设计 292、 293、 294、 295、 296、 297、 298、 299、 300、 301、 302、 303、 304、 305、 306、 307、 308、 309、 310、 311、 312、 313、 314、 315、 316、 317、 318、 319、 320、 321、 322、 323、 内补丁：表示对象中的内部填充距离; padding : length 顶端内补丁用法：padding-top:length; 右端内补丁用法：padding-right : length 底端内补丁用法：padding-bottom : length 左端内补丁用法：padding-left : length 内补丁综合实例； 学生实训及辅导； 边框的基本语法： border : border-width | border-style | border-color 边框颜色：border-color : color 边框样式表示： border-style : none | dotted | dashed | solid | double | 参数none：表示无边框,默认值; 参数dotted：表示点线,由一点点组成的边框; 参数dashed：表示虚线,边框由虚线表示; 参数solid：表示实线,边框由实线表示,常用的参数; 参数double：双线边框; 参数groove：立体形式的凹槽; 参数ridge：立体形式的凸槽; 参数insert：立体形式的凹边; 参数outset：立体形式的凸边; 边框宽度表示：border-width : medium | thin | thick | length 参数medium：默认值,表示默认宽度; 参数thin：表示小于默认宽度; 参数thick：表示大于默认宽度; 参数length：直接表示边框宽度的值; 学生实训及辅导； 定位的基本语法：position : static | absolute | relative 对象层叠顺序：z-index : auto | number 相对定位实例； 学生实训及辅导； groove | ridge | inset | outset 四十、 课外作业 四十一、 第22章上机实践; 四十二、 课堂小结 本次课主要内容： 1、CSS设置外补丁和内补丁； 2、CSS对象边框设置； 3、CSS定位设置; 后 记 HTML+CSS网页设计与布局课程教案 授课教师： 授课班级： 地点： 周课时： 5 课时 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 CSS使用列表的方法 CSS表格控制方法 15) 使学生熟练掌握CSS常用样式的创建方法； 16) 使学生掌握CSS常用样式各种属性的含义和设置方法; 15) 掌握各种CSS常用样式的基本使用方法； 16) 熟记各种CSS常用样式的含义; 课堂讲授、案例讲解与指导 计算机机房 教学过程及内容提要 四十三、 引入 29、 30、 31、 32、 回顾上周所学内容：上周主要介绍了CSS外补丁和内补丁,重点介提出问题：如何使用CSS创建CSS列表如何使用CSS控制表格 绍了对象边框和定位设置的方法和技巧； 时间 分配 约10分钟 约30分钟 约40分钟 约30分钟 约30分钟 约40分钟 约30分钟 约30分钟 约40分钟 约40分钟 备注 学生理解 学生实践 学生实践 学生实践 学生实践 总结 四十四、 告知学生课堂任务 本次课所学习的主要内容是CSS列表和表格设置的方法和技巧; 四十五、 逐步演示讲解分析教学内容 324、 列表的基本语法： 教list-style-type 学326、 参数list-style-image：用来设置列表的图像; 过327、 参数list-style-position：用来设置列表项标记如何根据文本程排列; 设328、 参数list-style-type：用来设置列表项所使用的预设标记; 计 329、 330、 331、 332、 设置列表中的图像： list-style-image : none | url url 参数none：表示属性不设置列表图像,是默认值; 325、 list-style : list-style-image || list-style-position || 参数url：使用绝对或相对地址指定背景图像,这样就可以显示自定义的图像了,要注意图像大小,如太大会影响列表的美观图像是按图像原始大小显示的;图像链接地址要用括号括起来,然后用引号引起也可以不用引号,注意括号前面有关键字url; 333、 334、 335、 336、 学生实训及辅导； 上周课外作业点评； 列表中的文本排列： list-style-position : outside | inside 337、 338、 339、 340、 341、 342、 343、 344、 345、 346、 347、 348、 349、 350、 351、 352、 353、 参数outside：默认值;列表项目标记放置在文本以外,且环绕文参数inside：列表项目标记放置在文本以内,且环绕文本根据标列表的预设标记： list-style-type : disc | circle | square | decimal | 参数disc：默认值;表示实心圆; 参数circle：表示空心圆; 参数square：表示实心方块; 参数decimal：表示阿拉伯数字; 参数lower-roman：表示小写罗马数字; 参数upper-roman：表示大写罗马数字; 参数lower-alpha：表示小写英文字母; 参数upper-alpha：表示大写英文字母; 参数none：表示不使用项目符号; 学生实训及辅导； 控制表格的基本语法： border-collapse : separate | collapse 属性border-collapse的第一个值separate,是本属性的默认值,本不根据标记对齐; 记对齐; lower-roman | upper-roman | lower-alpha | upper-alpha | none 表示边框独立;而后面的值为collapse,表示相邻边被合并,前者表示有边框,后者表示合并了边框,很容易区分其功能; 354、 355、 356、 357、 358、 设置表格边框独立或合并：本属性应用在表格是否显示边框,如果border-collapse : separate | collapse 学生实训及辅导； 设置表格布局的算法： 要设置好表格的布局算法,得用到布局算法的属性,表格布局算法要显示其边框,就设置separate；否则,设置collapse 用table-layout表示,其后接auto值,表示默认,或者可以接fixed,完整语法如下表示： 359、 360、 361、 table-layout : auto | fixed 用CSS控制表格实例； 学生实训及辅导； 四十六、 课外作业 四十七、 第25章上机实践; 四十八、 课堂小结 本次课主要内容： 1、CSS使用列表的方法； 2、CSS表格控制方法； 3、设置表格布局的算法; 后 记 本文发布于:2023-06-20，感谢您对本站的认可！本文链接:http://torson.com.cn/chengxu/1687262541a452.html版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。本文标签：html滚动条样式发布评论 取消回复评论列表（有0条评论）最近发表Html5移动端div固定到底部实现底部导航条的几种方式高级程序员必看的书前端拖拽自动生成代码_程序员用软件生成前端代码,前端程序媛不知道怎...Html与Css的简单介绍(一)安卓手机恢复出厂设置方法ldap配置过程详解zimbra命令行管理SpringBoot实战(六)之使用LDAP验证用户phpldap查找,php–LDAP过滤器–查找特定OU的所有用户jQuery.form.js使用【jquery】checkbox选中事件IE和chrom兼容性分析(持续更新)一键清理系统垃圾.bat数据库学习笔记7关系数据库标准语言SQL数据库原理及应用 绳床SQLParameter参数的用法C#SQL带传入、输出参数及返回值的存储过程企业客户管理系统mysql存储过程sql注入,sql通用高效分页代码(存储过程是带有sql注入)(12...mysql批量上传相片_将图片写进数据库(上传多张图片)拓祥电子编程网拓祥电子编程提供编程程序员技术分享技术，经验代码。相关推荐网页设计_HTML标签Dreamweaver中部分bHTMLb标签及其属性html设置长宽高代码_Html_页面的高度宽度等网易云音乐虚化图片html,CSS之高斯模糊—(网易云歌单)dreamweaver怎么制作表格滚动条bootstraptable表头固定、冻结列、横向纵向滚动条html特效代码大全精美免费下载HTML常用标签scroll系列相关属性实例讲解DataTables固定表格宽度(设置横向滚动条)html手写代码[整理版]HTMLtable表格thead表头固定,tbody滚动html和css做个人介绍,有了这些CSS套路,你也可以做一个漂亮的简历HTML5 标签 和属性 列表CSS文字样式淘宝网店铺装修装饰HTML代码大全html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层element显示表格右侧滚动条_B端交互组件之表格篇html+css总结+实训day01QTQTextEdit滚动条自动(往下、往上)滚动标签列表战地1为什么一进服务器就断开2t2b服务器的大神叫什么一台网吧服务器都需要什么pubg手机为什么一直显示服务器维护新手csgo连接任意服务器失败是为什么取消为lan适用代理服务器是什么原理为什么我的电脑无法访问steam服务器三星a8为什么服务器繁忙FTB服务器提供的主要功能是什么h5的服务器域名是什么意思qq登录在电脑上为什么找不到服务器苹果总是连接id服务器出错是什么意思1u服务器能干什么用为什么RUST进入一个服务器那么慢服务器已缓存45g是什么意思域名根服务器f i k l什么意思艾尔登法环服务器有什么用火影忍者手游服务器什么时候更新普通电脑和普通服务器有什么区别云服务器机型s4代表什么
