教学课件电子商务网页设计与制作2.2 任务一创建网站文件结构.pptx

教材配套资源页完整PPT课件教学课件电子商务网页设计与制作2.2 任务一 创建网站文件结构1SAMPLE2.2 任务一 创建网站文件结构项目二 创建并管理电子商务网站站点2ABOUT ME图2-7 再精美的网站都是要从构建站点开始，在本地磁盘上建立的站点叫作本地站点，如果想让更多的人浏览到自己的网站，就必须把网站上传到Web 服务器上，而处在Web 服务器上的站点叫作远程站点，建立完善的站点，疏通网站的结构与脉络对网站的建设具有重要的意义，如图2-7所示。首页图片CSS视频会员图2-73任务描述创建本地静态站点1技术引进了解“站点设置对象”对话框2新手试炼创建小型电子商务网站站点34任务实施站点文件的优化与管理 2.2 任务一 创建网站文件结构41 任务描述创建本地静态站点5ABOUT ME 站点的类型有很多，包括本地静态站点和远程动态站点等。对于网页初学者来说，创建本地静态站点是很关键的，使用Dreamweaver可以轻松创建本地静态站点。 本任务将在Dreamweaver中使用“新建站点”的功能创建一个静态站点，使用“管理站点”优化站点结构。帮助读者掌握创建本地站点的方法的同时，理解本地站点的基本结构，如图2-8所示。图图2-82-8在创建站点之前，需要对站点的结构进行规划，特别是大型网站的站点，更需要对站点有好的规划，好的站点规划可以使网站的结构目录更加清晰。完成站点的创建后，可以在站点中进行新建文件夹、新建页面等基本操作，以及在站点中复制文件和调整文件的位置等。通过Dreamweaver中的站点功能可以更好地管理整个网站中的所有文件。62 技术引进了解“站点设置对象”对话框7要创建本地静态站点，首先需要打开“站点设置对象”对话框，执行“站点新建站点”命令，即可弹出“站点设置对象”对话框，如图2-9所示。或者执行“站点管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮，同样可以弹出“站点设置对象”对话框。图2-9 Dreamweaver站点是网站中使用的所有文件和资源的集合。Dreamweaver站点通常包含两个部分，本地站点文件夹和远程文件夹。本地站点文件夹用来存储和处理本地文件。远程文件夹用来在Web服务器上保存与本地站点文件夹相同结构的文件。 如果用户想要使用Git管理站点文件，可以选中“将Git存储库与此站点关联”复选框。如果用户首次使用Git，而且希望将要创建的站点与Git关联，请选择“初始化为 Git存储库”。如果用户已经注册了Git用户名，并且希望将您要创建的站点与现有存储库关联，请选择“使用URL克隆现有Git存储库”。8提示：Git全称GitHub，是一个面向开源及私有软件项目的托管平台，用来存放软件代码与内容的共享虚拟主机服务。用户可以通过登录官网https:/ YOUR POINT图2-10901 执行“站点”“新建站点”命令。弹出“站点设置对象对话框。在”站点名称文本框中输入站点的名称，如图2-11所示。02 单击“本地站点文件夹”文本框后面的“浏览”按钮，弹出“根文件夹”对话框，浏览到本地站点的位置，如图2-12所示。03 单击“选择文件夹”按钮，确定本地站点根文件的位置，单击“保存”按钮，即可完成本地站点的创建，如图2-13所示。04 执行“窗口文件”命令，打开“文件”面板，在“文件”面板中显示出刚创建的本地站点，如图2-14所示。 练一练在“代码”视图中编写HTML页面源文件：源文件项目二2-1.html 图2-11图2-12 图2-13 图2-14 操作视频：视频项目二创建本地静态站点.MP4完成站点创建后，接下来就可以根据项目的不同创建不同的站点结构了。通常一个网站中包含很多内容，为了便于管理，通常会对文件进行分类保存。1003在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index .html文件，如图2-18所示。练一练在站点中创建文件结构01 执行“窗口”“文件”命令。打开“文件”面板，在站点名称位置单击右键，在弹出快捷菜单中选择”新建文件夹”命令，如图2-15所示。02 将文件夹命名images，用来保存站点中所有的图片文件，如图2-16所示。04 在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index .html文件，如图2-18所示。03 使用相同的方式，可以创建用来存储样式文件和视频文件的文件夹，完成效果如图2-17所示。05 双击index.html文件，即可进入页面编辑状态，如图2-19所示。用户可以在该页面中完成完整首页面的制作。 图2-15图2-16图2-17图2-18图2-19提示：提示：除了在“文件”面板中创建站点文件结构。用户可以直接在windows资源管理器中创建站点文件夹和文件。 113 任务实施站点文件的优化与管理1203在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index .html文件，如图2-18所示。01 执行“站点管理站点”命令，如图2-20所示。在弹出的“管理站点”对话框，如图2-21所示。03 单击“编辑当前选定的站点”按钮,即弹出“站点设置对象”对话框，用户可以在该对话框中修改站点信息，如图2-23所示。04 单击“复制当前选定的站点”按钮，即可复制选中的站点并得到该站点的副本，如图2-24所示。图2-20图2-21图2-22图2-23图2-24提示：这里删除的只是在Dreamweaver中创建的站点，而该站点中的文件并不会被删除。 站点创建完成后，用户可能会有修改站点信息的需求，也有可能需要更换操作设备。可以通过站点管理的功能完成对站点文件的优化与管理。02 用户可以在“您的站点”列表中看到在Dreamweaver中创建的所有站点。单击“删除当前选定的站点”按钮,弹出提示对话框，单击“是”按钮，即可删除当前选中的站点, 如图2-22所示。1303在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index .html文件，如图2-18所示。05 单击“导出当前选定的站点”按钮，用户可以在“导出站点”对话框中选择导出站点的位置，如图2-25所示。单击“保存”按钮即可将当前站点导出。06 单击“导入站点”按钮，用户可以在任何一台设备上导入站点，如图2-26所示。用户如果对于设置站点有疑问，可以单击“帮助”按钮，如图2-27所示。图2-25图2-26图2-27144 新手试炼创建小型电子商务网站站点154 在Dreamweaver中指定myweb文件为站点文件夹。通过前面案例的制作，读者应该掌握基本的页面布局方法和制作。接下来通过一个小案例巩固一下所学内容。01 在windows资源管理器中，新建一个名为myweb的文件夹。02 分别在myweb 文件夹中新建images和style文件夹。03 新建一个“文本文档”，修改文件名为index.html。04 在Dreamweaver中指定myweb文件为站点文件夹。16PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： 字体下载： SAMPLETHANKS17本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 18