使用Dreamweaver8实现网页区域选择显示

dreamweaver|dreamweaver8|网页|显示

  我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容。比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用。我们想在页面上放两个radiobutton,根据用户的选择,来显示注册表格或登录表格。这些操作是在同一个页面中完成的,不需要跳转到其它页面或刷新当前页面。下面我们就来讲述如何实现这样的功能。

  打开Dreamweaver8,添加两个单选按钮,名称分别为radiobutton1和radiobutton2。

  radiobutton1供新用户注册点击,radiobutton2供老用户登录点击。再添加一个表格,用来显示新用户的注册登记区域。在表格中插入需要的相关元素、文字;再插入一个表格,用来显示老用户登录区域,同样在表格内插入相关内容。这样,我们就简单地设计好了界面。

  接着,我们就开始编辑相关的代码。选中第一个表格,在HTML编辑窗口中对其进行修改,在表格

  <table id="newuser" style="display:none" border="0" cellspacing="0" cellpadding="0">

  同样的方法对第二个表格进行修改,ID值为“olduser”。这是我们按下F12预览,在浏览器中看到的只是两个radiobutton,表格是不可视的。

  完成以上编辑后,开始编写radiobutton的代码。选中radiobutton1为其添加一个onclick的事件响应,代码如下:

  <input type="radio" name="radiobutton" value="radiobutton">

  代码含义是点击radiobutton1时,设置表格newuser的display属性为空,即可视,表格olduserdisplay属性为none不可视。

  同样编辑radiobutton2代码,它的onclick事件响应和radiobutton1恰恰相反,代码如下:

  <input type="radio" name="radiobutton" value="radiobutton" >

  完成以上步骤后,就搞定了这个页面的制作。F12预览,浏览器中,我们点击radiobutton1就会显示新用户注册界面;再点击radiobutton新用户注册界面不可视,老用户登录界面显示。

  通过很简单的代码编辑,就可以实现这个非常实用的功能。虽然我们用层也可以实现这样的效果,但是层在网页中精确定位远没有表格方便,不便于网页的整体布局设计。

时间: 2024-08-07 19:43:22

使用Dreamweaver8实现网页区域选择显示的相关文章

Dreamweaver8实现网页区域选择显示

我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容.比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用.我们想在页面上放两个radiobutton,根据用户的选择,来显示注册表格或登录表格.这些操作是在同一个页面中完成的,不需要跳转到其它页面或刷新当前页面.下面我们就来讲述如何实现这样的功能. 打开Dreamweaver8,添加两个单选按钮,名称分别为radiobutton1和radiobutton2. radiobutton1供新用户注册点击,r

不要跳转或刷新 实现网页区域选择显示

刷新|网页|显示 我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容.比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用.我们想在页面上放两个radiobutton,根据用户的选择,来显示注册表格或登录表格.这些操作是在同一个页面中完成的,不需要跳转到其它页面或刷新当前页面.下面我们就来讲述如何实现这样的功能. 打开Dreamweaver,添加两个radiobutton,名称分别为radiobutton1和radiobutton2.radiobut

使用Dreamweaver8在网页中轻松插入Flash视频

dreamweaver|dreamweaver8|插入|网页 在 Dreamweaver 的"文档"窗口中打开 index.html 页面,插入一个三列的表格,在由三列组成的表格的中间一列中放置的图形之上单击一次. 选择"插入">"媒体">"Flash 视频". 在"插入 Flash 视频"对话框中,从"视频类型"弹出式菜单中选择"渐进式下载视频". 关于

入门:Dreamweaver8设计网页背景实例讲解

dreamweaver|dreamweaver8|设计|网页|网页背景 本教程由网页教学网原创.网页教学网-专业的网页教学站点,为您提供最新.最快.最实用的技术. 我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性&qu

Win8桌面上管理通知区域图标显示

Windows8系统颠覆传统的操作界面引起了不少用户的兴趣,与此同时Windows8完美的触控操作体验也能更好地支持平板和触屏电脑等产品,众多PC生产商也不失时机陆续推出预装Windows8系统的新品抢占先机.对于全新的Windows8系统来说,广大用户或许还需要一些时间去熟悉,但其实对于很多一直在使用Win7电脑的用户来说上手还是非常容易的,在WiN8提供的传统桌面下,各种设置操作依然熟悉.以通知区域的管理来说,我们每个人都有自己常用的软件程序需要时刻关注其动态,比如QQ新消息的到来,第一时间

win8.1在局域网内打开IE浏览器要很久网页才会显示如何解决

  win8.1在局域网内打开IE浏览器要很久网页才会显示如何解决            具体方法如下: 1.打开"Internet 选项"(打开IE浏览器"Internet选项"窗口的方法),切换到"连接"选项卡; 2.点击"局域网(LAN)设置"区域的"局域网设置"按钮,打开"局域网(LAN)设置"窗口; 3.取消勾选"自动配置"区域的"自动检测设置&q

如何解决在浏览网页时网页图片不能显示的问题

而,许多网友在浏览网页时遇到网页图片不能显示的问题,给网络应用带来了很大的不便.造成网页图片不能显示的原因很多,现在,我们通过多种方式进行探索和解决. 首先,我们可以尝试使用金山卫士对系统进行修复,系统修复中包含了IE修复,可以解决浏览器出错引起的网页图片无法显示问题. 打开金山卫士,点击"查杀木马"图标,再点击"系统修复"选项卡即可. 扫描完成后点击"修复"即可解决一些网页不显示图片的问题. 如果网页不显示图片的问题仍然没有解决,我们需要手动检

win7系统无法打开网页,一直显示处于脱机状态怎么办?

  网络如果是好的,如果是正常的,那么咱们就可以正常的使用win7旗舰版下载电脑中所有的程序,不管是单击程序还是联网程序,都是可以使用的,例如咱们的QQ.IE浏览器等等,但是有时候,咱们也会发现一些不同寻常的情况,就如咱们的QQ程序是可以登陆使用的,但是IE浏览器却无法打开网页.这不,今天就有一位使用win7旗舰版电脑的用户表示,自己的网络是连接好的,但是浏览器一直无法打开网页,一直显示处于脱机状态,那么这个问题咱们要如何解决呢?下面,小编就来详细的介绍一下吧! 1.首先,咱们单击打开win7旗

网页图片不显示的原因

网页图片显示不出来,主要有2个原因,一个是网络原因(包括我们的上网速度,以及网站所在服务器的网络速度);另外一个是我们电脑浏览器的设置问题(比如设置不当,或者遭病毒破坏等). 既然我们找到的网页图片不能显示可能的大致原因,那么解决问题就有了方向,我们采用排除法.从简单入手,首先我们使用杀毒软件对电脑进行一次全盘扫描,以便排除电脑病毒的问题.如果查杀到病毒,清除后问题解决了,那么多半是病毒问题引起的.如果查杀病毒后图片不能显示故障依旧,那么我们重点查看网络问题,方法可以这样:先换一个需要验证码的注