Përdor Fonts, Borders dhe Images për të dekoruar titujt
Titujt janë të zakonshëm në shumicën e faqeve të internetit. Në të vërtetë, shumë e shumë çdo dokument teksti ka tendencë të ketë të paktën një titull në mënyrë që ju të dini titullin e asaj që po lexoni. Këto tituj janë koduar duke përdorur elementët kryesorë të HTML - h1, h2, h3, h4, h5 dhe h6.
Në disa vende, mund të gjesh që titujt janë koduar pa përdorur këto elemente. Në vend të kësaj, titujt mund të përdorin paragrafë me atribute të veçanta të klasës që i shtohen, ose ndarje me elementë të klasës. Arsyeja që unë shpesh dëgjoj në lidhje me këtë praktikë të pasaktë është se dizajni "nuk i pëlqen mënyra se si duket titulli". Përsëri, titujt shfaqen me shkronja të theksuara dhe ato janë më të mëdha, sidomos elementët h1 dhe h2 që shfaqen në madhësi më të madhe të shkrimit se pjesa tjetër e tekstit të një faqeje. Mbani në mend kjo është vetëm pamja e parazgjedhur e këtyre elementeve! Me CSS, ju mund të bëni pamjen e duhur megjithatë ju dëshironi! Ju mund të ndryshoni madhësinë e shkrimit, hiqni bolden dhe shumë më tepër. Titujt janë mënyra e duhur për të koduar titujt e një faqeje. Ja disa arsye pse.
Pse të përdorësh etiketa drejtuese në vend të DIV dhe Styling
Makinat e Kërkimit Ashtu si Titullit Drejtues
Kjo është arsyeja më e mirë për të përdorur titujt, dhe përdorimi i tyre në rendin e duhur (dmth. H1, pastaj h2, pastaj h3, etj). Motorët e kërkimit japin peshën më të lartë tek teksti që përfshihen në etiketat e titullit sepse ka një vlerë semantike për atë tekst. Me fjalë të tjera, duke etiketuar titullin tuaj të faqes H1, i tregoni merimangës së motorrit të kërkimit se kjo është fokusi # 1 i faqes. Titujt H2 kanë # 2 theks, dhe kështu me radhë.
Ju nuk duhet të mbani mend se cilat klasa keni përdorur për të përcaktuar titujt tuaj
Kur ju e dini që të gjitha faqet tuaja të internetit do të kenë një H1 që është i guximshëm, 2em dhe i verdhë, atëherë mund ta përcaktoni atë një herë në fletën tuaj të stilit dhe të bëhet. 6 muaj më vonë, kur po shtoni një faqe tjetër, vetëm shtoni një etiketë H1 në krye të faqes tuaj, nuk duhet të ktheheni në faqe të tjera për të gjetur se çfarë ID stil ose klasë keni përdorur për të përcaktuar kryesore titull dhe nënkryetarë.
Ato sigurojnë një skicë të fortë të faqes
Përshkrimet e bëjnë tekstin më të lehtë për tu lexuar. Kjo është arsyeja pse shumica e shkollave amerikane i mësonin studentët të shkruanin një skicë para se të shkruanin gazetën. Kur përdorni etiketat në një format skicë, teksti juaj ka një strukturë të qartë që bëhet e dukshme shumë shpejt. Plus, ekzistojnë mjete që mund të shqyrtojnë skicën e faqes për të siguruar një përmbledhje, dhe këto mbështeten në etiketat kryesore për strukturën e skicës.
Faqja juaj do të bëjë kuptim edhe me stilin e fikur
Jo të gjithë mund të shikojnë ose përdorin fletët e stilit (dhe kjo kthehet në # 1 - motorët e kërkimit shikoni përmbajtjen (tekstin) e faqes tuaj, jo fletët e stilit). Nëse përdorni etiketat e titullit, ju jeni duke bërë faqet tuaja më të kapshme, sepse titujt japin informacion që një tag DIV nuk do ta bënte.
Është e dobishme për lexuesit e ekranit dhe aksesin në faqen e internetit
Përdorimi i duhur i titujve krijon një strukturë logjike në një dokument. Kjo është ajo që lexuesit e ekranit do të përdorin për të "lexuar" një faqe për një përdorues me dëmtim të shikimit, duke e bërë faqen tuaj të qasshme për njerëzit me aftësi të kufizuara.
Stili i tekstit dhe font i titujve tuaj
Mënyra më e lehtë për t'u larguar nga problemi "i madh, i guximshëm dhe i shëmtuar" i etiketave të titullit është stili i tekstit ashtu siç dëshiron që ata të duken. Në fakt, kur punoj në një faqe interneti të re, zakonisht shkruaj stilin e paragrafit, h1, h2 dhe h3 gjëja e parë. Unë zakonisht rri me familjen e fontit dhe madhësinë / peshën. Për shembull, kjo mund të jetë një fletë e stilit paraprak për një faqe të re (këto janë vetëm disa stile shembull që mund të përdoren):
trupi, html {margin: 0; mbushje: 0; } p {font: 1em Arial, Gjenevë, 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, Gjenevë, Helvetica, sans-serif; }Ju mund të modifikoni fontet e titullit tuaj ose të ndryshoni stilin e tekstit ose madje edhe ngjyrën e tekstit . Të gjitha këto do të kthejnë titullin tuaj "të shëmtuar" në diçka më të gjallë dhe në përputhje me dizajnin tuaj.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "Nju Jork", serif; margjina: 0; mbushje: 0; ngjyra: # e7ce00; }Kufijtë mund të vishen në tituj
Kufijtë janë një mënyrë e shkëlqyer për të përmirësuar titujt tuaj. Dhe kufijtë janë të lehtë për t'u shtuar. Por mos harroni të eksperimentoni me kufijtë - ju nuk keni nevojë për një kufi në secilën anë të titullit tuaj. Dhe mund të përdorni më shumë se thjesht kufijtë e mërzitshëm.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "Nju Jork", serif; margjina: 0; mbushje: 0; ngjyra: # e7ce00; kufiri i lartë: e ngurta # e7ce00 medium; fundi i kufirit: e hollë # e7ce00 hollë; gjerësia: 600px; }Kam shtuar një kufi të lartë dhe të poshtme për titullin tim të mostrës për të futur disa stile interesante vizuale. Ju mund të shtoni kufij në çdo mënyrë që dëshironi të arrini stilin e dizajnit që dëshironi.
Shto imazhe sfondi në titujt tuaj Për më shumë Pizazz
Shumë faqe Web kanë një seksion header në krye të faqes që përfshin një titull - zakonisht titulli i faqes dhe një grafik. Shumica e projektuesve mendojnë për këtë si dy elemente të ndara, por ju nuk keni nevojë. Nëse grafika ka vetëm për të dekoruar titullin, atëherë pse të mos e shtoni atë në stilet e kreut?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "Nju Jork", serif; sfondi: #fff url ("fancyheadline.jpg") përsëritje-x fund; mbushje: 0.5em 0 90px 0; text-align: qendra; margjina: 0; fund i kufirit: e ngurta # e7ce00 0.25em; ngjyra: # e7ce00; }Mashtrimi në këtë titull është se unë e di imazhin tim është 90 piksele i gjatë. Kështu që unë shtova mbushje në fund të titullit të 90px (mbushje: 0.5 0 90px 0p;). Ju mund të luani me margjina, lartësi të vijës dhe mbushje për të marrë tekstin e titullit për të shfaqur saktësisht se ku dëshironi.
Një gjë për të kujtuar kur përdorni imazhet është që nëse keni një faqe interneti të përgjegjshme (që duhet) me një plan urbanistik që ndryshon në bazë të madhësive dhe pajisjeve të ekranit, titulli nuk do të jetë gjithmonë i njëjti madhësi. Nëse keni nevojë që titulli juaj të jetë një madhësi e saktë, kjo mund të shkaktojë probleme. Kjo është një nga arsyet pse unë në përgjithësi shmang imazhet e sfondit në një titull, aq të ftohtë sa ndonjëherë mund të duken.
Ndërrimi i imazhit në tituj
Kjo është një tjetër teknikë popullore për hartuesit e uebit sepse ju lejon të krijoni një titull grafik dhe të zëvendësoni tekstin e titullit të titullit me atë imazh. Kjo është një praktikë antiqued nga web designers kishte qasje në fonts shumë pak dhe donin të përdorin fonts më ekzotike në punën e tyre. Rritja e fonts web ka ndryshuar me të vërtetë se si designers qasje faqet. Titujt tani mund të vendosen në një shumëllojshmëri të gjerë të fonts dhe imazhet me ato fonts ngulitur nuk janë më të nevojshme. Si i tillë, do të gjesh vetëm zëvendësimin e imazheve të CSS për titujt në faqet e vjetra që nuk janë përditësuar ende në praktikat më moderne.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 9/6/17