Com Inserir Un Enllaç En Un Bàner

Taula de continguts:

Com Inserir Un Enllaç En Un Bàner
Com Inserir Un Enllaç En Un Bàner

Vídeo: Com Inserir Un Enllaç En Un Bàner

Vídeo: Com Inserir Un Enllaç En Un Bàner
Vídeo: tutorial 2 editar blog 1 de 2 2024, Abril
Anonim

Si teniu un bàner, però no hi ha cap codi html ja preparat per inserir-lo a la pàgina, no és tan difícil afegir l'enllaç que necessiteu. Fins i tot si el bàner es fa mitjançant tecnologia flash. A continuació es descriuen les possibles opcions per organitzar enllaços a bàners en formats gràfics i flash en el codi font.

Com inserir un enllaç en un bàner
Com inserir un enllaç en un bàner

Instruccions

Pas 1

Si el bàner té un dels formats gràfics (gif, jpg, png, bmp), n’hi haurà prou amb posar l’etiqueta d’imatge dins de l’etiqueta d’enllaç. Primer, formeu l’etiqueta d’imatge. En el llenguatge de marques de les pàgines web (HTML - HyperText Markup Language - "llenguatge de marcatge d'hipertext"), la seva versió més senzilla té aquest aspecte: aquí "l'adreça relativa" de la imatge s'especifica a l'atribut src. En aquesta versió, el navegador assumirà que la imatge es troba a la mateixa carpeta del servidor on es troba la pàgina en què s’insereix el bàner. Però és millor especificar una "adreça absoluta":

Pas 2

Hi ha alguns atributs més per afegir a aquesta etiqueta. Dos atributs indicaran les dimensions del bàner (alçada i amplada). Són atributs opcionals: la imatge es mostrarà sense ells si tot va bé quan es carrega la pàgina del servidor al navegador. Però si per alguna raó la imatge no es carrega, la manca de dimensions pot conduir al fet que la resta d’elements de disseny estiguin fora de lloc. L'etiqueta de mida serà així:

Pas 3

Per defecte, el navegador dibuixa un marge blau al voltant de les imatges de l'enllaç. Per evitar-ho, afegiu un atribut de vora amb un valor nul a l'etiqueta del bàner:

Pas 4

Afegiu un atribut (títol) més, que contindrà el text de la descripció quan passeu el cursor del ratolí per sobre del bàner:

Pas 5

Heu preparat l'etiqueta d'imatge amb els atributs més importants, ara cal que la col·loqueu a l'etiqueta d'enllaç. Cada hiperenllaç està format per dues etiquetes: obertura i tancament: l'etiqueta d'obertura conté l'atribut href, que conté l'adreça per enviar la sol·licitud. Entre aquestes dues etiquetes d'enllaç i inseriu l'etiqueta del bàner: el codi HTML del bàner amb l'enllaç està llest, no oblideu substituir: - a l'atribut href: "https://kakprosto.ru" per l'adreça del vostre enllaç per al bàner; - a l'atribut src: "https://kakprosto.ru/banner.gif" a l'adreça de la imatge del bàner; - a l'atribut width: "468" per a l'amplada del vostre bàner; - a l'atribut alçada: "60" per a l'alçada del vostre bàner; - a l'atribut title: "És un bàner!" text emergent per al vostre bàner;

Pas 6

Tot això es referia a bàners d'imatges, però també hi ha bàners fets amb tecnologia flash. Per inserir un enllaç en una pel·lícula flash de manera estàndard, heu de tenir no només el bàner en si, sinó també el seu codi font. A més, podeu editar el codi font i després compilar la pel·lícula Flash només en un editor especialitzat; un editor de text normal no és adequat per a això. Tanmateix, hi ha una manera de superar totes aquestes dificultats, limitant-vos a editar només HTML i CSS (Cascading Style Sheets - "fulls d'estil en cascada"). El llenguatge CSS s’utilitza per obtenir una descripció més detallada (en comparació amb l’HTML) de l’aspecte dels elements de la pàgina. Amb la seva ajuda, es poden construir estructures multicapa bastant complexes a les pàgines. L'utilitzarem col·locant el bàner Flash a la capa inferior i col·locant la capa amb l'enllaç a sobre. El codi HTML del bàner tindrà aquest aspecte:

No oblideu substituir els atributs d’amplada i alçada (en dos llocs), el nom de la bandera banner.swf (en dos llocs) i l’adreça d’enllaç https://kakprosto.ru (en un sol lloc). I el codi SCC corresponent a aquest codi HTML hauria de ser així:

div.linkedFlashContainer {position: relative; índex z: 1; vora: 0 px; amplada: 468 px; alçada: 60 px}

a.flashLink {posició: absoluta; índex z: 2; amplada: 468 px; alçada: 60 px; background: url (spacer.gif) sense repetir;}

Aquí s’utilitza una imatge transparent (de qualsevol mida) anomenada spacer.gif. I aquí també no us oblideu de canviar la mida de l’amplada i l’alçada (en dos llocs).

Recomanat: