Uzu Tiparoj, Landlimoj kaj Bildoj por Ornami Titolojn
Fajlinoj estas oftaj en plej TTT-paĝoj. Fakte, sufiĉe ajn iu teksto-teksto inklinas havi almenaŭ unu titolon tiel ke vi scias la titolon de tio, kion vi legas. Ĉi tiuj fraplinioj estas koditaj per la HTML-rubrikaj elementoj - h1, h2, h3, h4, h5, kaj h6.
En kelkaj ejoj, vi eble trovos, ke titoloj estas koditaj sen uzi ĉi tiujn elementojn. Anstataŭe, titoloj povas uzi alineojn kun specifaj klasaj atributoj aldonitaj al ili, aŭ dividoj kun klasaj elementoj. La kialo, kiun mi ofte aŭdas pri ĉi tiu malĝusta praktiko, estas, ke la desegnisto "ne ŝatas la vojon". Defaŭlte, rubrikoj estas montritaj en aŭdaca kaj ili estas pli grandaj en grandeco, precipe la h1 kaj h2-elementoj, kiuj montras en multe pli granda tiparo ol la resto de teksto de teksto. Memoru, ke ĉi tio estas nur la defaŭlta aspekto de ĉi tiuj elementoj! Kun CSS, vi povas fari kaplinion rigardi tamen vi volas! Vi povas ŝanĝi la tiparon, forigi la aŭdacan kaj multe pli. Titoloj estas la taŭga maniero por kodigi titolojn de paĝo. Jen kelkaj kialoj.
Kial Uzu Ĉefajn Etikedojn Prefere ol DIVs kaj Styling
Serĉaj Engines Kiel Titolo Etikedoj
Ĉi tiu estas la plej bona kialo por uzi rubrikojn kaj uzu ilin en la ĝusta ordo (te h1, tiam h2, tiam h3, ktp). Serĉaj motoroj donu la plej altan pezon al teksto inkluzivita ene de titoli etikedoj ĉar estas semantika valoro al tiu teksto. Alivorte, per etiketado de via paĝo-titolo H1, vi diras al la serĉilo-araneo, ke tio estas la nodo 1 de la paĝo. H2-rubrikoj havas # 2 emfazon, kaj tiel plu.
Vi Donas Ne Memori Kiajn Klasojn Vi Uzis Por Difini Viajn Titolojn
Kiam vi scias, ke ĉiuj viaj TTT-paĝoj havos H1, kiu estas aŭdaca, 2em kaj flava, tiam vi povas difini tiun fojon en via stilfolio kaj esti farita. 6 monatoj poste, kiam vi aldonas alian paĝon, vi nur aldonos H1-etiketon al la supro de via paĝo, vi ne devas reiri al aliaj paĝoj por ekscii, kion stilo aŭ identa klaso vi difinis la ĉefon titulara kaj suba kapo.
Ili Provizas Fortan Paĝon
Skizoj pli facilas legi tekston. Tial multaj usonaj lernejoj instruis studentojn skribi esbozon antaŭ ol ili skribu la paperon. Kiam vi uzas etendajn etikedojn en strekita formato, via teksto havas klaran strukturon, kiu ŝajnas tre rapide. Plue, estas iloj, kiuj povas revizii la paĝon de la paĝo por provizi sinopsis, kaj ĉi tiuj fidas je etendaj etikedoj por la streka strukturo.
Via paĝo faros senton eĉ kun la stiloj malŝaltitaj
Ne ĉiuj povas vidi aŭ uzi stilfoliojn (kaj ĉi tio revenas al n-ro 1 - serĉiloj rigardas la enhavon (teksto) de via paĝo, ne la stilfolioj). Se vi uzas titolijn etikedojn, vi faras viajn paĝojn pli alireblaj ĉar la titoloj provizas informon, ke DIV-etikedo ne volus.
Ĝi estas Helpema Por Ekrano Legantoj Kaj Reteja Alirebleco
La ĝusta uzo de rubrikoj kreas logikan strukturon al dokumento. Ĉi tio estas, kion la legantoj de ekrano uzos por "legi" retejo al uzanto kun vidpunkto, por ke via retejo atingu homojn kun malkapabloj.
Stili la Tekston kaj Tiparon de Viaj Fajlinoj
La plej facila maniero malproksimigi de la "granda, aŭdaca kaj malbela" problemo de titolaj etikedoj estas stiligi la tekston laŭ la maniero, kiun vi volas, ke ili aspektas. Fakte, kiam mi laboras en nova retejo, mi tipe skribas la paragrafon, h1, h2, kaj h3-stilojn unue. Mi kutime restas kun nur tipara familio kaj grandeco / pezo. Ekzemple, ĉi tio povus esti prelimina stila folio por nova retejo (ĉi tiuj estas nur ekzemplaj stiloj kiuj povus esti uzataj):
korpo, html {rando: 0; Plenigado: 0; } p {font: 1em Arial, Ĝenevo, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Tempoj, serif; } h2 {font: bold 1.5em "Times New Roman", Tempoj, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }Vi povas modifi la tiparojn de via titolo aŭ ŝanĝi la tekston aŭ eĉ la tekston . Ĉiuj ĉi tiuj turnos vian "malbelan" titolon en ion pli viglan kaj konforme al via dezajno.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "Nov-Jorko", serif; rando: 0; Plenigado: 0; koloro: # e7ce00; }Limoj Povas Vizi Supre Titolojn
Limoj estas bonega maniero plibonigi viajn titolojn. Kaj limoj estas facile aldoni. Sed ne forgesu eksperimenti kun la limoj - vi ne bezonas limon ĉe ĉiu flanko de via titolo. Kaj vi povas uzi pli ol nur klarajn enuigajn limojn.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "Nov-Jorko", serif; rando: 0; Plenigado: 0; koloro: # e7ce00; limo-supro: solida # e7ce00 meza; limo-fundo: dotita # e7ce00 maldika; larĝa: 600px; }Mi aldonis supran kaj malsupran limon al mia specimena titolo por enkonduki iujn interesajn vidajn stilojn. Vi povus aldoni limojn de iu maniero, ke vi volis atingi la dezajnan stilon, kiun vi volas.
Aldoni Fona Bildoj al Viaj Titoloj Por Eĉ pli da Pizazoj
Multaj Retejoj havas kaplinion ĉe la supro de la paĝo, kiu inkludas titolon - tipe la retejo-titolo kaj grafikaĵon. Plej multaj pensistoj pensas pri tio kiel du apartaj elementoj, sed vi ne bezonas. Se la grafikaĵo estas nur por ornami la titolon, do kial ne aldoni ĝin al la rubrikaj stiloj?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "Nov-Jorko", serif; fono: #fff url ("fancyheadline.jpg") ripeto-x fundo; kompletigo: 0.5em 0 90px 0; teksto-alineo: centro; rando: 0; limo-fundo: solida # e7ce00 0.25em; koloro: # e7ce00; }La lertaĵo al ĉi tiu fraplinio estas ke mi scias, ke mia bildo estas 90 rastrumeroj. Do mi aldonis kompletigon ĉe la fundo de la fraplinio de 90px (kompletigo: 0.5 0 90px 0p;). Vi povas ludi kun la randoj, linio-alteco kaj kompletigo por ricevi la tekston de la titolo por montri ĝuste kie vi volas ĝin.
Unu afero por memori, kiam uzado de bildoj estas, ke se vi havas respondeman retejon (kiun vi devus) kun aranĝo, kiu ŝanĝas laŭ ekrano grandecoj kaj aparatoj, vi titoli ĉiam ne estos la sama grandeco. Se vi bezonas vian titolon esti ĝusta grandeco, tio povas kaŭzi problemojn. Ĝi estas unu el la kialoj, kial mi ĝenerale evitas fonojn bildojn ĉe titolo, tiel malvarmeta kiel ili povas foje rigardi.
Bildo Replace en Titoloj
Ĉi tiu estas alia populara tekniko por TTT-desegnistoj ĉar ĝi permesas krei grafikan titolon kaj anstataŭigi la tekston de la rubriko etikedo kun tiu bildo. Ĉi tio vere estas antikva praktiko de retpaĝistoj havis aliron al tre malmultaj tiparoj kaj volis uzi pli ekzotajn tiparojn en sia laboro. La kresko de TTT-tiparoj vere ŝanĝis kiel desegnantoj alproksimigas retejojn. Titoloj nun povas esti agorditaj en ampleksa vario de tiparoj kaj bildoj kun tiuj tiparoj enigitaj ne plu bezonataj. Kiel tia, vi nur trovos CSS-bildajn anstataŭojn por titoloj sur malnovaj retejoj, kiuj ankoraŭ ne ĝisdatigis al pli modernaj praktikoj.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 9/6/17