Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

html5+css Criando Pagina inicial.

No description
by

Wanderson Lima Alves

on 8 May 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of html5+css Criando Pagina inicial.

HTML5 + CSS Criando um site Completo Descrição do projeto Titulo: Portifolio Criando os cabeçalhos para conteúdo <H?> <p> Tag de bloco de paragrafo; Criando o menu Vamos criar os links do menu.
no caso links são ligações entre páginas arquivos ou informações.
Para isso utilizaremos o comandos de criação de listas. Criando os hiperlinks <a href=""> INSERINDO IMAGENS <IMG SRC> logotipo na lateral superior esquerda; menu na lateral superior direita; quatro links basicos; sistema de slide foto grande muito bonita trocando automatica; umas 5 fotos; conteudo dividido em 4 partes sendo uma imagem titulo de 3 linhas fonte um pouco maior e descrição do conteudo abaixo fonte um pouco menor; rodapé da pagina lateral esquerda direitos autorais lateral direita contato fone; menu simples quando passar o mouse mudar a cor do link; fundo da página preto ou uma tonalidade escura; textos em branco ou tom combinando com fundo; <!doctype html>
<!--codificação da página--><html lang="pt-br">
<!--tipo de linguagem que será desenvolvidada a página-->
<head>
<!--Contém informações para sistemas de buscas, descrições do site e etc-->
<meta charset="utf-8">
<!--tipo de codificação referente a acentuações, principalmente-->
<title>Documento sem título</title>
<!--Texto que será exibido na parte superior do navegador-->
</head>
<body>
<!--dentro do body é inserido todo conteúdo que será visualizado pelo usuário-->
</body>
</html> <!--criando comentários no html--> <!-- --> PROTOTIPAÇÃO DE BAIXA FIDELIDADE PROTOTIPAÇÃO MEDIA FIDELIDADE <!--dentro do body é inserido todo conteúdo que será visualizado pelo usuário-->
<h1>
<!-- cabeçalho -->
Título da Página inicial
</h1>
<h2>
<!-- cabeçalho -->
Sub títulos da página
</h2>
<h3>
<!-- cabeçalho -->
Sub subtítulos da página
</h3> Editar <h1><!-- cabeçalho -->Titulo da Pagina inicial</h1> <h1>
<!-- cabeçalho -->
Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS
</h1> Por Editar <h2>
<!-- cabeçalho -->
Web Designer & Web Developer
</h2>
<h2>
<!-- cabeçalho -->
Profissional
</h2>
<h2>
<!-- cabeçalho -->
Galerias
</h2>
<h2>
<!-- cabeçalho -->
Contato
</h2> <h2>
<!-- cabeçalho -->
Sub titulos da página
</h2> Por Editar Inserir tags <h3> abaixo de tags <h2> e separar os conteúdos diferentes com < hr/> <hr />

<h2>
<!-- cabeçalho -->
Web Designer & Web Developer
</h2>
<h3>
<!-- cabeçalho -->
Web designer é o profissional competente para a elaboração do projeto estético de páginas de internet
</h3>

<hr />

<h2>
<!-- cabeçalho -->
Profissional
</h2>
<h3>
<!-- cabeçalho -->
Trabalhador é um termo amplo que inclui todo aquele que vive do seu trabalho
</h3>

<hr /> <h2>
<!-- cabeçalho -->
Galerias
</h2>
<h3>
<!-- cabeçalho -->
Galeria de arte é um espaço arquitetônico onde são dispostas adequadamente as obras de arte.
</h3>
<hr />
<h2>
<!-- cabeçalho -->
Contato
</h2>
<h3>
<!-- cabeçalho -->
Tem algo a dizer para a comunidad criticar, elogiar, sugerir, entre em contato etc.
</h3>
<hr /> autor do designer Daniel farias alterações Wanderson L.A. Editar Inserir tags <p> abaixo de tags <h3> <h2>
<!-- cabeçalho -->
Web Designer & Web Developer
</h2>
<h3>
<!-- cabeçalho -->
Web designer é o profissional competente para a elaboração do projeto estético de páginas de internet
</h3>
<p>
<!-- abertura do bloco de paragrafo -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr /> O TEXTO CONTIDO NESTE TUTORIAL PODE SER ENCONTRADO NO LINK http://br.lipsum.com/ Repita o ultimo passo para o restante das tags <h3> das sessões: Profissional
Galerias
Contato <h2>
<!-- cabeçalho -->
Contato
</h2>
<h3>
<!-- cabeçalho -->
Tem algo a dizer para a comunidado criticar, elogiar, sugerir, entre em contato etc.
</h3>
<p><!-- abertura do bloco de paragrafo -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr />
<p>&copy; Todos os direitos reservados a Seu Nome 2012.</p> Vamos inserir os direitos autoriais no final da página após a informação de contato; <ul> <h1>
<!-- cabeçalho -->
Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS
</h1> Menu será criado logo abaixo da tag <h1> como indicado abaixo <ul>
<li>
Home
</li>
<li>
Profissional
</li>
<li>
Galerias
</li>
<li>
Contato
</li>
</ul> Vamos criar os hiperlinks do menu.
no caso links são ligações entre paginas arquivos ou informações.
para isso utilizaremos o comandos de <a>para indicar a ligação e <a href=""> que seria o caminho da ligação. <ul>
<li>
<a href="index.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Home
</a>
</li>
<li>
<a href="profissional.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Profissional
</a>
</li>
<li>
<a href="galerias.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Galerias
</a>
</li>
<li>
<a href="contato.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Contato
</a>
</li>
</ul> <!-- inserindo hyperlink na imagem-->
<a href="index.html" title="Pagina Inicial">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/artigo_home.jpg" width="210" height="138" alt="Pagina inicial">
</a>

<h2>
<!-- cabeçalho -->
Web Designer & Web Developer
</h2> acima do <h2> insira a tag de inserção de imagem. <!-- inserindo hyperlink na imagem-->
<a href="profissional.html" title="Profissional">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/artigo_profissional.jpg" width="210" height="138" alt="Profissional">
</a>

<h2>
<!-- cabeçalho -->
Profissional
</h2> <!-- inserindo hyperlink na imagem-->
<a href="galerias.html" title="Galerias">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/artigo_galeria.jpg" width="210" height="138" alt="Galerias">
</a>

<h2>
<!-- cabeçalho -->
Galerias
</h2> <!-- inserindo hyperlink na imagem-->
<a href="contato.html" title="Contato">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/artigo_contato.jpg" width="210" height="138" alt="Contato">
</a>

<h2>
<!-- cabeçalho -->
Contato
</h2> <li>
<a href="index.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Contato
</a>
</li>
</ul>

<a href="index.html" title="Pagina Inicial">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/banner.jpg" width="978" height="302" alt="Pagina inicial">
</a> <h1>
<!-- cabeçalho -->
Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS
</h1>

<h1>
<!-- logotipo -->
<a href="index.html" title="Pagina Inicial">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/logo.png" width="257" height="31" alt="Pagina inicial">
</a>
</h1> Altere o cabeçalho <h1>: exclua toda as informações e insira a tag do logotipo. As imagens contidas em um site na verdade estão separadas da pagina html e são referenciadas dentro do codigo por uma tag que chama a imagem e depois a formata posiciona dentro da pagina. Formatando conteúdo Para formatar utilizaremos o css como anexo a nossa página CSS Crie um arquivo no Dreamweaver com o nome de tela.css;
salve esse arquivo ao lado do seu arquivo index.html;

agora abra o arquivo index.html no Dreamweaver e vamos referenciar o arquivo tela.css que irá conter todas as formatações da nossa pagina; <title>Portifolio Web</title>

<link rel="stylesheet" type="text/css" href="tela.css" />
<!-- cria um link com a pagina de formatações --> Procure a linha <title> e altere como demonstrado abaixo; Abra a pagina de formatações tela.css abaixo da tags

@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}

/* o asterisco indica que todo código, no caso a página, terá 0 de margin. Se não configurado este parâmetro vem com default de 5px */ Criando comentario no CSS. /* comentario no CSS */ Continuando a formatação. Vamos colocar abaixo da ultima tag. /* o asterisco indica que todo código, no caso a página, terá 0 de margin. Se não configurado este parametro vem com default de 5px */ body{
background:#000;
} uma dica, comente as linhas que achar nescessário e a cada tag de formatação adicionada; salve e visualize a página em um navegador. /* */ h1{
font-size:26px;
margin:0 0 10px 0;
color:#E4321B;
} ul{
margin:0 0 10px 0:
}

li{
display:inline;
} h2, h3{
font-size: 16px;
margin:0 0 10px 0;
} p{
font-family:"Times New Roman", Times, serif;
} hr{
margin:0 0 10px 0;
} #geral{
width:978px;
margin:0 auto;
} <ul>
<li>
<a href="index.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Home
</a>
</li>
<li>
<a href="profissional.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Profissional
</a>
</li>
<li>
<a href="galerias.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Galerias
</a>
</li>
<li>
<a href="contato.html" title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Contato
</a>
</li>
</ul> Copie e cole esta tag no final da nossa pagina baixo da tag. <p>
&copy; Todos os direitos reservados a Seu Nome 2012.
</p> DIV Para que possamos continuar as formatações da nossa pagina deveremos dividir nossa pagina em blocos no caso utilizaremos a tag div; Abaixo da tag <body> insira o codigo abaixo; <div id="geral"> acima da tag </body> insira o codigo abaixo: </div> agora vamos formatar a div geral; <div id="menuprincipal"> </div> <ul>
<li>
<a href="index.html"title="Portifólio-Desenvolvimento Gráfico & Programação HTML5+CSS">
Home
</a>
</li>
<li>
<a href="profissional.html"title="Portifólio-Desenvolvimento Grafico & Programação HTML5+CSS">
Profissional
</a>
</li>
<li>
<a href="galerias.html"title="Portifólio-Desenvolvimento Grafico & ProgramaçãoHTML5+CSS">
Galerias
</a>
</li>
<li>
<a href="contato.html"title="Portifólio-Desenvolvimento Grafico & ProgramaçãoHTML5+CSS">
Contato
</a>
</li>
</ul> <div id="conteudo">
<div class="coluna">
<!--inserindo hyperlink na imagem-->
<a href="index.html" title="Pagina Inicial">
<!-- inserindo imagens-->
<img src="http://wandersonla.com.br/alunosmc/web/docs/html5/projeto/imagens/artigo_home.jpg" width="210" height="138" alt="Página inicial"></a> Agora vamos criar blocos, utilizando a div, para colocar as colunas do site. Dentro da div conteúdo </div>
<hr/>
<h2>
<!--cabeçalho-->
Profissional
</h2> Feche a tag acima de: Repita o processo tentando identificar os blocos de codigo que são semelhantes ao formatado dica são no total 4 colunas; Agora vamos inserir o banner logo abaixo do menu No CSS, vamos formatar as margens da tag hr. São valores para 4 margens, respectivamente, topo, direita, base e esquerda Crie uma div para englobar o conteúdo do site <div id="conteudo">
<!--inserindo hyperlink na imagem-->
<a href="index.html" title="Pagina Inicial"> Feche a div conteúdo acima dos direitos autorais </div>
<p>
<!--abertura de parágrafo--> &copy; Todos os direitos reservados a Seu Nome 2012. Crie, também, uma div para o rodapé englobando os direitos autorais e fechando abaixo de </ul> <div id="rodape"> <p>
<!--abertura de parágrafo-->
&copy; Todos os direitos reservados a Seu Nome 2012. </p>
<ul>
<li>
<a href="index.html" title="Portifólio - Desenvolvimento Gráfico e Programação HTML5 + CSS">
Home
</a></li>
<li>
<a href="profissional.html" title="Portifólio - Desenvolvimento Gráfico e Programação HTML5 + CSS">
Profissional
</a></li>
<li>
<a href="galerias.html" title="Portifólio - Desenvolvimento Gráfico e Programação HTML5 + CSS">
Galerias
</a></li>
<li>
<a href="contato.html" title="Portifólio - Desenvolvimento Gráfico e Programação HTML5 + CSS">
Contato</a></li>
</ul> </div> Formatando o menu principal... #menu_principal{background:#F00;} ...e as colunas .coluna{
width:216px;
background:#CCC;
} Não se esqueça de visualizar seu site em um navegador para ver se está dando tudo certo! Agora, vamos modificar o h1 acrescentando a declaração float e ajustando o primeiro valor de margin para 80 pixels h1{
font-size:26px;
margin:80px 0 10px 0;
color:#E4321B;
float:left;
} Vamos passar para o Menu principal, agora
Retire o background e acrescente as seguintes declarações: #menu_principal{
background:#F00;
float:right;
margin:80px 0 0 0;
} Agora, formataremos os links do menu. #menu_principal a{
padding:10px 20px;
color:#FFF;
text-decoration:none;
font-weight:bold;
}

#menu_principal a:hover{
background:#F00;
} Vamos alinhar as colunas, acrescente float:left em .coluna .coluna{
width:216px;
background:#CCC;
float:left
} Visualise o site no navegador Note que a tag hr (as linhas) não deixa que as colunas fiquem alinhadas perfeitamente, então vamos anular essa tag: hr{
display:none;
} Vamos alinhar o rodapé tirando dele a influência que o float das colunas exerce #rodape{
clear:both;} Adicione margin:20px 14px; no .coluna .coluna{
width:216px;
background:#CCC;
float:left;
margin:20px 14px;
} Voltando ao rodapé, vamos formatar os direitos autorais (tag <p>) e o menu inferior (tag <ul>) #rodape p{
font-family:Arial, Helvetica, sans-serif;
float:left;
}

#rodape ul{
float:right;
margin:0 0 20px 0;
} Por fim, apague o background da div coluna

Visualise o site para ver se não esqueceu de algo.
Full transcript