Верстка web-страниц

Содержание

Создание html-структуры
Написание css-кода
Адаптация дизайна под устройства с меньшим дисплеем

Пример

Шаг 1. Создадим html-структуру

Пример

Пример

Так как стили еще не прописаны, то в браузере:

Пример

Зададим стили:

Пример

Шаг 2. Зададим стили:

Пример

Примечание:

display: inline-block;
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы

Пример

Отображение в браузере после задания стилей:

Пример

Чтобы видеть результат верстки без контента – ввели фоновый цвет, от

Пример

Шаг 3. Делаем изображения экономичными:

Для используемых изображений определяем повторяющийся элемент, отделяем

Пример

Создали фрагмент для повторения, добавили контент в заголовок, настроили дополнительно стили:

Пример

Шаг 4. Корректируем меню (! оптимизируя фоновое изображение):

Пример

Шаг ?. Что делать с размерами:

Так как ширина фиксированная, то при

Пример

Шаг ?. Отключаем автоматическое изменение страницы:

Чтобы устройства, работающие на системах, позволяющих

Пример

Согласно приведенному коду:
content=“initial-scale=2.0,width=device-width” />
содержимое в окне браузера будет

Пример

content=“initial-scale=2.0,width=device-width” />
content=“initial-scale=2.0
Данный атрибут говорит «масштабировать содержимое до величины

Пример

Данный тег можно использовать для контроля над тем, насколько сильно

Пример

К примеру, лишить пользователя возможности осуществлять масштабирование:

Подстраиваем дизайн

@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header, #footer, #navigation

Задание

Наполните структуру контентом следующим образом:

Задание

Наполните структуру контентом следующим образом:

Ширина области просмотра

До данного момента мы прописали медиазапросы для ширины элементов

Ширина области просмотра

Ширина области просмотра

@media screen and (max-width: 768px) {
#wrapper {
width: 768px;}
#header, #footer,

Ширина области просмотра

Теперь врезка и область содержимого будут заполнять всю страницу

Ширина области просмотра

ЗАДАЧА и РЕШЕНИЕ:
первым должен идти контент (основное содержимое),

Ширина области просмотра

было:

врезка

содержимое

Ширина области просмотра

стало:

содержимое

врезка

Ширина области просмотра

В браузере при стандартных размерах ничего не изменится (благодаря

Ширина области просмотра

Зато при уменьшении области просмотра первым пойдет текстовый контент

Ширина области просмотра

Кроме того, позаботимся о добавлении и изменении стилей, характерных

Ширина области просмотра

Html-код

Ширина области просмотра

Html-код

Ширина области просмотра

Css

Ширина области просмотра

Css

Ширина области просмотра

Css

Ширина области просмотра

Css

Ширина области просмотра

Css

Ширина области просмотра

Css

Ширина области просмотра

Ширина области просмотра

Ширина области просмотра

Осталось:
«доработать» код;
! Выполните это самостоятельно
оптимизировать расположение изображений в