Как сделать контейнер для сайта
Контейнерный Web-дизайн
Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).
А в завершение получим от CSS средства управления переполнением.
Блочные контейнеры
В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.
Для создания блочного контейнера применяется парный тег
В этом блочном контейнере размещен заголовок и два абзаца.
Блочные контейнеры используются чаще, чем встроенные.
Web-дизайн прошедшего времени и его недостатки
Web-страница делится на четыре части: заголовок, полоса навигации, основной контент, сведения об авторе. Во всех страницах сайта все одинаково за исключением основного контента, которое должно быть уникальным.
Вот эту проблему текстовый Web-дизайн и не решает.
Страница сайта — набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна — повысилась скорость загрузки страницы. Но есть и минусы: фреймы не стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна — табличный.
Табличный контейнерный Web-дизайн. При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.
— возможность одинакового отображения web-страниц во всех web-браузерах.
— форматирование таблиц и их ячеек стилями CSS.
— все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.
— большой и сложный html-код.
Так давайте же перейдем к изучению новой разновидности web-дизайна.
Сущность контейнерного Web-дизайна
Контейнерный Web-дизайн для размещения отдельных фрагментов содержимого Web-страниц использует блочные контейнеры, с которыми мы познакомились в начале этой главы. Отдельные контейнеры создаются для заголовка Web-сайта, полосы навигации, основного содержимого и сведений об авторских правах. Если основное содержимое имеет сложную структуру и состоит из множества независимых частей, для каждой из них создают отдельный контейнер.
Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11).
И что, контейнерный Web-дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web-дизайна и выясним, сможет ли он их решить.
— Непритязательный вид и линейное представление Web-страниц — у текстового Web-дизайна. Мы можем расположить контейнеры на Web-странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.
— «Монолитность» Web-страниц — у текстового и табличного Web-дизайна. Современные Web-обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18.
— «Нестандартность» фреймов — у фреймового Web-дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web-обозревателями одинаково.
— Громоздкость HTML-кода — у табличного Web-дизайна. HTML-код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом
— Медленная загрузка Web-страниц — у табличного Web-дизайна. Все Web-обозреватели отображают содержимое контейнеров прямо в процессе загрузки, так что Web-страницы визуально загружаются очень быстро.
И что, контейнерный Web-дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет.
Контейнерный Web-дизайн проигрывает табличному в возможности реализации сложного дизайна Web-страниц. Таблица позволяет создать на Web-странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web-страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web-дизайна.
Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна — «легкого», простого, современного.
Представление для нашего Web-сайта
Сначала разработаем схему расположения на Web-страницах соответствующих контейнеров. Лучше всего нарисовать ее на бумаге или в программе графического редактора.
Классическая схема контейнерного Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.
Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, ос новное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры.
На рис. 10.1 показано, что заголовок Web-сайта предшествует полосе навигации, а не наоборот. Поэтому поменяем местами фрагменты HTML-кода, создающие эти контейнеры и их содержимое.
Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:
— cheader — стиль для контейнера с заголовком Web-сайта;
— cnav — стиль для контейнера с полосой навигации;
— cmain — стиль для контейнера с основным содержимым;
— ccopyright — стиль для контейнера со сведениями об авторских правах.
Здесь буква «c» обозначает «container» — контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.
Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.
Создание и настройка контейнера
Для работы с Облачным хранилищем перейдите в соответствующий раздел панели управления.
Создание контейнера
Для создания нового контейнера:
Выберите класс контейнера. Классы контейнера Облачного хранилища:
Обратите внимание! После создания контейнера класс хранения изменить нельзя.
Подтвердите создание нового контейнера, нажав кнопку Создать контейнер.
Созданный контейнер отобразится на вкладке Контейнеры в списке существующих контейнеров. Для удаления контейнера выделите его в списке и нажмите кнопку Удалить.
Настройки контейнера
Для доступа к настройкам откройте меню соответствующего контейнера и выберите пункт Настройки контейнера.
Для настроек доступны соответствующие блоки:
Добавление файлов
На вкладке Файлы отображаются все файлы, загруженные в данный контейнер. Ограничений на объем загружаемого файла нет, если в настройках не задано иное. Для добавления файла в контейнер нажмите кнопку Выберите файлы для загрузки либо перетащите файл в специальную область. По кнопке Загрузить архив можно загрузить архив с рабочей машины в выбранный контейнер.
Можно загружать в контейнер файлы, запакованные в архив. Для архивов tar, tar.gz, tar.bz2 укажите, надо ли распаковывать архив при загрузке в контейнер или нет. При распаковке архива сам архив в контейнере не сохраняется.
Примечание: если названия папок в загружаемом архиве и хранилище совпадают — папки будут объединены. Если совпадают названия файлов — они будут перезаписаны.
Загруженные файлы можно переименовывать, копировать, перемещать и удалять. Для удаления файла нажмите в меню Удалить файл и в открывшемся окне подтвердите удаление, нажав кнопку Удалить.
Создание и настройка папки в контейнере
Внутри контейнера можно создавать папки и подпапки. Все файлы в папке будут наследовать свойства контейнера.
Для создания папки нажмите на кнопку Создать папку, введите название папки и нажмите кнопку Создать.
Папку можно переименовывать, скачивать в виде архива, копировать, перемещать и удалять.
На вкладке Настройки папки можно указать ссылку для загрузки файлов следующих типов:
При отметке соответствующего чек-бокса можно:
При отметке чек-бокса Временные ограничения открываются в поля ввода с датой и точным временем удаления загруженных файлов.
Также можно добавлять пояснительный текст для страницы загрузки.
После внесения изменений в настройки папки нажмите кнопку Создать.
Скачивание контейнеров и папок в виде zip-архива
Любые контейнер или папки можно скачивать в виде zip-архива.
Также имеется возможность включать/отключать скачивание контейнеров и папок в виде zip-архивов без авторизации. Для этого перейдите на вкладку Настройки контейнера в блок Скачивание в виде архива и установите переключатель в нужное положение.
Запуск контейнера Docker
Технология Docker набирает всё большую популярность среди разработчиков и DevOps-специалистов в наши дни, поскольку позволяет без особого труда настроить различные окружения один раз, а затем воспроизводить их на, казалось бы, совсем не совместимом оборудовании. Но начнём мы наш цикл статей о Docker с азов.
В сегодняшней статье мы поговорим о создании контейнеров и, соответственно, об их запуске. В Docker контейнер представляет собой окружение для выполнения какого-либо одного процесса. Это изолированная среда, в которой есть всё необходимое для выполнения нужного процесса, и нет ничего лишнего. Создание контейнера Docker выполняется в момент его запуска, и эти процессы запускаются с помощью команды docker run. Давайте сначала рассмотрим её синтаксис и опции.
Синтаксис и опции docker run
Синтаксис команды docker run похож на синтаксис других команд Linux и выглядит следующим образом:
$ docker run опции образ команда
Утилите обязательно надо передать образ, на основе которого будет создан контейнер. Образ может быть локальным или указывать на образ, который надо загрузить из сети. Мы рассмотрим это в примерах ниже. Опции позволяют настроить контейнер и параметры его запуска более детально. Сама команда позволяет переопределить программу, которая выполняется после запуска контейнера. Например, выполнив /bin/bash, вы можете подключится к самому контейнеру.
Рассмотрим основные опции утилиты, которые мы будем использовать. Опций очень много, поэтому я не могу перечислить их все:
Это основные опции, которые мы будем использовать в этой статье, а теперь давайте рассмотрим на примерах, как создать контейнер Docker в Linux.
Создание контейнера Docker
1. Обычный контейнер
Чтобы создать и запустить контейнер с параметрами, заданными в образе по умолчанию, просто запустите команду без параметров. Давайте воспользуемся контейнером hello-world, который как раз для этого и предназначен:
docker run hello-world
После запуска контейнера Docker будет выведено сообщение с приветствием, и процесс в контейнере завершится.
Для поиска уже готовых образов для контейнеров можно использовать веб-сайт DockerHub. Здесь есть образы для большинства дистрибутивов и системных сервисов, таких, как Nginx, Apache, PHP-FPM, PhpMyAdmin и многих других.
2. Подключение к контейнеру
Образ Ubuntu 18.04, на основе которого мы создали контейнер выше, не содержит команды, которая бы постоянно выполнялась, поэтому если вы попытаетесь подключится к нему с помощью команды docker exec, то получите ошибку: You cannot attach to a stopped container, start it first:
docker attach Ubuntu1804
Так происходит потому, что окружение не может работать без основного процесса, для которого и создан контейнер. Пока работает процесс, будет работать и контейнер. Как только процесс завершён, контейнер завершается, и созданный нами ранее контейнер полностью бесполезен. Вы не сможете к нему подключится, потому что он будет падать сразу же после старта, а к упавшему контейнеру подключится нельзя. Его можно удалить:
docker rm Ubuntu1804
А нам надо создать контейнер с командой, которая будет выполняться. Для этого просто передайте команду после имени образа, например /bin/bash. Чтобы контейнер был доступен интерактивно, создавайте его с опциями -i и -t:
Теперь вы в контейнере и можете выполнять действия прямо в изолированном окружении.
3. Переменные окружения
Очень часто для изменения настроек контейнера используются переменные окружения. Вы задаёте какую-нибудь переменную окружения, а затем её значение используется вашей программой в самом контейнере для выполнения различных действий. Для задания переменных окружения используется опция -e. Запуск контейнера Docker:
4. Монтирование папок и хранилищ
/test_docker в контейнер:
Хранилища позволяют монтировать в контейнер виртуальный диск, который не удаляется при удалении контейнера. Такое хранилище будет автоматически создано, если передать не существующую папку, а имя для нового хранилища:
Напоминаю, что опция —rm удаляет контейнер сразу же после того, как он завершит свою работу. Посмотреть список доступных хранилищ можно командой:
docker volume list
5. Порты контейнера
Если вам нужно получить доступ к какому-либо сервису контейнера по порту, например к веб-интерфейсу, этот порт надо пробросить в хост-систему. Для этого используется опция -p. Давайте установим Nginx и пробросим его порт в хост-систему:
6. Связывание контейнеров
Связывание контейнеров позволяет настроить взаимодействие между ними. Связанный контейнер будет доступен по сети по его имени. Соответствующая строчка будет автоматически добавлена в файл /etc/hosts контейнера. Для связывания используется опция —link. Чтобы закрепить знания, полученные выше, давайте создадим контейнер с базой данных MySQL, а затем свяжем его с PhpMyAdmin.
Затем создаём контейнер с PhpMyAdmin для доступа к этой базе данных и связываем с ним контейнер MySQL под именем db:
Также здесь мы пробрасываем порт 80 в хост-систему, чтобы получить доступ к веб-интерфейсу. Теперь можно проверять в браузере. Всё работает.
7. Сеть для контейнеров
Контейнеры можно не связывать. Если надо объединить три и больше контейнеров между собой, то куда удобнее сразу связать их в одну общую сеть, чем создавать множество подключений для каждого из этих контейнеров. Все объекты в одной сети будут иметь доступ к друг другу по их имени. Сначала необходимо создать сеть:
Посмотреть список созданных сетей можно командой:
docker network list
Теперь можно её использовать. Объединим с помощью сети наш MySQL- и PhpMyAdmin-сервера. Для этого надо их остановить и удалить:
docker stop MySQL
docker stop PhpMyAdmin
docker rm MySQL
docker rm PhpMyadmin
А для PhpMyAdmin теперь надо передать хост, на котором расположена база данных в переменной окружения PMA_HOST:
Выводы
В этой статье мы рассмотрели, как запустить контейнер Docker и настроить его параметры. Как видите, Docker может быть очень полезным для быстрого разворачивания рабочих окружений. Но редко для этих целей используют саму команду docker run. Обычно используется инструмент docker-compose. Интересно ли вам прочитать об этом инструменте? Напишите в комментариях!
Создание флексбоксов
Мы создадим один флекс-контейнер и вставим в него три флекс-элемента. Также увидим, как можно повлиять на размеры элементов, добавив к ним больше содержимого, и поиграв с некоторыми значениями свойств.
У нас есть широкий красный флекс-элемент, за ним идут маленький зелёный и маленький синий элементы.
Вот соответствующий код из этого примера.
Свойство flex-grow устанавливает коэффициент роста флекс-элемента, который определяет, насколько элемент будет вырастать относительно других флекс-элементов (после распределения свободного пространства).
Начальное значение этого свойства равно нулю, поэтому у двух других элементов коэффициент роста равен нулю (поскольку для этих элементов мы не использовали свойство flex-grow). Это приводит к тому, что красный флекс-элемент увеличивается настолько, насколько это необходимо чтобы занять доступное пространство. Два других элемента сжимаются до тех пор, пока их размер не будет соответствовать их содержимому, и не более.
Добавление содержимого
Вы наверное удивились, почему мы просто не установили ширину красного элемента с помощью свойства width? Да, мы могли бы это сделать, но в таком случае я не смог бы показать вам следующий фрагмент…
Флекс-элементы могут увеличиваться и уменьшаться в зависимости от их содержимого.
Всё, что я сделал, это добавил немного текста к синему элементу и он расширился, чтобы соответствовать новому содержимому. На самом деле текста так много, что красный элемент полностью сжался, чтобы соответствовать собственному содержимому, и не более того.
Вот что я имел в виду, когда говорил, что коэффициент роста определяет, насколько элемент будет расти после распределения свободного пространства. Добавив больше содержимого к синему элементу, мы эффективно удалили доступное свободное пространство и красному элементу некуда стало расти.
Высота синего гибкого элемента также выросла для размещения нового содержимого. И что важно, два других элемента также соответственно увеличили свою высоту. С флексбоксами всё это происходит по умолчанию, что избавляет нас от необходимости настраивать высоту и ширину, чтобы все блоки выглядели одинаково.
Изменение ширины
Итак, после того, как я показал вам, что не нужно устанавливать ширину флекс-элементов, давайте посмотрим, что произойдёт, если мы всё-таки установим ширину.
Флекс-элементы могут увеличиваться и уменьшаться в зависимости от их содержимого.
Как и ожидалось, ширина синего элемента стала заданной. Но поскольку размер синего элемента уменьшился, красный элемент снова вырос, но не настолько, чтобы занять доступное свободное пространство.
Итак, теперь мы начинаем понимать, почему это называется гибкой вёрсткой. Наши флекс-элементы гибкие и они рады приспособиться к тому, что происходит вокруг них.
Вы, наверное, можете себе представить, как легко сделать следующий шаг и создать базовый шаблон для макета веб-сайта. Итак, давайте создадим его прямо сейчас.