ЗАПИСАТЬСЯ НА КУРС!
сайт своими руками  →  Уроки  →  Верстка макета в HTML+CSS

Практика HTML+CSS

Внимание! Информация на этой странице носит ознакомительный характер. Полная версия учебного пособия доступна слушателям он-лайн курса "Сайт своими руками" и является частью учебной программы
Записаться на курс!

В этом разделе мы пошагово разбираем как из макета сайта в Photoshop, сделать верстку в HTML+CSS. Материалы этого раздела предназначены для слушателей курса и не претендуют на подробные уроки по верстке сайта. Это скорее методичка (или памятка) для занятий, на которых мы подробнейшим образом разбираем этапы верстки главной страницы сайта, уделяем много времени деталям и нюансам построения блоков содержания, настройки вывода в css, не всегда однозначному поведению блоков на странице при верстке и многому другому.

Для успешного прохождения этого модуля вы должны на начальном уровне знать основные HTML теги и свойства CSS, которые мы разбирали в теоретической части курса, иметь представление о построении структуры страницы, css классах, особенностях свойства float и т.д.

Кроме того, вы должны уметь работать с программой Photoshop на уровне владения основными инструментами, работы со слоями и форматами графики. Все это мы разбираем в модуле создания макета сайта в фотошоп.

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

Необходимые программы и материалы для успешного прохождения модуля:

Программы:

  • Редактор растровой графики: Adobe Photoshop подойдет любой, начиная с версии CS3 и выше
  • Текстовый редактор: Notepad++
  • Браузер: firefox или chrome

Материалы:

  • Файл макета: скачать
  • Шрифт для логотипа: скачать - установите шрифт в систему для корректного отображения макета сайта в photoshop
  • Справочник по HTML и CSS: htmlbook.ru - справка по тегам и стилям, уроки, примеры и многое другое.

Внимание! Макет сайта в фотошоп, используемый в этом разделе, незначительно отличается от макета, который мы создавали в разделе Разработка макета сайта в Photoshop. Что бы не возникало лишних трудностей, рекомендую вам для уроков в этом разделе использовать макет, указанный по ссылке выше.

Начать верстку!