Esimene tekst

Teine tekst

HTML-is pole saidi tausta määratud, see on kirjutatud CSS-stiile, kuid see on vaid teoreetiline formaalsus. Nüüd uurime, kuidas seda tausta määrata.

Taust veebisaidi või eraldi ploki jaoks

Kuna selle eesmärgi saavutamiseks vajame css-faili, peame selle looma ja html-iga ühendama. Sellest on kirjutatud aastal. Pärast seda võite alustada tööd. Esiteks peate otsustama, millele soovite tausta seada. Kui terve leht tervikuna, saate seda teha järgmiselt:

Korpus (taustavärv: valge;)

See tähendab, et pääseme juurde kehasildile, mis esindab kogu meie lehte. Taustavärvi määramiseks kasutage atribuuti background-color. Aga mis siis, kui peate taustaks määrama mustri, mitte ühevärvilise värvi? Siis peaksite selle kirjutama nii:

Keha (taustapilt: url (tee pildi juurde. pildilaiend) )

Selguse huvides teen ettepaneku vaadata kõike üksikasjalikumalt näite abil. Selleks kasutan seda pilti:

Näiteks taustapilt: url(comp.png) . Selles näites määrame taustapildi nimega comp (nii ma seda nimetasin) png-vormingus, mis asub css-failiga samas kaustas.
HTML-is loon CSS-i atribuutide toimimise demonstreerimiseks konkreetsete mõõtmetega kohandatud ploki.

Ja siin on selle stiilid:

#ct( Taustapilt: url(comp.png); laius: 600px; kõrgus: 400px; )

Saime järgmist:

Miks nii? Fakt on see, et vaikimisi kordab brauser pilti nii palju kordi, et plokk täielikult täita. Mõnikord on see vajalik, näiteks õmblusteta mustrite kasutamisel, kuid meie puhul peaks pilt olema üks. Õnneks saab seda väga lihtsalt hallata.

Korda tausta

Kui teil on taustaks pilt, siis vaikimisi korratakse seda horisontaalselt ja vertikaalselt, et täita kogu lehe ruum. Selle eemaldamiseks kasutage atribuuti background-repeat ja selle no-repeat väärtust. Samuti on järgmised väärtused:

• Korda-x – korda ainult horisontaalselt
• Repeat-y – ainult vertikaalne

Lisame oma graafilise tausta omadused:

Background-repeat: no-repeat;

positsioon

Tausta asukoha atribuut määrab asukoha, kuhu pilt paigutatakse. Siin on määratud kaks väärtust – horisontaalselt ja vertikaalselt. Näited: tausta asend: parem alumine – asukoht paremas alanurgas, ülemine vasak – alumises ülanurgas (ja nii vaikimisi), 250px 500px – nihe vasakult ülemine nurk paremale 250 piksli võrra ja alla 500 piksli võrra.

Vaatame näiteid paremini:

Tausta asend: üleval paremal;

Pilt liigub ülemisse paremasse serva. Panin klotsile ka kollase tausta, et selle servad oleks näha.

taustapositsioon: 50% 50%;

Pilt näis täpselt oma ploki keskel. Jah, jah, see on võimalik ka tänu positsiooni protsentuaalsele salvestamisele.

taustapositsioon: 70% 20%;

Tausta on nihutatud 70% horisontaalselt ja 20% vertikaalselt.

Samuti on lubatud määrata negatiivne positsiooni väärtus pikslites. Seda saab teha näiteks siis, kui kasutate suurt spraiti pilti ja peate selle plokki panema õige osa see sprite.

Lukustage taust

Mulle meeldib väga ka üks omadus nimega background-attach . Sellel on ainult kaks väärtust ja esimene on vaikeväärtus (kerimine). See tähendab, et lehte kerides kerib ka taust ja kui kasutad pilti ilma kordamiseta, siis lõpuks jõuab see kokku ja on lihtsalt ühevärviline.

Selle vältimiseks on määratud background-attachment:fix ja nüüd on meie taust turvaliselt paigas. Seda saab võrrelda sellega, kuidas määrata plokile fikseeritud asukoht, et see kerimisel lehelt ei kaoks.

Kogu selle headuse lühendatud versioon

Oleme arutanud paljusid omadusi, mis võimaldavad teil tausta luua, kuid kui te neid kõiki kasutate, on tulemuseks tülikas salvestus. Neid on väga elegantne lahendus. Taustaomadus võimaldab kirjutada tühiku eraldatuna vajalikud sätted selles järjekorras:
Taust: värvilise pildi kordustihvti asukoht;
Ja nüüd saab kõike kirjutada nii:

Taust: kollane url(comp.png) no-repeat 20% 100px;

Kui mõnda omadust ei ole vaja defineerida, siis jäetakse see lihtsalt välja (meie puhul me tausta-manust ei kirjutanud).

Palju tausta

Mida teha, kui vajate mitut taustapilti? See juhtub, mida saate teha? Tänapäeval toetab CSS seda funktsiooni. Proovime ka. Võtame selle ikooni

Ma nimetasin seda sülearvutiks.

Ja siin on kood mitme telefoni sisestamiseks:

Taust: url(comp.png) kordusteta 20% 100px, url(laptop.png) kordusteta 50% 50%; taustavärv: kollane;

Nagu näete, peate lihtsalt esimese pildi järele panema koma ja sisestama teise pildi sätted. Sel juhul on parem ühtne värv eraldi määrata.

Samamoodi saate salvestada nii palju pilte, kui soovite, kuid ärge üle pingutage – liiga palju graafikat pole eriti hea.

Siinkohal tahaksin selle artikli lõpetada. Taustaga saab teha palju muud huvitavat, ma üritan neist edaspidi kirjutada (ja midagi olen juba kirjutanud - näiteks). Edu teile selle kinnisvaraga tutvumisel.

Tere kõigile! Sinu alandlik sulane on sinuga ühenduses portsjoniga kasulikku ja praktiline materjal teemal, kuidas veebisaidile tausta seada. See on html-paigutuse algus ja siin demonstreerin näitega selgelt, kuidas seda teha ilus taust saidi jaoks, mis kindlasti köidab Interneti-kasutajat ja lisab originaalsust.

Kui märkasite, kasutab enamik Interneti-ärimehi oma müügi- ja tellimislehtedel ainulaadne taust. Täna analüüsime selle protsessi tehnilist komponenti.

Nii et kõigepealt vajame loomulikult pilti. IN välismaist Internetti on üks väga hea sait, kust saab erinevaid tasuta alla laadida pildid veebisaidi taustaks. Neid on seal lihtsalt tohutult palju. Selle saidi nimi on Peened mustrid.

Google'i otsingumootorite loendis ilmub see esimesel kohal, seega soovitan seda töötamiseks. Samuti võite leida suur hulk teistel saitidel, kui sisestate otsingumootorisse näiteks "taustapildi mustrid", "laadige saidi taustapilt alla" jne.

Kui teil pole inglise keelega probleeme, saate sellest ilma raskusteta aru.

Selles artiklis olen valinud teema ja seda nimetatakse tweediks. Saate selle alla laadida.

Nii näeb see veebisaidil välja väikeses versioonis

Kõigepealt loome uus dokument programmis

Ja enne muutmist salvestage see kindlasti näiteks nime alla index.html ja looge arvutis kaust, näiteks saate luua kausta "Minu sait" ja panna meie indeksifail(index.html).Parem on luua kaust inglise keel, et ei tekiks segadust brauseris ja saidi ebaõiget kuvamist.

Lisaks peate põhikaustas "minu sait" looma veel kaks alamkausta, ühte paigutame kõik oma pildid ja seda nimetatakse "piltideks" ja teise nimeks "CSS" (kaskaadstiil lehed) ja asetage fail sinna stiil.css

Nüüd saame oma dokumendiga töötada. Järgmise sammuna peame tooriku sisestama html kood, nn põhiraam, millest kõik algab. Saate selle otse alla laadida. Järgmisena kopeerime kõik sellest failist ja edastame selle oma programmifaili. Lõpptulemus peaks olema umbes selline

Failinime kõrval näete punast disketi. Seega, kui see on punane, tähendab see, et faili pole salvestatud, klõpsake kindlasti salvestamisnupul, et diskett muutuks siniseks.

IN pealkirja silt saate muuta dokumendi pealkirja, näiteks saate muuta selle "Minu esimene veebileht". Ja veenduge, et teie leht oleks kodeeringus salvestatud UTF-8

Vastasel juhul, kui on erinev kodeering, näiteks Windows-1251, kuvatakse dokumendi tekst brauseris hieroglüüfides. Saate muuta kodeeringut programmi tööriistariba jaotises "Kodeeringud – Utf-8 kodeerimine (ilma BOM-ita)".

Ja ärge unustage salvestada iga meie toimingut.

Nüüd alustame oma dokumendi tausta loomist. Ütlen kohe, et kõik meie toimingud veebilehe kujundamisel toimuvad CSS-i kaskaadlaadilehtede abil, see tähendab, et loome raami html-is ja toome selle ilus stiil ja vaatame seda CSS-i abil.

Nii õpetate endale toimingute õiget järjekorda. Ärge seiske otse sisse html dokumenti Kui te ei soovi stiilidega tegeleda, on parem panna need eraldi dokumenti.

Et seda teha meie Notepad programm++ loome veel ühe faili ja nimetame selle Style.css-iks ning salvestame uude css kaust, mis tuleb sisse jagatud kaust"Minu sait"

Suurepärane! Selleks, et meie brauser lehte õigesti kuvaks, peame ühendama stiililehe meie html-dokumendiga. Seda tehakse järgmiselt

Sisestame otse kogu ülaltoodud rea. Selle joonega ühendame oma stiililehe.
Nüüd määratleme stiililehe kaudu oma kehasildi taustpildi. Selleks loome dokumendis style.css järgmine struktuur(lihtsalt võtke see ja kirjutage see programmi koodi)

Lubage mul siin veidi selgitada. Taustaatribuudil on palju väärtusi, millest üks on background-repeat, mis vastutab meie veebidokumendi taustapildi venitamise eest.

TAUST-KORDUS:

REPEAT //(venitada horisontaalselt ja vertikaalselt) REPEAT-X // (venitada ainult horisontaalselt) REPEAT-Y //(venitada ainult vertikaalselt) NO-REPEAT //(ei korda taustapilti)

Meie puhul kordame oma väikest pilti nii vertikaalselt kui ka horisontaalselt. Selle tulemusena on kogu leht meie pildiga täidetud. See näeb brauseris välja selline:

Samuti tegin spetsiaalselt teie jaoks valiku saite, kust saate saidile ilusa tausta alla laadida

Kaasaegsed brauserid võimaldavad teil elemente lisada suvaline arv taustapildid, loetledes iga tausta parameetrid, eraldades need komadega. Piisab, kui kasutada universaalset tausta omadust ja määrata sellele kõigepealt üks taust ja teine, eraldades komaga.

Kuidas venitada tausta kogu akna laiusele?

Tausta skaleerimiseks kasutage atribuuti background-size, määrake selle väärtuseks 100%, siis hõivab taust kogu brauseriakna laiuse. Brauseri vanemate versioonide puhul peaksite kasutama konkreetseid atribuute koos eesliidetega, nagu on näidatud näites 1.

Kuidas lisada veebilehele taustapilti?

Veebilehele taustapildi lisamiseks määrake stiili URL-i väärtuse sees pildi tee tausta omadused, mis omakorda lisatakse kehavalijasse.

Kas on võimalik teha animeeritud tausta?

Animatsioonist piisab tugev vastuvõtt, mis suudab ellu äratada mis tahes dokumendi, seega pole üllatav, et see on saavutanud tohutu populaarsuse Flash tehnoloogia, mis lisab veebilehtedele multikaid, mis on samuti interaktiivsed. Graafiline formaat Toetab ka GIF lihtne animatsioon kaadrite järjestikuse muutmise teel. Nii et kasutades pilti selles vormingus on võimalik animeerida mitte ainult üksikud pildid, aga ka veebilehe või konkreetse elemendi taust.

Kõigepealt peate looma animeeritud pildi GIF-vormingus milleks saate programmi kasutada Adobe Photoshop või muu selleks otstarbeks sobiv. Samuti on olemas valmis animeeritud failide teegid, mida saab kasutada taustapildina. Järgmisena lisatakse pilt taustaks, kasutades tausta stiili atribuuti, nagu on näidatud näites 1.

Kuidas panna taustapilt lehe alumisse paremasse nurka?

Taustapildi asukoha juhtimiseks lehel kasutatakse tausta-positsiooni stiili atribuuti, mis määrab samaaegselt pildi horisontaalsed ja vertikaalsed koordinaadid. Taustapildi kordamise tühistamiseks kasutage atribuuti background-position väärtusega no-repeat .

Kuidas vältida tausta kordumist?

Vaikimisi korratakse taustpilti horisontaalselt ja vertikaalselt, moodustades mosaiigi kogu veebilehe välja ulatuses. See taustakäitumine pole aga alati vajalik, eriti ühe pildi puhul, nii et abi tuleb taustastiili atribuudile lisatud mittekorduv väärtus.

Kuidas saan panna tausta korduma ainult vertikaalselt?

Tausta kordamine on tavaliselt vajalik veebilehe elemendi või akna kõrgusega seotud dekoratiivsete joonte või gradientide loomiseks. Sellistel juhtudel annab tausta vertikaalne kordamine ühtlase pildi, olenemata elementide suurusest. Ainult alguses peaksite veenduma, et taustpilt kordub õmblusteta.

Paljud algajad küljenduskujundajad, kes just veebisaitide loomise olemusse süvenevad, mõtlevad sageli, kuidas muuta taustast html-i pilt. Ja isegi kui mõned inimesed saavad sellest ülesandest aru, tekivad probleemid ikkagi, kui pilti venitatakse üle kogu monitori laiuse. Samas soovin, et sait oleks kõigis brauserites võrdselt kuvatud, seega peab olema täidetud brauseriülene nõue. Tausta saab määrata kahel viisil: kasutades CSS-stiili. Igaüks valib endale kõige rohkem parim variant. kindlasti, CSS-stiil palju mugavam, kuna selle kood salvestatakse eraldi faili ja see ei võta saidi põhimärgendites täiendavaid veerge, kuid kõigepealt kaalume lihtsat meetodit pildi installimiseks saidi taustale.

Põhilised HTML-sildid tausta loomiseks

Liigume siis edasi küsimuse juurde, taust html-is kogu ekraanil. Et sait ilus välja näeks, peate mõistma ühte asja: oluline detail: piisavalt lihtne teha gradiendi taust või värvige see ühevärviliseks, kuid kui teil on vaja pilt taustale sisestada, ei venita see kogu monitori laiuses. Esialgu peate valima pildi või tegema ise kujunduse laiendiga, milles teie saidi leht kuvatakse. Alles pärast taustapildi valmimist teisaldage see kausta nimega "Images". Selles salvestame kõik kasutatud pildid, animatsioonid ja muu graafilised failid. See kaust peaks olema juurkataloogis koos kogu teiega html failid. Nüüd saate koodi juurde liikuda. Koodi kirjutamiseks, mis muudab tausta pildiks, on mitu võimalust.

1. Kirjutage sildi atribuut.
2. CSS-stiili kaudu HTML-koodis.
3. Kirjutage CSS-stiil eraldi faili.

Kuidas HTML-is taustapildiks teha, on teie otsustada, kuid tahaksin öelda paar sõna selle kohta, kuidas see kõige optimaalsem oleks. Esimene meetod, mis kasutab sildi atribuudi kaudu kirjutamist, on juba ammu aegunud. Teist võimalust kasutatakse väga harvadel juhtudel, ainult seetõttu, et saadakse palju sama koodi. Ja kolmas võimalus on kõige levinum ja tõhusam. Siin HTML-i näited sildid:

1. Esimene viis kirjutamiseks on faili index.htm atribuudi (body) kaudu. See on kirjutatud järgmisel kujul: (keha taust= "Kausta_nimi/Pildi_nimi.laiend")(/keha). See tähendab, et kui meil on pilt nimega “Pilt” ja JPG laiendus, ja andsime kaustale nimeks "Images", siis näeb HTML-koodi sisestus välja selline: (body background="Images/Picture.jpg")… (/body).
2. Teine salvestusmeetod mõjutab CSS-stiili, kuid on kirjutatud samasse faili nimega index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Ja kolmas salvestusmeetod on tehtud kahes failis. Dokumendis nimega index.htm kirjutatakse järgmine rida: (head)(link rel="stylesheet" type="text/css" href="Tee_CSS_faili")(/head). Ja stiilifaili nimega style.css kirjutame juba: body (taust: url(Images/Picture.jpg")).

Oleme arutanud, kuidas HTML-is taustapilti teha. Nüüd peate mõistma, kuidas pilti kogu ekraani laiuses venitada.

Taustapildi venitamise viisid akna laiuseks

Kujutagem ette oma ekraani protsentides. Selgub, et kogu ekraani laius ja pikkus on 100% x 100%. Peame pildi selle laiuse venitama. Lisame faili style.css pildikirjele rea, mis venitab pildi kogu monitori laiuse ja pikkuse ulatuses. Kuidas see CSS-stiilis kirjutatud on? See on lihtne!

taust: url (Images/Picture.jpg")

tausta suurus: 100%; /* see kirje sobib enamikule kaasaegsed brauserid */

Nii mõtlesime välja, kuidas teha html-vormingus taustaks pilt, mis täidaks kogu ekraani. Samuti on võimalus kirjutada faili index.htm. Kuigi see meetod on aegunud, on algajatele vaja seda teada ja mõista. Märgendis (head)(style) div ( background-size: cover; ) (/style) (/head) tähendab see kirje, et eraldame tausta jaoks spetsiaalse ploki, mis asetseb kogu plaadi laiuses. aken. Vaatasime 2 võimalust veebisaidi tausta tegemiseks html pilt nii et pilt ulatuks igas kaasaegses brauseris kogu ekraani laiuses.

Kuidas teha fikseeritud tausta

Kui otsustate kasutada pilti tulevase veebiressursi taustana, peate lihtsalt välja selgitama, kuidas muuta see liikumatuks, et see ei veniks pikkuses ega rikuks esteetilist välimust. Selle väikese täienduse kirjutamine abiga on piisavalt lihtne. Peate lisama faili style.css ühe fraasi pärast seda, kui taust on fikseeritud: url(Images/Picture.jpg") või selle asemel lisage semikoolonile eraldi rida – position:fix. Seega taustapilt muutub liikumatuks. Saidi sisu sirvides näete seda tekstistringid liikuda, kuid taust jääb paigale. Nii olete õppinud mitmel viisil HTML-i taustpilti tegema.

HTML-i tabeliga töötamine

Paljud kogenematud veebiarendajad ei saa tabelite ja plokkidega silmitsi seistes sageli aru, kuidas HTML-is tabeli taustaks pilti teha. Nagu kõik CSS-stiilid, on ka see veebiprogrammeerimiskeel üsna lihtne. Ja sellise probleemi lahendus oleks kirjutada paar rida koodi. Peaksite juba teadma, et tabeli ridade ja veergude kirjutamist nimetatakse vastavalt (tr) ja (td) siltideks. Tabeli tausta tegemiseks pildi kujul tuleb lisada (tabel), (tr) või (td) sildi juurde lihtne fraas, mis näitab pildi linki: background = pildi URL. Selguse huvides toome paar näidet.

Tausta asemel pildiga tabelid: HTML-i näited

Joonistame 2x3 tabeli ja teeme selle taustaks kausta “Pildid” salvestatud pildi: (tabeli taust = “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) (/tabel). Nii maalitakse meie laud pildi taustale.

Nüüd joonistame sama plaadi mõõtmetega 2x3, kuid sisestame pildi veergudesse numbritega 1, 4, 5 ja 6. (tabel)(tr)(td background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = "Images/Picture.jpg")4(/td) (td background = "Images/Picture.jpg") 5( /td) (td background = "Images/Picture.jpg")6(/td) (/tr) (/tabel). Pärast vaatamist näeme, et taust kuvatakse ainult nendes lahtrites, millesse oleme registreerunud, mitte kogu tabelis.

Saidi brauseritevaheline ühilduvus

On olemas ka selline asi nagu veebiressursi brauseriülene ühilduvus. See tähendab, et saidi lehti kuvatakse võrdselt õigesti erinevad tüübid ja brauseri versioonid. Sel juhul peate kohandama HTML-koodi ja CSS-i stiili vajalikud brauserid. Pealegi sisse moodsad ajad nutitelefonide arendamisel püüavad paljud veebiarendajad luua selleks kohandatud veebisaite mobiiliversioonid ja arvutivaate all.