任务3美化简单学院网站_第1页
任务3美化简单学院网站_第2页
任务3美化简单学院网站_第3页
任务3美化简单学院网站_第4页
任务3美化简单学院网站_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教案名称任务3美化简单学院网站计划学时4学时知识目标掌握CSS样式表的概念掌握样式表的创建及使用方法掌握CSS选择器：标记选择器、类选择器、ID选择器掌握交集选择器、并集择器、后代选择器、通配符选择器掌握CSS常用文本属性及使用方法理解CSS的层叠性、继承性和优先级能力目标掌握使用CSS对网页进行美化的方法素质目标引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习教学重点样式表的创建及使用方法CSS选择器：标记选择器、类选择器、ID选择器交集选择器、并集择器、后代选择器、通配符选择器CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高CSS的层叠性、继承性和优先级教学难点CSS各种样式属性的灵活使用教学模式教学做一体化线上+线下混合教学教学活动及主要环节思政元素切入点第1学时（引入CSS样式）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（5分钟）为什么网页结构和样式要分离？分离的好处有哪些？网页变得美观的途径有哪些？=2\*ROMANII.重难点内容讲授：一、HTML中引入CSS的方法（25分钟）（1）行内式行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。例如：<h1style=“color:white;background-color:blue”>这是一行文本</h1>(2)嵌入式：即内部样式表嵌入式将对页面中各种元素的设置写在<head></head>之间。例如： <styletype="text/css"> h1{ color:white; background-color:blue } </style>(3)链接式:外部样式表最常用的方式例：<linkhref="mystyle.css"rel="stylesheet"type="text/css"/>二、练习：将任务2中创建的个人介绍页面进行美化。（15分钟）第2学时（CSS基本选择器）=1\*ROMANI.学生讨论：（10分钟）CSS选择器的作用是什么？=2\*ROMANII.重难点内容讲授：（30分钟）一、CSS基本选择器1.标记选择器是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式，其语法格式如下：例，使用p选择器定义HTML页面中所有段落的样式。2.类选择器类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下.class{属性：值;属性：值;}class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）例如：<title>CSS类别选择器</title><styletype="text/css">.title1{background-color:#0CF;color:#fff;}.title2{background-color:#9C0;color:#f00;}</style></head><body><pclass="title1">这是第一段的内容。</p><pclass="title2">这是第二段的内容。</p></body></html>3.ID选择器(代表唯一)ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下:例如：<styletype="text/css">#one{background-color:#0CF;color:#fff;width:200px;height:200px;}#two{background-color:#9C0;color:#f00;width:200px;height:200px;}</style></head><body><divid="one">这是第一个块的内容。</div><divid="two">这是第二个块的内容。</div></body></html>注意：CSS样式的优先规则：行内样式>ID样式>类别样式>标记样式4.交集选择器交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：标记名称.类名称{属性：属性值；属性：属性值；...}5.并集选择器如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为并集选择器的一部分。h1,h2,p{font-size:24px;color:blue;6.后代选择器后代选择器也叫包含选择器，用于对容器对象中的子对象进行控制，使其他容器对象中的同名子对象不受影响。后代选择器书写时将容器对象写在前面，子对象写在后面，中间用空格分隔。若容器对象有多层时，则分层依次书写。pstrong{font-size:24px;color:red;}7.通配符选择器通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素。其基本语法格式如下：*{属性：属性值；属性：属性值；...}=3\*ROMANIII.课堂小结：（5分钟）重点理解引入CSS选择器的方式，CSS选择器的使用。作业1：课本实训3作业2：使用学习通平台的教学视频自学任务3中的CSS文本样式第3学时（CSS文本属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）各种选择器书写方式有何区别？=2\*ROMANII.重难点内容讲授：（35分钟）一、CSS字体样式属性（1）font-weight:字体粗细font-weight属性用于定义字体的粗细。例如：p{font-weight:bold;}h2{font-weight:normal;}(2)font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。(3)@font-face属性@font-face是CSS3新增属性，用于定义服务器字体。通过该属性，开发者可以在网页中使用任何喜欢的字体，而不管用户计算机是否安装这些字体。定义服务器字体的基本语法格式如下。二、CSS文本外观属性使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，具体如下：(1)color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：使用颜色的英文单词，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。(2)letter-spacing:字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。(3)word-spacing:单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。(4)line-height:行间距，即行高。line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。例如，p{line-height:25px;}(5)text-transform:文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。(6)text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线。例如，a{text-decoration:none;}a:hover{text-decoration:underline;}(7)text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。例如，h1{text-align:center;}P{text-align:center;}(8)text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。例如，p{text-indent:2em;}(9)white-space:空白符处理使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。text-overflow设置元素内文本溢出时如何处理。基本语法格式如下：说明：clip：修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“…”。ellipsis：在元素文本末尾用省略标记“…”标示被修剪的文本。设置省略标记表示溢出文本的步骤如下：为包含文本的元素定义宽度。设置元素的white-space属性值为nowrap，强制文本不能换行。设置元素的overflow属性值为hidden，使溢出文本隐藏。设置text-overflow属性值为ellipsis，显示省略标记。第4学时（CSS高级特性）=1\*ROMANI.学生讨论：（5分钟）先演示案例——我很调皮，猜猜我是什么颜色？再让学生讨论为什么显示案例中的颜色。<styletype="text/css">p{font-family:"方正隶变简体";}.one{ color:#00F;}#two{ font-size:68px;}span{ color:#FF0;}</style><body><pclass="one"id="two">giveyousomecolorto<span>seesee</span></p></body>=2\*ROMANII.重难点内容讲授：（35分钟）CSS的高级特性是指CSS的层叠性、继承性和优先级等。对于网页设计师来说，应深刻理解这些特性。一、层叠性所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式定义<p>标记字号大小为12像素，外部样式表定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。二、继承性所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号等。例如，定义页面主体标记body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标记都是body标记的子标记。注意：当为body元素设置字号属性时，标题文本不会采用这个样式。因为标题标记h1~h6有默认的字号样式。CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。根据规定，样式表的优先级别从高到低为：行内样式、嵌入式和外部样式表。也就是最接近目标元素的样式优先级越高，即就近原则。任务实现：美化简单学院网站本节在前面学习CSS内容的基础上，综合使用CSS样式属性将简单学院网站进行修饰美化。将任务2创建的简单学院网站项目school复制一份，放入chapter03目录中，在HBilderX中，打开school目录，依次给每个页面添加CSS样式。1.美化首页样式分析分析首页效果图，可以为body元素统一设置字体、颜色等样式，标题、段落文字的对齐方式等信息分别设置即可。搭建结构<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>未来信息学院</title> </head><body> <h2>欢迎来到未来信息学院</h2> <hr> <p><ahref="intr.html">学院简介</a><br> <ahref="news.html">学院新闻</a><br> <ahref="spe.html">专业介绍</a><br> <ahref="rec.html">招生就业</a> </p> <</p> <p>友情链接：<ahref=""target="_blank">百度</a>  

<ahref=""target="_blank">学院官网</a><br> <hr> <p>版权所有©未来信息学院</p></body></html>定义CSS样式 <styletype="text/css"> body{ font-family:"微软雅黑"; /*设置字体*/ font-size:14px; /*设置网页中除标题外的文字大小*/ color:#333; /*设置网页中文字的颜色*/ } h2{ /*设置标题的文字颜色和对齐方式*/ color:#F00; text-align:center; } p{ /*创建段落的样式*/ text-align:center; } </style>美化学院简介页面样式分析分析学院简介页面效果图，可以为body元素统一设置字体、颜色等样式，标题、段落和版权信息的样式须分别设置。搭建结构<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>学院简介</title></head><body> <h2>学院简介</h2> <hr> <pclass="text1">未来信息学院是省人民政府批准设立、教育部备案的公办省属普通高等学校，学校秉持“以服务发展为宗旨，以促进就业为导向”的办学方针，遵循“以人为本、德技双馨、产教融合、服务社会”的办学理念，以“建设有特色高水平高职院校”为目标，建立了开放创新强校模式，累积了优质的教育资源，形成了良好的育人环境。学校的管理水平、教学质量、办学特色得到社会各界的广泛肯定。</p> <pclass="text1">学校是教育部批准的“国家示范性软件职业技术学院”首批建设单位,部队士官人才培养定点院校，“3+2”对口贯通分段培养本科招生试点院校，示范性高职单独招生试点院校；是国家首批“电子信息产业高技能人才培训基地”“省级服务外包人才培训基地”“省级劳务外派培训基地”“省信息安全培训中心”；荣获“全国信息产业系统先进集体”“职业教育先进集体”“德育工作优秀高校”等称号。</p> <hr> <pclass="text2">版权所有©未来信息学院</p> <pclass="text3"><ahref="index.html">返回</a></p></body></html>定义CSS样式 <styletype="text/css"> body{ font-family:"微软雅黑"; /*设置字体*/ font-size:14px; /*设置网页中除标题外的文字大小*/ color:#333; /*设置网页中文字的颜色*/ } h2{ /*设置标题样式*/ color:#F00; text-align:center; } .text1{ /*设置正文样式*/ text-indent:2em; line-height:25px; } .text2{ /*设置版权信息样式*/ text-align:center; } .text3{ /*设置超链接样式*/ text-align:right; } </style>美化学院新闻页面样式分析分析学院简介页面效果图，可以为body元素统一设置字体、颜色等样式，标题、列表项和版权信息的样式须分别设置。搭建结构<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>学院新闻</title></head><body> <h2>学院新闻</h2> <hr> <ul> <li><ahref="news1.html"target="_blank">学校联合发起成立软件行业产教联盟(2021-04-09)</a></li> <li><ahref="#"target="_blank">学校“四个推进”掀起党史学习教育热潮(2021-04-08)

</a></li> <li><ahref="#"target="_blank">学校召开2021年度体育工作会议(2021-04-02)

</a></li> <li><ahref="#"target="_blank">我校举行“铭记历史缅怀先烈”清明节祭扫先烈活动(2021-04-01)</a></li> <li><ahref="#"target="_blank">中国工业互联网研究院来我校交流访问(2021-03-30)

</a></li> < <li><ahref="#"target="_blank">我校举行示范课建设专题讲座(2021-03-30)

</a></li> </ul> <hr> <pclass="text1">版权所有©未来信息学院</p> <pclass="text2"><ahref="index.html">返回</a></p></body></html>定义CSS样式 <styletype="text/css"> body{ font-family:"微软雅黑"; font-size:14px; color:#333; } h2{ /*设置标题样式*/ color:#F00; text-align:center; } li{ /*设置列表项的样式*/ line-height:25px; /*行高*/ } .text1{ /*设置版权信息样式*/ text-align:center; } .text2{ /*设置超链接样式*/ text-align:right; } </style>美化新闻详情页面样式分析分析新闻详情页面效果图，可以为body元素统一设置字体、颜色等样式，标题、副标题、正文和版版信息的样式须分别设置。搭建结构<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>学校联合发起成立软件行业产教联盟</title> </head><body> <h2>学校联合发起成立软件行业产教联盟</h2> <h4>撰稿人：软件与大数据系时间：2021-04-0920:33:17浏览次数：181次</h4> <hr><pclass="text1">4月9日，软件行业产教联盟成立大会在济南举行。会议举行了成立仪式及省优秀软件企业和优秀软件产品颁奖仪式，主题演讲活动于同日举办。</p> <pclass="text1">软件行业产教联盟是在山东省工业和信息化厅指导下，由我校和大学软件学院、浪潮集团、省软件协会联合发起成立，联盟有企业会员196家、高校会员55所。我校任联盟副理事长单位。</p> <pclass="text2"><imgsrc="images/lianmeng.jpg"width="400"alt="成立现场"></p> <hr> <pclass="text2">版权所有©未来信息学院</p> <pcl

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论