您好,欢迎来到素彩网!

基础(23)如何快速在Dreamweaver CS3中编辑网页标签

来源:sc115.com | 181 次浏览 | 2011-07-29

标签: Dreamweaver cs3 基础如何快速在Dreamweaver CS3中编辑网

不知各位是否有手写代码的习惯。例如:要在一个单元格插入一段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有些基础的朋友都应该很轻易理解的。
假设我们现在要插入一个表格,并将这个表格用CSS来将它下移10个象素。先插入一个表格,然后交光标移动到表格内。这时在标签选择器上应该可以看到这样的字样<body><table><tr><td>。然后在table标签上点鼠标右键,会看到有四个选项。删除标签、编辑标签、设置类、设置ID。
删除标签:即是将标签删除。(有一些非凡的标签是不能删除的。例如:<table>、<tr>、<td>、<body>...)
编辑标签:给标签附加属性、修改属性等。
设置类:给这个标签附予一个类。(即CSS的类别)
设置ID:给这个标签附予一个ID。(即CSS的ID)
在这里,我们选择编辑标签,然后在后面加上属性style="margin-top:10px"和正常书写源代码的方式是一样的。然后按下回车。就完成了编辑。假如在Dreamweaver CS3里看不到效果,请用浏览器预览。
还有另外一种方法,也许你会喜欢。选择窗口→标签检查器当你选择某一个标签后,这里会显示出当前选择标签的所有属性。也可以很快地在这里进行编辑。在这里输入的属性不用包括引号,编辑后按回车确定。
这里我们只将方法告诉大家,希望大家能够从中受益。

搜索: Dreamweaver cs3 基础如何快速在Dreamweaver CS3中编辑网 

最热-Dreamweaver CS3

基础(17)Dreamweaver CS3临时文件的工作方式

基础(24)用Dreamweaver CS3 巧妙格式化您的表格

基础(18)在Dreamweaver CS3中加入CSS样式表的四种方法

基础(25)Dreamweaver CS3中使用层的一些技巧和建议

基础(19)Dreamweaver CS3 实现多分辨率层定位

基础(26)如何在Dreamweaver CS3中做自定义弹出窗口

基础(27)玩转Dreamweaver CS3中的层及应用

基础(28)在Dreamweaver CS3中实现不同分辨率下的层定位

基础(20)使用Dreamweaver CS3文件库功能快速更新网站

基础(29)深入了解Dreamweaver CS3中的内置Fireworks功能

基础(30)教您如何处理Deamweaver CS3中CSS应用无效的问题

基础(31)教您深入了解新的 Dreamweaver CS3 CSS 布局

基础(32)用Dreamweaver CS3打造下拉菜单

素材
精美实用的提示框矢量图7精美实用的提示框矢量图7
精美实用的提示框矢量图6精美实用的提示框矢量图6
折纸网站设计矢量图5折纸网站设计矢量图5
精美实用的提示框05—矢量图精美实用的提示框05—矢量图
精美实用的提示框矢量图4精美实用的提示框矢量图4
折纸网站设计矢量图4折纸网站设计矢量图4
精美实用的提示框矢量图3精美实用的提示框矢量图3
精美实用的提示框矢量图2精美实用的提示框矢量图2
精美实用的提示框矢量图精美实用的提示框矢量图