Hvernig á að smíða myndakort með CSS

Valkostir

Mig langaði í eitthvað „geeky“ svo ég ákvað „grafa“ vasa sem geymir allar áskriftaraðferðir fyrir bloggið mitt.

Á dögum Vef 1.0 var hægt að byggja upp svona krækjasöfn með því að splæsa myndinni þinni saman með krækjum á hverja mynd og reyna síðan að sauma hana alla saman með töflu. Það gæti einnig verið náð með því að nota myndakort en það þarf venjulega tæki til að byggja upp hnitakerfið. Notkun Cascading Style Sheets gerir þetta tonn auðveldara ... engin splicing myndir og engin að reyna að finna tæki til að byggja upp hnitakerfi þitt!

  1. Byggðu upp myndina þína sem þú vilt nota. Þú getur notað þessa mynd hér að neðan (hægrismelltu og vistaðu til að hlaða niður):
    Valmöguleikar
  2. Sendu myndina þína upp í skrá sem er miðað við CSS. Í WordPress er hægt að gera þetta auðveldast með því að setja það í myndamöppu í þemaskránni þinni.
  3. Bættu við HTML. Það er fínt og einfalt ... deild með þremur hlekkjum í:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Gerast áskrifandi með RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[tengilinn þinn fyrir áskrift að netfanginu]" title = "Gerast áskrifandi með tölvupósti" >> span class = "hide"> Netfang> / span >> / a>> a id = "mobile" href = "[farsímatengill þinn" "title =" Skoða farsímaútgáfu ">> span class =" hide "> Farsími> / span >> / a>> / div>
    
  4. Breyttu Cascading Style Sheet þínu. Þú verður að bæta við 6 mismunandi stílum. 1 stíll fyrir heildarskiptinguna, 1 fyrir merkið svo það birtir ekki textaskreytingu, 1 stíl til að fela textann (notað fyrir aðgengi) og 1 stílskilgreiningu fyrir hvern hlekk:
    #subscribe {/ * bakgrunnsmyndar blokk * / skjá: loka; breidd: 215px; hæð: 60px; bakgrunnur: url (myndir / options.png) ekki endurtaka; framlegðartopp: 0px; } # gerast áskrifandi að {text-decoration: none; } .hide {skyggni: falið; } #rss {/ * RSS hlekkur * / flot: vinstri; staða: alger; breidd: 50px; hæð: 50px; spássía til vinstri: 20px; framlegðartoppur: 5px; } #email {/ * Tengill tölvupósts * / flot: vinstri; staða: alger; breidd: 50px; hæð: 50px; spássíu-vinstri: 70px; framlegðartoppur: 5px; } #mobile {/ * Mobile Link * / float: vinstri; staða: alger; breidd: 50px; hæð: 50px; spássía til vinstri: 130px; framlegðartoppur: 5px; }

Staðsetningin er fín og einföld ... bættu við hæð og breidd og stilltu síðan vinstri spássíu frá vinstri hlið myndarinnar og efri spássíu frá efri hlið myndarinnar!

Þessi „How To“ færsla er til inngöngu í Geeks eru kynþokkafullur „How To“ keppni! Ein athugasemd, það er rétt að myndakort getur haft mun flóknari marghyrninga, en ég hef í raun ekki séð of marga staði þar sem það verður að hafa. Ég tók eftir því að stór mynd af RSS á Geeks eru kynþokkafull skenkur ... það er góður staður fyrir hlekk. 😉

UPPFÆRT 10/3/2007 fyrir betra aðgengi með ráðum Phil!

styrktaraðili: Ef þú ert nýliði í vefhönnun, þá skaltu byggja upp eigin vefsíðu á réttan hátt með HTML & CSS, 2. útgáfa er nauðsynlegt. Í þessari handbók sem auðvelt er að fylgja muntu læra hvernig á að byggja upp vefsíðu á besta hátt - með því að gera það sjálfur!

41 Comments

  1. 1

    Doug, það virðist vera fín aðferð, en hún er mjög óaðgengileg.

    Hugleiddu blindan notanda með skjálesara, notanda með texta aðeins vafra eða einhver sem heimsækir síðuna án CSS eða mynda virkjað (eins og kannski farsímanotandi að leita að hlekknum á farsímavæna síðu þína). Enginn þeirra mun vita um þessa þrjá hlekki því þeir hafa engan texta. Ef myndir eru slökkt mun notandi ekki einu sinni sjá alt texta til að lýsa því sem hefði verið þar vegna þess að það er bakgrunnsmynd.

    Betra væri að sneiða myndirnar, tengja þær saman, setja þær á lista og fljóta þær við hliðina á hvor annarri. Eða jafnvel nota texta fyrir krækjurnar og skipta um texta með venjulegri myndskiptatækni. Þetta virðist þægilegt, en það gerir hlutina miklu erfiðara / ómögulegra fyrir þá sem ekki nota venjulegan myndrænan vafra.

    • 2
      • 3

        Doug,

        JAWS les ekki titla á tengla sjálfgefið, en þú hefur rétt fyrir þér, það getur gert. Af hverju myndirðu leita að titlum á tengilinn ef þú vissir ekki að það væri þarna, og jafnvel ef þú varst, þá fellur þetta örugglega í notagildismál sem þýðir að þú ert að gefa færari notendum annað flokks reynslu af notkun síðunnar þinnar.

        Fyrir textavafra, greinin sem þú bendir mér í átt að Lynx gerir þér einnig kleift að koma upp lista yfir titla á krækjum, en punktur minn er sá að ef þú vissir ekki að það var krækja þarna, þar sem enginn texti var til að byrja með , af hverju myndirðu leita að titiltexta?

        Að lokum munu titilseiginleikar hlekkja samt ekki birtast fyrir neinn sem vafrar án þess að gera myndir virkar eða án CSS virkt.

        Svo já, tengsl við titla eru betri en þau án, en í þessu tilfelli er það aðeins lélegt.

        Þetta er ástæðan fyrir því að nota mynd, svo að hægt sé að lesa alt texta, eða skipta um mynd, svo að textinn sé til staðar, er mun öruggari, aðgengilegri og nothæfari kostur.

        • 4

          Góðar upplýsingar, Phil. Ég ætla að reyna að bæta þetta með texta en einfaldlega fela textann - þannig að aðgengileg vara eins og JAWS les hlekkjatextann og textinn birtist ef CSS eða myndir eru óvirkar.

          Ég er ósammála því að eina aðgengilega lausnin væri þó að setja mynd með krækju.

  2. 5
  3. 8

    Ég stal því. Þar sagði ég það.

    Doug, grafíkin er frábær og kóðunin er svo ótrúlega einföld að það hræðir mig (verið að leika mér með CSS og nú „loksins“ fæ ég það).

    Lagfærði kóðann til að koma til móts við þarfir mínar, fann út hvar ég ætti að sleppa HTML bitanum og satt að segja lítur hann vel út og hefur hreinsað það efst á skenkurnum mínum sem hefur verið að keyra mig GEÐVEIKT.

    Ég gæti bara þurft að kaupa þér kaffið ennþá!

  4. 10

    Doug,

    Ég ætla að vera aðgreind rödd og nota reynslu mína sem dæmi. Ég man eftir tölvupóstinum okkar þegar heimanetfangið mitt breyttist og þú tókst eftir að ég yrði einfaldlega að taka þátt í nýja tölvupóstinum mínum. Ég verð að viðurkenna að ég átti það til að „uppgötva“ nýja eiginleikann á síðunni þinni til að taka þátt aftur. Hluti af þessu var vegna þess að upprunalega hlekkurinn var aðeins hefðbundnari og ég mundi óljóst eftir þeim. Hitt var vegna þess að hálft umslagið til hliðar leit ekki út fyrir að vera umslag hjá mér upphaflega. Eftir um það bil 5 eða fleiri mínútur byrjaði ég að velta músinni yfir hverja mynd og þegar titillinn „Gerast áskrifandi með tölvupósti“ birtist vissi ég að ég var í viðskiptum. Heilinn minn komst líka að því hver tengingarmyndin var.

    En að minnsta kosti fyrir mig var umslag til hliðar bara ekki innsæi fyrir mig sem staðinn til að gerast áskrifandi að tilkynningum í tölvupósti. Og (af því að mér var sagt að enda alltaf með einhverju sniðugu) er ég sammála Phil hér að ofan; aðferðin er virkilega einföld og allur hluturinn virkar frábærlega. Ég held að hönnunartólið þitt hafi hjálpað til við að gefa þér nákvæmar mál fyrir þrjá hlutana; er það rétt forsenda? Ég verð að gera ráð fyrir því, þar sem ef ég hefði, segjum, 3 pixla breiða mynd þyrfti ég að vita réttar stillingar o.s.frv.

  5. 12
    • 13

      Vilhjálmur,

      Það lítur út fyrir að þú gætir átt í átökum milli nafna ummæla bekkjar þíns og bekkjaheita í skenkur myndarinnar. Þú getur nefnt þau öðruvísi til að hreinsa átökin. Láttu mig vita ef þig vantar hönd!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Fín nálgun, en ég þarf eitthvað fyrir landfræðilegt kort, svo ég get ekki notað rétthyrningssvæði ... Ég held að ég verði að nota gamla stílmyndakortið með hnitum, en ég mun líklega grafa aðeins dýpra ...

  11. 19

    Takk fyrir þessar upplýsingar, Doug. Ég hafði verið hér áður og velti fyrir mér hvernig þú gerðir það. Við vildum búa til svona kort til að setja inn eftir færslurnar okkar og nú þegar við höfum burði getum við gert það. Bravo!

  12. 20
  13. 21

    Hæ Doug,
    Ég skildi eftir fyrri athugasemd en áttaði mig á því að ég bauð varla neinum innsýn í ógöngur mínar yfirleitt. Við höfum verið að laga wordpress þema til að hjálpa okkur að koma af stað vefsíðu okkar hér:

    http://www.phaylen.com/blog/

    Nú sérðu að við erum með leiðsögubann efst, mynd sem við ætluðum að kortleggja eins og við höfum tugum sinnum áður. / palmforehad. Ekkert okkar skilur CSS í raun, en við hrasum nægilega og hingað til hefur okkur gengið allt í þessu. Grein þín í AÐEINS einum af tugum sem veittar eru raunveruleg innsýn í hvernig á að nýta myndakort í CSS auðveldlega. Ég sendi stílblaðið í samræmi við leiðbeiningar þínar, en hef ekki hugmynd um hvar HTML skal komið fyrir. Allt sem þú sagðir er „Bættu við htmlinu þínu ... Það er fínt og einfalt“ og þá hrökk ég í kramið vegna þess að ég hélt .. „ekki nógu einfalt fyrir mig!“ Ég vissi ekki að ég gæti bætt html við neinar af þessum php síðum í ritstjóranum. Set ég HTML-ið í hausinn? Helstu vísitölusniðmát? Aðgerðirnar? Ég geri ráð fyrir að allir WordPress notendur hafi möguleika á að breyta þema sínu í mælaborðsritstjóranum, sem virðist nokkuð algilt í virkni. Ef þú gætir stungið upp á því hvar á að setja HTML-ið, þá vil ég gjarnan aðlaga oru kóða fyrir siglingastikuna mína.

    Takk fyrir að miðla þekkingu þinni til samfélagsins. Ég er ánægð að fá þér kaffi.

    • 22

      Hæ Phay!

      Allar skrárnar fyrir þema bloggsins þíns eru fáanlegar í stjórnborðinu til að breyta. Ef þú smellir á Kynning og síðan Þemaritill ættirðu að geta séð lista yfir skrár þínar til hægri og ritstjóra til vinstri.

      Ef þú vilt að þetta sé í hliðarstikunni þinni, þá ertu líklega með Sidebar síðu. Smelltu til að breyta því og settu síðan HTML upp á síðuna þar sem þú vilt hafa það.

      Ein athugasemd: Stílbréfsbreytingin er miðað við síðuna þína, þannig að þú þarft að hlaða myndinni upp í þemamyndasafnið ef þú ert að vísa til þess eins og aðrar myndir í þemaðinu.

      Vona að hjálpa!

    • 23

      Phay,
      Ég rakst á þessa síðu í dag og var með sömu ógöngur og þú. Mig langaði líka að bæta myndakorti við hausmyndina. Eftir að hafa leikið mér að því í smá tíma fékk ég það rétt. Settu div HTML í header.php skrána. Ég setti það á milli og. Ekki viss um hvort sniðmátið þitt sé með nákvæmlega kóðun, en spilaðu með það í header.php skránni og þú munt komast að því.
      -
      paul

  14. 24

    Takk fyrir hröð viðbrögð!

    Nei, ég vildi ekki að það væri í hliðarstikunni, það er efst á síðunni (þú getur séð í krækjunni sem ég gaf upp - bleika flakkstikuna sem segir contant, um sýninguna osfrv.)

    Ég hef verið að vinna í mælaborðinu í allan morgun, því miður, ég er ekki viss í hvaða skrá ég set HTML, eins og fram kemur hér að ofan, ég er með nokkrar, header.php, main index.php, functions.php, footer.php. Ég er ekki viss hvar ég á að setja inn HTML kóðann. (fyrri hlutinn sem þú gafst upp, ég er búinn að setja afganginn í stílblaðið mitt) Ég er með myndina mína þar á vefsíðunni, allt er tilbúið til að fara, ég þarf bara að vita hvar á að bæta við HTML hluta kóðans til að laga.

    Takk kærlega fyrir tíma þinn og spurningar frá nýliða.

    Phay

  15. 25

    ... Eða kannski gæti einhver sent í athugasemdirnar um hvaða skrá við setjum HTML hlutann af kóðanum í. Herra nokkur innlegg sagði að hann gerði sér grein fyrir því. Ég hef ekki verið svo heppin.

    Phaylen

  16. 26
  17. 27

    Ég er í helvítis tíma með að finna leið til að fella smellt myndakort í wordpress vegna þess að það rýmir html kortamerki. Leið þín myndi virka en kort af Bandaríkjunum er augljóslega leið til flókinna að skrúfa með þessum hætti. Ég er týndur.

    Hjálp.

    Svo virðist sem flass sé eini kosturinn minn?

    • 28

      Dave,

      Ef þú setur myndina í sniðmátið þitt, þá mun þér líða vel. Ef þú setur myndakortið í raunverulegt innihald gætirðu lent í síuvandræðum. Leiðin sem ég hef unnið í kringum þetta er hræðileg en stundum hef ég notað iframe.

      Doug

  18. 29

    Hæ,

    það virðist sem myndakortið og tenglarnir séu tveir mismunandi hlutir, þeir vinna ekki saman eins og hvernig myndakort í html gerir

    þegar ég læt bakgrunnsstaðsetningu fylgja (miðja til vinstri) fyrir myndakortið fylgir staðsetning krækjanna ekki eftir.

    einhver leið til að komast í kringum þetta? ég er mjög áhugamaður. Þakka þér fyrir.

  19. 31

    Væri svipuð nálgun notuð fyrir stærra og flóknara myndakort eins og ég er að reyna að nota?

    Ef þú skoðar síðuna mína skaltu smella á tengla til vinstri og þá sérðu myndina sem ég er að reyna að nota sem myndakort (undir textabókstafnum).

    Í grundvallaratriðum, að reyna að nota myndina til að fara í hvern hluta listans með bréfi.

    Augljóslega eyddi ég 20 mínútum í að byggja kort með GIMP og síðan fjarlægir WP kortamerkin, þannig að ég fann síðuna þína.

    Þó, gæti hugleitt að nota Flash

    Takk.

  20. 33

    ég er núna að nota sniðmátaskipulag og klippa með eigin efni. Ég vil bæta við myndakorti en ég er ekki viss hvar ég á að setja það í css. myndin sem ég vil búa til kort af er í haushlutanum.

  21. 34

    halló, ég byggði vefsíðuna mína á Joomla ... ég vil nota þessa aðferð til að gera lógóið á síðunni minni að tengli heim, mér hefur verið sagt að þú getir ekki gert þetta með Joomla en þessi grein gefur mér von! hjálp í tölvupósti væri mjög vel þegin .... takk

  22. 35

    Hæ Doug - Ég er að byggja upp frekar flókið CSS-byggt myndakort sem hefur einnig fjarstýringu (í þessu tilfelli birtist texti annars staðar á síðunni þegar þú sveima yfir einum af heitum reitunum). Einhvern veginn rakst ég á dæmið þitt hér þegar ég rannsakaði það ... og ég hélt að ég myndi deila eftirfarandi inntaki:

    1. Fyrir aðgengi ættirðu ekki að nota sýnileika: enginn (eða sýna: enginn ef þú teldir það) til að fela textann hér, sem þáttur sem er stílaður á sýnileika: falinn verður ekki lesinn af skjálesurum (þeir sem fylgja sérstökum) .

    Notaðu í staðinn öflugri tækni til að skipta um myndir. Ég legg til annað hvort Phark aðferðina eða Gilder / Levin - þetta eru bara betur skjalfest nöfnin til að gúggla til að finna grunntækni. Ég vil frekar G / L þar sem það virkar líka með CSS virkt en slökkt er á myndum.

    2. Þó að ég sjái það ekki brjótast (með því að nota FF3), hefur framkvæmd þín á staðsetningunni einnig eðlislæga áhættu. Algerlega staðsettur þáttur er staðsettur miðað við foreldrið sem er næst staðsett. Í grundvallaratriðum viltu stilla staðsetningarsamhengi með því að beita 'stöðu: miðað' við # áskrift. Svo er hægt að staðsetja börnin (hlekkirnir sem eru staðsettir) innan þess foreldris. Þessi aðferð hjálpar til við að tryggja áreiðanlegri niðurstöður í öllum vöfrum.

    Þú ættir einnig að nota staðsetningaryfirlýsingar „efst: x“ og „vinstri: x“ (þar sem x er móti gildi, segjum í px) frekar en spássíur til að takast á við þá staðsetningu. Aftur sé ég ekki endilega að það brjóti eins og þú hefur það, en efst og vinstri er ætlað fyrir þetta svo af hverju ekki að nota þau? Auk þess sem þú hefur sett flot og framlegð á sama frumefni, sem við sérstakar aðstæður veldur „tvöföldum framlegð“ galla í IE6 (prófaðir þú þetta þar?) - þó að það sé lagfærð, forðastu það mál alfarið með því að nota topp og fór í stað framlegðar til staðsetningar í þessu tilfelli.

    3. Að lokum, af hverju ekki að nota merkingarlega hljóðan óraðaðan lista fyrir þessa krækjur í staðinn fyrir tilgangslausan div?

    Því miður fyrir að dróna ... Ég vil bara deila, b / c ég veit af reynslu hvernig það eru margar mismunandi leiðir til að nota CSS til að ná tilætluðum árangri, en sumar leiðir virka örugglega betur (áreiðanlegri, yfir vafra) en aðrar . HTH.

  23. 36
  24. 37
  25. 38

    Þakka þér kærlega!! Leiðbeiningar þínar björguðu mér TÍMA vinnu ... Ég er nýr í vefþróun og þjáðist bara af fyrsta stóra verkefninu mínu. Ég náði því ... viðskiptavinurinn er ánægður, himinlifandi í raun og ég líka!

  26. 39

    Halló, takk kærlega fyrir að senda þetta! Árum seinna og það er enn að hjálpa ... gott! Ég er í basli með að fá myndakortið mitt til að krækjast á réttan stað. Ég er með borða og ég vil að félagslegu táknin efst til hægri á borðanum tengist með kóðanum sem þú hefur gefið upp. Það virkar frábært, nema ég er að gera eitthvað vitlaust vegna þess að krækjurnar mínar birtast lengst til vinstri á skjánum, ekki yfir félagslegu táknin, heldur yfir merkið. Ég er viss um að þetta er eitthvað einfalt en ég bara get ekki fundið það út. Hélt að ég myndi deila því hér ef þú hefur einhverja innsýn. Takk aftur fyrir að senda þetta!

Hvað finnst þér?

Þessi síða notar Akismet til að draga úr ruslpósti. Lærðu hvernig ummæli þín eru unnin.