Tanaceto y la Información

Siempre es preferible un final catastrófico a una catastrofe sin fin.

Hacer una página básica HTML con Dreamweaver CS3 (I): Crear página nueva, tablas y enlaces

Posted by tanaceto en octubre 8, 2007

Objetivo: Crear una página html simple sin marcos con imágenes, texto html y enlaces.

* Esta explicación vale para Dreamweaver CS3 de OS X y de XP.

Hoy vamos a aprender cómo se hace una página simple en html. Hemos hablado en otras ocasiones de los servidores web Apache, y lo fácil que resulta tener nuestro propio servidor. Como las conexiones caseras suelen ser bastante lentas (sobretodo en la subida), la ligereza de la página es una aliada para nuestros objetivos.

Para la explicación usaremos el Adobe Dreamweaver CS3.

1. Lo primero de todo es abrir un nuevo documento HTML. Usaremos el diseño visual (hay otras dos opciones de visualización: como código o una mezcla). Aquí, aunque no vamos a trabajar con lenguaje html conviente ir mirando como se articula. Es un lenguaje bastante sencillo y no tardaremos en encontrarle su lógica.

kk1.png

El elemento clave para trabajar con el dreamweaver es este:

dd1.png

Permite configurar los elementos que tengamos seleccionados en la página (ya sea texto, una imagen, una tabla, etc).

– Al nuevo documento le asignamos un título (el nombre por el cual será reconocido por la web, y que saldrá siempre) y acudimos a “propiedades de página”. Ahí tenemos las opciones de personalización; lo más interesante es determinar una tipografía adecuada, adecuar los márgenes a nuestras necesidades y determinar el comportamiento de los links. (modify/page properties).

2. A continuación determinaremos la estructura de la web e insertaremos sus elementos. Para ello utilizaremos los denominados “tablas” (insert/table). En nuestro caso vamos a hacer una página con un título y un subtítulo en la parte superior, una imagen en la parte central izquierda, una área de texto en la parte central derecha y un pequeño texto con las características de la página e información de contacto.

dream1.png

– Primero creamos una tabla con dos filas y una sola columna. Debemos comprobar que el grosor de la línea exterior de la tabla es igual a 0. Si no saldrá un marco (entendido como línea) alrededor de la tabla. En nuestro caso también alinearemos la página con el centro, para que se mantenga centrada aunque se usen distintos tamaños en el navegador web (aling/center). En el hueco superior escribiremos el título de nuestra web, y en el inferior el subtítulo. Para finalizar ajustaremos el tamaño de la tabla exactamente a la extensión del subtítulo (en este caso no nos interesa hacer dos renglones de subtítulo).

– Nos situamos debajo de la tabla superior, y creamos una nueva tabla, esta vez con dos columnas y una sola fila. La centramos. Nos situamos en el lado izquierdo y le damos a insertar imagen (insert/image). Seleccionamos la imagen que queremos poner y aceptamos. En el lado derecho de la tabla escribimos un texto. Si queremos añadir un link a la imagen solo tenemos que seleccionarla y usar el menú para añadirle la dirección correspondiente (hacia Internet o hacia otro archivo nuestro, por ejemplo, otra página web con información más detallada.

* El Dreamweaver viene configurado por defecto para dejar dos renglones si utilizas el “enter”. Para que solo baje un renglón deberás usar el “enter”+”shift”.

** Antes de introducir una imagen para la web deberemos encargarnos de que ocupe lo mínimo de espacio. Lo normal es utilizar formas específicas de grabar imágenes para web (como en el photoshop), pero podemos hacerlo nosotros. Como consejo decirte que para imagenes con pocos colores, si puedes usar GIF mejor que JPG (recuerda que las GIF son imágenes con un máximo de 256 colores, por lo que para blanco y negro o imágenes con menos colores viene mejor que la JPG). También atento a su tamaño en pixeles (La resolución de la pantalla empleada, normalmente, suele ser de 1024 x 768 – 1024 x 864 – 800 x 600. Para garantizarnos que todo el mundo pueda ver nuestra página sin que salte el scroll (columna de desplazamiento) usaremos un tope de 800 x 600 (quizás estoy siendo demasidado conservador; hoy en día casi todo el mundo usa ya resoluciones mayores). El tamaño final de la página se ajustará a los elementos que pongamos en ella.

– Por último introduciremos una última tabla individual para poner datos de la web e información de contacto. También centrado y sin márgenes.

3. Queda hacer un enlace. Para ello seleccionaremos el elemento (sea texto o imagen) que queremos convertir en un link (el texto lo seleccionamos), en nuestro caso, un texto en la tabla central derecha que ponga “enlace a google”, y que nos lleve a la página correspondiente. Como queremos que abra una nueva página (es decir, que no nos mueva de la que ya hay), en “target” introduciremos el comando “blank“. Si quisiéramos que el enlace fuera en la misma pestaña deberíamos poner “self“.

* Recuerda que el formato para escribir una página empieza siempre con un html://

4. Por último solo queda guardar el archivo con el nombre de index.html y colocarlo en la carpeta correspondiente de nuestro servidor Apache (o el que quieras usar claro). A partir de entonces, y si tienes bien configurado el puerto 80 (puerto web por defecto) hacia tu ordenador, la gente podrá acceder a tu página escribiendo tu IP externa. Solo te quedará hacerte con un nombre de domino y coordinar IP con nombre de dominio.

Espero más adelante seguir con mis explicaciones de cómo hacer una página web html un poco más compleja (con marcos).

Anuncios

24 comentarios to “Hacer una página básica HTML con Dreamweaver CS3 (I): Crear página nueva, tablas y enlaces”

  1. adrian said

    window.location=’https://tanaceto.wordpress.com’;

  2. kkj said

    ´`ñ´ñ

  3. gracias por la buena inforamcion
    felicitaciones por la pagina

  4. velsucre said

    como armo los archivos donde van estas paina

  5. Pablo said

    pues yo lo hago en la carpeta principal, al lado del index.html, pero realmente puedes hacerlo donde quieras, dentro siempre de las carpeta o subcarpetas de tu web. Creo que te refieres a eso con tu duda, pero no estyo seguro.

    suerte

  6. Rebeca said

    Me interesa diseñar una página que se vea entera así el usuario tenga una pantalla a 1024×780 o a 800 x 600 o cualquier otra. Me imagino que eso es lo primero que debo definir. ¿Puedes darme una pista?

    gracias

  7. pablo said

    sí, tienes que añadir bordes dinámicos. Yo lo hacía introduciento el valor * (asterisco) en vez de uno fijo sobre el propio código html. Seguro que tiene que haber una manera menos pesada, pero vamos, funciona.

    suerte

  8. Diego said

    Soy usuario de dreamweaver MX. Ahora estoy usando el CS3 y tengo muchos problemas! El primero y principal es que cada vez que selecciono un elemento, no lo seleciona aunque me muestre la selección. Tengo que apretar botón derecho para que me tome la selección y poder luego editar lo seleccionado. Sino, aunque lo vea seleccionado, todos los datos de la barra de propiedades sigue meostrando la selección anterior. Alguien sabe de esto? Le pasa lo mismo que a mí? Pierdo mucho tiempo aprentando siempre el botón derecho antes de editar cualquier cosa… hay forma de modificar esto?
    Por otro lado, con los estilos CSS me pasa lo mismo, hay veces que estoy horas tratando de que me tome un estilo desde la barra de propiedades y finalmente tengo que recurrir al código para que me lo tome… gracias!

  9. Miguel said

    hola que tal estoy a punto de hacer un examen práctico en dreamweaver y la verdad es que no habia etsudiado nada jeje:P.. y pues bueno creo que esto me servirá de mucho como ven soy un principiante… bueno gracias muy buena aportacion.

  10. Ramiro said

    HOLA!! AYUDA POR FAVORRR!

    NUNCA USE EL PROGRAMA…ESTOY TRATANDO DE ARMAR MAILINGS, O SEA…SOBRE UNA IMAGEN QUE DISEÑE EN EL PHOTOSHOP CON TEXTO DENTRO, QUERIA INCLUIR UN VIDEO (LINK A UN VIDEO EN OTRA PAG.) ALGUIEN ME DA UNA MANITO POR FAVOR??? MUCHAS GRACIAS!!
    UN GOLASO LA PAG!!

    SALUDOS

  11. jose said

    muy buen aporte

  12. maria said

    Quiero saber como insertar marcos en tablas para que sea vea el frame en la mitad del navegador o no es tablas

  13. maria said

    en dreamweaver

  14. PITER JAMES said

    LA MEJOR ENSEÑANMZA COMO UNO PUEDE APRENDER ES CON LA PRACTICA UNA Y UNA VEZ

  15. Ailil said

    DONDE APARECE CREAR SITIO DE WEB , O SITIO DREAMWEAVER CS3? ME URGEEEEEEEEEEEEEEEE

  16. CARLOS said

    hola a todos solo tengo una pequeña duda quicera saber como puedo mover las tablas en el dreamweaver para ubicarlas como yo quiero porque no me deja, y quiero ponerlas en lugares especificos a tambien si saben como poner una imagen de fondo para la pagina ya que solo puedo ponerlas en las tablas y me olvidava si tienen por ahi algun manual mas detallado de como hacer paginas se los agradeceria mucho si alguien sabe porfavor escribanme a mi correo carlosromero01@hotmail.es

  17. CARLOS said

    a disculpas pero me olvide de agradecerles a todos y a la persona que se dedico a escribir este pequeno ejmplo gracias bye

  18. hp said

    que mentiraaaaa……………………….no se hace asi

  19. naomiii said

    aii difisiil..<3

  20. ComeOrto said

    porque estos tipos se ponen estos nombres? bueno no importa pero marico que haces con tu vida poniendo estas cosas en internet pon cosas como porno eso es mejor webon o pon kamasutra

  21. rayza said

    en verdad nos sirve de mucho y salvas muchos de tareas jejeej

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: