99 pág.

Pré-visualização | Página 8 de 15
porém, diferente da opção anterior, se colocarmos aqui o valor dois ou acima, ele irá organizar os artigos um ao lado do outro, dividindo em colunas baseado no valor digitado no próximo campo #Colunas É a quantidade de colunas em que serão divididos os artigos apresentados no campo anterior, em outras palavras, para uma melhor organização, é interessante que o mesmo valor colocado em #Introdução Artigos seja colocado aqui também #Links Aparecerá no final, após todos os outros. Aqui é definida a quantidade de artigos que apresentarão somente os seus respectivos títulos Para compreendermos melhor, preencha da seguinte forma: Clique em Salvar e veja o resultado no front-end. Perceba que em nosso menu já temos um novo link Ao clicar nele, podemos verificar todos os nossos artigos, preste bem atenção na disposição dos mesmos: 44 Veja que o primeiro artigo ocupa de forma completa a área do conteúdo, os dois que se seguem estão abaixo divididos exatamente em duas colunas e por fim temos quatro links apresentando somente o título com uma barra de paginação ao término dos mesmos É justamente a parametrização feita no Layout desse item de menu, significa que se desejarmos três artigos “completos”, um em baixo do outro, devemos colocar esse número no primeiro campo (#Artigos Principais) e assim sucessivamente. Retirando o título do artigo do botão “Leia Mais” Por padrão, os botões “Leia Mais” dos nossos artigos vem acompanhado do título do mesmo Como retirar isso? Vá até o item de menu que acabamos de criar (Notícias) e acesse “Opções do Artigo” Note que temos as mesmas opções em cada um dos artigos criados, a diferença é que aqui conseguimos alterar todos que estão dentro desse link de uma única vez. Vá até “Exibir Título no Leia Mais” e marque como OCULTAR 45 Podemos ver o resultado abaixo: Criando item de menu inativo É muito natural, quando estamos criando um site, montar os itens de menu e deixá-los provisoriamente inativos até construir o conteúdo correspondente. Ao criar páginas em HTML, é possível usar # dentro da TAG <a>, dessa forma, o menu apesar de aparecer, se torna inativo. Exemplo: <a href=”#”>Nome do Botão</a> Vamos aprender a criar algo semelhante em nosso menu do joomla. Acesse Menus – Main Menu – Adicionar Item de Menu No campo “Título do Menu”, vamos colocar Site Oficial e em “Tipo de Item de Menu” selecione Links de Sistema – URL Externa Agora basta inserir # no campo link 46 Dessa forma teremos um link que existe, mas se encontra inativo, em qualquer momento, podemos retornar e inserir uma URL externa ou simplesmente alterar o “tipo de item do menu” 47 Aula 09 - TAREFA COMPLEMENTAR Realize as etapas abaixo para criar um novo item de menu com conteúdo 1 Crie uma categoria chamada Personagens 2 Copie para sua máquina fotos dos personagens referente o seu filme 3 Crie três novos artigos ligados a categoria Personagens 4 Crie um novo item de menu em forma de blog 5 Conecte o novo item de menu a categoria Personagens Importante: Não esqueça de conectar cada novo artigo a categoria Personagens Cada artigo deverá fazer a descrição de um personagem diferente Cada artigo deverá ter uma foto Armazene as fotos em uma pasta chamada personagens Centralize a foto e deixe o texto abaixo da mesma Coloque o “Leia Mais” entre as fotos e os textos Retire o Título dos artigos do botão “Leia Mais” A estrutura de layout do novo item de menu não deverá ter nenhum artigo principal ou links inferiores, contudo, deverá apresentar os 3 artigos criados em 3 colunas 48 Aula 10 - MÓDULOS Conforme explicado anteriormente, os módulos se assemelham aos componentes, contudo, não possuem tantas funções, mas tem a vantagem de serem atribuídos a qualquer área do site além aparecerem em mais de uma página Muitos componentes também podem ser apresentados como módulos, isso significa que além de ter diversas opções de personalização, é possível apresentá-los em diferentes lugares. Conhecendo um pouco sobre Templates Para compreendermos melhor essa diferença entre componentes e módulos e darmos continuidade em nosso processo de criação, vamos explicar um pouco sobre outra importante extensão, os templates. Templates nada mais são que o “esqueleto” do site, onde toda informação é apresentada. Cada template possui diversas posições e elas são preenchidas pelos módulos. O Joomla em sua versão mais atual vem com dois diferentes templates, o protostar é aquele que vem instalado como padrão. Mais a frente veremos mais detalhes sobre configurações de templates, por enquanto, basta conhecermos as posições do protostar, vejamos abaixo como fazer isso: Acesse Extensões – Gerenciador de Temas 49 Em seguida, clique em opções (ícone em formato de engrenagem do lado superior direito) Altere a Opção Preview Module Position para “ATIVADO” Com isso agora temos a possibilidade de enxergar as áreas do template. Para isso, vá até o front-end e independente da página digite ao término da URL: ?Tp=1 e aperte ENTER Perceba que é possível visualizar as posições do template (em vermelho) mesmo as que não estão sendo utilizadas. Inclusive, quando uma posição não é utilizada, ela simplesmente “se retrai” permitindo que os conteúdos próximos venham a se expandir, todavia, se encaixarmos algum conteúdo em uma posição ainda não utilizada, o template se adapta para comportar aquela informação. As posições do Template Protostar Vamos compreender melhor como é feita a distribuição das posições do template padrão, observe que as três primeiras áreas são: Position 0, Position 1 e banner, sendo um em baixo do outro 50 Perceba que os três preenchem a área completa do template, de ponta a ponta, diferente dos que veremos a seguir: Position 8, Position 3 e Position 7. Todos eles estão um ao lado do outro Apesar de não aparecer (em nenhum template), existe uma área que é usada para receber o conteúdo de nossos artigos e também para apresentar diversos componentes, chama-se “content”. Basta observar e ver que o local onde está o artigo realmente não apresenta nenhuma janela mostrando o nome da posição e ele(s) se encontra(m) bem embaixo do Position 3 Por fim, na parte inferior, temos as três últimas posições, sendo Position 2, Footer e Debug. A primeira citada está na mesma linha do Position 3 e do content e as outras duas se assemelham as do topo e se espalham de forma horizontal por todo o site 51 Um template, portanto, se assemelha a um quebra cabeça no qual podemos ir encaixando nosso conteúdo (componentes e módulos) de forma a construir o designer desejado. Gerenciando Módulos Agora que conhecemos nosso template e suas respectivas posições, vamos voltar aos Módulos. Acesse Extensões – Gerenciador de Módulos Já temos, por padrão, três módulos instalados sendo: Breadcrumbs (usado como uma espécie de mapa, mostrando o local onde o visitante se encontra) Main Menu (usado para gerar o menu de nosso site) 52 Finalmente temos o Login Form (módulo usado para o gerenciamento interno. Veremos mais sobre ele adiante) Existem três colunas importantes nessa área de gerenciamento de módulos, sendo Posição, Tipo e Páginas No primeiro temos exatamente