电子工业出版社-网上书店

本书以培养 Web 前端开发相关岗位人才为出发点，以培养学生利用 Web 前端技术进行电商网站设计的能力为主线，将 Web 前端基础的典型工作任务提炼为三大学习模块，分别是电商网站结构搭建与基础区块制作、电商网站二级页面内容板块制作和电商网站首页制作。学生可以由浅入深地认识 Web 前端页面开发的相关知识。本书引入相应的案例和实训任务，以理论与实际操作一体化的教学方式，让学生掌握电商网站结构搭建、电商网站二级页面内容板块制作及电商网站首页制作等核心技能。本书以电商平台开发为例，介绍了Web 前端技术在电商网站搭建中的应用方法及标准，详细阐述了 CSS 的基本内容及相关应用，介绍了超链接、盒子模型、伪类与伪元素、表格、表单等前端开发技术；还介绍了 CSS 应用于 HTML 文件的方式，在此基础上通过能力提升、任务训练的方式，指导学生对电商平台项目中的各板块内容进行开发，使学生深入理解 Web 前端技术在电商网站搭建中的应用，提高学生的实践操作水平。本书可以作为高等职业院校计算机类、电子信息类及电子商务类等专业的 Web 前端技术、互联网与电商平台开发技术等课程的教材，也可以作为非计算机专业学生和工程技术人员在进行 Web 前端开发时的教材及参考书。

模块一 电商网站结构搭建与基础区块制作
项目一　站点结构搭建 ..........................................................................................................2 
任务一　站点搭建前准备 .........................................................................................................3 
任务二　站点主体结构搭建 ...................................................................................................18 
任务单 1-1 .................................................................................................................................26 
任务单 1-2 .................................................................................................................................27 
项目二　帮助中心板块制作 ................................................................................................29 
任务一　帮助中心板块结构搭建 ...........................................................................................30 
任务二　帮助中心板块链接设置 ...........................................................................................44 
任务单 2-1 .................................................................................................................................50 
任务单 2-2 .................................................................................................................................51 
项目三　网站 LOGO 区块制作 ...........................................................................................53 
任务一　网站 LOGO 区块的效果图分析 ..............................................................................54 
任务二　网站 LOGO 区块的结构搭建与样式设置 ..............................................................57 
任务单 3-1 .................................................................................................................................74 
任务单 3-2 .................................................................................................................................75
模块二 电商网站二级页面内容板块制作
项目四　商品详情页面制作 ................................................................................................78 
任务一　商品详情页面加入购物车板块的结构搭建与样式设置 .......................................79 
任务二　商品详情页面中商品图片展示与关联推荐板块的实现 .....................................106 
任务单 4-1 ...............................................................................................................................127 
任务单 4-2 ...............................................................................................................................129 
项目五　购物车板块制作 ..................................................................................................131 
任务一　购物车板块的框架搭建 .........................................................................................132 
任务二　购物车板块的样式设置 .........................................................................................141
任务单 5-1 ...............................................................................................................................149 
任务单 5-2 ...............................................................................................................................151 
项目六　电商网站的表单制作 ...........................................................................................152 
任务一　电商网站注册表单的结构搭建 .............................................................................153 
任务二　电商网站注册表单的样式设置 .............................................................................164 
任务单 6-1 ...............................................................................................................................172 
任务单 6-2 ...............................................................................................................................174
模块三 电商网站首页制作
项目七　首页页头、页尾及导航制作 ................................................................................178 
任务一　首页页头、页尾制作 .............................................................................................179 
任务二　网站主导航与分类导航制作 .................................................................................200 
任务单 7-1 ...............................................................................................................................212
 任务单 7-2 ...............................................................................................................................214 
项目八　首页内容区制作 ..................................................................................................215 
任务一　首页内容区的结构搭建与样式设置 .....................................................................216 
任务二　首页内容区的动态效果实现 .................................................................................241 
任务单 8-1 ...............................................................................................................................249 
任务单 8-2 ...............................................................................................................................251 
附录 A　HTML 常用标签及说明 ........................................................................................253
附录 B　CSS 参考手册 .....................................................................................................257
参考文献 ...........................................................................................................................265

前言
自进入Web2.0时代以来，各类Web 应用不断涌现，极大地提升了各行业的信息化水平， 为人们的日常生活提供了便利。随着 Web 应用的发展，Web 前端发生了翻天覆地的变化。 Web 前端通过丰富的多媒体和良好的交互形式，不断为用户提供越来越好的体验。网页设 计成为 Web 前端开发人员的基本技能，许多院校的相关专业开设了Web 前端技术的相关课 程。同时，随着“互联网+”模式的不断推广与普及，IT 行业对Web 前端开发工程师应掌 握的知识和技能的要求也有所提高。 本书基于 Web 前端开发标准，深入浅出地介绍 Web 前端技术的基础知识，阐述 Web 体 系结构、HTML、CSS 和网站制作流程等，内容翔实，结构合理，语言精练，实用性强，易 于自学。 本书的主要特点有以下几点。 1．落实立德树人根本任务，创新育人理念，探索课程思政特色的实现 本书为了落实立德树人根本任务，不断创新育人理念，通过知识目标、技能目标和素养 目标三种学习目标的构建，以及“思政小课堂”栏目的开发结合知识体系与价值体系，充分 体现社会主义核心价值观的内涵，探索课程思政特色的实现。 2．以案例为驱动，以职业活动为导向，实现“教、学、做一体化”目标 本书融合知识与实战操作经验，书中的内容不仅包含知识点讲解，还包含网站开发流程、 网站部分模块制作等大量的开发案例，注重对学生的编程思维的培养。同时，在内容中设置 “想一想”“小词典”“练一练”等栏目，以及课后的任务单实训模块，方便学生掌握所学知识， 以实现“教、学、做一体化”目标。 3．知识点与网站设计实践案例紧密结合 本书在相关知识点的介绍后配有代码，可以帮助学生了解知识点的实际应用，并根据知 识点在实际网站设计中的作用，结合实践案例进行讲解，使学生做到学以致用。 4．体现“以学生为中心”的教学设计理念，配套丰富的教学资源 本书将“以学生为中心”的教学设计理念贯穿教学资源开发的整个过程。配套开发教学 课件、微课视频、教学案例、课后习题、拓展学习材料、考核题库和商城系统设计 Demo 等 类型丰富的教学资源，促进课前、课中、课后的教学互动与学习。 5．核心内容突出，代码规范统一 本书通过精简核心内容，摒弃老旧的概念与语法，穿插实践案例介绍网站设计中的重点 内容，如CSS 中的盒子模型、表格等，从而节省学生的阅读时间。本书提供风格统一、格
式规范的源代码，以培养学生良好的编程习惯。 本书可以作为高等职业院校计算机类、电子信息类、电子商务类等专业 Web 前端技术、 互联网与电商平台开发技术等课程的教材，也可以作为非计算机专业学生和工程技术人员在 进行Web 前端开发时教材及参考书。本书在编写的过程中参考并借鉴了一些专家和学者的 研究成果，在此表示感谢！虽然本书的编写团队在创新、创业和教育方面已有一定的经验， 但难免存在一些疏漏之处，敬请读者批评指正。
编　者　 2022 年 6 月

本书配套资源下载

对不起，暂无音视频资源！

电商Web前端基础