实验三CSS表现层设计综合应用.doc

实验三 CSS表现层设计综合应用班级：11信管_班 姓名：_ 学号：_完成日期：_成绩：_一、实验目的掌握用Dreamweaver设计XHTML页面及CSS的基本方法，能够熟练编写XHTML和CSS代码。掌握CSS中定位属性的基本应用；掌握基于浮动和定位属性的布局的方法，掌握背景、边框、圆角的应用，根据要求设计基于CSS布局的页面，并在Firefox和IE中测试，达到一致的效果。二、实验内容用Dreamweaver编写页面并用CSS进行样式设计：1 运用定位属性设计小提示框，当鼠标放置到链接上时，提示框出现，移出则消失。类似下图：（小提示框的其他样式可自行设计）2 使用图片阴影效果制作一个相册索引页。3 利用给定的素材bg_popup.gif，设计可变宽度的气泡提示框。4 利用翻转图素材为背景，设计宽度自适应导航条，样式自定。5 深入理解边框样式，设计一个单像素宽度边框的表格，要求外框为实线，内部为虚线。6 给定一个页面结构ex3.html，要求用CSS设计至少两种表现层效果（包括布局、配色、字体、背景、导航样式等），能方便迅速地实现网页换肤（切换样式）。不能修改XHTML结构。制作要求：（1）符合HTML、CSS规范，用Dreamweaver生成的CSS代码要进行精简、优化。（2）在Firefox和IE浏览器中都要通过测试。（3）表现层效果都要通过CSS实现，不允许通过设置HTML元素属性实现。三、实验结果请按照设计要求进行，严格遵守设计规范，自主完成，尊重他人劳动成果，严禁抄袭。在自己的机器上进行演示。并通过FTP上传到自己的网站空间，实验报告打印上交。最后提交截止日期：2013-5-10，请按时完成。四、思考并回答问题1 总结实现圆角的方法，指出各有什么特点。第一种:无图片纯css 圆角框 特点: 不用任何图形，使用很多个div 容器模拟出圆角效果。兼容性:通杀所有浏 览器缺点: 构造这个圆角需要加入太多的无语义的标签，结构比较冗余。重用性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。边 框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一 并且一个页面中圆角应用不多的页面。不容易实现圆弧内有渐变色的图形背景。 圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧 较小的网页。实现原理: 用很多1 像素高的div 容器，利用背景色和边框色来模拟出圆角框的轮廓 线。 第二种:无图片纯css 圆角框，用特殊字符(&bull) 特点: 不用任何图形，使用特殊字符?(圆点)模拟出圆角。兼容性:通杀所有浏览 器圆角平滑缺点: 构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。重 用性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四 个角图片的定位，并且字符大小对其有影响，灵活性不够。颜色虽可调节，但 要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并 且一个页面中圆角不是太多的页面。一样不容易实现圆弧内有渐变色的图形背 景。实现原理: 用特殊字符(&bull)，利用定位，截取四分之一圆模拟出圆角框的一个角图 片。 第三种:图片圆角框 收录理由:兼容性强，可以表现很复杂的圆角效果。兼容性:通杀所有浏览器。这是最常用 的圆角框做法。因为采用图片来表现，所以其圆角是超级平滑，无任何锯齿现 象。表现丰富，适用于各种对图片表现要求较高的圆角框。缺点: 构造这个圆角也需要加入四个标签来装四张角图片，结构也有冗余。重用 性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，则要重新制作 一套圆角图片。如果对结构的冗余没有特别的需求，这就是超级圆滑圆角框的 解决方案了。 实现原理:利用九宫格原理，在一个容器的四个角加入绝对定位(或相对定 位)的四张圆角图片。第四种:利用VML 绘制圆角(ieonly) 特点: 不用任何图形。兼容性:只能在IE 中使用圆角半径随意调整重用性强:多个 圆角任意调用。圆角颜色随意设置。结构无冗余。圆角平滑无锯齿。缺点: 除了兼容性有问题外，其它方面的表现都不错。不能在圆弧中表现丰富的 有渐变的图片，因为圆弧外框是透明的。实现原理:使用IE 专用的VML 来画出 圆角。 v:roundrectid=roundbox class=circle strokecolor=red strokeweight=2px arcsize=0.08 /v:roundrect 注意加入引用空间: htmlxmlns:vxmlns= 这是兼容的用法， xmlns:v 一不能少，否则。 样式表中加入这一句话: v:*behavior:url(#default#VML);display:inline-block; Arcsize 为半径 Strokeweight 为边框线宽度 Strokecolor 为边框线的颜色 实例演示: 代码如下: !DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN htmlxmlns:vxmlns= headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/ titleVML 画平滑圆角框/titlestylev:*behavior:url(#default#VML);display:inline-block; bodybackground-color:#99FFFF;font-size:12px; .circle height:130px; width:300px; padding-top:8px; margin:0pxauto; z-index:2; margin-left:340px; h1border-bottom:2pxredsolid;font-size:12px;margin:4px;text-indent:1em;height:20px; divfont-size:12px;padding:10px; /style /headbodyv:roundrectid=roundboxclass=circlestrokecolor=reds trokeweight=2pxarcsize=0.08 h1VML 画平滑圆角/h1divclass=t1 使用IE 专用的VML 来画平滑圆角框，还可以画出阴影效果。就其图形表现 来说，是非常完美的。 /divv:shadowon=tcolor=#777opacity=52428foffset=1.5pt,1.5pt / /v:roundrect /body /html 第五种:利用私有属性绘制圆角(FF3only) 收录理由:平滑无锯齿 图五 特点: 不用任何图形。 兼容性:只能在FF3 中使用，其它浏览器不受支持。 圆角半径随意调整 重用性强:多个圆角任意调用，只需要样式表设置就可以。 圆角颜色随意设置。 结构无冗余。 圆角平滑无锯齿。 缺点: 除了兼容性有问题外，其它方面的表现都不错，这种方式应该是最完美的 方式，可惜目前只有FF3 能支持这个属性，以后CSS3 后会支持这个属性，不过 这不知道要等到多少年以后。 同第五种圆角一样，在处理圆弧内的图片背景时显得有些有心无力。 实现原理: 使用FF3 专用的私有属性来画出圆角。 只用两种属性就能体现圆滑的圆角框 -moz-border-radius:10px;/*圆角半径*/ Border:5pxredsolid;/*边框大小*/ 实例演示:(请在FF3 浏览器下观看，其它浏览器不支持) 代码如下: !DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN htmlxmlns= headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/ titleFF3 下的圆角框/titlestyletype=text/css bodybackground:#CCCCCC; .round -moz-border-radius:20px;/*半径*/ border:4pxsolid#333;/*边框宽度*/ margin:50pxauto;width:30%;height:150px;font-size:12px; h1border-bottom:4px#333solid;font-size:12px;width:100%;padding:5px0;text-indent:1em; .contextfont-size:12px;padding:10px; /style /headbodydivclass=round h1FF3 私有属性画的圆角框/h1divclass=context pFF3 下的圆角框两个属性就可以解决:/pp-moz-border-radius:半径/ppborder:边框/p /div /div /body /html 第六种:无图片脚本圆角框(js 半完美解决方案) 这种方案目前应该是比较完美的方案了。 图六 特点: 不用任何图形。 兼容性:通杀所有浏览器 圆角半径随意调整 重用性强:多个圆角任意调用。 颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。 结构无冗余，只需要在容器上定义一个class 或ID 就可以将这个div 变成 圆角。 圆角平滑。 缺点: 客户端禁用JS 时就无圆角，不过在目前情势下，这种情况应该不会成为太 大的问题。 实例演示:(有三个演示例子) 结语: 目前的css 因为不能为一个容器中定义多张背景图片，造成了为了这种圆 角效果而加入冗余标签。听说CSS3 会引入这一属性，可能到哪时，就是圆角框 统一的时候了。另外也听说在CSS3 中有意向加入像FF3 私有属性(-moz-border-radius)的方法，这也可以完美地解决这个问题。但在目前的情势下， 可能也只有用上面的这些方法来过渡了，强烈期待CSS3 的到来。 总而言之:要实现绝对的完美圆角框在目前的形势下基本上是不可能的，所 以取名为半完美解决方案。 2 什么是滑动门技术，主要有哪些应用？滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。3 定宽布局和变宽布局各有什么特点？4 如何用导入式样式表实现网页换肤？方法一，借用浏览器选项设置。假设我们定义两套CSS样式表文件：stylel.css和style2.css。然后在网页和之间加入如下两行XHTML代码：link rel=stylesheet type=text/css 七 title=皮肤l href=stylel.css