Betűkészletek, szegélyek és képek használata a címsorok díszítésére
A legtöbb weboldalon gyakoriak a hírek. Valójában minden szöveges dokumentumnak legalább egy címsora van, hogy ismerje a címét, amit olvas. Ezeket a címeket a HTML címsorelemek - h1, h2, h3, h4, h5 és h6 - kódolásával kódolják.
Egyes webhelyeken előfordulhat, hogy a főcímek kódolása az elemek használata nélkül történik. Ehelyett a főcímek olyan bekezdéseket használhatnak, amelyekhez hozzá vannak adva a hozzájuk tartozó specifikus osztályok, vagy osztások az osztályelemekkel. Az ok, amit gyakran hallok a helytelen gyakorlattól, hogy a tervező "nem szereti a fejlécek megjelenését". Alapértelmezés szerint a fejlécek vastagon megjelennek, és nagyobbak, különösen a h1 és h2 elemek, amelyek sokkal nagyobb betűméretben jelenik meg, mint az oldal többi része. Ne feledje, ez csak az alapértelmezett megjelenés ezeken az elemeken! A CSS segítségével megnézheted a fejlécet, amit akarsz! Megváltoztathatja a betűméretet, eltávolíthatja a merész és még sok másat. A fejlécek a megfelelő módon kódolják az oldal címsorát. Íme néhány oka.
Miért használjon címkecímeket ahelyett, hogy a DIV-ket és a stílusokat használná?
Keresőmotorok, mint a címkecímkék
Ez a legjobb ok arra, hogy a fejléceket használjuk, és használjuk őket a megfelelő sorrendben (pl. H1, majd h2, majd h3 stb.). A keresőmotorok a legmagasabb súlyt adják a címsorcímek közé tartozó szövegnek, mivel a szöveg szemantikai értéke van. Más szóval, a H1 címoldal címkézésével megmondja a keresőmotor pókának, hogy ez az oldal # 1 középpontja. A H2 fejlécek # 2 hangsúlyt kapnak, és így tovább.
Nem kell emlékezni arra, hogy mely osztályokat használta a címsorok meghatározásához
Ha tudod, hogy minden weboldala H1 lesz, amely félkövér, 2em és sárga, akkor egyszer meg definiálhatja a stíluslapot, és elvégezheti. 6 hónappal később, amikor új oldalt adsz hozzá, csak hozzáadsz egy H1 címkét az oldal tetejéhez, nem kell visszamenned más oldalakra, hogy megtudd, milyen stílusazonosítót vagy osztályt használtál a fő főcím és alfejek.
Ők egy erős oldal körvonalat biztosítanak
A körvonalak egyszerűbbé teszik a szöveget. Éppen ezért a legtöbb amerikai iskola tanította a tanulókat, hogy írjanak egy vázlatot, mielőtt írják a papírt. Ha vázlatos formátumban fejléc-címkéket használ, a szövegnek egyértelmű szerkezete van, amely nagyon gyorsan megjelenik. Plusz vannak olyan eszközök is, amelyek áttekinthetik az oldal körvonalát, hogy egy szinopszist adjanak, és ezek a vázlatszerkezet címsoraira támaszkodnak.
Oldalod észrevehet, még a stílusok kikapcsolásával
Nem mindenki tudja megnézni vagy használni a stíluslapokat (és ez a # 1-es oldalra tér vissza) - a keresőmotorok megtekintik az oldal tartalmát (szövegét), nem pedig a stíluslapokat). Ha fejléc-címkéket használsz, az oldalak elérhetőbbé válnak, mert a címsorok olyan információkat tartalmaznak, amelyeket egy DIV-címke nem.
Hasznos lehet a képernyőolvasók és a weboldal elérhetosége számára
A fejlécek megfelelő használata logikus struktúrát hoz létre egy dokumentumhoz. Ez az, amit a képernyőolvasók használnak arra, hogy "olvassanak" egy webhelyet a látásromlást elkövető felhasználók számára, így webhelye elérhetővé válik a fogyatékkal élők számára.
A főcímek szövegének és betűtípusának stílusa
A címjegyzékek "nagy, merész és csúnya" problémájának legegyszerűbb módja, hogy elmozduljon a szöveggel, ahogyan azt szeretné, hogy megnézzék. Valójában, amikor egy új webhelyen dolgozom, általában írom a bekezdést, h1, h2, és h3 stílusokat. Általában a betűtípus családjával és méretével / súlyával ragaszkodom. Például előfordulhat, hogy egy új oldal előzetes stíluslapja (ezek csak néhány példa, amelyeket használni lehet):
test, html {margin: 0; párnázottság: 0; } p {font: 1em Arial, Genf, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Genf, Helvetica, sans-serif; }Módosíthatja a címsor betűtípusát, vagy módosíthatja a szövegstílust, vagy akár a szöveg színét . Mindezek a "csúnya" címsorát valami élénkebbé varázsolják, és összhangban vannak a tervével.
h1 {font: félkövér dőlt 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; párnázottság: 0; szín: # e7ce00; }A határok öltöztethetik a főcímeket
A határok remek módja a fejlécek javításához. És a határokat könnyű hozzáadni. De ne felejtsd el kísérletezni a határokat - nincs szükség határra a címsor mindkét oldalán. És többet is használhatsz, mint egyszerűen unalmas határokat.
h1 {font: félkövér dőlt 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; párnázottság: 0; szín: # e7ce00; border-top: szilárd # e7ce00 közeg; border-bottom: pontozott # e7ce00 vékony; szélesség: 600px; }Tettem egy felső és egy alsó szegélyt a minta címéhez, hogy bemutassam néhány érdekes vizuális stílust. Bármely módon határozná meg a határokat, hogy elérje a kívánt tervezési stílust.
Háttérkép hozzáadása háttérképekhez Még több Pizazz számára
Sok weboldalnak van egy fejlécrésze az oldal tetején, amely tartalmaz egy címsort - jellemzően a webhely címe és egy grafika. A legtöbb tervező ezt két külön elemnek tekinti, de nem kell. Ha a grafika csak a címsor díszítésére szolgál, akkor miért nem adja hozzá a címsor stílusokhoz?
h1 {font: félkövér dőlt 3em / 1em "Times New Roman", "MS Serif", "New York", serif; háttér: #fff url ("fancyheadline.jpg") repeat-x alsó; párnázás: 0.5em 0 90px 0; text-align: center; margin: 0; border-bottom: szilárd # e7ce00 0.25em; szín: # e7ce00; }Az a lényeg, hogy tudom, hogy a képem 90 képpont magas. Ezért hozzáadtam a párnázást a 90px címsor aljára (padding: 0.5 0 90px 0p;). A margókkal, vonalmagassággal és párnázással játszhatsz, hogy a címsor szövege pontosan ott jelenjen meg, ahol azt szeretné.
Az egyik dolog, hogy emlékezzen a képek használatakor, hogy ha van egy válaszolható weboldal (amelyet meg kellene adnia) egy olyan elrendezéssel, amely a képernyőméretek és eszközök alapján változik, akkor a címsor nem mindig lesz azonos méretű. Ha a címsor pontos méretűre van szüksége, akkor ez problémákat okozhat. Ez az egyik oka annak, hogy általában elkerüljem a háttérképeket a címsorban, annyira hűvösek, ahogyan néha meg is néznek.
Képcsere a címsorokban
Ez egy újabb népszerű technika a webes tervezőknek, mert lehetővé teszi, hogy grafikus címsort hozzon létre, és a címkecím szövegét a képre cserélje. Ez valóban egy antikvitású gyakorlat a webes tervezők számára, hogy nagyon kevés betűtípushoz férhessen hozzá, és több egzotikus betűtípust szeretett volna használni munkájuk során. A webes betűkészletek növekedése valóban megváltoztatta a tervezők megközelítését. A címsorok mostantól a betűkészletek széles skáláján állíthatók be, és a beágyazott betűtípusok már nem szükségesek. Mint ilyen, a CSS-képek helyett csak olyan régebbi webhelyek címsorát találja meg, amelyek még nem korszerűbbek a korszerűbb gyakorlatokhoz.
Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard 9/6/17