网页制作基础教程（Dreamweaver80）（第2版）样章.doc

PAGE 6 计算机硬件技术基础学习指导与练习 PAGE 1 第1章 计算机中的数据和编码 ISBN 978-7-121-09530-6 ? 书名 网页制作基础教程（Dreamweaver 8.0）（第2版） 样 章 第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文件夹。 ③ 将光标再向右移动，单击Macromedia Dreamweaver 8.0图标，Dreamweaver 8.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窗口，它也有标题栏、菜单栏和快捷菜单。 图1-1 “工作区设置”界面 图1-2 改变工作区 文档工具栏标签状态栏属性面板文件面板标题栏菜单栏插入面板组文档编辑窗口面板组 文档工具栏 标签状态栏 属性面板 文件面板 标题栏 菜单栏 插入面板组 文档编辑窗口 面板组 图1-3 Dreamweaver 8.0工作界面 将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状态下最可能要进行的操作命令。 1．“插入”面板组 “插入”面板组上包括7个子面板，依次为“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”和“Flash元素”。单击面板组名称右端的下拉按钮，打开下拉列表，如图1-4所示，在下拉列表中选择子面板名称，即可打开相应的面板。 单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。 单击下拉列表中的“显示为制表符”，“插入”面板组则以标签的形式显示，如图1-5所示。 图1-4 “插入”栏中的选项 图1-5 “插入”栏以标签显示 2．文档工具栏 在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码”视图、“设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图1-6所示。“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 图1-6 文档工具栏 文档工具栏中主要的工具按钮功能如下。 没有浏览器/检查错误按钮—单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及设置目标浏览器的版本等功能。 验证标记按钮—可以验证当前文档或选中的标签。 文件管理按钮—单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。 在浏览器里预览/调试按钮—单击该按钮可以在下拉菜单中实现网页预览（可按F12键代替），纠正JavaScript的错误及选择浏览器等。 刷新设计视图按钮—用于刷新本地和远程站点的目录列表。 视图选项按钮—单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。 可视化助理按钮—可以使用不同的可视化助