融媒体运营实战（微课版）PPT全套完整教学课件.ppt

7.1.3　任务知识：CSS设计器面板及样式 9．文本属性 “文本”选项组用于控制网页中文字的字体、字号、颜色、行距、首行缩进、对齐方式、文本阴影和列表属性等。 7.1.3　任务知识：CSS设计器面板及样式 10．边框属性 “边框”选项组用于控制块元素的边框粗细、样式、颜色及圆角。 7.1.3　任务知识：CSS设计器面板及样式 11．背景属性 “背景”选项组用于在网页元素后加入背景图像或背景颜色。 7.1.4　任务实施 1 2 3 4 7.1.5　扩展实践：制作电商网页 使用“CSS设计器”面板，设置文字的大小、颜色及行距的显示效果。 效果图 任务7.2 制作足球运动网页 任务引入 设计理念 任务知识 任务实施 扩展实践 7.2.1 任务引入 Football是一个汇集各类足球咨询的视频媒体平台，涵盖丰富的内容同时为足球爱好者带来极致的观看体验；平台集合了多个赛事及影视资源，为观众提供最新、最热的高清在线视频。网页设计要求能够体现出足球网站的特点和丰富多元的资源特色。 7.2.2　设计理念 在网页设计和制作过程中，使用绿色作为网页背景，呼应主题的同时，很好地衬托出前方的图形与文字内容；建筑色彩线条的运用，使其充满空间感和韵律感，为页面增添了趣味性；时尚新潮的页面设计体现出了平台的多元化，让人眼前一亮。 效果图 7.2.3　任务知识：CSS过渡效果面板 1．“CSS过渡效果”面板 CSS的过渡效果允许CSS属性值在一定时间区间内（设置的）平滑地过渡，营造出渐变的效果。鼠标单击、鼠标指针经过或对元素进行任何改变时都可以设置触发CSS过渡效果。 在“CSS过渡效果”面板中可以新建、删除和编辑CSS过渡效果。 “CSS过渡效果”面板 7.2.3　任务知识：CSS过渡效果面板 2．创建CSS过渡效果 在创建CSS过渡效果时，需要为元素指定过渡效果类。如果在创建效果类之前已选择元素，则过渡效果类会自动应用于选定的元素。 新建或打开一个文档。选择“窗口 > CSS过渡效果”命令，弹出“CSS过渡效果”面板。单击“新建过渡效果”按钮 ，弹出“新建过渡效果”对话框。 “新建过渡效果”对话框 7.2.4　任务实施 1 2 3 4 7.2.5　扩展实践：制作鲜花速递网页 使用“CSS过渡效果”面板，为文字添加阴影效果。 效果图 任务7.3 项目演练：制作布艺沙发网页 任务引入 设计理念 7.3.1 任务引入 “Easy Life”是一家家具用品企业，销售主要包括沙发/座椅系列、卧室系列、厨房用具、办公用品、灯具照明、儿童产品等多个系列产品。现平台分化出新的衍生系列“布艺沙发”，要为其设计制作单独的网站页面，设计要求能够体现出产品特色及品牌特点。 7.3.2　设计理念 在网页设计和制作过程中，采用淡雅的实景照片作为广告区背景，通过优美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，符合产品的特色；图文的合理搭配，增添了画面的美感，与宣传的主题相呼应；整个设计简洁直观，让浏览者一目了然。 效果图 本章简介： 网站是由多个整齐、规范、流畅的网页组成的。为了保持站点中网页风格的统一，需要在每个网页中制作一些相同的内容，如相同栏目下的导航条、各类图标等，因此网站制作者需要花费大量的时间和精力用在重复性的工作上。为了减轻网页制作者的工作量，提高他们的工作效率，将他们从大量重复性工作中解脱出来，Dreamweaver CC 2019提供了模板和库功能。 项目8 了解固定页面布局—模板和库 学习引导 ? 知识目标 能力目标 情感目标 学习目标 1、了解资源面板的使用方法。 2、了解模板的创建及编辑。 1、熟练掌握模板的使用方法。 2、掌握库文件的使用方法。 培养对网页共享区域的编辑方法。 实训项目 1、制作慕斯蛋糕店网页 2、制作鲜果批发网页 任务8.1 制作慕斯蛋糕店网页 任务引入 设计理念 任务知识 任务实施 扩展实践 8.1.1 任务引入 Mousee蛋糕店是一家选用全国优质原料，拥有多家店面的直营店。店内提供多种口味的慕斯蛋糕，包括芒果慕斯、草莓慕斯、奇异果慕斯、黄桃慕斯等，店铺提供庆典蛋糕预定及配送等服务。现为了更好的为客户提供服务，需设计制作线上网页，网页设计要求表现出店铺的特点及魅力。 8.1.2　设计理念 在网页设计和制作过程上，页面采用浅色