×
Закрытие
4
×

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

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

⯈
Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

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

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

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

Перейти к статье в области основного контента

    Cайт на практическом примере

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

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

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

    Вы здесь: Главная → Сборник статей → Поиск → Форма поиска для сайта (для исходного кода Яндекс.Поиск)

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

    Формируем форму поиска для сайта (для исходного кода Яндекс.Поиск)

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

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

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

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

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

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

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

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

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

    Несмотря на то, что создание в предыдущих статьях поиска от Яндекс производилось непосредственно на действующем, размещенном в сети Интернет сайте avtobezugona.ru (создание Яндекс.Поиска возможно только на реально действующих ресурсах), для наглядности, рассматриваемые здесь операции по формированию его элементов будут производиться на примере варианта сайта "newsite.local", размещаемого на локальном веб-серевере.

    скриншот 51

    Содержание

    • Размещаем HTML-код формы поиска
    • С помощью стилей CSS формируем внешний вид формы поиска
    • Исходные файлы сайта

    Размещаем HTML-код формы поиска

    В создаваемом сайте элементы поиска в соответствии с дизайн-макетом предполагается использовать в области сайдбара. Поэтому полученный из дополнительных материалов из предыдущей статьи HTML-код (файл "seach_form.html") разместим в соответствующем месте файла "aside.php", находящегося в папке "blocks" корневого каталога "www".

    Ниже показан HTML-код в редакторе Notepad++ файла "aside.php" с размещенным фрагментом формы поиска в ранее созданном контейнере

    с классом seach.

    Фрагмент исходного HTML-кода формы поиска

    Рис.1 Фрагмент исходного HTML-кода формы поиска

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

    Как было ранее отмечено, на данном этапе мы занимаемся оформлением формы поиска для чистого HTML-кода, полученного непосредственно с сервиса Яндекс.Поиск.

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

    1. class="seach">

    2. Поиск

    4. class="ya-site-form ya-site-form_inited_no" onclick="return {'action':'https://avtobezugona.ru/poisk.html','arrow':false,'bg':'transparent','fontsize':16,'fg':'#000000','language':'ru','logo':'rb','publicname':'Введите запрос','suggest':true,'target':'_self','tld':'ru','type':2,'usebigdictionary':true,'searchid':2301097,'input_fg':'#000066','input_bg':'#fdfadc','input_fontStyle':'normal','input_fontWeight':'normal','input_placeholder':'Введите запрос','input_placeholderColor':'#5f5f5f','input_borderColor':'#eaeaea'}">

    5. action="https://yandex.ru/search/site/" method="get" target="_self" accept-charset="utf-8">

    6. type="hidden" name="searchid" value="2301097"/>

    7. type="hidden" name="l10n" value="ru"/>

    8. type="hidden" name="reqenc" value=""/>

    9. type="search" name="text" value="" placeholder="Введите запрос"/>

    10. type="submit" value="Найти"/>

    • Рис.2 Исходный HTML-кода формы поиска с закомментированным скриптом

    Как видно, в строке 14 JavaScript-скрипт закомментирован, что позволяет нам перейти к CSS стилизации для варианта с исходным HTML-кодом.

    В начало

    С помощью стилей CSS формируем внешний вид формы поиска

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

    Это относится как к контейнеру

    с классом seach, так и к элементам самой формы - тегам , формирующим поле ввода и кнопку поиска.

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

    1. /*-----Форма поиска-----*/

    2. .seach {

    3. height: 9.25em;

    4. background-image: linear-gradient(to top, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);

    5. border-radius: .625em;

    6. box-shadow: 0 0 3.75em 0 #fff;

    7. border-top: .0625em solid #dedede;

    8. padding: .3125em 1.25em;

    9. font-size: .9375em;

    10. color: #212a68;

    11. line-height: .8;

    12. overflow: hidden;

    13. margin-top: .9375em;

    14. position: relative;

    15. }

    16. .seach h3 {

    17. text-align: center;

    18. font-size: 1.125em;

    19. font-weight: bold;

    20. line-height: 1.2;

    21. padding-top: .5em;

    22. margin-bottom: 1.125em;

    23. }

    24. .seach label {

    25. position: relative; bottom: .5em;

    26. }

    Рис.3 CSS-код формы поиска

    Если сейчас открыть страницу сайта, то в этом состоянии можно увидеть, что форма Яндекс.Поиска разместилась в предназначенном ей месте.

    Установленная форма Яндекс.Поиска

    Рис.4 Установленная форма Яндекс.Поиска

    Однако, вид самой формы пока не соответствует существующему дизайну. Что требует назначения определенных свойств CSS для имеющихся в ней элементов .

    Ниже приведены дополнения CSS-кода, которые приводят форму Яндекс.Поиска к внешнему виду, соответствующему особенностям дизайна создаваемого сайта (внесенные дополнения выделены светлым фоном).

    1. /*-----Форма поиска-----*/

    2. .seach {

    3. height: 9.25em;

    4. background-image: linear-gradient(to top, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);

    5. border-radius: .625em;

    6. box-shadow: 0 0 3.75em 0 #fff;

    7. border-top: .0625em solid #dedede;

    8. padding: .3125em 1.25em;

    9. font-size: .9375em;

    10. color: #212a68;

    11. line-height: .8;

    12. overflow: hidden;

    13. margin-top: .9375em;

    14. position: relative;

    15. }

    16. .seach h3 {

    17. text-align: center;

    18. font-size: 1.125em;

    19. font-weight: bold;

    20. line-height: 1.2;

    21. padding-top: .5em;

    22. margin-bottom: 1.125em;

    23. }

    24. .seach label {

    25. position: relative; bottom: .5em;

    26. }

    27. .ya-site-form input[type="search"] {

    28. width: 100%;

    29. height: 1.875em;

    30. font-size: 1em;

    31. padding: .25em .5em 0 .5em;

    32. background: #fdfadc;

    33. box-sizing: border-box;

    34. box-shadow: .1875em .1875em .3125em 0 #8b8e8d inset;

    35. border-radius: .3125em;

    36. border-top: 0 solid #fff;

    37. border-left: 0 solid #fff;

    38. border-bottom: .125em solid #fff;

    39. border-right: .125em solid #fff;

    40. color: #000066;

    41. }

    42. .ya-site-form input[value="Найти"] {

    43. height: 1.875em;

    44. padding: 0 .375em 0 .375em;

    45. border-radius: .3125em;

    46. text-align: center;

    47. font-weight: bold;

    48. background-image: linear-gradient(to top,#653939,#a76d6d 70%,#c39696);

    49. box-shadow: .125em .125em .25em 0 #422a2a;

    50. border-width: .125em;

    51. border-style: solid;

    52. border-color: #ddbebe #241616 #241616 #ddbebe;

    53. color: #fff;

    54. line-height: 1.2;

    55. font-size: .9375em;

    56. position: absolute; bottom: 1.0625em; right: 1.3125em;

    57. }

    58. .ya-site-form input[value="Найти"]:hover {

    59. box-shadow: none;

    60. border-color: #c39696 #a76d6d #653939 #a76d6d;

    61. }

    62. .ya-site-form input[value="Найти"]:active {

    63. box-shadow: 0 0 .4375em .125em #422a2a inset;

    64. border-color: #777 #fff #fff #777;

    65. }

    Рис.5 CSS-код формы поиска

    Ранее при оформлении элементов сайдбара подробно рассматривалось назначение стилей CSS для формирования внешнего вида форм. Поэтому не будем здесь повторяться, а только отметим, что все свойства для элементов поля ввода (поз.27÷41) и кнопки "Найти" (поз.42÷57) применены к имеющемуся в исходном коде от Яндекс.Поиск элементу

    с классом ya-site-form.

    А для визуализации состояния кнопки к этим же элементам назначены псевдо-классы: :hover (поз.58÷61) - для активного состояния (находящаяся под курсором мыши) и :active (поз.62÷65) - для нажатого состояния (удерживаемая кнопкой мыши). Сделано это аналогично тому, как ранее мы оживляли кнопки и делали их интерактивными на этапе верстки сайта.

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

    Стилизованная форма Яндекс.Поиска

    Рис.6 Стилизованная форма Яндекс.Поиска

    Как видно после стилизации данный элемент поиска приняла типовой для этого сайта вид.

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

    Форма Яндекс.Поиска с динамически измененным HTML-кодом

    Рис.7 Форма Яндекс.Поиска с динамически измененным HTML-кодом

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

    Как отмечалось ранее это связано с тем, что выполнение скрипта приводит к появлению в форме дополнительных элементов со своими стилями CSS. Что, соответственно, и приводит к таким изменениям.

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

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

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

    • Файлы каталога www
    • Таблицы базы данных MySQL

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

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

    Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

    В начало

    С уважением,

    Комментарии

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

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