网页设计模块二 网页操作与站点管理.ppt

任务四 管理站点 3．复制站点 首先在“管理站点”对话框中选中要复制的站点，如选择“我的站点”如图2-20所示；单击〖复制〗按钮，在站点列表增加了一个新的站点“我的站点 复制”，表示这个站点是“我的站点”的复制，如图2-21所示；单击复制产生的站点，可以对其进行编辑操作，如改变站名、改变存储位置等 2-20 复制站点 2-21 复制后的站点 模块二 网页操作与站点管理 任务二 使用可视化向导 任务四 管理站点 任务三 规划和创建站点 任务一 网页文件的基本操作 任务一 网页文件的基本操作 步骤1 新建空白网页方法一：执行【开始】→【程序】→【Adobe Dreamweaver CS3】命令，启动Adobe Dreamweaver CS3，如图2-1所示。其中包括：打开最近项目、创建新项目、从模板创建和扩展4个区域。单击“新建”下的HTML选项，这样就可以创建一个新的HTML网页。 子任务1 新建、编辑、保存、关闭与打开网页 任务一 网页文件的基本操作 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）标尺的显示和隐藏状态切换：【查看】→【标尺】→【显示】。 （2）原点更改：将标尺原点图标（在“文档”窗口的“设计”视图左上角）拖到页面上的任意位置。 （3）将原点重设到默认位置，选择【查看】→【标尺】→【重设原点】。 （4）度量单位的更改，选择【查看】→【标尺】，然后选择【像素】、【英寸】或【厘米】。 子任务1 使用“标尺”和“网格” 任务二 认识网站设计的基础知识 2．使用布局网格 网格在“文档”窗口中显示一系列的水平线和垂直线。它对于精确地放置对象很有用。通过网张可以让经过绝对定位的页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。 （1）显示或隐藏网络：【查看】→【网格设置】→【显示网格】 （2）启用或禁用靠齐：【查看】→【网格设置】→【靠齐到网格】 （3）更改网格设置：【查看】→【网格设置】→【网格设置】，在弹出的“网格设置”中进行相应的设置，如图所示。 任务二 认识网站设计的基础知识 任务二 认识网站设计的基础知识 颜色：指定网格线的颜色。请单击色样表并从颜色选择器中选择一种颜色，或者在文本框中键入一个十六进制数。 显示网格：使网格在“设计”视图中可见。 靠齐到网格：使页面元素靠齐到网格线。 间距：控制网格线的间距。输入一个数字并从菜单中选择“像素”、“英寸”或“厘米”。 显示：指定网格线是显示为线条还是显示为点。 如果未选择“显示网格”，将不会在文档中显示网格，并且看不到更改。 任务二 认识网站设计的基础知识 可以使用跟踪图像作为重新创建已经使用图形应用程序（如 Adobe Freehand 或 Fireworks）创建的页面设计的指导。 跟踪图像是放在“文档”窗口背景中的 JPEG、GIF 或 PNG 图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。 跟踪图像仅在 Dreamweaver 中是可见的；当您在浏览器中查看页面时，将看