CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana São Paulo. Fone: Site:

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamanho: px
Começar a partir da página:

Download "CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com."

Transcrição

1

2 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo clássico e o modelo fundo fixo? A Ordem das Divs e alguns atributos A tag Body A Div Geral A Div Cabeçalho e seus atributos A Div Menu e seus atributos A Div Menu_Centraliza e seus atributos A Div Conteúdo e seus atributos A Div Conteúdo_Centraliza e seus atributos Alterando as cores do Menu Principal Alterando as cores do Titulo do Submenu e das opções do Submenu (barra lateral) Alterando as cores do Submenu na pagina Index Alterando as cores no corpo da pagina do Titulo, Subtítulo, Corpo e Rodapé Veja onde cada imagem esta alocada e seu comportamento...11 a. Legenda de Imagens geradas por cada parte (Modelos Classico) Veja onde cada imagem esta alocada e seu comportamento...13 a. Legenda de Imagens geradas por cada parte (Modelos Fundo Fixo)...14

3 4 de Mapa CSS e legenda das principais imagens que compõe as paginas dos modelos clássico e Fundo Fixo a. Conhecimentos desejáveis: Para melhor compreensão descrevemos abaixo algumas ferramentas que podem facilitar o desenvolvimento das imagens, no entanto o usuário está livre para utilizar a ferramenta que melhor se adapta as suas necessidades. Photoshop CS2 ou superior: Intermediário; XHTML/CSS: Básico; Dreamweaver ou editor semelhante: Básico; Não há necessidade de qualquer tipo de edição nos arquivos HTML presentes nos modelos, é desejável conhecimento em alguma ferramenta de edição, apenas a nível de aprendizagem, pois, ao abrir alguns dos arquivos HTML presentes nos modelos, através de um editor, é possível ter uma maior compreensão de como é formada a estrutura do site. b. Modelos Clássico e Fundo Fixo: Modelo clássico: tem como característica o modelo convencional encontrando na maioria dos sites, é composto pelo cabeçalho, barra de menu e corpo, ao adicionar conteúdo essa barra de menu e o corpo esticam replicando a imagem já existente dentro das tabelas que compõe o menu e o corpo. Modelo fundo fixo: tem como característica uma imagem fixa como background, ao adicionar conteúdo e as tabelas que compõe a pagina esticarem, a imagem ao fundo continuara sempre na mesma posição permitindo que apenas a tabela role sobre o background, para a skin funcionar adequadamente, é necessário gerar essas imagens mesmo que transparentes no caso de uma imagem opaca como background, caso esta imagem tenha cores vivas, será necessário criar as demais imagens semi transparentes (opacidade 80%). c. Para o designer o que muda entre o modelo clássico e o modelo fundo fixo? Para o designer iniciante, será mais fácil trabalhar com o layout fundo fixo, pois as imagens abaixo do cabeçalho e Menu principal, devem ser transparentes ou opacas (branco com opacidade em 80%) (salve os recortes do modelo com a extensão.png-24) desta forma só precisara criar o Cabeçalho, Menu e Background (estes devem estaro em.jpg, estas nunca serão transparentes). Já o Modelo Clássico será necessário uma compreensão maior sobre cada imagem, onde cada uma esta alocada, como devem se comportar, mais abaixo iremos abordar esta questão e indicar onde esta as principais imagens e como se comportam.

4 5 de 13 Mapa da estrutura XHTML / CSS do Portal Div ID = "geral" Div ID = "cabecalho" Div ID = "cabecalho_centraliza" Div ID = "menu" Div ID = "menu_centraliza" Div ID = "menu2" Div ID = "conteudo" Div ID = "conteudo_centraliza" A imagem acima ilustra como o esqueleto (estrutura) funciona, existe a div mestre (geral) que abrigará 3 estruturas, que são (cabecalho, menu, e conteudo ), que por sua vez irão conter dentro de si outra div, esta, responsável pela disposição em que o site irá aparecer (à esquerda ou centralizado), Foi feito esta separação a fim de facilitar, caso houvesse a necessidade de remover a barra de Menu bastaria excluir ou ocultar a div Menu, trabalhar partes da pagina de forma independente facilita na construção do portal, no manuseio do código, e principalmente para o designer que não tem que gerar muitas imagens para compor o site, abaixo falaremos mais sobre as DIVS e a importância de cada uma: CONHEÇA UM POUCO SOBRE CSS DA ESTRUTURA 2. A Ordem das Divs e alguns atributos... É muito importante que não se altere a ordem das divs, no caso de fazer tal alteração seria obrigatório o uso do atributo (position: absolute;) e seria difícil manipular a pagina quando ela precisasse esticar pra se adequar as informações. Por default, o CSS interpreta o atributo position como relative isso da melhor flexibilidade, pra manipular o código de forma que fique igual em todos os browsers, e não obriga o desenvolvedor a declarar as coordenadas dos atributos (top e left) o uso do atributo position:absolute: implica em vários outros atributos (top, left e zindex que funciona apenas com o absolute). sendo esses os principais relacionados, isso porque utilizando o absolute é obrigatório determinar a distancia do topo e esquerda da pagina, exemplo: a div cabeçalho tem height:231px, então o desenvolvedor terá que determinar na div menu que seria a próxima div, o atributo top:231px; e as divs não poderiam ter o atributo height:auto para esticar, porque elas passariam por cima da div seguinte, que já tem uma distancia determinada pelo atributo top, então isso torna a troca de ordem das divs inviável. 3. A tag Body Esta tag define atributos na pagina, desde que não haja um atributo para alguma parte do site, então esta área onde não foi definidos os atributos, irá assumir os atributos que são colocados na tag body. Porém, esta tem outras funções, sendo uma delas muito útil, ela ira abrigar o back_conteudo (imagem que caracteriza o background do site) Você pode estar se perguntando Porque colocar esta imagem no body e não na div back_conteudo?, a resposta é muito simples, por uma questão estética, colocando esta imagem na tag body, desde que a imagem seja grande o suficiente para cobrir todos os monitores por mais que a resolução seja alta. Isso

5 6 de 13 permite que mesmo que o cliente tenha pouco conteúdo, o fundo ficara sempre coberto por alguma imagem e não aquele fundo branco ou preto... body{ /* background:url(back_conteudo.jpg) no-repeat fixed center top;*/ /*Se seu modelo for o de Fundo fixo Habilite esta tag */ font-size:12px; color:#000000; 4. A Div Geral A div geral é opcional o uso dela fica a critério do Designer / Desenvolvedor, isso porque nesta estrutura foi usada 1 Div para abrigar cada parte do site, por exemplo, a div cabeçalho abriga a div cabecalho_centraliza, desta forma a div cabeçalho ficara responsável pelo papel da div geral e as mesmas utilizam a propriedade "width:100%" (horizontal) e "height:auto" (vertical) portanto elas já se adequarão a toda a resolução que estiver disponível no monitor do usuário, se não houvesse essas divs o uso da div geral seria obrigatório, uma vez que seria esta, à determinar o espaço que o site poderá ocupar. No caso da estrutura acima o uso da div geral se restringe apenas a uma melhor organização do código. #geral { width:100%; 5. A Div Cabeçalho e seus atributos... Esta div é responsável por abrigar todo o conteúdo do cabeçalho, isso incluí o background do cabeçalho (layout clássico), a imagem que fica atrás da pagina, a div cabeçalho não determina as dimensões da pagina, ela determina o máxima de resolução que a imagem do site terá, geralmente 1440px a 1600px, por default, esta em 100% isso porque neste caso não é necessário o atributo margin:0 auto; para centralizar a pagina, bastando acrescentar na linha do atributo background:url (nome_da_imagem.jpg) os atributos top, bottom ou fixed, fazem sua função e também centralizam a imagem; No caso da imagem não precisar se replicar infinitamente ou se ela for uma imagem que ao replicar fique com falhas o que é muito comum, pode-se adicionar o atributo no-repeat, desta maneira ficaria assim conforme o exemplo: #cabecalho { background:url(back_cabecalho.jpg) top no-repeat; width:100%; A Div Cabeçalho_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe o cabeçalho e é responsável por determinar a resolução real da pagina, exemplo 800x600, 1024x768 e 1440x900, por default a pagina sempre é feita se baseando na maioria dos usuários, que tem seus monitores com resolução de 1024x, para estes, é usado o atributo width com 1003px (1024px), no caso de criar imagens maiores que 1003px vai gerar uma barra horizontal no browser e a leitura do site se tornará cansativa. Para centralizar a div é necessário o atributo margin:0 auto, uma vez que esta div não ira trazer nenhuma imagem; ele fará a div ficar centralizada dentro da div pai (cabeçalho) height sempre com o atributo auto desta forma a div ira se adaptar ao tamanho da imagem que for colocada no cabeçalho. #cabecalho_centraliza { width:1003px; margin:0 auto;

6 7 de A Div Menu e seus atributos... Esta div é responsável por abrigar o conteúdo do Menu principal, que são as divs menu_centraliza e menu2 (acabamento da barra de menu principal); Note que no atributo background tem o atributo repeat-y no caso desta barra, não queremos que ela replique na horizontal, ela deve replicar apenas na vertical. Outro fator importante é a imagem que compõe a barra de menu, esta deve conter uma cor sólida, sem imagens elaboradas, isso porque ela ira se replicar na eventualidade do cliente ter muito conteúdo e muitas opções no menu, necessitara de uma segunda ou terceira linha no menu, isso irá criar uma falha na repetição da imagem e o aspecto do site não ficara bonito. #menu { background:url(back_menu.jpg) top repeat-y; width:100%; 7. A Div Menu_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe Menu do site, a esta emprega-se as mesmas regras vistas anteriormente na div cabeçalho_centraliza. #menu_centraliza { width:1003px; margin: 0 auto; 8. A Div Conteúdo e seus atributos... Esta abrigara a div conteúdo_centraliza, bem como todo o conteúdo da pagina, a esta se emprega as mesmas regras e atributos utilizados na div cabeçalho, porém com alguns diferenciais que também podem ser utilizados para outras divs, por exemplo, no conteúdo é bem comum o background ter que replicar, e por default ele sempre ira replicar para direita e para baixo, porem isso pode ser controlado, para esticar somente para baixo (repeat-y, repete apenas na vertical) e para replicar somente para direita (repeat-x, replica apenas na horizontal), Caso queira esticar a tabela do conteúdo, mas não quer que a imagem se replique para baixo, muito comum quando se trata de imagens em degrade, neste caso deve-se colocar o atributo no-repeat e colocar na tabela o código hexadecimal da cor final do degrade, ai quando acabar o degrade ele vai continuar naquela cor sólida no final do degrade dando assim continuidade a imagem. (isso não se aplica ao nosso sistema, já que o designer não terá acesso as paginas que compõe o sistema, ficando livre pra se dedicar apenas as imagens, estas dicas são apenas a nível de aprendizagem.) Caso queira manter o background fixado e deixar que a tabela role sobre o background basta colocar os atributos no background no-repeat fixed center top, na tag do #body e remover da tag #conteudo. As tabelas dentro da div conteúdo_centraliza, devem ficar com imagens transparentes cobrindo a área, no formato.png-24). Neste caso ficaria assim: #body { background:url(back_conteudo.jpg) no-repeat fixed center top; (modelo fundo fixo) #conteudo { background:url(back_conteudo.jpg) top repeat-y; (modelo clássico) width:100%; 9. A Div Conteúdo_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe o Corpo do site, a esta se emprega as mesmas regras vistas anteriormente na div cabeçalho_centraliza. #conteudo_centraliza{ width:1003px;

7 margin:0 auto; CAUETEC INFORMÁTICA 8 de 13 ADEQUANDO AS CORES DAS FONTES À SUA SKIN De acordo com as cores de sua SKIN, precisará determinar também a CSS dessa skin de modo que as fontes fiquem em harmonia com a skin. O arquivo CSS (style.css) esta disponível junto aos modelos disponibilizados pela Cauetec, a CSS deve ficar dentro da pasta Galeria/skin/1 junto com as imagens da skin. Para facilitar iremos informar as tags onde devem ser feitas as alterações de cores e alguns atributos caso seja necessário. 10. Alterando as cores do Menu Principal Quando for editar a CSS localize esta tag.menu, note que há comentários sinalizando onde devem ser alterados os valores, não altere tamanho de fonte, tipo de fonte, alinhamento do texto e distância das bordas, isso acarretaria em um mau funcionamento da skin/sistema: /* INICIO - Estes atributos são referentes à barra de Menu principal*/.menu { font-size:12px; text-align:left; color:#ffffff; /*Mude aqui as cores das barras de separação " " entre as opções do MENU*/ padding-left:15px; padding-top: 5px; padding-bottom: 5px;.Menu a{ color:#ffffff; /*Mude a cor das opções de MENU*/.Menu a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/ /* FIM - Estes atributos são referentes à barra de Menu principal*/ 11. Alterando as cores do Titulo do Submenu e das opções do Submenu (barra lateral) /* INICIO - Estes atributos são referentes ao Titulo da barra de SubMenu */ #Submenu{ /*ID do Submenu Titulo */ padding-top:20px; padding-left:20px; padding-bottom:5px; color:#ffffff; /*Mude aqui a cor do Titulo do SUBMENU */ font-size:15px; text-align:left; font-weight:bolder; /* FIM - Estes atributos são referentes ao Titulo da barra de SubMenu */ /* INICIO - Estes atributos são referentes as opções de SubMenu */

8 .Submenu{ color:#ffffff; /*Mude a cor dos marcadores das opções de SUBMENU*/ font-size:11px; padding:10px 5px 5px 45px; 9 de 13.Submenu a{ color:#ffffff; /*Mude a cor das opções de SUBMENU*/.Submenu a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/.submenu li{ list-style-type:none; padding:5px 5px 5px 0px; line-height:10px;.seguir{ color:#000000; /*Mude a cor dos marcadores das opções de SEGUIR*/ font-size:11px; padding:10px 5px 5px 45px;.Seguir a{ color:#000000; /*Mude a cor da fonte das opções de SEGUIR*/.Seguir a:hover{ color:#0080ff; /*Mude a cor da fonte das opções de SEGUIR quando o cursor do mouse estiver em cima da opção*/ /* FIM - Estes atributos são referentes à barra de SubMenu */ 12. Alterando as cores do Submenu na pagina Index Há também o submenu na pagina principal (INDEX).SubmenuIndex{ color:#ffffff; /*Mude a cor dos marcadores das opções de SUBMENU na pagina Index */ font-size:11px;.submenuindex a{ color:#ffffff; /*Mude a cor das opções de SUBMENU na pagina Index*/.SubmenuIndex a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/

9 13. Alterando as cores no corpo da pagina do Titulo, Subtítulo, Corpo e Rodapé 10 de 13 /* INICIO - Estes atributos são referentes ao corpo do Site */.Titulo{ font-size:16px; padding:10px 10px 10px 10px; color:#000000; /*Mude a cor da fonte das opções de TITULO*/ font-weight:bolder; text-align:center;.subtitulo{ font-size:13px; padding:5px 10px 5px 10px; color:#000000; /*Mude a cor da fonte das opções de SUBTITULO*/ font-weight:bolder;.corpo{ color:#000000; /*Mude a cor da fonte das opções de CORPO*/ text-align:justify; padding:5px 10px 5px 10px;.Rodape{ font-size:12px; color:#106e8d; /*Mude a cor da fonte das opções de RODAPE*/ text-align:center; font-weight:bolder; /* FIM - Estes atributos são referentes ao corpo do Site */

10 11 de Veja onde cada imagem esta alocada e seu comportamento (Modelo Clássico) barras verticais vermelhas, sendo uma antes da barra de menu secundário e depois do corpo do site, estas barras, estão neste exemplo apenas para delimitar 1003px portanto após esta barra as imagens correspondem aos backgrounds (back_cabecalho, back_menu, 2_1, e back_conteudo). Back_cabeçalho Background do cabeçalho, esta imagem fica atrás da imagem 1, dando continuidade a imagem na horizontal de acordo com a resolução do monitor do usuário, imagem não replica, deve ser bem elaborada, seus atributos são: width: 1600px e height: variando de acordo com a imagem 1 (lembrando que a imagem 1, é um recorte do back_cabeçalho, portanto possui o mesmo height que o cabeçalho. Back_menu Background do Menu, continuação da imagem 2, as regras da imagem 2 se aplicam também a esta imagem, seus atributos são: width:1600px e height: 20px; Back_conteudo Background do menu lateral e corpo da pagina, imagem replica, deve ser constituída de tonalidade solida, sem degrades ou imagens que formem erros no layout ao serem replicadas, seus atributos são: width:1600px e height: variável de acordo com o conteúdo da pagina; 1 Cabeçalho da pagina, não replica, e seus atributos são: width:1003px com height variável de acordo com a skin, no caso da imagem acima ele tem 170px; 2 Menu Principal, deve ser constituída por apenas uma tonalidade, solida, sem degrade ou imagens elaboradas, isso porque eventualmente irá replicar e no caso de ser uma imagem elaborada, ficara visível o termino da imagem e o recomeço da mesma, ficando com aspecto de erro no layout; seus atributos são: width:1003px e height:20px; 2_1 Acabamento da barra de Menu Principal, aqui pode ser uma imagem elaborada, como uma sombra ou um degrade, ou qualquer outro efeito a encargo do designer, seus atributos são: width:1003px e height: 6px; 3 Menu Secundário (Lateral) não replica, pode conter efeitos ou desenhos elaborados, seus atributos são: width:256px e height: 463px; 4 Acabamento da barra de Menu lateral e contem a barra que constitui o corpo do site, não replica, seus atributos são: width:40px e height: 158px;

11 12 de 13 5 Corpo do site, replica, esta imagem deve ser constituída de uma imagem sólida sem imagens que não formem uma continuidade ao replicar, replicar na vertical. Seus atributos são: width: 700px e height: 646px; 6 Barra lateral direita, esta constitui o corpo do site, replica na vertical, seus atributos são: width: 7px e height: 646px; 7 Imagem que dará continuidade a imagem 3, replica e não pode conter imagens que não dêem continuidade ao replicarem na vertical, seus atributos são: width: 256px e height: 154px; 8 Imagem da continuidade a imagem 4, replica, não pode conter imagens que ao serem replicadas na vertical, dêem a aparência de falhas no layout, seus atributos são width: 40px e height: 459px. 9 Rodapé do site, da continuidade as imagens 7, 8, 5, 6 do (menu e corpo do site), seus atributos são: width: 1003px e height: 17px. As regras de imagens neste modelo devem ser aplicadas também nos arquivos Modelos Skin parte (1,3,4,5,6) ou seja, note que existe variações da mesma imagem, exemplo: a imagem 3 que corresponde ao menu lateral tem uma variação 3_1, que é um menu mais estreito, por ser uma variação ele segue os mesmos preceitos da imagem 3, como as outras partes (arquivos PSDs) irão gerar apenas variações das imagens principais não há a necessidade de repetir os mesmos atributos, por isso não iremos mencionar os atributos das mesmas. a. Legenda de Imagens geradas por cada parte (Modelos) São no total, 22 imagens (as imagens devem ser criadas com a extensão PNG, com exceção das imagens back_conteudo, back_cabecalho e back_menu que devem ter a extensão.jpg) Obs: Para que o sistema fique mais rápido, as imagens back_conteudo, back_cabecalho e back_menu devem ser geradas com a extensão.jpg. Modelo Skin parte 1 - Backs Imagens geradas (back_cabecalho, back_menu, 2_1 e back_conteudo) Modelo Skin parte 2 Menu (150px) Imagens geradas (1, 2, 3, 4, 5, 5_1, 6, 7, 8, 9) Modelo Skin parte 3 Menu (190px) Imagens geradas (3_1, 5_2, 5_3, 7_1, 9_1) Modelo Skin parte 4 Geral sem menu. Imagens geradas (5_4, 6_1, 9_2)

12 13 de Veja onde cada imagem esta alocada e seu comportamento (Modelo Fundo Fixo) barras verticais vermelhas, sendo uma antes da barra de menu secundário e depois do corpo do site, estas barras, estão neste exemplo apenas para delimitar 1003px portanto após esta barra as imagens correspondem aos backgrounds (back_cabecalho, back_menu, 2_1). Back_cabeçalho Background do cabeçalho, esta imagem fica atrás da imagem 1, dando continuidade a imagem na horizontal de acordo com a resolução do monitor do usuário, imagem não replica, deve ser bem elaborada, seus atributos são: width: 1600px e height: variando de acordo com a imagem 1 (lembrando que a imagem 1, é um recorte do back_cabeçalho, portanto possui o mesmo height que a o back_cabeçalho. Back_menu Background do Menu, continuação da imagem 2, as regras da imagem 2 se aplicam também a esta imagem, seus atributos são: width:1600px e height: 20px; Back_conteudo Background da pagina inteira, esta imagem deve ser opaca, não replica, pode-se colocar imagens que tenham haver com seu negocio ou ate mesmo uma paisagem. (dica: coloque uma layer sobre a sua imagem preencha com a cor branca e diminua a opacidade para 80%, desta forma ficara opaca, dependendo da sua imagem este valor de opacidade pode variar) 1 Cabeçalho da pagina, não replica, e seus atributos são: width:1003px com height variável de acordo com a skin, no caso da imagem acima ele tem 170px; 2 Menu Principal, deve ser constituída por apenas uma tonalidade, solida, sem degrade ou imagens elaboradas, isso porque eventualmente irá replicar e no caso de ser uma imagem elaborada, ficara visível o termino da imagem e o recomeço da mesma, ficando com aspecto de erro no layout; seus atributos são: width:1003px e height:20px; 2_1 Acabamento da barra de Menu Principal, aqui pode ser uma imagem elaborada, como uma sombra ou um degrade, ou qualquer outro efeito a encargo do designer, seus atributos são: width:1003px e height: 6px;

13 14 de 13 3 Menu Secundário (Lateral), deve ser transparente ou opaca (80%), seus atributos são: width:150px e height: 463px; 4 Deve ser transparente ou opaca (80%), seus atributos são: width: 20px e height: 158px; 5 Deve ser transparente ou opaca (80%), seus atributos são: width: 700px e height: 646px; 6 Deve ser transparente ou opaca (80%), seus atributos são: width: 7px e height: 646px; 7 Deve ser transparente ou opaca (80%), seus atributos são: width: 150px e height: 154px; 8 Deve ser transparente ou opaca (80%), seus atributos são: width: 20px e height: 459px. 9 Deve ser transparente ou opaca (80%), seus atributos são: width: 1003px e height: 17px. As regras de imagens neste modelo devem ser aplicadas também nos arquivos Modelos Skin parte ( do 1 ao 4) ou seja, note que existe variações da mesma imagem, exemplo: a imagem 3 que corresponde ao menu lateral tem uma variação 3_1, que é um menu mais largo, por ser uma variação ele segue os mesmos preceitos da imagem 3, como as outras partes (arquivos PSDs) irão gerar apenas variações das imagens principais não há a necessidade de repetir os mesmos atributos, por isso não iremos mencionar os atributos das mesmas. a. Legenda de Imagens geradas por cada parte (Modelos) Neste modelo o fundo será fixo (back_conteudo), portanto, somente a imagem de cabeçalho, menu e background serão trabalhadas, ainda sim, todas as imagens (transparentes ou com opacidade em 80%, as cores ficam a encargo do designer) precisam ser geradas (extensão PNG-24). Obs: Para que o sistema fique mais rápido, as imagens back_conteudo, back_cabecalho e back_menu devem ser geradas com a extensão.jpg. São no total, 22 imagens Modelo Background Geral Imagens geradas (back_conteudo) Modelo Skin parte 1 - Backs Imagens geradas (back_cabecalho, back_menu, 2_1) Modelo Skin parte 2 Menu (150px) Imagens geradas (1, 2, 3, 4, 5, 5_1, 6, 7, 8, 9) Modelo Skin parte 3 Menu (190px) Imagens geradas (3_1, 5_2, 5_3, 7_1, 9_1) Modelo Skin parte 4 Geral sem menu. Imagens geradas (5_4, 6_1, 9_2)

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

Leia mais

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

Leia mais

GERENCIADOR DE CONTEÚDO

GERENCIADOR DE CONTEÚDO 1/1313 MANUAL DO USUÁRIO GERENCIADOR DE CONTEÚDO CRISTAL 2/13 ÍNDICE 1. OBJETIVO......3 2. OPERAÇÃO DOS MÓDULOS......3 2.1 GERENCIADOR DE CONTEÚDO......3 2.2 ADMINISTRAÇÃO......4 Perfil de Acesso:... 4

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Como incluir artigos:

Como incluir artigos: Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Tutorial do programa

Tutorial do programa 1 Tutorial do programa I. Guia Rápido 1. Clique no produto. 2. Clique na pasta de imagens. 3. Clique em preenchimento auto. 4. Verificar pedido. 5. Finalizar pedido. 6. Fazer pagamento / Entrega. 7. Fazer

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Tutorial Vindula Gestão de layout Vindula

Tutorial Vindula Gestão de layout Vindula Tutorial Vindula Gestão de layout Vindula 2 Sumário Ativando o modo administrador...3 O Painel de controle...3 Editando as cores do seu portal de Intranet...3 Footer (Rodapé)...5 Menu...6 Header (Cabeçalho)...7

Leia mais

W o r d p r e s s 1- TELA DE LOGIN

W o r d p r e s s 1- TELA DE LOGIN S U M Á R I O 1Tela de Login...2 2 Painel......3 3 Post...4 4 Ferramentas de Post...10 5 Páginas...14 6 Ferramentas de páginas...21 7 Mídias...25 8 Links......30 1 1- TELA DE LOGIN Para ter acesso ao wordpress

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Sandro da Silva Camargo UNIVERSIDADE FEDERAL DO PAMPA NTIC - NÚCLEO

Leia mais

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição SSE 3.0 Guia Rápido Módulo Secretaria Nesta Edição 1 Acessando o Módulo Secretaria 2 Cadastros Auxiliares 3 Criação de Modelos Definindo o Layout do Modelo Alterando o Layout do Cabeçalho 4 Parametrização

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções.

Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. 13. Editor de leiautes Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. Neste capítulo uma breve explicação será apresentada sobre a organização

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo EstruturadaPágina ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo EstruturadaPágina

Leia mais

CSS3 para principiantes:

CSS3 para principiantes: CSS3 para principiantes: Neste post vou apresentar algumas das inovações de CSS3 que funcionam em todos os browsers modernos. Como as inovações são tantas decidi escolher duas das mais importantes. Background-size:UL06

Leia mais

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

Introdução à Tecnologia Web 2010

Introdução à Tecnologia Web 2010 IntroduçãoàTecnologiaWeb2010 CSS CascadingStyleSheets Sintaxe ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger CascadingStyleSheets Sintaxe Índice 1 O que é CSS?... 2 2 Vantagens do uso de CSS...

Leia mais

Informática Básica. Microsoft Word XP, 2003 e 2007

Informática Básica. Microsoft Word XP, 2003 e 2007 Informática Básica Microsoft Word XP, 2003 e 2007 Introdução O editor de textos Microsoft Word oferece um conjunto de recursos bastante completo, cobrindo todas as etapas de preparação, formatação e impressão

Leia mais

TUTORIAL PARA CONFIGURAÇÃO DE SEU SITE SITES GRÁTIS

TUTORIAL PARA CONFIGURAÇÃO DE SEU SITE SITES GRÁTIS TUTORIAL PARA CONFIGURAÇÃO DE SEU SITE SITES GRÁTIS Prezado cliente, Parabéns por ter escolhido o SUPERMODULAR SITES GRÁTIS como primeiro site para você ou sua empresa. Temos certeza que, com a leitura

Leia mais

Montar planilhas de uma forma organizada e clara.

Montar planilhas de uma forma organizada e clara. 1 Treinamento do Office 2007 EXCEL Objetivos Após concluir este curso você poderá: Montar planilhas de uma forma organizada e clara. Layout da planilha Inserir gráficos Realizar operações matemáticas 2

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

CRIAÇÃO DE SITES (AULA 9)

CRIAÇÃO DE SITES (AULA 9) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 9) Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor

Leia mais

Universidade Federal de Santa Catarina CAPÍTULO 6 GRÁFICOS NO EXCEL.

Universidade Federal de Santa Catarina CAPÍTULO 6 GRÁFICOS NO EXCEL. CAPÍTULO 6 GRÁFICOS NO EXCEL. Um gráfico no Excel é uma representação gráfica dos números de sua planilha - números transformados em imagens. O Excel examina um grupo de células que tenham sido selecionadas.

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Slice Tool - Ferramenta Fatia

Slice Tool - Ferramenta Fatia Faculdade de Tecnologia da Paraíba CURSO CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA A INTERNET DISCIPLINA DESENVOLVIMENTO DE APLICAÇÕES WEB ESTÁTICAS PERÍODO: P2 Semestre: 2008.2 PROFESSOR Geraldo Rodrigues

Leia mais

Construção de sitesaula4

Construção de sitesaula4 Construção de sites Aula4 Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 26 de Agosto de 2010 Indice Formatando fundo da página com CSS 1 Formatando fundo

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

MARCOS GEODÉSICOS / REFERÊNCIAS DE NÍVEL

MARCOS GEODÉSICOS / REFERÊNCIAS DE NÍVEL MARCOS GEODÉSICOS / REFERÊNCIAS DE NÍVEL MANUAL DE UTILIZAÇÃO TERMO DE USO E COMPROMISSO As informações contidas neste aplicativo Marcos Geodésicos/Referências de Nível, com exceção às monografias (para

Leia mais

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr. Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

Leia mais

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

Leia mais

Manual PAINT.NET de imagens

Manual PAINT.NET de imagens Manual PAINT.NET de imagens 1. Instalação 1.1 - Para instalar o programa paint.net, o primeiro passo é baixá-lo do endereço a seguir e salvá-lo em seu computador. http://ww2.prefeitura.sp.gov.br/paint_net/paint.net.3.36.exe

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

Leia mais

Prática 3 Microsoft Word

Prática 3 Microsoft Word Instituto Federal de Educação, Ciência e Tecnologia do Estado da Paraíba, Campus Sousa Disciplina: Informática Básica Prática 3 Microsoft Word Assunto: Tópicos abordados: Prática Utilização dos recursos

Leia mais

Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO

Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

CRIANDO TEMPLATES E LEGENDAS

CRIANDO TEMPLATES E LEGENDAS CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Ferramentas Programáveis. Profº Ritielle Souza

Ferramentas Programáveis. Profº Ritielle Souza Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

Manual do Usuário Publicador

Manual do Usuário Publicador Manual do Usuário Publicador Portal STN SERPRO Superintendência de Desenvolvimento SUPDE Setor de Desenvolvimento de Sítios e Portais DEDS2 Versão 1.1 Fevereiro 2014 Sumário Sobre o Manual... 3 Objetivo...

Leia mais

Manual do Usuário Layout Novo CMS WordPress Versão atual: 3.5.1

Manual do Usuário Layout Novo CMS WordPress Versão atual: 3.5.1 UNIVERSIDADE FEDERAL DE JUIZ DE FORA UFJF Secretaria de Sistemas de Informação SSI Centro de Gestão do Conhecimento Organizacional CGCO Equipe de Desenvolvimento de Sites Manual do Usuário Layout Novo

Leia mais

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post Índice 1) Acesso ao Painel de Controle 2) Ambientação na Ferramenta 2.1) Posts 2.1.1) Adicionar novo post 2.1.2) Editar posts 2.2) Mídia 2.2.1) Tipos de Mídia 2.2.2) Biblioteca 2.2.3) Adicionar novo 3)

Leia mais

Oficina de Construção de Páginas Web

Oficina de Construção de Páginas Web COMPETÊNCIAS BÁSICAS EM TIC NAS EB1 Oficina de Construção de Páginas Web Criação e Publicação Guião Páginas WWW com o editor do Microsoft Office Word 2003 1. Introdução. 2. Abrir uma página Web. 3. Guardar

Leia mais

Universidade Federal do Mato Grosso - STI-CAE. Índice

Universidade Federal do Mato Grosso - STI-CAE. Índice CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como

Leia mais

Manual do Plone (novo portal do IFCE)

Manual do Plone (novo portal do IFCE) Manual do Plone (novo portal do IFCE) Dezembro/2015 Índice Como criar submenus... 3 Como criar banner rotativo... 4 Como remover um banner... 5 Como criar uma notícia... 6 Como inserir imagem na notícia...

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

Leia mais

Manual. V e r s ã o i P a d

Manual. V e r s ã o i P a d Manual V e r s ã o i P a d índice I. Introdução II. Procedimentos básicos III. A agenda IV. Clientes V. Prontuário VI. Configurações VII. Medicamentos VIII. Tags IX. Receitas X. Contato I Introdução O

Leia mais

APOSTILA WORD BÁSICO

APOSTILA WORD BÁSICO APOSTILA WORD BÁSICO Apresentação O WORD é um editor de textos, que pertence ao Pacote Office da Microsoft. Suas principais características são: criação de textos, cartas, memorandos, documentos, mala

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é : TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz

Leia mais

Instrução de Trabalho Base de Conhecimento

Instrução de Trabalho Base de Conhecimento Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.

Leia mais

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando

Leia mais

CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD

CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD Faculdade de Administração, Ciências Contábeis e Turismo Pós-Graduação em Gestão de Negócios CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD EMENTA

Leia mais

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007 WORD 2007 PREFEITURA DO MUNICÍPIO DE LONDRINA SECRETARIA MUNICIPAL DE EDUCAÇÃO GERÊNCIA DE TECNOLOGIA Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa

Leia mais

Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet - 2011/2012

Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet - 2011/2012 Folha Prática Nº CSS / Filipe Quinaz . Folhas de Estilo 0 Internas, delimitadas pela marca style h, h font-family: sans-serif; color: #CC;

Leia mais

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material

Leia mais

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

Leia mais

Curso LibreOffice - Apostila de Exercícios

Curso LibreOffice - Apostila de Exercícios Exercício 1 1. Crie um novo documento e digite: Testando 2. Salve-o em algum local de fácil acesso e que seja de sua preferência com o nome Doc1. 3. Acrescente o texto Salvar Como ao final do texto escrito

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Menus Personalizados

Menus Personalizados Menus Personalizados Conceitos básicos do Painel Logando no Painel de Controle Para acessar o painel de controle do Wordpress do seu servidor siga o exemplo abaixo: http://www.seusite.com.br/wp-admin Entrando

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...

Leia mais

Memorial Descritivo. Portfólio Acadêmico Online

Memorial Descritivo. Portfólio Acadêmico Online Faculdade de Tecnologia SENAC Memorial Descritivo Portfólio Acadêmico Online Projeto Integrador do Módulo 1 Produção Multimídia Por Irene Coelho 09 de maio de 2014 Sumário 1. Introdução pág.01 2. Objetivos

Leia mais

Este tutorial é direcionado aos câmpus do IFC que já utilizam em seus sites os temas para WordPress desenvolvidos pelo Câmpus Araquari.

Este tutorial é direcionado aos câmpus do IFC que já utilizam em seus sites os temas para WordPress desenvolvidos pelo Câmpus Araquari. Apresentação Este tutorial é direcionado aos câmpus do IFC que já utilizam em seus sites os temas para WordPress desenvolvidos pelo Câmpus Araquari. Antes de iniciar o processo de atualização é recomendado

Leia mais

Manual da AGENDA GRACES 2011

Manual da AGENDA GRACES 2011 1 Agenda Graces Manual da AGENDA GRACES 2011 O Sistema Agenda Graces integrada ao Sistema Graces e Agenda Graces Grátis foi desenvolvido pela empresa Quorum Informática. Este Manual tem por objetivo atender

Leia mais

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar

Leia mais

CURSO DE INFORMÁTICA BÁSICA AULA 2 O AMBIENTE WINDOWS

CURSO DE INFORMÁTICA BÁSICA AULA 2 O AMBIENTE WINDOWS CURSO DE INFORMÁTICA BÁSICA AULA 2 O AMBIENTE WINDOWS Relembrando... Gabinete Ligando o computador São três passos básicos O ambiente Windows O Windows é um tipo de software chamado sistema operacional

Leia mais

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Pierre Correa Martin 1 UNIVERSIDADE FEDERAL DO PAMPA NTIC NÚCLEO

Leia mais

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,

Leia mais