LABORATÓRIO WEB / 4º SEMESTRE

Tamanho: px

Começar a partir da página:

Download "LABORATÓRIO WEB 2009-2010 / 4º SEMESTRE"

Leonardo de Andrade Schmidt
8 Há anos
Visualizações:

1 LABORATÓRIO WEB / 4º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA AUDIOVISUAL E MULTIMÉDIA

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 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.

CSS P CSS POSITIONING (Posicionamento via CSS) Torna-se possível dispor os conteúdos de um documento HTML como fazemos

4 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" A SINTAXE #geral {position:absolute; }

5 POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN) 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

max- height z-index tipo de posicionamento topo direita em baixo esquerda comprimento

6 POSICIONAMENTO E FLUTUAÇÃO (CONCEITOS DE DESIGN) PROPRIEDADES ASSOCIADAS AO LAYOUT DA PÁGINA visibility overflow float clear clip visibilidade transbordo flutuação anular corte

7 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.

position:relative o posicionamento relativo é efectuado a partir do ponto onde ele seria rendido normalmente na sua posição estática, mantendo o

8 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.

NOTA: Por predefinição, o valor é o static, não sendo inerente do seu parent; O posicionamento do tipo fixed é útil para

9 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: Não são propriedades com inerência, tendo o valor auto como padrão.

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

10 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. NOTA: o valor none é o atribuído por predefinição, não havendo inerência para esta propriedade.

VALORES none left right os elementos são colocados pela sua ordem natural, portanto sem float; os elementos são

11 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 à esquerda.

VALORES none left right both permite que haja elementos flutuantes ao seu lado limpa todos os elementos que

12 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.

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

13 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 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. Não é uma propriedade com inerência, tendo por predefinição o valor auto.

conteúdo, pode-se usar valores numéricos em todas as unidades de medida. NOTA: Não aceita valores negativos.

15 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 máximo.

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

16 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.

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.

17 PROCESSAMENTO DOS CONTEÚDOS O HTML faz o processamento dos elementos que integram um documento dividindoos em dois grandes tipos: BLOCK Quando um elemento obriga a que o seguinte seja colocado abaixo; INLINE Quando um elemento pode coexistir com outro na mesma linha

tipos: BLOCK Quando um elemento obriga a que o seguinte seja

18 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) layout das tabelas (tabelas)

elementos espaço em branco tipo de listas imagem das listas (bullets / destaques) posição das listas junção

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.

O tamanho de um elemento não é somente aquilo que foi definido com as propriedades width ou height do CSS.

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 ( ). 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.

No browser, esta div terá a largura total total de 450px (300 + 120 + 10 + 5 + 5).

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

Documentos relacionados

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores