怎样在Dreamweaver中快速编辑网页标签

 手写代码,相信还会有人继续这样做的,那么,你们有没有研究出怎样才能方便快捷辑网页标签呢?

 

虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换。虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤。有没有更好的办法呢?接下来,学会下面的方法就知道如何提高效率了吧!

 

下面我们以Dreamweaver 8为例,假设大家Dreamweaver面板布局都为默认的布局方式。查看一下属性面板的上方是否有一行小标签。(如果您用的不是MX,标签在状态栏中)例如:你新建一个空白的HTML文档,上面的小标签应该为<body>。请看下图:

 

图上画红框的地方,就是我们今天的主角了。我们先看一下“环绕标签”。在页面上随便打入几个字,选中它们,在右键菜单中选择“环绕标签”,在弹出的环绕标签对话框中输入“<strong>”(不包括引号),然后回车。之前被选中的文字是不是已经变成粗体了,到源代码看一下,我们所选中的文字是不是已经被<strong>标签包围了?大家可以试着再加入其它的一些标签,如:<a>,<p>。这里也可以直接输入属性。如:<p style="color:#CC0000">。这里仅大概说明一下,如有疑问,请查看Dreamweaver的帮助。

下面说一下标签选择器的应用方法。

第一、

我们将光标移动到刚才加粗的文字里,会发现在<body>的后面多了个<strong>。这就是说光标所在处的这些文字的外面有<strong>的标签,在<strong>标签外有<body>标签。下面大家再添加一个表格,把光标移动到表格内,看看标签的结构。相信对HTML有些基础的朋友都应该很容易理解的。

第二、

假设我们现在要插入一个表格,并将这个表格用CSS来将它下移10个象素。先插入一个表格,然后交光标移动到表格内。这时在标签选择器上应该可以看到这样的字样<body><table><tr><td>。然后在table标签上点鼠标右键,会看到有四个选项。删除标签、编辑标签、设置类、设置ID。

 

删除标签:即是将标签删除。(有一些特殊的标签是不能删除的。例如:<table>、<tr>、<td>、<body>...)

编辑标签:给标签附加属性、修改属性等。

设置类:给这个标签附予一个类。(即CSS的类别)

设置ID:给这个标签附予一个ID。(即CSS的ID)

第三、

在这里,我们选择编辑标签,然后在后面加上属性style="margin-top:10px"和正常书写源代码的方式是一样的。然后按下回车。就完成了编辑。如果在Dreamweaver里看不到效果,请用浏览器预览。

第四、

还有另外一种方法,也许你会喜欢。选择窗口→标签检查器当你选择某一个标签后,这里会显示出当前选择标签的所有属性。也可以很快地在这里进行编辑。在这里输入的属性不用包括引号,编辑后按回车确定。

时间: 2024-10-31 07:32:16

怎样在Dreamweaver中快速编辑网页标签的相关文章

教程/dreamweaver/技巧 Dreamweaver快速编辑网页标签

dreamweaver|技巧|教程|网页 不知各位是否有手写代码的习惯.例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢? 虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换.虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤.有没有更好的办法呢?答案是肯定的. 下面我们以Dreamweaver MX为例,假设大家Dreamweaver面板布局都为默认的布局方

Dreamweaver快速编辑网页标签

dreamweaver|网页 不知各位是否有手写代码的习惯.例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢? 虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换.虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤.有没有更好的办法呢?答案是肯定的. 下面我们以Dreamweaver MX为例,假设大家Dreamweaver面板布局都为默认的布局方式.查看一下

如何使用Dreamweaver方便快捷编辑网页标签

dreamweaver|网页 不知各位是否有手写代码的习惯.例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢? 虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换.虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤.有没有更好的办法呢?答案是肯定的. 下面我们以Dreamweaver 8为例,假设大家Dreamweaver面板布局都为默认的布局方式.查看一下属

Dreamweaver方便快捷编辑网页标签

不知各位是否有手写代码的习惯.例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢? 虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换.虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤.有没有更好的办法呢?答案是肯定的. 下面我们以Dreamweaver 8为例,假设大家Dreamweaver面板布局都为默认的布局方式.查看一下属性面板的上方是否有一行小标签.

在Word2016中快速编辑PDF格式文档

  在Word2016中快速编辑PDF格式文档           首先在资源管理器中找到想要编辑的PDF文件,右击它,从右键菜单中选择"打开方式→Word 2016". Word将自动启动,并弹出一个提示框,大意是转换后的文档与原PDF文档的格式会有些不同. 点击"确定",Word开始打开操作,如果PDF文档很大,这个过程会有些漫长.当PDF文档转换完成后,可能还会在上面出现安全提示,询问你是否确定要编辑. 如果需要编辑,可以点击"启用编辑"按

在Dreamweaver中自动设置网页的水平线颜色

dreamweaver|网页 水平线对于制作网页的朋友来说一定不会陌生,它在网页的版式设计中是非常有作用的,可以用来分隔文本和对象.在Dreamweaver中依次点击"插入→标准",然后单击"水平线"按钮即可添加一条水平线.Html代码为< hr>. 在网页设计过程中,如果随意利用缺省水平线,常常会出现插入的水平线与整个网页颜色不协调的情况.打开水平线属性面板也只有宽.高.对齐以及阴影方面的设置,没有对水平线颜色的设置,怎么办? 其实,你只要仔细看一下水

如何在Dreamweaver中快速定义站点?

dreamweaver|站点 本文选自4u2v工作室编写的<Dreamweaver网页设计与制作100例>(人民邮电出版社出版,ISBN: 7115142394 ).未经著作权所有者书面授权许可,禁止转载本文. 购买地址:点击访问 在 Dreamweaver 中建立站点,是进行网站开发的第二个关键步骤.这里所讲的建立站点,其实就是在 Dreamweaver 中定义站点.策划站点结构.部署开发环境.定义站点是为了更好地利用[文件]面板对站点文件进行管理,也是为减少一些错误的出现,如路径出错,链接

dreamweaver中作的网页放到.net中的添加控件问题。

问题描述 我把dreamweaver做的静态网页添加到.net中,并且像在其中加一个imagebutton(web控件),运行的时候显示类型"imageButton"的控件"imageButton1"必须放在具有runat=server的窗体标记内.应该怎么修改? 解决方案 解决方案二:在body下面放入一个大的form:<body><formrunat="server"id="form1">.....

在Dreamweaver中灵活使用网页表格

dreamweaver|网页 在使用Dreamweaver制作主页的时候往往需要改变表格的高度.然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子. 出现这种情况的原因在于我们已经为表格提供了一个固定的高度,当我们要改变表格的高度,尤其是压缩表格的时候,表格的高度仍然保持原来的设定值,其直观表象就是无论你怎样拖动表格的边框,表格的高度都不会变化. 在这种情况下,我们只需要去除掉表格高度的设定,然后拖动表格的边框就可以了.那么应该如何去除表格的高度设置呢? 首先需要