动态网页制作技术.pptVIP

第九章 9.10动态网页制作技术 HTML+CSS+JavaScript CSS层叠式样式表 CSS（Cascading Style Sheets） 用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 主要功能是通过对HTML标记进行设定，来达到对网页中的字体格式、颜色背景、图像和其他图文效果的控制功能。 CSS只是提供对文档外观的更好更全面的控制，并不干扰文档的内容。 CSS的基本结构格式 基本语句结构：选择符{属性: 属性值} 选择符{属性1: 值1；属性2: 值2；… 属性n:值n;} 任何一个HTML标记都可以作为选择符，常用的HTML元素有P、A、IMG、BODY、H1～H6等等。 属性主要包括有字体、背景、布局、边界等 值就是为属性设置的任何选项如“楷体”,“red” CSS的编辑 CSS可以作为单独的文件保存，扩展名为.CSS CSS也可嵌套在HTML文件中 用style type=text/css和/style标记将CSS文档部分包括在其中 CSS文档可以使用记事本编辑(指定扩展名.css)，也可使用FrontPage编辑。 将CSS加入到网页中 CSS样式在HTML中应用有三种方法： 第一种包含在文件头head.../head标记中 第二种行间定义包含在body.../body标记中 第三种是调用外部样式文件，在head中定义 将CSS加入head中 CSS包含在head.../head标记里，用注释语句的形式书写。例如：定义H1标题的文字格式 CSS样式表写在HTML行内 直接使用style=…，将CSS定义在HTML内例如： 定义H2标题的文字格式 调用外部CSS样式文件 先建立样式文件(.css)：可在FrontPage中建立样式文件如csslink.css 然后链接样式文件到编辑的网页中 实例： head link rel=stylesheet href=csslink.css /head 也可直接在FrontPage中链接 选择菜单[格式]→[样式表链接]，按[添加]按钮 CSS样式实例 去掉网页超级链接的下划线 动态文字的转换 飘动的气球 网页中去掉超级链接下画线 可用css进行设置，将下面的内容放置在head标记中 style type=text/css !-- a:link { color:#3333FF; text-decoration:none} a:visited { color:#3333FF; text-decoration:none} a:active { color:#3333FF; text-decoration:none} a:hover{color:#FF3333; text-decoration:underline} -- /style 只能使用在当前网页中 动态文字的转换 1.先在head.../head标记之间输入如下代码： script !-- function HelpArray(len){this.length=len } HelpText=new HelpArray(4) HelpText[0]=北京金洪恩电脑有限公司 HelpText[1]=洪恩在线 HelpText[2]=求知无限 HelpText[3]=十二亿中国人的网上大学 HelpText[4]= ScriptText=new HelpArray(4)//*定义文本数组，一共是五段文本*// 动态文字的转换 var i= -1 function playHelp() { if (i==4) {i=0} else {i++} div1.filters[0].apply() div1.innerText=HelpText[i] div1.filters[0].play() mytimeout=setTimeout(playHelp(),2500)}//*定义play函数，并设置了时间间隔*// -- /script style !-- #div1{position:absolute;top:20;left:20;width:480;height:70; font-family:行书体;color:red;font-size:40;font-weight:bold;text-align:center; filter:revealtrans(transition=12,duration=2) }//*设置显示转换滤镜*// -- /style 动态文字的转换 2.再在body中输入如下代码： body onload=playHelp() pdiv id=div1 onload=playHelp()/div/p 飘动的气球 1.先在head.../