Fundamentado en la necesidad de conocer sobre qué son los posgrados y en qué se diferencian unos de otros, además de universidades en dónde se imparten y cuáles son sus contenidos, pero 100% relacionados al Diseño Gráfico. Marlene
Camus
/ Ta l l e r
de
Diseño
Gráfico
/
(Multimedia)
CONTENEDOR / CABECERA / MENU HTML
CSS
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>posgradosdiseñografico</title> <link href=”css/pdg.css” rel=”stylesheet” type=”text/css” /> </head>
body { }
<body> <div id=”contenedor”> <div id=”principal”> <div id=”cabecera”> <h1><a href=”index.html” title=”acerca de”> <span>acerca de</span></a></h1> </div><!-- cabecera --> <div id=”menu”> <ul> <li><a href=”” title=”” class=”menu1”>Acerca de</a></li> <li><a href=”” title=”” class=”menu2”>Artículos</a></li> <li><a href=”” title=”” class=”menu3”>Infórmate</a></li> <li><a href=”” title=”” class=”menu4”>Posgrados</a></li> <li><a href=”” title=”” class=”menu5”>Financiamiento</a></li> <li><a href=”” title=”” class=”menu6”>Blog</a></li> </ul> </div><!-- menu --> </div><!-- principal -->
#cabecera { }
#contenedor { } #principal { }
#cabecera h1 { } #cabecera a span { } #cabecera a { } #menu { } #menu ul { }
#menu ul li a { } #menu ul li a:hover { } .menu1 { } .menu1:hover { } .menu2 { } .menu2:hover { } .menu3 { } .menu3:hover { }
CLASS / TEXTO HTML
CSS
<h2><span class=”acerca”>Acerca de</span></h2>
.acerca { width: 500px; height: 45px; display: block; background: #0099cc; font-family: Times serif; font-size: 40px; color: #fff; text-align: left; margin: 100px 0 10px 20px; }
<div id=”texto”> <p>La sociedad actual exige una formación continua, cada vez más especializada. Pero como esto no es una tarea fácil y requiere de un arduo trabajo encontrar información, se hace necesaria la disponibilidad de herramientas que la faciliten.</p> <p>El Diseño Gráfico actualmente ha incrementado su demanda académica, lo que significa que cada día más existe mayor competencia para nosotros los Diseñadores Gráficos, por lo tanto se hace fundamental, y porque no decirlo, vital para nuestra vida profesional, incrementar y potenciar nuestro título de simples diseñadores.</ p> <p>Posgrados Diseño Gráfico es un sitio dirigido a Diseñadores Gráficos, sean estudiantes o profesionales, interesados en fortalecer su formación académica o profesional. Encontrarán información principalmente relacionada con posgrados, nacionales e internacionales, enfocados al Diseño Gráfico. Posgrados Diseño Gráfico se proyecta a ser reconocido como el sitio oficial de Posgrados de Diseño Gráfico a nivel mundial, utilizando fuentes de gran seriedad y reconocimiento universal.</p> </div>
#texto { width: 500px; font-family: sans-serif; font-size: 12px; color: #666; margin: 0 0 0 20px; }
TEXTO / SUBTITULO / MAS SUBTITULO HTML
CSS
<div id=”texto”> <p><em>”Esta es la instancia en donde podrás escoger el posgrado que más te guste y acomode a tus requerimientos y objetivos. Tienes una gran variedad de opciones en diferentes universidades a nivel mundial, todas ellas reconocidas como así tambien sus posgrados”</em>Aquí te van.</p> </div> div id=”subtitulo”> <h3><a href=”posgrado1.html”>POSGRADO EN PUBLICIDAD Y DISEÑO GRAFICO</a></h3> </div> <div id=”establecimiento”> <h3>IIMN, INTERNACIONAL DE MARKETING (online)</h3> </div> <div id=”texto”> <p>Dirigido a Empresarios, Profesionales y Estudiantes que deseen especializarse en una materia concreta del área de marketing de la empresa, ya sea para reforzar sus conocimientos actuales, como iniciarse profesionalmente en ella.</p> </div>
#texto { width: 500px; font-family: sans-serif; font-size: 12px; color: #666; margin: 0 0 0 20px; } #subtitulo { font-family: Times serif; font-size: 16px; color: #0099cc; margin-left: 20px; margin-top: 50px; } #establecimiento { font-family: Times serif; font-size: 13px; color: #666; margin-left: 20px; margin-top: -20px; }
a:link { text-decoration: none; color: #0099cc; } a:visited { color: #0099cc; text-decoration: none; } a:hover { text-decoration: underline; color: #0099cc; }
TEXTO / H4 / BR /LISTAS HTML
CSS
<div id=”texto”> <p><br>DURACION: 200 horas</ br> <br>PRECIO: 3.000 y 6.000 euros</ br></p> </div> <h4><strong>Descripción</strong></h4> <div id=”texto”> <p><br></ br> <br></ br> <br></ br> <br></ br> <br></ br> <br></ br> <br></ br></p> </div>
#texto { width: 500px; font-family: sans-serif; font-size: 12px; color: #666; margin: 0 0 0 20px; }
<h4><strong>Temario del curso:</strong></h4> h4><strong>ANÁLISIS DEL MEDIO</strong></h4> <div id=”listas”> <ul><li></li> <li></li> <li>I</li> <li></li> <li></li></ul> </div>
h4 { }
font-family: Times serif; height: 10px; width: 500px; font-size: 14px; color: #666; margin: 40px 0 0 20px;
#listas { width: 500px; font-family: sans-serif; font-size: 12px; color: #666; margin: 0 0 0 20px; }