1
00:00:00,390 --> 00:00:07,540
Bienvenue à certains d'entre nous vidéo, nous avons créé l'application blog créé notre modèle de blog et nous avons ajouté le modèle d'index dans cette vidéo.

2
00:00:07,560 --> 00:00:10,070
Nous n'ajouterons pas de nouveaux itinéraires.

3
00:00:10,090 --> 00:00:13,590
Ce sera très rapide, mais nous voulons ajouter dans notre en-tête et pied de page Parshall's.

4
00:00:13,680 --> 00:00:16,030
Et puis je veux inclure l'interface utilisateur sémantique ainsi.

5
00:00:16,040 --> 00:00:18,980
Et enfin, nous allons ajouter une barre de navigation très simple au sommet.

6
00:00:19,380 --> 00:00:23,990
Alors nous allons commencer, nous voulons créer notre en-tête et le pied de page que Ejay en tant que fichiers.

7
00:00:24,660 --> 00:00:26,810
Et cela devrait être à l'intérieur si les répertoires consultés.

8
00:00:26,820 --> 00:00:40,990
Donc, nous allons faire un répertoire de faire utiliser slash Parshall, puis tactile vues barre oblique barre de Parshall Hetter que Ejay nous, puis toucher les vues de slash Parshall slash footer E.J ..

9
00:00:41,430 --> 00:00:42,060
Génial.

10
00:00:42,060 --> 00:00:45,990
Maintenant ouvrons-les.

11
00:00:46,290 --> 00:00:47,960
Commençons par l'en-tête.

12
00:00:48,570 --> 00:00:54,990
Et pourquoi ne pas le squelette de base ainsi HD un titre de tête en métal.

13
00:00:55,470 --> 00:01:07,010
Nous l'appellerons application de blog, puis nous avons besoin de notre corps comme ça et nous allons passer à la page de bas de page afin que nous puissions couper que pour le moment et alors juste pour que nous sachions qu'il fonctionne.

14
00:01:07,140 --> 00:01:16,710
Ajoutons simplement un paragraphe au sommet qui dit à partir du fichier d'en-tête et si nous voyons que sur chaque page sache que nous l'avons fait correctement.

15
00:01:16,710 --> 00:01:30,110
Maintenant, nous allons ouvrir le pied de page coller ce dans et nous pouvons faire la même chose à partir du pied de sauvegarde.

16
00:01:30,450 --> 00:01:33,890
Maintenant, nous devons lier cela et nous allons le faire dans notre index pour commencer.

17
00:01:34,140 --> 00:01:42,600
Donc, au sommet, nous devons avoir notre inclusion et notre chemin est que nous sommes au lieu d'utiliser dans le fichier d'index.

18
00:01:42,780 --> 00:01:47,780
Donc, nous voulons juste un point slash Parshall slash en-tête.

19
00:01:48,240 --> 00:01:53,280
Et puis la même chose ici bas Parshall's slash pour elle.

20
00:01:53,700 --> 00:02:02,130
Testez-le aucun problème jusqu'à présent et nous obtenons à partir du fichier d'en-tête du pied ou cinq.

21
00:02:02,430 --> 00:02:02,990
Génial.

22
00:02:03,180 --> 00:02:05,530
Maintenant, nous allons ajouter dans l'interface utilisateur sémantique.

23
00:02:05,880 --> 00:02:10,590
Donc, j'ai ce site Web sémantique interface ouverte sémantique Dasch vous dot com.

24
00:02:10,620 --> 00:02:18,080
Et tout comme bootstrap nous pouvons soit télécharger les fichiers ou nous pouvons inclure un CDN CDI sémantique UI.

25
00:02:18,530 --> 00:02:24,630
Il suffit de cliquer sur ce premier exemple et vous remarquerez qu'il ya beaucoup de fichiers différents que nous pourrions choisir.

26
00:02:24,810 --> 00:02:39,000
Et c'est parce que la façon dont l'interface utilisateur sémantique est organisée de la façon dont il est conçu est que contrairement à bootstrap si tout ce que vous voulez est après notre section ou vous voulez seulement les formes que vous pouvez juste prendre que composant unique composante slash formé nous.

27
00:02:39,000 --> 00:02:46,510
SS Donc vous n'avez pas besoin de la chose entière qui est l'une des critiques de bootstrap est si vous voulez seulement un petit morceau que vous avez encore à prendre toute la bibliothèque.

28
00:02:46,770 --> 00:02:48,420
Mais nous voulons toute la bibliothèque.

29
00:02:48,420 --> 00:03:05,920
Donc, si vous faites défiler vers le bas sur tous ces idiomes vous voulez celui qui dit sémantique que CDN qui si vous venez de faire une recherche ou sémantique a réévaluer ce qui est juste ici, il est difficile de trouver si vous ne savez pas ou que vous cherchez mais Il suffit de faire une recherche.

30
00:03:06,000 --> 00:03:09,320
Pas vraiment prendre une minute fied version pour rendre les choses plus rapides.

31
00:03:09,360 --> 00:03:20,040
Donc, c'est sémantique que les hommes voient évaluer et nous copions que vous Erl plus et nous allons mettre en haut dans notre fichier d'en-tête dans la tête.

32
00:03:20,490 --> 00:03:22,300
C'est une étiquette de longueur.

33
00:03:22,950 --> 00:03:29,030
Et nous voulons qu'il soit un lien et alors ref est égal à celui là.

34
00:03:29,120 --> 00:03:30,260
Oui oui.

35
00:03:30,420 --> 00:03:34,900
Et nous devrions également ajouter dans le type de feuille de style rel égal à slash de texte.

36
00:03:34,940 --> 00:03:40,500
C Ss Maintenant, nous sauvegardons et redémarrage du serveur.

37
00:03:41,640 --> 00:03:49,070
Jetez un coup d'oeil à notre page d'accueil que vous verrez quelques petits changements juste comme quand nous installons d'abord le bootstrap les changements de police un peu.

38
00:03:49,560 --> 00:03:49,830
D'ACCORD.

39
00:03:49,830 --> 00:04:01,180
Donc, cela signifie que nous avons le travail, nous allons nous débarrasser de nos paragraphes dans l'en-tête et le pied de page et au lieu de laisser ajouter dans une barre de navigation simple dans la file d'attente.

40
00:04:01,230 --> 00:04:03,740
Maintenant, bien sûr, sont appelés menus.

41
00:04:03,990 --> 00:04:16,170
Donc, si nous allons ici cliquez sur le menu tous les différents composants et nous voulons trouver le menu qui est sous le menu de la collection.

42
00:04:16,170 --> 00:04:18,630
Vous pouvez voir qu'il ya un certain nombre de différents types de menus.

43
00:04:18,860 --> 00:04:22,190
Il ya un menu qui est ce que vous voyez ici.

44
00:04:22,500 --> 00:04:32,090
Il ya un menu de Poynting il ya le magining vertical de texte tabulaire.

45
00:04:32,470 --> 00:04:43,170
Et il ya tout à fait un peu plus tout ce dont nous avons besoin est de faire du haut de notre corps un div et let's get cela correctement.

46
00:04:43,170 --> 00:04:46,340
Kate fait une classe égale à vous.

47
00:04:46,340 --> 00:04:52,170
Je fixe et nous allons faire un menu inversé qui change juste la couleur tout comme dans bootstrap.

48
00:04:52,170 --> 00:04:57,410
Vous pourriez dire en vers, puis à l'intérieur de là, nous avons besoin d'un autre div.

49
00:04:58,020 --> 00:05:03,830
Et celui-ci aura classe égale vous conteneur qui est juste comme le conteneur bootstrap.

50
00:05:04,260 --> 00:05:10,030
Et puis au lieu de là je vais avoir un autre div et celui-ci aura la classe égale à l'élément Hetter.

51
00:05:10,320 --> 00:05:13,550
Et c'est comme la marque nav bar sur bootstrap.

52
00:05:13,560 --> 00:05:18,920
Donc, tout ce que nous voulons enfants blog site ou tout ce que nous voulons que notre application d'être appelé.

53
00:05:19,050 --> 00:05:45,350
Ensuite, nous allons ajouter une balise d'ancrage pour la page d'accueil et nous l'appellerons juste à la maison et nous ajouterons en classe égale à l'élément et ensuite nous ferons la même chose sauf plutôt que d'aller à barre oblique Allez à barre oblique slash nouveau qui n'existe pas encore et il sera froid Nouveau post ou nouveau blog.

54
00:05:45,410 --> 00:05:47,470
Ce sera le texte que nous voyons.

55
00:05:48,350 --> 00:05:51,760
OK donc vous n'êtes pas fixe menu inversé.

56
00:05:51,900 --> 00:05:53,460
Un conteneur au lieu de cela.

57
00:05:53,670 --> 00:06:00,010
Et puis à l'intérieur du conteneur, nous devrions avoir toute cette petite erreur de ma part.

58
00:06:00,060 --> 00:06:02,670
Nous voulons donc que ce soit là aussi.

59
00:06:03,360 --> 00:06:04,850
Tout est dans le récipient.

60
00:06:05,160 --> 00:06:10,250
Et puis nous avons notre en-tête et puis nous avons deux éléments qui sont ancrés Tex.

61
00:06:10,260 --> 00:06:12,200
Jetons un coup d'oeil à cela maintenant.

62
00:06:13,500 --> 00:06:15,200
Et nous obtenons notre barre mathématique simple.

63
00:06:15,520 --> 00:06:17,720
Oui, nous avons un problème ici avec un certain espacement.

64
00:06:17,730 --> 00:06:21,450
Nous allons gérer cela dans un instant, mais nous avons un maintenant où il fonctionne très bien.

65
00:06:21,660 --> 00:06:27,450
Ajoutons dans une icône simple qui dans la sémantique Vous venez d'être appelé icônes.

66
00:06:28,070 --> 00:06:30,690
Il y en a un tas dans celui que j'ai utilisé.

67
00:06:30,720 --> 00:06:32,960
C'est ce qu'on appelle Code.

68
00:06:33,120 --> 00:06:35,500
Essayez de le trouver ici et faites juste une recherche.

69
00:06:35,550 --> 00:06:36,310
Le voilà.

70
00:06:36,480 --> 00:06:39,760
Mais n'hésitez pas à choisir votre propre si vous aimez commenter.

71
00:06:39,810 --> 00:06:43,560
L'idée était qu'il s'agissait d'un blog basé sur le code, mais il pourrait y avoir autre chose.

72
00:06:43,560 --> 00:06:44,900
J'aime l'idée aussi.

73
00:06:44,920 --> 00:06:46,190
Quoi qu'il en soit il ya un tas d'entre eux.

74
00:06:46,350 --> 00:06:51,980
Ce qui est agréable, c'est qu'ils ont aussi un tas d'icônes pour les entreprises qui est utile.

75
00:06:52,020 --> 00:06:59,100
Le fond, je pense qu'ils ont eux et nous allons à des tonnes de différentes marques et sociétés communes que vous auriez lié à votre demande.

76
00:06:59,430 --> 00:07:00,070
D'ACCORD.

77
00:07:00,300 --> 00:07:07,160
Donc, c'est le code d'un nom pour l'icône et je vais l'ajouter ici à côté de l'en-tête blogsite.

78
00:07:07,470 --> 00:07:11,190
Donc juste ici avait son article et tout ce dont nous avons besoin est une étiquette de l'oeil.

79
00:07:11,670 --> 00:07:17,400
Et il doit avoir une classe de code et une icône.

80
00:07:17,400 --> 00:07:26,290
Donc, vraiment simple, juste le nom de l'icône, puis l'icône de classe enregistrer rafraîchir et nous avons un petit code.

81
00:07:26,280 --> 00:07:27,340
Je viens là-bas.

82
00:07:27,660 --> 00:07:31,830
Faisons un petit changement qui est de rendre cette icône un peu plus grand.

83
00:07:31,860 --> 00:07:40,630
Pour ce faire, nous pourrions écrire une balise de style génial ici, mais plutôt que de faire que nous allons utiliser l'annuaire public que nous avons mis en place.

84
00:07:40,680 --> 00:07:41,930
Nous avons encore besoin de faire le répertoire.

85
00:07:41,940 --> 00:07:44,570
Mais nous avons mis en place le fait qu'il est servi.

86
00:07:44,700 --> 00:07:51,340
Donc, nous allons faire des feuilles de style slash et nous allons simplement appeler apt C Ss n'existe pas encore.

87
00:07:51,690 --> 00:08:16,710
Donc, nous avons besoin de faire un répertoire make public et puis aussi faire des feuilles de style public slash public et enfin toucher les feuilles de style public slash slash Dotsie SS que nous voulons aussi ouvrir des feuilles de style publiques Aptos l'onglet SS est certainement votre ami là.

88
00:08:16,740 --> 00:08:19,990
Et pour rendre toutes les icônes un peu plus grand.

89
00:08:20,400 --> 00:08:39,250
Eh bien, vous avez plutôt plutôt que toutes les icônes et icônes stewe qui ont cette classe d'icône juste pour être un peu plus spécifique et nous allons définir la taille de la police BE2 IEMs tout comme ce double de la taille du conteneur ou double taille de la sauvegarde parent.

90
00:08:39,560 --> 00:08:45,180
OK, maintenant nous avons démarré la sauvegarde du serveur et nous actualisons la page.

91
00:08:45,180 --> 00:08:49,530
Nous devrions voir que l'icône devient plus grande qui est juste une question de préférence personnelle.

92
00:08:49,530 --> 00:08:52,340
Mais je pense qu'il semble un peu mieux quand il est plus grand.

93
00:08:52,710 --> 00:08:52,940
D'ACCORD.

94
00:08:52,950 --> 00:08:56,850
Maintenant que nous avons fait cela, nous avons terminé avec tout ce que nous devions faire dans cette vidéo.

95
00:08:56,850 --> 00:09:13,580
Donc, je voulais simplement configurer la barre de navigation ajoutée dans les fichiers de pied d'en-tête ajouter dans notre propre fichier personnalisé CSSA même si c'est seulement une ligne maintenant, nous pouvons facilement ajouter CSSA personnalisé à chaque fichier unique chaque modèle unique et je voulais vous montrer comment Nous pouvons inclure l'interface utilisateur sémantique.

96
00:09:13,860 --> 00:09:19,420
OK, nous allons prendre la vidéo suivante avec de nouveaux et de créer afin que nous puissions réellement créer de nouveaux blogs.