Apmācība par Web dizaina vadību

Web dizains vienmēr ir aizņēmies principus un definīcijas no grafikas un drukas dizaina pasaules. Tas jo īpaši attiecas uz tīmekļa tipogrāfiju un veidu, kādā mēs saņemam informācijas veidlapas mūsu tīmekļa lapās. Šīs paralēles ne vienmēr ir no 1 līdz 1 tulkojumiem, bet jūs noteikti varat redzēt, kur viena disciplīna ir ietekmējusi otru. Tas ir īpaši redzams, ja jūs uzskatāt attiecības starp tradicionālo tipogrāfijas terminu "vadošais" un CSS īpašumu, kas pazīstams kā "līnijas augstums".

Vadošais mērķis

Kad cilvēki manuāli izmantoja metāla vai koka burtus, lai izveidotu iespiestas lapas tipogrāfiju, starp horizontālajām teksta līnijām tika novietoti plāni svina gabali, lai izveidotu atstarpi starp šīm līnijām. Ja jūs vēlaties lielāku vietu, jūs varētu ievietot lielākus svina gabalus. Tieši tādēļ tika izveidots termins "vadošais". Ja jūs grāmatas par tipogrāfisko dizainu un principiem uzmeklējat terminu "vadošais", tas lasītu kaut ko tādu kā "attālums starp secīgu tipa līnijām".

Vadošais Web dizains

Digitālajā dizainā termins vadošais joprojām tiek izmantots, lai apzīmētu atstarpi starp teksta rindiņām. Daudzas programmas izmanto šo precīzu terminu, lai gan acīmredzami netiek izmantots faktiskais svins šajās programmās. Tas ir lielisks piemērs jaunu dizaina formu aizņēmumu no tradicionālajām idejām, lai arī šī principa precīza īstenošana ir mainījusies.

Runājot par tīmekļa dizainu, "vadošajiem" nav CSS īpašības. Tā vietā CSS īpašums, kas apstrādā šo teksta vizuālo parādīšanu, tiek saukts par line-height. Ja vēlaties, lai jūsu tekstam būtu vairāk vietas starp horizontālajām teksta rindiņām, izmantotu šo īpašumu. Piemēram, teikt, ka vēlaties palielināt rindas augstumu visiem punktiem jūsu vietnes

elementā , jūs varētu to izdarīt šādi:

galvenā p (līnijas augstums: 1,5; }

Tagad tas būs 1,5 reizes lielāks par parasto līnijas augstumu, pamatojoties uz noklusējuma lapas fontu lielumu (parasti 16 pikseļi).

Kad lietot līnijas augstumu

Kā minēts iepriekš, līnijas augstums ir piemērots lietošanai, lai atstātu teksta rindas punktos vai citos teksta blokos. Ja starp līnijām ir pārāk maz vietas, teksts var kļūt pārblīvēts un jūsu vietnes skatītājiem ir grūti lasīt. Tāpat, ja lapas ir izvietotas pārāk tālu viena no otras lappusē, parastā lasīšanas plūsma tiks pārtraukta, un šī iemesla dēļ lasītājiem būs problēmas ar jūsu tekstu. Tas ir iemesls, kāpēc jūs vēlaties atrast piemērotu daudzumu līnijas augstuma atstarpes, lai izmantotu. Jūs varat arī pārbaudīt savu dizainu ar faktiskajiem lietotājiem, lai iegūtu atsauksmes par lapas lasāmību .

Ja neizmanto līnijas augstumu

Nejauciet līnijas augstumu ar polsterējumu vai malām, kuras jūs izmantojat, lai pievienotu atstarpes lapu lapas dizainam, tostarp zem virsraksta vai rindkopām. Šis atstarpes nav vadošais, tādēļ tas netiek apstrādāts pēc līnijas augstuma.

Ja jūs vēlaties pievienot atstarpi noteiktiem teksta elementiem, jūs izmantojat maržas vai polsterējumu. Atgriežoties pie iepriekšējā CSS piemēra, kuru mēs izmantojām, mēs varam pievienot šo:

galvenā p (līnijas augstums: 1,5; maržas apakšdaļa: 24 pikseļi; }

Tam joprojām būtu 1,5 rindas augstums starp teksta rindiņām mūsu lapas rindkopā (tās, kas atrodas elementā

). Tiem pašiem punktiem būtu arī 24 pikseļi atstarpes zem katra, ļaujot vizuālām pārtraukumiem, kas ļauj lasītājiem viegli identificēt vienu rindkopu no citas un padara vietnes lasīšanu vieglāku. Šeit jūs varat izmantot arī polsterējuma īpašumu vietās:

galvenā p (līnijas augstums: 1,5; polsterējums-apakšā: 24 pikseļi; }

Gandrīz visos gadījumos tas parādīsies tāds pats kā iepriekšējā CSS.

Pieņemsim, ka vēlaties pievienot atstarpes zem saraksta vienumiem, kas bija iekļauti sarakstā ar "pakalpojumu izvēlnes" klasi, to izmantotu, izmantojot margins vai polsterējumu, NAV līnijas augstumu. Tā tas būtu piemēroti.

. pakalpojumi-menu li { Šeit jūs izmantosit tikai līnijas augstumu, ja vēlaties iestatīt teksta atstarpi sarakstā - paši elementi, pieņemot, ka tiem ir garš teksta rindiņas, kas varētu aizpildīt vairākas rindiņas katram aizzīmogotajam punktam.