Kuinka tehdä tynkäsivu. Jätä yhteystietosi

Tynkä on sivu, joka sijoitetaan sivustolle, kun se ei syystä tai toisesta ole käytettävissä. Esimerkiksi, kun viimeistelet tai muutat sivuston ulkoasua ja tällä hetkellä se ei ole käytettävissä tai näkyy jotenkin väärin. Tällä hetkellä kannattaa laittaa tynkäsivu, jolle kirjoitetaan, että sivusto on huollossa.

Joten aloitetaan...

Teemme yksinkertaisen paikkamerkin, jossa on taustakuva ja teksti, joka .

Luodaan tietokoneelle kansio, johon sijoitamme kaikki tynkälle tarvittavat tiedostot.

Luomme tähän kansioon toisen kansion nimeltä images. Siihen sijoitamme taustakuvamme ja mahdollisesti muita työn aikana mahdollisesti tarvittavia kuvia.

Avaa Notepad++-ohjelma (tai vastaava, esimerkiksi Notepad). Me luomme uusi asiakirja. Seuraava - Tiedosto - Tallenna nimellä, valitse kansio, jossa on tynkä ja tallenna asiakirja nimellä index.html

Tämän pitäisi nyt olla kansiossamme:

Avaa tiedosto index.html editorissamme (tallennuksen jälkeen sen pitäisi olla avoinna sinulle). Nyt meidän on varmistettava, että tämän tiedoston koodaus on asetettu oikein. Voit tehdä tämän siirtymällä "Koodaukset" -valikkokohtaan ja napsauttamalla "Muunna UTF-8:ksi".

Jotta saavutettu tulos ei vahingossa menettäisi työskentelyn aikana, suosittelen asiakirjan tallentamista säännöllisesti työn aikana. Tämä voidaan tehdä "Tiedosto"-valikosta tai pikanäppäimellä "Ctrl + S".

Kirjoitamme seuraavan koodin editoriin:

Mikä tahansa verkkosivu koostuu näistä tunnisteista.

Lisätään nyt sivullemme otsikko, koska ei ole kovin mukavaa, kun joku avaa sen ja näkee selainvälilehden otsikossa index.html (voit avata sivun selaimessa ja katsoa mitä tapahtuu). Voit tehdä tämän lisäämällä seuraavan koodin väliin ja:

Sivusto on ylläpidossa

Taustakuva

Valitse nyt taustakuva paikkamerkillemme ja palaa sitten sivun muokkaamiseen.

Voit tehdä tämän siirtymällä Google-kuvahakuun ja etsimällä mielenkiintoinen kuva, joka voisi toimia sivumme taustana. On tärkeää valita kuva, jonka leveys on vähintään 1920 pikseliä, jotta sivumme näyttää hyvältä suurilla näytöillä. Menin hakupalkkiin ja valitsin yhden kuvista.

Avaa kuva täysikokoisena ja tallenna se kuvakansioosi. Sitten nimetään se uudelleen. Kutsutaan sitä bg:ksi (älä unohda kuvamuotoa, minun tapauksessani se on jpg).

Tässä on mitä otin. Tämä on kuva Chicagon kaupungista. Mielestäni se sopii hyvin sivuston taustakuvaksi.

Liitämme sivulle taustakuvan CSS-tyyleillä:

Sivusto on ylläpidossa

Teksti koostuu otsikosta ja itse asiassa tekstikappaleesta.

Sivusto on ylläpidossa

Tässä on mitä tapahtui:

Nyt lisäämme yhteystietomme, jotta vierailijat voivat ottaa meihin yhteyttä välittömästi, eivätkä odota työpaikan valmistumista.

Lisätään 3 lohkoa, jotka sisältävät puhelimen, Sähköposti ja Skype.

Sivustoa huolletaan Sivustoa huolletaan, tarkista myöhemmin!

Sivusto on parhaillaan työn alla insinöörityöt. Palaa myöhemmin tai ota meihin yhteyttä jollakin seuraavista tavoista:

Puh.: 333-33-33

Sähköposti: [sähköposti suojattu]

Skype: admsite_ru

Jäljelle jää vain työskennellä tyylien kanssa.

Suurennetaan otsikkoa, kohdistetaan se keskelle ja lasketaan lähemmäs näytön keskustaa.

Kasvatetaan tekstikappaleen fontti 20 pikseliin ja tehdään otsikosta pieni sisennys. Teemme myös tekstin alaosaan reunuksen, joka erottaa sen yhteystiedoista.

Tehdään lohkoja kontakteilla 3 sarakkeessa, suurennetaan fonttia, tasataan jokainen lohko keskelle ja vaihdetaan tekstin väri.

Sivustoa huolletaan Sivustoa huolletaan, tarkista myöhemmin!

Sivustolla tehdään parhaillaan teknisiä töitä. Palaa myöhemmin tai ota meihin yhteyttä jollakin seuraavista tavoista:

Puh.: 333-33-33

Sähköposti: [sähköposti suojattu]

Skype: admsite_ru

Tämän seurauksena meillä on paikkamerkkisivu, jota voimme käyttää, kun sivustolla tehdään teknisiä töitä.

Kun sivusto odottaa julkaisua tai kunnostusvaiheessa, sen avaamisesta on ilmoitettava sivuston vierailijoille. Ja täydellinen ratkaisu tähän ongelmaan on luoda aloitussivu asianmukaisella ilmoituksella.

Kun nykyaikaiset verkkokehitystyökalut ovat kehittyneet, tällaiset sivut ovat kehittyneet yksinkertaiset sivut tekstin avulla kiinnostavampiin ratkaisuihin.

Tällaisen paikkamerkin luominen sivustolle lisää vierailijoiden odotuksia ja herättää siten kiinnostusta heidän keskuudessaan. Yksinkertaisen ilmoituksen lisäksi on mahdollista kerätä tietoa kiinnostuneista käyttäjistä lisäämällä tilauslomakkeita ja palautetta.

Tässä opetusohjelmassa luomme sivustolle juuri tällaisen tynkän, joka sisältää tilauslomakkeen ja ajastimen, jotka on toteutettu Keith Woodin jQuery-laajennuksella.

Oppitunnille tarvittavat materiaalit:

• Mikä tahansa taustakuva
• Aikaa ja kärsivällisyyttä.

index.html - pääprojektitiedosto

“js”-kansio – kansio, jossa on JavaScript/JQuery-skriptit

kansio "img" - kansio projektikuvilla

"css"-kansio – kansio, jossa on projektin tyylisivut (css-tiedostot)

Aloitetaan

Ensimmäinen työvaihe on yhteyden muodostaminen tyylisivujen ja jquery-kirjastojen pääasialliseen html-tiedostoon.
Sisällytämme tiedostot head-tunnisteen sisään.

Tulossa pian Counterin kanssa

HTML

Luodaan merkinnät html-asiakirjallemme. Kaikki sivuelementit ovat div-tunnisteen sisällä, jonka tunniste on "container". Tämän lohkon sisällä meillä on otsikot, laskuri, palautelomake ja alatunniste (alempi lohko tekijänoikeuksilla).

Sivustomme on tulossa pian. PYYDYMME HAIKAA

PITÄÄ ODOTTAA...

LÄHETÄ MINULLE TIEDOT SIITÄ

Tekijänoikeus - 1stwebdesigner.com - 2014

Huomaa, että jätimme div-tunnisteen "laskuri" tyhjäksi. Käytämme myöhemmin tätä tunnistetta liittääksemme sen jquery-laajennukseen ja lisätäksemme siihen css-tyylejä.

CSS

Nyt luodaan projektillemme css-tiedosto, joka sisältää kaikki tyylit. Ensinnäkin lisätään tyylit pääelementeille: body, h1, h2 ja lohko, jonka tunniste on “container”. "Säilön" lohkolle määritämme leveyden prosentteina, jotta se muuttuu selainikkunan koon mukaan.

Käytä h1-tunnisteeseen CSS3-muunnos, jonka avulla se voi pyöriä 360 astetta X-akselia pitkin. Voit lukea lisää tästä ominaisuudesta.

Runko ( väri: #dadada; viivan korkeus: 1,75; leveys: 100 %; tausta: url(../img/background.jpg)center; font-family: "Open Sans"; ) h1,h2( väri: # fff; rivin korkeus: 1,16667; tekstin tasaus: keskellä; tekstin muunnos: isot kirjaimet; tekstin varjo: 2px 2px 2px rgba(150,150,150,1); ) h1 (fontin koko: 43px; fonttiperhe: Montserrat; fontti -paino: 700; reunus: 2px katkoviiva #fff; marginaali yläreunassa: 50px; täyte: 10px; kohdistin: osoitin; -webkit-siirtymä: kaikki .8s helppous; -moz-siirtymä: kaikki .8s helppous; -o-transition : kaikki .8s helppo; siirtyminen: kaikki .8s helppo -muunnos: rotateX(360deg); muunnos: rotateX(360deg); ) h2 (fontin koko: 30px; fontin paino: 300; marginaalin yläosa: 30px; ) .container (leveys: 58%; marginaali: 40px auto 0 ; ) .details ( margin-top: 30px; väri: #fff; tekstin tasaus: keskellä; tekstin varjo: 2px 2px 2px rgba(150,150,150,1); )

Painike, syöttö, tekstialue ( kirjasinkoko: 16 kuvapistettä; enimmäisleveys: 100 %; marginaali: 0; reunan säde: 0; pystytasaus: perusviiva; -webkit-box-sizing: border-box; -moz-box -koko: border-box; box-sizing: border-box; ) tekstialue (ylivuoto: automaattinen; pystytasaus: ylhäältä; ) syöttö,tekstialue ( tausta: #6e6e6e; tausta: rgba(169,169,169,0.3); reunus: 1px kiinteä #f4f4f4; väri: #fff; fontin paino: 700; kirjainten väli: 1px; täyte: 12px; tekstin muunnos: isot kirjaimet; ) input:focus,textarea:focus (ääriviivat: 0; ) painike:hover,button :focus,input:focus,input:hover ( tausta: #ff8721; väri: #fff; ääriviivat: 0; ) painike,syöttö ( -webkit-ulkonäkö: painike; kohdistin: osoitin; ) painike,syöttö ( tausta: #ffab00 ; -webkit-transition: kaikki .5s; -moz-transition: kaikki .5s; siirtyminen: kaikki .5s; ) .form-field ( sijainti: suhteellinen; )

Seuraava vaihe on luoda tekstikenttään selaimen välinen tyyli.

::-webkit-input-placeholder ( väri: #fff; ) ::-moz-placeholder ( väri: #fff; peittävyys: 1; ) ::-ms-input-placeholder ( väri: #fff; peittävyys: 1; ) .placeholder ( väri: #ff; )

Luodaan nyt tyylejä laskuriimme. Haluan muistuttaa, että html-dokumentissa se sijaitsee div-lohkossa, jonka tunniste on "laskuri".

#counter ( margin-top: 28px; ) .countdown_section ( väri: #dadada; näyttö: inline-block; font-koko: 12px; tekstin tasaus: keskellä; leveys: 25%; kirjainten väli: 1px; reunus-vasen : 1px katkoviiva #dadada; reunan väri: rgba(218,218,218,0,8); täyte: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border -laatikko; tekstivarjo: 2px 2px 2px rgba(150,150,150,1); tekstin muunnos: isot kirjaimet; ) .countdown_section:first-child (reuna-vasen: 0; ) .countdown_amount ( väri: #fff; näyttö: lohko; kirjasinperhe: "Open Sans"; fontin koko: 60 pikseliä; fontin paino: 700; kirjainvälit: normaali; rivin korkeus: 1; )

Lisätään nyt palautelomakkeeseen tyylejä. Lomakkeen enimmäisleveys on 610 pikseliä ja asetamme tälle lomakkeelle suhteellisen sijainnin (position:relative). Laitetaan viestin lähetyspainike tekstilohkon oikealle puolelle ja asetetaan sen absoluuttinen sijainti (position:absolute).

#tilaa ( max-leveys: 610px; sijainti: suhteellinen; marginaali: 20px auto 0; ) #tilauslomake .lomake-kenttä ( margin-oikea: 180px; ) #subcribe_email ( border-right: 0; ) #tilauslomake .form-submit ( korkeus: 50px; sijainti: absoluuttinen; oikea: 0; yläosa: 0; leveys: 180px; ) #subcribe_email,#subscribe_submit ( leveys: 100%; näyttö: lohko; korkeus: 55px; )

Ja lopuksi lisäämme ominaisuudet alatunnistelohkon elementeille.

Alatunniste ( font-koko: 13px; tekstin tasaus: keskellä; marginaali yläreunassa: 25px; tekstin muunnos: isot kirjaimet; tekstin varjo: 2px 2px 2px rgba(150,150,150,1); ) alatunniste a ( väri: #fff; )

Jotta sivumme olisi responsiivinen, lisäämme mediakyselyitä. Voit lukea lisää tästä kiinteistöstä (englanniksi)

@media vain -näyttö ja (max-width: 720px) ( alatunniste(margin-bottom: 40px; ) ) @media only -näyttö ja (maksimileveys: 680px) ( .countdown_amount ( font-size: 48px; ) ) @media only näyttö ja (enimmäisleveys: 540 kuvapistettä) ( .one-half (leveys: 100 %; ) .countdown_section ( täyttö: 28px 6px 20px; ) #subcribe_email(border: 1px solid #ffff;) #subscribe-form .form-submit ( marginaali: 0 auto; oikea: auto; sijainti: staattinen; ) #tilauslomake .lomake-kenttä ( marginaali: 0 0 14px; ) ) @media vain -näyttö ja (max-leveys: 480px) ( h1 ( font-size : 30px; ) h2(fontin koko: 25px;) .countdown_section (reunus: ei mitään; täyte: 20px 20px; font-size: 13px; text-align: center; ) .countdown_amount ( font-size: 40px; täyttö: 0 0 10px 0; ) #laskuri(leveys: 30%; marginaali:0 automaattinen;) ) @media vain näyttö ja (maksimileveys: 360px) ( h2(fontin koko: 22px;) .countdown_section ( täyttö: 21px 26px 21px) 15px; ) .countdown_amount ( font-size: 36px; ) )

Jos tarkistat sivun näytön selaimessa, sen pitäisi näyttää tältä:

JQuery

Huomaa, että emme näytä laskuria. Jotta se tulee näkyviin, sinun on lisättävä seuraava koodi ennen sulkevaa body-tagia. Mutta ennen sitä lataa laajennustiedosto ja määritä tiedoston polku.

Lisää sitten seuraava koodi näyttääksesi laskurimme. Voit muuttaa päivämäärää mittarissa toiveidesi mukaan. Riittää, kun määrität haluamasi päivämäärän "launchdate" -parametrin sisällä.

$(document).ready(function() ( var launchdate = new Date(2014, 6 - 1, 7); $("#counter").countdown(( asti: launchdate )); ))(jQuery);

Johtopäätös

Onnittelut! Olet juuri luonut hienon ajastinsivun. Tällä sivulla voit ilmoittaa vierailijallesi sivustosi julkaisupäivämäärästä etkä menetä sitä.

Toivottavasti pidit tästä oppitunnista. Jätä kommenttisi ja kysymyksesi, vastaan ​​aina mielelläni.

Jos suunnittelet verkkosivustosi uudelleensuunnittelua, rutiinihuoltoa tai uuden verkkoresurssin lanseerausta, on erittäin tärkeää, että vierailijoita ei tervehditä tyhjällä sivulla. Sivustolla vierailevat ihmiset hukkuvat tapahtumien mysteereihin, ja tämä ei ole kovin hyvä asia. On parasta huolehtia käyttäjistä ja ilmoittaa heille sivuston pian avautumisesta tai jatkamisesta käyttämällä erityistä HTML-sivua. Yleisessä kielessä tällaista sivua kutsutaan "tynkäksi". Sen merkitystä tuskin voi yliarvioida, varsinkin jos haluat puhua sivustostasi ja mainostaa sitä hieman. Kantatyyppejä on kahdenlaisia: se on joko staattinen sivu, joka kertoo käyttäjille heidän tarvitsemansa tiedot, tai sivu, joka herättää uteliaisuutta ja pakottaa vierailijan esimerkiksi tilaamaan ilmoituksia. FreelanceToday tarjoaa sinulle 10 ilmaista HTML-mallia, joiden avulla voit luoda houkuttelevia paikkamerkkejä verkkosivustoillesi.

Heartbeat on yksinkertainen ja tyylikäs HTML-malli. Karkea yksivärinen taustakuva ja ajastin tekevät tästä laajennuksesta ihanteellisen yrityssivustoille.

Moon-malli on loistava verkkosivuston PR:lle. Sivulla on useita kohtia, joihin voit sijoittaa tärkeää tietoa ja ajastin. Sivu on responsiivinen, se luotiin HTML5:llä ja CSS3:lla, näkyy useimmissa selaimissa ja näyttää hyvältä mobiililaitteet.

Layla on yksi parhaista ilmaisista HTML-malleista tyylikkään paikkamerkin luomiseen. Hyvä värimaailma, oikea verkko ja tyylikäs ulkomuoto tekevät tästä mallista ihanteellisen käytettäväksi muotisivustoilla.

Erinomainen selainpohjainen malli tiukan tynkän luomiseen. Helppo muokata ja näyttää hyvin mobiililaitteissa. Siellä on ajastin ja mahdollisuus yhdistää melodia.

Tämä malli on puhdas ja moderni muotoilu. Plussat: mukautuva muotoilu, yhteydenottolomake, selaimen välinen yhteensopivuus. Malli luotiin resurssien avulla, kaikki kuvat ovat mukana.

Hyvä paikkamerkki, joka sopisi matkailusivustoille. Mallin ominaisuudet: 8 värimallia, W3C HTML/CSS-vahvistus, lähtölaskenta, yhteydenottolomake ja mahdollisuus tilata ilmoituksia, parallaksiefekti taustalla, navigointipalkki.

Pistoke, jolla on vakavia toimintoja. Malli on helppo muokata ja se on yhteensopiva useimpien selainten kanssa. Plussat: Google maps, ajastin, osio, johon voit lähettää tietoja tiimistäsi, alatunniste yhteystiedoilla.

UX-malli sopii useimmille verkkosivustoille. Pistokkeessa on animoitu ajastin, Yhteydenottolomake, kuvakkeet sosiaaliset verkostot. Malli on helppo muokata, eikä se vaadi erityisiä HTML/CSS-taitoja. Malli on responsiivinen ja selainlaajuinen.

Tyylikäs ja samalla toimiva pistoke. Ominaisuudet: 100 % responsiivinen suunnittelu, yhteensopivuus selaimien välillä, Google Maps, Twitter-integraatio, kaksi otsikotyyliä parallaksiefektillä ja liukusäätimellä. Siellä on myös ajastin, jolla voit nopeasti korjata sivuston aloituspäivän.

Tyylikäs HTML-malli, joka sopii useiden aiheiden verkkosivustoille. Pistokkeessa ei ole erityisiä kelloja ja pillejä, mutta siinä on kaikki mitä tarvitset: ajastin, keskus tekstilohko varten infoviesti, sosiaalisen verkoston kuvakkeet. Malli on responsiivinen ja näkyy täydellisesti mobiililaitteissa.

Viime aikoina Internetiin on ilmaantunut paljon uusia resursseja: osa on lanseerattu vasta äskettäin, osa on alkamassa ja osa on juuri aloittanut verkkokaupan tai muun projektin kehittämisen ja suunnittelee lanseeraamista puolen vuoden tai vuoden kuluttua.

Onko mahdollista käyttää joitain markkinointielementtejä jo ennen kuin projekti kaikkine toimivuuksineen on syntynyt? Epäilemättä! Yksi markkinoinnin ensimmäisistä vaiheista on kommunikointi vielä toimimattoman sivuston vierailijan kanssa tynkäsivujen tai ns. splash-sivujen avulla.

Monet ihmiset eivät käytä Splash-sivuja, joten heidän läsnäolonsa sivustolla antaa etua ja varhaisen sysäyksen kehitykselle. Kaikki pistokkeet eivät kuitenkaan toimi yhtä tehokkaasti. Alla on vinkkejä oikean aloitussivun luomiseen ja projektin käynnistämiseen tulevaisuudessa, kun sinulla on jo potentiaalinen yleisö.

Tehokkaan paikkamerkkisivun periaatteet

Paikkamerkit ovat pohjimmiltaan aloitussivuja, ja monet tehokkaiden aloitussivujen periaatteet koskevat niitä. Tarkastellaan lähemmin tärkeimpiä ja tarkastellaan muutamia esimerkkejä.

1. Tunne sivun yksinkertaistamisen rajat

Toisaalta sivun tulee olla mahdollisimman yksinkertainen. Mutta olisi virhe jättää vain viesti, että sivusto on kehitteillä.

Vierailijalla on looginen kysymys: minne päädyin ja miksi minun on suoritettava tämä tai se toiminto, joka minua pyydetään tekemään (esimerkiksi ottamaan yhteyttä puhelimitse). Lisää sivulle hieman enemmän tietoa, jotta se olisi mahdollisimman hyödyllinen sekä vierailijalle että sinulle.

2. Anna tietoja itsestäsi

Näytä vierailijalle, että hän on juuri siellä, missä hänen pitääkin olla. Kerro hänelle, missä hän käyttää lyhyttä tekstiä ja ranskalaiset viivat. Tämä on ensimmäinen kerta, kun tapaat henkilön, mistä yleensä aloitat?

3. Voit tehdä videotarkistuksen

Jotkut sivustot harjoittelevat videoarvostelujen lähettämistä. Tämä hyvä tapa kerro yhä selvemmin siitä, kuinka voit olla hyödyllinen vierailijalle.

Videoarvostelut ovat hyvä työkalu, mutta älä mene liioittelemaan. Olisi virhe ärsyttää kävijääsi kytkemällä automaattisesti päälle video- tai äänitehosteet, ellei tuleva sivustosi tietysti ole omistettu verkkopeleille.

4. Käytä logoa tai muuta toimialaasi liittyvää kuvaa

Sivustolla käyttämiesi kuvien tulee liittyä yrityksen toiminta-alueeseen tai projektin aiheeseen. Naiset ja kissat ovat mahtavia, mutta eivät aina sopivia. Tältä radioverkkosivuston tynkäsivu voi näyttää:

Ja tässä suunnittelijan luovuus näkyy hyvin, vaikka ei olekaan heti selvää, että sivusto on omistettu suunnittelulle.

5. Kerro meille, mitä odottaa

On hyvä, että olet olemassa ja aiot tulla lähemmäksi Internetin käyttäjiä, mutta kerro myös miksi ihmisten pitäisi palata sivustollesi myöhemmin? Mitä suunnitelmia sinulla on projektille tai sen toimivuudelle? Tai kenties jotain muuta?

Lisää juonittelua herättämään uteliaisuutta. Viestiä voidaan käyttää esimerkiksi juonitteluna siitä, että palvelusi on teknologinen läpimurto tai että yritys tarjoaa alennuksia tai ilmaistarjouksia ensimmäisille rekisteröityneille asiakkaille. Lisäpalvelut. Alla on esimerkki siitä, kuinka Netpeakin tyypit loivat juonittelua ennen 8p-konferenssin järjestämistä soittaen paljon keskustelua herättäneessä maailmanpäässä vuonna 2012. Tämä idea tuntui monista luovalta, ja he jakoivat linkin tynkäsivulle ystävilleen. sosiaalisissa verkostoissa.

Sinun ei tarvitse luoda juonittelua, vaan rohkaise henkilöä palaamaan myöhemmin. Aloitussivun ei pitäisi vain informoida kävijää, vaan myös rohkaista häntä jakamaan sivu ystävilleen ja palaamaan takaisin tulevaisuudessa.

6. Jätä yhteystietosi

Tulevan sivuston aiheesta riippuen joskus kannattaa jättää vain sähköpostiosoite, muissa tapauksissa tarkemmat tiedot, mukaan lukien toimiston fyysinen osoite ja aukioloajat.

Tulevaisuudessa sinun on luotava yhteisö. Tee tämä nyt käyttämällä valmiita työkaluja - sosiaalisia verkostoja. Sen lisäksi, että näiden linkkien läsnäolo lisää luottamusta yritykseen ja tulevaan sivustoon, yhteisöösi kuuluvat ihmiset ovat aina tietoisia uutisista resurssin kehittämisen tai lanseerauksen vaiheista.

Älä kuitenkaan sosiaaliset profiilit tyhjiä, täytä ne hyödyllisellä sisällöllä, jotta kohdeyleisölläsi on jotain tilattavaa. Ihmiset eivät pidä tai seuraa vähäpätöisistä tileistä, ei-valtuutetuista tileistä tai profiileista, joissa on tavallisia avatareja (kuten muna Twitterissä).

8. Aseta päivitysten tilauslomake

Sosiaalisten verkostojen käytön lisäksi liitä sähköpostiuutiskirjeitä. Kerätä sähköpostiosoitteet potentiaalinen yleisösi nyt. Voit lähettää heille viestin vasta kun sivusto on käynnistetty, tai voit tehdä sen säännöllisesti ja kertoa heille missä vaiheessa kehitys on tai jotain muuta tärkeää asiaasi ja tietysti hyödyllistä niille, jotka luottavat sinuun heidän kontaktejaan, näkökohtiaan .

Sähköpostin lähetyslomakkeen lisäksi voit käyttää muita viestintäkanavia asiakkaiden/yleisön kanssa, esimerkiksi blogia, sen lisäämistä aliverkkotunnukseen tai alikansioon ja standardin WordPressin asentamista sinne. Ehkä tällä blogilla ei ole tulevaisuudessa vain positiivista vaikutusta saapuvan markkinoinnin työkaluna, vaan se auttaa myös lisäämään resurssin arvovaltaa hakukoneiden silmissä.

9. Lisää toimintakehotus

Ensimmäinen tavoitteesi on rakentaa ensimmäinen yleisö ja saada ihmiset palaamaan, kun sivusto on julkaistu. Kutsumalla käyttäjää toimiin ilmoitat aikeistasi ja muistutat kävijää hänen vaihtoehdoistaan. "Tilaa", "Katso ensin", "Tule takaisin", "Ota yhteyttä", "Lue lisää meistä", "Seuraa meitä sosiaalisissa verkostoissa" jne. Käytä yhtä tai useampaa toimintakehotusta tynkäsivun koosta riippuen. Jos kirjoitat vain, että sivusto on rakenteilla, harvat nykyisistä vierailijoistasi palaavat sinne tulevaisuudessa.

Alla olevassa esimerkissä toimintakehotus sijaitsee oikeassa yläkulmassa nuolella ja myös jälleen sivun alareunassa ilmoituksen tilauslomakkeen kanssa.

10. Älä optimoi tynkäsivuja hakukoneita varten

Tietenkin tynkäsivut ovat hyviä myös hakukoneoptimoinnissa, koska voit aloittaa sivuston mainostamisen ilman, että sinulla on sitä. Vähintään resurssi on jo hakemistossa, korkeintaan linkit siihen voidaan jo julkaista sekä foorumeilla tai sosiaalisissa verkostoissa että painetussa mediassa.

Ja vaikka tynkäsivuja voidaan käyttää hakukoneoptimointiin, ne palvelevat enemmän markkinointitarkoituksia. On erittäin suositeltavaa olla pilaamatta ensivaikutelmaa resurssista SEO-teksteillä.

Toivon, että nämä vinkit auttavat sinua täyttämään ohjelmoijien tekniset tiedot nyt. Alla on kaksi muuta esimerkkiä motivaatiosta. :)

Keksi ideasi ja luo tynkäsivu jo tänään, jotta sinun ei tarvitse etsiä yleisöä, kun käynnistät sivustosi, vaan jatkat sen parissa työskentelemistä!

Kaunis verkkosivusto säilyy vierailijan muistissa hyvin pitkään, ja tämä on epäilemättä upeaa. Tänään haluamme puhua upeasta pistokkeesta sivustollesi, nimittäin interaktiivisesta animoidusta sivusta, joka on jatkuvasti liikkeessä sen lisäksi, että se reagoi hiiren kursoriin ja suorittaa toimintoja. Ajatuksena on luoda maa ja lentokone, jotka ovat jatkuvasti liukumassa; kun kohdistin liikkuu, lentokone muuttaa sijaintiaan. Tällainen interaktiivinen näyttää erittäin siistiltä ja miellyttävältä.

LÄHTEET

Tätä sivua voidaan käyttää verkkosivuston taustana, sivuna, jossa on pieni tekstiviesti, tai sivun paikkamerkkinä; joka tapauksessa et voi mennä pieleen. Tämä vaikutus saavutetaan jQuery-Three.js 3D -kirjaston ansiosta.

Vaihe 1. HTML

Merkinnämme ja tyylimme ovat melko yksinkertaisia, koska Three.js tekee kaiken työn, ja JS:ssä määrittämämme parametrit meidän tarvitsee vain kutsua näitä toimintoja määrittämällä id="world":

Tyylit ovat myös melko yksinkertaisia, joten emme jää niihin kiinni vaan siirrymme suoraan seuraavaan vaiheeseen.

Vaihe 2. JS

Kaiken tapahtuman käsittelyn suorittavat JS ja Three.js. Tällaisen asettelun toteuttamiseksi asetamme seuraavat arvot silmukka-, satunnaiselle tapahtumalle.

Muut värit = ( punainen: 0xf25346, keltainen: 0xedeb27, valkoinen: 0xd8d0d1, ruskea: 0x59332e, vaaleanpunainen: 0xF5986E, ruskeaTumma: 0x23190f, sininen: 0x68c3c0, vihreä: 0x68c3c0, vihreä: 0x68c3c0, violetti 26 5, ); var scene, kamera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderöijä, kontti; toiminto createScene() ( // Hae näytön leveys ja korkeus // ja käytä niitä säätämään // kameran kuvasuhdetta ja renderöijän kokoa. KORKEUS = window.innerHeight; WIDTH = window.innerWidth; // Luo kohtaus. scene = new THREE .Scene(); // Lisää FOV-sumutehoste kohtaukseen. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Luo kameran kuvasuhde = LEVEYS / KORKEUS; fieldOfView = 60 ; nearPlane = 1; farPlane = 10000; kamera = uusi KOLME.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Kameran sijainti kamera.sijainti.x = 0; kamera.sijainti.y = 150; kamera.sijainti.z = 100; // Luo renderöijä = new THREE.WebGLRenderer(( // Tee taustasta läpinäkyvä, anti-aliasing suorituskyky alpha: true, antialias: true )); // aseta renderöijän kooksi koko näytön koko renderer.setSize( WIDTH, HEIGHT); // ota käyttöön varjon renderöinti .shadowMap.enabled = true;//Lisää renderöijä DOM- ja DIV-tapahtumasäilöön = document.getElementById("maailma"); container.appendChild(renderer.domElement); //Responsiivisuus window.addEventListener("resize", handleWindowResize, false); ) //Funktion herkkyysfunktio handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispsherelight shadowLight ; toiminto createLights() ( // Värigradientti valo taivas, maa, intensiteetti hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Rinnakkaissäteet shadowLight = new THREE.DirectionalLight,DirectionalLight,.xffffff.); set(0, 350, 350); shadowLight.castShadow = true; // määritä projisoidun varjon näkyvä alue shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight. shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // Varjokartan koko shadowLight.shadow.mapSize. leveys = 2048; shadowLight .shadow.mapSize.height = 2048; // Lisää valoja kohtaukseen scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new KOLME. sylinterigeometria (600, 600, 1700, 40, 10); //kierto x-akselia pitkin geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //luo materiaali var mat = new THREE.MeshPhongMaterial(( väri: Colors.lightgreen, varjostus: THREE.FlatShading, )); //luo objektista mesh this.mesh = new THREE.Mesh(geom, mat); //vastaanota varjot this.mesh.receiveShadow = true; ) Orbit = function() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Aurinko = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( väri: Colors.yellow, varjostus: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Luo pilvelle tyhjä säilö this.mesh = new THREE.Object3D( ); // Kuution geometria ja materiaali var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( väri: Colors.white, )); var nBlocs = 3 + Math.floor(Math. satunnainen( ) * 3); for (var i = 0; i

Tämän seurauksena saamme upean sivustolaajennuksen, joka on reagoiva ja mukautuva.