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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

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" />

3. HTML-файл содержит следующие основные разделы:

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

4. Сохраните изменения в файле index.html.

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

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

Резюме

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