Mi primera web.... - Pilates Julian Personal Trainer
Anuncio
Mi primera web....
El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede
descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks y
podrá encontrar un tutorial de como crearlas aqui. El orden de las carpetas es el siguiente: 2
carpetas (css para la hoja de estilo) e( images para las imágenes).
Bien, lo primero que haremos es abrir nuestro editor de HTML, en mi caso he utilizado
Dreamweaver 8, pero usted puede usar lo que desee. Abrimos un documento nuevo en HTML,
para ello vamos a Archivo | Nuevo | Página Básica | HTML o podemos simplemente presionar
las teclas Ctrl+N y ahí seleccionamos el documento que se necesite. (Ver imagen)
Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos
formas:
–
–
En vista de Diseño y Código.
En vista de Código.
Vamos a trabajar de forma que nos sea fácil ver lo que vamos haciendo y para eso
seleccionaremos la vista: Diseño y Código. Para eso seleccionamos las pestañas que se pueden
ver en la imagen inferior. (Ver imagen)
Lo primero que haremos una vez que hayamos finalizado los pasos anteriores es, ponerle el
título a nuestra página. Con Dreamweaver eso es muy fácil, solamente tienes que buscar en la
parte superior y ahí encontrarás un lugar que dice título y que por defecto nos muestra este
texto: Documento sin título. Pues bien, eso lo reemplazamos por el título de nuestra página que
en mi caso se llamaría: elavdesigner :!: Tutoriales.
Este paso aunque no lo crean es muy importante, créanme cuando les digo que me he
encontrado sitios en Internet a los que se le han olvidado ponerle el nombre de la web.
Ahora vamos a empezar a trabajar con el código:
Nos vamos a la vista de Código y buscamos la etiqueta <body> presionamos Enter y colocamos
lo siguiente:
<div id=''contenedor''></div>
¿Qué hicimos aquí? Pues lo que hicimos fué crear una capa llamada contenedor, que no es más
que la capa que contendrá las demás subcapas. Lo señalo en rojo porque es muy importante
conocer el nombre de las capas para que posteriormente nuestro código CSS funcione. Se
podrán dar cuenta de que a medida que vamos escribiendo Dreamweaver nos va mostrando
una serie de opciones en un pequeño submenú, hay que tener cuidado, no vaya a ser cosa que
cambien la palabra y después nuestro código no funcione.
Dentro de esta capa colocaremos otras capas para ir conformando la estructura de nuestro sitio
web, el header, el menú de navegación, la capa que contendrá el texto...etc. Y nos quedaría
algo como esto:
<div id=''contenedor''>
<div id=''header''></div>
<div id=''menu''></div>
<div id=''cuerpo''></div>
<div id=''pie''></div>
</div>
Si vamos a la vista de Diseño nos podemos encontrar algo como esto: (Ver imagen).
Como ven hasta ahora no se ve el diseño real de nuestra página, ya que lo único que hicimos
fué crear las capas que contendrán nuestra información, las imágenes y esas cosas. Ahora
vamos a crear las capas para el logo, el texto y la sidebar (la cual contendrá un menú a la
izquierda del texto). La capa que contendrá el logo, la insertaremos dentro de la capa header y
las capa sidebar y texto la insertaremos dentro de la capa contenido que a su vez se encuentra
dentro de la capa cuerpo y nos quedaría algo como esto:
<div id=''contenedor''>
<div id=''header''>
<div id=''logo''></div>
<div id=''menu''></div>
</div>
<div id=''cuerpo''>
<div id=''contenido''>
<div id=''sidebar''></div>
<div id=''texto''></div>
</div>
</div>
<div id=''pie''></div>
</div>
Aunque no lo parezca, ya tenemos conformado la estructura de nuestra página web, ahora lo
único que nos falta es darle la forma que deseamos. Para ello presionamos Ctrl+N y esta ves
seleccionamos Página Básica |CSS.
Una vez abierto el documento CSS lo guardamos en la carpeta que tenemos destinada para el
mismo. Una vez guardado, nos dirigimos al documento HTML y en el caso de Dreamweaver,
abrimos el panel CSS, para ello nos dirigimos a Ventana | Estilos CSS y se abrirá en la parte
derecha una panel. En este panel buscamos en la parte inferior un icono en forma de cadena o
eslabón que es el que nos va a adjuntar la hoja de estilos. (Ver imagen).
Una vez que lo presionamos sale algo como esto: (Ver imagen).
Como pueden ver nos salen varias opciones, lo primero que vamos a hacer es presionar el botón
que dice: Examinar, para buscar la carpeta en dónde se encontrará nuestra hoja de estilo o CSS.
Una vez que la seleccionemos no tenemos que seleccionar más nada y damos clic en Aceptar.
Automáticamente Dreamweaver inserta entre las etiquetas <header></header> el siguiente
código:
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
Lo que nos indica que ya está vinculada la página en CSS a la página en HTML. Guardamos el
documento HTML y nos vamos a trabajar en el documento CSS. Y ahora empieza la diversión.
Lo primero que haremos es ponerle las propiedades al body, o sea, a toda la página:
body{
background-color:#F2F2F2;
background-image:url(../images/fondo_body.png);
background-repeat:repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
Aquí lo que hicimos fué:
1. Con background-color, le asignamos un color de fondo a toda la página web.
2. Con background-image, le ponemos a la página web un imagen de fondo (En caso de
que no pueda ser mostrada no hay problema, ya que anteriormente le asignamos un
color al fondo del sitio.)
3. Con la propiedad background-repeat:repeat-x, le decimos a la imagen que solamente se
muestre de forma horizontal (Si no ponemos esta propiedad la imagen se repetirá por
todo el fondo de la página)
4. Con la propiedad font-family, establecemos un tipo de fuente para toda la página web,
en este caso, adoptara el tipo de fuente Verdana.
5. Y por último con font-size le ponemos un tamaño específico a toda la tipografía en la
página web.
A no ser que usted posteriormente especifique otra cosa, todo el contenido de la página
adoptará estas propiedades, o sea, el tamaño de la fuente, el tipo de fuente...
Ahora vamos a darle la propiedad a la capa contenedor.
contenedor{
width: 700px;
margin:auto;
background-color: #F2F2F2;
}
¿Que hicimos aquí? Fácil:
1. Con la propiedad width le asignamos el ancho que tendrá el contenedor, que en este
caso será 700 píxeles.
2. Con la propiedad margin:auto; la capa contenedor se va a centrar en el medio del
navegador.
3. Y con background-color, le ponemos un color de fondo.
Ahora le vamos a poner la propiedades a la capa header:
#header{
width:700px;
height:100px;
background-color:#f2f2f2;
background-image:url(../images/fondo.jpg);
border-bottom:3px solid #990000;
¿Qué hicimos aquí?
1. La propiedad width ya la conocemos, ahora con la propiedad height, le asigno el alto a
la capa (100 pixeles). ¿Por qué? Porque la imagen que diseñé para el header tiene estas
medidas (700px de ancho por 100px de alto).
2. La propiedad background-image también la conocemos, y con la propiedad borderbottom le asignamos un borde inferior de 3px sólido y le ponemos un color.
Ahora vamos a colocarle las propiedades a la capa logo:
#logo{
float:left;
width:170px;
margin-left:5px;
margin-right:auto;
}
A la capa logo le asignamos las siguientes propiedades:
1. Float:left, para flotar la capa hacia la izquierda de nuestro navegador. Como dentro de la
capa header, se encuentra la capa logo y la capa menu, al flotar la capa logo a la
izquierda, automáticamente la capa menu, que estaba debajo, se coloca a su derecha.
2. Margin-left y margin-right para establecer el margen izquierdo y derecho
respectivamente. En este caso por la izquierda va a tener un margen de 5px y por la
derecha adoptará un margen automático.
Ahora le toca el turno a la capa menu y aquí hay que aclarar algo. Para el menú he utilizado las
listas desordenadas las cuales se representan con la etiqueta ul, pero todavía no hemos puesto
el menú en el documento HTML, por lo tanto, vamos a abrirlo y colocamos lo siguiente dentro
de la capa menu.
<ul>
<li><a href="#l">Home</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Contacto</a></li>
</ul>
De forma que nos quedaría algo como esto:
<div id=''contenedor''>
<div id=''header''>
<div id=''logo''></div>
<div id=''menu''>
<ul>
<li><a href="#l">Home</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
<div id=''cuerpo''>
<div id=''contenido''>
<div id=''sidebar''></div>
<div id=''texto''></div>
</div>
</div>
<div id=''pie''></div>
</div>
Ahora vamos al documento CSS y ponemos lo siguiente:
#menu{
float:right;
width:500px;
text-align:right;
padding:28px 0px 28px 0px;
margin-left:auto;
margin-right:5px;
font-weight:bold;
}
Aquí lo que hice fue lo siguiente:
1. Floté la capa menu a la derecha y le asigné un ancho de 500px.
2. El texto de la capa menú lo coloco hacia la derecha con la propiedad text-align:right.
3. Ahora le asigno un relleno de 28 pixeles por arriba y por abajo (top y bottom) para que
el texto del menu, o sea para que los botones se coloquen a la mitad de header.
4. La propiedad margin ya la conocemos.
5. Y por último con font-weight hago que el texto adopte un estilo como en negrita y de
apariencia fuerte.
Ahora vamos a trabajar con la lista. Por defecto al insertar una lista esta adquiere esta forma:
(Ver imagen)
Y como podemos ver de esta forma acabaría con nuestro diseño. Para ello vamos a hacer lo
siguiente, insertamos en nuestro código CSS esto:
#menu ul {
padding:0px;
margin:0px;
list-style:none;
}
Al poner las propiedades de relleno y margen en 0px y quitarle los punticos al lado del texto
con list-style:none, nos viene quedando algo com esto:
Bien, pero todavía no es lo que queremos, porque el diseño de la página lleva un menú
horizontal, no vertical. Para eso, ahora vamos a trabajar con la etiqueta <li> y colocamos esto
en el código CSS:
#menu li{
display:inline;
}
De esta forma, nuestra lista quedará de forma horizontal como se puede ver en la web del
ejemplo. (Ver imagen)
Pero todavía no ha terminado la cosa, si previsualizamos la web hasta el momento nos
podemos dar cuenta de que al menu le falta la imagen del fondo, y el efecto rollover. Bien, para
eso trabajaremos con la etiqueta <a> y pondremos esto en el CSS:
#menu li a{
color:#666666;
background-image:url(../images/menu.jpg);
background-position:top;
padding:18px 18px 18px 18px;
text-decoration:none;
}
Como pueden ver ahora le asignamos las propiedades a la etiqueta <a>, la cual modificará los
vínculos que están dentro de la lista de la capa menú en su estado de reposo.
1. Le ponemos un color al texto con la propiedad color.
2. Le colocamos una imagen de fondo al vínculo y con la propiedad background-top,
mostramos la parte superior de la imagen de fondo.
3. Le asignamos un relleno, para separar cada vínculo 18px entre ellos con la propiedad
padding que como pueden ver tiene los valores 18px 18px 18px 18px, (Esto viene
siendo lo mismo que: padding-top:18px padding-right:18px padding-bottom:18px
padding-left:18px) es a lo que comunmente se le llama Hacks.
4. Y por último le quitamos la raya que sale debajo del texto con la propiedad textdecoration:none.
Ya va cogiendo forma la cosa, pero falta el efecto de rollover (cuando pasamos el puntero del
mouse sobre el vínculo) por lo que pondremos esto:
#menu li a:hover{
color:#FFFFFF;
background-image:url(../images/menu.jpg);
background-position:bottom;
padding:18px 18px 18px 18px;
text-decoration:none;
}
Aquí hacemos lo mismo que en el paso anterior pero hay una pequeña diferencia, en este caso
la propiedad background-position: bottom, nos va a mostrar la parte de abajo de la imagen de
fondo. Este efecto es muy recomendable ya que es muy limpio al usarse una sola imagen, para
crear esta imagen hay disponible un tutorial con todos los pasos aqui.
Para completar el header y ver como va quedando, vamos al documento en HTML y buscamos la
capa logo, en la vista de código damos un clic dentro de la capa y vamos a Insertar |Imagen y
ahí seleccionamos nuestro logo.
Guardamos el documento y en Dreaweaver presionamos F12 para previsualizar la web en
nuestro navegador por defecto.
Ahora vamos para el contenido y el menú de la izquierda.
Primero le asignamos las propiedades a la capa cuerpo, que contiene a la capa contenido.
#cuerpo{
width:700px;
background-color:#f2f2f2;
}
Las propiedades que le asignamos, ya la conocemos, ancho y color de fondo. Ahora vamos para
la capa contenido:
#contenido{
width:690px;
text-align:justify;
background-color:#f2f2f2;
}
En este caso todo el texto que se encuentre dentro de la capa contenido, estará justificado con
la propiedad text-align: justify.
Uno de losproblemas que presentan los diseñadores al trabajar con CSS es el trabajo con los
menúes. Ahora vamos a diseñar un menú vereticla sumamente sencillo dentro de la capa left:
Primero le asignamos las propiedades generales a la capa:
#left{
width:200px;
float:left;
margin-left:0px;
margin-right:auto;
}
La flotamos a la izquierda para que la capa texto se coloque a la derecha. Y ajustamos le
margen según nuestras necesidades. Ahora vamos a trabajar con la lista. Primero abriremos el
documento HTML y le insertaremos el siguiente código dentro de la capa left:
<ul>
<li><a href="index.html">Tutoriales</a></li>
<li><a href="#">HTML + CSS </a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="../pages/contacto.html">Contacto</a></li>
</ul>
Y colocamos esto en el CSS:
#left ul{
list-style:none;
width:200px;
margin: 0 0 0px 0;
padding:0;
}
#left li{
margin-bottom:2px;
}
#left li a{
height:20px;
text-decoration:none;
color:#666666;
display:block;
padding: 6px 0px 0px 10px;
background-color:#FFFFFF;
border-left:3px solid #333333;
}
#left li a:hover {
height:20px;
text-decoration:none;
color:#990000;
display:block;
padding: 6px 0px 0px 10px;
background-color:#CCCCCC;
border-left:3px solid #990000;
}
Aquí sucede lo mismo que con el menú del header pero hay unos ligeros cambios.
1. A la etiqueta <li> le asignamos la propiedad margin-bottom: 2px, esto hará que lo que
se encuentre debajo de la lista se separe 2px de la misma.
2. Se le asigna a la etiqueta <a> la propiedad height:20px. ¿Por qué? Si usted no pone
esta propiedad, al visualizar la página web en Firefox no tendrá problemas, pero si lo
hace con Internet Explorer, le insertará entre cada vínculo un espacio en blanco que
podría arruinar el diseño.
3. También se la asigna la propiedad display:block. ¿Para qué? Cuando le ponemos un
background al estado de rollover del botón, y no le ponemos esta propiedad, solamente
el color de fondo lo tomará el texto, para que quede un poco más bonito, se le pone esta
propiedad y entonces el color de fondo lo toma toda las lista. (Ver imagen)
4. Para separar un poco el botón por la parte superior se le asigna la propiedad
pading:6px.
5. Y por último le agregamos un borde en la parte izquierda para que se vea un poco más
bonito el menú.
Ahora vamos para la capa que contiene el texto:
#right{
float:right;
width:480px;
margin-left:10px;;
margin-right:0px;
}
Las propiedades que se le asignaron a esta capa ya las conocemos. Así que no será necesartio
explicar que se hizo.
Y por último vamos al footer o pie de página:
#pie{
background-color:#f2f2f2;
background-image:url(../images/background.jpg);
background-position:center;
text-align:center;
padding:10px 0px 0px 0px;
margin:0px;
width:700px;
height:20px;
clear:both;
}
#pie a{
color:#666666;
text-decoration:underline;
}
#pie a:hover{
color:#666666;
text-decoration:none;
}
El footer tiene algunas propiedades que no hemos visto, por ejemplo clear:both. Al establecer
esta propiedad a ambos lados de la capa pie no se colocará nada, osea que si había algo a su
lado, pasará para abajo, pero nunca a su lado derecho o izquierdo.
Y bueno hasta aquí este tutorial, espero que les haya servido. Por favor cualquier duda o
sugerencia puede hacérmela llegar mediante este formulario.
Este tutorial fué realizado por:
