Johdatus HTML:ään ja CSS:ään suunnittelijoille

Johdatus HTML:ään ja CSS:ään suunnittelijoille.

Graafisena suunnittelijana olet todennäköisesti tietoinen suunnittelun ja teknologian jatkuvasti kehittyvästä suhteesta. Tämä pätee erityisesti niille, jotka ovat mukana web-suunnittelussa. Tällä alalla meillä on oltava perusymmärrys siitä, kuinka huolellisesti laadituista asetteluistamme tulee eläviä verkkosivuja. Kun ymmärrämme tämän prosessin perusteet (ja sen rajoitukset), voimme kommunikoida tarkasti kehittäjien kanssa ja luoda sivustot, joissa on täydellinen pikseli.

Tämä ei tarkoita, että sinun on osattava koodata verkkosivusto ylhäältä alas (vaikka se olisi hienoa!), se tarkoittaa vain, että sinun on ymmärrettävä perusasiat. Tässä viestissä aloitamme hyvin yksinkertaisella johdatuksella HTML:ään. Opit leikkaamaan web-malleja Photoshopissa ja muotoilemaan HTML:ää CSS:n avulla. Johdatus HTML:ään ja CSS:ään suunnittelijoille

Mikä on HTML?

Melkein kaikki, mitä näet, kun selaat verkkoa, on HTML (hypertext markup language) -asiakirja. hypertekstin on tekstiä, joka viittaa ja viittaa muuhun näytölläsi olevaan tekstiin, jolloin pääset sisältöön yhdellä napsautuksella. Merkintäkieli on joukko tunnisteita, jotka on suljettu hakasulkeisiin <>. Nämä HTML-tunnisteet tulevat yleensä pareittain:

<aloitustunniste> : Tunnetaan myös alkutunnisteena.
: kutsutaan myös sulkevaksi tunnisteeksi ja sisältää vinoviivan /

Kun liität sisällön näiden kahden tunnisteen väliin, koko asia kutsutaan elementti :

Tämä on kappale

Kun tämä kieli käännetään Internetiin, katsojat eivät näe tunnisteita – he näkevät vain niiden välisen sisällön.

HTML 5, HTML:n nykyinen versio, sisältää noin 100 tagia attribuutteineen, jotka muuttavat niiden toimintaa tai ulkonäköä. Sinun tarvitsee vain tietää 30–40 näistä tunnisteista, jotta voit ymmärtää ja luoda HTML-koodia. Katsokaa niitä ja huomaa, kuinka ne on ryhmitelty toiminnon mukaan. Katsotaan tämä käytännössä.

Kuvien leikkaaminen Photoshopissa.

Johdatus HTML:ään ja CSS:ään suunnittelijoille

Ennen koodaamista meidän on päätettävä, mitkä verkkosivuston osiot sisältävät kuvia ja mitkä voidaan koodata. Hyödynnetään väline Photoshop Viipale (piilotettu alivalikon alle Rajaustyökalu ) ja korosta alueita, kuten valokuva burritosta ja taco joan .

Nyt meidän on vietävä katkelmamme - valitse Tiedosto > Tallenna verkkoon (Alt + Vaihto + Ctrl + S). Kun tietty katkelma on valittu, voit määrittää sen vientiasetukset ikkunan oikealla puolella (JPG, PNG jne.). Jos kaksoisnapsautat tiettyä fragmenttia, näet ponnahdusikkunan " Fragmenttiparametrit" - Tämän avulla voit nimetä tiettyjä fragmenttitiedostoja.

Oletuksena kaikki kuvat sijoitetaan: /images/-alihakemistoon. Jos haluat viedä vain luomasi katkelmat, valitse " Kaikki mukautetut fragmentit" "Tallenna"-ikkunassa. Johdatus HTML:ään ja CSS:ään suunnittelijoille

HTML-perusasiakirjan luominen

Meillä on slicerimme, luodaan HTML-perusdokumentti. Johdatus HTML:ään ja CSS:ään suunnittelijoille

Rivi 1 : Ilmoittaa, että HTML 5 -murre on asiakirjan kieli.

Rivi 2 : elementti edustaa HTML-dokumentin juurta. Tämä on pakollinen säilö, joka ilmaisee asiakirjamme rajat.

3 : luku sisältää näkymättömiä sivuelementtejä, kuten metatietoja, otsikkoa jne.

Rivi 4 : Tämä on asiakirjan koodausilmoitus − utf-8 - turvallinen valinta - voit lukea lisää HTML-merkkikoodauksista täällä .

Rivi 5 : Esimerkkisivu Tämä on sivun otsikko, joka näkyy selaimen otsikkorivillä.

6 : sulkee tagin riviltä 3.

Rivi 7 : Tämä body-elementti sisältää sivun kaiken näkyvän sisällön.

Rivi 8 : sulkee tagin riviltä 2. Tämä elementti merkitsee asiakirjan lopun. Johdatus HTML:ään ja CSS:ään suunnittelijoille

On myös muita mahdollisia tapoja koodata sama malli. Käytämme HTML 5:n semanttisia tunnisteita (otsikko, navigointi, artikkeli, alatunniste) dokumentin perusrakenteen luomiseen:

Tämä on asettelu käännettynä HTML:ksi:

Muutama huomautus:

Rivit 11 ja 12 : Elementit ovat Internetin ydin, koska niitä käytetään luomaan hyperlinkkejä . Ne on sidottu HREF-attribuuttiin ja niiden on sitouduttava kohteeseen URL .

Rivit 18-20 : Nämä ovat joitain tekstin muotoilutunnisteita: tarkoittaa ensimmäisen tason otsikkoa; tarkoittaa kappaletta; tarkoittaa rivinvaihtoa.

Muotoilu CSS (Cascading Style Sheets) -tyylisivuilla.

Johdatus HTML:ään ja CSS:ään suunnittelijoille

Kun avaat vain HTML-tiedoston verkkoselaimessa, huomaat, että se ei ole muotoiltu kuten edellinen mallimme. Tämä johtuu siitä, että HTML-koodi ei riitä - meidän on alustettava se CSS (Cascading Style Sheets) . CSS on tyylisivukieli, jota käytetään HTML-elementtien muotoiluun.

Mutta miksi meidän pitää yhdistää HTML CCS:ään? Jokin aika sitten muotoilu saatiin aikaan lisäämällä attribuutteja HTML-tunnisteisiin. Tämä johti kuitenkin lukemattomaan ja ylläpitämättömään koodiin. Ratkaisu oli erottaa asiakirjan sisältö (HTML) asiakirjan muotoilusta (CSS).

Let's Breakdown Simple CSS-sääntö : .

Valitsin : Tämä on HTML-elementti, jonka haluat muokata. Esimerkiksi: <artikkeli>

Mainos : CSS-säännössä voi olla yksi tai useampi ilmoitus. Jokainen ilmoitus koostuu ominaisuudesta ja arvosta ja on erotettu puolipisteellä. Asetat ilmoitukset aaltosulkeisiin {}. Johdatus HTML:ään ja CSS:ään suunnittelijoille

Omaisuus : tämä tyylin ominaisuus, jonka haluat muuttaa. Esimerkiksi: taustaväri, koko fontti jne.

Arvo : Jokaiseen ominaisuuteen liittyy arvo. Esimerkiksi: #ffcc11 (taustavärille), 16px (fontin koolle) jne.

Siellä monet CSS-ominaisuudet, joka voidaan asettaa jokaiselle HTML-elementille, mutta kaikkia niitä ei tarvitse kirjoittaa itse. Voit luottaa selaimesi oletusasetuksiin tai käyttää perustyylitaulukkoa, joka palauttaa selaimesi kohtuulliset asetukset. Itse asiassa siihen kirjoitusvalitsimia itse tekeminen vaatii paljon tietoa ja kokemusta.

Katsotaanpa joitain CSS-sääntöjä, joita tarvitaan yksinkertaisen suunnittelumme muotoiluun.

CSS-paikannusominaisuudet : olemassa 4 erilaista menetelmää (staattinen, kiinteä, suhteellinen ja absoluuttinen), joiden avulla voimme sijoittaa tiettyjä elementtejä suunnittelussamme. Kun olet asettanut jonkin näistä menetelmistä, voit sijoittaa elementit käyttämällä ylä-, oikea-, ala- ja vasenta ominaisuuksia - ne toimivat eri tavalla riippuen siitä, mitä neljästä menetelmästä käytät. Tässä tapauksessa haluaisimme sijoittua plate_image, käyttämällä ehdoton paikannus.

CSS-laatikkomalli : tämä malli on kehys, joka sisältää kaikki HTML-elementit, mukaan lukien marginaalit, reunat, täyte ja sisältö. Reunus on näkymätön alue reunuksen ympärillä ja pehmuste reunuksen ja sisällön välillä.

Jos todella haluat oppia lisää koodaamisesta, katsomaan tälle hienolle sivustolle: Codecademy .