Izrada web stranica korištenjem FrontPagea. Jednostavan padajući izbornik Kako stvoriti padajući izbornik na naslovnoj stranici

21.08.2020 Savjet

Može se izraditi bez JavaScripta i/ili jQueryja. Da biste ga izradili, koristite svojstva CSS display, padding, pseudo-class:hover. Moguć je radni izbornik (kliknite na “Fork” ako želite dizajnirati HTML izbornik na svoj način). Dužina videa ~12 min. Bilješka je namijenjena dizajnerima izgleda početnicima i web programerima koji poduzimaju prve korake u učenju osnova HTML-a i CSS-a; za one koji su studirali tečaj “Osnove HTML5 i CSS3”.

Stvaranje jednostavnog padajućeg izbornika

Za izradu jelovnika stranica obično koristi strukturu blokova HTML navigacijski element I nenumerirani popis. U jednoj od stavki popisa, drugi je popis ugrađen tako da nije uključen u hipervezu. Bilo bi moguće smjestiti ul unutar a, ali po mom mišljenju to nije baš dobra ideja, jer pseudo-class:hover radi i s li elementima!

U našem slučaju ne razmatramo opciju kada padajući popis Postoje i ugniježđene liste - ovaj zadatak nije težak sam po sebi, ali će izazvati poteškoće za dizajnera izgleda početnika. Također imajte na umu da se konstruiranje izbornika može izvršiti pronalaženjem ili pisanjem odgovarajućeg JavaScripta.

Radi praktičnosti rada s oznakama (iznenada ćemo naići na drugu navigaciju), dodat ćemo CSS klasu našem strukturnom navigacijskom elementu; Napravit ćemo stubove hiperveza, ali možete napisati http://site umjesto # :)

HTML oznaka za izbornik s padajućim podizbornikom

Glavna stvar u CSS-u: brisanje zadanih vrijednosti za HTML elemente uključene u izbornik; skrivanje budućeg padajućeg podpopisa ( podizbornik) i njegov prikaz kada lebdite iznad nadređenog HTML elementa - pomoću pseudo-klase: hover

CSS pravila za padajući izbornik.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . menu ul li, .menu ul( display: inline-block; ) .menu ul( position: relative; margin: 0; padding: 0; background-color: #f63; ) .menu ul ul( display: none; position: apsolutno; boja pozadine: #369; margin-top: 10px; margin-left: -10px; ) .menu ul a( boja: #fff; text-decoration: none; ) .menu ul a( boja: #fff ; text-decoration: none; ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )

Izrađeni jelovnik nije savršen i može se poboljšati (razmislite kako). Sretno u vašem razvoju i neka kreiranje ovakvih jelovnika nikada ne bude teško!

Vodoravni padajući izbornik koristi se za organiziranje navigacijske strukture stranice. Optimalan broj razina gniježđenja je jedna ili dvije. Što je manje razina privitaka, to je posjetitelju stranice lakše pronaći potrebne informacije. Kako stvoriti redoviti horizontalni izbornik detaljno je opisano u.

Kako napraviti horizontalni padajući izbornik

1. HTML oznake i osnovni stilovi za padajući izbornik s jednom razinom ugniježđenja

HTML označavanje horizontalnog padajućeg izbornika razlikuje se od običnog izbornika po tome što povezuje na željenu stavku popisa

  • dodaje se ugniježđena lista
      ili<оl> .

      Za postavljanje podizbornika u odnosu na glavni izbornik deklarirani su sljedeći stilovi:
      — za element liste u koji je ugniježđena padajuća lista: li (position: relative;) ;
      — za padajući izbornik ul (position: absolute;) , kao i lijeve i gornje vrijednosti.

      Radi jasnoće i jednostavnosti oblikovanja, dodajmo gornji izbornik klase u glavni izbornik i podizbornik u padajući izbornik.

      Postoji nekoliko načina za skrivanje padajućeg izbornika:
      1) prikaz: nema;
      2) vidljivost: skrivena;
      3) neprozirnost: 0;
      4) transformacija: scaleY(0);
      5) korištenje jQuery biblioteke.

      Metoda 1. (prikaz: ništa;)

      Padajući izbornik skriven je pomoću .submenu (display: none;) , dok lebdi pokazivačem prikazuje se pomoću .topmenu li:hover .submenu (display: block;) .

      Metoda 2. (vidljivost: skriveno;)

      Izbornik je skriven pomoću .submenu (visibility: hidden;) , a prikazan pomoću .topmenu li:hover .submenu (visibility: visible;) .

      Metoda 3. (neprozirnost: 0;)

      Izbornik je skriven pomoću .submenu (neprozirnost: 0;) i prikazan pomoću .topmenu li:hover .submenu (neprozirnost: 1;) . Kako biste spriječili pojavljivanje izbornika kada prijeđete pokazivačem iznad područja na kojem se nalazi, dodajte visibility: hidden; , a kod lebdenja promijenite u visibility: visible; .

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

      Izbornik je skriven pomoću .submenu (transform: scaleY(0);) i prikazan pomoću .topmenu li:hover .submenu (transform: scaleY(1);) . Budući da se zadana transformacija elementa događa iz središta, trebate dodati za .submenu (transform-origin: 0 0;) , tj. iz gornjeg lijevog kuta.

      Metoda 5: Korištenje jQueryja

      $(".five li ul").hide(); // sakrij padajući izbornik $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* odaberite element popisa koji sadrži element s klasom .submenu i dodajte mu funkciju lebdenja koja prikazuje i skriva padajući izbornik */);

      2. 3D padajući izbornik

      Zanimljivi efekti mogu se stvoriti pomoću CSS3 transformacija, na primjer, učiniti da se izbornik pojavi iz dubine zaslona.

      * ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : ništa; margina: 0; padding: 0; ) nav a ( display: block; text-decoration: none; outline: none; prijelaz: .4s ease-in-out; ) .topmenu ( backface-visibility: hidden; background : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a (font-family: "Exo 2", sans-serif; visina: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; ) .down:after ( content: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .gornji izbornik li a:hover ( boja: #E6855F; ) .podizbornik ( pozadina: bijela; obrub: 2px čvrsta #003559; pozicija: apsolutna; lijevo: 0; vidljivost: skrivena; neprozirnost: 0; z-indeks : 5; širina: 150px; transformacija: perspektiva(600px) rotateX(-90deg); transform-origin: 0% 0%; prijelaz: .6s lagano-unutrašnje; ) .topmenu > li:hover .submenu( visibility: vidljivo; neprozirnost: 1; transformacija: perspektiva(600px) rotacijaX(0deg); ) .submenu li a ( boja: #7f7f7f; veličina fonta: 13px; visina linije: 36px; ispuna: 0 25px; obitelj fonta: "Kurale", serif; )

      3. Proširivi padajući izbornik s logotipom

      U ovom primjeru, gornji dio stranice sadrži logotip i navigaciju web stranice. Logo može biti slika ili tekst. Padajući izbornik postupno se širi ispod gornje stavke popisa pomoću CSS3 transformacijske funkcije.

      Logo
      * ( box-sizing: border-box; ) body ( margin: 0; background: #f2f2f2; ) header ( background: white; text-align: center; ) header a ( text-decoration: none; outline: none; display : blok; prijelaz: .3s ease-in-out; ) .logo (boja: #D5B45B; obitelj-fontova: "Playfair Display", serif; veličina fonta: 2.5em; padding: 20px 0; ) nav ( display: tablica; margina: 0 auto; ) nav ul ( list-style: ništa; margina: 0; padding: 0; ) .topmenu:after ( content: ""; display: table; clear: both; ) .topmenu > li ( širina: 25%; float: lijevo; pozicija: relativna; obitelj-fontova: "Open Sans", sans-serif; ) .topmenu > li > a (transformacija teksta: velika slova; veličina fonta: 14px; težina-fonta: podebljano; boja: #404040; ispuna: 15px 30px; ) .topmenu li a:hover ( boja: #D5B45B; ) .submenu-link:after ( sadržaj: "\f107"; font-family: "FontAwesome"; boja: naslijediti; margin-left: 10px; ) .submenu ( background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; neprozirnost: 0; transform: scaleY(0) ; transformacija-porijekla: 0 0; prijelaz: .5s lagano ulaženje; ) .podizbornik a ( boja: bijela; poravnanje teksta: lijevo; ispuna: 12px 15px; veličina fonta: 13px; obrub-dno: 1px solid rgba(255,255,255,.1); ) .podizbornik li:posljednje dijete a ( border-bottom: none; ) .topmenu > li:hover .submenu (opacity: 1; transform: scaleY(1); )

      4. Proširivanje padajućeg izbornika

      Još jedan primjer padajućeg izbornika. Učinak povećanja kada se pojavi izbornik ostvaruje se smanjenjem početne veličine.podizbornika (transformacija: skala(.8);) , pri lebdenju mišem veličina se povećava na.topmenu > li:hover .podizbornik (transformacija: skala(1);) .

      * ( box-sizing: border-box; ) body ( margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( background: white; ) nav ul (list-style: ništa; margina: 0; padding: 0; ) nav a (text-decoration: none; outline: none; display: block; prijelaz: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px; visina: 12px; pozadina: #d2d2d2; vrh: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); ) .topmenu > li:last-child:after ( pozadina: nema; okvir -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( boja: #c0a97a; ) .podizbornik ( pozicija: apsolutna; lijevo: 50%; vrh: 100%; širina: 210px; margin-lijevo: -105px; pozadina: #fafafa ; rub: 1px solid #ededed; z-indeks: 5; vidljivost: skrivena; neprozirnost: 0; transformacija: skala(.8); prijelaz: .4s lagano ulaženje; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .podizbornik ( vidljivost: vidljivo; neprozirnost: 1; transformacija: skala(1); )

      5. Padajući izbornik

      Horizontalni izbornik s mini-animacijom: kada lebdite iznad poveznica gornji izbornik pojavljuje se kružić koji također prati pojavu padajućeg izbornika.

      @import url("https://fonts.googleapis.com/css?.jpg); položaj pozadine: centar centar; ponavljanje pozadine: nema ponavljanja; veličina pozadine: naslovnica; visina: 100vh; položaj: relativan; ) body:before ( content: ""; pozicija: apsolutna; lijevo: 0; dno: 0; visina: 100%; širina: 100%; pozadina: linearni gradijent(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( poravnanje teksta: centar; padding: 40px 0 0; ) nav ul ( list-style: ništa; margina: 0; padding: 0; ) nav a ( text-decoration : ništa; prikaz: blok; boja: #222; ) .topmenu > li ( prikaz: inline-block; položaj: relativan; ) .topmenu > li > a ( položaj: relativan; padding: 10px 15px; font-family: " Kaushan Script", kurziv; veličina fonta: 1,5em; visina retka: 1; razmak između slova: 3px; ) .gornji izbornik > li > a:prije ( sadržaj: ""; pozicija: apsolutna; z-indeks: 5; lijevo: 50%; gore: 100%; širina: 10px; visina: 10px; pozadina: bijela; rubni radijus: 50%; transformacija: prijevod (-50%, 20px); neprozirnost: 0; prijelaz: .3s; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); neprozirnost: 1; ) .podizbornik (položaj: apsolutni; z-index: 4; lijevo: 50%; vrh: 100%; širina: 150px; padding: 15px 0 15px; margin-top: 5px; pozadina: bijela; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; vidljivost: skriveno; neprozirnost: 0; transformacija: translate(-50%, 20px); prijelaz: .3s ; ) .topmenu > li:hover .submenu ( vidljivost: vidljivo; neprozirnost: 1; transformacija: translate(-50%, 0); ) .submenu a (font-family: "Libre Baskerville", serif; font-size: 11px; razmak između slova: 1px; ispuna: 5px 10px; prijelaz: .3s linearno; ) .submenu a:hover (pozadina: #e8e8e8;)

      S razvojem Internet pojavio se protokol za razmjenu informacija, protokol se zove HTTP (HyperText Transfer Protocol- protokol za prijenos hiperteksta).Uz ovaj protokol pojavila se usluga Svjetska mreža(često se naziva WWW ili jednostavno mreža), koji pruža široku mrežu poslužitelja HTTP prijenos datoteka putem Internet.

      Glavni dio ovih datoteka su Internet straniceposebne datoteke napisano jezikom HTML (HyperText Markup Language– jezik za označavanje hiperteksta). Internet stranice Objavljeno u Internet postavljanjem takvih datoteka na poslužitelje HTTP (web stranice). Sadržaj Internet stranice mogu biti različiti i posvećeni posve proizvoljnim temama, ali svi koriste istu osnovu - jezik HTML.
      Većina ljudi koji žele izraditi vlastitu web stranicu ili stranicu poznaju jezik HTML samo po čuvenju. Stoga im program može priskočiti u pomoć Microsoft FrontPage, jedan od najpoznatijih graditelja web stranica.

      FrontPage, uključen u paket aplikacije Microsoft Office, postao je prvi proizvod koji se široko koristi za Internet, koji kombinira klijentske i poslužiteljske dijelove te pruža mogućnost razvoja stranice u cjelini i instaliranja na najpopularnije poslužitelje. Naslovna strana sposoban je preuzeti sav potreban programski posao. Međutim Naslovna strana Također će postati ozbiljan pomoćnik profesionalnim programerima koji više vole imati potpunu kontrolu nad kreativnim procesom.

      Prozor programa Naslovna strana 2003.

      Program Naslovna strana objavila tvrtka Microsoft i izrađen je u istom stilu kao i proizvodi uključeni u paket Microsoft Office, Zato izgled program se praktički ne razlikuje od programa za obradu teksta Riječ .

      Na vrhu prozora nalazi se traka izbornika i dvije alatne trake: Standard i oblikovanje. Možete omogućiti ili onemogućiti prikaz alatnih traka Pregled izbornika.
      Na lijevoj strani je Prikaz ploče, s kojim možete mijenjati načine rada dokumenta.
      Glavni dio prozora zauzima radno područje u kojem se može otvoriti jedan ili više prozora koji sadrže pojedinačne dokumente.
      Na dnu prozora nalazi se statusna traka, koji sadrži popratne informacije. Također na dnu prozora postoje tri gumba za pregled dokumenata.
      Prikaz alatnih traka.
      Za upravljanje alatnim trakama u Naslovna strana možete koristiti iste metode kao u Microsoft Word . Naime:
      na jelovniku Pogled treba izabrati Stavka alatne trake, au novom podizborniku koji se otvori - instaliraj potvrdne okvire nasuprot alatnim trakama koje su vam potrebne; ili kliknite desni klik iz bilo kojeg razloga upravljačke ploče(ili u području pored njega) i koristite kontekstni izbornik na isti način.

      Naslovna strana, kao i druge aplikacije Microsoft Office, omogućuje vam dodavanje, brisanje i preuređivanje stavki izbornika i gumba na alatnim trakama. Također je moguće izraditi potpuno vlastite panele.
      Da biste to učinili potrebno vam je:

      U Servisni izbornik izabrati stavka Postavke
      ili
      V Pregled izbornika izabrati Stavka alatne trake, au kaskadnom izborniku koji se pojavi - stavka Postavke
      Kao rezultat vaših radnji otvorit će se dijaloški okvir postavke, gdje možete instalirati potrebne ploče.

      Stvorite novi Internet stranice.

      Ako ste počeli Naslovna strana, znači novo Web stranica već ste stvorili (pri pokretanju Naslovna strana odmah se otvori novi prazan Web stranica, spreman za postavljanje teksta i drugih elemenata).
      Stvorite novi Web stranica To možete učiniti na druge načine:

      Pomoću gumba Nova stranica na Standardna ploča alata.
      Izbornik datoteka odaberite podizbornik Stvoriti, i onda - Stranica ili Web stranica;
      pomoću kombinacija Ctrl+N;
      pomoću kontekstni izbornik(radi u svim modovima osim Zadaci i izvješća) - za ovo unutra Popis mapa dano mreža) trebate kliknuti desnom tipkom miša i u pojavi se kontekstni izbornik odaberite stavku Izradi  stranicu.

      Izrada stranica pomoću čarobnjaka i predložaka.

      Kao što je gore spomenuto, ako ste koristili izbornik za stvaranje nove stranice Datoteka  Nova  Stranica ili web stranica, To Naslovna strana zatražit će vas da upotrijebite predložak za izradu nove stranice.
      Da biste to učinili, otvorit će se dijaloški okvir čiji je izgled prikazan u nastavku:

      Na kartici Su česti Ovaj dijaloški okvir prikazuje popis predložaka Naslovna strana Trenutno dostupan. Odabirom bilo kojeg od predložaka možete vidjeti njegov opis u Polje uzorka.
      Stvaranje FrontPage Web.
      Microsoft FrontPage Web- ovo je set Internet stranice, slikovne datoteke i druge komponente koje se mogu promatrati kao cjelina.
      Ako napravite web stranicu u Naslovna strana, tada je najprikladniji način pohranjivanja korištenje FrontPage Web.
      najvažniji plus je mogućnost preimenovanja datoteka uključenih u FrontPage Web.
      Zamislite to prije objavljivanja svoje stranice u Internet Odjednom ste primijetili da je nekoliko vaših datoteka nazvano ruskim nazivima. - "Sada ćete morati proći kroz sve datoteke i promijeniti veze ručno!" duamete you. Ovdje će pomoći FrontPage Web- možete sigurno preimenovati datoteke i Naslovna strana samostalno će proći kroz sve ostale datoteke uključene u FrontPage Web i preimenovat će sve veze na datoteku koju ste ispravili.
      Neću opisivati ​​sve ostale prednosti, ali bih želio reći da iskoristite sve mogućnosti Naslovna strana, onda je bolje koristiti FrontPage Web.
      Dakle, za stvaranje novog FrontPage Web kliknite na strelicu koja se nalazi lijevo od gumba Nova stranica na alatnoj traci i odaberite stavku u padajućem izborniku koji se pojavi Web stranica…

      Otvaranje web stranica.

      Vrlo često, prilikom izrade web stranice, morate urediti već napravljenu Internet stranice. Možete se vraćati na istu stranicu koliko god puta želite da je uredite ili upotrijebite njezine dijelove za stvaranje novih. Internet stranice.

      Otvorite postojeći Web stranica moguće u bilo kojem od postojećih načina.

      Iz moda Prikazi stranice Postoje četiri načina za otvaranje postojeće stranice:

      1 način

      Ako radite sa FrontPage Web, zatim samo odaberite potrebna datoteka V Popis mapa i dvaput kliknite na njega mišem.

      Metoda 2

      U izborniku File odaberite Najnovije datoteke. Iz kaskadnog izbornika koji se pojavi odaberite željenu datoteku.

      3 načina

      Korištenje dijaloškog okvira za otvaranje datoteke: Datoteka  Otvori.

      Pregled.

      Da biste vidjeli kako vaša stranica izgleda izravno u pregledniku, možete koristiti karticu Pregled u načinu uređivanja Internet stranice. Ali u ovom slučaju može se ispostaviti da preglednik Naslovna strana neće prikazati neke elemente vašeg stranice, pa je najbolje da:
      koristite gumb na alatnoj traci
      ili u Izbornik datoteka odaberite stavku Pregled r u pregledniku.

      Ako ste koristili prvu metodu, sadržaj vaše stranice bit će prikazan u ugrađenom pregledniku Naslovna strana.
      Ako ste koristili drugu metodu, onda Naslovna strana prikazat će dijaloški okvir Pogledaj u pregledniku...

      Ovdje možete:
      Odaberite preglednik u kojem želite pregledati svoje Web stranica. Obično se u početku prikazuje ovdje preglednik, koji je prema zadanim postavkama instaliran na vašem računalu.
      Dodajte bilo koji drugi preglednik za koji trebate koristiti gumb Dodati.
      Uredite ili uklonite instalirane preglednike.
      Postavite veličinu zaslona na kojem je vaš Web stranica

      Očuvanje Internet stranice.

      Zadano Naslovna strana umjesto imena stranice uzima prvi red teksta iz vašeg stranice. To nije uvijek ono što je potrebno. Možete promijeniti naslov stranice koristeći Promjena gumba- klikom na ovaj gumb otvara se dijaloški okvir Naslov stranice, u kojem možete promijeniti ime stranice.

      Uklanjanje Internet stranice.

      Prilikom rada sa Web stranica prije ili kasnije dogodit će se da vam neke stranice više ne trebaju i poželjet ćete ih izbrisati.

      Postoje tri načina uklanjanja Internet stranice.

      1 način

      U ploči Popis mapa odaberite datoteku koju želite izbrisati i kliknite gumb Izbrisati na tipkovnici.

      Metoda 2

      U ploči Popis mapa desni klik na datoteka(ili ikona datoteka), koju je potrebno izbrisati i u kontekstnom izborniku koji se pojavi odaberite stavku Izbrisati.

      3 načina

      U Ploča popisa mape odaberite datoteku koju želite izbrisati i zatim odaberite Izbriši iz izbornika Uredi.

      Rad s tekstom.

      Na prvi pogled unos teksta u Naslovna strana ne razlikuje se od unosa teksta u bilo koji uređivač teksta(na primjer, u Microsoft Word).
      Za upisivanje teksta jednostavno kliknite mišem bilo gdje na stranici i kursor će se postaviti na najbližu točku gdje se može unijeti tekst.
      Upisivanje velikih slova, uređivanje teksta (brisanje znakova, umetanje teksta itd.) vrši se potpuno isto kao u Microsoft Word.
      Postoji samo jedno malo ALI: kada pritisnete Unesite tipke u Naslovna strana pokazivač se mora pomaknuti na nova linija, dok se fiksne uvlake odlomka postavljaju prije i iza odlomka.
      Ako ne trebate stvarati odlomke, najbolje je koristiti tipkovni prečac za prijelaz na novi redak Shift +Enter.

      Rad sa slikama.

      Grafički oblikuje u mreža.

      Sve računalne slike, svi formati za njihovo pohranjivanje (i, posljedično, svi programi za njihovu obradu) podijeljeni su u dvije velike klase - vektor i raster. Vektorska slika sastoji se od objekata - geometrijskih oblika sastavljenih od ravnih linija, lukova, kružnica i Bezierovih krivulja. Prednosti vektorska grafika puno. Sa stajališta dizajnera, njegova najvažnija prednost je to što se vektorska grafika može "vrtjeti" kako želite, bez straha da ćete "probušiti rupu" u slici ili izgubiti neke informacije. Još jedna prednost je mala veličina datoteka (u usporedbi s rasterskim slikama) i neovisnost o razlučivosti izlaznih uređaja (bilo da se radi o pisaču ili zaslonu monitora). Ovi čimbenici učinili su vektorska grafika vjerojatni kandidat za upotrebu u Internet. Istina je da u ovom trenutku vrijedi spomenuti Vektorska grafika ne javlja onoliko često koliko bismo željeli.
      Međutim, među stvarno korištenim vektorskim formatima, želio bih primijetiti format Shockwave Flash Macromedia. Za pregled ovog formata u preglednik trebam dodatak ( uključiti), koje tvrtka besplatno distribuira Macromedia. Danas postoje i stranice izrađene u potpunosti korištenjem ove tehnologije i stranice koje se koriste Flash format samo djelomično.
      Rasterska reprezentacija grafike temelji se na konceptu rastera. Raster je zbirka objekata (u ovom slučaju piksela) smještenih u identične retke i stupce. Oni. rasterski računalna datoteka može se zamisliti kao zbirka malih obojenih ili sivih kvadrata koji čine mozaik slike. Jer veličina ovih kvadrata je očito mala, nego pri gledanju rasterska grafika ti se kvadrati stapaju jedni s drugima, tvoreći kontinuiranu promjenu boja.

      Format za pohranu rasterske slike ima svoje prednosti i nedostatke. Jedna od velikih prednosti rasterske grafike je mogućnost rada s polutonovima, tj. sposobnost prenošenja slike točno onako kako izgleda u stvarnom životu. Ali među nedostacima, glavni problem je veličina datoteke. Prirodno nego više piksela dodijeljena za formiranje Slike, veća je kvaliteta odaslanog Slike, ali će veličina datoteke time biti veća.
      Ako se sada vratimo preglednicima, onda možemo reći sljedeće: većina preglednika može bez problema prikazati grafičke datoteke četiri formata (* .gif, *.jpg, *.png, *.bmp), od kojih je trenutno najbolje koristiti dva - * .gif i *.jpg. Pa čak i tada nakon preliminarne optimizacije.
      Umetanje slika na Web stranica.
      Umetnite sliku u svoj Web stranica može se napraviti na više načina:
      1. Povucite sliku iz Windows Explorer (odnosno izravno iz explorera).
      2. Povucite sliku iz Internet Explorer .
      3. Povucite slikovnu datoteku s ploče Popis mapa, ravno na stranicu.
      4. Sa međuspremnik- kopirajte sliku u međuspremnik iz bilo kojeg drugog programa, a zatim je zalijepite iz međuspremnika na stranicu.
      5. Sa Dodajte gumbe crtanje iz datoteke na alatnoj traci Standard.
      6. Korištenje izbornika Umetni  Slika.
      Pogledajmo ove metode detaljnije:
      Metoda 1
      Windows Explorer(tj. izravno iz Explorera) trebate:
      u Naslovna strana
      otvoriti prozor istraživača;
      u prozoru Explorera odaberite datoteku sa slikom koju želite umetnuti na svoju stranicu;
      lijevu tipku miša i povucite slikovnu datoteku na svoju Web stranica Slika se umeće na mjesto na kojem je bio kursor za umetanje na stranici.
      Metoda 2
      Za povlačenje slike iz Internet Explorer potrebno:
      u Naslovna strana otvorite stranicu na koju želite dodati sliku;
      V preglednik otvorite sliku koju želite staviti na svoj Web stranica preglednik Naziv datoteke mora završavati s jpg, jpeg, gif);
      Lijevom tipkom miša povucite odabranu sliku na svoju Web stranica;
      Metoda 3
      Da bi povuci i ispusti datoteku sa slikom s ploče Popis mape, izravno na stranicu koja vam je potrebna:
      u Naslovna strana otvorite stranicu na koju želite dodati slika;
      odaberite potrebnu slikovnu datoteku na ploči Popis mapa;
      lijevom tipkom miša povucite odabranu sliku na svoju Web stranica;
      odabrana slika će biti umetnuta na mjesto gdje se na stranici nalazio kursor za umetanje.
      Metoda 4
      Za umetanje slike u vaš Web stranica koristeći međuspremnik, trebate:
      u aplikaciji iz koje želite kopirati sliku odaberite sliku i koristite tipke Ctrl+C kopirajte sliku u međuspremnik;
      na tvoj Web stranica zalijepite ovu sliku iz međuspremnika pomoću tipkovničkih prečaca Ctrl+V
      Metoda 5
      Web stranica odlučite koristiti gumb Dodajte sliku iz datoteke na alatnoj traci Standard, To Naslovna strana otvorit će dijaloški okvir Crtanje.
      U ovom dijaloškom okviru navedite slikovnu datoteku koju želite dodati svojoj Web stranica i pritisnite tipku Umetnuti.

      Metoda 6
      Ako želite umetnuti sliku u svoj Web stranica odlučite koristiti jelovnik Umetni  Crtež, To Naslovna strana zatražit će od vas da napravite daljnje izbore:

      Slike... – odabir te stavke izbornika daje vam mogućnost korištenja gotove biblioteke slika.
      Iz datoteke... – odabir ove stavke izbornika daje vam mogućnost da samostalno označite lokaciju slikovne datoteke koju želite dodati svojoj Web stranica(upotrebom ove stavke otvorit će se dijaloški okvir Crtanje, rad s kojim je gore opisan).
      Napravite zbirku fotografija... - pomoću ove stavke izbornika možete stvoriti kolekciju slika u određenom stilu. Za ovo u prozoru koji se otvori Svojstva zbirke fotografija pomoću gumba Dodati na kartici Crteži odaberite slike i na kartici Izgled odaberite format dizajna.
      Dodavanje medijskih datoteka.

      Uz jednostavnu grafiku, kao što su slike u * .gif, *.jpg, *.png itd. Naslovna strana omogućuje vam objavljivanje na svom Internet stranice medijske datoteke. Tu spadaju: video zapisi, zvukovi...

      Da biste umetnuli video isječak, morate Umetni izbornik odaberite stavku Crtanje, i onda Snimanje videa...

      Otvorit će se dijaloški okvir. Video prozor, prikazat će videoisječke u * .avi, *.asf, *.ram, *.ra.

      Dodaj zvuk u Web stranica možete pronaći na kartici Općenito dijaloškog okvira. Svojstva stranice.

      Rad s tablicama.

      Stol- jedan od naj moćni alati koristi se za izradu web stranica.
      U početku stolovi korišteni su samo za predstavljanje strukturiranih podataka. Međutim, postupno su se pretvorili u moćne univerzalni lijek za raspored Internet stranice.

      Izrada tablica

      Najlakši način stvaranje tablice– koristite gumb Dodaj tablicu koji se nalazi na alatnoj traci Standard.
      Drugi način je korištenje predmeta izbornik Tablica  Umetanje  Tablica.
      I stol može se nacrtati i zalijepiti pomoću međuspremnika.

      Unos podataka i navigacija tablicom.

      Jedna od sjajnih stvari kod tablica je da je tekst koji unesete oblikovan unutar ćelije na isti način na koji smo ga navikli oblikovati u cijelom dokumentu. Tekst postavljen u ćeliju automatski se prelama u novi redak ako njegova duljina premašuje širinu stupca. Kada pritisnete tipku Unesi, kao i obično, umetnut je novi odlomak. Tekst ili brojevi se u tablicu unose s tipkovnice.

      Prije unosa podataka u stol, trebate postaviti kursor teksta u željenu ćeliju stolovi. To se može učiniti klikom na njega mišem.

      Međutim, prikladnije je koristiti kombinacije tipki za kretanje između ćelija:
      Tipkovnički prečaci: Akcija:

      tab bilo gdje u tablici, osim na kraju posljednjeg retka, idite na susjednu ćeliju i odaberite njezin sadržaj
      tab na kraju posljednjeg retka dodajte novi redak na dno tablice
      Shift+Tab idite na prethodnu ćeliju i označite njezin sadržaj
      Unesi započeti novi odlomak
      Unesi na početku prve ćelije dodajte tekst ispred tablice na početku dokumenta

      Izrada i primjena obrazaca.

      Obrasci predstavljati tekstualna polja, radio gumbi, potvrdni okviri, gumbi i mnoge druge kontrole. Posjetitelj stranice samo treba unijeti neke podatke u jedno ili drugo tekstualno polje, odabrati neke podatke s predloženog popisa, kliknuti na gumb Pošalji kako bi se podaci poslali na Web poslužitelj za obradu (ili obrađeni odmah na stranici).

      Upoznajmo vas - ispunite sljedeća polja:
      Tvoje ime:

      Tvoje prezime:

      Vaš datum rođenja: godina mjesec dan

      Hvala vam! A sad – idemo!
      1. Mali, ali okretan.
      Gdje god se nađe, on zapovijeda.
      Ući će u šator -
      Junak će se prevrnuti.
      Tko je to?
      Muha Buha Hirovito dijete
      2. Sjedi izbuljenih očiju,
      Govori francuski
      Skače kao buha
      Pliva kao čovjek.
      O kome govorimo?
      Mačka Žaba Papiga

      3. Što diše tuljan kad zaroni pod led?

      4. Zašto velike kornjače plaču?

      5. Kakvu odjeću može nositi haringa?
      Krzneni prsluk
      6. Koga nazivaju “riječnim konjem”?
      Vidra Nilski konj Krokodil

      7. Koje ptice ne izlegu svoje piliće?

      8. Koje ptice ne mogu letjeti?

      Ako trebate odabrati nekoliko odgovora, pritisnite i ne puštajte tipku Ctrl i kliknite lijevom tipkom miša na željeni odgovor

      Ali stvaranje formi na samom stranica to je samo pola posla. Budući da mora postojati program koji može obraditi podatke koje korisnik unese pomoću obrazaca.
      Takav program može se nalaziti na poslužitelju; možda je u vašem Web stranica u obliku zasebne datoteke ili se jednostavno može napisati u kodu html na tvoj Web stranica.
      Ona je ta koja određuje što će se dogoditi s podacima koje unese korisnik:

      informacija može se dodati u bazu podataka i na temelju toga graditi razne grafikone, ocjene...;
      informacija može se proslijediti putem e-pošta(ovo se često koristi za dobivanje podataka o korisniku u raznim vrstama upitnika);
      informacija možete obraditi na licu mjesta i posjetitelj vaše stranice će odmah dobiti povratnu informaciju (npr. dobit će bodove za test, vidjeti podatke koje je upisao u knjigu gostiju...).

      U vezi oblicima Postoji nekoliko osnovnih pravila:

      1. Svaki oblik zauzima određeno područje Internet stranice. Na jedan Web stranica može se nalaziti jedan ili više oblika.
      2. Svaki obrazac mora sadržavati barem jedan od elemenata obrasca (iako ih je u pravilu više).
      3.Svaki element oblicima ima ime i značenje. Naziv označava polje za unos podataka, a vrijednost je jednaka vrijednosti koju korisnik odabere.
      4. Jedan od elemenata obrasca (to može biti obični gumb ili bilo koja slika) mora obavljati funkciju gumba Poslati.

      Izrada obrazaca u Naslovna strana.
      Za dodavanje obrasca u Web stranica, potrebno:

      Postavite pokazivač na mjesto na koje želite zalijepiti oblik.
      U Umetni izbornik izabrati stavka Obrazac, u izborniku koji se otvori ponovno odaberite stavka Obrazac. Oblik bit će postavljen na vaš Web stranica- područje označeno točkastim okvirom pojavit će se s dva gumba: Pošalji i poništi.
      Koristeći istu točku izbornik Insert  Form redom umetnite potrebne elemente oblicima odabirom iz padajućeg kaskadnog izbornika (ne zaboravite da su svi elementi obrasca umetnuti unutar područja obrasca označenog točkastim okvirom).
      Nakon oblik stvoren, preostaje ga samo ispuniti sadržajem – elementima oblicima, tekst, slike, tabele... (sa dimenzijama oblicima promijenit će se automatski).
      Dodajte sadržaj oblicima može se obaviti na uobičajeni način. Na primjer, tekst se može upisati ili zalijepiti iz međuspremnika... Sve akcije s dodanim objektima su slične.
      Međutim stvaranje forme- ovo je tek početak rada. Nakon što ga izradite, morate konfigurirati svojstva kao oblicima, i njegovi elementi.

      Postavljanje svojstava forme.

      Za obradu ili pohranu podataka koje su unijeli posjetitelji Internet stranice, morate ili iskoristiti pružene prilike FrontPage poslužiteljska proširenja, ili neki drugi program koji radi Web poslužitelj.
      No bez obzira koji program odaberete, svejedno ćete morati konfigurirati svojstva obrasca i elemenata u njemu.
      Da biste otvorili prozor svojstava obrasca, trebate:
      V Umetni izbornik izabrati stavka Obrazac, i onda -
      ili
      Pozovite kontekstni izbornik za obrazac i odaberite stavku u kontekstnom izborniku koji se otvori Svojstva forme.
      Kao rezultat, otvorit će se dijaloški okvir Svojstva forme.

      1. B Spremi polje rezultati moraju naznačiti što će trebati učiniti s unesenim podacima oblik. Možete odabrati sljedeće opcije:
      o Slanje naziva datoteke- podaci će biti smješteni u navedenu datoteku na Web poslužitelj. Ova datoteka može biti Web stranica, koja će s vremenom postajati sve duža i duža, ili podatkovnu datoteku u koju se zatim može obraditi Excel, Access ili bilo koji drugi program;
      o Adresa za slanje pošte- u ovom slučaju svaki put kada posjetitelj klikne Internet stranice Pošalji na gumbe oblik e-mail će biti generiran i poslan na adresu koju ste naveli. Ova poruka će sadržavati sve podatke koje je korisnik unio na Web stranica.
      o U bazi podataka- u ovom slučaju podaci oblicima bit će poslani u bazu podataka. Baza mora biti uključena Web poslužitelj(ili mu biti na raspolaganju).
      2. B Polje svojstava obrazac, morate navesti naziv obrasca
      Načini gledanja Naslovna strana.
      Naslovna strana Nudi šest različitih načina za gledanje sadržaja Web stranica:

      Stranica,
      mape,
      Izvještaji,
      prijelazi,
      hiperveze,
      Zadaci.
      Za odabir željeni način rada možeš koristiti Ploča s prikazima nalazi se na lijevoj strani ekrana ili u izborniku Pogled na alatnoj traci Standard odaberite odgovarajuću stavku izbornika.

      Stranica
      U ovom načinu rada možete stvarati i uređivati Internet stranice. Ovdje možete stvoriti prazan Internet stranice i stranice temeljene na predlošcima dodjeljuju teme (skup stilova za predstavljanje stranice na zaslonu) stranicama. U ovom načinu rada možete dodavati i oblikovati tekst, dizajn stranice korištenje grafičkih i video slika (podržana je konverzija serije grafički formati u formate * .gif, *.jpg i *.png), dodajte audio na stranicu, predstavite informacije u tablicama, okvirima i obrascima i na kraju stvorite hiperveze. Ovo nije potpuni popis mogućnosti. Naslovna strana o uređivanju sadržaja Internet stranice.
      mape
      U ovom načinu rada možete vidjeti strukturu Web stranica(datoteke i mape) i njime upravljajte na isti način kao što to radite u Windows, ovaj način rada omogućuje dobivanje više pojedinosti o datotekama i mapama nego u načinu prikaza Stranica.
      Izvještaji
      Pruža vam više od desetak izvješća koja sadrže razne informacije o Web stranica, otvoren u Naslovna strana.
      Prijelazi
      Dizajnirano za pregled hijerarhije stranice. U ovom načinu rada možete manipulirati hijerarhijom povlačenjem pravokutnika (svaki predstavlja određeni Web stranica).
      Hiperveze
      Demonstrira sustav hiperveza koje međusobno povezuju stranice Web stranica(kao i sustav hiperlinkova na druge čvorove), osigurava njihovu provjeru integriteta i mogućnost izmjene.
      Zadaci
      Ovaj način je dizajniran za upravljanje zadacima Web stranica(dodavanje, brisanje, izvršavanje, postavljanje prioriteta izvršenja i praćenje statusa zadataka).

      Preuzmite besplatno Naslovna strana možete koristiti sljedeći link:

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

      Jednostavna web stranica u programu Frontpage je obična tablica s mnogo ćelija. Ove ćelije sadrže tekstove, slike, videa i sve što vidimo na web stranicama. Na primjer, ako ovu stranicu prikažete kao dijagram toka, izgledat će ovako.

      Jednostavna web stranica u programu Frontpage

      Struktura web stranice je jednostavna. Na vrhu je naziv stranice, odmah ispod je horizontalni izbornik. Na desnoj strani je okomiti izbornik, a na dnu je “footer”. U središtu je "tijelo" stranice. Ovo su glavni elementi najobičnije web stranice.

      Usput, sada ste na potpuno istoj web stranici. Kao što vidite, njegova struktura je vrlo jednostavna. Ovdje je sve nadohvat ruke. Klikom na vodoravni ili okomiti izbornik bit ćete prebačeni na druge stranice stranice.

      Također su stvorene po uzoru na najjednostavniju web stranicu o kojoj smo govorili gore. Odvojite vrijeme za pregledavanje besplatni tečajŠkola prodaje web stranica i naučit ćete kako brzo i jednostavno možete napraviti stranicu, pa čak i web!, u jednoj večeri.

      Zaglavlje web stranice

      U zaglavlju stranice Obično se nalazi zaglavlje, slika ili logo stranice. Svrha zaglavlja stranice je informirati posjetitelja koju je stranicu posjetio. Vrlo je važno da naziv točno odgovara sadržaju stranice.

      Zaglavlje web stranice

      Izbornik za stranicu

      U vodoravnom izborniku Smješteni su tematski odjeljci ili naslovi. U svojoj srži, to su veze koje vode do drugih stranica na web mjestu.

      Horizontalni izbornik web stranice

      Tijelo stranice

      Ovo je glavni dio stranice, koji sadrži sve osnovne podatke. Vi sada čitate ovaj članak u tijelu stranice.

      Vertikalni izbornik za stranicu

      Vertikalni izbornik , kao i vodoravna, koristi se za navigaciju web stranice. Okomiti izbornik napravljen je u obliku pitanja ili bilo kojeg zanimljivog i korisna informacija koji bi mogli biti zanimljivi posjetiteljima.

      Podnožje stranice

      Podnožje stranice nalazi se na samom dnu web stranice. Podaci o autorskim pravima i kontakt podaci nalaze se ovdje.

      Podnožje web stranice u Frontpage programu

      Sažimajući

      Sada znate od čega se sastoji jednostavna web stranica. U strukturi stranice nema složenih ili nerazumljivih elemenata. Sada je vrijeme da stečeno znanje primijenite u praksi. Idemo naprijed. U sljedećem ćete odjeljku izraditi