Jinsi ya Kujenga Ramani ya Picha na CSS

chaguzi

Nilitaka kitu 'geeky' kwa hivyo niliamua picha ya "mfukoni" ambayo inashikilia njia zote za usajili wa blogi yangu.

Katika siku za Wavuti 1.0, mkusanyiko wa viungo kama hii inaweza kujengwa kwa kuchanganua picha yako na viungo kwenye kila picha, kisha kujaribu kushona yote pamoja na meza. Inaweza pia kutekelezwa kwa kutumia faili ya ramani ya picha lakini hiyo kawaida inahitaji zana ya kujenga mfumo wa kuratibu. Kutumia Karatasi za Mitindo ya Kubadilisha hufanya hii iwe rahisi zaidi ... hakuna picha za kuchapisha na hakuna kujaribu kupata zana ya kujenga mfumo wako wa kuratibu!

  1. Jenga picha yako ambayo ungependa kutumia. Unaweza kutumia picha hii hapa chini (bonyeza-kulia na uhifadhi kupakua):
    Chaguzi
  2. Pakia picha yako kwenye saraka inayohusiana na CSS yako. Katika WordPress, hii inaweza kufanywa rahisi kwa kuiweka kwenye folda ya picha kwenye saraka yako ya mada.
  3. Ongeza HTML yako. Ni nzuri na rahisi ... div na viungo vitatu ndani yake:
    > div id = "jiandikishe">> id = "rss" href = "[kiungo chako cha kulisha]" title = "Jisajili na RSS" >> span class = "hide"> RSS> / span >> / a>> id = "barua pepe" href = "[kiungo chako cha usajili wa barua pepe]" title = "Jisajili na Barua pepe" >> span class = "hide"> Barua pepe> / span >> / a>> id = "simu" href = "[your mobile link]" title = "View Mobile Version" >> span class = "hide"> Simu ya mkononi> / span >> / a>> / div>
    
  4. Hariri Karatasi yako ya Sinema ya Kuachia. Utakuwa unaongeza mitindo 6 tofauti. Mtindo 1 wa div kwa jumla, 1 kwa kitambulisho kwa hivyo haionyeshi mapambo yoyote ya maandishi, mtindo 1 wa kuficha maandishi (kutumika kwa ufikiaji) na ufafanuzi wa mtindo 1 kwa kila moja ya viungo:
    # jiandikishe {/ * kizuizi cha picha ya nyuma * / display: block; upana: 215px; urefu: 60px; background: url (picha / chaguzi.png) hakuna kurudia; juu-margin: 0px; } #subscribe {text-mapambo: hakuna; }. ficha {kujulikana: kufichwa; } #rss {/ * RSS Link * / kuelea: kushoto; msimamo: kabisa; upana: 50px; urefu: 50px; margin-kushoto: 20px; margin-juu: 5px; } # barua pepe {/ * Kiungo cha Barua pepe * / kuelea: kushoto; msimamo: kabisa; upana: 50px; urefu: 50px; margin-kushoto: 70px; margin-juu: 5px; } #mobile {/ * Kiungo cha Simu * / kuelea: kushoto; msimamo: kabisa; upana: 50px; urefu: 50px; margin-kushoto: 130px; margin-juu: 5px; }

Nafasi ni nzuri na rahisi… ongeza urefu na upana na kisha weka kando kushoto kutoka upande wa kushoto wa picha, na pambizo la juu kutoka upande wa juu wa picha!

Chapisho hili la "Jinsi ya" ni kwa kuingia kwenye Geeks ni Shindano la mwisho la "Jinsi ya" Mashindano! Ujumbe mmoja, ni kweli kwamba ramani ya picha inaweza kuwa na poligoni nyingi ngumu zaidi, lakini sijaona sana maeneo mengi ambayo lazima iwe nayo. Niligundua kuwa picha kubwa ya RSS kwenye Geeks ni sehemu ya pembeni ya Sexy… hiyo ni sehemu nzuri ya kiunga. 😉

Iliyosasishwa 10/3/2007 kwa ufikiaji bora na ushauri wa Phil!

mdhamini: Ikiwa wewe ni mpya kwa ubuni wa wavuti, basi Jenga Wavuti Yako Mwenyewe Njia Sahihi Kutumia HTML & CSS, Toleo la 2 ni lazima iwe nayo. Katika mwongozo huu rahisi kufuata utajifunza jinsi ya kuunda wavuti njia bora zaidi - kwa kuifanya mwenyewe!

41 Maoni

  1. 1

    Doug, hiyo inaonekana kama njia nzuri, lakini haipatikani sana.

    Fikiria mtumiaji kipofu na msomaji wa skrini, mtumiaji aliye na kivinjari cha maandishi tu au mtu yeyote anayetembelea wavuti bila CSS au Picha zilizowezeshwa (kama, labda mtumiaji wa rununu anayetafuta kiunga cha wavuti yako rafiki ya rununu). Hakuna hata mmoja wao atakayejua juu ya viungo hivi vitatu kwa sababu havina maandishi. Ikiwa picha ziko mbali mtumiaji hataona maandishi ya alt kuelezea kile ambacho kingekuwepo kwa sababu ni picha ya mandharinyuma.

    Bora itakuwa vipande vya picha, kuziunganisha, kuziweka kwenye orodha na kuzielea karibu na kila mmoja. Au hata tumia maandishi kwa viungo na ubadilishe maandishi kutumia mbinu ya kawaida ya kubadilisha picha. Hii inaonekana kuwa rahisi, lakini inafanya mambo kuwa magumu / yasiyowezekana kwa wale wasiotumia kivinjari cha kawaida cha picha.

    • 2
      • 3

        Doug,

        JAWS haisomi majina ya kiunga kwa chaguo-msingi, lakini uko sawa, inaweza kufanya. Kwa nini ungekuwa unatafuta majina ya kiunga ikiwa hujui ilikuwepo, na hata ikiwa ungekuwa, hakika hii inashuka kwa suala la utumiaji ikimaanisha unawapa watumiaji wasio na uwezo uzoefu wa kiwango cha pili cha kutumia wavuti yako.

        Kwa vivinjari vya maandishi, nakala unayonielekeza kwa Lynx pia hukuruhusu kuleta orodha ya majina ya viungo, lakini hoja yangu inabaki kuwa ikiwa haujui kulikuwa na kiunga hapo, kwani hakukuwa na maandishi hapo mwanzo , kwanini utafute maandishi ya kichwa?

        Mwishowe, sifa za kichwa cha kiungo bado hazitaonekana kwa mtu yeyote anayevinjari bila picha kuwezeshwa au bila CSS kuwezeshwa.

        Kwa hivyo ndio, viungo na vyeo ni bora kuliko vile visivyo na, lakini katika kesi hii ni pembezoni tu.

        Hii ndio sababu ya kutumia picha, ili maandishi ya alt yasomeke, au kubadilisha picha, ili maandishi yapo, ni chaguo salama zaidi, kinachoweza kupatikana na kinachoweza kutumiwa zaidi.

        • 4

          Habari Njema, Phil. Nitajaribu kuongeza hii kwa maandishi lakini ficha tu maandishi - kwa njia hiyo bidhaa inayopatikana kama JAWS itasoma maandishi ya kiunga na maandishi yataonyeshwa ikiwa CSS au Picha zimelemazwa.

          Sikubaliani kuwa suluhisho tu linaloweza kupatikana itakuwa kuweka Picha na kiunga, ingawa.

  2. 5
  3. 8

    Niliiba. Huko, nilisema.

    Doug, michoro ni nzuri na uandishi ni rahisi sana kunitia hofu (nimekuwa nikicheza na CSS na sasa mwishowe "ninaipata").

    Nilibadilisha nambari ili kukidhi mahitaji yangu, nikafikiria ni wapi nitaacha HTML kidogo, na kusema ukweli inaonekana nzuri na imesafisha sehemu hiyo ya juu ya ubao wangu wa pembeni ambayo imekuwa ikinisukuma kwa akili.

    Labda ni lazima nikununulie kahawa hiyo bado!

  4. 10

    Doug,

    Nitakuwa sauti inayokataa, nikitumia uzoefu wangu kama mfano. Nakumbuka barua pepe zetu wakati barua pepe yangu ya nyumbani ilibadilika na ulibaini nililazimika kuchagua kuingia na mpya yangu. Lazima nikiri kwamba nilikuwa na wakati mwingi "kugundua" huduma mpya kwenye wavuti yako ili uingie tena. Sehemu ya hii ni kwa sababu kiunga cha asili kilikuwa cha jadi zaidi na nikamkumbuka bila kuficha. Nyingine ilikuwa kwa sababu bahasha nusu ya kando haikuonekana kama bahasha kwangu mwanzoni. Baada ya dakika 5 au zaidi nilianza kutembeza kipanya changu juu ya kila picha na wakati kichwa cha "Jisajili na Barua pepe" kilipoonyeshwa, basi nilijua nilikuwa kwenye biashara. Ubongo wangu pia uligundua picha ya kiunga ilikuwa nini.

    Lakini, angalau kwangu, bahasha ya pembeni haikuwa rahisi kwangu kama mahali pa kujisajili kwa arifa za barua pepe. Na (kwa sababu niliambiwa kuishia na kitu kizuri kila wakati) nakubaliana na Phil hapo juu; njia ni rahisi sana na bidhaa yote inafanya kazi vizuri. Ninaichukua kifaa chako cha kubuni kilikusaidia kukupa vipimo halisi vya sehemu 3; hiyo ni dhana sahihi? Lazima nifikirie, kwa kuwa ikiwa ningekuwa, sema, picha pana ya pikseli 400 ningehitaji kujua mipangilio sahihi, nk.

  5. 12
    • 13

      William,

      Inaonekana kama unaweza kuwa na mgongano kati ya majina ya darasa lako la maoni na majina ya darasa kwenye picha ya pembeni. Unaweza kuwataja tofauti ili kumaliza mzozo. Napenda kujua ikiwa unahitaji mkono!

      Doug

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

    Njia nzuri, lakini ninahitaji kitu kwa ramani ya hali ya juu, kwa hivyo siwezi kutumia maeneo ya mstatili… nadhani lazima nitumie ramani ya picha ya zamani na kuratibu, lakini labda nitachimba kidogo zaidi…

  11. 19

    Asante kwa habari hii, Doug. Nilikuwa hapa kabla na kujiuliza umeifanyaje. Tulitaka kuunda ramani kama hiyo kuingiza baada ya machapisho yetu, na sasa kwa kuwa tuna uwezo, tunaweza kuifanya. Jasiri!

  12. 20
  13. 21

    Hujambo Doug,
    Niliacha maoni ya awali lakini niligundua kuwa sikuwahi kutoa ufahamu wowote juu ya shida yangu hata. Tumekuwa tukibadilisha mada ya maandishi ili kutusaidia kuzindua sitcom yetu ya mkondoni hapa:

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

    Sasa, utaona tunayo bendera ya kusogea juu, picha ambayo tulikusudia kuifanya kama tunavyo mara kadhaa hapo awali. / msitu wa mitende. Hakuna hata mmoja wetu ambaye haelewi CSS, lakini tunajikwaa vya kutosha na hadi sasa tumefanya sawa hadi wakati huu. Nakala yako katika PEKEE MOJA kati ya kadhaa ambayo ilitoa ni ufahamu halisi juu ya jinsi ya kutumia utengenezaji wa picha katika CSS kwa urahisi. Nilitengeneza lahaja ya mitindo kulingana na maagizo yako, lakini sijui mahali pa kuweka HTML. Yote uliyosema ni "Ongeza html yako ... Ni nzuri na rahisi" halafu nikabweteka kwa sababu nilifikiri .. "sio rahisi kwangu!" Sikujua ningeweza kuongeza html katika yoyote ya kurasa hizi za php katika mhariri wa mada. Je! Ninaweka html kwenye kichwa? Kiolezo kuu cha Kielelezo? Kazi? Nadhani watumiaji wote wa neno la neno wana chaguo la kuhariri mandhari yao kwenye kihariri cha dashibodi, ambayo inaonekana kuwa ya kawaida katika utendaji. Ikiwa ungeweza kupendekeza mahali pa kuweka html, ningependa kubadilisha nambari ya oru kwa baa yangu ya upunguzaji.

    Asante kwa kushiriki maarifa yako na jamii. Nimefurahi kukupatia kahawa.

    • 22

      Habari Phay!

      Faili zote za mada ya blogi yako zinapatikana kupitia jopo la Msimamizi kwa uhariri. Ukibofya kwenye Uwasilishaji na kisha Mhariri wa Mada, unapaswa kuona orodha ya faili zako kulia na mhariri kushoto.

      Ikiwa unataka hii iwe kwenye mwamba wako wa pembeni, labda unayo ukurasa wa Mwambaaupande. Bonyeza kuhariri na kisha weka HTML iliyotolewa ndani ya ukurasa ambapo ungependa.

      Ujumbe mmoja: Hariri ya mitindo inahusiana na ukurasa wako, kwa hivyo utahitaji kupakia picha kwenye saraka ya picha za mandhari ikiwa unairejelea kama vile ungependa picha zingine kwenye mada yako.

      Matumaini ambayo husaidia!

    • 23

      Phay,
      Nimekutana na wavuti hii leo na nilikuwa na shida kama wewe. Nilitaka pia kuongeza ramani ya picha kwenye picha ya kichwa. Baada ya kucheza nayo kwa muda, niliipata sawa. Weka HTML ya div kwenye faili ya header.php. Niliiweka kati na. Sijui ikiwa templeti yako ina usimbuaji haswa, lakini cheza nayo kwenye faili ya header.php na utaigundua.
      -
      Paulo

  14. 24

    Asante kwa majibu ya haraka!

    Hapana, sikutaka iwe kwenye ubao wa kando ya teh, iko juu ya ukurasa (unaweza kuona kwenye kiunga nilichotoa- bar ya urambazaji ya pink ambayo inasema contant, juu ya onyesho la ect ..)

    Nimekuwa nikifanya kazi kwenye dashibodi asubuhi yote, kwa bahati mbaya, sijui niweka faili gani html, kama ilivyoelezwa hapo juu, nina kadhaa, header.php, index.php kuu, works.php, footer.php. Sina hakika mahali pa kuingiza nambari ya html. (sehemu ya kwanza uliyotoa, tayari nimeingiza salio kwenye laha la mitindo yangu) Nina picha yangu hapo kwenye wavuti, kila kitu kiko tayari kwenda, ninahitaji tu kujua ni wapi pa kuongeza sehemu ya html ya nambari ya kurekebisha.

    Asante sana kwa muda wako na maswali ya kuweka shamba kutoka kwa novice.

    Phay

  15. 25

    … Au labda mtu angeweza kuchapisha maoni juu ya ni faili gani tunayoweka sehemu ya html ya nambari. Muungwana machapisho machache alisema aliiwaza. Sikuwa na bahati sana.

    Phaylen

  16. 26
  17. 27

    Ninakuwa na kuzimu kwa wakati kutafuta njia ya kupachika ramani ya picha inayobofyeka katika neno la maana kwa sababu inavua vitambulisho vya ramani ya html. Njia yako ingefanya kazi lakini ramani ya Merika ni wazi njia ngumu ya kutatanisha na njia hii. Nimepotea.

    Msaada.

    Inaonekana kama flash ni chaguo langu pekee?

    • 28

      Dave,

      Ikiwa utaweka picha hiyo kwenye templeti yako, utakuwa sawa. Ikiwa utaweka ramani ya picha katika yaliyomo, unaweza kuingia kwenye maswala ya kichujio. Njia ambayo nimefanya kazi kuzunguka hii ni mbaya, lakini wakati mwingine nimetumia iframe.

      Doug

  18. 29

    Hi,

    inaonekana kuwa ramani ya picha na viungo ni vitu viwili tofauti, haifanyi kazi pamoja kama jinsi ramani ya picha katika html inavyofanya

    ninapojumuisha nafasi ya nyuma (katikati kushoto) kwa ramani ya picha, uwekaji wa viungo haufuati.

    njia yoyote ya kuzunguka hii? im amateur sana. Asante.

  19. 31

    Je! Njia kama hiyo ingetumika kwa ramani kubwa na ngumu zaidi ya picha kama ninajaribu kutumia?

    Ukitazama wavuti yangu, bonyeza kwenye viungo kushoto na utaona picha ninayojaribu kutumia kama ramani ya picha (chini ya alfabeti ya maandishi).

    Kimsingi, kujaribu kutumia Picha kwenda kwa kila sehemu ya orodha hii kwa barua.

    Kwa dhahiri, nilitumia dakika 20 kujenga ramani na GIMP, na kisha WP huondoa lebo za ramani, kwa hivyo ndivyo nilivyopata tovuti yako.

    Ingawa, inaweza kutafakari kutumia Flash

    Shukrani.

  20. 33

    kwa sasa ninatumia mpangilio wa templeti na kuhariri na vitu vyangu mwenyewe. Nataka kuongeza ramani ya picha, lakini sina uhakika ni wapi pa kuiweka kwenye css. picha ninayotaka kutengeneza ramani ya iko kwenye sehemu ya kichwa.

  21. 34

    hello, nilijenga wavuti yangu kwenye joomla… nataka kutumia njia hii kufanya nembo ya ukurasa wangu kuwa kiunga cha nyumbani, nimeambiwa huwezi kufanya hivi na joomla lakini nakala hii inanipa matumaini! msaada kupitia barua pepe utathaminiwa sana .. asante

  22. 35

    Hi Doug - Ninaunda ramani ya picha iliyo ngumu ya msingi wa css ambayo pia ina rollovers za mbali (katika kesi hii, maonyesho ya maandishi mahali pengine kwenye ukurasa wakati unapozunguka moja ya maeneo yenye picha). Kwa njia yoyote ile, niliona mfano wako hapa wakati nikitafiti hiyo… na nilifikiri ningeshiriki maoni yafuatayo:

    1. Kwa ufikiaji, haupaswi kutumia kujulikana: hakuna (au onyesha: hakuna ikiwa ulifikiria hivyo) kuficha maandishi hapa, kama kitu kilichopangwa na kujulikana: kilichofichwa hakitasomwa na wasomaji wa skrini (zile zinazofuata spec) .

    Badala yake, tumia mbinu bora zaidi ya kubadilisha picha. Ninapendekeza njia ya Phark au Gilder / Levin - hayo ni majina tu yaliyoandikwa bora kwa google kupata mbinu za kimsingi. Napendelea G / L kwani inafanya kazi pia na CSS kuwezeshwa lakini picha zimezimwa.

    2. Wakati sioni ikivunjika (kwa kutumia FF3), utekelezaji wako wa nafasi pia una hatari za asili. Kipengee kilichowekwa kabisa kimewekwa karibu na mzazi wake wa karibu zaidi. Kimsingi, ungetaka kuweka wazi muktadha wa nafasi kwa kutumia 'msimamo: jamaa' kwa # usajili. Kisha watoto (viungo vilivyowekwa) vinaweza kuwekwa ndani ya mzazi huyo. Njia hii inasaidia kuhakikisha matokeo ya kuaminika kwenye vivinjari.

    Pia, unapaswa kutumia maazimio ya nafasi ya "juu: x" na "kushoto: x" (ambapo x ni thamani ya kukabiliana, sema kwa px) badala ya pembezoni kushughulikia nafasi hiyo. Tena, sioni ikivunja njia unayo, lakini juu na kushoto imekusudiwa hii kwa nini usizitumie? Pamoja na kwamba una kuelea na kingo zilizowekwa kwenye kitu kimoja, ambacho chini ya hali maalum husababisha mdudu "margin mbili" katika IE6 (ulijaribu hii hapo?) - wakati kuna urekebishaji, unaepuka suala hilo kwa kutumia juu na kushoto badala ya pembezoni kwa nafasi katika kesi hii.

    3. Mwishowe, kwa nini usitumie orodha isiyo na kipimo ya semantiki kwa viungo hivi badala ya div isiyo na maana?

    Samahani kwa kuchoma ... napenda kushiriki, b / c Ninajua kutoka kwa uzoefu jinsi kuna njia nyingi tofauti za kutumia CSS kupata matokeo unayotaka, lakini kwa kweli njia zingine zinafanya kazi vizuri zaidi (ya kuaminika, kivinjari msalaba) kuliko zingine . HTH.

  23. 36
  24. 37
  25. 38

    Asante sana!! Maagizo yako yaliniokoa SAA za kazi… mimi ni mpya kwa ukuzaji wa wavuti, na niliteseka tu kupitia mradi wangu mkubwa wa kwanza. Niliifanya… mteja anafurahi, anafurahi kweli, na mimi pia!

  26. 39

    Halo, asante sana kwa kuchapisha hii! Miaka baadaye na bado inasaidia… nzuri! Ninajitahidi kupata ramani yangu ya picha ili kuunganisha mahali pazuri. Nina bendera na ninataka ikoni za kijamii zilizo juu kulia kwa bendera ziunganishwe kwa kutumia nambari uliyopewa. Inafanya kazi nzuri, isipokuwa ninafanya kitu kibaya kwa sababu viungo vyangu vinaonekana upande wa juu kabisa wa kushoto wa skrini, sio juu ya ikoni za kijamii, bali juu ya nembo. Nina hakika ni kitu rahisi, lakini siwezi tu kukigundua. Nilidhani nitaishiriki hapa ikiwa una ufahamu wowote. Asante tena kwa kuchapisha hii!

Unafikiri?

Tovuti hii inatumia Akismet kupunguza spam. Jifunze jinsi maoni yako yanasindika.