El post que buscas se encuentra eliminado, pero este también te puede interesar

Curso de Dreamweaver. [Diseño web] I

Curso de Dreamweaver. [Diseño web] I

Buenos días a todos!! (O buenas tardes, o buenas noches... según cuando leas esto . ).

Algo que me interesa a mi, y creo que a muchos usuarios de Taringa! es el Diseño Web. Este puede realizarse con diferentes programas (Como en este caso, el Dreamweaver. ). Es muy emocionante hacer una web, terminarla, subirla y ver tu trabajo terminado... ponerse a pensar "Cientas de personas pasarán por esta web, y les guste o no les guste su diseño, al menos verán de lo que soy capaz".

Quiero decir que yo antes tenia un rango mayor, la verdad me pelié en un post con un usuario, lo insulté de muy mala manera, por lo que me correspondio un baneo (Creo que fué algo exagerado darme 7 días por 3 o 4 malas palabras... pero bueno, com ya diria alguno, "Pasado pisado". ). De todas formas, si lees este post, te pido perdon por insultarte .


cursos

CURSO GRATIS DE DREAMWEAVER.

El curso gratis de Macromedia Dreamweaver es recomendable para los que ya han estudiado operador en pc y diseño web con FrontPage. En el curso gratis de Dreamweaver se estudiara lo necesario para que se inicie en ente programa. Este curso se actualizará con mas información y material regularmente

Sugerencia para el estudio:

Se recomienda que practique varias veces cada lección. Los alumnos que mas estudian generalmente superan a los de capacidades innatas que se confían y no estudian.

dreamweaver

1.INTRODUCCIÓN, EL PRINCIPIO.

Este programa pertenece a la empresa Macromedia al igual que el Flash. Ambos poseen un entorno de usuario semejante, una hoja central en la cual se diseña y no pocas barras de herramientas que se activarán según sea necesario. Es uno de los programas mas utilizados junto con FrontPage para diseñar paginas web.

Al abrir dreamweaver por primera vez observará lo siguiente:

Una hoja en blanco y barras de herramientas con botones.

Acomode las barras de herramientas de forma que le sean mas cómodas. Las barras de herramientas se activan y desactivan desde la barra de menú, Ventana.

Vamos a ir viendo todo el programa, diseñando una web.

Preliminares:

Con el explorador de Windows realice una carpeta en donde se guardará el sitio. Podrá hacer esta carpeta por ejemplo en mis documentos y llamarla si lo desea misitio. En realidad acá abría que poner el nombre del dominio o carpeta en donde va alojada la web, por ejemplo en mi pagina sería estudiargratis. Dentro de esta carpeta haga otra que se llame imágenes esto es para que a medida que crezca su página no se le haga un caos de archivos.

Ahora en Dreamweaver: Barra de menú Sitio, sitio nuevo, en “carpeta raíz local” seleccione la carpeta que ha realizado para esto puede presionar en el icono con el dibujo de carpeta. Luego pulse en aceptar.
Diseño Web

Se abrirá otra ventana que es un explorador del sitio que hoy comienza a realizar.
aprender

Por ahora minimice esta ventana. Mas Adelante veremos que es utilizada como un explorador y como un programa para subir al servidor un Sitio FTP.

gratis

2. TRABAJAR CON TEXTOS PARTE 1.

En una pagina Web seguramente a esta altura conocerá que lo fundamental y mas importante en la mayoría es el texto.

Los motivos principales de esto son dos

1) Los moteres de búsqueda principales por medio de los cuales ingresaran a su Web lo que hacen es analizar principalmente el texto que contienen y otros factores para rastrear una Web ante una búsqueda que realice un usuario. Si la Web que uno realiza no posee el suficiente texto (y optimizado) dicho rastreo será pobre.

2) En los inicios Internet lo que ofrecía era información, si bien hoy en día hay mucho material tal como imágenes archivos de sonido, videos, programas, etc. para llegar a los mismos se utilizan (es lo recomendable) link´s en texto o con texto y imágenes. Además hay que poner títulos, descripciones, comentarios, etc. todo esto va en texto. Si sabe manejarlo correctamente le irá bien a sus paginas Web sin descuidar la estetica.

¿Como manejamos en Dreamweaver los textos?

Veamos un poco esto. Para ingresar un texto en una hoja en blanco simplemente se hace un clik y se escribe teniendo en cuenta de además de escribir bien de que halla una densidad de palabras clave razonable.

Curso de Dreamweaver. [Diseño web] I

En esta captura de imagen se observa una hoja en blanco con texto, en la parte de abajo hay un panel propiedades que por estar escribiendo serán las propiedades de texto las que mostrará. Si hace un clik en una imagen mostrará las correspondientes. Para modificar un texto se lo selecciona (queda como remarcado con color negro) y se selecciona lo que se desea de la barra de propiedades.

A continuación se ve la barra de propiedades de texto en Dreamweaver (MX 2004 en otras versiones será similar)

cursos

Formato: Es el titulo de texto por ejemplo para escribir un párrafo irá párrafo para un titulo "Encabezado 1" por ejemplo, es muy importante que utilice Encabezado 1 en los titulos, porque las palabras que ahí aparecen son valoradas por los buscadores.

Fuente: Es el tipo de letra, para agregar una fuente, por ejemplo Arial hay que ir a "Editar lista de fuente" saldrá una ventanita de facil uso de la cual selecciona las fuentes que desee, es decir los tipos de letra. Suele ser útil decorar una pagina Web con dos o tres tipos de fuentes distintas, esto, desde el punto de vista de diseño,
estética

dreamweaver.

Diseño Web

3.TRABAJAR CON TEXTOS PARTE 2.

Continuando viendo la barra de herramientas de texto de Dreamweaver se encuentra estilo. En un Sitio si queremos mantener un tipo de títulos específicos o párrafos se utilizarán los estilos

Al variar el formato de un texto se crea un estilo, si luego a un texto seleccionado se le aplica el mismo estilo, este debería quedar igual que el anterior.

aprender

Tam: es obviamente Tamaño, se puede seleccionar una opción del menú desplegable o directamente ingresar un numero para darle a una letra o texto un tamaño determinado

B: Es para poner un texto en negrita

I: Es para poner un texto inclinado cursiva.

Luego hay cuatro botones de alineación que ya los debe conocer de Word para alinear el texto a la derecha, centro, izquierda, o para justificarlo.

Vinculo: Es para escribir en este cuadro de texto un link o vinculo que afectara al texto seleccionado. Supongo que como buen webmaster sabra la importancia de las palabras que utilice. Será mas valorizado por el buscador Google, el rey de Internet si pone palabras clave en los links y en los textos de los mismos.

Debajo de negrita y cursiva se encuentra el color de texto. Se puede seleccionar un color del menu desplegable del cuadradito o escribirlo al lado, por ejemplo 0000ff para Azul 00ff00 para verde y ff0000 para rojo.

Viñetas y sangrías: en forma de items o numeros y para aumentar o disminuir según corresponde cada botón

Des. es destino, si utilizó frames o marcos podrá seleccionar en un enlace a donde se mostrará la pagina, o bien si se mostrará en la misma hoja o en otra.

Seria bueno que practique un rato he investigue todas estas opciones que hemos visto en estos dos textos del curso gratis de Dreamweaver sobre la barra de propiedades. No es lo mismo leer que estudiar. Si desea aprender bien deberá practicar. Esta es un recomendación valida para cada apunte.

gratis

4.TABLAS EN DREAMVEAWER Y DISEÑO WEB.

eneralmente un Sitio Web actual se lo realiza con tablas y si el Sitio va a ser bastante grande y sufrir cambios constantes se suele utilizar una tabla con todas las divisiones en la que irán los distintos secciones y programarla toda en ves de html en php en el cual se puede agregar una etiqueta que actúa como frames pero sin las desventajas de estos, simplemente muestra el contenido de una pagina en dada sección en la cual se la llame.

Pero PHP es otro tema y será otro curso en realidad hay muchos lenguajes en los cuales se puede realizar un sitio, lenguajes y programas queda en cada uno elegir lo adecuado para cada caso ahora se verán tablas:

Para insertar una tabla se puede pulsar en el botón "Tabla" de la barra de herramientas "común" o ir a barra de menú, Insertar / tabla.

Curso de Dreamweaver. [Diseño web] I

Las propiedades de tabla son sencillas tenemos un recuadro para ingresar la cantidad de filas y otro para la cantidad de columnas, y como se ve en la imágen debajo de filas y columnas se puede especificar el ancho y en que será si en porcentaje o en píxeles. EL grosor del borde, es el externo. El relleno de celda es el margen interno en cada celda con relación a lo que halla dentro, a mayor relleno mayor espacio en blanco. Espacio entre celdas es el grosor de las divisiones de la parte interna de la tabla.

Encabezado es si incluirá esto y en que posición estará se sobresalta el texto que irá como encabezado.

Accesibilidad es para ingresar datos a la tabla un texto que será el titulo, alineación y resumen.

Increíblemente con lo que ha visto hasta ahora... ya puede comenzar a diseñar una página si aprendió correctamente. Texto, tablas, y liks es lo que forma en su mayoría un Sitio standard en Internet - cursos actualizados en www.estudiargratis.com.ar -. Obviamente luego se lo decora con imágenes y como mencioné algo al principio según el caso conviene usar un sistema u otro de lenguaje, por ejemplo html por ahora estudiargratis.com.ar está realizado así. En cambio el foro de estudiargratis.com.ar (programado por los señores de phpBB Group) está realizado en PHP por ser muy cambiante y dinámico.

¿Pero hacer un sitio es simplemente esto? Rotundamente no, pero asi comienza. Luego también esta el tema de la creatividad con el diseño, el marketing, la difusión del sitio y tener paciencia y un poco de suerte... Incluso realizar un Sitio en Internet posee algo de artístico también...

cursos

5.HACER UN SITIO WEB (ESTRUCTURA EJEMPLO) PARTE 1.

Veremos como ejemplo una estructura básica de un sitio Web, la mas sencilla es a partir de una tabla en el ejemplo siguiente es hecha una estructura para un Sitio en Internet a partir de una tabla de tres filas por cuatro columnas. Tenga en cuenta que el diseño variará en primer lugar por la cantidad de contenidos, temática y publico destinado

dreamweaver

Es decir partimos de una hoja en blanco y una tabla de 3x4 le damos una resolución inicialmente de mas o menos de 979 x 500, ingresa estos números seleccionando la tabla (no una celda) en propiedades. Selecciona Pix de píxeles y escribe estos números en An y Al respectivamente. Con estas dimensiones para el ejemplo que haré estará la página optimizada para una resolución de 1024x768 píxeles que se podría decir es la mas común observe las capturas de pantalla de abajo:

Diseño Web

La tabla configurada así se verá en Internet Explorer quiéramos o no uno de los navegadores web mas usados, póngale una alineación centrada a la tabla para que se vea asi tanto en esta definición de pantalla como en una superior, si no en definiciones superiores se la vería desplazada hacia la izquierda. En Internet Explorer en este punto se observa la tabla de la siguiente forma:

aprender

Note que no hace falta desplazarse con ninguna barrita para poder ver todo el Sitio, esta regla deja de ser recomendable cuando se poseen contenidos que para visualizarlos cómodamente hay que hacer hojas o paginas mas largas. No obstante intente que no halla que deslazarse hacia los costados sino solo hacia abajo. Lo ideal seria buscar lo mas cómodo para el navegante.

gratis A continuación, he acomodado un poco las dimensiones internas de forma tal de usar medidas estándar que puedan contener distintos formatos de publicidad o banners; y suprimido algunas celdas. Para suprimir celdas se las selecciona y en propiedades de tabla se pulsa en el botón que señale como A para que se agrupen las celdas seleccionadas como una única celda. El botón que indiqué como B es para habiendo seleccionado una celda dividirla en dos.

A continuación hay una captura de pantalla con algunas dimensiones en píxeles y como queda el diseño del sitio Web en este punto:

Curso de Dreamweaver. [Diseño web] I

De paso... voy a utilizar este diseño para hacer un Sitio que pondré on-line en poco podrá ver como queda una web con mas o menos esta estructura, le autorizo que la utilice si lo desea tal cual o parcial (dimensiones, etc) si pone un lik a esta web ( www.estudiargratis.com.ar ) desde su pagina principal. Voy a continuar explicando este diseño, podrá ver un Sitio realizado con el mismo en www.poesiasdelavida.com.ar (que estará on-line a fines de abril del 2007) luego le pondré la misma en un Zip en breve para que pueda usar el mismo diseño, repito siempre y cuando deje un link en su pagina principal a www.estudiargratis.com.ar .

cursos

dreamweaver

En el próximo post pondré los siguientes temas (Que son los faltantes. ) :

6. Hacer un sitio Web parte 2

7. Hacer un sitio Web parte 3

8. Hacer un sitio web descargar plantilla

8. Finalizando etiquetas servidor y dominio

9. Subir la Web al hosting

10. Promocion y anunciante para la Web - Negocios en Internet

Diseño Web

aprender.

Anuncios

2 comentarios - Curso de Dreamweaver. [Diseño web] I

Naoru +1
basta de usar el dramweaver xDDD
hay q aprender a hacer paginas web, ademas dream ya no es eficiente.
te recomiendo que usen sublime text (pueden incluso usar la beta del 2)
no digo que el post este mal, pero si de verdad quieres aprender a hacer paginas web, hay que dejar estos programas


p/d: me gustaba mas dreamweaver cuando no era de adobe u.u
libeth73 +1
Me gusto mucho la explicación que diste, muy útil para mi. y la siguiente parte donde la encuentro?. gracias y estoy de acuerdo que de a poco....