În acest tutorial, aș dori să vă împărtășesc cum vă puteți decora formularul de căutare. Nu vom face nimic super complicat. În schimb, să ne uităm la patru moduri cu care vă puteți decora formularul de căutare folosind CSS tranziții

Pentru început, în dvs fișier HTML creați un element de intrare cu atributul type=search. Dacă te uiți la codul de mai jos, vei vedea 4 elemente diferite: element div cu clasa .box , un element div cu clasa .container-1 , .icon și bara de căutare în sine.

Toate cele patru exemple vor avea, desigur, o bară de căutare și o pictogramă de căutare. Fiecare dintre cele patru exemple va fi într-un container separat, astfel încât să le putem modifica independent unul de celălalt. In cele din urma, bloc div responsabil pentru menținerea containerului nostru centrat.

Font Awesome este o bibliotecă de pictograme. Puteți afla mai multe despre această bibliotecă pe site-ul lor.

Fragmentul de cod de mai sus arată un exemplu despre cum puteți include o pictogramă în marcaj. Cu toate acestea, pentru ca pictograma să funcționeze, trebuie să furnizați și un link către biblioteca Font Awesome, așa cum este scris mai jos. Adăugați acest link la eticheta head a documentului dvs.

Acum vom adăuga câteva stiluri la dosar separat(pe care va trebui să-l adăugați și la eticheta de cap a documentului).

Corp( fundal: #343d46; ) .box (marja: 100px automat; lățime: 300px; înălțime: 50px; )

În fragmentul CSS de mai sus, am adăugat câteva stiluri de bază pentru pagină. Câmpurile de căutare vor avea un stil albastru închis, astfel încât fundalul corpului nu trebuie să fie complet alb. Clasa cu casetă este, de asemenea, centrată pe pagina lecției.

Acest tutorial este despre învățarea cum să vă personalizați casetele de căutare. Voi folosi primul exemplu pentru a explica mai detaliat ce se întâmplă; Să ne asigurăm că știi exact ce se întâmplă. În celelalte trei exemple, vă voi arăta doar opțiunile de tranziție.

Luminarea fundalului

HTML Ați văzut deja codul HTML? marcaj de bază

CSS Pentru a atribui un stil, trebuie să definim stilul CSS al casetei de căutare în sine. Să adăugăm totul unul după altul ca să știi exact ce se întâmplă.

Container-1( lățime: 300px; aliniere verticală: mijloc; spațiu alb: nowrap; poziție: relativă; )

Mai întâi, să proiectăm clasa containerului. Cel mai proprietate importantă poate poziție: relativă . Acest lucru este intenționat, astfel încât pictograma să poată fi plasată deasupra intrării, după cum veți vedea.

Container-1 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #63717f; padding-left: 45px; -webkit-border- raza: 5px -moz-border-radius: 5px;

În continuare, vom stila intrarea. Toate cele de mai sus sunt pentru decorare, deoarece raza marginii sau culoarea de fundal nu afectează funcționalitatea intrării. Acordați atenție proprietăților indentării din stânga. Acest lucru este pentru a face loc pictogramei, astfel încât să nu fie literalmente deasupra textului din interiorul intrării.

Mai jos avem patru reguli diferite pentru culoarea substituentului text al exemplului nostru Căutare . Din păcate, regulile trebuie să fie separate pentru prefixele de furnizor individual și nu pot fi combinate într-o regulă scrisă scurtată. Acest lucru este puțin enervant și se va repeta în fiecare exemplu!

Container-1 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-1 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 1 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-1 input#search:-ms-input-placeholder ( culoare: #65737e; )

În sfârșit, stilul pictogramei. Principalul lucru este că ar trebui să fie deasupra intrării, așa că îi atribuim poziția: absolute . Marginile ajută la poziționarea pictogramei în interior poziție de vârf cu 50%.

Următorul set de reguli determină ce se întâmplă cu câmpul de căutare la trecerea cursorului. În acest exemplu, dorim să schimbăm culoarea de fundal. Pentru a scăpa de strălucirea galbenă sau albastră din jurul intrării (pe care browserele le adaugă uneori), setați conturul: niciunul .

Container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:activ( outline:none; fundal: #ffffff; )

Pentru a face tranziția, trebuie să adăugăm câteva linii de cod. Să revenim la regula în care am definit stilul de intrare.container-1 input#search . Înainte de parantezele de închidere, adăugați următoarele:

Webkit-tranziție: fundal .55s ușurință; -moz-tranziție: ușurință de fundal .55s; -ms-transition: ușurință de fundal .55s; -o-tranziție: ușurință de fundal .55s; tranziție: fundal .55s ușurință;

Definim o scurtătură pentru proprietatea de tranziție, dar putem defini și acești trei parametri individual. În primul rând, spunem că tranziția ar trebui să afecteze numai proprietatea de fundal. În continuare spunem că tranziția va dura puțin peste jumătate de secundă. În final, definim moderarea efectului de tranziție. ușurința nu este singurul efect care ar putea funcționa aici, am putea folosi, de exemplu, liniar sau ease-in. Ar arăta puțin diferit. Încercați să vedeți ce vă place cel mai mult.

Stilul de intrare ar trebui să arate acum ca codul de mai jos.

Container-1 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #262626; padding-left: 45px; -webkit-border- radius: 5px; -moz-border-radius: 5px-webkit-transition: ușurință de fundal .55s;

În acest exemplu, căutarea va începe de la pictograma vizorului. Când treceți cu mouse-ul peste pictogramă, căutarea se va extinde, după care puteți introduce interogarea. Majoritatea codului din acest exemplu va fi foarte asemănător cu cel anterior.

Stilul de intrare pentru această tranziție este diferit. Intrarea este mult mai mică, așa că icoana poate ajunge în spatele pieței. Toate celelalte proprietăți precum fundalul sau culoarea fontului vor rămâne, nu dorim să schimbăm complet stilul de căutare.

Container-2 input#search( lățime: 50px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #262626; padding-left: 35px; -webkit-border- radius: 5px; -moz-border-radius: .55s ease: width;

După cum puteți vedea, am suprascris proprietatea de tranziție pentru a afecta numai lățimea. Am păstrat timpul același pentru că este suficient de rapid pentru a nu irita utilizatorii, dar suficient de lung pentru a crea un efect plăcut.

Mai jos este codul pentru a recolora textul substituent.

Container-2 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-2 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 2 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-2 input#search:-ms-input-placeholder ( culoare: #65737e; )

Încă o dată avem un stil CSS pentru pictogramă. Rămâne la fel ca în exemplul precedent.

Container-2 .pictogramă (poziție: absolut; sus: 50%; margine-stânga: 17px; margine-sus: 17px; z-index: 1; culoare: #4f5b66; )

Ultimul lucru pe care trebuie să-l facem este să definim cum va arăta căutarea de așteptare. În următorul fragment de cod, prima regulă asigură că nu există nicio strălucire indusă de browser pe formular și că caseta de căutare rămâne extinsă pe măsură ce tastați - pe măsură ce introduceți. Regula de mijloc pur și simplu extinde intrarea la lățimea completă la trecerea cu mouse-ul.

Container-2 input#search:focus, .container-2 input#search:active( outline:none; width: 300px; ) .container-2:hover input#search( width: 300px; ) .container-2:hover . pictogramă (culoare: #93a2ad; )

Ultimul lucru care se întâmplă în codul de mai sus este că pictograma își schimbă culoarea atunci când trece cu mouse-ul. Acesta este doar un detaliu pentru a arăta rapid utilizatorului că caseta de căutare este activă și nu inactivă. Această modificare nu a fost implementată pentru tranziție.

Dintre toate cele patru exemple, acesta este cel mai subtil, atât din punct de vedere al codului, cât și din punct de vedere vizual. În acest caz, pictograma ferestrei de vizualizare va pluti ușor și va crește în dimensiune.

Din nou Marcaj HTML pictograma și caseta de căutare sunt aceleași ca în cele două exemple anterioare. Desigur, cu excepția .container-3 .

Nu este nimic special despre stilul CSS pentru acest exemplu. În cea mai mare parte, începutul este foarte asemănător cu primele exemple, în care starea implicită nu este diferită. Mai jos este codul pentru container și intrare. Rețineți că de data aceasta nu există nicio tranziție la intrare.

Container-3( lățime: 300px; vertical-align: middle; white-space: nowrap; position: relative; ) .container-3 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt culoare: #262626 -webkit-border-radius;

Din nou avem reguli de substituent.

Container-3 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-3 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 3 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-3 input#search:-ms-input-placeholder ( culoare: #65737e; )

În aparență, pictograma pentru acest exemplu este aceeași. Aceeași poziție, aceeași culoare etc. Totuși, i-am adăugat o tranziție. Aceste tranziții sunt atribuite tuturor proprietăților, ceea ce este mai scurt decât declararea lor individuală.

Container-3 .icon( poziție: absolut; sus: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; culoare: #4f5b66; -webkit-transition: all .55s ease; -moz -tranziție: toate .55s ease; -ms-transition: toate .55s ease;

Există mai multe lucruri care se întâmplă în codul de mai sus. Mai întâi, am schimbat culoarea de trecere cu mouse-ul a pictogramei și am mutat-o ​​puțin mai sus, astfel încât să fie centrată vertical când este mărită. În al doilea rând, am adăugat o transformare la pictograma de la trecerea cursorului, astfel încât să devină de 1,5 ori dimensiunea inițială. Deoarece tranziția definită anterior a fost configurată să afecteze Toate proprietăți, pictograma pare să crească la trecerea cursorului.

Să aruncăm o altă privire la pentru a afla mai multe despre transformare.

Butonul de trecere cu mouse-ul Spre deosebire de acesta din urmă trei exemple , acesta va fi mai dificil. Când cursorul este pornit top parte introducere, se va face clic pe un buton care vă permite să continuați - cum ar fi Trimiteți sau Go . Există o pictogramă în interiorul butonului.

HTML

CSS-ul este diferit în acest exemplu, vă rugăm să rețineți! Mai jos este un fragment al stilului containerului. În primul rând, poziția: lipsește relativ; Acest lucru nu mai este important, deoarece pictograma nu se bazează pe ea pentru a se potrivi deasupra intrării. Cu toate acestea, avem overflow:hidden . Acest lucru împiedică afișarea butonului atunci când nu este în așteptare. Din punct de vedere tehnic, butonul care apare este în dreapta intrării, dar datorită overflow:hidden nu apare atunci când depășește lățimea containerului - containerul și intrarea au aceeași lățime.

Container-4( overflow: ascuns; lățime: 300px; aliniere verticală: mijloc; spațiu alb: nowrap; )

Intrarea de mai jos nu are o tranziție deoarece acum nu mai este un element.

Container-4 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #fff; padding-left: 15px; -webkit-border- raza: 5px; -moz-border-radius: 5px;

Următorul fragment este pentru schimbarea culorii substituenților.

Container-4 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-4 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 4 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-4 input#search:-ms-input-placeholder ( culoare: #65737e; )

Mai jos este codul pentru stilul butonului de pe mouse. Pentru a-l păcăli să vină din lateral, trebuie să îl plasați direct în spatele intrării și să îl ascundeți înainte de a ținti. Un buton este un element care se schimbă - se mișcă - deci este cel care definește tranziția. Pentru a ușura lucrurile, am definit o tranziție care să afecteze toate proprietățile.

Container-4 button.icon( -webkit-border-sus-dreapta-rază: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius -bottomright: 5px-bottom-right-radius: #232833; .55s ușurință)

Pentru estompare, butonul trebuie să fie plasat deasupra intrării. Acest lucru se realizează prin marjă negativă. Am setat anterior opacitatea butonului la 0, așa că trebuie să-l resetam la 1 pentru a face și butonul vizibil.

Ultima regulă schimbă fundalul butonului doar când treci cu mouse-ul peste buton. Este bine să anunțați utilizatorul că butonul este activ și poate face clic pe el pentru a trimite o cerere; nu are rost să ai un buton dacă pare inactiv.

Container-4:buton de trecere.pictogramă, .container-4:buton.pictogramă activ, .container-4:buton de focalizare.icoană (contur: niciunul; opacitate: 1; margine-stânga: -50px; ) .container-4: hover button.icon:hover( fundal: alb; )

Ei bine, am ajuns la finalul experimentelor noastre CSS! Am luat-o pe cea principală formular de introducere caută și a folosit un set mic de efecte pentru a-și schimba comportamentul. Cum altfel ai putea schimba intrarea? Ce alte aspecte ați aplica tranzițiilor sau transformărilor CSS? Spune-ne despre asta în comentarii!

Salutări tuturor cititorilor și abonaților site-ului. Astăzi voi vorbi despre cum să mă machiez HTML elegant formular de căutare pentru site.

Pe majoritatea site-urilor și blogurilor cu o cantitate mare Astfel de formulare sunt folosite pentru o varietate de informații. Ele permit vizitatorilor să găsească articolul dorit prin cuvinte cheie, cred că toată lumea le-a văzut.

Din punctul de vedere al browserului, acestea sunt simple Formulare HTML, cu două elemente: un câmp text și un buton care trimite o solicitare. Uneori este posibil să nu existe un buton, atunci formularul este trimis prin apăsarea tastei Enter.

Ca exemplu, am luat una dintre lucrări de pe premiumpixels.com. Iată un link către postarea în sine. Acesta este gratuit fisier PSD cu designul a șase tipuri de forme, arată așa cum se arată în imaginea de mai jos. Puteți descărca PSD-ul însuși de pe site-ul respectiv, deoarece este distribuit gratuit.

Ne vom limita la a crea lumină și versiune întunecată, deoarece al treilea este de culoare albastră foarte asemănătoare cu cea ușoară.

Ce obținem în cele din urmă, vedeți mai jos:

Deci, după cum am spus, codul HTML este un formular cu două elemente de intrare. Pentru ușurință în proiectare, le-am înfășurat pe fiecare într-un bloc div.

Pentru toate tipurile de design, acest cod va fi același.

Cei care au lucrat cu Drupal 7 pot vedea că această structură este foarte asemănătoare cu formularul de căutare standard din Drupal 7. Este. Dacă încorporați acest design în site-ul dvs. folosind acest CMS, nu va trebui să modificați nimic Ieșire HTML(cu excepția substituentului, vezi mai jos).

Pentru câmpul de intrare setăm atributul substituent. Valoarea acestui atribut este afișată în interiorul câmpului de intrare și dispare când câmpul primește focus. O proprietate foarte convenabilă.

Implicit în browsere diferiteîntreg acest formular de căutare va arăta diferit și nu foarte elegant peste tot. De exemplu, apariția sa în Opera și Safari este prezentată mai jos:

Prin urmare, nu ne putem lipsi de marcaje de stil. Să ne uităm la stilurile pentru versiunea luminoasă rotundă. ÎN fișier CSS trebuie introduse următorul cod:

#search-block-form( lățime:248px; înălțime:28px; chenar-radius:15px; chenar:#c9c9c9 solid 1px; background:url(images/searchBg.png) Stânga sus repetare-x; ) .focus-active( chenar-culoare:#aaa !important; fundal:#fff !important; ) #search-block-form input( padding:0; margin:0; display:block; border:none; outline:none ; background:none; lățime:100%; 2px no-repeat; ) #search-block-form .form-actions input:hover( cursor:pointer; ) #search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; ) # search-block-form .form-item( lățime:210px; padding:0px 5px; float:right; height:28px; ) #search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif: auto !important;

Să ne uităm la el în ordine și mai detaliat. Mai întâi, setăm formularul în sine cu identificatorul #search-block-form dimensiunile, culoarea chenarului și rotunjirea colțului.

#search-block-form( lățime:248px; înălțime:28px; chenar-radius:15px; chenar:#c9c9c9 solid 1px; background:url(images/searchBg.png) stânga sus repetare-x; )

Toate elementele interioare nu vor avea o culoare de fundal sau o chenar, așa că vom suprascrie toate proprietățile implicite ale ambelor etichete de intrare.

#search-block-form input( padding:0; margin:0; display:block; border:none; outline:none; background:none; lățime:100%; înălțime:100%; )

Dacă este posibil, vom seta designul div-urilor în care sunt înfășurate elementele, și nu al div-ului în sine.

Blocul de acțiuni de formular se va lipi de partea stângă, iar blocul de elemente de formular se va lipi de partea dreaptă. Butonul de trimitere formular are text, dar nu avem nevoie de el, așa că îl eliminăm folosind următoarea metodă binecunoscută.

#search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; )

#search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; )

Acum să ne uităm la codul JavaScript.

/* Copiați codul de mai jos în fișierul js. (JavaScript). */ $(document).ready(function(e) ( $("input").placeholder(); $("#search-block-form .form-item input").focus(function())( $ ( "#search-block-form").addClass("focus-active"); .blur(function())( $("#search-block-form").removeClass("focus-active"); ) ); )); /* Sfârşit */

S-ar părea, de ce este nevoie de JavaScript aici? De fapt, adaugă câteva lucruri utile de utilizare.

În primul rând, proprietatea substituent a venit cu HTML5, iar suportul său în browserele mai vechi lasă mult de dorit. Dar există o soluție simplă în formă plugin jQuery jQuery-Placeholder , care va asigura suport pentru această proprietate în toate browserele (inclusiv chiar și IE6!).

Pentru a face acest lucru, conectați fișierul în sine și activați această funcție:

$("input").placeholder();

Dacă am conectat deja jQuery, atunci putem face altceva. De exemplu, să presupunem că atunci când un formular primește focalizare, se schimbă cumva.

Pentru aceasta am creat o clasă specială focus-active. Când adăugați această clasă într-un formular, se schimbă culoarea de fundal în alb, iar culoarea chenarului devine puțin mai închisă. Formularul va părea să reacționeze la acțiunile utilizatorului.

Focalizare activă( culoarea chenarului:#aaa !important; fundal:#fff !important; )

Clasa.placeholder formatează textul din atributul substituent în browserele mai vechi. Această clasă poate fi folosită numai dacă folosim același plugin jQuery.

Substituent(culoare:#cbcbcb !important;)

Asta e tot. Am creat un formular de căutare care este ușor de integrat în majoritatea site-urilor web.

Alte versiuni nu sunt foarte diferite, vezi sursă pagini demo, sunt comentariile necesare.

Asta e tot pentru azi. Scrieți în comentarii despre ce ați dori să citiți în noile postări de blog și, de asemenea, abonați-vă la RSS și fiți primul care primește informații despre actualizările site-ului!

sala de operatie sistem Windows oferă mai multe modalități de căutare a fișierelor și folderelor. Pentru a căuta fișiere, foldere, programe și mesaje E-mail Pe un computer, puteți utiliza caseta de căutare din meniul Start. Dar când încerc să caut ceva în meniul Start, câmpul de căutare lipsește.

Există mai multe opțiuni pentru a readuce totul la locul său.

Cel mai simplu mod este să încerci să returnezi câmpul de căutare folosind Windows. Deschideți Panoul de control - Programe și caracteristici. Selectați fila „Activați sau dezactivați componentele Windows”. Găsim componenta Windows Căutare. Dacă componenta nu este selectată, bifați caseta.

Faceți clic pe OK. Acum verificăm dacă serviciul de căutare Windows este activat sau nu. Pentru a face acest lucru, deschideți Panoul de control - Administrare - Servicii. Verificarea modului Servicii Windows Căutare. Ar trebui setat la Automat.

Aplica. Pentru a face acest lucru, în meniul Start - Run, introduceți comanda gpedit.msc și OK. Acum căutăm Configurarea utilizatorului - Șabloane administrative - Meniul Start și Bara de activități. În jumătatea dreaptă a ferestrei, căutați elementul Eliminați linkul „Căutare” din meniul „Start”. Să verificăm valoarea acestui parametru. Nu ar trebui să fie setat.

Această opțiune va fi utilă pentru acei utilizatori care au o versiune de Windows, alta decât Pro, Enterprise și Ultimate. Numai aceste versiuni au suport pentru Editorul de politici de grup local.

Deschideți editorul de registry: faceți clic Cheia Win+ R și introduceți comanda regedit și Ok. Găsirea secțiunii

dacă există un parametru NoFind în această secțiune, acesta trebuie șters.

Dacă site-ul dvs. are deja o cantitate suficientă de conținut, trebuie să vă gândiți căutare convenabilă pe site. Desigur, puteți utiliza instrumentele CMS încorporate ale site-ului dvs. sau, dacă site-ul dvs. este creat HTML pur, puteți scrie un script care va căuta pe site-ul HTML. Dar există o a treia opțiune și este mai optimă - căutarea site-ului folosind motoarele de căutare.

Deci, de ce este căutarea pe site din motoarele de căutare cea mai eficientă? Există mai mulți factori în favoarea acestui lucru:

• În primul rând, și cel mai important: motoarele de căutare, oricât de banal ar suna, se specializează în căutare. Acesta este motivul pentru care ar trebui să aveți încredere în calitatea algoritmilor lor de căutare.
• Motoarele de căutare țin cont de morfologia limbii;
• Sunt folosite sfaturi de căutare;
• Remedierea erorilor în interogări de căutare;
• Contabilitatea statisticilor de căutare.

Motorul de căutare Yandex oferă gratuit instrument la îndemână integrarea căutării: Yandex.Search pentru site.

După cum am spus deja, căutarea pe site ia în considerare morfologia limbii, adică ia în considerare diverse forme cuvinte, variații de ortografie, erori, greșeli de scriere etc. Căutarea Yandex vă permite, de asemenea, să căutați nu numai după un anumit cuvânt, ci și după sinonimele acestuia. Puteți crea o bază de date de sinonime pentru fiecare cuvânt pe care doriți să-l utilizați în căutarea dvs.

Căutarea unui site de pe Yandex este simplă și setări flexibile, îi puteți personaliza cu ușurință aspectul: lăsați designul standard, familiar de la Yandex sau proiectați-l în culorile site-ului dvs. Aveți control deplin asupra personalizării: de la aspectul acesteia, până la Stiluri CSSși elemente de căutare. Căutarea este efectuată nu numai de documente text, dar și pe baza de imagini și videoclipuri, acestea sunt afișate într-o previzualizare, al cărei design poate fi și modificat.

Atunci când căutați pe site, precum și când căutați bara de căutare pe yandex.ru, atunci când introduceți un cuvânt în bara de căutare, vi se va oferi o listă de sfaturi care vor accelera procesul de căutare. Yandex va crea automat o bază de date cu interogări de căutare private și va oferi indicii în conformitate cu aceasta.

Șirul de căutare poate fi completat cu un instrument pentru rafinarea rezultatelor căutării. Aceasta înseamnă că o persoană va putea găsi exact ceea ce are nevoie, cunoscând data aproximativă de publicare a materialului sau secțiunea site-ului în care este postat (blog, articole, ajutor și suport), sau formatul și limba acestuia. .

Căutarea pe site vă va îmbunătăți și vă va accelera indexarea în motorul de căutare Yandex și, de asemenea, vă va ajuta să vă creați propriul clasament al paginilor în funcție de importanță, conform căruia rezultatele vor fi returnate doar să raportați aceste pagini către Yandex robot.

În statisticile de căutare puteți vedea informatii detaliate despre interogările de căutare ale vizitatorilor site-ului pentru o anumită perioadă de timp selectată.

Pentru a primi un formular de căutare pentru site-ul dvs., va trebui să specificați numele de căutare, adresa site-ului și să fiți de acord cu termenii și condițiile. Apoi, puteți personaliza aspectul formularului de căutare și aspectul rezultatelor căutării. După aceasta, veți primi cod HTML gata de instalat pe site-ul dvs. web. Mai mult instrucțiuni detaliate Vezi mai jos pentru instalare.

Motorul de căutare Google oferă, de asemenea, un instrument convenabil pentru căutarea site-ului dvs.: Căutare personalizată Google: Căutați site-uri web, este, din păcate, plătită, dar are posibilitatea de a câștiga bani în plus din publicitatea AdSense.

Să spunem imediat că costul serviciului anual de căutare pentru un site web de la Google vă va costa cel puțin 100 USD. Costul depinde de dimensiunea site-ului dvs. și de numărul mediu de solicitări anuale.

Google Search for job îți oferă cele mai largi oportunități căutați folosind aceleași tehnologii ca în căutarea Google. Google garantează o relevanță ridicată, de ex. conformitatea cu solicitari, functionalitate, integrare la cheie.

Să enumerăm principalele caracteristici ale căutării pe site de la Google:

• Personalizare. Puteți proiecta căutarea după cum doriți, puteți elimina logo-ul Google și îl puteți plasa pe al dvs., schimbați culorile, forma, în general întregul aspect.
• Multilingv. Căutarea este posibilă în orice limbă, puteți seta limba implicită sau va fi detectată automat.
• Rezultate părtinitoare. Puteți ajusta manual clasarea și selecția rezultatelor căutării în funcție de data publicării, de exemplu, cu cât materialul este mai nou, cu atât se clasează mai sus în rezultate.
• Rafinarea după etichete este ca și rafinarea rezultatelor căutării în Yandex, creați categorii de materiale pe care utilizatorul, dacă este necesar, le caută.
• Căutați imagini și ilustrați rezultatele căutării cu imagini pe care le puteți redimensiona sau se vor ajusta automat;
• Fără publicitate;
• Indexarea la cerere, de ex. daca ai adaugat material nou, sau ați făcut modificări celui vechi, apoi puteți trimite singur robotul Google pentru a remedia actualizările.
• Sinonime. Catalogul de interogări este completat automat cu sinonime, diverse opțiuni cuvinte de ortografie (Toyota, Toyota), precum și abrevieri și decodificarea acestora.
• Selectați adresa URL pentru completare automată. Aici puteți configura și controla manual lista de solicitări care se deschid pentru utilizator atunci când începe să introducă o interogare.
• Beneficiile căutării Google includ faptul că puteți căuta nu doar un site, ci mai multe.
• Conectarea căutării pe site cu altele servicii Google. Veți putea urmări statisticile interogărilor și comportamentul vizitatorilor și serviciul AdWords vă va permite să câștigați bani prin publicitate.

Când adăugați o căutare Google pe site-ul dvs., va trebui să vă denumiți „ motor de căutare", descrieți și indicați site-urile pe care se va efectua căutarea. Apoi trebuie să selectați designul barei de căutare, după care vi se cere să încercați căutarea. Apoi veți primi un cod pe care îl puteți adăuga la Site-ul tău.

Acum să ne uităm la instalarea Yandex.Search pentru un site web folosind site-ul nostru Nubex ca exemplu. Codul de serviciu poate fi introdus în cms, integrat în site, sau pur și simplu puteți lipi codul în orice bloc adecvat al site-ului.

1. Accesați site-ul web Yandex.Search pentru site și faceți clic pe butonul „Instalare căutare”.

2. Completați câmpuri obligatorii, adăugați site-ul dvs. în zona de căutare, nu uitați să includeți adresa dvs. de e-mail. Pentru a adăuga cu succes site-ul dvs. în Zona de căutare, asigurați-vă că site-ul dvs. este adăugat la . Treceți la pasul 2.

3. Faceți setări pentru aspectul barei de căutare: culoare, font, cu sau fără fundal. Treceți la pasul 3.

4. În al treilea pas, se fac setări precise pentru cum va arăta rezultatul căutării și pe ce pagină va fi localizat (pe pagina Yandex sau pe site-ul dvs.). În partea de jos a paginii există o previzualizare a rezultatelor pe care vă puteți concentra. Treceți la pasul 4.

5. Verificați performanța căutării pe site-ul dvs. Și treceți la pasul următor.

6. Acum trebuie să copiați codul de serviciu și să îl instalați pe site. Vă rugăm să rețineți că pentru căutare și rezultatele căutării există două coduri diferite. De ce este necesar acest lucru? Puteți configura un șir de căutare într-un câmp sau într-o coloană laterală și puteți afișa rezultatele pe pagină separată. În acest fel, utilizatorul va adresa o interogare și va fi redirecționat către o pagină cu rezultatele.

7. Codul rezultatelor căutării poate fi de 2x tipuri diferite: iframe și html&css. Care este diferența? Iframe este o opțiune de cod mai simplă, este mai potrivită pentru site-uri cu design complexe, dar limitează capacitatea de a personaliza aspectul rezultatelor. Html&CSS - rezultatele căutării vor fi proiectate în conformitate cu stilul CSS al site-ului dvs., iar codul va fi încorporat în întreaga structură a paginii site-ului.

8. Acum accesați panoul administrativ al site-ului. Am decis să setăm bara de căutare la pagina principala site-ul nostru, deci accesați secțiunea „Documente site” -> „Coloana Acasă”. Și faceți clic pe butonul „Creați bloc de text”.

9. În câmpul de inserare a textului, faceți clic pe butonul „Sursă”. Codul HTML al paginii se va deschide aici; Faceți clic pe butonul „Salvare”.

10. Actualizează-ți pagina site-ului web. Ar fi trebuit să apară bara de căutare.

Folosind oricare sistem utilizator căutare, fie că este vorba despre o căutare pentru un site Google sau Yandex, trebuie să vă amintiți că căutarea nu se efectuează pe site-ul dvs. ca atare, ci pe paginile site-ului dvs. care sunt prezente în indexul motorului de căutare selectat. Prin urmare, trebuie să vă asigurați că toate paginile de pe site-ul dvs. pe care doriți să le puneți la dispoziție pentru căutare sunt deschise pentru indexare și incluse în indexul motorului de căutare.

Creatorul de site-uri web Nubex are o căutare încorporată, al cărei widget poate fi activat pentru barele laterale.

Yandex.Search pentru site folosește toate tehnologiile căutării „mare” Yandex. Aceasta include luarea în considerare a diferitelor forme de cuvinte, corectarea erorilor și greșelilor de scriere, precum și a dispozițiilor incorecte ale tastaturii.

Căutarea poate găsi pe site nu numai cuvintele care apar în interogarea utilizatorului, ci și sinonimele acestora. De exemplu, dacă un utilizator caută informații despre lumea jocurilor de Warcraft, el nu va scrie neapărat întregul titlu. Solicitarea lui poate arăta ca , sau chiar [BoV]. Dar Yandex va înțelege de ce are nevoie o persoană și îi va oferi răspunsul corect.

Yandex.Search pentru site înțelege diferite variante ortografie cuvinte, chiar și incorecte

Puteți completa baza de date principală a sinonimelor de căutare cu propriile opțiuni, specifice site-ului și utilizatorilor dvs. Pentru a face acest lucru, Yandex.Search a implementat o interfață simplă și intuitivă pentru site.

În coloana din stânga, adăugați cuvinte pe care utilizatorii le introduc în formularul de căutare, iar în coloana din dreapta, adăugați sinonime corespunzătoare din paginile site-ului sau site-urilor dvs.

Tu alegi cum arată căutarea Yandex pe site-ul tău. Poate fi un element izbitor al interfeței sau nu prea vizibil, dar un asistent vizibil în navigare - totul depinde de preferințele și obiectivele tale.

Depinde de dvs. dacă să părăsiți designul standard, familiar pentru toți utilizatorii Yandex, sau să proiectați bara de căutare și rezultatele în propriile culori corporative.

Și dacă se dovedește că opțiunile standard de design pentru formularul de căutare și rezultatele căutării nu sunt suficiente pentru a se potrivi perfect căutarea în designul site-ului dvs., dvs. (sau dezvoltatorii dvs.) puteți aplica propriile stiluri CSS la elementele necesare ale formularul sau rezultatele căutării. Datorită acestui lucru, puteți controla complet aspect căutați și completați-l cu elementele de care aveți nevoie.

Dacă documentele găsite conțin videoclipuri sau imagini, previzualizările acestora vor fi inserate în rezultatele căutării. De asemenea, puteți personaliza aspectul acestor previzualizări aplicând propriile stiluri CSS.

Rezultatele căutării se deschid fie pe pagina site-ului dvs., fie pe Yandex - astfel.

Căutarea pe site, ca și căutarea principală Yandex, conține sugestii de căutare - accelerează introducerea interogărilor. Chiar înainte ca un vizitator al site-ului să tasteze întreaga interogare, el poate accesa opțiunea dorită. Funcționează mult mai repede în acest fel.

Yandex va crea un set de sugestii de căutare special pentru nevoile dvs. Ei vor ține cont de interogările utilizatorilor dvs. și de conținutul site-urilor pe care doriți să căutați.

Este în regulă dacă utilizatorii greșesc atunci când introduc o interogare. Căutarea site-ului poate corecta greșelile de scriere, erori gramaticaleși dispunere incorectă a tastaturii - inclusiv toate odată. Remedierea funcționează pentru solicitările în rusă, engleză, ucraineană, belarusă, turcă și alte câteva limbi.

Sugestiile de căutare pot corecta erorile și greșelile de scriere, precum și dispozițiile incorecte ale tastaturii.

Puteți edita sugestiile de căutare sugerate de Yandex. De exemplu, adăugați altele noi, modificați ordinea celor existente și ștergeți-le pe cele inutile. Acest instrument face ușor să le spuneți utilizatorilor ce să caute pe site-ul dvs.

Puteți ajuta vizitatorii să găsească exact ceea ce au nevoie pe site-ul dvs. Acesta ar putea fi, de exemplu, un articol publicat în august 2010 sau un document din secțiunea Recenzii și teste. Căutarea unui site oferă un instrument pentru rafinarea interogărilor - puteți selecta o secțiune a site-ului, puteți specifica o perioadă de timp, precum și formatul sau limba documentului.

Aveti si posibilitatea de a preciza Cuvinte cheie, pe care vizitatorul îl poate adăuga la cerere. De exemplu, dacă site-ul dvs. are legătură cu jocuri, atunci cuvintele cheie ar putea fi „joc”, „opinie”, „cumpără” și așa mai departe.

Așa arată rafinamentele în rezultatele căutării.

Dacă trebuie să organizați o căutare pe mai multe site-uri diferite sau pe un grup de site-uri pe același subiect, utilizați teme de căutare. O singură temă de căutare poate uni până la 100.000 de site-uri. Lista lor poate fi editată cu ușurință folosind solicitări HTTP.

Pregătiți o listă de site-uri, creați subiect nouși trimite-l pentru moderare. După confirmarea subiectului, organizați o căutare pe baza acestuia folosind serviciul Yandex.Search pentru site sau Yandex.XML.

Creați o temă: http://site.yandex.ru/themes/new/

Dacă doriți să aflați ce caută vizitatorii site-ului dvs., vizitați secțiunea Statistici. Conține informații despre solicitările utilizatorilor.

Statisticile cererilor sunt actualizate zilnic și includ următoarele informații:

• lista de interogări de căutare;
• de câte ori a fost adresată fiecare dintre aceste întrebări;
• câte rezultate au fost afișate pentru fiecare interogare;
• câte clicuri au fost din rezultatele căutării.

Statisticile vă vor ajuta să înțelegeți ce secțiuni ale site-ului dvs. necesită îmbunătățiri.

Interfața statistică a platformei de căutare.

Folosim acest tip de căutare în mod constant, în fiecare zi.

Pentru a găsi răspunsul la unele dintre întrebările noastre, trebuie doar să introducem o interogare bara de adresași apăsați Enter

CTRL + F Găsiți »

Internet

În dreapta acestui câmp se află cantitatea cererii căutate. Puteți trece de la un rezultat la altul folosind săgețile sus și jos. Cuvântul selectat în prezent va fi marcat cu o culoare întunecată. Acest lucru vă va ajuta să determinați unde vă aflați pe site. De asemenea, rețineți că dacă nu puneți un spațiu după „internet”, browserul va indica cuvântul care conține setul de caractere introdus. „Internet” - „INTERNET”. Prin urmare, dacă aveți nevoie de o potrivire exactă a rezultatului căutării cu cuvântul căutat, puneți un spațiu după acesta.

Comandă rapidă de la tastatură CTRL + F

Găsiți (…) pe Google

În mod similar, puteți găsi date despre orice imagine (imagine) aflată pe pagina unui site web. În același mod, dați clic pe fotografie Click dreapta mouse-ul și selectați „Găsiți imagine (Google)”

Alexandru Zhurba

În cazurile în care trebuie să lucrezi cu document mare, căutarea unui anumit cuvânt sau expresie poate fi dificilă și consumatoare de timp. Microsoft Word permite căutare automatăîn tot documentul și înlocuiți rapid cuvintele și expresiile folosind instrumentul Găsește și înlocuiește. Vrei să înveți cum să folosești acest instrument? Atunci citește cu atenție această lecție până la sfârșit!

De exemplu, să luăm parte dintr-o lucrare celebră și să folosim comanda Găsește pentru a găsi numele personajului principal din text.

Puteți apela comanda Găsiți apăsând Ctrl+F de pe tastatură.

Pentru a accesa mai multe opțiuni de căutare, utilizați meniul drop-down găsit în câmpul de căutare.

Există momente când se comite o eroare care se repetă pe tot parcursul documentului. De exemplu, numele cuiva este scris greșit sau un anumit cuvânt sau expresie trebuie schimbat cu altceva. Puteți utiliza funcția Găsiți și înlocuiți pentru a efectua rapid corecții. În exemplul nostru, vom schimba numele complet al Microsoft Corporation cu abrevierea MS.

Poti sa te duci la căsuță de dialog Găsiți și înlocuiți apăsând combinația de taste Ctrl+H de pe tastatură.

Pentru selecție parametri suplimentari Găsiți și înlocuiți faceți clic pe Mai multe în caseta de dialog Găsiți și înlocuiți. Aici puteți alege opțiuni precum Numai cuvânt întreg sau Ignorați semnele de punctuație.

Buna ziua. Înainte de a trece la subiectul nostru de astăzi, aș dori să ne felicit pe toți pentru sărbătoarea trecută - Marea Victorie. Spune-le bunicilor și străbunicilor care au luptat și, de asemenea, care au lucrat în spate. Îți mulțumesc că ai stat, ai depășit, ai îndeplinit o ispravă eroică, pentru cer senin, pentru pace în pământul nostru. Și faceți o plecăciune scăzută celor care au apropiat ceasul Victoriei. Mulțumesc!!!

Acum să revenim la subiectul nostru. Astăzi vom vorbi despre cum să folosiți căutarea în browser. Să ne uităm la câteva Caracteristici Google Crom.

Folosim acest tip de căutare în mod constant, în fiecare zi. Pentru a găsi răspunsul la unele dintre întrebările noastre, trebuie doar să introducem interogarea în bara de adrese și să apăsăm Enter

Pe măsură ce introducem cererea noastră, browserul sugerează posibile combinații cu aceasta pe care alți utilizatori de Internet le-au tastat anterior. Avem de ales: căutați exact conform solicitării noastre sau selectați o altă expresie din lista de browser propusă.

Exemplul arată că ni se cere să căutăm sistemul Google, cu toate acestea, puteți trece la alt sistem.

Uneori trebuie să găsim un cuvânt sau o expresie pe pagina unui site web. Dar pentru că cantitate mare informații, acest lucru poate fi uneori dificil de realizat. Să presupunem că ai aflat numele melodiei artistului tău, mergi la resursa în care sunt prezentate toate compozițiile sale. Găsirea drumului potrivit printre toate celelalte este destul de dificilă. În acest caz, ne va ajuta o metodă, pe care acum o vom analiza în detaliu.

Deci, de exemplu, ai deschis un portal pe care, după cum presupui, se află cuvântul pe care îl cauți, numele orașului, compoziția etc. Pentru cautare rapida pe pagina site-ului folosim comanda rapidă de la tastatură CTRL + F sau mergem la meniul principal al browserului și selectăm „Găsiți”

După care în dreapta colțul de sus un câmp pentru introducerea cuvintelor va apărea în fereastra browserului. Pe măsură ce introducem caractere, browserul va începe să caute și să evidențieze în text ordinea literelor pe care o introducem.

De exemplu, să vedem câte cuvinte „internet” se află pe pagina principală a site-ului nostru.

Îl indicăm în câmpul specificat și browserul îl evidențiază galben rezultatele căutării.

În dreapta acestui câmp se află cantitatea cererii căutate. Puteți trece de la un rezultat la altul folosind săgețile sus și jos. Cuvântul selectat în prezent va fi marcat cu o culoare întunecată. Acest lucru vă va ajuta să determinați unde vă aflați pe site.

De asemenea, rețineți că dacă nu puneți un spațiu după „internet”, browserul va indica cuvântul care conține setul de caractere introdus. „Internet” - „INTERNET”. Prin urmare, dacă aveți nevoie de o potrivire exactă a rezultatului căutării cu cuvântul căutat, puneți un spațiu după acesta.

Comanda rapidă de la tastatură CTRL + F pentru a căuta o pagină de resurse poate fi utilizată în orice browser modern. ÎN Firefox dat Câmpul este situat în colțul din stânga jos. Atenție.

În timp ce examinăm informații despre o anumită resursă, este posibil să întâlnim un termen sau un cuvânt despre al cărui sens nu avem nicio idee. Pentru mai mult primire rapidă date despre acest cuvânt sau frază, pur și simplu selectăm un fragment de text de pe site și folosim butonul drept al mouse-ului pentru a apela un meniu în care selectăm „Găsiți (...) în Google” (fraza sau cuvântul selectat va fi indicat între paranteze). De exemplu, în exemplul nostru arată așa.

În mod similar, puteți găsi date despre orice imagine (imagine) aflată pe pagina unui site web.

În același mod, faceți clic dreapta pe fotografie și selectați „Găsiți imagine (Google)”

Puteți afla mai multe despre cum să găsiți o imagine în Yandex și Google citind acest articol și aici.

Asta este probabil tot ce este în ea. Astăzi ne-am uitat la capacitățile de căutare din browser. Pana data viitoare.

Cel mai bun mod de a învăța este să fii asistentul unui profesionist. Este puțin mai rău să încerci singur fără supravegherea cuiva care știe. Teoria este utilă doar ca ipoteză care trebuie testată în practică.