边做边学——Dreamweaver CS3网页设计案例教程01.ppt

本章简介： 　 网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关的主题或实现相同的目的。本章讲述Dreamweaver CS3的工作界面、创建网站框架、网页文件设置、管理站点的方式等内容。 * 第1章　初识Dreamweaver CS3 课堂学习目标 操作界面 创建网站框架 管理站点 网页文件头设置 1.1　操作界面 操作目的 操作步骤 相关工具 1.1.1　操作目的 通过打开文件和调出属性面板命令，熟悉菜单栏的操作。通过链接选项改变链接文字的状态，熟悉CSS功能的应用方法。 1.1.2　操作步骤 1 2 3 4 1.1.3　相关工具 1.开始页面 启动Dreamweaver CS3后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。 对于老用户可能不太习惯开始页面，可选择“编辑 首选参数”命令，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框，单击“确定”按钮完成设置。当用户再次启动Dreamweaver CS3后，将不再显示开始页面。 开始页面 “首选参数”对话框 2.不同风格的界面 Dreamweaver CS3的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。 若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器”或“设计器”命令，页面则会显示不同的界面风格。 3.伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。 4.多文档的编辑界面 Dreamweaver CS3提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。 多文档的编辑界面 5.插入面板 Dreamweaver CS3的“插入”面板在菜单栏的下方。 “插入”面板 6.更完整CSS功能 传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CS3就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“样式”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。 1.2　创建网站框架 操作目的 操作步骤 相关工具 1.2.1　操作目的 通过打开效果文件，熟练掌握打开命令。通过复制效果，熟练掌握新建命令。通过关闭新建文件，熟练掌握保存和关闭命令。 1.2.2　操作步骤 1 2 3 4 1.2.3　相关工具 1.创建和保存网页 创建站点后，用户需要创建网页来组织要展示的内容。合理的网页名称非常重要，一般网页文件的名称应容易理解，能反映网页的内容。 在网站中有一个特殊的网页是首页，每个网站必须有一个首页。访问者每当在IE浏览器的地址栏中输入网站地址，如在IE浏览器的地址栏中输入“”时会自动打开新浪网的首页。一般情况下，首页的文件名为“index.htm”、“index.html”、“index.asp”、“default.asp”、“default.htm”或“default.html”。 选择“文件 新建”命令，启用“新建文档”对话框，创建空白网页。 网页设计完成后，选择“文件 保存”命令，弹出“另存为”对话框，设置后单击“保存”按钮，将该文档保存在站点文件夹中。 2.在站点地图中创建网页 在站点地图中，各网页文件间的链接关系以树