Artigos Downloads Cursos Deutriex

quinta-feira, 23 de outubro de 2008

Para inserir botões e imagens

Para inserir imagens em títulos de complementos da WordPress (Estrangeiramente conhecido como Widgets)



Visite seu blogue, e acresente o sufixo "/wp-admin" no endereço e pressione Enter

Vá em Design » Widgets. A WordPress oferece dezenas de complementos. A maioria deles é possível personalizar o título, onde você pode usar um código HTML (HyperText Markup Language » Linguagem de marcação de Hipertexto).

Todos as etiquetas HTML tem estrutura igual (<ETIQUETA atributo="valor">conteúdo</ETIQUETA> ou simplesmente <ETIQUETA atributo="valor">). A etiqueta HTML usada para inserir imagens é IMG e o atributo que indica a locarização da imagem é src (Abreviação de SOURCE, que em Inglês significa FONTE), cujo seu valor é o endereço (imagem.ext) relativo ou absoluto da imagem (http://www.meuservidor.com.br/imagens/imagem.ext), onde imagem é variável referente ao nome da imagem em si e ext é variável de sua extensão (JPG, PNG, BMP ou GIF), os quatro formatos aceitos pelos atuais navegadores do mercado.

O comando básico na prática para inserir a imagem fica (<IMG src="http://www.meuservidor.com.br/imagens/imagem.ext">). Cole este comando, e altere o endereço dela para que armazenada na sua conta da WordPress ou armazenada na sua conta de álbum de fotos na Internet. No caso da conta na WordPress, o endereço da imagem sempre é absoluto e sempre segue um padrão » (http://meu-blogue.files.wordpress.com/yyyy/mm/imagem.ext), meu-blogue é o endereço do seu blogue, yyyy é o ano com quatro dígitos (ex.: 2008) e mm é o mês com dois dígitos (ex.: 10), e como já explicado anteriormente, imagem é o nome da imagem em si e ext é variável de sua extensão (JPG, PNG, BMP ou GIF).

Em seguida, confirme, clicando em "Aplicar", "Salvar Mudanças". A página de adminstração será atualizada e uma mensagem será mostrada que tudo ocorreu como esperado.

Para inserir uma imagem de fundo (Experimental)



A inserção da imagem de fundo no Diário Deutrix na Web por enquanto é experimental, mas se você tem curiosidade de como inserí-la:

Visite seu blog, e acresente o sufixo "/wp-admin" no endereço e pressione Enter

Vá em Design » Widgets. Selecione o complemento "Texto", e digite o comando básico de inserção de imagem (<IMG src="http://www.meuservidor.com.br/imagens/imagem.ext">). crie um segundo atributo (STYLE), cujo seu conteúdo são regras de estilo em linguagem Cascading Style Sheets (CSS). Insira como valor, o comando position: absolute; left: 0; top: 0; width: 100%; height: 1500%; z-index: -1, Onde

position é a posição (static [Estático], relative [Relative] e absolute [Absoluto]). O padrão é static. O comando absolute orienta ao objeto IMG (Imagem) a ficar em posição ABSOLUTA em relação aos outros objetos HTML da página. Os comandos left [da esquerda] e top [do topo], têm como valor (por padrão em pixels) de quantos pixels o objeto pode ficar disante da esquerda e do topo do documento. Lembrando que os valores podem ser negativos, que neste caso não é recomendado para não dar impressão de uma imagem "cortada". O atributo width é o valor referente à largura, onde 100% refere-se à 100% da largura do documento. (Esse valor muda quando você redimensiona horizontalmente a janela de seu navegador) e 1500% equivale à 15 vezes o tamanho da "tela" do documento (a parte visível do documento verticalmente). O efeito não fica como esperado, pois a imagem fica "esticada". Mais você pode usar este mesmo princípio (com poucas diferenças) para inserir um moisaco, onde a imagem deve ser escolhida com cuidado para que as peças do moisaco "se encaixem" para dar uma estética mais apurada, e consequentemente, agradar ao público.

Faça todo o prodecimento dito anteriormente, mas use a etiqueta DIV. O formato básico ficará (<div style="position: absolute; left: 0; top: 0; width: 100%; height: 1500%; z-index: -1; background: url(http://meu-blogue.files.wordpress.com/yyyy/mm/moisaic.png)"> </div>)

Nenhum comentário:

Postar um comentário

 


© Copyright 2006 - 2014 Deutriex.