Tässä osiossa yritän puhua siitä, miten PHP:n avulla luoda monisivuinen verkkosivustomalli. Luulen, että monet ihmiset Internetissä surffaillessaan huomaavat, että useimmat sivustot koostuvat "samantyyppisistä" sivuista. Jokaisen tällaisen sivun otsikko, vasen, oikea ja alaosa ovat lähes identtisiä, ja ne eroavat toisistaan ​​vain keskellä sijaitsevan pääosan sisällössä. Sivuston päävalikko sijaitsee yleensä sivun yläosassa. Vasen ja oikea sarake voivat sisältää erilaisia ​​linkkejä, bannereita ja mainoslohkoja. Alareunaan he haluavat sijoittaa tietoa projektista, tekijänoikeuksista ja muista kaikille sivuille yhteisistä tiedoista. Tällaisia ​​sivuja on varmasti mahdollista luoda manuaalisesti, mutta se ei ole suositeltavaa, koska jokaisen sivun alkuperäinen HTML-merkintä sisältää melkoisen määrän päällekkäistä koodia ja jos tapahtuu virheitä tai yrityksiä muuttaa niiden rakennetta, muutokset on tehtävä. tehty kaikille sivuille. PHP:n avulla tällaisen sivun mallin luontiongelma ratkaistaan ​​melko yksinkertaisesti.

Lähdekoodi tätä mallia vastaavan sivun muodostus näyttää suunnilleen tältä:

begin_center();

"; get_page()->end_center(); include "footer.php"; close_page(); ?>

Lähdekoodi page.php. Ennen kuin voit aloittaa sivun merkintöjen luomisen, sinun on sisällytettävä global.php-tiedosto, joka mainitaan aivan ensimmäisessä request_once-lauseessa. Seuraavaksi alustamme sivun soittamalla globaali toiminto

Kaikki on melko yksinkertaista. Tiedostojen header.php , left_side.php , right_side.php ja footer.php lähdekoodi on annettu alla. Jos jollekin sivuryhmälle sinun on muutettava näiden alueiden sisältöä, luo näistä tiedostoista erityisversiot ja muuta niitä vastaavien ohjeiden argumentteja sisältää sivumallissa.

begin_header();

kaiku"

"; get_page()->end_header(); ?>

Header.php lähdekoodi.

Tietolohko vasemmalla 3

"; get_page()->end_left_side(); ?>

Tietolohko oikealla 2

Tietolohko oikealla 3

"; get_page()->end_right_side(); ?>

Lähdekoodi right.php.

begin_footer(); kaiku ""; get_page()->end_footer(); ?> Lähdekoodi footer.php. Tarkasteltavan mallin käsittelyn tulosta voi tarkastella.

Hei kaikki. Tässä aiheessa julkaisen html-mallin web-studion verkkosivustolle. Klassinen sivusto, jossa on liukusäädin, portfolio ja viimeisimmät uutiset

kotisivu

. Verkkosivuston luominen päällä Venäjän markkinat ottaa yhä vakavampia käänteitä ja web-studioita tulee yhä enemmän. Melkein jokainen verkkokehityksestä vähintäänkin kiinnostunut opiskelija voi rakentaa nettisivut itselleen. Aika monet ihmiset tulevat luokseni pyytämään minua auttamaan heitä tekemään tämän tai tuon asian, vaikka huomaan myöhemmin, että nämä ihmiset kutsuvat itseään verkkosivustojen tekijöiksi ja heillä on jopa oma web-studio. Julkaisen tämän mallin tällaisille ihmisille (ei tietenkään vain sellaisille ihmisille). Verkkosivustojen mainostamisesta on tulossa myös erittäin suosittu palvelu, vaikka 80 prosentilla tällaisia ​​palveluita tarjoavista ei ole edes perustietoa SEO:sta.

Tässä on 10 sivua, joilla on erilainen sisältöorganisaatio. Käydään läpi jokainen sivu.

Klassinen artikkelisyöte, jossa on kuvia, päivämäärä, artikkeliin jätettyjen kommenttien määrä ja esikatseluteksti. Sivulla on oikea sivustopalkki, jossa on satunnaisia ​​viestejä, tunnisteita, luokkia ja niin edelleen.

Artikkelisivu

Jos napsautamme minkä tahansa blogikirjoituksen otsikkoa, siirrymme artikkelisivulle, jolla on sama sivustopalkki, teksti ja kommentit.

Tietoja meistä -sivu

Tällä sivulla näemme esityksen lohkojen järjestelystä sivulla: 2 saraketta, 3 ja 4. Tällä sivulla on alaluokat:

• Elementit. Täällä näemme painikkeet, haitarit ja välilehdet
• Kuvakkeet. Tämä malli sisältää hyvän kokoelman yksivärisiä kuvakkeita. Löydät kuvakkeet img/mono-icons-kansiosta
• Typografia. Lainaukset, painotukset, isot kirjaimet, kappaleet ja niin edelleen.

Portfolion sivu

Kaikki teokset on koottu portfoliosivulle. Sivuston otsikossa on suodatin. Kun napsautat yhtä teoksista, siirrymme itse työsivulle kokosivun liukusäätimellä, kuvauksella ja neljällä satunnaisella teoksella.

Yhteystiedot

Tavallinen sivu, jossa on kartta, osoite, puhelinnumerot ja palautelomake.

Siinä kaikki minulle. Töitä, opiskele, älä ole laiska ja kaikki järjestyy :) Kaikkea hyvää!

Oppitunti #9
Luomme verkkosivumme kolmesta sivusta

Tällä oppitunnilla me luomme kolmesta sivusta koostuvan verkkosivuston. Mutta ennen sitä sinun on luotava kansio työpöydällesi avuksesi, voit kutsua kansioon Oma sivusto.

Aseta Oma sivusto -kansioon kaikki jo olemassa olevat tiedostot, nimittäin kaksi HTML-tiedostoa:
index.html - Artikkeli lumileopardista,
polyarnyi-volk.html — Artikkeli napa-sudesta,

ja kaksi kuvaa:
irbis.jpg
polyarnyi-volk.jpg

Tehdään kolmas sivu, jolle se omistetaan napapöllö.

Kolmannen sivun tiedot

Luo HTML-tiedosto Oma sivusto -kansioon:
polyarnaya-sova.html

Sivun otsikko , tee:
Lumipöllö sivu

Upota CSS-koodi:

Artikkelin otsikko

Kuva :

Artikkeli, joka koostuu kahdesta kappaleesta:

Pöllöpöllö (valkoinen pöllö) on pöllöperheeseen kuuluva lintu. Suurin lintu pöllöistä tundran alueella. Valkoisella pöllöllä on pyöreä pää, keltaiset silmät, vartalon pituus on 70 cm, paino 3 kg, siipien kärkiväli 165 cm. Levitysalue - tundraalue: Euraasia, Pohjois-Amerikka, Grönlanti. Napapöllö asuu yleensä avoimilla alueilla, ja sitä tavataan harvoin metsissä. Se ruokkii pääasiassa pieniä jyrsijöitä: lemmingejä se voi syödä yli 1600 lemmingiä vuodessa. Pöllön ruokavalioon kuuluu myös jäniksiä, pieniä petoeläimiä, lintuja, kaloja ja jopa raatoa.

Tämän seurauksena sinun pitäisi saada seuraava sivu.

Verkkosivujen yhdistäminen linkeillä

Päällä tällä hetkellä Meillä on kolme HTML-tiedostoa, jotka sisältävät artikkeleita, jotka kuvaavat erilaisia ​​pohjoisen eläimiä:

Index.html - Artikkeli lumileopardista,
polyarnyi-volk.html — Artikkeli napa-sudesta,
polyarnaya-sova.html — Artikkeli napapöllöstä.

Lumileopardi Polar wolf Polar pöllö

Lopulta sivustosi pitäisi näyttää tältä. Linkkejä napsauttamalla pääset seuraaville sivuille: lumileopardi, jääsusi ja jääpöllö.

Kuten jo tiedät, jokainen HTML-dokumentti alkaa tunnisteella , tämä selitys oli aloittelijoille. Itse asiassa, joka HTML-dokumentin tulee alkaa rivillä, ja sen alle asetetaan tunniste . Linjatekee selaimelle selväksi, että dokumentissa käytetty HTML-kieli on suunnattu kielen uusimpaan, viidenteen versioon, ts. HTML5:ssä.

Lopullisen HTML-dokumentin, kuten index.html-tiedoston, pitäisi lopulta näyttää tältä:

Lumileopardi

Lumileopardi (irbis, ak leopard) on kissaperheeseen kuuluva suuri petoeläin. Se elää vuoristossa Afganistanissa, Burmassa, Bhutanissa, Intiassa, Kazakstanissa, Kirgisiassa, Kiinassa, Mongoliassa, Nepalissa, Pakistanissa, Venäjällä, Tadžikistanissa ja Uzbekistanissa. Lumileopardi on ohut, pitkä, joustava runko, suhteellisen lyhyet jalat, pieni pää ja erittäin pitkä häntä.

Se saavuttaa 200-230 cm pituuden hännän kanssa ja painaa jopa 55 kg. Turkin väri on vaalean savunharmaa, jossa on rengasmaisia ​​ja yhtenäisiä tummia pilkkuja.

napainen susiLisää aina rivi

, jokaisen HTML-dokumentin alussa.

Verkkotunnuksen rekisteröinti ja hosting
Joten sinulla on kolme HTML-tiedostoa tallennettuna Oma sivusto -kansioosi:
index.html
polarnayi-volk.html

polarnaya-sova.html
irbis.jpg
ja kolme valokuvaa:
polyarnyi-volk.jpg

polyarnaya-sova.jpg
Jotta voit sijoittaa tämän kaiken Internetiin, sinun on ensin rekisteröitävä verkkosivuston nimi (domain), laadukkain verkkotunnusten rekisteröintiyritys, tällä hetkellä tämä on Webnames: webnames.ru on verkkotunnusten rekisteröintiyritys. Yleensä rekisteröidäksesi verkkotunnuksen .RU-vyöhykkeelle, sinun on maksettava noin 100 ruplaa ensimmäisenä vuonna ja noin 500 ruplaa seuraavina vuosina.

(maksu suoritetaan kerran vuodessa) Sivuston nimen rekisteröinnin jälkeen sinun on ostettava itse isännöinti

Yksisivuisen tai monisivuisen suunnittelun välillä voi olla vaikeaa päättää. Mobiili- ja sosiaalisen median suosion kasvun myötä yksinkertaiset, nopeat ja responsiiviset yksisivuiset verkkosivustot ovat yksi tämän päivän suosituimmista verkkotrendeistä. Toisaalta perinteisten navigointivirtojen määrittelemät monisivuiset verkkosivustot ovat käyttäjien tuttuja.

Tämä on vaikea valinta. Paras tapa Yksisivuisen ja monisivuisen suunnittelun välillä valitseminen edellyttää sivustosi sisällön ja navigointikulun huomioon ottamista. Onko sivustosi sisältö nopea ja helppo selata vai onko siellä paljon sisältöä, joka on sijoitettava strategisesti käyttäjille? Sisältölähtöisellä lähestymistavalla löydät todennäköisemmin oikean navigointijärjestelmän.

Tämä viesti auttaa sinua punnitsemaan kunkin vaihtoehdon edut ja haitat.

Yhden sivun sivusto

Yksisivuinen verkkosivusto on yksinkertaisesti verkkosivusto, joka sisältää vain yhden HTML-sivu. Muita sivuja, kuten Tietoja-, Ominaisuudet- tai Yhteystiedot-sivu, ei ole.

Kuten Awwwards selittää, yksisivuisten sivustojen sisältö latautuu kokonaan etusivulle, mikä tekee kokemuksesta johdonmukaisemman ja luonnollisemman käyttäjälle. Käyttäjät voivat navigoida yksisivuisen verkkosivuston eri osiin napsauttamalla navigointilinkkejä, joiden avulla he voivat hypätä sivulla oleviin kohteisiin, tai vierittämällä sivua niin, että ne kattavat eri sisällön osiot.

Yksisivuiset verkkosivustot pyrkivät tarjoamaan käyttäjälle vain olennaisen määrän tietoa. On tarpeen tehdä päätös ja toimia sen mukaisesti. Tästä syystä yksisivuisia malleja käytetään usein aloitussivuilla, portfolioissa ja tapahtumiin liittyvillä verkkosivustoilla. Tämä puhdas, minimalistinen lähestymistapa poistaa tarpeettoman melun käyttöliittymästä ja keskittää käyttäjän huomion tärkeimpään sisältöön.

Tehokkaat yksisivuiset verkkosivustot ovat siistejä ja selkeitä. Sivusto, jossa on yksi sivu, joka jakaa sisällön pienempiin osiin ja poistaa sotkua käyttöliittymä, käyttäjäystävällinen.

Yhden sivun suunnittelu edistää myös intuitiivista käyttäjämatkaa. Ilman lisäsivuja kävijät nauttivat lineaarisesta navigointikulusta, joka kertoo tarinan selkeästi määritellyllä alun, keskikohdan ja lopun kanssa.

Yksinkertaisen navigointijärjestelmän toinen etu on, että käyttäjä ohjataan vain yhteen toimintoon. Tutkimukset osoittavat, että yksi sivu voi lisätä tuloksia jopa 37,5 % verrattuna monisivuisiin sivustoihin.

Pienellä määrällä sisältöä (ja kaikki yhdellä sivulla) voit helposti ja johdonmukaisesti mukauttaa yksisivuisia verkkosivustoja erilaisia ​​näyttöjä ja laitteet. Lisäksi vieritys on helppo ja luonnollinen liike mobiililaitteet kosketusnäytöllä.

Mutta siinä ei vielä kaikki - suunnittelijoille on myös mielenkiintoisia etuja. Esimerkiksi yhdellä sivulla on paljon vähemmän sisältöä kuin monisivuisessa suunnittelussa. Tämä tekee yksisivuisista web-malleista yleensä helpompi toteuttaa, toistaa ja ylläpitää.

Yksisivuisen sivuston haitat

On myös useita syitä, miksi yksisivuinen suunnittelu voi olla väärä päätös verkkosivustollesi.

Yksisivuiset verkkosivustot ovat huonompia ( hakukoneoptimointi). Lisäksi yksisivuinen sivusto ei ole ihanteellinen ehdokas kasvavalle brändille, koska sen skaalautumiskyky on rajallinen. Kuten olemme jo nähneet, yksisivuisilla verkkosivustoilla on yleensä kapea painopiste, eivätkä ne siksi sovellu verkkosivustoille, jotka vaativat suurta, monimutkaista ja/tai monipuolista sisällön käyttöä.

Monisivuinen verkkosivusto sisältää useita sivuja. Toisin kuin yhden sivun verkkosivustolla, ainoa tapa navigoida ja tarkastella sivuja monisivuisella ulkoasulla on seurata valikkolinkkejä.

Monisivuinen suunnittelu toimii hyvin lähes kaikentyyppisissä projekteissa. Esimerkkejä monisivuisesta web-suunnittelusta löytyy verkkokauppasivustoilta (kuten Amazon) ja verkko-oppimissivustoilta (kuten Lynda).

Monisivuisen suunnittelun edut

Monisivuisella sivulla on kolme pääetua yhdellä verkkosivustolla.

Ensinnäkin monisivuinen suunnittelu tarjoaa rajattoman skaalautuvuuden. Luo niin monta sivua kuin haluat ja laajenna navigointijärjestelmää tarvittaessa. Voit esimerkiksi korvata muokattavan megavalikon ylänavigointipalkin hakupalkilla loputtomille navigointimahdollisuuksille. Muista, että valitsemasi navigointisuunnittelun tyyppi riippuu verkkosivustosi syvyydestä.

Toiseksi, navigointikulkua monisivuisella sivustolla on helppo seurata. Tämäntyyppiset verkkosivustot ovat olleet käytössä 90-luvulta lähtien, mikä tarkoittaa, että useimmat käyttäjät tuntevat sen ja odottavat usein löytävänsä sivustoilta useita sivuja.

Lopuksi sivustoilla, joissa on useita sivuja, on tehokkaat SEO-ominaisuudet. Ulkomaiset verkkosivustot todennäköisemmin on enemmän sisältöä kuin yksisivuisilla.

Harkitse esimerkiksi, kuinka hallitset sivustosi säännöllisiä päivityksiä. Älä unohda, että kehitys- ja sisältötiimien on ylläpidettävä kaikkea tätä sisältöä. Kun harkitset yhden tai monisivuisen verkkosivuston luomista, sinun on mietittävä, onko saatavuus suuri määrä sisältö on kustannustehokasta.

Toinen huomioitava asia on sivustosi poistumisprosentti. Sivustot, joissa on paljon sisältöä, latautuvat usein hitaasti, häiritsevät ja voivat johtaa käyttäjien hylkäämiseen.

Lopuksi monisivuisia malleja on vaikeampi mukauttaa mobiilikäyttöön. Toisin kuin yksisivuisilla sivustoilla, joissa samaa koodia voidaan käyttää mobiilisivuston kehittämiseen, monisivuisia projekteja on usein mukautettava alusta alkaen mobiiliversion luomiseksi.

Yksisivuisten ja monisivuisten verkkosivustojen vertailu - Yhteenveto

Toivomme, että viestimme on selventänyt eroja yksisivuisen ja monisivuisen suunnittelun välillä. Yhteenvetona: Yksisivuiset mallit ovat merkityksellisiä, kun sinulla on kapea painopiste tai kannustat käyttäjiä suorittamaan tietyn tehtävän. Se sopii myös mobiilisuunnitteluun. Toisaalta monisivuisen suunnittelun avulla voit laajentaa saavutuspotentiaaliasi, pitäytyä perinteisessä navigointijärjestelmät ja optimoida hakukoneoptimointistrategiasi.

Ei ole olemassa nyrkkisääntöä sen määrittämiseksi, pitäisikö sinun luoda yksi- vai monisivuinen verkkosivusto. Tärkeintä on ajatella sisältöä ensin. Mieti, mitä tietoja tarvitset palvellaksesi käyttäjiäsi, ja tee päätöksesi sen perusteella, kuinka paljon sinulla on tietoja.