如何快速在Dreamweaver CS3中编辑网页标签

2016-02-20 01:12 24 1 收藏

下面图老师小编跟大家分享一个简单易学的如何快速在Dreamweaver CS3中编辑网页标签教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

不知各位是否有手写代码的习惯。例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢?


虽然Dreamweaver CS3已经为我们提供了代码视图,可是必竟还要手工去查找,还要往返地切换。虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤。有没有更好的办法呢?答案是肯定的。


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

 


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


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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)


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


删除标签:即是将标签删除。(有一些非凡的标签是不能删除的。例如:<table>、<tr>、<td>、<body>...)
编辑标签:给标签附加属性、修改属性等。


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


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


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


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


这里我们只将方法告诉大家,希望大家能够从中受益。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160220/1633466.html

延伸阅读
标签: Web开发
CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种: 1)类比如“.RedText”、“.BlueText”和“.BigText”等等 2)标签针对原有HTML标签做的重新CSS定义 3)高级伪类、定义了ID的元素,以及综合性定义 CSS规则的应用 ...
标签: Web开发
Adobe Dreamweaver CS3作为网页制作的辅助工具之一,已经被人们逐渐掌握并灵活使用,它本身集成了好多实用的东西,例如自定义代码片段。其实很简单,在右栏中找到代码片段(Shift+F9),空白处右键新建代码片段(或先新建文件夹)     接下来把你常用的代码片段输入进去。     输入好后确定,有几个生成几...
标签: Web开发
A. 插入栏 B. 文档工具栏 C. 文档窗口 D. 面板组 E. 标签选择器  F. 属性检查器 G. 文件面板 A. 显示代码视图 B. 显示代码视图和设计视图 C. 显示设计视图 D. 文档标题 E. 文件管理 F. 在浏览器中预览/调试 G. 刷新设计视图 H. 视图选项 I. 可视化助理 J. 验证标记 K. 检查浏览器兼容性 A. 标签选择器 B. 选取工具 C. 手形工具...
标签: Web开发
使用Spry轻松将XML数据显示到HTML页 随着对Dreamweavse cs3中集成Spry功能的深入学习,了解并掌握到Spry框架的一些功能模块,其中就有通过Dreamweavse cs3可视化操作轻松将XML数据显示到HTML页中。 当然,谈到如何将XML数据插入显示到HTML页中,通常立即想到的就是数据岛。比如: xml id="blog" blog titleTest xml/title ...
标签: Web开发
我们在浏览一些网页时,经常会看到有的网页弹出一些信息窗口或浏览器窗口来显示一些网站公告或一些广告信息,想知道这些窗口是怎么制作出来的吗?假如你还不曾知道,那么就请看本文如何利用Dreamweaver MX 2004 来制作这些弹出窗口的方法吧! 一、弹出信息窗口 启动Dreamweaver MX 2004,打开要加载弹出窗口的网页或新建一个网页。按下Sh...

经验教程

631

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部