|
|
|
~ Curso de Dreamweaver: aprende a diseñar tu web paso a paso, lección 5 - Creación páginas web - recursos webmaster ~
|
|
|
» ¿ Buscas un alojamiento para tu web que te ofrezca lo mejor del mercado ?, pues estás de suerte, lee detenidamente la siguiente información:
• 300 gigas de espacio en disco • 3 Terabytes (o lo que es igual: 3.000 Gigas --¡¡ 100 Gigas diarios !!--) de transferencia mensual o ancho de banda • dominio gratis • 2 meses gratuítos. Como ves, un hosting ideal para alojar tu web.
• Correo ilimitado • Alojamiento ilimitado de dominios • Soporte para PHP5 y otros • MySQL (hasta 75 bases de datos) • Backup diario de las Bases de Datos • Atención al cliente las 24 horas (es en inglés, pero te aseguro que no lo vás a necesitar porque el hosting funciona 100% a satisfacción del webmaster)
• Instalador de múltiples aplicaciones (Joomla, PHP-Nuke, Wordpress, osCommerce, Foro PhpBB y otros muchos) de forma sencilla • ...y muchos más que irás descubriendo.
» Lo tienes todo por ¡¡ 60 € al año !!. Si estás interesado, puedes conseguirlo fácilmente:
Aloja tu sitio aquí, a través de este enlace y tendrás esta oferta especial.
NOTA: Esta web está alojada en él desde hace 2 años y no ha tenido una sola caída. ALTAMENTE RECOMENDADO. |
|
|
| |
|
| |
* MENÚ DEL CURSO |
|
* OTRA FORMA DE DISEÑAR TU WEB |
|
* TODO ESTO GRATIS PARA TÍ |
|
* Y HAY MUCHO MÁS AÚN |
|
|
* ENLACES PATROCINADOS |
|
| |
|
ENLACES PATROCINADOS
|
curso dreamweaver, curso diseño web.Tutorial Dreamweaver webmaster
Lección 5: dando contenido
En la lección anterior 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.
|
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:
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:
|
|
y 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:
lo que nos abrirá la ventana :
|
|
|
que 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 decir que me cree una con 1 fila y 2 columnas, un 90% de ancho, y con 0 en grosor, relleno y espacio:
|
|
y pico abajo en Aceptar , con lo que la tabla aparece así:
y si picamos en cualquier espacio libre, aparecerá:
como veis solo 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í:
como veis 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:
donde vamos a cambiar el Tamaño:
 que lo ponemos en 24 para que la frase aparezca así:
 a continuación le cambiamos la Fuente :
 como veis voy a elegir Forte y si no la tienes la puedes buscar picando en Editar lista de fuentes… , y aparecería así:
 ahora le voy a dar un color al texto, por ejemplo un azul:
 para que nos quede de esta forma:
y finalmente seleccionaremos la segunda frase y le ponemos tamaño 14 , Fuente Verdana y color violeta, quedando así:
|
|
veremos que posiblemente se haya desplazado la vertical que divide ambas celdas hacia la derecha:
y lo que tenemos que hacer 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:
|
|
 y elegimos 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):
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
|
| |
|
| |
| |
|
|
|
|
|
|
|
|
|
© deseoaprender.com - Cantabria (España) 2005-2007.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse sin el consentimiento por escrito de su autor y propietario. |
|
| |
|
|
