Curso Online de Apostila de Web Designer (CSS, HTML, Photoshop, Dreamweaver)

Curso Online de Apostila de Web Designer (CSS, HTML, Photoshop, Dreamweaver)

Apostila para você criar um site completo, desde o básico até o avançado. Aprenda como programar seu html, a faze o seu Css, edição de im...

Continue lendo

Autor(a):

Carga horária: 13 horas


Por: R$ 39,90
(Pagamento único)

Mais de 10 alunos matriculados no curso.

Certificado digital Com certificado digital incluído

Apostila para você criar um site completo, desde o básico até o avançado. Aprenda como programar seu html, a faze o seu Css, edição de imagens e programas avançados como dreamweaver.

Resumidamente: aprenda a criar seu site do zero!



  • Aqui você não precisa esperar o prazo de compensação do pagamento para começar a aprender. Inicie agora mesmo e pague depois.
  • O curso é todo feito pela Internet. Assim você pode acessar de qualquer lugar, 24 horas por dia, 7 dias por semana.
  • Se não gostar do curso você tem 7 dias para solicitar (através da pagina de contato) o cancelamento ou a devolução do valor investido.*
  • Adquira certificado ou apostila impressos e receba em casa. Os certificados são impressos em papel de gramatura diferente e com marca d'água.**
* Desde que tenha acessado a no máximo 50% do material.
** Material opcional, vendido separadamente.

Modelo de certificados (imagem ilustrativa):

Frente do certificado Frente
Verso do certificado Verso
  • ÍNDICE

    HTML

    1. DEFINIÇÃO

    01

    2. CRIANDO DOCUMENTOS HTML

    03

    2.1 - ELEMENTOS BÁSICOS

    05

    2.1.1 - TÍTULOS

    05

    2.1.2 - CABEÇALHO

    06

    2.1.3 - PARÁGRAFO

    07

    2.1.4 - QUEBRA DE LINHA

    08

    2.1.5 - COMENTÁRIOS

    09

    2.1.6 - LISTA DE ELEMENTOS BÁSICOS

    09

    2.1.7 - DICAS

    10

    3. FORMATAÇÃO DE TEXTO

    11

    3.1 - DEFININDO FONTES

    11

    3.2 - ESTILO DE TEXTOS

    12

    3.3 - FORMATANDO BLOCO DE TEXTOS

    13

    3.3.1 - TAG DIV

    13

    4. CONTROLE DE CORES E GRÁFICOS DE FUNDO

    15

    4.1 - CORES E ELEMENTOS GRÁFICOS DE FUNDO

    15

    4.1.1 - BACKGROUND (IMAGEM DE FUNDO)

    15

    4.1.2 - BGCOLOR

    16

    4.2 - CORES DE LETRAS E LINKS

    18

    4.2.1 - ATRIBUTO TEXT

    18

    4.2.2 - ATRIBUTO LINK, VLINK E ALINK

    19

    5. LINKS

    21

    5.1 - ÂNCORAS

    21

    5.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS

    22

    5.3 - INTERLIGANDO URL'S

    25

    5.4 - LINKS PARA E-MAILS

    25

    6. LISTAS

    26

    6.1 - LISTAS NÃO NUMERADAS

    26

    6.2 - LISTAS NUMERADAS

    28

    6.3 - LISTA DE DEFINIÇÕES

    30

    6.4 - LISTA INTERCALADAS

    33

    7. IMAGENS

    35

    7.1 - INSERINDO IMAGENS NA PÁGINA

    36

    7.2 - DIMENSIONANDO IMAGENS

    37

    7.3 - ALINHANDO IMAGENS

    38

    7.3.1 - ALINHAMENTO EM RELAÇÃO AO NAVEGADOR

    38

    7.3.2 - ALINHAMENTO EM RELAÇÃO AO TEXTO

    39

    7.4 - OUTROS ATRIBUTOS

    40

    8.TABELAS

    42

    8.1 - MARCAÇÕES BÁSICAS

    42

    8.2 - DESENVOLVENDO UMA TABELA SIMPLES

    43

    8.3 - ATRIBUTOS DE CONTROLE DE TABELAS

    45

    8.4 - CORES E IMAGEM NA TABELA

    56

    8.4.1 - CORES NA TABELA

    56

    8.5 - IMAGEM DE FUNDO NAS TABELAS

    57

  • 9. CORES

    55

    9.1 - MATIZ, SATURAÇÃO E TONALIDADE

    55

    9.2 - SISTEMA DE REPRESENTAÇÃO DAS CORES

    55

    9.3 - PSICOLOGIA DAS CORES

    56

    10. TIPOLOGIA

    59

    10.1 - ESTILO ANTIGO

    59

    10.2 - ESTILO MODERNO

    60

    10.3 - SERIFA GROSSA

    61

    10.4 - SEM SERIFA

    62

    10.5 - MANUSCRITO

    62

    10.6 - DECORATIVO

    63

    PHOTOSHOP

    11. FERRAMENTAS DO PHOTOSHOP

    64

    11.1 - INICIANDO O PHOTOSHOP

    64

    EXERCÍCIOS PARA REVISÃO

    66

    12. VISUALIZANDO AS IMAGENS

    67

    EXERCÍCIOS PARA REVISÃO

    68

    13. SELECIONANDO E MOVENDO IMAGENS

    69

    13.1 - MARCA DE SELEÇÃO

    69

    13.2 - LAÇO

    70

    13.3 - VARINHA MÁGICA

    71

    13.4 - CORTE DEMARCADO

    73

    EXERCÍCIOS PARA REVISÃO

    73

    14. MODIFICANDO AS SELEÇÕES

    74

    14.1 - FILTROS

    75

    EXERCÍCIOS PARA REVISÃO

    76

    15. TRANSFORMANDO AS SELEÇÕES

    77

    15.1 - PINCEL

    78

    15.2 - FERRAMENTA DEGRADÊ

    78

    15.3 - CARIMBO

    80

    15.4 - DESFOQUE, NITIDEZ E BORRAR

    81

    EXERCÍCIOS PARA REVISÃO

    81

    16. FERRAMENTAS DE TEXTO

    82

    EXERCÍCIOS PARA REVISÃO

    84

    17. CRIAÇÕES DE ARQUIVOS PARA WEB

    86

    EXERCÍCIOS PARA REVISÃO

    88

    18. VOCABULÁRIO UTILIZADO NO PHOTOSHOP

    89

    19. SEJA UM BOM WEB DESIGNER

    91

  • DREAMWEAVER

    20. APRESENTANDO O DREAMWEAVER

    93

    20.1 - BARRA DE TÍTULOS

    94

    20.2 - BARRA DE MENUS

    94

    20.3 - BARRA INSERIR

    94

    20.4 - BARRA DE FERRAMENTAS DOCUMENTOS

    94

    20.5 - PAINÉIS

    95

    20.6 - GRUPOS DE PAINÉIS

    95

    20.7 - ÁREA DE DESENVOLVIMENTO

    95

    20.8 - VISUALIZAÇÃO DO DREAMWEAVER

    95

    20.9 - BARRA DE STATUS

    96

    20.1.1 - MENUS CONTEXTUAIS

    96

    EXERCÍCIOS PARA REVISÃO

    96

    21. CRIANDO UM NOVO SITE

    97

    22. INICIANDO UMA PÁGINA NO DREAMWEAVER

    98

    22.1 - CRIANDO E SALVANDO UMA NOVA PÁGINA

    98

    22.2 - CRIANDO O ARQUIVO INDEX.HTM

    98

    22.3 - DEFININDO AS PROPRIEDADES DA PÁGINA

    99

    22.4 - INSERINDO TABELAS

    100

    22.5 - MAPEAMENTO DE IMAGENS

    101

    EXERCÍCIOS PARA REVISÃO

    102

    23. LINKS E NAVEGAÇÃO

    103

    23.1 - LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS

    103

    23.2 - TESTANDO A PÁGINA

    105

    EXERCÍCIOS PARA REVISÃO

    106

    24. FORMULÁRIOS

    107

    25. DICAS PARA A CRIAÇÃO DE UM SITE

    110

    25.1 - DEFINIR O CONTEÚDO, O QUE SERÁ DIVULGADO NO SITE

    110

    25.2 - ESTABELECER OBJETIVOS

    110

    25.3 - DIVIDA SEUS CONTEÚDOS EM TÓPICOS

    111

    25.4 - QUAIS AS QUESTÕES QUE DEVO LEVANTAR COM RELAÇÃO

    À ORGANIZAÇÃO E NAVEGAÇÃO DE UM SITE?

    111

    25.5 - Próxima etapa do planejamento

    111

  • 1

    . DEFINIÇÃO

    Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo .doc (formato Word) para HTML.

    A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.

    Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria e seguem algumas regras:

    As TAGs aparecem sempre entre os sinais de “menor que” ();

    Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).

    A maioria das etiquetas tem a sua correspondente de fechamento:

    De um modo geral, as tags aparecem em pares, por exemplo:

    Cabecalho

    Onde:

    A tag

    indica o início na instrução;

    O texto Cabeçalho indica o texto que será formatado; E a tag

    indica o final da instrução.

    O símbolo que termina uma determinada etiqueta é igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.

    As etiquetas são necessárias, pois servem para definir a formatação de um bloco de texto, e assim marcamos onde começa e termina o texto com a formatação especifica por ela.

    ____________________________________________________________ Página - 1 -

  • IDEPAC - Instituto de Desenvolvimento Profissional Amigos

    Contabilistas, Empresários, Profissionais Liberais e Informática

    Há excessões para a utilização dos pares de etiquetas. Por exemplo, a que indica um final de um parágrafo:

    não necessita de uma correspondente

    para terminar a formatação do bloco de texto. A etiqueta que indica quebra de linha
    também não precisa de etiqueta correspondente, entre outras.

    ____________________________________________________________ Página - 2 -

  • 2

    . CRIANDO DOCUMENTOS HTML

    Todo documento HTML precisa conter certas tags padronizadas, no mínimo , , e , pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).

    Curso de WebDesign

    Este é o primeiro nível de cabeçalho.

    Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

    Este é o segundo paragráfo

    A tag contém, entre outras coisas, o (título), e a tag armazena

    todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc.

    Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam informações em acordo com as especificações HTML.

    Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).

    ____________________________________________________________ Página - 3 -

  • 1.1 Modelo de arquivo HTML

    Explicação:

    A primeira TAG que encontramos no documento é . Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags e .

    O texto contido ente as TAG e define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.

    A tag define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign.

    A tag informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags e .

    ____________________________________________________________ Página - 4 -

  • 2.1 ELEMENTOS BÁSICOS

    2.1.1 TÍTULOS

    Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.

    As tag utilizadas para títulos são: e .

    Este é o título

    E este o cabeçalho de nível 2

    Aqui entra o texto do documento ...

    Fígura2.1 Modelo de título

    2.1.2 CABEÇALHO

    Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.

    Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada como

    .

    ____________________________________________________________ Página - 5 -

  • COMANDO:

    Texto do Cabeçalho

    Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do

    cabeçalho.

    COMANDO:

    Cabeçalho nível 1

    Cabeçalho nível 2

    Cabeçalho nível 3

    Cabeçalho nível 4

    Cabeçalho nível 5
    Cabeçalho nível 5

    Fígura 2.1 Modelo de Cabeçalhos

    ____________________________________________________________ Página - 6 -

  • 2.1.3 PARÁGRAFO

    A tag

    é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag

    também é responsável pelo alinhamento dos parágrafos. O alinhamento pode ser:

    LEFT : Parágrafo alinhado a esquerda. CENTER: Parágrafo alinhado ao centro. RIGHT: Parágrado alinhado a direita. JUSTIFY : Parágrafo justificado.

    Alinhamento de parágrafos

    Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).

    Este parágrafo utiliza o alinhamento centralizado

    Este parágrado utiliza o alinhamento à direita.

    Fígura 2.2 Modelo de alinhamento de parágrafos

    ____________________________________________________________ Página - 7 -

  • 2.1.4 QUEBRA DE LINHA

    A tag
    é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag
    , ou “line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas. Veja a diferença entre o uso da tag

    e da tag
    :

    MODELO I

    Utilizando a tag p

    Vamos separar esta linha com a marcação de paragráfo.

    Para verificar a diferença.

    MODELO II

    Utilizando a tag br

    Diferença quando separamos duas linhas utilizando
    a marcação de quebra de linha

    Diferença quando separamos duas linhas utilizando
    a marcação de quebra de linha

    Verificou a diferença?

    Fígura 2.3 Modelos de quebra de linha

    ____________________________________________________________ Página - 8 -


Matricule-se agora mesmo Preenchendo os campos abaixo
R$ 39,90
Pagamento único
Processando... Processando...aguarde...

Desejo receber novidades e promoções no meu e-mail:


  • HTML
  • 1. DEFINIÇÃO
  • 2. CRIANDO DOCUMENTOS HTML
  • 2.1 - ELEMENTOS BÁSICOS
  • 2.1.1 - TÍTULOS
  • 2.1.2 - CABEÇALHO
  • 2.1.3 - PARÁGRAFO
  • 2.1.4 - QUEBRA DE LINHA
  • 2.1.5 - COMENTÁRIOS
  • 2.1.6 - LISTA DE ELEMENTOS BÁSICOS
  • 2.1.7 - DICAS
  • 3. FORMATAÇÃO DE TEXTO
  • 3.1 - DEFININDO FONTES
  • 3.2 - ESTILO DE TEXTOS
  • 3.3 - FORMATANDO BLOCO DE TEXTOS
  • 3.3.1 - TAG DIV
  • 4. CONTROLE DE CORES E GRÁFICOS DE FUNDO
  • 4.1 - CORES E ELEMENTOS GRÁFICOS DE FUNDO
  • 4.1.1 - BACKGROUND (IMAGEM DE FUNDO)
  • 4.1.2 - BGCOLOR
  • 4.2 - CORES DE LETRAS E LINKS
  • 4.2.1 - ATRIBUTO TEXT
  • 4.2.2 - ATRIBUTO LINK, VLINK E ALINK
  • 5. LINKS
  • 5.1 - ÂNCORAS
  • 5.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS
  • 5.3 - INTERLIGANDO URL'S
  • 5.4 - LINKS PARA E-MAILS
  • 6. LISTAS
  • 6.1 - LISTAS NÃO NUMERADAS
  • 6.2 - LISTAS NUMERADAS
  • 6.3 - LISTA DE DEFINIÇÕES
  • 6.4 - LISTA INTERCALADAS
  • 7. IMAGENS
  • 7.1 - INSERINDO IMAGENS NA PÁGINA
  • 7.2 - DIMENSIONANDO IMAGENS
  • 7.3 - ALINHANDO IMAGENS
  • 7.3.1 - ALINHAMENTO EM RELAÇÃO AO NAVEGADOR
  • 7.3.2 - ALINHAMENTO EM RELAÇÃO AO TEXTO
  • 7.4 - OUTROS ATRIBUTOS
  • 8.TABELAS
  • 8.1 - MARCAÇÕES BÁSICAS
  • 8.2 - DESENVOLVENDO UMA TABELA SIMPLES
  • 8.3 - ATRIBUTOS DE CONTROLE DE TABELAS
  • 8.4 - CORES E IMAGEM NA TABELA
  • 8.4.1 - CORES NA TABELA
  • 8.5 - IMAGEM DE FUNDO NAS TABELAS
  • 9. CORES
  • 9.1 - MATIZ, SATURAÇÃO E TONALIDADE
  • 9.2 - SISTEMA DE REPRESENTAÇÃO DAS CORES
  • 9.3 - PSICOLOGIA DAS CORES
  • 10. TIPOLOGIA
  • 10.1 - ESTILO ANTIGO
  • 10.2 - ESTILO MODERNO
  • 10.3 - SERIFA GROSSA
  • 10.4 - SEM SERIFA
  • 10.5 ? MANUSCRITO
  • 10.6 ? DECORATIVO
  • PHOTOSHOP
  • 11. FERRAMENTAS DO PHOTOSHOP
  • 11.1 ? INICIANDO O PHOTOSHOP
  • EXERCÍCIOS PARA REVISÃO
  • 12. VISUALIZANDO AS IMAGENS
  • EXERCÍCIOS PARA REVISÃO
  • 13. SELECIONANDO E MOVENDO IMAGENS
  • 13.1 ? MARCA DE SELEÇÃO
  • 13.2 ? LAÇO
  • 13.3 ? VARINHA MÁGICA
  • 13.4 ? CORTE DEMARCADO
  • EXERCÍCIOS PARA REVISÃO
  • 14. MODIFICANDO AS SELEÇÕES
  • 14.1 ? FILTROS
  • EXERCÍCIOS PARA REVISÃO
  • 15. TRANSFORMANDO AS SELEÇÕES
  • 15.1 ? PINCEL
  • 15.2 ? FERRAMENTA DEGRADÊ
  • 15.3 ? CARIMBO
  • 15.4 ? DESFOQUE, NITIDEZ E BORRAR
  • EXERCÍCIOS PARA REVISÃO
  • 16. FERRAMENTAS DE TEXTO
  • EXERCÍCIOS PARA REVISÃO
  • 17. CRIAÇÕES DE ARQUIVOS PARA WEB
  • EXERCÍCIOS PARA REVISÃO
  • 18. VOCABULÁRIO UTILIZADO NO PHOTOSHOP
  • 19. SEJA UM BOM WEB DESIGNER
  • DREAMWEAVER
  • 20. APRESENTANDO O DREAMWEAVER
  • 20.1 ? BARRA DE TÍTULOS
  • 20.2 ? BARRA DE MENUS
  • 20.3 ? BARRA INSERIR
  • 20.4 ? BARRA DE FERRAMENTAS DOCUMENTOS
  • 20.5 ? PAINÉIS
  • 20.6 ? GRUPOS DE PAINÉIS
  • 20.7 ? ÁREA DE DESENVOLVIMENTO
  • 20.8 ? VISUALIZAÇÃO DO DREAMWEAVER
  • 20.9 ? BARRA DE STATUS
  • 20.1.1 ? MENUS CONTEXTUAIS
  • EXERCÍCIOS PARA REVISÃO
  • 21. CRIANDO UM NOVO SITE
  • 22. INICIANDO UMA PÁGINA NO DREAMWEAVER
  • 22.1 ? CRIANDO E SALVANDO UMA NOVA PÁGINA
  • 22.2 ? CRIANDO O ARQUIVO INDEX.HTM
  • 22.3 ? DEFININDO AS PROPRIEDADES DA PÁGINA
  • 22.4 ? INSERINDO TABELAS
  • 22.5 ? MAPEAMENTO DE IMAGENS
  • EXERCÍCIOS PARA REVISÃO
  • 23. LINKS E NAVEGAÇÃO
  • 23.1 ? LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS
  • 23.2 ? TESTANDO A PÁGINA
  • EXERCÍCIOS PARA REVISÃO
  • 24. FORMULÁRIOS
  • 25. DICAS PARA A CRIAÇÃO DE UM SITE
  • 25.1 ? DEFINIR O CONTEÚDO, O QUE SERÁ DIVULGADO NO SITE
  • 25.2 ? ESTABELECER OBJETIVOS
  • 25.3 ? DIVIDA SEUS CONTEÚDOS EM TÓPICOS
  • 25.4 ? QUAIS AS QUESTÕES QUE DEVO LEVANTAR COM RELAÇÃO
  • À ORGANIZAÇÃO E NAVEGAÇÃO DE UM SITE?
  • 25.5 ? Próxima etapa do planejamen