A maior rede de estudos do Brasil

Grátis
99 pág.
Curso Joomla

Pré-visualização | Página 7 de 15

gerenciar pastas para melhor organização 
do conteúdo. 
 
 
 
Armazenando imagem no joomla 
 
Clique em “Create New Folder” e dê o nome de “img_noticias” 
Obs: Não são aceitos nomes com espaço 
 
Acesse a pasta e clique no botão “Enviar” escolha uma imagem do seu 
computador (preferencialmente alguma que tenha relação com o artigo que 
criamos) e faça o upload 
 
 
 
 
 
 
 
 
 
36 
 
Inserindo imagens em artigos 
 
Esse procedimento é bem simples, vamos acessar nosso único artigo criado até 
o momento e clicar na área de edição, onde se encontra o texto 
(preferencialmente antes da primeira palavra) e em seguida clique no botão 
Insert/Edit Image conforme mostrado abaixo 
 
 
 
IMPORTANTE: Caso você não esteja usando o JCE a janela que se abrirá 
mostrará apenas dois campos solicitando que você digite o caminho no qual a 
imagem se encontra (a pasta padrão se chama image) e o título da mesma. 
 
Como nós estamos usando o Editor JCE, a janela apresentada será essa: 
 
 
 
Vamos começar de baixo para cima: 
 
Perceba que é possível visualizar toda estrutura de nosso gerenciador de mídias 
e não apenas isso, mas também, por meio dos botões laterais, criar novos 
diretórios e fazer o upload de novas imagens sem a necessidade de irmos até o 
gerenciador de arquivos. 
 
Lembrando que essa facilidade existe por estarmos usando o componente JCE 
37 
 
Procure e acesse a pasta que criamos, chamada “img_noticias” e 
posteriormente clique sobre a imagem que iremos inserir. Perceba que 
imediatamente, parte dos campos na área superior serão preenchidos 
 
 
 
URL: É o caminho onde se encontra a imagem dentro do joomla 
 
Alternate Text: Você se lembra do parâmetro “alt” do HTML ? Pois bem, aqui 
no gerenciador de imagem, o joomla automaticamente cria essa informação, 
essencial para os motores de busca 
 
Dimensions: O tamanho real da imagem, considerando width x height 
(largura por altura). Note que o campo “proportional” por padrão está ativo, ele 
facilita muito caso haja a necessidade de diminuir ou aumentar a imagem, isso 
porque basta alterar um dos campos e clicar no botão ENTER para que ele 
altere o o outro campo. 
 
O campo seguinte, se chama Alignment (Alinhamento) e possui as opções 
Left, Right e Center, o interessante é que, conforme alteramos esse campo, é 
possível verificar na janela “preview” (lado direito) exatamente como ficará o 
designer mesclando nossa imagem com o texto que já se encontra no artigo 
 
 
 
Se deixarmos do jeito que está teremos uma imagem bem alinhada, contudo, 
com o texto praticamente colado na mesma. Para evitar isso, temos a opção 
Margin que como o próprio nome sugere, cria um espaçamento entre imagem 
e texto 
 
O parâmentro “Equal Values” funciona exatamente como o “Proportional” do 
Dimensions, ou seja, ele atribui o primeiro valor a todos os outros campos 
38 
 
Caso deseje, é possível, através da última opção adicionar uma borda em volta 
da imagem, bem como configurar largura, estilo e cor 
 
Após realizar todas as configurações desejadas, clique em Insert e verifique o 
resultado no Front-End 
 
OBS: Apesar de não abordarmos nesse material, a janela utilizada para 
gerenciar a imagem ainda possui outras duas funções que se encontram no 
topo, sendo uma delas a possibilidade de alterar a imagem ao passarmos o 
mouse por cima (mouseover) e a outra funções avançadas em para estilizar 
com CSS 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39 
 
Aula 07 - TAREFA COMPLEMENTAR 
 
Crie mais 6 novos artigos respeitando as características abaixo: 
 
 Todos devem estar ligados a categoria Notícias 
 Insira ao menos uma imagem em cada um dos artigos 
 Use o botão “LEIA MAIS” em todos eles 
 Crie ao menos um link externo em cada artigo 
 NÃO coloque nenhum deles em DESTAQUE 
 Retire todos os botões adicionais (e-mail, autor, data, acessos, etc.) 
 Procure manter o mesmo padrão de fonte para todos os artigos 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40 
 
Aula 08 - CONFIGURANDO O MENU 
Diferente de outras plataformas ou até mesmo da criação de sites apenas 
utilizando HTML e CSS, o Joomla não necessita que seja construída uma página 
para apresentar cada conteúdo. Na verdade, ele nos possibilita gerenciarmos as 
informações e apresentarmos onde desejamos. 
 
Essa versatilidade só existe devido a utilização de um menu, onde cada link é 
considerado uma página independente. 
 
Na aula anterior criamos diversos artigos, mas não os colocamos em 
DESTAQUE, porquê? Porque nosso objetivo agora é apresentar esse conteúdo 
em uma área específica para notícias. 
 
Adicionando novo item ao menu 
 
Acesse Menus – Main Menu 
 
Perceba que o único item existente é o “Home”, mas o que desejamos é um 
botão específico para apresentar nossas notícias, certo ? Sendo assim, clique 
em Novo 
 
Antes de mais nada, vamos escrever o título desse item que nada mais é que o 
nome do botão, no caso, “Notícias”. 
 
Ao lado, temos o campo Apelido que, caso fique em branco copiará o título. 
Esse apelido é justamente o que aparecerá em nossa URL ao acessarmos esse 
link. 
 
 
 
Na área central temos o campo “Tipo de Item de Menu”, para escolher, 
devemos clicar no botão azul Selecionar 
 
A janela que se abre possui diversas opções, aqui é onde escolhemos o que 
exatamente deverá ser apresentado na área de conteúdo de nosso novo botão 
(conhecido como content, guarde essa palavra). 
 
Boa parte dos itens apresentados nessa janela estão diretamente ligados aos 
componentes instalados em nosso joomla, ou seja, em geral fazemos a 
configuração de um componente e depois determinamos em qual botão/link do 
site ele irá aparecer. 
 
 
41 
 
Exemplo: 
 
Digamos que vamos selecionar a opção FONTE DE NOTÍCIAS, isso significa que 
esse componente só irá aparecer quando clicarmos em Notícias. 
 
É possível criar diversos links e configurar um componente (e apenas um) para 
cada, como já foi descrito nesse material, apenas com as extensões já 
presentes no joomla é possível criar um belo site. 
 
Diferentes formas de apresentar o conteúdo através 
de um link 
 
Ainda nessa janela, vamos clicar em “Artigos”, fazendo isso, teremos uma série 
de outras opções. Perceba que ao lado de cada uma existe uma breve 
descrição que facilita o entendimento da sua função. 
 
 
 
Como podemos ver, é possível apresentar uma lista de categorias, somente um 
artigo ou ainda mostrar somente os artigos que estão marcados com 
DESTAQUE (esse último é justamente a configuração usada pelo item de menu 
HOME) 
 
 
 
 
 
 
42 
 
 
Vamos escolher Categoria como Blog 
 
Após o carregamento da página, ele solicitará logo abaixo a categoria, no nosso 
caso, colocaremos “Notícias”. 
 
 
 
Até aqui: Estamos criando um novo botão em nosso site que 
apresentará nossos artigos em formato de Blog, artigos esses 
somente da categoria Notícias 
 
Configurando Layout dos Artigos 
 
Na parte de cima, temos diversas opções (em azul), por hora, vamos escolher 
“Opções de Layout do Blog” 
 
 
 
A próxima janela nos trás quatro campos e são eles que gerenciam a forma 
como nosso conteúdo será apresentado. Aqui iremos inserir apenas números, 
contudo, precisamos compreender a função de cada um. Vejamos: 
 
#Artigos Principais 
 
Significa que ele apresentará o artigo ocupando toda a janela do site onde está 
o conteúdo, se colocarmos aqui o número um, ele apresentará somente um 
artigo baseado nessa regra, se colocarmos dois ou mais, ele organizará 
colocando um em baixo do outro. 
 
43 
 
#Introdução Artigos 
 
A quantidade que for colocada aqui será apresentada obrigatoriamente em 
baixo do(s) artigo(s) principal,