网页设计与制作常见问题解答.doc

Appendix A网页制作常见问题解答 附录A网页制作常见问题解答1. Dreamweaver中如何输入空格？在Dreamweaver中，可以输入连续的空格，方法是按Shift+Ctrl+空格组合键。如果使用智能ABC输入法，则切换到全角状态，然后直接按空格键即可。此外还可以选择【插入】|【HTML】|【特殊符号】|【不换行空格】命令，可以插入空格，也可以在HTML源代码编辑窗口中直接输入“ ；”代码。2. 为什么想让一行字居中，但其他行字也变成居中？在Dreamweaver中进行居中、居右操作时，默认的区域是P、H1-H6、Div等格式标识符，因此，如果语句没有用上述标识符隔开，Dreamweaver会将整段文字均做居中处理，解决方法就是将居中文本用P隔开。3. 如何在整个站点中查找与替换文字？整个网站中会有很多相同的部分，如果想更改站点范围内的文字，打开每个网页去修改是一件非常麻烦的事情，用户可以使用查找和替换功能来解决此问题。 选择菜单中的【编辑】|【查找和替换】命令，弹出【查找和替换】对话框，如图A-1所示。图A-1 【查找和替换】对话框 在对话框中的【查找范围】下拉列表中选择查找的范围。 【所有文字】：在当前文档被选中的部分进行查找或替换。 【当前文档】：只能在当前文档中查找或替换。 【打开的文档】：在Dreamweaver中打开的文档中进行查找或替换。 【文件夹】：查找指定的文件组。选择选项后，单击右边的按钮选择需要查找的文件目录。 【站点中选定的文件】：查找站点窗口中选中的文件或文件夹。当站点窗口处于当前状态时可以显示。 【整个当前本地站点】：在目前所在整个本地站点内进行查找或替换。 在【搜索】下拉列表中选择搜索的种类。 【源代码】：在HTML源代码中查找特定的文本字符。 【文本】：在文档窗口中查找特定的文本字符。文本查找将忽略任何HTML标记中断的字符。 【文本（高级）】：只可以在HTML标记里面或只在标记外面查找特定的文本字符。 【指定标签】：查找特定标记、属性和属性值。 在【查找】文本框中输入要查找的内容，在【替换】文本框中输入要替换的内容。 为了扩大或缩小查找范围，在【选项】中可设置以下选项。 【区分大小写】：勾选此复选框，则查找时严格匹配大小写。 【忽略空白】：勾选此复选框，则所有的空格不作为一个间隔来匹配。 【全字匹配】：勾选此复选框，则查找的文本匹配一个或多个完整的单词。 【使用正则表达式】：勾选此复选框，可以导致某些字符或较短字符串被认为是一些表达式操作符。 设置完毕后，单击【替换】按钮，替换当前查找到的内容；单击【替换全部】按钮，替换所有与查找内容相匹配的内容。4. 在Dreamweaver中怎样设置水平线的颜色？在Dreamweaver中设置水平线颜色具体制作步骤如下。 打开网页文档，如图A-2所示。图A-2 打开网页文档 将光标放置在要插入水平线的位置，选择菜单中的【插入记录】|【HTML】|【水平线】命令，插入水平线，如图A-3所示。图A-3 插入水平线 选中水平线，切换到拆分视图中，在标签内输入代码width=90% color=#006600 noshade，如图A-4所示。图A-4 输入代码 保存文档，按F12键在浏览器中预览，如图A-5所示。图A-5 设置水平线颜色效果5. 如何清除网页中不必要的HTML代码？有时从Word中复制过来的文本插入到网页中后，无论怎么修改文本格式都不能应用，这是因为从Word中复制过来的文本带有格式，需要先把这些格式清理了才行。清除网页中不必要的HTML代码的具体操作步骤如下。 选择菜单中的【命令】|【清理word生成的HTML】命令，弹出【清理word生成的HTML】对话框，在对话框中勾选【删除所有word特定的标记】复选框，如图A-6所示。 单击【确定】按钮，弹出Adobe Dreamweaver CS3提示信息框，如图A-7所示。单击【确定】按钮，即可清除垃圾代码。 图A-6 【清理Word生成的HTML】对话框 图A-7 Adobe Dreamweaver CS3提示信息框6. 如何在网页中插入特殊符号？将光标放置在要插入特殊符号的位置，选择菜单中的【插入记录】|【HTML】|【特殊字符】|【其他】命令，弹出【插入其他字符】对话框，如图A-8所示。在对话框中选择要插入的特殊符号后，单击【确定】按钮，即可插入特殊符号。图A-8 【插入其他字符】对话框7. 怎样定义网页语言？在制作网页过程中，首先要定义网页语言，以便访问者浏览器自动设置语言。选择菜单中的【修改】|【页面属性】命令，弹出【页面属性】对话框，在对话框中选择【分类】|【标题/编码】选项，在【标题/编码】中设置网页标题和文字编码，在【标题】文本框中输入网页标题，在【编码】右边的下拉菜单中设置网页的文字编码，如图A-9所示。图A-9 【页面属性】对话框8. 如何设计若干秒后自动转向指定的某个网页?利用选择菜单中的【插入记录】|【HTML】|【文件头标签】|【刷新】命令，在弹出的【刷新】对话框中可以设置若干秒后自动转向指定的某个网页，具体操作步骤如下。 打开网页文档，如图A-10所示。图A-10 打开网页文档 选择菜单中的【插入记录】|【HTML】|【文件头标签】|【刷新】命令，弹出【刷新】对话框，在对话框中单击【转到URL】文本框右边的【浏览】按钮，弹出【选择文件】对话框，如图A-11所示。 在对话框中选择文件index1.htm，单击【确定】按钮，添加到文本框中，将【延迟】设置为5秒，如图A-12所示。 图A-11 【选择文件】对话框 图A-12 【刷新】对话框 单击【确定】按钮，保存文档，按F12键在浏览器中浏览效果，如图A-13附录A-14所示。 图A-13 跳转前 图A-14 跳转后9. 如何删除图片链接的边框？删除图片链接的边框的具体操作步骤如下 打开网页文档，如图A-15所示。图A-15 打开网页 选择菜单中的【窗口】|【属性】命令，打开【属性】面板。单击选中图像，在属性面板中，可以看到【边框】设有数值，如图A-16所示。图A-16 显示边框 在【属性】面板中，将【边框】设置为0，如图A-17所示。图A-17 设置边框 保存文档，按F12键在浏览器中浏览效果，如图A-18所示。图A-18 删除图像边框效果10. 如何调整图片与文字的间距？在设置了文字和图片的对齐方式后，有时还需要设置文字与图片之间的间距，调整图片与文字间距的具体操作步骤如下。 打开调整图片与文字的间距的网页文档，如图A-19所示。图A-19 打开网页文档 选中图像，打开【属性】面板，在面板中的【垂直边距】设置为10，【水平边距】设置为15，如图A-20所示。图A-20 设置【垂直边距】和【水平边距】 保存文档，调整图片与文字的间距。按F12 键在浏览器中浏览效果，如图A-21所示。图A-21 调整图片与文字的间距效果11. 为什么我设置的背景图像不显示？在单元格中单击鼠标，从【属性】面板中可以看到设置的背景图文件，而在Dreamweaver中显示也是正常的。启动IE浏览这个页面，底图不见了，这是怎么回事？这是因为在代码视图中背景是设置在里还是设在里，如果设置在里背景就可以显示出来。12. 如何避免自己的图片被其他站点使用？为图片起一个很怪的名字，这样可以避免被搜索到。除此之外，还可以利用Photoshop的水印功能加密。当然也可以在自己的图片上加上一段版权文字，如标明自己的名字，这样一来，除非使用人截取图片，不然就是侵权了。13. 如何添加图片及链接文字的提示信息？选中要设置的图片及链接，在【属性】面板中的【替换】文本框中输入说明文字，在浏览时，当鼠标移到图片上时会自动出现输入的说明文字。14. 如何在一个站点的不同页面间播放同一种声音文件？当用户访问一个站点的首页，会听到该页设置的背景声音文件，比如一段音乐，但当链接到该站点的另一页时音乐就停止了。那么如何才能让声音不断呢？可以建立一个上下框架结构的网页，把声音文件建立在下框架里，并把下框架的宽度设置为一个像素，上框架里是页面内容。这样当访问者离开站点首页时，因下框架的内容未变，所以声音就不会间断。15. 如何制作水中倒影效果？利用插入Java Applet可以制作水中倒影效果的具体操作步骤如下。 打开制作水中倒影的网页文档，如图A-22所示。图A-22 网页文档 将光标放置在相应的位置，选择菜单中的【插入记录】|【媒体】|【Applet】命令，弹出【选择文件】对话框，在对话框中选择Lake.class，如图A-23所示。 单击【确定】按钮，插入Applet，在【属性】面板中将【宽】设置为680，【高】设置为130，如图A-24所示。 图A-23 【选择文件】对话框 图A-24 插入Applet 提示单击【常用】插入栏中的按钮，在弹出的菜单中选择Applet选项，弹出【选择文件】对话框，插入Applet文件。 切换到代码视图，在相应的位置输入以下代码，如图A-25所示。 / 设置水中倒影的图像图A-25 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-26所示。图A-26 水中倒影效果16. 如何让网页中的图片出现不同程度的透明或渐变透明效果？让网页中的图片出现不同程度的透明或渐变透明效果的具体操作步骤如下。 打开网页文档，如图A-27所示。图A-27 网页文档 选中图像，切换到拆分视图，在图像代码中输入以下代码，如图A-28所示。style=FILTER: Alpha(style=1,opacity=100,finishopacity=20,startX=0,startY=0,FinishX=110,FinishY=90,)图A-28 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-29所示。 图A-29 图片出现不同程度的透明或渐变透明效果17. 为什么在Dreamweaver中把单元格宽度或高度设置为“1”没有效果？Dreamweaver生成表格时会自动地在每个单元格里填充一个 代码，就是空格代码。如果有这个代码存在，那么把该单元格宽度和高度设置为1就没有效果。实际预览时该单元格会占据10px左右的宽度。如果把“ ”代码去掉，再把单元格的宽度或高度设置为1，就可以在IE中看到预期的效果。但是在NS（Netscape）中该单元格不会显示，就好像表格中缺了一块。在单元格内放一个透明的GIF图像，然后将【宽度】和【高度】都设置为1，这样就可以同时兼容IE和NS了。18. 怎样使表格具有阴影特效？使表格具有阴影特效的具体操作步骤如下。 打开网页文档，如图A-30所示。图A-30 网页文档 将光标放置在文档中相应的位置，插入1行1列的表格，将【对齐】设置为【居中对齐】，【边框】设置为3，如图A-31所示。图A-31 插入表格 将光标放置在单元格中将【高】设置为300，切换到拆分视图，在标签中输入以下代码，如图A-32所示。style=filter:progid:DXImageTransform.Microsoft.Shadow (Color=#E63737,Direction=120,strength=5)图A-32 输入代码 提示 Color：设置阴影的颜色。 Direction：设置阴影的角度。 strength：设置阴影的宽度。 保存文档，按F12键在浏览器中浏览效果，如图A-33所示。图A-33 表格具有阴影特效19. 如何制作细线表格？制作细线表格的具体操作步骤如下。 打开网页文档，如图A-34所示。图A-34 打开网页文档 将光标放置在文档中相应的位置，插入5行4列的表格，将【对齐】设置为【居中对齐】，【间距】设置为1，【背景颜色】设置为#F6B58C，如图A-35所示。图A-35 插入表格 选中表格中的所有单元格，将【背景颜色】设置为#E4F2F8，【高】设置为30，如图A-36所示。图A-36 设置单元格属性 分别在单元格中输入相应的文字，如图A-37所示。图A-37 输入文字 保存文档，按F12键在浏览器中浏览效果，如图A-38所示。图A-38 细线表格效果20. 如何使单元格背景色在鼠标经过时改变？使单元格背景色在鼠标经过时改变的具体操作步骤如下。 打开网页文档，如图A-39所示。图A-39 打开网页文档 将光标放置在第2列单元格中，切换到拆分视图，在相应的位置输入以下代码，如图A-40所示。bgcolor=#C2620E onmouseover=this.bgColor=#EBA363onmouseout=this.bgColor=#C1610B图A-40 输入代码 按照步骤3的方法在其他单元格中输入代码，如图A-41所示。图A-41 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-42所示。图A-42 单元格背景色在鼠标经过时改变21. 怎样使框架集在不同的浏览器中正常显示？在为以百分比或者相对值指定大小的框架分配空间之前，先为以像素为单位指定大小的框架分配空间。设置框架大小最常用的方法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后右侧框架就能够伸展，以占据所有的剩余空间。22. 如何去除链接的下划线？利用CSS样式去除链接的下划线，具体操作步骤如下。 打开网页文档，如图A-43所示。图A-43 打开网页文档 选择菜单中的【窗口】|【CSS样式】命令，打开【CSS样式】面板，在面板中单击鼠标右键，在弹出的菜单中选择【新建】选项，弹出【新建CSS规则】对话框，如图A-44所示。 在对话框中将【选择器类型】设置为【类】，在【名称】文本框中输入.xh，【定义在】设置为【仅对该文档】，单击【确定】按钮，弹出【.xh的CSS规则定义】对话框，如图A-45所示。 图A-44 【新建CSS规则】对话框 图A-45 【.xh的CSS规则定义】对话框 在对话框中将【大小】设置为12像素，【颜色】设置为#FFFFFF，【修饰】设置为【无】，如图A-46所示。 单击【确定】按钮，选中去除下划线的对象，在样式面板中选择新建的样式，单击鼠标右键，在弹出的菜单中选择【套用】选项，套用样式，如图A-47所示。 图A-46 【.xh的CSS规则定义】对话框 图A-47 套用样式 提示选中应用样式的对象，在【属性】面板中【样式】下拉列表中选择新建的样式，也可对对象套用样式。 按照步骤5的方法，对其他对象去除下划线，如图A-48所示。图A-48 套用样式 保存文档，按F12键在浏览器中浏览效果，如图A-49所示。图A-49 去除下划线效果23. 如何利用单击来关闭浏览窗口？利用单击来关闭浏览窗口的具体操作步骤如下。 打开网页文档，如图A-50所示。图A-50 打开网页文档 选中“关闭窗口”文字，切换到代码视图，在“关闭窗口”的前面输入，如图A-51所示。图A-51 输入代码 在“关闭窗口”的后面输入，如图A-52所示。图A-52 输入代码 保存文档，按F12键在浏览器中浏览效果，单击“关闭窗口”，如图A-53所示。图A-53 利用单击来关闭浏览窗口效果24. 怎样实现定时自动关闭窗口？实现定时自动关闭窗口的具体操作步骤如下。 打开网页文档，如图A-54所示。图A-54 打开网页文档 切换到代码视图中，在标签的后面输入以下代码如图A-55所示。0)setTimeout(clock();,500);else self.close();var i=5clock();/-图A-55 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-56所示。图A-56 定时自动关闭窗口25. 如何精确地定位网页中的内容？Dreamweaver网页内容定位主要通过表格和图层两者实现的。表格主要是通过各个单元格来完成不同内容布局的。由于在网页中可以完全把表格【虚化】（调整浏览器不可见），因此使用起来很方便。另一个优点就是表格不论对什么浏览器都是通用的，没有技术支持上的问题。相对而言，图层用起来就更加随意了，可以根据需要任意地拖曳。惟一的缺点就是层只有在新版本的浏览器中才支持，不过现在是没有问题的。26. 怎样让800600分辨率下生成的网页在1024768下居中显示？把页面内容放在一个宽为778的大表格中，把大表格设置为水平方向居中。将宽度定为778是为了在800600下窗口中不出现水平滚动条，也可以根据需要进行调整。如果要加快关键内容的显示，也可以把内容拆分放在几个竖向相连的大表格中。除了使用表格之外，也可以把要居中的部分用和标签包围起来。27. 怎样防止别人把自己的网页放在框架里？因为框架（frame）的缘故，有许多人会把其他人的网页放置到自己的框架里，使之成为自己的一页。若要防止别人这样做，可以加入下列JavaScript代码，它会自动监测，然后跳出别人的框架。if(self!=top)window.top.location.replace(self.location);28. div标签与span标签的有什么区别？虽然样式表可以套用在任何标签上，但是div和span标签的使用更是大大扩展了HTML的应用范围。div和span这两个元素在应用上十分类似，使用时都必须加上结尾标签，也就是.和.。这两个标签可以应用的属性与事件处理也很类似，都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上，可以说是使用上十分广泛的元素标签。span和div的区别在于，div(division)是一个块级元素，可以包含段落、标题、表格，乃至章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。29. 做网页时用表格好还是用层好？层的定位方式与表格不同，层采取的定位方式是动态定位方式，它的定位靠的是两个参数“左”和“上”，这两个参数设置层框架与浏览器边框的距离，无论是最大化，还是在不同的分辨率下它都始终在一个位置，而表格在不同的情况下将有所变化。层一般用它来做一些特效，用的好可以让主页锦上添花。虽然通过层定位网页元素比表格方便的多，但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，只有IE4.0以上的版本才能支持。使用表格只能大概地对齐，不能很准确地对齐。使用层将网页中的对象排列整齐。但是如果浏览窗口大小改变，则各层位置可能也会改变，而造成对不齐的情况，特别是绝对位置的层可能会偏位很严重。由于层可以重叠在一起，因此当多个层重叠在一起时，显示的先后顺序是必须要考虑的，如果有些层还会根据不同的情况显示或隐藏，那在设计上就更为复杂了。所以在设计网页时，大多数网页设计者都使用表格。30. 什么情况下需要将层转换为表格？需要将层转换为表格通常情况下有两个原因：一是因为浏览器窗口大小或桌面分辨率改变而造成的严重偏位的问题，转换为表格后会好一点，二是由于IE4.0与NS4.0之前的版本并没有支持层，因此如果考虑网页需要在各版本都能正常显示的话，就必须将层转换为表格。31. 内容很长的网页，如何随时可以跳回最前面？利用插入锚记链接可以制作跳回到网页最顶端，具体操作步骤如下。 打开网页文档，如图A-57所示。图A-57 打开网页 将光标放置在文字“黄金海岸线路”的前面，选择菜单中的【插入记录】|【命令锚记】命令，弹出【命令锚记】对话框，在对话框中的【锚记名称】文本框中输入top，如图A-58所示。 单击【确定】按钮，插入锚记，如图A-59所示。 图A-58 【命名锚记】对话框 图A-59 插入锚记 选中文档中的文本top，打开【属性】面板，在面板中的【链接】文本框中输入top，设置锚记链接，如图A-60所示。图A-60 设置链接 按照步骤4的方法，选中文档中其他的top文本，设置锚记链接，如图A-61所示。图A-61 设置锚记链接 将光标放置在文字“健身一日游”的前面，插入锚记，将【锚记名称】设置为1，如图A-62所示。图A-62 插入锚记 将光标分别放置在文字“风情二日游”、“渔家乐民俗二日游”、“海山三日游”的前面，插入锚记，并将锚记名称分别设置为2、3、4，如图A-63所示。图A-63 插入锚记 选中文档顶部的文字“健身一日游”，在【属性】面板中的【链接】文本框中输入1，设置锚记链接，如图A-64所示。图A-64 设置锚记链接 分别选中文字“风情二日游”、“渔家乐民俗二日游”、“海山三日游”，分别创建锚记链接为#2、#3、#4，如图A-65所示。图A-65 设置锚记链接 保存文档，按F12键在浏览器中浏览效果，如图A-66所示。图A-66 跳回最前面效果32. 如何将站点加入收藏夹？将站点加入收藏夹的具体操作步骤如下。 打开网页文档，如图A-67所示。图A-67 打开网页 将光标放置在文档中相应的位置，切换到拆分视图中，输入以下代码，如图A-68所示。添加收藏夹图A-68 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-69所示。图A-69 加入收藏夹效果33. 如何将站点设为首页？将站点设为首页的具体操作步骤如下。 打开网页文档，如图A-70所示。图A-70 打开网页 将光标放置在文档中相应的位置，切换到拆分视图中，输入以下代码，如图A-71所示。设为首页图A-71 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-72所示。图A-72 将站点设为首页效果34. 如何让浏览者知道自己访问网页的次数？让浏览者知道自己访问网页的次数的具体操作步骤如下。 打开网页文档，如图A-73所示。图A-73 打开网页网页 将光标放置在文档中相应的位置，切换到代码视图中，输入以下代码，如图如图A-74所示。var caution = falsefunction setCookie(name, value, expires, path, domain, secure) var curCookie = name + = + escape(value) + (expires) ? ; expires= + expires.toGMTString() : ) + (path) ? ; path= + path : ) + (domain) ? ; domain= + domain : ) + (secure) ? ; secure : ) if (!caution | (name + = + escape(value).length 0) date.setTime(date.getTime() - skew)var now = new Date()fixDate(now)now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)var visits = getCookie(counter)if (!visits) visits = 1else visits = parseInt(visits) + 1setCookie(counter, visits, now)document.write(您已访问本站 + visits + 次.)图A-74 输入代码 保存文档，按F12键在浏览器中浏览效果，如图A-75所示。图A-75 知道自己访问网页次数的效果35. 如何制作随鼠标移动的浮动的时钟？制作随鼠标移动的浮动的时钟的具体操作步骤如下。 打开网页文档，如图A-76所示。图A-76 打开网页网页 切换到代码视图中，在与之间输入以下代码，如图如图A-77所示。 !- dCol=0000ff; fCol=FF0000; sCol=00ff00; mCol=0000ff; hCol=ff0000; ClockHeight=40; ClockWidth=40; ClockFromMouseY=0; ClockFromMouseX=100; d=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六); m=new Array(一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月); date=new Date(); day=date.getDate(); year=date.getYear(); if (year 2000) year=year+1900; TodaysDate=年 +mdate.getMonth()+ +day+日 +ddate.getDay()+ +year; D=TodaysDate.split(); H=.; H=H.split(); M=.; M=M.split(); S=.; S=S.split(); Face=1 2 3 4 5 6 7 8 9 10 11 12; font=Arial; size=1; speed=0.6; ns=(docume