如何用dw做出这种效果

效果描述:下方小图片类似按钮功能,鼠标点击后上方图片会切换

Dreamweaver是一款所见即所得的网页制作软件;无需写太多代码就能让你做出漂亮的网页,当然,你还可以切换视图,只编辑代码也可以。dreamweaver不仅可以做静态网页,还可以做动态网页。下面分享一下如何使用dreamweaver做一个框架。

工具/原料

    dreamweaver cs5(其他版本也可以)

    方法/步骤

    在开始菜单打开dreamweaver,打开之后,见到的第一页默认应该是下图所示的这样,我们选择html,就进入网页的编辑窗口了。

    如何进入框架的编辑呢,如果你的工作区不是“经典”,那就切换过来,在右上角的位置。这样方便找到布局,当然你还可以在“修改”选项中找到框架。我们就以“经典”工作区进行编辑。

    单击框架右下角的黑色三角形,就出现许多种框架格式,我们选择“顶部和嵌套的左侧框架”,当然你可以根据实际需要选择。这种框架也是比较常用的。

    选择“顶部和嵌套的左侧框架”后会出现一个对话框,如果没有修改的必要,那就选择默认的就行,单击“确定”,对框架进行编辑。

    如果在右侧没有显示框架的窗口,那么可以在“窗口”选项中打开框架窗口,这对于我们后来的编辑很有好处,你也可以直接按"shift+f2"快捷键打开。

    我们可以对框架进行各种编辑,如修改边框颜色和宽度。在刚刚打开的框架窗口里单击需要编辑的那一层的边框,或者直接单击编辑窗口里的框架边框,不过通常前者更加方便和直观。这样做之后,会出现下面的属性。我们就可以进行各种编辑了。

    因为框架每一个框都是一个独立的网页,所以保存的时候要特别注意,不仅需要保存每个网页文件,还得保存边框的结构。比如说刚刚我建立的哪个框架,需要保存四个文件。

    END

    注意事项

    注意保存的文件,要把框架结构也保存了。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-01-29
功能主要是用js来做的,而且网上很多类似的js焦点图特效,你下载相关的js与css后,加载到网页里,再把相关的后html代码复制到合适的位置就能实现了。然后你再修改一下,就能达到你的要求。
第2个回答  推荐于2017-10-20
DW是一个编辑器,现在这种效果是HTML5+CSS3可以做出来或者用jQuery!追问

你好,用dw软件不能实现吗?

追答

DW只是代码的编辑器,DW编辑代码。是代码是实现这种效果而不是DW软件。DW软件是可以编辑出来这种效果的!

本回答被网友采纳
第3个回答  推荐于2018-01-29
用显示隐藏层可以实现此功能追问

您好,那请问如何用dw实现呢?简要的操作呢

本回答被提问者和网友采纳
第4个回答  2018-01-29
用显示隐藏层可以实现此功能