《网页设计与制作》全套PPT电子课件教案-第2章 站点创建与页面属性.ppt

张永良、郑伟张永良、郑伟 著，清华大学出版社，著，清华大学出版社，2002006 6年年9 9月月 版权所有，未经许可，请勿传播。 网页设计与制作 主讲：周文苑 南邮吴江学院 email： 第2章要点 n站点规划和设计 n设置dreamweaver mx站点 n编辑dreamweaver mx站点 n设置文档属性 21 站点的概念 n n 本地站点本地站点 n远程站点 n测试站点 本地站点本地站点 n本地站点是的工作目录，也就是存放网页的本地文件 夹。 远程站点 n远程站点是存储用于测试、生产、协作等文件的地方 ，具体是哪些文件取决于开发环境。 测试站点 n测试服务器文件夹是dreamweaver处理动态页面的文 件夹。 ndreamweaver使用此文件夹生成动态内容并在工作时 连接到数据库。主要在对动态页面进行测试时使用。 22 关于站点规划和设计 n规划站点结构 n创建站点 n站点管理 规划站点结构 n导航草图设计 站点的创建 在用dreamweaver进行站点设计之前，必 须先熟悉站点窗口。 n站点窗口的显示 n站点的创建 站点窗口的显示 站点的创建和管理主要在站点窗口中进行。显示站 点窗口的方法有如下两种： n在窗口浮动面板组中，单击浮动面板组上的 按 钮展开“文件”面板，如图所示。再单击“站点” 下拉列表，打开如图所示的“站点”下拉列表。 n选择窗口文件菜单命令，或按【f8】键在 dreamweaver mx 2004右侧的浮动面板组中打开“文 件”面板。 n 站点的创建 站点的创建方法有多种。下面介绍一种最适合初学 者的方法，其他方法将在上机实战中讲解。具体操作 如下。 （1）按上述方法打开如图所示的“文件”面板。 （2）单击“文件”面板“站点”下拉列表中的“管 理站点”项，如图所示，打开如图所示“管理站点” 对话框。 （3）单击 按钮，打开如图所示的菜单列表。 图4图5 图6 图7 （4）在菜单列表中选择“站点”命令，在左侧 的列表框中将显示“未命名站点 1”，并打开如图 所示的“未命名站点 1 的站点定义为”对话框。 （5）在“基本”选项卡中的文本框中输入要设 置的站点名称，如“校园青春”，“未命名站点 1 的站点定义为”对话框变为如图所示的“校园青春 的站点定义为”对话框。 （6）单击 按钮进入“第2部分”对话框 ，系统 询问是否要使用服务器技术，这里选中 单选项，如图所示。 图8图9 图10图11 若选中 单 选项，表示该站点是一个静态站点， 没有动态页；若选中 单选项，则对话框变为如上图所示， 在其下拉列表中可选择需要的选项。 （7）单击 按钮进入“第3部分”窗口，如图所 示。该窗口询问在开发过程中要如何使用创建的文件 。这里选中 单选项。 （8）在下方的文本框中输入本地站点根目录的位置 ，也可以单击文本框后的 图标， 打开如图所示的对 话框。 （9）在如上图所示对话框中选择本地站点网页放置 的位置，再单击 按钮，则打开如下图所示的对话 框。 （10）单击 按钮进入“共享文件”对话框 ，如图所示。在“您如何连接到远程服务器”下 拉列表框中选择“本地/网络”选项。 （11）单击第二个文本框右侧的 图标，在打开 的对话框中选择站点文件在服务器上放置的位置 后进入如图所示对话框。 （12）然后单击 按钮，进入“共享文件， 2部分完成”对话框，如所示。 （13）选中 单选项，单击 按 钮进入“总结”对话框，如图所示。 （14）单击 按钮完成本地站点的设置。此时 创建的站点显示在“管理站点”对话框中，如图所 示。 （15）确定准确无误后，单击 按钮，新站点 创建完毕并显示在“文件”面板中，如图所示。 站点管理 o 站点窗口中的文件操作 o 在站点中添加新文件或文件夹 o 删除文件或文件夹 o 重命名文件或文件夹 o 编辑文件 o 管理站点的使用 o 删除站点 o 编辑站点 站点窗口中的文件操作 站点窗口中直接对站点中的文件进行操作十分方便 快捷，下面进行具体讲解。 n查看站点中的文件 n在站点中添加新文件夹和文件 n重命名文件或文件夹 n删除文件或文件夹 n编辑文件 查看站点中的文件 查看站点中文件的具体操作如下。 （1）直接按【f8】键打开“文件”面板。 （2）在“站点”下拉列表框中选择要查看的站点 。 （3）在“视图”下拉列表框中选择要查看的视图 （即本地站点还是远程站点等）。 （4）在下面的显示框中单击相应的文件即可， 如图所示。 在站点中添加新文件夹和文件 在站点中添加新文件夹和文件的具体操作如下。 （1）打开“文件”面板，选择要建立新文件夹或 文件的根目录，如图所示。 （2）在根目录图标上单击鼠标右键，在弹出的快 捷菜单中选择“新建文件”或“新建文件夹”命令 ，如图所示。 （3）dreamweaver会自动创建名为“untitled.htm” 的新文件或名为“untitled”的文件夹，并自动设 置为可改写状态，如图所示。 （4）直接输入新的名称即可，如“new.htm”，如图 所示。 重命名文件或文件夹 要重命名文件或文件夹，只需在“文件”面板 中要重命名的文件或文件夹的名称上单击鼠标即 可进入可改写状态，重新输入新的名称即可。 也可以在要重命名的文件或文件夹图标上单 击鼠标右键，在弹出的快捷菜单中选择编辑 重命名菜单命令也可进入可改写状态，重新输 入新的名称即可。 还有一种方法就是先 选中要重命名的文件或文 件夹，再按【f2】键，也 可进入可改写状态，重新 输入新的名称即可。 删除文件或文件夹 要删除文件或文件夹，首先选中它，然后按【 delete】键，在打开的确认对话框中单击 按钮即可。 也可以在要删除的文件或文件夹图标上单击鼠 标右键，在弹出的快捷菜单中选择编辑删除菜 单命令，在打开的确认对话框中单击 按钮确认 删除即可。 n编辑本地站点 n删除本地站点 管理站点的使用 编辑本地站点 在dreamweaver中可以对本地站点进行打开、编 辑、删除和复制等操作。具体操作如下。 （1）在如图所示的“管理站点”对话框左侧列 表中选择要编辑的站点，如“校园青春”，然后单 击 按钮，打开“校园青春 的站点定义为 ”对话框，如图所示。 （2）单击“高级”选项卡，在“分类”列表框 中选择“本地信息”选项，在右侧“本地信息”栏 中进行具体的设置。各参数项的含义如下。 删除本地站点 如果不再需要利用dreamweaver对某个站点进行操 作，这时可以考虑将该站点从站点列表中删除，具体 操作如下。 （1）在如图所示的“管理站点”对话框左侧列表中 选择要编辑的站点后单击 按钮。 （2）弹出一个警告对话框，如图所示，提示执行本 操作后将不能撤消。 （3）单击 按钮后返回到“管理站点”对话框， 如图所示。 （4）单击 按钮即完成删除所选站点的操作。 从“管理站点”列表中 删除站点只是删除 dreamweaver同本地站点 的连接关系，并没有从 硬盘上删除本地站点， 可以单击“管理站点”窗口 中的 按钮进行恢复 。 n 1外观 n 2链接 n 3标题 n 4标题/编码 n 5跟踪图像 23 页面属性的设置 n1、页面字体 n2、大小 n3、文本颜色 n4、背景颜色 n5、背景图像 n6、边距设置 外观 页面设置外观 具体操作如下。 （1）在“文件”面板中双击“new.htm”文件， 打开“new.htm”文档，如图所示。 （2）选择修改页面属性菜单命令，打开“ 页面属性”对话框，如图所示。 （3）在“分类”列表框中选择“外观”选项，在 对话框右侧将显示“外观”项的参数设置，如图所 示。该栏中各参数含义如下。 n页面字体：在该下拉列表框中可选择网页中需要 的字体 n大小：在该文本框中设置字的大小，也可单击 按钮，在弹出的下拉列表框中选择系统默认的字的 大小。 n文本颜色：单击 按钮，在打开的颜色列表中选 择需要的字的颜色。 n背景颜色：单击 按钮，在弹出的颜色列表中选 择需要的页面背景颜色。 n背景图像：在该文本框中输入背景图片的路径， 也可单击 按钮指定背景图片的路径。其方 法如下。 单击 按钮打开如图所示的对话框。在“查 找范围”下拉列表中选择所需图片的位置，然后在 文件列表中选择需要的图片，如选择“bg.jpg”文 件，单击 按钮，打开如图所示的提示对话 框。 如果网页中需要的图 片没有在站点文件中，则 需要将图片文件保存在站 点相应的文件夹中，否则 页面可能显示不正常或在 上传站点时不能将该图片 上传，从而导致页面不能 正常显示。 单击 按钮，打开如图4-53所示的“复制 文件为”对话框，并保存在站点中的“pic”文 件夹中。 单击 按钮，添加的背景图片路径就会显 示在文本框中，如图所示。 图53 n左边距：在该文本框中设置文本与浏览器左边界的 距离。 n右边距：在该文本框中设置文本与浏览器右边界的 距离。 n上边距：在该文本框中设置文本与浏览器上边界的 距离。 n下边距：在该文本框中设置文本与浏览器下边界的 距离。 在边界设置的度量单位下拉列表框中可选择边界 的单位，如“像素”。 n1、链接字体 n2、大小 n3、链接颜色 n4、变换图像链接 n5、已访问链接 n6、活动链接 n7、下划线样式 链接 （4）在“分类”列表框中选择“链接”选项， 右侧将显示“链接”的参数设置项，如图所示。 页面设置链接 各参数的含义如下。 n链接字体：在该下拉列表框中可选择网页中链接文 本的字体，单击右侧的 和 按钮可设置链接文本 的加粗和斜体格式。 n大小：在该文本框中设置链接文本的字体大小，也 可单击 按钮，在弹出的下拉列表框中选择系统默 认的字体大小。 n链接颜色：设置链接文本的颜色 n变换图像连接：设置滚动链接的颜色。 n已访问链接：设置访问后的链接文本的颜色。 n活动链接：设置正在访问的链接文本的颜色。 n下划线样式：在该下拉列表中可设置链接对象的下 划线情况。 标题 n1、标题字体 n2、标题1 （5）在“分类”列表框中选择“标题”选项， 右侧将显示“标题”的参数设置项，如图所示。 页面设置标题 各参数的含义如下。 n标题字体：在该下拉列表框中设置页面标题的字 体。 n标题1：在文本框中设置一级标题的字体、大小和 颜色。用同样的方法在“标题2-标题6”中分别设 置2-6级标题的字体、大小和颜色。 标题/编码 n1、标题 n2、编码 （6）在“分类”列表框中选择“标题/编码”选项， 右侧将显示“标题/编码”的参数设置项，如图所示 。 各参数的含义如下。 标题：在该文本框中输入网页标题，该标题将出 现在浏览器标题栏中。 编码：设置页面使用的字体编码类型。 页面设置标题/编码 跟踪图像 n跟踪图像 n透明度 （7）在“分类”列表框中选择“跟踪图像”选项 ，右侧将显示“跟踪图像”的参数设置项，如图 所示。 各参数的含义如下。 n跟踪图像：指定用作拷贝设计时参考的图像。 n透明度：确定跟踪图像的不透明度，从左到右表 示从完全透明到完全不透明。 （8）设置完需要的选项后单击 按钮，即可 看到页面的变化，如图所示。 （9）单击 按钮关闭“页面属性”对话框， 对页面进行的属性设置将被应用到当前页面中。 页面设