第七章网页综合的设计－ DREAMWARE DREAMWEAVER是MACROMEDIA公司出品的.ppt

Dreamware  Dreamweaver是Macromedia公司出品的专门用来创建和管理网站的专业软件，应用Dreamweaver，可以轻松构建网站结构，高效地制作网页。 7.1案例回顾 在第二章中我们对“淡蓝的天空”个人网站进行了前期的规划和设计，现将第二章已做的工作汇总如下： 第七章 网页综合设计－ 本章主要介绍一下内容： 7.1案例回顾 7.2网页综合设计 实例7－1 熟悉Dreamweaver的基本环境 实例7－2 创建“淡蓝的天空”个人网站本地站点 实例7－3 “淡蓝的天空”个人网站首页设计（一） 实例7－3 “淡蓝的天空”个人网站首页设计（二） 实例7－4 “淡蓝的天空”----“感动你的心灵”栏目网页设计 实例7－5 表单网页的设计 实例7－6 “游泳健身网”首页－框架网页的设计 注： “感动你的心灵”和“那笨拙的脚印”为重点栏目。 以上为“淡蓝的天空”个人网站前期已做的相关工作，本章仍然以第二章案例为准来详细介绍完整的网页设计过程，期望以点代面使学习者对网站的设计过程有个完整设计思路。 7.2网页综合设计 在使用Dreamweaver之前，必须先建立一个本地站点，然后才能进行后续的操作。本地站点是存放网站上所有文档和文件的地方，它可以将各种信息制作成网页的形式，然后以超连接的形式有效组织起来。本地站点需要一个名称和本地的根目录，以确定存放所有站点文件的位置，可以放在硬盘的任何位置。 实例7－1 熟悉Dreamweaver的基本环境 一、要求与目的 ★ 掌握Dreamweaver的基本工作环境：窗口、菜 单、插入、文档工具栏、状态栏等 ★ 掌握“属性”工作面板 二、过程与步骤 1.启动Dreamweaver软件 单击“开始－程序－启动－Macromedia－Macromedia Dreamweaver MX 2004” 启动Dreamweaver软件。 Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。使用者可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框，如图7－2所示。 如果设计者熟悉编写代码，选择“代码编写者”；如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可在软件正常启动后使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如图7－2所示： 注释：“设计者”工作区是一个使用多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。 “代码编写者”同样是集成工作区，但将面板组停靠在左侧，文档默认状态下显示代码窗口。 本例选择“设计者”工作区界面。 2. Dreamweaver工作界面 建立新页面或者打开已经完成的页面时，会出现工作区窗口，如图7－3所示。栏目说明如下： (1)“插入栏”，也叫工具栏（如图7－4）：包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，设计者可以通过单击“插入”栏中的“表格”按钮插入一个表格。 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。 “插入栏”中“常用”按钮里的选项说明： “常用”类别可以创建和插入最常用的对象，例如图像和表格。 “布局”类别可以插入表格、div 标签、层和框架。还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”类别包含用于创建表单和插入表单元素的按钮。 “文本”类别可以插