教案《网页设计与制作项目教程》5(DOC 14页).doc
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《教案《网页设计与制作项目教程》5(DOC 14页).doc》由用户(2023DOC)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作项目教程 教案网页设计与制作项目教程5DOC 14页 教案 网页 设计 制作 项目 教程 DOC 14
- 资源描述:
-
1、X X X X职业技术学院教 案第 5 周 第 1 次课授课时间 授课题目高效制作更为精致的网页(1/4)授课方式理论课( );实践课( );实习( )教学时数2学时教学目的教学要求了解CSS的格式设置教学重点教学难点理解CSS样式表了解CSS的格式设置教学方法教学手段教学方法:本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。教学手段:多媒体网络教学或投影演示,师生互动。教学内容时间分配教学进程1.导入新课:任务引领一 “产品说明书”任务说明: 网页打开后,将显示“产品说明书”界面2.讲授新课:完成过程1.制作说明书的基础工作(1) 新建一个网页
2、文件,命名为“index.html”; (2) 切换到“Dreamweaver”的“经典”视图,在“常用”快捷栏中单击表格图标( ),插入3行1列的表格然后使其居中,并设置表格的宽度为860像素。2. 插入嵌套表格并插入图片文字(1) 在上述表格的第1行嵌入一个1行2列宽度为100%的表格(2) 将光标放在第一个单元格中,再插入网页的logo图标logo.jpg,并在其后面单元格中插入导航图标menu.jpg(3) 在外表格的第二行插入1行2列的表格,在第1列嵌套一个宽度为100%的2行1列的表格,并进行调整(4) 在上面嵌套表格的第一行插入图片dh.jpg,进行调整,在第2列插入图片flow
3、er.jpg,设置的位置为所在单元格的顶端(5) 在嵌套表格的第2行插入相应的文字,设置CSS样式。在CSS样式面板中单击图标( ),弹出一个“创建CSS规则”窗口,在“选择器名称”处输入“bt1 单击“确定”按钮后,弹出一个窗口,在“类型”选项下,设置“Color”为“#84665C” 选中网页中要设置的文字,在“属性”面板中首先单击“CSS切换”按钮 ,在“目标规则”下拉列表中选择“bt1”即可(6) 按照前面的步骤,再新建一个CSS样式,命名为mytext 选中需要设置的文字,在“属性”面板中选择“mytext”即可; 相关知识1.理解样式表在当今的网页中,几乎很多网页都使用了CSS样式
4、表,有了CSS的控制,网页便会给人一种赏心悦目的感觉,字体的色彩变化也使主页变得更加生动活泼。(1)样式表的概念CSS英文全称“Cascading Style Sheets”,中文全称为“层叠样式表”,更多的人则把它简称为“样式表”,以下简称为“CSS样式”。它是一组格式设置规则,用于控制Web页面内容的外观,通过使用CSS样式设置页面的格式,可将页面的内容与表示形式分离开。(2)理解样式表的标记通常情况下,CSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。 “选择器”相当于调用的标识,“属性”和“属性值”则是说明想要描述的是哪一个属性,该属性的值为多少。例如:h1 font-si
5、ze: 12px; ,选择器是h1标签。将h1字体大小属性定义为12像素,写成font-size: 12px;属性和属性值之间用一个冒号“:”分开,以一个分号“;”结束,最后别忘记用一对大括号“”括起来。(3)样式表的种类按照选择器分,CSS最常用的种类有四种:HTML标签选择器、CLASS类选择器、ID类选择器和伪元素选择器。 HTML标签选择器顾名思议,HTML标签选择器是直接将HTML标签作为选择器,可以是p、h1、dl、strong等HTML标签。所有的CSS样式要围在标签内。 CLASS类选择器使用HTML标签的CLASS属性引入CSS中定义的样式规则的名字,称为CLASS类选择器,
6、CLASS属性指定的样式名字必须是以.开头。“”为HTML的注释标记,放置在样式标签内的两端,有利用于提高兼容性,不影响CSS样式的应用效果。 ID类选择器ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强(仅将该样式应用到具有相同ID的HTML元素)。 伪类选择器伪类和伪元素是两种有意思的选择器,之所以称“伪”,因为它们实际上并不存在于源文档或者文档树中,但是它们又确实可以显示出效果。CSS中最常用的四个伪类选择器,分别是:l链接 a:link l已访问过的链接 a:visitedl鼠标停在上方时 a:hoverl单击鼠标时
7、a : active。 (4)在哪儿建立样式表CSS按层次可分为三类:内联样式表(Inline Style Sheet)、嵌入样式表(Internal Style Sheet)和外部样式表(External Style Sheet) 内联样式表(Inline Style Sheet)HTML标签直接使用style属性,称为内联样式(Inline Style Sheet)。它适用于只需要简单地将一些样式应用于某个独立的元素的情况,不需要另设CSS样式段。 嵌入样式表(Internal Style Sheet)嵌入样式是在标签内添加标签对儿,在标签对内定义需要的样式,作用于整个页面。 外部样式表
8、(External Style Sheet)顾名思义,外部样式表是个独立文件,一般后缀为.css,文件的MIME类型为text/css。当某文档需要引用外部样式表时,将外部样式表的链接在中说明即可。格式1外联样式表:它是将标签内的样式语句定义在扩展名为.css的文件中,通过使用标签引入样式文件。 属性rel用来说明元素在这里要完成的任务是连接一个独立的CSS文件,而href属性给出了所要连接CSS文件的URL地址。格式2导入样式表:它是使用CSS的import命令将一个外部样式文件输入到另外一个样式文件中,被输入的样式文件中的样式规则定义语句就成了输入到的样式文件中的一部分。关于引入CSS的方
9、式,外联样式表和导入样式表都是推荐的使用方式,因为它们具有以下优点:l多个HTML文档可以共享同一个样式表;l修改样式表文件的时候不用打开HTML文档。使用import与link的区别:经常浏览网页会发现只有极少部分网站使用的是 import,而多数网站都是使用link 外联样式表。虽然本质上这两种方法的作用都是引入 CSS 文件作用相同,但这两种方法具体还是有一些区别的:服务提供:其中 link是属于XHTML标签,link标签除了可以加载CSS以外,还可以实现其他功能,如定义RSS定义,rel 连接属性等等;而import则是CSS提供的一种引入方式,使用import只能加载CSS样式表,
10、但import语法可直接在 CSS 文件内使用;加载顺序:当一个页面被加载(浏览)的时候,link引用的CSS会同时被加载,而import引用的CSS会等到页面全部被下载完成后再被加载。所以有时候浏览使用import 加载CSS的页面时开始会没有样式或闪烁,网速慢的时候则会相当明显;兼容区别:即兼容性的差别,由于import是CSS2.1 提出的,所以老式浏览器均不支持,只有在IE5以上的浏览器才能识别,而link标签无此问题;文档模型:即文档对象模型,在使用文档对象模型(DOM)控制样式时,如使用JavaScript控制DOM去改变网页样式的时候,将只对link标签引入的CSS样式生效,因为
11、import不是DOM可以控制的。 局部特定样式表和用来为内容指定样式或绑定脚本。虽然大多数HTML元素可以通过style属性来设置样式信息,但是许多HTML元素有自己默认的样式,该样式可能和style定义的样式混合甚至冲突,可能是之前没有意料到的。如:我本来可是粗体哦!。标签本就是用于加粗控制,与style = “color: red”结合后显示为又红又粗的一段文字。和其他html元素不同,和没有默认的显示样式。所以可以通过它们来指定样式。(1)(division)是块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。由于是块级元素,在段落开始、结束处会插入一个换行。用来设置内容
12、块的位置。可以使用来为文档的任意部分绑定脚本或样式。(2)是一个行内元素,和不同,不会引起换行。它是一个逻辑化的内嵌分组元素。最常见的使用方式是用它来为一段文本中的几个单词甚至某几个字符指定样式。 和 的区别在于,div(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而span 是行内元素,span的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用span。(5)在Dreamweaver 中制作样式表的方法打开CSS样式面板添加CSS样式。选择“窗口”菜单下“CSS样式”命令即可单击新建图标,就会弹出一个窗口,按照
13、前面讲解的就可以添加你想要的CSS样式了。最后,根据选择器类型的不同,具体应用CSS样式即可。3.巩固练习: 依据所学自由制作应用CSS的网页4.归纳小结:CSS样式表的作用和种类5分钟65分钟20分钟10分钟使用的参考资料1. HTML+CSS+JavaScript网页设计从入门到精通,胡晓霞,清华大学出版社,2017.102. Dreamweaver CS6+ASP动态网站开发完全学习手册,刘贵国,清华大学出版社,2014.73. 因特网WEB 开发者资源,包括较全面的教程、完善的参考手册以及庞大的代码库4. http:/ 教材支持网站,提供教学文件及素材下载、案例演示,同时为师生提供免费
14、网页空间作业课后小结教研室主任意见 签字: 年 月 日 在授课结束后将教案交到教研室存档 任课教师签字:X X X X职业技术学院教 案第 5 周 第 2 次课授课时间 授课题目高效制作更为精致的网页(2/4)授课方式理论课( );实践课( );实习( )教学时数2学时教学目的教学要求了解CSS的格式设置,掌握CSS样式表的具体应用, 并能够用它美化网页;教学重点教学难点改变文字属性修改行间距修改链接的显示网络制作列表图标固定背景图像的位置教学方法教学手段教学方法:本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。教学手段:多媒体网络教学或投影演示
15、,师生互动。教学内容时间分配教学进程1.导入新课:复习上节课内容,导入新课。2.讲授新课: 2.利用用户自定义样式表改变文字属性(1)用户自定义文本属性的type选项组打开网页,在“样式表”面板中单击新建图标( ),弹出“新建CSS规则”对话框,设置样式的名称为“ziti”,在“选择器类型”中选择“类(可应用与任何HTML元素)”,在“规则定义”中选择“仅限该文档” 在选项“类型”中设置“Font-size”字体大小为“12px”,“Line-heigh”行高为“20px”,“Color”颜色为“#903” 选中网页中的文字,在“属性”面板“目标规则”中选择“ziti”样式(2)根据自定义的文
展开阅读全文