asbnaksbcka
of 7
-
Upload
cualquiera -
Category
Documents
-
view
214 -
download
0
Transcript of asbnaksbcka
-
7/23/2019 asbnaksbcka
1/7
Dreamweaver CS4Sitio 01-Tablaspor Carlos Oyarzn B.
Antes de comenzar a trabajar enDreamweaver diseando nuestras pginasweb, debemos congurar el Sitio, esto es,congurar los distintos elementos queparticiparn del desarrollo del proyecto.
Para esto Dreamweaver posee unainterfaz bastante amigable, que nosorientar en las opciones que debemosseleccionar.
Desde el Men Sitio, escoger la opcinNuevo Sitio y comenzar a setear nuestroSitio Web.
Trabajaremos en la opcin Avanzada yslo conguraremos las opcionescorrespondientes a la categora en la opcinde Datos locales.
Lo primero ser nombrar el Sitio, estonos ayudar a ordenar nuestros archivos ycarpetas, adems de los sitios en los cuales
TUTORIAL WEB-01
Objetivos: Denir el Sitio Conguracin del espacio de trabajo Lenguaje HTML Manejo de Tablas Utilizacin de imgenes Vnculos Manejo de Estilos CSS
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected] -
7/23/2019 asbnaksbcka
2/7
estemos trabajando. Recordemos queDreamweaver es un Editor Grco depginas web, con el cual podremos editar ymantener mltiples sitios, es por esta raznque debemos ser ordenados en esta etapadel proceso.
Ahora deberemos seleccionar nuestracarpeta raiz local, est denicin nosayudar a mantener ordenados todos losarchivos y carpetas, que sean parte del sitio
en el cual trabajemos. Finalmente denimos cual ser la
carpeta predeterminada en la que estarn
ubicadas las imgenes que utilizaremos enel sitio.
Ahora procederemos a crear un archivoHTML nuevo, en blanco.
Este nuevo documento de Dreamweaveres un documento muy similar a un Editor detexto, donde podremos insertar los distintoselementos que formarn parte de nuestrapgina web.
Dreamweaver posee una gran variedadde herramientas y comandos para el
desarrollo de sitios web, con las cuales esnecesario familiarizarse.
La Barra Superior de Men, nos permiteacceder a los comandos de Archivo, Edicin,ver, insertar, modicar, formato, comandos,sitio, ventana y ayuda. Desde esta barra demen podemos realizar todas las acciones ycomandos incorporados en Dreamweaver,que se irn explicando posteriormente
La ventana del documento, nos permitever el documento en los modos de cdigo,dividir y diseo. Esto nos ayuda a alternarlas vistas del documento y trabajardirectamente con el cdigo HTML.
La Ventana de Propiedades, nos permitecontrolar las propiedades del elemento quetengamos seleccionado, al hacer clic en eldocumento, conguraremos las propiedadesde la pgina.
A la derecha se encuentra la Ventana deArchivo, que nos permitir administrar,editar, crea, eliminar, renombrar todos losarchivos y carpetas que componen el sitio,Es muy importante el realizar cualquiercambio desde este administrador dearchivos, ya que est permitir alDreamweaver actualizar los cambios al
Dreamweaver CS4Sitio 01-Tablas
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected] -
7/23/2019 asbnaksbcka
3/7
interior del sitio web y los documentosque lo componen.
La Ventana de Estilos CSS, nos permiteadministrar los Las reglas de Estilos CSS y
los documentos vnculados a las reglas queutiliza el documento que estemostrabajando.
Desde el Men Vistas, podemos cambiarel espacio de trabajo de acuerdo a laspreferencias que queramos utilizar, comoDiseador, Clsico, Programador,desarrollador, etc.
El Lenguaje HTMLEl HTML es un lenguaje de Marcas de
Hipertexto, que nos permite escribirdocumentos de texto, que al tener laextensin .HTML, hace que stos seanvisualizados por un Browser como unapgina web.
En el lenguaje HTML existen lasetiquetas que nos permiten ir estructurandoel documento y su contenido en la pginaweb, estas etiquetas, le indican al Browserque interprete visualmente cada elemento.
Documento sin ttulo
Ttulo
Este es un prrafo de texto
de ejemploEste es un prrafo de texto deejemploEste es un prrafo de texto deejemploEste es un prrafo de texto deejemploEste es un prrafo de texto de
ejemploEste es un prrafo de texto de Este es un prrafo de texto de ejemplo
Este es un listado deelementos
Naranja Pera Manzana
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdmailto:[email protected]://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd -
7/23/2019 asbnaksbcka
4/7
documento, incorporar imgenes yvnculos, etc.
A continuacin procederemos acongurar el documento para desarrollar elsitio a partir de una imagen de rastreo dereferencia.
Crear un documento Nuevo Html vaco yguardarlo como Index.html. Luego desde lapaleta de Propiedades seleccionar el botnPropiedades de la pgina.
Desde esta Ventana podemoscongurar todos los parmetros
preliminares de nuestra pgina web yquedarn inmediatamente incorporadoscomo reglas de estilo CSS.
Primero, nos iremos a la categora deimagen de rastreo colocaremos la imagenque nos servir de referencia paradesarrollar nuestra pgina.
En la opcin de transparencia bajar a unvalor que nos permita trabajar con laimagen como fondo y poder ver loselementos que iremos incorporando a lapgina.
En la Categora de Apariencia (CSS),podemos congurar las propiedades de
Fuente de pgina, tamao, Color de la letra,Color de Fondo de la pgina, imagen de
Fondo, las propiedades de repeticin de laimagen de fondo y los mrgenes delDocumento.
En la categora de Vnculo (CSS),podemos congurar la apariencia de los
vnculos de texto que incorporemos anuestra pgina web, considerando sus
cuatro estados, color de vnculo, vnculos de
sustitucin, vnculos visitados, vnculosactivos. Y adems activar o desactivar elsubrayado.
En la categora Encabezados (CSS),podemos congurar las caractersticas delos 6 encabezados, tipografa, tamao y
Dreamweaver CS4Sitio 01-Tablas
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected] -
7/23/2019 asbnaksbcka
5/7
color. La denicin de Tipografa sernica para todos los encabezados.
A continuacin procederemos adesarrollar el diseo de la pgina a partir dela imagen de rastreo colocada en eldocumento.
Desde el Men Insertar, elegiremos laopcin Tabla, este elemento nos servircomo contenedor de toda la informacin
dispuesta en la pgina haciendo que sta nose despliegue por todo el documento, sinoque est ordenada dentro de la tabla y susceldas.
A continuacin procederemos a ajustarlos altos de las celdas para hacerlos
coincidir con nuestra imagen de rastreo.Luego seleccionar la primera celda de latablas y desde la paleta p ropiedades elegirla opcin divide celda. Y dividiremos lacelda en seis columnas para colocar lasimgenes que representarn nuestro mende navegacin.
Para esto desde el Men Insertarelegimos la opcin Objetos de imagen,Imagen de sustitucin en cada una de lasceldas creadas.
Esto nos permitir incorporar dosimgenes en cada celda, una ser la imagen
en su estado en reposo, y la otra la imagende sustitucin, cuando el puntero del mousepase por sobre ella. En la casilla de textoalternativo colocamos una pequeadescripcin del botn y en ir a URL, ladireccin de la pgina a la cual se ir luegode hacer clic sobre el botn, en este caso,index.html
Dreamweaver CS4Sitio 01-Tablas
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected] -
7/23/2019 asbnaksbcka
6/7
Repetir el mismo procedimiento por
cada botn cambiando la URL de destino delbotn por su correspondiente pgina;trabajos.html, galera.html y contacto.html.
En la celda inferior Insertaremos unaimagen, lo que nos dar el siguiente
resultado. A continuacin insertaremos una tabla
de 2 la y 2 columnas en la celda inferior,para en ella colocar la informacin denuestra pgina web y con un valor de 100%en el ancho, esto har que la nueva tablacoincida su ancho con el de la celda en la
cual la hemos insertado. De esta forma podemos ir incorporando
la informacin de la pgina web, texto eimgenes. Si vamos a incorporar ttulos,subttulos, prrafos, etc. Es necesarioasignarles el formato adecuado en la paletade propiedades, por defecto, todos lostextos tienen formato de prrafo.
Los Ttulos sern Encabezado 1 y lossubttulos Encabezado 2, por ltimo laslistas podemos asignarles el parmetro delista numerada o lista sin ordenar.
Reglas de Estilos CSS
Para controlar la apariencia del
documento debemos de crear Reglas deEstilos CSS, stas nos permitirn tener unmayor control de los elementos insertadosen la pgina web y sus propiedades. Sinintervenir invasivamente el cdigo html.
A continuacin veremos una formasimple de controla la apariencia de lasceldas, asignarles imgenes de fondo.Controlar el manejo de la tipografa,tamao, color, etc.
Lo primero que debemos hacer esseleccionar el elemento al cual leasignaremos la regla de estilo CSS. Para estodebemos seleccionar la celda o bien, desdela barra de etiquetas en la parte inferior deldocumento seleccionar la etiqueta quequeremos afectar, en este caso la etiqueta de la principal.
Dreamweaver CS4Sitio 01-Tablas
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected] -
7/23/2019 asbnaksbcka
7/7
Luego en la paleta de propiedadescambiar al editor de Estilos CSS, dondeseleccionaremos como Regla de destino una y luego p resionaremosel botn Editar regla.
Ahora en el siguiente panel elegimos eltipo de selector contextual para la reglaCSS, existen cuatro tipos de selectores:Clase, ID, Etiqueta y Compuesto; en estecaso ser una Clase, ya que es una reglapersonalizada.
Debemos nombrarla, TODAS LOSNOMBRES DE LAS CLASES DEBEN COMENZARCON UN PUNTO (.), nombraremos las reglacomo: .fondo_celda
Y de momento guardaremos estadenicin Slo en este documento, con esteprocedimiento todas nuestras denicionesde estilo quedan guardadas en eldocumento HTML que estamos trabajando,al interior de la etiqueta .
Al presionar Aceptar, aparece la ventanade Denicin de Regla para... Dondepodemos modicar los parmetros de
variadas categoras. En este caso lacategora de Fondo, donde en el parmetroBackground- image, colocaremos una
Dreamweaver CS4Sitio 01-Tablas
D I S E O W E B
TALLER DE DISEO WEB - CARLOS OYARZN B. [email protected]
mailto:[email protected]
