Teicneolaíocht atá ag Teacht Chun Cinn

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

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 ol 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!

Douglas Karr

Douglas Karr Is é bunaitheoir an Martech Zone agus saineolaí aitheanta ar chlaochlú digiteach. Is é Doug a Príomhchainteoir agus Margaíocht Cainteoir Poiblí. Tá sé an VP agus cofounder de Highbridge, gnólacht a dhéanann sainfheidhmiú ar chabhrú le cuideachtaí fiontar a n-infheistíocht teicneolaíochta a athrú agus a uasmhéadú trí theicneolaíochtaí Salesforce a úsáid. D'fhorbair sé straitéisí margaíochta digiteacha agus táirgí do Dell Technologies, GoDaddy, Salesforce, WebTrends, agus SmartFOCUS. Is é Douglas údar Blagáil Chorparáideach do Dummies agus comh-údar An Leabhar Gnó Níos Fearr.

Airteagail gaolmhara

41 Comments

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

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

    Is fearr na híomhánna a ghearradh amach, iad a nascadh, iad a chur ar liosta agus iad a snámháil in aice lena chéile. Nó fiú téacs a úsáid le haghaidh na naisc agus úsáid a bhaint as teicníocht chaighdeánach athsholáthair íomhá a chur in ionad an téacs. Is cosúil go bhfuil sé seo áisiúil, ach déanann sé rudaí i bhfad níos deacra/dodhéanta dóibh siúd nach bhfuil ag baint úsáide as brabhsálaí caighdeánach grafach.

      1. doug,

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

        Maidir le brabhsálaithe téacs, ceadaíonn an t-alt a dhíríonn tú orm go Lynx leat liosta de theidil naisc a thabhairt suas freisin, ach is é an pointe atá agam fós mura raibh a fhios agat go raibh nasc ann, mar ní raibh aon téacs ann ar an gcéad dul síos. , cén fáth a mbeifeá ag lorg téacs teidil?

        Ar deireadh, ní bheidh tréithe teidil naisc le feiceáil fós d'aon duine atá ag brabhsáil gan íomhánna cumasaithe nó gan CSS cumasaithe.

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

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

        1. 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 cosúil le JAWS an téacs naisc agus taispeánfar an téacs má tá CSS nó Images díchumasaithe.

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

  2. ghoid mé é. Tá, a dúirt mé é.

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

    Tweated suas an cód chun freastal ar mo chuid riachtanas, figured amach nuair a scaoil an giotán HTML isteach, agus frankly tá cuma iontach é agus tá glanta suas go barr mo taobh-bharra a bhí ag tiomáint mé GEALLACH.

    Seans go mbeidh orm an caife sin a cheannach duit go fóill!

  3. doug,

    Beidh mé i mo ghuth easaontach, ag baint úsáide as mo thaithí mar shampla. Is cuimhin liom ár r-phoist nuair a d'athraigh mo ríomhphost baile agus thug tú faoi deara nach raibh orm ach liostáil 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 chun liostáil arís. Cuid de seo ná go raibh an nasc bunaidh beagán níos traidisiúnta agus chuimhnigh mé go doiléir ar an gceann sin. Ba é an chúis eile ná nach raibh an chuma ar an leathchlúdach cliathánach domsa ar dtús. 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íomhphost”, ansin bhí a fhios agam go raibh mé i mbun gnó. Mo inchinn figured amach freisin cad a bhí an pictiúr nasc.

    Ach, dar liomsa ar a laghad, ní raibh clúdach litreach taobh an scéil iomasach dom mar an áit chun síntiús a íoc le fógraí ríomhphoist. Agus (mar dúradh liom deireadh a chur i gcónaí le rud éigin deas) aontaím le Phil thuas; tá an modh i ndáiríre simplí agus oibríonn an mhír iomlán iontach. Glacaim leis gur chuidigh d'uirlis dearaidh leis na toisí cruinne a thabhairt duit do na 3 chuid; an toimhde ceart é sin? Caithfidh mé glacadh leis, mar dá mbeadh, abair, íomhá 400 picteilín ar leithead agam bheadh ​​na socruithe cearta ar eolas agam, etc.

    1. Uilliam,

      Tá an chuma ar an scéal go bhféadfadh coimhlint a bheith agat idir do chuid tuairimí ranga agus ainmneacha na ranganna sa ghrafaic ar an taobhbharra. Is féidir leat iad a ainmniú ar bhealach difriúil chun an choimhlint a réiteach. Cuir in iúl dom má tá lámh uait!

      Doug

  4. Cur chuige deas, ach tá rud éigin ag teastáil uaim le haghaidh léarscáil topagrafach, mar sin ní féidir liom réimsí dronuilleogacha a úsáid ... is dóigh liom go gcaithfidh mé an mapa íomhánna sean-stíl le comhordanáidí a úsáid, ach is dócha go ndéanfaidh mé tochailt beagán níos doimhne ...

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

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

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

    Anois, feicfidh tú go bhfuil bratach nascleanúna againn ar an mbarr, íomhá a bhí beartaithe againn a mhapáil mar a bhí mórán uaireanta againn roimhe seo. /pailme roimh ré. Ní thuigeann aon duine againn CSS i ndáiríre, ach bímid ag titim thart go leor agus go dtí seo rinne muid ceart go leor go dtí an pointe seo. Is fíor-léargas iad d’alt san AMHÁIN AMHÁIN as na dosaenacha a sholáthair tú, ar conas úsáid a bhaint as mapáil íomhánna i CSS go héasca. D'eisigh mé an stílbhileog de réir do threoracha, ach níl a fhios agam cén áit ar cheart an HTML a chur. Níl le rá agat ach “Cuir do html leis… Tá sé deas agus simplí” agus ansin chrom mé mar shíl mé.. “Níl sé simplí go leor dom!” Ní raibh a fhios agam an 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 dtéama a chur in eagar san eagarthóir ar an painéal, rud is cosúil go bhfuil sé uilíoch go leor i bhfeidhmiúlacht. Dá bhféadfá a mholadh cén áit ar cheart 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á áthas orm caife a fháil duit.

    1. Dia duit 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óireacht. Má chliceálann tú ar Léiriú 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 é seo a bheith i do bharra taoibh, is dócha go bhfuil leathanach Barra Taoibh agat. Cliceáil chun é a chur in eagar agus ansin cuir an HTML a chuirtear ar fáil laistigh den leathanach ar mhaith leat é.

      Nóta amháin: Tá an eagarthóireacht stílbhileog gaolmhar le do leathanach, mar sin beidh ort an pictiúr a uaslódáil chuig an eolaire íomhánna téama má tá tú ag tagairt dó mar a dhéanfá íomhánna eile i do théama.

      Hope go gcuidíonn!

    2. Phá,
      Tháinig mé trasna ar an suíomh seo inniu agus bhí an aincheist chéanna agam leatsa. Theastaigh uaim freisin léarscáil íomhá a chur leis an íomhá header. Tar éis imirt timpeall leis ar feadh tamaill, fuair mé ceart é. Cuir an HTML div sa chomhad header.php. Chuir mé idir agus . Nílim cinnte an bhfuil an códú cruinn sin ag do theimpléad, ach imrím timpeall leis sa chomhad header.php agus déanfaidh tú é a dhéanamh amach.
      -
      Paul

  7. Go raibh maith agat as an bhfreagra tapa!

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

    Bhí mé ag obair ar an painéal ar maidin, ar an drochuair, níl mé cinnte cén comhad a chuirim an html, mar a dúradh thuas, tá roinnt agam, header.php, príomh-innéacs.php, functions.php, footer.php. Níl mé cinnte cén áit ar cheart 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 stílbhileog cheana féin) Tá mo íomhá agam ansin ar an suíomh Gréasáin, tá gach rud réidh le dul, ní gá dom ach fios a bheith agam cén áit ar cheart an chuid html den chód a chur in oiriúint.

    Go raibh míle maith agat as do chuid ama agus as do chuid ceisteanna a chur ó dhuine nua.

    Phay

  8. ... Nó b'fhéidir go bhféadfadh duine éigin a phostáil sa tuairimí faoi a comhad a chuirimid ar an chuid html den chód isteach A uasal cúpla post suas dúirt figured sé amach é. Ní raibh an t-ádh sin orm.

    Phailein

  9. Tá mé i ifreann ama ag teacht ar bhealach chun léarscáil íomhá inchliceáilte a leabú i wordpress mar go scriosann sé clibeanna léarscáile html. Bheadh ​​do bhealach ag obair ach is léir go bhfuil léarscáil de na Stáit Aontaithe ar bhealach casta chun scriú leis an mbealach seo. Táim caillte.

    Cabhrú.

    Dealraíonn sé go bhfuil flash mo rogha amháin?

    1. 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á dul i ngleic le saincheisteanna scagaire. Tá an bealach ar oibrigh mé timpeall air seo uafásach, ach uaireanta bhain mé úsáid as iframe.

      Doug

  10. Haigh,

    is cosúil go bhfuil an léarscáil íomhá agus na naisc dhá rud difriúil, nach bhfuil siad ag obair le chéile mar a dhéanann léarscáil íomhá i html

    nuair a chuirim suíomh cúlra (lár ar chlé) le haghaidh léarscáil na híomhá san áireamh, ní leanann suíomh na nasc.

    aon bhealach le dul timpeall air seo? Táim an-amaitéarach. go raibh maith agat.

  11. An n-úsáidfí cur chuige comhchosúil le haghaidh léarscáil íomhá níos mó agus níos casta mar atáim ag iarraidh a úsáid?

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

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

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

    Is féidir, áfach, smaoineamh ar Flash a úsáid

    Go raibh maith agat.

  12. 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én áit ar cheart é a chur sa css. tá an íomhá ar mhaith liom léarscáil a dhéanamh de sa chuid ceanntásc.

  13. Dia duit, thóg mé mo shuíomh Gréasáin ar joomla ... ba mhaith liom an modh seo a úsáid chun nasc abhaile a dhéanamh le lógó mo leathanaigh, 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 an bhuíoch as cabhair tríd an ríomhphost….go raibh maith agat

  14. Dia duit Doug – Tá mé ag tógáil amach léarscáil íomhá casta atá bunaithe ar CSS a bhfuil cianaistrithe ann freisin (sa chás seo, taispeántar téacs in áit eile ar an leathanach nuair a aistríonn tú ceann de na hotspots íomhá). Ar aon nós, tháinig mé trasna 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:níl (nó taispeáint:gan aon cheann má mheas tú é sin) a úsáid chun an téacs a cheilt anseo, mar eilimint a bhfuil infheictheacht ag baint léi: ní léifidh léitheoirí scáileáin folaithe (iad siúd a leanann sonraíocht) .

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

    2. Cé nach bhfeicim é ag briseadh (ag úsáid FF3), tá rioscaí bunúsacha ag baint le do shuíomh a chur i bhfeidhm freisin. Tá eilimint suite go hiomlán suite i gcoibhneas leis an tuismitheoir is gaire di. Go bunúsach, ba mhaith leat comhthéacs suímh a shocrú go sainráite trí 'position:relative' a chur i bhfeidhm ar #síntiús. 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.

    Ina theannta sin, ba cheart duit na dearbhuithe suímh “barr: x” agus “clé: x” a úsáid (áit arb é x an luach fritháirimh, abair i px) seachas corrlaigh chun an suíomh sin a láimhseáil. Arís, ní gá go bhfeicim é ag briseadh mar atá sé agat, ach tá barr agus clé i gceist chuige seo mar sin cén fáth nach n-úsáidfeá iad? Chomh maith leis sin tá snámháin agus corrlaigh socraithe agat ar an eilimint chéanna, rud is cúis leis an bhfabht “corrlach dúbailte” in IE6 faoi choinníollacha sonracha (ar thástáil tú é seo ann?) – cé go bhfuil réiteach ann, seachnaíonn tú an cheist sin go hiomlán trí úsáid a bhaint as barr agus fágtar é in ionad corrlaigh le haghaidh suite sa chás seo.

    3. Mar fhocal scoir, cén fáth nach n-úsáidfeá liosta neamhordúil le fuaim shéimeantach do na naisc seo in ionad an div gan brí?

    Gabh mo leithscéal as droning on… Is maith liom a roinnt, b/c tá a fhios agam ó thaithí go bhfuil go leor bealaí éagsúla chun CSS a úsáid chun toradh inmhianaithe a fháil, ach is cinnte go n-oibríonn roinnt bealaí níos fearr (níos iontaofa, trasbhrabhsálaí) ná cinn eile . HTH.

  15. Go raibh míle maith agat!! Shábháil do threoracha uaireanta oibre dom...Tá mé nua i bhforbairt gréasáin, agus d'fhulaing mé díreach tar éis mo chéad tionscadal mór. Rinne mé é...tá an cliant sásta, suaimhneach i ndáiríre, agus táim féin chomh maith!

  16. Dia duit, go raibh míle maith agat as é seo a phostáil! Blianta ina dhiaidh sin agus tá sé fós ag cabhrú ... go deas! Tá mé ag streachailt le mo léarscáil íomhá a nascadh san áit cheart. Tá bratach agam agus ba mhaith liom na deilbhíní sóisialta ar thaobh uachtarach na láimhe deise den bhratach a nascadh leis an gcód a sholáthair tú. Oibríonn sé go hiontach, ach amháin go bhfuil rud éigin mícheart á dhéanamh agam mar go bhfuil mo naisc le feiceáil ar an taobh clé uachtarach den scáileán, ní thar na deilbhíní sóisialta, ach thar an lógó. Tá mé cinnte go bhfuil sé rud éigin simplí, ach ní féidir liom a dhéanamh amach é. Shíl mé go roinnfinn anseo é ar eagla go mbeadh aon léargas 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.

Ar ais go barr an cnaipe