Įvadas į HTML ir CSS dizaineriams

Įvadas į HTML ir CSS dizaineriams.

Kaip grafikos dizaineris tikriausiai žinote apie nuolat besikeičiantį dizaino ir technologijų ryšį. Tai ypač aktualu tiems, kurie užsiima interneto dizainu. Šioje pramonės šakoje turime turėti pagrindinį supratimą apie tai, kaip mūsų kruopščiai sukurti maketai tampa gyvais tinklalapiais. Kai suprantame šio proceso pagrindus (ir jo apribojimus), galime tiksliai bendrauti su kūrėjais ir kurti svetainės su tobula pikselių.

Tai nereiškia, kad turite žinoti, kaip koduoti svetainę iš viršaus į apačią (nors tai būtų puiku!), tai tiesiog reiškia, kad turite suprasti pagrindus. Šiame įraše pradėsime nuo labai paprasto HTML įvado. Sužinosite, kaip iškirpti žiniatinklio dizainą naudojant „Photoshop“ ir formatuoti HTML naudojant CSS. Įvadas į HTML ir CSS dizaineriams

Kas yra HTML?

Beveik viskas, ką matote naršydami internete, yra hiperteksto žymėjimo kalbos (HTML) dokumentas. Hipertekstas yra tekstas, kuriame pateikiamos nuorodos į kitą tekstą ekrane, todėl turinį galite pasiekti paprastu spustelėjimu. Žymėjimo kalba yra žymų rinkinys laužtiniuose skliaustuose <>. Šios HTML žymos paprastai pateikiamos poromis:

<pradžios žyma> : taip pat žinomas kaip pradžios žyma.
: taip pat vadinama uždarymo žyma ir apima pasvirąjį brūkšnį /

Kai tarp šių dviejų žymų įtraukiate turinį, visas dalykas vadinamas elementas :

Tai pastraipa

Kai ši kalba bus išversta į internetą, žiūrintieji nematys žymų – jie matys tik tarp jų esantį turinį.

HTML 5, dabartinė HTML versija, turi apie 100 žymų su atributais, kurie keičia jų funkciją arba išvaizdą. Jums tereikia žinoti 30–40 šių žymų, kad pradėtumėte suprasti ir kurti HTML. Pažvelkite į juos ir pastebėkite, kaip jie sugrupuoti pagal funkcijas. Pažiūrėkime, kaip tai veikia.

Vaizdų kirpimas „Photoshop“.

Įvadas į HTML ir CSS dizaineriams

Prieš koduodami turime nuspręsti, kuriose svetainės skiltyse turi būti vaizdai ir kurios gali būti koduojamos. Pasinaudokime instrumentas "Photoshop" Gabalas (paslėpta po meniu Apkarpymo įrankis ) ir paryškinkite tokias sritis kaip burito nuotrauka ir taco joan .

Dabar turime eksportuoti savo fragmentus - pasirinkite Failas > Išsaugoti žiniatinklyje (Alt + Shift + Ctrl + S). Kai pasirenkamas konkretus fragmentas, dešinėje lango pusėje galite nustatyti jo eksportavimo parinktis (JPG, PNG ir kt.). Jei dukart spustelėsite konkretų fragmentą, pamatysite iššokantįjį langą " Fragmento parametrai - Tai leidžia pavadinti konkrečius fragmentų failus.

Pagal numatytuosius nustatymus visi vaizdai dedami į: /images/ pakatalogį. Jei norite eksportuoti tik savo sukurtus fragmentus, pasirinkite " Visi pasirinktiniai fragmentai" lange „Išsaugoti“. Įvadas į HTML ir CSS dizaineriams

Pagrindinio HTML dokumento kūrimas

Turime savo pjaustytuvus, sukurkime pagrindinį HTML dokumentą. Įvadas į HTML ir CSS dizaineriams

1 eilutė : pareiškia, kad HTML 5 dialektas yra dokumento kalba.

2 eilutė : elementas reiškia HTML dokumento šaknį. Tai yra privalomas konteineris, žymintis mūsų dokumento ribas.

3 : skyrius yra nematomų puslapio elementų, tokių kaip metainformacija, pavadinimas ir kt.

4 eilutė : Tai dokumento kodavimo deklaracija − utf-xnumx – saugus pasirinkimas – galite pasiskaityti daugiau apie HTML simbolių koduotes čia .

5 eilutė : Puslapio pavyzdys Tai puslapio pavadinimas, kuris rodomas naršyklės pavadinimo juostoje.

6 : uždaro žymą iš 3 eilutės.

7 eilutė : Šiame kūno elemente bus visas matomas puslapio turinys.

8 eilutė : uždaro žymą iš 2 eilutės. Šis elementas žymi dokumento pabaigą. Įvadas į HTML ir CSS dizaineriams

Yra ir kitų galimų būdų koduoti tą patį dizainą. Norėdami sukurti pagrindinę dokumento struktūrą, naudosime HTML 5 semantines žymas (antraštę, navigaciją, straipsnį, poraštę):

Šis išdėstymas išverstas į HTML:

Keletas pastabų:

11 ir 12 eilutės : Elementai yra interneto esmė, nes jie naudojami kuriant hipersaitus . Jie yra susieti su HREF atributu ir turi susieti tikslą URL adresas .

18–20 eilutės : Štai keletas teksto formatavimo žymų: žymi pirmojo lygio antraštę; žymi pastraipą; reiškia linijos pertrauką.

Formatavimas naudojant kaskadinius stiliaus lapus (CSS).

Įvadas į HTML ir CSS dizaineriams

Kai atidarysite tik HTML failą žiniatinklio naršyklėje, pamatysite, kad jis nėra suformatuotas kaip ankstesnis dizainas. Taip yra todėl, kad HTML kodo neužtenka – turime jį suformatuoti Kaskadiniai stiliaus lapai (CSS) . CSS yra stiliaus lapo kalba, naudojama HTML elementams formatuoti.

Bet kodėl būtent mums reikia derinti HTML su CCS? Prieš kurį laiką formatavimas buvo pasiektas pridedant atributus prie HTML žymų. Tačiau dėl to kodas buvo neįskaitomas ir neprižiūrimas. Sprendimas buvo atskirti dokumento turinį (HTML) nuo dokumento formatavimo (CSS).

Suskirstykime paprastai CSS taisyklė : .

Pasirinkėjas : Tai yra HTML elementas, kurio stilių norite sukurti. Pavyzdžiui: <straipsnis>

Skelbimas : CSS taisyklė gali turėti vieną ar daugiau deklaracijų. Kiekviena deklaracija susideda iš ypatybės ir vertės ir yra atskirta kabliataškiu. Deklaracijas dedate riestiniuose skliaustuose {}. Įvadas į HTML ir CSS dizaineriams

Nuosavybė : tai stiliaus ypatybė, kurį norite pakeisti. Pavyzdžiui: fono spalva, dydis šriftas ir kt.

Vertė : kiekviena nuosavybė turi su ja susietą vertę. Pavyzdžiui: #ffcc11 (fono spalvai), 16 pikselių (šrifto dydžiui) ir kt.

Ten daug CSS savybių, kuriuos galima nustatyti kiekvienam HTML elementui, bet nereikia jų visų rašyti patiems. Galite pasikliauti numatytaisiais naršyklės nustatymais arba naudoti pagrindinį stiliaus lapą, kuris iš naujo nustato pagrįstus naršyklės nustatymus. Tiesą sakant, į rašyti selektoriai tai padaryti patiems reikia daug žinių ir patirties.

Pažvelkime į keletą CSS taisyklių, reikalingų paprastam dizainui suformatuoti.

CSS padėties nustatymo ypatybės : egzistuoja 4 skirtingi metodai (statinis, fiksuotas, santykinis ir absoliutus), kurios leidžia mums išdėstyti tam tikrus elementus mūsų dizaine. Nustačius vieną iš šių metodų, elementus galite išdėstyti naudodami viršuje, dešinėje, apačioje ir kairėje esančias savybes – jie veiks skirtingai, priklausomai nuo to, kurį iš 4 metodų naudosite. Šiuo atveju norėtume pozicionuoti plate_image, naudojant absoliutus padėties nustatymas.

CSS dėžutės modelis : šis modelis yra rėmelis, apimantis visus HTML elementus, įskaitant paraštes, rėmelius, užpildymą ir turinį. Kraštinė yra nematoma sritis aplink kraštinę ir užpildas tarp kraštinės ir turinio.

Jei TIKRAI norite sužinoti daugiau apie kodavimą, pažiūrėk į šią šaunią svetainę: Codecademy .