第18课+美化网页方法多课件+2025-2026学年人教版初中信息科技七年级全一册.pptxVIP

第18课美化网页方法多七年级信息科技

学习目标①HTML美化CSS美化合理选择知道串联样式表的能根据需求,分析知道用HTML代码简单美化网页的作用,初步学会用不同方法的特点并操作方法用它美化网页合理选择掌握美化技能,打造精美网页!

本课聚焦聚焦问题一?怎样用HTML代码美化网页?问题二怎样用CSS美化网页?带着问题去学习,效果更好!

网页美化:从建房到装修CSS样式HTML语言搭建房屋的结构装修房屋美化外观搭建房屋的结构装修房屋美化外观先建结构,再搞装修!

18.1用HTML代码美化网页设置背景ftut:!tanfa(ntena(fool,xt)pacme))dffat)使用bgcolor属性2设置字号ftut::tap(nntena(foul,xt)p==cme))dfftanv)使用size属性3设置字体fcut:C(nntena(foul,)pasc=t))dff==d=a)使用face属性HTML美化:简单直接,但比较繁琐!

HTML美化代码示例blog设置文字大小设置背景颜色

学习活动1-打开网页打开上一课完成的科技节项目网页=尝试美化使用HTML标签设置背景、字号、字体三交流讨论这种方式是否便捷?美化效果好不好?动手试试,亲身体验!

HTML美化的特点缺点优点操作烦琐简单直观美化效果有限适合初学者每个元素都要单独设置简单但繁琐,需要更高效的工具!

18.2用CSS美化网页HTML=建筑师CSS=装潢设计师搭建网页结构美化网页外观CSS可以描述网页的外观和格式,控制颜色、字体、宽度、高度等专业分工,各司其职!

CSS的基本语法选择器声明指向需要改变样式的网页元素属性:值;属性:值;要改变的样式属性属性的具体数值每条声明以分号结束,所有声明用大括号括起来选择器+声明,语法简单清晰!

CSS的使用位置网页内的CSS放在style之间

学习活动2步骋?了解规则观看CSS相关资料,了解书写规则和常用指令尝试美化第骎?用CSS对网页文本、标题、背景进行美化保存浏览交流?得第骋三保存网页文件,重讨论使用CSS美新浏览查看效果化??的?得循序渐进,逐步掌握CSS!

HTMLvsCSS对比HTML美化CSS美化x每个元素单独设置批量设置同类元素×代码重复冗余代码简洁清晰x维护困难维护?便简单直观美化效果丰富CSS更高效,推荐使用!

CSS美化示例HTML

选择器的对应关系h1选择器指向需要改变样式的??元素p标题段落类名+.title选择器精准定位,样式应用准确!Theounontusepoukutthantheprocassgrethiningbediandtingsthecreestocoutettourspeandnightbyticedalshinininandruitingotazingraticicalscondrapovitices

美化?法选择指南简单场景使用HTML即可只有少量元素需要美化复杂场景使用CSS更高效多个元素需要统?样式快速上?借助AI工具辅助时间紧张,不熟悉语法根据具体需求选择合适的方法,提高效率灵活选择,事半功倍!

课堂?结使?标签属性HTML美化设置背景、字号、字体适合简单场景HTML美化选择器+声明??美化?法CSS美化批量设置样式推荐使?CSS美化快速美化AI辅助适合新?掌握多种方法,应对不同需求!