Erabili letra-tipoak, ertzak eta irudiak azpitik dekoratzeko
Orri nagusiak ohikoak dira web orrialde gehienetan. Izan ere, nahiko testu-dokumentu bat gutxienez titular bat izan ohi da, irakurtzen ari zarenaren titulua ezagutzen duzula. Izenburuak HTML izeneko elementuen bidez kodetuta daude: h1, h2, h3, h4, h5 eta h6.
Zenbait tokitan, titularrak elementu horiek erabili gabe kodetu ditzakezu. Horren ordez, tituluek paragrafo batzuk erabili ditzakete klase-atributu espezifikoak gehituta, edo klaseak dituzten zatiketak. Arrazoia praktika oker honi buruz entzuten dudan arrazoia da diseinatzaileak "ez duela gustuko moduko izenburuak". Lehenespenez, goiburuak letra lodiz bistaratzen dira eta tamaina handiagoak dira, batez ere h1 eta h2 elementuen letra-tipoaren tamaina askoz handiagoak orri baten testuan baino. Gogoan izan hau elementu horien itxura lehenetsia baino ez dela! CSS-rekin, nahi duzun izenburuaren itxura egin dezakezu! Letra-tamaina alda dezakezu, kendu lodia, eta askoz gehiago. Izenburuak orri baten izenburuak kodetzeko modu egokia dira. Hona hemen arrazoi batzuk.
Zergatik erabili izenburuko etiketak DIV eta Styling baino
Bilaketa-motorrak goiburuko etiketa bezala
Hau da arrazoi onena izenburuak erabiltzeko, eta erabili orden egokian (hau da: h1, h2, h3, eta abar). Bilaketa-motorrek testuinguruaren barnean sartutako testuen artean pisu altuena ematen dute testua balio semantikoa delako. Beste era batera esanda, orriaren izenburua H1 etiketatuz, orrialde honen # 1 ardatza bilatzailearen armiarma esaten diozu. H2 izenburuak # 2 azpimarratu dira, eta abar.
Ez duzu ahaztu zer klaseak erabili dituzun azpitituluak definitzeko
Zure web orrialde guztiek H1 lodia, 2em, eta horia izango dituzula jakiten duzunean, ondoren definitu dezakezu zure estilo-orria eta egin. 6 hilabete beranduago, beste orrialde bat gehitzen duzunean, H1 etiketa zure orriaren goialdean gehitzen baduzu, ez duzu beste orrialdeetara joan behar jakiteko zein estilo-ID edo klase nagusiak definitzeko erabiltzen zen. titularrak eta azpi-buruak.
Orrialde eskema sendo bat eskaintzen dute
Testuak testu errazago irakurtzeko. Horregatik, AEBetako eskola gehienek irakasleek eskema bat idazteko baimena ematen dute paperean idazten hasi aurretik. Izenburuaren etiketak enkriptatze-formatuan erabiltzen dituzunean, testuak argi eta garbi erakusten duen egitura argi bat du. Horrez gain, orrialde-eskema berrikusi ahal izateko tresnak daude, laburpen bat emateko, eta hautapen-etiketak oinarritzat dute eskema-egiturari.
Zure orria zentzua izango da, nahiz eta estiloak desaktibatuta egon
Estilo guztiek ez dute ikusi edo erabiltzen (eta hau # 1ra itzultzen da - bilatzaileek zure orriaren edukia (testua) ikusteko, ez estilo-orriak). Izenburuaren etiketak erabiltzen badituzu, zure orrialdeak errazago egiteaz gain, titularrak informazioa ematen dute DIV etiketa bat ez litzatekeelako.
Pantaila irakurleentzat eta webguneko erabilerraztasunerako lagungarria da
Izenburuak modu egokian erabiltzea dokumentu baten egitura logikoa sortzen du. Hau da pantailako irakurleek ikusmen urritasuna duen erabiltzaileari gune bat "irakurtzeko" erabiliko dutena, zure gunea ezintasuna duten pertsonentzat erabilgarri egongo dena.
Estiloa Testua eta letra nagusiak
Etiketa izenburuaren "big, bold and feely" etik urruntzeko modurik errazena estiloaren testua nahi duzun itxura aldatzea da. Izan ere, webgune berrian lan egiten dudanean, lehen paragrafoa, h1, h2 eta h3 estiloak lehenik idatzi ditut. Normalean letra-familia eta tamaina / pisuarekin itsasten ohi dut. Adibidez, gune berri batentzako aurretiko estilo-orri bat izan daiteke (hauek erabil daitezkeen adibide batzuk besterik ez dira):
gorputza, html {marjina: 0; betegarria: 0; } p {font: 1 Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: Arial 1.2 bitxiak, Geneva, Helvetica, sans-serif; }Zure tituluaren letra-tipoak alda ditzakezu edo testu-estiloa aldatu edo testuaren kolorea aldatu . Horiek guztiek zure "itsusia" izenburua zure dardara eta zure diseinuari jarraituz bihurtuko dute.
h1 {font: Italiako 2em / 1em letra lodiz "Times New Roman", "MS Serif", "New York", serif; marjina: 0; betegarria: 0; kolorea: # e7ce00; }Mugak Jantzi Maiuskulak
Mugak zure titularrak hobetzeko modu bikaina dira. Mugak erraz gehitzen dira. Baina ez ahaztu ertzeekin esperimentatzea - ez duzu zure titularraren alde bakoitzean mugak behar. Eta, besterik gabe, aspergarria den ertzetan baino gehiago erabil dezakezu.
h1 {font: Italiako 2em / 1em letra lodiz "Times New Roman", "MS Serif", "New York", serif; marjina: 0; betegarria: 0; kolorea: # e7ce00; border-top: solid # e7ce00 medium; mugan behean: puntuz # e7ce00 mehea; zabalera: 600 px; }Nire laginaren titularra goiko eta beheko ertz bat gehitu nuen estilo bisual interesgarria aurkezteko. Nahi dituzun diseinu-estiloa lortzeko nahi duzun edozein ertzetara gehi ditzakezu.
Gehitu atzeko planoko irudiak zure azalean Pizazz are gehiago
Webgune askok goiburuko atala dute goiburuko orriaren goiko aldean, normalean gunearen izenburua eta grafikoa. Diseinatzaile gehienek bi elementu bereizten dituzte, baina ez duzu behar. Grafikoa tituluarekin apaintzeko besterik ez badago, zergatik ez gehitu izenburuko estiloetan?
h1 {font: Italiako 3em / 1em lodia "Times New Roman", "MS Serif", "New York", serif; atzeko planoa: #fff url ("fancyheadline.jpg") errepikatu-x behean; betegarria: 0,5 0 0 90 px 0; text-align: center; marjina: 0; mugan behean: solidoa # e7ce00 0.25em; kolorea: # e7ce00; }Tarterako trukea badakit nire irudia 90 pixeleko altuera dela. 90px-ko tituluaren beheko aldean betegarria gehitu dut (betegarria: 0.5 0 90px 0p;). Marjinak, lerro-altuera eta estalkia erreproduzitu ahal izango duzu, titularraren testua non nahi duzun erakusteko.
Irudiak erabiltzean, gogoratu beharra dago web orrialde sentikor bat (beharra duzula) pantailako tamainan eta gailuetan oinarritutako diseinuarekin, titularrak ez du beti tamaina bera izango. Zure titulua tamaina zehatza izan behar baduzu, arazoak sor ditzake. Arrazoi bat da, oro har, ez dut atzealdeko irudiak izenburu batean babesten, edonork itxura atsegina izan dezaten.
Irudiaren ordez azkenengo tituluetan
Web diseinatzaileentzako beste teknika ezagun bat da, titulu grafikoa sortzeko aukera ematen du eta izen horrekin etiketaren testua ordeztu. Zalantzarik gabe, web diseinatzaileen praktika zaharrak letra-tipo gutxi batzuk izan ditzake eta letra-tipo exotiko gehiago erabili nahi izan zuten. Web iturrien gorakada aldatu egin da diseinatzaileek nola hurbiltzen diren guneak. Letra-tipoak letra-tipoak eta irudiak askotarikoak dira. Horrela, CSS irudi ordezkoak baino ezingo dituzu argitaratu ohiko praktika berrietara eguneratu ez diren gune zaharretan.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/6/17