1p c7 Crear 4 Paginas para navegar, con botones

Abro PowerPoint para crear los botones de mi pagina web

Luego clic en menú Insertar, Formas e inserto Rectángulo: Esquinas Redondeadas


Luego clic derecho sobre la forma y clic en Editar Texto.


Luego Escribo el nombre del botón INICIO


Luego le doy estilo en Formato de Forma, Bisel, Redondo suave.



Luego copio ese botón 4 veces



Luego a cada botón le pongo un nombre, Inicio, Imágenes, Productos y Contáctenos.
Luego, clic derecho en la línea de cada botón y clic en la opción Guardar como Imagen.



Guardo los botones como imagen, en la carpeta donde tengo mi pagina web creada.
En Tipo: escojo guardar en formato PNG que es el formato sin fondo y en Nombre: le pongo el nombre de cada botón.




En mi carpeta se deben observar los botones guardados.



Luego empiezo a editar mi código fuente para poner los vínculos correspondientes que me lleven a cada una de las paginas que voy a copiar y que luego editar.


En esta imagen podemos observar que las dos imágenes se ven en la pagina, observo que las imágenes están en la carpeta con el formato PNG y por ultimo veo el código que programo para que los vínculos lleguen a las diferentes paginas.
NOTA: El código como siempre se digita debajo de el cuerpo del programa(body).



Donde el código explicado es para:

Escribo las 4 líneas de código, 1 para cada imagen con su vinculo.

Luego, de insertar el código, guardo y reviso que en mi pagina queden los botones y que al apuntarle a cada botón me muestre el vinculo al que se dirige.

Luego voy a la carpeta y copio la pagina web



Le hago 4 copias en la misma carpeta y le cambio los nombres de las paginas, los mismos nombres que puse en el código, en los vínculos.

Ahora si voy a poder navegar en los botones de mi pagina web, sin que se rompa ningún vinculo. Pero antes, debo cambiarle a cada pagina su información para identificarla.


Le podemos escribir una línea de código que la identifique y luego llenarla con la información correspondiente. Ejemplo:

<h1> Esta es mi pagina de imágenes</h1>

y listo, solo nos queda personalizar cada pagina con la información que corresponda  y navegar por ella..
















No hay comentarios.:

Publicar un comentario

inicio

Clic para taller de HARDWARE  CLIC PARA ENTRAR A UNIDADES DE ALMACENAMIENTO Taller unidades de medida de archivos Taller software  Bie...