Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Dokumentacija - Vsebina

Spletno stran Vsebina sestavimo s pomočjo datoteke zacetek.html. Kreiramo kopijo te datoteke z imenom vsebina.html, ki jo shranimo v mapo dokument. Spletno stran sestavimo tako, da sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:

Predloga glave, noge, glavnega naslova in stranskega menija spletne strani

V datoteki vsebina.html izbrišemo kodo v mrežnem stolpcu članka article, ki določa vsebino strani. Spremenimo besedilo glavnega naslova in odstavka pod glavnim naslovom. Spremenimo tudi vsebino seznama stranskega menija.

Primer izdelave spletišča Postavitev strani Vsebina predloga glave, noge, naslova in stranskega menija

Predloga spletne strani vsebina.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Vsebina. Predloga ima zamenjano besedilo glavnega naslova in odstavka pod naslovom, spremenjen pa je tudi stranski meni:

<!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: Vsebina</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 active"><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><a href="kontakt.html">Kontakt</a></li>
            <li><a href="blog.html">Blog</a></li>
          </ul>
        </div>
				
      </div>		
    </nav>
  </header>
   
  <section id="bs">
    <header>
      <!-- Glavni naslov -->
      <div class="bs-glavaStrani">
        <div class="container">
          <h1>Vsebina</h1>
          <p>Nunc feugiat condimentum nunc quis fermentum. Sed lacinia tincidunt magna, vitae tincidunt augue commodo nec. Mauris rhoncus felis nec velit aliquet egestas. Nullam iaculis pellentesque nulla at ultrices. Pellentesque ut laoreet nibh. Maecenas aliquet erat lacus, nec viverra purus eleifend in.</p>
        </div>
      </div>
    </header>
    
    <div class="container">
      <div class="row">
        <!-- Stranski meni -->
        <nav>
          <div class="col-sm-3">
            <h3>Vsebina strani:</h3>
            <ul class="list-unstyled">
              <li><a href="#tipografija">Tipografija</a></li>
              <li><a href="#koda">Koda</a></li>
              <li><a href="#slike">Slike</code></a></li>
              <li><a href="#tabele">Tabele</a></li>
            </ul>
          </div>
        </nav>
        <article>
          <div class="col-sm-9">
            <!-- Vsebina članka spletne strani -->
          </div>
        </article>
      </div>
    </div>
  </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!

Vsebina: Tipografija

V odsek <article> vstavimo vsebino spletne strani - poglavje Tipografija. Uporabimo podnaslove, odstavke, slike in besedilne oznake HTML5.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • col-*-* - prilagodljivi stolpci
  • text-center - sredinska poravnava besedila
  • img-responsive - prilagaja velikost slike velikosti zaslona
Primer izdelave spletišča Postavitev strani Vsebina vsebina: Tipografija
...
<!-- članek vsebine: poglavje 'Tipografija' -->
<article>
  <div class="col-sm-9">
    <h2 id="tipografija">Tipografija</h2>
    <p>Phasellus dui sapien, cursus vulputate tempus nec, cursus sit amet justo. Proin vitae dui porta, dictum enim nec, convallis nunc. Nunc feugiat condimentum nunc quis fermentum. Sed lacinia tincidunt magna, vitae tincidunt augue commodo nec. Mauris rhoncus felis nec velit aliquet egestas. Nullam iaculis pellentesque nulla at ultrices. Pellentesque ut laoreet nibh. Maecenas aliquet erat lacus, nec viverra purus eleifend in.</p>
						
    <h3>Naslovi</h3>
    <p>Ut egestas venenatis est, at lobortis turpis ultrices eu. Aenean ut aliquam magna. <strong>Phasellus posuere</strong>, sapien at varius ullamcorper, nunc nunc condimentum elit, eget dignissim neque orci sed justo. Aliquam efficitur <code><h1></code> tempus <code><h6></code> eleifend. </p>																
    <pre><code><h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6></code></pre>
    <p class="text-center"><img src="../slike/dokumentacija/vsebina/naslovi.png" alt="container-fluid" class="img-responsive"></p>
						
    <h3>Besedeline oznake HTML5</h3>
    <p><strong>Class aptent taciti sociosqu</strong> ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Maecenas at nibh lacus. </p>
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
    <pre><code><p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p></code>
  </div>
</article>
...
  Poglej spletno stran!

Vsebina: Koda

V odsek <article> vstavimo vsebino spletne strani - poglavje Koda. Uporabimo podnaslove, odstavke, slike in besedilne oznake HTML5.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • col-*-* - prilagodljivi stolpci
  • text-center - sredinska poravnava besedila
  • img-responsive - prilagaja velikost slike velikosti zaslona
Primer izdelave spletišča Postavitev strani Vsebina vsebina: Koda
...
<!-- članek vsebine: poglavje 'Koda' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="koda">Koda</h2>
    <p>Nulla vel rutrum lorem. Aenean at interdum tortor, ac ultricies velit.</p>
    <h3>Vrstična koda</h3>
    <p>For example, <code><section></code> should be wrapped as inline.</p>
    <pre><code>For example, <code> &lt;section&gt; </code> should be wrapped as inline.</code></pre>
						
    <h3>Bloki code</h3>
    <p>Nulla sit amet orci <code><pre></code> sed enim cursus hendrerit. Etiam tincidunt, elit non interdum imperdiet, leo felis malesuada dolor, at mollis libero sem id justo. Nulla porttitor ac turpis a elementum <code>.pre-scrollable</code>. Duis sollicitudin tortor ut consectetur elementum. Phasellus accumsan vestibulum gravida. Integer feugiat vel quam eget iaculis.</p>
    <code> <p>Sample text here...</p><br>
    <p>And another line of sample text here...</p></code><br><br>
    <pre><code><p>Sample text here...</p>
    <p>And another line of sample text here...</p></code>
  </div>
</article>
...
  Poglej spletno stran!

Vsebina: Slike

V odsek <article> vstavimo vsebino spletne strani - poglavje Slike. Uporabimo podnaslove, odstavke, slike in oznako za kodo.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • col-*-* - prilagodljivi stolpci
  • text-center - sredinska poravnava besedila
  • img-responsive - prilagaja velikost slike velikosti zaslona
  • img-thumbnail - zmanjša sliko v sličico
  • img-circle - prikaže okroglo sliko
Primer izdelave spletišča Postavitev strani Vsebina vsebina: Slike
...
<!-- članek vsebine: poglavje 'Slike' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="slike">Slike</h2>
    <p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. <code>max-width: 100%;</code> and <code>height: auto;</code> are applied to the image so that it scales with the parent element.</p>
    <p class="text-center"><img src="../slike/dokumentacija/vsebina/img1.png" alt="Generična slika 771×250" class="img-responsive"></p>
    <pre><code><img src="../slike/img1.png" alt="Generična slika 771×250" class="img-responsive"></code></pre>
						
    <h3>Pomanjšane sličice (thumbnails)</h3>
    <p>In addition to our <a href="#">border-radius utilities</a>, you can use <code>.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
    <p class="text-center"><img src="../slike/dokumentacija/vsebina/img2.png" alt="Pomanjšana generična slika 200×200" class="img-thumbnail"></p>
    <pre><code><img src="../slike/img2.png" alt="Pomanjšana generična slika 200×200" class="img-thumbnail"></code></pre>
						
    <h3>Zaokrožena slika</h3>
    <p>Nunc nec vestibulum massa. Cras pretium, ex vel <code>.img-circle</code> pretium consectetur.</p>
    <p><em>Quam dolor pellentesque mi, eget condimentum risus ante at libero.</em></p>
    <p class="text-center"><img src="../slike/dokumentacija/vsebina/img2.png" alt="Pomanjšana generična slika 200×200" class="img-circle"></p>
    <pre><code><img src="../slike/img2.png" alt="Pomanjšana generična slika 200×200" class="img-circle"></code></pre>
  </div>
</article>
...
  Poglej spletno stran!

Vsebina: Tabele

V odsek <article> vstavimo vsebino spletne strani - poglavje Tabele. Uporabimo podnaslove, odstavke in tabelo.

Za oblikovanje uporabimo naslednja Bootstrapova razreda:

  • col-*-* - prilagodljivi stolpci
  • table - osnovna oblika tabele
Primer izdelave spletišča Postavitev strani Vsebina vsebina: Tabele
...
<!-- članek vsebine: poglavje 'Tabele' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="tabele">Tabele</h2>
    <p>Nunc feugiat condimentum <code>.table</code> nunc quis fermentum. Sed lacinia tincidunt magna, vitae tincidunt augue commodo nec. Mauris rhoncus felis nec velit aliquet egestas. <strong>Nullam iaculis pellentesque nulla at ultrices.</strong> Pellentesque ut laoreet nibh. Maecenas aliquet erat lacus, nec viverra purus eleifend in.</p>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
    <pre><code><table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table></code></pre>
  </div>
</article>
...
  Poglej spletno stran!
Nazaj
Naprej