Dreamweaver教程-使用属性面板

Dreamweaver属性面板可以快速更改HTML、CSS属性,从而实现页面修改效果所见即所得。

1.仍然使用greenstart.html文件作为示例文件,打开后切换到设计视图。

2.如果属性面板被隐藏了,在菜单栏选择“窗口”>“属性”。

3.选取正文中的“绿色下载吧”,然后单击“B”按钮应用 <strong> 标签给文字加上粗体效果。

4.在“属性”面板中,单击“CSS”按钮。

5.随意选取一段文字,比如“999导航”。

6.属性面板中的“颜色”选取绿色(#090)。

 

7.出现“新建CSS规则”对话框。

8.选择器类型为“类”,然后在“选择器名称”框中输入“.green” (如阁4.25所示)。单击“确定”按钮。

 

 

所选的文本将改变颜色。在格式化的文本中插入光标时,注意底部的<span.green> 标签选择器。

9.切换到“代码”视图,并观察所选的代码。它应该如下所示:

 

1

<span class="green">999导航</span>

Dreamweaver使用<span>标签创建了一个CSS类,并自动把它应用于所选的文本。

10.单击“设计”视图按钮。

11.随意选取一段黑色的文字,比如“众多电商类”。然后在“属性”检查器中,单击“HTML”按钮,并从“类”菜单中选择“green”。所选文本字体颜色会更改为绿色。

12.再切换回“代码”视图,可看到代码已经变成。

 

1

<span class=“green"><strong>众多电商类</strong></span>

时间: 2024-11-01 10:56:33

Dreamweaver教程-使用属性面板的相关文章

Dreamweaver CS5 属性面板 设置教程

使用"属性"面板 "属性"面板默认位于工作区的下面,并且会随所选元素的类型而显示不同的属性选项. 1.使用HTML选项卡 把光标插入到工作区的任何文本中,"属性"面板能快速设置一些基本的HTML代码和格式化效果.当选择HTML按钮时,可以应用标题和段落标签,以及粗体.斜体.项目列表.编号列表和缩进及其他格式化效果和属性. 2.使用CSS选项卡 单击CSS (层叠样式表)按钮,可以快速设置与CSS格式化效果相关的命令. 3. 图像和表格属性 当你选

Dreamweaver用属性面板创建链接

  网页中最重要的元素就是链接,今天小编为大家介绍一下在dreamweaver中如何添加超链接. 首先选中需要添加超链接的文字,点击属性面板中的链接文件夹.   选中需要链接到的网页文件后点击"确定"按钮.   超链接添加完成后就可以得到如下效果.            注:更多精彩教程请关注三联软件使用栏目

Dreamweaver改变元素属性行为教程

  在Dreamweaver中使用"改变属性"行为可以更改页面元素的属性值. 一.Dreamweaver改变元素属性行为 1. 选择一个页面元素或者对象. 2. 打开行为面板. 3. 点击"添加行为(+)"按钮,在弹出的下拉菜单中选择"改变属性"命令.如下图所示: 4. 打开"改变属性"对话框,如下图所示: 元素类型:选择要改变属性的元素. 元素 ID:选择的元素如果有ID,会在此处自动显示出来.如果没有ID,添加ID后,再重

《Adobe Fireworks CS6中文版经典教程》——1.3使用属性面板

1.3使用属性面板 Adobe Fireworks CS6中文版经典教程 属性面板是上下文敏感面板,因此它将随用户在画布上选定的对象而异.用户选择不同的工具时,属性面板将更新,并显示当前工具的可编辑属性. 正如读者在本课第1节中看到的,使用工具面板很容易找到并添加一个矩形以及修改其填充色. 选择形状后,用户可在属性面板中修改众多的其他矢量属性. 1.选择工具面板左上角的指针工具(). 2.单击画布中左边的矩形以选择它. 3.在属性面板中,单击"渐变填充"图标,如图1.13所示.矩形的

《Adobe Fireworks CS5中文版经典教程》——1.3 使用属性面板

1.3 使用属性面板 Adobe Fireworks CS5中文版经典教程用户选择不同的工具时,属性面板将更新,并显示当前工具的可编辑属性.属性面板是上下文敏感的,因此将随用户在画布上选定的对象而异. 正如读者在本课第一节看到的,使用工具面板很容易找到并添加一个矩形以及修改其填充色.选择形状后,用户可在属性面板中修改众多的其他矢量属性. 1.选择工具面板左上角的指针工具(). 2.单击画布中的黑色矩形以选择它. 3.在属性面板中,从填色框旁边的"填充类别"弹出菜单中选择"渐变

Dreamweaver属性面板创建链接

  首先选中需要添加超链接的文字,点击属性面板中的链接文件夹. 选中需要链接到的网页文件后点击"确定"按钮. 超链接添加完成后就可以得到如下效果.

Dreamweaver教程-在 Dreamweaver 中编写 HTML 代码

 1.启动 Dreamweaver CS5 2.点击左上角的"文件"> "新建". 3.在"新建文档"界面选择"空白页". 4."页面类型"选择"HTML","布局"选择"<无>".然后单击"创建"按钮.   在Dreamweaver中打开新文档窗口.切换到 "代码"或者"拆分&q

Fireworks 8 寻梦之旅(3):自动形状属性面板

上节我们讲了: Fireworks 8 寻梦之旅(2):图像编辑面板 二."自动形状属性"面板 本节教程面向对象:Fireworks 的初级使用者. 在 Fireworks 8 新增的"自动形状属性"面板使得我们对于"自动形状"对象的控制更为自由,同时通过详细数据的调整,也使得制作的"自动形状"对象更为精确. 这个面板的使用主要通过两种方式来进行,一是直接通过单击工具箱上的"自动形状"按钮组的单个形状按钮在

Fireworks8.0自动形状属性面板及应用实例

本节教程面向对象:Fireworks 的初级使用者. 在Fireworks 8新增的"自动形状属性"面板使得我们对于"自动形状"对象的控制更为自由,同时通过详细数据的调整,也使得制作的"自动形状"对象更为精确. 这个面板的使用主要通过两种方式来进行,一是直接通过单击工具箱上的"自动形状"按钮组的单个形状按钮在编辑区插入自动形状,然后使用该面板对其属性进行更改:还有就是可以从"自动形状属性"面板中直接向文档中