第7章 站点与链接(1)

null第7章 站点与链接第7章 站点与链接7.1 【案例21】修改“跟我学电脑”站点7.1 【案例21】修改“跟我学电脑”站点7.1.1 学习目标 修改“跟我学电脑”站点的属性后，“站点”窗口的显示效果如图7-1-1所示。在该站点中定义了主页后，可以在“站点”窗口的左栏中显示出“跟我学电脑”网站的结构图，右栏中显示网页中的文件。 7.1.2 操作过程 null图7-1-1 修改属性后“站点”窗口的显示效果7.1.3 相关知识7.1.3 相关知识1．建立新站点 （1）在Dreamweaver的主窗口中单击“站点”→“管理站点”菜单命令，弹出“管理站点”对话框，如图7-1-3所示。null（2）单击“管理站点”对话框中的“新建”按钮，弹出“新建”快捷菜单。在快捷菜单中，单击“FTP”菜单命令，弹出“站点定义为”（高级）对话框（打开“高级”选项卡），如图7-1-4所示。 null（3）在“站点名称”文本框内输入站点的名称。在“本地根文件夹”文本框内输入站点在本主机硬盘上的存储位置，即路径和文件夹名称。null（4）在“HTTP地址”文本框内输入上传站点地址的URL，也可不输入内容。 （5）选中“启用缓存”复选框后，可加速链接的更新速度。 null（6）单击“确定”按钮后，返回“管理站点”对话框。在对话框的左边的列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 框中，将列出刚创建的站点名称。单击“完成”按钮，即可返回Dreamweaver主窗口。 （7）单击“文件”面板内第一个下拉列表框中的其他站点名称，可以显示其他站点的结构和文件。 2．“文件”面板和“站点”窗口2．“文件”面板和“站点”窗口 单击“窗口”→“文件”菜单命令，即可弹出“文件”面板，如图7-1-2所示。单击“文件”面板的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 工具栏内的“扩展/折叠”按钮 ，即可弹出“站点”窗口，如图7-1-1所示。这时该窗口中会出现新建站点的结构与文档、文件夹的名字。再单击“站点”窗口标准工具栏内的“展开/折叠”按钮 ，又可回到“文件”面板。“文件”面板和“站点”窗口的特点如下。null（1）在“文件”面板和“站点”窗口内可以执行标准的文件操作。将鼠标指针移到“文件”面板内或“站点”窗口的本地文件显示栏内，单击鼠标右键，可以弹出它的快捷菜单，利用该菜单可以创建文件夹、创建文件、移动文件、删除文件、打开文件和文件重命名等。null（2）“站点”窗口内有两栏，左边是“地图”视图栏，右边是“本地文件”栏。用鼠标拖曳两栏之间的分割条，可以调整两栏的大小比例，甚至取消其中一个栏。 null（3）单击“站点”窗口内的“站点地图”按钮 右下角的黑色箭头，可弹出一个菜单。单击该菜单中的“仅地图”菜单命令，可使右边的“本地文件”栏消失。单击该菜单中的“地图和文件”菜单命令，可使右边的“本地文件”栏显示，即切换到“地图和文件”状态。null（4）单击“站点”窗口内的“站点文件”按钮 ，可使“站点”窗口只显示“本地文件”栏，但左边的栏不消失，只是没有“地图”视图。7.2 【案例22】建立“跟我学电脑”网页与各子页面间的链接7.2 【案例22】建立“跟我学电脑”网页与各子页面间的链接7.2.1 学习目标 本实例的目的是将“跟我学电脑”网站中的index.htm网页作为主页，然后将各个实例页面与该网页使用链接的形式串联起来，最终形成一个完整的网站。建立“跟我学电脑”网页与各个子页面间的链接后，该网页的显示效果如图7-2-1所示。null图7-2-1 建立各个子页面链接后的“跟我学电脑”网页null 在该页面中，列出了前面各章中制作的各个网页实例的名称，单击其中任意一个名称，即可链接到相应的页面。 null 链接的定义是：单击HTML文件（叫做源文件）中的一些文字（叫做热字）或图像，即可用浏览器显示相应的HTML或图像文件（叫做目标文件）等内容。也可以说，在这些源文件的文字或图像与相应的目标文件的HTML和图像文件建立了链接。 7.2.2 操作过程 7.2.3 相关知识7.2.3 相关知识1．文字或图像与外部HTML和图像文件的链接 （1）利用“属性”栏内“链接”文本框和文件夹按钮 建立链接null用鼠标拖曳选中源文件中要链接的文字或选中要链接的图像。 单击“属性”面板中的“链接”栏中的文件夹按钮 ，弹出“选择文件”对话框，利用该对话框选择要链接的HTML文件或图像文件（即目标文件）。也可以直接在文本框内输入要链接的HTML文件或图像文件的路径与文件名。使用路径时，一定要注意相对路径与绝对路径的使用方法，通常最好使用相对路径。null（2）利用“属性”栏内“链接”栏的指向图标 建立链接 在网页编辑窗口内，同时打开要建立链接的源文件和要链接的目标文件（HTML文件），如图7-2-2所示。null图7-2-2 利用“属性”栏内“链接”栏的指向图标建立链接null选中建立链接的源文件中的文字或图像（如选中图7-2-2中左边网页中的文字）。 用鼠标拖曳文字或图像“属性”栏内“链接”栏的指向图标 到图7-2-2中右边网页编辑窗口内，这时会产生一个从指向图标 指向目标文件的箭头，如图7-2-2所示。然后松开鼠标左键，即可完成链接。null（3）利用“文件”面板的链接方法 弹出“文件”面板，使要链接的目标文件名字出现在“文件”面板内。同时在网页编辑窗口内打开建立链接的源文件。 选中网页编辑窗口内建立链接的源文件中的文字或图像（如选中图7-2-3中左边网页编辑窗口内的图像）。null图7-2-3 利用“文件”面板的链接方法null用鼠标拖曳文字或图像“属性”栏内“链接”栏的指向图标 移到图7-2-3中“文件”面板内要链接的目标文件（01.htm），这时会产生一个从指向图标 指向目标文件的箭头。当目标文件名字周围出现矩形框时，松开鼠标左键，即可完成链接。 null（4）利用“站点”窗口的链接方法一 打开“站点”窗口，使要链接的目标文件名字出现在“站点”窗口右边的“站点文件”栏内，使源文件出现在“站点”窗口左边的“地图”视图栏内。 null选中“站点”窗口左边“地图”视图栏内建立链接的源文件图标，此时源文件图标右上方会出现一个指向图标 ，如图7-2-4所示。 null图7-2-4 利用“站点”窗口的链接方法 null 如果没有出现指向图标 ，可在源文件图标上单击鼠标右键，弹出其快捷菜单，再单击菜单中的“显示/隐藏链接”菜单选项，即可使指向图标 显示出来。null用鼠标拖曳“站点”窗口左边“地图” 视图栏内的指向图标 到图7-2-4中“站点”窗口右边框架内要链接的目标文件。这时，会产生一个从指向图标 指向目标文件的箭头。当目标文件名字周围出现矩形框时，松开鼠标左键，即可完成链接。null（5）利用“站点”窗口的链接方法二 用鼠标右键单击源文件图标，弹出它的快捷菜单，单击该菜单中的“链接到已有文件”菜单命令，弹出“选择HTML文件”对话框，利用它可以选择要链接的目标文件。 null如果单击源文件图标快捷菜单中的“链接到新文件”菜单命令，会弹出“链接到新文件”对话框，如图7-2-5所示。利用它输入要链接的HTML文件名字、标 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 和链接文本，单击“确定”按钮，即可建立一个新的已链接的HTML文件。 null图7-2-5 “链接到新文件”对话框null 上述方法产生的链接会在源文件内自动产生一个热字和标题字，热字的内容就是目标文件的名字或“链接到新文件”对话框中输入的文字。可以编辑、修改热字的内容，但要先输入新的内容，然后再删除原内容。2．文字或图像与HTML文件锚点的链接2．文字或图像与HTML文件锚点的链接 当页面的内容很长时，在浏览器中查看某一部分的内容会很麻烦，这时可以在要查看内容的地方加一个定位标记，即锚点（也做叫锚记）。这样，可以建立页面内文字或图像与锚点的链接，单击页面内文字或图像后，浏览器中会迅速显示锚点处的内容。也可以建立页面内文字或图像与其他HTML文件中的锚点的链接。在页面内设置锚点的方法如下。null（1）单击页面内要设置锚点的地方，将光标移至此处。再单击“插入”（常用）面板内的“命名锚记”按钮 ，弹出“命名锚记”对话框，如图7-2-6所示。null图7-2-6 “命名锚记”对话框null（2）在“锚记名称”文本框内输入锚点的标记名称（例如MD1）。再单击“确定”按钮，退出该对话框。同时，在页面光标处会产生一个锚点标记 。如果看不到该标记，可以单击“查看”→“可视化助理”→“不可见元素”菜单选项。 在浏览器内不会显示锚点标记。null（3）选中页面内的文字或图像，再按照下述的方法之一建立它们与锚点的链接。 在“属性”栏内的“链接”文本框内输入“#”和锚点的名字。例如，输入“#MD1” ，即可完成选中的文字或图像与锚点的链接。null用鼠标拖曳“链接”栏的指向图标 到目标锚点上，再松开鼠标左键，即可完成选中的文字或图像与锚点的链接，如图7-2-7所示。null图7-2-7 拖曳指向图标建立与锚点的链接null如果选中的是文字，则按住Shift键，同时将鼠标指针移到选中的文字上，按下鼠标左键再拖曳，此时鼠标指针会变为类似于指向图标 。接着拖曳指向图标 与锚点图标重合，如图7-2-8所示，再松开鼠标左键，即可完成选中的文字与锚点的链接。null图7-2-8 拖曳鼠标建立与锚点的链接 7.3 【案例23】检查“跟我学电脑”网站中的链接7.3 【案例23】检查“跟我学电脑”网站中的链接7.3.1 学习目标 将“跟我学电脑”站点下所有网页中的mailto:tingdudu@163.com邮件链接全部替换成juny120@sina.com后，“跟我学电脑”网页（部分）的显示效果如图7-3-1所示。null图7-3-1 “跟我学电脑”网页（部分）的显示效果null 当站点的许多文件与一个文件（如一个外部文件）的链接失效时，不必一个一个地进行修改，可以成批地进行链接的替换。这种链接替换不但对站点内目标文件有效，而且对站点外部目标文件也有效。 7.3.2 操作过程 7.3.3 相关知识7.3.3 相关知识1．链接的检查与修复 （1）自动检查链接 当用户在“站点”窗口的“站点文件”栏内将一个文件移到其他文件夹内时，会自动弹出一个“更新文件”对话框，如图7-3-3所示。null 该对话框内会显示出与移动文件有链接的文件的路径与文件名，并询问是否更新对这个文件的链接。单击“更新”按钮，表示更新链接；单击“不更新”按钮，表示保持原来的链接。 null（2）人工检查链接 检查链接的操作方法如下。 选中“站点”窗口的“站点文件”栏内的文件夹或文件的图标。 单击“站点”窗口内的“站点”→“检查站点范围的链接”菜单命令，系统开始自动对选定的文件进行链接的检查，检查后会弹出 “链接检查器”对话框，如图7-3-4所示。null图7-3-4 “链接检查器”对话框null“链接检查器”对话框中的“显示”下拉列表框内有3个选项，选择不同选项时，其下面的显示框内显示的文件内容会不一样。3个选项的含义如下。null “断掉的链接”：选择该选项后，显示框内将显示链接失效的文件名与目标文件。 “外部链接”：选择该选项后，显示框内将显示包含外部链接的文件名字与它的路径，但不能对它们进行检查。null “孤立的文件”：选择该选项后，显示框内将显示孤立的文件名字与它的路径。所谓孤立的文件，就是没有与其他文件链接的文件。 “链接检查器”对话框的底部给出了相应的提示信息。 null（3）修复链接 在检查完链接后，可在“链接检查器”对话框中进行修复链接的工作。其操作方法如下。 双击“文件”面板内的源文件图标，弹出网页编辑器，并打开该文件，产生错误链接的位置会被选中，利用其“属性”栏内的“链接”栏可重新建立链接。也以可通过查看它的HTML程序，来检查错误。null单击“断掉的链接”栏内的目标文件的名字，使它周围出现虚线框和一个文件夹按钮，如图7-3-5所示。此时可以修改文件的名字与路径，也可以单击文件夹按钮，寻找新的目标文件。null图7-3-5 单击“断掉的链接”栏内目标文件名后的效果null（4）批量替换链接 当站点的许多文件与一个文件（如一个外部文件）的链接失效时，不必一个一个地进行修改，可以使用“站点”面板中的批量替换链接功能。这种链接替换不但对站内目标文件有效，而且对站点外部目标文件也有效。批量替换链接的操作方法如下。null单击“站点”窗口中的“站点”→“改变站点范围的链接”菜单命令，弹出“更改整个站点链接”对话框，如图7-3-2所示。 在“将所有链接更改为”文本框内输入要修改的原链接目标文件名字，在“新链接”文本框内输入新的链接目标文件名字。null单击“确定”按钮，在打开的“更新文件”对话框中，列出了所有与“/Th1.htm”文件有链接的文件名字。单击“更新”按钮，表示更新链接；单击“不更新”按钮，表示保持原来的链接。 2．在浏览器中预览网页2．在浏览器中预览网页（1）设置预览功能 在Dreamweaver 8中，可以设置20种浏览器的预览功能，前提是计算机内已安装了这些浏览器。浏览器预览功能的设置 步骤 新产品开发流程的步骤课题研究的五个步骤成本核算步骤微型课题研究步骤数控铣床操作步骤 如下。 null在“首选 参数 转速和进给参数表a氧化沟运行参数高温蒸汽处理医疗废物pid参数自整定算法口腔医院集中消毒供应 ”对话框的“分类”栏内，选择“在浏览器中预览”选项后，该对话框（右边部分）如图7-3-6所示。null图7-3-6 “在浏览器中预览”栏（右边部分） null在“浏览器”栏的显示框内，列出了当前可以使用的浏览器。单击 按钮，可以删除选中的浏览器。单击 按钮，可以增加浏览器。 null单击 按钮，可弹出“添加浏览器”对话框，如图7-3-7所示。在“名称”文本框内输入要增加的浏览器的名称，在“应用程序”文本框内输入要增加的浏览器的程序路径。再设置成默认的浏览器，单击“确定”按钮，完成设置。null图7-3-7 “添加浏览器”对话框 null完成设置后，在“参数选择”对话框中单击“确定”按钮退出。在“文档”面板中单击“在浏览器中预览/调试”按钮 ，可以看到快捷菜单中增加了新的浏览器名称。null选中图7-3-6中所示的“使用临时文件预览”复选框后，可为预览和服务器调试创建临时备份。如果要直接更新文档，可撤销对此复选框的选择。 null 当在本地浏览器中预览文档时，不能显示用根目录相对路径所链接的内容（除非选中了使“用临时文件预览”复选框），这是由于浏览器不能识别站点根目录，而服务器能够识别。null 若要预览用根目录相对路径所链接的内容，可将此文件放在远程服务器上，然后单击“文件”→“在浏览器中预览”菜单命令来查看它。null（2）预览网页 在网页编辑窗口状态下，按F12键可以启动第一浏览器显示网页，按Ctrl+F12键可以启动第二浏览器显示网页。 7.4 【案例24】上传“跟我学电脑”网站7.4 【案例24】上传“跟我学电脑”网站7.4.1 学习目标 在Dreamweaver中将网页发布到网上以后，在“站点”窗口中将显示出服务器端站点文件和本地站点文件，如图7-4-1所示。其中，“站点”窗口左边显示的是服务器端站点文件，右边显示的是本地站点文件。null图7-4-1 上传网站后的“站点”窗口null Dreamweaver的“站点”窗口集成了非常强大的FTP功能，可以不必使用其他FTP工具，就能实现登录服务器及文件的上传和下载等操作。在完成本地站点参数设置以后，就可以开始上传文件。 7.4.2 操作过程 7.4.3 相关知识7.4.3 相关知识1．申请主页空间 （1）登录互联网，打开浏览器。在“地址”栏中输入“http://www.51.net”，链接到“虎翼网”。单击“虎翼网”（主页）导航栏中的“虎翼社区”热字，链接到“虎翼社区”栏目，如图7-4-3所示。null图7-4-3 “虎翼社区”栏目页面的显示效果null（2）单击“虎翼社区”导航栏中的“主页申请”热字，进入“主页申请”页面。在该页面中，选择“免费个人型”虚拟主机。然后单击“登记注册”按钮，进入“免费空间注册”（服务条款）页面。null（3）仔细阅读网页中列出的服务条款，确定服务商和用户应该注意的事项和应尽的义务等。确认无误后单击“同意”按钮，进入“注册信息”页面，如图7-4-4所示。null图7-4-4 “注册信息”网页（部分）的显示效果null（4）在该页面内依次输入注册信息后，单击“下一步”按钮，进入进一步设置的页面。在该页面中，可以设置出生日期、个人爱好等信息。设置完成后，单击“下一步”按钮，进入“安装DIY吧”页面。在该页面中单击“下一步”按钮，即可自动安装该软件，并且完成申请主页空间的操作。null（5）重新回到“虎翼社区”栏目页面，在“免费用户登录”栏中输入用户名和密码，单击“登录”按钮，即可查看主页空间的相关信息，如图7-4-5所示。 null图7-4-5 “个人信息”页面的显示效果2．定义服务器信息2．定义服务器信息（1）打开“站点定义为”（高级）对话框，在“分类”栏中选择“远程信息”选项，此时的“站点定义为”对话框如图7-4-6左图所示。 （2）在图7-4-6左图所示的对话框中的“远程信息”栏内，选择“访问”下拉列表框内的选项，可以设置本地站点的服务器访问方式。其中3个选项的含义如下。null图7-4-6 选择“远程信息”选项后的“站点定义为”对话框和“FTP”选项中的内容null “无”选项：仅用于本地站点，与服务器没有连接。  “FTP”选项：通过FTP连接到服务器上，这是通常采用的方式。此处选择此选项。  “本地/网络”选项：通过局域网连接到服务器上。null（3）选择“FTP”选项后，该对话框如图7-4-6右图所示。其中各选项的含义如下。  “FTP主机”文本框：输入网站上传时的FTP主机地址，即服务器地址。注意：前面不要加“ftp://”字符。此处输入“teachpc.go.51.net”。 null “保存”复选框：选择它后，登录名称和登录密码会被自动保存。此处选中该选项。  “使用PassiveFTP”复选框：选择它后，将使用FTP被动方式链接。  “使用防火墙”复选框：选择它后，使用防火墙，通常在连接的服务器有防火墙保护时才选中它。此处选中该选项。null 完成上述设置后，单击“确定”按钮，返回“编辑站点”对话框。再单击“完成”按钮，返回“站点”窗口。null（4）设置防火墙参数 如果在“站点定义为”对话框中选中了“使用防火墙”复选框，就应该在连接远程服务器以前进行防火墙参数的设置。null 单击“编辑”→“首选参数”菜单命令，弹出“首选参数”对话框，在“分类”栏中选中“站点”选项，如图7-4-7所示。在对话框右边的“防火墙主机”文本框内，输入服务器的地址。单击“确定”按钮，完成设置防火墙参数操作。 null图7-4-7 选择“站点”选项后的“首选参数”对话框