电子商务网站建设与管理第5讲设计与管理站点eurokal课件

第5讲设计与管理站点第5讲设计与管理站点通过本章的学习，主要掌握以下知识点：站点的规划站点的设计站点的管理通过本章的学习，主要掌握以下知识点：网站开发流程站点规划设计站点的基本结构设计并制作网页搜集网页制作素材编写核心代码实现交互性和动画测试优化网站、发布和维护站点网站开发流程站点规划网站开发流程在了解了制作与编辑网页的工具后，应该了解一下网站开发制作的流程。多媒体网页的制作过程就是根据一定的应用主题，选择、编辑表现主题的多媒体元素和数据，然后把这些多媒体元素和数据按照一定的结构有机地组织在一起，并实现交互控制的过程。图1所示为网站开发制作的流程图。网站开发流程在了解了制作与编辑网页的工具后，应该了解一下网站需求分析，确定网站主题、目的、用途确定网站的功能、结构、布局、色彩、实现方法确定开发语言、设计环境设计网站各层次页面效果图，并设计成静态网页素材整理编写网站的核心代码，实现页面连接测试完善网站程序，进一步细化网站制定网站详细规划书发布网站网站开发流程网站开发制作的详细流程图整体规划阶段测试发布阶段结构布局效果实现阶段代码编写阶段需求分析，确定网站主题、目的、用途确定网站的功能、结构、布局网站开发主要流程解析第一步是对站点进行构思。有了建立一个网站的想法以后，首先去调查分析，查看有没有同类站点，了解他们的主题定位，开发语言、布局结构，色彩等信息。然后明确你要建站的主题、目的，确定它要提供的服务等。用纸和笔快速记下这些信息。有时，一个良好的构思比实际的技术实现更为重要，因为它直接决定站点质量和将来的访问流量。第二步是确定网站的功能、结构、布局、色彩等信息。根据你确定的网站主题和提供的服务，简单构思网站的功能，网站的结构布局，栏目分配，网站的色彩等信息，以草图的形势实现网站的雏形。第三步是整理搜集与网页制作有关的文本、图片、各种音频视频文件等资料，做好制作网页的各种素材准备工作。然后确定用什么设计网站界面，用什么语言设计网站程序，用什么软件书写代码，用什么数据库等信息。网站开发主要流程解析第一步是对站点进行构思。有了建立一个网站网站开发主要流程解析第四步是制定网站详细规划，制定把以上的构思形成标准的文档，严格按照网站的规划书进行设计网站，主要网站的主题，目的，服务；网站的结构布局；开发团队，进度，花费等方面的详细规划。第五步是整理搜集的各种素材,用平面设计软件实现网站各个层级的效果图，就是用平面设计软件设计出网站首页、列表页、内容页等各层级页面的效果图，然后切片，最后转化为简洁的静态网页。第六步是核心代码的设计，如果你是制作是静态网站这一步就不存在了，您可以通过上一步制作的静态页面，分别填充内容就行了。如果是动态网站您就需要根据你选择的语言编写各个部分的核心代码，以实现各种交互功能。网站开发主要流程解析第四步是制定网站详细规划，制定把以上的构第七步是测试代码，察看漏洞，完善错误提示，优化代码第八步是上传发布你的网站程序，绑定您的域名，空间。用ftp工具上传你的代码。第七步是测试代码，察看漏洞，完善错误提示，优化代码站点规划网站可以看作是一系列文档的组合，这些文档通过各种链接关联起来，可能拥有相似的属性，如描述的主体具有相关性，采用的设计彼此相似或实现相同的目的等；也可能只是关系的链接，利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。不论是正规的商业网站还是个人网站，要想把网页制作得丰富多彩，吸引大量用户前来访问，网站规划设计都是至关重要的。除非只设计一两个网页，否则网页制作应该按网站来考虑，首先对网站内容进行规划设计。在站点规划中主要做的工作是网站内容的设计，也就是针对网站主题、网站内容和表达内容所用的媒体方式的设计。站点规划网站可以看作是一系列文档的组合，这些文档通过各种链站点规划创建新网站的最佳方法是先建立原型系统，再进行详细设计，最后正式实施。进行详细设计时，最重要的是确定网站的运行模式和目的。是宣传性站点或者随意性很强的个人站点，还是通过广告、销售等方式获利的站点，还是目前的搜集素材的站点，设计方式和内容都有很大的区别。对于商业网站，必须充分考虑财力、人力、计算机数量、网络连接方式、系统的经济效益、网站验证和用户反馈等诸多方面的问题。从长远角度考虑，必须准确地知道网站的目标和系统的资金投入。站点规划创建新网站的最佳方法是先建立原型系统，再进行详细设站点规划影响网站成功的因素主要有网站结构的合理性和直观性，多媒体信息的实效性和网站维护的开销等。成功网站的最大秘诀在于让用户感到网站对他们非常有用。进行网站内容开发的要点包括：HTML文档的效果由其自身的质量和浏览器解释HTML的方法决定。由于不同浏览器的解释方法不尽相同，所以在网页设计时要充分考虑到这一点，让所有浏览器都能够正常浏览。站点规划影响网站成功的因素主要有网站结构的合理性和直观性，站点规划网站信息的组织没有任何简单快捷的方法，吸引用户的关键在于总体结构的层次分明。应该尽量避免形成复杂的网状结构。网状结构不仅不利于用户查找感兴趣的内容，而且在信息不断增多后还会使维护工作非常困难。图像、声音和视频信息能够比普通文本提供更丰富和更直接的信息，产生更大的吸引力，但文本可提供较快的浏览速度。因此，图像和多媒体信息的使用要适中，减少文件数量和文件大小是必要的。站点规划网站信息的组织没有任何简单快捷的方法，吸引用户的关站点规划对于任何网站，每一个网页或主页都是非常重要的，因为用户的第一印象往往是一个网站的主页，好印象能够吸引用户再次光临这个网站。网站内容应该是动态的，定时进行修改和更新，以便使网站紧跟市场潮流。在主页上注明更新日期及URL，这对于经常访问的用户非常有用。网页中应该提供一些联机帮助功能。比如输入查询关键字就可以提供一些简单的例子，或者列出常用的关键字。千万不能让用户不知所措。网页的文本内容应简明、通俗易懂。所有内容都要针对设计目标而写，不要文不对题。文字要正确，尽量减少语法错误和错别字。站点规划对于任何网站，每一个网页或主页都是非常重要的，因为网页的文本内容应简明、通俗易懂动态网站最好提供友好的用户图形界面，简单而且安全的注册和登陆方式有效的站内信息检索制作容易被搜索引擎收录的相关页面最关键的还是网页的下载速度和友好的用户界面网页的文本内容应简明、通俗易懂设计站点的基本结构下面所举的实例网站是一个关于图书的网站，网站名为“网上书苑”，本站主题是“网上图书供销”，如图所示，包括“文学作品”、“科普作品”、“儿童读物”、“社会科学”、“宗教书籍”和“考试用书”6个栏目。在这6个栏目中还包含其他一些相关的内容。设计站点的基本结构下面所举的实例网站是一个关于图书的网站，设计站点的基本结构网站主页设计为一个索引页，每一个网页设计一个索引(导航栏)，以便浏览者随时跳转到想要浏览的栏目。在各个栏目中还应该设计一个索引框架，以便在各栏目的相关内容中浏览。在这些网页中主要以文本为主。另外，还需要添加一个用户信息反馈的网页，以便收集用户意见和联系用户。网站的基本结构设计主要是设计各项内容之间的层次关系和链接跳转关系。在网站内容设计的基础上，继续对“网上书苑”网站进行基本结构设计。图1.13所示为网站的基本结构示意图。设计站点的基本结构网站主页设计为一个索引页，每一个网页设计图1.13“网上书苑”网站基本结构示意图设计站点的基本结构首页(index页）儿童读物科普作品社会科学宗教读物书目书目书目书目书目书目书目书目书目书目书目书目“首页”第一层级“栏目页”第二层级“内容页”第三层级图1.13“网上书苑”网站基本结构示意图设计站点的基图1.13“网上书苑”网站在dreamweaver8中的站点结构示意图图1.13“网上书苑”网站在dreamweaver8中设计并制作网页网站基本结构设计结束后，就可以对每一个网页进行详细的设计，即网页页面设计。设计网页页面需要大致确定每个网页的布局和构图结构，还有颜色主色调。如网站徽标、图像、动画、导航栏、框架、文本的布局设计、页面背景图像和背景音乐的版面设计等。图1.14所示为“网上书苑”网站主页的页面设计示意图，这是根据网站内容规划和基本结构设计的。在站点初步规划时应该已经手绘出了网站的草图，设计并制作网页网站基本结构设计结束后，就可以对每一个网页进行设计并制作网页主页主要是利用布局表格来安排网页中的各种元素，并选择1024×768分辨率的浏览窗口作为网站网页的设计大小。图1.15所示为“网上书苑”网站“文学作品”网页的页面设计示意图，也是根据网站内容规划和基本结构来设计的。其中，布局主要使用框架和表格。其他同一层网页的页面设计基本和“文学作品”网页的相同，只是按钮、图像和文本有所改变，而且每个网页页面布局的方法有一些区别，但不外乎包括布局模式、表格、层和框架。设计并制作网页主页主要是利用布局表格来安排网页中的各种元素，设计并制作网页第三层和第四层页面主要以文本为主，用户可以自己设计这些网页的页面，这里不再详细讲述。网站各个网页的页面设计好以后，就可以着手制作网站的各个网页。需要说明的是，网站内容设计、基本结构设计和各个网页页面设计的方案只是暂定，也就是说是打了一个草稿，可以起到指导作用。在网页制作过程中，随时可以根据需要对原有设计方案进行补充和修改。网站制作的各项准备工作都完成后，就可以按照网站设计的基本结构和页面结构，开始进行网页具体制作。图1.16所示为在Dreamweaver8中进行实例网站“文学作品”网页的制作。设计并制作网页第三层和第四层页面主要以文本为主，用户可以自己设计并制作网页图1.14“网上书苑”网站主页的页面设计草图设计并制作网页图1.14“网上书苑”网站主页的页面设计设计并制作网页图1.15“网上书苑”网站“文学作品”网页的页面设计设计并制作网页图1.15“网上书苑”网站“文学作品”网设计并制作网页图1.16在Dreamweaver8中制作“文学作品”网页设计并制作网页图1.16在Dreamweaver8整理素材，设计网页的效果图网站的内容和结构设计好以后，就可以根据网站内容和基本结构设计的要求，进行素材的准备工作和网站编辑工作。具体说，就是要搜集与网页制作有关的文本、图像、音频和视频等资料，也可以从网上下载有用的内容和素材，并且根据要求进行图像处理、动画制作、音效生成和视频编辑等工作。图像处理，动画制作，音效和视频的生成和编辑，感兴趣的用户可以参考有关书籍。图1.17所示为在Fireworks8中编辑网站徽标。整理素材，设计网页的效果图网站的内容和结构设计好以后，就可以搜集网页制作素材图1.17在Fireworks8中进行网站徽标的图像处理搜集网页制作素材图1.17在Fireworks8中进实现交互性和动画网站交互性是指网站中的网页会根据用户的要求和选择进行动态改变和响应，这样浏览器可作为客户端界面，这将是今后Web发展的大趋势。不仅如此，网站交互性还可以实现“因时因人而变”功能，即在不同的时间、不同的人访问同一网址时会产生不同的页面。网站中各个网页制作完成以后，需要对网页中的各个锚(超链接的端点)添加超链接，并正确选择链接指向的目标，然后为各种表单和跳转菜单设置和调整跳转和交互等各种功能，以形成一个有机联系的网站。实现交互性和动画网站交互性是指网站中的网页会根据用户的要求实现交互性和动画如果需要为网页添加一些动画和行为，还需要在Dreamweaver的【时间线】面板和【行为】面板中为对象设置轨迹、事件和动作。对于个人网站来说，充分运用HTML技术足以令网页栩栩如生，动感十足。然而对于建立商业网站的企业而言，仅仅拥有HTML是远远不够的。因为仅仅发生在客户浏览器端的动态效果是无法满足商业网站大量的信息查询、客户咨询和资源交互等“动态”需求的。因此作为商业网站的设计者，要必须设计出更具实用性和交互性的“动态”网站。本课程将在以后的章节中详细介绍具有交互性的“动态”网站的工具和设计方法。实现交互性和动画如果需要为网页添加一些动画和行为，还需要在测试、发布和维护站点网站设计制作完毕，在发布到Internet上之前，必须要对它进行测试，这样才能保证发布到远程服务器上时不会出现问题。测试是在浏览器中进行的，测试的内容包括浏览器的兼容性，文档之间的链接正确与否等方面。在浏览器中测试网页的方法是：在Dreamweaver8窗口中选择【文件】|【在浏览器中预览】命令，然后选择一个浏览器来预览文档。Dreamweaver8会在安装时自动检测用户系统中所安装的浏览器，如果用户想编辑浏览器列表，单击【编辑浏览器列表】命令，在出现的【首选参数】对话框中选择【在浏览器中预览】选项。测试、发布和维护站点网站设计制作完毕，在发布到Intern测试、发布和维护站点虽然所有的网页都遵循HTML4.01标准，但不同软件开发商的浏览器之间有细微的差别，因此用户在发布网页之前必须要对它进行兼容性测试，以保证它在用户所期望的浏览器中能够正确显示。网页制作完后，就要把它上传至连接Internet的服务器上，让全世界都能看到。这就要找一个主页的存放空间。网页的上传大致分为3种形式：E-mail、FTP、www，分别使用相应的软件，如以FTP上传使用CuteFTP软件。用户的主页上传完毕后，也就在Internet上拥有了自己的一席之地。维护网站，也就是管理网站，主要涉及网站内文件的管理、文件的上传和下载、网站信息更新和用户信息的接收等。要想保持网页的浏览人数，就要不停地更新自己的主页，增加其内容，给人一种新鲜感。平时上网时多搜集资料，多听听别人的意见，每隔一段时间更新版面。只有这样，网页才能不断地为网友服务。测试、发布和维护站点虽然所有的网页都遵循HTML4.01标5.2设置站点“Dreamweaver站点”和“Internetweb站点”不完全相同。“Dreamweaver站点”是在Dreamweaver制作网页的过程中所使用的术语，是定义一个站点名称、存放文件的文件夹、使用的Web服务器和应用服务器技术等。“InternetWeb站点”则是把已经成功的网站内容放到Internet或Intranet的web服务器上供用户浏览，即运行系统的web服务器上的站点。网站的发布过程就是将Dreamweaver站点变成InternetWeb站点的过程。5.2设置站点“Dreamweaver站点”和“Inter1．本地文件夹是工作目录。称为“本地站点”。2．远程文件夹是存储文件的位置，称为“远程站点”，可以是专供开发用的临时定义的文件夹，也可以使用运行系统为其定义的站点。3．动态文件夹即测试服务器，是Dreamweaver处理动态页的过程。使用DreamweaverMX2004前必须至少设置一个本地文件夹。1．本地文件夹有两种：一是使用“站点定义向导”，这可以根据提示逐步完成设置过程；二是使用“高级”设置，可以根据需要分别设置本地、远程和测试文件夹。设置Dreamweaver站点的方法有两种：设置Dreamweaver站点的方法5.2.1管理站点1．选择菜单栏中的“站点”-〉“管理站点”，出现“站点管理”对话框，在对话框中可以定义多个站点。新建站点操作如下：1）单击“新建”-〉“站点”，出现站点定义对话框2）单击“基本”选项卡以使用站点定义向导，或者单击“高级”选项卡以使用“高级”设置。5.2.1管理站点1．选择菜单栏中的“站点”-〉“管理站点管理站点对话框

管理站点对话框站点定义站点定义设置本地文件夹1．在“站点定义”对话框中选择“高级”选项卡和“本地信息”类别选项。2．输入“站点名称”，如mysite。3．输入“本地根文件夹”，或者单击文件夹图标以选择或新建一个本地文件夹，如D:/xwx11。4．如果选中“自动刷新本地文件列表”选项，则当每次复制文件到本地文件夹时，系统将自动刷新本地文件列表。如果不选中此项，则可以在站点面板中手动刷新。5．在“默认图像文件夹”中确定存放图像的默认文件夹，一般是根目录下的“Images”。6．在“HTTP地址”文本框中，输入Web站点将使用的URL。这使Dreamweaver能够验证站点中使用绝对URL的链接。7．“启用缓存”选项，指定是否创建本地缓存以提高链接和站点管理任务的速度。设置本地文件夹1．在“站点定义”对话框中选择“高级”选项卡和完成后的本地文件夹对话框

完成后的本地文件夹对话框设置远程文件夹

1．在站点定义对话框中选择“高级”选项卡的“远程信息”分类选项2．选择一个“访问”选项。3．确定一个“远程文件夹”。4．“自动刷新远程文件列表”复选框。5．“保存时自动将文件上传到服务器”复选框。6．“启用文件存回和取出”。7．单击“确定”按钮。设置远程文件夹定义远程站点对话框

定义远程站点对话框用FTP连接到Web服务器1．输入FTP主机名。2．输入远程站点的主目录名。3．输入连接FTP服务器的登录名和密码。4．如果你的防火墙配置要求被动FTP，则选择“UsePassiveFTP”。5．使用防火墙选项。6．在windows中使用安全FTP选择FTP来访问远程文件夹时，在Windows中可以选择使用SSH安全登录检查框以自动继续FTP的安全检查。7．其它选项与“本地／网络”中相同。8．单击“确定”按钮。用FTP连接到Web服务器1．输入FTP主机名。使用ftp连接时的远程站点定义对话框

使用ftp连接时的远程站点定义对话框1．在“站点定义”对话框中选择“高级”选项卡，然后从“类别”列表中选择“测试服务器”2．服务器模型3．访问方式有“无”、“FTP”和“Local/Network”三种。4．测试服务器5．自动刷新远程文件列表选项6．URL前缀7．单击“确定”按钮设置测试服务器1．在“站点定义”对话框中选择“高级”选项卡，然后从“类测试服务器定义对话框

测试服务器定义对话框应用服务器技术列表

应用服务器技术列表5.3.1

“文件”面板1．使用“文件”面板2．设置“文件”面板参数3．设置“文件视图列”4．在“文件”面板中查看站点5.3管理站点文件5.3.1“文件”面板5.3管理站点文件展开的文件面板

展开的文件面板折叠的文件面板

折叠的文件面板站点面板工具栏

站点面板工具栏站点首选参数对话框

站点首选参数对话框站点面板的文件列表

站点面板的文件列表站点定义中的“文件视图列”选项

站点定义中的“文件视图列”选项

5.3.2站点地图站点地图仅适用于本地站点，若要创建远程站点的地图，需将远程站点的内容复制到本地磁盘上的一个文件夹中，然后使用“编辑站点”命令将该站点定义为本地站点。 5.3.2站点地图站点地图仅适用于本地站点，若要创建远程站1.设置站点1）选择“站点”-〉“管理站点”，出现“管理站点”对话框。2）选择一个“站点”并单击“编辑”按钮，出现“站点定义”对话框。3）从左侧的“分类”列表中选择“站点地图布局”，“站点定义”对话框即可显示“站点地图布局”选项4）单击文件夹图标以通过浏览查找站点的主页。1.设置站点5）在“列数”文本框中，键入一个数字以设置在站点地图窗口中每行要显示的页数。6）在“列宽”文本框中，键入一个数字以设置站点地图列的宽度。7）在“图标标签”下，选择在站点地图中与文档图标一起显示的名称表示为文件名还是页标题。8）在“选项”下，选择要在站点地图中显示的文件。9)单击“确认”按钮5）在“列数”文本框中，键入一个数字以设置在站点地图窗口中每站点地图布局对话框

站点地图布局对话框站点地图例图

站点地图例图2.站点地图站点地图的显示规则如下：（1）以红色显示的文本指示断开的链接；（2）以蓝色显示并标有地球图标的文本，指示其它站点上的文件或特殊链接；（3）绿色选中标记指示你已取出的文件；（4）红色选中标记指示他人取出的文件；（5）锁形图标指示只读或锁定的文件。

2.站点地图站点地图的显示规则如下：若要在站点地图中打开某页进行编辑，可执行以下操作之一（1）双击该文件；（2）选择该文件，然后选择“文件”-〉“打开”或“站点”-〉“打开”。若要在站点地图中打开某页进行编辑，可执行以下操作之一创建新文件并在站点中添加链接（1）在站点地图中选择一个HTML文件，然后执行以下操作之一。

1）选择“站点”-〉“连接到新文件”或“站点”-〉“站点地图视图”-〉“连接到新文件”。

2）从上下文菜单中选择“连接到新文件”。（2）输入该链接的名称、标题和文本。（3）单击“确认”按钮。创建新文件并在站点中添加链接（1）在站点地图中选择一个HTM“链接到新文件”对话框

“链接到新文件”对话框若要在站点地图中将文件标记为隐藏（1）在站点地图中选择一个或多个文件。（2）选择“视图”-〉“显示/隐藏链接”或选择“站点”-〉“站点地图视图”-〉“显示/隐藏链接”。若要显示或隐藏站点地图中标记为隐藏文件：选择“查看”-〉“显示标记为隐藏的文件”或“站点”-〉“站点地图视图”-〉“显示标记为隐藏的文件”。若要在站点地图中显示相关文件：选择“查看”-〉“显示相关文件”或“站点”-〉“站点地图视图”-〉“显示标记为相关文件”。若要在站点地图中将文件标记为隐藏（1）在站点地图中选择一个或若要在站点地图中取消文件的隐藏标记，可执行下面的操作。

（1）在站点地图中选择一个或多个文件。

（2）再次选择“显示标记为隐藏的文件”以取消选择标记“√”。

（3）再次选择“显示/隐藏链接”以取消选择标记“√”。

若要在站点地图中取消文件的隐藏标记，可执行下面的操作。

（1从站点列表中删除站点1．选择“站点”-〉“管理站点”，出现“管理站点”对话框。2．选择一个站点名称。3．单击“删除”按钮，出现一个对话框，要求确认删除。如图3‑16所示。4．单击“是”，从列表中删除站点，或单击“NO”保留站点名称。5．单击“完成”，关闭“编辑站点”对话框。从站点列表中删除站点1．选择“站点”-〉“管理站点”，出现确认删除站点对话框

确认删除站点对话框获取和上传文件

1．从远程或测试服务器或取文件（1）在“文件”面板上，从“站点”弹出式菜单中选择一个“站点”。（2）如果在使用FTP传输文件，请单击“连接”按钮打开于