Crearea de pagini web folosind FrontPage. Meniu derulant simplu Cum se creează un meniu derulant în prima pagină

21.08.2020 Sfat

Poate fi creat fără JavaScript și/sau jQuery. Pentru a-l crea, utilizați afișarea proprietăților CSS, padding, pseudo-class:hover. Este posibil un meniu de lucru (faceți clic pe „Fork” dacă doriți să proiectați meniul HTML în felul dvs.). Durata videoclipului ~12 min. Nota este destinată designerilor de layout începători și dezvoltatorilor web care fac primii pași pentru a învăța elementele de bază ale HTML și CSS; pentru cei care au studiat cursul „Basele HTML5 și CSS3”.

Crearea unui meniu derulant simplu

Pentru a crea un meniu site-ul folosește de obicei o structură bloc Element de navigare HTMLȘi lista nenumerata. Într-unul dintre elementele listei, o altă listă este încorporată astfel încât să nu fie inclusă în hyperlink. Ar fi posibil să plasați ul în interiorul a, dar în opinia mea aceasta nu este o idee foarte bună, deoarece pseudo-class:hover funcționează și cu elemente li!

În cazul nostru, nu luăm în considerare opțiunea când lista verticală Există, de asemenea, liste imbricate - această sarcină nu este dificilă în sine, dar va cauza dificultăți pentru un designer de layout începător. De asemenea, rețineți că construirea unui meniu se poate face prin găsirea sau scrierea JavaScript-ului adecvat.

Pentru comoditatea de a lucra cu marcaj (deodată vom întâlni o altă navigare), vom adăuga o clasă CSS la elementul nostru de navigare structurală; Vom face cioturi de hiperlinkuri, dar puteți scrie http://site în loc de # :)

Markup HTML pentru un meniu cu un submeniu drop-down

Principalul lucru în CSS: ștergerea valorilor implicite pentru elementele HTML incluse în meniu; ascunderea viitoarei subliste derulante ( submeniu) și afișarea acestuia atunci când treceți cu mouse-ul peste elementul HTML părinte - folosind pseudo-class:hover

Reguli CSS pentru un meniu drop-down.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . meniu ul li, .menu ul( display: inline-block; ) .menu ul( poziție: relativă; margine: 0; umplutură: 0; culoare de fundal: #f63; ) .menu ul ul( afișare: niciunul; poziție: absolut; culoare de fundal: #369; margine-sus: 10px; margine-stânga: -10px; ) .meniu ul a( culoare: #fff; text-decor: niciuna; ) .meniu ul a( culoare: #fff ; text-decor: niciunul; ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )

Meniul creat nu este perfect și poate fi îmbunătățit (gândește-te cum). Succes în dezvoltarea ta și poate că crearea unor astfel de meniuri nu va fi niciodată dificilă!

Meniu vertical orizontal folosit pentru organizarea structurii de navigare a site-ului. Numărul optim de niveluri de cuibărit este unul sau două. Cu cât sunt mai puține niveluri de atașamente, cu atât este mai ușor pentru un vizitator al site-ului să găsească informațiile de care au nevoie. Cum să creați un meniu orizontal obișnuit este descris în detaliu în.

Cum să faci un meniu vertical orizontal

1. Marcaj HTML și stiluri de bază pentru un meniu derulant cu un nivel de imbricare

Marcajul HTML al unui meniu vertical orizontal diferă de un meniu obișnuit prin faptul că trimite la elementul dorit din listă

  • se adaugă o listă imbricată
      sau<оl> .

      Pentru a poziționa submeniul în raport cu meniul principal, sunt declarate următoarele stiluri:
      — pentru un element de listă în care este imbricată o listă derulantă: li (poziție: relativ;) ;
      — pentru meniul derulant ul (poziție: absolut;) , precum și valorile din stânga și de sus.

      Pentru claritate și ușurință de formatare, să adăugăm meniul de sus al clasei în meniul principal și submeniul în meniul derulant.

      Există mai multe moduri de a ascunde un meniu derulant:
      1) afișaj: niciunul;
      2) vizibilitate: ascuns;
      3) opacitate: 0;
      4) transforma: scaleY(0);
      5) folosind biblioteca jQuery.

      Metoda 1. (afisare: nici unul;)

      Meniul drop-down este ascuns folosind .submeniu (afișare: niciunul;) , la trecerea cu mouse-ul este afișat folosind .topmenu li:hover .submeniu (afișare: bloc;) .

      Metoda 2. (vizibilitate: ascuns;)

      Meniul este ascuns folosind .submeniu (vizibilitate: ascuns;) și afișat folosind .topmenu li:hover .submeniu (vizibilitate: vizibil;) .

      Metoda 3. (opacitate: 0;)

      Meniul este ascuns folosind .submeniu (opacitate: 0;) și afișat folosind .topmenu li:hover .submeniu (opacitate: 1;) . Pentru a preveni apariția meniului atunci când treceți cu mouse-ul peste zona în care se află, adăugați vizibilitate: ascuns; , iar când treceți cu mouse-ul, schimbați-l în vizibilitate: vizibil; .

      Metoda 4. (transforma: scaleY(0);)

      Meniul este ascuns folosind .submeniu (transform: scaleY(0);) și afișat folosind .topmenu li:hover .submeniu (transform: scaleY(1);) . Deoarece transformarea implicită a elementului are loc din centru, trebuie să adăugați pentru .submeniu (transform-origin: 0 0;) , i.e. din colțul din stânga sus.

      Metoda 5: Utilizarea jQuery

      $(".five li ul").hide(); // ascunde meniul drop-down $(".five li:has(".submeniu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* selectați un element de listă care conține un element cu clasa .submeniu și adăugați-i o funcție de hover care afișează și ascunde meniul derulant */);

      2. Meniu derulant 3D

      Efecte interesante pot fi create folosind transformări CSS3, de exemplu, făcând să apară un meniu din adâncurile ecranului.

      * ( dimensiunea casetei: border-box; ) body ( margine: 0; fundal: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : nici unul; margine: 0; umplutură: 0; ) nav a ( afișaj: bloc; text-decor: niciunul; contur: niciunul; tranziție: .4s ease-in-out; ) .topmenu ( backface-vizibilitate: ascuns; fundal : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; poziție: relativ; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; înălțime: 70px; înălțime linie: 70 px; umplutură: 0 30 px; greutate font: bold; culoare: #003559; text-transform: majuscule; ) .down:after (conținut: „\f107”; margin-left: 8px; font-family : FontAwesome; ) .topmenu li a:hover (culoare: #E6855F; ) .submeniu ( fundal: alb; chenar: 2px solid #003559; poziție: absolut; stânga: 0; vizibilitate: ascuns; opacitate: 0; z-index : 5; lățime: 150 px; transformare: perspectivă(600 px) rotireX(-90 grade); origine transformare: 0% 0%; tranziție: .6s ease-in-out; ) .topmenu > li:hover .submeniu( vizibilitate: vizibil; opacitate: 1; transform: perspective(600px) rotateX(0deg); ) .submeniu li a (color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )

      3. Meniu derulant extensibil cu logo

      În acest exemplu, secțiunea de sus a paginii conține sigla și navigarea pe site. Logo-ul poate fi o imagine sau un text. Meniul drop-down se extinde treptat de sub elementul din lista de sus, folosind funcția de transformare CSS3.

      Siglă
      * ( box-sizing: border-box; ) body ( margine: 0; fundal: #f2f2f2; ) antet ( fundal: alb; text-align: center; ) antet a ( text-decoration: none; outline: none; display : bloc; tranziție: .3s ease-in-out; ) .logo (culoare: #D5B45B; font-family: „Playfair Display”, serif; font-size: 2.5em; padding: 20px 0; ) nav ( display: table; margin: 0 auto; ) nav ul ( list-style: none; margin: 0; padding: 0; ) .topmenu:after ( continut: ""; display: table; clear: both; ) .topmenu > li ( lățime: 25%; float: stânga; poziție: relativă; font-family: "Open Sans", sans-serif; ) .topmenu > li > a ( text-transform: majuscule; font-size: 14px; font-weight: bold; culoare: #404040; umplutură: 15px 30px; ) .topmenu li a:hover (culoare: #D5B45B; ) .submenu-link:after (conținut: „\f107”; font-family: „FontAwesome”; culoare: moștenire; margin-left: 10px; ) .submeniu ( fundal: #273037; poziție: absolut; stânga: 0; sus: 100%; z-index: 5; lățime: 180px; opacitate: 0; transformare: scaleY(0) ; transformare-origine: 0 0; tranziție: .5s ease-in-out; ) .submeniu a (culoare: alb; text-align: left; padding: 12px 15px; font-size: 13px; chenar-bottom: 1px solid rgba(255,255,255,.1); ) .submeniu li:last-child a ( border-bottom: none; ) .topmenu > li:hover .submeniu ( opacitate: 1; transform: scaleY(1); )

      4. Extinderea meniului drop-down

      Un alt exemplu pentru un meniu vertical. Efectul de mărire atunci când apare meniul se realizează prin reducerea dimensiunii inițiale.submeniu (transform: scale(.8);) , la hover dimensiunea crește la.topmenu > li:hover .submeniu (transform: scale(1);) .

      * ( box-sizing: border-box; ) body ( margine: 0; fundal: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( fundal: alb; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration: none; outline: none; display: block; tranziție: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; poziție: relativ; ) .topmenu > li:after (conținut: ""; poziție: absolut; dreapta: 0; lățime: 1px; înălțime: 12px; fundal: #d2d2d2; sus: 16px; umbră casetă: 4px -2px 0 #d2d2d2; transformare: rotire(30deg); ) .topmenu > li:last-child:after ( fundal: niciunul; casetă -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; culoare: #767676; text-transform: majuscule; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover (culoare: #c0a97a; ) .submeniu (poziție: absolut; stânga: 50%; sus: 100%; lățime: 210px; margin-left: -105px; fundal: #fafafa ; chenar: 1px solid #ededed; indicele z: 5; vizibilitate: ascuns; opacitate: 0; transforma: scara(.8); tranziție: .4s ease-in-out; ) .submeniu li a ( padding: 10px 0; margin: 0 10px; chenar-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submeniu ( vizibilitate: vizibil; opacitate: 1; transformare: scară(1); )

      5. Meniu derulant

      Meniu orizontal cu mini-animație: când treceți cu mouse-ul peste linkuri meniul de sus apare un mic cerc, care însoțește și apariția meniului derulant.

      @import url("https://fonts.googleapis.com/css?.jpg); background-position: centru centru; background-repeat: nu-repeat; background-size: coperta; înălțime: 100vh; poziție: relativă; ) body:before (conținut: ""; poziție: absolut; stânga: 0; jos: 0; înălțime: 100%; lățime: 100%; fundal: liniar-gradient(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration : niciunul; afișare: bloc; culoare: #222; ) .topmenu > li ( afișare: bloc inline; poziție: relativă; ) .topmenu > li > a ( poziție: relativă; padding: 10px 15px; font-family: " Kaushan Script", cursiv; dimensiunea fontului: 1.5em; înălțimea liniei: 1; spațierea literelor: 3px; ) .topmenu > li > a:before ( conținut: ""; poziție: absolut; z-index: 5; stânga: 50%; sus: 100%; lățime: 10px; înălțime: 10px; fundal: alb; chenar-rază: 50%; transformare: translate(-50%, 20px); opacitate: 0; tranziție: .3s; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); opacitate: 1; ) .submeniu ( poziție: absolut; z-index: 4; stânga: 50%; sus: 100%; lățime: 150px; padding: 15px 0 15px; margin-top: 5px; fundal: alb; chenar-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; vizibilitate: ascuns; opacitate: 0; transform: translate(-50%, 20px); tranziție: .3s ; ) .topmenu > li:hover .submeniu ( vizibilitate: vizibil; opacitate: 1; transform: translate(-50%, 0); ) .submeniu a ( font-family: "Libre Baskerville", serif; font-size: 11px; spațiere între litere: 1px; umplutură: 5px 10px; tranziție: .3s liniar; ) .submeniu a:hover (fond: #e8e8e8;)

      Cu dezvoltarea Internet a apărut un protocol de schimb de informații, se numește protocolul HTTP (Protocol de transfer hipertext- protocol de transfer hipertext).Odata cu acest protocol a aparut si un serviciu World wide web(adesea numit WWW sau pur și simplu Web), care oferă o rețea extinsă de servere HTTP transferul de fișiere prin Internet.

      Partea principală a acestor fișiere sunt pagini webfisiere speciale scris în limbaj HTML (HyperText Markup Language– limbaj de marcare hipertext). pagini web publicat în Internet prin plasarea unor astfel de fișiere pe servere HTTP (site-uri web). Conţinut pagini web pot fi diferite și dedicate unor subiecte complet arbitrare, dar toate folosesc aceeași bază - limbajul HTML.
      Majoritatea oamenilor care doresc să-și creeze propriul site web sau pagină sunt familiarizați cu limba HTML numai prin auzite. Prin urmare, programul le poate veni în ajutor Microsoft FrontPage, unul dintre cei mai faimoși constructori de site-uri web.

      FrontPage, inclus în pachetul aplicației Microsoft Office, a devenit primul produs utilizat pe scară largă pentru Internet, care combină părți client și server și oferă posibilitatea de a dezvolta site-ul ca întreg și de a-l instala pe cele mai populare servere. Prima pagina este capabil să preia toate lucrările de programare necesare. in orice caz Prima pagina De asemenea, va deveni un asistent serios pentru dezvoltatorii profesioniști care preferă să aibă control deplin asupra procesului de creație.

      Fereastra programului Prima pagina 2003.

      Program Prima pagina eliberat de companie Microsoft si este realizat in acelasi stil ca si produsele incluse in pachet Microsoft Office, De aceea aspect programul nu este practic diferit de un procesor de text Cuvânt .

      În partea de sus a ferestrei există o bară de meniu și două bare de instrumente: Standard și formatare. Puteți activa sau dezactiva afișarea barelor de instrumente Vizualizare meniu.
      Pe partea stângă este Panoul de vizualizare, cu care puteți comuta între modurile documentului.
      Partea principală a ferestrei este ocupată de zona de lucru, în care pot fi deschise una sau mai multe ferestre care conțin documente individuale.
      În partea de jos a ferestrei se află bara de stare, conținând informații generale. De asemenea, în partea de jos a ferestrei există trei butoane de vizualizare a documentelor.
      Afișarea barelor de instrumente.
      Pentru a gestiona barele de instrumente în Prima pagina puteți folosi aceleași metode ca în Microsoft Word . Și anume:
      în meniu Vedere trebuie să alegi Element din bara de instrumente, iar în noul submeniu care se deschide - instalați casete de selectare vizavi de barele de instrumente de care aveți nevoie; sau faceți clic Click dreapta Pentru orice motiv panouri de control(sau în zona de lângă el) și utilizați meniul contextual în același mod.

      Prima pagina, ca și alte aplicații Microsoft Office, vă permite să adăugați, să ștergeți și să rearanjați elementele de meniu și butoanele din barele de instrumente. De asemenea, este posibil să vă creați complet propriile panouri.
      Pentru a face acest lucru aveți nevoie de:

      ÎN Meniu de servicii alege element Setări
      sau
      V Vizualizare meniu alege Element din bara de instrumente, iar în meniul în cascadă care apare - element Setări
      Ca rezultat al acțiunilor dvs., se va deschide o casetă de dialog Setări, unde se pot instala panourile necesare.

      Creaza un nou pagini web.

      Dacă ai început Prima pagina, asta înseamnă nou Pagină web ați creat deja (la pornire Prima pagina se deschide imediat unul nou gol Pagină web, gata să plaseze text și orice alte elemente).
      Creaza nou Pagină web O poți face în alte moduri:

      Folosind un buton Pagina noua pe Panou standard unelte.
      meniul Fișier selectați submeniul Crea, și apoi - Pagină sau site web;
      folosind combinații Ctrl+N;
      prin utilizarea meniul contextual(funcționează în toate modurile, cu excepția Sarcini și rapoarte) - pentru acest interior Lista de foldere dat Web) trebuie să faceți clic dreapta și în a apărut meniul contextual selectați elementul Creare  Pagina.

      Crearea de pagini folosind un expert și șabloane.

      După cum am menționat mai sus, dacă ați folosit meniul pentru a crea o pagină nouă Fișier  Nou  Pagina sau site web, Acea Prima pagina vă va solicita să utilizați un șablon pentru a crea o pagină nouă.
      Pentru a face acest lucru, va deschide o casetă de dialog, al cărei aspect este prezentat mai jos:

      Pe fila Sunt comune Această casetă de dialog afișează o listă de șabloane Prima pagina disponibil acum. Selectând oricare dintre șabloane, puteți vedea descrierea acestuia în Câmp eșantion.
      Creare FrontPage Web.
      Microsoft FrontPage Web- acesta este un set pagini web, fișiere imagine și alte componente care pot fi vizualizate ca un întreg.
      Dacă faci un site web în Prima pagina, atunci cel mai convenabil mod de a-l depozita este folosirea FrontPage Web.
      cel mai important plus este capacitatea de a redenumi fișierele incluse în FrontPage Web.
      Imaginați-vă că înainte de a vă publica site-ul în Internet Ați observat brusc că câteva dintre fișierele dvs. sunt numite cu nume rusești. - „Acum va trebui să parcurgeți toate fișierele și să schimbați manual linkurile!” te duumete.Aici te va ajuta FrontPage Web- puteți redenumi în siguranță fișierele și Prima pagina va parcurge în mod independent toate celelalte fișiere incluse în FrontPage Webși va redenumi toate linkurile către fișierul pe care l-ați corectat.
      Nu voi descrie toate celelalte avantaje, dar aș dori să spun că pentru a folosi toate posibilitățile Prima pagina, atunci este mai bine să utilizați FrontPage Web.
      Deci, pentru a crea unul nou FrontPage Web faceți clic pe săgeata situată în stânga butonului Pagina nouă din bara de instrumente și selectați elementul din meniul derulant care apare Site-ul…

      Deschiderea paginilor Web.

      Foarte des, atunci când creați un site web, trebuie să editați deja creat pagini web. Puteți reveni la aceeași pagină de câte ori doriți pentru a o edita sau utiliza părți din ea pentru a crea altele noi. pagini web.

      Deschide unul existent Pagină web posibil în oricare dintre modurile existente.

      Din modul Vizualizări de pagină Există patru moduri de a deschide o pagină existentă:

      1 cale

      Dacă lucrezi cu FrontPage Web, apoi selectați fișierul necesar V Lista de foldereși faceți dublu clic pe el cu mouse-ul.

      Metoda 2

      Din meniul Fișier, selectați Ultimele fișiere. Din meniul în cascadă care apare, selectați fișierul dorit.

      3 căi

      Folosind caseta de dialog Deschidere fișier: Fișier  Deschide.

      Previzualizare.

      Pentru a vedea cum arată pagina dvs. direct în browser, puteți utiliza fila Previzualizare în modul de editare pagini web. Dar în acest caz se poate dovedi că browserul Prima pagina nu va afișa unele elemente ale dvs pagini, deci cel mai bine este să:
      utilizați butonul de pe bara de instrumente
      sau în meniul Fișier selectați elementul previzualizare r în browser.

      Dacă ați folosit prima metodă, conținutul paginii dvs. va fi afișat în browserul încorporat Prima pagina.
      Dacă ați folosit a doua metodă, atunci Prima pagina va afișa o casetă de dialog Vizualizați în browser...

      Aici poti:
      Selectați browserul în care doriți să vedeți Pagină web. Afișat de obicei aici inițial browser, care este instalat implicit pe computer.
      Adăugați orice alt browser, pentru care trebuie să utilizați butonul Adăuga.
      Editați sau eliminați browserele instalate.
      Setați dimensiunea ecranului pe care dvs Pagină web

      Conservare pagini web.

      Mod implicit Prima paginaîn loc de nume pagini ia prima linie de text din a ta pagini. Nu este întotdeauna ceea ce este necesar. Puteți schimba titlul paginii folosind Schimbați butoanele- făcând clic pe acest buton se deschide caseta de dialog Titlu pagini, în care puteți schimba numele pagini.

      Îndepărtarea Pagini web.

      Când lucrezi cu Site-ul web mai devreme sau mai tarziu se va intampla sa nu mai ai nevoie de niste pagini si vei dori sa le stergi.

      Există trei moduri de a elimina pagini web.

      1 cale

      În panou Lista de foldere selectați fișierul pe care doriți să îl ștergeți și faceți clic pe butonul Șterge pe tastatură.

      Metoda 2

      În panou Lista de foldere click dreapta pe fişier(sau pictograma fişier), care trebuie șters și în meniul contextual care apare, selectați elementul Șterge.

      3 căi

      ÎN Panoul Listă foldere selectați fișierul pe care doriți să le ștergeți și apoi selectați Ștergeți din meniul Editare.

      Lucrați cu text.

      La prima vedere, introducerea textului în Prima pagina nu este diferit de introducerea textului în oricare editor de text(de exemplu, în Microsoft Word).
      Pentru a tasta text, pur și simplu faceți clic cu mouse-ul oriunde pe pagină, iar cursorul va fi plasat în cel mai apropiat punct unde poate fi introdus textul.
      Tastarea majusculelor, editarea textului (ștergerea caracterelor, introducerea textului etc.) se face exact la fel ca în Microsoft Word.
      Există un singur DAR mic: când apăsați Introduceți cheileîn Prima pagina cursorul este forțat să se deplaseze la linie nouă, în timp ce liniuțele de paragraf fixe sunt plasate înainte și după paragraf.
      Dacă nu trebuie să creați paragrafe, atunci cel mai bine este să utilizați o comandă rapidă de la tastatură pentru a merge la o nouă linie Shift + Enter.

      Lucrul cu imagini.

      Formatează grafic în Web.

      Toate imaginile de computer, toate formatele pentru stocarea lor (și, în consecință, toate programele pentru procesarea lor) sunt împărțite în două clase mari - vector și raster. Imagine vectorială constă din obiecte - forme geometrice formate din linii drepte, arce, cercuri și curbe Bezier. Avantaje grafica vectoriala mult. Din punctul de vedere al designerului, cel mai important avantaj al său este că grafica vectorială poate fi „învârtită” după cum doriți, fără teama de a „freca o gaură” în imagine sau de a pierde unele informații. Un alt avantaj este dimensiunea redusă a fișierelor (comparativ cu imaginile raster) și independența față de rezoluția dispozitivelor de ieșire (fie ea o imprimantă sau un ecran de monitor). Acești factori au făcut grafica vectoriala candidat probabil pentru utilizare în Internet. Este adevărat că merită menționat că în acest moment Grafică vectorială nu se întâmplă atât de des pe cât ne-am dori.
      Cu toate acestea, printre formatele vectoriale utilizate efectiv, aș dori să notez formatul Shockwave Flash Macromedia. Pentru a vizualiza acest format în browser nevoie de un plugin ( conecteaza), distribuit gratuit de companie Macromedia. Astăzi, există atât site-uri create în întregime folosind această tehnologie, cât și site-uri utilizate Format flash doar parțial.
      Reprezentarea raster a graficelor se bazează pe conceptul de raster. Raster este o colecție de obiecte (în acest caz, pixeli) plasate în rânduri și coloane identice. Acestea. raster fisier poate fi gândit ca o colecție de pătrate mici colorate sau gri care formează un mozaic al unei imagini. Deoarece dimensiunea acestor pătrate este evident mică, atunci la vizionare grafică raster aceste pătrate se contopesc între ele, formând o schimbare continuă de culori.

      Formatul de stocare a imaginilor raster are atât avantajele, cât și dezavantajele sale. Unul dintre marile avantaje ale graficii raster este capacitatea de a lucra cu semitonuri, de ex. capacitatea de a transmite o imagine exact așa cum arată în viața reală. Dar printre dezavantaje, principala problemă este dimensiunea fișierului. Desigur decât mai mulți pixeli alocate pentru formare Imagini, cu cât este mai mare calitatea transmisiei Imagini, dar dimensiunea fișierului va fi astfel mai mare.
      Dacă revenim acum la browsere, atunci putem spune următoarele: majoritatea browserelor pot afișa fără probleme fișiere grafice de patru formate (* .gif, *.jpg, *.png, *.bmp), dintre care momentan cel mai bine este să folosiți două - * .gif și *.jpg. Și chiar și atunci după optimizarea preliminară.
      Inserarea imaginilor pe Pagină web.
      Inserați o imagine în dvs Pagină web se poate face în mai multe moduri:
      1. Trageți o imagine din Windows Explorer (adică direct de la explorator).
      2. Trageți o imagine din Internet Explorer .
      3. Trageți fișierul imagine din panou Lista de foldere, direct la pagină.
      4. Cu clipboard- copiați imaginea în clipboard din orice alt program și apoi lipiți-o din clipboard de pe pagină.
      5. Cu Adăugați butoane desen din fișierul din bara de instrumente Standard.
      6. Utilizarea meniului Inserare  Figura.
      Să ne uităm la aceste metode mai detaliat:
      Metoda 1
      Windows Explorer(adică direct din Explorer) trebuie să:
      în Prima pagina
      deschide o fereastră de explorator;
      în fereastra Explorer, selectați fișierul cu imaginea pe care doriți să o introduceți în pagina dvs.;
      butonul stâng al mouse-ului și trageți fișierul imagine pe dvs Pagină web Imaginea este inserată în locul în care era cursorul de inserare pe pagină.
      Metoda 2
      Pentru a trage o imagine din Internet Explorer necesar:
      în Prima pagina deschideți pagina în care doriți să adăugați o imagine;
      V browser deschideți imaginea pe care doriți să o puneți pe dvs Pagină web browser Numele fișierului trebuie să se termine cu jpg, jpeg, gif);
      Utilizați butonul stâng al mouse-ului pentru a trage imaginea selectată pe dvs Pagină web;
      Metoda 3
      Pentru a trageți și plasați fișierul cu imaginea din panou Listă foldere, direct la pagina de care aveți nevoie:
      în Prima pagina deschide pagina la care vrei să o adaugi imagine;
      selectați fișierul imagine dorit de pe panou Lista de foldere;
      Butonul stânga al mouse-ului trageți imaginea selectată în a dvs Pagină web;
      poza selectată va fi inserată în locul în care se afla cursorul de inserare pe pagină.
      Metoda 4
      Pentru a insera o imagine în dvs Pagină web folosind clipboard-ul, trebuie să:
      in aplicatia din care doriti sa copiati poza, selectati imaginea si folositi tastele Ctrl+C copiați imaginea în clipboard;
      pe dumneavoastră Pagină web inserați această imagine din clipboard folosind comenzile rapide de la tastatură Ctrl+V
      Metoda 5
      Pagină web decizi să folosești butonul Adăugați o imagine din fișierul din bara de instrumente Standard, Acea Prima pagina va deschide o casetă de dialog Desen.
      În această casetă de dialog, specificați fișierul imagine pe care doriți să îl adăugați la dvs Pagină webși apăsați butonul Introduce.

      Metoda 6
      Dacă doriți să inserați o imagine în dvs Pagină web decizi să folosești meniul Inserare  Desen, Acea Prima pagina vă va solicita să faceți alte alegeri:

      Imagini... – selectarea acelui element de meniu vă oferă posibilitatea de a utiliza o bibliotecă de imagini gata făcută.
      Din fisier... – selectarea acestui element de meniu vă oferă posibilitatea de a indica în mod independent locația fișierului imagine pe care doriți să îl adăugați la dvs. Pagină web(folosind acest element se va deschide o casetă de dialog Desen, lucrarea cu care a fost descrisă mai sus).
      Creați o colecție de fotografii... - folosind acest element de meniu puteți crea o colecție de imagini într-un stil specific. Pentru asta în fereastra care se deschide Proprietăți colecții de fotografii folosind un buton Adăuga pe filă Desene selectați imagini și pe filă Aspect selectați un format de design.
      Adăugarea fișierelor media.

      Pe lângă elementele grafice simple, cum ar fi imaginile din * .gif, *.jpg, *.png etc. Prima pagina vă permite să postați pe dvs pagini web fișiere media. Acestea includ: clipuri video, sunete...

      Pentru a insera un videoclip, trebuie Inserați meniul selectați elementul Desen, și apoi Înregistrare video...

      Se va deschide o casetă de dialog. Fereastra video, va afișa videoclipuri în * .avi, *.asf, *.ram, *.ra.

      Adăugați sunet la Pagină web poate fi găsit în fila General a casetei de dialog. Proprietățile paginii.

      Lucrul cu tabele.

      Masa- una dintre cele mai instrumente puternice folosit pentru a crea site-uri web.
      Inițial Mese au fost folosite numai pentru reprezentarea datelor structurate. Cu toate acestea, treptat s-au transformat într-un puternic remediu universal pentru aspect Pagini web.

      Crearea de tabele

      Cel mai simplu mod crearea unui tabel– folosiți butonul Adăugați un tabel situat pe bara de instrumente Standard.
      O altă modalitate este utilizarea articolului meniu Tabel  Inserare  Tabel.
      Și masa pot fi desenate și lipite folosind clipboard-ul.

      Introducerea datelor și navigarea în tabel.

      Unul dintre lucrurile grozave ale tabelelor este că textul pe care îl introduceți este formatat în celulă în același mod în care suntem obișnuiți să-l formatăm în tot documentul. Textul plasat într-o celulă se încadrează automat într-o nouă linie dacă lungimea sa depășește lățimea coloanei. Când apăsați o tastă introduce, ca de obicei, se introduce un nou paragraf. Textul sau numerele sunt introduse în tabel de la tastatură.

      Înainte de a introduce date în masa, trebuie să plasați cursorul text în celula dorită Mese. Acest lucru se poate face făcând clic pe el cu mouse-ul.

      Cu toate acestea, este mai convenabil să utilizați combinații de taste pentru a vă deplasa între celule:
      Comenzi rapide de la tastatură: Acțiune:

      Tab oriunde în tabel, cu excepția sfârșitului ultimului rând, mergeți la celula adiacentă și selectați conținutul acesteia
      Tab la sfârșitul ultimei rânduri adăugați o nouă linie în partea de jos a tabelului
      Shift+Tab mergeți la celula anterioară și evidențiați conținutul acesteia
      introduceîncepe un nou paragraf
      introduce la începutul primei celule adăugați text înaintea tabelului de la începutul documentului

      Crearea și aplicarea formularelor.

      Forme reprezinta câmpuri de text, butoane radio, casete de selectare, butoane și multe alte comenzi. Un vizitator al site-ului trebuie doar să introducă unele informații într-unul sau altul câmp de text, să selecteze unele date din lista propusă, să facă clic pe butonul Trimite, astfel încât datele să fie trimise către server web pentru procesare (sau procesate chiar acolo pe pagină).

      Haideți să vă cunoaștem - vă rugăm să completați următoarele câmpuri:
      Numele dumneavoastră:

      Numele dvs. de familie:

      Data nașterii dvs.: an luna zi

      Mulțumesc! Și acum - să mergem!
      1. Mic, dar agil.
      Oriunde s-ar întâmpla, el comandă.
      El va intra în cort -
      Eroul se va întoarce.
      Cine este aceasta?
      Fly Flea Copil capricios
      2. Stă cu ochii bombați,
      El vorbeste franceza
      Sare ca un purice
      Înoată ca un om.
      Despre cine vorbim?
      Pisica Broasca Papagal

      3. Ce respiră foca când se scufundă sub gheață?

      4. De ce plâng țestoasele mari?

      5. Ce fel de haine poate purta un hering?
      Vestă de blană
      6. Cine este numit „calul râului”?
      Vidra Hipopotam Crocodil

      7. Ce păsări nu își eclozează puii?

      8. Ce păsări nu pot zbura?

      Dacă trebuie să selectați mai multe răspunsuri, apăsați și nu eliberați tasta Ctrlși faceți clic stânga pe răspunsul dorit

      Dar crearea de forme pe chiar pagină asta e doar jumătate din slujbă. Deoarece trebuie să existe un program care să poată prelucra datele introduse de utilizator prin intermediul formularelor.
      Un astfel de program poate fi localizat pe un server; poate fi în al tău Site-ul web sub forma unui fișier separat sau poate fi pur și simplu scris în cod html pe dumneavoastră Pagină web.
      Ea este cea care stabilește ce se va întâmpla cu informațiile introduse de utilizator:

      informație poate fi adăugat la baza de date și pe baza acesteia pot fi construite diverse grafice, ratinguri...;
      informație poate fi transmis de către e-mail(acesta este adesea folosit pentru a obține informații despre utilizator în diverse tipuri de chestionare);
      informație poate fi procesat chiar pe loc și vizitatorul site-ului dvs. va primi imediat feedback (de exemplu, va primi puncte pentru un test, va vedea informațiile pe care le-a introdus în cartea de oaspeți...).

      Într-o relație forme Există mai multe reguli de bază:

      1. Fiecare formă ocupă o anumită zonă pagini web. Pe unu Pagină web pot fi localizate una sau mai multe forme.
      2. Fiecare formular trebuie să conțină cel puțin unul dintre elementele formularului (deși, de regulă, există mai multe dintre ele).
      3.Fiecare element forme are nume și semnificație. Numele identifică câmpul pentru introducerea informațiilor, iar valoarea este egală cu valoarea selectată de utilizator.
      4. Unul dintre elementele de formular (poate fi un buton obișnuit sau orice imagine) trebuie să îndeplinească funcția de buton Trimite.

      Crearea de formulare în Prima pagina.
      Pentru a adăuga un formular la Pagină web, necesar:

      Plasați cursorul acolo unde doriți să lipiți formă.
      ÎN Inserați meniul alege Item Form, în meniul care se deschide, selectați din nou Item Form. Formă va fi plasat pe dvs Pagină web- va apărea o zonă marcată cu un cadru punctat cu două butoane: Trimiteți și resetați.
      Folosind același punct meniul Inserare  Formular introduceți secvențial elementele de care aveți nevoie forme selectându-le din meniul derulant în cascadă (rețineți că toate elementele de formular sunt inserate în interiorul zonei de formular marcate cu un cadru punctat).
      După formă creat, tot ce rămâne este să-l umplem cu conținut - elemente forme, text, imagini, tabele... (cu dimensiuni forme se va schimba automat).
      Adauga continut forme se poate face în mod obișnuit. De exemplu, textul poate fi tastat sau lipit din clipboard... Toate acțiunile cu obiecte adăugate sunt similare.
      in orice caz crearea unui formular- acesta este doar începutul lucrării. După ce l-ați creat, trebuie să configurați proprietățile ca forme, și elementele sale.

      Setarea proprietăților formularului.

      Pentru a prelucra sau stoca datele introduse de vizitatori pagini web, trebuie fie să profitați de oportunitățile oferite Extensii de server FrontPage, sau un alt program care rulează server web.
      Dar indiferent de programul pe care îl alegeți, va trebui totuși să configurați proprietățile formularului și elementele din acesta.
      Pentru a deschide fereastra de proprietăți a formularului, trebuie să:
      V Inserați meniul alege Item Form, și apoi -
      sau
      Apelați meniul contextual pentru formular și selectați elementul din meniul contextual care se deschide Proprietățile formei.
      Ca rezultat, se va deschide o casetă de dialog Proprietățile formei.

      1. B Salvare câmp rezultatele trebuie să indice ce trebuie făcut cu datele introduse formă. Puteți alege următoarele opțiuni:
      o Se trimite numele fișierului- datele vor fi plasate în fișierul specificat pe server web. Acest fișier poate fi Pagină web, care va deveni din ce în ce mai lung în timp, sau un fișier de date care poate fi apoi procesat în Excel, Access sau orice alt program;
      o Trimiterea adresei de e-mail- în acest caz, de fiecare dată când vizitatorul face clic pagini web Trimite la butoane formă Un e-mail va fi generat și trimis la adresa pe care ați furnizat-o. Acest mesaj va conține toate datele care au fost introduse de utilizator pe Pagină web.
      o În baza de date- în acest caz datele forme va fi trimis la baza de date. Baza trebuie să fie pe server web(sau să fie disponibil pentru el).
      2. B Câmp de proprietăți formular, trebuie să specificați numele formularului
      Moduri de vizualizare Prima pagina.
      Prima pagina Oferă șase moduri diferite de vizualizare a conținutului Site:

      Pagină,
      Foldere,
      Rapoarte,
      Tranziții,
      hyperlinkuri,
      Sarcini.
      Pentru selecție modul dorit poți să folosești Panoul Vizualizări situat în partea stângă a ecranului sau în meniu Vedere pe bara de instrumente Standard selectați elementul de meniu corespunzător.

      Pagină
      În acest mod, puteți crea și edita Pagini web. Aici puteți crea gol pagini web iar paginile bazate pe șablon atribuie teme (un set de stiluri pentru prezentarea paginii pe ecran) paginilor. În acest mod, puteți adăuga și formata text, design pagini folosind imagini grafice și video (conversia în serie este acceptată formate grafice la formate * .gif, *.jpg și *.png), adăugați audio în pagină, prezentați informații în tabele, cadre și formulare și, în final, creați hyperlinkuri. Aceasta nu este o listă completă de posibilități. Prima pagina privind editarea conținutului pagini web.
      Foldere
      În acest mod puteți vizualiza structura site web(fișiere și foldere) și gestionați-l în același mod ca și în Windows, acest mod face posibilă obținerea mai multor Detalii despre fișiere și foldere decât cele furnizate în modul de vizualizare Pagină.
      Rapoarte
      Vă oferă mai mult de o duzină de rapoarte care conțin o varietate de informații despre site web, deschis în Prima pagina.
      Tranziții
      Conceput pentru a vizualiza ierarhia site-ului. În acest mod, puteți manipula ierarhia trăgând dreptunghiuri (fiecare reprezentând un anumit Pagină web).
      Hiperlinkuri
      Demonstrează sistemul de hyperlinkuri care leagă paginile între ele site web(precum și un sistem de hyperlinkuri către alte noduri), asigură verificarea integrității acestora și posibilitatea modificării.
      Sarcini
      Acest mod este conceput pentru gestionarea sarcinilor site web(adăugarea, ștergerea, executarea, setarea priorității de execuție și monitorizarea stării sarcinilor).

      Descarcă gratis Prima pagina puteti folosi urmatorul link:

      http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html

      Pagina Web simplă în programul Frontpage este un tabel obișnuit cu multe celule. Aceste celule conțin texte, imagini, videoclipuri și tot ceea ce vedem pe site-uri web. De exemplu, dacă descrii această pagină ca o diagramă, va arăta astfel.

      Pagina Web simplă în programul Frontpage

      Structura paginii web este simplă. În partea de sus este numele site-ului, imediat sub acesta este un meniu orizontal. În dreapta este un meniu vertical, iar în partea de jos este un „subsol”. În centru se află „corpul” site-ului. Acestea sunt elementele principale ale celei mai obișnuite pagini de site.

      Apropo, acum vă aflați exact pe aceeași pagină web. După cum puteți vedea, structura sa este foarte simplă. Totul este la îndemână aici. Făcând clic pe meniul orizontal sau vertical, vei fi transferat către alte pagini ale site-ului.

      Ele sunt, de asemenea, create după asemănarea celei mai simple pagini web despre care am vorbit mai sus. Fă-ți timp să răsfoiești curs gratuit Scoala de Vanzare de Site-uri Web si vei invata cat de repede si usor poti crea o pagina, si chiar un site!, intr-o seara.

      Antetul site-ului

      În antetul site-ului De obicei se află antetul site-ului, imaginea sau sigla. Scopul antetului site-ului este de a informa vizitatorul ce site a vizitat. Este foarte important ca numele să se potrivească exact cu conținutul site-ului.

      Antetul site-ului

      Meniu pentru site

      În meniul orizontal Sunt localizate secțiuni sau rubrici tematice. În esență, acestea sunt link-uri care duc la alte pagini de pe site.

      Meniu orizontal al site-ului

      Corpul site-ului

      Aceasta este partea principală a site-ului, care conține toate informațiile de bază. În corpul site-ului citiți acum acest articol.

      Meniu vertical pentru site

      Meniu vertical , precum și orizontală, este folosită pentru navigarea pe site. Meniul vertical este realizat sub formă de întrebări sau orice interesant și Informatii utile care ar putea fi de interes pentru vizitatori.

      Subsolul site-ului

      Subsolul site-ului situat în partea de jos a paginii web. Informațiile privind drepturile de autor și informațiile de contact se găsesc aici.

      Subsolul site-ului în programul Frontpage

      Rezumând

      Acum știi în ce constă pagină web simplă. Nu există elemente complexe sau de neînțeles în structura paginii. Acum este timpul să punem în practică cunoștințele dobândite. Să mergem înainte. În secțiunea următoare veți crea