基础教程_Dreamweaver80

1 第1章网页设计基础 Dreamweaver 8.0 是 Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创意，即可制作出独树一帜的网页。本章重点介绍在 Dreamweaver 8.0 中如何创建站点并进行站点管理，从而为下一步开发网站做好准备，同时，通过本章的学习使读者熟悉 Dreamweaver 8.0 界面及运行环境。 1.1 初识 Dreamweaver 8.0 在使用 Dreamweaver 开发网站之前，首先需要熟悉一下 Dreamweaver 的启动及设计环境。俗话说“工欲善其事，必先利其器”，通过本节可以使大家了解 Dreamweaver 8.0 这个神奇网页制作软件的“庐山真面目”，会使后面的学习变得更加轻松，上手更加迅速。 1.1.1  Dreamweaver 8.0的启动步骤①单击任务栏“开始”按钮，选择“程序”命令。②将光标向右移动，选择 Macromedia 文件夹。③将光标再向右移动，单击MacromediaDreamweaver 8.0图标，Dreamweaver8.0就被启动了。 Dreamweaver 8.0 根据设计人员和编码人员的需求自带了 2 种配置，此外也还可以构建自定义工作区。首次启动 Dreamweaver 8.0 时，系统会弹出一个“工作区设置”界面，可以从中选择一种工作区布局，如图 1-1 所示。“设计器”工作区适合于一般的用户，“编码器”工作区指的是代码编辑界面，适合于具有较高水平网页编程技术的用户。在这里可以选择“设计器”工作区。如果在操作过程中想改变工作区，可单击“窗口”｜“工作区布局”命令，从中选择相应的工作区，如图 1-2 所示。 1.1.2  Dreamweaver 8.0的工作环境启动 Dreamweaver 8.0，双击打开任意一个网页文件，此时 Dreamweaver 8.0 工作界面如图 1-3 所示。可以看出 Dreamweaver 8.0 窗口是一个标准的Windows 窗口，它也有标题栏、菜单栏和快捷菜单。2 图1-1 “工作区设置”界面图1-2 改变工作区图1-3 Dreamweaver 8.0工作界面将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状态下最可能要进行的操作命令。 1．“插入”面板组“插入”面板组上包括 7 个子面板，依次为“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”和“Flash元素”。单击面板组名称右端的下拉按钮，打开下拉列表，如图 1-4 所示，在下拉列表中选择子面板名称，即可打开相应的面板。单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。单击下拉列表中的“显示为制表符”，“插入”面板组则以标签的形式显示，如图 1-5 所示。面板组文件面板文档编辑窗口插入面板组文档工具栏标签状态栏属性面板标题栏菜单栏3 图1-4 “插入”栏中的选项图1-5 “插入”栏以标签显示 2．文档工具栏在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码”视图、“设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图 1-6 所示。“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。图1-6 文档工具栏文档工具栏中主要的工具按钮功能如下。没有浏览器/检查错误按钮—单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及设置目标浏览器的版本等功能。验证标记按钮—可以验证当前文档或选中的标签。文件管理按钮—单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。在浏览器里预览/调试按钮—单击该按钮可以在下拉菜单中实现网页预览（可按 F12 键代替），纠正 JavaScript 的错误及选择浏览器等。刷新设计视图按钮—用于刷新本地和远程站点的目录列表。视图选项按钮—单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。可视化助理按钮—可以使用不同的可视化助理来设计页面。 3．“属性”检查器“属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查器将改为显4 示该图像的属性，如图 1-7 所示。图1-7 图像“属性”检查器在默认情况下，“属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工作区的顶部。单击“属性”字样或左端的下拉按钮，“属性”面板可折叠起来，再次单击面板即可展开。 4．文档编辑窗口网页文档编辑窗口是Dreamweaver 8.0 的主工作区，在这里可以进行网页的设计制作。（1）文档编辑窗口的缩放网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成最大化或还原网页编辑区的操作，如图1-8 所示。图1-8 最大化文档窗口按钮（2）文档编辑窗口的标题栏当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但尚未保存，Dreamweaver 将在文件名后显示一个“*”号。如果文档窗口处于最大化状态时，没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若要切换到某个文档，可以单击相应的选项卡。（3）缩放工具和手形工具此为 Dreamweaver 8.0 新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐5 图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以便查看，如图 1-9 所示。图1-9 缩放工具和手形工具（4）标尺和辅助线选择“查看”｜“标尺”｜“显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以测量页面元素的大小，或者模拟 Web 浏览器的重叠部分（可见区域），如图 1-10 所示。图1-10 辅助线若要创建水平辅助线或垂直辅助线，可以采用以下方法。①从相应的标尺拖动。②在“文档”窗口中定位辅助线，然后松开鼠标。③可以通过再次拖动辅助线来重新定位辅助线。在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。若要以百分比形式记录辅助线，可在创建或移动辅助线时按住 Shift 键。若将光标放到辅助线上，可查看此辅助线的位置，按住 Ctrl 键时可查看辅助线两侧的宽度或高度。（5）编码工具栏（只用于“代码”视图） Dreamweaver 8.0 中新增加的编码工具栏在“代码”视图一侧的沟槽栏中，如图 1-11所示，它提供了用于6 常见编码功能的按钮，可以迅速将代码添加到用户的页面中。图1-11 编码工具栏若要迅速插入代码，请执行以下操作。①选择“视图”｜“代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。②选定插入点在代码中的位置，或选择一个代码块。③单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。编码工具栏中各按钮的功能如下。打开的文档按钮—列出已打开的文档。选择了一个文档后，它将显示在“文档”窗口中。折叠整个标签按钮—折叠位于一组开始和结束标签之间的内容，例如位于 table 和/table之间的内容。折叠所选按钮—折叠所选代码。扩展全部按钮—可还原所有折叠的代码。选择父标签按钮—可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则 Dreamweaver 最终将选择最外面的html和/html标签。选取当前代码的按钮—选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。如果反复单击此按钮且两侧的符号是对称的，则 Dreamweaver 最终将选择该文档最外面的大括弧、圆括号或方括号。行号按钮—可以在每个代码行的行首隐藏或显示行号。高亮显示无效代码按钮—将以黄色高亮显示无效的代码。应用注释按钮—可以在所选代码两侧添加注释标签或打开新的注释标签。删除注释按钮—删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。环绕标签按钮—在所选代码两侧添加选自“快速标签编辑器”的标签。最近的代码片断按钮—可以从“代码片断”面板中插入最近使用过的代码片断。7 缩进代码按钮—将选定内容向右移动。凸出代码按钮—将选定内容向左移动。格式化源代码按钮—将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整个页面。（6）代码折叠通过隐藏和展开代码块，可以重点显示想要查看的代码，如图 1-12 和图 1-13 所示。图1-12 代码折叠前图1-13 代码折叠后若要折叠代码，请执行以下操作。①选择要折叠的代码。②选择“编辑”｜“代码折叠”｜“折叠所选”，或单击所选代码旁边的折叠（+或-）按钮。若要折叠所选代码之外的代码，请执行以下操作。①在“代码”视图中选择代码。②选择“编辑”｜“代码折叠”｜“折叠外部所选”。 5．面板组面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面板。 Dreamweaver 8.0 默认的面板组有以下 4 个。（1）CSS 面板组 CSS 面板组包含“CSS 样式”和“层”两个浮动面板，主要提供交互式网页设计和网页格式化的工具，如图 1-14 所示。（2）“应用程序”面板组“应用程序”面板组包含“数据库”、“绑定”、“服务器行为”、“组件”4 个浮动面板，主要提供动态网页设计和数据库管理的工作，如图 1-15 所示。8 图1-14  CSS面板组图1-15 “应用程序”面板组（3）“标签”面板组“标签”面板组包含“属性”和“行为”两个浮动面板，主要方便代码的调试，如图1-16所示。（4）“文件”面板组“文件”面板组包含“文件”、“资源”和“代码片断”3 个浮动面板，主要提供管理站点的各种资源，如图 1-17 所示。图1-16 “标签”面板组图1-17 “文件”面板组这些面板组中的面板将在以后的章节中逐一介绍。 6．浮动面板组的操作°常用的浮动面板组的操作方法如下。（1）展开和折叠浮动面板组 Dreamweaver 8.0 的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记即可展开与折叠浮动面板。（2）移动浮动面板组将鼠标指向浮动面板组左上角的标签，当鼠标指针变成 4 个方向箭头的图标时，便可移动浮动面板组。利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。（3）重新组合浮动面板选中浮动面板组中某个选项，单击浮动面板组右上角的按钮，打开下拉式菜图1-18 重新组合浮动面板9 单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮动面板，如图1-18所示。 1.2 创建本地站点—我的足球网 1.2.1 案例综述一般来说，用户所浏览的网页都存储在 Internet 服务器上的。所谓 Internet 服务器，就是用于提供 Internet 服务的计算机，对于WWW 浏览服务来说，Internet 服务器主要用于存储用户所浏览的 Web 站点和页面。通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet 服务器上。因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发