APUNTES DISEÑO WEB PARA PRINCIPIANTES
Enviado por Yeti833 • 14 de Junio de 2015 • 15.539 Palabras (63 Páginas) • 139 Visitas
DISEÑO WEB
Adobe Dreamweaver CS4
Curso: DWEB 002
SITIO WEB
ASPECTO GRAFICO: Es la razón por la que el navegante se queda.
Tiene en cuenta :
la consistencia (coherencia de la página)
El peso de la página
INFORMACION que tendrá mi sitio: Es la razón por la que el navegante entra al sitio
Pensar en ganchos pata atraer clientes a mi sitio web
ACTUALIZACION DEL SITIO: Es la razón por la cual el navegante vuelve a entrar a mi sitio
¿Cada cuánto tiempo modifico el aspecto gráfico de mi sitio? No menos de 3 meses, lo ideal es 1 vez al mes.
Todo esto se basa en esta pregunta: ¿A qué perfil de navegante estoy apuntando?
Tengo que tener en cuenta QUE QUIERE VER el navegante.
Tengo que saber MUY BIEN para quien diseño la página antes de hacerla.
EL PERFIL DEL NAVEGANTE ES:
INFORMATICO: capacidad de la pc
SOCIAL: clase social; edad, etc
VISTA ESTATICA:
Es como un ORGANIGRAMA de lo que sería mi sitio
Por ejemplo:
TITULARES
DEPORTES POLICIALES INTERNACIONALES ECONOMIA
FUTBOL BASQUET GOLF
Voy de lo general a lo particular.
Sobre la vista estática se puede colocar la vista dinámica (organizo como se van a vincular las páginas entre si)
Puede ser con un papel transparente adelante para ver cómo quedarían las flechas y como queda la vista estática.
IMPORTANTE: No usar caracteres especiales en nombres de páginas o archivos o carpetas (espacios, acentos, Ñ, etc)
Y los nombres deben ser o todos en mayúscula o todos en minúscula.
No es lo mismo nombre del archivo que título de la páginaa (ese sí puede tener caracteres especiales)
Todo sitio tiene que tener sí o sí una sola página que se llame index.htm o index.html
HOSTING: lugar donde se almacebna o guarda el sitio web.
Descargas: es lo que quiero que baje el navegante.
Hay que subir todo comprimido para que el navegante pueda descargarlo rapido.
Ejemplos de archivos comprimidos: RAR=ZIP=PDF=MP3
Fuentes: van todos los archivos originales que use para hacer la página web. Los JPG sin comprimir, wav, doc, wls, archivos.fla, png
Es la carpeta más importante porque tengo todos los archivos originales para hacer modificaciones a futuro. (es como un archivo de reserva)
Esta carpetaa no se sube al sitio web porque no se usa en la página web.
Las páginas web forman un sitio web.
Para crear un sitio debo ir a
Sitio.............Nuevo Sitio.............Avanzadas
Click en la carpeta a la derecha, creo la carpeta y la selecciona.
Hay que activar el caché siempre.
El panel de archivos funciona como un navegador del sitio.
F2 es para cambiar el nombre de un archivo.
Doble clik en la parte gris oscuro para achicar o agrandar un panel.
Selector o inspector de etiquetas, muestra las etiquetas: ejemplos
<body> <table>
El archivo html está compuesto de etiquetas:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Las etiquetas sonn como capas de cebolla.
LA PAGINA DEBE TENER TITULO SIEMPRE
En web se trabaja con colores RGB.
En diseño gráfico se trabaja con CMYK.
RGb tiene un código de colores. Se ve en propiedades de la página..........apariencia..........color
Evitar imágenes grandes de fondo.
Si no le coloco márgenes a la página es una grave error . Porque van a ser distintos los márgenes en cada navegador. Hay que poner márgenes 0 en los 4 márgenes.(en Propiedades de Página)
Vínculo de sustitución es cuando me poso sobre el vínculo. Vínculo visitado es elq ue ya vi.
Encabezado es como los libros (el primero es más grande y se va achicando hasta el 6)
Imagen de rastreo es como un borrador de la página web que aparece de fondo (obvio no se sube a la página web)
Cuando aparece un asterisco la lado de la pestaña es porque no guardé los cambios. (agregar dibujo)
Hay que tener una cuenta en gmail para poder subir el sitio web (el hosting no acepta otras cuentas para guardar el sitio)
Es conveniente colocar el pendrive antes de empezar a trabajar siempre que trabaje con dreamweaver.
1) Sitio..... Nuevo sitio (vista avanzada)
2) Le doy nombre a mi sitio
3) Carpeta raíz local click en carpeta derecha y voy al pendrive
4) Ahí creo la carpeta del sitio y la selecciono
Creo un archivo dentro del sitio.
Click derecho sobre la carpeta Sitio.....nuevo archivo
Le pongo index.html ( solo un index por sitio)
Ahora cambiamos las propiedades de la página ponemos márgenes 0
1) Click en index.html
2) Click en propiedades de la pággina
3) Apariencia CSS márgenes a 0 sino cada navegador me toma diferentes tipos de márgenes.
4) Elijo el color de fondo, de letra etc.
IMPORTANTE COLOCARLE TITULO (voy a Título/Codificación)
Después hago CTRL + S para guardar los cambios (debe desaparecer el asterisco al lado del título de la página)
BARRA DE INSPECTOR DE ETIQUETAS
Click en HTML (Propiedades HTML del texto)
<p> etiqueta párrafo (paragraph)
Formato...........encabezado; son los niveles de los títulos según su importancia
<h1> etiqueta del encabezado 1
<h2> etiqueta del encabezado 2
<h3> etiqueta del encabezado 3
h sgnifica head o cabeza
Click en CSS (Propiedades CSS del texto)
1) Selecciono el texto
2) Regla de destino.........Nuevo estilo en línea...........puedo modificar color y alineación del texto.
Alineación justificada es la mejor a elegir para diseño web.
Lo que selecciono en la vista de diseño aparece seleccionado en la vista de código.
Viñetas:
Codigo
<ul> usorted list contiene a los li (list item)
<li> </li>
<li> </li>
<li> </li>
Inicio final
Type= “ la comilla permite ver opciones.
Numeración:
<ol> ordened list
Para modificar cosas desde el código
1) Vista diseño. Selecciono el texto.
2) Voy a vista código, click derecho
...