Habia gune: nola hondo irudian egiteko html

hasibe web diseinatzaile askok, soilik guneak sortzea funtsa murgiltzera, askotan galdetzen itsatsi atzeko irudia nola egin. Eta horietako batzuk arazo horri aurre ahal bada, oraindik ez da monitorea irudi zabalera osoan luzatzen den unean arazo bat. Aldi berean nahi nuke gunean erakutsiko dira berdinean nabigatzaile guztietatik ikusteko, beraz, mugaz nabigatzaileak baldintzak betetzen behar da. atzealdean ezarri dezakezu bi modu daude: erabiliz HTML tags eta CSS estiloak. berea da aukerarik onena aukeratzen du. Jakina, CSS estilo askoz erosoagoa da, bere kodea da aparteko fitxategi batean gordetzen duelako, eta ez du hartzen dute hiztun estra gune nagusia etiketa, baina lehen utzi Gunean atzeko irudia instalatzen metodo sinple bat kontuan hartu gurekin.

Oinarrizko HTML etiketa atzealdean sortu nahi

Beraz, joan atzeko irudia nola egin itsatsi pantailan galderari dugu. gunearen itxura ederra, bat Xehetasun garrantzitsuak ulertu behar: nahikoa gradiente hondo bat egiteko edo margotzeko kolore solidoa da, baina atzeko irudia txertatzeko behar baduzu, ezin izango da monitorea zabalera osoa luzatzeko. Irudia jatorriz beharrezkoa zen jasotzeko edo zure diseinua egiteko luzapen hori, eta bertan gune orrialde bistaratuko du zurekin. denean bakarrik atzeko irudia prest dago, arrastatu «Irudiak» izeneko karpeta batean. Bertan, erabilitako irudi guztiak, animazioak eta beste fitxategi grafikoa gordeko dugu. karpeta hau zure html fitxategi guztiak batera erro direktorioa kokatutako luke. Hemendik eta kodea mugitu ahal izango duzu. Badira idatziz kodea hainbat aukera, horren bidez, atzealdean irudi aldatu egingo da.

1. Idatzi etiketa attribute.
2. CSS HTML kodean style bidez.
3. Idatzi CSS estilo aparteko fitxategi batean.

HTML bezala atzeko irudia egiteko, erabaki duzu, baina nola gehien optimoa izango litzateke buruz hitz batzuk esan nahi nuke. Lehenengo metodoa attribute etiketa baten bidez idatziz da aspaldi zaharkituak izan da. Bigarren aukera erabiltzen da, oso gutxitan, bihurtzen da hori delako kode bera asko. Hirugarren aukera bat ohikoena eta eraginkorra. Hemen HTML etiketa adibide dira:

1. The attribute etiketa (gorputza) index.htm fitxategia bidez grabaketa lehen metodoa. (Gorputz hondo = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body): It inprimaki honetan gordeta. Hau da, izenburua «Argazki» eta luzapena JPG, eta karpeta izendatu dugu «Irudiak», ondoren HTML-kodea sarreraren itxura hau izango du argazki bat badugu: (gorputz hondo = "Irudiak / Picture.jpg") ... (/ gorputza) .
2. Bigarren modua CSS estilo bat grabatzen dakar, baina izen index.htm fitxategia bera idatzita. (Body style = "background: url ( '../ Irudiak / Picture.jpg')").
3. Hirugarren grabaketa metodoa bi fitxategiak egindako. Izen index.htm etiketa (burua) ekin Dokumentua idatzia dago, besteak beste, lerro bat: (burua) (link rel = "estilo-" type = "text / css" href = "http: // gune / artikulu / 193110 /% D0% 9F % D1% 83%% D1% 82% D1 8C_%% D0 BA CSS_faylu ") (/ buru). izeneko fitxategi style.css estilo bat lehendik idatzi: body {background: url (Irudiak / Picture.jpg ')}.

HTML atzeko irudia egiteko bezala, ulertzen dugu. Orain irudikatu irudia nola luzatzeko pantaila osoaren zabalera osoan behar duzu.

Modu atzeko irudia luzatzeko leihoaren zabalera

Gure pantaila ordezkatzen dugu portzentaje baten forman. bihurtzen zabalera osoan eta luzera pantailaren hori% 100 izango da,% 100 × da. irudia luzatzeko zabalera honek behar dugu. Irudi fitxategia grabaketa style.css line irudia luzatu egingo du zabalera osoan eta luzera monitorea baino gehiago gehitu. Da CSS estilo idatzita bezala? Erraza da!

body

{

hondo: url (Irudiak / Picture.jpg ')

hondo Tamaina: 100%; / * Post hau Nabigatzaile moderno gehienetan egokia da * /

}

Beraz hurrena dugu irudi itsatsi atzeko pantailan nola egin. Halaber, bada index.htm fitxategian grabaketa metodo bat. Metodo hau eta zaharkitu arren, baina hasiberri beharrezkoa da ezagutzea eta ulertzea. Etiketa (burua) (estiloa) div {background Tamaina: estaldura; } (/ Style) (/ buru), erregistro horrek esan unitate berezi bat esleitu dugun atzealdean, eta horrek leihoaren zabalera osoan zehar kokatu beharko da. Bi modu, nola hondo irudi itsatsi gune bat egin, beraz, irudia pantailaren zabalera osoa nabigatzaile moderno batean luzatu jotzen dugu.

Nola atzealde finko bat egin

erabakitzen baduzu argazki bat erabili etorkizun web baliabide atzeko bezala bada, orduan besterik ez nola finko egiteko jakin behar duzu, beraz, ez da luzera luzatu eta ez zuen itxura estetikoa hondatu. Besterik gabe by HTML kodea erabiliz gain txiki bat erregistratu. fitxategi style.css Esaldi bat gehitzeko hondo ondoren behar duzu: url (Irudiak / Picture.jpg ') finkoa; edo ordez ondoren koma bereizi lerroan gehitu - posizioa: finkoa. Horrela, zure wallpaper konpondu egingo da. edukien gunean korritu zehar, testu hori lerroak mugitzen ikusiko duzu, baina atzealdean tokian geratzen. Beraz itsatsi atzeko irudia nola egin, hainbat modutan ikasi duzu.

HTML Mahaiak lan egitea

Asko esperientziarik web sustatzaileei, mahaiak eta bloke aurrean, askotan ez ulertu itsatsi irudiaren hondo mahaia nola egin. guztiak bezala taldeek HTML eta CSS estiloak, web programazio hizkuntzan nahiko erraza da. Eta arazo horri konponbidea da kode lerro pare bat idazteko. Dagoeneko jakin behar duzu lerro eta zutabe, hurrenez hurren mahai bat idazten dela, etiketa (tr) eta (td) bidez adierazten da. Irudi bat forma du mahai atzeko egiteko, ezinbestekoa da gehitu etiketa (taula), (tr) edo (td) erreferentzia irudiaren erreferentzia eginez Esaldi sinple bat egiteko: hondo = URL argazkiak. Argitasuna, adibide pare bat emango dugu.

ordez atzealdean argazki batekin Taula: HTML adibide

2x3 taula bat marraztu eta horregatik da atzeko irudia karpeta "Irudiak" gordeta: (mahai hondo = "Irudiak / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ taula). Beraz, gure mahaia egon argazkiaren atzealdean marraztuko da.

Orain marraztu plaka 2x3 tamaina bera, baina zenbakidun 1, 4, 5 eta 6. (taula) zutabeak (tr) en irudi bat (td hondo = "Irudiak / Picture.jpg") 1 (/ td) (td) 2 txertatu (/ td) (td) 3 (/ td) (/ tr) (tr) (td hondo = "Irudiak / Picture.jpg") 4 (/ td) (td hondo = "Irudiak / Picture.jpg") 5 ( / td) (td hondo = "Irudiak / Picture.jpg") 6 (/ td) (/ tr) (/ taula). Ikusten den atzealdean bertan erregistratu dugu, eta ez osoa taula zelula horiek bakarrik agertzen den behaketa ondoren.

Cross-nabigatzaileak bateragarritasuna gune

Ez dago gauza bat, hala mugaz nabigatzaileak bateragarritasuna Web baliabide gisa. Horrek esan nahi du zure guneak berdin ondo erakusten ari direla mota ezberdinak eta Nabigatzaile batean. izan beharko luke HTML kodea eta CSS estilo beharrezkoa nabigatzaile bat pertsonalizatzeko. Gainera, telefono smart aro modernoan, web garatzaileek askotan guneak sortzen saiatzen dira, eta bertsio mugikorra eta ordenagailua begirada bat egokituta.