Всем привет.
С возвращением, пришло время для еще одного примера домашней работы.
То, что мы будем делать на этой неделе, это добавить еще больше стиля
к страницам, которые вы начали стилизовать на прошлой неделе.
Поэтому еще раз цель этого задания заключается в том, что я
не хочу, чтобы вы меняли html вообще.
Я хочу, чтобы вы либо создали новую таблицу стилей, либо обновили таблицу стилей
на прошлой неделе, чтобы ее можно было использовать в трех разных html-файлах.
Когда вы начинаете, очень важно, чтобы вы выполнили первое
присвоенное одноранговое назначение.
Я собираюсь предположить, что вы сделали это, и поэтому,
когда я говорю в этом видео о различных изменениях, которые я хочу, чтобы вы сделали.
Вы можете либо изменить предыдущее домашнее задание, либо вы действительно
можете начать полностью с нуля, если вы не были довольны вашей предыдущей работой.
Итак, давайте посмотрим на до и после
этого задания, которое я хочу, чтобы вы попытались достичь.
Это была наша страница, когда мы впервые начали.
В домашнем задании, вы взяли его отсюда до сюда.
Все еще очень просто, но намного чище, потому что мы добавили цвет фона,
некоторые цветовые шрифты, и мы избавились от этих изображений.
То, над чем я хочу, чтобы вы работали на этой неделе, действительно
меняли вещи и делали их действительно стилизованными, а не просто чистыми.
Давайте взглянем на то, над чем я хочу, чтобы вы работали на третьей неделе.
Как вы можете видеть, это выглядит как совершенно другой сайт.
Изображения вернулись, я добавил фоновое изображение для панели навигации и
что-то, что не обязательно легко увидеть, когда вы просто смотрите на бумагу,
я добавил новый класс, который подчеркивает, на какой странице мы находимся прямо сейчас.
Поэтому, если вы посмотрите,
домашняя ссылка подсвечивается, потому что мы на главной странице.
Если я нажму на историю, история ссылка как это,
потому что мы находимся на странице истории, а затем так же, на странице команды.
Так это то, что мы называем текущую страницу, на которую мы смотрим.
И поэтому вы собираетесь укладывать это так, чтобы ваши зрители знали,
где они находятся на этой странице.
Так что я собираюсь пойти вперед и поговорить о каждом из тегов, которые
я хочу, чтобы вы рассмотрели, чтобы завершить это задание.
Поэтому, когда вы начнете, вы оставите HTML-код в покое,
и вы либо собираетесь создать новую таблицу стилей, либо вы собираетесь идти вперед и
обновить тот, который вы использовали раньше.
То, что вам нужно будет работать конкретно, это эти элементы.
Вам нужно работать над телом, заголовком, h, ссылками, а
затем у меня есть три класса, называемые активными, левыми и правыми, и, наконец, вы
захотите поместить эти изображения обратно в которые были в левой части страницы.
Итак, сначала давайте поговорим о теле.
По умолчанию ваши браузеры помещают какой-то отступ и маржу, но я хочу, чтобы вы
перезапишите это и поместили что-то, что будет выглядеть согласованно во всех браузерах.
Вы также можете настраивать размер текста, но это не обязательно.
Я знаю, что сделал, потому что я нашел текст слишком маленьким.
Далее перейдите к заголовку.
Первый шаг - изменить цвет фона и посмотреть, можете ли вы заставить его работать.
Затем вы хотите добавить фоновое изображение.
И если честно,
это будет самая сложная часть всего задания на домашнее задание.
Потому что иногда не всегда ясно, где вы можете найти изображения и
где вы не можете, поэтому
убедитесь, что вы проверяете некоторые другие ресурсы, если вы застряли на этой части.
Затем я хочу, чтобы вы изменили цвет шрифта и
увеличили этот размер шрифта немного больше.
Опять же, здесь что-то новое, чего ты раньше не учил.
Я хочу, чтобы вы стиль ссылок, которые находятся в разделе навигации, но
только эти ссылки.
Не все ссылки на странице.
Вам не нужно точно воссоздавать мой пример, но
я хочу, чтобы ваши ссылки были красиво распределены друг от друга,
они должны иметь некоторый цвет фона, округленные границы и без подчеркивания.
Сделай их хорошо выглядеть.
Затем убедитесь, что вы видели тот активный урок, о котором я говорил.
Вот как люди смогут узнать, на какую страницу они смотрят
без необходимости смотреть на URL-адрес.
Теперь еще одна вещь, над которой вам нужно будет работать, это идея, что наша страница
имеет левый и правый класс к ней.
Теперь, чтобы заставить вещи идти рядом друг с другом, вам нужно будет возиться с
дисплеем и, возможно, плавать в зависимости от того, как вы это реализуете.
Поэтому убедитесь, что вы измените их так, чтобы они были бок о бок, и
измените этот цвет фона для левого класса.
Возможно, вы уже сделали это в предыдущем домашнем задании, но
если вы не убедитесь, что это сделано сейчас.
Наконец, мы хотим вернуться к этим изображениям.
Во-первых, вам нужно вернуть изображения обратно, потому что,
надеюсь, в домашнем задании, вы установили их дисплей на нет, что означает, что они исчезли.
Так что положите их обратно во что-то, чтобы они упали друг на друга.
Затем убедитесь, что они сосредоточены в том левом классе.
Я не хочу, чтобы фотографии были на пути к одной или другой стороне.
И, пока вы их центрируете, убедитесь, что вы поместили немного пространства между ними,
сверху и снизу тоже.
Еще раз, мы будем использовать одноранговый грейдер для оценки вашей работы.
В отличие от ранее, оценки будут основываться на уровне завершения, и
несколько больше на том, как выглядит ваша страница.
Мы хотим убедиться, что ты не ставишь вещи,
которые трудно читать или которые действительно сливаются вместе.
Поэтому, если у вас есть шанс,
убедитесь, что вы запускаете свою страницу через несколько различных оценщиков доступности.
Так что была волна и есть лямка.
Есть разные места, куда можно пойти.
Но это действительно хорошая часть о сверстниках, ваши
сверстники могут сказать вам, действительно ли вещи не имеют лучшего цветового контраста.
Теперь опять же будут применяться соответствующие стандарты.
И это особенно важно, когда мы начинаем говорить о продвинутых селекторах.
Я обнаружил, что иногда люди бросают все, о чем они могут думать,
в свою таблицу стилей, и они просто надеются, надеются, надеются, надеются, что это сработает.
Мы снимем очки, если ты попытаешься сделать это.
Теперь последнее, что я хочу упомянуть, это то, что
я знаю, что люди кодируют на разных устройствах.
Поэтому, когда вы отправляете свой код, не стесняйтесь говорить, что мой код
действительно выглядит хорошо на большом экране, или на телефоне, или что-то в этом роде.
Забота о разных размерах экрана — это то,
что называется отзывчивым дизайном, который мы не обрабатываем в этом конкретном курсе.
Поэтому я не ожидаю, что вы создадите сайт, который отлично смотрится на каждой платформе.
То, что я ожидаю, вы действительно владеете кодом, который вы отправляете на этот раз.
Убедитесь, что вы точно знаете, что делает каждая строка, и
чувствовать себя комфортно меняя маленькие части и чувствуя, что ваша страница не сломается.
Опять же, если у вас возникнут проблемы, убедитесь, что вы попали в эти дискуссионные доски.
У вас одноклассники были очень полезны, и
я действительно хочу поощрять это общение.
Удачи.