vod

Сайт и блог на Эгее, как я к этому пришел и как менял шрифты

Информация сильно устарела, но нового материала пока не появилось

Я почти ничего не знаю ХТМЛ и ЦСС (SCC), и вообще о веб-программировании. Но очень хочется сделать крутой сайт.  пытаюсь активно изучать все эти темы. Я очень хотел сделать сайт с портфолио и с блогом. Так, чтобы там были конские заголовки и мой шрифт.

Я сделал это!

Осталось только разобраться с фавиконом.

Фавикон — это маленькая иконка сайта, которая видна на вкладке в браузере

Учиться ХТМЛ и ЦСС

ХТМЛ и ЦСС — это языки вебпрограммирования, с помощью которых можно визуально сделать страницы, которые потом будут открываться в браузере.

На учебу, меня замотивировали вебинары Максима Ильяхова.

Вебинары лучше смотреть с ускорением в 1.5-2 раза, мне комфортно слушать Максима на скорости 2.

Первый. В нем про то «Как круто уметь верстать».

Второй. В нем про базовые-базы для верстки, для того, чтобы понять принцип.

На то, что бы ковыряться в коде и вообще «верстать не глядя», помог вебинар Людмилы Сарычевой и программа Pingendo

Сам вебинар

Бесплатный курс от HTML академии
Крутой курс, тебе дают короткую теорию и ты сразу кодишь.

Пройти курс «Учебник по HTML CSS Java»

Собрана методическая информация с примерами, нужно лишь читать, и применять к своим проектам. Читать учебник

HTML book
Большой справочник и сообщество по разным вопросам верстки. Туда нужно заходить, когда понимаешь что ты хочешь, но не знаешь как реализовать.

 

Хостинг

Работать с хостингом, мне показалось сложнее всего. Нужно разобраться и понять как работает браузер, и что на самом деле лежит на хостинге.

Хостинг — это место на круглосуточно работающем сервере. На нем лежат все файлы, которые нужны для отображения сайта. Хостинг это то, что было до облака. В него могли заливать файлы и хранить их там.

Сайт нормально отображается, когда на хостинге в специальной папке лежит специальный файл index.html. Без этого файла ничего не будет.

Смотрите как все устроено на Таймвебе. В самом начале лежит папка ilyaslusarev.ru — папка должна называться как и домен, и при этом должна быть связана с доменом. По идее папка не обязательно должна иметь такое же название как и домент, но общая практика такая. Как сделать так, чтобы под разнымми адресами в интернете открывался именно мой сайт, я ещё не разобрался.

Внутри папки ilyaslusarev.ru лежит папка public_html в него заливают все остальные папки, и файлы для отображения сайта.

Если вы хотите сделать одностраничник, то можно сделать все в одной папке, никак не структурируя информацию. Сначала у меня так и было, но потом я понял, что это утяжелит сайт и усложнит работу в принципе.

Смотрите какая логика. Файл index.html обращается говорит браузеру, чтобы отобразить картинку Х нужно открыть её в этом месте и показать на этой позиции. А заголовки надо показывать вот таким шрифтом, вот такого размера и такого цвета, все эти правила написаны воон там. При этом на разных страницах может использоваться один и тот же шрифт, одинаковые правила разукрашивания заголовков и т. д. Все картинки и таблицы стилей могут лежать в одно месте упрощая работу с файлами.

Раньше, когда был одностраничник, html говорил браузеру: «где то здесь, рядом со мной лежит файл blala.png его нужно показать на третьем экране сайта». Я создавал другую страницу, где использовал тот же файл и ту же команду. Приходилось дублировать изображения. Теперь я поменял команду в html, и теперь браузер получает такую команду: «Смотри, иди на две папки вверх и ищи папку ресурсы, там есть папка картинки, в картинках есть blala.png её нужно показать на третьем экране».

Каждая отдельная папка может быть страницей в интернете. Создали папку done внутри папки ilyaslusrev.ru получилась страница ilyaslusarev.ru/done/ Она откроется в интернете, если внутри будет лежать файл index.html

Важно! Научиться прописывать пути до нужной папки. Я на компьютере собрал аналог сайта с такой же системой, все картинки закидываю в папку, а в Пингендо прописываю адрес картинок. Путь для картинки выгляди так «img src=»../resurs/img/image.png«»

Свои шрифты на сайте и на Эгее

Даниил Клинчук (мы с ним работаем, когда создаем некоторые лендинги) посоветовал мне использовать шрифт https://fontstorage.com/font/gilroy Гилрой).

Шрифты надо скачать, и засунуть куда-нибудь на хостинге. Я засунул в папку ресурс. А вот далее, в ЦСС надо прописать, что вместо стандартных шрифтов тема оформления должна использовать шрифт, который лежит в папке на сервере. Прописывать надо ручками, залезая в код. Я создавал проект в Пингендо, поэтому пришлось отдельно открывать файлы в блокноте и прописывать правила.

@font-face {
font-family: Gilroy; /* Имя шрифта */
src: url(../resurs/font/Gilroy-Light.otf); /* Путь к файлу со шрифтом */
}

Затем в странице нужно прописать, что на весь текст нужно использовать шрифт из семейства Гилрой, который лежит в папке font.

В Эгее всё оказалось достаточно сложнее, самый полезный ролик от Вацлава Пшеновича (надеюсь, я правильно написал имя). Правда в уроке давалось объяснение, как импортировать шрифт из коллекции гуглфонтс

Чтобы поменять шрифт на свой скачанный. Нужно создать «свою» тему. Вот это как раз просто, нужно лишь создать дубликат папки с темой и дать этй папке новой название. После можно залить файлы с шрифтом и прописать в стилях нужную коллекцию шрифтов.

Для этого, нужно зайти в папку, где лежит движок Эгеи, найти папку «themes» в папке лежат паки с темами. В первый раз я просто скопировал всю папку целиком, но на самом деле, достаточно просто скопировать папки «styles» «templates» и файл «theme-info.php». В папке styles должен лежать файл main.css. Его нужно открыть, и в самом начале прописать код со своим шрифтом, там же, если включить поиск по тексту и найти h1, h2, и другие заголовки, можно прописать правила для кегля заголовков, в скачанной Эгее слишком маленький размер для заголовков.

}
@font-face {
font-family: Gilroy; /* Имя шрифта */
src: url(../resurs/font/Gilroy-Light.otf); /* Путь к файлу со шрифтом */
}

Если всё это тяжело, просто используйте Вордпрес. Он может и перегружен всякими детальками, зато понятнее.