Срочные сообщения и ограничения при регистрации на GitHub По срочным вопросам пишите в общем чате, чтобы избежать потери в потоке сообщений. Отдельные сообщения могут быть пропущены из-за большого потока и задержек с проверкой перед занятиями. GitHub часто ограничивает доступ к российским доменам электронной почты и блокирует регистрацию в сети HSE. Избегайте регистрации в университетской сети; уведомление будет размещено для обеих групп.
План: Проверка образца кода и работа со страницей Наркомфина Настройка GitHub перенесена на следующую сессию. Основное внимание будет уделено анализу идеального примера кода, представленного в материалах, и использованию его в качестве справочного материала для домашних заданий. Группа переработает страницу NarKomfin: добавит контент, скорректирует структуру и оптимизирует внешний вид. Будет опубликован репозиторий с правильной структурой и всеми обучающими файлами, а на следующем занятии будут созданы персональные репозитории.
Очистите пространство проекта с помощью архивных и рабочих папок Создайте две папки: архив для предыдущих попыток и специальную папку проекта NarKomfin. В рабочей области должны быть видны только эти папки, чтобы избежать путаницы на боковой панели VS Code. Разместите проект в специальном родительском каталоге, а не на рабочем столе или среди общих документов.
Запустите в VS Code и создайте базовые файлы Откройте пустую папку NarKomfin в VS Code, чтобы убедиться в чистоте контекста. Создайте index.html и layout.css, затем вставьте предоставленный образец кода, нажав кнопку "Копировать". Проверьте перенос строк и сохраните; если что-то не так, скопируйте заново, чтобы избежать ошибок форматирования.
Перенесите список содержимого в будущее меню Список содержимого перемещен в начало, чтобы впоследствии его можно было использовать в качестве навигации по сайту. Упорядоченный список определяет основные элементы, каждый из которых заключен в li. Это создает четкую структуру для преобразования списка в функциональное меню.
Создавайте вложенные Упорядоченные списки постепенно Сначала создайте ol верхнего уровня, затем добавьте вложенные ol, к которым относятся подпункты. Тщательно отслеживайте открывающие и закрывающие теги на нескольких уровнях, чтобы избежать поломок. Используйте подсказки редактора, чтобы найти отсутствующие теги, помня, что отображаемая строка может быть приблизительной.
Семантическая иерархия заголовков и выделение Используйте ровно один H1 для заголовка страницы. Пометьте “Содержание” как H2 (или другой элемент, не относящийся к заголовку), затем используйте H3 для разделов, H4 для подразделов и H5 для подподразделений. Контролируйте жирность шрифта с помощью CSS для всех заголовков; оставьте сильные / b/ em для локального выделения внутри больших текстовых блоков.
Ссылки, абзацы, изображения и цитаты в нужных местах Создавайте ссылки с помощью a и href, размещая текст, доступный для просмотра, между тегами. Размещайте заголовки, абзацы, списки, изображения и цитаты непосредственно в тексте, чтобы сохранить структуру. Используйте кавычки для цитат, чтобы сохранить семантику.
Смотрите дерево документов: Родители, дети, братья и сестры Элементы на одном уровне вложенности являются родственными; вложенные элементы являются дочерними; их контейнер является родительским. Body является родительским для заголовков и списков, в то время как эти элементы являются родственными. Понимание этих отношений проясняет поведение селектора и область его действия.
Поддерживайте чистоту разметки: Никакого встроенного стиля Избегайте презентационных атрибутов или встроенных стилей в HTML. Не стилизуйте изображения или другие элементы в разметке; делегируйте всю презентацию CSS. Это позволяет сохранить семантику HTML, удобство сопровождения и согласованность.
Группировка и центрирование селектора с учетом ширины и полей Используйте селекторы тегов и группируйте их с помощью запятых, чтобы применять одни и те же правила к нескольким элементам. Центрируйте блоки с шириной и отступом: 0 автоматически; без заданной ширины автоматические отступы не могут центрировать элемент. Никогда не ставьте запятую в сгруппированных селекторах, так как это делает правило недействительным.
Общие базовые стили и каскадная гигиена Определите общий интервал, размер шрифта и высоту строки для абзацев, списков и кавычек. Переместите повторяющиеся свойства (например, цвет) в общие селекторы, чтобы уменьшить дублирование. Помните, что более поздние правила переопределяют предыдущие, поэтому сначала установите общие правила.
Селектор смежных элементов для точного определения расстояния между ними Селектор + нацелен на элемент, следующий непосредственно за другим на том же уровне. Оформите абзац сразу после H1 или соедините H1 + p + p, чтобы настроить второй абзац после заголовка. Более точные интервалы с псевдоклассами будут добавлены позже.
Наследование и проверка вычисляемых стилей Значение inherit указывает свойству, что оно должно принимать значение от родительского элемента. Используйте devtools, чтобы увидеть, какие свойства наследует дочерний элемент, например, цвет, определенный родительским селектором. Это уменьшает избыточность, если структура хорошо понятна.
Разделите стили в папке и задайте пути к ним Переместите CSS-файлы в специальную папку styles, сохранив HTML в корне. После перемещения layout.css стили могут исчезнуть; консоль сообщит, что файл не найден. Исправьте ссылку href на соответствующий относительный путь из index.html, чтобы восстановить стиль.
Внедрите сброс CSS для нейтрализации значений по умолчанию Создайте reset.css и вставьте стандартный параметр reset, чтобы удалить стили браузера по умолчанию. Используйте devtools, чтобы посмотреть, как правила сброса взаимодействуют с таблицей стилей пользовательского агента. Сброс упрощает оформление меню и предотвращает появление маркеров по умолчанию. Правило list-style-type: none будет применено после сброса при доработке меню.
Таблица стилей с единой записью с помощью @import и Order Создайте style.css и импортируйте reset.css, Google Fonts и layout.css, используя @import. Соблюдайте порядок сверху вниз: сначала выполните сброс, затем шрифты, затем стили вашего макета. Используйте только ссылку style.css в HTML, чтобы все импортированные стили загружались через нее.
Масштабируемая структура и традиционное именование Храните ресурсы в специальных папках: изображения, стили, шрифты и скрипты. Используйте обычные имена, такие как reset.css, layout.css и style.css, чтобы соответствовать общепринятой практике, хотя подойдут любые имена, если пути указаны правильно. Такая схема подготовит вас к более сложным настройкам, которые будут использованы позже.
Оберните меню в навигационную панель и отделите основное содержимое Вставьте меню на основе списка в навигационный элемент, чтобы изолировать навигацию. Поместите открывающийся навигационный элемент перед списком и закройте его после списка, оставив основное содержимое статьи снаружи. Подготовьте специальные файлы стилей для навигации и для текста статьи, чтобы их можно было стилизовать независимо друг от друга.
Отдельный контент и навигация с помощью семантических тегов Сохраните изменения и измените структуру HTML таким образом, чтобы все содержимое статьи размещалось в теге article, а меню - в навигационном теге. H1 остается основным заголовком статьи, а списки выравниваются по соответствующим разделам. Это семантическое разделение изменяет структуру, а не визуальные элементы, и проясняет цель.
Четко разграничьте статью в разметке Разместите открывающий тег article над H1, а закрывающий тег - непосредственно перед основным текстом. Благодаря сворачиваемым контурам основной текст теперь содержит два элемента верхнего уровня: навигационный и article. Все содержимое, относящееся к конкретной статье, остается в article, а содержимое меню - в nav.
Маркеры контрольного списка, несмотря на сброс При сбросе таблицы стилей стили списков по умолчанию удаляются, поэтому тип стиля списка может отображаться отключенным. При необходимости выберите значения для отображения маркеров, цифр, букв или фигур. Избегайте глобальных правил составления списков, которые применяются как к навигации, так и к статье, чтобы предотвратить конфликты.
Упорядочивайте стили по степени ответственности Создайте две таблицы стилей: content.css для статьи и sidebar.css для меню. Несмотря на то, что все может храниться в одном файле, разделение по назначению лучше масштабировать по мере роста проектов. Файлы меньшего размера, ориентированные на конкретные объекты, упрощают навигацию по проектам.
Перенос правил и настройка импорта Сохраняйте в layout.css только глобальные правила сайта (например, текст и объявления шрифтов), а правила, относящиеся к конкретной статье, перенесите в content.css. Импортируйте content.css и sidebar.css из одного CSS-файла, на который есть ссылка в HTML. Часто сохраняйте и проверяйте, чтобы страница отображалась как раньше.
Правила охвата статей родительскими селекторами Префиксные селекторы для article (например, article h1, article h2), чтобы они применялись только к элементам внутри article. Ускорьте редактирование с помощью выбора несколькими курсорами, чтобы добавить префикс сразу ко многим строкам. Изолированные селекторы не влияют на стили меню.
Подтвердите разделение и подготовьте стили только для навигации Текст статьи и изображения остаются стилизованными, в то время как меню теряет эти стили, что является желаемым результатом. Глобальные настройки по умолчанию по-прежнему применяются, но меню требует специальных правил. Эта четкая граница предотвращает утечку стиля между разделами.
Загрузите шрифты после сброса настроек Сначала примените reset.css, затем импортируйте выбранный шрифт, оставив системные резервные копии. Для быстрого запуска используйте Google Fonts и планируйте размещать файлы шрифтов позже, при публикации в Интернете. Правильный порядок обеспечивает согласованное использование шрифтов на сайте.
Закрепите боковую панель и задайте ее координаты Задайте навигатору фиксированную ширину и положение: фиксированное, чтобы он оставался закрепленным во время прокрутки. Помните, что это положение удаляет элемент из обычного потока и накладывает его слоями, как отдельный лист. Используйте смещения сверху и слева (например, влево: 20 пикселей), чтобы точно разместить его.
Улучшите удобочитаемость и подгонку меню Отрегулируйте размер шрифта и высоту строк, чтобы увеличить объем и улучшить разборчивость текста. Если меню слишком длинное, закомментируйте пункты третьего уровня, чтобы все поместилось на экране. Главное должно быть видно, а структура разметки сохранена.
Выделите заголовок боковой панели Оформите H2 в навигационной панели так, чтобы заголовок раздела выделялся более четко. Сделайте его визуально заметным, прежде чем изменять размер или вносить другие уточнения позже. Заметный заголовок удерживает читателя на боковой панели.
Добавьте к каждому элементу ссылку с помощью функции поиска и замены Используйте функцию поиска и замены, чтобы преобразовать каждый открывающийся li в li, за которым следует тег ссылки с пустой ссылкой. Не заменяйте все совпадения сразу, чтобы избежать непреднамеренных изменений. Повторяйте, пока каждый соответствующий элемент не будет начинаться с привязки.
Закрывайте привязки перед завершением элементов списка Найдите закрывающие теги li и вставьте закрывающие теги a непосредственно перед ними. Убедитесь, что каждая ссылка закрыта должным образом, чтобы каждый пункт меню стал доступным для просмотра. Теперь ссылки существуют с пустыми адресатами, которые можно подключить позже.
Нормализовать внешний вид ссылки Удалите подчеркивания с помощью text-decoration: none на панели навигации. Измените цвет на серый для нейтральной базовой линии. Согласованный стиль по умолчанию создает условия для применения правил, зависящих от состояния.
Создавайте отступы для элементов второго уровня с помощью дочерних комбинаторов Выберите вложенные списки с помощью прямого дочернего селектора '>', чтобы не затрагивать более глубокие уровни. Для элементов второго уровня используйте левое поле, чтобы сделать иерархию видимой. Четкие селекторы с областью действия сохраняют согласованность структуры и стиля.
Сопоставьте структуру вложенного списка Представьте себе nav как большой набор строк li верхнего уровня, где любой подсписок является внутренним списком, вложенным в родительский список li. Каждый li представляет собой строку; каждый внутренний список группирует подпункты в виде подсписка. Блоки внутри блоков - это ментальная модель для обеспечения правильности вложенности.
Добавьте обратную связь при наведении курсора с непрозрачностью и переходами Сделайте ссылки незаметными с низкой базовой прозрачностью, затем увеличьте прозрачность до полной при наведении курсора мыши. Увеличьте длительность переходов, чтобы они исчезали плавно, а не резко. Дополнительные переходы в контейнерах могут регулировать скорость исчезновения при наведении курсора мыши.
Выберите правильный элемент для цвета при наведении курсора мыши Измените цвет текста при наведении курсора мыши, используя стиль a:hover, поскольку цвет применяется к ссылке, а не к li. Сочетание изменения цвета и перехода непрозрачности создает четкую и отзывчивую обратную связь. Боковое меню становится одновременно читаемым и интерактивным.