O novo designer do Visual Studio 2008 foi completamente renovado, rompendo com o que já vinha deste o tempo do antigo FrontPage. The new designer of Visual Studio 2008 has been completely renovated, breaking with what was already the time of the former FrontPage. Este designer tenta aproximar-se de um dos seus maiores concorrentes, o Dreamweaver, estando agora bastante semelhante. The designer tries to move closer to one of its largest competitors, Dreamweaver, is now quite similar.
Quando abrimos o designer da versão beta 2 do Visual Studio 2008, deparamo-nos logo com uma vista dividida, ou seja, podemos estar a visualizar o código HTML eo design ao mesmo tempo. When we opened the designer of the beta 2 version of Visual Studio 2008, we just split with a view, or we can be to view the HTML code and design at the same time.
Qualquer alteração que se efectue quer no código quer no design, irá reflectir-se no outro lado. Any change which takes place either in code or in design, will reflect on the other side. Se seleccionarmos um elemento na página, o código correspondente será destacado, e vice-versa. If you select an element on the page, the corresponding code will be highlighted, and vice versa. Além desta melhoria, é notória, o aumento de velocidade da actualização da vista do design. Beyond this improvement is evident, the growth speed of updating the view of design. Na versão 2005, quando mudávamos da vista do código para o design, demorava sempre algum tempo até que vissemos alguma coisa. In version 2005, when mudávamos the view of the code for the design, always took some time before we see something. Com este novo designer, a transição é quase instantânea. With this new designer, the transition is almost instantaneous.
O Visual Studio 2008 permite agora a visualização e edição de “Nested MasterPages”. Visual Studio 2008 now allows the viewing and editing of "nested MasterPages." As Nested MasterPages, são MasterPages encadeadas umas dentro das outras. The Nested MasterPages, MasterPages are linked within each other. Esta funcionalidade é bastante interessante para sites que contém secções/departamentos que necessitam de ser diferenciados através de um estilo próprio, mas ao mesmo tempo manter a lógica do site. This feature is very interesting for sites containing sections / departments that need to be differentiated by a unique style, but at the same time maintaining the logic of the site. Nestes casos, cria-se uma masterpage com o que é comum a todo o site, e depois criam-se outras masterpages que são colocadas dentro da masterpage principal com o resto do estilo que é diferente para cada departamento. In these cases, it creates masterpage with what is common to the entire site, and then there are other masterpages that are placed inside the main masterpage with the rest of the style that is different for each department. Nesta versão beta ainda existem alguns problemas com esta funcionalidades, nomeadamente em relação ao suporte visual no editor, tendo-me deparado algumas vezes com o seguinte erro : This beta version still exist some problems with this functionality, particularly in relation to the visual editor, taking me sometimes faced with the following error:
page has one or more <asp:Content> controls that do not correspond with <asp:ContentPlaceHolder> controls in the Master Page page has one or more <asp:Content> controls that do not correspond with <asp:ContentPlaceHolder> controls in the Master Page
Ao fim de algumas tentativas lá consegui dar a volta ao problema. After some attempts there to give it back to the problem. Bastou-me alterar alguma coisa na MasterPage principal depois de estar tudo concluido, eo Visual Studio lá actualizou o designer correctamente, como podem ver na imagem seguinte. All-change anything in the main MasterPage after everything is completed, and then updated the Visual Studio designer correctly, as you can see in the picture below. Esperemos que na próxima versão este bug já venha corrigido. Hopefully in the next version will have this bug fixed.
A funcionalidade de Nested MasterPages também é muito interessante para a criação de templates de 3 colunas ou de 2 colunas, evitando-se a repetição de código que existiria se criássemos apenas duas MasterPages simples. The functionality of nested MasterPages is also very interesting for the creation of templates, 3 columns or 2 columns, avoiding the repetition of code that there are only two MasterPages create simple. Noutro artigo explicarei melhor este aspecto. In another article explain this better.
Outra das novidades relacionada com o design é o novo gestor de CSS, que pode ser acedido através do menu Format » CSS Styles » Manage Styles . Another of news related to the design is the new manager of CSS, which can be accessed through the Format menu 'CSS Styles' Manage Styles.
Este gestor aparece como uma janela integrada no IDE. The manager appears as a window integrated in the IDE.
Através deste gestor dos CSS, obtemos algumas informações bastante interessantes, que vou descrever de seguida: With this manager of CSS, we have some very interesting information, which I will describe below:
Distinção visual, através de cores, do que são classes, estilos de tags HTML e estilos de IDs. Visual distinction, through colors, which are the classes, styles of HTML tags and styles of IDs.
Todos os estilos associados a elementos HTML aparecem a azul, os estilos associados a IDs aparecem a vermelho e as classes, aparecem a verde, como é visivel na imagem anterior. All styles associated with HTML elements appear in blue, the styles associated with IDs appear in red and the classes, shown in green, as is visible in the image above.
Distinção visual de quais os estilos que estão a ser ou não usados na página Visual distinction of what the styles that are being used on the page or not
Os estilos que estão a ser usados no documento em questão aparecem com um circulo cinzento à volta, e os que não estão a ser usados aparecem sem círculo, como podem ver pela imagem de cima. The styles that are being used in the document in question appears with a gray circle around, and those who are not appear to be used without circle, as you can see the image from above.
Previsão do Estilo e estilo onmouseover Forecast Style and style onmouseover
Se passarmos com o rato por cima de um estilo, aparece-nos um tooltip com o código do estilo em questão, assim conseguimos ter acesso ao código sem termos de abrir o ficheiro de CSS. If you move the mouse over a style, appears to us a tooltip with the code of the style in question, so we have access to the code without having to open the file of CSS. Outra funcionalidade também bastante interessante é a previsão do estilo em tempo real, como podemos ver na imagem anterior, em que na parte de baixo vemos a pré-visualização do estilo #header com uma imagem em background e tudo. Another feature also quite interesting is the prediction of the style in real time, as we see in the picture above, in which we see at the bottom of the preview of the style # header with an image in the background and everything.
Organização e Ordenação da lista de estilos Organization and ordered the list of styles
O gestor de estilos permite ainda organizar e categorizar a lista de estilos de diversas formas, por tipos, por elementos e por ordem, permite ainda mostrar todos os estilos, ou mostrar apenas os estilos que estão a ser usados naquela página. The manager of styles can also organize and categorize the list of styles in different ways, by type, and by elements in order, it still show all the styles, or show only the styles that are being used on that page.
Criação de novo estilo Creation of new style
Podemos também criar um novo estilo logo a partir do gestor de estilos. We can also create a new style right from the manager of styles. Também o Wizard de criação foi melhorado. Even the Wizard of creation has been improved.
Aplicação de estilo directamente Application-style directly
O editor dispõe ainda de outra janela que permite aplicar estilos directamente, basta seleccionar o elemento ou o texto que vai receber o novo estilo, e depois clicar em cima do estilo, para que este seja aplicado automaticamente. The editor also has another window that allows to apply styles directly, simply select the item or the text that will receive the new style, and then click on top of the style, for it to be applied automatically.
Outra das novidades, ainda relacionadas com o uso de estilos (CSS), é a janela Propriedades CSS, que nos mostra informação sobre que estilos estão a afectar determinada parte da página, como por exemplo um botão. Another of the news, although related to the use of styles (CSS) is the CSS Properties window, which shows information on styles that are affecting certain part of the page, such as a button.
Através desta janela sabemos a hierarquia de estilos que afecta cada componente. Through this window we know the hierarchy of styles that affect each component.
Existe também intellisense para CSS, ou seja, sempre que estivermos a atribuir uma class a um elemento, através de código, vamos ter acesso a uma lista com todos os estilos disponíveis. There is also IntelliSense for CSS, that is, where are to assign a class to an element, through code, we have access to a list of all available styles.
Como podem ver, trabalhar com CSSs no novo Visual Studio 2008 é muito mais fácil e organizado. As you can see, CSSs work with the new Visual Studio 2008 is much easier and organized.
Durante os próximos dias sairão mais artigos com as novas funcionalidades do Visual Studio 2008. During the next few days will more articles with the new features in Visual Studio 2008. ![]()


Setembro 22nd, 2007 at 0:39 September 22nd, 2007 at 0:39
[...] » Designer e suporte de CSS bastante melhorado [...] [...] 'Designer and improved support for CSS quite [...]
Março 9th, 2008 at 19:32 March 9th, 2008 at 19:32
[...] Tutorial 02 - Instalação da Base de Dados AdventureWorks Designer e Suporte CSS do Visual Studio 2008 Set [...] [...] Tutorial 02 - Installing the AdventureWorks Database Designer and CSS Support of Visual Studio 2008 Sep [...]
Março 9th, 2008 at 21:37 March 9th, 2008 at 21:37
[...] Comentários Novidades do Visual Studio 2008 » Isto Mesmo em Designer e Suporte CSS do Visual Studio 2008rascunho » Blog Archive » links for 2008-03-05 em Novas Funcionalidades C# 3.0 - [...] [...] Comments New Visual Studio 2008 'Even in this Designer and CSS Support of Visual Studio 2008rascunho »Blog Archive» links for 2008-03-05 New Features in C # 3.0 - [...]