电子商务网页制作教学课件ppt作者谢嵘02课件.pptVIP

主编：谢嵘 项目导学 我们已经浏览过了著名的电子商务网站，并且了解了电子商务网站的特点，接下来我们就来学习如何建立一个这样的网站。建立电子商务网站之前，需要先新建一个文件夹来作为整个网站的本地站点。这个文件夹中将要存放网站中所有网页上的文字、图片、动画等等。 体验活动一：创建一个电子商务站点 活动任务： 运用Dreamweaver CS4创建一个电子商务类网站的本地站点。 活动指导： 在开始制作网页之前，需要先定义一个新的站点，我们在计算机上建立一个新文件夹“我的网站”，路径为“F：\我的网站”，这是为了更好的利用站点对文件进行管理，尽可能减少出错。初学网页制作者一定要培养有条理的习惯，如果将不同类别的文件随意乱放，将给后期维护带来很大的困难。 体验活动一：创建一个电子商务站点 活动步骤： 启动Dreamweaver CS4软件。在工作界面的菜单栏里，单击“站点”菜单里的“新建站点”命令。 在弹出的对话框中，将站点的名字命名“我的站点1”。 体验活动一：创建一个电子商务站点 活动步骤： 单击“下一步”按钮，选择“否，我不想使用服务器技术”。 单击“下一步”按钮，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，在“文件存储位置？”中，设置为“F：\我的网站\”文件夹。 体验活动一：创建一个电子商务站点 活动步骤： 在“您如何连接到远程服务器？”的下拉菜单中选择“无”。 在弹出的“总结”对话框中，能看到站点包含的信息，确认无误后，单击“完成”按钮。 体验活动一：创建一个电子商务站点 活动步骤： 此时，在工作界面右侧的“文件”面板中，显示文件为“我的站点1”，本地文件放置在“我的网站”文件夹中，这样，我们的站点就建立好了。 活动小结 完成体验活动一后，填写下表 体验活动二：管理一个电子商务站点 CS4 活动任务： 建立、管理站点中的文件和文件夹。 活动指导： 站点中的文件夹可以新建、复制、删除和粘贴，在建站的过程中需要对站点中的文件进行管理和调整。 体验活动二：管理一个电子商务站点 CS4 活动步骤： 在“文件”面板“站点—我的站点1”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。 将新建立的文件夹命名为“images”，作为存放图片的文件夹。 体验活动二：管理一个电子商务站点 CS4 活动步骤： 单击“文件”菜单上的“新建”命令。 在“新建文档”对话框中选择“空白页”，“页面类型”选择“HTML”，“布局”选择“无”，这样来创建一个基本的空白网页。 体验活动二：管理一个电子商务站点 CS4 活动步骤： 在主工作区出现一个名为“untitled-1”的页面，页面标题为“无标题文档”。 单击“文件”菜单的“保存”命令，保存该文档。 体验活动二：管理一个电子商务站点 CS4 活动步骤： 在弹出的“另存为”对话框中，将文件命名为“index.html”，存放在本地站点根目录下；用同样的方式建立一个名为“newbook.html”的网页。 体验活动三：网页的建立、打开、保存与预览 活动任务： 再次新建一个页面，并学会利用“文件”面板打开它。保存页面并在浏览器中预览。 活动指导： 学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。 体验活动三：网页的建立、打开、保存与预览 活动步骤： 在“文件”面板“站点—我的站点1”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。 此时新建立的文件为一个HTML文件“untitled”，将这个新文件命名为“shupin.html”。 体验活动三：网页的建立、打开、保存与预览 活动步骤： 双击文件面板上的index文件，将它在主工作区中打开。 把光标移到主工作区内，输入“欢迎光临网上书城！”，页面更新后，在网页标题的右上方会出现一个“*”符号。 体验活动三：网页的建立、打开、保存与预览 活动步骤： 单击“文件”菜单上的“在浏览器中预览”命令，即可对网页的页面进行预览，也可以按下键盘上的“F12”键进行浏览页面。 活动小结 完成体验活动三后，填写下表 相关知识 一、电子商务网站建设基本流程规范 制定网站规划方案； 网站技术开发、网页设计； 网站测试； 网站内容发布； 网站维护及管理。 相关知识 二、合理规划站点的方法 用文件夹来保存文档； 在网站中，应该用文件夹来合理构建文档的结构。首先，应先为站点创建一个根文件夹，然后在其中创建多个子文件夹。使用时应将文档分类保存到相应的文件夹中，如果文件过多，可以创建多级子文件夹。 合理使用文件的名称 文件名应该设置得容易理解，以充分表述文件的含义和内容；由于很多服务器使用的是英文操作系统，尽量避免使用中