在Dreamweaver中制作选项卡式网页效果

1、在Dreamweaver中制作选项卡式网页效果在设计过程中经常会遇到选项卡效果的制作，很多刚开始学习网页设计的朋友会觉得这个很难制作，今天我就结合 div和css做一个选项卡效果实例，大家一起探讨一下Dreamweaver中的“行为的奥妙。二手车操作步骤:一、制作选项卡的鼠标交换效果1.打开Dreamweaver CS6.0，新建一个html空白文件并保存到文件夹内。2.创建一个父层。打开“插入 “布局对象 “Div标签Dw 丈性:F) 逅重(F) SS(V)届止祸式(O静刽门 站焦0 En(W) 李社ichoxuanxiangka.html1 X JRttled-S览00FMTransiti

2、nna1/EN T1LCP :/ww hW2 .or xn Etl 1 / ErD/xhnll ai.E-Qr.al. dzd，T html jorlns nttE :/www.w3 .orH2onrer,c-Tytift * cocnarset-jtr-!J / ti奇题文怡标蹇(G-Cb-1+E圏偉0)Ctd+AHH戛鈕卑苗)異体(Vk怎晋M“，琥ECtd+Alt+T萄B疋录k电子転卿SLiwgir(NCtrl+Alt UE 崩(D无标题交档Div祈翌D) 彌m右局Div S(F)2 Div(A)Spryt(M) 知巧五此卡云自抿P Spry折査式Z ry可听苣211SQ“插入Div标签对

3、话框中的ID文本框中输入“ gen,然后单击“确定按钮。4.然后在代码视图/ head标签前输入如下代码:#ge n positi on: absolute;width: 376px;height: 30px;z-i ndex: 1;border-bottom:solid #F30 2px;border-top:solid #CCC 1px;border-right:solid #CCC 1px;5.div变成如如下图所示效果。此处显示kTgtiT的内容“此处显示id “gen的内容提示文字后，输入文本“汽车，然后在设计视图中选择该 文本后，在“ html 属性面板中“文本框中输入“#,为该文

4、本添加了一个空。优码W 设计 实视图 Q J 殊畝 匚可 砥 + 4- o+匸151C17ISISI如仁.,1生| in风邸标题：无:Z74 X 208v 1 K f 1 秒 Unicode C蓉古 i型e 測s韓客性i皆殛s丨站京报告| ftp題|铮髀al 屋性|I HTML格式血无类无,B 71=fa CSSIDG）无7.在 前输入如下所示代码:#ge n a height: 30px;display: block;float: left;paddi ng-left:10px;paddi ng-right:10px;lin e-height: 30px;fon t-weight: bold

5、;text-decorati on: none;border-bottom: 2px solid #F30;border-left: 1px solid #CCC;8“汽车的超级样式变成如如下图所示样式：9. 在/ style前输入如下所示代码：#ge n a:hover color: #F00;backgro un d-color:#FFF;text-decorati on: un derl ine;border-top: 2px solid #F30;border-left:#CCC solid 1px;border-bottom:#FFF solid 2px;border-radius:

6、 3px 3px 0px 0px;margin-top:-2px;10. “汽车的鼠标交换样式变成如如下图所示样式:“设计视图中，激活“汽车所在的标签，然后使用“ CTRL+C复制，用鼠标将插入点定位到div “gen的空白处，使用“ CTRL+V粘贴两次，得到如下列图效果：“降价、“二手车i汽车：降价;1 1二手车i1、添加“显示-隐藏行为“gen的空白处，打开“插入 “布局对象“ Div标签，在弹出的“插入 Div标签 对话框中的ID文本框中输入“ qc,然后单击“确定按钮。14. 参考上一步所示方法，再先后创建“jj 、“esc两个div 。-cadiv此进虽 id的內寄Cdlv 10時

7、A出;处显示id匸j的内容 此处吕亍id z汕的内書lfa 口戈丫15. 在/ style前输入如下所示代码:#qc positi on: absolute;width: 378px;height: 221px;z-i ndex: 1;left: 0px;top: 33px;backgrou nd-color: #FFOOOO;#jj positi on: absolute;width: 378px;height: 221px;z-i ndex: 2;left: 0px;top: 33px;backgrou nd-color: #FFFF00;#esc positi on: absolute;

8、width: 378px;height: 221px;z-i ndex: 3;left: 0px;top: 33px;backgrou nd-color: #99CC00;16. 网页效果如如下图所示：rwi妇 实时f脛y 吮 吧4志op s 33px;b&ckgzound-saLar: FFFFGC;4tsc casition； araoijce： Vidtli : glSQ绘, height: 12 Lpz-z-zndex: 3plet: Opx?top; 3 3px;fcackgzouLZid.-3-DLDr 二 #99C!CCCv#EtjL? .di ves7 ：Q廉 *|回 圖叵乜1

9、 *们& 1 K / I科UMcqI* 阿-3)“汽车的a标签，然后打开“标签检查器控制面版，激活“行为选项卡。/隐藏元素“标签检查器控制面版中的“添加行为按钮，从弹出的菜单中选择“显示 命令。I AP元耋 庶21空宣当标题：无标题文档卡此丈卜显示id飞乳叮的内容q 100% 圖團属性行为掠養I三.三恢复支換图隆 打幵潢览器刮口 fe9) AP元素 改班怪豈示-擬踐元素件羊JavaScript 斟K詐吞*|“div qc元素，然后单击下方的“显示按钮，再依次选择“div jj 元素和divesc 元素，分另假置为“隐藏，然后单击“确定按钮。显示為藏丽E C- J 貝 9J. binrtfrV-V-V- dldidl-元“实时视图，用鼠标单击“汽车预览该效果。此时我们可以看到，单击鼠标时，红色div会显示出来，但是我们需要将鼠标动作修改为鼠标指向该时，发生div显示的事件。这个问题需要在“标签检查器的“行为面版中解决一下。“汽车的a标签，然后打开“标签检查器面版中的“行为，如如下图所