• Artykuł

          

Kurs HTML praktycznie - Tło i nagłówek witryny  Udostępnij na: Facebook

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2012-01-03

Za pomocą samouczka Szkielet witryny w HTML przygotowałeś szkielet oraz nauczyłeś się, jak optymalnie utworzyć swoje miejsce pracy. Natomiast w samouczku Planowanie wyglądu witryny przygotowałeś szkic witryny, który przekazałeś grafikowi. Dzięki jego pracy uzyskałeś projekt graficzny, z którego pozyskałeś grafikę oraz kolor tła. Wszystkie te elementy zostaną połączone w tym samouczku.

Po wykonaniu zadań nauczysz się:

  • przygotowywać tło witryny na podstawie HTML i CSS,
  • przygotowywać kontener na nagłówek z miejscem na dwa menu oraz logotyp,
  • centrować kontener w poziomie.

Implementacja

Rozpoczynając pracę powinieneś posiadać:

Informacja

Microsoft Visual Web Developer 2010 Express możesz pobrać bezpłatnie ze strony:

https://www.microsoft.com/visualstudio/en-us/products/2010-editions/express

Pliki wymienione powyżej możesz pobrać z archiwum Samouczek-HTML-CSS.zip z katalogu Samouczek-HTML-CSS\HTML-Praktycznie\03.Przygotowanie-tla-i-naglowka-witryny\Start\.

* *

Ważnym elementem każdej witryny jest odpowiedni wygląd, który przyciągnie uwagę potencjalnego użytkownika. Celem tego samouczka jest przygotowanie tła witryny na podstawie wcześniej uzyskanego pliku graficznego oraz koloru. Wykorzystaj do tego zarówno kod HTML oraz CSS. Następnie utwórz nagłówek.

Wynik końcowy został przedstawiony na Rys. 1.

Rys. 1. Widok po ustawieniu kontenerów w nagłówku.

Ustawienie tła strony internetowej

Twoim zadaniem jest przygotowanie tła strony internetowej na podstawie wcześniej utworzonych plików graficznych oraz uzyskanego koloru.

  1. Uruchomienie Projektu.
  • Przejdź do katalogu, w którym zapisałeś projekt z samouczka Szkielet witryny w HTML.
  • Klikając dwukrotnie plik AK2011.sln uruchom środowisko pracy.
  1. Wyzerowanie właściwości znaczników HTML.
  • Otwórz plik styl.css, klikając na niego dwukrotnie w panelu Solution Explorer.
  • Dodaj na początku poniższy kod:
*{
  margin: 0px;
  padding: 0px;
  border: 0px;
  text-decoration: none;
  color: Black;  
  font-family: Arial, Verdana, Tahoma, Sans-Serif;
  font-size: 12px;
}
  • Zapisz zmiany, stosując skrót Ctrl+Shift+S.

Ponieważ każda przeglądarka posiada predefiniowane style dla znaczników HTML, w celu uzyskania zbliżonego wyglądu, wyzeruj wszystkie wartości.

  1. Ustawienie koloru tła.
  • Odnajdź kod w pliku styl.css:
body
{
}
  • Pomiędzy klamry wpisz kod:
background: #00041B;
  1. Dodanie obrazka do obszaru pracy.
  • Z menu Project wybierz Add Existing Item.
  • Przejdź do katalogu, który utworzyłeś podczas pracy z samouczkiem Planowanie wyglądu witryny.
  • Wybierz plik kola.png.
  • Kliknij OK.
  1. Ustawienie obrazka z prawej strony witryny.
  • Odnajdź kod:
body
{
  background: #00041B;
}
  • Zmień kod na:
body
{
  background: #00041B url('kola.png') no-repeat right top;
}
  • Uruchom plik index.htm w przeglądarce.

W ten sposób umieściłeś plik kola.png w prawym górnym rogu strony.

Przygotowanie nagłówka

Twoim zadaniem jest przygotowanie miejsca na nagłówek, który zawierać będzie, według projektu graficznego, menu górne, logotyp oraz menu dolne.

  1. Wycentrowanie kontenera div o id="wysrodkowany" w poziomie.
  • Dodaj kod do pliku styl.css:
#wysrodkowany
{
  margin: 0px auto; /* wysrodkowanie elementu div */
  width: 980px; /* ustawienie sztywnej szerokości */
}
  1. Przygotowanie kontenera na nagłówek.
  • Dodaj kod do pliku styl.css:
#naglowek
{
  margin-top: 15px; /* margines górny */
  margin-bottom: 15px; /* margines dolny */
  background: white; /* ustawienie koloru tła */
  min-height: 200px; /* minimalna wysokość kontenera */
  width: 100%; /* szerokość 100% dziedziczona po nadrzędnym */
  opacity: 0.8; /* przeźroczystość */
}
  • Uruchom plik index.htm w przeglądarce, powinieneś zobaczyć widok, jak na Rys. 2.

Rys. 2. Kontener przeznaczony na nagłówek.

  1. Przygotowanie kontenera na górne menu nagłówka.
  • W pliku index.htm zamień słowo nagłówek za pomocą poniższego kodu:
<div id="naglowek_gora"></div>
  • Dodaj kod do pliku styl.css:
#naglowek_gora
{
  height: 20px; /* wysokość kontenera */
  position: relative; /* pozycja relatywna */
}
  1. Przygotowanie kontenera na logotyp w nagłówku.
  • Do kontenera nagłówek, poniżej kontenera nagłówek_gora, dodaj następujący kod:
<div id="naglowek_srodek"></div>
  • Dodaj kod do pliku styl.css:
#naglowek_srodek
{
  height: 140px; /* wysokość logotypu */
  margin-top: 40px; /* położenie od szczytu kontenera nagłówek */
}
  1. Przygotowanie kontenera na dolne menu nagłówka.
  • Dodaj kontener poniżej kontenera nagłówek_srodek:
<div id="naglowek_dol">
  • Dodaj kod do pliku styl.css:
#naglowek_dol
{
  height: 20px; /* wysokość kontenera */
  position: relative; /* pozycja relatywna */
}
  1. Sprawdzenie ustawień nagłówka.
  • Dodaj dowolny tekst do kontenerów nagłówek_gora, nagłówek_srodek oraz nagłówek_dol.
  • Uruchom plik index.htm w przeglądarce, powinieneś ujrzeć widok, jak na Rys. 1.
  • Usuń tekst, który wprowadziłeś.

Podsumowanie

W tym samouczku nauczyłeś się, jak wykorzystać kod HTML i CSS do przygotowania tła witryny, jak przygotować kontener na nagłówek z miejscem na trzy elementy oraz jak wycentrować kontener o podanych rozmiarach w poziomie. Ostatecznie, po wykonaniu powyższych zadań w katalogu swojego rozwiązania, powinieneś zobaczyć cztery pliki tak, jak na Rys. 3.

Rys. 3. Pliki po wykonaniu ćwiczeń.

W kolejnym samouczku nauczysz się przygotowania kontenera z menu oraz treścią właściwą.

Dodatkowo zobacz: