Es el Consorcio de Bibliotecas Universitarias de El SalvadorFue constituido el día 28 de enero de 2011 Adquisición consorciada (con mejores precios) de recursos bibliográficos impresos y digitales tales como: libros electrónicos, bases de datos, entre otros Facilitar la investigación a las comunidades universitarias de las distintas instituciones. . .Contiene los trabajos de graduación a texto completo resultante de la actividad académica de los estudiantes. previo a obtener su título. Ofrece acceso a libros de texto para ser descargables en la PC o dispositivos portátiles. Se requiere instalar ADOBE DIGITAL EDITIONS para realizar las descargas. . Para consultar los libros de McGraw-Hill se debe de descargar el programa de Adobe Digital. . el cual se puede hacer gratuitament e. Es una biblioteca virtual con libros de texto y complementarios, en formato electrónico. Es una plataforma digital de contenidos académicos, ofrece los textos completos de libros de editoriales académicas, universitarias o institucionales e incluye E-libro Base de datos especializada en contenidos de Legislación y Jurisprudencia. .Libros electrónicos con contenidos líderes en Ciencia e Ingeniería. así como una amplia colección de estadísticas.Contiene libros y artículos publicados desde 1998. . con datos que se remontan a 1960 y una cobertura de más de 80 países. teoría arquitectónica. tipos de construcción.Colección de libros sobre temáticas relacionadas con la práctica de arquitectura. los arquitectos y su trabajo. . temas legales y de conservación. entre otras. regulaciones de construcción. Electrónica. entre otros. Análisis y Aislamiento Térmico. Sistemas Computarizados. Seguridad. .Ofrece acceso a publicaciones técnicas y más de trece mil normas activas sobre Higiene Industrial. . .Microsoft Expression web Es una herramienta que se utiliza para el desarrollo de páginas y/o Sitios Web. al ser este parte de la Suite Microsoft Office posee elementos comunes que facilitan su utilización por parte de los usuarios. cada página puede incluir diferentes objetos.COMO DISEÑAR UNA PÁGINA WEB Un sitio Web. Es muy importante utilizar una carpeta para almacenar todos los objetos que se van a usar en un conjunto de páginas Web. . sino por varias páginas Web relacionadas. sonidos o películas de vídeo. Además. tales como gráficos. no está formada por una única Página Web que contiene toda la información. 7 millones de colores). .Imágenes Las imágenes son uno de los recursos más utilizados en las páginas Web. pero GIF (un máximo de 256 colores). Desde el punto de vista del usuario es indiferente utilizar uno u otro formato. que ofrecen una calidad suficiente a la vez que comprimen el archivo para que su tamaño sea lo más pequeño posible. mientras que JPEG (hasta 16. Los dos formatos más utilizados son GIF y JPG. Imagen GIF Imagen JPG . Fondos Web . ¿CUANDO CREAR UN SITIO WEB? Para crear un sitio en Internet el primer paso es apagar la computadora. coger papel y lápiz y hacer un esquema que responda a las siguientes preguntas: • • • • ¿Qué quiero publicar? ¿A quién va dirigida mi página? ¿Con qué material cuento? ¿Qué necesito? . 0 BARRA DE TITULO AREA DE TRABAJO BARRA DE MENU BARRA DE FORMATO AREA DE TRABAJO BARRA DE ESTADO .Elementos de Expression Web 4. si tenemos abierto un sitio Web este se muestra como el primer elemento seleccionable.SELECTOR DE PAGINAS El selector de páginas: Este elemento nos ayuda a navegar entre las distintas páginas que tenemos abiertas en un momento dado. Página Web Activa Página Web Sin Guardar Pestaña del Sitio Web (Siempre al inicio) . además nos indica que páginas no han sido guardadas marcándolas con un asterisco (*) al final del nombre. En esta vista se muestra el código HTML del que se compone la página Web. Dividir. Código. Esta vista muestra un área de diseño en la parte inferior y una de código en la parte superior.Este elemento se utiliza para escoger la forma en que se visualizará la página web que se está trabajando Diseño. . Esta es la vista por defecto muestra la página en un estilo similar al Word en donde se muestran los elementos de una forma gráfica según se agregan. CODIGO HTML DISEÑO . .Cuando está abierto un sitio Web el selector de vistas posee opciones diferentes Carpetas: Muestra el sitio Web como un conjunto de carpetas y archivos en una vista similar a la del explorador de Windows. Los Paneles de Tareas Son ventana que se encuentran alrededor del espacio de trabajo y muestran información y opciones adicionales para mejorar la administración del sitio web Panel de tareas Lista de carpetas Este panel nos muestra una vista de las carpetas que componen nuestro sitio web así como también de los elementos que están dentro de estas. . . Presionamos en la barra de herramientas el botón Nuevo Sitio.Como elaborar un sitio web Parte1.. 2. Con lo cual se abre el cuadro de diálogo Nuevo . Pasos para crear un sitio web de una página procedimiento: 1. .Opciones de pestaña sitio Web GENERAL: Muestra las distintas opciones para crear una página web en blanco PLANTILLAS: Muestra las opciones de formatos de páginas web previamente elaboradas con el formato y una serie de páginas web que las componen ya que son sitios web completos. La ubicación de la página también se muestra en el cuadro de dialogo Nuevo. Luego de hacer clic en el botón aceptar se abre el área de trabajo . Para insertar una imagen es igual a un procesador de texto. Para darle formato al texto existe la barra de formato . Para dar color o insertar una imagen como fondo es también parecido al editor de texto Word Imagen de fondo Color de fondo . Guardando el sitio web Ruta de ubicación de la carpeta Nombre del sitio web . Sitio web personal con plantilla • Luego de hacer clic al menú archivo y seleccionar Nuevo . Una vez seleccionada la plantilla se abre en el área de trabajo todo lo que se genera automáticamente de la plantilla . es por que son parte de la página maestra y tienen que ser modificadas en ese archivo y se abre haciendo doble clic en ese archivo abriéndose como una página Web .dwt. es la pagina maestra. Use páginas maestras para definir un aspecto coherente con el contenido que se comparte entre las páginas. los elementos de las demás páginas que no se pueden modificar en ellas.La página maestra las páginas maestras permiten crear un diseño coherente que se puede actualizar fácilmente en todas las páginas de un sitio. El archivo cuyo nombre es master. En la carpeta Comprimir carpetas por lo general se guardan los sitios de forma automática. Al ubicar la carpeta que contiene el/los sitio/s se pueden ubicar en una sola carpeta para poder enviar este archivo por correo o subirlo en plataforma U-virtual . . terminaremos perdidos en un mar de archivos. Esto se suele hacer en sitios personales. Sin embargo este es un mal hábito. ya que el número de archivos es pequeño. colocando todos los archivos en el mismo directorio. Lo más sencillo es no estructurarla. es conveniente diseñar un boceto sobre cómo va a ser la Web. . ya que si la Web crece.A la hora de diseñar un sitio Web. Tenemos que decidir cómo vamos a estructurarla. Para Insertar texto lo único que debemos hacer es escribir en la pantalla. . como si estuviéramos en un procesador de textos como Word. BARRA DE FORMATO 5 1 1. 2. 3. 4. 5. 2 3 4 5 Estilos Tipo de letra Tamaño de fuente Deshacer y rehacer Negrita, cursiva y subrayado 6 6. Alineación del texto: • izquierda, centrado y derecha 7. Numeración y Viñetas 8. Sangría 9. Bordes 7 8 9 Desde el panel de tareas propiedades de css. fondo Configuración de listas y tablas Tipo de letra Corrector ortográfico Con Microsoft® Expression® Web puede buscar y corregir palabras con errores de ortografía en una o varias páginas o carpetas, o en un sitio Web entero. También puede corregir o pasar por alto los errores ortográficos directamente en la vista Diseño de una página Web. Si no desea que Expression Web marque una palabra concreta como incorrecta, puede agregarla al diccionario personalizado predeterminado. Como notará en la imagen, puede ejecutar la corrección por medio del menú Herramientas o directamente con la tecla F7. Por ello. . es recomendable pasar el corrector ortográfico y corregir cualquier error.Sin errores • Nuestro sitio Web no debe mostrar errores ya que causaría una mala impresión en nuestros visitantes. INTRODUCIR VIÑETAS . Insertar viñetas La utilización de las viñetas es exactamente como en Word. . JPG es usado para presentar fotos a todo color. se suelen usar principalmente dos formatos de imagen: GIF y JPG. . El primero se suele usar para dibujos y pequeñas fotos de pocos colores e imágenes animadas.Imágenes • Para mostrar fotos o dibujos. . Hipervínculos Vamos a ver qué son los hipervínculos y como usarlos para hacer navegable nuestro sitio Web de forma que los usuarios puedan ir de una página Web a otra. . Aprenderemos qué tipos de hipervínculos existen y para qué sirven. etc. También se conocen como hiperenlaces. enlaces o links. pero un enlace también puede apuntar a una página de otro sitio web. hemos de hacer clic sobre él. normalmente entre dos páginas web de un mismo sitio.¿Qué es un hipervínculo? Un hipervínculo es un enlace. . a un fichero. Para navegar al destino al que apunta el enlace. a una imagen. . el navegador la cargará y la mostrará. Si el destino es otra página web. pero si el destino es un documento de Word.Cont. Normalmente el destino se puede conocer mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo. Dependiendo de cual sea el destino. el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar el archivo. hacer clic en un hipervínculo puede hacer que ocurran varias cosas. Por lo tanto. Además. Vamos a ver cómo hacer todo esto. . nada mejor que ofrecerles un hipervínculo a nuestro correo electrónico. podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde queramos. si queremos que se pongan en contacto con nosotros.Cont. Tipos de Hipervínculos. de forma que si hacemos clic sobre ese texto. navegamos dónde indique el hipervínculo. Hipervínculo de texto. de forma que el visitante sepa que existe ese enlace. este aparecerá con otro tono también. . Aunque es interesante diferenciar el hiperenlace. Por defecto. el texto aparece subrayado y en un color distinto al del texto normal. cuando creamos un hipervínculo de texto. Un hipervínculo de texto es un enlace que se encuentra asociado a un texto. Si volvemos a la página después de visitar el enlace. es posible que no queramos que aparezca así. Más adelante veremos cómo hacer esto. la imagen aparece rodeada de un borde con un color llamativo para que el visitante sepa que existe ese enlace. de forma que si hacemos clic sobre esa imagen.Cont. más adelante veremos cómo podemos modificar este comportamiento. Hipervínculo de Imagen. cuando creamos un hipervínculo de imagen. Por defecto. los hipervínculos pueden referirse a páginas del mismo sitio web o de otros sitios web. Un hipervínculo de imagen es un enlace que se encuentra asociado a una imagen. navegamos dónde indique el hipervínculo. . Al igual que con el texto. Por otra parte. Así. Si se encuentra en una carpeta que cuelga de la actual.htm .Hipervínculo a una página del propio sitio web (página local). basta con poner su nombre. para referirnos a ella tan solo basta con poner la ruta o dirección en el disco duro. • Un hipervínculo local Es un vínculo a una página que se encuentra en el mismo sitio web. Si se encuentra en la misma carpeta. Esto significa que el archivo de la página web a la que se refiere el vínculo se encuentra en el mismo disco que la página que contiene el vínculo. El vínculo sería: access/curso. hay que poner el nombre de la carpeta y el del archivo. Por ejemplo. supongamos que tenemos un vínculo desde esta página a otra llamada curso que está en la carpeta access. Un hipervínculo externo es un vínculo a una página en Internet..ufg. escribimos la dirección completa de la página incluido http://www.Cont.. Así.sv . Hipervínculo a otro sitio web (página externa).edu.. http://www. Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo. ufg.Cont.mined.gob.edu. Vamos a explicar las partes de las que se compone una dirección web completa: • http --> es el protocolo utilizado para páginas web (HiperText Transfer Protocol) • www.sv/ .sv --> es el nombre DNS del servidor de UFG • Mas ejemplos: http://www. edu. Por ejemplo. automáticamente se abre el programa de correo que tenga el usuario instalado para poder escribir a esa dirección de correo.sv --> nombre del servidor de correo .edu.Cont. Hipervínculo a una dirección de correo electrónico. Un hipervínculo a una dirección de correo electrónico es un vínculo que contiene una dirección de correo. escribiremos esta dirección de correo como dirección al insertar el hipervínculo. Al pulsar en él. La dirección de correo se descompone en: juanperez--> nombre del usuario ufg. si nuestra dirección de correo es [email protected]. en Hipervínculo.Introducir hipervínculos en el texto. Para introducir un hipervínculo tenemos 3 opciones: Seleccionamos el texto asociado al enlace. Pulsar el botón de la barra formato . A continuación podemos : Pulsar en el menú Insertar y después. Presionar desde el teclado Alt + Ctrl + K. . • Veamos un ejemplo siguiendo la primera opción. Aparecerá el cuadro de diálogo Insertar hipervínculo .Cont. • En Texto: aparece el texto que hemos seleccionado.edu.Cont.ufg. • En Dirección: escribiremos la dirección a dónde nos tiene que llevar el hipervínculo. Si quisiéramos introducir un enlace al correo. a la que podremos viajar si disponemos de conexión a Internet. Nótese que el texto cambia de color y aparece subrayado para indicar que es un hipervínculo. cambiando entonces el texto de la página.sv De esta forma crearemos un vínculo a otra página Web. por ejemplo: http://www. • • Pulsamos en Aceptar. . escribiríamos la dirección de correo en Dirección. Podemos cambiar este campo para que aparezca otro texto. . • La pantalla nos mostrará algo similar a esto: Hipervínculo a la UFG Note como el texto que convertimos en hipervínculo cambia de color y aparece subrayado.Cont. . ya sea color o imágenes. .Botones para desplazarse Vamos a ver cómo crear algunos botones básicos que son muy usados en la mayoría de las páginas web. botones que atreves de un estilo. .Como primer paso hacemos clic en el menú Insertar en el recuadrado desplegado seleccionamos la opción Botón interactivo. al pulsar este botón iremos hacia arriba. Para crear un vínculo al ancla. ponemos lo que queramos que salga en el botón en Texto del botón: Cont. . hemos escrito #ancla. al principio del apartado. siempre que no mezclemos sus nombres. Como vemos en el dibujo en el campo Vínculo. Podemos poner tantas anclas como queramos. escribimos su nombre predecido del símbolo #. Como ejemplo. En sus propiedades. El resto de opciones las configuramos como queramos. Supongamos que el ancla que hemos creado se llama ancla (en un alarde de originalidad). Botón para una web externa a nuestro sitio Texto dentro del botón Dirección web a la que se hace referencia . nuestra pagina quedaría mas o menos de la siguiente manera. .• Y de este modo tenemos ya un botón con un vinculo a una pagina externa. TECNOLOGIA DE LA INFORMACION Y LAS COMUNICACIONES III TIC III . podemos dividir la pantalla en dos y cargar el índice de una Web en un marco y el contenido de la Web en el otro.• Un marco es una división de la ventana del explorador en dos o más regiones. Veamos un ejemplo: TIC III . Por ejemplo. En cada una de ellas podemos colocar una página Web. Página de titulo Página de menú Página de contenido TIC III . • En Expression web podemos 'ver' los marcos como barras grises. TIC III . su número. etc. elegir qué páginas cargarán. Desde Expression web podemos variar fácilmente su tamaño. horizontales o verticales. Los marcos en realidad no contienen nada más que referencias a las páginas Web que se van cargando en ellos. ya que siempre hemos de recordar qué cosas van en cada marco. Además. En el pasado cargar un menú lateral era costoso debido a la baja velocidad a la que se accedía a Internet. pero en la actualidad la carga de este menú no supone algo apreciable por el usuario. los marcos ofrecen la posibilidad de separar menús de contenido y así no tener que repetir el menú en todas las páginas del sitio. Como ventaja. el tener varios marcos puede llevarnos a tener un pequeño lío. TIC III .• Ventajas e inconvenientes de los marcos: Actualmente el empleo de los marcos se ha reducido bastante. cambiando su tamaño..• Expression web no permite insertar marcos libremente. • Vamos a crear una Web con marcos. En el panel de tareas que aparecerá a la derecha hacemos clic en Más plantillas de página. TIC III . etc.. añadiendo o quitando marcos. Hacemos clic en el menú Archivo. después en Nuevo.. Elegimos Páginas de marcos y a continuación nos aparecerán varias plantillas predefinidas. Entonces podremos cambiarla como queramos. sino que nos obliga a utilizar una de las plantillas de marcos que hay predefinidas. 1 3 2 TIC III . que contiene un título.• Vamos a trabajar con la plantilla cuya configuración es la más usada en Internet: Titular y contenido. y una central. una lateral. en la que se verá el contenido de la Web. que suele contener un índice. Expression web asigna los siguientes nombres: Para el Marco del título: titular. que nos sirve para poder usarlo individualmente como más adelante explicaremos. Es importante saber que cada marco tiene un nombre. • • • TIC III . Para el Marco del Índice: menú. Consiste en dividir la página Web en tres: Una superior. En este caso. Para el Marco principal: principal. La imagen que podremos ver en nuestro monitor es esta: TIC III . .. • Hacemos clic en los botones “establecer página inicial” y elegimos las páginas correspondientes a cada marco.• Crearemos un sitio web vacío y 5 páginas Web distintas en blanco. TIC III . una de titulo. • Crearemos la página de marcos en las opciones del cuadro de diálogo “nuevo” en la pestaña “página” seleccionaremos marcos.. de menú y de contenido. Es importante saber que las páginas formaran parte de una página principal que será la que contendrá el código de la división de los marcos. • 3 paginas se ubicaran como principales en este caso por el tipo de marcos. TIC III . • Ahora vamos a hacer clic en Archivo y después en Guardar cada página por separado. TIC III . Sabremos cual página guardamos en cada momento ya que aparece resaltada en azul en la figura. Iremos guardando el contenido de cada marco por separado. es porque es el momento de guardar la página que guarda el código de los marcos. ya que cada uno es una página Web. Esta es la página que debemos cargar en el navegador para poder ver las demás en los marcos. con la salvedad de que nos aparecerá el esquema de marcos.• Nos aparecerá la pantalla habitual para guardar los archivos.htm. TIC III . y no los marcos. Llamemos a esta página index. Cuando aparece el fondo resaltado. Otro aspecto interesante que podemos configurar es el aspecto de cada marco. arrastraremos los límites. • Lo primero que podemos hacer es cambiar el tamaño de los marcos. sin soltar. TIC III . Una vez tenga el aspecto que deseemos es conveniente guardar la página. Para ello pulsaremos sobre los límites de los marcos con el botón izquierdo del ratón y.Podemos modificar las características de un marco para que cumpla con nuestros objetivos. Para ello hacemos clic con el botón derecho del ratón dentro del marco cuyas opciones queremos cambiar. Hacemos clic en Propiedades del marco. TIC III .• Podemos mostrar los bordes de los marcos en el navegador. Aquí se especifica el nombre del marco y la página Web que contiene. Por otra parte. ya que podemos referirnos a cada marco por separado con el nombre del marco.Ahora pulsamos en el botón Páginas de Marcos. Estos dos parámetros son muy importantes. desde aquí podemos cambiar la página que cargue cada marco. Estas son interesantes: las opciones más • Nombre y Página inicial. TIC III . • Tamaño del marco. Ancho y Alto. Por cierto. TIC III . En las opciones de la derecha podemos elegir Relativo • . Aparecerán dos campos. Podemos ajustar el tamaño de los marcos desde aquí. para especificar un tamaño fijo. para cambiar el tamaño respecto a la página. y finalmente Píxeles. que cambiarán a Ancho de fila o Ancho de columna cuando exista un marco en la misma fila o en la misma columna. para cambiar el tamaño respecto a los otros marcos. • Mostrar barras de desplazamiento. Para el marco de título o el de índice. Elegiremos en Mostrar barras de desplazamiento si queremos que aparezcan. TIC III .• En el apartado Márgenes modificamos los márgenes del marco como deseemos. no suele ser necesario activarla. pero para el marco de contenido es interesante activarla si la página que va en este marco ocupa más espacio del que la ventana dispone. si no queremos que aparezcan o que aparezcan de forma automática Si es necesario. Esta última opción es por defecto la elegida y la más recomendable. Pulsando en el botón Página de Marcos. TIC III ... activaremos o desactivaremos la casilla Mostrar bordes si queremos o no que estos aparezcan.. TIC III . Abrir página en ventana nueva: Abre la página que se encuentra en el marco seleccionado como una página independiente. Eliminar marco: Elimina el marco seleccionado y ajusta el resto de los marcos alrededor del mismo.Dividir Marco: Separa el marco que tenemos seleccionado ya sea en dos filas o columnas. • Guardar Página: Guarda la página que se muestra en el marco seleccionado. • Guardar Página como: Guarda la página contenida en el marco seleccionado con otro nombre. • Propiedades del marco: Muestra el mismo cuadro de dialogo de propiedades del marco seleccionado TIC III . Al agregar un hipervínculo ya sea por un botón o por texto 1 2 TIC III . TIC III .Los marcos flotantes son similares a las páginas de marcos. así como activar barras de desplazamiento. excepto en que el marco flotante y su contenido se incrustan en páginas Web existentes. Una de las ventajas de utilizar estos marcos es que no tiene que crear una página de marcos independiente para incrustar contenido. Puede personalizar los marcos flotantes de la misma manera que los marcos normales. A un marco flotante se puede agregar cualquier elemento que se pueda incluir en una página normal. En el menú insertar encontramos la opción HTML en la cual se encuentra el marco flotante Al hacer clic en el botón de establecer página inicial podemos ubicar desde otra pagina web hasta imágenes.La opción se encuentra en el menú insertar. opción HTML. TIC III . Haciendo clic derecho encontramos las propiedades del marco flotante: TIC III .