基于h5技术的《电子商务视觉设计》课程网站设计与实现.pdf

45在互联网经济和信息技术迅速发展的背景下，人们审美的不断提高，这便要求网页更加美观，课程教学应紧挨时代变化，从而满足人们对网站视觉美感的要求。随着教育改革的不断完善，越来越多的资源给学习者提供免费开放，实现学习资源最大化，本文通过对电子商务视觉设计课程的网站搭建及网站优化1，一方面为该课程提供相关介绍和功能服务、传递新的教学思想、展示新的教学手段、提供学习资源、方便学生自主学习。另一方面为该课程资源共享与推广提供可行性思路。1h5HTML 称为超文本标记语言。H5 是指 HTML5，它是万维网的核心语言，h5 是 HTML 的第五代版本。它赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的 Web，简洁、高效、迅速等许多优点。2并且它可以在电脑端平板端手机端同时使用，实现自适应和响应式，基于 H5 技术的内容和产品日趋流行。2网站需求分析2.1用户需求分析基于 h5 技术的电子商务视觉设计课程网站设计与实现基于 h5 技术的电子商务视觉设计课程网站设计与实现张琦侯红梅丁青（四川工商学院经济管理学院，四川眉山620000）摘要：摘要：随着网络信息时代的发展，教育行业借助互联网平台发展已经成为一种新的趋势，许多高校为课程构建了视觉风格新颖、功能完备的课程网站界面用以介绍和宣传课程。本文通过网络问卷和访谈，以用户为中心，从系统分析入手，电子商务视觉设计课程网站设计从网站风格定位、网站整体视觉感受、主要功能三个板块进行设计，采用响应式布局兼容多种设备，通电子商务视觉设计课程网站的设计与实现，既能实现课程资源共享，也能方便学生自主学习、提升课程的教学质量输出。关键词：关键词：h5；电子商务视觉设计；网站设计；资源共享中图分类号：G642文献标志码：A中图分类号：G642文献标志码：ADesign and Implementation of the Course Website for E-commerce Visual Design Based on H5 TechnologyZhang Qi,Hou Hongmei,Ding Qing(School of Economics Management,Sichuan Technology and Business University,Meishan 620000,China)Abstract:With the development of the internet information age,it has become a new trend for education industry to rely on internet platforms.Many universities have built website interfaces with novel visual styles and complete functions to introduce and promote the courses.This article focuses on users through online questionnaires and interviews starts from system analysis.The course website for“E-commerce Visual Design”is designed from three aspects:website style positioning,overall visual experience of the website,and main functions.It adopts a responsive layout compatible with multiple devices.Through the design and implementation of the course website for e-commerce visual design,it can not only achieve course resource sharing,but also facilitate students independent learning and improve the teaching quality output of the course.Keywords:h5；Visual design for e-commerce；Website design；resource sharing专业课程建设实践与研究收稿日期：2023-6-5基金项目：首批省级应用型示范课程网页美工实训，川教函2018527号；第三批高等学校省级课程思政示范课程电子商务视觉设计，川教函2022199号；2022省级一流本科课程电子商务视觉设计，川教函20237号；2022年校级一流本科课程电子商务视觉设计，院教字202257号。作者简介：侯红梅（1981-），女，四川达州，副教授，主要研究方向：电子商务。张琦（2001-），男，四川泸州，电子商务专业本科在读，学生。丁青（2001-），女，四川开江，电子商务专业本科在读，学生。第 8 卷 第 3 期Vol.8 No.3四川工商学院学术新视野Academic New Vision of Sichuan Technology and Business University 2023 年 9 月Sept.202346为深入调研用户人群个性化特征与需求，将调研人群分成了两类，一类为学习过该课程的人群，另一类为没有学习过该课程的人群，针对不同的人群类型，设计了多样性的问卷。通过问卷调查发现缺乏相关网站，学生老师对该课程了解渠道不通畅，因此，电子商务视觉设计课程网站的开发设计具有其重要性和紧迫性。通过调研发现目前课程网站存在的相关缺点有不简洁，重要信息难查找、广告弹窗太多、信息不全面、实际参考性不强等问题。通过此次调查问卷，在后期的设计与搭建中，要以同类学校的老师、学生为客户群体，了解人们对该课程的网站需求，功能设计以实用性为主，通过布局、文字醒目、图文排版、色彩搭配等方式突出网页重点，同时布局好网站框架，风格简约个性。2.2功能模块需求分析功能模块需求是开发网站重要的一个环节，通过发放网上调查问卷方式搜集相关群体的需求，以及参考同类型网站设计开发灵感，来完成网站功能模块需求分析。2.1.1功能性需求分析电子商务视觉设计课程网站界面的设计与开发目的是为了让用户能够更直观、更方便快捷的通过在线体验、云端访问等形式提前了解该课程相关信息。通过信息反馈渠道，将用户需求反馈给该课程，对课程教学管理与维护提供参考。网站设有五大功能模块：首页、课程概况、课程应用、课程评价、联系我们。五大模块功能介绍如下：首页模块，此项功能模块主要体现电子商务视觉设计课程的基本情况、教师团队、课程目标等信息。以上功能的实现需要依托互联网并保持网络环境流畅。网站首页可为用户提供全方位信息展示。课程概况模块课程资源模块以电子商务视觉设计课程的学习目标包括课程介绍、应用领域、学习成果、和软件的认识等等。课程应用模块，课程成果模块主要为介绍学习了电子商务视觉设计课程后，可以应用的地方以及一些优秀作品。课程评价模块，课程评价模块主要包含学生在学习该课程后对该课程的相关评价。风采展示模块，风采展示模块主要是包含学生学习该课程后取得的相关成就，以及课堂精彩互动瞬间。后台页面模块，包括联系我们模块和登录注册模块，联系我们模块主要学校地址和联系方式等信息，登录注册主要是包含登录网站的账号的注册和登录。2.2.2非功能性需求分析网站的非功能性需求包含稳定性需求和安全性需求。网站稳定性需求：电子商务视觉设计课程网站的运行稳定性直接影响浏览网站的体验感，因此在投入市场前需要进行稳定性测试。其中包括网站优化测试、用户优化测试、网站兼容性测试、试运行测试等。当网站运行中出现漏洞时，要求后台第一时间发现问题并生成日志反馈给开发者，开发者以最快的速度分析日志并排除故障，恢复网站的正常运行。网站安全性需求：在互联网高速发展的今天，用户个人数据安全问题层出不穷，为避免用户个人隐私泄露，学校网站开发采用第三方匿名访问，无痕浏览，提高网络安全性，为用户营造一个安全稳定的网络环境。综上所述，为了给用户营造良好的网络生态体验环境，一方面在搭建网站时要注重稳定性，保障用户浏览流畅，首页与子页的链接通畅，采用响应式布局能够适应多种设备浏览。另一方面还要兼顾好网站的安全性，保障用户个人隐私安全，做到无痕浏览。3网站系统架构设计3.1网站框架电子商务视觉设计课程网站是以 B/S 架构为基础而设计开发的。用户通过搜索引擎打开网站，通过响应式布局3，PC 端、手机端、Pad 端都可实现尺寸自动匹配，也无需安装软件等介质，更方便快捷。B/S 是建立在浏览器上的，更加丰富和生动的表现方式与用户交流，且大部分难度较低，开发成本也低，比 C/S 的适应范围更强。课程网站 B/S 架构工作原理图如图 1 所示。图 1网站 B/S 架构工作原理图张琦,侯红梅,丁青：基于 h5 技术的电子商务视觉设计课程网站设计与实现473.2开发工具与技术方案的具体选择电子商务视觉设计课程网站主要通过软件结合 HTML5 语言以及 CSS3.0 共同设计与开发，在网站成型的基础上，运用 PHP 语言链接 MySQL 数据库。对于网站设计与开发，利用 HBuilder 软件实现响应式布局，自动根据客户端尺寸调节大小适应屏幕4。HBuilder 的具备一个比较多优势在于它通过相关的语法提示和代码输入的快捷输入，来增强开发对应网站的效率。图 2响应式布局原理图页面的布局框架是整个页面的基础，页面设计将采用响应式布局方案。响应式布局是通过更改内容样式达到的效果，根据获取终端分辨率信息调整呈现的样式。自动调整成相适应的比例展示内容。响应式布局原理如图 2 所示。3.3网站体系架构电子商务视觉设计网站的搭建步骤为准备素材、建立站点、建立首页、建立子页、链接数据库、购买域名、连接服务器、进行系统测试，测试合格后发布网站。网站建立流程如图 3 所示。系统架构设计主要遵循三层：表示层、功能层以及数据处理层。在表示层，用户在客户端浏览器，向功能层内的 Web 服务器发出 HTTP 请求，功能层根据用户的需求，会向表示层中的客户端浏览器返回结果形成 HTML 页面，用户通过 HTML 页面获取相应的信息。在功能层向数据处理层发出信息时，Web 服务器会通过 MySQL 数据库，由 MySQL 数据库向 Web 服务器发出请求，获得请求后，数据库服务器会向 Web 服务器显示数据结果。5图 3网站建立流程4网站页面设计方案4.1网站界面设计思路通过使用问卷调查，以及参考了其他的网站设计，通过对该课程的了解以及课程的相关知识的学习，将电子商务视觉设计课程网站的界面设计分为网站风格定位、网站整体视觉感受、主要功能三个板块。4.1.1风格定位。电子商务视觉设计课程网站为教育相关的网站，通过相关问卷调查，接近 70%的被调查者都认为网站应该简约、稳重。因此风格因该倾向于稳重，简约的扁平化的风格。考虑的使用者年龄和网站性质，避免使用过于强烈的色彩，在视觉元素、功能设计等方面都要遵循普适性原则，同时要体现课程特色，将课程与网站风格相结合，突出时代性与创新性。64.1.2视觉元素提炼。根据网络调查问卷数据显示，大部分的受访者更倾向于选择以白色为网站设计主色调。白色与黑色的相会搭配给人印象深刻，且与整体网站风格简约相匹配。4.1.3主要功能。电子商务视觉设计课程网站为展示类静态网页，其主要具备的功能为信息展示，主要面向学生、老师集中展示该课程概况、老师成员、作品展示、学习目标、学生评价等情况。4.2页面颜色的使用设计电子商务视觉设计课程网站，色彩搭配张琦,侯红梅,丁青：基于 h5 技术的电子商务视觉设计课程网站设计与实现48主要以饱和度不高的白色为主，再搭配以浅色系色彩，使得网站整体观感上既能迎合年轻群体又能不失教学网站的稳重。网站背景色为白色为主，明暗度对比明显，能够提升用户的感官体验，提高驻足时间。74.3页面文字的使用页面文字大小均跟随页面大小变化，页面导航栏文字字体颜色为纯白色，在黑色的背景颜色下更加醒目，在导航栏设置了鼠标指针悬浮特效，当鼠标滑动到导航栏字体上方，便会改变颜色，增加美感。在标题处均设置了加粗黑体，其他正文为黑色字体。4.4页面的制作网站面向的是各个年龄段的不同受众，页面设计尽量要简洁朴素，要通俗易懂，又要给用户提供良好的视觉感受，使用户有更好的视觉去浏览。采用框架式结构，每个部分的内容采用不同颜色的 Div 标签进行区分，让页面的每个部分的结构框架都十分清晰。搭建页面前先用 Photoshop 绘制出页面的整体框架，再对每一个框架部分进行命名，完成后开始搭建网页，整体从上往下，页面 Logo、导航栏、Banner、图文部分、底部导航栏，不同的页面可以有所调整，通过清除页面边距，使网站与不同浏览器实现兼容。用户通过点击主页导航栏，能够快速跳转到其他子网页。要实现首页和子网页的页面链接。5网站功能设计与实现5.1网站首页首页作为网站的门面，设计上要美观大气，功能上要尽量简单朴素，不能喧宾夺主。色彩搭配以高饱和度为主，显得深沉、稳重，符合教学网站的主题。搭建电子商务视觉设计课程网站首页的步骤如下：第一步为绘制首页框架，先使用 Photoshop 软件根据提前设定好的页面布局绘制好大体框架，然后使用软件进行制作，配合响应式标签即可实现全屏自适应缩放。第二步为设计导航部分，导航部分由 Logo和导航栏组成，导航栏采用 Ul 加 li 标签实现横向显示。Logo 则采用 Margin：left 设置左边距固定好大小和位置。第三步为设计主题内容框架，首页内容主要课程简介、教师团队、课程目标等功能模块。5.2课程概况页面课程资源功能模块主要作用为通过网页呈现课程的相关介绍、课程目标、学习目标等功能。课程资源功能模块的整体布局为“从上往下”垂直型，依次为 Logo、导航栏、海报 Banner、课程介绍、课程目标、学习目标、底部导航栏。其中展示采用文字的说明方式，正文内容部分字体颜色为黑色，在学习目标上，进行划分为四个小目标。个个模块相互接连，层次分明。5.3课程应用页面课程应用模块主要包含电子商务视觉设计课程所获的应用区间，可以用来做什么，以及相关的作品赏析。成果模块页面整体布局为上中下三个部分，上为Logo、导航栏和轮播，应用领域、作品赏析、底部导航构成作品赏析。作品赏析模板使用图片进行展示，运用一个 div 标签进行控制，从上到下依次插入作品展示图片。5.4课程评价页面课程评价模块主要作用为通过网页来展示学生对于该课程的相关评价。课程评价展示页面布局也是采用上中下结构，上部为 Logo、图片轮播和、中间部分为课程评价，下方为底部导航栏，其中，中间的课程评价信息通过多个 div 标签进行从上到下进行控制，每个 div 标签控制一个学生的评价，多个 div 标签共同构成了学生评价模块。对学生名字字体使用 h3 进行控制大小。5.5风采展示页面风采展示模块主要是包含学生学习该课程后取得的相关成就，以及课堂精彩互动瞬间。风采展示模块页面结构为上中下结构，主要分为四个模块，从上到下分别为导航栏和轮播构成的第一个模块，其次是证书展示模块、课堂互动模块、底部导航模5.6后台页面“h5”技术的电子商务视觉设计课程网站设计，在功能的需求上需要后台页面，后台页面主要有联系我们模块：包含学校的地址，联系方式等。授课视频模块页面结构类型为上中下型，分为五个部分，从上往下依次为 Logo、导航栏、轮播、联系我们、底部导航。其中联系我们部分采用左右结构设计，分为三层 Div标签：标题，联系方式、学校地址，除此之外还包括登录和注册页面，方便及时与客户进行交流、互动。6网站系统测试因课程网站尚处于设计与开发阶段，未申请域名和服务器，所以在移动端的运行环境测试采用 XAMPP服务器实现，将电脑作为服务器接收终端，安装XAMPP，将写好的 HTML 页面放到 XAMPP 文件夹中的张琦,侯红梅,丁青：基于 h5 技术的电子商务视觉设计课程网站设计与实现49htdocs 文件夹中。将本机的局域网 IP 地址和网站 IP设置为：127.0.0.1，然后手机连接到与 PC 同一个路由器中，用手机浏览器打开：http:127.0.0.1:8020/index.html 后 即 可 预。此 次 测 试 环 境 分 为 搭 载Windows10 系统的 PC 端、和手机端，主要对网站的运行、自适应、特效进行检测。根据网站运行环境测试结果显示，电子商务视觉设计课程网站分别在手机端、PC 端、Pad 端等不同环境下搭载的不同系统的浏览器内核中均能实现正常运行，未出现异常情况，网站的响应式布局也能正常实现自适应。实验结果表明，当前网站设计中的响应式布局兼容性良好，仍是大多数网站开发者的首选。本次测试主要选择了市场上主流的浏览器：分别为 google 浏览器、360 浏览器、IE 浏览器、QQ 浏览器等，通过测试网站的兼容性好。结语“h5”技术的课程网站的建设既是省一流课程、省课程思政示范课程的展示、学习平台，也是该课程常规教学、学生自检自查、师生互动交流等长期的学习平台。通过对课程和用户需求分析，对各项需求功能和课程进行模块化处理。电子商务视觉设计课程网站的设计和实现，课程“以学生为中心”，采用“抛锚式教学”，进而探索与教学互补的课程网站建设，了解业界最新需求，提升学生自主学习能力、实战能力和创作高阶能力，提高电子商务视觉设计课程学习效果。在课程网站建设过程中使用“h5”技术采用自适应、弹性布局，能响应式地实现各种页面布局，并且得到所有浏览器的支持。通过课程网站建设，希望能给课程资源分享提供很好的互动平台。参考文献1 网站优化 OLhttp:/ 谢丽丽.电子商务网站建设 M.北京:机械工业出版社.2008.3 危华明，陈积常，汪小威.基于HTML5+CSS3.0的响应式网站前端设计与实现J.福建电脑,2018,34(05):15+31.4 曹利.基于 Bootstrap 旅游网站设计与实现 J.太原师范学院学报(自然科学版),2019,18(04):65-67.5 刘倩倩.基于 PHP 和 MySQL 的网站设计与实现 J.中小企业管理与科技,2020,(30):162-163.6 王纬,王妍,王健,黄山,李慧杰,崔洋,张鹏,尹成,张宁,钱玉霞.网页设计与制作案例教程(HTML5)M.南京东南大学出版社,201901.246.7 李孟贾.浅析电商网页界面设计中设计风格与技术 的 优 化 C/第 十 七 届 沈 阳 科 学 学 术 年 会 论文,2020:1251-1255.责任编辑：左莹莹 张琦,侯红梅,丁青：基于 h5 技术的电子商务视觉设计课程网站设计与实现利。要脚踏实地，一步一个脚印，认真做好当下每一件事情，厚积薄发，锲而不舍，朝着正确的方向不断努力，就会发生质变，从而实现人生目标！通过二项分布随机变量事件概率转为借助棣莫弗一拉普拉斯中心极限定理解决问题，教育学生解决问题遇到困难时，要辩证地分析问题，转化思维模式，不要被常规的思考方式限制，要多角度多维度思考和解决问题！7.2存在问题应用雨课堂，对手机蓄电和网络信号要求较高，需要有相应配套设施；其次，因时间限制，课堂练习量偏少；再者，对于线上线下混合式教学，融合力度还有待加强。7.3改进思路针对以上问题，可以通过雨课堂（超星学习通）增加线下多种形式的练习，不断完善线上资源，比如习题库，录制微视频等，让信息网络和线下教学深度融合，更好实现课堂翻转；其次不断优化过程考核，充分应用雨课堂等平台统计数据，同时继续探索切合的的课程思政案例融入教学，更好为三全育人服务。参考文献1 概率论与数理统计 M.同济大学数学系.人民邮电出版社学,2017.3.2 概率论与数理统计 M.盛骤,谢式千,潘承毅,编.高等教育出版社.20083 王妍.概率统计在实际问题中的应用举例 J.中国传媒大学学报(自然科学版),2007,No.53(01):15-19.DOI:10.16196/ki.issn.1673-4793.2007.01.003.责任编辑：左莹莹 上接第44页