Cómo hacer que mi página web se adapte a cualquier tamaño de pantalla de FrontPage

Escrito por craig witt | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer que mi página web se adapte a cualquier tamaño de pantalla de FrontPage
Cómo hacer que mi página web se adapte a cualquier tamaño de pantalla de FrontPage. (Christopher Robbins/Photodisc/Getty Images)

La mayoría de los sitios web muestran contenido usando elementos con tamaños fijos. Hay muchos beneficios de este enfoque. Lo más significativo es que el tamaño fijo proporciona a los diseñadores y desarrolladores de precisión a nivel de píxeles en la creación del diseño de página web, un nivel de control que muchos creadores prefieren. Pero los tamaños fijos no son perfectos para cada situación. Algunos autores pueden en cambio querer que sus páginas se expandan y llenen una cierta porción de la pantalla, independientemente del tamaño de la pantalla del dispositivo que está siendo utilizado. Lograr este comportamiento es un proceso relativamente simple en FrontPage.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu página. Tras el lanzamiento de FrontPage, selecciona "Archivo" de la barra de menú en la parte superior de la pantalla, luego haz clic en "Abrir". Busca la página que deseas editar, haz doble clic en su icono para abrirla.

  2. 2

    Da elementos de diseño exteriores tamaños relativos, no absolutos. Muchos creadores de sitios web le dan a elementos de diseño como <div> y <table> un ancho específico, como por ejemplo 960 píxeles. Desafortunadamente , esto no permite el elemento de cambio en el tamaño cuando la pantalla del navegador aumenta o disminuye; la anchura está siempre fija en 960 píxeles. Debido a que un píxel en una pantalla es del mismo tamaño que un píxel en otra, esta unidad de medida se considera un valor absoluto.

    Lo opuesto a un valor absoluto es un valor relativo. Los elementos con valores relativos se muestran de forma diferente en función del tamaño de la pantalla en la que están siendo vistos; su tamaño es relativo a la pantalla en particular. En lugar de tener una anchura de 960 píxeles, un elemento de diseño de tamaño relativo podría tener una anchura de 90 por ciento. Esto significa que siempre tendrá el 90 por ciento de la anchura de una pantalla dada, ya sea que la pantalla sea muy ancha o estrecha.

    Para este ejemplo, supón que tu sitio web se presenta con tablas. Actualmente la tabla es de 960 píxeles de ancho. La columna de la izquierda es de 630 píxeles de ancho y la columna de la derecha es de 330 píxeles de ancho. Para cambiar la tabla de un tamaño absoluto de 960 píxeles a un tamaño relativo de, por ejemplo, 80 por ciento, haz clic derecho en un área abierta en la tabla y seleccione "Propiedades de la tabla". En el cuadro de diálogo, busca la sección de diseño, luego busca la casilla de verificación "Especificar ancho". En el campo debajo de la casilla de verificación, escribe un valor de 80. A continuación, haz clic en el botón "en porcentaje" a la derecha.

  3. 3

    Da a los elementos internos tamaños relativos. Recordemos que a principios de este ejemplo, la tabla dio anchos declarados de 630 y 330 píxeles en sus columnas. Para ver una tabla con la verdadera relación de tamaño, debes ajustar estos valores también. Haz clic en la celda de la izquierda, selecciona "Propiedades de celda" y cambia el valor de 630 píxeles a 66 por ciento. Haz lo mismo con la celda de la derecha, cambiando el valor de 330 píxeles a 34 por ciento. (Ten en cuenta que los dos valores de porcentaje deben ser igual a 100.)

    Ahora tienes una tabla de diseño relativamente grande. Repite este proceso para todos <table> o <div> los elementos de diseño de la página para asegurarte de que cada uno aparece en el tamaño deseado.

  4. 4

    Mira los cambios en tu navegador. Después de realizar los cambios, selecciona "Archivo" de la barra de menú superior, haz clic en "Guardar". Abre la página que acabas de modificar en tu navegador web. Ten en cuenta que cuando cambias el tamaño de la ventana, el tamaño de tu página web ahora también cambia. Tu diseño relativamente grande ahora se ajusta a la pantalla de cualquier navegador web.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles