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

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

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

Transcrição

1 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 de repetição responsáveis por trazer cada informação como os blocos do XOOPS e as informações de cabeçalho, rodapé e variáveis internas. O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: 1

2 Capítulo 1: Variáveis do tema. Vamos começar com uma lista de variáveis que você terá que conhecer antes de começar a criar seu template, são elas: <{$xoops_module_header> Carrega o cabeçalho dos módulos XOOPS, como scripts e arquivos de CSS. É inserido antes da tag </head>, ou seja, dentro do cabeçalho do documento. <{$xoops_sitename> <{$xoops_pagetitle> <{$xoops_charset> <{$xoops_langcode> <{$xoops_meta_keywords> Exibe o nome do site, deve ficar dentro da tag <title> Exibe o título da página, slogan e titulo de páginas. Deve ficar dentro da tag <title> Define o Charset do seu tema, não colocar esta variável corretamente ou deixa-la ausente causa um velho problema conhecido de todos nós, ou seja, o seu site com icones desconfigurados. De ver inserida no cabeçalho do documento. Esta variável define a linguagem do seu site. Deve estar presente também no cabeçalho do documento. Exibe as palavras chave do seu site. A mesma fica dentro do cabeçalho. <{$xoops_meta_description> Exibe a descrição de seu site, a mesma fica dentro do cabeçalho e é imprescindível sua presença. <{$meta_copyright> <{$xoops_meta_author> <{$meta_rating> <{$meta_robots> <{$xoops_themecss> <{$xoops_banner> <{$xoops_footer> <{$xoops_imageurl> <{$xoops_url> <{$xoops_contents> Exibe o copyright do site. Exibe o nome do autor do site. Exibe a classificação etária do seu site. Define o que será indexado em seu site. Carrega o caminho da folha de estilo do seu tema. Exibe o Banner do XOOPS, escolha uma área no tema para inserir esta variável. Carrega a mensagem do rodapé de seu tema. Carrega o caminho de uma imagem dentro do diretório do seu tema, não necessita de / após a variável. Carrega a url do site, necessita de / após a variável. Exibe o título de um bloco. Exibe o conteúdo de um bloco. Carrega o conteúdo da página. 2

3 Capítulo 2: Estrutura do Cabeçalho Vamos começar mostrando como é a estrutura de um cabeçalho de uma página HTML comum: <!-- Declaração do tipo do documento --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt_br" lang="pt_br"> <!-- Início do cabeçalho --> <head> <!-- Declaração do charset da página --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Linguagem da página --> <meta http-equiv="content-language" content="pt_br" /> <!-- O que os robôs de busca podem indexar --> <meta name="robots" content="index,follow" /> <!-- Palavras chave --> <meta name="keywords" content="palavras chave do site aqui" /> <!-- Descrição da página --> <meta name="description" content="descrição do site aqui" /> <!-- Classificação etária do site --> <meta name="rating" content="classificação do site" /> <!-- Autor do site --> <meta name="author" content="autor do site" /> <!-- Creditos do site --> <meta name="copyright" content="copyright do site" /> <!-- Título do site --> <title>meu Site - XOOPS</title> <!-- Caminho da sua folha de estilo --> <link rel="stylesheet" type="text/css" media="all" href="caminho da folha de estilo aqui" /> </head> 3

4 Vamos agora adequar isso ao padrão do XOOPS, fazer com que ele preencha essas informações dinamicamente através do painel de controle adicionando as variáveis que citamos no capitulo 1, o cabeçalho ficaria assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode>" lang="<{$xoops_langcode>"> <head> <meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset>" /> <meta http-equiv="content-language" content="<{$xoops_langcode>" /> <meta name="robots" content="<{$xoops_meta_robots>" /> <meta name="keywords" content="<{$xoops_meta_keywords>" /> <meta name="description" content="<{$xoops_meta_description>" /> <meta name="rating" content="<{$xoops_meta_rating>" /> <meta name="author" content="<{$xoops_meta_author>" /> <meta name="copyright" content="<{$xoops_meta_copyright>" /> <meta name="generator" content="xoops" /> <!-- É necessário para forçar o IEca 8 a usar o modo de compatibilidade, ou seja, fazer o navegador se comportar como um Browser mais ou menos descente. --> <meta http-equiv="x-ua-compatible" content="ie=100" /> <title><{$xoops_sitename> <{if $xoops_pagetitle!=''> - <{$xoops_pagetitle><{/if></title> <link href="<{$xoops_url>/favicon.ico" rel="shortcut ICON" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url>/xoops.css" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss>" /> <{$xoops_module_header> </head> Pronto, feito isso temos uma estrutura de um cabeçalho no formato do XOOPS, assim poderemos editar seus valores dentro da administração do XOOPS sem precisar editar diretamente o HTML do seu site, simples não?! 4

5 Capítulo 3: Os Blocos do XOOPS! Sabemos que no XOOPS utilizamos blocos para exibir o conteúdo do nosso site, ao todo são 8 (oito) blocos, são eles: Bloco da Esquerda Bloco da Direita Bloco Central Bloco Central Esquerda Bloco Central Direita Bloco Central Inferior Bloco Central Inferior da Esquerda Bloco Central Inferior da Direita Podemos customizar a forma de exibição destes bloco infinitamente, mais no tutorial vou abordar a transposição do conteúdo em colunas, onde o conteúdo vai se dividir em: 1. Coluna da Esquerda: Será exibido os blocos da esquerda 2. Coluna da Direita: Será exibido os blocos da direita 3. Coluna central: Serão exibidos os blocos central, central direita e esquerda, central inferior e central inferior direita e esquerda. Qualquer duvida quanto a transposição da informação basta ver o gráfico que simboliza esta estrutura no topo deste tutorial. Um bloco XOOPS contem as seguintes informações: 1. Uma estrutura de repetição que diz que enquanto existir blocos ele vai exibi-los. 2. Dentro da estrutura de repetição de um bloco é exibido um título e um conteúdo distinto de cada bloco, cada bloco tem uma identificação única, o que torna possível trazer estas informações. 5

6 Abaixo podemos ver o código de cada posição de bloco XOOPS: Bloco da Esquerda: <{foreach item=block from=$xoblocks.canvas_left> Bloco da Direita: <{foreach item=block from=$xoblocks.canvas_right> Bloco do Centro: <{foreach item=block from=$xoblocks.page_topcenter> Bloco Esquerdo do Centro: <{foreach item=block from=$xoblocks.page_topleft> Bloco Direito do Centro: <{foreach item=block from=$xoblocks.page_topright> Bloco Central Inferior: <{foreach item=block from=$xoblocks.page_bottomcenter> Bloco Central Inferior Esquerdo: <{foreach item=block from=$xoblocks.page_bottomright> Bloco Central Inferior Direito: <{foreach item=block from=$xoblocks.page_bottomleft> Só para fixar, como vocês podem ver, cada bloco é composto por 3 partes: 6

7 O bloco propriamente dito, onde cada bloco é indicado após a variável $xoblocks(canvas_left, canvas_right, page_topcenter, page_topleft, page_topright, page_bottomcenter, page_bottomright, page_bottomleft) e esta devidamente dentro de uma estrutura de repetição(foreach). O título do bloco O conteúdo do bloco Favor ver a imagem do início do capítulo para melhor entendimento. Agora que já temos os códigos necessários para montar a estrutura de blocos do nosso tema XOOPS podemos partir para o próximo capitulo onde iremos ver como criar a seção de conteúdo, que é onde serão exibidos os conteúdos de suas páginas e como criar o rodapé do site. Vale lembrar que não é obrigatório o uso de todas as posições dos blocos do XOOPS, o webdesign pode escolher quais ele vai trabalhar minimizando ainda mais a tarefa de criação de um tema simples, que não necessite de tantas posições. 7

8 Capítulo 4: Área de Conteúdo, Banner e Rodapé Estamos quase finalizando a parte teórica e em breve vamos ver como montar tudo, neste capitulo iremos ver como inserir a área de conteúdo, que é onde os textos gerados pelos módulos como conteúdos, imagens e etc... irão aparecer dentro do tema. Para inserir uma área de conteúdo iremos usar a variável <{$xoops_contents>, a localização dela deve estar no topo dos blocos centrais, ou seja, acima do primeiro bloco central, mais na frente vamos ver onde a colocar, para exibir os banners nativos do XOOPS usaremos a variável <{$xoops_banner>, esta variável deverá ficar em uma área de sua preferência, geralmente é inserida no topo, o uso da mesma não é obrigatório. Para inserir o rodapé basta utilizar a variável <{$xoops_footer>, a mesma fica na parte inferior do site e é responsável por exibir as informações inseridas no rodapé de seu site no painel administrativo. A transposição das informações ficará desta forma: 8

9 Capítulo 5: Criando um Novo Tema Neste capitulo iremos criar um template para XOOPS com as informações que já foram passadas até aqui, para começar vá até a pasta themes de sua instalação XOOPS e crie uma nova pasta com o nome de seu tema, escolha o nome que mais lhe agradar e mãos a obra! Após criar a pasta do seu tema no diretório themes crie um arquivo chamado theme.html e outro chamado style.css, ou seja, o arquivo fonte de seu tema e sua folha de estilo, neste artigo não vou abordar a criação de temas com imagens, faremos tudo via HTML e CSS, é imprescindível o conhecimento mínimo dessas duas linguagens para que possamos prosseguir daqui. 9

10 Agora vamos editar os arquivos de nosso novo tema, para iniciar é bom usar um editor de texto mais limpo, recomendo o Notepad++ que pode ser baixado aqui: Depois de baixar e instalar, clique com o botão direito do mouse em cima do arquivo theme.html e escolha a opção Editar com Notepad++, vamos agora começar a codificar o tema, iniciaremos obviamente inserindo o cabeçalho do template: Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode>" lang="<{$xoops_langcode>"> <head> <meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset>" /> <meta http-equiv="content-language" content="<{$xoops_langcode>" /> <meta name="robots" content="<{$xoops_meta_robots>" /> <meta name="keywords" content="<{$xoops_meta_keywords>" /> <meta name="description" content="<{$xoops_meta_description>" /> <meta name="rating" content="<{$xoops_meta_rating>" /> <meta name="author" content="<{$xoops_meta_author>" /> <meta name="copyright" content="<{$xoops_meta_copyright>" /> <meta name="generator" content="xoops" /> <meta http-equiv="x-ua-compatible" content="ie=100" /> <title><{$xoops_sitename> - <{$xoops_pagetitle></title> <link href="<{$xoops_url>/favicon.ico" rel="shortcut ICON" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss>" /> <{$xoops_module_header> </head> 10

11 Agora vamos criar o corpo do nosso documento, nele ficam os banners, blocos, área de conteúdo e rodapé. Código: <body> <{$xoops_sitename> <{$xoops_banner> <!-- Bloco da Esquerda: --> <{foreach item=block from=$xoblocks.canvas_left> <!-- Bloco da Direita:--> <{foreach item=block from=$xoblocks.canvas_right> <!-- Área de Conteúdo --> <{$xoops_contents> 11

12 <!-- Bloco do Centro: --> <{foreach item=block from=$xoblocks.page_topcenter> <!-- Bloco Esquerdo do Centro: --> <{foreach item=block from=$xoblocks.page_topleft> <!-- Bloco Direito do Centro: --> <{foreach item=block from=$xoblocks.page_topright> <!-- Bloco Central Inferior: --> <{foreach item=block from=$xoblocks.page_bottomcenter> <!-- Bloco Central Inferior Esquerdo: --> <{foreach item=block from=$xoblocks.page_bottomright> <!-- Bloco Central Inferior Direito: --> <{foreach item=block from=$xoblocks.page_bottomleft> <{$xoops_footer> </body> </hmtl> Pronto, o tema está criado! Agora é só começar a estilizar ele, para isso iremos criar a estrutura tableless que vai alinhar todas as informações, lembram do nosso prototipo do início do artigo? Então, baseado nele iremos criar a nossa estrutura de divs para deixar o resultado final igual ao planejado. Lembrando, o conhecimento básico de HTML e CSS são necessários, pois neste tutorial não vou adentrar a explicações sobre as linguagens, então se tiver duvidas quanto algum termo citado aqui, por favor, acesse o site: 12

13 Capítulo 6: Aplicando o Estilo ao Tema Vamos começar estruturando o corpo do tema, antes de qualquer coisa precisamos criar uma estrutura de DIVs seguindo a ordem abaixo: 1. Uma DIV que engloba todo o tema, vou chama-la de corpo ; 2. Uma DIV com o nome cabecalho onde vai ficar o titulo do site e o banner; 3. Fecharemos a div cabecalho ; 4. Criaremos uma div com o nome menu e fecharemos; 5. Abaixo de menu criaremos a div da esquerda; 6. Abaixo da div da esquerda criaremos a div da direita; 7. Agora criaremos uma div com o nome centro, dentro dela ficarão todas as demais divs centrais, são elas: conteudo, blococentro, blococentroesq, blococentrodir, centroinferior, inferiordireito, inferioresquerdo. 8. Fecharemos a div centro; 9. Criaremos uma div com o nome rodape ; 10. Fecharemos a DIV Corpo; Abaixo os códigos das DIVs, vejam como deverá ficar: <div id="corpo"> <!-- Div principal --> <div id="cabecalho"> <!-- DIV Cabeçalho --> </div> <!-- Fim da DIV Cabeçalho --> <div id="menu"> <!-- DIV do menu --> </div> <!-- Fim da DIV do menu <div id="esquerda"> <!-- Div da Esquerda --> </div> <!-- Fim da Div da Esquerda --> <div id="direita"> <!-- Div da Direita --> </div> <!-- Fim da Div da Direita--> <div id="centro"> <!-- Div Central - Todas as divs centrais ficam aqui --> <div id="conteudo"> <!-- DIV Conteúdo --> </div> <!-- Fim da DIV Conteúdo --> <div id="blococentro"> <!-- Div para o Bloco Central --> </div> <!-- Fim da DIV do Bloco Central --> 13

14 <div id="blococentroesq"> <!-- Div para o bloco central da esquerda --> </div> <!-- Fim da DIV central esquerda --> <div id="blococentrodir"> <!-- Div para o bloco central da direita --> </div> <!-- Fim da div central direita --> <div id="centroinferior"> <!-- DIV central inferior --> </div> <!-- Fim da DIV central inferior --> <div id="inferioresquerdo"> <!-- DIV Inferior Esquerda --> </div> <!-- Fim da Div Inferior Esquerda --> <div id="inferiordireito"> <!-- DIV Inferior Direita --> </div> <!-- Fim da div Inferior Direita <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da DIV Central --> <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da Div principal --> <div id="rodape"> <!-- DIV do rodapé --> </div> <!-- Fim da DIV rodapé --> 14

15 Lembrando que essa é nossa estrutura de DIVs, ainda esta faltando o estilo, vamos abrir o nosso arquivo style.css e criar as IDs e Classes que referenciamos no nosso theme.html, o codigo do style.css ficará assim por enquanto: *{ margin:0; padding:0; body{ background:#6d6d6d; div{ margin-bottom:5px; /*Somente para vizualizar as divs, depois removeremos*/.clear{clear:both; margin:0; padding:0; width:auto; height:0px; #corpo{ background:#acacac; width:800px; margin:0 auto; #cabecalho{ background:#ebebeb; width:auto; height:100px; #menu{ background:#ebebeb; width:auto; height:30px; #esquerda{ background:#ebebeb; width:150px; float:left; min-height:150px; 15

16 #direita{ background:#ebebeb; width:150px; min-height:150px; float:right; #centro{ background:#fff; margin:0 auto; width:490px; min-height:150px; #conteudo{ /*Sera inserido mais a frente*/ #blococentro{ background:#d6d6d6; width:480px; min-height:50px; margin:0 auto; #blococentroesq{ background:#d6d6d6; float:left; width:235px; min-height:50px; margin-left:5px; margin-top:5px; #blococentrodir{ background:#d6d6d6; float:right; width:235px; min-height:50px; margin-right:5px; margin-top:5px; #centroinferior{ background:#d6d6d6; width:480px; min-height:50px; 16

17 float:left; margin-left:5px; #inferioresquerdo{ background:#d6d6d6; float:left; width:235px; min-height:50px; margin-left:5px; #inferiordireito{ background:#d6d6d6; float:right; width:235px; min-height:50px; margin-right:5px; #rodape{ background:#ebebeb; margin:5px auto; width:800px; height:30px; line-height:30px; text-align:center; 17

18 Lembrando que esta estrutura é apenas para exemplificar como deverá ficar o alinhamento das DIVs que irão abrigar os seus devidos blocos ou elementos do tema, cada ID esta com um nome que sugere o bloco ou elemento que ela irá carregar. Vamos agora montar tudo, alimentar cada DIV com seu devido bloco/elemento. <div id="corpo"> <!-- Div principal --> <div id="cabecalho"> <!-- DIV Cabeçalho --> <{$xoops_sitename> <{$xoops_banner> </div> <!-- Fim da DIV Cabeçalho --> <div id="menu"> <!-- DIV do menu <a href= # >Link 1</a> <a href= # >Link 2</a> <a href= # >Link 2</a> <a href= # >Link 4</a> </div> <!-- Fim da DIV do menu <div id="esquerda"> <!-- Div da Esquerda --> <{foreach item=block from=$xoblocks.canvas_left> </div> <!-- Fim da Div da Esquerda --> <div id="direita"> <!-- Div da Direita <{foreach item=block from=$xoblocks.canvas_right> </div> <!-- Fim da Div da Direita--> <div id="centro"> <!-- Div Central - Todas as divs centrais ficam aqui --> <div id= conteudo > <!-- DIV Conteudo --> <{$xoops_contents> </div> <!-- Fim da DIV Conteúdo --> <div id="blococentro"> <!-- Div para o Bloco Central --> <{foreach item=block from=$xoblocks.page_topcenter> </div> <!-- Fim da DIV do Bloco Central --> 18

19 <div id="blococentroesq"> <!-- Div para o bloco central da esquerda --> <{foreach item=block from=$xoblocks.page_topleft> </div> <!-- Fim da DIV central esquerda <div id="blococentrodir"> <!-- Div para o bloco central da direita --> <{foreach item=block from=$xoblocks.page_topright> </div> <!-- Fim da div central direita --> <div id="centroinferior"> <!-- DIV central inferior --> <{foreach item=block from=$xoblocks.page_bottomcenter> </div> <!-- Fim da DIV central inferior --> <div id="inferioresquerdo"> <!-- DIV Inferior Esquerda --> <{foreach item=block from=$xoblocks.page_bottomleft> </div> <!-- Fim da Div Inferior Esquerda --> <div id="inferiordireito"> <!-- DIV Inferior Direita --> <{foreach item=block from=$xoblocks.page_bottomright> </div> <!-- Fim da div Inferior Direita <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da DIV Central --> <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da Div principal --> <div id="rodape"> <!-- DIV do rodapé --> <{$xoops_footer> </div> <!-- Fim da DIV rodapé --> 19

20 Só para lembrar, o código citado acima deve estar dentro do corpo do seu theme.html, ou seja, entre as tags: <body>...código... </body>. Feito isso já está quase tudo pronto, se você alterar o tema padrão do XOOPS para o tema que acabou de criar, ele vai exibir o seu conteúdo normalmente no seu site. No próximo capitulo iremos aplicar o estilo aos títulos dos blocos e ao elementos do XOOPS, como títulos de noticias e as suas tabelas internas. 20

21 Capítulo 7: Aplicando Estilo aos Elementos Neste capitulo iremos customizar o banner, logo, titulo dos blocos, conteudo dos blocos, área de conteúdo, rodapé, menu principal e pessoal, notícias e tabelas. Se você criou o seu theme.html e style.css corretamente seguindo todas as informações contidas aqui seu tema estará parecido com este: 21

22 Nenhum pouco atraente ainda, concordam? Vamos começar a deixa-lo com uma cara mais amigável, começaremos pelo cabeçalho, alinhando o banner e o logo do site. Vá para sua folha de estilo (style.css) e crie duas classes: logo e banner No theme.html na variável <{$xoops_sitename> atribua a ela um H1 com a classe logo e na váriavel <{$xoops_banner> coloque a mesma em uma div atribuindo a mesma a classe banner. Seu código irá ficar assim: theme.html <h1 class="logo"><{$xoops_sitename></h1> <div class="banner"><{$xoops_banner></div> Vejam o resultado abaixo: style.css.logo{ float:left; margin-left:5px; line-height:100px;.banner{ width:468px; height:60px; margin:0; position:relative; float:right; margin-right:5px; margin-top:20px; Bem melhor não é verdade? Vamos Agora arrumar o Menu, na sua folha de estilo procure a ID menu, para deixar organizado, abaixo dela crie mais duas ID s: menu a e menu a:hover que nada mais é do que o estilo do seu link ativo e do link quando o mouse passar por cima do mesmo. Código: #menu a{ float:left; width:90px; line-height:30px; text-decoration:none; text-align:center; color:#0080c0; font-variant:small-caps; #menu a:hover{ background:#fff; color:#005279; font-variant:normal; 22

23 Vejam abaixo o resultado desta alteração: Agora vamos aplicar estilo aos blocos. Notem que os links do menu principal estão alinhados lado a lado e que os titulos dos blocos não se diferenciam de seu texto, para mudar isso vá até sua folha de estilo e crie as ID s: 1. #mainmenu a > Estilo dos links ativos do menu principal do XOOPS. 2. #usermenu a > Estilo dos links ativos do menu pessoal do XOOPS. 3. #mainmenu a:hover > Estilo do menu principal do XOOPS quando o mouse esta em cima do Link. 4. #usermenu a:hover > Estilo do menu pessoal do XOOPS quando o mouse esta em cima do Link. 5. #blocotitulo > Este será o estilo dos títulos de todos os blocos de seu tema, é importante que você vá em cada variável e atribua a ela uma div com a ID #blocotitulo. O resultado será este: <div id= blocotitulo > </div>, não esqueça de fazer isso em todos os blocos de seu tema. 6. #conteudobloco > Faça o mesmo procedimento que fez com os títulos dos blocos, neste caso vá em todas as variáveis e atribua a cada uma div com um ID #conteudobloco. O Resultado será este: <div id= conteudobloco > </div>, não esqueça de fazer isso em todos os blocos de seu tema. Após aplicar as ID s #blocotitulo e #conteudobloco as suas devidas variáveis em todo o tema vamos aplicar os atributos na nossa folha de estilo (style.css), o código ficará assim: #mainmenu a, #usermenu a{ 23

24 color:#09c; display:block; text-decoration:none; line-height:25px; border-bottom:1px dashed #09C; padding-left:3px; #mainmenu a:hover, #usermenu a:hover{ color:#069; border-bottom:1px dotted #069; #blocotitulo{ color:#6d6d6d; font-size:1.2em; #conteudobloco{ padding-left:3px; padding-right:3px; text-align:justify; Veja abaixo o resultado em seu tema: 24

25 Agora vamos editar a área de conteúdo do nosso tema, não há muito o que fazer nesta parte, no meu caso vou apenas dar algumas margens pois como podem ver o conteudo esta muito colado nas laterais da DIV, vejam: Então é só ir na sua folha de estilo e aplicar o seguinte código na ID #conteudo: #conteudo{ width:480px; margin:0 auto; Feito isso veja como ficará o resultado: 25

26 Notem que agora há um espaçamento entre as laterais da área de conteúdo, é possível ainda notar uma div vazia do lado direito, isso ocorre porque nesta seção não existe um bloco definido, ou seja, não tratarei neste artigo sobre temas com centro fluído, isso ficará para próximos artigos, aos mais ansiosos aconselho visitar a documentação do Theme Factory para ver como trabalhar com este recurso. Bom, aqui finaliza o artigo, isso é basicamente o que você precisa saber para criar um tema para XOOPS, afim de conhecer mais a estrutura de um template aconselho que baixem templates e analisem os códigos dos mesmos para aperfeiçoar seus conhecimentos, ainda é válido e indicado verificar a documentação do Smarty PHP para aprender mais sobre todos os recursos que esta linguagem tem a oferecer, não se limitem ao que esta escrito neste tutorial, busquem mais conhecimento e compartilhem o que aprenderem, isso é software livre! Links Úteis: Documentação Smarty em Português: Tudo sobre CSS: Site oficial do XOOPS: Site oficial de suporte brasileiro: Site do autor deste material:

Webdesign A tag HEAD e as Meta tags

Webdesign A tag HEAD e as Meta tags Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 4 Técnico Prof. Cesar 2014 Conteúdo 1. ESTRUTURA DE UM DOCUMENTOHTML... 2 2. ELEMENTOS DA ESTRUTURA... 3 3. FORMULÁRIOS...Erro!

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

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

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.

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. 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

Leia mais

Cabeçalho do documento

Cabeçalho do documento Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo

Leia mais

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro.

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro. Material de apoio a aulas de Desenvolvimento Web Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS AAS - www.aas.pro.net Março-2012 Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo

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

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br

HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br HTML5 Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br HTML5 HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa

Leia mais

LOJAS ESPECIAIS 2014

LOJAS ESPECIAIS 2014 LOJAS ESPECIAIS 2014 LOJAS ESPECIAIS 2014 ÍNDICE Personalização da Página 3 Dúvidas Frequentes 6 LOJAS ESPECIAIS 2014 PERSONALIZAÇÃO DA PÁGINA Para iniciar a personalização acesse Catalogo Gerenciar Categorias

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

<!DOCTYPE html PUBLIC...> <html> <head> </head> <body> </body> </html> Estrutura de um documento criado com o Dreamweaver. (versão xhtml strict)

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

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br Manual de utilização do Portal Entrelace.org.br William Oyama www.evisionbrasil.com.br Índice do tutorial 1 Portal entrelace.obr.br 2- Painel Administrativo 3- Informações Restritas 4- Acervo 5- Notícias

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

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

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Joomla! CMS Visão Geral! Por Fabio Gameleira

Joomla! CMS Visão Geral! Por Fabio Gameleira Joomla! CMS Visão Geral! Por Fabio Gameleira 1/20 Historico de revisões Data Versão Descrição Responsável 23/06/2006 1.0 Conteúdo inicial Fabio gameleira 21/03/2007 1.1 Revisão e correção do url do meu

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

Manual do Painel Administrativo

Manual do Painel Administrativo Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...

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

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

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

ADMINISTRAÇÃO DO SITE DA ESCOLA: 1. O site da escola está composto de 3 espaços. Conteúdo, Notícias e Destaques...

ADMINISTRAÇÃO DO SITE DA ESCOLA: 1. O site da escola está composto de 3 espaços. Conteúdo, Notícias e Destaques... Este tutorial foi criado com o intuito de orientar quanto a inserção de informações na página eletrônica (site) da escola publicada no Portal Educação e irá possibilitar a divulgação permanente de informações

Leia mais

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,

Leia mais

PROGRAMAÇÃO PARA INTERNET HTML

PROGRAMAÇÃO PARA INTERNET HTML PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem

Leia mais

Visão Geral. Joomla! CMS Visão Geral! 1.5. Por Fabio Gameleira fabiogameleira@gmail.com. Joomla! Por Fabio Gameleira 1/22

Visão Geral. Joomla! CMS Visão Geral! 1.5. Por Fabio Gameleira fabiogameleira@gmail.com. Joomla! Por Fabio Gameleira 1/22 Joomla! CMS Visão Geral! 1.5 Por Fabio Gameleira fabiogameleira@gmail.com 1/22 Historico de revisões Data Versão Descrição Responsável 23/06/2006 1.0 Conteúdo inicial Fabio gameleira fabiogameleira@gmail.com

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

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

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

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

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

Diazo. Módulo 7 Tema Diazo

Diazo. Módulo 7 Tema Diazo Diazo Módulo 7 Tema Diazo Diazo >> O que é? É uma ferramenta para criação de temas. Permite que o designer construa um tema puramente HTML, sem se preocupar com as particularidades do Plone. Funciona através

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

Estudo Dirigido - Parte 1

Estudo Dirigido - Parte 1 Linguagem Java para Web - JSP Professora Lucélia Estudo Dirigido - Parte 1 Na primeira parte deste tutorial, vamos receber os dados de um formulário e verificar se os dados foram ou não preenchidos. Se

Leia mais

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #O que é Web Standards? São padrões de desenvolvimento web recomendados pela W3C que visam a implementação de

Leia mais

Solute Manager Gerenciador de Conteúdo Manual de Utilização

Solute Manager Gerenciador de Conteúdo Manual de Utilização Solute Manager Gerenciador de Conteúdo Manual de Utilização SITE LABORATÓRIO SÃO JOSÉ ÍNDICE INTRODUÇÃO PÁG 03 USUÁRIOS DO SISTEMA PÁG 04 NOTÍCIAS PÁG 06 PÁGINAS INTERNAS PÁG 13 DICAS PÁG 16 BANNERS PÁG

Leia mais

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados Construtor Iron Web Manual do Usuário Iron Web Todos os direitos reservados A distribuição ou cópia deste documento, ou trabalho derivado deste é proibida, requerendo, para isso, autorização por escrito

Leia mais

Portal de Internet ABDI

Portal de Internet ABDI Portal de Internet ABDI 1 Histórico de Revisões Data Versão Autor Descrição 26/10/11 1.0 Jucelio Araújo Criação do documento 25/10/13 2.0 Públia Pires Atualização do documento 04/11/2013 3.0 Ana Carolina

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de:

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de: AULA: BrOffice Impress terceira parte Objetivo Ao final dessa aula, você deverá ser capaz de: Conhecer a integração dos softwares do BrOffice; Aprender a trabalhar no slide mestre; Utilizar interação entre

Leia mais

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

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

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

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

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

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

<link rel=stylesheet type=text/css href=imagens.css /> Este código é responsável pela visualização html. exibição de Imagens

Leia mais

Manual de Uso Wordpress

Manual de Uso Wordpress Manual de Uso Wordpress Olá! Seja bem vindo ao igual. Agora você pode transmitir todas as notícias importantes da sua comunidade de forma mais simples e eficiente. Mas para que isso aconteça, primeiro

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

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

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

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte

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

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

HTML AULA 1 Prof. Daniela Pires XHTML... 3 1. HTML... 4 2. HEAD... 4 2.1. TITLE... 4 2.2METAS TAG... 5. 2.2.1 keywords... 5. 2.2.2 description...

HTML AULA 1 Prof. Daniela Pires XHTML... 3 1. HTML... 4 2. HEAD... 4 2.1. TITLE... 4 2.2METAS TAG... 5. 2.2.1 keywords... 5. 2.2.2 description... Sumário HTML... 3 XHTML... 3 1. HTML... 4 2. HEAD... 4 2.1. TITLE... 4 2.2METAS TAG... 5 2.2.1 keywords... 5 2.2.2 description... 6 2.2.3 Author... 6 2.2.4 Cache-Control... 6 2.2.5 Content-language...

Leia mais

VOLT DATA LAB OUTUBRO 2015. Tutorial ridiculamente detalhado e ilustrado para publicação de uma página web no GitHub Pages

VOLT DATA LAB OUTUBRO 2015. Tutorial ridiculamente detalhado e ilustrado para publicação de uma página web no GitHub Pages VOLT DATA LAB OUTUBRO 2015 Tutorial ridiculamente detalhado e ilustrado para publicação de uma página web no GitHub Pages * Este é um tutorial em fase beta escrito por @ProjetoStock, com base no curso

Leia mais

FTIN - Módulo de WebDesign. Prof. Iran Pontes

FTIN - Módulo de WebDesign. Prof. Iran Pontes FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas

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

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável.

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. Índice Geral TULogarUT 3 TUConhecer e VisualizarUT 6 TUÁrea de Edição / Blocos e

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

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

Leia mais

WEBDESIGN. Atividade Estruturada. Professor Constantino Neto. Campus Praça XI. Erik Lopes de Oliveira 2011.0224.0125

WEBDESIGN. Atividade Estruturada. Professor Constantino Neto. Campus Praça XI. Erik Lopes de Oliveira 2011.0224.0125 WEBDESIGN Atividade Estruturada Professor Constantino Neto Campus Praça XI Erik Lopes de Oliveira 2011.0224.0125 2013 Medicina Legalis Objetivos Este site foi desenvolvido para compor o projeto de identidade

Leia mais

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio

Leia mais

Manual 2010 Webmaster

Manual 2010 Webmaster Manual 2010 Webmaster Menu 1. Acesso ao sistema 2. Campanhas 2.1 Ver Campanhas Disponíveis 2.2 Minhas Campanhas 3. Formatos 3.1 Banners Automáticos 3.2 Banners Manuais 3.3 E-mail Marketing 3.4 Vitrines

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

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

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

Leia mais

Orientações básicas para a produção de conteúdo no Site dos NREs

Orientações básicas para a produção de conteúdo no Site dos NREs SECRETARIA DE ESTADO DA EDUCAÇÃO SUPERINTENDÊNCIA DE ESTADO DA EDUCAÇÃO DIRETORIA DE TECNOLOGIAS EDUCACIONAIS COORDENAÇÃO DE APOIO AO USO AS TECNOLOGIAS Orientações básicas para a produção de conteúdo

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem

Leia mais

Hospedagem de site. Prof. Marciano dos Santos Dionizio

Hospedagem de site. Prof. Marciano dos Santos Dionizio Hospedagem de site Prof. Marciano dos Santos Dionizio Hospedagem de site O mundo está preparado para ver suas páginas? O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho

Leia mais

SEJA BEM-VINDO AO SISTEMA DE PUBLICAÇÃO WEB

SEJA BEM-VINDO AO SISTEMA DE PUBLICAÇÃO WEB SEJA BEM-VINDO AO SISTEMA DE PUBLICAÇÃO WEB O Sistema de Publicação Web é uma ferramenta intuitiva e eficiente, para quem procura uma maneira dinâmica de public ar e administrar conteúdos diversos para

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Estrutura Viewlets 21 Portlets 26 2 Estrutura Intermediário Depois de conhecer a estrutura principal do Plone e realizar as configurações

Leia mais

Instalando o IIS 7 no Windows Server 2008

Instalando o IIS 7 no Windows Server 2008 Goiânia, 16/09/2013 Aluno: Rafael Vitor Prof. Kelly Instalando o IIS 7 no Windows Server 2008 Objetivo Esse tutorial tem como objetivo demonstrar como instalar e configurar o IIS 7.0 no Windows Server

Leia mais

Apostila de criação de website

Apostila de criação de website Apostila de criação de website "Webnode" OBS: Informações e imagens retiradas do webnode O que é o WebNode : O WebNode é um sistema de criação de sites de fácil utilização. # Grátis. Sem burocracias, #

Leia mais

Instalando o IIS 7 no Windows Server 2008

Instalando o IIS 7 no Windows Server 2008 Goiânia, 16/09/2013 Aluno: Rafael Vitor Prof. Kelly Instalando o IIS 7 no Windows Server 2008 Objetivo Esse tutorial tem como objetivo demonstrar como instalar e configurar o IIS 7.0 no Windows Server

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

STK (Start Kit DARUMA) Driver Spooler para impressoras Não-Fiscais DR700M e DR700H no Windows Seven

STK (Start Kit DARUMA) Driver Spooler para impressoras Não-Fiscais DR700M e DR700H no Windows Seven STK (Start Kit DARUMA) Driver Spooler para impressoras Não-Fiscais DR700M e DR700H no Windows Seven Driver Spooler é um driver que faz a impressão de um modo gráfico, onde poderá imprimir imagens como

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

********* TUTORIAL : COMO FAZER THEMES *********

********* TUTORIAL : COMO FAZER THEMES ********* ********* TUTORIAL : COMO FAZER THEMES ********* Por : Thamiris Figueiredo (carpe-dieem). Não copie, por favor. Se for usar, credite e não saia repassando o código, dizendo que ele é seu, PORQUE NÃO É.

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Tutorial USERADM. Inserindo conteúdos no site

Tutorial USERADM. Inserindo conteúdos no site Tutorial USERADM Inserindo conteúdos no site Como acessar o Administrador de Conteúdos do site? 1. Primeiramente acesse o site de sua instituição, como exemplo vamos utilizar o site da Prefeitura de Aliança-TO,

Leia mais

WEBSEMANTICA PROF.DANIELA PIRES

WEBSEMANTICA PROF.DANIELA PIRES WEBSEMÂNTICA A websemântica é um conjunto de regras estabelecido pela W3C, para que todos os navegadores são navegar entenda o conteúdo e os SPIDERS (ROBOTS DE BUSCA) GOOGLE ROBOTS BING ROBOTS YAHOO ROBOTS,

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

TUTORIAL NetBeans 6.5

TUTORIAL NetBeans 6.5 TUTORIAL NetBeans 6.5 O NetBeans é uma apenas uma Interface para auxiliar o desenvolvimento. Nessa IDE conseguimos trabalhar com a linguagem Java, que estamos estudando na disciplina Linguagem de Programação

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

GUIA DE USO FRAMEWORK APLANAR Versão 0.1 21/07/2014 Cópia distribuída e controlada

GUIA DE USO FRAMEWORK APLANAR Versão 0.1 21/07/2014 Cópia distribuída e controlada GUIA DE USO SUMÁRIO 1. Utilizando o FrameWork Aplanar... 2 1.1 GRID... 2 1.1.1 Barra de menus:... 2 1.1.2 Barra de ferramentas:... 3 1.1.3 Barra de pesquisa:... 3 1.2 MENU ADMINISTRATIVO... 4 1.2.1 Usuário:...

Leia mais

Portal Institucional do IFPB

Portal Institucional do IFPB Capacitação para utilização do Portal Institucional do IFPB Introdução O objetivo dessa treinamento é apresentar o site do IFPB, e capacitar os novos usuários para utilizar suas principais ferramentas

Leia mais

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas

Leia mais

teste