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

1、在Dreamweaver中制作选项卡式网页效果在设计过程中经常会遇到选项卡效果的制作，很多刚开始学习网页设计的朋友会觉得这个很难制作，今天我就结合 div和css做一个选项卡效果实例，大家一起探讨一下Dreamweaver中的“行为”的奥妙。二手车操作步骤:、制作选项卡的鼠标交换效果1.打开Dreamweaver CS6.0，新建一个 html空白文件并保存到文件夹。2创建一个父层。打开“插入”> “布局对象” > “ Div标签”。DvV丈供B 疽茕F直吉V)icharuanjtiAngka.hunl" x, JnDtled'n懈rw设计萍撷囿.1<!DO

2、CryFE hHE&l FU"匚1»-/；WSC/DT3 XHTMTraiTL*jtiarLil/EM "httr:/www.uS.or xntn_ 二 / El' D/ xhticll+ *sitionai. ncci,r>nn.ttp : /w> w3 or 9/xhtnJ.lf><nead><meta 匕匸匸p-eqj:iv=袤1"SonEKt-T'/ce" co=,rteii;/ntntLFcna3eL=ucr-3"區)題宜档 </iOi>里1</7

3、i«sd>Ctrl+E1Ctrl+Alt+I;无标題卿吏专汇第:G)k理込M1*5T0(T'CtrkAll+T击榕厂苦;£)k鬲局可細4Div标欽D)表羊If晓俄冋柜启倚Div疥整®AP Dfv(A)电孑邮惟乐山舁ry奨单拦的)Ctrl+AiASpry7Tjr-H.l5jFf7iPlE胃口即呼祈葩Spry rJ折亘面視疋)曲(O赵I 啓宿式(o命令C)注点 sc(vo seatc-i)3在弹出的“插入 Div标签”对话框中的ID文本框中输入“ gen”，然后单击“确定”按钮。代码一折分设计实时视圏T标題：无乐题文档0 12111标題文档"&

4、lt;/heac±><i>ody> <div id- "gcrL*>2321显 7F jLdl,genrr 的内</body>比处見示idd' gen" 的内容4然后在代码视图</ head标签前输入如下代码:<style type="text/css">#ge n positi on: absolute;width: 376px; height: 30px;z-i ndex: 1; border-bottom:solid #F30 2px; border-top:sol

5、id #CCC 1px; border-right:solid #CCC 1px;</style>5.div变成如下图所示效果。此处显示idrgen"的内容6.删除div中的“此处显示id “gen”的容”提示文字后，输入文本“汽车”，然后在设计视图中选择该文本后，在“html ”属性面板中“”文本框中输入“#”，为该文本添加了一个空。7.在</ style>前输入如下所示代码: #ge n a height: 30px;display: block;float: left;paddi ng-left:10px;paddi ng-right:10px;lin

6、e-height: 30px;color: #000;fon t-weight: bold;text-decoratio n: 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-decoratio n: un derl ine;border-top: 2px solid #F30; border-left:#CCC solid

7、1px;border-bottom:#FFF solid 2px;border-radius: 3px 3px 0px 0px;margin-top:-2px;10“汽车”的鼠标交换样式变成如下图所示样式：駐11. 在“设计”视图中，激活“汽车”所在的<a>标签，然后使用“ CTRL+C ”复制，用鼠标将插入点定位到div “gen”的空白处，使用“ CTRL+V ”粘贴两次，得到如图所示效果：12. 分别将文字修改为“降价”、“二手车”。薜7茴;二手车II二、添加“显示-隐藏”行为13. 将插入点定位到div “gen”的空白处，打开“插入” > “布局对象” > “

8、Div标签”，在弹 出的“插入Div标签”对话框中的ID文本框中输入“ qc”，然后单击“确定”按钮。14. 参考上一步所示方法，再先后创建“jj”、“esc”两个div。 孟车膺紇二二禾IIMg八此禅谅荼孑qy窗a#'' d * ! « 4 v i < « Bi « i i! B * i n Ihre f- IF > S fl < /o > <a<div此灶蛊乔 id Ffqo"的內<dlv 1护啓卜所亓:ii j"的內容此处迅亍 id ric 的內杏15. 在</ style前

9、输入如下所示代码: #qc positi on: absolute;width: 378px;height: 221px;z-i ndex: 1;left: 0px;top: 33px;backgrou nd-color: #FF0000;#jj positi on: absolute;width: 378px;height: 221px;z-i ndex: 2;left: 0px;top: 33px;backgrou nd-color: #FFFF00;#esc positi on: absolute;width: 378px;height: 221px;z-i ndex: 3;left:

10、0px;top: 33px;backgrou nd-color: #99CC00;16. 网页效果如下图所示：垂生J i射 实时卿0 肚匕魂志 标霾无标题連若车:®fr :二手车=iAa比处显未迢上电：的内昏cop i 3 3px?backgzcund 匚olor: IFFFFCC;4上却© Edsition: ajsarjce： width! 378dx? height! 221p)e!2-nde3E23；leit: Opsi?t-Cip : 33plErfcackg z orind- = 1 dz:; #99CCC C ;</style></tiead

11、>3CQ9t * El 师1 1 佃 挥 MB 1 K / 1 秒 VAJCQ1S (VTF-3'i17激活“汽车”的a标签，然后打开“标签检查器”控制面版，激活“行为”选项卡。/隐藏18单击“标签检查器”控制面版中的“添加行为”按钮，从弹出的菜单中选择“显示 元素”命令。降倚:二手车: |此处显不id "esc11的内容AP三乗标签检童器|_汕二属怪W 匚 M =一一三-勺|駐3£I疋图燥标题：无标题文档讒已信慝 恢复支摂图隆 打开漁览器刮口b91 AP元素q mo% a n421 H蛊云邑藏元素件羊JavaScript19.从弹出的对话框中选择 “div 'qc'”元素，然后单击下方的"显示”按钮，再依次选择“div jj"元素和“div esc'”元素，分别设置为“隐藏”，然后单击“确定”按钮。20.打开“实时视图”，用鼠标单击“汽车”预览该效果。此时我们可以看到，单击鼠标时,发生div显示的事件。红色div会显示出来，但是我们需要将鼠标动作修改为鼠标指向该时, 这个问题需要在“标签检查器”的“行为”面版中解决一下。