1 00:00:00,390 --> 00:00:05,960 Bentornato alcuni di noi video che abbiamo creato l'app per blog creata il nostro modello di blog e abbiamo aggiunto il modello 2 00:00:06,210 --> 00:00:07,540 di indice in questo video. 3 00:00:07,560 --> 00:00:10,070 In realtà non aggiungeremo ancora nuove rotte. 4 00:00:10,090 --> 00:00:13,590 Questo sarà molto veloce ma vogliamo aggiungere la nostra intestazione e il footer di Parshall. 5 00:00:13,680 --> 00:00:16,030 E poi voglio includere anche l'interfaccia semantica. 6 00:00:16,040 --> 00:00:18,980 E infine aggiungeremo una barra di navigazione davvero semplice in alto. 7 00:00:19,380 --> 00:00:23,990 Quindi iniziamo a voler creare la nostra intestazione e il piè di pagina che Ejay come file. 8 00:00:24,660 --> 00:00:26,810 E quello dovrebbe essere dentro se le directory viste. 9 00:00:26,820 --> 00:00:34,200 Quindi faremo una directory di make usando la barra delle viste di Parshall e poi il taglio barra di Parshall Hetter che ci 10 00:00:34,200 --> 00:00:40,990 fa Ejay e poi tocchiamo le viste tagliano il barrato E. J. Grande. 11 00:00:41,430 --> 00:00:42,060 Ora apriamo quelli. 12 00:00:42,060 --> 00:00:45,990 Iniziamo con l'intestazione. 13 00:00:46,290 --> 00:00:47,960 E perché lo scheletro di base in HD non era un titolo di testa in metallo. 14 00:00:48,570 --> 00:00:54,990 Lo chiameremo app per il blog e poi avremo bisogno del nostro corpo proprio così e lo 15 00:00:55,470 --> 00:01:02,540 sposteremo al piè di pagina in modo che possiamo eliminarlo per ora e poi solo per sapere che funziona. 16 00:01:02,790 --> 00:01:07,010 su ogni pagina si sa che l'abbiamo fatto correttamente. 17 00:01:07,140 --> 00:01:14,310 Aggiungiamo solo un paragrafo in alto che dice dal file di intestazione e se vediamo che 18 00:01:14,310 --> 00:01:16,710 Ora apriamo il footer incolla questo e possiamo fare la 19 00:01:16,710 --> 00:01:18,060 stessa cosa dal salvataggio del footer. 20 00:01:22,980 --> 00:01:30,110 Ora dobbiamo collegare questo e facciamolo nel nostro indice per iniziare. 21 00:01:30,450 --> 00:01:33,890 Quindi in cima abbiamo bisogno di avere la nostra inclusione e il nostro percorso è che siamo invece usati nel file indice. 22 00:01:34,140 --> 00:01:42,360 Quindi vogliamo solo un punto tagliare l'intestazione di barra di Parshall. 23 00:01:42,780 --> 00:01:47,780 E poi la stessa cosa qui sotto per il taglio di Parshall. 24 00:01:48,240 --> 00:01:53,280 Cerchiamo di testare fino ad ora nessun problema e otteniamo dal file di intestazione dal piede o cinque. 25 00:01:53,700 --> 00:02:02,130 Grande. 26 00:02:02,430 --> 00:02:02,990 Ora aggiungiamo l'interfaccia utente semantica. 27 00:02:03,180 --> 00:02:05,530 Quindi ho questo seminario semantico sull'interfaccia utente aperta Dasch you dot com. 28 00:02:05,880 --> 00:02:10,590 E proprio come il bootstrap possiamo scaricare i file o possiamo includere un CDN semantico UI CDN. 29 00:02:10,620 --> 00:02:18,080 Basta fare clic su questo primo esempio e noterai che ci 30 00:02:18,530 --> 00:02:23,790 sono molti file diversi tra cui possiamo scegliere. 31 00:02:23,790 --> 00:02:24,630 ciò che si 32 00:02:24,810 --> 00:02:30,120 desidera è dopo la nostra sezione o se si desidera solo i moduli, è sufficiente prendere quel singolo componente. 33 00:02:30,300 --> 00:02:37,200 Questo perché il modo in cui l'interfaccia utente semantica è organizzata nel modo in cui è progettata è che, a differenza del bootstrap, se tutto 34 00:02:37,560 --> 00:02:39,000 SS Quindi non ti serve l'intera 35 00:02:39,000 --> 00:02:43,770 cosa che è una delle critiche al bootstrap: se vuoi solo un piccolo pezzo devi comunque prendere l'intera libreria. 36 00:02:43,770 --> 00:02:46,510 Ma vogliamo l'intera biblioteca. 37 00:02:46,770 --> 00:02:48,420 Quindi se scorri in 38 00:02:48,420 --> 00:02:55,920 basso su tutti questi idiomi, vuoi quello che dice semantico che CDN che se fai solo una ricerca o semantica 39 00:02:55,920 --> 00:03:04,190 riesca a rivalutare che è proprio qui è difficile da trovare se non lo sai o lo stai cercando ma fai una ricerca 40 00:03:04,190 --> 00:03:05,920 No, in realtà, prendi una versione minuscola per rendere le cose più veloci. 41 00:03:06,000 --> 00:03:09,320 Quindi è semantico che gli uomini vedono valutare 42 00:03:09,360 --> 00:03:16,950 e noi copiamo il tuo Erl e lo metteremo in cima al nostro file di intestazione nella testa. 43 00:03:17,340 --> 00:03:20,040 È un tag di lunghezza. 44 00:03:20,490 --> 00:03:22,300 E vogliamo che sia il link e quindi il ref è uguale a quello giusto. 45 00:03:22,950 --> 00:03:29,030 Si si. 46 00:03:29,120 --> 00:03:30,260 E dovremmo aggiungere anche nel tipo di foglio di stile rel è uguale alla barra del testo. 47 00:03:30,420 --> 00:03:34,900 C Ss Così ora salviamo e riavviamo il server. 48 00:03:34,940 --> 00:03:40,500 come quando installiamo il bootstrap il font cambia un po '. 49 00:03:41,640 --> 00:03:47,160 Dai un'occhiata alla nostra home page vedrai alcune piccole modifiche, proprio 50 00:03:47,250 --> 00:03:49,070 OK. 51 00:03:49,560 --> 00:03:49,830 Questo 52 00:03:49,830 --> 00:03:57,720 significa che ce l'abbiamo fatta liberiamoci dei nostri paragrafi nell'intestazione e nel piè di pagina e invece aggiungiamo una semplice barra di navigazione nella coda. 53 00:03:57,870 --> 00:04:01,180 Ora, naturalmente, sono chiamati menu. 54 00:04:01,230 --> 00:04:03,740 Quindi, se andiamo qui, fai clic 55 00:04:03,990 --> 00:04:12,810 sul menu di tutti i diversi componenti e vogliamo trovare il menu che si trova nel menu della raccolta. 56 00:04:12,810 --> 00:04:16,170 Puoi vedere che ci sono diversi tipi di menu. 57 00:04:16,170 --> 00:04:18,630 C'è un menu che è quello che vedi qui. 58 00:04:18,860 --> 00:04:22,190 C'è un menu di Poynting, c'è una maginazione verticale di testo tabulare. 59 00:04:22,500 --> 00:04:32,090 E c'è ancora un bel po 'di tutto ciò di cui abbiamo bisogno se vogliamo rendere 60 00:04:32,470 --> 00:04:40,450 la parte superiore del nostro corpo un div e andiamo a farlo correttamente. 61 00:04:40,590 --> 00:04:43,170 Kate ha una classe uguale a te. 62 00:04:43,170 --> 00:04:46,340 Ho risolto e faremo un menu invertito che cambia solo il colore proprio come in bootstrap. 63 00:04:46,340 --> 00:04:52,170 Potresti dire in versi e poi dentro di lì abbiamo bisogno di un altro div. 64 00:04:52,170 --> 00:04:57,410 E questo avrà classe uguale a contenitore che è proprio come un contenitore bootstrap. 65 00:04:58,020 --> 00:05:03,830 E poi invece di lì avrò un altro div e questo avrà classe uguale a item Hetter. 66 00:05:04,260 --> 00:05:10,030 E questo è come il marchio della barra di navigazione sul bootstrap. 67 00:05:10,320 --> 00:05:13,550 Quindi tutto ciò che vogliamo è un blog per bambini o qualsiasi altra cosa vogliamo che venga chiamata la nostra app. 68 00:05:13,560 --> 00:05:18,920 E poi dopo aggiungeremo un tag di ancoraggio per la home page 69 00:05:19,050 --> 00:05:28,830 e lo chiameremo a casa e aggiungeremo in classe uguale a item e poi faremo la stessa cosa tranne che andare a 70 00:05:28,860 --> 00:05:37,140 barrare vai a slash logs slash nuovi che non esistono ancora e farà freddo New Post o New Blog. 71 00:05:37,140 --> 00:05:45,350 Quello sarà il testo che vediamo. 72 00:05:45,410 --> 00:05:47,470 OK, quindi non è stato risolto il menu invertito. 73 00:05:48,350 --> 00:05:51,760 Un contenitore invece di quello. 74 00:05:51,900 --> 00:05:53,460 E poi all'interno del contenitore dovremmo effettivamente avere tutto questo piccolo errore da parte mia. 75 00:05:53,670 --> 00:06:00,010 Quindi vogliamo che sia anche lì. 76 00:06:00,060 --> 00:06:02,670 È tutto nel contenitore. 77 00:06:03,360 --> 00:06:04,850 E poi abbiamo la nostra intestazione e poi abbiamo due elementi che sono ancorati a Tex. 78 00:06:05,160 --> 00:06:10,250 Diamo un'occhiata a questo ora. 79 00:06:10,260 --> 00:06:12,200 E otteniamo la nostra semplice barra matematica. 80 00:06:13,500 --> 00:06:15,200 Sì, abbiamo un problema qui con qualche spaziatura. 81 00:06:15,520 --> 00:06:17,720 Lo gestiremo in un attimo, ma ora abbiamo un punto in cui funziona bene. 82 00:06:17,730 --> 00:06:21,450 Aggiungiamo una semplice icona che in semantica si chiama solo icone. 83 00:06:21,660 --> 00:06:27,450 Ce n'è un sacco in quello che ho usato. 84 00:06:28,070 --> 00:06:30,690 Si chiama codice. 85 00:06:30,720 --> 00:06:32,960 Prova a trovarlo qui e fai una ricerca. 86 00:06:33,120 --> 00:06:35,500 Eccolo. 87 00:06:35,550 --> 00:06:36,310 Ma sentiti libero di scegliere il tuo se ti piace il commento. 88 00:06:36,480 --> 00:06:39,760 L'idea era che si trattava di un blog basato su codice, ma potrebbe esserci qualcos'altro. 89 00:06:39,810 --> 00:06:43,560 Mi piace anche l'idea. 90 00:06:43,560 --> 00:06:44,900 Comunque ce ne sono un sacco. 91 00:06:44,920 --> 00:06:46,190 Ciò che è bello è che hanno anche un sacco di icone per le aziende che è utile. 92 00:06:46,350 --> 00:06:51,980 In fondo penso che li abbiano e andiamo a tonnellate di diversi marchi 93 00:06:52,020 --> 00:06:56,610 e aziende comuni a cui avresti collegato la tua applicazione. 94 00:06:56,610 --> 00:06:59,100 OK. 95 00:06:59,430 --> 00:07:00,070 Quindi è il codice un nome per icona e lo aggiungerò proprio qui accanto all'intestazione del blog. 96 00:07:00,300 --> 00:07:07,160 Quindi proprio qui aveva il suo oggetto e tutto ciò di cui abbiamo bisogno è un marchio. 97 00:07:07,470 --> 00:07:11,190 E ha bisogno di avere una classe di codice e un'icona. 98 00:07:11,670 --> 00:07:17,400 Quindi, davvero semplice, solo il nome dell'icona e 99 00:07:17,400 --> 00:07:26,040 quindi l'icona della classe salva l'aggiornamento e abbiamo un piccolo codice. 100 00:07:26,040 --> 00:07:26,290 Vengo lì. 101 00:07:26,280 --> 00:07:27,340 Facciamo un piccolo cambiamento che è quello di rendere questa icona un po 'più grande. 102 00:07:27,660 --> 00:07:31,830 Per fare ciò, potremmo semplicemente scrivere un tag di 103 00:07:31,860 --> 00:07:38,730 stile molto bello ma, piuttosto che farlo, usiamo la directory pubblica che abbiamo impostato. 104 00:07:38,730 --> 00:07:40,630 Dobbiamo ancora creare la directory. 105 00:07:40,680 --> 00:07:41,930 Ma abbiamo istituito il fatto che sia servito. 106 00:07:41,940 --> 00:07:44,570 Quindi faremo una barra dei fogli di stile e la chiameremo semplicemente perché C Ss non esiste ancora. 107 00:07:44,700 --> 00:07:51,340 Quindi abbiamo bisogno di fare una directory pubblica e quindi anche fare una directory 108 00:07:51,690 --> 00:08:03,330 pubblica dei fogli di stile e infine toccare i fogli di stile public slash con le app di Dotsie SS che vogliamo anche aprire 109 00:08:03,330 --> 00:08:11,490 così in fogli di stile pubblici Aptos il completamento della scheda SS è sicuramente tuo amico lì. 110 00:08:11,730 --> 00:08:16,710 E per rendere tutte le icone un po 'più grandi. 111 00:08:16,740 --> 00:08:19,990 'più specifiche e imposteremo la dimensione del font 112 00:08:20,400 --> 00:08:26,370 IEM BE2 proprio come il doppio della dimensione del contenitore o la doppia dimensione del genitore. 113 00:08:26,370 --> 00:08:35,940 Beh, solo tu in realtà piuttosto che tutte le icone e le icone stewe che hanno quella classe di icone solo per essere un po 114 00:08:36,600 --> 00:08:39,250 OK, così ora abbiamo avviato il backup del server e aggiorniamo la pagina. 115 00:08:39,560 --> 00:08:45,180 Dovremmo vedere che l'icona diventa più grande, che è solo una questione di preferenze personali. 116 00:08:45,180 --> 00:08:49,530 Ma penso che sembra un po 'meglio quando è più grande. 117 00:08:49,530 --> 00:08:52,340 OK. 118 00:08:52,710 --> 00:08:52,940 Ora che abbiamo finito, abbiamo finito con tutto ciò che dovevamo fare in questo video. 119 00:08:52,950 --> 00:08:56,850 personalizzato anche se è solo una riga ora possiamo facilmente aggiungere 120 00:08:56,850 --> 00:09:03,210 CSSA personalizzati a ogni singolo file ogni singolo modello e volevo mostrarti come possiamo includere l'interfaccia utente semantica. 121 00:09:03,300 --> 00:09:09,810 Quindi volevo semplicemente impostare la barra di navigazione aggiunta nel file Header Footer da aggiungere nel nostro file CSSA 122 00:09:10,500 --> 00:09:13,580 OK, quindi riprenderemo il nuovo video con il nuovo e creare così possiamo effettivamente creare nuovi blog. 123 00:09:13,860 --> 00:09:19,420