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:
- Crear sitio : ubicación avanzadas -> local / red
carpeta img
subir a Drive en servidores
subir a Drive en servidores
Documento HTML - color de fondo
propiedades de la página
margenes 0 - 0
vinculo - destino blank
- Prepara i recojer materiales
- Crear pàgina web
- Propiedades pàgina
- 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
- Nuevo sitio en HTML m2m8uf303
- Generar nueva carpeta de imágenes - nuevo sitio.
- 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
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:
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.
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
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 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
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>.
No hay comentarios:
Publicar un comentario