99 pág.
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,
