当前位置:首页>> >>


云上生活购物网页设计.rar

收藏

资源目录
    文档预览:
    编号:20181030004041316    类型:共享资源    大小:3.02MB    格式:RAR    上传时间:2018-10-30
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    18
    金币
    关 键 词:
    生活 购物 网页 设计
    资源描述:
    1《Web 基础实训》课程设计报告云上生活购物网页的设计与实现姓 名:孙敏班 级:1704学 号:2115170066完成时间:2018.7.12淮阴师范学院计算机与信息科学学院2018-7-121摘要购物网站就是提供网络购物的站点,足不出户即可购买到你所喜欢的商品。目前国内比较知名的专业购物网站有卓越网、当当网等,提供个人对个人的买卖平台有淘宝、易趣、拍拍等,另外还有许多提供其它各种各样商品出售的网站。购物网站就是为买卖双方交易提供的互联网平台,卖家可以在网站上登出其想出售商品的信息,买家可以从中选择并购买自己需要的物品。目前,我国网民的大部分网购商品是在首选购物网站上购买的,首选购物网站是网民网购消费的主要平台。用户半年内在首选购物网站上支出的金额占到半年网购总额的 96%,从用户首选的购物网站看,目前 C2C 类购物网站占据的首选用户市场份额达 85%,但各购物网站的市场份额差异较大。其中,淘宝网用户市场份额达 76.5%,处于绝对领先地位。其次是拍拍网,占比 6.1%。当当、卓越、京东商城三个主要 B2C 网站分别以 5.8%,2.2%和 2.2%名列其后。有啊首选用户规模超过易趣,为 1.5%。红孩子、云网、麦网及网上书城等 B2C 购物网站分别只占据了不到 1%的首选用户市场份额。前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的 HTML 和 CSS 以及 JavaScript,现在最新的高级版本 HTML5、CSS3,以及 SVG 等。由于现在前后端分离的模式,还需要学习一些框架,目前比较流行的三大框架:Angular、Vue、React。 前端的发展非常迅速了,而且前端能做的东西也越来越多了,基本上能够前后端通吃了。所以,前端的东西还是很多的,也需要花很多精力去学习的。前端设计也就是 UI 或美工他们的工作,他们负责设计出好看的效果图。前端开发的工作就是将美工或 UI 提供的效果图通过 HTML+CSS+JS技术来生成网页关键字:电商、Web 前端、购物、网页2目录1. 需求分析 ....................................................................................................................................31.1 网站介绍 .............................................................................................................................31.2 网站分析 ..............................................................................................................................32. 设计概要 ....................................................................................................................................52.1 HTML:................................................................................................................................52.1.1 HTML 是什么 ..........................................................................................................52.1.2 Html 的结构标准 .....................................................................................................52.1.3 Html 标签 .................................................................................................................52.1.4 超链接 .......................................................................................................................62.1.5 表格 ...........................................................................................................................72.1.6 表单 ...........................................................................................................................82.2 CSS ......................................................................................................................................92.2.1 基本语法 ...................................................................................................................92.2.2 常见选择器 .............................................................................................................102.2.3 CSS 设置背景(background) ...................................................................................102.2.4 CSS 设置文本格式 ................................................................................................112.2.5 字体 ........................................................................................................................112.2.6 CSS 链接 ................................................................................................................112.2.7 边框 .........................................................................................................................122.2.8 轮廓(outline) ...........................................................................................................122.2.9 CSS 所有尺寸 ........................................................................................................132.2.10 display 显示类型 ..................................................................................................132.2.11 CSS 定位(position) ...............................................................................................132.2.12 CSS 浮动 ..............................................................................................................142.2.13 CSS 的相关特性 ..................................................................................................142.3 JavaScript...........................................................................................................................152.3.1 基本结构 .................................................................................................................153. 详细设计 ..................................................................................................................................153.1 HTML ................................................................................................................................163.1.1 登陆页面主体代码 .................................................................................................183.1.2 首页主体代码 .........................................................................................................203.1.3 联系我们主体代码 .................................................................................................273.1.4 统一样式的头尾 .....................................................................................................283.2 CSS ....................................................................................................................................303.2.1 首页的 CSS 框架 ...................................................................................................303.3 JavaScript...........................................................................................................................363.3.1 表单的验证 .............................................................................................................363.3.2 百度地图的引用 .....................................................................................................424. 总结 ..........................................................................................................................................4531. 需求分析1.1 网站介绍本网站是建立在 Windows 平台上,基于 Web 前端(HTML+CSS+JavaScript)技术的一个购物网站。通过这个网站,可以方便的人们足不出户购买到满意的物品。1.2 网站分析通过对京东、淘宝等购物网站的分析,我认为作为电商类平台,首页扮演的是非常重要的“导购”角色。而作为导购,首先要知道是谁在使用首页、核心用户是谁、不难看出是买家、卖家、小二、合作伙伴等,从用户的优先级来看,买家明显优先级最高,再然后是卖家。细分买家用户群体,也就是新手、专家、介于两者之间的用户,而新手才是核心用户,只有新手才会在首页研究各个板块。因此从新手着手,继续细分可以得出以下结论:1、有明确购物目标的初级买家;2、有模糊购物目标的初级买家;3、无购物目标的初级买家。(1)首页:从视觉设计角度和用户浏览习惯角度来看,左上部和中上部都是吸引用户视线的绝佳区域(猜想:书籍的排版都是从做左到右,从上到下,用户的浏览习惯可能与此有关),因此淘宝和京东将 logo 均放置在页面左上角,将重要的活动广告区域放在顶部中间区域,加深了品牌认知度和活动影响力,为卖家和商家自己带去大量的用户流量入口;标题区中间部位均放置了搜索栏: 搜索栏对于电商类平台来说是产品自己的搜索引擎,链接所有产品,起到至关重要的作用,因此采用了浮动固定式的交互方式,用户下拉页面时,搜索栏始终置顶,为用户提供搜索的方便快捷,提升用户体验;‚从用户角度分析,搜索栏对应的是有明确购物目标的用户群体;ƒ 点击搜索框,下拉框中显示用户最近的历史搜索记录,提高了用户体验;标题区的标签栏均设置了下拉菜单的交互模式。(2)标题栏:淘宝的标题栏中我的淘宝、购物车、收藏夹主要是为买家服务,卖家中心、网站导航主要为卖家服务,而商品分类与联系客服两者4均有服务,功能设计中买家、卖家的服务入口非常明显,都在一级菜单中显示。京东的标题栏中我的订单、我的京东、京东会员为买家服务,客户服务、网站导航为用户和商家服务。(3)不同点:可以看出淘宝标题区卖家中心入口非常明显,与购物车、收藏夹优先级同等,而京东将商家入口放置在了二级菜单中,隐藏在客户服务的商户处。与淘宝相比,京东的主要收入来源为自营(平台招商),弱化了商家入口,淘宝第一眼给用户的感觉是这里的卖家入口非常低,没有保障,而用户在京东则看不到商家入口,给用户的感觉就是逛商场与逛集市的区别,与京东的 slogan:“享受品质生活”契合。京东没有收藏夹这个功能,并且把我的购物车入口放在了搜索栏右侧,而淘宝将购物车放在了顶部标题区,个人认为这两个区域对用户给用户的使用成本差不多;另外一点是点击淘宝首页的购物车,下拉框中显示 5 个最近添加的产品,而京东首页的购物车,可通过下滑显示购物车里的所有产品,不需要再次点击进入购物车查看购物车里的所有物品,可能淘宝主要是想让用户进入购物车页面,让用户有个更直观的选择,并且在购物车页面有降价商品和库存紧张的分类,可以增加一定的转化率,京东则直接简化了用户购买的决策流程,直接在首页选择需要购买的物品。在该处京东增加了企业采购,为大批量的企业采购提供了优惠的专属入口,可以理解为 B2B 模式的创新和试验;分许搜索栏下的搜索关键词,关键词的来源肯定是基于两家电商平台的大数据处理,但从关键词的差异仍然可以看出两者之间用户购买习惯的差异。1.3 功能需求通过对京东、淘宝等购物网站需求的认识和分析,我对购物网站有了基本的了解,我觉得该网站至少应该有以下的一些基本功能:(1)注册管理:能够对用户名、密码的简单验证;能够对电子邮箱 Email 进行有效验证;能够防止利用页面,以及已经注册用户不能重复注册;用户应当同意该网站所要求的服务条款协议。(2)登陆网站:用户浏览商品时可以不登录,用户可以通过用户名以及邮箱登录,也可以通过第三方账号(微信、QQ、微博)登录。5(3)商品浏览:分类显示商品;显示商品详情,提供购买链接;可以对商品进行模糊查询;浏览商品时不要求用户登录,下单前用户必须登录。(4)售后服务:良好的售后服务有利于网站的长期发展,本网站提供客服联系方式、公司地址、可联系时间。2. 设计概要2.1 HTML:2.1.1 HTML 是什么HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 使用标签来描述网页使用用浏览器来“解释和执行”HTML2.1.2 Html 的结构标准2.1.3 Html 标签head 标签:在网页中我们一般是在 head 标签中去设置网页的属性链接外部样式:链接外部 js 脚本:6常用标签:图片标签:Src: 图片的来源 必写属性 Alt : 替换文本 图片不显示的时候显示的文字 Title:提示文本 鼠标放到图片上显示的文字 Width : 图片宽度 Height : 图片高度 图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。2.1.4 超链接href : 去往的路径(跳转的页面) 必写属性 title : 提示文本 鼠标放到链接上显示的文字 target=”_self” : 默认值 在自身页面打开(关闭自身页面,打开链接页面)target=”_blank”: 打开新页面 (自身页面不关闭,打开一个新的链接页面)7锚链接:1、先定义一个锚点2、超链接到锚点2.1.5 表格表格一般用于展示数据,推荐使用标准的表格结构,有利于 seo属性:Border=”1” 边框 Width=”500” 宽度 Height=”300” 高 cellspacing=”2” 单元格与单元格的距离 cellpadding=”2” 内容距边框的距离 align=”left | right | center” 如果直接给表格用 align=”center” 表格居中 如果给 tr 或者 td 使用 ,tr 或者 td 内容居中。 bgcolor=”red” 背景颜色。 表头 colspan=”2” 合并同一行上的单元格 rowspan=”2” 合并同一列上的单元格 用法和 td 一样,标题的文字自动加粗水平居中对齐 垂直对齐方式:Valign=”top | middle | bottom” 8表格边框颜色:bordercolor=“red“2.1.6 表单 表单一般是由提示信息和表单控件组成的,用于收集信息。平时网页上的登录,注册就是表单。 表单域:属性:action:处理信息 Method=”get | post” Get 通过地址栏提供(传输)信息,安全性差。 Post 安全性高。文本输入框:maxlength=”6” 限制输入字符长度 readonly=”readonly” 将输入框设置为只读状态(不能编辑) disabled=”disabled” 输入框未激活状态 name=”username” 输入框的名称 value=”大前端” 默认值密码输入框:文本输入框的属性和密码输入框属性通用单选框:只有将 name 的值设置相同的时候,才能实现单选效果。 checked=”checked” 设置默认选择项。复选框:checked=”checked” 设置默认选中项9多行文本框:文件上传:提交按钮:普通按钮:图片按钮:重置按钮:2.2 CSS2.2.1 基本语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2; … declarationN } 选择器通常是你需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性(property )是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。 selector {property: value}
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:云上生活购物网页设计.rar
    链接地址:http://www.gold-doc.com/p-255528.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们
    [email protected] 2014-2018 金牌文库网站版权所有
    经营许可证编号:浙ICP备15046084号-3
    收起
    展开