模块三电子商务网站的内容设计分析.ppt

模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 5．以功能模块为主的信息组合方式 【典型案例】以功能模块为主的信息组合方式—证券之星，如图3-36所示。 图3-36信息组合方式—证券之星 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 二、首页强化栏目 （一）用分类索引的方式强化栏目 1．板块式的分类索引 【典型案例】板块式的 分类索引—搜狐，如图 3-37所示。 1 图3-37板块式的分类索引—搜狐 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 2．层级式的分类索引 【典型案例】层级式的分类索引—京东商城，如图3-38所示。 1 图3-38 层级式的分类索引—京东商城 ①层级式的分类索引有比较强的层进关系和比较好的扩展性，而且能够很容易地体现当前的定位。 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 3．鼠标响应的层进索引 【典型案例】鼠标响应的层进索引—阿里巴巴网站，如图3-39所示。 1 2 图3-39 鼠标响应的层进索引—阿里巴巴网站 ①鼠标移动到主栏目“行业市场”将出现下属的二级栏目； ②鼠标移动到“拼音索引”项中时，将出现相应拼音项下属的二级栏目。 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 （二）用引人注目的设计元素强化栏目 1．应用精致的图标强化栏目 【典型案例】应用精致的图标强化栏目—中关村在线网站，如图3-40所示。 ①中关村在线网站应用精致的图标来强化栏目，精美并有鼠标响应的图标能够让浏览者产生强烈的印象和兴趣。 1 图3-40应用精致的图标强化栏目—中关村在线 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 2．应用明亮的颜色强化栏目 【典型案例】应用明亮的颜色强化栏目—土豆网，如图3-41所示。 ①中关村在线网站应用精致的图标来强化栏目，精美并有鼠标响应的图标能够让浏览者产生强烈的印象和兴趣。 1 图3-41 应用明亮的颜色强化栏目—土豆网 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 3．应用视觉导线强化栏目 【典型案例】应用视觉导线强化栏目—东风日产，如图3-42所示。 1 图3-42 应用视觉导线强化栏目—东风日产 ①东风日产网站应用视觉导线引导浏览者的视线，强化浏览者对栏目的注意。 模块三 电子商务网站的内容设计 任务五 网站首页的设计 任务实施 4．应用比喻性的视觉元素强化栏目 【典型案例】应用比喻性的视觉元素强化栏目—冒险岛，如图3-43所示。 1 图3-43 应用比喻性的视觉元素强化栏目—冒险岛 本项任务的主要目的是了解电子商务网站的程序设计语言。 任务描述： 任务六 电子商务网站程序设计语言 模块三 电子商务网站的内容设计 电子商务程序设计是电子商务网站构建过程中重要的技术手段。在网站设计开发的过程中，需要掌握一系列的程序语言和方法，从网站外观的设计到前、后台数据的交互，以构建一个强大的、功能丰富的电子商务网站。 任务分析： 任务六 电子商务网站程序设计语言 模块三 电子商务网站的内容设计 一、HTML标记语言 （一）HTML介绍 HTML（HyperText Markup Language）语言又称超文本标记语言，它是一种标识性的语言，由一些特定符号和语法组成，其目的在于运用标记（tag）使文件达到预期的显示效果，能够对Web页的内容、格式及Web页中的超级链接等进行描述。 用HTML编写的超文本文档称为HTML文档，它是一种纯文本文件，能够用任何文本编辑软件来建立，例如Windows操作系统中的记事本，也可以使用一些可视化网页编辑工具，如Microsoft FrontPage、Dreamweaver等。 相关知识: 任务六 电子商务网站程序设计语言 模块三 电子商务网站的内容设计 （二）HTML的基本结构 1．HTML文件基本语法 HTML文件是由标记和内容组成，这些标记是一系列使用括号的代码，用于描述网页的格式与内容。HTML语句都是xyz……/xyz结构，标记成对出现，xyz表示描述起始，/xyz表示描述结束，中间部分为标记描述的内容 标记的书写规范： （1）任何标记均由“”与“”所包围，如P。 （2）标记名与“”号之间不能留有空白字符。 （3）部分标记应加上参数表示标记的属性，如font size=”9”欢迎/font，表示文字内容“欢迎”字号为9号。 （4）参数只能加在起始标记中。 （5）起始标记名前加上“/”符号，则是其结束标记，如/font。 （6）标记字母不区分大小写。 模块三 电子商务网站的内容设计 任务六