V tomto článku nájdete informácie ako presmerovať všetku návštevnosť a všetkých návštevníkov stránky na stránku s informáciami o údržbe počas aktualizácie stránky.

Ukážem vám ako vytvorte zástupnú stránku s informáciami o vykonávanej práci, Ako uveďte stránku do režimu údržby a ako ho vrátiť online bez reštartovania Apache.

Dozviete sa ako presmerovať premávku virtuálny hostiteľ Apache na stub page použitie ako konfigurácia VirtualHost, takže .HTAccess súbor.

Vytvorenie zástupnej stránky

Najprv musíte vytvoriť 2 súbory v koreňovom adresári stránky (koreň dokumentu):

Vytvorte stránku údržba.html, na ktorý budú návštevníci presmerovaní a ktorý ich o tom informuje na stránke prebieha údržba.

Ako príklad môžete použiť nasledujúci HTML kód útržkové stránky(ukážka):

Webová stránka zatvorená z dôvodu údržby

Ospravedlňujeme sa za nepríjemnosti, ale tento moment Na stránke prebieha údržba.

Čoskoro budeme opäť online!

V koreňovom adresári lokality (koreň dokumentu) vytvorte prázdny súbor S menom údržbu.umožniť.

Použijeme na ZAPNUTIE a VYPNUTIE stub bez reštartovania Apache.

Nakonfigurujeme Apache tak, že keď sa nájde súbor údržbu.umožniť v koreňovom adresári stránky bude režim zapnutý Údržba a všetci návštevníci stránky budú presmerovaní na stub stránku. V opačnom prípade (súbor údržbu.umožniť chýba), stránka bude fungovať normálne.

Ak teda potrebujeme povoliť presmerovanie stránok počas údržby, vytvoríme prázdny súbor údržbu.umožniť.

A keď potrebujeme po údržbe vráťte stránku online, súbor jednoducho vymažeme údržbu.umožniť.

Presmerujte Apache Vhost na Stub Page

Pridajte nasledujúce pravidlá do svojej konfigurácie Vhost ( Apache VirtualHost) Pre presmerovať všetkých návštevníkov lokality na stub stránku:

RewriteEngine On RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000 RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f RewriteCond %(SCRIPT!_maintenanceFILENAME.html) RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Sada hlavičiek Cache-Control "max-age=0, no-store"

Reštartujte Apache, aby sa zmeny prejavili:

# apachectl pôvabný

Teraz môžete ZAPNÚŤ a VYPNÚŤ režim údržby lokality pomocou súboru údržbu.umožniť bez reštartovania Apache zakaždým.

Presmerujte na Stub Page pomocou HTAccess

Pre presmerovanie všetkých návštevníkov na stub stránku, vložte nasledujúci kód .htaccess súbor umiestnený v koreňovom adresári stránky:

Tento kus musí byť vložený pred všetky ostatné presmerovania a stavy.

RewriteEngine On RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000 RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f RewriteCond %(SCRIPT!_maintenanceFILENAME.html) RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Sada hlavičiek Cache-Control "max-age=0, no-store"

Vysvetlenie

1. Zapnite Rewrite Engine.

RewriteEngine On

2. (voliteľné) Vylúčte svoju IP adresu. Pomocou tejto direktívy sa vyhnete presmerovaniu prevádzky zo zadanej adresy IP na adresu maintenance.html.

RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000

Môžete zadať viacero adries IP:

RewriteCond %(REMOTE_ADDR) !^192\.168\.0\.1 RewriteCond %(REMOTE_ADDR) !^192\.168\.1\.100 RewriteCond %(REMOTE_ADDR) !^172\.16\.10\. 15

3. Uistite sa, že súbor maintenance.html existuje.

RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f

4. Skontrolujte existenciu súboru maintenance.enable (touto kontrolou zapíname a vypíname režim údržby).

RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f

5. Toto pravidlo potrebujeme, aby sme zabránili zacykleniu.

RewriteCond %(SCRIPT_FILENAME) !maintenance.html

6. Vlastne 503. presmerovanie na stub page.

RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html

503 služba nedostupná— Stavový kód HTTP, čo znamená, že server dočasne nemôže spracovať požiadavky cez technické dôvody(údržba, preťaženie a pod.).

7. Vypnite ukladanie do vyrovnávacej pamäte.

Sada hlavičiek Cache-Control "max-age=0, no-store"

Týmto spôsobom listujete webovými stránkami a otvárate tie najobľúbenejšie. S rýchlym a spoľahlivým internetovým pripojením máte istotu, že môžete okamžite otvoriť akúkoľvek webovú stránku. A zrazu na neho narazíte. Na stránku, ktorá sa neotvorí z technických príčin vyžadujúcich odstránenie. Je to nepríjemné, však? Návštevník/používateľ – samozrejme. Pre majiteľa tohto webu je však situácia oveľa komplikovanejšia. Schopný spôsobiť akékoľvek problémy. Môžete stratiť predplatiteľov a samozrejme znížiť ziskovosť zdroja. Takýmto nehodám sa nedá predísť, no zabrániť im nemožno. Existujú však veci, ktoré vlastníci webových stránok môžu urobiť, aby zabezpečili, že ich návštevníci a odberatelia budú mať aj naďalej prístup k informáciám o postupe obnovy ich stránok.

Šablóny pre online stránky, ktoré sa pripravujú na spustenie a prechádzajú rekonštrukciou, sú veľmi užitočné veci, ktoré pomáhajú udržať návštevníkov a predplatiteľov na stránke aj napriek technickým problémom a zdĺhavým reštaurátorským prácam. Trpezlivosť vašich návštevníkov navyše môžu predĺžiť aj skutočne originálne či odvážne dizajnové riešenia.

Dnes ponúkame vlastníkom a dizajnérom webových stránok výber z 50 úhľadných šablón stránok pred spustením a renovácie, ktoré im pomôžu chrániť ich pred zlyhaním webových stránok a inými nehodami. Všetky uvedené šablóny zaplatené, ale sú dosť lacné. Neváhajte a prezrite si tento skvelý zoznam a vyskúšajte vzorky v akcii.

Zvláštnosti:
Na výber šesť rôznych farebných variantov
Formulár na odber bulletinu
štítky formulárov jQuery
Vďaka dobre naformátovaným súborom PSD je úprava hračkou

Zvláštnosti:
Na výber dve farebné schémy
jQuery počítadlo času pred spustením
Prihláste sa na odber e-mailových noviniek prostredníctvom služby FeedBurner
Možnosť pripojenia na sociálnu sieť

Zvláštnosti:
4 farebné možnosti
Formulár na odber s potvrdzovacím poľom a PHP
Animované zobrazenie stupňa pripravenosti v percentách
Platné značenie XHTML + CSS3

Zvláštnosti:
Formulár predplatného e-mailu AJAX
6 farebných možností
Na základe rámu modulárneho grid 960 Grid System
Prešiel validáciou XHTML podľa štandardu strednej verzie 1 .0

Zvláštnosti:
Jednoduché prispôsobenie počítadla času do začiatku
Pripojenie newsletterov na Twitteri
Tri rôzne farebné možnosti

Zvláštnosti:
Animované počítadlo času jQuery + displej pripravenosti
Automatický výstup textovej pomoci o stupni pripravenosti v percentách
Textový súhrnný súbor s údajmi o predplatiteľoch (NEPOTREBUJE SA DATABÁZA)
Plne funkčný AJAX formulár spätná väzba+ validácia

Zvláštnosti:
Kompatibilné prehliadače: FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Lepkavé označenie
Obsiahnuté súbory: CSS súbory, HTML súbory, JPG obrázok, JS súbory, PSD (vrstvené), PHP súbory
Zahrnutý súbor PSD

Zvláštnosti:
Vybudovaná oblasť rolovania pomocou jQuery, na pridanie veľkého množstva textu, ak je to potrebné
Ľahko upraviteľné kódovanie HTML doplnené o pohodlný dokumentačný súbor
Zahrnutý súbor PSD
Úhľadný animovaný posúvač zobrazujúci priebeh projektu (napr. dokončené na 50 %)

Zvláštnosti:
Vysokokvalitné kódovanie XHTML a CSS s úpravami pre IE6 a 7, zaisťujúce jeho funkčnosť vo všetkých moderných prehliadačoch
3 farebné prevedenia – šedá/modrá/červená
Ajax formulár „E-mailové aktualizácie“
Kompletná dokumentácia a pokyny vo formáte PDF

Zvláštnosti:
Spoľahlivé HTML kódovanie
Obsiahnuté súbory: CSS súbory, HTML súbory, JS súbory, PSD (vrstvené), PHP súbory
Zahrnutý súbor PSD

Zvláštnosti:
Beztabuľkové rozloženie CSS
Kompatibilita medzi prehliadačmi a vizuálna príťažlivosť
Rýchlosť a jednoduchosť inštalácie
Automatická odpoveď založená na Ajaxe

Zvláštnosti:
6 farebné schémy(klinček, matná modrá, svetlozelená, tmavooranžová, fialová a farby suchej trávy)
Podrobný vrstvený dokument Photoshopu
Univerzálne počítadlo času do spustenia vášho webu
Pripojte sa k službe Twitter a zdieľajte svoje najnovšie poznámky

Zvláštnosti:
Podporuje hlavné prehliadače: Firefox, IE6, 7, 8, Safari 3, 4, Chrome, Opera 9, 10
Vysokokvalitné značenie XHTML podľa štandardu strednej verzie 1 .0/CSS
Koláčový graf s hodnotami od 0 do 100% s 10% delením, jednoduché použitie. Obsahuje plne vrstvený súbor PSD
(odkaz na stiahnutie bezplatného písma je v dokumentácii)

Zvláštnosti:
HTML 5 + CSS3
Plne funkčný formulár predplatného emailu AJAX - databáza zapnutá založené na MySql nepotrebovať
Zmena fontov pomocou metódy CUFON
Na výber je celý rad programov na rozpoznávanie pre mobilné prehliadače

Zvláštnosti:
Kompatibilné prehliadače: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
Jasnosť v dizajne
Zahrnutý súbor PSD
Lepkavé označenie

Zvláštnosti:
Vrstvené súbory PSD
Kompatibilné prehliadače: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Obsiahnuté súbory: súbory CSS, súbory HTML, obrázok JPG, súbory JS, PNG (vrstvené), PSD (vrstvené), súbory PHP
Zahrnutý súbor PSD

Zvláštnosti:
Kvalitné značky XHTML a CSS, ktoré boli skontrolované na správnosť a overenie W3C...
počítadlo jQuery
Vstavaný poštový program PHP na odosielanie e-maily
Cufon písmo zadarmo

Zvláštnosti:
7 možností farebná schéma: modrá, zelená, žltá, červená, fialová, šedá, dúhová
Počítadlo jQuery (s plynulými prechodmi)
Formulár spätnej väzby AJAX/PHP
Skvelý vstavaný mechanizmus zasielania správ na Twitteri

Zvláštnosti:
Plne funkčný, platný formulár spätnej väzby PHP/Ajax
Štyri rôzne farebné možnosti
Zobrazenie dní, hodín, minút a dokonca sekúnd zostávajúcich do spustenia

Zvláštnosti:
Stredná verzia XHTML 1.0
Zobrazenie stupnice pripravenosti
Počítadlo
Vrstvený súbor PSD je zahrnutý

Zvláštnosti:
Displej pripravenosti s javascriptovou animáciou
Ajax registračný formulár na prijímanie aktualizácií (ľahko vymazaný)
Šablóna je prísne certifikovaná podľa verzie 1.0 štandardu XHTML
Zobrazenie dátumu začiatku zdroja

Zvláštnosti:
Prispôsobiteľné počítadlo jQuery a zobrazenie pripravenosti
Pripojte sa k sociálnym sieťam
Ukladanie e-mailových adries do databázy údaje MySQL a v súbore XML
Prispôsobte oblasť nadpisu a okno obsahu

Zvláštnosti:
Obsahuje dobrý balík dokumentácie
Obsahuje súbory PSD
Pultový program s animáciou
Možnosť použitia vlastných fontov zadarmo

Zvláštnosti:
Beží na jQuery
Aktuálna funkcia prijímania žiadostí o distribúciu newslettera
Obsahuje súbory PHP/MySQL
Hladko meniť stránky ( Domovská stránka, "O nás", "Spätná väzba")

Zvláštnosti:
Platná šablóna XHTML/CSS
Počítadlo jQuery postavené softvér
Moderný a výrazný dizajn
kapitola najnovšie aktualizácie stránky

Zvláštnosti:
Plne funkčný PHP/Ajax kontaktný formulár s potvrdzovacím poľom - stačí zadať svoju emailovú adresu!
Počítadlo navrhnuté na mieru
Pohyblivá stupnica zobrazuje stupeň pripravenosti
Funkcia plynulej úpravy súborov Photoshopu pre ich najjednoduchšie prispôsobenie

Zvláštnosti:
Výrazný a moderný dizajn exteriéru so simulovanou objemovosťou
Aktuálna funkcia prijímania požiadaviek PHP/Ajax na zasielanie aktualizácií e-mailom prostredníctvom formulára s potvrdzovacím poľom
PSD súbory, vrstvené vo Photoshope
Vysoko kvalitné značky XHTML a CSS

Zvláštnosti:
ikony sociálne siete
Pripojenie na Twitter so zobrazením najnovšej poznámky
Značenie HTML naprieč prehliadačmi
Vrstvený súbor PSD

Zvláštnosti:
Ajax spätná väzba a registračné formuláre
Obidva formuláre Ajax sú naše obľúbené zariadenia iPhorms, ktoré stoja jednotlivo 6 dolárov! Platné značenie HTML 5 je zahrnuté zadarmo
Kompatibilné so všetkými hlavnými prehliadačmi
Možnosť viacjazyčného formátovania textu v UTF-8

Zvláštnosti:
Platné značenie XHTML a CSS
Štylizované počítadlo jQuery
Formulár na odber e-mailu Ajax/PHP (bez opätovného otvorenia stránky)
jQuery fixer pre PNG súbory v IE6

Zvláštnosti:
Podporuje všetky hlavné prehliadače: Firefox, IE6/7/8, Safari 3/4, Chrome, Opera 9/10
Platné označenie XHTML podľa štandardu Interim 1.0
Zmena fontov pomocou metódy CUFON
Možnosť kombinácie ikon sociálnych sietí v motíve dizajnu

Zvláštnosti:
Platný formulár spätnej väzby AJAX
Zobrazovanie obrázkov v simulujúcom okne MacBook Pro alebo iMac
Macbook Pro a iMac vrstvené – http://images.naldzgraphics.net/2011/01 – obsiahnuté v súbore PSD
Jednoduché prispôsobenie časovača - tmavé a svetlé možnosti

Zvláštnosti:
Statická verzia a verzia Flash
Platné označenie XHTML
Jednoduchý počítací program
Kompatibilné prehliadače: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

Zvláštnosti:
Plne funkčný formulár na odber newslettera AJAX (jQuery).
jQuery počítadlo/časovač a displej pripravenosti
Program na opravu súborov PNG pre IE6
Platné (prísne 4.01), značky HTML a CSS pre rôzne prehliadače

Zvláštnosti:
Počítadlo jQuery nastavené na ľubovoľný dátum
Obsahuje formulár PHP/AJAX
jQuery animácia ikon sociálnych médií
4 farebné možnosti

Zvláštnosti:
HTML a WordPress verzie
Podrobná podporná dokumentácia pre verzie WordPress aj HTML
Formulár na odber newslettera
Ľahko prispôsobiteľné vrstvené súbory PSD so značkami

Zvláštnosti:
Jednoduché prispôsobenie počítadla/časovača jQuery
Ultra jemný displej pripravenosti s krásnym textovým poľom s vysvetlivkami
Obsahuje sadu ikon sociálnych sietí
Dobre spracovaný súbor PSD

Programové počítadlo JQuery
Zvláštnosti:
Pevné rozloženie 900 pixelov
Pracovný kontaktný formulár
Kompatibilné prehliadače: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera
Obsiahnuté súbory: CSS, HTML, JPG, JS, PSD zoradené podľa vrstiev, PHP

Zvláštnosti:
Kompletne pripravený kód (HTML, CSS, jQUERY, PHP, AJAX)
Plne funkčný ajax kontaktný formulár
Jedinečné ikony optimalizované pre čierne a svetlé pozadie
Pracovné odpočítavanie v jQuery

Zvláštnosti:
Počítadlo v jQuery
Posuvník obsahu jQuery
Vstavaný pracovný kontaktný formulár
Odľahčená verzia HTML

Zvláštnosti:
Rozšíriteľnosť pomocou jQuery
Doplnok odpočítavania
Sociálne ikony a tipy
Oddeľte vrstvy v PSD

Krásna webová stránka zostáva v pamäti návštevníka veľmi dlho, a to je nepochybne úžasné. Dnes by sme chceli hovoriť o úžasnej zásuvke pre vašu stránku, konkrétne o interaktívnej animovanej stránke, ktorá bude neustále v pohybe, okrem toho, že bude reagovať na kurzor myši a vykonávať akcie. Cieľom je vytvoriť pevninu a lietadlo, ktoré bude neustále kĺzať; keď sa kurzor pohne, lietadlo zmení svoju polohu. Tento druh interaktívneho vyzerá veľmi cool a príjemne.

ZDROJE

Túto stránku možno použiť ako pozadie webovej stránky, stránku s malou textovou správou alebo zástupný symbol na stránke; v každom prípade sa nemôžete pokaziť. Tento efekt je dosiahnutý vďaka 3D knižnici jQuery-Three.js.

Krok 1. HTML

Naše značky a štýly budú celkom jednoduché, pretože Three.js urobí všetku prácu a parametre, ktoré sme zadali v JS, všetko, čo musíme urobiť, je zavolať tieto funkcie priradením id="world":

Štýly sú tiež pomerne jednoduché, takže sa nimi nebudeme zaoberať a prejdeme rovno k ďalšiemu kroku.

Krok 2. JS

Celé spracovanie udalostí bude vykonávať JS a Three.js. Na implementáciu takéhoto rozloženia sme nastavili nasledujúce hodnoty pre náhodnú udalosť v slučke.

Var Colors = ( červená: 0xf25346, žltá: 0xedeb27, biela: 0xd8d0d1, hnedá: 0x59332e, ružová: 0xF5986E, hnedáTmavá: 0x23190f, modrá: 0x68c3c0, zelená: 81086x 0x45 zelená: 81086 0x45 9 265,); var scéna, kamera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, kontajner; function createScene() ( // Získajte šírku a výšku obrazovky // a použite ich na úpravu // pomeru strán kamery a veľkosti renderera. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Vytvorenie scény. scene = new THREE .Scene(); // Pridanie efektu hmly FOV do scény. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Vytvorenie pomeru strán fotoaparátu = WIDTH / HEIGHT; fieldOfView = 60 ; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Poloha kamery camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Vytvorenie vykresľovacieho modulu vykresľovania = new THREE.WebGLRenderer(( // Spriehľadnenie pozadia, výkon vyhladzovania alpha: true, antialias: true )); // nastavenie veľkosti vykresľovacieho modulu na celú obrazovku renderer.setSize( WIDTH, HEIGHT); // povoliť vykresľovanie tieňov .shadowMap.enabled = true;//Pridať vykresľovanie do kontajnera udalostí DOM a DIV = document.getElementById("world"); container.appendChild(renderer.domElement); //Odozva window.addEventListener("zmena veľkosti", handleWindowResize, false); ) //Reakcia funkcií funkcie handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, tieňSvetlo; function createLights() ( // Farebný prechod svetla obloha, zem, intenzita hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Paralelné lúče shadowLight = new THREE.DirectionalLight(0xffffff, .position. shadowL). set(0, 350, 350); shadowLight.castShadow = true; // definuje viditeľnú oblasť premietaného tieňa 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; // Veľkosť mapy tieňov shadowLight.shadow.mapSize. width = 2048; shadowLight .shadow.mapSize.height = 2048; // Pridanie svetiel do scény scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //otočenie pozdĺž osi x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //vytvor materiál var mat = new THREE.MeshPhongMaterial(( farba: Colors.lightgreen, tieňovanie: THREE.FlatShading, )); //vytvorme siet objektu this.mesh = new THREE.Mesh(geom, mat); //prijímanie tieňov this.mesh.receiveShadow = true; ) Orbit = function() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( farba: Colors.yellow, tieňovanie: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom) , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Vytvorenie prázdneho kontajnera pre cloud this.mesh = new THREE.Object3D( ); // Geometria a materiál kocky var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math. náhodné () * 3); pre (var i = 0; i

Výsledkom je, že získame skvelý doplnok stránky s odozvou a prispôsobivosťou.

Stub je stránka, ktorá je umiestnená na webe, keď nie je z nejakého dôvodu k dispozícii. Napríklad, keď dokončujete alebo meníte dizajn stránky a momentálne je nedostupná alebo sa zobrazuje nejako nesprávne. V tejto chvíli by bolo vhodné zverejniť stub stránku, na ktorej bude napísané, že na stránke prebieha údržba.

Tak začnime...

Urobíme jednoduchý zástupný symbol s obrázkom na pozadí a textom, ktorý .

V počítači si vytvoríme priečinok, do ktorého umiestnime všetky potrebné súbory pre náš stub.

V tomto priečinku vytvoríme ďalší priečinok s názvom snímky. V ňom umiestnime náš obrázok na pozadí a prípadne ďalšie obrázky, ktoré môžu byť potrebné pri práci.

Otvorte program Notepad++ (alebo podobný program, napríklad Poznámkový blok). Vytvorme nový dokument. Ďalej - Súbor - Uložiť ako, vyberte náš priečinok so stopkou a uložte dokument s názvom index.html

Toto by teraz malo byť v našom priečinku:

Otvorte súbor index.html v našom editore (po uložení by sa vám mal otvoriť). Teraz sa musíme uistiť, že kódovanie tohto súboru je nastavené správne. Ak to chcete urobiť, prejdite na položku ponuky „Kódovanie“ a kliknite na „Previesť na UTF-8“

Aby ste pri práci náhodou nestratili dosiahnutý výsledok, odporúčam dokument počas práce pravidelne ukladať. To je možné vykonať v ponuke "Súbor" alebo pomocou klávesovej skratky "Ctrl + S".

V editore napíšeme nasledujúci kód:

Každá webová stránka pozostáva z týchto značiek.

Teraz poďme pridať názov našej stránky, pretože nebude veľmi pekné, keď ju niekto otvorí a v názve karty prehliadača uvidí index.html (môžete stránku otvoriť v prehliadači a uvidíte, čo sa stane). Na tento účel medzi A pridajme nasledujúci kód:

Obrázok na pozadí

Teraz vyberme obrázok na pozadí pre náš zástupný symbol a potom sa vráťme k úprave stránky.

Ak to chcete urobiť, prejdite do služby Obrázky Google a vyhľadajte zaujímavý obrázok, ktorý by mohol slúžiť ako pozadie pre našu stránku. Je dôležité vybrať obrázok so šírkou aspoň 1920 pixelov tak, aby veľké obrazovky naša stránka vyzerala dobre. Vstúpil som do vyhľadávacieho panela a vybral som jeden z obrázkov.

Otvorte obrázok v plnej veľkosti a uložte ho do priečinka snímky. Potom to premenujeme. Zavolajme jej bg(nezabudnite na formát obrázka, v mojom prípade je to jpg).

Tu je to, čo som zachytil. Toto je fotografia mesta Chicago. Podľa mňa sa celkom hodí na obrázok na pozadí stránky.

Prikladáme obrázok na pozadí na stránku, používame na to CSS štýly:

Text bude pozostávať z nadpisu a v podstate aj z odseku textu.

Tu je to, čo sa stalo:

Teraz pridáme naše kontakty, aby nás návštevníci mohli kontaktovať okamžite a nečakali, kým sa práce na stránke dokončia.

Pridajme 3 bloky obsahujúce telefón, Email a Skype.

Zostáva už len pracovať so štýlmi.

Zväčšíme nadpis, zarovnajte ho na stred a znížte bližšie k stredu obrazovky.

Zväčšíme písmo textového odseku na dvadsať pixelov a urobme malú odrážku z nadpisu. V spodnej časti textu urobíme aj orámovanie, ktoré ho oddelí od kontaktov.

Urobme bloky s kontaktmi v 3 stĺpcoch, zväčšíme písmo, každý blok zarovnáme na stred a zmeníme farbu textu.

Výsledkom je, že máme zástupnú stránku, ktorú môžeme použiť, keď na stránke prebiehajú technické práce.