Ciao a tutti.
Bentornato, è ora di un altro esempio di compiti a casa.
Quello che stiamo per fare questa settimana è aggiungere ancora più stile
alle pagine che hai iniziato lo styling la scorsa settimana.
Quindi ancora una volta l'obiettivo di questo compito è che
non voglio che tu stia cambiando affatto l'html.
Voglio che tu crei un nuovo foglio di stile o aggiorni il foglio di stile della settimana scorsa in modo
che possa essere utilizzato su tre diversi file html.
Quando inizi, è molto importante che tu abbia completato la prima
assegnazione peer graded.
Presumo che tu lo abbia fatto e così
quando parlo in questo video dei diversi cambiamenti che voglio che tu faccia.
È possibile modificare il precedente compito a casa, o si
può davvero iniziare completamente da zero se non si era soddisfatti con il vostro lavoro precedente.
Quindi diamo un'occhiata al prima e al dopo per
questo incarico che voglio che tu provi a raggiungere.
Questa era la nostra pagina quando abbiamo iniziato.
Nei compiti uno, l'hai presa da qui a qui.
Ancora molto semplice, ma solo molto più pulito perché abbiamo aggiunto un po 'di colore di sfondo,
alcuni caratteri di colore, e ci siamo sbarazzati di quelle immagini.
Quello su cui voglio che lavori questa settimana è davvero cambiare le cose e
renderlo davvero in stile invece che pulito.
Quindi diamo un'occhiata a cosa vorrei che lavorassi nella terza settimana.
Come puoi vedere questo sembra un sito completamente diverso.
Le immagini sono tornate, ho aggiunto un'immagine di sfondo per una barra di navigazione e
qualcosa che non è necessariamente facile da vedere quando stai solo guardando la carta,
ho aggiunto una nuova classe che evidenzia quale pagina siamo in questo momento.
Quindi, se si guarda,
il link home è evidenziato perché siamo sulla home page.
Se clicco sulla cronologia, il link della cronologia è come questo
perché siamo nella pagina della cronologia e poi allo stesso modo, la pagina della squadra.
Quindi questo è ciò che chiamiamo la pagina corrente che stiamo guardando.
E così starai disegnando questo per far sapere ai tuoi spettatori
dove si trovano in questa pagina.
Quindi ho intenzione di andare avanti e passare attraverso e parlare di ciascuno dei tag
che voglio che tu guardi per completare questo compito.
Quindi, quando inizi, lascerai in pace quel codice HTML,
e creerai un nuovo foglio di stile, o andrai avanti e
aggiornerai quello che hai usato prima.
Quello di cui hai bisogno per lavorare specificamente sono questi elementi.
Devi lavorare sul corpo, sull'intestazione, sull'h, sui link, e
poi ho tre classi chiamate attive, a sinistra e
a destra, e infine, vorrai rimettere quelle immagini che erano nel lato sinistro della pagina.
Quindi per prima cosa, parliamo del corpo.
Per impostazione predefinita, i tuoi browser inseriscono una sorta di padding e margine, ma voglio
che tu lo sovrascriva e metta qualcosa che sembrerà coerente su tutti i browser.
Puoi anche sentirti libero di regolare la dimensione del testo, ma questo non è richiesto.
Lo so perché ho trovato il testo un po' troppo piccolo.
Quindi, vai all'intestazione.
Il primo passo è cambiare il colore di sfondo e vedere se riesci a farlo funzionare.
Successivamente, si desidera aggiungere un'immagine di sfondo.
E ad essere onesti,
questa sara' la parte piu' complicata dell'intero compito a casa.
Perché a volte non è sempre chiaro dove è possibile trovare le immagini e
dove non è possibile, quindi
assicurarsi di controllare alcune delle altre risorse se si rimane bloccati in questa parte.
Successivamente voglio che tu cambi il colore del carattere e
aumenti un po 'di più la dimensione del carattere.
Ora, di nuovo qui c'è qualcosa di nuovo che non hai imparato prima.
Voglio che tu dia stile ai link che si trovano nella sezione di navigazione, ma
solo a quei link.
Non tutti i link nella pagina.
Non è necessario ricreare esattamente il mio esempio, ma
voglio che i tuoi link siano ben distanziati,
dovrebbero avere un colore di sfondo, bordi arrotondati e nessuna sottolineatura.
Falle sembrare belle.
Poi assicurati di aver visto quella lezione attiva di cui parlavo.
Ecco come le persone saranno in grado di sapere quale pagina stanno guardando
senza dover guardare l'URL.
Ora un'altra cosa su cui hai bisogno di lavorare è questa idea che la nostra pagina ha
una classe sinistra e una destra ad essa.
Ora, per far sì che le cose si avvicinino l'una all'altra, dovrai pasticciare con
il display e possibilmente galleggiare a seconda di come lo implementi.
Quindi assicurati di cambiarli in modo che siano fianco a fianco e
cambia quel colore di sfondo per la classe sinistra.
Potresti averlo già fatto nei compiti precedenti, ma
se non ti sei assicurato che venga fatto ora.
Infine, vogliamo tornare a quelle immagini.
Innanzitutto, devi rimettere le immagini perché,
se tutto va bene, nei compiti uno, imposti il loro display su nessuno, il che significa che se ne sono andati.
Quindi rimettili in qualcosa in modo che si impilino uno sopra l'altro.
Quindi, assicurati che siano centrati all'interno di quella classe sinistra.
Non voglio che le foto siano da una parte o dall'altra.
E, mentre li stai centrando, assicurati di mettere un po' di spazio tra di loro
, anche in alto e in basso.
Ancora una volta, useremo il peer grader per valutare il tuo lavoro.
A differenza di prima, i voti saranno basati sul livello di completamento e
un po 'più di come appare la tua pagina.
Vogliamo assicurarci che tu non stia mettendo cose difficili da leggere o
che sono davvero un po' schiacciate insieme.
Quindi, se ne hai la possibilità,
assicurati di eseguire la tua pagina attraverso alcuni diversi valutatori di accessibilità.
Quindi c'era l'onda e c'e' la fettuccia.
Ci sono posti diversi in cui puoi andare.
Ma questa è la parte molto bella del peer grading, i tuoi
coetanei possono dirti se le cose non hanno davvero il miglior contrasto di colore.
Ora, di nuovo, si applicheranno norme adeguate.
E questo è particolarmente importante quando iniziamo a parlare di selettori avanzati.
Ho scoperto che a volte le persone gettano tutto ciò che possono pensare
nel loro foglio di stile, e sperano solo, speranza, speranza che funzioni.
Ci toglieremo i punti se provi a farlo.
Ora l'ultima cosa che voglio menzionare è che
so che le persone stanno codificando su dispositivi diversi.
Quindi, quando invii il tuo codice, assicurati di sentirti libero di dire che il mio codice
sembra davvero buono solo su un grande schermo, o su un telefono, o qualcosa del genere.
Prendersi cura di diverse dimensioni dello schermo è qualcosa chiamato design reattivo
che non gestiamo in questo particolare corso.
Quindi non mi aspetto che tu crei un sito che sembra fantastico su ogni piattaforma.
Quello che mi aspetto che tu faccia è davvero possedere il codice che invii questa volta.
Assicurati di sapere esattamente cosa sta facendo ogni riga e
sentiti a tuo agio cambiando piccole parti e sentendoti come se la tua pagina non si rompa.
Ancora una volta, se si verificano problemi, assicurarsi di colpire le aree discussioni.
Hai dei compagni di classe che sono stati molto utili, e
voglio davvero incoraggiare quella comunicazione.
Buona fortuna.