Три «слоя» веб-дизайна: структурный слой, слой представления, слой поведения.
Современный веб-дизайн можно представить как состоящий из трех отдельных «слоев».
Содержимое документа с разметкой (X)HTML составляет структурный слой. Он формирует основу, на которой могут применяться другие слои.
Как только структура документа создана, вы можете добавить информацию из таблицы стилей CSS, чтобы управлять тем, как должно выглядеть содержимое. Это называют слоем представления.
Наконец, слой поведения включает сценарии JavaScript, которые наделяют страницу интерактивностью.
652 0
Адаптивный веб-дизайн - стратегия для работы при неизвестных размерах экрана.

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

Адаптивный веб-дизайн — это стратегия по предоставлению пользовательских макетов для устройств в зависимости от размера области просмотра (окна браузера). Хитрость адаптивного дизайна в том, что для всех устройств предоставляется один HTML-документ, но применяются разные таблицы стилей в зависимости от размера экрана, чтобы обеспечить наиболее оптимизированный макет для конкретного устройства. Например при просмотре страницы на смартфоне текст отображается в одной колонке с крупными ссылками для легкого нажатия.
593 0
Создание нового документа в редакторе Блокнот (для пользователей Windows)

Для создания нового документа в редакторе Блокнот (Notepad) в операционной системе Windows 8 выполняются следующие шаги:
1. Откройте начальный экран (установив указатель мыши в левом нижнем углу экрана и щелкнув мышью) и найдите на нем программу Блокнот (Notepad). Если там этот ярлык отсутствует, откройте список всех установленных программ, щелкнув правой кнопкой мыши по экрану и нажав кнопку Все приложения (All apps) в правом нижнем углу. Ярлык программы Блокнот (Notepad) находится в папке Стандартные (Accessories).
11 509 2
Добавление стилей CSS

Следует обратить внимание на ключевой компонент кода HTML страницы.
В верхней части HTML-документа есть элемент link. Выглядит он примерно так: <link rel="stylesheet" type="text/css" href="css/style.css" />
Он указывает адрес файла таблицы стилей style.css, в какой папке (директории) он находится. Таблица содержит информацию о том, как должна выглядеть страница в браузере. Это инструкции стилей, написанные в соответствии с правилами каскадных таблиц стилей (CSS).
CSS позволяет дизайнерам добавлять визуальные инструкции стилей (известные как представления документа) к размеченному тексту (структура документа в терминологии веб-дизайнеров).
505 0
Дизайн сайтов. Обеспечение доступности.

Говоря об огромном количестве браузеров, используемых сегодня, до сих пор мы касались только визуальных, управляемых с помощью указателя мыши или касаниями (жестами) пальцев. Важно, однако, иметь в виду, что люди получают доступ ко Всемирной паутине различными путями — с помощью программ экранного доступа, ввода шрифтом Брайля, экранных луп, джойстиков, ножных педалей и так далее. Веб-дизайнеры должны так проектировать страницы, чтобы создавать как можно меньше барьеров на пути получения информации, независимо от возможности пользователей и устройств. Другими словами, вы должны создавать дизайн с учетом доступности.
734 0
Каскадные таблицы стилей CSS - дизайн сайта и контента.

В то время как HTML используется, чтобы описать содержимое вебстраницы, именно каскадные таблицы стилей (Cascading Style Sheets, CSS) влияют на то, как выглядит контент. Говоря о веб-дизайне, способ, которым представлена страница, известен как ее представление. Это означает, что шрифтами, цветами, фоновыми изображениями, интервалами между строками, макетом страницы и прочим - управляют CSS. С помощью новейшей версии CSS3 вы можете добавлять на страницу даже специальные эффекты и простую анимацию.