《第十三课 使用CSS样式美化网页》参考课件.pptx

教科版八上第十三课使用CSS样式美化网页

目录创建CSS样式应用CSS样式图片的CSS样式

创建CSS样式

启动软件：菜单“站点—新建站点”，输入站点名“走进蝴蝶”，服务器技术：否文件存储位置：桌面的文件夹“hudie”，是否连接远程服务器：无。预备工作：创建站点

一星任务：制作“蝴蝶公园与博物馆”网页打开网站中的网页“gongyuan.html”打开“CSS样式”面板一、创建CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页。新建CSS规则：选择器类型：类；名称：Font30；定义在：新建样式表文件。一、创建CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页。4.保存样式表文件：文件名为style一、创建CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页定义Font30样式的类型：字体：宋体；大小：26像素；粗细：粗体；样式：正常；颜色：#FF9900一、创建CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页。新建CSS样式Font31：选择器类型：类定义在：style.css一、创建CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页。定义Font31样式的类型：字体：新宋体；大小：20像素；粗细：正常；样式：正常；颜色：#313131；行高：27像素；定义Font31样式的区块；文本对齐：左对齐；文字缩进：40像素；一、创建CSS样式

应用CSS样式应用CSS样式

一星任务：制作“蝴蝶公园与博物馆”网页。标题选择样式“Font30”正文内容选择“Font31”四个标题和正文内容都要应用样式。保存网页文件：“文件”—“保存”二、应用CSS样式

图片的CSS样式图片的CSS样式

二星任务：制作“蝴蝶诗词”网页打开网站中的网页“shici.html”新建CSS规则：选择器类型：类；名称：image01；定义在：style.css中三、图片的CSS样式

二星任务：制作“蝴蝶诗词”网页设置分类中的方框：浮动：左对齐；右：20像素；左：10像素三、图片的CSS样式

二星任务：制作“蝴蝶诗词”网页应用CSS样式：3张图像都应用图片样式类为“image01”三、图片的CSS样式

三星任务：美化“蝴蝶诗词”网页（加分）有能力的同学，调整“蝴蝶诗词”网页中的文字样式，美化网页提升拓展