第3章　使用软件Dreamwaver编辑

Dreamwaver初识
　　
　　前面只是简单介绍了一些常用的HTML代码，如果要设计更好、功能更多的网页，要用的代码还有很多。现在有人还不满足于HTML语言的功能，网页中还插入了更复杂的其他语言。如果都用这些语言编辑网页，那得有一定的编程语言基础才行，所以现在很多网页都是用一些软件编辑的。就是我在可视页面上布局，让软件自动生成代码。或者有人说，软件会自动生成代码，前一章教那些代码有什么用？要知道，任何“自动”的都不一定完全符合人的意思，你要一点代码语言知识都没有，以后出错你也不知识错在哪里，要改也不知道如何修改。你急于学习软件应用吧，代码知识我不再多说了。如果对代码有兴趣，就打开“HTML”目录看“织网学步”。

　　那么使用什么软件好呢，现在大家都公认“DreamwaverMX ”是当前最优秀的网页制作软件。本光盘第二张将“DreamwaverMX 中文版”放在软件目录里。
　　安装方法同各种软件安装差不多，如果你还没有安装软件的经验，可参考Flash MX 安装过程的叙述。同样在选择安装目录时，也可只输入“D:\”而不写目录名，系统会自动在D盘建立DreamwaverMX目录。
　　第二张光盘“dw6”目录里有安装程序和序列号。

　　DreamwaverMX 初始界面如下：
　　
　　学过FlashMX 的对这个界面并不陌生，我们还照操作FlashMX 的方法先把右边暂时用不着的面板关了。没学过FlashMX 的照我下面介绍操作：看到每个面板右上角的菜单按钮了吗，单击就出现菜单，如下图：
　　
　　中文的一看就知道，最下行就是“关闭面板”了。右边的“设计”、“代码”、“应用程序”、“文件”、“答案”面板都照此法关闭。如果某个面板在“折叠”状态，右边不出现菜单按钮，点击左边的三角形就展开了。右部面板关闭后屏幕如下图。
　　
　　这样的样式很适合初学者，因为它的横向宽度满屏幕，恰恰适应浏览器的屏幕，我们布局的页面可以很直观的展现。以后你操作熟练了，也可以试试在其他布局格式下工作。
　　你的磁盘上的站点目录建立好了吗？现在我们就把你的磁盘目录和网站关联起来。
　　选择菜单“站点→新建站点”，弹出对话框如下图：
　　
　　站点名称右边框里，输入你喜欢的名字吧。
　　本地根文件夹右边有一个文件夹按钮，单击，打开选择文件夹对话框，从中找到你的磁盘和目录。如我的“学网页”目录在D:\盘，选择好后就如图中样子。
　　默认图像文件夹，用同样方法找到你建立的“img”目录。
　　HTML地址，就填上你申请的网站的域名。上图中是前段时间使用网易的免费空间的地址，现在网易关闭个人空间，注意你可不要照上面图中填写啊。
　　“自动刷新本地文件列表”和“启用缓存”两项最好也都选中。上图如果看不清，可以另存到你的电脑上看。
　　填写好后，单击左边分类框中的“远程信息”，如下图：
　　
　　访问项里拉开右边三角形，从中选择“FTP”。
　　FTP主机项里填上你申请到的FTP地址。
　　主机目录空着不填(如果你申请的网站要求你把文件传到某一目录里，你就按要求填写)。
　　登录项里填写你申请的账号（就是用户名）。
　　密码里填什么你自己知道啊。不过填写后出现一串“*”号，这个不用解释了吧。
　　现在你的电脑上网了吗，如果已经联通网络，那就单击“测试”按钮。这时会出现一个测试变幻条在滚动，最后如果报出错误，请检查填写的是否正确和网络是否畅通，直到报出“已经连通站点”信息，就成功了。
　　测试成功后，打开“文件”面板如下图：
　　
　　中间并排两框中，左边是站点名字，右边框中可选择“本地视图”或“远程视图”。本地视图就是你磁盘上的文件夹和文件，远程视图中显示你的网站里的文件夹和文件。菜单下面一排工具按钮，左边第一个是联通网站的，联通后，右边一个向上一个向下箭头按钮可分别上传和下载文件。如果你的网页或目录已经在本地磁盘测试好还没有上传，单击向上箭头按钮，就会自动上传。如果网站上还没有建立文件夹，本地站点里文件夹也会传到网站。
　　使用上传功能要注意，没有用的文件不要放到本地站点文件夹里，不然会都传到网上。
　　设置完后，可以暂时把该机板关闭，需用时按“F8”键就可调出。
　　如果你还没有申请空间，学制作网页只在自己电脑上运行，那这“远程信息”的设置现在就不必填写，等到以后你有了个人空间再说吧。
　　
页面设置
　　
　　站点设置好后，开始制作网页了。看到上面标题栏里出现“无标题文档”了吗，先给他改一下，鼠标单击这个框，然后输入“老小孩学网页”。
　　选择菜单命令“文件→保存”，什么也没有你让保存什么呀，空文件也先起个名字保存起来，以后就用这个名字边制作边保存了。在弹出的保存文件对话框中，看上面的文件夹名字是不是原来设置好的站点文件夹，如果不是重新选择。一般前一步设置站点正确后，这一步不用选择就会自动打开站点文件夹的。文件名字框中输入“index.htm”吧，单击“保存”按钮，会弹出对话框“index.htm已经存在，要覆盖吗？”啊，就是以前做的那个试验品了，不要它就覆盖吧。如果你还想留着作个纪念，要先把它移动到站点目录以外的文件夹中去，然后再进行新的网页编辑。
　　在没有编辑前先起名保存，主要是为了系统给你的插入元素或超级链接确定路径。如果不保存，系统不知道你的“当前文件夹”是什么，插入元素的路径、链接的路径都不能确定。起名保存后再进行页面高设置。
　　单击菜单“修改→页面属性”，弹出对话框如下图：
　　
　　第一行“标题”已经有了，你还可以改变。
　　第二行“背景图像”右边框中你可以输入图像地址，也可单击“浏览”按钮，从弹出的选择文件对话框中找到你的图片，确定后图片地址和文件名字会自动添加到框中，这比用键盘输入准确，不会出错。注意这个图片是平铺背景，就像地上铺的地板砖那样铺满整个页面。图片一般选择小尺寸、颜色浅淡的、可以无缝拼接的。
　　第三行“背景”是选择背景颜色。单击小方框右下角的小三角形，可拉开颜色选择框。 如果选择了背景图像，这项就不要选择了，因为图像铺满了页面，背景色就显示不出来了。
　　第4、5行中4个设置框都是设置文本颜色。“文本”是设置正文文字的颜色，“链接”是设置超级链接文字的颜色，“访问过的链接”是设置鼠标点击以后的颜色，“活动链接”是设置用鼠标点击时的颜色。
　　第6、7行是设置页面边界（以像素为单位）。
　　“左边界”其实包括左、右边界，就是说设置左边界为“10”，右边界也为“10”。“顶部边界”也同样是包括上、下边界。为了页面中的文字和图片不至于紧靠边沿，一般设置10～20像素的边界。
　　“左边界”和“顶部边界”设置只对Microsoft Internet Explorer(IE)浏览器有效。
　　对于Netscape Navigator(航海家)浏览器要在“边界宽度”和“边界高度”中设置。
　　“文档编码”中的默认“中文简体(GB2312)”就不要改变了，这是最通用的汉字编码。如果你的操作系统安装繁体字编码，最好在制作网页时改为“中文简体(GB2312)”，不然浏览者会很少的。
　　“跟踪图像”是DreamwaverMX的一个特殊功能，设计复杂的页面时，你可以先画一个页面布局的图案，在制作网页时，先把这个图案铺在网页中，然后在图案上面布置你的网页元素。这个图案叫做“跟踪图像”，在浏览网页时该图像并不显示。
　　如果你用了“跟踪图像”，可拖曳最下行的滑块调整该图像的透明度，以适合制作页面时观感。 各项参数设置好后，在下面“属性”面板中选择好字号、字色，就可在页面打字，还可在上边工具栏里点击和棵树形状的“插入图像”按钮插入你的图片。
　　保存你的第一个用DreamwaverMX制作的网页吧。
　　想看看软件自动生成的代码吗？看“插入”面板下面的标题行，最左端第一个按钮是两个蓝色的尖括号，单击它中间的页面就变成了代码视图。第三个是页面视图，单击就返回到页面图。第二个按钮上半部中尖括号，下半部中页面，单击这个按钮，屏幕上是代码和页面同时显示。
　　
网页文本设置
　　制作网页虽然少不了图片、动画、音乐，但文字还是主角，我们还是先掌握文字应用。 　　虽然在页面设置中已经对文本作了设置，但那是整个页面中的全体规格，其实一页中要使用多种样式才能使页面活泼，这就要用到下面的“属性”面板。在默认状态下，属性面板显示的是“文本属性”。如下图：
　　
　　左边“格式”栏里显示“无”。单下面小三角形，拉开可选项段落、标题等。选择“段落”就是自动按“页面设置”里的数据，默认3号字。这时如果再拉开“大小”框中的选项，可重新选择字号。 在“大小”框中显示“无”时，“格式”选项中的“标题1”默认6号字，“标题2”默认5号字，“标题3”默认4号字，以次类推。
　　“大小”选项中除了1～7号字外，还有+1、+2……等，是比1、2……更大的字号，不过+5以上好像不起作用，还有-1、-2……等字号是更小号的字。“大小”选择框右边是颜色选择框，拉开后可重新选择颜色。也可在选择框右边的框中输入十六进制色值设置颜色。再右边一排依次是“加粗”“倾斜”“左对齐”“居中”“右对齐”“两边对齐”按钮。这些不用细说了。大家试试就会知道的。
　　下面着重说的就是这个“A”字右边的“字体选择框”了。点开小三角形，你会看到和其他软件不一样，其他软件的字体选择框中，只要你电脑中安装的字体都会出现在选择框里，可这里只有几个英文字体，没有出现汉字字体。这是因为网页格式文件的特殊性，页面里记录的是汉字代码，显示字体代码要通过浏览者的浏览器执行，你如果安装了特殊字库，浏览者如果没有同样的字库，就不能浏览你的特殊字体。所以DW并不把你电脑中安装的字体全显示出来，让你自己选择一些通用的字体加入“字体列表”中。
　　要添加字体，点开选择框的小三角形，拉开选择项如下图：
　　
　　选择最下行“编辑字体列表”一项，弹出“编辑字体列表”对话框如下图：
　　
　　下部右边“可用字体”选择框中有你安装的所有字体可供选择。单击某一项，该项变成反白显示，就是被“选中”，然后单击“<<”按钮，该字体出现在左边“选择的字体”框中，按“确定”按钮，添加完成。以后就可从字体选择框中选择该字体使用了。
　　以上讲了字体、字号、字颜色等项设置方法，下面提醒大家注意设置的有效范围。
　　①如果没有输入文字前先设置，该设置对以后输入的文字有效。输入一行或一段后，如重新改变设置，以后再输入的文字将按新的设置。譬如开始设置为“标题1”，并选择了“居中”按钮，输入完标题后要输入正文，应改变“标题1”为“段落”，选择“左对齐”按钮后，再输入文字。
　　②对于已有文字，要改变设置，应先“选中”要改变的文字。“选中”方法可以按下鼠标左键拉动，使拉过的文字变为反白显示，如果选择区域较大，也可先选择开始点，按下“Shift”键的同时，鼠标再单击结束点，这两点间的文字将全部选中。选中文字后，再改变属性中的设置，被选中的部分将按新的设置显示。
　　下面再说一下用作“超级链接”的文字。用于“超级链接”的文字可以是一个或几个字，也可以是一行或几行，那就看你自己的需要了。先选中你所要用的文字，然后在属性面板中“链接”的框中输入链接路径。如下图：
　　
　　如果要指向的位置在当前文件的同级或下级目录，可以用相对路径。如果不在当前目录，要用绝对路径。譬如本光盘学网页教材，第一章网页名字是“d01.htm”，在主页“index.htm”要加上链接指向该文件，在页面中选中“教材第一章”这五个字，在属性面板“链接”框中输入“d01.htm”，这就是用相对路径了。
　　为什么不用绝对路径呢，绝对路径要从磁盘符号开头写，如果光盘在我的电脑里是“F:”盘，我把路径写为“F:/网页制作/d01.htm”，可以后光盘插入你的电脑后被认为“E:”盘，电脑就找不到该文件了。
　　如果我要让这个链接打开“秋翁课件园”网站中的“d01.htm”文件，就必需用绝对路径:
http://qw.zzcredit.gov.cn/xsjj/d01.htm 才行，因为目标不在同一个目录下。
　　设置“链接”后，右边“目标”框中有四项可供选择：
　　“_blank”、“_parent”、“_self”、“_top”
　　其中“_blank”是指另打开一个新浏览器窗口浏览目标网页，这样当前页不关闭；选择“_parent”就用目标页面取代当前页。相对于链接页面来说，指定的目标页为子页，当前页为父页，所以在“父”窗口打开目标页，当前页就关闭了。另两项是对于框架结构页面用的，现在先不讲了。