Day01-网页结构分析

软件安装和课程入门

一 前言

姓名：陈云

TEL：18571593511

企业用人的两个标准

1.能干活,见到需求能反应出粗线条实施计划,起手实施后能自主预判和解决坑点,直至完成.

2.对某些敏感点理解较准确,有一定潜质做个性化封装和技术选型工作,应对突发状况,避免生产事故,未来的leader.

PBET的做法

PBET针对以上标准,采用实践+理论结合的学习方式,完美巧妙的契合企业需求

整个学习不仅仅是为了一个offer，而是要让大家在这个行业长久的发展下去。

学习方法

	1.笔记	我会手把手的写一个笔记给你们，不太建议上课的时候做笔记，上课跟着我的思路认真听，课后再做笔记。
	2.练习	
			a.随堂代码要多练（2-3遍）
			b.课后作业一定要认真完成
			c.无论如何，请坚持不懈的动手实验
			d.如果遇到，暂时对于一些思路不能理解的地方，先动手写，先写代码，量变会引起质变的
	3.沟通  
		a.问老师
		b.问同学
	4.录屏
	5.不要钻牛角尖
		有的同学会这样的感觉，一本书的上册没有全部看一遍，觉着学下册心里也没底儿，甚至非要把上册复习一遍才敢继续学习，
大胆的放弃一些东西吧，有失才有得，把自己有限的、宝贵的精力用在对于就业直接相关的地方，这才是最有效率的学习方式！
		a.陶渊明读书，叫做“不求甚解”，但他是大诗人。
		b.诸葛亮读书，总是“观其大略”，但他是大政治家。
		c.到了庐山，脉络形状扔在一边，盯着一棵棵小草、一粒粒石子的看，怎么样才能识得“真面目”？
		d.作为应用型的人才，是研究回字的n种写法还是抓紧时间向着主要应用的方向努力，我们应该以项目驱动自己的学习，当把握了技术的脉络之后再去补充细节的研究，是正途。
		e.这辈子就不研究其他的方向了吗？当然要研究！但是在合适的时间再去研究。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二 前端行业介绍

描述：前端指的是人机交互过程中的界面

前景：

• web1.0 网站： 只可以看的网站，新浪、搜狐、网易
• web2.0 网站、APP： 可以看也可以发布： 百度贴吧、豆瓣、朋友圈、天涯、知乎、b站、斗鱼、抖音
• web3.0 （去中心化） 元宇宙、区块链、cbdc中国数字人民币

三 课程体系

第一阶段:(网页布局实战) HTML CSS JavaScript

​ 蜗牛家居(贯穿项目) 蜗牛影城(阶段项目)

第二阶段:(前后端分离开发,前端显示页面,后端提供数据接口) H5移动端开发 CSS3 JavaScript高级 webpack NodeJS mongodb

​ 蜗牛影城H5移动端(贯穿项目) 在线考试系统(阶段项目)

第三阶段:Vue2全家桶 小程序开发,移动端app开发,大数据可视化等

第四阶段:TS React

第五阶段:Vue3 微前端

四 前端开发工具

chrome：浏览器

pxcook：像素大厨

typora：笔记软件。

vscode：开发软件。

processOn：流程图、原型图在线工具 https://www.processon.com/i/5f2ceff01e085366ab149d97

五 软件的开发流程：

产品经理
项目经理
项目组长
	UI设计
	前端开发人员
	后端开发人员
	测试人员
	运维人员
1
2
3
4
5
6
7
8

1. 产品经理：需求分析——》编写需求文档——》原型图
2. UI设计师：根据原型图设计出设计原稿（psd、xd）
3. 开发人员：前端、后端、测试等，一般情况下三种工种都会同时进行开发。
   1. 测试：编写测试用例，编写自动化的测试脚本，对功能进行测试
   2. 后端：负责项目的业务逻辑，对数据的处理，给前端人员提供数据的接口。
   3. 前端：根据UI提供的原稿设计网页，实现页面的动态交互，根据后端提供的接口进行数据的动态渲染。
4. 运维人员：网络搭建、服务器环境配置、项目的线上维护

六 工具的介绍

1.Typora笔记工具

​ 标题快捷键 Ctrl + 1/2/3/4

2.chrome浏览器

• 首先是速度快，启动速度、载入网页都相当迅速，这是最大的优点。
• 其次是界面简洁，外观清爽。
• 第三是稳定性好，兼容性强。
• 第四个突出的特点是丰富而强大的扩展

设置chrome为默认浏览器

3.pxcook(像素大厨)测量工具

移动:	空格键+鼠标左键
缩放: Alt+滚轮
标注:
	距离标注
	颜色标注
1
2
3
4
5

4.progresson原型图工具

今天先把自己当成产品经理.

拿到需求,需要设计草图,分析出这个页面应该如何设计.

地址为:https://www.processon.com/i/5f2ceff01e085366ab149d97

蜗牛家居首页:http://web.woniulab.com:8082/

七 案例

作业:

布置两个页面.你们需要使用prosson将这两个页面结构划分出来.

1.绘制 墙式壁挂 原型图 http://web.woniulab.com:8082/paint.html

2.自己去百度一个网页,绘制该网页的原型图

预习

​ 1.安装vscode

​ 2.预习第二天的知识点

​

​