WIX Y ADOBE DREAMWEAVER - CIS VIRTUALcisvirtual.ucv.edu.pe/e-book/CIII-ebook/S02/files/s02.pdf2...

WIX Y ADOBE DREAMWEAVER

Administración y edición del Sitio Web guardado en Wix

Administración de componentes el Wix.

Publicación de un sitio web multimedia en WIX

Entorno de Adobe Dreamweaver

Sitios web

Página web

Propiedades de la página

Etiquetas DIV

Archivos y carpetas ocultos

2

2

GUÍA DIDÁCTICA

Descripción

Esta sesión proporciona información sobre la administración y edición de un sitio web en Wix,

así como sobre el diseño de un sitio web, a partir de un sitio local creado en Dreamweaver en el que

se podrán crear páginas web personalizadas, insertando componentes propios del programa y otros

creados fuera de él.

Iniciaremos con el estudio de la sesión con el entorno de Adobe Dreamweaver, los sitios web,

las propiedades de página, las etiquetas DIV, archivos y carpetas ocultos.

Te deseamos éxitos en el término de esta sesión

Capacidad

El participante al final de esta sesión será capaz de diseñar sitios web teniendo en cuenta las

herramientas aplicadas de forma organizada y creativa.

Actividad

Elaborar un sitio web e insertar capas como estructura de distribución de componentes en

una página web.

Evaluación

En esta Sesión Ud. será evaluado en:

Diseño de sitios web usando las herramientas aplicadas de forma organizada y creativa.

3

Administración y edición de un sitio en WIX

1. Ingrese a WIX con su usuario y contraseña

2. Seleccione en el menú de WIX, la opción Mis Sitios

3. Visualice el nombre del sitio a administrar. Ejemplo: computacion3

4. Elija el botón Editar sitio correspondiente.

Editando textos en las páginas de WIX

Los textos digitados en las plantillas pueden ser editados y personalizados.

Pasos:

1. Hacer clic en el texto a editar

2. Elija Editar texto.

3. Modificar el texto (Ejemplo: CONSULTORÌA INFORMÀTICA) y aplicar el

formato personalizado.

1

2

3

4

4. Podremos tener como resultado lo siguiente:

5. Ahora usted, edite otros textos de la página y aplique sus formatos.

Cambiar una imagen en una plantilla de WIX

Una imagen insertada en una plantilla puede ser cambiada. Ejemplo: active la

página QUIENES SOMOS y siga el siguiente proceso.

Pasos:

1. Hacer clic en la imagen y elija Cambiar imagen.

5

2. Hacer clic en el botón Cargar imagen y localice la nueva imagen a insertar.

3. Seleccione la imagen y hacer clic en el botón Aplicar.

4. El resultado será:

Cambiar una galería en una plantilla de WIX

Una galería de imágenes insertada en una plantilla puede ser cambiada. Ejemplo:

active la página INICIO y siga el siguiente proceso.

1. Hacer clic en la galería de imágenes y elija Cambiar imágenes.

Opciones para editar la imagen

6

2. Hacer clic en el botón Agregar imágenes y localice las nuevas imágenes.

Puede cambiar el orden de las imágenes (si o desea). Hacer clic en cada nueva

imagen y clic en el botón Aplicar.

3. Elimine las imágenes que no formen parte de la galería. Hacer clic en el botón

Guardar.

7

4. El resultado será el siguiente:

Podemos obtener una variedad de resultados, ya que cada uno de ustedes puede

personalizar su sitio web. Tan solo haz clic en el objeto y personaliza tu cambio.

Aquí una muestra.

8

Administración de componentes en WIX

Un sitio web tiene componentes que pueden ser configurados según el diseño a

realizar, por ello WIX presenta en s editor las siguientes opciones:

En la opción de AGREGAR:

Podemos seleccionar elementos que deseemos añadir a nuestra página actual.

Pasos:

1. Seleccione la página web donde se agregará el componente (Selector de

Páginas).

2. Elija la opción AGREGAR y luego el componente. Ejemplo: Texto.

Escriba el texto y aplicarle su formato.

Podemos tener así:

3. El mismo proceso podemos seguir para otro componente. Vamos inténtalo.

9

4. En la opción APP MARKET

Podrá enlazar su sitio web a las aplicaciones disponibles en WIX.

CONFIGURACIÒN DEL SITIO WEB

Podrá cambiar la configuración del sitio web: Dirección del sitio, motor de búsqueda,

Redes sociales, Estadísticas.

Pasos:

1. Elija el menú SITIO y luego Opciones del sitio para personalizar.

2. Ahora puede editar y administrar su sitio.

10

FELICITACIONES, ya tiene su sitio web el cual puede editarlo en cualquier momento.

Publicación de un sitio web multimedia en WIX

Para publicar un sitio en WIX online sin demoras, seguimos el siguiente proceso.

1. Hacer clic en el botón PUBLICAR añade un nombre de página (si aún no grabó)

Con este último proceso, podemos ver nuestro sitio web y su contenido en un

navegador de internet.

Publicar

11

Entorno de Adobe Dreamweaver CS6

Dreamweaver CS6 es un software que permite crear y editar páginas web

profesionales, 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.

Iniciar sesión en Dreamweaver CS6

1. Para abrir Dreamweaver, debe hacer clic en el ícono (Escritorio)

2. El entorno de trabajo consta de los siguientes paneles:

Donde:

A. Barra de herramientas, permite seleccionar las herramientas necesarias

para elaborar el documento o página web.

B. Barra de aplicación, en ella encontraremos la totalidad de opciones del

software, distribuidas en menús.

C. Ventana del documento, espacio donde insertaremos los componentes

que conformarán la página web.

A. Barra de herramientas documento

B. Barra de aplicación.

C. Ventana de documento

D. Conmutador de espacio de trabajo

E. Grupos de paneles

F. Selector de etiquetas

G. Inspector de propiedades

H. Panel de archivos

12

D. Conmutador de espacio de trabajo, permite seleccionar el espacio de

trabajo más conveniente para el diseñador de la página web.

E. Grupos de paneles, son ventanas que pueden ser activadas desde el

menú Ventana por conveniencia del diseñador de la página web.

F. Selector de etiquetas, con las cuales podemos elegir un componente del

documento web.

G. Inspector de propiedades, contiene los atributos o características de un

componente seleccionado previamente. Estos atributos cambian según el

componente elegido.

H. Panel de archivos, es uno de los paneles principales del software; puesto

que contiene todos los archivos y componentes internos y externos que se

conforman el sitio web.

Vistas de documento web

Las vistas representan las formas como puede mostrarse el documento para ser

elaborado. Así tenemos:

1. Vista Diseño

Es un entorno para el diseño y edición visual de la página y el desarrollo

rápido de aplicaciones. En esta vista, Dreamweaver muestra una

representación visual del documento completamente editable, similar a la

que aparecería en un navegador.

2. Vista Código

Es un entorno de programación manual para escribir y editar código HTML,

JavaScript, código de lenguaje de servidor, como por ejemplo PHP o

ColdFusion Markup Language (CFML), y otros tipos de código.

13

3. Vista Dividir

Versión dividida de la vista Código que le permite desplazarse por el trabajo

realizado en diferentes secciones del documento a la vez.

4. Vista En vivo

Similar a la vista Diseño, muestra una representación más realista de la

apariencia que tendrá el documento en un navegador, permitiendo

interactuar con el documento de la misma forma que lo haría en un

navegador. La Vista en Vivo, no es editable. No obstante, puede realizar

modificaciones en la vista Código y actualizar la Vista en vivo para ver los

cambios.

14

Barra de herramientas

A. Mostrar vista de código.

B. Mostrar vistas de código y diseño.

C. Mostrar vista de diseño.

D. Vista en vivo.

E. Multipantalla (para configurar el tamaño y orientación de la página web).

F. Vista previa/Depurar en navegador (para elegir el navegador que abrirá

la página web).

G. Administración de archivos (para mostrar opciones de los archivos del

sitio web).

H. Validación W3C (para validar y configurar el documento web).

I. Comprobar compatibilidad con navegadores

J. Ayudas visuales (para activar/desactivar herramientas de visuales del

documento).

K. Actualizar vista de diseño

L. Título de documento (título que mostrará la página web al abrirse en el

navegador).

Sitios web

Un sitio web es un conjunto de páginas de internet relacionadas y comunes a un

dominio de Internet.

Una página web es un documento HTML/XHTML que es accesible generalmente

mediante el protocolo HTTP de Internet en una URL (dirección de localización de

origen).

Todos los sitios web públicamente accesibles constituyen una gigantesca World

Wide Web de información (un gigantesco entramado de recursos de alcance

mundial).

Crear un sitio web:

Ejercicio:

Se desea crear el sitio NEGOCIO que promocione los servicios de una empresa

perteneciente al rubro agroindustrial. (Asumimos que la etapa del análisis ya ha sido

efectuada con anterioridad). La información preliminar es la siguiente:

Vistas del documento web

15

1. Diseño Lógico.

2. Diseño Físico.

3. Diseño de maquetación (distribución de espacios de las páginas que

tendrá el proyecto).

a) Página inicio.html

Imagen1

Imagen2

b) Página quienes.html:

Texto1

Texto2

Texto3 Imagen1 Texto4

c) Página productos.html:

Texto1

Banner

Imagen1 Imagen2 Imagen3

Imagen4 Video Imagen5


d) Página index.html:

Marco 1 (Encabezado)

Marco 2 (Contenido)

Marco 3 (pie de página)

Negocio

Inicio Compañia Servicios Productos Clientes Contacto

index.html

inicio.html quienes.html servicios.html

product.htmlclient.html

contac.html

16

A tener en cuenta…

Toda página web, debe poseer un pie de página, el mismo que mostrará

información importante del sitio web y de la institución a la que pertenece.

4. Todo el proceso de maquetación la desarrollaremos en las siguientes páginas, a

través de etiquetas DIV.

Manos a la obra…vamos a crear el sitio web NEGOCIO.

Solución:

1. Ingresar a Adobe Dreamweaver y crear nuestro sitio: opción Sitio, luego

Nuevo sitio

2. Hacer clic en la ficha Sitio y asigne un nombre de sitio: Ej.: Negocio. Luego

complete la opción Carpeta del sitio local, puede seleccionar la ubicación o

escribirla directamente (Ej.: F:\USER\Documents\Negocio) y guardamos la

configuración.


17

Organizar un sitio web

En el panel de Archivos se tendrá activo el sitio web creado, ahora deberá crear las

carpetas que sean necesarias para ordenar los componentes a usar. Ej.: Imágenes

(para guardar allí nuestras imágenes que usaremos).

1. Hacer clic derecho en el nombre del sitio web: Ej.: Sitio-Negocios

2. Seleccionar la opción Nueva carpeta

3. Escribir el nombre. Ej.: Imágenes y pulsar la tecla Enter.

4. Ya tenemos creada la carpeta Imágenes, repetir los pasos 1, 2, 3 para otras

carpetas que deseen crear. Tendremos el siguiente resultado:

Editar un sitio web

Creado el sitio web, este puede ser editado.

1. Hacer clic en el menú Sitio y luego en Administrar sitios…

18

2. Si eligiera Editar, tendríamos la oportunidad de cambiar el nombre del sitio o

la ubicación del mismo. Ej.: Cambiar la ubicación a F:\Negocio.

3. Hacer clic en el botón Aceptar para ejecutar el cambio.

Actualizar archivos en el sitio web

Al modificar algún objeto que es referenciado por algún otro documento, debemos

actualizar el sitio web. Para ello, activar el panel de Archivos y hacer clic en el botón

Actualizar (F5).

a. NUEVO: para crear

un nuevo sitio web. b. EDITAR: para

modificar el sitio web seleccionado.

c. DUPLICAR: para

duplicar el sitio web seleccionado.

d. ELIMINAR: para

eliminar el sitio web seleccionado.

e. LISTO: para activar

el sitio web seleccionado.

a b c

d

e

Ahora ya tenemos un sitio web de nombre: Negocio y ahora

crearemos la página web en blanco.

19

Crear un documento web (página web)

Teniendo creado nuestro sitio web, procedemos a crear en él nuestras páginas web:

Puede usar una de las siguientes formas:

Forma 01: Usando el panel principal

Forma 02: Usando el Panel de Archivos

1. Hacer clic derecho en el nombre del sitio web. Ej.: Sitio-Negocio

2. Seleccionar la opción Nuevo archivo.

Forma 03: Usando el menú Archivo.

1. Hacer clic en el menú Archivo

2. Elegir la opción Nuevo y seleccionar la opción HTML.

3. Hacer clic en el botón Crear

20

Guardar una página web:

Todo documento web (página web) debe ser guardado en el sitio web creado activo

de la siguiente manera:

1. Hacer clic en el menú Archivo y elija Guardar como…

a) Nombrar el archivo como quienes.html (si fuese la página de inicio

del sitio web se llamaría Index.html, pero ello se creará después).

b) Grabar en el sitio donde se grabará la página. Ej.: Negocio.

c) Hacer clic en el botón Guardar.

CONSIDERE

A esta página la llamaremos quienes.html puesto

deberá contener toda información de la empresa. Esta página debe ser grabada en el sitio web

“Negocio”

a1

c1

b1

21

2. Este proceso se puede corroborar en el panel de Archivos:

3. De acuerdo al diseño físico de nuestro sitio web “Negocios”, crearemos

también las páginas inicio.html, servicios.html, productos.html.

clientes.html y contactos.html, siguiendo el mismo procedimiento,

teniendo como resultado:

IMPORTANTE: Estaría faltando la página principal del sitio web (la que debe abrirse

primero), llamada index.html, la que crearemos posteriormente.

Propiedades de página

Esta herramienta permitirá configurar la página web, en lo referente a: apariencia,

vínculos, título/codificación, encabezados e imagen de rastreo.

Para acceder a las propiedades de cada página, debemos:

1. Activar la página web a asignar propiedades. Ej.: quienes.html

2. En el panel de Propiedades, hacer clic en el botón Propiedades de la página…

3. En ventana que se muestra podemos personalizar las alternativas por

categoría, para. Ej.: Apariencia CSS.

22

4. El entorno de trabajo de categoría: Vínculos CSS

5. El entorno de trabajo de categoría: Título/Codificación (CSS)

11

21

31

41

5

6

7

8

9

1. Fuente de página: configura el tipo de letra 2. Negrita 3. Cursiva 4. Tamaño de letra 5. Color de texto 6. Color de fondo de la página web 7. Insertar imagen de fondo 8. Repetir imagen en x o y 9. Configuración de márgenes

1. Fuente de vínculo: configura el tipo de letra 2. Negrita 3. Cursiva 4. Tamaño de letra 5. Color de vínculo 6. Color de vínculo de visitado 7. Color de vínculo de sustitución 8. Vínculos activos 9. Estilo subrayado del vínculo

11

21

31

41

51

61

91

71

81

11 1. Título: título de

la página que se mostrará en el navegador.

Nota: Puede coincidir

con el nombre de la página.

23

6. Así como hemos cambiado las propiedades de la página quienes.html,

podemos cambiar las propiedades del resto de páginas creadas en el sitio web,

según lo solicitado en el diseño del sitio web. Para nuestro caso, las mismas

propiedades serán aplicadas a cada una de las páginas ya que son los colores

que representan a la empresa.

Etiquetas DIV

Es la tecnología actualmente usada por los webmaster para estructurar (maquetar)

el contenido de una página web. En ellas podemos colocar textos, imágenes, etc.

que conformarán la página web, ubicándolas en una determinada posición,

asignándole propiedades (como color o imagen de fondo, tamaño de letra, anchura,

altura) por separado pero de un modo más profesional.

Elementos de una Etiqueta DIV

A tener en cuenta:

Las etiquetas DIV, no son más que unos recuadros, destinados a contener y

agrupar otros elementos.

Las etiquetas DIV, se crean con la etiqueta <div></div>.

Las etiquetas DIV, se crearán a estilos CSS; que contiene las propiedades que

permiten editar la etiqueta (propiedades de etiqueta).

Al estructurar el diseño de una página web, debemos usar una etiqueta

contenedor en la cual se inserten otras etiquetas que permitan la distribución

exacta de la información a mostrará dicha página, debiéndolas crear dentro de

un mismo estilo patrón.

Dentro del recuadro de la etiqueta es posible insertar texto, tablas, imágenes,

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

Etiqueta DIV Ventana

Estilos CSS

Propiedades de la Etiqueta

24

Insertar una Etiqueta DIV

1. Seleccione el menú Insertar y elija Objetos de diseño

2. Luego seleccione “Etiqueta DIV”

3. Luego asignar el ID (un nombre) a la etiqueta. Ejemplo: contenedor.

4. Hacer clic en el botón Aceptar.


Asignar Estilo CSS a una Etiqueta

Es necesario que la etiqueta pueda ser editada, tal que se ajuste a las necesidades

del diseño.

Pasos:

1. Seleccione la etiqueta DIV (Clic en su borde)

2. Active la ventana de Estilos CSS (menú Ventana/Estilos CSS) y hacer clic

en el botón Nueva Regla CSS.

25

3. Ahora deberá definir la regla de la etiqueta DIV:

A. Si es una etiqueta DIV que va a contener a otras etiquetas, entonces

defina la regla (Ejemplo: Nuevo archivo de hoja de estilos).

a) Hace clic en el botón Aceptar, pidiéndole ahora asignar un

nombre al estilo (Ejemplo: misestilos) y Guarde.

26

b) El resultado será el siguiente: (ver Panel de Estilos)

B. Si es una etiqueta DIV que irá dentro de otra contenedora, entonces

defina la regla dentro del estilo contenedor. (Ejemplo: mis estilos).

Insertar la etiqueta Titulo dentro del estilo CSS “misestilos”, creado

anteriormente.

Pasos:

a) Seleccione la etiqueta DIV (Clic en su borde)

b) Active la ventana de Estilos CSS (menú Ventana/Estilos CSS)

y hacer clic en el botón Nueva Regla CSS.

c) Se mostrará la siguiente ventana: Observe que se crea dentro

del estilo CSS: misestilos.

27

d) Hacer clic en el botón Aceptar y luego nuevamente en Aceptar.

e) Observe el Panel de estilos, ya tiene creado el nuevo estilo:

Propiedades de un Estilo CSS en una Etiqueta DIV:

Las propiedades de la etiqueta DIV se activan desde el Panel de Estilos CSS.

1. Active la ventana de Estilos CSS (menú Ventana / Estilos CSS)

2. Hacer doble clic en el estilo correspondiente a la etiqueta DIV. Ejemplo:

#contenedor.

3. En la ventana que se muestra puede usar las diversas categorías a editar.

Ejemplo:

28

Al hacer clic en el botón Aceptar tendremos el siguiente resultado:

29

Ejercicio:

En cada página web del sitio Negocio, insertaremos las etiquetas DIV necesarias

para la inserción de los componentes internos y externos, así tenemos:

En la página inicio.html:

“Debemos insertar 01 etiqueta contenedor y 02 etiquetas dentro:

Imagen1

Imagen2

1. Insertar la etiqueta contenedor:

o Hacer clic en el menú Insertar, elija Objeto de diseño y luego

Etiqueta Div

o Escriba el ID “contenedor1” a la etiqueta

o Hacer clic en el botón Aceptar.

o Asignar un estilo CSS a la etiqueta DIV contenedor1.

o Seleccionar la etiqueta DIV contenedor1 (clic en el borde)

o En el Panel de Estilos CSS, hacer clic en el botón Nueva

regla CSS

o Defina la regla como “Nuevo archivo de hoja de estilos”

Contenedor

30


o Grabar el estilo CSS, con un nombre. Ejemplo: estiloinicio

31

o Defina las propiedades del estilo. Ejemplo:

o Hacer clic en el botón Aceptar

2. Insertar las etiquetas DIV que se insertarán dentro del contenedor. Ejemplo:

Imagen1, Imagen2:

o Ahora insertaremos la etiqueta imagen1

o Hacer al final del texto de la etiqueta y pulse enter (para

insertar las 02 nuevas etiquetas)

o Hacer clic en el menú Insertar, elija Objeto de diseño y

luego Etiqueta Div

o Escriba el ID “imagen1” a la etiqueta y Aceptar la ventana.

32

o Se habrá insertado la etiqueta DIV en el contenedor.

o Asignar el estilo CSS “estiloinicio.css” a la etiqueta imagen1

Seleccione la etiqueta DIV “imagen1” y en el panel

Estilos CSS, hacer clic en el botón Nueva regla

CSS.

Hacer clic en el botón Aceptar y luego nuevamente

Aceptar

33

o Insertemos la etiqueta DIV “imagen2”

o Hacer clic debajo de la etiqueta DIV imagen1.

o Hacer clic en el menú Insertar, elija Objeto de diseño y

luego Etiqueta Div

o Escriba el ID “imagen2” a la etiqueta y Aceptar la ventana.

o Asignar el estilo CSS “estiloinicio.css” a la etiqueta imagen2

Seleccione la etiqueta DIV “imagen2” y en el panel

Estilos CSS, hacer clic en el botón Nueva regla

CSS.

Hacer clic en el botón Aceptar.

34

Luego nuevamente Aceptar.

El resultado maquetado de la página inicio,html será el

siguiente:

Si lo deseas puedes eliminar el texto de cada etiqueta contenedor,

quedando así (Grabar los cambios: Archivo/Guardar todo)

En la página quienes.html:

“Debemos insertar 01 etiqueta contenedor y 05 etiquetas dentro”

Texto1

Texto2

Texto3 Imagen1 Texto4

Seguiremos el mismo proceso descrito anteriormente

1. Insertaremos la etiqueta contenedor, a la que llamaremos “contenedor2”

a. Hacer clic en el menú Insertar, elija Objeto de diseño y luego

Etiqueta DIV.

b. Escriba el ID “contenedor2” a la etiqueta

c. Hacer clic en el botón Aceptar.

d. Asignar un estilo CSS a la etiqueta DIV contenedor2.


35

o En el Panel de Estilos CSS, hacer clic en el botón Nueva regla

CSS

o Defina la regla como “Nuevo archivo de hoja de estilos”


o Grabar el estilo CSS, con un nombre. Ejemplo: estiloquienes

Escriba el nombre del estilo. Ejemplo:

estiloquienes.

Hacer clic en el botón Guardar.

36

o Defina las propiedades del estilo. Ejemplo:


2. Insertar las etiquetas DIV texto1, texto2, texto3, imagen1 y texto4 que se

encuentran dentro del contenedor.

o Hacer al final del texto de la etiqueta “contenedor2” y pulse enter

37

o Hacer clic en el menú Insertar, elija Objeto de diseño y luego Etiqueta

Div

o Escriba el ID “texto1” a la etiqueta y Aceptar la ventana.

o Ahora hacer clic debajo de la etiqueta Texto1 e inserte la etiqueta

Texto2.

o Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

o Escriba un nombre para la etiqueta. Ejemplo: texto2

o Ahora hacer clic debajo de la etiqueta Texto2 e inserte la etiqueta texto3.


o Escriba un nombre para la etiqueta. Ejemplo: texto3.

o Ahora hacer clic debajo de la etiqueta Texto3 e inserte la etiqueta

imagen1.


38

o Escriba un nombre para la etiqueta. Ejemplo: imagen1.

o Ahora hacer clic debajo de la etiqueta imagen1 e inserte la etiqueta texto4.


o Escriba un nombre para la etiqueta. Ejemplo: texto4.

o El resultado será el siguiente:

o Asignar el estilo CSS “estiloquienes.css” a las etiquetas texto1, texto2,

texto3. Imagen1 y texto4

o Seleccione la etiqueta DIV “texto1” y en el panel Estilos CSS,

hacer clic en el botón Nueva regla CSS.

39




o Hacer clic en el botón Aceptar y luego nuevamente Aceptar.



40

o Hacer clic en el botón Aceptar y haga sus cambios:

o Luego nuevamente Aceptar.

o Seleccione la etiqueta DIV “imagen1” y en el panel Estilos CSS,




o Seleccione la etiqueta DIV “texto4” y en el panel Estilos CSS, hacer

clic en el botón Nueva regla CSS.

41



o El resultado maquetado de la página quienes.html será el

siguiente:

42

En la página productos.html:

“Debemos insertar 01 etiqueta contenedor y 11 etiquetas dentro del contenedor”

Texto1

Banner


Imagen4 Video Imagen5


1. Insertaremos la etiqueta contenedor, a la que llamaremos “contenedor3”

a) Hacer clic en el menú Insertar, elija Objeto de diseño y luego Etiqueta

DIV.

b) Escriba el ID “contenedor3” a la etiqueta

c) Hacer clic en el botón Aceptar.

d) Asignar un estilo CSS a la etiqueta DIV contenedor3.


o En el Panel de Estilos CSS, hacer clic en el botón Nueva regla CSS

o Defina la regla del estilo. Ejemplo: Nuevo estilo de hoja de archivos.

43


o Escriba el nombre del estilo (Ejemplo: estiloproducto) y grabe.

o Ahora defina las propiedades del estilo CSS “estiloproducto.css”

44


2. Insertar las etiquetas DIV texto1, banner, inagen1, imagen2, imagen3,

imagen4, video, imagen5, imagen6, imagen7, imagen8 que se encuentran

dentro del contenedor3.

a) Hacer al final del texto de la etiqueta “contenedor3” y pulse enter

b) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

c) Escriba un nombre para la etiqueta. Ejemplo: texto1.

d) Hacer clic en el botón Aceptar

e) Hacer clic debajo de la etiqueta texto1.

f) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

g) Escriba un nombre para la etiqueta. Ejemplo: banner.

45

h) Hacer clic en el botón Aceptar

i) Hacer clic debajo de la etiqueta banner.

j) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

k) Escriba un nombre para la etiqueta. Ejemplo: imagen1

l) Hacer clic en el botón Aceptar

m) Hacer clic debajo de la etiqueta imagen1.

n) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

o) Escriba un nombre para la etiqueta. Ejemplo: imagen2.

p) Hacer clic en el botón Aceptar

q) Hacer clic debajo de la etiqueta imagen2.

r) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

s) Escriba un nombre para la etiqueta. Ejemplo: imagen3

46

t) Hacer clic en el botón Aceptar

u) Hacer clic debajo de la etiqueta imagen3.

v) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

w) Escriba un nombre para la etiqueta. Ejemplo: imagen4

x) Hacer clic en el botón Aceptar

y) Hacer clic debajo de la etiqueta imagen4.

z) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

aa) Escriba un nombre para la etiqueta. Ejemplo: video

bb) Hacer clic en el botón Aceptar

cc) Hacer clic debajo de la etiqueta video.

dd) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

ee) Escriba un nombre para la etiqueta. Ejemplo: imagen5

47

ff) Hacer clic en el botón Aceptar

gg) Hacer clic debajo de la etiqueta imagen5.

hh) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

ii) Escriba un nombre para la etiqueta. Ejemplo: imagen6

jj) Hacer clic en el botón Aceptar

kk) Hacer clic debajo de la etiqueta imagen6.

ll) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

mm) Escriba un nombre para la etiqueta. Ejemplo: imagen7

nn) Hacer clic en el botón Aceptar

oo) Hacer clic debajo de la etiqueta imagen7.

pp) Hacer en el menú Insertar/Objetos de diseño/Etiqueta DIV

qq) Escriba un nombre para la etiqueta. Ejemplo: imagen8

48

o Asignar el estilo CSS “estiloproducto.css” a las etiquetas texto1, imagen1,

imagen2, imagen3, imagen4, video, imagen5, imagen6, imagen7, imagen8.

o Seleccione la etiqueta DIV “texto1” y en el panel Estilos CSS, hacer

clic en el botón Nueva regla CSS.



o Seleccione la etiqueta DIV “banner” y en el panel Estilos CSS,



49


o Seleccione la etiqueta DIV “imagen1” y en el panel Estilos

CSS, hacer clic en el botón Nueva regla CSS.






50









51


o Seleccione la etiqueta DIV “video” y en el panel Estilos CSS,







52









53





o El resultado de la maquetación de la página productos.html es:

54

IMPORTANTE: Ya tenemos maquetadas las páginas incio.html, quienes.html y

productos.html, falta maquetar la página index.html que será diseñada en la sesión

09, puesto que se usará página de marcos.

Archivos y carpetas ocultos

Es una de las aplicaciones más cortas y se debe realizar por seguridad, para que

los archivos no puedan ser visualizados en el servidor de archivos por otros

usuarios, cuando el sitio web esté publicado en Internet.

Para ello usaremos el siguiente procedimiento:

1. Activar el panel de Archivos (menú Ventana).

2. En el panel de Archivos, hacer clic derecho en el archivo o carpeta a ocultar.

Ej.: quienes.html.

3. Seleccionar la opción Ocultación.

4. Luego, seleccionar la opción Ocultar.

REFERENCIAS: Ramón Marino. “Diseño de Páginas Web y Diseño Gráfico: Metodología y

Técnicas para la Implementación de Sitios Web y Diseño Gráfico”. Edición Sep

30, 2005.

Unidad de Modernización y Gobierno Digital. Guía Digital.

Disponible en: http://www.guiadigital.gob.cl/

Wix, disponible en: http://es.Wix.com/

Dreamweaver CS6-Etiquetas DIV: https://www.youtube.com/watch?v=5qK8eMsOhVo

http://www.guiadigital.gob.cl/

http://www.guiadigital.gob.cl/

http://es.wix.com/

http://es.wix.com/

WIX Y ADOBE DREAMWEAVER - CIS VIRTUALcisvirtual.ucv.edu.pe/e-book/CIII-ebook/S02/files/s02.pdf2...

Documents

Transcript of WIX Y ADOBE DREAMWEAVER - CIS VIRTUALcisvirtual.ucv.edu.pe/e-book/CIII-ebook/S02/files/s02.pdf2...