31:T46f,criterios = md`## Critérios de avaliação (para nota na disciplina de Webdesign) 1. Funcionamento adequado do código 2. Comentários no código explicando o raciocínio empregado 3. Entrega no prazo
## Prazos ${datasav}
## Instruções para entregar os exercícios na disciplina 1. Construa seu código através de uma IDE Online, ou através de um editor instalado no seu computador; 2. Teste seu código; 2. Coloque seu código em uma pasta online compartilhada com acesso público para visualização, ou compartilhe o código através de um link na ferramenta online de sua preferência; 3. Envie pelo formulário do classroom o link (URL) do documento.

**Observações:* não há maneiras certas ou erradas de resolver um código HTML. O resultado esperado pode ser construído por muitos códigos e abordagens diferentes. Alguma pesquisa será necessária para que você identifique atributos CSS que lhe ajudem a dar a forma necessária às estruturas Não esqueça de comentar seu código, e deixar registros nele explicando (para você mesmo) o que está tentando fazer ao construí-lo daquela maneira`32:[] 2f:{"title":"Exercícios de Layout","cells":[{"id":0,"value":"abertura = md`# Exercícios de Layout\n\n## DD130 - Design e Tecnologia X\n\nOs exercícios desta coleção têm o objetivo de trabalhar as habilidades e técnicas utilizadas para a construção de um layout genérico para um website. Ao concluí-los, você terá exercitado e experimentado com as instruções e ferramentas de código mais importantes na construção de estruturas que dão base aos layouts dos websites.\n\nOs exercícios propostos são progressivos, e aquilo que você utilizar para resolver um, será utilizado também no próximo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"ex1 = md`## Exercícios\n\n**Layout #1: construção do contêiner ou wrap**\n\nConstrua, no seu próprio documento, o código HTML+CSS que produz um *contêiner* ou *wrap* com 80% da dimensão horizontal disponível e centralizado no documento, como no exemplo abaixo. Deixe ele visível com uma borda ou uma cor de fundo.\n\n

\n\n**Observações:** não há uma maneira certa (ou errada) de resolver o problema proposto. Há várias formas de resolver a questão. Construa seu código de uma maneira que lhe faça sentido.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"ex2 = md`**Layout #2: construção de um cabeçalho**\n\nConstrua, no seu próprio documento, o código HTML+CSS que produz a barra de navegação dentro do contêiner ou wrap, como no exemplo abaixo. Deixe a navegação visível com uma borda, e o espaço para o logotipo visível com uma cor de fundo.\n\n

\n\n**Observações:** as dimensões dos espaços para o logotipo, para a navegação, e para cada opção do menu, ficam à critério do aluno, e não precisam se redimensionar ou ter comportamento responsivo nesse momento.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"ex3 = md`**Layout #3: construção de secções**\n\nConstrua, no seu próprio documento, o código HTML+CSS que produz o conjunto de secções dentro do *contêiner* ou *wrap*, como no exemplo abaixo. Deixe as secções visíveis com uma borda ou uma cor de fundo.\n\n

\n\n**Observações:** o cabeçalho, construído no exercício anterior, deverá ser inserido dentro de uma das secções.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"ex4 = md`**Layout #4: construção de blocos paralelos de conteúdo**\n\nConstrua, no seu próprio documento, o código HTML+CSS que produz as estruturas paralelas dentro do bloco de conteúdo principal na secção central do documento, como no exemplo abaixo. Deixe as estruturas paralelas visíveis com uma borda ou uma cor de fundo.\n\n

\n\n**Observações:** a construção de estruturas paralelas não é trivial. Esta é uma construção que geralmente não funciona da maneira esperada. Além de se preocupar com o alinhamento dos elementos paralelos, será também necessário compensar as dimensões modificadas pelo redimensionamento do navegador. É recomendável o uso dos atributos **gird** ou **flex** do *CSS* para resolver o problema proposto.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"ex5 = md`**Layout #5: adequação para responsividade**\n\nConstrua, no seu próprio documento, o código HTML+CSS que modifica o comportamento dos elementos conforme o contexto em que se encontram, como ficariam no exemplo abaixo se a dimensão horizontal do navegador se reduzisse.\n\nO que deve diminuir, desaparecer, ou a forma como o layout deve se ajustar à nova dimensão fica à critério do aluno.\n\n

\n\n*Observações:* a adequação do comportamento dos elementos em função do espaço disponível será mais facilmente resolvida através da diretriz **@media** do *CSS*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { datasav } from \"@ranoya/ementa-webdesign\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}