CSS e Registrando um Site

1. SITE, HOSPEDAGEM E
INTRODUÇÃO AO CSS
WEBDESIGN 2021 – RENATO MELO

2. Registro.br
Portal oficial de domínios do Brasil.
Domínios para pessoas físicas e jurídicas.

3. Para os Buscadores
Domínios do Brasil também contam pontos
no ranking dos motores de busca

4. Evite Dor de Cabeça
Evite registrar domínios diretamente
no Provedor de Hospedagem.

5. Domínios reservados
O Comitê Gestor pode reservar nomes de
acordo com o critério constante na
regulamentação vigente

6. Pesquise
Antes de registrar, você pode pesquisar se o
domínio já existe. Senão, busque alternativas
que estejam disponíveis.

9. Faça seu cadastro
como usuário e
registro do domínio

10. O domínio só garante seu
endereço. Você precisa de
uma hospedagem para
armazenar seus arquivos.

11. E O REGISTRO.BR PEDIRÁ O
DNS
É o equipamento responsável por permitir
que seu domínio esteja ativo na internet. É
um endereço fornecido pelo seu provedor.

12. CONTRATE HOSPEDAGEM EM LINUX
Hospedagens em Linux são ideais para trabalhar
com banco de dados (php). Uma hospedagem em
Windows é boa somente para a linguagem da
microsoft: ASP.net

13. Outros domínios
Empresas utilizam também o registro .com
para preservar a marca.

14. Outros domínios
Eleito o melhor site de registros do mundo

15. Subdomínio
Você pode criar um subdomínio também para
outros sites independentes, como o google,
que criou um subdomínio chamado
“translate” para abrigar o google tradutor.

16. Muito longos
Evite domínios muito longos. O site
deste festival ficou como
festludi.com.br para ficar curto e
de fácil interpretação.

17. E como meu site vai pro ar? Como
eu mando meus arquivos?

18. Você transfere os
arquivos via FTP

19. Pode ser feito no site da sua
hospedagem, via windows
explorer ou de um programa

20. Filezilla: o mais usado

21. Você precisa de:
Endereço do FTP
Usuário
Senha

22. INTRODUÇÃO
AO CSS

23. Antigamente: Site
com emaranhado
de tags, estilos e
formatações

24. Se o cliente pedisse
alteração você tinha
que alterar página
por página.

25. Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

26. Prazer CSS

27. nome
Define um estilo único para
um elemento: body, h1...
TÉCNICO
Parte mais
importante

28. #nome
Define um estilo único
para um identificador
#TIME
Seguem as
ordens do técnico

29. .nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.
.jogador
Joga para o
#time

30. Exemplo
body{
background: #ccc;
font: 12pt Arial, Sans-Serif;
color: #000;
}
#topo{
width: 780px;
background: #ccc url(bgtopo.jpg) repeat-x;
font-size: 20pt;
color: #ff0000;
}
.produto{
float: right;
text-align: center;
font-size: 16pt;
color: #ff0000;
}

31. PADRÃO
DE CORES

32. COR HEX
É a cor do #

33. As Fontes também
merecem atenção

34. Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New
Roman...

35. Pode-se colocar mais de
uma fonte + opção de
“Sans-serif” ou “Serif”

36. NA PRÁTICA:
Letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>

37. NA PRÁTICA:
Abre e feche os comandos corretamente!
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div><p>Aqui um <em>texto! </em></p></div>

38. NA PRÁTICA:
Feche todos os comandos
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>

39. NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:
<div id=“header”>…</div>

40. ANOTE SUAS
OBSERVAÇÕES
/* Comentário */

41. WIREFRAME

42. WIREFRAME

43. Em web design, um
wireframe ou diagrama
de wireframe é uma
representação visual em
escala de cinza da
estrutura e
funcionalidade de uma
única página web ou uma
tela de aplicativo móvel.

44. Wireframes são usados ​​no
início do processo de
desenvolvimento para
estabelecer a estrutura básica
de uma página antes de
acrescentar o design visual e
conteúdo, e podem ser
criados usando papel, em
HTML/CSS ou usando
aplicativos de software.

45. Wireframes substituem
o caráter abstrato do
mapa do site, que
normalmente é o
primeiro passo para o
desenvolvimento de
sites, com algo mais
tangível e
compreensível.

46. DIVIDINDO
UM SITE

48. #topo

49. #bemvindo

50. #login

51. #cabecalho

52. #logo

53. #box-procura

54. #menu

55. #destaque

56. #slider

57. ACESSE O SITE DA
ESAMC E FAÇA SUA
DIVISÃO
ESTRUTURAL

58. SITE, HOSPEDAGEM E
INTRODUÇÃO AO CSS
WEBDESIGN 2021 – RENATO MELO