Инструменты веб-разработчика

Воображаемые уроки с вымышленными учениками

Инструменты

  1. Текстовый редактор с подсветкой синтаксиса и отображением структуры документа.
    • Akelpad с настройками Объединения ЛиК
    • PSPED
  2. Браузер для разработки (предпочтительно Firefox Developer Edition) и пара из других групп для тестирования создаваемого документа HTML.
    • Группа браузеров от Mozilla:
      Firefox Developer Edition (для установки версии x64 воспользуйтесь этим списком)
      Для выбора другой установки воспользуйтесь ссылкой «Firefox для других платформ и языков» в нижней части страницы или Firefox.
    • Группа браузеров на ядре Chromium:
      Яндекс.Браузер. Предпочтителен по многим причинам, одна из основных — его создали русские для русских на базе браузера Opera;
      Crome, Opera, Amigo, Нихром и им подобные.
    • Группа браузеров от Microsoft:
      IE версия 9 (входит в состав ОС Windows 7 — без обновлений не знает о новых возможностях CSS3); Нужен по требованию технического занаия РУ.
      IE версия 11 (входит в состав ОС Windows 7 — предпочтителен, так как оснащён полноценным эмулятором предыдущих версий);
      Edge встроен в систему Windows 10.

Материалы

  1. Дизайн по правилам А.А. Дуванов,— 2008/2009 учебный год. (Материал на демонстрационном диске РУ. Диск можно скачать оттуда или отсюда).
    • Заметка 1. > У хорошего дизайна 4 ноги (документ Word)
    • Заметка 2. > Приближение (документ Word)
    • Заметка 3. > Выравнивание (документ Word)
    • Заметка 4. > Повтор (документ Word)
    • Заметка 5. > Контраст (документ Word)
  2. АНАТОМИЯ для дизайнера,— Автор: Алексей Клецель.— 04.12.2001.
  3. Статьи на темы компьютерной графики и графического дизайна,— Алексей Клецель (обратите внимание, как минимум, на ниже перечисленные разделы).
    • Школа компьютерной графики
    • День открытых дверей
    • Анатомия для дизайнера
  4. Конечно же .ру/Ководство Артемия Лебедева. Наглядно, лаконично, аргументировано, иногда грубовато, но познавательно.
  5. Книги
    • НЕ дизайнерская книга о дизайне,— Робин Уильямс.— СПб,: ИД ВЕСЬ, 2003
    • Дизайн для НЕдизайнеров,— Робин Уильямс.— СПб. Символ-Плюс, 2008
    • Веб-дизайн: книга Дмитрия Кирсанова,— Кирсанов Д.; СПб.— Символ-Плюс, 2007 (книга для тех, кто готов изучать дизайн серьёзно). Отзывы.
    • Добавь воздуха! Основы визуального дизайна для графики веб и мультимедиа,— Голомбински К., Хаген Р.— СПб.: Питер, 2013.

Ошибки

Говоря о веб-дизайне, часто представляют изображение только на экране, поэтому и оценивают его, в первую очередь, как рисунок. В общем-то, это правильно. Но есть особенность, которую рядовые пользователи не учитывают.

Картину или рисунок создаёт сам художник. От его таланта и мастерства зависит, будет ли она положительно оценена зрителями или нет. С веб-дизайном всё намного сложнее. Художник может нарисовать великолепный эскиз страницы сайта на бумаге или даже в графическом файле, но пользователи будут видеть не его. Они увидят изображение, созданное их браузерами на экранах своих устройств.

На первом месте находится понимание того, что браузер — это программа. Программа выполняет действия — «рисует» страницу по переданным ей инструкциям. В веб-дизайне инструкции в своей основе — это коды HTML и CSS.

Вы уже знаете, что код бывает правильный и неправильный. Но браузер об этом «даже не подозревает». Он «по-честному» правильно выполнит и неправильный код… А вот какой результат получится на экране — это ещё вопрос.

Мы можем восторгаться идеально структурированным кодом, совершенно не подозревая, что в нём может быть ошибка. Ошибка даже не в имени тега или в значении атрибута. Не в количестве пробелов и т.п. А, например, в выборе единиц измерения или в отсутствии важного свойства, не позволившего правильно отобразить страницу и т.д.

Обычно ученик (да и не только ученик) рассуждает так: работа моя, все найденные ошибки исправлены, и априори она — шедевр.

Ошибки ищет учитель. В начальной школе, например, он обязан отметить как ошибку отсутствие точек над буквой «Ё». Получается, что учеников учат «не делать ошибки», но не учат их искать, чтобы исправить.

Представляя Роботландский университет как начальную школу веб-дизайна, мы должны относиться к учебному материалу и ученикам как учителя начальной школы. Но совершенно с другими задачами. Если «Ё» без точек — это ошибка, то ученик должен уметь найти её сам. И задача учителя объяснить ему, как это делается.

В разговоре о дизайне, в первую очередь нужно говорить о правильности кода и об ошибках в нём. Приступим.

Поиск ошибок, надеюсь теперь уже случайных (не по незнанию):

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

С ошибок и начнём. Для примера рассмотрим один из большинства рядовых сайтов: Ритмебель. Сайт мебельной фабрики с оригинальной, и, кстати, недорогой мебелью. Не лучший сайт (именно этим он для нас и интересен), но и не худший. Уверяю вас, в интернете встречаются сайты и поужаснее.

Оформительская ошибка

Не станем рассматривать весь сайт, а остановимся только на его главной странице. И начнём с того, что сразу бросается в глаза. Цвет фона.

Цвет фона «Сигнальный оранжевый». Такой цвет у одежды дорожных рабочих, чтобы привлекать внимание водителей. Фон не главный элемент на странице, поэтому привлекать к нему внимание ни к чему. Его стоит заменить на другой, не такой яркий, помягче.

Тёмный «шоколадно-коричневый» цвет шапки делает назойливо-ярким основной цвет фона, но сам рядом с ним выглядит почти чёрным. А вместе светлое дерево и чёрная как «траурная лента» навевают мысли о специализированной мебельной фабрике. Такое впечатление вызывает нарушение (неправильное применение) одного из правил дизайна.

Помните второе правило форматирования текста... (Если абзацы имеют разные роли, то они обязаны выглядеть по разному)? Правила форматирования распространяются не только на абзацы, но и на все элементы оформления.

Вернее наоборот, праввила форматирования абзацев это частный случай правил дизайна. Контраст. Если элементы означают не одно и то же, их следует оформлять по-разному.

Увеличенная разность в яркости шапки и основного фона выбрана правильно. Но ошибка — именно в чрезмерном её увеличении.

Шоколадно-коричневую шапку, нужно бы сделать светлее, например, под цвет тёмной мебели кухни на фотографии слева. А основной фон — под цвет светлых участков оранжевой кухни. Не смотря на то, что контраст один из самых эффективных дизайнерских приёмов придания оригинальности странице, во всём нужно знать меру.

Цвет это серьёзный дизайнеский инструмент. Им нужно пользоваться аккуратно, так же как ножом. Ножом можно почистить картошку, а можно и порезать палец.

Цвет

В цвете работает правило четырёх. Если вы неуверенно разбираетесь в цветах, то не стоит использовать более четырёх на странице. Иначе неграмотное их применение будет выглядеть аляповато.

В этой работе использовано 7 разных цветов. Но, скорее всего, это сделано по неумению правильно управлять ими.

Цвета, используемые на анализируемой странице
код пример характеристика применено
#FF9900   сигнальный оранжевый фон страницы
#FFFFFF   белый название и дополнительные сведения
#DA2726   пожарная машина цвет всех меню
#295C72   перламутровый горечавково-синий ссылки в центральном блоке
#3F312E   шоколадно-коричневый фон шапки
#333333   сигнальный чёрный дополнительные сведения слева
#3E3D3D   серо-коричневый текст в центральном блоке

В подборе цвета главенствуют принципы единства и контраста.

Единство. Цвета, используемые на странице, должны быть по возможности ближе друг к другу на цветовом круге. В идеале — это должен быть один цвет. Применять его можно близким по ролям элементам или наоборот очень разным.

Если выбрать только один цвет, то нужно использовать его оттенки, например: тёмный для текста, светлый для фона, насыщенный для декоративных элементов. Однако, не одинаковые, но слишком близкие цвета на цветовом круге, делают страницу «неуютной», вызывая диссонанс между цветами, как в музыке между нотами.

Помните первое правило форматирования... (Если элементы однотипные, они должны иметь одинаковый стиль, то есть выглядеть одинаково)? Но когда элемент «чуть-чуть отличается» от других, это часто выглядит плохо. Непонятно: «они вместе или он отдельно»?

Три последних цвета в таблице цветов сайта — тёмные, чуть-чуть отличающиеся друг от друга. Это и есть вторая ошибка в выборе цветовой палитры.

Контраст. Цвета должны явно отличаться друг от друга. Но и строго противоположные цвета на цветовом круге не всегда образуют гармоничные пары. Взгляните на цветовой круг.

Ваш браузер не поддерживает SVG Цветовой круг.

Это пример цветового круга. Он представляет цветовую модель  R  Y  B  — аббревиатура аглийских названий цветов. Для неё используются основные цвета в центральном треугольнике. Остальные цвета составные, в трёх добавленных треугольниках, получаются путём смешивания основных, и сложные — составных. Этой моделью пользовались художники Европы времён Возрождения, смешивая краски для своих картин.

С середины прошлого века с появлением цветных телевизоров, мониторов, принтеров... количество цветовых моделей возросло. Познакомимся с самой популярной из них.

Если у вас небольшой опыт работы с цветом, то можно воспользоваться интерактивным примером цветового круга. О нём и пойдёт речь далее.

Управление этим инструментом можно посмотреть в кадрили. Но не забывайте, что она адаптирована для экрана разрешением 1024×768px. Чтобы видеть её полностью и не отвлекаться от просмотра разверните экран нажав клавишу F11. Эта же клавиша вернёт браузер в обычное состояние.

Если разрешение экрана 800×600px, то предварительно стоит уменьшить масштаб страницы до 80%.

Для того чтобы изучать кадры и экспериментировать с описанным сайтом удобно оставить только две вкладки и использовать клавиатурный аккрод Ctrl + Tab для переключения между ними.

Кадриль «Цветовой круг».

  1. Кадриль. Первый кадр.
    Цвет и его применение

    Вы знакомы с радугой? В ней всего семь цветов. Чтобы не забыть их имена, народ придумал поговорки, например, эту: Как Однажды Жан Звонарь Головой Свалил Фонарь.

    У цветов есть оттенки: светлый-тёмный, бледный-насыщенный. Ещё они могут смешиваться друг с другом. Какие выбрать?

    Имейте в виду, что палитра цветов страницы создаёт общую атмосферу сайта и влияет на результат: понравилась читателю страница или нет? Читать он начнёт позже или не начнёт, если цвета подобраны неудачно.

    Сайт поможет выбрать палитру -- включите «Подсказки» (⮞1).

  2. Кадриль. Второй кадр.
    Цветовые модели

    Чтобы понять, что такое цвета и как они связаны между собой, придуманы различные модели. Их много больше, чем в меню «Цветовая модель» (⮞1).

    Самая популярная среди них  R  G  B  (⮞2) состоит из трёх основных цветов. Cмешивание их в разных пропорциях формирует все остальные цвета. Модель RGB ближе других к особенностям восприятия цвета человеком.

    Подсказки (⮞3) на сайте есть у многих элементов страницы. Достаточно навести на них курсор — и в чёрных прямоугольниках с текстом отобразятся полезные сведения.

  3. Кадриль. Третий кадр.
    Палитра

    В компьютерной реализации цветового круга выбирать цвет можно, перемещая точку-указатель (⮞1) оносительно центра.

    А элемент Показать образец текста (⮞2) включает отображение букв белого, серого и чёрного цвета на разных фонах палитры в панели предварительного просмотра палитры (⮞3). В ней к основному цвету добавляют его четыре оттенка. Палитра, состоящая только из одного цвета и его оттенков, называется монохромной.

    Cсылку (⮞4) над панелью стоит сохранить. Каждый раз, открывая её, сайт предложит эту настроенную вами палитру.

  4. Кадриль. Четвёртый кадр.
    Цвет в числах

    Чаще в цветовых моделях цвета размещают по кругу. Чтобы выбрать цвет, можно указать величину угла поворота (⮞1) по цветовому кругу. Выражая цвет числами, можно использовать не только градусы, но и проценты (⮞2). Так определяют, насколько ярко светит каждый из основных цветов.

    Компьютеру удобнее передавать цвет в шестнадцатиричной системе счисления (⮞3). Она позволяет автоматизировать арифметические вычисления с цветами: складывать, вычитать умножать…

    Откройте щелчком этот диалог (⮞3).

  5. Кадриль. Пятый кадр. Кадриль. Пятый кадр.
    Регулировка цвета

    В центральном столбце (⮞1) выбираем цвет, а в квадрате слева меняем его яркость и насыщенность. Представьте: цветной фонарь светит на стену, а кружок (⮞2) регулирует его яркость.

    Перемещая кружок по вертикали (стена чёрная), меняется яркость цвета, а по горизонтали (стена серая) — насыщенность.

    В этом диалоге, наряду с HEX числами (⮞3) показан ещё один способ обозначения цветов — десятиричными (⮞4).

  6. Кадриль. Шестой кадр.
    Многоцветные палитры

    На предыдущих кадрах были представлены монохромные палитры — основной цвет и его оттенки. Сайт предлагает и другие (⮞1), выбирайте их в левом верхнем углу страницы.

    1. Монохромная. Уже знакома.
    2. Комплиментарная. Цвета основной и контрастный ему.
    3. Триада классическая — три цвета, равноудалённых друг от друга с расстоянием между ними по окружности 120°. Угол между двумя добавленными цветами можно менять.

    Есть и другие, но остановимся на триаде (⮞2).

  7. Кадриль. Седьмой кадр.
    Выбор цвета в триаде

    Дополнительный цвет разбит на два. Расстояние между его точками регулируется углом из центра круга. Его величину можно ввести числом (⮞1) или перемещая одну из дополнительных точек (⮞2).

    Любопытно в следующем кадре взглянуть на список цветов (⮞3), так как изменился их набор в палитре — три выбранных и к ним по 4 оттенка. Изменилась и ссылка (⮞4) на палитру.

  8. Кадриль. Восьмой кадр.
    Список цветов

    Здесь вы видите все цвета с правой панели (⮞1) и под ними их HEX-коды. Коды можно скопировать и в калькуляторе цветов преобразовать, например, в RGBA. Добавленная буква A, обозначает степень прозрачности цвета, но об этом позже.

    Пока обратите внимание на тонкую настройку (⮞2) палитры. Если выбранные цвета вам нравятся, а их оттенки слишком или, наоборот, не слишком выразительны, то их можно подкорректировать.

  9. Кадриль. Девятый кадр. Кадриль. Девятый кадр. Кадриль. Девятый кадр.
    Настройка палитры 1

    В настройках можно регулировать особенности основного цвета. Регулировка яркости и насыщенности (⮞1) уже известна. Контрастность (⮞2) — это разность между основным цветом и его тёмными и светлыми оттенками.

    Коррекция вариантов (⮞3) обладает более тонкими настройками….

    Продолжение в следующем кадре.

  10. Кадриль. Десятый кадр. Кадриль. Десятый кадр.
    Настройка палитры 2

    Инструмент корректировки яркости и насыщенности (⮞1) цвета уже знаком. Но на этой вкладке им можно регулировать кроме основного и дополнительные цвета вместе с четырьмя оотенками каждого (⮞2), а не только основной (⮞3).

    Если опыта по настройке цветовых палитр недостаточно, то удобный инструмет — выпадаюший список «Пресет» (⮞4). В нём можно выбрать уже настроенные варианты палитры.

    Продолжение в следующем кадре.

  11. Кадриль. Одиннадцатый кадр.
    Настройка палитры 3

    В списке Пресет (⮞1) вы можете поэкспериментировать с уже готовыми схемами контрастности и насыщенности. Особое внимание стоит обратить и на пастель. Её мягкие, не яркие, не «кричащие» цвета весьма популярны.

    Писать на эту тему совершенно нечего — это надо видеть. Если настроенная палитра не оправдала ожидания, то можно сайт заставить сгенерировать (⮞2) случайную палитру. Среди множества пересмотренный наверняка найдётся понравившаяся вам.

  12. Кадриль. Двенадцатый кадр.
    Элементы просмотра

    Два следующих элемента (⮞1) предлагают переключиться в режим предварительного просмотра примера образца страницы. Оформлена она будет цветами выбранной палитры в двух цветовых гаммах: светлой и тёмной. Ими можно пользоваться как подсказками к оформлению своей страницы.

  13. Кадриль. Тринадцатый кадр.
    Пример светлой страницы

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

    Можно не только быстро переключаться между светлым и тёмным образцами страницы (⮞1), но и выбирать вариации дополнительных цветов (⮞2).

  14. Кадриль. Четырнадцатый кадр.
    Пример тёмной страницы

    То же самое можно сказать и о тёмной странице. Но если вы не удовлетворены примерами, можете закрыть (⮞1) просмотр, вернуться и выбрать другую цветовую палитру.

    Просмотрев предложения сайта, возможно, у вас появится и своё эксклюзивное решение.

  15. Кадриль. Пятнадцатый кадр.
    Сохранение палитры

    И наоборот. Если вы решили использовать настроенную цветовую палитру, то сохраните коды её цветов для файла CSS (⮞1). Они сохранятся сразу в двух цветовых моделях HEX и RGBA (c сохранением прозрачности в альфа-канале). Ещё рекомендую напротив каждого цвета закомментировать его название понятными для вас словами.

    И (напомню) для продолжения работы с выбранной палитрой стоит сохранить и её постоянную ссылку (⮞2).

  16. Кадриль. Шестнадцатый кадр.
    Заключительные страницы

    Со многими пунктами меню и возможностями сайта можете познакомиться самостоятельно. На последнем кадре
    Карта сайта (⮞1) вас ждёт интересный материал. Но пока обратимся к обещанному калькулятору цветов (⮞2).

  17. Кадриль. Семнадцатый кадр.
    Калькулятор цветов

    Если вы где-то «подглядели» понравившийся цвет и удалось получить его код (об этом в «Уроках» речь пойдёт далее), но не в той цветовой модели, которая вам нужна, это поправимо.

    Выберите из списка Цветовую модель (⮞1) найденного цвета и заполните поле (⮞2) его данными. В блоке под ними (⮞3) будут отображены коды этого цвета в разных цветовых моделях. А ещё ниже — справка по этим моделям.

  18. Кадриль. Восемнадцатый кадр.
    Карта сайта

    На этом сайте представлены две книги (⮞1). Первая — Иоханнеса Иттена «Искусство цвета», бестселлер среди профессионалов уже более полувека. И вторая — Марты Джилл «Пастельные тона» из серии её книг «Гармония цвета».

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

C цветом разобрались, теперь можно переходить к поиску и разбору более сложных ошибок.

Тщательная проверка дизайна

Перейдём к более серьёзному исследованию оформления первой страницы сайта Ритмебель. Далее для того, чтобы оценить проверяемую страницу, применим к ней метод анализа из системного подхода.

Помните, в чём особенность системного подхода… (рассматриваем объект, как составной, и представляем его в виде системы объектов. Определяем связи между ними и свойства каждого — как они влияют на другие объекты и на систему в целом)?

Вернёмся к странице. Она разбита на отдельные информационные блоки. Их называют блоками и чаще всего это прямоугольники, в которых размещается однотипная информация. Например: шапка, подвал, боковая панель, основная статья и т. п. Каждый из них, в свою очередь, может состоять из более мелких, которые, в свою очередь, тоже… Помните матрёшку?

Например, шапка. На сколько блоков можно разбить помещённую в ней информацию и как их можно назвать… (четыре блока: меню сайта, доставка, индивидуальный заказ и название — оно же логотип)?

А что можно сказать про блок «меню в шапке сайта»… (разбит на две части: левая и правая)?

Таким образом можно разбирать любой блок, но не забывать, что все они в коде описаны элементами HTML. Давайте попробуем проанализировать макет, который лежит в основе первой страницы этого сайта. Поможет нам в этом кадриль «Анализ и разработка макета страницы».

  1. Кадриль. Первый кадр.
    Правило дизайна —Приближённость

    Дабы избежать нарушения основного правила дизайна Контраст, в кадрили «Цветовой круг» предложен инструмент и детальные пояснения к его успешному применению.

    Продолжим анализировать ошибки оформления сайта. Начнём с главного — с меню. Оно оказывается разорвано на 5 частей (● 1–5) и разбросано по всей странице. И это только в верхней её части. Тем самым нарушено основное правило дизайна Приближённость.

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

  2. Кадриль. Второй кадр.
    Правило дизайна —Выравнивание

    Взгляд продолжает прыжки в поисках элементов. Старт у левого края (жёлтая⮞1) далее «Новости» и «Телефоны» (жёлтая⮞2), «Главная» и блок с фотографией… (жёлтая⮞3) и в конце фотография так и не доехавшая до вертикальной границы заданной тёмным блоком шапки (жёлтая⮞4).

    Все эти замечания — нарушение ещё одного из основных правил дизайна — Выравнивание. Сайт с невыровненными соседними элементами выглядит неопрятно.

    И завершает эту какофонию сравнение элементов с текстом. Блоки слева (синии⮞1) называют выровненными (по левому краю — при чтении начало каждой строки «на месте»). А вот оформление блоков справа (синии⮞2)… так и хочется назвать «выкривленными».

  3. Кадриль. Третий кадр.
    Правило дизайна —Повтор

    Повторение деталей оформления помогает объединить самостоятельные элементы в единое целое. Левый блок (⮞1) образец повтора. Повторяются промежутки, цвет и полужирность. Всё подчёркивает имя сайта «РИТМ» и то, что «Телефоны» — единый информационный элемент.

    Отдельный блок «Производство» отодвинут от телефонов. Это не телефоны? Или звонить по этим номерам можно не всем? Похожие цвет и полужирность как бы кричат вверх: «Ребята, я с вами». Но видно, что это не так.

    И ещё. Вероятно, в магазины №1 и №2 звонят реже, проще зайти. Нарушение этого повтора относится к общепринятой записи номеров сотовых телефонов — разделяя дефисом группы цифр. Все номера должны быть записаны одинаково.

  4. Макет страницы

    Построим макет этой страницы, чтобы понять, как она устроена и, по возможности, исправить.

    Блочные элементы с любыми размерами один под другим займут 100% ширины, выделенной «родителем». Но нужно, чтобы ASIDE и ARTICLE стали рядом. Для этого в CSS есть два свойства: position или float. Они вынимают элемент из последовательного потока и помещают над другими. Position позволяет перемещать его в любое место, а float — влево или вправо в пределах «родителя».

    Перемещение элементов описано в учебнике WEB-конструирование 2.0 2. Основы CSS в разделах Позиционирование элементов и Плавающие блоки.

  5. Кадриль. Пятый кадр.
    Свойство POSITION

    Дизайн у сайта резиновый — ширина у ASIDE фиксированная (в px), а ARTICLE, чтобы он растягивался и сжимался на разных экранах, размеры можно задать в процентах, как на рисунке для монитора 800px.

    Но на мониторе с разрешением 1600px, ширина ARTICLE увеличится лишь до 1060px = 1600 × 66,25%; и образуется пустое место, равное 270px = 1600 − (270 + 1060);.

    Правильно задавать не размер ARTICLE, а его размещение. Укажем ему свойство position: absolute;, сдвинем вправо: left: ...; на ширину ASIDE и прижмём к правой границе окна: right: ...;. Подобрать точные размеры вы сумеете и сами. Не забудьте об отступах между блоками.

  6. Кадриль. Шестой кадр.
    Свойство FLOAT

    Другое решение с использованием свойства float. Если ASIDE сдвинуть влево float: left;, а ARTICLE сдвинуть вправо float: right; (как в предыдущем кадре), мы так же не сможем вычислять его ширину одновременно для окон разных размеров. Но есть способ лучше.

    Блоку ARTICLE можно назначить ширину 100%. Он растянется в размер любого окна. ASIDE поместить в него и сдвинуть влево float: left;. Поднявшись над потоком, ASIDE позволит содержимому ARTICLE располагаться под ним от самого верха. А чтобы оно не пряталось под ASIDE, блокам в ARTICLE нужно задать левый отступ, равный ширине ASIDE. Точный расчёт с учётом промежутков между блоками выполните самостоятельно.

  7. Кадриль. Седьмой кадр.
    Разметка шапки

    Какой бы из способов разметки каркаса ни выбрать, в конечном итоге получится подобный макет. Далее последовательно сверху вниз начнём заполнять блоки дочерними элементами. Сначала в верхних углах шапки HEADER добавим два небольших блока. Не безымянные DIVы, а семантические (читай: смысловые) элементы, которые укажут браузеру и поисковому роботу, что это отдельная часть, раздел, SECTION.

    Продолжение в следующем кадре.

  8. Кадриль. Восьмой кадр.
    Разметка шапки+

    Следующее по очереди меню NAV: навигация. Оно разбросано по странице и придётся сразу помещать его фрагменты не только в шапку HEADER, но и в боковую панель ASIDE. А имя текущей страницы — в центральный блок контента ARTICLE.

    Само меню внутри NAV можно формировать как списком UL, так и обычными ссылками A.

    Продолжение в следующем кадре.

  9. Кадриль. Девятый кадр.
    Разметка шапки

    Любой фрагмент текста нужно упаковывать в элемент-абзац. Их не так много: заголовки H#, обычные P и с учётом непечатаемых символов PRE. Добавим в HEADER три абзаца — обычные P и заголовок первого уровня H1.

    Для группировки абзацев или просто текста используют: цитаты BLOCKQUOTE, элементы списка LI, термины и толкования DT + DD, подпись FIGCAPTION и др.

    При необходимости, например, во всём документе у всех абзацев сразу (кроме заголовков) изменить шрифт, размер, межстрочный интервал и т. п., достаточно правила с селектором абзацев ... p {...} с необходимыми свойствами. Все абзацы, положение которых соответствует селектору, моментально преобразятся во всём документе.

  10. Кадриль. Десятый кадр.
    Разметка боковой панели

    Для хранения списка магазинов в боковой панели ASIDE нужен ещё один раздел SECTION. В самом ASIDE могут находиться и меню, и рекламные баннеры, и новостные блоки, и др. Чтобы они не перепутались между собой, для каждой информационной группы необходимы отдельные разделы. Например, внутри группы расстояние между элементами небольшое, а между группами — увеличенное.

    Продолжение в следующем кадре.

  11. Кадриль. Одиннадцатый кадр.
    Разметка боковой панели

    В созданный раздел SECTION добавим абзац P с названием и четыре элемента ADDRESS. В них будут записаны адреса и телефоны магазинов.

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

    Правильная микроразметка помогает и поисковым роботам эффективно индексировать страницы сайта, что увеличивает его популярность.

  12. Кадриль. Двенадцатый кадр.
    Разметка блока контента

    Добрались до основного материала. Все предыдущие блоки были вспомогательными, а в центральном блоке ARTICLE — главная статья страницы. На этом сайте она состоит из фрагментов, содержащих пары фотографий.

    Фотографии с текстом могут иметь две роли:

    • текст — основа сюжета, а фотографии сопровождают его;
    • фотографии — основа сюжета, а текст в комментариях.

    У нас второй вариант. Элемент очертание FIGURE как раз и предназначен для помещения в контент добавленных к нему элементов с комментариями.

    Продолжение в следующем кадре.

  13. Кадриль. Тринадцатый кадр.
    Разметка блока контента

    По сторонам FIGURE помещаем два элемента с изображениями IMG. Причём, фотографии для них нужно готовить заранее. Одно небольшое (чтобы страница загружалась быстрее) с таким же размером, как IMG, а другое крупное, если захочется рассмотреть его детали на другой странице.

    Добавить больше нечего, всё очевидно и просто. Продолжение в следующем кадре.

  14. Кадриль. Четырнадцатый кадр.
    Разметка блока контента

    В FIGURE размещаем блок FIGCAPTION для комментариев с пояснениями к фотографиям и ссылками на страницы. Комментарии — это обычный текст, и обратите внимание на то, как он обтекает фотографии. Это подсказка для того, как размещать IMG в FIGURE.

    Продолжение в следующем кадре.

  15. Кадриль. Пятнадцатый кадр.
    Разметка блока контента

    Осталось лишь поместить в FIGCAPTION нужное количество абзацев P. Абзацы нужны для лёгкого и оперативного управления внешним видом текста. Например, селектор CSS p:first-child {…} позволит первый абзац в блоке оформить особым образом. Они, не являясь загловками по сути, могут выглядеть как заголовки.

    Вот теперь макет страницы, найденной в интернете, воссоздан. Взглянем на неё ещё раз в следующем кадре.

  16. Кадриль. Шестнадцатый кадр.
    Центрирование не здорово

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

    Обратите внимание на страницу целиком. Есть ли у неё вертикальный центр, который соберёт все центрированные элементы воедино? Прямой ответ — конечно, нет.

    Мы явно видим три вертикальных центра, которые между собой не имеют ничего общего. Присмотришься к заголовку — меню в шапке выровнено неправильно. Глянешь на меню — заголовок отцентрирован с ошибкой. Посмотришь на текст — все элементы страницы не увязываются в единое целое.

  17. Кадриль. Семнадцатый кадр.
    Подведение итогов

    Первая часть основной задачи на этом курсе — научиться за внешним видом страницы видеть код, которым она описана, чтобы суметь воссоздать его. Бо́льшая часть работы ещё впереди. Код CSS не менее занимательная «игрушка», но его удивительные возможности можно освоить и самостоятельно, если оценка макета и чтение кода не вызывает сложностей.

    Таким образом можно использовать любой материал с понравившимся дизайном: сайт, буклет, флаер, страница журнала… Главное — не «тырить» его, не копировать, а воссоздавать с добавлением своих идей. В результате получится оригинальный, ни на чей не похожий дизайн с правильным кодом.

  18. Кадриль. Восемнадцатый кадр.
    Напутствие

    Вы хотите, чтобы ваш сайт выглядел лучше всех? Будьте смелее в желаниях. Подкрепляйте их новыми оригинальными идеями, подсмотренными у профессионалов.

    У этого сайта интересно оформлена шапка с логотипом (он же название). Оригинальное меню в боковой панели, которая наезжает на статью, а контент оживлён крупным рисунком.

    Возьмите из него понравившиеся элементы. Для этого представьте код, по которому они построены. Как они расположатся в нём: рядом, внутри, или… Оцените сайт, как систему элементов, и определите их взаимодействие.

    Ищите удачные элементы и на других сайтах. Понравившиеся собирайте в свой клипарт для будущих оригинальных дизайнерских решений.

Оперируя озвученными учениками семантическими элементами HTML, начинайте строить макет страницы, вычерчивая прямоугольниками рассматриваемые информационные блоки. В них записывайте названия элементов. Таким образом, к концу урока на доске появится образец макета исследуемой страницы.

Как вариант, при достаточном времени, можно предложить ученикам самостоятельно записывать формируемый код в файл rm.htm. А по окончании предложить им самостоятельно, возможно как домашнее задание, закончить оформление макета вместе с нижней частью страницы. Для тех, кто готов «попотеть»: написать правила CSS для отображения страницы с учётом исправления рассмотренных и самостоятельно найденных ошибок. Уверяю, скопировать код у них не получится.

При создании страницы была применена табличная вёрстка в духе 90-х годов прошлого века (к этому вернёмся позже). Именно неумелое обращение с ней и послужило причиной большого количества ошибок, которые уже озвучены и будут рассмотрены далее.

Но далее, когда ученики увидят написанный код, который исправлять не только архисложно, но и глупо, они поймут, что проще писать свой новый и с учётом новых стандартов. Готовый макет можно будет использовать для выполнения второго курсового проекта: «Не тегом единым».

Особое пожелание для макета на доске. Четыре блока с фотографиями обозначьте на схеме одним цветом или штриховкой под углом 45°. А следующие за ними блоки с текстом о скидках: рассрочка, новогодние, отдельный блок с новостями и т. п. — по другому.

В этой кадрили показано, как можно, разбирая по составным частям общий дизайн сайта, проектировать код для создания его макета. Такими действиями можно продолжить создание макета сайта с исправлением ошибок. Не надо их копировать, возможно, в процессе работы вы добавите ещё и своих. Поэтому первым делом позаботьтесь о меню, и подумайте как удобнее разместить фотографии не мешая тексту, а дальше пробуйте сами.

Если этот метод применять к «правильным» сайтам, то копия, вряд ли, получится идеальной, очень редко копии бывают лучше оригинала. Да и в процессе работы появляется желание изменить какие-то отдельные детали. Оригинальности в своём дизайне можно достичь, собирая отдельные элементы из фрагментов разных сайтов, увязывая их вместе своим растущим мастерством.

Вы начинаете как копия, а затем становитесь оригиналом. Гленн О’Брайен, писатель.

Подробнее о центрировании

Симметрия не слишком популярна в современном дизайне. Это потому, что центрированные элементы с трудом поддаются выравниванию — их осевая линия выражена не явно.

При выравнивании влево чётко прослеживается условная вертикальная линия левой границы, вправо — правой. Таким образом, разнородные элементы с общей визуальной границей, формируют единый логический блок. Но центрированные фрагменты смотрятся как «разбросанные игрушки». Их сложно соотносить с другими вертикальными линиями композиции.

Исследуемая страница — яркий пример негативных особенностей центрирования. Рассмотрим всё по порядку.

Шапка в коде описана, вероятно, элементом… HEADER?
Название —… H1?
А под ним меню контента —… NAV?

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

Вопрос. По центру ли смотрится шапка?
Ответ. Да. Потому что отступы от края листа совершенно одинаковые.

Вопрос. Каким образом можно блок разместить по центру?
Ответ. Нужно в CSS ограничить его ширину "width" либо количеством пикселов меньше ширины родительского блока, либо процентами меньше 100%. А затем установить отступам "margin-left" и "margin-right" значение "auto".

Вопрос. Что можно сказать о центрировании названия?
Ответ. Центрирования нет. Отступ от границ страницы слева больше, чем справа.

Вопрос. А теперь о меню контента?
Ответ. Меню действительно находится строго по центру шапки.

Положение названия в шапке совершенно отлично от центра. Центр меню не согласуется даже с самим названием, особенно при изменении масштаба страницы или её ширины.

Так же центры в шапке (ошибочный у названия и явный у меню) никак не согласуются с несимметричной основной частью страницы. У неё просто нет вертикальной центральной линии — она состоит из двух разных по ширине блоков: справа широкий основной блок контента, а слева — узкая боковая панель.

В коде эти блоки предположительно описаны… ARTICLE и ASIDE?

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

Причём, регулировать ширину строк нужно принудительно. Если абзац продолжается, а строка должна окончиться в определённом месте, применяют элемент… BR? При изменении ширины страницы соотношение размеров строк не будет меняться. Подобный приём допустим, например, в длинных заголовках или подзаголовках.

Обратите внимание на нижние абзацы центрального блока при разрешении 1024px. Некоторые строки по ширине отличаются явно, а некоторые, даже соседние — чуть-чуть. Помните правило форматирования: если элементы однотипные, они должны иметь одинаковый стиль, то есть выглядеть одинаково. Но когда элемент «чуть-чуть отличается» от других, это часто выглядит плохо. Непонятно: «он вместе с ними или нет»?

Нельзя быть «чуть-чуть повешенным» :) Чуть-чуть в дизайне называется нюанс, но чаще всего нюансировка касается цвета и его оттенков. В остальных случаях «чуть-чуть» смотрится как ошибка.

Функциональная ошибка

Дизайнерские ошибки сложно найти. Для этого нужно знать правила дизайна и иметь намётанный глаз.

Мы уже знаем четыре правила… (контраст, повтор, выравнивание и приближённость)?
А сможете их объяснить… ?

Эти ошибки, как правило, легко исправлять в коде.

Теперь рассмотрим ошибку, которая явно видна на экране, но только при определённых условиях. Для поиска таких ошибок, кроме глаз и внимания, нужны дополнительные инструменты. Для начала рассмотрим те, которые управляют масштабом.

  1. Первый управляет масштабом самой страницы. Масштаб, как правило, увеличивают пользователи с ослабленным зрением, а те, у кого меленькие экраны, возможно, уменьшают, чтобы охватить взглядом страницу целиком.
  2. Второй управляет размером экрана устройства. Количество людей, выходящих в интернет не только с рядовых компьютеров, неуклонно растёт. Экраны их устройств весьма различны: от 3″ с разрешением 240×400px до 40″ с разрешением 3840×2160px.

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

Функциональную ошибку браузер сразу показывает на экране. Но её мало увидеть — она очевидна. А вот понять-объяснить: что стало причиной её появления, какая ошибка допущена в коде, что можно предпринять для её исправления… Чем точнее и подробнее будет ваше предположение — тем выше будет оцениваться ваш профессиональный опыт.

Попробуйте не сразу заглядывать в код. Там может быть полное безо́бразие со структурой — «каша», которую сразу и не расхлебать.

Сосредоточимся на ошибке при изменении масштабов. В помощь вам «кадриль» (сменяемые слайды) с инструментами веб-разработчика и с описанием управления ими. На мониторах с разрешением 1024×768 разверните браузер на полный экран клавишей F11. После просмотра этой же клавишей его можно вернуть в обычный оконный режим.

  1. 1. Изменение размеров страницы

    Наша презентация имеет ширину только 800px. Уменьшим масштаб рабочей области браузера до 67%. В меню окна для этого имеются команды изменения масштаба (⮞1). Теперь вся страница умеcтилась по ширине.

    Этими инструментами можно увеличивать или уменьшать размер страницы в окне браузера. Теперь у нас ещё одна задача — нужно научиться изменять размер у самого окна под размер разных устройств. Для этого понадобится другой инструмент.

  2. 2. Переключатель инструментов веб-разработки

    Разглядывая страницу мы видели лишь малую толику из того, что может повлиять на общую оценку сайта. Для серьёзного исследования нам понадобятся «Инструменты веб-разработки» браузера. Открыть их можно кнопкой на панели инструментов (⮞1) или клавиатурным аккордом Ctrl + Shift + I.

  3. 3. Список инструментов веб-разработки

    Не бойтесь экспериментировать с инструментами. Не забывайте, что страницу сломать нельзя. Если что-то случится, её можно просто обновить или закрыть и снова открыть браузер.

    Особенность инструментов в Firefox из второго блока такова, что они запускаются самостоятельно без общей панели, занимающей довольно много места на экране.

    А сейчас выберите на инструмент «Адаптивный дизайн» (⮞1).

  4. 4. Выбор режимов просмотра

    Вернём 100% масштабу страницы. Она отображается на виртуальном устройстве с экраном 320×480px (⮞1). Размер можно изменить, введя другое значение, или выбрать другое устройство (⮞2). Можно даже «поворачивать» виртуальный экран (⮞3).

    Размер может быть шире окна браузера. Кнопка «Сделать скриншот…» (⮞4) в папке «Загрузки» сохранит её изображение. А кнопка «Выйти из режима…» (⮞5) вернёт просмотр страницы в обычный режим.

  5. 5. Подготовка к эксперименту

    Колесом мыши прокрутим страницу так, чтобы убрать вверх её шапку и изменим ширину экрана виртуального устройства до 1409px (⮞1).

    Это не самая большая ширина компьютерных мониторов. Популярные 17″-19″ Full HD имеют ширину ±1900px. A cамые большие — 34″–40″ от 3440px до 3840px.

  6. 6. Укажите ошибки

    Изменив ширину на 1410px (⮞1), можно заметить, что фотография во втором ряду сползла со своего места. Прокрутите горизонтальную полосу прокрутки и убедитесь, что и вторая фотография в той же строке покинула своё место.

    Давайте учиться видеть код за рассматриваемой страницей и видеть страницу за исследуемым кодом.

    Задание. Манипулируя только шириной объяснить, почему строгая структура размещения материала рассыпается?

Познакомившись с инструментами управления масштабами, попробуйте сами поэкспериментировать с сайтом, определить и словами описать причину ошибок.

Так как именно вы должны рассказывать ученикам о приёмах поиска ошибок, поэкспериментируйте самостоятельно с размерами, как страницы, так и экранами разных устройств. Найдите ошибку и попытайтесь предположить, что в коде было упущено разработчиком? Слово «упущено» — подсказка.

Теперь о возникшей проблеме. Если мы увеличиваем ширину экрана, используя адаптивный дизайн, или уменьшаем размер элементов страницы, используя её масштаб, то при определённых условиях фотографии смещаются со своих мест.

Так что же это за условия… (количество строк в предыдущем блоке)?

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

На самом деле всё намного сложнее, но об этом позже. А пока можно довольствоваться и подобным ответом.

Для выяснения того, как обстоит дело в коде на самом деле, нам понадобятся другие инструменты. Но о них мы будем говорить далее.

Загадка сайта Ритмебель

Условная линия по верхним границам двух фотографий служит верхней границей блоков в статье. Те же фотографии задают и левую, и правую границы этих блоков. Лишь высота у них различна, так как различно количество строк текста.

Но что-то с ними не так. Большинство людей, взглянув на плохо оформленную страницу, могут почувствовать, что она им не нравится, но они не знают, что нужно сделать, чтобы исправить её. (Не дизайнерская книга о дизайне. Робин Уильямс). Но мы уже не относим себя к этому большинству. Мы уже почти профессионалы.

Что же с блоками не так? Между блоками проведены разделительные линии. О них и пойдёт речь. Одну из них можно увидеть в кадрили «Анализ и разработка макета страницы» на 17-ом кадре.

Вопрос Какова роль этих линий?
Ответ. Если закончился один блок и начался другой, то это линии разделения блоков.

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

Во-первых, не совсем правильно отделять содержимое блоков друг от друга, а не сами блоки. Во-вторых, при изменении ширины окна ширина строк изменяется, а ширина линий остаётся неизменной. Выходит, что назначение линий остаётся загадкой.

Из рассуждений о ширине линий вытекает вопрос. Какое правило дизайна нарушено?
Ответ. Если линия отделяет блоки друг от друга, то длина её должна быть равна ширине блоков. И, в любом случае, линия должна менять свою ширину вместе с элементами, которые отделяет. Этого требует правило выравнивания.

Приглядитесь к линиям. Что ещё можно сказать о них и о правилах?
Ответ. Горизонтальные линии между блоками имеют разную длину. Нарушение правила повтор. Повторяться должны не просто линии, а линии одинакового размера.

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

В построении этих линий имеется нарушение сразу трёх основных правил дизайна.

  1. Приближённость. Взаимосвязанные смысловые элементы должны быть расположены как можно ближе друг к другу. Тогда они будут выглядеть единой логической группой.

    Если посмотреть на последний блок с фотографиями, то, вероятно, линии обозначают нижние границы блоков. Но тогда они должны иметь меньшее расстояние от предыдущего блока и большее — до следующего.

    На самом деле они ближе к следующему блоку, как бы уточняют его верхнюю границу. Таким образом самый первый блок оказался без верхней линии. И, более того, пятый блок без фотографий, оформлен совершенно иначе — он не похож на предыдущие, поэтому линия сверху ему не нужна.

    Какому блоку принадлежат линии? Вопрос пока остаётся открытым.

  2. Повтор. Следует повторять некие элементы на протяжении всего проекта, чтобы сформировать целостность его структуры и стиля.

    Эти линии странным образом не повторяются, а наоборот отличаются друг от друга по ширине.

  3. Выравнивание. Никакой элемент на странице не должен быть расположен случайно. Одни элементы должны быть зрительно связаны с другими.

    Если назначение линии подчеркнуть границу блока верхнюю или нижнюю, то и ширина её должна соответствовать ширине этого блока.

Про правила контраст и приближённость можно прочесть в § 136. Теория близости Ководство Артемия Лебедева.

С обнаружением ошибки мы справились. Но этого для истинного профессионала не достаточно. Познакомимся с правилом УДП: Указать на ошибку, Доказать, что это ошибка, Показать правильное решение.

Ещё нужно найти причину возникновения ошибки и описать способ её исправления. В противном случае мы не имеем права указывать на неё и снимать баллы. А вдруг, это оригинальное дизайнерское решение?

Вопрос. Объясните, в каком файле вы бы стали искать ошибку с неправильно оформленными линиями — в HTML или CSS?

Сначала нужно вспомнить как или из чего формируется линия-граница… (свойства элемента: "border-style", "border-color", "border-width")?
Причём нас интересуют границы не со всех четырёх сторон, а только… ("border-top" или "border-bottom")?
В каком файле задаются свойства элементов… (в файле CSS)?

Вопрос. А какие ошибки были бы устранены, если бы мы поступили именно так…?
Ответ. Все. И приближение, и повтор, и выравнивание.

Так что же на самом деле происходит с разделительными (илии соединительными) линиями на сайте Ритмебель? Поможет разобраться в этом кадриль под названием: «Красные линии синего цвета»

  1. Кадриль. Первый кадр.
    Интерфейс

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

    Интерфейс — (англ.: inter — между; англ.: face — лицо) между лицами или лицом к лицу: взаимодействие элементов системы человек-программа. По отношению к компьютерной программе — её внешний вид и способ управления ею.

    Первым делом заглянем в контекстное меню рабочей области. Рассмотрим информацию о странице, которая в ней отображается (⮞1).

  2. Кадриль. Второй кадр.
    Информация о странице

    На вкладке «Основная» (зелёная ⮞1) можно узнать кодировку файла. Это важно, когда вместо букв на странице отображаются «букозявочки» и «кракозябры».

    На вкладке «Мультимедиа» (зелёная ⮞2) есть полный список всех изображений, видео и аудио контента (синяя ●1) встроенного в страницу: адреса их файлов и альтернативные тексты (если есть). Под списком подробные сведения о каждом (синяя ●2) и образец внешнего вида (синяя ●3).

    Можно, при регулярной работе с сайтом, отключать загрузку изображений (синяя ⮞4) с его сервера, если вас интересует только текст, а интернет медленный или с оплатой по трафику.

    На вкладке «Разрешения» (зелёная ⮞3) содержатся постоянные настройки браузера.

  3. Кадриль. Третий кадр.
    Ссылки

    Браузер постоянно общается с пользователем, не только буквами, но и меняющимся внешним видом. Взгляните на форму курсора (⮞1). Браузер сообщил (курсор-палец), что это три ссылки: две фотографии и текст, и щелчком по ним можно перейти на другую страницу с известным адресом (⮞2)

    На других таких же фотографиях (⮞3) ссылок нет (курсор-указатель). Помните дизайнерское правило Повтор? Здесь ещё одно его нарушение.

  4. Кадриль. Четвёртый кадр.
    Курсор

    Снова следим за курсором.

    • Указатель (⮞1) курсор над объектом.
    • Палец (⮞2) курсор над ссылкой.
    • Точка ввода (⮞3) курсор над текстом.
    • Блок (⮞4) выделенный фрагмент текста.

    А теперь курсор над линией (⮞5). О чём говорит его форма? А эта (⮞6)? Выходит наши линии не совсем линии. Они похожи на обычный текст. Давайте в этом убедимся.

    Пришла очередь узнать, как их создал автор. Для этого нам нужно заглянуть в код HTML (⮞7), по которому браузер сформировал изображение на экране.

  5. Кадриль. Пятый кадр.
    Исходный код

    Браузер подсказывает, что объявление документа (⮞1) содержит ошибку. Значение meta name="robots" (⮞2) указывает поисковым роботам индексировать страницу. А элемент NOINDEX, открываясь после HEAD и закрываясь в конце BODY, запрещает индексацию всего документа. Противоречие для машины ошибка.

    И целый блок кода (⮞4) оказался за пределами HEAD и BODY. Поэтому браузер считает, что и BODY (⮞5) написано с ошибкой. К тому же, в нём объявлено фоновое изображение страницы, но имя файла отсутствует. Да и зачем BODY контекстный стиль (атрибут style), если имеются встроенные (элемент STYLE?)

    Ещё только начало файла, а уже столько ошибок кодирования, и среди них есть грубые.

  6. Кадриль. Шестой кадр.
    Поиск в коде

    На странице нужно скопировать фрагмент текста, как можно ближе к линии. А в исходном коде аккордом Ctrl + F открыть поисковую строку, вставить и найти (⮞1) этот фрагмент (⮞2).

    Искомая линия — текстовое подчёркивание, упакованное в FONT (⮞3). Этот элемент уже в HTML 4.1 считался устаревшим, а в HTML 5 — нерекомендуемый. Применение его — ошибка.

    Сайт создавался или редактировался в визуальном HTML-редакторе из пакета программ MSO (⮞4). Им создан файл WordDocument (⮞5) типа HTML. Подобные редакторы в коде всегда оставляют «лишние» сведения, но не для браузера, а для самих себя. Ненужные элементы делают код мусорным.

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

  7. Кадриль. Седьмой кадр.
    Инструменты

    В коде структурная лесенка построена не везде. Подобрать к элементам контекстные селекторы CSS сложно: какой внутри, какой рядом… Строчные элементы записаны в одну «бесконечную» строку, и теги, с именами строчными буквами, плохо различимы в тексте. Проверять этот код неудобно.

    Если у вас такой же «некрасивый» код, то у команд соперниц есть причины снижать вам баллы. А если вам пришлют такой же код? Запутавшись в нём, можете и не заметить ошибки.

    Рассмотрим более серьёзные инструменты. С адаптивным дизайном (⮞1) вы уже знакомы. Он позволяет увидеть страницу какой она будет выглядеть на экранах различных устройств. Пипетка (⮞2) сохранит в буфер обмена код понравившегося вам цвета. А теперь откроем все инструменты сразу (⮞3).

  8. Кадриль. Восьмой кадр.
    Размещение инструментов снизу

    Панель «Инспектор» (жёлтая ⮞1) отображает структуру кода HTML «глазами браузера» (даже если она не соблюдалась) и свойства выбранного элемента. В «Консоли» (жёлтая ⮞2) можно включить поиск ошибок при выполнении CSS и JS. В списке «{} Стили» (жёлтая ⮞3) — редактировать все файлы.

    Слева в панели отображается элемент, выбранный в структуре (синяя ⮞1), и путь к нему (синяя ⮞2). Справа — список правил CSS (синяя ●3) которым он подчиняется и имя файла с номером строки записи правила (синяя ⮞4). Стили CSS можно редактировать и создавать (синяя ⮞5) даже для разных состояний элемента (синяя ⮞6).

    Правый блок панели можно при необходимости сворачивать (жёлтая ⮞4). А саму панель инструментов располагать и справа или в отдельном окне (жёлтая ⮞5)

  9. Кадриль. Девятый кадр.
    Размещение инструментов справа

    Можно выбирать элементы (зелёная ⮞1) прямо на странице. Создавать элементы-узлы DIV (зелёная ⮞2) и переименовать их. Искать элементы (зелёная ⮞3) в объёмном коде и редактировать их по двойному щелчку.

    Вкладка «Вычислено» (синяя ⮞1) — содержит вычисленные браузером свойства CSS выбранного элемента. Единицы измерения переведены в пикселы. Есть поиск интересующих свойств (синяя ⮞2). Если оно не назначено, то браузер задаст ему значение по умолчанию. Можно увидеть и эти свойства (синяя ⮞3). Блочная модель (синяя ⮞4) элемента наглядно показывает размер самого элемента, его полей, границ, отступов и способ вывода на экран.

    В заключение знакомства с инструментами настроим их для удобной работы  (красная ⮞1).

  10. Кадриль. Десятый кадр.
    Настройка инструментов разработчика

    Даже ничего писать не надо. Названия инструментов и значки сами говорят за себя. Настройки редактора кодов HTML, CSS, JS и др. описаны в зелёных блоках.

    Будем использовать инструменты для детального анализа кода страницы. Включите панель «Инспектор» (синяя ⮞1).

  11. Кадриль. Двенадцатый кадр.
    Отсуствие блоков

    На мониторах с шириной 1024px уменьшите масштаб страницы до 50%. Щёлкните кнопку «Выбор элемента» (⮞1) и наведите курсор, примерно в то место где начинается блок, который мы назвали ARTICLE (⮞2). Щёлкните его.

    В структуре выделился элемент TD (⮞3) — ячейка таблицы. А в ней никаких разделений на блоки SECTION нет! В ячейке обычные абзацы (● 4) с совершенно одинаковыми ролями и поведением. Табличная вёрстка тоже осуждается в HTML 5.

    В коде проведите курсор над абзацами, и браузер покажет как они выглядят на экране. Некоторые из них пустые (⮞ 5). Убедитесь сами, щёлкая по треугольникам слева и раскрывая их подструктуру. Это ещё одна ошибка кодирования. Пустые ненужные элементы не должны усложнять код и нагружать браузер бессмысленной работой.

  12. Кадриль. Одиннадцатый кадр.
    Исследование элемента

    Можно поступать по-другому. Наводим на интересующий элемент курсор мыши. Элемент текстовая строка, поэтому курсор выглядит как точка ввода (⮞1). В контекстном меню выбираем пункт «Исследовать элемент» (⮞2). В структуре панели «Инспектор» раскроется шестой абзац с элементом FONT (⮞3) в котором, как уже известно, находятся искомые символы подчёркивания.

  13. Кадриль. Тринадцатый кадр.
    Символы подчёркивания

    Раскройте подструктуру шестого абзаца (⮞1) и его дочернего элемента FONT с основной частью искомой черты́ (⮞2). Причём её кусочек (⮞3) находится за пределами FONT. И это тоже ошибка кодирования.

    Двойным щелчком по линии откройте редактирование содержимого FONT и прямо в самой линии напечатайте какое-нибудь слово. Завершите ввод нажатием Enter. Таким образом, мы окончательно убедились в том, что черта́ сформирована из символов подчёркивания. А это уже серьёзный аргумент в пользу проверяющей команды, против которого выдвигать апелляции бессмысленно.

  14. Кадриль. Четырнадцатый кадр.
    «Плаванье» изображений

    Раскроем подструктуру третьего абзаца (⮞1) и найдём два IMG (⮞2-3). Оба имеют атрибут align (выравнивание) (⮞4), но с разными значениями. Атрибут align исключён из стандарта HTML 5. Но всё же рассмотрим код.

    Значение align="left" равносильно свойству CSS float: left;. Это значит, что элемент переместится в слой над потоком элементов и прижмётся к левому краю, а место справа освободит для следующих за ним.

    Второй IMG прижмётся вправо и освободит место слева от себя. Свободное под ними место займёт следующий FONT (⮞5), а своё содержимое (текст) разместит между ними.

  15. Кадриль. Пятнадцатый кадр.
    Текст в абзацах

    Так как IMG подняты над потоком, то следующие элементы (⮞1) смело подстраиваются под ними, а их текст остаётся зажатым в рамках между левым и правым изображениями.

    Но для пустого абзаца и абзаца с подчёркиванием (⮞2) места не хватило и они пристроились снизу, закончив формирование визуального блока (● 3). Он только визуальный, так как уже известно, что на самом деле в коде никакого блока нет.

    А что случится, если удалить элемент P (● 4) с описанием «кухни из дерева…»? Удалите его клавишей Delete.

  16. Кадриль. Шестнадцатый кадр.
    Эксперимент с очисткой

    Место под изображениями освободилось и абзац с подчёркиванием (⮞1) занял его. Но черта́ (⮞2) оказалась длиннее ширины свободного места для текста и не смогла занять его. На больших экранах свободное место между изображениями увеличивается и в какой-то момент становится шире черты. Что же происходит тогда?

    Давайте смоделируем ситуацию, когда ширина черты меньше расстояния между изображениями. Мы уже умеем редактировать код. Удалим её «хвостик» за пределами FONT; (⮞3) и не менее 16 символов подчёркивания у основной части (⮞4).

  17. Кадриль. Семнадцатый кадр.
    Сдвиг

    Как только черта́ стала у́же чем свободное место, она тут же поднялась вверх, уменьшив высоту абзаца (⮞1). А под ней, свободное место между изображениями, занял следующий абзац с третьим (⮞2), четвёртым изображением и текстом после них. Для четвёртого (⮞3), в данном случае, места не хватило и оно осталось внизу прижатым вправо. Но зато хватило места для следующего с текстом (⮞4), ведь третье изображение тоже прижато влево и справа от него свободно.

    Подвергнув код страницы анализу: разобрав фрагмент его структуры с тем элементом, который вызывал проблему, мы сумели найти ошибку. Выяснив причину её появления, готовы исправить код.

    А вы уже знаете решение?

  18. Кадриль. Восемнадцатый кадр.
    Название кадра № 18

    Для закрепления изученных тем, а так же чтобы не получать апелляций, нужно применять правило УДП. Рассмотрим его на примере ошибки с линиями сайта Ритмебель.

    • Указать. На экранах свыше 1410px фотографии смещаются. АРМ>Дизайн>Геометрия:«Постоянные элементы» (‒0,1).
    • Доказать. Мы не только увидели символы подчёркивания, но и убедились в этом на практике.
    • Показать. Элементам содержащим подчёркивание нужно добавить свойство CSS clear: both; (⮞1). Оно возвращает элементы в обычный поток (⮞2).

    Подобрать общий селектор правила CSS не получится. Для каждого элемента понадобится отдельный. Проверьте сами (⮞3). Структура кода очень сложна, а это лишние: нагрузка на браузер и работа для web-конструктора.

Для серьёзного анализа сайта нужны серьёзные инструменты. Теперь они вам уже знакомы. Осталось только попрактиковаться в их применении для повышения профессионального уровня. При помощи этих инструментов можно успешно собирать свой клипарт фрагментов кода для его дальнейшего использования в творческой деятельности.

Ошибки для самостоятельного поиска решений

Фотографии. В рекламных целях нельзя использовать дешёвую «фото-мыльницу». На сайте практически все фотографии выполнены некачественно, так как подобные фотоаппараты не имеют настроек, и добиться от них качественного результата очень сложно. У всех фотографий, как минимум, одна общая ошибка — неправильное построение перспективы. Единственный инструмент для исправления этих ошибок  графический редактор, однако, тема редактирование фотографий выходит за рамки курса.

В достаточном объёме о графике написано в учебнике. А дополнительно по этому вопросу можно посоветовать статью Артемия Лебедева § 101. Перспектива и вертикальные линии как раз на тему подобных ошибок.

Уже знакомые ошибки. К тому же, не будем останавливаться на ошибках, которые подробно рассмотрены в учебнике и в АРМе. Например, такие как «Выделение стилем, типичным для ссылок». В тексте есть слова с подчёркиванием, которые ссылками не являются. И ссылки без подчёркивания…

Подобные ошибки можете найти и продумать способы их исправления самостоятельно.

Выводы

Ведение урока

Окончательный вывод ученики должны сформировать самостоятельно при участии учителя. Это не сложно, если их удалось разговорить на уроке.