lunes, 21 de marzo de 2011

Empezando con CSS

Estos son ejemplos de plantillas que he realizado, la plantilla de MUSE ha tenido problemas con el código en DW, ya que se visualiza bien en el programa, pero en el navegador no.
Las plantillas de Bubble Under - The diving Club. estan todavía en etapa de desarrollo, ya que se está siguiendo el libro mencionado en la entrada anterior.

En el navegador

En DreamWeaver

Con código.


Código plantilla muse:
html:

<!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>Untitled Document</title><link href="midiseno.css" rel="stylesheet" type="text/css" media="all" /></head>
<body>
<h1>&nbsp;</h1>
<ul class="mainNav contain">  <li><a href="home.html">HOME</a>  <li><a href="discografia.html">DISCOGRAFÍA</a>  <li><a href="biografia.html">BIOGRAFÍA</a>  <li><a href="enlaces.html">ENLACES</a></ul>
<h2>&nbsp;</h2>
<p> We're delighted to announce that Muse will be returning to Russia and Ukraine this summer for three live shows.
The dates are as follows:
20.05.11: SKK Arena, St. Peterbsurg, Russia22.05.11: Olympiski Arena, Moscow, Russia24.05.11: Sport Palace, Kiev, Ukraine
Ticket orders for these dates will be taken from 10:00 TOMORROW (Friday 4th March) with physical sales taking place on Monday 7th March (for Kiev and Moscow) and Wednesday 9th March (for St. Petersburg). For more information on each date, including links to buy tickets, check out muse.mu tour dates on the links below. </

</body></html>
CSS:

@charset "UTF-8";/* CSS Document */
body { alignment-adjust:central; background-image:url(imagenes/stadiumfront.jpg); background: #FFF; }
h1 { background-image:url(imagenes/logomuse.png); width: 155px; height: 76px;}
ul{ display:inline;}
  ul.mainNav {    position:absolute    top: 2em;    left: 1em;    width: 9em }
 ul.mainNav li { display:inline; font:Verdana, Geneva, sans-serif; font-stretch:extra-expanded; font-size:16px; background-color:#000; margin: 0.5em 0; padding: 0.3em;  }       ul.mainNav a   {    text-decoration: none }  a:link {    color:#999; }  a:visited {    color:#FFF; } h2{ background-image:url(imagenes/descarga.jpeg); width: 737px; height: 282px;}

p{ font:Verdana, Geneva, sans-serif; font-size:14px; color:#CCC; background-color:#000; padding: 20px;}
Bubble... Plantilla



Código ejemplo , página About:
html:

<!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>About BubbleUnder.com: who we are; what this site is for. </title><link href= "style1.css" rel="stylesheet" type="text/css"/></head>
<body>
<div id= "header"> <!-- aquí se abre el contenedor general -->
<div id= "sitebranding"> <!-- aquí se abre "sitebranding"--><h1> BubbleUnder.com </h1></div> <!-- aquí se cierra "sitebranding"--><div id="tagline"> <!-- aquí se abre "tagline" --><p> Diving club for the south-west UK-let's make a splash!</p></div> <!-- aquí se cierra tagline -->
</div> <!-- aquí se cierra el contenedor general -->

<div id= "navigation"> <!-- aquí se abre navegation--><ul><li> <a href="index.html"> Home </a> </li><li> <a href="about.html"> About Us </a> </li><li> <a href="contact.html"> Contact Us </a> </li></ul></div> <!-- aquí se cierra navigation-->
<div id= "bodycontent"> <!-- aquí se abre "bodycontent" -->
<h2> About Us </h2><p>  Bubble Under is a grope of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months whe the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel, and to ensure that everyone gets a trust-worthy dive buddy. </p>
<p> Although we're based in the south-west, we don't stay on our own turf: past diving weekends have included trips up to Scapa Flow in Scotland and to Malta's numerous wreck sites.</p>
<p> When we're not diving, we often meet up in a local pub to talk about our recent adventures (any excuse, eh?).</p>
<p> Or as our man <cite> Bob Dobalina</cite> would put it: </p><blockquote><p> "Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that!" </p></blockquote>


</div> <!-- aquí se cierra el contenedor general -->
</body></html>
CSS. Plantilla general para Index, About, Contact.
@charset "UTF-8";/* CSS Document */
body {font-family: Verdana, Helvetica, Arial, sans-serif;background-color: #e2edff;line-height: 125%;padding: 15px;}
h1 {font-family: "trebuchet MS", Arial, Helvetica, sans-serif;font-size: x-large;}
li{font-size: small;}
h2{color: blue;font-size: medium;font-weight: normal;}
p{font-size: small;color: navy;}

No hay comentarios:

Publicar un comentario