Technologie pro publikování na webu 1 - PowerPoint Presentation

Slide1

Technologie pro publikování na webu 1

Pozicování, CSS layout, alternativní styly

Ing. Jiří ŠtěpánekSlide2

Pozicování

Slouží k definici umístění elementu v rámci stránky.Pozicování = klíčový prvek při tvorbě layoutu

Kladen velký důraz na testování výsledného kódu v různých prohlížečích (odlišnosti v interpretaci)

V současné době není rozdíl v zobrazení stránky v různých prohlížečích tak velký.

Technologie pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide3

Typy pozicování

Statické – implicitní pro všechny prvkyPrvky na stránce jsou automaticky řazeny – blokové elementy pod sebe, řádkové vedle sebe dle normálního toku vykreslování

Absolutní

pozicování

Pozice vůči levému hornímu rohu stránky

Relativní

pozicování

Pozice vůči nadřazenému prvkuPlovoucí boxElement je obtékán obsahemhttp://www.barelyfitz.com/screencast/html-training/css/positioning/

Technologie

pro

publikování

na

webu

1,

Ing

.

Jiří

ŠtěpánekSlide4

Absolutní pozicování

Element s nastaveným absolutním pozicováním

je vyjmut z normálního toku vykreslování elementů

Je samostatně

pozicovaný (jeho umístění nezávisí na jiných elementech)

Může překrývat jiné elementy (popředí/pozadí určuje vlastnost z-index)

Variantou absolutního

pozicování je position:fixed – prvek je fixován na obrazovku a nemění se při posunu stránky. Při tisku se zobrazuje znovu na každé stránce ve stejném místěTechnologie pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide5

Absolutní pozicování

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

30px

50px

100px

70px

#

absolutediv

{

position

:

absolute

;

width

:

100px

;

height

:

70px

;

left: 30px; top: 50px;}

Oranžová plocha = stránka

<div id=“

absolutediv

“></div>

Definovaný prvek bude při tomto formátování umístěn nezávisle na ostatních prvcích na stránce tak, že jeho levý hodní roh bude mít souřadnice [30;50]. Při absolutním

pozicování

tedy definujeme vždy umístění levého/pravého horního rohu boxu.Slide6

Relativní pozicování

Při relativním pozicování je prvek posunut oproti pozici při normálním řazení.

Nejprve je zformátován, poté je posunut.

Při relativním

pozicování může dojít k překrytí prvků, jejich pořadí je opět určeno vlastností z-index

Ostatní boxy vnímají prvek na jeho normální pozici, jako by nebyl posunut

Technologie

pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide7

Relativní pozicování

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

#

normaldiv

#

relarivediv

30px

-20px

#

normaldiv

{

width

:

200px

;

height

:

100px

;

background-

color

:

Black;}#relativediv{ position: relative;

width

:

100px

;

height

:

90px

;

top

:

-20px

;

left

:

30px; background-color: Red;}

Normálně by se #

relativediv

zobrazil pod #

normaldiv

(normální tok vykreslování elementů) Díky relativnímu

pozicování

se jeho umístění změní podle definice. Posune se 0 -20

px

od svého normálního horního okraje a o 30px od svého normálního levého okrajeSlide8

Plovoucí boxy

Mohou být obtékány ostatním obsahemJsou umístěny vzhledem k pravému nebo levému okraji stránkyNutné je definovat plovoucímu boxu šířku

Jsou mimo běžný tok vykreslování, ostatní obsah je prohlížečem upraven, aby plovoucím boxům vytvořil místo

Technologie pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide9

Plovoucí boxy

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

#

floatdiv

{

float

:

left

;

width

:

100px

;

height

:

50px

;

background-

color

:

Red

;}V XHTML dokumentu je nutné nejprve definovat plovoucí box, teprve poté definovat obsah, který bude obtékat tento plovoucí box.Slide10

Konstrukce CSS layoutu

Layout – visuální rozvržení webové stránkyCSS layout – stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu, obsah, hlavička…)

Pro definici oblastí stránky zpravidla používáme element <div></div> (

division

-oblast)Div je implicitně blokový element, slouží jako kontejner pro další obsah a proto je nutné ho při tvorbě layoutu stylovat

Technologie pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide11

Základní koncepty layoutu

Dvousloupcový layout

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Hlavička

– není nezbytně nutná, ve většině případů se používá

Oblast s navigačními prvky

, šířka je většinou pevně dána

Obsahová část

– šířka by se měla přizpůsobovat šířce stránkySlide12

Základní koncepty layoutu

Kompletní třísloupcový layout

Technologie

pro

publikování

na

webu 1, Ing. Jiří ŠtěpánekHlavička – logo, grafika,

login

, vyhledávání

Oblast s navigačními prvky

, šířka je většinou pevně dána

Obsahová část

– šířka by se měla přizpůsobovat šířce stránky

Oblast s navigačními prvky

(kontextová navigace,

info

..), šířka je většinou pevně dána

PatičkaSlide13

Základní koncepty layoutu

U obou dvou konceptů je nutné použít plovoucí boxyPo definici plovoucích boxů zpravidla rušíme obtékání vlastností clear

u následujícího prvku – u 3s layoutu by to bylo v patičce.

Technologie pro publikování na webu 1, Ing. Jiří ŠtěpánekSlide14

Styly pro různá média

Do XHTML stránky lze nalinkovat více souborů stylů pro různá média. Typ média určuje atribut media prvku link.U stylu pro jiné médium jsou definovány stejné selektory jako ve stylu pro obrazovku, ovšem jsou jinak formátovány např. pro tisk:

Schování menu, přihlašování, vyhledávání…

Roztažení obsahu stránky do míst kde bylo menu

Úpravy barev textů

Technologie

pro

publikování na webu 1, Ing. Jiří ŠtěpánekSlide15

Typy média

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

screen

Obrazovka

tty

Teletype

– pevná šířka znaků, konzole

tv

Televize,

jiná média s nízkým rozlišením a omezenými

scrollovacími

schopnostmi

projection

Projektory

handheld

Mobilní

zařízení

print

Tiskárny

/ náhled tisku

braille

Zařízení využívající

braillovo

písmo

auralSyntetizátory řečiallVšechna zařízení<link rel="Stylesheet" href="style.css" type="text/css" media="print" />Slide16

Alternativní styly

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Umožňují výběr jiného stylu zobrazení stránky, jsou bohužel podporovány minimálním množstvím prohlížečů (

mozilla

). Za pomoci

JavaScriptu

je lze využívat i v ostatních prohlížečích, například kliknutím na určitý objekt na stránce.

<

link

rel

="Stylesheet"

href

="style.css"

type

="text/css"

media

="screen"

/>

<

link

rel="Alternate" href="style2.css" type="text/css" media="screen" />Základní stylAlternativní stylSlide17

Příští přednáška

Centrování obsahu na střed3px bug v IE

Box model

Plovoucí

fotogalerie

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek