Share
Benvenuti alla seconda lezione della nostra serie Web Design for Kids!
In questa lezione impareremo tutto su alcune cose che dobbiamo fare e gli strumenti di cui abbiamo bisogno prima di iniziare a scrivere il codice per il nostro sito web Tuts + Town; ci stiamo arrivando, lo prometto! Inoltre, non dimenticare di porre domande nell'area dei commenti in fondo a questa pagina.
Per prima cosa, per prima cosa, diamo un'occhiata più da vicino esattamente a cosa creeremo insieme!
È super utile abbozzare tutte le idee che abbiamo in testa prima di iniziare a realizzarle. È un esercizio che può farci risparmiare un sacco di tempo quando arriviamo alla parte di codifica.
Forse quello che c'è nelle nostre teste non sembra giusto una volta che è sulla carta? Forse alcuni nuovi problemi e domande emergono nel nostro schizzo? Forse il nostro design è troppo occupato? Molti di questi problemi si mostreranno nei nostri schizzi.
Suo ok per non amare i nostri schizzi all'inizio, è esattamente quello che vogliamo succedere! Vogliamo che tutto questo abbia funzionato prima su carta.
Abbiamo bisogno di un sito web per i turisti per visitare e conoscere quali negozi e attività commerciali offre la nostra città. Raggrupperemo queste aziende insieme in un modo che ha senso, come "hotel" all'interno di un gruppo e "ristoranti" in un altro. Vogliamo avere collegamenti ai siti Web dell'azienda, in modo che i nostri visitatori possano fare clic su di essi per ottenere maggiori dettagli.
Ci sono anche alcune immagini che useremo per dare un'atmosfera accogliente alla città.
Ecco uno schizzo che ha portato all'anteprima completamente progettata e colorata del sito:
Questo è il sito web esatto che creeremo da zero! Piuttosto pulito.
Per scrivere il codice HTML (tutto ciò di cui parla la lingua segreta di cui abbiamo parlato nella prima lezione) abbiamo bisogno di a editor di testo per inserirlo.
È meglio non usare qualcosa come Microsoft Word per questo, come appropriato codice l'editor di testo renderà il nostro lavoro molto più semplice. UN editor di codice capiremo cosa stiamo scrivendo e faremo tutto il codice con i colori giusti, mentre Microsoft Word è migliore per scrivere i rapporti scolastici, per esempio.
Esistono diversi editor di codici gratuiti validi che è possibile scaricare dal Web. Se non sei sicuro di come scaricare qualcosa, o se non sei sicuro di sì, è sempre meglio chiedere ad un adulto.
Bluefish è ottimo per i computer che eseguono Windows, mentre Atom sarà adatto per un Mac.
Passeremo a ciò che questo testo significa nel prossimo corso, ma ecco una sbirciatina su ciò che puoi aspettarti di digitare.
Come abbiamo già parlato un po ', un sito Web è solo un mucchio di file. Questi file devono tutti vivere nella stessa cartella in modo che il browser li possa acquisire.
Il sito web Tuts + Town avrà un file HTML (salvato con a .html estensione del file alla fine), un file CSS (salvato con a .estensione del file css alla fine) e quattro immagini che verranno salvate in una cartella denominata "images". La cartella delle immagini vivrà nella stessa cartella principale dei file HTML e CSS.
UN estensione del file è il gruppo di lettere che arriva dopo il punto in un nome di file, che ci dice che tipo di file è:
Come accennato, le nostre immagini verranno salvate in una cartella denominata "images" entro la nostra cartella del sito principale, come questa:
Nella foto sopra abbiamo un'immagine denominata town.svg (il .svg l'estensione è solo una specie di immagine) che abbiamo inserito in una cartella extra chiamata "images". Fare ciò aiuta a mantenere le cose in ordine:
Entrambi questi modi di fare le cose sono corretti, ma useremo le cartelle extra, come l'immagine a destra.
Vedremo il nostro lavoro proprio nel del browser, come quello che stai usando ora per visualizzare questa pagina di Tuts +!
Sono disponibili diversi browser per il download gratuito se non ne hai già uno, come Google Chrome e Firefox. Se stai usando un computer Mac, avrai già installato Safari, bello!
Costruiremo il nostro sito Web direttamente sui nostri computer e non la rete. Se ricordi nella nostra prima lezione, abbiamo spiegato che non possiamo vedere un sito Web su Internet se non è su un server.
L'immagine qui sotto mostra come un sito Web finito potrebbe essere visualizzato localmente (non su Internet) in un browser. Invece di vedere un indirizzo web come www.tutsplus.com, vediamo il sito Locale indirizzo, che sembra un po 'diverso:
In questa lezione abbiamo esaminato alcune cose importanti che ci aiuteranno a prepararci a scrivere il codice del nostro sito web. Abbiamo esaminato come preparare i file e alcuni strumenti come a editor di testo e a del browser.
Nella prossima lezione passeremo direttamente alla parte di codifica del nostro sito Web! Organizzeremo (lo so, organizzandomi così tanto!) E aggiungiamo del codice al nostro file HTML. Questo è dove inizia il divertimento!
Ci vediamo in giro per la città!
Accentsconagua