Vale a pena experimentar um pouco dos layouts CSS3 para ver o que você quer fazer com eles antes de começar a criar um projeto de produção. Copie o código-fonte do exemplo no site do Dynamic Drive e colocá-lo em arquivos como você espera usá-lo.

Para os fins deste exemplo, você cria um arquivo do HTML5 com o seguinte conteúdo obtido a partir do código HTML mostrado com o exemplo. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 07 da código para download como TwoColumnLayout.HTML).

 
CSS Fixo layout # 2.1- (fixo-fixo)
840px
 
Coluna conteúdo:640px
 
Coluna Esquerda: 200px
Rodapé

O exemplo adiciona espaço em branco para o código fornecido no site da Dynamic Drive para efeitos de torná-lo mais fácil de ler e também para mostrar como a estrutura é criada usando o

O exemplo remove os scripts Dynamic Drive, porque você não precisa deles para preencher as seções com conteúdo aleatório. No entanto, ele não adicionar notas que mostram o número de pixels usados ​​por padrão para cada uma das secções (o exemplo Dynamic Drive única observa o tamanho da coluna esquerda fixo).

Se você modificar o CSS para este site, você também deve alterar as notas que criam sobre os tamanhos das colunas fixas.

O exemplo também usa um arquivo CSS externo. Observe a adição de um tag na . O CSS para o arquivo externo mantém-se inalterada desde o

body {margin: 0-padding: 0-line-height: 1.5em-} b {font-size: 110% -} em {color: red -} # maincontainer {width: 840px; / * Largura do recipiente principal * / margin: 0 auto / * recipiente Center na página * /} # topsection {background: # EAEAEA-height: 90px; / * Altura da secção de topo * /} # topsection h1 {margin: 0-padding-top: 15px;} # contentwrapper {float: left; width: 100% -} # contentcolumn {margin-left: 200px; / * Definir a margem esquerda para a LeftColumnWidth * /} # leftcolumn {float: left; width: 200px; / * Largura da coluna da esquerda * / margin-left: -840px; / * Set deixou margem para - (MainContainerWidth) * / background: # C8FC98 -} # rodapé {clear: left; width: 100% -background: black-color: # FFF-text-align: center-padding: 4px 0- .} #footer a {color: # FFFF80 -} innertube {margin: 10px; / * Margens para DIV interna dentro de cada coluna (para fornecer estofamento) * / margin-top: 0-}

Neste ponto, você pode carregar a página para começar a pensar sobre o que você gostaria de modificar. Aqui está a página como ela aparece sem modificação depois copiá-lo a partir do site e separando o HTML do CSS.

A primeira opção que você vai querer mudar é as cores usadas para os vários objetos. Naturalmente, as cores precisam coincidir com o esquema de cores para o seu site. Os modelos usam representações de cor hexadecimais. Você deve modificá-los para coincidir com aqueles usados ​​por outros modelos em seu site (se necessário).

Modelos que contam com a largura das colunas fixas podem exigir ajustes para trabalhar com o resto do seu site. Para alterar a largura total da página, você modificar a propriedade largura do estilo #maincontainer. A largura painel esquerdo é controlado pela propriedade largura do estilo #leftcolumn.

O tamanho painel de conteúdo é a diferença entre a largura estilo #maincontainer ea largura estilo #leftcolumn. Dynamic Drive tende a usar nomes consistente, de modo que um layout que usa a coluna da direita para as ligações que têm um estilo #rightcolumn que você modificar para alterar a largura da coluna.

Se você alterar o tamanho dos estilos #leftcolumn ou #rightcolumn, então você também precisa alterar a propriedade margem esquerda do estilo #contentcolumn para corresponder.

A altura da seção superior é de apenas 90px. Isso pode causar um problema quando se trabalha com um cabeçalho maior. Altere a propriedade altura do estilo #topsection para torná-lo compatível com outros cabeçalhos em seu site.

Da mesma forma, o rodapé carece de uma altura real, assim você pode precisar para modificá-lo adicionando uma propriedade altura para o estilo #footer para garantir que cada página do seu site tem a mesma aparência.

Esses modelos também contam com ambos os (Negrito) e (ênfase) etiquetas. Embora ambas as marcas ainda são suportados pelo HTML5, há uma forte aviso com o tag para usá-lo apenas como um último recurso.

Se você planejar o uso a longo prazo destes modelos, que seria uma boa idéia para substituir o entradas de tag com o ou tags, ou melhor ainda, apenas evitar o uso do e Tag completamente em favor de formatação CSS.

Estas tags são sobras de dias antes CSS tornou possível adicionar várias formas de ênfase e em negrito usando as propriedades de estilo de fonte e font-weight. O exemplo mostra as tags intacta, mas a recomendação é para removê-los e usar outros tipos de formatação em vez disso.