• Artykuł

          

Kurs HTML praktycznie - Planowanie wyglądu witryny  Udostępnij na: Facebook

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2011-12-30

Internet umożliwia propagowanie treści wśród spersonalizowanych grup odbiorców. Jedną z wielu technologii, które pomogą utworzyć dokument do zastosowań w globalnej sieci jest język HTML. Odpowiednio wzbogacony o Kaskadowe Arkusze Stylów (CSS) oraz dodatkową grafikę potrafi uczynić z treści materiału efektywne, a także przyjazne dla oka źródło informacji. Budowa statycznych stron internetowych jest prosta i pozwala odbiorcy końcowemu dostarczyć bardzo szybko treści wzbogacone o multimedia. Ze względu na dojrzałość standardu, w samouczku, zamiast HTML 5, wykorzystasz XHTML 1.0, ponieważ jest prostszy i pozwoli od podstaw zrozumieć, w jaki sposób tworzyć witryny internetowe. XHTML posłuży do opisania treści poprzez odpowiednie znaczniki. Jednak, aby nadać wygląd ostateczny, w trzeciej wersji zostanie wykorzystany CSS oraz odpowiednio przygotowana grafika rastrowa. Do przygotowania strony potrzebujesz: treści, projektu graficznego oraz odrobiny chęci.

Po wykonaniu zadań nauczysz się:

  • przygotować projekt graficzny,
  • wykorzystać projekt przygotowany przez grafika na podstawie swojego projektu.

Implementacja

Rozpoczynając pracę powinieneś posiadać:

—   Paint.NET

Informacja

Paint.NET możesz pobrać bezpłatnie ze strony:

http://www.getpaint.net/

* *

W tym samouczku wykonasz szkic prostej strony internetowej. Możesz do tego celu wykorzystać aplikację graficzną, jednak o wiele wygodniej i szybciej  możesz przygotować wstępny projekt strony odręcznie. Na podstawie przygotowanego szkicu przygotuj właściwy projekt graficzny. Ważną kwestią przygotowania projektu graficznego jest stosowanie się do zaleceń, wynikających z przyzwyczajeń użytkowników. Najprostszą metodą poznania przyzwyczajeń użytkownika jest zapoznanie się z badaniami, zwanymi eyetracking, różnych stron internetowych. W naszej kulturze użytkownicy czytają od lewej do prawej strony. Najważniejsze elementy powinny znajdować się po lewej stronie witryny. Możesz tam umieścić zarówno menu, logotyp oraz treść. Od lewej strony najskuteczniej odciągają wzrok różnego typu multimedia, szczególnie te, które się poruszają.

Twoja witryna musi być prosta w wykonaniu, przejrzysta oraz pokazywać możliwości statycznych stron internetowych. Zaplanowałeś, że w Twojej witrynie pojawią się 3 miejsca: na menu, logotyp, stopkę z podpisem oraz treść właściwą. Wstępnie określiłeś, że strona będzie posiadać stałą szerokość i zmieści się w całości okna przeglądarki w najbardziej popularnej rozdzielczości, czyli 1024x768px. Twój szkic prezentuje się tak, jak na Rys. 1. i będzie on podstawą dla grafika do wykonania projektu graficznego.

Rys. 1. Szkic witryny.

Przygotowanie szkicu witryny

Twoim zadaniem jest przygotowanie szkicu witryny, który przekażesz grafikowi.

  1. Ustal szerokość witryny.
  2. Określ, jakich dużych elementów będziesz potrzebował.
  3. Ustal, w jakich miejscach witryny będziesz chciał je umieścić.
  4. Przygotuj elementy graficzne, które chciałbyś umieścić w witrynie.

Wykorzystanie projektu dostarczonego przez grafika

W tym zadaniu nauczysz się, jak wykorzystać projekt przygotowany przez grafika.

  1. Przygotowanie miejsca pracy i otwarcie projektu strony:
  • Utwórz katalog STRONA.
  • Pobierz archiwum Samouczek-HTML-​CSS.zip. W katalogu tymczasowym rozpakuj jego zawartość. Sprawdź zawartość katalogu Samouczek-HTML-CSS\HTML-Praktycznie\01.Planowanie-wygladu-witryny.
  • Do katalogu STRONA skopiuj plik witryna.pdn.
  • Poprzez dwukrotne kliknięcie na witryna.pdn uruchom program Paint.NET.
  1. Określ kolor tła:
  • Z palety Tools wybierz narzędzie Color Picker.
  • Kliknij na jednolitym obszarze tła.
  • Na palecie Colors kliknij przycisk More >>.
  • Z pozycji HEX odczytaj wartość szesnastkową koloru.
  • Kolor, który powinieneś uzyskać to: #00041B.
Informacja
Do obróbki swoich prac, graficy wykorzystują najczęściej komercyjne oprogramowanie i dostarczają ostateczny projekt w plikach o rozszerzeniach *.psd, *.ai lub *.cdr. Takie pliki pozwalają na działanie na warstwach i dotarcie do każdego elementu z osobna. Pozwala to skutecznie wybrać elementy, które można wyciąć i użyć na stronie. Pamiętaj, że stronę należy odpowiednio zaplanować, czyli tak, aby używać jak najmniej elementów graficznych (np. tła obrazkowego). Niektóre elementy można wykorzystać wielokrotnie.

Rys. 2. Widok uruchomionego projektu witryna.pdn.

  1. Przygotowanie elementu ozdobnego:
  • Z palety Layers odznacz wszystkie pozycje, oprócz background, oraz logotyp.
  • Z palety Tools wybierz Rectangle Select.
  • Zaznacz obszar kół tak, jak na Rys. 3.
  • Z menu Image wybierz Crop to Selection.
  • Zapisz tak powstały obrazek poprzez wybranie z menu File -> Save As.
  • Z rozwijanej listy pola wybierz opcję Zapisz jako typ *.png.
  • Nazwij plik kola.png.
  • Ustaw lokalizację na katalog STRONA.
  • Kliknij Zapisz.
  • W oknie, które się pojawi, kliknij OK.

Rys. 3. Wycinanie elementu ozdobnego.

Podsumowanie

W tym artykule nauczyłeś się, jak można przygotować prosty szkic szablonu, który pomaga grafikowi w realizacji oraz wykorzystaniu projektu. Całą stronę przygotuj za pomocą jednego pliku graficznego, resztę wykonaj za pomocą kodu HTML oraz CSS.

W kolejnym artykule nauczysz się przygotowania szkieletu witryny w HTML.