deseoaprender.com
Curso básico de Dreamweaver 8
 Aprende el manejo de Dreamweaver 8

Crear páginas web con el uso de Adobe Dreamweaver; herramientas para el webmaster.

   
 
   
 

INSERTAMOS CONTENIDO EN LA PÁGINA

    En la lección anterior de Dreamweaver habíamos creado una página a la que llamamos como es preceptivo index.htm y lo único que habíamos hecho es darle un título y guardarla; en esta nueva lección vamos a aprender a darle contenido a esa página, eso sí, sin teclear una sola línea de código, pues ya dije al principio que con Dreamweaver se pueden crear páginas sin necesidad de programar.

    En cualquier página (y sobre todo en la inicial de la web) es lo normal que arriba del todo vaya una cabecera con un logotipo de la empresa o un título de tu web que dé nombre al sitio, cabecera que puede ser más o menos sofisticada (hay programas específicos para estos menesteres, como puede ser el Xara Webstyle) pero aquí vamos a ver como se prepara una cabecera de una forma sencilla y ya luego podeis vosotros refinarla cuanto querais.
-

    Decir antes de seguir que en el diseño de páginas mediante Dreamweaver son importantísimas las Tablas pues no hay web que no haga uso bastante amplio de esta herramienta; una Tabla será fundamental para distribuir a lo largo de una página tanto texto como imágenes, menús, etcétera, lo que sería imposible prácticamente sin ellas. Te permiten alinear, colocar texto en sitios determinados…que de otra forma quedaría bastante caótico (se puede usar también CSS que veremos más adelante).
    Para preparar esa cabecera de la que hablé, vamos primeramente a colocar una tabla que nos sirva de guía, para ello una vez que hemos abierto la página de la lección anterior mediante:

aprende a diseñar web con Adobe Dreamweaver

    Y buscándola en el disco duro del Pc en la carpeta donde la habíamos guardado, al final tendremos a la vista el área de trabajo:

curso de diseño de páginas web

    Ahora hacemos un clic con el mouse para que el cursor se coloque en la parte superior izquierda y luego, teniendo activo el panel de Común deberemos picar en el icono de Tabla como veis en la figura siguiente:

herramientas para webmaster: Dreamweaver 8

    Esto hará que se abra la siguiente ventana que te muestro aquí abajo:

cursos online

   Aquí será donde configuremos la tabla a insertar con Dreamweaver, de arriba abajo vemos:

  Filas: el número de ellas que deseamos tenga la tabla,
  Columnas: igual pero para las columnas,
  Ancho de tabla: la longitud total a lo ancho, de la tabla que puede ir en porcentaje o en píxeles (yo uso siempre el porcentaje y suelo emplear un ancho del 90% para que la tabla no esté al límite de la ventana),
  Grosor del borde: si queremos que la tabla tenga un borde a todo su alrededor, o que sea invisible (en este caso tendrá 0), si le ponemos una cifra (1, 2…)el borde será cada vez más ancho,
  Relleno de celda: el espacio que habrá entre el borde de una celda y su espacio de trabajo,
  Espacio entre celdas: distancia que quedará entre una celda y otra (si no deseamos ninguna, irá a 0),
  Encabezado: por si deseamos que la tabla lleve uno,
  Accesibilidad: datos que no son influyentes en la tabla.

  Así que yo le voy a indicar que me cree una con 1 fila y 2 columnas, un 90% de ancho, y con 0 en grosor, relleno y espacio:

las tablas en Dreamweaver

    Pico ahora abajo en Aceptar , con lo que la tabla aparece así:

diseño con tablas en curso de Adobe Dreamweaver

    Si picamos ahora en cualquier espacio libre, aparecerá:

aprender a usar las tablas en Dreamweaver

    Como ves sólo aparece delimitada por unos puntos y en el navegador aún no se vería nada. Seguidamente, vamos a preparar una cabecera, así que nos colocamos en la primera celda de la tabla (picando dentro de ella) y tecleamos por ejemplo: deseoaprender.com que será digamos, el logotipo, y ahora pulsamos <Enter> y en la linea inferior tecleamos la frase: aprende informática, dibujo, pintura… , debiendo quedar algo así:

    Aún aparece un poco pobre, así que vamos a cambiarle un poco el aspecto, y primero seleccionamos la frase de arriba y deberemos pasarnos a la parte inferior Propiedades:

propiedades de tabla, curso diseño web

    Donde ahora vamos a proceder a cambiar el Tamaño, el cual cambiamos:  para que la frase aparezca así:

    A continuación le cambiamos la Fuente según puedes ver aquí abajo:

trabajar con tablas en Dreamweaver 8

    Como ves voy a elegir Forte y si no la tienes la puedes buscar picando en Editar lista de fuentes… , y aparecería así:

elegir fuente de letra en Dreamweaver

    Ahora le voy a dar un color al texto, por ejemplo un azul:

curso en línea para aprender a crear una web

    Para que nos quede de esta forma que te muestro aquí abajo:

aprender a crear una web estática en html

    Finalmente seleccionaremos la segunda frase y le ponemos tamaño 14 , Fuente Verdana y color violeta, quedando así:

    Verás que posiblemente se haya desplazado la vertical que divide ambas celdas hacia la derecha:

    Lo que tenemos que hacer en este caso, es colocar el puntero del ratón sobre dicha línea hasta que cambie a un símbolo parecido al signo igual en vertical y dos flechitas, picamos botón izquierdo y sin soltar arrastramos hacia la izquierda hasta el lugar adecuado:

    Por último podemos darle un color de fondo a la celda así que picamos dentro de ella y:

elegir color en Dreamweaver

    Eligiendo en este caso un color clarito, por ejemplo:

    Nos queda la otra celda de la derecha, que si nos parece correcto, le podemos dar el mismo fondo, picando dentro de ella, los mismos pasos (cuando salga el cuentagotas, en vez de recordar el color que habíais cogido, lo que podeis hacer es trasladar dicho cuentagotas hasta la primera celda y picar sobre el color que ya dimos):

aprender Dreamweaver facil online

    Bueno, como veis no ha quedado tan mal y podría valer perfectamente como logotipo de nuestra web. Salvad ahora el trabajo mediante Archivo-Guardar (o simplemente con Ctrl+S) y luego cerrais con Archivo-Cerrar pues seguiremos en la próxima lección donde iremos añadiendo cosas a nuestra página. Saludos

 
  ** Un excelente hosting: Alojamiento web recomendado. Si tienes nociones de inglés, es un buen alojamiento para tu web.
   
 
Nos han visitado ya:
 usuarios.
   
Copyright © deseoaprender.com - Cantabria (España) 2005-2010.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse en todo o en parte, sin el consentimiento por escrito de su autor y propietario.