1
00:00:00,390 --> 00:00:05,960
Bem-vindo alguns de nós, o vídeo que obtivemos, o aplicativo de blog criado criou nosso modelo de blog e adicionamos o

2
00:00:06,210 --> 00:00:07,540
modelo de índice neste vídeo.

3
00:00:07,560 --> 00:00:10,070
Na verdade, ainda não vamos adicionar novas rotas.

4
00:00:10,090 --> 00:00:13,590
Isso será muito rápido, mas queremos adicionar nosso cabeçalho e rodapé Parshall's.

5
00:00:13,680 --> 00:00:16,030
E então eu quero incluir UI semântica também.

6
00:00:16,040 --> 00:00:18,980
E, finalmente, vamos adicionar uma barra de navegação realmente simples no topo.

7
00:00:19,380 --> 00:00:23,990
Então, vamos começar, queremos criar nosso cabeçalho e rodapé que Ejay como arquivos.

8
00:00:24,660 --> 00:00:26,810
E isso deveria estar dentro, se os diretórios exibidos.

9
00:00:26,820 --> 00:00:34,200
Então, vamos fazer uma barra de seleção de diretório. Por favor, clique em Parshall e toque em exibições. Barra de Parshall. Heter que Ejay nós

10
00:00:34,200 --> 00:00:40,990
e, em seguida, toque as vistas, barra de Parshall rodapé E. J. Ótimo.

11
00:00:41,430 --> 00:00:42,060
Agora vamos abrir esses.

12
00:00:42,060 --> 00:00:45,990
Vamos começar com o cabeçalho.

13
00:00:46,290 --> 00:00:47,960
E por que o esqueleto básico tão HD foi um título de cabeça de metal.

14
00:00:48,570 --> 00:00:54,990
Vamos chamá-lo de aplicativo de blog e então precisamos do nosso corpo assim e vamos mudar isso

15
00:00:55,470 --> 00:01:02,540
para o rodapé para que possamos cortar isso de vez em quando para que possamos saber que está funcionando.

16
00:01:02,790 --> 00:01:07,010
que em todas as páginas saberemos que o fizemos corretamente.

17
00:01:07,140 --> 00:01:14,310
Vamos adicionar apenas um parágrafo no topo que diz do arquivo de cabeçalho e se vemos

18
00:01:14,310 --> 00:01:16,710
Agora vamos abrir o rodapé, colar isso e podemos fazer

19
00:01:16,710 --> 00:01:18,060
o mesmo de salvar o rodapé.

20
00:01:22,980 --> 00:01:30,110
Agora precisamos vincular isso e vamos fazê-lo em nosso índice para começar.

21
00:01:30,450 --> 00:01:33,890
Então, no topo, precisamos ter nossa inclusão e nosso caminho é que estamos em vez de usar no arquivo de índice.

22
00:01:34,140 --> 00:01:42,360
Então, nós só queremos um slash de ponto slash slash cabeçalho.

23
00:01:42,780 --> 00:01:47,780
E então a mesma coisa aqui, a barra de Parshall para isso.

24
00:01:48,240 --> 00:01:53,280
Vamos testá-lo sem nenhum problema até agora e obtemos do arquivo de cabeçalho do pé ou cinco.

25
00:01:53,700 --> 00:02:02,130
Ótimo.

26
00:02:02,430 --> 00:02:02,990
Agora vamos adicionar UI semântica.

27
00:02:03,180 --> 00:02:05,530
Então, eu tenho esse site semântico de UI, abre a Dasch semântica com ponto com.

28
00:02:05,880 --> 00:02:10,590
E, assim como o bootstrap, podemos baixar os arquivos ou podemos incluir um CDN semântico UI CDN.

29
00:02:10,620 --> 00:02:18,080
Basta clicar neste primeiro exemplo e você notará que

30
00:02:18,530 --> 00:02:23,790
há muitos arquivos diferentes que podemos escolher.

31
00:02:23,790 --> 00:02:24,630
você quer é

32
00:02:24,810 --> 00:02:30,120
depois da nossa seção ou você quer apenas os formulários, você pode apenas tomar essa barra de componente componente única formada.

33
00:02:30,300 --> 00:02:37,200
E isso porque a forma como a UI semântica está organizada da maneira que foi projetada é que, ao contrário do bootstrap, se tudo o que

34
00:02:37,560 --> 00:02:39,000
SS Então você não precisa de tudo

35
00:02:39,000 --> 00:02:43,770
o que é uma das críticas do bootstrap é se você quiser apenas uma pequena peça, você ainda precisa levar a biblioteca inteira.

36
00:02:43,770 --> 00:02:46,510
Mas queremos toda a biblioteca.

37
00:02:46,770 --> 00:02:48,420
Então, se você se deslocar

38
00:02:48,420 --> 00:02:55,920
para baixo em todos esses idiomas, você quer aquele que diga semântico que o CDN que, se você apenas fizer uma pesquisa ou

39
00:02:55,920 --> 00:03:04,190
uma semântica, conseguiu reavaliar o que está aqui mesmo, é difícil de encontrar se você não sabe ou está procurando, mas basta fazer uma pesquisa.

40
00:03:04,190 --> 00:03:05,920
Na verdade, não demoro uma versão minuciosa para tornar as coisas mais rápidas.

41
00:03:06,000 --> 00:03:09,320
Então, é semântico que os homens vejam avaliar

42
00:03:09,360 --> 00:03:16,950
e nós copiamos o seu Erl e nós vamos colocá-lo acima em nosso arquivo de cabeçalho dentro da cabeça.

43
00:03:17,340 --> 00:03:20,040
É uma marca de comprimento.

44
00:03:20,490 --> 00:03:22,300
E queremos que seja um link e, em seguida, a referência é igual a essa.

45
00:03:22,950 --> 00:03:29,030
Sim Sim.

46
00:03:29,120 --> 00:03:30,260
E também devemos adicionar o tipo de folha de estilo rel igual à barra de texto.

47
00:03:30,420 --> 00:03:34,900
C Ss Então agora nós salvamos e reiniciamos o servidor novamente.

48
00:03:34,940 --> 00:03:40,500
mudanças, assim como quando instalamos o bootstrap, a fonte muda um pouco.

49
00:03:41,640 --> 00:03:47,160
Dê uma olhada na nossa página inicial, você verá algumas pequenas

50
00:03:47,250 --> 00:03:49,070
ESTÁ BEM.

51
00:03:49,560 --> 00:03:49,830
Então,

52
00:03:49,830 --> 00:03:57,720
isso significa que estamos funcionando, vamos nos livrar de nossos parágrafos no cabeçalho e no rodapé e, em vez disso, vamos adicionar uma barra de navegação simples na fila.

53
00:03:57,870 --> 00:04:01,180
Agora, é claro, chamamos de menus.

54
00:04:01,230 --> 00:04:03,740
Então, se nós vamos aqui,

55
00:04:03,990 --> 00:04:12,810
clique no menu todos os componentes diferentes e queremos encontrar o menu que está no menu da coleção.

56
00:04:12,810 --> 00:04:16,170
Você pode ver que existem alguns tipos diferentes de menus.

57
00:04:16,170 --> 00:04:18,630
Há um menu que é o que você vê aqui.

58
00:04:18,860 --> 00:04:22,190
Há um menu Poynting que existe uma tradução em texto tabular.

59
00:04:22,500 --> 00:04:32,090
E há um pouco mais, tudo o que precisamos, é fazer com que o

60
00:04:32,470 --> 00:04:40,450
topo do nosso corpo seja um div e vamos conseguir isso corretamente.

61
00:04:40,590 --> 00:04:43,170
Kate faz a classe igual a você.

62
00:04:43,170 --> 00:04:46,340
Eu reparei e vamos fazer um menu invertido que apenas muda a cor, como no bootstrapped.

63
00:04:46,340 --> 00:04:52,170
Você poderia dizer em verso e então dentro de lá precisamos de outra div.

64
00:04:52,170 --> 00:04:57,410
E este terá classe igual a seu recipiente, que é como um recipiente com bootstrapped.

65
00:04:58,020 --> 00:05:03,830
E, em seguida, em vez de lá, eu vou ter outro div e este terá classe igual ao item Hetter.

66
00:05:04,260 --> 00:05:10,030
E isso é como a marca da barra de navegação no bootstrap.

67
00:05:10,320 --> 00:05:13,550
Então, tudo o que queremos, blogue o blog ou o que quisermos que nossa aplicação seja chamada.

68
00:05:13,560 --> 00:05:18,920
E então, depois disso, adicionaremos uma marca de âncora para a página inicial

69
00:05:19,050 --> 00:05:28,830
e nós vamos chamá-lo de casa e nós adicionaremos na classe igual a item e então faremos a mesma coisa, exceto em vez de

70
00:05:28,860 --> 00:05:37,140
cortar isso. Ir para barramentos de barras cortar novo que ainda não existe e será novo ou novo Blog frio.

71
00:05:37,140 --> 00:05:45,350
Esse será o texto que vemos.

72
00:05:45,410 --> 00:05:47,470
OK, então você não está fixo no menu invertido.

73
00:05:48,350 --> 00:05:51,760
Um recipiente em vez disso.

74
00:05:51,900 --> 00:05:53,460
E, então, dentro do recipiente, na verdade, devemos ter todo esse pequeno erro da minha parte.

75
00:05:53,670 --> 00:06:00,010
Então, queremos que esteja lá também.

76
00:06:00,060 --> 00:06:02,670
Está tudo no recipiente.

77
00:06:03,360 --> 00:06:04,850
E então temos o nosso cabeçalho e, em seguida, temos dois itens que estão ancorados Tex.

78
00:06:05,160 --> 00:06:10,250
Vamos dar uma olhada nisso agora.

79
00:06:10,260 --> 00:06:12,200
E nós recebemos nossa barra de matemática simples.

80
00:06:13,500 --> 00:06:15,200
Sim, temos um problema aqui com algum espaçamento.

81
00:06:15,520 --> 00:06:17,720
Nós lidaremos com isso em apenas um momento, mas temos um agora, onde funciona bem.

82
00:06:17,730 --> 00:06:21,450
Vamos adicionar um ícone simples que em semântica Vocês são apenas chamados de ícones.

83
00:06:21,660 --> 00:06:27,450
Há um monte deles no que eu usei.

84
00:06:28,070 --> 00:06:30,690
É chamado de Código.

85
00:06:30,720 --> 00:06:32,960
Tente encontrá-lo aqui e faça apenas uma pesquisa.

86
00:06:33,120 --> 00:06:35,500
Aí está.

87
00:06:35,550 --> 00:06:36,310
Mas sinta-se livre para escolher o seu próprio caso queira comentar.

88
00:06:36,480 --> 00:06:39,760
A idéia era que era um blog baseado em código, mas pode haver outra coisa.

89
00:06:39,810 --> 00:06:43,560
Eu também gosto da idéia.

90
00:06:43,560 --> 00:06:44,900
De qualquer forma, há um monte de eles.

91
00:06:44,920 --> 00:06:46,190
O que é bom é que eles também têm um monte de ícones para empresas que são úteis.

92
00:06:46,350 --> 00:06:51,980
No fundo eu acho que eles os têm e nós vamos para toneladas de

93
00:06:52,020 --> 00:06:56,610
marcas diferentes e empresas comuns que você teria ligado em sua aplicação.

94
00:06:56,610 --> 00:06:59,100
ESTÁ BEM.

95
00:06:59,430 --> 00:07:00,070
Então, é um código para o ícone e vou adicionar isso logo ao lado do cabeçalho do blog.

96
00:07:00,300 --> 00:07:07,160
Então, aqui, teve seu item e tudo o que precisamos é uma marca de olho.

97
00:07:07,470 --> 00:07:11,190
E precisa ter uma classe de código e um ícone.

98
00:07:11,670 --> 00:07:17,400
Então, realmente simples, apenas o nome do ícone e,

99
00:07:17,400 --> 00:07:26,040
em seguida, o ícone de classe economizar a atualização e temos um pequeno código.

100
00:07:26,040 --> 00:07:26,290
Eu venho lá.

101
00:07:26,280 --> 00:07:27,340
Vamos fazer uma pequena mudança, que é tornar este ícone um pouco maior.

102
00:07:27,660 --> 00:07:31,830
Para fazer isso, podemos escrever uma etiqueta de estilo

103
00:07:31,860 --> 00:07:38,730
aqui, mas ao invés de fazer isso, vamos usar o diretório público que configuramos.

104
00:07:38,730 --> 00:07:40,630
Ainda precisamos fazer o diretório.

105
00:07:40,680 --> 00:07:41,930
Mas nós configuramos o fato de que está sendo servido.

106
00:07:41,940 --> 00:07:44,570
Então, vamos fazer cortes de estilos e nós apenas chamaremos isso. C Ss ainda não existe.

107
00:07:44,700 --> 00:07:51,340
Então, precisamos fazer um diretório de criação público e, em seguida, também criar folhas

108
00:07:51,690 --> 00:08:03,330
de estilo de barras de diretório e, finalmente, tocar em folhas de estilo de barras públicas, usar o Dotsie SS, que também queremos abrir

109
00:08:03,330 --> 00:08:11,490
as folhas de estilo públicas, a Aptos, a conclusão da guia SS, é definitivamente sua amiga.

110
00:08:11,730 --> 00:08:16,710
E para tornar todos os ícones um pouco maiores.

111
00:08:16,740 --> 00:08:19,990
específico e nós definiremos o tamanho da fonte BE2

112
00:08:20,400 --> 00:08:26,370
IEMs, assim como o dobro do tamanho do contêiner ou o tamanho duplo da proteção principal.

113
00:08:26,370 --> 00:08:35,940
Bem, você realmente, ao invés de todos os ícones e ícones do stewe que têm essa classe de ícone apenas para ser um pouco mais

114
00:08:36,600 --> 00:08:39,250
OK então, começamos a fazer backup do servidor e atualizamos a página.

115
00:08:39,560 --> 00:08:45,180
Devemos ver que o ícone fica maior, o que é apenas uma questão de preferência pessoal.

116
00:08:45,180 --> 00:08:49,530
Mas acho que parece um pouco melhor quando é maior.

117
00:08:49,530 --> 00:08:52,340
ESTÁ BEM.

118
00:08:52,710 --> 00:08:52,940
Agora que temos feito isso, terminamos com tudo o que precisávamos fazer neste vídeo.

119
00:08:52,950 --> 00:08:56,850
próprio arquivo CSSA personalizado, mesmo que seja apenas uma linha, agora podemos

120
00:08:56,850 --> 00:09:03,210
adicionar facilmente CSSA personalizado a cada arquivo de cada modelo e eu queria mostrar como podemos incluir UI semântica.

121
00:09:03,300 --> 00:09:09,810
Então, eu só queria configurar a barra de navegação adicionada nos arquivos de Footer de cabeçalho adicionar em nosso

122
00:09:10,500 --> 00:09:13,580
OK, então vamos pegar o próximo vídeo com novos e criar para que possamos realmente criar novos blogs.

123
00:09:13,860 --> 00:09:19,420