网页设计与制作项目式课件作者冯文惠田源模块三.pptVIP

模块三 认识Dreamweaver CS5 学习目标 1、掌握DW的主要特点和工作界面 2、规划、创建和管理网站 3、掌握新建和保存网页的方法 4、掌握页面属性设置 任务1 安装和运行Dreamweaver CS5 任务导入 本任务要求安装和运行Dreamweaver CS5软件 知识指导 1.DW的主要特点和工作界面 可视化的网页编辑工具 特点：所见即所得 功能：网站管理、网页编辑 任务2 Dreamweaver CS5的工作界面 任务导入 本任务要求设置Dreamweaver CS5的工作界面为经典，并使文档区显示红色网格，右侧浮动面板区显示插入面板?、CSS面板、文件面板，效果如图3-6所示 ? 知识指导 一．欢迎和工作界面 在欢迎屏幕中有三项列表： 打开最近的项目：此栏中列出了最近打开的文件列表，用户可以双击文件快速将其打开。 新建：此栏中列出了可以创建的新文件类型，如果没有需要创建的文件类型，可以单击“更多”调出更多可创建的文件类型。 主要功能：列出了新增的主要功能，点击后会链接到Adobe网站，对该功能进行介绍和讲解。 二．菜单栏 菜单栏中包含10项菜单，主要用于文件管理、站点管理、对象管理、窗口设置等一系列操作，基本上能够实现Dreamweaver的所有功能 。 三．工具栏 在Dreamweaver中，工具栏包括“文档”、“标准”和“样式呈现”，可以通过执行“查看”→“工具栏”，然后选择工具栏，来显示和隐藏。 “文档”工具栏包含一些按钮，使用这些按钮可以在文档的不同视图间快速切换 “标准”工具栏包含一些按钮，可执行“文件”和“编辑”菜单中的常见操作。 “样式呈现”工具栏包含一些按钮，如果使用依赖于媒体的样式表，这些按钮能够查看设计在不同媒体类型中的呈现方式 。 四．文档窗口 显示当前创建和编辑的文档。在该窗口中可以输入文本、插入图片、绘制表格等，也可以对整个页面进行处理。 *－－有新的更改尚未保存 五．“属性”面板 检查和编辑当前选定页面元素的常用属性 “属性”面板中的内容根据选定的元素会有所不同 双击“属性”面板空白处，将出现更多的扩展属性。再双击，可以关闭扩展属性。 六．常用面板 “插入”面板：包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，可以通过从“类别”弹出菜单中选择所需类别来进行切换。 “文件”面板：查看和管理 站点中的文件。 “CSS样式”面板：跟踪、管理CSS 规则和属性。 “行为”面板：添加常见的交互行为。 任务3 站点的建立与管理 任务导入 创建“玫瑰园餐饮公司”网站的本地站点。具体要求是：在本地计算机的F盘上新建一个文件夹“rose” 。网站的所有图像素材都存放于根目录下的文件夹“images”中。网站名为“玫瑰园”，分“环境展示”、“特色菜肴”、“营养常识”等栏目，这些栏目所有网页和素材都存放在站点根目录下的“environ”、“food”、“nutrient”等文件夹中。 知识指导 站点 可以看做是一系列文档的组合。这些文档之间通过各种链接关联起来，利用浏览器可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 是一种文档的磁盘组织形式，它同样要保存在计算机的物理磁盘上，由文件和文件夹组成。 本地站点：保存在本地机的站点；远程站点：上传到远程服务器的站点。 一．建立站点 （步骤） （1）利用Windows资源管理器创建一个用作本地站点的文件夹。 （2）执行“站点”中“管理站点”命令，打开管理站点对话框，对站点进行新建、编辑、删除等操作。 （3）选择“新建”按钮中的“站点”，打开“站点设置对象”对话框，在“站点”选项卡中设置站点基本信息 站点名称：在文本框中输入站点的名称。 本地站点文件夹：输入完整的路径名称，或者单击文件夹图标，选择具体位置。 二．编辑站点 可以对已经存在的站点进行编辑、复制、删除等操作 方法： 执行【站点】|【管理站点】命令 三．站点的管理 1．新建文件／文件夹 在“文件”面板中单击鼠标右键，在快捷菜单中选择“新建文件”或“新建文件夹”命令 2．编辑网页文件 在“文件”面板中，选择要编辑的网页，双击即可打开该网页的编辑窗口。 3．删除文件 在“文件”面板中，选择要删除的网页，单击鼠标右键，从快捷菜单中选择“编辑”→“删除”命令 任务4 制作第一个网页 任务导入 新建一个网页，设置页面的整体属性，包括背景颜色、背景图像、文字颜色、链接颜色、页边距、页面标题、字符集等。设置页面头部内容，包括定义关键字、说明。 知识指导 一．新建网页 （推荐方法二） 1．方法一 （1）执行【文件】|【新建】命令，弹出“新建文档”对话框，选择HTML文档 （2）系统会为新文档打开一个文档编辑窗口，在其