tierra de diseadores
Ingreso
tierra de diseadoresObjetivo del trabajo
2 parcial
hd3
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 diseadoresVamos por partes
2 parcial
hd3
Qu debers hacer para aprobar el segundo parcial?El segundo parcial se compone de 2 partes.1 Prctica: 50% de la nota2 terica: 50% de la nota
Para aprobar el segundo parcial debs tener al menos el 50% apro-bado 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
No se desesperen!!!
tierra de diseadoresPRACTICO
2 parcial
hd3
Aportar al diseo web de diseolandia
index.htm designers.htm anelocas.htmest listo,pero pods aportar
porfolio de todos losalumnos
ancdotas del grupo(redactar al menos 1)(fotografas o ilustra_ciones son bienvenidas)
propuesta.htm
links.htm
vas a tener que PENSARqu le faltara a esta pginapara ser interesante paraustedes/ estudiantes/ disea_dores...?
tierra de diseadoresPRACTICO
2 parcial
hd3
Organizacin de carpetas
index.htmest listo,pero pods aportar
Bienvenidos
designers.htm
anelocas.htm
propuesta.htm
links.htm
basarse en la esttica y estructuras de lapgina principal
basarse en la esttica y estructuras de lapgina principal
NO BASARSE NECESARIAMENTEEn la esttica y estructuras de lapgina principal
Ser simple pero creativo
index.htm:
index.htm
Carpeta designers
www.diseolandia.com.ar/designers
para disear esto todos se tendrnque poner de acuerdo y pasarse una imagen de perfil, junto consu nombre.
Esta ser TU propuesta
Slo traer el archivo de textocon imgenes.
Slo traer el archivo de textocon una justificacin.
www.diseolandia.com.ar/designers/acciarri/(index.htm)
diseo del minibookde acciarriPARTE SUPER IMPORTANTE
Debe contener un link haciawww.mauroacciarri.com.ar(esto va en el trabajo para el final)
carpeta acciarri
Diseo con tablas.
nombre de alumno c. link
foto
nombre de alumnofoto
nombre de alumnofoto
carpeta acciarri
propuesta.htm
tierra de diseadoresTEORICO
2 parcial
hd3
Qu debers hacer para aprobar el segundo parcial?Leer apuntes de claseCuadro de la hoja siguienteword adosado a la carpeta comprimida
tierra de diseadores
2 parcial
hd3
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 en1: Comprender Dreamweaver desde lo + generalhacia lo particular2: Desarrollar el trabajo practico en base a los archivos que se te han dado y comenzar a investigaren base a un ejemplo de diseno para MEJORARLO.Los archivos tienen errores.Ser critico.
tierra de diseadores
2 parcial
hd3
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 IMPORTANTEQUE RESPETES EL ORDEN de las carpetas y los nombres de los enlaces.
Crear un sitio desde 0
Denir el sitio
Mapa del sitio del sitio
Decirle a DW dnde van a estar todos nuestros textos, imgenes, animaciones y dems archivos
Una vez que el sitio ha sido denido, conviene hacertodos los cambios de los archivos desde dreamweaver.En sntesis: AGREG TODAS LAS CARPETAS Y ARCHIVOSDESDE DREAMWEAVER.Cuando muevas un archivo de carpeta, DW te pregunta-r si quers actualizar (update) la ubicacin en todoslos documentos abiertos.
Map Only: Te muestra la estructura jerrquicaMap &Files: Te muestra todos los archivos.
Tambin se le llama local route folder. Pods hacerlo desde Sites>manage sites> new sites
Nombre del sitio:Un nombre que a nosotros no sea til para identicarlo
Una vez que denimos el sitio podemos ver en la ventana de archivos cmo se crea la carpeta con todos los archivos que hay dentro
Carpeta raz // local root folderLa 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.
Por ms que podemos distinguir entre maysculas y minsculas SIEMPRE es preferible escribir todo en minsculas, sin ningn tipo de puntuacin
Archivos
Disearlo
Es ms cmodo y rpido editar los archivosdesde TU pc.
Avanzado
Crearlo desde 0:
Datos primarios
Bsico
Nombre:Qu pgina se abre primero? para guardar el archivo: index.html index.htm: Guardarlo en la carpeta localTitle:Ser descriptivo. EJ. Bienvenidos a MiSitio
Orden de Carpetas:El index puede ser utilizado ms de una vez en un sitio que tiene varias carpe-tas cuando el sitio es complejo y se va a otra rea.Ej en UES: Alumnos, Docentes, Gradua-dos, 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 mues-tra una previsualizacin de las imgenes u otros archivos.
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: la idea es que los buscadores INDEXEN tu sitiolos 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.
Seleccionar la fuente Ponemos imagen de fondo?
Cada vez que aprietes Enter te va a hacer un prrafo nuevo
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
El primer paso para hacer un link es seleccio-nar la palabra completa que va a ser el link (ser cuidadoso con la selec-cin)
Tanto para agregar arhivos desde Assets o desde Archi-vos podemos arrastrarlos.Tambin podemos agregarlos desde Insertar en el men, pero tens que localizar el archivo.
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.
Qu es el ALT?Es texto alternativo que se relaci-iona con la accesibilidad del sitio para personas con capacidades diferentes..
MA
NEJ
O D
E A
RCH
IVO
SPR
OPI
EDA
DES
GEN
ERA
LES
MET
ATAG
S
MANEJO DE TEXTOS Acordate
Qu pasa cuando el texto entra en conicto con la imagen?En ms opciones de propiedades, tens la opcin de ALIGN, suele usarse la opcin de Izq o Der.
A disear
Linksinternos (rel)
Linksexternos (abs)
Desde la barra de propiedades,. Buscar Link o vnculo: Pods escribirlo pero te conviene seleccionar la carpeta y enlazarlo desde la ventana archi-vos 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 archi-vos con el crculo
KEYWORDSDESCRIPTION
(propiedades)
Identidad Corporativa
Linksexternos (abs)
LinksdeMailOjo: este es el clsico mail to:-- que te abre outlook.
Identidad Corporativa
Identidad CorporativaEn Html se escribe
El primer paso para hacer un link es seleccio-nar la palabra completa que va a ser el link (ser cuidadoso con la selec-cin)
Color de Links
color original
este es el texto que vos seleccionas
direccin de mail
direccin de mail
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:
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 justicar 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.
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
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 estruc-tura 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 signica Hojas de Estilo en Cascada:
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.
MANEJO DE CSS: Porqu hojas en Cascada? Porque mientras ms especco 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 aplicarsea todo el sitio.,
CSS
Una Breve Introduccin Al CSS (la manera nueva)
Qu precauciones generales debo tomar al momento de elegir entre disear mi pgina con tags html o css?
La manera vieja: (formato dentro del cdigo html)
Sigue en el apunte
1
Trabajar con CSS en Dreamweaver Qu es CSS? 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 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.
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo
Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo
Federico Lbaque
importante!
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo
Federico Lbaque
en el trabajo de t porfolio disears tu propia hoja de estilos
1
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo
Federico Lbaque
tierra de diseadores
apunte de HD3 ..... Hojas de Estilo
Federico LbaqueEsto no es tan importante,pero lanlo para saberlo.El ao que viene lo vemos.
EstoEs muy imp
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
Federico Lbaque