Введение
В этой лабораторной работе вы научитесь интегрировать пользовательский файл Cascading Style Sheets (CSS) в файл index.html вашего captive portal. Хотя базовая HTML-страница функциональна, применение пользовательских стилей делает ее более профессиональной и убедительной. Вы создадите файл style.css, добавите в него правила стилизации, а затем свяжете его с вашим HTML-документом, чтобы преобразить внешний вид вашей страницы входа.
Откройте каталог вашего пользовательского портала
На этом шаге вы перейдете в каталог, содержащий файлы вашего пользовательского портала. Вся ваша работа, включая создание новых файлов и редактирование существующих, будет выполняться внутри этого каталога.
Сначала используйте команду cd (change directory) для перехода в каталог custom_portal, расположенный внутри папки вашего проекта.
cd ~/project/custom_portal
Затем используйте команду ls -l для вывода содержимого каталога. Это подтвердит, что вы находитесь в нужном месте, и покажет файл index.html, с которым мы будем работать.
ls -l
Вы должны увидеть следующий вывод, указывающий на наличие вашего файла index.html:
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
Создайте файл 'style.css' с правилами CSS
На этом шаге вы создадите CSS-файл для определения визуальных стилей вашей страницы входа. CSS позволяет управлять макетом, цветами, шрифтами и общим видом ваших HTML-элементов.
Мы создадим файл с именем style.css с помощью текстового редактора nano.
nano style.css
После открытия редактора nano скопируйте и вставьте следующий CSS-код в файл. Этот код нацелен на различные HTML-элементы для создания чистого, современного дизайна формы входа.
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
После вставки кода сохраните файл и выйдите из nano, нажав Ctrl+X, затем Y и Enter.
Свяжите таблицу стилей в вашем файле 'index.html'
На этом шаге вы свяжете только что созданный файл style.css с вашим файлом index.html. Простого создания таблицы стилей недостаточно; вы должны указать HTML-документу использовать ее. Это делается путем добавления тега <link> внутри раздела <head> вашего HTML.
Откройте файл index.html с помощью редактора nano.
nano index.html
Перейдите в раздел <head> файла. Добавьте следующую строку непосредственно перед закрывающим тегом </head>:
<link rel="stylesheet" href="style.css" />
Теперь ваш файл index.html должен выглядеть следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
Нажмите Ctrl+X, Y и Enter, чтобы сохранить изменения и выйти из редактора. Теперь ваша HTML-страница связана с таблицей стилей, и любой браузер, отображающий страницу, будет применять правила CSS.
Запустите атаку с вашим пользовательским порталом
На этом шаге вы предварительно просмотрите вашу стилизованную страницу captive portal. Вместо запуска полной сетевой атаки мы будем использовать простой веб-сервер Python для локального размещения файлов. Это позволит вам увидеть, как именно страница будет выглядеть для пользователя.
Убедитесь, что вы все еще находитесь в каталоге ~/project/custom_portal. Выполните следующую команду, чтобы запустить веб-сервер на порту 8000.
python3 -m http.server 8000
Эта команда указывает Python запустить встроенный модуль http.server, который обслуживает файлы из текущего каталога (custom_portal). Сервер будет доступен на вашем локальном компьютере через порт 8000.
Терминал отобразит сообщение о запуске сервера:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Сервер теперь активен. Оставьте этот терминал запущенным и переходите к следующему шагу, чтобы просмотреть страницу.
Проверьте применение пользовательских стилей на странице входа
На этом заключительном шаге вы проверите, правильно ли применены ваши CSS-стили, просмотрев страницу входа в веб-браузере.
Справа в интерфейсе лаборатории вы увидите рабочий стол. Нажмите на значок Веб-браузер, чтобы открыть его.
В адресной строке браузера введите следующий URL и нажмите
Enter:http://127.0.0.1:8000
Теперь вы должны увидеть вашу пользовательскую страницу входа. Вместо простой, нестилизованной страницы, она должна иметь светло-серый фон, центрированный белый блок входа с тенью, стилизованные поля ввода и синюю кнопку входа. Это подтверждает, что ваш файл style.css был успешно связан и применен.
После того как вы проверили внешний вид, вернитесь в терминал, где запущен сервер Python, и нажмите Ctrl+C, чтобы остановить его.
Резюме
В этой лаборатории вы успешно улучшили базовый captive portal, интегрировав пользовательский CSS-файл. Вы научились создавать отдельный файл .css для управления стилями, писать CSS-правила для нацеливания на конкретные HTML-элементы и связывать таблицу стилей с HTML-документом с помощью тега <link>. Предварительно просмотрев свою работу с помощью локального веб-сервера, вы смогли увидеть немедленное влияние ваших стилей, превратив обычную страницу в визуально привлекательную и более убедительную форму входа. Этот навык является фундаментальным для веб-разработки и крайне важен для создания эффективных пользовательских captive portals.