Budujemy prostą stronę internetową cz. 3

biuro strona

Kategoria wpisu Bootstrap 4, PHP, HTML, CSS Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 3,00 z 5)
Loading...

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.

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:

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:

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:

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ę:

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:

 

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

To oczywiście nie koniec.

Budujemy prostą stronę internetową cz. 4

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *