ŠKODA Portal Platform
|
|
- Daniela Jandová
- před 8 lety
- Počet zobrazení:
Transkript
1 ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil
2 Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro potřeby konkrétních projektů, které na této platformě budou vznikat. Okrajově je zde vysvětlena struktura layoutu a další použité technologie. Podporované prohlížeče a standardy Internet Explorer 8+, Chrome, Firefox, Safari, Opera v aktuálních verzích. Je použito HTML5 už s novými tagy a pro starší verze prohlížečů je funkcionalita dodána pomocí frameworku modernizr.js. Základní koncepce Vychází se z potřeby vznikajících webových projektů, které mají mít jednotný vzhled na základě CI. Základní vzhled je vždy stejný a práce na každém projektu je tedy zbytečně se opakující činnost, kterou je vhodné udělat jednou. Vznikla tedy sada stylů, proměnných a mixin popisující základní layout a prvky v portálových aplikacích. Styly jsou psány v jazyce LESS [ kvůli snazší správě a podpoře funkcionalit, jako proměnné nebo mixiny. Platforma SharePoint skoda-portal.less Platforma MVC skoda-web.less Základní styly a layout skoda-font.less, skoda-common.less Custom styly custom.less Základní proměnné a mixiny elements.less, skoda-colors.less, skoda-base.less Obrázek 1: Architektura stylů Základní proměnné a mixiny Jedná se o definice proměnných a mixin, které jsou využívány napříč všemi styly. elements.less jedná se o mixiny zajišťující cross-browser kompatibilitu u vendor-specific definicí; více info na stránkách projektu Includuje: nic
3 skoda-colors.less definice barev na základě jejich názvů a hodnot z CI manuálu; dokument STY_ _SKO022_Styleguide_02_Web_pages.pdf dostupný na CD portálu (Online & Mobile/ŠKODA Online and Mobile Manuals). Includuje: nic skoda-base.less definice základních proměnných a mixin v souvislosti s layoutem ŠKODA Auto podle CI manuálu včetně evoluce fontů a některých barev provedené grafiky z EOM/5 Includuje: elements.less, skoda-colors.less LESSy z této kategorie po přeložení negenerují žádný CSS výstup a jsou tedy vhodné, jako include pro ostatní styly. Includovat by se měl skoda-base.less obsahující vše zásadní. Základní styly a layout Jsou to styly definující layout stránky, jako je brand hlavička, patička a defaultní styly pro vlastní obsah. Jsou zde také obsaženy některé obecně použitelné třídy, např. pro clear: both;, vytvoření mezery za nebo před blokem, schování prvku apod. skoda-font.less definice fontu Skoda Pro Includuje: nic skoda-common.less definice základního layoutu stránky a standardních stylů pro tělo obsahu. Includuje: skoda-base.less, skoda-font.less Platformě závislé styly V této kategorii se nachází výsledné koncové styly, které jsou zahrnuty do stránky na konkrétní cílové platformě. V současné době jsou podporovány platformy SharePoint a MVC. Není ale problém stejným způsobem vytvořit styly pro další platformy. Styly této kategorie rozšiřují definici skoda-common.less a doplňují ji o specifika konkrétní platformy. Styl vytvořený pro danou platformu by měl stačit pro její plnohodnotné obrandování v základní instalaci. skoda-portal.less specifické styly pro platformu SharePoint 2013 Includuje: skoda-common.less Custom styly skoda-web.less specifické styly pro platformu MVC Includuje: skoda-common.less Styly v této kategorii vzniknou vždy pro potřeby konkrétního projektu, který je postaven na stylech z portálové platformy. V tomto stylu jsou řešeny specifika projektu a je možné i upravit definice z Platformě závislých stylů. Custom styl includuje skoda-base.less, tedy LESS, který ještě stále negeneruje žádný výstup do CSS, ale nabízí všechny užitečné proměnné a mixiny, na kterých lze úspěšně stavět.
4 Základní struktura layoutu Layout je platformě závislá část. Portálová Platforma nabízí prozatím dva layouty pro platformy SharePoint 2013 a MVC. Oba layouty se liší v určitých detailech, které jsou na obou platformách implementovány odlišně. Jedná se hlavně o generování menu nebo o ovládací prvky, které musí být v layoutu podporovány. Struktura se tedy trochu liší, ale základní princip zůstává stejný. Všechny CSS třídy definované portálovou Platformou mají prefix sa-. Abychom předešli konfliktům s jinými frameworky nebo styly definovanými třetími stranami, všechny třídy mají tedy prefix sa-. Všechny CSS třídy týkající se prvků layoutu mají prefix sa-layout-. Aby byl očima jasně zřetelný význam stylu, je pro layout stránky použit prefix sa-layout-. Všechny základní prvky ovlivněné styly Portálové Platformy jsou uvnitř prvku označkovaného třídou sa-ci. Vlastnosti všech základních tagů, jako <table>, <b>, <h1>, <h2> apod. jsou platné pouze uvnitř elementu označeného jako sa-ci. To je poměrně zásadní vlastnost pro koexistenci stylů s dalšími částmi frameworku. Styly by neměly být aplikovány na části, kde být aplikovány nemají. Prvek (nejčastěji <div class="sa-ci">) je tedy kořenovým prvkem všech prvků, které mají být těmito styly ovlivněny. Snažte se neomezovat šířku obsahu příliš brzy. Nechte až na vlastním obsahu definici šířky obsahu a jeho vycentrování na střed. Považuji za chybu v layoutu definovat šířku vlastního obsahu a jeho centrování. Jednou za čas vyvstane potřeba pozicovat obsah roztažený na celou šířku stránky a to se uvnitř již omezeného bloku tvoří velice obtížně a výsledek je velmi problematický z pohledu chování a použití na jiných zařízeních. Toto pravidlo se v některých případech velmi obtížně uplatňuje i z důvodu použitého CMS a je zapotřebí hledat kompromis. Základní proměnné ColorMainGreen, ColorMainWhite, ColorMainBlack, ColorMainGray jsou to základní barvy definované v CI manuálu. ColorFurtherGray1, ColorFurtherGray2, ColorFurtherGray3, ColorFurtherGray4 jsou to doplňkové odstíny šedi definované v CI manuálu.
5 ColorFurtherGreen, ColorFurtherGreen2 jsou to doplňkové barvy k hlavní zelené barvě na základě CI manuálu. ColorButtonHero, ColorButtonHeroActive jsou to barvy hlavních HERO tlačítek. ColorButtonLow, ColorButtinLowActive jsou to barvy běžných tlačítek ColorTextDefault standardní barva textu ColorTextErrorMessage barva textu chybové hlášky FontFamilyCommon obyčejný nevíce kompatibilní font (Verdana) FontFamilySkoda moderní font (Skoda Pro) FontSizeDefault základní velikost standardního textu FontLineHeightDefault řádkování základního textu; bylo zvoleno relativní hodnotou 1.33em, což je 133% velikosti textu. Změnou velikosti textu nemusí být měněno řádkování. WidthContent šířka obsahu na stránce; je možno volit absolutní hodnotu v px tak hodnotu v %; Kvůli povaze účelu těchto stylů je hodnota nastavena na 90%, protože se předpokládá, že chceme využít co největší dostupnou plochu u uživatele. Základní mixiny.styletextdefault() standardní styl textu.styletitle() standardní styl titulku (pod zeleným menu).styleheadline1() standardní styl hlavního nadpisu (nejčastěji H1).StyleHeadline2() standardní styl podnadpisu (nejčastěji H2).StyleLink() standardní styl linku.styledottedlink() jedná se o styl linku, který byl požadován. Je to link s tečkovaným podtržením. Pravidlo se ale nechová dobře při použití lupy..commontable(@tablewidth: 100%) mixina standardní tabulky, která definuje standardní prvky tabulky podle CI manuálu. Je možné navolit šířku tabulky..buttonskoda() základní styl tlačítka.buttongreyskoda() základní styl šedivého tlačítka.buttongreenskoda() základní styl zeleného hero tlačítka.saclear() mixina pro řešení clear:both;, je zde ale použita alternativní konstrukce, která by měla být lepší..sainvisible() zneviditelnění prvku.savisible() zviditelnění prvku
6 .SaHidden() zmizení prvku.sa1spaceontop() padding nad prvkem o velikosti 1em.Sa2SpaceOnTop() padding nad prvkem o velikosti 2em.Sa1SpaceAtBottom() padding pod prvkem o velikosti 1em.Sa2SpaceAtBottom() padding pod prvkem o velikosti 2em.SaNoWrap() zamezí zalomení textu na další řádku.sapivot() nastaví position:relative;, takže lze vůči souřadnému systému určenému tímto prvkem pozicovat.saparagraph() nastaví odsazení kolem odstavce Další mixiny jsou definovány pomocí frameworku LESS elements - Základní CSS třídy sa-text-default kopíruje.styletextdefault() sa-clear kopíruje.saclear() sa-invisible kopíruje.sainvisible() s!important sa-visible kopíruje.savisible() s!important sa-hidden kopíruje.sahidden() s!important sa-1-space-on-top kopíruje.sa1spaceontop() sa-2-space-on-top kopíruje.sa2spaceontop() sa-1-space-at-bottom kopíruje.sa1spaceatbottom() sa-2-space-at-bottom kopíruje.sa2spaceatbottom() sa-no-wrap kopíruje.sanowrap() s!important sa-pivot kopíruje.sapivot() sa-inline definuje element jako inline sa-block definuje element jako block sa-vertical-middle definuje prvek tak, že vnitřní div nebo span bude vertikálně vycentrován vzhledem k tomuto prvku sa-text-align-left zarovnává text nalevo sa-text-align-right zarovnává text napravo
7 sa-text-align-center zarovnává text doprostřed sa-float-left floatuje blok doleva sa-float-right floatuje blok doprava sa-ci určuje hlavní kořenový element, ve kterém budou definovány styly prvků a layout table.sa-table kopíruje.commontable(); základní vzhled tabulky Současný status stylů Portálové Platformy Současné CSS styly popsané v tomto dokumentu a dodané přes Portálovou Platformu jsou ve stavu, jak byly požadavky na layout a základní styly v době jejich vzniku. Práce na těchto stylech a Portálové Platformě jako celku nadále pokračují a základní styly budou i nadále doplňovány a dokumentace rozšiřována. V současném stavu úplně chybí definice jednotného vzhledu formulářových prvků, protože prozatím každý projekt navrhuje jiný vzhled, velikosti a umístění prvků ve formulářích. Nakonec každý projekt na ně má jiné požadavky a tak prozatím neexistuje žádný standardizovaný (a doporučovaný) layout těchto prvků.
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
VíceBloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.
Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam
Více22. Tvorba webových stránek
22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči
VíceTNPW1 Cvičení
13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS
VíceHTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
VíceO CSS podrobněji. Box model Document flow Layout
O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html
VíceTvorba webových stránek
Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech
VíceM4 PDF rozšíření. Modul pro PrestaShop. http://www.presta-addons.com
M4 PDF rozšíření Modul pro PrestaShop http://www.presta-addons.com Obsah Úvod... 2 Vlastnosti... 2 Jak modul funguje... 2 Zdroje dat... 3 Šablony... 4 A. Označení šablon... 4 B. Funkce Smarty... 5 C. Definice
VíceSKUPINA ČEZ GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/2014
GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/0 OBSAH ZÁKLADNÍ PRAVIDLA JEDNOTLIVÉ ŠABLONY UNIVERZÁLNÍ MODULY 0 Základní pravidla 0 Práce s grafickým manuálem 05 Barevné schéma 06 Typografie
VíceTNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz
6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj
VíceInovace výuky prostřednictvím šablon pro SŠ
Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748
VícePřehled základních html tagů
Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...
VíceMgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border
VíceOBSAH. Předmluva 13 Poděkování 14. 1. Přehled dnešního vývoje webů 15. 2. Design pro minulost, přítomnost i budoucnost 33
OBSAH Předmluva 13 Poděkování 14 1. Přehled dnešního vývoje webů 15 Definice webdesignu 16 Sedm pravidel webdesignu 19 Tři filozofie webdesignu 20 Filozofie použitelnosti 21 Filozofie multimédií 25 Filozofie
VíceZáklady CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
VíceDESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:
1 DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA: Obsah CSS... 1 VKLÁDÁNÍ CSS DO HTML DOKUMENTU + MEDIA... 1 ADRESOVÁNÍ ČÁSTÍ HTML POMOCÍ SELEKTORŮ A JEJICH PRIORITA... 2 RESETOVÁNÍ CSS... 3 BARVY... 3 STYLOVÁNÍ
VíceSoukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES
VíceZáklady HTML. Autor: Palito
Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete
VíceDATA ARTICLE. AiP Beroun s.r.o.
DATA ARTICLE AiP Beroun s.r.o. OBSAH 1 Úvod... 1 2 Vlastnosti Data Article... 1 2.1 Požadavky koncových uživatelů... 1 2.2 Požadavky na zajištění bezpečnosti a důvěryhodnosti obsahu... 1 3 Implementace
VíceNázev: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy
Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Uvádí
VíceMaturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,
Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení
VíceInternetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování
VíceTVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML
VíceNázev: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje
VíceVývoj Internetových Aplikací
2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info
VíceWebová grafika, struktura webu a navigace, použitelnost a přístupnost
Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace
VíceHTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
VíceMicrosoft Office Word 2003
Microsoft Office Word 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu PowerPoint...
VíceGrafický manuál. společnosti Teplárna České Budějovice, a. s.
Grafický manuál společnosti Teplárna České Budějovice, a. s. Platnost od 2013 Úvod Grafický manuál je souborný materiál definující základní grafické konstanty firemního designu a jejich správné použití.
VíceCSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako absolutně pozicované bloky)
VíceZáklady informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
VíceKaskádové styly základy grafiky
1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod
VíceKIV/PIA 2012 Ing. Jan Tichava
KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of
VíceNSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
VíceFormátování obsahu adminweb
Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky
VíceINTERSTENO 2017 Berlin World championship professional Word Processing
OPERAČNÍ SYSTÉM SOFTWARE POUŽITÝ PRO WORD PROCESSING ID SOUTĚŽÍCÍHO A-1 A Instrukce pro soutěžící Otevřete si připravený soubor TOURISM, uložte/převeďte jej ihned na TOURISMXXX.DOC NEBO DOCX, přičemž XXX
VíceDokumentace k projektu
Mendelova univerzita v Brně Provozně ekonomická fakulta Dokumentace k projektu Kvetoucí kaktusy Chalupová Lenka LS 2012 Webový Design Obsah 1. Úvod a cíl práce... 3 2. Informační architektura... 3 2.1.
VíceSEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE
Středoškolská technika 2011 Setkání a prezentace prací středoškolských studentů na ČVUT SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE Adama Kořenek Úvod Střední průmyslová škola elektrotechnická V Úžlabině
VíceManuál k tvorbě absolventské práce
Manuál k tvorbě absolventské práce VLOŽENÍ ČÍSLA STRÁNKY... 2 OBRÁZKOVÝ NÁVOD PRO VKLÁDÁNÍ ČÍSEL STRÁNEK... 2 ŘÁDKOVÁNÍ 1,5... 3 OBRÁZKOVÝ NÁVOD PRO ŘÁDKOVÁNÍ... 3 ZAROVNÁNÍ TEXTU DO BLOKU... 4 OBRÁZKOVÝ
VíceKapitola 1 První kroky v tvorbě miniaplikací 11
Obsah Úvodem 9 Komu je kniha určena 9 Kapitola 1 První kroky v tvorbě miniaplikací 11 Co je to Postranní panel systému Windows a jak funguje 12 Co je potřeba vědět před programováním miniaplikací 16 Vaše
VíceTvorba webových stránek
Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou
VícePseudotřídy. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.
Pseudotřídy Využití pseudotříd pro stylování odkazů ve webových dokumentech Pseudotřídy VY_32_INOVACE_01_03_01 Vytvořeno březen 2013 Žák se naučí smysluplně využívat pseudotříd pro stylování odkazů ve
VíceTvorba webových stránek
Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený
VíceInternet 1 vývoj, html, css
Internet 1 vývoj, html, css Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 19. března 2009 Dnešní přednáška 1 Historie
Více(X)HTML, CSS a jquery
Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje
VíceMicrosoft. Word. Styly použití a definování. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie
Microsoft Word Styly použití a definování Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Styly Styl = souhrn všech nastavených vlastností textu (velikost, řez, zarovnání, prokládání
VíceZáklady informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
VíceRozměry, okraje a rámečky
Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned
VíceInovace výuky prostřednictvím šablon pro SŠ
Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748
VíceKMI / TMA Tvorba mobilních aplikací
KMI / TMA Tvorba mobilních aplikací 5. seminář 17.10.2018 ZS 2018/2019 STŘEDA 13:15-15:45 OBSAH SEMINáře BARVY, GRAFIKA, STYLY/TÉMATA, ŘETĚZCE, TOOLBAR MENU BARVY DRY = Dont Repeat Yourself v souboru /res/values/colors.xml
VíceManuál vizuálního stylu CENTROPROJEKT a.s. (v0.1) Zpracovalo Modest Studio modeststudio.cz / +420 725 792 827
Manuál vizuálního stylu CENTROPROJEKT a.s. (v0.1) Zpracovalo Modest Studio modeststudio.cz / +420 725 792 827 Redesign logotypu a symbolu spočívá především v nezbytně nutném stanovení čistější varianty
Více================================================================================ =====
Název: VY_32_INOVACE_PG4101 Základní struktura HTML stránky Datum vytvoření: 01 / 2012 Anotace: DUM seznamuje se základní strukturou a členěním HTML stránky, s jednotlivými složkami - HTML, CSS, externí
Více1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)
1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template
VíceKartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita
Kartografická webová aplikace Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Datum vzniku dokumentu: 3. 11. 2011 Datum poslední aktualizace: 10. 12. 2011 Cíl
VíceÚvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.
Úvod do CSS Tematický okruh (ŠVP) CSS1 Vysvětlení úlohy CSS při programování www stránek Úvod do CSS VY_32_INOVACE_01_02_01 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací
VícePrvně si řekněme, co vlastně odstavec v programu Word je a pár slov o jeho editaci:
FORMÁTOVÁNÍ ODSTAVCE Pro formátování odstavce, použijeme opět záložku DOMŮ a zaměříme se na skupinu ikon pro formátování celých odstavců. To se nevěnuje formátování samotného písma, ale celého odstavce.
VíceTvorba webových stránek
Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok
VícePostup se dle prohlížeče a operačního systému liší, vyberte prosím jaký prohlížeč a na jakém operačním systému používáte.
Postup se dle prohlížeče a operačního systému liší, vyberte prosím jaký prohlížeč a na jakém operačním systému používáte. Windows: Internet Explorer Str. 2 Mozilla Firefox Str. 3 Google Chrome Str. 4 Opera
VícePřipravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace Návrh webové stránky responsivní design strana 2 WEB Dříve: místo pro prezentaci a umístění dat prohlížeče pouze na PC Nyní: platforma
VíceKAPITOLA 3 - ZPRACOVÁNÍ TEXTU
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého
VíceMANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4
MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY...
Vícetvoříme web HTML/CSS
tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce
VíceDESETIMINUTOVKY HTML - DOVEDNOSTI TÉMATA:
DESETIMINUTOVKY HTML - DOVEDNOSTI TÉMATA: 1 Obsah HTML... 1 ZÁKLADNÍ STRUKTURA WEB STRÁNKY... 1 OBSAH HLAVIČKY WEB STRÁNKY... 1 ZÁKLADNÍ HTML LAYOUT WEB STRÁNKY... 1 ZOBRAZOVANÁ HLAVIČKA WEB STRÁNKY...
VíceInternet. Internetový prohlížeč. Mgr. Jan Veverka Střední odborná škola sociální obor ošetřovatel
Internet Internetový prohlížeč Mgr. Jan Veverka Střední odborná škola sociální obor ošetřovatel Internet www stránka Internet = rozsáhlá celosvětová síť počítačů slouží k přenášení informací a poskytování
VíceStřední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti
VíceUživatelská příručka pro práci s Portálem VZP. Test kompatibility nastavení prohlížeče
Uživatelská příručka pro práci s Portálem VZP Test kompatibility nastavení prohlížeče Obsah 1. Podporované operační systémy a prohlížeče... 3 1.1 Seznam podporovaných operačních systémů... 3 1.2 Seznam
VíceNávrh stránek 4IZ228 tvorba webových stránek a aplikací
4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2013/12/12 20:40:58 $ Obsah Úvod... 3 Recept na dobré webové stránky... 4 Použitelnost... 5 Jak se pozná použitelný web...
VíceTNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz
6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,
VíceMgr. Vlastislav Kučera přednáška č. 1
Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a
VíceZákladní nastavení textového editoru Word 8.0 (Microsoft Office 97)
Základní nastavení textového editoru Word 8.0 (Microsoft Office 97) V následujícím textu jsou zapsány nabídky, příslušné podnabídky a záložky, které je nutné volit a hodnoty nastavení, které je třeba nastavit.
VíceNázev: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení
VíceFFUK Uživatelský manuál pro administraci webu Obsah
FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa
VíceIE1 jazyk HTML a kaskádové styly
IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.
VíceManuál jednotného vizuálního stylu značky OVB
Manuál jednotného vizuálního stylu značky OVB Aktualizováno: srpen 2016 1 Obsah Vizuální styl Úvodní slovo... 3 OVB Logo... 4 Naše barvy... 8 Naše písmo... 9 2 O významu jednotného vizuálního stylu Jednotný
VíceKAPITOLA 1 Přehled aktuálního vývoje webů 11
Obsah Úvodem 9 KAPITOLA 1 Přehled aktuálního vývoje webů 11 Definice webového designu 12 Poznejte sedm pravidel webového designu 14 Pochopte tři přístupy k webovému designu 16 Shrnutí 24 KAPITOLA 2 Design
VíceTento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro administrátory. Verze 1.
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM Manuál pro administrátory Verze 1.0 2012 AutoCont CZ a.s. Veškerá práva vyhrazena. Tento
VíceKreslení 2D technické dokumentace. AutoCAD styl textu. Ing. Richard Strnka, 2012
Kreslení 2D technické dokumentace AutoCAD styl textu Ing. Richard Strnka, 2012 1. Psaní textu Výklad: Většina vlastností textu je řízena textovým stylem, který nastavuje výchozí písmo a jiné parametry,
VíceGOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek
GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní
VíceWEBOVÉ STRÁNKY
WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých
VíceIE1 jazyk HTML a kaskádové styly
IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.
VíceKurz Word 2000 Odrážky a číslování Kurz Word 2000 Odrážky a číslování Oddíly Záhlaví a zápatí
Kurz Word 2000 Odrážky a číslování Oddíly Záhlaví a zápatí - 1 - L04 V 1 odrážky a číslování Odrážky, číslování i víceúrovňovost můžeme zadat buď před zápisem textu nebo vytvořit dodatečně označením bloku
Víceškolení frontend CSS Preprocesory
školení frontend CSS Preprocesory CSS preprocesory Preprocesory Způsob zápisu, který zjednodušuje a zrychluje tvorbu CSS Přidává do CSS další funkce a nástroje, snaží se řešit slabiny CSS Snaží se řešit
VíceMODERNÍ WEB SNADNO A RYCHLE
SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ
VíceGrafický manuál značky. Kraj Vysočina ZDRAVÝ KRAJ
Grafický manuál značky Kraj Vysočina ZDRAVÝ KRAJ Obsah Úvod 1 Značka 2 Základní barevná varianta 2.1 Inverzní barevná varianta 2.2 Černobílá pozitivní varianta 2.3 Černobílá inverzní varianta 2.4 Grafická
VíceJihočeská univerzita v Českých Budějovicích. Název bakalářské práce v ČJ Název bakalářské práce v AJ
Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Název bakalářské práce v ČJ Název bakalářské práce v AJ Bakalářská práce Vypracoval: Jméno Příjmení Vedoucí práce: Vedoucí
VíceUživatelská příručka systému pro administrátory obcí a manuál pro správce portálu
Softwarová podpora tvorby rozvojových dokumentů obcí Uživatelská příručka systému pro administrátory obcí a manuál pro správce portálu Verze 1.3 Zpracováno v rámci projektu CZ.1.04/4.1.00/62.00008 ELEKTRONICKÁ
VíceT-Cloud Zakázka. Uživatelská příručka
Uživatelská příručka Popis služby Služba T-Cloud ZAKÁZKA (dále jen ZAKÁZKA) poskytuje svým uživatelům informace o 99% veřejných zakázek vypsaných v České republice. Služba nabízí uživatelům následující
VíceStřední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov
Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil
VícePříprava dokumentů textovým procesorem II.
Příprava dokumentů textovým procesorem II. Zpracování textu v textovém procesoru Microsoft Word 2007 Petr Včelák vcelak@kiv.zcu.cz Katedra informatiky a výpočetní techniky, Fakulta aplikovaných věd, Západočeská
VíceMgr. Vlastislav Kučera přednáška č. 1
Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,
VíceInformatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a
VíceTvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675
Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS
VíceNázev: Design webu Anotace:
Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace Na Brněnce 1, Ivančice, okres Brno-venkov
VíceAllegro framework. Podstatné vlastnosti. Allegro Business Solution Framework
Allegro framework Všechny Allegro produkty jsou postaveny na společné vývojové platformě Allegro Framework. Jedná se o programové a uživatelské rozhraní, které jsme vytvořili s cílem získat společnou webovou
VícePočítačová typografie
Počítačová typografie Typografie je nauka o tom, jak má tiskovina vypadat. Proč se o typografii učíme? Každý z nás běžně připravuje nějakou tiskovinu a požadavky na její kvalitu a zpracování jsou všude
Více36 Elektronické knihy
36 Elektronické knihy Uživatelský modul Elektronické knihy slouží k přípravě a publikování informací ve formátu HTML. Tento formát je vhodný pro prezentaci informací na internetu a je široce podporován
VíceAnalýza webových stránek andreaspctipps.de
Analýza webových stránek andreaspctipps.de Generovány na Září 17 2016 08:06 AM Skóre 40/100 SEO obsah Titulek andreaspctipps.de Délka : 17 Perfektní, váš titul obsahuje mezi 10 a 70 znaky. Popis Windows7,Windows,Excel,Pc
VíceTECHNICKÉ POŽADAVKY NA NÁVRH, IMPLEMENTACI, PROVOZ, ÚDRŽBU A ROZVOJ INFORMAČNÍHO SYSTÉMU
zadávací dokumentace TECHNICKÉ POŽADAVKY NA NÁVRH, IMPLEMENTACI, PROVOZ, ÚDRŽBU A ROZVOJ INFORMAČNÍHO SYSTÉMU Stránka 1 z 6 Obsah 1. Specifikace požadavků webové stránky... 4 2. Specifikace technických
VícePráce se styly 1. Styl
Práce se styly 1. Styl Styl se používá, pokud chceme, aby dokument měl jednotný vzhled odstavců. Můžeme si nadefinovat styly pro různé úrovně nadpisů, jednotlivé popisy, charakteristiky a další odstavce.
VíceUkazka knihy z internetoveho knihkupectvi
Ukazka knihy z internetoveho knihkupectvi www.kosmas.cz HTML začínáme programovat 3., aktualizované vydání Slavoj Písek Vydala Grada Publishing, a.s. U Průhonu 22, Praha 7 jako svou 3933. publikaci Odpovědný
Více