Dreamweaver     

Sitio:es la capacidad que te da de gestionar empaquetando en un solo sitio todos los datos y enlaces que uardamos para hacer el trabajo.

Nueva practica:

1. Crear sitio : ubicación avanzadas -> local / red

                                                                  carpeta img
                                                   subir a Drive en servidores

Documento HTML - color de fondo

                             propiedades de la página

                                  margenes 0 - 0

vinculo - destino blank

1. 
   
2. Prepara i recojer materiales
3. Crear pàgina web
4. Propiedades pàgina
5. Crear tabla

Imagenes para web

a) 4px negros y 30T(transparentes)
b) 1px negro , 1t , 1px negro, 2t , 2 n2gros y 28T ( transparentes

. Pesa menos si los pixeles pintados son seguidos Ejemplo (a)
 Si el pixel es uno negro otro transparente, la imagen pesara mas para web.
. Guardar las imagenes de web siempre en png
  Al guardar las imagenes editadas en photoshop si la guardas con programa web, pesara menos ej:PNG

GIF- variar la paleta de colores para que no canvie el color de la imagen i obtener distintas variedades i no perder la calidad de la imagen. Con 8 colores ya esta bien 
Si no seria mucha mas cantidad i ocuparía y taparía torosos de la imagen

. Para poder insertar una imagen sobre otra en Dreamweaver no deja.
 Tendrás que poner primero la imagen que va por delante  y detrás la otra
 o aplicar de fondo la segunda imagen y después enganchar encima.

Ejemplo:

Mapa

GIF para una imagen fotográfica no vale

 Imagenes para web 

1.editando en photoshop

Animación - Imagen en transparente en "Capas"
ej : zona de color y otra imagen en transparente - tiempo 0'5segundos

Guardar para web y dispositivos, en formato "Gif" de 8 colores ( mirar el peso del archivo)
 

2. Dreamweaver

Opción de códigos al enganchar una imagen.
Altura de cuadro de imagen ej: 313 mm

1- Seleccionar la celda y:
ej: celda <td  width"675" height ="313" background"

colocar background con la imagen gris primero, después mirar el alto de la celda y arrastrar la animacion hecha en photoshop encima.

Guardar las imagenes bien en el mismo sitio todo lo que contiene el documento.
También se puede arrastrar la imagen desde archivos y engancharla encima de donde le toque a cada región

. La página que estamos haciendo  es a lo rollo de papel  pero se sigue llevando, aunque tambien ahora estan las enlazadas generando una cadena de enlaces, una página que cuando entras y quieres saber informacion de algo haces clic, por ejemplo en musica y entonces te habre la sección de música y alfinal de la página seguramente pondra para volver a inicio para que puedas volver a escojer la información que desees.



  

Enlaces vinculados

 

Mas actual y uno de los mas recomendados ->
  y se utiliza según su necesidad
Click en uno y te abre el siguientes y asi susesivamente, cada una de las paginas están enlazada.

  

Como hacer una Página vinculada en Dreamweaver

1. Nuevo sitio en HTML  m2m8uf303
2. Generar nueva carpeta de imágenes  -  nuevo sitio.
3. Configurar la estructura de la tabla   -  insertar -> 4 columnas y 6 filas - ancho 800 pixeles

Alinear tabla en el centro - HTML align: center (centrar tabla)
Guardar como inicio.html 
- Referencia/ colocar  etiqueta

  Enlazar en la etiqueta

 Illustrator (BOTÓN)

 Documento nuevo : 800 px x 60 

 para web - RGB

. Guias y cuadrículas - pixeles 72ppp

Y   

.Hacer un cuadrado a : 

    ancho - 200  -  altura 50

. Fondo   -  color cualquiera

. Alinear : Mover objeto clave

. Degradado : con una inclinación de 90º

. Guardar como - png 24 para web y ai (illustrator)

Acabar y siguiente paso :

.PHOTOSHOP

. Mostrar reglas / guias inteligentes 

   marcar cada cuadro con las guias 200 / 400 / 600

. Seleccionar el botón activo ( herramienta barita mágica)

. Hacer cada cuadro en capas diferentes
botón activo y de sustitución

 En dreamweaver creamos una pagina llamada inicio, y creamos una tabla con sus correspondientes medidas, columnas y filas. 

Para insertar el botón que tenga efecto al pulsarle encima, hay que ir a : insertar : objetos de imagen ->Imagen de sustitución.

Hay cojes y eliges la imagen original, y la de sustitución para que cuando pases por encima, tambien puedes indicarle la URL hacia donde quieres que vaya.(vincularlo)

Y este proceso se hace todas las veces necesarias para que completes tu botonera.

Después de acabar de hacer la botonera, el texto que vaya sobre cada boton tendra que estar vinculado con su tema determinado, para vincular el tema necesitaremos crear un html por cada sector ejemplo: inicio, música, cine, series, etc.. 

Aremos un html para cada sector y pondremos la informacion extendida sobre cada tema

DREAMWEAVER

 Frames = Marcos

Para empezar pincharemos en “Archivo/nuevo”.

Se nos abrirá una ventana en la que elegiremos “Conjunto de marcos” y para este ejemplo elegiremos “Superior fijo, izquierdo anidado” y le daremos a crear.
Y obtendremos como resultado lo siguiente:

 

 En la parte derecha de la ventana de Dreamweaver veremos el panel de Marcos (si no lo viera basta con pinchar en “Ventana/Marcos” y aparecerá).

Teniendo elegido el marco seleccionándolo (si no basta con pinchar con el ratón en la parte que sea más externa,  para que así quede seleccionado el conjunto de marcos), tendremos bajo la vista de la página : ventana de propiedades

En la que podremos elegir si el marco “topframe” tenga borde, de que anchura y de que color, así como la medida que más se ajuste a nuestro gusto.
Del mismo modo, si en el panel de marcos seleccionáramos con el ratón en el rectángulo que conforman el “leftframe” y el “mainframe”.

En donde igualmente nos dará la posibilidad de poner borde, su anchura y color, y el espacio que queramos que ocupe el “leftframe”.
Por ejemplo, bordes en ambos casos con un ancho de 10 y un color azulado. Y dando valor a fila de 125 pixeles, y a la columna de 200 pixeles.

Para guardar , deberemos guardar lo que es el “conjunto de marcos” así como cada uno de los marcos que hayamos puesto, en este caso, el conjunto de marcos lo llamaremos index.html y a los marcos respectivamente titulo.html , menú.html , pagina1.html
Para ello, lo mejor  para estar seguros que lo guardamos correctamente es que teniendo en el panel de marcos elegido el conjunto de todos luego elijamos la opción “guardar conjunto de marcos como” y le pondremos index.html

Y luego eligiendo cada uno de los marcos elegimos “guardar marco como” (acción que se hará con cada uno de los marcos para así estar seguros de que marco guardamos y con que nombre). A cada cual el que le corresponda: titulo.html , menú.html y pagina1.html

Una vez que lo hayamos guardado la primera vez, para el resto de ocasiones que trabajemos con la página bastará con elegir “guardar todo” y guardara las 4 a la vez.
Otro punto a tener en cuenta es el de los enlaces, si queremos que un enlace que este en el marco “leftFrame” al ser pinchado salga en el marco “mainFrame” habrá que una vez seleccionada la palabra u objeto que queremos vincular y luego en “Vínculo” poner la dirección correspondiente y en “Dest” elegir la opción mainframe
Para realizar las páginas que vayan saliendo en el mainframe, basta con hacerlo desde una página básica en html, ya que al pinchar en el enlace hará que se habrán directamente en el mainframe.

 

 Ejercicios de clase

Marcos y vinculaciones con sus respectivas paginas: arts gràfiques , INS Esteve Terradas, Xtec 

m2m8uf304

Correccion de documentos, vincular otra vez

google drive - web_lipantoja ( compartida con pballester, jmora.. ) 

(aqui van las practicas que hay de entregar)

materiales : dvd, paller -   privilegios

•  Carpeta nueva - m2m8uf304
•  Crear sitio en CS4 (marcos)
•  Restablecer vínculos 

            imágenes - buscar y canviar ( buscar y remplazar : sitio local actual completo , código fuente

            objetivo - frames 

Links del menú, en su marco target (destino)

. vincular los links en mainframe ( para que al abrir no se abra en una venana aparte, si no en el mismo sitio)

 

m2m8uf305

CSS

En classe hicimos un css para web y lo imprimimos

crear nuevo CSS

Al entrar al Dreamweaver saldra una ventana donde pondrá los diferentes archivos que puedes hacer en este programa, html, css,...

Eliges css y siguiente paso es:

que en el css que creas tienes que hacer una clase ejemplo para aplicarlo al titulo de la página:

ponemos  que h1 tiene una clase

<h1 class="turquesa" id="titulonoticia">MICKEY MOUSE </h1>

.turquesa {

       color: #fff0

}

  
todo estos estilos son los que aplicamos a la página para que alfinal nos llegara a dar este resultado:

  

m2m8uf306

Utilizamos la etiqueta span para crear el menu de arriba, que nos redireccionara hasta el apartado que tiene.

La etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.

ej: 

Y para el apartado hicimos un div:

A cada elemento del div le ponemos si tiene alguna clase, y en el css le ponemos las preferencias que queremos para cada id y para cada clase.

m2m8uf307

Este ejercicio es de la pagina web de apple.com 

Loque vamos a hacer se divide en tres partes básicas

Pero lo primero que aremos es:

-crear sitio nuevo

-crear html : crear divs, agregar el texto, aplicar extructura

-crear css

-vincular html y css

#botonera.css

#contenido.css 

#pie.css

 hay que hacer estos tres css y el reset.

Despues de crear los css, tenemos que vincularlos todos en uno solo documento, donde los veremos individualmente para poderlos editar sin tener que abrir uno por uno.

Botonera. css

1. sitio nuevo

2. Botones 

#botonera{

      background-color: #FFO;

      width : 944px;

      paddding: 0px;

      margin - right: auto;

      margin - left:auto

}

#botonera ul 

#botonera ul li

#botonera ul li a

#botonera ul li a: link

#botonera ul li a: active

#botonera ul li a: visited

#botonera ul #cerca

# botonera ul #cerca a:link, #botoneraul#cerca a: hover, #botonera ul#cerca a:active, #botoneraul #cerca a: visited{.....

resultado final este! (colocando imagenes recortadas para hacer el boton, enlaces..) y esto es solo una parte.

poco a poco iremos creando una pagina identica a apple con el programa dreamweaver

Contenido. css

se divide en dos partes 

una de ellas (la mas grande) lleva imagenes y texto enlazado..

La otra parte es para la busqueda de las cosas que desees ver

pie. css

m2m8uf308

En esta practica practicaremos como hacer tu mismo el popio diseño de tu blogger desde html. Primero hacemos un pensa de como queremos nuestro blogger  y cojemos la idea y lo plasmamos en photoshop, mirando las medidas que queremos y colocando reglas para situarnos.

Ponemos la imagen de fondo en el Dreamweaver para poder guiarnos al hacer el blog.

Creamos un CSS para el blog, además también ponemos el CSS del reset, y ahora tenemos que crear la estructura donde pondremos las entradas, pie, cabecera... y hacemos un blogger de prueba en nuestro blog habitual para prácticar 

las entradas contienen:

  div blog : es el que contiene todo el material de la práctica.
  div cabecera:  contiene el titulo o imagen que desees poner, para que vean que ese blogger es tuyo, sobretodo el nombre y apellido.
  div contingut: que es donde esta el contenido

  div menu: donde va un cuadro pequeño que esta situado a la dercha, donde va el titulo de cada entrada.

Es cuestión de ir encajando cada div para que queden de forma adecuada, utilizando margin, paddin, y float.

Cuando ya tengo todo como quiero, para pasarlo a -> Blogger

• Creamos un nuevo blog de pruebas.
• Plantilla > Editar código HTML de la plantilla.
• Borramos todo lo que contenga.
• Abrimos un TextEdit, entonces  tenemos que juntar la plantilla de blogger y la de dreamweaver.
• Después de <div id="contingut"> le colocamos <Blogger> 
• Y cuando acaba la entrada ( después del pie ) colocamos </Blogger>
• Dentro de <div class="titulo"> <BlogItemUrl><a href="<$BlogItemUrlgt;" title="external link"></BlogItemUrl><$BlogItemTitlegt; <BlogItemUrl></a></BlogItemUrl> </div>
• A continuación <div class="contenido"><p><$BlogItemBody$> </p></div>.