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
- Uno
- Dos
- 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
...
Línea horizontal
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
