Kevin Vasquez Saavedra Informe de Computo

8/9/2019 Kevin Vasquez Saavedra Informe de Computo

1/17

Dreamweaver

El entorno de Dreamweaver:

La pantalla inicial:

Al arrancar Dreamweaver aparece una pantalla inicial como sta

Configurar un sitio local:

Introduccin:

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un

diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de

crear las pginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los

documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para

contener las imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear

nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacinde los

archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se


2/17

podrn copiar los archivos en un servidor web , en el denominadositio remoto, lo que

equivale a publicar el sitio, de modo que la gente podr verlo en Internet.

Por tanto,el sitio local y el sitio remototienen la misma estructura. El sitio local es la

copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio

remoto.

La organizacin de los archivos en un sitio permite administrar y compartir archivos,

mantener los vnculos de forma automtica, utilizarFTP para cargar el sitio local en el

servidor, etc.

La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que

cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese

nombre.

Crearo editarunsitio web sinconexin a Internet:

Una vez creadas las carpetas que formarn la estructura del sitio local , o por lo menos la

carpeta raz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a

Nuevo sitio.


3/17

Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios

definidos.

Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin ala opcin Administrar sitios o Nuevo sitio.

Propiedades y formato:Caractersticas del texto:

Las caractersticas deltexto seleccionadopueden ser definidas a travs del men Formato, y

a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a

travs del inspector de propiedades, que estn clasificadas en dos categoras HTMLyCSS.

Comenzamos viendo las propiedades HTML

Formato:

Permite seleccionar un formato de prrafo ya definido para HTML , que puede serencabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecerttulos dentro de un documento. El formato predeterminado sirve para que el texto aparezcatal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solose considera uno, pero al establecer el formato predeterminado se respetar que hayanvarios espacios en lugar de solo uno. El texto normal, debera ir siempre en prrafos, salvoque est en otros elementos, como tablas o listas.


4/17

Estilo:

El botn B encierra el texto en una etiqueta , que por defecto semuestra en negrita. El botn I, lo encierra entre , que por defecto se ve encursiva.

Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos atravs del men Texto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecensubrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata deun vnculo. Adems, emplea etiquetas que estn en desuso.

Lista:

Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son laslistas en el siguiente apartado.

Sangra:

Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especiede margen que se establece a ambos lados del texto. En este caso los botones se refieren asangra a la izquierda del texto.

Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta , que por defecto se muestra indentada hacia la derecha.En cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta.

Hiperenlaces:

Introduccin:

Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de

una pgina o archivo a otra pgina o archivo.

Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta que

es la que en HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de

estado:


5/17

Imgenes:

Introduccin:

Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la

informacin o parte del diseo,

la hacen mucho ms atractiva a ojos del visitante. Noobstante, no conviene abusar, ya que aumentarn mucho el tamao final de la web.

Existen una serie de formatos de imagen ms recomendables que otros para ser

introducidos en una pgina web.

Insertar una imagen:

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus deesto, ya es posible seleccionar una imagen a travs de la nueva ventana. Cuando teacostumbres, te ser ms cmodo acceder con la combinacin de teclasCtrl+ Alt + I.


6/17

Tablas:

Introduccin:

Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a

las tablas es posible distribuir el texto en columnas,

colocar imgenes al lado de un bloquede texto, y otra serie de cosas que sin las tablas seran imposibles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y organizada ,

dividindolos en filas y columnas.

Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en tablas. Esto es

debido a la facilidad que nos ofrecen estos elementos para organizar contenidosy repartir el

espacio. No obstante, esta no es una prctica recomendable, ya que las tablas no fueron

pensadas para ello, y si no estn bien anidadas pueden ocasionar problemas al analizar

nuestra web con herramientas automticas, como los bots que indexan el contenido para los

buscadores. Para maquetar nuestras pginas, lo recomendado es emplear capas (div) y

CSS.

Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas

Insertar una tabla:

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la

tabla,

as como el Ancho de la tabla.

El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro

es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la

ventana del navegador en la que se visualice la pgina , en cambio, el ancho enPorcentaje

indica el porcentaje de la pgina o del elmento contenedor) y se ajustar al tamao de la


7/17

ventana del navegador, esto permite que los usuarios que tengan pantallas grandes,

aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna

uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrar borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los

bordes de stas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

Marcos:

Introduccin:

Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten

mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin,

mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar

tambin la apariencia.


8/17

Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por

ejemplo, en la siguiente imagen puedes ver una pgina con dos marcos. El marco izquierdo

contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder

visualizar la pgina de este modo, hemos tenido que abrir el documento index.htm, que es la

pgina que contiene los marcos agrupados.

Formularios:

Introduccin:

Los formularios se utilizan para recoger datos de los usuarios , nos pueden servir para

realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los

usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar

un programa que recibir los datos y har el tratamiento correspondiente.

Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y

validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan

nociones de programacin, ya sea en PHP, en JavaScript o en otro lenguaje de

programacin, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario simple.


9/17

Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens

desplegables, y botones.

Elementos de formulario:

Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar,

opcin Formulario, o lo que es ms cmodo si vamos a insertar varios elementos, desde el

panel Insertar en la seccin Formularios.

A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que

pueden ser insertados en la pgina.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un

formulario, as como algunas de sus propiedades.

Campo de texto y rea de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea ,

mientras que el rea de texto permite escribir varias.

Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades,

marcando la opcin Una lnea o Multi lnea respectivamente.


10/17

Multimedia:

Pelculas Flash (SWF):

Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es frecuente

verlas en las pginas iniciales de los sitios web,

a modo de presentacin hacia los usuarios,

como banners publicitarios, como botones... Flash es el elemento multimedia ms empleado

en las pginas web.

Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para poder

ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de

Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el navegador.

Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar Media,opcin Flash, o pulsando Ctrl + Alt + F.

Tambin pueden insertarse empleando el panel Insertar en la categora Comn, pulsando

sobre la opcin SWF que aparece al desplegar el men Media.


11/17

Inspector de propiedades:

Como en otros elementos, como las imgenes, podemos asignarle el ancho ( An.) y alto

(Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre elarchivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As, para editarlo,bastar con pulsar Editar.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio.

La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica quenada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin noestuviera marcada, se mostrara nicamente el primer fotograma de la pelcula hasta que elusuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que lareproduccin sea activada por algn comportamiento.

La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Convienedejarla en Alta para verlo tal cul se cre.

La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son deltamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto,aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si

elegimos Ajuste exacto,

se vern slo los objetos,

omitiendo el escenario de fondo.

Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con eltexto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido delelemento que contiene el Flash (normalmente un prrafo) empleando CSS.

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre elFlash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se hayaespecificado un color de fondo en el Flash).

El botn Reproducir nos permite ver la pelcula.

Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:

Al insertarse animaciones Flash, es


12/17

frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir loselementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuandopubliquemos nuestro sitio, si no los archivos no se vern. De todas formas, Dreamweaver nosavisar cuando incluya archivos.

Las plantillas:

Introduccin:

Cada vez que deseamos crear un sitio web , tenemos que tener muy en cuenta que las

pginas deben seguir un formato uniforme.

Adems del formato, es frecuente tener elementos que se repiten en cada pgina, como el

logo o el men.

La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar

sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de

tener pginas con una estructura basada en la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la pginaen la que van a estar basadas el resto

de pginas del sitio web, pero que incluyen la posibilidad de establecer unaszonas editables

y otraszonas que sern fijas, que no podrn ser modificadas.

No es posible modificar las propiedades de una pgina que est basada en una plantilla,

aexcepcin del ttulo. Cuando se desea que existan pginas con , por ejemplo, diferente color

de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las

pginas en una u otra plantilla, segn el color de fondo que se desee para cada una.

Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas

basadas en ella. Esto nos puede ahorrar mucho trabajo.


13/17

Las plantillas son archivos con la extensin DWTque se guardan en el sitio web, dentro de

una carpeta llamada Templates

HTML desde Dreamweaver:Etiquetas:

Las etiquetas consisten en poner un mismo comando entre los smbolos< y >. La primera

etiqueta indica inicio, y la segunda, que incluye el smbolo/, indica final y se suele denominar

etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre

el que actan, incluyendo cierto cdigo dentro de la etiqueta.

Por ejemplo, un prrafo se inserta entre las etiquetas

y
, pero es posible cambiar
sus caractersticas predeterminadas, como puede ser asignarle una clase de estilo CSS.

Para ello, a la etiqueta de apertura anterior habra que aadir el atributo y su valor, quedando

y
.
Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con

la apariencia y contenido definidos en el editor grfico, pero tambin ofrece otras

posibilidades para trabajar directamente sobre el cdigo.

Capas:

Las capas no son ms que unos recuadros, elementos de bloque, destinados a contener y

agrupar otros elementos, igual que los prrafos son elementos de bloque destinados a

contener texto.

Las capas, tambin llamadas layers o divisiones, se crean con la etiqueta .

Al ser elementos contenedores, son muy tiles para organizar nuestros elementos. Si esto lo

combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite

colocar los elementos donde queramos en nuestra pgina , obtenemos los elementos ideales

para maquetar nuestra pgina, es decir, distribuir el contenido en bloques.


14/17

Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro

blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin.

Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y

arrastrndolos hasta conseguir el tamao deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones

flash, y todos los elementos que puede contener un documento HTML.

Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina

tambin la capa. Las capas, combinadas con JavaScript pueden dotar a una pgina de

verdadero dinamismo.

Comportamientos:

Introduccin:Los comportamientos son acciones que suceden cuando los usuarios realizan algnevento

sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto,

hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como cdigo HTML, se programan en JavaScript.

Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es

necesario escribir ninguna lnea de cdigo JavaScript para programarlos.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de

comportamiento lo veremos ms adelante.

Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de

sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario

introducir este conjunto de comportamientos a travs del panelComportamientos.

Para validar formularios ya viste algunas caractersticas del panelComportamientos. Vamos

a recordar las que necesitamos para poder insertar comportamientos ms tarde.

El panel Comportamientos se puede abrir a travs del men Ventana, opcin

Comportamientos. Tambin pulsando Mays+F4.


15/17

Estilos CSS Avanzados:

Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar,modificar o adornar la pgina de un modo eficiente.

Aplicar estilos CSS:

cuando crebamos una < Nueva regla de estilo > desde el inspector de propiedades, sedefina la regla nicamente para la pgina actual. Esto generaba un cdigo similar al siguienteen el de la pgina

La base del CSS es lograr un estilo homogneo y fcil de modificar para todo nuestro sitio.

Por lo tanto, no tiene sentido incrustar el mismo estilo en cada pgina. En nuestros sitios de

ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensin

.css). Esta opcin nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un

slo archivo que aplicaremos a todas las pginas.

Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En

este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionandoCSS). En l

escribiremos las reglas de estilo del con la misma sintaxis que hemos visto ms arriba pero

eliminado el componente HTML.

Sitios remotos:

Configurar un Sitio Remoto:

haz clic en el men Sitio y selecciona Administrarsitios


16/17

Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo

para el caso) y pulsa Editar.

Vers que se abre el cuadro de dilogo de Definicin del Sitio.

Ahora podremos escoger entre trabajar en modo bsico o avanzado. Vamos a seleccionar la

pestaa Avanzado para poder ver con ms detenimiento las opciones que se nos ofrecen.

Una vez ests en el nuevo modo, selecciona la Categora Datos remotos en el listado de la

izquierda.

Ahora en el desplegable Acceso selecciona el mtodo de acceso que deber utilizar

Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos

la opcin FTP. Se mostrarn las siguientes opciones:


17/17

Kevin Vasquez Saavedra Informe de Computo

Documents

Transcript of Kevin Vasquez Saavedra Informe de Computo