Cómo crear y modificar un cuadro de lista desplegable de redirección en Expression Web

INTRODUCCIÓN

Este artículo describe cómo crear y modificar un cuadro de lista desplegable de redirección en Microsoft Expression Web.

Más información

En este artículo se describe cómo crear y modificar un control de cuadro de lista desplegable que utiliza JScript para abrir una dirección URL específica.

Nota: En este artículo utiliza JScript personalizado que puede no estar disponible en todos los exploradores Web. Para obtener más información acerca de la compatibilidad de explorador, haga clic en Ayuda de Microsoft Expression Web en el menú Ayuda , escriba compatibilidad de explorador en el cuadro Buscar y, a continuación, haga clic en Iniciar búsqueda para ver los temas que se devuelven.

Crear el cuadro de lista desplegable de redirección

Microsoft proporciona ejemplos de programación únicamente con fines ilustrativos, sin ninguna garantía expresa o implícita. Esto incluye, pero no se limita, a las garantías implícitas de comerciabilidad o idoneidad para un propósito particular. Este artículo asume que está familiarizado con el lenguaje de programación que se muestra y con las herramientas que se utilizan para crear y depurar procedimientos. Los ingenieros de soporte técnico de Microsoft pueden explicarle la funcionalidad de un determinado procedimiento. Sin embargo, no modificarán estos ejemplos para ofrecer mayor funcionalidad ni crearán procedimientos que cumplan sus requisitos específicos.
  1. Inicie Expression Web y, a continuación, abra el sitio.
  2. En el menú archivo , elija
    De nuevo, haga clic en página en el
    Panel de tareas nuevo , haga clic en HTMLy, a continuación, haga clic en
    OK.
  3. En el menú Ver , elija
    Páginay, a continuación, haga clic en código.
  4. Inserte el siguiente ejemplo de código entre el < body > y < /BODY > etiquetas en la página.
    <h3 align="center">Where Do You Want to Go Today?</h3><center>
    <form>
    <p><select name="section" size="1" language="javascript" onChange="gotoPage(this.selectedIndex);">
    <option selected>Where do you want to go today?</option>
    <option>- - - - - - - - - - - - - - - - -</option>
    <option>Microsoft Home Page</option>
    <option>MSN Home Page</option>
    </select></p>
    </form>
    </center>
    <script language="JavaScript">
    <!--
    function gotoPage(varItem)
    {
    switch(varItem)
    {
    case 0:
    window.parent.self.status="Goes Nowhere";
    break;
    case 1:
    window.parent.self.status="Goes Nowhere";
    break;
    case 2:
    window.location="http://www.microsoft.com";
    break;
    case 3:
    window.location="http://www.msn.com";
    break;
    }
    }
    // -->
    </script>

    Nota: Este ejemplo de código utiliza la propiedad window.location para cargar páginas nuevas. Si está utilizando un conjunto de marcos, la nueva página se muestra en el marco actual. Si lo desea, puede utilizar el método window.open para cargar la página y, a continuación, especificar un marco de destino. Por ejemplo, para mostrar la página principal de Microsoft en pantalla completa, utilice el siguiente código de JScript.
    case 2:      window.open("http://www.microsoft.com", target="_top");
    break;

    Nota: Puede recibir un mensaje de error o la página no se muestre correctamente si copia los ejemplos directamente desde este artículo y, a continuación, pegarlos en Expression Web. Los corchetes angulares (<) y (>) pueden aparecer como código HTML. Para evitar este comportamiento, pegue primero el ejemplo de código a un documento en blanco en el Bloc de notas. A continuación, copie el ejemplo de código del documento del Bloc de notas a la página en Expression Web. Para ello, siga estos pasos:
    1. Copie el código de ejemplo del paso 4.
    2. Inicie el Bloc de notas y, a continuación, abra un documento en blanco.
    3. En el menú Edición , haga clic en
      Pegar.
    4. En el menú Edición , haga clic en
      Seleccionar todo.
    5. En el menú Edición , haga clic en
      Copia.
    6. En Expression Web, coloque el cursor en una línea en blanco inmediatamente debajo de la etiqueta < body > donde desee insertar el código de JScript.
    7. En el menú Edición , haga clic en
      Pegar.
  5. En el menú archivo , haga clic en
    Guardar.
  6. En el cuadro de diálogo Guardar como , especifique un nombre de archivo y una ubicación donde desee guardar la página y, a continuación, haga clic en
    Guardar.
  7. En el menú archivo , elija
    Vista previa en el exploradory, a continuación, haga clic en el explorador que desea utilizar para obtener una vista previa de la página.

Agregar una dirección URL en el cuadro de lista desplegable de redirección

Para agregar una dirección URL a la lista que se muestra en el cuadro de lista desplegable, debe realizar las siguientes acciones:
  • Agregar una entrada a la lista option del código HTML.
  • Agregar una entrada a la sección "switch (varItem)" del código de JScript.
Por ejemplo, para agregar un elemento de lista para el sitio Web de soporte técnico y Microsoft Help, siga estos pasos.

Nota: Estos pasos se supone que no realizó los cambios en el código de ejemplo después de pegarlo en Expression Web.
  1. Inicie Expression Web y, a continuación, abra la página que contiene el cuadro de lista desplegable.
  2. En el menú Ver , elija
    Páginay, a continuación, haga clic en código.
  3. Coloque el cursor justo después el siguiente código HTML en la página y, a continuación, presione ENTRAR para crear una nueva línea.
    <option>MSN Home Page</option>
  4. En la nueva línea, escriba el siguiente código HTML para agregar este elemento a la lista.
    <option>Microsoft Help and Support Home Page</option>
  5. Coloque el cursor justo después del siguiente código de JScript de la página y, a continuación, presione ENTRAR para crear una nueva línea.
    case 3:      window.location="http://www.msn.com";
    break;
  6. En la nueva línea, escriba el siguiente código de JScript para redirigir la dirección URL al sitio Web que está agregando.
    case 4:      window.location="http://support.microsoft.com";
    break;

  7. En el menú archivo , haga clic en
    Guardar.
  8. En el menú archivo , elija
    Vista previa en el exploradory, a continuación, haga clic en el explorador que desea utilizar para obtener una vista previa de la página.

Quitar una dirección URL en el cuadro de lista desplegable

Para quitar una dirección URL de la lista que se muestra en el cuadro de lista desplegable, debe realizar las siguientes acciones:
  • Quite la entrada de la lista option del código HTML.
  • Quite la entrada de la sección "switch (varItem)" del código de JScript.
Por ejemplo, para quitar el elemento de lista para el sitio Web de soporte técnico y Microsoft Help, siga estos pasos:
  1. Inicie Expression Web y, a continuación, abra la página que contiene el cuadro de lista desplegable.
  2. En el menú Ver , elija
    Páginay, a continuación, haga clic en código.
  3. Busque el código siguiente.
    <option>Microsoft Help and Support Home Page</option>
  4. Seleccione el código que encontró en el paso 3, haga clic en el código y, a continuación, haga clic en Eliminar.
  5. Busque el código siguiente.
    case 4:      window.location="http://support.microsoft.com";
    break;
  6. Seleccione el código que encontró en el paso 5, haga clic en el código y, a continuación, haga clic en Eliminar.
  7. En el menú archivo , haga clic en
    Guardar.
  8. En el menú archivo , elija
    Vista previa en el exploradory, a continuación, haga clic en el explorador que desea utilizar para obtener una vista previa de la página.
Propiedades

Id. de artículo: 928708 - Última revisión: 14 ene. 2017 - Revisión: 1

Comentarios