COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER

Transcripción

1 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER vicente@faubell.com

2 Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por los códigos ya que Dreamweaver nos permitirá crear nuestra página web de forma más sencilla. INTRODUCCION A DRAMWEAVER: El programa Dreamweaver es una herramienta de desarrollo profesional de sitios Web, cuenta con características novedosas y ofrece un panorama amplio de opciones de diseño que son indispensables para los diseñadores expertos y principiantes de Web. Podemos emplear Dreamweaver para crear sitios de Web en forma visual, con una interfaz gráfica de fácil manejo que nos permite visualizar los cambios que efectuamos al mismo tiempo que los realizamos o mostrándonos los códigos de programación comentados anteriormente. Para arrancar Dreamweaver iremos a inicio programas Macromedia Macromedia Dreamweaver MX 2004 La primera vez que utilicemos Dreamweaver el programa nos preguntara como deseamos configurar el espacio de trabajo, en principio elegiremos la opción diseñador aunque luego veremos como cambiar de una a otra.

3 El entorno de trabajo de Dreamweaver: Al arrancar Dreamweaver aparecerá esta pantalla inicial, vamos a ver sus componentes fundamentales y los nombres de los elementos que componen el programa. 1 Panel central. Espacio para la página web. será donde crearemos nuestra página añadiendo elementos a partir del menú. 2 Panel propiedades. Muestra las propiedades del elemento seleccionado. Variara según este. 3 la barra de menús y de los elementos. Es aquí donde están las herramientas de Dreamweaver. 4 Los paneles. Donde encontraremos una serie de funciones diferentes ara distintas tareas.

4 Dentro de la barra de menús (punto 3) podemos encontrar las siguientes barras: - La barra de título La barra de título contiene el nombre del programa y el nombre del documento. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. - La barra de menús La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles. - La barra de herramientas estándar La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir, Guardar, etc.

5 - La barra de herramientas de documento La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. - El lanzador El lanzador se encuentra en la barra de tareas. Con un simple clic sobre los iconos es posible mostrar y ocultar los paneles correspondientes a éstos, sin la necesidad de tener que desplazarse a través de los menús para abrirlos. CREAR UN SITIO: Antes de empezar a crear nuestras páginas web hemos de crear un sitio, un sitio no es más que un conjunto de páginas web comunes a internet. Para crear nuestro sitio, en el PANEL CENTRAL haremos clic en SITIO DE DREAMWEAVER. Aparecerá el asistente para crear nuestro propio sitio. Lo primero que nos pedirá será un nombre para nuestro sitio. En este caso

6 le llamaremos Mi primer sitio web. Dele nombre y haga clic en el botón siguiente. En el siguiente paso marcaremos la opción: No, no deseo utilizar una tecnología de servidor y haremos clic en siguiente. Después Dreamweaver nos preguntara como deseamos trabajar con los archivos durante el desarrollo. Marcaremos la opción recomendada: Editar copias locales en mi equipo. En la parte inferior dejaremos la carpeta que nos ha creado por defecto. A lo largo de este manual y del curso llamaremos a esta careta Web local. Haga clic en siguiente y Dreamweaver le preguntara como se conectara al servidor. De momento saltaremos este punto y lo dejaremos para más adelante, ya que, aunque se verán mas adelante, aun no poseemos conocimientos para subir nuestra página a internet, por lo tanto, marque la opción ninguno.

7 Compruebe en el resumen que todos los datos son correctos y corresponden con los datos de la siguiente imagen: Haga clic en completado y compruebe como en el panel lateral ha sido creada su Web local. CREAR UNA PÁGINA WEB CON MARCOS. Ya tenemos nuestro sitio preparado, aunque de momento solo trabajaremos a nivel local, es decir, en nuestro ordenador. Para crear nuestra primera pagina web, en el panel central, haga clic en crear nuevo HTML. Si no vemos el panel central también podemos hacerlo desde Archivo nuevo pagina básica. Se mostrara nuestra página web en blanco. En los paneles de la derecha podremos ver los archivos que iremos creando en nuestro sitio.

8 Como hemos dicho Dreamweaver nos permite pasar de vista diseño a vista programador desde los siguientes botones: Vamos a crear nuestra primera página web con Dreamweaver. Escriba Mi primera página Web en el cuadro de texto titulo y copie el siguiente texto: Esta es mi primera página web creada con Dreamweaver. Fíjese que mientras este escribiendo podrá darle formato al texto como lo haría con un procesador de textos como por ejemplo Word. Ponga su frase a un tamaño 18, color rojo y centrado. Desde el botón propiedades de la página dele un color de fondo a su página. Complete el texto escribiendo su nombre en la línea inferior. Guarde la pagina con el nombre página de prueba.htm LOS MARCOS. Los marcos o frames en ingles dividen una página web en varias zonas. Son infinitas las posibilidades que nos ofrecen estos marcos. Una muy utilizada es el uso de un menú central donde se vera el contenido de nuestras páginas. Encima de este menú un encabezado con el nombre de nuestro sitio y un marco lateral al lado del marco principal.

9 Vamos a crear este marco. Para ello iremos a ARCHIVO NUEVO y seleccione conjunto de marcos de las distintas opciones que le da el programa elija superior fijo, izquierdo anidado. Haga clic en crear. Se creara una página Web con distintos marcos como en la imagen. Para administrar estos marcos abra panel marcos, para ello seleccione ventana marcos. Lo primero que haremos será cambiar la medida de los marcos. Para ello seleccione primero los dos marcos inferiores, vera que la anchura del marco anidado es de 80 pixeles, cambie esta medida a 215 px (ha de presionar intro para validar el cambio). Esto hará que la longitud horizontal del marco sea de 215 px y el resto de pantalla sea para el panel principal. Ahora hagamos clic en la línea que rodea todos los marcos y demos una medida de 90 pixeles.

10 Vamos a darle contenido a nuestras páginas. Empezaremos por el panel superior. Haga clic en el y valla y en el botón propiedades de la página busque la imagen de fondo libreta.jpg de su carpeta MATERIAL DE TRABAJO. Lea y acepte los mensajes que le salgan a continuación. Siguiendo en el marco superior escriba como encabezado de su página La pagina web de (su nombre) y dele un formato de fuente al texto escrito. Ahora procederemos a darle una imagen de fondo al panel lateral. Para ello haga clic en el panel lateral y ponga la imagen libreta como ha hecho anteriormente en el panel superior. Por ultimo haga clic en el panel principal y dele una imagen de fondo, en este caso usaremos la imagen papel.jpg. Recuerda poner el titulo a tu página. Antes de continuar deberemos guardar todos los cambios. Tenga en cuenta que esta trabajando con tres marcos y con una página web que es el conjunto de los tres marcos. Vamos a archivo guardar todos. Guarde todos los marcos, para ello fíjese en el área de trabajo que se remarcara cada marco que este guardando en cada momento. El conjunto de todos los marcos se ha de llamar index.htm que será la página de inicio.

11 Aparte del index deberemos guardar la página principal, que corresponde al marco principal. Esta página variara de contenido según en que sección de mi pagina este. Después guardaremos los marcos superior y lateral con los nombres: marco_lateral y marco_superior. Mediante el botón puede ver una vista previa de su página web. Es recomendable como hemos dicho anteriormente comprobarla en distintos navegadores. Haga clic en la página principal y en ella escriba el siguiente texto: Este es mi primer sitio web creada con Dreamweaver En ella pondré: - Una página principal que es la que estas leyendo en estos momentos. - Una colección de fotos. - Un formulario. - Enlaces a otros sitios interesantes. La lista no numerada la puedes crear con el botón que puedes darle formato a tu texto.. Recuerda Con archivo guardar todo guarda todos los cambios realizados.

12 Ahora trabajaremos en el panel lateral. En el crearemos un listado donde ver todos los apartados de nuestro sitio Web. Los apartados que nos ocuparan serán los siguientes: - Página principal. - Fotos. - Formulario. - Enlaces. - Otros. Crea estos apartados. Es posible que tengas que agrandar el marco lateral, en mi ejemplo lo he aumentado hasta 175 px. Mas adelante crearemos los enlaces a los distintos apartados de las páginas. Antes de nada guarda los cambios. Si has seguido todos los pasos deberías tener una página similar a esta: MI PRIMERA PÁGINA WEB