Дудин Денис (Lelby)Дудин Денис (Lelby)https://teletype.in/atom/dudin19952026-09-21T03:47:13.518Zdudin1995:HJIZ8WB7EИнструкция по сайту2019-01-22T21:30:43.407Z2019-01-22T21:30:43.407Z<img src="https://teletype.in/files/50/5015c11c-60c2-4231-b6b0-8e1cd2d4fb81.png">Заходим на https://billing.sib-host.ru/billing.php
<p>Заходим на <a href="https://billing.sib-host.ru/billing.php" target="_blank">https://billing.sib-host.ru/billing.php</a></p>
<p>Вводим логин-пароль и попадаем на страницу биллинга:</p>
<figure class="m_custom">
<img src="https://teletype.in/files/50/5015c11c-60c2-4231-b6b0-8e1cd2d4fb81.png" width="1982" />
</figure>
<p>Здесь можно оплатить продление домена, изменить пароль или перейти к управлению сайтом. Нажимаем "войти в аккаунт"</p>
<p>Попадаем на страницу управления сайтом:</p>
<figure class="m_custom">
<img src="https://teletype.in/files/15/1577c8f4-3cd9-4d92-9c33-04590d39d524.png" width="2560" />
</figure>
<p>Если откроется что-то отличное от "менеджера файлов", в него можно попасть по ссылке в меню слева.</p>
<p>Заходим в папку www -> agressotango.ru (или просто в public_html, это одно и то же)</p>
<p>Открывается страница с html-файлами, каждый из которых представляет собой отдельную страницу сайта. Подробнее про html: <a href="http://htmlbook.ru" target="_blank">http://htmlbook.ru</a></p>
<figure class="m_custom">
<img src="https://teletype.in/files/5c/5c70c225-3d55-4f8f-8e51-f9fbc74d5be3.png" width="2160" />
</figure>
<p>index.html - главная страница, на которую пользователь попадает в первую очередь.</p>
<p>Чтобы изменить содержимое любой страницы, нужно предварительно скачать её текущую версию себе на компьютер. Выделяем нужный файл кликом и жмём "Скачать"</p>
<p>Открываем скачанный html-файл в любимом текстовом редакторе (Notepad, Notepad++, Sublime Text и т.д)</p>
<figure class="m_custom">
<img src="https://teletype.in/files/8d/8d5ce6cd-992a-4cd2-b903-9fbeea80114b.png" width="2560" />
</figure>
<p>Самый простой способ найти нужное место в коде - поискать по тексту на странице.</p>
<h2>Пример 1: добавить текст в бегущую строку</h2>
<p>Ищем в файле index.html по первым нескольким словам бегущей строки.</p>
<figure class="m_custom">
<img src="https://teletype.in/files/8c/8c4a9668-98fc-4856-a7f0-197335eb1019.png" width="1732" />
</figure>
<p>Тег <marquee> отвечает за бегущую строку. Подробнее: <a href="http://htmlbook.ru/html/marquee" target="_blank">http://htmlbook.ru/html/marquee</a></p>
<p>Можем отредактировать скорость движения строки (например, scrollamount="10"), добавить новый текст и т.д.</p>
<h2>Пример 2: добавить новое место проведения занятий</h2>
<p>Сначала разберемся, как выглядит код для существующих мест проведения.</p>
<p>Ищем по исходному коду фразу "Занятия в Академгородке"</p>
<figure class="m_custom">
<img src="https://teletype.in/files/51/51b62892-1d55-461f-a0aa-7fa840c37d17.png" width="2560" />
</figure>
<p>Расписание выполнено с помощью таблиц.</p>
<p>Подробнее: <a href="http://htmlbook.ru/html/table" target="_blank">http://htmlbook.ru/html/table</a></p>
<p>Рассмотрим подробнее некоторые элементы:</p>
<ol>
<li>Таблица, описывающая всё расписание целиком</li>
<li>Первая строчка расписания. Содержит "Занятия в Академгородке" и "Вираж в городе" (не влезло на экран)</li>
<li>Первая "ячейка" строчки. Содержит "Занятия в Акадегородке" и всё сопутствующую для информацию. Рассмотрим некоторые её элементы подробнее</li>
<li>Заголовок блока "Занятия в Академгородке"</li>
<li>Элемент с google-картами. Получение кода с <iframe...>-элементом рассмотрим чуть позже</li>
<li>Время проведения занятий</li>
</ol>
<p>Подробнее про все html-теги можно почитать на htmlbook</p>
<p><strong>Как получить код для вставки карты</strong></p>
<ul>
<li>Заходим на Google-карты (или любые другие, процедура почти аналогичная), вводим необходимый адрес: <a href="https://www.google.com/maps/place/Eyfeleva+Bashnya/@55.0340792,82.9032886,17.42z/data=!4m5!3m4!1s0x42dfe433111694a9:0x66937fe8da86c33f!8m2!3d55.0340854!4d82.9049272" target="_blank">https://www.google.com/maps/place/Eyfeleva+Bashnya/@55.0340792,82.9032886,17.42z/data=!4m5!3m4!1s0x42dfe433111694a9:0x66937fe8da86c33f!8m2!3d55.0340854!4d82.9049272</a></li>
<li>Нажимаем "Share"</li>
</ul>
<figure class="m_column">
<img src="https://teletype.in/files/b1/b16ce748-0868-464e-aba8-487e7cd49af1.png" width="2560" />
</figure>
<ul>
<li>Выбираем "код для встраивания", регулируем масштаб (карта вставится на сайт в таком же расположении), и копируем код (можно просто нажать "Copy html")</li>
</ul>
<figure class="m_column">
<img src="https://teletype.in/files/a0/a0ffc24b-cf4f-4c61-ab68-5abae3c08f9d.png" width="2560" />
</figure>
<ul>
<li>Вставляем скопированный код в нужное место сайта</li>
</ul>
<figure class="m_column">
<img src="https://teletype.in/files/7b/7b72e4c3-ddbb-42cc-8c22-7c88c4c8ab71.png" width="1640" />
</figure>
<h2>Как зафиксировать обновления на сайте</h2>
<p>Чтобы изменения вступили в силу, отредактированную страницу нужно загрузить на сервер. Это можно сделать, например, на странице "Менеджер файлов".</p>
<p>Важно убедиться, что мы загружаем изменения по пути /www/agressotango.ru</p>
<figure class="m_custom">
<img src="https://teletype.in/files/9a/9a7a0f68-eb43-410a-ae54-463c956389a1.png" width="2560" />
</figure>
<p>Если появится предупреждение, что файл с таким именем уже существует, нужно его перезаписать</p>
<p>Всё, после загрузки изменения сразу же отображаются по адресу <a href="http://agressotango.ru" target="_blank">agressotango.ru</a></p>
<p>Если изменения не отображаются, возможно, браузер использует закэшированную версию сайта и еще не успел обновить кэш (этот механизм работает независимо на каждом отдельном компьютере). Чтобы на своем ПК убедиться, что всё в порядке, можно принудительно перезагрузить кэш. Обычно это делается с помощью комбинации Ctrl+R / Ctrl+F5 / Cmd+R на MacOS.</p>