tierra de diseadores

Ingreso

Objetivo del trabajo

Disear un sitio en el que puedan entrar todos los alumnos de la

Carrera de Diseo Grfico de la Ues para conocerse un poco mejor.
Un sitiio para estudiantes de diseo, en el cual estarn presentes
todos los estudiantes de nuestra ctedra,

tierra de diseadores

parcial

2
hd3

tierra de diseadores

Vamos por partes

Qu debers hacer para aprobar el segundo parcial?
El segundo parcial se compone de 2 partes.
1 Prctica: 50% de la nota
2 terica: 50% de la nota

No se desesperen!!!

Para aprobar el segundo parcial debs tener al menos el 50% aprobado de cada fase.
Porqu terico?
Porque Dreamweaver es un programa muy complejo que nos llevar
tiempo comprender, ya que los diseadores grficos no estamos
acostumbrados a lidear con cdigos y programacin.
Por ello, la idea en esta instancia es que vayamos adentrndonos en
el mundo web como anticipo de HD4, materia en la que seguiremos
aprendiendo sobre esta rea del diseo grfico.
Qu debo saber de teora?
Todo lo que habrs practicado en el programa para hacer la parte
prctica

parcial

2
hd3

tierra de diseadores

PRACTICO
Aportar al diseo web de diseolandia
index.htm
est listo,
pero pods
aportar

designers.htm anelocas.htm
porfolio de todos los ancdotas del grupo
alumnos
(redactar al menos 1)
(fotografas o ilustra_
ciones son bienvenidas)

propuesta.htm
vas a tener que PENSAR
qu le faltara a esta pgina
para ser interesante para
ustedes/ estudiantes/ disea_
dores...?

links.htm

parcial

2
hd3

tierra de diseadores

PRACTICO
Organizacin de carpetas
Bienvenidos

index.htm
est listo,
pero pods
aportar

designers.htm
anelocas.htm
propuesta.htm

Carpeta designers

index.htm: Diseo con tablas.

foto

nombre de alumno c.
link

foto

nombre de alumno

foto

nombre de alumno

carpeta acciarri
index.htm

www.diseolandia.com.ar/
designers/acciarri/(index.htm)

www.diseolandia.com.ar/designers

diseo del minibook

de acciarri
PARTE SUPER IMPORTANTE

para disear esto todos se tendrn

que poner de acuerdo y pasarse
una imagen de perfil, junto con
su nombre.

Debe contener un link hacia

www.mauroacciarri.com.ar
(esto va en el trabajo para el final)

Slo traer el archivo de texto

con imgenes.

links.htm
basarse en la esttica
y estructuras de la
pgina principal

carpeta acciarri

propuesta.htm
Esta ser TU propuesta
Slo traer el archivo de texto
con una justificacin.

basarse en la esttica
y estructuras de la
pgina principal

NO BASARSE
NECESARIAMENTE
En la esttica
y estructuras de la
pgina principal
Ser simple pero creativo

parcial

2
hd3

TEORICO
Qu debers hacer para aprobar el segundo parcial?
Leer apuntes de clase
Cuadro de la hoja siguiente
word adosado a la carpeta comprimida

tierra de diseadores

parcial

2
hd3

tierra de diseadores
En el final debers traer TU pgina web, registrada y subida a un
hosting gratuito o a un hosting pago.

La clave de este desafio esta en

1: Comprender Dreamweaver desde lo + general
hacia lo particular
2: Desarrollar el trabajo practico en base a los
archivos que se te han dado y comenzar a investigar
en base a un ejemplo de diseno para MEJORARLO.
Los archivos tienen errores.Ser critico.

parcial

2
hd3

tierra de diseadores
Se entrega:
archivo original (index.htm)
archivos nuevos (designers .htm, propuesta.htm)
En la carpeta de designers deben estar los links de
los apellidos de todos los alumnos hacia la carpeta del
alumno con su index.
archivos de word de aneclocas (con fotos) y de links
La carpeta con tu portfolio contendra los archivos css
que caracterizarn a tu pgina.
Para tu tranquilidad:
En el parcial escrito pods traer hasta 4 hojas Oficio de
resmen .
No pods traer resmenes fotocopiados
Los resmenes llevan nombre y apellido de su autor.
ES MUY IMPORTANTE
QUE RESPETES EL ORDEN de las carpetas y los nombres de los
enlaces.

parcial

2
hd3

Crear un sitio desde 0

Decirle a DW dnde van a estar todos nuestros textos, imgenes, animaciones y dems archivos
Tambin se le llama local route folder. Pods hacerlo desde Sites>manage sites> new sites

Definir el sitio

Avanzado

Bsico

Nombre del sitio:

Un nombre que a nosotros no sea til para
identificarlo
Carpeta raz // local root folder
La ubicacin donde estarn todos los
archivos de nuestro sitio. (para
seleccionarlo hay que abrirlo)
Dejarlo activado
Conviene tener una carpeta seleccionada
donde vas guardando todas las imgenes.
Si tens un sitio escogido, conviene escribir
el nombre completo.

Archivos

Por ms que podemos distinguir entre

maysculas y minsculas SIEMPRE es
preferible escribir todo en minsculas, sin
ningn tipo de puntuacin
Una vez que definimos el sitio podemos ver
en la ventana de archivos cmo se crea la
carpeta con todos los archivos que hay
dentro

Mapa del sitio del sitio

Una vez que el sitio ha sido definido, conviene hacer

todos los cambios de los archivos desde dreamweaver.
En sntesis: AGREG TODAS LAS CARPETAS Y ARCHIVOS
DESDE DREAMWEAVER.
Cuando muevas un archivo de carpeta, DW te preguntar si quers actualizar (update) la ubicacin en todos
los documentos abiertos.

Es ms cmodo y rpido editar los archivos

desde TU pc.

Map Only: Te muestra la estructura jerrquica

Map &Files: Te muestra todos los archivos.

Disearlo

MANEJO DE ARCHIVOS

Crearlo desde 0:
Nombre:
Qu pgina se abre
primero?
para guardar el archivo:
index.html index.htm:
Guardarlo en la carpeta
local
Title:
Ser descriptivo. EJ.
Bienvenidos a MiSitio

Orden de Carpetas:
El index puede ser utilizado ms de una
vez en un sitio que tiene varias carpetas cuando el sitio es complejo y se va a
otra rea.
Ej en UES: Alumnos, Docentes, Graduados, Empresas.
A estas carpetas es conveniente
crearlas desde la ventana de archivos

Ventana de Assets o Activos

(pestaa al lado de archivos)
Escanea todo tu sitio cuando
abrs dreamweaver y vas a poder
ver todos los archivos de
diferentes medios que estn en
tu sitio (divididos por categora).
La ventaja de assets es que a
diferencia de archivos te muestra una previsualizacin de las
imgenes u otros archivos.

Vnculos Relativos: dentro de

nuestro sitio.
Slo llevan la direccin de dentro
de la carpeta.
Vnculos Absolutos:
Estn fuera de nuesto sitio. Ej:
http://www.sljlskj.com/archivo.jpg
.

Tanto para agregar arhivos desde Assets o desde Archivos podemos arrastrarlos.
Tambin podemos agregarlos desde Insertar en el men,
pero tens que localizar el archivo.

Qu es el ALT?
Es texto alternativo que se relaciiona con la accesibilidad del sitio
para personas con capacidades
diferentes..

Seleccionar la fuente

Ponemos imagen de
fondo?

Uso del Color :

Si bien hay 256 colores
indexados hoy en da te
conviene seleccionar el
espectro y elegir el color
que vos quieras.

METATAGS

PROPIEDADES GENERALES

Datos primarios
METATAGS: la idea es que los buscadores INDEXEN tu sitio
los robots o las araas de buscadores (como google) andan por la web buscando
informacin de los sitios que muestran en los resultados de bsqueda. Los metatags le
informan a estos programas cmo categorizar tu sitio y qu informacin contiene.
Son lneas de info qus slo aparecen en el cdigo html.
Keywords: Lo primero es insertar palabras clave: se escriben separadas por (,) comas.
Generalmente no poner ms de 10 palabras clave.,porque sino te pasan de largo.
Description:
Una buena descripcin es imprescindible. Escribir algo corto pero importante sobre tu
sitio. Si no lo agregs, el buscador inserta las primeras lneas del texto del index.

DESCRIPTION

KEYWORDS

A disear
MANEJO DE TEXTOS

Acordate

La manera vieja: (formato dentro del cdigo html)

Cada vez que aprietes

Enter te va a hacer un
prrafo nuevo <p>

Introducir textos en Dreamweaver es tan sencillo como usar un procesador de textos.

Tipe. seleccinelos con el Mouse de la manera habitual y ajuste sus propiedades a
travs de la Barra de Propiedades. Las propiedades que pueden ajustarse son las
habituales:

Para que esto no suceda

tens que apretar
shift+enter.

Alineacin: Viene por

omisin al centro (en
vertical y a la izquierda
en horizontal).
Para cambiarla ir a
propiedades

Fuente: Recuerde las limitaciones de fuentes estudiadas. Nunca ser conveniente

utilizar fuentes que no sean las estndar Arial, Times New Roman, Verdana. Una
trampita para insertar texto no estandar es insertar un swf.....................................................
Estilo de Fuente: Aqu Dreamweaver presenta las tpicas opciones de Negrita, Cursiva
y Subrayado.
Alineacin: De nuevo Dreamweaver presenta los habituales iconos para alinear a la
izquierda, centro, derecha y justificar el texto.
Color de Fuente: Dreamweaver presenta un icono para seleccionar el color de la
fuente. Al hacer Clic en l desplegar los denominados Colores Web son aquellos
colores estndar que con seguridad se vern iguales en cualquier computadora con
cualquier sistema operativo. Tambin se cuenta con un icono que amplia la paleta,
aunque no se recomienda utilizar esos colores puesto que nada garantiza que se vean
iguales en diferentes sistemas.

Qu pasa cuando el texto entra en conflicto con la imagen?

En ms opciones de propiedades, tens la opcin de ALIGN, suele usarse la
opcin de Izq o Der.

Tamao de Fuente: La escala de tamaos que presenta Dreamweaver es un tanto

extraa, puesto que incluye valores negativos. Estos valores, representan los tamaos
intermedios. Estos son tamaos de fuente relativos segn el tamao que tenga el
navegador del usuario seteado

Una Breve Introduccin Al CSS (la manera nueva)

La idea de CSS en resumidas cuentas es hacer el cdigo HTML ms sencillo, pudiendo
guardar por un lado los atributos de contenido de una pgina y por el otro la estructura en un archivo CSS. Es muy similar a lo que hemos visto en InDesign a principio de
ao con los Estilos de Texto y de Prrafo.
CSS significa Hojas de Estilo en Cascada:

Linksinternos (rel)

El primer paso para

hacer un link es seleccionar la palabra completa
que va a ser el link (ser
cuidadoso con la seleccin)

(propiedades)

Desde la barra de
propiedades,. Buscar
Link o vnculo:
Pods escribirlo pero te
conviene seleccionar la
carpeta y enlazarlo
desde la ventana archivos con el crculo

Desde la barra de
propiedades,. Buscar
Link o vnculo:
Pods escribirlo pero te
conviene seleccionar la
carpeta y enlazarlo
desde la ventana archivos con el crculo

En Html se escribe
<a href="/identidad.htm">Identidad Corporativa</a>

Qu precauciones generales debo tomar al momento de

elegir entre disear mi pgina con tags html o css?
Entrar en EDICIN>
preferencias> General >
tildar la opcin de css (o no).
Es importante escoger esta
opcin al momento de
comenzar a disear la
pgina.

Linksexternos (abs)

<a href="http://www.labaque.com/identidad.htm">Identidad Corporativa</a>

Linksexternos (abs)

<a href="http://www.labaque.com/identidad.htm">Identidad Corporativa</a>

LinksdeMail

Ojo: este es el clsico

mail to:-- que te
abre outlook.

este es el texto que vos selecciona

direccin de mail
direccin de mail

Color de Links
El primer paso para
hacer un link es seleccionar la palabra completa
que va a ser el link (ser
cuidadoso con la seleccin)

CSS

Sigue en el apunte

color original

MANEJO DE CSS: Porqu hojas en Cascada? Porque mientras ms especfico es el estilo prevalece esa regla sobre el estilo general.
La hoja de estilo puede ser INTERNA o EXTERNA a la pgina en s. Si es interna slo se aplica en la pgina y si es externa puede aplicarse
a todo el sitio.,

Federico Lbaque
tierra de diseadores

Trabajar con CSS en Dreamweaver

Qu es CSS?

apunte de HD3 ..... Hojas de Estilo

Las Cascade Style Sheet (hojas de estilo en cascada) son un estndar diseado para
separar la presentacin visual del contenido, del contenido en s mismo.
La mayor ventaja de usar CSS es el cmo y dnde se denen las reglas. En lugar de
controlar la apariencia del texto (por ejemplo) al nivel del bloque, una regla sencilla puede
escribirse en una pgina aparte y aplicarse a todas las pginas de un sitio. Cuando quiere
cambiar la informacin de una regla, slo se necesita editar una cosa. Esto ahorra una
gran cantidad de tiempo. Tambin signica que las pginas tienden a tener un estilo ms
consistente, porque todas las pginas comparten las mismas reglas.
Cmo se conjugan HTML y CSS
Como se dijo al principio de este apunte, las pginas Web se crean en un lenguaje
denominado HTML. Aunque no nos demos cuenta, a medida que vamos desarrollando
nuestra pgina con Dreamweaver, el cdigo HTML se va generando automticamente. Lo
que CSS hace es permitirnos utilizar HTML para describir el tipo de contenido (si se trata
de un prrafo, de una tabla, de una imagen, etc.) y desarrollar el contenido en s mismo;
mientas tanto CSS especica cmo se deben mostrar los contenidos (alineado, color,
tamao, fuente, etc.) estableciendo las reglas en un archivo aparte (un archivo con
extensin .css).
En HTML los tipos de contenidos se especican a travs de etiquetas. Luego CSS describe
mediante reglas cmo debe mostrarse cada etiqueta HTML. CSS puede redenir una
etiqueta HTML para que se vea diferente a como normalmente se vera, e inclusive puede
hacer que una misma etiqueta se vea diferente segn su contexto. Por ejemplo, podemos
denir una regla CSS que diga que los vnculos sean rojos si se encuentran dentro de un
prrafo, pero sean azules si se encuentran dentro de una tabla. A este tipo de estilo CSS se
le denomina estilo contextual.
Lo que sigue es un resumen de las etiquetas HTML ms utilizadas:
Etiqueta/s HTML

Signicado

<img>
<head><body>

Imagen.
Encabezado y cuerpo de la pgina
respectivamente.
Ttulo de la pgina que aparecer en la
barra de ttulo del navegador Web.
Prrafo
Lista ordenada, lista con vietas
respectivamente.
Tabla, encabezado de tabla, la de tabla,
celda de tabla respectivamente.

<title>
<p>
<ol><ul>
<table><th><tr><td>

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

importante!

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

en el trabajo de t porfolio disears tu propia hoja de estilos

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

Federico Lbaque
Esto no es tan importante,
pero lanlo para saberlo.
El ao que viene lo vemos.

tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

EstoEs muy imp

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo

Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo