Pattern - Fichiers CSS - Pensez vôtre site - Preparez les fichiers - Publiez

Patterns des pages principales

Vous pouvez voir ici comment est ce modèle, comme vous l'avez devant vos yeux. Mais il faut approfondir le schéma de l'arrangement des zones nidifiées l'une dans l'autre de manière à obtenir cette organisation.
Ce premier paragraphe ne'a pas vraiment besoin d'expliquer, parce qu'on peut simplement copier et coller ce page d'accueil comme un nouveau fichier .htm, changer ses liens avec les CSS, et en reliant par des menus les pages que vous souhaitez placer dans le mainpage ou sur l'écran.
Cependant nous vous donnons ces infos, dans le cas où vous souhaitez modifier la forme de cette page. Vous voudrez peut-être, en fait, ne disposer pas des limites de hauteur, ou changer de position, antécédents des menus et autres. Alors vous devez ensuite comprendre bien le contenu de ce paragraphe.

a) en tant que premier plaçons un conteneur général, pour centrer les autres zones nidifiées à l'intérieur. En fait, nous pouvons vouloir nos pages toujours être centrées sur l'écran du navigateur, et non pas à flotter de côté gauche.

Appelons "cornice" ce conteneur et allons le placer comme un div après la balise. Dans cette «corniche» nous devrions placer tous les autres éléments. Dans ce qui suit, pour distinguer plus facilement début et la fin des zones encassées, j'ai utilisé des couleurs différentes..

Ceci est le pattern de la page: il aurait été plus simple, mais ensuite je suis encore à apprendre. Pardonnez moi. Mais il fonctionne bien enfin.

<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">

Ici, nous devons définir une image d'arrière-plan et un logo. A propos de l'image ou la couleur de fond de la bande, la hauteur de la bande est réglé par la CSS.
A propos de placer le logo dans'un autre div ici à l'intérieur, on a utilisée une table de 1 ligne et 1 colonne où mettre la bannière. 
Notre testata est large tout l'écran, à moins que nous l'attribuons  au sein de du «corpo» suivant. Maintenant, on l'a mise à l'extérieur.
</div>


<div id ="corpo">

'Corpo' signifie 'body' qu'il est centré avec une instruction particulière dans la feuille ci-jointe. La largeur de corpo doit être réglée en fonction des écrans plus populaires parmi les utilisateurs du Web, c'est â dire 1024x768px. Cela nécessite de fixer sa largeur dans l'intervalle 960 - 980px et 670 px de hauteur max, ce qui, ajouté à 'testata', devrait être moins de 740px pour la page totale.

<div id="perbutton">

on l'utilise pour placer ici quelques boutons de partage social; et un menu horizontal supérieur droit de côté eux.

<div id="bottoni"> voici une liste non ordonnée et les commandes qui servent à afficher les boutons de partager l'adresse de cette page</div>
<div id="top_menu"> près des boutons - nous avons placé cet espace pour insérer un iframe réservé pour accueillir un menu horizontal de face supérieure </div>

</div>

<div id="center_container"> Pour être plus simples nous avons pensé d'insérer ici un tableau avec deux colonnes, dimensionnées pour accueillir deux iframes différents. En plus, après la table, nous fixons l'espace pour un menu de rangée au bas

Cette ci-dessous est la table de 2 colonnes, 1 ligne
nous mettons ici l' iframe
nommé=leftmenu
width="220" height="575"

on met ici l'iframe nommé =rightside
width="100%" height="575"

<div id="bottom_menu">

il sert d'accueillir ici un iframe nommé botmenu avec une page de menu en bas à l'intérieur, à partir du quel on peut changer la mainpage aux différentes langues (le target doit être = "_top")

</div>

</div>

</div>

</div>

</body>

</html>

Supposons que vous savez ce que vous voulez, que vous avez conçu le système du site à ajouter au présent et, enfin, que vous avez menus construits et d'autres pages, conformément à la spécification pour chaque type. Quand on a préparé la plus grande partie de ses propres pages d'être hébergé dans leurs propres cadres, il peut faire ce qui suit:

.

B ) CSS, acronyme pour «Cascading Style Sheets»

En lisant wikipedia nous apprenons que, en informatique, CSS est un langage utilisé pour définir le formatage du HTML, XHTML et XML tels que les sites Web et les pages Web connexes, et que pour la composition de CSS il ya des règles y de lignes directrices établies (Recommandations) émises depuis 1996 par le W3C.

L'utilisation de CSS est indispensable à séparer le contenu et la mise en forme de pages, ce qui permet un moyen de programmation plus claire et facile à utiliser, à la fois pour les auteurs de pages HTML et pour les utilisateurs, tout en assurant en même temps aussi la réutilisation de code et sa maintenabilité plus facile. Le fichier CSS contiennent les directives de traitement pour définir les caracteristiques de plusieurs éléments identifiés et nommés dans la page.

Les règles CSS peuvent être utilisées de plusieurs façons

1) par des fichiers CSS externes, attachés à la seule page avec des instructions comme celle-ci

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

qui est placé entre TAG <HEAD> .... </ HEAD>. Pour simplifier, essayons de préparer une seule feuille de style, avec des éléments récursifs se référant à l'ensemble du site. Il peut être appliqué aux pages ayant dans leur corps en forme les éléments nommés par ce CSS.

En d'autres termes, vous pouvez définir une page qui utilise au moins un des éléments CSS définis ou nommé en elle. Si nous attachons les noms du feuille de style et de poste sont reconnus, ces pièces seront formatés.

2) avec instructions de réglage dans la page elle-même entre les balises <head> ....</ head> avec les instructions suivantes

<style type="text/css">
......................
set here the needed istructions' blocks
..................
</style>

3) instructions de réglage dans la page elle-même entre les balises <body> .... </ body>. Il ya des éléments qui peuvent être formatés avec instructions HTML directes. éléments qui peuvent être formatés avec des instructions donnant une instruction de style en ligne, et les deux solutions. Quelques exemples

Il ya beaucoup de possibilités de changer le format des éléments dans des pages html. Rappelez-vous que la dernière instruction que le processeur lit est celui qui s'applique. Ainsi, vous pouvez changer un seul morceau de votre page dans une ligne de la page, pendant que le css général reste le même. Si vous souhaitez explorer les possibilités, vous pouvez lire et vérifier le code des pages de plusieurs tierces parties, par les outils de développement de votre navigateur.

Ici, je veux aviser que la meilleure solution pour la définition des propriétés CSS des objets est d'utiliser un éditeur comme Adobe Dreamweaver, ce qui vous donne de l'aide en ligne, ce qui permet de choisir, lors de l'écriture, parmi une liste de instructions persmises pour le type de chaque TAG.

NOTES SUR LES CLASSES

Nous pouvons adopter dans une feuille de style une solution intéressante pour coiffer éléments nommés, qui est les  classes. Une classe est un élément de style qui peut être appliqué à presque tous TAG. 
Voyons un exemple declasse, notant que les instructions entre { } pourraient être  toutes dans une seule ligne, comme ausso avec plus lignes.

.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;
}

Par cette classe on pourrait définir une image background, le type du font, la dimension, l'alignement, des formes, aussi l'aspect d'une cellule de tableau. Autrement dit, cette classe pourrait être appliquée ausse à une cellule unique d'un tableau <td> ..... < / td>, ou à un DIV, ou a un paragraphe.

<div id="zone1" class="td1"> ... contenu de la div.....</div>

Tout pourrait être possible, il faut tout simplement expérimenter et 'essayer de le faire.

C ) PENSEZ VÔTRE SITE

Première: avez-vous lu ce manuel? Si oui, vous savez que vous devriez projeter avec une portée de précision le contenu de ce que vous avez l'intention de produire. Écrivez vos idées selon les modèles disponibles. Utilisez d'un éditeur électronique ou ce que vous préférez.
Je suggère de suivre la règle de 5W1H. par exemple.
Mon site n'a pas un but commercial, mais peut être adapté à. Si à un certain moment vous souhaitez enregistrer vos utilisateurs et leur faire souscrire des frais pour aller en l'avant avc la lecture, ou pour télécharger des choses, en utilisant PayPal ou par carte de crédit, vous serez autorisé à exercer cette fonction, en insérant leur logiciel dans quelque part dans vos pages..

Deuxièmement: allons hypothizer que vous êtes un auteur, et que vous voulez publier votre travail. Voici juste quelques quelques idées sur la façon d'organiser. Vous ne devriez pas modifier les dossiers et fichiers que vous avez téléchargés et décompressés du site de base, il suffit d'ajouter de nouveaux dossiers et définir vos nouveaux fichiers. Ne pas fusionner vos fichiers et dossiers dans ceux existants. Se référant à la structure que nous avons décrit dans le paragraphe «Modèles» - voir le menu à votre gauche - vous ne devez pas modifier la structure, mais ajouter les directoires et les dossiers que vous voulez en utilisant les modèles.

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

french Homepage

|--- main_framepage_i.htm italian Homepage
|--- main_framepage_s.htm spanish Homepage
 |  
|--- htmpages    folder with htm pages
 |    |      
 | |---- horizmenus  folder of horizontal menus
 |    |      
 | |---- simples  folder with menuless pages
 |    |      
 | |---- vertmenus  folder of column menus
 |    |      
 | |---- withmenus   folder of sliding pages with menu on top
 |        
 | immagini   Images' folder  
 |        
 | stylesheets   CSS' folder  
 |        
|--- templates   Templates' folder  
 |        
 | Sous - ou parmi - les supérieurs ajouter vos propres dossiers ici
 |        
|--- mynovels    folder with htm pages regarding novels-fables
 |    |--- n_mainpage.htm Starting page for novels
 |    |      
 | |---- myhmenus  folder of horizontal menus
 |    |      
 | |---- simplepag  folder with menuless pages
 |    |      
 | |---- myvertmenus  folder of column menus
 |    |      
 | |---- complexmenus   folder of sliding pages with menu on top
 |    |      
 | |---- downloads   folder with files to download
 |          
Vous pouvez répéter cette structure pour chaque livre que vous souhaitez ajouter
 |        
|--- MYBOOK 1    folder with htm pages regarding a book and it's chapters
 |    |--- book1_page.htm Starting mainpage for book1
 |          
|--- MYBOOK 2    folder with htm pages regarding another book and chapters
 |    |--- book2_page.htm Starting mainpage for book2
 |      
et ainsi de suite

 

D )SUGGESTIONS POUR Préparez vos fichiers - se référant au site hypotizé de l'auteur précédent

A) Adaptation de index.htm, pour la définir comme votre page d'accueil

Essayez de préparer au moins un ensemble ne pas fonctionnant de index.htm. Pour établir le contenu des menus et la sequence des pages qu'on va ouvrir par eux. Dans un second temps, vous allez vérifier et d'assigner des liens vers des pages.

B) Réglez autres mainpages avec le même motif et dans un premier temps créer un mainpage et l'enregistrer avec son nom dans le répertoire dédié (horror, aventure, contes, fables, roman, book1, book2 ....). C'est à vous d'etablir ce que vous voulez faire avec le jeux des menus. Particuliérement avec les menus top-side et bottom-side

Voici toujours la même tête - vérifier les liens pour connecter les images et les feuilles de style, si le niveau de ces pages de position est différente de index.htm
Top_side
left_menu right_side
Bot_menu

 

  1. HISTOIRES
    • left_menu: en cas de histoire et contes mettre une page de préface intro, et la liste des titres 
    • righ_ side:  mettre le texte d'une historie entière ici dans une page avec un menu fixe à l'intérieur, pour appeler paragraphes au lieu du défilement manuellement
  2. LIVRE
    • left_menu:  mettre ici préface et liste des chapitres avec leurs titres
    • righ_ side: mettre le texte d'un chapitre unique ici dans une page avec un menu fixe à l'intérieur, pour appeler paragraphes au lieu du défilement manuellement

 

E) PUBLIEZ VÔTRE SITE

Une fois que vous avez tout testé, et en naviguant localement dans votre site avec des browsers tout fonctionne bien, vous pouvez le publier.
Vous devriez avoir à vous inscrire sur un site spécialisés d'hébergement, et de vérifier qu'il répond à vos besoins et qui vous donne assez d'espace. Plus, ils doivent admettre votre accès à charger et télécharger à votre site avec votre éditeur, et fournir des données vous donnant accès FTP, l'adresse du serveur FTP, le nom d'utilisateur et mot de passe, par exemple. En savoir plus sur dans le paragraphe intitulé "Outils".

Il est aussi très important de considérer les frais éventuels et ce qui se passera à la vôtre fichiers si pour une raison quelconque vous ne puvez plust payer le loyer du domaine. Mais, la chose la plus importante en valeur absolue est d'offrir aux moteurs de recherche la meilleure façon de trouver votre site facilement parmi les millions dans le filet.

Pour ce fin on doit utiliser ce que l'on dit «meta tags», c'est à dire les instructions que les moteurs sont en échec à vous classer dans Internet. Ces instructions sont placés entre les balises <head> ....< head>

Principaux types META TAG: meta, mots clés, description,

UN TAG VRAIMENT IMPORTANT EST CELUI QUE DIT AUX ARAIGNÉES DES MOTEURS DE RECHERCHE QU'ILS NE DOIVENT PAGE ARRÊTER LA RECHERCHE MAIS CONTINUER AVEC LES FICHIERS DÉPENDANTS.
De cette façon nous pouvons passere au WEB les paramètres de toute page unique et les descriptions de notre site ENTIER.

Si vous écrivez à la place "INDEX, NO FOLLOW" l'araignée n'irait pas à continuer à chercher les pages dépendantes.

TIP: lorsque vous ouvrez un HTML d'une troisième partie avec votre navigateur.vous devriez examiner quel type et nombre de balises meta y est disponible. Ou dans des sites spécialisés vous pourriez étudier et saisir éventuellement d'autres balises que vous pouvez insérer dans vôtre <head>.

Vous pouvez également que votre mainpage s'ouvre plein écran, alors peut-être on le fait avec le suivant

 

Enjoy!