LABORATÓRIO WEB 2009-2010 / 4º SEMESTRE

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

AULA 17 A. CSS: LAYOUT DAS PÁGINAS - POSICIONAMENTO E FLUTUAÇÃO - PROCESSAMENTO DOS CONTEÚDOS B. CSS: BOX MODEL C. EXERCÍCIOS

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.

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; }

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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)

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.

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.

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 http://www.w3schools.com/