网页结构分析

一 前言

姓名：陈云

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.这辈子就不研究其他的方向了吗？当然要研究！但是在合适的时间再去研究。

二 前端行业介绍

描述：前端指的是通过显示设备把信息直接专递给用户端口，直接面向用户即前端

前景：

• 计算器互联网时代是大势所趋，对于信息的追求只会更高（更便于记录、更容易保存、更快传递、更生动的表现、更具有价值）如： 全息、 vr、xr、nft 、元宇宙、web3.0

• 目前所有行业都会有前端需求

发展：

​ 1991年：第一个web页面诞生，web1.0时代，静态web

​ 1994年：php出现实现了动态网页交互的效果，开启了web2.0时代。动态网页交互

​ 1999年：微软提出了ajax技术，前端异步请求技术。web2.0时代迎来了更好的发展

​ 2011年：第4代iphone发布。标志移动互联网开始普及，新技术倍出

三 课程体系

五个阶段：

第一阶段：网页核心实战（网页开发能力）

第二阶段：前后端分离开发（前端交互、后端接口设计）

第三阶段：Vuejs全家桶开发（Vue技术栈这一套内容，包括小程序、移动端app开发、数据可视化）

第四阶段：React全家桶开发（目前难度更大、需求相对少一点，工资比较高）。

第五阶段：Vue3学习+微前端框架（更多架构层面）

五阶段会将前面学习到的技术栈整合一起，形成一套完善的前端业务治理方案。

每个阶段都设置有里程碑,我们需要完成每个阶段的目标。

8.0课程：理论+实践结合。

上课的过程中老师不会一个一个demo来讲解内容。基于完整的项目，带者大家去设计、开发、踩坑。

讲解理论的时候，也会项目实战，也会有单独的内容梳理

四 前端开发工具

需要安装一些工具

typora：写笔记，写文档。上课的所有内容，老师都会用这个工具记录下来。

processOn：流程图、原型图在线工具

pxcook：像素大厨，这个前端开发网页的时候，会用到一个工具，测量、标注

vscode：代码编辑器，后续在开发过程中，几乎都用这个工具。

chrome：浏览器，这个浏览器是我们开发必备的（firefox）

五 软件的开发流程：

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

这里要先头脑风暴得出产品需要，通过processon绘制原型图

六 工具的介绍

1.typora笔记工具

做笔记我们经常都会用这个软件。这是一款轻便简洁的笔记软件。

相对于传统word、txt来记录笔记，不用严格的考虑格式，你只要按照规范来写，默认生成格式。

目前我们在各大网站上面，也支持typora这个工具生成的文档。生成文件格式为md格式

比如：CSDN上面发布博客，文档是md后缀结尾的文档，直接将笔记复制到CSDN上面，按照md文档的渲染格式，直接将笔记渲染为一篇博客。

(1)标题：

类似于你们word文档里面H1-H6、可以采用快捷键 ctrl+1、2、3、4、5、6

(2)列表：

有序列表：前面会默有数字。使用规则1.空格 内容自动创建有序列表

1. 学习HTML
2. 学习CSS
3. 学习JavaScript

无序列表：-空格内容，默认会在内容前面产生一个小圆点

• HTML布局
• HTML网页设计

(3)链接

我们有时候需要在一个笔记中，链接一张图片，或者链接一个网页地址

蜗牛官网地址

快捷键：ctrl+k 产生[显示的文字](跳转路径)

需要在笔记中引入图片，我们只需要将图片拖入到指定的位置。默认加载出来

(4)代码块

你需要在笔记中加入某一段代码。以后看笔记顺便梳理代码

快捷键：```回车

如果你想要代码格式能够正常渲染，在右下角选中代码类型。目前还没有学习代码。默认HTML

(5)引用板块

比如我需要在笔记中总结一段代码。我需要一个模块来写笔记

快捷键：>回车

上面的代是网页的基础结构。里面有基础的标签

不要升级typora,升级后需要付费

2.progresson原型图工具

这个工具是一个在线的工具,等会每个同学需要自己注册一个账号,可以直接用微信来登录.

这个工具作用:

1. 可以画流程图(后面再讲)
2. 可以设计低保真的原型图(草图)(重点)

一个完整的网页,就相当于是一份报纸.每个模块都是独立的.

每个板块首先需要设计出来,再填充内容

一个网页在设计的时候

1. 先划分整体结构,划分好了,以后网页才不会变形
2. 在填充网页里面的图片\文本\超链接\导航等等

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

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

地址为:https://www.processon.com/

门户网站:比如我们后面要项目实战网页

地址为:http://web.woniulab.com:8082/

开发步骤:

(1)新建一个项目

新建项目的时候,选中原型图.使用原型图来分析网页结构,先把结构梳理清楚,以后写代码才有思路

我们可以使用当前这个工具提供的一系列组件来完成页面整体布局

(2)左侧菜单栏里面拖动一个浏览器

(3)按照网页的结构,将网页划分为各个模块.

(4)填充内容

填充文本\图片\链接等等

3.pxcook测量工具

前端工程师:按照UI的原稿一比一的还原出来(网页).前端和后端数据交互

pxcook就是前端工程师在开发页面,我们可以使用这个工具来进行页面尺寸标注.

使用步骤:

(1)创建一个项目

(2)需要将原稿拖到项目中

(3)查看这个原稿

移动这个文档:按住空格+鼠标移动

放大缩小:工具右上角可以点击放大和缩小,也可以ctrl++\ctrl+-

(4) 工具栏使用

只能标注,平时用的比较多,主要你鼠标放任何一个模块上面,尺寸就默认显示出来.

4.vscode开发工具

目前市面上开发前端有很多工具可以选选择

webstrom：这个工具是一个比较强大的前端开发工具，这个工具集成了太多的插件，使用很消耗内存

HBuilder：这个工具在学习过程中也会接触到，以后我们开发移动端App、小程序的时候会用到这个工具

DW：这个工具10年以前用过，现在几乎不用，拖拽模块自动生成代码

subline：前几年比较流行的一款软件

vscode：微软开发的一款开源免费的编辑工具，不仅可以开发前端、还可以开发后端

在企业中目前应用最广泛的就是vscode

vscode是一个轻量级的开发工具，提供了基础的编辑器功能，但是有丰富的插件库，

你需要哪些插件来配合你开发，你就下载对应插件。

常用的插件目录：

1. Chinese汉化包：下载这个插件后需要重启vscode，以后采用中文来显示目录
2. auto rename tag：这个插件修改标签名字的时候，修改开发标签前面部分，自动更新结束标签
3. HTML CSS Support：在HTML文档中支持CSS代码提示
4. Image preview：可以显示图片预览，你在代码中就知道引入图片对不对
5. IntelliSense for CSS class names in HTML：可以在HTML中只能提示CSS代码的class name
6. Live Server：你可以将vscode当成一个服务器来启动项目，以后代码一旦修改，浏览器会自动更新
7. open in browser指定用哪个浏览器来运行你的项目
8. stylelint：编写css代码的时候，写错了提示
9. vscode-icons不同文件，有不同图标显示

开发步骤：

(1) 创建这个项目

在本地桌面创建一个文件夹，文件夹名字就是项目名字

(2)使用vscode打开这个项目

在这个项目里面使用vscode创建网页文件

(3)创建index.html编写代码

index.html中快速生成网页模块

！

html:5

5.chrome浏览器

谷歌浏览器(GoogleChrome)是一款由Google公司开发的网页浏览器，2019年，谷歌Chrome浏览器市场份额全球占有率达68.47%。

Chrome浏览器的优点

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

设置chrome为默认浏览器

作业:

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

http://web.woniulab.com:8082/index.html

http://web.woniulab.com:8082/paint.html

截图发到qq群里.

熟悉今天上课讲解的所有工具使用

能够划分多细节,就划分出来

文本不需要写.随便写点代替