Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Kontakt

Spletno stran Kontakt sestavimo s pomočjo datoteke bootstrap.html. Kreiramo kopijo te datoteke z imenom kontakt.html. Spletno stran sestavimo tako, da sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:

Predloga glave, noge in glavnega naslova spletne strani

V datoteki kontakt.html obdržimo HTML kodo zaglavja spletne strani in kodo, ki opisuje meni z logotipom, glavni naslov ter nogo spletne strani, preostalo kodo pa izbrišemo. Spremenimo besedilo glavnega naslova in odstavka pod glavnim naslovom. V seznamu glavnega menija prestavimo Bootstrapov razred active v alinejo Kontakt.

Primer izdelave spletišča Postavitev strani Kontakt predloga glave, noge in naslova

Predloga spletne strani kontakt.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Kontakt in spremenjenim besedilom glavnega naslova in odstavka pod naslovom. Spremnimo tudi vrednost atributa id v HTML oznaki <section> v kontakt:

<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="keywords" content="eNSA, spletišče, website, kreiranje spletišča, Bootstrap">
  <meta name="description" content="Pošljite sporočilo, da izveš več o izdelavi in oblikovanju spletnih strani z brezplačnim odprtokodnim okvirjem Bootstrap.">
  <meta name="author" content="eNSA, Stanislav Jagodic">
  <title>eNSA | Spletišče: Kontakt</title>
	
  <!-- Ikona spletišča -->
  <link rel="icon" href="slike/favicon.ico" type="image/x-icon">
	
  <!-- Googlove pisave -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
  <!-- Ikone Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
  <!-- Oblikovni slogi za spletišče -->
  <link rel="stylesheet" href="css/slog.css">
</head>

<body>
  <header>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
			
        <div class="navbar-header">  <!-- Gumb menija -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#meni">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <!-- Logotip s povezavo -->
          <a class="navbar-brand" href="index.html"><img src="slike/index/logo.png" alt="eNSA logotip"></a>
        </div>
				
        <!-- Meni, ki se na manjših zaslonih skrči -->
        <div class="collapse navbar-collapse" id="meni">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Domov</a></li>
            <li><a href="bootstrap.html">Bootstrap</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Dokumentacija <span class="caret"></span></a>
              <!-- Spustni meni -->
              <ul class="dropdown-menu">
                <li><a href="dokument/zacetek.html">Kako začeti</a></li>
                <li><a href="dokument/postavitev.html">Postavitev</a></li>
                <li><a href="dokument/vsebina.html">Vsebina</a></li>
                <li><a href="dokument/komponente.html">Komponente</a></li>
              </ul>
            </li>
            <li><a href="vodici.html">Vodiči</a></li>
            <li class="active"><a href="kontakt.html">Kontakt</a></li>
            <li><a href="blog.html">Blog</a></li>
          </ul>
        </div>
				
      </div>		
    </nav>
  </header>
   
  <section id="kontakt">
    <header>
      <!-- Glavni naslov -->
      <div class="bs-glavaStrani">
        <div class="container">
          <h1>Kontakt</h1>
          <p>Maecenas ultrices sed lacus et auctor. Morbi libero turpis, sodales sit amet tellus semper, mollis viverra nulla. Sed sit amet congue nulla, et vestibulum felis. Maecenas mauris lacus, sollicitudin et ornare tincidunt, molestie ultrices arcu. Ut tortor diam, lacinia eget purus vel, porta tincidunt ipsum.</p>
        </div>
      </div>
    </header>
  </section>
	
  <!-- Okvir noge z dvema stolpcema -->
  <footer class="container-fluid text-center">
    <div class="row">
      <!-- Socialne ikone -->
      <div class="nogaLevo col-sm-6">
        <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>
        <a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a>
        <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
        <a href="#" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a>
        <a href="#" data-toggle="tooltip" data-placement="top" title="Youtube"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a>
        <a href="#" data-toggle="tooltip" data-placement="top" title="Snapchat"><i class="fa fa-snapchat-square fa-2x" aria-hidden="true"></i></a>
      </div>
      <div class="nogaDesno col-sm-6">
        © eNSA Bootstrap, 2017
      </div>
    </div>
  </footer>

  <!-- jQuery in Bootstrap JS. -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>
</html>
  Poglej spletno stran!

Podnaslov in besedilo

Pod glavni naslov vstavimo Bootstrapov okvir container z Bootstrapovo vrstico row z enim stolpcem, ki vsebuje podnaslov in odstavek:

  • container - okvir s fiksno širino
  • row - vrstica
  • col-sm-12 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 12 - stolpec širine 12 Bootstrapovih kolon)
Primer izdelave spletišča Postavitev strani Kontakt podnaslov in besedilo
...
<section id="kontakt">
  <header>
    ... <!-- Glavni naslov in besedilo -->
  </header>
  <!-- Podnaslov in odstavek besedila -->
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2>Pošlji sporočilo</h2>
        <p>Sed mauris orci, commodo id viverra vitae, scelerisque vel eros. Curabitur dapibus euismod hendrerit. Nam accumsan eros eu pharetra faucibus. Donec vitae interdum ipsum. Vivamus faucibus lectus non turpis sodales, ultrices porta urna lobortis. Nullam eros leo, consectetur id ante nec, fringilla elementum nunc. Ut quis lacinia lectus.</p>
      </div>
    </div>
  </div>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge podnaslova in besedila:

/* Kontakt - Podnaslov in besedilo */
#kontakt { background-color: #efefef }
#kontakt .container { margin: 0 auto }
#kontakt .col-sm-12 { margin-bottom: 30px }
  Poglej spletno stran!

Obrazec

Pod podnaslov in besedilo vstavimo v Bootstrapov okvir container novo vrstico row z dvema stolpcema, pri čemer je desni stolpec 3 krat širši od levega. V levi stolpec vstavimo 4 polja za vnos kratkega besedila in napise nad polji, v desni stolpec pa polje za vnos daljšega besedila, napis nad poljem, polje za označevanje z besedilom in potrditveni gumb.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • row - vrstica
  • col-sm-3 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 3 - stolpec širine 3 Bootstrapove kolone)
  • col-sm-9 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 9 - stolpec širine 9 Bootstrapovih kolon)
  • form-group - določi optimalen razmik med elementi obrazca
  • form-control - določa oblikovne lastnosti besedilnih polj obrazca
  • checkbox - določa oblikovne lastnosti polja za označevanje
  • btn - oblikovanje gumba
  • btn-primary - primarno oblikovanje gumba
Primer izdelave spletišča Postavitev strani Kontakt obrazec
...
<section id="kontakt">
  <header>
    ... <!-- Glavni naslov in besedilo -->
  </header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        ... <!-- Podnaslov in odstavek besedila -->
      </div>
    </div>
    <!-- Obrazec -->
    <div class="row">
      <form>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="ime">Ime <span class="zvezdica">*</span></label>
            <input type="text" class="form-control" id="ime" required>
          </div>
          <div class="form-group">
            <label for="priimek">Priimek <span class="zvezdica">*</span></label>
            <input type="text" class="form-control" id="priimek" required>
          </div>
          <div class="form-group">
            <label for="email">Elektronski naslov <span class="zvezdica">*</span></label>
            <input type="email" class="form-control" id="email" required>
          </div>
          <div class="form-group">
            <label for="tel">Telefon</label>
            <input type="tel" class="form-control" id="tel">
          </div>
        </div>
        <div class="col-sm-9">
          <label>Vaše sporočilo</label>
          <textarea name="sporocilo" rows="15" class="form-control"></textarea>
          <div class="checkbox">
            <label><input type="checkbox" required>Strinjam se s splošnimi pogoji</label>
          </div>
          <button type="submit" class="btn btn-primary">Pošlji sporočilo</button>
        </div>
      </form>
    </div>
  </div>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge obrazca:

/* Kontakt - Obrazec */
#kontakt .row {	margin-bottom: 30px }
#kontakt .btn { padding: 7px 50px }
#kontakt .zvezdica { color: red }
  Poglej spletno stran!

Zemljevid

Pod obrezec vstavimo v prilagodljiv Bootstrapov okvir container-fluid zemljevid, ki je Google Map API:

  • container-fluid - prilagodljiv okvir
Primer izdelave spletišča Postavitev strani Kontakt zemljevid
...
<section id="kontakt">
  <header>
    ... <!-- Glavni naslov in besedilo -->
  </header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        ... <!-- Podnaslov in odstavek besedila -->
      </div>
    </div>
    <div class="row">
      ... <!-- Obrazec -->
    </div>
  </div>
  <!-- Zemljevid -->
  <div id="zemljevid">
    <div class="container-fluid">
      <div id="map"></div>
    </div>
  </div>
</section>

Na konec dokumenta vključimo skriptno kodo Google Map API:


    <!-- Google Map API -->
    <script>
      function myMap() {
        var myCenter = new google.maps.LatLng(46.250623,14.348762);
        var mapCanvas = document.getElementById("map");
        var mapOptions = {center: myCenter, zoom: 15};
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({position:myCenter});
        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({
          content: "<b>eNSA, Bootstrap</b><br>ŠC Kranj<br>Kidričeva cesta 55<br>4000 Kranj"
        });
        infowindow.open(map,marker);
      }
    </script>  
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNwS87CPSATXb_nkhTmN5-VxgLBuMbW3I&callback=myMap"></script>
  </body>
</html>

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge zemljevida:

/* Kontakt - Zemljevid */
#zemljevid .container-fluid {
  background-color: #efefef;
  width: 100%;
  padding: 0;
  margin: 0;
}
#zemljevid #map {
  width: 100%;
  height: 500px;	
}
  Poglej spletno stran!
Nazaj
Naprej