Desenvolvimento de
Aplicações Web na
plataforma Microsoft
Elaborando o design
Academia de Ensino Superior
Prof. André Morais
Elaborando o design
• Objetivos
– Como iniciar o processo de design de um site
– Entender o conceito de Master page e Content
Page
– Como construir um mapa
– Utilizar um arquivo de configuração
(Web.config)
Academia de Ensino Superior
Prof. André Morais
Elaborando o design
• Em um ambiente profissional, é preciso
seguir alguns pontos antes do inicio do
desenvolvimento:
– Desenvolver o modelo funcional
– Identificar as tecnologias que poderão ser
utilizadas
– Desenvolver uma especificação técnica
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Um web site com um bom design inclui,
normalmente, os seguintes elementos:
– Um cabeçalho e um menu para todas as
páginas
– Links a esquerda para navegação (explorer)
– Um rodapé com informações de copyright
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Uma página “Master” define um
layout padrão para todas as páginas
baseadas nela.
• Uma página “Content” é baseada na
“Master”
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Criando uma Master Page
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Uma Master Page irá conter:
– HTML básico
– <%@master ... %> na primeira linha
– Uma tag <asp:ContentPlaceHolder> com
um ID
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Criando uma Content Page
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Um Content Page irá conter:
–<%@ page MasterPageFile= ... %>
na primeira linha
–Uma tag <asp:content>
–NÃO é preciso definir o corpo do
HTML!!
Academia de Ensino Superior
Prof. André Morais
Master Page e Content Page
• Outras características:
– Master Pages em vários níveis
– Master Pages com múltiplos conteúdos
Academia de Ensino Superior
Prof. André Morais
Mapa
• Criando um mapa
• Acrescentando controles de
navegação
Academia de Ensino Superior
Prof. André Morais
Elaborando o design
• Boas práticas para o design de um
site:
– Separe a apresentação da informação
– Mantenha um visual consistente
– Mantenha o site simples para
navegação
Academia de Ensino Superior
Prof. André Morais
Exercício
• Rent A Car
– Você irá desenvolver um web-site para
uma empresa que presta serviço de
alugueis de carro;
– Inicialmente as seguintes páginas serão
criadas...
Academia de Ensino Superior
Prof. André Morais
Exercício
• Página principal
Menu
Academia de Ensino Superior
Prof. André Morais
Exercício
• Sobre a empresa
Academia de Ensino Superior
Prof. André Morais
Exercício
• Tarifas
• Dica: utilize o
recurso de
tabelas
disponível no
menu Layout
Academia de Ensino Superior
Prof. André Morais
Exercício
• Contato
Academia de Ensino Superior
Prof. André Morais