Прототипирование помогает проверить идею сайта, объяснить логику веб‑сервиса, попробовать продукт на себе. Прототипы на бумаге или в фотошопе с этим не справляются: их не «прокликаешь», меню не раскроешь, анимацию не покажешь. Кроме того, это двойная работа: сначала рисовали‑ровняли макет, теперь делаем то же самое в ХТМЛ и ЦСС.

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

С чего начать?

Начните с ХТМЛ и ЦСС.

Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры — Ctrl‑U или Command‑Alt‑U.

ХТМЛ(HTML) — это язык разметки, такой специальный текст. С его помощью мы размечаем, где и какие элементы находятся на странице. Текст, таблицы, формы и картинки — ХТМЛ‑элементы.

Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры — Ctrl‑U или Command‑Alt‑U.

Элементы создаются с помощью тегов. Название тега связано с типом элемента. Смотрите:

<h1>Заголовок</h1>
<!--
  h1 — заголовок (heading) первого уровня (1).
  Заголовок второго уровня — h2, третьего — h3.
  И так далее до h6.
  
  Кстати, текст внутри <!-- --> — комментарии,
  браузеры их игнорируют.
-->

<p>
  Слово paragraph в большинстве случаев
  переводится на русский язык — <b>«абзац»</b>.
</p>
<!--
  Чтобы обозначить абзац и отделить его
  от остальных элементов, текст нужно
  завернуть в <p></p>.
  
  Отбить один абзац от другого энтерами, как в Ворде,
  не получится — браузеры воспримут их
  как пробелы.
  
  Чтобы сделать текст жирным, нужно завернуть
  его в <b></b>.
-->

<p>
  И ещё один абзац.
</p>

У тегов есть атрибуты, то есть свойства, например, адрес ссылки или выравнивание текста:

<a href="http://bureau.ru/">Сайт бюро</a>
<p align="center">
  Абзац, текст в котором
  выровнен по центру
</p>

У некоторых элементов нет закрывающего тега. Например, у картинки:

<img src="http://awesomepictures.com/200x200.png">
<!-- src — ссылка на картинку -->

Скелет любой ХТМЛ‑страницы состоит из четырёх элементов: doctype, html, head и body.

<!doctype html> <!-- Доктайп-заклинание -->
<html>
  <head>
    <!-- «Голова». Здесь находятся служебные теги: название страницы,
         теги для Фейсбука, стили и скрипты -->
  </head>
  <body>
    <!-- «Тело». Содержимое страницы -->
  </body>
</html>

Соберём страницу с портфолио Остапа Бендера:

<!doctype html>
<html>
  <head>
    <title>Портфолио Остапа Бендера</title>
    <!--
      Название страницы.
      Его мы видим в заголовке вкладки
    -->
  </head>
  <body>
    <h1>Портфолио Остапа Бендера</h1>
    <!-- Заголовок первого уровня -->
    
    <section>
      <!--
        section объединяет элементы в «главу» текста
      -->
      
      <h2>Кто такой? Чем знаменит?</h2>
      <!-- Заголовок второго уровня -->
      
      <p class="outstanding">
         Я великий комбинатор,
         идейный борец за денежные знаки.
      </p>
      <!-- Абзац -->
      
      <p>
         Кроме того, я знаю
         <a href="/projects/400">четыреста
         сравнительно честных
         способа отъёма денег</a>.
      </p>
    </section>
    
    <section>
      <h2>Аферы</h2>
      <p>
         В городе Арбатове выдал себя за сына
         лейтенанта Шмидта и получил
         от председателя горисполкома
         небольшую материальную помощь.
      </p>
      <!-- И так далее -->
    </section>
  </body>
</html>

ЦСС (CSS) — тоже специальный текст. В нём мы описываем, как выглядят и ведут себя те самые абзацы, заголовки и картинки. ЦСС может находиться прямо в коде страницы внутри тегов <style> или в отдельных файлах, подключённых тегом <link>.

Раскрасим портфолио Остапа Бендера:

<style>
body {
  /*
   * Часть до фигурных скобок — селектор.
   * Селекторы указывают, к каким элементам применять
   * стили внутри фигурных скобок.
   * В данном случае — к содержимому страницы.
   */ 
  
  background-color: dimgray;
  /* Задаем странице серый фон */
}

h1, h2 {
  color: white;
  /* Перекрашиваем заголовки в белый */
}

p {
  color: white;
  /* Перекрашиваем абзацы в белый */
}

.outstanding {
  font-size: 150%;
  /* Увеличиваем кегль в полтора раза */
  
  font-style: italic;
  /* Курсивим текст */
  
  /*
   * .outstanding — селектор по классу.
   * Его стили применятся к элементам
   * с атрибутом class, содержащим outstanding.
   * В данном случае — к абзацу
   * про великого комбинатора.
   */
}
</style>
Попробуйте самостоятельно добавить текста и поменять цвет ссылок в портфолио Остапа Бендера

Что дальше

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы