电子商务网页设计项目十一创建和管理电子商务网站本地站点.ppt

项目十一 创建和管理电子商务网站本地站点 * * * 创建网站结构及文件目录 1 任务分析 学会分析网站的结构及站点文件目录设计的方法。 相关知识 网站结构是指建立网站时所创建的文件目录及所包含的文件所表现出来的结构,这种多层级目录结构也叫做树形结构。优化站点目录结构的目的不在于提升页面视觉效果,而在于对站点本身的上传和维护、内容的扩充,特别是对于商业网站,在建站之初对目录结构的考虑直接影响到网站的实用性。以下就创建网站结构及文件目录提出一些建议: 1.不要将所有文件都存放在根目录下 2.按不同网站栏目分别建立子文件夹 3.在每个主目录下建立独立的images目录 4.目录的层次不能太多 任务实施 本任务的目标是依据某企业网站中的栏目结构进行站点文件目录设计,其效果图如图所示。 1.分析网站栏目 2.绘制网站栏目结构图 (1)插入“组织结构图” (2)插入形状。选中组织结构图,出现“组织结构图”工具栏,点击工具栏上的“插入形状”下拉列表,可选择插入各文本框所属的形状(下属、同事、助手)。 (3)添加栏目文字。点击各文本框,添加相应的栏目名称。 (4)自动套用格式。选中组织结构图,再点击工具栏上的“自动套用格式”按钮,弹出“组织结构图样式库”,如图11—3所示。 按照以上步骤绘制网站栏目结构图,保存文档即可。 3.设计网站文件目录结构 为了便于网站的管理和维护,需要对站点下的文件进行分类放置。前面所介绍的网站本身栏目较多,因此可按照栏目的类别创建文件夹并进行文件的管理。 创建与管理网站的站点 2 任务分析 创建一个名为“未命名1的站点”的本地站点,并管理该站点。 相关知识 1.站点的定义 网站也称作站点,实际上就是一组网页文档的集合。网站设计者通过各种超链接把这些网页文档联系在一起,浏览者通过浏览器点击超链接,从一个网页跳到另一个网页,从而实现对网站的访问。网页制作的第一步并不是直接制作一个网页文档,而是创建一个新的站点。当需要修改某个网页的内容时,也是在站点内的网页上进行修改。 2.站点管理器介绍 站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点及导入或导出站点。若要管理站点,必须先打开“管理站点”对话框。 3.Dreamweaver 站点的文件夹类型 Dreamweaver站点由三种类型的文件夹组成,这三种文件夹有可能是同一个文件夹,也可能不是,这取决于开发环境和所开发的网址类型。 (1)本地文件夹。 (2)远端文件夹。 (3)测试服务器文件夹。 任务实施 1.创建文件夹 建立站点前,要先在站点管理器中规划站点文件夹。 (1)在站点管理器的右侧窗口中单击选择站点。 (2)选择“文件”→“新建文件夹”命令。 (3)输入新文件夹的名称。 要注意的是,若站点不复杂,可直接将网页存放在站点的根目录下,并在站点根目录中,按照资源的种类建立不同的文件夹存放不同的资源,例如,image文件夹存放图像文件等。若站点复杂,需要根据实现不同功能的板块,在站点根目录下按板块创建子文件夹来存放不同网页,方便网站设计者修改网站。 2.创建新站点 建立好站点文件夹后用户就可以创建新站点了。 (1)选择“站点”→“管理站点”命令,启用“管理站点”对话框。 (2)在对话框中单击“新建”按钮,在弹出的菜单中选择“站点”命令,如图11—9所示。设计者可以通过“基本”选项卡建立不同的站点,同时也可以在“高级”选项卡的“本地信息”分类中根据需要设置站点,分别定义站点的名称及选择本地文件夹。 3.创建和保存网页 (1)选择“文件”→“新建”命令,启用“新建文档”对话框,选择“空白页”选项,在“页面类型”选项框中选择“HTML”选项,在“布局”选项框中选择“无”选项,创建空白网页,如图11—10所示。 (2)设置完成后,单击“创建”按钮,弹出“文档”窗口,新文档在该窗口中打开。根据需要,在“文档”窗口中选择不同的视图设计网页,如图11—11所示。“文档”窗口中有三种视图模式,分别是代码视图、设计视图和拆分视图。 (3)网页设计完成后,选择“文件”→“保存”命令,弹出“另存为”对话框,在“文件名”选项的文本框中输入网页的名称,单击“保存”按钮,将该文档保存在站点文件夹中。 4.管理站点 打开“站点”菜单,选择“管理站点”打开其对话框,利用此对话框,可以完成以下操作: (1)新建:创建一个新的站点,其操作步骤与前面介绍一样。 (2)编辑:对选中的站点进行编辑,对定义站点时的相关设置进行修改。 (3)复制:将选中的站点进行复制,创建该站点的副本。 (4)删除:删除选中的站点。此操作不可撤销,删除前要看清楚,避免误删。需要说明的是,删除站点不会删除站点文件夹和其中的文件,只是将Dreamweaver 中建立的逻辑上的站点删除。 (5)导出:将站点信息以文件的