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

Верстка макета сайта - довольно занимательный процесс. Для того чтобы начать верстать, нужно освоить базовые навыки HTML и CSS. Для начала лучше прочитать специализированную литературу, а уже потом приступать к работе, но можно заниматься изучением и на практике, постигая азы в деле.
Создать сайт самостоятельно с Wix.com

Вам понадобится

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

Инструкция

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

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

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

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

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

Создайте рядом с папкой CSS папку IMG. Затем вытаскивайте изображения из макета. Лучше это делать в такой последовательности: объединяете все слои, ищите нужный элемент, копируете его, создаете новый графический документ и сохраняете под понятным и «читабельным» именем.

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

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

Оцените статью!