LOGO-KREATOR - NASLOVNA STRANA

Web programiranje → Kreiranje web sajta → Logo kreator — naslovna strana

Logo kreator — izrada naslovne strane (HTML + CSS + Bootstrap)

Lekcija 7 od 21

Web početna:
Povratak na vodič | Sledeća lekcija: CSS stilovi

Uvod

U ovoj lekciji pravimo kompletnu naslovnu stranu web aplikacije Logo Kreator.

Ova stranica će kasnije biti korišćena kao frontend deo u Django aplikaciji, zato je važno da razumete kako je organizovana.

Cilj lekcije:

Da naučite kako da organizujete HTML stranicu na sekcije i napravite moderan raspored koristeći Bootstrap i CSS.

1. Osnovna struktura i HEAD deo

Svaka web stranica počinje osnovnom HTML strukturom i zaglavljem (head).


<head>

<meta charset="UTF-8">
<title>Logo Kreator</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Naš CSS -->
<link rel="stylesheet" href="css/main.css">

</head>

Tip:

<meta charset="UTF-8"> omogućava pravilan prikaz naših slova (č, ć, š, ž).

2. Glavna struktura stranice

Stranicu delimo na tri glavna dela:

gornje zaglavlje
sadržaj
donje zaglavlje


<div class="container">

    <div class="gornje_zaglavlje"></div>

    <div class="sadrzaj"></div>

    <div class="donje_zaglavlje"></div>

</div>

Važno:

Klasa container dolazi iz Bootstrap-a i služi za centriranje sadržaja.

3. Navigacioni meni

U gornjem delu dodajemo meni koristeći Bootstrap:


<nav class="nav-container navbar-expand-lg d-flex flex-row p-2 align-items-end">

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">

<li class="nav-item active">
<a class="nav-link" href="#">Naslovna</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">O nama</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">
Logo primeri
</a>

<ul class="dropdown-menu">
<li class="dropdown-item">Poslovni</li>
<li class="dropdown-item">Edukacija</li>
<li class="dropdown-item">Sport</li>
</ul>

</li>

</ul>
</div>

</nav>

Tip:

Klasa d-flex omogućava fleksibilan raspored elemenata (Flexbox).

Napomena o Bootstrap klasama:

Klase kao što su nav, nav-item, nav-link dolaze iz Bootstrap biblioteke.

To znači da ih ne moraš definisati u svom main.css fajlu, jer su već unapred stilizovane.

Možeš ih dodatno prilagoditi u svom CSS-u ako želiš da promeniš izgled.

Kako razmišljati:

Bootstrap daje gotove stilove (brže pravljenje sajta), dok sopstveni CSS daje potpunu kontrolu nad izgledom.

Najčešće se koristi kombinacija oba pristupa.

Navigacioni meni bez CSS stilova (čist HTML prikaz)

Slika 1: Navigacioni meni prikazan samo pomoću HTML-a — bez stilova i rasporeda.

Dodavanje CSS stilova

Trenutno naša stranica ima samo HTML strukturu bez ikakvog dizajna. Da bismo je stilizovali, koristićemo CSS.

Gde se dodaje CSS?

CSS se obično nalazi u posebnom fajlu kako bi kod bio pregledniji.

U okviru projekta kreiramo fajl:


css/main.css

Zatim taj fajl povezujemo sa HTML dokumentom u <head> delu:


<link rel="stylesheet" href="css/main.css">

Tip:

Uvek koristite poseban CSS fajl umesto pisanja stilova direktno u HTML-u.

Primer: stilizacija navigacionog menija

Dodajmo osnovne stilove za meni kako bi izgledao urednije.

Ovo je isti meni iz prethodnog primera — sada ga detaljnije objašnjavamo i unapređujemo.


nav {
    background-color: #333;
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 15px;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    color: #4CAF50;
}

Nakon dodavanja ovog CSS-a, naš meni dobija boju, raspored i hover efekat.

Navigacioni meni sa primenjenim CSS stilovima i rasporedom

Slika 2: Isti navigacioni meni nakon dodavanja CSS stilova — definisane boje, raspored i hover efekti.

4. Naslov i forma

Do sada smo koristili sopstveni CSS za stilizaciju. Sada prelazimo na Bootstrap, koji već sadrži gotove stilove i omogućava bržu izradu stranica.


<h1 class="text-center">Logo Kreator</h1>
<p class="text-center">Kreirajte jednostavan logo u sekundi</p>

<form>
<input type="text" name="logoname">
<input type="submit" class="btn btn-danger">
</form>

5. Traka sa koracima


<div class="traka d-flex flex-row justify-content-around">

<div class="polje">
<h1>1. Odaberite naziv</h1>
</div>

<div class="polje">
<h1>2. Izaberite logo</h1>
</div>

<div class="polje">
<h1>3. Preuzmite</h1>
</div>

</div>

Tip:

flex-row raspoređuje elemente u jednom redu.

6. Primeri logotipa


<div class="logo_primeri d-flex flex-column">

<div class="d-flex flex-row justify-content-around">

<img src="logo1.png">
<img src="logo2.png">
<img src="logo3.png">

</div>

</div>

7. CSS stilovi


.logo_primeri img{
    width:32%;
    height:28vw;
    padding:4vw;
}

.logo_primeri{
    text-align:center;
}

.ribbon{
    background:#dd0022;
    color:white;
    height:15vw;
}

.field{
    width:30%;
}

Važno:

vw jedinica znači da se veličina prilagođava širini ekrana.

Mini eksperiment

Pokušaj:

Promeni:

boju u CSS-u
veličinu slika
raspored (flex-row u flex-column)

Izazov

Zadatak:

Dodaj još jedan meni element ili još jednu sliku u galeriju.

Razvoj korak po korak:

1. Napravili smo strukturu (HTML)
2. Dodali stil (CSS)
3. Sada koristimo Bootstrap da ubrzamo razvoj

Traka sa koracima (3 koraka)

Unutar centralnog dela dodajemo traku koja prikazuje 3 koraka za kreiranje logotipa.

Ova traka koristi Bootstrap flex-row kako bi elementi bili u jednom redu.


<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</p>
    </div>

    <div class="polje">
        <h1>3. Preuzmite logo</h1>
        <p>Sačuvajte logo i preuzmite datoteku</p>
    </div>
</div>

Tip:

Klasa d-flex flex-row raspoređuje elemente u jednom redu. Klasa justify-content-around pravi razmak između njih.

Važno:

Korišćenje vw jedinica u CSS-u znači da se elementi prilagođavaju veličini ekrana.

Prikaz primera logo-a

Sledeći deo prikazuje primere generisanih logo-a koristeći slike.


<div class="logo_primeri d-flex flex-column justify-content-around">
    <h1 class="p-2">Primeri kreiranih logo-a</h1>

    <div class="d-flex flex-row justify-content-around">
        <img src="images/logo_prim_1.png" class="rounded">
        <img src="images/logo_prim_2.png" class="rounded">
        <img src="images/logo_prim_3.png" class="rounded">
    </div>
</div>

Tip:

Klasa rounded iz Bootstrap-a zaobljava ivice slika.

Donje zaglavlje (footer)

Na kraju dodajemo footer sa linkovima.


<div class="donje_zaglavlje d-flex flex-column">
    <div class="d-flex flex-row justify-content-around">

        <div class="d-flex flex-column linkovi">
            <a href="#">RCT Pupin</a>
            <a href="#">Petlja</a>
        </div>

        <div class="d-flex flex-column linkovi text-white text-center">
            <a href="#">DMS</a>
            <a href="#">Bootstrap</a>
        </div>

    </div>

    <p class="text-center text-white">
        © Copyright 2020
    </p>
</div>

Zapamti:

Footer se koristi za dodatne linkove i informacije o sajtu.

Kompletan kod stranice


<!DOCTYPE html>
<html>
  <head>
    <!-- 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"/>

    <meta charset="UTF-8" />
    <title>Logo Kreator</title>
  </head>

  <body>
    <div class="container">

      <!-- Gornje zaglavlje -->
      <div class="gornje_zaglavlje d-flex flex-column text-center">

        <nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end">
          <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"> Naslovna</span>
                </a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="">
                  <span class="full-text"> 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"> Logo primeri</span>
                </a>

                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                  <li class="dropdown-item">
                    <a href=""><span class="full-text"> Poslovni</span></a>
                  </li>

                  <li class="dropdown-item">
                    <a href=""><span class="full-text"> Edukacija</span></a>
                  </li>

                  <li class="dropdown-item">
                    <a href=""><span class="full-text"> Sport</span></a>
                  </li>

                </ul>
              </li>

            </ul>
          </div>
        </nav>

        <!-- Naslov i podnaslov -->
        <h1 class="text-center">Logo Kreator</h1>
        <p class="text-center">Kreirajte jednostavan logo u sekundi..</p>

        <!-- Forma -->
        <form>
          <input type="text" id="logoname" name="logoname"><br>
          <input type="submit" class="btn btn-danger" value="Submit Button">
        </form>

      </div>

      <!-- Centralni deo -->
      <div class="d-flex flex-column sadrzaj">

        <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 i po želji ga izmenite</p>
          </div>

          <div class="polje">
            <h1>3. Preuzmite logo</h1>
            <p>Sačuvajte i preuzmite Vaš logo</p>
          </div>

        </div>

        <!-- Primeri logo-a -->
        <div class="logo_primeri d-flex flex-column justify-content-around">

          <h1 class="p-2">Primeri kreiranih logo-a</h1>

          <div class="d-flex flex-row justify-content-around">
            <img src="images/logo_prim_1.png" class="rounded" alt="logo1">
            <img src="images/logo_prim_2.png" class="rounded" alt="logo2">
            <img src="images/logo_prim_3.png" class="rounded" alt="logo3">
          </div>

        </div>

      </div>

      <!-- Footer -->
      <div class="donje_zaglavlje d-flex flex-column">

        <div class="d-flex flex-row justify-content-around">

          <div class="d-flex flex-column linkovi">
            <a href="http://rctpupin.edu.rs/">RCT Pupin</a>
            <a href="https://petlja.org/">Petlja</a>
            <a href="https://izprogramiranja.weebly.com/">Svet programiranja</a>
          </div>

          <div class="d-flex flex-column linkovi text-white text-center">
            <a href="https://dms.rs/">DMS</a>
            <a href="https://www.w3schools.com/">W3School</a>
            <a href="https://getbootstrap.com/">Bootstrap</a>
          </div>

        </div>

        <p class="text-center text-white">© Copyright 2020 Ime Prezime</p>

      </div>

    </div>
  </body>
</html>

Izazov

Pokušaj:

Promeni tekst u headeru
Dodaj još jednu stavku u meni
Promeni boju trake u CSS-u