Modulo 5:e- LIFE Diseño Web

Transcripción

1 Modulo 5:e- LIFE Diseño Web e-life E-LEARNING VIRTUAL CENTER FOR PEOPLE WITH PHYSICAL DISABILITIES Este proyecto ha sido financiado con apoyo de la Comisión Europea. Este publicación refleja los puntos de vista del autor y la Comisión Europea no puede ser considerada responsable del uso que se haga de la información contenida aquí.

2 TABLA DE CONTENIDOS 1. DESCRIPCION DEL MODULO INTRODUCCION CONCEPTOS BASICOS Primer paso: Definir objetivos Formular una idea Diseño de pagina web Estructura de la pagina web CONSTRUYENDO TU SITIO WEB USANDO JOOMLA! Joomla! Hechos y múmeros: Porqué usarlo? Cómo construir una pagina web usando Joomla Paso 1: Cómo planificar un sitio Joomla Paso 2: Cómo instalar Joomla con JSAS o Fantastico Paso 3 : Construyendo y gestionando contenidos en tu sitio web Joomla Paso 4: Moviendo tu sitio Joomla desde JSAS a un servidor Web HERRAMIENTAS Y RECURSOS UTILES PARA CONSTRUIR FINALIZAR Y MANTENER SU SITIO WEB Alojamiento web gratuito Alojamiento de pago.sugerencias Nombre virtual de dominio Escogiendo tu nombre de dominio Subir la pagina web Promover la página web Controlar el tráfico web Generar ingresos Evolución de la página web Mercado global de trabajo Asociarse para triunfar Web Analytics Creando banners Comprobar enlaces Directorios Busqueda de nombres de dominio Adquisición de dominios Busqueda de la competencia Page Hit Trackers Guias de programación DREAMWEAVER CS Explorando Dreamweaver Creando un documento Probando nuestro sitio web Creando definiciones para el sitio web Dreamweaver y texto Dreamweaver e imágenes /71

3 Insertando fotos en Dreamweaver a través del sistema de archivos Imagenes y texto alternativo Almacen de imagenes Insertando películas Flash Estructurando los contenidos de nuestra página web La vista HTML y CSS del inspector de propiedades Párrafos, cabeceras y texto pre-formateado Menu de estilos Tablas INTRODUCCION A LA ANIMACION CON FLASH Fotogramas clave y la linea de tiempo Capas Fotogrmas yfoto gramas clave Interpolar capas y fotogramas clave automáticos Acciones marco Haciendo animaciones más suaves REFERENCIAS /71

4 1. DESCRIPCION DEL MODULO TITULO DEL MODULO Creando Websites - Principios y guía básicos de diseño CODIGO VAT2 PALABRAS CLAVE Website, diseño, destrezas básicas, estructura página web, Joomla!, instalación, web host, dominio, upload, promoción, tráfico web, banners, Dreamweaver, html DESTINATARIOS Los destinatarios del modulo son personas con discapacidad física que buscan oportunidades para entrar y/o mantener el contacto con el mercado virtual de trabajo NIVEL Medio OPORTUNIDADES PROFESIONALES Trabajadores independientes altamente especializados que realizan una serie de servicios administrativos y de servicios a la empresa OBJETIVOS DEL MODULO Esta guía ofrece instrucciones generales a personas que quieran construir ellos mismos una página web o con una minima asistencia profesional, con el objetivo de poner en marcha su propio negocio. La guía esta estructurada para que pueda facilmente construir su página web sin conocimientos técnicos previos en diseño de paginas web, además ofrce información sobre otros recursos para que pueda crearla de manera efcitiva y exitosa. El principal sistema de gestión de contenidos (CMS) de esta guía es Jommla. El sistema de gestión de contenidos (CMS) te proporciona un marco completo de una pagina web y te permite gestionarla de forma profesional y con un mínimo esfuerzo. Tuy principal trabajo será introducir los contenidos (texto, imagenes, videos). Al finalizar de forma exitosa el módulo los alumnos 4/71

5 RESULTADOS FORMATIVOS aprenderán a; 1. Definir sus objetivos y planificar el sitio web 2. Construir su sitio web 3. Localizar un sitio de alojameineto web adceuado 4. Vender y promocionar su sitio web 5. Controlar, evaluar, y mantenert su sitio web PRE-REQUISITOS (DESTREZAS): uso de tecnologias basicas de información y comunicación (TIC), uso básico de HTML y uso basico CSS (Cascading Stile Sheet - Hoja de estilos en cascada) PRE-REQUISITOS: Ninguno DURACION: 20 horas COMPETENCIA Crear, implementar, gestionar y mantener paginas maintain effective websites for business EVALUACION La evaluación consistirá en un test de respuestas múltiples. Cada test contendrá preguntas con varias respuestas que evaluarán el conocimiento de los participantes. CATEGORIA coste (optimización de costes) tiempo (gestión eficinete del tiempo) s-quality (calidad en el servicio) m-quality (calidad en la gestión) MATERIALES SUPLEMENTARIOS Ninguno 5/71

6 2. INTRODUCTION Estimado participantes, Bienvenido a este módulo! Este módulo ofrece instrucciones generales a personas que quieran construir ellos mismos su pagina web, o con una asistencia profesional mínima, con el proposito de poner en marcha su propio negocio. La guía esta estructurada para que pueda facilmente construir su página web sin conocimientos técnicos previos en diseño de paginas web, además ofrece información sobre otros recursos para que pueda crearla de manera efectiva y exitosa. El principal sistema de gestión de contenidos (CMS) de esta guía es Jommla. El sistema de gestión de contenidos (CMS) te proporciona un marco completo de una pagina web y te permite gestionarla de forma profesional y con un mínimo esfuerzo. Tu principal trabajo será introducir los contenidos (texto, imágenes, videos). Saludos, El equipo e-life 6/71

7 3. CONCEPTOS BASICOS 3.1. Primer paso: Definir objetivos Antes de empezar a diseñar una página web es importante que tus objetivos esten claros. Tus objetivos deberían determinar los contenidos y el diseño de tu sitio web. Mucha gente construye páginas web como un hobby, simplemente para su desarrollo personal. En este módulo de todas formas nos centraremos en la construcción de una pagina web por motivos profesionales, para iniciar tu propio negocio desde casa. Hay tambien un potencial para generar recursos desde las páginas web que diseñes. Esto se hace publicando paginas interesantes que atraigan a un gran número de visitantes y poder vender espacio para anuncios de bienes u otros servicios. Objetivos clave en los que deberias centrarte en la planificación inicial: 1. Crear una lista de comprobación 2. Establecer si necesitasa yuda, o podrás hacerlo solo 3. Tecnologia y conocimientos necesarios 4. Establecer tu presupuesto y tus previsiones 3.2. Formular una idea Para crear una pagina web popular y comercialmente viable, necesitas definir una buena idea o tema para la página. El tema de tu web debería ser algo en lo que estes interesado. No necesitas ser un experto en dicho tema. Sin embargo deberias poseer un conocimiento mas avanzado sobre el tema que el resto de las personas. El tema de tu página web debería ser algo relacionado con el trabajo y el asunto no tiene que ser de interes general. De hecho, el exito puede vernir de un tema especializado, donde tus competidores seran menos numerosos. Puedes iniciar tu sitio web localizando un nicho de mercado y a partir de ahí hacer crecer el sitio parta atrare a una audiencia mayor. Recuerda siempre que tu audiencia potencial es global y no está limitada a tu comunidad o tu país 3.3. Diseño página web El primer paso es determinat lo que quieres publicar y cuales serán los destinatarios, el proximo paso es determinar el tono y el diseño de tu página web. Piensa en su apariencia: Debería ser informal, profesional o de alta tecnología? Usarás graficos, animación o música? Cómo se estructurará el texto y cúal sera el tipo de letra? Cómo navegarán los visitantes por la página? Para cualquier cosa que decidas trata de mantener los mismos modelos en toda la página. 7/71

8 La parte más importante de tu sitio web es el contenido en texto. Lo que escribas proprocionar un valor añadido y hacer que el visitante quiera volver. Revisa los ojetivos de tu pagina web y tus destinatarios de modo que el mensaje llege a tu audiencia. No olvides revisar la ortografía y la gramática antes d epublicar tu página web. Publicar en la red es diferente de escribir en un periodico, ya que puedes aprovecharte de las recursos multimedia. Fotos, gráficos, musica y video pyeden hacer interesante tu sitio. De todas formas ten cuidado en no sobrecargar las páginas. Los gráficos por ejemplo son ficheros grandes que necesitan tiempo para ser descargados. La mayor parte de las personas no esperan un espacio de tiempo grande para que se cargue una página. El objetivo es producir todos los contenidos y una programación funcional. Esto incluye: - Texto, editado y revisadio - Especificaciones de diseño gráfico para todas las páginas (interfaz grafica, plantillas de paginas, encabezamientos, logos, botones) - Compilacioens detalladas de páginas o ejemplos finalizados de páginas claves - Diseño de la interfaz - Ilustraciones y fotografia Componentes lógicos y funcionales: - Tablas de datos y programación - Buscador diseñado y comprobado 3.4. Estructura de la página web Es importante mantener una consistencia estructural en toda la página web. Cada página deberia tener al menos un encabezamiento y un menú de navegación común. Hay dos método para estructurar las paginas web: usando "tablas" or "divisiones" (div. tags). Puedes encontrar gráficos para tu página d einicio en la red, buscando: - Index of GIF files - GIF library Cuando encuentres algo que te guste, copialo a tu disco duro, hacienda click en el boton derecho de tu raton y seleccionando "guardar como". Para encontrar música adecuada, busca:"midi" y el nombre del cantante o compositor. Los nombres de estos ficheros terminan en ".gif" y ".mid". Si sopechas que un gráfico o una canción tiene derechos de copyright, debes pedir persmiso al propietario de los dercehos antes de usarlo. El éxito de tu página web dependerá de tu habilidad para organizar la información y esto implica categorizar. Las formas fundamentales de organizar la información son las siguientes: 1. Alfabética: Es el esquema más lógico de organización, basado en la letra inicial de los nombres. Ejemplos de esto son las guías de teléfono y otros directories. Los sístemas alfabéticos son simples y comunes en la vida diaria. 8/71

9 2. Cronológica: La organización cronológica presenta los aconteciomientos de una manera ordenada por tiempo. A menudo este esquema es usado en formación, y en temas como automoviles, antiguedades y vinos. 3. Categoria:Organización en function de la similitud de caracteristicas de los registros. Particularmente útil cuando tos las cosas que deben organizarse son iguales o tienen una importancia que no puede ser predicha. Por ejemplo, libros en una librería o biblioteca. 4. Geografica:Organizada por factores espaciales o geográficos. Esta es la forma de organziación más usada para sitios relacionads con la jardinería,inmobiliarias o viajes. Es también importante cuando la situación es un factor importante para la compra 5. Orientado a procesos: Requiere que los resultados sean ordenados siguiendo un proceso. Por ejemplo, elegir una casa, encontrar un vendedor, escoger una hipoteca. La organziación incluye los pasos que un cliente debe seguir. 6. Temas: Más complicada que la primera opción. Requiere diseñar esquemas de organización con limites a la anchura de los contenidos. Tabla 1: Esto es un ejemplo de como la categorización funciona, y su importancia a la hora de navegar 1. Desorganziada/Al azar 2. Alfabética 3. Temac + Alfabética Regalos Niño Entretenimiento Nombre escuela Cama + Baño Musica/Películas/Libros Cama + Baño Autozrización Deportes Muebles del hogar Ropa Moda + Estilo Oficinas del hogar Electronica Accessorieos, Joyeria Cocina Regalos Belleza, Salud Niño Salud + Belleza Ropa Ropa Muebles del hogar Equipake Joyeria+ Accesorios Oficinas del hogar Hogar Salud + Beauty Joyeria + Accessorios Cama + Baño Juguetes Cocina Electronica Electronica Musica/Películas/Libros Muebles Musica/Pelliculas/Libros Tiempo de colegio Cocina Deportes + Equipaje Deportes + Equipaje Oficina Autorización Juguetes Niños Niños Tiempo de colegio Regalos Regalos Ofertas 9/71

10 4. CONSTRUYENDO TU SITIO WEB USANDO JOOMLA! 4.1. Joomla! Hechos y numeros: Porqué usarlo? - Joomla produce contenidos dinámicos Joomla tiene su propia forma de organizar los contenidos, de esta forma es más fácil navegar. A medida que aprendas, las cosas serán más fáciles. - Joomla usa Plantillas: Con el uso de plantillas todas las págionas tienen un aspecto consistente. Puedes cambiar fácilmente las plantillas sin cambiar el código. Una vez que te familiarizes con Joomla podrás crear tus propias plantillas. - Adapta los modulos hasta obtener el resultado que quieras. Joomla usa modulos, que pueden ser publicados o no, movidos a diferentes posiciones en una página y adaptados hasta que tu página adquiera el aspecto que quieres. - Editor de contenidos integrado: Al igual que con cualquier otro editor con características avanzadas puedes insertar texto, tablas y fotos. Los cambios se muestran al instante 4.2. Cómo contruir un sitio web usando Joomla! Esta guía te permitirá aprender todo lo que necesitas saber para construir tu propia página web usando Joomla!, desde la instalación a la publicación. La guía se organiza en cuatro pasos: Paso 1 Cómo planificar un sitio Joomla Paso 2 Instalando Joomla Paso 3 Construyendo y gestionando los contenidos en tu sitio web Paso 4 Subiendo y publicando tu sitio Joomla Paso 1: Cómo planificar un sitio Joomla! La primera regla es crear contenidos interesantes para tus visitantes. Preguntate a ti mismo para quién es la página, quíen va a usarla o leerla. Que obtendrán tus visitantes? Coge una hoja en blanco y escribe todo lo que te venga a la mente acerca de tu página web, escribe etiquetas o temas que quieras abordar en tu página. Estructurando tu sitio web Joomla El desarrollo de un sitio web Joomla es una parte importante del proceso. Crea una table en Word o Excel con cinco o más columnas. 1ª columna representa secciones 2ª columna representa categoriss 3ª columna representa contenidos 10/71

11 4ª columna es para hacer los contenidos (blog/list of items/single item/static content) 5ª columna se reserve para los títulos. Ahora coge el papel que has usado para la tormenta de ideas y comienza a organziar los contenidos en secciones y categorias. Mueveleso hasta que este satisfecho. Deberia ser algo como esto: Secciones Categorias Contenidos Articulos Contenidos tipos Titulos Productos Para hombres Lista de articulos Producto 1 Zapatos negros Producto 2 Zapatos marrones Para mujeres Lista de artículos Servicios Acerca de nosostros Contenidos estáticos Joomla Diseño y Navegación Dónde debo colocar los menus? Cómo debe ser el diseño? Piensa como quieras que sea el aspecto de tu página web. Algunas opciones: Diseño Opcion 1 Diseño más común de página web :navegación en la izquierda y contenidos en la derecha. Diseño Opción Otra opción. Navegacion arriba, contenidos abajo con algunas columnas, que debe tener el aspecto de un portal. Diseño Opcion 3 Otra opción: Navegación dividida entre izquierda y arriba, el centro para contenidos, y una columna a la derecha para anuncios. 11/71

12 Interactividad Joomla es un constructor de sitios web dinamico y tiene components integrados que hacen tu sitio interactivo. Cuando desarrolles tu sitio puedes mejorarlo con numerosos add-ons and extensions disponibles en la págiba web de Joomla. Define qué es lo que quieres ofrecer Debes estar seguro acerca de lo que quieres ofrecer a tus visitantes, puede ser por ejemplo, calendarios, galerías de fotos y/o otras funciones avanzadas. Existen muchas extensiones disponibles y una ampia variedad de elección. Después de este paso deberia tener un imagen clara acerca de tu sitio web: una tabla detallada con la estructura de la página web y una idea acerca del diseño. Es hora de instalar Joomla y de empezar a hacer que las cosas funcionen Paso 2: Como instalar Jomla con JSAS o Fantastico Requisitos mínimos para Joomla: * PHP 4.2.x or above - * MySQL 3.23.x or above - * Apache or above - No te preocupes si nunc a has oido esto antes. Todo lo que debes saber es si tu Web Host soporta Joomla. Hosting Residence ofrece auto isntalción de Joomla Auto. Instalando Joomla localmente con JSAS EStas instruccioens son para Windows XP. Usaremos g JSAS - Joomla Stand Alone Server para instalar Joomla en nuestro ordenador C. 1. Ve a y descarga el paquete de instalación de JSAS a tu ordenador. 2. Ejecta el fichero que has descargado y sigue los pasos. 3. Una vez que JSAS este instalado, tendrás las herramientas que necesitas para arrancar Joomla en tu ordenador. 4. Ahora abre JSAS con el icono que estaá en tu escritorio del ordenador. 5. Una nueva ventana se abrirá con instrucciones para crear un sitio web Joomla con JSAS. 6. Ve a Joomla Pre-installation y comprueba para finalizar la instalación. 12/71

13 Joomla Fantastico Procedimiento de instalación En primer lugar, asegúrate de que Web Host dispone de Fantastico u otro cliente de auto instalación habilitado. 1. Inicia sesión en el panel de control de tu hosting. 2. Encuentra Fantastico Icon y haz click. 3. Encuentra Joomla y haz click. Habrá muchas aplicaciones disponibles para instalar. Busca CMS o algo similar. 4. El próximo paso es encontrar CMS (Content Managemnt System) 5. Define la ruta de instalación. Cuando hagas clcik debe haber algunos ajustes. Asegúrate que la ruta de instalación de Joomla es raiz (esto significa que Joomla se instalara en tu web 13/71

14 y no en ww.yoursite.com/applications/joomla/). 6. Escoge un nombre de administrador y una contraseña y escribelos en una hoja de papel. 7. Rellena tu y el nombre del sitio. 8. Una vez que has rellenado todos los detalles, haz click en Instalar. Has acabado Joomla está instalado. Joomla comprobación Pre-Instalación Cuando inicias Joomla Site la primera vez, debes ir a un asistente y rellenar los nombres de usuario y contraseñas. Si estas usando JSAS obtienes esa información en la última pantalla de la instalación de Joomla, si lo estas instalando en um servidor web, obtendrás esa información de tu servidor o en Fantastico una vez instalado Joomla. 1. Ve a tu pagina de Joomla. Si estas usando JSAS, abrelo y selecciona que sitio Joomla quieres iniciar. Si estas online, ve a tu la pagina de inicio: (asegúrate de que lo has instalado de forma correcta). 2. Deberias ver ahora la pagina de Pre-installation generada por Joomla. 14/71

15 Asegurate de que todo en la columna de la derecha está en verde. Haz click en siguiente. 3. Otra pantalla con licencia aparece. Han click en siguiente. 4. Ahora se te pide que rellenes tus detalles. 5. Toma un trozo de papel ye introduce los siguiente: o Nombre del servidor o MySql usuario o MySql contraseña o MySql nombre base de datos 6. Joomla te pedirá que confirmes los ajustes. Haz click en ok. 15/71

16 7. Si has introducido los parámetros correctamente se te pedirá que introduzcas el nombre de tu sitio. 8. Una nueva ventana aparece. Introduce el nombre de dominio, y contraseña. Asegurate de que escribes todo en un trozo de papel!! 9. Joomla esta instalado. De todas formas, debes hacer una cosa mas antes de conectarte. 10. Tienes que borrar un fichero llamado instalación en tu sitio Joomla. Atención! No borres el sitio Joomla entero. 11. Ve a tu administrador de ficheros (si estas usando JSAS) o tu programa FTP (si tu Joomla está online) y ve al fichero creado en el paso 6. Felicidades! Ahora puedes iniciar sesión por primera vez Paso 3: Construyendo y gestionado contenidos en tu sitio web Joomla Joomla organiza los contenidos de manera diferente a como están organizados en un sitio HTML. La principal diferencia es que las paginas web en Joomla no existen. Que significa esto? Significa que tecnicamente existen menus y modulos, que estan indexados a menus. Entoces, cada pagina web Joomla que ves en tu buscador es compilada desde una base de datos. Este tipo de organziación da a Joomla distintas ventajas, y te permite hacer mas cosas en menos tiempo. Añadamos ahora algunos contenidos a nuestro sitio Joomla. Gestionando contenidos. Añadir Secciones y Categorias Joomla organiza los contenidos en secciones, en esas secciones hay categorias y dentro de esas categorias hay articulos. 16/71

17 Añadiendo una sección 1. Ahora vamos a usar la table que hiciste en el paso 1: Planificando un sitio Joomla. 2. Inicia sesion en panel de control (administration area). 3. Ve a Contenidos, y selecciona Gestor de Secciones 4. Haz click en el icono Nuevo para crear una nueva secion. 5. En el campo Titulo introduce el nombre d etusección (solo será visto por ti). 6. En el campo Seccion introduce el nombre que quieres que vean los visitantes. 7. Haz click en Guardar. Ahora tenemos una nueva sección. Pero necesitamos crear al menos una categoría para nuestra sección. Añadiendo una categoria 1. Ve a Contenidos, y selecciona Gestor de categorias 2. Haz click en el icono Nuevo para crear una Nueva Categoria 3. En el campo Titulo introduzca el nombre de tu categair awue solo sera vista por ti 17/71

18 dministrator area. 4. En el campo Categoria introduzca el nombre que veran los visitants. 5. Hay un menu llamado Seccion. Seleccione en que sección quieres crear la nueva categoria. 6. Haz click en guarder. Ahora tenemos una nueva categoria. Nota: Las secciones y las categorias no son visible directamente en tu sitio Joomla. Lee abajo como crear artículos. Gestionando contenidos. Añadiendo artículos. Los artículos son similares a las páginas HTML. Para crearlos: 1. Ve a Contenidos, y selecciona Gestor de Artículos 2. Haz click en Nuevo Artícluo 3. Introduce el título de tu nuevo artículo 4. Selecciona la sección y la categoria donde queires que tu articulo esta ubicado. 5. Añade una introducción y algún texto. Gestionando contenidos y adaptando la página principal de Joomla Todos los contenidos pueden ser configurados para que se muestren en la página principal. Puedes hacerlo de la siguiente forma a crear ahora un nuevo menú en este panel. 1. Ve a Panel de control y selecciona Gestor de Menus 2. Para cada artículo puedes elegir si publicarlo ono en la página principal. Haz click en la cruz roja o verde. 3. Una vez que haya artículos publicados puedes adaptarlos y establecer un orden, yendo a Contenidos y Gestor de artículos 4. Haz click en NUEVO. Se abre una página con diferentes opciones y botones buttons. 18/71

19 5. Dado que queremos crear un enlace a un menu individual, seleciconados: Enlace - Artículo. Hacemos click. 6. Ahora introduce el nombre del menu tal y como quieres que aparezca en tu página de inicio. 7. Selecciona el artículo donde quieras que el menu esta dirigido. 8. Guardar. Gestionando contenidos. Añadir un menu de entrada para una lista de articulos Tus categorias pueden albergar diferentes artículos. Puedes añadir una entrada d emenu para una categoria entera de artículos. 1. Ve a menu, selecciona Gestor de Menus 19/71

20 2. Encuentra menu principal y haz click en Opciones Menu 3. Haz click en Nuevo Una página se abre con diferenets opcioens y botones. 4. Ahora crearemos un enlace a Artículos Haz click en Blog-Content Category. 5. Ahora introduce el nombre del menu como quieras que aparezca en la página de inicio. 6. Selecciona una o varias categorias donde queireas que el menu este situado. 7. Guardar Gestionando contenidos. Añadiendo contenidos estáticos Como siempre hay excepciones. Dijimos antes que los contenidos deben ser organizados en seccioens y categorias. De todas formas esto no es verdad para los contenidos estáticos. Los contenidos estáticos son similares a los articulos con la diferencia de que no pertenecen a ninguna sección o categoría. Son independientes. Paa crear contenidos estaticos: 1. Ve a Contenidos, y selecciona Gestor Contenidos Estático. 2. Haz click en el icono Nuevo. 3. Introduce un título 4. Introduce el texto. 5. Guardar Antes de que puedas verlo, tienes que añadir una nueva entrada de menú. Es similar al ejemplo de arriba (Añadiendo una entrada de menu a un artículo). La diferencia es que en este caso selecciona Enlace a Contenido Estático en lugar de Enlace a artículos. Eso es todo. Gestionando contenidos. Eliminado artículos. Joomla tiene algunos artículos que pueden no tener cabida en tu pagina web. Para borrarlos 1. Ve a contenidos, y selecciona Todos los articulos. 20/71

21 2. Señala los articulos que quieras borrar. 3. Haz click en el icono Papelera. Gestionando contenidos. Adaptando la pagina principal de Joomla Todos los articulos pueden ser configurados para ser mostrados en la pagina principal. Puedes adaptarlos de la siguiente manera: 1. Ve a Contenidos, y selecciona Todos los articulos. 2. Para cada articulo puedes establecer si es o no publicado en la pagina principal, marcando la posición de cada articulo. 3. Hay algunos artículos que puedes adaptar y establecer el orden de aparición, yendo a Contenidos, y seleccionando Gestor de la Pagina de inicio Paso 4: Moviendo tu sitio Joomla desde JSAS a un servidor web Preparando tu cuenta de almacenamiento web 1. Instala una copia de Joomla a tu servidor. 2. Cuando hayas acabadoi puedes ver un sitio Joomla predeterminado online, ve alli y continua. Subiendo tu sitio local a un servidor web 1. Abre tu FTP. 21/71

22 2. Conéctate a tu servidor (Contacta conb tu servidor para el nombre de usuario y contraseña). 3. Veras dos secciones.una es la de tus archives locales, la otra para ficheros online 4. En la sección local dirigete a tiu página web in el fichero Joomla Stand Alone Server de tu disco duro. Habitualmente esta localziado en in C:\Program Files\JSAS\http_root\www\xxx nombre de tu pagina web. 5. Si ves los ficheros administrador,cache, componentes estas en la carpeta buena. 6. Ahora que tienes las dos secciones listas, selecciona todos los ficheros locales excepto configuración.php 7. Sube los archivos al servidor. Exportando la base de datos de Joomla con PHP MyAdmin 1. Abre JSAS y haz click en el icono de administración. A la derecha se te abrirán varias opciones 22/71

23 2. Haz click en PHP MyAdmin para arrancarlo. 3. Desde la izquierda selecciona la base de datos que quieres exportar. 4. Haz click en Exportar. 5. Ahora tienes que seleccionar que tablas quieres exportar. Haz Click en Seleccionar Todas.Se colorearán una vez seleccionadas. 6. Comprueba Add Drop Table. 7. Selecciona Guardar como y haz click en OK. 8. Guardalo en tu disco duro. Importando la base de datos de Joomla al servidor web con PHP MyAdmin 1. Abre PHP MyAdmin en tu servidor (debe estar en el panel de control). 2. A la izquierda selecciona la base de datos que queiers exportar. 3. Haz click en Importar. 23/71

24 4. Busca el fichero.sql que has guardado en tu disco duro (en tu base de datos). 5. Haz click en OK. 6. Tu base de datos ya está importada. Compruena tu sitio. Debe trabajar ahora en modo online. Ya has creado tu página web usando Joomla! 24/71

25 5. HERRAMIENTAS Y RECURSOS UTILES DE AYUDA PARA CONSTRUIR, FINALIZAR Y MANTENER TU SITIO WEB 5.1. Alojamiento Web gratuito Muchas compañías ofrecen servicios de alojamiento web gratis. Esto incluye espacio de almacenamiento gratuito en un servidor web, las herramientas básicas para construir un sitio, una dirección de correo electrónico gratis y otros regalos. La mayoría de las empresas de hosting requiere que usted exhiba una pancarta en la parte superior de cada una de sus páginas. Muchos de ellos también restringen el uso de un nombre de dominio que usted posee o va a comprar. Si estas restricciones son demasiado restrictivas para sus necesidades, considere la compra de servicios de hosting a bajo coste. Sugerencias de alojamiento web gratuito: Sitios Google Google proporciona services de alojamiento web gratuitos para sus clientes en Google Sites. Ellos proporcionan una serie de plantillas para ayudarte a comenzar. Fotos, videos, "gadgets" y otros contenidos pueden ser facilmente añadicos. Los sitios pueden ser públicos o privados. Servidores gratuitos FeeServers.com proporciona 20 MB de espacio gratuito web. Si posees a ".com" o un nombre internacional de dominio (por ejemplo ".ca", ".uk"), FreeServers lo alojara de forma gratuita Alojamiento de pago. Sugerencias. En lugar de utilizar un servicio de alojamiento web gratuito y tener que mostrar los anuncios de banner en cada una de sus páginas web, usted puede optar por alquilar el espacio del servidor web de una de las empresas de alojamiento web. Miles de empresas en todo el mundo ofrecen una gran variedad de servicios web, y los costos varían de manera significativa. Antes de decidirse por un proveedor de servicio de alojamiento web, considere las siguientes preguntas: 1. Proporciona el servidor un servicio adecuado? 2. Soporta el software de base de datos que utiliza? 3. Proporiciona buen apoyo tecnico en tiempo reducido? 4. Proporciona servicios para la industria? 5. Cuanto espacio de almacenamiento y ancho de banda sera requerido? 25/71

26 6. Sera suficinte un servidor virtual? 7. Dados su requerimientos, qué paquetes están disponibles? Lo más importante es conocer sus necesidades particulares y seleccionar un proveedor de alojamiento web en consecuencia. No pague por servicios que no necesitan y monitoree el rendimiento del servidor regularmente Nombres de dominios virtuales Un nombre de dominio es único para Vd asi la gente puede ver tu sitio web en internet. Un nombre de dominio es la única deriección que puede usarse en internet. Es lo que se ve después de la " en su navegador y es lo que viene después del en su correo electrónico. Si usted ya tiene un nombre de dominio usted puede utilizar eso también. Las direcciones de internet fáciles de recordar son una mercancía valiosa que puede ser comprada y vendida. Afortunadamente, muchas buenas direcciones de Internet están todavía disponibles. Por ejemplo, facebook.com es fresco y pegadizo y no tiene nada que hacer con la red social. Siempre ten en mente las siguientes carateristicas acerca de tu dominio. Hazlo simple Registra un dominio.com cuando sea posible. Hazlo corto Registralo para al menos 2 años Algunas empresas de alojamiento web ofrecen un nombre de dominio virtual con poco o ningún costo, siempre que utilice sus servicios de alojamiento web Escogiendo tu nombre de dominio Si usted desea tener una presencia en la web, su nombre de dominio es una de las decisiones más importantes que tendrá que hacer. Su nombre de dominio debe hacer las cosas fáciles para que la gente encuentre su sitio. La regla de oro es mantener el nombre de dominio corto: debe tener en cuenta que la gente debe ser capaz de recordarlo. Trate de registrar el nombre más corto que sus clientes y visitantes puedan asociar con su sitio. Hay muchas extensiones disponibles en este momento. Para las empresas, se recomienda un sufijo com. Se trata de la primera extensión que la mayoría de la gente prueba cuando navega por internet. Dado que es una de las extensiones más antiguas, una dirección dot.com muestra que su negocio tiene presencia en la web. No olvide registrar su dominio web lo antes posible. Tenga siempre en mente que los nombres de dominio solo pueden contener letras números y guiones. Los espacios y los símbolos no están permitidos. Además, los nombres de dominio no distinguen entre mayúsculas y minúsculas. 26/71

27 5.5. Subir la página web La copia de archivos desde el disco duro al servidor es un proceso sencillo. El sitio de acogida le pedirá el nombre del directorio en su disco duro donde se almacenan los archivos y los nombres de los archivos específicos para cargar. Una vez que hayas subido todos los archivos, usted debe probar la página en el servidor web y asegurarse de que funciona correctamente y que todos los archivos se han subido correctamente Promocionar la página web Muchos desarrolladores de páginas web parecen pensar que si se construye una página, la gente vendrá. Las cosas no son tan simples. Debes promocionar tu página web. La promoción de una página web puede incluir por ejemplo rsgitrar tu URl en uno o más buscadores y portales as en Internet. Los motores de búsqueda pueden ser nacionales, internacionales, o específicos. Dependiendo de sus objetivos, es posible que también desee inscribirse en algunos de los motores de búsqueda internacionales, regionales o específicos. Usted puede agregar tu URL a cada uno de los principales motores de búsqueda haciendo clic a continuación: 1. Añade URL a Google 2. Añade URL a Open Directory un directorio abierto Alternativamente, puede utilizar un servicio de envío URL para registrar su sitio en motores de búsqueda a la vez.los motores de búsqueda usan algoritmos diferentes, sin embargo, en la indexación general se produce en función del número de veces que las palabras específicas o combinaciones de palabras que se encuentran en el título, encabezados de sección y el cuerpo de la página. El título y el primer párrafo de la página son importantes para fines de indexación Controle el trafico web Es muy importante hacer un seguimiento estadístico a los visitantes a su sitio web. Los programas de seguimiento web ofrecen una gran cantidad de información sobre los visitantes de sitios web que pueden ayudarle a mejorar su contenido web, estructura de navegación y "pegajoso". Una buena información le ayudará a formular las estrategias de los grandes que en última instancia reducir sus costos y aumentar sus ingresos. Un buen seguidor da respuesta a las siguientes preguntas: 1. De qué países qué mis visitantes del sitio web viene? 2. Qué motor de búsqueda se utilizan para encontrar mi sitio? 3. Qué palabras o frases se buscan en? 4. Qué sitios y URLs me están enviando el tráfico? 27/71

28 5. Cómo navegar a través de mis visitas a mi sitio? 6. Cuál de mis páginas son las más populares y por lo menos? Al analizar regularmente las estadísticas web, usted hará algunos descubrimientos asombrosos! Por ejemplo, usted probablemente encontrará que sólo unos pocos motores de búsqueda se le envía la mayor parte de su tráfico. Es probable que descubra que muy pocas de sus páginas están recibiendo el 90% de sus éxitos. Es importante utilizar la información para definir mejor las etiquetas meta y desarrollar estrategias que mejoren la visibilidad de su sitio en los principales motores de búsqueda Generar recursos Cómo hacer dinero con un sitio web? Una forma fácil de hacer dinero es unirse a un programa de afiliados y entregar anuncios publicitarios de su sitio. Hay muchas empresas de publicidad de banner, en los negocios y varios modelos de compensación están en uso. Algunas empresas pagan el "editor web" cada vez que aparece un anuncio en su sitio web. Algunos pagan una cuota fija, cuando un visitante hace clic en un anuncio. Otras compañías de publicidad de banners pagar comisiones basadas en el rendimiento de ventas. Por ejemplo, si un visitante hace clic en su sitio web en un anuncio de la bandera y, posteriormente, compra un producto, usted recibirá una porción del precio de compra. Es importante encontrar una compañía con cierta reputación que pague un precio razonable y haga pagos puntuales. Para ser aceptado como afiliado, la mayoría de los principales actores en la industria de la publicidad, pedirá que el sitio web cumpla una serie de requisitos como : 1. El sitio web no debe ser alojado en un servidor libre. Debe tener su propio nombre de dominio virtual. 2. El sitio web debe recibir un número mínimo de visitas al mes 3. El contenido debe ser legal, original, y socialmente aceptable. Al seleccionar una empresa de bandera de la publicidad, las siguientes preguntas deben ser hechas: 1. Qué modelo de pago utilizan? por ejemplo coste por clic (CPC), el costo por cada visualizaciones (CPM), importe de la comisión por venta 2. Se hacen los pagos mensuales o se retienen hasta un cierto limite. 3. Qué negocio representa la publicidad? Qué productos se venden? Cómo de compatibles son los productos con el contenido de su sitio web? 4. Qué estadísticas se ofrecen (por ejemplo, anuncios en pantalla, el porcentaje de clics, los ingresos obtenidos)? 5. Cómo son de rápidos y fiables son los servidores web que alojan los banners? 6. Qué tipos de anuncios se apoyan? (Banners, botones, cubos, pop-ups) 28/71

29 7. Se le permite optar por determinadas categorías de anuncios? (por ejemplo, alcohol, tabaco, juegos de azar, anuncios pop-up) 5.9. Evolución de la web La evolución de las aplicaciones debe ser una parte clave de su estrategia de desarrollo de sitios web. Cuántas veces has visitado un sitio web sólo para encontrar un gráfico animado diciendo "en construcción"? Asegurarse grande volúmenes de trafico es uno de los procesos más duros y que exigen más tiempo, incluso si su sitio es de alta calidad y esta registrado en todos los motores de búsqueda más importantes. En consecuencia, es vital que usted publique sus páginas rápidamente, a sabiendas de que son imperfectas. No te olvides de que hay varios billones de páginas publicadas en el momento en el Internet y los números están creciendo rápidamente. Cuanto más rápido establezca su presencia, mayor tráfico va a recibir su sitio Mercado global Para los creadores de sitios web comerciales, es vital pensar de manera global. Recuerde siempre que sus visitantes no pueden ser expertos en el idioma inglés o no compartir su cultura y valores. Hay algunas herramientas de la web disponibles para traducir páginas web de un idioma a otro. Aunque las traducciones no son elegantes, nos proporcionan un buen "primer esbozo" de traducción que puede ser mejorado por alguien que sea hábil con el lenguaje. Si publica algunas páginas web clave en idiomas extranjeros, serán indexados por los motores de búsqueda con los términos del idioma extranjero. Esto le traerá más tráfico. Una alternativa a la creación de páginas de lenguas extranjeras es proporcionar enlaces al software que traduce las paginas automaticamente de una lengua a otra Asociarse para el éxito Desarrollar un sitio web comercial puede requerir habilidades diferentes. Por ejemplo, usted podría encontrarse en la necesidad de encontrar alguna de estas personas: 1. Un autor para escribir contenido del sitio web 2. Un investigador para encontrar otros sitios web con los que establecer vínculos. 3. Un diseñador de páginas web para desarrollar gráficos y navegación 4. Un analista de base de datos para el diseño de las tablas en las que se almacenan los datos subyacentes 5. Un programador para escribir Java, los scripts otros componentes de software 6. Un traductor. 7. Un vendedor para promocionar tu web 29/71

30 A menos que tenga todos los conocimientos necesarios para construir un sitio web comercial. Puedes buscar socios y desarrollar partenariados eficaces. Una vez que haya establecido una presencia en la red y su sitio este recibiendo grandes volúmenes de tráfico, otros editores web y las empresas se acercarán con intención de asociarse. En este campo de cambiante tecnología, la asociación es particularmente importante. Es una buena práctica para comenzar una relación de asociación sobre una base pequeña e informal. Si la sociedad demuestra ser de beneficio mutuo, puede ser ampliada y formalizada. La asociación con personas en el extranjero puede ser muy gratificante especialmente con individuos en los países en desarrollo que a menudo tienen fuertes habilidades técnicas, pero no tienen acceso al conocimiento de los mercados más desarrollados Web Analytics Web Analytics es un conjunto de herramientas y métodos que se utilizan para entender las interacciones de los clientes con un sitio web de la empresa. Utilizando los datos de los registros del servidor web, bases de datos y otras fuentes. El objetivo es incrementar el conocimiento sobre los clientes y el uso de un sitio web. Web Analytics puede ser utilizado para identificar y resolver problemas técnicos y de navegación con un sitio web. También se utiliza para comprender mejor las necesidades del cliente y sus patrones de compra. Web Analytiscs puede ayudar a identificar problemas de diseño de páginas web y sus oportunidades Creando banners Crear un anuncio para promocionar su sitio web es fácil. Ni siquiera tendrás que descargar un software especial. Animación en línea El uso en línea de animación para crear al instante banners animados para publicidad, intercambio de enlaces, etc Este producto también se puede utilizar para crear botones animados. CoolText Este sitio ofrecen una gran herramienta para la creación de logotipos personalizados, botones y balas, como los que utilizamos. Una amplia variedad de plantillas y las fuentes están disponibles. 3D TextMaker 30/71

31 Este sitio personalizado crea banners animados y botones. Las imágenes creadas con el Creador de texto 3D se puede utilizar de forma gratuita en las páginas personales y comerciales Comprobar enlaces Para evitar malas clasificaciones en motores de búsqueda, es importante eliminar los enlaces rotos de sus páginas web. Puede usar paquetes de software como Microsoft FrontPage y Expression Web, que incluyen una funcionalidad para encontrar enlaces rotos. Existen otros comprobadores de enlaces disponibles en internet como: W3C Link Checker Este comprobador de enlaces es fácil de usar HTML del W3C servicio de validación, basado en un analizador SGML. Submit Express Submit Express ofrece un comprobador de enlaces muertos y el número de otras herramientas para el webmaster Directorios Además de registrar su sitio en los principales motores de búsqueda, es importante que se enumeren en los grandes directorios de Internet. Para conseguir que su sitio aparezca en un directorio, usted debe encontrar un directorio de la categoría apropiada escribir una sinopsis breve pero descriptiva de su sitio y enviar la URL. Open Directory El Open Directory fue comprado por Netscape en noviembre de Utiliza editores voluntarios para catalogar las presentaciones de directorio. Lycos, AOL, AltaVista y Hotbot utilizar los listados de directorios de este servicio de directorio de Internet Busqueda de nombres de dominio Checkdomain.com Es el lugar en Internet para comprobar si un nombre de dominio está disponible para casi todos los países del mundo. NameDroppers.com 31/71

32 Namedroppers.com ofrecen un nombre de dominio - motor de búsqueda que le permite buscar por nombres de dominio con múltiples palabras clave Adquisición de dominios La siguiente web proprociona nombres de dominio de manera gratuita, siempre que se usen sus servicios de alojamiento web: Busqueda de la competencia Cuando se desarrolla un sitio web, es importante ser consciente de la competencia. Cómo se atrae a los visitantes? Qué te gusta o disgusta de sus sitios? Marketleap La búsqueda Marketleap herramienta de motor de comparación de los volúmenes de enlaces a tu sitio con los volúmenes de enlaces a los sitios líderes en más de 30 categorías de la industria. Alexa Alexa es una gran herramienta para identificar y aprender acerca de su competencia. Simplemente escriba la dirección URL de un sitio y ver cómo filas! Reloj Backlink Esta herramienta webmaster le permitirá ver los sitios que se enlazan con un sitio web (es decir, los vínculos de retroceso) Page Hit Trackers Google Analytics Insertando unas pocas lineas de código en cada pagina web de tu sitio, Google Analytics producirá una gran cantidad de gráficos y estadisticas incluyendo número de visitantes únicos, URL de referencia y enlaces desde buscadores. Yahoo! Analytics Similar a Google Analytics, Yahoo Analytics proporciona información útil acerca de las visitas a los sitios. Extreme Tracking Este producto proporciona numerous, porcentajes, estados, totales y medias. Proporciona un rango completo de estados, incluyendo datos y claves para usar en tu página. 32/71

33 Guias de programación Hay una serie de guías de programación disponibles en Internet que le puede ayudar con HTML, CGI y otros lenguajes de programación. Hipertexto Mark-up Language Esta es una excelente guía de HTML y XTML de referencia. Manual de PHP PHP es un lenguaje de script que esté incrustado en HTML muy similar a ASP de Mirosoft (Active Server Pages). A diferencia de ASP, sin embargo, este lenguaje se puede ejecutar en varios tipos de servidores, no sólo en los servidores de Microsoft Windows NT. Este manual explica cómo escribir páginas web dinámicas que utilizan este lenguaje de scripting del lado del servidor. PHP Builder Proporciona más información para los desarrolladores de PHP. Traductores de paginas web Proporcionar apoyo multilingüe en su sitio web puede ser importante. Las herramientas están actualmente disponibles en Internet para traducir fácilmente páginas web a distintos idiomas. Aunque la calidad de la traducción no es perfecta, las herramientas pueden proporcionar una buena traducción del primer corte, que luego puede ser refinado por un hablante nativo de la lengua. Babelfish de Yahoo Este producto traduce páginas web de Inglés a: francés, español holandés, portugués, alemán, italiano, chino, japonés, coreano y ruso. Traducciones en la dirección inversa también puede ocurrir. Este servicio es gratuito. 33/71

34 Ranking de las páginas web Existe una variedad de herramientas en Internet que están disponibles para controlar el ranking de páginas web en los principales motores de búsqueda. Algunos instrumentos de clasificación evaluarán sobre la base de consultas específicas. El análisis de popularidad de enlaces es una de las mejores formas de medir cuantitativamente la visibilidad global de su sitio web. En pocas palabras, la popularidad de enlaces se refiere al número total de enlaces que un motor de búsqueda ha encontrado para su sitio web. LinkPopularity.com Este servicio gratuito genera una "Informe de popularidad de enlace", que detalla los sitios que enlace a una URL determinada. Índice de Visibilidad Marketleap Esta herramienta de la popularidad de enlaces está diseñado para ayudar a los optimizadores de buscadores y marketing en línea, no sólo para saber quién está enlazando a su sitio, pero para ejecutar también un informe de evaluación comparativa para mostrar rápidamente cuál es su postura respecto a los competidores y otros jugadores en línea más importantes. Markup Validation El Servicio de Validación de marcado es un validador gratuito de World Wide Web Consortium (W3C) que permite a los usuarios de Internet comprobar que los documentos HTML y XHTML estén bien marcados. El marcado de la validación es un paso importante para asegurar la calidad técnica de las páginas web. Dado que la mayoría de los documentos web se escriben utilizando lenguajes de marcas, éstas son definidas por las especificaciones técnicas, que suelen incluir una gramática formal de lectura mecánica (y vocabulario). La validación de los documentos Web puede ayudar a mejorar y asegurar su calidad, y puede ahorrar mucho tiempo y dinero. La validación no es, sin embargo, ni un control de calidad completo, ni es estrictamente equivalente a la comprobación de la conformidad con la especificación. Así que uno debe asegurarse de emplear aún otra medida de aseguramiento de la calidad. 34/71

35 6. DREAMWAVER CS Explorando Dreamweaver Qué es Dreamweaver? Dreamweaver es una excelente herramienta de desarrollo tanto para usuarios expertos como nuevos. Proporciona un entorno creativo para diseñadores, y se ha convertido rapidamente en el programa preferido para crear y gestionar páginas web. Tanto si desarrollas páginas web, contenidos para móviles, o aplicaciones para servidores, Dreamweaver tienen algo que ofrecer. Figura 1.1 Dreamweaver, vista general Dreamweaver dispone de todo lo que puedes necesitar para una gestión completa de sitios, incluyendo protocolos de transferencia entre un servidor y una máquina local, plantillas de páginas web, y mecanismos de seguridad como comprobadores de enlaces e informes de sitios. Usando estas herramientas puedes estar seguro que tu sitio web funciona bién y tiene un diseño atractivo Si estás diseñando páginas web con CSS (Cascading Style Sheets), el Browser Compatibilty check y CSS Advisor te ayudará a localizar cualquier problema que puedan surgir con el uso de los diferentes buscadores. 35/71

36 Figura 1.2 Dreamweaver, vista de código Dreamweaver te permite trabajar en código con vista de un documento. Este es un poderoso editor de texto. Puedes editar código HTML directamente y cambiar las vistas para ver los resultados del codigo con el que trabajas. Caracteristicas como color del código, indexación, y ayudas visuales hacen de Dreamweaver un editor de textos ideal para diseñadores web de cualquier nivel. Figure 1.3 Pagina de bienvenida de Dreamweaver y selección del tipo de fichero a desarrrollar Para desarrolladores experimentados, Dreamweaver soporta lenguajes populares como JavaScript, además de lenguajes como ColdFusion, PHP, and ASP.NET. 36/71

37 Menus especializados y paneles de código te ayudarán a contruir páginas y aplicaciones en el lenguaje que escojas. Inserción personalizada de menus y paneles de código te ayudarán a construir páginas y aplicaciones en el lenguaje de tu elección. Características de Dreamweaver Figure Tipos de edición de ficheros de Dreamweaver Dreamweaver tiene tres opciones diferentes. Cuando editas un documento Dreamweaver te permite trabajar en Design, Split, o Code view. Puedes cambiarlas las vistas mediante un simple click en la barra de herramientas del documento. Las vistas de diseño te permiten crear visualmente y ver todo lo que haces. Figura 1.5 Ftp a través Dreamweaver Construido en FTP te permite subir y descargar ficheros a y desde el servidor web usando el panel y la interfaz. O puedes usar también el botón Get/Put en cualquier momento para colocar imágenes con las que este trabajando. No hay necesidad de software adicional. Dreamweaver tambien proporciona la funcionalidad Check In/Check Out ademas de sincronización para una fácil gestión de archivos. El panel Insertar proporciona iconos intuitivos para los elementos más comunes de la pagina web. Esto le permite añadir elementos a una página con un simpe click. Paneles adicionales le permitirán 37/71

38 cualquier elemento para asegurarte de que ves exactamente lo que quieres. Incluidas en el panel pre-determinado Insertar se encuentran elementos para formatear texto, construir formas y crear diseños. Tambien podrás adaptar Favoritos con los elementos más usados. Figure 1.6 Insertar iconos para Desarrollo Web Diseños de trabajo adaptables te permiten guarder combinacioens y posiciones de paneles y barras de tareas para un uso más fácil. Puedes guardar diseños de trabajo para diferentes usuarios o crear espacios diferentes de trabajo para tareas diferentes. 38/71

39 Figura 1.7 workspace layout El panel CSS te permite beneficiarte de opciones de diseño y formateado a taves de Cascading Style Sheets. Este panel te permite crear, editar y gestionar estilos. Figura 1. 8 HTML y CSS panel 39/71

40 6.2. Creando un documento Figura 2.1 Pantalla de bienvenida Un documento puede ser hecho por medio de la pantalla de bienvenida o de forma alternativa presionando File New. Figure 2.2 Creando un nuevo fichero Página en blanco: Esta opción te permite escoger desde 17 tipos diferentes de docuemntos web. Si seleccionas <ninguno> en la columna de diseño, Dreamweaver crea una página web sin mas contenidos que el esqueleto básico HTML usado en cada página web. Plantilla en blanco: Esta opción te permite crear una plantilla Dreamweaver. Pagina desde la Plantilla: Esta opción lista todos los sitios que has definido en Dreamweaver, junto con la splantiilas asociadas. 40/71

41 Pagina desde ejemplo: Contiene una selección de hojas de etilo de ejemplo que pueden ser usadas como un punto de inicio para crear la tuya. Tambien ofrece esquema de páginas. Otro: Esto crea otros documentos web relacionados Probando nuestro sitio web Desarrollar un sitio web especialmente cuando se utiliza un lenguaje dinámico como PHP requiere un montón de pruebas. Por esa razón un entorno de prueba local ayuda en muchos aspectos al desarrollador y ofrece muchas ventajas como la seguridad, estabilidad, velocidad y comodidad. Hay muchas pruebas de PHP entornos de software que usted puede encontrar y descargar lado a otro de Internet. Uno de ellos es XAAMP para las ventanas. Se puede descargar e instalar, desde aquí. El software es fácil de instalar y también proporciona instrucciones para ayudar si hay problemas. Cuando se ha instalado por primera vez, Apache es capaz de albergar un solo sitio web, que se identifica en un entorno de prueba local por el siguiente URL: Para anular esta restricción, se podría desarrollar sitios web en las subcarpetas de la raíz del servidor Apache. Por ejemplo, si tenemos dos sitios web llamados sitio1 y sitio2 y crear subcarpetas separadas para ellos en la raíz del servidor, podemos acceder a ellos en nuestro entorno de prueba, como: y Creando definiciones para el sitio web Después de decidir dónde colocar los archivos del sitio web que usted necesita para continuar con el proceso de instalación de Dreamweaver. El proceso es el mismo o bien se refiere a las pruebas de archivos PHP localmente a distancia. Figura 2.3 Definiendo el sitio web Podemos abrir el cuado de diálogo Site Definition. 41/71

42 Figure 2.4 Definición del sitio y opciones avanzadas. Es mejor usar las opciones básicas y avanzadas del cuadro de diálogo para definir el sitio web, ya que la opción básica contiene solamente las opciones esenciales Dreamweaver y textos Cuando creamos una nueva página web, como por ejemplo una con extensión html. o. Php, Dreamweaver inserta automáticamente todas las etiquetas HTML necesarias para una página básica. En la vista Diseño, como podemos ver en la Figura 2.3 se nos presenta lo que parece ser una página completamente en blanco. Sin embargo, si revisamos la vista Código o en la vista Dividir, vemos las etiquetas básicas creadas. Figura 2.5 Código básico detrás de una página en blanco 42/71

43 Si empezamos a escribir en la vista Diseño nuestro texto aparecerá como en un procesador de textos. Como podemos ver en la figura 2.4 el mismo texto aparece en la vista de código. Cuando presionamos Enter, Dreamweaver ajusta el texto. Figure 2.6 Escribiendo texto, visible en diferenets vistas El texto se alinea automáticamente a la izquierda y se ajusta cuando se alcanza el borde de la ventana del documento. Se parece a un procesador de textos sin embargo tenemos que pulsar Enter sólo cuando se cambia el párrafo, de lo contrario puede haber espacio a la izquierda en nuestro sitio web en los apartados vacíos. 43/71

44 Figura 2.7 Uso de Enter y párrafos vacios Copiando y pegando texto Copiar y pegar texto en Dreamweaver se puede hacer desde documentos de texto procesados y otras aplicaciones directamente en la vista de diseño. Dreamweaver mantiene casi todo el formato del texto. También ofrece las opciones de copia Con el fin de hacer eso, tenemos que ir al menú Edición y seleccione Preferencias. Entonces, como podemos ver en la Figura 2.6 se selecciona el tipo de pasta que le gustaría usar. 44/71

45 Figura 2.8 Opciones de copiar-pegar Del mismo modo podemos importar documentos completos en Dreamweaver con el mismo resultado que la opción de copiar y pegar. Para hacer eso tenemos que ir a Archivo Importar y seleccione Documento de Word. Luego buscamos en nuestra unidad de disco duro para encontrar el documento que desee y pulse Abrir. Figura 2.9 Importando desde un documento word Dreamweaver e imagenes Las imágenes se insertan en HTML con la etiqueta <img>, que tiene los atributos que describen el origen del archivo de imagen, su altura y anchura, y el texto alternativo para los navegadores no 45/71

46 visuales. Al insertar una imagen en Dreamweaver la vista Diseño o la vista Código, el programa genera el código necesario. Lo único que tienes que hacer es decidir dónde colocar la imagen. Podemos insertar una imagen en nuestro documento de trabajo de muchas maneras. Uno muy común es que arrastre y suelte la imagen desde el panel Activos. Por supuesto, tenemos que definir el primer directorio, como se muestra en la Figura 2.4. Figura 2.10 Assets panel Como alternativa podemos utilizar el panel Archivos para buscar la imagen y arrastrar y soltar en el documento. Sin embargo esta opción no tiene la vista previa en miniatura del panel Activos. Como podemos ver en la figura 2.10 dentro del panel de Activos podemos encontrar los activos clasificados en nueve categorías. Aparte de la vista previa en miniatura del panel nos muestra las dimensiones del archivo, el tamaño y el tipo. Con el botón de edición que podemos encontrar en la esquina inferior derecha del panel se puede cambiar la imagen antes de insertarla en el documento de Dreamweaver. El botón se inicia el programa de diseño gráfico por defecto que hemos instalado en nuestro ordenador. Podemos agregar imágenes a los favoritos en el caso que nos guste usarlas a menudo y no queremos buscarlas. Podemos cambiar el modo de los favoritos de los activos del sitio, seleccionando los botones de radio en la parte superior del panel Activos. Además de arrastrar y soltar una imagen desde el panel Activos, podemos hacer clic en el botón Insertar en la parte inferior izquierda del panel para insertar la imagen siempre que nuestro cursor se encuentra en la ventana de documento Insertando fotos en Dreamweaver a través del sistema de archivos Otra forma de insertar imágenes es a través del cuadro de diálogo Seleccionar origen de imagen. Para hacer eso tenemos que ir al menú superior principal de Dreamweaver y seleccionar Insertar, Imagen 46/71

47 Figura 2.11 Seleccione el cuadro de diálogo Fuente de la imagen Si empezamos a desarrollar una página web a través de Dreamweaver y no se ha definido el sitio web las imágenes que se insertan seran codificadas de alguna manera como: <img width="350" height="232" /> src="file:///c /vhosts/mywebsite/images/mountain.jpg" Si guardamos esta página en un sitio definido, Dreamweaver cambia automáticamente la fuente de archivo en un vínculo relativo, algo como. <img width="350" height="232" /> src="../../mywebsite/images/mountain.jpg" Este cambio permitirá que la imagen sea visible cuando el sitio web se carga en un servidor web Imagenes y texto alternativo Después de seleccionar la imagen y presionar el botón de insertar, Dreamweaver muestra la etiqueta de imagen Atributos de accesibilidad. Este cuadro nos permite insertar un texto alternativo para describir la imagen. Al hacer esto ayudamos a las personas con discapacidad visual que utilizan equipos de asistencia tecnológica (como lectores de pantalla) para navegar a través de nuestra página web con más eficacia. El campo de descripción larga con la dirección URL se utiliza a menudo para imágenes complejas o diagramas con el fin de proporcionar una descripción más detallada. Figura Atributos de las etiquetas de accesibilidad 47/71

48 Después de llenar el texto alternativo presiona OK y vemos la imagen insertada. Si pulsamos cancelar, una vez más la imagen se inserta, pero sin el texto alternativo y la descripción larga Almacen de imágenes Hay muchos casos en los que desarrollamos una página web y no tenemos la imagen adecuada para ello. En ese caso, temporalmente usamos un marcador de posición. De esta manera logramos la especificación de tamaño de la imagen y otros atributos. También impide que Dreamweaver muestre un icono roto en la imagen, como sucede si se utiliza el nombre de una imagen inexistente. Para hacer eso tenemos que posicionar a nuestro cursor en la ventana de documento donde queremos que la imagen que se inserta y luego seleccione Marcador de posición de imagen en la ficha Común de la barra Insertar. Figura 2.13 Imagenes de marcador de exposición Después de seleccionar el marcador de posición, vemos un cuadro de diálogo con las especificaciones de nuestro marcador de posición. Figure 2.14 Espeficicaciones de marcador de posición 48/71

49 6.2.8 Insertando peliculas Flash La inserción de una película Flash en una página web es muy similar a la inserción de una imagen. Sin embargo, el código subyacente es muy diferente. El primer cambio es relativamente menor. El submenús de Medios del menú Insertar y ficha Común de la barra Insertar ya no se refieren a Flash, sino a SWF. Esto se debe a las películas hechas en Flash ( utilizar el formato SWF y ejecutan un plugin para el navegador Flash Player. Dreamweaver CS4 para flash evita el uso de la etiqueta <embed>, que no forma parte del estándar HTML. Es necesario actualizar su versión de Flash Player si es demasiado antigua para soportar las características utilizadas por el archivo SWF. Para insertar un archivo SWF, tenemos que posicionar el cursor de la ventana de documento donde desea que la película este, y seleccionar SWF en el submenú de Medios del menú Insertar o la ficha Común de la barra Insertar. Navegue hasta el archivo SWF en el cuadro de diálogo Seleccionar archivo y haga clic en Aceptar. Figura 2.15 Insertando un fichero SWF Después de eso nos encontramos con el cuadro de dialogo de accesibilidad de la etiqueta de objeto, donde podemos introducir un título, clave de acceso, y el índice de tabulación para la película. Todos los elementos son opcionales. Al igual que con las imágenes, hacer clic en Cancelar no se detiene la película desde que se inserta en la página, lo único que hace es ignorar los atributos de accesibilidad. 49/71

50 De forma predeterminada, Dreamweaver muestra un marcador de posición para el archivo SWF. Para ver la película como se ve en el contexto de la página, seleccione el marcador de posición en la vista Diseño y haga clic en el botón Reproducir en la parte inferior derecha del inspector de propiedades. Figure 2.16 Reproduciendo un fichero flash en Dreamweaver Como podemos ver en la figura 2.16, el inspector de propiedades tiene un montón de opciones para controlar la configuración de las películas de Flash. En la parte superior izquierda, se muestra el tipo de archivo y el tamaño. Inmediatamente a continuación es un campo de etiqueta que muestra el atributo id de la etiqueta. Dreamweaver asigna automáticamente FlashID como el valor para el primer objeto SWF. Posteriores películas SWF insertados en la misma página se numeran FlashID2, FlashID3, y así sucesivamente. El campo es editable, para que podamos entrar en nuestra propia elección de Identificación del lugar. Una descripcion de otras opciones: 50/71

51 W y H: anchura de la película y la altura en píxeles. Estos se rellenan automáticamente cuando se inserta el objeto SWF. Archivo: La ruta de acceso del archivo SWF. El Punto de archivo de la herramienta y los iconos de carpeta de trabajo del mismo modo que para las imágenes. Src: Este campo es para que ingrese la ubicación del archivo FLA de la cual se creó una película de Flash. BG: Se inserta un parámetro en la etiqueta <object> para establecer el color de fondo para el archivo SWF. Edit: Esto abre el archivo de la película FLA para editarlo. Para utilizar esta opción, primero debe entrar en la ubicación del archivo en el campo Origen. Clase: Esto le permite aplicar una clase CSS a la etiqueta <object>. Loop: Esta opción está seleccionada por defecto. Anule la selección si no desea que la película se ejecute como un bucle continuo. Reproducción automática: Esta opción está seleccionada por defecto. Anule la selección si no desea que la película se ejecute automáticamente cuando la página se carga por primera vez. Espacio V y Espacio H: Estos insertan el vspace obsoleta y los atributos hspace en la objeto para añadir espacio vertical y horizontal en torno a la película. Calidad: Controla la apariencia de la película durante la reproducción. Elija entre las siguientes opciones: Alto: Este es el valor predeterminado. Se ofrece la mejor calidad, pero requiere una gran cantidad de energía del procesador. Bajo: seleccione esta opción si la velocidad es más importante que la calidad. Auto Bajo: Esta prioridad de velocidad, pero mejora la calidad cuando sea posible. Alta automática: Esto le da la misma prioridad a la velocidad y la apariencia, pero sacrifica la calidad, si se requiere más velocidad. Escala: Esto determina cómo se ajusta la película a las dimensiones establecidas en anchura y altura. Alineación: Se inserta el obsoleto atributo align en la etiqueta <object>. Wmode: Esto determina la forma en la película SWF interactúa con menús desplegables y otros elementos controlados por JavaScript. Elija entre las siguientes opciones: Opaco: Este es el valor predeterminado. Permite a los menús desplegables para visualizar correctamente a través de la película. Se da a la película un fondo opaco de manera que los elementos con un menor índice z se ocultan detrás. (Z-index es una propiedad CSS que controla el orden de apilamiento de los elementos posicionados.) Transparente: Si la película SWF tiene elementos transparentes, esto permite que los elementos con menor z-index para mostrar a través de detrás de él. Ventana: Esto elimina el parámetro wmode de la etiqueta <object>. Seleccione esta opción si la película no se ve afectada por elementos dinámicos, tales como menús desplegables. Es más eficiente y fácil de usar para los lectores de pantalla para invidentes. 51/71

52 Parámetros: Se abrirá un cuadro de diálogo para configurar los parámetros adicionales que se esperan en la película. Dreamweaver coloca una ficha de color azul brillante con un icono de ojo abierto en la parte superior izquierda del marcador de posición SWF. Si seleccionamos el icono veremos el contenido alternativo que aparecerá cuando un usuario accede a la página con un navegador utilizando una versión antigua de Flash Player. Podemos editar o eliminar este contenido de la manera que nos guste Estructurando los contenidos de nuestra página web Anteriormente vimos que Dreamweaver encierra el texto escrito en la vista Diseño con <p> (punto) las etiquetas cuando se presiona Enter / Return. También puede importar texto de Microsoft Word o pegar texto desde otras aplicaciones, y Dreamweaver intentará preservar la estructura y el formato. El texto se estructura normalmente utilizando una o más de los siguientes elementos: Los párrafos <p>) Las cabeceras (h1 a través h6) Texto preformateado (<pre>) Las etiquetas en línea (por ejemplo, <strong>, <em>, <code>, etc) Listas (<ul>, <ol> o <dl>) Las citas de bloque (blockquote) Tablas (<table>) Hay cinco formas básicas de añadir estos elementos estructurales: A través de la vista HTML del inspector de propiedades A través de la ficha Texto de la barra Insertar (tablas de utilizar las fichas comunes y Diseño) A través del menú Formato (tablas de utilizar la opción Insertar y modificar los menús) Mediante el uso de atajos de teclado (no disponible para todos los elementos) Al escribir el código directamente en la vista Código La vista HTML y CSS del inspector de propiedades Como podemos ver en la figura 2.17 el inspector de propiedades puede ser utilizado de forma diferente para HTML y CSS. La captura de pantalla en la figura 2.17 se muestra la vista HTML y la captura de pantalla inferior muestra la opción de CSS. Podemos ver muchas similitudes, pero su uso es completamente diferente. 52/71

53 Figura 2.17 HTML and CSS property Inspectors La vista HTML se ocupa principalmente del código HTML, aunque la clase en el menú desplegable de la página el botón Propiedades de dar algún tipo de acceso a la CSS. El punto de vista CSS está dedicado exclusivamente a la CSS. Los botones de negrita y cursiva que son comunes a ambos puntos de vista funcionan de maneras muy diferentes. Si hace clic en el botón Negrita en la vista HTML, Dreamweaver inserta etiquetas en el código subyacente. Al hacer clic en el mismo botón en la vista de CSS lanza la nueva regla de estilo de cuadro de diálogo o se abre una regla de estilo existente para su edición, en función del valor que aparece en la regla de destino en el menú desplegable Párrafos, cabeceras y texto pre-formateado. El formato en el menú desplegable en la parte superior izquierda de la vista HTML del inspector de propiedades (ver Figura 2.17) agrega texto envolviéndolo en el párrafo (<p>), título (h1 a través h6), o texto preformateado (<pre>) etiquetas. También elimina las etiquetas cuando se selecciona Ninguna como opción. Para entender cómo funciona el formato en el menú desplegable, es una buena idea abrir la vista de Split y ver donde las etiquetas se conectan o se desconectan. Es importante entender que la estructura no se aplica al texto seleccionado, sino a toda la manzana donde actualmente se encuentra el cursor. Si el cursor se encuentra dentro de un párrafo y selecciona la Línea 2 del Formato en el menú desplegable, los <p> se sustituyen por etiquetas <h2>. Si selecciona Ninguno, el más próximo par de <p>, <h1> través <h6> o <pre> etiquetas se retira. No hay otras etiquetas se ven afectados. La ficha Texto de la barra Insertar (ver Figura 2.18) y en el submenú Formato de párrafo del menú Formato funcionan básicamente de la misma manera. El botón Párrafo de la ficha Texto de la barra Insertar es el quinto icono desde el principio. 53/71

54 Figura 2.18 Insertar format de texto Los botones de negrita y cursiva en la vista HTML del inspector de propiedades funcionan de la misma manera que en un procesador de textos. Si hacemos clic en uno de los botones, no pasa nada en la vista Código, pero tan pronto como empiece a escribir, Dreamweaver inserta etiquetas <strong> o <em>. Haga clic en el botón de nuevo. El punto de inserción no se mueve en la vista Código, pero tan pronto como empiece a escribir de nuevo, salta fuera de la etiqueta de cierre y vuelve a texto normal. También puede resaltar una selección de texto y lo envuelve en las etiquetas <em> o <strong>. Figura 2.19 Texto en negrita y cursiva Los botones de negrita y cursiva aparecen incrustadas cuando estan dentro del texto en negrita o cursiva. Selecciónando la totalidad o parte del texto con formato y haciendo clic en el botón de nuevo se elimina el formato de la selección. El uso de estos botones es útil y ahorra tiempo Menu Estilo El submenú Estilo del menú Formato ofrece una gama mucho más amplia de etiquetas en línea, muchas de los cuales están diseñadss para añadir estructura a nuestro documento. Como podemos ver en la figura 2.20, además de negrita y cursiva, este submenú ofrece, de uso menos frecuente, 54/71

55 pero importante, etiquetas de código (<code>), teclado (<kbd>), y Cita (<cite>). Las mismas funciones que se pueden encontrar en la ficha Texto de la barra Insertar (ver Figura 2.18). Figure 2.20 Style menu El submenú Estilo trabaja de la misma forma que los botones de negrita y cursiva en la vista HTML del inspector de propiedades. Podemos seleccionar una opción, comienza a escribir, y seleccionar la opción de nuevo para insertar la etiqueta de cierre. Alternativamente, podemos seleccionar una opción para ajustar el texto resaltado en las etiquetas en línea, o eliminar las etiquetas de una selección. Al mismo submenú se puede acceder desde el menú contextual haciendo clic derecho en la vista Diseño. Viñetas y listas numeradas Lista desordenada: Por defecto, los navegadores muestran cada elemento como un punto de bala. La lista está rodeado por las etiquetas <ul>, y cada elemento está envuelto en <li>. Lista ordenada: Por defecto, los navegadores prefijo cada elemento con un número, a partir del 1. La lista está rodeado por las etiquetas <ol> y cada elemento está envuelto en <li>. Lista Definición: Este tipo de lista se ha diseñado para un glosario, una lista de términos, o una colección de pares nombre / valor. La lista está rodeado por las etiquetas <dl>; cada término que se define está envuelto en las etiquetas <dt>, y las definiciones están envueltos en las etiquetas <dd>. Figure 2.21 Viñetas y números 55/71

56 Los iconos situados a la derecha de la clase en el menú desplegable en la vista HTML del inspector de propiedades crean listas ordenadas y desordenada, en otras palabras, viñetas y listas numeradas, como se muestra en la figura Tablas De acuerdo al W3C las tablas no deben ser utilizadas únicamente como un medio para el diseño del documento de contenido ya que esto puede presentar problemas cuando se presenten en medios no visuales, tales como lectores de pantalla. Además, cuando se utilizan con los gráficos, las tablas pueden obligar a los usuarios desplazarse horizontalmente para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deberían usar hojas de estilo para controlar la maquetación en lugar de tablas. Se considera que es mejor utilizar las tablas exclusivamente para presentar los datos que necesitan ser dispuestos en filas y columnas. Para insertar una tabla tenemos que posicionar a nuestro cursor donde queremos que la tabla empieze y hacer clic en la opción Tabla en la ficha Común o Diseño de la barra Insertar. Figure 2.22 Insertando tablas en un document Dreamweaver 56/71

57 Figura 2.23 Insertando tablas en un documento Dreamweaver: El cuadro de dialógo ofrece las siguientes opciones: Filas y columnas: Introduzca el número de filas y columnas que desee en la tabla. Se pueden agregar más columnas o filas o eliminarla más adelante. Ancho de la tabla: Se puede configurar el ancho en píxeles o como porcentaje. Si no queremos especificar un ancho, podemos eliminar el valor y dejarlo en blanco. Grosor del borde: Esto establece el atributo del borde en la tabla que se esta abriendo y aplica el grosor del borde mismo de la tabla y todas las celdas de la tabla. CSS nos da un mayor control sobre las tabla y las celda. Debemos dejar este campo en blanco para eliminar todas los bordes o si queremos usar CSS. Relleno de celda: Esto establece el atributo relleno de la etiqueta en la apertura y se aplica la misma cantidad de relleno interior por todos los lados de cada celda. Para un control más preciso, hay que dejar este campo en blanco y el usar CSS. Espacio entre celdas: Esto establece el atributo espaciado de celda en la etiqueta <table> apertura y se aplica la misma cantidad de espacio en todos los lados entre las celdas de la tabla. Encabezado: Esto controla el uso de celdas de la tabla <th> de cabecera y del atributo scope para indicar si el encabezado se aplica a una fila de tabla o columna. Los navegadores visuales suelen mostrar texto en las celdas <th> negrita y centrado. Al atributo scope hace que sea fácil para las personas con discapacidad visual para navegar por la tabla con un lector de pantalla. Podemos elegir una de las cuatro opciones: Ninguna, Izquierda, Arriba, o ambos. Leyenda: Si queremos dar a la mesa de un título, nos adentramos en el texto en este campo. Por defecto, el título se muestra por encima de la mesa, pero podemos usar CSS para moverlo a la parte inferior. Resumen: Cualquier texto introducido aquí es leído por el lector de pantalla, pero no aparece en la pantalla. Cuando se hace clic en Aceptar, Dreamweaver crea el esqueleto de la tabla e inserta un 57/71

58 espacio de no separación (&nbsp) en cada célda en el código subyacente. Esto evita las céldas vacías de manera extraña en un navegador. Tan pronto como se inserta el contenido en la celda, Dreamweaver normalmente elimina los &nbsp. Sin embargo, si nos encontramos con el texto mal alineado en una celda de la tabla, es una buena idea revisar el código subyacente y retire el manualmente, si es necesario. Figure 2.24 Esqueleto de la tabla Si deja en blanco Ancho de Tabla en el cuadro de diálogo de la tabla y les resulta difícil colocar el cursor dentro de celdas de la tabla, seleccione el botón Ampliado de la izquierda de la ficha Diseño de la barra Insertar. Como alternativa, seleccione Ver Tabla de los modos Modo de tablas expandidas. Esto expande las celdas de la tabla en la vista Diseño para que sean más fáciles de editar, no afecta al código subyacente o de cómo la tabla se representa en un explorador. Una vez que se ha insertado en la tabla de contenido, haga clic en el enlace de salida en la parte superior de la ventana de documento o seleccione el botón estándar en la ficha Diseño de la barra Insertar para contraer la tabla a su forma y tamaño normales. Una vez hemos insertado una tabla, puede cambiar sus propiedades básicas mediante la selección de la tabla en vista Diseño y utilizando el inspector de propiedades. Para seleccionar la tabla, tenemos que hacer clic en uno de sus bordes en la vista Diseño. Si nos encontramos con esta dificultad, podemos hacer clic dentro de cualquier celda, y luego seleccione <table> en el selector de etiquetas en la parte inferior de la ventana de documento. La figura 2.25 muestra las opciones disponibles en el inspector de propiedades cuando una tabla se ha seleccionado.. 58/71

59 Figure 2.25 Opciones de tabla en el inspector de propiedades La mayoría de las opciones son los mismos que en el cuadro de diálogo Tabla. Al campo en blanco a la izquierda del inspector de propiedades es donde podemos introducir en un atributo id de la tabla. Si las reglas de estilo se han creado una lista de identificadores utilizados se puede acceder a un menú desplegable en este campo (ID debe ser único, por lo que los identificadores que han sido asignados a otros elementos que no se incluyen). Si aumentamos el número de filas o columnas en el inspector de propiedades, que se añaden a la parte inferior y derecha de la tabla, respectivamente. Si reducimos el número, que se retiran de la parte inferior y derecha, y cualquier contenido en ellos se elimina. Al Alinear en el menú desplegable en la parte superior derecha se inserta el obsoleto atributo align en la etiqueta de en la apertura <table> para alinear a la izquierda la tabla, a la derecha, o centro de su elemento padre. La mejor práctica es dejar esto en Default (alineado a la izquierda) y el uso de CSS para posicionar a la mesa. Los cuatro iconos en la parte inferior izquierda del inspector de propiedades retire la altura y la anchura de los atributos de todas las celdas de la tabla y convertir anchos entre los píxeles y porcentajes. Podemos identificar sus papeles de la información sobre herramientas que se muestran cuando pasamos nuestro puntero del ratón sobre cada uno de ellos. El inspector de propiedades, cambia cuando ponemos nuestro cursor dentro de una celda de la tabla o seleccionamos sólo una parte de una tabla. Como muestra la Figura 2.26, la mitad superior del inspector de propiedades muestra la vista de CSS o HTML, dependiendo de qué botón se ha seleccionado a la izquierda, y la mitad inferior contiene las opciones relacionadas con las celdas de tabla. Figure 2.26 Opciones de celda en inspector de propiedades 59/71

60 La mitad superior se aplica al contenido dentro de la celda; la mitad inferior se aplica a la celda seleccionada (s). La mayoría de las opciones de los atributos de inserción inferior y medio en desuso alineación horizontal y vertical, anchura, altura, sin ajuste de texto y color de fondo). Estos valores normalmente se deben establecer a través de CSS, en lugar de utilizar el inspector de propiedades. Las opciones útiles en el inspector de propiedades de las celdas de la tabla son la casilla de verificación Encabezado, que cambia la celda seleccionada (s) entre el uso de etiquetas <th> y <td>, y los dos iconos en la parte inferior izquierda, que Combinar y dividir celdas. En la figura 2.26, el icono que une las células usando rowspan y colspan atributos aparece en gris, ya que sólo se activa cuando más de una celda se selecciona en la vista Diseño. Por otro lado, el icono de división sólo se activa cuando una sola célula se selecciona. Cuando haga clic en él, el cuadro de diálogo Dividir celda le preguntará si queremos dividir la celda en columnas o filas y cuántas ha de crear. Las etiquetas <Div> Las etiqueta <div> es una sencilla herramienta para agrupar los elementos de una página que se desee mantener juntos. No tiene estilos que hacen que esté disponible para el estilo que queramos. En combinación con el atributo id, que es también una manera de gran alcance de la aplicación de estilos en consonancia con todo lo que dentro de la misma <div>. Una vez que hemos organizado nuestro contenido en una estructura lógica usando las etiquetas y otros elementos clave a nivel de bloque, se puede utilizar CSS para darles estilo visualmente, añadir imágenes de fondo y colores, y la modificación de su posición y relación con otros elementos mediante el ajuste de los márgenes y relleno. Dar estilo con CSS le ofrece una herramienta mucho más poderosa establece que las tablas, pero, por supuesto, aprender a dominar ese conjunto de herramientas es algo que viene sólo a través de la experiencia. Figure 2.27 Insertando la etiqueta <div> 60/71

61 Con el fin de insertar una etiqueta <div, tenemos que seleccionar el botón Insertar etiqueta Div. en la ficha Común de la barra Insertar, como se muestra en la figura Alternativamente, podemos usar el botón Insertar etiqueta Div. en la ficha Diseño de la barra Insertar, o seleccionamos Insertar Presentación Objetos Etiqueta Div... Después de hacer eso abrimos el Insertar etiqueta Div cuadro de diálogo. Figura 2.28 Cuadro de dialogo etiqueta div Insertar: Este menú desplegable es sensible al contexto. Si el contenido está seleccionado en la ventana de documento, se muestra Ajustar a la selección, como se muestra en la figura Si no se selecciona nada, el valor por defecto está en el punto de inserción. Ambas opciones se explican por si mismas.al seleccionar una de las otras opciones en el menú Insertar se activa el menú desplegable al lado. Tanto los menús de trabajar en conjunto e insertar un <div> con texto de marcador de la siguiente manera: Antes de la etiqueta: Esta opción sólo está disponible cuando elementos de la página tiene los atributos id. Se inserta la clave inmediatamente antes del elemento seleccionado en el desplegable de la derecha del menú. Después del inicio de la etiqueta: Se inserta la clave inmediatamente después de la etiqueta de apertura del elemento seleccionado en el desplegable de la derecha del menú. Además de los elementos con los atributos id, el menú de la derecha muestra la etiqueta <body>. Antes de final de la etiqueta: Se inserta la clave inmediatamente antes de la etiqueta de cierre del elemento seleccionado en el desplegable de la derecha del menú. Además de los elementos con los atributos id, el menú de la derecha muestra la etiqueta <body>. Después de la etiqueta: Esta opción sólo está disponible cuando los elementos de la página tienen los atributos id.. Se inserta la clave inmediatamente después de la etiqueta de cierre del elemento seleccionado en el desplegable de la derecha del menú. Clase: Introduzca el nombre de la clase CSS que desea aplicar a la <div>. Clases existentes aparecen como un menú desplegable. Identificación: Escriba el nombre del atributo id desea asignar a la <div>. ID existentes definidos en las hojas de estilo asociadas a la página se enumeran como un menú desplegable. Desde un ID puede ser utilizado una sola vez en una página, la lista sólo muestra los identificadores que aún no han sido asignados a otro elemento. Nueva regla CSS: Esto le permite definir una regla de nuevo estilo que se aplicará a la <div>. 61/71