You are on page 1of 93

Es el Consorcio de Bibliotecas Universitarias de El Salvador

Fue constituido el da 28 de enero de 2011

Adquisicin consorciada (con mejores precios) de recursos bibliogrficos impresos y digitales tales como: libros electrnicos, bases de datos, entre otros

Facilitar la investigacin a las comunidades universitarias de las distintas instituciones.

Contiene los trabajos de graduacin a texto completo resultante de la actividad acadmica de los estudiantes, previo a obtener su ttulo.

Ofrece acceso a libros de texto para ser descargables en la PC o dispositivos porttiles. 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 electrnico.

Es una plataforma digital de contenidos acadmicos, ofrece los textos completos de libros de editoriales acadmicas, universitarias o institucionales e incluye E-libro

Base de datos especializada en contenidos de Legislacin y Jurisprudencia.

Libros electrnicos con contenidos lderes en Ciencia e Ingeniera.

Contiene libros y artculos publicados desde 1998, as como una amplia coleccin de estadsticas, con datos que se remontan a 1960 y una cobertura de ms de 80 pases.

Coleccin de libros sobre temticas relacionadas con la prctica de arquitectura, los arquitectos y su trabajo, teora arquitectnica, regulaciones de construccin, tipos de construccin, temas legales y de conservacin, entre otras.

Ofrece acceso a publicaciones tcnicas y ms de trece mil normas activas sobre Higiene Industrial, Seguridad, Anlisis y Aislamiento Trmico, Sistemas Computarizados, Electrnica, entre otros.

Microsoft Expression web Es una herramienta que se utiliza para el desarrollo de pginas y/o Sitios Web, al ser este parte de la Suite Microsoft Office posee elementos comunes que facilitan su utilizacin por parte de los usuarios.

COMO DISEAR UNA PGINA WEB


Un sitio Web, no est formada por una nica Pgina Web que contiene toda la informacin, sino por varias pginas Web relacionadas. Adems, cada pgina puede incluir diferentes objetos, tales como grficos, sonidos o pelculas de vdeo. Es muy importante utilizar una carpeta para almacenar todos los objetos que se van a usar en un conjunto de pginas Web.

Imgenes
Las imgenes son uno de los recursos ms utilizados en las pginas Web. Los dos formatos ms utilizados son GIF y JPG, que ofrecen una calidad suficiente a la vez que comprimen el archivo para que su tamao sea lo ms pequeo posible.
Desde el punto de vista del usuario es indiferente utilizar uno u otro formato, pero GIF (un mximo de 256 colores), mientras que JPEG (hasta 16,7 millones de colores).

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 lpiz y hacer un esquema que responda a las siguientes preguntas: Qu quiero publicar? A quin va dirigida mi pgina? Con qu material cuento? Qu necesito?

Elementos de Expression Web 4.0


BARRA DE TITULO AREA DE TRABAJO
BARRA DE MENU

BARRA DE FORMATO

AREA DE TRABAJO

BARRA DE ESTADO

SELECTOR DE PAGINAS
El selector de pginas: Este elemento nos ayuda a navegar

entre las distintas pginas que tenemos abiertas en un


momento dado, si tenemos abierto un sitio Web este se

muestra como el primer elemento seleccionable, adems nos


indica que pginas no han sido guardadas marcndolas con un asterisco (*) al final del nombre.
Pgina Web Activa Pgina Web Sin Guardar Pestaa del Sitio Web (Siempre al inicio)

Este elemento se utiliza para escoger la forma en que se visualizar la pgina web que se est trabajando

Diseo; Esta es la vista por defecto muestra la pgina en un estilo similar al Word en donde se muestran los elementos de una forma grfica segn se agregan.

Dividir; Esta vista muestra un rea de diseo en la parte inferior y una

de cdigo en la parte superior.

Cdigo; En esta vista se muestra el cdigo HTML del que se compone la pgina Web.

CODIGO HTML

DISEO

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 informacin y opciones adicionales para mejorar la administracin 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 tambin de los elementos que estn dentro de estas.

Como elaborar un sitio web


Parte1. Pasos para crear un sitio web de una pgina procedimiento: 1. Presionamos en la barra de herramientas el botn Nuevo Sitio...
2. Con lo cual se abre el cuadro de dilogo Nuevo

Opciones de pestaa sitio Web


GENERAL: Muestra las distintas opciones para crear una pgina web en blanco

PLANTILLAS: Muestra las opciones de formatos de pginas web previamente

elaboradas con el formato y una serie de pginas web que las componen ya
que son sitios web completos.

La ubicacin de la pgina tambin se muestra en el cuadro de dialogo Nuevo.

Luego de hacer clic en el botn 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 tambin parecido al editor de texto Word
Imagen de fondo

Color de fondo

Guardando el sitio web


Ruta de ubicacin 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 automticamente de la plantilla

La pgina maestra
las pginas maestras permiten crear un diseo coherente que se puede actualizar fcilmente en todas las pginas de un sitio. Use pginas maestras para definir un aspecto coherente con el contenido que se comparte entre las pginas. El archivo cuyo nombre es master.dwt, es la pagina maestra, los elementos de las dems pginas que no se pueden modificar en

ellas, es por que son parte de la pgina maestra y tienen que ser
modificadas en ese archivo y se abre haciendo doble clic en ese archivo abrindose como una pgina Web

En la carpeta

Comprimir carpetas

por lo general se guardan los sitios de forma

automtica. 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

A la hora de disear un sitio Web, es conveniente disear un boceto sobre cmo va a ser la Web. Tenemos que decidir cmo vamos a estructurarla. Lo ms sencillo es no estructurarla, colocando todos los archivos en el mismo directorio. Esto se suele hacer en sitios personales, ya que el nmero de archivos es pequeo. Sin embargo este es un mal hbito, ya que si la Web crece, terminaremos perdidos en un mar de archivos.

Para Insertar texto lo nico que debemos hacer es escribir en la pantalla, como si estuviramos 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 Tamao de fuente Deshacer y rehacer Negrita, cursiva y subrayado

6 6. Alineacin del texto: izquierda, centrado y derecha 7. Numeracin y Vietas 8. Sangra 9. Bordes

Desde el panel de tareas propiedades de css.


fondo

Configuracin de listas y tablas

Tipo de letra

Corrector ortogrfico
Con Microsoft Expression Web puede buscar y corregir palabras con errores de
ortografa en una o varias pginas o carpetas, o en un sitio Web entero. Tambin puede corregir o pasar por alto los errores ortogrficos directamente en la vista

Diseo de una pgina 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 correccin por medio del men
Herramientas o directamente con la tecla F7.

Sin errores
Nuestro sitio Web no debe mostrar errores ya que causara una mala impresin en nuestros visitantes. Por ello, es recomendable pasar el corrector ortogrfico y corregir cualquier error.

INTRODUCIR VIETAS

Insertar vietas

La utilizacin de las vietas es exactamente como en Word.

Imgenes
Para mostrar fotos o dibujos, se suelen usar principalmente dos formatos de imagen: GIF y JPG. El primero se suele usar para dibujos y pequeas fotos de pocos colores e imgenes animadas. JPG es usado para presentar fotos a todo color.

Hipervnculos
Vamos a ver qu son los hipervnculos y como usarlos para hacer navegable nuestro sitio Web de forma que los usuarios puedan ir de una pgina Web a otra.

Aprenderemos qu tipos de hipervnculos existen y para qu


sirven.

Qu es un hipervnculo?

Un hipervnculo es un enlace, normalmente entre


dos pginas web de un mismo sitio, pero un enlace

tambin puede apuntar a una pgina de otro sitio


web, a un fichero, a una imagen, etc. Para navegar al

destino al que apunta el enlace, hemos de hacer clic


sobre l. Tambin se conocen como hiperenlaces,

enlaces o links.

Cont.

Normalmente el destino se puede conocer mirando la barra de estado del navegador cuando el ratn est sobre el hipervnculo. Dependiendo de cual sea el destino, hacer clic en un hipervnculo puede hacer que

ocurran varias cosas. Si el destino es otra pgina web, el


navegador la cargar y la mostrar, pero si el destino es

un documento de Word, el navegador nos dar la


posibilidad de abrir una sesin de Word para visualizarlo o de guardar el archivo.

Cont.

Por lo tanto, podemos usar los hipervnculos para conducir a los visitantes de nuestro sitio web por donde queramos. Adems, si queremos que se pongan en contacto con nosotros, nada mejor que

ofrecerles

un

hipervnculo

nuestro

correo

electrnico. Vamos a ver cmo hacer todo esto.

Tipos de Hipervnculos.
Hipervnculo de texto.
Un hipervnculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dnde indique el hipervnculo. Por defecto, cuando creamos un

hipervnculo de texto, el texto aparece subrayado y en un color


distinto al del texto normal, de forma que el visitante sepa que existe ese enlace. Si volvemos a la pgina despus de visitar el enlace, este

aparecer con otro tono tambin. Aunque es interesante diferenciar


el hiperenlace, es posible que no queramos que aparezca as. Ms adelante veremos cmo hacer esto.

Cont.

Hipervnculo de Imagen.
Un hipervnculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si hacemos clic sobre esa imagen, navegamos dnde indique el hipervnculo. Por defecto. cuando creamos un

hipervnculo de imagen, la imagen aparece rodeada de un borde con un


color llamativo para que el visitante sepa que existe ese enlace. Al igual que con el texto, ms adelante veremos cmo podemos modificar

este comportamiento.
Por otra parte, los hipervnculos pueden referirse a pginas del mismo sitio web o de otros sitios web.

Hipervnculo a una pgina del propio sitio web (pgina local).

Un hipervnculo local
Es un vnculo a una pgina que se encuentra en el mismo sitio web. Esto significa que el archivo de la pgina web a la que se refiere el vnculo se encuentra en el mismo disco que la pgina que contiene el vnculo. As, para referirnos a ella tan solo basta con poner la ruta o direccin en el disco duro.

Si se encuentra en la misma carpeta, basta con poner su nombre. Si se


encuentra en una carpeta que cuelga de la actual, hay que poner el nombre de la carpeta y el del archivo.

Por ejemplo, supongamos que tenemos un vnculo desde esta pgina a


otra llamada curso que est en la carpeta access. El vnculo sera: access/curso.htm

Cont. Hipervnculo a otro sitio web (pgina externa).

Un hipervnculo externo es un vnculo a una pgina en Internet. Es un vnculo a cualquier otro lugar fuera del

sitio actual. Cuando ponemos un vnculo externo,


escribimos la direccin completa de la pgina incluido

http://www.... As,
http://www.ufg.edu.sv

Cont.

Vamos a explicar las partes de las que se compone una


direccin web completa:

http --> es el protocolo utilizado para pginas web (HiperText Transfer Protocol) www.ufg.edu.sv --> es el nombre DNS del servidor de UFG Mas ejemplos: http://www.mined.gob.sv/

Cont.

Hipervnculo a una direccin de correo electrnico.


Un hipervnculo a una direccin de correo electrnico es un vnculo que contiene una direccin de correo. Al pulsar en l, automticamente se abre el programa de correo que tenga el usuario instalado para poder escribir a esa direccin de correo. Por ejemplo, si nuestra direccin de correo es juanperez@ufg.edu.sv, escribiremos esta direccin de correo como direccin al insertar el hipervnculo.
La direccin de correo se descompone en:

juanperez--> nombre del usuario


ufg.edu.sv --> nombre del servidor de correo

Introducir hipervnculos en el texto.


Para introducir un hipervnculo tenemos 3 opciones:
Seleccionamos el texto asociado al enlace.

A continuacin podemos :
Pulsar en el men Insertar y despus, en Hipervnculo.

Pulsar el botn de la barra formato .


Presionar desde el teclado Alt + Ctrl + K.

Cont.
Veamos un ejemplo siguiendo la primera opcin.

Aparecer el cuadro de dilogo Insertar hipervnculo

Cont.
En Texto: aparece el texto que hemos seleccionado. Podemos cambiar este campo
para que aparezca otro texto, cambiando entonces el texto de la pgina. En Direccin: escribiremos la direccin a dnde nos tiene que llevar el hipervnculo, por ejemplo: http://www.ufg.edu.sv De esta forma crearemos un vnculo a otra pgina Web, a la que podremos viajar si disponemos de conexin a Internet. Pulsamos en Aceptar. Ntese que el texto cambia de color y aparece subrayado para indicar que es un hipervnculo. Si quisiramos introducir un enlace al correo, escribiramos la direccin de correo en Direccin.

Cont.
La pantalla nos mostrar algo similar a esto:

Hipervnculo a la UFG Note como el texto que convertimos en hipervnculo cambia de color y aparece subrayado.

Botones para desplazarse


Vamos a ver cmo crear algunos botones bsicos que son muy

usados en la mayora de las pginas web, botones que atreves


de un estilo, ya sea color o imgenes.

Como primer paso hacemos clic en el men Insertar en el


recuadrado desplegado seleccionamos la opcin Botn interactivo.

En sus propiedades, ponemos lo que queramos que salga en el botn en Texto del botn:

Cont.

Para crear un vnculo al ancla, escribimos su


nombre predecido del smbolo #. Supongamos que el ancla que hemos creado se llama ancla (en un

alarde de originalidad). Como vemos en el dibujo


en el campo Vnculo, hemos escrito #ancla. El resto de opciones las configuramos como queramos. Podemos poner tantas anclas como queramos, siempre que no mezclemos sus nombres. Como ejemplo, al pulsar este botn iremos hacia arriba, al principio del apartado.

Botn para una web externa a nuestro sitio

Texto dentro del botn

Direccin web a la que se hace referencia

Y de este modo tenemos ya un botn con un vinculo a una pagina externa, nuestra pagina quedara mas o menos de la siguiente manera.

TECNOLOGIA DE LA INFORMACION Y LAS COMUNICACIONES III


TIC III

Un marco es una divisin de la ventana del explorador en dos o ms regiones. En cada una de ellas podemos colocar una pgina Web. Por ejemplo, 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. Veamos un ejemplo:

TIC III

Pgina de titulo

Pgina de men Pgina de contenido

TIC III

En Expression web podemos 'ver' los marcos como barras grises, horizontales o verticales. Los marcos en realidad no

contienen nada ms que referencias a las pginas Web que se


van cargando en ellos. Desde Expression web podemos variar

fcilmente su tamao, su nmero, elegir qu pginas


cargarn, etc.

TIC III

Ventajas e inconvenientes de los marcos: Actualmente el empleo de los marcos se ha reducido bastante. En el pasado cargar un men lateral era costoso debido a la baja velocidad a la que se acceda a Internet, pero en la actualidad la carga de este men no supone algo apreciable por el usuario. Adems, el tener varios marcos puede llevarnos a tener un pequeo lo, ya que siempre hemos de recordar qu cosas van en cada marco. Como ventaja, los marcos ofrecen la posibilidad de separar mens de contenido y as no tener que repetir el men en todas las pginas del sitio.

TIC III

Expression web no permite insertar marcos libremente, sino que nos obliga a utilizar una de las plantillas de marcos que hay predefinidas. Entonces podremos cambiarla como queramos, aadiendo o quitando marcos, cambiando su tamao, etc.

Vamos a crear una Web con marcos. Hacemos clic en el men Archivo, despus en Nuevo. En el panel de tareas que aparecer a la derecha hacemos clic en Ms plantillas de pgina.... Elegimos Pginas de marcos y a continuacin nos aparecern varias plantillas predefinidas.

TIC III

1 3

TIC III

Vamos a trabajar con la plantilla cuya configuracin es la ms usada en Internet: Titular y contenido. Consiste en dividir la pgina Web en tres: Una superior, que contiene un ttulo, una lateral, que suele contener un ndice, y una central, en la que se ver el contenido de la Web. Es importante saber que cada marco tiene un nombre, que nos sirve para poder usarlo individualmente como ms adelante explicaremos. En este caso, Expression web asigna los siguientes nombres: Para el Marco del ttulo: titular. Para el Marco del ndice: men. Para el Marco principal: principal.

TIC III

La imagen que podremos ver en nuestro monitor es esta:

TIC III

Crearemos un sitio web vaco y 5 pginas Web distintas en blanco. Es importante saber que las pginas formaran parte de una pgina principal que ser la que contendr el cdigo de la divisin de los marcos.
Crearemos la pgina de marcos en las opciones del cuadro de dilogo nuevo en la pestaa pgina seleccionaremos marcos....

3 paginas se ubicaran como principales en este caso por el tipo de marcos, una de titulo, de men y de contenido. Hacemos clic en los botones establecer pgina inicial y elegimos las pginas correspondientes a cada marco.

TIC III

TIC III

Ahora vamos a hacer clic en Archivo y despus en Guardar cada pgina por separado.

TIC III

Nos aparecer la pantalla habitual para guardar los archivos, con la salvedad de que nos aparecer el esquema de marcos. Iremos guardando el contenido de cada marco por separado, ya que cada uno es una pgina Web. Sabremos cual pgina guardamos en cada momento ya que aparece resaltada en azul en la figura. Cuando aparece el fondo resaltado, y no los marcos, es porque es el momento de guardar la pgina que guarda el cdigo de los marcos. Llamemos a esta pgina index.htm. Esta es la pgina que debemos cargar en el navegador para poder ver las dems en los marcos.

TIC III

Podemos modificar las caractersticas de un marco para que cumpla con nuestros objetivos. Lo primero que podemos hacer es cambiar el tamao de los marcos. Para ello pulsaremos sobre los lmites de los marcos con el botn izquierdo del ratn y, sin soltar, arrastraremos los lmites. Una vez tenga el aspecto que deseemos es conveniente guardar la pgina. Otro aspecto interesante que podemos configurar es el aspecto de cada marco.

TIC III

Podemos mostrar los bordes de los marcos en el navegador. Para ello hacemos clic con el botn derecho del ratn dentro del marco cuyas opciones queremos cambiar. Hacemos clic en Propiedades del marco.

TIC III

Ahora pulsamos en el botn Pginas de Marcos.

Estas son interesantes:

las

opciones

ms

Nombre y Pgina inicial. Aqu se especifica el nombre del marco y la pgina Web que contiene. Estos dos parmetros son muy importantes, ya que podemos referirnos a cada marco por separado con el nombre del marco. Por otra parte, desde aqu podemos cambiar la pgina que cargue cada marco.

TIC III

Tamao del marco. Podemos ajustar el tamao de los marcos desde aqu. Aparecern dos campos, Ancho y Alto, que cambiarn a Ancho de fila o Ancho de columna cuando exista un marco en la misma fila o en la misma columna. En las opciones de la derecha podemos elegir Relativo , para cambiar el tamao respecto a los otros marcos, Por cierto, para cambiar el tamao respecto a la pgina, y finalmente Pxeles, para especificar un tamao fijo.

TIC III

En el apartado Mrgenes modificamos los mrgenes del marco como deseemos. Mostrar barras de desplazamiento. Para el marco de ttulo o el de ndice, no suele ser necesario activarla, pero para el marco de contenido es interesante activarla si la pgina que va en este marco ocupa ms espacio del que la ventana dispone. Elegiremos en Mostrar barras de desplazamiento si queremos que aparezcan, si no queremos que aparezcan o que aparezcan de forma automtica Si es necesario.

Esta ltima opcin es por defecto la elegida y la ms recomendable.

TIC III

Pulsando en el botn Pgina de Marcos..., activaremos o desactivaremos la casilla Mostrar bordes si queremos o no que estos aparezcan.

TIC III

Dividir Marco: Separa el marco que tenemos seleccionado ya sea en dos filas o columnas. Eliminar marco: Elimina el marco seleccionado y ajusta el resto de los marcos alrededor del mismo. Abrir pgina en ventana nueva: Abre la pgina que se encuentra en el marco seleccionado como una pgina independiente.

TIC III

Guardar Pgina: Guarda la pgina que se muestra en el marco seleccionado.

Guardar Pgina como: Guarda la pgina 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 hipervnculo ya sea por un botn o por texto

TIC III

Los marcos flotantes son similares a las pginas de marcos, excepto en que el marco flotante y su contenido se incrustan en pginas Web existentes. A un marco flotante se puede agregar cualquier elemento que se pueda incluir en una pgina normal. Puede personalizar los marcos flotantes de la misma manera que los marcos normales, as como activar barras de desplazamiento.

Una de las ventajas de utilizar estos marcos es que no tiene que


crear una pgina de marcos independiente para incrustar contenido.

TIC III

La opcin se encuentra en el men insertar, opcin HTML. En el men insertar encontramos la opcin HTML en la cual se encuentra el marco flotante

Al hacer clic en el botn de establecer pgina inicial podemos ubicar desde otra pagina web hasta imgenes.

TIC III

Haciendo clic derecho encontramos las propiedades del marco flotante:

TIC III

You might also like