Предыдущий ролик Следующий ролик  

Видео урок: Добавляем контейнер для контента и файлы

Создание отзывчивого веб-дизайна

Теперь мы создадим некоторые HTML файлы, которые будут содержать индивидуальный контент, основываясь на размере экрана. Давайте внутри папки myWebsite зайдем сюда и создадим здесь новую папку. Мы назовем ее Content. Теперь давайте перейдем к файлам с упражнениями. Открываем третью папку, которая называется Snippets. Берем копию a_hero_content.html. Вставляем эту копию в папку Content, которую мы только что создали. Как только мы скопировали файл, давайте переименуем его в hero_content_large. Когда все на месте, открываем файл в текстовом редакторе. Внутри этого файла у нас есть div с классом для панели.

В нем содержится все, что мы загрузим в область верхнего колонтитула нашего HTML файла. Внутри этого div у нас есть изображение, которое указывает на наш рисунок banner.jpg. Далее у нас есть другой div с классом для заголовка третьего уровня (тег h3), тегом для абзаца и другим якорным тегом с классом для вызова действия. Итак, если чей-то браузер открыт на широкий размер экрана, это будет контентом, который мы загрузим в область верхнего колонтитула. Теперь давайте перейдем в папку Content. Находим этот HTML файл. Дублируем его. На Macintosh вы можете нажать Cmd + d.

На платформе Windows вы нажимаете Copy + Paste. В любом случае, как только у нас будет дубликат, давайте переименуем его в hero_content_medium. Давайте скопируем его и откроем в текстовом редакторе. Внутри medium давайте перейдем сюда и поменяем banner_large.jpg на banner_medium.jpg. Меняем верхний колонтитул на средний размер. Мы сделаем его немного меньше, поскольку на экранах средних размеров изображение будет меньше. Переходим к контенту, и давайте сделаем заголовок немного меньше. Нажимаем Save.

Закрываем hero_content_medium и hero_content_large. Далее переходим к файлу index.html. Находим тег header. Нажимаем Return. И перед якорным тегом добавляем другой тег div. Итак, пишу div, пробел, и давайте зададим ему id равное hero. Закрываем тег div. Это будет служить целью в ситуациях, когда загружается HTML файл для большого или среднего экранов. Мы будем нацелены на этот объект и будем вставлять HTML из этих файлов внутрь этого div в области верхнего колонтитула.

После внесения этих изменений мы прикрепим JavaScript файлы, а затем создадим наш документ внутри файла design.js.