Olá, Pessoal, o objetivo desse artigo é esta mostrando uma visão geral da nova ferramenta de designer da Microsoft o Expression Web e usá-la para criar masterpages. Nos tempos atuais, sabemos que a tecnologia cresce exponencialmente, enquanto que o uso desta não ocorre na mesma proporção, ou seja, mal aprendemos uma e logo se tem outra, mas isso não quer dizer que o quê já aprendemos fique para trás, pelo contrario, geralmente aplicamos a nova tecnologia agregada com o que já sabemos, isso acontece justamente com o Framework 3.0 da Microsoft. Criou-se uma nova camada complementar. A WPF/E nesse caso especifica para designer, entre outras.
Para aqueles que com eu, tinham dificuldades em desenvolver o designer das paginas no visual studio, o Expression Web é a solução da Microsoft pra esse problema. Microsoft Expression Web Designer é um editor de HTML, CSS, XML, ASP.NET 2.0, XHTML e etc. No estilo WYSIWYG , substitui o Microsoft Front Page e como já foi referido fará sombra ao Dreamweaver. Veja a figura abaixo:
Visão Geral.
1) Observe que a toolbox possui tanto controles HTML com APS.NET
2) Facilidade em trabalhar com folha de estilo
3) Explore do projeto
4) Propriedades dos controles e CSS
Bom, então agora podemos fazer o designer das paginas nele e a regra de negocio no visual studio sem problemas.
Você pode esta baixando a versão trial do expression neste endereço: http://www.microsoft.com/downloads/details.aspx?FamilyId=44FA7F93-7D57-4523-B0C9-2CE54397B732&displaylang=en
No site da microsoft você também pode conferir os detalhes da nova ferramenta, alguns tutoriais e vídeos( em inglês), bons estudos.
Prática:
Vamos aprender como criar uma masterpages e verificar que não há nenhuma dificuldade em “integrá-las” com o VS.
*Nota: o mesmo diretório que o Expression Web utiliza como website pode ser aberto como website pelo visual studio e vice-versa.
Abra o Microsoft Expression Web
1. Vá em file > new website > general > empty web site, dê o nome que desejar no meu caso masterpage clique em Ok. Criamos um novo site, irei usar uma folha de estilo que já vem pronto no Expression web em um dos templetes, se você notar os templetes prontos usam paginas com extensão DWT em vez de masterpage para criar a modelo, ao importar pro VS, ele vai ignora as paginas DWTs, pois o VS trabalha com masterpages uma atualização dos templetes que não repete o código nas paginas herdadas, facilitando o entendimento pro designer.
2. Em Folder list crie as pastas: style e images veja que vou usar como exemplo um estilo pronto para demonstrar, usarei só o essencial.
3. Crie 2 arquivo CSS dentro da pasta styles de nome style1 e layout.
style1.css
|
@import url("layout.css"); body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 0.8em; background-image: url("../images/background.gif"); background-repeat: repeat; background-attachment: scroll; } #container { width: 620px; margin: 0 auto; padding: 10px; border-right: 2px solid #725972; border-bottom: 2px solid #725972; border-left: 2px solid #725972; background-color: #fff; } #masthead { text-align: center; width: 600px; padding: 10px; border: 1px dotted #725972; background-image: url("../images/masthead.gif"); background-repeat: repeat; background-attachment: scroll; } #navigation { position: relative; float: left; width: 139px; margin-top: 10px; margin-bottom: 10px; border-right: 1px dotted #725972; } #content { float: left; width: 470px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; } #footer { text-align: center; clear: both; width: 618px; border: 1px dotted #d8bfd8; }
|
/* Masthead Styles */ #masthead h1 { color: #fff; } #masthead h3 { color: #402640; } /* Navigation Styles */ #navigation ul { list-style-type: none; width: 100%; display: block; margin: 0; padding: 0; } #navigation li { display: block; margin: 0; padding: 0; border: 1px dotted #dfb8df; background-color: #dfb8df; } #navigation a { color: #402640; text-decoration: none; display: block; padding: 5px; border-bottom: 1px dotted #fff; background-color: #dfb8df; } #navigation a:hover { color: #402640; text-decoration: none; background-color: #fff; } /* Content Styles */ #content h1,h2,h3,h4,h5,h6 { color: #503750; } #content img { padding: 5px; border: 1px solid #402640; } /* Footer Styles */ #footer p { color: #808080; }
|
#footer a { color: #503750; text-decoration: underline; } #footer a:hover { color: #402640; text-decoration: none; } a { color: #402640; text-decoration: underline; } a:hover { color: #dfb8df; text-decoration: underline; } .style_bold { font-weight: bold; } .style_italic { font-style: italic; }
layout.css body { margin: 0; padding: 0; border: 0; } #container { margin: 0; padding: 0; border: 0; } #masthead { margin: 0; padding: 0; border: 0; } #navigation { margin: 0; padding: 0; border: 0; } #content { margin: 0; padding: 0; border: 0; } #footer { margin: 0; padding: 0; border: 0; }
|
4. Para pasta images, usei do templete que já vem no Expression Web
5. Vá em file > new > page > general > masterpage , observe a figura 1.
Figura 1
Perceba que podemos criar uma variedade de arquivos como se fosse no VS mesmo.
1. Renomei o ContentPlaceHolder para contentCenter, entre no código da pagina criada, note a semelhante com visual studio, agora é só criar as divs normalmente, como mostra abaixo:
Save sua master page com o nome masterprincipal
Resultado:
Veja que é muito simples, agora podemos criar uma pagina aspx que herda da masterpage
1. Basta ir em file > new > create from master pages veja a figura 2
Figura 2
Agora salve a pagina, dê o nome de teste.aspx e pronto criamos uma pagina que herda da master page simples não? Podemos agora trabalhar com o contentCenter normalmente. Clique na smart taskes do contentCenter e em create custom content, prontinho.
Como foi dito, basta abrir agora seu WebSite com o VS e montar a regra de negocio.
Conclusão:
Diante do exposto, precisava-se de uma ferramenta modena para criação do designer das paginas que atendesse as exigências atuais, com o lançamento do Vista e do Office 2007 isso ficou claro. Vimos que WPF/E (Windows Presentetion Fundation) vem justamente suprir essa necessidade com a ferramenta Expression Web dentre outras. Até a proxima e espero que tenham gostado. ;)
