电子商务网页制作-项目五.pptx

《电子商务网页制作-项目五.pptx》由会员分享，可在线阅读，更多相关《电子商务网页制作-项目五.pptx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目五创建与管理网站站点项目综述 本项目以内利商城为主线,介绍了该网站在制作前期如何进行站点的规划、创建与管理。项目目标能力目标：学习完本项目后,学生应当能够依据网站的规划进行站点的总体设计、创建与管理,包括:(1)规划网站栏目及文件目录设置。(2)创建本地站点及管理站点文件。知识目标：(1)网站栏目设计规范。(2)网站文件目录的分类。(3)Dreamweaver中站点的创建步骤。(4)Dreamweaver中站点的管理方法。Part01任务一网站文件目录的创建任务引导 创建网站和制作网页不同，网站具有整体性，有统一鲜明的主题。根据相应的主题和需求，决定了整个站点的构成。网站设计是否成功与建站

2、前的规划有着极为重要的关系。通过网站规划确定了网站的主题、功能和整体结构后，这才便于后续网站页面模板的设计与制作。任务实施1.电商形象展示网站结构的规划2.电商形象展示网站结构的制作知识分析1.网站规划的市场调研 网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别对于网站前端部分而言，更为关注的是网站的栏目设计。对于确定网站的主题和功能目标而言。就是明确该电商企业网站建立的目标是企业形象展示，还是用于与用户之间进行交互、社群营销改进服务；还是单纯要实现网络营销与在线交易为主的。其次，是分析考虑企业自身的经营状

3、况，包括企业的主营产品的情况，消费市场的认知程度以及所处行业状况。最后再进行可行性分析评估。知识分析2.网站栏目的要点 回到网站栏目规划，可以说它对于企业网站建设是否成功有着非常直接的关系，而现实中相对于网站页面及功能规划，网站栏目规划的重要性常被忽略。网站栏目的设置主要可以考虑以下几个方面：突出主题，点题明义。考虑到用户体验，清晰导航。方便沟通，人性化设计。在具体的网站栏目规划上，扁平化原则是经常被提到的。知识分析3.网站结构图 网站结构图还可以包含网站的链接结构。网站的链接结构是指页面之间相互链接的结构。不同网页之间通常具有一定的逻辑关系，比如先后关系、包含关系、并列关系等，多个网页按照它

4、们之间的逻辑关系组织在一起就形成了各种链接结构。我们分析网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。通常网站所用的链接结构有三种，最常用的是层次型结构，其次是线型结构和网络型结构。知识分析4.网站文件目录结构设计 网站的目录是指建立站点时创建的目录。网站目录结构直接体现于URL。清晰简短的目录结构和规范的命名不仅有利于用户体验和网址传播,更是搜索引擎友好的体现。其设计要点如下:对于小型网站而言,一般只有一层子目录；对于中大型网站,往往需要二到三层子目录。拓展练习 1.网站目录结构优化要点 （1）目录结构扁平化趋势 （2）制作网站地图 2.网站地图制作（1）网站页面繁多（2）网站缺

5、乏足够外链（3）网站结构太深（4）网站动态页面较多（5）网站更新频繁习题1.通过对中国移动浙江站（http:/）进行分析其栏目，画出组织结构图。并查看其网站地图页面（http:/ 无论是创建网站还是制作网页，都应该先在本地计算机上通过Dreamweaver软件来创建站点。使用站点管理可以对网页文档、样式表文件、页面素材进行更好规划化的管理，能够极大的提高网页制作的效率，特别是在后期维护时。任务实施1.创建本地站点文件夹2.设计网站文件目录结构3.打开Dreamweaver CC2018软件4.创建内利商城站点5.站点的管理6.保存网页文件知识分析 1.Dreamweaver的认知 Dreamw

6、eaver 是一个可视化的网站开发工具，可以辅助人们快捷、方便地进行网页编辑。使用Dreamweaver来创建一个网站的流程包括：规划和设置站点，即确定将在哪里发布文件，网站访问者的情况以及站点目标。在组织好信息并确定结构后，就可以开始创建站点。组织和管理站点文件，创建站点后，在“文件”面板中，可以进行添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。设计网页布局，选择使用的布局方法。可综合使用CSS定位样式或预先设计的CSS布局来创建布局。也可利用表格工具，通过绘制并重新安排页面结构来快速设计页面。知识分析 2.Dreamweaver工作区域 Dreamweaver与Photosho

7、p一样，是浮动面板风格，可以拖动或调整它们的位置和组合，创建和编辑中的网页显示在“文档”窗口。Windows风格的菜单栏可以执行和浮动面板一样的操作。3.文件面板 除了菜单命令，浮动面板是Dreamweaver的另一个主要的操作方法。有着不同的面板操作来实现与菜单命令的对应。而这些面板组可以通过选择“窗口”菜单中的面板名称，显示或隐藏面板组或面板。将这些面板叠加后便形成了面板组。知识分析4.插入面板 “插入”面板，可以将各种类型的网页元素（例如图像、表格、Flash等）插入文档中。同样面板组中的操作也能通过菜单操作实现，正如前面所表述的“插入”面板的操作也能通过“插入”菜单来实现。5.文档工具

8、栏和文档窗口 “文档”工具栏，默认打开，在“窗口”菜单的“工具栏”命令中，主要是提供“文档”窗口视图的三种基本模式，即“设计”视图、“拆分”视图和“代码”视图，其中“设计”视图可以下拉选择“实时视图”。知识分析6.属性面板 属性面板，用于查看和更改所选取的对象的各种属性的面板。对象不同，属性面板也会不同。也就是当选择的页面元素不同时，属性面板的显示，可设置的内容也会随之变化。7.Dreamweaver帮助系统 Dreamweaver提供了操作方便、完善的帮助系统。可以通过“帮助”菜单打开，可以在各面板中单击“?”图标打开有关该面板的帮助。可以通过目录系统进行查询，也可以通过索引和关键字搜索来寻

9、找所需的帮助内容。拓展练习1.新的Dreamweaver版本支持多显示器 该功能可以为 Windows 提供多显示器支持。让用户可以同时使用多个显示器。这样可以使用户在一个显示器中查看实时预览，同时在另一个显示器中编辑代码。也可以让文档窗口不再以选项卡的形式呈现并将其拖至另一个显示器。同时可以根据不同的的显示器的大小和分辨率自动调整。2.新的Dreamweaver版本支持Git支持 Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。分布式相比于集中式的最大区别在于开发者可以提交到本地，每个开发者通过克隆（git clone），在本地机器上拷贝一个完整的Git仓库。习题1.做一份京东商城的网站栏目结构图，并分析其特点。2.尝试使用“资源”面板来有效地管理和组织网站中的资源。谢谢观看&欢迎指导！