电子商务网站建设方法：
网站建设涉及：B2B、C2B、O2O、C2C等多种模式。不同模式的网站，其核心要素亦有所不同。
在建设网站时：
1、调研：剖析网站的类型、定位、目标、优势等；
2、素材：网站建设过程中，由多个素材组合而成，例如：图片、背景等；
3、布局：布局合理，可采取三栏两式、两栏三式或其他布局方式；
4、结构划分：不同结构，制作步骤各异。包括首页、详情页、公告栏等；
全面掌握网站，运用Photoshop、Dreamweaver、Flash等工具进行设计，以C++、Java、HTML等多种编程语言进行开发；
5、网站设计完成后，进行整体测试，调试并修正。
Axure教程 | 初级电子商务网站设计入门
从零开始，学习构建一个电子商务网站
本教程将逐步指导您搭建一个电子商务网站，在创建过程中，将运用Axure原型的多个核心功能：如母板、动态面板。我们将从头至尾进行创建。
组件应用：图片、矩形、按钮形状、图片热区、动态面板、占位符、文本框、文本面板
交互事件：Onclick
动作：“移动面板”、“隐藏面板”、“设置面板状态为指定状态”、“将面板置于顶层”、“将面板置于底层”、“等待时间（毫秒）”
01
构建页首母板
1
创建新母板
第一步，创建一个包含LOGO和导航的页首。由于页首将在多个页面中使用，因此将使用母板进行制作。
在母板窗口，点击“添加母板”按钮。点击新建的母板名称并修改名称为“Header”。
双击Header母板打开编辑窗口，在线框图窗口的顶部标签页，可以查看正在编辑的页面和母板。
如果标签页显示，正在编辑的页面为“Header”，则Header母板已被打开。
2
添加Logo图片
第二步，从组件窗口拖动图片组件到线框图中，双击图片组件导入压缩包中的“Logo.png”图片。
导入提示是否自动调整对象大小，如需自动调整则选择“确定”。图片将保持原大小导入，而不按组件的大小导入。
3
添加导航按钮
接下来，在Logo下方，添加3个按钮形状组件。
向下拖动组件窗口下拉条，找到按钮形状组件（不是按钮组件）。拖动3个按钮形状组件到线框图。双击每个按钮组件修改组件文本，并修改组件标签内容分别为：Men’s、Women’s、和Sale。
全选3个按钮形状，使用工具栏中的“线条颜色”设置按钮边线为白色（点击并在按钮上拖出一个选择区，即可全选3个按钮）。
4
添加水平线
添加一个水平线，将页首和下面的内容分开。
拖动“水平线”组件到线框图中，拖拽水平线左右两端的修改尺寸的控制柄，可以调整水平线的长度。使用工具栏中的“线条样式”、“线条颜色”编辑样式为点虚线、颜色为蓝色。
5
在Home页面添加页首
从母板窗口拖动页首母板到Home页面。定位在X:200;Y50
母板默认有粉色的遮罩，如需关闭遮罩，可以在主菜单栏选择“线框图->显示母板遮罩”。
02
创建产品缩略图和“快速查看”按钮
1
添加产品缩略图
Home页面，拖入图片组件并放置在页首母板的下方。
双击组件导入“Jeans1-1.png”文件，添加第二个图片组件，导入“Jeans2-1.png”文件。
按住shift键并拖拽图片一角，调整图片比例为宽150；高225。
2
添加“快速查看”按钮
拖动一个按钮形状组件到第一张产品图片上，双击按钮形状组件修改文本为“快速查看”。
“快速查看”按钮只有在鼠标经过图片时才会显示。因此，需要将图片转换为动态面板才能动态显示或隐藏按钮。右键按钮形状，快捷菜单选择“转换->按换为动态面板”，将图片放入动态面板中。
3
编辑名称并隐藏快速视图按钮
在动态面板管理窗口，修改动态面板名称为：QuickViewButton。修改名称可以让面板在设置交互时更易辨认。
右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”，将按钮设置为默认隐藏。这时动态面板会变成黄色。
4
动态显示按钮
使用“鼠标移入时”事件，设置当鼠标经过产品图片时显示“快速查看”按钮。
点击产品图片，在属性面板窗口的交互标签，双击“鼠标移入时”事件添加用例，打开用例编辑器。
5
添加“显示快速查看按钮”动作
在左侧栏中，选择“显示面板”。然后在右侧栏中选中QuickViewButton复选框，配置显示的面板，点击确认。
使用鼠标移出时事件隐藏“快速查看”按钮，交互会出现错误。因为当鼠标经过“快速查看”按钮时，鼠标移出时事件就被启动，“快速查看”按钮将被隐藏。
可以在产品图片四边环绕图像映射区，再在图像映射区域上使用“鼠标移入时”事件，就可以隐藏“快速查看”按钮了。
图片映射区是可以设置交互和注释的透明区域。
6
创建图片“热区”
在产品图片上拖入一个图片热区，图片热区的四个边要比产品图片的四个边留多10px。
右键快捷菜单，选择“顺序->置于底层”，将图片热区放到产品图片和动态面板的下面。
7
使用图片热区隐藏动态面板
选中图片热区，双击组件属性窗**互标签中的“当鼠标移入时”事件。
在用例编辑器中，左侧栏选择“隐藏面板”动作，右侧栏中点选QuickViewButton复选框，选择确定。
03
详细产品弹出面板和图片播放器
1
创建详细产品弹出面板
将矩形组件添加到线框图，修改矩形大小为：600*450，将矩形放在线框图页面的中间。
2
转换为动态面板并设置为隐藏
当“快速查看”按钮被点击时，详细产品弹出面板要动态显示，因此将详细产品弹出面板转换为动态面板。
当“快速浏览”按键被激活时，详尽的产品弹窗面板需动态地呈现，因此将详尽的产品弹窗面板转变为动态面板。
在矩形上右击，通过快捷菜单选择“变换->转变为动态面板”，并将转变后的动态面板命名为“ProductPopup”。
在“快速浏览”按键激活前，详尽的产品弹窗面板需保持隐藏状态，因此右击动态面板，通过快捷菜单选择“编辑动态面板->设置为隐藏”。
3
为快速浏览按钮添加显示面板功能
现在为快速浏览按钮添加交互功能，当快速浏览按钮被激活时，展示详尽的产品弹窗层。
在动态面板管理窗口中，双击QuickStartButton面板下的State1(状态1)，打开快速浏览按钮编辑页面，选择“快速浏览”按钮，在Onclick事件中添加案例，设置案例动作“显示面板”，并将显示面板配置为显示ProductPopup。
4
为关闭按钮添加隐藏面板动作
接下来，在“详尽产品弹出面板”中添加关闭弹出面板按钮
在动态面板管理窗口中，双击ProductPopup面板下的State1(状态1)打开状态编辑页面，添加占位符在右上角。调整尺寸为：40*40。提示：在工具栏可以编辑部件尺寸。
placeholder面板OnClick事件案例，案例设置“隐藏ProductPopup”动作。
5
添加产品大图
在此步骤中，添加当点击缩略图时，产品图片播放的动画视图。
编辑详尽产品弹出面板，拖入图片部件到线框图，双击导入“Jeans1-1.png”。将图片放到左上角。
6
添加产品缩略图
将3个图片部件拖入图片的下方，导入Jeans1-1, Jeans1-2,和Jeans1-3，作为缩略图。拖拽图片边框调整图片尺寸时，按住shift键，保存图片按比例缩放。
7
建立图片播放动画窗口
我们接下来将使用一种称为“开窗”的技术，即我们将一个动态面板放置到另一个动态面板内。利用外部面板的尺寸，控制只显示里面动态面板的一部分。
在产品大图上右击，通过快捷菜单选择“变换->转变为动态面板”，将产品大图转变为动态面板。在动态面板编辑器中，重命名面板名称为“SlideshowWindow”。注意：部件属性窗口的标签栏也自随着面板重命名自动修改了名称。
8
将多产品图片转变为动态面板
在动态面板编辑器中，打开SlideshowWindow面板的State1(状态1)，在Jeans1-1图片的右边添加Jean1-2和Jeans1-3图片。
为了使这三张图片在窗口中动态地切换，我们将三张图片转变为动态面板。
全选三张图片（按住shift键点击每张图片，或者点击拖动鼠标圈选所有图片）右击，通过快捷菜单选择“变换->转变为动态面板”，将三张图片转变为动态面板。在动态面板管理窗口重新命名动态面板为“SlideshowContent”。
9
添加OnClick事件移动动态面板
接下来，添加交互让SlideshowContent面板从左边移动到右边。
返回ProductPopup面板，点击第一个缩略图添加OnClick事件案例。在案例编辑器中，选择"移动面板"动作，设置移动面板SlideshowContent到坐标：X0；Y0。注意：要设置为移动到（绝对定位），而不是移动在（相对定位）。然后设置动画“摆动”，时间500ms。
10
重复设置另外两个缩略图
在另外两个缩略图上重复设置Click事件。因为图片的宽度是240px，所以第二个缩略图的事件动作设置为“移动SlideshowContent到-240x,0y”。第三个缩略图动作设置为“移动SlideshowContent到-480x, 0y”。
如果想查看交互效果，可以生成原型，图片播放动画已经可以显示了。
04
“加入购物车”
1
创建“加入购物车”按钮
将按钮形状部件拖入弹出面板的右下角。在工具栏将按钮颜色设置为蓝色，字体颜色设置为白色。按钮形状文本修改为“Add to Cart”。
2
创建购物信息弹出面板
下一步，创建点击“Add to Cart”按钮时显示的“处理中”和“己添加”提示信息。
将一个矩形部件拖入弹出面板的中间。设置背景色为淡灰色；字体颜色为黑色。编辑矩形文本为“Processing...（处理中）”。
在矩形部件上右击，通过快捷菜单选择“变换->转变为动态面板”。在动态面板上右击，通过快捷菜单选择“编辑动态面板->设置为隐藏”
3
添加“Added to Cart”状态
将动态面板命名为“MessagesPopup”，并设置状态1名称为“Processing（处理中）”。
在“Processing”状态下右击，通过快捷菜单选择“添加状态”，添加状态2，重新命名为“AddedToCart”。
4
创建“added to cart”信息
打开“Processing”状态，在矩形上右击，通过快捷菜单选择“**”。下一步
打开“AddedToCart”状态，在空线框图上右击，通过快捷菜单选择“粘贴”。
在按钮属性中-设置当确认选项已经被添加到购物车时，按钮填充色为绿色。双击编辑按钮文本为“Successfully added to Cart（己成功加入购物车）”。
5
设置加入购物车交互
下一步，设置交互：点击“add to cart（加入购物车）”按钮，显示“Processing（处理中）”1秒钟，再显示“Added to Cart（己成功加入购物车）”1秒钟，然后隐藏弹出面板。
返回ProductPopup面板，选中““Add to Cart（加入购物车）”按钮。双击OnClick事件添加案例，打开案例编辑器。在这个案例中要添加5个动作。
6
添加显示/隐藏购物信息弹出面板动作
1.设置“MessagesPopup”面板到”Processing”状态。在右下角，在进行动画的下拉选单选择“淡入淡出”。注意：“设置面板到指定状态”动作将自动显示面板，所以不需要再添加“显示面板”动作。
2.等待1000毫秒，这个动作设置第一个面板在第二个动作发生前，持续显示1秒。1000毫秒=1秒。
- 静待1000毫秒，此操作确保首个面板在第二个动作启动之前保持显现1秒钟。1000毫秒等同于1秒。
7
转变购物信息提示面板的状态
3. 将面板状态设定为“已加入购物车”。将“MessagesPopup”面板从“处理中”状态调整为“已加入购物车”状态。选中“MessagesPopup”复选框，在其下方，从“选择状态”下拉菜单中挑选“已加入购物车”状态。
4. 再次静待1000毫秒。
8
执行隐藏购物信息提示面板的动作
5. 隐藏该面板。勾选“MessagesPopup”复选框，动画选项为“渐隐渐现”。
点击“确认”。构建原型并进行测试，新手电子商务网站制作教程的介绍至此完成。
