В данной статье мы покажем, как можно самостоятельно и быстро сделать небольшой тематический сайт для школьного проекта. Рассматривать этапы данного процесса будем на примере сайта для проекта, связанного с экологией и климатом:
Данный материал будет полезен и старшеклассникам, которые выполняют индивидуальный проект по созданию сайта. Это может быть проект по информатике или другому предмету.
Сайт будет статическим. Это означает, что на сайте не будет системы управления содержимым (CMS) типа WordPress или Joomla: всё содержимое и HTML-код оформления сайта будет находиться в отдельных файлах. Для небольшого сайта этого вполне достаточно, и для просмотра такого сайта не потребуется никакого дополнительного программного обеспечения, кроме стандартного веб-браузера.
В статье приводятся все этапы создания сайта: от проектирования его структуры до наполнения контентом.
Что потребуется для создания сайта
- Любой веб-браузер (Google Chrome, Opera, Mozilla Firefox и пр.). Тот, которым вы обычно пользуетесь. В нём мы будем просматривать страницы будущего сайта.
- Доступ к сети Интернет. Наш сайт будет использовать современные шрифты и библиотеки, которые будут загружены из Интернет. Если устройство, на котором будет просматриваться сайт, не имеет выхода в Интернет, то сайт может отображаться неправильно.
- Бесплатный текстовый редактор Notepad++. Скачать можно с официального сайта https://notepad-plus-plus.org/downloads/. Этот редактор похож на обычный Блокнот из стандартного набора программ Windows, но удобнее и функциональнее.
- Знать и уметь копировать и переименовывать файлы, работать с архивами (распаковывать файлы из архива). Готовые HTML-шаблоны публикуются в Интернет в виде ZIP-архивов, которые надо распаковать на свой компьютер.
- Потребуются лишь поверхностные знания языка разметки HTML.
Как будем делать сайт
Общий план работ по созданию сайта будет следующим:
- Будем использовать готовый и бесплатный HTML-шаблон для многостраничного сайта. Это, во-первых, существенно сэкономит время создания сайта и, во-вторых, гарантирует его презентабельный внешний вид и адаптивность к разным типам устройств: от обычных компьютеров до смартфонов.
- Продумаем структуру сайта: количество страниц, их названия и содержание. От этого этапа зависит набор пунктов меню на сайте.
- Обычно в архиве с шаблоном присутствует несколько HTML-файлов. Каждый из них — отдельная страница сайта. Всё, что повторяется на всех страницах (заголовок сайта, слоган, логотип, меню и пр.), должно быть одинаково оформлено в соответствующих HTML-файлах. Чтобы не выполнять одну и ту же работу несколько раз, будем менять код только в одном файле (index.html). Затем этот файл скопируем и вставим в папку с сайтом столько раз, сколько у нас останется страниц для оформления.
Выбираем и скачиваем шаблон
Выбрать бесплатный шаблон для сайта можно на сервисе https://www.free-css.com/ (пункт меню Free CSS Templates).
Выберем https://www.free-css.com/free-css-templates/page269/diagoona и посмотрим его "в действии" (кнопка LIVE DEMO):
Скачайте архив с шаблоном на свой компьютер с помощью кнопки DOWNLOAD.
Перейдите в каталог со скачанным архивом шаблона и распакуйте его в свою рабочую папку. Перейдите в эту папку (templatemo_550_diagoona):
Откройте файл index.html в браузере и проверьте шаблон сайта. Если всё в порядке, то переходим к следующему этапу.
Проектируем структуру
Структура вашего конкретного проекта может быть другой, но для примера используем следующий набор разделов сайта:
- Главная страница. Здесь будут размещены основные сведения об экологии, термины и определения. Файл страницы — index.html.
- Кризисы и проблемы. Описание основных экологических проблем и причин, к ним приводящим. Файл страницы — problems.html.
- Экология моего города. Состояние экологии в вашем городе. Файл страницы — mycity.html.
Каждый раздел сайта — это отдельная страница и отдельный HTML-файл. Имена будущим файлам можно дать другие, но следует помнить правила:
- Имя файла для главной страницы должно быть index.html.
- Имена файлов должны быть записаны английскими буквами. Можно использовать символы подчёркивания или дефис для разделения отдельных слов в составе имени файла (при желании).
На сайте должно присутствовать меню, каждый элемент которого ссылается на соответствующую страницу. Меню должно быть одинаковым для всех страниц сайта.
Название сайта, его меню и контент страницы можно менять в любом порядке, это не повлияет на конечный результат.
Удаляем лишнее из шаблона
Мы создадим собственные HTML-страницы для сайта. В качестве основы будем использовать файл index.html, в котором будем менять название сайта, меню и пр. Поэтому другие HTML-файлы нам не понадобятся.
Откройте папку с сайтом и удалите все html-файлы, кроме файла index.html:
Заголовок сайта (тег title)
Правой кнопкой мыши кликните на файле index.html и выберите пункт Edit with Notepad++.
Находим следующий код в файле:
<title>Diagoona HTML CSS Template</title>И меняем его на другой:
<title>Экология города</title>Текст из тега title будет отображаться в названиях вкладок браузера при просмотре веб-страниц сайта:
"Шапка" сайта
Шапкой сайта называет место в верхней части его страниц. Обычно здесь расположено название, слоган сайта и основное меню со ссылками на страницы.
Заголовок и слоган
Если вы ещё раз откроете шаблон сайта в браузере, то увидите, что его название (DIAGOONA) и слоган (new bootstrap template) расположены друг под другом:
В файле index.html нам надо найти вот этот код:
<div class="media-body">
<h1 class="tm-sitename text-uppercase">diagoona</h1>
<p class="tm-slogon">new bootstrap template</p>
</div>И изменить его следующим образом (при этом теги и их атрибуты мы не удаляем):
<div class="media-body">
<h1 class="tm-sitename text-uppercase">Экология города</h1>
<p class="tm-slogon">сайт об экологии моего города</p>
</div>
Сохраните файл, откройте его в браузере и проверьте внесённые в файл изменения:
Основное меню
В меню шаблона сайта присутствует следующее меню:
В файле index.html нам надо найти код, отвечающий за вывод этого меню:
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
</li>
</ul>
В найденном фрагменте нам надо изменить названия пунктов меню и имена файлов, которые будут загружаться после выбора конкретного пункта.
Все эти названия и имена файлов мы определили при проектировании сайта. Названия пунктов меню — это то, что находится до закрывающего тега </a>. Имена файлов для страниц — то, что находится в атрибуте href.
При этом, один из пунктов мы закомментируем: так оно физически не удалится из файла, но не будет отображаться при просмотре в браузере:
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
</li>
<!--<li class="nav-item">
<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
</li>-->
</ul> Если для вашего проекта требуется, наоборот, больше пунктов, то просто скопируйте фрагмент кода какого-нибудь пункта из меню, вставьте в общий список и точно так же замените его название и имя файла.
Сохраните изменения в файле и откройте его в браузере:
Если кликнуть на любом пункте меню, кроме Главная, то вы увидите сообщение об ошибке в браузере:
Так происходит из-за того, что мы указали новые имена файлов для страниц, но в реальности их ещё в папке с сайтом не существует. Это нормально. Позже мы создадим все нужные для сайта файлы.
"Подвал" сайта
В самом низу нашей страницы присутствует информация, которая отображается на всех его страницах. Данная область называется подвалом сайта:
Находим место в файле index.html, где присутствует этот текст:
<footer class="tm-site-footer text-right">
<p class="mb-0">Copyright 2020 Diagoona Co.
| Design: <a rel="nofollow" target="_parent" href="https://templatemo.com" class="tm-text-link">TemplateMo</a></p>
</footer>
Заменим этот текст на свой собственный. Мы указали название сайта, а вы можете вставить своё имя и/или адрес электронной почты:
<footer class="tm-site-footer text-right">
<p class="mb-0">Copyright 2021 Экология моего города</p>
</footer>
Откройте страницу в браузере и проверьте, всё ли правильно:
Добавляем контент
Посмотрим на текст главной страницы в браузере:
Найдём код в файле index.html, который включает данный текст:
<section class="tm-content">
<h2 class="mb-5 tm-content-title">Diagoona HTML Template</h2>
<p class="mb-5">Diagoona is provided by TemplateMo website. You are allowed to use this template for your websites. You are NOT allowed to redistribute this template ZIP file for a download purpose on any template collection website.</p>
<hr class="mb-5">
<p class="mb-5">Diagoona is Bootstrap v4.4.1 layout. This BG is 50% transparent. You can set the background images auto play settings (true or false in line number 33) in templatemo-script.js file in js folder.</p>
<a href="about.html" class="btn btn-primary">Continue...</a>
</section>В данном коде нам надо изменить:
- Заголовок: текст, который находится внутри тега h2. Сам тег h2 и его атрибуты не меняем.
- Текст страницы: код, который находится после заголовка и до закрывающего тега section. При этом после вставки нового текста разметить его на абзацы необходимо при помощи тегов <p class="mb-5″> и </p>, чтобы новый текст выглядел так, как это задумано автором шаблона.
Элемент <hr class="mb-5″> служит для отображения горизонтальной черты на странице. Вы можете или удалить этот элемент, или использовать в своём тексте столько раз, сколько хотите. Для этого просто выделите этот код, скопируйте и вставьте туда, куда необходимо.
После замены текста должно получиться что-то наподобие:
<section class="tm-content">
<h2 class="mb-5 tm-content-title">Экология</h2>
<p class="mb-5">Экология — наука о взаимодействиях живых организмов между собой и с их средой обитания.</p>
<hr class="mb-5">
<p class="mb-5">Экология, как комплекс наук, тесно связана со всеми естественными науками.</p>
<hr class="mb-5">
<p class="mb-5">В настоящее время всё чаще под экологическими проблемами понимаются вопросы охраны окружающей среды.</p>
</section>Посмотрим на страницу в браузере:
Поздравляем! Основная работа по созданию сайта уже сделана, и осталось совсем-совсем немного!
Создание остальных страниц сайта
Остальные страницы нашего сайта будут выглядеть точно так же, как и главная страница (файл index.html). Единственное отличие состоит в том, что контент будет другим.
Поэтому нам просто надо скопировать файл index.html столько раз, сколько у нас осталось разделов, переименовать их и заменить текст для контента в каждой странице.
Создание файлов
Скопируйте файл index.html два раза (столько разделов-страниц у нас осталось):
Переименуйте добавленные файлы в соответствии с проектом сайта (problems.html и mycity.html):
Теперь, если вы не допустили опечаток ни в именах файлов, то ошибок при просмотре сайта в браузере и клике на любом из пунктов меню возникать не будет.
Редактирование контента
Но для завершения работ над созданием сайта нам надо заменить контент у созданных страниц.
Для этого открываем файлы problems.html и mycity.html в редакторе Notepad++, ищем места, где находится контент и заменяем его на новый.
Фрагмент кода для файла problems.html:
<section class="tm-content">
<h2 class="mb-5 tm-content-title">Кризисы и проблемы</h2>
<p class="mb-5">Текст о кризисах и проблемах...</p>
<p class="mb-5">Ещё текст о кризисах и проблемах...</p>
</section>Фрагмент кода для файла mycity.html:
<section class="tm-content">
<h2 class="mb-5 tm-content-title">Экология моего города</h2>
<p class="mb-5">Текст про экологию моего города...</p>
<hr class="mb-5">
<p class="mb-5">Ещё текст про экологию моего города...</p>
<p class="mb-5">И заключение...</p>
</section>
Всё! Теперь если вы посмотрите на созданный сайт в браузере, то все страницы должны открываться.
Последние штрихи для отличников и перфекционистов 🙂
Когда вы просматривали созданный сайт в браузере, то, наверное, обратили внимание на то, что на какой бы пункт вы не кликнули, всегда подсвечивается пункт меню для Главной страницы:
Чтобы всегда подсвечивался активный пункт, надо кое-что изменить в коде для меню сайта. Эти изменения необходимо сделать в каждом из двух файлов. Файл index.html не трогаем, так как там всё в порядке.
Как можно заметить, за подсветку активного пункта меню отвечает класс active в коде гиперссылки:
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
В других пунктах меню такого класса нет. Поэтому для каждой из двух страниц (файлы problems.html и mycity.html) добавим класс active в код соответствующего пункта и удалим этот класс из ссылки на страницу Главная.
Код для меню файла problems.html:
<ul class="navbar-nav text-uppercase">
<li class="nav-item">
<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
</li>
<!--<li class="nav-item">
<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
</li>-->
</ul> Код для меню файла mycity.html:
<ul class="navbar-nav text-uppercase">
<li class="nav-item">
<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
</li>
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
</li>
<!--<li class="nav-item">
<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
</li>-->
</ul> Теперь при просмотре сайта в браузере активные разделы сайта подсвечиваются в меню:
Теперь вы знаете, как можно самостоятельно сделать сайт для проекта, связанного с экологией и климатом. Возможно, этот же шаблон подойдёт и для других тем.
Вы можете менять текст на страницах этого сайта, добавлять или удалять пункты меню, менять название и краткое описание сайта.
Чтобы отправить этот сайт по электронной почте, упакуйте его в ZIP-архив (или любой другой) и прикрепите архив к письму. Получателю останется только распаковать этот архив и запустить файл index.html в браузере.
Спасибо всё получилось!
А как добавть картинки в контент? Я имею в виду свои.
Для этого надо использовать тег
<img src="путь к картинке" width="ширина" height="высота" alt="альтернативный текст"/>Само изображение можно добавить в папку
imgсайта. Тогда путь этому изображению будет видаimg/image.jpg