Upload
nicolasalfredo121
View
7
Download
0
Embed Size (px)
Citation preview
Es el Consorcio de Bibliotecas Universitarias de El
Salvador
Fue constituido el día 28 de enero de 2011
Facilitar la investigación a las comunidades universitarias de las distintas instituciones.
Adquisición consorciada (con mejores precios) de recursos bibliográficos impresos y digitales tales como: libros electrónicos, bases de datos, entre otros
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 gratuitamente.
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.
Contiene libros y artículos publicados desde 1998, así como
una amplia colección de estadísticas, con datos que se
remontan a 1960 y una cobertura de más de 80 países.
Colección de libros sobre temáticas relacionadas con la
práctica de arquitectura, los arquitectos y su trabajo, teoría
arquitectónica, regulaciones de construcción, tipos de
construcción, temas legales y de conservación, entre otras.
Ofrece acceso a publicaciones técnicas y más de trece mil
normas activas sobre Higiene Industrial, Seguridad, Análisis y
Aislamiento Térmico, Sistemas Computarizados, Electrónica,
entre otros.
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.
COMO DISEÑAR UNA PÁGINA WEB
Un sitio Web, no está formada por una única Página Web que contiene toda la información, sino por varias páginas Web relacionadas. Además, cada página puede incluir diferentes objetos, tales como gráficos, sonidos o películas de vídeo.
Es muy importante utilizar una carpeta para almacenar todos los objetos que se van a usar en un conjunto de páginas Web.
Las imágenes son uno de los recursos más utilizados en las páginas Web. Los dos formatos más utilizados son GIF y JPG, que ofrecen una calidad suficiente a la vez que comprimen el archivo para que su tamaño sea lo más pequeño posible.
Desde el punto de vista del usuario es indiferente utilizar uno u otro formato, pero GIF (un máximo de 256 colores), mientras que JPEG (hasta 16,7 millones de colores).
Imágenes
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?
Elementos de Expression Web 4.0
BARRA DE FORMATO
AREA DE TRABAJO
AREA DE TRABAJO
BARRA DE ESTADO
BARRA DE TITULO
BARRA DE MENU
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, si tenemos abierto un sitio Web este se
muestra como el primer elemento seleccionable, además nos
indica que páginas no han sido guardadas marcándolas con un
asterisco (*) al final del nombre. Página
Web Activa
Pestaña del Sitio Web (Siempre al inicio)
Página Web Sin Guardar
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.
Dividir; Esta vista muestra un área de diseño en la parte inferior y una
de código en la parte superior.
Código; En esta vista se muestra el código HTML del que se compone la
página Web.
DISEÑO
CODIGO HTML
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.
Como elaborar un sitio web Parte1. Pasos para crear un sitio web de una página procedimiento:
1. Presionamos en la barra de herramientas el botón Nuevo Sitio...
2. Con lo cual se abre el cuadro de diálogo Nuevo
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
La página maestra
El archivo cuyo nombre es master.dwt, es la pagina maestra, los
elementos de las demás páginas que no se pueden modificar en
ellas, 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
las páginas maestras permiten crear un diseño coherente que se puede
actualizar fácilmente en todas las páginas de un sitio. Use páginas
maestras para definir un aspecto coherente con el contenido que se
comparte entre las páginas.
Comprimir carpetas
En la carpeta 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
A la hora de diseñar un sitio Web, es conveniente diseñar un boceto sobre cómo va a
ser la Web. Tenemos que decidir cómo vamos a estructurarla.
Lo más sencillo es no estructurarla, colocando todos los archivos en el mismo
directorio. Esto se suele hacer en sitios personales, ya que el número de archivos es
pequeño. Sin embargo este es un mal hábito, 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 estuviéramos en un procesador de textos como Word.
BARRA DE FORMATO
1. Estilos 2. Tipo de letra 3. Tamaño de fuente 4. Deshacer y rehacer 5. Negrita, cursiva y subrayado
6. Alineación del texto: • izquierda, centrado y derecha
7. Numeración y Viñetas 8. Sangría 9. Bordes
1 2 3 4
5
9 8 7
5
6
Desde el panel de tareas propiedades de css.
Tipo de letra
fondo
Configuración de listas y tablas
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.
Sin errores
• Nuestro sitio Web no debe mostrar errores ya que causaría una mala impresión en nuestros visitantes. Por ello, es recomendable pasar el corrector ortográfico y corregir cualquier error.
INTRODUCIR VIÑETAS
Insertar viñetas
La utilización de las viñetas es exactamente como en Word.
Imágenes
• Para mostrar fotos o dibujos, 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.
JPG es usado para presentar fotos a todo color.
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.
¿Qué es un hipervínculo?
Un hipervínculo es un enlace, normalmente entre
dos páginas web de un mismo sitio, pero un enlace
también puede apuntar a una página 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. También se conocen como hiperenlaces,
enlaces o links.
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, hacer clic en un hipervínculo puede hacer que
ocurran varias cosas. Si el destino es otra página 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 sesión de Word para visualizarlo
o de guardar el archivo.
Cont.
Por lo tanto, podemos usar los hipervínculos para
conducir a los visitantes de nuestro sitio web por
donde queramos. Además, si queremos que se
pongan en contacto con nosotros, nada mejor que
ofrecerles un hipervínculo a nuestro correo
electrónico. Vamos a ver cómo hacer todo esto.
Tipos de Hipervínculos.
Hipervínculo de texto.
Un hipervínculo de texto es un enlace que se encuentra asociado a
un texto, de forma que si hacemos clic sobre ese texto, navegamos
dónde indique el hipervínculo. Por defecto, cuando creamos un
hipervínculo 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 página después de visitar el enlace, este
aparecerá con otro tono también. Aunque es interesante diferenciar
el hiperenlace, es posible que no queramos que aparezca así. Más
adelante veremos cómo hacer esto.
Cont.
Hipervínculo de Imagen.
Un hipervínculo de imagen es un enlace que se encuentra asociado a una
imagen, de forma que si hacemos clic sobre esa imagen, navegamos
dónde indique el hipervínculo. Por defecto. cuando creamos un
hipervínculo 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, más adelante veremos cómo podemos modificar
este comportamiento.
Por otra parte, los hipervínculos pueden referirse a páginas del mismo
sitio web o de otros sitios web.
• Un hipervínculo local
Es un vínculo a una página que se encuentra en el mismo sitio web. 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. Así, para
referirnos a ella tan solo basta con poner la ruta o dirección 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 vínculo desde esta página a
otra llamada curso que está en la carpeta access.
El vínculo sería: access/curso.htm
Hipervínculo a una página del propio sitio web (página local).
Cont.
Hipervínculo a otro sitio web (página externa).
Un hipervínculo externo es un vínculo a una página en
Internet. Es un vínculo a cualquier otro lugar fuera del
sitio actual. Cuando ponemos un vínculo externo,
escribimos la dirección completa de la página incluido
http://www.... Así,
http://www.ufg.edu.sv
Cont.
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.ufg.edu.sv --> es el nombre DNS del servidor de UFG
• Mas ejemplos: http://www.mined.gob.sv/
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. Al pulsar en él, automáticamente se abre
el programa de correo que tenga el usuario instalado para poder escribir a
esa dirección de correo. Por ejemplo, si nuestra dirección de correo es
[email protected], escribiremos esta dirección de correo como
dirección al insertar el hipervínculo.
La dirección de correo se descompone en:
juanperez--> nombre del usuario
ufg.edu.sv --> nombre del servidor de correo
Introducir hipervínculos en el texto.
Para introducir un hipervínculo tenemos 3 opciones:
Seleccionamos el texto asociado al enlace.
A continuación podemos :
Pulsar en el menú Insertar y después, en Hipervínculo.
Pulsar el botón de la barra formato .
Presionar desde el teclado Alt + Ctrl + K.
Cont. • 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. Podemos cambiar este campo
para que aparezca otro texto, cambiando entonces el texto de la página.
• En Dirección: escribiremos la dirección a dónde nos tiene que llevar el
hipervínculo, por ejemplo: http://www.ufg.edu.sv De esta forma crearemos un
vínculo a otra página Web, a la que podremos viajar si disponemos de conexión a
Internet.
• Pulsamos en Aceptar.
• Nótese que el texto cambia de color y aparece subrayado para indicar que es un
hipervínculo. Si quisiéramos introducir un enlace al correo, escribiríamos la
dirección de correo en Dirección.
Cont.
• 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.
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, ya sea color o imágenes.
Como primer paso hacemos clic en el menú Insertar en el
recuadrado desplegado seleccionamos la opción Botón interactivo.
Cont. En sus propiedades, ponemos lo que queramos que
salga en el botón en Texto del botón:
Para crear un vínculo al ancla, escribimos su
nombre predecido del símbolo #. Supongamos que
el ancla que hemos creado se llama ancla (en un
alarde de originalidad). Como vemos en el dibujo
en el campo Vínculo, 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 botón iremos hacia
arriba, al principio del apartado.
Botón para una web externa a nuestro sitio
Texto dentro del
botón
Dirección web a la que se hace
referencia
• Y de este modo tenemos ya un botón con un vinculo a una pagina externa, nuestra pagina quedaría mas o menos de la siguiente manera.
TIC III
TECNOLOGIA DE LA INFORMACION Y LAS COMUNICACIONES III
• Un marco es una división de la ventana del explorador en dos o más regiones. En
cada una de ellas podemos colocar una página 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
TIC III
Página de titulo
Página de contenido
Página de menú
• En Expression web podemos 'ver' los marcos como barras
grises, 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. Desde Expression web podemos variar
fácilmente su tamaño, su número, elegir qué páginas
cargarán, 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 accedía a Internet, pero en la actualidad la carga de este menú no supone algo apreciable por el usuario.
Además, el tener varios marcos puede llevarnos a tener un pequeño lío, ya que siempre hemos de recordar qué cosas van en cada marco. Como ventaja, 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.
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, añadiendo o quitando marcos, cambiando su tamaño, etc.
• Vamos a crear una Web con marcos. Hacemos clic en el menú Archivo, después en Nuevo. En el panel de tareas que aparecerá a la derecha hacemos clic en Más plantillas de página.... Elegimos Páginas de marcos y a continuación nos aparecerán varias plantillas predefinidas.
TIC III
TIC III
1
2
3
• Vamos a trabajar con la plantilla cuya configuración es la más usada en Internet: Titular y contenido. Consiste en dividir la página Web en tres: Una superior, que contiene un título, 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 más adelante explicaremos.
En este caso, Expression web asigna los siguientes nombres:
• Para el Marco del título: 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 vacío y 5 páginas Web distintas en blanco. 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.
• Crearemos la página de marcos en las opciones del cuadro de diálogo
“nuevo” en la pestaña “página” 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 página inicial” y elegimos las páginas correspondientes a cada marco.
TIC III
TIC III
• Ahora vamos a hacer clic en Archivo y después en Guardar cada página
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 página Web. Sabremos cual página 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 página que guarda el código de los marcos. Llamemos a esta página index.htm. Esta es la página que debemos cargar en el navegador para poder ver las demás en los marcos.
TIC III
Podemos modificar las características de un marco para que cumpla con nuestros objetivos.
• Lo primero que podemos hacer es cambiar el tamaño de los marcos. Para ello pulsaremos sobre los límites de los marcos con el botón izquierdo del ratón y, sin soltar, arrastraremos los límites. Una vez tenga el aspecto que deseemos es conveniente guardar la página.
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 botón derecho del ratón dentro del marco cuyas opciones queremos cambiar. Hacemos clic en Propiedades del marco.
TIC III
Estas son las opciones más
interesantes: • Nombre y Página inicial. Aquí se
especifica el nombre del marco y la página Web que contiene. Estos dos parámetros 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 página que cargue cada marco.
TIC III
Ahora pulsamos en el botón Páginas de Marcos.
• Tamaño del marco. Podemos ajustar el tamaño de los marcos desde aquí. Aparecerán dos campos, Ancho y Alto, que cambiarán 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 tamaño respecto a los otros marcos, Por cierto, para cambiar el tamaño respecto a la página, y finalmente Píxeles, para especificar un tamaño fijo.
TIC III
• En el apartado Márgenes modificamos los márgenes del marco como deseemos.
• Mostrar barras de desplazamiento. Para el marco de título o el de índice,
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. Elegiremos en Mostrar barras de desplazamiento si queremos que aparezcan, 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.
TIC III
Pulsando en el botón Página de Marcos..., activaremos o desactivaremos la casilla Mostrar bordes si queremos o no que estos aparezcan.
TIC III
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 página en ventana nueva: Abre la página que se encuentra en el
marco seleccionado como una página independiente.
• 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
TIC III
Al agregar un hipervínculo ya sea por un botón o por texto
1 2
TIC III
Los marcos flotantes son similares a las páginas de marcos,
excepto en que el marco flotante y su contenido se incrustan en
páginas Web existentes. A un marco flotante se puede agregar
cualquier elemento que se pueda incluir en una página 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 página de marcos independiente para incrustar
contenido.
TIC III
La opción se encuentra en el menú insertar, opción HTML.
Al hacer clic en el botón de establecer página inicial podemos ubicar desde otra pagina web hasta imágenes.
En el menú insertar encontramos la opción HTML en la cual se encuentra el marco flotante
TIC III
Haciendo clic derecho encontramos las propiedades del marco flotante: