Dreamweaver ,CS3网页设计案例教程 教学配套课件 王春红 王瑾瑜主编 模块二 网页操作与站点管理.pdfVIP

模块二 网页操作与站点管理 任务一 网页文件的基本操作 任务一 网页文件的基本操作 任务一 网页文件的基本操作 任务二 使用可视化向导 任务二 使用可视化向导 任务二 使用可视化向导 任务三 规划和创建站点 任务三 规划和创建站点 任务三 规划和创建站点 任务四 管理站点 任务四 管理站点 任务四 管理站点 任务一 网页文件的基本操作 子任务1 新建、编辑、保存、关闭与打开网 页 步骤1 新建空白网页方法一：执行【开始】→【 程序】→【Adobe Dreamweaver CS3 】命令，启 动Adobe Dreamweaver CS3 ，如图2-1所示。其 中包括：打开最近项目、创建新项目、从模板创建 和扩展4个区域。单击“新建”下的HTML选项，这 样就可以创建一个新的HTML网页。 任务一 网页文件的基本操作 2-1 Dreamweaver CS3启动 任务一 网页文件的基本操作 步骤2 新建空白网页方法二：Dreamweaver CS3启动后，可以选择 【文件】→【新建】命令，弹出如图2-2所示“新建文档”对话框，选 择“空白页”、页面类型为“HTML”，单击〖创建〗按钮，创建一个 新的空白文档。 2-2 Dreamweaver CS3新建 任务一 网页文件的基本操作 步骤3 编辑网页：新建网页后，可以在代码视图或设计视图进行修 改编辑。如图2-3所示，在设计视图输入“你好，欢迎学习使用 DREAMWEAVER”，并在下方属性面板中设计字体格式为“方正舒 体”，大小为“36”。 2-3 Dreamweaver CS3编辑 任务一 网页文件的基本操作 步骤4 保存网页：单击【文件】→【另存为】，弹出“另存为”对话 框，如图2-4所示。选择路径并输入文件名，选择保存类型为“HTML 文档”，按下〖保存〗按钮即可。 2-4 Dreamweaver CS3保存 任务一 网页文件的基本操作 步骤5 关闭当前网页：单击【文件】→【关闭】菜单命令，即可关 闭当前打开的文档。如果当前文档在修改后没有存盘，则会弹出一 个提示框，询问用户是否保存文档。 步骤6 打开网页：单击【文件】→【打开】菜单命令，弹出“打开” 对话框。选择目录并单击选中要打开的HTML文档，再单击〖打开〗 按钮，即可将选定的HTML文档打开。 任务二 使用可视化向导 子任务1 使用“标尺”和“网格” 1.设置标尺 标尺可帮助用户测量、组织和规划布局。标尺可以显示在页面的左 边框和上边框中，以像素、英寸或厘米为单位来标记。 （1）标尺的显示和隐藏状态切换：【查看】→【标尺】→【显 示】。 （2 ）原点更改：将标尺原点图标（在“文档”窗口的“设计”视图左 上角）拖到页面上的任意位置。 （3 ）将原点重设到默认位置，选择【查看】→【标尺】→【重设 原点】。 （4 ）度量单位的更改，选择【查看】→【标尺】，然后选择【像 素】、【英寸】或【厘米】。 任务二 认识网站设计的基础知识 2 ．使用布局网格 网格在“文档”窗口中显示一系列的水平线和垂直线。它对于精确地 放置对象很有用。通过网张可以让经过绝对定位的页元素在移动时 自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行 为。无论网格是否可见，都可以使用靠齐。 （1）显示或隐藏网络：【查看】→【网格设置】→【显示网格】 （2 ）启用或禁用靠齐：【查看】→【网格设置】→【靠齐到网 格】 （3 ）更改网格设置：【查看】→【网格设置】→【网格设置】， 在弹出的“ 网格设置”中进行相应的设置，如图所示。 任务二 认识网站设计的基础知识 任务二 认识网站设计的基础知识 颜色：指定网格线的颜色。请单击色样表并从颜色选择器中选择一 种颜色，或者在文本框中键入一个十六进制数。 显示网格：使网格在“设计”视图中可见。 靠齐到网格：使页面元素靠齐到网格线。 间距：控制网格线的间距。输入一个