Pues ya había realizado este tutorial hace mas de 4 años, pero el paso del tiempo afecto las imágenes, esta vez lo re publico con imágenes actualizadas y un poco mas detallado.
Para empezar necesitaremos tener una idea de lo que queremos lograr con nuestra pagina web, vender algo, informar, divertir, nada.
Después de la idea vienen los requisitos:
Está por demás decir que debes tener imaginación para poder realizar tus logos, banners etc. a parte de saber manejar por lo menos un programa de los mencionados.
*Programa de edición o diseño gráfico (Paint, Photoshop
, Corel Draw, etc.).
*Programa para editar texto plano o editor html (Bloc de notas, Dreamweaver)
*Hosting de paga o gratis (000webhost)
*Dominio de paga o gratis (dot.tk)
Si no sabes mucho de diseño y/o programación web te recomiendo usar paginas como http://cooltext.com/ para hacer tus logos y usar dreamweaver como editor web.
Paso 1.-
Necesitas saber como sera "maquetada" tu web. Esta es la forma en como serán colocados los elementos básicos que componen un sitio.
Logo o encabezado, menú o enlaces, contenido y pie de pagina.
Ejemplos:
En fin hay muchas formas de "maquetar" elige una.
Para efectos de este tutorial yo elegiré la forma del centro y mi "idea" será hacer un sitio informativo. Información de mis servicios como fotógrafo.
Sobre una hoja de papel dibuja a grandes rasgos lo que quieres en tu sitio,
- coloca tu logo (mas tarde lo crearas en la pc),
- define cuantas paginas habrá dentro de tu sitio, lo ideal es unas 3 o 4 para empezar.
- el contenido que mostrarás en cada una de las paginas de tu sitio (manteniendo siempre el logo, menú y pie de pagina).
- Un pie de pagina, usualmente se coloca ahí los enlaces a redes sociales, información de copyright, etc.
Paso 2.-
Ahora viene la parte creativa, con cualquier programa de edición de imágenes haz tu logo, o usa cooltext.
En este caso tengo un mínimo conocimiento en Photoshop y me hice algo así:
puedes hacer como imagen también tus enlaces, aunque de esta forma tardará unos segundos mas en cargar tu pagina web.
separa cada botón:
(Para efectos de este ejemplo se hará con imágenes, los enlaces pueden ser de texto con "css" que es para darle colores y efectos a los enlaces.)
NOTA: IMPORTANTE GUARDAR TODAS LAS IMÁGENES QUE OCUPES EN UNA SOLA CARPETA DEDICADA SOLO PARA LA WEB...
Paso 3.-
Adentrándonos en la composición.
Una vez con tus imágenes preparadas ve a Dreamweaver y elije nuevo documento HTML.
Lo primero a modificar es el titulo de tu web lo que va en la "barra de titulo" de tu navegador.
Por defecto estamos en la pestaña "diseño" de Dreamweaver, podemos clicar en dividir para ir observando que cambios hacemos y estudiar un poco el HTML
Ahora a hacer la maquetacion... si no sabes mucho lo mas facil es hacerlo con tablas si como las que alguna vez haz hecho en la escuela en microsoft word... aunque... lo ideal en estos tiempos es usar DIVS y estilos CSS, después aprenderemos eso.
-Ve al menú insert / insertar >> Table / Tabla o presiona CTRL + ALT + T
Maquetare como el ejemplo del centro, anteriormente mostrado. Encabezado o titulo arriba, Menú bajo el logo o encabezado y contenido abajo del menú, con el pie de pagina bajo el contenido, la forma mas fácil, porque todo va a lo ancho de la pagina.
Me voy a guiar por el ancho de mi encabezado, que mide 912 px.
Asi que en total es una columna y cuatro filas, el ancho será de 912 px, ponemos el borde y el espacio y relleno entre celdas a 0
Nos da como resultado una tabla con cuatro celdas con el ancho que hemos elegido, una debajo de la otra.
Paso 4.-
Bien ahora es el paso de agregar las imágenes del logo y del menú.
Antes de hacer esto es indispensable guardar nuestro archivo html en la misma carpeta que las imágenes, para que tome la ruta correcta de las imágenes para cuando se publique mas adelante.
con el cursor en la celda que corresponde al logo, puedes solo arrastrar la imagen o darle al menú insertar >> Imagen o Presionar Ctrl+Alt+I
Al insertar la imagen te pedirá un texto alternativo (se mostrará al dejar el puntero encima o en caso que por alguna razón no pueda mostrar la imagen) en el caso del logo puedes poner el titulo de tu web y en el menú el nombre de la pagina a la que lleva en el caso del botón servicios el texto alternativo seria "servicios". Dejar en blanco el resto.
con un poco de paciencia y tiempo habrás terminado de insertar las imágenes.
Bueno pues falta darle un color de fondo, alinear bien la tabla, agregar el contenido y el pie de pagina.
Para alinear la tablas al centro selecciona toda la tabla y en las propiedades (el panel inferior)
Seleccionas Alinear >> Centro
para modificar el fondo solo ve al menú >> modificar >> Propiedades de pagina o presiona CTRL + J y elegir el color que mejor combine o te agrade.
Paso 5.-
Con estas opciones ya se ve bonita, pero aun no funciona como pagina web. habrá que poner enlaces a las diferentes paginas que hemos establecido con el menú.
Bien para lograr esto da click en una de las imágenes del menú escribe el nombre de la pagina con terminación ".html" en la casilla "Vinculo" en el panel de propiedades de la imagen
es importante que esta pagina que estamos creando la guardemos con el nombre de index.html aunque el botón diga servicios, por que así el servidor reconoce ésta como la pagina principal al entrar al sitio.
A los siguientes enlaces les ponemos como se van a llamar las siguientes paginas que crearemos mas adelante:
A los enlaces externos habrá que ponerlos completos, es decir, anteponiendo http:// seguido del dominio, como por ejemplo http://taringa.net
Paso 6.-
Antes de agregar un contenido, coloca el pie de pagina y guarda los cambios.
Paso 7.-
Perfecto!
Ahora tenemos lo que vendría siendo la "plantilla de nuestro sitio.
Copia tu archivo index.html tantas veces como paginas tenga tu sitio y nombralos como has puesto los vínculos.
Paso 8.-
Edita cada archivo html en dreamweaver y agrega el contenido, texto imagenes, etc... y listo! Tienes una web bonita y funcional.
pero... solo la puedo ver en mi computadora... como hago para recomendarla y que toda la comunidad taringuera la vea y diga que es spam y/o crap ? xD
Lo veremos en la segunda parte de este Tutorial. Saludos !
Esta guia/tutorial esta sintetizada, la idea es que tu aprendas experimentando con las diversas opciones que tienen los distintos programas.
Para empezar necesitaremos tener una idea de lo que queremos lograr con nuestra pagina web, vender algo, informar, divertir, nada.
Después de la idea vienen los requisitos:
Está por demás decir que debes tener imaginación para poder realizar tus logos, banners etc. a parte de saber manejar por lo menos un programa de los mencionados.
*Programa de edición o diseño gráfico (Paint, Photoshop
, Corel Draw, etc.).
*Programa para editar texto plano o editor html (Bloc de notas, Dreamweaver
)
*Hosting de paga o gratis (000webhost
)
*Dominio de paga o gratis (dot.tk
)
Si no sabes mucho de diseño y/o programación web te recomiendo usar paginas como http://cooltext.com/ para hacer tus logos y usar dreamweaver como editor web.
Paso 1.-
Necesitas saber como sera "maquetada" tu web. Esta es la forma en como serán colocados los elementos básicos que componen un sitio.
Logo o encabezado, menú o enlaces, contenido y pie de pagina.
Ejemplos:
En fin hay muchas formas de "maquetar" elige una.
Para efectos de este tutorial yo elegiré la forma del centro y mi "idea" será hacer un sitio informativo. Información de mis servicios como fotógrafo.
Sobre una hoja de papel dibuja a grandes rasgos lo que quieres en tu sitio,
- coloca tu logo (mas tarde lo crearas en la pc),
- define cuantas paginas habrá dentro de tu sitio, lo ideal es unas 3 o 4 para empezar.
- el contenido que mostrarás en cada una de las paginas de tu sitio (manteniendo siempre el logo, menú y pie de pagina).
- Un pie de pagina, usualmente se coloca ahí los enlaces a redes sociales, información de copyright, etc.
Paso 2.-
Ahora viene la parte creativa, con cualquier programa de edición de imágenes haz tu logo, o usa cooltext.
En este caso tengo un mínimo conocimiento en Photoshop y me hice algo así:
puedes hacer como imagen también tus enlaces, aunque de esta forma tardará unos segundos mas en cargar tu pagina web.
separa cada botón:
(Para efectos de este ejemplo se hará con imágenes, los enlaces pueden ser de texto con "css" que es para darle colores y efectos a los enlaces.)
NOTA: IMPORTANTE GUARDAR TODAS LAS IMÁGENES QUE OCUPES EN UNA SOLA CARPETA DEDICADA SOLO PARA LA WEB...
Paso 3.-
Adentrándonos en la composición.
Una vez con tus imágenes preparadas ve a Dreamweaver y elije nuevo documento HTML.
Lo primero a modificar es el titulo de tu web lo que va en la "barra de titulo" de tu navegador.
Por defecto estamos en la pestaña "diseño" de Dreamweaver, podemos clicar en dividir para ir observando que cambios hacemos y estudiar un poco el HTML
Ahora a hacer la maquetacion... si no sabes mucho lo mas facil es hacerlo con tablas si como las que alguna vez haz hecho en la escuela en microsoft word... aunque... lo ideal en estos tiempos es usar DIVS y estilos CSS, después aprenderemos eso.
-Ve al menú insert / insertar >> Table / Tabla o presiona CTRL + ALT + T
Maquetare como el ejemplo del centro, anteriormente mostrado. Encabezado o titulo arriba, Menú bajo el logo o encabezado y contenido abajo del menú, con el pie de pagina bajo el contenido, la forma mas fácil, porque todo va a lo ancho de la pagina.
Me voy a guiar por el ancho de mi encabezado, que mide 912 px.
Asi que en total es una columna y cuatro filas, el ancho será de 912 px, ponemos el borde y el espacio y relleno entre celdas a 0
Nos da como resultado una tabla con cuatro celdas con el ancho que hemos elegido, una debajo de la otra.
Paso 4.-
Bien ahora es el paso de agregar las imágenes del logo y del menú.
Antes de hacer esto es indispensable guardar nuestro archivo html en la misma carpeta que las imágenes, para que tome la ruta correcta de las imágenes para cuando se publique mas adelante.
con el cursor en la celda que corresponde al logo, puedes solo arrastrar la imagen o darle al menú insertar >> Imagen o Presionar Ctrl+Alt+I
Al insertar la imagen te pedirá un texto alternativo (se mostrará al dejar el puntero encima o en caso que por alguna razón no pueda mostrar la imagen) en el caso del logo puedes poner el titulo de tu web y en el menú el nombre de la pagina a la que lleva en el caso del botón servicios el texto alternativo seria "servicios". Dejar en blanco el resto.
con un poco de paciencia y tiempo habrás terminado de insertar las imágenes.
Bueno pues falta darle un color de fondo, alinear bien la tabla, agregar el contenido y el pie de pagina.
Para alinear la tablas al centro selecciona toda la tabla y en las propiedades (el panel inferior)
Seleccionas Alinear >> Centro
para modificar el fondo solo ve al menú >> modificar >> Propiedades de pagina o presiona CTRL + J y elegir el color que mejor combine o te agrade.
Paso 5.-
Con estas opciones ya se ve bonita, pero aun no funciona como pagina web. habrá que poner enlaces a las diferentes paginas que hemos establecido con el menú.
Bien para lograr esto da click en una de las imágenes del menú escribe el nombre de la pagina con terminación ".html" en la casilla "Vinculo" en el panel de propiedades de la imagen
es importante que esta pagina que estamos creando la guardemos con el nombre de index.html aunque el botón diga servicios, por que así el servidor reconoce ésta como la pagina principal al entrar al sitio.
A los siguientes enlaces les ponemos como se van a llamar las siguientes paginas que crearemos mas adelante:
A los enlaces externos habrá que ponerlos completos, es decir, anteponiendo http:// seguido del dominio, como por ejemplo http://taringa.net
Paso 6.-
Antes de agregar un contenido, coloca el pie de pagina y guarda los cambios.
Paso 7.-
Perfecto!
Ahora tenemos lo que vendría siendo la "plantilla de nuestro sitio.
Copia tu archivo index.html tantas veces como paginas tenga tu sitio y nombralos como has puesto los vínculos.
Paso 8.-
Edita cada archivo html en dreamweaver y agrega el contenido, texto imagenes, etc... y listo! Tienes una web bonita y funcional.
pero... solo la puedo ver en mi computadora... como hago para recomendarla y que toda la comunidad taringuera la vea y diga que es spam y/o crap ? xD
Lo veremos en la segunda parte de este Tutorial. Saludos !
Esta guia/tutorial esta sintetizada, la idea es que tu aprendas experimentando con las diversas opciones que tienen los distintos programas.