网站制作怎样处理显示和隐藏元素，深圳网站设计制作公司博纳网络详解，Dreamweaver中的“显示隐藏元素”行为具有显示和隐藏元素的功能，通过事件隐藏或显示所指定的对象，一般常被用作与网页交互时的信息。例如，当鼠标指针指向某个图片和文字时，即可显示有关详细信息。
利用“显示隐藏元素”行为，可在站点的主页上，为每个导航按钮所链接的网页设置个包含该网页主要信息的层，并为每个导航按钮加入行为。在浏览网页时，层开始处于隐藏状态，只有将鼠标指针指向该导航按钮时，才可显示该层；移开按钮后层自动消失，单击该按钮又可跳转到目标网页上。怎样实现以上功能，博纳网络-网站设计师总结了十二步操作流程。
【操作步骤】
第1步，打开示例中的orig. html文件，另存为effect. html。本例将利用“显示隐藏元素”行为制作切换面板。
第2步，单击【代码】视图，}刀换到代码编辑窗口下，在<bodv>标签中添加如下4行代码，如图7-34所示。
<div id="apDivl"><img src="images/el.png" /></div>
<div id="apDiv:"><img src="images/e:.png" /></div>
<div id="apDiv3"><img src="images/l.png" /></div>
<div id="apDiv4"><img src="images/_.png" /></div>
第3步，选中<div id:”apDiv3”>．新建css规则，设置定位样式，Position: absolute、Vidth: 1003px、Height: 580px、Z-Index:4、Left: Opx、Top: 89px．如图7-35所示。
第4步，选中<div id:”apDiv4”>，新建CSS规rUi]，设置定位样式，设置参数与apDiv3相同，不同点是Z-Index:3，即让apDiv3显示在上面如图7-35所示。
第5步，选中<div id:'apDivl'>.在css样式面板中单击【新建css规则】按钮，设置定位样式，Position: absolute. Width: 56pxHeight: 31px. Z-Index:2、Left: 500px. Top: 37px,如图7-36所示。
网站设计实操示意图7-36设计<div id:”apDivl”>标签样式
第6步，选中<div id:”apDivl”>．然后在【行为】面板中单击t按钮，在弹出的下拉列表中选择【显示隐藏元素】选项，打开【显示隐藏元素】对话框，如图7- 37所示。
第7步，在【元素】列表中选中相应的AP元素并设置元素的显示或隐藏属性，例如，选中div”apDivl”元素，然后单击【隐藏】按钮表示隐藏该AP元素；选中div”apDiv 2”元素，单击【显示】按钮，表示显示该AP元素。而【默认】按钮表示使用【属|生】面板上设置的AP元素的显示或隐藏属}生。最后，设置<div id:”apDiv3”>隐藏，而<div id:”apDiv4”>显示，详细设置如图7-38所示。
第8步，设置完成后单击【确定】按钮。在【行为】面板上查看行为的事件是否正确。如果不正确，单击事件旁的向下按钮，在弹出的菜单中选择相应的事件。在本例中设置鼠标事件为onClick，如图7-39所示。
网站设计实操示意7-39设置事件响应类型
第9步．选中<div id:”apDiv2”>，由于<div id:”apDiv2”>被<divid:”apDivl”>标签覆盖住，在【设计】视图下看不到该标签，因此单击【代码】视图，在【代码】视图下拖选<div id:”apDiv2”>标签的完整结构，如图7-40所示。
网站设计实操示意图-40拖选<divd=”apDiv2”>标签
第10步，单击【行为】面板中的t按钮，从中选择【显示隐藏元素】选项。在打开的【显示隐藏元素】对话框中选中相应的AP元素并设置元素的显示或隐藏属性，具体设置如图7-41所示。
网站设计操作步骤示意图7-4l设置【显示隐藏元素】对话框
第11步，单击【确定】按钮后，在【行为】面板中将鼠标事件更改为onClick，如图7-42所示。
网站设计制作步骤实操示意图7-42设置事件响应类型
第12步，设置完成后保存为页面，浏览效果如图7-43所示。当单击【换台】按钮，则会切换到选台页面，此时按钮显示为“返回”，如果单击【返回】按钮，则返回到前面页面。
网站设计操作步骤示意图7-43显隐控制按钮
提示；为了便于参考，下面给出行为的触发事件的动作、说明列表，如表下表所示。
网站设计实操案例行为动作说明表
深圳网站制作公司关于网站设计时对于快速处理页面显示与隐藏元素的实操经验分享本文就到这里，希望我们的文章对您的工作有所帮助。博纳网络编辑整理。
深圳网站制作公司关于网站设计时对于快速处理页面显示与隐藏元素的实操经验分享本文就到这里，希望我们的文章对您的工作有所帮助。博纳网络编辑整理。
当前文章链接：/construction/jzhyzx/1526.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
