() translation by (you can also view the original English article)
Есть много способов, как создать персональный сайт - резюме.
Вы можете использовать одни из множества сайтов-конструкторов, или вы можете адаптировать для этого одну из CMS систем, такие как WordPress, Drupal, или им подобные. А так же вы можете нанять профессионального разработчика, чтобы он сделал вам сайт.
С таким количеством вариантов, трудно решить с чего начать. Более того, каждый из этих вариантов имеет свои плюсы и минусы, не говоря уже о уровнях сложности или цене, которую придется заплатить исполнителям.
Однако есть другой, отличный способ, создать свой персональны сайт - резюме, за разумное количество времени. И этот вариант - использование HTML-шаблона сайта. Его очень легко использовать и просто загрузить на сайт хостинг-провайдера.
Вот несколько самых лучших вариантов (просмотрите их быстренько, прежде чем продолжите читать):
Кроме того, код профессионального шаблона для сайта-резюме гораздо менее сложен для новичков, чем более сложный код, используемые в системах управления контентом.
В этой части серии Создание Отличного Сайта-Резюме, мы покажем вам простой процесс создания и загрузки HTML-шаблона резюме.
Следуйте за описанием, чтобы создать собственный резюме сайт и настроить его под себя - и вы сможете запустить свой сайт в самое ближайшее время.
Что Вам Нужно, Чтобы Ваш Резюме Сайт Заработал?
Прежде чем мы начнем заниматься изменениями в шаблоне, давайте рассмотрим инструменты, которые нам понадобятся, что бы установить наш HTML-шаблон и запустить его:
1. Хороший Хостинг Провайдер
Покупка доменного имени для вашего сайта - это лишь первый шаг на пути. Также вам понадобится хостинг-сервер хостинг, куда вы загрузите файлы для вашего веб-сайта. Найти хорошего хостинг-провайдера не так-то просто, хотя бы потому, что их очень много. Большинство из них, предлагают базовые услуги хостинга за 5-10$ в месяц. Некоторые предлагают неограниченный канал трафика и место, у других есть ограничения.
Следует помнить, что почти все провайдеры поддерживают использование HTML-шаблонов. При выборе хостинг-компании, прочитайте FAQ на их сайте, чтобы убедиться в качестве клиентской поддержки, в случае, если вам понадобится какая-то помощь. Вы так же должны выполнить небольшой обзор, и почитать отзывы о конкретных хостингах на независимых сайтах, чтобы узнать, на сколько пользователи удовлетворены предоставляемыми услугами.
2. FTP-клиент
После того, как вы найдете хостинг-компанию, вам понадобится FTP-клиент. FTP-клиент позволит вам загрузить ваш шаблон на сервер хостинга. Выбор программы зависит от операционной системы , установленной на вашем компьютере.
Одна из наиболее популярных программ - это FileZilla. Это бесплатная FTP программа, которая проста в использовании и доступна под Windows, Mac, и Linux.
3. Редактор Кода
Вам также понадобится текстовый редактор, чтобы внести изменения в файлы вашего шаблона. Хотя можно использовать Блокнот или TextEdit, но вносить изменения, используя редактор кода будет намного проще. В отличие от обычных текстовых редакторов редактор кода включает в себя инструменты, которые облегчают редактирование, например с использованием различных цветов для разных частей кода, за счет чего легче видеть, что вы редактируете.
В рамках этого урока я буду использовать Sublime Text, который можно использовать под Mac, Windows и Linux. а пробную версию можно скачать бесплатно. Узнайте больше о том, как работать этим популярным редактором кода:
4. HTML-шаблон и изображения для вашего веб-сайта резюме
Последние две вещи, которые вам необходимы - это ваш HTML-шаблон резюме и изображения, которые вы планируете использовать на вашем сайте.
В этом уроке я буду использовать Flatrica HTML шаблон резюме веб-сайта, показанный здесь:
Вы можете найти ваш сайт шаблон в области Загрузка вашего Envato счета после того, как вы сделали покупку. После того как вы загрузили HTML шаблон сайта, распакуйте папку и сохраните его на рабочем столе для быстрого доступа.
Говоря об изображениях, вам понадобится ваш снимок и другие личные фотографии, которые вы может захотите использовать. Вы так же можете использовать картинку для фона или паттерн, так что убедитесь, что у вас подготовлены все эти изображения на вашем компьютере, и вы готовы использовать их в шаблоне.
Как Отредактировать Содержимое Шаблона Вашего Резюме Сайта
Теперь, когда у вас все готов, пришло время настроить шаблон, используя вашу личную информацию. Давайте разберем как настроить HTML-шаблон Flatrica:
1. Структура HTML-шаблона Резюме
Прежде чем мы начнем редактировать файлы, давайте взглянем на структуру этого HTML-шаблона. Когда вы распакуйте папку, вы заметите, что в ней две папки: одна с документацией и другая с файлами шаблона.
Папка с шаблоном сайта содержит все нескольго поддиректорий.
- Colors, в которой содержится информация о цветовом коде и переменных, которые испльзуются в этом шаблоне.
- Fonts, в этой папке содержаться все шрифты.
- Images - папка в которой находятся картинки.
- Папка, которая содержит в себе код на JavaScript, необходима для нормального функционирования шаблона. В большинстве случаев, вам никогда не придется редактировать содержимое этой папки или файлы в ней, так как JavaScript обеспечивает функционирование таких элементов, как выпадающее меню, анимация, подтверждение заполнения форм.
- Папка РНР, содержит в себе код, который обрабатывает заполнение контактной формы. Вам нужно будет отредактировать только одну строку кода, чтобы добавить адрес электронной почты.
- Папка Sass содержит в себе все переменные для таблиц стиля.
- Stylesheets - содержит CSS файлы, которые нужны, чтобы вы могли настроить шаблон в соответствии с вашим стилем и брендом.
Кроме этих папок, есть так же ряд других HTML файлов: index-normal.html, index-video.html, single-blog.html и single-portfolio.html.
Помните, что ваш шаблон, не обязательно будет содержать все эти файлы и папки, однако в большинстве случаев, у вас будут такие папки как stylesheets, images, JavaScript и PHP. Так же в вашем шаблоне может быть больше или меньше HTML файлов.
2. Замена Стандартной HTML Информации в Шаблоне
Дважды щелкните по файлу index-normal.html (или index.html если вы используете другой шаблон). В результате файл откроется в вашем браузере, и так вам будет легче понять какую часть кода вам нужно отредактировать, и где ее искать в вашем HTML-шаблоне.
Если вы посмотрите на шаблон в вашем браузере, вы увидите, что вам нужно редактировать:
- Ваше имя и контактную информацию.
- Рекламный текст над кнопкой для скачивания вашего резюме.
- Различные разделы, содержащие информацию о вашем образовании, навыках, опыте, портфолио, полседних клинетах и другое.
Теперь, когда вы знаете, что вам нужно изменить, вы можете искать соответствующие места в коде.
Щелкните правой кнопкой мыши по имени John Doe и выберите Inspect. Вы заметите выскакивающую панель внизу, которая показывает кусок HTML кода из нашего шаблона.
Линия, содержащая имя выделена в левой части панели Инспектора кода, а так же показан соответствующий стиль на правой стороне (прим. перевод.: в данном случае используются инструменты разработчика в браузере Chrome).
Как вы можете видеть на скриншоте выше, имя расположено между тегами <h4>, которые используются в HTML для создания заголовков.
В большинстве случаев, теги, как этот являются парными, т.е. есть открывающий и закрывающий тег, и между ними находится содержание, которое будет отображаться на станице сайте, вот так:
<h4>Jonn Doe</h4>
Для того, чтобы отредактировать ваш шаблон, вам нужно знать теги, которые содержат информацию, которую вам нужно отредактировать, найдите эти места в коде и отредактируйте информацию.
Откройте HTML-файл в редакторе
Теперь вренитесь назад в папку с шаблоном, щелкните правой кнопкой мыши по файлу index-normal.html и выберите в меню Open with Sublime Text (Открыть с помощью Sublime Text). И вы увидите весть HTML код, из которого состоит ваш шаблон.
Чтобы начать редактировать шаблон, вам нужно найти тот же код, который вы видели в панели Инспектора вашего бразуера.
Пролистайте вниз, до строк 150-151. Затем, щелкните между тегами <h4> и замените имя на ваше.
После этого, щелкните между тегами <h6>, удалите текст и напишите свою профессию.
Повтаряя эти шаги снова и снова, вы замените всю "шаблонную" информацию своей собственной.
Если в шаблоне есть раздел, который вам не нужен, просто удалите его. На скриншоте ниже, я выделила все в таблице Pricing и удалила эту часть кода.
Как Заменить Изображения на Ваши Собсвенные
Чтобы заменить изображения на ваши собственные, просто выберите все картинки в соответствующей папке, удалите их, и поместите туда свои изображения. Если вы следовали предыдущему совету, вы назвали изображения теми же именами, что и шаблоне, что позволяет его редактировать быстрее.
Если вы хотите добавить больше информации, выберите код в соответствующием разделе, копируйте его CTRL/CMD + C и затем вставьте ниже CTRL/CMD + V. На скриншоте ниже, я решила добавить, еще одну диаграмму для навыка, так что я выделила код, для диаграммы четвертого навыка и скопировала ее ниже:
И окончательный вариант выглядит следующим образом:
Как Изменить Вид Вашего HTML Сайта - резюме
После того, как вы поменяли всю информацию, на нужную вам, пришло время поработать над стилем вашего резюме шаблона, и сделать то, что вам понравится. По умолчанию, HTML шаблон - Flatrica, поставляется с несколькими различными стилями. Если вы посмотрите в папку со стилями, то вы можете заметить, что, в их названия вставлен цвет, который используется в данном стиле:
Вы можете быстро сменить цвет, сменив название стиля в заголовке документов, указав то стиль, который вам больше нравится. Посмторите на следующую строчку кода:
<!-- CUSTOM STYLE -->
<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">
Изменив название на style_blue.css, вы получите шаблон в новом цвете, и который выглядит по-новому.
Если вы готовы к приключениям, вы можете отредактировать таблицу стилей style.css в которой можете указать шрифты и цвета на ваше усмотрение. Например, вы можете отредактировать цвет фона в style.css, введя HEX значение (шестнадцатиричный код) для цвета который вам больше нравится.
background-color: #65b5c1;
Редактировать CSS файл, можно так же как мы редактировали HTML. Щелкните правой кнопкой по элементу, который вы хотите настроить и нажмите Inspect. Теперь вам нужно смотреть на код с правой стороны таблицы Инспектора, и затем найти тот же код в редакторе кода.
Как Загрузить Файлы Вашего Сайта на Сервер
После того, как вы изменили файлы шаблона, по своему усмотрению, вам нужно загрузить их на сервер хостинга. У вас должно быть письмо от вашего хостинг-провайдера, в котором содержится вся необходимая информация для передачи данных по FTP.
Приступая к процессу загрузки, запустите ваш FTP-клиент. Я со своей стороны, использую FileZilla. Введите информацию, которую вы получили от хостинг-провайдера, и введите ее в верхней панели, а затем нажимте QuickConnect:
Расположите папку с вашим шаблоном в левой части экрана, и щелкните по ней, чтобы развернуть ее. В нижней левой части, выберите файлы и папки и перетяните их на правую часть экрана.
Убедитесь, что вы загрузили файлы в корневую папку вашего хостинг сервера, в папку public_html.
После того, как все файлы загружены, откройте ваш баузер и введите в нем ваше доменное имя. Поздравлюя, теперь ваш новый сайт-резюме доступен в сети!
Четыре Совета Которые Помогут Сделять Ваш Резюме-Сайт Особенным
Теперь, когда вы знаете как использовать HTML шаблон резюме-сайта, предлагаю вам четыре небольших совета, которые помогу сделать ваш сайт еще более привлекательным:
- Используйте Сжатие для Картинок - Перед тем как загрузить файлы на сервер, убедитесь, что вы уменьшили размер изображений до оптимального размера. Это поспособствет быстрой загрузке вашего сайта. Вы можете использовать инструмент TinyJPG, чтобы сжать изображения без особой потери качества.
- Минимизируйте Количество Стилей и Используемых JavaScript Файлов - Так же как и с картинками, это поможет вашему сайту загружаться быстрее. Такие инструменты как CSS Minifier и JSCompress, сделают работу за вас.
- Добавьте Ссылку на Ваш Сайт в Профили в Социальных Сетях - вы усердно поработали, создавая свой сайт, теперь пришло время поделиться им с миром. Повысьте шансы вашего сайта быть увиденным, добавив его в профили в социальных сетях.
- Используйте Ссылку на Сайт как Часть Вашей Подписи в Электронном Письме - Один из лучших способов продвижения вашего сайта - это добавить его в вашу подпись к электронным письмам. Это просто, бесплатно, делается за пару секунд, и еще имеет кучу плюсов.
Настройте Ваш HTML Шаблон Сайт-Резюме
Редактирование шаблона HTML может спрева показаться пугающим, но на самом деле это не так сложно, после того как вы разберетесь в структуре шаблона и в том, что вам нужно редактировать. Если вы уделите немного времени и прочтете несколько уроков, то вы быстро разберетесь с HTML и CSS. Используйте наше руководство по настройке шаблона сайта - резюме и увеличьте ваши шансы найти отличную работу.
