TABLA DE CONTENIDO CREACIÓN DE PÁGINAS WEB .......................................................................................................... 1 INTRODUCCIÓN .................................................................................................................................... 1 ESTRUCTURA DE UN DOCUMENTO HTML .................................................................................... 2 EJEMPLO DE UNA PÁGINA WEB UTILIZANDO LENGUAJE HTML ............................................ 4 CREACIÓN DE PÁGINAS WEB DESDE WORD .............................................................................. 13 PUBLICACIÓN DESDE WORD .......................................................................................................... 26 ENLACES Y VÍNCULOS ..................................................................................................................... 32 PUBLICACIÓN DE INFORMACIÓN CON EXCEL ........................................................................... 37 PUBLICACIÓN DESDE EXCEL.......................................................................................................... 45 PUBLICACIÓN DE INFORMACIÓN CON POWER POINT ............................................................. 52 PUBLICACIÓN DESDE POWER POINT ............................................................................................ 59 SHAREPOINT DESIGNER................................................................................................................... 63 MANEJO DE TEXTOS Y ESTILOS..................................................................................................... 70 GUARDAR PÁGINA WEB .................................................................................................................. 84 CREAR UN NUEVO ESTILO .............................................................................................................. 89 MANEJO DE IMÁGENES E HIPERVÍNCULOS ................................................................................ 98 IMÁGENES ........................................................................................................................................... 98 HIPERVÍNCULOS .............................................................................................................................. 125 INCORPORACIÓN DE LÍNEAS Y SÍMBOLOS ............................................................................... 135 TABLAS .............................................................................................................................................. 141 MARCOS ............................................................................................................................................. 153 PUBLICACIÓN DESDE SHAREPOINT DESIGNER ....................................................................... 182 ABRIR UNA CARPETA O SITIO WEB ............................................................................................ 182 PUBLICAR PÁGINAS DE SHAREPOINT DESIGNER ................................................................... 183
i
Páginas Web
CREACIÓN Y PUBLICACIÓN DE PÁGINAS WEB
CREACIÓN DE PÁGINAS WEB
INTRODUCCIÓN
El HTML (Hyper Text Markup Language) es un lenguaje de programación para crear documentos interactivos, como su nombre lo indica es un lenguaje de marcas para la creación de hipertextos. Estos documentos pueden ser visualizados por los visores o navegadores de páginas Web en Internet, como Internet Explorer. El lenguaje HTML esta basado en comandos que se insertan en lugares estratégicos en un texto ASCII. El lenguaje HTML, consta de una serie de órdenes, directivas o comandos, que indican al navegador la forma de representar los elementos (texto, imágenes, sonidos, video) que contenga el documento. Un comando HTML viene definida por una palabra o conjunto de palabras entre los signos < (menor que) y > (mayor que). Por ejemplo: <comando> En general, las etiquetas en html aparecen por pares, una de comienzo y otra de terminación que se acompaña con el signo / (slash). Ejemplo: <comando> TEXTO </comando> El olvido del slash (/) produce efectos imprevisibles al no cancelar el efecto de la etiqueta de apertura. Muchos de estos comandos pueden llevar parámetros asociados:
Pag. 1
Páginas Web
<comando parámetro = valor> TEXTO </comando> Existen diferentes tipos de comandos: Comandos Cerrados: Son aquellos etiquetas que se abren con <comando> y también se deben cerrar </comando>. Por ejemplo: <centrar> TEXTO </centrar> (Para centrar un texto) Comandos Abiertos: Son aquellos en que solo existen etiquetas de inicio y no de cierre. Por ejemplo: <hr> (Inserta una línea horizontal) Comandos con Parámetros: Son aquellas etiquetas que incluyen parámetros en el comando de inicio. Por ejemplo: <body bgcolor=”Pink”> TEXTO </body> (Color rosado para el fondo de la página) Los ficheros que contienen documentos HTML suelen contener la extensión .html o .htm. Los comandos HTML pueden ir escritos en mayúsculas o en minúsculas.
ESTRUCTURA DE UN DOCUMENTO HTML
Un documento creado en HTML contendrá básicamente los siguientes comandos: <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera
Pag. 2
Páginas Web
<TITLE> Indica el inicio del título TITULO DE LA PAGINA WEB </TITLE> Indica el final del título </HEAD> Indica el final de la cabecera <BODY> Indica el inicio del cuerpo del documento TEXTO CUERPO </BODY> Indica el final del cuerpo del documento </HTML> Indica el final del documento El documento se hallará en algún lugar servidor al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator), el camino o dirección que ha de seguir nuestro visor a través de Internet para acceder a un documento HTML. La estructura de una URL para una página Web permite acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo: http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del archivo que contiene la página Web escrita en HTML. En general el nombre de la página Web inicial de una empresa es index.html o index.htm. Por ejemplo: http://www.ute.edu.ec/vhcarrio/index.htm Donde: http:// es el protocolo de acceso a la página Web. www.ute.edu.ec es el dominio (nombre) del ordenador. /vhcarrio/ es el Directorio dentro del ordenador. index.htm es el fichero que contiene la página Web.
Pag. 3
Páginas Web
EJEMPLO DE UNA PÁGINA WEB UTILIZANDO LENGUAJE HTML
Ejecute el programa Bloc de notas (NotePad) ubicado en Accesorios (Accessories).
Edite el siguiente texto.
Pag. 4
Páginas Web
Guarde el documento con el nombre página1.htm en la carpeta curso avanzado en mis documentos (My documents) haciendo clic en Guardar Como (Save As) de la opción Archivo (File).
Pag. 5
Páginas Web
Abra el archivo página1.htm con el Explorador de Windows (Windows Explorer)
Pag. 6
Páginas Web
Se visualizará la pagina1.htm creada, en el Internet Explorer. La apariencia de su ventana será similar a la siguiente:
Pag. 7
Páginas Web
Si desea cambiar el código solamente deberá ir a la opción Ver (View) y escoger la opción Código fuente (Source) del menú del Internet Explorer. Se ejecutará el programa Bloc de notas (NotePad).
Pag. 8
Páginas Web
Modifique el color de la letra en el mensaje poniendo la directiva: <FONT COLOR=”Red”>Mensaje </FONT>
Pag. 9
Páginas Web
Guarde los cambios realizados en el archivo al cerrar el Bloc de notas (NotePad). Haga clic en el botón Si (Yes).
Pag. 10
Páginas Web
Escoja la opción Ver (View) y luego la opción Actualizar (Refresh) del menú del Internet Explorer o simplemente pulse F5.
Pag. 11
Páginas Web
La apariencia de su página será similar a la siguiente:
Pag. 12
Páginas Web
Ejercicio 1. Investigue sobre las directivas que utiliza HTML para crear tablas y formularios. 2. Cree las páginas web en el Bloc de notas, utilizando las directivas consultadas,
guárdelos
como
pagina2.htm
y
pagina3.htm
respectivamente en la carpeta curso avanzado.
CREACIÓN DE PÁGINAS WEB DESDE WORD
Con las herramientas de Word para la publicación de páginas en el Web, usted puede crear fácilmente una página de excelente aspecto o convertir un documento existente en una página web sin tener conocimiento previo de HTML. Para crear un archivo y que pueda verse en Internet, siga los siguientes pasos:
Pag. 13
Páginas Web
Edite un texto.
Pag. 14
Páginas Web
Escoja Guardar como (Save As), del Botón de Office (File), para desplegar un cuadro de diálogo similar al cuadro de diálogo Guardar Como, vista anteriormente. Escriba folleto web como nombre, y haga clic en el botón Guardar.
Pag. 15
Páginas Web
Si Word le indica que no puede convertir algunas de las características a HTML, haga clic en Continuar. Luego Word muestra Folleto Web en vista previa de la página web (Web Page Preview).
Pag. 16
Páginas Web
Una vez
que usted convierte un documento en una página web,
probablemente querrá darle vida, para lo cual deberá aplicarle opciones de formato que soporten los exploradores del Web. Agregue algunas líneas horizontales y cambie la textura del fondo y el color de la fuente. 1. Haga clic en Bordes de Pagina (Borders and Shading) del menú Diseño de Pagina (Page Layout).
Pag. 17
Pรกginas Web
Pag. 18
Páginas Web
2. En el cuadro de diálogo Bordes y sombreado (Borders and Shading), haga clic en la pestaña Bordes (Borders).
Pag. 19
Páginas Web
3. Haga clic en el botón Línea Horizontal (Horizontal Line) para desplegar este cuadro de dialogo:
Pag. 20
Páginas Web
Aquí puede seleccionar entre muchos diseños de líneas horizontales. 4. La apariencia de su página será similar a la siguiente:
5. Ahora cambie el fondo y el color de la fuente del archivo folleto web.
Pag. 21
Páginas Web
6. Presione Ctrl+Inicio para ver el comienzo de la página; luego escoja Efectos de relleno (Fill Effects) de la opción Color de Pagina (Page Color) del menú Diseño de Pagina (Page Layout).
Pag. 22
PĂĄginas Web
7. Haga clic en la pestaĂąa Textura (Texture) para ver estas opciones:
Pag. 23
Pรกginas Web
8. Elija uno de ellos y haga clic en el botรณn Aceptar (Ok) para aplicar esta textura al fondo del folleto. La apariencia de la pantalla serรก similar a la siguiente:
Pag. 24
Pรกginas Web
9. Seleccione un
pรกrrafo del texto de folleto web, haga clic en Color de
Fuente (Font Color)
en la barra de herramientas Inicio (Home) y
escoja el color Azul de la paleta.
10. Guarde los cambios. Su Pรกgina Web tendrรก la siguiente apariencia:
Pag. 25
Páginas Web
PUBLICACIÓN DESDE WORD
Para Guardar un archivo en un Servidor Web, haga clic en Inicio (Start), seleccione la opción Ejecutar (Run) y escriba la dirección en donde desea guardar sus archivos web. Ejemplo: \\192.188.51.1/profesor/paquita/Folleto
Pag. 26
Pรกginas Web
Pag. 27
Páginas Web
En esta dirección puede copiar directamente el archivo Web que desea publicar. Para esto debe abrir el Explorador de Windows (Windows Explorer), ubicar los archivos a copiar, seleccionar y con el botón derecho del Mouse seleccionar la opción Copiar (Copy)
Pag. 28
Páginas Web
Luego, en la dirección que tiene abierta procede a copiar con el botón derecho del Mouse y elige la opción Pegar (Paste), así:
Pag. 29
Pรกginas Web
Pag. 30
Páginas Web
Ahora, para ejecutar la aplicación, abrimos el Internet y digitamos la dirección correspondiente, así: http://192.188.51.1/profesor/paquita/Folleto/Folleto Web.htm, presionamos enter y la página se visualizará de la siguiente manera:
Pag. 31
Páginas Web
ENLACES Y VÍNCULOS
Usted puede agregar hipervínculos a sus Páginas Web de manera que quienes los ven puedan desplazarse a páginas vinculadas. Los hipervínculos se usan con frecuencia para direcciones de otros sitios web y de correo electrónico. Por ejemplo, si un documento Web hace referencia a una hoja de cálculo específica de ventas, usted puede crear un hipervínculo a la hoja de cálculo, de manera que quienes ven el documento puedan desplazarse inmediatamente a ese archivo. Como demostración agregaré un hipervínculo a la Página Web de la Universidad Tecnológica Equinoccial en el documento Folleto Web. Siga los pasos que enunciamos a continuación: Al final del documento Folleto Web, escriba un texto que servirá para enlazar a la Página Web de la Universidad Tecnológica Equinoccial, luego seleccione este texto y en el menú Insertar (Insert), elija la opción hipervínculo (Hyperlink), así:
Pag. 32
Páginas Web
En el cuadro de diálogo Insertar Hipervínculo (Insert Hyperlink), escriba
http://www.ute.edu.ec
en
Dirección
(Address)
y
posteriormente haga clic en Aceptar (OK).
Pag. 33
Páginas Web
Word da formato de hipervínculo al texto seleccionado: cambia su color a azul claro y lo subraya. Así:
Pag. 34
Páginas Web
Antes de publicar su Página Web, obtenga una vista preliminar de ella en su explorador de Web para asegurarse que todo aparece
Pag. 35
Páginas Web
correctamente. Elija la opción Vista de Página Web (Web Page Preview). Aquí le mostramos como se ve el hipervínculo.
Cuando hace clic sobre un hipervínculo en un documento, el programa muestra la barra de herramientas Web, la cual puede utilizar para tener acceso fácilmente a Internet. El resultado sería:
Pag. 36
Páginas Web
PUBLICACIÓN DE INFORMACIÓN CON EXCEL
Con las herramientas de Excel para la publicación de páginas en el Web, usted puede crear fácilmente una página de excelente aspecto o convertir un libro existente en una Página Web sin tener conocimiento previo de HTML. Para crear un libro y que pueda verse en Internet, hacemos:
Edite el libro con la siguiente información:
Pag. 37
Pรกginas Web
Pag. 38
Páginas Web
Seleccione Guardar como
(Save as ), del Botón Office (Office
Button), para desplegar un cuadro de diálogo similar al cuadro de diálogo Guardar Como, vista anteriormente. Escriba Ventasweb como nombre, y haga clic en el botón Guardar (Save) para almacenar esta versión del documento en la carpeta que usted elija.
Pag. 39
Pรกginas Web
Pag. 40
Pรกginas Web
Pag. 41
Páginas Web
Si Excel le indica que no puede convertir algunas de las características a HTML, haga clic en Continuar (Continuos).
Excel puede mostrar Ventasweb como página web en Vista previa (Preview).
Su página se mostrará con el Internet Explorer. La apariencia será similar a la siguiente:
Pag. 42
Páginas Web
Ahora, para darle vida a la página puede agregarle algunos estilos de formato, como son, bordes, sombreados, tipos de letra, tamaños, etc. La apariencia de su página será similar a la siguiente:
Pag. 43
Páginas Web
Excel puede mostrar Ventasweb como Página Web en Vista previa de (Preview). De la siguiente manera:
Pag. 44
Páginas Web
PUBLICACIÓN DESDE EXCEL
Debido a que en mis sitios de red ya existe el acceso directo a la carpeta, únicamente debe seleccionar la carpeta en la cual deseamos guardar. Así: En el Botón de Office (Office Button), seleccione la opción Guardar como (Save as), y le aparecerá la siguiente pantalla, en la cual deberá seleccionar Mis sitios de Red (My Network Places), así:
Pag. 45
Páginas Web
Luego seleccione la carpeta en la cual va a publicar, en el caso del ejemplo será la carpeta Paquita.
Pag. 46
Páginas Web
En la siguiente pantalla debemos elegir la carpeta Folleto, que es la que creamos para publicar nuestras páginas Web, y finalmente hacemos clic en la opción de Grabar (Save), Así:
Pag. 47
Páginas Web
Seleccionada la carpeta, procedemos a publicar el libro (botón Publicar (Publish)):
Pag. 48
Páginas Web
Finalmente, el cuadro de diálogo permite la publicación del libro.
Pag. 49
Páginas Web
En el browser aparecerá el libro publicado
Pag. 50
Páginas Web
Ejercicio
Realice un libro con los datos poblacionales: Niños 5’000.00, jóvenes 4’500.000 y ancianos 3’000.000
Realice un grafico tipo pastel.
Guárdelo como Página Web con el nombre población en el directorio curso avanzado.
Publíquelo y muéstrelo utilizando el Internet Explorer.
Pag. 51
Páginas Web
PUBLICACIÓN DE INFORMACIÓN CON POWER POINT
Con las herramientas de Power Point para la publicación de páginas en el Web, usted puede crear fácilmente una página de excelente aspecto o convertir una presentación existente en una página Web sin tener conocimiento previo de HTML. Para crear una presentación y que pueda verse en Internet, hacemos: Edite la presentación que contenga dos diapositivas. La primera diapositiva contendrá el título de la presentación, una imagen. Ponga efectos de relleno. Inserte una imagen1 de extensión gif
Pag. 52
Páginas Web
Inserte una diapositiva nueva con la plantilla Título y texto (Title and Text) donde ingrese la siguiente información: o o
Título: Objetivos Viñeta 1: Capacitar al estudiante en las herramientas computacionales de oficina.
o
Viñeta 2: Entregar guías de aprendizaje sobre Office.
Pag. 53
Pรกginas Web
Pag. 54
Páginas Web
Escoja Otros Formatos (Other Formats) de la opción Guardar como
(Save as ), del menú, se despliega un cuadro de diálogo
similar al cuadro de diálogo Guardar Como, vista anteriormente.
Pag. 55
Páginas Web
Escriba ofimática a distancia como nombre y haga clic en el botón Guardar (Save) para almacenar esta versión del documento.
Pag. 56
Páginas Web
Si Power Point le indica que no puede convertir algunas de las características a HTML, haga clic en Continuar (Continuos). Power Point puede mostrar ofimática a distancia como página Web en Vista previa (Preview). Internet Explorer le permite visualizar su presentación.
Pag. 57
PĂĄginas Web
ď&#x192;ź
Haga clic la palabra objetivos para visualizar la diapositiva 2.
Pag. 58
Páginas Web
Una vez que usted convierte una presentación en una Página Web, probablemente querrá mejorarlo, para lo cual deberá aplicarle opciones de formato que soporten los exploradores del Web. Cambie tipo y color a la letra y agregue efectos de transición a las diapositivas. Publique su presentación en Internet en la carpeta Docentes.
PUBLICACIÓN DESDE POWER POINT
En el cuadro de diálogo se escoge Guardar como (Save as), y al hacer clic en el botón Publicar (Publish) aparecerá el siguiente cuadro:
Pag. 59
Pรกginas Web
Pag. 60
P谩ginas Web
En el Browser la direcci贸n es http://192.188.51.1/profesor/paquita/Folleto/Ofimatica distancia
La presentaci贸n aparece as铆:
Pag. 61
Páginas Web
Ejercicio
Cree una presentación con tres diapositivas relacionados a un tema de la especialidad que usted cursa.
Guárdelo como Página Web con el nombre tema.
Publíquelo y muéstrelo por el Internet Explorer.
Pag. 62
Páginas Web
SHAREPOINT DESIGNER
SharePoint Designer es una herramienta utilizada para ayudarle a crear páginas Web de apariencia profesional y bien diseñada, SharePoint Designer incluye varias plantillas que permiten crear rápidamente páginas con una gran variedad de diseños y funciones. Por ejemplo, puede utilizar una plantilla de SharePoint Designer para crear una página de dos columnas o una página con un formulario de búsqueda. También puede utilizar uno de los temas para crear páginas con un diseño coherente. Los temas contienen elementos de diseño unificados con una combinación de colores, lo que incluye fuentes, gráficos, fondos, barras de exploración, líneas horizontales y otros elementos de página.Al ingresar a SharePoint Designer se abre una página como esta:
Barra de Menú
Barra de Herramientas Estándar
Barra de Herramientas Formato
Nombre de la Página
Área de Trabajo
Modos de Visualizació n
Pag. 63
Páginas Web
Barra de Herramientas Estándar
Barra de Menú
Barra de Herramientas Formato
Nombre de la Página
Área de Trabajo
Modos de Visualización
Se visualiza los siguientes elementos: La barra de menú con las siguientes opciones: Archivo (File) (Nuevo (New), Abrir (Open), Guardar (Save)), Edición (Edit) (Cortar (Cut), Pegar (Paste) Deshacer (Undo)), Ver (View)(Pagina (Page), Carpetas (Fólders)), Insertar (Insert) (Línea Horizontal (Horizontal Line), Imagen
(Picture),
Component)),
Hipervínculo
Formato
(Hyperlink),
(Format)
(Fuente
Componente
(Font),
Viñetas
Web y
(Web
esquemas
numerados (Bullets and Numbering), Bordes y Sombreados (Borders and Shading)),
Herramientas
(Tools)
(Ortografía
(Spelling),
Sinónimos
(Thesaurus)), Tabla (Table)(Dibujar (Draw Table)), Insertar Tabla (Insert
Pag. 64
Páginas Web
Table)), Marcos (Frames) (Dividir (Split), Eliminar (Delete), Propiedades (Properties)), Ventana
(Window)(Nueva Ventana (New Window)), Ayuda
(Help). La barra de herramientas estándar con los iconos: nuevo (New), Abrir (Open), Carpetas (Folders), Guardar (Save), Internet Explorer
Vista Previa de Pagina en
(Preview in Windows Internet Explorer), Componentes
(Components), Tablas (Tables), etc. La barra de herramientas de Formato con los botones: Estilo (Style), Fuente (Font), Tamaño de Fuente (Font Size). La ventana en blanco para editar la Página Web. Observe que estamos en Vista-Página y que en la parte inferior izquierda hay tres botones: Diseño de la Pagina (Design), Codigo html (Code). Diseño de la Página, el botón Design es el lugar donde se trabaja una Página Web. El botón Code nos permite visualizar la Página Web en instrucciones del lenguaje de marcado de hipertexto. En la Barra de Herramientas Estándar se visualiza los siguientes elementos:
Insertar Hipervínculo
Publicar Web
Insertar Tabla Vista Previa
Insertar Imagen
Lista carpetas (Folder List).- Dedica una parte de la ventana de la vista a la estructura de carpetas. Es interesante a medida que el sitio Web se complica. Funciona de manera semejante al Explorador de Windows. Puede abrir una página haciendo doble clic en ella, desplegar y replegar carpetas, haciendo clic en los símbolos + y -, hacer clic derecho con el ratón para obtener un menú contextual, mover y renombrar archivos.
Pag. 65
Páginas Web
Vista Previa (Preview en Browsers).- Muestra la página tal como se verá con un navegador Internet. Para ver la página es necesario grabarla previamente. Componente Web (Web Component).- Incluye todos los elementos que podemos incluir en una página Web con más atracción y calidad. Insertar Tabla (Insert Table).- Permite incluir tablas en una Página Web. Insertar Imagen desde archivo (Insert Picture From File).-Nos permite incluir imágenes en nuestra Página Web grabadas en el disco. Insertar Hipervínculo (Insert Hyperlink).- Nos permite incluir hipervínculos en una página Web ya sea diseccionándola a un archivo en el disco duro o una dirección de Internet. Para crear una página Web puede hacer clic en la flecha a la derecha del botón Nuevo (New) de la barra de herramientas Estándar
; así:
Pag. 66
Páginas Web
Hacer clic en Nuevo (New) y Página o Web (Page or Web) del menú Archivo (File).
Pag. 67
Páginas Web
Esto implica que el nombre de la nueva página aparezca en la pestaña arriba del área de edición como página_nueva_1.htm
Pag. 68
Páginas Web
Nombre de la Nueva Página
Nombre de la Nueva Página
Se recomienda poner nombres en minúsculas y no se permiten caracteres que no sean lícitos para nombres de archivos.
Pag. 69
Páginas Web
Es preferible diseñar y crear nuestras propias páginas, para ello puede comenzar con una página en blanco:
Agregue elementos de página, como texto, gráficos, titulares de página, tablas, hipervínculos, titulares, marquesinas, etc.
Dé formato al texto mediante la aplicación de estilos.
Anime elementos de página y establezca transiciones de página para conseguir páginas más interesantes.
Establezca el color, la imagen o el sonido de fondo.
Cree sus propias plantillas de página.
MANEJO DE TEXTOS Y ESTILOS
Es recomendable comenzar con elegir un tema de formato. Son parecidos a los señalados en Word, pero mucho más completos, varios niveles de viñetas, la línea horizontal sale mejor y tiene propuestas para los botones. SharePoint Designer es más limitado que Word a la hora de tratar el texto. Tiene bastantes menos posibilidades, por ejemplo no admite la justificación a ambos lados, derecha e izquierda a la vez, no funciona el tabulador. Un ESTILO es una combinación de configuración de fuentes y párrafos. Utilice estilos para dar formato a su texto con rapidez y coherencia. Por ejemplo, aplique el estilo Encabezado 1 (Heading 1) a todos los encabezados para que tengan la misma apariencia. El uso de estilos también ahorra tiempo, porque en lugar de cambiar la configuración de las fuentes y los párrafos de cada encabezado por separado, simplemente especifica el estilo que utilizará. Además de los estilos para los Encabezados (Heading), también puede utilizar el estilo Viñetas (Bullets), que aplica sangría al texto y agrega viñetas, y el estilo Numeradas (Numbering), que aplica sangría al texto y numera los párrafos. Cuando aplica un estilo al texto, el estilo se aplica a todo el texto del párrafo. 1. En la vista Página (Page), seleccione el párrafo.
Pag. 70
Páginas Web
2. Realice las acciones siguientes para aplicar el estilo a los títulos:
Haga clic en un estilo en el cuadro Estilo (Style).
Pag. 71
PĂĄginas Web
ď&#x192;ź Para aplicar con rapidez el estilo Encabezado, haga clic en Encabezado 1 (Heading 1).
Pag. 72
Pรกginas Web
Pag. 73
Páginas Web
Haga clic en el botón de alineación Centrar (Center) y escriba Datos personales.
Pag. 74
Páginas Web
3. Realice las acciones siguientes para aplicar el estilo al listado con numeración:
Haga clic en el botón de la barra de herramientas Formato Numeración (Numbering)
o elija el estilo Lista Numerada (Numbered List).
Pag. 75
Pรกginas Web
Pag. 76
Páginas Web
Escriba los siguientes datos: 1. Nombres y Apellidos: 2. Dirección: 3. Teléfono: 4. Fecha de nacimiento: 5. Estado civil:
4. Realice las acciones siguientes para aplicar el estilo de viñetas para editar un listado con este estilo: Elija el estilo Encabezado 1 (Heading 1) y escriba Estudios Realizados. Haga clic en el botón Viñetas (Bullets) de la barra de herramientas Formato.
Pag. 77
Pรกginas Web
Pag. 78
Páginas Web
Escriba los siguientes datos: o
Primaria:
o
Secundaria:
o
Superior:
La aplicación de los estilos dará como resultado la siguiente página:
Pag. 79
Pรกginas Web
Pag. 80
Pรกginas Web
Visualice ahora el cรณdigo HTML que ha generado su pรกgina, haga clic en el botรณn Modo de visualizaciรณn CODE.
Pag. 81
Pรกginas Web
Ahora visualice su pรกgina como si lo estuviera exhibiendo desde el navegador (Internet Explorer), para ello haga clic en el botรณn Vista previa (Preview) en la Barra de Herramientas Estandar.
Pag. 82
Pรกginas Web
Pag. 83
Páginas Web
GUARDAR PÁGINA WEB
Guarde esta página con el nombre estilo prueba en la carpeta pruebaweb creada en Mis documentos (My Documents). Elija Guardar Como (Save as) del menú Archivo (File).
Pag. 84
Pรกginas Web
En el cuadro de diรกlogo Guardar Como (Save as), cree la carpeta pruebaweb haciendo clic en el botรณn Nueva carpeta (New Folder)
y pulse Aceptar
(Ok).
Pag. 85
Pรกginas Web
Escriba estiloprueba en el รกrea Nombre de archivo (File Name) y haga clic en el botรณn Guardar (Save).
Pag. 86
Páginas Web
Finalmente se mostrará en la pestaña del área de trabajo, el nombre de la página creada.
Nombre nuevo de la Página
Pag. 87
Pรกginas Web
Nombre nuevo de la Pรกgina
Pag. 88
Páginas Web
CREAR UN NUEVO ESTILO
También podemos crear nuestro propio ESTILO y dar el formato deseado personalizando el diseño de la página, para ello realice los siguientes pasos: Elija Nuevo Estilo (New Style) del menú Formato (Format).
Pag. 89
Pรกginas Web
Pag. 90
Páginas Web
Se visualiza el cuadro de dialogo Nuevo Estilo:
Pag. 91
Páginas Web
Escriba estilonuevo en el área selector del cuadro de dialogo Nuevo Estilo (New Style):
Pag. 92
Pรกginas Web
Pag. 93
Páginas Web
Haga clic en Fuente (Font).
Pag. 94
Páginas Web
Elija el tipo de letra Book Antiqua, tamaño de fuente (font-size) medium, ancho de fuente (font-weight) bold, estilo de la fuente (fontstyle) italic, color azul marino y luego pulse e botón Aceptar (Ok).
Pag. 95
Páginas Web
Finalmente elija Bordes (Border) con estilo surco (dashed), ancho del borde (border-width) medium y color aqua y haga clic en el botón Aceptar (Ok).
Pag. 96
Páginas Web
Usted podrá visualizar el estilo creado con el nombre de estilonuevo en el cuadro Estilo en la parte derecha inferior de la pantalla, para su aplicación en el diseño de la página web cuando lo requiera.
Estilo nuevo creado por el usuario
Pag. 97
Páginas Web
Estilo nuevo creado por el usuario
Ejercicio:
Cree una Página Web la misma que contenga información sobre un tema de la especialidad que usted cursa, creando un estilo propio y la aplicación de los ya existentes tanto para el encabezado, viñetas, numeración y lista de menús.
Guárdelo como Página Web con el nombre especialidad en la carpeta Mi Web de Mis Documentos (My Documents).
MANEJO DE IMÁGENES E HIPERVÍNCULOS IMÁGENES
Al trabajar con imágenes en un sitio Web es importante saber que los archivos que se manejan en Internet pueden ser de diferentes clases como por ejemplo: jpg, jpeg y gif.
Pag. 98
Páginas Web
Los jpeg se utilizan para fotografías, las cuales al utilizar este formato comprimido, ocupan menos espacio pero con la diferencia de bajar un poco en la calidad de nitidez. El formato gif se utiliza para títulos, logotipos y gráficos con menos de 256 colores. Si el fichero no es de fotografía, sino que utiliza colores planos, entonces suele manejar pocos colores. Si no llega a 256 colores, SharePoint Designer guardará la imagen en formato GIF. En cambio los ficheros de fotos los guarda en formato JPEG que realiza cierta compresión de la imagen. Lo que pasa es que un fichero de fotografía ocupa muchísimo espacio (una pantalla viene a ser 1.5 Mb) y es necesario reducirlo, aunque sea a costa de un poco de calidad. Para incluir imágenes en las páginas diseñadas en SharePoint Designer, realice lo siguiente:
Elija Imagen (Picture) del menú Insertar (Insert). SharePoint Designer ofrece las imágenes instaladas con el paquete, pero, podemos buscar cualquier fichero de imágenes en las unidades de su PC seleccionando la opción Desde Archivo (From File).
Pag. 99
Páginas Web
Cuando se insertan imágenes desde cualquier unidad o de un programa como el Office, el SharePoint Designer únicamente crea el vínculo correspondiente a esa imagen en su ubicación actual. Al enviar la página al proveedor que nos la aloja, no tendrá esa unidad y no aparecerá la imagen. La solución es empezar
Pag. 100
Páginas Web
por copiar la imagen a la carpeta en la que estamos trabajando la Página Web e insertarla desde ahí. Otra forma de insertar una imagen es crearla y organizarla en otro programa y después cortar y pegarla en el SharePoint Designer. Para ilustrar como ejemplo, creemos una página nueva con el nombre dibujo en el directorio Pruebaweb, insertando imágenes propias de SharePoint Designer (imágenes prediseñadas) y o seleccionando un archivo de su PC. Así:
Haga clic en Página Web (Page or Web) de la opción Nuevo (New) del menú Archivo (File).
Pag. 101
Páginas Web
Del menú que se desplegó, elija la opción de Web Vacío (Empty Web) y posteriormente debe elegir el directorio en el cual desea crear la Página Web, haciendo un clic en el botón Mostrar (Browse).
Pag. 102
Páginas Web
Posteriormente
debe
seleccionar
la
carpeta
Mis
Documentos
(My
Documents) y crear una carpeta denominada Mi Web, así:
Pag. 103
Páginas Web
Presiona el botón Aceptar (Ok) y visualizará la siguiente pantalla, en la que debe presionar el botón Abrir (Open) e inmediatamente regresará a la ventana principal en la cual debe presionar el botón Aceptar (OK).
Pag. 104
Pรกginas Web
Pag. 105
Páginas Web
Presiona el botón Aceptar (Ok) inmediatamente visualizará la siguiente pantalla en la cual le está indicando que se está creando el nuevo sitio Web en la Carpeta que se creó en Mis Documentos (My Documents).
Pag. 106
Páginas Web
Realizados todos los pasos anteriores, se encuentra listo el sitio para comenzar a trabajar. Así:
Pag. 107
Páginas Web
Creado el sitio, debemos comenzar a crear las páginas, para ello hacemos clic en el icono de nuevo y seleccionar la opción de Página (Page), así:
Pag. 108
Pรกginas Web
Pag. 109
Páginas Web
La pantalla que nos muestra es la siguiente, en la cual debemos elegir el tipo de página que deseamos crear, que pueden ser páginas html, aspx, master page, xml, para el ejercicio
elegiremos una página html, e
inmediatamente presionamos el botón de Aceptar (OK), así:
Pag. 110
Páginas Web
Ahora, hacemos clic en Imagen Prediseñadas (Clip Art) de la opción Imagen (Picture) del menú Insertar (Insert).
Pag. 111
Páginas Web
En la parte derecha de la pantalla se visualiza la lista de colecciones de imágenes que usted puede escoger:
Pag. 112
Páginas Web
Haga clic en Search in y seleccione Colecciones de Office (Office Collections) para desplegar todas las categorías incluidas en su PC.
Pag. 113
PĂĄginas Web
ď&#x192;ź Seleccione la imagen Computadoras (Computers) .
Pag. 114
PĂĄginas Web
ď&#x192;ź Haga clic en la flecha al lado derecho de la imagen seleccionada y luego en Copiar (Copy).
Pag. 115
Páginas Web
Cierre la Galería multimedia de Microsoft (Microsoft Clip Organizar), haga un clic Pegar (Paste)
de la barra de herramientas Estándar. La
apariencia de su página será similar a la siguiente:
Pag. 116
Pรกginas Web
Pag. 117
Páginas Web
Para insertar una imagen desde un archivo, haga clic en Desde Archivo (From File) de la opción Imagen (Picture) del menú Insertar (Insert).
Pag. 118
Páginas Web
Ó, seleccione un archivo de imagen con extensión gif de la Lista de colecciones.
Pag. 119
PĂĄginas Web
ď&#x192;ź Haga clic en la flecha al lado derecho de la imagen seleccionada y luego en Copiar (Copy).
Pag. 120
Páginas Web
Cierre la Galería multimedia de Microsoft, haga un clic Pegar (Paste) de la barra de herramientas Estándar. La apariencia de su página será similar a la siguiente:
Pag. 121
Pรกginas Web
Pag. 122
Páginas Web
Guarde la página con el nombre Dibujo en la carpeta Mi Web de Mis documentos (My Documents).
Pag. 123
Páginas Web
Escriba bajo la primera imagen, Imagen Prediseñada, en la segunda Imagen Desde archivo, centre el texto y las imágenes y visualice la página con el modo Vista previa (Preview). El resultado será el siguiente:
Pag. 124
Páginas Web
Ejercicio Cree una nueva página con el nombre académico donde inserte una imagen estática y una imagen animada.
HIPERVÍNCULOS
Así como los libros son secuénciales: una letra y otra y una página y así hasta el final; los documentos multimedia no; son hipertextos. El visitante va a navegar por los apartados que más interés le ofrecen, se detiene en un punto, vuelve atrás: navega. Como consecuencia, documentos como páginas Web no constan de un único fichero secuencial, sino de muchos ramificados. Por lo tanto hay que organizar las posibilidades de navegación de una pantalla a
Pag. 125
Páginas Web
otra. Ha de plantearse una navegación clara, sin confusiones, sabiendo en todo momento donde estamos. Cuando se va a crear una página Web es importante pensar en los contenidos y su estructura, dedicando una página para cada tema que tenga cierta entidad o cierta unidad, y estableciendo los vínculos correspondientes entre páginas. Como ven nos estamos refiriendo a un sitio Web, que está compuesto por varias páginas Web. Suponiendo que ya sabes crear páginas aisladas, se trata ahora de estudiar como se crean los vínculos, los botones que llevan de una página a otra. Selecciona la palabra o palabras o la imagen a las que vas asociar el hipervínculo y haga clic en Hipervínculo (Hyperlink) del menú Insertar (Insert).
Pag. 126
Páginas Web
Se muestra el cuadro de diálogo Insertar Hipervínculo (Insert Hyperlink).
Pag. 127
Páginas Web
Escoge la carpeta pruebaweb, en pantalla salen las páginas de tu sitio Web, y con doble clic elige estiloprueba, has creado el hipervínculo. Lo que has hecho con el doble clic es poner en la Dirección URL el nombre del fichero de la página de destino, sin http://. Haga clic en Aceptar (Ok).
Pag. 128
Páginas Web
Grabe la página con los cambios, al abrirla desde un navegador los vínculos salen subrayados y en color distinto, si eran vínculos asociados a unas palabras. En cualquier forma el puntero del ratón toma forma de mano al pasar por encima. Además, si detiene el ratón, puede ver la dirección de destino a la que remite.
Pag. 129
Páginas Web
Mire la página con modo de visualización Vista previa (Preview) y haga clic en el hipervínculo.
Pag. 130
Páginas Web
Puede crear un vínculo a un sitio Web externo, es decir, crear en su página un enlace, por ejemplo a la página inicial de la UTE. Eso se llama crear un hipervínculo externo. Para eso en la casilla Dirección URL se debe poner la dirección
completa,
comenzando
con
http://,
por
ejemplo
http://ute.edu.ec, así, escojo la imagen y la opción Hipervínculo (Hyperlink) del menú Insertar (Insert).
Pag. 131
Pรกginas Web
Pag. 132
Páginas Web
En el cuadro de diálogo Insertar Hipervínculo (Insert Hyperlink) en Dirección URL (Address) escriba http://www.ute.edu.ec y luego Aceptar (Ok).
Visualice su página con el modo de visualización Vista previa (Preview).
Pag. 133
Páginas Web
Ejercicio
Cree una Página Web que contenga imágenes prediseñadas y alguna imagen que se encuentran en las unidades instaladas en su PC, con extensión .jpeg o .gif
Realice hipervínculos hacia la página pruebaweb y hacia la dirección google.com.
Guárdelo como Página Web con el nombre dibujohiper en el directorio miweb.
Publique y muestre la página utilizando el Internet Explorer.
Pag. 134
Páginas Web
INCORPORACIÓN DE LÍNEAS Y SÍMBOLOS
Adhiera en su la Página Web estilopropio una línea horizontal debajo de cada encabezado, para ello siga los siguientes pasos: Elija Línea Horizontal (Horizontal Line) del menú Insertar (Insert).
Pag. 135
Páginas Web
La apariencia de su página con líneas horizontales después de cada encabezado será similar a la siguiente:
Pag. 136
Pรกginas Web
Pag. 137
Páginas Web
Para insertar un símbolo, elegimos la opción Símbolo (Symbol) del menú Insertar (Insert).
Pag. 138
Páginas Web
Elija el símbolo @ y pulse Insertar (Insert).
Pag. 139
Páginas Web
El símbolo aparecerá en la página en la posición en la que se encontraba el cursor.
Pag. 140
Páginas Web
TABLAS
Cree una página nueva con el nombre tablasweb en el directorio prueba web, para insertar una tabla con la siguiente información:
NOMBRES
NIVEL ESPECIALIDAD
EDAD
Andres Freire
5D
Informática
22
Carolina Patiño
7A
Hotelería
25
Oscar Guerrero
1D
Comercio
29
Elija Insertar (Insert), luego Tabla (Table) del menú Tabla (Table).
Pag. 141
Páginas Web
En el cuadro de diálogo Insertar tabla (Insert Table), puede ingresar él número de filas y columnas, alineación, ancho (en porcentaje o píxeles), tamaño del borde, margen de celdas y espacio entre celdas, luego pulse Aceptar (Ok):
Pag. 142
Pรกginas Web
Pag. 143
Páginas Web
Escriba 4 en filas y 4 en columnas en la opción de Tamaño (Size), Alineación (Alignment) Centrar (Center) y 2 en Tamaño del borde (Border Size).
Pag. 144
Pรกginas Web
Pag. 145
Páginas Web
Se presentará la siguiente tabla en la página:
Pag. 146
Páginas Web
Escriba la información indicada al inicio de esta sección y como encabezado Lista de Estudiantes. La apariencia de su página será similar a la siguiente:
Pag. 147
Páginas Web
Puede personalizar su tabla seleccionando el formato que usted desee. Para ello elija Propiedades (Table Properties) del menú Tabla (Table).
Pag. 148
Páginas Web
En el cuadro de diálogo Propiedades de la tabla (Table Properties) podrá elegir color o imagen de fondo, color de bordes, estilo de fuentes, espacio entre celdas:
Pag. 149
Pรกginas Web
Pag. 150
Páginas Web
Haga clic en el botón de flecha en el área Fondo (Background) para elegir los parámetros del color de fondo de la tabla, escoja Aguamarina (Aqua) y haga clic en el botón Aceptar (Ok):
Pag. 151
Páginas Web
Visualice su página con los datos ingresados y cambios de formato, tenemos:
Pag. 152
Páginas Web
Adicionalmente
en
el
menú
Tabla
(Table),
existen
diversas
opciones
semejantes a las que aparecen en Microsoft Word que usted ya conoce, como son: Insertar (Insert) Filas (Rows), Columnas (Colums) y Celdas (Cell), Eliminar (Delete): Filas (Rows), columnas (Colums) y Celdas (Cell), Dividir Celdas (Split Cells), Combinar Celdas (Merge Cells), Seleccionar (Select): Tabla (Table), Filas (Rows), Columnas (Columns), Celdas (Cells) y Autoajustar (AutoFit of Contents), que usted puede utilizar para mejorar la apariencia de su tabla según su necesidad. Ejercicio
Cree una Página Web
que contenga dibujos, una tabla con datos
personales de 5 compañeros, con el nombre y apellido, su dirección, teléfono, fecha de nacimiento y género.
Agregue un título (listado de compañeros) a la tabla, inserte una imagen como fondo, 2 puntos en ancho de bordes, Divida a la celda género en F(femenino) y M(masculino).
Guárdelo como Página Web con el nombre listado1 en el directorio pruebaweb.
MARCOS Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en distintas zonas denominadas marcos, cada una de las cuales puede mostrar una página diferente. Por ejemplo, una página de marcos creada mediante la plantilla de página de marcos Titular y contenido contiene tres marcos: Titular, Contenido y Principal.
El marco Titular
El marco Contenido
El marco Principal
Puede crear una página de marcos mediante una de las plantillas de página de marcos de Microsoft FrontPage. En cada una de estas plantillas, la exploración
Pag. 153
Páginas Web
entre marcos ya está configurada. Después de crear la página de marcos a partir de una plantilla, sólo tendrá que establecer la página inicial que desee mostrar en cada marco. Puede seleccionar una página existente o crear una página nueva. Después podrá modificar la página directamente en el marco. Todo sitio Web tiene como página principal una página HTML con marcos llamada index.htm o default.htm. A continuación vamos a crear nuestra página principal index.htm utilizando una plantilla definida por SharePoint Designer que vincule a las páginas diseñadas anteriormente. Siga los siguientes pasos: Haga clic en Página o web (Page or Web) de la opción Nuevo (New) del menú Archivo (File).
Pag. 154
Páginas Web
Haga clic Paginas de marcos (Frames Pages ) en el área nuevo del panel Nueva página o Web (New Page or Web) y seleccione Titular y contenido (Banner and Contents) y luego Aceptar (Ok).
Pag. 155
Páginas Web
Se visualizará una pantalla similar a la siguiente:
Pag. 156
Páginas Web
En el marco Titular (Banner) (marco superior), haga clic en el botón Nueva Página (New Page). Se le presentará el área de trabajo como si se tratase de una página en blanco.
Pag. 157
Pรกginas Web
Pag. 158
Páginas Web
Seleccione Componente Web (Web Component) del menú Insertar (Insert).
Pag. 159
Páginas Web
Seleccione Marquesina (Marquee) y haga clic en Finalizar (Finish).
Pag. 160
Páginas Web
En el cuadro de diálogo Propiedades de la marquesina (Marquee Properties), escriba el Texto: Curso de SharePoint Designer y Color de fondo (Background Color): verde (Green) y luego Aceptar (Ok).
Su página con marcos será similar a la siguiente:
Pag. 161
Pรกginas Web
Pag. 162
Páginas Web
En el marco Contenido (Contents) marco de la izquierda, haga clic en nueva página para generar el siguiente listado de opciones con el encabezado Menú y una línea horizontal de separación: Menú o
Estilo
o
Imágenes
o
Tablas
La apariencia de la página index.htm será similar a la siguiente:
Pag. 163
Páginas Web
Seleccione la palabra Estilo de la lista de opciones y seleccione la opción Hipervínculo (Hyperlink) del menú Insertar (Insert).
Pag. 164
PĂĄginas Web
ď&#x192;ź Seleccione el archivo estiloprueba de la carpeta pruebaweb.
Pag. 165
Páginas Web
Haga clic en Aceptar (Ok) para cerrar el cuadro de diálogo Insertar Hipervínculo (Insert Hyperlink). La apariencia de su página será similar a la siguiente:
Pag. 166
Páginas Web
Cree hipervínculos de las restantes opciones del listado a las páginas dibujo y tablasweb respectivamente para mostrarse en el marco principal.
Pag. 167
Páginas Web
La página con marcos será similar a la siguiente:
Pag. 168
Pรกginas Web
Pag. 169
Páginas Web
Elija Botón (Hover Button)
en la opción Componente Web
(Web Component) de la opción Insertar (Insert) para crear un botón. Seleccione
el
botón
y
realice
un
hipervínculo
a
la
dirección
http://www.google.com. Elija Guardar como (Save as) del menú Archivo (File). Guarde como Index ó Default en la carpeta MiWeb de Mis Documentos (My Documents).
Pag. 170
Páginas Web
Haga clic en el botón Guardar (Save). Le aparecerá nuevamente el cuadro de diálogo Guardar como (Save as), escriba marquesina en el Nombre de archivo (File Name). Confirme que esté ubicado en la carpeta MiWeb.
Pag. 171
Páginas Web
Haga clic en el botón Guardar (Save). Le aparecerá nuevamente el cuadro de diálogo Guardar como (Save as), escriba menú en el Nombre de archivo (File Name). Confirme que esté ubicado en la carpeta MiWeb.
Pag. 172
Páginas Web
Haga clic en el botón Guardar (Save). La apariencia de su página será similar a la siguiente:
Pag. 173
Páginas Web
Mire su página con marcos visualizándola con el modo Vista previa (Preview).
Pag. 174
Pรกginas Web
Pag. 175
Páginas Web
Haga clic en Estilo. Se mostrará la página estiloprueba en el marco principal.
Pag. 176
Pรกginas Web
Pag. 177
Páginas Web
Haga clic en Imágenes. Se mostrará la página dibujo en el marco principal.
Pag. 178
Pรกginas Web
Pag. 179
Páginas Web
Haga clic en Tablas. Se mostrará la página tablasweb en el marco principal.
Pag. 180
Pรกginas Web
Pag. 181
Pรกginas Web
PUBLICACIร N DESDE SHAREPOINT DESIGNER
ABRIR UNA CARPETA O SITIO WEB
Abrir una carpeta: en SharePoint Designer, puede abrir la carpeta desde mis sitios de red, y trabajar las pรกginas directamente desde la carpeta
Pag. 182
Pรกginas Web
PUBLICAR Pร GINAS DE SHAREPOINT DESIGNER
En mis sitios de red escoger la carpeta en la cual desea publicar:
Pag. 183
Pรกginas Web
En el browser se ve la pรกgina
Pag. 184
Páginas Web
Ejercicio
Realice una página con marcos seleccionando la plantilla Encabezado, pie de página y contenido.
Desarrolle cuatro páginas para los marcos respectivos de acuerdo al tema elegido por usted de su especialidad.
Incluya botones y contador de visitantes (Hit Counter).
Publique y muestre las páginas desde Internet Explorer.
Pag. 185