网页制作基础教程(Dreamweaver_8[1].0)-样章.docVIP

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的错误及选择浏览器等。 刷新设计视图按钮—用于刷新本地和远程站点的目录列表。 视图选项按钮—单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。 可视化助理按钮—可以使用不同的可视化助理来设计页面。 3．“属性”检查器 “属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查器将改为显示该图像的属性，如图1-7所示。 图1-7 图像“属性