Diseo Web Dinmico

Clase Prctica Dreamweaver CS3

Contenido: Uso de tablas de diseo y creacin de plantillas. Actividades:
Cree la siguiente estructura de carpetas. El directorio donde se creara es de su eleccin.

Coloque los siguientes banner en la carpeta img: 1. Banner1 de 500 x 80 con el texto www.ie.unan.edu.ni. 2. Banner2 de 400 x 80 con el texto Tecnologa para la educacin y el conocimiento. En Dreamweaver CS3 crear la siguiente plantilla haciendo uso de las tablas de diseo. 1. Configure el sitio local, creando un nuevo sitio con el nombre MiPlantilla. Utilice como carpeta raz la carpeta Plantilla y como carpeta de imgenes la carpeta img. 2. Cree un nuevo documento HTML. 3. En ttulo agregue Plantilla Informtica Educativa. 4. Agregue un color de fondo a la pgina, para ello recuerde que luego insertara los banner creados, as que haga un buen uso de la combinacin de colores. 5. En el nuevo documento cree una tabla de diseo con las siguientes dimensiones. Ancho=900 y Alto= 410. 6. Desde la vista cdigo aplique la propiedad pertinente para centrar la tabla. 7. Aplique color de fondo a la tabla, teniendo el cuidado de hacer una buena combinacin de colores con el fondo de la pgina y los colores utilizados en los banner creados. 8. Agregue en la parte superior de la tabla principal una nueva tabla con las dimensiones 900 x 80. 9. A esta nueva tabla agregue dos celdas de diseo una de 500 x 80 (parte izquierda de la tabla) y la otra de 400 x 80 (parte derecha de la tabla).

UNN-Matagalpa

Diseo Web Dinmico

10.A la celda izquierda inserte la imagen banner1.jpg y a la celda de la derecha la imagen banner2.jpg. 11.Debajo agregue una nueva tabla de diseo de dimensiones 900 x 20.

UNN-Matagalpa

12.A esta nueva tabla de diseo agregue cinco celdas de diseo con las dimensiones 180 x 20. A estas celdas puede aplicar propiedades como color de fondo y color de texto, siempre siguiendo la combinacin de colores adecuada para evitar malos contrastes con el fondo de la pgina y los banner insertados.

Diseo Web Dinmico

13.A cada celda agregue los siguientes textos, iniciando de izquierda a derecha: Inicio, Informtica Educativa, Aula Virtual, Flie 2010, Contctenos. Este texto debe quedar centrado. A cada texto debe agregar el vnculo correspondiente a excepcin del texto contctenos. 14.Agregue una nueva tabla de diseo de dimensiones 900 x 30.

15.A esta nueva tabla agregue 3 columnas de diseo de dimensiones 300 x 30, agregue color de fondo y color de texto que combine con el resto del diseo. A la celda de la derecha agregue la siguiente informacin: Tel. 22786764 ext. 250, desde el cdigo alineacin vertical centrada y alineacin horizontal derecha.

UNN-Matagalpa

Diseo Web Dinmico

16.En la parte izquierda dibuje una nueva tabla de diseo de dimensiones 125 x 196. A esta nueva tabla de diseo agregue 7 celdas de diseo de dimensiones 125 x 28.

UNN-Matagalpa

17.A la primera celda aplique un color de fondo distinto del resto de celdas que se acaban de crear. A esta agregue el texto Cursos Libres, aplicando un formato que realce el texto alineacin vertical y horizontal centrada. 18.A las 6 celdas restantes agregue los siguientes textos: Diseo Web, Diseo Grfico, SQL Server 2008, Redes, Animacin Flash, Excel Avanzado.

Diseo Web Dinmico 19.A estos textos desde el cdigo configurar alineacin vertical centrada. 20.Agregar una nueva tabla de diseo a la derecha de la tabla que contiene el listado de cursos, teniendo el cuidado de dejar un espacio pequeo entre una tabla y la otra, este debe ser de dimensiones 555 x 196. 21.A esta nueva tabla agregar dos celdas de diseo la primera de dimensiones 555 x 19. Agregar el texto Nombre del Curso. Alineacin horizontal centrada y negrilla. Convertir esta celda de diseo en regin editable, nombrarla como titulocurso 22.La segunda celda de diseo de dimensiones 555 x 177. Aplique color de fondo distinto entre las celdas para diferenciar el titulo del resto del texto. Convierta esta celda en regin editable nombrarla como descipcioncurso.

UNN-Matagalpa

23.Cree a la derecha de la ltima tabla creada una nueva tabla de diseo con dimensiones de 182 x 196. 24.A esta tabla agregar una celda de diseo de dimensiones 182 x 24, agregar el texto Noticias, aplicar un formato y color de fondo que realce el texto. Convertir en regin editable y nombrarla como titulonoticias. 25.Agregar una nueva celda de diseo de dimensiones 182 x 185. Convertirla en regin editable y nombrarla como noticias.

Diseo Web Dinmico

26.Agregar en la parte inferior de la tabla principal una celda de diseo de dimensiones 900 x 26, con el texto Copyright ie.unan.edu.ni. Todos los Derechos Reservados., desde el cdigo aplique el siguiente formato: a. Tipo de letra: Arial b. Tamao: 1 c. Negrilla d. Alineacin vertical y horizontal centrada

27.Finalmente guarde la pgina como plantilla, verifique que se est guardando en el sitio web configurado para ello y nmbrela como plantillacursos.

UNN-Matagalpa

Diseo Web Dinmico 28.Para cada curso disponible en el men de Cursos Libres cree una nueva pgina y aplique la plantilla creada, en cada una cambie el ttulo del elemento editable Nombre de Curso, dependiendo de la pagina que se est creando. Sern seis pginas las que deber crear. Guarde cada una de ellas en el sitio web con un nombre representativo. 29.Adicionalmente cree una pgina de inicio que ser la pgina index.html. la que se abrir al momento de dar clic en el vnculo inicio de la plantilla. 30.Edite la plantilla y cree los vnculos pertinentes del men Cursos Libres y el vnculo Inicio, de tal forma que se puedan abrir el resto de pginas creadas. 31.Visualice las pginas y compruebe el funcionamiento de los Hipervnculos.

La apariencia final del sitio web sera algo parecido a esta ventana. Va a variar por los banner y la combinacin de colores que se utilicen. Se debe verificar que cada vnculo abra la pagina correspondiente. 32.Comprima la carpeta Plantilla y enve en el vnculo Envi Clase Prctica Plantillas DW.

UNN-Matagalpa