Rozloženie webových stránok: ako vytvoriť obrázok v pozadí v html
Veľa začiatočníkov, ktorí len skúmajúv podstate vytváranie stránok, často čudujú, ako v html vytvoriť pozadie. A ak niektorí ľudia porozumejú tomuto problému, stále sa vyskytujú problémy pri natiahnutí obrazu na celú šírku monitora. V tomto prípade by som chcel, aby sa stránka zobrazovala rovnakým spôsobom na všetkých prehliadačoch, a preto by sa mala splniť požiadavka na kompatibilitu s viacerými prehliadačmi. Pozadie môžete nastaviť dvoma spôsobmi: pomocou značiek HTML a štýlu CSS. Každý si sám vyberá najoptimálnejšiu možnosť. Samozrejme, štýl CSS je oveľa pohodlnejší, pretože jeho kód je uložený v samostatnom súbore a nepodlieha zbytočným stĺpcom v hlavných značkách lokality, ale predtým, ako zvážime jednoduchý spôsob inštalácie obrazu na pozadí stránky.
Základné HTML značky pre vytvorenie pozadia
Prejdime teda k otázke, ako vytvoriť obrazpozadia v html na celej obrazovke. Za účelom pristane stránky, musíte pochopiť jednu pomerne dôležitý detail: to je dosť, len aby s prechodom pozadia alebo maľovať to plné farby, ale ak potrebujete vložiť obrázok na pozadí, nebude natiahnuť cez celú šírku monitora. Obraz bol pôvodne potreba vyzdvihnúť alebo si vytvoriť svoj vlastný dizajn s týmto rozšírením, v ktorom sa zobrazí stránka webu. Iba vtedy, keď obrázok na pozadí je pripravený, presuňte ju do priečinka s názvom «Obrázky». V ňom uložíme všetky použité obrázky, animácie a ďalšie grafické súbory. Tento priečinok by mal byť v koreňovom adresári so všetkými vašimi html súbormi. Teraz môžete prejsť na kód. Existuje niekoľko možností pre písanie kódu, ktorým bude pozadie zmeniť obraz.
- Napíšte atribút značky.
- Prostredníctvom štýlu CSS v HTML kóde.
- Napíšte štýl CSS do samostatného súboru.
Rovnako ako v HTML vykresľujte obrázok na pozadí, je to na vás, aleRád by som povedal niekoľko slov o tom, ako by to bolo optimálne. Prvá metóda písaním prostredníctvom atribútu značky už dlho bola zastaraná. Druhá možnosť sa používa vo veľmi zriedkavých prípadoch, len preto, že získate veľa rovnakého kódu. A tretia možnosť je najbežnejšia a najpresnejšia. Tu sú príklady značky HTML:
- Prvý spôsob, ako napísať atribút značky (body) vsúbor index.htm. Je napísaný v tejto forme: (body background = "folder_name / name_pictures.extension") (/ body). To znamená, že ak máme obrázok s názvom "Obraz" a rozšírenie JPG a pomenujeme priečinok ako "Obrázky", HTML kód bude vyzerať takto: (body background = "Images / Picture.jpg") ... (/ body) ,
- Druhý spôsob písania ovplyvňuje štýl CSS, ale je napísaný v tom istom súbore nazvanom index.htm. (telo = "pozadie: url (" ../ Images / Picture.jpg ")").
- A tretí spôsob nahrávania sa vykonáva v dvoch súboroch. Dokument s názvom index.htm tagu (hlava) je zaznamenaná je rad: (head) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ head). A v štýle s názvom style.css už napíšeme: body {background: url (Images / Picture.jpg ")}.
Rovnako ako v HTML, aby sme vytvorili obrázok na pozadí, sme sa rozobrali. Teraz musíte pochopiť, ako roztiahnuť obrázok na šírku celej obrazovky.
Spôsoby roztiahnutia obrazu pozadia na šírku okna
Predstavme si našu obrazovku ako percento. Ukazuje sa, že celá šírka a dĺžka obrazovky bude 100% x 100%. Potrebujeme natočiť obrázok na túto šírku. Pridajte do obrázka v súbore style.css reťazec, ktorý roztiahne obraz na celú šírku a dĺžku monitora. Ako sa píše v štýle CSS? Je to jednoduché!
telo
{
pozadie: url (Obrázky / Picture.jpg)
veľkosť pozadia: 100%; / * tento záznam je vhodný pre väčšinu moderných prehliadačov * /
}
Takže sme zistili, ako vytvoriť obrázok v pozadíhtml na celú obrazovku. Existuje aj spôsob zápisu do súboru index.htm. Aj keď je táto metóda zastaraná, je pre začiatočníkov potrebné ju poznať a pochopiť. V štítku (hlava) (štýl) div {background-size: cover; } (/ štýl) (/ head), to znamená, že vyberieme špeciálny blok pre pozadie, ktoré bude umiestnené po celej šírke okna. Vyskúšali sme 2 spôsoby, ako vytvoriť pozadie html na pozadí pozadia, aby sa obrázok v ľubovoľnom z moderných prehliadačov roztiahol na celú šírku obrazovky.
Ako vytvoriť pevný pozadie
Ak sa rozhodnete použiť obrázok akopozadia budúceho webového zdroja, stačí sa naučiť, ako to urobiť, aby sa neupadol na dĺžku a neznehodnotil estetický vzhľad. Stačí, ak chcete použiť malý doplnok na použitie kódu HTML. Musíte súbor style.css pridať vetu po pozadia: url (Images / picture.jpg "), pevné, alebo namiesto toho pridáva samostatný riadok - pozície:. Pevné týmto spôsobom, vaša tapeta bude stanovená v čase. prechádzať obsah na webe, uvidíte, že textové riadky sa pohybujú, ale pozadie zostáva na svojom mieste. Takže ste sa naučili, ako sa to robí html obrázok na pozadí, v niekoľkými spôsobmi.
Práca s tabuľkou v jazyku HTML
Mnohí neskúsení weboví vývojári, ktorým čelítabuľky a bloky často nerozumejú tomu, ako v html vytvoriť obrázok pozadia tabuľky. Rovnako ako všetky príkazy HTML a CSS, tento webový programovací jazyk je veľmi jednoduchý. A riešenie tohto problému bude písať niekoľko riadkov kódu. Mali by ste už vedieť, že písanie riadkových riadkov a stĺpcov je označené ako značky (tr) a (td). Ak chcete vytvoriť pozadie tabuľky ako obrázok, musíte do značky (tabuľky), (tr) alebo (td) pridať jednoduchú frázu s odkazom na obrázok: background = URL obrázka. Pre zrozumiteľnosť uvádzame niekoľko príkladov.
Tabuľky s obrázkom namiesto pozadia: príklady HTML
Nakreslite tabuľku 2x3 a vytvorte si obrázok na pozadí,uložené v priečinku "Obrázky": (pozri tabuľku background = "images / picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr ) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabuľka). Takže náš stôl bude namaľovaný na pozadí obrázku.
Teraz nakreslíme rovnakú tabuľku s rozmermi 2х3, alevložíme obrázok do stĺpcov 1, 4, 5 a 6. (tabuľka) (tr) (td pozadia = "Obrázky / Picture.jpg") 1 (/ td) / td) (/ tr) (td) (td background = "Obrázky / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg" /Picture.jpg")6(/td) (/ tr) (/ tabuľka). Po prezeraní vidíme, že pozadie sa zobrazuje iba v tých bunkách, v ktorých sme sa zaregistrovali, ale nie v celej tabuľke.
Stránka s viacerými prehliadačmi
Stále existuje taká veczdroj cross-browser webového zdroja. To znamená, že stránky stránky sa zobrazia rovnakým spôsobom v rôznych typoch a verziách prehliadačov. Súčasne musíte prispôsobiť HTML kód a štýl CSS pre potrebné prehliadače. Navyše v modernej dobe vývoja smartfónov sa mnohí weboví vývojári pokúšajú vytvoriť stránky, ktoré sú prispôsobené pre mobilné verzie, ako aj pre počítačové zobrazenie.
