Si të krijoni një faqe cung. Lini informacionin tuaj të kontaktit

Një cung është një faqe që vendoset në një sajt kur nuk është i disponueshëm për një arsye ose një tjetër. Për shembull, kur jeni duke finalizuar ose ndryshuar dizajnin e faqes dhe në këtë moment ai nuk është i disponueshëm ose shfaqet disi gabimisht. Do të ishte e këshillueshme që në këtë moment të vendosni një faqe cung, në të cilën do të shkruhet se faqja është në mirëmbajtje.

Pra, le të fillojmë ...

Ne do të krijojmë një vendmbajtes të thjeshtë me një imazh të sfondit dhe tekst që .

Le të krijojmë një dosje në kompjuter në të cilën do të vendosim të gjithë skedarët e nevojshëm për cung tonë.

Në këtë dosje do të krijojmë një dosje tjetër të quajtur imazhe. Në të do të vendosim imazhin tonë të sfondit dhe, ndoshta, imazhe të tjera që mund të nevojiten gjatë punës.

Hapni programin Notepad++ (ose një të ngjashëm, për shembull Notepad). Ne krijojmë dokument i ri. Tjetra - Skedari - Ruaj si, zgjidhni dosjen tonë me cung dhe ruajeni dokumentin me emrin index.html

Kjo është ajo që duhet të jetë tani në dosjen tonë:

Hapni skedarin index.html në redaktorin tonë (pasi ta ruani duhet të jetë i hapur për ju). Tani duhet të sigurohemi që kodimi i këtij skedari të jetë vendosur saktë. Për ta bërë këtë, shkoni te artikulli i menusë "Encodings" dhe klikoni në "Konverto në UTF-8".

Për të mos humbur aksidentalisht rezultatin e arritur gjatë punës, unë rekomandoj të ruani periodikisht dokumentin gjatë punës. Kjo mund të bëhet në menynë "File" ose me shkurtoren e tastierës "Ctrl + S".

Ne shkruajmë kodin e mëposhtëm në redaktues:

Çdo faqe interneti përbëhet nga këto etiketa.

Tani le të shtojmë një titull në faqen tonë, sepse nuk do të jetë shumë bukur kur dikush e hap dhe sheh index.html në titullin e skedës së shfletuesit (mund ta hapni faqen në shfletues dhe të shihni se çfarë ndodh). Për ta bërë këtë, shtoni kodin e mëposhtëm midis dhe:

Faqja është në mirëmbajtje

Foto e sfondit

Tani le të zgjedhim një imazh të sfondit për mbajtësin tonë të vendit dhe më pas të kthehemi te redaktimi i faqes.

Për ta bërë këtë, shkoni te Google Images dhe kërkoni një foto interesante që mund të shërbejë si sfond për faqen tonë. Është e rëndësishme të zgjidhni një imazh me një gjerësi prej të paktën 1920 piksele në mënyrë që faqja jonë të duket e mirë në ekrane të mëdha. Hyra në shiritin e kërkimit dhe zgjodha një nga fotot.

Hapni imazhin në madhësi të plotë dhe ruajeni në dosjen tuaj të imazheve. Pastaj e riemërtojmë. Le ta quajmë bg (mos harroni për formatin e imazhit, në rastin tim është jpg).

Ja çfarë mora unë. Kjo është një foto e qytetit të Çikagos. Sipas mendimit tim, është mjaft i përshtatshëm për imazhin e sfondit të faqes.

Ne bashkojmë një imazh të sfondit në faqe duke përdorur stilet CSS:

Faqja është në mirëmbajtje

Teksti do të përbëhet nga një titull dhe, në fakt, një paragraf teksti.

Faqja është në mirëmbajtje

Ja çfarë ndodhi:

Tani do të shtojmë kontaktet tona në mënyrë që vizitorët të mund të na kontaktojnë menjëherë, dhe të mos presin derisa të përfundojë puna në faqe.

Le të shtojmë 3 blloqe që përmbajnë telefonin, Email dhe Skype.

Faqja është nën mirëmbajtje Faqja është nën mirëmbajtje, kontrollojeni më vonë!

Faqja është aktualisht në proces e sipër punimet inxhinierike. Ju lutemi kthehuni më vonë ose na kontaktoni në një nga mënyrat e mëposhtme:

Tel.: 333-33-33

Email: [email i mbrojtur]

Skype: admsite_ru

E vetmja gjë që mbetet është të punohet me stilet.

Le ta zmadhojmë titullin, ta rreshtojmë në qendër dhe ta ulim më afër qendrës së ekranit.

Le të rrisim fontin e paragrafit të tekstit në njëzet piksel dhe të bëjmë një ndarje të vogël nga titulli. Ne gjithashtu do të bëjmë një kufi në fund të tekstit, i cili do ta ndajë atë nga kontaktet.

Le të bëjmë blloqe me kontakte në 3 kolona, ​​të rrisim fontin, të rreshtojmë çdo bllok në qendër dhe të ndryshojmë ngjyrën e tekstit.

Faqja është nën mirëmbajtje Faqja është nën mirëmbajtje, kontrollojeni më vonë!

Vendi aktualisht është duke u kryer punime teknike. Ju lutemi kthehuni më vonë ose na kontaktoni në një nga mënyrat e mëposhtme:

Tel.: 333-33-33

Email: [email i mbrojtur]

Skype: admsite_ru

Si rezultat, ne kemi një faqe mbajtëse vendesh që mund ta përdorim kur faqja po kalon punë teknike.

Kur një sajt është në pritje të hapjes ose është në rinovim, ekziston nevoja për të njoftuar vizitorët e sajtit se është gati të hapet. Dhe zgjidhja perfekte për këtë problem është krijimi faqe e uljes me njoftimin e duhur.

Ndërsa mjetet moderne të zhvillimit të uebit kanë evoluar, faqe si këto kanë evoluar nga faqe të thjeshta me tekst në zgjidhje më interesante.

Krijimi i një vendi të tillë për sitin rrit nivelin e pritshmërisë së vizitorëve, duke krijuar kështu interes mes tyre. Përveç njoftimit të thjeshtë, është gjithashtu e mundur të mblidhen informacione për përdoruesit e interesuar duke futur formularët e abonimit dhe reagime.

Në këtë tutorial, ne do të krijojmë vetëm një cung të tillë për një sajt, i cili do të përmbajë një formular abonimi dhe një kohëmatës numërimi mbrapsht, të zbatuar duke përdorur një shtojcë jQuery nga Keith Wood.

Materialet e nevojshme për mësimin:

• Çdo imazh sfondi
• Koha dhe durimi.

index.html - skedari kryesor i projektit

Dosja “js” – dosje me skriptet JavaScript/JQuery

dosja “img” - dosje me imazhe të projektit

Dosja "css" - dosje me fletët e stilit të projektit (skedarët css)

Le të fillojmë

Faza e parë e punës do të jetë lidhja me skedarin kryesor html të fletëve të stilit dhe bibliotekave jquery.
Ne përfshijmë skedarët brenda etiketës së kokës.

Së shpejti me Counter

HTML

Le të krijojmë shënim për dokumentin tonë html. Të gjithë elementët e faqes do të jenë brenda një etikete div me identifikuesin "container". Brenda këtij blloku do të kemi kokë, një numërues, një formular reagimi dhe një fund (blloku i poshtëm me të drejtë autori).

Faqja jonë e internetit do të vijë së shpejti

DUHET TE PRIT...

ME DËRGONI DETAJE PËR TË

E drejta e autorit - 1stwebdesigner.com - 2014

Vini re se e lamë div me ID "counter" bosh. Më vonë do ta përdorim këtë identifikues për ta lidhur atë me shtojcën tonë jquery dhe për të shtuar stile css në të.

CSS

Tani le të krijojmë një skedar css për projektin tonë, i cili do të përmbajë të gjitha stilet. Para së gjithash, le të shtojmë stilet për elementët kryesorë: trupi, h1, h2 dhe blloku me identifikuesin "enë". Për bllokun "enë", ne specifikojmë gjerësinë si përqindje në mënyrë që të ndryshojë në varësi të madhësisë së dritares së shfletuesit.

Për etiketën h1, aplikoni një transformim CSS3, i cili do ta lejojë atë të rrotullohet 360 gradë përgjatë boshtit X. Mund të lexoni më shumë rreth kësaj vetie.

Trupi ( ngjyra: #dadada; lartësia e rreshtit: 1,75; gjerësia: 100%; sfondi: url(../img/background.jpg) qendër; font-familja: "Open Sans"; ) h1,h2 (ngjyra: # fff; lartësia e rreshtit: 1.16667; rreshtimi i tekstit: në qendër; transformimi i tekstit: shkronja të mëdha; hija e tekstit: 2 px 2px 2px rgba(150,150,150,1); ) h1 (madhësia e shkronjave: 43 px; font-familje: font-familje: Montser: -pesha: 700; kufiri: 2 px i ndërprerë #fff; margjina-lart: 50 px; mbushja: 10 px; kursori: treguesi; -kit-webkit-tranzicioni: të gjitha 0.8s lehtësi; -moz-transition: të gjitha .8s lehtësi; -o-transition : të gjitha .8s lehtësi; tranzicioni: të gjitha .8s lehtësi; ) h1:hover ( -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o -transformoj: rotateX(360deg); transformim: rotateX(360deg); ) h2 (madhësia e shkronjave: 30px; pesha e shkronjave: 300; margjina e sipërme: 30px; ) .container ( gjerësia: 58%; diferenca: 40px automatike 0 ;) .detajet ( margjina-lart: 30 px; ngjyra: #fff; rreshtimi i tekstit: në qendër; hija e tekstit: 2px 2px 2px rgba(150,150,150,1); )

Butoni, futja, teksti (madhësia e shkronjave: 16 px; gjerësia maksimale: 100%; diferenca: 0; rrezja e kufirit: 0; rreshtimi vertikal: vija bazë; madhësia e kutisë së uebit: kutia kufitare; -moz-box -madhësia: kutia kufitare; madhësia e kutisë: kutia kufitare; ) zona e tekstit ( tejmbushja: automatik; rreshtimi vertikal: lart; ) hyrja, teksti (sfondi: #6e6e6e; sfondi: rgba (169,169,169,0.3); kufiri: 1 px solid #f4f4f4; ngjyra: #fff; pesha e shkronjave: 700; hapësira e shkronjave: 1 px; mbushja: 12 px; transformimi i tekstit: shkronja të mëdha; ) futja: fokusi, teksti: fokusi (skica: 0; ) butoni: hover, butoni :fokus, hyrje: fokus, hyrje: rri pezull ( sfond: #ff8721; ngjyra: #fff; skicë: 0; ) butoni, hyrja ( -webkit-appearance: butoni; kursori: treguesi; ) butoni, hyrja ( sfondi: #ffab00 ; -webkit-transition: të gjitha .5s; -moz-tranzicioni: të gjitha .5s; tranzicioni: të gjitha .5s; ) .form-fushë (pozicioni: relative; )

Hapi tjetër është krijimi i një stili ndër-shfletuesi për fushën e tekstit.

::-webkit-input-placeholder ( color: #fff; ) ::-moz-placeholder ( ngjyra: #fff; opacity: 1; ) ::-ms-input-placeholder ( ngjyra: #fff; opacity: 1; ) .mbajtësi i vendit ( ngjyra: #ff; )

Tani le të krijojmë stile për banakun tonë. Më lejoni t'ju kujtoj se në një dokument html ndodhet në një bllok div me identifikuesin "counter".

#counter ( margin-lart: 28px; ) .countdown_section ( ngjyra: #dadada; ekrani: inline-block; madhësia e shkronjave: 12px; rreshtimi i tekstit: në qendër; gjerësia: 25%; hapësira e shkronjave: 1px; kufiri majtas : 1px me vija #dadada; ngjyra e kufirit: rgba(218,218,218,0.8); mbushja: 42 px 12px 28 px; -madhësia e kutisë së internetit: kutia e kutisë; -box; text-hije: 2px 2px 2px rgba(150,150,150,1); transformimi i tekstit: shkronja të mëdha; font-familja: "Open Sans"; madhësia e shkronjave: 60 px; pesha e shkronjave: 700; hapësira midis shkronjave: normale; lartësia e rreshtit: 1; )

Tani le të shtojmë stile për formularin e komenteve. Gjerësia maksimale e formularit do të jetë 610 px dhe ne do të vendosim pozicionimin relativ për këtë formë (pozicioni:relativ). Le të vendosim butonin për të dërguar një mesazh në të djathtë të bllokut të tekstit dhe të vendosim pozicionimin e tij absolut (pozicioni:absolut).

#subscribe (max-width: 610px; pozicioni: relative; margin: 20px auto 0; ) #subscribe-form .form-field (margin-right: 180px; ) #subcribe_email (border-djathtas: 0; ) #subscribe-form .form-submit (lartësia: 50 px; pozicioni: absolute; djathtas: 0; lart: 0; gjerësia: 180 px; ) #subcribe_email,#subscribe_submit (gjerësia: 100%; shfaqja: bllok; lartësia: 55 px; )

Dhe në fund do të shtojmë vetitë për elementet e bllokut të fundores.

Fundi (madhësia e shkronjave: 13 px; rreshtimi i tekstit: në qendër; margjina në krye: 25 px; transformimi i tekstit: shkronja të mëdha; hija e tekstit: 2 px 2px 2px rgba (150,150,150,1); ) fundi i faqes a ( ngjyra: #fff; )

Për ta bërë faqen tonë të përgjegjshme, ne do të shtojmë pyetje mediatike. Mund të lexoni më shumë për këtë pronë (anglisht)

Ekrani @media vetëm dhe (gjerësia maksimale: 720 pikselë) ( footer(margin-bottom: 40px; ) ) vetëm ekran @media dhe (max-width: 680px) ( .countdown_amount ( madhësia e shkronjave: 48px; ) ) vetëm @media ekrani dhe (gjerësia maksimale: 540 pikselë) ( .një e gjysmë ( gjerësia: 100%; ) .seksioni_countdown ( mbushja: 28px 6px 20px; ) #subcribe_email(kufiri: 1px solid #fff;) #subscribe-form .forms-submit .forms-submit .forms ( marzhi: 0 automatik; djathtas: automatik; pozicioni: statik; ) #subscribe-form .form-field ( margjina: 0 0 14px; ) ) Ekrani @media vetëm dhe (gjerësia maksimale: 480px) ( h1 ( madhësia e shkronjave : 30px;) h2(madhësia e shkronjave: 25px;) .seksioni_countdown (kufi: asnjë; mbushja: 20px 20px; madhësia e shkronjave: 13px; rreshtimi i tekstit: në qendër; ) .countdown_amount ( font-size: 4 font-size: 4 0 10px 0; ) #counter(width: 30%; margin: 0 auto;) ) @media vetëm ekran dhe (max-width: 360px) ( h2(font-size: 22px;) .countdown_section ( mbushje: 21px 26px2 15px;) .countdown_amount (madhësia e shkronjave: 36px;) )

Nëse kontrolloni shfaqjen e faqes në shfletues, duhet të duket kështu:

JQuery

Ju lutemi vini re se ne nuk shfaqim një numërues. Për ta bërë atë të shfaqet, duhet të shtoni kodin e mëposhtëm përpara etiketës së mbylljes së trupit. Por para kësaj, shkarkoni skedarin e shtojcës, duke specifikuar rrugën drejt skedarit.

Pastaj shtoni kodin e mëposhtëm për të shfaqur numëruesin tonë. Ju mund ta ndryshoni datën në njehsor sipas dëshirës tuaj. Mjafton të specifikoni datën e dëshiruar brenda parametrit "data e nisjes".

$(document).ready(function() ( var nismë = data e re (2014, 6 - 1, 7); $("#counter").countdown(( deri: data e lëshimit )); ))(jQuery);

konkluzioni

urime! Sapo keni krijuar një faqe interesante të kohëmatësit të numërimit mbrapsht. Kjo faqe do t'ju lejojë të informoni vizitorin tuaj për datën e fillimit të faqes tuaj dhe të mos e humbni atë.

Shpresoj se ju ka pëlqyer ky mësim. Lini komentet dhe pyetjet tuaja, unë jam gjithmonë i lumtur t'u përgjigjem atyre.

Nëse po planifikoni një ridizajnim të faqes suaj të internetit, duke kryer mirëmbajtje rutinë në të, ose po hapni një burim të ri ueb, atëherë është shumë e rëndësishme që vizitorët të mos përshëndeten me një faqe të zbrazët. Njerëzit që vizitojnë faqen do të humbasin në misteret e asaj që po ndodh, dhe kjo nuk është shumë e mirë. Është mirë që të kujdeseni për përdoruesit dhe t'i informoni ata për hapjen ose rifillimin së shpejti të faqes duke përdorur një faqe të veçantë HTML. Në gjuhën e zakonshme, një faqe e tillë quhet "cung". Rëndësia e tij vështirë se mund të mbivlerësohet, veçanërisht nëse doni të flisni për faqen tuaj dhe ta promovoni atë pak. Ka dy lloje cung: është ose një faqe statike që u tregon përdoruesve informacionin që u nevojitet, ose një faqe që ngjall kureshtje dhe e detyron vizitorin, për shembull, të abonohet në njoftime. FreelanceToday ju ofron 10 shabllone HTML falas për të krijuar mbajtëse tërheqëse për faqet tuaja të internetit.

Heartbeat është një shabllon i thjeshtë dhe elegant HTML. Imazhi i zymtë i sfondit njëngjyrëshe dhe kohëmatësi i numërimit mbrapsht e bëjnë këtë shtojcë ideale për faqet e internetit të biznesit.

Modeli i Hënës është i shkëlqyeshëm për PR të faqes në internet. Ka disa pika në faqe ku mund të vendosni informacion i rendesishem dhe kohëmatësin e numërimit mbrapsht. Faqja është reaguese, është krijuar duke përdorur HTML5 dhe CSS3, shfaqet në shumicën e shfletuesve dhe duket mirë në pajisje celulare.

Layla është një nga shabllonet më të mirë HTML falas për të krijuar një vendmbajtes elegant. Skema e mirë e ngjyrave, rrjetë e saktë dhe elegante pamjen e bëjnë këtë shabllon ideal për t'u përdorur në faqet e internetit të modës.

Një shabllon i shkëlqyer ndër-shfletuesi për krijimin e një cung të rreptë. Lehtë për t'u personalizuar dhe shfaqur mirë në pajisjet celulare. Ekziston një kohëmatës numërimi mbrapsht dhe aftësia për të lidhur një melodi.

Ky shabllon është i pastër dhe dizajn modern. Të mirat: dizajni adaptiv, forma e kontaktit, pajtueshmëria me shfletuesin. Shablloni u krijua duke përdorur burime, të gjitha imazhet janë të përfshira.

Një vendmbajtës i mirë që do të ishte i përshtatshëm në faqet e internetit të turizmit. Karakteristikat e shabllonit: 8 skema ngjyrash, vërtetim W3C HTML/CSS, numërimi mbrapsht, formulari i kontaktit dhe aftësia për t'u abonuar në njoftime, efekt paralaks në sfond, shirit navigimi.

Një prizë që ka funksionalitet serioz. Modeli është i lehtë për t'u personalizuar dhe i pajtueshëm me shumicën e shfletuesve. Pro: Google Maps, kohëmatës i numërimit mbrapsht, seksioni ku mund të postoni informacione për ekipin tuaj, fundi me informacionin e kontaktit.

Modeli UX është i përshtatshëm për shumicën e faqeve të internetit. Spina ka një kohëmatës të animuar, Forma e Kontaktit, ikona rrjete sociale. Modeli është i lehtë për t'u personalizuar dhe nuk kërkon njohuri të veçanta të HTML/CSS. Modeli është i përgjegjshëm dhe ndër-shfletues.

Prizë elegant dhe në të njëjtën kohë funksionale. Veçoritë: dizajn 100% reagues, pajtueshmëri me ndër-shfletuesit, Google Maps, integrim në Twitter, dy stile të kokës me efekt paralaks dhe rrëshqitës. Ekziston gjithashtu një kohëmatës numërimi mbrapsht ku mund të korrigjoni shpejt datën e nisjes së faqes.

Një shabllon elegant HTML i përshtatshëm për faqet e internetit të temave të ndryshme. Spina nuk ka ndonjë zile dhe bilbil të veçantë, por ka gjithçka që ju nevojitet: kohëmatës, qendror bllok teksti Për mesazh informacioni, ikonat e rrjeteve sociale. Modeli është i përgjegjshëm dhe shfaqet në mënyrë të përsosur në pajisjet celulare.

Kohët e fundit, shumë burime të reja janë shfaqur në internet: disa janë lançuar kohët e fundit, të tjera janë gati të fillojnë, dhe disa sapo kanë filluar të zhvillojnë një dyqan online ose një projekt tjetër dhe po mendojnë ta lansojnë atë pas gjashtë muajsh ose një viti.

A është e mundur të përdoren disa elementë marketingu edhe para se të lind projekti me gjithë funksionalitetin e tij? Pa dyshim! Një nga fazat e para të marketingut është komunikimi me vizitorin e një faqeje që ende nuk po funksionon duke përdorur faqet cung ose të ashtuquajturat faqe splash.

Jo shumë njerëz përdorin faqe Splash, kështu që prania e tyre në sit jep një avantazh dhe një shtysë të hershme për zhvillim. Megjithatë, jo çdo prizë do të funksionojë në mënyrë të barabartë në mënyrë efektive. Më poshtë janë disa këshilla se si të krijoni faqen e duhur të uljes dhe të nisni një projekt në të ardhmen, duke pasur tashmë një audiencë të mundshme.

Parimet e një Faqe Mbajtëse Efektive

Vendmbajtësit janë në thelb faqe uljeje dhe shumë nga parimet e faqeve të uljes efektive zbatohen për to. Le të hedhim një vështrim më të afërt në ato më të rëndësishmet dhe të shohim disa shembuj.

1. Njihni kufijtë për thjeshtimin e një faqeje

Nga njëra anë, faqja duhet të jetë sa më e thjeshtë. Por do të ishte gabim të lihej vetëm një mesazh se faqja është në zhvillim e sipër.

Vizitori ka një pyetje logjike: ku përfundova dhe pse më duhet të kryej këtë apo atë veprim që më kërkohet të bëj (për shembull, kontakt me telefon). Shtoni pak më shumë informacion në faqe, duke e bërë atë sa më të dobishme si për vizitorin ashtu edhe për ju.

2. Jepni informacion për veten tuaj

Tregojini vizitorit se ai është pikërisht aty ku duhet të jetë. Tregojini atij se ku po përdor një tekst të shkurtër dhe listë me pika. Kjo është hera e parë që takoni një person, ku e filloni zakonisht?

3. Mund të bëni një rishikim video

Disa site praktikojnë postimin e rishikimeve të videove. Kjo mënyrë e mirë tregoni gjithnjë e më qartë se si mund të jeni të dobishëm për vizitorin.

Rishikimet e videove janë një mjet i mirë, por mos e teproni. Do të ishte gabim të bezdisni vizitorin tuaj me ndezjen automatike të efekteve video ose audio, përveç nëse, sigurisht, faqja juaj e ardhshme i dedikohet lojërave në internet.

4. Përdorni një logo ose imazhe të tjera të lidhura me industrinë tuaj

Imazhet që përdorni në sit duhet të lidhen me fushën e aktivitetit të kompanisë ose temën e projektit. Gratë dhe macet janë të shkëlqyera, por jo gjithmonë të përshtatshme. Kjo është se si mund të duket një faqe cung për një uebsajt radioje:

Dhe këtu kreativiteti i stilistit shfaqet mirë, megjithëse nuk është menjëherë e qartë se faqja do t'i kushtohet dizajnit.

5. Na tregoni se çfarë të presim

Është mirë që ekzistoni dhe planifikoni të afroheni më shumë me përdoruesit e internetit, por gjithashtu na tregoni pse njerëzit duhet të kthehen në faqen tuaj më vonë? Cilat janë planet tuaja për projektin apo funksionalitetin e tij? Apo ndoshta diçka tjetër?

Shtoni intrigën për të ngjallur kuriozitet. Për shembull, një mesazh mund të përdoret si intrigë se shërbimi juaj do të jetë një përparim teknologjik ose se kompania do të ofrojë zbritje ose pagesa falas për klientët e parë të regjistruar. Shërbime shtesë. Më poshtë është një shembull se si djemtë nga Netpeak krijuan intriga përpara se të organizonin konferencën 8p, duke luajtur në fundin e shumëpërfolur të botës në vitin 2012. Kjo ide iu duk kreative shumëkujt dhe ata ndanë lidhjen në faqen cung me miqtë e tyre në rrjetet sociale.

Nuk duhet të krijoni intriga, thjesht inkurajoni personin që të kthehet më vonë. Faqja e uljes jo vetëm që duhet të informojë vizitorët, por edhe t'i inkurajojë ata të ndajnë faqen me miqtë e tyre dhe të kthehen në të ardhmen.

6. Lini informacionin tuaj të kontaktit

Në varësi të temës së faqes së ardhshme, ndonjëherë është e përshtatshme të lini vetëm një adresë emaili, në raste të tjera - informacion më të detajuar, duke përfshirë adresën fizike të zyrës dhe orët e saj të hapjes.

Në të ardhmen do t'ju duhet të krijoni një komunitet. Bëni këtë tani duke përdorur mjete të gatshme - rrjetet sociale. Përveç faktit që prania e këtyre lidhjeve do të rrisë besimin në kompani dhe faqen e ardhshme, njerëzit e përfshirë në komunitetin tuaj do të jenë gjithmonë të vetëdijshëm për lajmet në lidhje me fazat e zhvillimit ose lëshimit të burimit.

Megjithatë, mos profilet sociale bosh, mbushini ato me përmbajtje të dobishme në mënyrë që audienca juaj e synuar të ketë diçka për t'u abonuar. Njerëzit nuk pëlqejnë ose ndjekin llogaritë me autoritet të ulët, llogaritë me autoritet zero ose profile me avatarë standardë (si një vezë në Twitter).

8. Vendosni një formular abonimi për përditësime

Përveç përdorimit të rrjeteve sociale, lidhni buletinet me email. Mblidhni adresat e emailit audienca juaj e mundshme tani. Ju mund t'i dërgoni një mesazh vetëm kur faqja hapet, ose mund ta bëni rregullisht, duke i informuar në çfarë faze është zhvillimi ose disa të tjera të rëndësishme në temën tuaj dhe, natyrisht, të dobishme për ata njerëz që ju besojnë kontaktet e tyre, aspektet .

Përveç formularit për dërgimin e emailit, mund të përdorni kanale të tjera komunikimi me klientët/audiencën, për shembull, një blog, duke e shtuar atë në një nën-domain ose nënfolder dhe duke instaluar WordPress standard atje. Ndoshta ky blog në të ardhmen jo vetëm që do të ketë një ndikim pozitiv si një mjet marketingu në hyrje, por do të ndihmojë gjithashtu në rritjen e autoritetit të burimit në sytë e motorëve të kërkimit.

9. Shto një thirrje për veprim

Qëllimi juaj i parë është të krijoni një audiencë fillestare dhe t'i bëni njerëzit të kthehen pasi faqja të jetë e hapur. Duke thirrur përdoruesin në veprim, ju komunikoni qëllimet tuaja dhe i kujtoni vizitorit opsionet e tyre. “Abonohu”, “Shiko së pari”, “Kthehu”, “Na kontakto”, “Lexo më shumë për ne”, “Na ndiqni në rrjetet sociale” etj. Përdorni një ose më shumë thirrje për veprim në varësi të madhësisë së faqes cung. Nëse thjesht shkruani se siti është në ndërtim e sipër, atëherë pak nga vizitorët tuaj aktualë do të kthehen në të në të ardhmen.

Në shembullin më poshtë, thirrja për veprim ndodhet lart djathtas me një shigjetë, dhe gjithashtu përsëri në fund të faqes, së bashku me formularin e abonimit të njoftimit.

10. Mos i optimizoni faqet cung për motorët e kërkimit

Sigurisht, faqet cung janë gjithashtu të mira për SEO, pasi mund të filloni të promovoni një faqe pa pasur një të tillë. Në minimum, burimi do të jetë tashmë në indeks; në maksimum, tashmë mund të postoni lidhje me të si në forume, ashtu edhe në rrjetet sociale, dhe në median e shkruar.

Dhe ndërsa faqet cung mund të përdoren për SEO, ato shërbejnë më shumë për një qëllim marketingu. Rekomandohet fuqimisht që të mos prishni përshtypjen e parë të një burimi me tekst SEO.

Shpresoj se këto këshilla do t'ju ndihmojnë të plotësoni specifikimet teknike për programuesit tani. Më poshtë janë dy shembuj të tjerë për motivim. :)

Dilni me idenë tuaj dhe krijoni një faqe cung sot, në mënyrë që kur të hapni faqen tuaj, të mos keni nevojë të kërkoni një audiencë, por të vazhdoni të punoni me të!

Një faqe interneti e bukur mbetet në kujtesën e vizitorëve për një kohë shumë të gjatë, dhe kjo është padyshim e mrekullueshme. Sot do të donim të flisnim për një prizë të mrekullueshme për faqen tuaj, përkatësisht një faqe të animuar interaktive që do të jetë vazhdimisht në lëvizje, përveç përgjigjes ndaj kursorit të miut dhe kryerjes së veprimeve. Ideja është të krijohet një tokë dhe një aeroplan që do të jetë vazhdimisht në rrëshqitje; kur kursori lëviz, avioni do të ndryshojë pozicionin e tij. Ky lloj interaktivi duket shumë i lezetshëm dhe i këndshëm.

BURIMET

Kjo faqe mund të përdoret si një sfond uebsajti, një faqe me një mesazh të vogël me tekst ose një vendmbajtës në një faqe; në çdo rast, nuk mund të gaboni. Ky efekt arrihet falë bibliotekës 3D jQuery-Three.js.

Hapi 1. HTML

Shënimi dhe stilet tona do të jenë mjaft të thjeshta, pasi Three.js do të bëjë të gjithë punën, dhe parametrat që specifikuam në JS, gjithçka që duhet të bëjmë është t'i thërrasim këto funksione duke caktuar id="world":

Stilet janë gjithashtu mjaft të thjeshta, kështu që ne nuk do të ndalemi në to dhe do të kalojmë direkt në hapin tjetër.

Hapi 2. JS

I gjithë përpunimi i ngjarjeve do të kryhet nga JS dhe Three.js. Për të zbatuar një plan urbanistik të tillë, ne vendosim vlerat e mëposhtme për ngjarjen e rastësishme të ciklit.

Var Ngjyra = ( e kuqe: 0xf25346, e verdhë: 0xedeb27, e bardhë: 0xd8d0d1, kafe: 0x59332e, rozë: 0xF5986E, kafe E errët: 0x23190f, blu: 0x68c3c4 0x68c3c4 0x68c3c4 0x68c3c4 0x68c3c4, jeshile: 0x68d0d1, jeshile: 0x68d0d1, e gjelbër: 0x59332e 0x62926 5, ); skena var, kamera, fusha e pamjes, raporti i aspektit, aeroplani afër, rrafshi i largët, LARTËSIA, GJERËSIA, renderer, kontejner; funksioni createScene() ( // Merrni gjerësinë dhe lartësinë e ekranit // dhe përdorni ato për të rregulluar // raportin e pamjes së kamerës dhe madhësinë e interpretuesit. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Krijo skenën. skena = e re THREE .Skena (); // Shtoni një efekt mjegull FOV në skenë. skenë.mjegull = i ri THREE.Fog(0xf7d9aa, 100, 950); // Krijo një raport të aspektit të kamerës = GJËRËSIA / LARTËSIA; fusha e pamjes = 60 ; aeroplani afër = 1; aeroplani i largët = 10000; kamera = THREE.PerspectiveCamera e re (fusha e pamjes, raporti i aspektit, aeroplani afër, rrafshi i largët); // Kamera e pozicionit të kamerës. pozicioni.x = 0; kamera. pozicioni.y = 150; kamera. pozicioni.z = 100; // Krijo një renderer renderer = i ri THREE.WebGLRenderer (( // Bëje sfondin transparent, performancë kundër alfas: e vërtetë, antialias: e vërtetë)); // vendosni madhësinë e interpretuesit në renderer.setSize ( WIDTH, HEIGHT); // aktivizoni interpretimin e hijeve .shadowMap.enabled = e vërtetë;//Shto Renderer në kontejnerin e ngjarjeve DOM dhe DIV = document.getElementById ("botë"); container.appendChild(renderer.domElement); //Responsiveness window.addEventListener("ridimensioni", handleWindowResize, false); ) //Përgjegjshmëria e funksionit të funksionit handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) varietet, hemispshereL hijeDrita; funksioni createLights() ( // Gradient ngjyrash i dritës qielli, terreni, intensiteti hemisferaDrita = e re THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Rrezet paralele shadowLight = THREE.DirectionalLight.DirectionalLight. set(0, 350, 350); shadowLight.castShadow = e vërtetë; // përcaktoni zonën e dukshme të hijes së projektuar 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; // Madhësia e hartës së hijes shadowLight.shadow.mapSize. gjerësia = 2048; shadowLight .shadow.mapSize.lartësia = 2048; // Shtoni dritat në skenën e skenës.add(hemisphereLight); scene.add(shadowLight); ) Land = funksion() (var geom = TREE e re. Gjeometria e cilindrit(600, 600, 1700, 40, 10); //rotacion përgjatë boshtit x gjeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //krijo një material var mat = i ri THREE.MeshPhongMaterial(( ngjyra: Colors.gjelbër e lehtë, hije: THREE.FlatShading, )); //krijoni një rrjetë të objektit this.mesh = new THREE.Mesh(gjeom, mat); //receive shadows this.mesh.receiveShadow = e vërtetë; ) Orbitë = funksion() ( var geom = THREE.Object3D (); this.rrjetë = gjeom; //this.mesh.add(Dielli); ) Sun = funksion() ( this.rrjetë = THREE.Object3D i ri var sunGeom = THREE.SphereGeometry e re (400, 20, 10); var sunMat = THREE.MeshPhongMaterial i ri (( ngjyra: Ngjyrat. e verdhë, hije: THREE.FlatShading, )); var sun = THREE.Rrjetë e re(sunGeom sun. ); // Gjeometria e kubit dhe materiali var geom = i ri THREE.DodecahedronGeometria(20, 0); var mat = THREE.MeshPhongMaterial i ri (( ngjyra: Ngjyrat. e bardha, )); var nBlloqe = 3 + Kati matematikor (Mat. rastësor( ) * 3); për (var i = 0; i

Si rezultat, ne marrim një shtojcë të mrekullueshme të faqes me përgjegjshmëri dhe përshtatshmëri.