Tu Sitio Ya

http://www.tusitioya.
info
Tu Sitio YA
A. Maurizzio Peñalba
1
http://www.tusitioya.info
Introducción
La Internet es un conjunto descentralizado de redes de comunicación interconectadas
que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas
heterogéneas que la componen funcionen como una red lógica única, de alcance
mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión
de computadoras, conocida como ARPANET, entre tres universidades en California y
una en Utah, Estados Unidos.
Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web
(WWW, o "la Web"), hasta tal punto que es habitual la confusión entre ambos
términos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la
consulta remota de archivos de hipertexto. Ésta fue un desarrollo posterior (1990) y
utiliza Internet como medio de transmisión.
La web está disponible como una plataforma más englobada dentro de los mass
media. Para "publicar" una página web, no es necesario acudir a un editor ni otra
institución, ni siquiera poseer conocimientos técnicos más allá de los necesarios para
usar un editor de texto estándar.
A diferencia de los libros y documentos, el hipertexto no necesita de un orden lineal de

principio a final. No precisa de subdivisiones en capítulos, secciones, subsecciones, etc.
Creando un sitio web desde 0

En la red, existen abundantes recursos que permiten seguir paso a paso el proceso de
crear un sitio web. Sin embargo, Estos están enfocados a crear sitios web,
extremadamente básicos que carecen de aplicación en la actualidad. Este curso
pretende formar y guiar el proceso que acompaña la creación de un sitio web más
especializado.
Lo necesario
Únicamente necesitaremos saber leer, y una conexión a internet, pues los recursos
que utilizaremos están disponibles en la red de manera gratuita.
Dudas
Siempre puedes preguntar en el /Foro/ donde procuraremos responder tus preguntas
lo mejor que podamos, puedes buscar y leer los temas en el foro sin necesidad de
registrarte sin embargo para poder preguntar debes hacerlo. Es necesario que
evitemos el SPAM y es una manera de hacerlo.
2
1. Conceptos básicos
1.1 Software Necesario
En cuanto al software que utilizaremos, será Dreamweaver, Es una de las herramientas

más completas con las que disponemos actualmente. Si bien es de pago, podemos
descargarnos una versión de prueba a fin de seguir este tutorial. O bien, buscar alguna
alternativa full en sitios como Taringa o bien Nicarevolution.
NOTA: El 90% del curso puede seguirse utilizando cualquier editor de código fuente
como el HTML-Kit o bien KompoZer (ambos totalmente gratuitos).
Adobe Dreamweaver es una aplicación en forma de estudio (enfocada a la

construcción y edición de sitios y aplicaciones Web basados en estándares.
Es el programa de este tipo más utilizado en el sector del diseño y la programación

web, por sus funcionalidades, su integración con otras herramientas como Adobe
Flash
En este curso, utilizaremos la versión CS3. Pues es una combinación de eficiencia y

funcionalidad.
¿Por qué no utilizar algún software gratuito? Aun no existen herramientas

verdaderamente maduras. (En cuanto al diseño web) que puedan obtenerse
gratuitamente.
URL descarga del Trial:
https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=es_es
3
Sea que hayamos descargado el trial, o bien hayamos obtenido alguna versión menos
“legal” de Taringa o Nicarevolution. El proceso de instalación será relativamente
sencillo y no vale la pena detallarlo aquí.
1.2 El espacio de Trabajo
Es hora de iniciar con la creación de nuestro sitio web, sin embargo, es importante que
configuremos nuestro espacio de trabajo. Así pues, ejecutaremos el Dreamweaver y
veremos algo como esto
Aunque contamos con muchas opciones, y de hecho la posibilidad de utilizar plantillas

predefinidas, en este caso, vamos a trabajar en un espacio completamente nuevo. Así
pues, vamos a seleccionar la Opción “Sitio de Dreamweaver”
4
Se nos solicitara ingresar un nombre para nuestro sitio. Yo escribiré “MiPrimerSitio”

Sin embargo, ustedes pueden seleccionar el nombre que mejor les parezca. Asi mismo
se nos solicita ingresar una URL. Este espacio lo dejaremos en blanco por el momento
pues no vamos a trabajar aun con un servidor en la red.
Hacemos clic en “Siguiente”
Vamos a seleccionar “No” Por el momento, no nos hará falta un servidor. Ya será en la
segunda parte de este curso que utilizaremos tecnologías como php. Solo nos queda
hacer Clic en Siguiente.
Aquí podemos seleccionar la ruta para nuestros archivos locales. Yo lo dejare por
defecto, la ruta señalada es el directorio raíz de Mis Documentos. Clic en “Siguiente”
5
Cuando se nos pregunte como nos conectaremos con nuestro servidor remoto,
seleccionaremos “Ninguno” y hacemos clic en Siguiente
Una vez que hemos completado la configuración del nuevo sitio, veremos de nuevo la
pantalla de bienvenida, sin embargo en el administrador de archivos, veremos algo
como esto
Esto nos permitirá mantener el orden del sitio y almacenar todos nuestros archivos, asi
mismo creara rutas relativas al sitio y no rutas absolutas lo que nos permitirá crear
hipervínculos con más facilidad, pero ese es otro tema. Es hora de crear un Nuevo
“HTML”
6
Ahora si, por primera vez podemos observar nuestro espacio de trabajo. Pero, ¿que
son todas esas barras y opciones?
La barra Insertar, nos permitirá manipular fácilmente algunos elementos y objetos que
eventualmente utilizaremos.
Ademas, contamos con la barra de propiedades, en ella podremos definir algunos

elementos importantes, claro que en primera instancia aprenderemos a trabajar sin
estas facilidades
El lienzo, es probablemente el panel más importante y representa el cuerpo de

nuestros documentos.
Además, Incluidos en el espacio de trabajo, se encuentran el inspector de CSS, El

inspector de etiquetas y administrador de sitios. Todas herramientas que utilizaremos
más adelante.
7
1.3 El lenguaje de las etiquetas HTML
Hasta este punto, hemos evitado la mención del susodicho lenguaje, pero. ¿Que es
HTML? Wikipedia lo define como
“HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de

marcado predominante para la elaboración de páginas web. Es usado para describir la
estructura y el contenido en forma de texto, así como para complementar el texto con
objetos tales como imágenes.”
Y de hecho, la definición es excelente, sin embargo, simplificándola un poco. Es un

lenguaje de etiquetas que se utilizan para dar formato a un documento html. Dicho
documento es interpretado por un navegador para mostrarte lo que día a día ves en
internet.
Al no ser un lenguaje de programación, no arrojara errores, si el lenguaje es ilegible,

simplemente no será interpretado.
1.4 Documentos HTML
Los documentos HTML (de extensión .html o .htm) son documentos cuyo formato
debe ser interpretado por el navegador. Y son los que conforman las páginas web.
Como todo, dichos documentos tienen una estructura básica. Vamos a cambiar a
modo código en Dreamweaver para observar más claramente de que hablamos.
Veremos algo como esto en nuestro “lienzo”
Todo documento html, debe iniciar y terminar con las etiquetas:
<html>
</html>
8
Y claro, podemos identificar las etiquetas en un documento html pues estas están
denotadas por los signos <etiqueta> además, toda etiqueta debe cerrarse si deseamos
que la misma sea interpretada adecuadamente por el navegador. Una etiqueta de
cierra con el signo “/” es decir </etiqueta>
Además, un documento HTML cuenta con dos partes claramente definidas. El

encabezado y el cuerpo. Todo lo incluido en el encabezado es información para el
navegador. Y lo incluido en el cuerpo es información para el usuario.
El encabezado del documento se define utilizando las etiquetas
<head>
</head>
Y en él se incluye mucha información importante, como por ejemplo los documentos

adicionales que deben ser cargados con el documento. Pero más importante el titulo y
la codificación de la pagina.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi Primer sitio Web</title>
</head>
El title del sitio, es el nombre que vemos en las pestañas de nuestro navegador.
Igualmente importante, tenemos el cuerpo del documento es decir todo lo incluido

entre las etiquetas
<body>
</body>
Este o no este formateado, cualquier texto que incluyamos en el cuerpo del

documento, podrá ser visto por quienes visiten el sitio.
Si hemos comprendido estos conceptos, podemos hacer una pequeña prueba. Para
visualizar nuestro primer sitio, vamos a realizar las siguientes ediciones al código
fuente:
<!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>
9
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi primer sitio web</title>
</head>
<body>
Este es mi primer sitio web
</body>
</html>
Oprimiremos F12 y Dreamweaver nos preguntara si deseamos guardar el documento.

Vamos a hacer clic en SI, y vamos a guardarlo con el nombre “test.html”
Y pronto veremos en nuestro navegador el resultado de nuestra primera edición
Si bien es un documento html bien estructurado, resulta muy simple, y claro no vamos
a colgarlo en la red.
10
Bueno, Es hora de empezar. Cerramos el test.html y vamos a crear un nuevo

documento en blanco. Que guardaremos como index.html además, en nuestro gestor
de sitios vamos a hacer clic derecho y a crear una nueva carpeta llamada “objetos”
1.5 Editando Texto
El texto es probablemente una de las herramientas que mas utilizaremos en nuestros

diseños. Y existen ciertas etiquetas especiales para darle formato.
En primer lugar, un párrafo se denota por
<p>Esto es un parrafo</p>
Y claro, el texto, es una parte que deseamos pueda ser observada por el usuario, por
tanto lo incluiremos dentro del cuerpo del documento
Para realizar un salto de línea, es decir, lo equivalente al “Enter” en un editor de textos

cualquiera debemos insertar la etiqueta
<br />
También es importante mencionar algún formato básico, como es el resaltar un texto

en “negrita” o hacerlo cursivo, eso lo hacemos usando las etiquetas <b> y las etiquetas
<i> así:
<b>este texto esta en negrita</b>
<i>este texto esta en itálica</i>
11
Si incluimos los ejemplos anteriores en nuestro documento, obtendremos algo como

esto:
Si oprimimos F12 y guardamos los cambios, veremos algo como esto en el navegador:
Tenemos un párrafo muy prolijo, sin embargo, no tiene ninguna clase de alineación,
justificado ni cualquier otro formato básico. Para lograr un resultado más elaborado,
deberíamos incluir en la etiqueta <p> ciertos atributos.
Los atributos complementan la funcionalidad de una etiqueta, y algunos atributos no

son exclusivos de la etiqueta en quistión. Es el caso del atributo align, cuyo valor debe
estar encerrado entre comillas y puede ser:
Para alinear al centro
<p align=”center”>Esto es un parrafo</p>
Para alinear a la derecha
<p align=”right”>Esto es un parrafo</p>
Para alinear a la izquierda
12
<p align=”left”>Esto es un parrafo</p>
O bien para justificar el texto
<p align=”justify”>Esto es un parrafo</p>
Y podemos incluirlos dentro de nuestro index de la siguiente manera
NOTESE que se han creado dos párrafos independientes
Como habremos notado, Dreamweaver tiene la capacidad de autocompletar,

herramienta que nos puede resultar muy útil a la hora de trabajar en modo “Código
fuente”
Si consideramos el resultado de la edición con la tecla F12, veremos algo como esto
Existen ciertos caracteres que no pueden ser incluidos de manera directa dentro del
código fuente.
13
Si deseamos visualizar caracteres especiales en nuestro documento HTML debemos

hacer uso de una extensa lista que contiene los respectivos códigos de cada carácter.
Caracteres especiales básicos
En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas
comillas o un & con su correspondiente carácter.
< < > >

& & " "
Caracteres especiales del HTML 2.0
Á Á À À
É É È È
Í Í Ì Ì
Ó Ó Ò Ò
Ú Ú Ù Ù
á á à à
é é è è
í í ì ì
ó ó ò ò
ú ú ù ù
Ä Ä Â Â
Ë Ë Ê Ê
Ï Ï Î Î
Ö Ö Ô Ô
Ü Ü Û Û
ä ä â â
ë ë ê ê
ï ï î î
ö ö ô ô
ü ü û û
Ã Ã å å
Ñ Ñ Å Å
Õ Õ Ç Ç
ã ã ç ç
ñ ñ Ý Ý
õ õ ý ý
Ø Ø ÿ ÿ
ø ø Þ Þ
Ð Ð þ þ
ð ð Æ Æ
ß ß æ æ
14
Caracteres especiales del HTML 3.2
¼ ¼
½ ½ ¡ ¡
¾ ¾ £ £
© © ¥ ¥
® ® § §
ª ª ¤ ¤
² ² ¦ ¦
³ ³ « «
¹ ¹ ¬ ¬
¯ ¯
µ µ º º
¶ ¶ ´ ´
· · ¨ ¨
° ° ± ±
¸ ¸ » »
¿ ¿
Otros caracteres especiales
× × ¢ ¢
÷ ÷ € €
“ ™
” ‰
Œ ƒ
‡ †
Resulta sin embargo, que utilizar esta lista es poco práctico, pero claro, tenemos una
alternativa interesante y es a la hora de crear textos, podemos utilizar el editor grafico
de Dreamweaver.
Así, cada vez que insertemos un carácter especial, como por ejemplo µ Dreamweaver
lo registrara automáticamente como un carácter especial.
1.6 Enlaces
Esos elementos que no pueden faltar en un sitio web, que nos permiten relacionar
nuestros documentos entre sí y crear contenidos dinámicos.
15
Los enlaces están marcados por la etiqueta <a>enlace</a> siendo “enlace” la palabra a
la que el usuario tendrá acceso, ahora. La etiqueta <a> por si sola, no tiene demasiada
utilidad. Por lo que se utiliza el atributo href que indica la ruta que debe seguir el
enlace.
De modo que la estructura de un enlace “estándar” seria:
<a href=”ruta”>Enlace</a>
Siendo ruta, el documento “destino” o bien puede ser un enlace externo incluyendo
<a href=”http://ruta.com”>Enlace</a>
Dentro de nuestro documento, podemos incluir entonces un enlace a Bloggeandolo a

modo de ejemplo.
Que se verá en el navegador así
Con esta sintaxis hemos creado un enlace a bloggeandolo que se abrirá en la misma
ventana. Cosa que aunque para los links internos del sitio está bien, si deseamos incluir
un link externo puede resultar poco conveniente para hacer que el navegador abra la
“ruta” en una nueva pestaña haremos uso de otro atributo de la etiqueta <a>
Me refiero al atributo target=”” que se utiliza así:
<a href=http://bloggeandolo.blogspot.com target="_blank"><i>MzStudios</i></a>
16
1.7 Los estilos CSS
Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje
usado para definir la presentación de un documento estructurado escrito en HTML
usualmente resulta un dolor de cabeza aprender este lenguaje sin embargo, aquí lo
haremos fácil ;-)
En primer lugar, vamos a crear nuestra hoja de estilos. Vamos a hacer clic en Archivo -
 Nuevo
Posteriormente, nos aparecerá una nueva pestaña en nuestro espacio de trabajo.

Dicha pestaña estará en blanco, pero por el momento es todo lo que tenemos. Y lo
guardaremos como “estilos.css”
17
Una vez definida nuestra hoja de estilos, solo hace falta que incluyamos algo de
contenido (claro que esta no es la parte mas fácil) sin embargo. Seguro que siguiendo
el curso todo saldrá como esperamos.
Volvemos a nuestro index.html y vamos a relacionar nuestra hoja de estilos con

nuestro sitio. Para eso, vamos a incluir una instrucción muy sencilla en nuestro
encabezado.
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
Aclaro que estoy utilizando una ruta relativa a mi documento html. Es decir estilos.css
está en la misma carpeta que index.html
Vale, ahora vamos a editar algunos atributos de nuestro sitio utilizando las
propiedades que definiremos en nuestra hoja de estilos CSS. Vamos a cambiar el color
de fondo de nuestro sitio web, de esa manera comprenderemos mejor cómo
funcionan las hojas de estilo.
En nuestro archivo estilos.css vamos a escribir:
body {background-color: #FFFFCC}
Con “body” indicamos la etiqueta a la cual le estamos aplicando el atributo,

posteriormente agregamos el atributo, en este caso un color de fondo.
En nuestro navegador veríamos algo como esto:

18
Como vemos, hemos dado a nuestro sitio un color amarillo que utilizaremos de base.
1.8 Insertando Imágenes
En primer lugar, debemos considerar la imagen que deseamos insertar en nuestro

documento. Yo utilizare una imagen llamada “equipo” dicha imagen la incluiremos en
nuestra carpeta “objetos”
Ahora, vamos a incluirla en nuestro documento utilizando la etiqueta <img> con el

atributo src=”” para señalar la ruta de la imagen
<img src=”objetos/equipo.jpg”/>
Podemos incluir la imagen dentro de un párrafo si deseamos alinearla.
Es conveniente, que utilizemos el atributo “alt” en nuestras imágenes, que es un

pequeño cuadrito que aparece cuando ubicamos el mouse sobre las imágenes
<img src=”objetos/equipo.jpg” alt="Equipo" />
También, podemos añadirle algún atributo adicional si deseamos redimensionarla. Por

ejemplo, podríamos hacerla más pequeña si agregamos
19
<img src=”objetos/equipo.jpg” width="400px" height="200px" alt="Equipo" />
Aplicando esto que hemos mencionado a nuestro código fuente, veremos algo como
esto:
Y en el navegador
Nuestro sitio, poco a poco empieza a tomar forma ahora tiene una hoja de estilos,
texto e imágenes, pero claro, no se mira demasiado elegante sino como un montón de
elementos dispersos por todos lados.
Me gustaría aclarar que los atributos de las imágenes, si bien pueden editarse a través
del código fuente, resulta más práctico utilizar el editor grafico de Dreamweaver, que
20
permite redimensionar imágenes de manera grafica. Así mismo añadirlas puede ser
tan sencillo como hacer un Crtl + V
Edición de imágenes utilizando el “Modo Diseño”
Claro que estas tareas sencillas realmente son muy fáciles desde el modo diseño, sin
embargo, el conocer el “Modo Texto” nos facilitara las cosas más adelante cuando
debamos realizar operaciones más complejas que solo pueden hacerse manualmente.
Una imagen también puede ser usada como enlace, lo que debemos hacer es agregar a
la etiqueta <a><img></a> Sin embargo, si hacemos esto, aparecerá un borde alrededor
de nuestra imagen, que podemos solucionar agregando el atributo border=”0” a
nuestra imagen
Resulta más conveniente hacerlo desde nuestra hoja de estilos CSS asi:
21
img {border-style: none}
De modo que ninguna imagen a la que agreguemos un enlace, tendrá borde.
<a href=http://bloggeandolo.blogspot.com target="_blank"><img

src=”objetos/equipo.jpg” alt="Equipo" /></a>
1.9 Creando Clases
Vale, hasta el momento tenemos un sitio bastante rudimentario, hemos aprendido a

insertar imágenes y aplicar atributos sin embargo, aún estamos lejos de crear un sitio
lo suficientemente “profesional” como para mostrárselo al mundo.
Entonces, ¿qué hace falta? En primer lugar, no hemos aprendido a marquetar una
web, es decir estructurarla. También debemos profundizar nuestros conocimientos
sobre CSS.
Pues refiriéndonos a las hojas de estilos, nos hace falta aprender a definir clases. Es
decir, grupos de atributos que podamos aplicar a ciertas etiquetas.
Por ejemplo, si quisiésemos que todos nuestros párrafos estuvieran alineados al

centro, podríamos crear en nuestra hoja de estilos
p {text-align:center}
Sin embargo, es poco probable que deseemos que TODOS los párrafos de nuestro sitio
estén alineados al centro, es por eso que vamos a crear una clase, que podamos usar
con la etiqueta <p>
Para definir una clase, basta con agregar un punto antes del nombre de clase es decir.
.titulos
Si creamos una clase llamada títulos para ciertos párrafos podemos definir ciertos
valores como por ejemplo:
.titulos {font-family:times new roman;
font-size:30px;
font-weight:bold;
text-align:center}
Y ahora, para aplicar dicho estilo a un párrafo, vamos a agregarlo mediante el atributo
class=””
22
<p class="titulos" align="center">Este es mi primer <b>sitio web</b></p>
Dejando nuestro código fuente de la siguiente manera
Y mostrando como resultado final en el navegador:
NOTESE que al aplicar un estilo el formato previo, incluido en el documento es

ignorado.
Veremos más el uso de las clases cuando empecemos a enmarquetar nuestro sitio sin
embargo este es su funcionamiento básico.
En este capítulo, hemos aprendido los conceptos y tenemos las nociones básicas sobre
el lenguaje HTML y la creación de un sitio web, El funcionamiento de las hojas de estilo
y las clases.
Aunque podríamos continuar trabajando sobre nuestro index.html debemos aprender

a trabajar con plantillas, que nos facilitaran el trabajo. Así que nuestro índex por el
momento, será solo una referencia. De aquí en adelante comienza el verdadero curso.
23
2. Creando nuestra plantilla.

Una plantilla la podemos definir como un elemento “estático” en nuestro sitio, que
contendrá partes editables (estas serán independientes para cada página), así pues si
deseamos editar algún elemento de nuestro sitio solo hará falta remitirnos a la
plantilla.
Ahora, para poder definir los elementos editables y los no – editables, debemos crear
una estructura básica en nuestro sitio web. Podemos usar para ello. Tablas o Capas.
Este curso, utilizaremos capas, un método más limpio y profesional.
2.1 La estructura básica

En primer lugar, crearemos un nuevo documento HTML. Además conviene crear una
nueva hoja de estilos a la que llamaremos “estilos-general.css”
Vamos a relacionar nuestra hoja de estilos con el documento en cuestión. Justo como
lo vimos en el capítulo 1.7.
Una vez hecho esto, vamos a crear nuestras capas, la etiqueta que define a una capa
es <div>.
Una capa no es más que un elemento rectangular que sirve para agrupar datos dentro
de bloques en un sitio web. La posición, y tamaño de una capa, está definida por su
clase o por su id de clase.
Pero antes de empezar a escribir <div> a lo loco, hace falta que hagamos un pequeño
esquema de la estructura que deseamos. Esto lo podemos hacer en cualquier
programa para la edición de gráficos.
¿Por qué hacer esto? Aunque es un paso adicional, nos permite darnos una idea mas
clara de lo que queremos hacer.
Es muy importante que a la hora de diseñar estemos claros de lo que deseamos hacer,
plantearnos un objetivo y alcanzarlo.
24
Una vez que tenemos una idea clara de lo que deseamos hacer, podemos empezar
crear nuestras capas.
Para crear una capa, basta con definir un texto entre las etiquetas <div></div> sin
embargo, el hacerlo de esta manera solo agrupa el texto en bloques sin formato
alguno.
Ahora, un concepto que debemos tener claro es el de clase, pero más importante el de
“estilos únicos” pues son un identificador para cada capa. Si bien las clases las
definimos con un “.” los estilos únicos los definimos con “#”
Claro que el detalle del concepto siempre es algo vago, por eso vamos a aplicarlo a
nuestra plantilla definiendo nuestros 5 capas principales (1 – 5) más adelante
explicaremos la capa “global”
En nuestra hoja de estilos vamos a incluir 5 nuevos “estilos únicos” y vamos a definir
los colores de borde para cada uno.
#head {border: 3px solid #0000FF}
Como habremos notado, Dreamweaver nos echa una mano en este asunto y resulta
muy fácil trabajar en el CSS del sitio con una herramienta tan completa.
25
Y además, con su selector de color, se hace mucho más fácil el trabajo de diseño.
Ahora, solo hace falta que definamos nuestros divs en nuestra plantilla, pero primero
vamos a guardarla como plantilla.html, una vez hecho esto vamos a definir nuestros
divs de la siguiente manera
<div id="estilounico">AlgunTexto</div>
De modo que nuestro código fuente quedaría así
Nuestra hoja de estilos
26
Y podemos visualizarlo en el navegador, aunque claro, aun no se parece demasiado a

la estructura que buscamos.
Podemos agregar el fondo a nuestro sitio, Yo he decidido sea negro.
No hay de qué preocuparse. Mas adelante arreglaremos ese problemita con el texto
(si, el que no se ve) por el momento hablaremos un poco de de nuestro div global. Es
decir, en nuestra plantilla de diseño, nuestro div 0.
Es importante, pues con el definiremos el ancho de nuestro sitio. Mas adelante,

hablaremos de resoluciones dinámicas, sin embargo por el momento, vamos a tratar la
resolución de nuestro sitio como un elemento estático.
Al ser nuestro div, global el “padre” de todas nuestras capas. Debemos ubicarlo de la
siguiente manera:
27
NOTA: Aunque html no es sensible al tabulado*, recomiendo utilizarlo para mantener

el orden y estructura del sitio.
Nuestro “estilo único” global, dictara el tamaño asignado al contenido de nuestro sitio,
en este caso, por ser la resolución más usada. Vamos a definir el ancho de nuestra web
en 800px. ¿Cómo? Adivinaron, desde nuestra hoja de estilos.
#global {width:800px;
margin:4px auto}
Además, vamos a definir en nuestro estilo único “global” el fondo de nuestro sitio. De
nuestro contenido para ser exactos.
NOTA: cada propiedad en CSS dese separarse por un “;”
#global {width:800px;
margin:4px auto;
background-color:#FFFFFF;
border: 3px solid #999999}
Así pues, nuestra hoja de estilos quedaría:
Y nuestra vista previa en el navegador revela un resultado que cada vez parece más
una página web.
28
Ahora que hemos terminado con nuestro Div global, vamos a reubicar algunos
elementos. Me refiero al Div 4. Vamos a ubicarlo encima del Div3.
Una vez hecho esto, vamos a editar las propiedades CSS de nuestros divs, ubicándolos
como en nuestra plantilla de diseño.
Vale, ahora vamos a darle un poco mas de forma a nuestro sitio, agregando un par de
propiedades más a nuestra hoja de estilos CSS. Estas ubicaran nuestros divs, en las
posiciones que le indiquemos.
Así pues, vamos a comenzar con nuestro “menú”. Este lo ubicaremos a la izquierda,
donde usualmente están ubicados los menús en un sitio web. Y le daremos un ancho
de 150px.
#menu {
border: 3px solid #FF6600;
width:150px;
float:left;
padding:3px;
height:auto;
margin:5px
Indicamos en primer lugar que el ancho de la capa será de 150 pixeles, estará
“flotando” a la izquierda del contenido con un padding de 3 pixeles. El padding es una
29
especie de borde interno que hará que nuestros contenidos no estén muy pegados al
borde de la capa
Así mismo, definimos la altura de la capa como “auto” es decir, estará en dependencia
del contenido. El margen es ese espacio que vemos entre las capas. Lo mismo haremos
para el Div 4 pero vamos a cambiar left por right, es decir, que este flotara a la
derecha.
#publicidad {
border: 3px solid #3399FF;
width:150px;
float:right;
padding:3px;
height:auto;
margin:5px
Para nuestro Div número 3, vamos a alinearlo a la izquierda justo después de nuestro
menú siempre agregando un padding de 3 pixeles y un margen de 5
#contenido {
border: 3px solid #FF0000;
width:420px;
height:auto;
padding:3px;
margin:5px;
float: left;
Una vez que hemos definido nuestros 3 divs principales, vamos a agregar un par de
propiedades al head y a los créditos a fin de crear un poco de orden.
#creditos {
30
border: 3px solid #FFFF00;
width:auto;
height:30px;
margin:5px;
clear: both;
OJO, Además de los elementos que ya manejamos aquí utilizamos la propiedad clear,
que nos dice que no permitirá elementos flotantes ni a la izquierda ni a la derecha (por
eso utilizamos both).
Para el head, solamente vamos a incluir un par de márgenes que separaran nuestra
cabezera del cuerpo del sitio
#head {
border: 3px solid #0000FF;
margin:5px
Al final, nuestro código fuente (el de la hoja de estilos) debería lucir más o menos así:
31
Ahora, podemos visualizar nuestro sitio en el navegador.
Ciertamente hemos alcanzado nuestro objetivo. Y por fin nuestro sitio tiene una
estructura básica. De modo que podemos empezar a trabajar sobre esta.
2.2 Menú
El menú, uno de los elementos más importantes de nuestro sitio. Y es que permite a
los usuarios navegar a través de nuestro contenido. Ya que hemos designado un
espacio para nuestro menú es hora de construirlo.
Vale, para crear nuestro menú, vamos a utilizar listas. En HTML una lista se define con
la etiqueta <ul> y cada elemento se marca con la etiqueta <li> de esta manera.
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
<li>elemento 4</li>
</ul>
32
Dicha configuración, daría como resultado algo como esto:
Aunque claro, nuestro menú, será un poco más elaborado, ¿cómo? Muy fácil, y si,
seguro lo has adivinado. Con nuestra hoja de estilos.
En primer lugar, ya que hemos ubicado nuestro menú, el feo borde anaranjado no nos
hará falta, por tanto vamos a removerlo.
Lo que si agregaremos, es un tipo de letra un poco más “estilizada” para nuestro

menú.
Eso lo haremos agregando a nuestro CSS una propiedad llamada font
#menu {
width:150px;
float:left;
padding:3px;
height:auto;
margin:5px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
Ahora, vamos a definir las propiedades específicas para cada elemento HTML dentro
del menú, esto lo haremos utilizando la nomenclatura:
#estilounico etiqueta {propiedades}
Y como primer paso, vamos a quitarle a las listas dentro de nuestra capa, esas pelotitas
negras que aparecen a la par del elemento señalado.
Así pues, vemos como asignamos la propiedad “list-style-type” y le damos un valor

“none” a las etiquetas “ul” y “li”
#menu ul, li {
list-style-type: none;
33
Además, quitaremos el margen y el padding a nuestro listado, lo que hará ver los
elementos del nuestro menú, perfectamente alineados.
#menu ul {
margin: 0;
padding: 0;
Y a cada elemento de nuestro menú, vamos a darle un borde que hará las veces de
separador para los elementos del mismo.
#menu li {
border-bottom: 1px solid #000000;
Ahora, vamos a darle un estilo característico a cada enlace dentro de nuestro menú.
Para eso utilizaremos las siguientes propiedades
#menu a {
text-decoration: none;
color: #333333;
background:#FFFFFF;
display: block;
padding: 3px 6px;
width: 138px;
Con la propiedad text-decoration, indicamos que no deseamos que nuestros enlaces

estén subrayados. La propiedad display, indica que cada enlace, generara un bloque
característico.
Finalmente, vamos a agregarle a nuestro menú una propiedad hover. Es decir que se
activara cuando pasemos el mouse sobre él elemento.
34
#menu a:hover {
background: #CCCCCC;
Ahora, debemos agregar algunos elementos a nuestro menú para poder visualizar el
resultado. Claro que nuestro sitio no tiene ningún enlace, así que agregaremos algunos
links “ejemplo” cuya ruta sea “#” (es decir, ninguna)
Nuestra hoja de estilos, debería verse algo así una vez finalizada la edición. (Ojo que
solo estoy colocando la parte en la que trabajamos)
35
Y si presionamos F12, podremos ver en nuestro navegador un bonito menú.
2.3 Header
36
Probablemente una de las partes más importantes de nuestro sitio, es lo primero que
los usuarios ven, y debe ser llamativo, pero no excesivamente pomposo. De cualquier
manera es algo muy personal.
En primer lugar, vamos a eliminar ese molesto borde azul que no hace otra cosa más
que molestar. Pero claro, no hace falta que explique nuevamente como hacerlo. Yo
utilizare este:
Para insertarlo, en primer lugar, necesitamos ubicar nuestro objeto en nuestra carpeta
de objetos. Lo llamare webhead.png
Tenemos dos opciones para insertar nuestro head. La primera, hacerlo como una
imagen dentro de nuestro DIV head. Y la segunda, como fondo de nuestro DIV
Usualmente, si pensamos incluir algún contenido adicional en nuestro DIV, es

recomendable utilizar la segunda opción.
Sin embargo. Por el momento no vamos a insertar nada más en nuestra cabecera y
por tanto vamos a insertarlo como si de una imagen cualquiera se tratase, espero no
se os haya olvidado como insertar imágenes.
37
A que ahora empieza a parecer un verdadero sitio web. Aunque claro, aun tenemos
muchos detalles que debemos pulir y de hecho, secciones completas que construir.
2.4 Créditos
Quizá en este momento te preguntaras, ¿A qué hora empezaremos a trabajar en el
contenido? Pero debemos recordar que estamos trabajando en la plantilla. Por tanto,
debemos definir primero las partes estáticas del sitio.
Es decir esas que van a variar independientemente de la sección en la que nos

encontremos.
En este momento, vamos a trabajar en una de las partes más importantes del sitio. Los
créditos. ¿Por qué importante? Fácil, porque si hemos creado todo esto desde 0,
mínimo incluir nuestro nombre en el pie de página.
Pero más importante que ser reconocidos, es que con el “pie de página” vamos a
aprender a redondear esquinas.
Aunque se me ocurrió en un principio redondear las esquinas de nuestro contenedor

utilizando CSS y algunas imágenes. Le di muchas vueltas al asunto de las esquinas
redondeadas. Y es que hay muchas opciones. Sin embargo por ser la más flexible y
como pauta para la implementación de scripts, me decidí a utilizar”Nifty Corners
Cube”.
Un script liberado balo la licencia GPL que planea facilitarnos la vida, al menos hasta
que CSS3 esté bien soportado por todos los navegadores.
Vale, pero que es un ¿script?, es un pequeño programa que automatiza ciertas tareas.
38
Y ¿cómo se usa? Muy fácil. En primera, nos vamos a descargar este paquete desde el
sitio oficial.
http://www.html.it/articoli/niftycube/NiftyCube.zip
Una vez lo hemos descomprimido (sea con winrar o cualquier otro gestor de paquetes)
y copiaremos estos 4 archivos
En nuestro directorio raíz.
Ahora, en nuestra plantilla vamos a incluir lo siguiente, dentro de nuestro

<head></head>
<script type="text/javascript" src="niftycube.js"></script>
Una vez establecido este parámetro, podremos llamar a la función Nifty(), señalando el
div, que queremos afectar.
<script type="text/javascript">
window.onload=function(){
Nifty("div#creditos","big");
</script>
Donde div#creditos indica que la capa cuyo id único de estilo sea #creditos, será
afectada por la función Nifty.
En nuestro head, debería verse más o menos así:
Una vez hecho esto, vamos a colorear nuestro DIV y a cambiar el color del texto desde
nuestra hoja de estilos. El resultado final será:
39
Que visto en el navegador quedaría más o menos así:
¿A qué os vais emocionando con el resultado he? Pero aun nos falta un poco para
acabar.
2.5 Contenido adicional

Vale, estamos a punto de terminar nuestra plantilla, pero hay todavía un par de capas
a las que no hemos aplicado ningún estilo. En este caso, quisiera agregar a nuestra
capa una imagen de fondo. Pero claro, dicha imagen debe poder acoplarse al
contenido de la misma, por tanto, vamos a crear no una sino 3 imágenes.
De modo que en la parte superior, veremos una imagen, en medio, los bordes y en la
parte inferior la imagen que cerrara la caja de contenido
Yo utilizo adobe fireworks para crear estas imágenes, aunque claro puedes utilizar
cualquier editor de imágenes.
40
Así pues, llamaremos a nuestras imágenes:
curva-superior.png
fondopubli.png
curva-inferior.png
Y las guardaremos en nuestra carpeta de objetos, ubicada en nuestro directorio raíz.

Ahora, es importante mencionar que cada capa, solo puede incluir un fondo, por tanto,
vamos a crear tres capas adicionales para darle a DIV publicidad, una estructura.
<div id="publicidad">
<div id="curvasuperior"></div>
<div id="contenidopubli"></div>
<div id="curvainferior"></div>
</div>
Esto implica que nuestro div, publicidad, contendrá 3 divs adicionales (justo como
hicimos con nuestro div global)
Ahora, vamos a crear los estilos únicos para cada DIV, donde incluiremos cada una de
las imágenes de fondo que seleccionamos para nuestra web.
Para la curva superior y la curva inferior: Utilizaremos la propiedad background-image,

para definir la imagen de fondo de nuestra capa. La propiedad repeat, indica si se
repetirá o no y en qué dirección. El width lo fijaremos al 100% para que ocupe todo el
espacio posible dentro de nuestro contenedor y el height lo fijaremos en 30px (el alto
de nuestra imagen)
Para nuestro div de contenido, vamos a fijar nuestro height en auto, para que nuestra
capa pueda variar su tamaño. Y haremos que el background-image se repita en el eje y
de modo que en nuestra hoja de estilos, agregaremos lo siguiente:
NOTESE: que no estoy detallando el procedimiento, pues ya en capítulos pasados

hemos tratado con más detenimiento la edición del CSS
41
#curvasuperior {
background-image:url(objetos/curva-superior.png);
background-repeat:no-repeat;
width:100%;
height:30px;
#contenidopubli {
width:auto;
height:auto;
padding:5px;
background-image:url(objetos/fondopubli.png);
background-position:center;
background-repeat:repeat-y;
#curvainferior {
background-image:url(objetos/curva-inferior.png);
background-repeat:no-repeat;
width:100%;
height:30px;
Como pueden observar, no hemos hecho nada más que definir las propiedades más
elementales de cada uno de los componentes.
OJO: Claro que pudimos utilizar este método anteriormente para crear las esquinas
redondeadas de nuestros “créditos” sin embargo, en el curso, se pretende presentar
algunas técnicas de diseño y no “normalizar” un procedimiento.
Una vez concluida la edición, podremos ver en nuestro navegador algo como esto:
42
2.6 Creando los componentes editables

Finalmente hemos llegado al famoso “Div. 3 Contenido” ¿no os empezaba a estorbar
ya esa cajita roja?
Bueno, es hora de trabajar en nuestro contenido y estandarizar algunos elementos

antes de definir las secciones editables en nuestro sitio.
En primer lugar, vamos a eliminar finalmente el feo marco rojo y a crear un par de DIVs
adicionales dentro de nuestra sección “contenido” para definir el sitio donde irán los
“Títulos” y donde ira propiamente nuestro “Contenido”
Esto nos facilitara darle formato a los distintos tipos de letras que vamos a crear,
además dará un orden riguroso a nuestro sitio haciéndolo mas profesional.
Hecho esto, vamos a darle algunas propiedades en nuestra hoja de estilos a sus
respectivos id’s
Claro que no voy a detallar este procedimiento, pues lo hemos repetido ya en varias
ocasiones a lo largo del curso. Además no utilizaremos al menos por el momento,
ninguna propiedad nueva.
43
Vale, una vez que hemos definido las propiedades más básicas, vamos a definir el tipo
de letra, tamaño y color que utilizaremos en nuestras etiquetas h, que se refieren a los
encabezados.
Para la etiqueta h1 (que usualmente marca el titulo de nuestro sitio) vamos a definir
ciertas propiedades.
#titulo h1 {
color:#660000;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
Siendo “color” efectivamente la propiedad que marca el color de la letra. Font-family,

Font-size y Font-weight marca el tipo, tamaño y grosor de nuestra fuente.
Podemos entonces, revisar si hemos asignado correctamente la propiedad, dando

formato en nuestro código fuente a un texto.
Que en el navegador, luciría asi:
44
Ahora, vamos a darle a nuestro “content” propiedades para la etiqueta p, y así definir
claramente el tipo de letra que utilizaremos.
#content p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
Una vez hecho esta, y un par de correcciones más que pueden ver a continuación
Vamos, a finalmente, definir las partes editables de nuestro sitio web. Esto lo haremos
en modo diseño.
Haremos clic derecho sobre nuestro “DIV 3”, y vamos a seleccionar donde dice
“plantilla” – “Nueva región editable”
Dreamweaver nos mandara un advertencia, de que nuestra página se convertirá

automáticamente en una plantilla y si queremos continuar, nosotros le daremos “si”
45
Cuando nos solicite un nombre para la región, podemos llamarle “contenido” por
ejemplo. Y ahora en nuestro condigo fuente, veremos algo como esto:
Para darle elementos editables a nuestro Head, vamos a dejar nuestro title entre:
Una vez hemos hecho esto, vamos a guardar nuestro documento. Completando
cualquier información que Dreamweaver nos solicite.
Ahora, vamos a crear un nuevo archivo, (Archivo  Nuevo) pero vamos a irnos a
plantillas de la página en vez de HTML en blanco. Y ¡Voila! Nuestra plantilla esta lista
para usarse.
Que quiere decir esto, significa que ahora podremos editar el contenido de las páginas
creadas a partir de la plantilla. Pero no la estructura de la misma en cada página
individual. Para editarlas todas al mismo tiempo. Solo vamos a editar nuestra plantilla
en cuestión, que se habrá guardado en una nueva carpeta llamada templates. Con
extensión .dwt
46
Le damos crear, y guardaremos el documento como index.html (sobrescribiendo

nuestro primer index)
Si vemos nuestro código fuente, solo tenemos permisos para editar el “contenido” y el
“title” de nuestro sitio. Aunque claro, siempre podemos editar la estructura desde
nuestra plantilla.
Agregando algo de contenido a nuestro DIV content (no hace falta que explique esta
parte) tendremos algo más o menos asi:
Ya en el siguiente capítulo, trabajaremos mas en el contenido y en la edición de los

elementos que aun están vacios, como el espacio para la publicidad o bien, el menú.
Además crearemos una galería fotográfica y un formulario de contacto.
47
3. Contenido del Sitio

En este capítulo vamos a preparar nuestro sitio para colgarlo en internet, ya hemos
creado una plantilla y no vamos a tener mayores problemas de diseño. Sin embargo,
seleccionar el contenido, es probablemente uno de los mayores desafíos a los que se
enfrenta un diseñador.
3.1 Secciones
En primer lugar, vamos a desarrollar un pequeño esquema, que nos facilitara las cosas,
vamos a definir que contenido vamos a mostrar en nuestro sitio.
En mi caso, incluiré en el sitio ejemplo:
Inicio
Historia
Galería
Recursos
Contacto
Ustedes pueden crear más o menos secciones. A partir de aquí, el curso es un mero
ejemplo de las cosas que podemos hacer una vez creada nuestra plantilla y definidos
los aspectos más importantes de nuestro sitio.
En primer lugar, vamos a crear nuestros documentos html, esto lo haremos desde
“Archivo”  “Nuevo” y seleccionando “Pagina de Plantilla” para seleccionar nuestra
plantilla.
Nos aparecerá algo más o menos así:
48
En principio, Editaremos nuestro <title>, cambiaremos donde dice
Por el título de la pagina en cuestión, en este caso, siguiendo con mi esquema
Y guardaremos nuestro documento como historia.html (siempre en nuestro directorio

raíz)
NOTA: Las rutas son sensibles a mayúsculas y minúsculas, es recomendable trabajar en

minúsculas.
Una vez hecho esto, vemos como en nuestro árbol de archivos, aparece un nuevo
archivo llamado historia.html
Repetiremos este procedimiento para cada una de las secciones de nuestro sitio, de
modo que tendremos cinco archivos .html en nuestro directorio raíz.
Hecho esto, abriremos nuestra plantilla para poder editar los elementos de nuestro
menú. Esto podemos hacerlo desde nuestro árbol de objetos, seleccionando el archivo
plantillaprinc.dwt en la carpeta “Templates”
49
Finalmente, con una ruta que dar a nuestros enlaces, empezaremos a definirlos en
nuestro menú.
OJO, que estamos agregando “../” A nuestras rutas, lo que indica que nuestro
documento siempre buscara en el directorio raíz el archivo especificado.
Guardamos nuestra plantilla y Dreamweaver nos preguntara si deseamos actualizar los

archivos
50
Nosotros, seleccionaremos “Actualizar” es decir, a todos los archivos “hijos” de nuestra

plantilla se les aplicaran los cambios que apliquemos a nuestra plantilla.
Además, agregare algo de contenido a mi DIV “publicidad” actualizando todos mis

documentos. Así pues, abrimos nuestro index.html y presionamos F12, para verlo en
nuestro navegador
Como podemos observar, todo cambio que apliquemos a nuestra plantilla será visible
en los archivos “hijos” de la misma.
3.2 Contenidos Estáticos

Para nuestro index.html, recursos.html y nuestro historia.html, solo hace falta editar el
contenido del div “content” y modificar el div “titulo” de modo que no hará falta que
explique mayor cosa para estas dos secciones.
3.2.1 Galería
Crear una galería, puede ser tan simple como agregar algunas imágenes a nuestra
página, sin embargo. Quisiera que nuestra galería incluyera un efecto “lightbox” Lo
haremos con la inclusión de un script adicional desarrollado por un tercero, justo como
hicimos con nuestras esquinas redondeadas.
Dicho script lo incluiremos únicamente en la pagina “galería” a fin de no incrementar

demasiado el peso de nuestro sitio web.
En primer lugar, vamos a descargar el script desde su página oficial
http://www.huddletogether.com/projects/lightbox2/#download
51
Una vez lo hemos guardado, vamos a descomprimirlo, veremos 3 carpetas y un

index.html, nosotros vamos a copiar las tres carpetas a nuestro directorio raíz.
Debería verse más o menos así
Abrimos pues nuestra página “galería.html” en el Dreamweaver, y vamos a incluir en

nuestro <head></head> algunas referencias a los archivos que hemos copiado a
nuestro directorio raíz.
OJO: Recuerda que solo podrás incluir contenido dentro de una pagina generada a
partir de una plantilla si cuentas con una instancia editable en la misma, para
identificar dichas regiones, busca en tu código fuente

Hecho esto, vamos a incluir las imágenes que incluiremos en nuestro “content” pero
claro, no queremos ubicar imágenes pesadas en nuestro contenido, pues harían que
nuestro sitio fuese muy pesado.
52
Vamos a crear dos imágenes, una será una “miniatura” y la otra la imagen que
utilizaremos como “destino”.
Crearemos un directorio dentro de nuestro directorio raíz, llamado “galería” que

contendrá un directorio en su interior llamado “imágenes” Las miniaturas las
ubicaremos en nuestro directorio “galeria” y sus respectivas “imágenes ruta” en el
directorio “imagenes”.
Si te has enredado, la cuestión es más o menos así
Ahora, en nuestro DIV “content” vamos a crear una tabla de 3 x 2, esto lo haremos
para crear ordenar un poco las imágenes que incluiremos. Esto lo hacemos utilizando
la etiqueta table.
<table width="100%" border="0">
<tr>
<td>Primera Celda</td>
<td>Segunda Celda</td>
<td>Tercera Celda</td>
</tr>
<tr>
<td>Cuarta Celda</td>
<td>Quinta Celda</td>
<td>Sexta Celda</td>
</tr>
</table>
53
Donde <tr> indica es un separador vertical y <td> un separador horizontal. Es decir, si

hubiésemos querido una tabla de 2 x 4 habriamos agregado otro elemento <td>
dentro de cada uno de los elementos <tr>
NOTA: las etiquetas <tr> y <td> admiten atributos como width.
Hecho esto, dentro de nuestra primera celda, vamos a insertar un vínculo a nuestra
imagen, utilizando como texto para el vínculo nuestra miniatura.
Agregando a nuestra etiqueta <a> un nuevo atributo. rel=”lightbox” que indica que
nuestro la una relación entre nuestro enlace y la función lightbox que incluimos en
nuestro <head>
Si vemos nuestra galería en el navegador, veremos algo como esto:
Y al hacer clic sobre la imagen, veremos algo como esto, aunque claro, ustedes pueden
agregar muchas más imágenes, siempre siguiendo el procedimiento descrito mas
arriba.
54
Probemos hacer clic sobre nuestra imagen y ¡Voila! Un efecto lightbox que queda
excelente con nuestro sitio.
¿A que ha quedado muy profesional? pueden centrar su imagen en la celda, utilizando

los atributos para la etiqueta <p>
3.2.2 Contacto
En nuestra página de contacto, incluiremos un formulario que utilizara un lenguaje de
programación llamado PHP. Uno de los más comunes en el desarrollo web. Aunque
claro, en este curso. No aprenderemos PHP. Eso será quizás en el siguiente (claro que
depende si logro un éxito moderado con este :-))
Pero bueno, vamos a crear en primer lugar un formulario, donde nuestros usuarios
introducirán datos, que luego serán utilizados por nuestro script en php. Abrimos
nuestro “contacto.html” y seleccionaremos “Archivo”  “Guardar Como”
Vamos a marcar en “Tipo”
55
Y seleccionar Archivos PHP para guardarlo como enviar.php
OJO que una vez realizados estos cambios, conviene editar en la plantilla la ruta del
menú para que señale al archivo “enviar.php”
Una vez hecho esto, vamos a copiar nuestro programa dentro de nuestro DIV
“content”
<?
if (!$HTTP_POST_VARS){
?>
<form action="enviar.php" method=post>
<p>Nombre: </p>
<p>
<input type=text name="nombre" size=16>
<br>
</p>
<p>Email:</p>
<p>
<input type=text name=email size=16>
<br>
Comentarios:</p>
<p>
<textarea name=coment cols=32 rows=6></textarea>
<br>
<input type=submit value="Enviar">
</p>
</form>
<?
}else{
56
//Estoy recibiendo el formulario, compongo el cuerpo
$cuerpo = "Formulario enviado\n";
$cuerpo .= "Nombre: " . $HTTP_POST_VARS["nombre"] . "\n";
$cuerpo .= "Email: " . $HTTP_POST_VARS["email"] . "\n";
$cuerpo .= "Comentarios: " . $HTTP_POST_VARS["coment"] . "\n";
//mando el correo...
mail("tucorreo@tudominio.com","Formulario recibido",$cuerpo);
//doy las gracias por el envío
echo "Gracias por rellenar el formulario. Se ha enviado correctamente.";
?>
Como mencione antes, en este curso no aprenderemos PHP así que no comentare el
código fuente, pues tendríamos que remitirnos a conceptos tan básicos como las
variables. Y están fuera de contexto.
Vista en nuestro navegador, nuestra página de contacto, luciría más o menos así
57
OJO que el formulario no funcionara hasta que no hayamos montado nuestro sitio en
la red, además depende del servidor y su soporte de la función mail ()
De modo que hemos terminado con nuestro sitio, es hora de montarlo en la red, y
echarlo a andar. ¿Genial no? Estamos a punto de terminar, y que duro ha sido, pero
seguro ha valido la pena.
58
4. Publicando un Sitio Web

Para poder publicar un sitio en la red, necesitamos un servidor que aloje los archivos
de nuestro sitio, y los haga accesibles a través del protocolo http:// En este curso,
vamos a subir nuestros archivos, a un servidor gratuito que tenga la función mail ()
habilitada. Dicha función permitirá que enviemos correos desde nuestro formulario de
contacto.
NO SON MUCHOS los servidores gratuitos que admiten la función mail (), uno de ellos
sin embargo es 000webhost.com
En la página principal, http://000webhost.com vamos a hacer clic sobre el botón “Sign

Up”
Veremos un formulario como este (trabajaremos con un subdominio más adelante

consideraremos un dominio):
59
En dicho formulario, ingresaremos Nuestros datos. Terminado el proceso de registro,

veremos algunos datos importantes
Conviene que los guardemos en un archivo para acceder a ellos cuando los
necesitemos. Una vez hemos guardado los detalles de nuestra cuenta, vamos a
necesitar un cliente FTP (File Transfer Protocol) para subir los archivos de nuestro
ordenador.
Aunque existen muchos clientes FTP (y de hecho Dreamweaver lo incluye en su gestor

de sitios), en este curso utilizaremos FileZilla
60
En el cuadro rojo, podemos acceder a nuestros archivos locales. Es importante que nos
ubiquemos sobre nuestro directorio raíz.
Ahora, vamos a realizar la conexión utilizando los datos que nos suministro
000webhost.
Establecida la conexión, veremos en nuestro “Servidor Remoto” una carpeta llamada

public_html
Debemos subir TODOS los archivos de nuestro sitio local al servidor remoto. (si no son
muchos más que en este curso, no tardara mas de unos pocos segundos)
Dicho proceso es muy similar en un servidor de pago. Claro que la velocidad de carga
en un servidor de pago, será muy superior.
Concluido el proceso. Solo hace falta apuntar nuestro navegador al sudominio que
hemos especificado y ¡FINALMENTE hemos creado un sitio web!
5. Extender y otros Recursos

Si deseas extender la funcionalidad de tu sitio, agregar un foro, monetizar tu sitio o
agregar otros scripts puedes acceder a http://tusitioya.info donde encontraras más
información al respecto.
También puedes preguntar en nuestros foros. Si algo no te ha quedado claro y

necesitas ayuda, pregunta con confianza, claro que hay que registrarse solo te tomara
un par de minutos.
61

Tu Sitio Ya

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tu Sitio Ya

Uploaded by

Copyright:

Available Formats

http://www.tusitioya.

A diferencia de los libros y documentos, el hipertexto no necesita de un orden lineal de

Creando un sitio web desde 0

En cuanto al software que utilizaremos, será Dreamweaver, Es una de las herramientas

Adobe Dreamweaver es una aplicación en forma de estudio (enfocada a la

Es el programa de este tipo más utilizado en el sector del diseño y la programación

En este curso, utilizaremos la versión CS3. Pues es una combinación de eficiencia y

¿Por qué no utilizar algún software gratuito? Aun no existen herramientas

URL descarga del Trial:

1.2 El espacio de Trabajo

Aunque contamos con muchas opciones, y de hecho la posibilidad de utilizar plantillas

Se nos solicitara ingresar un nombre para nuestro sitio. Yo escribiré “MiPrimerSitio”

Hacemos clic en “Siguiente”

Ademas, contamos con la barra de propiedades, en ella podremos definir algunos

El lienzo, es probablemente el panel más importante y representa el cuerpo de

Además, Incluidos en el espacio de trabajo, se encuentran el inspector de CSS, El

1.3 El lenguaje de las etiquetas HTML

“HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de

Y de hecho, la definición es excelente, sin embargo, simplificándola un poco. Es un

Al no ser un lenguaje de programación, no arrojara errores, si el lenguaje es ilegible,

1.4 Documentos HTML

Veremos algo como esto en nuestro “lienzo”

Todo documento html, debe iniciar y terminar con las etiquetas:

Además, un documento HTML cuenta con dos partes claramente definidas. El

El encabezado del documento se define utilizando las etiquetas

Y en él se incluye mucha información importante, como por ejemplo los documentos

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mi Primer sitio Web</title>

Igualmente importante, tenemos el cuerpo del documento es decir todo lo incluido

Este o no este formateado, cualquier texto que incluyamos en el cuerpo del

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mi primer sitio web</title>

Este es mi primer sitio web

Oprimiremos F12 y Dreamweaver nos preguntara si deseamos guardar el documento.

Y pronto veremos en nuestro navegador el resultado de nuestra primera edición

Bueno, Es hora de empezar. Cerramos el test.html y vamos a crear un nuevo

1.5 Editando Texto

El texto es probablemente una de las herramientas que mas utilizaremos en nuestros

En primer lugar, un párrafo se denota por

Para realizar un salto de línea, es decir, lo equivalente al “Enter” en un editor de textos

También es importante mencionar algún formato básico, como es el resaltar un texto

<b>este texto esta en negrita</b>

<i>este texto esta en itálica</i>

Si incluimos los ejemplos anteriores en nuestro documento, obtendremos algo como

Los atributos complementan la funcionalidad de una etiqueta, y algunos atributos no

Para alinear al centro

<p align=”center”>Esto es un parrafo</p>

Para alinear a la derecha

<p align=”right”>Esto es un parrafo</p>

Para alinear a la izquierda

<p align=”left”>Esto es un parrafo</p>

O bien para justificar el texto

<p align=”justify”>Esto es un parrafo</p>

Y podemos incluirlos dentro de nuestro index de la siguiente manera

NOTESE que se han creado dos párrafos independientes

Como habremos notado, Dreamweaver tiene la capacidad de autocompletar,

Si deseamos visualizar caracteres especiales en nuestro documento HTML debemos

Caracteres especiales básicos

&lt; < &gt; >

Caracteres especiales del HTML 2.0

Caracteres especiales del HTML 3.2

Otros caracteres especiales

< < > >