10 个简单但有用的 Dreamweaver 初学者提示和技巧

已发表: 2019-06-27

Adobe Dreamweaver 是网页设计师的强大工具。 Dreamweaver 提供了一个可视化设计界面和代码编辑器来开发网站。 虽然它有利也有弊,但其广泛的功能使您可以有效地构建网站。

目录隐藏
1.删​​除换行符:
2.记得定义一个站点:
3.增加代码的字体大小:
4.关闭CSS背景速记:
5. 使用 CSS Designer 复制样式:
6.消除导航栏:
7. 管理您的文件:
8. 选择标签选择器:
9. 使用片段:
10. 连接 WordPress 和 Dreamweaver:

这里有 10 个简单但有用的 Dreamweaver 提示和技巧,适用于初学者。

1.删​​除换行符:

在将文档、电子邮件或 Word 文件中的文本复制到 Dreamweaver 时,您最终会在段落或行的末尾出现换行符。 链接中断字符 <br> 表示行结束,因此它后面的任何文本都将显示在它下面的行上。 这些字符是不可见的,因此很难删除它们。 尽管 Dreamweaver 通常不会突出显示这些字符,但您可以更改首选项菜单中的设置,使程序显示一个黄色小图标,表示换行符。 一旦换行符可见,您就可以轻松删除它们。

2.记得定义一个站点:

人们经常将使用 Dreamweaver 与使用 Word 文档混淆。 然而,设计一个站点并不是要构建一个文件,而是要构建一个包含一系列相互关联的文件(例如图像、JavaScript 文件、网页和 CSS 文件)的站点。 不了解这一点的用户通常会忘记设置站点的重要性。 Dreamweaver 提供了一个易于设置的站点进程。 它提供有关站点文件位置的信息,并允许您选择众多 Dreamweaver 管理工具之一。 这些工具将您的文件传输到您的 Web 服务器、检查损坏的链接并使用模板构建站点。

3.增加代码的字体大小:

借助 Dreamweaver 调整字体大小的功能,您可以通过几个简单的步骤来增加代码大小。 要增加字体大小,首先选择 Dreamweaver > 首选项,然后单击字体类别,然后选择新大小并单击确定。 这将帮助您使代码易于阅读,并且您可以长时间开发您的网站而不会让您的眼睛疲劳。

4.关闭CSS背景速记:

CSS 的特性之一是背景属性。 此功能允许您为背景添加颜色或图像。 Dreamweaver 的背景速记属性将 3 行代码缩短为仅定义图像、颜色和重复属性的一行。 这当然可以更容易地定义背景属性,但是如果您在速记版本中保留一个属性,Web 浏览器会将其视为“无”。 例如,如果您仅指定图像属性,则在更改背景时,Web 浏览器将从以前的背景中删除现有颜色。 因此,最好关闭 CSS 背景速记以避免这个问题。

5. 使用 CSS Designer 复制样式:

使用 CSS Designer,您可以直观地增强网页上的样式。 如果您希望使用 CSS 设计器的更多功能,请右键单击任何选择器以使用复制或复制操作。 这些选项允许您将样式从一个选择器复制到另一个选择器。 这些样式包括背景、文本、动画或边框。 如果要复制整个选择器,请使用标准的复制或复制到媒体查询命令以实现目标方法。 这些快捷方式将为您节省大量时间并保持一致的样式。

6.消除导航栏:

Adobe Dreamweaver CS5 带有一个浏览器导航工具栏。 创建此工具栏是为了与 Dreamweaver 的实时查看选项一起使用。 您可以在文档窗口中找到这两个选项。 实时视图用于查看网页的预览。 使用实时视图,您可以单击链接并移至特定页面。 导航工具栏显示新页面的位置,并允许您轻松地在页面之间导航。 您可以在不使用时隐藏此工具栏,方法是取消选中视图 > 工具栏部分中的浏览器导航选项。

7. 管理您的文件:

当您使用 Dreamweaver 设置站点时,所有文件都显示在“文件”面板中。 您可以将此文件面板用于许多功能,例如重命名、移动和突出显示文件名。 这可能很常见,您可能知道所有这些,但网页与常规文件不同。 网页具有来自外部样式表文件的图像、指向其他网页的链接和 CSS 样式。 通过 Windows 资源管理器正常重命名图像、网页或 CSS 文件可能会导致链接断开。 而 Dreamweaver 允许您在使用文件面板移动或重命名文件时自动更新链接。 这样就没有断开的链接。

8. 选择标签选择器:

在应用 CSS 类样式时,精确地添加或删除标签可能很困难。 对于选择精确的线条,Dreamweaver 的标签选择器是最好的。 标签选择器位于文档窗口的左下角。 此选择器显示文本周围出现的所有 HTML 和其他标签。 您可以通过单击标签选择器栏中的可用标签来选择特定标签。 突出显示的标签表示该标签已被选中。

9. 使用片段:

Dreamweaver 提供的代码片段是可以节省大量时间的核心代码片段。 片段通过 Creative Cloud 同步,确保它们在每个系统上都可用。 您可以将最常用的快捷键指定为键盘快捷键。 如果要编辑快捷键,请打开键盘快捷键设计并复制标准集。 然后,选择命令部分下方的片段类别以选择您的收藏夹。 然后,您将找到所有可用片段的列表,包括您创建的片段。 最困难的部分是找出未使用的键盘组合。 但这可以通过使用修饰符来解决。

10. 连接 WordPress 和 Dreamweaver:

Dreamweaver 和 WordPress 组成了一个伟大的团队。 您可以使用 Dreamweaver 的动态文件工具集设计和修改 WordPress 页面。 此工具集包括自定义过滤器、动态相关文件和特定于站点的代码提示。 困难的部分是弄清楚如何使用 Dreamweaver 处理其他站点页面。 您应该首先从 WordPress 站点根目录中的 index.php 文件开始,然后从那里导航。 您可以将路径直接添加到 Web 地址或使用 Dreamweaver 功能单击链接。 页面显示后,您可以控制 Dreamweaver 中的 CSS 和其他工具。

Adobe Dreamweaver 非常适合构建网站。 除了代码完成、代码折叠和语法高亮等基本功能外,它还具有一些高级功能,例如代码自省和实时语法检查。 这些提到的技巧将帮助您更有效地构建您的网站。 如果您正在寻找无需大量编码即可构建网站的工具,请查看这些网站构建工具。