Scribd Logo
Importer

Bienvenue sur Scribd !

  • Instructoria 01 PDF

    Transféré par

    Alfred_Serpas
    32 vues6 pages

    Titre original

    INSTRUCTORIA 01.pdf

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    32 vues6 pages

    Instructoria 01 PDF

    Transféré par

    Alfred_Serpas

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013

    INSTRUCTORIA 01-MAQUETACION WEB BASICA.


    Instructor: Gabriel Alexander Lpez Alvarado. Fecha: mircoles 23 de agosto de 2013. Objetivo: Que el estudiante comprenda como concretar una idea de un diseo en una pgina web, haciendo uso de herramientas como Adobe Dreamweaver CC, un navegador web como Mozilla Firefox e integrarlos en un servidor local como Apache Server. A continuacin se mostraran los pasos para crear una maquetacin bsica de una pgina web. 1- Se debe tener una imagen de referencia, esto se puede hacer mediante un editor de imgenes como GIMP o Photoshop, esos son como ejemplos, aunque se podra realizar en una simple hoja de papel en blanco. 2- Procederemos a abrir nuestro editor de pginas web, que en nuestro caso es Adobe Dreamweaver CC (versin que maneja el instructor).

    3- Procederemos a dar clic donde dice Sitio de la seccin Crear nuevo (la flecha naranja nos indica).

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013

    4- Al dar clic nos saldr una ventana como esta:

    La cual es la ventana de configuracin de nuestro sitio. En primero lugar procedemos a colorarle un nombre a nuestro sitio que en nuestro caso pondremos Instructoria_01, tambin seleccionaremos la ruta donde estar alojado nuestro sitio. 5- Ahora procederemos a configurar nuestro servidor local, para ello es importante tener instalado y activado el software Xampp en nuestro ordenador. Daremos clic en la parte izquierda donde dice Servidores, indicada en la flecha verde. 6- Si hicimos lo anterior bien, nos cambiara el contenido de la ventana:

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013


    La cual nos indica que debemos agregar un servidor que alojar las pginas web creadas. Para aadir un nuevo servidor daremos clic en el iconito de + indicado por la flecha azul. Ahora nos saldr algo como esto:

    Antes de llenar los datos, crearemos una carpeta llamada Instructoria_01 en C:/xampp/htdocs. Ahora ponemos los datos como se muestra en la imagen y presionamos Guardar. Nos saldr algo como esto:

    Si queremos trabajar con un servidor de prueba, y que nuestros proyectos corran ya con apache, marcaremos la casilla que dice De prueba (flecha azul). Ahora solo damos clic en Guardar.

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013

    7- Una vez hecho los pasos anteriores procederemos a crear una pgina html.

    Se crea una pgina con algunas etiquetas por default. Esta es la estructura bsica de nuestra pgina web, iniciando con la nueva etiqueta <!doctype html>, que nos indica que estamos trabajando en un documento html5. Estando en este punto, procederemos a guardar con el nombre de index.html presionando Ctrl + S.

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013


    8- Ahora procederemos a crear la estructura tpica de una pagina web, la cual consta de 4 partes principales que son: Encabezado o header Navegacin. Seccin de contenido. Pie de pgina o footer. Lo haremos usando dentro de la etiqueta body las etiquetas html5 siguientes:

    9- Es momento de poner un poco de color a la situacin con estilos CSS3. Para ello procederemos a crear un archivo llamado styles.css en nuestra carpeta de proyecto.

    Instructorias Maquetacin Bsica HTML5 Y CSS3 2013


    Dando doble clic sobre el archivo styles.css lo abrimos en el editor de Dreamweaver. Ahora procederemos a colocar unas reglas CSS para iniciar a darle forma a la pgina planteada.

    (Cada regla se explicar en la clase). 10Ahora vamos a linkear nuestro archivo.css a nuestra pgina index.html, para ello solo incluiremos una lnea de cdigo el cual va dentro de la etiqueta head, la cual se incluye en el cdigo siguiente:

    Vous aimerez peut-être aussi