O Microsoft Expression Web é uma ferramenta para designers profissionais criarem visualmente web sites modernos, elegantes, de alta qualidade, baseados em CSS. Um engenho CSS sofisticado no editor permite alterações sem sujar o código. O gerenciamento drag-and-drop de estilos CSS, facilita a criação de folhas de estilo centralizadas. O editor completa e valida automaticamente o código, evitando erros.
É fácil Formatar a visualização de dados em XML usando ferramentas visuais. A criação e edição de dados é simplificada através de seu poderoso ambiente com total suporte aos padrões W3C.
Use o poder do ASP.NET 2.0 para criar aplicações Web de alta interatividade. A formatação de controles ASP.NET pode ser executada pelo modo designer, sem necessidade de codificação. Controles ASP.NET podem ser formatados de diversas maneiras, usando CSS.
Iremos explorar aqui um pouco destas funcionalidades. Para tanto vamos iniciar uma série de artigos onde iremos construir um pequeno layout.
Para começar, baixe aqui o Microsoft Expression Web:
http://www.microsoft.com/expression/products/download.aspx?key=web
Instalou o EW? Ótimo! Agora vamos ao que interessa.
Essa é a interface incial do EW (img01), bastante intuitiva e profissional:
<img01>
Vamos iniciar nosso trabalho.
No panel “Apply Style” clique em <New Style>.
<img02>
Essa janela (img02) possui alguns detalhes interessantes. Além das classes já estarem listadas na opção selector, ela possiu um preview que ajuda e muito na personalização.
Vamos modificar as propriedades da classe body nas seguintes categorias:
· Font
o Font-family: verdana;
o Font-size: 10px;
o Color: #FFFFFF.
· Background
o Background-color: #405060;
· Box
o Em margin marque a opção same for all;
o Top: 0px;
Agora vamos dividir nosso layout em três áreas, ou seja, três DIV´s que ficarão dispostos um abaixo do outro.
· No rodapé de seu arquivo em edição existem três botões, clique no botão <Split> para termos uma visão do código e do design;
· Entre as tags body insira o seguite código:
<body>
<div class="topo">
</div>
<div class=”conteudo”>
</div>
<div class=”rodape”>
</div>
</body>
De volta ao panel “Apply Style” clique em <New Style>, vamos modificar as propriedades da DIV “topo”.
· Em selector escreva: .topo;
· Box
o Em margin desmarque a opção same for all;
o Right: auto;
o Left: auto;
OBS: Assim centralizamos nossa DIV.
· Background
o Background-color: #536476;
· Position
o Position: relative;
o Width: 750px;
o Height: 100px;
De volta ao panel “Apply Style” clique em <New Style>, vamos modificar as propriedades da DIV “conteudo”.
· Em selector escreva: .conteudo;
· Box
o Em margin desmarque a opção same for all;
o Right: auto;
o Left: auto;
OBS: Assim centralizamos nossa DIV.
· Background
o Background-color: #86A917;
· Position
o Position: relative;
o Width: 750px;
o Height: 500px;
De volta ao panel “Apply Style” clique em <New Style>, vamos modificar as propriedades da DIV “topo”.
· Em selector escreva: .topo;
· Box
o Em margin desmarque a opção same for all;
o Right: auto;
o Left: auto;
OBS: Assim centralizamos nossa DIV.
· Background
o Background-color: #536476;
· Position
o Position: relative;
o Width: 750px;
o Height: 50px;
Bom, já temos um forma definida para nosso layout, no próximo artigo daremos continuidade inserindo um menu com rollover em CSS. Até lá!
Clique aqui para fazer download do fonte de exemplo.