docstudio - ti6 - Placeman Pascal
download 
Plainte Transcription
studio - ti6 - Placeman Pascal
STUDIO - TI6 PASCAL PLACEMAN Sujet Exercice HTML- CSS octobre Nous allons personnaliser la page index.html que nous avons créé lors du précédent exercice sur les bases du css (00_ppl_exercice_css). Nous verrons comment utiliser la balise <div>, comment créer une image de fond, comment convertir une liste en barre de navigation. Consignes Dans Photoshop Créez 2 images, à partir de photos ou de travaux personnels ou d’images importées d’internet. Cela ne doit pas prendre trop de temps. La première image vous servira de background, c’est-à-dire d’image de fond. Elle fera entre 1600px et 2000px de large, la hauteur est au choix. Pour l’enregistrer, passez par Fichier - Exportation Enregistrer pour le web. 1 2 3 1 STUDIO - TI6 PASCAL PLACEMAN Dans la fenêtre qui apparait, choisissez «JPG» 1, vérifiez que le poids de l’image ne dépasse pas les 500k 3, si c’est le cas, diminuez la qualité de l’image 2 . Puis enregistrez dans le dossier «image» de votre site votre JPG. La deuxième image ne doit pas dépasser les 300px de large. Enregistrez-la de la même manière que la précédente. Dans Dreamweaver Le premier réflexe à avoir lorsqu’on ouvre Dreamweaver, c’est de gérer son site ( voir le cours 04 « la gestion des dossiers»). Dans la fenêtre des «fichiers», cliquez sur le menu déroulant et choisissez votre dossier si il est présent, sinon, allez jusque «gérer les sites ...» et configurez votre site comme vu précédemment. !!!(Vos dossiers existent, n’en créez pas de nouveaux) !!! Dans la page index.html, que nous avons créé ensemble il y a quelques semaines, vous allez rajouter du code HTML. Autour de la balise <h1></h1>, ajoutez une balise <header></header> (à ne pas confondre avec la balise <head>) comme ceci : <header> <h1>Comment utiliser un fichier CSS</h1> </header> Autour de la balise <p></p>, ajoutez une balise <div></div> La balise div sert de conteneur pour une mise en forme en CSS. C’est LA balise fourre-tout, celle qui est la plus utilisée. Sous la balise </div>, ajoutez une balise <footer></footer>. En clic-glissant votre deuxième image depuis la fenêtre «Fichier» jusque dans votre code, entre les deux tags <footer></footer>, vous devriez obtenir ceci : <footer> <img src="images/leger.jpg" width="300" height="225" alt=""/> </footer> Occupons-nous du CSS Cliquez en haut à gauche sur style.css pour passer dans le codage des styles. Recopiez les styles suivants (page suivante). Testez régulièrement votre page dans votre navigateur (Chrome, Safari, Firefox ...) pour voir les effets que vous avez apporté à votre page. Ne recopiez pas les commentaires qui sont entre /* et */ 2 STUDIO - TI6 PASCAL PLACEMAN 3 STUDIO - TI6 PASCAL PLACEMAN 4 STUDIO - TI6 PASCAL PLACEMAN 5 STUDIO - TI6 PASCAL PLACEMAN Comme vous pouvez l’observer, l’image passe devant le texte. Pour corriger ce bug, on va écarter le footer du reste avec un margin:150px; Consignes (suite) Envie de points en plus ? À l’aide des exemples de propriétés CSS fournies, sur le site de studio web (cours - Petits + 02) personnalisez votre page, ou ajoutez d’autres pages liées entre elles. 6
