• Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Дизайн-макет → Создаем и размещаем фавикон


Автор: / Дата:

Создаем и размещаем на сайте фавикон

Здравствуйте уважаемый посетитель!

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

Содержание


  • Выбор способа создания фавикона
  • Установка плагина в Фотошоп
  • Дизайн фавикона
  • Сохранение на сайте
  • Подключение к страницам сайта
  • Исходные файлы сайта

Выбор способа создания фавикона


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 1

Рис.1

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

Важность такой иконки подтверждается, например, тем, что Яндекс постоянно отслеживает файл favicon и сообщает об этом владельцу сайта в инструменте "Яндекс Вебмастер". Ниже показан фрагмент диагностики Яндекса при отсутствии проблем с фавиконом (при нормальном состоянии сообщение отображается полупрозрачным цветом текста с отметкой "Все в порядке").

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 2

Рис.2

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

Существуют два основных способа создания - с помощью специальных онлайн сервисов, либо самостоятельно, используя графические редакторы. Например, которые уже использовались здесь при создании сайта, это Adobe Photoshop (Фотошоп) и Gimp.

Как пример онлайн сервиса можно привести сайт https://www.iconfinder.com/. Но на мой взгляд, имея под рукой графический редактор, создавая на нем дизайн сайта, прибегать для этих целей к помощи каких-то сторонних сервисов, не очень правильно. Ведь графический редактор является инструментом, который позволяет решать все вопросы по созданию и редактированию графических элементов.

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

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

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

Установка плагина в Фотошоп


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

Для этого, сначала нужно его скачать. Это можно сделать на сайте разработчика по ссылке "http://www.telegraphics.com.au/sw/". При этом следует скачать именно тот файл, который соответствует конфигурации компьютера. Где найти ссылки для скачивания плагина показано на приведенном скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 3

Рис.3

После скачивания плагин нужно распаковать и разместить в папке Plug-ins, находящейся в корневом каталоге установленной программы Adobe Photoshop, как показано ниже на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 4

Рис.4

Как видно из скриншота, каталоги Фотошопа находятся в папке Program Files компьютера. Следует также отметить, что после этих действий фотошоп нужно перезапустить.

Таким образом установка данного плагина закончена и теперь можно переходить к следующим этапам.

Дизайн фавикона


Следующим шагом будет создание самого изображения иконки. Это можно сделать разными вариантами, например, нарисовать какой-нибудь знак используя "карандаш" или "кисть" редактора, изобразить эмблему с помощью имеющихся в фотошопе фигур, либо использовать какие-либо готовые, подходящие для этого изображения.

Но в любом случае, не надо пытаться разместить в фавиконе большое количество элементов, а тем более мелких. Дело в том, что размер этого знака очень мал, обычно он используется с размером 16×16 px. Поэтому, достаточно будет расположить лишь 1-2 элемента, которые смогли бы каким-то образом ассоциироваться с темой сайта.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 5

Рис.5

При этом для создания градиента фона здесь использовано внутренне свечение, как показано на рис.6.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 6

Рис.6

И последнее, что нам осталось сделать для формирования иконки, это уменьшить его размер, как было указано ранее, до 16×16 px.

Ниже показано, как она стала выглядеть при таком размере в растровом формате Фотошопа.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 7

Рис.7

И теперь все готово для размещения созданного фавикона на сайте.

Сохранение на сайте


Сохранение иконки делается через меню "Файл/Сохранить как...". После открытия ссответствующего окна необходимо во всплывающем меню "Тип файла" выбрать необходимый формат "ICO Windows Icon/Favicon (*.ICO)" и сохранить файл в корневом каталоге сайта.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 8

Рис.8

При этом, после того, как нажмем "Сохранить", должно появиться окно подтверждения, где мы еще раз указываем стандарт "ICO", после чего нажимаем "OK".

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 9

Рис.9

Как будет выглядеть теперь корневой каталог сайта после добавления фавикона можно увидеть на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 10

Рис.10

После этого осталось только подключить фавикон.

Подключение к страницам сайта


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

Ниже показано соответствующее дополнение в заголовке файла index.php, которое нужно также сделать и во всех остальных страницах.

  1. <head>

  2. <meta charset="utf-8" />

  3. <title>Главная</title>

  4. <meta name="Description" content="Краткое описание содержания страницы">

  5. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

  6. <link rel="styleshee" type="text/css" href="styles/main.css"/>

  7. <link rel="styleshee" type="text/css" href="styles/flexslider.css"/>

  8. <script src="js/jquery-3.1.1.min.js" </script>

  9. <script src="js/jquery.easing.1.3.js" </script>

  10. <script src="js/jquery.flexslider.js" </script>

  11. <script src="js/flexslider_script.js" </script>

  12. </head>

Рис.11

Если теперь обновить браузер, то можно увидеть иконку в шапке сайта и на вкладке браузера.

Для увеличения / уменьшения размера изображения кликните по картинке
Создаем фавикон, картинка 11

Рис.12

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

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

Исходные файлы сайта


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

Исходные файлы бесплатно предоставляются только зарегистрированным пользователям.

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

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments