KREIRANJE SAJTA ZA KREIRANJE LOGO-A
Sajt treba da ima naslovnu stranu, koju mogu svi da vide, na kojoj se nalaze osnovne informacije o sajtu, opis koraka do izrade logo-a, stranu za logovanje i registraciju, Stranu sa izborom tipa logo-a, stranu za popunu informacija o naslovu logoa, logo editor, mogućnost čuvanja kreiranih logo-a, i deo za preuzimanje.
Prvo ćemo kreirati naslovnu stranu pomoću HTML,CSS i javascript-a. Zatim ćemo to ugraditi u Đango aplikaciju.
Prvo ćemo kreirati naslovnu stranu pomoću HTML,CSS i javascript-a. Zatim ćemo to ugraditi u Đango aplikaciju.
Kreiranje naslovne strane web sajta
Naslovna strana ima meni, gornje zaglavlje(header) glavni deo i donje zaglavlje(footer).
Slika 1: Kreiranje naslovne strane web sajta "Logo Kreator"
Područja na web strani mogu da se organizuju pomoću div tagova unutar tela strane tj. između body tagova <body></body>.
Cela strana je organizovana između <html> i </html>. Sadržaj web strane od koga započinjemo kreiranje:
Cela strana je organizovana između <html> i </html>. Sadržaj web strane od koga započinjemo kreiranje:
|
< !DOCTYPE html > < html >
< head >
< title > Naslov < /title > < /head >
< body >
< /html >< /body > Videti detaljnije na w3schools.com
Da bi naslovnu stranu lepo stilizovali i dodali neke funkcionalnosti dodaje se Bootstrap framework(u primeru se koristi Bootstrap 4) verzija.Takođe treba dodati i jquery datoteke. Zbog toga je potrebno povezati se sa CDN () pomoću link taga za css fajlove, a script tag za povezivanje sa javascript fajlovima: |
Kreiranje naslovne strane sajta web aplikacije za kreiranje Logoa-videoKreiranje naslovne strane sajta pomoću HTML-a, CSS-a, Javascript-a, JQuery. Aplikacija za kreiranje Logo-a
|
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
Ovaj deo treba dodati u gornjem zaglavlju između takova <head> i </head>
Zaglavlje takođe treba da ima i meta tagove npr.
<meta charset="UTF-8" />
Meta podaci predstavljaju kratak opis sadržaja web strane. Nisu vidljivi na stranici, ali ih pretraživači koriste kada prikazuju rezultate pretrage.
Unutar body tagova strana je podeljena na područja sa div tagovima, na gornje zaglavlje, donje zaglavlje i centralni deo. Ovi div tagovi se nalaze unutar glavnog div taga koji za prethodno pomenute predstavlja roditelj div:
Zaglavlje takođe treba da ima i meta tagove npr.
<meta charset="UTF-8" />
Meta podaci predstavljaju kratak opis sadržaja web strane. Nisu vidljivi na stranici, ali ih pretraživači koriste kada prikazuju rezultate pretrage.
Unutar body tagova strana je podeljena na područja sa div tagovima, na gornje zaglavlje, donje zaglavlje i centralni deo. Ovi div tagovi se nalaze unutar glavnog div taga koji za prethodno pomenute predstavlja roditelj div:
<div class="container">
<div class="gornje_zaglavlje d-flex flex-column text-center">
</div>
<div class="d-flex flex-column sadrzaj">
</div>
<div class="donje_zaglavlje d-flex flex-column">
</div>
</div>
<div class="gornje_zaglavlje d-flex flex-column text-center">
</div>
<div class="d-flex flex-column sadrzaj">
</div>
<div class="donje_zaglavlje d-flex flex-column">
</div>
</div>
Da bi se dobio odgovarajući izgled ovih div tagova koriste se klase iz css fajlova: Klase gornje_zaglavlje i donje_zaglavlje su definisane u main.css, dok su ostale klase iz bootstrap-a verzije 4. flex način prikaza postoji tek od verzije 4 bootstrap-a. Pogledati sledeći tutorijal:
https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
Varijanta d-flex sa flex-column klasom rasporediće komponente unutra celom širinom i to jednu ispod druge. Da je umesto flex-column odabrana klasa flex-row onda bi raspored bio u jednom redu.
U gornjem zaglavlju treba dodati meni:
https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
Varijanta d-flex sa flex-column klasom rasporediće komponente unutra celom širinom i to jednu ispod druge. Da je umesto flex-column odabrana klasa flex-row onda bi raspored bio u jednom redu.
U gornjem zaglavlju treba dodati meni:
<nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end ">
<!-- Items -->
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" >
<span class="full-text" aria-hidden="true">
Naslovna
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<span class="full-text" aria-hidden="true">
O nama
</span>
</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink">
<span class="full-text" aria-hidden="true">
Logo primeri
</span>
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Poslovni
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Edukacija
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Sport
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Items -->
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" >
<span class="full-text" aria-hidden="true">
Naslovna
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<span class="full-text" aria-hidden="true">
O nama
</span>
</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink">
<span class="full-text" aria-hidden="true">
Logo primeri
</span>
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Poslovni
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Edukacija
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text" aria-hidden="true">
Sport
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Kako se kreira meni pomoću bootstrap-a pogledajte na strani:
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Klase koje se nalaze u main.css i koje su zadužene za izgled html stranice opisane prethodno mogu se videti na sledećoj slici:
Unutar srednjeg dela kreirana su još dva unutrašnja div taga, jedan je traka sa 3 div-a unutra koji su raspoređeni u jednom redu:
Kod koji će ovo prikazati:
<div class="traka d-flex flex-row justify-content-around">
<div class="p-2 polje">
<h1>1. Odaberite naziv</h1>
<p>Unesite Vaše ime ili naziv Vaše logo kompanije</p>
</div>
<div class="polje">
<h1>2. Izaberite logo</h1>
<p>Odaberite logo koji je aplikacija kreirala u startu i ako želite napravite sopstvene izmene na njemu</p>
</div>
<div class="polje">
<h1>3. Preuzmite logo</h1>
<p>Sačuvajte logo pod Vašim profilom i preuzmite datoteku</p>
</div>
</div>
<div class="p-2 polje">
<h1>1. Odaberite naziv</h1>
<p>Unesite Vaše ime ili naziv Vaše logo kompanije</p>
</div>
<div class="polje">
<h1>2. Izaberite logo</h1>
<p>Odaberite logo koji je aplikacija kreirala u startu i ako želite napravite sopstvene izmene na njemu</p>
</div>
<div class="polje">
<h1>3. Preuzmite logo</h1>
<p>Sačuvajte logo pod Vašim profilom i preuzmite datoteku</p>
</div>
</div>
Klase traka i polje su opisane u css fajlu main.css
Ovde se može uočiti da se za veličinu koristi uglavnom vw jedinica koja je relativna u odnosu na veličinu prikaza na ekranu(viewport-a). Ovo znači da će veličina zavisiti od rezolucije uređaja na kojem se prikazuje.
Još jedan div se nalazi unutar sadržaja i u njemu se nalaze 3 slike (<img>). Slika onoga što se prikazuje prikazana je na slici ispod.
Još jedan div se nalazi unutar sadržaja i u njemu se nalaze 3 slike (<img>). Slika onoga što se prikazuje prikazana je na slici ispod.
Kompletan kod naslovne strane možete pogledati na webstrani: Logo Kreator - naslovna
Kompletan CSS kod možete pogledati na strani main.css
Kompletan CSS kod možete pogledati na strani main.css
|
Prethodno
|< Kreiranje web aplikacija 2 |
Sledeće
Kreiranje Python web aplikacije >| |