Sissejuhatus HTML-i ja CSS-i disaineritele

Sissejuhatus HTML-i ja CSS-i disaineritele.

Graafilise disainerina olete ilmselt teadlik disaini ja tehnoloogia vahelisest pidevalt arenevast seosest. See kehtib eriti veebidisainiga tegelevate inimeste kohta. Selles valdkonnas peame omama põhiteadmisi sellest, kuidas meie hoolikalt koostatud paigutused muutuvad elavateks veebilehtedeks. Kui mõistame selle protsessi põhitõdesid (ja selle piiranguid), saame arendajatega täpselt suhelda ja luua täiuslikuga veebisaidid piksel.

See ei tähenda, et peate teadma, kuidas veebisaiti ülalt alla kodeerida (kuigi see oleks suurepärane!), see tähendab, et peate mõistma põhitõdesid. Selles postituses alustame HTML-i väga lihtsa sissejuhatusega. Saate teada, kuidas Photoshopis veebikujundusi lõigata ja HTML-i CSS-i abil vormindada. Sissejuhatus HTML-i ja CSS-i disaineritele

Mis on HTML?

Peaaegu kõik, mida näete veebi sirvimisel, on hüperteksti märgistuskeele (HTML) dokument. Hüpertekst on tekst, mis viitab ja viitab teisele ekraanil olevale tekstile, võimaldades teil sisule juurde pääseda ühe klõpsuga. Märgistuskeel on siltide komplekt, mis on suletud nurksulgudesse <>. Need HTML-märgendid on tavaliselt paarikaupa:

<algusmärgend> : tuntud ka kui avamärgend.
: nimetatakse ka sulgemiseks ja sisaldab kaldkriipsu /

Kui lisate sisu nende kahe sildi vahele, nimetatakse kogu asja element :

See on lõik

Kui see keel tõlgitakse Internetti, ei näe vaatajad silte – nad näevad ainult nende vahel olevat sisu.

HTML 5, HTML-i praegune versioon, sisaldab umbes 100 märgendit atribuutidega, mis muudavad nende funktsiooni või välimust. HTML-i mõistmiseks ja loomiseks peate teadma ainult 30–40 neist siltidest. Vaadake neid ja pange tähele, kuidas need funktsioonide järgi rühmitatakse. Vaatame seda tegevuses.

Piltide lõikamine Photoshopis.

Sissejuhatus HTML-i ja CSS-i disaineritele

Enne kodeerimist peame otsustama, millised veebisaidi jaotised peaksid sisaldama pilte ja milliseid saab kodeerida. Kasutame ära pill Photoshop Viil (peidetud alammenüü alla Kärpimistööriist ) ja tõstke esile alad, nagu foto burritost ja taco joan .

Nüüd peame oma väljavõtted eksportima – valige Fail > Salvesta veebi jaoks (Alt + Tõstuklahv + Ctrl + S). Kui konkreetne jupp on valitud, saate määrata selle ekspordisuvandid akna paremas servas (JPG, PNG jne). Kui topeltklõpsate konkreetsel fragmendil, näete hüpikakent " Fragmendi parameetrid" - See võimaldab teil konkreetseid fragmendifaile nimetada.

Vaikimisi paigutatakse kõik pildid alamkataloogi /images/. Kui soovite eksportida ainult enda loodud katkendeid, valige " Kõik kohandatud fragmendid" aknas "Salvesta". Sissejuhatus HTML-i ja CSS-i disaineritele

Põhilise HTML-dokumendi loomine

Meil on oma viilutajad, loome HTML-i põhidokumendi. Sissejuhatus HTML-i ja CSS-i disaineritele

1. rida : teatab, et dokumendi keel on HTML 5 dialekt.

2. rida : element tähistab HTML-dokumendi juurt. See on kohustuslik konteiner, mis tähistab meie dokumendi piire.

3 : peatükk sisaldab nähtamatuid leheelemente, nagu metateave, pealkiri jne.

4. rida : See on dokumendi kodeerimise deklaratsioon − utf-8 - turvaline valik - saate lugeda HTML-i märgikodeeringutest siin .

5. rida : Näidisleht See on lehe pealkiri, mis kuvatakse brauseri tiitliribal.

6 : sulgeb sildi realt 3.

7. rida : See kehaelement sisaldab kogu lehe nähtavat sisu.

8. rida : sulgeb sildi realt 2. See element tähistab dokumendi lõppu. Sissejuhatus HTML-i ja CSS-i disaineritele

Sama kujunduse kodeerimiseks on ka teisi võimalikke viise. Dokumendi põhistruktuuri loomiseks kasutame HTML 5 semantilisi silte (päis, navigeerimine, artikkel, jalus):

See on HTML-i tõlgitud paigutus:

Paar märkust:

11. ja 12. read : elemendid on Interneti olemus, kuna neid kasutatakse loomiseks hüperlingid . Need on seotud atribuudiga HREF ja peavad siduma sihtmärgi URL .

read 18–20 : Need on mõned tekstivormingu sildid: tähistab esimese taseme pealkirja; tähistab lõiku; tähendab reavahetust.

Vormindamine kaskaadlaadilehtedega (CSS).

Sissejuhatus HTML-i ja CSS-i disaineritele

Kui avate veebibrauseris ainult HTML-faili, näete, et see pole vormindatud nagu meie eelmine kujundus. Seda seetõttu, et HTML-koodist ei piisa – me peame selle vormindama Kaskaadlaaditabelid (CSS) . CSS on stiililehe keel, mida kasutatakse HTML-i elementide vormindamiseks.

Aga miks me täpselt peame ühendama HTML-i CCS-iga? Mõni aeg tagasi saavutati vormindamine HTML-i siltidele atribuutide lisamisega. Selle tulemuseks oli aga loetamatu ja hooldamatu kood. Lahenduseks oli dokumendi sisu (HTML) eraldamine dokumendi vormingust (CSS).

Teeme lihtsa jaotuse CSS-reegel : .

Valija : see on HTML-element, mida soovite stiilida. Näiteks: <artikkel>

Reklaam : CSS-reeglil võib olla üks või mitu deklaratsiooni. Iga deklaratsioon koosneb atribuudist ja väärtusest ning on eraldatud semikooloniga. Asetate deklaratsioonid lokkis sulgudesse {}. Sissejuhatus HTML-i ja CSS-i disaineritele

Kinnisvara : see on stiiliomadus, mida soovite muuta. Näiteks: taustavärv, suurus font jne.

Väärtus : iga atribuudiga on seotud väärtus. Näiteks: #ffcc11 (taustavärvi jaoks), 16px (fondi suuruse jaoks) jne.

Seal palju CSS-i omadusi, mida saab määrata iga HTML-i elemendi jaoks, kuid pole vaja neid kõiki ise kirjutada. Võite tugineda oma brauseri vaikesätetele või kasutada põhilaaditabelit, mis lähtestab teie brauseri mõistlikele sätetele. Tegelikult, et kirjutamise valijad ise tegemine nõuab palju teadmisi ja kogemusi.

Vaatame mõningaid CSS-i reegleid, mis on vajalikud meie lihtsa kujunduse vormindamiseks.

CSS-i positsioneerimise omadused : on olemas 4 erinevat meetodit (staatiline, fikseeritud, suhteline ja absoluutne), mis võimaldavad meil oma disainis teatud elemente positsioneerida. Pärast ühe neist meetoditest seadistamist saate elemente paigutada ülemise, parema, alumise ja vasakpoolse atribuutide abil – need töötavad erinevalt sõltuvalt sellest, millist neljast meetodist kasutate. Sel juhul tahaksime positsioneerida plate_image, kasutades absoluutne positsioneerimine.

CSS-kasti mudel : see mudel on raam, mis hõlmab kõiki HTML-i elemente, sealhulgas veerisid, ääriseid, polsterdust ja sisu. Veeris on äärise ümber olev nähtamatu ala ning äärise ja sisu vaheline polster.

Kui soovite TÕESTI kodeerimise kohta rohkem teada saada, Vaata sellele lahedale saidile: Codecademy .