El post que buscas se encuentra eliminado, pero este también te puede interesar

[Tutorial] Creando un sitio web desde 0 parte 1

[Tutorial] Creando un sitio web desde 0 parte 1
javawebdreamweaverhtmlcssComocrear2.0

estilo

[Tutorial] Creando un sitio web desde 0 parte 1


Hola amigos de T! en el siguiente tutorial les mostrare a crear una web partiendo desde 0 sin ningún conocimiento, será una web bastante básica, puesto que la mayoría de los usuarios no posen conocimientos programación HTML, PHP, CSS, JAVASCRIP, etc.

Nota: Clic en las imagenes para verlas de tamaño completo.

tutorial

scrip


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.

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.

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, pesuto que el CS5 es un poco trabajoso con las opciones que tiene para los que no conosen. 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:

http://tl.gd/c28dq6

crear tu web


Sea que hayamos descargado el trial, o bien hayamos obtenido alguna versión menos “legal” de Taringa. 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

misa2pac22


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”

[Tutorial] Creando un sitio web desde 0 parte 1


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”

java


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.

web


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”

Cuando se nos pregunte como nos conectaremos con nuestro servidor remoto, seleccionaremos “Ninguno” y hacemos clic en Siguiente

dreamweaver


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

html


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”

css


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.

Como


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

crear


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

2.0


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.

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.

estilo


Veremos algo como esto en nuestro “lienzo”

tutorial


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

<html> 

</html>


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>

<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

scrip


Si bien es un documento html bien estructurado, resulta muy simple, y claro no vamos a colgarlo en la red.

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”

crear tu web


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>


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

misa2pac22


Si oprimimos F12 y guardamos los cambios, veremos algo como esto en el navegador:

[Tutorial] Creando un sitio web desde 0 parte 1


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

<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

java


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

web


Existen ciertos caracteres que no pueden ser incluidos de manera directa dentro del código fuente.

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.

dreamweaver


Caracteres especiales del HTML 2.0

htmlcss


Caracteres especiales del HTML 3.2

Como


Otros caracteres especiales

crear


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.

2.0


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.

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 Taringa a modo de ejemplo.

estilo


Que se verá en el navegador así

tutorial


Con esta sintaxis hemos creado un enlace a Taringa 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://www.taringa.net/misa2pac2 target="_blank"><i>Misa2pac2</i></a>


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

scrip


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”

crear tu web


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

misa2pac22


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.

[Tutorial] Creando un sitio web desde 0 parte 1


En nuestro navegador veríamos algo como esto:

java


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”

web


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

<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:

dreamweaver


Y en el navegador:

html


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 permite redimensionar imágenes de manera grafica. Así mismo añadirlas puede ser tan sencillo como hacer un Crtl + V

css


Edición de imágenes utilizando el “Modo Diseño”

Como


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:

img {border-style: none}

De modo que ninguna imagen a la que agreguemos un enlace, tendrá borde.

<a href=http://www.taringa.net/misa2pac2 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=””

<p class="titulos" align="center">Este es mi primer <b>sitio web</b></p>

Dejando nuestro código fuente de la siguiente manera

crear


Y mostrando como resultado final en el navegador:

2.0


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 haci que borramos nuestro viejo index y nuestro viejo css, y crearemos nuevos.


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

estilo


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.

tutorial


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.

Y además, con su selector de color, se hace mucho más fácil el trabajo de diseño.

scrip


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í

crear tu web


Nuestra hoja de estilos

@charset "utf-8";
/* CSS Document */
#head {border: 3px solid #0000FF}
#menu {border: 3px solid #FF6600}
#contenido {border: 3px solid #FF0000}
#publicidad {border: 3px solid #3399FF}
#creditos {border: 3px solid #FFFF00}


Y podemos visualizarlo en el navegador, aunque claro, aun no se parece demasiado a la estructura que buscamos.

misa2pac22


Podemos agregar el fondo a nuestro sitio, Yo he decidido sea negro.

[Tutorial] Creando un sitio web desde 0 parte 1


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:

<!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>Documento sin t&iacute;tulo</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all" />
</head>
<body>

<div id="global">
    <div id="head">Div. 1 Header</div>
    <div id="menu">Div. 2 Menu</div>
    <div id="contenido">Div. 3 Contenido</div>
    <div id="publicidad">Div. 4 Contenido</div>
    <div id="creditos">Div. 5 Creditos</div>
</div>

</body>
</html>


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.

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:

java


Y nuestra vista previa en el navegador revela un resultado que cada vez parece más una página web.

web


Ahora que hemos terminado con nuestro Div global, vamos a reubicar algunos elementos. Me refiero al Div 4. Vamos a ubicarlo encima del Div3.

dreamweaver


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 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 {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í:

html
css


Ahora, podemos visualizar nuestro sitio en el navegador.

Como


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>


Dicha configuración, daría como resultado algo como esto:

crear


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;
    }


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.

#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)

2.0


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)

#menu {width:150px; 
    float:left; 
    padding:3px; 
    height:auto; 
    margin:5px; 
    font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif; 
    }
#menu ul, li {list-style-type: none;
    }
#menu ul {margin: 0; 
    padding: 0; 
    }
#menu li{border-bottom:1px solid #000000;
    }
#menu a {text-decoration:none;
    color:#333333;
    background:#FFFFFF;
    display:block;
    padding:3px 6px;
    width:138px;
    }
#menu a:hover {background:#CCCCCC;
}


Y si presionamos F12, podremos ver en nuestro navegador un bonito menú.

estilo


2.3 Header

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:

tutorial


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 les haya olvidado como insertar imágenes.

scrip

crear tu web


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.

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

misa2pac22


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í:

[Tutorial] Creando un sitio web desde 0 parte 1


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á:

java


Que visto en el navegador quedaría más o menos así:

web


¿A qué se van a 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 photoshop para crear estas imágenes, aunque claro puedes utilizar cualquier editor de imágenes.

Así pues, llamaremos a nuestras imágenes:

curva-superior.png

dreamweaver

fondopubli.png

html

curva-inferior.png

css


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


#publicidad {
    width:150px;
    float:right;
    padding:3px;
    height:auto;
    margin:5px
    }
#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:

Como


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.

crear


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.

2.0


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.

estilo


Que en el navegador, luciría asi:

tutorial


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

scrip


Vamos, a finalmente, definir las partes editables de nuestro sitio web. Esto lo haremos en modo diseño.

crear tu web


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”

misa2pac22


Cuando nos solicite un nombre para la región, podemos llamarle “contenido” por ejemplo. Y ahora en nuestro condigo fuente, veremos algo como esto:

[Tutorial] Creando un sitio web desde 0 parte 1


Para darle elementos editables a nuestro Head, vamos a dejar nuestro title entre:

java


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

web


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:

dreamweaver


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.

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í:

html


En principio, Editaremos nuestro <title>, cambiaremos donde dice

css


Por el título de la pagina en cuestión, en este caso, siguiendo con mi esquema

Como


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

crear


Repetiremos este procedimiento para cada una de las secciones de nuestro sitio, de modo que tendremos cinco archivos .html en nuestro directorio raíz.

2.0


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”

estilo


Finalmente, con una ruta que dar a nuestros enlaces, empezaremos a definirlos en nuestro menú.

tutorial


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

scrip


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

crear tu web


Como podemos observar, todo cambio que apliquemos a nuestra plantilla será visible en los archivos “hijos” de la misma.

Bueno amigos hasta aqui la primera parte del tutorial, en la segunda parte crearemos una galeria, un fromulario de contacto y publicaremos nuestro website.

misa2pac22


[Tutorial] Creando un sitio web desde 0 parte 1

javaweb

Comentarios Destacados

31 comentarios - [Tutorial] Creando un sitio web desde 0 parte 1

leitoxclub -7
Estaria bueno que juntes las 2 partes, veo un futuro TOP! mañana van puntines, a fav!
MenPack +3
me gusto, a fav y te debo puntos
Bump_
TOP! +10!
monomax +1
agregado a favoritos y mañana lo leo, es muy tarde y tengo qeu estudiar :/
PredatorCJ +1
+10 q ya te puse, ahora seguire trabajando ya q creaste de nuevo el post xd
Cecylik +1
Bump_ dijo:TOP! +10!

No te dejo +10 por que me quedé sin puntos pero te hago la reco por todos lados
SaanteeCba +1
+10 Te esforzaste mucho , te los mereces y ayudas a aquellos que necesitan. RECOMENDADO
sweety_ +1
Te felicito por el trabajo que te tomaste, mañana te dejo puntitos porque hoy ya no tengo.
Sale reco y a fav!
sweety_ +2
Volvì! +10.
Gracias!!!
marton_p +1
te dejo mis 10 por tu terrible aporte!
dayeste +1
+10 algo asi estaba buscando se agradece!!!
clank201 +1
+10 me ayudo mucho, y a fav, GRACIAS!!
tristajuegos
Exelente Amigo Me A Ayudado Mucho Tu Post! Gracias De Verdad.... Cuando Tenga Puntos Te Dejo!

Mereces Que Te Siga
juanpizetti +1
QUE LABURO MAN FELICIDADES ESTABA BUSCANDO INFO PARA HACER UNA PAGINA WEB PARA UN LOCAL DE INFORMATICA Q TENGO PENSADO ABRIR!!!
victorrolando
Hola descargue una plantilla y estuve editandola pero cada vez que hago el paso de que al crear una plantilla para los submenus me sale en blanco
sesio100998
Lo estoy viendo y Probando!!!

GRACIAS!

+10
Jhanita48
Muchas gracias, rolo tu post a mis compañeros de clase para que les sirva de apoyo: +10
javijj +1
te dejo un par de puntines
RenacuajC +1
gran ayuda tenia algunas dudas esto ayuda
edtm00 +3
Exelente Post A esto Le LLamo Inteligencia Colectivaa..
xfanaticox
ayudaaa! me tira error en la línea:
Nifty(&quot;div#creditos&quot;,&quot;big&quot;; (la del script)
gracias!
CyberFrank -1
disculpa que tengo que colocar en el archivo index??
misa2pac22
lee el tutorial
chino-df -1
Muy buen aporte, también les recomiendo este curso de html http://www.grupocodesi.com/cursos/curso-de-html.html yo lo tome y me sirvio mucho y cuando vi este tutorial la verdad logre entender prácticamente todo. También les puedo recomendar este curso de css http://www.grupocodesi.com/cursos/curso-de-css.html en el cual me enseñarón a realizar diseños responsivos a cualquier dispositivo.