Archives de Catégorie: Trucs et astuces – Dreamweaver CS6

Formation Adobe DreamWeaver CC

Logo Adobe DreamWeaver CC
Logo Adobe DreamWeaver CC

Dreamweaver est un éditeur de site web WYSIWYG pour Microsoft Windows, et MacOS X commercialisé par Adobe Systèms sous licence utilisateurfinal.

Dreamweaver fut l’un des premiers éditeurs HTML de type « tel affichage, tel résultat », mais également l’un des premiers à intégrer un gestionnaire de site. Ces innovations l’imposèrent rapidement comme l’un des principaux éditeurs de site web.

PRE-REQUIS:

Vous êtes responsable de la construction et de la mise à jour de sites web et vous possédez déjà des connaissances de base de l’Internet (surf sur Internet et e-mails). Des connaissances approfondies de Windows / Mac Os sont indispensables. Une petite expérience des programmes graphiques et des connaissances de base en HTML constituent en plus.

OBJECTIFS:

Vous souhaitez concevoir un site web professionnel ? A l’issue de cette formation les participants seront capables de créer et de gérer un site Web statique et pages à contenu fixe.

CONTENU:

  • Principe de base:Création d’un site basic

1. Présentation de Dreamweaver: Son interface
2. Insertion de textes et images
3. Mise en page et conception de création de tableaux
Liens: hypertexte, U.R.L., Ancres,
Liens de messagerie
Ajout de graphismes: logo, photos, images…
Rendre les pages Web interactives à l’aide des comportements et des scénarios Dreamweaver

  • Fonctions avancées:

1. Template
2. Les feuilles de style CSS
3. formulaires
4. Ajout d’objets multimédias aux pages

Nous contacter :

JL GESTION SA

Bruxelles

JL GESTION SA
Avenue de l’indépendance Belge 58
1081 Bruxelles
Tel : +32 2 412 04 10 (gestion projet – comptabilité)
Tel: +32 2 412 04 11 (gestion projet – commercial)
Tel: +32 2 412 04 12 (secrétariat)
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@jlgestion.be
Site: www.jlgestion.be

Lille

JL GESTION SA
21 Avenue le Corbusier
59042 Lille Cedex
Tel : +33 3 59 81 17 85
Fax : +33 3 59 81 17 81
Gsm : +32 477 789 445
Email : selossej@jlgestion.be
Site: www.jlgestion.fr

Pour d’autres formations:

Sites

http://rhbusiness.be/

http://www.jlgestion.be/

Dreamweaver : Comment faire la somme des colonnes

Dans une nouvelle page : production.php

– Ajoutez un jeu d’enregistrements : rsprod
Il nous servira à lister l’ensemble des données contenu dans la table production, donc quand on appliquera la région répétée il faudra choisir tous les enregistrements

– Ajoutez à l’aide de l’assistant un tableau :

Menu Insertion > Onglet Application > Données Dynamiques :Tableau Dynamique

Maintenant que vous avez votre tableau sur votre page , faire les actions suivantes :

– Supprimez la région répétée

– Ajoutez une ligne en bas du tableau pour afficher les totaux des colonnes

– Ajoutez une colonne pour afficher la somme des lignes

– Appliquez la région répétée uniquement pour la ligne qui affichera les variables du jeu d’enregistrements

Nous devons pour faire la somme des colonnes, utiliser la fonction SUM, dans notre requête sql.
Cette fonction retournera la valeur calculée que nous devons associer à un alias exemple :

Pour obtenir le total de la colonne Janvier:

SUM(production.janvier) as total_janviertotal_janvier est le résultat que l’on utilisra pour l’affichage, voilà pour le principe.

Pour notre exemple :

Ajoutez un jeu d’enregistrements : rsTotal 

en mode avancé , saisir cette sql:

SELECT SUM(production.janvier) as total_janvier, SUM
production.fevrier) as total_fevrier,SUM( production.mars)
as total_mars
FROM production

NOUS CONTACTER :

Avenue de l’indépendance Belge 58
1081 Bruxelles
Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@jlgestion.be

Comment construire un site d’annuaire avec Dreamweaver

Voici un tutorial d’importance puisqu’il ne compte pas moins de 17 parties pour réaliser un site d’annuaire de sites (ou de liens) dont j’espère que vous l’utiliserez pour la bonne cause (et non pas pour en détourner la finalité – merci le Pagerank). Certaines pages de ce tutoriel sont à elles seules de véritables tuto en soi ! Un travail énorme… Jugez plutôt :

fig_16

Préparations

  • Définition du site
  • Création de la base de données (ne passe pas par PHPMyAdmin mais directement bia la console MySQL !)
  • Connection à la base
  • Création d’une template dans Dreamweaver

Back Office

  • Template du Back Office
  • Page de Login
  • Page de validation de liens
  • Moteur de recherche
  • Page de modification de lien
  • Page d’ajout de lien
  • Page d’ajout de categorie
  • Page de modification de categorie
  • Sécurisation du back office

Front Office

  • Moteur de recherche et affichage des catégories
  • Page de résultat
  • Page de liens récents
  • Page de soumission
  • NOUS CONTACTER :

    Avenue de l’indépendance Belge 58
    1081 Bruxelles
    Tel : +32 2 412 04 10
    Fax : +32 2 412 04 19
    Gsm : +32 485 212 722
    Email : selossej@jlgestion.be

Comment transférer des données via le client ftp de Dreamweaver

Dreamweaver

1- Configurer Dreamweaver :

  • Dans le menu site, cliquez sur Modifier les sites
  • Sélectionner le site que vous souhaitez modifier dans la liste
  • Cliquez sur le bouton modifier sur la partie droite
  • Cliquer sur l’onglet Avancé
  • Allez dans le menu info distantes
  • Dans la liste déroulante Accès, choisissez FTP
  • Remplissez le champ Hôte FTP (Soit adresse IP ou nom de domaine)
  • Indiquez en dessous le Répertoire où sont transférer vos données
  • Précisez le nom d’utilisateur FTP (Que vous a donné votre hébergeur ou le nom d’utilisateur que vous avez crée si vous aez vos propres serveurs)
  • Saississez votre Mot de passe, cliquez sur le bouton Test (Permet de tester les paramétres FTP que vous avez entré)
  • Puis cliquez sur la case à cocher Enregistrer pour mémoriser votre configuration

2- Transférer vos données :

Dans le panneau Fichiers

  • Sélectionner le fichier ou Dossier
  • Faîtes un clic droit – Placer

Pour récupérer un fichier distant

  • sélectionner « Affichage distant » à la place de « Affichage local »
  • Clic droit – Acquérir
  • NOUS CONTACTER :

    Avenue de l’indépendance Belge 58
    1081 Bruxelles
    Tel : +32 2 412 04 10
    Fax : +32 2 412 04 19
    Gsm : +32 485 212 722
    Email : selossej@jlgestion.be

Dreamweaver : Quelles sont les réactions de styles CSS

Créer un nouveau style CSS

Nouveau régle de style CSS 1- Dans le panneau CSS, cliquez sur l’icône entouré en rouge

CSS propose différentes possibilités pour créer des régles qui seront:

  • Classe: une régle de style CSS applicable à n’importe quel élément (Un bloc de pargraphe, une balise div, une balise d’entête …)
  • ID: un identifiant unique d’ailleurs que l’on utilise pour poistionner des balises div qui contiendront les différents éléments qui composent votre site (par ex: #Haut ou #Header, #Contenu ou #Content, #Bas ou #footer
  • Balise: Une régle applicable uniquement à la balise HTML correspondante (Ex: je crée une régle qui modifie les balises <ul> et qui me met un petit V sous forme d’image à la place du cercle classique)
  • Composé: Un exemple sera plus parlant: Je crée une régle qui va modifier les balises <ul> qui sont insérer uniquement dans le ID: #Contenu qui s’écrira de cette manière  » #Contenu ul « 

Créer une réglez de style CSS

2- Choisissez comme exemple « Balise », nous allons créer une régle qui modifie la balise HTML « body » pour que le fond de notre page soit gris et que tout le texte affiché soit en « Verdana » et taille 14

L’éditeur CSS s’ouvre, compléter en modifiant les valeurs comme dans l’exemple ci dessous

Dans la catégorie « Type »‘

Créer régle de style CSS

Puis dans la catégorie « Arriére plan »

Créer des régles de style CSS

3- Cliquer sur le bouton « Appliquer » puis « OK »

Choisissez si vous voulez que vos régles css

  • Soit applicable uniquement à cette page
  • Ou stocké dans un nouveau fichier feuille de style externe (Ce qui est préférable, nous pourrons utilisés nos régles ainsi sur toutes les pages qui seront crées), nous allons prendre ce choix

Définition de régles de style CSS

4- Enregistrer votre feuille de style, vous pouvez remarquer qu’elle a été liée à notre page

5- Vous pouvez ensuite créer autant de régle que vous voulez

Attacher une feuille de style css

1- Dans le panneau Style CSS, cliquer sur cette icône Lier feuille de style CSS

Cette boîte de dialogue apparaît

Ajouter une feuille de style

2- Cliquer sur le bouton « Parcourir », sélectionner la feuille de style où vous l’avez enregistrée

3- Valider en appuyant sur le bouton « ok »

Votre feuille de style est liée à la page

Pour éviter de les lier à chaque page que vous créez
Vous liez votre feuille de style dans votre Template (Modéle en Français)

Modifier le style css

1- Cliquer sur l’cône « Modifier »

Vous n’avez plus qu’à faire les clics qui vont bien

Supprimer une règle de style css

1- Sélectionner la ré&gle à supprimer dasn le panneau « Style CSS »
2- Cliquer sur l’icône « Supprimer

NOUS CONTACTER :

Avenue de l’indépendance Belge 58
1081 Bruxelles
Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@jlgestion.be

Dreamweaver : Comment mettre en forme à l’aide de tableaux

Vous pouvez utiliser les calques, la balise « div » ou les tableaux, la balise « table ». Sachant qu’il est préférable d’utiliser des tableaux, les balises de calques risquent de ne pas être nterprétés de la même façon dans tous les navigateurs
En bref, pour mettre en forme un site, il est impératif d’utiliser les tableaux : la balise TABLE.
Les sites web sont constitués de tableaux imbriqués les uns dans les autres pour avoir une mise en forme propre, après il ne vous reste plus qu’à être créatif lol

Ex : Dans cette exemple j’ai mis une valeur = »1″ pour l’attribut border su tableau (Ce qui nous donne un bordure, visible)

ICI PAR EX MA BANNIERE SOUS FORME D’IMAGE
Des liens | d’autres | encore des liens
Formateur Adobe Dreamweaver CS3
Maîtrisez ce puissant logiciel de Macromedia qui vous permet de générer du code HTML en faisant trés simplement des clics sur les outils. Vous n’avez plus besoin d’avoir des connaissances en HTML
Bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla, blabla, bla bla,
Créateur du site

Faites mieux, que l’exemple ci dessus

Insérer un tableau :
Dans l’onglet Commun, cliquez sur l’icône tableau (4éme en partant de la gauche)
La boîte de dialogue ci dessous apparaît

Insérer une tableau

Indiquez le nombre de lignes et de colonnes
La largeur du tableau soit en Pixel soit en Pourcentage
La largeur de la bordure (Mettez la valeur 0 pour ne pas avoir une bordure visible
Vous pouvez mettre des valeurs pour la marge intérieur des cellules et pour l’espacement entre les cellules
Vous pouvez y insérer un en tête, légende et résumé (Pas indispensable)
Cliquez sur Ok.

NOUS CONTACTER :

Avenue de l’indépendance Belge 58
1081 Bruxelles
Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@jlgestion.be

Comment gérer des sites avec Dreamweaver

Le mode avancé
Etape 1:

Gestion site Dreamweaver

1- Aller dans le menu Site
2- Cliquez sur Nouveau site
Etape 2:

Informations locales

La boîte de dialogue comporte dix catégories
Infos locales : Définition de la zone locale
1- Définissez un nom pour votre site ex: Mon site
2- Dans le Champ racine locale, indiquez le chemin où se trouve votre site
Ex : C:\Documents and Settings\Georges\Mes Documents\Mon_site
Ex : Si vous avez installé EasyPhp dans le répertoire par déf, votre dossier racine sera :
C:\Program Files\EasyPHP1-8\www\Mon_site
3- Indiquez le chemin du Dossier des images par défaut
Ex : C:\Documents and Settings\Georges\MesDocuments\Mon_site\images\
Ex : Si vous avez installé EasyPhp dans le répertoire par déf, votre dossier racine sera : C:\Program Files\EasyPHP1-8\www\Mon_site\images

Infos Distantes : Définir le type d’accés distant
Cliquez sur le menu déroulant Accés, une liste de choix apparaît avec les catégories ci dessous
Aucun : Aucune infos distantes
FTP : Permet de définir l’accés ftp du répertoire distant où seront envoyées vos données
Pour en savoir plus sur le paramétrage de l’accés ftp, consultez la rubrique Transfert de données via le client ftp de Dreamweaver
Local Réseaux : Permet de définir le répertoire distant, dans le cas ou votre serveur web se trouve sur votre réseau local, sur un lecteur réseau par exemple.
WebDAV
RDS
Base de données Sourcesafe®

Informations

1- Conserver les informations de synchronisation
2- Télécharger autom. les fichiers vers le serveur lors de l’enregistrement
Lorsque vous enregistrez un fichier, le fichier est automatiquement envoyé vers le serveur distant
3- Activer l’archivage et l’extraction de fichiers
Serveur d’évaluation : Permet de définir le modele de Serveur et le langage utilisé
La liste déroulante s’ouvre

1- Vous choisissez le modele de serveur que vous souhaitez utiliser
2- Définissez le type d’accés
Aucun
FTP : Consulter la rubrique sur le paramétrage du client FTP de Dreamweaver
Local / Réseaux :(Entrer vos paramétres comme vu ci dessus)
Webdav
Voilage
Design Notes
Les notes et remarques essentielles pour le développement d’un site Web peuvent être enregistrées dans des Design Notes. Toutefois, il faut que l’option Gérer Design Notes soit oit activée. Dans ce cas, il est possible de créer ce type de notes pour les différents fichiers du site. Quand une page contenant des Design Notes dépendantes est déplacée ou renommée, les notes sont prises en compte.
Le bouton Nettoyer permet de supprimer les notes qui ne sont plus affectés à un fichier.
Mise en forme de la carte du site
Les cartes du site sont utiles pour présenter de maniére graphique la structure du site. Il s’agit de sortes de cartes géographiques sur lesquelles les relations entre les différentes pages sont présentées
L’affichage d’une carte du site est définie dans cette catégorie
Choix des options :
Page d’accueil : Si votre page porte pas le nom index.htm, html, php etc…, Dreamweaver peut retrouver automatiquement votre page d’accueil. Si ce n’est pas le cas, vous devez saisir son nom dans ce champ.
Nombre de colonnes : Indique le nombre d’icones de pages pouvant être placées les unes à coté des autres. Selon la largeur des colonnes, définissez une valeur comprise entre 5 (largeur 150) et 10 (largeur 80) si vous ne voulez pas faire défiler la page à l’
Nombre de colonnes : Indique la largeur des colonnes en pixels. L’cone de la page a toujours la mme taille, mais si les colonnes sont trop étroites, les noms de fichiers ou le le titre des pages sous les icônes de page sont coupés
Etiquette des icônes : Vous pouvez afficher les noms de fichiers ou le titre des pages sous les icônes
Options :
Afficher les fichiers marqués comme masqués : Vous pouvez choisir d’afficher ou non les fichiers HTML cachés. Si cette option est activée, ces noms de fichiers figurent en italique dans la carte du site. Un fichier masqué est également produit quand un lien est crée vers une page de même niveau ou de niveau supérieur quand un lien existe déja en sens inverse
Afficher les fichiers dépendants: Si cette option est activée, le nom de tous les fichiers dépendants est affiché dans la carte du site. Les fichiers dépendants sont par exemple des images de la page web.
Colonne en mode fichier
Contribute
Modéles : Permet de gérer la mise à jour des modéles
Spry : Permet de définir le chemin ou sont stockés les Spry

NOUS CONTACTER :

Avenue de l’indépendance Belge 58
1081 Bruxelles
Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@jlgestion.be