CSS样式的创建和运用方法讲义课件

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,DreamwaverCS4,CSS,样式,链接,框架网页,多媒体,1,DreamwaverCS4CSS样式链接框架网页多媒体,回顾,创建本地站点和创建网页,创建表格和编辑表格,网页中添加文本,网页中添加图片,创建网页存放的位置,表格单元格大小调整,注意：先将所有内容,(,文字、图片,),插入表格中，如果有需要再调整单元格,水平线颜色设置,2,回顾创建本地站点和创建网页2,教学内容,掌握,CSS,样式的创建和运用方法,掌握各种链接的创建方法,掌握框架网页的制作方法,掌握利用框架网页来组织由多个网页组成的画面,掌握框架网页中链接设置,网页中多媒体设置与应用,3,教学内容掌握CSS样式的创建和运用方法3,管理站点,打开站点,打开“站点”菜单，选择“管理站点”中“新建,/,站点”，在“本地根文件夹”中选择站点,删除站点,通过“文件,/,站点”，选择“管理站点”中选择要删除的站点，点击“删除”,4,管理站点打开站点4,CSS,样式的概念,CSS,是一种用来进行网页风格设计的样式表技术，使用,CSS,样式可以对页面的布局、字体、颜色、背景和其他图文效果实现更加精确地控制，并且同一个样式可以应用于多个不同的对象，提高制作效率。,CSS,样式是,Cascading Style Sheets(,层叠样式单,),的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。,要管理一个系统的网站，使用,CSS,样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，,CSS,样式可以实现多种不能用,HTML,样式实现的功能。,5,CSS样式的概念CSS是一种用来进行网页风格设计的样式表技术,CSS,样式的功能,CSS,是用来控制一个网页文档中的某文本区域外观的一组格式属性。,使用,CSS,能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。,CSS,样式表是对,HTML,语法的一次革新，它位于文档的,区，作用范围由,CLASS,或其他任何符合,CSS,规范的文本来设置。,对于其他现有的文档，只要其中的,CSS,样式符合规范，,Dreamweaver,就能识别它们。,6,CSS样式的功能CSS是用来控制一个网页文档中的某文本区域外,新建,CSS,样式方法,通过,CSS,样式面板,点击“新建,CSS,规则”按钮，打开“新建,CSS,规则”对话框,通过属性面板,点击“,CSS,”按钮，“目标规则”选择“新,CSS,规则”，点击“编辑规则”按钮,选择“格式,/CSS,样式,/,新建”菜单命令,7,新建CSS样式方法通过CSS样式面板7,新建,CSS,规则,设置选择器类型,选择器名称,(,以点开始,),规则定义范围,8,新建CSS规则设置选择器类型8,CSS,规则定义,CSS,规则分类,类型：主要用于设置文字格式,背景：主要用于设置文字、表格等背景,方框：主要用于设置图形、表格等大小,边框：主要用于设置表格边框,列表：主要用于设置项目符号,定位：确定对象位置,扩展：主要用于设置特殊光标,9,CSS规则定义CSS规则分类9,应用,CSS,样式规则,新建,CSS,规则样式后，就可以利用该样式快速设置页面上的网页元素样式，使网站具有统一的风格了。,应用,CSS,样式规则方法,在,“,属性,”,面板进行设定,通过快捷菜单设定,10,应用CSS样式规则新建CSS规则样式后，就可以利用该样式快速,编辑,CSS,样式,对于创建的,CSS,样式，可以进行编辑操作，主要包括修改,CSS,样式属性、设置,CSS,样式首选参数以及链接和导入,CSS,样式等。,编辑,CSS,样式规则方法,在,“,属性,”,面板中进行修改,在“,CSS,样式”面板中进行修改,11,编辑CSS样式对于创建的CSS样式，可以进行编辑操作，主要包,示例,1_CSS,规则定义与应用,打开 “,tk.html”,网页,在网页顶端插入,1,行,4,列表格，表格宽,450,像素，边框为,0,，居中对齐,在表格中插入图片,(,图片在,SC2,文件夹中,),，图片居中对齐,创建,CSS,规则“,.ys1”(,边框,),样式：,groove,；宽度：,medium,；颜色：,#ccffcc,将该,CSS,规则运用到表格中的图片上,创建,CSS,规则“,.ys2”(,类型,),字体：华文新魏；大小：,36,像素；粗体；颜色：,#003300,；居中对齐,将该,CSS,规则运用到正文标题上,创建,CSS,规则“,.ys3”(,列表,),项目符号图像：,zp.gif(SC2,文件夹中,),；位置：外,将该,CSS,规则运用到“成员行为”中编号上,12,示例1_CSS规则定义与应用打开 “tk.html”网页12,示例,1_,样张,13,示例1_样张13,超链接的基础知识,超链接是网页中最重要的组成部分。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送,E-mail,等。,在,Dreamweaver CS4,中，可以将文档中的任何文字及任意位置的图片设置为超链接。,14,超链接的基础知识超链接是网页中最重要的组成部分。超链接的应用,创建超链接的常用方法,在,Dreamweaver CS4,中，可以随时随地在所需的位置创建各种超级链接，并且可以通过多种方法来创建超链接,可以在,“,属性,”,面板中创建,使用“插入,”,菜单创建,使用,“,常用,”,工具栏中“超级链接,”,来创建,超级链接的分类,文本超链接,图像超链接,锚记链接,E-mail,链接,图形热点链接,15,创建超链接的常用方法在Dreamweaver CS4中，可以,创建文本和图像链接,创建文本和图像链接方法,选择需要创建链接的对象,按右键选择“创建链接,”(,或者在属性面板上设置,),打开“选择文件,”,对话框，选择链接对象,注意：链接对象可以是网页、应用程序、各种媒体,16,创建文本和图像链接创建文本和图像链接方法16,创建电子邮件链接,创建电子邮件的方法,选择需要创建电子邮件链接的对象,打开“插入,”,菜单，选择 “电子邮件链接,”,打开“电子邮件链接,”,对话框，输入邮件地址,或者在,“,属性,”,的“链接,”,文本框中输入“,mailto :,邮件地址”,17,创建电子邮件链接创建电子邮件的方法17,示例,2_,创建链接,打开站点,Mysite,，在网页,main.html,中创建链接,建立下部导航栏中“隐私条例”的文本链接，链接到,tk.html,网页,建立下部导航栏中“联系我们”的文本链接，链接到自己的邮箱,18,示例2_创建链接打开站点Mysite，在网页main.htm,锚记设置,确定插入点位置,命名锚记,打开“插入,”,菜单，选择“命名锚记,”,打开“命名锚记”对话框，输入“,*,”,创建锚记链接,选择需要创建锚记链接的对象,在,“,属性,”,面板，“链接,”,栏输入“,#*”,19,锚记设置确定插入点位置19,示例,3_,创建锚记链接,打开网页“,tk.html”,在标题前插入锚记，名称为“,fanhui”,在网页末尾文字“返回页首”，创建锚记链接,20,示例3_创建锚记链接打开网页“tk.html”20,图形热点链接,图像地图也是一种超链接，适用于较大的图像。,创建图像地图，可以在图像上创建不规则区域的链接或某个部分区域的链接。,图像地图是将图片分为几个区域，这些区域又称为热点，单击不同的热点可以打开不同的链接，这样的链接就称为图形热点链接。,21,图形热点链接图像地图也是一种超链接，适用于较大的图像。21,创建图像的热点链接,创建图像某个区域的超级链接，使之能链接到相应对象,选中网页中的图像地图,点击“属性”面板上的“热点工具”，在图像上确定“热点”区域,指定链接对象,(,网页、图像等,),22,创建图像的热点链接创建图像某个区域的超级链接，使之能链接到相,示例,4_,创建热点链接,创建,main.html,网页图片中文字“快速网上冲印服务”的热点链接，链接到“,wscy.html”,网页,23,示例4_创建热点链接创建main.html网页图片中文字“快,框架和框架集的概念,框架的概念,框架把浏览器窗口分成几个部分,每个部分显示不同的网页,使浏览器窗口同时包含多个网页,框架集的概念,框架集是,HTML,文件，定义一组框架的布局和属性,包括框架的数目、大小、位置和每个框架中初始显示页面的,URL,框架集不包含要在浏览器中显示的,HTML,内容,24,框架和框架集的概念框架的概念24,创建框架网页,创建框架网页步骤,打开“文件,”,菜单，选择“新建,”,打开“新建文档,”,对话框,选择“示例中的页,”,在“示例文件夹,”,中选择“框架页,”,选择框架类型,25,创建框架网页创建框架网页步骤25,保存框架网页,选择“文件,/,保存全部”菜单命令，依次保存框架集和框架,打开“保存为”对话框,按提示依次保存框架集和每个框架,框架集和框架都是以网页形式保存的,框架集,框架,26,保存框架网页选择“文件/保存全部”菜单命令，依次保存框架集和,示例,5_,创建和保存框架网页,在站点中新建框架网页，框架集样式“上方固定”,在上方框架网页中输入文字“框架网页,创建示例,”,在下方框架网页中插入图片“,logo.jpg,”,依次保存框架集和每个框架,框架集保存为,kjj.html,上方框架网页保存为,kj-top.html,下方框架网页保存为,kj-under.html,27,示例5_创建和保存框架网页在站点中新建框架网页，框架集样式“,框架中打开网页,将插入点放置在框架网页中,打开“文件”菜单，选择“在框架中打开”,打开“选择HTML文件”对话框,选择要在该框架中打开的网页,28,框架中打开网页将插入点放置在框架网页中28,示例,6_,框架中打开网页,打开“,Mysite”,站点,在站点中新建框架网页，框架集样式“上方固定”,在上方框架中打开网页“,Top.html”,网页,在下方框架中打开,Main.html,网页,保存框架集为“,Index.html”,29,示例6_框架中打开网页打开“Mysite”站点29,框架的编辑,通过“框架”面板选择框架集和框架,“窗口”菜单,/“,框架”，打开框架面板,鼠标点击选择,调整框架大小,通过鼠标拖动框架边框,在“框架”属性面板上可以设置精确设置,注意：,在编辑框架时，如果框架边框不可见,选择“查看,/,可视化助理,/,框架边框”，使框架边框可见,30,框架的编辑通过“框架”面板选择框架集和框架30,框架中的链接设置,框架中的链接,在一个框架中使用链接在另一个框架中打开网页,链接设置方法,选择文本或对象,在“属性”面板的“链接”中，点击文件夹图标,打开“选择文件”对话框，选择链接到的文件,在“属性”面板的“目标”下拉菜单中，选择显示方式,注意：框架中的链接必须在框架集中设置，否则无法选择显示方式,31,框架中的链接设置框架中的链接31,示例,7_,框架中的链接设置,设置上方框架中的链接,设置“首页”链接到“,main.html”,“,网上冲印”链接到“,wscy.html”,“,数码商城” 链接到“,smsc.html”,设置链接网页显示方式,在“属性”面板的“目标”下拉菜单中，选择“,mainFrame”,显示方式,32,示例7_框架中的链接设置设置上方框架中的链接32,网页中的媒体,插入媒体类型,插入,FLASH,文件,插入插件,(,音频、视频,),插入,ActiveX,控件,插入媒体方法,选择“插入,/,媒体”菜单命令,或,(,选择“常用”工具栏上“媒体”按钮,),33,网页中的媒体插入媒体类型33,33,在网页中插入,FLASH,动画,Flash,动画是网页上最流行的动画格式。,在,Dreamweaver CS4,中，,Flash,动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中并能制作较好的动画效果，同时使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。,34,在网页中插入FLASH动画Flash动画是网页上最流行的动画,34,插入,FLASH,动画方法,将光标移至所需插入,Flash,动画的位置,打开“插入,”,菜单，选择“媒体,”,中的“,SWF”,打开“选择文件对话框,选择所需插入的,Flash,动画,也可以通过“常用,”,工具栏中的“媒体”中“,SWF”,插入,Flash,动画,35,插入FLASH动画方法将光标移至所需插入Flash动画的位置,35,设置,FLASH,动画属性,在网页文档中插入,Flash,动画文件后，选中,Flash,动画,在,“,属性,”,面板中设置属性,36,设置FLASH动画属性在网页文档中插入Flash动画文件后，,36,网页中的声音格式,在,Dreamweaver CS4,中，可以向网页文档添加多种不同类型的声音文件和格式，例如,.wav,、,.midi,和,.mp3,。,根据要添加声音的目的、文件大小、声音品质等要素，来确定插入哪种格式和方法。,37,网页中的声音格式在Dreamweaver CS4中，可以向网,37,插入声音文件方法,将光标移至所需插入声音文件的位置,打开“插入,”,菜单，选择“媒体,”,中的“插件,”,打开“选择文件对话框,选择所需插入的声音文件,也可以通过“常用,”,工具栏中的“媒体”中“插件,”,插入声音文件,38,插入声音文件方法将光标移至所需插入声音文件的位置38,38,设置声音属性,在网页文档中插入声音文件后，选中插件符号,在,“,属性,”,面板中设置音频属性,通过“编辑标签”设置音频属性,选择插件符号，按右键，选择“编辑标签”，打开“标签编辑器”对话框,可以设置音频“自动播放”、“循环”、“隐藏”,39,设置声音属性在网页文档中插入声音文件后，选中插件符号39,39,插入视频文件方法,将光标移至所需插入视频文件的位置,打开“插入,”,菜单，选择“媒体,”,中的“插件,”,打开“选择文件对话框,选择所需插入的文件,也可以通过“常用,”,工具栏中的“媒体”中“插件,”,插入视频文件,40,插入视频文件方法将光标移至所需插入视频文件的位置40,40,设置视频属性,在网页文档中插入视频文件后，选中插件符号,在,“,属性,”,面板中设置属性,41,设置视频属性在网页文档中插入视频文件后，选中插件符号41,41,示例,8_,网页中添加多媒体对象,在,main.html,网页的右下方插入视屏,film.wmv(,文件在,sc2,文件夹中,),，宽,170,，高,200,先将该单元格拆分成,2,行,在,smsc.html,网页中插入,Flash,文件，,flash.swf(,文件在,sc2,文件夹中,),，宽,585,，高,140,在,smsc.html,网页中插入音频文件，,(,文件在,sc2,文件夹中任选,),，隐藏插件符号，能循环自动播放。,42,示例8_网页中添加多媒体对象在main.html网页的右下方,42,课堂练习,完成示例,1,8,在完成示例,1,8,基础上，完成下列操作,设置,main.html,网页图片的热点链接，链接到,SC2,文件夹中,Flash.swf,设置,wscy.html,网页图片中文字“冲印我的相册”的图片热点链接，链接到,cyxc.html,网页属性设置,将框架网页,index.html,标题设置为“,E,派网上冲印店”,将,top.html,网页中“链接颜色”、“已访问过的链接颜色”均设为,#FFFFFF,，链接始终无下划线,43,课堂练习完成示例1843,课后练习,实验指导,P187,：实验,28,，范例,(4),、,(5),、,(6),P192,：,实验,29,，范例,(4),、,(5),44,课后练习实验指导44,下周教学内容,网页中的特殊效果,表单,45,下周教学内容网页中的特殊效果45,1,、想要体面生活，又觉得打拼辛苦；想要健康身体，又无法坚持运动。人最失败的，莫过于对自己不负责任，连答应自己的事都办不到，又何必抱怨这个世界都和你作对？人生的道理很简单，你想要什么，就去付出足够的努力。,2,、时间是最公平的，活一天就拥有,24,小时，差别只是珍惜。你若不相信努力和时光，时光一定第一个辜负你。有梦想就立刻行动，因为现在过的每一天，都是余生中最年轻的一天。,3,、无论正在经历什么，都请不要轻言放弃，因为从来没有一种坚持会被辜负。谁的人生不是荆棘前行，生活从来不会一蹴而就，也不会永远安稳，只要努力，就能做独一无二平凡可贵的自己。,4,、努力本就是年轻人应有的状态，是件充实且美好的事，可一旦有了表演的成分，就会显得廉价，努力，不该是为了朋友圈多获得几个赞，不该是每次长篇赘述后的自我感动，它是一件平凡而自然而然的事，最佳的努力不过是：但行好事，莫问前程。愿努力，成就更好的你！,5,、付出努力却没能实现的梦想，爱了很久却没能在一起的人，活得用力却平淡寂寞的青春，遗憾是每一次小的挫折，它磨去最初柔软的心智、让我们懂得累积时间的力量；那些孤独沉寂的时光，让我们学会守候内心的平和与坚定。那些脆弱的不完美，都会在努力和坚持下，改变模样。,6,、人生中总会有一段艰难的路，需要自己独自走完，没人帮助，没人陪伴，不必畏惧，昂头走过去就是了，经历所有的挫折与磨难，你会发现，自己远比想象中要强大得多。多走弯路，才会找到捷径，经历也是人生，修炼一颗强大的内心，做更好的自己！,7,、“一定要成功”这种内在的推动力是我们生命中最神奇最有趣的东西。一个人要做成大事，绝不能缺少这种力量，因为这种力量能够驱动人不停地提高自己的能力。一个人只有先在心里肯定自己，相信自己，才能成就自己！,8,、人生的旅途中，最清晰的脚印，往往印在最泥泞的路上，所以，别畏惧暂时的困顿，即使无人鼓掌，也要全情投入，优雅坚持。真正改变命运的，并不是等来的机遇，而是我们的态度。,9,、这世上没有所谓的天才，也没有不劳而获的回报，你所看到的每个光鲜人物，其背后都付出了令人震惊的努力。请相信，你的潜力还远远没有爆发出来，不要给自己的人生设限，你自以为的极限，只是别人的起点。写给渴望突破瓶颈、实现快速跨越的你。,10,、生活中，有人给予帮助，那是幸运，没人给予帮助，那是命运。我们要学会在幸运青睐自己的时候学会感恩，在命运磨练自己的时候学会坚韧。这既是对自己的尊重，也是对自己的负责。,11,、失败不可怕，可怕的是从来没有努力过，还怡然自得地安慰自己，连一点点的懊悔都被麻木所掩盖下去。不能怕，没什么比自己背叛自己更可怕。,12,、跌倒了，一定要爬起来。不爬起来，别人会看不起你，你自己也会失去机会。在人前微笑，在人后落泪，可这是每个人都要学会的成长。,13,、要相信，这个世界上永远能够依靠的只有你自己。所以，管别人怎么看，坚持自己的坚持，直到坚持不下去为止。,14,、也许你想要的未来在别人眼里不值一提，也许你已经很努力了可还是有人不满意，也许你的理想离你的距离从来没有拉近过,.,但请你继续向前走，因为别人看不到你的努力，你却始终看得见自己。,15,、所有的辉煌和伟大，一定伴随着挫折和跌倒；所有的风光背后，一定都是一串串揉和着泪水和汗水的脚印。,16,、成功的反义词不是失败，而是从未行动。有一天你总会明白，遗憾比失败更让你难以面对。,17,、没有一件事情可以一下子把你打垮，也不会有一件事情可以让你一步登天，慢慢走，慢慢看，生命是一个慢慢累积的过程。,18,、努力也许不等于成功，可是那段追逐梦想的努力，会让你找到一个更好的自己，一个沉默努力充实安静的自己。,19,、你相信梦想，梦想才会相信你。有一种落差是，你配不上自己的野心，也辜负了所受的苦难。,20,、生活不会按你想要的方式进行，它会给你一段时间，让你孤独、迷茫又沉默忧郁。但如果靠这段时间跟自己独处，多看一本书，去做可以做的事，放下过去的人，等你度过低潮，那些独处的时光必定能照亮你的路，也是这些不堪陪你成熟。所以，现在没那么糟，看似生活对你的亏欠，其实都是祝愿。,1、想要体面生活，又觉得打拼辛苦；想要健康身体，又无法坚,46,CSS样式的创建和运用方法讲义课件,47,