Calculando datas no InfoPath 2003

Um dos grandes problemas do InfoPath é a incapacidade de calcular datas, para isto devemos progredir utilizando codificação, e neste caso vou utilizar VBScript para isto.

O artigo original está no link: http://www.bizsupportonline.net/infopath2003/datediff-vbscript-infopath.htm

Mas vou resumir o artigo acima.

1. Modifique o InfoPath para executar códigos em VBScript ao invés de JScript: Ferramentas – Opções do Formulário – Avançado

2. Crie três campos no seu formulário, sendo:

a) startDate e endDate como DateTime

b) dateDiff e dateInterval como Text

3. Acrescente o código conforme informações abaixo:

Dentro do formulário:

Function ISODateStringToVBDate(ISODateString)
Dim dtRetVal
dtRetVal = Null

If Trim(ISODateString) <> “” Then
dtRetVal = DateSerial(Mid(ISODateString, 1, 4), _
Mid(ISODateString, 6, 2), Mid(ISODateString, 9, 2))
End If

ISODateStringToVBDate = dtRetVal
End Function

Sub CalculateDateDifference()
Dim strStartDate
Dim strEndDate
Dim strDateInterval
Dim dtStart
Dim dtEnd
Dim intDateDiff

‘Retrieve the ISO date from the InfoPath date fields
strStartDate = XDocument.DOM.selectSingleNode(“/my:meusCampos/my:startDate”).text
strEndDate = XDocument.DOM.selectSingleNode(“/my:meusCampos/my:endDate”).text

‘Convert ISO date into VBScript date
dtStart = ISODateStringToVBDate(strStartDate)
dtEnd = ISODateStringToVBDate(strEndDate)

If Not IsNull(dtStart) And Not IsNull(dtEnd) Then

‘Retrieve the date interval to be used
strDateInterval = XDocument.DOM.selectSingleNode(“/my:meusCampos/my:dateInterval”).text

Select Case LCase(strDateInterval)
Case “yyyy”
‘Difference between dates in years
intDateDiff = DateDiff(“yyyy”, dtStart, dtEnd)
Case “m”
‘Difference between dates in months
intDateDiff = DateDiff(“m”, dtStart, dtEnd)
Case “d”
‘Difference between dates in days
intDateDiff = DateDiff(“d”, dtStart, dtEnd)
Case “h”
‘Difference between dates in hours
intDateDiff = DateDiff(“h”, dtStart, dtEnd)
Case “n”
‘Difference between dates in minutes
intDateDiff = DateDiff(“n”, dtStart, dtEnd)
Case “s”
‘Difference between dates in seconds
intDateDiff = DateDiff(“s”, dtStart, dtEnd)
Case Else
‘If interval is not recognized so use difference in days
intDateDiff = DateDiff(“d”, dtStart, dtEnd)
End Select

‘Set the value of the dateDiff field
XDocument.DOM.selectSingleNode(“/my:meusCampos/my:dateDiff”).text = intDateDiff

End If

End Sub

4. Duplo clique no campo startDate vá em Validação de Dados e depois selecione OnAfterChange no evento e clique em Editar. Acrescente o código a seguir, tanto no startDate quanto do endDate.

Sub msoxd_my_startDate_OnAfterChange(eventObj)

If eventObj.IsUndoRedo Then
Exit Sub
End If

CalculateDateDifference

End Sub

Como enviar e-mail utilizando o InfoPath 2003

Geralmente as ferramentas mais antigas sempre tem as suas limitações, utilizando-se hoje do InfoPath 2010 podemos notar uma grande diferença entre as ferramentas, principalmente quando dizemos respeito a funcionalidades.

Uma das coisas que sempre queremos e enviar o conteúdo do InfoPath no corpo do e-mail, e na versão 2003 não era possível fazer isso sem colocar uma codificação, ou fazer com o usuário clica-se no botão correspondente ao e-mail na caixa de ferramentas e colocasse as informações.

O código abaixo auxilia na chamada desta caixa com os respectivos e-mails já preenchidos. Basta colocar seu conteúdo em um botão.

function OpenMailEnvelop(subject, to)

{

try

{

var oEnvelope = Application.ActiveWindow.MailEnvelope;

oEnvelope.Subject = subject;

oEnvelope.To = to;

oEnvelope.Visible = true;

return true;

}

catch(exception)

{

return false;

}

}

function btnSomeButton::OnClick(eventObj)

{

OpenMailEnvelop(“this is the subject”, “someone@somewhere.com“)

}

Como remover o Link para Exibir todo o Conteúdo do Site

Outro problema que sempre deparamos é por mais que removemos permissão do usuário, ele sempre consegue ver o conteúdo de todo o site, e no SharePoint 2010 não podemos remover este conteúdo através de uma simples “Desabilitar a visualização”, então vamos aos truques:

Retirando a visualização da Master Page

Abra o SharePoint Designer conectado na Home do Site, após a abertura navegue em (todos os arquivos/_catalogs/masterpage/v4.master). Esta é a Master Page geralmente utilizada para as páginas do SharePoint 2010.

Após a localização do arquivo Edite-o com o SharePoint Designer, localize o link na barra de ferramentas da lateral esquerda e clique com o botão da direita no link “Todo o Conteúdo do Site” clique em Propriedades, localize- a propriedade “Visible” e coloque-a como “False”. Pronto já realizamos o primeiro passo.

Agora dentro da Master Page temos que alterar o código: Localize o seguinte código

<SharePoint:MenuItemTemplate runat=”server” id=”MenuItem_ViewAllSiteContents”
Text=”<%$Resources:wss,quiklnch_allcontent%>”
Description=”<%$Resources:wss,siteactions_allcontentdescription%>”
ImageUrl=”/_layouts/images/allcontent32.png”
MenuGroupId=”300″
Sequence=”302″
UseShortId=”true”
ClientOnClickNavigateUrl=”~site/_layouts/viewlsts.aspx”
PermissionsString=”ViewFormPages”
PermissionMode=”Any” />

Remova a URL “~site/_layouts/viewlsts.aspx” e acrescente para ela voltar para a Home Page, só guarde a informação de qual é o link pois caso contrário não conseguirá voltar a está página.

 

Como Modificar o Layout do SharePoint 2010 utilizando CSS

Senhores, quem nunca se perguntou como alterar o Layout do SharePoint, e quem nunca se perguntou, poxa isso poderia ser mais fácil. Neste tópico vou explicar como criar um CSS e aplicar ao SharePoint, este tópico não procura alterar a Master Page, apenas acrescentar objetos ao SharePoint 2010 através de um arquivo CSS criado por nós.

Criando o CSS

Primeiro passo você necessita baixar o SharePoint Designer 2010 da Microsoft, eu acho um software muito fácil para a criação de CSS, mas se você preferir usar outro fique a vontade.

Após a criação do CSS (modelo no final do tópico) você necessita colocar este CSS na biblioteca de estilo do SharePoint 2010 (Ações do Site – Exibir todo o conteúdo do site – Biblioteca de Estilos – pt-br – Core Style). Esta biblioteca armazena os estilos criados pelo usuário para serem aplicados nas páginas do SharePoint 2010.

O segredo do CSS do SharePoint está nas classes que devem ser nomeadas pelo mesmo nome que ele entende, o arquivo de exemplo mostra um exemplo destas classes.

Publicando o CSS e as Imagens para o Novo Layout

Após o armazenamento do CSS, agora você precisa armazenar as imagens na biblioteca pública de imagens (Ações do Site – Exibir todo o conteúdo do site – Imagens do Conjunto de Sites). Esta biblioteca armazena as imagens que podem ser acessadas por todos os recursos do portal, pois um dos problemas é você acrescentar em uma biblioteca que não possa ser acessada por todos os usuários. Importante: Caso você esteja colocando o seu SharePoint como um site de Web, acrescente as imagens em uma biblioteca com acesso anônimo, ou faça com a biblioteca pública de imagens possua acesso anônimo.

Agora que já temos o CSS e as imagens acrescidas ao portal, temos agora que fazer com que a página desejada absorva este CSS criado (acesse o endereço http://enderecodosharepoint/_layouts/changesitemasterpage.aspx) neste endereço você conseguirá alterar o CSS principal deste sub site e de todos os sub sites abaixo deles (Opção “Especifique um arquivo CSS a ser usado por este site de publicação e por todos os sites herdeiros dele:”).

Você poderá escolher para redefinir todos os sub sites ou não, após o OK verá que as opções modificadas no CSS foram aplicadas ao portal.

Exemplo do CSS

.ms-cui-topBar2 { /* Modifica a barra de fundo do topo do site onde encontra-se ações do site */
background-image:url(‘/SiteCollectionImages/suafigura.png’)
}
.ms-siteactionsmenu > span > a > span {
font-size:9pt;
color:black;
}
.ms-siteactionsmenuhover {
background-image:none;
background-color:#CCCCCC;
}
.ms-cui-tt-span {
background-image:none;
background-color:#CCCCCC;
}
.s4-breadcrumb-anchor {
background-image:none;
background-color:transparent;
}
.s4-breadcrumb-anchor:hover,.s4-breadcrumb-anchor-open,.ms-aqtbutton:hover {
background-image:none;
background-color:#CCCCCC;
}
.ms-welcomeMenu a:link {
color:black;
}
.ms-welcomeMenu.ms-SpLinkButtonActive {
background-image:none;
background-color:#CCCCCC;
color:black;
}

.s4-title {
background-color:white;
}
.s4-titlelogo {
background-color:white;
}
.s4-titletext {
background-image:url(‘/SiteCollectionImages/suafigura.png’);
}
.s4-socialdata-notif {
background-color:#E2E1F8;
}

 

 

Trabalhando com StringBuilder

Este artigo afeta:

Visual Studio com .NET 2.0 ou superior (Linguagem VB.NET).

Sintomas:

Você necessita acumular valores em uma variável para depois representá-los, para isto temos o recursos do StringBuilder do NetFramework.

Solução:

Abaixo temos um exemplo de como adicionar valores ao método StringBuilder.

Dim objStringBuilder As New StringBuilder()

objStringBuilder.Append(“Meu Primeiro Texto”)

objStringBuilder.Append(“ , Meu Segundo Texto”)

Response.Write(objStringBuilder.ToString)

O resultado obtido após este código será: Meu Primeiro Texto, Meu Segundo Texto

Para remover o conteúdo do string builder proceda:

objStringBuilder.Remove(0, objStringBuilder.Length)

Acessar os parâmetros do WebService Remotamente

Este artigo afeta:

Visual Studio todas as versões.

Sintomas:

Você criou um Web Service mas ele só permite ser visto através do servidor e exibe a mensagem: The test form is only available for requests from the local machine. Proceda:

Solução:

É necessário colocar a seguinte linha no WebConfig

        <webServices>
<protocols>
<add name=”HttpGet”/>
<add name=”HttpPost”/>
</protocols>
</webServices>

Trabalhando com ValidationExpression no Visual Basic

Este artigo afeta:

Visual Studio 2005 ou superior.

Sintomas:

Você deseja realizar validações simples dos campos de seu formulário web. O Visual studio agora trás consigo um componente muito interessante chamado de Expression Validator, este componente consegue fazer qualquer tipo de validação de um campo. No exemplo abaixo iremos validar um formato de datas, desejamos que o usuário informa a data como “dd/mm/aaaa”.

Solução:

1 – Insira um campo do tipo “TextBox” em sua página;

2 – Insira o componente RegularExpressionValidator ao lado do campo que deseja checar, agora abra as propriedades de “RegularExpressionValidator” e preencha o nome de seu campo em “ControlToValidator”;

3 – Em “ErrorMessage” preencha a mensagem de erro que o usuário ira receber quando preencher a informação errada no campo;

4 – Em “ValidationExpression” preencha: \d{1,2}\/\d{1,2}/\d{4}

Pronto agora é só testar a sua página, tentando preencha algo diferente de “dd/mm/aaaa”

Para validar somente números utilize: ^\d+$

Para validar se o CPF está com os caracteres corretos: ^\d{3}\.\d{3}\.\d{3}\-\d{2}$

Para validar se os caracteres do telefone estão corretos: ^\d{4}\-\d{4}$

Para restrição de caracteres especiais utilize: ^[0-9a-zA-Z’ç~^´`\s]{1,40}$

Como alterar a senha do Active Directory via .NET

Este artigo afeta:

• Visual Studio .NET;
• Visual Basic .NET;
• Active Directory.

Sintomas:

Você necessita criar uma aplicação para alterar a senha dos usuários do Active Directory via Web.

Solução:

Crie um projeto “VB” do tipo Web Service com o código conforme abaixo. Importante: o name space Directory Services deve ser inserido através da inserção da referência.

Seção Imports

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.DirectoryServices

Código da função ChangePassword

    <WebMethod()> _
Public Function ChangePassword(ByVal UserName As String, ByVal Password As String, ByVal newPWD As String) As String

        Dim dcDNS As String = “dominio.com.br”
Dim rootDN As String
Dim rootDSE As DirectoryEntry
Dim searchRoot As DirectoryEntry
Dim userEntry As DirectoryEntry
Dim searcher As DirectorySearcher
Dim results As SearchResultCollection
Dim result As SearchResult
Dim oldPassword As String = Password
Dim newPassword As String = newPWD

        Try

            result = Nothing

            rootDSE = New DirectoryEntry(String.Format(“LDAP://{0}/rootDSE”, _
dcDNS), UserName, oldPassword, AuthenticationTypes.Secure Or _
AuthenticationTypes.Sealing Or AuthenticationTypes.ServerBind)
rootDN = DirectCast(rootDSE.Properties(“defaultNamingContext”).Value, String)
searchRoot = New DirectoryEntry(String.Format(“LDAP://{0}/{1}”, _
dcDNS, rootDN), UserName, oldPassword, AuthenticationTypes.Secure Or _
AuthenticationTypes.Sealing Or AuthenticationTypes.ServerBind)

            searcher = New DirectorySearcher(searchRoot)
searcher.Filter = String.Format(“sAMAccountName={0}”, UserName)
searcher.SearchScope = SearchScope.Subtree
searcher.CacheResults = False
results = searcher.FindAll

            For Each result In results
userEntry = result.GetDirectoryEntry()
Exit For
Next

            userEntry = result.GetDirectoryEntry()
If userEntry Is Nothing Then
Return “User not found in this domain.”
Exit Function
End If
userEntry.Invoke(“ChangePassword”, New Object() {oldPassword, newPassword})
userEntry.CommitChanges()

            Return “Password Changed Successfully”

        Catch ex As Exception
Return ex.Message
Finally

            userEntry = Nothing
If Not userEntry Is Nothing Then userEntry.Dispose()
results = Nothing
If Not results Is Nothing Then results.Dispose()
searcher = Nothing
If Not searcher Is Nothing Then searcher.Dispose()
searchRoot = Nothing
If Not searchRoot Is Nothing Then searchRoot.Dispose()
rootDSE = Nothing
If Not rootDSE Is Nothing Then rootDSE.Dispose()

        End Try

    End Function

End Class

SharePoint Services Minimal MasterPage

Este artigo afeta:

• SharePoint Services 3.0;
• SharePoint Server 2007;
• Project Server 2007.

Sintomas:

Você deseja criar uma nova MasterPage para sua página de SharePoint.

Solução:

Use o link abaixo e copie o código para dentro de sua página.

http://msdn.microsoft.com/en-us/library/aa660698.aspx

Conteúdo da Minimal MasterPage

<%– Identifies this page as a .master page written in Microsoft Visual C# and registers tag prefixes, namespaces, assemblies, and controls. –%>
<%@ Master language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Register Tagprefix=”SPSWC” Namespace=”Microsoft.SharePoint.Portal.WebControls” Assembly=”Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register Tagprefix=”WebPartPages” Namespace=”Microsoft.SharePoint.WebPartPages” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register Tagprefix=”PublishingWebControls” Namespace=”Microsoft.SharePoint.Publishing.WebControls” Assembly=”Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register Tagprefix=”PublishingNavigation” Namespace=”Microsoft.SharePoint.Publishing.Navigation” Assembly=”Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”wssuc” TagName=”Welcome” src=”~/_controltemplates/Welcome.ascx” %>
<%@ Register TagPrefix=”wssuc” TagName=”DesignModeConsole” src=”~/_controltemplates/DesignModeConsole.ascx” %>
<%@ Register TagPrefix=”PublishingVariations” TagName=”VariationsLabelMenu” src=”~/_controltemplates/VariationsLabelMenu.ascx” %>
<%@ Register Tagprefix=”PublishingConsole” TagName=”Console” src=”~/_controltemplates/PublishingConsole.ascx” %>
<%@ Register TagPrefix=”PublishingSiteAction” TagName=”SiteActionMenu” src=”~/_controltemplates/PublishingActionMenu.ascx” %>
<%– Uses the Microsoft Office namespace and schema. –%>
<html>
<WebPartPages:SPWebPartManager runat=”server”/>
<SharePoint:RobotsMetaTag runat=”server”/>

<%– The head section includes a content placeholder for the page title and links to CSS and ECMAScript (JScript, JavaScript) files that run on the server. –%>
<head runat=”server”>
<asp:ContentPlaceHolder runat=”server” id=”head”>
<title>
<asp:ContentPlaceHolder id=”PlaceHolderPageTitle” runat=”server” />
</title>
</asp:ContentPlaceHolder>
<Sharepoint:CssLink runat=”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server” />
</head>
<%– When loading the body of the .master page, SharePoint Server 2007 also loads the SpBodyOnLoadWrapper class. This class handles .js calls for the master page. –%>
<body onload=”javascript:_spBodyOnLoadWrapper();”>
<%– The SPWebPartManager manages all of the Web part controls, functionality, and events that occur on a Web page. –%>
<form runat=”server” onsubmit=”return _spFormOnSubmitWrapper();”>
<wssuc:Welcome id=”explitLogout” runat=”server”/>
<PublishingSiteAction:SiteActionMenu runat=”server”/>
<PublishingWebControls:AuthoringContainer id=”authoringcontrols” runat=”server”>
<PublishingConsole:Console runat=”server” />
</PublishingWebControls:AuthoringContainer>
<%– The PlaceHolderMain content placeholder defines where to place the page content for all the content from the page layout. The page layout can overwrite any content placeholder from the master page. Example: The PlaceHolderLeftNavBar can overwrite the left navigation bar. –%>
<asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server” />
<asp:Panel visible=”false” runat=”server”>
<%– These ContentPlaceHolders ensure all default SharePoint Server pages render with this master page. If the system master page is set to any default master page, the only content placeholders required are those that are overridden by your page layouts. –%>
<asp:ContentPlaceHolder id=”PlaceHolderSearchArea” runat=”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderTitleBreadcrumb” runat=”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderPageTitleInTitleArea”  runat=”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderLeftNavBar” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderPageImage” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderBodyLeftBorder” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderNavSpacer” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderTitleLeftBorder” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderTitleAreaSeparator” runat=”server”/>
<asp:ContentPlaceHolder ID=”PlaceHolderMiniConsole” runat=”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderCalendarNavigator” runat =”server” />
<asp:ContentPlaceHolder id=”PlaceHolderLeftActions” runat =”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderPageDescription” runat =”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderBodyAreaClass” runat =”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderTitleAreaClass” runat =”server”/>
<asp:ContentPlaceHolder id=”PlaceHolderBodyRightMargin” runat=”server” />
</asp:Panel>
</form>
</body>
</html>

Trabalhando com CSS no ASP.NET

Este artigo afeta:

• Visual Studio 2003, 2005 e 2008.

Sintomas:

Você necessita trabalhar com arquivos CSS para formatar a sua página Mestre.

Solução:

O tutorial abaixo explica como trabalhar com CSS em ASP.NET.

1 – Vamos abrir o Visual Studio.NET e criaremos um projeto do tipo ASP.NET utilizando código “VB”.

Após a criação do projeto, crie a estrutura de pastas conforme a figura abaixo e coloque uma figura .gif no diretório _images

Seu Projeto > _pages

Seu Projeto > _themes > _css

Seu Projeto > _themes > _images

2 – Coloque uma master page chamada _masterpage.master. Basta clicar com o botão da direita em seu projeto > Add New Item

3 – Coloque dentro da pasta _pages uma página chamada default.aspx utilizando a master page criada.

4 – Crie dentro da pasta _themes > _css um arquivo de estilo chamado masterdefault.css.

5 – Agora o arquivo do CSS e vamos incluir as opções do mesmo. Altere o conteúdo do Body para o conteúdo abaixo:

body
{
background-color:#FFFFFF;
font-size:9pt;
color:Blue;
font-family:Tahoma;
}

6 – Agora vamos incluir os Ids para as formatações, na barra de ferramentas clique em Style – Add Style Rule – clique em ElementID e digite o primeiro elemento: topo1. Importante: sempre entre com os nomes através do menu Style – Add Style Rule, geralmente quando é digitado diretamente na página tem a tendência de não funcionar – e outro ponto importante, é com relação aos nomes, se digitar em maíscula, deverá ser utilizado em maíscula.

7 – Crie os Ids conforme as informações abaixo, e copie o conteúdo de cada um.

#topo1
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:#F7F7F7;
width:300px;
height:20px;
position:absolute;
top:0px;
left:0px;
}
#topo2
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:#F7F7F7;
width:400px;
height:20px;
position:absolute;
top:0px;
left:300px;
text-align:right;
}
#topo3
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:#F7F7F7;
width:100px;
height:20px;
position:absolute;
top:0px;
left:700px;
}
#topoesquerda
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:Orange;
width:20px;
height:80px;
position:absolute;
top:20px;
left:0px;
}
#logotipo
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:white;
background-image: url(“../_images/logotipo.gif”);
background-repeat:no-repeat;
width:300px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
#topologo
{
border-right:#000000 0px dashed;
border-top:#000000 0px dashed;
border-left:#000000 0px dashed;
border-bottom:#000000 0px dashed;
background-color:White;
width:480px;
height:80px;
position:absolute;
top:20px;
left:320px;
}
#esquerdo
{
border-right: #000000 0px dashed;
border-top: #000000 0px dashed;
border-left: #000000 0px dashed;
border-bottom: #000000 0px dashed;
width: 50px;
height: 500px;
position: absolute;
top: 100px;
left: 0px;
}
#centro
{
border-right: #000000 0px dashed;
border-top: #000000 0px dashed;
border-left: #000000 0px dashed;
border-bottom: #000000 0px dashed;
width: 750px;
height: 440px;
position: absolute;
left: 50px;
top: 160px;
}
#barraferramentas
{
border-right: #000000 0px dashed;
border-top: #000000 0px dashed;
border-left: #000000 0px dashed;
border-bottom: #000000 0px dashed;
width: 750px;
height: 60px;
position: absolute;
left: 50px;
top: 100px;
}

8 – Agora vamos aplicar o CSS em nossa página, para isto existe duas formas.

Forma 1: Arraste o arquivo CSS para dentro de sua página Master

Forma 2: Entre com a codificação conforme figura abaixo:

9 – Agora é só chamarmos o CSS para a inclusão das informações. Para isto basta incluir abaixo de runat=”server”> <div id=”topo1″></div>, veja como ficou:

<body>
<form id=”form1″ runat=”server”>
<div id=”topo1″></div>
<div id=”topo2″>
<div id=”topo3″></div>
<div id=”topoesquerda”></div>
<div id=”logotipo”></div>
<div id=”topologo”></div>
<div id=”esquerdo”></div>
<div id=”centro”></div>
<div id=”barraferramentas”></div>
</form>
</body>

10 – Veja como ficou está página após a formatação do CSS e a inclusão dos objetos como ContentPlace.