电子商务网页制作0课件2.ppt

1、主编：谢嵘我们已经浏览过了著名的电子商务网站，并且了解了电子商务网站的特点，接下来我们就来学习如何建立一个这样的网站。建立电子商务网站之前，需要先新建一个文件夹来作为整个网站的本地站点。这个文件夹中将要存放网站中所有网页上的文字、图片、动画等等。项目项目2 2 建立电子商务网站建立电子商务网站 项目导学项目导学 体验活动一：体验活动一：创建一个电子商务站点创建一个电子商务站点活动任务：运用Dreamweaver CS4创建一个电子商务类网站的本地站点。活动指导：在开始制作网页之前，需要先定义一个新的站点，我们在计算机上建立一个新文件夹“我的网站”，路径为“F：我的网站我的网站”，这是为了更好的

2、利用站点对文件进行管理，尽可能减少出错。初学网页制作者一定要培养有条理的习惯，如果将不同类别的文件随意乱放，将给后期维护带来很大的困难。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动一：体验活动一：创建一个电子商务站点创建一个电子商务站点活动步骤：1.启动Dreamweaver CS4软件。在工作界面的菜单栏里，单击“站点”菜单里的“新建站点”命令。2.在弹出的对话框中，将站点的名字命名“我的站点1”。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动一：体验活动一：创建一个电子商务站点创建一个电子商务站点活动步骤：3.单击“下一步”按钮，选择“否，我不想使用服务器技术”。

3、4.单击“下一步”按钮，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，在“文件存储位置？”中，设置为“F：我的网站”文件夹。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动一：体验活动一：创建一个电子商务站点创建一个电子商务站点活动步骤：5.在“您如何连接到远程服务器？”的下拉菜单中选择“无”。6.在弹出的“总结”对话框中，能看到站点包含的信息，确认无误后，单击“完成”按钮。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动一：体验活动一：创建一个电子商务站点创建一个电子商务站点活动步骤：7.此时，在工作界面右侧的“文件”面板中，显示文件为“我的站点1”，本

4、地文件放置在“我的网站”文件夹中，这样，我们的站点就建立好了。项目项目2 2 建立电子商务网站建立电子商务网站 活动小结活动小结完成体验活动一后，填写下表 项目项目2 2 建立电子商务网站建立电子商务网站 新建文件夹新建_管理_站点完成体验活动二：体验活动二：管理一个电子商务站点管理一个电子商务站点 CS4活动任务：建立、管理站点中的文件和文件夹。活动指导：站点中的文件夹可以新建、复制、删除和粘贴，在建站的过程中需要对站点中的文件进行管理和调整。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动二：体验活动二：管理一个电子商务站点管理一个电子商务站点 CS4活动步骤：1.在“文件”面板

5、“站点我的站点1”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。2.将新建立的文件夹命名为“images”，作为存放图片的文件夹。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动二：体验活动二：管理一个电子商务站点管理一个电子商务站点 CS4活动步骤：3.单击“文件”菜单上的“新建”命令。4.在“新建文档”对话框中选择“空白页”，“页面类型”选择“HTML”，“布局”选择“无”，这样来创建一个基本的空白网页。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动二：体验活动二：管理一个电子商务站点管理一个电子商务站点 CS4活动步骤：5.在主工作区出现一个名为“unt

6、itled-1”的页面，页面标题为“无标题文档”。6.单击“文件”菜单的“保存”命令，保存该文档。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动二：体验活动二：管理一个电子商务站点管理一个电子商务站点 CS4活动步骤：7.在弹出的“另存为”对话框中，将文件命名为“index.html”，存放在本地站点根目录下；用同样的方式建立一个名为“newbook.html”的网页。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动三：体验活动三：网页的建立、打开、保存与预览网页的建立、打开、保存与预览活动任务：再次新建一个页面，并学会利用“文件”面板打开它。保存页面并在浏览器中预览。活

7、动指导：学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动三：体验活动三：网页的建立、打开、保存与预览网页的建立、打开、保存与预览活动步骤：1.在“文件”面板“站点我的站点1”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。2.此时新建立的文件为一个HTML文件“untitled”，将这个新文件命名为“shupin.html”。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动三：体验活动三：网页的建立、打开、保存与预览网页的建立、打开、保存

8、与预览活动步骤：3.双击文件面板上的index文件，将它在主工作区中打开。4.把光标移到主工作区内，输入“欢迎光临网上书城！”，页面更新后，在网页标题的右上方会出现一个“*”符号。项目项目2 2 建立电子商务网站建立电子商务网站 体验活动三：体验活动三：网页的建立、打开、保存与预览网页的建立、打开、保存与预览活动步骤：5.单击“文件”菜单上的“在浏览器中预览”命令，即可对网页的页面进行预览，也可以按下键盘上的“F12”键进行浏览页面。项目项目2 2 建立电子商务网站建立电子商务网站 活动小结活动小结完成体验活动三后，填写下表 项目项目2 2 建立电子商务网站建立电子商务网站 新建网页的方法：新

9、建网页的方法：1 1“文件文件”“新建新建”命令命令2 23.3.打开网页的方法：打开网页的方法：1 1“文件文件”“打开打开”命令命令2 23 3相关知识相关知识1.制定网站规划方案；2.网站技术开发、网页设计；3.网站测试；4.网站内容发布；5.网站维护及管理。项目项目2 2 建立电子商务网站建立电子商务网站 相关知识相关知识1.用文件夹来保存文档；在网站中，应该用文件夹来合理构建文档的结构。首先，应先为站点创建一个根文件夹，然后在其中创建多个子文件夹。使用时应将文档分类保存到相应的文件夹中，如果文件过多，可以创建多级子文件夹。2.合理使用文件的名称 文件名应该设置得容易理解，以充分表述文件的含义和内容；由于很多服务器使用的是英文操作系统，尽量避免使用中文名称对网页命名。项目项目2 2 建立电子商务网站建立电子商务网站 相关知识相关知识表示文件存放在计算机中的具体位置的方式就是路径，而网页设计中就需要使用相对路径。所谓相对路径，就是自己相对于目标的位置。如在index.html网页文件中链接的rose.jpg可以使用“Image/rose”来定位文件，那么，不论将这些文件存放到哪里，只要它们的相对关系没有变，就不会出错。另外使用“./”来表示上一级目录，“././”表示上上级的目录，以此类推。项目项目2 2 建立电子商务网站建立电子商务网站