Budujemy prostą stronę internetową cz. 3

Czas czytania: 3 minut

Witam w kolejnej części kursu w którym budujemy prostą stronę internetową. Poniżej zamieściłam linki do do poprzednich części kursu warto do nich zajrzeć przed przejściem do dalszej części.

W tej części zajmiemy się podziałem strony na odpowiednie sekcje oraz budową jednej z nich czyli nagłówka. Zastanawiacie się dlaczego podzieliłam stronę na sekcje? Odpowiedz jest prosta – w momencie kiedy strona jest w taki sposób zbudowana w bardzo łatwy sposób mogę zmieniać ich kolejność.

Dodatkowo taka struktura umożliwia personalizowanie każdej sekcji z osobna.?

Dzielenie na sekcje

Poniżej znajduje się kod w którym podzieliłam stronę na sekcje. Chwilowo są one praktycznie puste – zawierają one jedynie krótki opis.

  <body>
     <header class="top">
             nagłówek
     </header>
      <section id="word">
        zawartość sekcji word
      </section>
      <section id="us">
       zawartość sekcji us
      </section>
      <section id="technology">
       zawartość sekcji technology
      </section>
      <section id="">
       zawartość sekcji design
      </section>
       <footer>
           Stopka
       </footer>
  </body>

Każda z tych sekcji symbolizuje fragment budowanej strony. Powyżej zamieściłam link do opisu struktury strony w HTML5 może on okazać się pomocny. W każdej z tych sekcji będziemy umieszczać kolejne elementy.

Dodanie nowego fontu do strony

Font (czcionka – wiem to niewłaściwe określenie będące wynikiem złego tłumaczenia) z którego skorzystam na stronie to Source Sans Pro jest on dostępny na stronie Google Fonts.

Instalacja będzie też bardzo prosta:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext');

body{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
}

Powyższy kod dodaje oczywiście w pliku style.css na samej górze. Nieco więcej o Google Fonts dowiecie się z innego WPISU na jego temat.

Budowa nagłówka

W nagłówku czyli w sekcji <header> może znajdować się wiele różnych elementów, ja ograniczyłam się w projekcie tylko obrazka i menu. Grafikę postanowiłam wstawić w tło dlatego nie zobaczycie jej na razie w poniższym kodzie:

    <header class="top">
       <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container">
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu" 
                   aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="navbar-collapse collapse" id="topmenu" style="">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#word">word</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#us">us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#technology">technology</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#design">design</a>
              </li>
            </ul>
          </div>
         </div>
        </nav>
      </header>

Jak wspomniałam przy budowie tej strony korzystam z Bootstrap 4 dlatego większość klas w kodzie będzie miała swoje domyśle ustawiania. Sam Bootstrap nam jednak strony nie zbuduje pierwszym niestandardowym elementem będzie więc <header class=”top”>.

Napisałam dla tego elementu style:

.top{
    background: url(https://www.aurainweb.pl/wp-content/uploads/2018/10/baner.jpg);
    background-position: center;
    background-size: cover;
    height: 30%;
    min-height: 400px;
    position:relative;
    width:100%;
}

Jak widać w tle ustawiłam grafikę baner.jpg (plik jest do pobrania w pierwszej części kursu). Specjalnie nie będę poświęcać ułożeniu grafiki, ale możecie o tym poczytać we wpisie o obrazkach w tle.  Obrazek w tle nie nada nam niestety odpowiednich wymiarów dla tej sekcji.  Dlatego ustawiłam domyślną szerokość na 100% czyli na całą szerokość okna! Wysokość sekcji z kolei ma wynieść 30% przy czym nie może być mniejsza niż 400px;

Samo menu specjalnie nie różni są od innych jedyną różnica jest  pojawienie się:

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu" 
aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
 </button>

Element ten będzie bardzo istotny w momencie gdy nasza strona zostanie zwężona np.  do rozmiaru tabletu. Normalne menu się wtedy schowa a przycisk zamieni się w tzw. „hamburgerowe menu”.

W tym momencie nasze menu będzie znajdowało się praktycznie na samej górze strony, w celu przesunięcia go niżej do dolnej części sekcji dodałam:

.top nav{
    position:absolute;
    bottom:0;
    width:100%;
}

A tak to będzie mniej więcej wyglądało po dodaniu CSS:

menu przed zmianami
menu przed zmianami

To co musieliście już zauważyć to szary kolor paska pod menu. Jest on efektem klasy .bg-dark teraz by tło było białe zmienimy ją na  .bg-white. Spowoduje to niestety, że nasze odnośniki będą zlewać się z tłem.  Zamieniłam również  .navbar-dark na .navbar-white (taka klasa jak narzazie nie istnieje).

Następnie wprowadziłam kilka zmian

.top nav{
    position:absolute;
    bottom:0;
    width:100%;
    border-bottom: 1px solid #ccc;
    padding: 0;
}
.top nav.navbar-white li{
    padding: 0 15px;
}
.top nav.navbar-white li:first-of-type{
    padding: 0 0px;
}
.top nav.navbar-white li a{
    color: #333;
    border-bottom: 2px solid transparent;
    padding: 15px;
}
.top nav.navbar-white li a:hover{
    border-bottom: 2px solid red;
}

To oczywiście nie koniec.

https://www.aurainweb.pl/2018/11/budujemy-prosta-strone-internetowa-cz-4/

Wysokość sekcji na całą wielkość okna