Láithreán Neadú: conas a dhéanamh ar an pictiúr cúlra html

Go leor dearthóirí gréasáin novice, ach amháin chun delve isteach an croílár an cruthú suímh, is minic a Wonder conas a dhéanamh a thaispeáint cúlra html. Agus más féidir cuid acu déileáil leis an bhfadhb, tá sé fós ina fadhb ag an am a síneadh an leithead iomlán an íomhá ar an monatóireacht a dhéanamh. Ag an am céanna ba mhaith liom a fheiceáil ar an suíomh ar taispeáint identically ar gach brabhsálaithe, mar sin ba chóir é a chomhlíonann ceanglais tras-bhrabhsálaí. Is féidir leat a leagtar ar an cúlra ar dhá bhealach: trí úsáid a bhaint clibeanna HTML agus stíleanna CSS. Gach ceann dó féin roghnaíonn an rogha is fearr. Ar ndóigh, tá stíl CSS i bhfad níos áisiúla, toisc go bhfuil ar a cód stóráiltear i gcomhad ar leith agus ní a chur ar bun cainteoirí breise sa suíomh is mó ar clibeanna, ach an chéad ligean dúinn machnamh modh simplí do shuiteáil ar an íomhá ar an cúlra ar an suíomh.

clibeanna HTML Bunúsach a chruthú ar an cúlra

Mar sin, théann muid go dtí an gceist ar conas a dhéanamh ar an íomhá cúlra i html ar an scáileán. Chun breathnú suíomh álainn, caithfidh tú a thuiscint amháin go mion in áit tábhachtach: tá sé go leor ach a dhéanamh cúlra grádán nó péint sé dath soladach, ach más gá duit a chur isteach ar an íomhá cúlra, ní bheidh sé stráice leithead iomlán an monatóireacht a dhéanamh. Ba é an íomhá is gá ar dtús a phiocadh suas nó a dhéanamh do dhearadh féin leis an síneadh, ina mbeidh tú ag taispeáint leathanach ar an suíomh. Ach amháin nuair a bhíonn an íomhá cúlra réidh, é a tharraingt isteach i bhfillteán darb ainm «Íomhánna». I é, beidh muid ag a stóráil ar fad na n-íomhánna a úsáidtear, beochan agus comhaid grafacha eile. Ba chóir an fillteán a bheith suite ar an eolaire fhréamh le gach do chuid comhad html. Anois is féidir leat bogadh ar aghaidh agus chun an cód. Tá roinnt roghanna le haghaidh cód scríobh, ag a mbeidh an cúlra a athrú ar an pictiúr.

1. Scríobh tréith tag.
2. Trí stíl CSS sa chód HTML.
3. Scríobh stíleanna CSS i gcomhad ar leith.

Mar a tharla sa HTML a dhéanamh ar an íomhá cúlra, a shocraíonn tú, ach ba mhaith liom a rá cúpla focal faoi conas a bheadh sé an chuid is mó is fearr is féidir. Is é an modh chéad trí scríobh trí tréith tag le fada i léig. Is é an dara rogha a úsáidtear go han-annamh, mar go tharlaíonn sé go raibh a lán de chód céanna. Tá an tríú rogha an ceann is coitianta agus éifeachtach. Seo a leanas samplaí de HTML tags:

1. An chéad mhodh taifeadta trí tréith chlib (comhlacht) i gcomhad index.htm. Tá sé stóráilte san fhoirm seo: (cúlra comhlacht = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ comhlacht). Is é sin, má táimid tar éis pictiúr leis an teideal «Pictiúr» agus síneadh JPG, agus an fillteán ainmnithe muid ag «Íomhánna», ansin beidh an iontráil HTML-cód breathnú mar seo: (cúlra comhlacht = "Íomhánna / Picture.jpg") ... (/ comhlacht) .
2. I gceist leis an dara modh taifeadta stíl CSS, ach tá sé scríofa sa chomhad céanna leis an ainm index.htm. (Comhlacht stíl = "cúlra: url ( 'Íomhánna ../ / Picture.jpg')").
3. Is é an tríú modh taifeadadh in dhá chomhad. Tá an doiciméad leis an chlib ainm index.htm (ceann) scríofa den sórt sin ar líne: (ceann) (nasc rel = "stílbhileog" type = "text / css" href = "http: // láthair / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ceann). A comhad a dtugtar stíl style.css scríobh cheana féin: body {cúlra: url (Íomhánna / Picture.jpg ')}.

Mar a tharla sa HTML a dhéanamh ar an íomhá cúlra, tuigimid. Anois, ní mór duit a figiúr amach conas a stráice an íomhá ar fud an leithead an scáileán ar fad.

Bealaí chun stráice an íomhá cúlra leis an leithead an fhuinneog

Ionadaíocht againn ár n-scáileán i bhfoirm céatadán. Casadh sé amach go mbeidh an leithead iomlán agus fad an scáileán a bheith 100% × 100%. Ní mór dúinn a stráice an íomhá a ghabhann leis an leithead. Cuir go dtí an líne taifeadta style.css comhad íomhá a stráice an íomhá thar an leithead iomlán agus fad an monatóireacht a dhéanamh. Toisc go bhfuil sé scríofa i stíl CSS? Tá sé chomh simplí sin!

comhlacht

{

Cúlra: url (Íomhánna / Picture.jpg ')

cúlra-size: 100%; / * Tá an post oiriúnach don chuid is mó brabhsálaithe nua-aimseartha * /

}

Mar sin, figured muid amach conas a dhéanamh ar chúlra pictiúr sa html ar an scáileán. Is modh taifeadta sa chomhad index.htm ann freisin. Cé an modh seo agus as dáta, ach do thosaitheoirí is gá go mbeadh a fhios agus a thuiscint. An chlib (ceann) (stíl) div {cúlra-size: chlúdach; } (/ Style) (/ ceann), ciallaíonn sé seo an taifead sin a leithdháileadh muid ag aonad speisialta don chúlra, a bheith suite os cionn an leithead iomlán an fhuinneog. Rinneamar breithniú ar dhá bhealach, conas a dhéanamh ar shuíomh html pictiúr cúlra, ionas go mbeidh an íomhá a shíneadh go dtí an leithead iomlán an scáileán in aon cheann de na brabhsálaithe nua-aimseartha.

Conas a dhéanamh ar chúlra seasta

Má shocraíonn tú a úsáid pictiúr mar chúlra ar an acmhainn ghréasáin amach anseo, ansin is gá duit ach fios a bheith agat conas a dhéanamh seasta é, mar sin nach bhfuil sé sínte ar fhad agus ní raibh spoil an chuma aeistéitiúil. Níl ort ach trí úsáid a bhaint cód HTML a chlárú ina theannta sin beag. Ní mór duit style.css chun an comhad a chur ar frása i ndiaidh cúlra: url (Íomhánna / Picture.jpg ') socraithe; nó ina ionad sin leanas i ndiaidh an Leathstad líne ar leithligh - phost: seasta. Dá bhrí sin, beidh do ballapháipéar a shocrú. Le linn ábhar a scrollaigh ar an suíomh seo, feicfidh tú an téacs línte ag bogadh, ach fanann an cúlra atá i bhfeidhm. Mar sin, d'fhoghlaim tú conas a dhéanamh íomhá cúlra html, ar bhealaí éagsúla.

Ag obair le Táblaí i HTML

Go leor forbróirí gréasáin inexperienced, ag tabhairt aghaidhe táblaí agus bloic, is minic a thuiscint conas a dhéanamh tábla cúlra íomhá html. Cosúil le gach foirne HTML stíleanna agus CSS, is é an teanga cláir gréasáin simplí go leor. Agus is é an réiteach den sórt sin fadhb a scríobh le péire de línte de chód. Ba chóir duit a fhios agat cheana féin go bhfuil a scríobh tábla na línte agus na gcolún, faoi seach, mar a léiríonn an clibeanna (tr) agus (td). Chun an cúlra an tábla i bhfoirm íomhá, tá sé riachtanach a chur leis an chlib (tábla), (tr) nó (td) frása simplí faoi threoir an íomhá tagartha: cúlra = pictiúir URL. Ar mhaithe le soiléireacht, a thabhairt cúpla samplaí.

Tábla le pictiúr ionad an chúlra: samplaí HTML

Tarraing tábla 2x3 agus é a dhéanamh ar an íomhá cúlra stóráil i bhfillteán "Íomhánna": (cúlra tábla = "Íomhánna / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tábla). Mar sin, beidh ár tábla a tharraingt sa chúlra an pictiúr.

Anois tarraing an méid pláta céanna 2x3, ach isteach pictiúr sna colúin darb uimhreacha 1, 4, 5 agus 6 (tábla) (tr) (cúlra td = "Íomhánna / Picture.jpg ') 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (cúlra td = "Íomhánna / Picture.jpg") 4 (/ td) (cúlra td = "Íomhánna / Picture.jpg") 5 ( / td) (cúlra td = "Íomhánna / Picture.jpg") 6 (/ td) (/ tr) (/ tábla). Tar éis breathnú ar féidir linn a fheiceáil go bhfuil an chuma ar an chúlra ach amháin sna cealla ina cláraithe againn, agus nach bhfuil an tábla ar fad.

láithreán Comhoiriúnacht Tras-bhrabhsálaí

Tá a leithéid de rud mar acmhainn gréasáin Comhoiriúnacht tras-bhrabhsálaí. Ciallaíonn sé seo go bhfuil do shuíomh go cothrom ar taispeáint go maith i cineálacha agus leaganacha de brabhsálaithe éagsúla. Ba chóir a thabhairt cód HTML agus CSS stíleanna a shaincheapadh ar brabhsálaithe is gá. Ina theannta sin, i ré nua-aimseartha na nguthán cliste, tá forbróirí gréasáin go leor ag iarraidh a suímh a chruthú agus in oiriúint do leagan soghluaiste agus breathnú ríomhaire.