Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09
Upcoming SlideShare
Loading in...5
×
 

Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09

on

  • 1,578 views

Manual de Diseño de Sitios Web

Manual de Diseño de Sitios Web

Statistics

Views

Total Views
1,578
Views on SlideShare
1,578
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09 Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09 Document Transcript

  • qwertyuiopasdfghjklzxcvbnmqwertyui opasdfghjklzxcvbnmqwertyuiopasdfgh jklzxcvbnmqwertyuiopasdfghjklzxcvb PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS nmqwertyuiopasdfghjklzxcvbnmqwer DISEÑO DE SITIOS WEB   tyuiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq     Manual del Alumno  wertyuiopasdfghjklzxcvbnmqwertyuio     pasdfghjklzxcvbnmqwertyuiopasdfghj klzxcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfghjklzxc vbnmqwertyuiopasdfghjklzxcvbnmrty uiopasdfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfghjklzxc vbnmqwertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwertyuiop
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 1. PASOS PARA LA PLANEACIÓN DE UN SITIO WEB. Entender un sito web es un proceso complejo. A veces involucra un gran número de personas trabajando en diferentes roles para asegurarse de que el sitio contenga la información apropiada, se vea bien y sea funcional. La planeación es el procedimiento más importante para que la creación de un sitio web se lleve a cabo con éxito. Pasos para la planeación Paso 1. Lista de Control para obtener Información del Sitio. Es muy importante obtener información acerca de la compañía a quien se le desarrollará el sitio y de las personas que se espera visiten el mismo. Recopilar esta información puede requerir algo de investigación; hablando con personal de la empresa, buscando en revistas, etc. Alguna otra información requerirá de creatividad y trabajo. El resultado de esta investigación aportará valiosos datos para diseñar un sitio totalmente orientado a las necesidades de la empresa, y sus posibles clientes o proveedores. Los elementos más relevantes de la lista de control son: Lista de Control para la Información del Sitio 1 Objetivo del sitio (ver ejemplo 1) 2 Misión de la empresa (ver ejemplo 2) 3 Nombre y logo de la compañía 4 Dirección, teléfono(s), email y fax de la compañía – comunicación vía e-mail 5 Datos del contacto en la empresa – Nombre, teléfono, e-mail 6 Año de Inicio de Operaciones 7 Número de Empleados 8 Menciona los productos y/o servicios (5 al menos) 9 Fotografías (Empresa, productos, procesos, etc.) 10 Contenido del Sitio - lluvia de ideas, con el objetivo de pensar en todos los elementos que contendrá el sitio, tales como información, fotos, gráficas, calendarios, ligas, etc. (Ver ejemplo 3) Ejemplo 1. Objetivo del Sitio Contar con una herramienta efectiva y baja en costo que dé a conocer al público en general la empresa o institución, los productos y servicios que ofrezco para así incrementar mis ventas locales y ser accesible globalmente. Ejemplo 2. Misión de la Empresa dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 2/2
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno Ejemplo 3. Pensar en el contenido del sitio web Consiste en llevar a cabo una sesión de lluvia de ideas, con el objetivo de pensar en todos los elementos, tales como información, fotos, gráficas, calendarios, ligas, etc. que se deben incluir dentro del sitio Web pensando no Web, sólo en la publicación del sitio sino en su mantenimiento (actualización). Posteriormente se evaluará cada idea. Ejemplo. Sitio Web del Gobierno de Nuevo León Sitio Web de Chiquitín-Yogurt para niños • Calendario de eventos del gobierno • Ligas a otros sitios • Directorio telefónico de las diferentes • Manejo de juegos donde con solo hacer clic Secretarías en la imagen pueden iniciar el juego • Ligas hacia las diferentes dependencias • Una sección en la que los niños puedan como el DIF, turismo, etc. saber más sobre los animales, ciudades, • Respuesta a las preguntas más frecuentes etc. • Etc. • Etc. Paso 2. Diseñar la interfaz para la interacción humano-computadora (Maqueta). Consiste en definir el diseño global, los colores, tipo, tamaño y color de texto, los gráficos de cada una de las páginas del sitio Web. Se recomienda cuidar siempre el tamaño del archivo de cada página. Una página con muchos elementos gráficos puede tomar mucho tiempo en cargar. Como apoyo, se pueden visitar otros sitios Web. Ejemplo de la compañía Chiquitín. • Las imágenes y textos tendrán movimiento Diseño de la página principal o animación. • Se utilizarán colores que llamen la atención a los usuarios. • Se hará mucho uso de imágenes para que el usuario tenga una navegación más fácil por el sitio. • Se manejarán las siguientes páginas: a) divertichicos.html Tiene las opciones principales del sitio b) quienes_somos.html Contiene la información general del sitio, la misión, información del web master, etc. c) juegos.html Contiene la lista de los juegos que se pueden manejar en el sitio d) tareas.html . Contiene las ligas o vínculos a diferentes páginas de enciclopedias infantiles Ejemplo de otros sitios http://www.kokone.com http://www.biblioninos.cl/ dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 -mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 3/3
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno El diseño del sitio toma en consideración las necesidades de los usuarios potenciales del mismo. Abajo, se puede observar la diferencia entre el diseño requerido para un sitio que será utilizado por adultos y uno para niños, en términos de color, imágenes, colores, letras, etc. Personas mayores de 10 años interesadas en obtener información Niños y amas de casa interesados en el producto o en información acerca del estado de Nuevo León o en hacer algún trámite nutrimental. gubernamental. Paso 3. Diseñar la Estructura de Navegación o Mapa del sitio. Consiste en tomar en cuenta el contenido de las páginas para organizar la forma en que se navegará dentro del sitio Web; mediante un diagrama u organigrama. La Página de Inicio, también conocida como “Home Page” o “Index Page”, aparece en la parte superior del mapa. Al “Home Page” también se le llama “página madre”, porque es la más alta en los niveles del organigrama y tiene páginas ligadas a ella. Las páginas ligadas al “home page” se llaman “páginas secundarias”. El Mapa del Sitio mostrará la Página de Inicio y la ligas con las páginas secundarias; puede ser dibujada a mano como se muestra a continuación: dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 -mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 4/4
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno Ejemplo. Mapa visto en Dreamweaver Mapa creado por el diseñador Paso 4. Relación de Actividades y Responsables. Consiste en crear una lista de todas las actividades y tareas que se deberán llevar a cabo para la realización del sitio Web, así como también asignar un responsable y fecha límite para llevar a cabo la tarea. Datos requeridos: Descripción de la Tarea - Fecha Límite - Responsable Ejemplo y Formato sugerido Descripción de la Tarea Fecha Límite Responsable Seleccionar el proyecto final autorizado por el maestro 30 Enero Todos Mario Garza Recolectar y organizar la papelería necesaria para el sitio 6 de febrero Lucía De la Rosa Hacer las animaciones en Flash 15 de abril Todos Tomar fotos de la empresa 7 de febrero Esteban Benavides Paso 5. Elaboración del Sitio Web. En este paso se utiliza el mapa del sitio para crear la página Index y sus páginas web secundarias. Una vez creadas las páginas se incluyen los colores, logo, texto, tablas, imágenes, etc. necesarias en el desarrollo del sitio. Paso 6. Probar y modificar las páginas. Una vez que se terminen de crear todas las páginas, es necesario probar el sitio para cerciorarse de que todo el trabajo esté bien hecho. Es importante probar las páginas usando diferente software. Los dos browsers o navegadores más comunes son Microsoft Internet Explorer y Netscape Navigator. Una vez publicado el sitio web, se necesitará mantenerlo actualizado; es decir, modificarlo cada vez que se realiza un cambio, como por ejemplo, insertar un botón nuevo del gráfico a una página. Involucra revisar o hacer pruebas en el sitio otra vez. Probar y modificar las páginas de un sitio Web es un proceso continuo. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 5/5
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 2. VENTANA DE LA APLICACIÓN DREAMWEAVER. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 6/6
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 3. CREACION DE UN SITIO Y SUS PÁGINAS. Al formar los nombres de carpetas y de archivos es recomendable tomar en cuenta lo siguiente: 1. Sólo letras minúsculas. 2. Sin acentos. 3. Sin caracteres especiales. 4. Sin espacios. 5. Para separar texto utilizar solamente el guión o el guión bajo. Para crear un sitio es necesario definir 3 elementos: 1. El nombre del sitio. 2. La carpeta raíz. Para almacenar todos los archivos que componen el sitio como: páginas web, imágenes, animaciones, videos o cualquier archivo que se necesite en el desarrollo del sitio. 3. La carpeta de imágenes por default (debe estar dentro de la carpeta raíz). Pasos para crear un sitio en Dreamweaver. 1. Seleccionar Site del menú principal y luego la opción New Site. 2. Seleccionar la pestaña Advanced. 3. Escribir el nombre del sitio (Ej: “Site Example”). 4. Carpeta raíz: Teclear o buscar la ruta de la carpeta raíz en donde se guardará el sitio. Si se utiliza el buscador, asegurarse que en donde dice “Select:” esté seleccionado el nombre de la carpeta raíz. La carpeta raíz se puede crear en este mismo paso. 5. Carpeta de imágenes: Da clic en el folder amarillo, busca la carpeta raíz y crea una nueva carpeta llamada “images”. 6. Da un clic en Save (esquina inferior derecha de la pantalla). 7. Da un clic a OK en la esquina inferior derecha de la pantalla “site definition” (definición del sitio). Dreamweaver habrá creado el nuevo sitio, y éste aparecerá en el panel de archivos. Asegurar que la carpeta de imágenes se encuentre DENTRO de la carpeta raíz o el sitio no funcionará adecuadamente. Si se requiere hacer cambios a la definición del sitio. Menú Principal > Site > Manage Sites > Edit. Pasos para crear páginas nuevas en un sitio. 1. En el Panel de Archivos, presionar el botón derecho del ratón sobre el nombre del sitio. 2. Seleccionar New File. 3. Modificar “untitled” por el nombre de la página. Asegurarse de no quitar la extensión “.html”, o en su caso agregarla. 4. Teclear enter. 5. Dar un doble clic en el nombre de la página para abrirla y editarla. Nombre de la página principal del sitio. 1. El nombre es conveniente que sea “index.html”, para que al publicar el sitio en Internet, el servidor la reconozca. 2. Si se le pone otro nombre, en el panel de archivos, presionar el botón derecho sobre su nombre y seleccionar “Set as Homepage”. Es recomendable que siempre se establezca la página Index como “HomePage” dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 7/7
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno Título de la página. 1. Es necesario ponerle título a cada una de las páginas, en la caja Title de la Barra de Herramientas del Documento. 2. Este título aparece en la barra azul de navegación al correr el sitio en Internet. Nota. Se debe grabar constantemente los cambios hechos a las páginas para no perder el trabajo. Exportar el sitio. Para que el sitio generado se pueda abrir en cualquier computadora es necesario exportarlo. Esto hará que se genere un archivo con la extensión .STE file. 1. Utilizar Menú Site/Manage Sites/Export. 2. Seleccionar la carpeta raíz. 3. Save. 4. Done. Nota. Sólo si durante el desarrollo del sitio, se hacen cambios a alguno de los 3 elementos para definir un sitio (nombre del sitio, carpeta raíz y carpeta de imágenes) será necesario volver a exportarlo. Importar el sitio Para importar un sitio que ya se generó anteriormente en otra computadora. 1. Utilizar Menú Site/Manage Sites/Import. 2. Buscar dentro de la carpeta raíz, el archivo exportado anteriormente (.STE file). 3. Open. 4. Done. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 8/8
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 4. TEXTO. El texto se agrega a la página y se le aplica formato de texto de acuerdo al inspector de propiedades y a las propiedades de la página, como se muestra a continuación. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 9/9
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 5. IMÁGENES. Para insertar una imagen (sólo archivos .jpg) 1. Grabar la imagen en la carpeta imágenes de la carpeta raíz. 2. Posicionarse en el lugar donde se desea insertar la imagen. 3. Menú Insert/Image. 4. Seleccionar la imagen de la carpeta imagenes. 5. Escribir un texto alterno (texto que da información de la imagen o de la liga asignada). 6. Dar clic en OK. O bien 1. Arrastrar la imagen del Panel de archivos al lugar donde se desea insertar. Es conveniente optimizar el uso de una imagen en Dreamweaver para que sea más rápido y funcional ver el sitio en Internet Explorer. Los 3 pasos para optimizar el uso de una imagen en Dreamweaver son: I. Recortar la imagen. Dejar sólo la parte que nos interesa de la imagen. II. Modificar el tamaño visual de la imagen. Darle el ancho y el alto que se necesita. III. Optimizar el espacio en disco que ocupa la imagen. Es aconsejable que mida menos de 50 kb. NOTA. Antes de optimizar las imágenes es conveniente grabar un respaldo de las imágenes ya que al recortarlas y al optimizar su espacio, se hará directamente sobre el archivo de la imagen y si hay un error no se podrá regresar a su estado original. Es necesario identificar en el inspector de propiedades, los siguientes puntos: a. Espacio en disco ocupado por la imagen Ej: 144k b. Ancho de la imagen Ej. W 269 c. Alto de la imagen Ej: H 188 d. Botón Crop e. Botón Optimize in Fireworks dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 10/10
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno I. Recortar una imagen (sólo se puede en forma de cuadro). Se reduce el espacio ocupado en disco. Si la imagen está muy grande, bajar el % del zoom en la barra de estado, para poder manejar la imagen. a. Seleccionar la imagen. b. Clic al botón crop del Inspector de Propiedades. c. Clic al botón OK, para confirmar que el cambio se hará directamente en el archivo. d. Ajustar el cuadro sobrepuesto para seleccionar sólo la parte que se desea de la imagen. e. Dar doble clic sobre el cuadro sobrepuesto. II. Modificar el tamaño visual de la imagen. No se reduce el espacio ocupado en disco. Hay 3 maneras, pero sólo el tercer método asegura que no se distorsione la imagen. 1. Seleccionar la imagen y modificar directamente el ancho y el alto de la imagen (W, H) en el inspector de propiedades. 2. Arrastrar cualquiera de los puntos de control. 3. Teclar <shift> y al mismo tiempo arrastrar el punto de control inferior derecho. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 11/11
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno III. Optimizar el espacio en disco que ocupa la imagen. Se reduce el espacio ocupado en disco. (Sólo para archivos .jpg) a. Seleccionar la imagen. b. Clic al botón Optimize de Fireworks del Inspector de Propiedades c. Clic al botón Utilizar este archivo, para confirmar que el cambio se hará directamente en el archivo. d. Modificar directamente la calidad. Poner un máximo de 80 y un mínimo de 66. Entre menor sea la calidad menor será el espacio que ocupe en disco. Observar cómo cambia el indicador de kb. e. Clic al botón Actualizar (OK). En este ejemplo la calidad de la imagen es de 80 y el espacio en disco es de 13.97 kb. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 12/12
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 6. LIGAS, ANCLAS, Y HOTSPOTS. 1. Una liga es un hipervínculo, que al dar clic sobre él, permite viajar de la página actual a: a. otra página del mismo sitio. b. un punto específico (ancla), dentro de la página actual, o dentro de otra página del mismo sitio. o c. a otro sitio web (www...) d. a una dirección de correo electrónico. e. a una imagen. 2. La liga se puede poner en: a. Un texto. b. Una imagen. c. Parte de una imagen (hotspot). Este punto se va a ver más adelante, 3. Insertar un ancla. a. Posicionarse en el lugar donde se desea el ancla. b. Menú Insert/Named Anchor (o dar clic sobre el ícono del ancla en la barra de insertar). c. Escribir el nombre del ancla. 4. Liga a una dirección de correo. a. Seleccionar el texto. b. Menú Insert/E-Mail Link. c. Escribir la dirección del correo electrónico en el cuadro E-MAIL. d. Presionar la tecla Ok. 5. Insertar una liga. e. Seleccionar el texto, la imagen o el hotspot. f. Escribir en el apartado link del Inspector de propiedades, el vínculo deseado. g. Presionar la tecla enter. Tipos de ligas. Enlazar a: Link del inspector de Ejemplo del link propiedades Otra página del mismo sitio <nombre de la pagina>.html pagina2.html Un ancla dentro de la página #<nombre del ancla> #inicio actual Un ancla dentro de otra página <nombre de la pagina>#<nombre papel.html#ventajas del mismo sitio del ancla> Otro sitio web http://<direccion web> http://www.google.com.mx Dirección de correo electrónico mailto:<direccion de correo mailto:mgonzalez@gmail.com electrónico> Una imagen <carpeta de imágenes>/<nombre imagenes/piramide- de la imagen> nutricional dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 13/13
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno 6. La ventana en la que se abrirá el vínculo elegido se especifica en el apartado target del inspector de propiedades. Propósito Target del inspector de propiedades Abrir una ventana nueva en el navegador. _blank En la ventana actual _self (es la opción predeterminada) HOTSPOTS. Un HOTSPOT es la selección de una parte de una imagen para asignar una liga o vínculo a otra pagina, ancla, sitio, etc.; el Hotspot se puede visualizar como un área azul transparente sobre la imagen. Se utiliza estas herramientas para seleccionar el área del vínculo. El área del vínculo puede ser un rectángulo, una elipse o un polígono. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 14/14
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno En el caso de un polígono se usa la última de las herramientas de la parte superior y aplicando una serie de clics que rodeen la parte de la imagen con la que se desea vincular a otra página. En el siguiente ejemplo se puede ver el uso de los tipos de HotSpots. 1.- Seleccionar el tipo de HotSpot, por ejemplo el polígono. 2.- El polígono requiere utilizar el mouse para encerrar la oreja del conejo. 3.- Asignar la liga a la página, sitio, etc., en este ejemplo a la página orejas.html 2 3 1 dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 15/15
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 7. TABLAS SENCILLAS Insertar una tabla (Insert/Table) a) Rows (Núm. de renglones). b) Columns (Núm. de columnas). c) Table width – pixels / Percent (Ancho de la tabla en Pixeles o en porcentaje) d) Cell padding (espacio que hay entre el contenido de la celda y el borde de la misma). e) Cell spacing (espacio entre las celdas). f) Border thickness (Ancho del borde en pixeles). Seleccionar algún elemento de la tabla. 1) Seleccionar una tabla. Clic dentro de la tabla y clic en el selector de etiqueta table. 2) Seleccionar un renglón. Clic dentro de la tabla y clic en el selector de etiqueta tr. 3) Seleccionar una columna. Clic en el borde superior de la columna. 4) Seleccionar una celda. Clic dentro de la celda y clic en el selector de etiquetas td. 5) Seleccionar un conjunto de celdas. Clic dentro de la primera celda y arrastrar el mouse hasta la última celda. Modificar propiedades de la tabla utilizando el inspector de propiedades. a) Seleccionar la tabla. b) En el Inspector de Propiedades Table Id. Nombre de la tabla. Rows. Núm. de renglones. Cols. Núm. de columnas. Cell Pad. CellSpace. Align (Alineación): Derecha, Izquierda, Centrada. Brdr color (Color del borde). Bg color (Color de fondo). dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 16/16
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno Modificar el Ancho de columnas. a. Seleccionar la o las columnas. b. En el Inspector de Propiedades. Modificar W Ancho en Pixeles (Ej: 300) o en Porcentaje (Ej: 40%). Insertar renglones o columnas. (Menú Modify/table o clic derecho sobre la tabla/opción Table) Alineación vertical y horizontal del contenido de las celdas. a. Seleccionar las celdas. b. En el Inspector de Propiedades, i. Horz (izquierda, centrada, derecha). ii. Vert (Arriba, en medio. abajo). Combinación de celdas. a. Seleccionar las celdas. b. En el Inspector de Propiedades dar clic al botón merge. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 17/17
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 8. CSS Cascading Style Sheets. CSS son diferentes tipos de formatos que facilita asignarlos como plantillas o “templates” a todos los elementos de una página, por ejemplo tablas, imágenes, texto, ligas, etc. Este estilo se puede utilizar como una plantilla, por ejemplo, se asigna los colores y tipos de texto, colores de fondo, o formatos de las tablas; se definen los formatos una sola vez y se aplican a todas las páginas, en lugar de hacerlos uno por uno en cada página.. Para asignar una nueva regla de CSS. 1.) Posicionar el apuntador del mouse sobre el área 1 como se muestra en la figura. 2.) Seleccionar del sub menú NEW O se puede 1.) Dar un Clic sobre el botón de New CSS Rule 2 1 2 Desplegará la siguiente ventana. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 18/18
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno 1 2 3 1.) Seleccionar en el Selector Type: TAG (redefine el estilo de una etiqueta específica). 2.) Seleccionar una Etiqueta de la lista de TAG, por ejemplo body. 3.) En el cuadro Define In: seleccionar (New Style Sheet File) de la lista. 4.) Guardar el archivo con la nueva regla en un folder llamado css. Esta carpeta se crea con el botón “Create new folder” a. Clic al botón Create New Folder. b. Darle el nombre de css dentro de la carpeta raíz de sitio. c. Asignar el nombre del archivo de estilos de la página. d. Clic en Save. a b c d dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 19/19
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno Mostrará un cuadro de dialogo donde se asigna en formato al texto, fondo, listas, tablas, etc. Se puede agregar más de una regla dando un clic sobre el botón New CSS Rule Se selecciona una etiqueta nueva por ejemplo h1 (Heading 1) que se desea agregar en el archivo de estilo definido anteriormente. Posteriormente se le asignará los formatos a los textos que sean asignados como Heading 1 (h1). dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 20/20
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 9. MARQUEE. Para agregar el elemento “Marquee” o marquesina dentro de un sitio web es necesario escribir código HTML ya que Dreamweaver no tiene un comando o botón que lo realice fácilmente. El Marquee puede ser un texto, imagen o ambos. MARQUEE La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes: behavior = alternate / scroll / slide. Indica si el texto de la marquesina va rebotar de lado a lado en la pantalla (alernate), si va a cruzar la pantalla desaparecer y aparecer de nuevo (scroll) o si va a cruzar la pantalla y al llegar al lado opuesto se detiene (slide). align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = quot;codigo de colorquot; Indica el color del fondo de la marquesina. direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right). height = num o %. Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del navegador. width = num o %. Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del navegador. loop = num / infinite Indica el número de veces que se desplazará el texto por la marquesina. Si se indica “infinite”, se desplazará indefinidamente. scrolldelay = num. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número más lentamente se desplazará el texto. scrollamount = num. Indica la cantidad de texto que se muestra en cada momento en la marquesina. La medida es en pixels. Ejemplo de “marquee”. <marquee behavior=“alternatequot; width=“50%” scrollamount=”10” direction=”left” > Bienvenido a mi pagina personal en Internet. </marquee> Para ver una guía rápida con ejemplos interactivos visitar la página http://crismattweb.tripod.com/guiahtml/marquee.html dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 21/21
  • PREPARATORIA POLITECNICA SANTA CATARINA ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS DISEÑO DE SITIOS WEB Manual del Alumno TEMA 10. IMAGEN ROLLOVER. Un ROLLOVER es una imagen que se cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarse a través de distintas páginas. Insertar un ROLLOVER. 1.) Clic al Menú Insert Image Objects Rollover image. En la nueva ventana se especifica la imagen original y la de sustitución. 2.) Es preferible que la opción Carga previa de imagen de sustitución (Preload rollover image) esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. 3.) El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador. 4.) El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada. dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9 22/22