Ejercicios: Newsletter y tabla de posiciones

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

User avatar
xacarana
Site Admin
Posts: 975
Joined: Fri Jan 15, 2016 6:13 pm

Ejercicios: Newsletter y tabla de posiciones

Post by xacarana » Mon Mar 06, 2017 3:55 pm

Acá se debe publicar:

En el correo del profesor solo se envía el boletin, los enlaces a tareas y al boletin se publican en este post 8-)
  • Wireframe manual
  • Wireframe digital
  • Código
  • Enlace funcional de cada ejercicio
  • Enlace del boletin y el enlace de las tareas
  • Gif con el funcionamiento
La ruta temporal para ver los newsletters de ejemplo son:
Tenga en cuenta que el newsletter se va a visualizar en un gestor de correo, la siguiente imagen muestra la visualización de un wireframe cuando se ve el newsletter desde gmail

Image

Y para terminar el ejercicio de la tabla de posiciones se usa como referente los siguientes sitios:
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
Cristina Fontan
Posts: 3
Joined: Mon Jan 16, 2017 2:18 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by Cristina Fontan » Mon Mar 06, 2017 4:05 pm

:mrgreen: Wireframe manual
Image

:mrgreen: Wireframe digital
Image
Image

:mrgreen: Link boletín
http://cristinafontan.info/boletin/index.html

:mrgreen: GIF Funcionamiento del boletín
Image

:mrgreen: Código por recortes de Photoshop

Code: Select all

<html>
<head>
<title>Boletín #56, Clínica de la Candelaria</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table id="Tabla_01" width="701" height="1756" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="16">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_01.gif" width="700" height="13" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="13" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_02.gif" width="111" height="147" alt="" style="display: block;"></td>
		<td colspan="3">
			<a href="https://www.sura.com/blogs/">
				<img src="http://www.cristinafontan.info/boletin/images/Blog.jpg" width="125" height="138" border="0" alt="" style="display: block;"></a></td>
		<td colspan="8" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_04.gif" width="464" height="147" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="138" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_05.gif" width="125" height="9" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="9" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="10">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_06.jpg" width="350" height="474" alt="" usemap="#Map" id="Mapa" style="display: block;"></td>
					<map name="Map" id="Map">
				    <area href="https://medlineplus.gov/spanish/ency/article/003171.htm" alt="" title="HOMBRO" href="#" shape="poly" coords="165,108,139,121,114,128,178,144,236,136,244,125,212,110,188,117" />

				    <area href="https://medlineplus.gov/spanish/abdominalpain.html" alt="ABDOMEN" title="" href="#" shape="poly" coords="134,278,194,311,244,290,246,331,188,379,125,336" />

				    <area href="https://medlineplus.gov/spanish/chestpain.html" alt="" title="PECHO" href="#" shape="poly" coords="130,260,116,226,141,154,247,154,260,212,244,271,193,289" />

				    <area href="https://medlineplus.gov/spanish/musculardystrophy.html" alt="" title="MUSLO" href="#" shape="poly" coords="117,365,176,407,178,475,121,477,110,420" />

				    <area href="https://medlineplus.gov/spanish/musculardystrophy.html" alt="" title="MUSLO" href="#" shape="poly" coords="190,409,251,364,258,426,253,477,192,471" />

				    <area href="https://medlineplus.gov/spanish/headache.html" alt="" title="CABEZA" href="#" shape="poly" coords="184,13,156,36,156,55,191,57,225,54,216,27" />

				    <area href="https://medlineplus.gov/spanish/arminjuriesanddisorders.html" alt="" title="BRAZO" href="#" shape="poly" coords="86,166,30,427,55,441,90,331,120,205,103,169" />

				    <area href="https://medlineplus.gov/spanish/arminjuriesanddisorders.html" alt="" title="BRAZO" href="#" shape="poly" coords="269,155,296,247,307,334,304,442,271,371,257,264" />
				</map>
		<td colspan="6">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_07.jpg" width="350" height="474" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="474" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="16">
			<a href="https://www.sura.com/blogs/calidad-de-vida/">
				<img src="http://www.cristinafontan.info/boletin/images/Calidad-de-Vida.jpg" width="700" height="52" border="0" alt="" style="display: block;"></a></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="52" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="16">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_09.jpg" width="700" height="56" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="56" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td rowspan="15">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_10.jpg" width="28" height="1013" alt="" style="display: block;"></td>
		<td colspan="8" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/dolor.gif" width="303" height="154" alt="" style="display: block;"></td>
		<td colspan="2" rowspan="15">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_12.jpg" width="29" height="1013" alt="" style="display: block;"></td>
		<td colspan="3">
			<a href="https://www.sura.com/blogs/calidad-de-vida/6-datos-esenciales-sobre-la-diabetes-que-deberias-conocer-para-prevenirla.aspx">
				<img src="http://www.cristinafontan.info/boletin/images/Terapia.jpg" width="280" height="37" border="0" alt="" style="display: block;"></a></td>
		<td colspan="2" rowspan="8">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_14.jpg" width="60" height="421" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="37" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_15.jpg" width="280" height="178" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="117" alt=" style="display: block;""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_16.jpg" width="303" height="50" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="50" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/masa.gif" width="303" height="155" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="11" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="2">
			<a href="https://www.sura.com/blogs/calidad-de-vida/5-practicas-no-convencionales-para-cuidarte-y-divertirte.aspx">
				<img src="http://www.cristinafontan.info/boletin/images/Masa.jpg" width="243" height="29" border="0" alt="" style="display: block;"></a></td>
		<td rowspan="4">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_19.jpg" width="37" height="206" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="29" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_20.jpg" width="243" height="177" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="115" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_21.jpg" width="303" height="51" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="51" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/comida.gif" width="303" height="155" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="11" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="4">
			<a href="https://www.sura.com/blogs/calidad-de-vida/6-claves-basicas-para-alimentarte-sanamente.aspx">
				<img src="http://www.cristinafontan.info/boletin/images/Nutre.jpg" width="308" height="27" border="0" alt="" style="display: block;"></a></td>
		<td rowspan="7">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_24.jpg" width="32" height="592" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="27" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_25.jpg" width="308" height="422" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="117" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_26.jpg" width="303" height="406" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="305" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_27.jpg" width="207" height="143" alt="" style="display: block;"></td>
		<td colspan="3" rowspan="2">
			<a href="https://www.sura.com/blogs/">
				<img src="http://www.cristinafontan.info/boletin/images/Clinica.jpg" width="101" height="121" border="0" alt="" style="display: block;"></a></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="101" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_29.jpg" width="23" height="42" alt="" style="display: block;"></td>
		<td rowspan="2">
			<a href="https://www.facebook.com/epssura/?ref=br_rs">
				<img src="http://www.cristinafontan.info/boletin/images/facebook.jpg" width="23" height="24" border="0" alt="" style="display: block;"></a></td>
		<td rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_31.jpg" width="14" height="42" alt="" style="display: block;"></td>
		<td rowspan="2">
			<a href="https://www.instagram.com/clinicaalessandrateles/">
				<img src="http://www.cristinafontan.info/boletin/images/Insta.jpg" width="23" height="24" border="0" alt="" style="display: block;"></a></td>
		<td rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_33.jpg" width="10" height="42" alt="" style="display: block;"></td>
		<td rowspan="2">
			<a href="https://twitter.com/epssura">
				<img src="http://www.cristinafontan.info/boletin/images/Twit.jpg" width="25" height="24" border="0" alt="" style="display: block;"></a></td>
		<td colspan="2" rowspan="3">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_35.jpg" width="185" height="42" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="20" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_36.jpg" width="101" height="22" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="4" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_37.jpg" width="23" height="18" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_38.jpg" width="23" height="18" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/Sin-titulo-1_39.jpg" width="25" height="18" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="1" height="18" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="28" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="23" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="23" height="1" alt=""  style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="14" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="23" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="10" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="25" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="90" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="95" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="19" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="10" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="207" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="36" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="37" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="28" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.cristinafontan.info/boletin/images/espacio.gif" width="32" height="1" alt="" style="display: block;"></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

:mrgreen: HTML/CSS escrito por mi

Code: Select all

<!DOCTYPE html>
<html>

<head>

	<title>
	BOLETÍN #56 - Clínica de La Candelaria
		
	</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,500,700" rel="stylesheet">
	<meta charset="UTF-8">

</head>


<body>

	<div id="cabezote">
		<img id="logo" src="img/logo.png">
		<div id="linea"></div>
		<h2>Boletín #56</h2>
		<h1>SEMANA DE LA <br> SALUD MUSCULAR</h1>

	</div>

	<table cellspacing="0" cellpadding="0">
		<tr id="ppal">
			<td> 
				<img src="img/cuerpo.jpg" alt="" usemap="#Map" id="Mapa" />
				<map name="Map" id="Map">
				    <area href="https://medlineplus.gov/spanish/ency/article/003171.htm" alt="" title="HOMBRO" href="#" shape="poly" coords="165,108,139,121,114,128,178,144,236,136,244,125,212,110,188,117" />

				    <area href="https://medlineplus.gov/spanish/abdominalpain.html" alt="ABDOMEN" title="" href="#" shape="poly" coords="134,278,194,311,244,290,246,331,188,379,125,336" />

				    <area href="https://medlineplus.gov/spanish/chestpain.html" alt="" title="PECHO" href="#" shape="poly" coords="130,260,116,226,141,154,247,154,260,212,244,271,193,289" />

				    <area href="https://medlineplus.gov/spanish/musculardystrophy.html" alt="" title="MUSLO" href="#" shape="poly" coords="117,365,176,407,178,475,121,477,110,420" />

				    <area href="https://medlineplus.gov/spanish/musculardystrophy.html" alt="" title="MUSLO" href="#" shape="poly" coords="190,409,251,364,258,426,253,477,192,471" />

				    <area href="https://medlineplus.gov/spanish/headache.html" alt="" title="CABEZA" href="#" shape="poly" coords="184,13,156,36,156,55,191,57,225,54,216,27" />

				    <area href="https://medlineplus.gov/spanish/arminjuriesanddisorders.html" alt="" title="BRAZO" href="#" shape="poly" coords="86,166,30,427,55,441,90,331,120,205,103,169" />

				    <area href="https://medlineplus.gov/spanish/arminjuriesanddisorders.html" alt="" title="BRAZO" href="#" shape="poly" coords="269,155,296,247,307,334,304,442,271,371,257,264" />
				</map>
			</td>	
			
			<td> 

				<div id="mapatexto">

					<div id="box">
						<p> < Selecciona en la imagen de la izquierda el lugar afectado</p> 
					</div>

					<p class="titulo"> LO QUE TU DOLOR <br> MUSCULAR DICE <br> DE TU SALUD</h1>

					<p class="corrido">Fusce ut mollis est, sit amet condimentum neque. Cras varius lorem id semper pulvinar. Integer eget consectetur ligula. Nulla facilisis nec felis vitae iaculis. Donec consequat purus metus, ut vestibulum mauris maximus non. Vestibulum sit amet erat vulputate, rutrum elit eleifend, ornare mauris. Integer maximus justo sem, eu convallis enim sodales id. Proin sagittis semper purus sit amet finibus.</p>
				</div>
			</td>
		</tr>

		<tr>
			<td colspan="2" id="rojo">
				<a href="https://medlineplus.gov/spanish/bonesjointsandmuscles.html"> IR AL ESPECIAL DE SALUD MUSCULAR </a>
			</td>
			<td></td>
		</tr>

		<tr id="espacio">
			<td></td>
			<td></td>
		</tr>

		<tr>
			<td class="arti"><img src="img/dolor.gif"></td>
			<td>
				<p class="titulo">TERAPIA MUSCULAR</p>
				<p class="corrido">In pretium vitae massabla in molestie. Pellentesque mollis euismod dolor. Quisque dolor mauris, mollis eu placerat a, scelerisque in risus. Duis ante purus, pellentesque sit amet ante non, luctus dictum est. Nunc tempus ipsum velit, non tempor est pellentesque a. Vestibulum facilisis dapibus fermentum.  </p>
			</td>
		</tr>

		<tr>
			<td class="arti"><img src="img/masa.gif"></td>
			<td>
				<p class="titulo">MASA MUSCULAR</p>
				<p class="corrido">In pretium vitae massabla bla in molestie. Pellentesque mollis euismod dolor. Quisque dolor mauris, mollis eu placerat a, scelerisque in risus. Duis ante purus, pellentesque sit amet ante non, luctus dictum est. Nunc tempus ipsum velit, non tempor est pellentesque a. Vestibulum facilisis dapibus fermentum.  </p>
			</td>
		</tr>

		<tr>
			<td class="arti"><img src="img/comida.gif"></td>
			<td>
				<p class="titulo">NUTRE TUS MÚSCULOS</p>
				<p class="corrido">In pretium vitae massabla blain molestie. Pellentesque mollis euismod dolor. Quisque dolor mauris, mollis eu placerat a, scelerisque in risus. Duis ante purus, pellentesque sit amet ante non, luctus dictum est. Nunc tempus ipsum velit, non tempor est pellentesque a. Vestibulum facilisis dapibus fermentum. </p>
			</td>
		</tr>

		<tr id="espacio">
			<td></td>
			<td></td>
		</tr>

	</table>

<div id="pata">
	<img id="labora" src="img/pata.jpg" usemap="#Map2">

<map name="Map2" id="Map2">
    <area a href="https://www.facebook.com/clinicaelrosariomed/?rf=100594590061488" alt="" title="FACEBOOK" href="#" shape="poly" coords="54,347,54,368,76,368,73,348" />
    <area a href="https://www.instagram.com/ceutecuida/?hl=es" alt="" title="INSTAGRAM" href="#" shape="poly" coords="89,348,90,369,111,369,110,347" />
    <area a href="https://twitter.com/clinicarosario" alt="" title="TWITTER" href="#" shape="poly" coords="125,347,127,367,148,370,145,347" />
    [...]
</map>
	
	<!--
	<div id="content">
		
	<p id="gordo">LABORATORIOS CON LA MÁS ALTA TECNOLOGÍA Y LA MEJOR CALIDAD HUMANA</p>
	<p id="flaco">Contáctanos y agenda tu cita</p>
	<div id="redes">
		<img src="img/Facebook.png">
		<img src="img/Instagram.png">
		<img src="img/Twitter.png">
	</div>
	<img id="logob" src="img/logoblanco.png">
	</div>
	-->

</div>
		
</body>

</html>

Code: Select all

body{
	width: 700px;
	margin-top: 0px;
	margin-left: 0px;
}

h1{
	font-family: 'Montserrat', sans-serif;
	font-size: 27px;
	font-weight: 700;
	color: #8f0507;
	line-height: 23px;
	margin-left: 50%;
	margin-top: 20px;
}

h2{
	font-family: 'Montserrat', sans-serif;
	font-size: 27px;
	color: #8f0507;
	font-weight: 300;
	margin-left: 50%;
	margin-bottom: -10px;
	margin-top: 0px;
	padding-top: 30px;
}

#ppal{
	background-color: white;
	margin-bottom: 0px;

}

#logo{
	position: absolute;
	margin-left: 107px;
	margin-top: 18px;
}

#linea{
	position: absolute;
	margin-left: 50%;
	left:-65px;
	margin-top: 25px;
	border-left: 3px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-color: #8f0507;
	border-style: dotted;
	height: 110px;
}

#cabezote{
	position: relative;
	margin: 0 auto;
	background-color: #caddda;
	padding: 0px;
	height: 150px;
	width: 700px;
	padding-bottom: 10px;
	padding-bottom: 10px;

}

.corrido{
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	text-align: justify;
	margin-bottom: 10px;

}

.titulo{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: grey;
	font-size: 25px;
	margin-bottom: -5px;
}

#box{
	
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	background-color: white;
	width:230px;
	height: 60px;
	border-style: dashed;
    border-width: 2px;
    font-size: 14px;
    padding-left: 20px;
    border-color: #8f0507;
    color: #8f0507;
	margin-bottom: -10px;
}

#mapatexto{
	margin-top: 38%;
}

#Mapa{
	margin-bottom: 0px;
}

#rojo{

	height: 20px;
    background-color: #bf262d;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    box-shadow: 0px 5px 5px grey;
   	padding: 15px;
    text-align: center;
    margin: 0;
}

#rojo a{
	color: white;
	text-decoration: none;
}

table{
	background-color: #caddda;
	border-collapse: collapse;
}

table p{
	padding-right: 25px;
}

.arti{
	text-align: center;
}
.arti img{
	border-style: solid;
	border-width: 6px;
	border-color: white;
	margin: 15px;
	box-shadow: 0px 5px 5px grey;
}

.arti img{
	width: 300px;
	margin-top: 20px;
}

#espacio {
	height:25px;
	
}


#gordo{
	z-index: 2;
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color:white;
	font-size: 20px;
	width: 345px;
	margin-left:20px;
}

#flaco{
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color:white;
	font-size: 15px;
	width: 345px;
	margin-top: 100px;
	margin-left:20px;
}

/*
#redes{
	position: absolute;
	margin-top: 125px;
	width:100px;
	margin-left: 20px;
}

#logob{
	position: absolute;
	margin-left: 83%;
	width: 95px;
	margin-top: 20px;
}


 #content{
 	z-index: 2;
 }

*/

#pata{
	position: absolute;

}
:mrgreen: Link Tareas
http://cristinafontan.info/tareas/index.html
Last edited by Cristina Fontan on Mon Mar 27, 2017 10:52 pm, edited 1 time in total.

User avatar
santiggz
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by santiggz » Mon Mar 13, 2017 4:15 pm

Wireframe manual :geek:
Image

Wireframe digital :geek:
Image

Image

Código HTML por recortes de Photoshop :geek:

Code: Select all

<html>
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Newsletter.jpg) -->
<table id="Table_01" style="display: block;" width="961" height="1996" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="13">
			<img src="images/index_01.gif" style="display: block;" width="960" height="224" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="224" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<a href="http://www.astromia.com/solar/sistemasolar.htm">
				<img src="images/sistemasolar.gif" style="display: block;" width="960" height="394" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="394" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<img src="images/index_03.gif" style="display: block;" width="960" height="20" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<a href="http://invdes.com.mx/ciencia-ms/6499-solo-uno-de-los-siete-planetas-de-trappist-1-podria-albergar-vida.html">
				<img src="images/Trappist-1.jpg" style="display: block;" width="960" height="388" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="388" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<img src="images/index_05.gif" style="display: block;" width="960" height="224" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="224" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_06.gif" style="display: block;" width="24" height="245" alt=""></td>
		<td colspan="7">
			<a href="http://cnnespanol.cnn.com/2017/03/10/la-nasa-encuentra-una-nave-espacial-que-desaparecio-hace-8-anos/">
				<img src="images/Nave_Espacial_Perdida.jpg" style="display: block;" width="463" height="221" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_08.gif" style="display: block;" width="21" height="245" alt=""></td>
		<td colspan="3">
			<a href="http://rpp.pe/ciencia/espacio/la-nasa-publico-una-fotografia-unica-de-la-superficie-de-marte-noticia-1033443">
				<img src="images/Fotografia_Superficie_Marte.jpg" style="display: block;" width="433" height="221" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_10.gif" style="display: block;" width="19" height="245" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="221" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/index_11.gif" style="display: block;" width="463" height="24" alt=""></td>
		<td colspan="3">
			<img src="images/index_12.gif" style="display: block;" width="433" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<a href="http://www.elespectador.com/noticias/ciencia/eclipse-solar-con-anillo-de-fuego-embellecera-el-domingo-el-cielo-suramericano-articulo-681586">
				<img src="images/Eclipse_Solar.jpg" style="display: block;" width="960" height="285" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="285" alt=""></td>
	</tr>
	<tr>
		<td colspan="10">
			<a href="http://www.elespectador.com/noticias/ciencia/eclipse-solar-con-anillo-de-fuego-embellecera-el-domingo-el-cielo-suramericano-articulo-681586">
				<img src="images/Eclipse_Solar-15.jpg" style="display: block;" width="637" height="1" border="0" alt=""></a></td>
		<td rowspan="4">
			<a href="http://www.lanasa.net/">
				<img src="images/NASA.gif" style="display: block;" width="217" height="192" border="0" alt=""></a></td>
		<td colspan="2">
			<a href="http://www.elespectador.com/noticias/ciencia/eclipse-solar-con-anillo-de-fuego-embellecera-el-domingo-el-cielo-suramericano-articulo-681586">
				<img src="images/Eclipse_Solar-17.jpg" style="display: block;" width="106" height="1" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="10">
			<img src="images/index_17.jpg" style="display: block;" width="637" height="36" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="images/index_18.jpg" style="display: block;" width="106" height="214" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/index_19.jpg" style="display: block;" width="126" height="178" alt=""></td>
		<td>
			<a href="https://twitter.com/elsegundoluz">
				<img src="images/Astronomia_ciencia.gif" style="display: block;" width="75" height="72" border="0" alt=""></a></td>
		<td rowspan="3">
			<img src="images/index_21.jpg" style="display: block;" width="50" height="178" alt=""></td>
		<td>
			<a href="https://www.facebook.com/astronomiaentubolsillooficial/?fref=ts">
				<img src="images/Astronomia_bolsillo.gif" style="display: block;" width="67" height="72" border="0" alt=""></a></td>
		<td rowspan="3">
			<img src="images/index_23.jpg" style="display: block;" width="46" height="178" alt=""></td>
		<td>
			<a href="https://www.instagram.com/astronomia_arqueologia/">
				<img src="images/Astronomia.gif" style="display: block;" width="74" height="72" border="0" alt=""></a></td>
		<td colspan="3" rowspan="3">
			<img src="images/index_25.jpg" style="display: block;" width="199" height="178" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="72" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_26.jpg" style="display: block;" width="75" height="106" alt=""></td>
		<td rowspan="2">
			<img src="images/index_27.jpg" style="display: block;" width="67" height="106" alt=""></td>
		<td rowspan="2">
			<img src="images/index_28.jpg" style="display: block;" width="74" height="106" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="83" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_29.jpg" style="display: block;" width="217" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="24" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="102" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="75" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="50" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="67" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="46" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="74" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="49" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="129" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="217" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="87" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" style="display: block;" width="19" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Gif del funcionamiento del boletín :geek:

Image

Tabla de posiciones :geek:

Image

Código HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Ejercicio Equipos de Futbol</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <meta charset="utf-8">
</head>
<body>
    
<table cellpadding="10" cellspacing="0">
    <tr id="fila01">
        
        <td>POS</td>
        <td>EQUIPO</td>
        <td>NOMBRE</td>
        <td>PT</td>
        <td>PJ</td>
        <td>PG</td>
        <td>PE</td>
        <td>PP</td>
        <td>DG</td>

    
    </tr>
    
    <tr class="fila02">
        
        <td>1</td>
        <td><img src="img/Real-Madrid-icon.png">
        </td>
        <td id="texto">Real Madrid</td>
        <td>22</td>
        <td>18</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>10</td>

    
    </tr>
    
    <tr class="fila03">
        
        <td>2</td>
        <td><img src="img/FC-Barcelona-icon.png">
        </td>
        <td id="texto2">Barcelona</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr class="fila02">
        
        <td>3</td>
        <td><img src="img/Atletico-Madrid-icon.png">
        </td>
        <td id="texto">Atlético Madrid</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr>
        
        <td>4</td>
        <td><img src="img/Athletic-Bilbao-icon.png">
        </td>
        <td>Athletic Bilbao</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr class="fila02">
        
        <td>5</td>
        <td><img src="img/Malaga-CF-icon.png">
        </td>
        <td id="texto">Malaga CF</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr>
        
        <td>6</td>
        <td><img src="img/Osasuna-icon.png">
        </td>
        <td>Osasuna</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
      <tr class="fila02">
        
        <td>7</td>
        <td><img src="img/Real-Betis-icon.png">
        </td>
        <td id="texto">Real Betis</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr>
        
        <td>8</td>
        <td><img src="img/Real-Sociedad-icon.png">
        </td>
        <td>Real Sociedad</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr class="fila02">
        
        <td>9</td>
        <td><img src="img/Real-Valladolid-icon.png">
        </td>
        <td id="texto">Real Villadolid</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
    <tr>
        
        <td>10</td>
        <td><img src="img/Villareal-icon.png">
        </td>
        <td>Villareal</td>
        <td>20</td>
        <td>15</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>8</td>

    
    </tr>
</table>


</body>
Código CSS

Code: Select all

body{
	font-family: arial;


}

table{
	width: 1900px;
	text-align: center;
	position: relative;

}
#fila01{
	background-color: #B6FFC9;
	font-weight: bold;
	width: 200px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

#texto{
	color: white;
	background-color: #4C4C4C;
}

#texto:hover{
	color: #B6FFC9;
	background-color: #4C4C4C;
}
.fila02{
	color: white;
	background-color: #4C4C4C;
}

Enlace para las tareas :geek:

http://santiggz.com/trabajos/
Last edited by santiggz on Wed Mar 29, 2017 11:49 am, edited 3 times in total.

User avatar
Sofía Mejía
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by Sofía Mejía » Wed Mar 22, 2017 11:52 pm

]Wireframe manual
Image

Wireframe digital
Image

Boletín
Image

Gif:
Image

Enlace boletín:
http://www.sofiamejia.com/boletin/

Enlace tareas:
http://www.sofiamejia.com/tareas/

Código Boletín

Code: Select all

<html>
<head>
<title>flor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (flor) -->
<table id="Tabla_01" width="960" height="1561" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">

			<img src="imgs/mapa.gif" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="https://es.wikipedia.org/wiki/P%C3%A9talo" shape="rect" coords="53,154,299,452" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Pistilo" shape="rect" coords="401,212,478,323" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Antera" shape="rect" coords="489,95,536,192" />
   
</map>

			</td>
			

	</tr>
	<tr>
		<td colspan="3">
			<img src="imgs/flor_02.gif?1490722554" width="602" height="521" alt=""></td>
		<td>
			<img src="imgs/gif_flor.gif?1490722554" width="336" height="521" alt=""></td>
		<td rowspan="3">
			<img src="imgs/flor_04.gif?1490722554" width="22" height="585" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="imgs/flor_05.gif?1490722554" width="36" height="64" alt=""></td>
		<td>
			<a href="https://www.floristeriaydetallessanmarcos.com/">
			<img src="imgs/boton.gif?1490722554" width="320" height="46" alt="" ></a></td>

		<td colspan="2" rowspan="2">
			<img src="imgs/flor_07.gif?1490722554" width="582" height="64" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imgs/flor_08.gif?1490722554" width="320" height="18" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imgs/espacio.gif" width="36" height="1" alt=""></td>
		<td>
			<img src="imgs/espacio.gif" width="320" height="1" alt=""></td>
		<td>
			<img src="imgs/espacio.gif" width="246" height="1" alt=""></td>
		<td>
			<img src="imgs/espacio.gif" width="336" height="1" alt=""></td>
		<td>
			<img src="imgs/espacio.gif" width="22" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html


______________________________________________________________________________________


Captura Pantalla Tabla
Image

Código HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>


	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<table>
  <tr class="titulos">
	<td>POS</td>
	<td>Equipo</td>
	<td>PT</td>
	<td>PJ</td>
	<td>PG</td>
	<td>PE</td>
	<td>PP</td>
	<td>DG</td>
  </tr>

  <tr>
    <td>1</td>

	<td>
	<img src="img/1.png">
	Athletic Bilbao</td>
	<td>3</td>
	<td>0</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>5</td>
  </tr>

  <tr>
  <td>2</td>
  <td>	
	<img src="img/2.png">
	Atletico Madrid</td>
	<td>5</td>
	<td>6</td>
	<td>6</td>
	<td>5</td>
	<td>6</td>
	<td>5</td>
  </tr>	

   <tr>
   <td>3</td>
	<td>
	<img src="img/3.png">
	Celta de Vigo</td>
	<td>4</td>
	<td>4</td>
	<td>5</td>
	<td>8</td>
	<td>6</td>
	<td>8</td>
  </tr>	
  
  <tr>
  <td>4</td>
	<td>
	<img src="img/4.png">
	Deportivo Alaves</td>
	<td>0</td>
	<td>0</td>
	<td>8</td>
	<td>7</td>
	<td>9</td>
	<td>6</td>
  </tr>	

  <tr>
  <td>5</td>
	<td>
	<img src="img/5.png">
	Deportivo La Coruna</td>
	<td>7</td>
	<td>3</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td>9</td>
  </tr>	

  <tr>
  <td>6</td>
	<td>
	<img src="img/6.png">
	Espanyol</td>
	<td>3</td>
	<td>7</td>
	<td>9</td>
	<td>0</td>
	<td>0</td>
	<td>6</td>
  </tr>	

  <tr>
  <td>7</td>
	<td>
	<img src="img/7.png">
	Barcelona</td>
	<td>6</td>
	<td>5</td>
	<td>5</td>
	<td>3</td>
	<td>3</td>
	<td>7</td>
  </tr>	

  <tr>
  <td>8</td>
	<td>
	<img src="img/8.png">
	Getafe</td>
	<td>3</td>
	<td>3</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td>8</td>
  </tr>	

  <tr>
  <td>9</td>
	<td>
	<img src="img/9.png">
	Malaga</td>
	<td>5</td>
	<td>5</td>
	<td>5</td>
	<td>6</td>
	<td>8</td>
	<td>8</td>
  </tr>	

  <tr>
  <td>10</td>
	<td>
	<img src="img/10.png">
	Osasuna</td>
	<td>6</td>
	<td>6</td>
	<td>8</td>
	<td>7</td>
	<td>4</td>
	<td>9</td>
  </tr>	




</table>

</body>
</html>
Código CSS

Code: Select all

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.titulos{
	color:white;
	background-color: green

}
td:hover{
	color:orange;
}
Last edited by Sofía Mejía on Wed Mar 29, 2017 2:17 am, edited 8 times in total.

User avatar
Daniel Zapata
Posts: 4
Joined: Mon Jan 16, 2017 2:18 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by Daniel Zapata » Sun Mar 26, 2017 11:36 pm

:geek: Wireframe Manual :geek:
Image

:ugeek: Wireframe Digital :ugeek:
Image

;) Imagen del News Letter ;)
Image

:D HTML del News Letter :D

Code: Select all

<html>
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Newsletter.jpg) -->
<table id="Tabla_01" width="600" height="871" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
		
			<img src="images/animación-newsleetr.gif" width="600" height="333" alt="" usemap="#Map" />
				<map name="Map" id="Map">
    				<area alt="" title="" href="https://pergaminoco.myshopify.com/" target="_blank" shape="rect" coords="366,177,567,203" />
    				<area alt="" title="" href="https://www.facebook.com/pergaminocafe/" target="_blank" shape="rect" coords="422,208,447,230" />
    				<area alt="" title="" href="https://www.instagram.com/pergaminocafe/?hl=es" target="_blank" shape="rect" coords="456,207,479,229" />
    				<area alt="" title="" href="https://twitter.com/pergaminocafe?lang=es" target="_blank" shape="rect" coords="488,207,511,229" />
    			</map>
		</td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/Newsletter_02.gif" width="134" height="538" ></td>
		<td>
			<img src="images/Newsletter_03.gif" width="166" height="166" ></td>
		<td>
			<a href="https://www.youtube.com/watch?v=7WgFkgaoYZM" target="_blank" >
				<img src="images/Newsletter_04.gif" width="163" height="166" border="0" ></a></td>
		<td rowspan="4">
			<img src="images/Newsletter_05.gif" width="137" height="538" ></td>
	</tr>
	<tr>
		<td>
			<a href="https://goo.gl/maps/xr9uuKWZo3S2" target="_blank">
				<img src="images/Newsletter_06.gif" width="166" height="162" border="0" ></a></td>
		<td>
			<img src="images/Newsletter_07.gif" width="163" height="162" ></td>
	</tr>
	<tr>
		<td>
			<img src="images/Newsletter_08.gif" width="166" height="169" ></td>
		<td>
			<a href="http://www.mimundo.philips.es/modos-de-tomar-cafe-el-carajillo/" target="_blank">
				<img src="images/Newsletter_09.jpg" width="163" height="169" border="0" ></a></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Newsletter_10.gif" width="329" height="41" ></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

:!: Enlace del Ejercicio :!:
http://danielzapatarestrepo.com/boletin/prueba

:D Gif del Boletín :D

Image
-------------------------------------------------------------------- Ejercicio Tabla de Posiciones ---------------------------------------------------------------------

-- :D Imagen De La Tabla :D --
Image


-- :mrgreen: HTML :mrgreen: --

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

	<title></title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
	<tr id="barra">
		<td class="Posiciones">POS</td>
		<td class="equipo">Equipo</td>
		<td class="partidostotales">PT</td>
		<td class="PartidosJugados">PJ</td>
		<td class="Partidosganados">PG</td>
		<td class="Partidosempatados">PE</td>
		<td class="Partidosperdidos">PP</td>
		<td class="DiferenciaGoles">DG</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">1</td>
		<td class="equipo"><img src="img/Arsenal-FC-icon.png">Arsenal FC</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">2</td>
		<td class="equipo"><img src="img/Chelsea-FC-icon.png">Chelsea FC</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">3</td>
		<td class="equipo"><img src="img/FC-Barcelona-icon.png">FC Barcelona</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">4</td>
		<td class="equipo"><img src="img/Leicester-City-icon.png">Leicester City</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">5</td>
		<td class="equipo"><img src="img/Port-Vale-icon.png">Port Vale</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">6</td>
		<td class="equipo"><img src="img/Sheffield-United-icon.png">Sheffield United</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">7</td>
		<td class="equipo"><img src="img/Sheffield-Wendesday-icon.png">Sheffield Wendesday</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">8</td>
		<td class="equipo"><img src="img/Shrewsbury-Town-icon.png">Shrewsbury Town</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">9</td>
		<td class="equipo"><img src="img/West-Ham-United-icon.png">West Ham United</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
	<tr class="impar">
		<td class="Posiciones">10</td>
		<td class="equipo"><img src="img/Wycombe-Wanderers-icon.png">Wycombe Wanderers</td>
		<td class="partidostotales">0</td>
		<td class="PartidosJugados">0</td>
		<td class="Partidosganados">0</td>
		<td class="Partidosempatados">0</td>
		<td class="Partidosperdidos">0</td>
		<td class="DiferenciaGoles">0</td>
	</tr>
</table>
</body>
</html>
-- :idea: CSS :idea: --

Code: Select all

#barra{
	font-family: 'Poppins', sans-serif;
	width: 100%;
	height: 35px;
	background-color: gray;
	font-weight: bold;
	color: white;
}
td{
	font-family: 'Poppins', sans-serif;
	font-weight: normal;
	font-size: 12px;
}
img{
	padding-right: 15px
	height: 24px;
	width: 24px;
}

.Posiciones{
	text-align: center;
	width: 75px;
	text-align: center;
	border-right: 1px solid white;
}
.equipo{
	padding-right: 500px;
	padding-left: 15px;
	
}
.partidostotales{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.PartidosJugados{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.Partidosganados{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.Partidosempatados{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.Partidosperdidos{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.DiferenciaGoles{
	text-align: center;
	width: 75px;
	border-left: 1px solid white;
}
.impar{ background-color: #f2f2f2; }
--------------------------------------------------------------- Link en el dominio TODAS LAS TAREAS ---------------------------------------------------------------

:geek: :mrgreen: :geek:
http://danielzapatarestrepo.com/tareas/
:geek: :mrgreen: :geek:

:D Gif de las tareas :D

Image
Last edited by Daniel Zapata on Wed Mar 29, 2017 1:26 am, edited 3 times in total.

User avatar
juanzv03
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by juanzv03 » Sun Mar 26, 2017 11:52 pm

:arrow: Wireframe manual Newsletter

Image

:arrow: Wireframe digital Newsletter

Image

:arrow: HTML

Code: Select all

<html>
<head>
<title>Newsletter - Trekking a los Alpes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table align="center" id="Tabla_01" width="600" height="1126" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="http://www.juanzv.com/boletin/images/newsletter_01.jpg" width="600" height="135" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="9">
			<a href="http://www.danitguia.com/trekking-rutas-montana-alpes-miradores-del-mont-blanc/" target="_blank">
				<img src="http://www.juanzv.com/boletin/images/boton_ppal.jpg" width="600" height="34" border="0" alt="" style="display: block;"></a></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="http://www.juanzv.com/boletin/images/newsletter_03.jpg" width="600" height="130" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.juanzv.com/boletin/images/newsletter_04.jpg" width="201" height="146" alt="" style="display: block;"></td>
		<td colspan="7">
			<img src="http://www.juanzv.com/boletin/images/newsletter_05.jpg" width="199" height="146" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/newsletter_06.jpg" width="200" height="146" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="http://www.juanzv.com/boletin/images/newsletter_07.gif" width="600" height="161" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="9">

			<img src="http://www.juanzv.com/boletin/images/newsletter_08.jpg" width="600" height="344" alt="" style="display: block;" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Am%C3%A9rica_del_Norte" target="_blank" shape="rect" coords="130,117,157,154" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Am%C3%A9rica_Central" target="_blank" shape="rect" coords="149,171,178,207" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Am%C3%A9rica_del_Sur" target="_blank" shape="rect" coords="186,213,213,252" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Europa_Occidental" target="_blank"shape="rect" coords="291,104,320,145" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/%C3%81frica" target="_blank" shape="rect" coords="298,172,325,213" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Asia_Occidental" target="_blank" shape="rect" coords="348,136,377,176" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Asia_Oriental" target="_blank" shape="rect" coords="443,102,471,143" />
    <area alt="" title="" href="https://es.wikipedia.org/wiki/Ocean%C3%ADa" target="_blank" shape="rect" coords="467,231,497,270" />
    
</map>

</td>
	</tr>
	<tr>
		<td colspan="9">
			<a href="http://www.danitguia.com/" target="_blank">
				<img src="http://www.juanzv.com/boletin/images/boton_secundario.jpg" width="600" height="105" border="0" alt="" style="display: block;"></a></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://www.juanzv.com/boletin/images/newsletter_10.jpg" width="257" height="70" alt="" style="display: block;"></td>
		<td>
			<a href="http://www.facebook.com/" target="_blank">
				<img src="http://www.juanzv.com/boletin/images/fb-icon.jpg" width="25" height="70" border="0" alt="" style="display: block;"></a></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/newsletter_12.jpg" width="10" height="70" alt="" style="display: block;"></td>
		<td>
			<a href="http://www.twitter.com/" target="_blank">
				<img src="http://www.juanzv.com/boletin/images/tw-icon.jpg" width="24" height="70" border="0" alt="" style="display: block;"></a></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/newsletter_14.jpg" width="10" height="70" alt="" style="display: block;"></td>
		<td>
			<a href="http://www.instagram.com/" target="_blank">
				<img src="http://www.juanzv.com/boletin/images/instagram-icon.jpg" width="25" height="70" border="0" alt="" style="display: block;"></a></td>
		<td colspan="2">
			<img src="http://www.juanzv.com/boletin/images/newsletter_16.jpg" width="249" height="70" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="201" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="56" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="25" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="10" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="24" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="10" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="25" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="49" height="1" alt="" style="display: block;"></td>
		<td>
			<img src="http://www.juanzv.com/boletin/images/espacio.gif" width="200" height="1" alt="" style="display: block;"></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>


:arrow: Enlace Newsletter

http://www.juanzv.com/boletin

:arrow: Gif Newsletter

Image

:o HTML Tabla de posiciones

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>Tabla de Posiciones</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>

<table cellpadding="0" cellspacing="0">
	
	<tr id="pos_r">
		<td class="posicion2">POS</td>
		<td id="equipo_d">EQUIPO</td>
		<td class="posicion2">PT</td>
		<td class="posicion2">PJ</td>
		<td class="posicion2">PG</td>
		<td class="posicion2">PE</td>
		<td class="posicion2">PP</td>
		<td class="posicion2">DG</td>
	</tr>

	<tr>
		<td class="posicion3">1</td>
		<td><img src="img/FC-Barcelona-icon.png">FC Barcelona</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">2</td>
		<td><img src="img/Atletico-Madrid-icon.png">Atlético de Madrid</td>
		<td class="posicion4">14</td>
		<td class="posicion">7</td>
		<td class="posicion">4</td>
		<td class="posicion">2</td>
		<td class="posicion">1</td>
		<td class="posicion">10</td>
	</tr>

	<tr>
		<td class="posicion3">3</td>
		<td><img src="img/Chelsea-FC-icon.png">Chelsea FC</td>
		<td class="posicion4">14</td>
		<td class="posicion">6</td>
		<td class="posicion">4</td>
		<td class="posicion">2</td>
		<td class="posicion">0</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">4</td>
		<td ><img src="img/Manchester-City-icon.png">Manchester City</td>
		<td class="posicion4">14</td>
		<td class="posicion">8</td>
		<td class="posicion">4</td>
		<td class="posicion">2</td>
		<td class="posicion">2</td>
		<td class="posicion">4</td>
	</tr>

	<tr>
		<td class="posicion3">5</td>
		<td><img src="img/Osasuna-icon.png">Osasuna</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">6</td>
		<td><img src="img/Rayo-Vallecano-icon.png">Rayo Vallecano</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">7</td>
		<td><img src="img/Real-Madrid-icon.png">Real Madrid</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">8</td>
		<td><img src="img/Real-Oviedo-icon.png">Real Oviedo</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">9</td>
		<td><img src="img/UD-Las-Palmas-icon.png">UD Las Palmas</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>

	<tr>
		<td class="posicion3">10</td>
		<td><img src="img/VfL-Wolfsburg-icon.png">VfL Wolfsburg</td>
		<td class="posicion4">19</td>
		<td class="posicion">8</td>
		<td class="posicion">6</td>
		<td class="posicion">1</td>
		<td class="posicion">1</td>
		<td class="posicion">8</td>
	</tr>



</table>

</body>
</html>
:o CSS Tabla de posiciones

Code: Select all

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
}

img {

	padding-right: 10px;
	padding-top: 10px;
	padding-left: 10px;
}

#pos_r {

	background-color: rgba(120, 120, 120, 0.5);
	font-weight: 700;
	height: 30px;
	color:black;
	border-right: none;


}

tr {

	background-color: rgba(200, 200, 200, 0.5);
}


#equipo_d {

	padding-right: 600px;
	padding-left: 10px;
	left: 32px;
}


.posicion {

	
	text-align: center;
	width: 60px;
	border-left: 1px solid white;
}

.posicion2 {

	border-right: 1px solid rgba(120, 120, 120, 0.0);
	text-align: center;
	width: 60px;
}

.posicion3 {

	
	text-align: center;
	width: 60px;
	border-right: 1px solid white;
}

.posicion4 {

	
	text-align: center;
	width: 60px;
	border-left: 1px solid white;
	font-weight: 700;
}
:o Tabla de posiciones

Image

:arrow: Enlace Tareas

http://www.juanzv.com/tareas
Last edited by juanzv03 on Wed Mar 29, 2017 2:21 am, edited 1 time in total.

danielasalazar
Posts: 3
Joined: Mon Jan 16, 2017 2:30 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by danielasalazar » Mon Mar 27, 2017 4:58 pm

Wireframe Manual
Image}

Wireframe Digital
Image}


HTML NEWSLETTER

Code: Select all

<html>
<head>
<title>finalito</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (finalito.psd) -->
<table id="Tabla_01" width="601" height="874" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="27">
			<img src="imagenes/finalito_01.jpg" width="600" height="6" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="imagenes/finalito_02.jpg" width="6" height="286" alt=""></td>
		<td colspan="3">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_03.jpg" width="102" height="101" border="0" alt=""></a></td>
		<td colspan="23" rowspan="2">
			<img src="imagenes/finalito_04.jpg" width="492" height="243" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="101" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="imagenes/finalito_05.jpg" width="102" height="185" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="142" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_03-07.jpg" width="65" height="26" border="0" alt=""></a></td>
		<td colspan="2" rowspan="2">
			<img src="imagenes/finalito_07.jpg" width="78" height="43" alt=""></td>
		<td colspan="2">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_05.jpg" width="41" height="26" border="0" alt=""></a></td>
		<td colspan="3" rowspan="2">
			<img src="imagenes/finalito_09.jpg" width="68" height="43" alt=""></td>
		<td colspan="4">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_07.jpg" width="76" height="26" border="0" alt=""></a></td>
		<td colspan="3" rowspan="2">
			<img src="imagenes/finalito_11.jpg" width="38" height="43" alt=""></td>
		<td colspan="5">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_09.jpg" width="85" height="26" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="imagenes/finalito_13.jpg" width="41" height="43" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="imagenes/finalito_14.jpg" width="65" height="17" alt=""></td>
		<td colspan="2">
			<img src="imagenes/finalito_15.jpg" width="41" height="17" alt=""></td>
		<td colspan="4">
			<img src="imagenes/finalito_16.jpg" width="76" height="17" alt=""></td>
		<td colspan="5">
			<img src="imagenes/finalito_17.jpg" width="85" height="17" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="13" rowspan="3">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/finalito_18.jpg" width="342" height="244" border="0" alt=""></a></td>
		<td colspan="14">
			<img src="imagenes/finalito_19.jpg" width="258" height="16" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="imagenes/finalito_20.jpg" width="65" height="228" alt=""></td>
		<td colspan="8">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/sale.gif" width="123" height="78" border="0" alt=""></a></td>
		<td colspan="3" rowspan="2">
			<img src="imagenes/finalito_22.jpg" width="70" height="228" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="78" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="imagenes/finalito_23.jpg" width="123" height="150" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="150" alt=""></td>
	</tr>
	<tr>
		<td colspan="27">
			<img src="imagenes/finalito_24.jpg" width="600" height="207" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="207" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="imagenes/finalito_25.jpg" width="24" height="55" alt=""></td>
		<td colspan="3">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_43.jpg" width="108" height="33" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="imagenes/finalito_27.jpg" width="30" height="55" alt=""></td>
		<td colspan="4">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_45.jpg" width="110" height="33" border="0" alt=""></a></td>
		<td colspan="2" rowspan="2">
			<img src="imagenes/finalito_29.jpg" width="36" height="55" alt=""></td>
		<td colspan="4">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_47.jpg" width="99" height="33" border="0" alt=""></a></td>
		<td colspan="4" rowspan="2">
			<img src="imagenes/finalito_31.jpg" width="42" height="55" alt=""></td>
		<td colspan="6">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_49.jpg" width="110" height="33" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="imagenes/finalito_33.jpg" width="41" height="55" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="imagenes/finalito_34.jpg" width="108" height="22" alt=""></td>
		<td colspan="4">
			<img src="imagenes/finalito_35.jpg" width="110" height="22" alt=""></td>
		<td colspan="4">
			<img src="imagenes/finalito_36.jpg" width="99" height="22" alt=""></td>
		<td colspan="6">
			<img src="imagenes/finalito_37.jpg" width="110" height="22" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="27">
			<img src="imagenes/finalito_38.jpg" width="600" height="16" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="15">
			<img src="imagenes/finalito_39.jpg" width="375" height="13" alt=""></td>
		<td colspan="2" rowspan="3">
			<a href="http://www.facebook.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_39.jpg" width="43" height="43" border="0" alt=""></a></td>
		<td colspan="2" rowspan="4">
			<img src="imagenes/finalito_41.jpg" width="21" height="59" alt=""></td>
		<td colspan="3" rowspan="3">
			<a href="http://www.instagram.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_41.jpg" width="44" height="43" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="imagenes/finalito_43.jpg" width="21" height="59" alt=""></td>
		<td colspan="2" rowspan="3">
			<a href="http://www.twitter.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_43-45.jpg" width="45" height="43" border="0" alt=""></a></td>
		<td colspan="2" rowspan="4">
			<img src="imagenes/finalito_45.jpg" width="51" height="59" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="13" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="imagenes/finalito_46.jpg" width="46" height="46" alt=""></td>
		<td colspan="5">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_46.jpg" width="179" height="14" border="0" alt=""></a></td>
		<td colspan="7" rowspan="3">
			<img src="imagenes/finalito_48.jpg" width="150" height="46" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="imagenes/finalito_49.jpg" width="179" height="32" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="imagenes/finalito_50.jpg" width="43" height="16" alt=""></td>
		<td colspan="3">
			<img src="imagenes/finalito_51.jpg" width="44" height="16" alt=""></td>
		<td colspan="2">
			<img src="imagenes/finalito_52.jpg" width="45" height="16" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imagenes/espacio.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="62" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="24" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="52" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="32" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="19" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="41" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
HTML TABLA POSICIONES

Code: Select all

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     
	<title></title>
</head>
<body>


<table>

   <tr class="principal"> 
      <td>POS</td>
      <td>EQUIPO</td>
      <td>PT</td>
      <td>PJ</td>
      <td>PG</td>
      <td>PE</td>
      <td>PP</td>
      <td>DG</td>
   </tr> 

   
    <tr class="sincolor"> 
      <td>1</td>
      <td> <a href="#"><img src="img/aldershot.png">Aldershot</a></td>
      <td>9</td>
      <td>34</td>
      <td>4</td>
      <td>8</td>
      <td>5</td>
      <td>16</td>
   </tr> 


    <tr class="color"> 
      <td>2</td>
      <td> <a href="#"><img src="img/alfreton.png">Alfreton</a></td>
      <td>64</td>
      <td>6</td>
      <td>8</td>
      <td>43</td>
      <td>5</td>
      <td>8</td>
   </tr> 


    <tr class="sincolor"> 
      <td>3</td>
      <td> <a href="#"><img src="img/boltonwanderers.png">Bolton Wanderers</a></td>
      <td>4</td>
      <td>6</td>
      <td>54</td>
      <td>7</td>
      <td>5</td>
      <td>43</td>
   </tr> 


    <tr class="color"> 
      <td>4</td>
      <td> <a href="#"><img src="img/bournemouth.png">Bournemouth</a></td>
      <td>5</td>
      <td>86</td>
      <td>7</td>
      <td>5</td>
      <td>87</td>
      <td>6</td>
   </tr> 


    <tr class="sincolor"> 
      <td>5</td>
      <td> <a href="#"><img src="img/charltonathletic.png">Charlton Athletic</a></td>
      <td>3</td>
      <td>8</td>
      <td>45</td>
      <td>9</td>
      <td>5</td>
      <td>76</td>
   </tr> 


    <tr class="color"> 
      <td>6</td>
      <td> <a href="#"><img src="img/chesterfield.png">Chesterfield</a></td>
      <td>9</td>
      <td>56</td>
      <td>6</td>
      <td>4</td>
      <td>34</td>
      <td>7</td>
   </tr> 


    <tr class="sincolor"> 
      <td>7</td>
      <td> <a href="#"><img src="img/darlington.png">Darlington</a></td>
      <td>8</td>
      <td>4</td>
      <td>76</td>
      <td>5</td>
      <td>9</td>
      <td>4</td>
   </tr> 


    <tr class="color"> 
      <td>8</td>
      <td> <a href="#"><img src="img/ebbsfleetunited.png">Ebbsfleet United</a></td>
      <td>7</td>
      <td>9</td>
      <td>54</td>
      <td>6</td>
      <td>54</td>
      <td>5</td>
   </tr> 


    <tr class="sincolor"> 
      <td>9</td>
      <td> <a href="#"><img src="img/fulham.png">Fulham</a></td>
      <td>8</td>
      <td>3</td>
      <td>43</td>
      <td>7</td>
      <td>5</td>
      <td>87</td>
   </tr> 


    <tr class="color"> 
      <td>10</td>
      <td> <a href="#"><img src="img/wimbledon.png">Wimbledon</a></td>
      <td>6</td>
      <td>96</td>
      <td>4</td>
      <td>3</td>
      <td>1</td>
      <td>11</td>
   </tr> 
</table>

</body>
</html>
Image


CSS TABLA DE POSICIONES

Code: Select all

 body {background-color: #ededeb;}

 td {padding-right: 40px; 
 	height: 50px;
    padding-left: 40px;}



 table {width: 960px;
        margin-right: auto;
        margin-left: auto;
        text-align: justify;
        color: black;
    }
 
 img {padding-right: 10px;
      }

 a {color: black;}     

 a:hover {color: #309cef;}

 .principal{
  background-color: #309cef;
  height: 40px;
  font-weight: bold;
  }
 
 .color{
  background-color: #9acbf0;}

 .sincolor {  }

ENLACES

http://www.danielasalazars.com/tareas/
http://danielasalazars.com/tareas/tarea_01/index.html
http://danielasalazars.com/tareas/tarea_02/index.html
http://danielasalazars.com/tareas/tarea_03/index.html
http://danielasalazars.com/tareas/tarea_04/index.html
http://www.danielasalazars.com/boletin/

ErikaVasquezG
Posts: 3
Joined: Mon Jan 16, 2017 2:23 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by ErikaVasquezG » Mon Mar 27, 2017 10:34 pm

NEWSLETTER:
Wireframe Manual:
Image

Wireframe Digital:
Image
Image

Funcionamiento:
Image

Html Newsletter:

Code: Select all

 <html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table id="Tabla_01" width="599" height="1015" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="16">
			<img src="imagenes/boletin_01.gif" width="598" height="130" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="130" alt=""></td>
	</tr>
	<tr>
		<td colspan="16">
			<img src="imagenes/boletin_02.gif" width="598" height="77" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="77" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="imagenes/boletin_03.gif" width="60" height="121" alt=""></td>
		<td colspan="2" rowspan="2">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_04.gif" width="70" height="51" border="0" alt=""></a></td>
		<td colspan="12">
			<img src="imagenes/boletin_05.gif" width="468" height="29" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="imagenes/boletin_06.gif" width="215" height="22" alt=""></td>
		<td colspan="2" rowspan="2">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_07.gif" width="64" height="56" border="0" alt=""></a></td>
		<td colspan="4" rowspan="10">
			<img src="imagenes/boletin_08.gif" width="189" height="286" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="imagenes/boletin_09.gif" width="87" height="70" alt=""></td>
		<td rowspan="2">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_10.gif" width="66" height="57" border="0" alt=""></a></td>
		<td colspan="2" rowspan="4">
			<img src="imagenes/boletin_11.gif" width="61" height="92" alt=""></td>
		<td rowspan="3">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_12.gif" width="55" height="70" border="0" alt=""></a></td>
		<td rowspan="9">
			<img src="imagenes/boletin_13.gif" width="16" height="264" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="8">
			<img src="imagenes/boletin_14.gif" width="64" height="230" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="imagenes/boletin_15.gif" width="66" height="35" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="13" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="imagenes/boletin_16.gif" width="42" height="194" alt=""></td>
		<td colspan="2" rowspan="2">
			<a href="http://www.google.com">
				<img src="imagenes/Sin-titulo-1_17.gif" width="68" height="52" border="0" alt=""></a></td>
		<td colspan="2" rowspan="6">
			<img src="imagenes/boletin_18.gif" width="37" height="194" alt=""></td>
		<td rowspan="6">
			<img src="imagenes/boletin_19.gif" width="55" height="194" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_20.gif" width="87" height="48" border="0" alt=""></a></td>
		<td rowspan="5">
			<img src="imagenes/boletin_21.gif" width="40" height="172" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			<img src="imagenes/boletin_22.gif" width="68" height="142" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="imagenes/boletin_23.gif" width="87" height="34" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="http://www.google.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_24.gif" width="66" height="42" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="imagenes/boletin_25.gif" width="21" height="90" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="42" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imagenes/boletin_26.gif" width="66" height="48" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="48" alt=""></td>
	</tr>
	<tr>
		<td colspan="16">
			<img src="imagenes/boletin_27.gif" width="598" height="423" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="423" alt=""></td>
	</tr>
	<tr>
		<td colspan="16">
			<img src="imagenes/boletin_28.gif" width="598" height="14" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="11" rowspan="2">
			<img src="imagenes/boletin_29.gif" width="360" height="55" alt=""></td>
		<td>
			<a href="http://www.facebook.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_06.gif" width="49" height="45" border="0" alt=""></a></td>
		<td>
			<a href="http://www.instagram.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_31.gif" width="46" height="45" border="0" alt=""></a></td>
		<td>
			<a href="http://www.twitter.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_32.gif" width="43" height="45" border="0" alt=""></a></td>
		<td>
			<a href="http://www.youtube.com" target="_blank">
				<img src="imagenes/Sin-titulo-1_33.jpg" width="50" height="45" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="imagenes/boletin_34.gif" width="50" height="55" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="45" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="imagenes/boletin_35.gif" width="188" height="10" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imagenes/espacio.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="50" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="66" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="40" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="49" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="46" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="50" height="1" alt=""></td>
		<td>
			<img src="imagenes/espacio.gif" width="50" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
TABLA DE POSICIONES:

Captura de pantalla
Image

Html:

Code: Select all

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     
	<title></title>
</head>
<body>


<table>

   <tr class="principal"> 
      <td>POS</td>
      <td>EQUIPO</td>
      <td>PT</td>
      <td>PJ</td>
      <td>PG</td>
      <td>PE</td>
      <td>PP</td>
      <td>DG</td>
   </tr> 

   
    <tr class="sincolor"> 
      <td>1</td>
      <td> <a href="#"><img src="img/manchester.png">Manchester United</a></td>
      <td>9</td>
      <td>34</td>
      <td>4</td>
      <td>8</td>
      <td>5</td>
      <td>16</td>
   </tr> 


    <tr class="color"> 
      <td>2</td>
      <td> <a href="#"><img src="img/chelsea.png">Chelsea FC</a></td>
      <td>64</td>
      <td>6</td>
      <td>8</td>
      <td>43</td>
      <td>5</td>
      <td>8</td>
   </tr> 


    <tr class="sincolor"> 
      <td>3</td>
      <td> <a href="#"><img src="img/manchestercity.png">Manchester City</a></td>
      <td>4</td>
      <td>6</td>
      <td>54</td>
      <td>7</td>
      <td>5</td>
      <td>43</td>
   </tr> 


    <tr class="color"> 
      <td>4</td>
      <td> <a href="#"><img src="img/blackburn.png">Blackburn Rovers</a></td>
      <td>5</td>
      <td>86</td>
      <td>7</td>
      <td>5</td>
      <td>87</td>
      <td>6</td>
   </tr> 


    <tr class="sincolor"> 
      <td>5</td>
      <td> <a href="#"><img src="img/liverpool.png">Liverpool FC</a></td>
      <td>3</td>
      <td>8</td>
      <td>45</td>
      <td>9</td>
      <td>5</td>
      <td>76</td>
   </tr> 


    <tr class="color"> 
      <td>6</td>
      <td> <a href="#"><img src="img/arsenal.png">Arsenal FC</a></td>
      <td>9</td>
      <td>56</td>
      <td>6</td>
      <td>4</td>
      <td>34</td>
      <td>7</td>
   </tr> 


    <tr class="sincolor"> 
      <td>7</td>
      <td> <a href="#"><img src="img/newcastle.png">Newcastle United</a></td>
      <td>8</td>
      <td>4</td>
      <td>76</td>
      <td>5</td>
      <td>9</td>
      <td>4</td>
   </tr> 


    <tr class="color"> 
      <td>8</td>
      <td> <a href="#"><img src="img/sunderland.png">Sunderland AFC</a></td>
      <td>7</td>
      <td>9</td>
      <td>54</td>
      <td>6</td>
      <td>54</td>
      <td>5</td>
   </tr> 


    <tr class="sincolor"> 
      <td>9</td>
      <td> <a href="#"><img src="img/queens.png">Queens Park Rangers</a></td>
      <td>8</td>
      <td>3</td>
      <td>43</td>
      <td>7</td>
      <td>5</td>
      <td>87</td>
   </tr> 


    <tr class="color"> 
      <td>10</td>
      <td> <a href="#"><img src="img/norwich.png">Norwich City</a></td>
      <td>6</td>
      <td>96</td>
      <td>4</td>
      <td>3</td>
      <td>1</td>
      <td>11</td>
   </tr> 
</table>

</body>
</html>
Css:

Code: Select all

body{
	background-color: white;
}

td{
	padding-right: 10px;
	height: 40px;
	padding-left: 20px;
}

table{
	width:700px;
	margin-right: auto;
	margin-left: auto;
	text-align: justify;
	color: black;
}

a{
	color:grey;
}

a:hover{
	color:#484747;
}

img{
	padding-right: 10px;
}


.principal{
	background-color: #cfcece;
	font-weight: bold;
	color: white;
	height: 40px;
	text-align: center;
}

.sincolor{
	background-color: white;
	width: 500px;
	height: 10px;
	


}
.color{
	background-color: #cfcece;
	width: 500px;
	height: 10px;
	

}



Enlaces:
http://www.erikavasquezg.com/tareas/
http://www.erikavasquezg.com/boletin/

User avatar
Valeria.torres
Posts: 3
Joined: Mon Jan 16, 2017 2:21 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by Valeria.torres » Tue Mar 28, 2017 4:23 pm

Wireframe manual:
Image

Wireframe digital:
Image

Boletin final:
Image

Código HTML:

Code: Select all

<html>
<head>
<title>Boletin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Boletin.psd) -->
<table id="Tabla_01" width="961" height="2282" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="8">
			<img src="images/Boletin_01.gif" width="960" height="431" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="431" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/Stive.gif" width="960" height="307" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="307" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/Boletin_03.gif" width="960" height="518" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="518" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Boletin_04.gif" width="379" height="21" alt=""></td>
		<td colspan="6" rowspan="2">
			

<img src="images/Boletin_05.gif" alt="" usemap="#Map" width="581" height="451"  />
<map name="Map" id="Map">
    <area alt="" title="" href="http://www.reddebibliotecas.org.co/bibliotecas/parque-biblioteca-españa-santo-domingo-savio" shape="rect" coords="77,62,127,117" />
    <area alt="" title="" href="http://www.reddebibliotecas.org.co/bibliotecas/parque-biblioteca-tomás-carrasquilla-la-quintana" shape="rect" coords="119,209,174,271" />
    <area alt="" title="" href="http://www.reddebibliotecas.org.co/bibliotecas/parque-biblioteca-presb%C3%ADtero-josé-luis-arroyave-san-javier" shape="rect" coords="235,316,283,369" />
    <area alt="" title="" href="http://www.reddebibliotecas.org.co/bibliotecas/pb-belen" shape="rect" coords="337,282,395,334" />
    <area alt="" title="" href="http://www.reddebibliotecas.org.co/bibliotecas/pb-la-ladera" shape="rect" coords="252,100,302,157" />
   
</map>

			</td>
		<td>
			<img src="images/espacio.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/Boletin_06.gif" width="379" height="524" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="430" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="images/Boletin_07.gif" width="581" height="503" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="94" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Boletin_08.gif" width="379" height="409" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="409" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Boletin_09.gif" width="353" height="71" alt=""></td>
		<td colspan="2">


			<a href="https://www.instagram.com/steveaoki">
			<img src="images/Boletin_10.gif" width="58" height="49" alt="">
			</a>
			</td>


		<td rowspan="2">
			<img src="images/Boletin_11.gif" width="35" height="71" alt=""></td>
		<td>


			<a href="https://www.facebook.com/Steve.Aoki">
			<img src="images/Boletin_12.gif" width="62" height="49" alt="">
			</a>
			</td>
			


		<td rowspan="2">
			<img src="images/Boletin_13.gif" width="32" height="71" alt=""></td>
		<td>


			<a href="https://twitter.com/steveaoki">
			<img src="images/Boletin_14.gif" width="67" height="49" alt="">
			</a>
			</td>
			


		<td rowspan="2">
			<img src="images/Boletin_15.gif" width="353" height="71" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="49" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Boletin_16.gif" width="58" height="22" alt=""></td>
		<td>
			<img src="images/Boletin_17.gif" width="62" height="22" alt=""></td>
		<td>
			<img src="images/Boletin_18.gif" width="67" height="22" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/espacio.gif" width="353" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="32" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="35" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="62" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="32" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="67" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="353" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Tabla:
Image

Código HTML:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<table>
	<tr class="titulos">
		<td>POS</td>
		<td>Equipo</td>
		<td>PT</td>
		<td>PJ</td>
		<td>PG</td>
		<td>PE</td>
		<td>PP</td>
		<td>DG</td>
	</tr>
	<tr>
		<td>1</td>
		<td> <img src="img/Athletic-Bilbao.png"> Athletic Bilbao</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>
	</tr>

	</tr>
	<tr>
		<td>2</td>
		<td><img src=img/Atletico-Madrid-icon.png> Atletico Madrid</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>3</td>
		<td><img src=img/Deportivo-La-Coruna-icon.png> Deportivo la Coruna</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>4</td>
		<td><img src=img/FC-Barcelona-icon-2.png>Barcelona</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>5</td>
		<td><img src=img/Osasuna-icon.png>Osasuna</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

		</tr>
		<tr>
		<td>6</td>
		<td><img src=img/Real-Betis-icon.png>Reak Bets</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>7</td>
		<td><img src=img/Real-Madrid-icon.png>Real Madrid</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>8</td>
		<td><img src=img/Real-Sociedad-icon.png>Real Sociedad</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>9</td>
		<td><img src=img/Real-Zaragoza-icon.png>Real Zaragoza</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

	</tr>
	<tr>
		<td>10</td>
		<td><img src=img/Valencia-icon.png>Valencia</td>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>

</tr>


</tr>
</table>

</body>
</html>
Código CSS:

Code: Select all


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 6px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.titulos{
	color: white;
	background-color: blue;
}

td:hover{
	color: blue;
}
http://www.valeriatorresvasquez.com/tareas/
http://www.valeriatorresvasquez.com/boletin/
Last edited by Valeria.torres on Wed Mar 29, 2017 2:15 am, edited 1 time in total.

paulicuadros
Posts: 2
Joined: Mon Feb 13, 2017 3:05 pm

Re: Ejercicios: Newsletter y tabla de posiciones

Post by paulicuadros » Wed Mar 29, 2017 12:32 am

:geek: Wireframe manual:

Image


:geek: Wireframe digital:

Image


:geek: Diseño final:

Image


:geek: Gif funcionamiento:

Image

:geek: HTML:

Code: Select all

<html>
<head>
<title>Comic's Pill: Abril 2017</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Newsletter-Comic-Pills.psd) -->
<table id="Tabla_01" style="display:block;" width="701" height="1720" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="21">
			<img src="images/newsletter_01.jpg" width="700" height="16" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td rowspan="19">
			<img src="images/newsletter_02.jpg" width="18" height="1703" alt=""></td>
		<td colspan="2">
			<a href="www.paulinacuadros.co">
				<img src="images/comicspill_logo.png" width="138" height="33" border="0" alt=""></a></td>
		<td colspan="18" rowspan="2">
			<img src="images/newsletter_04.jpg" width="544" height="217" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="10">
			<img src="images/newsletter_05.jpg" width="138" height="1066" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="184" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/newsletter_06.jpg" width="95" height="23" alt=""></td>
		<td colspan="2" rowspan="4">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#El_capit.C3.A1n_Haddock">
				<img src="images/haddock.png" width="59" height="262" border="0" alt=""></a></td>
		<td colspan="6">
			<img src="images/newsletter_08.jpg" width="90" height="23" alt=""></td>
		<td colspan="4" rowspan="2">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#Hern.C3.A1ndez_y_Fern.C3.A1ndez">
				<img src="images/hernandezyfernandez.png" width="110" height="82" border="0" alt=""></a></td>
		<td rowspan="7">
			<img src="images/newsletter_10.jpg" width="13" height="571" alt=""></td>
		<td rowspan="4">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#Bianca_Castafiore">
				<img src="images/bianca.png" width="66" height="262" border="0" alt=""></a></td>
		<td rowspan="17">
			<img src="images/newsletter_12.jpg" width="111" height="1486" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="images/newsletter_13.jpg" width="25" height="859" alt=""></td>
		<td rowspan="5">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#El_profesor_Tornasol">
				<img src="images/tornasol.png" width="64" height="261" border="0" alt=""></a></td>
		<td rowspan="16">
			<img src="images/newsletter_15.jpg" width="6" height="1463" alt=""></td>
		<td rowspan="12">
			<img src="images/newsletter_16.jpg" width="6" height="1399" alt=""></td>
		<td colspan="5" rowspan="4">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#Tint.C3.ADn">
				<img src="images/tintin.png" width="84" height="250" border="0" alt=""></a></td>
		<td>
			<img src="images/espacio.gif" width="1" height="59" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/newsletter_18.jpg" width="110" height="85" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="85" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/newsletter_19.jpg" width="5" height="404" alt=""></td>
		<td colspan="2" rowspan="3">
			<a href="https://es.wikipedia.org/wiki/Las_aventuras_de_Tint%C3%ADn#Mil.C3.BA">
				<img src="images/milu.png" width="58" height="117" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="images/newsletter_21.jpg" width="47" height="404" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="95" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="9">
			<img src="images/newsletter_22.jpg" width="59" height="1160" alt=""></td>
		<td rowspan="13">
			<img src="images/newsletter_23.jpg" width="66" height="1224" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="11" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="images/newsletter_24.jpg" width="84" height="298" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="11" alt=""></td>
	</tr>
	<tr>
		<td rowspan="11">
			<img src="images/newsletter_25.jpg" width="64" height="1202" alt=""></td>
		<td colspan="2">
			<img src="images/newsletter_26.jpg" width="58" height="287" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="287" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="6">
			<img src="images/newsletter_27.jpg" width="75" height="851" alt=""></td>
		<td colspan="6">
			<a href="http://www.elconfidencial.com/cultura/2014-03-31/chris-ware-reinventa-el-comic_109635/">
				<img src="images/ware.png" width="132" height="27" border="0" alt=""></a></td>
		<td>
			<img src="images/espacio.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="3">
			<img src="images/newsletter_29.jpg" width="132" height="642" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="284" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="images/newsletter_30.jpg" width="30" height="604" alt=""></td>
		<td colspan="2">
			<a href="http://www.elespectador.com/entretenimiento/unchatcon/amalia-andrade-escritora-de-invisible-articulo-675586">
				<img src="images/amalia.png" width="133" height="23" border="0" alt=""></a></td>
		<td>
			<img src="images/espacio.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="7">
			<img src="images/newsletter_32.jpg" width="133" height="581" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="335" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<a href="https://www.tragaluzeditores.com/autores/samuel-castano-mesa/">
				<img src="images/samuel.png" width="132" height="24" border="0" alt=""></a></td>
		<td>
			<img src="images/espacio.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/newsletter_34.jpg" width="132" height="158" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="158" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/newsletter_35.jpg" width="26" height="64" alt=""></td>
		<td colspan="9">
			<a href="www.paulinacuadros.co">
				<img src="images/web.jpg" width="148" height="10" border="0" alt=""></a></td>
		<td colspan="3" rowspan="4">
			<img src="images/newsletter_37.jpg" width="98" height="64" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/newsletter_38.jpg" width="148" height="10" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/newsletter_39.jpg" width="39" height="44" alt=""></td>
		<td>
			<a href="https://www.facebook.com/paulicuadros">
				<img src="images/facebook.png" width="30" height="28" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/newsletter_41.jpg" width="8" height="44" alt=""></td>
		<td>
			<a href="https://www.instagram.com/paulinacuadros/">
				<img src="images/Newsletter-Comic-Pills_37.png" width="29" height="28" border="0" alt=""></a></td>
		<td colspan="4" rowspan="2">
			<img src="images/newsletter_43.jpg" width="42" height="44" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/newsletter_44.jpg" width="30" height="16" alt=""></td>
		<td>
			<img src="images/newsletter_45.jpg" width="29" height="16" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/espacio.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="108" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="64" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="33" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="38" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="47" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="66" height="1" alt=""></td>
		<td>
			<img src="images/espacio.gif" width="111" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
:geek: ENLACE A MI PÁGINA:

http://paulinacuadros.co/tareas/

Post Reply