Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Курс верстки с PSD в HTML5 & CSS3

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

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

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

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

Что будем верстать

В этом курсе мы сверстаем одностраничный вебсайт на чистом HTML5 и CSS3. Обработаем простой макет, который был нарисован в Photoshop. Дизайн макета имеет достаточно распространенный и довольно простой вид, но его нам будет более чем достаточно для изучения основных техник верстания веб­сайтов. А вот собственно и сам скриншот будущего сайтаМакет будущего веб сайта

Макет рисовал не я, но это не помешает нам использовать его для наглядного пособия при верстке.

Инструментарий для полноценной верстки

Чтобы вы могли повторять за мной последовательность верстки и сами могли пройти путь от А до Я вам нужно иметь следующие программы на своем ПК:

  • Adobe Photoshop CS3 и выше
  • Редактор кода Notepad++, Sublime Text, Brackets или другой
  • Понимание основ HTML (или HTML5)
  • Понимание основ CSS (или CSS3)
  • Веб браузеры (Google Chrome, Opera, Mozilla Firefox, Safari)

Вам так же будет необходим макет сделанный в Photoshop. Вы можете найти PSD файл вот по этой ссылке basic-website. Если у вас нет фотошоп, можно скачать с офф-сайта триал версию (30 дней), текстовый редактор можно выбирать любой на ваше усмотрение, я буду работать в Brackets из-за присутствия в нем возможности видеть результат вашей работы без сохранения документа и перезагрузки браузера.

Знакомство с макетом будущего сайта

Знакомство с макетом сайта

  • Header (Шапка)
  • Navigation Menu (Навигационное меню)
  • Call­to­action (Призыв к действию)
  • Body (Тело)
  • Sidebar (Боковое меню)
  • Secondary Call­to­action (Второй призыв к действию)
  • Footer (Подвал)

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

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

← Предыдущее зянятиеСледующее занятие →

4 Ответов в теме: Курс верстки с PSD в HTML5 & CSS3

  1. egeent says:

    Спасибо за очень полезный урок!

    Хотел бы самостоятельно выполнить все то, что Вы показываете. Для этого мне нужен PSD-макет этого сайта. Если нетрудно, то выложите, пожалуйста, его для скачивания.

  2. Очень интересные и полезные уроки, особенно для начинающего. Хочется изучить основы, так как в кодах я прочти не разбираюсь. Да еще и пр английскому в школе был почти двоечником. Бывает нужно отредактировать какой то код, но страшно и не понятно, что можно а что нет.

  3. Юзернейм says:

    Да, выложил видео, и ограничил его. Неплохо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *