Share
Am reusit! Am creat primul nostru site de la zero și am vorbit despre câteva elemente esențiale de design, cum ar fi spațiul alb, tipografia și culoarea.
În acest tutorial final vom revizui rapid tot ce am învățat până acum despre construirea unui site web și design, despre modalitățile de a obține site-ul nostru pe Internet, astfel încât să putem direcționa prietenii și familia spre o adresă web și să atingem un pic resursele utile care avansează cu studiile noastre.
Nu uitați să puneți întrebările finale în secțiunea de comentarii din partea de jos a acestei pagini!
Să aruncăm o privire la foaia de parcurs a seriei pe care am luat-o pentru a ajunge acolo unde suntem acum.
Am început această serie prin abordarea modului în care funcționează webul. Pentru ca două computere diferite să discute între ele, ambele trebuie să fie conectate la Internet printr-un furnizor de servicii Internet (ISP).
Pentru a permite altor persoane să revadă site-ul nostru pe Internet, aceste fișiere trebuie să fie transferate (mutate) pe un server; un calculator special, cu acces direct la Internet. Vom examina acest lucru mai mult într-o secțiune de mai jos.
Rolul nostru pe Internet este cel al unui web designer. Este de datoria noastră să vă asigurați că un site arată încântător și este foarte ușor pentru utilizatorii noștri să citească și să navigheze.
Având în vedere aceste obiective, ne-am propus să începem să construim site-ul Tuts + Town cu HTML și CSS, după ce am redactat câteva schițe fantastice pe hârtie. Pentru a ne pregăti pentru această parte a procesului, trebuia să învățăm totul despre denumirea și organizarea fișierelor.
Acum știm că fișierul HTML principal este întotdeauna apelat index.html și dacă imaginile sunt situate în folderul propriu sau nu influențează src atribut în HTML.
În cele din urmă, am selectat un editor de text și am fost oficial pregătiți să începem să scriem câteva fișiere HTML și CSS!
Pentru a construi site-ul Tuts + Town am stabilit prima noastră structură HTML și apoi conectat conținutul.
Această structură a fost alcătuită din mai multe elemente cuibărit în primar html element și având această bază în loc făcute conectarea la conținutul mult mai simplu.
Odată ce conținutul a fost în loc, am putea începe să coafurăm totul cu CSS. În primul rând, trebuie să conectăm cele două documente împreună în HTML cap:
În documentul nostru CSS am reușit declara culori, dimensiuni, layout și multe altele pe elementele din documentul HTML, ceea ce duce în cele din urmă la realizarea site-ului complet.
Această secțiune a seriei a terminat cu un tutorial care discută diferitele formate de imagine disponibile pentru noi. Am vorbit despre includerea acestora în HTML și despre unele efecte pe care le putem aplica imaginilor cu CSS, cum ar fi schimbarea lor opacitate:
După cum sa menționat, toate imaginile folosite în seria Tuts + Town sunt SVG-uri, ceea ce înseamnă că pot fi redimensionate fără a pierde calitatea și pot fi ușor editate.
După ce am creat site-ul nostru, am revăzut conceptele de design de bază care au contribuit la formarea aspectului, a simțului și a utilizării site-ului.
Conținutul este cea mai importantă parte a designului web, astfel că, după ce am stabilit că conținutul nostru este util, necesar și bine organizat, ne-am mutat pe vizual.
Ierarhia vizuală a fost creată pentru site prin dimensiunea fontului, culorile și spațiile albe, la fel ca balonul de mai sus este proiectat să fie obiectul dominant în imagine.
Tipografia este peste tot unde vedem cuvinte scrise și este una dintre cele mai importante părți ale designului web. Utilizatorii noștri trebuie să poată citi conținutul, dar trebuie să ne asigurăm că fontul (fonturile) pe care le alegem corespund tonului și simțului conținutului și designului vizual.
Această secțiune a seriei a încheiat cu un tutorial privind teoria culorilor, semnificația anumitor culori, sisteme diferite de culoare pentru web și cum se selectează o paletă de succes.
Referindu-ne la roțile de culori primare și secundare ne ajută să înțelegem mai bine cum sunt create anumite culori și de ce unele culori ar putea arăta bine împreună, în timp ce altele nu.
Acum, hai să mergem prin modul în care vom merge pentru a obține site-ul nostru pe web!
Așa cum am discutat la începutul acestei serii, acest site trăiește la nivel local pe computerele individuale și nu pe Internet. În acest moment, nu putem direcționa prietenii și familia la o adresă de pe web, astfel încât ei încă nu pot vedea munca noastră uimitoare.
Așa cum am discutat în tutorialul Introducere, fișierele trebuie să trăiască pe un server pentru ca alții să le vadă pe Internet.
Procesul de obținere a unui site pe internet poate implica adesea efectuarea unei achiziții și a unei adrese de e-mail. Dacă sunteți prea tânăr pentru a avea acces la oricare dintre acestea, este mai bine să aveți un adult cu dvs. pentru următoarea secțiune.
Există o serie de servicii care vă vor ajuta gazdă fișierele noastre pentru noi, făcându-le accesibile pe Internet. Pentru această serie ne vom concentra pe găzduirea prin NeoCities și pe conceptul de bază al numelor de domenii.
NeoCities este a fantastic și gratuit opțiune pentru găzduirea directă a fișierelor pe web; deși avem încă nevoie de o adresă de e-mail pentru a vă înregistra!
Hai să trecem prin pașii pentru a ajunge la fișierele noastre găzduite aici:
Iată o privire la site-ul de pe NeoCities: tutsplustown.neocities.org
Un alt beneficiu al acestui serviciu este că nu va trebui să trecem prin procesul de cumpărare și de configurare a domeniului (adresa personalizată pentru site-uri), deși ne vom referi și la cum să procedăm în continuare.
Important! Este posibil să utilizați un nume de domeniu personalizat cu NeoCities accesând setările site-ului după configurarea inițială și urmând instrucțiunile de acolo; deși acest lucru necesită în prezent un cont actualizat de $ 5.00 USD lunar.
Domeniile sunt acele adrese personalizate pe care le trimitem oamenilor pentru a putea vizita un site. Acest pas nu a fost necesar atunci când am găzduit fișierele site-ului nostru pe NeoCities pentru că a creat o adresă specială Neocities pentru noi. Cu toate acestea, dacă căutăm să avem un nume de domeniu cu adevărat personalizat (cum ar fi tutsplustown.com de exemplu) va trebui să achiziționăm acest nume.
Ca și cu numele de utilizator NeoCities, numele de domeniu va trebui să fie unic, de asemenea; poate dura ceva timp pentru a găsi un nume care nu este deja luat.
Iată câteva servicii care ne permit să achiziționăm nume de domenii odată ce creăm un cont:
Ultimul pas pentru a configura un domeniu personalizat poate fi completat prin serviciul de găzduire (cum ar fi Neocities sau BitBalloon menționat mai jos) odată ce fișierele sunt transferate.
Dacă alegem să nu folosim NeoCities, există și alte câteva companii de hosting care se remarcă că sunt deosebit de accesibile și mai ușor de folosit, dar probabil cel care se evidențiază cel mai mult din aceste motive este BitBalloon.
BitBalloon este gratuit pentru a încerca, dar necesită plata pentru a include un domeniu personalizat, la fel ca NeoCities. Ușurința în care fișierele pot fi trase și aruncate în interfață face ca această opțiune destul de interesantă pentru site-urile de bază cum ar fi Tuts + Town.
Odată ce fișierele sunt transferate, putem finaliza procesul de configurare personalizată a domeniului prin intermediul instrumentelor din tabloul de bord BitBalloon.
Site-ul nostru Tuts + Town are adresa proprie de site-ul pe care a obtinut-o si am creat-o similar cu modul pe care tocmai l-am revizuit: tutsplustown.com.
În timp ce această serie a oferit o introducere în designul web, s-ar putea să ajungem rapid să ne dorim să ne avansăm abilitățile odată ce noi practica, practica, practica subiectele pe care le-am revizuit aici.
Cartea "Construieste-ti propriul site web, un ghid comic pentru HTML, CSS si Wordpress" de Nate Cooper ofera o fundatie solida pentru crearea unui site printr-o poveste distractiva povestit intr-un format de benzi desenate.
Shay Howe a scris ca serie de tutoriale în profunzime atât pentru începători cât și pentru nivel avansat HTML și CSS:
Responsabilitatea web design-ului se referă la proiectarea site-urilor care iau în calcul dimensiunile diferite ale ecranului. Ne petrecem mult timp pe smartphone-urile noastre, de exemplu, iar ca designeri trebuie să ne asigurăm că site-ul nostru funcționează pe aceste ecrane mai mici, precum și un ecran desktop de dimensiune completă.
Există un tutorial fantastic pentru începători de Shay Howe pe această temă.
Am folosit pixeli în întreaga serie ca unitate de măsură pe web. Utilizarea pixelilor este perfectă atunci când începeți, cu toate acestea, cu cât veți obține mai multă experiență, veți realiza cât de limitate este. Este o unitate de măsură atât de inflexibilă care nu funcționează bine în designul receptiv.
În ceea ce privește proiectarea în diferite dimensiuni ale ecranului, există mai multe alternative care vor fi mai flexibile decât pixelii, cum ar fi procente și REMS.
În timp ce am discutat pe scurt despre flexbox în tutorialul CSS Layout, există mai multe lucruri pe care le putem realiza cu ajutorul planurilor. Există câteva locuri super pentru a învăța mai multe, cum ar fi acest Ghid complet pentru Flexbox și o diagramă Chescheet Flexbox.
În ceea ce privește aspectul în ansamblu și nu doar flexbox-ul, există un site minunat care ne ajută prin elementele de bază.
În timp ce există mult mai mult, putem învăța să consolidăm și să dezvoltăm abilitățile noastre de web design, am realizat atât de mult în această serie și acum avem o înțelegere mult mai bună a principiilor de bază atât pentru proiectarea cât și pentru construirea unui site.
Am adus oficial un site web la viață de la schițe pe hârtie la un site real cu adresa sa de web proprie; toate în ziua unui web designer!
Site-ul nostru Tuts + Town va servi ca un ghid frumos și ușor de folosit pentru turiștii care doresc să viziteze, așa că vă mulțumesc pentru toată munca dvs. grea.
Accentsconagua