Share
Benvenuti in Tuts + Town, dove tutti amano il web design! In questa serie impareremo tutto sulla progettazione e costruzione di un sito web. Per aiutarci, creeremo un sito web insieme.
Queste lezioni (o tutorial) Ti fornirà una guida passo passo per dare vita a un sito web. Tutti i file degli esercizi saranno inclusi alla fine di ogni lezione, così puoi confrontare il tuo lavoro mentre procedi.
Quindi, per favore entra, mettiti comodo e creiamo qualcosa per la gente di Tuts + Town!
Facciamo un passo indietro e pensiamo a come funziona il web.
Quando due computer sono connessi a Internet (che viene mostrato come una linea gialla nella figura sotto) possono parlare tra loro.
Un server (la scatola blu) è un computer speciale che contiene file di pagine web. Il tuo computer a casa o a scuola non è un server, perché non è connesso direttamente a Internet. Ci colleghiamo a Internet attraverso un Fornitore di servizi Internet (ISP).
Il contenuto di un sito (tutto ciò di cui parla un sito Web) è organizzato all'interno di una serie speciale di regole che i computer comprendono; un po 'come parlare in un linguaggio segreto e codificato, eccetto che presto saremo su questo piccolo segreto!
Come il tuo computer si connette al webIn questa immagine il del browser chiede di vedere www.tutsplus.com dal server in cui vivono i file del sito. Il server sta rinviando i file e il browser li sta traducendo per visualizzare una pagina sullo schermo. E questo succede molto velocemente!
È tutta una questione di comunicazione e compartecipazione informazione.
Per tutto questo, un sito che scrivi localmente (sul tuo computer) non possono essere visti da altre persone su un altro computer, finché non si spostano i file su un server. Lo vedremo correttamente più avanti.
Il lavoro di un web designer è molto importante. Tutto ciò che sta accadendo nella foto qui sopra sta accadendo per una ragione: per vedere un sito web. Il lavoro di un web designer è decidere come appare e funziona questo sito, e anche altre cose, come assicurarsi che il sito web sia utilizzabile per i visitatori disabili (nello stesso modo in cui sei un visitatore a Tuts + adesso).
Il lavoro di un web designerIn questa serie creeremo un sito web per Tuts + Town. La città ha bisogno di un posto dove i turisti possano ottenere informazioni utili sulla città prima che visitino.
Ecco un'anteprima del sito Web:
Cosa costruiremoQuesto sito Web includerà tutti i punti di web design che impareremo a conoscere. Per te sarà un primo progetto di web design davvero bello!
Ora parliamo un po 'di quello che ci serve per arrivarci.
In primo luogo, disegneremo il nostro sito e quindi includeremo ciò che vogliamo avere sulla pagina in un file speciale. Aggiungiamo anche i link qui per i visitatori da portare in altri luoghi, come i siti web del negozio.
Lo schizzo è importante!Dopo aver redatto e scritto il file speciale per il nostro sito web, avremo bisogno di farlo sembrare bello. Questa è la sezione in cui tutte le nostre idee di colore e layout (decidendo dove vivranno tutte queste cose sullo schermo) prenderanno vita.
Come possiamo rendere il nostro sito facile da usare? Che cosa sentire vogliamo che i nostri colori diano? Dove dovrebbe essere posizionato tutto sullo schermo dello smartphone? Che dire di uno schermo pieno del computer? Che cosa font starà meglio? Queste sono tutte cose a cui dovremo pensare, ma non preoccuparti, è un processo davvero divertente e queste domande ti verranno in mente più siti web disegni.
Di seguito è un completo tabella di marcia per il viaggio che intraprenderemo per creare il nostro sito web. Ogni blocco ha un'introduzione all'argomento e viene quindi suddiviso in parti più piccole.
La nostra tabella di marciaPuoi vedere dalla stella rosa che stiamo leggendo il Intro al momento. Ora abbiamo un'idea di base su come funziona il web, il lavoro di un web designer e abbiamo preso in considerazione il progetto che progetteremo e costruire insieme.
La parte successiva è dove pensiamo alle idee e iniziamo a disegnare. Lo sketch è un modo davvero divertente per raccogliere i tuoi pensieri su un design prima di iniziare a programmare. Può essere un risparmio in tempo reale e aiutarci a mantenerci in linea.
Parleremo quindi dei file e degli strumenti di cui abbiamo bisogno per iniziare codifica parte del nostro sito web.
Hyper Text Markup Language (HTML) è quel linguaggio segreto (ma non per molto!) Usato per organizzare il nostro file di testo di cui abbiamo parlato brevemente in precedenza. Questo linguaggio aiuta i nostri browser a comprendere e visualizzare i file del sito web.
Tutto sul nostro sito Web e su tutti i siti Web relativi all'argomento vivranno all'interno di HTML elementi. Gli elementi sono parti di questo linguaggio che hanno un senso e aiuto descrivere tutto ciò che posizioniamo sulla pagina.
Non preoccuparti di cosa significhi questo codice in questo momento, purché tu sappia che ogni sito web è costituito da un documento scritto.
Fogli di stile, CSS, ci permettono di impostare lo stile (colori, caratteri, sensazione generale) per il nostro sito Web, rendendolo il più attraente e facile da usare per i suoi visitatori il più possibile.
Che aspetto ha il CSSI CSS possono anche aiutarci a mettere tutti i nostri pezzi nella pagina.
In questa parte del viaggio parleremo rapidamente del tipo di immagine che sarà inclusa nel nostro sito e di come fare un po 'di stile. Ci saranno quattro belle immagini aggiunte, cosa ne pensate di loro?
In questa parte vedremo i "mattoni" del web design. Vogliamo assicurarci di creare qualcosa che le persone useranno e che potranno usare facilmente, oltre a garantire che sia bello.
Tipografia è l'arte di organizzare il tipo e un grande seguito alla nostra nuova lezione di design, in quanto può notevolmente aggiungere o togliere il successo del nostro sito web.
Il primo esempio di tipografia sul nostro sito può essere trovato in alto:
Il colore è molto importante e molto divertente. Il colore può rendere bello un sito, oltre che avere senso, di cui parleremo tutto qui.
Finiremo questa serie di lezioni apprendendo come ottenere i file del tuo sito web su uno di quei computer speciali, a server, così tutti i tuoi amici e familiari possono vederlo su Internet. Parliamo anche di dove puoi portare i tuoi studi con il tuo nuovo titolo come "Web Designer per Tuts + Town".
Ma non preoccupiamoci troppo di ciò, siamo appena arrivati!
Nella prossima lezione passeremo direttamente all'apprendimento di come ci prepariamo a costruire un sito Web con HTML. Non posso aspettare, ci vediamo in giro per la città!
Accentsconagua