Как изменить готовый шаблон сайта

Скачать инструкцию с примерами HTML страниц и самим шаблоном можно по ссылке внизу страницы.

Этапы создания сайта от А до Я.
Подробное описание с иллюстрациями: Регистрация домена, работа с хостингом, размещение сайта, адаптивность, оптимизация — в одной статье.

Подготовка к редактированию шаблона.

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

— Открываем файл index_red.html в браузере. Здесь видим копию кода главной страницы сайта index.html — для наглядности. Редактировать будем другую страницу.
Обратите внимание только на то, что выделено разными цветами: меню (навигация) сайта, имена картинок (при желании), адреса ссылок на страницы (если переименуете их), основное текстовое содержание сайта (обязательно) и, так называемые, мета теги (обязательно), которые находятся в начале кода, нужны для поисковых систем — посещаемости сайта.
Менять будем только места выделенные цветом.

Переходим к редактированию шаблона.

— Открываем главную страницу index.html (папка «Ваш сайтbegin») с помощью текстового редактора и видим то, что нам предстоит редактировать. Не пугайтесь, это только при первом взгляде страшно, по мере работы присмотритесь и все встанет на свои места.
При редактировании кода используйте поиск: выделите и скопируйте код на странице инструкции и вставьте в окошко поиска редактора на редактируемой странице.

Замене подлежат: Русский текст —  ЦВЕТ , Имя картинки — ЦВЕТ , Ссылки (переходы) — ЦВЕТ

Переходим к замене контента шаблона. Не забывайте периодически сохранять и просматривать результат работы (стр. index.html) в браузере, перезагрузка окна — F5.

Редактируем основные META теги HTML страницы

<title>

Название сайта — Видно в окне браузера

</title>
<meta name=»description» content=»

Описание сайта. Будет видно в анонсе поисковых систем. Не более 200 символов

» />
<meta name=»keywords» content=»

ключевые, слова, через, запятую

» />

Мета-теги в начале страницы: title, description, keywords, являются важным атрибутом любой страницы, размещенной в Интернете.

Title — текст отображается в заголовке браузера (выше не куда). Основной источник информации о странице для поисковых систем. Влияет на поиск, а значит посещаемость сайта. Должен содержать ключевые слова без повторов.

Description — описание сайта при отображении Вашей страницы в результате поиска. Должно быть не более 200 символов. Наличие ключевых слов.

Keywords — ключевые слова, которые чаще встречаются в тексте страницы, несут смысловую нагрузку содержания страницы, пишутся через запятую, не более 7-8 слов. В самом тексте должны встречаться не более 4 раз (каждое слово) на 2000 символов, выделяться жирным, присутствовать в первом предложении и последнем.
Keywords в последнее время потеряли свою значимость для поисковых систем.

Сохраняем!

Редактируем меню сайта и логотип

ЛОГОТИП

<h1 id=»logo»><a href=»index.html»>Ваш логотип<span>Название сайта или код-адрес картинки</span></a></h1> — для начала достаточно текста.

МЕНЮ САЙТА

<li><a class=»active» href=»index.html»>На ГЛАВНУЮ</a></li>
 <li><a href=»page1.html»>О сайте</a></li>
 <li><a href=»page2.html»>Скачать бесплатно</a></li>
 <li><a href=»page3.html»>Анонс</a></li>
 <li><a href=»page4.html»>Фотографии</a></li>
 <li><a href=»video.html»>Видео</a></li>
 <li><a href=»pusto.html»>Пустая страница</a></li>

Ссылки типа page1.html можете оставить без изменений или изменить на свои, но тогда не забудьте внести изменения в другие страницы сайта.
Здесь указана относительная ссылка: page1.html, можно указать абсолютную: http://Ваш сайт/page1.html, что одно и тоже. При первом варианте ссылки, страницы должны находиться в одной и той же папке, в пределах компьютера или хостинга.

index.html — является индексным названием, его не менять! При обращении браузера к папке в которой находиться файл index.html, по умолчанию открывается сразу этот файл.

Пример: если Вы набрали в браузере адрес: http://Вашсайт.ru, то автоматически (по умолчанию) откроется файл первой страницы index.html, если он лежит в папке Вашсайт.ru
Два адреса http://Вашсайт.ru и http://Вашсайт.ru/index.html одинаковы.

Поменяйте заголовки меню. Следите за тем, чтобы текст меню уместился в одной строке страницы.

Сохраняем!

Редактируем ШАПКУ сайта

В шапке будем менять текст слева от большой картинки. С этим Вы справитесь, далее о картинке.

Размер картинки 600х220 px, поменяйте изображение, создайте свое таких же размеров. Сама картинка лежит в папке images, называется logo.png, параметры картинки в файле style.css (папка css). При изменении ширины изображения, поменяйте параметр width:600px; (он такой один) на свой размер.

Отступы от верхнего и правого края меняйте атрибутами, соответственно: padding-top:10px; padding-right:10px; которые ниже параметра width:600px;

Следите за тем, чтобы вес картинки был не большим. Влияет на скорость первого открытия сайта для посетителя. На дальнейших переходах по страницам сайта не отображается, за счет прописки в файле .css, но тем не менее лучше держаться в пределах 50-100 кб.

Сохраняем!

СЛАЙДЕР — картинки в движении

В нашем случае состоит из восьми картинок размером 200х100 px. Размеры не менять. Если измените ширину, то расстояние между картинками увеличиться или уменьшиться. Могут наехать друг на друга. Имена картинок: slider1.gif, slider1.gif, slider1.gif и т.д., лежат в папке images. Замените их на свои, таких же размеров.
Название можете изменить, но тогда поменяйте его и в коде, пример: slider1.gif меняем на mylove1.jpg. Обратите внимание, формат картинки .gif, jpg, png… в коде должен соответствовать формату картинки.

Код:

<li>
  <div class="slider-image">
<a href="http://sitey.ru"><img src="images/slider1.gif" alt="" /></a>
  </div>
</li>
<li>
  <div class="slider-image">
<a href="#"><img src="images/slider2.gif" alt="" /></a>
  </div>
</li>

Ссылку https://sitey.ru замените на свою, куда-нибудь отправьте посетителя при ее нажатии.
Далее меняйте символ #. 
Можно изменить скорость смены картинок в файле jquery-func.js (папка js) , параметр: auto:4, — в секундах. Будьте осторожнее при редактировании этого скрипта.

Сохраняем!

Редактируем ТЕЛО страницы — контент

Содержимое (тело) страницы состоит у нас из трех блоков: левый, средний и правый.

Размеры фиксированные (подогнуты под дизайн), изменить можно лишь высоту одновременно 3х блоков.
Файл style.css параметр height:300px; — замените 300 на большее значение.
Не советую увеличивать содержимое главной страницы на много. Будет дольше открываться для посетителей. Много трафика забирают картинки, особенно не прописанные в файле .css

Заполняйте блоки своим содержимым: текст, картинки в тексте (100×100 px). В имеющийся текст для наглядности уже включены ссылки на другие страницы, удалите их или замените.

Все остальное описывалось выше. В самом коде и редактируемом тексте есть дополнительные описания и рекомендации.

Сохраняем!

Редактируем ПОДВАЛ низ страницы

Здесь все просто. Замените текст и ссылки. Сюда же можно установить счетчик посещаемости сайта.

Завершаем редактирование шаблона

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

Сейчас в шаблонах страниц блок слайдера заполнен текстом с описанием редактирования каждой страницы. Этот текст необходимо заменить на описание конкретной страницы или вставить туда сам слайдер с главной страницы (он выделен комментариями внутри кода).

Все, что выше слайдера и подвал страницы будут одинаковы на всех страницах сайта.

Обязательно внесите изменения в Мета-Теги страниц и в Заголовок, они должны быть уникальными.

Работа с шаблонами дополнительных страниц.
Выделяем мышкой часть кода готовой страницы index.html, начиная от комментария <!— КОНЕЦ Шапка —> до самого верха, копируем ее и заменяем на всех оставшихся страницах именно эту часть, также выделив ее и удалив.

Подобным образом поступаем с подвалом страницы: выделяем код начиная от комментария <!— Подвал страницы —> до самого низа и заменяем на других страницах. Почему до самого верха или низа? Так проще не промахнуться.

Не забываем СОХРАНЯТЬ страницы!

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

Шаблон достаточно простой, но для совершенствования опыта вполне удобен.

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

Прежде всего, внимательно изучить все основные правила юзабилити и сверять с ними все дальнейшие действия. И действовать!

А можно такой же, но с перламутровыми пуговицами? Да!

• Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
• Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
• Добавьте картинки, иллюстрирующие текст сайта. Это легко сделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

2. Самый радикальный способ — изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ — редактирование стилей CSS.

CSS — это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” — “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

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

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS — htmlbook.ru, а получить нужный код — генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц — вы узнаете из нашего руководства. 

А чтобы вы поняли, насколько это легко — разберем несколько примеров.

Действия с объектами

Первая задача: изменение цвета кнопки с голубого на красный.

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию — тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента — в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

• черным — класс (в данном случае, кнопка),
• зеленым — CSS-свойство (в данном случае, цвет),
• синим — значение (в данном случае, голубой),
• зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background — это свойство, определяющее стиль фона, а #1f1f1f — голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета — #ff0000:

Теперь перейдем в раздел “Дизайн” — “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Что получилось:
 

    Было                                                                                                   Стало

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно — “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom — расстояние от нижнего края кнопки до нижнего края родительского блока, а left — расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева — получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

    Было                                                                                                  Стало

Изменение шрифтов

При редактировании некоторых текстовых полей на готовых сайтах не появляется визуальный редактор, а потому нельзя стандартным способом изменить цвет, размер и начертание шрифта. Это могут быть заголовки, анонсы новостей, цены на товары, контактные данные в шапке сайта, надписи на кнопках и др. Мы сделали это умышленно: настроили лучшие шрифты, самые удобные для чтения и оптимально подходящие к дизайну сайта. Но если все же вам потребуется изменить стиль этих элементов, то это можно сделать при помощи CSS.

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно — “переведем” значения через справочник.

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас — 18px; а за цвет — свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” — ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было                                                                                                          Стало

Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.

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

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

Давайте приступим.

Что такое HTML?

Говоря технически, ответ на этот вопрос «язык гипертекстовой разметки (Hyper Text Markup Language)». Однако, для кастомизации шаблона, нам достаточно знать, что HTML это набор открывающих и закрывающих тегов, к примеру:

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

1

<h1>John Smith, Front End Developer</h1>

Хотя иногда, мы можем увидеть одиночный элемент, у которого нет закрывающего тега, к примеру:

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

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

Установите текстовый редактор

Да, конечно можно редактировать HTML в обычном блокноте или похожей программе, но гораздо легче это делать используя специальный редактор для кода. Одна из причин по которой стоит поставить специальный редактор — вы получите подсветку кода, вы скоро это увидите, так работать будет намного проще.

Я рекомендую Sublime Text, который вы можете скачать по ссылке: https://www.sublimetext.com/3

Скачайте и посмотрите как выглядит ваш HTML шаблон

Скачайте шаблон, который вы приобрели, для этого туториала мы будем использовать «Clean CV» для демонстрации.

Большинство HTML шаблонов распространяются в качестве ZIP архива — если так, распакуйте его. После чего откройте директорию шаблона и найдите файл под названием «index.html» или «index.htm» .

В примере моего CV шаблона файл «index.html» находится в директории «01 html-website».

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

Установите какие части шаблона вы хотите изменить

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

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

В случае нашего CV шаблона мы хотим изменить:

• Имя
• Профессию 
• Фотографию
• Ссылки соцсетей
• Контактную информацию
• Секции CV: «Профиль», «Опыт работы», «Технические навыки» и «Образование»
• Копирайт

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

Найдите необходимый тег в веб-инспекторе

Нажмите правой кнопкой мыши по имени, по умолчанию «Jhon Smith» и выберите Инспектировать (Inspect):

Панель, которая выглядит следующим образом, откроется в вашем браузере:

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

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

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

Данный текст соответствует заголовку, который вы видите на экране, тем самым мы нашли нужную часть.

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

Пришло время открыть HTML файл и отредактировать его. Откройте «index.html» файл в Sublime Text и вы увидите следующую картину:

Теперь нужно найти код, который соответствует тому, что мы видели в Chrome инспекторе. Опуститесь на строку 61 — 61.

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

Теперь между тегами <small></small> измените «Front End Developer» на вашу профессию.

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

Повторите, чтобы отредактировать другой контент

Теперь вы понимаете основной процесс:

1. Инспектируем контент, который следует изменить
2. Находим необходимые теги
3. Находим эти теги в HTML файле
4. Редактируем код

Давайте повторим этот процесс, чтобы кастомизировать остальной контент.

Добавляем собственное фото

Дальше мы добавим собственное фото слева от области с именем и профессией. Нажмите правой кнопкой мыши на изображение, чтоб проинспектировать его и найти необходимый тег:

1

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

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

Откройте HTML файл и перейдите на строку 59:

Для этого тега нам следует изменить значение атрибута src, который находится в теге img. Сделать это можно изменив содержание между кавычек. После чего туда нужно написать путь к вашему изображению.

Найдите фотографию себя, которая вам понравиться, размерами 150px на 150px (не обращайте внимание что в названии файла указано 140×140.png, в действительности размер 150×150).

Поместите изображение в директорию «_content», в директорию где находится файл «index.html».

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

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

Измените ссылки соцсетей

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

Вернитесь в Sublime Text, нажмите CTRL + F и найдите «facebook-icon». Нужный нам текст находится на 75 строке.

Тег a на строке 75 не что иное как ссылка для этой иконки и атрибут href, который вы увидите внутри, куда эта ссылка ведёт. Вам следует изменить значение href атрибута на адрес вашей Facebook страницы (к примеру: https://www.facebook.com/mylink)

Замените #, символ, который находится там по умолчанию, на ваш адрес. После чего сделайте тоже самое для Twitter на строке 79, для Google+ на строке 83 и Linkedin на строке 87.

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

Сохраните и обновите ваш сайт, теперь если нажать на ссылку вы перейдёте по соответствующему адресу.

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

Пришло время изменить контактную информацию под иконками соцсетей.

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

В Sublime Text, снова нажмите CTRL + F и найдите «Email». Вам необходимо отыскать слово «Email», которое окружено кодом, который мы видели в инспекторе.

Вы найдете интересующее нас место на строке 94. Выделите емейл, который стоит по умолчанию «jhon@sitename.com» в двух местах на этой строке:

После чего замените на свой собственный емейл адрес. На следующей строке замените номер телефона на свой и на строке ниже замените адрес своим адресом:

Отредактируйте секции CV

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

Опуститесь ниже до секции «Professional Profile», нажмите правой кнопкой на параграф с текстом, чтобы инспектировать его.

В инспекторе выделится тег p — данный тег отвечает за создание параграфа с текстом.

Далее мы хотим знать, как вся секция CV с текстом выглядит в коде, не только один параграф. В окне инспектора, нажмите на строку кода сверху от параграфа, который мы недавно инспектировали и вы увидите, как выделиться текст:

Тем самым мы знаем, что каждая секция кода обернута в теги <div class="cv-item">...</div>. div означает division и такие теги служат для структурирования контента на сайте, создания лейаута.

Теперь инспектируйте секцию CV с заголовком — «Professional Profile».

Сначала вы увидите очередной набор тегов div. Всё это потому, что заголовок, который нас интересует вложен в эти теги.

Нажмите треугольник рядом с этим заголовком, чтобы развернуть его и увидеть контент, после чего сделайте тоже самое со следующей строкой, пока вы не увидите текст «Professional Profile». Он находится между <h2>...</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>. Это добавляет стили из таблицы CSS стилей нашего шаблона — пространство между текстом секции.

После того как документ сохранён, обновите страницу, будет видно, что две верхние секции были кастомизированы.

Теперь мы можем перейти к редактированию оставшихся элементов CV секции, таким же образом как мы это сделали с «Professional Profile».

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

Проинспектируйте должность:

Проинспектируйте время работы:

Проинспектируйте маркированный список:

Используйте такой же подход, который мы применяли во время редактирования секции «Professional Profile», для редактирования оставшихся CV секций. Чтобы отредактировать должность, время и маркированный список найдите соответствующий код, который мы видели в окне инспектора.

Используйте p теги для создания параграфов и как в случае с «Professional Profile» секцией, если секция заканчивается параграфом <p>, добавьте class="last" то есть <p class="last">...</p>.

Обратите внимание: если вы хотите добавить новые секции CV, или убрать уже существующую, вам нужно найти теги в инспекторе, которые оборачивают всю секцию.

В этом примере вы увидите, что вся секция обернута тегами <div class="cv-item">...</div>.

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

Отредактируйте копирайт

Мы закончили с редактированием CV секций и у нас остался последний пункт нашего списка для редактирования — копирайт в футере. Опять же мы будем использовать знакомый нам процесс. Нажмите правой кнопкой мыши на копирайт, чтобы проинспектировать его:

Найдите соответствующий код в вашем HTML и отредактируйте его добавив текущий год и собственное название:

На этом всё!

Отлично! Мы только что кастомизировали этот HTML шаблон и он отображает ваш контент. Надеюсь теперь вы чувствуете себя более уверенно и у вас не возникнут сложности с кастомизацией в будущем.

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

Когда вы редактируете шаблон, встретив незнакомый HTML тег, не волнуйтесь и не опускайте руки. В интернете можно найти бесконечный набор информации, тем самым вы можете узнать больше об этом теге.

Вам могут помочь ссылки ниже, набор отличных обучающих материалов:

• Ваш первый HTML документ за 60 секунд
• Выучите HTML и CSS за 30 дней
• Лучший способ изучения HTML
• Введение в HTML

Правильный редизайн сайта — пошаговый алгоритм, основные вопросы и нюансы

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

Интернет изменяется буквально каждый день, поэтому всегда необходимо следить за актуальностью и удобством своих интернет ресурсов. Технологии, которые были популярными 5 лет назад, сегодня могут полностью утратить свою актуальность и ваш сайт, может быть (и будет) неудобным для ваших посетителей и клиентов, соответственно, вы каждый день будете терять потенциальную прибыль. В силу чего, каждый из предпринимателей рано или поздно придет к вопросу редизайна своего интернет-магазина или сайта услуг.

Основные вопросы при смене дизайна сайта

Еще до начало каких-либо работ, необходимо четко понять нужен ли вам редизайн сайта.
Рекомендую ответить на следующие вопросы:

1. Падает ли конверсия? Падает ли время на сайте, падают ли переходы? *Посмотреть всю эту информацию можно в метрике.
2. Современно ли выглядит ваш интернет-магазин? *Просмотрите всех ваших конкурентов по основным запросам, сравните их дизайн с вашим, удобство использования, фильтры товаров, различные блоки и так далее.
3. Имеет ли ваш сайт мобильную версию либо адаптивный дизайн? *Думаю, вы знаете ответ на этот вопрос, если нет, то переходим в webmaster.yandex.ru, в раздел «Диагностика» — «Диагностика сайта» в отчете будут указаны рекомендации о мобильной версии.

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

Как сменить дизайн сайта и не потерять позиции ?

Если у вашего интернет-магазина хорошие позиции по региону, естественно, никто не хочет их потерять, поэтому, рекомендую вам, при редизайне сайта четко придерживаться следующих основных рекомендаций:

• Во первых, никогда не меняем структуру сайта, то есть, после смены дизайна, у ваших страниц должны остаться прежние url-адреса, это очень важно (редизайн подразумевает под собой просто смену внешнего оформления и не более). Если сменяться адреса страниц, это повлечет за собой переиндексацию, 404 ошибки (если не будет 301 редиректов), распределение статического веса по страницах будет совершенно другое, все это повлечет за собой неизбежную смену позиций. *Если планируется масштабная работа над сайтом в том числе и смена структуры, то эту процедуру проводим до редизайна.

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

• Рекомендую запомнить все основные html-теги. Речь идет не только о заголовках H1-H6, но и о тегах оформления b, i, ul и тд. Рекомендую их оставлять там где и были (включаем это в ТЗ при верстке макета). Все эти теги влияют на релевантность страницы запросам в той или иной степени, а мы хотим не испортить позиции нашего сайта, поэтому эти моменты крайне желательно оставить как и были.

• Моменты с новыми блоками. К примеру, возьмем страницу категории товаров, в новом дизайне у нас появился блок с новостями магазина, пример:

Все это хорошо, но стоит понимать, что это все внутренние ссылки которые передают свой вес, то есть, по факту имеем, что с данной категории магазина добавилось 6-7 (смотря сколько статей в карусели) ссылок на статьи (которые продвигать нам не нужно). Также, этот блок добавляет нерелевантный контент нам на страницу, что не хорошо.

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

По истечению некоторого времени (1-2) недели, рекомендую начинать постепенно убирать проставленные теги и смотреть на позиции сайта. Это нам даст возможность «Откатить изменения» при смене позиций в нежелательную сторону.

• Немного по релевантности. Опять же, возьмем страницу категории товаров, на которой выведен блог товаров. Может быть ситуация, что ранее, у каждой из карточек товаров были показаны те или иные характеристики (цена, артикул, цвет, размер и тд), но в новой версии, дизайнеру не понравилось как это выглядит и он убрал вывод характеристик с карточек. Это тоже может повлиять и повлияет на позиции сайта, как со стороны релевантности контента (так как некоторая часть контента пропадет), так и со стороны поведения пользователя, стоит помнить об этом.

Подытожим все основные рекомендации:

1. Не меняем структуру, не меняем url;
2. Не меняем CMS;
3. Минимум изменений по основным тегам верстки, которые влияют на релевантность (H1-H6, b, i и тд);
4. Следим, чтобы вся информация которая выводилась ранее осталась на сайте (если она нужна, можно посмотреть по метрике — карта кликов, видеозаписи действий пользователей и тд).
5. Если добавляем много новых блоков, новый функционал, в котором используется много контента, то рекомендую закрывать их от индекса (тем самым обезопасим себя от лишних вопросов). Далее, постепенно снимаем noindex-ы и следим за позициями (есть возможность вернуть все обратно).
6. Аналогичная механика с новыми блоками в которых будет много ссылок, также рекомендую, закрывать ссылки в атрибуты nofollow (сохранение позиций наше все), далее постепенно убираем их, смотрим результаты съема позиций.

После всем этих действий у нас будет понимание зачем нам необходим редизайн и как правильно его сделать, чтобы не испортить то что было нажито нашим трудом и временем. Можно переходить к следующему шагу.

Подготовка прототипа будущего дизайна сайта

Это самая важная и основная часть нашей работы, так как прототип это главное и основное ТЗ, которое мы вышлем нашему дизайнеру.

Мысли дизайнера и ваши никогда не совпадут, дизайнер будет думать одно, вы другое, далеко не факт, что вы найдете действительно профессионала, который сможет вам что-то посоветовать, к сожалению, из опыта, дизайнер просто выполнит работу по ТЗ и ни шагу в сторону, выполнит, как ему это удобно и как ему это больше нравиться. В итоге, мы получим посредственный дизайн, у которого, при наполнении контентом съедет верстка, так как дизайнер это не продумал, может не быть эффектов наведения, да и вообще можем получить не то что мы хотели.

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

Выбор программы для создания прототипа

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

1. Gliffy

Бесплатная версия есть, можно пользоваться.

2) Axure

Простая и удобная программа.

3) Mockingbird

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

Подготовка к прототипу

1) Находим всех наших конкурентов

*Не берем только топ-5, так как у данных магазинов может быть другое ранжирование от поисковых систем (топы ниши) и некоторые моменты (блоки, функционал и тд), которые мы решим у них взять, нам могут никак не улучшить ситуацию, а может и ухудшить.

Находим 20-30 сайтов (берем разные регионы), которые нам понравились и тщательно анализируем их. Берем у каждого самое лучшее решение того или иного блока, будь то фильтр товаров, блок рекомендуемых товаров, какие-либо подсказки и так далее. Стоит обращать внимание на все, где стоит ссылка, какая кнопка и т.д.

2) Выписываем все блоки

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

3) Выбираем все элементы сайта

На данном этапе необходимо определиться, какая будет шапка, какое будет основное меню, подвал и так далее.

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

4) Определиться со стилем и цветовой гаммой

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

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

• Kwork.ru;
• Fl.ru;
• Weblancer.net;
• и другие.

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

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

Отрисовка прототипа сайта

Мы остановились на сервисе Mockingbird, поэтому переходим, регистрируемся и начинаем нашу работу.

Нам необходимо четко отрисовать все наши будущие страницы Главная, Категория товаров, Карточка товаров, Категория новостей, Новость, Контакты, а также все формы.

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

По желанию, можно доработать все в Photoshop, чтобы все элементы были еще более наглядные.

На выходе мы имеем примерно следующее:

Все формы, табы мы также отрисовали в прототипе:

После создания полноценного прототипа будущего дизайна, переходим к подготовке ТЗ, нам необходимо подробно описать все моменты представленные в прототипе.

Пишем подробное ТЗ к прототипу

Это также весьма ответственный момент, так как если мы что-то забудем этого и не будет в дизайне.

• Оговариваем в каком формате должен быть дизайн
• Указываем изображение из портфолио (которое мы ранее выбрали). Пишем, что хотим дизайн в аналогичном стиле и цветовой гамме. Указываем что кнопки, рамки и тд можно брать из данного дизайна.
• Кнопки, ссылки и другие элементы должны иметь эффекты наведения и активности.
• Приложить к дизайну используемые вами шрифты (некоторым верстальщикам они необходимы)
• Далее указываем все моменты, которые, по нашему мнению, стоит уточнить. К примеру, мы хотим, чтобы после наведения на карточку товара, показывалась кнопка «В корзину», описываем все подобные моменты.

*Данные вопросы и нюансы, можно описать и на самом прототипе, пример:

Переходим непосредственно к выбору и заказу дизайна.

Выбор исполнителя, заказ дизайна

Имеется два варианта заказа дизайна:

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

2) Обратиться к фрилансеру, через популярные площадки
Подобный вариант идеально нам подходит. Так как, основной целью подготовки подробного прототипа и ТЗ было не только получение именно того дизайна, который нам нужен, но и способ сэкономить наши средства. Ведь все что осталось дизайнеру это только добавить графику в наш прототип, по факту мы уже нарисовали весь «дизайн», исполнителю не нужно думать, как и что должно выглядеть, все уже нарисовано, стиль и цветовая гамма предоставлена.

Как и писал выше, существует огромный выбор площадок с фринсерами и все они по своему хороши. Но мы остановим свой выбор на сервисе Kwork.ru, так как нам необходимо достойное качество за адекватную сумму, а как я уже писал выше, нам не нужен профессионал за 100 тыс., нам нужна графика для нашего прототипа. Также, здесь очень простая и защищенная система оплаты, нам не нужно напрямую платить фрилансеру, все оплаты происходят через сам сервис. Если предоставленный дизайн будет не по ТЗ, то можно легко вернуть средства.

Первым делом регистрируемся и переходим в раздел дизайна. Рекомендую не тратить свое время на долгий выбор дизайнера, просматривая сотни портфолио и так далее, открываем топ 20-30 и высылаем всем наше ТЗ, уточняем цену и сроки.

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

*Стоит помнить, что все что мы ждем от дизайна уже написано нами в ТЗ, поэтому отдать предпочтение лучше финансовой стороне вопроса, так как результат от этого фактически не измениться.

В итоге имеем полностью готовый, простой и современный дизайн:

Полностью ознакомиться с проектом можно по ссылке tkspecodegda.ru

Все основные моменты:

1. Необходимо четко определиться необходим ли нам редизайн сайта;
2. Выбираем лучших конкурентов, на основе их сайтов, функционала выбираем все самое лучше;
3. На основе подготовленной информации составляем качественный прототип каждой из страниц;
4. Выбираем сайт который нас полностью устраивает по цветовой гамме и стилю;
5. Составляем пояснительную записку, тз к прототипу;
6. Заказываем дизайн на популярный биржах фриланса;
7. Получаем готовый дизайн, который мы хотели, который нам нужен, за адекватную стоимость;
8. Переходим к составлению ТЗ на верстку и натяжку, поиск исполнителя.

Отдельные нюансы по заказу верстки, а также мобильной версии для сайта, будут описаны в следующей статье.

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?