C

html

css

Jak zrobić stronę w HTML i CSS - Projekt graficzny

Kurs tworzenia strony www html css

Prace nad stroną www zaczynamy od przygotowania projektu w programie graficznym. Do tego celu wystarczy najprostszy, dostępny w naszym systemie operacyjnym np. Paint.

Jeśli będziemy chcieli umieścić na stronie ciekawe grafiki wtedy powinniśmy zaopatrzyć się w zaawansowane narzędzia takie jak Photoshop lub bezpłatny - dostępny na licencji GNU - GIMP.

Na tym etapie projekt przygotujemy w podstawowym programie Paint, gdyż wszystkie efekty graficzne zdefiniujemy przy pomocy arkusza stylów css3.

Tworząc szablon strony szczególną uwagę powinniśmy zwrócić na układ poszczególnych elementów. Ich rozmieszczenie ma wpływ zarówno na wygląd jak i łatwą obsługę.

Na co zatem zwrócić uwagę opracowując projekt? Na elementy odpowiadające za intuicyjną obsługę strony internetowej - funkcjonalność i użyteczność.

  • logotyp w górnej części strony (z reguły lewy róg), który równocześnie pełni rolę linka do strony głównej
  • poniżej logotypu warto umieścić slogan, który określi zawartość strony
  • nawigacja znajdująca się w tym samym miejscu na wszystkich podstronach
  • przejrzystość i uporządkowanie spowodują łatwe odszukanie informacji
  • wyszczególnienie wyrażeń będących linkami (podkreślenie)

Projekt strony głównej i podstron

Strona główna to najważniejsza część serwisu. Powinna zawierać kluczowe informacje, wprowadzające internautę do podstron.

Projekt strony głównej powinien wyróżniać się względem pozostałych podstron (np. umieszczenie banera) niemniej każda podstrona serwisu powinna charakteryzować się spójnym wyglądem.

Istotną rolę w pozytywnym odbiorze witryny odgrywa funkcjonalność serwisu, a więc taki układ modułów, który sprawi, że bez wysiłku odnajdziemy interesujące nas informacje.

Internauci zwracają szczególną uwagę na:

  • Nagłówki
  • Hiperłącza
  • Tekst pogrubiony
  • Listy wypunktowane

Czcionka i czytelność strony

W naszym projekcie możemy użyć czcionki szeryfowe (serif) lub bezszeryfowe (sans-serif) - czcionka ozdobna.

Przykład

Czcionka bezszeryfora (Arial)

Czcionka szeryfora (Times New Roman)

Czcionki bezszeryfowe lepiej się czyta i są częściej wybierane podczas tworzenia stron internetowych.

Kierując się zasadą użyteczności stosujmy możliwie ograniczoną ilość czcionek oraz ich formatowania. Ponadto zwróćmy uwagę na to, że stronę mogą przeglądać osoby ze słabszym wzrokiem, dlatego dobierzmy jej optymalną wielkość, tak aby nikt nie miał problemu z odczytaniem i odszukaniem informacji na stronie.

Wielkość czcionki powinna być dostosowana do hierarchii ważności treści na stronie (np. tytuły większą czcionką).

Zdjęcia

Umieszczenie zdjęć i galerii na stronie sprawia, że jest po prostu ciekawsza. Jednak wszelkiego rodzaju grafiki należy stosować z umiarem. Jest kilka powodów takiego stanu rzeczy:

  • wpływają na szybkość ładowania strony
  • mogą sprawić, że strona będzie nieczytelna

Stronę będziemy przygotowywać w css3 tak więc wszystkie elementy odpowiedzialne za wygląd nawigacji, nagłówków, tła będziemy definiować w arkuszu stylów, co sprawi, że witryna będzie szybciej wczytywana.

comments powered by Disqus

Do góry