仓酷云

标题: 带来一篇CSS的滑动门手艺研讨 [打印本页]

作者: 逍遥一派 时间: 2015-1-16 00:17
标题: 带来一篇CSS的滑动门手艺研讨
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
在CSS中，一个常常被人们会商的先辈的地方即背景图象的可层叠性，并同意他们在相互之长进行滑动，以制造一些特别的效果。依据CSS2.0以后的划定，每个背景图象都必要各自的HTML元素。在很多情形下，典范的标志已为一样平常的接口组件供应了多种元素以供我们利用。
标签导航栏就是个中的一个例子。已往，我们频仍的利用这些标签，并已成了一种十分盛行的站点导航体例。当今，在CSS已被普遍撑持的远景下，我们能够为我们站点制造出更高质量和更好表面的标签导航栏来。你大概晓得CSS能够用来“征服”无序的列表，也许你还已经看到过这类款式的标签列表：
<Pstyle="TEXT-INDENT:2em">

假如我们想用和以上相似的标志，将导航标签酿成这类款式，该怎样办呢？
<Pstyle="TEXT-INDENT:2em">

<Pstyle="TEXT-INDENT:2em">经由复杂的计划，我们是能够做到的。立异于那边？

我见过的很多基于CSS的导航标签多数具有一类的特性：矩形的色块，大概仅仅是一个表面，关于以后选中的标签则没有边框，标签在鼠标指针游至其上时改动色彩。这岂非就是CSS所能给我们的全体吗？连续串的小盒子和单调的色采吗?
在CSS被普遍接纳之前，我们已看到很多标签导航计划中的立异的地方。首创的形状，纯熟的色采夹杂，和对实在天下中很多物理接口的仿照。可是这些计划常常太过依附于经由庞大制造、带有文本的图象，或被包装成多少嵌套的表格。修正文本或改动标签的按次则必要一个庞大的历程。文本的伸缩更是不成能的，或给页面的结构极年夜的影响。
<Pstyle="TEXT-INDENT:2em">纯文本的导航栏比起文本即图象的导航栏更具有延续利用性和更快的载进速率。一样，我们乃至能够为每个图象加上alt属性，关于弱视者，纯文本更能够自在的改动巨细。多如牛毛的是，基于纯文本的导航栏，并加以CSS款式，又从头回到Web计划中来。可是，年夜多半基于CSS的导航栏计划，至今为止仍旧是毫偶然义的。一种比来被接纳的手艺（比方CSS）可让我们做的更好，一样不掉先条件到的那些表格和图片标签的效果。滑动门手艺

美妙的工艺，真正天真的接口组件，并依据文本自顺应巨细，我们可用两个自力的背景图象来制造它。一个在右边，一个在右侧。把这两幅图象设想成两扇可滑动的门，它们滑到一同并交迭，占有一个较窄的空间；大概互相滑开，占有一个较宽的空间，就像下图所显现的那样：
<Pstyle="TEXT-INDENT:2em">

在这个模子中,一个图象掩饰住另外一个图片的一部分。假定我们安排一些共同的内容在每一个图象的四周，比方标签的圆角，我们其实不但愿下面一副图象完整的掩蔽住上面一副。为了避免这类情形的产生，我们能够将下面一副图象（此例中的右边那幅）把持的尽量的窄。但仍旧要包管必定的宽度来展现标签一侧的共同性。假如内部是圆角，我们就应当把持下面一副图象和它的弧线部分具有一样的宽度。
<Pstyle="TEXT-INDENT:2em">

假如方针在巨细上增加，并凌驾了以上所显现的宽度，归罪于文本巨细及字体的改动，图象会被拉开，发生不美妙的间隙。我们必要判别的是，展望这类可扩大的量将有多年夜。假如在扫瞄器中改动字体的巨细，方针又会假如增加呢？实践来讲，我们最少应当预算到字体巨细增加至300%的情形。背景图象也得顺应这类增加。关于以上的例子，我们将上面（即右侧）的图象设为400*150像素，下面的设为9*150像素。
在思想中，一直要有如许的熟悉：背景图象只是显现一个可供内容添补的无效空间（即内容地区和padding，称为doorway）。这两幅图象一直和各自内部的边角相锚定。背景图象的可见部分和在一同即构成了一个具有这类标签外形的空间（doorway）：
<Pstyle="TEXT-INDENT:2em">

假如标签被撑年夜，图象即滑开，doorway变宽，图象的也将被显现的更多：
<Pstyle="TEXT-INDENT:2em">

此例中，我在photoshop中制造两个光滑，细的3D标签图象，如文章开首所显现的那样。关于其一，外部亮堂，边框昏暗些，用来体现以后选中的标签。将这类技能模子使用于摆布两幅图象中，我们必要扩展标签图象掩盖的地区，将它裁剪成两部分：

一样的体例将使用到被称为“以后”的标签中。一旦我们完成了这四幅图象（1,2,3,4），我们就能够入手下手用标志和CSS来制造我们的标签了。

[1][2][3]下一页

标签的制造
当你在研讨用CSS来制造程度列表时，会发明最少有两种办法将列表项布置在统一行里。两种办法半斤八两，但都必要CSS来办理结构所带来的凌乱。一种办法利用inlinebox，另外一种则用floats。
办法一，多是对照广泛的一种，是将列表项都inline显现。inline办法的魅力在于它的浅易性。可是，关于我们行将谈到的滑动门手艺来讲，inline办法在特定的扫瞄器上存在一些注释上成绩。办法二，是我们将要存眷的，即用floats将列表项布置在统一行里。使人懊丧的是，floats外表上冲突的举动正巧躲避了天然的逻辑。只管云云，关于办理多重浮动元素的基础熟悉，和牢靠浮动的意义，还是值得会商的。
我们将用另外一种浮动元从来办理浮动元素的分列成绩。如许，父类元素将子类元素完整包含起来。因而，我们就能够为标签加上背景致彩和背景图象。十分主要的一点必需记着，紧跟在标签后的文本元素用CSS中的clear功效来扫除浮动工具。如许制止了浮动标签影响页面上别的元素的地位。
我们从以下的标志入手下手：
<Pstyle="TEXT-INDENT:2em">

Home<LIid=current>News
Products
About
Contact

实际中，#headerdiv大概一样包括logo和搜刮框。关于我们的例子，我们要延长每个锚链中超链接的值。明显，这些值应当准确的包括文件大概目次的地位。
我们从定位#header容器入手下手计划列表。如许确保了这个容器确的确实的充任了容器的感化，以包涵它外部浮动的列表项。既然元素是浮动的，我们一样必要声明它的宽度为100%。到场一时的黄色背景以确保父类容器完整填满标签前面的全部地区。一样，设定默许的文本属性，确保款式的一致：
#header{float:left;width:100%;background:yellow;font-size:93%;line-height:normal;}
如今，我们一样必要为无序列表设定默许的margin/padding值为0，并往失落列表项后面的标志。每一个列表项左浮动：
#headerul{margin:0;padding:0;list-style:none;}#headerli{float:left;margin:0;padding:0;}
设定锚链强迫作为块工具呈递，我们即可无忧的把持一切的款式：
#headera{display:block;}
下一步，我们将右边的背景图象到场到列表项中往（改动如粗体所示）：
#headerli{float:left;background:url("norm_right.gif")no-repeatrighttop;margin:0;padding:0;}
在到场左边图象之前，我们能够在效果1种看看今朝为止的效果。（在效果中，疏忽body中的划定规矩。仅设定基础margin,padding,colors,text的属性。）
---
如今我们能够将左边图象安排在锚链的右边（容器内的元素）。我们同时到场padding，扩展标签并将文本从标签的边沿推开：
#headera{display:block;background:url("norm_left.gif")no-repeatlefttop;padding:5px15px;}
如许我们就失掉了效果2。注重我们的标签是怎样成型的。在这里，IE5/Mac的用户会立即惊异道，“天啊，我的标签垂直堆在一同而且延长至全部屏幕！”不要发急，我们即刻帮你办理。眼下，只管依照上面往做，大概便利的话，一时更换其他的扫瞄器，而且IE5/Mac版本的成绩会即刻失掉办理。
---
如今，一样平常标签的背景图象已完成了，我们要为“以后”标签改换图象。我们经由过程对方针列表项到场id="current"和锚链来完成。既然不必要改动背景的其他表面，图象除外，我们就利用background-image的特征：
#header#current{background-image:url("norm_right_on.gif");}#header#currenta{background-image:url("norm_left_on.gif");}
我们要在标签下增加一条边框。可是，将边框属性使用于父类的#header容器上，将不克不及办理“以后”标签无需边框的成绩。因而我们制造新的带有边框的图象以取代它。一样，我们能够为它到场突变效果：
<Pstyle="TEXT-INDENT:2em">

我们将图象安排到#header容器的背景中往（取代原本的黄色背景），将背景图象移至到最下方，并为图象上方留出的空缺增加响应的背景色彩。同时，往失落由body承继上去的padding，为ul的上、左、右侧加进10像素的padding：
#header{float:left;width:100%;background:#DAE0D2url("bg.gif")repeat-xbottom;font-size:93%;line-height:normal;}#headerul{margin:0;padding:10px10px0;list-style:none;}
我们必需让“以后”标签掩盖边框，以下面提醒的那样。你大概会以为我们将要把底部边框到场到与其色彩绝对应的、#header背景图象中往，然后将“以后”标签的底部边框色彩改成红色。可是，关于抉剔的察看者，仍是会发明一些微小的不同。因而，我们改动锚链的padding，为“以后”标签制造出直角来，以下面缩小的例子：

我们经由过程削减1像素一般锚链的底部padding值（5px-1px=4px）来完成，然后为“以后”锚链补上减往的padding。
#headera{display:block;background:url("norm_left.gif")no-repeatlefttop;padding:5px15px4px;}#header#currenta{background-image:url("norm_left_on.gif");padding-bottom:5px;}
经由改动，底部边框将在一般标签中呈现，而在“以后”标签中则埋没了起来。因而，我们失掉了效果3。

扫尾事情
灵敏的察看者大概会在上一例注重到红色的标签角落。这些不通明的角用来避免上面的图象透过下面的一副。实际上，我们能够实验利用部分背景图象来顺应标签的背景。可是我们的标签会在高度上增加，实验经由过程挪动背景色彩，背景图象就会绝对变矮。取代的举措是，改动图象，将标签的角落设为通明。假如弧线是反锯齿的，我们在其边沿利用较均匀的背景致彩。
如今，角落已酿成通明色，右边的图象将透过右侧图象的角落。为了抵偿，我们为表单项到场和右边图象宽度相符合的padding（9px）。既然已为表单项到场了padding，我们还需往失落一样的宽度以到达文本的居中（15px-9px=6px）：
#headerli{float:left;background:url("right.gif")no-repeatrighttop;margin:0;padding:0009px;}#headera{display:block;background:url("left.gif")no-repeatlefttop;padding:5px15px4px6px;}
仍未停止，由于到场了9个像素的padding使右边图象与标签的右边之间发生了一段空缺。如今，左边与右边，可见“doorway”的边沿接在一同，我们再不必要将右边图象坚持在上方。因而，互换两幅背景图象的按次，相反过去。一样互换“以后”标签中利用的两幅图象：
#headerli{float:left;background:url("left.gif")no-repeatlefttop;margin:0;padding:0009px;}#headera,#headerstrong,#headerspan{display:block;background:url("right.gif")no-repeatrighttop;padding:5px15px4px6px;}#header#current{background-image:url("left_on.gif");}#header#currenta{background-image:url("right_on.gif");padding-bottom:5px;}
完成这些后，我们抵达了效果4。要注重的是，通明的角落在标签的左边发生了一段不克不及点击的有效地区。这个地区在文本之外，但仍旧是能够发觉到的。在标签的双方都利用通明的图象是没有需要的。假如我们不但愿发生这类有效的地区，那末我们必需利用在标签前面利用色彩，然后用这类色彩来取代标签角落的通明图象。如今我们仅坚持这类通明角落。
<Pstyle="TEXT-INDENT:2em">关于剩下的成绩，我们将一次性完玉成部的修正：减轻标签文本，将一般标签中的文本改成棕色，“以后”标签文本改成深灰色，往失落链接的下划线，最初将悬停文本性彩改成一样的深灰色。经由一系列的改动，我们将看到今朝为止的效果5。分歧性的办理

在效果2以后，我们公认的一个成绩就是在IE5/Mac扫瞄体例下，每一个标签延长并占有了全部扫瞄器的宽度，乃至标签垂直的堆在了一同。这不是我们所但愿的。
在年夜多半的扫瞄器中，浮动一个元素会有压缩，压缩最小至它所包括内容的巨细。假如一个浮动元素包括一幅图象或其自己即图象，便会压缩至图象的宽度。假如仅仅包括文本，那末将会压缩至最长的，不成被顶开的那文本的宽度。
一个成绩呈现在IE5/Mac中的图片中，当一个auto-width的块工具元素被拔出到一个浮动的元素中时。其他的扫瞄器仍然将浮动减少至最小，而忽视容器内的块工具元素。但IE5/Mac其实不依照这类情形，相反它将浮动和块工具元素扩大至尽量的宽度。为办理这个成绩，我们将锚链同时浮动起来，但仅仅关于IE5/Mac，以避免保持其他的扫瞄器。起首，我们为锚链设定浮动划定规矩。然后，我们利用反斜杠正文法来埋没这类划定规矩，让它仅仅对IE5/Mac失效，而忽视其他的扫瞄器：
#headera{float:left;display:block;background:url("right.gif")no-repeatrighttop;padding:5px15px4px6px;text-decoration:none;font-weight:bold;color:#765;}/*CommentedBackslashHackhidesrulefromIE5-Mac*/#headera{float:none;}/*EndIE5-Machack*/
如今IE5/Mac扫瞄器将按我们所希冀的那样来显现标签，看效果6。关于非IE5/Mac的扫瞄器甚么都不必要改动。注重到IE5.0/Mac的一系列注释上的bug在IE5.1中办理。因而，滑动门手艺在5.0版本中所遭受的成绩超越了hack的限制。既然晋级到IE5.1/Mac已不成困难，OS9Macs/IE5.0的占据率应渐渐缩减至很低。触类旁通

我们方才练习训练了滑动门手艺，用纯文本和无序列表来制造导航标签，加以大批的款式。它的装载速率快，具有可保持性，而且文本的巨细能够在不损坏表面的情形下举行较年夜的伸缩。不用我们再重申在制造庞大款式的导航栏中，滑动门手艺所体现出来的弹性了。
只要想不到，没有做不到。最后的效果向我们展现了一例，但我们计划不成能因而而被限制逝世。
在某些场所，标签纷歧定是对称的。我很快就制造了这类标签的第二个版本，也有暗影3D的款式，有角的边沿，和具有特征的右边部分。根据第二个版本，我们乃至能够互换摆布两幅图象的地位。以这类仔细的结构和乖巧的图象把持，我们能够往失落按钮的下边框以便标签图象更好的往顺应背景，如第三个版本所显现的那样。假如你的扫瞄器撑持多个款式表的切换，你乃至能够靠它在多个版本的导航栏之间自在切换。
仍有很多我们没有提到的其他的效果。疾速的提一下，我改动鼠标悬停的文本性彩，可是端的图象能够交换失落以制造出更风趣的变更效果。即便标志中两个嵌套的HTML元素，也能够用CSS来到达一些我们还未想到的效果。我们在此例中制造的仅仅是程度的标签栏，但滑动门亦可使用于很多其他的情况。左右以为怎样呢？

上一页[1][2][3]

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

作者: 柔情似水 时间: 2015-1-16 23:45
标题: 带来一篇CSS的滑动门手艺研讨
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

作者: 小魔女 时间: 2015-1-20 11:43
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 精灵巫婆 时间: 2015-1-29 07:01
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 不帅 时间: 2015-2-5 23:47
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 分手快乐 时间: 2015-2-14 08:04
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 老尸 时间: 2015-3-4 05:07
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 谁可相欹 时间: 2015-3-11 17:24
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 深爱那片海 时间: 2015-3-19 03:37
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 莫相离 时间: 2015-3-27 07:01
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

欢迎光临仓酷云 (http://ckuyun.com/)