Priprava vsebine spletišča

Pred izdelavo spletišča pripravimo vso vsebino, ki bo vključena v spletišče:

Logotip

V grafičnem programu pripravimo logotip in ikono spletišča (angl. favicon).

Primer izdelave spletišča priprava vsebine logotip in ikona spletišča

V našm primeru smo logotip spletišča izdelali s spletno aplikacijo FreeLogoServices.

Logotip spletišča:

Ikona spletišča ( favicon.ico ):

Pri izdelavi spletišča uporabimo besedilo le za naslove, ves preostali tekst pa je generično besedilo Lorem Ipsum.

Primer izdelave spletišča priprava vsebine slike

Vse slike spletišča so v stisnjeni obliki v datoteki slike.zip.

Spodnja slika prikazuje seznam slik z imeni datotek, ki so razporejene v mape za posamezno spletno stran:

Seznam slik

Ikone, ki jih vstavimo v spletišče, se nahajajo na spletni strani Font Awesome.

Primer izdelave spletišča priprava vsebine ikone

V spletne strani v katerih uporabimo ikone Font Awesome je potrebno vključiti slogovno datoteko z naslednjo kodo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Ikone v nogi (<footer>) spletnih strani:

Koda ikone	Primer
`<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-snapchat-square fa-2x" aria-hidden="true"></i>`

Ikone v datoteki bootstrap.html:

Koda ikone	Primer
`<i class="fa fa-download fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-cloud-download fa-2x" aria-hidden="true"></i>`
`<i class="fa fa-cog fa-2x" aria-hidden="true"></i>`

Primer izdelave spletišča priprava vsebine zunanje povezave

Seznam zunanjih povezav, ki so uporabljene na spletni strani Vodiči v datoteki vodici.html:

Nalov vodiča	Povezava
Bootstrap Tutorial	https://www.youtube.com/watch?v=gqOEoUR5RHg
Bootstrap Beginner Crash Course	https://www.youtube.com/watch?v=gqOEoUR5RHg
Creating a Website with Bootstrap Studio	https://www.youtube.com/watch?v=10SwsoYNkVc
Create A Responsive Bootstrap Website From Scratch	https://www.youtube.com/watch?v=eIWRbvE1B2E
How to building awesome bootstrap websites	https://www.youtube.com/watch?v=pbGNYgJD-dw
Code a Responsive Website with Twitter Bootstrap	https://www.youtube.com/watch?v=oepmLGQP1m4
LayoutIt! - Drag and Drop Interface Builder for Bootstrap	https://www.youtube.com/watch?v=PmJ4OSRod8I
Bootstrap tutorial for beginners	https://www.youtube.com/watch?v=314m7YBRFvQ
Creare siti con Bootstrap con un Metodo Efficace	https://www.youtube.com/watch?v=6spqHfiCwtY
Curso completo de Bootstrap desde cero 1.- Introducción e Instalación	https://www.youtube.com/watch?v=nug1pMke-y4
Bootstrap 3 tutorial - Create your first one-page responsive website using Bootstrap	https://www.youtube.com/watch?v=e6VYRVRoC40
Create responsive website in bootstrap	https://www.youtube.com/watch?v=p4hU45Le9sY