单元4艺术休闲散文课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,WEB前端开发实用案例教程,第四单元艺术休闲散文页面,Axure交互效果与图像在网页中的应用,WEB前端开发实用案例教程,1,图像在网页设计中具有重要作用,可以让网页变得生动活泼,大大,提升浏览者查看网页的兴趣。学习在网页中插入图像,先用Aue进行,页面的原型设计,再进行使用S样式属性设置图像效果和网页元素的,方法使用。,教学目标,掌握原型设计用 Axure设计页面能够真实还原网页,掌握Aure链接行为制作交互效果,打开链接和关闭窗口,掌握根据原型设计实现网页的HTML标签,在网页中插入图像,掌握修饰圉像的S样式属性,能够制作囹文混排页面,图像在网页设计中具有重要作用,可以让网页变得生动活泼,大大,2,日录页/Contents,01任务1散文集设置图文混排效果,任务2童话故事设置网页背景元素,日录页/Contents,3,知识储备,知识储备,4,任务1散文集一设置图文混排效果,【知识储备】1设置图像元素大小,在CSs并式属性中,height(高度)和wdth(宽度)两个属性来设置图像及块,元素类对象的大小。在设置文字大小单位,常用的有%(百分比)和pX(像素)。其,中,%(百分比)是个相对单位。pX(像素)作为单位时,图像的大小将保持固定,2.设置图像和其他元素边框,在CS样式属性中,用于设置图像和其他元素边框的属性主要有3个:边框样式,边框宽度和边框频色。分别为:border-style,border-width border-color.,其中,border-style属性的不同属性值含义:none表示无边框;dotted表示点线,dashed表示虚线;soid表示实线;hidden表示隐藏边框,l不支持;double表,双直线;goe表示山型线;ridge表示凸型线。,任务1散文集一设置图文混排效果,5,任务1散文集一设置图文混排效果,【知识储备】,Bode边框设置的样式,border-top表示上边框,border-bottom表示下边框,border-let表示左边框,border-right表示右边框,4个边框可分别设置样式值、宽度值、色值,例如:border-top-styl,border-top-Width,border-top-color:,也可将属性值用空格分开写,份如:border:5 px double#fo0f表示将边框,粗细设置为5像素并设置成双线、粉红色,任务1散文集一设置图文混排效果,6,任务1散文集一设置图文混排效果,【知识储备】,3.设置图像图文混排,使用CSS样式属性为图像设置左浮动或右浮动属性来实现,图像在文字右边的设置方法是:float:right,图像在文字左边的设置方法是:float left,平,任务1散文集一设置图文混排效果,7,02素材收集,创建站点,用 Dreamweaver Cs制作网页,(实例图片文字内容见本章素材文件夹,实例素材:第四单元、“文字tt、Images,果文件:第四单元 index html、1htm,02素材收集,8,03任务实施,03任务实施,9,任务1散文集设置图文混排效果,【任务实施】,1.用 Xuren链接行为制作交互效果,用来给元件文字添加链接的功能,只有在点击文字时可以打开链接的内容,而点击,元件其它部分无效。,可支持的元件有:形状、图片、文本、表格、菜单。,方法1:具体的操作为,在文本编辑的状态下,选中全部或部分文本,点击快捷功,能区或者样式中的链接图标,进入如图41所示的链接编辑页面,B1F目三圆,国号贴气号,图,以简入文本变(+5+,元性与样,NerOl,BA=圆,图4-1链接编辑,任务1散文集设置图文混排效果,10,单元4艺术休闲散文课件,11,单元4艺术休闲散文课件,12,单元4艺术休闲散文课件,13,单元4艺术休闲散文课件,14,单元4艺术休闲散文课件,15,单元4艺术休闲散文课件,16,单元4艺术休闲散文课件,17,单元4艺术休闲散文课件,18,单元4艺术休闲散文课件,19,单元4艺术休闲散文课件,20,单元4艺术休闲散文课件,21,单元4艺术休闲散文课件,22,单元4艺术休闲散文课件,23,单元4艺术休闲散文课件,24,单元4艺术休闲散文课件,25,单元4艺术休闲散文课件,26,单元4艺术休闲散文课件,27,单元4艺术休闲散文课件,28,单元4艺术休闲散文课件,29,单元4艺术休闲散文课件,30,单元4艺术休闲散文课件,31,单元4艺术休闲散文课件,32,