Budujemy prostą stronę internetową cz. 3

biuro strona

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



Reading Time: 4 minutes

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.

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.

Instalacja fontu

Font 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.

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.

 

Przeczytaj również

Budujemy prostą stronę internetową cz. 4 Witam w kolejnej 4 części kursu w tej części pokażę jak zbudować kolejne 3 sekcje strony według mojego projektu. Linki do poprzednich części kursu ...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Element HTML z pionowym tekstem Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML. Jak uzyskać efekt pionowego tekstu Na początek rozdziela...
Przekreślenie Tekstu HTML/CSS Istnieje kilka metod z pomocą, których możemy przekreślić słowo lub wybrany fragment tekstu. W HTML przekreślamy tekst z pomocą odpowiednich znacznik...