Как сверстать макет сайта

Верстка макета сайта — достаточно занимательный процесс. Чтобы начать верстать, необходимо освоить базисные навыки HTML и CSS.

Для начала лучше прочесть специальную литературу, а уже позже приступать к работе, но возможно заниматься изучением и на практике, постигая азы в деле.

Как сверстать макет сайта

Вам пригодится

  • — браузер;
  • — текстовый процессор, нужно с подсветкой синтаксиса (к примеру: Notepad, psPad);
  • — нарисованный макет сайта (в большинстве случаев, в программе Photoshop).

Инструкция
1
Запустите все программные средства для макета. Поделите рабочую область монитора на две горизонтальные части.

В верхнюю поместите графический редактор с загруженным макетом, а в нижнюю тестовый редактор. Это необходимо чтобы не отвлекаться на развёртывание и свёртывание окна при написании кода.

Таковой подход весьма эргономичен и заметно увеличит КПД.
2
Разглядите структуру графического макета. Обратите внимание на то, как лежат слои. Совершенно верно кроме этого обязан верстаться будущий веб-документ, по причине того, что так задумывал дизайнер.

3
Пишите код, загрузив страницу в браузер. Обновляйте страницу и старайтесь сделать так, дабы изображение макета было аналогично будущей странице.
4
Напишите сперва лишь HTML код.

Легко перечислите все блоки на странице. Присвойте каждому идентификатор, а группам блоков собственный класс.

5
Приступайте к стилям. Создайте в каталоге со страницей папку и назовите ее СSS. В ней для удобства нужно разместить пара файлов со стилями.

6
Создайте рядом с папкой CSS папку IMG. После этого извлекайте изображения из макета.

Лучше это делать в таковой последовательности: объединяете все слои, ищите необходимый элемент, копируете его, создаете новый графический документ и сохраняете под понятным и «читабельным» именем.
7
По окончании того как все вышеописанные шаги будут закончены, нужно проверить сверстанную страницу на неточности (второе наименование — валидность).

Существуют сайты, специально для этого созданные. Не следует паниковать, в случае если внезапно валидатор продемонстрирует большое количество неточностей.

Они не критичны, но рекомендуется избегать их.
8
Напоследок удостоверьтесь в надежности созданную страницу во всех популярных браузерах.

Быть может, в каком-то из них сайт будет смотреться не так, как вы ожидали.

Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись.


Похожие статьи, подобранные для Вас: