Tento článek se zaměří na stránky, které vývojáři vytvářejí ručně, tedy tvoří.

Tento článek je určen uživatelům obeznámeným s HTML a css . Je také žádoucí znát alespoň základy Adobe Photoshop

Jednou z fází vytváření skutečného webu je vytvoření šablony PSD. Najdete zde také názvy jako layout, design nebo zdrojový kód.

Šablona je objednána návrháři. Návrhář nakreslí rozvržení v Adobe Photoshopu a uloží jej ve formátu PSD.

Co formát PSD?

Pro lepší pochopení lze uvést jednoduchý životní příklad. V dětství každý lepil aplikace. Vystřihli dům z papíru - nalepili. Vánoční stromeček vystřihli - nalepili. A tak dále, dokud není práce hotová.

A nyní si můžete představit situaci, kdy byly figurky vystřiženy, rozloženy na archu správná místa ale ještě nepřilepené. Formát souboru PSD lze tedy porovnat s aplikací, na které ještě nejsou figurky nalepeny, ale jsou uspořádány ve správném pořadí.

Díky tomu lze každou takovou „figurku“, nebo spíše každý jednotlivý fragment šablony, uložit jako samostatný obrázek, který pak lze použít na webu.

Zde je rozložení stránky, která bude vytvořena.

Poté, co máme připravená šablona ve formátu PSD můžete přejít přímo do rozvržení

  1. Vytvořte složku, do které bude rozložení uloženo, například „Site“.
  2. Ve složce "Site" vytvořte složku pro obrázky, například img.
  3. Ve složce "Site" vytvořte složku pro styly, například css.
  4. Nyní musíte spustit Adobe Photoshop a otevřít v něm soubor psd. Odtud je potřeba „vytáhnout“ všechny obrázky, které budou na webu použity.

Zde je třeba věnovat pozornost tlačítku "Vrstvy". Na obrázku je zvýrazněn červeným oválem.

Toto tlačítko zapíná a vypíná okno vrstvy. Vrstvy jsou samotné nelepené části aplikace. Vrstvy jsou pro pohodlí rozděleny do složek, které lze sbalit a rozbalit. Princip fungování je téměř stejný jako v Průzkumníku Windows.

Prvním krokem je sbalit všechny složky. Rozbalte podle potřeby.

Nyní můžete začít vytahovat obrázky

Prvním krokem je výběr nástroje rám. Poté vyberte pouze část, která omezuje logo webu

Poté stiskněte klávesu Enter. Vše kromě vybrané oblasti bude oříznuto.

Nyní můžete odstranit pozadí. Chcete-li to provést, vypněte vrstvu pozadí.

Chcete-li rychle najít potřebné vrstvy, můžete provést následující:

Zde se vrstva jmenuje "Obrázek 2". Kliknutím na obrázek oka se vrstva stane neviditelnou.

Existují však další dvě vrstvy, které je také potřeba vypnout. Akce jsou podobné.

Nyní můžete ušetřit. Chcete-li to provést, postupujte takto

Vyberte si ze 4 navrhovaných možností a z navrhované druhé. Vyberte příponu gif.

Název souboru logo.gif . Uložit soubor do složky img . Tam by měl být uložen i zbytek obrázků.

Můžete se řídit těmito zásadami:

  • fotografická kvalita - jpg
  • fotografická kvalita s průhledným pozadím – png-8 nejsem spokojen s kvalitou - png-24
  • málo barev na obrázku - gif

Chcete-li před oříznutím vrátit původní verzi, musíte otevřít okno historie

Klikněte na název souboru a nastavte příslušné měřítko.

Ostatní snímky se uloží stejným způsobem.

Totéž platí pro obrázek tlapky, který se objeví, když najedete na položku nabídky.

Další obrázky jsou volitelné. Může být bílá, může být průhledná.

Zde byste měli zvolit možnost uložení velmi pečlivě, protože ve zdrojích psd nejsou obrázky se špatně zpracovanými okraji neobvyklé. Zde je příklad:

Obrázek byl uložen do průhledné pozadí. Při pohledu na černou jsou ale vidět špatně zpracované okraje. Ale při použití světlého pozadí nemusí být tato vada patrná.

Jako pozadí budete muset vyříznout malý obrázek, který vyplní stránku jako dlaždice. V tomto příkladu se však pozadí neopakuje. Proto je lepší najít podobný obrázek. A můžete se pokusit zvednout a vystřihnout různé fragmenty z pozadí.

Začátek rozvržení. Obal. Záhlaví webu.

Rozvržení bude pokryto pomocí HTML5 a CSS3.

Ve složce webu, kterou musíte vytvořit HTML soubor. Například index.html

Ve složce css vytvořit soubor styl.css .

Navíc ve složce css musíte vložit soubor reset.css s následujícím kódem

/* v2.0 | 20110126 Licence: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, velký, citovat, kód, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, střed, dl, dt, dd, ol, ul, li, sada polí, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, menu, nav, output, ruby, section, Summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset pro starší prohlížeče */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( styl seznamu: žádný; ) blockquote, q ( uvozovky: žádné; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps: kolaps; hranice r-vzdálenost: 0; )

Faktem je, že různé prohlížeče pro stejnou značku může mít různá nastavení. Aby byla zajištěna kompatibilita mezi prohlížeči, je nutné je resetovat. Výše uvedený kód je od Erica Mayera.

První v index.html měli byste napsat hlavní značky.

GUABI Přírodní

Pro tag ve stylech musíte nastavit pozadí.

Jak již bylo zmíněno, pozadí se zde neopakuje. Proto by bylo racionálnější zvolit jakýkoli podobný.

Body( background-image: url(../img/bg.gif); )

Nyní je potřeba vytvořit obal pro web – blok, do kterého bude umístěn veškerý obsah.

obal

blízko uzavření

identifikátor bloku se píše do komentářů. S časem značky
bude toho hodně a může dojít ke zmatku. Nebude jasné, kde se který div zavírá.

Uvnitř bloku je také obal slova. Je tam dočasně. Cílem je vidět blok během rozvržení a odlišit ho od ostatních. Ze stejného důvodu bude ve stylech bloku dočasně poskytnuto světlé pozadí.

Chcete-li nastavit styly, musíte znát jeho šířku a odsazení nahoře a dole. Pro měření můžete Adobe Photoshop Pomocí nástroje Obdélníkový výběr vyberte obrázek webu od pravého k levému okraji. Na výšce nezáleží.

Šířku lze vidět v okně "Info".

Vyšlo to na 964px.

Podobně je již důležitá pouze výška výběru a ne šířka, odsazení se měří shora a zdola.

Ukázalo se, že 100 pixelů nahoře a 85 pixelů dole.

Tímto způsobem se určí případné vzdálenosti ve zdroji.

#wrapper ( šířka: 964px; margin-top: 100px; margin-right: auto; margin-bottom: 85px; margin-left: auto; background-color: #FF9; )

Levý a pravý okraj je nastaven na automatický. Tím se blok zarovná na střed.

Strana:

Od autora: dnes je skvělý den na rychlou změnu webu! Jste připraveni budovat své podnikání online? Chcete vytvořit nový web s nejnovější design, pixel na pixel? Nebo chcete přepracovat staré stránky pro nové trendy? K tomu musíte být skutečně kreativní člověk a umět pracovat s Photoshopem a vytvářet špičkové webové stránky. I když jste profesionální webový designér se správnými dovednostmi, přizpůsobení každého pixelu stále vyžaduje čas, vytvoření každé stránky pro klientský web a věnování pozornosti každému prvku uživatelského rozhraní, oblasti a drobnému detailu. To vše vyžaduje čas.

Je mnohem rychlejší vzít si vysoce kvalitní šablonu webu PSD, která již byla navržena s péčí o každý pixel. Máme obrovský výběr různých souborů Photoshopu. Mohou být použity jednorázově nebo jako měsíční předplatné.

Nejlepší šablony webových stránek PSD na Envato Elements (neomezené použití)

V roce 2016 byly spuštěny webové stránky Envato Elements, které si okamžitě začaly získávat divokou oblibu. Na webu je pouze jedna nabídka (all inclusive):

Zaregistrujte se u Envato Elements a můžete si stáhnout neomezené množství šablon webových stránek psd, motivů, písem, grafických sad a další. Vše za jeden měsíční poplatek. Všechno je správně! Stažení profesionální šablony a grafiku podle vašich představ, vše přizpůsobte svému projektu.

Níže je nejoblíbenější šablona na Envato Elements, Elementy Multipurpose PSD. Dodává se s 19 PSD soubor s, rozložení obchodů, design blogu, stránky portfolia atd.

Pokud se zaregistrujete u Envato Elements, můžete si stahovat neomezené množství souborů a neomezeně je používat za pouhých 29 $ měsíčně. Běžná cena za měsíc je 49 $, nyní je čas využít tuto velkou slevu.

Pokud jsou vaše potřeby omezené nebo dáváte přednost nákupu grafiky a webového obsahu samostatně, máme na ThemeForest tisíce hotových šablon.

Šablony stránek PSD na ThemeForest

Níže je TOP PSD šablony stránky pro rok 2016, které si můžete koupit nebo stáhnout. To je jen kapka z objemu, který profesionální weboví designéři každý týden nahrávají do ThemeForest. Podívejte se na nejlepší šablony webových stránek Photoshopu roku 2016:

Správný design může proměnit průměrný web v umělecké dílo:

Prodej na vašem webu může raketově vzrůst a vy můžete na potenciální kupce udělat trvalý dojem, a tím se zvýšit minimální cena.

Můžete přetvořit svou identitu – proměnit průměrnou značku v cukroví.

Vaše firma (nebo vaši zákazníci) mohou realizovat své plány a svůj potenciál online!

TOP 10 šablon webových stránek PSD (z ThemeForest 2016)

Níže je uveden TOP 10 šablon webových stránek PSD na ThemeForest. Všechny šablony jsou vytvořeny talentovanými webovými designéry, kteří věnují čas a péči každému detailu těchto souborů PSD.

1. Cesis – komplexní, víceúčelová šablona webových stránek PSD

Nejlepší sada šablon PSD roku 2016 se širokou škálou funkcí. Sada více než 100 návrhů ve Photoshopu, rozvržení jsou čistá a velmi flexibilní. Ohromující šablony, každý pixel se hodí, založené na 1170px mřížkovém systému. Pomocí maket vytvořte web pro jakýkoli typ společnosti, od módních blogů po umělecká portfolia nebo kreativní podniky.

2. OnePro – Creative PSD Website Template

One pro je čistá šablona webu SPD s oblíbeným designem. Šablona používá dobrý systém mřížky, které lze použít k vytvoření mnoha různých stránek s osobními stránkami, obchody nebo firemními blogy. V této šabloně je nejméně 55 logicky uspořádaných souborů PSD. Použijte toto téma pro rychlá tvorba krásné stránky.

3. Elektro — Elektronický online obchod PSD šablona

Electro je vysoce funkční sada 36 šablon PSD. Šablona má čistý, světlý design, připravená k vytvoření skvělého online obchodu s elektronikou. Soubory šablon jsou profesionálně uspořádány a vrstveny do skupin pro snadné použití. Součástí jsou také tři unikátní domovské stránky a 5 záhlaví, které lze vzájemně kombinovat.

Moderní tendence a přístupy k vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

4. Kruh – Unikátní šablona webových stránek PSD

Circle je šablona webu PSD, která přichází s úžasnými vzory. Získáte 173 vrstvených souborů PSD a spoustu designů. Jedná se o moderní, čistou a profesionální sadu webových stránek, které lze upravit pro různé společnosti. Návrhy jsou založeny na mřížkovém systému, který usnadňuje převod souborů Photoshopu do libovolného CMS.

5. Agora – úžasná šablona eCommerce PSD

Agora je moderní, lehká a kreativní šablona elektronického obchodu. Pokud zvolíte tuto sadu designů, uživatelé si vaše stránky zamilují. Stránka poskytne uživatelům krásný a jedinečný zážitek. Šablony PSD jsou vyrobeny ve sportovním stylu, ale lze je přizpůsobit k prodeji čehokoli. Obsahuje 14 zabijáckých designů a 6 grafických posuvníků!

6. The Spectre – šablona webových stránek agentury

Spectre je moderní plochá šablona pro agentury. Design je čistý s 12 responzivními stránkami a tematickými bloky, které můžete kombinovat, jak chcete. Spousta designových prvků, stylové ikony čar, vektorové tvary, poutavé prvky uživatelského rozhraní, jako jsou profily, chytlavé citace a obrázky na displeji. Šablona je přizpůsobena pro Bootstrap s 12 sloupci a šířkou 1170px. Toto je dobře navržená, atraktivní sada souborů PSD, připravená k použití ve vašem dalším návrhu.

7. Experti — Obchodní a finanční šablona PSD

Pokud hledáte jednu z nejlepších šablon pro svůj nový finanční web, Experts je skvělá volba. Obsahuje 55 souborů PSD, spoustu návrhů domovská stránka a také unikátní stránky, kam můžete umístit ceny, recenze, své služby atd.

Tato šablona je oblek a kravata pro vaši firmu. Šablona je určena pro právo, finanční společnosti, investiční firmy, účetní a další odborná činnost. Na výběr je 21 záhlaví, spousta zápatí a dokonale sladěné komponenty a také přizpůsobitelné sekce.

8. Begge – šablona PSD obchodu s moderní módou

Pokud jste si letos dali za cíl spustit internetový obchod speciálně v oblasti módního oblečení, je tato šablona jako stvořená přímo pro vás. Optimální design, který nejprve zobrazí vaše produkty a obrázky.

Čisté uspořádání s velmi přehlednou konstrukcí. Design je přesvědčivý a organizovaný s překrývajícími se blokovými vložkami, aby upoutal pozornost návštěvníků. Soubory PSD jsou organizovány a lze je rychle přizpůsobit tak, aby vyhovovaly vašemu webu!

9. Digitální agentura – SEO/Marketing Template

Digitální agentura – šablona webu PSD pro SEO a různé agentury. Je založen na materiálovém designu, míchání čistých prvků uživatelského rozhraní s jasnými barvami. Čeká jen na to, až přidáte své fotografie a grafiku, než ji nahrajete na web. Můžete si vybrat, zda si zakoupíte soubor PSD, nebo si zakoupíte verzi WordPress s kódem, vestavěným Bootstrap 3 a mnoha funkcemi.

10. Volter – Creative Website Template (PSD)

Kreativní šablona webu PSD s neobvyklým designovým stylem. Volter je navržen tak, aby předvedl vaše portfolio, předvedl vaše krásné obrázky a přilákal nové návštěvníky svým nepředvídatelným písmem. Zde můžete předvést svou práci, popsat své služby a říci novým klientům, proč by si vás měli najmout.

Soubor PSD má vysoké rozlišení a na základě mřížky Bootstrap 1170px se s ním velmi snadno pracuje. Nejlepší šablona zcela připraven k práci, vzít a navrhnout jedinečné stránky!

Získejte nové šablony webových stránek (PSD)!

Objevte stovky profesionálních šablon PSD vytvořených talentovanými webovými designéry na ThemeForest. Nebo pokud si jich chcete stáhnout hodně Photoshop šablony, motivy a grafické balíčky pravidelněji, podívejte se na Envato Elements, kde si můžete stáhnout a používat spoustu kvalitních souborů bez omezení za jednorázový měsíční poplatek.

V předchozím článku jsem názorně ukázal, jak vytvořit layout webu ve Photoshopu a výsledkem byla jednoduchá, ale ne poutavá šablona.

V tomto článku vám ukážu, jak jej převést z rozvržení PSD na hotovou webovou stránku pomocí nástrojů pro označování HTML a kaskádových stylů (CSS).

Obecně existuje mnoho přístupů k přípravě šablon: někdo nejprve důkladně nakreslí šablonu a teprve potom rozloží, někdo nakreslí návrh přibližně a během rozvržení přidá tahy; někteří nejprve kreslí, pak stříhají, jiní (jak jsme to udělali v minulém článku) ukládají grafické objekty přímo v procesu tvorby návrhu. Dokonce i nástroje pro rozvržení a kreslení jsou pro každého jiné: někteří si nainstalují pluginy a fungují vizuální editory, ostatní používají standardní sada příležitosti a sazba v jednoduchém editoru ... obecně, níže bude jen jeden z mnoha způsobů.

Přípravná fáze

Vytvořte tedy kdekoli (alespoň na ploše, alespoň v samostatné složce) soubor index.html. Ve stejném adresáři přidejte adresář snímky. Bude obsahovat všechny obrázky použité v šabloně a na stránce. Vzhledem k tomu, že jsme grafické prvky předem vyřízli, okamžitě je zkopírujeme do složky obrázků a dáme jim následující názvy:

  • zpět_vše- pozadí webových stránek.
  • header_top- pozadí záhlaví.
  • velký_obrázek- logo.
  • titul- pozadí nadpisů levého panelu.
  • zápatí- vyplnění spodní části webu.
  • 1 mini- první fotografie hlavní části stránky.
  • 2 mini-druhá fotka.

Ve složce se stránkou index.html vytvořte soubor styly.css- bude obsahovat šablony stylů šablony.

Poznámkový blok se nedoporučuje pro úpravy kódu. Pro tento účel mnohem lepší editor poznámkového bloku++. Je to zvýrazňovač syntaxe různé jazyky(HTML a CSS – včetně) program, který je mnohem pohodlnější vyvíjet než v něm jednoduché editory textové dokumenty.

Rozdělte dokument na bloky

Otevřít dokument index.html a zadejte do něj následující kód:

Šablona webu

Uložte soubor. Všechny tyto značky jsme již dlouho studovali a nepotřebují vysvětlení. Výše uvedeným kódem jsme vytvořili základ HTML stránky, nyní je potřeba ji rozdělit do bloků – označit strukturu dokumentu, co v něm bude následovat.

Máme 7 bloků, uvedeme je podle identifikátoru (hodnota atributu id):

1. obsah- blok, uvnitř kterého budou uloženy zbývající bloky.

2. záhlaví- blok záhlaví, uvnitř kterého bude:

2.1. Jídelní lístek- horní navigace.

2.2. logo- obrázek s textem.

3. že jo- hlavní část stránky.

4. vlevo, odjet- panel vlevo.

5. zápatí- spodní část webu.

Zapíšeme tedy (do kontejneru vložte následující kód):

V prohlížeči bude stránka stále prázdná, ale strukturu dokumentu již lze pochopit, je připravena.

Nastavte základní formátování

Nyní přejdeme ke stylování CSS, abychom dali dokumentu počáteční vzhled.

OTEVŘENO styl.css a přidejte řádky kódu, které vidíte níže.

Odebírání odsazení a okrajů na stránce ve výchozím nastavení:

* ( okraj: 0px; odsazení: 0px; )

Barvy odkazů nastavíme v závislosti na chování uživatele (umístil kurzor, neukázal, navštívil) a odstraníme podtržení z odkazů, nad kterými je umístěn ukazatel myši:

A:link ( color: #D72020; ) a:hover ( text-decoration: none; color: #FF0000; ) a:visited ( color: #D72020; )

Nastavíme základní design stránky: předepíšeme barvu pozadí a obrázek na pozadí (nastavíme horizontální výplň obrázku), nastavíme barvu, styl a velikost písma:

Text ( pozadí: #FFD723 url(images/back_all.jpg) repeat-x; písmo: 13px Tahoma, Verdana, Arial, Helvetica, bezpatkové; barva: #333333; )

Definice bloku obsahu:

#content ( margin: 0 auto; background: #ffffff; width: 786px; text-align: left; )

Nyní můžete stránku obnovit. Je vyplněna podložním vzorem. Zatím jediná viditelná změna, za kterou může nemovitost Pozadí třída tělo.

Vytvoření horizontálního menu

Existuje začátek a nyní můžete začít přímo rozkládat hlavní bloky.

Začněme samozřejmě kloboukem. Který se zase skládá z bloků horizontálního menu a loga.

Nejprve nastavíme obecný vzhled obou prvků záhlaví: zarovnání textu doleva, bílé pozadí a výška 306px:

#header ( pozadí: #ffffff; výška: 306px; zarovnání textu: vlevo; )

Dostali jsme tedy jakýsi hlavičkový prostor: bílý obdélník, na kterém budou umístěny jeho prvky.

Bylo by logické to udělat hned teď horizontální menu. Tak to uděláme, ale teprve před vložením do HTML si musíme připravit pravidla CSS, jinak to bude v prohlížeči vypadat hrozně.

Udělejme první úpravy: nastavte levý okraj na tloušťku 2 pixely, šířku a výšku naší nabídky a také obrázek na pozadí opakující se podél osy X:

#menu ( border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url(images/header_top.gif) repeat-x; )

Stránka v prohlížeči se okamžitě změní a bude vypadat takto.

Nyní můžete do souboru přidat samotnou nabídku index.html:

Po obnovení stránky můžete vidět, že se skutečně objevila.

Pouze zde typ odkazů ponechává hodně na přání. Nastavíme pro ně vlastní pravidla (zarovnání, šířka, barva, tučnost atd.) a na odkazech s ukazatelem myši nastavíme změnu barvy a vrátíme podtržení odstraněné v celé šabloně:

#menu a ( float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding -top: 35px; ) #menu a:hover ( barva: #D72020; text-decoration: underline; )

Formátování nabídky lze nyní namapovat na šablonu PSD.

Věnujte pozornost tomu, jak se změní design předmětu, pokud na něj přesunete ukazatel (za to mohou pravidla). #menu a:hover).

Přizpůsobení loga

Logo již máme a je ve složce, zbývá přidat na stránku a naformátovat s pravidly. Obojí lze udělat pomocí CSS což se nám nepodaří.

#logo ( pozadí: #ffffff url(images/big_pic.jpg) no-repeat; šířka: 738px; výška: 146px; zarovnání textu: vlevo; padding-top: 80px; padding-left: 40px; border-left: 4px solidní #ffffff ;)

Logo je vloženo přesně ve velikosti.

Jediné, co mu chybí, je text. Vložte chybějící do bloku logo soubor index.html dostat:

Text se objevil, ale je také potřeba jej naformátovat.

Na základě toho, že logo je téměř vždy odkazem, nastavíme design pro odpovídající třídy.

#logo a ( text-decoration: none; text-transform: smallcase; font-style: italic; font-size: 36px; color: #FFFFFF; ) #logo h2 a (font-size: 24px; )

Zde není třeba nic vysvětlovat, všechny vlastnosti znáte z lekcí CSS. nicméně vzhled text se změnil a obecně záhlaví nyní vypadá ještě lépe než na rozložení PSD.

Sazba hlavní části stránky

Dále nastavíme největší blok, na který bude umístěn veškerý unikátní obsah. Bude zabírat 500 pixelů a bude umístěn na pravé straně webu. Nastavíme pravidla pro positioning, design nadpisů, odstavců a odkazů (o všech vlastnostech jsme již mluvili v článcích o CSS).

#right ( float: right; width: 500px; padding-right: 10px; ) #right h4 ( margin: 0; padding: 0px; font-size: 12px; color: #D72020; ) #right a (color: #D72020 ; text-decoration: none; ) #right p ( margin: 0; padding: 0; padding-bottom: 10px; ) #right h2 ( margin: 0; padding: 0; padding-top: 10px; color: #D72020; )

Vzhledem k tomu, že jsme zafixovali pouze šířku bloku, nedojde k žádným viditelným změnám, dokud jej nenaplníme obsahem – výška stránky se bude měnit v závislosti na obsahu.

Naplníme nádobu že jo. Obrázky budou umístěny v jednoduché tabulce.

Galerie


Kuchyně


Obsah byl označen, ale zjevně to nestačí bílé pozadí, která se brzy plně neobjeví.

Vytvoření levého panelu

Při rozložení, ale po nakreslení rozložení se ukázalo, že postranní panel bude mít také podpoložky a měly by se objevit, když najedete na hlavní položku, a zmizet, když na ní není žádný ukazatel.

Situace, kdy musíte design dolaďovat „za pochodu“, jsou zcela běžné. Mezery mezi menu a hlavním obsahem nám umožňují vkládat podpoložky, ale zajímavý je trik se zmizením a objevením se podnabídky.

Zadejte následující kód do souboru CSS.

#left ( padding: 10px; width: 237px; padding-right: 1em; ) #left h3 ( width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding- top: 15px; transformace textu: velká písmena; barva: #ffffff; background: url(images/title.gif) no-repeat ) #left ul ( margin: 0; padding: 10px; list-style: none; width: 100px ; font-size: 18px; ) #left li ul ( pozice: absolutní; left: 90px; top: 0; display: none; ) #left ul li ( position: relativní; margin-bottom:20px; ) #left ul li a ( display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; ) #left li:hover ul ( display: block; ) #left li li ( margin-bottom:0px; width: 150px; ) #left p (padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid # D72020 ;)

Věnujte pozornost pravidlům třídy ul a li- tajemství zmizení menu je tam, odhalte ho sami.

Nejprve přidáme informační blok bez nabídky do levého kontejneru HTML dokumentu.

Informace

Nabízíme prázdninové slevy. Dále...


Jídelní lístek

Bílé pozadí se táhlo dále na stránce.

Nyní je čas vložit kód nabídky levého panelu do souboru HTML. Na rozdíl od horní navigace je implementována pomocí seznamů, které lze vidět z pravidel CSS.

Při vývoji webu je nejlepší vše co nejvíce zjednodušit a mít možnost nainstalovat hotovou šablonu několika kliknutími a začít pracovat. To platí zejména pro ty, kteří buď nejsou silní v programování, nebo mají omezený čas. Ale pokud je vaším cílem udělat web jedinečnější, máte určité dovednosti v rozložení, ale přesto chcete ušetřit čas, existuje skvělé řešení - hotové rozložení webu pro rozložení.

Taková rozvržení vytvářejí návrháři ve Photoshopu a ve skutečnosti jde o běžné grafické soubory stránek. Nejsou řezané, ale dodávají se v jednotlivých souborech. Jejich výhodou je, že dispoziční projektant bude moci návrh samostatně přizpůsobit individuálním potřebám klienta. Ano, a šablony PSD jsou docela levné. Na jednom z předních webů se šablonami Themeforest začínají ceny rozvržení na 3 dolarech.

Pro běžné uživatele nebudou layouty stránek nijak zvlášť užitečné, proto doporučuji neztrácet čas a nervy navíc a rovnou zvolit hotovou šablonu stránek. Ano, jsou dražší než šablony PSD, ale tento rozdíl se více než vyplatí ušetřeným časem a absencí nutnosti dalšího rozvržení a zapojení specialisty na přizpůsobení se konkrétnímu systému. Na našem webu máme celou sekci věnovanou tisícům pro jakýkoli účel. Máme také šablony a další CMS. S nimi budete schopni pochopit, že vývoj webových stránek je ve skutečnosti velmi jednoduchý!

Pro profesionální uživatele představujeme dvacet nejlepších rozvržení PSD pro různé účely: podnikání, kreativita, blog a elektronický obchod. Téměř všechna rozvržení PSD mají verzi WordPress, takže začátečníkům také doporučuji přečíst si tuto recenzi.

Rozvržení webových stránek pro rozvržení pro začátečníky i pokročilé uživatele

TheFox - víceúčelové rozložení webových stránek

Toto nejoblíbenější rozvržení obsahuje komponenty pro blog, obchod, vstupní stránku, portfolio a firemní web. Všechny jsou vyrobeny s citem pro vkus a styl. Sada obsahuje 280 PSD souborů. Pro milovníky WordPressu je k dispozici již hotová verze tohoto CMS.

Avada - Univerzální maketa PSD

Toto rozložení obsahuje 59 souborů PSD s jedinečným designem pro stránky různých typů, včetně online obchodů, portfolií a blogů. K dispozici je krabicová a široká verze. K dispozici je také plná WordPress verze šablony Avada, která je nejoblíbenějším WordPress řešením na světě (360 tisíc spokojených zákazníků).

AdelFox - víceúčelová šablona PSD

150 souborů Photoshopu skrývajících desítky možností domovské stránky, internetového obchodu, portfolia, blogu a dalších možností stránky. Všechny podporují práci s krátkými kódy, což znamená, že přidávání obsahu bude velmi jednoduché. Aplikace: kreativní blog, zpravodajský web, osobní portfolio a firemní web.

Black + White - jednoduché rozložení s minimalistickým designem

Čistá, elegantní možnost pro ty, kteří chtějí, aby byly jejich stránky jedinečnější. Ideální pro stránky s krásnými fotografiemi. Nic extra – jen to nejnutnější.

VELKÝ – Univerzální PSD maketa pro perfektní web

Rozložení je velmi stylové a poskytne vám širokou škálu možností pro jakýkoli úkol. Pomocí dovedností ve Photoshopu můžete dosáhnout jedinečnosti svého návrhu. Podpora sekcí v plné šířce, akordeonů a rozevíracích nabídek.

Pro toto rozložení existují verze pro WordPress a Joomla, aby byl vývoj jednodušší.

Enfold - populární rozložení webových stránek pro rozložení ve formátu PSD

Jedná se o univerzální layout pro každou společnost působící v jakémkoli oboru činnosti. 31 dobře uspořádaných souborů Photoshopu vám umožní trochu upravit nastavení, což vede k jedinečnému designu. Všechny ikony a písma v rozložení jsou zdarma. Existuje také téma Enfold WordPress pro ty, kteří se nechtějí zapotit.

Waxom – čisté univerzální rozvržení Photoshopu

238 souborů, čistý design, Google fonty a Bootstrap grid. Aplikace: portfolio, hosting, medicína, cestování, kostel, nemovitosti, auta, online obchod a podnikání. K dispozici jsou také mobilní rozvržení a téma WordPress za pouhých 59 dolarů.

Kruhy - skvělé rozvržení webových stránek s dokonalým designem

Toto uspořádání kombinuje úžasný design s výkonnou funkčností a použitelností. Podporuje práci s Bootstrap grid. Všech 14 souborů PSD se otevře v libovolném Verze Photoshopu. Jsou velmi pohodlně uspořádány do vrstev, aby se s nimi snadno pracovalo.

Travelo - layout kit cestovní kanceláře

Toto rozložení obsahuje stylové návrhy pro cestovní kanceláře a cestovní kanceláře. 21 možností posuvníku s podporou Revolution a Layer Slider. 12 rozvržení domovské stránky. Existuje i verze pro WordPress.

Delimondo - Responzivní rozvržení webových stránek restaurace

Toto rozvržení má 5 stylů designu po 10 stranách. Celkem je k dispozici 50 souborů PSD pro důkladné přizpůsobení designu. Podpora posuvníků, rezervačních formulářů a bezplatných písem Google.

Jedná se o speciální designové rozvržení, které jsou oblíbené zejména u ruských uživatelů. Rozložení podporuje varianty domovská stránka, dále stránky kategorií, srovnání produktů, nákupní košík, platba, přihlášení/registrace, účet, blog a další.

Book Your Travel - rozvržení stránek pro rozvržení cestovní kanceláře

Tuto šablonu PSD již naši čtenáři znají díky šabloně WordPress pro rezervační služby, cestovní kanceláře, hotely a cestovatelské blogy. Navržené soubory mají domovskou stránku s vyhledávacím panelem, stránku s výsledky vyhledávání a stránky hotelů se všemi informacemi. Celkem je k dispozici 16 souborů PSD.

Cestovní kancelář - Multitasking Travel PSD Rozvržení webu

Čistý design s rezervačními funkcemi pro cestovní a realitní kanceláře. Dodává se ve třech barevných stylech: modrá, zelená a oranžová. Celkem je 59 souborů PSD!

Recenze hotových WordPress webů pro sektor cestovního ruchu viz a.

Super Duper - stylové uspořádání pro každou firmu

V tomto rozložení na 150 soubory Photoshopu najdete 21 rozvržení domovské stránky, 50+ možností internetového obchodu, 10 blogových stránek a dokonce 2 návrhy webových stránek s jednou stránkou. K dispozici jsou mobilní rozložení.

Carry Hill - PSD rozložení webových stránek školy

Jedinečný design tohoto rozložení je skvělý pro školní i kreativní weby. 8 jednoduchých PSD souborů s designem hlavní stránky, blogu, galerie, kontaktních informací a dalších stránek. Existuje podpora pro sváteční loga.

Vzdělávací WordPress témata zvážili jsme v několika recenzích: a.