Uvod u HTML i CSS za dizajnere

Uvod u HTML i CSS za dizajnere.

Kao grafički dizajner, vjerojatno ste svjesni stalnog razvoja odnosa između dizajna i tehnologije. To posebno vrijedi za one koji se bave web dizajnom. U ovoj industriji moramo imati osnovno razumijevanje kako naši pažljivo izrađeni izgledi postaju žive web stranice. Kada razumijemo osnove ovog procesa (i njegova ograničenja), možemo točno komunicirati s programerima i stvarati web stranice sa savršenim piksel.

To ne znači da trebate znati kako kodirati web stranicu od vrha do dna (iako bi to bilo sjajno!), to samo znači da trebate razumjeti osnove. U ovom ćemo postu započeti s vrlo osnovnim uvodom u HTML. Naučit ćete kako izrezati web dizajn u Photoshopu i formatirati HTML pomoću CSS-a. Uvod u HTML i CSS za dizajnere

Što je HTML?

Gotovo sve što vidite dok pregledavate web dokument je hipertekstualnog označnog jezika (HTML). Hipertekst je tekst koji upućuje i upućuje na drugi tekst na vašem zaslonu, omogućujući vam pristup sadržaju jednostavnim klikom. Označni jezik je skup oznaka u uglastim zagradama <>. Ove HTML oznake obično dolaze u paru:

<početna oznaka> : Također poznat kao uvodna oznaka.
: naziva se i završna oznaka i uključuje kosu crtu /

Kada priložite sadržaj između ove dvije oznake, cijela stvar se zove element :

Ovo je paragraf

Kada se ovaj jezik prevede na Internet, gledatelji neće vidjeti oznake – vidjet će samo sadržaj između njih.

HTML 5, trenutna verzija HTML-a, sadrži oko 100 oznaka s atributima koji mijenjaju njihovu funkciju ili izgled. Trebate znati samo 30-40 ovih oznaka da biste počeli razumjeti i stvarati HTML. Pogledajte ih i uočite kako su grupirani prema funkciji. Pogledajmo ovo na djelu.

Rezanje slika u Photoshopu.

Uvod u HTML i CSS za dizajnere

Prije kodiranja moramo odlučiti koji dijelovi web stranice trebaju sadržavati slike, a koji se mogu kodirati. Iskoristimo alat Photoshop Kriška (skriven u podizborniku Alat za izrezivanje ) i označite područja kao što je fotografija burrita i taco joan .

Sada moramo izvesti naše isječke - odaberite File > Save for Web (Alt + Shift + Ctrl + S). Kada je odabran određeni isječak, možete postaviti njegove opcije izvoza na desnoj strani prozora (JPG, PNG, itd.). Ako dvaput kliknete određeni fragment, vidjet ćete skočni prozor " parametri fragmenta" - Ovo vam omogućuje imenovanje specifičnih datoteka fragmenata.

Prema zadanim postavkama, sve slike su smještene u: /images/ poddirektorij. Ako želite izvesti samo isječke koje ste izradili, odaberite " Svi prilagođeni fragmenti" u prozoru "Spremi". Uvod u HTML i CSS za dizajnere

Stvaranje osnovnog HTML dokumenta

Imamo svoje rezače, stvorimo osnovni HTML dokument. Uvod u HTML i CSS za dizajnere

Linija 1 : Izjavljuje da je HTML 5 dijalekt jezik dokumenta.

Linija 2 : element predstavlja korijen HTML dokumenta. Ovo je obavezan spremnik koji označava granice našeg dokumenta.

3 : poglavlje sadrži nevidljive elemente stranice kao što su meta informacije, naslov itd.

Linija 4 : Ovo je deklaracija o kodiranju dokumenta − utf-8 - siguran izbor - možete pročitati više o HTML kodiranju znakova здесь .

Linija 5 : Ogledna stranica Ovo je naslov stranice koji se pojavljuje u naslovnoj traci preglednika.

6 : zatvara oznaku iz retka 3.

Linija 7 : Ovaj element tijela sadržavat će sav vidljivi sadržaj stranice.

Linija 8 : zatvara oznaku iz retka 2. Ovaj element označava kraj dokumenta. Uvod u HTML i CSS za dizajnere

Postoje i drugi mogući načini kodiranja istog dizajna. Koristit ćemo HTML 5 semantičke oznake (zaglavlje, nav, članak, podnožje) za stvaranje osnovne strukture dokumenta:

Ovo je izgled preveden u HTML:

Nekoliko napomena:

Redci 11 i 12 : Elementi su bit interneta jer se koriste za stvaranje hiperveze . Oni su vezani za HREF atribut i moraju vezati cilj URL .

Redci 18–20 : Ovo su neke oznake za oblikovanje teksta: označava naslov prve razine; označava odlomak; znači prijelom retka.

Oblikovanje pomoću Cascading Style Sheets (CSS).

Uvod u HTML i CSS za dizajnere

Kada otvorite samo HTML datoteku u web pregledniku, vidjet ćete da nije formatirana kao naš prethodni dizajn. To je zato što HTML kod nije dovoljan - moramo ga formatirati Kaskadni listovi stilova (CSS) . CSS je stilski jezik koji se koristi za formatiranje HTML elemenata.

Ali zašto točno trebamo kombinirati HTML sa CCS? Prije nekog vremena formatiranje je postignuto dodavanjem atributa HTML oznakama. Međutim, to je rezultiralo nečitljivim i neodrživim kodom. Rješenje je bilo odvojiti sadržaj dokumenta (HTML) od oblikovanja dokumenta (CSS).

Let's Breakdown Simple CSS pravilo : .

Selektor : Ovo je HTML element koji želite stilizirati. Na primjer: <članak>

Oglas : CSS pravilo može imati jednu ili više deklaracija. Svaka deklaracija sastoji se od svojstva i vrijednosti te je odvojena točkom i zarezom. Deklaracije stavljate u vitičaste zagrade {}. Uvod u HTML i CSS za dizajnere

Vlasništvo : ovo je karakteristika stila, koje želite promijeniti. Na primjer: boja pozadine, veličina font itd.

Vrijednost : Svako svojstvo ima pridruženu vrijednost. Na primjer: #ffcc11 (za boju pozadine), 16px (za veličinu fonta), itd.

Tamo mnoga CSS svojstva, koji se mogu postaviti za svaki HTML element, ali nema potrebe da ih sve sami pišete. Možete se osloniti na zadane postavke preglednika ili koristiti osnovni stilski list koji vraća preglednik na razumne postavke. Zapravo, do selektori pisanja to učiniti sami zahtijeva puno znanja i iskustva.

Pogledajmo neka CSS pravila potrebna za formatiranje našeg jednostavnog dizajna.

Svojstva CSS pozicioniranja : postoji 4 različite metode (statički, fiksni, relativni i apsolutni) koji nam omogućuju pozicioniranje određenih elemenata u našem dizajnu. Nakon postavljanja jedne od ovih metoda, možete pozicionirati elemente pomoću svojstava top, right, bottom i left - oni će raditi drugačije ovisno o tome koju od 4 metode koristite. U ovom slučaju želimo pozicionirati slika_ploče, koristeći apsolutna pozicioniranje.

CSS okvirni model : ovaj model je okvir koji obuhvaća sve HTML elemente, uključujući margine, obrube, ispune i sadržaj. Margina je nevidljivo područje oko obruba i ispuna između obruba i sadržaja.

Ako STVARNO želite naučiti više o kodiranju, Pogledaj na ovu cool stranicu: Codecademy .