HTML верстка сайта. Урок 5. Делаем внутренние страницы сайта

Автор Maksim Inshakov
HTML верстка сайта. Урок 5. Делаем внутренние страницы сайта

Приветствую всех в этом видео с вами школа онлайн обучение веб-разработке vip-gdz.ru и в этом уроке мы продолжаем серию видеоуроков по созданию персонального сайта портфолио прошлых уроках мы уже.

Северстали несколько секций заголовок секцию с работами и секцию с подвалом. Сегодня мы займемся оптимизация данной странице во-первых мы добавим плавный эффекты для ссылок чтобы они леска не меняли свои цвета планы изменили цвет или кнопка планы изменили свой цвет далее мы добавим отдельные страницы вот до того чтобы по клику открывалась отдельная страничка с картинкой работы которые мы хотим показать посетители нашего сайта и после оптимизирована данную страницу под iPod экраны с меньшей шириной экрана с меньшим разрешением сейчас если уменьшить размер окна то мы видим вот такие баги фон заканчивается там где началась 100% ширины окна браузера после этого он заканчивается, но контент у нас ещё есть — это происходит из-за того, что ширина блока контейнер у нас прописано фиксировано 1140 пикселей и если размер экрана меньше чем 1140 то контент не влезает и выходит за его пределы над этим. Мы тоже поработаем.

Давайте сначала займёт плавными переходами для ссылок и для кнопки переходим редактор.

Я перешёл в файл майонез перехожу в конец файла где у нас описаны стили для кнопки и чтобы был плавный переход необходимо использовать такое свойство как transition транзишн двоеточие и далее укажем время перехода 2 секунды и тип анимации и зовут сохраняю приду обновлю и теперь видно, что кнопка более плавно меняет свой цвет сделаем такой же свойства для ссылок для иконок копируй — это свойство transition нахожу твоя фото слушала который по умолчанию эти ссылки на все является белыми. Но они у нас меняются на жёлтой сохраню. Кстати если в редакторе brackets поставить курсор назначение светом то он в итоге подсказывает какой именно этот и так я оставил transition также для ссылки можно сделать следующие если — это можно назвать каком вверху страницы в общем прописать для всех ссылок на странице transition плавный переход за 2 секунды таким образом ссылки у нас будут иметь плавные изменения. Давайте обновим страницу и проверим иконки у нас теперь тоже плавно изменяется если на виду на ссылку. Маркет organica она тоже теперь изменяется как. Мы помним и не задавали плавный переход для ссылок в разделе портфолио, но мы прописали — это в общем для всех ссылок на странице поэтому теперь даже можно убрать вот эти плавные переходы для для иконок социальных потому как — это свойство просто дублируется и в принципе тоже самое можно выбрать для класса батон потому, что он уже потому, что у нас переменка ссылки ну мы его применение к примеру не снег ссылки, а клиенту формы то. Пускай остаётся transition чтобы она там тоже работал далее. Давайте создадим отдельные страницы для каждой работы в портфолио сделаем — это следующим образом открой сайт бар popkees сайт портфолио. Я хочу создать новую страницу новый файл у меня создается в папке с, но я хочу создать его popkees сайт портфолио. О'кей я. Открой страницу. Яндекс HTML Dash Full Control Plus он создать новый документ нажму controls и теперь вот в папке сайт-портфолио создам новую страницу назову её горка органика . Estel то есть данная страница будет отвечать за работу с картинкой для проекта органика и здесь внутри этой странице мы пишем её разметку для данной работы и на неё же мы сделаем ссылку разделе портфолио и. Так начинаем мы с опять же с базовой разметки для HTML страницы для того чтобы не писать её каждый раз заново и в будущем более быстро писать HTML не набирать все теги заново, а использовать сокращения для них можно воспользоваться специальными расширить одну из таких расширение называется Kombat я уменьшил размер свернул браузер и уменьшить размер редактора чтобы все видели перейду в меню файл. Выбирай пункт менеджер расширений. Дарья что. Вы должны сделать подождать пока она загрузится. Перейти в раздел доступные перевести в поиске название расширение имеет он её найдёт и установить его к себе в. Редактор он у меня уже установлен просто пока деактивирован у вас-то. Кнопка будет активно вы нажмете установить и он восстановится. У меня есть, но он пока деактивирован я его активирую ножной мэйбл и. Закрой — это окно расширениями. Теперь вычтем его страницы чтобы вручную не набирать doctype HTML Tag Body META charset utf-8 и тотал просто написать! и нажать там и всё — это создаст автоматически. Это происходит потому, что расширение emmet знает такую команду как!! набран в документе у которого расширение. HTML и после мы нажали Tab то — это разворачивается вот такую стартовый шаблон для HTML страницы очень удобно поменяю н. Наруто как у нас русский виду здесь название работы органика или макет организм не имеет для нас пока большого значения и далее внутри тега Body я пишу контейнер и помещусь здесь картинку и кнопку назад чтобы с этой странице можно было вернуться обратно на главной создам div. Адам указ портфолио single-page будет у нас такой контейнер внутри этого общего портфолио single-page пропишу disclose эм-контейнер он у нас уже есть описаны ранее внутри контейнера укажу картинку Image attributes путем. Где в которой укажу путь картинки имидж имидж портфолио портфолио Big и выберу сайт органика джипег также ухожу альтернативное описание картинки на случай если она не загрузится то пользователь увидит который указан в этом attribute.

0 комментариев
0

Читайте также