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