Na, gerai... pats laikas nuspręsti, kieno fone atrodysime kvapą gniaužiančiai! O kur ta nuostabi žyma, atsakinga už šį verslą? Kokius atributus jis turi, paprastai tariant? Ir, svarbiausia, kaip sutalpinti visą mūsų grožį?
Trumpai tariant, yra daug klausimų! Ir yra tik vienas atsakymas. Na, tokios žymos išvis nėra! Dar nesupratau!
Kai kurie pavyzdžiai
V Pastaruoju metu viso ekrano slankikliai ir fonai tapo itin populiarūs apskritai, o ypač „plokščiasis“ stilius. Keletas kompromisų, susijusių su fono vaizdais. Grūdėtas nuo lėtos apkrovos, susisukęs arba ištemptas, apkarpytas horizontaliai arba apkarpytas vertikaliai, pritvirtintas nuo slinkimo, neatsižvelgiant į tai, kad jis integruotas į kitas elementų pozicijas. Štai keletas didelių įmonių svetainių, kuriose naudojami viso ekrano fono vaizdai, pavyzdžių.
Ekrano skiriamoji geba staliniams ir nešiojamiesiems kompiuteriams
Štai keletas kitų svetainių, kurias reikia patikrinti, sąrašai. Viena iš atsakymų į šį klausimą yra susijusi su ekrano skiriamąja geba. Galų gale, ekrano dydis vaidina didelį vaidmenį, kaip pristatomas jūsų darbas. Kalbant apie ekrano skiriamąją gebą, populiariausi sprendimai staliniams kompiuteriams, planšetiniams kompiuteriams ir konsolėms Šiaurės Amerikašiuo metu yra.
Bet nenusimink! Nėra etiketės ir nereikia! Tačiau mums žinomos dvi nuostabios deskriptoriaus savybės KŪNAS. Taigi susipažink su senu draugu!
Fonas, arba kaip paprastai vadinamas fonas išvertus į anglų kalbą reiškia fone. Todėl nėra nieko lengviau prisiminti du jo garbei sukurtus atributiką. vienas - fone, ir kitas - bgcolor.
Tai pasakytina apie fono vaizdus ir standartinius vaizdo elementus. Dėl to standartinio dydžio vaizdai atrodo šiek tiek neryškūs, kai žiūrima didelio tankio ekranuose. Žiniatinklio kūrėjai tai įveikia sukurdami dvigubai didesnius už įprastus vaizdus vaizdus ir rodydami juos perpus mažesnio dydžio.
Galutinis rezultatas yra tokio pat dydžio vaizdas, kokio norėjote, bet jis puikiai atrodo tiek standartiniuose, tiek didelio tankio ekranuose. Tai gali padaryti tikrai didelius vaizdus, kai kalbate apie viso ekrano foną. Jei nesate atsargūs, tai gali padidinti puslapio įkėlimo dydį ir kartu atsisiuntimo greitį. Tačiau geras dalykas Fonų dalykas yra tas, kad jūsų įrenginys paprastai jų negauna, nebent jie matomi ekrane.
Taigi kuo jie skiriasi? Kokias galimybes jie turi? Ir, svarbiausia, kas mums bus naudinga?
Pradėkime nuo paprasčiausio - bgcolor. Šis atributas yra atsakingas už fono spalvą. Galite pakeisti bet kurią reikšmę tiesiogine arba skaitine spalvos verte, ir jūsų fonas bus spalvotas kaip stebuklingas.
Na, pavyzdžiui, galime atidaryti savo šabloną arba bet kurį anksčiau sukurtą failą ir pabandyti užpildyti puslapį mėgstama spalva. Atsidarysiu savo puslapį index.html v Užrašų knygelė(Notepad) ir atlikite šiuos pakeitimus:
Taigi, jei į medijos užklausą įdedate foną, kurio puslapis niekada nepakviečia, tas vaizdas niekada nebus gautas. pralaidumas. Buvo atlikti keli didesni tyrimai, kuriuose buvo aptarta, kaip puslapio įkėlimo laikas veikia pardavimą.
Lėtesnis įkėlimo laikas = nepatenkinti vartotojai = mažesni pardavimai. Taigi, kiek šis tobulas fono paveikslėlis kainuoja jūsų dizainui? Ir jei naudojate kelis fono vaizdus slankikliui arba fader, kaip didelis dydis pakankamai didelis, kad palaikytų įkėlimo laiką?
Sąrašas 11. index.html failą
Išsaugokime savo kūrinį tuo pačiu pavadinimu ir pažiūrėkime, kas atsitiks:
Aš mėlyname fone
Šis atributas nurodo ne paveikslėlio spalvą, o paveikslėlį, kuris turėtų būti dedamas kaip fonas arba, kaip sakoma, fono tapetai. Galite pasirinkti bet kokius tapetus, kuriuos pasakoja jūsų fantazija. Mano fantazija paskatino mane padaryti nuotrauką, kurioje esu su nauja striuke. Ir todėl daugiau nieko negalvodamas atidarau savo failą index.html ir atlikite šiuos pakeitimus:
Kitas svarstymas – ar pakartotinai naudoti tas pats fono vaizdas visoje svetainėje. Jei visuose ar net keliuose svetainės puslapiuose naudojate tą patį didelį fono paveikslėlį, galite sau leisti naudoti didesnę skiriamąją gebą, nes po pradinio įkėlimo jis bus išsaugotas jūsų lankytojo naršyklės talpykloje. Tačiau jei kiekviename puslapyje ar naujoje skiltyje naudosite skirtingą vaizdą, lankytojas turės atsisiųsti kiekvieną, o tai padidins puslapio įkėlimo laiką.
Sąrašas 12. index.html failą
Sveika! Labas pasauli! Sveiki žmonės! Susitikti!
Išsaugokite šį failą ir pažiūrėkite, ką turime
tai fono vaizdas!
Na, viena vertus, malonu matyti tiek daug protingi žmonės vienoje vietoje, bet is kitos puses...na kur tiek??? Tačiau anekdotai, galite suprasti, ką padarė atributas fone- jis tiesiog paėmė ir padaugino pirminį vaizdą, užpildydamas juo visą ekraną.
Panašiai, jei naudojate vieną fono vaizdą, akivaizdu, kad galite gauti didesnę skiriamąją gebą nei įkeldami kelis fono slankiklio vaizdus. Galbūt didžiausia įgyvendinimo dalis yra tai, ar jūsų svetainė yra statinio dydžio. Jei turite interaktyvaus išdėstymo svetainę arba svetainę, kuri naudoja medijos užklausas skirtingoms struktūroms aptarnauti, turėsite skirtingus poreikius.
Fiksuoto dydžio svetainėje nerimaujate dėl fono vaizdo kraštų, palyginti su ekrano dydžiu. Ar galite išlaikyti vaizdą centre, kairėje arba dešinėje? Ar jis ištemps, nukirps, išbluks ar pasikartos? Jei jis išsitempia, ar priekinio plano elementai vis dar įskaitomi?
Bet ar galima įkelti vieną nuotrauką, bet visame ekrane? Iš esmės, tu gali! Ir mes su tuo susitvarkysime dabar. Vienintelis dalykas, į kurį reikia atsižvelgti, yra vaizdo dydis. Taigi, kai ekrano skiriamoji geba yra 800 x 600, laisvos vietos vaizdui, atėmus visas viršutines ir apatines plokštes, lieka 781 x 476 pikseliai. Paimkime šį vaizdą.
Skystoje svetainėje turite atsižvelgti į visas fiksuoto dydžio svetainės problemas visais įmanomais ekrano dydžiais. Ar fono vaizdas judės kartu su turiniu? Ar jo dydis bus pakeistas, kad susitrauktų ar išsitemptų? Jei jis pasikeis į mažą ar didžiulį, ar jis atrodys juokingai, ar bus tuščių laukų?
Fono vaizdų kūrimas keliems konkrečių dydžių ekranams gali būti puikus darbas, bet tai reiškia, kad galite išsaugoti svetainę taip, kaip norite. Kita atsakymo į klausimą dalis yra suprasti, kaip tai padarysite. Šiuo metu yra bent pusantro tuzino būdų, kaip įdiegti viso ekrano fono vaizdą arba slankiklį. Be papildinių ir iš anksto sukurtų slankiklių, kurie tuo už mus pasirūpina, yra ir tokių paprasti metodai.
Taigi vėl atidarau programą Adobe Photoshop, renkuosi nuotrauką su jūros atvaizdu, koreguoju jos matmenis iki norimų 781 x 476, optimizuoju žiniatinklio ir išsaugokite pavadinimu fontsea.jpg savo aplanke nuotrauka. Na, tada aš einu pramintu keliu: atidarau failą index.html ir atlikite šiuos pakeitimus:
Sąrašas 13. index.html failą
Sveika! Labas pasauli! Sveiki žmonės! Susitikti!
Kiekvienas iš šių metodų turi savo stipriąsias ir silpnąsias puses, tačiau turėsite nuspręsti, kuris iš jų bus geriausias kiekvienai konkrečiai svetainei. Speciali pastaba dėl slankiklio įgyvendinimo. Idėja yra palaukti, kol puslapis bus įkeltas, kol bus įkelti fono slankiklio vaizdai. Daugelyje projektų fono vaizdas gali būti atskirtas nuo priekinio plano elementų. Dažnai naršymo ir pagrindiniuose turinio blokuose yra pakankamai vizualiai atskirtas nuo fono paveikslėlio, kad galėtumėte lanksčiau atrodyti fono paveikslėlyje.
Išsaugokite dar kartą ir pamatysite rezultatą
Ir štai – jūra! Žaidžia, triukšmauja lauke...
Gražu, ar ne? Dabar, jei ši ekrano skiriamoji geba buvo nustatyta visiems vartotojams! Bet, deja! Kai tik padidinu skiriamąją gebą iki 1152 x 864, gaunamas toks vaizdas:
Deja, žiūriu į šį atspindį...
Jei vaizdas yra šiek tiek suspaustas, šiek tiek nupjautas arba šiek tiek pasislinkęs į kairę ar dešinę, tai neturi įtakos bendram dizainui. Tačiau kartais fono vaizdas yra integruotas į dizainą ir reikalauja tam tikro dydžio bei padėties. Arba tarkime, kad turite veidą arba veidą, kuris atrodo visiškai netinkamas, jei jį pajudina arba uždengia priekinio plano elementas. Tokiais atvejais turite daug mažiau lankstumo nustatydami fono paveikslėlio dydį. Sprendimą iš esmės lemia dizainas, ir jūs darote viską, kad jis tiktų.
Sutikite, tai visai ne tai, ko norėjote. Žinoma, grožis reikalauja aukų, o tuos vartotojus, kurių nuomonė apie ekrano skiriamąją gebą nesutampa su jūsų, galite drąsiai atmesti arba pakviesti pasirinkti nustatymus, kuriuos jiems nurodote. Galų gale, jūs turite nuspręsti.
Nors yra grožis be aukos. Kuris puikiai atrodys visuose monitoriuose be išimties. Ir aš pasistengsiu jums padėti šiuo klausimu. Kaip matote, fonas užpildytas piešinio kopijomis. Ir šia nuosavybe naudotis nėra nuodėmė. Juk galime padaryti vieną nedidelį paveikslėlį, kuris užims daug mažiau atminties nei didelis, ir užpildyti juo visą ekraną. Čia pagrindinis triukas yra pabandyti, kad šis paveikslas būtų „vientisas“. Tai yra, kad jungtys tarp gretimų vaizdų nebūtų matomos. Ir tam mums vėl reikia nepakeičiamos programos Adobe Photoshop.
Dažnai „reikia“ yra medijos užklausų naudojimas, siekiant pateikti tą patį vaizdą kelių dydžių, kad tiktų skirtingiems ekranų dydžiams. Atsižvelgiant į visas šias ekrano skiriamąsias gebas, įkėlimo laiką ir įgyvendinimą, kaip pasirinkti tinkamą fono vaizdo dydį, kad vartotojas pasitikėtų savimi? Daugelis kūrėjų fotografuoja kažkur per vidurį, pasirinkdami pakankamai didelį vaizdo dydį, kad negautumėte pikselių, pakankamai mažą, kad būtų galima greitai įkelti ir tinkamai veikti, ir tokiu santykiu, kad būtų kuo mažiau iškraipymo, ištempimo ar apkarpymo.
Žinoma, galite per daug nesivargti ir imti paruoštas fono nuotraukas iš interneto, kur jų tiesiog knibžda. Norėdami tai padaryti, galite įvesti bet kurį paieškos variklį ( www.yandex.ru, www.apport.ru, www.ramber.ru ir daugelis kitų) branginami žodžiai (fonas, fono tapetai, fone) ir jūsų paslaugoms atsiras dešimtys ir dešimtys svetainių, kurios dėl Dievo meilės yra pasirengusios jums suteikti šiuos pagrindus, o kas ypač malonu, visiškai nemokamai.
Tik vėliau nenustebkite, kad lygiai tokį patį foną rasite ir kitose svetainėse. Taigi, jei norite ką nors padaryti, nors ir snarglio, bet SAVO, siūlau pasiraitoti rankoves ir kibti į reikalus. Be to, tai labai jaudinanti veikla, nuo kurios tiesiog sunku atitrūkti.
Ir tai mes ketiname daryti dabar.
Kurdami pirmuosius WEB puslapius naudojome paprastą foną, žymėje nurodydami jo spalvą
naudojant atributą bgcolor. Tačiau fonas gali būti ne tik paprastas, bet ir paveikslo ar nuotraukos pavidalu. Šiuo atveju, kaip ir bet kuris kitas vaizdas, fono eskizas turi būti GIF, JPEG arba PNG formatu. Norėdami žymoje nurodyti fono paveikslėlį naudojamas fono atributas, kurio reikšmė yra vaizdo failo pavadinimas arba URL.Į failą other.html kaip WEB puslapio foną įterpkime nugalėtojas.jpg kontūrą, kurį ankstesniame eksperimente išsaugojome WEB aplanke.
Iš other.html failo pašalinkite HTML elementą.
Pridėkite prie pradžios žymos pabaigos
stiliaus background-image:url("laimėtojas.jpg"); kad žyma gavo tokią formą:Lange pamatysite, kad dabar šio puslapio fonas yra ne vientisai mėlynas, kaip anksčiau, o vaizdas iš mūsų įkeltos nuotraukos, įrašytos į winner.jpg failą. Ir šiame visiškai naujame fone rodomas dokumento tekstas ir image.gif kontūrai. Tačiau atminkite, kad nepašalinome atributo bgcolor iš žymos
. Tokiais atvejais, kai žyma nurodomi ir bgcolor, ir background – naršyklė dažniausiai teikia pirmenybę fono atributui, bet jei fono paveikslėlio neįmanoma įkelti, naudojamas atributas bgcolor.Tinklalapio fonas su CSS
Kitas fono apibrėžimo būdas yra CSS pakopinio stiliaus lapo kalba. Kaip sekasi Šis momentas Pamatysite, kad šis metodas suteikia tinklalapio kūrėjui daug daugiau galimybių valdyti fono vaizdą. Kad būtų lengviau su jais susipažinti, mes įterpsime nugalėtojas.jpg eskizą kaip antrojo mūsų WEB svetainės WEB puslapio foną, išsaugotą list.html faile, naudodami Cascading Style Sheets kalbą.
Anksčiau mes nustatydavome teksto išvaizdą pirmame žiniatinklio puslapyje naudodami pakopinio stiliaus lapo kalbą, nurodydami norimus stilius kaip stiliaus atributo reikšmes žymoje.<р>. Tačiau yra ir kita, labiau pageidaujama stilių apibrėžimo parinktis, kai stilių aprašymas yra WEB dokumento antraštėje.
… atidarymo žymoje turi turėti tokią formą:Įterpkime šią žymą į failo list.html HTML kodą.
Po elemento įterpkite tuščią eilutę list.html faile
HTML elementas turėtų atrodyti taip:
Išsaugokite failą list.html ir atidarykite jį naršyklės programoje. Pamatysite, kad anksčiau nustatytas spalvotas fonas buvo pakeistas atvaizdu iš failo winner.jpg, o dokumento tekstinis turinys dabar rodomas naujame fone.
Jei naujame fone tekstas sunkiai matomas, pakeiskite jo spalvą naudodami žymos teksto atributą
, pvz., .Kai peržiūrite dabartinį dokumentą naudodami vertikalią slinkties juostą, pamatysite, kad fono vaizdas kartojasi puslapio apačioje. Jei monitoriaus skiriamoji geba nustatyta į 1024 x 768 arba didesnę, pasikartojimas bus rodomas dešinėje. Visais atvejais, kai fono paveikslėlio dydis yra mažesnis nei dabartinio puslapio dydis, naršyklė pagal numatytuosius nustatymus pakartoja eskizą vertikaliai ir horizontaliai. Bet jūs galite liepti žiūrovui nekartoti eskizo, kitaip tariant, rodyti jį tik vieną kartą. Norėdami tai padaryti, naudokite ypatybę background-repeat su reikšme no-repeat: background-repeat: no-repeat.
Įterpkite nurodytą ypatybę į failo list.html HTML kodą taip, kad elementas gavo tokią formą:
Fono atkūrimas WEB (html) puslapyje
Dabar naršyklės lange fono eskizas užima tik dokumento viršų. Apačia ir galbūt dešinė pusė aukščiausia raiška monitorius užpildytas vienspalviu fonu, kurį nustatėte anksčiau.
Fono kartojimo ypatybė taip pat gali turėti šias reikšmes:
kartoti- fonas kartojasi tiek horizontaliai, tiek vertikaliai; ši reikšmė nustatyta pagal numatytuosius nustatymus;
kartoti x- fonas kartojamas tik horizontaliai;
kartoti- fonas kartojasi tik vertikaliai.
Fono paveikslėlio padėtį puslapyje galima pakeisti naudojant atributą background-position. Šios charakteristikos reikšmės yra raktiniai žodžiai, apibūdinantys vaizdo padėtį vertikaliai - viršuje (viršuje), centre (centre), apačioje (apačioje) ir horizontaliai - kairėje (kairėje), centre (centre), dešinėje (dešinėje) . Pirmasis turėtų būti vertikali padėtis. Pavyzdžiui, fono padėtis: centre centras sulygiuos miniatiūrą su puslapio centru tiek horizontaliai, tiek vertikaliai.
Prie failo list.html kūno elemento parametrų aprašymo pridėkite ypatybę background-position: centre center. Elementasšiame faile turėtų būti tokia forma:
Failo list.html HTML kodas turėtų atrodyti taip: