Você está na página 1de 13

PlanodeAula07HTML/CSS/Dreamveaver

OBJETIVOS ESPECFICOS Introduo ao HTML, dando ao aluno a noo bsica de alguns elementos de formatao de pgina e caracteres.
Aula1

METODOLOGIA

CONTEDO PROGRAMTICO Introduo ao HTML;


O que so TAGs; TAG nico; TAG duplo; Onde construir a pgina? Estrutura bsica de uma pgina(Tags Bsicas): <HTML/><HEAD/><TITLE/><BODY/> ; Corpo do texto(<BODY>);

H/A

Exposio pelo instrutor das principais TAGS e ao mesmo tempo, incentivar o aluno a realizar o mesmo, vendo o que acontece. Ao final da aula desenvolver uma atividade prtica
Aplicao de Vdeo Aula e Exerccios Prticos. Exercite com os Alunos a criao de suas primeiras pginas Html, desde como salvar e executar no navegador at o uso das <tag> estudadas acima: Crie com os alunos uma pgina que contenha o Hino Nacional, separando o Hino em primeira e segunda parte.

bgcolor= cor(Cor de fundo); background =figura.extenso(imagem de fundo);

Ttulos: <Hn></Hn>; Fonte : <FONT></FONT>: size=n(Tamanho da fonte); face=nome(Nome da fonte); color=cor(cor da fonte Hexadecimal
ou predefinidos); Outras: <CENTER> ; Estilos de Texto:<B/>, <I/>, <U/>, <SUB/>, <SUP/>; Pargrafo: <P align=xxx></P>): Align: left, right, center, justify;

04

Aplicao de Vdeo Aula e Exerccios Prticos.

OBJETIVOS ESPECFICOS Trabalhar com caracteres especiais, letras acentuadas, linhas horizontais e imagens.
Aula2

METODOLOGIA

CONTEDO PROGRAMTICO Quebra de linha: <BR>;


Linhas horizontais:<HR>;

H/A

Nesta aula o aluno aprender sobre quebras de linhas, linhas horizontais, caracteres especiais e manipular imagens. O contedo dever ser fixado atravs de uma atividade prtica. Aplicao de Vdeo Aula e Exerccios Prticos. Continuao do exerccio anterior aplicando na pgina Html a imagem da bandeira do Brasil no plano de fundo e como imagem solta junto com o texto do Hino, fazendo utilidade tambm dos cdigos de caracteres especiais.

size: n(Espessura da linha); width:( Largura da linha pode ser dado em pixel ou em porcentagem); align:posio( Alinhamentos: left, right, center ); color:cor(Cor da linha); no shade(Linha sem sombra); Caracteres Especiais e Acentos: - &aacute; - &ecirc; - &otilde; - &uuml; - &Ccedil; - &reg; - &copy; & - &amp; Imagens: <IMG>: width=n(Largura da imagem) height=n(Altura da imagem) align:=posio(Alinhamento da imagem) alt=texto(Texto que aparece quando passa o texto na imagem) border=n(borda da imagem) vspace=n(espao acima e abaixo da figura) hspace=n(espao a esquerda e a direita da imagem)
Aplicao de Vdeo Aula e Exerccios Prticos.

04

OBJETIVOS ESPECFICOS Falar e praticar sobre hiperlinks e listas.


Aula3

METODOLOGIA

CONTEDO PROGRAMTICO Hiperlinks: <A/> Links internos Mesmo diretrio: <A HREF=nomedoarquivo.extenso> texto ou imagem</a>
Outro diretrio: <A HREF=pasta/nomedoarquivo.extenso > texto ou imagem</a> Links externos: Para uma pgina WEB; ncoras:

H/A

Demonstrao e prtica de criao de hiperlinks noes de listas. Exerccio prtico ligando pginas atravs de links, e criando ancoras dentro de uma nica pgina.

Aplicao de Vdeo Aula e Exerccios Prticos. Criar com os alunos vrias pginas html para teste de links(idia: cirar uma pgina com o Hino Nacional e outra pgina com a Bandeira ambas sero interligadas por links). Criar uma pgina Html contendo uma lista de qualquer natureza e associar tambm com um link pgina Hino.

<A NAME=aqui> texto</a> <A HREF=#aqui> texto</a>

Links de email; Conceito de listas Listas Ordenadas(numeradas):


Listas

type=formato:

<OL><LI></OL> 1: lista numrica; A: lista alfabtica I: lista numrica(nmero romano); start=n (valor inicial da lista);

04

No-ordenadas: <UL><LI></UL> type=formato: disc, square,circle.

Aplicao de Vdeo Aula e Exerccios Prticos.

OBJETIVOS ESPECFICOS Criar tabelas.


Aula4

METODOLOGIA

CONTEDO PROGRAMTICO
Tabelas: <TABLE/> Titulo da tabela<CAPTION/> Clulas de cabealho da tabela: <TH/>; <TR/><TD/> Atributos das tabelas:

H/A

Montagens de tabelas e uso de atributos dentro das tags, praticando para fixar o contedo.

Aplicao de Vdeo Aula e Exerccios Prticos. Criao de um Boletim conteudo 3 colunas notas e 1 mdia e uma coluna com o nome dos alunos em sala de aula.

border=n(Borda da tabela); align=parametro(Alinhamento horizontal); valign=paranmetro(Alinhamento vertical); cellspacing=n( distancia entre clulas e linhas ); cellpadding=n( espao entre o contedo e a borda ); rowspan=n( Quantas linhas uma clula pode abranger ); colspan=n(Quantas colunas uma clula pode abranger); width=n(Largura da clula); height=n(Altura da clula); bgcolor=cor(cor de fundo da clula)

04

Aplicao de Vdeo Aula e Exerccios Prticos.

OBJETIVOS ESPECFICOS Criar e Estudar a aplicao de Formulrios.


Aula5

METODOLOGIA

CONTEDO PROGRAMTICO Formulrios: <FORM>; Atributos GET, POST: Consulta e postagem de informao <INPUT>: especifica uma variedade dde campos editveis:
1.1.1 Name=nome(Nome do campo); 1.1.2 type=tipo(Tipo do campo de entrada); 1.1.3 text, radio, password, checkbox, submit,reset;

H/A

Desenvolvendo formulrios de diversos tipos para as ocasies mais indicadas. Entendendo tambm os atributos de consulta e enviou de informaes.

TEXTAREA; SELECT;
Aplicao de Vdeo Aula e Exerccios Prticos. Criar um formulrio que represente um cadastro completo do aluno como se estivesse elaborando um curriculo: Nome, Idade, data de nascimento, Endereo, N, Bairro, Cidade, UF, CEP, Cursos, Escolaridade, Esperincias Profissionais.

Aplicao de Vdeo Aula e Exerccios Prticos.

04

OBJETIVOS ESPECFICOS Desenvolver pginas com Frames.


Aula6

METODOLOGIA

CONTEDO PROGRAMTICO Frames ou Molduras: Estrutura: Substituio do <BODY/> por <FRAMESET/>; <FRAMESET>: ROWS=n e COLS=n(Especifica o nmeros de frames em linhas e colunas e seu respectivo tamanho); <FRAME> src=pagina; name=xxx( nome para ser chamado pelo target ); scrolling=;( rolagem: YES ou NO ) noresize(impossibilita de mudar o tamanho do frame); target=( define qual frame aparecer o documento especificado ); border=( borda dos frames );
Aplicao de Vdeo Aula e Exerccios Prticos.

H/A

Estudos e exerccios prticos elaborando pginas usando frames e contendo elementos estudados at agora.

Aplicao de Vdeo Aula e Exerccios Prticos. Criar documentos Html e 1 que os junte em Frames. Um Frame Menu e um Frame conteudo principal. Juntar nesse exerccio todos os exerccios j feitos.

04

OBJETIVOS ESPECFICOS Introduzir o Dreamweaver. Estudar aplicaes com textos links e imagens.
Aula7

METODOLOGIA
rea

CONTEDO PROGRAMTICO
Introduo:

H/A

Atravsdoquadrobrancoe computadores,mostrarepraticar desenvolvendodepequenoswebsites juntocomosalunoscolocandoemenfase osprimeirosconceitosdoDreamweavere tambmprticasqueajudemoalunoa trabalharcominserodetextosesuas formataeseatrabalharcomlinkse imagens.

de Trabalho; e Configurando um Site: Criando, Abrindo e Salvando Documentos; Definindo as Propriedades de um Documento; Como inserir e formatar texto em documento; Ajustando fontes, estilos, cores e alinhamento Inserindo caracteres especiais Criando listas Trabalhando com cores Aplicando cores; hiperlinks : Localizao de Documentos; Criando hiperlinks; Criando Links de Correio Eletrnico; Criando ncoras Nomeadas; Criando links para download Adicionando imagens criando mapas de imagens imagens cambiveis (rollover) Alocando espao para imagem
Planejando

04

OBJETIVOS ESPECFICOS Estudar aplicaes com Tabelas, Formulrios e Camadas.


Aula8

METODOLOGIA

CONTEDO PROGRAMTICO
Criando Como

C/A

Atividadesprticasqueajudemoalunoa trabalhartabelas,formulriosecamadas. Desenvolverumapginawebcomtodos essesrecursosmencionados.

e modificando tabelas inserir uma tabela Modificando a tabela Mesclar e dividir clula Como dividir a clula e como mesclar as clulas Alterar a altura da linha e largura da coluna Adicionar cor a uma tabela Criao de formulrios interativos Como criar um formulrio Como compreender os objetos de formulrio Utilizao dos campos de formulrio Trabalhando com camadas; Criando camadas; Configurando as caractersticas padro de uma camada; Modificando uma camada; Selecionando uma Camadas; Redimensionando uma camada; Movendo uma camada; Cor de funda, cor da camada; Aninhando camadas;

04

OBJETIVOS ESPECFICOS Introduzir o CSS. Trabalhar com Links em CSS.


Aula9

METODOLOGIA

CONTEDO PROGRAMTICO
CSS Folhas de Estilo em Cascata: O que CSS; O que um folha de estilo; Para que serve uma folha de estilo ( Separar apresentao da estrutura; Controle da aparncia da pgina; pginas leves; Manuteno de um grande Site ); Regras, declaraes, seletores e valores; seletor { declarao: valor; } Regra Mltiplas Declaraes e Seletores; Instrues(@) e comentrios(/* */); Como criar estilos; Tipos de folha de estilo(Externo, Incorporado, Inline); Incluindo estilos em uma pgina;

H/A

O aluno ir aprender os conceitos iniciais sobre o CSS para a implementao da pgina HTML e as formas e locais de como e usamos CSS. Aplicao de Vdeo Aula e Exerccios Prticos. Praticar com os Alunos criando uma pgina Html e aplicando o css dentro deste arquivo html e tambm criando um arquivo css separado.

04

<STYLE TYPE=text/css></STYLE>

<LINK REL=STYLESHEET HREF=arquivo.css TYPE=text/css>

1 2 Aplicao de Vdeo Aula e Exerccios Prticos.

Trabalhar com blocos no CSS.

Aula10

O aluno ir aprender ao final desta aula como trabalhar em bloco com as Tags <DIV> e <SPAM>, e como trabalhar identificando blocos usando Classe ou ID. Aplicao de Vdeo Aula e Exerccios Prticos. Crie uma pgina conteudo textos de assuntos diferente, cada bloco de texto coloque em DIVs diferente, e para cada um aplique uma formatao css externa, ou seja, fora do arquivo html, diferente em cada Div, usando como referencia ID e Class.

<DIV>( Define um bloco ou seo de pgina) <SPAM>(Usado dentro de blocos de textos); Class e ID's (Onde se tem uma mesma TAG, por exemplo pargrafo, que tem vrios tipos diferentes, preciso usar este recurso): <div ID=w123>texto</P> / #w123 {color: cyan}

<div class=teste> / P.teste {color: red}

04

OBJETIVOS ESPECFICOS Trabalhar com atributos de texto e de blocos.

METODOLOGIA
Aula11

CONTEDO PROGRAMTICO Fontes: font-family(tipo de fonte); font-size(Tamanho da fonte); font-style(estilo da fonte); font-weight( peso da fonte ); Atributos de texto: text-decoration(atributos como sublinhado); text-align e vertical-align( permitem respectivamente o alinhamento horizontal e vertical); line-height( usado para controlar os espaos entre os textos); letter-spacing(altera os espaos entre as linhas); wight e height: altura e largura(aplicado na <div>); Cores: color; background-color; backgroundimage(aplicado na div);
Aplicao de Vdeo Aula e Exerccios Prticos.

H/A

Trabalhar com atividades prticas onde o aluno pratique a aplicao de atributos nos texto e no bloco em si, usando Css.
Aplicao de Vdeo Aula e Exerccios Prticos. Crie uma pgina html e um arquivo css, e obtenha no final uma pgina web com um texto. Neste texto dever estar aplicado formataes de fontes dentro das Divs e Spans.

04

Trabalhar com Bordas e Links no CSS.

Aula12

O Aluno aprender como aplicar bordas aos blocos(Tags <div> e <spam>) e a alterar os atributos dos links usando Css.
Aplicao de Vdeo Aula e Exerccios Prticos. Crie uma pgina Web com um texto bem grande. Separe esse texto em vrias Divs ou Span, e formate as bordas de vrias maneiras diferentes.

Bordas na DIV: border-width: espesura da borda (border top-width; border -bottom-width; border -left-width; border -right-width; ) border-color: cor a borda (border topcolor; border -bottom- color; border -leftcolor; border -right- color; ) border-style: estilo da borda (border topstyle; border -bottom- style; border -leftstyle; border -right- style; ) border: agrupa os estilos de cor, estilo espessura(border top; border -bottom; border -left; border -right;) Links (Pseudo classes e pseudo-elementos) A:link (); A; active(); A:visited(); A:hover()
Aplicao de Vdeo Aula e Exerccios Prticos.

04

OBJETIVOS ESPECFICOS Estudar Posicionamento com Css.

METODOLOGIA
Aula13

CONTEDO PROGRAMTICO
Posicionamento: refere-se ao posicionamento dos objetos HTML, que ser utilizados pela TAG <DIV>; position: posicionamento(absolute ou relative); top (define o Y); left (define o X); float: permite que o texto seja posicionado a esquerda ou a direita do navegador clear margin: define as margens externas do bloco( margin-top; margin-bottom; margin-left; margin-right; ) padding: define as margens internas do bloco(padding -top; padding -bottom; padding -left; padding -right;) Aplicao de Vdeo Aula e Exerccios Prticos.

H/A

Atividades prticas que ajudem o aluno a trabalhar com posicionamento de blocos inteiros de html com css.
Aplicao de Vdeo Aula e Exerccios Prticos. Crie uma pgina que contenha texto e imagem ambos separados por Div, e posicione de maneiras diferente esse conteudo na pgina usando os atributos estudados acima.

04

OBJETIVOS ESPECFICOS Estudar Overflow e seus atributos. Revisar todo o Css.

METODOLOGIA
Aula14

CONTEDO PROGRAMTICO Overflow: auto; scroll; hidden; visible; REVISO;


Aplicao de Vdeo Aula e Exerccios Prticos.

H/A

Atividades prticas que ajudem o aluno a trabalhar com overflow e seus tipos e reviso de todo o contedo dado de Css, aplicando os itens aprendidos.
Aplicao de Vdeo Aula e Exerccios Prticos. Crie um pgina que contenha um texto maior que a Div que o enquadra. Pratique o atributo overflow nessas Divs. Crie um pequeno site utilizando todos os recursos estudados at o momento de css, formatando fonte e trabalhando com posicionamentos.(idia para criar pginas: Notcias do Meu Bairro; Jornal da Escola; Turismo da Cidade; Projeto e-Jovem na Escola)

04

Você também pode gostar