项目六-创建电子商务网站站点

1、项目六 创建电子商务网站站点主要内容项目引导项目任务书项目任务实施1233项目任务分析4自学与拓展35项目引导网站站点怎样设计和创建？站点的设计与创建是网站设计与制作的准备工作，目的是对整个网站很好的管理，理清网站栏目的层次结构，各个网页、网页元素之间的关系。本项目将通过对浙江内利信息技术有限公司的企业形象展示网站站点的设计与创建来使学生掌握站点的设计与创建的要点。项目任务书能力目标学习完本项目后，学生应当能够依据网站的规划进行站点的总体设计、创建与管理，包括：1)规划网站结构及文件设置2)创建本地站点及管理文件夹3)在管理站点中新建空白网页和文件夹知识目标 1）网站结构设计的注意要点 2）网

2、站文件目录的分类 3)Dreamweaver中站点的创建步骤 4)Dreamweaver中站点的管理项目任务引导任务一创建网站结构及文件目录本任务目标是根据网站规划给浙江内利信息技术有限公司的企业形象展示网站做结构设计与文件目录设计,效果如下图所示。项目任务实施任务一创建网站结构及文件目录 1.网站结构规划 网站的栏目设计都是基于企业建站的目的所考虑的。本项目中的网站类型是立足于企业形象展示，为用户提供方便的沟通平台等功能。为了使网站结构层次清晰、导航明晰，往往需要设置整体网站的导航栏，网站栏目的设计也就是该导航栏的栏目设计。根据这个特点，从前面项目的规划可以做出如下的栏目设计：1）关于内利，

3、主要引导访问者了解公司的基本简介、组织结构、企业文化、展示企业的背景，规模以及感兴趣的访问者如何联系公司。这里分别设置了“公司简介”、“公司文化”和“联系我们”三个子栏目内容来具体展示。2）内利新闻，引导访问者了解公司的最新动态。这里通过“媒体报道”和“内部新闻”一外一里两个子栏目的内容来展示。3）招贤纳士，主要用来刊登招聘信息的栏目内容。4）加盟内利，这个是主要栏目，作用是公司主营业务的展示，内利卡的推广。通过子栏目“加盟条件”、“加盟回报”、“加盟流程”、“加盟资料下载”和“特约加盟商户”来展示为何来加入内利卡，如何加入以及加入的对象等内容。5）内利卡，主要引导访问者了解内利卡是起什么作用

4、的。通过子栏目“什么是内利卡”、“内利卡使用手册”和“常见问题”来具体介绍内利卡。6）内利商城，引导访问者去超链接访问“内利商城”网站。项目任务实施任务一创建网站结构及文件目录2.网站结构图 将规划的网站结构用网站结构图来表示，一目了然，方便与客户间沟通交流。网站结构图可以用前面项目掌握的Photoshop技能来制作。本任务中则使用Word绘制网站栏目结构图，使用Word绘制便于直接用于各种文档以及复制粘贴到PPT上。（2）插入形状。选中组织结构图，出现“组织结构图”工具栏、，利用工具栏上的“插入形状”下拉列表，选择可插入各文本框所属的形状（下属、同事、助手）。（1）打开一个Word文档，插入

5、“组织结构图”。单击“插入”菜单，在“图片”选项列表中选取“组织结构图”项目任务实施任务一创建网站结构及文件目录按二级栏目要求，在原有3个形状上，添加4个形状。再分别对应添加三级栏目。再通过“组织结构图”工具栏的“自动版式”调整各文本框所属的形状的位置和大小项目任务实施任务一创建网站结构及文件目录（3）添加栏目文字。单击各文本框，添加相应的栏目名称。（4）自动套用格式。选中组织结构图，再单击工具栏上的“自动套用格式”按钮 ，弹出“组织结构图样式库”在左侧“选择图示样式”列表中选择“三维颜色”，点击“确定”按钮套用图示样式，完成网站结构图的绘制，并保存文档。项目任务实施任务一创建网站结构及文件目

6、录 3.网站文件目录结构设计 网站往往包含很多文件，企业网站也是如此。初学者常将所有的文件混杂放置在根目录下，则整个站点将显得杂乱无章。建立网站的目录结构就是为了“分门别类”地存放这些文件，便于整个网站的维护和管理。 首先在E盘创建一个文件夹“neili”用于存放整个网站文件。然后在“neili”的根目录下分别创建文件夹“images”存放图像、“CSS”存放样式文件、“flash”存放flash文件、“audio”存放音频文件。再分别创建“about”、“news”、“job”、“chain”、“card”和“shop”分别对应存放“关于内利”、“内利新闻”、“招贤纳士”、“加盟内利”、“内

7、利卡”和“内利商城”这些二级栏目的文件。如果图像很多，可以在各个二级栏目文件夹中分别创建“images”文件夹来存放这些栏目页面对应的图像。整体文件目录结构如图项目任务实施任务一创建网站结构及文件目录 任务分析 1.企业网站栏目规划重要性网站栏目规划对于企业网站建设的是否成功有着非常直接的关系，而现实中相对于网站页面及功能规划，网站栏目规划的重要性常被忽略。网站栏目的设置主要可以考虑以下方面：（1）突出主题，点题明义（2）考虑到用户体验，清晰导航（3）方便沟通，人性化设计2.三次点击规则所谓的“三次点击”原则，这是从用户体验角度归纳得出的，即一般用户在寻找目标内容的时候一般不愿连续点击三次。正

8、是基于这样，一般用于作为一个网站栏目链接的指导原则，尽可能使网站“链接结构”扁平化。也就是从首页开始，借助导航栏或者分类列表等，使网站内的任意内容可以经3次点击即可到达。如“首页”到“栏目”到“分类信息”到具体“内容页”。这样的栏目设置，也是便于搜索引擎能够很好的抓取。也就是说一个电子商务网站从首页到最终的内容页不要超过级目录。自学与拓展任务一创建网站结构及文件目录1.网站地图 网站地图（Sitemap），本身就是一个页面，上面放置了整个网站上所有页面的链接。大多数人在网站上找不到自己所需要的信息时，可能将网站地图作为一种补救措施。网站地图对于搜索引擎蜘蛛非常有用。中国移动通信的网站地图,如图

9、所示。自学与拓展任务一创建网站结构及文件目录2.信息闭环设计信息闭环设计，就是通过访问者进入的最终内容页，进行关联推荐或者匹配，引导用户继续浏览而不用进行返回性质的操作。常见的情况就是在浏览门户新闻的时候再该新闻下方往往都会看到相关新闻列表。以当当网中的具体一本书的页面为例来看信息闭环设计，如图所示。自学与拓展任务一创建网站结构及文件目录习题1.分析京东商城一类的电子商务网站的栏目结构设计的特点。 2.了解SEO对电子商务网站结构设计上的一些基本要求。项目任务引导任务二创建与管理网站的站点本任务目标通过Dreamweaver来创建内利企业形象网站的站点并进行站点管理。项目任务实施任务二创建与管

10、理网站的站点1.创建本地站点文件夹在本地磁盘中创建一个用来存放站点文件的文件夹，然后在该文件夹中再创建一个图像文件夹用来存放网站中的图像。本任务中运用上任务创建的网站文件夹“neili”。项目任务实施任务二创建与管理网站的站点2.运行Dreamweaver通过点击Dreamweaver软件的图标运行，在起始页对话框选择“新建”下的“HTML”选项 ，系统打开一个未命名的空白文档窗口，整个工作界面如图6-11所示。Dreamweaver软件的运用和Photoshop类似，也是通过各类浮动工作面板或者菜单选项来完成的。项目任务实施任务二创建与管理网站的站点3.创建网站站点 在“文件”面板中单击“管

11、理站点”，在弹出的“管理站点”对话框中选择“新建”按钮项目任务实施任务二创建与管理网站的站点 在弹出的“站点定义为”选项卡中切换至“高级”卡。在选项卡中，主要设置“站点名称”，在文本框中输入要创建的网站名称。“本地根文件夹”，输入创建本地站点文件夹的路径。“默认图像文件夹”，在文本框中输入创建本地站点文件夹中默认存放图像的文件夹路径，可以使网页中引用的站点外图像自动保存至“默认图像文件夹”。其余设置可按默认设置，最后点击“确定”按钮完成设置。设置完成后，可在“管理站点”对话框中看到所设站点的名称，最后再点击“完成”按钮。项目任务实施任务二创建与管理网站的站点完成点击后，可通过该面板右键单击创建

12、“新建文件”网页和“新建文件夹”。项目任务实施任务二创建与管理网站的站点4.保存网页文件 点击“文件”菜单中的“保存”，在弹出的对话框中选择存放位置。完成网站站点创建后，网页文件会被默认保存在站点创建的本地根文件夹中，在文件名后的文本框中输入“index.html”，然后点击“保存”按钮项目任务实施任务二创建与管理网站的站点5.站点的管理对已建好的站点进行管理,可以通过点击“站点”菜单的“管理站点”弹出对话框，如图6-17所示。通过点击“编辑”按钮，可以对该站点的设置重新进行修改。若当前有多个站点，可以通过鼠标在左侧站点名称的列表中进行选择切换至对应站点的状态。项目任务实施任务二创建与管理网站

13、的站点通过“导出”按钮，可以将选中的站点相关设置信息以扩展名为.ste的文件形式保存。当需要时，可以再通过“导入”按钮将该文件导入，导入后就不用再重新设置站点信息。 1.Dreamweaver 工作流程 Dreamweaver 是一个可视化的网站开发工具，可以辅助人们快捷方便的进行网页编辑。使用Dreamweaver来创建一个网站的流程包括： 规划和设置站点，即确定将在哪里发布文件，网站访问者的情况以及站点目标。在组织好信息并确定结构后，就可以开始创建站点。 组织和管理站点文件，创建站点后，在“文件”面板中，可以进行添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。 设计网页布局，选择

14、使用的布局方法。可综合使用 Dreamweaver AP 元素、CSS 定位样式或预先设计的 CSS 布局来创建布局。也可利用表格工具，通过绘制并重新安排页面结构来快速地设计页面。如果希望同时在浏览器中显示多个元素，也可以使用框架来设计您的文档的布局。最后，可以基于 Dreamweaver 模板创建新的页面，然后在模板更改时自动更新这些页面的布局。项目任务分析任务二创建与管理网站的站点项目任务分析任务二创建与管理网站的站点 向页面添加内容，完成布局后，则进行网页元素的添加，如文本、图像、鼠标经过图像、超链接等。最后，Dreamweaver 还提供测试页面是否确保能够兼容不同的 Web 浏览器。

15、 通过手动编码创建页面，是创建页面的另一种方法。同时对于一些具体网页内容，可能也需要通过手动编码进行微调。Dreamweaver 提供了易于使用的可视化编辑工具，但同时也提供了高级的编码环境来创建和编辑页面。 测试和发布，测试页面是在整个开发周期中进行的一个持续的过程。在这一工作流程的最后，在服务器上发布该站点。许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常。1.“文件”面板“文件”面板也是Dreamweaver最常用也是最主要的面板之一。它集成了站点管理的各种工具。在“文件”面板中点选最右侧的展开/折叠站点图标 ，展开完整“文件”面板自学与拓展任务二创建与管理网站的站点 2.Dream