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ékezned arra, hogy mely osztályokat használtad a főcímek 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. 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, ha egy új webhelyen dolgozik, akkor a legjobb, ha a bekezdést, a h1, h2 és a h3 stílusokat írja először. Ragaszkodjon a betűtípus családjához és a mérethez / súlyhoz. Például előfordulhat, hogy egy új oldal előzetes stíluslapja (ezek csak néhány példa, amelyeket használni lehet):
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.
A határok öltöztethetik a főcímeket
A határok egy nagyszerű módja annak, hogy javítsanak a címoldalain, és könnyen hozzáadhatók. 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.
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?
Az a lényeg, hogy tudom, hogy a képem 90 képpont magas. Így hozzáadtam 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 (amit meg kellene), egy olyan elrendezéssel, amely a képernyőméretek és eszközök alapján változik, 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 őszinte gyakorlat a webdesignerekből, akik nagyon kevés betűtípushoz férnek hozzá, és több egzotikus betűtípust akartak 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.
Szerkesztette: Jeremy Girard 9/6/17
