SlideShare uma empresa Scribd logo
1 de 2
Baixar para ler offline
Profa. Denise Aristimunha de Lima – Disciplina Desenvolvimento para Web I
Técnico em Informática – Universidade da Região da Campanha
Professora: Denise Aristimunha de Lima | 2010/2
Trabalho
Fazer um layout líquido com 2 colunas. Tema livre (tem que ter topo, 2 colunas e
rodapé). Em dupla.
Tipos de Layout:
Layout Fixo
O layout de largura fixa tem definida sua largura estática, definida em normalmente em pixels.
Um layout deste tipo não se expande para preencher a janela do navegador, nem se contrai
quando a janela é diminuída. Permanece com a mesma largura sempre.
Exemplo:
Fonte: www.pgdesign.ufrgs.br
A vantagem deste tipo de layout é que os desenvolvedores web tem um controle maior sobre os
elementos da interface. Os elementos do layout podem ser ajustados meticulosamente que não
haverá surpresas na visualização nos navegadores.
A necessidade de ajuste de tamanho em uma visualização de tela diferente ao que foi concebido
primeiramente pode ser resolvida com diferentes arquivos .css cada um com um tipo de
configuração diferente.
Layout Líquido
Utilização do layout líquido (ou fluido) tem a característica de se expandir e de se contrair de
forma a se adequar à janela do navegador. As colunas são declaradas em porcentagem. Este tipo
de layout se adapta ao espaço disponível para visualização.
Profa. Denise Aristimunha de Lima – Disciplina Desenvolvimento para Web I
Desvantagens para telas abaixo de 800 px e acima de 1024. Em tamanhos menores de tela o
navegador acrescenta barras de rolagem e em tamanhos maiores as frases se tornam longas
demais para acompanhar linha a linha (tamanho ideal para linha é mais ou menos 9 palavras).
Acesse
http://www.acessibilidadelegal.com/

Mais conteúdo relacionado

Semelhante a Trabalho layout elastico

Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 

Semelhante a Trabalho layout elastico (20)

Design: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoDesign: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempo
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAISPORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
 
Ferramenta brackets
Ferramenta bracketsFerramenta brackets
Ferramenta brackets
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Ferramentas case
Ferramentas caseFerramentas case
Ferramentas case
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
MiniCurso de Git e Github - UNIFG PIE
MiniCurso de Git e Github - UNIFG PIEMiniCurso de Git e Github - UNIFG PIE
MiniCurso de Git e Github - UNIFG PIE
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
 

Mais de Denise Lima

Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
Denise Lima
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
Denise Lima
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
Denise Lima
 

Mais de Denise Lima (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XX
 
Pós modernismo
Pós modernismoPós modernismo
Pós modernismo
 
Pop art
Pop artPop art
Pop art
 
Pop art
Pop artPop art
Pop art
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientifico
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosas
 
Raizes design
Raizes designRaizes design
Raizes design
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
 
Design antes do design
Design antes do designDesign antes do design
Design antes do design
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remoto
 
Css parte iii_b
Css parte iii_bCss parte iii_b
Css parte iii_b
 
Css parte iii_a
Css parte iii_aCss parte iii_a
Css parte iii_a
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
 
Css parte II
Css parte IICss parte II
Css parte II
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheets
 

Último

ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
azulassessoria9
 
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdfatividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
Autonoma
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
azulassessoria9
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
PatriciaCaetano18
 
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
sh5kpmr7w7
 

Último (20)

Missa catequese para o dia da mãe 2025.pdf
Missa catequese para o dia da mãe 2025.pdfMissa catequese para o dia da mãe 2025.pdf
Missa catequese para o dia da mãe 2025.pdf
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdfMESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
 
Questões de Língua Portuguesa - gincana da LP
Questões de Língua Portuguesa - gincana da LPQuestões de Língua Portuguesa - gincana da LP
Questões de Língua Portuguesa - gincana da LP
 
Quiz | Dia da Europa 2024 (comemoração)
Quiz | Dia da Europa 2024  (comemoração)Quiz | Dia da Europa 2024  (comemoração)
Quiz | Dia da Europa 2024 (comemoração)
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptx
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
Apresentação | Símbolos e Valores da União Europeia
Apresentação | Símbolos e Valores da União EuropeiaApresentação | Símbolos e Valores da União Europeia
Apresentação | Símbolos e Valores da União Europeia
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
Novena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João EudesNovena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João Eudes
 
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdfatividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
 
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
Caderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdfCaderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdf
 

Trabalho layout elastico

  • 1. Profa. Denise Aristimunha de Lima – Disciplina Desenvolvimento para Web I Técnico em Informática – Universidade da Região da Campanha Professora: Denise Aristimunha de Lima | 2010/2 Trabalho Fazer um layout líquido com 2 colunas. Tema livre (tem que ter topo, 2 colunas e rodapé). Em dupla. Tipos de Layout: Layout Fixo O layout de largura fixa tem definida sua largura estática, definida em normalmente em pixels. Um layout deste tipo não se expande para preencher a janela do navegador, nem se contrai quando a janela é diminuída. Permanece com a mesma largura sempre. Exemplo: Fonte: www.pgdesign.ufrgs.br A vantagem deste tipo de layout é que os desenvolvedores web tem um controle maior sobre os elementos da interface. Os elementos do layout podem ser ajustados meticulosamente que não haverá surpresas na visualização nos navegadores. A necessidade de ajuste de tamanho em uma visualização de tela diferente ao que foi concebido primeiramente pode ser resolvida com diferentes arquivos .css cada um com um tipo de configuração diferente. Layout Líquido Utilização do layout líquido (ou fluido) tem a característica de se expandir e de se contrair de forma a se adequar à janela do navegador. As colunas são declaradas em porcentagem. Este tipo de layout se adapta ao espaço disponível para visualização.
  • 2. Profa. Denise Aristimunha de Lima – Disciplina Desenvolvimento para Web I Desvantagens para telas abaixo de 800 px e acima de 1024. Em tamanhos menores de tela o navegador acrescenta barras de rolagem e em tamanhos maiores as frases se tornam longas demais para acompanhar linha a linha (tamanho ideal para linha é mais ou menos 9 palavras). Acesse http://www.acessibilidadelegal.com/