U ovom ćete članku pronaći informacije o tome kako preusmjeriti sav promet i sve posjetitelje stranice na stranicu s informacijama o održavanju dok se stranica ažurira.

pokazat ću ti kako stvoriti stranicu rezerviranog mjesta s informacijama o radovima koji se izvode, Kako stavite stranicu u način održavanja i kako ga vratiti online bez ponovnog pokretanja Apachea.

Saznat ćete kako preusmjeriti promet virtualni host Apache na stub stranicu koristeći kao konfiguraciju VirtualHost, dakle .HTAccess datoteka.

Stvaranje stranice rezerviranog mjesta

Prije svega, morate stvoriti 2 datoteke u korijenu stranice (korijen dokumenta):

Napravite stranicu održavanje.html, na koji će posjetitelji biti preusmjereni i koji će ih obavijestiti o tome stranica je u fazi održavanja.

Kao primjer, možete koristiti sljedeći HTML kod zaglavljene stranice(demo):

Web stranica zatvorena zbog održavanja

Ispričavamo se zbog neugodnosti, ali ovaj trenutak Stranica je u tijeku održavanja.

Uskoro se vraćamo na mrežu!

U korijenu stranice (korijenu dokumenta) kreirajte prazna datoteka Sa imenom održavanje.omogućiti.

Koristit ćemo ga za UKLJUČIVANJE i ISKLJUČIVANJE stuba bez ponovnog pokretanja Apachea.

Apache ćemo konfigurirati tako da kada se pronađe datoteka održavanje.omogućiti u korijenu stranice, način će biti uključen Održavanje i svi će posjetitelji web-mjesta biti preusmjereni na stranicu s dopunom. Inače (datoteka održavanje.omogućiti nedostaje) stranica će raditi normalno.

Dakle, ako nam treba omogućiti preusmjeravanje stranice tijekom održavanja, stvaramo praznu datoteku održavanje.omogućiti.

I kad nam treba vratite web mjesto na mrežu nakon održavanja, jednostavno ćemo izbrisati datoteku održavanje.omogućiti.

Preusmjerite Apache Vhost na Stub stranicu

Dodajte sljedeća pravila svojoj Vhost konfiguraciji ( Apache VirtualHost) Za preusmjeriti sve posjetitelje web-mjesta na nezavršenu stranicu:

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

Ponovno pokrenite Apache kako bi promjene stupile na snagu:

# apachectl graciozan

Sada možete UKLJUČIVATI i ISKLJUČIVATI način rada za održavanje stranice pomoću datoteke održavanje.omogućiti bez ponovnog pokretanja Apachea svaki put.

Preusmjeri na Stub stranicu koristeći HTAccess

Za preusmjeravanje svih posjetitelja na nezavršenu stranicu, postavite sljedeći kod .htaccess datoteka koja se nalazi u korijenu stranice:

Ovaj dio mora biti umetnut prije svih ostalih preusmjeravanja i stanja.

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

Obrazloženje

1. Uključite Rewrite Engine.

RewriteEngine uključen

2. (neobavezno) Isključite svoju IP adresu. Koristite ovu direktivu kako biste izbjegli preusmjeravanje prometa sa navedene IP adrese na maintenance.html.

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

Možete navesti više IP adresa:

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

3. Provjerite postoji li maintenance.html.

RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f

4. Provjerite postojanje maintenance.enable datoteke (ovom provjerom uključujemo i isključujemo mod održavanja).

RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f

5. Ovo pravilo nam je potrebno da spriječimo petlje.

RewriteCond %(SCRIPT_FILENAME) !maintenance.html

6. Zapravo 503. preusmjerava na stub stranicu.

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

503 usluga nedostupna— HTTP statusni kod, što znači da poslužitelj privremeno ne može obraditi zahtjeve putem tehnički razlozi(održavanje, preopterećenje itd.).

7. Isključite predmemoriju.

Header Set Cache-Control "max-age=0, no-store"

Na ovaj način listate web stranice, otvarajući one najpopularnije. Uz brzu i pouzdanu internetsku vezu, sigurni ste da možete odmah otvoriti bilo koju web stranicu. I odjednom naiđete na njega. Na stranicu koja se ne otvara zbog tehničkih razloga koji zahtijevaju otklanjanje. Iritantno je, zar ne? Posjetitelj/korisnik – naravno. Ali za vlasnika ove web stranice situacija je puno kompliciranija. Sposoban izazvati bilo kakvu nevolju. Možete izgubiti pretplatnike i, naravno, smanjiti profitabilnost resursa. Takve se nesreće ne mogu izbjeći, ali ih je nemoguće spriječiti. Međutim, postoje stvari koje vlasnici web stranica mogu učiniti kako bi osigurali da njihovi posjetitelji i pretplatnici i dalje imaju pristup informacijama o napretku obnove svoje web stranice.

Predlošci za mrežne stranice koje se pripremaju za pokretanje i rekonstruiraju vrlo su korisne stvari koje pomažu zadržati posjetitelje i pretplatnike na web mjestu, unatoč tehničkim problemima i dugotrajnim radovima na obnovi. Osim toga, doista originalna ili hrabra dizajnerska rješenja mogu produljiti strpljenje vaših posjetitelja.

Danas nudimo vlasnicima web stranica i dizajnerima izbor od 50 urednih predložaka stranica prije pokretanja i renoviranja kako bismo ih zaštitili od pada web stranica i drugih nesreća. Svi navedeni predlošci plaćeno, ali su prilično jeftini. Slobodno pregledajte ovaj sjajan popis i isprobajte uzorke na djelu.

Osobitosti:
Šest različitih boja na izbor
Obrazac za pretplatu na newsletter
jQuery oznake obrazaca
Dobro formatirane PSD datoteke čine uređivanje lakim

Osobitosti:
Dvije sheme boja na izbor
jQuery brojač vremena prije početka
Pretplatite se na e-mail biltene putem usluge FeedBurner
Mogućnost povezivanja na društvenu mrežu

Osobitosti:
4 opcije boja
Obrazac za pretplatu s poljem za potvrdu i PHP-om
Animirani prikaz stupnja spremnosti u postocima
Valjano XHTML + CSS3 označavanje

Osobitosti:
Obrazac za pretplatu putem e-pošte na AJAX
6 opcija boja
Na temelju okvira modularne rešetke 960 Grid System
Prošao XHTML provjeru valjanosti prema srednjoj verziji 1 .0 standarda

Osobitosti:
Lako se prilagođava brojač vremena do početka
Povezivanje Twitter biltena
Tri različite opcije boja

Osobitosti:
Animirani jQuery brojač vremena + prikaz spremnosti
Automatski ispis tekstualne pomoći o stupnju spremnosti u postocima
Datoteka tekstualnog sažetka s podacima o pretplatnicima (NIJE POTREBNA BAZA PODATAKA)
Potpuno funkcionalan AJAX obrazac Povratne informacije+ validacija

Osobitosti:
Kompatibilni preglednici: FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Ljepljiva oznaka
Sadržane datoteke: CSS datoteke, HTML datoteke, JPG slike, JS datoteke, PSD (slojevite), PHP datoteke
PSD datoteka uključena

Osobitosti:
Izgrađeno područje za pomicanje koristeći jQuery, za dodavanje, ako je potrebno, velike količine teksta
HTML kodiranje koje se lako uređuje zajedno s praktičnom datotekom dokumentacije
PSD datoteka uključena
Zgodan animirani klizač koji prikazuje napredak projekta (npr. 50% dovršeno)

Osobitosti:
Visokokvalitetno XHTML i CSS kodiranje s izmjenama za IE6 i 7, osiguravajući njegovu funkcionalnost u svim modernim preglednicima
3 sheme boja – siva/plava/crvena
Ajax obrazac “Ažuriranja putem e-pošte”
Potpuna PDF dokumentacija i upute

Osobitosti:
Pouzdano HTML kodiranje
Sadržane datoteke: CSS datoteke, HTML datoteke, JS datoteke, PSD (slojevite), PHP datoteke
PSD datoteka uključena

Osobitosti:
CSS izgled bez tablice
Kompatibilnost s više preglednika i vizualna privlačnost
Brzina i jednostavnost instalacije
Automatski odgovor temeljen na Ajaxu

Osobitosti:
6 sheme boja(karanfilić, mat plava, blijedo zelena, duboko narančasta, ljubičasta i boje suhe trave)
Detaljan slojeviti Photoshop dokument
Univerzalni brojač vremena do pokretanja vaše web stranice
Povežite se na Twitter kako biste podijelili svoje najnovije bilješke

Osobitosti:
Podržava glavne preglednike: Firefox, IE6, 7, 8, Safari 3, 4, Chrome, Opera 9, 10
Visokokvalitetno XHTML označavanje prema srednjoj verziji 1 .0/CSS standarda
Tortni grafikon s vrijednostima od 0 do 100% s 10% podjelama, jednostavan za korištenje. Sadrži potpuno slojevitu PSD datoteku
(link za preuzimanje besplatnog fonta nalazi se u dokumentaciji)

Osobitosti:
HTML 5 + CSS3
Potpuno funkcionalan AJAX e-mail obrazac za pretplatu - baza podataka na Temeljeno na MySql-u ne treba
Promjena fontova metodom CUFON
Raspon programa za prepoznavanje za mobilne preglednike na izbor

Osobitosti:
Kompatibilni preglednici: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
Jasnoća u dizajnu
PSD datoteka uključena
Ljepljiva oznaka

Osobitosti:
Slojevite PSD datoteke
Kompatibilni preglednici: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Sadržane datoteke: CSS datoteke, HTML datoteke, JPG slike, JS datoteke, PNG (slojevite), PSD (slojevite), PHP datoteke
PSD datoteka uključena

Osobitosti:
Visokokvalitetne XHTML i CSS oznake čija je ispravnost provjerena i W3C provjera...
jQuery brojač
Ugrađen PHP mail program za slanje elektronička pošta
Besplatni Cufon font

Osobitosti:
7 opcija Shema boja: plava, zelena, žuta, crvena, ljubičasta, siva, preljevna
jQuery brojač (s glatkim prijelazima)
AJAX/PHP obrazac za povratne informacije
Sjajan ugrađeni mehanizam za razmjenu poruka na Twitteru

Osobitosti:
Potpuno funkcionalan, važeći PHP/Ajax obrazac za povratne informacije
Četiri različite opcije boja
Prikaz preostalih dana, sati, minuta pa čak i sekundi do pokretanja

Osobitosti:
XHTML 1.0 srednja verzija
Prikaz ljestvice spremnosti
Brojač vremena
Uključena je slojevita PSD datoteka

Osobitosti:
Prikaz spremnosti s javascript animacijom
Ajax obrazac za registraciju za primanje ažuriranja (lako se briše)
Predložak je strogo certificiran prema verziji 1.0 XHTML standarda
Prikaz datuma početka resursa

Osobitosti:
Prilagodljiv jQuery brojač i prikaz spremnosti
Povežite se s društvenim mrežama
Spremanje email adresa u bazu podataka MySQL podaci i u XML datoteci
Prilagodite područje naslova i prozor sadržaja

Osobitosti:
Sadrži dobar paket dokumentacije
Sadrži PSD datoteke
Program brojača s animacijom
Mogućnost besplatnog korištenja vlastitih fontova

Osobitosti:
Pokreće jQuery
Trenutna funkcija zaprimanja prijava za distribuciju newslettera
Sadrži PHP/MySQL datoteke
Glatko mijenjajte stranice ( Početna stranica, "O nama", "Povratne informacije")

Osobitosti:
Valjani XHTML/CSS predložak
Izgrađen jQuery brojač softver
Moderan i prepoznatljiv dizajn
Poglavlje najnovija ažuriranja mjesto

Osobitosti:
Potpuno funkcionalan PHP/Ajax obrazac za kontakt s poljem za potvrdu - samo unesite svoju adresu e-pošte!
Pult izrađen po narudžbi
Pomični prikaz stupnja spremnosti
Funkcija tečnog uređivanja Photoshop datoteka za njihovu najjednostavniju prilagodbu

Osobitosti:
Prepoznatljiv i moderan vanjski dizajn sa simuliranom volumetričnošću
Trenutna funkcija prihvaćanja PHP/Ajax zahtjeva za slanje ažuriranja e-poštom putem obrasca s poljem za potvrdu
PSD datoteke, složene u Photoshopu
Visokokvalitetno XHTML i CSS označavanje

Osobitosti:
Ikone društvene mreže
Twitter veza s prikazom najnovije bilješke
HTML označavanje za više preglednika
Slojevita PSD datoteka

Osobitosti:
Ajax povratne informacije i obrasci za registraciju
Oba Ajax obrasca su naši popularni iPhormi, koji pojedinačno koštaju 6 USD! Važeća HTML 5 oznaka uključena je besplatno
Kompatibilan sa svim glavnim preglednicima
Mogućnost višejezičnog oblikovanja teksta u UTF-8

Osobitosti:
Valjane XHTML i CSS oznake
Stilizirani jQuery brojač
Obrazac za pretplatu na Ajax/PHP email (bez ponovnog otvaranja stranice)
jQuery popravljač za PNG datoteke u IE6

Osobitosti:
Podržava sve glavne preglednike: Firefox, IE6/7/8, Safari 3/4, Chrome, Opera 9/10
Valjano XHTML označavanje prema Interim 1.0 standardu
Promjena fontova metodom CUFON
Mogućnost kombiniranja ikona društvenih mreža u temu dizajna

Osobitosti:
Valjani AJAX obrazac za povratne informacije
Prikazivanje slika u prozoru koji simulira Macbook Pro ili iMac
Macbook Pro i iMac slojevito - http://images.naldzgraphics.net/2011/01 - sadržano u PSD datoteci
Lako se prilagođava brojač vremena - tamne i svijetle opcije

Osobitosti:
Statička verzija i Flash verzija
Valjano XHTML označavanje
Jednostavan program brojača
Kompatibilni preglednici: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

Osobitosti:
Potpuno funkcionalan AJAX (jQuery) obrazac za pretplatu na bilten
jQuery brojač/tajmer i prikaz spremnosti
Program za ispravljanje PNG datoteka za IE6
Valjano (strogo 4.01), HTML i CSS oznake za više preglednika

Osobitosti:
jQuery brojač postavljen za bilo koji datum
Sadrži PHP/AJAX obrazac
jQuery animacija ikona društvenih medija
4 opcije boja

Osobitosti:
HTML i WordPress verzije
Detaljna popratna dokumentacija za WordPress i HTML verziju
Obrazac za pretplatu na newsletter
Slojevite PSD datoteke s oznakama koje se lako prilagođavaju

Osobitosti:
Lako se prilagođava jQuery brojač/timer
Izuzetno fini zaslon spremnosti s prekrasnim tekstualnim okvirom koji sadrži objašnjenja
Sadrži skup ikona društvenih mreža
Dobro izrađena PSD datoteka

JQuery programski brojač
Osobitosti:
Fiksni raspored 900 piksela
Radna kontakt forma
Kompatibilni preglednici: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera
Sadržane datoteke: CSS, HTML, JPG, JS, PSD sortirane po slojevima, PHP

Osobitosti:
Potpuno gotov kod (HTML, CSS, jQUERY, PHP, AJAX)
Potpuno ispravan ajax kontakt obrazac
Jedinstvene ikone optimizirane za crnu i svijetlu pozadinu
Radno odbrojavanje u jQueryju

Osobitosti:
Brojač u jQueryju
jQuery klizač sadržaja
Ugrađen radni obrazac za kontakt
Lagana HTML verzija

Osobitosti:
Proširivost s jQueryjem
Dodatak za odbrojavanje
Društvene ikone i savjeti
Odvojeni slojevi u PSD-u

Lijepa web stranica ostaje u sjećanju posjetitelja jako dugo, a to je nesumnjivo prekrasno. Danas bismo željeli razgovarati o prekrasnom dodatku za vašu web-lokaciju, odnosno o interaktivnoj animiranoj stranici koja će stalno biti u pokretu, osim što će reagirati na kursor miša i izvršavati radnje. Ideja je stvoriti zemlju i avion koji će stalno biti u klizanju, kada se kursor pomakne, avion će promijeniti svoju poziciju. Ova vrsta interaktivnosti izgleda vrlo cool i ugodno.

IZVORI

Ova se stranica može koristiti kao pozadina web stranice, stranica s malom tekstualnom porukom ili rezervirano mjesto na stranici; u svakom slučaju, ne možete pogriješiti. Ovaj učinak postiže se zahvaljujući 3D biblioteci jQuery-Three.js.

Korak 1. HTML

Naše označavanje i stilovi bit će prilično jednostavni, budući da će Three.js obaviti sav posao, a parametri koje smo naveli u JS-u, sve što trebamo učiniti je pozvati te funkcije dodjeljivanjem id="world":

Stilovi su također prilično jednostavni, pa se nećemo zadržavati na njima i odmah prijeći na sljedeći korak.

Korak 2. JS

Svu obradu događaja izvršit će JS i Three.js. Da bismo implementirali takav izgled, postavili smo sljedeće vrijednosti za petlju, slučajni događaj.

Promjenjive boje = ( crvena: 0xf25346, žuta: 0xedeb27, bijela: 0xd8d0d1, smeđa: 0x59332e, ružičasta: 0xF5986E, smeđaTamna: 0x23190f, plava: 0x68c3c0, zelena: 0x458248, ljubičasta: 0x551A8B, svijetlozelena: 0 x629 265, ); var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; funkcija createScene() ( // Dobijte širinu i visinu zaslona // i koristite ih za podešavanje // omjera širine i visine kamere i veličine renderera. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Stvorite scenu. scene = new THREE .Scene(); // Dodajte efekt FOV magle sceni. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Stvorite aspectRatio kamere = WIDTH / HEIGHT; fieldOfView = 60 ; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Položaj kamere camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Stvorite renderer renderer = new THREE.WebGLRenderer(( // Učinite pozadinu prozirnom, izvedba anti-aliasing alpha: true, antialias: true )); // postavite veličinu renderera na cijeli zaslon renderer.setSize( WIDTH, HEIGHT); // omogući iscrtavanje u sjeni .shadowMap.enabled = true;//Dodaj iscrtivač u DOM i DIV spremnik događaja = document.getElementById("world"); kontejner.appendChild(renderer.domElement); //Odaziv window.addEventListener("resize", handleWindowResize, false); ) //Odziv funkcije funkcije handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, sjenaSvjetlost ; funkcija createLights() ( // Boja gradijenta svjetla nebo, tlo, intenzitet hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Paralelne zrake shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // definirajte vidljivo područje projicirane sjene 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; // Veličina mape sjene shadowLight.shadow.mapSize. width = 2048; shadowLight .shadow.mapSize.height = 2048; // Dodaj svjetla sceni scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. Geometrija cilindra (600, 600, 1700, 40, 10); //rotacija duž x osi geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //stvori materijal var mat = new THREE.MeshPhongMaterial(( boja: Colors.lightgreen, sjenčanje: THREE.FlatShading, )); //kreiraj mesh objekta this.mesh = new THREE.Mesh(geom, mat); //primi sjene 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(( boja: Colors.yellow, sjenčanje: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Stvorite prazan spremnik za oblak this.mesh = new THREE.Object3D( ); // Geometrija i materijal kocke 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

Kao rezultat toga, dobivamo prekrasan dodatak za web mjesto s odzivom i prilagodljivošću.

Stup je stranica koja se postavlja na web mjesto kada je nedostupno iz jednog ili drugog razloga. Na primjer, kada dovršavate ili mijenjate dizajn stranice, a ona je u ovom trenutku nedostupna ili se prikazuje na neki netočan način. Bilo bi poželjno da u ovom trenutku postavite stub stranicu na kojoj će pisati da je stranica u tijeku.

Pa krenimo...

Napravit ćemo jednostavno rezervirano mjesto s pozadinskom slikom i tekstom koji .

Napravimo mapu na računalu u koju ćemo smjestiti sve potrebne datoteke za naš klip.

U ovoj mapi ćemo stvoriti drugu mapu s imenom slike. U njega ćemo postaviti našu pozadinsku sliku i, eventualno, druge slike koje bi mogle biti potrebne tijekom rada.

Otvorite program Notepad++ (ili sličan, na primjer Notepad). Kreirajmo novi dokument. Dalje - Datoteka - Spremi kao, odaberite našu mapu sa završetkom i spremite dokument pod imenom index.html

Ovo bi sada trebalo biti u našoj mapi:

Otvorite datoteku index.html u našem editoru (nakon spremanja trebala bi vam biti otvorena). Sada moramo biti sigurni da je kodiranje ove datoteke ispravno postavljeno. Da biste to učinili, idite na stavku izbornika "Kodiranja" i kliknite na "Pretvori u UTF-8"

Kako ne biste slučajno izgubili postignuti rezultat tijekom rada, preporučujem povremeno spremanje dokumenta tijekom rada. To se može učiniti u izborniku "Datoteka" ili tipkovničkim prečacem "Ctrl + S".

U editoru pišemo sljedeći kod:

Svaka web stranica sastoji se od ovih oznaka.

Dodajmo sada naslov našoj stranici, jer neće biti baš lijepo kada je netko otvori i vidi index.html u naslovu kartice preglednika (možete otvoriti stranicu u pregledniku i vidjeti što se događa). U tu svrhu između I dodajmo sljedeći kod:

Slika pozadine

Odaberimo sada pozadinsku sliku za rezervirano mjesto, a zatim se vratimo na uređivanje stranice.

Da biste to učinili, idite na Google slike i potražite zanimljivu sliku koja bi mogla poslužiti kao pozadina za našu stranicu. Važno je odabrati sliku širine najmanje 1920 piksela kako bi veliki ekrani naša stranica je izgledala dobro. Ušao sam u traku za pretraživanje i odabrao jednu od slika.

Otvorite sliku u punoj veličini i spremite je u svoju mapu slike. Zatim ga preimenujemo. Nazovimo je bg(ne zaboravite na format slike, u mom slučaju to je jpg).

Evo što sam pokupio. Ovo je fotografija grada Chicaga. Po mom mišljenju, sasvim je prikladan za pozadinsku sliku stranice.

Prilažemo pozadinska slika na stranicu, za ovo koristimo CSS stilove:

Tekst će se sastojati od naslova i zapravo odlomka teksta.

Evo što se dogodilo:

Sada ćemo dodati naše kontakte kako bi nas posjetitelji mogli odmah kontaktirati, a ne čekati dok se radovi na stranici završe.

Dodajmo 3 bloka koji sadrže telefon, E-mail i Skype.

Ostaje samo raditi sa stilovima.

Povećajmo naslov, poravnajmo ga prema sredini i spustimo bliže sredini ekrana.

Povećajmo font odlomka teksta na dvadeset piksela i napravimo malu uvlaku od naslova. Napravit ćemo i obrub na dnu teksta koji će ga odvojiti od kontakata.

Napravimo blokove s kontaktima u 3 stupca, povećajmo font, poravnajmo svaki blok prema sredini i promijenimo boju teksta.

Kao rezultat toga, imamo stranicu s rezerviranim mjestom koju možemo koristiti kada su na stranici tehnički radovi.