1

PORTAFOLIO

Dreamweaver

Luisa Fernanda Duque Toro

ASOCIACIÓN EDUCATIVA

ARMENIA QUINDÍO

2

PORTAFOLIO

Presentado por:

Luisa Fernanda Duque Toro

Dreamweaver

Presentado a la profesora:

ALBA LUCIA MONTOYA

ASOCIACIÓN EDUCATIVA

ARMENIA QUINDÍO

Octubre 18 del 2008

3

CONTENIDO

Página

1. Introducción………………………………………………………………… 4

2. Objetivos……………………………………………………………………...5

3. Justificación………………………………………………………………….6

4. Contenido del Trabajo……………………………………………………...7

5. Conclusión………………………………………………………………….36

6. Bibliografía………………………………………………………………….37

4

Introducción

El Programa “Dreamweaver 8” se puede decir que es una de las

herramientas más avanzadas en cuanto al diseño de páginas Web con

aspecto profesional. Este tipo de software no solo hace posible el diseño de

páginas Web, sino que también ofrece la posibilidad de desarrollar diversas

aplicaciones y a la vez mantenerlas actualizadas de acuerdo a las

necesidades del contexto social. Además de sus múltiples funciones,

Dreamweaver 8 proporciona herramientas visuales de diseño que permiten

agregar fácilmente elementos innovadores y prácticos a las páginas Web,

además cuenta con funciones para el desarrollo de aplicaciones que

permiten crear aplicaciones Web dinámicas.

5

Objetivos

Objetivo General

Aprender a crear, diseñar y administrar una página Web utilizando la

herramienta Dreamweaver 8.

Objetivos Específicos

Describir y definir la estructura básica del paso a paso para la

creación de una página Web.

Aprender a utilizar las principales herramientas de Dreamweaver en

el diseño de páginas Web.

Saber cómo publicar la página Web una vez ya está terminada.

6

Justificación

El siguiente trabajo tiene como fin aplicar los conocimientos que

adquirimos en clase sobre la herramienta Dreamweaver 8, de forma

detallada se describirá el proceso básico paso a paso para la creación y

diseño de una página Web. A lo largo de este trabajo, se tendrá una idea de

cómo funciona este tipo de software, y también se tendrá claro los pasos

para crear y diseñar una página Web, y de ésta forma se aprenderá a

utilizar las diferentes herramientas y los elementos básicos que este ofrece

para llevar a cabo el diseño.

7

Contenido del Trabajo

Creación y diseño de una página web en Dreamweaver:

Para crear una página web se debe de ir a…

8

Estando aquí, nos dirigiremos primero a lo que es crear nuestro sitio local,

donde guardaremos todo lo que necesitamos para trabajar en nuestro

diseño y creación de nuestra página web.

Para ello nos dirigimos a:

9

Allí se pondrá el nombre de nuestro sitio.

Allí se pondrá la ubicación en nuestro equipo donde guardaremos nuestro

proyecto de trabajo.

Después que este todo listo, damos en aceptar.

Luego nos devolverá a la ventana principal, donde allí seleccionaremos lo

que vamos a empezar a trabajar, en nuestro caso: HTML.

10

Dando clic allí nos abrirá una ventana como estas:

Aquí nos aparecerá una hoja en blanco, con una gran variedad de

herramientas de trabajo, donde empezaremos a crear nuestra página web.

Para iniciar primero que todo, y muy importante renombrar la primera

página como “index.html”, porque esta es la página de inicio de toda página

web existente, para ello nos dirigimos á:

11

Luego nos aparecerá esta ventana donde renombraremos el archivo:

Y luego clic en guardar…

12

Aquí ya veremos que la página ha quedado renombrada con éxito…

Ya teniendo listo todo esto, empezaremos a lo que es ya a editarla, primero

se mostrara como insertar una tabla, para ello nos dirigiremos a:

13

Nos aparecerá algo como esto…

Aquí nos aparecerá lo que son los números de filas, de columnas, ancho de

la tabla, con estas opciones crearemos nuestra tabla a nuestro gusto o

necesidad.

Teniendo todo listo damos en aceptar y miramos como nos ha quedado

nuestra tabla.

14

En nuestra tabla tenemos la posibilidad de introducirle texto o si queremos

también insertarle imágenes, y una de las funciones de la tabla es también

tener como un formato de nuestra página para que a la hora de insertarle

datos nos dé una correcta alineación en nuestra pantalla.

15

Para insertar una capa nos iremos a los siguientes pasos:

16

Al dar clic allí nos aparecerá un recuadro pequeño en la parte izquierda,

este es modificable a nuestro gusto, donde allí le podremos dar color de

fondo, también podremos introducir texto en él, y la capa la diseñaremos tal

cual a nuestra necesidad.

17

18

Una herramienta muy utilizada en este programa para el diseño y creación

de nuestra página web, es las propiedades que aparece en la parte inferior

de nuestro sitio de trabajo, con este podremos hacer lo que es el formato

del texto, alineación tanto de texto como imágenes y tablas, color de fondo,

color de bordes, tipos de fuentes, entre otros.

19

Para insertar una capa nos dirigimos a:

20

Aquí en el conjunto de marcos nos aparecerá una lista de opciones de

cómo queremos nuestro marco, es decir, en que ubicación u orientación

queremos que quede nuestro marco.

21

Luego de que todo esté listo tendremos que guardar los marcos según la

posición que nos muestre el cursor, es decir, cuando aparezcan unas

líneas que bordean el contorno lo guardaremos todo a nuestro gusto o

como mejor le facilite la manera de trabajar.

22

Ahora, ya visto algunas maneras de cómo crear nuestra página web , en

este momento mostraremos la manera por decirlo así Avanzada, porque es

allí donde manualmente meteremos los datos uno a uno, no solo eso

debemos tener cierto conocimiento de los códigos que se manejan allí,

porque con ellos podremos insertar como lo es títulos, subtítulos, párrafos,

insertar imágenes, tablas, botones, y entre muchas cosas más…

23

Es aquí donde a partir de programación en código HTML podremos hacer lo

que se nos antoje en nuestro diseño de página web.

24

Otra de las cosas fundamentales en el diseño de pagina web, son los

botones o enlaces, que nos llevan de una página a otra con el fin de tener

vínculos con toda nuestra página web, es decir, cuando tenemos una

página con un botón, al darle clic en ella automáticamente nos llevara a

donde deseemos, ejemplo al inicio, entonces el enlace del botón tendría

que ser “index.html”.

Para insertar un botón en Dreamweaver haremos lo siguiente:

Al darle clic allí nos aparecerá esta ventana donde pondremos las

configuraciones pertinentes, para que el enlace nos quede perfecto…

25

Es aquí donde llenaremos los datos correspondientes para que nuestro

botón funcione a la perfección, entonces en donde va “Texto del botón” le

pondremos el nombre que deseemos, en este caso “Inicio”, y en vinculo es

donde pondremos el enlace que necesitemos, en este caso es “index.html”.

26

Ya teniendo todo listo solo nos queda en dar en aceptar…

Luego aparecerá otro recuadrito donde también le daremos en aceptar…

Y listo tenemos ya nuestro botón listo:

27

Ahora ya teniendo nuestra página web lista solo nos queda subirla a

internet, pues hay muchas maneras de subir nuestros datos ya que hay

gran variedad de empresas que prestan los servicios de Hosting de pagina

web, puesto que hay unos más baratos que otros, y otros que ofrecen gran

cantidad de alojamiento en la web, pues en esta ocasión lo subiremos en un

Hosting gratuito llamado “Galeon.com”, es allí donde nos registraremos

para poder tener un espacio a subir toda nuestra página web; para ello

hacemos lo siguiente:

Nos dirigiremos primero a la página www.galeon.com en donde nos

aparecerá una ventana como estas…

28

Para registrarnos nos iremos a...

Luego de darle clic allí nos aparecerá un registro donde introduciremos

nuestros datos personales y seleccionar la opción gratuita…

29

Luego de registrarnos y aceptar lo solicitud que llega a nuestro correo con

el fin de activar la cuenta, nos dirigiremos ya a iniciar sección:

Luego de iniciar sección se mostrara algo así…

30

Ya estando allí haremos los siguiente, primero nos dirigiremos en el enlace

para subir al fin nuestros archivos donde se alojaran y así poder tener

visualización de todo nuestro proyecto…

31

Al darle clic en “Subir Ficheros”, nos desplegara una ventana en donde

subiremos uno a uno de nuestros archivos…

32

Luego de subir todos nuestros ficheros nos aparecerá algo así:

Ya teniendo toda nuestra página web subida en este servido, nos

dirigiremos en nuestro explorador de preferencia a nuestro sitio, para al fin

poder ver el resultado final…

33

34

35

Listo, como resultado final veremos al fin nuestra página web en internet,

visible al mundo donde podrán visitar nuestra página y mucho mas…

36

Conclusión

En conclusión, gracias a la herramienta “Dreamweaver 8” la creación y

diseño de una página Web, obtendremos como resultado una página muy

avanzada y con características de aspecto profesional, original y dinámica.

Además de esto, este tipo de software ofrece diversas aplicaciones y

elementos básicos que a la vez son muy fáciles de usar en la creación de

estas clases de páginas.

37

Bibliografía

Guía De Dreamweaver.

Docente: Alba Lucia Montoya.

Link página Web: http://www.musitekamix.galeon.com