CSS样式表和模板 (2).ppt
第8章 CSS样式表和模板,通过本章学习应能够熟练应用CSS和模板来设计网页页面元素的统一格式,本章大纲,8.1 CSS样式8.2 模板,8.1 CSS样式表和模板,8.1.1 CSS样式的概念8.1.2 CSS样式面板8.1.3 创建CSS样式8.1.4 CSS样式的应用8.1.5 CSS样式的编辑8.1.6 链接和导入样式表8.1.7 导出样式表8.1.8 设置CSS的属性8.1.9 Spry构件样式,8.1.1 CSS样式,一、CSS样式1.定义2.CSS样式的类型自定义样式：类（可用于任何HTML元素）HTML标签样式：标签（重新定义HTML元素）特色超级链接样式：复合内容（基于选择的内容）指定HTML元素样式：ID（仅用于一个HT元素）,CSS定义,CSS即(Cascading Style Sheet),层叠样式表或级联样式表，样式就是用来控制一个文档中某一文本区域外观的一组格式属性。层叠样式表则可以用来一次对若干个文档所有的样式进行控制CSS样式使网页中多处对象都采用同样属性，一次设置，多次应用CSS样式表位于文档中head标签之内CSS样式可以对HTML标签的默认格式进行重定义，可以对文本区域进行重定义，对标准文本进行重定义优点：,可以同时将一个样式链接到多个文档当CSS样式被修改后，所有应用该样式的对象会被自动更新,8.1.2 CSS样式面板,1.打开CSS样式面板的方法选择命令“窗口”|“CSS样式”2.CSS样式面板,CSS样式面板,8.1.3 创建CSS样式,仅对当前文档新建CSS样式表文件,创建仅对当前文档的CSS样式,打开“新建Css样式”对话框单击CSS样式面板中的新建按钮选择所建样式的类型类（可用于任何HTML元素）标签（重新定义HTML元素）复合内容（基于选择的内容）ID（仅用于一个HT元素输入或选择样式名称:样式名称.选择样式名称：当类型为标签、高级时选择选择样式定义的存放位置或作用范围:仅对该文档单击”确定”,打开CSS样式定义对话框对话框的设置:详见设置CSS样式属性,特色超级链接名称的函义,1.链接名称的含义a:link未被访问过的链接a:visited访问过的链接a:hover鼠标移上时的链接a:active被点击的链接2.组合样式实例使一个页面中的超级链接具有不同的特色在表格中创建超级链接文本创建链接各状态的特色a:link、a:visited、a:hover、a:active自定义一个CSS的伪类:.，如：.abc，任意设置一项定义组合样式:.a:link等，如：.abc a:link（设置要与a:link等的设置有所区别）选中单元格（一个或多个）应用类,创建CSS样式表文件,打开”新建Css样式”对话框“文本”菜单下的”CSS样式”中的”新建CSS样式”命令单击CSS样式面板中的新建按钮输入或选择样式名称:同前选择所建样式的类型类:用户自定义样式名称,可以在HTML中被调用标签:重新定义HTML各标签(标记)的默认格式高级:用于定义组合样式或具有特殊序列号(ID)的样式,主要用于设置超级链接的特色(颜色)选择样式定义的存放位置或作用范围:新样式表文件单击”确定”,打开保存样式表对话框选择路径，输入样式表文件名，单击“确定”对话框的设置:详见设置CSS的属性,8.1.4 CSS样式的应用,1.样式的应用标签和高级类型的样式:自动应用到相应的网页元素上,比如建立了标签的样式后,网页上所有单元格的文字都自动变为新的格式类自定义样式的应用:选择要应用样式的元素在属性面板的”类”下拉表中选择自定义的类2.已经创建样式文件中样式的应用见8.1.6 链接和导入样式表,编辑或删除CSS样式,编辑选择元素后执行下列操作之一:打开样式定义对话框双击选定的CSS样式名称单击样式面板中的“编辑样式”按钮右击要编辑的CSS样式，在快捷菜单中选择“编辑”命令在对话框中进行设置(同创建)单击“确定”删除:选择CSS样式单击“删除CSS样式”按钮,8.1.6 链接和导入样式表,链接或导入外部样式表文件即是将已创建的外部样式表文件导入到当前文档中,用样式表文件,格式化网页中的指定元素步骤打开”链接外部样式表”对话框:单击“CSS样式面板”右一方的“附加样式表”按钮在“文件/URL”文本框中输入文件的地址和文件名,或单击“浏览”,在磁盘中选择样式表文件在“添加为”处选择“CSS样式表文件”添加到此文档中的方式导入链接确定,8.1.7 导出样式表,导出样式表即从一个网页文档中导出样式创建一个新的CSS样式表文件。步骤：打开“导出样式为CSS文件对话框：执行“文件”|“导出”|“CSS样式”命令（或“文本”|“CSS样式”|“导出”命令）在对话框中输入样式文件的名称单击“保存”按钮,8.1.8 设置CSS的属性,1.类型设置对于文字的格式设置：字体、大小、行高、样式和修饰2.背景设置网页背景的各种设置:重复:不重复、重复、横向重复、纵向重复附件：图像能否跟随网页一起滚动3.区块设置4.方框设置5.边框设置6.列表设置7.定位设置8.扩展功能,区块、方框等设置,1.区块设置：主要对文字的整体效果和段落缩进等进行设置单词、字母间距垂直对齐：对象的对齐方式文本对齐文字缩进：中文首行文字的缩进（字号为9pt，缩进2个字，设置为18pt，12号字，设置为24pt)2.方框设置：主要对图像的大小、水平和垂直方向上的空白，文字环绕等进行设置浮动：环绕效果对象与文边的相对位置清除：对象的边上是否允许出现层填充：对象边框和其中内容间的空白,浏览时的效果边界：对象边框四周的空白区域,边框、列表、定位设置,1.边框设置主要给对象添加边框，设置边框的颜色、粗细、样式等样式：边框为虚线、点划线、实线、双线、槽状、脊状、凹陷、突出等形状宽度、颜色：等同前2.列表设置：对文本前面的项目符号的样式进行设置类型：符号的类型为圆点、圆圈、方块等项目符号图像：在图像文件中设置项目符号样式位置：贴近左侧或向右缩进3.定位对层进行设置(实际操作很少被用到)类型：定位方式为绝对、相对、静态等显示：同层的属性置入：浏览器中的位置剪切:定义层的可见部分,扩展功能,1.分页:目前尚无浏览器支持该功能2.光标:改变鼠标放在该项上时的形状Hand：手Crosshair：交叉十字Text：文本选择符号Wait：漏斗Default：默认Help：默认问号E-resize：向东的箭头Ne-resize：向东北的箭头N-resize：向北的箭头Nw-resize：向西北的箭头S-resize：向西南的箭头Auto：正常鼠标3.过滤器:实现滤镜效果滤镜效果,滤镜效果,1.蒙版滤镜代码:Alpha(Opacity=100,FinishOpacity=0,Style=2)Opacity:不透明的程度，用百分比表示，0100，0完全透明，100完全不透明FinishOpacity：透明渐进的效果，需同时与Opacity一起设置，0100(同上)Style：指定渐进的形状。0没有渐进，1直线渐进，2圆形渐进，3矩形辐射特别提示：滤镜效果只有在浏览器中才能看到效果上边的各参数表达式要用逗号分隔开2.图片波纹,滤镜效果2图片波纹,代码格式：wave(Add=0,Freq=8,LightStrength=10,Phase=0,Strength=6)参数的含义：Add：是否把图片打乱,0打乱，1不打乱Freq：波纹的频率LightStrength：正弦波的光照强度Phase：正弦波开始的偏移量Strength：设置正弦波的幅度,8.1.9 Spry构件中的CSS设置,一、Spry面板样式设置二、菜单栏样式设置,一、Spry构件样式设置,1.限制构件宽度:.CollapsiblePanel、.TabbedPanels、.Accordion的CSS规则选中构件单击”编辑样式”按钮在”定位”选项中设置”宽”参数2.构件中各种背景颜色选中构件双击如下相应CSS规则,修改内容部分背景颜色.CollapsiblePanelcontent、.TabbedPanelscontent、.Accordioncontent.xxxxxxxtab（设置标签标题的背景色）.xxxxxxxHover(鼠标移过时背景颜色),同上3.构件中文本的样式,3.构件中文本的样式,选中要更改的规则在CSS面板的“属性区域中”找到更改的选项.xxxxxxxxcontent打开，在CSS对话框的“类型”中设置,二、SPRY菜单栏样式设置,1.菜单项尺寸设置在“CSS样式”面板中选中：ul.MenuBarHorizontal li(主菜单）ul.MenuBarHorizontal ul li(子菜单）在“属性”区域的“定位”选项中设置width2.子菜单定位在“CSS样式”面板中选中 ul.MenuBarHorizontal ul在“方框”选项卡中设置margin（与主菜单的间距）参数3.菜单栏的背景与文本样式设置,3.菜单栏的背景与文本样式设置,1）鼠标未指向状态在“CSS样式”面板中双击：ul.MenuBarHorizontal a在“类型”与“背景”选项卡中设置参数2）鼠标指向栏目状态在“CSS样式”面板中双击：ul.MenuBarHorizontal a:hover或ul.MenuBarHorizontal a:focus分别在“类型”与“背景”选项卡中设置参数3）上级菜单栏目状态在“CSS样式”面板中分别双击：ul.MenuBarHorizontal a.MenuBarItem-Hover，ul.MenuBarHorizontal a.MenuBarItem-Submenu Hover，ul.MenuBarHorizontal a.MenuBarSub-menu Visible分别在“类型”与“背景”选项卡中设置参数,8.2 模板,模板:模板是用来产生带有固定特征和共同格式的文档模具,是用户进行批量设计网页文档的框架.网页常用的固定组成部分logo：即网站的徽标，这是一个网站的标志，在每个页面最顶部的左上角，标准大小为88px31px；Banner:即页面上的宣传条，放在页面的任意位置Nav Bar:即页面上的导航条，一般在页面的顶部和底部Copyright:即页面上的版权信息，一般在页面的底部 模板文件：文件扩展名.dwt，存放在Templates（自动生成）文件夹中8.2.1 创建模板8.2.2 编辑模板8.2.3 模板的应用,8.2.1 创建模板,1.创建新的空白模板打开“资源面板”：“窗口”|“资源”显示模板窗口：单击“资源面板”左侧的模板按钮单击“新建模板”按钮给模板的重命名2.对已有的模板进行修改打开模板文档:双击已有模板名称在文档窗口中编辑模板3.把现有文档设为模板打开文档执行“文件”|“另存为”命令输入名称，单击“保存”按钮,编辑模板,1.编辑模板网页添加logo、添加导航内容、添加banner、添加版权等2.定义可编辑区域（可重复区域）在创建模板时,要设置每个网页的独立编辑的区域，即在具体网页中可编辑的部分可编辑区域的定义:将光标定位在模板中设为可编辑的区域右击,在快捷菜单中选择”模板”|”新建可编辑区域”还可通过“插入面板”下的“模板”按钮操作在对话框中输入区域的名称3.删除可编辑区域定位光标右击,选择”模板”|”删除模板标记”,可重复区域,可重复生成页面中的某些部分：重复一个表格行等设置重复区域:定位光标，“右击”在弹出式菜单中选择“模板”“新建重复区域”命令编辑：在重复区域插入表格、编辑表格、在每个单元格中插入“可编辑区域”，根据模板新建网页在重复区域的可编辑区域中，插入图片等复制重复区域：单击重复区域的“+”按钮编辑：同上,重复区域的增加,应用模板,1.应用模板1)用模板新建网页打开”资源”面板右击”模板文件”,选择”从模板新建”2)用模板更新已存在的网页打开要套用模板的网页选择”修改”|”模板”|”应用到模板到网页”在对话框中选择模板单击”选定”,在新的对话框中设置,将已有网页中的内容移到相应的可编辑区单击”确定”,更新站点,更新站点:模板是可以进行修改的,为了让修改过的模板,应用到站点中根据该模板创建的网页中,要使用”更新站点”进行操作方法:执行”修改”|”模板”|”更新页面”在对话框中选择更新”网页文件”还是”整个站点”单击”开始”提示:也可以在对修改模板后,对模板文件进行保存,这时会提示,是否更新由该模板创建的网页.,8.3 综合实例,网页文本统一样式的设置网页特色超级链接的设置创建网页模板,
