Mais informações

Alimentos procesados y su efecto negativo en la salud

por Santiago Andres Pastor Bustamante

DIFERENCIA ENTRE LA WEB E INTERNET

por Itzel Gutiérrez

Alérgenos alimentarios

por EMILY MARSY AVILA GIL

Introducción de variables

por Rosa Brigith Garrido Sanchez

Tema 4: Edición web WYSIWYG

DreamWeaver

Para ello utilizamos un programa WYSIWYG, como por ejemplo DreamWeaver de Adobe. Es un programa para crear páginas web dividiendo la pantalla en dos y ver el código HTML mientras ves como va quedando la página Web. Así que lo que tu haces es lo que tu ves.

Puedes crear la página...

Como si fuese un documento de Word, vas editando sin tener que utilizar el código.

Con el código HTML

DreamWeaver Screenshot

WYSIWYG: What You See Is What You Get. Permite escribir un documento viendo directamente el resultado final.

Tema 3: Edición de código fuente

CSS

Selector, propiedad y valor

Ejemplo

p { font-color:red; }

Valor

Contenido

Propiedad

Elemento que va a modificarse

Selector

Etiqueta que quedará afectada por el estilo

Formas de aplicarlo

Estilo externo

en un documento a parte

Estilo interno

en el head del documento

Estilo en línea

en cada etiqueta XHTML

Ventajas

Permiten hacer cambios globales en todo el documento o en todo el sitio web

Evitan tener que indicar el estilo en cada etiqueta

Mayor control sobre el aspecto del documento

HTML

Etiquetas en HTML

Formularios

reset

submit

radio

text

Tablas

Columna normal

Columna tipo encabezado

Fila

Listas

No numeradas

Numeradas

1. Uno
2. Dos
3. Tres

Metaelementos

Datos legibles por los robots de los buscadores

Enlace

Enlace a un punto concreto de una página

.......

Enlace a otro sitio web

Enlace a un archivo en otra carpeta que está dentro de la carpeta que alberga el archivo html

Enlace a un archivo en otra carpeta del mismo nivel

Enlace dentro del mismo directorio

Inclusión de objetos

Sonidos, vídeos...

Imágenes

De internet

Guardada en otra carpeta

Guardada en la misma carpeta

Formato de texto

Texto en calibri

Texto azul

Tamaño del texto

Letra cursiva

Letra negrita

Formato de documento

Tamaño de la letra

...

Salto de párrafo

Salto de línea

Estructura de las etiquetas

.......

Body

Es la parte que se visualiza

Head

Es la parte que no se visualiza

Empezar y terminar por...

Qué utilizar?

Text Edit

Bloc de notas

Tema 2: Gestors de continguts (CMS: Content Management Systems)

Para qué se usa?

Comercio electrónico, catálogo, revistas online...

Foros

Wikis

Webs

Weebly

Webnode

Módulo para blogs

Para sitios web

Blogs

Wordpress

Posibilidad de conversión en sitio web

Para blogs

Blogger

Sólo para blogs

Como crear un sitio web

Ver

Sitio web, blog... en un navegador web

Ejemplo: Google Chrome

Subir

Cliente FTP

Ejemplo: Filezilla

Crear

CMS

Ejemplo: Weebly

Editor de código (WYSIWYG)

Ejemplo: Adobe Dreamweaver

Código Fuente (HTML)

Documentación y comunicación audiovisual: Temas 2, 3 y 4