¿como crear tu web?

Saludos y Bienvenido/ Aquí encontrarás todos los pasos para saber cómo hacer una pagina web sin necesidad de tener ningún tipo de conocimiento en creación, diseño ni en nada de nada. Verás cómo hago una página web paso a paso y aprenderas a mejorarla. Si es tu primera vez en esta página web, te recomiendo visitar el apartado Consejos de Diseño donde encontrarás algunos consejos útiles. Después puedes comenzar a hacer el Curso Completo Paso a Paso. En menos tiempo del que imaginas, podrás crear páginas web mejores que ésta, pues seguro que tienes imaginación y buen gusto. Anímate a participar en el Foro CCTW, contándonos tus dudas de diseño, promoción, servidores, etc, o resolviendo las consultas de tus colegas. Cursos Para Aprender a Crear una Página Web El primero y más recomendable es el Curso Completo Paso a Paso. En este se explica todo todo todo, desde el principio hasta el final, aprendiendo por el camino todo lo necesario conforme se va usando. Se basa en un programa gratuito que te puedes descargar para seguir las lecciones. Este tutorial está aún ampliándose poco a poco, pues es muy largo pero es lo mejor que tenemos, pues verás paso a paso cómo hago una página web y podrás así aprender cada uno de los pasos con detalle. El Segundo, Curso Paso a Paso con Tablas es un curso completo y detallado paso a paso con el que conseguirás, sin necesidad de tener ningún conocimiento previo de ninguno de estos temas, crear y llegar a tener tu propia web en la red. Eso si, las tablas no son muy recomendables, es mejor usar capas para modelar la web, pero ahí queda eso por si te interesa (ya que la hice, no la voy a borrar no? je je). El tercer curso se llama Curso de Divs o Capas y trata de introduciros en el mundillo de las Capas. Es un modo más experto de hacer webs. Está a medias y además su contenido va a ser pasado al primer curso, el curso completo, pero mientras que no termino aquel dejaremos este. Por último, unas indicaciones sobre cómo utilizar algunas Herramientas de Dreamweaver que nos harán la vida más sencilla. Con las conclusiones que saquemos de las preguntas de foro, vuestras sugerencias etc, iremos ampliando con otros cursos y mejorando los que tengamos para hacerlos más claros. Así que esero tu participación en el Foro CCTW. Adelante, escoge por donde empezar y aprovecha que todo es gratuito! Crea Tu Propia Web: rápido y fácil. Hay cientos de diseños para elegir. Si ya cuentas con un diseño propio te ofrecemos el mejor servicio de hosting. Los sitios web son activados al instante. Tutorial Dreamweaver Parte 1: Conseguir Adobe Dreamweaver CS3. Bueno, llegado a este punto, supongo que has de tener instalado el Macromedia Dreamweaver en tu ordenador. Nosotros utilizaremos la version CS3 del programa en Español, por su puesto. Por eso te recomiendo que intentes conseguir esta version para poder seguir el tutorial. Tambien supongo que tienes un espacio web, si no lo tienes puedes acceder a uno gratuito, Aqui te dejo una lista de Servidores gratuitos muy buenos para alojar tu Web. Parte 2: Preparar nuestro entorno de trabajo. Ok, todo en orden. Una vez que te hayas descargado e instalado el Dreamweaver, necesitas crear las carpetas en las cuales vamos a meter todo el contenido de nuestra Web. Vamos a crear dos carpetas: Una carpeta que llamaremos "web" que es donde irá todo el contenido de nuestra web e iremos guardando nuestra página a medida que la vayamos creando. Al mismo tiempo dentro de esta carpeta "web" crearemos una nueva carpeta que llamaremos "imagenes". Esto que parece una tonteria, es MUY IMPORTANTE, ya que nos permitirá tener organizada nuestra web, y a la hora de subir la web será mucho más facil. curso dreamweaver Parte 3: Y... ¿Como lo vamos a hacer? Bueno, una vez hecho todo lo anterior, te voy a explicar por encima como vamos a hacer nuestra primera pagina web. Vamos a utilizar el sistema que utilizan la mayoria de webmasters. Vamos a trabajar con Etiquetas DIV.... no te asustes !!! Son muy sencillas de utilizar, te explico por encima: Una Etiqueta DIV es un pequeño rectangulo, donde podemos poner cosas dentro. Es decir, las DIV se utilizan para dividir la web en partes, y trabajar esas partes de forma individual. Mira, por ejemplo, la web que vamos a realizar mediante el tutorial, se compondra de 4 Etiquetas Div Es muy sencillo, a cada etiqueta le daremos un tamaño determinado. No te preocupes por eso, lo haremos mediante una Hoja de Estilo (más adelante veremos que es esto) que es un documento donde escribimos el tanto el tamaño que queremos darle a las etiquetas, como la posicion que queremos que tengan. Dentro de cada DIV podremos poner muchas cosas: Texto, Tablas, Listas, Imagenes, Links .... Una vez que ya te has familiarizado con estos conceptos, creo que estas preparado para comenzar con lo que realmente nos interesa "Crear nuestra primera WEB" LECCION 2 Parte 1: Empieza nuestro proyecto...Abrimos Dreamweaver Bueno, una vez que te haya quedado claro todo lo anterior, es hora comenzar con la creacion de nuestra pagina web. 1º.Vamos a ejecutar el Dreamweaver. Vamos a Archivo > Nuevo > Página en blanco > Html. Una vez dentro, puede que te asustes, ya que tiene demasiadas opciones y botones, pero descuida ya que la mayoria no los vamos a utilizar. Veras que la pantalla se divide en dos partes, la del "codigo html" y la de "diseño"donde veremos graficamente nuestra web. Parte 2: Poniendo el Titulo a la pagina Vete a la parte de Codigo y pon el Titulo que quieras a tu pagina web. Nosotros le pondremos como Titulo : ANIMALES Parte 3: Crear las Div , Importante. Bueno, una vez que hayas puesto el titulo, vamos a empezar con lo importante, vamos a crear la Estructura de nuestra web. -Cabecera (Parte Alta) -Menu (Ira a la izquierda) -Contenido (Parte Central) -Pie o "Footer" (Debajo) Ok, ya has visto el dibujo de como queremos que quede nuestra web. Ahora vamos a crear las Etiquetas Div correspondientes a cada parte de nuestra web (recuerda nuestras partes eran: Cabecera, Menu, Contenido y Footer). Lee esto de aqui y debajo y mira las Imagenes para que lo entiendas. Ahora, vamos a crear 4 Etiquetas div correspondientes a nuestras 4 partes de la web. Cada vez que creemos una Div, nos pedira un nombre. La primera etiqueta Div la llamaremos cabecera La segunda etiqueta Div la llamaremos menu La tercera etiqueta Div la llamaremos contenido La cuarta etiqueta Div la llamaremos footer Una vez que hayamos creado las 4 Etiquetas Div o capas (tambien se llaman capas). Nos debe aparecer en la parte de abajo algo como esto Parte 2: Dar forma y tamaño a las Div. Hoja de estilo Css Bueno, una vez que tengamos creadas nuestras 4 "partes" de la web, necesitaremos darle Forma y tamaño, además de colocarlas como queramos. Ok, y te preguntaras ... ¿Y como hago eso? Pues muy sencillo, Utilizaremos una Hoja de estilo Css. Y tu te preguntaras, ¿Qué es una Hoja de estilo Css? Pues una Hoja de estilo es un Documento donde escribimos las Dimensiones que queremos que tengas nuestras etiquetas, tambien escribimos la posicion que queramos darles (ponerlas a la derecha a la izquierda) El color de fondo ect. Te explico con un ejemplo: Tenemos nuestra etiqueta "Cabecera" ,dentro de nuestra Hoja de estilo escribiriamos por ejemplo esto Ok, todo entendido. Ahora vamos crear nuestra Hoja de estilo, pero antes vamos a ver que medidas vamos a darles a La cabecera, al menu, al contenido y al footer. Una vez que apliquemos la Hoja de Estilo a nuestra página nuestras etiquetas pasarán a tener esta forma: Antes de Aplicar la Hoja de Estilo Despues de Aplicar la Hoja de Estilo Nuestra web va a quedar tal y como aparece en la segunda Imagen. A continuacion te voy a explicar como hice la Hoja de estilos : Primero calculé las dimensiones de la pagina, y cree mi Hoja de Estilo , y se la apliqué. Si quieres puedes hacer como yo, haz un voceto primero . Aqui puedes Descargarte la Hoja de Estilos que vamos a utilizar para hacer la web. Guardala dentro de la carpeta "web" DESCARGAR Bueno,si ya te has descargado la hoja de estilo, fijate que hemos añadido varias propiedades : - Margin left : Distancia desde el lado izquierdo del explorador hasta la Etiqueta Div (solo se lo aplicamos "contenido" ya que si te fijas, está más a la derecha del resto) - Top : Distancia del tope del navegador hasta que comienza la Etiqueta Div Parte 3: Aplicar finalmente nuestra Hoja de Estilo Para aplicar la Hoja de Estilo , haz lo siguiente: Texto > Estilo Css > Adjuntar Hoja de Estilo... Una vez hecho esto, ya deberias tener la forma de tu web terminada. Parte 1: Creando nuestra Cabecera Web Bueno, una vez llegado a este punto debes tener la estructura de la web bien formada: Ojo, si te ves que te ha resultado facil, puedes probar haciendo diferentes diseños, añadiendo mas Etiquetas Div a la pagina, o colocandolas de diferentes formas. Eso ya te lo dejo a ti. De momento vamos a seguir con nuestro ejemplo. Vamos a crear nuestra Cabecera Web, nosotros utilizaremos una de las caebeceras que tenemos a disposicion es nuestra seccion de cabeceras web, utilizaremos concretamente esta. Colocate dentro de la DIV Cabecera, y Escribe lo que quieras, puedes tambien utilizar una imagen , como hemos hecho nosotros, en ese caso deberas ir a Insertar > Imagen. Recuerda tener la imagen que quieras utilizar dentro de la carpeta "imagenes" que creamos al principio. Parte 2: Creando nuestro Menu y Nuestro Contenido Para crear nuestro Menu, nos basaremos en la utilizacion de una Tabla. Es muy sencillo, colocate dentro de la Etiqueta Div que creamos con el nombre "menu". Una vez dentro, vete a Insertar > Tablas. Elige una tabla de 1 sola columna y 10 filas por ejemplo. Si te fijas la tabla esta entre las etiquetas (indica el final). Una ves contruida la Tabla, puedes darle color de Fondo a las celdas, Y escribir cosas en ella. A nosotros nos ha quedado de esta forma: Ver Ejemplo Como hemos dado color negro al fondo de la tabla, Hemos añadido una propiedad mas a la Hoja de Estilo. Hemos puesto que el fondo de la Div "menu" sea de color negro, lo hemos hecho poniendo esto : Ahora que sabes como cambiar el color de fondo de las etiquetas, prueba a cambiar el fondo de las otras como la del contenido, o el propio footer. No te preocupes, cada vez que modificas algo en la hoja de estilo, automaticamente se ve reflejado en la pagina que estamos haciendo. Nosotros hemos querido tambien cambiar el fondo de las otras etiquetas Div, y ademas añadir algunos contenidos, como imagenes y tal. MIRAR EJEMPLO Descargar EJEMPLO y HOJA DE ESTILO COMENTENNNN