03 HTML2

Escuela Complutense Latinoamericana
Escola Complutense Latinoamericana
Programación para Internet
Editores de HTML:
HomeSite
Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007
¿Qué es HomeSite?
HomeSite de Adobe (antes Macromedia, antes Allaire),

es mucho más que un editor para documentos HTML.
¿Qué es?
Un editor de archivos de texto de propósito general.
Adaptado para facilitar la edición de documentos HTML.
Adaptado para facilitar la edición de guiones.
Adaptado para facilitar el desarrollo de páginas web
estáticas y dinámicas.
No sólo incorpora un editor sensible a la sintaxis, sino también
numerosas herramientas incorporadas de ayuda al desarrollo:
Edición de páginas web en vista diseño, verificación de la corrección
del código, ayudas para el sitio web en conjunto, plantillas y
asistentes y mucho más.
Editores de HTML: HomeSite HTML: 2 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
¿Cómo es HomeSite 4.5?
El área de edición de HomeSite

Vistas: edición HTML, resultado y diseño
La ficha Edit
Herramientas
de edición
Editor sensible
a la sintaxis
Trabajo con múltiples documentos

Herramientas de navegación
La ficha Browse
Visualización
de la página web
resultante en el
navegador interno
También muestra las páginas web de la ayuda
La ficha Design Barras de herramientas
Crea el código
HTML de forma
automática.
Edición en modo
de vista previa

El panel de recursos de HomeSite
La ficha Files
Manipulación
de archivos.
Su utilidad y forma de uso
son bastante intuitivas
(estilo Windows).
Unidad
Carpetas
Archivos
Fichas de tipos de recursos
Tipos de etiquetas a mostrar

La ficha Tag Inspector
Muestra los elementos
HTML del documento
y sus anidamientos
(jerarquía de elementos).
Si está seleccionada
una marca en el editor
o el cursor está en una
de ellas, se muestran
los atributos y sus
valores asignados.

La ficha Help
Buscar Contenido Bookmarks
Resultado de Ver la ayuda en

la búsqueda un panel aparte
(no en el área de edición)
En el panel de recursos hay tres fichas más, cuya utilidad

se irá viendo a medida que resulten útiles.
Files Help Tag Inspector
Projects Site View Snippets

Manejo de Manejo de Manejo de
proyectos sitios web bloques de
código

Las barras de herramientas de HomeSite
Las barras de herramientas principales:
La barra de herramientas de acceso rápido (Quick Bar):
Primeros pasos con HomeSite
Inicio de HomeSite
Muestra automáticamente una nueva página con una plantilla que
contiene ya los principales elementos de un nuevo documento HTML.
Para crear un
nuevo documento
se usa el botón New.
Se pueden cambiar
todas las etiquetas
a mayúsculas con
Edit | Convert Tag Case

Propiedades del cuerpo del documento

Antes de nada conviene establecer las propiedades generales de la
página como tal y las que han de afectar por defecto al contenido.
1. Pulsa con el botón
derecho sobre
la marca <BODY>
y selecciona Edit Tag.
2. Establece las
propiedades generales
del cuerpo
del documento.
HomeSite escribe
código por nosotros.
Inserción de elementos
Para insertar un nuevo elemento se pueden usar los botones
correspondiente de la barra de herramientas de acceso rápido.
El propósito de cada botón se entiende fácilmente, no sólo por
su forma, sino también porque al pasar el puntero del ratón por
encima se muestra una pista de pantalla.

Inserción de elementos
Por ejemplo, podemos insertar un encabezamiento H1 pulsando el
botón correspondiente de la ficha Fonts de la barra de acceso rápido.
HomeSite inserta
automáticamente las
marca de inicio y de cierre
que corresponden y coloca
el cursor de texto en medio
de las marcas para que se
escriba su contenido.
Basta con escribir el texto
y ya tendremos un
encabezamiento en la página.
Visualización de la página
La ficha Browse permite
ver el resultado de lo que
hacemos en la ficha Edit.
Propiedades de los elementos

En el menú contextual de los
elementos, al que se accede
a través de su marca de inicio,
hay una opción Edit Tag que
permite establecer atributos
del elemento cómodamente.


HomeSite inserta el código correspondiente a nuestras elecciones.
Y el resultado se puede ver nuevamente en la ficha Browse.

Ajuste de las propiedades con la ficha Tag Inspector

La ficha Tag Inspector del panel de recursos muestra los atributos
establecidos para el elemento dentro de cuya marca se encuentra
el cursor de texto.
Y también permite
cambiarlos.
Inserción de párrafos normales

En la ficha Common de la barra de acceso rápido
se encuentra el botón para insertar un nuevo párrafo.
Tras escribir el texto del párrafo, se pueden seleccionar partes del
mismo y aplicar formatos con los botones de la ficha Fonts.
Si el texto se pierde por la derecha del área de edición,
se puede usar el botón Word wrap de la barra de
herramientas de la ficha Edit.
Los cambios de línea falsos se muestran en el margen
izquierdo de la ficha Edit.

Formatos de partes del texto

Para aplicar un formato con un elemento de frase se selecciona el
texto al que se quiere aplicar y se usa el botón correspondiente de la
barra de herramientas Fonts de la barra de acceso rápido.
Vínculos
Para crear un vínculo se selecciona el texto que se quiere
que esté hipervinculado y se pulsa el botón de ancla en la
barra de herramientas Common de la barra de acceso rápido.
Aparece un cuadro de diálogo que pide información:

Vínculos
El único atributo necesario es href, el destino del vínculo:
Imágenes
Para insertar una imagen se usa el botón de imagen de la
barra de herramientas Common de la barra de acceso rápido.
Aparece el siguiente cuadro de diálogo:

Imágenes
Líneas separadoras
Para colocar una línea (barra) de separación se usa el botón
correspondiente de la barra de acceso rápido Common.

Atributos de fuente
Se pueden establecer los atributos de fuente de un texto
seleccionado con el botón Font de la barra de acceso rápido
Fonts (para aumentar o disminuir el tamaño del texto hay
dos botones específicos: F+ y F-).

03 HTML2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

03 HTML2

Diunggah oleh

Hak Cipta:

Format Tersedia

Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

Universidade Federal de Santa Catarina

HomeSite de Adobe (antes Macromedia, antes Allaire),

Editores de HTML: HomeSite HTML: 2 - 1

Editores de HTML: HomeSite HTML: 2 - 2

El área de edición de HomeSite

Editores de HTML: HomeSite HTML: 2 - 3

También muestra las páginas web de la ayuda

Editores de HTML: HomeSite HTML: 2 - 4

El área de edición de HomeSite

La ficha Design Barras de herramientas

Editores de HTML: HomeSite HTML: 2 - 5

Fichas de tipos de recursos

Editores de HTML: HomeSite HTML: 2 - 6

El panel de recursos de HomeSite

Tipos de etiquetas a mostrar

Editores de HTML: HomeSite HTML: 2 - 7

Buscar Contenido Bookmarks

Resultado de Ver la ayuda en

Editores de HTML: HomeSite HTML: 2 - 8

El panel de recursos de HomeSite

En el panel de recursos hay tres fichas más, cuya utilidad

Files Help Tag Inspector

Projects Site View Snippets

Editores de HTML: HomeSite HTML: 2 - 9

Las barras de herramientas principales:

La barra de herramientas de acceso rápido (Quick Bar):

Editores de HTML: HomeSite HTML: 2 - 10

Primeros pasos con HomeSite

Editores de HTML: HomeSite HTML: 2 - 11

Propiedades del cuerpo del documento

Editores de HTML: HomeSite HTML: 2 - 12

Primeros pasos con HomeSite

Editores de HTML: HomeSite HTML: 2 - 13

Editores de HTML: HomeSite HTML: 2 - 14

Primeros pasos con HomeSite

Propiedades de los elementos

Editores de HTML: HomeSite HTML: 2 - 15

Propiedades de los elementos

Editores de HTML: HomeSite HTML: 2 - 16

Primeros pasos con HomeSite

Propiedades de los elementos

Y el resultado se puede ver nuevamente en la ficha Browse.

Editores de HTML: HomeSite HTML: 2 - 17

Ajuste de las propiedades con la ficha Tag Inspector

Editores de HTML: HomeSite HTML: 2 - 18

Primeros pasos con HomeSite

Inserción de párrafos normales

Editores de HTML: HomeSite HTML: 2 - 19

Formatos de partes del texto

Editores de HTML: HomeSite HTML: 2 - 20

Primeros pasos con HomeSite

Editores de HTML: HomeSite HTML: 2 - 21

Editores de HTML: HomeSite HTML: 2 - 22

Primeros pasos con HomeSite

Editores de HTML: HomeSite HTML: 2 - 23

Editores de HTML: HomeSite HTML: 2 - 24

Primeros pasos con HomeSite

Editores de HTML: HomeSite HTML: 2 - 25

Editores de HTML: HomeSite HTML: 2 - 26

Universidad Complutense de Madrid Universidade Federal de Santa Catarina