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

Видео урок: Файлы упражнений

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

В этом курсе содержится два набора файлов с упражнениями. Если вы являетесь премиум-подписчиком на lynda.com, вы можете получить доступ ко всем трем папкам. Если вы не являетесь премиум-подписчиком, у вас будет доступ ко второй и третьей папке. Внутри первой папки находятся исходные файлы Photoshop, не тронутые теми изменениями, которые мы будем делать в этом курсе. Внутри второй папки находятся файлы, которые мы будем добавлять в наш проект. Внутри папки CSS находится файл ie_7_and_8.css. Мы переопределим некоторые свойства CSS3, используемые в этом курсе, чтобы можно было поддерживать обратную совместимость с IE 7 и 8.

Внутри папки images находятся все измененные файлы из первой папки. Так что если у вас нет доступа к первой папке, или вы хотите пропустить раздел с Photoshop, вы можете зайти сюда и скопировать эти изображения. Они включают в себя все измененные баннеры, измененную стрелку действия и мобильную ссылочную стрелку. А внутри папки JavaScript у нас есть файл design.js. Это пустой файл, куда мы будем записывать все наши скрипты, чтобы создать отзывчивый веб-дизайн. Далее идет копия скрипта предварительной загрузки изображений из Far in Space. Мы получили разрешение от Димы Бегунова на включение этой копии в наши файлы для упражнений.

Копия jQuery 1.8, опять же, нужна для поддержки обратной совместимости с IE 7 и 8. Также у нас есть копия respond.js, который нужен для IE 7 и 8, чтобы у них была возможность прочесть CSS3 медиа-запросы и предоставить нам несколько видов верстки для разных размеров экрана. И наконец, внутри третьей папки, для фрагментов кода, у нас есть некоторый HTML контент. Это HTML, который нам нужен, чтобы динамически переключаться в области заголовка. В этом курсе я продолжу более ранний курс lynda.com, который называется "Создание отзывчивого веб-дизайна". В этом курсе мы рассказали вам, как комбинировать HTML и CSS, чтобы поменять верстку, основываясь на размере экрана пользователя, используя техники отзывчивого дизайна.

Если вы закончили тот курс, вы легко можете начать с того проекта. Вы также можете начать этот курс с любого проекта по отзывчивому дизайну, который у вас есть. Мы добавим CSS и JavaScript из файлов упражнений, а затем вы напишете свой собственный JavaScript код, чтобы поменять структуру HTML, основываясь на размере экрана пользователя. Так, мы познакомились с файлами для упражнений, теперь мы можем приступить к работе.