Ievads HTML un CSS dizaineriem

Ievads HTML un CSS dizaineriem.

Kā grafiskais dizainers jūs, iespējams, apzināties nepārtraukti mainīgās attiecības starp dizainu un tehnoloģijām. Tas jo īpaši attiecas uz tiem, kas nodarbojas ar tīmekļa dizainu. Šajā nozarē mums ir jāsaņem pamatzināšanas par to, kā mūsu rūpīgi izstrādātie izkārtojumi kļūst par dzīvām tīmekļa lapām. Kad mēs saprotam šī procesa pamatus (un tā ierobežojumus), mēs varam precīzi sazināties ar izstrādātājiem un izveidot tīmekļa vietnes ar perfektu pikseļu.

Tas nenozīmē, ka jums ir jāzina, kā kodēt vietni no augšas uz leju (lai gan tas būtu lieliski!), tas tikai nozīmē, ka jums ir jāsaprot pamati. Šajā rakstā mēs sāksim ar ļoti vienkāršu ievadu HTML. Jūs uzzināsit, kā izgriezt tīmekļa dizainu programmā Photoshop un formatēt HTML, izmantojot CSS. Ievads HTML un CSS dizaineriem

Kas ir HTML?

Gandrīz viss, ko redzat, pārlūkojot tīmekli, ir hiperteksta iezīmēšanas valodas (HTML) dokuments. Hiperteksts ir teksts, kas atsaucas uz citu tekstu jūsu ekrānā, ļaujot jums piekļūt saturam ar vienkāršu klikšķi. Iezīmēšanas valoda ir tagu kopa, kas ievietota kvadrātiekavās <>. Šie HTML tagi parasti ir pa pāriem:

<sākuma tags> : zināms arī kā sākuma tags.
: sauc arī par beigu tagu un ietver slīpsvītru /

Ja starp šiem diviem tagiem ievietojat saturu, tiek izsaukta visa lieta elements :

Šī ir rindkopa

Kad šī valoda tiek tulkota internetā, skatītāji neredzēs atzīmes — viņi redzēs tikai saturu, kas atrodas starp tām.

HTML 5, pašreizējā HTML versija, satur aptuveni 100 tagus ar atribūtiem, kas maina to funkciju vai izskatu. Lai sāktu saprast un izveidot HTML, jums jāzina tikai 30–40 no šiem tagiem. Paskatieties uz tiem un ievērojiet, kā tie ir grupēti pēc funkcijas. Redzēsim to darbībā.

Attēlu griešana programmā Photoshop.

Ievads HTML un CSS dizaineriem

Pirms kodēšanas mums ir jāizlemj, kurās vietnes sadaļās jāiekļauj attēli un kuras var kodēt. Izmantosim priekšrocības instruments photoshop Šķēle (paslēpts zem apakšizvēlnes Apgriešanas rīks ) un iezīmējiet tādas vietas kā burito fotogrāfija un tako Džoana .

Tagad mums ir jāeksportē mūsu fragmenti - izvēlieties Fails > Saglabāt tīmeklim (Alt + Shift + Ctrl + S). Kad ir atlasīts konkrēts fragments, varat iestatīt tā eksportēšanas opcijas loga labajā pusē (JPG, PNG utt.). Veicot dubultklikšķi uz konkrēta fragmenta, tiks parādīts uznirstošais logs " Fragmenta parametri" - Tas ļauj nosaukt konkrētus fragmentu failus.

Pēc noklusējuma visi attēli tiek ievietoti: /images/ apakšdirektorijā. Ja vēlaties eksportēt tikai jūsu izveidotos fragmentus, atlasiet " Visi pielāgotie fragmenti" logā "Saglabāt". Ievads HTML un CSS dizaineriem

HTML pamata dokumenta izveide

Mums ir savi šķēlēji, izveidosim pamata HTML dokumentu. Ievads HTML un CSS dizaineriem

1. rindiņa : paziņo, ka HTML 5 dialekts ir dokumenta valoda.

2. rindiņa : elements apzīmē HTML dokumenta sakni. Šis ir obligāts konteiners, kas apzīmē mūsu dokumenta robežas.

3 : nodaļa satur neredzamus lapas elementus, piemēram, meta informāciju, virsrakstu utt.

4. rindiņa : Šī ir dokumenta kodēšanas deklarācija − utf-xnumx - droša izvēle - varat lasīt vairāk par HTML rakstzīmju kodējumu šeit .

5. rindiņa : Lapas paraugs Šis ir lapas nosaukums, kas parādās pārlūkprogrammas virsrakstjoslā.

6 : aizver tagu no 3. rindas.

7. rindiņa : Šajā pamatteksta elementā būs viss redzamais lapas saturs.

8. rindiņa : aizver tagu no 2. rindas. Šis elements iezīmē dokumenta beigas. Ievads HTML un CSS dizaineriem

Ir arī citi iespējamie veidi, kā kodēt to pašu dizainu. Mēs izmantosim HTML 5 semantiskos tagus (galveni, navigāciju, rakstu, kājeni), lai izveidotu dokumenta pamatstruktūru:

Šis ir izkārtojums, kas tulkots HTML valodā:

Dažas piezīmes:

11. un 12. rinda : Elementi ir interneta būtība, jo tie tiek izmantoti radīšanai hipersaites . Tie ir saistīti ar HREF atribūtu, un tiem ir jāsaista mērķis URL .

18.–20. rinda : šie ir daži teksta formatēšanas tagi: apzīmē pirmā līmeņa virsrakstu; apzīmē rindkopu; nozīmē līnijas pārtraukumu.

Formatēšana ar kaskādes stila lapām (CSS).

Ievads HTML un CSS dizaineriem

Atverot tikai HTML failu tīmekļa pārlūkprogrammā, redzēsit, ka tas nav formatēts kā iepriekšējais dizains. Tas ir tāpēc, ka ar HTML kodu nepietiek — mums tas ir jāformatē ar Kaskādes stila lapas (CSS) . CSS ir stila lapas valoda, ko izmanto HTML elementu formatēšanai.

Bet kāpēc tieši mums ir jāapvieno HTML ar CCS? Pirms kāda laika formatēšana tika panākta, pievienojot atribūtus HTML tagiem. Tomēr tas radīja nelasāmu un neuzturamu kodu. Risinājums bija atdalīt dokumenta saturu (HTML) no dokumenta formatēšanas (CSS).

Let's Breakdown Vienkāršā CSS noteikums : .

Atlasītājs : Šis ir HTML elements, kuram vēlaties izveidot stilu. Piemēram: <raksts>

Reklāma : CSS kārtulai var būt viena vai vairākas deklarācijas. Katra deklarācija sastāv no rekvizīta un vērtības, un to atdala ar semikolu. Jūs ievietojat deklarācijas krokainās iekavās {}. Ievads HTML un CSS dizaineriem

Īpašums : šis stila īpašība, kuru vēlaties mainīt. Piemēram: fona krāsa, izmērs fontu utt.

Vērtība : katram īpašumam ir ar to saistīta vērtība. Piemēram: #ffcc11 (fona krāsai), 16 pikseļi (fonta izmēram) utt.

Tur daudzi CSS rekvizīti, kurus var iestatīt katram HTML elementam, taču nav nepieciešams tos visus rakstīt pašam. Varat paļauties uz pārlūkprogrammas noklusējuma iestatījumiem vai izmantot pamata stila lapu, kas atiestata pārlūkprogrammas saprātīgus iestatījumus. Patiesībā, lai rakstīšanas atlasītāji lai to izdarītu pats, ir nepieciešams daudz zināšanu un pieredzes.

Apskatīsim dažus CSS noteikumus, kas nepieciešami mūsu vienkāršā dizaina formatēšanai.

CSS pozicionēšanas rekvizīti : pastāv 4 dažādas metodes (statiskā, fiksētā, relatīvā un absolūtā), kas ļauj pozicionēt noteiktus elementus mūsu dizainā. Pēc vienas no šīm metodēm iestatīšanas varat novietot elementus, izmantojot augšējo, labo, apakšējo un kreiso rekvizītus – tie darbosies atšķirīgi atkarībā no tā, kuru no 4 metodēm izmantojat. Šajā gadījumā mēs vēlētos pozicionēt plate_image, izmantojot absolūts pozicionēšana.

CSS kastes modelis : šis modelis ir rāmis, kas ietver visus HTML elementus, tostarp piemales, apmales, polsterējumu un saturu. Piemale ir neredzamā zona ap apmali un polsterējums starp apmali un saturu.

Ja tiešām vēlaties uzzināt vairāk par kodēšanu, Paskaties uz šo foršo vietni: Codecademy .