Marie-Philippe Gill: octobre 2011

lundi 24 octobre 2011

Google SketchUp

Coucou :)

Aujourd'hui en option informatique, j'ai commencé l'activité 7 ;

Un plateau de jeu 3D sur Google Sketch Up.

Le jeu que j'ai choisis s'appelle Aquileia.

J'ai pris l'image sur ici.

Voici le plateau initial, celui que je dois mettre en 3D ;

Voici ce que j'ai réalisé aujourd'hui:

J'aime bien le résultat pour l'instant, je ne suis pas très douée sur ce logiciel alors! :'p

jeudi 20 octobre 2011

Bonjour !
Aujourd'hui, j'ai fais le menu déroulant de mon blog.
Les couleurs et tout ne sont pas permanent pour l'instant.
J'ai décidé de commencer par la partie "Livres" de mon blog.

Au prochain cours, je vais chercher comment faire un diaporama d'images horizontal afin d'y afficher les derniers livres qui seront ajoutés sur mon blog! :)

Temps: 1h00

le code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Bienvenue sur mon site !</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Mécanique" href="design.css" />
   
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Rose pour les filles" href="design_poney_rose.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Sombre et terrifiant" href="sombre.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Aquatique" href="aquatique.css" />
</head>
   <body>
       
 <div id="en_tete">

</div>

<li>
                <a href="#">Accueil</a>
        </li>
        
        <li>
                <a href="#">News</a>
                <ul>
                        <li><a href="#">Ania-x</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Photos</a>
                <ul>
                        <li>
                                <a href="#">Livres</a>
                                <ul>
                                        <li><a href="#">Séries</a></li>
                                        <li><a href="#">Critiqués</a></li>
                                </ul>

</li>
                        <li>
                                <a href="#">Auteurs</a>
                        </li>
                </ul>
        </li>
        
        <li>
                <a href="#">Liens</a>
                <ul>
                        <li><a href="#">Sites intéressants</a></li>
                        <li><a href="#">Mes autres blogs</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Plus</a>
                <ul>
                        <li><a href="#">Livre d'or</a></li>
                        <li><a href="#">Nos bannières</a></li>
                        <li><a href="#">Partenaires</a></li>
                        <li><a href="#">Suggestions</a></li>
                </ul>
        </li>
        
</ul>
</div>
 <div id="menu">

<h3>Livres</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

<h3>Biographies</h3>
  <ul>
   <li><a href="page4.html">Lien</a></li>
   <li><a href="page5.html">Lien</a></li>
   <li><a href="page6.html">Lien</a></li>
  </ul>
  </div>

<h3>Films</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

</div>

<div id="corps">
  <h1>Chez Marie</h1>

<p>
       Bienvenue sur mon super site !<br />
       Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
   </p>
 
   <h2>A qui s'adresse ce site ?</h2>    
   <p>
       A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
       Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
   </p>
   
   <h2>L'auteur</h2>    
   <p>
       L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
       Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
       Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
   </p>

</div>

<div id="pied_de_page">
  <p>Copyright "Chez Marie", tous droits réservés</p>
 </div>
   </body>
</html>

le code css

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/fond.png");
}

/* L'en-tête */

#en_tete
{
   width: 963px;
   height: 311px;
   background-image: url("images/banniere2.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

/* Le menu */

#menu
{
   float: left;
   width: 120px;
 margin-top: 9px;
}

.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
 margin-top: 40px; /* Position du corps par rapport au deroulant */
   padding: 5px;
   
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

text-align: center;

color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

/* MENU DEROULANT !!!!!!!!!!!!!!!!! */

#deroulant, #deroulant ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#deroulant /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#deroulant a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 151px; /* largeur */
}

#deroulant li /* Éléments des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroulant li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#deroulant li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#deroulant li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroulant li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#deroulant li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#deroulant a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}

#deroulant li:hover ul ul, #deroulant li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#deroulant li:hover ul, #deroulant li li:hover ul, #deroulant li.sfhover ul, #deroulant li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

javascript

lundi 17 octobre 2011

Fin du Projet Perso

Coucou !

Temps: 1h

J'ai encore travaillé sur mon blog ce cours-ci.

J'ai terminé le chapitre sur la création du design, et voici le résultat :

le code html ;

</div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page4.html">Lien</a></li>
   <li><a href="page5.html">Lien</a></li>
   <li><a href="page6.html">Lien</a></li>
  </ul>
  </div>

</div>

<div id="corps">
  <h1>Chez Marie</h1>

</div>

<div id="pied_de_page">
  <p>Copyright "Chez Marie", tous droits réservés</p>
 </div>
   </body>
</html>

le code css ;

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/fond.png");
}

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("images/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

/* Le menu */

#menu
{
   float: left;
   width: 120px;
}

.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

text-align: center;

color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

jeudi 13 octobre 2011

PI + Projet Perso

Bonjour :)

Aujourd'hui, j'ai travaillé sur la création de mon blog, que j'ai décidé de nommer "Chez Marie" lol !
Je n'étais pas rendue dans le tutoriel à commencer le design de mon blog mais j'étais trop impatiente alors j'ai passé certaines parties.

J'étais rendue au point 4 de la partie 2 de ce tutoriel.
Pour le design, je suis rendue au point des Menu de ce tutoriel.

La bannière n'est pas définitive, seulement le fond de la bannière l'est, j'ai seulement écris "Chez Marie" rapidement.

Temps : 1h10

Voici ce que j'ai eu le temps de faire:

en image

et le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Chez Marie</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
   <body>
       
 <div id="en_tete">

</div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page4.html">Lien</a></li>
   <li><a href="page5.html">Lien</a></li>
   <li><a href="page6.html">Lien</a></li>
  </ul>
  </div>

</div>

<div id="corps">
  <h1>Chez Marie</h1>

</div>

et le code css

mardi 11 octobre 2011

Chandails

Bonjour !

En Option info, on devait créer un logo et le mettre sur un chandail.

Alors, à l'aide de ce tutoriel, j'ai créé ce logo du CMSC. :)

Je voulais agrandir un peu le logo mais ce n'était pas possible sur le site que j'ai utilisé pour créer un chandail, customink.

Je l'aime bien, sauf que le tutoriel était pas mal compliqué et mal expliqué donc je l'ai un peu arrangé à ma façon...

Voilà un aperçu de mon chandail final, sur une femme et un homme! :)

J'ai créé aussi un deuxième chandail, mais cette fois-ci, j'ai utilisé les outils proposés par Customink.

Voici le résultat:

Bienvenue

Bienvenue sur mon blog ! :)

Le titre de mon blog est "Portfolio de Graphiques" parce que j'y publierai mes créations, réalisées sur quelques logiciels : PhotoFiltre, Gimp et UnFREEz en particulier ! J'espère que cela vous plaira puisque ça prend beaucoup de temps. :)

Pour l'instant il n'y a pas beaucoup d'articles mais ça augmentera au fur et à mesure que l'année scolaire avance. J'ai bien hâte de voir mon blog à la fin. :D

N'hésitez pas à poster des commentaires, ça fait toujours tellement plaisir. :-)

SOMMAIRE DU PROJET INTÉGRATEUR