You are on page 1of 61

Submódulo

PROPÓSITO: Al término del submódulo, serás competente para utilizar software de aplicación para el diseño de páginas Web. El presente submódulo tiene como objetivo prepararte para utilizar software de aplicación para el diseño de Sitios Web. Por lo que como proyecto elaboraras el diseño de una página web empresarial, utilizando el software Dreamweaver con las características siguientes: 1.- Una página principal que incluya: → Encabezado → Imágenes → Hipervínculos a otras páginas web → Hipervínculos a las páginas que tú diseñes 2.- Una segunda página, en la que apliques imágenes y efectos. 3.- Una tercera página en la que apliques tablas. 4.- Una cuarta página en la que utilices un formulario de contacto Todas las páginas deben de estar enlazadas entre sí y a una página en Internet.

COMPETENCIAS: 1. Programa y administra páginas Web para la difusión y captación de la información. 2. Elabora páginas Web con animaciones interactivas de aplicación general y específica, en un ambiente multimedia.

CONTENIDOS: 2.1 2.2 2.3 Conocer la terminología básica del software para diseñar una página Web. Identificar el entorno del software para diseñar páginas Web. Diseñar una página Web con el software de aplicación.

63

Utilizar software de aplicación para el diseño de páginas Web

ACTIVIDAD 1

Realiza la lectura de las competencias que se pretende que alcances al término del submódulo. Posteriormente en binas responde las preguntas y termina comentando tus respuestas a través de una discusión guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo. 1.- ¿Puedo desarrollar las competencias con los contenidos del submódulo? Explica. ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ 2.- ¿Cuál de las competencias es la que más me puede servir? ¿Por qué? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ 3- ¿Consideras que hay mercado de trabajo para las competencias que vas a desarrollar? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________

64

Utilizar Software de Aplicación para el Diseño de Páginas Web

ACTIVIDAD 2 Comenta en equipos de 3 personas, los diferentes sitios de Internet que han visitado y respondan las siguientes preguntas, comentando en plenaria la página Web que les gustaría diseñar y comentando el porqué de su elección. 1.- ¿Qué elementos has detectado que componen las páginas Web que normalmente has visitado? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 2. ¿Cómo puedes definir un sitio Web? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 3. ¿Cuáles son los fines de la creación de una página Web empresarial o de servicios? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 4.- ¿Qué elementos consideras que debería tener la página Web que diseñes? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________

65

Dreamweaver oculta el código HTML de cara al usuario. sobre todo en lo que a productividad se refiere. además muy fáciles de usar: • Hojas de estilo y capas • Javascript para crear efectos e interactividades • Inserción de archivos multimedia. siempre encontrará en este programa razones para utilizarlo. anteriormente perteneciente a Macromedia. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional. ya que permite escribir un documento viendo directamente el resultado final). ¿Qué es Dreamweaver? Dreamweaver. es la herramienta de diseño de páginas web más avanzada.. un departamento de ventas. que fabrica tanto Macromedia como otras compañías. Pues una página Web es una sección de una estructura más grande que ofrece al navegante la posibilidad de informarse acerca de determinado producto. Conceptos Básicos Página Web Cuando pensamos en una página web debemos pensar en una empresa que tiene una jerarquía bien establecida. actualmente de la casa de Adobe. y soporta gran cantidad de tecnologías. es necesario que conozcas la terminología que se utiliza en este programa. tal como se ha afirmado en muchos medios.1 CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR UNA PÁGINA WEB. para realizar otras acciones más avanzadas. Cada documento (página Web) contiene texto o gráficos que aparecen como información digital en la pantalla de 66 . diseño. Aunque sea un experto programador de HTML el usuario que lo maneje.Utilizar software de aplicación para el diseño de páginas Web 2. servicio o la empresa.. Sitio Web En inglés website o web site. ACTIVIDAD 3 Para iniciar a trabajar con Dreamweaver. Pregunta a tu profesor las dudas que te vayan surgiendo. haciendo posible que alguien que no entiende el lenguaje HTML pueda crear páginas y sitios web fácilmente. “Lo que ves es lo que obtienes”. Además es un programa que se puede actualizar con componentes. contabilidad. por lo tanto realiza la lectura “¿Qué es Dreamweaver?” y completa las frases que se te presentan. etc. Cada una de estas estructuras cumple una función determinada e importante dentro de la empresa. un sitio Web es un sitio (localización) en la World Wide Web que contiene documentos (páginas Web) organizados gerárquicamente. división de personal. Como editor WYSIWYG que es (What You See Is What You Get.

Apache es el programa más comúnmente usado como servidor web (según las estadísticas de Netcraft) y el Internet Information Services (IIS) de Microsoft también se usa con mucha frecuencia. Los sitios web pueden ser visualizados o accedidos desde un amplio abanico de dispositivos con conexión a Internet. como por ejemplo www. que forma parte de algún sitio Web.org. percibido por el usuario. es decir. siempre se está haciendo referencia a un sitio Web. Un sitio Web está alojado en una computadora conocida como servidor web. La búsqueda en Internet se realiza asociando el DNS ingresado con la dirección IP del servidor que contiene el sitio web en el cual está la página HTML buscada. Cualquier sitio web puede contener hiperenlaces a cualquier otro sitio web. también llamada servidor HTTP. Hay dos amplias categorías de programas editores usados para este propósito que son   Editores de texto como Notepad. Al ingresar una dirección Web. esta última es sólo un archivo HTML. Sitio local Una vez definido el trabajo a realizar. portátiles. Un sitio puede contener una combinación de gráficos. la copia en el disco duro del sitio web en internet.Utilizar Software de Aplicación para el Diseño de Páginas Web un ordenador. etc. Un sitio Web estático es uno que tiene contenido que no se espera que cambie frecuentemente y se mantiene manualmente por alguna persona o personas que usan algún tipo de programa editor. y otros materiales dinámicos o estáticos. puede ser a veces borrosa. que es generalmente la primera que se visualiza. donde el sitio se edita usando una interfaz GUI y el HTML subyacente se genera automáticamente con el programa editor. todo lo guardas en una carpeta. CSS y JavaScript. una unidad HTML. imágenes. donde el HTML se manipula directamente en el programa editor o Editores WYSIWYG como por ejemplo Microsoft FrontPage y Adobe Dreamweaver. texto. audio. Un sitio Web es un gran espacio documental organizado que la mayoría de las veces está típicamente dedicado a algún tema particular o propósito específico. PDAs. pondrás el nombre del cliente y dentro de ella toda la información. y estos términos también pueden referirse al software que se ejecuta en esta computadora y que recupera y entrega las páginas de un sitio Web en respuesta a peticiones del usuario. de manera que la distinción entre sitios individuales. paginas html. Los sitios Web están escritos en código HTML (Hyper Text Markup Language). 67 . y se acceden aplicando un software conveniente llamado navegador web. es decir sólo usa tecnología HTML. el que tiene una página HTML inicial. No debemos confundir sitio Web con página Web. también conocido como un cliente HTTP. la cual.wikimedia. o dinámicamente convertidos a éste. como computadoras personales. y teléfonos móviles. Este es el sitio local. video. Sitio estático Se le llama sitio estático al sitio Web que no interactúa con una Base de Datos. si eres ordenado.

para designar la función de cada elemento dentro de la página: párrafo. ya que obliga a crear documentos HTML/XHTML bien definidos. o proporcionar información personalizada de alguna manera a los requisitos del usuario individual. Separar la estructura de los contenidos y la estructura del diseño presenta numerosas ventajas. si presiona un botón el sitio completo hace algo. tamaño y tipo de letra del texto. (b) Monitorizar una situación cambiante. Por lo tanto se puede dar así un amplio abanico de posibilidades. etc. es decir. separación horizontal y vertical entre elementos. Al crear una página Web. posición de cada elemento dentro de la página. lo más común es que estos sitios interactivos dependan de otra tecnología para agregar interactividad. texto estacado. se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color. incluyendo por ejemplo: (a) Mostrar el estado actual de un diálogo entre usuarios. Sitio interactivo Es aquel sitio que su funcionalidad depende de acciones del usuario. la página se genera automáticamente por el software. etc. 68 . CSS Es un lenguaje de hojas de estilos creado para controlar el diseño de la estructura. se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos. lista de elementos. es decir. Una vez creados los contenidos. ASP. JSP. CSS es la mejor forma de separar los contenidos y su diseño siendo necesario para crear páginas web complejas. tabla. titular. etc.Utilizar software de aplicación para el diseño de páginas Web Sitio dinámico Un sitio Web dinámico es uno que puede tener cambios frecuentes en la información. El sitio dinámico es aquel en el que la información que se le muestra al navegante proviene de una Base de Datos. como respuesta directa a la petición de la página. generalmente en MySql y las páginas están en formato PHP. Cuando el servidor Web recibe una petición para una determinada página de un sitio Web. Adobe Flash.

realiza una búsqueda en Internet sobre los sitios mencionados y llena la tabla con dos ejemplos de cada uno de ellos.Utilizar Software de Aplicación para el Diseño de Páginas Web ACTIVIDAD 4 Después de haber hecho la lectura anterior. TIPO DE SITIO NOMBRE DEL SITIO URL PÁGINA WEB SITIO WEB SITIO LOCAL SITIO ESTÁTICO SITIO DINÁMICO SITIO INTERACTIVO 69 .

2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB. ACTIVIDAD 5 Antes de empezar a crear la página Web es necesario que conozcas el entorno de trabajo del software Dreamweaver. por lo que es necesario que realices una búsqueda en Internet y definas lo siguiente: CSS: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ Maquetación: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ Plantilla en Dreamweaver: ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ Contenedor en Dreamweaver: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Etiqueta Div: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ Región editable: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 70 .Utilizar software de aplicación para el diseño de páginas Web 2.

Utilizar Software de Aplicación para el Diseño de Páginas Web Comportamientos en Dreamweaver: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ Tabla: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ Formulario: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ Formulario de contacto: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ _______________________ ACTIVIDAD 6 Realiza la lectura “DREAMWEAVER CS5” y posteriormente coloca las letras en el lugar correspondiente de la ventana inicial de Dreamwever. podrás realizar cualquier trabajo. trabajando desde la vista de diseñador. Interfaz de Dreamweaver CS5 Pantalla Inicial 71 . DREAMWEAVER CS5 Dreamweaver CS5 Es un diseñador web que no requiere conocimientos previos de ningún lenguaje web. lo que te facilitará la tarea de realizar un sitio web sin amplios conocimientos. Como verás.

el panel Estilos CSS y el panel Archivos.Ventana de documento.. xml. diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador... la ventana de la aplicación contiene un conmutador de espacios de trabajo. Cada objeto tiene propiedades distintas. javascript. E. crear documentos nuevos en diferentes formatos (html. Muestra la jerarquía de etiquetas que rodea a la selección actual. Muestra el documento actual mientras lo está creando y editando. o manipular. en el que estés trabajando. Elementos del espacio de trabajo El espacio de trabajo incluye los siguientes elementos: A. G. Permite ver y cambiar diversas propiedades del objeto o texto seleccionado.Inspector de propiedades. D.Barra de herramientas Documento. A lo largo de su parte superior.Panel Archivos. puedes. Los elementos destacados. F.. ya que son videos de métodos de trabajo o la utilización de algunas herramientas específicas. 72 . pueden ser muy útiles.Barra de la aplicación. Selector de etiquetas. Ejemplos de paneles son: el panel Insertar. H. Ayudan a supervisar y modificar el trabajo realizado.. Permite administrar los archivos y las carpetas. C.etc) y elementos destacados.Utilizar software de aplicación para el diseño de páginas Web Desde la pantalla Inicial. desde abrir un elemento reciente.Grupo de Paneles. Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código). Situado en la barra de estado de la parte inferior de la ventana de documento. El inspector de propiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.. abrir un documento que quieras añadir. php. Es el área de trabajo destinada para realizar la página web. B.-. menús (sólo Windows) y otros controles de aplicación. tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto.Espacio de trabajo..

spry. ya no están las pestañas que indicaban las herramientas de otras secciones. 73 . etc. posteriormente responde cada una de las preguntas que se te presentan. observa el lugar donde se encuentran ubicadas cada una de las barras de herramientas que se describen en la lectura. ya que la mayoría de herramientas que utilizarás. Esta barra puede ser personalizada. están en ella o las puedes añadir. Se puede ver como menú o como fichas que son. aunque con limitaciones. Barra insertar Una barra muy útil. Como menú. datos. esto facilita el no tener que ir buscando las herramientas en las diferentes ventanas.Utilizar Software de Aplicación para el Diseño de Páginas Web ACTIVIDAD 7 Ingresa al software DREAMWEAVER CS5. como formularios. se ve que el aspecto ha cambiado. como se encuentra en la imagen de arriba.

Utilizar software de aplicación para el diseño de páginas Web Pero si se da clic en el triángulo invertido que se encuentra al lado de “común”. Y la otra. pueden verlo de dos maneras. pulsando el botón “Código”. 1. algún lenguaje de programación o simplemente se quiere ver el código.. viendo en una parte el diseño y en otra el código.. verás la pantalla dividida. 74 .¿En qué actividades crees que te pueden ayudar el uso de estos botones? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ Barra de herramientas del documento En esta barra se encuentra el botón “Diseño” seleccionado. para personas que controlen el código HTML. se podrán ver en forma de menú. pulsando ese botón. las pestañas que contenía en el modo de fichas. una es con el botón “Dividir”. está es la vista que normalmente estarás utilizando.Menciona el nombre de los botones que se encuentran en la barra de insertar. una como vemos en la imagen superior. en el que verás solamente el código de la página y perderás de vista el diseño. aunque normalmente ya nos reconoce los que tenemos instalados. En la misma barra encontrarás el botón donde podrás agregar los diferentes navegadores en los que quieres ver la página. ____________________________________________________________________________ ____________________________________________________________________________ ______________ ____________________________________________________________________________ _____ 2.

o pulsando la tecla F12. 1. podrás ver que aparece en la pestaña del navegador o en la parte de arriba de la ventana del mismo. verás en el navegador el resultado del trabajo También puedes ver la caja de texto .. allí escribirás el título que pondrás a tu página y al presionar la tecla F12.¿En qué actividades crees que te pueden ayudar el uso de estos botones? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ Inspector de propiedades En el inspector de propiedades como ves en la imagen de arriba.. El inspector de propiedades es una de las partes que se convertirá en imprescindible en el proceso de un diseño web. ____________________________________________________________________________ ____________________________________________________________________________ ______________ 75 .. 1. ____________________________________________________________________________ ____________________________________________________________________________ ______________ ____________________________________________________________________________ _____ 2.Menciona el nombre de los botones que se encuentran en el inspector de propiedades. puedes visualizar y cambiar las propiedades de los estilos CSS.Menciona el nombre de los botones que se encuentran en la barra de herramientas del documento. También puedes apreciar que aparecen propiedades de la parte del documento.Utilizar Software de Aplicación para el Diseño de Páginas Web Dando clic sobre que estés realizando. donde puedes aplicar etiquetas HTML que personalicen tu trabajo.

o has aplicado y los CSS creados.¿En qué actividades crees que te pueden ayudar el uso de estos botones? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ Paneles y grupos de paneles A la derecha de la pantalla.. 76 . puedes apreciar que aparece un grupo de símbolos.Utilizar software de aplicación para el diseño de páginas Web ____________________________________________________________________________ _____ 2. eso son los paneles en los que puedes encontrar los documentos que vayas creando. los comportamientos que puedes aplicar.

____________________________________________________________________________ ____________________________________________________________________________ ______________ ____________________________________________________________________________ _____ 2.. y en ocasiones.Utilizar Software de Aplicación para el Diseño de Páginas Web Para visualizarlo mejor.Menciona el nombre de los botones que se encuentran en múltiples documentos.Menciona el nombre de los botones que se encuentran en el panel y grupo de paneles.. 1. querrás tener varios de ellos abiertos. Con tan solo dar clic en las diferentes pestañas.. pulsando en las dos flechas situadas en la parte superior derecha del grupo de paneles. ____________________________________________________________________________ ____________________________________________________________________________ ______________ ____________________________________________________________________________ _____ 2. 1. si te molesta para trabajar. irás creando diferentes documentos. mejor déjalo plegado y da clic en el icono del panel que necesites en cada momento. podrás navegar por ellos sin ningún problema. como se aprecia en la imagen de arriba.¿En qué actividades crees que te pueden ayudar el uso de estos botones? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ 77 .¿En qué actividades crees que te pueden ayudar el uso de estos botones? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ Múltiples documentos Conforme vayas trabajando. puedes desplegarlo como vemos en la imagen de arriba. para iniciar a crear tu página Web. con los cuales te podrás ir familiarizando con el uso de este programa. Así podrás trabajar viendo todo lo que contienen los paneles. Estos son los elementos más importantes de la interfaz de Dreamweaver. te aparecen fichas con los diferentes documentos abiertos o creados..

que diferencia mayúsculas de minúsculas. Pregunta a tu profesor las dudas que te vayan surgiendo. para que cuando quieras buscar un archivo sea fácil de localizar. NUNCA DEJAR ESPACIOS. La página principal deberá llamarse index. es decir. si el nombre es compuesto. se hace referencia a la carpeta principal donde se irá creando el sitio Web. para eso es necesario que te organices en equipo de tres integrantes y realicen la lectura “Recomendaciones para la estructura del sitio web” a la par que vas desarrollando las actividades referentes al diseño de tu página. 78 . crear una carpeta imágenes. unirlos mediante un guión o un guión bajo. tendrás que actualizar los vínculos manualmente. siempre en minúsculas. Si lo realizas en la carpeta raíz.Utilizar software de aplicación para el diseño de páginas Web ACTIVIDAD 8 A partir de este momento vas a empezar con el diseño de tu web. Recomendaciones para la estructura del sitio Web Antes de empezar a crear un sitio web lo primero que tienes que plantearte es su organización. ya que los servidores web son sensibles a las mayúsculas. Con esto conseguirás crear un orden en tu sitio. otra para los estilos y en la carpeta raíz dejaremos los archivos HTML. Otra cosa a tener en cuenta son los nombres de las páginas del sitio. También puede unir simplemente las palabras. es decir. creando un nombre simple. fuera de Dreamweaver. De ahí la importancia de manipular los archivos y las carpetas. El resto de páginas se aconseja que su nombre sea referente al contenido. Responde las preguntas que se te presentan. solamente en la aplicación. Cuando se habla de carpeta raíz. Siempre que quieras cambiar la ubicación de un archivo es recomendable hacerlo directamente en Dreamweaver por que tiene la posibilidad de actualizar todos los vínculos sin que le ocasione ningún problema. Una organización muy usual es separar en carpetas los archivos diferentes.

TAMBIÉN ANÓTALO AQUÍ PARA QUE NO SE TE OLVIDE ____________________________________________________________________________ _ 79 . así como los archivos que contenga y así poderlos manipular de forma más sencilla. Aquí pondrás el nombre del sitio. si das clic allí. Desde la pantalla inicial En la pantalla inicial. que vemos en la imagen siguiente. ESCRIBE EL NOMBRE DE TU SITIO WEB.Utilizar Software de Aplicación para el Diseño de Páginas Web Definir el sitio Cuando hablamos de definir un sitio nos referimos a agregar la carpeta raíz como un proyecto de Dreamweaver. te aparecerá el cuadro de diálogo de definición del sitio. te vas a encontrar en el apartado “Crear nuevo” “Sitio de Dreamweaver…”. no necesariamente debe coincidir con el nombre de la carpeta y puede llevar espacios. enseguida debes dar clic en la carpeta que se encuentra debajo y buscas la carpeta raíz del sitio.

. puedes o crear uno nuevo. ACTIVIDAD 9 Después de haber leído el texto RECOMENDACIONES PARA LA ESTRUCTURA DEL SITIO WEB.¿Por qué es importante organizar las carpetas de un sitio web? ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 2. Añadir Archivos y Carpetas Para añadir archivos. Para las carpetas. das clic en el menú de la ventana de “Archivos”.. Para la segunda forma. te aparecerá un menú y deberás dar clic en “Nuevo archivo” y te creará un archivo. pero seleccionando “Nueva carpeta”.¿Cuál es el nombre recomendable que se le debe de dar a la página principal y porque? ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 4.¿Por qué es recomendable cambiar la ubicación de los archivos directamente de Dreamwever? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 3. hay que guardar para que se cree el archivo... situado en la esquina superior derecha y colocas el ratón encima de “Archivo” y das clic en “Nuevo archivo”. ya que en los casos anteriores. Despliega la ventana de “Archivos” de los paneles de la derecha. se hace lo mismo. desde el menú de archivo o desde la pantalla inicial.Utilizar software de aplicación para el diseño de páginas Web CON ESTO TERMINARÁS LA DEFINICIÓN DE TU SITIO WEB. la primera opción es hacer clic derecho en la carpeta raíz o en la carpeta donde queramos crear el archivo.¿Cuáles son los pasos que tienes que seguir para agregar un archivo o carpeta? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________ 80 . le asignas el nombre y la extensión la cambias si quieres que el archivo no sea html. pero existen otras dos formas. responde las preguntas que a continuación se presentan: 1.

. • Selección de la información que vas a publicar en tu página Web.. ahora con la información ya clara aquí definirás el diseño de tu página Pregunta al profesor todas las dudas que te vayan surgiendo.¿A qué empresa le vas a crear el sitio Web? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ 81 . • Elegir la empresa o negocio del que vayas a realizar la página. ACTIVIDAD INTEGRADORA PARTE 1 A partir de este momento vas a empezar con la estructura de tu página Web para eso es necesario que te organices en equipo de tres integrantes y realices la lectura “diseño de una página Web” a la par que vas desarrollando las actividades referentes al diseño de tu página como son: • Elegir los posibles ramos empresariales de la página Web que vayas a crear.Define cómo va a quedar la estructura de tu sitio Web: 2.Utilizar Software de Aplicación para el Diseño de Páginas Web 5. • Planificación de la página • Aunque anteriormente ya habías pensado en la estructura de tu página Web.¿De qué ramo empresarial va a ser tu sitio Web? ____________________________________________________________________________ ___________________________________________________________________________ 2.. 1.3 DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN.

. Ingresa a Dreamwever. 4. Si te surgen dudas consulta con tu profesor.. 1. 2. Registra el nombre de tu sitio. una vez creado el sitio. Selecciona la carpeta en donde lo mas a almacenar. Clic en guardar. empezarás a crear cada una de las páginas Web que integrarán tu proyecto.¿Qué tipo de información vas a publicar en tu sitio Web? ____________________________________________________________________________ ___________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________ 4. En la siguiente ventana da clic en Más… 82 .¿Por qué seleccionaste ese tipo de empresa? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________ Sigue los pasos que a continuación se te indican para que empieces a crear tu sitio web. 3.Utilizar software de aplicación para el diseño de páginas Web 3. Diseño de una Página Web Lo primero que debes hacer cuando vas a diseñar una página Web es crear tu sitio.

ya que esta será tu página principal. como se muestra en la imagen. 2.Selecciona la carpeta de tu sitio que ya creaste. 3. barra lateral izquierda.. Además.Clic en Crear.-Enseguida debes seleccionar el diseño 2 columnas fijas. ESTE ES EL DISEÑO QUE VA A TENER TU SITIO WEB: 1.Utilizar Software de Aplicación para el Diseño de Páginas Web Crearás una página de HTML.. ya que en este caso las páginas serán estáticas.. para más facilidad. puedes usar uno de los diseños predefinidos de Dreamweaver.Guarda con el nombre de index. 1. 2.-Debes indicar a Dreamweaver que el diseño de la página debe de hacerse en una hoja independiente.Clic en archivo 2.. 83 .

que normalmente es donde se definen los aspectos generales del texto. Estas son todas las reglas de estilo que hay en la hoja. Vas a cambiar las reglas del body. 84 . te irás al Panel Estilos. el diseño de tu página. Debes hacer doble clic en body para editarlo. para dejarla de acuerdo a como quieres.Utilizar software de aplicación para el diseño de páginas Web Ahora vas a modificar. Para hacer eso.

además de las propiedades del fondo. Por ejemplo.Utilizar Software de Aplicación para el Diseño de Páginas Web A continuacion se presenta el editor de propiedades de CSS. desde aquí puedes cambiar cualquier propiedad. aquí cambiarás el tipo de fuente y propiedades. Deberás justificar el texto. 85 .

El margen (margin) Auto en ambos lados (Right. Left) se encarga de centrar el elemento en la ventana. por lo que será ahí donde establezcas el ancho de página. dando doble clic sobre container. Tienes que editar la regla. si lo quieres separar del borde También. Puedes darle algo de margen arriba (Top) y abajo (Bottom).Utilizar software de aplicación para el diseño de páginas Web Ahora ajustarás el ancho de página. Todos los elementos están dentro del div con la clase container. lo debes cambiar al tamaño que necesites. El ancho lo encontrarás en las Propiedades de cuadro. 86 . puedes crear un borde alrededor.

seleccionas sidebar1 e introduces directamente el ancho modificado. como estaba anteriormente. se ve el borde a los lados y la columna de la derecha se ha ido hacia abajo.Utilizar Software de Aplicación para el Diseño de Páginas Web Enseguida puedes observar cómo va quedando en el navegador. esto se debió a que las columnas tienen un ancho fijo y al reducir el ancho general ya no caben en horizontal. Para eso puedes dar clic sobre las reglas de sidebar1 y reducir el ancho del cuadro. Verás que como el ancho es menor que la ventana. o directamente en estilos. Tienes que editar su ancho y reducirlo un poco. por lo tanto tienes que ajustar su ancho de nuevo para que la columna de la derecha se muestre de nuevo junta. 87 . El div con la clase sidebar1 es el que forma la columna. en Actual.

88 . esto lo encontrarás en la clase content.header). El ancho total es de 800 pixeles. Bien al principio de esta página puedes distinguir tres elementos principales de diseño: el encabezado (. y como la columna anterior le asignaste 140 pixeles. la columna izquierda con el menú (.sidebar1) y una columna principal a la derecha con el contenido de la página. aquí solo te quedan 660 para esta columna.Utilizar software de aplicación para el diseño de páginas Web También debes cambiar el ancho de la otra columna.

Utilizar Software de Aplicación para el Diseño de Páginas Web PERSONALIZA TU PÁGINA Ahora deberás personalizar cada uno de los elementos de tu página. y aquí debes cambiar el texto por el de tu página. Lo que si debe aparecer en la cabecera es el h1. debes continuar editando el estilo del encabezado. por lo que habrá que moverlo ahí. 89 . Empieza por borrar el logo. solamente selecciona el enlace que contiene a la imagen y presionas la tecla Suprimir. en este caso le quitarás el color de fondo y le darás un margen inferior. Ahora.

90 .Utilizar software de aplicación para el diseño de páginas Web Enseguida deberás crear una nueva regla CSS para el h1 que esté dentro del encabezado (header h1). Para eso. darás clic en el botón Nueva regla CSS Seleccionas o das clic en menos específico y seleccionas aceptar.

se incluirá como fondo de encabezado. Para eso te irás a fondo.Utilizar Software de Aplicación para el Diseño de Páginas Web PARA COLOCAR UNA IMAGEN EN EL TÍTULO. REALIZA LOS SIGUIENTES PASOS: Para incluir una imagen en el título. por lo que habrá que ajustar la posición manipulando el Padding. seleccionarás Examinar Cuando hayas asignado los cambios das clic en Aplicar. 91 . pero en vez de ponerla directamente. Te darás cuenta que la imagen quedó como fondo. pero en el ejemplo queremos que quede arriba.

de hecho sólo se dejará el menú y se eliminará la columna de la izquierda que no se va a utilizar.Utilizar software de aplicación para el diseño de páginas Web Continuando con el diseño de la página. se modificará la columna de la izquierda. 92 . Para eso se selecciona el texto de la columna de la izquierda y se elimina.

Para que puedas cambiar los vínculos tienes que hacer lo siguiente: 1. Quedando como se muestra a continuación: 93 ..en la barra de propiedades puedes agregar el archivo al cual quieras dirigir el vínculo..selecciona el vínculo que quieres modificar 2. se deben cambiar los títulos del menú de acuerdo al proyecto que estés presentando.Utilizar Software de Aplicación para el Diseño de Páginas Web MODIFICAR LOS VÍNCULOS A continuación. es decir los nombres de las páginas que se abrirán al dar clic en un enlace.

Utilizar software de aplicación para el diseño de páginas Web Enseguida se debe modificar. 94 . por lo que habrá que quitar el ancho. en el caso del ejemplo se usará un alto fijo. Además. La regla que afecta a los enlaces del menú es ul. el borde del menú de la izquierda. para que no sobresalga el cuadro.nav a En la imagen puedes ver que el ancho era mayor que la columna. para que el texto no quede pegado se usa el padding.

que también tienen sus estilos definidos.Utilizar Software de Aplicación para el Diseño de Páginas Web Se utilizará una imagen de fondo para dar el efecto de cambio de color en los botones. Aquí deberás ajustar Margin y Padding a tus necesidades. 95 . Además los elementos de lista están dentro de una lista.

Esto lo deberás hacer con la pseudoclase: hover. 96 . Aunque ya se tiene una regla para ello. Para que el usuario de la página perciba que un elemento de menú se puede presionar. se puede cambiar su estilo cuando el cursor está encima de él. la editarás para hacer modificaciones.Utilizar software de aplicación para el diseño de páginas Web Además le quitaremos el color de fondo del sidebar1.

97 . Se da clic en Editar regla. Luego en el triángulo invertido de Regla de destino.Utilizar Software de Aplicación para el Diseño de Páginas Web Además se creará otra regla que cambie los elementos de lista (li) cuando tengan el cursor encima. Para crear esa regla se dará clic en CSS de Propiedades. Posteriormente. Posteriormente se selecciona la opción <Nueva regla CSS>. que en el caso del ejemplo es . se selecciona el botón Menos especifico y se introduce el nombre del selector.nav li:hover.

revisa como queda tu página Web.Utilizar software de aplicación para el diseño de páginas Web Solamente se cambiará color del fondo y del borde. el Después de estas modificaciones que hiciste. y el resultado será algo como la siguiente pantalla: 98 .

99 . Esto lo realizarás usando una imagen de fondo. Lo primero que harás es usar una imagen para crear un pequeño degradado en la parte superior.Utilizar Software de Aplicación para el Diseño de Páginas Web MODIFICANDO LA COLUMNA DE CONTENIDO PRINCIPAL A continuación. trabajarás con la columna del contenido principal de la página: La clase .content es la que define el estilo de esta columna.

seleccionarás el color para la fuente y el margin. para lo cual crearás una <Nueva regla CSS> Seleccionas Editar regla y en Tipo de selector eliges Etiqueta (redefine un elemento HTML) Una vez hecho esto. 100 .Utilizar software de aplicación para el diseño de páginas Web Posteriormente editarás los encabezados.

Utilizar Software de Aplicación para el Diseño de Páginas Web

Para finalizar con los elementos de maquetación, se modifica el pie.

HASTA ESTE MOMENTO, TU CONTINUACIÓN:

PRIMER PÁGINA QUEDARÁ COMO SE MUESTRA A

Posteriormente, debes guardar tu página para asignarle el nombre que le corresponde.

101

Utilizar software de aplicación para el diseño de páginas Web

ACTIVIDAD 10 Después de haber leído el texto DISEÑO DE UNA PÁGINA WEB, responde las preguntas que a continuación se presentan:

1.- ¿Qué es lo primero que tienes que hacer cuando vas a diseñar una página Web? ____________________________________________________________________________ 2.- Menciona los pasos que tienes que seguir para crear tu sitio Web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 3.- ¿En qué panel modificas el diseño de tu estilo? ____________________________________________________________________________ 4.- ¿En dónde se definen los aspectos generales del texto? ____________________________________________________________________________ 5.- ¿Para qué sirve el editor CSS? ____________________________________________________________________________ 6.- ¿En dónde estableces el ancho de página? ____________________________________________________________________________ 7.- ¿Qué función tiene div con la clase sidebar1 ? ____________________________________________________________________________ 8.- ¿Qué pasos tienes que seguir para insertar una imagen de fondo en el encabezado? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 9.- Menciona los pasos tienes que seguir para modificas un vínculo: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 10.- Menciona los pasos tienes que seguir para modificar la columna principal: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________

102

Utilizar Software de Aplicación para el Diseño de Páginas Web

ACTIVIDAD INTEGRADORA PARTE 2 Vamos a continuar con la segunda página que en este caso es “QUIENES SOMOS” según los enlaces creados en la pagina inicial. Sigue los pasos que aquí se te indican y modifica la página con tu información.

1. Clic en archivo 2. Clic en nuevo 3. Selecciona columna fija centrada, encabezado y pie de página.

1. Te va a proporcionar una plantilla de este tipo. 2. Aquí puedes hacer las modificaciones necesarias para armar tu segunda página. 3. Agrega el logotipo, encabezado y como pie de página los datos de quienes la elaboraron. 4. Puedes seguir los pasos de la página principal que ya elaboraste o la puedes elaborar con sólo copiar-pegar.

103

Clic en Archivo Clic en guardar como. Es recomendable que el nombre sea parecido al del enlace.Utilizar software de aplicación para el diseño de páginas Web YA MODIFICADA LA SEGUNDA PÁGINA DEBERÁ QUEDAR ASÍ: 1. 104 . 3. 2.

encabezado y pie de página. Te va a proporcionar una plantilla de este tipo. Selecciona columna fija centrada. Clic en archivo 2.Utilizar Software de Aplicación para el Diseño de Páginas Web ACTIVIDAD INTEGRADORA PARTE 3 Vamos a continuar con la tercera página que en este caso es “TARIFAS” según los enlaces creados en la página inicial. 1. En esta página se va a diseñar la tabla para la tarifa de precios. 2. Agrega el logotipo. Sigue los pasos que aquí se te indican para insertar una tabla y modifica con tu información. Clic en nuevo 3. 1. 105 . 3. encabezado y como pie de página los datos de quienes la elaboraron.

6. Seleccionas el número de columnas Seleccionas el número de filas Seleccionas el ancho de la tabla.Utilizar software de aplicación para el diseño de páginas Web El proceso para insertar una tabla es muy sencillo. 2. 3. 106 . Clic en el menú Insertar Seleccionas Tabla. se pueden combinar las celdas para mejorar el aspecto de la tabla. 4. Para combinar las celdas sólo se seleccionan las celdas a combinar y se da clic en el botón que aparece indicado en la imagen de abajo. 1. Te muestra la tabla como la de la imagen y lo que sigue es rellenar la tabla y posteriormente editarla. Clic en Aceptar. Además. 5.

Estilos CSS y finalmente das clic en el botón Nueva regla CSS. A continuación. crearás una clase para definir los estilos de la tabla. 107 .Utilizar Software de Aplicación para el Diseño de Páginas Web . para darle un mejor aspecto. Para eso se seleccionará <table>.

la alineación del texto (en bloque). En Nombre del selector se introduce un nombre. el fondo. Dejando un aspecto parecido al de esta tabla: 108 . se selecciona Clase (puede ser aplicable a cualquier elemento HTML).Utilizar software de aplicación para el diseño de páginas Web Enseguida. en el caso del ejemplo será Tarifas. el cuadro. Se edita el tipo de fuente. el estilo de borde. en Tipo de selector.

.Menciona la opción que tienes que utilizar para crear una nueva regla y poder crear una nueva clase para la tabla: ________________________________________________________________________ 3..Utilizar Software de Aplicación para el Diseño de Páginas Web TU TERCERA PÁGINA TERMINADA DEBE QUEDAR ASÍ: ACTIVIDAD 11 Después de haber leído la sección que corresponde a la actividad integradora.Menciona los pasos que tienes que seguir para insertar una tabla: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________ 2. parte tres.. responde las preguntas que a continuación se presentan: 1.¿Qué opciones puedes modificar con la nueva regla creada? ________________________________________________________________________ ______________________________________________________________________ 109 .

Insertar un Formulario de Contacto 1. encabezado y como pie de página los datos de quienes la elaboraron. Selecciona columna fija centrada. Sigue los pasos que aquí se te indican y modifica con tu información. encabezado y pie de página. Clic en nuevo 3.Utilizar software de aplicación para el diseño de páginas Web ACTIVIDAD INTEGRADORA PARTE 4 PUEDES AGREGAR UN FORMULARIO DE CONTACTO EN UNA PÁGINA NUEVA. Clic en archivo 2. Agrega el logotipo. 110 . 1. 3. En esta página se va a diseñar la tabla para la tarifa de precios. Te va a proporcionar una plantilla de este tipo. 2. El proceso para insertar una tabla es muy sencillo.

Indica el número de columnas y filas que necesites. Clic e insertar 2. Clic en formulario. 1. Clic en tabla 3. para organizar los campos del formulario deberás utilizar una tabla. 4. Clic en aceptar 111 . Una vez que ya definiste el elemento de formulario. En un formulario debes indicar una Acción. Clic en menú insertar 2.Utilizar Software de Aplicación para el Diseño de Páginas Web 1. La página que se encargará de recibir y tratar la información introducida por el usuario.

E-mail y Fecha de Reporte seleccionas: campo de texto. • para Problema seleccionas: Área de texto.Utilizar software de aplicación para el diseño de páginas Web Una vez insertada la tabla introducimos los controles necesarios: 1. Finalmente deberás cambiar los estilos de borde. Tiene que quedarte un aspecto parecido al de la imagen. • Para Tipo de equipo seleccionas: Botón de opción. por ejemplo: • Para el Nombre. • Para Respaldo de información seleccionas: Casilla de verificación. Clic en Insertar 2. etc. fuente. • Para el Botón de Enviar seleccionas: Botón. Seleccionas el control correspondiente. Formulario 3. fondo. 112 . marco. Clic en. para modificar el formato del formulario.

Esa página debe tener la terminación php. HASTA AQUÍ TU FORMULARIO DE CONTACTO EN LA PÁGINA CUARTA. QUEDA COMO SE MUESTRA EN LA SIGUIENTE IMAGEN.Utilizar Software de Aplicación para el Diseño de Páginas Web Recuerda que para el formulario de contacto definiste una Acción. 113 . por lo que para que funcione esta acción deberás crear una página la cual será la que recogerá la información del usuario.

Modifica solo las regiones editables de título y contenidos. Para eso debes utilizar la misma plantilla que has estado utilizando. Clic en nuevo 3. 1. Sigue los pasos que aquí se te indican y modifica con tu información. encabezado y pie de página. 114 . Clic en archivo 2. ya para terminar tu sitio web. Selecciona columna fija centrada. Insertar una galería de imágenes Por último.Utilizar software de aplicación para el diseño de páginas Web ACTIVIDAD INTEGRADORA PARTE 5 Puedes agregar una galería de imágenes en una página nueva. deberás crear la página para mostrar la galería de imágenes.

Ahora insertarás una imagen antes de cada encabezado. Para eso solo te colocas antes del encabezado de cada equipo de cómputo: 1. 3. 2. seleccionas la imagen que vas a colocar de tu carpeta de imágenes. donde previamente las habías guardado. seleccionas imagen. Clic en Aceptar.Utilizar Software de Aplicación para el Diseño de Páginas Web Así quedaría tu página antes de insertar las imágenes. 115 . 4. Clic en el menú Insertar.

El siguiente paso será algo que hasta este momento has realizado en el diseño de todas las páginas. Debes irte a Estilos. Para aplicarle los estilos necesarios de manera que se muestre como quieres. 5. 116 . bloque) para dar la apariencia que deseas. debemos asignarle comportamientos a la imagen. es que al pasar el cursor sobre el texto de la imagen. 2. Después seleccionas el botón Nueva reglas CSS 3. En Definición de regla seleccionas (Sólo este documento). se le debe asignar un ID y crear los estilos necesarios para que se muestre como quieres. Para poder identificar la imagen para asignarle comportamientos. 1.Utilizar software de aplicación para el diseño de páginas Web La intención de esta página Web. deberás crear una nueva regla para esta foto. es decir. 4. Finalmente das clic en Aceptar. cuadro. el modificar los estilos (fondo. borde. seleccionas el nombre del ID que asignaste a la imagen. En nombre de selector. se cambie y muestre la imagen de la computadora correspondiente.

lo primero que se debe hacer es elegir que elemento (encabezado o párrafo) ejecutará el comportamiento.. Para poder hacer eso.Das clic en Insertar. Para agrupar en un div.. 2.Seleccionas los dos elementos (encabezado y párrafo). la imagen la debes colocar a la derecha. 117 . Para poder hacer uso de los comportamientos. el procedimiento es sencillo: 1. seleccionas Objeto de diseño y finalmente das clic en Etiqueta Div. Lo siguiente será hacer que la imagen cambie cuando el cursor pase por el párrafo de otra computadora. De tal manera que cuando pases el cursor por la zona de la computadora en cuestión se cambie la imagen. estos dos elementos se agrupan en un div.Utilizar Software de Aplicación para el Diseño de Páginas Web Hasta aquí tu página debe ir de esta manera. Para evitar problemas y como tienes encabezado y párrafo en cada computadora. utilizarás los Comportamientos.

das clic en el icono que aparece en forma de + y eliges un comportamiento. das clic en Aceptar.Utilizar software de aplicación para el diseño de páginas Web 3. En el listado de comportamientos disponibles. Ahora.. que es el de Intercambiar imagen.Para finalizar la Etiqueta Div. vas a encontrar el que necesitas para tu página web. 118 . lo que tienes que hacer es abrir el panel Comportamientos. que se encuentra en el menú de ventana Enseguida.

que es la única que tiene asignado un ID y eliges la imagen que la sustituirá. te aparece una ventanita donde debes seleccionar la imagen a cambiar. FINALMENTE.Utilizar Software de Aplicación para el Diseño de Páginas Web Después de esto. Como se puede ver en la imagen siguiente. Se debe hacer el mismo procedimiento con cada párrafo y cada imagen para que cambie el comportamiento. 119 . LA PÁGINA QUINTA QUEDA COMO EN LA SIGUIENTE IMAGEN: Al pasar el cursor por otro párrafo automáticamente cambia la imagen.

Utilizar software de aplicación para el diseño de páginas Web Con esto. 120 . estilos y muchas cosas más que pudiste practicar. habrás finalizado tu sitio Web. con las diferentes paginas de enlace. comportamientos. formularios de contacto. con tablas.

por si es necesario establecer comunicación con ellos. sobre un negocio. 5. marcos. imágenes.En todas las páginas debes aplicar estilos.. comportamientos en las imágenes.. colores de fondo.Una plantilla de diseño.Todas las páginas deben contener encabezados. texto. en cuanto a tipos de letra.Utilizar Software de Aplicación para el Diseño de Páginas Web A partir de este momento ya te corresponde a ti seguir explorando el Dreamweaver para seguir aprendiendo más acerca del diseño de páginas web. título. columnas.. las páginas deben ser agradables a la vista y presentar calidad en su diseño 6. 121 . bordes. ACTIVIDAD INTEGRADORA ÚLTIMA PARTE En trabajo colaborativo como proyecto final deberás presentar un Sitio Web diseñado en Dreamweaver. que crearás y que te servirá de base para tus diferentes páginas web. la distribución de las columnas. porque tendrás que diseñar tu propio proyecto de Sitio Web utilizando varias páginas y las diferentes opciones como mínimo que hasta el momento practicaste. que tengan buena apariencia. deben aparecer los datos de los diseñadores. Sitio que deberá contener lo siguiente: 1.. 2. con información de contacto.En las diferentes páginas que crearás debes manejar en algunas o todas según sea tu elección: Imágenes.4 páginas web que se enlacen desde una página principal. Es decir. 4. y además.. formularios de contacto.En alguna de las páginas. empresa o institución de servicios.. es decir. 3. tablas. imágenes.

Código Título Elementos: Nivel Referencia Intento de evaluación 1 Código Intento de evaluación 2 Título Intento de evaluación 3 No Domina el Contenido Con letra Con número Domina el Contenido Juicio de la Evaluación del módulo 1 122 . NOMBRE DEL EVALUADOR: NOMBRE DEL CANDIDATO: INFORMACIÓN GENERAL PARA EL PROCESO DE EVALUACIÓN FECHA DE APLICACIÓN: IECL Código Título Perfil de la NTCL que se evalúa Unidad: Diseñar páginas web en lenguaje HTML Diseñar páginas web en lenguaje HTML.Utilizar software de aplicación para el diseño de páginas Web I. Utilizar software de aplicación para el diseño de páginas web Publicar páginas web.

SÍ NO N/A SÍ NO N/A 123 . Lleva a la práctica el diseño de la página Web. etc. listas. Los colores que maneja tienen contraste y permiten leer la información que muestra la pagina. Elige un tema para desarrollar su página Web. Presenta el bosquejo del diseño de su página Web Trabaja colaborativamente 2. CONTENIDO Entregó en tiempo y forma. Los encabezados. CONTENIDO Entregó en tiempo y forma.1 CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR UNA PÁGINA WEB. Trabaja colaborativamente. 2.3 DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN. párrafos.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB.Utilizar Software de Aplicación para el Diseño de Páginas Web 2. Estética: El diseño y combinación de colores son adecuados. Define claramente las imágenes y sus ubicaciones. Presentan los mismos estilos de las imágenes. están identificadas y referenciadas. Define la estructura de la página Web Selecciona información relevante para la página Web. Las imágenes presentan un tamaño adecuado.