Selecciona tema:
- Introducción
- Desarrollo del tutorial
- Advertencia
- Cómo referenciar el tutorial
- Capítulo 1 - HTML y CSS
- HTML y CSS
- Implementación de CSS
- Definición de estilos
- Selectores ID y Class
- Imágenes y CSS
- Alineación en CSS
- Estructura de sitio con CSS
- Capítulo 2 - ASP y PHP
- ¿Qué son ASP y PHP?
- Instalación de IIS
- Instalación de IIS - Win 7
- Instalación de PHP
- Instalación de PHP - Win 7
- Variables en ASP
- Variables en PHP
- Includes en ASP
- Includes en PHP
- Página ejemplo ASP y PHP
- Capítulo 3 - El sitio
- Planeación + Wireframes
- ----------
- ASP - La base
- ASP - Estructura
- ASP - CSS
- ASP - Variables + includes
- ASP - Producción de páginas
- ----------
- PHP - La base
- PHP - Estructura
- PHP - CSS
- PHP - Variables + includes
- PHP - Producción de páginas
- Actualizaciones
- Comentarios
- Donativos
Tutorial HTML Nivel Intermedio
Capítulo 3 - ASP - Estructura de contenidos
La estructura de un sitio consiste en definir la ubicación no sólo de las páginas, gráficos
y archivos de CSS y JavaScript involucrados, sino también de definir la distribución de los
contenidos de cada página.
Los wireframes presentados permiten visualizar la distribución de contenidos y la forma en que cada visitante interectuará con los mismos, además de definir la acción que de ellos esperamos.
La estructura para el pequeño sitio web que se desarrolla en este tutorial, es la siguiente:
Importante: los archivos gráficos del sitio prediseñado, mismos que supongo ya has descargado, debes guardárlos o colocárlos debajo del subdirectorio /tma/imagenes.
Al ser un sitio simple, la estructura respectiva lo es también. tma son las iniciales de todos mis archivos, directorio en que se agrupan todos los archivos que no son página y que se utilizan en el sitio. El objetivo de agruparlos debajo de un directorio es para controlar el acceso que hacen las arañas --robots-- de los buscadores y directorios.
Hasta el momento, nuestro código debe lucir tal cual se presenta a continuación:
Primero vamos a establecer el menú. Utilizaremos, para ello, las etiquetas de una lista desordenada con cuatro opciones.
"Contenido principal" debe ser interpretado como "aquella sección de la página en que aparecen los textos y gráficos de la misma y que le diferencian del resto del sitio".
Es simple, primero debes aplicar los ID y las Clases para, a continuación, aplicarles su estilo respectivo a través de CSS... ajá, la implementación de CSS debería ser considerada algo "on the fly" (ocurre, se crea o implementa en el momento en que se le requiere)... pasemos a hacerlo.
Participa con tus comentarios o lee lo que otros opinan:
Los wireframes presentados permiten visualizar la distribución de contenidos y la forma en que cada visitante interectuará con los mismos, además de definir la acción que de ellos esperamos.
La estructura para el pequeño sitio web que se desarrolla en este tutorial, es la siguiente:
directorio raíz ( / )
+ tma ( /tma/ )
- css ( /tma/css/ )
- imagenes ( /tma/imagenes/ )
- includes ( /tma/includes/ )
En la parte derecha de cada directorio, y entre paréntesis, se agrega la ruta que se manejará para
cada uno de los archivos. Te recuerdo que vamos a utilizar includes
y la forma de los mismos será a través de su característica virtual
con el fin de facilitar las cosas y manejo de los directorios en ASP.+ tma ( /tma/ )
- css ( /tma/css/ )
- imagenes ( /tma/imagenes/ )
- includes ( /tma/includes/ )
Importante: los archivos gráficos del sitio prediseñado, mismos que supongo ya has descargado, debes guardárlos o colocárlos debajo del subdirectorio /tma/imagenes.
Al ser un sitio simple, la estructura respectiva lo es también. tma son las iniciales de todos mis archivos, directorio en que se agrupan todos los archivos que no son página y que se utilizan en el sitio. El objetivo de agruparlos debajo de un directorio es para controlar el acceso que hacen las arañas --robots-- de los buscadores y directorios.
Hasta el momento, nuestro código debe lucir tal cual se presenta a continuación:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">contenidos del menú</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
Observa el código en negritas, pues es ahí donde vamos a implementar la estructura de la
página; fase o acción que bien podrías referenciar como "distribución de contenidos".<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">contenidos del menú</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
El menú
Primero vamos a establecer el menú. Utilizaremos, para ello, las etiquetas de una lista desordenada con cuatro opciones.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
En este momento estamos estructurando o distribuyendo la forma en que los contenidos serán
presentados, así que no nos preocupemos por la forma en que luce hasta el momento, ya que
el siguiente paso o fase será la implementación de CSS para aplicar estilo o apariencia
(en inglés conocido como "look and feel") a tales contenidos: títulos, menú, texto, gráficos.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
Contenido principal
"Contenido principal" debe ser interpretado como "aquella sección de la página en que aparecen los textos y gráficos de la misma y que le diferencian del resto del sitio".
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">
<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>
Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />
Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />
¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>
Podrás notar que hemos introducido, desde aquí, el nombre para IDs y Clases de CSS que
serán utilizados como referencia para aplicar estilos. Los IDs y Clases deben ser definidos
durante la etapa de planeación de tu sitio, de tal forma que asignes nombres y roles para
los mismos.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">
<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>
Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />
Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />
¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>
Es simple, primero debes aplicar los ID y las Clases para, a continuación, aplicarles su estilo respectivo a través de CSS... ajá, la implementación de CSS debería ser considerada algo "on the fly" (ocurre, se crea o implementa en el momento en que se le requiere)... pasemos a hacerlo.
Participa con tus comentarios o lee lo que otros opinan:
Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso
Síguenos en:
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso
Síguenos en: