本书主要介绍了电子商务网页设计与制作的相关知识与内容,具体通过个人网店和中小企业网站页面的设计与制作流程介绍了网页框架与布局、网页动态图像制作、网页表单制作、网页交互特效制作以及站点创建与管理等知识。本书适合作为高职高专电子商务、计算机应用、信息管理等专业的相关课程用书,也可作为网页设计爱好者的参考书。
商玮,女,副教授,浙江经贸职业技术学院信息技术系主任。承担中华全国供销合作总社课题"基于工学结合的高职电子商务专业建设研究"以及学院教改重点项目"电子商务专业学生`创业`实训基地建设方案研究"。《电子商务概论》、《电子商务网站建设》两门浙江省省级精品课程主持人。在中国财政经济出版社、清华大学出版社出版主编教材数部。
目 录
项目一 赏析电子商务网站页面
任务一 赏析中小企业形象网站
任务二 赏析行业类综合网站
任务三 电子商务商城网站赏析
项目二 运用HTML制作简单页面
任务一 通过HTML制作网站构成分析页面
任务二 通过HTML制作网站布局分析页面
任务三 通过HTML5制作简易游客订单表
项目三 搭建电子商务网店页面
任务一 处理修饰商品图片
任务二 制作网店的店标
任务三 制作网店的侧边分类列表区
任务四 制作网店的促销区域
项目四 创建电子商务网店中的动态图像
任务一 创建网店推广动态图像
任务二 创建促销区域动画
任务三 创建网店店标动画
项目五 创建与管理网站站点
任务一 网站栏目及文件目录设计
任务二 站点的创建与管理
项目六 设计与制作中小企业网站页面
任务一 首页效果图切片处理及导出
任务二 Flash banner条的设计与制作
任务三 内利公司形象网站首页的设计与制作
项目七 DIV+CSS布局设置
任务一 个人网站首页的制作
任务二 个人网站子页面的制作
项目八 设计与制作网页的交互特效
任务一 广告图片自动轮换的制作
任务二 浮动广告的制作
任务三 悬浮客服的制作
项目九 设计与制作表单页面
任务一 动态网站的创建
任务二 用户注册页面的制作
任务三 用户登录页面的制作
参考文献
项目一 赏析电子商务网站页面
通过赏析相同类型的电子商务网站页面,有助于迅速提高网页设计水平,也能激 发学习兴趣。电子商务网站有多种类型,在本项目中分别以常见的中小企业形象网站、行 业类综合网站、综合商城为例进行分析,试图从这些分属于不同类型的网站中找出一些共 性。通过对电子商务网站页面的分析,可以形象地理解网页的版面布局、色彩搭配、 网页元素、导航设计等。
能力目标
学完本项目后,应当能够通过赏析电子商务网站掌握分析网站的基本能力,应 能够:
(1)分析网站的配色方案。
(2)分析网站的版式结构。
(3)编写简易网站赏析报告。
(4)模仿同类网站进行规划设计。
知识目标
(1)网页基础知识。
(2)网页的基本构成。
(3)网站的构成和风格设置。
(4)网页布局的常用结构。
(5)网站的规划原理。
任务一 赏析中小企业形象网站
任务引导
本任务的目标是通过浏览"名城房产"、"恒生电子"等中小企业的网站,来分析其页 面布局、网站栏目构成、色彩搭配等,以便为同类型企业规划设计网站。
任务实施
1.分析"名城房产"网站
"名城房产"是浙江省嘉凯城集团下的房地产开发企业。
网站主页采用了"同字形"的页面布局设计,页面顶部为企业logo和导航条,下 面为宣传公司形象的动画banner。整体颜色风格为"土豪金"色调,也是现阶段品质住宅 经常使用的干挂石材外立面的颜色,以这类颜色为基调,搭配类似香槟的等色调在大面积 白色的衬托下能表现出大气、自然干净、上档次的品牌形象。
导航条类目主要由指示首页的"首页"、介绍企业的"走进名城",展示新闻的"新闻 中心",展示产品的"产品中心",体现公司价值观的"名城文化",介绍人力资源的"招 贤纳士"组成。
banner中显示的动画主要由体现公司形象的产品楼盘实景、售楼中心实景和公司文化 的宣传口号"永远热爱生活"构成。
页面主体部分分为左、中、右三个部分,分别为具体产品的"楼盘展示"、"新闻中 心"和体现公司文化理念的"名城刊物"三个栏目,也表现出了该企业形象展示网站所要 表现的核心内容:产品、资讯、文化价值。
页面底部为企业网站常见的"友情链接"、"网站地图"、"法律申明"和"联系我 们"。
以"名城文化"下面的"名城理念"为例介绍二级页面,如图1—2所示。二级页 面布局延续首页的大致布局,只是在主体部分不再区分三部分,而详细的描述则采用了 "名城理念"的具体内容,具有典型内容页面的特征。在顶部依旧为企业的logo、导航条 和类似的banner,底部基本和主页一致。整体颜色风格和首页风格统一。
在内容页面中由于主要是文字内容,故强调文字的排版和标题内容的颜色,以进一步 延续网站整体风格。