精华内容
下载资源
问答
  • 目 录第1章 实践概述 11.1 实践目标 11.2 实践知识地图 11.3 实施安排 61.3.1 实验部分(技术专题) 61.3.2 综合实践部分 11第2章 网页设计制作 192.1 实验目标 192.2 实验任务 192.3 设计思路 202.4 ...

    目 录

    第1章 实践概述 1

    1.1 实践目标 1

    1.2 实践知识地图 1

    1.3 实施安排 6

    1.3.1 实验部分(技术专题) 6

    1.3.2 综合实践部分 11

    第2章 网页设计与制作 19

    2.1 实验目标 19

    2.2 实验任务 19

    2.3 设计思路 20

    2.4 实验实施(跟我做) 20

    2.4.1 步骤一:设计网页原型 20

    2.4.2 步骤二:设计页面效果 21

    2.4.3 步骤三:网页切图 22

    2.4.4 步骤四:网页设计 25

    第3章 开发工具(HBuilder) 26

    3.1 实验目标 26

    3.2 实验任务 26

    3.3 设计思路 26

    3.4 实验实施(跟我做) 27

    3.3.1 步骤一:下载并安装

    HBuilder 27

    3.3.2 步骤二:启动HBuilder 27

    3.3.3 步骤三:创建工程 28

    3.3.4 步骤四:创建HTML页面 29

    3.3.5 步骤五:编辑HTML文件 30

    3.3.6 步骤六:运行 30

    第4章 网站服务器部署

    (Apache服务器) 32

    4.1 实验目标 32

    4.2 实验任务 32

    4.3 设计思路 32

    4.4 实验实施(跟我做) 32

    4.3.1 步骤一:下载Apache 32

    4.3.2 步骤二:安装Apache 34

    4.3.3 步骤三:测试Apache 35

    第5章 HTML制作静态网页

    (新闻网站) 36

    5.1 实验目标 36

    5.2 实验任务 37

    5.3 设计思路 37

    5.4 实验实施(跟我做) 38

    5.4.1 步骤一:创建“登录”页面 38

    5.4.2 步骤二:添加“登录”

    页面内容 38

    5.4.3 步骤三:创建新闻首页和

    二级页面 39

    5.4.4 步骤四:添加新闻页面

    内容 39

    5.4.5 步骤五:实现页面跳转 42

    第6章 CSS设计页面样式

    (购物网站) 43

    6.1 实验目标 43

    6.2 实验任务 44

    6.3 设计思路 44

    6.4 实验实施(跟我做) 46

    6.4.1 步骤一:创建文件 46

    6.4.2 步骤二:链接到外部

    样式文件 46

    6.4.3 步骤三:导航栏样式 47

    6.4.4 步骤四:左边栏 48

    6.4.5 步骤五:右边栏 50

    6.4.6 步骤六:底边栏 51

    第7章 JavaScript开发交互效果页面

    (网页计算器) 53

    7.1 实验目标 53

    7.2 实验任务 54

    7.3 设计思路 54

    7.4 实验实施(跟我做) 56

    7.4.1 步骤一:HTML布局 56

    7.4.2 步骤二:CSS添加样式 57

    7.4.3 步骤三:JavaScript计算 59

    7.4.4 步骤四:扩展功能

    (验证正则表达式) 62

    第8章 jQuery开发交互效果页面

    (手机号抽奖) 64

    8.1 实验目标 64

    8.2 实验任务 65

    8.3 设计思路 65

    8.4 实验实施(跟我做) 66

    8.4.1 步骤一:页面构建 66

    8.4.2 步骤二:下载并引用jQuery

    和jQuery UI 67

    8.4.3 步骤三:随机生成10个

    手机号码 67

    8.4.4 步骤四:抽奖 68

    8.4.5 步骤五:重置抽奖 68

    第9章 CSS3新特性开发页面样式

    (微博网站) 70

    9.1 实验目标 70

    9.2 实验任务 70

    9.3 设计思路 71

    9.4 实验实施(跟我做) 72

    9.4.1 步骤一:搭建页面主体

    结构 72

    9.4.2 步骤二:搭建页面主体

    内容 73

    9.4.3 步骤三:添加正文内容 73

    9.4.4 步骤四:美化微博话题 75

    9.4.5 步骤五:对微博话题的字体

    进行美化 76

    9.4.6 步骤六:对微博话题的

    背景色进行美化 77

    第10章 HTML标签美化页面

    (课程信息管理系统) 78

    10.1 实验目标 78

    10.2 实验任务 79

    10.3 设计思路 80

    10.4 实验实施(跟我做) 81

    10.4.1 步骤一:搭建页面主体结构

    和内容 81

    10.4.2 步骤二:创建form表单和

    搜索框 82

    10.4.3 步骤三:创建班级列表 82

    10.4.4 步骤四:制作课程表

    子页面 82

    10.4.5 步骤五:使用<iframe>标签

    导入表格 84

    10.4.6 步骤六:为课程添加超链接

    进入课程详情页面 85

    第11章 CSS3新特性开发动态页面样式

    (天气网) 86

    11.1 实验目标 86

    11.2 实验任务 87

    11.3 设计思路 87

    11.4 实验实施(跟我做) 88

    11.4.1 步骤一:创建HTML

    文件 88

    11.4.2 步骤二:搭建天气预报

    主体 88

    11.4.3 步骤三:用CSS美化 89

    11.4.4 步骤四:制作CSS3动画 91

    11.4.5 步骤五:使用自定义字体 92

    11.4.6 步骤六:使用弹性布局 92

    11.4.7 步骤七:使用多列布局 92

    第12章 HTML5制作移动端静态网页

    (房屋装饰网站) 94

    12.1 实验目标 94

    12.2 实验任务 95

    12.3 设计思路 95

    12.4 实验实施(跟我做) 97

    12.4.1 步骤一:适配移动端视口 97

    12.4.2 步骤二:搭建页面主体结构

    和内容 97

    12.4.3 步骤三:创建搜索栏 97

    12.4.4 步骤四:创建导航栏 98

    12.4.5 步骤五:使用<figure>标签

    创建房屋信息 98

    12.4.6 步骤六:创建音乐播放栏 99

    12.4.7 步骤七:页脚按钮 99

    12.4.8 步骤八:创建房屋页面 99

    第13章 CSS3新特性开发移动端页面

    样式(电商平台网站) 101

    13.1 实验目标 101

    13.2 实验任务 101

    13.3 设计思路 102

    13.4 实验实施(跟我做) 103

    13.4.1 步骤一:创建符合HTML5

    的HTML文件 103

    13.4.2 步骤二:使用viewport

    属性 103

    13.4.3 步骤三:搭建网页主体

    结构 103

    13.4.4 步骤四:用CSS3美化 104

    第14章 JavaScript开发移动端交互效果

    页面(项目提成计算器) 107

    14.1 实验目标 107

    14.2 实验任务 107

    14.3 设计思路 108

    14.4 实验实施(跟我做) 109

    14.4.1 步骤一:创建项目主体 109

    14.4.2 步骤二:用CSS美化 110

    14.4.3 步骤三:编写JavaScript 110

    第15章 HTML5美化移动端静态网页

    (视频网站) 113

    15.1 实验目标 113

    15.2 实验任务 113

    15.3 设计思路 114

    15.4 实验实施(跟我做) 115

    15.4.1 步骤一:搭建页面

    主体结构 115

    15.4.2 步骤二:添加页头

    部分内容 116

    15.4.3 步骤三:添加正文

    部分内容 116

    15.4.4 步骤四:添加页脚

    部分内容 118

    第16章 CSS3新特性美化移动端静态

    页面(学院门户网站) 119

    16.1 实验目标 119

    16.2 实验任务 119

    16.3 设计思路 120

    16.4 实验实施(跟我做) 120

    16.4.1 步骤一:搭建页面结构 120

    16.4.2 步骤二:添加页头Logo 121

    16.4.3 步骤三:正文内容样式 122

    16.4.4 步骤四:页脚内容效果 123

    第17章 综合实践(跳蚤市场) 125

    17.1 项目简介 125

    17.2 实践目标 125

    17.3 需求分析 126

    17.4 界面设计 127

    17.4.1 页面类型 127

    17.4.2 页面整体布局 127

    17.4.3 页头和页脚 128

    17.4.4 “注册”页面 128

    17.4.5 首页 128

    17.4.6 “用户中心”页面 129

    17.4.7 页面效果 129

    17.4.8 项目页面汇总 131

    17.5 第一阶段HTML5基础:

    创建工程 132

    17.5.1 工作任务 132

    17.5.2 设计思路 132

    17.5.3 实现(跟我做) 132

    17.6 第一阶段HTML5基础:

    首页 136

    17.6.1 工作任务 136

    17.6.2 设计思路 137

    17.6.3 实现(跟我做) 137

    17.7 第一阶段HTML5基础:

    注册和登录 139

    17.7.1 工作任务 139

    17.7.2 设计思路 139

    17.7.3 实现(跟我做) 140

    17.8 第一阶段HTML5基础:

    用户中心 142

    17.8.1 用户中心I 142

    17.8.2 用户中心Ⅱ 149

    17.9 第二阶段HTML5+CSS3+JS:

    商品管理 154

    17.9.1 发布商品 154

    17.9.2 修改商品信息 158

    17.9.3 删除商品 162

    17.9.4 商品分类列表 165

    17.9.5 搜索商品 170

    17.10 第二阶段HTML5+CSS3+JS:

    订单管理 175

    17.10.1 下订单 175

    17.10.2 支付 180

    17.10.3 查询订单 184

    17.11 第二阶段HTML5+CSS3+JS:

    留言管理 190

    17.11.1 工作任务 190

    17.11.2 设计思路 191

    17.11.3 实现(跟我做) 192

    17.12 第二阶段HTML5+CSS3+JS:

    系统管理 197

    17.12.1 工作任务 197

    17.12.2 设计思路 198

    17.12.3 实现(跟我做) 199

    17.13 第三阶段CSS样式进阶+jQuery:

    网站样式优化 204

    17.13.1 页头和页脚样式 204

    17.13.2 首页优化 213

    17.13.3 表单样式优化 223

    17.13.4 菜单样式优化 224

    17.13.5 表格样式优化 225

    17.14 第四阶段移动端页面HTML5+

    CSS3:移动端页面设计 227

    17.14.1 移动端首页设计 227

    17.14.2 移动端表单设计 232

    17.14.3 移动端列表设计 236

    17.14.4 自适应页面设计 241

    展开全文
  • WEB 前端开发实用案例教程 第六单元 商品网 菜单制作 网页菜单是网页构成的重要部分菜单应用是适应各种行业的用户 视觉操作体验方便用户触发请求信息传递的基本工具菜单效果反映 了项目的经营方针和宣传目标菜单既是...
  • WEB前端开发实用案例教程 第五单元 通讯录分组表 表格构建网页 常用表格对网页中元素定位将复杂的元素有条理的分布到网页各个位置当我们把表格的宽度定位固定像素值后还能保证网页布局不会随浏览器窗口的大小变化而...
  • WEB前端开发实用案例教程 第六单元 商品网 菜单制作 网页菜单是网页构成的重要部分菜单应用是适应各种行业的用户视觉操作体验方便用户触发请求信息传递的基本工具菜单效果反映了项目的经营方针和宣传目标菜单既是...
  • WEB前端开发实用案例教程 第七单元注册页面 Axure动态面板与表单在网页中的应用 表单在网页中的作用不可小视,应用表单可以收集来自用户的信息,表单通 常的用处包括网上调查网上订单和建立搜素界面等当用户在表单中...
  • Web 诞生到如今,Web 前端技术已经逐步成长为一个丰富且有活力的技术世界。随着互联网行业发展格局的频繁演进以及产品策略的不断调整,不同阶段的业务在技术选型、前端性能优化、用户交互体验上不断产生新的需求...
    百度Web前端开发实战案例解析


    从 Web 诞生到如今,Web 前端技术已经逐步成长为一个丰富且有活力的技术世界。随着互联网行业发展格局的频繁演进以及产品策略的不断调整,不同阶段的业务在技术选型、前端性能优化、用户交互体验上不断产生新的需求,不断地对 Web 前端技术提出新的要求。

    10 月 27 日,82 期百度技术沙龙,邀请了数位百度前端技术部 Web 前端资深研发工程师,从 Web 前端技术出发,通过五个主题,立足现在面向未来,由内到外地分享百度在搜索组件化的探索、搜索体验增强、开放 Web 速度优化及开放 Web 未来发展发面的技术沉淀和积累。

    搜索组件化探索与实践

    首先进行分享的是百度前端技术部资深研发工程师陈骁带来的《搜索组件化的探索与实践》。

    为什么搜索要做组件化?

    据陈骁介绍,最开始的百度搜索移动端的前端架构是从 PC 时代迁移过来,服务器端使用 Smarty 来渲染模版,实现前后端分离。前端使用 Zepto 来完成交互逻辑,但是它的扩展性比较有限,难以实现对 HTML、CSS 代码的组件化管理,随着移动端的交互形式越来越复杂,原本的方案出现了局限性。

    于是,组件化应运而生。组件化是把一些可复用的单元提取出来,通过对几个组件的管理,实现对整个搜索结果页样式的控制,提高开发的效率和横向团队整体升级的效率。

    目前百度已经有了非常多的组件化解决方案,包括 Lavas 和 Reac t。可以具体到组件语法、基础框架以及同构区块。

    如下图所示,组件语法包括四部分:

    • Template:组件代理结构
    • 浏览器端:组件前端逻辑
    • Style:前端样式
    • Config:同构逻辑


    百度Web前端开发实战案例解析


    前三部分基本能够覆盖组件的常用语法,而同构在服务器端和浏览器端都能执行,主要有 props、data、components、computed 等。

    那么这个组件代码怎么在线上跑起来呢?

    首先会在线下通过编译器,把它编译成 PHP、JavaScript 两份原码。PHP 的编译产物完全使用 PHP 的语法,可以在后端形成一个 Server Runtime,在这个过程中,也能够把 PHP 的编译产物渲染成字符串,通过网络传输到浏览器端。而在浏览器端运行时可以用编码产物 Javascript 的组件,渲染成可操作的 HTML 代理结构,包括它的事件和交互。

    其中的难点在于怎么把一个组件代码编译成在 PHP、在 JS 都能跑的组件代码。百度会做对于模板和一些表达设计的处理。例如,模板代码有一个文本节点,有一个自定义组件,在编译的过程中,会利用编译器把它转化成抽象语法树,形成树的结构,每个节点都有一些属性和信息,利用语法树的结构和属性信息,就可以通过代码生成器分别生成 PHP 和 JS 的代码。


    百度Web前端开发实战案例解析


    这里还有一个问题,为什么需要一个同构区块呢?这是因为同构区块可以很好控制服务器端能执行的代码,方便语法解析。另外,百度对同构代码块进行语法限制,以保证服务器端的稳定性,也可以更加方便解析成想要的 PHP 代码。

    通过改造,组件化渲染框架不仅可以使得效率提升,保证了体验一致性,而且进行了横向升级降低成本。

    性能优化

    针对服务器端的渲染性能,百度做了非常细致的优化:

    • 在框架层,对渲染流程进行了简化,添加了缓存;
    • 在基础组件层,对控制的简单组件进行编译优化;
    • 在业务层,提供先验工具、准入规范,线上监控和报警,并提供 a-nossr 指令。

    那么组件是如何在服务器端渲染成想要的 HTML 字符串呢?

    如下图所示,会经过以下步骤:首先,加载组件的配置,创建组件的实例。在实例的创建过程中,对这个组件所有的数据进行初始化,包括一些特征和计算属性,得到初始化状态以后,再渲染出虚拟 DOM 树,把整个组件节点数渲染成一个实例的形式,用虚拟 DOM 树渲染成 HTML 字符串。

    百度Web前端开发实战案例解析


    与此同时,百度搜索对整个渲染的过程进行了简化。在框架层,通过创建虚拟 DOM,减少了一次递归,也减少了在线上运行时的逻辑。在基础组件层,百度对横向团队能够完全控制的一些简单组件进行了优化。利用 HTML 编译器编译成语法树,语法树对它每一个 AST 节点进行优化,通过将 Tag 直接定义为普通的 DOM 节点的方法,生成最后想要的函数代码。

    百度Web前端开发实战案例解析


    框架层:渲染流程简化


    百度Web前端开发实战案例解析


    简单组件编译优化

    目前进展

    目前,百度提供搜索组件化的工具。比如搜索 Web 无障碍规划、搜索性能准入规范、搜索设计规范;服务方面包括性能监控、前后端异常监控等;运行方面提供 VSL 语音交互框架帮助开发者开发一些语音交互逻辑;工程方面提供搜索敏捷平台,帮助开发者直接完成联调、提测、上线;在应用方面,有卡片、图片搜索、咨询搜索、移动端的首页,还有一些独立的站,包括百度体育和百度招聘。

    百度Web前端开发实战案例解析


    搜索组件化技术全景图

    移动体验标准化建设

    第二个 Session 是由百度前端技术部资深前端工程师刘浪宇带来的《移动体验标准化建设》。

    极致的用户体验是 Web 产品所追求的,那么什么是好的用户体验,如何去量化用户体验做到好的体验呢?首先需要有一套清晰的体验指导标准,然后再去落地。

    移动体验指南

    移动体验指南是基于移动 Web 生态提出一套通用的体验指导规范,目的是更好地服务于用户及产品的系统,为广大用户提供优质的体验。从用户的体验层次、交互和移动 Web 现状,百度归纳出六个纬度:

    第一,快速的信息呈现。速度快慢直接影响用户对站点的体验评级,所以让主体内容快速呈现给用户才是优质的体验必需的。

    第二,设计交互层面强调一致性。一致的设计交互可以利用用户的学习经验,降低学习和使用的成本。

    第三,好产品需要做到让用户低成本、高效地完成所有交互操作,整体操作要清晰无阻,带给用户最流畅的体验。

    第四,内容强调优质阅读观感。站点的内容可读性、内容本身质量是否能够达到,都是优质的体验所必需的。

    第五,情感层面有两点,首先是愉悦的情感认知,其次是让用户对站点信任,页面是否安全、是否及时告知流量信息等等。

    第六,关于强健的场景适配,优秀的站点应当适合于不同的人群和宿主环境。

    移动体验检测平台

    有了体验指南,如何快速知道站点存在哪些问题?这就需要体验检测平台 Radar。

    Radar 的最底层是 Headless Chrome,百度通过协议接口可以非常快捷地操作这个浏览器。中间的运行是基于谷歌开源的一个网页工具 Lighthouse 。它主要有两个内容,第一是网页数据收集,通过数据分析获得数据,按照规则的需要,对于这些数据进行分析后输出想要的结果。第二,Radar 的核心是非常多的规则,主要分两类,一类是普通的,一类是交互的。

    刘浪宇以交互的规则为例,详细阐述了一个规则是如何实现的。如下图,交互的规则主要分为两部分,第一是场景识别,第二是交互分析。举一个比较简单的例子,当用户在页面看到一个输入框时,觉得点击可以直接输入是一个良好的体验。那么如何量化这个规则呢?首先是场景识别,找到在这个页面中看起来像评论输入框的元素。然后找一些特征,从海量数据里面标注、提取一些通用特征之后为这个场景建立特征库。之后再基于场景所需要的特征,进行网页结构化数据提取。

    百度Web前端开发实战案例解析


    Radar 规则架构(交互类规则为例)

    接下来这些场景元素就要进行交互分析,首先进行深度筛选然后进行交互操作。以模拟屏幕的点击举例,点击之前用户会看页面的变动,比如说 DOM 的变动、跳转的变动,然后对变动进行分析,看是否符合预期。

    基于 Custom Elements 标准组件化构建 Web 应用

    第三个主讲人是百度前端技术部资深前端工程师邹淼江,他现场分享了如何高效快速的构建一个体验良好的 Web 应用、基于 Custom Elements 标准的组件化设计、如何提升用户端体验和开发效率。

    首先看自定义标签,自定义标签在功能上逻辑上与 JavaBean 类似,都封装 Java 代码,是可重用的组件代码,并且允许开发人员为复杂的操作提供逻辑名称。另外,自定义标签具有⽀持⽆障碍、提高开发效率、评估性能、对 SEO 良好的特点。

    其中,如何使用自定义标签进行性能评估呢?百度提供了一套搜索引擎的验证工具。比如,符合某一种规则的 Custom Elements,给它标高分,为符合高性能标签。但如果使用 DIV 的方式,搜索引擎没办法知道布局是不是高性能,也没办法知道所对应的 JS 如何实现,如果有了 Custom Elements 的标准,就能清晰地知道这个页面想干什么。

    基于此,我们可以设想:如果完全使用这些 Custom Elements 语义化标签构建 Web 站点可行吗?

    这就需要引入组件化设计。其实目前存在的组件化设计都千篇一律,把一个页面的功能模块以组件树状的形式自由组合,堆积成一个功能的页面或者是模块,这就是组件的结构。具体要求:

    • 每⼀个 Custom Element 是⼀个组件
    • 组件内部实现相应的交互、功能和数据处理逻辑
    • 组件之间逻辑和样式是独⽴隔离的
    • 组件是可以通信的
    • 组件是可复⽤的

    Web Components 标准

    Web Components 是指通过一种标准化的非侵入的方式封装的一个组件。主要标准包括 Custom Elements,Shadow DOM,HTML Templates,HTML Imports 等多个维度的规范与实现。

    • Custom Elements 是提供一种方式让开发者可以自定义 HTML 元素,包括特定的组成,样式和行为。支持 Web Components 标准的浏览器会提供一系列 API 给开发者用于创建自定义的元素,或者扩展现有元素。
    • Shadow DOM 旨在提供一种更好地组织页面元素的方式,来为日趋复杂的页面应用提供强大支持,避免代码间的相互影响。开发者可利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
    • HTML Imports 是一种在 HTML 中引用以及复用其他的 HTML 文档的方式,可以简单理解为常见的模板中的 include 之类的作用。我们可以通过 HTML Import 的形式,直接将做的 Custom Elements 的标签放进 HTML 中进行渲染渲染。


    百度Web前端开发实战案例解析


    Web Components 兼容性

    搜索落地页体验技术及应用

    第四个主题由百度前端技术部前端工程师李兆明讲述。如何更快、更好的将各类搜索结果页面传递到用户端一直以来是百度搜索前端的核心关注点。基于此,李兆明分别从如何让落地页加载更快,如何让搜索结果页和落地页之间切换更加顺滑以及未来的新标准,介绍百度搜索落地页体验技术的探索。

    如何让落地页加载更快

    思路一:提前加载。通过 Resource Hint 提示浏览器预解析域名、建立预连接,甚至进行预渲染。若是不支持的浏览器,则可以通过 JavaScript 模拟一部分。

    思路二:抓取数据。通过开放平台提交数据,由百度来渲染。

    思路三:MIP / AMP。MIP 提供多重措施,让使用 MIP 技术的页面加载速度更上一层楼。例如,CDN 加速服务;使用 MIP 设计的网站没有任何可以阻塞渲染的脚本,所有脚本都在页面主体加载完成后才执行。此外,MIP 要求所有页面都是静态的,如果有需要实时更新的数据需要异步获取,这样设计节省了后端的渲染时间。

    如何把两个页面融合在一起?

    其实,无论有多少优化加载速度的手段,归根结底离不开页面跳转。但是,浏览器跳转相对来说不够平滑,用户体验不够好,能不能把前后两个页面融合到一起呢?

    答案当然是肯定的。李兆明在保证体验、保障安全及保持开放的基础上,讲解了百度前端搜索的解决方案:

    • 保证体验:通过 Iframe 加载页面;通过 PostMessage 等方法实现交互动效。
    • 保障安全:不允许使用外部脚本,需要封装组件审核;通过校验确保 HTML 符合规范。
    • 保持开放:通过 GitHub 追踪开发。

    展望新技术

    在未来,百度搜素将基于域名、Iframe 渲染问题,为开发者带来 Navigation Transition、Promotable Iframe、Portals 及 Web Packaging 新标准,带来最流畅的体验。

    Navigation Transition:页面切换的交互方式。解决了跨域问题,没有 Iframe 渲染的历史包袱。不过前一个页面依然不能控制后一个页面的加载、渲染。iframe 可以提前加载,但是 Navigation Transitions 一定要在用户切换的时候加载。

    Promotable Iframe:与 Iframe 相关,核心代码是 Promotable 的 API,只要调用 Promotable,就会调动页面的一小块,而后调动整个页面及内容。但是这种方法涉及一些生命周期的管理和 JS 的回收问题,是不够安全的实现,而且这样没有解决 CDN 的问题,依然需要改域名。

    Portals:传送门,将一个页面传送另一个页面。这个标准是 Promotable Iframe 的增强,引入了一个新的 HTML 标签 portal,这个标签用来替代 Iframe 显示一块网页,写法和 Iframe 类似。但是它比 Iframe 多一个功能,就是可以通过 “active” 方法激活它。与此同时, portal 的子文档会收到一个 portal zactive 事件,事件中可以拿到它的上级元素,这样又可以把上级元素当成一个 portal 插入回自己的文档流,使得页面切换回去成为可能。

    Web Packaging:解决了 CDN 跨越问题。这个标准包括三方面:签名、打包、加载。如下图,左边内容提供者是站长,缓存的 CDN 类比 MIP 的 CDN ,右边是访问用户,用户浏览我们百度搜索结果页的时候,通过 MIP 的 Cache CDN 提前把数据取过来,用户真正点击的时候,直接从刚才取回来的页面去加载它。由于内容本身是内容提供者提供的,所以他可以对于自己 URL 进行签名。有了这个签名且签名有效的时候,浏览器可以自己显示原始的网址,同时原始的网址可以和原来的服务器进行交互,像通过原网址打开的一样,解决了 CDN 跨域问题。

    百度Web前端开发实战案例解析


    如何通过 Lavas 快速构建 PWA 站点

    最后一个主题的讲师是百度前端技术部资深研发工程师王轶盛为大家介绍如何通过 Lavas 快速构建 PWA 站点。

    PWA

    PWA(Progress Web App)是 WEB 未来的发展方向。从体验上来说,PWA 接近原生 APP,通过 Manifest 技术允许用户快速打开站点并获得沉浸式的体验,通过 Service Worker 能够做到资源预加载和离线可用等从而提升性能和可用性;同时 PWA 又拥有 Web 站点的共同优势:免安装和自动更新。

    但与 Web 站点不同的是,PWA 又具有可靠、快速、黏性等特点:

    第一是可靠。在断网的情况下,PWA 可做到比较友好的离线提示,这个是 PWA 断网的最高级,叫断网可用。

    第二是快速。53% 的用户会放弃加载时间超过 3 秒的网站,越快的加载速度就有越少的用户流失。PWA 提供 Service Worker,确定哪些访问缓存、哪些访问网页,缩短加载时间。

    第三是黏性。黏性是指用户访问过一次,下一次访问是否麻烦。PWA 会用一个半秒的启动动画来保证浏览器首页启动的顺滑。另外,启动之后没有的地址栏、菜单栏,保证用户的沉浸式体验。

    从技术层面讲,PWA 有分为四部分:

    第一是 Service Worker 。定义预缓存、网络拦截和缓存策略。它本身是一个 Worker,有专门的语法,需要 CACHES API,需要注册及更新。

    第二是 Manifest 。这是一个 Json 文件,定义快速入口,启动动画。

    第三是 Web Push and Notification 。是服务器推送给客户端的主动通知。

    第四是 APP Shell 。这并不是新技术,但它是常用的 PWA 架构。简单来说,就是把一个 APP 分成了外壳和内容,用 Service Worker 把外壳缓存起来,将里面的页面进行跳转。

    通过 Lavas 搭建 PWA 站点

    Lavas 包括工具、文档以及对应的解决方案和建站模板,是一个开源的解决方案。Lavas 本身有两部分,Lavas cli 和 Lavas core,内部用 Vue + Vue Router + Vuex 搭建站点,内置两套模板 (basic & app-shell),支持传统模式 SPA 和 SSR 快速渲染,可以快速拥有 PWA 特性,灵活性强,配置简单,而且文档及时更新,内容完整。通过 Lavas 搭建 PWA 站点主要有八个步骤:

    • 准备环境 & 初始化项目。安装 Lavas cli,初始化项目,选择模板,安装依赖。
    百度Web前端开发实战案例解析


    • 创建新页面。
    百度Web前端开发实战案例解析


    • 添加链接。使用 <router-link>,注意和 Vue 保持一致,to 属性指明目标页面,支持字符串格式的地址,支持对象。然后启动调试服务器。
    百度Web前端开发实战案例解析


    • 和服务端通讯。安装 axios,引入 axios,向后端发送请求。
    百度Web前端开发实战案例解析


    • 使用 Vues 管理数据。
    • 创建 STORE,需要定义一些内容。把请求数据移动到 action 里面,获取成功后调用 commit 触发 mutation 去更改 state。
    • 在组件中,通过 store.dispatch 触发 action 获取数据,然后通过 mapState 把 state 和计算属性关联,最后通过计算属性在页面上使用。


    百度Web前端开发实战案例解析


    • 配置 Manifest 。Manifestt.json 定义了启动 URL,定义各种尺寸的 icon,定义动画配色和启动模式。
    百度Web前端开发实战案例解析


    • 配置 Service Worker。配置,指定模板位置、构建位置
    百度Web前端开发实战案例解析


    • 构建和上线。执行构建命令 > lavas build;启动生产环境 > cd dist,> lavas start。

    Lavas 技术原理

    Lavas 的技术原理主要有自动生成路由规则、Skeleton、App Shell。

    Vue Router 需要四个步骤做整件事情:第一步定义和引用组件,第二步把组件和路由联系起来,第三步是把刚刚联系起来的数据放到 Router 函数创建实例,第四是把 Router 放到 VUE 创建实例,结束 Vue 实例挂载就。

    经过改进, Router 不用自己定义页面级组件,可以认定只要在 Pages 目录中,那组件都是页面级的,从而可以实现自动化 Import,不需要每次写一大堆的代码。另外,绝大多数情况路由规则和组件名称是有对应关系的。自动生成路由规则映射,省去了列出映射关系的麻烦,也避免后期组件改名带来的维护成本。

    Skeleton 叫骨架屏,就是实际内容展现之前,有个大概内容给用户看,这样用户提前看到一些东西。这是 Loading 升级版,因为每个组件可以自定义样式、切换时机、列表等。

    Lavas 的 Skeleton 都可以用,实现思路是 Vue 的挂载点一般是个空的 DIV,在构建时将 Skeleton 的内容添加到挂载点中,Vue 挂载前清空 DIV 内的占位内容,挂载后渲染为实际内容,使用 SW 预缓存 HTML,访问时直接从缓存中获取 HTML,这样可以让用户看到占位的东西。

    App Shell,就是把一个 APP 分两部分,有外壳和内容,把外壳缓存起来,每打开页面先把外壳拿出来,然后再是内容渲染。App Shell 实现有两个步骤,第一是划分,告诉程序哪部分是外壳、哪部分是内容;第二是程序把外壳缓存起来。这需要实现两方面,第一是 SPA,首次请求服务器返回 Index.HTML,所有页面的渲染均由 JS 完成,只在挂载点内重新渲染,单页 Index.html 就是 Shell,使用 SW 预缓存 Index.html 即可。第二是 SSR,首次请求服务器返回给全部内容,后续页面的渲染由 JS 完成。

    Web 生态的发展就是互联网的发展,新技术的不断涌现和新场景的不断实现也让这个开放的生态得以持续繁荣。王轶盛表示,百度希望国内的开发者与站长能够多多参与到 PWA 项目中,共同建设和改善国内的 Web App 生态。

    展开全文
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权...小白为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧! 老规矩:转发+关注并私信小编:“资料”全部打包带走! 下面给大家简单介...

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/weixin_43793782/article/details/97308393
    小白为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧!

    老规矩:转发+关注并私信小编:“资料”全部打包带走!

    下面给大家简单介绍几个:

    小米官网:


    项目描述

    首先选择小米官网为第一个实战案例,是因为刚开始入门,有个参考点,另外站点比较偏向目前的卡片式设计,实现常见效果。目的为学者练习编写小米官网,熟悉div+css布局。学习资料的话可以加下web前端开发学习裙:960加上508再加上920自己去群里下载下。

    项目技术:

    HTML+CSS+Div布局

    迅雷官网:


    项目描述

    此站点特效较多,所以通过练习编写次站点,学生可以更多练习CSS3的新特性过渡与动画的实现,并且可以很好的练习div+css布局。

    项目技术:

    HTML5+CSS3新特性

    音乐播放器:


    项目描述

    本项目为音乐类项目,主要实现音乐首页展示,今日推荐类别,歌曲列表,歌曲播放及歌手列表和搜索功能。主要练习Vue的基础应用和组件如何设计。项目如何构架与测试。通过本项目可以让学者更快的熟悉Vue框架的使用。并且熟练的构建整个项目需求的架构。

    项目技术:

    Vue+Flex+Vue-Router+Webpack+ES6

    微信小程序:


    项目描述

    此阶段的内容为微信小程序开发,本阶段并非以基础知识点开始入手讲解,基于学者经历过以上的学习,在此时已经掌握项目框架,包含常见的一些实现规范,所以,这里我们将直接讲解项目,根据项目需求的效果使用微信小程序技术实现对应功能。

    项目技术:

    微信小程序

    Love:


    项目描述

    这是一款为女性专门打造的App,推荐更好的产品,产品包含化妆用品,护理用品,穿戴用品。功能包含浏览,推荐,活动,购物车与购买功能

    项目技术:

    HTML+CSS+JavaScript+第三方框架

    当然还有整套的web前端开发视频教程哦!


    第一阶段:

    HTML+CSS:

    HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

    JavaScript基础:

    Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

    JS基本特效:

    常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

    JS高级特征:

    正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

    JQuery:基础使用

    悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

    第二阶段:HTML5和移动Web开发

    HTML5:

    HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

    CSS3:

    CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

    Bootstrap:

    响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

    移动Web开发:

    跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

    第三阶段:HTTP服务和AJAX编程

    WEB服务器基础:

    服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

    PHP基础:

    PHP基础语法、使用PHP处理简单的GET或者POST请求、

    AJAX上篇:

    Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

    AJAX下篇:

    JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

    第四阶段:面向对象进阶

    面向对象终极篇:

    从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

    面向对象三大特征:

    继承性、多态性、封装性、接口。

    设计模式:

    面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

    第五阶段:封装一个属于自己的框架

    框架封装基础:

    事件流、冒泡、捕获、事件对象、事件框架、选择框架。

    框架封装中级:

    运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

    框架封装高级和补充:

    JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

    第六阶段:模块化组件开发

    面向组件编程:

    面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

    面向模块编程:

    AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。

    第七阶段:主流的流行框架

    Web开发工作流:

    GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

    MVC/MVVM/MVW框架:

    Angular.js、Backbone.js、Knockout/Ember。

    常用库:

    React.js、Vue.js、Zepto.js。

    第八阶段:HTML5原生移动应用开发

    Cordova:

    WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目,配置,编译,调试,部署发布)。

    Ionic:

    Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新,上拉加载,侧滑导航,选项卡)。

    React Native:

    React Native简介、React Native环境配置、创建项目,配置,编译,调试,部署发布、原生模块和UI组件、原生常用API。

    HTML5+:

    HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

    第九阶段: Node.js全栈开发:

    快速入门:

    Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程,非阻塞I/O、模块概念,模块管理工具、开发流程,调试,测试。

    核心模块和对象:

    全局对象global,process,console,util、事件驱动,事件发射器、加密解密,路径操作,序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

    Web开发基础:

    HTTP协议,请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

    快速开发框架:

    Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

    Node.js开发电子商务实战:

    需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车,订单结算、在线客服即时通讯模块。
    ————————————————
    版权声明:本文为CSDN博主「weixin_43793782」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_43793782/article/details/97308393

    展开全文
  • 11个web前端开发实战项目案例+源码!拿走就是了

    千次阅读 多人点赞 2020-12-25 17:18:45
    小白为大家收集了11个web前端开发

    小白为大家收集了11个web前端开发

    展开全文
  • html 和css 学习源码容翔实、结构清晰、循序渐进,基例实战紧密结合,既可作为HTML5+CSS3初学者的入门,也适合作为中高级用户对新技术作进一步学习的参考
  • web前端开发视频教程 Web前端开发工程师培训 零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚 课程分类:套餐推荐 适合人群:初级 课时数量:305课时 ...
  • 大工20春《Web前端网页制作》大作业答案
  • HTML5基础 熟悉HTML的基本结构 熟悉常用的HTML标记 会熟练使用HTML常用标记创建简单网页德才兼备 知行合一第2章 HTML5基础 2.1案例简单学校网站德才兼备 知行合一 2.1 案例简单学校网站综合利用HTML5标记制作简单...
  • 高校计算机相关专业的大学生 课程目标 本系列课程是专门为零基础学习Web前端开发的朋友准备的,老师将多年的教学经验与案例相结合,深入浅出,循序渐进,让大家轻松的进入Web开发行业。 本系列课程主要讲述Web开发...
  • Web前端开发实验作业 - 网页计算器 项目已上传至GitHub 仅供学习交流 需要自取 不妨点个start 谢谢 https://github.com/zhenggengqiong/Computer_CollegeHomeWork 实验内容及要求: 设计实现一个网页前端程序“网页...
  • 近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师、开发工程师、软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员。Web前端在IT行业真正受到重视大概也就六七年的时间。随着...
  • WEB前端开发实用案例教程 第九单元 旅游景点网站 Axure低保真原型设计与CSS模型结构的标准流 通过Axure制作低保真原型确定需求功能避免因客户需求变动返工制作效果是没有设计好的界面和功能模块有的只是一份需求理解...
  • web前端基础案例

    2018-09-30 16:10:32
    介绍了web前端技术基础html+css+js的运用教程,通过一个小案例学习
  • 网传有个技术团队做了个移动端的APP,发布上线时候称可以直接生成网页效果,于是有很多人一下子慌了。 最近就有不少人纷纷来问我,“现在手机APP可以直接生成网页了,都可以取代...1.对WEB前端开发工程师有误解 一个由
  • 前端开发是一个比较新的...其次,对前端的理解过于简单,它通常停留在网页的布局中,而不计算内容,并且与艺术家相同的风格设计(即几年前所谓的网页设计水平)。随着Web开发技术的创新和网页美观性和友好性的提高...
  • Web前端开发笔记(1)

    2021-02-27 03:37:17
    Web前端开发笔记(1) HTML基础(从了解到入门) 文章目录Web前端开发笔记(1)前言基础学习路线HTML目标:1.网页1.1.什么是网页?1.2 什么是 HTML1.3 网页的形成1.4 网页总结2. 常用浏览器2.1 常用浏览器2.2浏览器内核3....
  • web前端开发

    千次阅读 多人点赞 2019-10-30 09:53:48
    对很多人来说,创建布局是前端开发领域中最难啃的骨头之一。 你肯定经历过耗费数个小时,换着花样地尝试所有可能起作用的CSS属性、一遍遍地从StackOverflow上复制粘贴代码,寄希望于误打误撞地赌中那个能实现预期...
  • 零基础学web前端开发要怎么去学? 首先要学习的就是基础知识:html、css和JavaScript。HTML是内容,CSS是表现,JavaScript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习...
  • web前端网页模板.zip

    2019-06-10 16:31:59
    web前端网页模板,很好用的web前端js模板,有登录页面,权限管理页面
  • 本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求,详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理,由浅入深、循序渐进地引导读者快速...
  • 课程目标HTML和CSS是组成WEB前端开发最核心的技术,结合第一季的HTML课程,然后再来学习这套CSS课程,你将会获得更多的体验。启发式教学,每一节课程都有案例演示,让你从头到尾学习毫无压力。课程简介CSS主要用于对...
  • Web前端开发学习计划

    2021-06-09 14:35:09
    Web前端开拓是从网页制作演变而来的,名称上有很明显的时代特性。在互联网的演变进程傍边,网页制作是Web1.0时代的产品,其时网站的基本内容都是动态的,用户利用...Web前端开发学习计划 HTML+css HTML+css是we
  • web前端开发学习路线

    2020-05-07 07:11:35
    前几天有人问能不能说下web前端都需要学哪些技术,今天在这里说下web前端都需要学习的技术,本人从事前端工作有2年的经验,也算不上大牛,就个人所知的前端技术给大家做一个分享 第一阶段: HTML+CSS: HTML进阶、CSS...
  • 导语内容提要周文洁编著的《HTML5网页前端设计实战/Web前端开发技术丛书》是《HTML5网页前端设计》一书的配套实战项目教程,也可单独为具有一定Web前端基础的读者使用。本书的电子资源包括全套例题源代码可供读者...
  • Web前端开发第一季:HTML

    千人学习 2019-05-21 09:24:40
    课程目标 本系列课程是专门为零基础学习Web前端开发的朋友准备的,老师将多年的教学经验与案例相结合,深入浅出,循序渐进,让大家轻松的进入Web开发行业。 本系列课程主要讲述Web开发的前端技术:html、css、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,820
精华内容 5,128
关键字:

web前端开发网页制作案例