En diseño gráfico seguimos intentando imitar un logo con las herramientas aprendidas, yo tube que empezar de cero porque extrañamente el archivo no se guardó.
Ésta es mi prueba de validación:
<H1 <B>ALIGN=”CENTER”>PRUEBA DE VALIDACIÓN PERSONAL</B><H1>
<P>Fecha: Módulo: MF0950_2 Unidad Formativa: UF1303.4
Nombre:
</P>
<BODY>
<H2><U>INSTRUCCIONES:</U>Esta prueba de validación se compone de una parte escrita y una de código en Dreamweaver. <b>NO MÁS DE 20 LÍNEAS POR PREGUNTA</b></H2>
1.- Ejercicio de código: elabora una página web EN HTML5 sobre “tu propia tienda”, tendrás que inventarte el nombre, tipo de tienda, imagen corporativa… Primero haz el boceto en papel y estructura el ejercicio, cuando lo hayas pensado tendrás que crear un Index.html con:
El logo de la empresa (que sea una imagen de sustitución)
Un menú (creado por tablas) que nos lleve a dos páginas de nuestra empresa, al “¿Quién somos?” y a la página de contacto. Recuerda que ambas deben mantener la imagen corporativa, logo etc.
Una marquesina <marquee>; </marquee>
Una barra de separación horizontal
Mostrar dos de nuestros artículos principales a la venta y que sean dos imágenes enlazadas a cualquier parte (por ejemplo, si es una tienda de nintendo que se muestren dos juegos de Mario Bros)
Página de ¿Quién somos? con:
Que se muestren 4 articulos que tengas en venta insertados mediante una tabla. Recuerda que debes mantener la imagen corporativa de la tienda (mismo logo, colores.. que en el .Index) y que en el resultado final, quede claro a qué te dedicas y como trabajas entre otras cosas que incluye una página de “¿Quiénes somos?” (con explicaciones, fotos de la propia tienda, lo que quieras).
Página de Contacto con:
Un código de maps con tu ubicación (usar iframe de google maps). En esta pagina recuerda que debes mantener todo lo anteriormente citado.
ASPECTOS GENERALES DE LAS PÁGINAS:
Todas las páginas deben de tener una imagen anclada a la que no le afecte el scroll en la que al clicar, nos lleve a la parte superior de la página.
A pie de página una frase tipo: para más información y que esté enlazada al envío de un correo electrónico (un mailto)
Tienen que estar validadas y con los errores debidamente corregidos (errores, no advertencias)
Todas las imágenes correctamente editadas en cuanto a tamaño y resolución.
NO USAR PLANTILLAS DEL DREAMWEAVER.
* Realizar boceto en papel, aquí tienes un boceto de ejemplo:
2.- Escribe y explica la estructura básica de html.
3.- Cómo insertarías un enlace para que te dirija a otra página y cómo lo harías para que te lleve a esa página dentro del iframe.
4.- Cómo enlazarías una imagen y pon un ejemplo de código.
5- Cómo guardarías una imagen para que no pierda la transparencia.
6-Busca una página web con poca usabilidad y explica por qué.
7.- Por qué es tan importante el atributo “alt” en las imágenes.
8-Cómo harías para cambiar la velocidad de una marquesina.
9.- Cómo pondrías una imagen que funcione como anclaje para ir al principio de la página. Pon un ejemplo de código.
10.- Explica los 3 tipos de prioridad en la accesibilidad (A, AA, AAA).
11.- Cómo obtendrías las coordenadas de un mapa de imagen y pon un ejemplo de código de un polígono en forma de estrella.Y estas son las pertinentes páginas que creé
PÁGINA PRINCIPAL
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>uf1302.4</title> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <style type="text/css"> .tamaño { font-size: 14px; text-align: center; font-weight: bold; } body,td,th { color: #FFF; font-size: 24px; } .tamaño { color: #FFF; } .tamaño { font-size: 36px; } .tamaño { font-size: 36; } .tamaño { font-size: 24px; } .tamaño { color: #000; } </style> </head> <body background="C:\Users\ETC5\Desktop\melani/22849.jpg" onLoad="MM_preloadImages('clave.gif')"> <a name="arriba"></a> <hr> <MARQUEE BEHAVIOR=alternate><FONT FACE=arial COLOR=white SIZE=5>Porque la vida está llena de música y la música de vida</FONT> </MARQUEE> <div align="center"></div> <div align="right"> <table width="1244" height="1628" border="0"> <tr> <td colspan="2"><img src="bienvenidos-21.png" alt="bienvenidos" width="750" height="266" align="middle"></td> <td width="33"> </td> <td width="260" height="268"><div align="right"><a href="uf1302.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','clave.gif',1)"><img src="Tornado-Logo.gif" width="253" height="192" id="Image1"></a></div></td> </tr> <tr> <td colspan="2"><p align="center" class="tamaño"><font color="white">Acabais de entrar en el paraiso musical que todo mortal e inmortal desea conocer y disfrutar. Poneos cómodos, que el viaje será movidito, sujetad bien vuestros auriculares y olvidaos deL mundo por un rato. </p> <div align="center">BIENVENIDOS AL PARAISO ,MELÓMANOS</div></font></p> </td> <td rowspan="4"> </td> <td height="126" align="center" valign="baseline"><a href="uf1302(1).html"> <img src="boton quienes somos.gif" width="215" height="89" alt="botón quienes somos"></a></td> </tr> <tr> <td colspan="2"><p class="tamaño"> </p></td> <td height="129" align="center" valign="baseline"><div align="right"><a href="uf1302(2).html"><img src="boton contacto.gif" width="232" height="85" alt="boton contacto"></a></div></td> </tr> <tr> <td colspan="2" align="center"><img src="Novedades.gif" alt="novedades" width="493" height="211"></td> <td height="170"><div align="right"></div></td> </tr> <tr> <td width="357" height="845" align="center"><a href="http://www.taringa.net/comunidades/alt-rock-metal-music/8485286/Babymetal---Babymetal-Album-2014-J-Metal.html"><img src="35733-andltahrefhttpwwwjpo-18nm.jpg" width="262" height="218" alt="baby metal"></a></td> <td width="576" align="center"><a href="http://www.spirit-of-metal.com/discographie-groupe-Dead_By_April-type-Albums-l-es.html"><img src="descarga (3).jpg" width="225" height="225" alt="dead by april"></a></td> <td><div align="right"></div></td> </tr> </table></div> <div style="position:fixed;right:0;bottom:0;"><a href="#arriba"><img src="rock.gif" width="200" height="145" /></div> </body> </html>
QUIENES SOMOS
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>uf1302.4</title> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <style type="text/css"> body,td,th { color: #FFF; font-size: 24px; } </style> </head> <body background="C:\Users\ETC5\Desktop\melani/22849.jpg" onLoad="MM_preloadImages('clave.gif')"> <a name="arriba"></a> <hr> <MARQUEE BEHAVIOR=alternate><FONT FACE=arial COLOR=white SIZE=5>Porque la vida está llena de música y la música de vida</FONT> </MARQUEE> <div align="right"> <table width="1486" height="820" border="0"> <tr> <td width="274" align="center"><img src="35733-andltahrefhttpwwwjpo-18nm.jpg" width="209" height="198" alt="baby metal"></td> <td width="206" align="center"><p>DISCO DE BABY METAL</p> <p> </p></td> <td width="992" height="249"><div align="right"><a href="uf1302.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','clave.gif',1)"><img src="Tornado-Logo.gif" width="253" height="192" id="Image1"></a></div></td> </tr> <tr> <td align="center"><img src="51T4bITiwkL.jpg" width="216" height="177" alt="lacuna coil"></td> <td align="center">DISCO DE LACUNA COIL</td> <td height="136"><div align="right"><a href="uf1302(1).html"><img src="boton quienes somos.gif" width="255" height="84" alt="botón quienes somos"></a></div></td> </tr> <tr> <td align="center"><img src="descarga (3).jpg" width="214" height="172" alt="dead by april"></td> <td>DISCO DE DEAD BY APRIL</td> <td align="right" valign="top"><a href="uf1302(2).html"><img src="boton contacto.gif" width="254" height="88" alt="botón contacto"></a></td> </tr> <tr> <td align="center"><img src="emilie-autumn-opheliac.jpg" width="209" height="152" alt="emilie autumn"></td> <td>DISCO DE EMILIE AUTUMN</td> <td valign="top"> </td> </tr> <tr> <td colspan="2" align="center"> </td> <td valign="top"> </td> </tr> <tr> <td colspan="2" align="center">¿YA LE ECHASTE UN VISTAZO A NUESTROS PRODUCTOS? ¿QUIERES SABER MÁS DE NOSOTROS?</td> <td valign="top"> </td> </tr> <tr> <td colspan="2" align="center">Somos una pequeña pyme situada imaginariamente en Castro Urdiales (Cantabria) Obviamente no colocamos fotos del lugar real porque no existimos. Puedes visitarnos mentalmente cuando quieras, estamos las 24 horas todos los días, menos los sábados</td> <td valign="top"><div align="right"></div></td> </tr> </table></div> <div style="position:fixed;right:0;bottom:0;"><a href="#arriba"><img src="rock.gif" width="200" height="145" /></div> </body> </html>
CONTACTO
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>uf1302.4</title>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body,td,th {
color: #FFF;
}
</style>
</head>
<body background="C:\Users\ETC5\Desktop\melani/22849.jpg" onLoad="MM_preloadImages('clave.gif')">
<a name="arriba"></a>
<hr>
<MARQUEE BEHAVIOR=alternate><FONT FACE=arial COLOR=white SIZE=5>Porque la vida está llena de música y la música de vida</FONT>
</MARQUEE>
<div align="right">
<table width="1537" height="542" border="0" align="center">
<tr>
<td width="600" align="center" valign="middle"><p>¿SABES DONDE ESTAMOS?</p>
<p>AQUÍ MISMO, NO TIENE PÉRDIDA</p></td>
<td width="133" align="center" valign="middle"><p> </p></td>
<td width="163"> </td>
<td width="103"> </td>
<td width="256"> </td>
<td width="256" height="273"><div align="right"><a href="uf1302.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','clave.gif',1)"><img src="Tornado-Logo.gif" width="253" height="192" id="Image1"></a></div></td>
</tr>
<tr>
<td rowspan="2" align="center" valign="middle"><iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2899.893392373229!2d-3.2135268!3d43.3792531!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1405511158896" width="600" height="450" frameborder="0" style="border:0"></iframe></td>
<td rowspan="2" align="center" valign="middle"> </td>
<td align="center"><a href="mailto:name@email.com">¿QUIERES SABER MÁS?</a></td>
<td> </td>
<td> </td>
<td height="136"><div align="right"><a href="uf1302(1).html"><img src="boton quienes somos.gif" width="255" height="84" alt="botón quienes somos"></a></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><a href="uf1302(2).html"><img src="boton contacto.gif" width="254" height="88" alt="botón contacto"></a></div></td>
</tr>
</table></div>
<div style="position:fixed;right:0;bottom:0;"><a href="#arriba"><img src="rock.gif" width="200" height="145" /></div>
</body>
</html>
Pero queda más bonito con fotos
 |
| Añadir leyenda |
No hay comentarios:
Publicar un comentario