Hyvät taittotunnit. Mukautuva asettelu: oppitunteja vai suoraan taisteluun? Getting Better - CSS

Kirjoittajalta: hei ystävät! Kuten ihmisillä, myös verkkosivustoilla on oma luuranko, joka näkyy niiden koodissa. Tavallinen käyttäjä Internetissä "kävellessä" ei todennäköisesti katso HTML-koodia. Mutta eivät taittosuunnittelijat - he ovat aina kiinnostuneita katsomaan muiden ihmisten töitä. Siistin, tasapainoisen ja kaikilla selaimilla toimivan koodin luomisessa on taidetta. Tänään puhumme sinulle siitä, kuinka se ymmärretään, tai toisin sanoen kuinka oppia nopeasti ja tehokkaasti verkkosivun ulkoasu.

Mistä layout alkaa?

Verkkosivuston ulkoasu on kuvaus sen visuaalisesta komponentista ohjelmakoodin avulla. Samalla sivuston on näytettävä ja toimittava oikein kaikilla selaimilla (yhteensopiva eri selaimilla). Verkkosivujen suunnittelun opettelu alusta alkaen tulisi aloittaa PSD-asettelun luomisella itse, vaikka teoriassa sen pitäisi olla web-suunnittelijan luoma.

Taittosuunnittelijan päätehtävänä on käsitellä hänelle tekstien, kuvien, luetteloiden jne. muodossa tuleva materiaali ja muuttaa se web-sivuiksi hyväksytyn web-suunnittelun perusteella.

Kuvittele kuitenkin, että olet eräänlainen "2-in-one"-taittosuunnittelija, ja jostain syystä jouduit taittelemaan sellaisen suunnittelijan sijaan, joka ei välitä ongelmistasi.

Jotta voit nopeasti oppia piirtämään asetteluja, riippumatta siitä, kuinka triviaalilta se kuulostaa, sinun on vain piirrettävä niitä paljon. Se auttaa sinua myös paljon katsomaan loputtomasti muiden ihmisten töitä. Kiinnitä samalla huomiota kaikkiin pieniin yksityiskohtiin, mitä värejä, liukuvärejä, fontteja, sisennyksiä jne. käytetään.

Ajan myötä alat tuntea itse, mikä näyttää kauniilta ja mikä ei. Heti alussa voit yksinkertaisesti ottaa ja kopioida esimerkiksi muiden käyttöliittymäelementtejä. Tämä saa sinut ajattelemaan, kuinka nämä elementit on rakennettu ja mistä ne on tehty. Ja silloin kauniit mallit eivät enää ole sinulle myyttisiä, koska tiedät kuinka luoda jotain samanlaista.

Työkaluja verkkosivuston asettelun luomiseen

Mitä tulee työkaluihin, monet web-suunnittelijat käyttävät Adobe Photoshopia käyttöliittymien luomiseen. Tällä ohjelmalla voit tehdä mitä haluat.

Jotkut käyttävät vain vektorigrafiikkaa ja käyttävät Adobe Illustratoria asettelujen luomiseen.
Ja vielä yksi editori, jota en ole kokeillut, mutta jonka huhutaan olevan varsin arvokas vaihtoehto yllä olevalle, on Sketch, mutta se toimii vain Mac OS:ssä.

Tavataan - HTML

Seuraava vaihe asettelun piirtämisen jälkeen on sen asettelu ja HTML-mallin luominen. HTML on kieli, jota käytetään dokumenttien merkitsemiseen Internetissä ja jota selaimet tulkitsevat, jotta se voidaan helposti näyttää asiakirjana.
HTML-merkinnän avulla merkitsemme, missä teksti, kuvat ja painikkeet näkyvät verkkosivulla ja missä järjestyksessä ne näkyvät vierekkäin. Tämän kielen pääkäsitteet ovat tagit, attribuutit, elementit ja entiteetit.

Perusverkkoresurssi ei ole muuta kuin joukko HTML-sivuja. Jos sivusto on staattinen, asettelun jälkeen saat itse asiassa sen lopullisen version, etkä vain mallia. Nykyään tällaiset sivustot ovat luonnollisesti erittäin harvinaisia. Kaikki nykyaikaiset web-sivut luodaan dynaamisesti, käyttämällä jonkinlaista palvelinpuolen logiikkaa, jonka joko kirjoitat itse tai käytät valmiita jonkinlaista CMS:ää (sisällönhallintajärjestelmä).

Ilman tätä palvelinlogiikkaa suurin osa päivittäisistä verkkopalveluista, joihin olemme niin tottuneet, eivät olisi mahdollisia. Mitä tulee HTML:ään, se on täysin yksinkertainen kieli.

RuNetissä on valtava määrä maksullisia oppitunteja verkkosivustojen suunnittelusta ja muista materiaaleista, joissa on kunnollinen koulutuspohja. Mielestäni tämän kielen oppiminen yksin ei ole ongelma.

Getting Better - CSS

Heti kun hallitset HTML:n perusteet, voit aloittaa heti CSS:n (Cascading style sheets) oppimisen, jonka avulla voit määrittää fontteja, värejä ja yksittäisten sivustolohkojen sijainnin.

CSS:ssä voin suositella hyvää, joka auttaa sinua rakentamaan uraa taittosuunnittelijana, vaikka sinulla ei olisikaan perustietoja web-suunnittelusta ja ulkoasusta.

Haluan kuitenkin varoittaa, että verkkosivustosuunnittelijaksi kouluttaminen ei ole niin helppoa. Asettelussa on monia hienouksia ja vivahteita. Yleisesti ottaen, jotta voit tarkastella asettelua ja kuvitella välittömästi sen elementtien hierarkian, kuinka tarkalleen ne voidaan asettaa ja mitä ominaisuuksia käyttämällä, kaikki tämä vaatii paljon käytännön kokemusta.

Onko tarpeen opetella kaikki HTML/CSS-tunnisteet, attribuutit ja ominaisuudet?

HTML:ssä on monia erilaisia tageja ja attribuutteja ja CSS:ssä ominaisuuksia, joilla voi olla erilaisia merkityksiä. Siksi monet aloittelijat ovat huolissaan kysymyksestä: mistä aloittaa verkkosivuston suunnittelu, ja täytyykö heidän muistaa kaikki nämä arvot, tunnisteet ja ominaisuudet?

Tietenkin, jos sinulla on ainutlaatuinen valokuvamuisti, sinun ei ole vaikeaa oppia kaikkea tätä ja samalla Sodan ja rauhan kolme osaa ulkoa. Muuten kaikkia näitä sanoja ei tarvitse opetella ulkoa.

Alussa, kun olet uusi CSS-käyttäjä, tarkastelet edelleen, mitä kukin omaisuus tekee ja mitä kunkin omaisuuden arvo tekee. Ajan myötä tulet ymmärtämään, mitä voit luoda käyttämällä CSS-tyylisivuja, ja jotkut näistä ominaisuuksista/arvoista jäävät jumissa päähän. Tietenkin, ellet kärsi muistinmenetyksestä.

Sama koskee kaikkia kieliä, mukaan lukien JavaScript, PHP jne. Usein käyttämäsi asiat muistetaan itsestään. Hakemistosta löydät kaiken mitä harvoin käytät, ja niitä on Internetissä paljon. Tässä ei ole mitään häpeällistä, ja kerron teille salaisuuden, kaikki verkkovastaavat tekevät niin.

Yksinkertaistamme asetteluprosessia

Niitä tapauksia varten, joissa sinun on nopeasti luotava jonkinlainen käyttöliittymä tai verkkosivuston prototyyppi, on olemassa CSS-kehykset, kuten Bootstrap. Sen avulla voit ryhtyä verkkovastaavaksi, verkko-ohjelmoijaksi ja ulkoasuuunnittelijaksi yhdeksi ilman tietoa tyylisivuista, ohjelmointikielistä ja hypertekstimerkinnöistä.

Kun olet oppinut CSS:n hyvin ja alat luoda jotain ainutlaatuista, sinulla ei ehkä enää ole tarpeeksi joustavuutta tällä kielellä ja haluat käyttää jonkinlaista CSS-esikäsittelyohjelmaa. Esiprosessorit poistavat kaikki roskat CSS-koodista, tekevät siitä puhtaamman ja loogisemman sekä lisäävät abstraktioastetta muuttujien ja muiden "temppujen" avulla. Suosituimmat esiprosessorit ovat LESS, Sass ja Stylus.

Taitolento - JavaScript

Kun suoritat edistyneempiä verkkosivustosuunnittelun oppitunteja, törmäät HTML:ään upotettuihin JavaScript-elementteihin, jotka tekevät verkkosivuista interaktiivisia. Jos aiot tehdä back-end-kehityksen lisäksi myös front-end-kehitystä, sinun tulee tuntea JavaScript erittäin hyvällä tasolla.

Itse kielen lisäksi sinun on tunnettava kaikki sen ympärillä oleva infrastruktuuri (kirjastot, puitteet, selainliittymät jne.). Kaikkien näiden elementtien hallitseminen voi viedä yhdestä vuodesta äärettömään (riippuen siitä, onko sinulla henkilökohtaista elämää).

Tehdään se yhteenveto

Joten, kuten olet jo toivon ymmärtänyt, taittosuunnittelija on erittäin tärkeä ja ikivanha Internet-ammatti, josta se riippuu:

sivuston latausnopeus;

sen näytön riittävyys eri selaimissa;

sopeutumiskyky erilaisiin käyttäjänäyttöihin;

HTML-standardien ja hakukonevaatimusten noudattaminen.

Tässä kaikki tältä erää. Älä unohda tilata blogiuutisiamme, jotta et menetä kaikkea hauskaa, kun opit suunnittelemaan verkkosivustoja tyhjästä.

Nähdään taas, hyvät kollegat ja ne, jotka ovat vasta aloittamassa tätä vaikeaa mutta erittäin jännittävää verkkokehityksen polkua!

Mukautuvan verkkosivuston asettelun avulla verkkosivut mukautuvat automaattisesti tablettien ja älypuhelimien näyttöihin. Mobiili-Internet-liikenne kasvaa joka vuosi, ja tämän liikenteen tehokas käsittely edellyttää, että käyttäjille on tarjottava responsiivisia verkkosivustoja, joissa on käyttäjäystävällinen käyttöliittymä.

Hakukoneet käyttävät useita kriteerejä arvioidakseen sivuston reagointikykyä mobiililaitteilla katsottaessa. Google yrittää yksinkertaistaa älypuhelimien ja tablettien omistajien Internetin käyttöä merkitsemällä mobiilihakutuloksissa mobiililaitteille mukautetut sivustot mobiiliystävällisiksi. Yandexillä on myös algoritmi, joka antaa mobiilihaun käyttäjille etusijalle sivustot, joissa on mobiili-/responsiivinen versio.

Voit tarkistaa sivun näkymisen mobiililaitteissa palveluista ja.

Riisi. 1. Yandexin ja Googlen mobiilihakutulokset, joissa on huomautus sivuston soveltuvuudesta mobiililaitteille. Mikä on mukautuva asettelu?

Mukautuva asettelu edellyttää vaakasuuntaisen vierityspalkin ja skaalattavien alueiden puuttumista millä tahansa laitteella, luettavaa tekstiä ja suuria alueita napsautettaville elementeille. Mediakyselyjen avulla voit hallita lohkojen asettelua ja sijoittelua sivulla järjestämällä mallin uudelleen niin, että se mukautuu laitteen eri näyttökokoihin.

Perustekniikat responsiivisen verkkosivuston luomiseen esitetään artikkelissa. Responsiivisessa suunnittelussa pääsivuston säilön leveys asetetaan prosentteina, ja se voi olla 100 % tai vähemmän selainikkunan leveydestä. Myös ruudukon sarakkeiden leveys määritetään prosentteina. Responsiivisessa suunnittelussa pääsäiliön ja ruudukon sarakkeiden leveys on määritetty px-arvoilla.

Tällä oppitunnilla käsitelty mukautuva nesteasettelutekniikka toimii täydellisesti kaksisarakkeisessa mallissa, mikä tekee sivustosta mukautuvan ja kätevän mobiililaitteilla katseltaviksi. Mallissa oletetaan sivujen pääsisällön erilainen ulkoasu. Tällä oppitunnilla käsitellään pääsivun asettelua.

Kotisivun asettelu

Sivu koostuu kolmesta päälohkosta: ylätunnisteesta (ylätunniste), pääsisällön ja sivupalkin kääresäiliöstä sekä alatunnisteesta (alatunniste). Otetaan 768px ja 480px suunnittelun käännepisteiksi.

Ensimmäisessä vaiheessa piilotamme ylävalikon ja siirrämme sivupalkin viestien säilön alle. Toisessa kohdassa muutamme otsikkoelementtien sijaintia, perumme sosiaalisen verkoston painikkeiden sijoittelun viesteissä ja perumme sivun alatunnisteen sarakkeiden käärimisen.

Riisi. 2. Esimerkki mukautuvasta asettelusta 1. Sisällönkuvauskentät ja -osio

1) Lisää tarvittavat tiedostot osioon - linkki käytettyihin fontteihin, jQuery-kirjastoon sekä prefixfree-laajennukseen (jotta et kirjoita selaimen etuliitteitä ominaisuuksille):

Mukautuva sivuston ulkoasu

2. Sivun otsikko

Sijoitamme seuraavat säilöelementit sivun otsikkoon:
logo ;
painike näyttää/piilottaa päävalikon;
Päävalikko

;
sivuston hakulomake.

L O G O

Käärimme artikkeliilmoituksen elementtiin:

Suunnittelukevät

Venäjän kielessä on runsaasti sanoja, jotka liittyvät vuodenaikaan ja niihin liittyviin luonnonilmiöihin.

Sivusarakkeeseen lisäämme luettelon luokista, viimeisimmistä kirjoituksista ja uutiskirjeen tilauslomakkeen:

Luokat

Sivun alatunnisteeseen laitamme tekijänoikeustiedot, sosiaalisten verkostojen painikkeet ja sähköpostilinkin:

Yleiset tyylit, palauta selaimen tyylit oletusarvoiksi:

*, *:after, *:before ( laatikon koko: border-box; täyttö: 0; marginaali: 0; siirtymä: .5s helpotus sisään-ulos; /* lisää tasaiset siirtymät kaikille sivuelementeille */ ) ul ( lista-tyyli: ei mitään Näyttö"; fontin paino: normaali; kirjainvälit: 1px; ) runko (fonttiperhe: "Open Sans", arial, sans-serif; fontin koko: 14px; rivin korkeus: 1; väri: #373737; tausta: #f7f7f7 ( sisältö: ""; näyttö: taulukko; selkeä: molemmat; ) /* tyyliluokka, joka ohjaa ruudukon säilön leveyttä */ .container ( marginaali: 0 auto; leveys: 100 %; max-width: 960px; täyte: 0 15px ;

Jaamme sivuston alatunnisteen kolmeen yhtä suureen sarakkeeseen:

Alatunniste ( täyttö: 30px 0; tausta: #3C3D41; väri: valkoinen; ) .footer-col (leveys: 33.3333333333%; float: vasen; ) .footer-col a ( väri: valkoinen; ) .footer-col:last- lapsi ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( täyte: 0 7px; font-size: 18px; )

jQuery-koodi, jonka olemme lisänneet sivun merkintään ennen sulkevaa tagia, vastaa ylävalikon näyttämisestä ja piilottamisesta, kun painiketta napsautetaan (valikon korkeus muutetaan nollasta sisällön kanssa):

$(".nav-toggle").on("napsautus", toiminto())( $("#menu").toggleClass("aktiivinen"); ));

Hyvää päivää, rakkaat lukijat. Verkkosivuston ulkoasu on mielenkiintoinen bisnes, kun alat ymmärtää sitä. Ainoa ongelma on löytää todella hyvää oppimateriaalia. Aluksi koodi saattaa tuntua absurdilta symbolijoukolta, mutta kun hallitset salaisen tiedon, se muuttuu melko yksinkertaiseksi ja ymmärrettäväksi algoritmiksi ja alkaa myös tuottaa tuloja ja moraalista tyydytystä.

Tänään puhumme siitä, mitä html-lohkoasettelu ja css ovat. Maagisesta ohjelmointikielestä tulee vähemmän pelottava. Toivon, että artikkelin loppuun mennessä olet oppinut näkemään joitain koodin elementtejä ja pystyt tekemään itsellesi vakaan päätöksen, kannattaako sinun osallistua tähän kaikkeen.

Asetteluja on kahta tyyppiä: lohko ja pöytä. Aikojen kynnyksellä layout rakennettiin taulukoiden muodossa. Aluksi luotiin vain yksi, suuri.

Pää, pääosa, oli rakennettu siihen. Sellainen, joka sisältää logon, joitain perustietoja, kuten puhelinnumeroita ja niin edelleen.

Pääsisältöosa. Artikkelin teksti, johdatustervehdys tai jotain muuta.

Alatunniste sijaitsee alareunassa. Sitä käytetään vielä tänäkin päivänä. Pääsääntöisesti tähän lisätään pienet linkit yhteystietoihin, avoimiin työpaikkoihin ja "Tietoja meistä" -tietoihin. He voivat liittää mukaan resurssin olemassaolon päivämäärät tai yksinkertaisesti taikasanan "copyright", jolla kehittäjät haluavat osoittaa tai suojata tekijänoikeuksiaan. Sen käyttö oven päällä roikkuvana hevosenkengänä voi vain pelotella haamuja, vaikka he eivät yleensä katso alatunnisteeseen.

Hieman myöhemmin uudet standardit ilmestyivät. Taulukkoasettelu korvattiin lohkoasettelulla. Div-tunniste on lohkoasettelu. Voit katsoa minkä tahansa sivuston koodia. Napsauta hiiren kakkospainikkeella ja valitse Näytä elementtikoodi. Katsokaa kuvakaappaustani. Siinä on pääsivun lohko, alatunniste, vasen ja oikea sarake. Ne on kaikki allekirjoitettu.

Nykyaikaiset verkkosivustot on rakennettu lohkoista; näytän sinulle kaavamaisen esimerkin, jotta voit ymmärtää. Ero tässä on pikemminkin sivun koodissa. Katsos, ei ole päämerkkiä. Johonkin osaan sijoitetut lohkot. Joskus ne voivat mennä päällekkäin tai yhdistää useita elementtejä, mutta yksi ylimääräinen elementti (iso pöytä) on kadonnut.

Lohkot on suunniteltu CSS:llä, joka on erityinen ohjelmointikieli. Siinä on vaikea hämmentää, se on vähemmän hankalaa kuin mitä tapahtuu taulukkoasettelua käytettäessä, kaikki on melko loogista, selkeää ja taittosuunnittelijalle kätevää. Lohkojen ansiosta voit ratkaista enemmän ongelmia, asiakirjoja on paljon helpompi muokata ja sivut latautuvat paljon nopeammin.

Katsotaanpa vaihe vaiheelta, kuinka portaalista tulee sähköinen resurssi. Siinä ei ole mitään monimutkaista. Kyllä, sinun on ponnisteltava opiskellaksesi, mutta tämä ei tuo vain moraalista tyydytystä, vaan myös vakaat tulot. Layout on bisnes, johon monet eivät osallistu.

Yli 80% ihmisistä vain katsovat käsittämätöntä symbolijoukkoa, muistavat koulun matematiikan opetussuunnitelman: logaritmit, differentiaalit - he tulevat hulluiksi, pelkäävät ja unohtavat tämän aiheen: "Minun on parempi mennä opiskelemaan kiinaa, se tulee olemaan helpompaa."

Olet jo nähnyt jonkin algoritmin ja olet vakuuttunut, että merkistössä on toistuvia elementtejä. Tämä on hienoa, eikä se ole niin pelottavaa.

Katsotaan nyt, miten verkkosivusto luodaan. Ensinnäkin suunnittelijat työskentelevät Photoshopissa. He saavat jotain tämän kuvan kaltaista. Vaikka tämä on vain valokuva, siinä on kuitenkin eroja.

Se on tuotettu erityisessä Photoshop-muodossa, kuten notepad txt tai Word doc. PSD:stä, kuten tätä muotoa kutsutaan, lohkot leikataan pois. Vasemmalla olevassa valikossa on erityinen painike tätä varten.

Kun asiakirja on leikattu. Se voidaan viedä verkkoon, ja sen seurauksena tietokoneelle ilmestyy kuvakansio, jota taittosuunnittelija käyttää kuvien jakamiseen koko sivustolla.

Tein tämän vaihtoehdon minuutissa, se ei ole oikein. Halusin vain näyttää sinulle likimääräisen tuloksen. Voit ladata sähköisen version psd-asettelustani ( ladata) ja yritä tehdä oma, oikea versio, katso mitkä kuvat ovat hyödyllisiä sijoittelussa ja miten leikkaat ne pois. Samanaikaisesti yrität työstää mallia itse Photoshopissa.

Aloitteleville taittosuunnittelijoille ja suunnittelijoille tämä ei ole vain mielenkiintoinen, vaan myös hyödyllinen. Muuta värejä, järjestä elementtejä uudelleen, muokkaa mallia ja katso, mikä näyttää hyvältä ja mistä et pidä.

Voit työstää itse asettelua Notepad++:ssa. Tänään en käsittele Adobe Dreamweaver -ohjelmaa, koska... Tämä on erillisen artikkelin aihe, mutta huomautan, että se on erityisesti luotu taittosuunnittelijoille.

Web-sivuston parissa työskenteleminen ei yleensä aloita style.css-tiedoston luomisella, mutta uskon, että se on sinulle mielenkiintoisempaa. Tämä on pääasiakirja, joka kuvaa tarkalleen, miltä portaalisi tulee näyttämään. Se on yksinkertaista. Sinun ei tarvitse edes opetella englantia.

Tausta on taustaväri.

Kaksoisnapsauttamalla väripalettia Photoshopissa saat selville muita värejä.

Tältä html-dokumentti, jossa on tekstikomponentti, näyttää. Jo tutut menut, rungot ja säiliöt... h2-tunnisteen pitäisi myös olla sinulle tuttu. Nämä ovat otsikot. Kirjoita sanasi niihin.

Lataa nämä kaksi asiakirjaa yhteen kansioon ja avaa Notepad++:lla, muokkaa sitten väriä ja tekstiä ja suorita index.html mistä tahansa selaimesta ( ladata).

Tulos tulee olemaan jotain tämän kaltaista.

Onnittelut. Tämä on ensimmäinen sivusi Internetissä! Teit sen, onnistuit. Luonnollisesti värin sijasta voit lisätä kuvadokumenttiin kuvan, joka on leikattu Photoshopista. Tätä varten sinun tarvitsee vain määrittää polku. Kuten näette, tässä ei ole mitään kovin monimutkaista.

Kuten olen jo kertonut, vaikein asia asettelussa on hyvien koulutusmateriaalien löytäminen. Aloitin itse kirjoista ja vasta kaksi viikkoa myöhemmin pystyin tekemään ensimmäisen hakemistotiedostoni. Ymmärräthän, että ilman tyylisivua (CSS) se näyttää tältä.

Samaa mieltä, se ei ole ollenkaan vaikuttavaa. Siksi suosittelen, että opit perusteet videokurssien kautta. Alle olen sijoittanut linkkejä, joita klikkaamalla voit ladata ilmaisia html- ja css-oppitunteja. Niiden avulla voit saavuttaa hyviä tuloksia nopeammin. Lisäksi lukeminen vaatii paljon enemmän tahdonvoimaa kuin mielenkiintoisten videoiden katsominen.

Html - oppitunteja aloittelijoille.
Css - oppitunteja aloittelijoille.
Ilmainen minikurssi verkkosivuston ulkoasusta.

Toivon sinulle menestystä pyrkimyksissäsi. Olen varma, että alat pian opiskella, mutta myös työskennellä verkossa ja toteuttaa myös uskomattomia projekteja!

Jos pidit tästä artikkelista, tilaa uutiskirje ja saat lisää hyödyllisiä materiaaleja oman taitosi kehittämiseen!

Tästä oppitunnista alkaen opimme suunnittelemaan verkkosivuston alusta alkaen suositulla litteällä tyylillä. Tämä aihe on erittäin laaja ja omistamme sille useamman kuin yhden oppitunnin. Mitä tämä tarkoittaa käytännössä?

Kuvittele, että sait freelance-pörssissä tilauksen yksisivuisen verkkosivuston ulkoasusta. Asiakas antoi sinulle asettelun .psd-tiedoston muodossa ja pyysi sinua luomaan HTML-sivun. Taittosuunnittelijan työhön kuuluu myös layoutin leikkaaminen kuviksi, mutta tämän vaiheen jätämme väliin, koska kyse on Photoshopin käytön osaamisesta. Voit etsiä itsenäisesti opetusohjelmia Photoshopista tästä aiheesta.

Oletetaan, että asiakas osoittautui ystävälliseksi ihmiseksi ja toimitti meille valmiiksi leikatut kuvat sekä taitto. HTML-sivun luomiseen tarvitsemme: .psd-asettelun, kansion kuvilla, Photoshopin, Notepad++:n ja selaimen.

Puhumme ulkoasusta, mutta toistaiseksi tämä on vain kuva, josta meidän on tehtävä täysimittainen HTML-sivu.

Huomaa, että ulkoasumme on klassinen esimerkki litteästä suunnittelusta. Litteä muotoilu tarkoittaa "tasaista" tässä et näe tilavuusvarjoja, kaltevuksia ja muita "kelloja ja pillejä".

Avaamme asettelun Photoshopissa ja otamme sieltä kaikki tarvittavat tiedot - värin, fontin, mitat ja aloitamme koodin kirjoittamisen. Ensimmäinen asia, joka meillä on, on sivuston otsikko, joka koostuu logosta ja navigointivalikosta. Tietenkin sivustomme on mukautuva kaikille laitteille ja näytön resoluutioille, joten ilmoitamme kaikki koot prosentteina ja em.

Luomme HTML-sivun ja merkitsemme otsikon. Kirjoitamme otsikon sisällön parillisen otsikkotunnisteen sisään.

Koti

Portfolio

Minusta

Ottaa yhteyttä

Ilman CSS-tyyliä otsikko näyttää täysin väärältä. Style.css-tiedostossa annamme valitsimille vastaavat ominaisuudet, jotta otsikko näyttää asettelun mukaiselta.

Katsotaanpa pääkohtia. Logon ja navigointivalikon tulee olla samalla rivillä. Siksi asetamme logolla varustetussa div-lohkossa kääreen - float: left; Navigointivalikko tulee näkyviin logon oikealle puolelle. Valikkokohteiden on oltava yhdellä rivillä - display:inline-block; Voit peruuttaa rivityksen lisäämällä tyhjän div koodiin - , tyyleissä, joita kirjoitamme näin - .clear(clear:both;)

Sivuston otsikkokoodi style.css-tiedostossa:

Runko (
kirjasinperhe: "Lato", Verdana;
fonttikoko: 100%;
tausta: #fff;
}
.wrap
{
marginaali: 0 auto;
leveys: 70 %; /* sisennys suhteessa selainikkunaan */
}
.header(
pehmuste: 1,3em 0em; /* marginaalit tekstin ympärillä */
}
.logo(
kellua: vasen; /* logon kääre */
}
.logo a (
näyttö: lohko; /* ohita estoon */
}
.nav(
kellua: oikea; /* logon kääre */
marginaali yläosa: 0,82 em;
}
.nav > ul > li (
näyttö: inline-block; /* ohitus inline-blockiin */
}
.nav > ul > li.active a(
tausta: #d0a5a5;
väri: #ffffff;
}
.nav > ul > li > a (
näyttö: lohko;
kirjasinperhe: "Lato", sans-serif;
kirjasinkoko: 1,1 em;
tekstin muunnos: isot kirjaimet;
pehmuste: 0,5em 1em;
väri: #444;
-webkit-siirtymä: 0.9s; /* sujuva siirtymä */
-moz-siirtymä: 0,9 s;
-o-siirtymä: 0,9 s;
siirtymä: 0,9 s;
}
.nav > ul > li > a:hover (
väri: #fff;
tausta: #d0a5a5;
}

Sivuston otsikon HTML-koodi:

Mopsi "Wally" salkku

Koti

Portfolio

Minusta

Ottaa yhteyttä

Suunnitellessamme verkkosivustoa tyhjästä, saamme valmiin verkkosivuston otsikon.

Kuten yllä ehkä arvasit, tässä artikkelissa keskitytään erityisesti lohkoasetteluun. Jos edellinen artikkeli oli johdanto, tarkastelemme nyt tarkemmin esimerkkiä - kuinka verkkosivusto aseteltu tyhjästä. Taitto-opiskelun aikana etsin yksityiskohtaista käsikirjaa siitä, kuinka yksinkertaisinkin html-sivu asetetaan vaihe vaiheelta. Tässä artikkelissa haluan tarkastella kutakin koodiriviä mahdollisimman yksityiskohtaisesti ja selittää html:n kanssa työskentelyn periaatteet, jotta kaikki uudet tällä alalla ymmärtävät sen. Toivon, että voin tehdä sen. 🙂

Joten aloitetaan. Esimerkiksi otin yksinkertaisen prototyypin, sitä ei voi kutsua asetteluksi, normaali asettelu piirretään psd-muodossa, mutta tässä se on jpg. Meille tärkeintä on ymmärtää periaate, miten verkkosivustot asetetaan lohkoasettelulla. Jotta voit työskennellä lohkoasettelun kanssa, sinun on tiedettävä html:n lisäksi myös css (Cascading style sheets). Verkkosivujen ulkoasua käsittelevän artikkelisarjan aikana tutkimme sitä CSS-tyylisarjaa, joka auttaa sinua jatkossa aina suunnittelemaan lähes minkä tahansa asettelukehyksen/mallin, koska periaate on sama.

Joten tässä on asettelu (napsautettava).

Näemme siinä olevan 4 loogista osaa:

Verkkosivuston otsikko (jäljempänä kutsumme sitä otsikoksi);
Vasen sarake (jäljempänä kutsumme sitä vasemmaksi sivupalkiksi);
Oikea sarake (jäljempänä kutsumme sitä sisällöksi);
Alatunniste (tästä lähtien kutsumme alatunnistetta);

Aloitetaan siis tietysti otsikkolohkosta. Mallimme on 1000 pikseliä (px) leveä.

Aluksi sanon, että asettelu tehdään html-tageilla. Esimerkiksi - tämä on tunniste, - tämä on myös tunniste, ja tämä on tunniste. Tunnisteet kirjoitetaan yleensä avaus- ja sulkemistunnisteiden pariksi. Sulkeva eroaa vain siinä, että sen ensimmäisen hakasulkeen jälkeen on "/". Esimerkiksi - tämä on aloitustunniste, - sulkeva tagi. Kun olemme avannut ja sulkenut tagin, voimme jo kirjoittaa tietoja sisään.

Aloitaksesi sinun on luotava levyllesi uusi hakemisto, esimerkiksi myfirsthtml, ja luotava koodieditorissa (käytän sublime text 3:a, tämä on uusin versio kirjoitushetkellä) 2 tiedostoa index.html ja style.css. Avataan nyt index.html ja aloitetaan sivumme merkinnöistä, nimittäin otsikosta. Mutta ennen otsikon tekemistä meidän on tehtävä minkä tahansa html-sivun vakiomerkintä. Nyt näytän sinulle mitä tarkoitan.

Katsotaan nyt jokaista riviä. Kommentit:

Rivi nro 1: tässä ilmoitetaan asiakirjan ns. doctype, jota tarvitaan, jotta selain ymmärtää, missä muodossa se tarvitsee tulkita verkkosivua. Dokumenttityyppejä on 4 tyyppiä:

XHTML 1.0
XHTML 1.1
HTML 4.01
HTML 5

XHTML 1.0 puolestaan on jaettu alatyyppeihin: tiukka syntaksi (Strict) - ei salli mitään vapauksia, tunnistetta ei voi käyttää; Siirtymäaikainen - sallii asettelun vapaudet, joita ei voida käyttää tiukan asettelun kanssa; sisältävät kehyksiä (Frameset). XHTML 1.1 ei ole jaettu mihinkään alatyyppeihin, se on ainoa, kehittäjät jopa ennustivat, että se syrjäyttää HTML:n vähitellen, mutta jos luet siitä tarkemmin, niin HTML kehittyi versiosta 4 5: een ja XHTML-standardi keskeytettiin sen kehitystä, mutta silti Harvoin löytää projekteja, joissa tämä tietty doktue on määritelty.

HTML 4.01 on myös jaettu kolmeen tyyppiin: tiukka syntaksi (Strict), siirtymävaihe (Transitional) ja kehykset sisältävät (Frameset).

Ja lopuksi HTML5 kaikentyyppisille asiakirjoille, yleisin. Tulevaisuudessa meillä on suuri määrä artikkeleita tämän asiakirjatyypin kanssa. Teen kaikki uudet projektini käyttämällä sitä. Mutta älkäämme menkö edellä, vaan nyt analysoimme HTML 4.01:tä. Tässä esimerkissä käytämme Transitionalia, se sopii hyvin aloittelijoille.

Rivi nro 2: avoin tagi tulee heti doctypen määrittämisen jälkeen ja sisältää ehdottomasti kaiken html-koodin, dokumentin lopussa on sulkeva tagi.

sivun otsikkosivun otsikko
sivun kuvaus
avainsanat pilkulla erotettuina
ja paljon muuta metatietoa.

Tätä seuraa tag. Se on se, että suunnittelemme jo verkkosivustomme. Kaikki tämän tagin sisällä näkyy suoraan selaimessa.

Joten olemme suorittaneet ja analysoineet vakiosivumerkinnät html4:n avulla. Suoritan tämän oppitunnin loppuun ja kerron sinulle, kuinka pääelementit asetetaan niiden avulla seuraavalla oppitunnilla, jonka kirjoitan lähipäivinä. Älä unohda lisätä

Hyvät taittotunnit. Mukautuva asettelu: oppitunteja vai suoraan taisteluun? Getting Better - CSS

Lisää tästä aiheesta:

Muut artikkelit: