Sut i Adeiladu Map Delwedd gyda CSS

opsiynau

Roeddwn i eisiau rhywbeth 'geeky' felly penderfynais ar graffig 'poced' sy'n dal yr holl ddulliau tanysgrifio ar gyfer fy mlog.

Yn nyddiau Gwe 1.0, gellid adeiladu casgliad o ddolenni fel hyn trwy rannu'ch delwedd â dolenni ar bob graffig, yna ceisio gwnïo'r cyfan yn ôl ynghyd â thabl. Gellid ei gyflawni hefyd trwy ddefnyddio map delwedd ond mae hynny fel rheol yn gofyn am offeryn i adeiladu'r system gydlynu. Mae defnyddio Dalennau Arddull Rhaeadru yn gwneud hyn yn dunnell yn haws ... dim delweddau splicing a dim ceisio dod o hyd i offeryn i adeiladu eich system gydlynu!

  1. Adeiladu eich delwedd yr hoffech ei defnyddio. Gallwch ddefnyddio'r graffig hwn isod (de-gliciwch ac arbed i'w lawrlwytho):
    Dewisiadau
  2. Llwythwch eich delwedd i gyfeiriadur sy'n gymharol i'ch CSS. Yn WordPress, gellir gwneud hyn yn haws trwy ei roi mewn ffolder delweddau yn eich cyfeirlyfr thema.
  3. Ychwanegwch eich HTML. Mae'n braf ac yn syml ... div gyda thri dolen ynddo:
    > div id = "tanysgrifio" >> a id = "rss" href = "[eich cyswllt bwyd anifeiliaid]" title = "Tanysgrifiwch gyda RSS" >> span class = "hide"> RSS> / span >> / a >> a id = "e-bost" href = "[eich cyswllt tanysgrifio e-bost]" title = "Tanysgrifiwch gydag E-bost" >> span class = "hide"> E-bost> / span >> / a >> a id = "mobile" href = "[eich cyswllt symudol]" title = "Gweld Fersiwn Symudol" >> span class = "hide"> Symudol> / span >> / a >> / div>
    
  4. Golygwch eich Dalen Arddull Rhaeadru. Byddwch yn ychwanegu 6 arddull wahanol. 1 arddull ar gyfer y div cyffredinol, 1 ar gyfer y tag fel nad yw'n arddangos unrhyw addurn testun, 1 arddull i guddio'r testun (a ddefnyddir ar gyfer hygyrchedd) ac 1 fanyleb arddull ar gyfer pob un o'r dolenni:
    # tanysgrifio {/ * cefndir delwedd cefndir * / arddangos: bloc; lled: 215px; uchder: 60px; cefndir: url (images / options.png) dim-ailadrodd; ymyl-ben: 0px; } # tanysgrifio {addurniad testun: dim; } .hide {gwelededd: cudd; } #rss {/ * RSS Link * / arnofio: chwith; safle: absoliwt; lled: 50px; uchder: 50px; ymyl-chwith: 20px; ymyl-brig: 5px; } #email {/ * Dolen E-bost * / arnofio: chwith; safle: absoliwt; lled: 50px; uchder: 50px; ymyl-chwith: 70px; ymyl-brig: 5px; } #mobile {/ * Dolen Symudol * / arnofio: chwith; safle: absoliwt; lled: 50px; uchder: 50px; ymyl-chwith: 130px; ymyl-brig: 5px; }

Mae'r lleoliad yn braf ac yn syml ... ychwanegwch uchder a lled ac yna gosodwch yr ymyl chwith o ochr chwith y ddelwedd, a'r ymyl uchaf o ochr uchaf y ddelwedd!

Mae'r swydd “Sut i” ar gyfer mynediad i'r Geeks yw Cystadleuaeth “Sut i” Sexy yn y pen draw! Un nodyn, mae'n wir y gall map delwedd fod â pholygonau llawer mwy cymhleth, ond nid wyf wedi gweld gormod o leoedd lle mae'n rhaid bod hynny. Sylwais fod delwedd RSS fawr ol ar y Geeks yn far ochr Sexy ... dyna le da ar gyfer dolen. 😉

DIWEDDARWYD 10/3/2007 i gael gwell hygyrchedd gyda chyngor Phil!

Noddwr: Os ydych chi'n newbie i ddylunio gwe, yna Adeiladu Eich Gwefan Eich Hun Y Ffordd Iawn Gan ddefnyddio HTML & CSS, mae 2il Argraffiad yn hanfodol. Yn y canllaw hawdd ei ddilyn hwn byddwch chi'n dysgu sut i adeiladu gwefan yn y ffordd orau bosibl - trwy ei wneud eich hun!

41 Sylwadau

  1. 1

    Doug, mae hynny'n ymddangos fel dull braf, ond mae'n anhygyrch iawn.

    Ystyriwch ddefnyddiwr dall gyda darllenydd sgrin, defnyddiwr â porwr testun yn unig neu unrhyw un sy'n ymweld â'r wefan heb CSS neu Delweddau wedi'u galluogi (fel, efallai defnyddiwr symudol sy'n chwilio am y ddolen i'ch gwefan gyfeillgar symudol). Ni fydd yr un ohonynt yn gwybod am y tri dolen hynny oherwydd nad oes ganddynt destun. Os yw delweddau i ffwrdd ni fydd defnyddiwr hyd yn oed yn gweld testun alt i ddisgrifio'r hyn a fyddai wedi bod yno oherwydd ei fod yn ddelwedd gefndir.

    Gwell fyddai sleisio'r delweddau, eu cysylltu, eu rhoi mewn rhestr a'u arnofio wrth ymyl ei gilydd. Neu hyd yn oed defnyddio testun ar gyfer y dolenni a disodli'r testun gan ddefnyddio techneg amnewid delwedd safonol. Mae hyn yn ymddangos yn gyfleus, ond mae'n gwneud pethau'n llawer anoddach / amhosibl i'r rhai nad ydyn nhw'n defnyddio porwr graffigol safonol.

    • 2
      • 3

        Doug,

        Nid yw JAWS yn darllen teitlau dolenni yn ddiofyn, ond rydych chi'n iawn, fe all wneud. Pam fyddech chi'n chwilio am deitlau cyswllt pe na baech chi'n gwybod ei fod yno, a hyd yn oed pe byddech chi, siawns nad yw hyn yn disgyn i fater defnyddioldeb sy'n golygu eich bod chi'n rhoi profiad ail gyfradd o ddefnyddio'ch gwefan i ddefnyddwyr llai abl.

        Ar gyfer porwyr testun, mae'r erthygl rydych chi'n fy nghyfeirio tuag at y Lynx hwnnw hefyd yn caniatáu ichi godi rhestr o deitlau dolenni, ond fy mhwynt o hyd yw os nad oeddech chi'n gwybod bod dolen yno, gan nad oedd testun yn y lle cyntaf. , pam fyddech chi'n edrych am destun teitl?

        Yn olaf, ni fydd priodoleddau teitl cyswllt yn ymddangos o hyd i unrhyw un sy'n pori heb alluogi delweddau neu heb allu CSS.

        Felly ydy, mae cysylltiadau â theitlau yn well na'r rhai hebddynt, ond yn yr achos hwn dim ond ymylol ydyw.

        Dyma pam mae defnyddio delwedd, fel bod modd darllen testun alt, neu amnewid delwedd, fel bod y testun yno, yn opsiwn llawer mwy diogel, mwy hygyrch a mwy defnyddiol.

        • 4

          Gwybodaeth Dda, Phil. Rydw i'n mynd i geisio gwella hyn gyda thestun ond cuddio'r testun yn syml - yn y ffordd honno bydd cynnyrch hygyrch fel JAWS yn darllen y testun cyswllt a bydd y testun yn cael ei arddangos os yw CSS neu Delweddau yn anabl.

          Rwy'n anghytuno mai'r unig ateb hygyrch fyddai rhoi Delwedd gyda dolen, serch hynny.

  2. 5
    • 6
      • 7

        Mae'n rhywbeth nad ydym yn aml yn talu sylw iddo, Phil! Yn ogystal, mae sicrhau bod eich cais yn hygyrch yn aml yn arwain at ganlyniadau peiriannau chwilio da hefyd.

        Rwy'n gwerthfawrogi'r arbenigedd a'r adborth yn fawr!

  3. 8

    Rwy'n ei ddwyn. Yno, dywedais hynny.

    Doug, mae'r graffeg yn wych ac mae'r codio mor anhygoel o syml mae'n fy nychryn (wedi bod yn chwarae gyda CSS a nawr rydw i'n ei gael o'r diwedd).

    Wedi gwirio'r cod i ddiwallu fy anghenion, cyfrifodd ble i ollwng y darn HTML i mewn, ac a dweud y gwir mae'n edrych yn wych ac mae wedi glanhau'r top hwnnw o fy bar ochr sydd wedi bod yn fy ngyrru INSANE.

    Efallai y bydd yn rhaid i mi brynu'r coffi hwnnw ichi eto!

  4. 10

    Doug,

    Rydw i'n mynd i fod yn llais anghytuno, gan ddefnyddio fy mhrofiad fel enghraifft. Rwy'n cofio ein negeseuon e-bost pan newidiodd fy e-bost cartref a gwnaethoch nodi bod yn rhaid i mi ddewis ymuno â fy un newydd. Rhaid i mi gyfaddef i mi gael tipyn o amser yn “darganfod” y nodwedd newydd ar eich gwefan i optio i mewn eto. Rhan o hyn oedd oherwydd bod y ddolen wreiddiol ychydig yn fwy traddodiadol ac roeddwn i'n cofio'n annelwig am yr un honno. Y llall oedd oherwydd nad oedd yr amlen hanner ochr yn edrych fel amlen i mi i ddechrau. Ar ôl tua 5 munud neu fwy, dechreuais rolio fy llygoden dros bob delwedd a phan ddangosodd y teitl “Tanysgrifio gydag E-bost”, yna roeddwn i'n gwybod fy mod i mewn busnes. Fe wnaeth fy ymennydd hefyd gyfrifo beth oedd y llun cyswllt.

    Ond, i mi o leiaf, nid oedd amlen i'r ochr yn reddfol i mi fel y lle i danysgrifio i hysbysiadau e-bost. Ac (oherwydd dywedwyd wrthyf fy mod bob amser yn gorffen gyda rhywbeth neis) rwy'n cytuno â Phil uchod; mae'r dull yn wirioneddol syml ac mae'r eitem gyfan yn gweithio'n wych. Rwy'n cymryd bod eich teclyn dylunio wedi helpu i roi'r union ddimensiynau ar gyfer y 3 adran; ai rhagdybiaeth gywir yw hynny? Mae'n rhaid i mi dybio felly, oherwydd pe bai gen i, dyweder, ddelwedd 400 picsel o led, byddai angen i mi wybod y gosodiadau cywir, ac ati.

  5. 12
    • 13

      William,

      Mae'n edrych fel y gallai fod gwrthdaro rhwng enwau'ch dosbarth sylwadau ac enwau'r dosbarth yn y graffig bar ochr. Gallwch eu henwi'n wahanol i glirio'r gwrthdaro. Gadewch imi wybod a oes angen llaw arnoch chi!

      Doug

  6. 14

    Mae'n ymddangos bod popeth yn gweithio yn FF ac IE ... rwy'n credu efallai eich bod chi wedi bod ar y wefan tra roeddwn i'n ceisio tweakio ategyn nad oedd yn eithaf gweithio allan ... 😉

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

    Ymagwedd braf, ond mae angen rhywbeth arnaf ar gyfer map topograffig, felly ni allaf ddefnyddio ardaloedd petryal ... rwy'n credu bod yn rhaid i mi ddefnyddio'r map delwedd hen arddull gyda chyfesurynnau, ond mae'n debyg y byddaf yn cloddio ychydig yn ddyfnach ...

  11. 19

    Diolch am y wybodaeth hon, Doug. Roeddwn i wedi bod yma o'r blaen ac yn meddwl tybed sut gwnaethoch chi hynny. Roeddem am greu map fel hwnnw i'w fewnosod ar ôl ein pyst, a nawr bod gennym y modd, gallwn ei wneud. Bravo!

  12. 20
  13. 21

    Helo Doug,
    Gadewais sylw blaenorol ond sylweddolais mai prin y cynigiais unrhyw fewnwelediad i'm cyfyng-gyngor o gwbl. Rydym wedi bod yn addasu thema wordpress i'n helpu i lansio ein comedi ar-lein yma:

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

    Nawr, fe welwch fod gennym faner llywio ar draws y top, delwedd roeddem ni'n bwriadu ei mapio fel sydd gennym ni ddwsinau o weithiau o'r blaen. / palmforehad. Nid oes yr un ohonom yn deall CSS yn wirioneddol, ond rydym yn baglu o gwmpas yn ddigonol a hyd yn hyn wedi gwneud yn iawn hyd at y pwynt hwn. Mae eich erthygl yn yr UNIG UN allan o ddwsinau a ddarparodd yn gipolwg go iawn ar sut i ddefnyddio delweddu yn CSS yn hawdd. Fe wnes i e-bostio'r ddalen arddull yn ôl eich cyfarwyddiadau, ond does gen i ddim syniad ble i osod yr HTML. Y cyfan a ddywedasoch yw “Ychwanegwch eich html… Mae'n braf ac yn syml” ac yna mi wnes i grio oherwydd roeddwn i'n meddwl .. “ddim yn ddigon syml i mi!” Doeddwn i ddim yn gwybod y gallwn ychwanegu html i unrhyw un o'r tudalennau php hyn yn y golygydd thema. Ydw i'n gosod yr html yn y pennawd? Y templed Prif Fynegai? Y Swyddogaethau? Rwy'n cymryd bod gan bob defnyddiwr wordpress yr opsiwn o olygu eu thema yn y golygydd dangosfwrdd, sy'n ymddangos yn eithaf cyffredinol o ran ymarferoldeb. Pe gallech awgrymu ble i osod yr html, byddwn wrth fy modd yn addasu cod oru ar gyfer fy bar llywio.

    Diolch am rannu eich gwybodaeth gyda'r gymuned. Rwy'n hapus i gael coffi i chi.

    • 22

      Helo Phay!

      Mae'r holl ffeiliau ar gyfer thema eich blog ar gael trwy'r panel Gweinyddol i'w golygu. Os cliciwch ar Cyflwyniad ac yna Golygydd Thema, dylech allu gweld rhestr o'ch ffeiliau ar y dde a golygydd ar y chwith.

      Os ydych chi am i hyn fod yn eich bar ochr, mae'n debyg bod gennych dudalen Bar Ochr. Cliciwch i'w olygu ac yna rhowch yr HTML a ddarperir ar y dudalen lle hoffech chi.

      Un nodyn: Mae golygu'r ddalen arddull yn gymharol â'ch tudalen, felly bydd angen i chi uwchlwytho'r llun i'r cyfeiriadur delweddau thema os ydych chi'n cyfeirio ato fel y byddech chi â delweddau eraill yn eich thema.

      Hope sy'n helpu!

    • 23

      Phay,
      Deuthum ar draws y wefan hon heddiw a chefais yr un cyfyng-gyngor â chi. Roeddwn hefyd eisiau ychwanegu map delwedd at y ddelwedd pennawd. Ar ôl chwarae o gwmpas ag ef am ychydig, fe wnes i bethau'n iawn. Rhowch y div HTML yn y ffeil header.php. Rwy'n ei roi rhwng a. Ddim yn siŵr a oes gan eich templed yr union godio hwnnw, ond chwaraewch o gwmpas ag ef yn y ffeil header.php a byddwch chi'n ei chyfrifo.
      -
      Paul

  14. 24

    Diolch am yr ymateb cyflym!

    Na, doeddwn i ddim eisiau iddo fod yn y bar ochr, mae ar frig y dudalen (gallwch chi weld yn y ddolen wnes i ei darparu- y bar llywio pinc sy'n dweud contant, am y sioe ect ..)

    Rwyf wedi bod yn gweithio yn y dangosfwrdd trwy'r bore, yn anffodus, nid wyf yn siŵr ym mha ffeil rwy'n gosod yr html, fel y nodwyd uchod, mae gen i sawl un, header.php, prif index.php, functions.php, footer.php. Nid wyf yn siŵr ble i fewnosod y cod html. (y rhan gyntaf i chi ei darparu, rydw i eisoes wedi mewnosod y gweddill yn fy nhaflen arddull) Mae gen i fy nelwedd yno ar y wefan, mae popeth yn barod i fynd, does dim ond angen i mi wybod ble i ychwanegu cyfran html y cod ar gyfer ei addasu.

    Diolch gymaint am eich amser a chwestiynu cwestiynau gan ddechreuwr.

    Phay

  15. 25

    … Neu efallai y gallai rhywun bostio yn y sylwadau ynglŷn â pha ffeil rydyn ni'n gosod cyfran html y cod ynddo. Dywedodd gŵr bonheddig ychydig o bostiau ei fod yn ei gyfrif. Nid wyf wedi bod mor ffodus.

    Phaylen

  16. 26
  17. 27

    Rwy'n cael uffern o amser yn dod o hyd i ffordd i wreiddio map delwedd y gellir ei glicio mewn wordpress oherwydd ei fod yn tynnu tagiau map html. Byddai'ch ffordd yn gweithio ond mae map o'r UD yn amlwg yn ffordd i gymhleth i sgriwio fel hyn. Rwy'n ar goll.

    Help

    Mae'n ymddangos mai fflach yw fy unig opsiwn?

    • 28

      Dave,

      Os rhowch y ddelwedd yn eich templed, byddwch yn iawn. Os rhowch y map delwedd yn y cynnwys gwirioneddol, fe allech chi redeg i mewn i faterion hidlo. Mae'r ffordd rydw i wedi gweithio o gwmpas hyn yn ofnadwy, ond ar brydiau rydw i wedi defnyddio iframe.

      Doug

  18. 29

    Heia,

    mae'n ymddangos bod y map delwedd a'r dolenni yn ddau beth gwahanol, nid ydyn nhw'n gweithio gyda'i gilydd fel sut mae map delwedd yn html yn ei wneud

    pan fyddaf yn cynnwys lleoliad cefndir (canol chwith) ar gyfer y map delwedd, nid yw lleoliad y dolenni yn dilyn i fyny.

    unrhyw ffordd i fynd o gwmpas hyn? amatur iawn. Diolch.

  19. 31

    A fyddai dull tebyg yn cael ei ddefnyddio ar gyfer map delwedd mwy a mwy cymhleth fel rydw i'n ceisio'i ddefnyddio?

    Os edrychwch ar fy safle, cliciwch ar ddolenni i'r chwith ac fe welwch y ddelwedd rwy'n ceisio ei defnyddio fel map delwedd (o dan yr wyddor Testun).

    Yn y bôn, ceisio defnyddio'r Ddelwedd i fynd i bob rhan o'r rhestr hon trwy lythyr.

    Yn amlwg, treuliais 20 munud yn adeiladu map gyda GIMP, ac yna mae WP yn tynnu'r tagiau map, felly dyna sut y des i o hyd i'ch gwefan.

    Er, gall ystyried defnyddio Flash

    Diolch.

  20. 33

    Ar hyn o bryd rwy'n defnyddio cynllun templed a golygu gyda'm pethau fy hun. Rwyf am ychwanegu map delwedd, ond nid wyf yn siŵr ble i'w osod yn y CSS. mae'r ddelwedd rydw i eisiau gwneud map ohoni yn y rhan pennawd.

  21. 34

    helo, fe wnes i adeiladu fy ngwefan ar joomla ... rydw i eisiau defnyddio'r dull hwn i wneud logo fy nhudalen yn ddolen i'r cartref, dywedwyd wrthyf na allwch chi wneud hyn gyda joomla ond mae'r erthygl hon yn rhoi gobaith i mi! byddem yn gwerthfawrogi'n fawr help trwy e-bost ... diolch i chi

  22. 35

    Helo Doug - Rwy'n adeiladu map delwedd eithaf cymhleth wedi'i seilio ar CSS, sydd hefyd â throsglwyddiadau anghysbell (yn yr achos hwn, arddangosfeydd testun mewn man arall ar y dudalen pan fyddwch chi'n hofran un o'r mannau problemus). Unrhyw ffordd, deuthum ar draws eich enghraifft yma wrth ymchwilio i hynny ... ac roeddwn i'n meddwl y byddwn i'n rhannu'r mewnbwn canlynol:

    1. Ar gyfer hygyrchedd, ni ddylech ddefnyddio gwelededd: dim (neu arddangos: dim os oeddech chi'n ystyried hynny) i guddio'r testun yma, fel elfen wedi'i styled â gwelededd: ni fydd darllenwyr sgrin yn darllen y cudd (y rhai sy'n dilyn manyleb) .

    Yn lle, defnyddiwch dechneg amnewid delwedd fwy cadarn. Awgrymaf naill ai dull Phark neu Gilder / Levin - dyna'r enwau sydd wedi'u dogfennu'n well i google i ddod o hyd i'r technegau sylfaenol. Mae'n well gen i G / L gan ei fod hefyd yn gweithio gyda CSS wedi'i alluogi ond mae delweddau wedi'u diffodd.

    2. Er nad wyf yn ei weld yn torri (gan ddefnyddio FF3), mae risgiau cynhenid ​​hefyd wrth weithredu safle. Mae elfen mewn lleoliad hollol wedi'i lleoli mewn perthynas â'i rhiant agosaf. Yn y bôn, byddech chi eisiau gosod cyd-destun lleoli yn benodol trwy gymhwyso 'position: relative' i #subscription. Yna gellir lleoli'r plant (y cysylltiadau wedi'u lleoli) o fewn y rhiant hwnnw. Mae'r dull hwn yn helpu i sicrhau canlyniadau mwy dibynadwy ar draws porwyr.

    Hefyd, dylech wedyn ddefnyddio'r datganiadau lleoli “top: x” a “left: x” (lle x yw'r gwerth gwrthbwyso, dywedwch yn px) yn hytrach nag ymylon i drin y lleoliad hwnnw. Unwaith eto, nid wyf o reidrwydd yn ei weld yn torri'r ffordd sydd gennych chi, ond mae'r brig a'r chwith i fod ar gyfer hyn felly beth am eu defnyddio? Hefyd, mae gennych fflotiau ac ymylon wedi'u gosod ar yr un elfen, sydd o dan amodau penodol yn achosi'r byg “ymyl dwbl” yn IE6 (a wnaethoch chi brofi hyn yno?) - er bod ateb, rydych chi'n osgoi'r mater hwnnw'n gyfan gwbl trwy ddefnyddio'r brig. a'i adael yn lle ymylon i'w leoli yn yr achos hwn.

    3. Yn olaf, beth am ddefnyddio rhestr ddi-drefn semantig gadarn ar gyfer y dolenni hyn yn lle'r div diystyr?

    Mae'n ddrwg gennym am dronio ymlaen ... Rwy'n hoffi rhannu, b / c Rwy'n gwybod o brofiad sut mae yna lawer o wahanol ffyrdd i ddefnyddio CSS i gael y canlyniad a ddymunir, ond yn sicr mae rhai ffyrdd yn gweithio'n well (mwy dibynadwy, traws-borwr) nag eraill. . HTH.

  23. 36
  24. 37
  25. 38

    Diolch yn fawr iawn!! Fe wnaeth eich cyfarwyddiadau arbed AWR i mi o waith ... Rwy'n newydd i ddatblygu gwe, ac roeddwn i newydd ddioddef trwy fy mhrosiect mawr cyntaf. Fe wnes i… mae'r cleient yn hapus, yn ecstatig mewn gwirionedd, ac felly ydw i!

  26. 39

    Helo, diolch gymaint am bostio hwn! Flynyddoedd yn ddiweddarach ac mae'n dal i helpu ... braf! Rwy'n ei chael hi'n anodd cael fy map delwedd i gysylltu yn y lle iawn. Mae gen i faner ac rydw i eisiau i'r eiconau cymdeithasol ar ochr dde uchaf y faner gysylltu gan ddefnyddio'r cod rydych chi wedi'i gyflenwi. Mae'n gweithio'n wych, heblaw fy mod i'n gwneud rhywbeth o'i le oherwydd bod fy nghysylltiadau'n ymddangos ar ochr chwith uchaf y sgrin, nid dros yr eiconau cymdeithasol, ond dros y logo. Rwy'n siŵr ei fod yn rhywbeth syml, ond ni allaf ei chyfrifo. Wedi meddwl y byddwn i'n ei rannu yma rhag ofn bod gennych chi unrhyw fewnwelediadau. Diolch eto am bostio hwn!

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.