Web design pentru copii Bine ati venit la Tuts + Town!

Bine ati venit la Tuts + Town, unde toata lumea iubeste designul web! În această serie vom învăța totul despre proiectarea și construirea unui site web. Pentru a ne ajuta, vom face un site împreună.

Aceste lecții (sau Tutoriale) Vă va oferi un ghid pas cu pas pentru aducerea unui site la viață. Toate fișele de exerciții vor fi incluse la sfârșitul fiecărei lecții, astfel încât să puteți compara munca proprie pe măsură ce mergeți.

Deci, vă rog să veniți, să vă simțiți confortabil și să creăm ceva pentru oamenii din orașul Tuts + Town!

Cum funcționează Webul?

Să facem un pas înapoi și să ne gândim la modul în care funcționează webul.

Când două calculatoare sunt conectate la Internet (care este afișat ca o linie galbenă în imaginea de mai jos), ei pot vorbi unul cu celălalt.

Un server (caseta albastră) este un computer special care conține fișiere de pagini web. Calculatorul dvs. la domiciliu sau la școală nu este un server, deoarece nu este conectat direct la Internet. Conectam la Internet printr-un Furnizor de servicii de internet (ISP).

Conținutul unui site (toate lucrurile despre care se vorbește un site web) este organizat în cadrul unui set special de reguli pe care computerele îl înțeleg; cum ar fi vorbi într-un limbaj secret, codificat, cu excepția că vom fi în curând în acest mic secret, de asemenea!

Cum se conectează computerul dvs. la web

În această imagine browser- solicită să vizualizeze www.tutsplus.com de pe serverul unde locuiesc fișierele site-ului. Serverul trimite fișierele înapoi și browserul le traduce pentru a afișa o pagină pe ecran. Și asta se întâmplă foarte repede!

Este vorba despre asta comunicare și partajare informație.

Din acest motiv, un site pe care îl scrieți la nivel local (pe computerul dvs.) nu pot fi văzute de alte persoane pe alt computer, până când mutați fișierele pe un server. Ne vom uita la asta mai târziu.

Un job Web Designer

Un loc de muncă web designer este foarte important. Toate lucrurile care au loc în imaginea de mai sus se întâmplă dintr-un singur motiv: pentru a vedea un site web. Un job web designer este acela de a decide cum arată și funcționează acest site web și chiar și alte lucruri, cum ar fi să vă asigurați că site-ul este accesibil vizitatorilor cu handicap (în același mod în care sunteți vizitator la Tuts + chiar acum).

Un job de designer web

Proiectul nostru

În această serie vom crea un site web pentru Tuts + Town. Orașul are nevoie de un loc unde vizitatorii pot obține informații utile despre oraș înainte de a le vizita.

Iată o previzualizare a site-ului: 

Ce vom construi

Acest site web va include toate punctele de design pe care le vom învăța. Acesta va fi un foarte elegant proiect de design web pentru tine!

Schițarea și construirea

Acum hai să vorbim puțin despre ceea ce trebuie să ajungem acolo.

În primul rând, vom elabora site-ul nostru și apoi vom include ceea ce dorim să avem pe pagină într-un fișier special. De asemenea, vom adăuga linkuri aici pentru ca vizitatorii să poată fi luați în alte locuri, cum ar fi site-urile magazinelor.

Schitarea este importantă!

Coafura

După ce vom elabora și scrie fișierul special pentru site-ul nostru, va trebui să îl facem bine. Aceasta este secțiunea în care toate ideile noastre de culoare și aspect (care decid unde toate aceste lucruri vor trăi pe ecran) vor veni la viață.

Cum putem face site-ul nostru usor de folosit? Ce simți Vrem culorile noastre să dea? Unde ar trebui să fie plasat totul pe un ecran smartphone? Ce zici de ecranul unui computer complet? Ce font va arata cel mai bine? Acestea sunt toate lucrurile pe care va trebui să ne gândim, dar nu vă faceți griji, este un proces foarte distractiv și aceste întrebări vă vor veni în mod natural mai multe site-uri pe care le proiectați.

Harta seriei

Mai jos este completă foaie de parcurs pentru călătoria pe care o vom lua pentru a crea site-ul nostru. Fiecare bloc are o introducere la subiect și apoi este împărțit în bucăți mai mici. 

Foaia de parcurs

Introducere

Puteți vedea de către starul roz faptul că citim introducere pentru moment. Acum avem o idee de bază despre modul în care funcționează web-ul, un loc de muncă al unui designer web și au atins punctul culminant al proiectului pe care îl vom proiecta și construirea împreună.

Construirea unui site Web

Partea următoare este locul în care ne gândim ideile și începem să schițăm. Schițarea este un mod foarte distractiv de a vă aduna gândurile pe un design înainte de a începe codarea. Acesta poate fi un economizor de timp real și ne ajută să ne menținem pe drumul cel bun.

Apoi vom vorbi despre fișierele și instrumentele de care avem nevoie pentru a începe de codificare parte a site-ului nostru.

HTML

HyperText Markup Language (HTML) este acel limbaj secret (dar nu pentru mult timp) folosit pentru a ne organiza fișierul text pe care l-am vorbit pe scurt mai devreme. Această limbă ajută browserele noastre să înțeleagă și să afișeze fișierele site-urilor Web.

Totul de pe site-ul nostru, și toate site-urile web pentru acest lucru, va trăi în HTML element. Elementele sunt biți ai acestui limbaj care au a sens și ajutor descrie tot ce plasăm pe pagină.

Nu vă faceți griji cu privire la ceea ce înseamnă acest cod în acest moment, atâta timp cât știți că fiecare site web este realizat dintr-un document scris.

CSS

Cascade de stil cascadă, CSS, ne permite să setăm stilul (culorile, fonturile, simțul general) pentru site-ul nostru, făcând-o la fel de atractivă și ușor de folosit pentru vizitatorii săi.

Cum arată CSS

CSS Layout

CSS ne poate ajuta să ne punem toate piesele pe pagină.

Imagini

În această parte a călătoriei vom vorbi repede despre tipul de imagine care va fi inclus pe site-ul nostru și despre cum să facem un stil pentru el. Vor fi adăugate patru imagini minunate, ce credeți despre ele?

Bazele de proiectare

În această parte vom analiza "blocurile" de web design. Vrem să ne asigurăm că facem ceva pe care oamenii îl vor folosi și îl pot folosi cu ușurință, precum și pentru a vă asigura că este frumos.

Tipografie

Tipografie este arta de aranjare a tipului și o foarte bună urmărire a noii noastre lecții de design, deoarece aceasta poate să adauge sau să renunțe la succesul site-ului nostru.

Primul exemplu de tipografie pe site-ul nostru poate fi găsit chiar la început:

Culoare

Culoarea este foarte importantă și foarte distractivă. Culoarea poate face un site frumos, la fel de bine sens, despre care vom vorbi aici despre asta.

Sfârșitul seriei

Vom termina această serie de lecții învățând cum să obțineți fișierele site-ului dvs. pe unul dintre acele computere speciale, a Server, astfel încât toți prietenii și familia dvs. o pot vedea pe Internet. Vom vorbi, de asemenea, despre locul în care vă puteți lua studiile cu noul dvs. titlu ca "Web Designer pentru Tuts + Town".

Dar să nu ne îngrijorăm prea mult de asta, tocmai am ajuns aici!

Ne vedem în curând!

În următoarea lecție vom începe să învățăm cum ne pregătim pentru construirea unui site web cu HTML. Nu pot să aștept, să te văd în oraș!