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

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

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

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

Инструкция

  • Запустите все программные средства для создания макета. Разделите рабочую область монитора на две горизонтальные части. В верхнюю поместите графический редактор с загруженным макетом, а в нижнюю тестовый редактор. Это нужно для того, чтобы не отвлекаться на свертывание и развертывание окна при написании кода. Такой подход очень удобен и заметно увеличит КПД.
  • Рассмотрите структуру графического макета. Обратите внимание на то, как лежат слои. Точно также должен верстаться будущий веб-документ, потому что так задумывал дизайнер.
  • Пишите код, загрузив страницу в браузер. Обновляйте страницу и старайтесь сделать так, чтобы изображение макета было идентично будущей странице.
  • Напишите сначала только HTML код. Просто перечислите все блоки на странице. Присвойте каждому идентификатор, а группам блоков свой класс.
  • Приступайте к стилям. Создайте в каталоге со страницей папку и назовите ее СSS. В ней для удобства желательно разместить несколько файлов со стилями.
  • Создайте рядом с папкой CSS папку IMG. Затем вытаскивайте изображения из макета. Лучше это делать в такой последовательности: объединяете все слои, ищите нужный элемент, копируете его, создаете новый графический документ и сохраняете под понятным и «читабельным» именем.
  • После того как все вышеописанные шаги будут завершены, необходимо проверить сверстанную страницу на ошибки (второе название - валидность). Существуют сайты, специально для этого созданные. Не стоит паниковать, если вдруг валидатор покажет много ошибок. Они не критичны, но рекомендуется избегать их.
  • Напоследок проверьте созданную страницу во всех популярных браузерах. Возможно, в каком-то из них сайт будет выглядеть не так, как вы ожидали.
  • Оцените статью!