Настройка HTML шаблона

Настройка HTML шаблона

От автора: вы купили HTML-шаблон. Но прежде чем загружать его на сервер, необходимо его настроить. И вот проблема – вы почти не разбираетесь в коде и не уверены, как это сделать. Не волнуйтесь, в этой статье мы расскажем вам весь процесс настройки html шаблона.

Мы предполагаем, что вы ни разу в жизни не видели ни одной строки HTML кода, не говоря уже о его редактировании. Так что, неважно насколько вы новичок, мы вам расскажем, что делать на каждом этапе. Начнем с самого начала

Что такое HTML?

С технической точки зрения ответом на этот вопрос будет «Язык разметки гипертекста». Но так как нам нужно всего лишь настроить шаблон, то вы можете определить HTML как серию открывающихся и закрывающихся тегов, вот так:

<h1>  </h1>

Теги обозначаются символами < и >, а закрывающие теги всегда пишутся со знаком /. Между тегов расположен контент, вот так:

<h1>Джон Смитт, Front End разработчик</h1>

Но иногда встречаются и одинарные теги без закрывающей пары, как, например, этот тег:

<img src="mypic.jpg">

Разные теги создают разный контент на веб-странице. Пример выше <h1></h1> создает крупный заголовок «Джон Смитт, Front End разработчик», а пример <img> отображает файл изображения «mypic.jpg». Чтобы редактировать HTML-шаблон вам необходимо знать, какой тег отвечает за ту часть страницы, которую вы хотите изменить, как найти его в коде, и как его отредактировать таким образом, чтобы он показывал то, что хотите вы.

Найдите себе редактор кода

Редактировать HTML код вполне можно и в Notepad или схожей программе, но обучение пройдет более гладко, если вы подберете себе подходящий редактор кода. Одна из главных причин – ваш код будет подсвечиваться разными цветами. Немного позже вы поймете, что так код намного легче читать и редактировать. Я рекомендую работать в Sublime Text. Загрузить его можно по ссылке: https://www.sublimetext.com/3

Загрузите и откройте ваш HTML-шаблон

Загрузите купленный вами шаблон – в уроке мы будем работать с Clean CV.

Большинство шаблонов запакованы в ZIP, поэтому вам придется их распаковать. Поройтесь в папках шаблона и найдите там index.html или index.htm. В нашем шаблоне CV файл index.html расположен в папке 01.html-website.

Теперь откройте этот файл в Chrome. Даже если он не является у вас браузером по умолчанию, пожалуйста, в рамках этого урока работайте в нем, так как мы будем использовать инструменты, встроенные в браузер, которые помогут нам с редактированием кода.

Определите часть кода которую хотите изменить

Если вы в первый раз редактируете шаблон, постарайтесь не сильно погружаться в настройку цвета шаблона. Для этого вам придется изучить CSS, язык, отвечающий за стили. Если вы новичок сосредоточьтесь на чем-то одном, и лучше всего начать с HTML. Для начала взгляните в Chrome на свой шаблон и определите, какие элементы и изображения вы хотите изменить. Можете составить список, чтобы вы шли по нему и вычеркивали пункты. В нашем шаблоне CV мы хотим исправить:

Имя

Профессию

Личное изображение

Ссылки на социальные сети

Контактную информацию

CV секции: «Профессиональный профиль», «Опыт работы», «Технические навыки» и «Образование»

Текст авторских прав

После того, как мы составили список изменений, мы можем найти соответствующие HTML теги в коде. Начнем с имени.

Найдите тег через инспектор

Кликните правой кнопкой мыши на имени «John Smith» и нажмите просмотреть код:

В браузере должна открыться такая панель:

С помощью этой панели мы можем смотреть код в интерактивном режиме. Наведите курсор мыши на строку с <h1>…</h1> (заголовок первого уровня), и секция с именем подсветится, как на скриншоте выше.

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

Теперь откройте тег h1, кликнув на маленький треугольник слева. Тег раскроется, и внутри вы увидите контент, т.е. John Smith <small>Front End Developer</small>.

Надпись совпадает с той, которую вы видите на экране, значит, вы правильно нашли код.

Отредактируйте тег в HTML

Теперь необходимо отредактировать HTML файл. Откройте файл index.html в Sublime Text. Вы увидите что-то типа:

Вам необходимо найти код, который вы видели в панели разработчика Chrome. Прокручивайте файл, пока не наткнетесь на этот код на строках 61-64.

Можно отредактировать контент между тегов и заменить имя и профессию на свои. Сперва, изменим имя John Smith:

Затем замените профессию в тегах small Front End Developer на свою.

Сохраните файл и обновите страницу в Chrome. Изменения должны вступить в силу:

Отредактируйте остальной контент

Теперь вы поняли основной процесс:

Инспектируете контент, который хотите изменить

Находите соответствующий тег

Находите эти теги в HTML файле

Редактируете код

Повторим данный процесс и отредактируем оставшиеся теги.

Добавляем свое изображение

Далее нам необходимо добавить свое изображение слева от имени и профессии. Правый клик мыши на изображении – просмотреть код – и находим соответствующий тег:

<img src="_content/140x140.png" alt="">

В инспекторе можно заметить, что данная строка находится прямо над той, которую мы уже отредактировали:

Вернитесь в HTML файл и найдите этот тег на 59 строке:

В этом теге необходимо изменить значение атрибута src, который находится внутри тега img. Вам нужно заменить текст в кавычках, необходимо указать полный путь к вашему изображению. Создайте свое изображение размером 150px х 150px (не обращайте внимание, что старый файл 140×140.png, размер на самом деле 150х150). Переместите изображение в папку «_content», которая расположена в той же папке, что и индексный файл.

Теперь замените значение «140×140.png» атрибута src в HTML файле на полный путь к вашему файлу, который хранится в папке «_content». Проверьте правильность расширения, оно должно совпадать с вашим, т.е. «png» / «jpg»:

Сохраните файл, обновите страницу и вы увидите свое изображение:

Редактируем ссылки социальных сетей

Теперь давайте отредактируем ссылки социальных сетей в верхнем правом углу шаблона. Все как и раньше, кликаем правой кнопкой мыши на иконке, нажимаем просмотреть код. В окне находим строку, которая выше подсвеченной и видим, что в ней есть текст «facebook-icon». Мы используем этот текст для поиска кода в HTML файле.

Возвращаемся в Sublime Text, нажимаем CTRL + F и запускаем поиск по фразе «facebook-icon». Текст будет найден на строке 75.

Тег a на 75 строке создает ссылку для иконки, а атрибут href внутри тега a задает адрес для перехода. Необходимо заменить этот адрес на свой Facebook аккаунт (к примеру, https://www.facebook.com/mylink). Замените символ #, который пишется по умолчанию, на свой адрес. Затем проделайте то же самое для Twitter на строке 79, Google+ на строке 83 и LinkedIn на строке 87.

Если вы хотите удалить некоторые иконки социальных сетей, выделите их от тега <a> до закрывающего </a> и удалите этот код. Сохраните и обновите страницу. Теперь при клике на иконки вы будете переходить на правильные адреса.

Редактируем контактную информацию

Давайте отредактируем контактную информацию прямо под иконками социальных сетей. Начнем с инспектирования слова Email, чтобы мы могли определить расположение секции в коде. Обратите внимание на подсвеченную строку и на ту, которая под ней. По ним мы сможем найти секцию контактной информации в HTML коде.

В редакторе Sublime Text нажмите CTRL + F и вбейте в поисковую строку «Email». Необходимо найти слово «Email», которое будет окружено именно теми тегами, которые мы видели в инспекторе. Результат находится на строке 94. Подсвеченный адрес электронной почты по умолчанию john@sitename.com указан два раза:

Замените данные значения на свой адрес электронной почты. На следующей строке можно заменить номер телефона, а еще одной строкой ниже можно указать свой сайт:

Редактируем CV секции

Давайте перейдем к CV секциям шаблона. В шаблоне их несколько, мы проинспектируем каждую из них, чтобы вы знали, как найти их в коде. Также вы закрепите свои навыки передвижения по коду через инспектор. Прокрутите веб-страницу до секции Professional Profile, кликните правой кнопкой мыши по параграфу текста и просмотрите его код.

В инспекторе будет подсвечен тег p – с помощью этого тега можно создавать параграфы текста.

Теперь нам необходимо узнать, как выглядит вся CV секция, а не только сам параграф. Если в инспекторе кликнуть на одну строку выше параграфа, то вы увидите, что весь текст опять подсвечивается:

Это говорит нам, что каждая секция кода обернута в тег <div class=»cv-item»>…</div>. Div – сокращение от division (разделение), данный тег используется для контроля и стилизации макета. Теперь давайте проинспектируем заголовок секции Professional Profile:

Сперва вы увидите просто еще один набор div’ов, просто заголовок расположен внутри этого тега. Кликните по маленькому треугольнику слева для раскрытия кода. Делайте так до тех пор, пока не увидите текст «Professional Profile», который вы ищите. Текст будет обернут в теги h2, теги заголовка второго уровня:

Теперь мы знаем, как выглядит код CV секции и можем редактировать его через Sublime Text. Кликните в самой верхней части HTML документа, чтобы начать поиск с самого начала. Нажмите CTRL + F и вбейте «cv-item». Ищите, пока не встретите <div class=»cv-item»>. Этот код идет сразу после <h2>Professional Profile</h2>.

Теперь вы можете заменить текст Professional Profile на свой. Каждый параграф текста размещайте в тегах <p>…</p>. Когда закончите, проверьте, чтобы в открывающем теге последнего параграфа текста был атрибут class со значением last, вот так <p class=»last»>…..</p>. Данный класс прописан в файле стилей шаблона и нужен для правильной настройки отступа после секции.

Если теперь сохранить HTML документ и обновить страницу, то верхние две секции будут полностью обновлены.

Осталось отредактировать остальные секции точно так же, как и с секцией Professional Profile. Проинспектируйте каждую часть секции, чтобы знать, что искать в коде. Проинспектируем должность:

Период работы:

Маркированный список:

Проделайте все то же самое, что делали с секцией Professional Profile и измените оставшиеся секции. Чтобы отредактировать должность, период работы или маркированный список, найдите код, который вы видели в инспекторе. Все точно так же, как и раньше. Для создания параграфа используйте тег p. Так же как и с секцией Professional Profile, если секция заканчивается параграфом, добавьте class=»last» (<p class=»last»>…</p>). Замечание: Если вы хотите добавить новую CV секцию или удалить существующую, найдите полный код секции в инспекторе.

В этом примере вся секция находится в теге <div class=»cv-item»>…</div>. В коде вы можете найти весь блок и скопировать его, чтобы создать еще одну секцию или удалить существующую.

Редактируем текст авторских прав

После редактирования CV секций нам осталось изменить последний пункт в списке – текст авторских прав в футере. Мы будем использовать ту же тактику. Кликаем правой кнопкой мыши на тексте и просматриваем его код:

Затем находим нужный код в HTML файле и заменяем год на текущий, а имя на свое.

Вот и все!

Мы закончили! Только что вы полностью настроили HTML шаблон под свой контент. Надеюсь, в будущем вы будете чувствовать себя намного увереннее при редактировании кода. Может быть, наш шаблон был и прост, главное помните, что процесс редактирования всегда одинаков и не зависит от сложности шаблона. Просто инспектируйте шаблон и находите код той части, которую хотите изменить. Находите код в HTML файле и редактируйте его. Если во время редактирования вам встречаются неизвестные теги, пусть они не пугают вас. В сети полно информации, которая поможет вам запомнить, что каждый тег делает.

Автор: Kezz Bracey

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Владимир

    Начало обалденное —

    «Вы создали HTML-шаблон. Но прежде чем загружать его на сервер, необходимо его настроить. И вот проблема – вы почти не разбираетесь в коде и не уверены, как это сделать.»

    Интересно, как тогда шаблон создавался?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree