Tareas Web Anterior

Tarea 1:

En una hoja de papel bond, crear el diagrama para su sitio web incluyendo también el tema que tratara y los colores a utilizar. Por ejemplo:

Tener la informacion completa e imagenes a utilizar para el sitio web

RECUERDE QUE DEBE MODIFICAR:

  • TITULO DE LA PAGINA PRINCIPAL
  • TEXTO DEL MENU EN BASE AL TEMA ELEGIDO
  • NOMBRE Y APELLIDO EN EL PIE DE PAGINA
  • IMAGEN DE FONDO DEL ENCABEZADO
  • COLOR O IMAGEN DE FONDO DEL CONTENEDOR PRINCIPAL
  • IMAGENES DE REDES SOCIALES
  • COLORES DE FONDO A UTILIZAR EN LA PAGINA
  • COLORES A UTILIZAR EN EL TEXTO
  • EFECTOS APLICADOS CON CSS

SCRIPT PARA GALERIA DE IMAGENES

Agregar el siguiente código antes de la etiqueta <body> en la Galería de Imágenes:

 
 function galeriaImg(cualImg){
  document.getElementById(“imagenes”).src=cualImg+’.jpg’;
 }

Agregar el siguiente atributo a la etiqueta de Imágenes pequeñas: onclick=’galeriaImg(1)’

Ejemplo:
<img src=’0.jpg’ onclick=’galeriaImg(0)’>
<img src=’1.jpg’ onclick=’galeriaImg(1)’>
<img src=’2.jpg’ onclick=’galeriaImg(2)’>
<img src=’3.jpg’ onclick=’galeriaImg(3)’>


Imágenes para sitio Web Clic Aqui

Página Contactanos Clic Aqui

Imagenes para Scrollbar Clic Aqui

Imagenes para Menu Clic Aqui

Estilos para etiqueta nav(menú):

Estilos para Imágenes de Redes Sociales:

Estilos para Barras de Desplazamiento:

Estilos para Galería de Imágenes:

Estilos para Texto del menú:

Estilos para cada celda del menú:

Estilos para pie de página:

Tarea 3:

Crear las paginas con los temas que llevara el sitio web, incluyendo la galería de imágenes, aplicarles diferentes etiquetas y estilos.

Agregar los vínculos hacia las paginas y las redes sociales, el archivo index.html debe quedar de la siguiente manera:

 

Crear la pagina Index y la hoja de estilos que se estaban realizando en la practica.

En la hoja de estilos crear el siguiente codigo:

Crear una pagina web, la cual sera la galería de imágenes, que contenga solo las imagenes y un titulo si usted desea.

Por ejemplo

Codigo script en la pagina Index:

function vinculo(URL){
document.getElementById(“frame”).src = URL;
}

Luego en el cuerpo del documento tiene que quedar de la siguiente manera:

<ul id=’menu’>
<li class=”principal” onclick=”vinculo(‘inicio.html’)”>Inicio</li>
<li onclick=”vinculo(‘historia.html’)”>Historia</li>
<li onclick=”vinculo(‘imagenes.html’)”>Imagenes</li>
<li onclick=”vinculo(‘productos.html’)”>Productos</li>
</ul>
</div>

Codigo script en la pagina Imagenes:

function vinculos(URL){
ventana=window.open(URL,”imagenes”,”width=400 height=300 top=200 left=30″)
}
function cerrar_vinculos(){
ventana.close()
}

Luego en la etiqueta de cada imagen se haria lo siguiente:

<img src=”Imagenes/1.jpg” width=”800″ height=”600″ onClick=”vinculos(‘Imagenes/1.jpg’)” onMouseOut=”cerrar_vinculos()” style=”cursor:pointer;”  />

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: