О Веб-дизайне

Добро пожаловать на урок веб-дизайна. Первое правило веб-дизайна: Ни слова про Comic Sans. Второе правило веб-дизайна: НИ слова про Comic Sans. Третье правило веб-дизайна: В слове “color” нет буквы U.

  • Данный модуль показывает фрагмента файла формата CSS.
  • Исходя из полученной информации, вам необходимо Принять (✓), Обдумать (Δ) или Отклонить (✗) код.

Шаг 1: Выбор сайта

Найдите сайт, откуда был взят код. Возьмите часть кода, которая относится к Селектору (перед {), чтобы сократить область поиска до 1 сайта, и затем отметьте его Пороговое значение.

Edison Daily (новостной сайт)

Элементы: body, a, h3, blockquote

ID: #header, #comments

Классы: .post, .title, .author

Пороговое значение: #00FF00

Buddymaker (социальная сеть)

Элементы: div, span, img, a

ID: #msg, #cover, #content, #sidebar

Классы: .post, .title, .share

Пороговое значение: #8040C0

PNGdrop (фотохостинг)

Элементы: div, img

ID: #main, #comments, #fullview

Классы: .username, .share, .large

Пороговое значение: #BADA55

BobIRS (чат)

Элементы: ul, ol, img, b, i

ID: #sidebar

Классы: .avatar, .username

Пороговое значение: #03E61E

Vidhost (видеохостинг)

Элементы: div, iframe, b, i

ID: #main, #rating, #comments

Классы: .username, .share, .channel

Пороговое значение: #60061E

Go Team Falcon online (игра по сети)

Элементы: body, iframe

ID: #rating, #comments

Классы: .rating, .fullscreen

Пороговое значение: #501337

Stufflocker (облачное хранилище)

Элементы: div, h3, img, iframe

ID: #sidebar, #download

Классы: .menu, .author

Пороговое значение: #B020E5

Steel Nexus (форум)

Элементы: body, div, img, blockquote

ID: #header, #content, #sidebar

Классы: .avatar, .reply

Пороговое значение: #BEA61E

Шаг 2: Найдите необходимый цвет

Найдите первое название цвета, встречающееся в CSS файле, и затем используйте таблицу ниже, чтобы определить шестнадцатиричное значение этого цвета. Это значение и есть Необходимый Цвет, который вам потребуется чуть позже. Если названия цветов отсутствуют, возьмите #7F7F7F.

ЦветШестнадцатиричное значение Цвет Шестнадцатиричное значение Цвет Шестнадцатиричное значение
Синий #0000FF Жёлтый #FFFF00 Красный #FF0000
Зелёный #00FF00 Белый #FFFFFF Рыжий #FFA500
Лиловый #800080 Розовый #FF00FF Серый #808080

Примечание: Шестнадцатиричное значение цвета обозначается в формате #RRGGBB.

Шаг 3: Подсчитайте очки сайта

Очки сайта подсчитываются следующим образом:

  • Начните с подсчёта строк кода внутри {фигурных скобок}. Подсчёт точек с запятой тоже приветствуется, так как они являются разделителями строк.
  • +3 очка за каждое:
    • Значение R в Необходимом Цвете меньше, чем значение R в пороговом значении.
    • Значение G в Необходимом Цвете больше или равно значению G в пороговом значении.
    • Значение B в Необходимом Цвете больше, чем значение B в пороговом значении.
  • +2 очка за каждый margin/padding.
  • +1 очко за каждый border/border-radius, если он не 0px или 50%.
  • -1 очко за каждый z-index без position.
  • +1 очко за каждый font-family, если он не "Comic Sans MS", за который вы получите -5 очков.
  • +2 очка за каждый box-shadow/text-shadow, если он не none.
  • Очки удваиваются, если кнопки на модуле цветные, или -3 очка, если они серые.
  • Если количество очков отрицательно или равно 0, прибавляйте 16 до тех пор, пока оно не станет положительным.
  • Складывайте цифры числа до тех пор, пока у вас не останется одна цифра. Затем используйте таблицу ниже, чтобы определить, какую кнопку нажать.
Принять (✓) Обдумать (Δ) Отклонить (✗)
2, 3, 5, 7 6, 8 1, 4, 9