在Dreamweaver MX中创建网站的基本过程

在DreamweaverMX中创建网站的基本过程在Dreamweaver中创建的网站分为本地站点和远程站点。设计网站时在本地计算机建立的站点称为本地站点，在Internet服务器上建立的站点则称为远程站点。Dreamweaver提供了FTP功能，能够很方便地在本地站点与远程站点之间进行信息传递和交换。创建本地站点实际上就是在本地计算机的硬盘上创建一个文件夹，并把这个文件夹设置为本地站点的根文件夹。在这个文件夹中可以创建不同的子文件夹以存放不同类型的文件，这些子文件夹无论怎样规划，在站点文件夹中都应该包含站点中的所有HTML文件以及站点所需的图像、视频、声音、插件等网页元素。通常情况下是在完成站点规划和设计后，先建立本地站点，在本地测试通过后再上传到远程站点中。(1)在Dreamweaver中创建新网站1)在主菜单中选择“站点—新建站点”，出现站点定义对话框，如图1.53所示。在对话框中有“基本”和“高级”两个选项卡，它们都是可用来创建站点的，其中“基本”选项卡是采用向导的形式引导用户逐步创建网站的，而“高级”选项卡除可以创建网站外，还可以方便地编辑站点信息。站点定义对话框2)在对话框中选择“高级”选项卡，对话框左边将显示“分类”栏，共有7种类别，如图1.54所示。3)创建本地站点：选择本地信息，在对话框中输入站点名称、本地根目录文件夹的路径名、默认图像文件夹的路径名以及网站将要使用的HTTP地址，如图1.54所示。在“HTTP地址”文本框中，如果还没有网站将要使用的网址，可以空缺不输入，待申请网站存放空间获得了网址后再输入；如果远程站点建立在用户局域网的服务器（假设IP地址是192.168.0.1）上，其主机目录（图1.55中的“/abc”）的Web共享名假设为“xyz”，则可以在“HTTP地址”文本框中输入“”。4)创建远程站点：选择远程信息，在出现的对话框中选择用“FTP”访问远程站点，输入申请网站存放空间时从远程服务器管理员处获得的FTP服务器地址、远程服务器上存放站点的目录以及登录的用户名和密码等。如果远程站点建立在用户局域网的服务器上，其访问方式既可以使用“FTP”，也可以使用“本地/网络”。当局域网配置有FTP服务器时，可以使用FTP访问局域网服务器上的远程站点，其远程站点的设置如图1.55所示。5)点击“确认”完成网站的建立工作。(2)在本地站点中创建新网页建立本地站点后，在Dreamweaver的“文件”菜单中选择“新建”，在出现的对话框中依次点击“基本页”、“HTML”、“创建”，这样就建立了一个空白的网页。在新建的空白网页中可以插入文字或图像、添加超级链接等等。有关网页的具体制作过程，在后面的章节中将会逐步介绍。这里，在编辑窗口中输入“电子商务”并用鼠标选中这四个字，通过“文本”菜单中的命令对其格式化：选择“段落格式”为“标题1”，再选择“居中对齐”和“红色”。这样，一个简单的网页就做好了。在“文件”菜单中选择“保存”，输入网页名称“eb.htm”再单击“保存”，新网页就保存在站点文件夹中了。按F12键可以预览网页，效果如图1.57所示。图1.57网页预览结果1.4.4网站的测试、上传与管理(1)网站测试通常情况下，测试内容包括速度测试、兼容性测试、交互性测试、链接正确性测试、超流量测试以及排版和内容方面的错误检查等等。这些测试在实际运用中往往是结合在一起进行的，并且要经过多次从测试到修改再到测试的循环过程。1)链接测试主要测试网页中的各种链接是否正确。在浏览网页时，如果网页中的图片位置显示为空框或网页链接结果为“404NotFound”，说明链接有问题。此时，应检查链接对象的引用是否正确，主要检查文件名和路径名是否正确。为避免这种错误的产生，在制作网页时应严格地按照规划好的目录结构存取文档。同时，在保存文档时，应注意不要在文件名和文件夹名中使用空格、特殊符号（如é、ç或¥）和标点符号（如冒号、破折号或句号），因为很多服务器在上传文件时会更改这些符号，这会导致与这些文件的链接中断。在Dreamweaver中可以通过在“文件”面板（如图1.58所示）的“文件”菜单中选择“检查链接”或“站点”菜单中选择“检查站点范围内的链接”来检查链接情况，通过“结果”面板可以查看到是否有孤立的链接或错误的链接等，如图1.59所示。文件面板链接测试结果2)兼容性测试主要测试网页在不同的浏览器中是否按设计要求的版面布局进行显示。不同浏览器对网页文本的解释是有区别的，结果就导致了对相同网站的浏览效果并不一致，因此，需要使用不同的浏览器及其不同的版本，在不同的操作系统中对网页进行测试。特别要注意针对比较常用的浏览器及其常用版本进行测试。为了使得网页的兼容性好一些，在制作网页时应尽量采用大多数浏览器都支持的标准技术，当使用一些针对某种浏览器的特殊技术时，要考虑给出相应部分的网页在其它浏览器上的替代内容，否则浏览者可能会在浏览器中看到一片空白。在Dreamweaver中，可以通过在文档窗口的菜单中依次选择“文件”、“检查页”、“检查目标浏览器”打开检查浏览器对话框（如图1.60所示）来测试网页。在对话框的选择浏览器框中，选择不同的浏览器或不同的版本对网页进行检查，一般选择版本较低的浏览器进行测试。测试结果在“结果”面板中可以看到，如图1.61所示。检查目标浏览器对话框目标浏览器测试结果3)脚本测试主要测试网页中的JavaScript等服务器端程序能否正常工作。引起错误的常见原因有JavaScript的语法错误和设计上的逻辑错误，以及由于浏览器不支持而出现的错误等。4)速度测试测试页面的下载速度。测试时应尽量多地在不同的客户机上访问被测试的网页，测试其下载时间。下载时间应控制在访问者可以接受的时间范围内。5)上传测试当网页上传到远程站点后，还需要再次对其进行测试。问题多出现为图像不能显示或链接找不到，原因一般是文件名和链接路径出现了错误。造成这种错误的原因可能是服务器要区分文件名大小写，而设计中却忽略了这一点，或文件名中有非法字符，也可能是网站中要使用的文件没有上传到服务器中。有些网站提供了对一个网站的在线测试服务并提供测试报告，可以据此对网站进行测试和改进。另外，为了得到对网页的全面客观的评价结果，应该请不同层次的人员在不同层次的客户机上对网页进行测试评价。(2)网站上传与下载在本地计算机上完成站点的创建和测试后，可以通过各种上传工具（例如LeapFTP、CuteFTP等）将本地站点的内容上传到远程服务器上。Dreamweaver也提供了上传和下载功能，应用Dreamweaver中的FTP发布器，可以很容易地将本地站点上传到Internet上。在“站点”面板中点击（展开/折叠按钮）展开站点窗口，并点击选择“站点文件”视图，此时窗口划分为左右2个主要的窗格，分别显示远程站点和本地文件，如图1.62所示。如果还没有与远程服务器连接，可以在窗口工具栏上点击（“连接到远端主机”按钮）与远程服务器进行连接。单击下载（文件从Web服务器发送到本地硬盘）或上传（文件从本地硬盘发送到Web服务器上）按钮，可以下载或上传整个站点。上传文件时，还可以从右边窗格拖动文件或文件夹到左边窗格。下载文件时，也可以从左边窗格拖动文件或文件夹到右边窗格。上传完所有文件后，单击按钮断开与服务器的连接，这时就可以通过浏览器访问创建的网站了。站点窗口(3)网站更新1)下载更新先将远程服务器上的网站结构和相关的网页下载到本地计算机上进行更新，然后再将更新内容重新上传到远程服务器上。利用Dreamweaver的下载和上传功能以及编辑功能，可以方便地将远程站点或其中的部分内容复制到本地站点上进行编辑和更新。2)上传更新本地站点连入FTP服务器之后，可以将本地站点中的文件上传到远程服务器上。当在本地站点中完成了对某些文件或文件夹内容的更新操作后，向远程服务器上传这些文件或文件夹，也就实现了对网站内容的更新。3)同步更新在Dreamweaver中，可以自动地把文件的最新版本上传到远程站点，也可以从远程站点传回到本地站点，使本地站点和远程站点上的文件保持同步。在站点窗口的菜单中选择“站点”中的“同步”命令，弹出同步对话框，在对话框中选择同步的区域是整个站点还是指定文件（如果是对指定的文件或文件夹进行同步处理而不是整个站点，则要先在站点窗口的本地窗格或远程窗格选择要同步的文件或文件夹），再选择复制文件的方向，如图1.63所示。最后点击“预览”即可。(4)网站管理利用Dreamweaver的SiteFTP程序可以完成对网站的管理工作。可以通过SiteFTP程序完成对站点的上传或下载、测试和更新等管理工作。除此之外，网站管理员还可以对站点进行其它编辑操作。打开“站点”面板，在站点下拉列表（如图1.64所示）中，可以通过选择站点来打开需要的站点，也可以通过选择“编辑站点”来打开“编辑站点”对话框，如图1.65所示。在“编辑站点”对话框中，点击需要操作的站点后，如果点击“编辑”则重新定义此站点；如果点击“复制”则复制此站点，以满足快速创建结构相同或类似站点的要求，也可以用此操作来备份站点；如果点击“删除”则删除此站点。删除操作只是去掉了Dreamweaver和本地站点之间的联系，并没有删除本地站点所在的文件夹和文档，因此可以通过重新创建网站来建立起与这些文件夹和文档的联系。对站点的编辑操作完成后，点击“完成”。图1.64选择站点图1.65编辑站点对话框(5)查看网站结构站点窗口的左右两列分别显示了远程站点和本地站点的内容，如图1.62所示。在站点窗口的工具栏上点击“站点结构”按钮，从下拉菜单中可以选择本地站点的显示方式，可以选择以站点的层次结构图来显示的“地图”方式，也可以选择“地图和文件”同时显示的方式。远程站点则只能以文件列表的形式显示。如果要查看远程站点的结构图，必须先将远程站点下载到本地站点。(6)网站窗口操作在站点窗口中，不仅可以利用工具栏上的按钮上传下载站点、查看本地站点的结构和站点文件，还可以利用菜单进行创建目录、删除目录、新建文件、打开文件、改变站点的显示方式等操作。实验一认识网站(1)实验目的与要求1)通过对喜好的网站的访问和分析，使学生从一般访问者逐步过渡到能从专业的角度分析评价一个网站；2)通过建站练习，掌握使用DreamweaverMX建立一个网站的过程，掌握网站的上传、测试和管理方法；3)通过实际操作，理解HTML文件、服务器与客户机、IP地址与域名、虚拟主机、文件传输协议等基本概念。(2)实验内容与实验时数实验时数：4学时。1)访问喜好的网站，分析其设计理念；2)配置Web服务器；3)测试IP地址以及网络连接是否畅通；4)建立本地目录；5)在服务器上建立虚拟主机；6)建立一个本次实验练习使用的网站；7)做两个带超链接的网页并上传到服务器；8)对本地和远程对网站进行链接和兼容性测试；9)进行网站管理练习。(3)实验参考步骤1)打开浏览器，访问喜好的网站。2)在教师指导下配置Web服务器，详细步骤参见1.3.2。3)使用CMD、IPCONFIG、PING命令，通过客户机和服务器的标识来测试客户机和服务器的IP地址，并测试网络连接是否畅通。4)在教师指导下在服务器上建立虚拟主机，详细步骤参见1.3.2。5)启动DreamweaverMX，建立一个本次实验练习使用的网站，详细步骤参见1.4.3。6)在本地站点中新建两个空白网页，在网页编辑窗口中输入任意文字并通过“插入”菜单插入图像，再通过“插入”菜单或属性面板在两个网页之间建立超链接，操作过程参见1.4.3。7)如果安装有多个浏览器，可以在“文件”菜单的“在浏览器中预览”中选择“编辑浏览器列表”来添加浏览器，如图1.68所示。添加浏览器后使用F12和Ctrl+F12来预览测试制作的网页。如果只安装了一个浏览器，直接按F12来预览测试制作的网页。8)对本地站点进行链接和兼容性测试，详细步骤参见1.4.4。9)利用DreamweaverMX中的FTP发布器，将本地站点