Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Web Design pentru copii: Pregătirea pentru construirea site-ului web

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Romanian (Română) translation by Adelina Vasiliu (you can also view the original English article)

Bine ati venit la a doua lecţie din seria Web Design pentru copii!

În această lecţie vom afla totul despre unele lucruri pe care trebuie să facem şi despre instrumentele de care avem nevoie înainte de a începe scrierea codului pentru site-ul orașului Tuts+; ajungem acolo, promit! De asemenea, nu uitaţi să puneți întrebări în zona de comentarii, în partea de jos a acestei pagini.

Mai întâi, să aruncăm o privire mai atentă la exact ceea ce vom crea împreună!

Schiţa

E super util să schiţăm idei noi înainte de a începe să le punem în aplicare. Acesta este un exerciţiu care ne poate salva mult timp când ajungem la partea de codare.

Poate ce credem ca ar arăta bine nu se dovedește a fi ce trebuie când ajunge pe hârtie? Poate în schiţa noastră apar unele noi probleme şi întrebări? Poate designul este prea aglomerat? Multe dintre aceste probleme se vor arăta în schițe.

Este OK să nu ne placă schițele la prima vedere, e exact ceea ce vrem să se întâmple! La acest stadiu, ne dorim să rezolvăm din probleme pe hârtie.

Schița Site-ului Web a Orașului Tuts+

Avem nevoie de un site web pentru turiștii care să ne viziteze şi să afle despre ce magazine şi întreprinderi oferă oraşul nostru. Vom grupa aceste întreprinderi împreună într-un mod care să aibă sens, cum ar fi „Hoteluri” într-un grup şi „Restaurante” în altul. Vom dori să avem link-uri către site-urile diferitelor afaceri, astfel încât vizitatorii să dea clic pe ele pentru a obţine mai multe detalii.

Vor fi și câteva imagini pe care pe vom folosi pentru a da orașului o atmosferă primitoare.

Aici avem schița care a dus la previzualizarea de mai jos a site-ului nostru - stilizat și colorat.

Aceste este exact site-ul web pe care îl vom crea de la 0! Destul de frumos.

Editoare

Pentru a scrie cod HTML (limbajul secret despre care am vorbit în prima lecţie), avem nevoie de un editor de text în care îl tastăm.

Nu trebuie să folosim programe cum este Microsoft Word, pentru că avem nevoie de un editor de text corespunzător care să ne ușureze munca. Un editor de cod va întelege ceea ce tastezi şi va afișa codul în mai multe culori, în timp ce Microsoft Word este potrivit pentru scrierea referatelor de școală.

Există mai multe editoare bune, gratuite, pe care le poți descărca de pe web. Dacă nu ești sigur dacă e bine să downlodezi ceva,cel mai bine întrebi un adult.

Bluefish este mai potrivit pentru calculatoare care rulează Windows, în timp ce Atom este adecvat pentru Mac.

Vom explica ceea ce înseamnă acest text în cursul următor, aici poți vedea cam cum arată ce vom tasta.

Fişiere, fişiere, fişiere

Aşa cum am menționat deja, un site este doar o grămadă de fişiere. Aceste fişiere trebuie să locuiască în acelaşi folder,pentru ca browserul sa ajungă la ele.

Site-ul Oraşul Tuts+ va avea un fişier HTML (salvat cu extensia .html la sfârşit), un fişier CSS (salvat cu o extensie de fişier .css la sfârşit) şi patru imagini, care vor fi salvate într-un folder numit „imagini”. Folderul cu imagini se va găsi în același folderul principal cu fişierele HTML şi CSS.

Extensia unui fișier este grupul de litere care vin după punct într-un nume de fişier și ne spune ce fel de fişier este:

După cum am spus, imaginile vor fi salvate într-un folder numit „imagini” înăuntrul folderului principal al site-ului.

Mai sus avem o imagine numit town.svg (extensia .svg este doar un fel de imagine), pe care le-am pus într-un folder suplimentar, numit „imagini”. Facem acest lucru pentru a păstra lucrurile ordonate.

Ambele moduri de a face lucrurile sunt corecte, dar vom folosi foldere extra, ca în imaginea din dreapta.

Browsere

Vom vedea munca noastră chiar în browser, ca cel pe care îl folosesti acum să vezi pagina Tuts+!

Există mai multe browsere disponibile pentru download gratuit, dacă nu aveţi deja unul, cum ar fi Google Chrome şi Firefox. Dacă utilizaţi un computer Mac, deja aveți Safari instalat, este ce ne trebuie!

Nu suntem online, încă

Vom construi site-ul direct pe computerele noastre şi nu pe Internet. Dacă îți amintești prima lecţie, am explicat că nu putem vedea un site web pe Internet, dacă nu este pe un server.

Imaginea de mai jos arată un site web finalizat, vizualizat local (nu pe Internet) într-un browser. În loc să vedem o adresă web ca www.tutsplus.com, vedem adresa locală a site-ului, care arată un pic diferit:

Bravo!

În această lecţie, ne-am aplecat asupra unor aspecte importante care ne ajută la pregătirea pentru codarea site-ului. Ne-am uitat la modul de a pregăti fişiere şi unele instrumente ca un editor de text şi un browser.

În următoarea lecţie, vom trece la partea de codare a site-ului web! Vom organiza (da, știu, e multă organizare de făcut!) și vom adăuga puțin cod în fișierul nostru HTML. Și aici începe distracția!

Ne vedem prin oraș!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.