iTO07

* Antes que nada quiero aclarar que esta obra ("Tutorial hacer Pagina Web desde cero" esta realizada completamente por mi, no robe imágenes o ideas de otros autores. Hola, 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 (Dreamweaver) *Hosting (000webhost) *Dominio de paga o gratis (dot.tk ) Si no sabes mucho de diseño y/o programacion 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. Ejemplos: En fin hay muchas formas de "maquetar" elige una Paso 2.- Ahora viene la parte creativa, con cualquier programa de edición de imágenes haz tu logo, o usa cooltext. puedes hacer como imagen tambien tus enlaces Una vez con tus imagenes preparadas ve a dreamweaver y elije nuevo documento HTML. NOTA: IMPORTANTE GUARDAR TODAS LAS IMAGENES QUE OCUPES EN UNA SOLA CARPETA DEDICADA SOLO PARA LA WEB... Lo primero a modificar es el titulo de tu web lo que va en la "barra de titulo" de tu navegador. Podemos ocultar el codigo por si no sabemos mucho de codigo htm, dando click en el tercer boton (Design / Diseño) de izq a der. en la misma fila donde esta title o titulo. 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... -Ve al menú insert / insertar >> Table / Tabla o presiona CTRL + ALT + T en este caso maquetare como el primer ejemplo Titulo arriba, Menu a la izq y contenido a la derecha. Asi que en total son dos columnas y dos filas podemos hacerlo a un standar de 800 px de ancho, ponemos el borde y el espacio entre celdas a 0 Nos da como resultado una tabla con cuatro celdas, dos arriba y dos abajo, pero lo que queremos es solo una arriba y dos abajo, para eso solo selecionamos las dos celdas de arriba y le damos clic derecho >> Tabla >> Combinar celdas. Bien ahora es el paso de agregar las imagenes del titulo y del menu. con el cursor en la celda de titulo, puedes solo arrastrar la imagen o darle al menu insertar >> Imagen con un poco de paciencia y tiempo habrás terminado de insertar las imagenes. pero... se ve raro no? Bueno pues falta darle un color de fondo, alinear bien las tablas y agregar el contenido. para modificar el fondo solo ve al menu >> modificar >> Propiedades de pagina o presiona CTRL + J Con estas opciones ya se ve bonita, pero aun no funciona como pagina web. habra que poner enlaces. Esta pagina tendrá el inicio, una galeria en el enlace 2, una pagina de informacion en el enlace 3, en el 4 un contacto y el ultimo un enlace a taringa. Bien para lograr esto da click en una imagen escribe el enlace en la panel de opciones de DW es importante que esta pagina que estamos creando la guardemos con el nombre de index.html por que asi el servidor reconoce esta como la pagina principal al entrar al dominio. Ah y tambien por estetica, hay que poner a 0 el borde. A los siguientes enlaces les ponemos como se van a llamar las siguientes paginas: A los enlaces externos habrá que ponerlos completos, es decir, anteponiendo http:// seguido del dominio, en este caso taringa.net 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 ? xD Para esto abrimos una cuenta en 000webhost.com (es facil, si tienen dudas pregunten.) y creamos nuestro subdominio. una vez en el panel de control de tu nuevo dominio abre el FILE MANAGER y sube los archivos de tu web. Ahora si, con los archivos ya en el hosting temos una pagina web completa, pero en un subdominio del tipo miweb.site88.com o algo asi.... http://tutorial.st54.tk/index.html si quieres un dominio .tk gratis y sin publicidad aqui una breve explicación. En el panel de control de tu nuevo dominio hay un boton que se llama Parked domain. ahi agrega en dominio que haz de registrar posteriormente en dot.tk, o mejor primero registralo en dot.tk para asegurarse de que alguien mas no lo ha tomado. ahora en el registro de tu dominio .tk escribe en nombre de tu dominio nuevo >siguiente> luego dale en GRATIS >siguiente> luego da clic en el botón usar DSN para este dominio y en usar mis propios DNS Ahora si puedes ver tu pagina web en linea desde tu propio dominio .TK Bueno, fue muy sintetizado, pero la idea es que aprendan experimentando y jugando con las diversas opciones que les da un programa de edición web o gráfico. espero le entiendan, si no entienden muy bien un paso o detectan horrores :S .... háganme lo saber, no bardear.

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.