V tomto článku najdete informace, jak na to přesměrovat veškerý provoz a všechny návštěvníky webu na stránku s informacemi o údržbě během aktualizace webu.

Ukážu vám jak vytvořit zástupnou stránku s informacemi o prováděné práci, Jak přepněte web do režimu údržby a jak to vrátit online bez restartování Apache.

Dozvíte se jak přesměrovat provoz virtuální hostitel Apache na útržkovou stránku použití jako config VirtualHost, tak .HTAccess soubor.

Vytvoření zástupné stránky

Nejprve musíte vytvořit 2 soubory v kořenovém adresáři webu (kořen dokumentu):

Vytvořit stránku údržba.html, na kterou budou návštěvníci přesměrováni a která je o tom informuje stránka je v údržbě.

Jako příklad můžete použít následující HTML kód útržkové stránky(demo):

Webové stránky uzavřeny z důvodu údržby

Omlouváme se za nepříjemnosti, ale tento moment Na webu probíhá údržba.

Brzy budeme opět online!

V kořenovém adresáři webu (kořen dokumentu) vytvořte prázdný soubor Se jménem údržbu.povolit.

Použijeme to pro ZAPNUTÍ a VYPNUTÍ pahýlu bez restartování Apache.

Nakonfigurujeme Apache tak, aby při nalezení souboru údržbu.povolit v kořenovém adresáři webu bude režim zapnutý Údržba a všichni návštěvníci webu budou přesměrováni na stub stránku. Jinak (soubor údržbu.povolit chybí), stránka bude fungovat normálně.

Pokud tedy potřebujeme povolit přesměrování webu během údržby, vytvoříme prázdný soubor údržbu.povolit.

A když potřebujeme po údržbě vraťte web online, soubor jednoduše smažeme údržbu.povolit.

Přesměrujte Apache Vhost na Stub Page

Přidejte do své konfigurace Vhost následující pravidla ( Apache VirtualHost) Pro přesměrovat všechny návštěvníky webu 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 záhlaví Cache-Control "max-age=0, no-store"

Restartujte Apache, aby se změny projevily:

# apachectl půvabný

Nyní můžete zapnout a vypnout režim údržby webu pomocí souboru údržbu.povolit bez restartování Apache pokaždé.

Přesměrujte na útržkovou stránku pomocí HTAccess

Pro přesměrování všech návštěvníků na stub stránku, vložte následující kód .htaccess soubor umístěný v kořenovém adresáři webu:

Tento kus musí být vložen před všechna ostatní přesměrování 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 záhlaví Cache-Control "max-age=0, no-store"

Vysvětlení

1. Zapněte Rewrite Engine.

RewriteEngine On

2. (volitelné) Vylučte svou IP adresu. Pomocí této direktivy se vyhnete přesměrování provozu ze zadané IP adresy na maintenance.html.

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

Můžete zadat více IP adres:

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

3. Ujistěte se, že existuje soubor maintenance.html.

RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f

4. Zkontrolujte existenci souboru maintenance.enable (touto kontrolou zapínáme a vypínáme režim údržby).

RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f

5. Toto pravidlo potřebujeme, abychom zabránili zacyklení.

RewriteCond %(SCRIPT_FILENAME) !maintenance.html

6. Ve skutečnosti 503. přesměrování na stub stránku.

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

503 služba nedostupná— Stavový kód HTTP, což znamená, že server není dočasně schopen zpracovávat požadavky přes technické důvody(údržba, přetížení atd.).

7. Vypněte ukládání do mezipaměti.

Sada záhlaví Cache-Control "max-age=0, no-store"

Tímto způsobem listujete webovými stránkami a otevíráte ty nejoblíbenější. Díky rychlému a spolehlivému připojení k internetu si můžete být jisti, že můžete okamžitě otevřít jakoukoli webovou stránku. A najednou na něj narazíte. Na web, který se neotevře z technických důvodů, které vyžadují odstranění. Je to nepříjemné, že? Návštěvník/uživatel – samozřejmě. Pro majitele tohoto webu je ale situace mnohem složitější. Schopný způsobit jakékoli potíže. Můžete ztratit předplatitele a samozřejmě snížit ziskovost zdroje. Takovým nehodám se nelze vyhnout, ale zabránit jim nelze. Existují však věci, které mohou vlastníci webových stránek udělat, aby zajistili, že jejich návštěvníci a předplatitelé budou mít i nadále přístup k informacím o průběhu obnovy jejich stránek.

Šablony pro online stránky připravující se ke spuštění a procházející rekonstrukcí jsou velmi užitečné věci, které pomáhají udržet návštěvníky a předplatitele na webu i přes technické problémy a vleklé restaurátorské práce. Skutečně originální nebo odvážná designová řešení navíc mohou prodloužit trpělivost vašich návštěvníků.

Dnes nabízíme vlastníkům a návrhářům webových stránek výběr z 50 elegantních šablon stránek před spuštěním a renovacemi, které jim pomohou chránit je před pády webových stránek a jinými nehodami. Všechny uvedené šablony zaplaceno, ale jsou docela levné. Neváhejte a projděte si tento skvělý seznam a vyzkoušejte vzorky v akci.

Zvláštnosti:
Šest různých barevných variant na výběr
Formulář pro odběr newsletteru
štítky formulářů jQuery
Díky dobře naformátovaným souborům PSD je úprava hračkou

Zvláštnosti:
Na výběr dvě barevná schémata
jQuery počítadlo času před spuštěním
Přihlaste se k odběru e-mailových zpravodajů prostřednictvím služby FeedBurner
Možnost připojení k sociální síti

Zvláštnosti:
4 barevné možnosti
Formulář předplatného s potvrzovacím polem a PHP
Animované zobrazení stupně připravenosti v procentech
Platné označení XHTML + CSS3

Zvláštnosti:
Formulář předplatného e-mailu AJAX
6 barevných variant
Na základě rámu modulárního gridu 960 Grid System
Prošel validací XHTML podle standardu střední verze 1 .0

Zvláštnosti:
Snadné přizpůsobení počítadla času do startu
Propojení newsletterů Twitteru
Tři různé barevné možnosti

Zvláštnosti:
Animované počítadlo času jQuery + displej připravenosti
Automatický výstup textové nápovědy o stupni připravenosti v procentech
Textový souhrnný soubor s údaji o předplatitelích (NEPOTŘEBUJE SE DATABÁZE)
Plně funkční AJAX forma zpětná vazba+ validace

Zvláštnosti:
Kompatibilní prohlížeče: FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Lepkavé označení
Obsažené soubory: soubory CSS, soubory HTML, obrázek JPG, soubory JS, PSD (vrstvené), soubory PHP
Součástí je soubor PSD

Zvláštnosti:
Posunovací oblast postavena pomocí jQuery, pro přidání velkého množství textu v případě potřeby
Snadno upravitelné kódování HTML s pohodlným souborem dokumentace
Součástí je soubor PSD
Úhledný animovaný posuvník zobrazující postup projektu (např. 50 % dokončení)

Zvláštnosti:
Vysoce kvalitní kódování XHTML a CSS s úpravami pro IE6 a 7, zajišťující jeho funkčnost ve všech moderních prohlížečích
3 barevná schémata – šedá/modrá/červená
Formulář Ajax „E-mailové aktualizace“
Kompletní dokumentace a pokyny ve formátu PDF

Zvláštnosti:
Spolehlivé HTML kódování
Obsažené soubory: CSS soubory, HTML soubory, JS soubory, PSD (vrstvené), PHP soubory
Součástí je soubor PSD

Zvláštnosti:
Beztabulkové rozložení CSS
Kompatibilita mezi různými prohlížeči a vizuální přitažlivost
Rychlost a jednoduchost instalace
Automatická odpověď založená na Ajaxu

Zvláštnosti:
6 barevná schémata(hřebíček, matná modrá, světle zelená, tmavě oranžová, fialová a barvy suché trávy)
Detailní vrstvený dokument Photoshopu
Univerzální počítadlo času do spuštění vašeho webu
Připojte se k Twitteru a sdílejte své nejnovější poznámky

Zvláštnosti:
Podporuje hlavní prohlížeče: Firefox, IE6, 7, 8, Safari 3, 4, Chrome, Opera 9, 10
Vysoce kvalitní značení XHTML podle standardu střední verze 1 .0/CSS
Výsečový graf s hodnotami od 0 do 100% s 10% dělením, snadné použití. Obsahuje plně vrstvený soubor PSD
(odkaz ke stažení bezplatného písma je v dokumentaci)

Zvláštnosti:
HTML 5 + CSS3
Plně funkční formulář pro přihlášení k odběru e-mailů AJAX - databáze zapnuta založené na MySql Nepotřebuji
Změna písem pomocí metody CUFON
Výběr z řady programů pro rozpoznávání pro mobilní prohlížeče

Zvláštnosti:
Kompatibilní prohlížeče: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
Jasnost v designu
Součástí je soubor PSD
Lepkavé označení

Zvláštnosti:
Vrstvené soubory PSD
Kompatibilní prohlížeče: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Obsažené soubory: soubory CSS, soubory HTML, obrázek JPG, soubory JS, PNG (vrstvené), PSD (vrstvené), soubory PHP
Součástí je soubor PSD

Zvláštnosti:
Vysoce kvalitní značky XHTML a CSS, které byly zkontrolovány na správnost a ověření W3C...
počítadlo jQuery
Vestavěný PHP poštovní program pro odesílání e-maily
Zdarma písmo Cufon

Zvláštnosti:
7 možností barevné schéma: modrá, zelená, žlutá, červená, fialová, šedá, duhová
jQuery čítač (s plynulými přechody)
Formulář zpětné vazby AJAX/PHP
Skvělý vestavěný mechanismus zasílání zpráv na Twitteru

Zvláštnosti:
Plně funkční, platný formulář zpětné vazby PHP/Ajax
Čtyři různé barevné možnosti
Zobrazte dny, hodiny, minuty a dokonce i sekundy zbývající do spuštění

Zvláštnosti:
XHTML 1.0 střední verze
Displej stupnice připravenosti
Počítadlo časovače
Vrstvený soubor PSD součástí

Zvláštnosti:
Displej připravenosti s javascriptovou animací
Registrační formulář Ajax pro příjem aktualizací (snadno smazat)
Šablona je přísně certifikována podle verze 1.0 standardu XHTML
Zobrazení počátečního data zdroje

Zvláštnosti:
Přizpůsobitelné počítadlo jQuery a displej připravenosti
Připojte se k sociálním sítím
Ukládání e-mailových adres do databáze Data MySQL a v XML souboru
Přizpůsobte oblast nadpisu a okno obsahu

Zvláštnosti:
Obsahuje dobrý balík dokumentace
Obsahuje soubory PSD
Pultový program s animací
Možnost používat vlastní fonty zdarma

Zvláštnosti:
Běží na jQuery
Aktuální funkce přijímání žádostí o rozesílání newsletteru
Obsahuje soubory PHP/MySQL
Hladce měňte stránky ( Domovská stránka, "O nás", "Zpětná vazba")

Zvláštnosti:
Platná šablona XHTML/CSS
jQuery čítač postaven software
Moderní a výrazný design
Kapitola poslední aktualizace místo

Zvláštnosti:
Plně funkční PHP/Ajax kontaktní formulář s potvrzovacím polem - stačí zadat svou e-mailovou adresu!
Na míru navržený pult
Zobrazení stupně připravenosti na pohyblivé stupnici
Funkce plynulých úprav souborů Photoshopu pro jejich nejjednodušší přizpůsobení

Zvláštnosti:
Výrazný a moderní design exteriéru se simulovanou objemovostí
Aktuální funkce přijímání požadavků PHP/Ajax na zasílání aktualizací e-mailem prostřednictvím formuláře s potvrzovacím polem
PSD soubory, vrstvené ve Photoshopu
Vysoce kvalitní značky XHTML a CSS

Zvláštnosti:
ikony sociální sítě
Twitter připojení se zobrazením nejnovější poznámky
Značení HTML napříč prohlížeči
Vrstvený soubor PSD

Zvláštnosti:
Zpětná vazba od Ajaxu a registrační formuláře
Obě formy Ajaxu jsou naše oblíbené iPhormy, které jednotlivě stojí 6 $! Platné označení HTML 5 je zahrnuto zdarma
Kompatibilní se všemi hlavními prohlížeči
Možnost vícejazyčného formátování textu v UTF-8

Zvláštnosti:
Platné značky XHTML a CSS
Stylizované počítadlo jQuery
Formulář pro přihlášení k e-mailu Ajax/PHP (bez opětovného otevření stránky)
Fixer jQuery pro soubory PNG v IE6

Zvláštnosti:
Podporuje všechny hlavní prohlížeče: Firefox, IE6/7/8, Safari 3/4, Chrome, Opera 9/10
Platné označení XHTML podle standardu Interim 1.0
Změna písem pomocí metody CUFON
Možnost kombinace ikon sociálních sítí v motivu designu

Zvláštnosti:
Platný formulář zpětné vazby AJAX
Zobrazení obrázků v simulujícím okně Macbook Pro nebo iMac
Macbook Pro a iMac vrstvené – http://images.naldzgraphics.net/2011/01 – obsažené v souboru PSD
Snadné přizpůsobení časovače - tmavé a světlé možnosti

Zvláštnosti:
Statická verze a verze Flash
Platné označení XHTML
Jednoduchý čítačový program
Kompatibilní prohlížeče: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

Zvláštnosti:
Plně funkční formulář pro přihlášení k odběru newsletteru AJAX (jQuery).
jQuery čítač/časovač a displej připravenosti
Program pro opravu souborů PNG pro IE6
Platné (přísně 4.01), značkování HTML a CSS napříč prohlížeči

Zvláštnosti:
Čítač jQuery nastavený pro libovolné datum
Obsahuje PHP/AJAX formulář
jQuery animace ikon sociálních médií
4 barevné možnosti

Zvláštnosti:
HTML a WordPress verze
Podrobná podpůrná dokumentace pro verzi WordPress i HTML
Formulář pro odběr newsletteru
Snadno přizpůsobitelné vrstvené soubory PSD s označením

Zvláštnosti:
Snadno přizpůsobitelné počítadlo/časovač jQuery
Ultra jemný pohotovostní displej s krásným textovým polem obsahujícím vysvětlení
Obsahuje sadu ikon sociálních sítí
Dobře zpracovaný soubor PSD

Programové počítadlo JQuery
Zvláštnosti:
Pevné rozložení 900 pixelů
Pracovní kontaktní formulář
Kompatibilní prohlížeče: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera
Obsažené soubory: CSS, HTML, JPG, JS, PSD seřazené podle vrstev, PHP

Zvláštnosti:
Kompletně připravený kód (HTML, CSS, jQUERY, PHP, AJAX)
Plně funkční ajax kontaktní formulář
Jedinečné ikony optimalizované pro černé a světlé pozadí
Pracovní odpočítávání v jQuery

Zvláštnosti:
Počítadlo v jQuery
Posuvník obsahu jQuery
Vestavěný pracovní kontaktní formulář
Odlehčená HTML verze

Zvláštnosti:
Rozšiřitelnost pomocí jQuery
Plugin odpočítávání
Sociální ikony a tipy
Oddělte vrstvy v PSD

Krásná webová stránka zůstane v paměti návštěvníka velmi dlouho, a to je nepochybně úžasné. Dnes bychom chtěli mluvit o skvělé zásuvce pro váš web, konkrétně o interaktivní animované stránce, která bude neustále v pohybu, kromě toho, že bude reagovat na kurzor myši a provádět akce. Cílem je vytvořit zemi a letadlo, které bude neustále klouzat; když se kurzor pohne, letadlo změní svou polohu. Tento druh interaktivity vypadá velmi cool a příjemně.

PRAMENY

Tuto stránku lze použít jako pozadí webu, stránku s malou textovou zprávou nebo zástupný symbol na stránce; v žádném případě nemůžete udělat chybu. Tohoto efektu je dosaženo díky 3D knihovně jQuery-Three.js.

Krok 1. HTML

Naše značkování a styly budou docela jednoduché, protože Three.js udělá veškerou práci a parametry, které jsme zadali v JS, vše, co musíme udělat, je zavolat tyto funkce přiřazením id="world":

Styly jsou také docela jednoduché, takže se jimi nebudeme zdržovat a přejdeme rovnou k dalšímu kroku.

Krok 2. JS

Veškeré zpracování událostí bude provádět JS a Three.js. Abychom takové rozložení implementovali, nastavili jsme následující hodnoty pro smyčkování, náhodnou událost.

Var Colors = ( červená: 0xf25346, žlutá: 0xedeb27, bílá: 0xd8d0d1, hnědá: 0x59332e, růžová: 0xF5986E, hnědáTmavá: 0x23190f, modrá: 0x68c3c0, zelená: 2082x fialová, 55 zelená 9 265,); var scéna, kamera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, kontejner; function createScene() ( // Získejte šířku a výšku obrazovky // a použijte je k úpravě // poměru stran kamery a velikosti rendereru. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Vytvořte scénu. scene = new THREE .Scene(); // Přidejte do scény efekt mlhy FOV. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Vytvořte poměr stran kamery = 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; // Vytvoření vykreslovacího modulu vykreslování = new THREE.WebGLRenderer(( // Zprůhlednění pozadí, výkon vyhlazování alpha: true, antialias: true )); // nastavení velikosti vykreslovacího modulu na celou obrazovku renderer.setSize( WIDTH, HEIGHT); // povolit vykreslování stínů .shadowMap.enabled = true;//Přidat vykreslování do kontejneru událostí DOM a DIV = document.getElementById("world"); container.appendChild(renderer.domElement); //Reakce window.addEventListener("resize", handleWindowResize, false); ) //Reakce funkcí funkce handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, stín Světlo ; function createLights() ( // Barevný přechod světla obloha, země, intenzita hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Paralelní paprsky shadowLight = new THREE.DirectionalLight(0xffffff, .position.); shadowLight set(0, 350, 350); shadowLight.castShadow = true; // definuje viditelnou oblast promítaného stínu 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; // Velikost mapy stínů shadowLight.shadow.mapSize. width = 2048; shadowLight .shadow.mapSize.height = 2048; // Přidání světel do scény scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //rotace podél osy x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //vytvoří materiál var mat = new THREE.MeshPhongMaterial(( barva: Colors.lightgreen, shading: THREE.FlatShading, )); //vytvoříme síť objektu this.mesh = new THREE.Mesh(geom, mat); //příjem stínů 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(( barva: Colors.yellow, stínování: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom) , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Vytvořte prázdný kontejner pro cloud this.mesh = new THREE.Object3D( ); // Geometrie a materiál krychle var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math. random( ) * 3); for (var i = 0; i

Výsledkem je skvělý webový plugin s odezvou a přizpůsobivostí.

Útržek je stránka, která je umístěna na webu, když je z toho či onoho důvodu nedostupná. Například když dokončujete nebo měníte design webu a v tuto chvíli je nedostupný nebo se zobrazuje nějak nesprávně. V tuto chvíli by bylo vhodné umístit stub stránku, na které bude napsáno, že na webu probíhá údržba.

Takže začneme...

Uděláme jednoduchý zástupný symbol s obrázkem na pozadí a textem, který .

Vytvořme si v počítači složku, do které umístíme všechny potřebné soubory pro náš útržek.

V této složce vytvoříme další složku s názvem snímky. Do něj umístíme náš obrázek na pozadí a případně další obrázky, které mohou být při práci potřeba.

Otevřete program Notepad++ (nebo podobný, například Notepad). Vytvoříme nový dokument. Další - Soubor - Uložit jako, vyberte naši složku se útržkem a uložte dokument s názvem index.html

Toto by nyní mělo být v naší složce:

Otevřete soubor index.html v našem editoru (po uložení by se vám měl otevřít). Nyní se musíme ujistit, že kódování tohoto souboru je nastaveno správně. Chcete-li to provést, přejděte na položku nabídky „Kódování“ a klikněte na „Převést na UTF-8“

Aby nedošlo k náhodné ztrátě dosaženého výsledku při práci, doporučuji dokument při práci pravidelně ukládat. To lze provést v nabídce "Soubor" nebo klávesovou zkratkou "Ctrl + S".

V editoru napíšeme následující kód:

Každá webová stránka se skládá z těchto značek.

Nyní přidáme název naší stránce, protože nebude moc hezké, když ji někdo otevře a v názvu záložky prohlížeče uvidí index.html (můžete stránku otevřít v prohlížeči a uvidíte, co se stane). Za tímto účelem mezi A přidáme následující kód:

Obrázek na pozadí

Nyní vybereme obrázek na pozadí pro náš zástupný symbol a vrátíme se k úpravám stránky.

Chcete-li to provést, přejděte na Obrázky Google a vyhledejte zajímavý obrázek, který by mohl sloužit jako pozadí pro naši stránku. Je důležité vybrat obrázek o šířce alespoň 1920 pixelů velké obrazovky naše stránka vypadala dobře. Vstoupil jsem do vyhledávacího pole a vybral jeden z obrázků.

Otevřete obrázek v plné velikosti a uložte jej do složky snímky. Pak to přejmenujeme. Zavolejme jí bg(nezapomeňte na formát obrázku, v mém případě je to jpg).

Tady je to, co jsem sebral. Toto je fotka města Chicago. Na obrázek na pozadí webu se to podle mě docela hodí.

Přikládáme obrázek na pozadí na stránku, používáme k tomu CSS styly:

Text se bude skládat z nadpisu a vlastně z odstavce textu.

Co se stalo:

Nyní přidáme naše kontakty, aby nás návštěvníci mohli kontaktovat okamžitě a nečekali, až budou práce na webu dokončeny.

Přidejme 3 bloky obsahující telefon, E-mailem a Skype.

Nezbývá než pracovat se styly.

Zvětšeme nadpis, zarovnejme jej na střed a snižme blíže ke středu obrazovky.

Zvětšeme písmo textového odstavce na dvacet pixelů a udělejme od nadpisu malé odsazení. V dolní části textu také uděláme ohraničení, které jej oddělí od kontaktů.

Udělejme bloky s kontakty ve 3 sloupcích, zvětšíme písmo, zarovnáme každý blok na střed a změníme barvu textu.

V důsledku toho máme zástupnou stránku, kterou můžeme použít, když na webu probíhají technické práce.