Nola eraiki irudi mapa CSS-rekin

aukera

"Geeky" zerbait nahi nuenez, nire blogerako harpidetza metodo guztiak biltzen dituen "poltsikoko" grafikoa erabaki nuen.

Web 1.0 egunetan, horrelako esteken bilduma bat eraiki zitekeen irudia grafiko bakoitzaren estekekin bilduz, gero taula batekin batera josten saiatuz. An erabilita ere lor liteke irudiaren mapa baina horretarako normalean tresna bat behar da koordenatu sistema eraikitzeko. Kaskadako estilo orriak erabiltzeak asko errazten du ... ez du irudirik uztartzen eta ez duzu zure koordenatu sistema eraikitzeko tresna aurkitzen saiatzen!

  1. Eraiki erabili nahi duzun irudia. Beheko grafiko hau erabil dezakezu (egin klik eskuineko botoiaz eta deskargatu bezala gorde):
    Aukerak
  2. Kargatu zure irudia zure CSSarekin erlazionatutako direktorio batera. WordPress-en, zure gaiaren direktorioko irudi karpetan kokatuz errazena egin daiteke.
  3. Gehitu zure HTMLa. Polita eta sinplea da ... hiru esteka dituen dibisioa:
    > div id = "subscribe">> a id = "rss" href = "[zure jarioaren esteka]" title = "Harpidetu RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[zure posta elektronikoa harpidetzeko esteka]" title = "Harpidetu posta elektronikoarekin" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[zure mugikorreko esteka]" title = "Ikusi bertsio mugikorra" >> span class = "hide"> Mugikorra> / span >> / a>> / div>
    
  4. Editatu zure Cascading estilo orria. 6 estilo desberdin gehituko dituzu. 1 estilo orokorreko div, 1 etiketa bat, beraz, ez du testu dekoraziorik erakusten, 1 estiloa testua ezkutatzeko (erabilerraztasunerako erabiltzen da) eta 1 estilo zehaztapen lotura bakoitzerako:
    #subscribe {/ * atzeko irudiaren blokea * / display: block; zabalera: 215px; altuera: 60px; background: url (images / options.png) errepikatu gabe; marjina-goian: 0px; } #subscribe a {text-decoration: none; } .hide {ikusgarritasuna: ezkutatuta; } #rss {/ * RSS Link * / float: left; posizioa: absolutua; zabalera: 50px; altuera: 50px; marjina-ezkerra: 20px; marjina-goian: 5px; } #email {/ * Email Link * / float: left; posizioa: absolutua; zabalera: 50px; altuera: 50px; marjina-ezkerra: 70px; marjina-goian: 5px; } #mobile {/ * Mobile Link * / float: left; posizioa: absolutua; zabalera: 50px; altuera: 50px; marjina-ezkerra: 130px; marjina-goian: 5px; }

Posizionamendua polita eta erraza da ... gehitu altuera eta zabalera eta, ondoren, ezarri ezkerreko marjina irudiaren ezkerreko aldetik eta goiko marjina irudiaren goiko aldetik!

"Nola" mezu hau Geeks Sexy ultimate "How To" Lehiaketa dira! Ohar bat, egia da irudien mapak poligono askoz konplexuagoak izan ditzakeela, baina benetan ez dut leku hori gehiegi ikusi behar. Geeks-en RSS irudi handiak Sexy alboko barra direla ohartu nintzen ... hori esteka egokia da. 😉

10/3/2007 EGUNERATUA, aholkularitzarekin irisgarritasun hobea lortzeko Phil!

Babeslea: Web diseinuan hasi berria bazara, eraiki zeure webgunea modu egokian HTML eta CSS erabilita, 2. edizioa ezinbestekoa da. Jarraitzen erraza den gida honetan ikasiko duzu webgunea ahalik eta modurik onena nola eraiki - zuk zeuk eginez!

41 Comments

  1. 1

    Doug, metodo polita dirudi, baina oso eskuraezina da.

    Demagun pantaila irakurgailua duen erabiltzaile itsua, testua soilik duen arakatzailea duen erabiltzailea edo CSS edo Irudiak gaituta ez duen gunea bisitatzen duen edonor (adibidez, mugikorreko erabiltzaileentzako gunearekin lotura bilatzen duen erabiltzaile mugikorra). Horietako inork ez du hiru esteka horien berri izango, testurik ez dutelako. Irudiak desaktibatuta badaude, erabiltzaileak ez du testu alternatiborik ikusiko han egongo zena deskribatzeko atzeko planoko irudia delako.

    Hobe litzateke irudiak zatitzea, lotzea, zerrenda batean jartzea eta elkarren ondoan flotatzea. Edo esteka erabili testua eta ordeztu testua irudia ordezkatzeko teknika estandar bat erabiliz. Hau komenigarria dela dirudi, baina askoz zailagoak / ezinezkoak egiten zaizkio arakatzaile grafiko estandarra erabiltzen ez dutenei.

    • 2
      • 3

        Doug,

        JAWS-ek ez ditu esteka izenburuak irakurtzen lehenespenez, baina arrazoi duzu, bai. Zergatik bilatuko zenuke esteken izenburuak bilatuko bazenitu ere, ez zenekiela eta, hala bazen ere, ziur asko erabilerraztasun arazo bat dela esan nahi du, hau da, gaitasuna duten erabiltzaileei zure webgunea erabiltzeko bigarren maila ematen diezula.

        Testu arakatzaileei dagokienez, Lynx horretara zuzentzen nauzun artikuluak esteken izenburuen zerrenda ateratzeko aukera ere ematen du, baina nire iritzia da esteka bat zegoela jakingo ez bazenuen, lehenik ez zegoelako testurik. , zergatik bilatuko zenuke izenburuko testua?

        Azkenean, estekaren izenburuaren atributuak oraindik ez dira agertuko irudiak gaitu gabe edo CSS gaitu gabe arakatzen duenarentzat.

        Bai, izenburuekin loturak ez dituztenak baino hobeak dira, baina kasu honetan marjinala da.

        Horregatik, irudi bat erabiltzea, testu alternatiboa irakurri ahal izateko edo irudiaren ordezkoa, testua hor egon dadin, askoz ere aukera seguruagoa, eskuragarriagoa eta erabilgarriagoa da.

        • 4

          Informazio ona, Phil. Testuarekin hori hobetzen saiatuko naiz, baina testua ezkutatu besterik ez dago - horrela JAWS bezalako produktu eskuragarri batek estekaren testua irakurriko du eta testua bistaratuko da CSS edo Irudiak desgaituta badaude.

          Ez nago ados irtenbide eskuragarri bakarra Irudi bat esteka batekin jartzea litzatekeela.

  2. 5
  3. 8

    Lapurtu nuen. Hor, esan nuen.

    Bai, grafikoak zoragarriak dira eta kodetzea oso sinplea da, beldurra ematen dit (CSS-rekin jolasten egon naiz eta orain "lortu" egiten dut).

    Kodea egokitu nuen nire beharrak asetzeko, HTML bit-a non sartu behar nuen asmatu nuen eta, egia esan, itxura bikaina du eta ZORATZEN gidatu nauen alboko barraren goiko aldea garbitu du.

    Agian kafe hori erosi beharko nizuke!

  4. 10

    Doug,

    Desadostasunezko ahotsa izango naiz, nire esperientzia adibide gisa hartuta. Gogoratzen ditut gure posta elektronikoa nire etxeko posta elektronikoa aldatu zenean eta nire berriarekin bat egin behar nuela adierazi zenuen. Aitortu behar dut denbora pasa nuen zure webguneko eginbide berria "deskubritzen" berriro hautatzeko. Horren zati bat jatorrizko esteka apur bat tradizionalagoa zelako eta lausoki gogoratu nuelako. Bestea, alboko gutun-azal erdiak ez zidan gutun-azal bat zirudien hasieran. 5 minutu inguru edo gehiago igaro ondoren sagua irudi bakoitzaren gainean jartzen hasi nintzen eta "Harpidetu posta elektronikoz" izenburua agertzen zenean, orduan banekien negozioan nengoela. Nire burmuinak estekaren argazkia zein zen ere asmatu zuen.

    Baina, niretzat behintzat, alboko gutun-azal bat ez zitzaidan intuitiboa izan posta elektroniko bidezko jakinarazpenetara harpidetzeko lekua zelako. Eta (beti zerbait politarekin amaitzeko esan didatelako) goian nago ados Philekin; metodoa oso erraza da eta elementu oso bikaina da. Nire ustez, zure diseinu tresnak 3 ataletarako neurri zehatzak ematen lagundu zizun; hipotesi zuzena al da? Hori suposatu behar dut, izan ere, 400 pixel zabaleko irudia banu, ezarpen egokiak ezagutu beharko nituzke eta abar.

  5. 12
    • 13

      William,

      Badirudi gatazka bat izan dezakezula zure iruzkin klaseen izenen eta alboko barrako grafikoaren klase izenen artean. Bestela izendatu ditzakezu gatazka argitzeko. Eskatu behar baduzu, jakinarazi iezadazu!

      Doug

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

    Ikuspegi polita, baina mapa topografiko baterako zerbait behar dut, beraz ezin ditut laukizuzeneko eremuak erabili ... Uste dut estilo zaharreko irudien mapa erabili behar dudala koordenatuekin, baina ziurrenik pixka bat gehiago sakonduko dut ...

  11. 19

    Eskerrik asko informazio honengatik, Doug. Lehenago hemen nengoen eta nola egin zenuen galdetu nion. Horrelako mapa bat sortu nahi genuen gure mezuen ondoren txertatzeko, eta orain bitartekoak ditugunean, egin dezakegu. Bravo!

  12. 20
  13. 21

    Kaixo Doug,
    Aurreko iruzkin bat utzi nuen baina konturatu nintzen ia ez nuela nire dilemari buruzko argibiderik eskaintzen. Wordpress gai bat egokitzen aritu gara gure lineako sitcoma hemen abiarazten laguntzeko:

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

    Orain, goian zehar nabigazio bandera bat dugula ikusiko duzu, aurretik hamar aldiz bezala mapatzeko asmoa genuen irudia. / palmforehad. Gutako inork ez du CSS ulertzen, baina nahikoa estropezu egiten dugu eta orain arte ondo egin dugu. Emandako hamarnaka BAKARREN artikulua benetako ikuspegia da irudien mapa CSSn erraz nola erabili jakiteko. Estilo orria zure jarraibideen arabera aldatu nuen, baina ez dakit HTMLa non kokatu. Esan zenuena da "Gehitu zure html ... Polita eta erraza da" eta gero kikildu egin nintzen pentsatu nuelako .. "Niretzat ez da nahikoa!" Ez nekien gai editorean php orri hauetako edozeinetan html gehi nezakeen. Html goiburuan kokatzen al dut? Indize nagusia txantiloia? Funtzioak? Suposatzen dut wordpress erabiltzaile guztiek beren gaia arbeleko editorean editatzeko aukera dutela, funtzionaltasunean nahiko unibertsala dela dirudi. HTMLa non jarri iradokitzen bazenieke, gustatuko litzaidake nire nabigazio barrarako oru kodea egokitzea.

    Eskerrik asko zure ezagutza komunitatearekin partekatzeagatik. Pozik nago kafea hartzeko.

    • 22

      Kaixo Phay!

      Zure blogaren gaiaren fitxategi guztiak Administrazio panelaren bidez daude eskuragarri editatzeko. Aurkezpena eta gero Gaiaren editorea sakatzen baduzu, zure fitxategien zerrenda eskuinean eta editorea ezkerraldean ikusi beharko zenituzke.

      Zure alboko barran egotea nahi baduzu, ziurrenik alboko barraren orria duzu. Egin klik editatzeko eta jarri emandako HTMLa nahi duzun orrialdean.

      Oharra: estilo orria editatzea zure orriarekin erlazionatuta dago, beraz, irudia gaiaren irudien direktoriora igo beharko duzu zure gaian beste irudi batzuekin egingo duzun erreferentzia egiten baduzu.

      Hope laguntzen duen!

    • 23

      Phay,
      Gune honekin topo egin dut gaur eta zu bezalako dilema izan dut. Goiburuko irudiari irudi mapa ere gehitu nahi nion. Pixka bat berarekin jolastu ondoren, ondo egin nuen. Jarri div HTML header.php fitxategian. Artean jartzen dut. Ez dakizu ziur zure txantiloiak kodeketa zehatza duen, baina jolastu berarekin header.php fitxategian eta asmatuko duzu.
      -
      Paul

  14. 24

    Eskerrik asko erantzun azkarrarengatik!

    Ez, ez nuen nahi alboko barran egotea, orrialdearen goialdean dago (nik emandako estekan ikus dezakezue, contant dioen nabigazio barra arrosa, ikuskizunari buruz ..)

    Goiz osoan arbelean aritu naiz lanean, zoritxarrez, ez dakit ziur zein fitxategitan kokatuko dudan html, goian esan bezala, baditut hainbat, header.php, index.php nagusia, functions.php, footer.php. Ez dakit ziur non txertatu html kodea. (eman zenuen lehen zatia, jada gainerakoa nire estilo orrian sartu dut) Nire irudia hor daukat webgunean, dena prest dago, egokitzeko kodearen html zatia non gehitu jakin behar dut.

    Mila esker hasiberri baten denbora eta galderengatik.

    Phay

  15. 25

    … Edo, agian, norbaitek bidal lezake kodearen html zatia zein artxibotan kokatzen dugun iruzkinetan. Zenbait lagun jaun batek esan du asmatu duela. Ez dut hain zortea izan.

    Phaylen

  16. 26
  17. 27

    Pixka bat denbora pasatzen ari naiz wordpress-en klik egin daitekeen irudi mapa txertatzeko modua aurkitzen, html mapen etiketak biluzten dituelako. Zure bideak funtzionatuko luke, baina, jakina, AEBetako mapa konplexua da modu honekin izorratzeko. Galduta nago.

    Laguntza.

    Badirudi flash dela nire aukera bakarra?

    • 28

      Dave,

      Irudia zure txantiloian jartzen baduzu, ondo egongo zara. Irudien mapa benetako edukian jartzen baduzu, iragazki arazoak sor ditzakezu. Horren inguruan lan egiteko modua ikaragarria da, baina batzuetan iframe bat erabili dut.

      Doug

  18. 29

    Hi,

    badirudi irudien mapa eta estekak bi gauza desberdin direla, ez dute elkarrekin funtzionatzen html-ko irudi mapa batek egiten duen moduan

    irudiaren maparako atzeko planoaren kokapena (erdian ezkerrean) sartzen dudanean, esteken posizioak ez du jarraipenik egiten.

    hau inguratzeko modurik? oso afizionatua naiz. eskerrik asko.

  19. 31

    Antzeko ikuspegia erabiliko al litzateke erabiltzen saiatzen ari naizen irudi mapa handiago eta korapilatsuagoetarako?

    Nire webgunea ikusten baduzu, egin klik ezkerreko esteketan eta irudien mapa gisa erabiltzen saiatzen ari naizen irudia ikusiko duzu (Testuaren alfabetoaren azpian).

    Funtsean, irudia zerrenda honetako atal bakoitzera letraz joateko erabiltzen saiatuz.

    Bistan denez, 20 minutu eman nituen GIMP-rekin mapa bat eraikitzen, eta gero WP-k mapa etiketak kentzen zituen, horrela aurkitu nuen zure gunea.

    Hala ere, baliteke Flash erabiltzea pentsatzea

    Eskerrik asko.

  20. 33

    Momentuz txantiloien diseinua erabiltzen ari naiz eta nire gauzekin editatzen ari naiz. Irudi mapa gehitu nahi dut, baina ez dakit ziur non kokatu CSSn. mapa bat egin nahi dudan irudia goiburuko zatian dago.

  21. 34

    kaixo, nire webgunea joomla-n eraiki nuen ... metodo hau erabili nahi dut nire orriaren logotipoa etxerako esteka bihurtzeko, esan didate ezin duzula joomla-rekin egin baina artikulu honek itxaropena ematen dit! posta elektroniko bidezko laguntza asko eskertuko litzateke ... eskerrik asko

  22. 35

    Kaixo Doug: css-en oinarritutako irudi-mapa konplexu samarra eraikitzen ari naiz, urruneko mugimenduak ere badituena (kasu honetan, testua orrialdeko beste leku batzuetan bistaratzen da irudi puntu bat kokatzean). Nolanahi ere, zure adibidea topatu nuen hemen ikertzen ari nintzela ... eta sarrera hau partekatzea pentsatu nuen:

    1. Irisgarritasuna lortzeko, ez zenuke ikusgarritasuna erabili behar (ezta bistaratu: bat ere kontuan hartu baduzu) testua hemen ezkutatzeko, ikusgarritasuna duen elementu gisa: ezkutatuta ez dute pantaila irakurgailuek (zehaztapenak jarraitzen dituztenek irakurriko). .

    Horren ordez, erabili irudia ordezkatzeko teknika sendoagoa. Phark metodoa edo Gilder / Levin iradokitzen ditut. Horiek googlerentzako dokumentatutako dokumentu hobeak dira oinarrizko teknikak aurkitzeko. G / L nahiago dut CSS gaituta ere funtzionatzen duelako baina irudiak desaktibatuta daude.

    2. Hausten ez dudan arren (FF3 erabiliz), zure posizionamenduak ezartzeak berezko arriskuak ditu. Erabat kokatutako elementu bat hurbilen dagoen gurasoarekiko kokatzen da. Funtsean, posizionamendu testuingurua esplizituki ezarri nahi zenuke 'position: relative' aplikatuz # harpidetza. Ondoren, haurrak (kokatutako estekak) guraso horren barruan koka daitezke. Metodo honek emaitza fidagarriagoak ziurtatzen laguntzen du arakatzaileetan.

    Era berean, kokapen hori kudeatzeko "goian: x" eta "ezkerrean: x" kokapen deklarazioak erabili behar dituzu (non x desplazamendu balioa den, esan px). Berriro ere, ez dut zertan ikusten duzun moduan hausten, baina goian eta ezkerrean daude horretarako, zergatik ez erabili? Gainera, karroza eta marjinak elementu berean ezarri dituzu, baldintza zehatzetan IE6-n "marjina bikoitza" akatsa eragiten dutenak (hor probatu al zenuen?) - konponketa bat dagoen bitartean, arazo hori saihestuko duzu eta kasu honetan kokatzeko marjinen ordez utzi.

    3. Azkenean, zergatik ez erabili lotura hauetarako semantikoki soinu gabeko zerrenda ordenaturik gabeko esanahirik gabeko div?

    Barkatu droning-ean ... Partekatzea gustatzen zait, b / c esperientziatik badakit nola CSS erabiltzeko modu desberdinak daudela nahi den emaitza lortzeko, baina modu batzuek, zalantzarik gabe, beste batzuek baino hobeto funtzionatzen dute (fidagarriagoa, arakatzaile gurutzatua) . HTH.

  23. 36
  24. 37
  25. 38

    Eskerrik asko!! Zure argibideek ORDUKO lana aurreztu didate ... Web garapenean berria naiz, eta nire lehenengo proiektu handian sufritu berri dut. Egin nuen ... bezeroa pozik dago, pozik dago, eta ni ere bai!

  26. 39

    Kaixo, mila esker hau argitaratzeagatik! Urte batzuk geroago eta oraindik laguntzen ari da ... polita! Ahaleginak egiten ditut nire irudien mapa leku egokian lotzeko. Pankarta bat dut eta banderaren goiko eskuineko ikono sozialak zuk emandako kodea erabiliz estekatzea nahi dut. Oso ondo funtzionatzen du, zerbait gaizki egiten ari naizelako izan ezik, nire estekak pantailaren goiko ezkerreko muturrean agertzen direlako, ez ikono sozialen gainean, baizik eta logotipoaren gainean. Ziur nago zerbait sinplea dela, baina ezin dut asmatu. Pentsatu nuen hemen partekatuko nuela argibideren bat izanez gero. Eskerrik asko berriro argitaratzeagatik!

Zer deritzozu?

Gune honek Akismet-ek spam erabiltzen du. Ikasi zure iruzkina nola prozesatu den.