Wprowadzenie do layoutu stron internetowych

Spisie treści
Layout związany jest z rozmieszczeniem elementów w danej przestrzeni na stronie, natomiast projekt redakcyjny obejmuje inne elementy, począwszy od projektu graficznego po procesy produkcyjne zwane również przygotowaniem do druku. Jednak do ten proces jest znany jako układ.
Aby rozpocząć projektowanie strony internetowej Niezbędne są 3 programy, takie jak PhotoShop, Fireworks i Dreamweaver. Z kolei niezbędna jest wcześniejsza znajomość kodu HTML. HTML opisuje strukturę i zawartość witryny w postaci tekstu. Elementy w HTML składają się z początkowego znacznika i końcowego znacznika, pomiędzy którymi umieszczona jest treść.

Kiedy treści multimedialne zaczęły być masowo wykorzystywane w sieci, pojawiły się one w kodzie HMTL 5, aby ułatwić to włączenie. HTML5 ma następujące cechy.
  • Nie pochodzić z prywatnych rąk
  • Elastyczny
  • Zastosowane standardy
Przed rozpoczęciem pracy z layoutem projektant musiał pracować nad projektem, w którym odzwierciedla potrzeby swoich klientów:

Następnie otworzy się program Photoshop (PSD), aby wyświetlić projekt:

Następnie zaczniemy analizować wspólne elementy, czyli organizować stronę w grupy.
Widać, że treść strony będzie całością projektu, w której poszczególne elementy zaczną się następnie grupować, na przykład: w treści dwa logo, które znajdują się w górnej części:

Po przeanalizowaniu projektu bazowego w PhotoShop rozpocznie się praca z programem Fireworks:
Otwórz projekt w Fireworks:

Za pomocą narzędzia do podziału programu Fireworks każdy z elementów projektu zostanie obramowany:

Po dokonaniu podziałów elementów są one wybierane razem i eksportowane jako HTML i obrazy. W ten sposób zostaną wygenerowane pliki dla każdej z dywizji.

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt

Będziesz pomóc w rozwoju serwisu, dzieląc stronę ze swoimi znajomymi

wave wave wave wave wave