Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Dreamwever
1.
2. Flujo de trabajo de desarrollo Web
Conceptos básicos de Dreamweaver CS4
Características de Dreamweaver CS4
Editar páginas we
Cómo tener una página en Internet
Arrancar y cerrar Dreamweaver CS4
Abrir y guardar documentos
Guardar un Documento
Mi primera página
Lcda. Mónica González R.
3. * Introducción
* Flujo de trabajo de desarrollo Web
* Planificación
* Conceptos básicos de Dreamweaver CS4
* Características de Dreamweaver CS4
* Editar páginas web
* Cómo tener una página en Internet
* Arrancar y cerrar Dreamweaver CS4
* Abrir y guardar documentos
* Guardar un Documento
* Mi primera página
* videos
4. Flujo de trabajo de desarrollo Web
El flujo de trabajo de desarrollo Web comienza con el proceso de definición
de una estrategia y unos objetivos del sitio, continúa con el diseño (durante
el cual se define el aspecto y el funcionamiento de un sitio propuesto) y
avanza hasta la fase de producción y desarrollo (durante la cual se crea el
sitio y se codifican las páginas); la funcionalidad del sitio se comprueba
para ver si se cumplen los objetivos establecidos y, seguidamente, se
publica el sitio. Muchos ingenieros de desarrollo también programan
operaciones de mantenimiento periódico para asegurarse de que el sitio
continúa estando actualizado y operativo.
Para facilitar la localización de información necesaria para el desarrollo de
sitios Web, este curso de Dreamweaver se divide en amplias secciones que
siguen este modelo estándar de aproximación al desarrollo Web:
planificación del sitio, diseño, desarrollo, comprobación y publicación y
mantenimiento.
5. PLANIFICACIÓN
Planificar sitios
Planificar y organizar cuidadosamente el sitio desde el primer momento puede
ayudar a ahorrar tiempo más adelante. La organización del sitio implica mucho
más que determinar el lugar en el que irá cada archivo: la planificación del sitio
implica con frecuencia investigar los requisitos que debe cumplir el sitio, el perfil
de la audiencia y los objetivos del sitio. Además, debe tener en cuenta requisitos
técnicos tales como el acceso de los usuarios, los navegadores, los plug-ins o las
restricciones a la descarga de archivos.
6. Unidad 1.
Conceptos básicos de Dreamweaver CS4
Dreamweaver CS4, es un software fácil de usar que permite crear páginas
Web profesionales.
Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente
diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el
código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor
sin salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la
página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo
a entenderlo y decidir si quieres adquirir la versión completa de este fantástico
programa.
Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas
registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.
Las páginas web están escritas en HTML. Si no conoces las características básicas de
HTML puedes verlas aquí.
7. Características
En este punto comentaremos las características que aporta esta nueva versión sobre la
anterior.
Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que
permite cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida
y cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe,
como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para
cada ocasión (clásico, programador, diseñador, etc. ) pero también tenemos la
posibilidad de crear el nuestro propio de forma muy sencilla.
8. Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal
y como veríamos la página en un navegador. Si hemos incluido elementos
interactivos en nuestra página, como menús desplegables, menús tipo
acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo,
de la misma forma que lo haríamos en un navegador.
Navegador de código. La función de Navegador de código muestra las
fuentes de código que afectan a la selección que tengamos activa, pueden
ser CSS (hojas de estilos en cascada), funciones JavaScript externas,
plantillas de Dreamweaver, archivos de origen de iFrame, etc.
9. La nueva barra de Archivos relacionados muestra todos los archivos que de una
forma u otra contribuyen al diseño final de nuestra página, como hojas de estilo css,
archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivo
a otro cómodamente y tener una visión mucho más clara de todos los archivos con
los que estamos trabajando en nuestro sitio web.
Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda
dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste
último nos permite crear y editar nuestros estilos de forma cómoda y sencilla.
Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crear
objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las
páginas web, de forma que el archivo original de Photoshop y la imagen optimizada
en Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiar
características de los objetos inteligentes de imagen directamente desde
Dreamweaver.
10. Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones
editables. De esta forma los usuarios previamente habilitados podrán actualizar el
contenido de estas regiones de la página web directamente desde el navegador, sin
necesidad de tener un editor de páginas web instalado.
Software Subversion. Subversion es uno de los más usados sistemas de control de
versiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con el
repositorio de versiones, facilitando el trabajo a los profesionales que empleen este
sistema.
Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas de
forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad
de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones
dinámicas con la tecnología Spry.
11. Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear
los documentos con la extensiónHTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso el Bloc de
notas incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo
utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más
insertar cada uno de los elementos de la página, al mismo tiempo que es más
complicado crear una apariencia profesional para la página, sobre todo si no estamos
demasiado familiarizados con el HTML. Aunque también es cierto que escribir el
código nos da más control sobre él, y sobre todo al principio, nos ayudará a
aprenderlo rápidamente.
Hoy en día existe una amplia gama de editores de páginas web.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web,
como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o
Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
12. Cómo tener una página en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa
con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del
día. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido
por el de la suya.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también
un dominio, tarea de la que se suele encargar la propia empresa de hospedaje.
Registrar un dominio consiste en registrar un nombre para nuestra página.. Es posible
registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net,
.org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya
que nuestra página no será más que un archivo dentro de la de la empresa contratada.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo deberás subir
todos los archivos tal y como aparecen en tu disco duro, respetando el nombre
de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu
sitio experimentará fallos y enlaces que no funcionarán.
14. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir
con → Adobe Dreamweaver CS4.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + N.
Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir
la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya
creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A
continuación pulsamos el botón Crear.
15. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir
con → Adobe Dreamweaver CS4.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + N.
Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir
la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya
creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A
continuación pulsamos el botón Crear.
16.
17. Guardar un Documento
Para guardar un documento, puedes utilizar cualquiera de las siguientes
operaciones.
Hacer clic en el botón Guardar de la barra de herramientas estándar.
Pulsar la combinación de teclas Ctrl + S.
Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando
simultáneamente con varios documentos, poder guardar todos de golpe, sin la
necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de
las siguientes operaciones.
Hacer clic en el botón Guardar todo de la barra de herramientas estándar.
Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones
hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la
opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios
en todos los documentos modificados. Por ello es conveniente que al principio no
utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De
todas formas, observa que cuando hay cambios sin guardar aparece un * tras el
nombre del documento .
18. Mi primera página
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos
a crear una página web sencilla, con varios estilos de texto, una imagen y un
enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás
cómo trabajar con los elementos básicos con los que están hechas la mayoría de las
páginas web. Si nunca has hecho una página web, este es el momento para
descubrir lo fácil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página
anterior como puede hacerse. Abre un documento nuevo y selecciona
la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por
defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
19. Una vez introducido el texto, vamos a modificar el título y el color de fondo del
documento.
Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades
de la página.
Entonces se abrirá una ventana como la que aparece a continuación:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará
a ser de color azul.
Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera
página.
Para aplicar los cambios, pulsa sobre el botón Aceptar.
Pág. 1.4
20. Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la
carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta
dedicada a las imágenes.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer
clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre
una ventana con una opción similar a Guardar imagen como... (dependiendo del
navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco
duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los
derechos de autor de la imagen.
Copia la imagen que aparece a continuación, para luego poder insertarla en la página web
que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de
crear.
Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar,
situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter).
Después nos dirigimos al menú Insertar, opción Imagen.
21. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que
la habías guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto.
Si no te aparece, puedes mostrarlo a través del menú Ventana,
opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está
contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.
Selecciona la primera línea de texto. En el inspector de propiedades
pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el
valor Encabezado1 del cuadro Formato.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo,
pulsando el icono CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a las
propiedades de CSS como a las propiedades de HTML.
Podemos decir que en una página web, HTML se encarga de estructurar el
contenido, la información, mientras que CSS se encarga de mostrar ese contenido
con el formato adecuado.
22. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto
mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control
sobre el diseño de la página Web y reducen el tamaño del archivo.
Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para
aplicar el formato solo al texto seleccionado. También aplica el estilo
de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como
muestra la imagen siguiente:
Observa que hemos centrado el texto pulsando en el botón .
Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >,
marca los botones para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar
es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado,
encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.
Ahora, centra el párrafo como hemos visto hasta ahora, pulsando en .
23. Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia
el panel de Propiedades a las propiedades de HTML.
En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la
imagen:
Por último guarda el documento. Ya sabes que puedes hacerlo a través del
menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html.
Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en la
misma carpeta que la imagen descargada.
Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.
