×

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

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

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

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

    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.

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


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

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

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

Ранее мы оформили внешний вид формы для варианта с исходным HTML и CSS кодом, непосредственно полученным с сервиса Яндекс.Поиск (рис.6 в предыдущей статье).

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

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

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

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

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

Содержание


  • Определяем динамически измененный HTML-код
  • Определяем измененные CSS-свойства для элементов формы
  • Дополняем CSS-код в соответствии с измененной формой поиска
  • Дополняем медиазапросы для установки размера шрифта
  • Исходные файлы сайта

Определяем динамически измененный HTML-код


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

Например, в браузере мозилла Firefox такие инструменты можно найти через выпадающее меню Веб-разработка/Инструменты разработчика, в Opera - Разработка/Инструменты разработчика, в Google Chrome - Дополнительные инструменты/Инструменты разработчика, в Microsoft Edge - Средства разработчика, и т.п.

В нашем случае, воспользуемся последним из перечисленных вариантов - Microsoft Edge. Для этого сначала закомментируем скрипт, имеющийся в форме, полученной с сервиса Яндекс.Поиск (рис.2 в предыдущей статье). А затем используя средства разработчика откроем инспектор кода через выпадающее меню браузера, как показано на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Открытие инспектора кода в Microsoft Edge

Рис.1 Открытие инспектора кода в Microsoft Edge

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

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

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

Рис.1 Вид исходного HTML-кода в инструментах разработчика

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

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

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

Рис.2 Вид динамически измененного HTML-кода в инструментах разработчика

Если посмотреть на эти два варианта, то можно увидеть, что динамически измененный код (рис.2) существенно отличается от исходного (рис.1).

В частности к атрибутам элемента <div> с классом ya-site-form добавились другие классы, а также идентификатор id со значением ya-site-form0.

Кроме того появилось большое количество новых элементов, в основном определяющих содержимое таблиц, таких как <table>, <tr> и <td>. Отдельно перечислять их не будем, так как они достаточно хорошо видны на приведенном скриншоте (рис.2).

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

Определяем измененные CSS-свойства для элементов формы


Теперь с помощью тех же инструментов разработчика определим, какие свойства CSS для элементов <input> изменились после выполнения скрипта.

Для этого в левой области инспектора кода выделим интересующий нас элемент, сначала - <input> поля ввода. Соответственно, в правой части получим все его ранее назначенные и затем отмененные свойства, как показано на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Измененные свойства CSS для элемента input поля ввода

Рис.3 Измененные свойства CSS для элемента <input> поля ввода

Здесь видно, что у элемента <input>, для которого ранее мы назначали свойства CSS (таблица на рис.5 в предыдущей статье), часть из них отменена, а именно: width, font-size, box-sizing, border-top, border-left, border-bottom, border-right и color. А также для контейнера <div> со вновь образованным идентификатором ya-site-form0, который охватывает все элементы формы, установлен шрифт в абсолютной величине в 16px.

Аналогичным способом посмотрим как изменились свойства CSS для элемента <input> кнопки поиска.

Для увеличения / уменьшения размера изображения кликните по картинке
Измененные свойства CSS для элемента input кнопки поиска

Рис.4 Измененные свойства CSS для элемента <input> кнопки поиска

Как видно, у элемента <input> кнопки поиска отменено только два ранее назначенных свойств: color и font-size.

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

Дополняем CSS-код в соответствии с измененной формой поиска


Исходя из полученных результатов составим таблицу стилей CSS для элементов <input>. В данном случае эти свойства будут определяться к контейнеру <div> с идентификатором ya-site-form0, который образовался в динамически измененном HTML-коде.

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

  1. /*-----Коррекция динамически измененной формы-----*/

  2. #ya-site-form table, #ya-site-form tr, #ya-site-form td {

  3. margin: 0 !important;

  4. padding: 0 !important;

  5. }

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

  7. width: 100% !important;

  8. font-size: .9375em !important;

  9. box-sizing: border-box !important;

  10. border-top: 0 solid #fff !important;

  11. border-left: 0 solid #fff !important;

  12. border-bottom: .125em solid #fff !important;

  13. border-right: .125em solid #fff !important;

  14. color: #000066 !important;

  15. }

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

  17. font-size: 0.8125em !important;

  18. color: #fff !important;

  19. }

Рис.5 CSS-код динамически измененной формы

По существу использование здесь стилей CSS для элементов <input> (для поля ввода - поз.6÷15, для кнопки "Найти" - поз.16÷19) заключается в повторном назначении свойств, которые ранее уже применялись (таблица на рис.3 в предыдущей статье) и были отменены после выполнения скрипта.

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

Также стоит отметить, что в этой таблице в строках 2÷5 вновь образованным элементам таблиц: <table>, <tr> и <td> для свойств margin и padding назначено значение 0. Это сделано для того, чтобы исключить возникновение каких-либо нежелательных отступов, связанных с этими дополнительными элементами.

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

Вид формы с разкомменированным скриптом

До коррекции стилей CSS

Рис.6 До коррекции стилей CSS

После коррекции стилей CSS

Рис.7 После коррекции стилей CSS

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

Это вызвано тем, что при назначении правила !important для этих элементов ранее установленные наследуемые свойства в области <body> теперь не применяются. И соответственно, размер шрифта для них теперь не может подстраиваться к реальному разрешению экрана.

Дополняем медиазапросы для установки размера шрифта


А для того, чтобы решить эту проблему необходимо отдельно назначить для элементов <input> свойство font-size в тех медиазапросах, в которых ранее определялись значения шрифта для всей области <body>

Дополнение стилей CSS в медиазапросы для корректировки размера шрифта элементов <input> в зависимости от разрешения экрана показано в следующей таблице.

  1. @media only screen and (min-width: 1000px) {

  2. body {

  3. font-size: 1em;

  4. }

  5. #ya-site-form0 input[type="search"], #ya-site-form input[value="Найти"] {

  6. font-size: .9375em !important;

  7. }

  8. }

  9. @media only screen and (min-width: 1280px) {

  10. body {

  11. font-size: 1.0625em;

  12. }

  13. #ya-site-form0 input[type="search"], #ya-site-form input[value="Найти"] {

  14. font-size: 1em !important;

  15. }

  16. }

  17. @media only screen and (min-width: 1360px) {

  18. body {

  19. font-size: 1.125em;

  20. }

  21. #ya-site-form0 input[type="search"], #ya-site-form input[value="Найти"] {

  22. font-size: 1.0625em !important;

  23. }

  24. }

  25. @media only screen and (min-width: 1500px) {

  26. body {

  27. font-size: 1.1875em;

  28. }

  29. #ya-site-form0 input[type="search"], #ya-site-form input[value="Найти"] {

  30. font-size: 1.125em !important;

  31. }

  32. }

  33. @media only screen and (min-width: 1700px) {

  34. body {

  35. font-size: 1.25em;

  36. }

  37. #ya-site-form0 input[type="search"], #ya-site-form input[value="Найти"] {

  38. font-size: 1.1875em !important;

  39. }

  40. }

Рис.8 Медиазапросы для элементов <input> формы поиска

Здесь видно, что в тех медиазапросах, в которых ранее назначался размер шрифта для всей области <body> (отмечено с затемненном фоном), на соответствующую величину это сделано и для элементов <input> формы.

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

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

Рис.9 Внешний вид окончательного варианта формы поиска

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

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

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments