Recommandé
Contenu connexe
Tendances
En vedette
Similaire à Sesion3 curso avanzado SPIPEDU
Similaire à Sesion3 curso avanzado SPIPEDU (20)
Dernier
Dernier (20)
Sesion3 curso avanzado SPIPEDU
- 1. TERCERA SESIÓN – 16 FEBRERO 2009 – CEP Alcalá de Guadaira 1. Seguimos con la de Edición de Esqueletos 2. Profundización en CSS 3. Debate sobre Mejoras en los Modelos en el WIKI http://www.spipedu.es/ayuda PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es hapaxmedia.net / licencia creative commons BY ES 2.5 /
- 2. PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es 1. GLOSARIO DE SPIP Interfaz Pública / Interfaz Privada squelettes / ecrire Redactores | Administradores | Administradores Restringidos auteur Secciones y Subsecciones rubriques Artículos articles Breves breve Palabras Claves mot clés Sitios Referenciados sites Buscador Estadísticas Sindicación de Contenidos Foros o Comentarios Agenda contenidos estructura hapaxmedia.net / licencia creative commons BY ES 2.5 /
- 3. EDITAR ESQUELETOS La edición de esqueletos es un PLUGIN activado en el MODELO 1 y MODELO 2 Permite que modifiquemos sustancialmente el diseño de nuestra página web. IMPORTANTE Sólo se recomienda el uso de este con conocimientos de · Sintaxis HTML · Sintaxis SPIP http://spip.net/@ · Sintaxis CSS 1. Edición del sitio 2. Botón Editar Esqueleto 3. Elegir Archivo a editar Manual de HTML http://www.desarrolloweb.com/manuales/21/ PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es
- 4. PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es El editor de esqueletos tiene orden alfabético Nos encontraremos diferentes archivos: - imágenes - html - css Recuerda tener siempre un “backup” de lo que quieras modificar EDITAR ESQUELETOS
- 5. PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es EDITAR ESQUELETOS MODELO 1 Visualización de página no existe. Control de la agenda Cómo se ve el artículo Plantilla del Blog Plantilla del Artículo en la sección Blog Cabecera. Aunque la imagen de la cabecera se controla en la parte interna Comentarios
- 6. PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es EDITAR ESQUELETOS MODELO 1 Menú de la columna derecha Menú de la columna derecha en la sección blogs Menú de Inicio de la columna derecha Menú de la columna izquierda Visualización de contenidos de las palabras clave. Pie Hoja de Estilo principal Página principal del sitio web. La portada de la página
- 7. PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es EDITAR ESQUELETOS MODELO 2 Barra Horizontal debajo de la cabecera Menú de la columna derecha - barra_lateral.html Página principal del sitio web. La portada de la página
- 8. INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es CABECERAS. INFORMACIÓN DE CONTACTO 1. Logotipo del Sitio = Cabecera (815 × 185 píxeles ) 2. Nombre de tu sitio 3. Dirección URL 4. Descripción del sitio = Dirección física | Teléfono 5. Correo electrónico del centro
- 9. INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es 3 maneras de incluir estilos: - inline: <input style=”border:1px solid black;” type=”text”> - etiqueta: <head> ... <style> border : 1px solid black; </style> … </head> - archivo .css: input { border: 1px solid black; } CSS (Cascading Style Sheets) Sintaxis : selector { atributo: valor; } Selector : sobre que elementos queremos trabajar Atributo : identifica a que estilo nos referimos Valor : como queremos que sea el atributo
- 10. INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es div { font-size: 18px; color : #000; } CSS (Cascading Style Sheets)