Crear una web docente departamental |
con Dreamweaver (MX 2004) |
1. Definir un sitio web |
Es, sin duda, el primer paso con DW. Desde Sitio > Administrar sitios > Nuevo - Sitio  |
P. Básicas |
|
 Asignar nombre al sitio web local. Se trata de asignar un nombre interno. |
| Tecnología de Servidor (no) |
Editar copias locales en mi equipo y luego cargarlas y Ubicación local de archivos. Es imprescindible saber donde se colocarán nuestros archivos. Normalmente en Mis documentos > Mis Webs.
Por defecto DW crea una carpeta con el mismo nombre del sitio local asignado. |
Conexión con el servidor (transferencia de archivos) Inicialmente Ninguno.
Si tenemos una conexión FTP podemos colocar los datos (sólo tres, servidor, usuario y contraseña)
Al final tenemos la posibilidad de realizar una Conexión de prueba. |
Activar protección y desprotección (no). |
P. Avanzadas |
| Datos locales / Datos remotos / Servidor de prueba / Ocultación / Design Notes / Mapa de diseño del sitio / Columnas vista archivo / Contribute |
Publicar el sitio (servidor + dirección URL + sistema transferencia):
Alojamiento para este curso gratis en Lycos a cambio de propaganda: http://usuarios.lycos.es/mvh
Servidor FTP: ftp.usuarios.lycos.es, Usuario: mvh, Contraseña: ****** |
| |
2. Primera página web |
| Crear una nueva página |
 Archivo / Nuevo / General / Página básica /html |
| Creamos una página de Bienvenida. Encabezados, color de fondo, alguna imagen. |
| La guardamos como "index.htm" en un sitio que previamente hayamos creado (ej. prueba_xxx) |
| Cerramos DW. Abrimos de nuevo DW y en el sitio "prueba xxx" abrimos "index.htm. |
| Visitamos el código fuente de la página desde "Ver / Código" o desde "Paleta Documento / Código" |
| Pulsando F12 o Ctrl+F12 obtenemos las vistas previas en los navegadores principal y secundario. |
| |
3. Escritorio y área de trabajo |
| Paletas y Ventanas (se activan y desactivan desde menú Ventana) |
 Paleta Insertar (Grupos: común, diseño, formularios, texto, html, aplicación, elementos Flash ). |
| Paleta Documento. Vistas (código, dividir, diseño). Título. Otros (interesante "Ver opciones"). |
| Paleta Estándar (no). Abrir, guardar, copiar, .... |
| Paleta Propiedades (abajo). Propiedades variables según objeto. Incluye vínculos y propiedades de página. |
| Paleta Resultados (bajo propiedades). Se activa con peticiones de informes, verificación, validación) |
| Ventana Diseño (estilos css y capas) |
| Ventana Código (fragmentos y referencia) |
| Ventana Aplicación (bases de datos, vinculaciones, comportamientos del servidor, componentes) |
| Ventana Inspector de etiquetas (atributos, comportamientos, css relevante ) |
| Ventana Archivos (archivos, activos) |
| Ventana Marcos |
| Ventana Historial |
| Ventana Inspector de código (flotante) |
| Paleta de Propiedades |
|
Formato texto (formato, fuente, estilo, tamaño, justificar, listas ordenadas, sangrías, vínculos, destino) |
Formato tabla (celda, horizontal, vertical, ancho, alto, no ajustar, fondo, borde, propiedades página) |
Formato imagen ( ancho, alto, origen, vínculo, texto alternativo, clase, edición imagen, mapa zona interactiva, espacio V, espacio H, destino, borde, origen, alinear) |
| Propiedades de página |
Aspecto (fuente, tamaño, color fondo, márgenes) |
Vínculos (fuente, tamaño, color, estilo) |
Encabezados (h1, h2, h3, h4, h5, h6) |
Título/codificación (título, codificación) |
Imagen de rastreo (imagen, transparencia)
|
| |
4. Volviendo a nuestra primera página |
 Insertar tablas (tablas) |
| Insertar texto (tipografías html) |
| Insertar imagen (gráficos e imágenes html) |
Imagen de sustitución ( ejemplo1) Común -> Insertar Imagen de sustitución. |
|
Botón Flash (ejemplo) Común -> Media-> Botón Flash (también se inserta Texto Flash)
|
Antes de empezar con el estudio de los hipervínculos y todas sus posibilidades conviene tener unas nociones generales del código fuente de nuestros documentos html, es decir una pequeña
Introducción al lenguaje html.
Y aclarar algunas cuestiones generales sobre los Hipervínculos, tipos, destino, vínculos rotos |
Insertar hipervínculos con direcciones absolutas -> Ventana propiedades (Vínculo: http://ww............... )
o con Paleta Insertar -> Común ->  |
Insertar hipervínculos con direcciones relativas. Vínculo: graficos.htm o ../index.htm. o ../../index.htm
(niveles en la estructura de la web) |
| Insertar capas. El diseño con tablas suele ir acompañado de capas como elementos contenedores. Pero capas sólo con posición absoluta. (capas) |
| Trabajo con Comportamientos, Acciones y Eventos. El nanejo de capas suele acompañarse con el de Comportamientos (JavaScrip incorporados al Programa) |
Manejo de las plantillas como instrumento de repetición de elementos comunes de una página
en otras (plantillas) |
| El trabajo con los colores desde el propio editor o desde programas o sitios web externos (colores) |
Lo más novedoso y avanzado en el diseño web es el empleo de hojas de estilo y clases para dar a las páginas un aspecto "profesional" independiente del navegador que facilite la información web
Veamos por orden hojas de estilo css > usos css > clases css > estilos de enlaces css. |
Por último te puedes descargar en formato zip una plantilla de diseño de sitios web de departamento: Plantilla.zip | Winzip 9.0 |
|
