1、赏析电子商务商城类网站任务一项目项目一一电子商务网站页面赏电子商务网站页面赏析析制作第一个网页“第一个主页”上传“第一个主页”到网上在 中建立 服务器任务二任务四任务三电子商务网站页面赏电子商务网站页面赏析析学习目标了解国内著名的网上交易平台网站了解如何制作第一个网页掌握常见的网络术语，了解将网页上传到互联网的方法掌握在Win10中建立Web服务器的方法项目介绍随着互联网的普及，网络销售的便捷和低成本让越来越多的个人和企业开始涉 足电子 商务网站，大家都希望搭乘互联网的东风，为自己带来更多的收入。使用开源网店程序，你可以非常容易地建立一个电子商务网站。国外知名的开源网店程序有 Magento、
2、OS-Commerce 等，国内的开源网店程序有 Ecshop和 ShopEX等。在遵守相关授权协议的情况 下，你可以免费使用这些 程序搭建一个网店。一个设计精良的电子商务网站将会给你带来 更多的客户 和收入。所以，如果你想取得更好的效果，建议多花些精力在你的网站设计上 面任务分任务分析析知识链知识链接接本任务提供了三个国内知 名电子商务网站的主页，希望读者通过欣赏这些精 美的电子 商务网站，提 高学习电子商务网页制作 的兴趣。静态网页是文件扩展名为.html 或.htm的网页，在静态网页中 包 含 HTML 标 记、脚 本（JavaScript、VBScript），以及 一些图像、Flash
3、等网页元素。动态网页与静态网页相 对应，文件扩展名有asp、aspx、php 和jsp等。赏析电子商务商城类网赏析电子商务商城类网站站1赏析电子商务商城类网赏析电子商务商城类网站站1 网页与网站网页与网站网页是网站的基本元素，是承载各种网站应用 的平台。通俗来说，网站是由网页 组成的，如 果你只有域名和虚拟主机，而没有制作任何网 页的话，你的客户仍旧无法 访问你的网站。网 页是一个文件，它存放在世界某个角落的某一 部计算机中，而这部 计算机必须是与互联网相 连的。网页经由网址来识别与存取，是万维网 中的一“页”，采用超文本标记语言格式（标 准通用标记语言的一个应用，其文件扩展名为.html或.
4、htm）。网页要通过网页浏览器来阅 读。网站则是由内容相关的、通过某种方式联 系 在一起的若干网页组成的。网页是网站中的 一页，是构成网站的基本元素。2服务器与浏览器服务器与浏览器服务器是一个管理资源并为用户提供服 务的计算机软件，通常分为文件服务器、数据 库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被 称为服务器。我们 将制作好的网页上 传到服务器，就可以通过网络来访问这 个网站了。浏览器是用来浏览 网页的 工具软件，常用的浏览器有 Microsoft Edge、IE、Google Chrome、火狐、浏览 器等。网站的工作原理网站的工作原理当我们在客户端发出请求的时候，假如
5、 我们请求的是一个静态的网页，那么这 个网页 请求到了 服务器以后，服务器就会在本身安装的机器的硬 盘上寻找相关的网页，然后返回。假如 我们请求的是一个包含动态语言代码的 网页，那么服务器接收到请求以后，就 会 接着传送给同时安装在这个机器上的 应用程序服务器，由它负责解释和执行 网页，最后将 执行的结果传递给客户端 浏览器。010203相关赏析电子商务商城类网赏析电子商务商城类网站站1任务 知名电子商务平台当当网主页（见图-）2在淘宝网站上的电子商务主页（见图-）图-当当网主页图-TCL在淘宝网站上的电子商务主页赏析电子商务商城类网赏析电子商务商城类网站站1任务 知名电子商务平台京东商城主页
6、（见图-）图-京东商城主页制作第一个网页制作第一个网页“第一个主页第一个主页”2任务使用记事本制作一个简单的网页，网页标题栏显示“第一个主页”，网页区域字体设 置 为蓝色、宋体、号的文本“这是我第一个主页”，制作后效果如图-所示。图-“第一个主页”制作后效果HTML（Hyper Text Markup Language）即超文本标记语言。超文本是指页面内可以包 含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括头部（Head）和 主体部 分（Body），其中头部提供关于网页的信息，主体部分提供网页的具体内容。制作第一个网页制作第一个网页“第一个主页第一个主页”21.网页制作的语
7、言随着互联网科技的发展，越来越多的网页设计工具软件面世，它们功能强大、操作简单，深受 广大网页设计者的喜爱，其中最著名的便是由Adobe公司开发出来的以下种工具软件。（）网页编辑工具Dreamweaver。Dreamweaver是一个可视化的网页设计和网站管理工具，支持最新的 Web技术，包 含 HTML 检查、HTML格式控制、HTML格式化选项、Home Site/BBEdit捆绑、可视 化网页设计、图像编 辑、全局查找替换、FTP功能、处理Flash和Shockwave等富媒体格 式和动态 HTML、基于团队 的 Web创作。（）网页动画制作工具Animate。Animate是一款电脑动
8、画设计软件，这种动画有互动功能，利用该软件可以将音乐、动画、图 像巧妙地融合在一起，制作出高品质的动画，把这些动画放在网页上，能达到吸 引用户眼球的 目的。（）图形图像处理工具Photoshop。利用这款图形图像处理工具软件可以设计出合适的图像文件来美化网页，从而更好地 体现网页 所要表达的内容。2.网页设计工具相关制作第一个网页制作第一个网页“第一个主页第一个主页”2任务图-在记事本中输入的网页代码（）打开记事本程序，方法：单击“开始”“Windows 附件”“记事本”。（）在打开的记事本中，输入如图-所示的网页代码。提示提示：charset是“编码”的意思。charset有很多类型，gb2
9、312和 UTF-8就 是其中 两种常见的编码。gb2312是中文 的字符集，对中文支持比较好，但是如果 网页使用英文 或者其他的外文，比如日 文、韩文，gb2312就不能支持了。UTF-8是全球通用的一种编码，它支持包含中 文、日文、韩文等在内的所有的文字。如 果使用了 UTF-8，在网页显示中文的时候 出现乱码，那就试试gb2312制作第一个网页制作第一个网页“第一个主页第一个主页”2任务（）将文件保存成文件名为index.html的文件，保存方法：单击“文件”“另存为”，弹出另存为对话框，在“保存在”选项中选择保存的路径，并在“文件名”处输入“index.html”，“保存类型”选择“所
10、有文件”，如图-所示。图-6 保存文件上上传传“第一个主页第一个主页”到网到网上上3Analysis在 网申请一个免 费的空间和域名，将“第一个 主页”网页上传到服务器，并 通 过这个网站提供的免费域名 访问“第一个主页”。任务1.域名域名要想将制作完成的网页上传到网上供 人访问，需要先申请一个域名。域名（DomainName）是由一串用点分隔 的名字组成的互联网上某一台计算机 或计算机组的名称，用于 在数据传输 时标识计算机的电子方位（有时也指 地理位置，地理上的域名指代有行政 自主 权的一个地方区域）。域名是 一个IP地址的“面具”。使用域名 的目的是便于记忆和沟通一 组服务器 的地址（网
11、站、电子邮件、FTP等）。如就是百度的 域名。32.IP地址地址IP是英文Internet Protocol的缩写，意思是“网络之 间互连的协议”，也就是为计算 机网络相互连接进 行通信而设计的协议。在互联网中，它是能使连接到 网上的所有计算机 实现相互通信的一套规则，规定 了计算机在互联网上进行通信时应当遵守的规则。任 何厂 家生产的计算机系统，只要遵守IP协议，就可 以与互联网互联互通。正是因为有了IP协 议，互联 网才得以迅速发展成为世界上最大的、开放的计算机 通信网络。因此，IP协议 也可以称作“互联网协议”。IP地址是一个32位的二进制数，通常被分割为 4个8位二进制数（也就是4个字
12、 节）。IP地址通常用“点分十进制”表示成（a.b.c.d）的形式，其 中，a、b、c、d都是 0255的十进制整数。例如：点分十进制IP地址（100.4.5.6），实际上是32位 二进制数（01100100.00000100.00000101.00000110）上上传传“第一个主页第一个主页”到网到网上上01023.FTPFTP（File Transfer Protocol）即文件传输协议。文件传输协议使得主机间可以共享 文件。FTP使 用TCP生成一个虚拟连接用于控制信息，然后再 生成一个单独的 TCP连 接用于数据传输。控制 连接使用类似 TELNET协议在主机间交换命令和 消息。文件传
13、输协议是TCP IP网络上两台计算 机传送文件的协议，FTP是在TCP IP网络和互 联网上最 早使用的协议之一，它属于网络协议组 的应用层。FTP客户机可以给服务器发出命令来 下 载文件、上传文件、创建或改变服务器上的目 录。常用的软件有CuteFTP、LeapFTP和8uFTP等软件，根据获取到的账号 和密码，利用这些软件的上传功能，把制作好的网站上传 到网络上。03相关任务（）打开网页浏览器，输入网址：http:/，点击“Enter”键，即可进 入。免费空间首页如图-所示。（）点击右上角的“免费注册”，进入如图-所示的信息注册页面，按照提示填写 注册信息，完成注册步骤。图-免费空间首页上
14、上传传“第一个主页第一个主页”到网到网上上3图-信息注册页面（）根据网站的要求激活FTP功能。（）打开CuteFTP软件，单击 按钮，填入用户名、密码和FTP服务器地址等相关信 息，再单 击按钮，左侧服务器区会出现服务器端目录。CuteFIP的界面如图1-10所示。图-注册完成后显示的页面上上传传“第一个主页第一个主页”到网到网上上（）注册完成后，会弹出如图-所示的页面。3图1-10 CuteFTP的界面任务实施（）在左侧按照本地计算机文件的存储路径找到index.html，然后将该文件拖拽到右 侧服务器区，即可把 本地的网页文件index.html上传到网上的服务器中。（）在浏览器地址栏输入
15、本服务器的地址，就可以访问“第一个主页”页面了，效果 如图1-11所示。图1-11 效果图上上传传“第一个主页第一个主页”到网到网上上3任务在在 中建中建立立 服务服务器器4Analysis在 Win10中建立 服务器，并将前面我们建 立的i ndex.ht t m l加入本机 的主页中。任务（World Wide Web）即全球广域网，也称万维网，它是一种基于超文本和 HTTP的、全 球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上 的一种网络服务，为 浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直 观界面，其中的文档及超级 链接将Intern
16、et上的信息节点组织成一个互为关联的网状 结构。1.WWWIIS是Internet Information Services 的缩写，意为“互联网信息服务”，是由微软公司 提供的基 于Microsoft Windows 的互联网基本服务。IIS是一种 Web（网页）服务组件，其中Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏 览、文件传输、新闻服务和邮件 发送等方面，它使得在网络（包括互联网和局域网）上发 布信息成了一件很容易的事。2.IIS相关主页（Home Page）也被称为首页，是用户打开浏览器时默认打开的网页，主要包 含个人主页、网站网页、组织或活动主页、公
17、司主页等。主页一般是用户通过搜索引擎 访问一个网站时所 看到的首个页面，用于吸引访问者的注意，通常也起到登录页的作 用。在一般情况下，主页是 用户访问网站其他模块的媒介，主页会提供网站的重要页面 及新文章的链接，其文件名大多数 为index、default、main或portal加上扩展名。3.主页在在 中建中建立立 服务服务器器4任务图-12 控制面板图-13 程序和功能在在 中建中建立立 服务服务器器（）单击桌面的控制面板 或是开始菜单中的控制面板。（）进入控制面板之后单击“程序”（见图-），打开程序窗口。（）接下来，在程序窗口里单击“启用或关闭 Windows功能”，如图-所示。4（）在
18、 Windows功能窗口中选择“Internet Information Services”下的所有内容，并 单击“确定”按钮，如图-所示。（5）到这里IIS环境已经搭建好了，在浏览器的地址栏里输入localhost就可以看到iis的主页了，如图1-15所示。图1-14 Windows功能窗口任务图1-15 IIS页面在在 中建中建立立 服务服务器器4（6）将上一个任务的主页文件（index.html）复制到IIS目录C:inetpubwwwroot中，并删除目 录下iisstart.htm文件，最后在在浏览器地址栏里输入localhost就可以看到我们的第一个主页了，如图1-16所示。图1-16 效果图任务在在 中建中建立立 服务服务器器4本项目展示了几个知名电子商务网站 的页面,并 使 用 记 事 本 制 作 了 一 个 简 单 的 网 页,在3v.cm网上申请虚拟主机和 域名后,将网页上传到虚拟主机上,通 过域名访问到该网页。一般的网站在 制作过程中也遵循这个流程。经验交流:同学们将学习过程的疑难问 题记录下来,和大家交流一下吧。项目项目项目一一电子商务网站页面赏电子商务网站页面赏析析
