1
00:00:13,950 --> 00:00:17,168
这部分我们就开始学习web前端开发

2
00:00:19,525 --> 00:00:23,685
首先我们来了解一下什么是web前端开发

3
00:00:24,050 --> 00:00:27,410
这里面的web就是指web系统

4
00:00:30,191 --> 00:00:33,951
web系统其实就是以网站形式呈现出来

5
00:00:34,199 --> 00:00:36,940
用户可以通过浏览器来访问

6
00:00:37,135 --> 00:00:40,335
可以完成一定功能的这样的系统

7
00:00:43,121 --> 00:00:45,521
平常我们接触过很多web系统

8
00:00:45,521 --> 00:00:47,662
比如说我们要购物的话

9
00:00:47,662 --> 00:00:50,462
肯定会想到登录到电商网站上

10
00:00:50,686 --> 00:00:52,846
这个就是一种web系统

11
00:00:54,925 --> 00:00:57,737
还有如果我们要浏览新闻

12
00:00:57,976 --> 00:01:01,496
我们会登录到一些综合门户网站上

13
00:01:01,621 --> 00:01:03,301
比如说新浪 搜狐

14
00:01:03,466 --> 00:01:05,386
这也是一种web系统

15
00:01:07,270 --> 00:01:10,002
还有平常我们会用到一些管理系统

16
00:01:10,303 --> 00:01:11,829
公司的管理系统

17
00:01:11,997 --> 00:01:15,625
学生在学校内部也会遇到一些管理系统

18
00:01:15,749 --> 00:01:17,509
比如说教务系统

19
00:01:17,629 --> 00:01:19,469
学生选课系统等等

20
00:01:19,713 --> 00:01:22,913
那么所有这些都是各种各样的web系统

21
00:01:23,092 --> 00:01:24,475
它有一定的功能

22
00:01:24,635 --> 00:01:27,035
而且它是一个网站的形式

23
00:01:28,404 --> 00:01:30,964
大家可以进一步的思考一下

24
00:01:31,100 --> 00:01:33,660
还接触过哪些web系统

25
00:01:33,814 --> 00:01:36,714
这些web系统可以完成哪些功能

26
00:01:37,850 --> 00:01:40,182
那么有了web系统的概念之后

27
00:01:40,500 --> 00:01:44,482
我们来看一下web系统从开发人员的角度

28
00:01:44,482 --> 00:01:47,842
它分为前端和后端两个部分

29
00:01:48,754 --> 00:01:50,274
前端是指什么

30
00:01:50,527 --> 00:01:54,527
前端是网页上为用户呈现的部分

31
00:01:54,625 --> 00:01:57,090
也就是用户可以接触到的部分

32
00:01:57,330 --> 00:02:00,478
而后端用户是触摸不到的

33
00:02:00,762 --> 00:02:04,293
后端的作用是跟数据库进行交互

34
00:02:04,478 --> 00:02:07,466
完成数据存取功能的部分

35
00:02:07,972 --> 00:02:10,404
我们知道对于一个系统来说

36
00:02:10,579 --> 00:02:11,821
它里面的数据

37
00:02:11,963 --> 00:02:15,963
其实都存储在一个叫数据库的地方

38
00:02:16,796 --> 00:02:18,636
下面我们举例来看一下

39
00:02:18,774 --> 00:02:20,166
什么是web前端

40
00:02:20,257 --> 00:02:21,537
什么是web后端

41
00:02:22,325 --> 00:02:24,220
比如说现在有一个用户

42
00:02:24,500 --> 00:02:27,236
他要浏览自己的订单信息

43
00:02:27,550 --> 00:02:29,070
当他登录之后

44
00:02:29,500 --> 00:02:35,235
就由页面的后端来进行数据库的交互

45
00:02:35,728 --> 00:02:39,276
网页的后端它负责的功能就是

46
00:02:39,524 --> 00:02:44,244
在数据库里面查找到这个用户的订单信息

47
00:02:44,429 --> 00:02:46,989
比如说数据库里它保存的是

48
00:02:46,989 --> 00:02:48,909
所有用户的订单信息

49
00:02:49,173 --> 00:02:52,373
后端找到这个用户的订单信息之后

50
00:02:52,534 --> 00:02:54,958
将它返回到前端

51
00:02:55,284 --> 00:03:00,445
由前端来完成这个用户订单信息的一个呈现

52
00:03:00,889 --> 00:03:03,691
可以以这种表格的形式呈现

53
00:03:03,872 --> 00:03:06,352
或者以其他的形式来呈现

54
00:03:06,520 --> 00:03:09,400
这个是前端所负责的功能

55
00:03:10,254 --> 00:03:13,783
这个就是web系统的前端它的概念

56
00:03:15,859 --> 00:03:18,049
我们再思考一个问题

57
00:03:18,448 --> 00:03:20,481
你所用到的这个web系统

58
00:03:20,639 --> 00:03:22,616
它的前端负责什么

59
00:03:22,883 --> 00:03:24,963
后端又负责什么功能

60
00:03:26,600 --> 00:03:29,301
有了web系统前端的概念之后

61
00:03:29,301 --> 00:03:33,600
我们来看一下什么是web系统前端的开发

62
00:03:33,900 --> 00:03:37,859
这里面前端开发就是指要编写一些代码

63
00:03:39,107 --> 00:03:41,386
这个时候我们可能会想到

64
00:03:41,661 --> 00:03:45,269
既然web系统它是网站形式呈现的

65
00:03:45,430 --> 00:03:48,126
而前端又是网页形式呈现的

66
00:03:48,295 --> 00:03:50,769
这个web前端开发

67
00:03:50,973 --> 00:03:54,186
跟原来我们谈到的一些基本的概念

68
00:03:54,334 --> 00:03:57,934
比如说网站设计或者是网页设计

69
00:03:58,139 --> 00:04:00,459
又有什么样的区别和联系呢？

70
00:04:00,933 --> 00:04:02,563
其实web前端开发

71
00:04:02,839 --> 00:04:05,799
它是网站设计的一个组成部分

72
00:04:06,369 --> 00:04:08,392
随着web技术的一个发展

73
00:04:08,657 --> 00:04:12,153
其实网站设计被分成很多个部分

74
00:04:12,364 --> 00:04:15,164
不同的人员来负责某一个部分

75
00:04:15,362 --> 00:04:20,614
比如说网站架构师首先按照用户的需求

76
00:04:20,816 --> 00:04:23,605
将网站的整个架构设计出来

77
00:04:24,353 --> 00:04:27,261
比如说网站要包括首页

78
00:04:27,590 --> 00:04:30,123
然后要包括一些版块

79
00:04:30,277 --> 00:04:32,682
每个版块负责不同的功能

80
00:04:32,911 --> 00:04:36,634
当然每个版块下面又包含一些网页

81
00:04:37,283 --> 00:04:40,350
这个就是网站架构师负责的工作

82
00:04:40,644 --> 00:04:43,340
那么有了网站的整体结构之后

83
00:04:45,122 --> 00:04:47,002
有网页美工人员

84
00:04:47,162 --> 00:04:50,792
他会将每个页面设计出来一个效果图

85
00:04:51,525 --> 00:04:54,811
这个效果图大家可以想象一下

86
00:04:54,931 --> 00:04:56,771
类似于我们要装修

87
00:04:56,997 --> 00:05:00,421
装修公司会给我们出一个装修的效果图

88
00:05:00,571 --> 00:05:01,741
是一样的道理

89
00:05:01,981 --> 00:05:05,041
这个是效果图要得到用户的一个确认

90
00:05:05,245 --> 00:05:06,966
我要的就是这种效果

91
00:05:07,134 --> 00:05:07,895
那么之后

92
00:05:07,977 --> 00:05:11,790
施工人员才会按照效果图的效果来进行施工

93
00:05:12,109 --> 00:05:13,694
对于网页来说

94
00:05:13,919 --> 00:05:16,527
当美工人员出了效果图之后

95
00:05:18,317 --> 00:05:24,364
前端开发人员将效果图这样的图片转换成代码

96
00:05:24,862 --> 00:05:29,492
也就是通过编写代码的方式形成一个网页文件

97
00:05:29,705 --> 00:05:31,047
而这个网页文件

98
00:05:31,150 --> 00:05:35,168
就是可以被浏览器解析和识别的网页文件

99
00:05:35,336 --> 00:05:39,399
这样用户就可以浏览到这个文件里面的内容了

100
00:05:39,611 --> 00:05:41,979
也就是可以浏览到整个网页了

101
00:05:42,925 --> 00:05:44,840
我们以百度为例

102
00:05:45,293 --> 00:05:46,813
比如说美工人员

103
00:05:46,813 --> 00:05:49,933
给我们出了一个百度首页的效果图

104
00:05:51,093 --> 00:05:55,749
那么前端开发人员就可以将效果图的效果

105
00:05:55,962 --> 00:06:00,442
通过编写代码的方式来将它编写出来

106
00:06:00,609 --> 00:06:03,649
这个就是网页文件的源代码

107
00:06:03,891 --> 00:06:07,971
所以我们也可以把这个文件称为网页的源文件

108
00:06:08,975 --> 00:06:12,650
下面我们举个例子打开浏览器来看一下

109
00:06:12,800 --> 00:06:17,200
其实所有的网页它都对应着这样的源代码文件

110
00:06:18,644 --> 00:06:23,183
这个文件是按照一定的技术标准来形成的

111
00:06:23,414 --> 00:06:27,891
所以浏览器是可以将这个文件的内容解析出来

112
00:06:28,065 --> 00:06:30,851
然后以网页的形式呈现出来

113
00:06:30,987 --> 00:06:35,811
大家看到的就是百度的一个首页它的效果

114
00:06:36,181 --> 00:06:39,571
所以前端开发人员通过编写代码

115
00:06:39,789 --> 00:06:42,211
也就是通过web的前端开发

116
00:06:42,736 --> 00:06:44,366
将一个效果图可以转换为

117
00:06:44,459 --> 00:06:48,691
可以转换为浏览器识别的解析的这样的一个网页

118
00:06:48,872 --> 00:06:51,339
就是前端开发人员的工作

119
00:06:51,621 --> 00:06:54,371
当然还有很多其他的后续工作

120
00:06:54,729 --> 00:06:56,291
比如说后端人员

121
00:06:56,500 --> 00:06:59,731
它会进行后端部分的一个开发

122
00:07:02,650 --> 00:07:03,900
总结一下

123
00:07:03,900 --> 00:07:07,500
前面我们涉及到的知识点就这些了

124
00:07:07,500 --> 00:07:09,922
我们介绍了什么是web

125
00:07:09,922 --> 00:07:11,906
web指的就是web系统

126
00:07:11,906 --> 00:07:15,486
是以网站形式呈现出来的这样的系统

127
00:07:15,486 --> 00:07:17,300
它具有一定的功能

128
00:07:17,375 --> 00:07:18,950
什么是前端

129
00:07:19,125 --> 00:07:21,450
是以网页形式呈现出来的

130
00:07:21,550 --> 00:07:23,325
用户接触到的部分

131
00:07:23,425 --> 00:07:24,950
什么是开发

132
00:07:25,125 --> 00:07:27,950
也就是我们通过编写代码的方式

133
00:07:28,075 --> 00:07:31,125
将整个网页的源文件写出来

134
00:07:31,125 --> 00:07:33,300
让浏览器可以解读

135
00:07:33,600 --> 00:07:36,475
这个就是web前端开发的概念

136
00:07:51,256 --> 00:07:56,122
总结一下前面我们涉及到的知识点就这些了

137
00:07:56,319 --> 00:07:58,692
我们介绍了什么是web

138
00:07:58,831 --> 00:08:00,595
web就是指的web系统

139
00:08:00,869 --> 00:08:03,992
是以网站形式呈现出来的这样的系统

140
00:08:04,408 --> 00:08:05,811
它具有一定的功能

141
00:08:06,151 --> 00:08:07,589
什么是前端

142
00:08:07,797 --> 00:08:11,985
是以网页形式呈现出来的用户接触到的部分

143
00:08:12,277 --> 00:08:13,709
什么是开发

144
00:08:13,900 --> 00:08:16,642
也就是我们通过编写代码的方式

145
00:08:16,890 --> 00:08:19,858
将整个网页的源文件写出来

146
00:08:20,077 --> 00:08:22,144
让浏览器可以解读

147
00:08:22,300 --> 00:08:25,204