Share
Bine ați venit la a doua lecție din seria Web Design pentru copii!
În această lecție vom învăța totul despre unele lucruri pe care trebuie să le facem și despre instrumentele de care avem nevoie înainte de a începe să scriem codul pentru site-ul nostru Tuts + Town; ajungem acolo, promit! De asemenea, nu uitați să puneți întrebări în zona de comentarii din partea de jos a acestei pagini.
Primul lucru este primul, totuși, să ne uităm mai atent la ceea ce vom crea împreună!
Este foarte util să schițăm ideile pe care le avem în capul nostru înainte de a începe să le construim. Este un exercițiu care ne poate salva mult timp când ajungem la partea de codificare.
Poate că ceea ce se află în capul nostru nu arată exact când este scris pe hârtie? Poate că niște probleme și întrebări noi apar în schița noastră? Poate că designul nostru este prea ocupat? Multe dintre aceste probleme se vor arăta în schițele noastre.
este O.K să nu ne mai placăm schițele la început, exact asta ne dorim! Vrem să obținem toate acestea pe hârtie.
Avem nevoie de un site web pentru turiști care să viziteze și să învețe despre ce magazine și firme oferă orașul nostru. Vom grupa aceste afaceri împreună într-un mod care are sens, cum ar fi "hoteluri" în cadrul unui grup și "restaurante" în altul. Vom dori să avem linkuri către site-urile proprii ale companiei, astfel încât vizitatorii noștri să le poată da clic pentru a obține mai multe detalii.
Există, de asemenea, câteva imagini pe care le vom folosi pentru a da un sentiment de primire orașului.
Iată o privire la schița care a condus la previzualizarea completă și colorată a site-ului:
Acesta este site-ul exact pe care îl vom crea de la zero! Destul de curat.
Pentru a scrie codul HTML (toate lucrurile despre limbajul secret despre care am vorbit în prima lecție) avem nevoie de o editor de text să-l tastați.
Cel mai bine este să nu folosiți ceva asemănător cu Microsoft Word pentru acest lucru, ca fiind unul potrivit cod editorul de text va face munca mult mai usoara. A editor de coduri va înțelege ceea ce tastăm și vom face tot codul cu culorile potrivite, în timp ce Microsoft Word este mai bine pentru scrierea rapoartelor școlare, de exemplu.
Există mai mulți editori de coduri gratis, gratuite pe care le puteți descărca de pe web. Dacă nu sunteți sigur cum să descărcați ceva, sau nu sunteți sigur dacă ar trebui, este întotdeauna cel mai bine să întrebați un adult.
Bluefish este excelent pentru computerele care rulează Windows, în timp ce Atom va fi potrivit pentru un Mac.
Vom sari in ceea ce inseamna acest text in urmatorul curs, insa aici este o privire asupra a ceea ce va puteti astepta sa tastati.
Așa cum am vorbit puțin despre deja, un site web este doar o grămadă de fișiere. Aceste fișiere trebuie să trăiască în același director, pentru ca browserul să le poată obține.
Site - ul Tuts + Town va avea un fișier HTML (salvat cu .html extensie de fișier la sfârșit), un fișier CSS (salvat cu .css extensie de fișier la sfârșit) și patru imagini care vor fi salvate într-un director numit "imagini". Dosarul Imagini va trăi în același director principal cu fișierele HTML și CSS.
A extensie de fișier este grupul de litere care vin după punctul într-un nume de fișier, spunându-ne ce fel de fișier este:
Așa cum am menționat, imaginile noastre vor fi salvate într-un folder numit "imagini" în directorul principal al site-ului nostru, după cum urmează:
În imaginea de mai sus avem o imagine numită town.svg ( .svg extensia este doar un fel de imagine) pe care le-am pus într-un folder suplimentar numit "imagini". Acest lucru ajută la menținerea lucrurilor ordonate:
Ambele moduri de a face lucrurile sunt corecte, dar vom folosi foldere suplimentare, cum ar fi imaginea din dreapta.
Vom vedea munca noastră direct în browser-, cum ar fi cel pe care îl utilizați acum pentru a vedea această pagină Tuts +!
Există mai multe browsere disponibile pentru descărcare gratuită dacă nu aveți deja unul, cum ar fi Google Chrome și Firefox. Dacă utilizați un computer Mac, veți avea deja instalat Safari, frumos!
Vom construi site-ul nostru direct pe computerele noastre și nu internetul. Dacă vă amintiți în prima lecție, am explicat că nu putem vedea un site pe Internet dacă nu este pe un server.
Imaginea de mai jos arată cum ar putea arăta un site terminat ca fiind privit la nivel local (nu pe Internet) într-un browser. În loc să vedem o adresă web ca www.tutsplus.com, vedem site-urile local adresa, care pare un pic diferit:
În această lecție ne-am uitat la câteva lucruri importante care ne vor ajuta să ne pregătim să scriem codul site-ului nostru. Ne-am uitat la modul de pregătire a fișierelor și a unor instrumente cum ar fi a editor de text și a browser-.
În următoarea lecție vom merge direct în partea de codificare a site-ului nostru! Vom organiza (știu, organizarea atât de mult!) Și adăugați un cod în fișierul nostru HTML. Aici începe distracția!
Ne vedem în jurul orașului!
Accentsconagua