• Nenhum resultado encontrado

LABORATÓRIO WEB / 4º SEMESTRE

N/A
N/A
Protected

Academic year: 2021

Share "LABORATÓRIO WEB / 4º SEMESTRE"

Copied!
21
0
0

Texto

(1)
(2)

AULA 17

A. CSS: LAYOUT DAS PÁGINAS

- POSICIONAMENTO E FLUTUAÇÃO

- PROCESSAMENTO DOS CONTEÚDOS

B. CSS: BOX MODEL

C. EXERCÍCIOS

(3)

A. CSS: LAYOUT DAS PÁGINAS

POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN)

Permite acabar com o uso de tabelas e GIF’s transparentes para criar layouts de sites.

CSS P

CSS POSITIONING (Posicionamento via CSS)

Torna-se possível dispor os conteúdos de um documento HTML

como fazemos com um software de paginação ou composição.

A tag mais utilizada é a

<div>

, mas não é a única a poder ser alvo

de posicionamento.

Permite a criação de um bloco genérico (ideal para agrupar

outros elementos e posicioná-los de seguida.

(4)

A. CSS: LAYOUT DAS PÁGINAS

POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN)

TIPOS DE POSICIONAMENTO

static

relative

absolute

fixed

inherit

estático

relativo, em que o elemento se encontra posicionado

relativamente a determinado elemento.

absoluto, em que o elemento se posiciona precisamente num

local da página relativo a todo o documento.

fixo

valor herdado do elemento "pai"

#geral {position:absolute; }

(5)

PROPRIEDADES ASSOCIADAS AO LAYOUT DA PÁGINA

position

top

right

bottom

left

width

min-width

max-width

height

min-height

max- height

z-index

tipo de posicionamento

topo

direita

em baixo

esquerda

comprimento

comprimento mínimo

comprimento máximo

altura

altura mínima

altura máximo

ordem dos níveis

A. CSS: LAYOUT DAS PÁGINAS

(6)

PROPRIEDADES ASSOCIADAS AO LAYOUT DA PÁGINA

visibility

overflow

float

clear

clip

visibilidade

transbordo

flutuação

anular

corte

A. CSS: LAYOUT DAS PÁGINAS

(7)

A. CSS: LAYOUT DAS PÁGINAS

POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN)

POSITION

position:static

corresponde à ordem como os conteúdos surgem no browser, assumindo uma

posição estática consoante são rendidos para visualização.

position:relative

o posicionamento relativo é efectuado a partir do ponto onde ele seria rendido

normalmente na sua posição estática, mantendo o elemento a sua área do fluxo do

documento HTML.

position:absolute

permite indicar a posição do canto superior esquerdo do elemento. Essa posição é

calculada em relação à janela do browser e o elemento sai completamente do fluxo do

documento HTML.

(8)

A. CSS: LAYOUT DAS PÁGINAS

POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN)

POSITION

position:fixed

o seu posicionamento é associado à janela do browser, permitindo manter a posição

definida como fixa, não se movendo com o scroll.

NOTA:

Por predefinição, o valor é o static, não sendo inerente do seu parent;

O posicionamento do tipo fixed é útil para criar efeitos semelhantes aos obtidos com os frames, no qual

uma parte da informação está fixa e a outra move-se. PROBLEMA: O Internet Explorer não reconhece esta

propriedade.

(9)

A. CSS: LAYOUT DAS PÁGINAS

TOP, RIGHT, BOTTOM E LEFT

Estão todas associadas à mesma função de posicionar um elemento. Apesar de

serem propriedades independentes, são usadas em parceria com a propriedade

position.

Permite valores numéricos e o valor auto.

NOTA:

(10)

A. CSS: LAYOUT DAS PÁGINAS

FLOAT

Inspirada na palavra flutuação, permite colocar um elemento encostado ao outro;

Quando usado nas imagens permite a sensação de flutuação, que é utilizada na

paginação de texto (revistas e jornais).

VALORES

none

left

right

os elementos são colocados pela sua ordem natural, portanto

sem float;

os elementos são encostados à esquerda;

os elementos são encostados à direita.

(11)

A. CSS: LAYOUT DAS PÁGINAS

CLEAR

É a propriedade contrária à float;

Permite ignorar elementos com float atribuído não os autorizando a colocar-se ao

seu lado.

VALORES

none

left

right

both

permite que haja elementos flutuantes ao seu lado

limpa todos os elementos que flutuem à esquerda,

permitindo-os apenas à direita.

limpa todos os elementos que flutuem à direita, permitindo-os

apenas à esquerda.

limpa todos os elementos que flutuem quer à direita quer à

(12)

A. CSS: LAYOUT DAS PÁGINAS

CLEAR

NOTA:

Não é uma propriedade inerente, tendo como padrão o valor none, permitindo por defeito, elementos

flutuantes lado a lado.

Esta propriedade é útil para criar layouts, principalmente para as caixas destinadas a actuarem como

cabeçalhos ou rodapés, pois regra geral actual como elementos à parte ficando de fora de qualquer float.

(13)

A. CSS: LAYOUT DAS PÁGINAS

DEFINIÇÃO DAS DIMENSÕES

LAYOUT: é importante o seu posicionamento e o controlo do seu comportamento no

browser (float e clear), mas igualmente importante é a dimensão dos seus elementos/

objectos.

Se não forem definida nenhuma dimensão a uma caixa (div) ela crescerá de acordo

com o conteúdo que nela estiver inserido.

(14)

A. CSS: LAYOUT DAS PÁGINAS

WIDTH

Especifica a dimensão, em comprimento, de um elemento.

VALORES

para além do valor auto, que define o comprimento de forma automática à medida do

elemento ou do seu conteúdo, pode-se usar valores numéricos em todas as unidades de

medida.

NOTA:

Não aceita valores negativos.

No caso de utilizarmos % devemos ter atenção que as mesmas são calculadas com base no elemento

parent.

(15)

A. CSS: LAYOUT DAS PÁGINAS

MIN-WIDTH E MAX-WIDTH / MIN-HEIGHT E MAX-HEIGHT

Permite manter blocos com uma consistência de tamanho ao invés de um tamanho

certo (propriedade width e height), define-se um tamanho relativo.

O seu uso permite garantir que as caixas terão sempre um tamanho mínimo ou

(16)

A. CSS: LAYOUT DAS PÁGINAS

HEIGHT

Permite especificar o tamanho em altura de um elemento.

VALORES

para além do valor auto, que define a altura de forma automática à medida do

elemento ou do seu conteúdo, pode-se usar valores numéricos em todas as unidades de

medida.

NOTA:

Não aceita valores negativos.

No caso de utilizarmos % devemos ter atenção que as mesmas são calculadas com base no elemento

parent.

Não é uma propriedade com inerência, tendo por predefinição o valor auto.

No Firefox, se especificando o height e o seu conteúdo ultrapassar as medidas definidas por uma caixa, a

mesma não cresce como no Internet Explorer, aparecendo como consequência, o conteúdo fora da caixa.

(17)

A. CSS: LAYOUT DAS PÁGINAS

PROCESSAMENTO DOS CONTEÚDOS

O HTML faz o processamento dos elementos que integram um documento

dividindo-os em dois grandes tipdividindo-os:

BLOCK

Quando um elemento obriga a que o seguinte seja colocado abaixo;

INLINE

(18)

A. CSS: LAYOUT DAS PÁGINAS

PROCESSAMENTO DOS CONTEÚDOS

PROPRIEDADES

display

white-space

list-style-type

list-style-image

list-style-position

border-collapse

border-spacing

caption-side

empty-cells

table-layout

apresentação dos elementos

espaço em branco

tipo de listas

imagem das listas (bullets / destaques)

posição das listas

junção das borders

espaço das borders (tabelas)

lado dos títulos (tabelas)

células vazias (tabelas)

(19)

B. CSS: BOX MODEL

O QUE É?

O modelo “Box Model” é uma técnica de webdesign, exclusivo em CSS, e que

descreve as caixas (boxes) geradas pelos elementos HTML.

O tamanho de um elemento não é somente aquilo que foi definido com as

propriedades width ou height do CSS. Estas propriedades definem apenas o espaço

que pode receber o conteúdo(s).

Através do modelo “Box Model”, podemos detalhar as opções de ajuste de

margens, borders, paddings e conteúdo para cada elemento. Todas estas

especificações entram nas soma final, para definirmos a largura ou altura do

elemento.

(20)

B. CSS: BOX MODEL

MODELO

.elemento {

width: 300px;

height: 120px;

padding-left: 10px;

border: 5px solid #000; }

No browser, esta div terá a largura total total

de 450px (300 + 120 + 10 + 5 + 5).

O nome, que significa “modelo de caixa”, tem

fundamento, porque no final, um rectângulo/

quadrado dentro do outro, somando tudo temos

o tamanho do elemento.

(21)

REFERÊNCIAS BIBLIOGRÁFICAS

BUDD, Andy.

CSS MASTERY - ADVANCED WEB STANDARDS SOLUTIONS. Friendsof (2006).

PEREIRA, Alexandre e POUPA, Carlos.

LINGUAGENS WEB. Edições Sílabo (2005-2ª edição).

ROBBINS, Jennifer N.

LEARNING WEB DESIGN. O’Reilly (2007-3ª edição).

SCHMITT, Christopher.

CURSO DE CSS. O’Reilly - ANAYA MULTIMEDIA (2007).

UGHETTO, Vico. CSS -

CRIAÇÃO INOVADORA DE SITES. FCA - Web Pro (2006).

REFERÊNCIAS ONLINE

Referências

Documentos relacionados

Primeira: admitem um período de transição para se passar do capitalismo à sociedade sem classes e, talvez como forma de negar a inevitabilidade do socialismo, conceituam-no

Foi pensado de raíz para a creche e jardim de infância, onde todas as áreas foram dimensionadas e equipadas para acolher crianças com necessidades muito diferentes, desde os

Deus não vai perguntar quantas pessoas você atraiu para a igreja.... mas vai perguntar como você influenciou o Mundo à

forçados a tentar todo tipo de fórmulas para proteger os salários e outros contratos, criando maneiras de eles não serem tão massacrados pela alta de preços.. É claro que

Assim como Eduardo e seus companheiros correm atrás de aumento de salário na Cenatexto, a poetisa Cora Coralina relembra seus tempos de menina, quando lutava para economizar um

- Pois é, seu diretor, o senhor não sabe como a vida está difícil pra gente que ganha esse salário. A gente gosta muito de trabalhar aqui, somos bem tratados, mas viver com o que

Aristóteles aponta para o facto de que nada existe na consciência que não tenha existido primeiro nos sentidos.. Platão poderia ter dito que não há nada na natureza que

Se necessário, a dose de digitoxina deve ser ajustada durante a coadministração e após a interrupção do tratamento com fenobarbital ou deve-se optar pela prescrição da digoxina,