Ako si vybrať jedlá na titulnej stránke. Jednoduché rozbaľovacie menu. Vytvorenie jednoduchej rozbaľovacej ponuky

V predchádzajúcich kapitolách sme sa zamerali na vytvorenie jednostránkového webu. Stránka však spravidla pozostáva z niekoľkých stránok. Na pridávanie nových alebo skôr vytvorených stránok na stránku sa používajú príkazy ponuky, klávesové skratky, tlačidlo Nový na štandardnom paneli nástrojov.

Ako v každom textovom editore môžete na navigáciu na webovej stránke použiť posúvacie lišty, klávesy so šípkami na klávesnici a kombinácie klávesov. Napríklad, ak chcete prejsť na začiatok stránky, použite kombináciu klávesov +, na koniec stránky - +. kľúče A Umožňuje posunúť o jednu obrazovku nahor alebo nadol, resp.

Presun medzi stránkami webu sa vykonáva pomocou hypertextových odkazov, záložiek a panelov odkazov, ktoré sa na nich nachádzajú. Čo sú hypertextové odkazy a aké sú ich typy, čo je panel s odkazmi a čo musíte urobiť, aby ste ho vytvorili, sa dozviete v tejto kapitole.

Dialógové okno Šablóny webových stránok(Web Site Templates), ktorý sa otvorí pri vytváraní novej lokality, obsahuje šablóny, ktoré ponúkajú vytvorenie prázdnej alebo jednostránkovej lokality. Počet stránok potrebný na zverejnenie informácií na webe pridáte sami. Môžu to byť nové stránky, na ktoré uverejníte informácie neskôr, alebo webové stránky, ktoré ste predtým vytvorili pomocou FrontPage alebo iných softvérových produktov.

Komentujte

Importovanie súborov nebude zahrnuté v tejto lekcii, pretože to bude prebraté v samostatnej lekcii.

Existuje niekoľko spôsobov, ako pridať novú stránku na lokalitu. Môžete použiť ktorýkoľvek z nich, v závislosti od toho, ktorý spôsob sa vám zdá pohodlnejší, ako aj podľa toho, ktorú šablónu chcete použiť pri vytváraní novej stránky. Na pridanie novej stránky na lokalitu môžete použiť:

  • Tlačidlo Vytvorte(Nové) na štandardnom paneli nástrojov
  • tím Vytvorte(Nové) menu Súbor(Súbor), ktorý umiestni panel do okna FrontPage Vytvorte webovú stránku alebo web(Nová stránka alebo web)
  • Kombinácia kľúčov +

Pri použití kombinácie kláves alebo stlačení tlačidla Vytvorte(Nové) na štandardnom paneli nástrojov sa na stránku štandardne pridá prázdna stránka vytvorená pomocou šablóny normálna stránka(Normálna stránka).

V prípade, že pri vytváraní novej stránky chcete použiť inú šablónu, je potrebné otvoriť dialógové okno Šablóny stránok(Page Templates) (Obr. 16.1), ktorý obsahuje zoznam šablón stránok, ktoré FrontPage ponúka. Ak chcete otvoriť toto okno, vykonajte jeden z nasledujúcich krokov:

  • Ponuka tlačidiel Vytvorte(Nový) štandardný panel nástrojov na výber príkazu Stránka(strana)
  • Na jedálnom lístku Súbor(Súbor) vyberte príkaz Vytvorte(Nový) a potom z otvorenej podponuky - možnosť Stránka alebo Web(stránka alebo web). V okne FrontPage sa zobrazí panel. Vytvorte webovú stránku alebo web(Nová stránka alebo Web), na ktorej vyberte príkaz Šablóny stránok(Šablóny stránok)

Ryža. 16.1. Dialógové okno pre výber šablóny pre stránku, ktorá sa má vytvoriť

Dialógové okno Šablóny stránok(Page Templates) obsahuje zoznam šablón. Vyberte šablónu, ktorú chcete použiť pri vytváraní novej stránky. Použitie oblasti Ukážka V dialógovom okne (Ukážka) sa pozrite, ako bude vyzerať. Kliknite na tlačidlo OK zatvorte okno a umiestnite šablónu stránky na lokalitu.

V dôsledku pridania novej stránky na lokalitu sa v pracovnom priestore FrontPage zobrazí prázdna stránka s názvom newjage_l.htm(obr. 16.2). Tento názov označuje, že táto stránka je prvou, ktorú vytvoríte od spustenia programu. Pri vytváraní nasledujúcich stránok im FrontPage priraďuje názvy s rastúcimi číslami: new_page_2.htm, newjage_3.htm atď.

Ryža. 16.2. Na stránku bola pridaná nová stránka vytvorená pomocou šablóny „Bežná stránka“.

Horizontálna rozbaľovacia ponuka používa sa na organizáciu navigačnej štruktúry lokality. Optimálny počet úrovní hniezdenia je jedna alebo dve. Čím menej úrovní príloh, tým ľahšie pre návštevníka stránky nájde potrebné informácie. Ako vytvoriť pravidelné horizontálne menu je podrobne uvedené v .

Ako vytvoriť horizontálne rozbaľovacie menu

1. Značenie HTML a základné štýly pre rozbaľovaciu ponuku s jednou úrovňou vnorenia

Označenie HTML vodorovnej rozbaľovacej ponuky sa líši od bežnej ponuky v tom, že odkazuje na požadovanú položku zoznamu

  • je pridaný vnorený zoznam
      alebo<оl> .

      Na umiestnenie podponuky vzhľadom na hlavnú ponuku sú deklarované nasledujúce štýly:
      — pre prvok zoznamu, v ktorom je vnorený rozbaľovací zoznam: li (pozícia: relatívna;) ;
      - pre rozbaľovaciu ponuku ul (pozícia: absolútna;), ako aj hodnoty vľavo a hore.

      Pre prehľadnosť a pohodlie pri formátovaní pridajme triedu topmenu do hlavnej ponuky a triedu podponuky do rozbaľovacej ponuky.

      Rozbaľovaciu ponuku môžete skryť niekoľkými spôsobmi:
      1) zobrazenie: žiadne;
      2) viditeľnosť: skrytá;
      3) nepriehľadnosť: 0;
      4) transformácia: mierkaY(0);
      5) pomocou knižnice jQuery.

      Metóda 1. (zobrazenie: žiadne;)

      Rozbaľovacia ponuka je skrytá pomocou .submenu (zobrazenie: žiadne;) , zobrazené po umiestnení kurzora myši pomocou .topmenu li:hover .submenu (zobrazenie: blok;) .

      Metóda 2. (viditeľnosť: skrytá;)

      Menu je skryté pomocou .submenu (viditeľnosť: skryté;) , zobrazené pomocou .topmenu li:hover .submenu (viditeľnosť: viditeľné;) .

      Metóda 3. (nepriehľadnosť: 0;)

      Ponuka je skrytá pomocou .submenu (nepriehľadnosť: 0;) , zobrazená pomocou .topmenu li:hover .submenu (nepriehľadnosť: 1;) . Ak chcete zabrániť zobrazeniu ponuky, keď umiestnite kurzor myši nad oblasť, kde sa nachádza, pridajte viditeľnosť: skryté; a po umiestnení kurzora myši sa zmení na viditeľnosť: viditeľné; .

      Metóda 4. (transformácia: mierkaY(0);)

      Menu je skryté pomocou .submenu (transform: scaleY(0);) , zobrazené pomocou .topmenu li:hover .submenu (transform: scaleY(1);) . Keďže predvolená transformácia prvku je zo stredu, je potrebné pridať pre .submenu (transform-origin: 0 0;) , t.j. z ľavého horného rohu.

      Metóda 5: Použitie jQuery

      $(".five li ul").hide(); // skrytie rozbaľovacej ponuky $(".five li:has(".submenu")").hover(function()( $(.five li ul").stop().fadeToggle(300);) /* vyberte prvok zoznamu, ktorý obsahuje prvok s triedou .submenu a pridajte k nemu funkciu hover, ktorá zobrazí a skryje rozbaľovaciu ponuku */);

      2. 3D rozbaľovacia ponuka

      Pomocou transformácií CSS3 je možné vytvoriť zaujímavé efekty, ako napríklad zobrazenie ponúk v spodnej časti obrazovky.

      * ( 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 : žiadne; okraj: 0; výplň: 0; ) nav a ( zobrazenie: blok; zdobenie textu: žiadne; obrys: žiadne; prechod: 0,4 s uvoľnenie von; ) .topmenu ( viditeľnosť zadnej strany: skryté; pozadie : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relativní; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: largecase; ) .down:after ( content: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .topmenu li a:hover ( farba: #E6855F; ) .submenu ( pozadie: biele; orámovanie: 2px plné #003559; pozícia: absolútna; vľavo: 0; viditeľnosť: skryté; nepriehľadnosť: 0; z-index : 5; šírka: 150px; transformácia: perspektíva(600px) otočiťX(-90°); transformácia-pôvod: 0 % 0 %; prechod: 0,6 s easy-in-out; ) .topm enu > li:hover .submenu( viditeľnosť: viditeľné; nepriehľadnosť: 1 transformácia: perspektíva(600px) otočiťX(0deg); ) .submenu li a ( farba: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )

      3. Rozbaliteľná rozbaľovacia ponuka s logom

      V tomto príklade obsahuje horná časť stránky logo a navigáciu na stránke. Logo môže byť obrázok alebo text. Rozbaľovacia ponuka sa postupne rozširuje spod hornej položky zoznamu pomocou funkcie transformácie CSS3.

      Logo
      * ( box-sizing: border-box; ) body ( margin: 0; background: #f2f2f2; ) header ( background: white; text-align: center; ) header a ( text-decoration: none; outline: none; display : block; transition: .3s easy-in-out; ) .logo ( color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; ) nav ( display: tabuľka; okraj: 0 auto; ) nav ul ( štýl zoznamu: žiadny; okraj: 0; výplň: 0; ) .topmenu:after ( content: ""; display: table; clear: both; ) .topmenu > li ( topmenu > li > a ( text-transform: veľké písmená; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; ) .topmenu li a:hover ( color: #D5B45B; ) .submenu -link:after ( content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; ) .submenu ( background: #273037; position: absolute; left: 0; top: 100 %; z-index: 5; šírka: 180 pixelov; nepriehľadnosť: 0; transformácia: stupnicaY(0); transform-origin: 0 0; prechod: 0,5 s ľahký-in-out; ) .submenu a ( farba: biela; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: none; ) .topmenu > li:hover .submenu ( opacity: 1; transform: scaleY(1); )

      4. Zvýšenie rozbaľovacej ponuky

      Ďalší príklad rozbaľovacej ponuky. Efekt priblíženia pri zobrazení ponuky sa realizuje zmenšením počiatočnej submenu size.(transform: scale(.8);) , po umiestnení kurzora myši sa veľkosť zväčší na.topmenu > li:hover .submenu (transform: scale(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 ( štýl zoznamu: žiadny; okraj: 0; výplň: 0; ) nav a ( dekorácia textu: žiadna; obrys: žiadna; zobrazenie: blok; prechod: 0,4 s nabehnutie na výstup; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: relatívne; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px; výška: 12px; pozadie: #d2d2d2; horná časť: 16px; tieňový rámček: 4px -2px 0 #d2d2d2; transformácia: rotácia (30 stupňov); ) .topmenu > li:posledné dieťa:po (pozadie: žiadne; rámček -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: largecase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( farba: #c0a97a; ) .submenu ( pozícia: absolútna; vľavo: 50 %; hore: 100 %; šírka: 210px; ľavý okraj: -105px; backgrou nd: #fafafa; orámovanie: 1px plný #ededed; z-index: 5; viditeľnosť: skryté; nepriehľadnosť: 0 transform:scale(.8); prechod: 0,4s easy-in-out; ) .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 .submenu ( viditeľnosť: viditeľné; nepriehľadnosť: 1; transformácia: mierka(1); )

      5. Roletové menu

      Horizontálne menu s mini-animáciou: umiestnením kurzora myši na odkazy v hornom menu sa zobrazí malý kruh, ktorý tiež sprevádza vzhľad rozbaľovacej ponuky.

      @import url("https://fonts.googleapis.com/css?.jpg); pozícia-pozadia: stred v strede; opakovanie-pozadia: bez opakovania; veľkosť-pozadia: obal; výška: 100vh; poloha: relatívna; ) body:before ( content: ""; pozícia: absolútna; vľavo: 0; dole: 0; výška: 100 %; šírka: 100 %; pozadie: lineárny gradient (45 stupňov, 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 : none; display: block; color: #222; ) .topmenu > li ( display: inline-block; position: relatívna; ) .topmenu > li > a ( position: relatívne; padding: 10px 15px; font-family: " Kaushan Script", kurzíva; font-size: 1,5em; line-height: 1; letter-spacing: 3px; ) .topmenu > li > a:before ( content: ""; position: absolute; z-index: 5; zľava: 50 %; horná časť: 100 %; šírka: 10 pixelov; výška: 10 pixelov; pozadie: biela; polomer okraja: 50 %; transformácia: preložiť (-50 %, 20 pixelov); nepriehľadnosť: 0; prechod: 0,3 s; ) .topmeni u li:hover a:before ( transform: translate(-50%, 0); nepriehľadnosť: 1 ) .submenu ( pozícia: absolútna; z-index: 4; vľavo: 50%; hore: 100%; šírka: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; viditeľnosť: skryté; opacity: 0; transform: translate(-50%, 20px); transition: .3s ; ) .topmenu > li:hover .submenu ( viditeľnosť: viditeľné; nepriehľadnosť: 1; transform: translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; font-size: 11px; medzera medzi písmenami: 1px; výplň: 5px 10px; prechod: 0,3s lineárny; ) .submenu a:hover (pozadie: #e8e8e8;)

      Môže byť vytvorený bez JavaScriptu a/alebo jQuery. Na vytvorenie sa používajú CSS vlastnosti display, padding, pseudo-class:hover. K dispozícii je pracovné menu (kliknite na "Vidličku", ak chcete upraviť HTML menu vlastným spôsobom). Dĺžka videa ~ 12 min. Poznámka je určená pre začiatočníkov, webových vývojárov, ktorí robia prvé kroky v učení sa základov HTML a CSS; pre tých, ktorí študovali kurz „Základy HTML5 a CSS3“.

      Vytvorenie jednoduchej rozbaľovacej ponuky

      Na vytvorenie menu stránka zvyčajne používa štrukturálny blok HTML navigačný prvok a neusporiadaný zoznam. V jednej z položiek zoznamu je vložený ďalší zoznam, takže nie je zahrnutý v hypertextovom odkaze. Dalo by sa umiestniť aj ul do a, ale podľa mňa to nie je dobrý nápad, pretože pseudotrieda :hover pracuje aj s prvkami li!

      V našom prípade neuvažujeme o možnosti kedy rozbaľovací zoznam existujú aj vnorené zoznamy - táto úloha nie je sama o sebe náročná, no začínajúcemu kodérovi spôsobí ťažkosti. Všimnite si tiež, že zostavenie menu je možné vykonať nájdením alebo napísaním vhodného JavaScriptu.

      Pre pohodlie práce so značkami (zrazu stretneme ďalšiu navigáciu) pridajme do nášho štrukturálneho navigačného prvku triedu CSS; hypertextové odkazy budú útržky, ale namiesto # môžete napísať http: // site 🙂

      Značka HTML pre ponuku s rozbaľovacím podponukom

      Hlavná vec v CSS: vymazanie predvolených hodnôt prvkov HTML zahrnutých v ponuke; skrytie budúceho rozbaľovacieho podzoznamu ( podmenu) a jeho zobrazenie pri umiestnení kurzora myši nad nadradený prvok HTML – pomocou pseudotriedy:hover

      Pravidlá CSS pre rozbaľovaciu ponuku ul li, .menu ul( zobrazenie: inline-block; ) .menu ul( pozícia: relatívna; okraj: 0; výplň: 0; farba pozadia: #f63; ) .menu ul ul( zobrazenie: žiadne; pozícia: absolútna; farba pozadia: #369; horný okraj: 10px; ľavý okraj: -10px; ) .menu ul a( farba: #fff; text-decoration: none; ) .menu ul ul a( farba: #fff ; text-decoration: none; ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )

      Vytvorený jedálny lístok nie je dokonalý a dá sa vylepšiť (premýšľajte ako). Veľa šťastia pri rozvoji a nech vytváranie takýchto jedálničkov nie je nikdy ťažké!

      Vytvorte novú prázdnu webovú stránku

      Ak pri otvorení okna programu predná strana zobrazí prázdnu stránku, potom je možné na základe tejto stránky vykonať vývoj webovej stránky. Ak pri otvorení editora predná strana, zobrazí sa prázdne hlavné okno, potom na vytvorenie novej prázdnej stránky musíte spustiť príkaz Súbor/Nový a vyberte na paneli úloh prázdny stránku. V okne aplikácie sa zobrazí prázdna stránka. Ďalej je potrebné stránku rozvinúť, t.j. označiť (štruktúrovať) stránku, zadať text, obrázky atď.

      Vytvorte webovú stránku založenú na šablónach FrontPage

      Môžete tiež vytvoriť novú stránku na základe jednej zo šablón. Ak to chcete urobiť, vyberte príkaz „Iné šablón stránky" v oblasti úloh. Na obrazovke sa zobrazí dialógové okno Šablóny stránok s rôznymi šablónami stránok podľa kategórie.

      Vytvorenie webovej stránky na základe existujúcich webových stránok v počítači

      Môžete tiež vytvoriť webovú stránku na základe webových stránok dostupných vo vašom počítači. Ak to chcete urobiť, na paneli úloh vyberte príkaz „Od k dispozícii stránky" a v zobrazenom dialógovom okne vyberte požadovanú stránku. Potom môžete na stránke vykonať potrebné zmeny a uložiť ju pod iným názvom.

      Naučiť sa vytvárať webové stránky

      Vytvorte novú prázdnu webovú stránku

      Ak pri otváraní okna aplikácie predná strana zobrazí novú prázdnu stránku, potom je možné na základe tejto stránky vykonať vývoj webovej stránky. Ak sa pri otvorení editora zobrazí prázdne hlavné okno, potom na vytvorenie novej prázdnej stránky musíte spustiť príkaz Súbor/Nový a vyberte na paneli úloh „Prázdne stránka“.

      Skúsme vytvoriť hlavnú stránku našej webovej stránky!

      V okne aplikácie sa zobrazí nová prázdna stránka. Uložte stránku, ale pred uložením stránky v okne "uložiť" vytvorte priečinok serverOsobné priečinkyPriezvisko MenoStránka "Dinas", v ktorej vytvoríme podpriečinok Obrázky pre obrázky a potom uložíme stránku do priečinka Stránky "Dinas". Stránke priradíme názov – index, čo znamená domovskú alebo hlavnú stránku. Editor uloží stránku s príponou .htm. V priečinku Dinas Site teda bude podpriečinok Obrázky a súbor index.htm.


      Výkresy pre webovú stránku musia byť pripravené vopred a vložené do priečinka Výkresy. Skopírujeme výkres Office of Dinas LLC do priečinka Obrázky, aby sme vytvorili webovú stránku venovanú Dinas LLC.

      Aby bol dokument, ktorý ste vytvorili, všade správne definovaný ako napísaný v ruštine, postupujte takto:

      Vyberte položku Vlastnosti súboru. Otvorí sa dialógové okno Vlastnosti stránky.

      Na karte Jazyk v rozbaľovacej ponuke Vlajka prúd dokument, s uvedením: nastavovacie skupiny Jazyk stránku vyberte položku ruský. Rozbaľovacia ponuka Uložiť dokument, použitím nastavovacie skupiny Súprava znamenia vybrať položku azbuka. OK!

      Pozadie stránky

      Aby stránka vyzerala farebnejšie, skúsme pridať na našu stránku Pozadie,. Môžete to urobiť dvoma spôsobmi:

      1. Prejdite do ponuky Formátovať pozadie a v okne Vlastnosti strany vyberte požadovaný obrázok pomocou tlačidla Prehľadávať.


      V dôsledku toho bude naša stránka vyzerať takto:


      Skúste to, ale keď skončíte Zrušiť je to akcia!

      2. Ako pozadie našej stránky môžete použiť pripravené motívy. Prejdite do ponuky Formátovať tému. Dvakrát kliknite na tému Wave.

      Tabuľka ako rámec webovej stránky

      Ďalším krokom je návrh stránky. Vývoj stránky začína jej označením. Tabuľky sa používajú na rozloženie stránky. Môže sa prihlásiť Rozloženie stránky umiestnený na paneli úloh „Rozloženie tabuľky a bunky" v oblasti úloh. Ak to chcete urobiť, prejdite do ponuky tabuľky figurína tabuľky a bunky. Máme teda skvelú možnosť vybrať si už hotové rozloženia stolov, no môže sa stať, že tieto rozloženia nespĺňajú naše požiadavky. Preto sa na využitie pozrieme bližšie tabuľky ako kostra našej stránky.

      Vyberte tabuľku Vložiť tabuľku. Zobrazí sa dialógové okno Vložiť tabuľky, ktorý umožňuje konfigurovať parametre vytváranej tabuľky. (obr.10)

      џ Vo vstupných poliach s počítadlom Riadky a Stolbtsov nastavenie skupín položiek Veľkosť nastavuje počet riadkov a stĺpcov, ktoré bude tabuľka obsahovať.

      џ pozícia sú ovládacie prvky pre umiestnenie tabuľky na stránke a polohu obsahu buniek v tabuľke.

      џ V rozbaľovacom zozname zarovnanie môžete si vybrať spôsob zarovnania obsahu buniek. Následne môžete pre každú konkrétnu bunku samostatne upraviť parametre zarovnania pre jej obsah.

      џ Zoznam omotať sa určuje, ako sa text a ďalšie prvky stránky obtekajú okolo tabuľky.

      џ Vstupné pole s počítadlom poliach bunky definuje vzdialenosť medzi okrajmi buniek a ich obsahom.

      џ Vo vstupnom poli s počítadlom Interval bunky nastavuje vzdialenosť medzi susednými bunkami tabuľky.

      џ Začiarknutím políčka Opýtať sa šírka, Môžete to urobiť v poli nižšie.

      џ Pole Opýtať sa výška podobný predchádzajúcemu.

      V skupine kontrol Hranice existujú nastavenia týkajúce sa zobrazenia okrajov tabuľky.

      џ Vstupné pole s počítadlom Veľkosť nastavuje hrúbku okraja tabuľky v bodoch.

      џ Rozbaľovací zoznam Farba umožňuje vybrať farbu, ktorá sa použije na zobrazenie okraja.

      џ Ak začiarknete políčko kolaps hranica tabuľky, potom sa orámovanie zobrazí ako jedna čiara, inak bude mať pseudo-3D vzhľad.

      V skupine Pozadie zhromaždené prvky, ktoré ovládajú obrázok na pozadí tabuľky.

      џ Zoznam Farba umožňuje vybrať farbu pozadia tabuľky.

      џ Ak je začiarkavacie políčko začiarknuté Použite pozadie kreslenie, potom môžete nastaviť tabuľku ako obrázok na pozadí.

      Ak začiarknete políčko Autor: predvolená pre nové tabuľky skupín prvkov Autor: predvolená, potom sa všetky možnosti, ktoré ste nastavili pre túto tabuľku, stanú predvolenými nastaveniami pre všetky nasledujúce tabuľky.

      Následne, ak potrebujete zmeniť parametre už vytvorenej tabuľky, kliknite do nej - zobrazí sa kontextové menu, v ktorom je potrebné vybrať položku Vlastnosti tabuľky.

      Je možné meniť parametre jednej bunky aj viacerých buniek naraz. Ak to chcete urobiť, vyberte jednu alebo viac buniek, zavolajte kontextové menu a vyberte položku v ňom Vlastnosti bunky.

      V skupine kontrol pozícia sú ovládacie prvky rozloženia obsahu bunky.

      • V rozbaľovacích zoznamoch zarovnať na horizontálne a na vertikálne, budete si môcť vybrať spôsob zarovnania obsahu bunky.
      • · V skupine ovládacích prvkov Hranice, obsahuje nastavenia súvisiace so zobrazením okrajov tabuľky. Zoznam Farba umožňuje vybrať farbu okraja bunky.
      • · V skupine Pozadie zhromaždené prvky, ktoré ovládajú obrázok na pozadí bunky. Zoznam Farba vyberie farbu pozadia. začiarkavacie políčko Použite pozadie kreslenie nastaví obrázok ako pozadie.

      Existujú aj ďalšie možnosti: pridať a vymazať stĺpce, rozbiť a spojiť bunky. Všetky tieto príkazy nájdete aj v kontextovom menu pri výbere buniek. S podobnými príkazmi ste sa už stretli vo Worde a Exceli, preto nemá zmysel ich popisovať.

      Pomocou vyššie získaného teoretického materiálu sa pokúste vytvoriť dve tabuľky.

      Malo by to byť niečo takéto!

      Je čas napísať na našu stránku názov spoločnosti, ktorej patrí. Urobíme to však nie vo forme obyčajného textu, ale pomocou objektu WordArt (Dúfame, že viete, ako to urobiť!) Rovnakým spôsobom vložte slovo Propagácia v tretej bunke spodnej tabuľky a Voľné pracovné miesto v prvej bunke.. A teraz oddeľte názov firmy Horizontálne riadok: Vložte vodorovnú čiaru.


      Textový dizajn webovej stránky

      Existuje veľa možností formátovania textov na webových stránkach. Využitie potenciálu formátovania textu vám umožní urobiť texty vizuálne príjemnejšie, usporiadať ich v súlade s predstavami vášho autora a umožní vám jasne zdôrazniť dôležité slová a myšlienky.

      Keďže ste sa rozhodli naučiť niečo také zložité, ako je tvorba webových stránok, sme si istí, že viete, ako sa formátuje text, napríklad v programe, akým je Microsoft Word. Takže tu je úprava textov v programe predná strana podobne ako tomuto sa teda, prirodzene, nebudeme zdržiavať ani týmto.

      Povedzme, že na to slúži formátovacia lišta alebo lišta s ponukami Formátovať odsek písma.

      Sami zadajte celý text, ktorý vidíte na obrázku 15. Pri jeho úprave môžete trochu snívať. ALE nie prehnať to!!!


      Vložte ilustrácie

      Nie je možné si predstaviť HTML stránku bez grafiky, obrázkov atď. Zručne zvolená grafika upúta pozornosť návštevníkov stránky a zameria ich pozornosť na určité momenty našej stránky. Pomôže to zvýrazniť logické podsekcie a dať našej stránke osobitnú jedinečnosť, no zároveň by sa pri výbere obrázkov mali brať do úvahy nasledujúce body. Po prvé, nepoužívajte obrázok ako pozadie, čo sťažuje čítanie textu dokumentu. Napríklad príliš farebné, svetlé atď. Nie je potrebné používať veľké obrázky, ktoré budú dobu načítania naťahovať donekonečna. Ak stále potrebujete vložiť obrázok na stránku, je lepšie vytvoriť jeho malú kópiu a potom priradiť odkaz na stránku s pôvodným veľkým obrázkom, aby sa používateľ mohol sám rozhodnúť, či naozaj chce stiahnuť obraz v jeho pôvodnej podobe. Veľkosť jedného obrazového súboru by teda nemala presiahnuť 20-25 kb. Webové stránky zvyčajne obsahujú obrázky dvoch formátov GIF a JPG. Takéto obrázky sa správne zobrazujú vo všetkých prehliadačoch, ktoré podporujú zobrazovanie grafiky. Samozrejme môžete vkladať aj súbory s inými formátmi, ako BMP, TIF, no treba počítať s tým, že pri zápise na disk predná strana automaticky ich prevedie do jedného z dvoch základných formátov.

      Zvážte výhody a nevýhody týchto formátov. GIF je štandardný formát pre malé grafické obrázky, ako sú tlačidlá a ikony. Nepodporuje tiene a stredné tóny a je založený na palete 256 farieb. JPG v porovnaní s GIF podporuje oveľa viac farieb – viac ako 16 miliónov, vďaka čomu je najprínosnejší na zobrazovanie grafiky s plynulými poltónovými prechodmi. Veľkosť súboru JPG je navyše možné zmenšiť rôznym stupňom kompresie, no musíme si uvedomiť, že na rozdiel od súborov GIF sú súbory JPG komprimované so stratou kvality. Čím väčšia kompresia, tým väčšia strata, no musíme brať do úvahy, že JPG je celkom dobrý formát: dáva vysoký kompresný pomer s dosť malými stratami, ktoré okom prakticky nie sú viditeľné.

      Všetko, čo súvisí s grafom, zvážime podrobnejšie o niečo ďalej, zatiaľ len povieme, že môžete znova vložiť obrázok rovnakým spôsobom ako v iných programoch.

      Skúsme do stránky vložiť fotku Katalóg z priečinka s obrázkami.

      Príprava grafiky pomocou Adobe PhotoShop a Adobe ImageReady

      Vzhľad a atraktívnosť stránky do značnej miery závisí od grafiky, ktorá ju vypĺňa. Grafika je vizuálny prostriedok na podčiarknutie a zvýraznenie informácií zverejnených textom webovej stránky, ktorý by zároveň nemal odvádzať pozornosť návštevníka od samotného textu. Preto by sa príprave grafiky mala venovať najvážnejšia pozornosť.

      Medzi programami na profesionálnu prípravu rastrových obrázkov snáď neexistuje pokročilejší a obľúbenejší program ako Adobe PhotoShop.

      Adobe PhotoShop a Adobe ImageReady sa dobre dopĺňajú. Adobe PhotoShop spracováva fotografie, vytvára grafické tlačidlá, bannery a iné obrázky pre webovú lokalitu. A v ImageReady sú výsledné obrázky optimalizované, rozrezané na fragmenty atď.

      Téma 3.4: Aplikácia internetu v ekonomike a informačnej bezpečnosti

      Programy na vytváranie stránok

      3.3. Aplikačné programy na vytváranie webových stránok

      3.3.4. Vytvorenie lokality a webových stránok vo FrontPage

      Plánovanie lokality

      Plánovanie webových stránok je jednou z najťažších úloh. Ako správne umiestniť informácie, ktoré máte, na stránky budúceho webu? Aká by mala byť štruktúra stránky? Aké stránky by mala mať stránka? Aký dizajn by mali mať stránky? Aká by mala byť navigácia na stránke?

      Tieto a mnohé ďalšie problémy súvisiace s vývojom lokality musia byť vyriešené pred použitím aplikácií na vývoj lokality.

      Povedzme, že sa rozhodneme vytvoriť webovú stránku, ktorá bude poskytovať informácie o spoločnosti EN101, tieto informácie, ktoré máme, môžeme prezentovať na štyroch stranách:

      1. Domov
      2. O spoločnosti
      3. Obchodný prehľad projektu
      4. spôsob platby

      Názov stránky vyberáme podľa typu aktivity, napríklad: lekcie-sk101.

      Priraďte názvy stránok:

      • index - Domov;
      • info - O spoločnosti;
      • obchod- Obchodná kontrola projektu;
      • zaplatiť - Spôsoby platby.

      Ako hlavnú stránku používame predtým vytvorenú webovú stránku Home (index). Vytvárame štruktúru stránky, ktorá je znázornená na obrázku.


      Ryža. jeden.

      Na každú stranu pripravíme text vo Worde a kresby v Adobe Photoshop vo formátoch GIF, JPEG alebo PNG s rozlíšením 72 pixelov / palec, navyše je možné použiť skripty.

      Následne si môžete zaregistrovať doménu druhej úrovne v niektorej zo zón (ua, ru, com, net, info atď.) a po rozvinutí stránky si vybrať platený hosting, ktorý vyhovuje rýchlosti prístupu a poskytuje potrebné služby pre aby stránka fungovala efektívne. Ak umiestnime stránku na bezplatný hosting, môžeme si vybrať napríklad hosting na serveri narod.ru. Ak to chcete urobiť, musíte sa zaregistrovať na serveri a získať bezplatný hosting. V tomto prípade budete mať doménu tretej úrovne, napríklad: lekcie-en101.narod.ru.

      Vytvorte lokalitu pomocou aplikácie FrontPage

      1. Ak chcete vytvoriť lokalitu pomocou aplikácie FrontPage, musíte otvoriť okno aplikácie jedným z nasledujúcich spôsobov. Potom sa na obrazovke zobrazí okno aplikácie alebo grafické rozhranie FrontPage, v ktorom sa zobrazí predchádzajúca lokalita alebo stránka. Ak chcete ukončiť predchádzajúcu lokalitu alebo stránku v aplikácii FrontPage, použite príkaz Súbor/Zavrieť alebo Súbor/Zavrieť uzol, prípadne oba, ak bola lokalita aj stránka otvorené.

      Potom spustíme príkaz Súbor / Nový a na paneli úloh „Vytvoriť“, ktorý sa otvorí, kliknite na „Šablóny iných webových stránok“ v časti „Vytvoriť webovú stránku“. Otvorí sa dialógové okno „Šablóny webovej lokality“, v ktorom musíte vybrať položku „Vyprázdniť webovú lokalitu“, potom zadať umiestnenie novej webovej lokality (napríklad D:\Documents and Settings\TVA\My Documents\My Web Sites\lessons- sk101) a kliknite na tlačidlo OK. Obrázok zobrazuje fragment dialógového okna "Šablóny webových stránok", v ktorom je uvedená adresa novej stránky.


      Ryža. 2.

      Po uložení lokality na obrazovku sa v okne aplikácie FrontPage zobrazí nová webová lokalita v režime priečinkov.



      Ryža. 3.

      2. Vytvorte domovskú stránku v aplikácii FrontPage pre novú lokalitu. Vytvorenie domovskej stránky vo FrontPage je možné vykonať rôznymi spôsobmi. Môžete napríklad kliknúť na tlačidlo „Vytvoriť stránku“ na paneli „Obsah“, čím sa do okna webovej lokality pridá stránka index.htm, ako je znázornené na obrázku



      Ryža. 4.

      3. Potom skopírujte obsah predtým vytvoreného priečinka EN101, ktorý obsahuje priečinok obrázkov a indexovú stránku (priečinok _vti_cnf sa vygeneruje automaticky pri vytváraní webovej stránky). Obsah zložky EN101 je znázornený na obrázku.


      Ryža. 5.

      Vložte uložený obsah priečinka EN101 zo schránky do novovytvoreného priečinka webovej stránky lekcií-en101, ktorý je znázornený na obrázku.


      Ryža. 6.



      Ryža. 7.

      Predtým vytvorená stránka index.htm (angličtina na internete) sa teda používa ako domovská stránka v novej lokalite. Hlavnú stránku môžete vytvoriť aj inými spôsobmi, ako je popísané v časti 3.3.2. Úvod do FrontPage.

      5. Štruktúru stránky vytvoríme v editore FrontPage, t.j. na hlavnú stránku pridajte ďalšie tri stránky: info - O spoločnosti; obchodno - obchodný prehľad projektu; platba - Spôsoby platby. Ak to chcete urobiť, prepnite sa do režimu Prechody vykonaním príkazu View/Transitions. Potom je potrebné vybrať domovskú stránku a kliknúť na tlačidlo Nová strana na navigačnom paneli alebo použiť kontextové menu, pridá sa Nová strana 1. Podobne pridajte ďalšie dve nové stránky. Štruktúra stránky je znázornená na obrázku.



      Ryža. osem.

      6. Premenovanie nových stránok vo FrontPage. Prepnite sa do režimu priečinkov a pomocou kontextového menu zmeňte názvy Nová strana 1 na Info, Nová strana 2 na podnikania, Nová strana 3 na zaplatiť.


      Ryža. 9.

      7. Za účelom jednoty dizajnu stránok stránok kopírujeme obsah hlavnej stránky na vytvorené stránky info, obchod, platba. Ak to chcete urobiť, otvorte hlavnú stránku v režime Stránka a vykonajte príkaz „Upraviť / Vybrať všetko“ a kliknite na tlačidlo Kopírovať na paneli nástrojov. Prepnite sa do režimu Priečinok a dvakrát kliknite na informačnú stránku, otvorí sa v režime Stránka, potom kliknite na tlačidlo Vložiť. Obsah hlavnej stránky sa skopíruje na informačnú stránku, podobne skopírujeme obsah hlavnej stránky na ďalšie dve stránky.

      • Domov;
      • O spoločnosti;
      • Obchodná kontrola projektu;
      • Spôsob platby.

      Vyberte napríklad navigačnú položku „Prehľad podnikania projektu“ a pomocou kontextovej ponuky otvorte dialógové okno Pridať hypertextový odkaz, vyberte súbor business.htm a kliknite na tlačidlo OK. Podobne vytvárame hypertextové odkazy pre všetky navigačné položky na všetkých stránkach. Obrázok zobrazuje fragment dialógového okna Pridať hypertextový odkaz.



      Ryža. 10.

      10. Pridajte a vyplňte metaznačky (medzi značkami a) na stránkach: „O spoločnosti“; "Obchodné hodnotenie projektu"; "Spôsoby platby" v režime Kód.

      Napríklad na stránke Informácie sú značky vyplnené takto:

      • O En101

      11. Premenovanie názvov strán v režime Prechody. Vyberte stránku a pomocou kontextového menu ju premenujte:

      • nová strana 1 premenovať na "O spoločnosti".
      • nová strana 2 premenovať na „Prehľad podnikania projektu“.
      • nová strana 3 premenovať na "Spôsoby platby".

      Výsledkom vývoja je stránka, ktorá pozostáva zo štyroch webových stránok. Táto stránka vytvorená pomocou FrontPage na súborovom systéme PC môže byť hosťovaná na webovom serveri na internete alebo intranete.

      Ak chcete vytvoriť svoju vlastnú webovú lokalitu v aplikácii FrontPage, stiahnite si ju.