《（中职）Web前端设计基础 项目七-3电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目七-3电子课件.pptx（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF正版可修改PPT（中职）Web前端设计基础 项目七-3电子课件CSS 3图文混排项目七授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施图文混排；图片特效制作。图文混排通过此项目的学习，学习到CSS 3的文本、段落、图片的属性设置，结合这些知识制作一个图文混排的实例。图文混排bodyfont-family:微软雅黑,黑体;font-size:14px;divborder:2px red solid;padding:10px;#img01float:right;text-align:center;#img01
2、 imgwidth:250px;设置了ID为“img01”的div块中img标签宽度为250像素（#img01 imgwidth:250px;）。设置了ID为“img01”的div块向右浮动（float:right;）、居中对齐（text-align:center;），实现了文字和图片的环绕效果。设置了图片的边框为2像素的红色实线（border:2px red solid;）、四个方向的内边距清除10像素（padding:10px;）。图文混排启动Sublime程序，新建并保存文件名称为7-10.html。第一步第二步Head标签内的代码输入如下：内嵌式Css样式部分。设置了页面字体为微软雅黑
3、或黑体（font-family:微软雅黑,黑体;）、文字大小14像素（font-size:14px;）。图文混排第三步body标签内的代码输入如下：CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。右边的图片说明了盒子模型(Box Model)：盒子模型不同部分的说明：Margin(外边距)-清除边框外的区域，外边距是透明的。Border(边框)-围绕在内边距和内容外
4、的边框。Padding(内边距)-清除内容周围的区域，内边距是透明的。Content(内容)-盒子的内容，显示文本和图像。元素的宽度和高度最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距使用了标题标签h2并居中显示标题。设置了段落首行缩进28像素。将图片和文字放置在div块中。使用了无序列表。使用了自定义列表。图文混排再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步图片特效制作图片在网页设计中
5、越来越被重视，利用CSS属性可以制作出绚丽的图片特效，满足客户的视觉体验，此项目实施就是制作一个图片特效实例。body margin:30px;background-color:#CCC;.photowidth:290px;padding:10px;margin:10px;border:1px solid#BFBFBF;background-color:#FFF;box-shadow:10px 10px 10px#999999;/*图片阴影的设置*/.r_leftfloat:left;transform:rotate(8deg);/*图片向右倾倒*/imgwidth:290px;height:
6、215px;.r_right float:left;transform:rotate(-8deg);/*图片向左倾倒*/图片特效制作用Sublime编辑器新建并保存文件7-11.html。第一步第二步Head标签内的CSS代码输入如下：内嵌式Css样式部分，主要实现了图片阴影和div块的旋转效果。设置了body元素的背景颜色为灰色（background-color:#CCC;）、上下左右的外边距为30像素（margin:30px;）。设置了类名为“photo”的div块的宽度为290像素、内边距为10像素、外边距为10像素、边框为1像素的深灰色实线、背景颜色为白色以及设置了为水平右移10像素、
7、垂直下移10像素、模糊距离为10像素深灰色的阴影。分别设置了图片向左、向右的倾斜。第20、25行定义了类名为“r_left”和“r_right”的div块向左浮动。第21、26行定义了两个div块分别向右、向左旋转了8度。当margin的属性值为一个值是，表示上下左右四个边的值都相同；当margin的属性值为两个值时，第一个值表示上下外边距的值，第二个值表示左右外边距的值；当margin的属性值为三个值时，第一个值表示上外边距的值，第二个值表示左右外边距的值，第三个值表示下外边距的值；当margin的属性值为四个值时，第一个值表示上外边距的值，第二个值表示右外边距的值，第三个值表示下外边距的值
8、，第四个值表示左外边距的值。图片特效制作第三步body标签内的HTML代码输入如下：唯有牡丹真国色，花开时节动京城。我像只鱼儿在你的荷塘，只为和你守候那皎白月光。创建了两个div块，在div块中分别放置了一张图片和一段文字。图片特效制作再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展在上面的项目实施中，学习制作了图文混排和CSS图片特效两个实例，掌握了图片、文字排版的技巧，下面制作文字、图片列表排列的实例，来巩固提高本项目所学知识。四 项目拓展启动Sublime程序，新建并保存文件名称为7-12.html。第一步第二步Head标签内的
9、CSS代码输入如下：bodybackground-color:#ccc;ulmargin:0 auto;width:600px;overflow:hidden;list-style:none;lifloat:left;padding:4px 8px;width:120px;background-color:#fff;margin:2px 2px;imgdisplay:block;width:120px;overflow:hidden;设置了body元素的背景颜色为灰色。设置了无序列表的上下外边距为0像素及左右自动、宽度为600像素、溢出隐藏、列表样式为无。设置了li标签向左浮动、上下内边距为4
10、像素及左右内边距为8像素、宽度为120像素、背景颜色为白色、上下外边距为2像素及左右外边距为2像素。设置了img为块元素、宽度为120像素、溢出隐藏。CSS部分主要完成了无序列表ul、列表项li、图片img、行内标签span和超链接标签a及img标签的hover的样式。使用无序列表的列表项li标签实现图片和文字的行内排列，在限定ul宽度的情况下，使用左浮动的方法让多个li标签排成两行。四 项目拓展第二步atext-decoration:none;color:#666;a:hovercolor:#f60;img:hoveropacity:0.5;spandisplay:block;width:1
11、00%;height:100%;line-height:16px;text-align:center;margin:10px auto;font-size:12px;设置了a标签链接下划线为无、文本颜色为#666。设置了当鼠标移动到img标签上的时候，img标签的不透明度为0.5。设置了span标签为块元素、宽度为100%、高度为100%、行高为16像素、文本居中对齐、上下外边距为10像素及左右自动、文字大小为12像素。设置了当鼠标移动到a标签上的时候，a标签的文本颜色为#f60。四 项目拓展第三步2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底
12、衫毛衣2017秋冬长袖针织高领打底衫毛衣body标签内的HTML代码输入如下：使用无序列表的列表项li标签实现图片和文字的行内排列。在列表项li中创建了图片和文本的超链接。四 项目拓展第三步2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了图文混排、图片特效制作和图片、文字列表排列三个案例，学习了使用CSS3对文本、段落和网页图片的美化方法，以及图文混排效果
13、的实现方法。五 项目小结本项目主要知识点总结如表所示。CSS 3图文混排知识点总结知识点知识点属性属性说明说明美美化化文文本本设置文本字体font-family定义文本的字体类型设置文本大小font-size定义文本的大小设置文本的粗细font-weight定义文本的粗细程度设置文本颜色color定义文本的颜色设置文本样式font-style定义文本的样式设置文本阴影效果 text-shadow定义文字的阴影效果设置文本溢出效果 text-overflow定义当文本溢出时是否显示省略标记设置文本控制换行 word-wrap控制文本换行设置在线字体font-face font-family:;s
14、rc:;font-weight:;font-style:;通过CSS3可以使用任意字体，将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。设置旋转特效transform对元素进行旋转、缩放、移动或倾斜五 项目小结本项目主要知识点总结如表所示。CSS 3图文混排知识点总结知识点知识点属性属性说明说明美美化化段段落落设置词间距word-spacing定义增加或者减少词与词之间的间隔设置字间距letter-spacing定义文本之间的距离设置文本修饰效果text-decoration为文本设置多种修饰效果，如下划线、删除线等设置文本的垂直对齐方式vertical-ali
15、gn定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值设置文本的水平对齐方式text-align定义文本的水平对齐方式设置文本大小写转换text-transform根据需要将大写字母转换为小写字母，或将小写字母转换为大写字母设置文本的行高line-height定义文本的行高设置文本的缩进text-indent定义文本块中的首行缩进设置文本的空白处理white-space定义对字符串或文本间空白的处理方式设置文本的反排unicode-bidi和direction解决文本反排的效果美美化化网网页页图图片片图片尺寸width和height、max-width和max-h
16、eight设置图片的宽度和高度、设置图片的宽度最大值和高度最大值设置图片的对齐方式text-align、vertical-align定义图文对齐方式图图文文混混排排设置元素浮动float设置元素浮动设置元素的内边距padding设置元素的内边距六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise7.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成项目实施中图文混排的实例操作。2.上机完成项目实施中图片特效的实例操作。3.上机完成项目拓展中图片、文字列表排列的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End