Dreamweaver

Transcription

Dreamweaver

1
Dreamweaver
J. ROMAGNY
I.
PRESENTATION ........................................................................................................................................ 5
1.
2.
CREATION/ OUVERTURE DE SITE ......................................................................................................................... 5
CREER UN NOUVEAU DOCUMENT ....................................................................................................................... 6
a. Modèles (HTML, CSS, etc.) ..................................................................................................................... 6
b. Grille fluide (Web Responsive) ............................................................................................................... 7
c.
Modèles de démarrage .......................................................................................................................... 7
d. Modèles du site (Templates) .................................................................................................................. 8
3. ESPACES DE TRAVAIL ........................................................................................................................................ 8
Extract ............................................................................................................................................................ 9
4. CONCEPTEUR ............................................................................................................................................... 11
 Quick Tag View .................................................................................................................................... 11
5. PANNEAUX .................................................................................................................................................. 12
a. « Fichiers » ........................................................................................................................................... 12
b. « Actifs » (Assets) ................................................................................................................................. 12
c.
« Inspecteur de code » ......................................................................................................................... 12


d.
e.
f.
g.
h.
i.
II.
Wrap Tag
................................................................................................................................................. 13
Explorateur de code (bouton
ou menu contextuel) .................................................................................. 13
Insertion ............................................................................................................................................... 13
Propriétés............................................................................................................................................. 14
CSS Designer ........................................................................................................................................ 15
Transition CSS ...................................................................................................................................... 16
Fragments de code (Snippet) ............................................................................................................... 16
Validation de pages ............................................................................................................................. 16
BOX-MODEL ........................................................................................................................................... 17
1.
BLOCS......................................................................................................................................................... 17
Inline .................................................................................................................................................... 17
Inline-block .......................................................................................................................................... 17
Block .................................................................................................................................................... 17
Display ................................................................................................................................................. 18
Centrer un bloc .................................................................................................................................... 18
Problème des espaces blancs............................................................................................................... 18
POSITION (FIXED, ABSOLUTE, RELATIVE)............................................................................................................ 19
Z-INDEX ....................................................................................................................................................... 19
CONTENEUR ET CONTENU ............................................................................................................................... 20
ELEMENTS FLOTTANTS (FLOAT) ........................................................................................................................ 21
Problème du conteneur ................................................................................................................................ 21
Image flottante avec texte ........................................................................................................................... 22
Capitales ....................................................................................................................................................... 22
Layout ........................................................................................................................................................... 23
a.
b.
c.
d.
e.
f.
2.
3.
4.
5.
2 Colonnes layout ...................................................................................................................................................... 23
3 colonnes layout ....................................................................................................................................................... 23
« Position is everything » ........................................................................................................................................... 23
6.
7.
8.
MULTI COLONNE POUR TEXTE .......................................................................................................................... 24
CLIP ........................................................................................................................................................... 24
OVERFLOW LORSQUE LE CONTENU DEPASSE DU CONTENEUR .................................................................................. 24
2
III.
STRUCTURE DE LA PAGE HTML5............................................................................................................. 25
1.
HEADER .................................................................................................................................................... 26
a. LOGO et menu sur la même ligne ........................................................................................................ 26
Sticky menu................................................................................................................................................................ 28
b.
LOGO et menu sur une ligne chacun ................................................................................................... 29
Sticky menu................................................................................................................................................................ 31
IV.
COULEURS ......................................................................................................................................... 32
LES 16 COULEURS DU WEB ...................................................................................................................................... 32
Hexadécimal ................................................................................................................................................. 32
RGB ............................................................................................................................................................... 32
Rgba (pour gérer l’opacité)........................................................................................................................... 32
HSL (« teinte saturation lumière »)/ HSLA (avec opacité) ............................................................................ 32
NUANCIER DE DREAMWEAVER ................................................................................................................................. 33
ADOBE KULER ....................................................................................................................................................... 33
V.
TEXTE ..................................................................................................................................................... 34
1.
2.
FONT-SIZE .................................................................................................................................................... 34
FONT-FAMILY ............................................................................................................................................... 34
a.
b.
c.
d.
e.
f.
3.
4.
VI.
Web safe fonts : ................................................................................................................................... 35
@font-face ........................................................................................................................................... 36
Local fonts............................................................................................................................................ 36
Edge Web Font..................................................................................................................................... 37
Autres propriétés utiles ........................................................................................................................ 37
Balise time ........................................................................................................................................... 37
COLLAGE SPECIAL .......................................................................................................................................... 38
ORTHOGRAPHE............................................................................................................................................. 38
LIENS ................................................................................................................................................. 39
1.
2.
3.
4.
5.
6.
LIEN ABSOLU ................................................................................................................................................ 39
LIEN RELATIF ................................................................................................................................................ 39
« SITE-ROOT » ............................................................................................................................................. 39
ANCRES....................................................................................................................................................... 39
EMAIL ......................................................................................................................................................... 39
STYLES DES LIENS .......................................................................................................................................... 39
a. Pseudo-classes : ................................................................................................................................... 39
b. Appliquer un Style de lien à tous les liens de la page........................................................................... 39
7. IMAGE MAP................................................................................................................................................. 40
8. TROUVER LES LIENS BRISES AVEC LE PANNEAU VERIFICATEUR DE LIEN ....................................................................... 41
VII.
1.
IMAGE ............................................................................................................................................... 41
7.
INSERER UNE IMAGE ...................................................................................................................................... 41
Propriétés ..................................................................................................................................................... 41
UTILISATION DE FIGURE POUR IMAGE AVEC LEGENDE ............................................................................................ 41
MODIFIER UNE IMAGE VERS UN EDITEUR (PHOTOSHOP OU AUTRE) ......................................................................... 42
INSERER UN FICHIER PSD ................................................................................................................................. 42
IMAGE SURVOLEE (ROLLOVER IMAGE) ............................................................................................................... 43
BACKGROUND IMAGE..................................................................................................................................... 44
Image d’arrière-plan fixe .............................................................................................................................. 45
FEUILLE DE SPRITES ET BACKGROUND-POSITION .................................................................................................. 45
VIII.
LISTES ................................................................................................................................................ 46
2.
3.
4.
5.
6.
LISTE A PUCES, ORDONNEE....................................................................................................................................... 46
3
MENU DE BASE...................................................................................................................................................... 46
IX.
TABLE ..................................................................................................................................................... 48
IMPORTER UN FICHIER CSV...................................................................................................................................... 48
X.
FORMULAIRE ......................................................................................................................................... 49
A.
FORM
B.
FIELDSET
C.
LABEL
.............................................................................................................................. 49
INPUT ......................................................................................................................................................... 49
TEXTAREA .................................................................................................................................................... 50
BUTTON ...................................................................................................................................................... 50
DATALIST..................................................................................................................................................... 50
SELECT ........................................................................................................................................................ 50
CASE A COCHER ............................................................................................................................................ 51
D.
E.
F.
G.
H.
I.
J.
K.
XI.
............................................................................................................................. 49
........................................................................................................... 49
BOUTONS RADIO
............................................................................................ 51
VALIDATION HTML5 DE FORMULAIRE .............................................................................................................. 51
MEDIAS .................................................................................................................................................. 52
A.
AUDIO ........................................................................................................................................................ 52
B.
VIDEO ......................................................................................................................................................... 52
C.
SOCIAL MEDIA ............................................................................................................................................. 53
« Share buttons » ......................................................................................................................................... 54
XII.
OPTIMISATION POUR LES MOTEURS DE RECHERCHE (SEO) ............................................................... 54
XIII.
SUPPORT DE JQUERY UI ET JQUERY MOBILE ...................................................................................... 55
1.
2.
JQUERY UI................................................................................................................................................... 55
XIV.
TRANSITIONS ..................................................................................................................................... 56
A.
SYNTAXE ..................................................................................................................................................... 56
EXEMPLE ..................................................................................................................................................... 57
B.
XV.
1.
2.
3.
4.
5.
6.
7.
8.
JQUERY MOBILE ........................................................................................................................................... 55
WEB RESPONSIVE .............................................................................................................................. 59
VIEWPORT ................................................................................................................................................... 59
REQUETE MEDIA........................................................................................................................................... 59
Ajouter une media query avec Dreamweaver .............................................................................................. 60
Tester sa page sous différents devices/ résolutions ..................................................................................... 61
IPHONE FONT RESIZING EN MODE LANDSCAPE..................................................................................................... 61
BOX-SIZING.................................................................................................................................................. 61
ANCIENNES VERSIONS DE IE ET HTML5 ............................................................................................................ 62
12-COLUMN GRID ........................................................................................................................................ 62
960 ................................................................................................................................................................ 62
1200 .............................................................................................................................................................. 63
1500 .............................................................................................................................................................. 63
Version avec % .............................................................................................................................................. 64
Exemples d’utilisation ................................................................................................................................... 65
MENU RESPONSIVE ....................................................................................................................................... 67
a. Version avec float ................................................................................................................................ 67
b. Version avec inline-block ..................................................................................................................... 68
IMAGE « FLEXIBLE » ...................................................................................................................................... 68
4
9. IMAGE CROP ................................................................................................................................................ 69
10.
GRILLES FLUIDES AVEC DREAMWEAVER ......................................................................................................... 69
 CSS (« orienté Mobile First ») ............................................................................................................... 71
XVI.
LESS ................................................................................................................................................... 72
XVII.
TEMPLATES ........................................................................................................................................ 72
1.
1.
2.
3.
ENREGISTRER UNE PAGE HTML EN TANT QUE MODELE .......................................................................................... 72
REGION MODIFIABLE...................................................................................................................................... 73
ATTRIBUT MODIFIABLE ................................................................................................................................... 73
CREER UNE PAGE A PARTIR D’UN MODELE DU SITE................................................................................................ 74
XVII. WORDPRESS AVEC DREAMWEAVER....................................................................................................... 76
1. INSTALLATION LOCALE ......................................................................................................................................... 76
2. CHILD THEME ............................................................................................................................................... 80
3. THEME PERSONNEL ....................................................................................................................................... 81
4. RESSOURCES ................................................................................................................................................ 85
5. PUBLICATION ............................................................................................................................................... 86
a. Export................................................................................................................................................... 86
b. Database Backup ................................................................................................................................. 87
c.
Serveur distant ..................................................................................................................................... 88
Code
Visuel (Design)
Visuel (Design)
Code
5
I.
Présentation
1. Création/ ouverture de site
Créer ou ouvrir un site existant
Menu « Site » … « Nouveau Site »
Pour définir un serveur FTP
Dans le cas d’un site existant il suffit
de naviguer jusqu’au dossier et donner
un nom au site
Propriétés du site …
Dossier « images » du site vers lequel les images
insérées seront automatiquement copiées
6
Dossier pour les web fonts
Il est possible à tout moment d’éditer les propriétés du site depuis le menu « Site » .. « Gérer les
sites »
Extensions pour Dreamweaver (exemple Business Catalyst)
2. Créer un nouveau document
Menu « Fichier » … « Nouveau »
a. Modèles (HTML, CSS, etc.)
7
b. Grille fluide (Web Responsive)
Permet de créer une page avec un système de grille fluide pour les sites Web Responsive.
Il est possible d’éditer le nombre et
la largeur des colonnes
c. Modèles de démarrage
8
d. Modèles du site (Templates)
Pour utiliser un Template que vous avez créé (avec Menu « Fichier » … « Enregistrer comme
modèle »)
3. Espaces de travail
Il existe 3 espaces de travail :
-
« Code » favorise l’écriture du code (peu de panneaux)
« Création » favorise l’utilisation des panneaux (CSS Designer, etc.)
et « Extract » permet d’extraire des éléments d’un document Photoshop
On peut basculer entre les espaces de travail depuis les raccourcis ou depuis le menu « Fenêtre »
9
Extract
Permet de récupérer des styles et Assets Photoshop stockés sur le Creative Cloud
Il faudra ajouter une classe ou balise pour le CSS
copié (ex h2).
Pas de positionnement (absolu, top, etc.)
contrairement au CSS copié depuis Photoshop.
Copie le texte … par exemple ici « Titre H2 »
« Extraire l’actif » … crée une image (png ou jpg)
sauvegardée dans le dossier images par défaut du
site
On ajoute une balise h2 par exemple et on y copie le CSS
h2{
}
font-family: Roboto;
color: #f04530;
font-size: 24px;
font-weight: 700;
font-style: italic;
10
Forme avec effet
Groupe : Copie les éléments un à un et non par groupe.
On peut également récupérer la distance entre les éléments. On peut également glisser déposer
les éléments sur la page
11
4. Concepteur
Modes :
a. En direct : permet d’avoir un « Aperçu » en direct de la page. Par exemple une
animation Edge intégrée serait jouée
b. Création : permet d’éditer directement les éléments dans la page
Modes « En direct » et « Création »
Modes « Inspection »
Vue Code « uniquement » ou splittée Code/Page
c. Inspection : affiche des informations au survol de la souris des éléments dans la page
Ajout d’une classe (ou d’un id) depuis le
concepteur, celle-ci est automatiquement
ajoutée à la feuille de style sélectionnée
 Quick Tag View
Lorsque le mode création (aperçu de la page) est activé.
12
5. Panneaux
a. « Fichiers »
On peut naviguer entre
répertoires/ sites
Vers vue « FTP » permet de
copier des fichiers entre le
répertoire local et serveur.
Commandes disponibles
depuis le menu contextuel :
« placer » (pour envoyer un
fichier), « acquérir »
(recevoir un fichier) et
b. « Actifs » (Assets)
« synchroniser » pour
Permet de lister des ressources du site (images, couleurs, liens, médias, scripts, Templates,
synchroniser tous les fichiers
bibliothèque)
du site
Si une ressource n’apparait
pas, penser à les actualiser
depuis le menu contextuel du
panneau
c. « Inspecteur de code »
Ouvrir un document
Réduire une balise, la
sélection et développer
Sélection balise parent
Numéros de lignes,
surlignage code invalide,
renvoi à la ligne et
erreurs de syntaxe
Ajouter/ supprimer un
commentaire, Wrap Tag
Fragments de code
Indentation et mise en
forme du code
13
En plus des raccourcis de la barre de code.
 Wrap Tag
Permet « d’envelopper avec une balise » un code sélectionné. Exemple je sélectionne le texte
« Accueil » auquel je vais ajouter un lien
… Ce qui donne
 Explorateur de code (bouton
ou menu contextuel)
Permet d’avoir un aperçu CSS depuis le HTML
d. Insertion
On peut utiliser le menu « Insertion » également.
Plusieurs « catégories » :
 Commun
 Structure
 Medias
 Formulaire
 jQuery Mobile
 jQuery UI
 Modèle
 Favoris
14
Certains éléments proposent plusieurs choix. Exemple avec l’image
e. Propriétés
Affiche les propriétés et permet l’édition de l’élément sélectionné. Exemple avec un lien.
Onglet « HTML »
Onglet « CSS »
Ouvre une boîte de dialogue
permettant d’éditer le style
Affiche le style dans le panneau
CSS Designer
Filtre des propriétés listées:
15
f. CSS Designer
Permet d’ajouter des feuilles de styles, styles et leurs propriétés avec aperçu





Disposition
Texte
Bordure
Arrière-plan
« plus »
Permet de créer
ou utiliser une
feuille de style
Affiche tous les
styles ou
seulement ceux
de la feuille de
Styles
sélectionnée
Permet d’ajouter des
« media query »
Les touches ↑ et ↓ permettent de réduire
ou non les sélecteurs
Par exemple au lieu d’avoir « body header
h1 » on réduit à « h1 »
N’affiche que les propriétés
définies si coché, sinon affiche
toutes les propriétés
16
g. Transition CSS
On peut ajouter, supprimer,
modifier des transitions depuis
le panneau « Transitions CSS »
h. Fragments de code (Snippet)
On peut ajouter, éditer,
supprimer de nouveau
fragments. Accessible également
depuis le code et la barre de
l’inspecteur de code
i.
Validation de pages
17
II.
Box-Model
MARGIN
BORDER
PADDING
1. Blocs
a. Inline
Eléments sur une ligne se plaçant les uns à côté des autres (a,em,span,etc.) et n’ayant pas de
taille.




b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
Exemple deux liens :
b. Inline-block
Eléments sur une seule ligne et redimensionnables (select, input, img, etc.)
c. Block
Chaque élément occupe toute une ligne par défaut mais peut être redimensionné (p, div, section,
etc.)
 address, article, aside, blockquote, div, footer, header, hgroup, hr, main, nav,noscript,
section
 dd, dl, ol, ul, table, tfoot
 form, fielsdset, figure, figcaption
 h1 à h6, p, pre, output
 audio, video, canvas
Exemple : 2 paragraphes occupent par défaut toute la largeur de ligne
18
.. Mais sont redimensionnables
d. Display
Changer le mode d’affichage avec la propriété CSS display.
Exemple on transforme un lien (inline) en block
a{
display: block;
}
e. Centrer un bloc
Pour centrer un bloc, définir sa largeur (width) et Margin sur auto
body{
}
width:960px;
margin:0 auto;
f. Problème des espaces blancs
(environ 4px) ajoutés entre les éléments inline-block
Espace blanc (4px) entre deux div « inlineblock »
Solution : supprimer tout espace dans le code HTML entre les div
Variante avec un commentaire en plus indiquant l’espace blanc
Aide et autres bidouilles en CSS
19
2. Position (Fixed, Absolute, Relative)



Static : position par défaut. Eléments pas affectés par top, left , etc.
Fixed : la div scroll en même temps que la page (verticalement mais aussi
horizontalement) .Comme « absolu », on peut définir top, left, right, bottom.
Absolute : il permet de placer l’élément n'importe où dans la page (en haut, à
gauche, en bas, etc.), l’élément ne scroll pas avec la page. Le navigateur agit comme si
l’élément n’avait pas de largeur ni d’hauteur.
Div bleue bien que placée
après dans le code ignore la
div rouge

Div en position « Absolute », avec top et
right définis pour le placer dans la page.
Relative : l’élément est décalé par rapport à lui-même et sa position initiale
Position « Relative »
+ top et left réglés à 70px
3. z-index
Permet d’indiquer les éléments au « premier plan »
20
4. Conteneur et contenu
Un élément de contenu « Fixed » ou « Absolute » peut avoir un conteneur en position
« Relative » comme repère.
CSS
#container{
position:relative;
width:400px;
height:400px;
background-color:rgba(242,117,76,1.00);
}
#content{
position:absolute;
width:50px;
height:50px;
background-color:red;
left:100px;
bottom:50px;
z-index:999;
}
HTML
<body>
<div id="container">
<div id="content">
</div>
</div>
Conteneur
Le contenu est placé à 50px du bas et
50px à gauche de son conteneur et
non pas de la page
21
5. Eléments flottants (Float)
Les éléments peuvent être placés :


à gauche (left)
à droite (right)
… Et sortent du flot normal du document

ou on réinitialise le flot normal du document avec clear (left, right ou both)
Exemples : 3 blocs avec float à left
2 blocs avec float left, le bloc vert étant à clear : both.
Problème du conteneur
Exemple une section se ferme avec 3 boites
flottantes.
Plusieurs solutions :
- S’assurer qu’il y a un élément après les boites
(exemple un paragraphe)
- Utiliser « overflow :hidden » sur le conteneur
(section ici) mais peut poser des problèmes
- Ou utiliser « clearFix ::after »
On peut créer des classes utilisables pour positionner les éléments
.floatLeft{ float: left;}
.floatRight{float: right; }
.clearFix::before, .clearFix::after {
content: "";
display: table;
}
.clearFix::after {
clear:both;
}
22
Image flottante avec texte
Image sur « float :left »
CSS
div{background-color:lightblue;}
img{
float:left;
margin:0 1em 1em 0;
}
div h3{
clear:both;
}
content: "";
display: table;
}
.clearFix::after {
clear:both;
}
HTML
<div class="clearFix">
<img src="images/arcenciel_nuages.png">
<p>Lorem ipsum dolor sit amet, consectetur ….</p>
<h3>Un second pararagraphe "clear"</h3>
<p>Curabitur sodales lectus a eros vestibulum placerat. dignissim…</p>
</div>
Capitales
CSS
p:first-of-type:first-letter{
float:left;
font-family:'Times New Roman',serif;
font-size:4em;
margin:0 5px 0 0;
line-height: .7;
}
23
Layout
2 Colonnes layout
1ère solution
- 1ere colonne float left
- 2eme avec margin-left = width de la colonne 1 + margin
2ème solution
- 1ere colonne float left, margin-right définie si on veut un espace entre les deux colonnes
seconde float left
ème
3 solution
- 1ere colonne float left
- 2eme colonne float right, sa taille va déterminer la marge entre les 2 colonnes
3 colonnes layout
1ère solution
-
1ère colonne et 2ème colonne float left chacune une marge à droite si besoin d’espace
(margin-right)
3ème colonne float right
2ème solution
-
Colonne 1 puis colonne 3 et enfin colonne 2 dans le HTML
Colonne 1 en float left
Colonne 3 en float right
Colonne 2 on ne définit pas de float mais seulement sa marge (margin :0 auto) ppour que
la colonne se centre entre les autres.
« Position is everything »
Aligner 2 colonnes n’ayant pas la « même longueur »
section, aside{
padding-bottom:1000em;
margin-bottom:-1000em;
}
article{
overflow:hidden;
}
http://www.positioniseverything.net/
Un « article » ayant une
colonne « section » à gauche «et
une colonne « aside » à droite
24
6. Multi colonne pour texte
CSS
« count » nombre de colonnes
.three-columns-text {
column-count: 3;
column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
}
« gap » (gouttière) espace entre colonnes
Article Alsacréations
7. Clip
Sélection du cercle
Rect(top,right,bottom, left)
Requiert la position absolue ou fixe
CSS
img{
}
position:absolute;
clip:rect(50px,600px,300px, 350px);
8. overflow lorsque le contenu depasse du conteneur



hidden : ce qui dépasse est caché
visible : ce qui dépasse est affiché
auto et scroll : des scrollbars sont ajoutées au contenu
25
III.
Structure de la page HTML5
 L’en-tête (header) avec la barre de navigation (nav)
 Section, articles et aside pour le contenu.
Note : une section peut aussi avoir un en-tête et pied de page
 Le pied de page (footer) avec l’adresse (address) notamment
<!DOCTYPE html>
<html class="html" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
<div id="hero"><img src="Images/hero.png" alt="" /></div>
</header>
<section></section>
<footer></footer>
</body>
</html>
26
1. HEADER
a. LOGO et menu sur la même ligne
MENU
LOGO
Header
Conteneur
.container { width: 960px; height: 100%; margin: 0 auto; }
.floatLeft { float: left; }
.floatRight { float: right; }
content: "";
display: table;
}
.clearFix::after {
clear:both;
}
body {
margin: 0;
padding: 0;
}
/* HEADER */
header{
/*position:fixed;*/
width:100%;
background: #1c1c1c;
height:50px;
}
.logo{
float:left;
}
Header fixe
27
Menu flottant à droite
nav{
float:right;
}
nav ul{list-style-type:none;}
nav ul li{
display:inline;
padding: 0 5px 0 0;
}
nav ul li a{
padding: 10px;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
text-transform: uppercase;
color: #888;
-webkit-transition: color .2s ease-in;
-moz-transition: color .2s ease-in;
-ms-transition: color .2s ease-in;
-o-transition: color .2s ease-in;
transition: color .2s ease-in;
}
nav ul li a:hover {
color: #f7bd1e;
}
Champ « search »
input.search {
width: 140px;
height: 20px;
margin: 10px 10px 0 0;
padding: 4px 4px 4px 30px;
border-radius: 5px;
border: 1px solid rgb(150,150,150);
background: rgb(255,255,255) url('images/search.png') no-repeat 4px 4px;
}
28
Champ de
HTML
recherche à droite
<header>
<div class="container">
<div class="logo"><a href="#"><img src="images/logo.png" alt=""></a></div>

<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</div>
</header>
Sticky menu
Menu en position fixed. Ajouter du padding-top et bottom au header ainsi qu’une transition
header{
position: fixed;
width: 100%;
height: 50px;
padding: 25px 0;
-webkit-transition: padding 0.2s ease-in;
-o-transition: padding 0.2s ease-in;
transition: padding 0.2s ease-in;
}
jQuery (en bas de la page)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
On met le padding à 0 et on
$(window).scroll(function() {
change le logo pour un plus petit
if ($(window).scrollTop() >= 100) {
$('header').css('padding', '0');
$(".logo img").attr("src", "images/logoalt.png");
} else {
$('header').css('padding', '25px 0');
$(".logo img").attr("src", "images/logo.png");
}
});
});
</script>
29
b. LOGO et menu sur une ligne chacun
LOGO
MENU
.container { width: 960px; height: 100%; margin: 0 auto; }
.floatLeft { float: left; }
.floatRight { float: right; }
content: "";
display: table;
}
.clearFix::after {
clear:both;
}
body {
margin: 0;
padding: 0;
height:1500px;
}
/* HEADER */
header{
/*position:fixed;*/
width:100%;
}
.logo{
padding:20px 0;
}
.logo img{ display:block; margin:0 auto;}
HEADER
Conteneur
30
MENU
nav{
background-color: #252525;
}
nav ul{ margin:0; padding:0; list-style-type:none; }
nav ul li{
float:left;
width:25%;
padding:3px 0;
}
nav ul li a{
display:block;
text-align:center;
padding: 10px;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 1em;
text-transform: uppercase;
color: #888;
-webkit-transition: color .2s ease-in;
-moz-transition: color .2s ease-in;
-ms-transition: color .2s ease-in;
-o-transition: color .2s ease-in;
transition: color .2s ease-in;
}
nav ul li a:hover {
color: #f7bd1e;
}
HTML
<header>
<div class="logo"><a href="#"><img src="images/logo.png" alt=""></a></div>
<nav class="clearFix">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</div>
</header>
31
Sticky menu
jQuery (en bas de la page) .Menu en position fixed
<script>
Effet de slide, on
affiche et cache le logo
avec une transition
$('.logo').slideUp(1000);
d’une seconde
} else {
$('.logo').slideDown(1000);
}
});
});
</script>
32
IV.
Couleurs
Les 16 couleurs du Web
Hexadécimal
#FFFFFF
RGB
rgb(194,198,74)
Valeurs comprises entre 0 et 255
Rgba (pour gérer l’opacité)
Compris entre 0
(transparent) et 1 (visible)
background-color: rgba(255, 0, 0, 0.5);
HSL (« teinte saturation lumière »)/ HSLA (avec opacité)
hsla(120,5%,40%,0.50);
Couleur (ex 120 = vert), saturation
en %, lightness en %, opacité
33
Nuancier de Dreamweaver
Ajout de la couleur sélectionnée au nuancier
Adobe Kuler
Permet de créer, trouver des thèmes facilement et les utiliser.
https://color.adobe.com/fr/create/color-wheel/
On peut utiliser le panneau Extract pour extraire par exemple un nuancier que l’on aurait
réalisé avec Photoshop (*.psd).
34
V.
Texte
1. font-size
Taille absolue (en px) ou relative (en %, em) s'adapte plus facilement
 Avec xx-small, x-small, small , medium , large, x-large, xx-large …
Exemple
p{
font-size: small;
}
h1{
font-size: large;
}
 Avec em … 1em représente la taille normale. 1.6 par exemple pour grossir ou 0.8 pour
diminuer
Formule pour calculer la taille avec em correspondante à une taille en px :
Taille désirée en px / taille de base en px= taille em
De base 1em = 16px. Si on veut calculer pour une taille de police de 24px :
24px/16px =1.5em
On peut tester le comportement de la police depuis Dreamweaver lorsqu’on augmente
ou réduit la taille de la police (en mode « Création »)
Menu « Affichage » … « Rendu du Style »
2. font-family
Depuis la propriété font-family du panneau CSS designer on a accès …
« Local font » ajoutée
« Edge Web Font » ajoutée
Ouvre une boite de dialogue pour
ajouter une nouvelle police
35
a. Web safe fonts :









Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Indiquer plusieurs polices
body{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
Custom font avec Dreamweaver
On peut sélectionner ou ajouter
sa propre liste
36
b. @font-face
Le navigateur des visiteurs télécharge automatiquement le fichier de la police
@font-face {
font-family: 'MaPolice';
src: url('MaPolice.eot');
}
Utilisation de la police
h1 {
font-family: 'LearningCurveProRegular', Arial, serif;
}
c. Local fonts
Parcourir jusqu’au dossier
de la font
Cocher « je détiens la
License… » puis « Ajouter »
(CSS ajouté par Dreamweaver)
Quelques sites de fonts :fontsquirrel.com , dafont.com , Google fonts
Google font – Exemple d’utilisation
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
p{
font-family: 'Lobster', cursive;}
</style>
37
d. Edge Web Font
(CSS ajouté par Dreamweaver)
+ Script
e. Autres propriétés utiles
Italic, normal avec font –style
Gras avec font-weight :bold
Décorations
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
Alignement avec text-align (left, center, right ou justify)
Ombre avec text-shadow
h1{ text-shadow: 2px 2px 4px black; }
Text-transform capitalize (mettre la première lettre du ou des mots en majuscule)
Font-variant : small-caps pour mettre le texte en majuscules.
Indentation avec text-indent (à 1em par exemple)
f. Balise time
http://www.alsacreations.com/article/lire/1386-html5-element-time.html
38
3. Collage spécial
Exemple copier un texte depuis Word (avec titre, paragraphes) et le coller dans Dreamweaver
(dans une balise article)
On peut aussi copier-coller directement dans la page en mode « Création ».
4. Orthographe
Depuis le menu « Commandes » … « Orthographe » il est possible de trouver les fautes
d’orthographe et les corriger.
Suggestions pour corriger l’erreur
On peut changer la langue du dictionnaire (ici « Français ») depuis le Menu « Edition » …
« Préférénces »… Onglet « Général »
39
VI.
Liens
1. Lien absolu
2. Lien relatif
3. « Site-root »
4. Ancres
 Créer une ancre (utile pour les pages avec menu fixe par exemple)
 Dans la même page
On dirige vers un élément de la page par l’ID
 Ancre d’une autre page
5. Email
6. Styles des liens
a. Pseudo-classes :




a :hover (souris au-dessus du lien)
a :active (clic)
a :link (page pas encore visitée)
a :visited (page visitée)
b. Appliquer un Style de lien à tous les liens de la page
Menu « Modifier » …. « Propriétés de la page »
Le CSS généré est ajouté dans la balise Style de la page.
40
7. Image Map
Il suffit d’insérer une image puis depuis les propriétés de l’image
Outils
sélection, zone réactive rectangulaire,
On utilise les outils de zone
réactive
circulaire et polygonale
… Code généré
<img src="images/dessin.png" alt="" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="75,61,245,231" href="#">
<area shape="circle" coords="464,179,102" href="#">
<area shape="poly"
coords="195,360,195,463,366,462,368,513,536,413,369,312,367,361" href="#">
</map>
41
8. Trouver les liens brisés avec le panneau vérificateur de lien
Menu « Fenêtre » … « Résultats »… « Vérificateur de lien »
Trouver les liens brisés du
site
VII. Image
1. Insérer une image
 Depuis le panneau « Insertion » ou le menu «du même nom.
 On peut également l’ajouter depuis le panneau « Actifs » (Assets)
On peut définir dans les propriétés du site (Menu « Site » … « Gérer les sites ».. onglet
« Infos locales ») le répertoire par défaut vers lequel les images insérées seront copiées
automatiquement.
Propriétés
- alt texte affiché en remplacement de l’image
- title infobulle
<img src="images/nuage.jpg" alt="Photo de nuage" title="Un beau nuage bleu ! " />
Formats : JPEG ou PNG pour les images, GIF animé
2. Utilisation de figure pour image avec légende
On peut avoir plusieurs images (ou autre élément)
<figure>
<img src="../images/plage.jpg" alt=""/>
<figcaption>Une belle plage</figcaption>
</figure>
Note : la légende (figcaption) peut être avant ou après l’image.
42
3. Modifier une image vers un éditeur (Photoshop ou autre)
Depuis les proprités de l’image cliquer sur le bouton
Par défaut l’image est ouverte dans Photoshop. On peut modifier depuis les Préférences(Menu
« Edition ».. « Préférences »)
4. Insérer un fichier psd
Glisser déposer depuis l’explorateur de fichiers
43
… Une image au format est ensuite enregistrée dans le répertoire « images » du site.
Icône indiquant que le fichier est
synchronisé avec le psd. Si on effectue des
modifications (et que l’on sauvegarde)
depuis Photoshop … on peut appliquer les
modifications depuis le panneau
« Propriétés » de l’image.
Le fichier original (psd) est indiqué
5. Image survolée (Rollover image)
Depuis le menu ou le panneau « Insertion »
Image normale
Image survolée
44
Aperçu
… Survol
6. Background image
On peut définir les propriétés d’une image d’arrière-plan (no-repeat, mosaïque, etc.) + couleur
de fond (en cas de dépassement de l’image) depuis propriétés de la page (Menu « Modifier »…
« Propriétés de la page »)
En CSS
body
{
background: url("nuage.png") fixed no-repeat top right;
}
Plusieurs images de fond
body
{
background: url("nuage.png") fixed no-repeat top right, url("nuage_alternatif.png") fixed;
}
45
Image d’arrière-plan fixe
body {
background-image: url(images/backgroundimage.jpg);
background-size: cover;
background-attachment: fixed;
}
7. Feuille de Sprites et background-position
<a href="#" class="ico ico-facebook"><span>Facebook</span></a>
CSS
a.ico {background:url('images/icons.png') no-repeat 0 0;}
a.ico-facebook, a.ico-twitter {
height:16px;
width:16px;
}
a.ico-facebook {
background-position:0 0;
}
a.ico-twitter {
background-position:-16px 0;
}
a.ico span{display:none;}
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
46
VIII. Listes
Liste à puces, ordonnée
Liste à puces
<ul>
<li>Pomme</li>
<li>Poire</li>
<li>Pèche</li>
</ul>
Liste ordonnée (avec numéro)
<ol>
<li>Pomme</li>
<li>Poire</li>
<li>Pèche</li>
</ol>
Menu de base
HTML
<header>
<h1>Titre de la page</h1>
<nav>
<ul>
<li><a class="active" href="index.html">Accueil</a></li><li><a
href="gallery.html">Galerie</a></li><li><a href="aboutus.html">A propos</a></li><li><a
href="contact.html">Contact</a></li></ul>
</nav>
</header>
CSS
body{margin:0 auto;}
ul{padding:0;}
 Version avec inline-block
ul li{
list-style-type:none;
Remplacer float par display : inlinefloat:left;
block
width:25%;
Attention également aux espaces
}
blancs dans le code HTML
ul li a{
display:block;
text-align:center;
color:white;
text-decoration:none;
padding:5px 0 5px 0;
}
ul li a:hover{
background-color:deepskyblue;
}
47
Astuces
Menu avec images :
-
Image en background des liens (balise « a ») du menu avec repeat x
Image (ou effet CSS) pour mouse hover sur le lien
Image en background pour la liste (balise « ul ») avec tailles (width et height)
Menu avec image au-dessus du lien au survol
-
Ajouter du padding top au lien (balise « a ») et ajouter une image en background du lien à
mouse hover
Exemple : background: url(../images/monimage.jpg) no-repeat center 10px;
Afficher la page active dans le menu
-
Créer une classe « active » par exemple avec personnalisation CSS pour le lien correspondant
à la page.
Exemple pour la page home dans le menu <a href= »home.html »
class= »active »>HOME</a>
48
IX.
Table
Insérer un tableau depuis le panneau « Insertion »
<table width="200" border="1" summary="Liste de contacts sur twitter">
<caption>
Liste de contacts twitter
</caption>
<tbody>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Importer un fichier CSV
Menu « Fichier » … « Importer des données tabulaires »
49
X.
Formulaire
Utiliser l’onglet « Formulaire » du panneau « Insertion » pour insérer des éléments de formulaire
facilement.
Regrouper les champs avec fieldset
a. Form
Attributs : id, method, action, etc.
<form id="userForm" method="post" action="service.php" novalidate>
</form>
b. Fieldset
Grouper des éléments
<form>
<fieldset><legend>Vos informations</legend>
< !-- champs -->
</fieldset>
<fieldset><legend>Vos coordonnées</legend>
< !-- champs -->
</fieldset>
</form>
Attribut
 disabled
c. Label
Étiquette pour un champ
<label for="userName">Nom :
<input id="userName" name="userName" type="text" placeholder="Entrez votre
nom" required>
</fieldset>
d. Input
type :










button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
50













month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Attributs :
- Selection auto avec autofocus
<input type="text" name="first" id="first" autofocus />
- Placeholder
<input type="text" name="first" id="first" placeholder="Entrez votre prénom" />
- Validation : Rendre obligatoire (required)
<input type="text" name="first" id="first" required />
+ min, max, step, pattern, title (info bulle)
e. Textarea
zone de texte multi lignes
f. Button
<button>Click !</button>
g. Datalist
<input list="fruits">
<datalist id="fruits">
<option value="Pomme">
<option value="Pêche">
<option value="Poire">
</datalist>
h. Select
drop down list + option (item de select)
<label for="fruits">Quel fruit ?</label><br />
<select name="fruits" id="fruits">
<option value="pomme">Pomme</option>
<option value="poire">Poire</option>
</select>
51
i. Case à cocher
<input type="checkbox" name="choix" checked />
j. Boutons radio
<p>
<label>
<input type="radio" name="fruits" value="Poire" id="fruits_0">
Poire</label>
<br>
<label>
<input type="radio" name="fruits" value="Pomme" id="fruits_1">
Pomme</label>
<br>
</p>
k. Validation HTML5 de formulaire
Attributs required, minlength/maxlength, min/max, pattern, novalidate (formulaire validé
malgré les erreurs), placeholder, etc.
http://www.alsacreations.com/tuto/lire/1370-formulaire-html5-placeholder-requiredpattern.html, http://www.w3.org/TR/html5/forms.html
52
XI.
Médias
Utiliser l’onglet « Médias » du panneau « Insertion »
Insérer une animation Edge (*.oam)
Vidéo avec les contrôles, etc.
Musique
Un « objet Flash »
Une vidéo Flash
a. Audio
Formats :MP3, OGG (format libre), AAC (Apple sur iTunes) et WAV (format non compressé)
MP3
IE
Ok
Chrome
Ok
Ok
Ok
Firefox
Safari
OGG
Ok
Ok
Opera
<audio src="music.mp3" controls></audio>
b. Vidéo
Besoin de :
-
« Format conteneur » (avi, mp4,…)
Un codec audio : (mp3, ogg…)
Un codec vidéo (H.264, Ogg Theora, WebM)
H.264
IE
Ogg Theora
Ok
WebM
Ok
Chrome
Ok
Ok
Firefox
Ok
Ok
Ok
Ok
Safari
Ok
Opera
Ok
Utiliser Adobe Media Encoder CC ou Microsoft Expression Encoder (gratuit) pour encoder
les vidéos pour le web.
53
<video width="1280" height="780" id="player" title="Animation Photoshop plage et nuage"
poster="images/plage_nuage_et_nom.jpg" controls >
<source src="media/plage_avec_nuage.mp4" type="video/mp4">
</video>
Propriétés
 YouTube/ Vimeo
Avec embed, object ou avec le code fourni du sur la page YouTube/ Vimeo de la vidéo depuis
« Partager » ... « Intégrer »
c. Social Media
Exemple avec Twitter
On crée un Widget (depuis
les paramètres du compte)
Il suffit de copier le code à
insérer dans sa page
54
« Share buttons »




https://developers.facebook.com/docs/plugins/like-button
https://developers.google.com/+/web/+1button/?hl=fr
https://about.twitter.com/resources/buttons#tweet
https://developer.linkedin.com/plugins/share
XII.
Optimisation pour les moteurs de recherche (SEO)
Pour chaque page. Menu « Insertion »… « Head » …
 Mots-clés
 Description
 Viewport
Propriété « title » des images.
55
XIII. Support de jQuery UI et jQuery Mobile
1. jQuery UI
Référencer jQuery et jQuery UI avec CDN ou localement.


CDN : Google, Microsoft, cdnjs,
Télécharger les sources sur le site de jQuery
Exemple avec CDN google
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jqueryui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.min.js"></script>
Utiliser ensuite les Widgets de l’onglet « jQuery UI » du panneau « Insertion » (ou depuis le
menu « Insertion »)
2. jQuery Mobile
Référencer jQuery et jQuery Mobile avec CDN ou localement.
Exemple avec CDN Google
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></scri
pt>
Utiliser ensuite l’onglet « jQuery Mobile » du panneau « Insertion » (ou depuis le menu
« Insertion »).
Note : si vous n’avez pas référencé jQuery et jQuery Mobile à l’ajout du premier Widget.
56
Une boite de dialogue permettant de sélectionner les fichiers jQuery Mobile s’ouvre :
Fichiers ajoutés au site
(Local) ou utilisation
d’un CDN. Changer les
chemins.
 Ajout d’une page
On peut indiquer l’ID et si on veut l’en-tête et le pied (data-role)
Code généré
<div data-role="page" id="pageOne">
<div data-role="header">
<h1>En-tête</h1>
</div>
<div data-role="content">Contenu</div>
<div data-role="footer">
<h4>Pied de page</h4>
</div>
</div>
On peut ajouter d’autres pages jQuery dans la même page HTML
XIV. Transitions
N’importe quelle propriété peut
être animée
a. Syntaxe
transition-property : property_name ;
transition-duration: duration ;
transition-timing-function : timing_funtion ;
transition-delay : delay ;
Ou raccourci
Durée de l’animation
Easing :
ease, linear, ease-in, ease-out, ease-in-out
Délai (optionnel)
-webkit-transition : property_name duration timing_function delay ;
-moz-transition : property_name duration timing_function delay ;
57
-o-transition : property_name duration timing_function delay ;
-transition : property_name duration timing_function delay ;
Utiliser le panneau « CSS Transition » pour ajouter une ou plusieurs transitions
b. Exemple
On a un overlay. Il est caché par défaut et apparait quand la souris passe dessus. On ajoute une
transition.
HTML
<div id="container">
<img src="images/raiden-poster.jpg" width="250" height="141" />
<div class="overlay"><a href="#" class="title">RAIDEN</a></div>
</div>
Appliquer
cette règle
On se place
sur l’overlay
et on ajoute une transition depuis le panneau « Transition CSS »
à toutes les
propriétés ou
seulement à celle
indiquée
Cible et
« événement »
Durée de la transition en secondes
ou millisecondes(s ou ms)
Délai de
déclenchement
(optionnel)
Valeur de fin de la
propriété
On peut ajouter, supprimer,
modifier des transitions depuis
le panneau « Transitions CSS »
58
CSS
#container{
position:relative;
width:250px;
height:141px;
Le conteneur en
background-color:#FFFFFF;
position relative et
overflow:hidden;
l’overlay en position
margin:0;
absolue pour le
display:inline-block;
placer sur l’image
}
.overlay {
position: absolute;
background: rgba(201,22,66,0.60);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
Code ajouté après ajout
}
de la transition avec le
.title{
panneau « Transition
position: absolute;
CSS »
top: 0;
left: 0;
right: 0;
color: #FFFFFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
padding-top: 10px;
background-size: contain;
text-align: center;
bottom: 0px;
}
.overlay:hover {
-webkit-opacity: 1;
opacity: 1;
}
59
XV. Web Responsive
On distingue 2 types de disposition :
-
Fixe : Tailles et marges fixes en pixels (px). La page ne se redimensionne pas.
Fluide (ou « flexible ») : Tailles et marges définies en % et em. La page se
redimensionne et ses éléments s’adaptent. On peut définir une taille min et max pour le
corps (body) et les éléments, ce qui a pour effet d’interrompre leur « flexibilité ».
A cela s’ajoute les media queries qui permettent de définir une version de page selon une
résolution.
1. Viewport
Les navigateurs Mobiles simulent une largeur d'écran (viewport). Demander à ce que le
viewport soit le même que la largeur de l'écran :
<meta name="viewport" content="width=device-width, inital-scale=1" />
Définir la largeur :
<meta name="viewport" content="width=320" />
2. Requête Média
Requête media
 En lien : une feuille de style par device + règle média dans le lien
<link href="css/default.css" rel="stylesheet" type="text/css" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (max-width:
768px)" >
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:
1200px)" >
Attention à bien conserver les espaces
 Dans la (ou les) feuille(s) de Styles
@media screen and (max-width: 1280px)
{
}
Exemples
@media screen and (max-width: 1280px)
@media all and (min-width: 1024px) and (max-width: 1280px)
@media tv
@media all and (orientation: portrait)
color (en bits/pixel)
height
min-height
max-height
width
min-width
max-width
device-height
device-width
orientation(portrait ou paysage)
@media screen and (max-width: 1280px), screen and …
media (sortie) :
all
screen
tv
projection
print
handheld
Combinées avec : only, and, not
60
Si on veut éviter que les anciens navigateurs (IE6) lisent, utilisation de only
@media only screen …
Portrait
Mobile
320x480
Tablette
768x1024
Tailles d’écrans mobiles, tablettes et desktop
Paysage
480x320
1024x768
Desktop First
/* default – desktop */
/* tablette */
@media (max-width: 768px) {
}
/* mobile*/
@media (max-width: 480px) {
Héritage
CSS
}
Mobile First
/* default-mobile*/
/* tablette */
@media (min-width: 768px) {
}
/* desktop */
@media (min-width: 1200px) {
Héritage
CSS
}
Utiliser « max-width » pour empêcher l’héritage de Styles.
Ajouter une media query avec Dreamweaver
Depuis le panneau « CSS Designer »
Permet d’ajouter une media query
La page affiche automatiquement l’aperçu
pour la media query sélectionnée
61
Ajout des différentes
règles
Aperçu
Il est possible également de dupliquer des CSS vers une media query
Tester sa page sous différents devices/ résolutions
Depuis Dreamweaver … On peut régler sur « Taille réelle » et tester les déformations de sa page
Extension Chrome
Screenfly, Edge Inspect, Opera Mobile Emulator, Tester sa page sur IE6,IE7, etc.
3. iPhone Font resizing en mode landscape
Prévenir le redimensionnement (grossissement) de la police en mode paysage pour iPhone.
html {-webkit-text-size-adjust: none; }
4. Box-sizing
*{ box-sizing : border-box ;}
62
5. Anciennes versions de IE et HTML5
Pour que les versions antérieures à IE9
<head>
comprennent
HTML5 et les media queries
<meta charset="utf-8" />

<title> </title>
</head>
HTML5SHIV
6. 12-column Grid
Il existe des frameworks CSS 960gs, gridiculous ou encore notjustagrid. On peut également créer
ses grilles soi-même.
960
.container {
margin: 0 auto;
width: 960px;
}
.row::after { content:''; display: block; clear:both; }
.column-12,.column-11,.column-10,.column-9,.column-8,.column-7,.column-6,.column5,.column4,.column-3,.column-2,.column-1{ float:left; margin:0 10px; }
.column-12{ width:940px;}
63
1200
.container {
margin: 0 auto;
width: 1200px;
}
On pourrait utiliser display : inline.column-10{ width:980px;}
block à la place de float. Attention
toutefois aux espaces blancs dans le
HTML
1500
.container {
margin: 0 auto;
width: 1500px;
}
64
Version avec %
.container {
margin: 0 auto;
Exemple pour 960px
width: 960px;
}
.column-12,.column-11,.column-10,.column-9,.column-8,.column-7,.column-6,.column5,.column4,.column-3,.column-2,.column-1{ float:left; margin:0 1%; }
.column-12{ width:98%;}
.column-11{ width:89.666%;}
.column-5{ width:39.666%}
.column-4{width:31.333%;}
.column-3{width:23%;}
.column-2{width:14.666%}
.column-1{width:6.333%}
Version avec « padding »
.column-12, .column-11, .column-10, .column-9, .column-8, .column-7, .column-6, .column-5,
.column-4, .column-3, .column-2, .column-1 { float: left; padding: 0 2%; }
.column-12 { width: 100%; }
.column-11 { width: 91.666%; }
.column-10 { width: 83.333%; }
.column-8 { width: 66.666%; }
.column-7 { width: 58.333%; }
.column-5 { width: 41.666%; }
.column-4 { width: 33.333%; }
.column-2 { width: 16.666%; }
.column-1 { width: 8.333%; }
65
Exemples d’utilisation
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grid system</title>
<style type="text/css">
body{margin: 0;}
.green{background-color: green;}
.red{background-color: red;}
.blue{background-color: blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/grid960.css" />
</head>
<body>
<div class="container green">
<div class="row">
Une ligne avec 6
<div class="column-2 red">1</div>
colonnes
</div>
<div class="row">
<div class="column-1 blue">1</div>
<div class="column-1 blue">2</div>
</div>
</div>
</body>
</html>
66
Autre exemple 3 boites qui se superposent sur mobile.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Responsive</title>
<style>
*{ box-sizing : border-box ;}
body{ margin: 0; }
.container {
margin: 0 auto;
width: 960px;
}
.column-4 {
float: left;
width: 33.33%;
}
.column-4{
width:300px;
float:left;
margin:0 10px;
background-color:red;
}
@media (max-width: 480px){
.column-4 {
width: 100%;
margin: 0;
background-color:lightblue;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column-4">box 1</div>
</div>
</div>
</body>
</html>
3 colonnes sur une ligne par défaut
… se superposent sur mobile
Pour l’exemple on fait simple mais cela
pourrait être 3 « aside » avec une
image (svg) et un texte en dessous, ou
bien 2 articles et un aside
67
7. Menu Responsive
Bureau
Mobile
a. Version avec float
Bureau
ul{padding:0;}
ul li{
float:left;
width:25%;
}
ul li a{
display:block;
text-align:center;
color:white;
}
ul li a:hover{
}
Float et width (divisée par
le nombre de menus)
Mobile
@media all and (max-width: 480px)
{
ul li{
clear:both;
width:100%;
}
}
Clear et taille sur toute la
largeur
68
b. Version avec inline-block
header ul{padding:0;}
ul li{
display:inline-block;
width:25%;
}
ul li a{
display:block;
text-align:center;
color:white;
}
ul li a:hover{
}
Mobile
@media all and (max-width: 480px)
{
ul li{
display:block;
width:auto;
}
}
HTML
Block et dimension réglée sur
auto (pour que la taille ne reste
pas sur 25%)
Attention ! bien gérer les espaces blancs au passage
inline-block
<header>
<h1>Menu Responsive</h1>
<ul><li><a href="#">Home</a></li><li><a href="#">Gallery</a></li><li><a
href="#">About us</a></li><li><a href="#">Contact</a></li></ul>
</header>
8. Image « flexible »
Exemple avec une image flottante dans un paragraphe.
En redimensionnant la page la taille de l’image s’adapte
69
p img{ float:left; width:30% }
9. Image crop
On définit une image de fond pour une div. En redimensionnant la page, l’image est
partiellement cachée.
.img-crop{
height:585px;
background:url(images/plage_nuage.jpg) no-repeat;
}
10. Grilles fluides avec Dreamweaver
Permet de définir la structure de sa page facilement et gère automatiquement le passage des
colonnes « horizontal » « vertical » selon la taille de la page.
Menu « Fichier »… « Nouveau » … Onglet « Mise en forme de grille fluide »
70
On demande ensuite d’enregistrer la feuille de styles (la nommer par exemple « fluid-grid.css »)
et l’enregistrer dans le dossier de css du site.
Boilerplate.css (boilerplate) et respond.min.js (respond) sont ajoutés également au site et
référencés dans la page.
La page ressemble à cela
On peut basculer entre la résolution pour téléphone, tablette et bureau
71
Lorsque l’on insère un élément dans la page (depuis le panneau « Insertion »), exemple avec
« section » … la classe « fluid » est automatiquement ajoutée.
<section id="main" class="fluid ">Ceci est le contenu de la balise Section de mise en forme
« main »</section>
On peut dupliquer, supprimer, déplacer les éléments depuis le concepteur.
Cacher (permet de cacher par ex une colonne sur la version mobile),
remonter d’un niveau, dupliquer, supprimer
Lorsqu’on redimensionne une
« div » le nombre de colonnes est
indiqué
 CSS (« orienté Mobile First »)
Dans la feuille de styles que l’on a demandé de nommer et sauver (exemple « fluid-grid.css »). On
a accès directement aux media queries et peut y ajouter ses styles.
72
XVI. LESS
Peut-être utile pour définir par exemple les couleurs d’un thème et les « tailles fixes ». Ainsi on peut
très facilement modifier les variables et observer les modifications de sa page.
Développement
Besoin : Exécution sur un serveur + feuille de styles « *.less » + script less
<link href="css/styles.less" rel="stylesheet/less" type="text/css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
Production
Générer la feuille de styles « *.css » avec SimpLess ou WinLess (en ligne et tool)
Remplacer par cette feuille de Styles.
Il existe une extension « DMXzone LESS CSS Compiler » que je ne recommande pas car elle semble
assez buggée avec la dernière version de Dreamweaver.
XVII. Templates
On peut sauvegarder une page comme modèle pour laquelle on va définir des zones
éditables .On pourra réutiliser ces Templates .
1. Enregistrer une page html en tant que modèle
Menu « Fichier »… « Enregistrer comme modèle »
73
Un modèle (*.dwt) est alors généré et ajouté au site dans un dossier « Templates »
Utiliser l’onglet « Modèle » du panneau « Insertion »
1. Région modifiable
Exemple on sélectionne une balise h1 et on clique sur « Région modifiable » dans le panneau
« Insertion »
Une boite de dialogue s’ouvre, il suffit d’indiquer un nom pour cette région modifiable.
Dans le modèle le code de la balise h1 ressemble désormais à cela
2. Attribut modifiable
Exemple : rendre éditable l’attribut « src d’une image.
74
Sélectionner la balise image puis menu « Modifier »… « Modèles ».. « Rendre l’attribut
modifiable »
La balise image ressemble désormais à cela dans le modèle :
Et le templateParam
3. Créer une page à partir d’un modèle du site
Menu « Fichier » … « Nouveau »… Onglet « Modèles du site »
On retrouve les modèles
enregistrés
75
Pour éditer facilement les attributs modifiables …menus « Modifier » … « Propriétés du modèle »
Pour les régions éditables, soit dans le code soit sur la page en mode création.
Exemple on modifie le titre.
Il est possible de modifier le Template par la suite, la page étant synchronisée avec celui-ci.
76
XVII. WordPress avec Dreamweaver
1. Installation locale
1. Besoins Apache (serveur), PHP (langage de script), MySQL (base de données) +
PhpMyAdmin ou utilisation d’un bundle :
 WampServer pour Windows (32 et 64-bit)
 MAMP pour Mac OSX
 XAMP pour Windows (32-bit uniquement) et MAC OSX
2. Télécharger WordPress https://wordpress.org/
3. PhpMyAdmin : Créer une base de données « worpressdb » par exemple
4. Copier le dossier du site vers le répertoire « www » (possibilité de renommer le
dossier wordpress en blog par ex)
5. Connexion à la page du blog « http://localhost/[directory] / » (par exemple
« http://localhost/blog/ »)
Laisser vide si pas de mot de
passe
Recommandé de changer
de préfixe pour sécurité
… Puis lancer l’installation
77
On peut se connecter
6. Configuration du Site avec Dreamweaver
Créer un nouveau Site
78
… Serveur local
Décocher distant (remote) et cocher évaluation (testing)
79
Interface
L’option « détecter » (discover) permet de
trouver tous les fichiers en relation
On peut lancer l’aperçu dans le
navigateur (F12 navigateur par défaut)
Filtrer les fichiers
Activer la navigation entre liens dans Dreamweaver
80
2. Child Theme
Permet de créer et personnaliser un thème à partir d’un thème existant
Création d’un dossier contenant le thème et y
ajouter la feuille de style et un screenshot du
thème (respecter les noms par convention).
On pourrait également nommer le thème
« twentytwelve-child »
/*
Theme Name: Custom Twenty Twelve
Description: un thème customisé de "Twenty Twelve"
Author: J. Romagny
Ici on customise le thème « Twenty Twelve » de
Template: twentytwelve
*/
WordPress. Ces infos en commentaire seront
affichées dans WordPress
@import url('../twentytwelve/style.css');
Import de la feuille de style de base
body{background-color:hsla(0,0%,0%,0.82);}
Puis on change par exemple la couleur de fond
et une classe CSS de la feuille de Styles de base
.site{
min-width:90%;
margin:0 auto;
}
Le thème est alors disponible et activable depuis WordPress.
81
3. Thème personnel
Dossiers supplémentaires uniquement si
besoin (dossier images, fonts, etc.)
Structure de base
html5.js dans dossier js pour
HTML5 SHIV
Index.php « assemble les différentes
parties »
Screenshot du thème (300x225px)
Aucune contrainte au niveau des CSS (ID, noms de classe)
header.php
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset');?>">
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
Permet d’afficher le
$site_description = get_bloginfo( 'description', 'display' );
titre de la page + le
if ( $site_description && ( is_home() || is_front_page() ) )
nom du blog dans
echo " | $site_description";
l’onglet
du navigateur
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s' ), max( $paged, $page ) );
?>
Lien vers la feuille de Styles
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>"
/>

Web Font. Il faudra ajouter
« manuellement » le script
<script>var __adobewebfontsappname__="dreamweaver"</script><script
src="http://use.edgefonts.net/immi-five-o-five:n4:default.js"
type="text/javascript"></script>
<script>
$('#top').slideUp(700);
} else {
$('#top').slideDown(700);
}
82
});
</script>
});
</head>
Définition de l’en-tête
<body <?php body_class(); ?>>
des pages
<div id="outerWrapper">
Titre du blog avec lien
<header>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');
?></a></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
Description du blog
<nav>
<?php wp_nav_menu(); ?>
</nav>
</header>
</div>
index.php
Insertion du header (header.php)
<?php get_header(); ?>
Boucle sur les posts
<div id="contentWrap" class="clearFix">
<div id="content">
<?php if ( have_posts() ) : ?>
Titre du post avec lien vers la détails
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry">
Contenu du post
<?php the_content(); ?>
</div>
<div class="postmetadata">
Posté par <?php the_author() ?> le <?php the_time('d M Y') ?> dans <?php
the_category(', ') ?> |
<?php comments_popup_link('Pas de Commentaire »', '1 Commentaire
»', '% Commentaires »'); ?>
Informations et commentaires
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div> 
Insertion du Sidebar (sidebar.php)
<?php get_sidebar(); ?>
</div> 
<?php get_footer(); ?>
Insertion du footer (footer.php)
83
La sidebar affichera une liste de widgets
(que l’on peut configurer depuis l’onglet
Widgets dans WordPress)
sidebar.php
<div class="widget-area">
<?php if ( ! dynamic_sidebar( 'Sidebar Widgets' ) ) : ?>
<aside id="search" class="widget">
<?php get_search_form(); ?>
</aside>
<aside id="archives" class="widget">
<h3 class="widget-title">Archives</h3>
<ul>
<?php wp_get_archives('type=monthly&limit=12'); ?>
</ul>
</aside>
<?php endif; // end sidebar widget area ?>
</div>
footer.php
<footer>
<p>Copyright © <?php echo date("Y"); echo " "; bloginfo('name'); ?></p>
</footer>
</div> 
Plus ou moins complexe selon les
<?php wp_footer(); ?>
</body>
besoins
</html>
single.php (page permettant d’afficher le détail d’un post + affichage/ saisie de commentaires
<div id="contentWrap">
<div id="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div>
<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number'));
?>
<div class="postmetadata">
Posté par <?php the_author() ?> le <?php the_time('d M Y') ?> dans <?php
the_category(', ') ?> |
<?php comments_popup_link('Pas de Commentaire »', '1 Commentaire
»', '% Commentaires »'); ?>
</div>
</article>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div> 
<?php get_sidebar(); ?>
</div> 
<?php get_footer(); ?>
84
Style.css
/*
Theme Name: Personal
Description: un thème créé par J. Romagny
Author: J. Romagny
*/
Puis les styles ainsi que
les media queries pour le
Web responsive
functions.php
Pour les zones de
Widgets
<?php
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar Widgets',
'id' => 'sidebar-widgets',
'description' => 'Widgets for the sidebar.',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
function new_excerpt_length($length) {
return 10;
}
add_filter('excerpt_length', 'new_excerpt_length');
Pour les posts réglés pour
n’afficher qu’un extrait. Marche
par « couple » (action, filtre)
function new_excerpt_more($more) {
global $post;
return '... <a href="'. get_permalink($post->ID) . '">Lire la suite</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
?>
Autres pages PHP possibles :
-
404.php affichant un message personnalisé
Search.php page de résultats de recherche personnalisée
page.php
archive.php page archives personnalisée
Ou créer ses propres Templates de page
Exemple de Template
<?php
/*
Template Name: About
*/
?>
<!-- etc. ->
Donner un nom au template
et sauvegarder au format
*.php
85
Quand on crée une nouvelle page dans WordPress le modèle sera alors sélectionnable
 Plugin
Il est possible également de modifier la feuille de style des plugins installés. (style.css)
4. Ressources
Documentation
Fonctions prédéfinies PHP de WordPress
Data et heure
86
5. Publication
a. Export
« Outils » … « Exporter » (téléchargement d’un fichier XML)
 Import
« Outils » … « Importer »
… Activer l’extension
87
… Puis import
b. Database Backup
Depuis PhpMyAdmin .. Onglet « Export » de la base
Sauvegarde fichier SQL
Pour le backup :
-
soit Onglet « Import » : télécharger le fichier SQL
Soit copier-coller le SQL « Onglet « SQL »
88
c. Serveur distant
« Site » … « Gérer les sites » … Onglet « Serveurs »
89
Connecter/ déconnecter au serveur
distant

Dreamweaver

Transcription

Documents pareils

CORRIGE TYPE

TD2 : LES CSS

studio - ti6 - Placeman Pascal

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

Intégrateur Web Expert H/F Parue le 11/06/2014

bookmarks - Nathalie Vanassche

MONECHO - Stage Dev Informatique 2016

Comment créer un site internet en css et html

PROGRAMME DE FORMATION Création de sites internet