Исправление проблем отображения веб-сайта

HTMLHTMLBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом проекте вы научитесь исправлять проблемы отображения веб-сайта и обеспечивать правильный стиль и макет. Цель - взять неоконченный веб-сайт и сделать его похожим на желаемый готовый продукт.

👀 Предпросмотр

Предпросмотр готового веб-сайта

🎯 Задачи

В этом проекте вы научитесь:

  • Определять и исправлять проблемы в HTML-файле
  • Обновлять CSS-файл для применения правильных стилей
  • Обеспечивать отображение веб-сайта с желаемой шириной и макетом

🏆 Достижения

После завершения этого проекта вы сможете:

  • Анализировать и устранять ошибки в HTML и CSS-коде
  • Применять методы для правильной структуры и стилизации веб-страниц
  • Показать важность тщательного подхода к разработке веб-сайтов

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") subgraph Lab Skills html/basic_elems -.-> lab-300060{{"Исправление проблем отображения веб-сайта"}} html/head_elems -.-> lab-300060{{"Исправление проблем отображения веб-сайта"}} html/layout -.-> lab-300060{{"Исправление проблем отображения веб-сайта"}} html/doc_flow -.-> lab-300060{{"Исправление проблем отображения веб-сайта"}} html/embed_media -.-> lab-300060{{"Исправление проблем отображения веб-сайта"}} end

Настройка структуры проекта

В этом шаге вы настроите проект и откроете файлы в редакторе.

  1. Откройте редактор и вы должны увидеть следующие файлы: index.html, style.css и файлы изображений html5logo.png, css3-logo.png, nav-btn.png и evolution.png.
  2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
  3. Откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.
Скриншот незавершенного проекта

Исправление отображения веб-сайта

В этом шаге вы изучите HTML-структуру страницы и из нее найдете проблему для исправления беспорядка отображения страницы.

  1. Откройте файл index.html в редакторе кода.
  2. Просмотрите файл index.html и заметьте, что у тега <link> для CSS-файла указано неправильное имя файла. Обновите атрибут href, чтобы он ссылался на правильный файл style.css.
<link rel="stylesheet" href="style.css" />
  1. HTML-файл содержит следующие основные разделы:

    • <header>: Включает заголовок веб-сайта и меню навигации.
    • <div class="content">: Содержит основное содержание страницы, включая раздел с одним столбцом, раздел с тремя столбцами и раздел с двумя столбцами.
    • <footer>: Включает подвал веб-сайта с ссылками.
  2. Сохраните изменения в файле index.html.

  3. После исправления ошибки обновите страницу в вашем браузере, и вы увидите следующий результат:

Результат исправления отображения веб-сайта

Поздравляем! Вы успешно исправили отображение веб-сайта, обновив файлы HTML и CSS.

✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.