Conas Léarscáil Íomhá a Thógáil le CSS

roghanna

Theastaigh rud éigin ‘geeky’ uaim mar sin shocraigh mé ar ghrafach ‘póca’ a choinníonn na modhanna síntiúis uile do mo bhlag.

I laethanta Gréasáin 1.0, d’fhéadfaí bailiúchán de naisc mar seo a thógáil trí d’íomhá a splicing suas le naisc ar gach grafach, ansin iarracht a dhéanamh í a shéaladh ar ais mar aon le tábla. D'fhéadfaí é a chur i gcrích freisin trí úsáid a bhaint as léarscáil íomhá ach de ghnáth teastaíonn uirlis chun an córas comhordaithe a thógáil amach. Trí úsáid a bhaint as Bileoga Stíle Cascáideacha tá sé níos éasca é seo a dhéanamh ... gan aon íomhánna splicing agus gan aon uirlis a aimsiú chun do chóras comhordaithe a thógáil!

  1. Tóg d’íomhá ar mhaith leat a úsáid. Is féidir leat an ghrafach seo a úsáid thíos (deaschliceáil agus sábháil chun í a íoslódáil):
    Roghanna
  2. Uaslódáil d’íomhá chuig eolaire atá i gcoibhneas le do CSS. I WordPress, is féidir é seo a dhéanamh is éasca trína chur i bhfillteán íomhánna i do eolaire téama.
  3. Cuir do HTML leis. Tá sé deas agus simplí ... div le trí nasc ann:
    > div id = "liostáil" >> a id = "rss" href = "[do nasc beatha]" title = "Liostáil le RSS" >> span class = "hide"> RSS> / span >> / a >> a id = "email" href = "[do nasc liostála ríomhphoist]" title = "Liostáil le R-phost" >> span class = "hide"> Ríomhphost> / span >> / a >> a id = "mobile" href = "[do nasc soghluaiste]" title = "Féach Leagan Soghluaiste" >> span class = "hide"> Fón Póca> / réise >> / a >> / div>
    
  4. Cuir do Bhileog Stíle Cascáideach in eagar. Beidh tú ag cur 6 stíl dhifriúla leis. 1 stíl don div foriomlán, 1 don chlib ionas nach dtaispeánann sé aon mhaisiú téacs, 1 stíl chun an téacs a cheilt (a úsáidtear le haghaidh inrochtaineachta) agus 1 shonraíocht stíle do gach ceann de na naisc:
    #subscribe {/ * cúlra íomhá cúlra * / taispeáint: bloc; leithead: 215px; airde: 60px; cúlra: url (images / options.png) gan athdhéanamh; barr-imeall: 0px; } #subscribe a {text-maisiú: none; } .hide {infheictheacht: i bhfolach; } #rss {/ * RSS Link * / snámhphointe: ar chlé; seasamh: absalóideach; leithead: 50px; airde: 50px; corrlach ar chlé: 20px; barr-imeall: 5px; } #email {/ * Nasc Ríomhphoist * / snámhphointe: ar chlé; seasamh: absalóideach; leithead: 50px; airde: 50px; corrlach-chlé: 70px; barr-imeall: 5px; } #mobile {/ * Nasc Soghluaiste * / snámhphointe: ar chlé; seasamh: absalóideach; leithead: 50px; airde: 50px; corrlach-chlé: 130px; barr-imeall: 5px; }

Tá an suíomh deas agus simplí ... cuir airde agus leithead leis agus ansin socraigh an corrlach clé ó thaobh na láimhe clé den íomhá, agus an corrlach barr ón taobh barr den íomhá!

Tá an post “Conas” seo le iontráil sa Is iad Geeks Comórtas “Conas Le” deiridh Sexy! Nóta amháin, is fíor go bhféadfadh polagáin i bhfad níos casta a bheith ag léarscáil íomhá, ach ní fhaca mé an iomarca áiteanna i ndáiríre. Thug mé faoi deara gur barra taobh Sexy iad íomhá mór RSS ar na Geeks… sin áit mhaith le haghaidh nasc. 😉

Nuashonraithe 10/3/2007 le haghaidh inrochtaineachta níos fearr le comhairle ó Phil!

Urraitheoir: Más newbie tú maidir le dearadh gréasáin, ansin Tóg Do Láithreán Gréasáin Féin An Bealach Ceart Ag Úsáid HTML & CSS, ní mór an 2ú hEagrán a bheith riachtanach. Sa treoir éasca le leanúint seo foghlaimeoidh tú conas suíomh Gréasáin a thógáil ar an mbealach is fearr is féidir - trína dhéanamh leat féin!

41 Comments

  1. 1

    Doug, is cosúil gur modh deas é sin, ach tá sé an-inrochtana.

    Smaoinigh ar úsáideoir dall le léitheoir scáileáin, úsáideoir le brabhsálaí téacs amháin nó aon duine a thugann cuairt ar an láithreán gan CSS nó Íomhánna cumasaithe (cosúil le, úsáideoir soghluaiste b’fhéidir ag lorg an nasc le do shuíomh cairdiúil soghluaiste). Ní bheidh a fhios ag aon duine acu faoi na trí nasc sin toisc nach bhfuil aon téacs acu. Má tá íomhánna as feidhm ní fheicfidh úsáideoir téacs alt fiú le cur síos a dhéanamh ar an méid a bheadh ​​ann toisc gur íomhá cúlra é.

    B’fhearr na híomhánna a sleamhnú, iad a nascadh, iad a chur ar liosta agus iad a shnámh in aice lena chéile. Nó fiú téacs a úsáid le haghaidh na nasc agus an téacs a athsholáthar ag úsáid teicníc chaighdeánach athsholáthair íomhá. Dealraíonn sé go bhfuil sé seo áisiúil, ach déanann sé rudaí i bhfad níos deacra / dodhéanta dóibh siúd nach n-úsáideann brabhsálaí grafach caighdeánach.

    • 2
      • 3

        Doug,

        Ní léann JAWS teidil nasc de réir réamhshocraithe, ach tá an ceart agat, is féidir é a dhéanamh. Cén fáth a mbeifeá ag lorg teidil nasc mura mbeadh a fhios agat go raibh sé ann, agus fiú dá mbeifeá, is cinnte go dtiteann sé seo ar shaincheist inúsáidteachta a chiallaíonn go bhfuil tú ag tabhairt taithí dara ráta d’úsáideoirí níos lú cumais ar do shuíomh a úsáid.

        Maidir le brabhsálaithe téacs, ceadaíonn an t-alt a chuireann tú mé i dtreo an Lynx sin ort liosta teidil nasc a thabhairt suas, ach is é mo phointe fós mura raibh a fhios agat go raibh nasc ann, mar ní raibh téacs ann sa chéad áit , cén fáth a mbeadh téacs teidil á lorg agat?

        Faoi dheireadh, ní bheidh tréithe teidil nasc le feiceáil fós do dhuine ar bith a bheidh ag brabhsáil gan íomhánna cumasaithe nó gan CSS cumasaithe.

        Mar sin tá, is fearr naisc le teidil ná iad siúd gan iad, ach sa chás seo níl sé ach imeallach.

        Sin é an fáth gur rogha i bhfad níos sábháilte, níos inrochtana agus níos inúsáidte í íomhá a úsáid, ionas gur féidir téacs alt a léamh, nó íomhá a athsholáthar, ionas go mbeidh an téacs ann.

        • 4

          Eolas Maith, Phil. Táim chun iarracht a dhéanamh é seo a fheabhsú le téacs ach an téacs a cheilt - ar an mbealach sin léifidh táirge inrochtana mar JAWS an téacs nasc agus taispeánfar an téacs má tá CSS nó Íomhánna díchumasaithe.

          Ní aontaím gurb é an t-aon réiteach inrochtana ná Íomhá a chur le nasc, áfach.

  2. 5
  3. 8

    Ghoid mé é. Tá, a dúirt mé é.

    Doug, tá na grafaicí iontach agus tá an códú chomh simplí simplí cuireann sé eagla orm (bhí mé ag imirt le CSS agus anois “faighim é” sa deireadh).

    Tweaked suas an cód chun freastal ar mo chuid riachtanas, figured amach cá háit a ligean isteach an giotán HTML, agus go macánta tá sé iontach agus tá an barr sin de mo bharra taobh a bhí ag tiomáint INSANE glanta agam.

    B’fhéidir go mbeadh orm an caife sin a cheannach duit fós!

  4. 10

    Doug,

    Beidh mé mar ghuth easaontach, ag úsáid mo thaithí mar shampla. Is cuimhin liom ár ríomhphoist nuair a d’athraigh mo r-phost baile agus thug tú faoi deara nach raibh orm ach rogha a dhéanamh le mo cheann nua. Caithfidh mé a admháil go raibh an-chuid ama agam “ag fáil amach” an ghné nua ar do shuíomh le roghnú arís. Cuid de seo ba chúis leis go raibh an nasc bunaidh rud beag níos traidisiúnta agus chuimhnigh mé go doiléir ar an gceann sin. Ba é an ceann eile toisc nach raibh an clúdach litreach taobhlíne cosúil le clúdach dom i dtosach. Tar éis thart ar 5 nóiméad nó níos mó thosaigh mé ag rolladh mo luch thar gach íomhá agus nuair a léirigh an teideal “Liostáil le R-phost”, ansin bhí a fhios agam go raibh mé i mbun gnó. Rinne m’inchinn amach freisin cad a bhí sa phictiúr nasc.

    Ach, domsa ar a laghad, ní raibh clúdach taobhlíne iomasach dom mar an áit le liostáil le fógraí ríomhphoist. Agus (toisc gur dúradh liom deireadh a chur le rud éigin deas i gcónaí) Aontaím le Phil thuas; tá an modh i ndáiríre simplí agus oibríonn an mhír iomlán go hiontach. Glacaim leis gur chuidigh d’uirlis dearaidh leis na toisí beachta a thabhairt duit do na 3 chuid; an toimhde cheart é sin? Caithfidh mé glacadh leis mar sin, mar dá mbeadh íomhá 400 picteilín ar leithead agam, ba mhaith liom na socruithe cearta, srl. A bheith ar eolas agam.

  5. 12
    • 13

      Uilliam,

      Tá an chuma ar an scéal go bhféadfadh coimhlint a bheith agat idir d’ainmneacha ranga tráchtaireachta agus ainmneacha na n-ainmneacha sa ghrafaic barra taobh. Is féidir leat iad a ainmniú ar bhealach difriúil chun an choimhlint a ghlanadh. Cuir in iúl dom má theastaíonn lámh uait!

      Doug

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

    Cur chuige deas, ach teastaíonn rud éigin uaim le haghaidh léarscáil thopagrafach, mar sin ní féidir liom ceantair dronuilleog a úsáid… Sílim go gcaithfidh mé an léarscáil íomhá sean-stíl a úsáid le comhordanáidí, ach is dócha go ndéanfaidh mé tochailt beagán níos doimhne…

  11. 19

    Go raibh maith agat as an eolas seo, Doug. Bhí mé anseo roimhe seo agus n’fheadar conas a rinne tú é. Bhíomar ag iarraidh léarscáil mar sin a chruthú le cur isteach i ndiaidh ár bpost, agus anois go bhfuil na hacmhainní againn, is féidir linn é a dhéanamh. Bravo!

  12. 20
  13. 21

    Hi Doug,
    D’fhág mé trácht roimhe seo ach thuig mé gur ar éigean a thairg mé léargas ar bith ar mo aincheist ar chor ar bith. Táimid ag oiriúnú téama wordpress chun cabhrú linn ár sitcom ar líne a sheoladh anseo:

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

    Anois, feicfidh tú go bhfuil meirge nascleanúna againn thar barr, íomhá a bhí beartaithe againn a mhapáil mar a bhí againn an iliomad uaireanta roimhe seo. / palmforehad. Ní thuigeann aon duine againn CSS i ndáiríre, ach tugaimid timpeall go leordhóthanach agus go dtí seo rinneamar ceart go leor go dtí an pointe seo. Is fíor-léargas é d’alt san AON AMHÁIN as an iliomad a chuir ar fáil ar an gcaoi le híomhánna a úsáid i CSS go héasca. D'eisigh mé an stílbhileog de réir do threoracha, ach níl tuairim agam cá háit an HTML a chur. Is é an rud ar fad a dúirt tú ná “Cuir do html leis ... Tá sé deas agus simplí” agus ansin ghlaoigh mé mar cheap mé .. “níl sé simplí go leor dom!” Ní raibh a fhios agam go bhféadfainn html a chur le haon cheann de na leathanaigh php seo san eagarthóir téama. An gcuirim an html sa cheanntásc? An teimpléad Príomh-Innéacs? Na Feidhmeanna? Glacaim leis go bhfuil an rogha ag gach úsáideoir wordpress a théama a chur in eagar in eagarthóir an phainéil, rud a bhfuil cuma uilíoch air ó thaobh feidhme de. Dá bhféadfá a mholadh cá háit an html a chur, ba bhreá liom cód oru a oiriúnú do mo bharra nascleanúna.

    Go raibh maith agat as do chuid eolais a roinnt leis an bpobal. Táim sásta caife a fháil duit.

    • 22

      Hi Phay!

      Tá na comhaid go léir do théama do bhlag ar fáil tríd an bpainéal Riaracháin le haghaidh eagarthóireachta. Má chliceálann tú ar Cur i Láthair agus ansin Eagarthóir Téama, ba cheart go mbeifeá in ann liosta de do chuid comhad a fheiceáil ar dheis agus eagarthóir ar chlé.

      Más mian leat go mbeadh sé seo i do bharra taobh, is dócha go bhfuil leathanach Taobhbharra agat. Cliceáil chun é a chur in eagar agus ansin cuir an HTML atá curtha ar fáil ar an leathanach inar mhaith leat é.

      Nóta amháin: Tá eagar na mbileog stíle i gcoibhneas le do leathanach, mar sin beidh ort an pictiúr a uaslódáil chuig eolaire na n-íomhánna téama má tá tú ag tagairt dó mar a dhéanfá le híomhánna eile i do théama.

      Hope go gcuidíonn!

    • 23

      Phay,
      Tháinig mé trasna ar an suíomh seo inniu agus bhí an aincheist chéanna agam ort. Theastaigh uaim freisin mapa íomhá a chur leis an íomhá ceanntásca. Tar éis imirt timpeall leis ar feadh tamaill, fuair mé i gceart é. Cuir an div HTML sa chomhad header.php. Chuir mé é idir agus. Níl mé cinnte an bhfuil an códú cruinn sin ag do theimpléad, ach bí ag súgradh leis sa chomhad header.php agus tuigfidh tú é.
      -
      Paul

  14. 24

    Go raibh maith agat as an bhfreagra gasta!

    Níl, níor theastaigh uaim go mbeadh sé sa bharra taobh, tá sé ag barr an leathanaigh (is féidir leat a fheiceáil sa nasc a chuir mé ar fáil- an barra nascleanúna bándearg a deir contant, faoin seó ect ..)

    Bhí mé ag obair sa phainéal ar maidin, ar an drochuair, níl mé cinnte cén comhad ina gcuirim an html, mar a dúradh thuas, tá roinnt agam, header.php, main index.php, functions.php, footer.php. Níl mé cinnte cá háit an cód html a chur isteach. (an chéad chuid a chuir tú ar fáil, chuir mé an chuid eile isteach i mo bhileog stíl cheana féin) Tá m’íomhá agam ansin ar an suíomh Gréasáin, tá gach rud réidh le dul, níl a fhios agam ach cá háit ar féidir liom an chuid html den chód a chur in oiriúint.

    Go raibh maith agat an méid sin as do chuid ama agus as ceisteanna a chur ó núíosach.

    Phay

  15. 25

    … Nó b’fhéidir go bhféadfadh duine na tuairimí faoin gcomhad a gcuirimid an chuid html den chód ann a phostáil. Dúirt fear uasal cúpla post suas go ndearna sé amach é. Ní raibh an t-ádh orm.

    Phaylen

  16. 26
  17. 27

    Tá an t-uafás ama agam ag aimsiú bealach chun léarscáil íomhá in-chliceáilte a leabú i wordpress toisc go stiallann sé clibeanna léarscáile html. D'oibreodh do bhealach ach is léir go bhfuil léarscáil de na SA ar bhealach casta chun scriú leis an mbealach seo. Táim caillte.

    Cabhrú.

    Dealraíonn sé gurb é splanc an t-aon rogha atá agam?

    • 28

      Dave,

      Má chuireann tú an íomhá i do theimpléad, beidh tú ceart go leor. Má chuireann tú an léarscáil íomhá san ábhar iarbhír, d’fhéadfá saincheisteanna scagtha a rith. Tá an bealach ar oibrigh mé timpeall air seo uafásach, ach uaireanta bhain mé úsáid as iframe.

      Doug

  18. 29

    Haigh,

    is cosúil gur dhá rud éagsúla iad an léarscáil íomhá agus na naisc, ní oibríonn siad le chéile mar a dhéanann léarscáil íomhá i html

    nuair a chuirim suíomh cúlra (lár na láimhe clé) don mhapa íomhá san áireamh, ní leanann suíomh na nasc leantach.

    ar bhealach ar bith le dul timpeall air seo? im an-amaitéarach. go raibh maith agat.

  19. 31

    An mbainfí úsáid as cur chuige den chineál céanna le haghaidh léarscáil íomhá níos mó agus níos casta mar atá mé ag iarraidh a úsáid?

    Má amharcann tú ar mo shuíomh, cliceáil ar naisc ar chlé agus feicfidh tú an íomhá atá mé ag iarraidh a úsáid mar mhapa íomhá (faoin aibítir Téacs).

    Go bunúsach, ag iarraidh an Íomhá a úsáid chun dul chuig gach cuid den liosta seo trí litir.

    Is léir gur chaith mé 20 nóiméad ag tógáil léarscáil le GIMP, agus ansin déanann WP na clibeanna léarscáile a bhaint, mar sin sin mar a fuair mé do shuíomh.

    Cé, féadfaidh smaoineamh ar Flash a úsáid

    Go raibh maith agat.

  20. 33

    Tá leagan amach teimpléid agus eagarthóireacht á úsáid agam faoi láthair le mo chuid rudaí féin. Ba mhaith liom léarscáil íomhá a chur leis, ach níl mé cinnte cá háit a gcuirfear é sa CSS. tá an íomhá ba mhaith liom léarscáil a dhéanamh di sa chuid ceanntásca.

  21. 34

    Dia duit, thóg mé mo shuíomh Gréasáin ar joomla ... ba mhaith liom an modh seo a úsáid chun lógó mo leathanaigh a nascadh leis an mbaile, dúradh liom nach féidir leat é seo a dhéanamh le joomla ach tugann an t-alt seo dóchas dom! ba mhór againn cabhair trí ríomhphost…. Go raibh maith agat

  22. 35

    Hi Doug - Tá léarscáil íomhá atá casta go leor bunaithe ar CSS á thógáil amach agam a bhfuil tar-rolladh iargúlta air (sa chás seo, taispeántais téacs in áiteanna eile ar an leathanach nuair a osclaíonn tú ceann de na hotspots íomhá). Ar bhealach ar bith, tháinig mé ar do shampla anseo agus mé ag déanamh taighde air sin ... agus shíl mé go roinnfinn an t-ionchur seo a leanas:

    1. Ar mhaithe le hinrochtaineacht, níor cheart duit infheictheacht a úsáid: ceann ar bith (nó taispeáint: ceann ar bith má mheas tú é sin) chun an téacs a cheilt anseo, mar eilimint atá stíle le hinfheictheacht: ní léifidh léitheoirí scáileáin iad i bhfolach (iad siúd a leanann spec) .

    Ina áit sin, bain úsáid as teicníc athsholáthair íomhá níos láidre. Molaim an modh Phark nó Gilder / Levin - is iad sin na hainmneacha doiciméadaithe níos fearr ar google chun na teicnící bunúsacha a aimsiú. Is fearr liom G / L mar oibríonn sé le CSS cumasaithe freisin ach déantar íomhánna a mhúchadh.

    2. Cé nach bhfeicim é ag briseadh (ag baint úsáide as FF3), tá rioscaí bunúsacha ag baint le do shuíomh a chur i bhfeidhm. Tá gné suite go hiomlán suite i gcoibhneas leis an tuismitheoir is gaire dó. Go bunúsach, ba mhaith leat comhthéacs suite a leagan síos go sainráite trí ‘position: relative’ a chur i bhfeidhm ar #subscription. Ansin is féidir na páistí (na naisc suite) a shuíomh laistigh den tuismitheoir sin. Cuidíonn an modh seo le torthaí níos iontaofa a chinntiú ar fud na mbrabhsálaithe.

    Chomh maith leis sin, ba cheart duit na dearbhuithe suite “top: x” agus “left: x” a úsáid (áit arb é x an luach fritháireamh, abair i px) seachas corrlaigh chun an suíomh sin a láimhseáil. Arís, ní fheicim go bhfuil sé ag briseadh ar an mbealach atá agat, ach tá sé i gceist ag barr agus ar chlé chuige seo mar sin cén fáth nach n-úsáidtear iad? Chomh maith leis sin tá snámháin agus corrlaigh socraithe agat ar an eilimint chéanna, a chuireann an fabht “corrlach dúbailte” in IE6 faoi choinníollacha ar leith (an ndearna tú tástáil air seo?) - cé go bhfuil socrú ann, seachnaíonn tú an tsaincheist sin go hiomlán trí bharr a úsáid agus fágtar in ionad corrlaigh iad le haghaidh suímh sa chás seo.

    3. Mar fhocal scoir, cén fáth nach n-úsáideann tú liosta neamhordúil atá semantically sound do na naisc seo in ionad an div gan brí?

    Tá brón orm a bheith ag drónáil ar ... Is maith liom a roinnt, b / c Tá a fhios agam ó thaithí go bhfuil go leor bealaí éagsúla ann chun CSS a úsáid chun an toradh inmhianaithe a fháil, ach is cinnte go n-oibríonn roinnt bealaí níos fearr (níos iontaofa, tras-bhrabhsálaí) ná a chéile . HTH.

  23. 36
  24. 37
  25. 38

    Go raibh míle maith agat!! Shábháil do threoracha UAIREANTA oibre dom… Táim nua maidir le forbairt gréasáin, agus níor fhulaing mé ach trí mo chéad tionscadal mór. Rinne mé é ... tá an cliant sásta, ecstatic i ndáiríre, agus mar sin táim!

  26. 39

    Dia duit, go raibh míle maith agat as seo a phostáil! Blianta ina dhiaidh sin agus tá sé fós ag cabhrú… deas! Tá mé ag streachailt mo mhapa íomhá a fháil chun nasc a dhéanamh san áit cheart. Tá meirge agam agus ba mhaith liom go nascfadh na deilbhíní sóisialta ar thaobh na láimhe deise uachtair den bhratach leis an gcód a chuir tú ar fáil. Oibríonn sé go hiontach, ach amháin go bhfuilim ag déanamh rud éigin mícheart mar go bhfuil mo naisc le feiceáil ar an taobh clé uachtarach ar chlé den scáileán, ní thar na deilbhíní sóisialta, ach thar an lógó. Táim cinnte gur rud simplí é, ach ní féidir liom é a dhéanamh amach. Shíl mé go roinnfinn é anseo ar eagla go mbeadh léargas ar bith agat. Go raibh maith agat arís as seo a phostáil!

Cad é do bharúil?

Úsáideann an suíomh seo Akismet chun spam a laghdú. Foghlaim conas a dhéantar próiseáil ar do chuid tráchta.