CSS样式表和模板.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(子菜单） 在“属性”区域的“定位”选项中设置width 2.子菜单定位 在“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)用模板更新已存在的网页 打开要套用模板的网页 选择”修改”|