Dokumentace k ročníkové práci
|
|
- Dominik Fišer
- před 7 lety
- Počet zobrazení:
Transkript
1 Dokumentace k ročníkové práci 1) Cílem mé práce bylo udělat webové stránky splňující všechny požadavky zadání ročníkové práce. Zároveň jsem se však snažil lidem sdělit, o čem je hra Counter-Strike: Source, a pomoci jim ji zprovoznit pomocí download linků a rad. Také jsem se snažil, aby stránky nepůsobily přeplácaně, aby byly vhodně zvoleny barvy a aby člověka zaujaly. Zvolil jsem layout s fixní šířkou obsahu, vedle kterého nalevo plave menu a napravo anketa, či okno pro vzkazy. Samozřejmě nechybí hlavička ani patička. Celý web jsem pak zabalil do blokového kontejneru, kterému jsem dal také fixní šířku a automatické okraje nalevo i napravo. Tento layout jsem zvolil, protože se mi líbí jeho jednoduchost a efektivnost. Myslím si, že svého cíle jsem dosáhl tím, že jsem vhodně zvolil barvy, dále jsem se snažil text psát co nejvíce z hlavy a aby mu šlo co nejvíce porozumět. Řekl bych, že menu dokáže zaujmout, taktéž i úvodní stránka. Doufám, že i požadavky jsem splnil podle vašich představ.
2 2) Největší problém jsem měl s menu. Původně jsem menu okopíroval z této stránky. Měl jsem v plánu pozměnit zde barvy, roztáhnout ho a vložit zde span, ve kterém by se při najetí myší na položky měnily obrázky. Brzy se mi však celé menu nějakým nedopatřením rozsypalo, tak jsem si řekl že si udělám menu celé svoje. To se mi povedlo pěkně, avšak byl zde problém při zmenšování okna. Tento problém zde byl proto, že span, ve kterém se promítaly při hoveru obrázky jsem napozicoval pomocí left a top tak, aby byl přímo pod menu. Když jsem však zmenšil okno prohlížeče span mi překrýval text, jelikož si držel svou pozici. Až do teď jsem nepřišel na to, jak to udělat, ale nechtělo se mi celý span zrušit. Takže jsem mu dal pozici left: 0; right: 0; margin-top: 125px;, tak aby se držel na spodu hlavičky a marginleft:27%, takže by neměl překrývat obrázek hlavičky. Ještě je škoda, že IE nepodporuje z-index, takže se obrázek při hoveru nahoru nemění. Tento problém pořád pokládám za nevyřešený, protože jsem nedokázal udělat to co jsem od začátku chtěl. Poté už jsem měl jen menší problém s layoutem, jelikož mi dlouho trvalo přijít na to, že celý web musím dát do divu, kterému dám šířku a automatické okraje. Předtím jsem dával automatické okraje obsahu, a nevěděl si s tím rady, jak ty plovoucí divy napozicovat napevno k obsahu. Avšak naštěstí se mi v hlavě rozsvítilo a tento stupidní problém jsem po necelé hodině konečně vyřešil. 3) Změny ve vykreslování při přepnutí do režimu zpětné kompatibility se projevily pouze v prohlížeči Internet Explorer, v Mozille Firefox žádné nebyly. První změnou bylo to, že se celý web posunul ze středu do leva. Zjistil jsem však, že existuje hack, kterým tuto nedokonalost IE vyřeším. Takže jsem dal body: text-align: center; a do divu, kde mám celé stránky jsem dal text-align: left;. Tento hack jsem musel použít proto, že starší verze IE nepodporují automatické okraje a vlastnost text-align aplikují i na blokové elementy. Druhá změna byla v tom, že se mi zvětšilo kompletně celé menu (nejen obrázky, ale i text a mezery). Jako třetí věc jsem zaznamenal posunutí patičky o pár pixelů doprava. A poslední změnu bylo zvětšení zdvojení rámečku spanu.
3 Normální režim Režim zpětné kompatibility 4) Zdrojový kód menu+popis řešení Homesite <div id="menu"> <ul id="polozky"> <li><a href="index.html">index<span id="index"></span></a></li> <li class="aktivni"><a href="css.html">css<span id="css" class="aktiv"></span></a></li> <li><a href="zaparit.cz.html">zaparit.cz<span id="zaparit"></span></a></li> <li><a href="download.html">download+rady<span id="download"></span></a></li> <li><a href="foto.html">fotogalerie<span id="foto"></span></a></li> <li><a href="ome.html">o mně<span id="ome"></span></a></li> <li><a href="projekt.html">o projektu<span id="projekt"></span></a></li>
4 </ul> </div> #menu { font-size: large; float: left; width: 160px; background-color: #838787; height: 210px; border: 3px solid black; #polozky { padding: 0; margin: 0; #polozky li { list-style: none; background-image: url(obrazky/but3a.jpg); background-repeat: no-repeat; margin-left: 4px; margin-top: 5px; #polozky a { display: block; text-decoration: none; color: Black; text-align: center; width: 99%; #polozky a span { position: absolute; height: 152px; width: 152px; background-image: none; top: 0; left: 0; margin-left: 27%; margin-top: 73px; border: 1px solid black; #polozky a:hover { background-image: url(obrazky/but3c.jpg); background-repeat: no-repeat; #polozky li.aktivni { background-image: url(obrazky/but3b.jpg); background-repeat: no-repeat; #polozky li a span#zaparit.aktiv { background-image: url(obrazky/zaparit.cz_menu.jpg); #polozky li a span#foto.aktiv { background-image: url(obrazky/foto_menu.jpg); #polozky li a span#index.aktiv { background-image: url(obrazky/index_menu.jpg); #polozky li a span#css.aktiv { background-image: url(obrazky/css_menu.jpg); #polozky li a span#download.aktiv { background-image: url(obrazky/download_menu.jpg); #polozky li a span#ome.aktiv { background-image: url(obrazky/ome_menu.jpg); CSS
5 #polozky li a span#projekt.aktiv { background-image: url(obrazky/oprojektu_menu.jpg); #polozky a:hover span#projekt { background-image: url(obrazky/oprojektu_menu.jpg); #polozky a:hover span#css { background-image: url(obrazky/css_menu.jpg); #polozky a:hover span#index { background-image: url(obrazky/index_menu.jpg); #polozky a:hover span#zaparit { background-image: url(obrazky/zaparit.cz_menu.jpg); #polozky a:hover span#ome { background-image: url(obrazky/ome_menu.jpg); #polozky a:hover span#download { background-image: url(obrazky/download_menu.jpg); #polozky a:hover span#foto { background-image: url(obrazky/foto_menu.jpg); #menu a:hover { position: static; Popis řešení Nastavil jsem velikost textu na large. Poté jsem si upravil obrázky tak, aby pokryly jednu celou položku. Všem položkám jsem dal do pozadí šedý obrázek. Poté jsem jim dal na hover stejný obrázek, akorát s zelenou barvou. V Homesitu jsem si dal do třídy vždy tu položku, jejíž jsem zrovna editoval stránku. Např. editoval-li jsem stránku ome, dal jsem položce ome třídu s názvem aktivni. Do Homesitu jsem pro celou tuto třídu dal opět stejný obrázek, akorát s oranžovou barvou. Do každého tagu <a> v seznamu jsem vložil prázdné spany a každý jsem jinak pojmenoval. Poté jsem nastavil hover při najetí na položku tak, aby se ve spanu objevil obrázek s z-indexem 1. Nakonec jsem ještě spanu přidělil třídu aktiv- stejným stylem jako u položek třídu aktivní. Té jsem nastavil pozadí tak, aby zůstal ten obrázek, v jehož sekci se zrovna nacházíte. Z-index jsem nastavil na nulu, aby při opětovném hoveru aktivní obrázek nepřekrýval ten na který je najeto. Poté už jsem jen vyřešil viz. Č.2- Problémy. Dále si cením objektů, které jsem však neudělal úplně sám (počasí, svátek, den, počítadlo, ankety, návštěvní kniha). Tyty objekty jsou většinou okopírované ze stránek, kde byly už hotové, nebo jsem je dělal přez ulehčující programy.
6 Zdroje Zdroje textu Převážně z vlastní zkušenosti Zdroje obrázků unter+strike+source+screen&aq=f&aqi=&aql=&oq=&gs_rfai Vlastní obrázky přímo ze hry (screeny). Zdroje objektů Validace index css zaparit.cz download foto ome projekt countstrike.xf.xz HTML CSS Stránky naleznete na zde. Vlastní zhodnocení Podle mého názoru jsou stránky docela povedené, zajímavé i obsáhlé. Jediné, co bych si vytkl, je span, který nemá pevnou pozici. Jinak si však myslím, že jsem splnil všechny požadavky, které nám pro naši ročníkovou práci byly dány.
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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íceCSS 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í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í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í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í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í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í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íceBlokový model v CSS:
Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing
VíceCSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
VíceKAPITOLA 5. Základní stylování seznamů
KAPITOLA 5 Stylování seznamů a vytváření navigačních lišt Je naší přirozeností dávat světu kolem nás nějaký řád. Vědci vytváří seznamy zvířat, rostlin a chemických prvků. V časopisech jsou seznamy deseti
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í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íceTvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu
VíceCSS Kaskádové styly. formátování webových stránek
CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací
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í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í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í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í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íceRozvržení stránky. Co se v modulu dozvíte? Pozicování
Rozvržení stránky Co se v modulu dozvíte? jakým způsobem je možné uspořádat prvky na stránce jak lze prvky překrývat jak fungují plovoucí prvky Pozicování Pro rozmístění prvků na stránce je možné použít
VíceTabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky
VíceCSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
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í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í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íceŠKODA Portal Platform
ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Úč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
VíceObrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne
Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného
VíceDavid Tejzr I.2.C Společnost TzComp.cz
David Tejzr I.2.C 19.5.2017 Společnost TzComp.cz 1 Obsah 1. Úvod... 3 1.1. Volba tématu... 3 1.2. Volba designu stránek... 3 1.3. Použitá technologie... 3 2. Postup... 4 2.1. Layout... 4 2.2. Header...
Více<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
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íceTNPW1 Cvičení
TNPW1 Cvičení 7 10.11.2015 aneta.bartuskova@uhk.cz Box modely 10.11.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení Box model IE řešil jinak šířku elementu, muselo se řešit hacky, dnes už se ale problematické
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íceSkripta ke školení. Autor: Tomáš Herout Telefon: (+420)
Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich...
VíceKaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
Více12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
VíceCSS - stručná reference kaskádových stylů
1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height
VíceÚvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
Vícetvoříme web Bootstrap
tvoříme web Bootstrap 15. 9. 2018 Zlín Co s načatou sobotou V rychlosti zopakujeme základy HTML a CSS Dozvíme se něco o responsivitě Projdeme si úskalí responsivních webů Dáme jídlo Zjistíme, k čemu nám
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íceNeprogramuj, pokud to není nezbytně nutné. Michal Lupečka
Neprogramuj, pokud to není nezbytně nutné Michal Lupečka Kolik osob na tom dělá? grafik kodér programátor copywriter / content editor CSS bude mít na starosti vzhled! Co už se nemusí programovat? mobilní
VíceOBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC
OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC Charakteristika: soubor skriptů, obrázků a popisů k implementaci komunikace s API služby obalkyknih.cz, verze 3.0 pro ALEPH OPAC. Balíček souvisejících
VíceCSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.
Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo
VíceKapitola 5 Tvoříme tabulky
Kapitola 5 Tvoříme tabulky 5 V předchozích kapitolách jsme získali potřebný základ k tomu, abychom mohli úspěšně tvořit části i celé WWW stránky. Pojďme si tedy na chvíli oddechnout. Podíváme se na projekt
VíceKaskádové styly (CSS) Cascading Style Sheets
CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...
VíceTvorba fotogalerie v HTML str.1
Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné
VíceCSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...
Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat
VíceTechniky rozvržení KAPITOLA 2
Techniky rozvržení KAPITOLA 2 V této kapitole: Box model Blokové versus řádkové elementy Zkrácené versus běžné vlastnosti jazyka CSS Rozvržení založené na obtékání Pozicování v jazyce CSS Responzivní web
VíceNázev školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
Vícewww.helpmark.cz Tomáš Herout
4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi
Víceselektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
VíceCSS kaskádové styly a jejich využití při tvorbě internetových stránek
Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí
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íce1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11
Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................
VíceCSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace
CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace
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í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íceUkázka knihy z internetového knihkupectví www.kosmas.cz
Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h
VíceTvorba webu. Kaskádové styly (CSS) Martin Urza
Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).
VíceNová struktura souborů a složek
Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky
VíceSoukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_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_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES
VíceNástrojová lišta v editačním poli
Nástrojová lišta v editačním poli Název projektu PŘEJÍT NA konkrétní sekci webu ZOBRAZIT zobrazí a) pracovní verzi webu (tj. nepublikovanou) b) publikovanou verzi webu a) Odstranit odstraní zobrazenou
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íceSkautIS Remote Components absolventská práce
MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.
VíceReferenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)
Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading
Více25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY
25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné
VíceTvorba www stránek - Jak hodnotí vítězné práce žáci SPŠE oboru grafika a webdesign?
Tvorba www stránek - Jak hodnotí vítězné práce žáci SPŠE oboru grafika a webdesign? 1. místo + kombinace barev šedé a modré + částečná responzivita webu + pěkné okno citace + dobrý nápad s hoverem u navigace
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í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íceNabídka reklamních ploch na webu zpravy.plus
Nabídka reklamních ploch na webu zpravy.plus Níže naleznete reklamní plochy k inzerci a jejich specifikace a bližší informace. Upozornění! Veškeré reklamní podklady musí být uzpůsobeny responzivnímu designu
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íce1. Přímo vložený styl
CSS 1. Přímo vložený styl 2. Šablona stylu v dokumentu 3. Externí šablony stylů 4. Syntaxe stylů 5. Třídy stylů 6. Vlastnosti písma 7. Vlastnosti barvy a pozadí 8. Vlastnosti textu 9. Vlastnosti obdelníku
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íceKaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda
Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích
Více.rohy-kulate { width: 250px; background: url(obr/rohy-spodni.gif) bottom no-repeat; border-top: 2px solid #AAA; }
246 Jak na dva kulaté rohy bloku s pevnou šířkou začátečník Chcete na svoje stránky umístit blok s rámečkem, jehož dva horní či dva spodní rohy budou kulaté a zbylé dva hranaté? Jestliže má váš blok neměnnou
VíceZá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou
Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány
VíceManuál tvorby webových stránek dle webu Jihočeské univerzity v Českých Budějovicích www.jcu.cz. Guideline pro fakulty a celoškolská pracoviště
Manuál tvorby webových stránek dle webu Jihočeské univerzity v Českých Budějovicích www.jcu.cz Guideline pro fakulty a celoškolská pracoviště Červen 014 1 z 9 O manuálu Guideline tvorby webu Jihočeské
VíceReferenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)
Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia
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íceStyl textu CSS 1. Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,...
Styl textu CSS 1 Volba písmap Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,... Styl textu CSS 2 Volba písmap Serifs mají 3 základní
Více13. Vytváření webových stránek
13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací
VíceInformatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) 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 podpory palivového
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íceWebové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.
Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM
VíceVýukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585
Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace
VíceQUADRIO. Description. Spatial Data m /m + VAT CZK/m + VAT m Praha, Spálená/Purkyňova 1
Domovská Stránka / Kanceláře kategorie A / QUADRIO QUADRIO 11000 Praha, Spálená/Purkyňova 1 Office Rental Fee (m / měsíc) 18.55-1.47 /m + VAT Service Charge: - Volné prostory : Min. Kancelářské prostory
VíceKáskádové styly = CSS
1/31 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí CSS lze nadefinovat společný
VíceNázev DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací
VícePrintris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.
Printris Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je založena ne principu Tetrisu. Úkolem hráče je umístit tři stejné tiskárny vodorovně nebo svisle do jedné řady.
VíceSUM U3 SUM U4 SUM U5 SUM
Číslo soutěžícího 1,1 1,2 1,3 1,4 1,5 SUM U1 2,1 2,2 2,3 2,4 2,5 2, 2,7 2,8 SUM U2 3,1 3,2 3,3 3,4 3,5 3, 3,7 3,8 3,9 3.10 3.11 3.12 3.13 3.14 SUM U3 SUM U4 SUM U5 SUM 7 8 1 1 2 18 8 3 1 0 1 3 2 24 8 2
Víceškolení frontend Organizace CSS
školení frontend Organizace CSS organizace CSS Nastavení editoru Editor Config http://editorconfig.org zajistí stejné formátování kódu Prettier https://prettier.io/ hlídá řádky mezi selektory, čárky v
VíceMgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
VíceINTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie
INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor
VíceCSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky
CSS Kaskádní styly Založeno na přednášce Lukáše Bařinky Obsah Základní principy Syntaxe Selektory Dědičnost Formátovací model Generovaný obsah Média, UI Co se nevešlo... Základní principy Dopřená i zpětná
VícePODPORA ELEKTRONICKÝCH FOREM VÝUKY
I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a
VíceBuňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.
Tabulky Tabulky bývaly ve světě webdesignu mocným hráčem. V dobách, kdy podpora CSS v prohlížečích byla mrzká, se pomocí tabulek řešilo rozmístění jednotlivých prvků na stránce tzv. tabulkový layout, který
VíceÚvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
VíceTématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení
Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185
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íce