5b) les frames ou cadres
Contents
1. europschool net Les frames ou cadres Dans cette fiche nous allons vous apprendre faire des frames ou en fran ais cadres Tout et son contraire a t dit propos des frames En tout tat de cause tous les navigateurs Internet savent l heure actuelle interpr ter les frames et la technique des frames n est pas plus compliqu e qu une autre technique il suffit juste comme toute technique de bien la ma triser Cette fiche est con ue comme un didacticiel pour vous apprendre r aliser des frames Pr requis Pour aborder cette fiche sans difficult vous devez conna tre les bases du langage HTML Si ce n est pas le cas nous vous invitons consulter la fiche Cr er un mini site internet en une apr s midi Introduction Les frames sont des cadres qui permettent de fragmenter une fen tre de navigateur Ils sont tr s faciles r aliser mais la pagaille s installe tr s vite si une organisation rigoureuse n est pas mise en place Lorsque nous disons fragmenter la fen tre cela signifie qu on voudra par exemple avoir en permanence le menu ou sommaire du site web dans une partie de l cran par exemple en haut de l cran chaque page du site au centre de l cran et en bas l information Nous contacter Chacune de ces parties s appellera frame ou cadre et fera appel une page html distincte Voici un petit sch ma repr sentant la structure d une page divis e en frames Frame afficha2. lt head gt lt body bgcolor FF9900 gt Ceci est le menu lt body gt lt html gt page 2 Pour r aliser la page contenu html copiez le code ci dessous lt html gt lt head gt lt title gt lt title gt lt head gt lt body bgcolor 0066FF gt Le contenu lt body gt lt html gt Pour r aliser la page contact html copiez le code ci dessous lt html gt lt head gt lt title gt lt title gt lt head gt lt body bgcolor FFFFFF gt Nous contacter lt body gt lt html gt ba Les frames europschool net IMPORTANT assurez vous que les fichiers index html decoupe html menu htmlI contenu html et contact html sont bien enregistr s dans le dossier monsite Note vous avez sans doute constat que les pages menu html contenu html et contact html ont dans leur balise lt body gt un attribut bgcolor qui est diff rent Cela a t fait dans le but de bien diff rencier les 3 cadres les uns des autres par un code couleur 6 Double cliquez sur le fichier index html dans le dossier monsite Le fichier s ouvre alors dans votre navigateur Internet Explorer ou Netscape par exemple Cliquez sur le lien Entrez dans mon site Voici ce que vous devez voir l cran ec ar rie M dem ii een Lp does G rer fichage Fees h Qr O el 9 Dee former Qu E RE ET PS OR RS emn ie eiie ape ti
3. tableaux en HTML reportez vous la fiche Cr er un mini site internet en une apr s midi Remplacez tout le code pr c demment crit dans menu html par celui ci lt html gt lt head gt lt title gt Document sans titre lt title gt lt head gt lt body bgcolor FF9900 gt lt table width 600 border 0 cellspacing 0 cellpadding 0 gt page 4 ro p Les frames europschool net lt tr gt lt td gt lt a href contenu html target milieu gt Accueil lt a gt lt td gt lt td gt lt a href page1 html target milieu gt Page 1 lt a gt lt td gt lt td gt lt a href page2 html target milieu gt Page 2 lt a gt lt td gt lt tr gt lt table gt lt body gt lt html gt Notre menu comporte donc 3 liens chacun conduisant une page diff rente II s agit de liens hypertextes classiques auxquels on ajoute l attribut target cible en fran ais Puis on pr cise quelle est la cible c est dire le frame cible dans lequel il faudra afficher la page indiqu e par le lien On pourrait traduire la ligne lt a href contenu html target milieu gt Accueil lt a gt lt td gt par Lorsque tu cliques sur le texte Accueil va me chercher la page contenu html et affiche la moi dans le frame qui se nomme milieu Faites l exp rience suivante Toujours dans le fichier menu html remplacez le code lt td gt lt a h
4. ELLE LS PEL gt b B 5 nipi arat hh H i eim ra apa page 3 Les frames europschool net Peut tre trouvez vous que les bordures des frames sont in l gantes Dans ce cas il vous suffit d apporter une modification mineure au fichier decoupe html Ouvrez le fichier decoupe html et dans la balise lt frameset gt la suite de rows 30 55 15 7 inscrivez border 0 Au final voici quoi ressemble le code du fichier decoupe htmil lt html gt lt head gt lt head gt lt frameset rows 30 55 15 border 0 gt lt frame src menu html name haut gt lt frame src contenu html name milieu gt lt frame src contact html name bas gt lt frameset gt lt html gt Voici quoi doit ressembler maintenant votre cran lorsque vous cliquez sur le lien Entrez dans mon site Dee a H iip eer ji ae a pihan edea ipe aTa H eim raj p Gree O a a Go ee y Meuse a Lie EL bhe QC Yurem m np eer ea rni Be praep eie ie emali je Hied Hat copi h T Nous allons maintenant toffer un peu notre menu c est dire ajouter des liens dans le fichier menu htmil permettant d afficher des contenus diff rents dans le frame du milieu Chaque lien affichera un contenu diff rent dans le frame du milieu Pour plus de lisibilit nous allons mettre le menu sous la forme d un tableau pour plus d informations sur la r alisation de
5. amp eacute crivez moi amp agrave l adresse lt a href mailto rmonemail monemail com gt monemail monemail com lt a gt lt p gt lt body gt lt html gt Lorsque vous cliquerez sur le lien Nous contacter dans le frame du bas la page monemail html s affichera dans le frame du milieu Vous pouvez t l charger le dossier exemple_frames en revenant sur la liste des fiches page 5
6. nt le menu du site Frame affichant une page du site Avec le soutien de la Commission europ enne Le Po P Les frames europschool net Mode d emploi 1 Cr ez un dossier intitul frameset 2 Si vous tes sur PC ouvrez Bloc notes d marrer programmes accessoires Si vous tes sur Mac ouvrez SimpleText il est quelque part sur le disque dur Au besoin recherchez le 3 Cr z un nouveau fichier texte attention il est important que ce soit un fichier texte sans mise en forme et enregistrez le dans le dossier frames en l appelant index html Ensuite vous copiez le code ci dessous dans votre fichier index html Ce qui vous donne une page HTML qui contient uniquement un lien Ce lien m nera vers un fichier qui servira d couper la fen tre en 3 frames diff rents lt html gt lt head gt lt title gt lt title gt lt head gt lt body gt lt a href decoupe html gt Entrez dans mon site lt a gt lt body gt lt html gt 4 Vous allez maintenant cr er le fichier decoupe html Copiez le code ci dessous lt html gt lt head gt lt head gt lt frameset rows 30 55 15 gt lt frame src menu htm name haut gt lt frame src contenu html name milieu gt lt frame src contact html name bas gt lt frameset gt lt html gt Que signifie ce code Vous avez peut tre remarqu que cette page decoupe h
7. ref contenu html target milieu gt Accueil lt a gt lt td gt lt td gt lt a href pagel html target milieu gt Page 1 lt a gt lt td gt lt td gt lt a href page2 html target milieu gt Page 2 lt a gt lt td gt par lt td gt lt a href contenu html target bas gt Accueil lt a gt lt td gt lt td gt lt a href pagel html target bas gt Page 1 lt a gt lt td gt lt td gt lt a href page2 html target bas gt Page 2 lt a gt lt td gt Vous vous rendrez compte que lorsque vous cliquez sur l un des liens le fichier appel ne s affiche plus dans le frame du haut mais dans le frame du bas 8 Pour clore ce didacticiel nous allons ajouter une nouvelle page notre site la page monemail html et ajouter un lien vers cette page dans notre fichier contact html Lorsque l on cliquera sur ce lien notre adresse e mail appara tra dans le frame du milieu Modifiez tout d abord le fichier contact html lt html gt lt head gt lt titte gt Document sans titre lt title gt lt head gt lt body bgcolor ffffff gt lt a href monemail html target milieu gt Nous contacter lt a gt lt body gt lt html gt Puis cr ez le fichier monemail html en copiant le code ci dessous lt html gt lt head gt lt title gt Document sans titre lt title gt lt head gt lt body bgcolor 9999FF gt lt p gt Pour me contacter
8. tml ne contient pas de balise lt body gt lt body gt la diff rence de toute page web classique La balise lt frameset gt lt frameset gt d finit la division de la fen tre en cadres rows 30 55 15 signifie que l on va diviser la fen tre en 3 rang es que la premi re rang e en partant du haut occupera 30 de la fen tre la seconde 55 et la troisi me et derni re 15 Si l on avait voulu diviser la fen tre non pas en rang es mais en colonnes il aurait fallu remplacer lt frameset rows 30 55 15 gt par lt frameset cols 30 55 15 gt La balise lt frameset gt lt frameset gt contient ensuite trois balises lt frame gt lt frame gt puisque nous avons pr alablement d fini que la fen tre serait divis e en 3 rang es Si nous avions souhait que la fen tre soit divis e en 4 rang es la balise lt frameset gt lt frameset gt aurait contenu quatre balises lt frame gt lt frame gt Chaque balise lt frame gt doit contenir les attributs src et name L attribut src indique au frame o il doit aller chercher la page qu il devra afficher L attribut name sert donner un nom au frame Chaque frame ainsi d fini devra avoir un nom diff rent des autres 5 Vous allez maintenant cr er les pages menu html contenu html et contact html Pour r aliser la page menu htmil copiez le code ci dessous lt html gt lt head gt lt title gt lt title gt
Download Pdf Manuals
Related Search