Página principal - File CSS - Piensa en tu sitio - Preparar archivos - Publicar

El modelo para crear páginas principales

Pueden ver aquí cómo funciona este modelo, porque lo tienen delante de sus ojos. Pero existe la necesidad de profundizar en la disposición de las zonas, una dentro de la otra, a fin de obtener esta distribución. Este párrafo primero no es realmente necesario para explicarlo, porque se podía copiar y pegar el archivo de esta página como un nuevo archivo .htm, y si es necesario, cambiar la dirección de sus vínculos con CSS, y los enlace a las páginas que desea que aparezcan en el menú o en el centro . Sin embargo le damos esta información, en caso de que desee modificar la forma de esta página. De hecho, alguien podría no querer e limitaciones de largo, o querer de cambiar posición de menú, fondos y más. Por lo tanto, deben leer cuidadosamente esta sección y comprender bién su contenido.

a) como primera cosa pongase un contenedor genérico, para centrar en la pantalla otras zonas ubicadas en su interior. De hecho creo que nos gustaría nuestras páginas siempre se centrarían en la pantalla del navegador, y no colocadas a la izquierda ..

Llamamos a este caso "cornice" y collochiamolo como una etiqueta div después del TAG <body>. Dentro de "cornice" se deben poners todos los demás elementos. A continuación, para distinguir más fácilmente inicio y fin de las áreas anidadas, vamos a utilizar diferentes colores de fondo.

ESTO POR DEBAJO ES EL ESQUEMA DE COMPLETO: podría haber sido más fácil, pero cuando lo hice estaba todavía aprendiendo. Lo siento. Pero funciona bien.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><!---place here metatags, css links, and other head elements ---></head>

<body>

<div id ="cornice">

<div id ="testata">

Aquí se deben crear una imagen de fondo y un logotipo. El color o el fondo de la cabeza, el acho y el largo y el tamaño se establecen con el uso de CSS. Para colocar el logotipo, podemos colocarlo con otra div interior aqui, o en una tabla de una fila y una columna. Nuestra cabeza debe ser tan ancha como la pantalla completa, a menos que se quiere fijar entre la próxima div 'cuerpo'. Ahora se pone fuera.
</div>


<div id ="corpo">

'Corpo' se centra con una instrucción particular en la hoja de estilos adjunta. La anchura de este div se debe establecer de acuerdo con las pantallas más populares entre los usuarios de Internet, actualmente 1024x768px. Para ello, se deberia establecer el ancho en el rango 960 - 980px a 670px de altura máxima. Incluyendo la 'cabeza', la altura total de la página no debe ser superior a 740px de altura o superior del total establecido.

<div id="perbutton">

Este div se utiliza para diseñar algunos botones sociales para compartir; y junto a un menú horizontal en la parte superior derecha.

<div id="bottoni"> Aquí tenemos una lista no ordenada <ul> y comandos que se utilizan para mostrar los botones con el fin de compartir la dirección de esta página </div>
<div id="top_menu">cerca de los botones hemos puesto este espacio para insertar un iframe reservado para acomodar un menú horizontal superior </div>

</div>

<div id="center_container">En aras de la simplicidad, hemos incluido aquí una tabla con dos columnas, de tamaño para dar cabida a dos distintos iframe: además, después de la tabla, hemos creado un espacio para un menú menos lineal

aqui la tabla de una línea y dos columnas
aquí pongamosun iframe
con nombre =leftmenu
width="220" height="575"

aquí otro iframe con nombre =rightside
width="100%" height="575"

<div id="bottom_menu">

sirve para dar cabida aquí para un iframe llamado botmenu que contiene el menú de la parte inferior, desde la que se puede abrir la página principal en varios idiomas (el target debe ser = "_ top")

</div>

</div>

</div>

</div>

</body>

</html>

Supongamos que usted sabe lo que quiere, ya que el sistema está diseñado para añadir a esto los archivos de nuestro sitio y, por último, que hemos construido el menú y las otras páginas basadas en la específica de cada tipo de modelo propuesto. Cuando uno ha preparado las mayoría de las páginas que pondrá en las carpetas del sitio, puede hacer lo siguiente:

B ) CSS, que significa "Cascading Style Sheets"

Desde Wikipedia nos enteramos de que, en informática, CSS es un lenguaje usado para definir el formato del HTML, XHTML y XML de los sitios y páginas web, y que la composición de las reglas CSS son directrices (Recomendaciones) emitidas desde 1996 por el W3C.
Usar CSS es esencial para separar el contenido de las páginas de su formato, permitiendo a los usuarios a los autores una forma de programación más clara y fácil de usar, mientras que proporciona la posibilidad de reutilización de código y su fácil mantenimiento.
Un archivo CSS contiene las directrices para el procesador que establecen las características de los diferentes elementos identificados por un nombre en una página, y las normas o instrucciones y comandos. Se puede utilizar de muchas maneras.

1) por medio de archivos CSS externos, vinculados a la página individual, por ejemplo, con las instrucciones de este tipo

<link href="../../stylesheets/pagina_con topmenu.css" rel="stylesheet" type="text/css" />

que se sitúa entre las etiquetas <head> ....<head>. Para simplificar se intenta realizar una hoja de estilo única, con elementos relacionados con todas las páginas del sitio recurrentes. Se puede aplicar a todas las páginas que tienen en sus cuerpo uno o más artículos con nombres modelados en la CSS. Si se conecta la hoja a una página, todos los nombres y las voces de las hojas de estilo en una página se formaterán para estas partes.

2) proporcionando instrucciones en la propia página entre las etiquetas <head> ....< head>

<style type="text/css">
......................
ponemos aquí un bloque de código
..................
</style>

3) proporcionar instrucciones en la propia página entre las etiquetas <body> y </ body>. De hecho, en las páginas que hay elementos que se pueden formatear con instrucciones HTML directo,  y elementos que se pueden formatear con las instrucciones que le dan el llamado estilo en línea, o con ambos. algunos ejemplos

Hay muchas posibilidades para cambiar el formato de los elementos en las páginas HTML. Recordemos que la última instrucción que el procesador lee en la sucesión de líneas de código es la que se aplica.
Así que usted puede cambiar una sola pieza de la página en una línea de la página, mientras que el CSS en general sigue siendo el mismo. Si se desea explorar las posibilidades, se puede leer y controlar las diferentes páginas de código de terceros con las herramientas de desarrollo a través del navegador.

Aquí me permito sugerir que la mejor solución para establecer las propiedades CSS de objetos es usar un editor como Adobe Dreamweaver, lo que le da la ayuda en línea, y le permite elegir, al escribir, instrucciones permitidas para cada tipo de etiqueta

A PROPOSITO DI CLASSI

En una hoja de estilo se pueden adoptar interesantes toma de solución de estilo de los elementos de la página por parte de otros elementos con un nombre, es decir las clases. Una clase es un elemento de estilo que se puede aplicar a casi todos los TAG.
Vemos un ejemplo de clase, señalando que las declaraciones entre { } terminan con el carácter; podría todo ser escrito en una sola línea, al igual que con la mayoría de las líneas.

.td1 {
background-image: url(../immagini/pansoff.png);
height: auto;
border-top-left-radius: 15px; border-top-right-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;
text-align: center; font-family: Arial Narrow; font-size: medium;
}

En esta clase se configura una imagen de fondo, el tipo de letra, el tamaño, la alineación y la forma y apariencia de la celda de la tabla. Es decir, esta clase se puede aplicar a una sola celda en una tabla que está entre <td> ..... </ td>, o un DIV, un párrafo <p> .... </ p>

<div id="zone1" class="td1"> div content .....</div>

Todo podría ser posible, solo necesita experimentar.

C ) PIENSE SU SITIO

En primer lugar, usted ha leído este manual? Si es así, usted sabe que se debe planificar cuidadosamente la forma y el contenido de lo que ha de ser producido.
Anote sus ideas, teniendo en cuenta los modelos que tiene disponibles. Utilice un editor dedicado o como usted prefiera.
Yo siempre recomiendo seguir la regal 5W1H al diseñar algo. por ejemplo, incluso si este sitio no tiene fines comerciales, puede ser adaptado. Si en algún momento desea grabar los usuarios y hacerles firmar para una contribución para leer, o para descargar elementos a través de PayPal o tarjetas de crédito, se le permitirá llevar a cabo esta función mediante la introducción de software en algún lugar de una rightzone de su página.

En segundo lugar, supongamos de ser un escritor, que desea publicar su trabajo. Éstas son sólo algunas pocas ideas sobre cómo organizar su sitio. Usted no debe modificar las carpetas y archivos del sitio básico que ha descargado y descomprimido; sólo tiene que añadir nuevas carpetas y establecer allí su nuevos archivos.
No está prohibido, pero en general no es aconsejable combinar los archivos y carpetas a las existentes. Con referencia a la estructura que hemos descrito en los "modelos" de párrafo - ver el menú de la izquierda - no debe cambiar la estructura, pero para agregar archivos y carpetas de acuerdo con este y los demàs modelos

<
Miosito      Site's folder
|--- index.htm index file - inglés
|--- main_framepage_f.htm

francés
|--- main_framepage_i.htm italiano
|--- main_framepage_s.htm español
 |  
|--- htmpages  

carpetas con páginas htm

 |    |      
 | |---- horizmenus menu orizzontali
 |    |      
 | |---- simples páginas simples
 |    |      
 | |---- vertmenus  menu a columna
 |    |      
 | |---- withmenus páginas complejas deslizan bajo un menú fijo en la parte superior
 |        
 | immagini   Carpetas y subcarpetas para imàgenes  
 |        
 | stylesheets   carpetas de hojas de estilo  
 |        
|--- templates   carpeta de modelos - templates  
 |        
 | entre o por debajo de la anterior añada sus propias
 |        
|--- mynovels    folder with htm pages regarding many novels-fables
 |    |--- n_mainpage.htm página de inicio - mainpage - para los cuentos
 |    |      
 | |---- myhmenus menu en línea
 |    |      
 | |---- simplepag  páginas con estrutura simple
 |    |      
 | |---- myvertmenus menu en columna
 |    |      
 | |---- complexmenus  páginas complejas deslizan bajo un menú fijo en la parte superior
 |    |      
 | |---- downloads   carpeta de archivos de descargar (txtos, pdf, etc)
 |          
Repita la estructura anterior por cada uno de sus libros - novelas largas
 |        
|--- MYBOOK 1    contiene carpetas y páginas que el anterior en relación con un libro
 |    |--- book1_page.htm página de inicio - mainpage - para el libro
 |          
|--- MYBOOK 2   contiene carpetas y páginas que el anterior
 |    |--- book2_page.htm página de inicio - mainpage - para el libro
 |      
Etcétera

Sin embargo, usted puede hacer lo que le gusta, si entiende el sistema y es capaz de comprobar las conexiones entre los archivos .

D ) Consejos para preparar archivos basados en el tipo de sitio adecuado para difundir la obra de un escritor

a) Adaptar el archivo index.htm, de usar como Homepage

Trate de preparar por lo menos una copia de index.htm y en segundo lugar compruebe todas las conexiones en los iframe de index

b)Crear otras páginas principales de cada categoría con la misma planta no es difícil - también se puede duplicar y cambiar los enlaces a páginas derivadas. Lo que importa es ser claro acerca de lo que está haciendo.

Aquí siempre la misma cabecera - comprobar los enlaces para conectar las imágenes y hojas de estilo, ya que el nivel de la posición de esas páginas puede ser diferente de index.htm
Top_side
left_menu right_side
Bot_menu

top_side:si  para una categoría hay entradas de sub-categorías, hay que crear una columna de menú para cada subcategoría . Por ejemplo:

  1. CUENTOS o historias cortas (también si se trata de categoría o subcategoría) 
    • left_menu:comienza con un prólogo en la página de introducción, y luego la lista de títulos de las novelas.
    • righ_ side:el texto de una historia es todo en una página, que tiene un menú interno fijo, que se necesita para llegar a los párrafos sin necesidad de desplazamiento.
  2. LIBROS (también si se trata de categoría o subcategoría)
    • left_menu: empezamos con el prefacio de costumbre y luego con la lista de capítulos
    • righ_ side: un único capítulo de un libro es como una novela, en una sola página, que tiene un menú interno fijo para llegar a los párrafos sin necesidad de desplazarse manual.

E) PUBLICACIÓN

Una vez que lo has probado todo, y navegando a través de su sitio con los navegadores todo funciona bien, puede decidir publicarlo. Usted debe registrarse en un sitio de alojamiento, incluyendo sitios web especializados, comprobando que se adapte a sus necesidades y que dea bastante espacio.
Además, el proveedor también debe admitir el acceso FTP para subir y descargar archivos a su sitio con el editor, y proporcionarle los datos para el acceso FTP, la dirección del servidor FTP, el nombre de usuario y contraseña, por ejemplo.
Para más información, consulte la sección titulada "herramientas de trabajo". También hay que tener en cuenta comisiones y tasas, y lo que va a pasar a los archivos, si por alguna razón uno se olvide de pagar el alquiler del dominio.

Pero, lo más importante de todo es ofrecer a los motores de búsqueda de la mejor manera de encontrar el sitio fácilmente entre millones en la red. En este sentido, se debe utilizar los llamados "meta tags", es decir, las instrucciones de insertar entre la etiqueta <head>...</head> para las arañas de los motores de búsqueda que se están llevando a cabo entre los archivos en internet para clasificar los sitios.

PRINCIPALES TIPOS DE META TAG: palabras clave, descripción, por ejemplo

UN META TAG REALMENTE IMPORTANTE ES EL QUE DICE A LAS ARAÑAS DEL BUSCADOR QUE NO DEBE PARARSE EN LA PRESENTE PÁGINA, SINO QUE EXTENDER LAS INVESTIGACION HACIA LAS PÁGINAS ENLAZADAS.
A SU VEZ ESTAS PÁGINAS CONTIENEN META TAGS.. ASÍ,. DE ESTA MANERA PODEMOS PASAR AL WEB LOS PARÁMETROS DE TODAS NUESTRAS PAGINAS Y EL ENTERO SITIO.

Si uno escribe "INDEX, NO FOLLOW" las arañas no continúan la búsqueda de las páginas después de esto.

SUGERENCIA: cuando se abre un sitio de otros con navegadores. usted puede buscar y ver lo que está disponible en el tipo y número de Meta Tags. O, en sitios especializados, podría estudiar y comprender cualquier otra etiqueta que se puede insertar en su sitio.

Usted también puede abrir la página en pantalla completa, con poner la siguiente declaración, pero que no funciona con la mayoría de los navegadores.

 

Enjoy!