×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

скриншот 90

Содержание


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

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


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Фрагмент исходного HTML-кода формы поиска

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

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

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

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

  1. <div class="seach">

  2. <h3>Поиск</h3>

  3. <label for="word">Ключевое слово:</label>

  4. <div 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. <form action="https://yandex.ru/search/site/" method="get" target="_self" accept-charset="utf-8">

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

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

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

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

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

  11. </form>

  12. </div>

  13. <script>

  14. "/*(function(w,d,c) {var s=d.createElement ('script'), h=d.getElementsByTagName ('script')[0], e=d.documentElement;if((' '+e.className+' ') .indexOf(' ya-page_js_yes ')===-1) {e.className+=' ya-page_js_yes';} s.type='text/javascript'; s.async=true;s.charset='utf-8'; s.src=(d.location.protocol==='https:'?'https:':'http:') + '//site.yandex.net/v2.0/js/all.js'; h.parentNode.insertBefore(s,h); (w[c]||(w[c]=[])) .push(function() {Ya.Site.Form.init()}) })(window,document, 'yandex_site_callbacks');*/"

  15. </script>

  16. </div>

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

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

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


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

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

На данный момент существующая таблица стилей 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 для имеющихся в ней элементов <input>.

Ниже приведены дополнения 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 для формирования внешнего вида форм. Поэтому не будем здесь повторяться, а только отметим, что все свойства для элементов <input> поля ввода (поз.27÷41) и кнопки "Найти" (поз.42÷57) применены к имеющемуся в исходном коде от Яндекс.Поиск элементу <div> с классом ya-site-form.

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

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

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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Форма Яндекс.Поиска с динамически измененным HTML-кодом

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

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

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

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

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments