Bueno, este minitutorial esta orientado a toda la gente nueva en esto de los Sitios Web y el HTML, este tutorial se tratara de explicar una buena manera para empezar tu Sitio web.

Lo que devemos tener es tener un espacio web gratuito, Pueden ser www.Ayudauni.net , www.miarroba.com o el que sea, ambos son buenos servicios, sino si tiene dinero pueden comprar un espacio Profecional, pero para esta practica es recomendable un espacio gratuito.

Si no saben como crear uno, pasense a este enlace Click Aqui ahi podran obtener la forma de conseguir un espacio gratuito.

Una vez hecho esto, procedemos a descargarnos el software de edicion de paginas web, el Mas recomendable y el que usaremos en esta practica sera el Macromedia Dreamweaver , este a mi parecer es muy bueno .

Ya una Vez instalado y abierto procederemos a ver un menu como este:


Nota: Si es la Primera Vez que habren El Dreamweaver Seleccionen la Opcion Diseñador

despues Veremos varias opciones de paginas, Eligiremos la opcion de PHP:


al seleccionarlo, veremos un documento en blanco tipo word, dentro del documento en blanco sera donde trabajaremos en nuestro sitio web (:,

Para este Manual crearemos una pequeña web con un menu lateral , para logar esto aremos lo siguiente, Primero Crearemos una Tabla de 3 Filas y una Columna, para lograrlo, nos iremos a las opciones superiores y eligiremos la opcion Insertar > Tabla

de ahi le daremos los parametros que necesitamos, que son 3x1 o sea 3 Filas por una Columna y seleccionamos Aceptar




lo siguiente que aremos sera cortar la tabla, (Si has manejado el Word creo esto no te sera mucho problema), daremos click Derecho en la segunda Fila ( la de enmedio), y seleccionaremos Tabla >> Dividir Celda y las cortaremos en dos Columnas.

Y nos Quedara algo asi:
una vez hecho esto, procederemos a darle un margen al lo que sera nuestra Celda de Contenido y a nuestra Celda de menu, arrastraremos el margen que se ecuentra enmedio de la tabla ( la pestaña que aparecio a la mitad de nuestra tabla), y la moveremos a nuestra Izquierda, Para empezar podremos ponerlo a 20% para la izquierda y 80% para la derecha y nos kedara algo asi:

una ves hecho esto, lo que haremos sera agrandar nuestra tabla , para hacerlo, solo basta con dejar precionado el click normal sobre la linea inferior de la celda central y moverla hacia abajo:

una vez hecho esto ya estaremos viendo como nos esta quedando el esqueleto de nuestro sitio WEB, de Aqui a ti se te puede ocurrir lo que quieras y hacer modificaciones a tu gusto .

para realizar nuestra web completamente, les pondremos Nombres ( mentalmente hablando) a cada parte de nuestra estructura.

Para la Parte Superior la llamaremos Header ( O Encabezado) , Para la Parte inferior o la parte del fondo de nuestro sitio lo llamaremos Footer ( o Pie de Pagina), y al cuadrado de la izquierda lo llamaremos Menu del Sitio y al recuadro grande que se encuentra a su Derecha lo llamaremos Celda de Contenido:

ejemplo:

una vez hecho esto, ya sabremos como se llama cada parte de nuestro sitio, ahora solo es cuestion de pensar la mejor manera de presentar nuestro contenido .

Para ello, podremos insertar Colores de Fondo para Cada Tabla y ademas Texto en cada Celda, las propiedades de cada objeto aparecen en el fondo de nuestro programa y cambian deacuerdo al objeto que estemos Seleccionando

Ademas en ese misma locacion, se encuentran sus propiedades, como:
*.- Color de Texto,
*.- Fondo de la Tabla
*.- Grozor de la tabla
*.- Posicion del contenido ( si en medio de todo, abajo, arriba de la celda etc.)

es recomendable que en las tablas donde insertaremos textos, estas esten configuradas de las siguiente manera:



esto nos ayudara que el texto este siempre a la izquierda y en la parte superior de esta Celda, si deseas hacer mas cambios en las otras tablas, haslos , pero es recomendables que solo lo hagas en celdas donde planeas agregar contenido o texto (:.

Podemos jugar un poco con cada tabla, y les podemos poner color de fondo a cada parte de el, hasta tambien el color de los bordes .

jugando un poco con nuestro sitio me quedo algo asi:


yo se que no es muy bueno, pero esta muy bien para ir aprendiendo

al finalizar eligiremos la opcion de guardar y la guardaremos como index.html.

Para verlo en funcionamiento, entra aqui:
http://sitio-master.uni.cc/manuales/index.html

como verna esto es un sitio muy sencillo, en el siguiente tutorial les explicare la forma de hacer que nuestro mismo diseño se repita en todas las paginas sin tener que estar copiando y pegando el mismo diseño

Manual Creado por Rodrigo01 Administrador de www.Ayudauni.net