Docsity
Docsity
Prepara tus exámenes
Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity

Consigue puntos base para descargar
Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium

Orientación Universidad
Orientación Universidad
Vende en Docsity
Vende en Docsity
Docsity AI
Docsity AI
Inicia sesiónRegístrate

Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity

Busca documentos

Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity

Busca tu universidad

Encuentra los documentos específicos para los exámenes de tu universidad

Video Cursos

Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades

Quiz

Responde a preguntas de exámenes reales y pon a prueba tu preparación

Docsity AINEW

Resume tus documentos, hazles preguntas, conviértelos en quiz y mapas conceptuales

Ver preguntas

Despeja tus dudas leyendo las respuestas a las preguntas que realizaron otros estudiantes como tú

Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium

Compartir documentos
download point icon20 Puntos

Por cada documento subido

Responde a las preguntas
download point icon5 Puntos

por cada respuesta dada (máx. 1 al día)

Todos los modos para conseguir puntos gratis
Consigue puntos de inmediato

Elige un plan Premium con todos los puntos que necesitas.

Oportunidades de estudio

Elige tu próximo programa de estudio

Ponte en contacto inmediatamente con las mejores universidades del mundo. Busca entre miles de universidades en todo el mundo. Busca entre miles de universidades partner oficiales

Comunidad

Pregúntale a la comunidad

Pide ayuda a la comunidad y resuelve tus dudas de estudio

Ebooks gratuitos

¡Nuestros e-books salva-estudiantes!

Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity

Creación de una página web con Dreamweaver: pasos a seguir - Prof. 7249, Apuntes de Lenguaje publicitairio

Universidad Rey Juan Carlos (URJC)Lenguaje publicitairio

En este documento se detallan los pasos para crear una página web utilizando dreamweaver, desde la creación de la carpeta hasta la importación de estilos y textos. Se explica cómo crear una primera página en blanco, copiar contenidos de otras carpetas, establecer textos alternativos, insertar imágenes y crear rollovers. Además, se muestra cómo importar estilos css y crear vínculos entre páginas.

Tipo: Apuntes

2014/2015

Subido el 04/05/2015

beita1306
beita1306 🇪🇸

4.4

(22)

26 documentos

1 / 7

Toggle sidebar

Esta página no es visible en la vista previa

¡No te pierdas las partes importantes!

bg1
PRÁCTICA. Sitio web TECMUL (index y páginas de segundo nivel)
Realizaremos un sitio web (TECMUL = Tecnologías Multimedia) con una página de presentación y dos
páginas de segundo nivel. Una vez realizada la práctica, colocaremos los ficheros en el espacio web que
cada uno tiene asignado. Éste será el sitio web con el que trabajaremos todo el año.
OBJETIVO
S
Iniciarse en el proceso de creación de aplicaciones multimedia y en las peculiaridades del trabajo on-line.
HERRAMIENTAS DE TRABAJO
Comandos empleados y operaciones realizadas en Dreamweaver
- Menús: Archivo, Edición, Ver, Insertar, Modificar, Texto, Ventana y Sitio.
- Definir un sitio de Dreamweaver.
- Crear páginas html.
- Paleta Archivos: duplicar, renombrar y mover páginas html.
- Establecer un título para las páginas html.
- Paleta Propiedades: establecer la posición y tamaño de las capas.
- Insertar imágenes de sustitución.
- Establecer vínculos e hipervínculos.
- Elegir el color y el estilo de los distintos aspectos de un vínculo.
- Crear, aplicar y adjuntar estilos CSS.
- Configurar una conexión remota.
- Colocar los archivos en el sitio remoto.
Comandos empleados y operaciones realizadas en Photoshop
- Menú Archivo (guardar como).
- Herramienta Texto horizontal.
- Opciones del formato PNG.
Universidad Rey Juan Carlos
Tecnologías Multimedia
Profesor: Manuel Montes ©
pf3
pf4
pf5

Vista previa parcial del texto

¡Descarga Creación de una página web con Dreamweaver: pasos a seguir - Prof. 7249 y más Apuntes en PDF de Lenguaje publicitairio solo en Docsity!

PRÁCTICA. Sitio web TECMUL (index y páginas de segundo nivel)

Realizaremos un sitio web (TECMUL = Tecnologías Multimedia) con una página de presentación y dos páginas de segundo nivel. Una vez realizada la práctica, colocaremos los ficheros en el espacio web que cada uno tiene asignado. Éste será el sitio web con el que trabajaremos todo el año.

OBJETIVO

S

Iniciarse en el proceso de creación de aplicaciones multimedia y en las peculiaridades del trabajo on-line.

HERRAMIENTAS DE TRABAJO

Comandos empleados y operaciones realizadas en Dreamweaver

  • Menús: Archivo, Edición, Ver, Insertar, Modificar, Texto, Ventana y Sitio.
  • Definir un sitio de Dreamweaver.
  • Crear páginas html.
  • Paleta Archivos: duplicar, renombrar y mover páginas html.
  • Establecer un título para las páginas html.
  • Paleta Propiedades: establecer la posición y tamaño de las capas.
  • Insertar imágenes de sustitución.
  • Establecer vínculos e hipervínculos.
  • Elegir el color y el estilo de los distintos aspectos de un vínculo.
  • Crear, aplicar y adjuntar estilos CSS.
  • Configurar una conexión remota.
  • Colocar los archivos en el sitio remoto.

Comandos empleados y operaciones realizadas en Photoshop

  • Menú Archivo (guardar como).
  • Herramienta Texto horizontal.
  • Opciones del formato PNG.

Universidad Rey Juan Carlos Tecnologías Multimedia Profesor: Manuel Montes ©

INSTRUCCIONES. Creación paso a paso.

  1. En la carpeta “Mis documentos” de mi ordenador debe haber una carpeta llamada “TECMUL” y dentro otra denominada “Sitios Web”. Dentro de esta última carpeta añadiré una nueva llamada “ TECMUL online ”. En el interior de esta carpeta crearé otras dos llamadas “html” y “material”.
  2. Después, abrimos Dreamweaver y definimos la carpeta “ TECMUL online ” como sitio de Dreamweaver. Llamamos al sitio “TECMUL_Apellidos y nombre” (por ejemplo, TECMUL_Montes_Manuel). Si no sabes hacer este paso debes repasar las prácticas anteriores.
  3. A continuación, creamos una primera página en blanco e inmediatamente la guardamos con el nombre “index.htm” directamente en la carpeta raíz del sitio.
  4. Ocultamos momentáneamente Dreamweaver y volvemos al explorador de Windows. Buscamos la carpeta con el material de esta práctica. Dentro de la misma hay una carpeta llamada “copiar contenido en carpeta material”. Y eso es lo que vamos a hacer. ABRIMOS DICHA CARPETA y copiamos los once ficheros que contiene en la carpeta “material” que se encuentra dentro de la carpeta “ TECMUL online ”.
  5. Volvemos a Dreamweaver. Notaremos que los cambios efectuados en el explorador de Windows se han hecho visibles en Dreamweaver (de no ser así pulsa F5, lo que equivale a actualizar). Si haces clic en el icono del signo “+” que aparece junto a la carpeta “material” (en el panel Archivos) se verá el contenido de la misma, que debe corresponder a los once ficheros recién copiados: a. “intro_ani_(weba32).gif”. [Este fichero es un gif animado] b. “Practicas_DOWN.png”. c. “Practicas_fija.png”. d. “Practicas_GR.png”. e. “Practicas_UP.png”. f. “Principal_DOWN.png”. g. “Principal_UP.png”. h. “Trabajos_DOWN.png”. i. “Trabajos_fija.png”. j. “Trabajos_GR.png”. k. “Trabajos_UP.png”.
  6. La ventana maximizada del documento o página abierta (en este caso index.htm) muestra en la parte superior una opción llamada “Título” y a su lado una casilla con el texto “Documento sin título”. Remplazad este texto por “Tecnologías Multimedia” y pulsad la tecla “ENTER” para que se ejecute la operación (menú Archivo>Guardar o Ctrl+S).
  7. Puesto que se ha realizado un boceto previo de la disposición de los elementos en la página, conviene mostrar las reglas del programa y la cuadrícula para trabajar con exactitud. Si no sabes hacer estos pasos consulta las prácticas anteriores.
  8. Ahora vamos a dibujar las capas de la página principal. La primera de las capas la vamos a crear vía código html. Selecciona el texto que aparece en la siguiente línea y cópialo en la página, con ayuda de la vista de código (ya deberías saber en qué lugar debes pegar este texto):
  1. A partir de esa primera capa crea otras cinco con estos parémetros:

o Capa 2: Iz: 450px; Sup: 55px; An: 125px; Al: 31px. o Capa 3: Iz: 580px; Sup: 55px; An: 125px; Al: 31px. o Capa 4: Iz: 100px; Sup: 90px; An: 605px; Al: 305px. o Capa 5: Iz: 100px; Sup: 395px; An: 600px; Al: 30px. o Capa 6: Iz: 710px; Sup: 325px; An: 90px; Al: 70px.

  1. Es un buen momento para guardar. Ahora insertaremos imágenes, rollovers y textos en las capas. A partir de ahora cada vez que coloques una imagen o cualquier otro elemento al que se le pueda poner la etiqueta “Texto alternativo”, debes teclear y establecer tú dicho nombre, que debe estar relacionado con dicho elemento. Cuando tienes seleccionado un elemento (por ejemplo, una imagen) y en la paleta Propiedades aparece la opción “Alt”, el texto que escribas en la casilla situada junto a esta opción (otra forma de escribir un texto alternativo) es el que se verá mientras
  1. Regresa al documento “Textos_TECMUL_01a.doc”. Copia el texto que aparece bajo el epígrafe “Capa 6” y pégalo en Dreamweaver en dicha capa. Selecciona la frase y aplícale la hoja de estilo “TextoBase”. Guarda.
  2. Ahora crearemos el segundo hipervínculo. Para ello, en la capa 6, selecciona únicamente la palabra “enlace”. En el documento “Textos_TECMUL_01a.doc” copia la dirección web que aparece bajo el epígrafe “Hipervínculo de la capa 6”.
  3. Vuelve a Dreamweaver y manteniendo seleccionada únicamente la palabra “enlace” de la capa 6, en la paleta Propiedades, en la casilla Vínculo, copia el texto correspondiente a la dirección web del campus virtual de la URJC: https://www.campusvirtual.urjc.es
  4. Con el texto “enlace” aún seleccionado, en la paleta Propiedades, en el menú desplegable del comando “Destino” escoge “_blank” para que el hipervínculo se vea en una ventana nueva.
  5. A continuación, vamos a modificar el estilo y color genérico de los vínculos para adaptarlos a nuestro sitio web. En el menú Modificar elegimos la opción Propiedades de la página (en la paleta Propiedades también encontrarás esta opción que aparece como un botón). En el cuadro de diálogo de esta opción escogemos el apartado Vínculos (CSS). Modificaremos únicamente los siguientes apartados: a. Color de vínculo: # b. Vínculos visitados: # c. Vínculos de sustitución: # d. Vínculos activos: #99CC e. Estilo subrayado: “Mostrar subrayado solamente al situar cursor encima”.

Guardamos los cambios. Nuestro trabajo en Dreamweaver ha acabado por ahora. Comprueba en el navegador que los vínculos se visualizan y funcionan correctamente.

Configuración de las opciones de Vínculos CSS de Propiedades de la página (Información extraída de la aplicación de Ayuda de Dreamweaver) La categoría Vínculos CSS de Propiedades de la página permite definir la fuente predeterminada, el tamaño de la fuente y los colores de los vínculos, los vínculos visitados y los vínculos activos.

  • Fuente: especifica la familia de fuentes predeterminada que se debe utilizar para el texto de un vínculo. De forma predeterminada, Dreamweaver utiliza la familia de fuentes especificada para toda la página a menos que especifique otra fuente.
  • Tamaño: especifica el tamaño predeterminado de la fuente que se debe utilizar para el texto de un vínculo.
  • Color de vínculo: especifica el color que se debe aplicar al texto de un vínculo.
  • Vínculos visitados: especifica el color que se debe aplicar a los vínculos visitados.
  • Vínculos de sustitución: especifica el color que se debe aplicar cuando un ratón (o puntero) se sitúa encima de un vínculo.
  • Vínculos activos: especifica el color que se debe aplicar cuando un ratón (o puntero) hace clic en un vínculo.
  • Estilo subrayado: especifica el estilo subrayado que se debe aplicar a los vínculos.

TRABAJO EN PHOTOSHOP

  1. Abrimos en Photoshop la imagen “elsitiowebde.psd” que se encuentra en la carpeta “PSDs” incluida en el material para realizar esta práctica. Cuando aparezca el mensaje “Es posible que tenga que actualizar algunas capas de texto antes de que se puedan utilizar para una salida basada en vectores. ¿Desea actualizar estas capas ahora?”, pulsamos el botón “Actualizar” lo que nos permitirá que la capa de texto del archivo sea editable como tal.
  2. La capa “apertura” contiene el siguiente texto: “El sitio web de Nombre Apellido”. Con la herramienta Texto horizontal seleccionamos el texto (“Nombre Apellido”) y lo sustituimos por nuestro nombre y primer apellido. El texto original está escrito con la tipografía Impact a cuerpo
    1. Si nuestro nombre sobrepasa el tamaño del lienzo, se puede seleccionar todo el texto y reducir su tamaño, hasta los 20 puntos. Si esta reducción no es suficiente, tendremos que abreviar el nombre (por ejemplo, Fdez. en vez de Fernández). Tras escribir el texto adecuadamente seleccionamos la herramienta Mover y, a continuación, elegimos en el menú Archivo el comando Guardar para Web. Elegimos el formato PNG-24 (con transparencia).
  3. Pulsamos el botón Guardar y alojamos la imagen en la carpeta “material”, junto con el resto de imágenes de nuestro sitio.
  4. Antes de cerrar Photoshop guardamos otra copia del archivo modificado en formato PSD, pero este tipo de archivo lo dejamos fuera de la carpeta del sitio web. Menú Archivo>Guardar como. Elegimos el formato Photoshop (.psd). Dejamos este archivo en una carpeta externa al sitio web, por ejemplo, en la carpeta “editables”. Si aparece la ventana “Opciones de formato de Photoshop” marcamos la casilla “Maximizar compatibilidad”.

Recuerda: Los archivos con formato Photoshop (.psd) NO son idóneos para las aplicaciones multimedia, por su excesivo tamaño y su configuración por capas. NUNCA los incluiremos en los multimedia, pero sí debemos conservarlos a modo de copias de seguridad.

CONTINUAMOS EN DREAMWEAVER

  1. En la página index.htm insertamos en la capa 1 la imagen que acabamos de guardar en formato PNG y que nos identificará como los creadores del sitio web. Escribe un “Texto alternativo”. Nuestro trabajo con la página index.htm ha acabado, por el momento. Guardamos y cerramos la ventana de esta página (de este modo también cerramos la ventana de la hoja de estilos Tecmul_Estilos.css).
  2. Vamos a crear ahora las páginas de segundo nivel o secciones.

Empezamos por la sección PRÁCTICAS

  1. Duplicamos la página index.htm. Llamamos a la nueva página “Practicas.htm” (recordad que no debemos acentuar los nombres de los archivos ni de las carpetas) y la colocamos dentro de la carpeta “html” (cada vez que lo pida Dreamweaver, actualizamos los cambios).
  2. Abrimos “Practicas.htm”. En la ventana del documento reemplazamos el título actual por “Prácticas Tecnologías Multimedia” (en este área sí podemos usar tildes).
  3. A continuación vamos a trabajar con las capas de la página. Insertaremos imágenes, rollovers y textos en las capas. Establece un “Texto alternativo” para todos los elementos que lo puedan llevar.
  4. En la capa 1 definimos estos parámetros: Capa 1: Iz: 50px; Sup: 55px; An: 230px; Al: 60px. Borramos la imagen actual y colocamos la imagen “Practicas_GR.png”. Guardamos.
  5. En la capa 2 definimos estos parámetros: Capa 2: Iz: 300px; Sup: 75px; An: 125px; Al: 35px. Borramos la imagen actual y colocamos la imagen “Practicas_fija.png”. Guardamos.
  6. En la capa 3 definimos estos parámetros: Capa 3: Iz: 430px; Sup: 75px; An: 125px; Al: 35px. La imagen actualmente colocada nos sirve. Guardamos.
  7. En la capa 4 borramos la imagen actual y definimos estos parámetros: Capa 4: Iz: 630px; Sup: 75px; An: 125px; Al: 35px. Insertamos una imagen de sustitución cuya imagen habitual corresponda con el fichero “Principal_UP.png” y su imagen de sustitución sea el archivo “Principal_DOWN.png”.
  1. Lo último que haremos, antes de subir la página a nuestro hosting en Internet, es hacer los vínculos entre las páginas del sitio. Asegúrate de tener cerradas todas las ventanas del sitio.
  2. Haz un doble clic sobre el icono de la página “index.htm” para abrir la ventana de este documento. Selecciona el rollover de la sección Prácticas (incluido en la capa 2) y crea un vínculo con la página “Practicas.htm”. Después, selecciona el rollover de la sección Trabajos (incluido en la capa 3) y crea un vínculo con la página “Trabajos.htm”. Guarda estos cambios y cierra la ventana del documento “index.htm”.
  3. Haz un doble clic sobre el icono de la página Practicas.htm para abrir la ventana de este documento. Selecciona el rollover de la sección Trabajos (incluido en la capa 3) y crea un vínculo con la página “Trabajos.htm”. Después, selecciona el rollover de la sección Principal (incluido en la capa 4) y crea un vínculo con la página “index.htm”. Guarda estos cambios y cierra la ventana del documento “Practicas.htm”. La imagen fija en la que aparece el término “PRÁCTICAS” enmarcado no debe tener ningún vínculo pues ya estamos en dicho nodo. La presencia de esta imagen es informativa.
  4. Haz un doble clic sobre el icono de la página Trabajos.htm para abrir la ventana de este documento. Selecciona el rollover de la sección Prácticas (incluido en la capa 3) y crea un vínculo con la página “Practicas.htm”. Después, selecciona el rollover de la sección Principal (incluido en la capa 4) y crea un vínculo con la página “index.htm”. Guarda estos cambios y cierra la ventana del documento “Trabajos.htm”. La imagen fija en la que aparece el término “TRABAJOS” enmarcado no debe tener ningún vínculo pues ya estamos en dicho nodo. La presencia de esta imagen es informativa.
  5. Cerramos cualquier página que tengamos abierta y guardamos.

ACLARACIÓN: De esta práctica no es necesario realizar un trabajo equivalente con material propio, pero sí deberás sustituir las cabeceras que se te han dado por otras de diseño propio. Algunas pautas para hacer esto se te darán en una práctica posterior (la número 7), aunque si te crees capacitado puedes intentar hacer ya estas cabeceras.

Si quieres intentar hacer las nuevas cabeceras antes de tener a tu disposición las instrucciones de la práctica 7 ten en cuenta que las cabeceras nuevas deberían tener el mismo tamaño que las cabeceras que se te han facilitado y deberías idear tres versiones: UP, DOWN y FIJA. Además, tendrías que realizar las cabeceras de mayor tamaño para las secciones Prácticas y Trabajos. Si guardas estos archivos, con el mismo nombre que los originales, dentro de la carpeta material, Dreamweaver sustituirá los antiguos por los nuevos.