电子商务网站建设与网页设计课件 项目一 构建电子商务网站

项目一构建电子商务

网站电子商务网站建设与网页设计

1电子商务网站设计基础知识2电子商务网站结构设计3电子商务网站色彩搭配目录CONTENTS4课堂练习——

使用HTML5制作简单页面5课堂练习——

使用Dreamweaver创建站点当今，网上购物已经成为人们生活中一种重要的消费渠道，电子商务网站中海量的商品信息和便捷的购物方式吸引着越来越多的消费者。那么，面对众多的电子商务网站，设计者是如何通过页面设计和布局吸引消费者注意力的？本任务将介绍电子商务网站设计基础知识。任务一电子商务网站设计基础知识一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。京东首页一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。网站Logo一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。导航栏位于页面左侧一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。横幅广告二、电子商务网站设计准则1明确网站建设目的和用户需求2总体设计主题鲜明3设计人性化的交互界面4网页形式与内容相统一5准确无误的链接6网站信息的时效性7合理利用多媒体功能8努力提高网站的性能对于电子商务网站而言，网站流量在很大程度上取决于网站的结构设计。合理的网站结构设计有利于企业商务诉求的表达。不同类型的电子商务网站，其结构设计在内容呈现、版面处理等方面会有所不同。本任务将学习如何设计电子商务网站结构。任务二电子商务网站结构设计一、网站的物理结构网站的物理结构指的是网站目录及包含的文件所存储的真实位置表现出来的结构。物理结构一般包含两种不同的表现形式：扁平式结构和树形结构。扁平式结构网站将所有网页都存放在网站根目录下，这种结构就是扁平式结构。扁平式结构一般适用于只有少量页面的微型、小型网站。扁平式结构树形结构树形结构就是在网站根目录下还分别有几个分类文件夹，页面放在这几个分类文件夹中，分类文件夹中也可以有子分类文件夹。这种结构适合内容类别多、内容量大的网站。树形结构二、网站的逻辑结构网站的逻辑结构（也称链接结构）主要是指由网页内部链接所形成的逻辑结构。在网站的逻辑结构中，通常采用“链接深度”描述页面之间的逻辑关系。链接深度是指从源页面到达目标页面所经过的路径数量。与网站的物理结构类似，网站的逻辑结构同样可以分为扁平式逻辑结构和树形逻辑结构两种。扁平式逻辑结构扁平式逻辑结构的网站实际上就是网站中任意两个页面之间都可以相互链接，也就是说，网站中任意一个页面都包含其他所有页面的链接，页面之间的链接深度都是1。一般情况下，很少有网站单纯采用扁平式逻辑结构作为整站结构。树形逻辑结构树形逻辑结构是指使用分类、频道等页面，对同类属性的页面进行链接地址组织的网站结构。在树形逻辑结构网站中，链接深度大多大于1。三、网站的构成网站首页网站首页是一个网站的入口网页，作用是引导用户浏览网站其他部分的内容。首页中可以有网站的简介、业务的分类等，也可以根据网站的类型进行更深层次的划分。通常情况下，网站会将最想展示的内容放置在首页中。要根据网站的不同类型，设置好网站的主题。网站内页相较于首页的结构设置，内页的结构设置没有首页那么重要，但也有着重要的作用。无论哪种类型的网站，其中的内容都起着重要的作用。根据用户需求的不同，内页会有风格各异的设置，但都要遵循一点，那就是内容制胜。内页具体的结构设置需要根据实际情况具体分析，但必须明确内容的关键性。网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成的。一般来说，网站至少有两种页面，即首页和内页。四、网页的空间结构网页顶部一般在左上角位置放置网站Logo，网页的顶部留有一行字的位置，以添加网站的关键字；在Logo中添加ALT标签（网站上图片的文字提示），可以提高网站的关键字密度，而且对网站的排名也很有好处；登录条、页面横幅广告、导航栏等都可以放在顶部。当当网站首页的顶部设计四、网页的空间结构网页主体企业信息、产品介绍、业务流程等一系列想呈现给用户的内容都在这个区域。一般可以把网页主体分为2～3个竖列，包括侧边栏、栏目等；在构建网站时，可以选择一个新闻板块放置在网站中间的左上角；图片信息也要添加ALT标签。华为商城网站首页的主体设计四、网页的空间结构网页底部网页底部大多用于放置友情链接、网站版权信息、使用协议等，也可以放置一些导航链接。在网站版权信息中可以添加一些关键字并且加粗、加链接。淘宝网站首页的底部设计五、网页的布局结构“国”字形结构布局是电子商务网站中最常见的一种布局类型，即最上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底。“国”字形结构布局“国”字形结构布局“厂”字形结构布局与“国”字形结构布局只有形式上的区别，它去掉了“国”字形结构布局中最右侧部分，为主要内容区释放出更多空间。这种布局最上面是网站的标题及横幅广告，接下来左侧是较窄的一列信息或链接等，右侧是很宽的内容区。“厂”字形结构布局“回”字形结构布局是“国”字形结构布局的一种变形，即在“国”字形结构布局的下方增加了一个横向通栏。“回”字形结构布局五、网页的布局结构“厂”字形结构布局“国”字形结构布局是电子商务网站中最常见的一种布局类型，即最上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底。“国”字形结构布局“厂”字形结构布局与“国”字形结构布局只有形式上的区别，它去掉了“国”字形结构布局中最右侧部分，为主要内容区释放出更多空间。这种布局最上面是网站的标题及横幅广告，接下来左侧是较窄的一列信息或链接等，右侧是很宽的内容区。“厂”字形结构布局“回”字形结构布局是“国”字形结构布局的一种变形，即在“国”字形结构布局的下方增加了一个横向通栏。“回”字形结构布局五、网页的布局结构自由式结构布局的随意性特别大，它改变了传统的以图文为主的表现形式，将图片、动画或视频作为主体内容，导航栏、文字说明等放在不太显眼的位置。通常情况下，化妆品类、时装类、科技类等网站会采用这种结构布局。自由式结构布局常见的框架型结构布局主要分为左右框架型结构布局、上下框架型结构布局和综合框架型结构布局。这种布局目前很少被专业设计人员使用，不过在一些大型论坛上比较受青睐，有些企业网站也有应用。框架型结构布局上下框架型结构布局五、网页的布局结构常见的框架型结构布局主要分为左右框架型结构布局、上下框架型结构布局和综合框架型结构布局。这种布局目前很少被专业设计人员使用，不过在一些大型论坛上比较受青睐，有些企业网站也有应用。框架型结构布局自由式结构布局的随意性特别大，它改变了传统的以图文为主的表现形式，将图片、动画或视频作为主体内容，导航栏、文字说明等放在不太显眼的位置。通常情况下，化妆品类、时装类、科技类等网站会采用这种结构布局。自由式结构布局自由式结构布局浏览网站时，我们通常会先被网页中的色彩所吸引，然后才会根据页面布局对页面的主次进行下一步了解。在电子商务网站设计中，色彩的搭配是网页设计过程中必须把握好的重要元素。本任务将学习电子商务网站的色彩搭配技巧。任务三电子商务网站色彩搭配一、色彩基础知识人的眼睛所能感觉的色彩一般可以分为两大类：第一类为无彩色，指白、黑和灰调和形成的各种深浅不同的灰色。第二类为彩色，指不同明度和纯度的红、橙、黄、绿、青、蓝、紫等颜色。色彩的分类色彩有3个属性，即色相、饱和度、明度，而色彩的个性取决于这3个方面。色相：指能够比较确切地表示某种颜色色别的名称，也是各种颜色之间的区别。饱和度：指色彩的鲜艳程度，也称色彩的纯度。明度：指色彩的明亮度，明度的高低要根据其接近白色或灰色的程度而定。色彩的属性色相环一、色彩基础知识人的眼睛所能感觉的色彩一般可以分为两大类：第一类为无彩色，指白、黑和灰调和形成的各种深浅不同的灰色。第二类为彩色，指不同明度和纯度的红、橙、黄、绿、青、蓝、紫等颜色。色彩的分类色彩有3个属性，即色相、饱和度、明度，而色彩的个性取决于这3个方面。色相：指能够比较确切地表示某种颜色色别的名称，也是各种颜色之间的区别。饱和度：指色彩的鲜艳程度，也称色彩的纯度。明度：指色彩的明亮度，明度的高低要根据其接近白色或灰色的程度而定。色彩的属性明度推移二、确定网站的主色调暖色调暖色调是由太阳颜色衍生出来的颜色，包括红紫、红、红橙、橙和黄橙等，象征太阳和火焰，给人以热情、温暖的感觉。冷色调蓝色、绿色、紫色都属于冷色调，给人以宁静、清凉、庄重等感觉。蓝色是冷色调中典型的代表，是网站设计中用得最多的颜色之一。使用暖色调配色的网页使用冷色调配色的网页三、网页的色彩搭配技巧同种色配色：指首先选定一种色彩，然后在保证色相大致不变的前提下，通过改变色彩的明度和饱和度完成配色。对比色配色：对比色是指在色相环上相距120°～180°的两种颜色，距离越远，对比越强。邻近色配色：邻近色是指在色相环上相距60°～90°的两种颜色。彩色配色黑、白、灰是万能色，黑底白字对比强烈，简洁明了，可以跟任意一种色彩搭配，传达出一种经典、永恒的美感。无彩色配色使用同种色配色的网页使用对比色配色的网页三、网页的色彩搭配技巧同种色配色：指首先选定一种色彩，然后在保证色相大致不变的前提下，通过改变色彩的明度和饱和度完成配色。对比色配色：对比色是指在色相环上相距120°～180°的两种颜色，距离越远，对比越强。邻近色配色：邻近色是指在色相环上相距60°～90°的两种颜色。彩色配色黑、白、灰是万能色，黑底白字对比强烈，简洁明了，可以跟任意一种色彩搭配，传达出一种经典、永恒的美感。无彩色配色使用邻近色配色的网页使用无彩色配色的网页HTML是一种简单的、由不同元素组成的标记语言，是一种应用非常广泛的网页格式，也是被用来显示Web页面的语言之一。HTML通过标记（Tag）式的指令，将文本、图形、动画、声音、表格、超链接等显示出来。本任务将详细介绍HTML5的基本结构和常用标签。任务四课堂练习——使用HTML5制作简单页面一、初识HTML5HTML主要负责将网页内容进行格式化，使内容更具逻辑性，它通过标记符标记要显示网页中的各个部分。浏览器在阅读网页文件时，根据不同标记符解释和显示其标记的内容。HTML是标记语言，不是编程语言，只有标签和属性，是非常容易理解的语言。使用HTML不需要复杂的语法，基本上只有标签的名字需要记下来。HTML5是HTML第5次重大修改的结果，由万维网联盟（WorldWideWebConsortium，W3C）完成标准制定。与传统的技术相比，HTML5具有良好的兼容性和跨平台性能，语法特征更加明显，并且引入了新的HTML元素，我们在网页中使用这些元素可以更加便捷地处理多媒体内容。二、HTML5基本结构三、HTML5常用标签文本标签主要用于对网页中的文本元素进行修饰、排版，如设置文本的大小、文本的字体等，从而使网页内容更加丰富。文本标签是写在<body>和</body>标签内部的，其语法格式如下：<body><h2>这里将显示为标题2</h2><i>这里将显示为斜体文本</i></body>文本标签标签功能<h1>和</h1>～<h6>和</h6>定义HTML标题，其中<h1>代表1级标题，级别越高，字号越大<p>和</p>定义一个段落，是HTML基本标签之一<br>和</br>定义一个简单的换行符<b>和</b>定义粗体文本<i>和</i>定义斜体文本<strong>和</strong>定义需要加粗的文字，用于强调<del>和</del>定义文档中已删除的文本<ins>和</ins>定义已经被插入文档中的文本常用的文本标签三、HTML5常用标签<img>图像标签定义HTML页面中的图像。<img>是单标签，没有结束标签。图像可以美化网页，Web中常用的有JPG、GIF和PNG这3种图像格式。使用<img>标签在网页中加入图像的语法格式如下：<img

src="image/sucai.jpg"width="500"height="300"alt=""/>图像标签属性功能alt规定图像的替代文本crossorigin设置图像的跨域height定义图像的高度src规定显示图像的URLwidth定义图像的宽度<img>标签的常用属性三、HTML5常用标签表单标签主要用于收集用户的相关信息，如注册、登录、留言、评论等操作中填写的数据，然后将数据提交给服务器。一个表单由表单标签、表单域和表单按钮3个部分组成。<form>标签定义一个表单域，它是一个容器标签，其他表单标签需要放在<form></form>之间，其语法格式如下：<formaction=""method="get"><inputname=""type="text"size="15"/><inputname=""type="submit"value="提交"/></form>表单标签属性功能accept-charset规定服务器可处理的表单数据字符集autocomplete规定是否启用表单的自动完成功能action规定当提交表单时向何处发送表单数据name规定表单的名称method规定用于发送表单数据的HTTP（HypertextTransferProtocol，超文本传输协议）方法enctype规定在发送表单数据之前如何对其进行编码target规定在何处打开actionURL<form>标签的常用属性三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签标签功能<ul>和</ul>定义一个无序列表<ol>和</ol>定义一个有序列表<li>和</li>定义一个列表项<dl>和</dl>定义一个定义列表<dt>和</dt>定义一个定义列表中的项目<dd>和</dd>定义一个定义列表中项目的描述<menu>和</menu>定义菜单列表<command>和</command>定义用户可能调用的命令（如单选按钮、复选框或按钮）常用的列表标签三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的无序列表语法格式和页面效果三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的有序列表语法格式和页面效果三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的自定义列表语法格式和页面效果三、HTML5常用标签<table>标签定义HTML表格。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。更复杂的HTML表格可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>及<tbody>等标签。表格标签标签功能<table>和</table>定义一个表格<caption>和</caption>定义表格标题<th>和</th>定义表格中的表头<tr>和</tr>定义表格中的行<td>和</td>定义表格中的单元格<thead>和</thead>定义表格中的表头内容<tbody>和</tbody>定义表格中的主体内容常用的表格标签三、HTML5常用标签<table>标签定义HTML表格。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。更复杂的HTML表格可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>及<tbody>等标签。表格标签建立的表格语法格式和页面效果三、HTML5常用标签<a>标签定义超链接，是网页中最为常用的标签之一，用于从一个页面链接到另一个页面。<a>标签最重要的属性是href

属性，它指定链接的目标。超链接一般设置在文本或图像上，单击设置了超链接的文本或图像，可以跳转到其链接的页面，其语法格式如下：<ahref="">欢迎访问本商城!</a>链接标签属性功能href规定链接的目标URLdownload指定下载链接rel规定当前文档与目标URL之间的关系。仅在href属性存在时使用type规定目标URL的MIME（MultipurposeInternetMailExtensions，多用途互联网邮件扩展）类型。仅在href属性存在时使用<a>标签的常用属性四、制作滚动图片链接网页在记事本中输入HTML代码，可以制作出多种多样的页面效果。下面将使用前面介绍的HTML5基本结构、文本标签和图像标签等相关知识，制作一个滚动图片链接的网页，具体操作方法如下。在设计网页之前，要创建站点。站点其实就是一个文件夹，其中包含网站中所有用到的文件。创建站点的目的是利用站点窗口对站点文件进行管理，尽可能地减少错误的出现。例如，用到的图片会存入网页所在的站点中，并且在网页中自动使用相对路径，以避免路径出错或者链接出错。Dreamweaver是一款简便易用的创建与管理站点的工具，不仅可以制作精美的网页，还可以创建完整的Web站点。本任务将学习如何使用Dreamweaver创建站点。任务五课堂练习——使用Dreamweaver创建站点一、初识DreamweaverDreamweaver是集网页制作和网站管理于一体的网页编辑器，可对网站的相关页面及各类素材进行统一管理，还可使用站点管理功能将文件上传到网页服务器，测试网站。它支持通过代码、拆分、设计、实时视图等多种方式，创作、编写和修改网页。DreamweaverCC2018工作界面二、创建站点的准备无论是企业还是个人，在创建站点前都要明确建设网站的目的，并确定网站需要的功能、规模，以及准备为此而投入的费用，并进行必要的市场分析，然后拟定出初步的网站策划书。需要明确的问题包括：建立什么主题或类型的网站？网站面向的对象或客户是谁？打算如何获取盈利，主要靠实体货物还是虚拟产品或广告？