• Artykuł

          

Kurs HTML praktycznie - Szkielet witryny  Udostępnij na: Facebook

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2012-01-02

Za pomocą samouczka Planowanie wyglądu witryny przygotowałeś szkic projektu oraz nauczyłeś się optymalizować wykorzystanie plików graficznych. Współczesne strony internetowe to połączenie treści i grafiki. Podstawą witryny jest zawsze treść, którą chcesz przekazać. Opisując ją w znaczniki HTML, masz możliwość rozpoznania jej przez przeglądarkę internetową, która potrafi odróżnić akapit tekstu od nagłówka. Wygląd każdego elementu jest predefiniowany, jednak możesz na niego wpłynąć poprzez Kaskadowe Arkusze Stylów (CSS) oraz dodatkową grafikę.

Po wykonaniu zadań nauczysz się:

Implementacja

Rozpoczynając pracę powinieneś posiadać:

—  Microsoft Visual Web Developer 2010 Express.

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

* *

Wszystkie ćwiczenia, które zostały tutaj przedstawione, możesz wykonać za pomocą prostego edytora tekstu (np. notepad) lub wyspecjalizowanego edytora. Jednak, ucząc dobrych praktyk i przygotowując Ciebie do realnej sytuacji, proponujemy od początku wykorzystanie zintegrowanego środowiska programistycznego. W tym przypadku będzie to Microsoft Visual Web Developer 2010 Express.

Visual Web Developer 2010 Express pozwoli znacznie przyspieszyć tworzenie danej witryny. Oferuje on zarówno kolorowanie składni, zarządzanie całym projektem, jak i najważniejsze dla młodych twórców witryn podpowiadanie kodu w formie InteliSense.

Przygotowanie miejsca pracy

Twoim zadaniem jest przygotowanie miejsca pracy, które umożliwi szybkie i przyjemne tworzenie nowej witryny.

Tworzenie nowej witryny w Microsoft Visual Web Developer 2010 Express.

Rys. 1. Dodawanie nowego rozwiązania.

  • Wybierz z menu File -> New -> Web Site.
  • Kliknij ASP.NET Empty Web Site (Rys. 1.).
  • Wybierz lokalizację katalogu na partycji, w której chcesz umieścić swoje rozwiązanie (Rys. 1.).
  • Kliknij OK (Rys. 1.).
  • W oknie Solution Explorer pojawi się nowy projekt z jednym plikiem web.config (Rys. 2.).

Rys. 2. Projekt gotowy do pracy.

Informacja

Rozwiązanie, zwane w języku angielskim solution (lub solucja), może zawierać w sobie wiele projektów. Ponieważ, na wstępie nie chcesz komplikować sytuacji, elementy, które powinny być dodawane do konkretnego projektu, dodawać będziesz do pustego rozwiązania.

Twoje rozwiązanie znajduje się w katalogu, który wybrałeś podczas jego tworzenia. Standardowo w katalogu „C:\Users\użytkownik\Documents\Visual Studio 2010\Projects” znajduje się katalog o nazwie rozwiązania, a w nim plik z rozszerzeniem *.sln. Służy on do uruchomienia Visual Studio już z rozwiązaniem, na którym szybko możesz zacząć pracować.

Przygotowanie szkieletu strony w HTML

Twoim zadaniem jest utworzenie podstawowego szablonu strony w HTML. Będzie on w przyszłości służył jako baza, w którym będziesz umieszczać treść swojej witryny.

  1. Dodaj nowy plik do projektu.
  • Z menu Project wybierz Add New Item.
  • Wybierz HTML Page.
  • Nazwij stronę Index.htm.
  • Kliknij OK.

Jak zauważyłeś, automatycznie został utworzony plik index.htm (Rys. 3.). Plik ten automatycznie został wypełniony treścią HTML, a dokładniej kodem XHTML 1.0, według deklaracji:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Rys. 3. Nowo utworzony plik index.htm.

  1. Zmiana tytułu witryny.
  • W pliku index.htm znajdź znaczniki <title></title>.
  • Pomiędzy dane znaczniki wpisz Wakacyjna Akademia Kontentu.
  • Zapisz wszystko, stosując skrót klawiszowy Ctrl+Shift+S.
  1. Uruchomienie strony.
  • W panelu Solution Explorer kliknij prawym przyciskiem myszy na plik index.htm.
  • Z menu wybierz View in Browser.

W domyślnej przeglądarce zobaczysz aktualną zawartość strony index.htm. Chwilowo jeszcze jest ona pusta. Posiada jedynie tytuł, który można zobaczyć na zakładce przeglądarki.

  1. Podstawowe kontenery szkieletu.
  • Pomiędzy znaczniki <body></body> wpisz:
<div id="wysrodkowany">
<div id="naglowek">Naglowek</div>
<div id="zawartosc_wlasciwa">Treść Właściwa</div>
<div id="stopka">Stopka</div>
</div>
  • Zapisz wszystko.
  • W przeglądarce uruchom dokument.

Na stronie powinieneś zobaczyć jedynie 3 czarne napisy, jeden pod drugim, na białym tle. Utworzyłeś podstawy pod witrynę internetową.

Osadzenie Kaskadowych Arkuszy Stylów (CSS)

W tym zadaniu nauczysz się, jak wykorzystać Kaskadowe Arkusze Stylów (CSS) poprzez podłączenie ich do istniejącego pliku z kodem HTML. Będzie on w przyszłości służył do nadania wyglądu treści, zawartej w pliku, z treścią osadzoną w HTML.

  1. Dodanie pliku Kaskadowych Arkuszy Stylów do projektu (Rys. 4.):
  • Z menu Project wybierz Add New Item.
  • Wybierz Style Sheet.
  • Nazwij go styl.css.
  • Kliknij Add.

Rys. 4. Dodawanie Kaskadowego Arkusza Stylu.

  1. Dodanie pliku Kaskadowego Arkusza Stylu do witryny index.htm.
  • Z panelu Solution Explorer wybierz plik index.htm.
  • Pomiędzy znacznikami <head></head> wpisz poniższy kod:
<link rel="stylesheet" href="styl.css" type="text/css" />
Informacja

Kod CSS możesz dodawać do strony na 3 różne sposoby:

  • odwołanie do pliku z Kaskadowym Arkuszem Stylu w sekcji HEAD: 
    <link rel="stylesheet" href="plik.css" type="text/css">
  • element sekcji HEAD: 
    <style type="text/css">
     </style>
  • atrybut znacznika HTML: 
    <znacznik style="CSS"></znacznik>

Więcej informacji znajdziesz w encyklopedii pod hasłem: Jak umieszczaćstyle CSS.

Podsumowanie

W tym artykule nauczyłeś się, jak przygotować sobie wygodne miejsce pracy oraz jak optymalnie zarządzać swoim kodem. Rozdzielenie warstwy treści w HTML od warstwy wyglądu, zawartej w Kaskadowych Arkuszach Stylów (CSS) pozwala na ujednolicenie wyglądu w różnych witrynach oraz ułatwia wprowadzania zmian w wyglądzie, bez ingerencji w wiele plików z kodem HTML. Ostatecznie, po wykonaniu powyższych zadań w katalogu rozwiązania, powinieneś zobaczyć trzy pliki, jak na Rys. 5.

Rys. 5. Pliki po wykonaniu ćwiczeń.

W kolejnym artykule nauczysz się przygotowania nagłówka witryny.

Dodatkowo zobacz: